Firebase Studio: una recensione onesta con esempi

Firebase offre una potente suite di strumenti che copre tutto ciò di cui hai bisogno per creare app web e mobile moderne. È un nome popolare nel mondo degli sviluppatori ed è da tempo il backend di riferimento per le startup, con ottime funzionalità come autenticazione, cloud storage, database in tempo reale e funzioni serverless.

Google sta ora facendo un passo avanti con Firebase Studio, un nuovo ambiente di sviluppo basato sull’AI progettato per passare dall’idea all’MVP in pochi minuti. In modo simile a Replit e Lovable, Firebase Studio rende possibile creare app full‑stack usando solo un prompt.

In questo articolo vedremo cos’è Firebase Studio e come funziona. Ti mostrerò come l’ho usato per costruire da zero una dashboard IoT e condividerò le mie prime impressioni!

Tieniti aggiornato sulle ultime novità dell’AI con The Median, la nostra newsletter gratuita del venerdì che riassume le notizie chiave della settimana. Iscriviti e rimani sul pezzo in pochi minuti a settimana:

Che cos’è Firebase Studio di Google?

Firebase Studio è il nuovo strumento di sviluppo di Google, basato sull’AI, che ti permette di creare app full‑stack usando prompt in linguaggio naturale. 

È di fatto l’evoluzione di Project IDX, un IDE cloud lanciato da Google nel 2023. Project IDX puntava a essere un IDE cloud generico con supporto all’AI, ma il rebranding in Firebase Studio ne restringe il focus per ottimizzare l’esperienza degli sviluppatori Firebase. Riprende le parti migliori di IDX, come l’editor Code OSS, l’assistente AI e l’ambiente basato su cloud, e aggiunge integrazioni con i servizi Firebase come Firestore, Auth, Hosting e Cloud Functions.

Firebase Studio è stato annunciato durante il rebranding di Firebase del 2024 ed è la risposta di Firebase all’ondata crescente di strumenti di sviluppo “nativi AI”.

Come accedere a Firebase Studio

Puoi provare Firebase Studio subito andando su studio.firebase.google.com. Ti basta un account Google. Una volta dentro, puoi scrivere un prompt che descriva l’app che vuoi creare e Firebase Studio genererà un progetto pronto all’esecuzione utilizzando gli strumenti di Firebase sotto il cofano. 

Prezzi di Firebase Studio

Firebase Studio è gratuito durante il periodo di anteprima. Per impostazione predefinita, puoi creare fino a 3 workspace a costo zero. Tuttavia, alcuni servizi integrati come Firebase App Hosting o il superamento della quota gratuita per la Gemini API richiederanno il collegamento di un account di fatturazione e potranno generare costi. Il tuo progetto Firebase passerà automaticamente al piano Blaze (pay‑as‑you‑go) e ti verrà addebitato l’uso oltre le quote gratuite.

Detto questo, se prevedi di usare Firebase Studio principalmente per attività di prototipazione e sviluppo, dovresti rimanere entro i limiti gratuiti dei workspace ed esplorare Firebase Studio senza sostenere costi.

Test 1: app dashboard IoT da prompt

Per prima cosa ho deciso di testare la generazione dell’app a partire da un prompt. Quando provo strumenti di creazione app basati sull’AI, mi piace usare un prompt un po’ complesso per mettere davvero alla prova il comportamento dello strumento. Un’app to‑do di solito viene benissimo, ma un’app leggermente più complessa evidenzia davvero le aree in cui lo strumento è forte e quelle in cui fatica.

Quindi, il mio prompt è stato il seguente:

Dopo aver premuto il pulsante “Prototype with AI” e aver aspettato circa un minuto, stavo ancora fissando una schermata bianca.

Ricaricare la pagina non ha aiutato, quindi ho deciso di eliminare il workspace e riprovare. Questa volta mi è stato mostrato un piano per la mia app:

Sono rimasto piuttosto colpito dal fatto che avesse generato delle linee guida di stile modificabili (per esempio, potevo cambiare i colori semplicemente cliccandoci sopra). 

