Seja muito bem-vindo ao curso de lob 100% gratuito. Nesse curso aqui, a gente vai ser super prático e vamos criar um projeto aí do zero até a publicação. Você vai aprender a base para depois criar qualquer outro tipo de projeto com llobal.
A gente vai criar um app de plataforma de gestão financeira, onde o usuário vai poder adicionar gastos, controlar as receitas, controlar as saídas e vai ser um aplicativo multiusuários. Nesse aplicativo você vai aprender como criar um app aí do zero, com todo o planejamento estruturado passo a passo e também aprender as melhores práticas de desenvolvimento lá no lobby. Esse curso aqui é um conteúdo de nível pago que a gente tá disponibilizando para vocês e era o que eu queria ter acesso quando eu estava começando a aprender, porque tá tudo estruturado e na melhor didática possível.
E a única coisa que eu peço em troca é que você comente aqui embaixo o que que você achou do lobo, o que que você achou do projeto e cada comentário vai ajudar a gente levar o vídeo para mais pessoas. E recado muito importante, na descrição do vídeo aqui vai ter um link pros materiais que eu vou estar usando nesse curso. Então toda a parte dos materiais em PDF, a parte aí do prompt vai est tudo embaixo aqui no link da descrição do vídeo.
E seja muito bem-vindos ao canal. Meu nome é Mateus Castelo, sou fundador da Nocode Startup e também baixador oficial do Lobo aqui no Brasil. Aqui no canal a gente ensina como que você pode criar aplicativos, softwares, automações, agentes sem precisar de código.
E sem mais enrolação, bora ver o que você vai aprender nesse curso e bora começar que tá irado demais. Então, nessas aulas aqui, você vai ter o primeiro contato com o Lobo, que é a melhor ferramenta Vibe Code para você criar o seu projeto de uma forma ágil e um projeto também robusto. Além disso, a gente vai ver bastante prática e pouca teoria, tá?
a gente vai focar em criar nosso projeto, vamos focar em planejar e conseguir sair do zero pro nosso projeto pronto para depois você conseguir replicar pro projeto que você tá construindo aí, seja na sua empresa, um projeto pessoal que você tá criando com Vibe Code. Além disso, você vai entender quais são os processos e as partes para você criar software, tá? o que que é um front end, o que que é um backend, como que eles se conectam entre si, toda a parte do planejamento, como que a gente estrutura o planejamento aí de um projeto robusto e também como que a gente faz toda a metodologia para conseguir ter boas práticas ali dentro do lobo e criar o nosso projeto.
E como eu já falei, todos os materiais vão estar aqui na descrição desse vídeo para você baixar e conseguir acompanhar junto comigo, tá? Dito isso, bora lá e bora começar. E antes da gente se aprofundar no lobbo, bora explorar as melhores ferramentas Vibe Code no mercado para você entender para qual ferramenta é ideal para qual tipo de projeto, tá?
Isso daqui é muito importante na sua jornada aí de aprender as ferramentas. E a gente pode dividir as ferramentas aqui, eu dividir em dois grandes grupos, projetos mais simples e projetos mais complexos, tá? Nos projetos simples, coloquei aqui, a gente vai ter maior facilidade para criar aquele tipo de projeto, tá?
Algumas vezes a gente pode talvez ter menor controle que vai depender de qual ferramenta que a gente tá usando para criar esse projeto. Então se você quer criar aí uma landing page, um site, uma um dashboard, uma interface, uma plataforma mais simples, com poucas telas, um MVP mais simples, né, com foco naquele problema que você tá querendo resolver, aí já é um uma categoria dos projetos mais simples, tá? Se você quer que quer projetos mais complexos, geralmente a gente vai poder envolver aí um pouco mais de código com EA, tá?
com as ferramentas de webcode. Então, a gente vai poder criar também as plataformas complexas, vai também poder criar SAS complexos, mas é importante f claro essas duas divisões na hora que você for escolher o projeto que você tá desenvolvendo, tá? E dentro aí das ferramentas de vibe code, a gente tem dezenas aí de ferramentas que a gente consegue criar com a, por exemplo, a gente também consegue criar aqui, ó, com o chat GPT, a gente consegue criar com cloud, a gente consegue criar com Gemini, a gente consegue criar com Manus.
Então, a gente tem plataformas aqui conversacionais que também são ideais para projetos mais simples, tá? Então você pode abrir o GPT e pedir para ele criar o seu app, tá? ele não vai ser focado nisso.
Então não é tão bom você fazer isso com o GPT ou com o cloud. É melhor você usar as ferramentas que são focadas em criar software com IA, tá? Isso daqui é bem importante, mas é uma opção se você tá criando um projeto simples, tá?
Você pode usar as plataformas conversacionais ou também você pode usar as plataformas de web, né, com IA code. Então a gente tem aqui o Lobel, que é uma plataforma que a gente vai abrir na web e vai criar nosso aplicativo lá pela web. A gente tem o Rt, a gente tem o Bolt, temos o V0, base 44, coloquei aqui ó, Hostinger e tem várias e várias outras plataformas bem interessantes no mercado, tá?
Basicamente a gente consegue abrir lá na web, no site deles e criando o nosso projeto, tá? Então aqui para projetos mais simples, eu coloquei esses dois grandes blocos, tá? plataformas conversacionais e plataformas web para criar aí com Ecode.
Além disso, a gente tem projetos mais complexos que vai envolver um pouco mais de código. A gente primeiro tem os editores de código, então mais famoso aqui é o cursor e tem mais alguns, né? Por exemplo, o Insurf, o Try.
Então você consegue criar o seu app basicamente lá editando código com ya, que é uma boa opção também. envolve aí um pouco mais de complexidade, um pouco mais da parte técnica, mas a gente consegue ter melhor controle do projeto, tá? Então a curva de aprendizado é maior, mas a gente vai conseguir ter maior controle.
Ou também você pode fazer no uso no terminal, tá? Que o pessoal chama aí de CLI, interface de linha de comando. Para isso, a gente tem o Cloud Code, tem o Codex, tem o GMINI e tem mais algumas outras ferramentas sendo lançadas aí no mercado, tá?
Então se você tá criando projetos mais simples, eu recomendo aquelas plataformas. Se você tá criando projetos mais complexos, talvez seja melhor você ir para uma dessas ferramentas para ter maior controle, tá? E aqui dentro desse curso, a gente vai focar no lobo.
E o lobo é excelente para criar projetos mais simples, tá? Se você quer criar aí um site, um dashboard, um MVP, uma plataforma com poucas telas, tá? Então vai começando aos poucos, cria primeiro MVP e depois vai criando um projeto para deixando mais detalhado.
Então o álbum é excelente para isso e dessa forma a gente consegue criar aplicativos aí em basicamente dias, tá? Então é excelente e a gente vai criar aqui um app só nesse vídeo aqui você vai já sair com app pronto, tá? Então o lobo ele é excelente, é uma ferramenta poderosa e é uma ferramenta aí ideal pra criação de interfaces, tá?
Depois a gente vai conversar um pouco mais, mas ela cria as interfaces, o front end. a gente sempre tem que conectar com back end, que no caso a gente vai usar superabase, tá? Então lobo com super base é poderoso.
Tem essa conexão nativa com super base, que onde vai rolar todos os bancos de dados, toda a parte de segurança, parte de escalabilidade vai ser com super base. E basicamente a maior ferramenta aí que cresceu em toda história em poucos meses já tinha atingido aí milhões e milhões de faturamento em dólar. Então é uma baita ferramenta que tá recebendo investimento e com certeza ela vai melhorando ao longo dos meses, tá?
Então eu recomendo aí você, se você não sabe programar, não sabe nada de código, começar pelo lobb para criar seus projetos, criar suas plataformas. Com certeza você vai criar projetos aí rápidos e projetos incríveis. E aí, se você tá na dúvida, que tipo de projetos que você consegue criar, tá?
Separei aqui alguns nichos, tá? Por exemplo, você consegue criar tecnologia, plataformas para nicho imobiliário, site de móveis, automação. Você consegue criar aí sites e plataformas, ferramentas para infoprodutores.
Também aí pro nicho de saúde, consegue criar plataforma de agendamento que é interessante e muito demandado no mercado. Consegue criar aí, ó, ferramentas pro nicho jurídico, tá? Gestão de processo, automação de relatório de clientes, ali pro nicho também de hotelaria, gastronomia, pro nicho de beleza, estética também pro fitness, mainstar também, e-commerce, várias online.
A gente consegue criar vários e vários tipos de projetos e aí vai depender aí da sua criatividade. Eu só recomendo que você comece com um projeto mais focado, um projeto mais simples, com poucas telas, poucas funcionalidades para focar exatamente na dor que você quer resolver. Depois que o projeto for validado, você vai crescendo ao longo do tempo aqui no desenvolvimento, tá?
Então, começa com algo mais simples e depois vai deixando mais complexo. E além disso, né, algumas potenciais soluções, você consegue criar qualquer tipo de aplicativo web aí com integrar também com o GPT, consegue criar botes e automações, se a gente integra lá com Netu criação de agentes, também fica muito poderoso. Plataforma de e-commerce, dashboards, é incrível aqui, fica muito bonito, a gente consegue fazer muito rápido esses relatórios automatizados também de gestão de usuários e fluxos de automação empresarial.
Então são dezenas e dezenas aí de possibilidades de projetos que a gente consegue criar. Com certeza você escolhendo o lobo, você tá no caminho certo para criar seu primeiro projeto e conseguir aí dar o primeiro passo em criação de softwares com. Então agora que você já entendeu as melhores ferramentas no mercado e o poder do lobbel, bora lá pra ferramenta pra gente criar a nossa conta.
Ó, para criar sua conta é só utilizar um link aqui embaixo, tá? Utilizando esse link a gente consegue aí uma melhor relação com o lobbum. Eles conseguem ver que a gente tá mandando mais estudantes se cadastrando por esse link aqui e conseguimos uma comunicação melhor para aí pedir melhorias e sugestões ali diretamente com a equipe do Lobo.
Então se cadastra pro link aqui e bora lá. Então eu já entrei aqui no site do Lobble, tá? Depois se você quiser você pode explorar um pouco mais, mas passando o overview geral aqui a gente vai conseguir ter os nossos projetos, tá?
Aqui vão ter projetos da comunidade que também a gente consegue eh duplicar esses projetos para reutilizar. Você consegue ver até vários cases bem legais aqui. E aqui também em cima você consegue ver um pouquinho dos preços empresarial, a parte de aprender alguns tutoriais também.
Mas eu quero focar aqui da gente ir lá pro nosso painel e já começar a entender como é que funciona na construção, tá? Vamos pra prática. Então, como eu falei, é, entra no link aqui embaixo, faz o seu cadastro e bora lá começar, tá?
Eu vou abrir aqui um projeto pra gente fazer um overview da ferramenta e você começar a entender as possibilidades que tem dentro do lobbal. Então, já abri um projeto aqui, inclusive esse é um projeto de CRM, tá? Paraa gestão de leads, ó, que ficou bem bonitão.
Tem a parte aqui de total de leads, taxa de conversão, tem gráficos, né, que a gente consegue fazer leads e negócios por dia. Criei aqui também todo um camban pipeline passando aqui de uma coluna para outra. Eu consigo ver também os detalhes desse lead para fazer a gestão.
Consigo ter aqui a lista dos leads. Parte aqui de fazer um filtro também funciona muito bem e tem todo o sistema administrativo, então consigo gerenciar a níveis de usuários, tá? Esse é um projeto bem bacana que inclusive a gente ensina lá na formação do zero até a publicação.
Depois se você quiser aprender um pouco mais a fundo o lobo, eu recomendo você conhecer a nossa formação aqui. Mas eu só abri o projeto pra gente começar a entender um pouco mais da plataforma aqui de das opções, você começar a entender como é que funciona, tá? Então bora comigo para você entender.
Acho que acompanha comigo agora, depois a gente vai fazer um projeto do zero, aí a gente vai fazendo passo a passo, tá? Por enquanto só acompanha comigo, beleza? Então aqui, ó, é onde a gente vai ter o nosso prompt, tá?
que a gente vai mandar os promptes. No caso, eu mandei um prompt bem completo aqui, né? Tem toda uma estrutura para mandar esse prompt lá em cima.
Mandei esse prompt bem completo. E aí você vai conversando com o lobo aqui embaixo para entender é o que que ele vai fazer, né? Então você vai conversando e vai criando o seu projeto.
É claro que toda uma metodologia para você mandar prompt gastar menos créditos para ele não alucinar, tá? Isso é bem importante e a gente vai conversar sobre alguns tópicos sobre isso, mas aqui eu vou conversando. Aqui eu consigo selecionar partes do meu projeto para editar, tá?
O que mais que eu consigo fazer, ó? Eu consigo vir aqui e ver o histórico, consigo eh conectar conhecimento, que a gente vai falar um pouco mais sobre isso, já ver as configurações do projeto, tirar a captura de tela, mandar um print, né? pedir para ele copiar um projeto, uma, por exemplo, você acha um case legal, que é mandar um print para ele.
A gente consegue também aqui vi no chat. No chat isso daqui é muito importante porque ele basicamente ele vai conversar com você como se fosse o jetpt. Então aqui você não vai gastar crédito.
Então toda vez que você for pedir alguma melhoria, arrumar algo, a gente vem aqui e pede para ele a chat que ele fazer um plano de ação e depois a gente implementa o plano de ação. Toda vez que ele for implementar o plano de ação, ele vai gastar aí alguns créditos, tá? Para você ver os créditos aqui, ó, por exemplo, ó, três pontinhos, a gente tem aqui, ó, que gastou 1.
5 créditos. Então, geralmente vai gastar aí de 05 créditos, um crédito, vai dependendo da complexidade. A gente tem aqui, ó, cinco créditos gratuitos por dia para utilizar, tá bom?
Então, isso que é interessante. Já vamos falar um pouquinho mais sobre pricing. Então, geralmente a gente usa o chat, vamos usar aqui ao longo do vídeo também.
E aqui vamos entender um pouco mais nas configurações, tá? só pra gente fazer um overview e você conseguir entender como é que funciona aqui o lobo, beleza? Então aqui a gente tem as configurações do projeto, tá?
Aqui tem as configurações gerais que a gente consegue ter um overview geral, tem conseguimos ver a visibilidade, aonde que ele tá disponível. Então lobo ele tem workspaces, cada workspace a gente consegue colocar outros usuários. Então eu tenho gente aqui do time da No que tá construindo nossos projetos aqui pelo workspace.
a gente consegue selecionar categorias, a gente consegue ocultar, né, o desenvolvido por lobal, tá? Então, quando você tem a plana, o plano é o plano pago, o plano pro, você consegue ocultar. E aqui tem várias outras opções, né?
A gente consegue renomear o projeto, remixar o projeto, é duplicar, tá? Então, toda vez que você quer duplicar um projeto lá da comunidade, você coloca remixar. A gente pode transferir o projeto, desabilitar os analítics, despublicar nosso projeto e deletar.
Legal. Aqui também a gente consegue colocar o lobo no nosso próprio domínio, tá? Então uma forma que a gente consegue fazer, temos a parte aqui de conhecimento, knowledge, basicamente a gente coloca instruções gerais do nosso projeto, tá?
Então linhas que ele deve seguir, o que é importante, o que que o que que não é importante. Você coloca como se fosse um prompt geral para esse projeto, tá? Aqui temos o nosso workspace, tá?
Que a gente consegue fazer toda a gestão. E aqui a gente consegue definir, né, as as configurações do nosso workspace. aqui as pessoas que estão no meu workspace e também aqui a parte de precificação, tá?
Então, muita gente tem dúvida aqui sobre a precificação. A gente tem alguns planos. O lobo ele dá esses cinco créditos por dia para você utilizar, tá?
Então, depois que você usa esses cinco créditos, tem que esperar até o outro dia para continuar usando os créditos, tá? Depois tem alguns planos lá que você vai pagar para ter aí pelo menos aí 100 crédito por mês, 200 créditos por mês, 400 créditos por mês e o créditos por mês, tá? No caso aqui eu tô com minha conta de embaixador, embaixador aí logo do Brasil e aí eu consigo ter um pouco mais de créditos para testar e para poder ensinar vocês, tá?
E a gente tem o Pro aqui, tem a parte do business, mas basicamente a gente consegue aí fazer toda a parte de eh ã usar os criar os aplicativos usando esses créditos. Então tudo vai depender de quantos créditos você usa. Por isso que é bem importante saber a forma correta de você fazer o prompt, a forma correta de você fazer as melhorias.
Então tem todas as melhores boas práticas, tá legal? Aqui em usage a gente consegue ver o nosso uso, tá? E aí foi adicionado recentemente duas grandes novidades que a gente vai falar na prática nesse vídeo aqui, tá?
Que é o Lobb cloud e o Lobb AI. O LB Cloud, basicamente ele tá juntando todo o backend aqui dentro do lobbel, tá? Então, basicamente, todo software ele ele é composto por front end e pelo back end.
O front end interface, o back end, toda parte de dados, parte de inteligência. Agora antes tava conectado com super base. Basicamente eles trouxeram superbase aqui aqui para dentro.
Então você tem a opção de ou usar o superbase ou usar o superbase integrado no lobo, que é o lobo cloud, tá? E como que vai funcionar esse plano, esse precificação? Ela é separada, tá?
Ela é separada lá do plano eh desse plano aqui que eu acabei de falar, esse plano aqui dos das mensalidades dos créditos. Só vai depender de quanto você usa do seu back end, tá? Então aqui, ó, usei já 16 centavos e eu tenho 25 e dólares para usar no gratuito.
E aqui também tem o AI. Basicamente você não precisa ficar conectando a sua chave API lá da PNI para gastar crédito. Você pode usar a própria EI deles que já vai est usando os créditos aí pro seu app, tá?
Então isso daqui é uma forma mais prática que eles estão nos deixando mais fáceis pra gente conseguir construir tudo dentro do lobo. Ao longo desse vídeo aqui eu vou falar dos pró e contras disso. Beleza?
Aqui eu tenho informações aqui da minha conta, né, Mateus Castelo. Temos aqui ferramentas que basicamente a a gente gerencia o lobo cloud e o lobo AI. Depois a gente vai falar mais sobre isso, tá?
Tem aqui a parte de labs, que é basicamente integrar aqui e fazer usar, utilizar o GitHub Brand. E tem as integrações, né? Integração com Supas importante, e integração com GitHub, pra gente basicamente pegar todo o nosso código e deixar lá no GitHub.
Assim o código é nosso, tá? Então isso aqui é bem importante que a gente não ficar preso à ferramenta. Legal demais.
Então já conhecemos aqui as configurações, já conhecemos aqui a parte do chat, vamos conhecer aqui a parte de cima, tá? Então aqui em cima a gente consegue ter um preview do nosso app. Também conseguimos ver todo a parte de código.
Então quem entende de código pode ver como está ficando. E aqui a gente vai ter o nosso lobo cloud, tá? No caso, esse projeto aqui tá conectado com base.
O projeto que a gente vai desenvolver nessa aula, a gente vai usar o lobo cloud para você ver como é fácil, prático e rápido, tá? Então quando a gente for utilizar o L cloud, a gente volta para cá e a gente vai aprendendo na prática, tá? vai fazer tudo do zero.
Além disso, tem a parte de analytics, quem tá visitando o nosso site, parte de segurança, ele faz um checklist bem legal de segurança pro nosso app e também a parte aqui de performance. Então, se tá sendo acessado aí, carregando de uma forma rápido, se tá sendo bom. Legal.
Então, a gente tem aqui todo o nosso projeto. A gente consegue ver como que ele tá ficando, né? Ó, aqui no tablet, no caso, esse projeto aqui, ele não é responsivo, né?
Mas você consegue criar projetos responsivos para celular. Conseguimos clicar aqui para abrir o projeto numa nova eh aba e conseguimos vir aqui, ó, e publicar. Então, tem o nosso link aqui.
A gente pode vir aqui e publicar, tá? É um projeto bem legal esse daqui. Depois até recomendo, se quiser aprender mais passo a passo, mais avançado, mais aprofundado, dá uma olhada nossa formação.
Mas bora continuar aqui a aula que também você vai aprender bem a criar seu primeiro projeto. Então agora a gente já fez um overview da ferramenta lobo, tá? Não tem muitas opções por lá, a gente já consegue avançar aqui na aula.
E agora bora começar a construir o nosso case. Mas a gente não vai colocar ainda a mão na massa direto lá no lobbel, tá? Quando você tá construindo qualquer outro projeto de software, projeto com IAC, é muito importante que você faça todo o planejamento muito bem, passo a passo.
Então, é bom você entender primeiramente qual o problema você tá resolvendo, qual que é o tipo de usuário, qual que vai ser a solução, quais são as principais features que vão ter, pesquisar também referências do mercado, também fazer um desenho da tela para você quando começar a criar e for mandar o prompt lá no lobo ou qualquer outra ferramenta Vibe Code, ela conseguir construir o mais parecido com o que você tava pensando lá no começo, tá? Se você fori lá e só colocar uma frase e pedir para ele construir, crie aqui um app para mim desse tipo, ele vai lá e vai criar com certeza um app legal, mas talvez não seja o que você tá querendo. O que que vai acontecer?
Você vai gastar mais créditos, vai ter mais trabalho e vai ser bem ruim para você. Então, para isso aqui na No code startup, a gente pensou todo um framework de planejamento, tá? Eu quero te explicar esse framework e basicamente depois você pode utilizar ele esse esse framework nos seus outros projetos, só seguindo o passo a passo de planejamento, tá?
Então olha que legal que ficou. Primeiramente a gente vai ter a visão estratégica de mercado, depois os insightes aqui, ó, de mercado, arquitetura técnica, criação interativa e o lançamento PDCA, tá? É um passo a passo para você conseguir criar os seus projetos aí de software, seja você tá construindo um projeto com Code, seja um projeto de agente, tanto faz, tá?
Então aqui na parte de divisão estratégica, primeiramente a gente vai ver o problema que resolve, a gente também vai ver o objetivo da solução a personas, usuários e quais são os requisitos, né? O que que vai ter nesse projeto? Depois disso, é muito importante que você faça aí uma pesquisa de mercado para entender, né, quais são os projetos semelhantes ao seu que você quer construir e pegar inspirações, tá?
inspirações de design, inspirações de funcionalidades. Então aqui é bem importante. Depois disso, a gente vai toda pra arquitetura técnica, onde a gente entende, né, qual que são os stacks de ferramentas que a gente vai usar, qual que é a arquitetura do sistema ou de agentes, né, se tiver construindo, fluxo de processos, tá?
Então deixar tudo bem mapeado para quando você for construir, wifame e fluxo de telas, basicamente são desenhos de telas de como você tá imaginando para ajudar aí a parte de dados, modelagem também. a gente vai ter um documento PRD, para quem não sabe, é um documento aí resumo no nosso projeto, com nossos requisitos, que vai ajudar aí a a construir. Depois disso, a gente vai pra parte aqui de criação, tá?
Eu coloquei criação interativa porque a gente sempre tá em contato com outra ferramenta de A e vão melhorando, volta, vai lá, corrige, mas a gente sempre vai usar ou o GPT ou o cloud I para ajudar em toda essa estrutura, tá? Então, a gente vai construir um projeto, vamos também testar, a gente vai testar bastante com A pra gente ter aí o nosso MVP e por fim a gente conseguir colocar a solução em produção e PDCA, que nada mais é melhoria contínua, tá? Então a gente aplica aqui, checa ver o que tá melhorando e vai melhorando e vai fazendo a roda girar, tá bom?
Então, basicamente esse daqui é o checklist. A gente vai seguir aqui nessa aula passo a passo desses checklist. Para você aí que é aluno, a gente tem um documento aí que a gente disponibiliza na nossa comunidade pros alunos, que é um firmware completo no notion, tá?
Que basicamente já tá tudo lá documentado. Você vai lá, aperta só o check, vai documentando, você consegue utilizar vários, vários modelos prontos. Então, para quem é aluno vai ter o FM completo, tá?
Aqui pra aula a gente vai também fazer isso, mas pela parte do design só, tá? Pela parte aqui dos da apresentação, a gente vai seguindo junto comigo, beleza? Mas vai tá bem legal também, você vai conseguir ver o passo a passo.
Se você quiser algo mais completo, mais avançado, é só ir lá na nossa comunidade que tá disponível pros alunos. Beleza? Então bora começar.
Vamos falar aí do framework passo a passo e planejar nosso projeto. Então a primeira etapa que a gente vai fazer vai ser a visão estratégica, tá? Então aqui é muito importante que você sente para o momento, eh, faça uma reflexão sobre o que que você quer do seu projeto e também sempre utilize ali o GPT ou Cloud para te ajudar a construir a em conjunto, tá, essa visão.
E o que que a gente vai ver nessa visão? O problema que resolve qual que é o objetivo da solução, quais são as personas e os usuários, levantamento de ferramentas e custos e também requisitos funcionais ali do seu projeto, tá? Então, para esse projeto aqui que a gente tá fazendo, que é o nosso aplicativo, a nossa plataforma de gestão financeira pessoal, eu já levantei aqui certinho para você usar como exemplo, tá?
Então, qual que é o problema que resolve? Então, a gente tem dificuldade em organizar finanças e nenhum app é personalizado da forma aí que eu quero. Então, a gente consegue criar um app específico para isso, tá?
Então, sempre pense aí no problema no começo, tá? Não vai ficar pensando, viajando na solução. Pensa qual que é o problema e aí sim você vai lá e pensa na solução para resolver esse problema.
Então, qual que é a solução? Plataforma de gestão finanças pessoais, appinanças, pessoas, usuários, tá? Então, um usuário vai ser só um, que é o usuário que quer organizar as finanças.
Os custos a gente não vai gastar nada, né? A gente vai usar o superab gratuito, a gente vai buscar usar também o lobbí, então vamos tentar não gastar nada aqui no nosso primeiro versão do app. Quais são os requisitos?
Tá? Então eu quero três áreas que eu pensei aqui, bem legal, que é a parte de dashboard, a parte de registro e a parte de meu perfil. Então no dashboard eu já defini aqui exatamente o que eu quero.
Então tem os KPIs, que é os total de entradas, total de saídas, gasto médio diário, categoria com maior gasto, tem gráficos, né? Então aí você pode explorar, né? Claro que eu sempre recomendo você começar fazendo um projeto mais simples, tá?
Então aqui eu coloquei gráficos, despesa por categoria, gráfico gasto por por dia, insites, eu quero que ele me dê insightes também de quanto eu tô gastando, o que que eu tenho que tomar cuidado, filtros, então coloquei filtro simples, tá? Só 7 dias, 30 dias o total, seleção por categoria e os registros aqui também, né? Uma tabela com todos os dados.
Aqui a gente vai fazer um crude. Para quem não sabe o que é crude, é quando você tem o create, read, update e delete. Então, quando você cria dados, lê dados, atualiza dados e delata dados.
Então eu quero conseguir colocar novos dados, editar dados, visualizar esses dados, tudo aqui na tabela de registros e o meu perfil, tá? Então aqui fiz um projeto simples. É bem importante que primeiro você faça esse app simples e depois você vai melhorando, tá?
Não vai tentar fazer um app super complexo logo no começo que senão vai dar ruim. Coloquei aqui. Faça esse processo com ajuda de uma IA, tá?
E aí agora a gente tem a arquitetura do projeto. Então para você que não sabe, quando a gente tá criando um projeto, a gente sempre tem a parte do front end e a parte do back end. O front end vai ser onde a gente vai ter aí toda a interface do usuário, a interação do usuário.
O back end é toda a parte de banco de dados, segurança, gestão de usuários, gestão de arquivos. Então é muito importante e é toda a inteligência do seu projeto, tá? Então é muito importante você entender isso, que quando você tá criando um sistema, um software, sempre tem que ter a conexão do front end com um back end, tá?
E aí quando a gente fala do back end, ele é essencial pro seu projeto, ele vai ser responsável aí por grandes funcionalidades. Então vai ser toda a inteligência de aplicação, vai ser toda a gestão do banco de dados e arquivo, vai ser toda a parte de gestão e segurança aí dos usuários, toda a parte de escalabilidade. E o lobo, o foco dele é uma ferramenta de front end, então é uma ferramenta de interface, a gente cria o sistema, como a gente vai interagir com ele.
Quem vai fazer a conexão ali é o Supase. Então a parte de segurança, escalabilidade, não é o lobo que vai ser responsável por isso, mas sim o su base. E o su base é excelente aí um back end back end seguro, um backend que tem as principais leis de segurança em relação aos dados do mundo, tá?
Então a gente gosta bastante do Pabase aqui e ele basicamente é o coração. Depois se você quiser, você pode conectar outro front end e só conectar com o Supase. Por isso que ali vai ser o banco de dados mais importante, tá?
Então a galera às vezes fala: "Ah, castelo, mas não é muito perigoso aqui o lobo". Cara, ele vai conectar com back end super base e seguindo as melhores práticas aí de segurança, você vai ter um app aí robusto, profissional, escalável e seguro, tá? Legal demais.
E aqui a gente tem algumas opções, tá? Para fazer o nosso front end com o nosso backend. Como eu falei, o lobo é focado aqui no front, tá?
Na interface. Aqui a gente poderia, por exemplo, usar planilha. Então você tem uma planilha lá com banco de dados.
Só que planilha a gente não gosta, a gente não recomenda porque a gente não consegue ter o controle ali dos dados, a gente não consegue ter o controle da segurança, o controle da gestão de usuários. Então, planilha, ó, é péssimo. Não utilize planilha.
Só se for um MVP é muito simples para fazer o seu projeto, tá? Não use planilha com o banco de dados, mas dá para fazer, é bom para fazer uns um mínimo MVP e depois você vai melhorando. Depois disso, a gente consegue usar os bancos de dados eh do mercado que são tradicionais, tá?
Então tem o PIGres, tem Oracle, tem o MySQL. Aqui a gente gosta bastante do PIGR, né, que é um banco de dados que é um dos mais usados no mundo aí na história da tecnologia, mas a gente gosta mais. O nosso preferido é o Supase.
O Supas por trás dele tem o Peggen, tá? Mas ele é uma solução de backend. Então, além do banco de dados, a gente consegue ter autenticação, a gente consegue ter a segurança, gestão de usuários, storage.
Então, vem todo aqui os benefícios do banco de dados do Postgre junto com base, é o melhor aí de longe, tá? E recentemente o Lob lançou o lobb cloud, que basicamente é o back endí base, mas já tá integrado na ferramenta, então já tá integrado lá na interface, né? Então aqui tem vários pontos positivos e negativos, tá?
O principal deles positivo é que a gente consegue ter mais agilidade, é mais fácil, mais prático, porque toda a parte meio chatinha do Supas já vai est aqui lá no lobb cloud, tá? Então é excelente pra gente fazer algo rápido, tá? Mas eu vou indicar quando você tá criando o MVP, algo mais simples, algo mais direto ao ponto, tá?
Se você quer mais controle, quer fazer algo mais profissional, algo mais robusto, aí é melhor usar o suabase separado, tá? Aqui nessa aula a gente vai usar o lobo cloud por conta aí da facilidade, praticidade e também é muito bom e basicamente é o SPAS integrado, tá? Mas aí mais para frente você pode aprender como é que funciona a separação, tá?
Legal demais. Então entendido isso, a gente pode ir pro framework da no cur startup seguindo com os sites do mercado. Basicamente aqui você tem que fazer uma pesquisa de mercado para ver se tem apps de finanças ou apps parecidos com seu lá no mercado e pegar inspirações de design, tá?
Então aqui é bem importante você usar, por exemplo, plataformas como Drbble ou você usar o próprio GPT e pedir para ele fazer aí pesquisa de mercado, tá? Então você pode ir lá no Drbble, por exemplo, e pesquisar dashboard, você consegue ter várias referências legais, tá? Só toma cuidado, sempre vai ir pelo lado mais simples no começo, tá?
Porque aqui tem alguns projetos bem complexos, com muitas telas, muitos detalhes. Então vai por algo mais simples no começo, não cria um monstro por agora, tá? Depois você cria algo mais simples, você vai melhorando.
Essa é a minha dica aí principal. Ali eu já peguei algumas estruturas, depois a gente vai falar sobre wifame, mas arquitetura técnica, a gente tem aqui toda a parte de mapamento de processos, wireframe e fluxo de telas, integrações, e sistemas, mudagem de dados. Basicamente a gente vai detalhando cada parte, tá?
Lá na formação a gente explica um pouco mais a fundo, tá? te aprofunda bastante em todos esses projetos, faz vários projetos aí é mais completos para você conseguir seguir realmente o passo a passo. Aí são várias horas de conteúdo, tá?
Como aqui eu quero passar o conteúdo mais rápido, a gente vai pro principal que é o frrame fluxo de telas e qual que vai ser o nosso promestre, tá? Primeiramente, wifi frame. O que que é o wiframe?
A gente basicamente faz um desenho do que a gente tá querendo ali pro nosso app, tá? Então você pode fazer no papel. Aí depois esse caso aqui eu fiz na própria apresentação, né?
Coloquei um bloco e fui definindo, né? Ah, eu quero outras deentradas, saídas, vou querer também um menu lateral. Então eu fui desenhando.
Você consegue fazer isso no slides, sei lá, num ferramenta como miro. Então é bem legal para você entendendo o que que vai ter no seu projeto. Se você não fala para Iá o que que você quer, ela vai criar qualquer coisa.
Talvez fique legal, mas talvez ela não siga o que você quer. Então, por isso que é muito importante você desenhar, pensar aí no seu projeto. E aqui eu já desenhei certinho o que eu tava querendo, tá?
E passei para E. Beleza? E aí, por fim, a gente tem a criação interativa, que agora a gente vai entrar em mona na massa, tá?
Pra gente não ficar se enrolando muito aqui. Eu sei que a galera não gosta de planejar, mas é muito importante. Mas vamos aí o passo a passo.
E aqui é é importante definir duas grandes etapas, tá? Primeiro a gente vai criar só o design, só a interface, tá? Então vamos focar em só criar o design.
Depois disso, a gente vai conectar com back end inteligência. Para isso, eu coloquei até o jatpt aqui, porque eu vou fazer uma interação. Eu vou lá no chatpt, vou pedir para ele me ajudar a construir o nosso eh PRD prompt, que é já vou especificar o que que é.
Voltamos no logo, criamos interface, fazemos as melhorias correções. Depois que a interface estiver tudo certinha, a gente vai pra inteligência, pede pro GPT ajudar aí num prompt bom pro lobbel e depois volta pro lobbel e coloca esse novo prompt, tá? Então já define aqui o passo a passo, todo o checklist certinho.
Agora a gente pode seguir pra prática. Então bora lá que a gente vai começar a criar os nossos prompts. Então para começar vamos aqui pro prompt, tá?
Então, como eu falei, a gente vai dividir em duas partes. Separei os prompts aqui desse curso nesse no vou deixar um material também incluso lá nos materiais para download, beleza? E aqui a gente vai dividir duas partes, interface, inteligência e backend.
Então, basicamente, a gente vai usar o GPT como nosso companheiro aí de desenvolvimento, tá? Então, primeiro a gente vai pedir um prompt pro GPT. Esse GPT ele vai dar um prompt pra gente que a gente vai colar num álbum, né?
E a partir daí a gente vai fazer as correções e as melhorias. E mesma coisa pro back end. A gente pede um prompt pro GPT e o prompt aqui pro logo que a gente colou lá e depois a gente faz as revisões e melhorias, tá bom?
Então aqui eu já deixei tudo passo a passo, tudo bem organizado para você. Aqui eu deixei o nosso pedido, tá? Então basicamente eu chamei de PRD promptom junto com um PRD, tá?
O PRD, como eu falei, é basicamente uma instrução como é que funciona o aplicativo, todas as a organização dele, a estrutura, os requisitos, os usuários. Então ele é muito bom pra gente entender o projeto, só que eu chamei de PRD prompticamente ele tem que ser adaptado para virar um prompt, tá? A gente vai ir lá pro lobbel e colar isso depois.
Então eu falei aqui, né? Quero que você crie um PRD completo, detalhado, que eu usarei no prompt inicial do lóbulo. Esse PRT precisa ser pensado para ter alta performance dentro lobo, girar telas, componentes, navegações.
Por enquanto, sem back end, tá? Aqui a gente tá focando em UI first, beleza? E a ideia é criar primeiro toda a interface com dados fake, sem banco, sem autenticação, sem APIs para depois usarmos a usabilidade e conectar o back end.
Então, já tô deixando claro aqui que primeiro interface e depois o back end. a gente consegue separar bem essas grandes entregas. E deixei as instruções abaixo, tá?
Então vou explicar pro GPT o que eu quero, tá? Basicamente as instruções eu pego lá na minha visão de projeto do nosso framework. Então você consegue ir lá copiar e colar aqui, tá?
Eu deixei em amarelo quando você quiser atualizar para um próprio projeto teu, beleza? Então se você quiser depois atualizar o que tá em amarelo, é só copiar e colar pro projeto teu. Então aqui tem objetivo, tem as funcionalidades, tem os tipos de usuários, a estrutura de navegação, o design e os dados e informações também importantes.
Então, basicamente eu copiei e colei do que eu já tinha planejado, né? Então, falei que era um aplicativo de finanças, falei quais eram as funcionalidades principais, então deixei claro aqui, ó, é um dashboard de finanças, então o que que tem aqui nos gráficos, tá? Também deixei claro aqui também meus registros, tá?
E deixei claro aqui o meu perfil, tá? O que que eu quero ter em cada área? Deixei claro quem é o usuário, a estrutura de navegação, o design também deixei amarelo aqui sobre os dados.
Então pedi para ele usar só dado testes por enquanto e observações importantes, não criar backends nem planilhas, incluir muitas interações e eu pedi para ele criar sem pressa, tá? Para ele tomar o tempo que ele quiser para realmente dar um resultado bom pra gente. Então o que que eu vou fazer?
Eu vou pegar aqui e vou copiar e colar lá no GPT para ele criar esse promptí pra gente, tá bom? Então aqui já colei, tá? Tudo aquilo que tava lá, você pode copiar e colar.
E aí a partir disso, o GPT vai criar um prompt para mim, um prompt para eu colar lá no lobo, tá? Então vou dar um pause aqui e já voltamos. Então aqui já criou, tá?
Ele criou um prompt bem legal, colocou o objetivo aqui pro lobo, colocou o escopo, as diretrizes, tá? arquitetura de navegação. Então ele melhorou tudo que eu já tinha escrito, os filtros, os gráficos que tem, né, dos KPIs, os gráficos ali na linha dois, os insightes também, state do dashboard, a página, filtrizações, tabelas e registros, interações também, formulários e registros, página, meu perfil, conteúdo.
Então, ele deixou tudo muito completo, tá? completo. Inclusive ele colocou aqui sugestões de dados mocaps.
Então esses dados são apenas testes que vai estar lá no frontend, tá? Não ser dados reais. Colocou aqui as os tipos de despesa no meu app de finanças, regras de cálculo, interações, microinterações, acessibilidade, tudo visual.
Então, basicamente deixou bem completo um PRD prompt especializado aí no lob. Então eu vou copiar aqui e agora eu vou lá no lobo e vou colar no lobb criar o nosso primeiro projeto, tá? Então dessa forma a gente consegue criar um promt mais direcionado, um aplicativo mais direcionado e não ficar perdendo muito tempo para gastar crédito ou dar bug lá na frente, tá?
Então bora lá pro lobb. Então vim aqui no lobb, tá? Colei o meu prompt, tá?
Então copiei, colei aqui tudo certinho. Tirar essa frase final aqui também. E agora vou mandar pro lobo construir, tá?
Aí vamos ver como é que vai ficar nosso projeto. Vou mandar aqui e ele começa já a construir. E daí a gente vê como é que vai ficar essa interface, tá?
Só é muito importante deixar claro que quando a gente cria aí projetos com IA, geralmente se você mandar o mesmo pronto que eu, talvez o seu projeto saia levemente diferente, tá? Porque a IA sempre vai criar coisas mais criativas, aleatórias e sem seguir um padrão específico consistente. Então, se você tá criando junto comigo, talvez os mesmos prompts que eu mandar aqui vai aparecer resultados diferentes aí do seu lado, talvez bugs e erros diferentes, tá?
Mas aí a gente vai criando aqui e vamos aprendendo junto, tá? Mas o mais importante é a passo a passo e a metodologia. Então vou esperar aqui.
