Executando verificação de segurança...
5
renant
3 min de leitura ·

[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)

Imagem desempenho do app nos ultimso 28 dias

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/

Carregando publicação patrocinada...
2

Está precisando de um tratamento nesses inputs de número de pessoas, quando não coloca número nenhum ele calcula um NaN, quando não existe número deveria ser considerado zero ou até mesmo não deixar concluir o envio. Abraços!

1

Ah legal, identifiquei o problema aqui.

Já vou corrigir!

Obrigado!


EDIT

Agora é para estar tudo funcionando como esperado, muito obrigado por ajudar a testar!

2

Opa, amigo, tudo certo?

Parabéns pela construção do app, apesar de haver esses pequenos ajustes que serão sendo feitos com o tempo, os números do GA reforçam muito o portfólio, parabéns mesmo.

Ao testar a versão web porém notei um probleminha de label na bebida "Água", que está trazendo linguiça.

Pelo que vi no Github, é só um ajuste de Label no caminho bora-churrasco-web/app/resultado/page.tsx

A linha 122 traz Linguiça: {getMedida(bebidasCalculadas!.agua, TipoMedida.liquido)} no início ao invés de 'Água'

Enfim, ótima construção até aqui, parabéns novamente!

1

Opa tudo certo e com você?

Muito obrigado por identificar e já trazer a solução rapidinho para mim

Já vou corrigir aqui. Abraço!

2

Muito maneiro, gostei de você detalhar um pouco dos passos de desenvolvimento, muita das vezes eu fico postergando projetos por achar que nunca está bom.

Eu tive contato com o GA no meu trabalho e tenho tentado aplicar a projetos pessoais, não somente para SEO mas para os logs, recentemente tenho estudado SEO e a sua aplicação com o NextJs.

Uma dúvida, quando você falou no aplicativo, você desenvolveu ele nativamente ou com o React Native? Ou se referia ao app web? Tenho me interessado pelo desenvolvimento nativo.

1

o projeto mobile é mais antigo, esta desenvolvido em flutter.

estou trabalhando para liberar o codigo dele também, porque primeira vez que fiz, foi meio rápido e nao sabia muito as praticas, ai tem umas chaves do firebase hard code

Eu acho bem legal o flutter

1

Maneiro, perguntei isso porque na minha última experiência usamos o GA como forma de logar os erros da aplicação em ambiente de produção também e ajudou muito, desde então passei a pesquisar sobre ferramentas de logs e tenho implementado as mesmas em meus projetos com React.