Programação no Vibe para criar um produto digital usando o Cursor AI

1. Introdução ao curso: Oi, aí. Bem-vindo às pontuações de estar codificando com o Cursor Meu nome é Fassel e serei seu guia nessa jornada empolgante, qual exploraremos como a IA e as ferramentas sem código estão redefinindo o que significa programar Em um mundo onde a tecnologia evolui mais rápido do que nunca, programação tradicional não é mais o único caminho para criar produtos digitais Ferramentas como o cursor estão mudando o jogo e tornando a criação de software acessível a todos, mesmo sem escrever uma única linha de código. Neste curso amigável para iniciantes, mergulharemos no empolgante mundo da codificação, que é uma forma criativa, intuitiva e baseada em IA de criar aplicativos Você não precisa de experiência em programação, apenas curiosidade e vontade de Então, aqui está o que abordaremos. Então, primeiro, falaremos sobre programação e entenderemos o que é, como funciona e como é perfeita para não programadores e pensadores criativos Em seguida, começaremos criando nosso primeiro aplicativo com a ajuda do cursor, e eu estarei de mãos dadas com você durante toda essa jornada. Então, vou mostrar quais prompts exatos você deve usar e como você pode configurar o Cursor em seu sistema e como você pode executar seu primeiro aplicativo E tudo isso sem sequer tocar no teclado para escrever o código Não vamos escrever uma única linha de código. Em seguida, teremos nosso segundo aplicativo, que seria uma versão um pouco avançada do nosso aplicativo, na qual criaríamos um blog usando cursor e aprenderíamos como podemos personalizar a configuração e lançar um registro pessoal para compartilhar nossos aprendizados inteiramente com a ajuda da Tudo isso sem nenhuma experiência em programação, você ganhará confiança para construir mais fazendo isso e poderá executar ideias que há tanto tempo estava disposto a criar. Ao final deste curso, você não apenas estará familiarizado com a codificação, mas também terá dois aplicativos funcionais e também terá a mentalidade e o conjunto certo de ferramentas para continuar construindo sem as barreiras tradicionais Este curso é para estudantes, criadores, freelancers, empreendedores ou qualquer pessoa curiosa em criar coisas legais usando o poder da EI Sem antecedentes, sem problemas. Eu tenho uma solução para você aqui. Então, você está pronto para criar seu primeiro aplicativo com apenas vibrações e curiosidade Vamos começar. 2. O que é a programação no Vibe: Agora, o que é esse termo que codifica? Então, vamos entender que codificar não é uma técnica formal de programação Claro, tem a palavra “codificação”, ok? Mas não é uma técnica formal de programação. É mais uma forma criativa baseada em fluxo de criar coisas usando IA. Deixe-me explicar isso para você com a ajuda de alguns exemplos, então deixe-me explicar isso Imagine que você tenha uma ideia para um aplicativo pequeno ou um recurso específico que deseja criar em qualquer produto existente. Está bem? Digamos que você tenha apenas uma ideia de aplicativo, ok? E no passado, o que você teria que fazer era ter uma ideia e, se quisesse vir, se quisesse dar vida a essa ideia, precisaria aprender uma linguagem de programação, ok, ou teria que entender a sintaxe dela, e também teria que escrever cada linha de código sozinho Está bem? Essa é uma maneira de fazer as coisas mais cedo se você estiver fazendo as coisas sozinho ou se puder contratar um desenvolvedor para si mesmo. Agora, isso exigia muito tempo, conhecimento especializado ou dinheiro se você estiver contratando um desenvolvedor, certo? Estar programando muda completamente esse paradigma. Ok, eu mudo completamente esse paradigma. E em vez de codificar as coisas sozinho ou contratar um desenvolvedor, você está basicamente criando software com a ajuda da IA Agora, IA aqui significa inteligência artificial. Está bem? Então, simplificando, codificar é uma abordagem para criar software em que você faz uso da linguagem natural Linguagem natural, ou seja, a linguagem na qual você se comunica e conversa com seus amigos e familiares. Isso é o que é a linguagem natural, que é o inglês simples ou qualquer linguagem humana, ok? E você usa essa linguagem natural para dizer a uma inteligência artificial ou ferramenta de IA o que você quer e a IA geraria o código para você. Está bem? Então é isso que é codificar Agora, aqui, a primeira coisa, você não precisa de muito conhecimento sobre programação. Então, antes você tinha que escrever, você sabe, você tinha que aprender a linguagem de programação, você tinha que entender a sintaxe, como ela funciona Você precisa escrever cada linha de código sozinho, certo? Agora, há uma mudança na codificação be nisso. Você não vai escrever todas as linhas de código. Você só vai dizer à IA que escreva para você, e a IA escreverá o código aqui. Está bem? Então, o que acontece aqui é que a IA está fazendo o trabalho. A IA está escrevendo código e você não é mais um programador, mas na verdade é o arquiteto e o construtor Está bem? Então, você está basicamente planejando todo o aplicativo. Agora, a IA está escrevendo o código, certo? A responsabilidade de codificação é assumida pela IA. Então, você basicamente está no banco de trás e está cuidando de coisas de alto nível, como planejar seu aplicativo em quais recursos ele deve ter, como os recursos devem funcionar e se a saída fornecida pela IA atende às suas necessidades ou não, certo? Então você é como um arquiteto e o construtor que está projetando tudo, como projetando as plantas, e então você está se certificando de que cada tijolo daquele determinado projeto em particular seja colocado corretamente, ok Então, sendo arquiteto, você está planejando coisas. Ok. Isso é algo que eu mencionei. Agora, a IA é sua equipe de construção supereficiente em várias escalas Está bem? Então, é como um construtor. Em que você conta sua visão para a IA em uma linguagem cristalina, ok? Você elabora as coisas e adiciona o máximo de detalhes possível, e a IA fará o trabalho pesado por você Você não precisa necessariamente saber como colocar cada tijolo sozinho, mas a IA fará o trabalho por você, ok? Agora, esse termo de codificação está ganhando muita popularidade porque, com isso, mesmo pessoas que não codificam ou com conhecimento limitado de codificação podem criar coisas rapidamente E mesmo se você for engenheiro, você pode realmente acelerar o processo de desenvolvimento. Está bem? Então, você descreve isso como você pode descrever o que você quer fazer, o que você quer que um software faça em inglês simples Pode ser tão simples quanto criar uma página da web simples com um título que diz: “ Meu primeiro é um aplicativo” e um botão que muda seu texto quando é clicado Ok. Você pode até mesmo pedir que ele escreva um script Python que pegue uma lista dos números e retorne a média Está bem? Portanto, esse é um script Python simples que você pode obter da IA Você pode até mesmo criar um pequeno aplicativo web rastreador de tarefas onde você pode adicionar tarefas, marcá-las como concluídas e visualizar a lista de todas as tarefas Então, esses são alguns exemplos de como você está dando as instruções ou o aviso para a ferramenta de IA, e a ferramenta de IA fará o trabalho por você. Agora, isso é semelhante à forma como você daria uma tarefa ou explicaria um recurso para alguém, certo, alguém que você contratou. Então é assim que funciona por aqui, ok. E sim, isso é o que é. Agora, como funciona. Então, vamos entender o funcionamento de todo esse processo de codificação. Está bem? A primeira coisa é fornecer informações à IA em linguagem natural, basicamente, e apresentar sua vibe Agora, o que quero dizer com vibe aqui é que você descreve o que deseja que o software faça em inglês simples, ok, e diga, adicione o máximo de detalhes possível e seja o mais elaborado possível Ok. Agora, a IA interpretará sua opinião aqui. Ele analisará sua descrição de todos os recursos e do que você deseja. E ele entenderá sua intenção, a funcionalidade necessária e a lógica subjacente Então é aqui que a IA está interpretando seus requisitos E então ele passa para o modo de geração de código, em que, com base em sua interpretação, a IA vai gerar o código real Como um código real, quero dizer, arquivos DML, arquivos CSS, arquivos Jascript, arquivos Python, dependendo do tipo de aplicativo que você está Depois, acontece uma observação da execução . Então, você executa o código gerado para ver se ele funciona conforme o esperado. Agora, é claro, você não precisa saber como executar o aplicativo. Você pode perguntar à própria IA, ok? E você pode simplesmente seguir as instruções, ok? E a maioria das ferramentas de codificação. Então, sim, vamos usar algumas ferramentas para fazer a codificação de TI, e a maioria das ferramentas de codificação tem um ambiente integrado onde você pode executar o código imediatamente Ok. Depois, há essa etapa de feedback e refinamento. Então esse é um passo muito importante, ok? Então, raramente, dependendo de suas necessidades, raramente, a primeira tentativa será perfeita. Está bem? Se houver algum erro ou se a funcionalidade não estiver correta, você fornece o feedback para a IA e, em linguagem natural, por exemplo, você pode dizer: Ei, esse botão não está funcionando e nada acontece se eu clicar nele. Está bem? Você pode dizer, ei, tornar a cor de fundo da página da web em azul claro, adicionar um recurso ou pedir à IA que adicione um recurso ao rastreador de tarefas que me permita excluir a tarefa Assim, você pode adicionar instruções dessa forma. E dependendo da sua instrução, ele vai iterar, certo? Se houver alguma mensagem de erro exibida, você pode paginar a mensagem de erro e também uma entrada para a IA, e ela será corrigida para você. Está bem? E então haverá repetição, então você repete as etapas de 1 a 5 até alcançar o resultado desejado E é um processo de conversação, muito parecido com trabalhar com um assistente humano Isso é o que eu quero dizer aqui. Então é assim que todo o processo vai funcionar, ok? E há algumas vantagens grande aqui, e acho que a maior vantagem aqui é a maior acessibilidade Isso é perfeito. Esse talvez seja o maior benefício para você. Você não precisa ter um amplo conhecimento de programação para começar a criar. Isso reduz significativamente a barreira de entrada. Até mesmo quem não é programador pode começar a ter páginas de destino, começar a criar coisas, começar a implantar coisas, e você pode dar vida às suas ideias, criar protótipos funcionais, MVPs em menos tempo do que seria necessário com a codificação começar a criar coisas, começar a implantar coisas, e você pode dar vida às suas ideias , criar protótipos funcionais, MVPs em menos tempo do que seria necessário com a codificação tradicional Então, aqui você está basicamente se concentrando na intenção e pode se concentrar no que deseja criar e por quê, em vez de ficar atolado na sintaxe e nos detalhes específicos de implementação de uma linguagem de programação Está bem? Agora, aqui, também existem algumas limitações. Nem tudo é bom. Você sabe, a limitação pode ser a qualidade e a segurança dos códigos. O código gerado pela IA pode nem sempre ser otimizado, eficiente ou totalmente seguro. Para que os aplicativos estejam prontos para produção, é claro, revisão humana e a compreensão do código gerado ainda são cruciais. Mas eu diria que é um bom ponto de partida se você estiver criando qualquer produto, certo? codificação Complexity I é excelente para projetos simples e prototipagem rápida Mas para projetos de altíssima complexidade, sistemas de grande escala que exigem uma compreensão mais profunda da arquitetura de software, as práticas tradicionais de codificação ainda permanecem essenciais Está bem? Além disso, a última limitação diz respeito ao efeito caixa preta. Agora, o que quero dizer aqui é que você obteria um código funcional e nem mesmo entenderia totalmente. Então você não entende o código, mas o código está funcionando para você, certo? Então, isso pode ser uma coisa boa e também uma coisa ruim. É bom para resultados rápidos, mas não é ideal para desenvolver conhecimento profundo de programação ou, posteriormente iterá-lo e adicionar alguns recursos personalizados Então, sim, isso pode ser uma desvantagem, ok? Então, sim, esses são alguns benefícios e, você sabe, limitações que eu quero destacar. E espero que você tenha clareza sobre todo esse conceito de codificação eletrônica. 3. Ferramentas para programação no Vibe: Eu só quero falar um pouco sobre as diferentes ferramentas que existem para permitir que você faça pré-codificação Está bem? Então, uma das ferramentas é o cursor, e este é um editor de código EI, como diz aqui em fontes grandes. Portanto, esse IDE, basicamente todo o editor de codificação, permite que você use o EI e escreverá todo o código para você Ok, então ele conhece sua base de código. É ele que permite que você edite em linguagem natural. Ok, então isso permite que você crie software mais rápido, basicamente. Isso é o que ele faz. Ok. E sim, este é o site oficial do Cursor. Então você também tem algo chamado de co-piloto de Gu, que é semelhante ao de Kursor Também ajuda você a criar software com mais rapidez. E isso é o que parece aqui. Está bem? E há um ID chamado Visual Studio Code. Ele também se integra muito facilmente ao código do Visual Studio. Então é isso que é o co-piloto do Github . Este é o seu site oficial. Então você tem o plet , que também permite que você faça uso do EI e crie software Além disso, existem alguns LLMs ou modelos de aprendizado de idiomas, como hatchibt Cloud Tudo isso ajuda: eles não têm editores de código dedicados, mas você pode usar esse modelo de aprendizado de linguagem de uso geral ou LLMs para gerar código por meio de solicitações e, em seguida, copiar e colar a saída em seu 4. Configurando o cursor na máquina local: Então, agora é a hora instalar e configurar o cursor em nosso sistema. Então, o que eu vou fazer rapidamente é dizer baixe aqui. Então você verá o botão de download aqui no canto superior direito. Está bem? E se você estiver no Mac ou em qualquer outro sistema operacional, verá esse botão aparecer no seu sistema operacional. Você pode clicar em todos os downloads e ver em quais máquinas esse aplicativo está disponível. Você pode ver que está quase disponível em todos os aplicativos aqui. Você pode até mesmo escolher a versão se tiver algum requisito específico de versão. Eu recomendaria que você clicasse em Download aqui ou aqui no centro da página principal para baixá-lo em seu sistema. Eu vou dizer download. downloads do software, também acessaremos a página de preços aqui. Agora, eu gostaria de falar um pouco sobre preços aqui, ok? Então, aqui, este é um plano gratuito, e o plano gratuito é no qual vamos trabalhar. Está bem? Não vou propor ou pedir que você faça um upgrade aqui. gratuito oferece um limite bastante decente, ok, para trabalhar em seus projetos. Então, vamos começar de graça. Mas se você é um usuário sério que deseja usar muito o cursor, definitivamente pode mudar para diferentes opções pagas. Existem diferentes versões pagas aqui por $20 ou $200 por mês Mas grátis é o que precisamos para esse curso em particular. E aqui você também tem planos de equipe. Está bem? Agora, dando uma olhada no recurso, você também pode explorar os recursos aqui, que são recursos como edições em várias linhas, reescritas inteligentes, toque Ok. Então, basicamente, você precisa apenas pressionar tab, e isso permite que você pule pelas edições nos arquivos Existem alguns recursos. Você pode explorar esta página inteira. Eu não vou falar sobre cada um deles aqui, e na verdade vou te mostrar todos esses recursos, ok? Mas se você quiser ler, você pode. Agora, depois que o software é baixado , basta clicar duas vezes nele e instalá-lo como qualquer outro software que você instalaria em seu sistema operacional. Então, eu posso ver a configuração aqui. Eu vou dizer que aceito em seguida. Ele perguntará onde deve instalar esse software específico. Portanto, você pode ver que esse é um requisito de exibição gratuito para o Windows. E para Mac, será semelhante. Em seguida, ele criará uma pasta Menu Iniciar no menu Iniciar para mim. No Mac, pode ser diferente. Eu vou dizer o próximo, e eu vou dizer o próximo aqui. Eu vou dizer instalar. A instalação levará alguns minutos. Não é um software complexo, você o instala como qualquer outro software. Depois que a instalação estiver concluída, você deverá clicar em abrir. Então você pode ver aqui, a instalação está concluída. Agora você pode usar o cursor Iniciar e dizer Concluir. Está bem? Então, ele abrirá o Cursor para você. Então você pode ver aqui, o Curso está aberto, e aqui, ele está pedindo para se inscrever. Assim, você pode se inscrever e criar uma conta, se desejar. No entanto, eu recomendaria que você se inscrevesse aqui. Então, eu vou dizer inscreva-se, e isso o levará à página da web, e aqui mostrará diferentes maneiras de se inscrever. Então, você pode dizer Google Github ou se inscrever usando e-mail Então, vou rapidamente configurar minha conta aqui. Agora, quando terminar a autenticação, você verá esse tipo de mensagem Ok, então retornaremos ao Cursor. Então é isso que o Cursor é. Agora, aqui, ele está me pedindo para importar configurações do código VS. O código VS é apenas mais um editor de codificação. Está bem? Posso importar as configurações do código VS ou posso dizer pular e continuar Então, vou começar do zero, ok? Eu também tenho o código do Visual Studio ou código VS instalado neste sistema , e é por isso que esse prompt. Então eu vou dizer Skip and continue. E está me pedindo para escolher o tema. Você pode escolher o tema com base em suas necessidades e gostos. Você pode até mesmo explorar temas. Eu vou dizer continue. Ok. E aqui, ele está me perguntando, tipo, que tipo de descobertas importantes eu quero. código VS é o que eu escolherei e se você deseja compartilhar algum tipo de dado com o cursor para melhorar. Vou deixar isso desmarcado Ok. Eu vou embora. Ok. Então, vejo que não há opção de escapar Então eu vou dizer que estou bem e vamos continuar. E diremos que continue. Está bem? Então, sim, isso é o que o IDE é aqui, como você pode ver, deixe-me ampliar um pouco. Ok. Agora, deixe-me dar uma visão geral do que vemos aqui. Então aqui no topo, é claro, você pode ver as opções de menu como qualquer outro software, ok? Ou você pode ver que você está no teste profissional. Está bem? Você não está na versão ilimitada. Você está no teste da versão pro. Está bem? Você tem um julgamento há algum tempo. Agora, para saber mais sobre seu período de teste, você pode vir aqui. Se você acessar os preços do Cursor, você verá aqui no plano gratuito, que inclui P de teste de duas semanas. Então, por duas semanas, você tem essa versão de teste paga. Está bem? Então é isso que somos. É por isso que vemos o teste do Pro e você pode jogar sem limites. Você pode abrir um projeto, clonar um repositório, conectar-se ao YSSH. Essas são algumas opções. E no lado direito, você tem uma janela de bate-papo. Está bem? Você pode ver e o que eu recomendaria é que quando você abrir isso, ok, aqui no centro, você verá esse projeto aberto. Então, eu recomendo que você clique em Abrir projeto aqui e abra uma pasta onde você fará todo o trabalho. E o que eu fiz foi quando eu disse abrir pasta, ele abriu esse tipo de explosor para mim, e eu navego até essa pasta chamada be coding, e vou dizer selecione Está bem? Agora, no momento em que você seleciona uma pasta, você pode ver uma mudança na interface aqui no lado esquerdo, ok? E aqui você pode ver essa pasta de codificação aqui em cima, e aqui você pode criar um novo arquivo, você pode ver, mas não vamos criar novo arquivo e, aqui dentro dessa pasta, vamos deixar a IA fazer o trabalho Você pode ver algumas opções aqui, como obter pesquisa e tudo isso. Ok. E aqui é onde a lista completa de arquivos aparecerá sob a codificação. E aqui no painel central aqui, você pode ver essa divisão aqui no painel central, você verá o código aparecer Então, se você selecionar qualquer arquivo, o código aparecerá aqui. Ok. E então, no painel de bate-papo de IA, aqui você pode conversar com o modelo de IA. Agora você tem algo chamado de adicionar contexto aqui e é um recurso poderoso com a capacidade referenciar um arquivo específico ou qualquer coisa que você queira adicionar como contexto ao falar com a IA. Então, por exemplo, aqui, você pode adicionar arquivos de código de pasta, documentos, qualquer tipo de conversas passadas, terminais e até mesmo artigos da web, que você pode adicionar aqui. Agora, abaixo da janela de bate-papo, se você clicar aqui, verá a pergunta e o manual do agente. Está bem? Esses são os modos por aqui. Agora, o modo agente é um modo em que , se você mencionar alguma coisa aqui quando o modo agente é selecionado, você diz: Ei, quero ajustar minha página de destino e atualizar a cor Então, o que quer que você mencione aqui, o modelo de IA fará alterações diretamente no código. Obviamente, você terá opções para aceitar ou descartar, mas é isso que é o modo agente Basicamente, perguntar é simplesmente fazer perguntas sobre a base de código e não atualizar ou modificar seu código. Manual significa que o modo manual foi projetado para fazer modificações específicas quando você sabe exatamente quais mudanças são necessárias e onde. Está bem? Portanto, é basicamente um modo para alterações precisas de código com segmentação explícita de arquivos Está bem? Então, aqui, você precisa saber quais mudanças deseja fazer, e é por isso que é chamado de modo manual. Ok, então esses são os diferentes modos aqui. Vamos brincar com esse modo, então não se preocupe se você não tem certeza ou não entendeu o que são. Ok. Aqui você tem a opção de adicionar novos bate-papos ou agentes em segundo plano e tudo isso E aqui você tem Automde, ok? Então, automde, ou seja, basicamente, se você desabilitar isso, você tem a opção de alterar o modelo Ok, se você torná-lo automático, ele obterá o modelo com base em alguma lógica em retrospectiva Está bem? Mas se você não quiser fazer isso, se quiser selecionar algum modelo com base em suas necessidades, você também pode fazer isso. E o modo Max, o que significa que ele permitirá o máximo de contexto. Você pode ver aqui no pop-up. Está bem? E é claro que, se isso adicionar o máximo de contexto, custará mais. Está bem? Então é isso que é, e vou me certificar de que estou no modo automático. Então, isso é sobre a interface aqui. Até agora, espero que isso tenha sido útil. 5. Nosso primeiro aplicativo com programação no Vibe: Então, agora é a hora de começarmos a limpar a codificação e criar nosso primeiro aplicativo sem nem mesmo escrever uma única linha de código e fazer com que a IA escreva e faça tudo Está bem? Então, o que vou fazer é usar o cursor aqui, primeiro, e vou precisar de mais um modelo de IA que desempenhe um papel de apoio, e você pode usar qualquer modelo de IA, de IA como o chapéu Tipty ou Então, vou usar o Chat chipty, ok? E vou abrir os dois em duas janelas diferentes. Então aqui eu tenho o cursor. O que vou fazer é rastrear esse cursor e aqui tenho essa opção. Adicione duas janelas. Vou abrir isso em visão dividida assim, não. E há uma razão para isso. Está bem? Então, aqui, basicamente, neste LLM em particular, vou perguntar todas as informações genéricas Então, vou fingir que não sei programar. E como não programador, como você pode codificar coisas Neste LLM em particular ou neste modelo de IA específico no lado direito, vou fazer perguntas e ajudar a gerar basicamente solicitações que eu possa inserir aqui E aqui, eu vou realmente fazer a IA escrever. OK. Então, vamos vir aqui do lado direito, e eu vou dizer ao modelo de IA: Ei, eu não sei nada sobre codificação ou programação, ok? Desejo criar um aplicativo simples ou, devo dizer, um aplicativo web simples com um título que diz que meu primeiro é aplicativo e botão E. E um botão que muda o plano de fundo de todo o aplicativo aleatoriamente. OK. A cor de fundo é o que eu posso ver. Está bem? Então você pode apresentar seus pensamentos aqui, ok? E você pode mencionar aqui que estou fazendo uso. Está bem? Estou usando o cursor para o mesmo. OK. E, por favor , compartilhe meu plano comigo. Está bem? Agora, uma coisa a observar aqui é que estou pedindo um plano, certo? Não estou pedindo mais nada. Estou pedindo um plano. Então, aqui, eu sou arquiteto. Estou projetando e pensando em mim mesmo como um construtor ou arquiteto que planejará toda a aplicação Então, ele vai planejar, vai compartilhar todo o plano comigo, ok? E vamos ver qual saída obtemos aqui. Então, vou apenas dizer Enter e vamos ver qual saída ele obtém. Ok, então ele sabe meu nome porque eu me inscrevi. Não se preocupe nem um Você não precisa saber programar para começar com projetos simples como esse. Ok, blá, blá, blá E está dizendo que tem um botão, tem que mudar a cor de fundo aleatoriamente. Ok, então aqui ele reavaliou o requisito, para que ele entenda o que estou dizendo Ele está me dizendo para abrir o cursor, fazer o download do cursor, para uma nova página da web e está me dando esse aviso Você pode ver aqui. Então está me dizendo, crie um novo arquivo, HTML de ponto de índice. Esta é a sua página principal e digite esta instrução para este software específico aqui Está bem? Então, isso é algo que pode fazer, e aqui também lhe deu algum código. Está bem? Agora, crie uma página web simples com o título MF YAP e adicione um botão que muda a cor de fundo aleatoriamente quando clicado Ok, então vou copiar isso. Não vou criar o arquivo index dot tm ou posso dizer a esse modelo de IA que pule Eu não quero criar arquivos sozinho. Mas gostaria que o Cursor fizesse tudo por mim. Está bem? Estou em uma pasta agora. Quero que o primeiro aplicativo seja criado em uma pasta lá. Está bem? Então, estou lhe dizendo que estou em uma pasta agora. O nome dessa pasta está sendo codificado. E dentro dessa pasta, quero que todo o aplicativo seja criado. Isso é o que estou dizendo. Então aqui está escrito perfeito. Você está dentro do aplicativo. Ok, aqui o que você pode fazer é pedir que criemos uma nova pasta, seja aplicativo. Então, aqui você pode ver o aplicativo. Seja um aplicativo. Isso é o que o nome deu. Está me dizendo para criar um índice ou arquivo HTML novamente. Quando eu disse que quero criar arquivos sozinho. Vou apenas copiar isso e contar isso e responder ou me dar um rom diretamente, resumindo. Está bem? Quero a opinião que devo dar à COSA Então é isso que eu estou pedindo aqui, e ele está te dando o aviso exato. Então, está dizendo: crie uma pasta chamada be app com um índice ou arquivo HTML que mostre o título. Então, você pode ver que ele está fornecendo toda a solicitação aqui. Então, foram necessárias algumas repetições aqui ou algumas iterações , é o que eu diria OK. Também posso excluir essa pasta. OK. Vou dizer, vá para a lixeira, e vou arrumar todo o baile Em vez de perguntar, vou mudar isso para o modo agente porque quero que o cursor o codifique para mim. Agora, no momento em que eu dou esse comando ao Cursor, vamos ver o que ele faz. Então, vou abrir isso e você pode ver que ele começou a funcionar. Ele começou a listar os diretórios. Ele criou a pasta BAP. Ele criou esse índice ou HTML aqui, e você pode ver que ele realmente forneceu a saída. A pasta IAP foi criada com um índice ou arquivo HTML. Esse arquivo exibe My force YAP e um botão quando clicado, muda a cor para Então, esses são todos os requisitos que fizemos e, como você pode ver, agora você pode abrir esse arquivo no navegador para ver seu aplicativo em ação. Está bem? Então, o que eu vou fazer é abrir uma nova guia do navegador aqui e escolher tratar e soltar este arquivo aqui, algo assim, e eu posso simplesmente pressionar Enter. Ou você pode abrir isso na pasta. Basicamente, você pode navegar até esse arquivo específico e clicar duas vezes porque é um arquivo HTML. OK. Agora vamos ver aqui qual é a saída que obtemos para mudar a cor de fundo. Opa. Você pode ver como isso é lindo. Ok, quanto tempo isso levou? Não demorou muito tempo. Também não exigiu muito esforço. Está bem? Sim, houve algumas repetições com Ched GBT aqui porque ele não estava nos dando a saída certa Mas, você sabe, é EI e, você sabe, às vezes leva tempo para obter a saída perfeita. Agora vamos dar uma olhada na saída. Aqui nos é dado um arquivo. Está bem? Esse arquivo tem esse código de cor verde, ok? Então, aqui, você pode ver aceitar e rejeitar. E aqui também, você pode ver aceitar e rejeitar. Ok, então está dando a você a opção de que, ei, essas são as alterações que ele fez neste arquivo. OK. E essas alterações são destacadas em verde, e você pode aceitá-las. Então, vou aceitar as alterações depois ver a saída. Eu gosto da saída. Então, vou dizer aceite, e você pode ver que as mudanças estão aqui. Está bem? Então, isso é o que você pode fazer com o COSO, basicamente Se você quiser fazer perguntas específicas sobre esse código, pode alternar para perguntar mais e dizer: Ei, você pode explicar o código em menos de 500 palavras. Por exemplo, você pode fazer perguntas. Se você quiser entender alguma coisa, se não tiver certeza de alguma coisa, pode ver que está me explicando tudo. Você pode ver a estrutura HTML, há uma tag body, body usa isso e você pode ver como o JavaScript funciona e como funciona. O usuário vê esse botão, clicando no botão, altera a cor de fundo para uma cor aleatória. E usamos HTML CSS em Gs em um arquivo para simplificar. Você também pode solicitar que ele tenha arquivos separados , a escolha é totalmente sua. Então eu posso ler sobre isso. Eu posso dizer, você pode separar HTML, CSS e S para mim? OK. Então você pode pedir que ele faça isso. E com certeza vai fazer isso. Você pode ver que está separado. OK. Sei que estamos no modo de pergunta, então isso não altera o código. Está bem? O que eu posso fazer é copiar isso, você tem uma opção aqui também. Aplique para indexar HTML. Aplicar ao HTML do ponto de índice. Você pode ver. Mas eu não vou fazer isso. Eu vou dizer modo agente. Você pode? Opa. Então é isso que está chegando. Vou apenas copiar esse aviso aqui. OK. Ou enviarei essa solicitação no modo agente novamente a partir daqui. Está bem? Então você também pode fazer isso. Ele vai gerar tudo e vai criar três arquivos agora. Um deles é o arquivo HTML, que já temos. Em seguida, temos o CSS e o arquivo GS. Vamos esperar um pouco até que a saída seja gerada. Às vezes, pode levar algum tempo. Agora eu tenho a saída e, se você rolar até aqui, verá que ela forneceu toda a saída, então ela destacou todas as alterações que removeu na cor vermelha e as alterações adicionadas na cor verde. Você pode ver que tem a opção de aceitar e rejeitar tudo. Então você pode ver aqui, você pode ver o bastão, exceto rejeitar. E esse bloqueio de código que você aceita e rejeita. Este bloco de código, você aceitou e rejeitou. E você tem esse botão, aceite tudo. Então, se você não sabe codificar, tudo bem, tudo o que você precisa fazer é aceitar tudo Ok, porque você não vai entender nada e quer passar tempo entendendo ou aprendendo isso. Está bem? Então, eu apenas minimizo esse loop Então, se acontecer de você fechar a janela de IA, basta clicar neste botão de alternância AIPane aqui na parte superior OK. Vou apenas manter isso desativado no AIPane, mas você pode ver aqui que os arquivos foram gerados Ok, você pode ver como eles foram gerados, e eu vou ver aceitar tudo na própria janela de bate-papo, e você pode ver como os três arquivos foram criados. OK. E você não escreveu nenhum tipo de código. Se você estiver fresco, ainda funcionará da mesma maneira. Você pode ver. Você pode ver que está funcionando da mesma maneira. Tudo bem. Agora, se você quiser mudar alguma coisa, se quiser adicionar qualquer tipo de coisa , você pode iterá-la e ela simplesmente fará o trabalho por você Então, sim, esse é o nosso primeiro aplicativo que criamos. Espero que tenha sido incrível. 6. Nosso segundo pequeno aplicativo complexo Um blog versão 1: Tudo bem, então é hora de prosseguirmos para o nosso próximo projeto E o que eu vou fazer é aqui, eu estou na mesma pasta, eu programando Eu criei um novo bate-papo clicando nesse novo bate-papo. Ícone aqui no cursor, e aqui no HathPT, eu também tenho um novo chat criado Portanto, esse aplicativo específico que vamos criar será um pouco complexo do que o anterior. E isso envolveria alguns recursos. Então, basicamente, vai ser um aplicativo de blog, e eu vou dar esse aviso para o HatGBT Então, vou dizer à JAGBR que, Ei, eu gostaria de construir um bloco, ok, onde eu possa compartilhar meus aprendizados diários Está bem? Este é meu objetivo pessoal de por que estou construindo isso. Adicionar um novo bloco deve ser tão simples quanto adicionar um novo arquivo, ok? Agora, eu não sei como o quê. Só estou dizendo ao HatGBT que, ei, adicionando um novo blog porque eu adicionaria um novo blog todos os dias, certo Já que estou fazendo isso para criar e compartilhar meus aprendizados diários e documentar meus aprendizados diários Portanto, adicionar um novo bloco deve ser tão simples quanto criar um novo arquivo. Está bem? Eu preciso de filtros básicos usando tags, então filtros simples. O aplicativo deve ter uma aparência moderna e bonita. Está bem? E eu estou usando o cursor. Ok, aguente aí. Estou usando o cursor para construir isso. Eu não tenho nenhum conhecimento de programação. Então, isso é algo que estou dizendo explicitamente ao Chat JBD Está bem? Agora, por favor, compartilhe um plano para eu trabalhar e começar a trabalhar imediatamente. Além disso, mencionei onde estou, então estou na pasta be coding e quero que o projeto resida em uma nova pasta dentro dessa pasta Ok. Então, essas são as coisas que eu mencionei aqui. Ok. Agora, devemos dizer enviar? Digamos enviar e vamos ver qual saída obtemos aqui. Então, vou expandir o HTGBDoe, já que estamos trabalhando nisso. Então você pode ver aqui. Este é o resumo da meta. Então, aqui está recuando sobre seus objetivos e dizendo que, ei, isso é o que eu entendi Portanto, você precisa ver os filtros de tags, adicionar um blog igual a um novo arquivo, blogar como ganhos diários, design moderno e bonito, construído com cursor, sem conhecimento de codificação Ok, então o HgBd capturou isso de forma justa. Agora, venha aqui. Ele está informando e fornecendo algumas informações sobre a estrutura do projeto. Está dizendo que o próximo Js. Então, vamos usar o Next Js. Ok. Tudo bem se você não sabe qual é o próximo Gs, ele está apenas lhe dizendo, e também está dizendo que é uma estrutura web moderna. Então, está tudo bem. Não precisamos saber disso. Arquivo MDX Agora, o arquivo MDX é o arquivo markdown que o aplicativo usaria Dissemos ao Chat JB que, Ei, eu quero usar arquivos MDX? Não. Então, está nos dizendo que usaremos arquivos MDX porque queremos que a funcionalidade seja muito simples Adicionar um novo bloco deve ser tão fácil quanto adicionar um novo arquivo. justo. Agora, tailwind CSS para belos estilos Ok, então ele sugeriu que fará uso do Tailwind CSS Eu não sei o que é Tailwind CSS. Na verdade, eu sei, mas estamos fingindo que não saberemos e não escreveremos uma única linha de código Então, tailwind CSS, interface de usuário CN rígida para componentes de interface de usuário modernos, que é uma filtragem fina e automática usando tags na parte frontal Está bem? Então, isso é algo que ele mencionou. Agora aqui, ele está pedindo que você crie uma pasta de projeto aqui, ok? E está te dando todo o plano aqui, instalando as dependências e tudo isso Ok. Agora eu não quero escrever esse trecho de código. Isso me deu um plano decente, mas eu não quero fazer isso. Então, o que vou dizer é que não quero executar comandos e escrever código. Compartilhe comigo instruções de que eu posso dar um curso com base no plano Ok. E eu quero que ele me dê uma lista de instruções, então eu vou me dar apenas uma solicitação que faria a mágica Ok, então eu estou dizendo que me dê um prompt que diria ao cursor para fazer tudo isso. Então está me dizendo para executar esse comando, está me dizendo para fazer isso, fazer aquilo. Ok, está tudo bem. Você pode ler isso. Ele está pedindo que você crie essa pasta também. Você pode ver aqui. Ok, crie uma pasta de projeto e, em seguida, crie basicamente esse aplicativo My Blog usando este comando. Eu não quero fazer isso. Então, estou dizendo que me dê apenas um aviso que faria toda a mágica. Então, vamos continuar com isso, e ele fornece esse aviso mágico para o cursor, então está dizendo que você crie um aplicativo de blog profissional moderno usando Next Js tailwind, CSS MDX Quero adicionar novas postagens de blog simplesmente colocando arquivos MDX na pasta de postagem Ok. E cada postagem deve conter elementos pré-textuais com título, data e tags. Ok, tudo bem. Na página inicial, exiba primeiro a lista de todas as postagens com cartões classificados com Notícias Inclua um estilo bonito usando a tipografia de vento de cauda. Divida os componentes da interface do usuário do CN e adicione um filtro de tag na parte superior como botões de alternância ou talvez chips para filtrar a postagem. Isso é bom. Adicione também um botão de modo claro ou escuro. Isso é algo que não perguntamos, mas foi adicionado. Uh, tudo deve parecer limpo e minimalista, compatível com dispositivos móveis. Ah, então um problema aqui é pensar que, ok, é compatível com dispositivos móveis, então tudo bem. É um aplicativo da web. Isso não é um problema. É um aplicativo da web, compatível dispositivos móveis. Isso é o que isso significava. Achei que é pensar que queremos criar um aplicativo móvel, mas esse não é o caso. Então eu vou vir aqui. Vamos colocar isso aqui. Não deu nenhuma informação sobre a pasta aqui, ok? Então, estou assumindo que o Cursor fará o trabalho com base nisso Ok, então isso está feito. E deixe-me ver o envio para cá, talvez. Está bem? Então esse é o prompt. Ok, eu não quero aqui nenhuma funcionalidade extra aqui. Portanto, cada postagem deve, na página inicial, incluir um estilo bonito e adicionar preenchimento de tags Adicione também o modo de luz e o botão do modo de execução. Portanto, não quero que isso alterne para o modo claro e o modo Doc Vou apenas remover isso e vou dizer definido. Se você quiser, sinta-se à vontade para incluí-lo, mas acabei de removê-lo. Agora vamos esperar que toda a mágica aconteça, ok? Eu dei essa solicitação ao cursor. Está bem? Agora, ele não vai executar os comandos. Ok, criar o projeto envolve a execução de comandos na minha máquina local. Portanto, ele não executará comandos sozinho, então vou aprovar os comandos Eu vou executar isso. Então, está executando isso. Você pode ver. Você gostaria de usar o TurboPac? Vou pressionar Enter ou você pode dizer sim. Está bem? Então você pode ver, está funcionando agora por aqui. Ok. Então, deixe-me usar a tela cheia com isso, e deixe-me expandir isso um pouco para que possamos ver o que está acontecendo. Você pode ver aqui, se você gostaria instalar o turbo pack Então eu disse, aqui. Eu apenas pressiono Enter. Está bem? E você pode ver tudo aqui. Está bem? Basicamente, está executando o comando do terminal. Vamos esperar um pouco. Ok. Então, está gerando o próximo conjunto de código. Você pode ver a pasta de bloqueio aparecer aqui, certo? E isso bloqueará a pasta e executará alguns comandos novamente. Então eu vou dizer corra, ok. E eu vou dizer corra novamente. Está executando alguns comandos. Acredito que esteja instalando todas as dependências de que nosso projeto precisa automaticamente no piloto automático Ok, estamos apenas aprovando comandos e não fazendo nada, certo? Então, isso está funcionando e acho que está gerando mais alguns comandos. Então isso é aprovar isso. E acho que está gerando mais um comando, execute. Então, eu estou apenas executando comandos aqui. Prossiga. Vou apenas dizer Enter. Ok. Ok, o que aconteceu? Ok. Eu disse que sim. Você tem que pressionar Y aqui, e então você pode ver agora que ele está instalando a dependência. Então, vamos esperar um pouco, quando isso for concluído. Portanto, o comando está completo e está criando essa postagem de diretório para que nossa postagem resida. Vou dizer execute e o diretório será criado. Vamos esperar um pouco o que acontece. Ok. Então você pode ver que está fazendo algum trabalho aqui. Você pode ver que ele está procurando alguns arquivos, listando alguns arquivos, fazendo todas as coisas. E você pode ver tudo isso acontecendo nessa pasta de bloqueio. Está bem? Não estou tocando no código nem fazendo nada aqui, mas podemos ver que está acontecendo desta forma Ok, listou 15 itens no bloco, não é? Então, não, eu não vejo isso acontecendo. Então eu tenho um AL. Vamos executar esse comando. Isso é absolutamente normal. Tudo bem Está gerando mais um comando. Ok. E eu vou executar isso. Ok. Então, vamos esperar um pouco. Ok. Está esperando por alguma aprovação. Eu dei a aprovação, certo? Que tipo de problema, executar essa aprovação para executar isso. Vou executar isso. Ok. Ok, então depois de um tempo, ele executou alguns comandos. Mudou muito código e, finalmente, tenho esse comando em que ele pede que eu execute o aplicativo. Então, o que ele está fazendo é me dizer para executar o CD blog e executar o NPM run deep Está bem? Então, de dentro para bloquear a pasta, ele está me pedindo para executar o aplicativo. Então, eu vou dizer terminal aberto, e o ideal é que eles iniciem o aplicativo. Você pode ver que o aplicativo está sendo iniciado. Eu virei até aqui. Para o host local, vamos atualizar. Ok, então temos nosso blog aqui. Você pode ver isso. Você pode ver que também foram geradas algumas postagens. Você pode ver Hello world. Você pode clicar em Hello World. Você pode voltar. Você pode ir para Avançar e escolher Dicas. Você pode ver isso e filtrar, basicamente, Intro, eu posso filtrar Bem-vindo, a seguir, escolha as dicas. Dependendo da sua necessidade, você pode adicionar mais blocos e, sim, este é o nosso blog simples que foi configurado. Agora, se você vier aqui, temos essa pasta de blocos Win que temos, pose ok. Então, na postagem, temos esse tipo de arquivo que é como arquivos Markdown Ok, MD Markdown. E vou aceitar todas as alterações no código. Está bem? Então este é o arquivo Markdown que temos, e se você quiser publicar um novo blog, você tem que escrever o arquivo Markdown desta forma Está bem? Você pode ver que é assim que os arquivos foram gerados. Ok, então esta é a versão 1.0 do nosso aplicativo, e eu acho que é um aplicativo muito decente sem escrevermos nenhum tipo de código, não escrevemos uma única linha de código, certo? E o que fizemos foi obter esse lindo resultado do blog ASE. Isso pode ser um blog muito, muito bom se você quiser começar sua própria presença on-line, escrever alguns posts por aí. Então, isso é algo que você pode começar. 7. Melhorando a programação iterativa do aplicativo do blog: Então, depois de ter a primeira versão do blog lá, é hora de pedirmos que ele adicione alguns novos recursos. Então, vou mostrar como você pode iterar no blog ou em qualquer tipo de projeto e adicionar algumas coisas novas OK. Agora, antes de prosseguirmos, gostaria de lembrar que estamos trabalhando a partir desse projeto de codificação E, que tem esses dois projetos Um é um bloco e o outro é um IAP. Agora, essa pasta SRC foi criada, acredito, pelo próprio COSO e não tem nada Então, por engano, pode ter criado isso aqui. Vou deletar isso, assim como vou deletar isso para que você possa ver que essa pasta SRC também foi excluída Temos apenas duas pastas agora. O blog é um projeto no qual estamos trabalhando. Agora, o que eu recomendaria é que às vezes Curso pode ficar confuso e se você estiver em um diretório principal. Então, agora estamos em um diretório principal do projeto de bloco, mas na verdade estamos trabalhando no blog. Às vezes, o Curso pode ficar confuso e começar a criar arquivos aqui nesta pasta e isso estará fora do projeto de bloco. O que vou fazer é trocar e abrir rapidamente o projeto de bloco e mudar para esse diretório para que Curso nunca fique confuso. Para isso, vou até o arquivo. Eu vou dizer pasta aberta. Agora, ao abrir a pasta, você verá esse exploder como esse, vá até o blog e diga, selecione a dobra Está bem? Então você pode ver que todo o Curso será reiniciado, e agora você está dentro do projeto de blocos, ok? E você pode pedir a Coso que execute isso. Ei, você pode me ajudar a executar este projeto? Está bem? Porque se você vier aqui, reiniciamos o Curso, na verdade, trocamos Então isso vai ser fechado, certo? Então, pedi que ele executasse o aplicativo, mas ele me deu etapas. Está bem? Então, eu não quero passos. Eu vou contar isso. Você pode me ajudar a executar este projeto? Não me dê passos, mas você os executa, algo assim. Ok, então está bem claro que você tem que fazer isso. OK. Então, ele está me pedindo para executar esse comando de instalação. Vou apenas dizer, ok. E então ele dirá: Execute este comando, NBMRuntab. OK. Então, eu apenas cliquei em Abrir terminal, e ele acabou de iniciar esse comando, e agora você deve ser capaz ver o blog sem problemas Ok, agora podemos pedir que ele trate qualquer coisa, dependendo da sua escolha. Então, primeiro de tudo, eu vou contar isso. Vou dizer ao Cursor para adicionar o layout da grade aqui. Portanto, esse é um layout de lista e, se você adicionar mais blocos, ele virá no layout da lista. Então, deixe-me mostrar adicionando mais blocos, ok? Então, posso dizer, por favor, adicione mais blocos, adicione Por favor, em vez de mais blocos, eu direi, por favor, adicione três blocos e também inclua o formato do código-fonte neles. Está bem? Então, também veremos como a formatação do código-fonte funciona porque esse é um bloco de codificação que eu comecei Só estou dizendo que é um bloco de codificação. Você pode começar um blog de receitas, você pode começar um compartilhamento de imagens ou um blog de fotografia, dependendo do que você faz. Está bem? Acabei de mencionar que este é um blog de programação e vamos esperar que ele adicione os novos blocos Então, está dizendo que está lendo postagens e dois outros arquivos, e você pode ver onde está gerando novos arquivos aqui. Ok, devido a algum erro aqui em que ele não conseguiu ler este arquivo e continuou, então presumo que ele resolverá o problema para nós Está bem? Então, podemos esperar um pouco. Deixe-me ver se estamos vendo algum tipo de mudança. Você pode ver as mudanças aqui, certo? Então, se você for reagir aos componentes funcionais aqui, poderá ver que o código foi adicionado. O código foi adicionado aqui, certo? Então é assim que a formatação do código ficará, você pode ver, ok? Então, sim, você também pode pedir que ele melhore. Está bem? Então você pode dizer aqui. É assim que está saindo. Você pode pedir que você mude a cor ou algo parecido. Então você pode fazer a captura de tela. Você pode fazer a captura de tela. OK. O código que é mostrado, você pode ver, não está bem formatado , está bem formatado E o destaque de sintaxe não é adequado. Então eu passei a imagem para cá e, ao olhar para a imagem, ela vai nos ajudar a melhorar, certo? Então, vou aceitar todas as mudanças até agora e aguardaremos o tipo de mudanças que ela está propondo agora OK. Então, aqui, vamos esperar. OK. Então, temos quantos blocos? Temos cerca de cinco quarteirões. Vamos esperar aqui. Ok, então vamos esperar até que todo o código seja concluído. Agora, veja aqui, quaisquer mudanças foram feitas pelo CO, então eu aceitei todas elas até agora, certo? Eu pressiono o botão aceitar tudo aqui. Agora, se você der esse comando ao Cursor e ao que ele está gerando agora, se você não quiser aceitar, se quiser rejeitar, você pode pressionar o botão de rejeição aqui. Portanto, haverá um botão de rejeição que aparecerá após o término da geração. Está bem? Agora, mais uma coisa interessante que eu gostaria de destacar, é pesquisar. Você pode ver que ele está pesquisando algo na web aqui. Ok, está pesquisando como ele pode destacar a sintaxe no próximo Gs 15 destacar a sintaxe no próximo Gs 15. É isso que ele vai pesquisar. Então, eu vou dizer continue. Está bem? Estava pedindo permissão. OK. Vamos esperar até que toda a solução seja implementada. Está me pedindo para instalar certos comandos. Eu aceitei isso e ele vai instalar isso para mim. Vamos esperar até que toda a instalação seja concluída. Pesquisei muito, alguns comandos o executaram, e então ele está me perguntando. Isso está me dando a solução de que precisamos para adicionar processamento de MDX e realçar o hype Isso pode ser alguma biblioteca ou algo assim e também está pedindo que tenhamos que inserir isso. Você quer fazer isso? Eu vou dizer que sim, por favor, faça qualquer coisa para amassar e colocar isso em funcionamento Está bem? Então, eu estou dando a permissão, ok? Por favor, faça o que for necessário e coloque isso em funcionamento. Vamos esperar um pouco. Portanto, o aplicativo já está em execução. Ele fez algumas alterações e o aplicativo já está em execução, mas ainda está me dando esse comando de execução. O aplicativo está sendo executado aqui à esquerda, então vou ver Skip over aqui, e aqui está ele me dando esse botão de aceitar tudo porque ele fez muitas alterações no código Eu não vou aceitar todas as mudanças por aqui. Por quê? Porque primeiro vou testar o aplicativo. Eu virei até aqui. Há algum problema, parece que meu aplicativo começou a gerar erros Aqui, se você for, aqui está gerando um erro na página de detalhes da postagem Vou copiar isso Ok, aqui, e eu também vou colocar isso aqui. OK. E direi que recebo isso quando visito esse URL. Então, eu tenho que fornecer ao EI ou ao curso a descrição do erro e quando o erro ocorre Está bem? Isso ocorre quando eu visito. Por favor, conserte para mim. OK. Então, estou pedindo que você conserte. Agora vamos esperar até que seja corrigido. Agora, tenha em mente que eu não aceitei nenhuma das mudanças. Esse botão ainda está lá, certo? Eu não aceitei. Se você quiser. Se não conseguir gerar ou improvisar nesse recurso específico, teremos a opção de rejeitar todas as alterações e voltaremos ao estado em que o projeto estava antes de solicitarmos esse recurso Então essa é a vantagem de não aceitar todas as mudanças aqui. As alterações foram aplicadas, mas não as aceitamos. Então, se você vier aqui, você pode ver todas essas cores aqui, certo? Então, se você pudesse acessar este arquivo. Você pode ver todas essas coisas verdes, foram adicionadas e as vermelhas foram removidas. Está bem? Então, essas são as mudanças que são feitas. Agora, no momento em que eu disser, exceto essa coisa vermelha será excluída e a coisa verde será adicionada. Isso é o que ele faz aqui. Está bem? Então, ok, aqui está me dando essa opção aqui, ok? Então, vou escolher o que é melhor. Ele está me dando duas opções para corrigir o problema. Eu vou dizer que escolha o que é melhor e funcionaria de acordo com você, vá em frente. OK. Então, vou apenas mencionar isso e ele começará a corrigi-lo. Ok, então ele fez algumas mudanças aqui, você pode ver, ok. E houve algumas iterações aqui, e diz que o erro deve ser corrigido Então, vamos voltar. E deixe-me refrescar. Deixe-me fazer uma atualização rápida. Deixe-me visitar. Ok, agora você pode ver que o destaque da sintaxe está melhor Você pode ver a cor e agora tudo está basicamente. Portanto, a coloração baseada em palavras-chave é o que você pode ver aqui. Mesmo para JavaScript, vamos ver, sim. Então, isso é muito melhor. OK. Você pode solicitar esse tipo de melhoria e repetir o que tiver faturado Por exemplo, amanhã, se eu quiser mudar essa lista para o formato de grade, posso pedir que faça isso. Está bem? Isso é algo que podemos fazer. Espero que tenha sido útil, ok. Também mencionarei aqui que às vezes pode não obter a resposta certa na pontuação completa. Haveria um pouco de idas e vindas com o cursor ou o modelo DAI que está sendo usado aqui sob o capô. Então não se preocupe, não se estresse. É importante que você forneça as informações corretas para a IA aqui e ela fará o trabalho por você. Por exemplo, se você ver algum tipo de mensagem de erro aqui ou se não estiver vendo a saída imediatamente, você pode fazer a captura de tela e passá-la aqui e dizer: Ei, por favor, verifique a captura Isso é o que eu vejo. E é aí que eu vejo quando eu estava nesta página em particular, esta é uma página, e por favor, corrija-a para mim. Forneça o máximo de informações possível, qualquer mensagem de erro que você esteja vendo, o que quer que você esteja vendo , fará o trabalho por você. OK. Então, sim, espero que isso tenha sido útil até agora. 8. Coisas importantes para saber sobre o Cursor: Agora é hora de falar sobre algumas dicas e truques que você deve conhecer ao trabalhar com o cursor, e essas dicas e truques podem ajudá-lo a obter a saída desejada melhor e mais rapidamente. Está bem? Então, a primeira coisa que eu gostaria de falar é sobre o contexto aqui, ok? Agora, você pode adicionar contexto ao seu bate-papo. Contexto, ou seja, dar algum tipo de contexto ao modelo AM que está sendo usado, ok? Então, aqui, eu posso dizer contexto, e eu posso adicionar uma pasta antes de tudo, para que eu possa adicionar todo esse bloco de pastas. Está bem? Então, essa pasta tem meu código-fonte aqui. Então, eu estou dando essa pasta inteira como contexto, e eu posso digitar a mensagem e enviá-la para Koso Portanto, isso pode resultar na obtenção de uma melhor resposta do Cursor porque ele sabe que você está se referindo a ou está falando com relação a essa específica, o que quer que esteja nessa dobra específica. Está bem? Então, isso é uma questão de contexto. Você pode adicionar diferentes tipos de contexto. Você pode adicionar arquivos específicos, se desejar. Portanto, dentro do blog, você também pode adicionar um arquivo específico, se desejar. Ou você pode adicionar algum tipo de documentação aqui, ok, ou você pode adicionar qualquer tipo de bate-papo anterior Portanto, quaisquer que sejam os bate-papos anteriores que você teve, você também pode adicioná-los como contexto Ok. Portanto, pode ser possível que, em bate-papos anteriores, o Cursor tenha fornecido algo que você está esperando agora e não seja capaz de gerar a mesma coisa Assim, você pode dar seu bate-papo anterior como contexto e, em seguida, fazer as perguntas ao Cursor. Você pode adicionar o Git como terminais de contexto. Portanto, se você estiver executando vários terminais aqui e estiver recebendo um erro em um dos terminais, poderá adicionar esse terminal como contexto. Pode adicionar qualquer coisa da web. Assim, você pode selecionar a web aqui e basicamente adicionar uma URL ou algo parecido, e o Cursor lerá essa URL para você. Ok, além disso, se você estiver usando algum tipo de biblioteca ou estrutura, por exemplo, aqui, quando usamos, vimos alguns nomes como tailwind e Next has, certo por exemplo, aqui, quando usamos, vimos alguns nomes como tailwind e Next has, Portanto, você pode adicionar documentação oficial dessas bibliotecas. Então, aqui, por exemplo, falaremos sobre vento de cauda, então você pode dizer vento de cauda E você pode ver aqui, tailwind CSS official. Portanto, esta é a documentação oficial que existe com o cursor. Então você pode simplesmente adicionar isso na próxima perseguição que também estamos usando. Eu vou dizer que os próximos Js que você pode ver no próximo ano são oficiais. Então você está adicionando a documentação, ambas as documentações aqui para o cursor consultar. Você pode ver se clicar aqui, este é o link ao qual serão adicionadas as palestras de CSS do Tailwind E aqui você pode ver nexts.org reduzir o TOC. Você pode acessar esta documentação oficial aqui clicando no link e abrindo-o no navegador. Está bem? Então, é assim que você pode melhorar a interface do usuário. Além disso, você pode adicionar coisas como imagens e tudo mais, se tiver algum tipo de erro. Está bem? Então, trata-se de adicionar contexto. Eu gostaria de falar sobre configurações, algumas configurações aqui. Então, se você for até o arquivo, dentro do arquivo, você terá preferências, e dentro das preferências, você terá as configurações do cursor. Está bem? Então deixe-me, esconda esse botão AIP aqui, ok Aqui estão algumas configurações que você pode ver e usar para o cursor. Está bem? Você pode brincar com algumas configurações. Uma configuração importante sobre a qual eu gostaria de falar são as regras aqui. O que são regras? Então você pode ver aqui, as regras. E se você clicar neste ícone sobre, ele abrirá o discurso para você. Está bem? Então, quais são as regras? Portanto, a regra nada mais é do que um tipo de regra que você deseja mencionar ou algum tipo de diretriz que deseja mencionar. Então você pode ver aqui. Oh, tudo bem, Rules. Se eu clicar aqui nas regras, você pode ver. Por isso, ele não carregou corretamente, então tive que clicar nas regras. Assim, com as regras, você pode controlar como o modelo do agente se comporta com instruções reutilizáveis e com reutilizáveis Então você pode adicionar alguns tipos de regras como, por exemplo, me dar respostas concisas, ok, algo assim Ou se você estiver inclinado a usar uma estrutura específica Então você pode adicionar uma regra dizendo que, ei, sempre use o next chase para todos os meus projetos, algo assim. E existem vários tipos de regras: regras baseadas em projetos, regras baseadas em usuários, memórias ou regras de cursor. Está bem? Então, todos esses tipos de regras que você pode mencionar aqui. Então você pode ver aqui, um exemplo, ok? Então, aqui, você adicionou uma configuração. É assim que a regra é aplicada aqui. Isso é o que está dizendo. Eu quero te mostrar um exemplo de regra aqui. Ok, então quando eu desço até aqui, pude ver alguns exemplos de regras. Você pode ver aqui. Essa é uma das regras. Portanto, ao trabalhar no diretório de componentes, sempre use tailwind para estilizar, frame of motion para animações e siga nossa convenção de nomenclatura de componentes Você pode ver que essa é uma das regras. Assim, você pode copiar e colar isso na sua página de regras. Isso é para o diretório ABI. Você pode ver o código padronizado aqui. Então, todo esse tipo de regra, basicamente, regras nada mais é do que você está definindo o comportamento para o modelo AIM e dizendo que isso é o que sempre será esperado. Então, em vez de digitar e contar modelo de IA toda vez que estiver fazendo algumas perguntas, você pode definir as regras globalmente aqui para o agente Ok. Então você pode ver que pode definir regras baseadas no usuário, ok? Você pode gerenciar suas regras de usuário personalizadas aqui. Você pode definir regras com base em projetos aqui, ok. E sim, isso pode te ajudar a fazer muitas coisas, ok? E você também pode adicionar algumas memórias aqui. Então você pode ver memórias diferentes aqui. Está bem? E você pode ver quais memórias nada mais são as informações que o agente está lembrando sobre você Portanto, você também pode gerenciá-lo a partir daqui. Se você quiser excluir algo da memória, você pode excluí-lo. Ok. Portanto, essas são algumas coisas importantes que você deve conhecer ao trabalhar com o Cursor e isso pode ajudá-lo a obter uma melhor resposta desse modelo de IA. 9. Conclusão do curso: E agora chegamos à conclusão de nossa jornada no mundo da codificação com o cursor Ao longo do curso, exploramos como você pode criar experiências digitais poderosas sem codificação tradicional, apenas colaborando com ferramentas de inteligência artificial, como o cursor Começamos entendendo o que é codificação, que é uma forma nova e intuitiva de criar que prioriza a criatividade, intenção e a colaboração humana Vimos como o cursor permite que você crie seu primeiro aplicativo. Usando linguagem natural e instruções. Em seguida, fomos mais longe, criando um site de blocos completo tudo sem precisar de experiência em programação Ao longo deste curso, você testemunhou como pode ser simples dar vida a ideias com a ajuda da EI Não há erros de sintaxe, nem instalação, nem experiência prévia, apenas curiosidade e visão Você aprendeu a confiar no processo, comunicar seu assistente de EI e criar projetos reais com facilidade. Mas lembre-se, isso é só o começo. O futuro da criação está em ferramentas como o cursor, e quanto mais você experimenta, mais confiante e inovador você se torna. Portanto, continue explorando, continue solicitando e não tenha medo de ultrapassar os limites do que você acha que pode construir Obrigado por se juntar a mim nessa jornada. Espero que este curso tenha sido esclarecedor, empoderador e, acima de tudo, uma introdução divertida às possibilidades do desenvolvimento de IA sem código Com este curso, na seção de projetos, você encontrará um projeto de classe, que eu recomendo fortemente que todos concluam e compartilhem com toda a turma. Edifício feliz.