APP em 5 Minutos de Gestão Financeira Relatório em PDF

Fala galera nesse vídeo eu vou te ensinar a fazer um aplicativo de controle financeiro aonde a gente vai é conectar no supabase e também vai fazer ele gerar um relatório em PDF que a gente pode est imprimindo e a gente vai fazer isso tudo na ferramenta GPT engineer e isso tudo vai levar assim uns sei lá uns alguns minutos então se você quer aprender como fazer isso não esquece de se inscrever e dá aquele like que isso ajuda bastante galera eu quero trazer bastante coisa aqui com essas ferramentas só que essas ferramentas são pagas né

então tipo você ficar treinando testando ali você tem que gastar uma grana então eu vou pedir para vocês faça esse vídeo aqui chegar tipo a um número muito grande assim de visualizações de curtidas comentários que aí eu consigo né vou conseguir gerar uma receita ali e aí eu vou conseguir pagar essas ferramentas aqui aqui para est gerando o conteúdo e vocês não tá gastando ali para fazer testes né Eu já vou est mostrando aqui como você pedir como você ir lá configurar e isso vai é meio que economizar na hora de você tá fazendo seu

aplicativo aí então ajuda esse vídeo aí o canal a crescer também que daí eu consigo est pagando essas ferramentas porque elas não dão muito créditos ali pra gente tá utilizando e as que dão assim que dá pra gente usar gratuito fazer algumas coisas para para est usando né De um modo gratuito às vezes não funciona tão bem mas também são eficientes mas ajuda aí o canal a crescer e ter curtida ter comentário que isso faz né é mais rápido o canal crescer e gerar uma receita que eu possa est pagando essas ferramentas e tá gerando

aqui conteúdo beleza bom galera o prompt que eu coloquei aqui eu fui Tentei ser um pouco bem um pouco bem específico Será que isso existe né Eu tentei ser aqui para tipo por causa dos tokens mesmo né para não precisar ficar errando ali e esse app é uma dica de de um camarada ali um inscrito do canal que colocou e falou que era bem maneiro que ficou legal então eu fui lá e peguei a ideia dele aqui e coloquei né então e vai ser o seguinte né vai ser desenvolver um aplicativo que auxilia o usuário

a controlar seus gastos diários eh categorizando despesas e gerando relatórios e financeiros mensais em pdf o aplicativo permite o usuário visualize a evolução financeira eh por meio de gráficos e relatórios detalhados aqui eh eu coloquei detalhados mas eu poderia colocar ali só os básicos mesmo mas tudo bem eh baseado em dados fictícios né aqui era antes do firebase eh do supabase mas era só pra gente poder ver uma demo ali né tal eh para simulação e teste então legal pedir isso aqui no prompt para você ver ali não tem os dados né Eh as principais

funcionalidades é formulário de entrada de dados eu coloquei o básico né uma tela simples onde o usuário pode inserir manualmente seus dados financeiros incluindo categorias eh de despesas valores datas e notas eh aqui notas eu acho que ele meio ah não entendeu Sim era tipo as descrições né essas informações eh personalizam o conteúdo do relatório mensal beleza Eh para essas eu coloquei esse tipo de informação pra a gente ter alguma coisa ali no no relatório né Eh geração de relatório mensal em PDF então eu especifiquei que eu quero gerar esse relatório mensal em PDF tá

o o aplicativo cria um relatório em PDF com base nos dados do mês incluindo um resumo das Finanças eh total de gastos por categoria saldo final e gráficos de evolução o pdf é estruturado com cabeçalhos eh sessões e uma formatação padrão para facilitar a leitura beleza tranquilo isso aqui é mais para a gente ir se e estruturando ali no aplicativo né no pdf e claro que aqui Você poderia colocar e mais informações de formatação tá só que eu quero o básico eu quero fazer funcionar lembrando do caso dos tokens né utilize as bibliotecas como PDF

