Desenvolvimento Assistido por IA: Explorando o Firebase Studio

Fabio Colatto — Wed, 30 Jul 2025 21:26:44 +0000

Este artigo é voltado a profissionais que desejam experimentar o uso de ferramentas de desenvolvimento com inteligência artificial (IA), em especial o Firebase Studio, para aumentar sua produtividade e obter um primeiro contato com essas tecnologias emergentes. O conteúdo tem caráter introdutório, e não se propõe a definir melhores práticas ou diretrizes definitivas.

Introdução

Com o crescimento exponencial de soluções de desenvolvimento assistidas por IA, surgiu a necessidade de registrar e compartilhar experiências práticas que possam orientar iniciantes em suas primeiras interações com essas plataformas. Este artigo surgiu como parte de uma jornada de aprendizado pessoal, com o objetivo de documentar e sistematizar o uso do Firebase Studio - uma ferramenta que permite prototipar aplicações com suporte de IA generativa, baseada em prompts.

Em um mercado cada vez mais dinâmico e competitivo, ferramentas como Lovable, Bolt e Firebase oferecem abordagens inovadoras para o desenvolvimento de software. Embora muitas dessas soluções possuam planos gratuitos com limitações, o Firebase Studio se torna uma ótima porta de entrada para experimentar as possibilidades do desenvolvimento orientado por IA.

Passo 0.0 - Introdução a Prompts

Antes de avançar no uso da ferramenta, é importante compreender o que é um prompt. Se trata de instruções textuais fornecidas a modelos de linguagem baseados em inteligência artificial, como o Firebase Studio, para que realizem tarefas específicas. Em outras palavras, prompts são a forma mais eficiente de comunicação entre usuário e IA, podendo abranger desde o esboço visual da aplicação até a lógica de negócios.

Criar prompts claros e bem estruturados é fundamental para obter bons resultados. O uso correto dessa técnica é conhecido como engenharia de prompt e impact diretamente na assertividade das respostas geradas pela inteligência artificial.

Se desejar aprofundar no tema, cada ferramenta possui sua documentação específica sobre o tema:

Prompts eficientes no Bolt
Engenharia de prompt no Lovable
Comandos eficazes no Firebase Studio

Esses guias são recursos importantes para superar eventuais limitações ao longo do desenvolvimento com uso dessas ferramentas.

Passo 0.1 - Acessando o Firebase Studio

Após o login, o Firebase Studio apresenta uma interface semelhante à de chats com IA, já conhecidos como o ChatGPT da OpenAI, com um campo de entrada para prompts no centro da tela:

Além disso, é possível integrar repositórios, associar o projeto a um espaço de trabalho do Google Workspace ou selecionar uma linguagem de programação especifica para o seu projeto:

Para este tutorial, iremos ignorar essas opções e focar na criação de uma aplicação simples, com o objetivo de validar o funcionamento da plataforma.

Passo 0.2 - Criando o Primeiro Prompt

O primeiro prompt serve como base para a aplicação de exemplo, voltada à gestão de projetos. A seguir, um modelo de prompt estruturado que foi usado para a criação da aplicação:

Crie um aplicativo para gestão de projetos, com: 

Página inicial, que mostre a data exemplo: "Quinta-feira, 28 de julho de 2025" e a mensagem abaixo "Melhore seu raciocínio hoje!" abaixo liste os projetos em execução e ao lado liste as tarefas pendentes. Abaixo mostre um dashboard com as informações dos projetos e filtros para semana e mês.

Página de Projetos, com opção para cadastro de projeto com data de início (data gerada automaticamente ao cadastrar um novo projeto), data limite (deve considerar 5 dias úteis antes da data de entrega) e data de entrega (deve ser preenchida no cadastro do projeto) e botão para adicionar tarefa. 

Página de Tarefas, com opção para cadastro de tarefas, com data de início (data gerada automaticamente ao cadastrar uma nova tarefa), data limite (deve considerar 5 dias úteis antes da data de entrega) e data de entrega (deve ser gerada automaticamente considerando 3 dias úteis antes da data final do projeto associado a tarefa) e botão para adicionar nova tarefa.

Lógica: Um projeto não necessita de uma tarefa, mas toda tarefa deve estar associada a um projeto.

O prompt acima define as estruturas e regras de negócio da aplicação. Ferramentas de IA interpretam esse tipo de descrição como diretrizes para montar o protótipo.

