domenica 19 febbraio 2017

Creare App per Android senza saper programmare

Ecco una guida che può far gola a molti: come creare App per cellulari Android senza saper programmare... ed addirittura, senza dover installare programmi aggiuntivi sul pc!

Si, hai capito bene, grazie a questo tutorial, avrai le basi per poter creare app per cellulare, gratis, senza conoscere alcun linguaggio di programmazione, e senza dover installare niente sul tuo computer!
Cosa vuoi di più?


Come creare App per cellulari Android senza saper programmare


Normalmente, per poter sviluppare un'app per smartphone, bisognerebbe conoscere almeno un linguaggio di programmazione, che sia java, o un mix tra html, javascript e css, per i progetti più semplici, o altri linguaggi per poter sviluppare non solo su Android, ma anche per ios e windows phone.

Fortunatamente però, grazie a MIT App Inventor, un progetto niente pocodimeno che del Massachusetts Institute of Technology, è possibile creare applicazioni per android senza dover imparare alcun linguaggio di programmazione, ma solo tramite un'intuitiva interfaccia grafica.

Quello che bisogna fare è, collegarsi al seguente indirizzo:

http://ai2.appinventor.mit.edu

Se è la prima volta che accedi a questo servizio, ti verranno chiesti i dati d'accesso a google account, che dovrai dare in tutta serenità, insieme ai soliti consensi sui termini del servizio.

Una volta entrato nell'home page di MIT App Inventor 2, la prima cosa da fare per facilitarti la vita, sarà quella di cliccare sulla voce English e selezionare Italiano, in modo da cambiare subito la lingua del programma nella tua madrelingua.

Ora, per iniziare, dovrai creare un nuovo progetto, cliccando su: Progetti -> Avvio nuovo progetto.

Creare App per cellulari Android senza saper programmare

Dopo aver inserito il nome del progetto e cliccato su OK, verrai reindirizzato all'interno della cartella di lavoro appena generata.
La cosa bella di MIT, è che è tutto online, quindi non solo non dovrai installare nulla sul tuo pc, ma avrai tutte le tue applicazioni (o per meglio dire, i progetti che le contengono), sempre a portata di mano, da qualsiasi pc tu ti colleghi, e soprattutto senza dover installare alcun driver o framework per far girare il tutto.

L'unica cosa di cui dovrai ricordati ovviamente, è di salvare sempre i progetti prima di chiudere il sito, cliccando su Progetti -> Salva progetto.

Vediamo dunque rapidamente cosa consente di fare MIT.
Il sito è diviso sostanzialmente in 4 colonne:
  • Componenti disponibili: comprende tutti gli oggetti utilizzabili nelle tue applicazioni
  • Visualizzatore: ti mostra un'anteprima grafica delle finestre della tua applicazione, anteprima nella quale puoi ordinare gli oggetti grafici che inserisci
  • Componenti utilizzati: lista degli oggetti inseriti nella tua app, sui quali cliccare per poterne modificare le proprietà
  • Proprietà: qui potrai cambiare l'aspetto grafico dei componenti selezionati, più altre opzioni utili per ogni singolo oggetto

MIT infine, è diviso in 2 tab principali, la prima in cui ti trovi si chiama Progettazione, ed è quella dove agisci sulle opzioni che ti ho appena indicato.
La seconda tab a destra invece, si chiama Blocchi, ed è proprio lì che andrai a cliccare per aggiungere azioni alla tua applicazione.

MIT App Inventor 2

Vediamo una rapida carrellata delle varie sezioni di MIT App Inventor 2.

Componenti disponibili

