✅ Sviluppa applicazioni Android con App Inventor 2

Sommario

1. Installazione dell'app Inventor 2
2. Esecuzione dell'app Inventor 2
3. Prima applicazione in App Inventor 2
4. Seconda applicazione in App Inventor 2

App Inventor 2 è una piattaforma che ci permette permette di sviluppare applicazioni software per Android, Questa è una creazione di Google Labs, qui possiamo visualizzare i progetti in cui stiamo lavorando con diversi tipi di strumenti di base, uno dei grandi vantaggi che offre App Inventor 2 è che l'utente può collegare una serie di blocchi per creare l'applicazione . Questo sistema è completamente gratuito e facilmente scaricabile dal tuo sito web. Le applicazioni che possiamo creare in App Inventor sono in qualche modo limitate dalla loro semplicità, anche se qui possiamo anche dedicare molto tempo allo sviluppo di infinite applicazioni per dispositivi Android di base.

Con Google App Inventor è stata dimostrata una grande semplicità d'uso che ha facilitato la comparsa di a gran numero di nuove applicazioni; Al giorno d'oggi ci sono molti utenti che sviluppano applicazioni nel centro di distribuzione delle applicazioni Android grazie a questo.

Cosa ci consente di fare App Inventor 2?Crea applicazioni per dispositivi che dispongono di un sistema Android utilizzando un browser Web e un telefono o un emulatore connesso. I server di App Inventor archiviano il tuo lavoro e tengono traccia dei tuoi progetti.

È uno strumento di sviluppo visivo molto facile da usare, quindi molti degli utenti di questo strumento non sono puramente programmatori.

Con cosa creiamo le nostre applicazioni in App Inventor 2?App Inventor Designer è l'applicazione utilizzata per selezionare i componenti per App Inventor, ci offre una tavolozza che contiene un gran numero di strumenti con cui puoi lavorare con grande semplicità.

App Inventor Blocks Editor ci permette di collegare i diversi tipi di blocchi con cui possiamo definire le funzioni di ciò che progettiamo nella nostra applicazione. Uno dei vantaggi è il modo semplice e visivo di mostrare il lavoro che stiamo facendo sotto forma di puzzle.

È facile creare applicazioni con App Inventor 2?Le diverse applicazioni che appaiono nel tempo sui dispositivi Android ci hanno mostrato che c'è un'abbondanza di applicazioni in cui possiamo lavorare, siano esse di base o complicate. L'app Inventor 2 ci consente di lavorare con una semplicità che significa che non è necessario essere un programmatore per lavorare in un ambiente di grande semplicità, né lavorare con una tavolozza degli strumenti o un insieme di blocchi che possiamo gestire praticamente come un puzzle game. Inoltre, al completamento del progetto, puoi creare un pacchetto della tua applicazione e produrre un'applicazione separata da installare.

Un altro vantaggio che ti offre è che non devi necessariamente avere un telefono con un sistema operativo Android, poiché dalla pagina di App Inventor puoi scaricare un software chiamato aiStarter che ti permetterà di emularlo dal tuo PC.

Come accedere all'App Inventor 2?Per accedere, la prima cosa che devi fare è registrarti in App Inventor, utilizzando il tuo account Gmail. È importante sapere che questo processo è completamente gratuito.

Requisiti di sistema, dispositivo o browser

Sistemi operativi

Macintosh: Mac OS X 10.5 o successivo.
Windows: Windows XP, Windows Vista, Windows 7
GNU/Linux: Ubuntu 8 o successivo, Debian 5 o successivo

Browser

Mozilla Firefox 3.6 o versioni successive
Apple Safari 5.0 o versioni successive
Google Chrome 4.0 o versioni successive
Microsoft Internet Explorer non lo supporta

Telefoni e tablet

Sistema operativo Android 2.3 ("Gingerbread") o successivo

1. Installazione dell'app Inventor 2

Prima di tutto dobbiamo sapere che L'app Inventor 2 ti consente di progettare e modificare in blocchi come abbiamo già detto e tutto questo viene eseguito nel tuo browser. Ma per testare ciò su cui stiamo lavorando (Test it live) abbiamo tre opzioni mentre costruiamo la nostra applicazione:

opzione 1Il più consigliato dalla pagina appinventor è se hai un dispositivo che utilizza Android e hai una connessione internet wireless (WiFi), possiamo lavorare solo installando l'applicazione App Inventor sul nostro dispositivo Android.

