Firebase Studio: Uma análise honesta com exemplos

O Firebase oferece um conjunto avançado de ferramentas que abrange tudo o que você precisa para criar aplicativos modernos para Web e dispositivos móveis. Ele é um nome popular no mundo dos desenvolvedores e há muito tempo é o backend preferido das startups, com ótimos recursos como autenticação, armazenamento em nuvem, bancos de dados em tempo real e funções sem servidor.

Agora, o Google está dando um passo adiante com o Firebase Studio, um novo ambiente de desenvolvimento baseado em IA projetado para ajudar você a passar da ideia ao MVP em minutos. Similarmente a Replit e Lovableo Firebase Studio permite que você crie aplicativos de pilha completa usando apenas um prompt.

Neste artigo, exploraremos o que é o Firebase Studio e como ele funciona. Mostrarei a você como o usei para criar um painel de IoT do zero e compartilharei minhas primeiras impressões!

Mantemos nossos leitores atualizados sobre as últimas novidades em IA enviando o The Median, nosso boletim informativo gratuito de sexta-feira que detalha as principais histórias da semana. Inscreva-se e fique atento em apenas alguns minutos por semana:

O que é o Firebase Studio do Google?

O Firebase Studio é a nova ferramenta de desenvolvimento com tecnologia de IA do Google que permite que você crie aplicativos de pilha completa usando prompts de linguagem natural. 

Na verdade, é a evolução do Project IDX, um IDE em nuvem que o Google lançou em 2023. O Project IDX se concentrou em ser um IDE em nuvem de uso geral com suporte a IA, mas a reformulação da marca para Firebase Studio reduz seu foco para otimizar a experiência dos desenvolvedores do Firebase. Ele pega as melhores partes do IDX, como o editor Code OSS, o assistente de IA e o ambiente baseado em nuvem, e adiciona integrações com os serviços do Firebase, como Firestore, Auth, Hosting e Cloud Functions.

O Firebase Studio foi anunciado durante a reformulação da marca Firebase 2024, e é a resposta do Firebase à crescente onda de ferramentas de desenvolvimento "nativas de IA".

Como acessar o Firebase Studio

Você pode experimentar o Firebase Studio agora mesmo acessando studio.firebase.google.com. Tudo o que você precisa é de uma conta do Google. Depois de entrar, você pode digitar um prompt descrevendo o aplicativo que deseja criar e o Firebase Studio gerará um projeto pronto para execução usando as ferramentas do Firebase. 

Preços do Firebase Studio

Você pode usar o Firebase Studio gratuitamente durante seu período de visualização. Por padrão, você pode criar até 3 espaços de trabalho a custo zero. No entanto, alguns serviços integrados, como o Firebase App Hosting, ou que excedam a cota gratuita da API Gemini, exigirão a vinculação de uma conta de faturamento e poderão incorrer em cobranças. Seu projeto Firebase será automaticamente atualizado para o plano Blaze (pago conforme o uso), e você será cobrado por qualquer uso além das cotas gratuitas.

Dito isso, se você planeja usar o Firebase Studio principalmente para tarefas de prototipagem e desenvolvimento, deverá permanecer dentro dos limites do espaço de trabalho gratuito e poderá explorar o Firebase Studio sem incorrer em nenhum custo.

Teste 1: Aplicativo IoT Dashboard do Prompt

Primeiro, decidi testar a geração de aplicativos a partir de um prompt. Ao testar ferramentas de criação de aplicativos baseadas em IA, gosto de usar um prompt um tanto complexo para realmente testar o comportamento da ferramenta. Um aplicativo de lista de tarefas geralmente é ótimo, mas um aplicativo um pouco mais complexo realmente destaca as áreas em que a ferramenta é boa e aquelas em que ela tem dificuldades.

Então, minha solicitação foi a seguinte:

Depois de pressionar o botão "Prototype with AI" e esperar cerca de um minuto, eu ainda estava olhando para uma tela em branco.

Atualizar a página não adiantou muito, então decidi excluir o espaço de trabalho e tentar novamente. Dessa vez, você me mostrou um plano para o meu aplicativo:

Fiquei bastante impressionado com o fato de ele ter gerado algumas diretrizes de estilo que eu poderia editar (por exemplo, eu poderia alterar as cores simplesmente clicando nelas). 

No entanto, se você observar a seção de recursos, verá que ela não atende aos requisitos do Cloud Function e do Firestore que especifiquei no meu prompt. De qualquer forma, decidi que era próximo o suficiente e segui com o plano, curioso para ver o resultado. Isso é o que a tela seguinte me mostrou:

Nesse ponto, fiquei um pouco desanimado com o resultado. A interface do usuário era muito básica e, na verdade, não havia nenhuma autenticação de usuário.

Comecei a testar os diferentes botões e a funcionalidade da tela do protótipo. 

Ao clicar no botão superior direito da interface do usuário do aplicativo, você abre o aplicativo em uma nova guia. O próximo botão à esquerda permite que você compartilhe um link de visualização. Muito útil. O botão mais à esquerda na interface do usuário abre um seletor de componentes - falaremos mais sobre isso daqui a pouco.

Se você clicar no botão laranja ondulado à esquerda da entrada de bate-papo, abrirá um interessante menu de "desenho".

Consegui desenhar um retângulo em torno de um cartão de sensor e especificar que queria ver o status do referido sensor. De fato, ligá-lo e desligá-lo faz pouco sentido se eu não souber em que estado ele se encontra no momento. 

Ele adicionou uma propriedade de status em ambos os cartões de sensor, que é atualizada com base no botão clicado.

Tentei adicionar um novo sensor de cozinha por meio da interface do usuário, o que funcionou bem.

No entanto, esse novo sensor não persistiu após uma atualização, o que foi um pouco decepcionante.

Naquele momento, eu queria dar uma olhada no código. Cliquei no ícone de código no canto superior direito da tela do Firebase Studio, ao lado do botão azul "Publish" (Publicar). Fiquei muito feliz ao ver um editor de código on-line aparecer. Ele é rápido o suficiente, tem ótima aparência e possui um recurso Gemini integrado. A abertura do controle de origem iniciou a verificação dos repositórios Git.

E parecia que havia encontrado um e estava esperando que eu publicasse o ramo em que estava.

Achei um pouco estranho, então decidi clicar em "Publish Branch".

Com certeza, eu não estava conectado, e isso era apenas uma peculiaridade do editor. De qualquer forma, gostei da possibilidade de fazer login no GitHub diretamente no editor on-line.

O que eu realmente queria ver era a capacidade de integração com o conjunto de ferramentas do Firebase. Voltei à guia de protótipo e pedi no bate-papo que você se integrasse ao Auth e ao Cloud Functions para simular dados de sensores.

Ele obedeceu e me deu um Login mas imediatamente falhou com alguns erros.

Um dos erros, como pode ser visto na captura de tela acima, decorreu do fato de que o código estava tentando buscar em uma função de nuvem que não existia, pois ela não havia sido criada no código. Ao clicar em "Fix Error" algumas vezes, você não consegue nada.

Voltei para a guia de código e tive que solicitar ao assistente do Gemini algumas vezes para que ele concordasse em criar um código de função em nuvem, e não apenas uma função normal. Em seguida, ele acrescentou que não poderia implantá-lo para mim, mas poderia me ajudar com as etapas para fazer isso. É justo.

Como a interface de bate-papo não parecia ser muito boa para resolver problemas lógicos, fiquei imaginando se ela poderia resolver melhor os problemas de interface do usuário. Pedi que você tornasse a interface do usuário da página de login mais interessante adicionando imagens com temas relacionados a dados e análises. Isso também não produziu nenhuma alteração, apesar de o bate-papo mostrar que ele estava alterando alguns arquivos.

O último recurso que eu queria experimentar era a publicação de aplicativos. Ao clicar no grande botão "Publicar" no canto superior direito, você abrirá um painel lateral com as etapas para publicar o aplicativo.

Decidi criar uma conta de faturamento e mudar automaticamente para o plano Blaze para poder publicar o aplicativo com o Firebase App Hosting. O link no painel lateral redireciona para o console do Google Cloud, no qual fui solicitado a criar um perfil de faturamento. Quando cliquei em confirmar, fui redirecionado para uma página de "URL não encontrado" no GCP. 