Questa sezione di MIT comprende tutti gli oggetti che puoi aggiungere alla tua app android, con i quali poter di fatto dare corpo all'applicazione.
Le aree tematiche dei componenti disponibili sono:
  • Interfaccia utente: qui troverai i bottoni, le label/etichette, i campi dei form (text, checkbox, select, ecc...), la gestione notifiche, la gestione immagini, il visualizzatore web, il cursore ed altri comandi utili per la tua app androd
  • Impaginazione: sezione dedicata alla disposizione dei comandi utilizzati nell'app, sul display del telefonino in cui deve girare
  • Multimediale: opzioni per videocamera, fotocamera, registratore suoni, player video e tutto ciò che serve a far girare conenuti multimediali sulla tua app per cellulare
  • Disegno e Animazione: contiene per ora le voci palla, stage e sprite, con le quali destreggiarsi con la grafica animata
  • Sensori: giroscopio, accellerometro, orologio, posizione, prossimità, ed altri sensori utilizzabili dalla tua app (se presenti nel telefonino dell'utilizzatore)
  • Social: tasti di condivisione, di selezione contatto, email, telefonata, e tutto ciò che possa servire a condividere informazioni tra l'app ed i tuoi contatti
  • Archiviazione: importante sezione per salvare dati sul dispositivo in cui viene installata la tua app, tramite file, database tinydb, oppure nel web
  • Connettività: bluetooth e web
  • LEGO® MINDSTORMS®: funzione per interagire con questo prodotto della lego (che non conosco :p)
  • Sperimentale: qui troverai le nuove funzioni di MIT, ancora in fase sperimentale
  • Extension: interessantissima sezione che consente di installare/usufruire sulla tua app di estensioni/componenti aggiuntivi, ovvero funzionalità sviluppate da terze parti, magari proprio da te

Le altre sezioni/colonne del sito, in realtà te le spiegherò facendo un esempio pratico, giusto per farti capire quanto è facile sviluppare app per android con MIT, senza alcuna conoscenza di java (il quale codice viene comunque generato dietro le quinte).


Esempio pratico: App per Android che ripete a voce quello che scrivi


Vediamo subito i passaggi da seguire per creare la tua prima applicazione per android in pochi minuti.

1) Crea un nuovo progetto chiamato "Test"

Clicca su Progetti -> Avvia nuovo progetto, Inserisci il nome Test e clicca OK.

Crea un nuovo progetto chiamato

2) Aggiungi un'Etichetta di testo

A sinistra, nella colonna Componenti disponibili, nella sezione Interfaccia utente, trascina con il mouse la voce Etichetta nel Visualizzatore in mezzo allo schermo.

Adesso, a destra, nelle Proprietà, modifica il campo Testo, inserendoci "Scrivi il testo da pronunciare".

Aggiungi un'etichetta di testo

3) Aggiungi un campo di tipo "Casella Di Testo"

Trascina l'oggetto CasellaDiTesto dentro il visualizzatore, e se vuoi modificane le Proprietà.

Se vuoi cancellare un oggetto, puoi farlo in qualsiasi momento, cliccando sul suo nome dentro la sezione Componenti utilizzati, e poi in basso su Elimina.

Cancellare un oggetto

4) Aggiungi un Pulsante

Trascina la voce Pulsante nel visualizzatore, poi cambiagli la label modificando l'opzione Testo, scrivendoci la parola "Leggi".

Leggi

5) Aggiungi la Sintesi Vocale

Ora clicca sulla sezione Multimedia e trascina l'oggetto SintesiVocale dentro il visualizzatore.
Questo componente ovviamente, non sarà visibile all'utente finale quando gira l'app, ma servirà invece per far parlare il suo telefono.

Sintesi Vocale

6) Aggiungi le azioni alla tua app

Adesso entra nella tab Blocchi.
Qui avrai a disposizione diverse sezioni:
  • Incorporato: continene i blocchi di istruzioni principali
  • Screen1: contiene una sottolista contenente tutti gli oggetti usati nella schermata della tua app, cliccando sui quali potrai vedere che operazioni hanno a disposizione.
    Ovviamente potrebbero esserci anche Screen2, 3, 4, ecc... (o come hai chiamato le schermate della tua app), a seconda di quante finestre ha la tua applicazione
  • Qualsiasi componente: azioni generalizzate su tutti i componenti

Nello specifico di questa app android d'esempio dunque, clicchiamo su Pulsante1.
Ora, appariranno tutte le proprietà / azioni disponibili di quell'oggetto, clicchiamo sulla prima, Per sempre quando Pulsante1 Cliccato esegui (When pulsante1 Click).

Sezione Blocchi

Come intuirai subito guardando ciò che hai a video, è possibile cancellare i blocchi inseriti nel visualizzatore trascinandoli nel cestino.

Un'altra cosa che noterai, è che i blocchi inseriti hanno la forma di pezzi di puzzle.
Infatti, il tutto funziona come un puzzle, dove bisogna incastonare i pezzi per far compiere azioni in sequenza.

