Pronto. Criar. Navio. :: IA para desenvolvedores de web Crie 3 vezes mais rápido.

1. Trailer: Você é um desenvolvedor web? Sim, então deixe-me te perguntar uma coisa. Às vezes, a codificação parece muito lenta? Você passa horas no stack or flow? Você quer construir mais rápido, muito mais rápido? Sim. Então eu tenho algo para você. Apresentando a IA rápida e rápida para desenvolvedores web, criada três vezes mais rápido Um novo curso desenvolvido para ajudar você a programar com mais rapidez. Neste curso, vou te ensinar bases sólidas de IA. Cinco maneiras pelas quais a IA pode ajudar você. Os tipos de ferramentas de codificação de IA. Criaremos um pequeno aplicativo web seguindo o fluxo de trabalho de desenvolvimento web com IA. Além disso, você enfrentará dois desafios em que cria aplicativos web por conta própria. quem é isso? Desenvolvedores web de todos os níveis de habilidade. Qualquer pessoa que escreva código mesmo fora do webdv. Imagine passar menos tempo preso a bugs e mais tempo realmente construindo. Este curso ajudará você a enviar seu projeto três vezes mais rápido. Ensino IA para desenvolvedores web desde 2023, e posso dizer com segurança que, se você não está usando a IA em seu fluxo de trabalho diário, você está atrasado Mas não se preocupe. Vou te mostrar tudo e te ensinar tudo o que você precisa para progredir. Ficarei feliz em ver você no meu curso. 2. Módulo 2: introdução: Olá, bem-vindo ao módulo número dois. Neste módulo, exploraremos as seguintes coisas. Começaremos com os conceitos básicos da IA generativa e como ela funciona. Em seguida, abordaremos as populares IAs de uso geral. Discutiremos em detalhes cada um deles. Em seguida, passaremos para as quatro formas de interação com a IA e finalizaremos com uma arquitetura rápida. Então, vamos começar. 3. Aula 1 : Olá, e bem-vindo à lição número um. Nesta lição, falaremos sobre como o General iV está realmente funcionando. E, claro, vamos nos concentrar em um vI geral baseado em texto porque código é texto, ok? Bem, deixe-me mostrar alguns slides da explicação oficial do Google. Como explica o Google, modelos de linguagem generativos, texto. Esses modelos aprendem sobre padrões na linguagem por meio dos dados de treinamento. Então isso significa que o engenheiro alimenta a máquina, os grandes, grandes terabytes de dados de texto E então a máquina aprende com esses grandes pedaços de texto. E as respostas que vêm dessa máquina são realmente previstas, não calculadas por algum tipo de fórmula, mas quase como previstas. Então, novamente, deixe-me enfatizar essa coisa. É uma previsão, mas não um cálculo exato. Então, novamente, o exemplo do Google. Então, vamos ver essa frase. Estou fazendo um sanduíche com manteiga de amendoim e, como você pode ver, existem diferentes opções, variações como geleia, geleia, banana, etc Então, isso significa que quando você pergunta essa solicitação à máquina, você pode obter qualquer uma dessas respostas. É importante. Essa é a questão. Está bem? Então, deixe-me mostrar mais um exemplo. Pedi ao Chat GPT que listasse todas as variações às quais essa pessoa pode responder Olá. E como você pode ver, temos respostas casuais, uma, duas, três, quatro, cinco, seis, sete, oito. Temos respostas amigáveis, formais, engraçadas, enérgicas, sarcásticas, E, como você pode ver, várias dezenas de respostas diferentes. Como você pode ver, se você solicitar que algum texto gere A com olá, você poderá obter algumas dessas respostas. Novamente, não é um cálculo, mas é uma previsão. Portanto, temos diferentes variações que você pode obter. Ok, então por que é importante entender, quero dizer, o princípio fundamental de como os modelos de linguagem generativa de linguagem Porque mais tarde, quando você se tornar mais experiente, poderá criar sua própria IA generativa de linguagem com seu conjunto de dados personalizado Por que você quer fazer algo assim? Porque talvez você possa criar um quadro de bate-papo para alguma empresa ou talvez queira criar algum , por exemplo, como aplicativo web de geração de código para si mesmo, para qual gostaria de produzir respostas como Nx Js ou NextGS ou C plus, e gostaria que as respostas fossem o precisas possível Então, nesse caso, você precisa treinar sua máquina com um conjunto de dados específico para esse domínio, eu diria. Então, seria como documentações para a linguagem, a linguagem de programação Pode ser como livros, livros sobre esse idioma e, você sabe, exemplos. Portanto, é importante entender. 4. Aula 2 : Olá. Bem-vindo à lição número dois. Nesta lição, vamos explorar as populares IAs de uso geral. Por propósito geral, quero dizer que essas IAs podem resolver diferentes tipos de tarefas e não apenas as de codificação. No primeiro, o famoso é o chat GPT, e o Chat GPT foi provavelmente o primeiro no mercado, e é por isso que é tão Então, bem-vindo ao chat GPT. No centro, geralmente temos o campo de entrada onde podemos inserir nosso prompt e seguida, algumas coisas adicionais, como fazer upload de arquivos, pesquisar na web, modelos de raciocínio para obter informações mais avançadas sobre o uso do modo de voz para reconhecimento de voz Então, vamos tentar algo com o chat GPT. Então, pediremos ao HatGPT que codifique o clichê HTML básico. E, como você pode ver, ele fez um trabalho com sucesso. Então, vemos o padrão básico do HTML e, na verdade, podemos copiá-lo se precisarmos E também costuma fazer alguns comentários lá embaixo. nuvem é conhecida por ser a melhor opção para desenvolvedores web e outros profissionais de codificação, e muitos dos assistentes de codificação e editores de código de IA usam a nuvem nos bastidores Então, estamos na nuvem e, como você pode ver, novamente, a interface do usuário é muito parecida com a AGBT Temos o campo de entrada no centro. Então você pode, por exemplo, escolher o modelo. Aqui estão os modelos gratuitos, os modelos profissionais. Você pode escolher o estilo do idioma. Como mencionei anteriormente, é basicamente a melhor escolha para os desenvolvedores web, e é por isso que eles integraram o Github Assim, você pode conectar sua conta do Github aqui, e provavelmente ela fará algumas coisas com seu código do Github Novamente, você pode capturar uma captura de tela ou adicionar um arquivo. Então, vamos verificar como a nuvem funciona. Então, como você pode ver, solicitamos que Claude liste as propriedades de texto CSS E você provavelmente já percebeu que é um pouco diferente do GBT Sim, isso está correto porque Claude nos dá algo chamado artefatos, e esses são tipos de documentos E, como você pode ver neste documento, temos uma resposta muito boa porque ela tem alguns agrupamentos para diversão, formatação de texto, sombra, etc., e um pequeno exemplo que, é claro, você pode copiar assim Então esse foi Claude. Vamos para a próxima. Então, o número três é Gêmeos. O Google Gemini foi desenvolvido e produzido pelo Google. Então, bem-vindo ao Gemini e, como você pode ver novamente, temos o campo de entrada e outras coisas, como adicionar arquivos Você pode adicionar isso do Google Drive, do computador local e apenas uma imagem. E, claro, você pode usar o microfone para reconhecimento de voz. Então, vamos direto ao assunto. Por isso, pedimos ao Gemini que explicasse se outra construção em JavaScript. Vamos ver. Como você pode ver, é raciocinar, é pensar, e temos a explicação básica aqui Temos o código básico, que podemos copiar. E uma das coisas que o Gemini faz é que às vezes fornece o link para o artigo real em que obteve seu conhecimento Então, mais exemplos e mais alguns exemplos. Então, vamos para a próxima. E os dois últimos que vamos dar uma olhada são um Deep Sik Deep Sik foi inventado há alguns meses, foi inventado na China e basicamente é muito parecido com o GPT, mas é conhecido por suas APIs gratuitas Como você pode ver, parece muito com um Chat GPT, onde temos a caixa de entrada, o modelo DepthKrasoning, pesquisando na Então, vamos escrever agora mesmo. Por isso, pedimos Deepsk que listasse estruturas populares de Jazz. Vamos ver. Então, funcionou, mas, como você provavelmente percebeu, demorou algum tempo, um pouco mais do que outras ferramentas para realmente dar a resposta, mas ainda é muito boa. Conclusão. Portanto, o melhor para a IA de uso geral, incluindo a codificação, é o HAGPT Por quê? Porque tem um número ilimitado de mensagens, e a qualidade das respostas e a velocidade são muito boas. E para o material de codificação, o coágulo é o caminho a percorrer Lembre-se de que ele tem algumas limitações em termos de número de mensagens que você pode usar. 5. Aula 3: Olá, bem-vindo à lição número três. Nesta lição, falaremos sobre quatro formas de interação com a IA. Por interação, quero dizer simplesmente como você pode transmitir suas informações, seu baile de formatura para a Então, a primeira, e provavelmente a mais óbvia, a forma mais popular de falar com a IA, interagir com a IA, é o texto. Já vimos isso quando você simplesmente escreve algo, solicita algo e a IA responde a você. Então, vamos dar uma olhada rápida. Então, estamos no chat, GPT, UI e, novamente, vamos fazer uma solicitação simples Por isso, sugerimos as seguintes coisas. Explique o que é CSS mencionado com exemplos. Como você pode ver, o ha GPT começou a responder. Então, aqui temos a definição. Agora temos a animação CSS básica, o exemplo de mudança de cor com código. Explicação. Segundo exemplo com elemento móvel e até mesmo um terceiro exemplo. E no final, como você pode ver, ainda estamos obtendo as propriedades de animação CSS, como uma tabela com uma descrição para cada propriedade. Portanto, a segunda forma de interagir com a IA é o áudio. Para poder fazer isso, você precisará ter um microfone no telefone ou no computador. Estamos no chat, GPT, e como você pode ver, ele tem esse ícone de usar o modo de voz Então, vamos clicar. E no momento, como você pode ver, nosso ícone de microfone está desligado. Então, simplesmente, estamos dentro do modo de áudio. Então, vamos ativá-lo. Olá, Chad GBT Olá, como vai? Bom. Obrigada. Você poderia explicar a diferença entre o React JS e o Next Gs em palavras simples É claro que o ReactJS é uma biblioteca JavaScript para criar interfaces de usuário, principalmente para aplicativos de página única Ele ajuda você a criar componentes que gerenciam seu próprio estado. O NextJS, por outro lado, é uma estrutura construída sobre Ele adiciona recursos como renderização do lado do servidor, geração de sites estáticos e roteamento fácil, tornando-o mais adequado para criar aplicativos web prontos para produção Portanto, o ReactJS é como a base, e o NextS é como um kit de ferramentas aprimorado construído sobre ela Muito obrigada. Você é bem-vindo. Se você tiver mais alguma dúvida, fique à vontade para perguntar. Como você pode ver, acabamos tentar conversar com o chat, o GPT, e até obtivemos resultados curtos com nossa fala e a resposta Mesmo que você possa usar o canal de áudio, ele não é tão adequado para codificação Então, a próxima maneira de interagir com a EI é a imagem. Isso significa que você pode enviar alguma imagem para a NAI e pedir ou solicitar que faça alguma coisa Então, desta vez, usaremos a nuvem. Tudo bem. Então, vamos fazer o upload de uma imagem parecida com esta. É como, como você pode ver, um simples formulário de contato. Então, acabamos de fazer o upload do arquivo de imagem usando este ícone, escreva aqui. Agora Cloud tem essa imagem. Então, temos que escrever o prompt. Portanto, o prompt é codificar o formulário na imagem que eu enviei. Então, vamos ver. Como você pode ver, ele iniciou o artefato de código com as classes HDL e CSS de asa traseira E você também tem o conteúdo como uma imagem de formulário. Parece assim. Então, vamos tentar outra coisa. Vamos entrar em contato com a nuvem. Pedi à Cloud que fizesse uma prévia desse formulário. Então, como você pode ver, o Cloud tem esse modo de visualização, modo de código e modo de visualização. E no modo de visualização, às vezes você pode ver o componente pronto em ação. Novamente, não é que não funcione sempre, mas às vezes você pode perguntar ao Cloud, algo como: você pode fazer uma prévia desse formulário? Às vezes, isso acontece quase automaticamente, como você pode ver, porque esse é o código de reação e, quando tentamos fazer isso, apenas com o formato HTML e CSS, realmente não funcionou, mas com um componente de reação, às vezes você pode ter uma prévia do resultado final. E a última maneira de solicitar o EI é um canal de vídeo. Então, anteriormente, estávamos fazendo o upload da imagem e, claro, você pode enviar o vídeo, mas o fato é que não forma tão popular de solicitar no momento, porque, é claro, como você provavelmente entende, é uma maneira muito cara de usar uma IA, mas é possível Por exemplo, você pode enviar o vídeo e pedir IA especializada em IA para operações de vídeo, você sabe, para recriar o vídeo com algumas alterações ou pegar o herói principal do vídeo e fazer algo, você sabe, usando esse personagem Não é tão comum no mundo da codificação. Então, a conclusão, meu amigo, qual é o melhor para codificar Qual é a melhor forma? Claro, é texto e, às vezes, imagens. 6. Aula 4: Olá, e bem-vindo à lição número quatro sobre arquitetura rápida. Nesta lição, explicarei os conceitos básicos do design rápido e da arquitetura rápida O prompt básico consiste em três partes. A primeira é a tarefa. A segunda parte é o contexto e a terceira é um exemplo A tarefa é uma parte obrigatória do prompt porque, sem a tarefa, todo o prompt é inútil E o exemplo de prompt que consiste apenas na tarefa pode ser chamado de frutas. E lhe dará o nome de frutas como maçã, pêra, banana. Pode levar algumas, você sabe, frutas dos países do norte, países do sul, países africanos, países europeus, Austrália e Nova Zelândia, por exemplo. Então, serão todos os tipos de frutas. Agora, a segunda parte é um contexto e, como você pode ver, eu a considero uma boa ideia. Por quê? Porque define uma direção. Aqui dizemos tropicais. Então, cite frutas tropicais. Agora, seu prompt tem algumas restrições em alguma direção. E nesse caso, IA nomeará apenas frutas consideradas tropicais, certo? E a terceira parte é um exemplo. E, como você pode ver, é uma peça opcional. Isso significa que, sem exemplar, ainda é um bom baile de formatura, mas exemplar pode torná-lo um pouco mais focado E aqui damos um exemplo, um exemplo específico como uma manga Combinado vai soar como dar nome a frutas tropicais. O exemplo é manga. Então, aqui estão minhas avaliações pessoais. Portanto, a tarefa vale 50% de 100 para a importância. contexto vai para os 40 e o exemplar vale para 10% Então, vamos ver mais um exemplo. Portanto, a tarefa é construir uma cidade. Obviamente, a IA construirá para você qualquer tipo de cidade, por exemplo, algo a partir de cidades existentes, algo de antigas cidades antigas que não são mais apresentadas, ou como uma cidade imaginária de sua própria imaginação ou de algum jogo ou livro E agora o contexto da cidade, por exemplo, poderíamos dizer que deveria ter muitas árvores, nublado, chuvoso e frio E agora, é claro, não vamos ver algumas cidades de muito quentes em outras de países muito frios. E aqui podemos realmente acrescentar que a cidade deveria ser como uma cidade real do nosso planeta. Um exemplo, por exemplo, Seattle, e agora tem, você sabe, direção específica para seguir Então, vamos dar mais um exemplo do mundo da codificação. Portanto, a tarefa pode ser criar um formulário. E agora entendemos que o formulário pode ser muito longo ou muito curto. Pode ser estilizado de maneiras diferentes, fontes, cores e tamanhos Com nosso contexto, estabelecemos algumas restrições. Por exemplo, devemos ter um CSS tailwind. A fonte deve ser pop-ins, as cores do logotipo do Google e os campos devem ser nome, e-mail e telefone. E agora também adicionamos um exemplo que direcionamos para Aish para que ele possa se inspirar Aish para que ele possa se na imagem que enviamos Então eu acho, meus amigos, que agora vocês têm uma boa compreensão de como arquitetar um prompt. E, novamente, você pode usá-lo não apenas na codificação, mas na vida real e em diferentes tipos de tarefas 7. Exercício: Esse estilo de prática. E para este módulo, você terá uma tarefa muito pequena, que é construir um prompt simples usando a arquitetura adequada e, em seguida, testá-lo em quatro modelos diferentes que abordamos Portanto, o objetivo dessa tarefa é que você entenda a mecânica da solicitação Então, para facilitar um pouco para você, deixe-me decompor a tarefa em pequenos passos Portanto, a etapa número um é criar um prompt simples, e não precisa ser codificação, mesmo que a codificação seja um pouco melhor porque ainda é o curso para A etapa número dois é aplicar a regra 504010 que abordamos nas lições anteriores Lembre-se da tarefa, do contexto, do exemplo e da etapa número três, você acessa as diferentes IAs. Novamente, Chad, ZEPT, Cloud Deep buscam Gemini e tentem usar esse prompt e ver o Então, novamente, neste módulo, nosso objetivo é entender a mecânica, que você se sinta confortável usando a IA em geral. Então, boa sorte. 8. Módulo 2: resumo: Parabéns por concluir o módulo número dois. Nesta lição, você aprendeu muito importantes, como o GNAIFoundations, e como ele funciona, IAs populares de uso geral, como Claude, HATGBT Além disso, você aprendeu as quatro maneiras de interagir com a IA. Isso significa texto, áudio, imagem e vídeo. Por último, mas não menos importante, está uma arquitetura rápida. Então, você aprendeu como arquitetar e criar um prompt adequadamente para obter os melhores resultados adequados ao seu projeto. Então, novamente, parabéns e até o próximo módulo. 9. Módulo 3: introdução: Olá, bem-vindo ao módulo número três, a IA generativa em um processo de codificação Então, meus amigos, agora o fundo começa porque estamos entrando na zona de codificação Bem-vindo. No módulo número dois, você abordou os princípios básicos vitais e muito importantes do uso da IA generativa Mas agora vamos para a parte intermediária. No módulo número três, começaremos discutindo qual papel a JNAI desempenha em um processo de desenvolvimento web Em seguida, veremos as melhores partes da IA e as partes fracas da IA. E, por fim, a grande seção do módulo será dedicada à visão geral das ferramentas e, especificamente, à geração de código Analisaremos os bate-papos de uso geral para codificação, bate-papos especializados para desenvolvimento web, assistentes de codificação e editores de código de IA. Então, vamos embora. 10. Aula 1 : Bem-vindo à lição número um. Portanto, nesta lição, exploraremos o papel que o GNAI desempenha em um processo de desenvolvimento web Veremos alguns casos, exemplos e coisas que você precisa entender. Portanto, o primeiro e muito importante fato que você precisa entender é que IA é uma boa adição ao seu processo Não é uma coisa obrigatória que você precisa ter. Por quê? Porque você ainda pode escrever código sem IA, como temos feito todos esses anos? É importante porque, se você entender isso , estará muito protegido do FOMO, do medo de perder , porque nos últimos dias e meses, podemos ver quase todos os dias uma nova IA entrar em cena e às vezes pensamos: Ah, provavelmente devo usá-la porque ela fará alguma coisa Sim, provavelmente, mas ainda assim, é importante entender que é bom ter uma adição. Agora, temos a pergunta. Então, qual o papel que ele desempenha em nosso processo, como exatamente isso nos ajuda? E a resposta é simples. Isso só economiza energia e tempo. É isso mesmo. Está economizando. Não é adicionar algo novo ou necessário. Isso só economiza energia e tempo. Sim, isso faz com que pensemos um pouco por nós. Ele escreve código para nós. Sim, é verdade. Mas ainda assim, podemos fazer isso sozinhos. Novamente, vou enfatizar isso porque é importante. Isso só nos ajuda a escrever nosso código com mais rapidez. Não nos substitui. Então, vamos fazer algumas observações. Então, antes da era da IA, nós, como desenvolvedores programadores, procurávamos as respostas manualmente Então, pesquisávamos no Google, acessávamos o stack orflow, líamos alguns artigos, assistiríamos alguns vídeos do YouTube, depois resumíamos essas informações e tentávamos implementar Então, basicamente pensaríamos e depois escreveríamos código. Então, o que mudou? Na era da IA, agora pedimos que a IA crie uma solução. Então, digamos que temos esse aplicativo, gostaríamos desse recurso. Como devemos fazer isso. E então, é claro, fornecemos arquivos AIO ou documentação de uma biblioteca de terceiros e pedimos que nos forneça um código. Então, basicamente, para resumir, agora solicitamos e verificamos o código Então, antes da IA, pensávamos e escrevíamos, e agora solicitamos e verificamos. Então, aqui, vamos ver alguns fatos interessantes. Então, como você pode ver, é do CEO do Google. Ele diz que mais de 25% dos novos códigos no Google agora são gerados pela IA. E meus amigos, é muito importante entender porque é a tendência, é a direção que o setor está tomando. E para ser um desenvolvedor de sucesso na era moderna, temos que fazer parte dessa direção, parte dessa tendência. E o que isso significa para nós. Então, isso significa que o ritmo do trabalho aumentou. Novamente, é importante entender que a velocidade aumentou, não as coisas básicas. Novamente, como eu disse antes, poderíamos escrever código nós mesmos, mas a IA nos ajuda a escrevê-lo mais rápido, certo? Nesses tempos, é ainda mais importante ter habilidades básicas de codificação Por quê? Porque, sim, à primeira vista, IA pode criar alguns novos recursos, depurar algo Mas se não entendermos exatamente o que a IA fez , ela se tornará inútil Mas se você tem habilidades sólidas de codificação, as básicas são fundamentais. Então você vê as conexões entre os elementos, você sabe, as melhores práticas sem a IA. Então, quando a IA fornece algum código, você pode verificar esse código e encontrar algumas partes do código não tão perfeitas, algumas soluções melhores que você pode propor. Essa é a questão. Então, primeiro vão as sólidas habilidades básicas de codificação Então, primeiro, temos que dominar as habilidades de codificação. E segundo, depois disso, vamos para a codificação com IA É importante, meus amigos. Se você quer ser um bom desenvolvedor, programador , resuma esta lição Você é o líder e a IA é seu copiloto. Você ainda pode ser um desenvolvedor muito produtivo, mas a IA pode tornar sua jornada um pouco mais agradável. 11. Aula 2 : Olá, bem-vindo à lição número dois. Nesta lição, exploraremos os lados fortes e fracos da IA na codificação Então, vamos começar. Então, meus amigos, a IA faz seu melhor trabalho em assuntos formalizados O que é assunto formalizado? Então, assunto formalizado é o assunto, a tarefa, o problema que tem uma solução específica, por exemplo, um mais um sempre é igual Está formalizado. Portanto, no mundo da codificação, as tarefas mais formalizadas são os algoritmos, porque você insere uma entrada específica e sempre obterá a saída específica É por isso que, para computadores e máquinas, sempre foi mais fácil resolver esse tipo de tarefa. E como os algoritmos também existem há muitos anos, muitas das tarefas foram resolvidas de muitas maneiras diferentes, essas são soluções conhecidas. É por isso que, em algoritmos, você obterá o melhor trabalho possível de IA. Então, deixe-me te mostrar um exame. Então, agora estamos vestidos e vou compartilhar como costumo praticar os algoritmos sozinho Então, havia uma tarefa simples de praticar algoritmos, que é escrever uma função que retornará o número de palavras em uma string. E eu estava pensando um pouco, praticando um pouco sozinho sem IA, e criei uma função que, como você pode ver, recebe um parâmetro de string e retorna finalmente o número de palavras nessa string E então o que eu geralmente faço é acessar o Cloud ou Chat GBT e dizer as seguintes coisas Verifique minha solução, forneça feedback e forneça a tarefa na solução. E, como você pode ver, ele me deu um feedback bem-sucedido , portanto, poucas considerações, sua função também lida com casos básicos, mas também me fornece possíveis melhorias e sugestões de testes Então, como você pode ver, estou dando outro aviso que me dá outras soluções possíveis para esse problema. E como você pode ver, ele vem com uma, duas, três, quatro, cinco soluções. É isso porque é um algoritmo e a máquina é muito boa em lidar com eles. É por isso que, se você for trabalhar com algo formalizado, como algoritmos ou problemas muito específicos, obterá os melhores resultados com a IA A segunda coisa com a qual é muito bom trabalhar com IA são bibliotecas e estruturas bem conhecidas Nesse caso específico, você obtém bons resultados porque, como essas bibliotecas e estruturas são bastante populares, isso significa que há muitos exemplos em artigos diferentes, outras fontes e sua documentação E isso significa que a IA tem um contexto muito rico, e é por isso que provavelmente fornecerá soluções muito boas. Por exemplo, se você usar o react, o angular view, essas são bibliotecas muito conhecidas no framework, e é por isso que você obterá soluções muito boas. Próximo. Então, agora vamos falar sobre a palavra IA não muito boa. Portanto, a IA funciona bem com assuntos menos formalizados. E na minha experiência particular, a primeira é CSS em estilos CSS de desenvolvimento web e especialmente layout. Então, vamos pensar por um momento, por que é assim? Primeiro, porque CSS não é tão formalizado, não é uma linguagem de programação É por isso que não é tão formalizado. Portanto, não há. Então, digamos que em CSS, quando você comete um erro, algum tipo de erro, quero dizer, não em termos de erro gramatical, mas em termos de erro lógico, digamos que você use a mesma propriedade duas vezes, e a segunda substituirá a primeira, então você não receberá nenhum erro, esse é o Portanto, o CSS não é tão rígido. E se falamos sobre layout, se você já está no desenvolvimento web há algum tempo, provavelmente sabe que pode fazer layout em Não tenho certeza, mas pode ser de oito, dez, 12 maneiras diferentes para a mesma coisa. Você pode usar o Flexbox. Você pode usar a grade, você pode usar até mesmo algumas, por exemplo, se você gostaria de ter várias colunas, você pode usar apenas exibir um bloco embutido, e ainda é uma solução funcional É por isso que, para estilos, tudo bem. Você ainda deve ter uma formação muito sólida. Eu diria que se você quiser usá-lo especificamente para estilizar, porque provavelmente ainda gostaria de limpá-lo Mas é assim. E, novamente, eu diria que faz um trabalho muito ruim com elenco e efeitos visuais. Como animações CSS complexas, efeitos como efeitos e bibliotecas como GSP ou Novamente, porque quando você faz um efeito visual personalizado na web, provavelmente é algo que você criou, como inspiração. Portanto, não é algo comum. É por isso que a IA realmente não tem, novamente, o rico contexto para resolver esse problema forma eficaz, porque eu mesmo, você sabe, trabalhava muito com o GSAP para web design, fazendo algumas animações e interações complexas, e ele está me dando resultados, então E eu normalmente visito fóruns, você sabe, para conversar com pessoas reais sobre me ajudar com o problema. Então, novamente, só para recapitular, ele faz o melhor trabalho em algo muito rígido, formalizado, como algoritmos ou bibliotecas ou estruturas conhecidas , e funciona bem com estilos e alguns 12. Aula 3: Bem-vindo à lição número três, Visão geral das ferramentas. É uma lição muito curta dos meus amigos. Vamos dar uma breve olhada no que abordaremos nas próximas lições. Portanto, visão geral das ferramentas para geração de código. Então, começaremos com bate-papos de uso geral para codificação. Especificamente, serão JAGBT e Cloud. Em seguida, passaremos para xadrez especializado para desenvolvimento web, especificamente UI, e este é um V zero. No Versll, converteremos a assistência de codificação. Você provavelmente já ouviu falar do Github copilot ou talvez do Codeon. E, por fim, veremos um dos editores de código de IA. Então, vamos embora. 13. Aula 4: Bem-vindo à lição número quatro. Nesta lição, discutiremos e examinaremos mais de perto a perspectiva de codificação de IA de bate-papos de uso geral Vamos falar sobre Cloud e conversar sobre GPT e vamos começar com Cloud Então, primeiro, vamos dar uma olhada nos quadros de cartas web de Devina Web Devina, como você pode ver, é uma competição de codificação de IA, então os desenvolvedores web meio que avaliam os LLMs para obter os melhores resultados E, como você pode ver, o Cloud 3.7 e o 3.5 ocupam o primeiro e o segundo lugar Então, primeiro, vamos dar uma olhada nas vantagens e nos lados fortes do coágulo. Então, primeiro, é uma refeição grátis. Você tem um certo número de mensagens gratuitas todos os dias que você pode usar. Em segundo lugar, como você viu anteriormente no quadro de cartas, conforme mostrei em uma prévia do coágulo, ele é considerado o melhor para codificação e tem a integração com o Github, embora esteja em um modo melhor no Em terceiro lugar, ele tem um modo de visualização, que significa que você pode pedir para visualizar o código, que também o torna um pouco mais conveniente para o processo. E o último recurso que ainda não abordamos, é um recurso de projetos. Isso só é permitido na versão pro e, mais tarde, vou falar rapidamente sobre isso. Portanto, os contras do Cloud, provavelmente um dos maiores e únicos que eu poderia inventar, é que ele tem um limite baixo de mensagens em um nível gratuito, porque, novamente, você pode usar a dúvida, talvez sejam 810 mensagens, e então você tem que esperar até que as novas mensagens cheguem Então, rapidamente, vamos dar uma olhada no recurso do projeto. Como você pode ver, ele está disponível apenas para a versão. Então, basicamente, ele permite que você adicione sua própria base de conhecimento, como você pode ver aqui em uma captura de tela do artigo deles Por exemplo, é um documento PDF, outro documento PDF e um terceiro documento PDF com informações diferentes que serão usadas como contexto de bate-papo. E é um recurso muito, muito incrível , porque suas respostas se tornam mais precisas à medida que levam em consideração os documentos que você forneceu. O segundo recurso em um projeto é que você pode definir instruções personalizadas. Novamente, é um recurso incrível porque você meio direciona a IA na direção de que precisa. Então, aqui estamos em Claude, como você provavelmente se lembra das aulas anteriores, mostrei que ele é muito bom com algoritmos, e conversamos e discutimos como ele mostrou uma solução analisada para nossas tarefas de algoritmo Neste exemplo, como você pode ver, pedi para criar um painel de notas no react. Por que em React? Porque nos permite ver uma prévia. Sim, e como você pode ver, ele fez um trabalho muito bom. Aqui está nosso código, e também podemos vê-lo. Temos uma barra lateral, a barra de notas e a própria nota. Quero dizer, novamente, é muito conveniente ter essa funcionalidade. Então, o segundo jogador do nosso jogo é nosso amado chat GBT. E, como você pode ver em uma arena de desenvolvimento web, ela divide o quarto lugar com um grog, o que ainda é muito bom Tudo bem. E sobre as vantagens do chat GPT, acho que o número um é que é o número ilimitado de mensagens gratuitas Sim, às vezes quando ele usa seu modelo top 04, às vezes em um bate-papo, você pode receber um aviso de que está sem mensagens gratuitas nesse modelo, mas ainda funciona em um modelo mais simples, que é muito bom porque às vezes você pode precisar de mais mensagens Sim. E a segunda vantagem é que ele tem uma qualidade de código decente, código de aço, talvez não seja tão bom quanto o clade, mas ainda assim é bom Nos contras do ha GPT, essa qualidade do código, é claro, poderia ser melhor porque às vezes me lembro de alguns dos meus trabalhos, especialmente com alguns projetos complexos que envolvem react next Bem, realmente não funcionou bem e as roupas funcionaram E, claro, não há uma prévia. Portanto, é um golpe, sim, mas é importante, novamente, entender que agora estamos abordando bate-papos de uso geral e que o GPD não é uma ferramenta para Mesmo assim, é algo a considerar. 14. Aula 5: Olá, meus amigos e bem-vindos à lição número cinco. Nesta lição, vamos explorar o bate-papo especializado para desenvolvimento web e o bate-papo com IA na web, que é zero. Então, o zero, o que é? É uma ferramenta muito poderosa para gerar UIs e códigos de alta qualidade. É uma ferramenta premium, é gratuita, mas tem algumas mensagens gratuitas, mas você também tem um limite. E depois de atingir o limite, você também terá que esperar algum tempo ou comprar uma versão profissional. Obviamente, o V zero foi produzido pela Versll, que também é desenvolvedora dos próximos Gs É por isso que o NextGS e o react são suas tecnologias preferidas, mas não são apenas o react e o next Js porque eles também oferecem suporte a outras tecnologias Então, vamos explorar rapidamente a interface do usuário. Então, novamente, como em outros bate-papos básicos, você tem o campo de entrada da interface do usuário com a ferramenta de upload de arquivos com alguns aprimoramentos de IA Além disso, há uma captura de tela do clone, importando o Figma e até mesmo fazendo o upload do projeto Isso significa que você pode fazer o upload de todo o projeto e pedir para depurar ou encontrar algumas inconsistências ou talvez oferecer alguns E há alguns porta-placas para criar a página de destino ou se inscrever. Então, vamos dar uma olhada rápida na Vzero. Portanto, para obter os melhores resultados, você precisa criar bem os prompts de entrada Na verdade, não é algo dedicado especificamente ao V zero. Como você provavelmente se lembra, são regras específicas para obter os melhores resultados em todos os bate-papos de IA Portanto, quanto melhor você orientar o Vzero, obterá os melhores resultados, mais precisos e relevantes Portanto, existem algumas recomendações da documentação do V zero. Portanto, você deve incluir a funcionalidade desejada de componentes específicos. Então, digamos que você esteja criando um seletor de cores e entenda que o seletor de cores pode ser tão simples quanto inserir um código hexadecimal ou tão avançado quanto um seletor de cores do Photoshop Por isso, também é importante especificar as preferências de design. Bem, é um pouco mais simples. Então você especifica os tamanhos, a fonte , as cores, o raio da borda, etc Em seguida, é bom que você mencione alguma biblioteca. Isso significa bibliotecas ou estruturas de terceiros que você deseja usar Portanto, ele usa o contexto dessa documentação. E também para descrever o contexto ou o caso de uso, significa exatamente como você está planejando usar o componente, porque na verdade não é algo superespecífico para Vzero, apenas uma engenharia rápida boa e apropriada Portanto, o tamanho forte, como diz o V zero em sua documentação, é uma geração de interface de usuário. Eles fazem isso com o hat CNui e as bibliotecas de terceiros recomendadas são react three fiber, framer motion Novamente, você ainda pode usar suas bibliotecas, mas essa é a melhor opção. Isso significa que sua rede neural está mais familiarizada com eles. Agora, um pouco mais sobre o suporte tecnológico. Como mostrei anteriormente, não é só o próximo GS porque dizem que está inchado, remix, embora com um pouco menos de confiança em comparação com a experiência em reagir a seguir, porque, novamente, o zero é as mesmas pessoas que desenvolvem o próximo JS E também, como você pode ver, há Python, Rust, SQL, etc Então, meus amigos, se você desenvolver outra coisa, você ainda cobre. Então, zero para desenvolvedores. Novamente, a partir de sua documentação, eles dizem que você pode escrever um código React limpo do zero, problemas de Dbag, implementar seus recursos, lembre-se de que você pode fazer o upload do projeto, por exemplo Além disso, ele pode fornecer sugestões de código e, novamente, eles afirmam que o Nexs está sempre atualizado Então, para designers, novamente, você pode adicionar seu arquivo Figma É como um recurso avançado, é um recurso pago, mas como um recurso gratuito, que exploraremos em breve, você pode adicionar sua captura 15. Aula 5 (prática): Meus amigos, e é um tempo de prática de V zero. Primeiro, vamos explorar como usar o bate-papo baseado em texto e depois praticaremos com imagens. Então, vamos embora. Bem-vindo ao aplicativo Zero. E como você pode ver, no centro, temos o campo de entrada, como você já viu no Cloud e no chat GBT Aqui você pode inserir sua solicitação. Você também pode enviar seu projeto Figma ou captura de tela do seu computador Lá embaixo, temos algumas funções pré-fabricadas como clonar a captura de tela e, novamente, importar Você pode até mesmo enviar seu projeto e também algumas instruções pré-criadas como uma página de destino criativa ou formulário de inscrição Então, primeiro, vamos tentar com um simples prompt, como criar um elemento suspenso moderno. Então, meus amigos, como você pode ver aqui, podemos criar o pmt logo antes de planejarmos usá-lo zero, e digamos que seu camarão não esteja tão bem polido, então você pode usar este pequeno Então, vamos experimentar. Como você pode ver, em alguns segundos, nosso baile de formatura simples ficou totalmente pré-fabricado, bem estruturado e pronto para ser pensado Então, vamos tentar. Então, como você pode ver, isso faz o processo de pensamento, também expandindo nosso alerta um pouco mais. Como você pode ver aqui, ele criou estruturas de projeto, regras de estilo, imagens e mídias, estruturas de formatação e bibliotecas e ainda mais algumas ressalvas E, no momento, ele faz seu processo de escrita de código e agora estamos no modo de visualização. Tara, então obtivemos nosso pequeno formulário onde podemos selecionar o país e, como você pode ver, até acho que deveríamos ter alguma funcionalidade de filtragem, que é muito bom México. Então, escolhemos o México. Por exemplo, eu escolhi o Brasil e fui Brasil e o mesmo com o idioma. Para a primeira versão, é muito bom. Como você pode ver, meu amigo, na parte superior, temos a guia de visualização, onde podemos ver as perspectivas reais do projeto em um navegador e também a guia de código Aqui temos alguns arquivos. O principal deles é provavelmente o menu suspenso pesquisável. Portanto, é nosso componente, e temos a página TSX, onde realmente preenchemos o conteúdo com países e idiomas E aqui, se você entender o código e souber o que quer fazer, você pode realmente fazer algumas alterações escrevendo o código. Então, vamos fazer algo muito simples para entender a mecânica de como isso funciona Então, vamos tentar adicionar mais um país. Está bem? Então, vamos adicionar, como você pode ver aqui, vamos adicionar a Coréia. Está bem? Então, porque temos a Coréia aqui, então vamos fazer do Ko a Coreia. Então, agora temos que salvar e ir para a guia de visualização. Então, vamos ver. Para nós temos a Coréia. Como você pode ver. Então é assim que você pode fazer mudanças simples em um código. Eu também quero te mostrar outra maneira de como você pode fazer mudanças? É por meio do prompt. Então, como você pode ver, eu inseri o prompt, mude fun para mono E, novamente, ele expandiu nosso prompt para torná-lo um pouco mais específico e fez seu trabalho, como você pode ver aqui em nosso componente principal, nosso telefone mudou para mono Uma dica rápida de que, às vezes, quando você usa algumas mensagens em sua solicitação para fazer algumas alterações, sua versão, a saída pode não ser a desejada Portanto, ou você precisa se certificar de que sua solicitação é bem específica ou usar mais instruções para explicar algo melhor. Então, novamente, como você provavelmente se lembrou de nossas lições sobre as fundações inspiradoras Agora, outro recurso muito útil do V zero é uma maneira muito fácil e conveniente navegar entre as versões. Então, no momento, como você pode ver, está escrito Versão dois mais recente. E aqui em cima, diz Versão 1, ver e restaurar. Então, vamos ver o que vai acontecer se clicarmos no botão Restaurar. Feito. Como você pode ver, ela voltou à fonte San Serif anterior E agora, se você prestar atenção, agora é a versão três, mas diz que a três foi criada restaurando a versão um Então, novamente, é uma das maneiras navegar entre as versões, caso não tenha gostado de algo ou se essa ramificação de suas atualizações não tenha funcionado muito bem. Vamos para a segunda parte desta sessão prática. Então, digamos que temos essa captura de tela da interface do usuário. Você lembra que o Figma para importar o projeto Figma é uma versão paga Então, digamos que você tenha sua UI Figma e sua versão seja gratuita, basta baixar uma captura de tela e usar uma captura de tela , conforme disponível na Então, usaremos essa captura para pedir ao V zero que a recrie. Então, estamos em V zero, e você pode fazer duas coisas a partir daqui. Então, aqui, como você pode ver, há uma captura de tela do clone Botão. Depois de pressionar esse botão, você será solicitado a adicionar sua imagem e, logo em seguida, ele começará a fazer o processo, para que você não adicione sua solicitação E digamos que você tenha suas próprias instruções. Então, nesse caso, provavelmente seria melhor usar um gráfico do computador e, em seguida, adicionar seu prompt. Então, vamos agora mesmo usar o botão de captura de tela do clone Como você pode ver, enviamos uma captura de tela. Ele pensa. E, como eu disse anteriormente, basta fazer uma captura de tela e começar a trabalhar imediatamente. Então, como você pode ver, é bem simples. Aviso, recrie a interface de usuário mostrada na captura de tela anexada Então está funcionando. Então, meus amigos, o zero terminou seu trabalho e, como você pode ver, ele recriou nossa imagem muito bem Ele tem todos os componentes. Ícones, campos de pesquisa, barra lateral e a parte principal com os nomes dos usuários E acho que na primeira iteração, ela fez um trabalho muito bom E como você pode ver, vamos ver, é até mesmo totalmente responsivo OK. Não é melhor. Então, novamente, você também pode ver o código. Por isso, ele criou o CSS plus TO WIN para configurar o arquivo principal com a página que vemos e até mesmo componentes internos , como barra lateral e cartão de usuário, que ele está usando ali mesmo E acho que, novamente, na primeira iteração, ele fez um trabalho muito bom Novamente, uma coisa muito importante a considerar, como mencionei anteriormente no início do nosso curso, não é calcular, é gerar, como versão após versão É por isso que cada iteração será diferente da anterior Por que isso é importante, porque se você solicitar cinco vezes com a mesma imagem de usuário, provavelmente receberá cinco variações diferentes do seu código. E não é necessariamente o melhor em termos de uso de código. Por exemplo, agora, como podemos ver, o cartão de usuário tem nome, nome de usuário e fonte da imagem, e acho que é muito bom. Mas deixe-me compartilhar a primeira vez que fiz isso antes. Como você pode ver, é um pouco diferente. Então tem nome, nome de usuário, ok, o Avatar UO, mas agora tem a posição Avatar, e cada cartão de usuário tem uma posição de avatar diferente. E na minha opinião, porque, você sabe, eu tenho uma experiência muito boa em CSS, é uma prática muito ruim ter, você sabe, tão estritos valores tão estritos em uma grade porque quando você usa grade, você tem que usar, você sabe, controlar isso por colunas e controlar isso por colunas e não por valores específicos como porque é muito confuso, sabe? E se você tiver, você sabe, algum número conhecido de elementos secundários em uma grade? Então, novamente, é uma coisa que você precisa estar ciente. E é por isso que, novamente, a segunda coisa sobre a qual falei é sobre a qual falei dominar as bases sólidas ou os instrumentos que você usa. Porque quando você conhece CSS, provavelmente sabe que essa é, novamente, a posição, você sabe, valores de posição codificados não são tão bons para grades dinâmicas É por isso que você vai pedir para refazer esse trabalho novamente ou encontrar alguma outra forma, por exemplo, alterar manualmente as coisas do código. E meus amigos, a última coisa que vamos dar uma olhada rápida nesta sessão são os projetos. Como você pode ver, temos a guia de projetos aqui, e eu criei apenas um modelo desse projeto. E, como você pode ver aqui, temos a mesma interface de usuário. Mas o que é importante aqui é essa pequena coisa, a configuração do projeto. Então, vamos ver o interior. Como você pode ver, ele tem várias seções. Portanto, o primeiro é um projeto verSQL, isso significa que você pode conectar um projeto VerSL e , em seguida, implantar o que você criou imediatamente. Boa, porque você pode mostrar rapidamente isso, seu protótipo, para seu cliente ou colegas Então, a segunda coisa, temos variáveis ambientais. Isso significa que se você tem algumas conexões de banco de dados ou chaves de API , você pode mirar aqui. Mas o personagem principal deste jogo é esse. É uma fonte. Isso significa que aqui você pode adicionar qualquer fonte que desejar no contexto do projeto. Portanto, pode ser documentação. Podem ser alguns arquivos de imagem, podem ser algumas inspirações, que então este é um projeto que usamos como contexto Isso significa que suas respostas serão mais precisas e mais próximas do resultado final. Então é ouro, meus amigos. Gosto muito de quando e se você se lembra de quando conversamos sobre Claude, Claude, como na versão paga de Claude, nos projetos, você também pode adicionar É o mesmo. Então é uma coisa muito boa, meus amigos. A última também, que é muito boa, são as instruções. Novamente, você pode definir algumas coisas específicas que gostaria de ter, o que também é muito bom. Então, meus amigos, este é o fim desta lição. Espero que você tenha gostado. Nos vemos na próxima. 16. Aula 6: Olá, bem-vindo à lição número seis de Assistência de Codificação Então, o que é um assistente de codificação? Então, é basicamente seu copiloto, seu ajudante, seu assistente em seu ID ou editor de código Então, em que exatamente isso pode ajudá-lo? Portanto, o primeiro, provavelmente um dos recursos mais usados, é o preenchimento automático, em que o assistente fornece sugestões de sua codificação Como exatamente funciona, ele aprende sobre seu contexto de codificação e depois tenta sugerir como qualquer outra IA Segundo, você pode escolher sua parte do código e pedir para refatorar ou melhorá-la Além disso, os bugs ajudam você a resolver os bugs, e você também pode fazer algumas perguntas ou explicações sobre seu código e alguns outros recursos, como você pode ver Esse assistente de codificação geralmente funciona como extensões em seu ID Como você pode ver, aqui está uma pequena captura de tela do código VS, então você vê as extensões, guia e vemos a codificação instalada Vamos falar sobre os mais populares. Então, o primeiro é o Github copilot, Github copilot foi o Github copilot foi o primeiro, provavelmente mais conhecido, a extensão mais popular, e costumava ser paga, mas agora é mas agora Mesmo sendo premium, ele ainda tem um nível gratuito muito generoso. Acho que são cerca de 2000 preenchimentos automáticos por mês e 50 mensagens que você pode perguntar E o segundo é um codium, que é uma extensão gratuita que você pode instalar e usar em seu ambiente de codificação Então, na próxima parte, exploraremos como eles funcionam. 17. Aula 6 (prática): Olá, bem-vindo à sessão prática com a assistência de codificação Nesta lição, usaremos o Codem. Mas você também pode usar o copiloto do Github porque eles são praticamente iguais Vamos explorar algumas das funcionalidades mais populares e podemos começar com o preenchimento automático Então, primeiro, como você pode ver, temos palavras inversas em uma string. Então, escreva uma função que reverta todas as palavras dentro da string passada nas palavras separadas por exatamente um espaço, e não haja espaços à esquerda à direita Por exemplo, esse estresse, esse Uo, como você pode ver, imediatamente começou a sugerir alguma solução, e tudo o que você precisa fazer é clicar em uma guia, depois em outra guia, e você pode até mesmo ir para a próxima string e, como você pode ver, ela foi sugerida como um registro do console. Portanto, a próxima etapa que você pode fazer é testar sua solução no terminal e fazer as outras coisas. Então, vamos para a próxima coisa que ele pode fazer. Então, digamos que agora você já tenha algum código com o qual esteja satisfeito. Então, agora o que você pode fazer é destacar o código e clicar com o botão direito. Como você pode ver, aqui temos algumas coisas. O primeiro é CodeMRFactor, bloco de código selecionado. Então, se clicarmos nele, receberemos algumas sugestões. Então, vamos começar com algo simples: adicionar comentários e docstring ao código Então, como você pode ver, está funcionando e fez alguma coisa. Eu criei como uma caneta em formato de string, a string invertida e o formato de retorno, também uma string, uma string invertida E agora o que você pode fazer é aceitar ou rejeitar. Se você clicar em Aceitar, como você pode ver, agora você tem o código com o que a codificação fez com você Então, vamos remover isso por um momento. Tudo bem, economize e tente mais uma vez. Então, novamente, refatore e vamos em frente. Torne isso mais rápido e eficiente. Vamos tentar isso. Então, como você pode ver, Ed sugeriu alguma outra solução. Não tenho certeza se é mais rápido ou não porque é um trecho de código muito pequeno, mas, em geral, ele fez alguma coisa e talvez em um algoritmo maior ou em algum tipo de código, definitivamente sugira algo mais rápido. Então, novamente, você pode aceitar ou rejeitar. Então, vamos simplesmente rejeitar, nesse caso. Então, a seguir, o que você pode fazer novamente, vamos destacar o texto e pedir ao Cdim que explique o bloco de código selecionado Agora, como você pode ver, ele abriu um bate-papo onde dá uma explicação. Então, diz que é uma função JavaScript que usa uma string como entrada e se divide em uma matriz Palavras que usam espaços como separadores invertem a ordem e se juntam aos espaços Como você pode ver, é uma definição bastante correta do que está acontecendo. Então, novamente, como você se lembra, é um bate-papo que usa IA, algum modelo de IA subjacente. Provavelmente é coágulo porque é o mais popular para esse tipo de ferramenta E agora o que podemos fazer é perguntar algo, por exemplo, sugerir uma solução diferente. Vamos e, como você pode ver aqui no chat, ele apresentou três soluções, uma, duas e três, e cabe a você decidir o que quiser fazer com essas informações. Então, vamos tentar mais uma vez. Então, estou pedindo à nossa ferramenta converta o código em texto datilografado. Então, vamos ver. E, como você pode ver, isso nos deu algumas variações. Então, meu amigo, foi uma sessão prática com o CM, e a mesma coisa vale para o copiloto do Github E se você estiver usando o código VS, você pode ver aqui na parte superior, você pode começar a usá-lo a partir daqui. 18. Aula 7 : Olá, e bem-vindo à lição número sete. Nesta lição, analisaremos os editores de código de IA, e essa será a última categoria de ferramentas que abordaremos neste módulo Então, o que é o editor de código de IA? Como você provavelmente já concluiu, é um editor de código com recursos de IA integrados. Motor de IA integrado. Imagine que você tem um código VS, mas dentro dele, máquina de IA integrada que ajuda você a codificar. E vamos explorar o único neste curso. O mais popular hoje em dia é o cursor. Então, vamos dar uma olhada rapidamente. Então, meu amigo, ao examinarmos os recursos, você definitivamente reconhecerá tudo, todas as funcionalidades que abordamos até agora, mas combinará novamente, dentro do editor de código Portanto, o primeiro é agente e, como você pode ver, o modo Agente pode concluir tarefas de ponta a ponta. Isso significa do início ao fim de forma independente. E você se lembra do V zero? É exatamente o que V zero fez, mas agora você pode fazer algo assim dentro do editor de código sem sair dele. Em segundo lugar, uma guia e, como você pode ver, é um recurso de preenchimento automático. Há até uma captura de tela aqui, e isso é a mesma coisa o pódio que vimos na lição anterior Em seguida, converse, e isso é um bate-papo GPT ou nuvem. E o último, como você pode ver, comando K, vamos editar e escrever seu código com IA, novamente, a mesma coisa que fizemos na aula de codim Mas o que é importante é entender isso, vamos analisar os preços. Há um nível gratuito e, como você pode ver, ele tem um teste de duas semanas e, durante esse teste, você pode usar 2.000 conclusões e 50 solicitações premium E depois disso, você tem uma pequena cota gratuita ou precisa ir para o nível profissional, que é pago, como você pode ver, para aproveitar ao máximo o cursor E cabe a você decidir. Você pode usar algumas ferramentas gratuitas ou, se quiser adicionar mais velocidade e conveniência ao seu processo , pode comprar o cursor. Então, na próxima lição, veremos algumas funcionalidades desse interessante 19. Aula 7 (prática): Meus amigos, antes de começarmos a aula, quero mencionar rapidamente uma pequena coisa o fato é que a tecnologia muda muito rápido hoje em dia, e a interface do editor de cursor, que vamos ver, mudou logo depois que eu gravei a aula. Então, eu só quero esclarecer as coisas para que você não tenha nenhuma preocupação durante a aula Então, meus amigos, quando vocês forem ver a aula, verão a guia de bate-papo e uma guia de compositor dentro da aula Mas, provavelmente, se você baixou ou atualizou o cursor, editor, sua interface de usuário ficará assim. Então você vai ter um agente e pedir itens suspensos. Então, são as mesmas coisas. Portanto, o bate-papo na versão antiga é o mesmo que pedir uma nova versão e o compositor na versão antiga é a mesma coisa que um agente na nova versão Então, meus amigos, novamente, as mesmas coisas, só que eles nomearam de forma um pouco diferente. Então, vamos entrar na aula. Olá e bem-vindo à próxima lição. Nesta lição, vamos explorar a IA do cursor e suas características na ação. Então, em primeiro lugar, gostaria de dizer que é uma bifurcação do código do VS, o que significa que você enfrentará uma transição bastante perfeita do código do VS para a IA do cursor Por exemplo, quando eu estava instalando isso, ele também instalou todas as extensões que eu tinha no meu editor de código VS, o que é muito conveniente. Então, a primeira coisa que vamos dar uma olhada são as configurações. Então você clica nas configurações do cursor e vai para as configurações do cursor. E, especificamente, estamos interessados nessas regras para IA. Como você pode ver aqui como um espaço reservado, você pode ver alguns exemplos de regras. Sempre use componentes funcionais de reação, e assim por diante. Aqui você deseja adicionar suas regras globais porque essas regras se aplicarão a todos os projetos em que você trabalhará dentro desse cursor. Então você tem que pensar nisso com um pouco mais de cuidado. Então, a próxima coisa sobre a qual falaremos é a continuação das regras do cursor E, especificamente, o que você gostaria de fazer é criar os arquivos de regras do cursor de pontos. Esse arquivo é muito importante se você quiser obter respostas, respostas e soluções precisas para seu projeto de codificação Na verdade, há um recurso específico dedicado na Internet. Vamos dar uma olhada rápida. Então, como você pode ver, o nome desse projeto é um diretório de cursor. E aqui, você pode ver diferentes tipos de regras. Então, vamos pegar a primeira, como você pode ver aqui, é uma perspicácia com as regras Como sua equipe sênior de desenvolvedores, especialista em react next, JavaScript, TypeScript e assim por diante Em seguida, diz, por exemplo, siga os requisitos do usuário Scalf ao pé da letra, à direita, e agora define as regras Agora, o ambiente de codificação, as diretrizes de implementação de codificação Então, o que você pode fazer aqui, como você pode ver, há uma categoria diferente, TypeScript e Python, TypeScript e Python E você pode ir em frente e dar uma olhada no que estiver mais interessado. Tudo bem, então você pode clicar em reagir e ver diferentes variações. Depois, basta copiar isso, como está nas regras do cursor. E então, quando você usar o cursor, essas regras serão aplicadas como um contexto para suas tarefas. Vamos dar uma olhada em suas características. Então, se você clicar em Comando I, você obterá, como você pode ver, um compositor. E, novamente, um compositor é um agente. Então, isso significa que ele fará algumas tarefas. Vamos pedir para fazer alguma coisa. Como você pode ver, estamos perguntando: construa uma calculadora aritmética com quatro operações matemáticas básicas Use HTML, CSS e Vanila JS. Então, agora clicamos em Enviar e vamos ver. Como você pode ver aqui, diz geração de índice de HTML. É por isso que o agente faz. Então, na verdade, faz algo em seu nome. Agora está gerando um estilo CSS. E agora é hora de um roteiro de Jazz. Então, como você pode ver, ele fez seu trabalho e também apresentou uma breve conclusão do que fez. Então, por enquanto, vamos aceitar, vamos ver o resultado. Como você pode ver, temos uma calculadora e ela parece muito boa. Belos efeitos de foco. É bem moderno. E vamos experimentar a funcionalidade, sete mais seis, 13. Incrível. Vamos deletar. Vamos fazer com que seja zero. Como você pode ver, desde a primeira iteração, ele fez um trabalho muito bom. Noite. Então, vamos tentar adicionar algumas funcionalidades usando o composer. Portanto, agora solicitaremos a adição de novas operações, como queer Root, second powers, Sinas e clients Vamos ver. Como você pode ver, ele começou a funcionar, trabalhando em um índice HTML agora. Como você pode ver, vemos a atualização. Agora, ele fez algum trabalho nos estilos e na época do roteiro. Como você pode ver, temos algumas coisas novas no script e, no final, chegamos à conclusão do If. Agora podemos revisar as mudanças, mas, no momento, gostaríamos de aceitá-las e ver o resultado por nós mesmos. Então, como você pode ver aqui, ele até os agrupou por cor porque é como uma nova categoria de operações. Então, vamos tentar. Funciona. Vamos tentar novamente. Funciona de volta. Então, como você pode ver, ele fez um trabalho muito bom. Tudo bem Então, vamos ver o próximo tipo de funcionalidade, que é o chat. Então, vamos destacar essa função, acrescentar número e, como você pode ver, ela nos ofereceu esse bate-papo e também nos deu um Então, vamos clicar aqui, você vê que tem como contexto, o arquivo de script e também as linhas específicas, para que possamos até mesmo excluir. O arquivo inteiro e tente pedir que ele faça alguma coisa. Ou seja, você poderia encontrar uma solução mais simples? Então, vamos tentar. E, como você pode ver, pelo menos nos forneceu outro código. E aqui, como você pode ver, podemos clicar em Aplicar. E então, de uma forma Git, ele nos mostra o código aplicado e o código excluído, e aqui podemos rejeitá-lo ou aceitá-lo Então, vamos aceitar por um segundo, e o novo código foi adicionado com uma funcionalidade de bate-papo. Portanto, há também uma funcionalidade familiar de preenchimento automático. Vamos clicar. A nova linha, como você pode ver, recebemos algumas sugestões. E com a guia, podemos editar ou simplesmente pular isso. Shri inst aqui, por exemplo, sim, por exemplo, aqui, sugere adicionar algum comentário e depois algum trecho de código Então, a última coisa que vamos dar uma olhada é um comando. Portanto, se destacarmos algum código e clicarmos em Comando, obteremos essa funcionalidade de bate-papo de entrada embutida E aqui, por exemplo, poderíamos dizer, explique o E, como você pode ver, obtemos uma explicação em termos de C, o que é muito bom. Então, meus amigos, em uma lição muito breve e curta, espero ter dado a vocês as principais ferramentas primárias que você pode usar dentro da IA do cursor. 20. Exercício: Então, finalmente, estamos no final do módulo e é hora de você fazer o exercício. Portanto, o exercício será bem fácil. Você tem que jogar uma vez, testar uma vez a cada dois que abordamos neste módulo. O objetivo deste exercício é que você obtenha a compreensão e a compreensão básicas de cada ferramenta. Aqui está uma simples visita ao NAP. Então, primeiro, você planeja sua ação para cada ferramenta. Por exemplo, vou fazer A na nuvem e conversar com GBT, B em V zero, C, codificação e D no cursor Navegue até essa ferramenta ou baixe a ferramenta ou as extensões e tente executar as tarefas. 21. Resumo: Então, vamos recapitular o módulo número três. Você aprendeu muito neste módulo. Especificamente, você usou todas as ferramentas de que poderia precisar em sua carreira de programador em seus processos de codificação Mas vou te dar algumas dicas importantes. Primeiro, novamente, concentre-se primeiro e sempre no desenvolvimento de habilidades sólidas de codificação, não importa em que nível você esteja Porque habilidades sólidas de codificação significam entender a arquitetura, entender os padrões, as melhores práticas, algumas formas de organizar o código, algumas maneiras de resolver coisas específicas, entendê-las, fazem de você um desenvolvedor muito bom E a IA, mesmo que a IA não forneça uma boa solução, você pode pedir para refazê-la ou, de alguma forma, editar a palavra certa. Depois disso, vá e aprenda o básico. Novamente, o básico da codificação de IA. Isso é especificamente o que você está fazendo neste curso. O que quero dizer com básico? O básico, quero dizer, os princípios fundamentais. É como o alfabeto na leitura, porque se você conhece letras, pode inventar palavras, depois frases, depois capítulos e, em seguida, o livro inteiro E você pode desestruturar o livro em elementos cada vez menores porque sabe como ele está estruturado e conhece as conexões dos elementos do sistema mesma coisa. Se você sabe como realizar tarefa simples apenas na nuvem ou no chat GPT , pode subir esse nível e usá-lo no Cdium e , digamos, no cursor E então, ao fazer essas operações básicas, você poderá desenvolver seu próprio estilo de usar a IA em seu processo. E a próxima etapa é combinar habilidades sólidas de codificação e os conceitos básicos do uso da codificação de IA, e então você pode entrar em Isso significa criar algumas combinações malucas ou como você pode fazer isso. Porque eu vi algumas pessoas no YouTube, você sabe, como elas usam essas ferramentas diferentes, e algumas delas, você sabe, seu fluxo de trabalho simplesmente não é realmente compreensível para mim E então eu estava pensando em brancos assim porque, novamente, eles finalmente chegaram a essa preferência pessoal de como combinar os elementos da combinar os elementos da IA em sua codificação, porque algumas pessoas, você sabe, podem ficar bem usando apenas codium às vezes, você sabe, terceirizando E algumas pessoas precisam de um cursor com todas essas regras de arquivo de cursor, você sabe, sempre contextualizando, tendo em contexto todo o banco de dados, desculpe, base de código e documentação e tudo mais. Algumas pessoas preferem, por exemplo, eu prefiro planejar meu código primeiro e depois dar às pequenas tarefas que a IA, você sabe, deve fazer. E outros caras, você sabe, mesmo os bons, profissionais, dizem que começam com a IA e deixam o compositor no cursor fazer o trabalho Então, novamente, é algo avançado. É uma preferência pessoal. Mas, para chegar a esse ponto, você precisa dominar os fundamentos de codificação e os fundamentos da IA E a última coisa que eu gostaria de mencionar é ter cuidado com a cova da morte. Então, como você pode ver, o poço da morte é algo metafórico O que é isso, eu vi algumas pessoas, você sabe, novamente, tentando criar o aplicativo inteiro às vezes sem planejamento, às vezes, talvez até com planejamento, mas confiando inteiramente na IA E então eles fazem a primeira iteração. Parece bom. Em seguida, eles adicionam alguma coisa. Vai bem, bom, bom, bom até o ponto em que diferentes erros, diferentes incompatibilidades na organização dos arquivos, na estrutura e talvez em algumas bibliotecas de terceiros Portanto, o número de conflitos e erros se torna tão grande que a IA não é capaz de resolver todos eles. Essa é a questão. Então é se você não tiver boas habilidades de codificação Mais uma vez, eu compartilharia minha abordagem, então planeje seu projeto. E então, peça por peça, pouco a pouco, peça à IA para ajudá-lo a me vender. Então, espero que tenha sido útil. 22. Módulo 4: introdução: Olá, bem-vindo ao módulo número quatro. Neste módulo, você aprenderá cinco maneiras pelas quais a IA pode ajudar você a se tornar um melhor desenvolvedor web e a programar com mais rapidez. Então, vamos relembrar rapidamente o que aprendemos nos módulos anteriores. Então, no módulo número dois, você aprendeu os fundamentos da IA. Então, basicamente, como usar corretamente os bate-papos de IA, como construir adequadamente um prompt, no número do módulo Três, você abordou as ferramentas de codificação de IA, como bate-papos, V zero, Codium, assistente de decodificação e Isso significa que você tem todas as ferramentas e as habilidades necessárias para usá-las. Então, nesse módulo, módulo número quatro, vamos entrar na parte do aplicativo. Então, abordaremos cinco maneiras pelas quais a IA pode ajudar você a impulsionar seu fluxo de trabalho e se tornar um desenvolvedor web mais forte. E é importante que eu diga das cinco maneiras, porque tenho pensado muito. E essas são as cinco formas principais de usar a IA. Isso significa que não há mais nada a se pensar, há algo mais? Há mais alguma coisa que eu possa fazer? Então, são cinco maneiras e tudo mais, apenas segue uma dessas cinco maneiras. Então, vamos abordá-los e espero que você aprenda a usá-los. 23. Aula 1 : Bem-vindo à lição número um. Nesta lição, daremos uma visão geral rápida que aprenderemos neste módulo. Então, no módulo número quatro, abordaremos as cinco formas mais. Eu preparei um bônus para você também. Então, a primeira coisa em que IA pode ajudar você é criar novos recursos. E, provavelmente, se você se lembra do que abordamos em um cursor, editor de IA quando pedimos ao cursor que criasse alguns recursos para a calculadora. Em segundo lugar, é refatorar o código existente porque, às vezes , novamente, no cursor, abordamos que pegamos alguma função e pedimos para simplificá-la Porque muitas vezes você precisa simplificar seu código ou, às vezes, digamos que ela codificou algumas coisas não tão familiares para você, como uma estrutura, por exemplo, novamente, em uma calculadora, ela codificou um JavaScript em classe e nem todo mundo está familiarizado com as classes, e talvez você só queira ter algumas O terceiro é muito comum corrigir bugs, diferentes tipos de bugs. Você sabe, sem comentários aqui. O número quatro é sugerir soluções. Por exemplo, novamente, você gostaria de implementar algo como, digamos que você tenha algum recurso em mente e diga: Ah, eu gostaria de construí-lo. Mas não tenho certeza de qual é a melhor abordagem ou nem entendo realmente como fazer isso. Então, você pode perguntar à IA, pode ser uma solução conceitual, por exemplo, em termos de explicação, explicação básica do que você precisa fazer, ou pode ser uma solução de codificação E número cinco e mais um bônus, é uma categoria de aprendizado, aprendizado como desenvolvedor web. Então, o número cinco é explicar o código. Digamos, novamente, que a IA tenha gerado algum código, ou você tenha pego código de algum site como Github ou talvez uma caneta de código e não tenha certeza do que ela faz, então você pode pedir para explicar E, além do primeiro, o mentor pessoal, abordaremos este capítulo especificamente Eu realmente gosto disso. É aqui que você pedirá que a IA seja sua mentora pessoal em termos de criação de um programa de treinamento E então, quando você tiver implementado alguma solução, peça para revisar essa solução. Se você se lembra de quando estávamos abordando o módulo número dois, eu estava mostrando a tarefa contar o número de palavras em uma string, tarefa JS e, na verdade, aquela coisa específica. Foi como uma orientação pessoal da IA. Então, será um módulo muito interessante. 24. Aula 2 : Olá, e bem-vindo à lição número dois. Nesta lição, exploraremos a primeira maneira pela qual AAA pode nos ajudar é criar novos recursos Então, para todo esse módulo, tomaremos como exemplo um projeto, uma página simples de comércio eletrônico Então, vamos ver. Então, meus amigos, estamos dentro do cursor e, como vocês podem ver, a parte interessante da era moderna é que tudo muda super rápido. No módulo anterior, que gravei, muito recentemente, a interface do usuário estava, como você se lembra, aqui no topo, tínhamos bate-papo, compositor e localizador de bugs, e agora a nova atualização foi lançada e agora temos Só converse aqui, como você pode ver, e o agente, que antes era compositor, está aqui e pergunta e edita também abaixo Ah, meus amigos, no início da aula, exploraremos e recapitularemos rapidamente como será o agente do cursor Works, que também é muito útil para vocês Por isso, preparei um aviso muito simples para criar um comércio. Página do produto dos livros, página deve consistir em duas partes. Lista de produtos e filtros, lista de produtos é apenas uma grade de cartões, algumas condições para cartões sobre imagem, nome, categoria e preço, as categorias aqui e algumas condições para filtros. Portanto, é um filtro de categoria para três itens, faixa de preço e disponibilidade. Portanto, também há uma tag de texto simples que usamos neste curso: HTML CSS e Manila JS. Então, vamos ver. Os estilos estão sendo gerados agora. Agora, como você pode ver no arquivo com dados, os dados GS estão sendo gerados e a última coisa é um script JS. Então, meus amigos, terminou sua geração. Então, vamos clicar em Aceitar A e ver o projeto no ambiente do navegador ao vivo. Então, meus amigos, estamos no navegador e podemos ver que ele fez sua primeira iteração, onde vemos os cartões com uma imagem, nome, categoria e preço, e filtros desse lado Então, vamos experimentar o filtro. Clicamos em ficção e vemos a ficção. Agora, vemos tudo. Vamos para crianças. Nós vemos crianças. Vamos sair do estoque. Vemos que está esgotado. Como você pode ver, aqui temos um bug. Você sabe, novamente, sobre o que falamos, é totalmente normal ter insetos. Agora vamos ver o preço. Vamos comprar, sei lá, $16, $16 a 30 e podemos ver que temos livros nessa faixa Então, vamos começar a trabalhar com a parte em que podemos adicionar alguns recursos ou fazer algumas alterações. Então, primeiro, ao adicionarmos apenas seis itens, vamos adicionar mais alguns itens. Vamos adicionar mais seis itens. E, como você provavelmente se lembra, existem coisas de contato, e podemos escolher Data JS porque os dados vêm desse arquivo. Então, vamos lá, meus amigos, vamos explorar o arquivo. E como você pode ver, temos o item número sete, oito, nove e tudo até 12. Então, mais seis itens. Então, como você pode ver aqui, temos 12 livros. Então, por meio de solicitação, fizemos algumas, neste caso, adicionando algum conteúdo Então, meus amigos, estamos em uma aula em que estamos pedindo à IA que crie alguns recursos. Então, eu criei um aviso. Vamos ver. Portanto, adicione um filtro de entrada de pesquisa por título na parte superior da página. A filtragem deve ocorrer em cada pressionamento de tecla. E, como você pode ver, ele fez algum trabalho, seja HTML, CSS e, claro, JavaScript. Então, vamos ver o resultado final. Como você pode ver, temos o campo de entrada Pesquisar por título na parte superior da página. Vamos ver. P também, o poder do hábito. Ok, vamos. Então, basta P, e ele nos mostra cada livro que tem uma letra P dentro dele. Então, estamos tentando ver 1984, e estamos vendo isso agora. Então, meus amigos, acho que vocês têm a ideia principal de que podem ativar sua ferramenta de IA. Nesse caso, é um cursor para adicionar algumas coisas. E, novamente, é importante entender que a IA não faz seu trabalho perfeitamente, mas como um primeiro rascunho. Então, em seguida, você pode usar seu conhecimento de codificação para fazer algumas mudanças Por exemplo, se você quiser alterar a largura desse campo de pesquisa ou talvez queira transformá-lo apenas como um ícone e, ao clicar nele, se expande, etc., você pode fazer isso sozinho ou perguntar à IA Espero que você tenha tido a ideia principal de como fazer isso. 25. Aula 3: Bem-vindo à lição número três. Nesta lição, vamos explorar a segunda maneira, que é refatorar o código existente. Então, vamos embora. Então, agora, quando damos uma olhada em nossos cartões de produtos, vemos que a falta de estoque não é um pouco óbvia. Portanto, a forma como vemos a falta de estoque é com as cores um pouco suaves do cartão Mas e se quiséssemos ter o estoque esgotado no mesmo local que temos outras coisas, como nome, categoria e preço. Então, vamos ver como podemos conseguir isso. Então, estamos no cursor agora e vamos dar uma olhada rápida no código. E, você sabe, olhando um pouco nosso código, pude ver que o status do produto em estoque e fora de estoque está sendo gerado aqui e outras coisas como nome, categoria e preço ali mesmo. Então, acabei de selecionar esta linha, você pode ver de 25 a 43. Então, ali mesmo, roteiro 25 43, e eu convidei um simples baile Então, eu gostaria de ter o status de estoque esgotado dentro das informações do produto da classe. Então está aí. Então, vamos ver o que ele vai fazer. Então, o cursor pensou e agora podemos ver a diferença. Então, ele removeu o estoque fora de estoque daqui de cima e o colocou ali mesmo. Então, neste momento, vamos aceitar as mudanças aqui e ali. Pressione aqui e veja o resultado no navegador. Voila. E como você pode ver, temos estoque em estoque e esgotado , que parece muito bom sem nenhum incômodo e tudo está bem claro no momento Então, vamos verificar o filtro. Então, em estoque, vemos o Istock e agora fora de estoque. Então, novamente, uma coisa importante a notar aqui é que ainda é bom entender o código porque primeiro, eu examinei o código e pedi uma alteração específica em um local específico. E para as IAs, quanto mais específico você for, melhor será a qualidade das respostas e respostas que você receberá, o que, novamente, economizará muito tempo e esforço. E essa é uma das coisas pelas quais você pode construir mais rápido duas ou até três vezes. 26. Aula 4: Bem-vindo à lição número quatro. Nesta lição, vamos explorar a terceira maneira pela qual a IA pode nos ajudar. É a correção de bugs. Então, vamos embora. Então, estamos em nosso aplicativo de livraria e, como você pode ver, quando passamos o mouse sobre os livros que estão fora de estoque, recebemos esta mensagem Por alguma razão, temos um livro sobre lagartas com muita fome. Por alguma razão, vemos o Arista aqui, e como você pode ver aqui, quando eu passo o mouse sobre ele, temos um comportamento muito estranho Nosso objetivo é fazer algo com isso para corrigir esse bug. É importante afirmar que, como você viu no início deste módulo, IA criou o código com esse bug desde o início, e agora estamos vendo a ação ao vivo. Como você pode trabalhar com isso? Então, meus amigos, estamos no cursor. E, novamente, voltando ao que eu estava falando com vocês sobre todo o curso: a primeira coisa que acontece primeiro são habilidades sólidas de codificação É entender como o projeto é construído, entender as conexões. E padrões comportamentais de cada parte do seu aplicativo. E então, é claro, eu entendo que a ação de passar o mouse vem do CSS Então, primeiro, o que vou tentar fazer é procurar as coisas flutuantes E, como você pode ver, temos que controlar os comportamentos em nosso estilo O primeiro são os filtros, e sabemos que não é isso. E o segundo, o cartão do produto, e podemos ver aqui, ele apenas faz uma tradução simples Significa que sobe ou desce. Então não é isso. Então, a seguir. Então, de onde tiramos isso? Então, provavelmente, como não temos isso em nosso HDML gerado programaticamente, ele deveria estar aqui E isso provavelmente é antes, o que não temos, ou depois do nosso elemento puta E Voala, nós buscamos o que queremos. E é exatamente isso que procuramos , porque diz que está em estoque e tem a cor avermelhada Então, vamos fazer o que é comum : remover esse código da compilação para o navegador e ver o resultado E, como podemos ver, ele fez o trabalho. Não vemos isso fora de estoque. Então, novamente, trata-se de conhecer seu ofício, e agora vamos para a parte de IA. Então, estamos de volta ao nosso editor e, como você pode ver, eu descomentei o pseudo-elemento after. Então, temos esse bug de volta. Então, vamos até a IA para obter ajuda. E, como você pode ver, não estou definindo nenhum contexto, nenhum arquivo, nada, porque vamos supor que não sabemos de onde vem esse erro. E eu defino o prompt com uma linguagem natural. Eu digo que, ao passar o mouse sobre o cartão com o status de esgotado, vejo o bloco informando esse Remova-o. Não devo ver nada em Hovered Então, meus amigos, uma linguagem natural bem simples. Então, vamos ver o que ele vai fazer. Meus amigos, ele fez o trabalho e, como você pode ver, agora, antes de aceitarmos a alteração, ele removeu exatamente esse bloqueio que nós mesmos fizemos. Então, vamos aceitar isso. Desapareceu e vamos ver o resultado. Estamos em nossa livraria e não há nenhum status de falta de estoque Novamente, meus amigos, como você pode ver, quando você conhece o código, é muito mais fácil navegar pelas ações da sua IA. 27. Aula 5: Venha para a lição número cinco. Nesta lição, vamos explorar a quarta maneira pela qual a IA pode nos ajudar. Portanto, é uma sugestão de soluções e melhores práticas. Então, vamos ver como isso funciona. Então, estamos em nossa página de eCom, e a funcionalidade muito comum que as lojas modernas têm é um botão ou botão para adicionar à lista de desejos em algum lugar do cartão E digamos que queremos adicionar algo assim, não temos certeza de qual é a melhor maneira ou não temos certeza em geral. E gostaríamos de receber uma sugestão de solução da IA. Vamos. Então, estamos dentro do cursor no SAI e o que é importante saber. Então, antes, usávamos um modo de agente para gerar arquivos em código. E neste caso em particular, gostaríamos de obter uma espécie de consulta. Então, temos que ir para o modo de pergunta. Está bem? E antes de prosseguirmos, é uma boa prática definir um contexto para a base de código. E quando seu projeto é muito grande, às vezes você não tem certeza de como exatamente vai fazer algo, então é melhor que a IA tenha uma visão geral, que é sua base de código. Portanto, é um aviso bem simples, ou seja, eu gostaria de adicionar que o botão da lista de desejos no cartão deve ser um ícone rígido SVG Qual seria a abordagem adequada? Dê-me o roteiro de implementação desse recurso. Novamente, não é uma implementação da funcionalidade do código. É uma espécie de consultoria. Vamos. Então, a IA terminou seu trabalho e agora temos algumas explicações. E isso explica que você pode adicionar um novo conjunto. Ele fornece algumas marcações, estilos, tratamento de eventos e algumas etapas, você sabe, para implementar isso Novamente, como eu disse antes, era uma prática de consultoria. Portanto, depende de você o que você gostaria de fazer nesta etapa. Se você gosta e gostaria de fazer isso sozinho, você pode ir. Mas, por exemplo, você está se sentindo preguiçoso ou algo que não tem certeza de que pode fazer isso sozinho, você pode voltar ao modo agente e fazer isso Então, meus amigos, digamos que eu gostei da sugestão, e depois entrei no modo agente e disse algo assim. Eu gosto da sugestão, vá em frente e implemente isso. Portanto, ele implementou o código como vimos anteriormente. Eu aceitei isso e vamos ver o resultado final. Estamos em nossa livraria e ela tem uma funcionalidade incrível, conforme você solicitou E o importante é entender que, no caso de pedir sugestões de soluções ou as melhores práticas, às vezes você pode simplesmente usar, clade ou conversar com o GPT, especialmente se for algo comum Digamos que você queira solicitar a autenticação em seu aplicativo e, em seguida, pergunte sobre um caso específico. Então, em termos gerais, estou usando o Next Jazz, o que seria a melhor autenticação para SAS, como 100 a 1.000 usuários. E você também pode indicar seu orçamento, por exemplo. Então, novamente, até mesmo o Cloud ou o Cha GPT lhe darão, você sabe, algumas sugestões sobre como escolher a tecnologia certa O mesmo acontece com as melhores práticas, por exemplo, você planeja adicionar algumas imagens ao seu site Você pode ir e pedir as melhores práticas. Digamos que você esteja criando uma página de destino, que tipo de gráfico é a melhor maneira de usar a combinação Web PP e GJPG SVG, ou estratégias de renderização Então é mais ou menos assim, meu amigo. Portanto, você precisa escolher a tecnologia echo AI de acordo com sua tarefa 28. Aula 6: Olá, e bem-vindo à lição número seis. Nesta lição, vamos explorar a quinta maneira pela qual IA pode nos ajudar é explicando nosso código. Então, vamos começar. Então, estamos no cursor em nosso projeto que temos feito ao longo deste módulo. E digamos que gostaríamos de obter uma explicação para o nosso roteiro. É muito fácil, como você pode ver, basta pedir um comando, eu e você recebemos seu bate-papo. É importante escolher a opção de perguntar porque gostaríamos apenas de obter algumas informações sobre a explicação. E, como contexto, sim, selecionamos especificamente o script z porque gostaríamos de obter uma explicação para esse arquivo específico e simplesmente digitar é simples. aviso muito simples, na verdade, explique o código e vamos pressionar Enter. Como você pode ver, comecei a nos dar uma explicação. E, claro, você pode ler essas explicações uma por uma e começar a entender e obter seus insights Então, outra forma de pedir à IA que nos ajude a explicar o código é por meio do seguinte. Digamos que obtemos a função, destacamos isso e clicamos em Comando e obtemos esse pequeno campo de entrada. Então, é como uma forma local de fazer com que a IA faça por você. Então, aqui, novamente, pedimos que ele explique o código e clique em Enter. E, como você pode ver, ele nos fornece uma espécie de comentários embutidos que podemos ler Honestamente, essas duas formas funcionam e a mesma coisa que você pode fazer com uma extensão de códio, que abordamos Mas minha preferência pessoal, quando costumo pedir para explicar o código, se for algo muito rápido, eu poderia usar essa funcionalidade embutida Mas, principalmente quando tento entender o código, gostaria de dar mais atenção a ele e prefiro usar o chat GPT Oh, meus amigos, estamos dentro do chat GPT. E, novamente, aqui, ao fazer a solicitação, você pode ser explícito com sua solicitação ou usar instruções muito curtas, que geralmente explicam o código Quanto mais baixo, por exemplo, neste momento, pedi para explicar o código abaixo para um iniciante Às vezes, eu poderia explicar o código abaixo de forma explícita, algo assim Então, geralmente é o suficiente porque, como falamos anteriormente, se você tem uma experiência, às vezes você entende o quadro completo e talvez precise dos detalhes. Então, vamos ver o que ele vai fazer. Como mencionei anteriormente, o que eu realmente gosto no Chad GPT para essa tarefa específica é porque, como você pode ver, está dividindo nosso código Você vê os destaques de código muito convenientes que você pode ler e, em seguida, você sabe, pode fazer algumas perguntas adicionais sobre algumas coisas específicas que você não entendeu bem. Então, novamente, é apenas uma preferência pessoal. Eu só gostaria de compartilhar com você. 29. Aula 7 : Olá, meus amigos, e bem-vindos à lição número sete. E nesta lição, gostaria que você compartilhasse forma adicional de como você pode usar IA que pode ajudá-lo a se tornar um desenvolvedor melhor e mais eficaz. Então, vou mostrar como você pode usar a IA como seu mentor pessoal de IA Então, observe rapidamente que, se você se lembrar dos tempos anteriores à IA, às vezes quando fazia algum projeto ou estava aprendendo algum material novo, provavelmente muitas vezes teria algumas perguntas específicas sobre alguns detalhes ou porque gostaria de entender algo ou talvez alguns detalhes da implementação. E não está muito claro para um iniciante em algum novo tópico ter uma visão geral para entender esses detalhes E, como antes, eu usava alguns fóruns, alguns grupos privados de programação onde eu fazia perguntas e obtinha respostas de pessoas reais E, novamente, pode ser algo muito pequeno ou até mesmo uma preferência. Portanto, não é algo específico em que você obterá uma resposta opinativa, não é algo específico E agora, com a era da IA, isso mudou o jogo para nós, porque agora você pode ter um nós, porque agora você pode ter desenvolvedor web sênior com muitos anos de experiência com uma enorme base de código e é como um cérebro Isso poderia responder a muitas, muitas de suas perguntas. Então, vamos dar uma olhada. Então, para isso, eu prefiro usar o chat GPT porque, novamente, é gratuito Tem mensagens ilimitadas e geralmente é o suficiente quando eu gostaria usar uma oportunidade de orientação Então, como você pode ver aqui, eu gostaria de te mostrar. O prompt inicial é bem básico. Portanto, liste o projeto iniciante para praticar o posicionamento CSS e o modelo de caixa Então, digamos que é um novo tópico em que você acabou ler um período, sabe, como um capítulo no MDN Docs e alguns artigos, e depois gostaria de praticar para entendê-lo um pouco mais profundamente E é por isso que estou pedindo para listar, você sabe, um projeto para iniciantes praticarem essa coisa E agora poderíamos até mesmo, você sabe, dar um passo atrás e pedir para melhorarmos essa solicitação usando a fórmula de solicitação que aprendemos anteriormente, o exemplo do contexto da tarefa, e eu estou perguntando Portanto, a primeira etapa da solicitação é usar a fórmula para solicitação, contextos de teste e exemplar, reescrever a solicitação abaixo de acordo com essa fórmula e eu estou declarando e eu estou E, como você pode ver, ele faz alguma expansão para contatos de tarefas e exemplares, e agora recebemos o prompt final Portanto, agora parece bastante expandido. Então, você pode sugerir um projeto amigável para iniciantes que ajude a praticar posicionamento CSS e o modelo de caixa? Exemplos poderiam ser. Então, vamos tentar juntos, usar esse prompt. Então, vamos copiar isso. Isso e veja o que vai fazer. Incrível. Ele terminou seu trabalho e, como você pode ver, temos algumas ideias de projetos como layout de cartão, barra de navegação simples, rodapé fixo e assim por diante Então, nada mal, na verdade não é uma ideia ruim para praticar. Agora, digamos, por exemplo, que escolhemos alguns deles e, novamente, não temos certeza de como partir desse ponto. Então, a próxima coisa entra em jogo. Agora, vou mostrar a vocês o segundo baile de formatura que eu uso com muita frequência, e a versão básica é assim Crie um tutorial passo a passo com instruções e explicações explícitas nome do projeto no aplicativo List no Jazz e eu também costumo afirmar que sou iniciante Tudo bem E, novamente, ele reescreveu isso, e agora temos um prompt praticamente unificado para IA Agora podemos usar esse prompt muito bem estruturado e usá-lo com uma combinação de projetos que gostaríamos de praticar. Então, vamos ver a versão final. Portanto, a frente fica assim crie um tutorial passo a passo amigável para iniciantes com instruções e explicações explícitas para criar dicas de ferramentas somente para CSS Portanto, este é um projeto que ele sugeriu. E na segunda parte, o tutorial, deve abordar a configuração da estrutura HTML, estilo com CSS e qualquer outra coisa que você considere importante Certifique-se de que cada etapa seja claramente explicada. Então, vamos ver o que ele vai fazer. Então, o Chat GBT fez seu trabalho e, como você pode ver, recebemos o tutorial passo a passo, que podemos começar a praticar imediatamente Então, obteremos a primeira etapa , o código HTML, e as explicações, a segunda etapa com CSS. Novamente, com comentários. Etapa três, explicativa, CSS e etapa quatro, como testar isso Além disso, deu a você as próximas etapas. Acho que, no geral, é um sistema muito bom para praticar alguma coisa. E a última coisa que eu gostaria de compartilhar com vocês nesta lição é o seguinte. Então, digamos que você esteja aprendendo algum assunto, e o novo conceito tenha sido abordado, e você tenha entendido um pouco disso. Então, por exemplo, muito recentemente, eu tenho aprendido sobre estratégias de renderização nas próximas páginas Então, depois de ler, você sabe, a documentação, assistir a alguns tutoriais, alguns vídeos explicativos, tento verificar se entendi corretamente esses conceitos E isso é o que eu costumo fazer. Então, aqui está como eu verifico minha compreensão do assunto. Então, por exemplo, como eu disse anteriormente sobre as próximas estratégias de renderização do es Portanto, há quatro principais. Então, digamos que eu escreva meu resumo. SSR é o padrão, CSR NAS climb, da da, da, e então o que eu costumo No final das contas, estou correto ou apenas, você sabe, de forma abreviada, correto. E então eu vejo a resposta da IA. Então, como você pode ver, você está quase certo, mas há um pequeno esclarecimento sobre o SSR E ele começa a te dar seus comentários, e então você pode conversar com ele, você sabe, fazer algumas perguntas adicionais até obter o material da maneira certa. Então, espero que isso tenha sido útil. 30. Exercício: Meus amigos, é um momento de exercícios. É hora de você praticar o que abordamos neste módulo. Você aprendeu muito. A tarefa é bem simples. Portanto, seu objetivo é testar cada uma das maneiras que aprendemos pelo menos uma vez, meus amigos, pelo menos uma vez, para que você tenha a compreensão e a sensação básicas. Então, primeiro, vá em frente e crie um projeto. Novamente, sugiro que você use o chat GPT, por exemplo, e peça algumas ideias de projetos Idealmente, se for algo pequeno, porque, novamente, sua principal tarefa é praticar a mecânica, entender os princípios e os fundamentos, e então você pode aplicar isso em algo maior Depois disso, seu objetivo é planejar as interações que você vai usar. Deixe-me dar um exemplo. Portanto, o primeiro passo pode ser depois criar um aplicativo que deseja criar, por exemplo, novamente, usamos a página de comércio eletrônico. Então, você pode pedir à IA que crie um aplicativo como desenvolvedor web iniciante e, para isso, você pode usar o cursor Depois, você pode perguntar em alguns recursos, o que for mais conveniente para você. Em seguida, você pode pedir para refatorar o código como desenvolvedor web sênior porque, novamente, antes era como iniciante Então você pode criar alguns bugs e pedir para corrigi-los, ou se você encontrar alguma caixa, tentar, você sabe, talvez pensar algumas maneiras criativas de como você pode lidar com isso. Depois, você pode pedir que ele o aconselhe sobre alguns recursos que você pode adicionar a esse projeto e, no final, praticar a explicação do código. E meus amigos, eu realmente sugiro que vocês usem ferramentas diferentes. Então, novamente, porque a ideia principal é encontrar seu próprio tipo de estilo, algo que se adapte a você. Então entre e comece o exercício. 31. Módulo 4: resumo: Parabéns por terminar com o módulo número quatro. E nesse ponto, você está equipado com tudo o que precisa para criar projetos com IA com sucesso porque, em primeiro lugar, aprendeu as ferramentas de IA que podem ser usadas em seu trabalho, como bate-papos, assistentes de codificação e editores de código de IA Além disso, você aprendeu as formas específicas usar essas ferramentas em seus projetos e agora é hora de realmente praticar. 32. Módulo 5: introdução: Olá, bem-vindo ao módulo número cinco. Neste módulo, vamos exportar duas velocidades de geração de código. Então, meus amigos, nas lições anteriores, vocês aprenderam com sucesso os fundamentos da IA. Em seguida, você aprende as ferramentas de codificação de IA, como bate-papos, editores de código, bate-papos especializados e assistentes E no módulo anterior, você abordou as cinco maneiras de usar a IA para codificação Isso significa que agora você tem instrumentos e sabe exatamente como usá-los. Bem, é hora de explorar a rapidez com que você pode usá-los. Então, no Módulo cinco, abordaremos a primeira e a segunda velocidade, chamadas de uso da IA , e qual delas escolher. 33. Aula 1 : Bem-vindo à lição número um. Nesta lição, daremos uma visão geral rápida do que abordaremos no módulo. Então, basicamente, a primeira velocidade que eu chamo é quando você tem o processo de copiar e colar Isso significa que você está gerando algum código no Cloud ou no GBT de bate-papo e, em seguida, cole no seu editor de código Então você tem algum erro. Novamente, você cola esse código no chat ou talvez no vZeroeplore algo e depois o cole novamente. E a segunda velocidade, o que eu chamo de não copiar e colar. É quando você está usando algo dentro do seu editor de código, por exemplo, algo como o assistente de codificação ou até mesmo o editor de código AI Neste módulo, falaremos sobre os diferentes lados da primeira velocidade e da segunda velocidade, prós e contras, porque o que você escolher é sua preferência pessoal dependendo de suas condições específicas. 34. Aula 2 : Bem-vindo à lição número dois. Nesta lição, vamos explorar a primeira velocidade. Então, como dissemos anteriormente, a primeira velocidade é quando você basicamente copia e cola o código para frente e para trás, vai ao chat, faz alguma geração e análise de código e, em seguida, vai ao editor de código, cola lá e verifica se tudo está Então, primeiro, vamos abordar alguns lados bons e fortes. Obviamente, há um maior controle na compreensão porque você está realizando cada tarefa específica, uma de cada vez. , é ótimo para aprender, Novamente, é ótimo para aprender, porque há uma abordagem granular e, em cada etapa do processo, você pode parar, pensar, testar e depois ir mais longe O outro lado bom é que você pode usar praticamente qualquer bate-papo que quiser, Chat GPT, Claude ou até mesmo Gemini ou Deep seek Então, você é meio que independente da sua escolha de ferramenta. Obviamente, novamente, como essa é uma abordagem granular, há menos risco de que algo inesperado aconteça ao verificar cada etapa, cada modificação do seu código Agora, o lado fraco, os contras. Então, é claro, o fluxo de trabalho será um pouco lento porque você precisa ir ao chat, colar, gerar o código, copiar e voltar. Além disso, isso requer mais atenção de sua parte, novamente, porque cada pedacinho de código, você precisa verificá-lo, colá-lo, certificar-se de que cada pequeno caractere, incluindo colchetes, colchetes, esteja incluído e que nada esteja sendo E, novamente, como exige mais atenção de você e muitos movimentos, há mais chances de cometer erros. Então, para concluir, essa primeira velocidade é a mais adequada para iniciantes em codificação e, especialmente, iniciantes em IA Então, novamente, mesmo se você for um desenvolvedor experiente, mas não tão experiente em IA, vá em frente e comece com a primeira velocidade. E a segunda coisa, se você tem um orçamento ou não, é um ótimo lugar para começar pois eles são praticamente gratuitos. 35. Aula 3: Lição, vamos explorar a segunda velocidade. Então, basicamente, como dissemos anteriormente, a segunda velocidade é quando você não tem nenhum processo de copiar e colar Tudo acontece dentro do seu editor de código. Lembre-se de Cdium ou cursor, então você provavelmente entende do que estou falando Primeiro, vamos começar com o tamanho forte novamente. O principal é um fluxo de trabalho mais rápido pois tudo acontece dentro do seu editor de código. Você pode refatorar o código imediatamente, usar o agente se for o cursor Obviamente, você tem um bom recurso de preenchimento automático porque, novamente, o códio ou o cursor conhecem o contexto do seu projeto e podem sugerir imediatamente algo em seus estilos ou roteiro Novamente, falando sobre o processo de correção de erros, é mais fácil porque ele conhece sua base de código e pode sugerir uma solução adequada muito mais rapidamente por causa disso. E você comete menos erros porque muitas coisas aconteceram no lado da IA. Agora, os lados fracos. Então, novamente, se você gosta de controlar cada parte do seu código, você se sentirá um pouco desconfortável porque a IA cobertura muito boa do seu código, como você provavelmente se lembra do nosso curso de essens Em seguida, se você estiver usando muita codificação de IA em seu processo em geral, poderá iniciar seu nível de habilidade porque a IA faz tudo por si mesmo Em seguida, é claro, você pode obter algumas alterações inesperadas no código porque, novamente, especialmente se você estiver usando o agente, ele pode reescrever muitas partes do seu código E a última coisa, então você está começando a depender de alguma ferramenta específica, como o cursor, que talvez seja boa e talvez não tão boa. Cabe a você decidir, mas é a realidade. Então, recapitulando, a segunda velocidade é mais para programadores experientes e experientes no uso de IA, além de ter um orçamento porque eles são pagos, especialmente se você estiver escrevendo muitos 36. Aula 4: Bem-vindo à lição número quatro. Nesta lição, falaremos um pouco sobre qual velocidade escolher, porque às vezes ainda não está claro o que e como. Então, recapitulando rapidamente, como afirmamos anteriormente, é mais como uma afirmação canônica de que a primeira velocidade é adequada para iniciantes e codificação em IA, e se você tiver algumas restrições orçamentárias, a segunda velocidade é melhor para programadores experientes e usuários de IA que têm algum orçamento para usuários de IA que No final, gostaria de sublinhar isso novamente. Mesmo quando você se tornar desenvolvedor experiente e um usuário experiente em programação de IA, ainda é uma questão de preferências pessoais que serão baseadas em sua exploração dessas ferramentas, suas abordagens de codificação em geral e em sua Porque, novamente, como eu disse anteriormente, existem desenvolvedores experientes que confiam totalmente em um cursor para criar quase todo o projeto para eles. Como dizem, 90% do código é escrito por IA e, em seguida, eles simplesmente verificam e executam alguns desenvolvedores experientes Eles podem usar apenas, por exemplo, Cdium e acham que é o suficiente para eles, talvez apenas com um pouco de torrão. Então, novamente, ambos são desenvolvedores maduros experientes e bem-sucedidos, mas a abordagem das ferramentas e o uso da IA podem ser muito diferentes porque, novamente, é muito importante entender que, às vezes, à primeira vista, quando você não tem tanta experiência com IA, primeira vista, a IA pode ser muito rápida em criar alguns recursos de código, e você diz, tipo, Nossa, estou me movendo tão rápido. Mas então você pode encontrar algum problema no código ou alguma conexão entre seus módulos, subsistemas que não estão realmente entendendo por que isso ocorreu e alguns possíveis problemas de codificação, e você passará muitas horas tentando entender e resolver esse problema, o que negligenciará o tempo na parte de geração de código Novamente, você tem que ter cuidado e me deixar compartilhar minha abordagem pessoal, como eu faço pelo menos nos dias de hoje. Então, como você pode ver, esse quadrado com uma borda grossa, digamos que seja um projeto. É um pequeno excesso ou aplicativo web que estou criando. E os pequenos quadrados dentro dele algumas partes desse aplicativo, por exemplo, alguma parte de autenticação, rotas, API e assim por diante Então, geralmente planejo meu projeto em algumas partes. E, claro, você não pode planejar todo o projeto desde o início porque é impossível. Quero dizer, é por isso que é algum tipo de planejamento flexível. Eu meio que não sou como no começo, preciso de autenticação, preciso de um front-end para algumas páginas e algumas APIs para buscar os dados E então eu começo, você sabe, então meu projeto já tem alguma estrutura, há alguma divisão das preocupações. E funcionalidade. E então eu posso dizer, por exemplo, nesta parte, eu vou usar IA, e essa parte, eu vou fazer isso sozinho porque, por exemplo, a partir do último dos meus últimos projetos, eu poderia ter um código de boa qualidade e alguma solução que já foi implementada, como é o caso, por exemplo, da autenticação ou tipo stripe para sistemas de pagamento. Sim. E para algumas coisas novas, você sabe, você poderia dizer, eu costumo dizer isso. Ok, vamos tentar isso com IA. E, novamente, eu prefiro uma abordagem mais granular. Isso significa que eu poderia dividir até mesmo essa, você sabe, parte do projeto em subpartes e tentar resolvê-las peça por peça Nesse caso, eu sempre tenho esse controle sobre meu código e projeto. E também uma das boas recomendações, como você provavelmente sabe, mesmo quando você faz uma pequena alteração, é bom conferir no navegador. Como está funcionando de forma adequada? Porque se você fizer, digamos, dez alterações, então, em alguma coisa, não está funcionando, você tem que depurar todas as dez alterações, que não é muito eficiente Então, novamente, como você pode dizer, é uma combinação de abordagens. Espero que você encontre algo sozinho. E, novamente, às vezes é bom conversar com seus colegas, especialmente mais experientes do que você, especialmente mais experientes do que e ver como eles abordam, você sabe, o uso dessas ferramentas E então você pode, você sabe, copiar algumas partes, testar algumas partes e ver se elas se encaixam em você. 37. Módulo 5: resumo: Parabéns por terminar com o módulo número cinco. E espero que você já tenha decidido com que velocidade gostaria de seguir as práticas de codificação E desde o próximo módulo, estamos iniciando as sessões práticas. Nos vemos lá. 38. Módulo 6: introdução: Bem-vindo ao módulo número seis. Neste módulo, consolidaremos todo o conhecimento que você adquiriu ao longo do curso criando um aplicativo web simples usando IA, e analisaremos esse fluxo de trabalho passo a passo 39. Aula 1 : Bem-vindo à lição número um. Nesta lição, apresentaremos uma visão geral rápida do que vamos fazer. Então, meus amigos, vamos criar algo muito simples porque nosso principal objetivo é praticar a mecânica do uso da IA em seu fluxo de trabalho de criação de aplicativos web Vamos criar um aplicativo de contador simples com um pouco de funcionalidade. Porque, nesse caso, é familiar para você, e então você pode se concentrar em coisas especificamente dedicadas ao fluxo de trabalho de uso da IA em seu código e não em como implementar algo específico relacionado ao aplicativo em si. Como eu disse anteriormente, eu realmente prefiro o aprimoramento progressivo em tudo o que eu construo, porque se você optar por algo muito simples, dois mais avançados, passo , entenderá toda a cadeia de suas operações e sempre poderá depurar ou ir para algo mais simples do que Então, quando vamos praticar isso? Noções básicas sobre a integração da IA em seu fluxo Posteriormente, você poderá praticar uma, duas, três vezes e, em seguida, verá algumas coisas que funcionam especificamente para você e, posteriormente, poderá avançar em algo mais complexo 40. Aula 2 : Bem-vindo à lição número dois. E aqui está nossa etapa número um em nosso fluxo de trabalho de IA. A etapa número um é planejar uma funcionalidade do seu aplicativo web. Minha dica número um para você é sempre fazer seu planejamento em um papel com lápis ou caneta. Por quê? Porque é a maneira mais simples e rápida de começar o projeto Porque nesse caso, você realmente não se concentra na parte tecnológica de como tornar as coisas bonitas. Basta escrever seu esboço para criar a versão básica do que você gostaria de ter em seu projeto Então, em nosso exemplo específico, estamos criando um aplicativo de contador e planejaremos nossa funcionalidade. Então, vamos ter algumas coisas usuais. Portanto, temos uma funcionalidade como um botão dois mais um, menos um, depois mais dez menos dez e, em seguida, mais e menos Então é lindo. E nessa etapa, já temos algumas coisas que gostaríamos que nosso aplicativo fizesse. E as mesmas coisas se aplicariam a todos os seus outros projetos. Você, mais uma vez, pega papel e caneta e começa, sabe, imaginar o que gostaria que seu aplicativo fizesse e a escrevê-lo em palavras simples 41. Aula 3: Bem-vindo à lição número três. Portanto, a segunda etapa do nosso fluxo de trabalho é planejar nossa interface de usuário e o layout de nossos componentes e alguns elementos. Então, novamente, como na etapa anterior, faça seu primeiro esboço em um papel porque, novamente, você se concentrará em como fazer rapidamente a coisa principal que precisa fazer e não vai pensar em cores, você sabe, tipografia e, você sabe, elementos bonitos Você só fará o básico de que realmente precisa em seu projeto Então, no nosso caso, novamente, estamos usando lápis e papel. Então, como na maioria dos aplicativos de contador, temos o valor. Então, como de costume, temos botões de mais e menos por perto e, em seguida, alguns botões logo abaixo, mais dez menos dez mais aleatório e menos aleatório Então é basicamente isso. Então, basicamente pegamos nossa funcionalidade, o que fizemos na parte, na primeira etapa, e depois pensamos em nossa interface de usuário e a implementamos em um papel. O mesmo se aplicaria a qualquer outro projeto que você vai fazer. Basta fazer isso da maneira mais simples possível na primeira etapa. 42. Aula 4: Bem-vindo à lição número quatro. Portanto, a terceira etapa do nosso fluxo de trabalho é escolher nossa tag de texto e pacotes de terceiros Então, meus amigos, como vocês podem ver, essa parte não vem logo no começo, mas um pouco mais ao longo do caminho, porque a parte de implementação é muito específica do que você prefere, com quais tecnologias você pode trabalhar. Mas, novamente, a parte mais importante é a funcionalidade do seu aplicativo e, claro, o layout, que vem em primeiro lugar. Então, nessa etapa, o que você pode fazer é escolher sua tag de texto Podem ser algumas linguagens de ramping, tecnologias de estilo, estruturas, sim, bibliotecas de terceiros, e até mesmo algumas pessoas poderiam pensar Então, o local onde eles gostariam de hospedar o aplicativo, talvez alguns processos do CICD, mas, novamente, depende de você nesse momento Então, no nosso caso, novamente, como mencionei anteriormente, vamos usar HTML, CSS e J Script por motivos de simplicidade. E também o que é importante mencionar, por exemplo, novamente, levando em consideração a estrutura de aprimoramento progressivo, digamos que o GaiNUR gostaria Eu gostaria de criar o aplicativo de contador e, em seguida, digamos existe uma biblioteca que poderia fazer com que o aplicativo pudesse fazer com que os números mudassem, não apenas alterando o conteúdo do texto de entrada de texto, desculpe, mas de alguma forma eficaz. Em seguida, você pode adicionar essa biblioteca ao seu projeto, mas implementá-la posteriormente. Então, primeiro, você implementa ainda a versão básica e, em seguida, pode progredi-la aprimorá-la para uma versão sofisticada Vai ser um pouco mais fácil porque, novamente, a funcionalidade vem primeiro e os efeitos vêm depois. 43. Aula 5: Oh, bem-vindo à lição número cinco. Portanto, a etapa número quatro em nosso fluxo de trabalho é uma parte estimulante Então, anteriormente, definimos a funcionalidade, interface do usuário e o layout, a pilha de texto, e agora é hora de escolher as ferramentas de IA Novamente, agora você já chegou a esse ponto, então você meio que sabe que tipo de ferramentas temos e em qual situação você pode querer usar o quê? Então, para esse projeto específico, novamente, poderíamos usar o Cloud como um bate-papo e , em seguida, copiar e colar o código em nosso DE, e poderíamos usar o V zero ou o cursor. Nesse caso específico, escolheríamos zero. Mas, novamente, você pode escolher o que quiser. E é importante mencionar que, nesse estágio, você pode pensar, por exemplo, usar uma solicitação de texto, adicionar sua imagem da interface de usuário à IA ou alguma combinação dessas duas abordagens Como você se lembra da etapa número dois, em que estávamos criando nossa interface de usuário e layout, é algo parecido com isso. Tudo o que fiz foi salvá-lo como uma imagem para torná-lo uma espécie de captura E essa captura de tela, vamos adicionar a V zero, pedindo para recriá-la. Então, meus amigos, estamos dentro do zero. Como você pode ver, fiz o upload uma captura de tela do nosso aplicativo e, em seguida, solicitei uma coisa simples: criar um aplicativo de contador, usar uma imagem carregada como referência, HTML de texto, HTML de texto Então, vamos ver o que ele vai fazer. Então, o V Zero terminou de pensar, e nossa imagem de maquete para interface do usuário foi praticamente recriada conforme pedimos Então, vamos verificar a funcionalidade. Então, como vocês podem ver, meus amigos, funciona muito bem, especialmente considerando que é nossa primeira iteração. E só para adicionar novamente, você pode usar o coágulo para isso E, por exemplo, o clot às vezes não consegue fornecer uma prévia, então você pode simplesmente copiar e colar o código em seu ID e verificá-lo lá, ou você pode usar o cursor se estiver usando cursor para obter praticamente o mesmo resultado 44. Aula 6: Bem-vindo à lição número seis e a última etapa, que faz parte da iteração, é editar e ajustar a saída que você obteve da sua IA Então, digamos que gostaríamos de adicionar um botão de reinicialização ao nosso aplicativo. Vamos ver como isso vai ser feito. Então, estamos de volta ao zero. Novamente, como na lição anterior, acabei de baixar a captura de tela com um botão de reinicialização e apenas solicito uma coisa simples, e apenas solicito como no botão de reinicialização na parte inferior do anúncio, use uma captura de tela como referência Então, vamos ver o que ele vai fazer. Então, o VZO fez seu trabalho e, como você pode ver, está dizendo que agora o contador inclui botão de reinicialização na parte inferior do aplicativo Mas o fato é que, por exemplo, como você pode ver, o VZ não pode visualizar esse arquivo Então, novamente, está acontecendo, e esse é o processo de ajuste e edição E aqui, novamente, eu estava explicando anteriormente que, usando esses diferentes instrumentos, diferentes IAs, finalmente, você virá com algo que combina com você. E esse tipo de situação, como obstáculos que você encontrará durante o caminho, o tornará mais experiente. E, novamente, as soluções, você as tornará mais adaptadas às suas situações específicas e estilo de trabalho. Então, vamos ver o que podemos fazer aqui. Como você pode ver, eu joquei com o aviso zero indo e voltando algumas vezes, como você pode ver, o V two criado restaurando o V one e as mesmas coisas com a versão três, mas a prévia ainda está fechada Então eu também tento dizer que consigo ver uma prévia, mas ainda não tive sorte com isso. Então, deixe-me pensar em alguma outra solução. Então, o que eu decidi fazer é criar um novo bate-papo, mas fazer o upload da minha segunda versão, onde temos um botão de reset e a mesma sondagem do início Então, vamos tentar. Meus amigos, essa abordagem realmente funcionou porque eu tenho uma prévia trabalhando com todas as minhas funcionalidades de uma coisa anterior, mas como você pode ver, com um botão de reset funcionando. E eu acho que é um exemplo muito bom de como a IA realmente funciona, você sabe, e de todos esses obstáculos que você pode encontrar ao longo do caminho E você deve estar familiarizado com, você sabe, essas situações porque, você sabe, o que fica no caminho se torna o caminho. E ao passar por essas situações diferentes, você se tornará mais experiente. E também, o que você poderia ter feito. Por exemplo, digamos que você esteja usando uma versão gratuita do V zero e digamos que suas mensagens tenham chegado ao fim, então você pode, você sabe, pegar o código como ele está realmente funcionando em seu ID e , digamos, a última parte da funcionalidade, que era um botão de reinicialização, você sabe, acessar um coágulo ou conversar com GPT e pedir, você sabe, para editar se foi editado com Vz algo assim, meus amigos, você tem que ser flexível 45. Resumo: Bem-vindo ao resumo do módulo seis. Meus amigos, eu realmente espero que vocês tenham experimentado e aprendido algo com este módulo prático que aprendemos o fluxo de trabalho, trabalhamos com IA e nos lembramos dos meus amigos. Então, tudo começa com o planejamento, planejamento de sua funcionalidade, o planejamento de sua interface de usuário e o textC Em seguida, na segunda parte, você acessa sua IA e solicita o que você planejou e, em seguida, apenas ajusta até obter a versão funcional Uma coisa eu diria que é bom trabalhar em uma pequena parte do seu aplicativo porque, como você provavelmente viu neste curso, anteriormente, às vezes, a IA podia fornecer o código, o que não é realmente a melhor prática criar algumas funções ou estilos E então, quando você obtém essa pequena parte do código funcional, você pode usar sua experiência e, em seguida, realmente limpar o código e estruturá-lo antes de ir para a próxima Então, a próxima pergunta que surge é o que podemos fazer se nosso aplicativo for mais do que apenas um contador e tiver várias partes. A resposta aqui é bem simples. Então, se você provavelmente se lembra desse diagrama de uma lição anterior, o que você precisa fazer é dividir, decompor seu projeto em pequenas subpartes e depois fazer parte por parte É uma forma comprovada de criar qualquer sistema, não apenas o aplicativo web, e tornará seu trabalho muito, muito mais fácil. Nesse caso, novamente, se você se lembrar do poço da morte, poderia facilmente não seguir nessa direção e economizar horas refatorando e depurando alguns erros que poderiam ser criados 46. Módulo 7: introdução: Então, parabéns. Você realmente chegou ao último módulo do curso. E esse módulo é totalmente dedicado para você praticar e consolidar todo o conhecimento adquirido no curso Então, recapitule rapidamente o fluxo de trabalho de IA. Portanto, a etapa número um é planejar a funcionalidade. Lembre-se, temos que fazer isso no papel. A segunda etapa é planejar a UI e o LL novamente no papel. A terceira etapa é uma pilha de texto e bibliotecas. A etapa número quatro é solicitar e a última etapa é ajustar e editar Este módulo consistirá em dois desafios. Um por um, após cada desafio, você receberá um vídeo de solução com minhas explicações. Então, boa sorte. 47. M7 c1 (FINAL): Bem-vindo ao desafio número um. Nesse desafio, seu objetivo é criar um aplicativo básico de cronômetro, e veja como a interface do usuário pode ser Então, na parte superior, você tem o tempo real em minutos, segundos e milissegundos, e lá embaixo, você tem três botões para iniciar, pausar e reiniciar Então, o botão de partida realmente inicia o cronômetro, então os números começam a subir, a pausa, o tempo será pausado e reiniciado o tempo todo voltará a Mas é só um exemplo, você pode construir algo sozinho. 48. Solução 1: Bem-vindo à parte da solução do desafio número um. Então, vamos recapitular rapidamente as etapas. O número um é a funcionalidade do plano. O número dois é interface do usuário e layout, solicitação de tags de texto e ajustes e edição Então, vamos começar com a etapa número um. Então, função que gostaríamos de ter. Então comece, pause, reinicie, então gostaríamos de ter minutos, segundos e milissegundos Portanto, a interface do usuário é bem simples. Estamos tendo minutos, segundos, milissegundos e três botões que planejamos Na pilha de texto, novamente, HDL, CSS e JS, e para essa tarefa específica, estamos optando por usar o Cloud para praticá-la também Novamente, como você pode ver, o prompt é bem simples. Crie um cronômetro básico: as funções do webapp iniciam, pausam, redefinem minutos, segundos, milissegundos e a pilha de texto Como você pode ver, tudo o que você está fazendo na fase de planejamento finalmente chega ao seu comando. E para esse caso específico, não vamos usar a captura Vamos tentar usar apenas texto. Então, estamos na nuvem. Colamos nossa solicitação e vamos ver o que ela fará Como você pode ver, Claude terminou seu trabalho e estamos tendo um bom resultado com nosso camarão Então, vamos testá-lo. Parece que está funcionando como queremos. E vamos tentar fazer alguns ajustes. Por exemplo, adoraríamos ter, digamos, dois zeros em milissegundos e três como está Então eu decidi usar o seguinte baile de formatura. Você poderia fazer o formato do asi agora? Então eu uso os 70 a seis zeros. Então, vamos ver o que ele vai fazer. Walla, como você pode ver , fez o que pedimos Então, vamos tentar novamente. Parece que está funcionando muito bem. Então, vamos dar uma olhada no código. E, novamente, como falamos no início e ao longo do curso, você deve primeiro adquirir boas habilidades de codificação E agora, como você pode ver, o que ele fez foi que tudo estivesse localizado em um arquivo. Isso significa HTML, CSS e JS, tudo em um arquivo, sem separação de interesses. E então, por exemplo, se você conhece até mesmo o básico de um JavaScript, poderá usar seu conhecimento para separá-los em três arquivos diferentes e usá-lo como um projeto final que você gostaria de ter Então eu acho que esse vídeo foi muito bom, e tivemos esse resultado final nesse caso, mesmo sem a captura 49. M7 c2 (FINAL): Bem-vindo ao desafio número dois. Neste desafio, seu objetivo é criar um gerador de cotações aleatórias. Então, veja como a interface do usuário pode parecer. Em uma parte superior, temos o voto em si, depois o nome do autor e, em seguida, esse botão com o novo rótulo de citação. Quando você clica nesse botão, as novas informações devem ser buscadas Então você cita o nome do novo autor. E eu vou te dar uma pequena dica, se você quiser tornar esse desafio um pouco mais fácil, você deve usar os dados locais e não os dados da Internet Portanto, sem a solicitação FIC para a API externa. Boa sorte 50. Solução 2: Venha para a segunda solução para o aplicativo gerador de código aleatório. Então, novamente, recapitule rapidamente as etapas do fluxo de trabalho, trabalhando com IA Então, novamente, funcionalidade, interface do usuário e layout, pilha de texto, solicitação e, em seguida, ajustes e A funcionalidade que gostaríamos de ter é mostrar o código aleatório no ButtomClick Gostaríamos de ver o código, e o autor e os dados devem ser hospedados localmente. Isso significa que não vamos usar nenhuma API para esse caso específico. próximo passo é a interface do usuário, como você pode ver, temos a cotação. Temos o nome do autor e temos o novo botão de citação. Em termos de pilha, HTML, CSS e JS, e em termos de escolha de IA, vamos usar o cursor para praticar, e o prompt tem a seguinte aparência Crie funções de aplicativo gerador de cotações aleatórias. Exiba uma nova citação em um botão, clique, exiba a citação e o autor. Os dados devem ser armazenados localmente, Textag HTML CSS e Vanilla JS Então, novamente, se você tiver feito o estágio de preparação adequado, sua solicitação final estará em contexto e qualidade suficientes para ser entregue à IA para obter seu primeiro rascunho. Então, vamos ver isso em ação. Então, meus amigos, estamos no cursor, e eu colei o prompt no chat Lembre-se de que, quando estamos usando o cursor, gostaríamos de usar o modo de envelhecimento porque gostaríamos que nossos arquivos fossem criados e vamos tentar o que ele vai criar. E, novamente, não vamos usar nenhuma imagem para esse caso específico porque nosso design é muito básico, apenas um esboço, e gostaríamos de ver talvez ele pudesse criar algo mais interessante Então, vamos ver Então, está gerando um índice HTML. O trabalho está em andamento. Então, agora é hora dos estilos, do trabalho em andamento, dos dados e agora está trabalhando em um arquivo JS do aplicativo para a funcionalidade JS. Como você pode ver, ele decidiu até mesmo adicionar algumas transições CSS para uma interação suave Então, o agente fazendo sozinho, é ideia do agente. Então, ele terminou seu trabalho e nos dá uma explicação rápida e breve do que fez. Então, vamos ler um pouco. Como você pode ver, diz, interface de usuário moderna e limpa com fundo gradiente, transições suaves, design responsivo, efeitos Her, armazenamento local dM Veja, é muito legal. Portanto, prevenção de animações enganosas. Tudo bem. Então, vamos ver como isso vai ficar em um navegador real. Então, primeiro, vamos aceitar tudo. Então, estamos no navegador e, como você pode ver, temos uma ótima interface de usuário, muito boa. Feltro colorido. E vamos tentar. Uau. Como você pode ver, parece muito bom e funciona como esperávamos. Vocês podem ver, meus amigos, que seguimos um fluxo de trabalho de IA muito simples e, quando você define uma tarefa específica, ela funciona muito bem. Então, meus amigos, em termos da última etapa em termos de ajustes e edição, pedi à IA, uma IA superficial, que usasse especificamente uma fonte Sera para uma citação e, como você pode ver, ela funcionou, vamos aceitar a alteração e ver o resultado E bem, como você pode ver, ele mudou o telefone e, na minha opinião, parece muito bom. Então, espero que você aprenda algo novo com esta lição. 51. Ações: Parabéns, meu amigo. Então, até este ponto, você fez um trabalho importante. Você passou por um curso inteiro, fez alguns exercícios e, neste módulo, concluiu alguns desafios específicos sozinho. Ótimo trabalho. Estou muito orgulhoso de você, meu amigo, e desejo que você goste de boa sorte em levar esse conhecimento para o próximo nível. Então, o que eu pediria que você fizesse agora é compartilhar seu projeto: um pequeno estudo de caso, pequenas explicações e alguns detalhes de como você cria esses aplicativos da web Talvez você tenha experimentado e feito algo extracurricular Então você também pode compartilhar isso comigo. E se você tiver algumas perguntas, tudo bem, faça essas perguntas e farei o possível para respondê-las. Mais uma vez, boa sorte. 52. Resumo: Bem-vindo ao final do módulo número sete. Meu amigo, neste módulo, você passou por dois desafios muito interessantes em que criou sozinho dois aplicativos web simples. Isso significa que agora você tem uma experiência em primeira mão na criação de aplicativos web usando IA. Então, bom trabalho. 53. Obrigada! : Amigo, eu só quero dizer um enorme obrigado. Eu realmente agradeço que você tenha encontrado seu tempo para marcar as pontuações e ir até o fim. E eu realmente espero que esse conhecimento leve seu processo de codificação para o próximo nível De fato, você criará os aplicativos muito, muito mais rápido e terceirizará o trabalho tedioso, o trabalho chato, para a IA do seu Então, boa sorte, meu amigo, e muito obrigado. Te vejo.