AppInventor 2. Giuseppe Latini

Transcript

1 AppInventor 2 Giuseppe Latini

2 Scopo Mi chiamo Giuseppe Latini, sono un appassionato di software Open Source, lavoro nel settore IT di una banca, personalmente non vendo nulla, sono qui per pura passione e per il gusto di raccontarvi AppInventor in cui mi sono imbattuto casualmente qualche mese fa e da cui fui subito affascinato, ringrazio l'amico Luciano Sereni il quale mi passò il link che ci fu utile alla realizzazione di un piccolo progetto in connubio con Arduino. Ringrazio anche il collega Gianluca Bompadre che mi ha aiutato a modificare il footer della presentazione, operazione non semplicissima per chi non conosce bene Impress. La trattazione è rivolta ai principianti, quindi si cercherà di non dare nulla per scontato. Premetto che non conosco tutto sull'argomento ed anzi mi auguro di uscire dall'aula arricchito dalla discussione che avremo fatto insieme! Giuseppe Latini MIT App Inventor 2 2

3 Che cos'è AppInventor? Si tratta di uno strumento utile alla realizzazione di App per Android in modo abbastanza intuitivo, senza dover conoscere o imparare la sintassi di alcun linguaggio di programmazione! Giuseppe Latini MIT App Inventor 2 3

4 Cenni di storia, versione 1 Fu creato da Google come strumento di insegnamento per i programmatori alle prime armi. Ambiente molto intuitivo, grazie a blocchi di colori e forme diverse che si compongono come in un puzzle. Il 10 agosto 2011 però Google comunicò che il progetto App Inventor sarebbe stato chiuso il 31 dicembre Giuseppe Latini MIT App Inventor 2 4

5 Cenni di storia, versione 2 Fu allora che entrò in azione il MIT (Massachusetts Institute of Technology) prendendosi in carico il progetto di App Inventor e facendolo diventare App Inventor Edu, chiamato anche MIT App Inventor 2. Giuseppe Latini MIT App Inventor 2 5

6 Cosa serve per cominciare? Uno smartphone con Android; App: MIT AI2 Companion dal Play Store; Un computer non importa quale S.O. Purché supporti Chrome; Il browser Google Chrome; Una rete wifi (o i driver USB per lo smartphone); Un account Google (oppure Ai2LiveComplete) Connessione ad internet (oppure Ai2LiveComplete). Giuseppe Latini MIT App Inventor 2 6

7 Allora cominciamo online! Puntiamo il browser Chrome a questo indirizzo: Verrà richiesto di autenticarci inserendo un account Google, per es. Gmail; Una volta eseguito il logon andremo sul menù Project e selezioneremo la voce New Project A quel punto verrà aperta la schermata web di sviluppo in modalità Design. Giuseppe Latini MIT App Inventor 2 7

8 GUI di sviluppo - Design Giuseppe Latini MIT App Inventor 2 8

9 Aggiunta elementi al progetto Oltre agli elementi di input, output, sensori, presentazione, memorizzazione e comunicazione, scegliendo fra una grande varietà a seconda delle nostre necessità, avremo la possibilità di aggiungere anche diverse schermate oltre la principale che non può essere rinominata od eliminata. Giuseppe Latini MIT App Inventor 2 9

10 Elementi principali Nel menù di sinistra troveremo tutti gli elementi (visibili o no) che sarà possibile utilizzare trascinando al centro dello schermo Drag & Drop per aggiungere effetti e funzioni alla nostra applicazione, cercheremo di comprendere come utilizzarli e dove trovare ciò che potrà fare al nostro caso. Infine nel pannello di destra sarà possibile rinominare gli identificativi degli elementi ed impostarne le specifiche proprietà iniziali, come ad esempio colore allineamento, dimensione font, valori, etc. alcune di esse potranno all'occorrenza essere variate dall'applicazione durante il runtime Giuseppe Latini MIT App Inventor 2 10

11 Elementi principali continua... Alla destra di ogni elemento troveremo un cerchio con all'interno un punto interrogativo, l'help! Cliccandoci avremo una breve panoramica sulle funzionalità, se non dovesse bastarci, potremo cliccare sul link more information per avere maggiori dettagli! Nelle prossime slides vedremo una panoramica sugli elementi che sarà possibile aggiungere. Giuseppe Latini MIT App Inventor 2 11

12 Palette: Layout Troviamo 3 elementi: HorizontalArrangement, TableArrangement. VerticalArrangement essi ci consentiranno di collocare al meglio tutti gli altri elementi visibili nel pannello della nostra app. Giuseppe Latini MIT App Inventor 2 12

13 Palette: User Interface Sono attualmente composte da 14 elementi fra i quali: bottoni, etichette, varie caselle di testo, checkbox, selezionatori di data, selezionatori di ora, notifiche, browser web, etc. Giuseppe Latini MIT App Inventor 2 13

14 Palette: Media Composta da 10 Oggetti per riprodurre file sonori e video, registrare suoni foto e video, sintetizzare effetti sonori, pronunciare testo, digitalizzare audio in testo, tradurre fra diverse lingue. Giuseppe Latini MIT App Inventor 2 14

15 Palette: Drawing and Animation Canvas Ball ImageSprite Giuseppe Latini MIT App Inventor 2 15

16 Palette: Sensor AccelerometerSensor (misura accel) BarcodeScanner (con app esterna) Clock (timer) Location (gps) NearField (funzionalità NFC) OrientationSensor (bussola) Giuseppe Latini MIT App Inventor 2 16

17 Palette: Social ContactPicker Picker PhoneCall PhoneNumberPicker Sharing (condivide su diversi ambienti) Texting (invia e riceve SMS) Twitter (condivide specificamente su Twitter) Giuseppe Latini MIT App Inventor 2 17

18 Palette: Storage File FusiontablesControl TinyDB TiniWebDB Giuseppe Latini MIT App Inventor 2 18

19 Palette: Connectivity ActivityStarter BluetoothClient (es: per HC06) BluetoothServer Web (HTTP GET, POST, PUT, and DELETE requests) Giuseppe Latini MIT App Inventor 2 19

20 Palette: LEGO MINDSTORM Questo gruppo di elementi è orientato ad una specifica applicazione, contiene una serie di oggetti in grado di colloquiare con il Robot ntx della Lego vedi progetto su: Giuseppe Latini MIT App Inventor 2 20

21 Passiamo ora a collegare i blocchi! Una volta inseriti tutti gli screens e elementi dei quali pensiamo di aver bisogno, passiamo a collegare i blocchi per implementare le funzionalità della nostra APP, quindi clicchiamo sul bottone Blocks Giuseppe Latini MIT App Inventor 2 21

22 Considerazioni sui blocchi Occorre tener presente che le varie schermate che andremo ad aggiungere sono isolate fra di loro, ovvero i blocchi e le variabili anche se definite a livello globale sono utilizzabili solo nella schermata in cui sono stati collocati! Il modo più pratico per passare informazioni fra le schermate è quello di avvalaersi di uno storage, ad esempio File o meglio TinyDB. Giuseppe Latini MIT App Inventor 2 22

23 Elementi del menù Blocks Nel menù di sinistra troviamo i vari blocchi disponibili raggruppati in 3 sezioni: Built-in (quelli forniti dal sistema) ScreenX (quelli aggiunti in precedenza alla schermata corrente X) Any component (utili per organizzare e gestire gli oggetti in liste) Giuseppe Latini MIT App Inventor 2 23

24 Blocks: Built-in Control (elementi per il controllo procedurale, ciclico e decisionale) Logic (definisce costanti True e False e le operazioni logiche di base, come NOT, OR ed AND) Math (test, operazioni e conversioni su operandi numerici) Text (varie operazioni sui testi, concatenamenti, frazionamenti, comparazioni e test) Lists (permette di creare delle liste di elementi per essere trattate in modo ciclico, un surrogato degli arrays) Colors (definisce i colori di base e permette di creare colori personalizzati) Variables (consente la gestione di variabili private e pubbliche) Procedures (consente di definire subroutine e funzioni che ritornano un valore al chiamante, per razionalizzare il progetto raggruppandovi i blocchi che vengono richiamati in più punti) Giuseppe Latini MIT App Inventor 2 24

25 Blocks: ScreenX In questo raggruppamento troveremo elencati tutti i blocchi relativi agli elementi che avremo inserito nella schermata X. Giuseppe Latini MIT App Inventor 2 25

26 Blocks: Any Component In questo raggruppamento troveremo elencate tutte le tipologie relative agli elementi che avremo inserito nella schermata X, denominate Any Buttons, Any Labels, utili per essere gestiti tramite le Lists. (in Built-in) Giuseppe Latini MIT App Inventor 2 26

27 Come comporre i blocchi Cliccando sul nome dell'elemento nella parte sinistra, verranno visualizzate tutte le sue funzionalità, colorate diversamente a seconda della tipologia ed aventi degli incastri per facilitarne il collocamento, se si cercherà di incastrare dei blocchi non compatibili fra di loro, l'operazione sarà rigettata, vedremo proprio il blocco allontanarsi dall'incastro, queste facilitazioni ci aiuteranno a capire come muoverci. Giuseppe Latini MIT App Inventor 2 27