li né e ou a jspdf em node ou emv script eh para a criação do relatório tá então eu especifiquei aqui a biblioteca por quê Porque isso ajuda ele né ali a já implantar né implementar ali no seu aplicativo Então como que eu sei se como você tá fazendo aí como que você vai saber vai lá no Google e pesquisa pergunta ali no Google né Eh Quais as bibliotecas de PDF para você tá implantando aí né implementando no seu apli ativo aqui a visualização de gráficos né uma interface visual para exibir gráficos com total de

despesas por categoria eh evolução da despesas ao longo do mês e saldo final isso permite ao usuário acompanhar a saúde financeira em tempo real tá então tô explicando tudo ali você pode ser mais direto também tá eh eu fiz assim porque funcionou eh para mim então eu só copiei é opções de download e armazenamento de relatórios Então vai ter ali uma opção né de armazenamento o aplicativo permite o usuário baixar o relatório mensal em PDF ou armazená-lo no sistema para consulta futura e interface limpa intuitiva a interface é simples e fácil de usar aqui você

pode ver que eu tô pedindo né para ela vir simples né Eu não quero muita coisa porque senão os tokens eu não consigo gravar o vídeo ali então e eu pedi para ser bem simples né e com Campos de entrada e e visualização de gráficos em uma prévia de conteúdo antes da geração do PDF então ele vai mostrar ali e o conteúdo Antes de a gente poder imprimir né e detalhes técnicos aqui muito importante também na hora de fazer ali que ajuda muito que é o front end eu coloquei em react e em Wind né

que é o CSS que eu gosto para caramba assim ele cria uns componentes bem legais eh pra interface então coloquei aqui que era para ser responsivo também no backend eu coloquei o node para gerenciar o processamento de PDF e manipulação dos dados financeiros Tá mas isso aqui eu coloquei só para ajudar mas você nem precisava pô tá ele ia ver ali uma uma uma tecnologia ia colocar mas se você especificar também né eh bibliotecas de PDF utilize o pdf li né Eh Ou a JS PDF eh aqui eu tô repetindo para categorizar mesmo para ele

entender eh para ele criar aqui eh pra gente poder manipular ali e fazer o o pdf eh gráficos tô de novo ali falando para os gráficos eh de categorização evolução financeira utilize bibliotecas de gráficos como o aqui ó já tô colocando também aqui os gráficos né a biblioteca que eu quero usar como que eu vejo isso héo vai lá no Google e pergunta pro Google qual a a biblioteca que você pode acrescentar aí no seu aplicativo Então tá aqui ó né pedi para ele eh dei duas opções para ele integrar ali no frontend né beleza

né tranquilo aqui dados fictícios para testar né ali mensal que eu pedi para ele só não escrevi os dados mas ele ele vai ali gerar para mim e passos paraa implementação aqui eu coloquei mas só para ele dar uma ajuda também por causa dos tokens mas eu coloquei configurar o frontend né criar um formulário no frontend para entrada de dados freei de novo né Falando implementar a função de gerar PDF novamente e falei aqui aqui para não ter erro eh visualização de gráfico coloquei de novo opção de download e armazenamento tá E aí eu deixei

isso aqui em inglês né para ele entender melhor ali na ferramenta tal mas não fiz o teste em português mas pode fazer é mais problemas dos tokens mesmo mas funcionou e no meu teste funcionou e eu tinha feito outro né não tinha feito esse mas estava funcionando em inglês perfeit então beleza então agora vamos pegar transformar em inglês e colocar lá no no GPT engineers pra gente fazer o teste e ver se vai funcionar né então beleza bom galera Então vamos lá aqui eu já deixei em inglês né todo prompt que eu li ali para

vocês eu acho que é melhor ali eu acho que para entender então vamos ver se vai dar certo aqui né eu tenho pouco tokens né conforme eu tinha falado mas vamos ver se vai dar pra gente fazer tudo isso é conectar ali no é no sup base e ainda fazer aqui o a parte do PDF né vamos ver se se vai dar tudo certo então vamos pedir aqui para ele e vamos esperar ele criar certo ele vai ler aqui e aí depois a gente vem e conecta ali o supabase para ver se tudo vai funcionar

