1. Introdução ao Curso Gratuito Lovable e Visão Geral da Ferramenta [0]

thumbnail Este curso gratuito e prático ensina a criar um aplicativo de gestão financeira do zero até a publicação usando a ferramenta Lovable, focando em planejamento estruturado e boas práticas de desenvolvimento.

1.1. O que você aprenderá no curso [0]

  1. O curso é 100% gratuito e focado na prática, ensinando a criar um projeto do zero até a publicação. [0]
  2. O objetivo é construir um aplicativo de gestão financeira multiusuário, onde o usuário pode adicionar gastos, controlar receitas e despesas. [3]
  3. Você aprenderá a criar um aplicativo do zero, com planejamento estruturado passo a passo e as melhores práticas de desenvolvimento no Lovable. [4]
  4. O conteúdo é de nível pago, mas está sendo disponibilizado gratuitamente para oferecer uma didática estruturada para iniciantes. [5]
  5. Os materiais do curso, incluindo PDFs e prompts, estão disponíveis na descrição do vídeo. [8]
  6. O instrutor, Mateus Castelo, é fundador da Nocode Startup e embaixador oficial do Lovable no Brasil, ensinando a criar aplicativos e automações sem código. [11]

1.2. Ferramentas Vibe Code e o Poder do Lovable [15]

  1. O curso oferece o primeiro contato com o Lovable, uma ferramenta Vibe Code que permite criar projetos de forma ágil e robusta, com foco na prática e pouca teoria. [15]
  2. Você entenderá os processos de criação de software, como front-end (interface) e back-end (dados), e como eles se conectam, além de aprender a estruturar o planejamento e aplicar boas práticas de desenvolvimento. [17]
  3. As ferramentas Vibe Code são divididas em dois grupos: [21]
    1. Projetos mais simples: maior facilidade de criação, mas menor controle, ideais para landing pages, sites, dashboards, interfaces simples ou MVPs (produtos mínimos viáveis) com poucas telas. [21]
    2. Projetos mais complexos: podem envolver mais código com IA, permitindo criar plataformas e SaaS complexos. [23]
  4. Existem diversas ferramentas de Visual Code, incluindo plataformas conversacionais como ChatGPT, Cloud e Gemini (ideais para projetos simples, mas não focadas em criação de software), e plataformas web com IA Code como Lovable, RT, Bolt, V0 e Base44. [24]
  5. Para projetos mais complexos, há editores de código como Visual Studio Code (maior controle, mas curva de aprendizado mais ampla) ou ferramentas de linha de comando (CLI) como Cloud Code e Codex. [32]
  6. O Lovable é excelente para criar projetos mais simples, como sites, dashboards e MVPs, permitindo desenvolver aplicativos em dias e focar na criação de interfaces (front-end). [40]
    1. Ele se conecta nativamente com o Supabase, que gerencia bancos de dados, segurança e escalabilidade, sendo uma ferramenta poderosa e em rápido crescimento. [44]
    2. O Lovable é recomendado para quem não sabe programar, permitindo criar projetos rápidos e incríveis. [49]
  7. Com o Lovable, é possível criar diversos tipos de aplicativos web com IA, como plataformas de tecnologia para nichos específicos (imobiliário, saúde, jurídico, hotelaria), ferramentas para infoprodutores, marketplaces e e-commerce, além de integrar com GPT para chatbots e automações. [51]
    1. A recomendação é começar com um projeto mais simples, focado em resolver uma dor específica, e depois expandir suas funcionalidades. [56]

