App mobile: evoluzione e pubblicazione con Firebase Studio

Ora che abbiamo avviato la nostra app mobile, da quanto visto nella lezione precedente, sperimentiamo come con l'Intelligenza Artificiale di Google integrata in Firebase Studio. Possiamo farla evolvere anche con poche righe di prompt.

Supponiamo di voler produrre un'app meteo che, in maniera del tutto random, generi previsioni del tempo riportando il nome della città, una temperatura estratta a caso, una breve descrizione temporale ed un'icona che rappresenti il tipo di giornata (piovosa, soleggiata, nuvolosa).

Un'app meteo con Firebase Studio

Questo il prompt che abbiamo provato:

Trasforma l'applicazione in un'app per la visualizzazione del meteo in una città scelta a priori. Per il nostro caso di studio genereremo dei dati random. Sorteggerai un valore della temperatura compreso tra i 15 e i 24 gradi Celsius. Mostrerai in alto il nome della città (supporremo di essere a Bologna) e alla sinistra dell'applicazione metterai un'icona grande che simboleggia l'andamento di massima della giornata operando una scelta a caso tra quelle disponibili (scegli tra sole, nuvolo, nuvolo con pioggia). Coerentemente con i dati che hai scelto (icona meteo e temperatura) scrivi sotto una piccola descrizione in Italiano. Il pulsante in basso a destra deve mostrare un'icona di aggiornamento e al click genererai nuovi dati random (per temperatura e icona) ma lasciando lo stesso nome della città. Il colore della barra deve essere celeste.

Come di consueto, non appena ha finito di ragionare, Gemini ci propone una panoramica delle modifiche che possono essere osservate in senso comparativo come mostra la figura seguente. In essa iniziamo a vedere le prime tracce del nuovo titolo e del tema:

L'emulatore nel browser mostra subito l'app nel nuovo formato:

Le modifiche sono state apportate essenzialmente al file main.dart che rappresenta il cuore del progetto Flutter. Come sappiamo questa tecnologia tende a rappresentare sia interfaccia grafica che funzionamento in codice, aspetto diverso rispetto alla "tradizione" della programmazione Android. Può piacere o meno ma sicuramente comporta vantaggi disperdendo meno gli sforzi ed inoltre. Come vediamo in queste pagine, l'Intelligenza Artificiale contribuisce molto a ridurre l'impegno per la modifica.

Perfezionare il progetto con i prompt

Proviamo ad ampliare il progetto con un secondo prompt (i progetti con ambizioni professionali di vibe coding sono costituiti da decine se non centinaia di prompt!) che tende a perfezionare il nostro lavoro:

Ora voglio che il titolo dell'applicazione diventi "Che tempo fa?" e sia fisso nella barra mentre il nome della città deve apparire in grande nel corpo dell'interfaccia utente, accanto all'icona del meteo mentre la temperatura deve essere sotto di loro ma sopra la descrizione. Aumenta un po' il carattere della descrizione e cambia il colore di sfondo in un celeste chiarissimo, molto più chiaro di quello della barra. La città non deve più essere sempre Bologna ma estratta a caso tra Bologna, Firenze, Perugia, Ravenna. Non voglio più allineamento centrale ma tutto il contenuto dell'interfaccia deve trovarsi in alto con un po' di margine rispetto alla barra.

Otteniamo quanto vediamo qui di seguito:

Esportare un progetto con Firebase Studio

Le problematiche legate al mobile sono specifiche dell'uso di applicazioni su dispositivi portatili che possono variare molto dall'uno all'altro. Se si è abituati a lavorare a progetti mobile con ambienti di sviluppo installati nel proprio PC, il primo dubbio che verrà riguarderà la possibilità di testare l'app su dispositivo reale tanto che nella conformazione "mobile" dell'IDE non troveremo alcun pulsante Publish. Anche dubbi di questo genere possono essere sottoposti a Gemini il quale offre soluzioni per ognuno di essi.

Innanzitutto, ricordiamo che il progetto può essere condiviso tramite GitHub e pertanto portato in qualsiasi ambiente desideriamo. Una volta esportato un progetto mobile sul nostro computer potremo procedere con gli ambienti di sviluppo tipici dopo aver comunque sfruttato a pieno il contributo di Gemini per la costruzione dell'app a suon di prompt.

Comunque, Firebase Studio offre anche l'utilizzo di terminali e lì possiamo interagire con il comando flutter. Infatti lo stesso Gemini, come modalità di test su dispositivo reale dell'applicazione, ci consiglia la generazione di un APK, il formato dei pacchetti di installazione di app per Android, che può essere ottenuto con

flutter build apk --debug

Un pacchetto APK potrebbe essere poi condiviso e provato su tablet e smartphone.

Altro aspetto fondamentale consiste nella creazione di una versione iOS del progetto. Anche per questo Gemini ci mette a disposizione un comando, ancora da terminale con il comando flutter, che consiste in

flutter create --platforms=ios

Anche questo comando può essere eseguito direttamente da Gemini e si tradurrà nella creazione di una cartella di nome ios contenente la struttura che definisce l'app nel formato dei sistemi Apple. Ricordiamo però che per procedere con lo sviluppo di questo ulteriore sistema operativo sarà necessario seguire l'opportuna documentazione e soprattutto dotarsi degli strumenti corretti, ove necessario, che potrebbero essere computer Mac e dispositivi mobile idonei.