Creare App mobile con Firebase Studio

Come abbiamo già avuto modo di sperimentare, Firebase Studio tende ad essere una sorta di ambiente globale di lavoro. Contempla ogni tipologia di applicazione e non disdegna linguaggi e tecnologie di qualunque parte siano. Un esempio per tutti sono le varie tipologie di backend messe a disposizione con uguale praticità.

Nell'ambito mobile la soluzione che viene maggiormente caldeggiata da Firebase Studio - sin dalle prime proposte di template nell'homepage - è Flutter ed appare davvero una scelta sensata. Vediamo perché.

Flutter per le app mobile

Il mondo dello sviluppo mobile ha dato grandi soddisfazioni a programmatori e utenti. Spesso ha richiesto però di passare per terreni abbastanza impervi. E' sempre stato afflitto da una diversificazione dell'offerta piuttosto accentuata.

A livello di sistemi operativi, almeno negli ultimi quindici anni il mondo si è diviso per lo più tra Android e iOS. In ognuno di questi (soprattutto nel primo) i diversi dispositivi sul mercato hanno costretto gli sviluppatori ad affrontare diversi fattori di forma, risoluzione di schermi e disponibilità di componenti hardware per realizzare app in grado di adattarsi automaticamente al contesto di esecuzione.

Tra le varie innovazioni necessarie nel settore, Flutter ha offerto la possibilità di utilizzare una stessa base di codice per realizzare app per ogni sistema operativo. L'intenzione di tutto ciò consisteva nell'opportunità di scrivere un unico programma per produrre una sorta di progetto generale in grado di essere compilato sia per Android che per iOS. Per la realizzazione del codice è stato scelto il linguaggio Dart. Una soluzione creata da Google stessa con l'ambizioso scopo di superare i limiti di Javascript, che ha trovato il suo regno proprio nel mobile offrendo compilazione in linguaggio nativo, hot reload, ottime prestazioni e semplicità nella gestione delle attività asincrone.

Firebase Studio per Flutter

Firebase Studio ci ha abituati alla sua grande capacità di variare l'ambiente di base per ospitare il miglior kit di sviluppo possibile per la tecnologia che stiamo trattando. Nel caso del mobile, l'opzione che ci viene offerta, nell'homepage, è proprio quella di un progetto Flutter. Se lo attiviamo, ci viene approntato in pochi secondi un'architettura che, nella visione di Firebase Studio, mette a disposizione un prompt per l'interazione con l'Intelligenza Artificiale ma mostra anche un completo connubio tra Flutter, Visual Studio Code e Firebase Studio:

L'artefatto creato è già perfettamente funzionante e riguarda una sorta di applicazione contaclick. La struttura che vediamo nella figura precedente contiene, come tratti salienti:

• la cartella lib con all'interno tutto il codice Dart di cui abbiamo bisogno. In questo caso, ci sarà il file main.dart che predispone l'app;
• la cartella android contenente un progetto Android nativo, frutto della compilazione del codice Dart/Flutter, basato sulle tecnologie Kotlin e Gradle;
• la cartella web contenente la versione web dell'applicazione;
• il file pubspec.yaml, in formato YAML, che custodisce la definizione del progetto Flutter a livello di SDK impiegato nonché le dipendenze necessarie;
• il file GEMINI.md che rappresenta una sorta di programma di progetto per Gemini. Non è un file che dobbiamo modificare ma una sorta di set di istruzioni cui Gemini dovrà attenersi per tutta la realizzazione dell'app. Le indicazioni custodite al suo interno riguardano sia la gestione del codice dell'app sia il suo stile esia il modo in cui dovranno essere apportate le modifiche in base alle richieste dell'utente.

Emulatori

Un aspetto fondamentale nello sviluppo mobile è l'utilizzo di emulatori che permettano di sperimentare il funzionamento dell'applicazione e visionare l'aspetto dell'interfaccia utente man mano che ci si lavora. Tutto ciò è così importante che lo sforzo maggiore dell'emulatore dovrebbe concentrarsi sulla velocità di rappresentazione delle modifiche in modo da supportare al meglio lo sviluppatore mentre che programma. L'emulatore in Firebase Studio appare in una scheda a sé stante e ci dà subito un'idea dell'app che è stata predisposta per noi:

L'app visualizzata nel display dell'emulatore è totalmente reale. Infatti non solo è funzionante in quanto cliccando più volte il pulsante abbiamo aggiornato il valore del numero fino a 5, L'orario che vediamo in alto a sinistra è quello corrente e si aggiorna man mano che passa il tempo.

La prima modifica con Firebase Studio

Ora che abbiamo capito l'impianto del progetto, senza imbarcarci in chissà quale grande ristrutturazione, possiamo saggiare subito la capacità di risposta di Gemini in un progetto Flutter richiedendo una modifica tanto semplice quanto evidente nell'interfaccia utente. Si tratta dell'aggiornamento del titolo dell'applicazione.

Nell'apposita sottofinestra dedicata all'interazione con la AI proponiamo il seguente prompt: cambia il titolo dell'applicazione in "Il mio contaclick".

Firebase Studio inizia ad elaborare e dopo pochissimi istanti ci propone la modifica del file lib/main.dart. Reazione corretta in quanto, come abbiamo detto, è il file in cui viene conservato tutto il codice di design e funzionamento dell'app.

Saremo noi, in questo caso, a dover accettare la modifica (la cui descrizione può essere letta nel dettaglio) e come risultato otterremo quello che vediamo nell'immagine che segue:

Qualora la modifica non dovesse apparire subito, notiamo, al di sopra dell'emulatore, una piccola barra di strumenti in cui si vede l'icona a forma di fulmine "Save and Hot reload" e quella a forma di circoletto con freccia "Restart". Esse rappresentano i comandi di aggiornamento dell'applicazione, rispettivamente, senza e con azzeramento dello stato. Una volta utilizzato uno di questi comandi di aggiornamento potremo vedere il nuovo titolo nella barra. Se facciamo inoltre caso al numero al centro noteremo che solo "Restart" lo riporta a zero e questo chiarisce il significato di "azzeramento dello stato".

Sui i progetti Flutter in Firebase Studio c'è ancora molto da vedere ma lo affronteremo nella prossima lezione.