Obiettivo: Realizzazione di una applicazione Android per riprodurre delle emoticon attraverso la pressione di pulsanti

Componenti:

• Sfondo carino
• Immagine Emoticon Felice
• Immagine Emoticon Triste
• Appinventor
• QRDroid

Teoria: La 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: Emoticon.

• Inserimento degli elementi principali dell’applicativo: semplicemente trascinando gli elementi dalla palette (menu a sinistra) è possibile inserire i seguenti elementi: 2 Bottoni (il pulsante si trova in Palette/UserInterface) ed una immagine (si trova in Palette/UserInterface).

• 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 (EMOSfondo.png).

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

• Cambiare il testo dei pulsanti: Per cambiare il testo di un pulsante, cliccare su Button1 nel menu componenti ed in seguito cliccare su text e modificare il testo di riferimento.

• Inserire le immagini contenti le emoticon: Per associare delle immagini ad un elemento è necessario innanzitutto caricare i file di sfondo. Pertanto selezionare image1 nella schermata componenti ed in seguito premere su Picture nel menu di proprietà. Caricare infine i due file associati (EMOFelice.jpeg, EMOTriste.jpeg)

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 cambiare uno sfondo di una immagine 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”. Eseguire la medesima operazione anche con il pulsante 2.

• Modificare l’immagine: Per modificare il file associato ad una immagine selezionare il metodo set image Picture ed indicare il nome corretto del file nel campo stringa.

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)

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

Teoria: Bluetooth è 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.

• 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).

• 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).

• 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

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

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)

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

Componenti:

• Logo
• Suono Carino (Facoltativo)

Prerequisiti:

App Inventor – Man on the Floor

Teoria: Attraverso 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.

• 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 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.

• 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

• Creazione di un nuovo screen: Per inserire una seconda schermata cliccare su screen e premere su add new 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”

• 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.

• 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.

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

Teoria: La 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.

• 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.

• 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).

• 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 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)

• 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 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”

• 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”.

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)