direitinho vamos esperar bom galera ele gerou aqui pra gente e gerou bem legalzinho ainda vou clicar aqui para ele abrir no navegador vamos dar uma olhada de como ficou cara ficou bem legal Dá para trabalhar mais é claro mas as animações aqui isso fica bem bem bacana ele gerou aqui pra gente é alguns dados né fictícios vamos ver se tá funcionando aqui os bot tá funcionando galera Ó já tem aqui as categorias já tem aqui também e descrição né se você quiser e a data aqui nossa Fantástico né cara aí vamos vir aqui ó já

tem um gráfico é claro que isso aqui tudo a gente pode mudar né galera tudo aqui a cor tudo e já trouxe aqui também eu podia ter pedido em português né mas PED Mas beleza tá aqui ele pode gerar aqui também a parte e de meses né legal ó ele colocou aqui ó tá vendo fictício mas colocou Bacana Então beleza aí agora vamos ver se tá funcionando Será que tá funcionando porque geralmente a gente tem que colocar um plugin dependendo da ferramenta puxar e não sei o que fazer um monte de coisa mas aqui eu

creio que vai ser só a gente clicar tudo bem que eu pedi para ele mostrar pra gente antes ele tá mostrando mas eu queria configurar também às vezes a gente quer configurar ali o pdf mas isso tudo a gente arruma no prompt né a gente pede ali e ele vai dar essas opções Mas como eu tinha pouco tokens aqui e fica difícil né Então vamos lá vamos fazer o download aqui ele fez o download vamos lá vamos trazer Vou colocar aqui esse nome aí mesmo vou salvar ele vai abrir aqui como eu tô num num

navegador aqui é anônimo né porque eu fiz outra conta então vamos ver aqui ó vou clicar abriu o nosso relatório Zinho e tá tudo aqui galera aí ó tá funcionando é claro que aí eu poderia pedir para ele formatar de uma maneira legal né fazer ali tudo pedir para ele que ele iria fazer pra gente né a gente for matava ele mas funcionou aqui pegou o relatório deu tudo certo cara olha só mano e aí beleza tá aqui a cara do nosso aplicativo agora vamos ver se tem tokens ainda para a gente conectar aqui no

f base né ô no supa base para ver se fica dinâmico ali vamos ver se tem Senão eu vou pegar aqui mais um plano O ruim que fica né a gente fica colocando plano E aí para gravar os vídeos aí fica ruim por isso dá aquela força lá faz esse vídeo chegar a bastante pessoas aí pra gente poder ter uma poder assinar esses planos né para est gravando aqui os vídeos né então beleza agora vamos tentar conectar aqui no supabase né vamos vir aqui no supabase né você cadastra se você não sabe como fazer tem

no outro vídeo que eu vou deixar aí na descrição É só você clicar Mas é bem simples cadastra lá faz o login Vamos criar um novo projeto aqui vou colocar um nome vamos pegar o nome do app mesmo que vai ser esse aqui certo vou colocar aqui uma senha vou pegar aqui Brasil né para ficar mais próximo e vamos criar aqui a o nosso projeto vamos ver beleza criou vamos esperar um pouco também né que ele tem que carregar ali tudo direitinho vamos dar uma uma esperad aí espera também não vai já lá querer conectar

espera porque ele tá lendo gerando vamos esperar um pouquinho Beleza agora a gente pode ir aqui e vamos clicar no botão aqui do sup base né para ver se vai conectar talvez eu tenho que conectar aqui o meu sop base direto aqui porque eu tô numa janela anônima né então vou fazer isso aqui rapidinho beleza conectei aqui né porque eu tô numa janela anônima e talvez ele não autentic aqui né então vamos clicar aqui Para ele achar o supabase e Conectar conectar de novo vamos ver se ele vai encontrar encontrou vamos autorizar esperar um pouquinho