1.3. Visão Geral da Ferramenta Lovable [65]

  1. Para criar uma conta no Lovable, é recomendado usar o link fornecido na descrição do vídeo, o que ajuda a equipe do curso a ter uma melhor comunicação com o Lovable para sugerir melhorias. [66]
  2. Ao acessar o site do Lovable, você encontra seus projetos, projetos da comunidade (que podem ser duplicados), informações sobre preços, tutoriais e o painel de construção. [70]
  3. Um projeto de CRM de exemplo mostra funcionalidades como gestão de leads, taxa de conversão, gráficos, pipeline Kanban, detalhes de leads e sistema administrativo com gerenciamento de usuários. [75]
  4. A interface do Lovable inclui: [82]
    1. Prompt: onde você envia instruções detalhadas para criar ou modificar o projeto, conversando com o Lovable para desenvolvê-lo. [82]
    2. Histórico: permite ver as alterações. [88]
    3. Conectar conhecimento: para adicionar instruções gerais ao projeto. [88]
    4. Configurações do projeto: para gerenciar aspectos como visibilidade, categorias, renomear, duplicar, transferir, desabilitar analytics, despublicar e deletar. [89]
    5. Chat: funciona como um ChatGPT, permitindo pedir melhorias e planos de ação sem gastar créditos, que são consumidos apenas na implementação das ações. [91]
    6. Créditos: o Lovable oferece 5 créditos gratuitos por dia, com planos pagos para mais créditos mensais. [96]
    7. Domínio próprio: é possível conectar o Lovable ao seu próprio domínio. [109]
    8. Knowledge: para definir instruções gerais e requisitos do projeto. [110]
    9. Workspace: para gerenciar equipes e configurações. [112]
  5. Novidades recentes incluem o Lovable Cloud e o Lovable AI: [120]
    1. Lovable Cloud: integra o back-end (dados e inteligência) diretamente no Lovable, oferecendo a opção de usar Firebase ou Supabase integrado, com precificação separada baseada no uso. [121]
    2. Lovable AI: permite usar a própria API do Lovable para IA, economizando créditos da OpenAI e simplificando a construção. [128]
  6. Outras funcionalidades incluem: [133]
    1. Ferramentas: gerenciam o Lovable Cloud e Lovable AI. [133]
    2. Labs: para integrar com GitHub Business. [134]
    3. Integrações: com Slack e GitHub, permitindo exportar o código para o GitHub e não ficar preso à ferramenta. [135]
    4. Visualização prévia: para ver como o aplicativo está ficando em diferentes dispositivos (tablet, celular). [138]
    5. Código: para quem entende de programação, visualizar o código gerado. [139]
    6. Analytics: para monitorar visitas ao site. [142]
    7. Segurança: um checklist de segurança para o aplicativo. [143]
    8. Performance: para verificar o carregamento e funcionamento do aplicativo. [144]
    9. Publicação: permite publicar o aplicativo com um link próprio ou conectar a um domínio personalizado. [148]

2. Planejamento Estratégico e Arquitetura do Projeto [156]

thumbnail

Um planejamento detalhado é crucial para criar softwares com IA, garantindo que o resultado final esteja alinhado com a visão inicial e evitando gastos desnecessários de créditos.

2.1. A Importância do Planejamento [156]

  1. Antes de construir qualquer projeto de software com IA, é fundamental realizar um planejamento detalhado, passo a passo. [156]
  2. O planejamento deve incluir a definição do problema a ser resolvido, o perfil do usuário, a solução proposta, as funcionalidades principais, a pesquisa de referências de mercado e o desenho das telas. [157]
  3. Sem um planejamento claro, a IA pode criar um aplicativo diferente do esperado, resultando em mais trabalho e gastos de créditos. [158]

2.2. Framework de Planejamento da Nocode Startup [161]

  1. A Nocode Startup desenvolveu um framework de planejamento para criação de projetos de software, aplicável a projetos com código ou IA. [160]
  2. As etapas do framework são: [161]
    1. Visão Estratégica de Mercado:
      1. Define o problema a ser resolvido, o objetivo da solução, as personas (usuários) e os requisitos do projeto.
      2. Inclui pesquisa de mercado para encontrar projetos semelhantes e inspirações de design e funcionalidades.
    2. Arquitetura Técnica:
      1. Identifica as ferramentas (stacks) e a arquitetura do sistema.
      2. Mapeia o fluxo de processos, cria wireframes (desenhos das telas) e o fluxo de telas.
      3. Desenvolve um documento PRD (Documento de Requisitos do Produto) com os requisitos do projeto.
    3. Criação Interativa:
      1. Envolve a construção e testes do MVP (Produto Mínimo Viável), com melhorias contínuas usando ferramentas de IA como GPT ou Cloud AI.
    4. Lançamento PDCA:
      1. Coloca a solução em produção e aplica o ciclo PDCA (Plan-Do-Check-Act) para melhoria contínua.
  3. Para alunos, há um documento completo no Notion com este framework, incluindo checklists e modelos prontos. [171]

