App Inventor – Bluetooth HC06 – LED

Obiettivo: Realizzazione di una applicazione Android per la comunicazione Smartphone-Android mediante protocollo bluetooth per il comando di un singolo LED (ON/OFF).

Componenti:

  • Appinventor
  • QRDroid

TeoriaBluetooth è uno standard di trasmissione dati per reti senza fili. Questo protocollo è ampiamente utilizzato per la connessione tra i moderni smartphone e i differenti dispositivi casalinghi/industriali (amazon echo, altoparlanti, cuffie, etc). Nel caso specifico la comunicazione avviene mediante la realizzazione di una app tra Smartphone ed Arduino per il comando di un singolo LED.

Creazione della app (DESIGNER):

A seguire viene riportata una guida passo passo per la realizzazione della applicazione in questione. Prima di iniziare è opportuno scaricare i file necessari nella sezione “Componenti

  • Creazione di un nuovo progetto: attraverso il menu project creare un nuovo progetto cliccando su start new project. Denominare il progetto: BluetoothLED.

Creazione di un nuovo progetto

  • Inserimento degli elementi principali dell’applicativo: semplicemente trascinando gli elementi dalla palette (menu a sinistra) è possibile inserire i seguenti elementi: Listpicker (si trova in Palette/UserInterface), Button (si trova in Palette/UserInterface), Label (si trova in Palette/UserInterface).

Inserimento degli elementi principali

  • Adattare le dimensioni dei pulsanti: Per adattare le dimensioni dei singoli elementi cliccare su screen1 nel menu components, selezionare in seguito l’elemento (sempre nel menu componenti) e cliccare su width nel menu properties. Infine, selezionare l’opzione fill parent (riempe il contenitore genitore).

Adattare le dimensioni dei pulsanti

  • Modificare il testo: Per modificare il testo riportato nelle singole entità, cliccare sui differenti componenti nel menu componenti ed in seguito settare il testo attraverso il menu properties.

  • Componenti bluetooth e pulsante ON/OFF: Per completare l’applicativo vengono infine inseriti: il ClientBluetooth (si trova in Palette/Connectivity) e due pulsanti (ON/OFF). E’ importante considerare che a differenza degli altri elementi il modulo bluetooth non risulta visibile nella GUI perché componente non visibile

Componenti Bluetooth

Sviluppo dell’algoritmo (BLOCKS):

Terminata la creazione dell’interfaccia grafica è opportuno realizzare il codice associato all’applicazione. Per fare questo, cliccare in alto a destra sul pulsante BLOCKS.

  • Realizzazione del codice: Per gestire l’applicativo implementare la procedura riportata nella figura sottostante

Codice

Download dell’applicazione:

Per scaricare l’applicativo è necessario avere un cellulare Android con relativo lettore di QRCode. Pertanto, terminato lo sviluppo cliccare nel menu build -> App (provide QR code for APK)




App Inventor – Splash Screen

Obiettivo: Creazione di uno Splash Screen per la customizzazione delle proprie applicazioni

Componenti:

  • Logo
  • Suono Carino (Facoltativo)

Prerequisiti:

TeoriaAttraverso l’utilizzo di pagine temporizzate è possibile realizzare uno splash screen ovvero: una schermata di presentazione che molti programmi visualizzano al momento del loro avvio, recante in genere il nome e la versione del programma stesso, il logo del produttore e il copyright.h

Creazione della app:

A seguire viene riportata una guida passo passo per la realizzazione di uno splash screen, ovvero uno screen temporizzato che si apre al momento dell’avvio della applicazione contenente il logo aziendale/scolastico.

  • Creazione di un nuovo progetto: attraverso il menu project creare un nuovo progetto cliccando su start new project. Denominare il progetto: SS.

Creazione Progetto

  • Inserimento degli elementi principali dell’applicativo: semplicemente trascinando gli elementi dalla palette (menu a sinistra) è possibile inserire i seguenti elementi: Image (si trova in Palette/UserInterface), Sound (si trova in Palette/Media), Clock (si trova in Palette/Sensors). E’ importante considerare che a parte il pulsante, il clock non risulta visibile nella GUI perché componente non visibile.

Inserire elementi

  • Inserire il file di immagine: Per inserire il file di immagine cliccare su image1 nel menu components, cliccare su background in properties e uplodare il file di sfondo.

Inserire il file di immagine

  • Centrare l’immagine: Per centrare l’immagine, cliccare su image nel menu componenti ed in seguito settare la proprietà center negli allineamenti verticali ed orizzontali attraverso il menu properties

Centrare l’immagine

  • Creazione di un nuovo screen: Per inserire una seconda schermata cliccare su screen e premere su add new screen.

Creazione di un nuovo screen

Sviluppo dell’algoritmo (BLOCKS):