Tuttavia, se guardi la sezione delle funzionalità, puoi vedere che ha tralasciato i requisiti per Cloud Function e Firestore che avevo specificato nel prompt. In ogni caso, ho deciso che era abbastanza vicino e ho proseguito con il piano, curioso di vedere il risultato. Ecco cosa mi ha mostrato la schermata successiva:

A questo punto, il risultato mi ha lasciato un po’ tiepido. L’UI era molto basilare e, di fatto, non c’era alcuna autenticazione utente.

Ho iniziato a provare i vari pulsanti e le funzionalità della schermata del prototipo. 

Cliccando sul pulsante in alto a destra dell’UI dell’app si apre l’app in una nuova scheda. Il pulsante successivo a sinistra ti permette di condividere un link di anteprima. Piuttosto utile. Il pulsante più a sinistra dell’UI apre un selettore di componenti—ne parliamo tra poco.

Cliccando sul pulsante arancione ondulato a sinistra dell’input della chat si apre un interessante menu di “disegno”.

Sono riuscito a disegnare un rettangolo attorno a una card del sensore e specificare che volevo vedere lo stato di quel sensore. In effetti, accenderlo e spegnerlo ha poco senso se non so in che stato si trovi al momento. 

Ha effettivamente aggiunto una proprietà di stato su entrambe le card dei sensori, che si aggiorna in base al pulsante cliccato.

Ho provato ad aggiungere un nuovo sensore in cucina tramite l’UI, e ha funzionato.

Tuttavia, quel nuovo sensore non è rimasto dopo un refresh, il che è stato un po’ deludente.

A quel punto volevo dare un’occhiata al codice. Ho cliccato l’icona del codice in alto a destra nella schermata di Firebase Studio, accanto al pulsante blu “Publish”. Sono stato contento di vedere comparire un editor di codice online. È abbastanza veloce, ha un bell’aspetto e integra una funzione Gemini. Aprendo il controllo del codice sorgente ha iniziato a cercare repository Git.

E sembrava che ne avesse trovato uno e stesse aspettando che pubblicassi il branch su cui mi trovavo.

Mi è sembrato un po’ strano, quindi ho deciso di cliccare su “Publish Branch”.

Infatti, non avevo effettuato l’accesso, ed era solo una particolarità dell’editor. In ogni caso, ho apprezzato la possibilità di accedere a GitHub direttamente dall’editor online.

Quello che volevo davvero vedere era la possibilità di integrare la suite di strumenti Firebase. Sono tornato alla scheda del prototipo e ho chiesto nella chat di integrare Auth e Cloud Functions per simulare i dati dei sensori.

Ha eseguito e mi ha mostrato una schermata di Login, ma è andato subito in errore.

Uno degli errori, come si vede nello screenshot sopra, derivava dal fatto che il codice cercava di effettuare una fetch da una Cloud Function inesistente, perché non era stata proprio creata nel codice. Cliccare più volte su “Fix Error” non ha prodotto nulla.

Sono tornato alla scheda del codice e ho dovuto sollecitare l’assistente Gemini più volte prima che accettasse di creare codice per Cloud Function, e non solo una normale funzione. Ha poi aggiunto che non poteva distribuirla per me, ma poteva aiutarmi con i passaggi per farlo. Ci sta.

Dato che l’interfaccia della chat non sembrava molto brava a risolvere problemi di logica, mi sono chiesto se potesse cavarsela meglio con quelli di UI. Le ho chiesto di rendere l’UI della pagina di login più accattivante aggiungendo immagini a tema dati e analytics. Anche in questo caso nessun cambiamento, nonostante la chat indicasse che stava modificando alcuni file.

L’ultima funzionalità che volevo provare era la pubblicazione dell’app. Cliccando sul grande pulsante “Publish” in alto a destra si apre un pannello laterale con i passaggi per pubblicare l’app.

Ho deciso di creare un account di fatturazione e passare automaticamente al piano Blaze così da poter pubblicare l’app con Firebase App Hosting. Il link nel pannello laterale reindirizza alla console di Google Cloud, dove mi è stato chiesto di creare un profilo di fatturazione. Una volta cliccato conferma, sono stato reindirizzato a una pagina “URL non trovato” su GCP. 

