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:
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.
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.
Top comments (0)