2.3. Visão Estratégica: Exemplo de Aplicativo de Gestão Financeira [179]

  1. A primeira etapa é a visão estratégica, que envolve refletir sobre o projeto e usar IA (GPT ou Cloud) para auxiliar na construção dessa visão. [179]
  2. Os elementos da visão estratégica incluem: [180]
    1. Problema a resolver: Dificuldade em organizar finanças e falta de aplicativos personalizados. [181]
    2. Objetivo da solução: Criar uma plataforma de gestão de finanças pessoais (AppFinance). [183]
    3. Personas/Usuários: Um único usuário que deseja organizar suas finanças. [184]
    4. Levantamento de ferramentas e custos: Usar Supabase gratuito e planos Free do Lovable para não ter custos iniciais. [185]
    5. Requisitos funcionais: Três áreas principais: [187]
      1. Dashboard: KPIs (total de entradas/saídas, gasto médio diário, categoria de maior gasto), gráficos (despesa por categoria, gastos por dia), insights (sugestões de economia), filtros (7 dias, 30 dias, total, por categoria) e tabela de registros.
      2. Registro: Funcionalidades CRUD (Create, Read, Update, Delete) para adicionar, editar, visualizar e deletar dados.
      3. Meu Perfil: Informações do usuário.
  3. É crucial começar com um aplicativo simples e depois aprimorá-lo, evitando a complexidade excessiva no início. [198]

2.4. Arquitetura do Projeto: Front-end e Back-end [200]

  1. Todo projeto de software é composto por front-end (interface do usuário e interação) e back-end (banco de dados, segurança, gestão de usuários, arquivos e inteligência). [200]
  2. O back-end é fundamental para a inteligência, gestão de banco de dados, segurança de usuários e escalabilidade da aplicação. [203]
  3. O Lovable foca no front-end (interface), enquanto o Supabase é usado para o back-end, garantindo segurança, escalabilidade e conformidade com leis de segurança de dados. [206]
    1. O Supabase é um banco de dados baseado em PostgreSQL, oferecendo autenticação, segurança, gestão de usuários e armazenamento. [225]
  4. Opções para o back-end: [215]
    1. Planilhas: Não recomendadas para projetos robustos devido à falta de controle de dados, segurança e gestão de usuários, sendo adequadas apenas para MVPs muito simples. [217]
    2. Bancos de dados tradicionais: Como PostgreSQL, Oracle e MySQL, sendo o PostgreSQL um dos mais usados. [223]
    3. Supabase: Preferido por ser uma solução de back-end completa que inclui PostgreSQL, autenticação, segurança, gestão de usuários e armazenamento. [225]
    4. Lovable Cloud: Uma solução de back-end como serviço integrada ao Lovable, que oferece agilidade e praticidade, ideal para MVPs e projetos mais simples. [230]
      1. Para maior controle e profissionalismo, o Supabase separado é mais indicado. [231]
      2. Neste curso, o Lovable Cloud será usado pela facilidade e agilidade. [232]

2.5. Pesquisa de Mercado e Wireframe [233]

  1. A pesquisa de mercado é essencial para encontrar aplicativos semelhantes, coletar inspirações de design e funcionalidades, utilizando plataformas como Dribbble ou ChatGPT para gerar ideias. [233]
    1. É importante começar com designs mais simples, evitando projetos muito complexos no início. [236]
  2. O wireframe é um desenho do aplicativo, que pode ser feito no papel, em apresentações ou ferramentas como Miro, para visualizar a estrutura e os elementos desejados. [241]
    1. Desenhar o projeto ajuda a IA a criar algo mais próximo do que se deseja, evitando resultados inesperados e otimizando o uso de créditos. [248]

3. Criação Interativa: Design e Backend com IA [253]

thumbnail

A criação interativa envolve o uso de IA para construir o design e, posteriormente, integrar o backend, seguindo um processo de prompts e melhorias contínuas.