Adesso, clicca su Screen1 -> SintesiVocale1, poi clicca su Esegui SintesiVocale1 PronunciaTesto messaggio (Call Sintesivocale1 Speak).
Poi, trascina il blocco sintesivocale1 dentro pulsante1, in modo che lasciandolo faccia click.

Adesso clicca su CasellaDiTesto1, poi clicca sul blocco CasellaDiTesto1 Testo (Text).
Quest'ultimo blocco dovrai incastonarlo per ultimo a destra.

Blocchi inseriti

Bene, ora la tua app android è pronta per essere testata.

7) Testa la tua App

Per provare la tua prima app puoi agire sostanzialmente in 2 modi: scaricare il file apk ed installarlo sul tuo telefono, oppure usare una più comoda funzione tramite un'app aggiuntiva installata sul tuo cellulare.

Per scaricare l'apk del tuo programma, in modo da condividerlo con chi vuoi, clicca su:
Compila -> App -> Salva apk sul tuo computer

Altrimenti, per testare l'app sul tuo cellulare scegli la sequenza:
Connetti -> Al Companion

Compila apk

Se scegli il secondo metodo per testare le tue app (per me il più comodo), devi installare sul tuo cellulare MIT AI2 Companion.
Poi dovrai semplicemente:
  1. Aprire l'app MIT sul tuo cellulare
  2. Cliccare su Connetti -> Al Companion dalla pagina web dell'app da computer
  3. Cliccare su Scan QR code su cellulare e scansionare il codice che vedi sulla pagina web

QR Code App Android

scan QR Code

Se avrai fatto tutto correttamente, la tua applicazione partirà immediatamente girando dentro l'app già installata di MIT, quindi senza bisogno di alcuna installazione aggiuntiva.
La tua app verrà dunque emulata in tempo reale, e qualsiasi modifica farai lato web verrà subito replicata sul tuo cellulare, con il quale potrai testare il corretto funzionamento della tua prima applicazione per android.

Se invece vuoi installare la tua app su cellulare tramite QR code, il percorso da seguire è il seguente:
Compila -> App -> QR Code per apk
In questo esempio specifico, il tuo cellulare ti chiederà di installare un'applicazione di nome Test, e prima ancora (se non già fatto) ti chiederà di abilitare l'installazione di app da fonti sconosciute, cosa che dovrai fare (almeno per quest'app) per poter installare e provare la tua applicazione.

Una volta installata la tua app su cellulare (o fatta girare emulandola), inserendo un testo nell'apposito box e cliccando sul bottone Leggi, il tuo telefonino ripeterà ciò che hai appena scritto.

La tua prima app per android

8) Distribuisci la tua applicazione

Per poter distribuire un'applicazione sul play store di google, devi essere ovviamente registrato a google, e devi aver pagato la quota d'iscrizione (una tantum) a google developers.
Questo è un passo importante per poter iniziare a sviluppare applicazioni per il grande pubblico.
Sta a te valutare se rimanere solo uno sviluppatore per pochi amici, o se provare a fare soldi vendendo app per cellulare online.


Ovviamente questo è solo un semplice esempio, il cui file di progetto .aia volendo lo puoi anche scaricare cliccando qui (se poi non sai come caricare questo progetto nel tuo app inventor, clicca qui).
Potresti decidere di affinare questa applicazione, mettendo più controlli, ad esempio verificando se viene inserito del testo nel box, ed in caso contrario, potresti prendere in giro l'utente con una frase preimpostata :)

Le potenzialità di MIT sono quasi infinite, sta alla tua abilità logica, il capire come creare applicazioni complesse senza scrivere una riga di codice.
Con MIT puoi infatti inserire della grafica accattivante, delle logiche complesse, delle funzionalità evolute, e creare un'app che nulla ha da invidiare ad altre applicazioni a pagamento, sviluppate da programmatori esperti.

E per questa guida è tutto, nelle prossime lezioni troverai un elenco di esempi ed esercizi su MIT App Inventor 2 che ho fatto e che sto sviluppando man mano.

Torna all'elenco delle lezioni

Piaciuto l'articolo? Lascia un commento!

EmoticonEmoticon