Terminata la creazione dell’interfaccia grafica è opportuno realizzare il codice associato all’applicazione. Per fare questo, cliccare in alto a destra sul pulsante BLOCKS

  • Associare un evento al clock: Per avviare uno nuovo screen è opportuno associare un evento al clock. Pertanto cliccare su clock1 ed in seguito trascinare nella schermata dei blocchi l’evento: “When Clock1 Timer”

Associare un evento al clock

  • Aprire un nuovo screen: Per aprire un nuovo screen cliccare su build e trascinare l’evento “Open another screen Screenname”. In seguito, inserire il nome dello screen da aprire facendo attenzione alle lettere maiuscole e minuscole.

Aprire un nuovo screen

  • Disabilitare il clock: E’ opportuno disabilitare il clock altrimenti il rischio è quello di aprire continuamente in modo automatico il nuovo screen. Pertanto cliccare su clock1 ed in seguito trascinare nella schermata dei blocchi il metodo: “Set Clock1.TimerEnabled” e settario al valore logico false.

Disabilitare il clock




App Inventor – Man on the Floor

Obiettivo: Realizzazione di una applicazione Android per la rilevazione di cadute e svenimenti

Componenti:

  • Suono Allarme (wav/mp3)
  • Sfondo carino
  • Immagine per il pulsante di soccorso
  • Appinventor
  • QRDroid

TeoriaLa realizzazione di applicazioni Android richiede la conoscenza di software specifici (Android Studio) e complessi linguaggi di programmazione (Java). Tuttavia, queste competenze non sempre sono possedute dagli studenti e dalle persone che vogliono avvicinarsi alla programmazione per la prima volta. A tale scopo, il MIT di Boston ha sviluppato un tool che permette di creare applicazioni Android in modo grafico e semplice. Questo tool, denominato AppInventor, è accessibile a tutti attraverso il seguente portale web:

https://appinventor.mit.edu

Creazione della app (DESIGNER):

A seguire viene riportata una guida passo passo per la realizzazione della applicazione in questione. Prima di iniziare è opportuno scaricare i file necessari nella sezione “Componenti

  • Creazione di un nuovo progetto: attraverso il menu project creare un nuovo progetto cliccando su start new project. Denominare il progetto: MOF.

Creazione di un nuovo progetto

  • Inserimento degli elementi principali dell’applicativo: semplicemente trascinando gli elementi dalla palette (menu a sinistra) è possibile inserire i seguenti elementi: Bottone (si trova in Palette/UserInterface), Sound (si trova in Palette/Media), Accelerometer Sensor (si trova in Palette/Sensors). E’ importante considerare che a parte il pulsante. Il suono e l’acceleramento non saranno visibili nella GUI perché componenti non visibili.

Inserimento dei componenti principali

  • Inserire il file di sfondo (background): Per inserire il file di sfondo cliccare su screen1 nel menu components, ed in seguito cliccare sulla scritta background nel menu properties. Infine, uplodare il file di sfondo (MOF-sfondo.png).

Inserire l’immagine di sfondo

  • Centrare il pulsante: Per centrare il pulsante, cliccare su screen1 nel menu componenti ed in seguito settare la proprietà center negli allineamenti verticali ed orizzontali attraverso il menu properties.

Cambiare l’immagine di sfondo

  • Cambiare immagine pulsante: Per cambiare immagine ad un pulsante, cliccare su Button1 nel menu componenti ed in seguito cliccare su images in properties ed uplodare l’immagine di riferimento (MOF-bottone.png)

Cambiare immagine al pulsante

  • Impostare il suono della frusta: Per associare un suono della frusta cliccare su sound nella schermata componenti ed in seguito premere su source nel menu di proprietà. Caricare infine il file audio associato (MOF-suono.wav)

Sviluppo dell’algoritmo (BLOCKS):

Terminata la creazione dell’interfaccia grafica è opportuno realizzare il codice associato all’applicazione. Per fare questo, cliccare in alto a destra sul pulsante BLOCKS.

  • Associare un evento al pulsante: Per riprodurre un suono quando viene premuto un pulsante è opportuno associare l’opportuno ascoltatore. Pertanto cliccare su button1 ed in seguito trascinare nella schermata dei blocchi l’evento: “When Button1 Click do”

Associare un evento al pulsante

  • Associare un evento all’accelerometro: Per riprodurre un suono quando lo smartphone viene mosso, è opportuno associare l’opportuno ascoltatore. Pertanto cliccare su accelerometrSensor1 ed in seguito trascinare nella schermata dei blocchi l’evento: “When accelerometerSensor1 sharing do”

Associare un evento all’accelerometro

  • Riproduzione del file audio: Per riprodurre il file audio nei casi precedentemente riportati è necessario aggiungere il player audio. Pertanto cliccare su Sound1 e trascinare nello schermo dei blocchi l’evento “call sound1 play”.

Riproduzione di un segnale audio

Download dell’applicazione:

Per scaricare l’applicativo è necessario avere un cellulare Android con relativo lettore di QRCode. Pertanto, terminato lo sviluppo cliccare nel menu build -> App (provide QR code for APK)