From f2c1b6e203ebce5cc57f902c9cf9c39dd43d4898 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Davi=20Paulino=20Concei=C3=A7=C3=A3o?= <163527003+Davi2910@users.noreply.github.com> Date: Sun, 30 Nov 2025 11:16:25 -0300 Subject: [PATCH 1/2] Revise README.md para incluir detalhes do projeto MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Atualiza o README.md para refletir o desenvolvimento do aplicativo de finanças pessoais, incluindo informações sobre Vibe Coding, funcionalidades-chave, e reflexões sobre o processo de interação com a IA. --- README.md | 175 +++++++++++++++++++++++++++++++----------------------- 1 file changed, 100 insertions(+), 75 deletions(-) diff --git a/README.md b/README.md index 071b638..7de6779 100644 --- a/README.md +++ b/README.md @@ -1,89 +1,114 @@ -# 💸 App de Organização de Finanças Pessoais com Vibe Coding +# 💸 App de Organização de Finanças Pessoais do Davi com Vibe Coding + + +### Entregando o Desafio na DIO +Este é o meu prompt fnal do meu PRD refinado no copilot web: + +``` Markdown +prompt: ficou otimo parabens, poderia me enviar o PRD como um snippet txt? é que eu quero copia-lo. Alem disso, use apenas mardown simples para format, nada de emojis. +# PRD – Aplicativo de Organização de Finanças Pessoais + +## 1. Visão Geral +O aplicativo será uma solução de organização financeira pessoal baseada em conversas em linguagem natural, com foco em simplicidade, acessibilidade e inclusão. +Além de permitir o controle financeiro de forma prática, o app oferecerá modos de Light e Dark para atender diferentes preferências visuais e situações de uso. +O design seguirá os princípios de Design Universal, garantindo que o produto seja utilizável pelo maior número possível de pessoas, sem necessidade de adaptações específicas. + +## 2. Contexto +Muitos usuários abandonam aplicativos financeiros por serem complexos, pouco intuitivos e não adaptados às suas necessidades visuais ou cognitivas. +Este projeto busca oferecer uma experiência conversacional, personalizável e inclusiva, reduzindo barreiras de entrada e incentivando hábitos financeiros saudáveis. + +## 3. Problema +- Entrada manual excessiva nos apps atuais. +- Pouca personalização e interação natural. +- Falta de acessibilidade e opções visuais (ex.: ausência de Dark Mode). + +## 4. Público-Alvo +- Pessoas iniciantes no controle financeiro. +- Usuários que buscam praticidade e simplicidade. +- Pessoas com diferentes níveis de alfabetização digital. +- Usuários diversos, incluindo aqueles com necessidades de acessibilidade visual ou cognitiva. + +## 5. Funcionalidades-Chave +1. Registro de gastos via chat em linguagem natural. +2. Classificação automática das transações. +3. Definição e acompanhamento de metas financeiras. +4. Agente Financeiro virtual com dicas personalizadas. +5. Relatórios simples e visuais, adaptados ao perfil do usuário. +6. Modos Light e Dark para melhor experiência visual em diferentes ambientes. +7. Recursos de facilitação de uso, como: + - Ajuste de tamanho de fonte. + - Alto contraste para acessibilidade. + - Suporte a entrada por voz e texto. + - Navegação simplificada e tolerância a erros. + +## 6. Entregável da IA +- Plano de MVP com: + - Principais telas (chat, metas, relatórios, configurações de acessibilidade). + - Recursos necessários (NLP, categorização automática, motor de recomendações, suporte a Light/Dark Mode). + - Esboço de validação inicial (testes com grupo piloto diverso). +- Linguagem acessível e educativa para facilitar a adoção. + +## 7. Conceito de Design Universal +Design Universal é criar produtos que possam ser usados pelo maior número possível de pessoas, sem adaptações específicas. +No app, isso significa: +- Modos Light/Dark para diferentes preferências visuais. +- Ajustes de acessibilidade (fonte, contraste, voz). +- Interação simples e intuitiva para iniciantes e usuários avançados. +- Inclusão desde o início do projeto, não como ajuste posterior. -Aprenda a **criar soluções com IA** de forma criativa, guiando ferramentas como o **Copilot** e o **Lovable** com uma comunicação simples e natural. O foco é desenvolver o conceito de um **App de Organização de Finanças Pessoais**, mas, acima de tudo, aprender o **jeito Vibe de programar com IA**. - -## ✨ O que é Vibe Coding - -**Vibe Coding** é uma forma leve e criativa de desenvolver com IA, baseada em **conversas naturais e bem estruturadas**. Você não precisa escrever código linha por linha. Em vez disso, aprende a **guiar a IA** descrevendo suas ideias de forma clara, com **intenção e contexto**. Em outras palavras: - -> Você mostra a vibe da sua ideia e a IA transforma em solução (ou em um caminho para ela). - -## 🎯 Desafio - -Problema: Muitas pessoas não conseguem manter um controle financeiro porque os aplicativos exigem muita entrada de dados manual, e a criação de orçamentos é vista como algo tedioso. - -Precisamos de uma solução que permita **controlar as finanças por meio de uma conversa simples**, com **agentes de IA** capazes de criar **planos de economia personalizados e automatizados**. Você deve utilizar as ideias de **Vibe Coding** e **MVP (Produto Mínimo Viável)** para desenvolver o **conceito de um aplicativo** que resolva o problema citado. - -> [!IMPORTANT] -> Você **não precisa construir o código**! O foco está em **usar a IA como sua parceira criativa**, transformando boas ideias e prompts em conceitos funcionais que simulam um produto real. - -## 🪄 Etapas do Desafio - -### 1. Saber o que Pedir é a Chave! Otimize seus Prompts! - -Antes de pedir para a IA "criar um app", é importante definir com clareza o que você quer construir e por quê. Para isso, você vai criar um **PRD (Product Requirements Document)** simplificado, uma especificação que serve como _briefing_ para a IA entender sua ideia. - -Um bom PRD deve descrever o problema, quem será beneficiado, as principais funcionalidades e o que você espera que a IA entregue. Use o modelo abaixo como ponto de partida e adapte conforme o seu estilo: - -```txt -# Contexto -Quero criar um aplicativo de Organização de Finanças Pessoais que funcione por meio de conversas com o usuário. -A ideia é facilitar o controle financeiro de forma simples e natural, sem formulários manuais ou planilhas complexas. - -# Problema -Muitas pessoas desistem de controlar seus gastos porque os apps atuais exigem muita entrada manual e pouca personalização. -Quero resolver isso com uma experiência de conversa e recomendações automáticas de economia. - -# Público-Alvo -Pessoas que querem começar a organizar suas finanças de forma prática e sem complicação, principalmente iniciantes. - -# Funcionalidades-Chave -1. Registrar gastos via chat em linguagem natural. -2. Classificar automaticamente as transações. -3. Definir e acompanhar metas financeiras. -4. Receber dicas de economia do “Agente Financeiro”. -5. Visualizar relatórios simples e personalizados. - -# Entregável da IA -Gerar um plano de MVP com as principais telas, recursos necessários e um esboço de validação inicial. -Usar tom educativo e linguagem acessível, em português. ``` +Interações com o Lovable: +> Olá, criei um App de finanças pessoas, com base no seguinte PRD (Product Requirements Document) {PRD} +> Ajuste no chatbot "Parece que o chat bot esta meio ilimitado, se possivel ajuste ele para ser tipo um agente de IA que define metas para nos e fazer pergutas como abrir o extrato. alem de ele ser possivel categorizar as transações." + +Resultado final do Lovable: https://chat-e-grana.lovable.app/ -Depois de preencher o modelo, use o Copilot Web para revisar e melhorar o seu prompt antes de ir ao Lovable. A ideia é lapidar o texto até que ele fique claro, direto e reflita exatamente a sua intenção. +Captura de tela 2025-11-30 105553 -> [!TIP] -> Pense no PRD/Prompt como “o briefing que a IA precisa para entender sua vibe”. Portanto, quanto mais claro e intencional for o texto, mais próximas do ideal serão as respostas da IA. -### 2. Explorando o Lovable na Prática +## Funcionalidades do Aplicativo -Com seu PRD pronto e revisado, é hora de colocar a IA em ação. Abra o Lovable, cole seu prompt completo e peça o plano inicial do MVP do seu aplicativo. Como o plano gratuito limita você a 5 interações por dia, seja estratégico: -- Faça perguntas diretas e construtivas, como “crie o fluxo de telas com base nas funcionalidades listadas” ou “gere uma versão resumida do plano de MVP”; -- Priorize clareza nas instruções para aproveitar ao máximo cada resposta; +### 1. Interação por Chat com o Agente Financeiro +- Interface conversacional em linguagem natural. +- Registro de gastos e receitas com comandos simples (ex.: "Gastei R$150 no mercado"). +- Agente virtual disponível para orientar e responder dúvidas. -Durante essa etapa, você pode orientar a IA para três entregas principais: -1. Agente Financeiro: defina o comportamento e o tom de voz de um consultor financeiro pessoal, alinhado ao público e objetivo do app. -2. Fluxo de Telas: peça à IA para gerar o fluxo conceitual de telas com base nas funcionalidades descritas no PRD, simulando a interação por conversa. -3. Plano de MVP: solicite um resumo das 5 funcionalidades principais, dos recursos necessários e um plano de validação inicial (como medir se o app cumpre seu propósito). +### 2. Registro e Classificação de Transações +- Registro automático de entradas e saídas financeiras. +- Classificação inteligente por categorias (ex.: alimentação, transporte, lazer). -> [!TIP] -> Se preferir, você pode fazer tudo com o **Copilot**. O importante é exercitar a habilidade de transformar intenções em instruções claras e testar os limites da IA como parceira criativa. +### 3. Metas Financeiras +- Criação de metas personalizadas (ex.: "Criar meta de R$5000"). +- Acompanhamento do progresso das metas via chat ou dashboard. -### 3. Entregando o Desafio na DIO +### 4. Relatórios e Análises +- Visualização de extratos e saldo atual. +- Análise da saúde financeira com gráficos e resumos simples. +- Relatórios adaptados ao perfil e comportamento do usuário. -Finalize seu projeto criando um **repositório no GitHub** (pode ser um **fork** deste). -No README do seu repositório, inclua: +### 5. Dicas e Educação Financeira +- Dica do dia com sugestões práticas de economia. +- Recomendações personalizadas com base nos hábitos financeiros do usuário. -- Seu **prompt final** (PRD); -- Prints ou pequenos vídeos das interações com a IA; -- Um resumo do que o seu **App de Finanças Pessoais** faz; -- Uma breve **reflexão sobre o processo**: - - O que funcionou bem? - - O que não funcionou como o esperado? - - O que aprendeu sobre conversar com IAs? +### 6. Interface Acessível e Inclusiva +- Design Universal: navegação simples, tolerância a erros, suporte a voz e texto. +- Modos Light e Dark para melhor experiência visual em diferentes ambientes. +- Ajustes de acessibilidade como tamanho de fonte e contraste. -> [!TIP] -> Publique seu repositório e compartilhe o link na plataforma da DIO! Sua entrega é a prova de que você domina o raciocínio de Vibe Coding, mesmo sem escrever uma única linha de código. +### 7. Navegação Estruturada +- Menu lateral com acesso rápido a: + - Chat com o agente + - Dashboard financeiro + - Metas + - Configurações -## 💬 Conclusão -Vibe Coding é sobre clareza, curiosidade e criatividade, não sobre perfeição técnica. O verdadeiro objetivo aqui é aprender a pensar junto com a IA, transformando ideias em conceitos reais e enxergando a tecnologia como uma extensão do seu raciocínio criativo. Cada interação é um experimento, quanto mais clara for sua intenção, mais surpreendente será o resultado. +##reflexão: + ### O que funcionou bem? + Durante a iteração com o lovable, o resultado que ele entregou ficou bastante bom e esperado com o proposito do PRD que eu crie. Mas não deu para fazer mais coisas pois os creditos do lovabla tinha acado. + + ### O que não funcionou como o esperado? + Eu tive que pedir para o lovable ajustar o chatbot, pois na versao 1 que ele tinha criado não ficou muito bom. Pedi para ele mehorar o chatbot implementando mais funcionalidades. + + ### O que aprendeu sobre conversar com IAs? + EU achei muito interessante esse estilo Vide Coding, pois ja estava acustumado a interagir com IAs para criação de projetos tantos academicos como pessoas que futuramente irei criar. From 67f3ef8085fadcfbbc658fa547562a373fbf0281 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Davi=20Paulino=20Concei=C3=A7=C3=A3o?= <163527003+Davi2910@users.noreply.github.com> Date: Sun, 30 Nov 2025 11:40:51 -0300 Subject: [PATCH 2/2] =?UTF-8?q?Atualizar=20intera=C3=A7=C3=B5es=20e=20feed?= =?UTF-8?q?back=20no=20README?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Corrigido texto de interação com o Lovable e ajustado feedback sobre o chatbot. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7de6779..8116d3a 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ No app, isso significa: ``` Interações com o Lovable: -> Olá, criei um App de finanças pessoas, com base no seguinte PRD (Product Requirements Document) {PRD} +> Olá, crie um App de finanças pessoas, com base no seguinte PRD (Product Requirements Document) {PRD} > Ajuste no chatbot "Parece que o chat bot esta meio ilimitado, se possivel ajuste ele para ser tipo um agente de IA que define metas para nos e fazer pergutas como abrir o extrato. alem de ele ser possivel categorizar as transações." Resultado final do Lovable: https://chat-e-grana.lovable.app/