28 Debugging della nostra APP Quando penseremo di aver completato tutta o una porzione della nostra app possiamo attivare la funzione di debugging per verificarne all'istante la funzionalità! Giuseppe Latini MIT App Inventor 2 28

29 Come avviare il Debugging Dal menù Connect, selezionare All Companion, apparirà un qrcode, a quel punto sullo smartphone collegato in wifi, attivare l'app MIT AI2 Companion, quindi cliccare sul bottone scan QR code e far leggere il codice apparso a video in precedenza e... boom! La nostra APP sarà eseguita sullo smartphone ed avremo la possibilità di interagire sulla consolle per modificarne il funzionamento al volo e correggerne eventuali errori! Giuseppe Latini MIT App Inventor 2 29

30 La nostra APP è pronta Una volta terminate le attività di debugging, possiamo prelevare l'app tramite il menù Build tramite due funzioni: App (Provide QR code for.apk) App (Save.apk to my computer) Giuseppe Latini MIT App Inventor 2 30

31 App (Provide QR code for.apk) L'installazione può essere fatta utilizzando la stessa app che abbiamo già usato per il debugging MIT AI2 Companion, quindi cliccando sul bottone scan QR code e facendo leggere il codice che apparirà a video dopo aver atteso il termine della compilazione. Giuseppe Latini MIT App Inventor 2 31

32 App (Save.apk to my computer) Questa funzione ci scaricherà il file.apk sul nostro computer, all'interno della cartella che sceglieremo, in questo modo potremo facilmente distribuirla su più dispositivi, pubblicarla su siti online e previo ulteriore trattamento e dopo esserci registrati, anche sul Play Store di Google. Giuseppe Latini MIT App Inventor 2 32

33 Occorre tener presente che... Nel caso in cui installeremo la nostra APP senza avvalerci del Play Store, sarà indispensabile attivare sul dispositivo, la funzionalità di accettare.apk da sorgenti sconosciute, al termine dell'installazione potremo per sicurezza disattivare tale funzionalità. Giuseppe Latini MIT App Inventor 2 33

34 Proviamo a scrivere insieme la prima app! Ora proviamo a seguire insieme la realizzazione di una semplicissima App in grado di eseguire un'operazione matematica fra due numeri inseriti in altrettante textbox alla pressione di un bottone. Giuseppe Latini MIT App Inventor 2 34

35 Lista della spesa Vediamo prima come funziona questa semplice APP, dopodiché passiamo ad analizzarne gli elementi ed i blocchi per capire in dettaglio com'è stata realizzata, partiamo dalla Procedura: Capitalization, per poi andare ai bottoni Salva e Annulla, il resto sarà coinvolto automaticamente. Giuseppe Latini MIT App Inventor 2 35

36 AI2 Offline E' possibile scaricare AI2 Offline prodotto per attivare un ambiente AppInventor standalone, particolarmente utile se vogliamo sviluppare un'app e ci troviamo in una zona sprovvista di connessione ad internet, in questo caso per debuggare le app, sullo smartphone andrà installata una particolare versione della MIT App Inventor 2 Companion Version: 2.19ai2 contenuto nel file compresso di Ai2LiveComplete), vedi links nelle slides conclusive. Nel casi si utilizzi la predetta versione dell'app Companion in ambiente online, il sistema ne proporrà l'aggiornamento, che è consigliabile evitare qualora in seguito s'intenda utilizzare di nuovo anche la componente offline. Giuseppe Latini MIT App Inventor 2 36

37 Limitazioni La limitazione più grande al momento è la mancanza di strumenti per la creazione di un servizio, per questo motivo qualcuno parla del prodotto come di un'auto senza ruote, anche se si può in qualche modo superare il problema tramite Tasker vedi links nelle slides conclusive. Manca la gestione degli arrays, occorre pertanto organizzare il lavoro con criteri differenti ad esempio con le liste Anche se è possibile effettuare le operazioni più standard, alcune classi per implementare servizi molto particolari potrebbero non essere ancora previste Giuseppe Latini MIT App Inventor 2 37

38 Urls utili Accesso: AiLiveComplete: AppInventorOffline_02May14.zip /?source=navbar Istruzioni di installazione di AiLiveComplete: Avvio come servizio: Giuseppe Latini MIT App Inventor 2 38

39 Buon lavoro e... GRAZIE PER L'ATTENZIONE Giuseppe Latini MIT App Inventor 2 39