[PITCH] Criei um site para divulgar meu app com NextJS
Qual o obetivo
Já comentei em alguns conteúdos aqui que tenho um aplicativo para calcular churrasco, que ficado estável em uma média de 150 a 200 usuários nos últimos 28 dias (ref. 28/07/2023)
Uma vez que estou aprendendo NextJS e também realizando o curso.dev, optei por colocar em prática alguns estudos criando um site para divulgar meu aplicativo.
Processo
Para que o site ganhe relevância no Google, é necessário adicionar um conteúdo de qualidade. Portanto, inicialmente criei a página inicial, contendo informações sobre o aplicativo, um guia de churrasco e um FAQ com perguntas frequentes sobre o aplicativo.
Posteriormente, desenvolvi uma versão online do mesmo cálculo presente no aplicativo, visando proporcionar uma experiência similar para ser testada.
Receitas
No final, gostaria de incluir uma seção de receitas, que também serão exibidas no aplicativo no futuro, e que os usuários possam enviar suas próprias receitas em um estágio posterior de desenvolvimento.
No entanto, surgiu a questão de como eu iria criar essas receitas. Foi então que recorri às ferramentas de IA mais populares atualmente.
De uma maneira um pouco manual, decidi gerar as receitas e alimentar um banco de dados. Escolhi o Firestore do Firebase para isso, juntamente com o Storage para armazenar as imagens. Optei pelo Firebase devido ao seu excelente plano gratuito e porque já o utilizo no projeto do aplicativo, permitindo que as receitas sejam consultadas diretamente no Firebase pelo aplicativo.
Criei uma API no próprio Next.js para salvar, compactar e enviar as imagens para o Storage, e em seguida registrar uma receita com a imagem.
Portanto, para criar as receitas, utilizei a OpenAI, solicitando que fossem formatadas em JSON, conforme esperado pela minha API. Exemplo abaixo.
{ "name": "Tomahawk com Batatas Rústicas", "imagePath": "url da imagem", //gerada posteriormente "ingredients": [ "1 tomahawk", "Sal a gosto", "Pimenta-do-reino a gosto", "1kg de batatas cortadas em cubos", "2 colheres de sopa de azeite", "1 colher de sopa de alecrim", "1 colher de sopa de tomilho" ], "steps": [ "Tempere o tomahawk com sal e pimenta-do-reino.", "Em uma tigela, misture as batatas, azeite, alecrim e tomilho, formando as batatas rústicas.", "Pré-aqueça a churrasqueira em fogo médio-alto.", "Coloque o tomahawk na grelha da churrasqueira e deixe assar por cerca de 30 minutos de cada lado, ou até ficar no ponto desejado.", "Coloque as batatas rústicas em uma assadeira e leve ao forno por cerca de 30 minutos, ou até ficarem douradas e crocantes.", "Retire o tomahawk da churrasqueira, deixe descansar por alguns minutos e sirva com as batatas rústicas." ] }
Então, foi o primeiro passo, criei receitas, dei instruções e descartei as que não eram adequadas.
O próximo passo foi usar todos esses JSONs gerados, pedindo à OpenAI para interpretar o JSON e criar um prompt efetivo para gerar uma imagem da mesma receita no Dall-E.
Com todos os prompts e JSONs gerados, trabalhei duro para gerar imagem por imagem no Dall-E (sim, foi um processo manual 😫).
Ao gerar a imagem, enviei para o armazenamento por meio da API, que compactou e retornou a URL. Eu atualizava o JSON correspondente à receita e enviava para a API de cadastro de receita.
Ufa!
Agora estou trabalhando para tentar automatizar esse processo.
Não vou entrar em detalhes técnicos, mas vocês podem ver todo o código e futuras atualizações aqui:
https://github.com/renant/bora-churrasco-web
E finalmente, o resultado:
https://www.borachurrasco.app/