Bleb ti permette di dare vita alla tua app Android e di integrare componenti esterni con i Blebricks. Tutto questo è possibile senza saper programmare per Android e tramite la GPIO dei Blebricks stessi. In questo articolo ti accompagnerò in questa avventura un passo alla volta, scoprendo come sia possibile realizzare un'app Android senza neanche una riga di codice e farla interagire con i Blebricks, ma non solo. Vedremo assieme come sia possibile mettere in comunicazione i Blebricks stessi con componenti elettronici esterni.
Di Bleb, la realtà italiana nata grazie all'Ingegnere Fabrizio Innocenti con l'aiuto di suo figlio Lorenzo, ho già parlato ampiamente in questo articolo offrendo una panoramica completa della loro dimensione ma non solo. Devi sapere che il loro obiettivo, è quello di permetterti di dare vita ai tuoi progetti IoT in pochi passi attraverso i Blebricks e la prototipazione istantanea. Il processo è veramente semplice: se vuoi dare vita al tuo primo progetto e capire come funzionano i Blebricks, puoi leggere questo mio secondo articolo, ma ricordati di tornare qui! Perché in questo articolo, ti mostrerò come creare la tua app Android senza saper programmare per Android ma non solo: scoprirai come sia possibile unire i Blebricks a componenti elettronici esterni.
Integrare i componenti esterni con i Blebricks
Partiamo dal punto più immediato: integrare componenti esterni con i Blebricks, perché non si limitano a connettersi fra loro no! Al contrario offrono una GPIO a tutti gli effetti con quattro pin, alimentazione e massa:
Il Blebrick RPS con i dettagli della GPIO
Quello che hai di fronte a te è un Blebrick RPS in versione Expert, ovvero senza housing. Ma Bleb ha pensato alle esigenze di tutti: offrono i Blebricks anche in formato Elite dotati di case che puoi scoprire direttamente qui!
Nel dettaglio, puoi vedere che vengono offerti quattro pin GPIO: ciascuno di essi può essere impiegato sia come sorgente di input, sia come sorgente di ouptut, digitale e analogica a seconda delle tue esigenze. Nel nostro esempio, utilizzerò un LED con una resistenza per mostrarti come avviene la comunicazione tra Blebricks e componenti esterni:
Poiché la GPIO eroga al massimo 15mA di corrente, può andare bene una resistenza da 1kOhm come nel mio esempio, collegata all'anodo e al pin numero due della GPIO stessa.
Per accendere il LED, mi è sufficiente impostare come sorgente di output digitale il pin #2 e impostarne il valore a 255. I valori ammessi sono compresi fra 0 e 255 inclusi:
L'impostazione della GPIO tramite MakeApp
Così facendo, il LED si illuminerà: ma voglio fare di più.
Una volta capito come integrare componenti esterni con i Blebricks vediamo assieme come realizzare un'applicazione Android tutta nostra da zero e senza saper programmare e senza scrivere una singola riga di codice!
Come dare vita alla tua app grazie ad App Inventor e l'estensione di Bleb
Bleb non ci vuole far mancare nulla nemmeno lato software. Certamente, c'è MakeApp, l'applicazione ufficiale che puoi scaricare sul PlayStore con un click qui, ma possiamo anche realizzarne una nostra. Come? Grazie ad App Inventor: il software realizzato dal MIT per permettere ai bambini di imparare a creare applicazioni Android senza saper programmare. Bleb, che come realtà è stata premiata proprio dal MIT per il suo contributo, ci offre un'estensione semplificata per usare i Blebricks!
Il mio obiettivo è quello di realizzare un'applicazione che mi mostri la temperatura rilevata dal sensore presente sul BLE-B base e tramite un bottone mi permetta di accendere e spegnere il LED collegato alla GPIO. La prima cosa da fare è dirigersi sul sito di App Inventor che ti lascio a distanza di un click qui e cliccare sul bottone "Create Apps" messo bene in evidenza. Verrà richiesta la registrazione: non ti preoccupare, è completamente gratis!
A questo punto, creo un nuovo progetto cliccando su "Projects" e poi "Start a new project". Con molta fantasia dò il nome della mia app che sarà "LaMiaAppBleb" per trovarmi infine su questa schermata:
L'interfaccia di App Inventor con tutti gli strumenti messi a disposizione
Vediamo che ci sono parecchie cose a nostra disposizione, ma prima di proseguire, abbiamo bisogno di un pezzo fondamentale: l'estensione creata da Bleb per far interagire la nostra applicazione con i Blebricks.
SCARICA L'ESTENSIONE PER APP INVENTOR
Nella sezione a sinistra di App Inventor, ovvero "Palette", scorrendo verso il basso troveremo la voce "Extension": la espando e tramite l'opzione "Import extension" carico l'estensione. A questo punto, ciò di cui ho bisogno sono tre componenti che non saranno visibili nell'applicazione ma sono essenziali per la comunicazione BLE fra il nostro smartphone Android e il BLE-B. Sempre tramite la stessa sezione "Extension" potrai notare che sono apparse parecchie voci in più!
Tra queste, seleziono "BLEB" e "BasicInteractions" una per volta semplicemente trascinandole sopra lo smartphone che appare al centro della schermata:
Il componente "BLEB" appare come "non visible"
La stessa cosa la dovrò ripetere tramite la sezione "Sensors": la espando e aggiungo il terzo elemento non visibile necessario per dare vita a tutto, ovvero "LocationSensor".
I componenti che vanno a costituire la nostra applicazione
A questo punto, possiamo passare ad inserire i componenti grafici della nostra applicazione.
Diamo vita all'aspetto grafico della tua app
Ciò che dovremo fare è raggiungere questo aspetto:
La tua applicazione fatta e finita da un punto di vista grafico
Tramite la sezione "User Interface", trascino sullo schermo un oggetto di tipo "Label". Attraverso la sezione "Properties", dopo aver cliccato sull'oggetto stesso, faccio il necessario per posizionarlo al centro, renderlo in corsivo. Dimenticavo: ci voglio scrivere "La mia App per i Blebricks". Prima ancora di ciò, le voglio dare un nome ben specifico, ovvero "Intestazione". Per farlo, mi è sufficiente fare un click sull'elemento e tramite il pulsante "Rename" procedere a rinominarlo.
Per apportare le modifiche grafiche di cui abbiamo parlato tramite il pannello "Properties" spunto la casella "FontItalic", imposto il "FontSize" a 30, mentre la voce "Text" è quella che mi permette di impostare il testo come vedi dallo screenshot. In ultima battuta, per allineare al centro imposto la voce "TextAlignment" con il valore "center: 1". Aggiungo una seconda label subito sotto la prima, limitandomi solo ad impostare l'allineamento al centro, per poi ripetere l'operazione con un oggetto di tipo "Button" e una terza label: questi tre oggetti li rinomino rispettivamente in "Label_gradi", "BTN_LED" e "Label_LED". Immagino tu abbia già capito qual è il loro scopo 😀
Ultima cosa che faccio da un punto di vista grafico è impostare il testo del bottone ad "ACCENDI" tramite la field "Text" nella sezione "Properties".
Le due label piccole servono rispettivamente a mostrare la temperatura rilevata in tempo reale dal BLE-B e lo stato del LED collegato tramite la GPIO
Il funzionamento della tua app: passiamo ai blocchi
Non sarebbe un'applicazione senza la giusta dose di logica, ma non ti preoccupare: stiamo per darle vita! In alto a destra, sulla barra verde principale della GUI di App Inventor, noterai due pulsanti: "Designer" e "Blocks". Fino ad ora abbiamo usato la prima sezione, per dare vita alla logica passiamo alla seconda con un click sul bottone. La logica di App Inventor, come ti dicevo all'inizio dell'articolo, si basa sui blocchi e quindi non dovremo scrivere codice!
Rispecchia di molto la logica IFTTT su cui si basa tutto il mondo Bleb, ovvero "Se succede questo allora fai quello". Ragionando sul primo avvio, quindi quando apriamo l'applicazione, dovremo inizializzare la connessione al BLE-B e impostare una variabile che gestirà lo stato del LED, inizialmente impostato a "spento".
Per fare ciò, attraverso la sezione "Blocks" faccio un click su "Screen1" e seleziono il blocco a ferro di cavallo che recita "When Screen1 initialize". Lo trascino sull'area a destra, per poi cliccare su "BasicInteractions1": seleziono il blocco di colore viola con il testo "call BasicInteractions1 StartScan", il cui scopo è quello di attivare il Bluetooth del nostro dispositivo e instaurare la connessione con il BLE-B più vicino ad esso.
Tramite la voce "Variables" seleziono il blocco "Initialize global", per trascinarlo sull'area:
Sulla sinistra abbiamo la sezione "Blocks" che ci permette di trascinare su ciò che è il "Viewer" i mattoncini che compongono la logica della nostra applicazione. Per prima cosa ci occuperemo dell'avvio dell'applicazione.
All'avvio, quindi tramite il blocco "When Screen1.Initialize", inseriremo ad incastro il blocco "call BasicInteractions1.StartScan" ed il blocco verde "set Label_LED" assieme a quello viola preso dalla sezione "Text".
Il primo, quello viola, permette di connettere il nostro dispositivo al BLE-B più vicino.
Il secondo serve ad impostare il testo della label dove mostreremo lo stato del LED connesso alla GPIO: per farlo, valorizzo il contenuto del blocco viola con "Il LED è spento".
Infine, inizializzo una variabile globale che chiamo "stato_LED" ed inizializzo a "0": sarà necessaria per gestire lo stato del LED.
Proseguiamo nella nostra avventura per costruire blocco su blocco ciò che ci serve a visualizzare la temperatura sullo schermo tramite la seconda label:
Per far sì che la lettura della temperatura avvenga periodicamente, utilizzo il blocco "When BLEB1.OnScanTemperatureReceived".
Al suo interno, come ho fatto prima, sfrutto gli stessi blocchi per impostare il testo della seconda label con la temperatura letta tramite il blocco "get temperature".
Molto semplice e pratico.
Ma ora che hai visto come dare vita alla tua app, manca un pezzetto: interagire con i componenti esterni!
Per farlo, dovremo costruire la logica che sta dietro al bottone all'interno dell'app:
Il blocco principale è un "when click": molto banalmente, quando il bottone viene premuto, per poi integrare dentro un "if then else". Il blocco "if then else" serve a verificare lo stato della variabile globale "stato_LED" che quando valorizzata a zero, significa che dovremo accendere il LED, diversamente l'operazione da eseguire consiste nello spegnerlo. E ovviamente, invertire il valore della variabile stessa, ma non solo! Il terzo blocco viola, composto in realtà da due elementi dello stesso colore, ci permette di lanciare un comando BLE che imposta il pin numero due della GPIO come sorgente digitale di output il cui valore è uguale a zero.
Tutto questo perché, è il pin a cui abbiamo collegato l'anodo del LED.
Seguono poi i tre blocchi che modificano la scritta all'interno del bottone stesso per indicare l'inversione dell'operazione a cui serve, altrettanto per la label che indica lo stato del LED e infine ciò che ci serve per invertire il valore della variabile globale.
Devi sapere che Bleb ha pensato a tutto: non solo ad offrirci i Blebricks, non solo ad offrirci questa estensione per App Inventor, ma anche una guida dettagliata per tutti i blocchi che hanno realizzato per dare vita alle tue applicazioni!
E la puoi trovare a distanza di un click direttamente qui!
A questo punto, non ci manca nient'altro se non... Testare il tutto!
Installazione dell'app sul nostro smartphone
Abbiamo visto quanto sia davvero semplice dare vita ad un'applicazione e farla interagire con i Blebricks, ma è giusto testare anche il frutto del nostro impegno!
Tramite la voce "Build" posta in cima alla finestra di App Inventor, possiamo generare un file "apk" da installare direttamente sul nostro smartphone, diversamente possiamo generare un QR da far leggere all'applicazione "MIT AI2 Companion" anch'essa gratuita, che si occuperà di installare l'applicazione.
Una volta eseguita una delle due strade, puoi testare con mano i risultati del progetto:
L'applicazione in funzionamento con i Blebricks
In conclusione, devi sapere che anche gli altri Blebricks offerti da Bleb possono essere utilizzati nelle tue applicazioni fatte con App Inventor e non posso che invitarti a scoprirli!
SCOPRI I BLEBRICKS