Tornando alla scheda di Firebase Studio, ora vedevo un messaggio “Waiting for billing account from Cloud Console”. Ho aspettato qualche minuto e aggiornato più volte e alla fine sono riuscito a selezionare il mio account di fatturazione e pubblicare l’app.

Si è così concluso il mio test di “generazione dell’app da un prompt”. La mia prima impressione è che con Firebase Studio sia stato forse un po’ più difficile rispetto ad altri strumenti che ho usato in passato.

Passiamo ora al secondo test.

Test 2: generare un progetto da un template

Oltre alla generazione dell’app da prompt, Firebase Studio consente anche la creazione di app tramite template.

Nella homepage di Firebase Studio, cliccando su una delle piccole icone di framework o linguaggio nella sezione “Start coding an app” si apre una nuova schermata. Ho scelto di creare un server API Node Express chiamato “My Node App” e di usare TypeScript per farlo.

Dopo qualche secondo, il server risultante è apparso nell’editor di codice online. Niente scheda del prototipo qui, ma ha senso dato che si tratta di codice backend.

Questa volta, aprendo la scheda del controllo del codice sorgente ho avuto l’opportunità di inizializzare un nuovo repository Git.

Questo template esponeva solo un endpoint “hello world” di base, ma aveva tutto il codice e il boilerplate necessari per iniziare a scrivere una API NodeJs + Express. 

Prime impressioni e considerazioni su Firebase Studio

Nel complesso, Firebase Studio è un buon passo nel mondo dello sviluppo assistito dall’AI, ma si sente ancora molto in beta.

L’idea di passare da un singolo prompt a un’app funzionante con un prototipo visuale, anteprima live, componenti modificabili e controlli di stile è davvero entusiasmante. Ci sono anche piccole chicche ben pensate, come poter cambiare i colori cliccando direttamente su una palette o disegnare sul prototipo per chiedere modifiche.

Anche l’editor di codice integrato è stata una piacevole sorpresa: è bello da vedere, scorre fluido e include di default Gemini e il supporto a GitHub, il che ha reso piuttosto semplice smanettare con il codice. È sicuramente all’altezza di altri editor di codice online che ho provato in passato.

Detto ciò, mi sono imbattuto in diversi problemi frustranti. La generazione basata su prompt è sembrata altalenante: funzionalità richieste esplicitamente (come Cloud Functions, Auth e Firestore) sono state tralasciate e, quando le ho richieste di nuovo, il sistema le ha implementate solo in parte lasciando funzionalità rotte ed errori non risolti.

L’UI generata era piuttosto basilare e le mie richieste di aggiungere immagini di sfondo sono state ignorate. Dopo aver insistito più volte, tutto ciò che ho ottenuto è stato un gradiente di colori sullo sfondo. Ho anche incontrato alcune stranezze nella pubblicazione e nella configurazione della fatturazione, che hanno reso l’intero processo un po’ macchinoso.

La creazione di app basata su template è andata meglio. Il template backend Node.js mi ha fornito una codebase ben strutturata e pulita su cui ho potuto iniziare a lavorare subito. È sembrata molto più affidabile e a misura di sviluppatore.

A essere del tutto onesti, non sono riuscito a testare tutto, ed è chiaro che lo strumento è ancora in evoluzione. Ho visto altri segnalare che funziona meglio con casi d’uso più semplici o con prompt più strutturati, quindi potrei provare così la prossima volta.

Al momento, Firebase Studio sembra un’anteprima di ciò che lo sviluppo AI‑first potrebbe diventare. Non è ancora pronto per il grande pubblico, soprattutto se confrontato con strumenti come Replit, Lovable, Bolt o v0, ma è uno spazio da tenere d’occhio.

Conclusione

Firebase Studio ha idee davvero interessanti, ma non credo sia ancora pronto per creare da solo app pronte per la produzione. Se sei curioso dello sviluppo assistito dall’AI o vuoi esplorare cosa sta arrivando, vale sicuramente la pena farci un giro!