Voltando à minha guia do Firebase Studio, agora eu podia ver a mensagem "Waiting for billing account from Cloud Console". Esperei alguns minutos e atualizei várias vezes, e acabei conseguindo selecionar minha conta de cobrança e publicar meu aplicativo.

Isso concluiu meu teste de "geração de aplicativos a partir de um prompt". Meu primeiro pensamento foi que talvez tenha sido um pouco mais difícil com o Firebase Studio do que com outras ferramentas que usei anteriormente.

Agora, vamos ao segundo teste.

Teste 2: Geração de um projeto a partir de um modelo

Embora o Firebase Studio ofereça a geração de aplicativos a partir de um prompt, ele também permite a criação de aplicativos por meio de modelos.

Na página inicial do Firebase Studio, clique em um dos pequenos ícones de estrutura ou idioma na seção "Start coding an app" para abrir uma nova tela. Optei por criar um servidor de API do Node Express chamado "My Node App" e usar o TypeScript para fazer isso.

Após alguns segundos, o servidor resultante apareceu no editor de código on-line. Não há guia de protótipo aqui, mas faz sentido, já que se trata de código de back-end.

Dessa vez, ao abrir a guia de controle de origem, tive a oportunidade de inicializar um novo repositório Git.

Esse modelo expôs apenas um ponto de extremidade básico "hello world", mas tinha todo o código e o boilerplate necessários para você começar a codificar uma API NodeJs + Express. 

Primeiras impressões e reflexões sobre o Firebase Studio

De modo geral, o Firebase Studio é um bom passo para o mundo do desenvolvimento assistido por IA, mas que ainda parece estar em fase beta.

A ideia de passar de um único prompt para um aplicativo funcional com um protótipo visual, visualização ao vivo, componentes editáveis e controles de estilo é muito empolgante. Também houve alguns pequenos toques, como a possibilidade de alterar as cores clicando diretamente em uma paleta ou desenhando no protótipo para solicitar alterações.

O editor de código embutido também foi uma boa surpresa: ele tem boa aparência, funciona sem problemas e vem com suporte para Gemini e GitHub imediatamente, o que tornou a brincadeira com o código bastante simples. Definitivamente, ele é tão bom quanto alguns outros editores de código on-line que você pode usar. editores de código on-line que experimentei no passado.

No entanto, tive alguns problemas frustrantes. A geração baseada em prompts parecia ser um acerto ou um erro: os recursos que pedi explicitamente (como Cloud Functions, Auth e Firestore) foram descartados e, quando os pedi novamente mais tarde, o sistema os implementou parcialmente, mas deixou uma funcionalidade quebrada e erros não resolvidos.

A interface do usuário gerada por ele era bastante básica, e minhas solicitações para adicionar imagens de fundo foram ignoradas. Depois de insistir várias vezes, tudo o que consegui foi um gradiente de cores no plano de fundo. Também me deparei com algumas peculiaridades relacionadas à publicação e à configuração do faturamento, o que fez com que todo o processo parecesse um pouco complicado.

A criação de aplicativos com base em modelos foi melhor. O modelo de back-end do Node.js me forneceu uma base de código bem estruturada e limpa na qual eu poderia começar a trabalhar imediatamente. Isso pareceu muito mais confiável e amigável ao desenvolvedor.

Para ser totalmente justo, não cheguei a testar tudo, e está claro que a ferramenta ainda está evoluindo. Já vi outras pessoas mencionarem que ele funciona melhor com casos de uso mais simples ou prompts mais estruturados, então talvez eu tente isso da próxima vez.

No momento, o Firebase Studio parece uma prévia do que o desenvolvimento com IA poderia se tornar. Ele ainda não está pronto para o horário nobre, especialmente se comparado a ferramentas como o Replit, LovableBolt, ou v0mas é um espaço interessante para você observar.

Conclusão

O Firebase Studio tem algumas ideias realmente interessantes, mas acho que ainda não está pronto para criar aplicativos prontos para produção por conta própria. Se você tiver curiosidade sobre o desenvolvimento assistido por IA ou quiser explorar o que está por vir, vale a pena dar uma olhada!