3.1. Etapas da Criação Interativa [253]

  1. A criação interativa é dividida em duas etapas principais: [256]
    1. Criação do design/interface: Foco em construir apenas a interface com dados fictícios, sem banco de dados ou autenticação. [256]
    2. Conexão com o back-end/inteligência: Após a interface estar pronta, conecta-se o back-end. [257]
  2. O processo envolve: [258]
    1. Usar o ChatGPT para criar um PRD (Documento de Requisitos do Produto) adaptado para um prompt.
    2. Colar o prompt no Lovable para criar a interface.
    3. Realizar melhorias e correções na interface.
    4. Pedir ao ChatGPT um novo prompt para o Lovable para conectar o back-end.
    5. Colar o prompt no Lovable para implementar a inteligência.

3.2. Criação do Prompt para a Interface [264]

  1. O GPT é usado como um companheiro de desenvolvimento para gerar prompts. [267]
  2. O primeiro prompt é um PRD (Prompt de Requisitos do Produto), que é uma instrução detalhada sobre o aplicativo, sua organização, estrutura, requisitos e usuários, adaptado para ser um prompt de alta performance no Lovable. [270]
  3. As instruções para o GPT incluem: [274]
    1. Criar um PRD completo e detalhado para o prompt inicial do Lovable, focado em alta performance para gerar telas, componentes e navegações.
    2. Priorizar a interface (UI first) com dados fictícios, sem back-end, autenticação ou API, para testar a usabilidade antes de conectar o back-end.
    3. Incluir o objetivo, funcionalidades (dashboard com KPIs, gráficos, insights, filtros e tabela de registros; registros com CRUD; perfil do usuário), tipos de usuários, estrutura de navegação, design, dados de teste e observações importantes (não criar back-ends, incluir interações, criar sem pressa).
  4. O GPT gera um prompt completo, detalhando o objetivo, escopo, diretrizes, arquitetura de navegação, filtros, gráficos, insights, estados do dashboard, páginas, formulários, dados mockups (testes), tipos de despesa, regras de cálculo, interações, microinterações e acessibilidade. [292]
  5. Este prompt é então copiado e colado no Lovable para iniciar a construção da interface. [299]

3.3. Construção da Interface no Lovable [300]

  1. Após colar o prompt no Lovable, a ferramenta começa a construir a interface. [300]
  2. É importante notar que, ao criar projetos com IA, o mesmo roteiro pode gerar resultados ligeiramente diferentes, com variações criativas, bugs ou erros. [304]
  3. O projeto de gestão financeira foi criado com sucesso, gastando apenas dois créditos, resultando em uma interface bonita e completa. [309]
  4. A interface inclui: [315]
    1. Dashboard: Total de entradas/saídas, gasto médio diário, categoria de maior gasto (ex: alimentação), gráficos de gastos por dia e despesa por categoria, insights personalizados (ex: "Se reduzir 10% na alimentação, você economiza R$ 82"), e filtros interativos (7 dias, 30 dias, total, por categoria) que atualizam os gráficos dinamicamente.
    2. Registros: Tabela de registros com filtros por tipo (salário, entrada, alimentação) e a capacidade de criar novos registros (embora a funcionalidade completa de criação não seja testada sem o back-end).
    3. Meu Perfil: Informações de teste e opção de sair da conta.
  5. O aplicativo demonstra um design funcional e interativo, com a ressalva de que a criação de registros ainda não é funcional sem o back-end. [340]

3.4. Testes e Melhorias da Interface [349]

  1. Um checklist é usado para revisar a interface, verificando se os filtros, design e funcionalidades estão operando corretamente. [349]
  2. Para fazer alterações ou corrigir bugs na interface: [352]
    1. Use o botão de chat primeiro para pedir ao Lovable um plano de ação, o que economiza créditos.
    2. Para mudar algo específico na tela, use a função de editar, selecionando o bloco ou elemento desejado e instruindo o Lovable a focar nessa alteração.
  3. O aplicativo de exemplo funcionou bem, sem bugs significativos no design. [361]
  4. Uma melhoria potencial identificada é a responsividade para celular, especialmente nos menus de navegação. [363]
  5. É aconselhável economizar créditos, pois cada mudança solicitada consome créditos, e focar os créditos restantes na implementação do back-end. [370]