né para ele conectar aqui beleza conectou vamos ver se já gerou aqui aqui o nosso projetinho Vamos conectar ele aqui e conectar aqui também beleza já pode aqui já vai funcionar bem Legal vamos esperar um pouquinho aqui beleza deu aqui falou que tá conectado tudo direitinho OK agora eu vou colocar aqui eh esse prompt aqui né que para ele fazer né conectar direto que nem a gente eu já tinha mostrado no outro vídeo e vamos lá vamos clicar e esperar torcer pros tokens eh dar tempo né aí e ter Token para conectar ele tá gerando

ali Talvez ele vai gerar aqui ah lá gerou o SQL vamos clicar que ele vai criar as tabelas né isso eu acho massa né porque você não precisa nem se preocupar em criar as tabelas ele já vai criar Tomara que crie tudo direitinho para eu não precisar ficar pedindo aqui mas só o que ele criar já tá valendo porque a ideia era mostrar que dá para fazer um aplicativo maneiro né É simples conectar no sopa base e ainda fazer ali a impressão gerar o pdf tudo muito fácil né galera muito tranquilo de que seria uma

dor de cabeça tremenda para fazer ali para um teste né um aplicativo teste você ter que criar tudo isso é é complicado né então ele já pegou Talvez ele tenha tirado né os dados fictícios tirou mesmo né bom tá aí não tem gráfico Então eu acho que a gente vai ter que cadastrar realmente ele tirou vamos ver se vai funcionar certo vamos ver aqui ó se eu atualizar ele recarrega a nova a nova interface ali recarregou beleza vamos adicionar alguma coisa aqui sei lá vou colocar aqui vou me preocupar com com vírgula essas coisas mas

vou pôr aqui sei lá é 5.000 e Shopping descrição Vamos pensar aqui sei lá compras quero ver funcionar foi no dia 7 pronto vamos salvar salvou galera salvou salvou o primeiro vamos ver aqui se já tem alguma coisa não tem um total né porque uma Eu acho que o mês né também deixa eu ver aqui compras beleza eu não sei o mês que eu coloquei isso tudo a gente tem que pedir né vamos ver aqui eu não sei se tinha ali para colocar o mês não Ah tinha tinha sim dia 11 é novembro né vamos

ver se aqui ele tá não tem novembro por isso que não vai aparecer tá vendo ó então eu teria que pedir para ele aqui ó e acrescentar todos os meses né eh ou a gente tem opção de acrescentar direto aqui né ele já pegar essa informação e jogar lá mas tudo bem vamos fazer em cima do que tem aqui né Ó tem Janeiro e tem eh Dezembro né então vamos colocar aqui em cima do que já tem vamos voltar aqui ó eh fevereiro tem Janeiro e tem dezembro vamos colocar aqui vou colocar um outro valor

aqui claro que isso aí tudo a gente arruma depois né Vamos colocar aqui entretenimento Eh sei lá e show sei lá beleza vamos cadastrar já tem dois vamos ver se aparece aqui agora eu coloquei Janeiro não coloquei dezembro a ó lá ó apareceu Então tá funcionando é só a gente configurar ele direitinho que vai funcionar Vamos colocar outro valor aqui sei lá TR 3000 Vamos colocar aqui eu não sei eu vou colocar qualquer coisa tá galera vou escrever aqui sei lá alguma coisa vou lá para janeiro ou para Dezembro né aqui vou colocar 21 Vou

salvar salvou beleza aí também tem que pedir né para mudar aqui né o colocar em real tal e ele já vai cadastrando colocar mais informações né De que dia foi aí dá para incrementar aqui né dá para fazer bastante coisa E aí vamos ver aqui é Dezembro né já tem as duas aqui ó maravilha então Maravilha tá funcionando galera tá tá indo é só ajustar colocar aqui tudo direitinho o que você quer e imprimir né vamos imprimir aqui de novo vou deixar assim mesmo vamos dar o nome aqui para não não dar que eu já

imprimi né Vamos colocar aqui vamos aqui ó teste né Vamos clicar e tá funcionando galera ele tá trazendo é claro que agora você pode colocar aqui e as datas né pode colocar o horário se você eh escrever isso você pode pedir para conectar também pode ver eh como que conectaria ali com um relógio da Apple com relógio da Samsung qualquer tipo de relógio ou pelo celular também dá para fazer muita coisa né só que você precisa ter tokens para ficar pedindo isso então funcionou galera funcionou tranquilamente aqui e não deu erro nenhum se você escreve

