Creare app Android senza saper programmare

Molto spesso utenti inesperti del campo della programmazione chiedono se sia possibile Sviluppare App senza avere competenze informatiche.

La risposta è sì, ma con le ovvie limitazioni. Il MIT mette a disposizione uno strumento per creare app gratis e senza avere competenze di linguaggi di programmazione.

Si tratta di App Inventor 2.

App inventor è un ambiente di sviluppo semplice ed intuitivo, diviso in 2 sezioni: Designer e Blocks.

Di cosa abbiamo bisogno per utilizzare App inventor? Semplice, necessitiamo di:

  • Un Account Google
  • Uno Smartphone o un tablet Android per testare le app che svilupperemo
  • Un’app per la lettura dei QR Code (si trovano gratis su Play Store)

Bene, in questo articolo, mostreremo attraverso un semplice tutorial su come realizzare la nostra prima App.

Svilupperemo una semplice App che ci genera dei numeri casuali da 1 a 90 (da giocare, ad esempio, al lotto).

Partiamo con lo sviluppo

Accediamo al sito ufficiale di App Inventor tramite il seguente link: Sito App inventor

A questo punto dobbiamo cliccare sul pulsante Create apps posto in alto a destra, come si vede in figura:

App inventor

Una volta cliccato, accedere attraverso il nostro account google ed iniziamo a sviluppare cliccando su “Start new Project

Scegliamo il nome del nostro progetto: ad esempio Lotto

Ci apparirà la finestra Designer dove potremo dedicarci all’interfaccia grafica della nostra App

designer

Sulla sinistra sono presenti tutti gli strumenti utili allo sviluppo della nostra prima App (pulsanti, textbox, immagini, sensori, componenti layout etc). Impareremo a conoscerli utilizzandoli.

Sulla destra, sotto Components sono presenti i componenti che selezioneremo per la nostra App. Al momento troviamo solo Screen che indica lo schermo della nostra App con le relative proprietà.

Creazione dell’interfaccia grafica

La prima cosa che andremo ad inserire nella grafica sarà il titolo. Per questo utilizzeremo una Label (Etichetta)

Quindi, trasciniamo il componente Label che troviamo sulla sinistra, direttamente sopra la grafica della nostra App (Finestra bianca al centro della schermata)

label_app_inventor

A questo punto, ci apparirà nella sezione Components sulla destra, esattamente sotto Screen

components

Possiamo notare che, se clicchiamo su Label1, sulla destra (sotto properties) ci appariranno le poprietà della Label. Se invece clicchiamo su Screen1 ci appariranno le proprietà dello Schermo.

Ad esempio, cliccando su Screen1, possiamo definire il colore di sfondo della nostra App che troviamo sotto “Background color“. Scegliamo, ad esempio, il colore arancione.

Inoltre, sempre tra le proprietà di Screen1, possiamo definire l’allineamento di tutti gli oggetti della grafica. Sotto AlignHorizontal, selezioniamo “Center”

screen_properties

Bene, ora non ci resta che cambiare il testo della nostra Label. Selezioniamo Label1, in properties andiamo a modificare il campo “Text” scrivendo, ad esempio “Generatore di numeri”.

Cambiamo anche la grandezza del carattere sotto FontSize, ponendola a 20.

Dovremmo ottenere questa grafica:

grafica

Ora ci manca un altra etichetta, ovvero quella che dovrà diventare il numero che sarà estratto.

Selezioniamo una seconda Label dagli strumenti nella palette di sinistra (così come avevamo fatto per la prima Label) e trasciniamola sull’interfaccia grafica.

Cambiamone il testo, sostituendolo con dei trattini. Otterremo una grafica di questo tipo:

app_gratis

Abbiamo quasi finito la parte grafica! Ora ci basta trascinare sulla finestra centrale anche il componente “Button” ovvero il pulsante che avvierà il funzionamento della nostra App.

button_app

Sostituiamo il testo “Text for Button1” con un generico “Start” per indicare che premendo il pulsante l’app si avvierà.

Comportamento dell’App

Terminata la parte di interfaccia grafica, ora dobbiamo occuparci del comportamento. Bisogna programmarla!

Per questo, bisogna spostarsi dalla sezione “Designer” alla sezione “Blocks”, cliccando sul pulsante relativo che troviamo in alto a destra

blocks

 

In questa sezione troveremo il cestino per eliminare i blocchi errati o di cui non necessitiamo più ed, inoltre, sulla sinistra, abbiamo a disposizione tutti i blocchi per definire il comportamento dell’app.

Nel nostro caso, il comportamento sarà il seguente: “Quando clicco sul pulsante, genera un numero casuale da 1 a 90“.

Per fare ciò, selezioniamo sulla sinistra “Button1”, avremo a disposizione vari blocchi:

button_comportamento

Trasciniamo il blocco “When Button1.Click” sulla destra.

Dobbiamo definire l’azione “Genera un numero casuale da 1 a 90”, ovvero “Trasforma la label2 (attualmente dei trattini) in un numero casuale da 1 a 90.

Selezioniamo sulla sinistra Label2 e trasciniamo il blocco “Set Label2.Text” sotto When Button1.click. Il risultato deve essere il seguente:

setLabel

Per “dire” che la Label2 dovrà diventare un numero casuale da 1 a 90, andiamo sotto i Blocchi Math e trasciniamo il blocco random sostituendo il numero 100 con 90. Il risultato dovrà essere il seguente:

random

 

Installiamo e testiamo l’app!

Installare l’app è molto semplice. Ci basta cliccare su Build -> App ( provide QR code for .apk )

Ci verrà fornito un QR Code come in figura:

qrcode

Ci basta inquadrarlo con la nostra App (precedente scaricata) Qr code Reader per scaricare installare e testare l’app appena sviluppata.

N.B. ricorda di disattivare il blocco per il download delle app da sorgenti sconosciute nelle impostazioni del nostro smartphone!

Limiti di App inventor? L’app non è ottimizzata, non è possibile realizzare App complesse. Possiamo però divertirci a sviluppare app molto semplici.

Continua a seguirci, nelle prossime settimane pubblicheremo altri tutorial con l’utilizzo dei sensori del nostro Smartphone Android.

CREARE APP ANDROID SENZA SAPER PROGRAMMARE (TUTORIAL #1 APP INVENTOR)
Tag: