Do zero ao software no ar “codando” 100% com IA.

E aí, Programador(a), tudo bem?
Léo Scorza da OneBitCode por aqui!

Nesta OneBitNews #10, vou te mostrar um ROADMAP de como criar um software (microSaaS) do zero, gerando 100% dos códigos via IA, assim como fiz no meu novo projeto. Bora?

*caso você não saiba o que é um microSaaS, vale ver este artigo: “Micro SaaS: Uma oportunidade para programadores 🧠”

Ponto a ponto do artigo:

1. Entendendo o Projeto

2. Ferramentas usadas

3. Roadmap #1: Planejamento

4. Roadmap #2: Desenvolvimento

5. Como usar IA como um profissional na Programação

Se você fosse criar um software hoje, qual caminho seguiria? Provavelmente, muita gente ficaria sem saber por onde começar.

Criar um projeto do zero pode ser desafiador. Afinal, um software envolve várias decisões: desde a identidade visual até a definição das tabelas do banco de dados.

Com 14 anos como programador, já desenvolvi centenas de projetos. Ao longo do tempo, fui aprendendo os melhores caminhos.

Recentemente, criei um projeto (microSaaS) para usar na OneBitCode, tanto como projeto final de um dos nossos treinamentos quanto como ferramenta real para o nosso time.

Neste artigo, vou te mostrar o roadmap completo de como desenvolvi esse projeto, desde o planejamento até colocá-lo no ar.

Um ponto importante: neste projeto (chamado IncentivoFlow), desenvolvi 100% dos códigos usando IA. Usei minha experiência como programador para guiar a máquina, mas não precisei escrever uma única linha de código manualmente. Vou te explicar como fiz isso.

Começando do começo: entendendo o projeto

Primeiro, vamos falar sobre o IncentivoFlow. Ele é um projeto para capturar a atenção e o contato de pessoas interessadas em determinado produto.

Por exemplo, se eu fosse um professor de inglês, poderia criar um mini curso gratuito sobre as 100 palavras mais faladas em inglês e colocá-lo no IncentivoFlow. Lá, eu teria um link para divulgar esse treinamento para possíveis interessados.

Ao acessar o link, a pessoa veria um vídeo explicando o mini curso e um formulário para inscrição. Após se inscrever, ela receberia o link do mini curso por e-mail e seria redirecionada para uma segunda página.

Nessa segunda página, haveria um vídeo sobre uma segunda recompensa, como um curso de pronúncia em inglês. Para receber esse bônus, a pessoa teria que divulgar seu link pessoal para que X amigos se inscrevam. Quando isso acontecer, ela recebe o segundo bônus por e-mail.

Ou seja, é um sistema onde todo mundo ganha: quem recebe os mini cursos e quem oferece o produto (neste caso, o professor de inglês), que ganha a atenção e contato de potenciais clientes para seu curso completo.

Ferramentas usadas

• ChatGPT: Geração dos códigos

• Dall-e 3: Para gerar imagens

• HTML + CSS + Javascript

• AdminJS: Sistema administrativo

• ExpressJS (NodeJS): Criação da API

• Bootstrap: Interface responsiva

• Postman: Testes dos endpoints

• SQLite: Banco de dados local

• Supabase (PostgreSQL): Banco de dados de produção

• Sequelize: ORM para interação com o banco

Agora que entendemos o projeto, vamos para o fluxo que segui para desenvolvê-lo.

Roadmap #1: O Planejamento

Aqui é onde muitos desenvolvedores fracassam: eles pulam essa etapa e começam a codar achando que têm tudo na cabeça. Mas a realidade é que um projeto de software relevante é complexo e exige planejamento sólido.

Divido o meu planejamento nos seguintes passos:

1 - Visão clara do que será criado

Escreva em poucas frases o que é seu software e qual problema ele resolve, exemplo:

Depois, peça ao ChatGPT para listar as principais features e telas que um projeto como esse deveria ter:

Nem tudo que a IA devolverá será razoável, e aqui entra sua experiência para filtrar o que faz sentido ou não.

1 - Definição da marca

Depois de entender o que será criado, uso a IA para auxiliar no planejamento da marca, como nome e domínio (URL), além de informações para explicar e vender o projeto.

Exemplo de prompt para gerar ideias de nomes e domínios:

Exemplo de prompt para gerar informações de marketing:

2 - Criação da paleta de cores + logo

Peço ao ChatGPT ideias de paletas de cores que combinem com o projeto. Depois, uso o DALL-E3 (gerador de imagens do ChatGPT) para criar um logo baseado na descrição e paleta de cores.

3 - Planejamento do banco de dados

Com todas as informações, peço ao ChatGPT para sugerir tabelas e campos para o banco de dados. Exemplo:

4 - Planejamento dos endpoints

Separar o frontend do backend via API facilita o planejamento. Peço ao ChatGPT para detalhar os endpoints necessários, com URLs e parâmetros.

5 - Desenvolvimento dos mockups

Mesmo que sejam simples, mockups são essenciais. Eu uso o Figma para criar, pois há muitos templates prontos. Crie seus mockups antes de seguir.

6 - Roteiro de desenvolvimento com IA

Por fim, peço ao ChatGPT para criar um plano de desenvolvimento detalhado, dividindo o trabalho em pequenas etapas sequenciais.

Com isso, finalizo meu planejamento básico, tendo claro como será o projeto, sua marca, banco de dados, endpoints e o passo a passo para desenvolvê-lo.

Roadmap #2: O Desenvolvimento

Após ter todo o planejamento detalhado e organizado (eu uso o Notion para guardar cada parte), fica fácil usar a IA para desenvolver o código.

Atualmente, uso a versão 4o do ChatGPT, mas também é possível fazer o mesmo com a nova versão o1 ou o Claude, por exemplo.

Desenvolvendo o Backend (Admin + API)

1 - Instalando as dependências

Com base na stack do projeto, peço ao ChatGPT para gerar um tutorial de instalação das ferramentas no meu PC, exemplo:

2 - Gerando a base do admin

Para acelerar o desenvolvimento, usei uma ferramenta chamada AdminJS, uma biblioteca JavaScript que gera um admin completo para o projeto. Basta criar os models, e ele cria as telas e ações necessárias para edição.

Então pedi à IA que gerasse o passo a passo de criação de um projeto com ExpressJS e AdminJS do zero, utilizando SQLite como banco de dados.

3 - Incluindo nossos recursos (tabelas)

Com as tabelas e campos definidos no planejamento, pedi ao ChatGPT para criar os models (com Sequelize) para o projeto.

4 - Customizando o Admin + dados fake + monitoramento

O admin gerado é básico, então pedi à IA para gerar o código necessário para personalizar com as cores da marca e o logo.

Também solicitei um script para inserir dados fake, facilitando os testes nos endpoints posteriormente.

Por fim, como o objetivo do projeto é atrair pessoas, é essencial monitorar a quantidade de inscritos e convites enviados. Pedi ao ChatGPT que criasse um código para exibir esses dados no dashboard do Admin de forma destacada.

5 - Criação dos endpoints

Com o admin pronto, segui para o desenvolvimento dos endpoints. Pedi à IA que gerasse o passo a passo para criá-los com base no planejamento.

6 - Testando tudo via Postman

Para garantir que os endpoints funcionam, pedi à IA para gerar um JSON importável no Postman (software para testar API), facilitando os testes.

Desenvolvendo o Frontend

1 - Preparando a estrutura

Decidi criar o frontend no mesmo projeto (junto com o admin e os endpoints). Expliquei à IA o propósito do projeto, a lista de telas, as tecnologias usadas e pedi que gerasse o passo a passo para instalar as dependências (como Bootstrap) e criar a estrutura do projeto com layout padrão do ExpressJS, incluindo um header comum.

Também forneci as cores, fontes e estrutura atual do projeto.

2 - Desenvolvendo a estrutura das telas

Agora a parte mais divertida! Passei para a IA o mockup da tela, o contexto do projeto e o conteúdo dos arquivos relevantes. Exemplo:

3 - Conectando as telas com o Backend

Depois de criar a estrutura da página, expliquei à IA como conectar a página com o backend. Por exemplo, o formulário desta página chama um endpoint quando o usuário se cadastra.

Pedi à IA que gerasse o JavaScript necessário para fazer essa integração. Exemplo:

4 - Ajustes finos

É sempre bom revisar a estética final e fazer ajustes. Algumas melhorias que fiz no projeto:

• Usei projetos do Dribbble como inspiração para aprimorar botões e iluminação.

• Adicionei Particles.js para criar partículas flutuantes no background, dando um ar mais tech.

• Usei Canvas-Confetti para efeitos de confetes quando o usuário entra na página após se inscrever.

Finalização e Deploy

Finalmente, depois de ter meu admin funcionando, meus endpoints prontos e minhas telas consumindo o backend, realizo vários testes simulando o uso real do microSaaS. Claro, também é possível adicionar testes automatizados, se preferir.

É importante também pedir que outras pessoas testem o software, já que, depois de tanto tempo envolvido, ficamos “cegos” para erros básicos.

Para deixar o projeto no ar…

Eu geralmente uso os serviços da Digital Ocean, e neste caso específico, utilizei o Apps da Digital Ocean. Para fazer o deploy, basta subir o projeto para o GitHub e configurar um novo App na Digital Ocean.

Ao subir o código para o GitHub, a Digital Ocean detecta automaticamente a atualização e coloca o seu projeto no ar, na última versão. Ela mesma identifica as tecnologias usadas no projeto.

Quer ganhar $200 para testar os serviços da Digital Ocean por 60 dias? Use este link especial: https://m.do.co/c/4ede815c4ced.

Para o banco de dados, usei o Supabase, um serviço fantástico com um bom plano gratuito. Recomendo!

Se você utilizou Sequelize no seu projeto, basta mudar as credenciais do banco de dados para as do Supabase, e tudo funcionará normalmente em produção.

Um longo caminho, né?

Aposto que, só de ler toda essa jornada, você pensou: “Uau, são muitos passos!” Agora imagine fazer isso sem um roadmap ou sem o conhecimento das ferramentas usadas.

Por isso, esse roadmap é tão útil, e por isso vale a pena investir em bons treinamentos e criar projetos pessoais para dominar as habilidades tech necessárias.

No final, quando você vê seu projeto bonitão no ar, pensa: "Eu criei isso do zero, quero criar mais!" 🤯

E se eu te dissesse algo importante...

Eu gravei um módulo dentro do nosso treinamento Programador 10x, onde ensino a criar esse projeto passo a passo em vídeo. Nele, você vai criar o projeto completo junto comigo.

Você pode se inscrever no Programador 10x para aprender a usar IA na programação do zero. Ou ainda melhor: tornar-se PRO e ter acesso a todos os nossos treinamentos, além de ganhar um bônus especial de aniversário da OneBitCode:

Um planner físico criado por nós para te ajudar a organizar suas metas semanais e diárias, aumentando ainda mais sua produtividade.

Para conhecer o Programador 10x:

→ https://onebitcode.com/10x

Para conhecer o PRO e aproveitar o bônus exclusivo de 8 anos da OneBitCode:

→ https://onebitcode.com

Conclusão

Nunca foi tão importante dominar a tecnologia. Hoje, podemos criar projetos incríveis em pouco tempo, solucionar problemas e ganhar muito $$$ como recompensa.

Então, se você ainda não domina o mundo Tech, esse é o seu momento. Mesmo que você não queira seguir carreira como programador, as habilidades Tech vão potencializar qualquer trabalho que você tenha.

Se esta edição da OneBitNews agregou valor para você e quer receber as próximas, responda este e-mail.

Te vejo na próxima semana, Grande abraço, Léo Scorza

Ps: O bônus do Planner só vale para compras do PRO em setembro de 2024, então correeee!