opzione 2La seconda opzione è installare il software sul nostro computer poter utilizzare l'emulatore Android e testare le nostre applicazioni mentre le stiamo costruendo.

Opzione 3In questa opzione è la più complicata e ingombrante; Se il nostro sistema operativo è Windows e abbiamo un dispositivo Android ma non abbiamo una rete wireless (WiFi), possiamo installa il software sul nostro computer e collega il nostro dispositivo Android tramite USB. Nella pagina possiamo vedere come questa opzione venga utilizzata come ultima risorsa a causa della sua ovvia complessità.

Una volta che conosciamo le diverse opzioni che abbiamo durante l'installazione di App Inventor 2, spiegherò passo dopo passo come eseguire ciascuna di queste opzioni:

opzione 1: Connessione di App Inventor 2 al dispositivo Android tramite connessione wireless (WiFi)

Passo 1
Scarica e installa l'app MIT AI2 Companion sul tuo dispositivo Android. In questa opzione dovrai solo cercare sul tuo dispositivo Android l'applicazione “MIT AI2 Companion” dal PlayStore, scaricarla e installarla oppure puoi anche scaricarla direttamente dal file APK. La cosa più consigliabile è scaricarlo dal PlayStore poiché se scarichiamo il file APK dovremo abilitare nella configurazione del nostro dispositivo Android l'opzione per consentire l'installazione di applicazioni da fonti sconosciute. Questa opzione può essere trovata nelle versioni di Android precedenti alla 4.0, per questo andremo a Impostazioni> Applicazioni e spunta la casella " Fonti sconosciute". Per i dispositivi con Android 4.0 o versioni successive, devi andare su Impostazioni> Sicurezza o Impostazioni> Sicurezza e Blocco schermoe selezionare il "Fonti sconosciute".

Qui lascio i rispettivi codici QR per scaricarlo dal Playstore o direttamente come file APK, se hai bisogno di uno scanner QR possiamo cercarne uno nel Playstore.

Play Store

File APK

NotaTieni presente che se lo scarichiamo dal PlayStore verrà aggiornato automaticamente e se utilizziamo l'opzione per scaricarlo direttamente, dovremo aggiornarlo manualmente.

Passo 2
Collega il tuo PC alla stessa rete WiFi del tuo dispositivo Android. App Inventor mostrerà automaticamente l'applicazione che stai creando, solo se App Inventor è in esecuzione sul tuo computer e se Companion è in esecuzione sul tuo dispositivo Android e questi 2 sono connessi alla stessa rete Wi-Fi.

Passaggio 3
Come connettere il progetto su cui stiamo lavorando al nostro dispositivo Android. Andiamo alla pagina di App Inventor e apriamo il progetto con cui lavoreremo, scegliamo "Connect" e "Al Companion" nel menu principale.

Ci mostrerà una finestra di dialogo con un codice QR, cerchiamo il nostro dispositivo, eseguiamo l'applicazione MIT App Companion e poi clicchiamo sul pulsante "Scansiona il codice QR" e scannerizziamo il codice:

Dopo aver atteso qualche secondo dovremmo essere in grado di vedere il progetto su cui stiamo lavorando, e verrà aggiornato in base alle modifiche che stiamo apportando.

Opzione 2 e 3: Installa App Inventor sul nostro computer con sistema operativo finestre
Qui l'installazione è la stessa per entrambi i casi.

Passo 1
Innanzitutto quello che dobbiamo fare è scaricare il programma di installazione MIT_App_Inventor_Tools_2.3.0_win_setup.exe Possiamo farlo accedendo al seguente link. Dopo aver scaricato il programma di installazione, lo eseguiamo.

Apparirà questa finestra, faremo clic su Avanti>.

Quindi accetteremo il contratto di licenza facendo clic su sono d'accordo.

Passo 2
Scegliamo se vogliamo installare il programma solo per un utente o per tutti gli utenti e clicchiamo su Avanti>.

Scegliamo i componenti che vogliamo installare e clicchiamo Avanti>.

Scegliamo dove installarlo e clicchiamo Avanti>.

Passaggio 3
Scegliamo la cartella home e premiamo Installare.

Aspettiamo alcuni secondi per l'installazione di MIT App Inventor Tools 2.3.0.

Al termine del processo di installazione, possiamo fare clic su Fine e con questo avremo terminato l'installazione.