Passo 1.0 - Prototipando com IA

Após inserir o prompt acima, basta clicar em "Prototype with AI" para iniciar a geração da aplicação.

A ferramenta exibirá um resumo com as informações principais:

Nome do Projeto
Estilo de Design
Tecnologias Utilizadas

É possível editar esses parâmentros clicando em "Customize", embora neste exemplo optei por seguir o fluxo padrão, sem maiores edições.

Passo 1.1 - Construindo o Protótipo

Com o prompt revisado e validado, basta clicar em "Prototype this App" para iniciar a geração do app. A mensagem "OK, let's prototype this app!" indica que o processo começou.

O Firebase Studio utiliza parte do processamento local do computador, por isso o tempo de execução pode variar dependendo das suas configurações. Ao final, será exibido o esboço funcional do aplicativo:

Se tudo correr bem, o resultado é um protótipo navegável, com layout e interações básicas. Essa versão já permite avaliar a disposição das informações, responsividade e lógica geral da aplicação.

Passo 1.2 - Correção de Erros

Durante os testes, podem surgir erros - que serão sinalizados pelo ícone do dev tools na interface, por padrão no canto inferior esquerdo.

Clique sobre o ícone para visualizar o erro com detalhes, também é possível copiá-lo ou abrir o inspetor do Node.js. O Firebase Studio também apresenta uma sugestão de correção automática direto no chat:

Basta clicar em "Fix Error", direto no chat, para que a IA tente corrigir automaticamente o problema. Esse processo pode ser repetido, mas é importante não insistir em correções em excesso. Considere deletar o projeto atual e recomeçar o processo caso os erros sejam seguido ou o aplicativo apresente falhas persistentes, essa é uma pratica recomendada para lidar com situações como essa, visando manter um código limpo e funcional.

Passo 1.3 - Testando o Aplicativo

Com o protótipo funcional, o próximo passo é testar cada funcionalidade implementada. Mesmo sem publicação, é possível abrir o app em uma nova janela para simular o uso em ambiente de produção.

O ícone "Open in New Window" permite essa visualização. Caso o ícone do Dev Tools esteja obstruindo a interface, é possível reconfigura-lo via menu clicando em Preferences.

Passo 1.4 - Limitações da Versão Inicial

Vale lembrar que o protótipo gerado é uma primeira versão funcional, ainda sem integração com banco de dados. Algumas funcionalidades podem estar limitadas ou inoperantes, o que é esperado neste estágio.

Passo 2.0 - Adicionando Nova Funcionalidade

Para exemplificar a adição de uma nova funcionalidade ao projeto, foi solicitado ao Firebase o seguinte prompt:

"Adicione ícone para ocultar menu lateral"

O resultado porém, não foi satisfatório:

Em um novo prompt foi solicitado um ajuste:

"Deixe o usuário decidir quando ocultar o menu"

Agora sim o resultado atendeu o esperado:

O ícone foi adicionado com sucesso e o menu passou a ser ocultável segundo a vontade do usuário, validando a adaptabilidade do sistema às instruções fornecidas.

Passo 3.0 - Publicando o Aplicativo

Com o protótipo ajustado, chegou o momento de torná-lo público. Para isso basta clicar no botão "Publicar", no canto superior direito:

Na janela que se abre, verá algo parecido como:

Agora para disponibilizar o aplicativo para outros usuários, é necessário ativar a opção "Make Preview Public":

Agora o protótipo está publico e o link poderá então ser compartilhado para testes externos. Clique aqui e confira como ficou o exemplo que criamos nesse tutorial.

Considerações Finais

O uso de ferramentas como o Firebase Studio representa uma excelente introdução ao desenvolvimento assistido por IA. Essa abordagem permite que usuários com pouco conhecimento técnico possam visualizar, testar e interagir rapidamente com ideias de possíveis projetos.

É altamente recomendado experimentar outras ferramentas similares, inclusive as que oferecem planos gratuitos com recursos limitados. O domínio da engenharia de prompts e a prática contínua contribuem significativamente para melhorar a qualidade e a precisão dos resultados.

É importante reforçar que o emprego de tais ferramentas não anula a necessidade de conhecimento em programação, entenda essa tecnologia como uma aliada a produtividade, o conhecimento técnico é fundamental para o sucesso em todas as etapas de desenvolvimento.

DEV Community: Fabio Colatto