Firebase Studio: il primo prototipo

Iniziamo ad usare Firebase Studio creando direttamente un prototipo. I nostri obiettivi per questa lezione consisteranno nel prendere confidenza con questo ambiente ottenendo qualcosa di utilizzabile subito senza riscontrare alcuna difficoltà applicativa.

Sulla prima schermata che ci appare campeggia la scritta "The full stack AI workspace" che ci ricorda sin da subito che la mission di Firebase Studio consiste nel produrre applicazioni full stack ovvero strutturate nativamente su più strati che contemplino, verticalmente, le interfacce utente (web o mobile che siano) nonché supporto per database, server e backend ma tutto gestito con la potenza dell'Intelligenza Artificiale. Forse proprio in questa accoppiata risiede, come vedremo, buona parte della carica innovativa di Firebase Studio.

Creiamo il prototipo

Appena eseguito il login utilizzando qualsiasi account Gmail (ricordiamo che Gmail non è solo un servizio di posta elettronica ma anche un sistema di autenticazione per il mondo Google e ormai non solo) si apre un form molto essenziale:

in cui possiamo riconoscere un grande campo input che rappresenta il nostro prompt ed è qui infatti che chiederemo cosa vogliamo ottenere.

Sotto il prompt troviamo i comandi essenziali per l'avvio di un progetto (tutti elementi che vedremo nel dettaglio della guida) che dimostrano al contempo quanto sia ricco questo ambiente. Troviamo infatti:

• New Workspace per l'avvio di un nuovo ambiente di lavoro, cloud-based e totalmente configurabile;
• Import Repo per l'upload di un progetto già avviato;
• un elenco di icone ognuna riportante il simbolo di un linguaggio o una tecnologia con le quali potremo avviare un processo di creazione di una specifica tipologia di app. Soprattutto qui notiamo come esse appartengano a "domini" diversi dell'Informatica ovvero backend web (Go, Python Flask, Java, .NET, Node Express), mobile (Android e Flutter), API di Intelligenza Artificiale (Genkit e Gemini API), web app (Angular, Next.js, React, Astro) e database (MongoDB).

Noi inizieremo in maniera diretta usando da subito un prompt per vedere cosa succede.

La nostra prima applicazione con Firebase Studio

Il prompt che scriviamo è il seguente:

Crea un'app che mostri una frase motivazionale famosa, in lingua italiana, ogni volta che la apro. Desidero che sia una frase di un personaggio importante a livello storico e che ne sia citato l'autore. Serve che ci sia un tasto che produca una nuova frase ad ogni click.

La digitiamo e premiamo il pulsante Prototype with AI.

Dopo pochi istanti di riflessione, quello che appare non è direttamente l'applicazione ma la risposta di Gemini. Infatti, dovrebbe essere noto che i prompt - anche nel comune uso quotidiano - sono nati per instaurare un dialogo con l'utente che permetta di aggiungere elementi e verificare errori per portare l'AI a completare una soluzione davvero utile e, via via, imparare essa stessa. Qui infatti viene proposta una Blueprint dell'app con un riassunto propositivo di quanto Gemini ha capito della nostra richiesta e, tutto sommato, sembra abbastanza rispondente. Si noti che con il campo input in basso l'AI è in attesa di ricevere spunti ulteriori che tuttavia al momento non offriremo.

Al click del pulsante Prototype this app inizia un processo dinamico di creazione che ci mostrerà una sorta di programmatore invisibile che inizierà a scrivere codice nell'ambiente che si apre.

Quello che appare in figura è il nostro risultato:

Osserviamone le caratteristiche:

• nella barra degli indirizzi (non mostrata qui in figura) appare un URL nel formato https://studio.firebase.google.com/u/2/studio-12345678 che sarà il riferimento univoco al nostro workspace e che da ora apparirà nella Dashboard (la pagina iniziale) per riportarci a questo progetto;
• sulla sinistra appare l'anteprima dell'applicazione, funzionante (al click del pulsante la frase si aggiorna);
• il lato destro contiene il prompt in cui vediamo che tutto ciò che appare è la continuazione del nostro dialogo iniziato con la richiesta iniziale;
• in alto a destra ci sono due comandi per pubblicazione e revisione che permettono di passare al codice (ricordiamo che Firebase Studio è essenzialmente un IDE) o alla pubblicazione.

Ora che possiamo fare?

Il risultato, per avere semplicemente digitato una frase, può sembrare già interessante ma è proprio qui che il lavoro inizia.

Vedremo sin dalla prossima lezione come un progetto (in questo caso è stato utilizzato di default il framework Next.js) deve essere portato avanti continuando a dialogare con il prompt sulla destra o passando alla modifica del codice o, probabilmente cosa che sarà ancora più interessante, modificare il codice in maniera mirata facendosi guidare dalla indicazioni delle AI anche non conoscendo alla perfezione il framework su cui è basata l'app.