4. Implementação do Back-end e Publicação do Aplicativo [375]

thumbnail

A segunda fase da criação interativa foca na integração do back-end com o Lovable Cloud, adicionando inteligência, segurança e funcionalidades CRUD ao aplicativo, culminando na publicação.

4.1. Criação do Prompt para o Back-end [375]

  1. O processo de criação de prompt é repetido para o back-end, usando o GPT para gerar as instruções. [375]
  2. O prompt para o GPT solicita que o Lovable conecte a interface ao Lovable Cloud (escolhido pela facilidade e agilidade), tornando o aplicativo funcional e integrado ao back-end. [378]
  3. As instruções detalhadas para o Lovable incluem: [382]
    1. Modelagem de dados: Estruturar tabelas, relações e campos.
    2. Autenticação: Criar login, senha e cadastro de usuários para garantir a segurança.
    3. Ações CRUD: Implementar funcionalidades para incluir, editar e deletar registros.
    4. Acessos: Definir quem pode acessar o quê no projeto.
    5. Simplicidade: Manter a simplicidade e não alterar a interface existente.
  4. O GPT gera um prompt que instrui o Lovable a ativar o back-end do Lovable Cloud, detalhando a modelagem de dados (tabelas de usuários, categorias, transações), autenticação (regras e políticas de acesso) e o CRUD completo, além de funções adicionais. [389]
  5. Este prompt é copiado e colado no Lovable para conectar o back-end. [394]

4.2. Conexão e Configuração do Lovable Cloud [399]

  1. Após enviar o prompt, o Lovable habilita o Lovable Cloud e a modificação do banco de dados. [400]
  2. Embora possa ocorrer um erro inicial, o aplicativo geralmente é criado com sucesso, exigindo login ou cadastro para garantir a segurança. [403]
  3. O Lovable Cloud oferece uma visão geral do back-end, incluindo: [409]
    1. Banco de dados: Contém tabelas como "transactions" (registros), "users" e "categories", com a capacidade de adicionar novos registros e exportar para CSV. [411]
      1. As Políticas de Acesso (RLS) definem que os usuários só podem ver suas próprias transações e devem estar logados, garantindo a segurança dos dados. [415]
    2. Usuários: Gerencia os usuários cadastrados, com senhas criptografadas e opções de login por e-mail, telefone ou redes sociais (Google). [420]
    3. Storage: Para armazenar arquivos como fotos e PDFs. [437]
    4. Cloud Functions: Para criar automações e conectar com outros sistemas. [438]
    5. Secrets: Para guardar chaves API de outros sistemas (ex: OpenAI) de forma segura no back-end, nunca no front-end. [440]
    6. Logs: Registra o histórico de eventos do aplicativo, auxiliando na identificação de erros. [450]
  4. A conexão com o Lovable Cloud consome mais créditos do que o esperado, possivelmente por ser uma ferramenta nova e integrar toda a inteligência. [455]

4.3. Teste e Funcionalidades do Aplicativo com Back-end [458]

  1. O aplicativo é testado para verificar o funcionamento do login, cadastro e das funcionalidades CRUD. [458]
  2. Cadastro e Login: O cadastro de um novo usuário e o login funcionam corretamente, garantindo a segurança do aplicativo. [459]
    1. Se houver erros, é necessário pedir ao Lovable para corrigir no modo chat. [462]
  3. Dashboard: Inicialmente zerado, pois os dados anteriores eram apenas de teste. [466]
  4. Adicionar Registros (Create): É possível adicionar despesas (ex: alimentação, educação) e entradas (ex: salário), com categorias que se ajustam automaticamente. [468]
  5. Visualizar Registros (Read): Os registros são exibidos e podem ser visualizados. [493]
  6. Editar Registros (Update): A edição de registros funciona corretamente. [494]
  7. Deletar Registros (Delete): A exclusão de registros também funciona. [500]
  8. Dashboard Atualizado: O dashboard se atualiza automaticamente com os novos dados, mostrando entradas, saídas, gasto médio e insights. [511]
  9. Filtros: Os filtros por dias (7, 30) e categorias (assinaturas, alimentação) funcionam de forma fluida. [516]
  10. Lovable Cloud: No back-end, é possível ver os usuários cadastrados e as transações associadas a cada ID de usuário, confirmando a integração. [518]
  11. O aplicativo está funcional e fluido, permitindo pensar em melhorias futuras. [515]