direitinho ali o prompt ele faz corretamente e deu certo cara deu tudo certo se eu quisesse mudar aqui e o layout Eu mudaria colocaria e os gráficos aqui de outra cor também né E iria mudando e colocando e datas horários né E aqui os tokens desse né o plano desse ele é é o mesmo lance do Bol né E aqui ó ó né vai dar uns 120 por aí com o dólar de hoje aí vai dar mais ou menos isso e aqui cria projetos privados Remove a marca né aqui limites de mensagem esse aqui você

pode clicar para ver depois que eu eu não não pelo menos aqui não não tá Ah aqui você pode eh adicionar limite né mais limites né Você pode colocar aqui então dá para dá para usar né R 120 120 E pouco e aqui é o mesmo plano na verdade tá do Bolt lá é a mesma coisa aqui vai dar uns R 280 só que daí você tem mais limites aqui né e tem a parte vip e aqui também é o mesmo valor tá galera mesmo valor bom galera consegui fazendo os bastidores aqui ainda teve token

e pedi para ele acrescentar os meses aqui só que eu fiz um prompt bem rápido ali só pedi mesmo ele acrescentou aqui mas e a ideia seria tipo a gente cadastrar aqui né e o mês aparecer lá então eu acho que como a gente já pediu uns dados dos fictícios né então ele trouxe alguns meses aqui e de 2023 tal e como a gente já tinha acrescentado aqui o de Dezembro tá aqui ainda né mas beleza trouxe coloquei um efeito aqui também ó tá vendo no card E aí dá para deixar isso aqui uma coisa

linda dá para deixar isso aqui muito bonito então aqui tá em real agora né eu pedi para ele colocar tudo em português só que eu acho que eu pedi meio meio errado aí ele não não colocou tá vendo aí você tem que pedir direitinho aqui eu pedi muito rápido né só escrevi e beleza mas tudo bem Galera eu fiquei muito feliz por ter conseguido aqui já mostrando para vocês e tipo não acabou meus tokens né Isso foi legal porque eu consegui mostrar tudo então dá para fazer muita coisa com essas ferramentas é essa aqui não

é a Bolt Mas é uma ferramenta Bacana também eu achei bem legal essa ferramenta e depois dá para você colocar ali no repositório do github né e colocar ali fazer algumas eh opções ali que você pode est implementando né claro é mas como eu falei dá para você fazer um componente pro frame né ali pro frame e colocar e para você mexer ali dentro né nas propriedades no frame mesmo e isso é bacana e se você quer aprender fazer isso né componentes pro frame criar as páginas do frame eh vai ter a comunidade design no

code eu vou deixar aqui na descrição é vai vir já com um módulo gigantesco né de frame aonde você vai aprender a fazer páginas fantásticas assim com animação você vai aprender fazer briefing fazer um monte de coisa galera e e lá dentro né Futuramente eu quero implementar todas as ferramentas e que a gente vai poder trabalhar ali o design trabalhar também ali e com backend né que nem aqui fica muito fácil utilizando essas ferramentas mas já vai vir um lamento que vai vir esse módulo de frame gigantesco lá que vai ter muita coisa você também

vai aprender a criar esses componentes que eu tô falando né criar o componente onde você pode vender esse componente você pode colocar na sua página você pode fazer muita coisa galera tá então vou deixar aqui na descrição Entra no grupo que quando eu lançar vai ser um valor bem bacana tá eh e depois que eu for implementando mais coisas aí vai ser um valor maior tá então a assinatura é anual eh você pode ir quando renovar para renovar vai ser um valor menor também para também né um ajuda o outro né para você ficar na

comunidade eh eu vou colocar um valor menor ali também então galera espero que vocês tenham gostado não esquece de comentar deixar sua eh o seu like e se inscrever para eu tá aí tendo verba para est pegando essas ferramentas aqui e trazendo conteúdo para vocês Beleza então é isso aí valeu até a próxima