Passaggio 4
sì lasciamo l'opzione Avvia strumento aiStarter ora selezionata Dovrebbe apparire una finestra di aiStarter dove indicherà nella prima riga il sistema operativo su cui stiamo lavorando, nella seconda riga dove si trova la cartella in cui è installato, nella terza riga il server in cui è in esecuzione, nella quarta riga è trovare l'indirizzo IP in cui l'applicazione è attiva. Per chiudere l'esecuzione di aiStarter, premi Ctrl + C.

NotaAiStarter deve essere eseguito ogni volta che lavoreremo con App Inventor 2. Se non stiamo utilizzando la connessione di rete wireless WiFi, l'icona di aiStarter dovrebbe apparire sul desktop dopo l'installazione.

2. Esecuzione dell'app Inventor 2

Primo passo
Per prima cosa dobbiamo avviare aiStarter cliccando sull'icona che si trova sul desktop.

Questo avvierà la finestra di aiStarter.

Secondo passo
Dopo aver avviato aiStarter andiamo alla pagina appinventory e facciamo clic su Crea app!

Ti chiederà di accedere al tuo account Gmail. Dopodiché ci chiederà le autorizzazioni per accedere al nostro account, qui selezioniamo Permettere. Quindi ci mostrerà i termini dei servizi. Accettiamo i termini, e poi ci chiederà se vogliamo compilare un sondaggio, e poi ci accoglierà. Clicchiamo su Continua.

Se vogliamo, per renderci tutto più facile, possiamo selezionare la lingua prima di iniziare a fare il nostro primo collegamento.

Terzo passo
Ora stiamo per iniziare un nuovo progetto.

Diamo un nome a questo nuovo progetto, nel mio caso lo darò Test_1 e accettiamo.

Ci porterà automaticamente al progetto che abbiamo appena creato e ci mostrerà gli strumenti e cosa useremo.

Quarto passo
Ora mentre stiamo per eseguire l'emulatore, farò solo una semplice applicazione che mostra un'etichetta con il tipico "Hello world" per questo trasciniamo un'etichetta dalla tavolozza e cambiamo il testo che contiene in Hello world.

Useremo l'emulatore, per questo useremo Connetti> Emulatore.

Si collegherà e ci dirà di attendere qualche secondo, seguiamo le istruzioni che ci darà di seguito.

Poiché è la prima volta che utilizziamo l'emulatore, ci chiederà di aggiornarlo e ci mostrerà nell'emulatore se vogliamo installare l'aggiornamento.

Una volta installato clicchiamo su "fatto" e riavviamo la connessione come dicono le istruzioni.

Una volta riavviata la connessione, avviamo l'emulatore e dovrebbe mostrarci il progetto su cui stiamo lavorando come puoi vedere nell'immagine seguente.

Una volta eseguiti tutti questi passaggi, avremo l'emulatore aggiornato e tutti i nostri progetti su cui stiamo lavorando potranno essere visualizzati nella schermata dell'emulatore.

NotaRaccomando che prima di iniziare qualsiasi progetto ci assicuriamo di aver avviato aiStarter in modo da non avere problemi durante il test delle nostre applicazioni ed è necessario che sia in esecuzione prima di eseguire l'emulatore sulla pagina.

3. Prima applicazione in App Inventor 2

Ora che abbiamo tutto pronto e funzionante, possiamo iniziare a lavorarci. Inventore di app, poi te lo mostro come sviluppare alcune semplici applicazioni che ci aiuterà ad avere una base per sviluppare le nostre applicazioni Android.

Passo 1
Inizieremo sviluppando una calcolatrice di base, che ci consente di eseguire funzioni matematiche tipiche come addizione, sottrazione, moltiplicazione e divisione.

Per questo, prima lo faremo Progetti> I miei progetti. Lì clicchiamo su inizia un nuovo progetto, chiamerò questo progetto Calculadora_Basica e premere il pulsante OK.

Questo ci reindirizzerà all'area di progettazione in cui lavoreremo con il nostro progetto, la prima cosa che faremo è aggiungere quattro pulsanti trascinandoli dalla tavolozza che si trova alla nostra sinistra.

Passo 2
Ora cambieremo il testo di ciascuno dei pulsanti selezionando i componenti uno per uno e modificando il testo nelle sue proprietà. Come possiamo vedere, ci sono le proprietà predefinite che ha il pulsante che selezioniamo, qui possiamo modificare come vogliamo che sia il pulsante. Per il momento mi limiterò solo a modificare il testo.