4.4. Publicação do Aplicativo [540]

  1. O aplicativo pode ser publicado diretamente pelo Lovable, gerando um link de acesso. [540]
  2. Antes da publicação, o Lovable realiza uma revisão de segurança, verificando falhas e avisos, com a responsabilidade da segurança sendo do back-end. [546]
  3. Após a publicação, o aplicativo está acessível via link, permitindo que os usuários se cadastrem, façam login e utilizem as funcionalidades de gestão financeira. [550]
  4. O aplicativo é multiusuário, o que abre possibilidades para monetização, como a criação de um SaaS (Software as a Service) ou micro SaaS. [561]
  5. Sugestões de melhorias futuras incluem a integração de um agente de IA para ler o banco de dados e a criação de metas de orçamento. [564]

5. Próximos Passos: Formação AI Code e Ecossistema No Code Startup [567]

thumbnail

A Formação AI Code oferece um caminho completo para criar aplicativos avançados com IA, integrando o Lovable com outras ferramentas e proporcionando suporte e oportunidades de monetização.

5.1. Formação AI Code [567]

  1. A Formação AI Code é um curso completo que ensina a criar aplicativos avançados com IA, explorando o assunto ao máximo. [569]
  2. O curso abrange: [571]
    1. Fundamentos Essenciais: Melhores práticas para criar software robusto e escalável, mesmo sem saber programar.
    2. Metodologia: Utiliza o framework da Y Combinator com um documento detalhado e checklists para guiar a criação de projetos.
    3. Fundamentos do Lovable: Criação de sites e design de interfaces.
    4. Projetos com APIs: Entendimento e conexão com outros sistemas da internet.
    5. Visão Geral do Supabase: Embora o Lovable Cloud seja mais fácil e ágil, o Supabase separado é recomendado para projetos profissionais devido ao maior controle e previsibilidade de custos.
    6. Projeto do Zero: Um projeto mais completo e aprofundado do que o apresentado no curso gratuito.
    7. Trilha de Suportes: Aulas sobre gestão de suporte, back-end e banco de dados, essenciais para projetos avançados.
    8. Trilha de ICODE Avançado: Aulas futuras para criar projetos mais complexos e MVPs avançados.

5.2. Ecossistema No Code Startup [589]

  1. Ao entrar no ecossistema No Code Startup, você tem acesso a diversas formações e recursos: [598]
    1. Formação de Low Code e No Code: Com foco no Lovable, sendo embaixadores oficiais.
    2. Formação Completa de Agentes de IA: Para criar superagentes e automações com IA e Machine Learning, usando ferramentas como N8N, WhatsApp, Telegram e Instagram.
    3. Formação Completa de APIs: Para criar back-ends avançados e ter mais controle sobre os projetos.
  2. O ecossistema também oferece: [600]
    1. Comunidade: Com mais de 10.000 membros, masterclasses semanais e sessões diárias de tira-dúvidas ao vivo.
    2. Networking e Oportunidades de Trabalho: Através da Nocode.Market, a maior plataforma de desenvolvedores de IA e Nocode do Brasil, que conecta desenvolvedores a vagas exclusivas e permite criar portfólios.
    3. Monetização: Exemplos de alunos que já monetizaram com IA, ganhando "plaquinhas" de 10 mil, 100 mil e 1 milhão de reais.
  3. Outros benefícios incluem: [613]
    1. Acesso a outros cursos do ecossistema.
    2. Descontos em ferramentas (mais de R$ 1.000).
    3. Acesso a plataformas No Code AS (agentes especializados para tirar dúvidas).
    4. Templates prontos e todos os projetos da comunidade.
  4. A formação ensina do zero, passo a passo, mesmo para quem não sabe programar, focando nas melhores práticas e fundamentos para criar projetos robustos e escaláveis. [616]
  5. O suporte para dúvidas é contínuo, com lives diárias e a possibilidade de postar na comunidade. [619]