Dopo aver modificato il testo, dovresti subito notare i cambiamenti nel pulsante che stiamo modificando nel visualizzatore.

Passaggio 3
Ora, per motivi estetici, utilizzerò una disposizione orizzontale per organizzare i pulsanti che abbiamo precedentemente modificato. Lo troveremo nella tavolozza facendo clic su layout e trascinando il layout orizzontale verso il visualizzatore.

Passaggio 4
Ora aggiungeremo i nostri pulsanti uno per uno verso il nostro layout orizzontale. Dovremmo avere qualcosa del genere:

Passaggio 5
Quindi aggiungiamo 2 caselle di testo che è dove introdurremo i numeri necessari per eseguire le nostre operazioni di base di addizione, sottrazione, moltiplicazione e divisione. Oltre a questo, aggiungeremo anche un'etichetta per mostrare il risultato delle nostre operazioni. L'etichetta ei campi di testo si trovano nella tavolozza facendo clic sull'interfaccia utente. Alla fine dovremmo avere qualcosa di simile alla seguente immagine:

Passaggio 6
Stiamo andando a "blocchi”Per iniziare a configurare le funzioni dei nostri pulsanti. Per andare devi solo fare clic sui blocchi, sul lato destro dello schermo accanto al pulsante progettista.

Dovrebbe indirizzarci al visualizzatore di blocchi dove possiamo vedere i diversi tipi di blocchi che possiamo usare per le nostre applicazioni. Per ora avremo solo bisogno di utilizzare i pulsanti integrati per definire quale funzione svolgono quando ciascuno di essi viene premuto.

Per definire l'azione che esegue ogni pulsante, inizieremo prima con pulsante1, che nel mio caso ho cambiato il testo con il segno più (+) e voglio definire che ogni volta che viene premuto, aggiunge gli importi che sono in campo di testo 1 e campo di testo 2, per questo iniziamo facendo clic sul pulsante1, quindi selezioniamo "quando il pulsante1 fai clic su esegui" e lo trasciniamo nel nostro visualizzatore, dovrebbe assomigliare a questo:

Passaggio 7
Quindi aggiungiamo Label1, facciamo clic su Label1 e trasciniamo "metti testo Label1 come" nel visualizzatore e colleghiamolo a "esegui". Dovrebbe essere così.

Passaggio 8
Ora aggiungiamo la funzione di addizione, per questo facciamo clic su Math e trasciniamo per restituire la somma di due numeri e collegarla al blocco dell'etichetta.

Dopo Aggiungeremo i campi di testo selezionando TextField1, cerchiamo "TextField1 Text" e trasciniamolo per collegarlo al blocco somma. Il primo spazio per il campo di testo1 e per il secondo spazio il campo di testo2. Fare lo stesso processo dovrebbe essere qualcosa come la seguente immagine:

Passaggio 9
Ora ripetiamo i processi che abbiamo eseguito con ogni pulsante cambiando solo le operazioni matematiche a ciascuno, alla fine dovremmo avere qualcosa del genere:

E finalmente è il momento di testare la nostra applicazione, nel mio caso la proverò nell'emulatore per PC. Verifichiamo come era la nostra applicazione, possiamo testare se ciascuno dei pulsanti funziona e se soddisfano le funzioni assegnate. Nell'immagine seguente puoi vedere una divisione.

Con questo concludiamo la nostra prima semplice applicazione mobile con operazioni matematiche.

4. Seconda applicazione in App Inventor 2

Ora creeremo un'applicazione che ci permetta di salvare e visualizzare i dati da un database tyniDB. TyniDB è un database di documenti leggero, scritto in puro Python e senza dipendenze esterne.

Passo 1
La prima cosa che faremo è creare un nuovo progetto, lo chiameremo List_BD:

Passo 2
In esso aggiungeremo due disposizioni orizzontali; Nel primo aggiungiamo un'etichetta e un campo di testo, nel secondo aggiungiamo due pulsanti, dovremmo avere qualcosa del genere:

Passaggio 3
Selezioneremo ciascuna delle disposizioni, nelle proprietà modifichiamo la larghezza per adattarla al contenitore. Oltre a questo, selezioniamo un'etichetta e cambiamo il testo per inserire i dati e nei pulsanti ne chiameremo uno "Nuovo record" e il secondo "salvataggio" dovrebbero essere così:

Passaggio 4
Ora aggiungeremo un visualizzatore di elenchi in basso, a cui nelle proprietà selezioneremo l'opzione di larghezza che si adatta al contenitore e in altezza metteremo 300 px, avremo qualcosa del genere:

Passaggio 5
Aggiungiamo il nostro database TinyDB trovato su pallet> stoccaggio e trasciniamo TinyBD nel nostro visualizzatore di elenchi, in questo modo:

Passaggio 6
Ora andremo ai blocchi e la prima cosa che faremo sarà aggiungere una variabile globale di tipo testo. Per questo, prima lo faremo blocchi> built-in> variabili e da lì trasciniamo "initialize global as" e poi andiamo a text in blocchi> integrato> testo, trasciniamo la stringa di testo e la colleghiamo con "initialize global".

Passaggio 7
Configureremo quale azione eseguirà il pulsante che chiamiamo un nuovo record, che svolgerà la funzione di mettere la nostra casella di testo in bianco, per questo andremo a blocchi> Layout orizzontale2> Pulsante1 e trasciniamo quando Button1 fa clic sul nostro visualizzatore di blocchi, quindi andiamo su blocchi> Disposizione Orizzontale1> CampoTesto1, trasciniamo put TextField1.Text as, collegandolo con whenButton1.Clic e infine cerchiamo una stringa di testo e colleghiamola con "TextField1.Text as", ottenendo la seguente immagine:

Passaggio 8
Ora configureremo il nostro pulsante Salva per aggiungere dati al nostro elenco, per questo cerchiamo il nostro pulsante 2 e lo trasciniamo nel nostro visualizzatore. Allora andiamo a Blocchi> Elenco> aggiungi elemento da elencare e dove dice elenco, ci colleghiamo a una ripresa che è in Blocchi> Variabili> Take e lo colleghiamo facendo clic per selezionare i dati dall'elenco globale. Infine, dove appare l'elemento nel nostro blocco per aggiungere un elemento all'elenco, posizioniamo un blocco dal nostro TextBox1.Text, dovrebbe assomigliare a questo:

Passaggio 9
Ora aggiungeremo i valori al nostro database, per questo la prima cosa che dobbiamo fare è cercare in Blocchi> Schermo1> TinyBD, trasciniamo call TinyBD1.SaveValue e lo colleghiamo al nostro blocco Button2, seguito da questo, nell'etichetta, posizioniamo ciò che andremo a salvare, in questo caso salveremo solo i nomi, per questo cerchiamo un blocco di testo, lo colleghiamo in l'etichetta e mettiamo Nome, quindi da questo posizioniamo il valore da salvare in modo che lo prenda dalla lista globale come abbiamo fatto nel blocco aggiungi elementi.

Passaggio 10
Abbiamo solo bisogno di mostrarlo nel visualizzatore di elenchi, per questo lo colleghiamo a Button2, lo faremo Blocchi> Schermo1> ListViewer1 e trasciniamo put ListViewer1.Elements mentre colleghiamo Take Global List, mostrando qualcosa del genere:

Passaggio 11
Come possiamo ricordare, la cosa migliore dell'avere un database è che puoi chiudere la tua applicazione e i dati che hai salvato lì verranno archiviati, disponibili per quando inizi una nuova sessione. Per fare ciò, ci assicureremo che all'avvio di Screen1, il database venga aggiunto nuovamente a un elenco e riappaia nel visualizzatore di elenchi.

Per farlo non ci resta che andare su Blocchi> Schermo1 e trascina il blocco "quando Screen1.initialize per eseguire" nel nostro visualizzatore di blocchi e a questo collegheremo la variabile "put" che si trova in Blocchi> Integrato> Variabili, trasciniamo “put” e in quel blocco selezioniamo Global List a cui collegheremo da TinyBD1 “call TinyBD1. GetValue ”, in label aggiungeremo il blocco di testo a cui metteremo Name e in Value se label non esiste creiamo una lista vuota che si trova en Blocchi> Elenco> Crea un nuovo elenco vuoto. Con questo, ciò che otteniamo è che tutti i dati vengono salvati in un nuovo elenco.

Per mostrarci i dati nel visualizzatore di elenchi, cosa dobbiamo fare collegare "quando Screen1.initialize" con "Imposta ListView1.Elements come" che a sua volta è collegato con "Prendi elenco globale" come abbiamo fatto nel blocco precedente.