Programação com IA Vibe com Claude Build sem escrever código. | Stephen Koel Soren | Skillshare

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Programação com IA Vibe com Claude Build sem escrever código.

teacher avatar Stephen Koel Soren, AI Engineer and Automation Expert

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Apresentação

      3:56

    • 2.

      para aprender a programar no Vibe.

      7:06

    • 3.

      Usando Claude e Configuração

      17:21

    • 4.

      Desenvolvimento de temas para programação no Vibe

      32:57

    • 5.

      Hospedagem e solução de problemas

      7:47

    • 6.

      Aplique design ao tema

      30:50

    • 7.

      Crie um plugin de lista de tarefas.

      22:23

    • 8.

      Projeto de curso — Crie uma calculadora usando a programação Vibe

      7:08

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

9

Estudantes

--

Sobre este curso

Olá, pessoal! Boas-vindas à programação de IA Vibe com Claude. Este é um curso completo de iniciantes a avançados, projetado para ajudar você a criar temas modernos e profissionais do WordPress, plugins e aplicativos SaaS com o poder da IA e da programação com Vibe.

Quer você seja um iniciante completo, este curso ensinará você a usar a Claude AI como seu parceiro de programação de IA para criar soluções SaaS e WordPress de alta qualidade de um modo mais rápido, inteligente e eficiente.

O desenvolvimento tradicional do WordPress geralmente requer escrever milhares de linhas de código manualmente. Mas com a programação no Vibe, você aprenderá a se comunicar com IA usando prompts bem estruturados para gerar, melhorar, depurar e otimizar códigos mantendo padrões de desenvolvimento profissional. Além do WordPress, este curso abrange a criação de produtos e aplicativos da web completos do zero ao nível avançado.

O que você vai aprender neste curso:

  • Entenda os fundamentos da programação Vibe com Claude AI.

  • Escreva propostas eficazes para assistentes de codificação de IA para desenvolvimento de temas e plugins do WordPress.

  • Crie temas personalizados do WordPress do zero.

  • Desenvolva plugins WordPress com muitos recursos.

  • Aplique as práticas recomendadas de segurança, otimização, depuração e testes ao código gerado por IA.

Depois de concluir este curso, você vai poder

  • Crie temas profissionais no WordPress de forma independente.

  • Desenvolva aplicativos SaaS seguros, escaláveis e de manutenção

  • Use a IA da Claude para acelerar seu fluxo de trabalho de desenvolvimento sem sacrificar a qualidade do código.

  • e otimize o código gerado por IA com confiança.

  • Forneça temas e plugins do WordPress prontos para produção, desde o conceito até a implantação.

Este é um curso prático baseado em projetos, então você vai ter projetos e tarefas de curso dedicados para praticar o que aprende. Todos os arquivos necessários, incluindo documentos de requisitos de produto (PRDs), prompts e recursos essenciais são fornecidos na pasta de recursos para que você tenha tudo o que precisa.

Se você não tem nenhuma experiência em programação, não se preocupe! Vamos abordar tudo juntos passo a passo, desde os conceitos básicos até os tópicos avançados. Se tiver algum problema ou dúvida ao longo do caminho, basta enviar uma pergunta na área de discussão, estou sempre aqui para ajudar.

Conheça seu professor

Teacher Profile Image

Stephen Koel Soren

AI Engineer and Automation Expert

Professor

Stephen Koel Soren is an experienced AI Engineer, Digital Educator, and Instructor specializing in Artificial Intelligence, Automation, and Creative Technologies. He is passionate about simplifying complex AI concepts and turning them into practical, real-world skills that beginners and professionals can apply with confidence.

With a strong focus on hands-on, project-based learning, Stephen teaches students how to use AI tools, automation workflows, and design technologies to solve real problem

Visualizar o perfil completo

Level: All Levels

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Apresentação: Olá, pessoal. Bem-vindo à classe de codificação de vibrações com Cloud AI E esta é uma aula completa de nível iniciante a avançado projetada para ajudá-lo a criar um tema WordPress profissional moderno, plug-ins ses com o poder da IA com uma codificação vibrante Se você era um iniciante completo, um desenvolvedor web, um freelancer, um programador ou um entusiasta do wordpress, esta aula ensinará como usar a IA em nuvem como seu parceiro de inteligência artificial ou codificação de IA para criar SAS de alta qualidade, bem como a solução Wordpress de maneira mais rápida, inteligente Então, em última análise, o desenvolvimento tradicional do wordpress geralmente exige a escrita manual de milhares de linhas de código. Mas com a codificação Vibe, você aprenderá a se comunicar com a IA e a usar prom bem estruturado para gerar, melhorar, depurar e otimizar o código mantendo o E não apenas para o Wordpress, trata-se de desenvolver o SAS, desenvolver o aplicativo. Você aprenderá do zero ou da raiz a adicionar fãs. Então, vamos dar uma olhada no que você aprenderá na aula. Você aprenderá a entender os fundamentos da codificação vibe com a Cloud AI Você aprenderá sobre a eficácia da redação de instruções para IA assistida no desenvolvimento de temas para wordpress e desenvolvimento plug-ins para Wordpress. Você aprenderá como criar um tema WordPress personalizado do zero. Você desenvolverá um plugin wordpress rico em recursos. Você também aprenderá sobre a técnica de segurança aplicada. Você aprenderá sobre a otimização, aprenderá sobre o teste de depuração e melhorará ou gerará o código Depois de concluir esta aula, você poderá criar um tema profissional para wordpress de forma independente. Você aprenderá sobre o aplicativo SAS seguro, escalável e sustentável da Tablop escalável e sustentável Além disso, você poderá usar o Cloud AI para acelerar o desenvolvimento sem comprometer a qualidade do código. Você poderá depurar e otimizar o código gerado pela IA com confiança Você poderá desenvolver temas ou plug-ins para wordpress prontos para produção, desde o conceito até a implantação. Esta é uma aula baseada em projetos, então você terá um projeto de classe. Então, o que você aprenderá ou a lição que aprenderá, você terá a oportunidade participar de um projeto de classe ou pode considerar o toque do projeto de classe como sua lição Portanto, durante o aprendizado, se você solicitou o arquivo necessário, como o PRD, como o prompt, como o outro documento essencial, tudo é fornecido dentro da pasta de recursos, para que você não precise se preocupar enquanto aprende, pois fornecemos tudo o que é necessário dentro da pasta de recursos Esta é a classe amigável para iniciantes, de nível iniciante a avançado Portanto, se você não tem conhecimento , não precisa se preocupar porque, juntos, você e eu, aprenderemos do nível básico ao avançado. Durante o aprendizado, se você enfrentar algum problema , não precisa se preocupar com isso. Você só precisa me fazer a pergunta, e eu estou sempre à sua disposição para ajudá-lo a enfrentar qualquer problema. Você só precisa me fazer a pergunta enquanto aprende. Então, o que você está esperando? Estou entusiasmado por ter você em nossa classe e vamos começar a aprender programação vibe com quad 2. para aprender a programar no Vibe.: Olá, pessoal. Bem-vindo à primeira lição sobre como aprender a codificar no Cloud Vibe codificação Cloud Vibe é uma abordagem de desenvolvimento de software de assistência de IA em que você descreve o que deseja criar em linguagem natural e a IA em nuvem gera a maior parte do Em vez de escrever cada linha manualmente, o desenvolvedor se concentrou em fornecer instruções claras, revisar e gerar o código, testá-lo e, finalmente, refinar o produto O termo vibe coding se tornou popular em alguns anos e é descrito como um estilo de desenvolvimento em que EI atua como um parceiro de codificação colaborativo e permitirá que os desenvolvedores criem aplicativos com muito mais rapidez criem Então, espero que você tenha entendido o que é a codificação do Vibe. E há muitas plataformas para codificação de vibrações, como Claude, Jamini CRs ou Chat GPT, e Mas nesta aula, focaremos na nuvem e, com a nuvem, desenvolveremos diferentes tipos de aplicativos com a codificação vibe Então, em última análise, se você não tem nenhum conhecimento prévio sobre codificação, nesse caso, não precisa se preocupar porque, com a codificação do Vibe Now, você pode desenvolver qualquer tipo de aplicativo, qualquer tipo de conjunto, qualquer tipo de aplicativo, tudo o que você pode fazer com a engenharia imediata ou com um Então você não precisa da experiência em codificação, você precisa saber como colocar o comando para gerar sua saída, certo? Então, vamos dar um exemplo. Então, anteriormente, para fazer uma calculadora, você tinha que escrever muitos códigos. Mas hoje em dia, fazer uma calculadora é muito fácil. Até mesmo a calculadora fornecida pelo sistema padrão do Windows, deixe-me abri-la. Você pode ver na minha tela que esta é a calculadora padrão do Windows, e essa calculadora tinha muitos códigos no back-end E para fazer uma calculadora há alguns anos, necessárias mais de duas semanas a um mês para fazer uma calculadora. Mas hoje em dia, é bem fácil. Você pode ver na minha tela, eu abri o clo.ai. Está bem? Portanto, esta é minha URL para gerar. E aqui estou escrevendo Faça uma calculadora. Ok, então o que eu escrevi aqui na minha caixa serge, escrevi criar uma calculadora e cliquei neste botão de enviar mensagem e você pode ver que o processo foi iniciado, e você pode ver que uma chave de hash foi gerada no meu navegador, e este projeto é chamado de construção de uma E você pode ver aqui, você pode ver nesta proposta que as partes que precisam ser executadas para fazer uma calculadora estão sendo executadas e o processo está se movendo em segundo plano Então, temos que esperar um pouco até que a calculadora seja criada. Então, vamos esperar alguns. E aqui vamos nós. Você pode ver a saída, e você pode ver aqui, a calculadora é criada aqui. Está bem? Então, vamos dar uma olhada. Ou a calculadora está funcionando ou não. Portanto, quero multiplicar dez em cinco. Então, qual será a resposta? Em última análise, a resposta será a 50. Então, vamos dar uma olhada. Vamos apertar o botão de igualdade e você pode ver, temos nossa resposta. Isso significa que essa calculadora está funcionando agora. Então, você pode ver a diferença? Agora, você pode criar uma calculadora com apenas um comando. Então, o que eu escrevi aqui no Cloud, usei apenas um único comando que poderia criar uma calculadora, e Cloud criou a calculadora para mim. E isso é chamado de codificação de vibração. Então, espero que você tenha uma ideia prática como a codificação de valor está funcionando Então, agora vamos dar uma olhada no que você pode criar com a codificação do Cloud Vibe Você pode criar aplicativos web, aplicativos móveis, plataformas SAS, painel e painéis de administração. APIs e serviços de back-end RST, design de banco e sistema de autenticação de integração, chatbots de IA e aplicativos baseados em IA, páginas de destino e site de marketing, interface UIUX, ferramentas de automação e de dados e sistema de autenticação de integração, chatbots de IA e aplicativos baseados em IA, páginas de destino e site de marketing, interface UIUX, ferramentas de automação e extensões de navegador. OK. E para um fluxo de trabalho típico, você pode descrever sua ideia de projeto em inglês simples. Você pode pedir ao tecido que gere a estrutura do projeto. Você pode criar um recurso por vez usando instruções detalhadas Você pode revisar e gerar o código, executar o aplicativo e experimentar a funcionalidade. Você pode compartilhar qualquer erro com o código para depuração. Você pode otimizar, refatorar e implantar o aplicativo. Ok, programar tem alguns benefícios e algumas limitações, certo? Portanto, se você considerar os benefícios como acelerar o desenvolvimento de software, reduzir a tarefa repetitiva de codificação, facilitar o aprendizado de novas estruturas e melhorar a produtividade do desenvolvedor Auxilie na depuração e refatoração de código, gere documentos e faça testes. Auxilie na depuração e refatoração de código, gere documentos e faça testes. E se você considerar a limitação, então eu gero código, ele pode ter alguns bugs e algumas insuficiências, além de que a escalabilidade do desempenho de segurança ainda requer revisão humana, e outra limitação mais importante é um desenvolvedor deve entender a arquitetura e a lógica a arquitetura e a Ok, então você deve considerar os prós e os contras, pois tem alguns benefícios e algumas limitações. Mas todas as limitações podem ser solucionadas, e aprenderemos passo a passo como isso resolverá o problema de segurança, como você corrigirá o desempenho, tudo o que aprenderemos inteiramente nesta aula OK. Então, espero que você tenha o conhecimento básico fundamental sobre a codificação do Clod Vibe, e é isso que aprenderemos em Então, em nossa próxima lição, aprenderemos os usos da nuvem e o recurso da nuvem para iniciar a codificação do Vibe até o fim e adeus 3. Usando Claude e Configuração: Olá, pessoal. Bem-vindo de volta mais uma vez. E nesta lição, aprenderemos sobre o uso da nuvem, conheceremos a funcionalidade do clot e, em seguida, iniciaremos a codificação do Vibe Portanto, para iniciar a codificação do vibe, você precisa conhecer o uso das ferramentas do clot sobre a limitação, sobre os modelos, sobre os usos, tudo o que você precisa saber antes de iniciar a codificação do E é por isso que agora vamos conhecer a funcionalidade de nuvem. Então você pode ver na minha tela, eu abri o cloud.ai. Este é esse ERL no meu navegador, mas o Cloud tem dois tipos de assinatura O primeiro é gratuito e o segundo é pago. Então, quando você executar o clod.ai no seu navegador, você terá esse tipo de interface, ok? Portanto, ele solicitará seu login e você poderá fazer login com sua conta do Gmail ou com sua conta de e-mail pessoal E na nuvem, eles também têm o aplicativo Dektop. Então, em vez do navegador, se você quiser usar a versão Dexter deles, nesse caso, você precisa baixar o aplicativo Deckstop Portanto, em última análise, o clot AI pode ser usado gratuitamente, mas com o recurso gratuito, você não poderá usar todas as ferramentas pagas, como design de coágulo, código de coágulo, e também terá a limitação de token na Mas se você deseja usar sem complicações e deseja usar todos os recursos que estão dentro do coágulo, nesse caso, você precisa usar a versão paga Portanto, essa é a interface após o login e, após o login, você terá a interface semelhante, e esta é minha versão paga. Então, você pode ver no local do laboratório que ele tem uma barra lateral e você pode ver que essa é a opção de design Portanto, se você deseja criar qualquer outra coisa com o coágulo, nesse caso, você pode usar este Isso é para a vaca e isso para o código do coágulo. Então, em última análise, o código de coágulo é basicamente usado para fins de codificação. Mas em vez de codificar o código, você também pode usar essa caixa de bate-papo para codificar Certo? Além disso, você pode usá-lo por meio do código do Visual Studio. E vou mostrar como você pode executar o código de coágulo com o código do Visual Studio Mas antes disso, vamos conhecer as ferramentas primeiro no site. Este é o quadro do nosso site. E aqui você terá a opção de personalização, aqui para os artefatos, aqui para os projetos e aqui para os bate-papos e aqui para os bate-papos E aqui, todos os bate-papos anteriores, você terá dentro dessa opção de bate-papo E se você está procurando um novo bate-papo, nesse caso, você precisa ir para o novo bate-papo. E se você quiser expandir o site, nesse caso, precisará usar a opção de abrir a barra lateral. OK. Agora, vamos nos concentrar nos usuários e nos modelos. Então você pode ver aqui dentro da caixa de bate-papo, você tem as modelos aqui. Então, se você clicar, você pode ver aqui o SontFive e parece uma opção máxima. Deixe-me descrever como essas coisas estão funcionando. Então eu estou clicando aqui e você pode ver, você pode ver agora, Cloud tem um total de cinco modelos. Essa é a fábula, esse é o Opus, esse é o Sonnet e esse é Então, em última análise, a nuvem está usando agora um total de cinco modelos. E deixe-me explicar qual modelo é melhor para qual tipo de trabalho. Então você pode ver que este é o haicai, e esse haicai é o modelo mais rápido e econômico Então, se você pensar no Sonnet, esse é o fator diário do setor que equilibra o processamento rápido com o rezoneamento avançado E então, se você se concentrar no Opus e no Fib, nesses dois modelos existem basicamente modelos premium de grande escala construídos para condução profunda e solução de problemas , codificação pesada e E a fábula é o último modelo lançado recentemente pela Clause, e a fábula é muito mais avançada do que e a fábula é muito mais avançada do Está bem? Portanto, se você estava procurando o caso de uso real do haicai , ele o ajudará em tarefas de alto volume em que a tarefas de alto volume velocidade é importante e o julgamento complexo, ideal para limpeza de transcrições Edições rápidas e consultas repetitivas rotineiras. E para esse tipo de tarefa, o Haiku é perfeito. E se você está procurando o Sonnet, isso é muito útil para a produção profissional diária É altamente capaz de escrever código, redigir artigos, analisar conjuntos de dados e gerar ideias de negócios, bem como propostas de clientes OK. E agora, se você se concentrar no fable fib e no OPS, esses dois são, como eu disse, os recursos premium do cloud E com essa obra e fábula, ajudará você a exigir uma tomada de decisão de alto risco e um profundo rezoneamento arquitetônico E esses dois modelos são melhores para engenharia de software complexa, modelagem financeira e pesquisa científica, enquanto a precisão é fundamental Está bem? Então, espero que você tenha entendido como esses quatro modelos estão funcionando na nuvem. Então, em última análise, fábula, como eu disse, fábula é a versão mais recente, e essa fábula tem uma capacidade muito maior do que OPAS porque OPAS era o modelo anteriormente avançado e, recentemente, e, recentemente, Então, em última análise, você precisa de uma escala de codificação massiva ou grande sem complicações Nesse caso, você pode considerar as Opas e as cinco favoritas Então, isso é tudo sobre o nome do modelo. Agora, vamos nos concentrar no esforço, ok? Portanto, se você clicar aqui nesta opção em esforço, terá um total de cinco tipos diferentes de esforço, como baixo esforço, esforço médio, esforço alto , esforço extra e esforço máximo. Portanto, você precisa saber mais uma coisa: o esforço está basicamente ajudando você na saída, bem como no limite do token. E vou explicar para você como o limite de tokens está funcionando. Fab e haiku, eles têm dois modelos diferentes. E com o esforço, se você usar fable, seu limite de tokens será queimado muito rapidamente, mas com o hi ku, seu token queimará lentamente Então, qual é a precisão que você estava procurando, se você está procurando obter a precisão perfeita com baixo valor simbólico, nesse caso, você pode usar esse grande esforço. Com muito esforço, você terá menos tokens queimados, mas terá a resposta perfeita. Está bem? Mas se você estiver procurando por uma saída rápida, nesse caso, precisará usar o esforço máximo, mas nesse caso, seu token será queimado muito rapidamente. OK. E se você estiver clicando nesses mais modelos, nesse caso, você terá a versão mais antiga. Como aqui, está mostrando os modelos Opus 4.8. Mas se você estiver procurando por modelos anteriores como 4.7 ou 4.6, nesse caso, você os terá dentro da opção de mais modelos Portanto, dentro de mais modelos, você terá o Opus 4.7, 4.6, três, bem como Este é o modelo mais recente, mas se você estiver procurando por modelos antigos, você os encontrará aqui. Aqui está mostrando 4.6. Então, eu já disse qual modelo está funcionando para qual propósito e como o esforço está funcionando. Agora vamos nos apresentar aos usuários, e isso é realmente muito importante. Portanto, para verificar os usuários sobre os tokens, primeiro você precisa acessar o canto inferior esquerdo do seu navegador. Então você pode ver que esse é o ícone e tudo gira em torno do seu perfil. Então, ao clicar aqui, você terá a opção de configurações. E dentro das configurações, você terá essa opção de uso. Está bem? Então você tem que clicar aqui, isso usa e agora você pode ver que existem diferentes tipos de limites indicados aqui. Como se este fosse um plano que usa limites, e eu estou usando a versão pro. Está bem? Então eles têm diferentes tipos de modelos, e eu estou usando a versão pro, e dependendo de suas necessidades em seu processo de trabalho, você pode escolher qualquer versão a partir daí, ok? Então, com minha versão profissional, ela tem o limite de sessão atual. Então eu tenho um limite semanal. Tenho crédito de usuários e tenho limite de gastos mensais. OK. Eu tenho um tipo diferente de limitação, e é isso que vou explicar agora como essa limitação está funcionando. Assim, você pode ver a sessão atual, e agora ela já que você usa 0%. Isso significa que na minha sessão atual, até agora, nada é usado. Então, vamos dar uma olhada como o limite de sessão atual está funcionando. E, portanto, vou digitar aqui esse Cloud AI. E agora eu quero escrever aqui olá. E acabei de apertar o botão de introdução. Ok, então já está iniciando o processo. E agora, se você olhar aqui, que agora eu já consumo algumas coisas, e agora você pode ver depois de apertar o botão de olá, ou eu apenas digito a auréola aqui, então o que eu obtive, eu obtive a resposta daqui E depois de enviar o prompt do halo aqui, os usos são alterados Então, em vez de zero, agora são consumidas notícias de uma pessoa. Isso significa que na minha sessão atual, eu já consumi notícias de uma pessoa. E na minha sessão atual, quando for reiniciada, ela será reiniciada após quatro horas e 53 minutos. , em última análise, Claude está fornecendo cinco horas para cada aula atual Em cinco horas, você deve usar seu limite e quanto token você queimou ou quanto token você usou. Isso é o que está indicando aqui. Então, como exemplo, usei uma pessoa e agora estou escrevendo aqui, escreva um ensaio para o Block chain. E eu estou apertando o botão de introdução. Está bem? Então, agora, Claude fornecerá um ensaio detalhado para a cadeia de blocos e, depois de obter o resultado final, temos que verificar aqui o quanto está Agora você pode ver que aqui está processando o ensaio, e aqui, você pode ver que, em vez de 1%, agora está transformado em 3% E para alterar os usos mais recentes para verificar a sessão atual, você pode usar essa opção Essa é a opção de atualização e você pode ver a última atualização há menos de 1 minuto Portanto, se você estiver clicando aqui, nesse caso, ele o atualizará ou fornecerá o relatório de atualização de atualização OK. E agora você pode ver que é usado 4%, ok? Isso significa que o resultado já está preparado em outra guia. Então, vamos voltar para outra guia. E agora você pode ver, eu já tenho o ensaio sobre blockchain. Legal, certo? Então essa é minha saída. E para escrever este ensaio, limite total de 4% foi usado. E agora, deixe-me clicar aqui para atualizar. Em última análise, token total de 4% é usado na minha sessão atual Então, espero que você tenha uma ideia de como a sessão atual está funcionando e quanta entrada e saída você receberá da caixa de bate-papo. Então, de acordo com sua entrada e saída, seu limite de uso será consumido. Ok, então essa é toda a sessão atual. Agora foque no limite semanal, e você pode ver que a versão pro tem os limites semanais, e você pode ver que eu já consumi 6% do meu limite semanal. Então, em última análise, a cada cinco horas que ele fornece para a sessão atual e, de acordo com o uso da sua sessão atual, os limites semanais estão consumindo. Portanto, para cada uso da sessão atual, ela é aumentada de acordo com o uso da sua sessão. É aumentar o limite semanal. E quando seu limite semanal estiver concluído ou quando seu limite semanal estiver totalmente ultrapassado, o que você fará. Alguns de vocês estão fazendo uma tarefa de codificação muito fraca e seu limite semanal acabou, então o que vocês farão Nesse caso, você pode usar créditos. Está bem? Portanto, se sua opção de cobrança já estiver atribuída ao seu cartão de crédito, você poderá adicionar o crédito aqui e usá-lo a partir do seu crédito E você pode definir o limite de gastos mensais. Como aqui, eu defino o limite de gastos mensais de $20. Isso significa que, se meu limite semanal acabar , posso usar mais $20 do meu cartão de crédito Ainda assim, ainda tenho um saldo de cerca de $100, fornecido pela nuvem e ainda posso usar esse crédito de $100 Mas esse crédito promocional tem algum problema de expiração. Portanto, eles fornecerão algumas datas de validade e você deverá usar o crédito promocional antes da data de expiração Está bem? E mais uma coisa que quero dizer sobre o crédito promocional: você nem sempre receberá o crédito promocional. De acordo com a campanha de promoção fornecida pela nuvem, às vezes você receberá o crédito promocional, mas nem sempre. Certo. Então é assim que você usará a IA em nuvem e, quando fizer um grande trabalho de codificação, você deve se concentrar aqui, porque se você fornecer um grande comando que será executado ou consumirá uma grande quantidade de tokens Portanto, antes de fornecer o comando large, você deve verificar o limite atual da sessão e limite semanal, pois se você tiver muito pouco limite para sessão atual ou se tiver muito pouco limite semanal e se fornecer o comando mais alto que consumirá um grande número de tokens, nesse caso, seu comando não será executado corretamente e você fará tem algumas falhas no seu código. É por isso que você deve verificar os usos enquanto usa a nuvem. E essa é uma boa prática para codificação. E se você se concentrar nos usos e se concentrar no prompt , isso o ajudará a gerar a saída perfeita. E mais uma coisa, quero lhe dizer que, quando você tiver menos carência, como se você tivesse apenas 20% sobrando, já sobraram 80%, 20% concebidos Nesse momento, fornecer o grande comando para obter um grande resultado não é uma boa prática. Você deve sempre usar o comando maior quando tiver limite de sessão suficiente, certo? Então, eu usei 4% agora para poder fornecer um grande comando para uma saída maior. Mas se você tiver um limite de apenas 80%, nesse caso, se você fornecer o comando maior para gerar uma saída maior ou para fazer uma codificação grande ou fornecer um PRD desde o início, nesse caso, seu processo não será concluído imediatamente Portanto, você deve ter em mente que, quando tiver curenzação suficiente, nesse caso, poderá colocar o prompt adequado para o código E de acordo com suas necessidades, eles têm diferentes tipos de modelos, como o P, como o max, como as equipes. Então, de acordo com suas necessidades, se você precisar de usos maiores, nesse caso, você pode atualizar seus planos, certo? Então é assim que a nuvem está funcionando, e espero que você tenha tido uma ideia de como o token da nuvem a sessão e os limites estão funcionando Legal, certo? Então, já apresentamos a interface com os modelos, com os tokens, e agora é hora aplicar a codificação real do Vibe Então, em nossa próxima lição, vamos criar um tema wordpress, e esse tema wordpress será totalmente desenvolvido pela codificação do Vibe Então, espero que você tenha gostado desta lição, e a próxima lição será muito interessante, e você terá muitas coisas importantes em nossa próxima lição. Até lá, cuide-se e adeus, pessoal. 4. Desenvolvimento de temas para programação no Vibe: Olá, pessoal. Bem-vindo de volta mais uma vez. E nesta lição, aprenderemos como você criará um tema wordpress usando a codificação E se você não tem conhecimento de codificação, não precisa se preocupar, pois criaremos o tema wordpress e o tornaremos funcional usando a codificação do Vibe e, com o uso do prompt, nós o criaremos e o disponibilizaremos na Ok. Então, vamos direto ao nosso ponto principal. Então, para criar um tema Wordpress usando a codificação, primeiro você precisa criar o PRD Então, o que é PRD PRD significa documento de requisitos do produto E no PRD, você tem que mencionar o que você vai fazer Isso é muito importante, ok? Então, primeiro, você precisa criar o PRD e, dentro do PRD, você deve mencionar tudo, como qual será a cor, qual será o nicho, quantas páginas estarão lá, seu objetivo, seu propósito, sua estrutura, sua segurança, seu desempenho, tudo o que você precisa mencionar dentro do E, portanto, aprendendo a fazer PRD, vou te mostrar agora E, pela minha experiência pessoal, encontrei o Google JaMine baseado para escrever PRD porque eu uso o chat GPT, usei o copilot, usei o cloud tão bem quanto usei o Google JaMine e, no meio de comparar todos os outros agentes de IA, descobri que o Google Jaini escreve PRD no meio de comparar todos os outros agentes de IA, descobri que o Google Jaini meio de comparar todos os outros agentes de IA, descobri que o Google Jaini E, portanto, vou usar o JMI E para escrever o PRD Ok, então você pode ver na minha tela no meu navegador, eu abri o jm@google.com. Este é o RL e você já está familiarizado com essa popular plataforma de IA E aqui, você tem que escrever um aviso, ok? Então, antes de começar a fazer o tema, se você sabe para quem e qual é o propósito, qual é o nicho? Quais são as categorias? Se você sabe tudo, pode escrever diretamente aqui. Como exemplo, vamos criar um tema WordPress para restaurantes, cujo nome será Moogle Restaurant Ok, então o tema será feito em nome do restaurante Mughal. E esse é o nome da marca. Então, o que já declaramos aqui, declaramos o nicho. Isso significa que nosso nicho é comida porque o restaurante é relevante com a comida, e o nome do nosso tema será o tema do restaurante Mughal Então, em última análise, duas coisas que descrevemos aqui. O primeiro é o nome da marca e o segundo é o nicho. Então, assim, você tem que descrever tudo, se tiver. exemplo, se você tem a paleta de cores, se você tem o estilo de fundo, se você tem o estilo de tipografia, tudo, você pode descrever dentro do Mas se você não tiver o nicho exato, as categorias exatas, a paleta de cores exata ou qualquer outra informação, nesse caso, você pode contar com a ajuda da IA Ok, então vamos começar a fazer o PRD primeiro. E para fazer o pod, você precisa escrever o prompt. Está bem? Então, vamos começar a escrever o prompt e, para escrevê-lo primeiro, o que você precisa escrever, eu quero criar um tema para Wordpress e será um tema de restaurante. Ok, então eu mencionei que vou criar um tema para WordPress, e aqui eu mencionei o nicho e será um tema de restaurante. E o nome do tema será Michael Restaurant. TEMPO. Ok. Então, a princípio, declarei que declarei o nicho e o nome da minha equipe. E agora, o que eu preciso escrever, eu preciso escrever aqui, e eu fiz PRD para isso. Ok. Então, no final das contas, estou apenas fazendo o PRD com Jamin E, mas vou executar o PRD em Portanto, você deve mencionar essas coisas em seu prompt. E, portanto, estou escrevendo aqui. Vou desenvolver o tema de Claude. Ok, então vou desenvolver o tema por coágulo. Isso é o que eu mencionei. E se você der o comando exato, nesse caso, você terá o melhor PRD porque Jim e E entenderão que codificação será gerada pelo coágulo AI Portanto, o JaMine preparará o PRD de acordo com sua solicitação É por isso que você deve sempre mencionar se estiver usando o JMNE para PRD, qual plataforma de IA será usada E por isso, eu já mencionei aqui que vou desenvolver o tema por coágulo. Ok. Agora, você precisa mencionar algumas coisas, como o código deve ser de nível corporativo. padrão de nível empresarial garante a segurança. Garanta o desempenho. E responsivo. Ok, então, em última análise, quando você usar essa palavra-chave responsiva, ela será compatível com a guia Desktop e com as visualizações do smartphone Ok, então esse é o nosso principal problema. Então, vamos revisar o que escrevemos aqui. No começo, eu mencionei aqui, eu quero criar um tema Wordpress. Então, isso é exatamente o que está declarado: o que você vai fazer. Eu quero criar um tema Wordpress, e será um restaurante. Então, aqui, esse é o nicho, ok? E o nome da equipe será Mogul Restaurant. E esse é o nome da sua marca. E eu preciso do PRD para isso. Ok. Então, em última análise, estou perguntando ao PRD para Jamini Então, tudo gira em torno do prompt. Então eu mencionei que vou desenvolver o tema pela nuvem. Então, aqui, eu declaro qual será minha plataforma. Em seguida, mencionei que o código deve ser padrão de nível corporativo, garantir a segurança, garantir o desempenho e ser responsivo Ok, para fazer uma frase amarga, você pode escrever aqui e o tema deve ser. Responsivo. Ok, legal, certo? Então, agora, vamos apertar o botão de introdução do nosso teclado ou você pode simplesmente clicar neste botão de envio, então você terá o PRD principal, mas precisará fazer mais orientações e mudanças depois de ter o Vamos pegar o PRD primeiro. Em seguida, faremos a modificação acordo com suas necessidades. Ok, então eu estou apertando o botão Inter. E assim que você apertar o botão de introdução, ele iniciará o processo e você pode ver aqui a saída Assim, você pode ver o documento de requisitos do produto ou PRD e ver o que está mencionado aqui O documento de requisitos do produto PRD é adaptado para desenvolver um tema de restaurante magnata usando um colaborador de IA, como a nuvem, para obter códigos seguros e de alto desempenho de um LLM em níveis corporativos códigos seguros e de alto desempenho de um LLM Os requisitos são divididos em partes, especificação modular que você pode inserir na Então esse é o nosso PRD. No início, é nomeado aqui. O nome do projeto será o tema Mogul Restaurant, e já aqui, IA definiu o público-alvo Então, qual será meu público aqui que mencionei sobre finos de restaurantes do sul da Ásia ou Mogul, marcas culinárias sofisticadas e altos Então, isso tem tudo a ver com o público-alvo. Então, em vez disso, eu gerei um público-alvo, se você tem algum público principal, nesse caso, você pode escrever aqui. Suponha que você esteja criando um tema wordpress para o estilo europeu ou para a culinária chinesa. Nesse caso, você deve mencionar qual será seu público-alvo. Então, isso ajudará você a gerar o tema corretamente. Ok, então aqui, é mencionado sobre a filosofia. Agora, vamos nos concentrar no plano técnico. E você pode ver, em termos técnicos, que é mencionado sobre a estrutura de desenvolvimento. Aqui, é mencionada a abordagem híbrida usando o componente PHB padrão combinado com uma biblioteca de blocos personalizada de Gutenberg Nenhum elemento ou dependência de DV para garantir o máximo desempenho Isso é realmente muito importante. Ok. Então , em última análise, hoje em dia, temos dois tipos de editor. O primeiro é, por padrão, o editor Gutenberg. Este é o mais recente e, além disso, se você não é uma pessoa técnica, nesse caso, pode se concentrar no elementor, porque o Elementor é muito fácil de usar e é uma opção de soltar dragões Então, se você tem o conhecimento básico sobre a biblioteca de blocos, como se você já tivesse o conhecimento sobre o Gutenberg, nesse caso, você pode simplesmente usar essas coisas diretamente ou, em vez da biblioteca de blocos, se você não tiver nenhum conhecimento técnico, nesse caso, você pode usar o elemento porque Elementor, como eu disse, é muito fácil de usar e tem muitos componentes, mas o problema é que você não terá todos os recursos do elementor gratuitamente porque o elementor tem uma versão paga e a versão gratuita Mas com a versão gratuita, você pode fazer muitas alterações. Está bem? Portanto, dependendo de suas necessidades, você pode escolher a estrutura, seja a biblioteca de blocos de Gutenberg ou o Elementor Então, em dias normais, a biblioteca de blocos de Gutenberg é amplamente usada. Portanto, prefiro usar primeiro a biblioteca de blocos de Gutenberg Ok. Então, o que está escrito aqui no plano técnico de arquitetura em segundos mantém o padrão de código, 100% de conformidade com o padrão de codificação de fala do Wordpress e as regras internacionais de ESL Como solicitamos o padrão de código, ele já foi mencionado aqui. Em seguida, é mencionado sobre a eficiência do banco de dados. Em seguida, é mencionado sobre o gerenciamento de ativos. Então, para o recurso principal e os requisitos funcionais, ele fornece o que você pode ver aqui: mecanismo dinâmico de menu de comida, sistema de reservas de luxo, sistema de reservas de luxo, personalizador ao vivo e token de design E depois se concentra na especificação de segurança corporativa. Ok, então aqui, o que mencionamos, temos principalmente o que precisamos. Nós entramos aqui. Mas a questão é: o que é fornecido pelo conteúdo gerado pela IA ou pelo PRD gerado pela IA Se precisar mudar alguma outra coisa, você pode alterá-la. Como você pode ver aqui, ele fornece um menu dinâmico de comida. Você pode ver que é solicitar o sistema de reservas de luxo. Se você não precisar do sistema de reservas em seu tema, poderá removê-lo. E para remover, você tem que escrever um aviso aqui e eu vou te mostrar. Ok. Então, em última análise, tudo parece bem até aqui. E o mais importante, primeiro, você precisa declarar a estrutura E mais uma coisa que quero mostrar a vocês, número quatro, é sobre desempenho e otimização, e você pode ver 95 mais a pontuação interna da velocidade paga. Então isso é realmente, muito importante. Deixe-me explicar como essas coisas estão funcionando. Se você quiser classificar seu site, nesse caso, seu site deve carregar rapidamente. E, portanto, eu mencionei sobre o desempenho. E depois de usar essa palavra-chave no meu prompt, obtive um padrão de desempenho e otimização dentro do meu PRD. Em seguida, é mencionado sobre o EIUX e é uma matriz responsiva porque eu estava dizendo que ela deveria ser responsiva porque não apenas para o laptop ou mesa de visão, ela deveria ser compatível com o smartphone, a aba E é por isso que o ponto número cinco é mencionado sobre a capacidade de resposta, legal E no número seis, ele mencionou sobre a estratégia de desenvolvimento com a nuvem, conforme declaramos, ela será desenvolvida pela nuvem se tudo estiver previsto aqui Legal, certo? Então, agora você tem mais algumas perguntas. A primeira pergunta é: você criará a estrutura com Gutenberg ou Elementor Se você não estiver interessado em criar seu tema com o Gutenberg, você pode escrever aqui Você pode escrever no baile que eu quero, quero criar o tema para compatibilidade elementar Está bem? E da equipe, se você não precisar do sistema de reservas, se quiser remover essas coisas, pode escrever aqui. Ok. Portanto, quero escrever isso, pois não estou procurando esse sistema de reservas, mas estou mantendo a biblioteca de blocos de Gutenberg Portanto, estou escrevendo. Eu não preciso desse sistema de reservas de luxo. Então, estou copiando daqui e colando. Portanto, não preciso do recurso de sistema de reservas de luxo. Então eu estou apertando o botão de introdução. Então, depois de escrever essas coisas, o sistema de reservas será removido. Legal, certo? Então, em última análise, agora tudo está fornecido aqui e agora vou dizer uma coisa muito importante, então acabou de fazer a modificação. Você pode ver aqui, depois mencionar que não preciso de um sistema de reserva de luxo, o sistema de reservas de luxo foi removido, mas é fornecido separadamente. Mas eu não preciso desse jeito. Eu não preciso do PRD, copie para usar porque, caso contrário, toda vez que eu tenho que voltar para o meu Gemini , eu tenho que copiar o PRD Então, novamente, eu tenho que colá-lo. É totalmente confuso, mas eu não preciso das coisas bagunçadas. Preciso de maneiras limpas de ter um desempenho suave sem problemas Portanto, preciso de uma cópia para usar o PRD. Então, copiarei os próprios daqui e os usarei na nuvem sem problemas Certo. E mais uma coisa que eu tenho que te dizer se você ver que o apartamento inteiro é bem grande, certo? Então, em última análise, a nuvem precisa gerar muitos comandos. A nuvem precisa passar por muitos processos. E, nesse caso, seu token pode queimar por conta própria. Portanto, temos que aplicar uma coisa, certo? Portanto, preciso escrever um prompt porque se você fornecer o PRD inteiro e inserir o PRD para o Cloud e executar o comando , com um único comando, Cloud não conseguirá criar o tema desse PRD sozinho porque é um processo longo e levará de minutos a horas, às vezes demora e sua saída não será tão fácil Portanto, vamos dividir todo o PRD de forma separada Como em um único comando, Cloud executará a etapa de desempenho e, em outro comando, Cloud executará a etapa de segurança. Em outro comando, ele executará os padrões de código. Portanto, se dividirmos o PRD de maneiras diferentes ou em etapas diferentes , seu token não será usado isoladamente e o desempenho será muito bom E você pode rastrear o uso da sua estação atual e obter a saída perfeita. Portanto, o que você tem que escrever, você tem que escrever um aviso aqui. Então, vou escrever o prompt aqui. Por favor, dê uma olhada na minha tela. Estou escrevendo aqui. É muito grande para criar o tema em um comando para a nuvem. Portanto, quero dividir em etapas. O PRD deve se dividir em oito etapas para que uma etapa seja concluída, então Claude deve me pedir permissão para iniciar a próxima etapa. Ok. Então, o que eu escrevi aqui, eu escrevi, é muito grande para transformar o tema em um comando para coágulo. Portanto, quero dividir em etapas. O PRD deve se dividir em oito etapas quando uma etapa for concluída, então o coágulo deve me pedir permissão para iniciar a próxima Então, isso ajudará você a salvar seu token. E se você usar esse comum , sua saída será perfeita e você não terá nenhuma falha Ok, então eu estou apertando o botão inter, e agora você tem que esperar até que a saída seja gerada pelo Jamini. Você pode ver que ela gerou um total de oito etapas E você pode ver na etapa um que é mencionado sobre a tuberculose principal na etapa dois. É sobre o tipo de postagem personalizada em três metacaixas em quatro modelos principais em cinco, bloco personalizado de Gutenberg número seis, é tudo sobre o menu de comida responsivo no Integração de personalizadores ao vivo e em número no Step, tudo gira em torno da otimização de segurança e desempenho Então, é dividido em um total de oito partes. Então, quando a primeira parte estiver concluída , será solicitado que você comece com a segunda etapa. Se você der o comando que concorda em iniciar a Etapa dois, clod iniciará a próxima etapa Então é assim que você pode salvar seu token, você pode obter a saída perfeita. Ok, legal. Agora, não se trata de copiar para usar essas coisas. Portanto, você precisa escrever outro prompt, como eu quero escrever aqui, estou pronto para usar e copiar para usar o PRD para coagulação Ok. Então, quando você escrever este baile de formatura que eu preciso pronto para usar e copiar para usar o PRD para coágulo, ele lhe dará uma Um bloco para cópia. Você terá uma caixa preta aqui e terá a opção de cópia. Só você tem que esperar um pouco porque você pode ver Ok, vamos lá. Aqui está a saída. E agora você pode ver, temos uma cópia para usar ou pronta para usar o PRD aqui Você só precisa copiar a citação daqui, e ela está dividida em diferentes etapas. Ok, então aqui, a oitava etapa é mencionada aqui e tudo o que temos no PRD, acordo com nosso prompt Então, agora o que você precisa fazer, basta copiar o código daqui, voltar ao coágulo e colar aqui Então essa é a tarefa, mas antes de colar o PRD na nuvem, precisamos determinar qual modelo usaremos Isso é muito importante. Então, para modelos, você pode ver agora, por padrão, que temos o Solid fib. Mas Solid fib é bom para gerar código, é bom para escrever Mas se você está procurando um recurso avançado sem problemas, nesse caso, na minha opinião pessoal, você pode usar diretamente o OPas 4.8 Mas são necessárias fábulas. Você pode ver aqui que é obrigatório usar crédito e que você já conhece usa crédito. Mas só por enquanto e do meu ponto de vista, apenas para sua tarefa, você pode usar este Opus 4.8 Então, portanto, eu vou ver o Opus 4.8. E mais uma coisa, quero dizer que, a partir do FFO do FFOT , eu quero usar o alto, porque se você estiver usando o Max, você terá um grande Portanto, alto é bom o suficiente. E mais uma coisa, se você ativar esse botão de pensamento, nesse caso, levará muito tempo. Está bem? Portanto, se você deseja obter saída mais rápida com precisão perfeita, nesse caso, basta usar a alta. E minha opinião pessoal é essa opção de pensamento que você pode evitar. Ok, legal, certo? Então, agora temos que colar aqui. Então, vamos colar o PRD aqui. Então, eu estou colando e você pode ver que já está colado aqui, e eu estou enviando o aviso, ou você pode apertar o botão de introdução do E agora você pode ver que o processo foi iniciado e o que está escrito aqui, vou construir isso passo a passo. Deixe-me começar com o primeiro passo. Portanto, levará um pouco de tempo porque você terá que passar por um total de oito etapas. Então, quando a primeira etapa for concluída, ele solicitará que você inicie a segunda etapa. Portanto, temos que esperar até que a primeira etapa seja concluída. Então, vamos esperar alguns instantes. Então, vamos lá. Nossa primeira etapa está concluída e, no lado direito, você pode ver a prévia, ok? E se você rolar para baixo, poderá ver na primeira etapa o que o Cloud criou, criou o arquivo de estilo, criou os arquivos de tema e criou o arquivo de função. E então ele me pergunta: posso prosseguir para a etapa dois? E agora vamos dar uma olhada em quanto token é consumido. E você pode ver aqui que 9% do token já foi consumido e minha sessão atual será reiniciada em 15 minutos. Está bem? E agora, ele me perguntou, posso prosseguir para a etapa dois? Então você pode escrever aqui. Sim, comece. Etapa dois. E então você pode apertar o botão de introdução do teclado. E você pode ver aqui que a segunda etapa foi iniciada. Então, novamente, temos que esperar um pouco e, se você não quiser ver a prévia no lado direito, nesse caso, você pode fechar essa visualização e acessar a tela inteira. Ok, então, novamente, temos que esperar alguns instantes. Então, novamente, você pode ver que a segunda etapa foi concluída e aqui, novamente, foram criados alguns CPTs do PhGFleu, algumas funções do PhGFleu Em seguida, ele me pediu permissão para as metabxes e os campos personalizados e Quad deseja iniciar a etapa três É por isso que eu quero escrever, começar. Etapa três. Ok, então, novamente, tenho que esperar um pouco até que a etapa três seja concluída. Assim, você pode ver que a etapa três foi concluída. Ele criou as metacaixas e as funções. E agora ele pediu que eu iniciasse a Etapa quatro, e tudo gira em torno do modelo principal e dos arquivos de layout hierárquico Então, deixe-me dar o comando, comece. Etapa quatro. Então você pode ver que a etapa quatro foi iniciada. E agora vamos dar uma olhada em quantos toques são consumidos. Portanto, em outra guia, abri aqui e você pode ver que ainda tenho nove minutos para redefinir meu limite de sessão atual, e até o ano total de 18% consumidos. Está bem? Ok, então nossa etapa quatro está concluída. E na etapa quatro, muitas coisas foram criadas. Você pode ver o índice do menu de um único ponto, cabeçalho, rodapé e função de navegação de menu único Muitos arquivos foram criados e agora ele pediu que eu iniciasse a etapa cinco. E deixe-me dar o comando. Aqui, inicie a Etapa cinco. E então temos que esperar um pouco. E agora vamos dar uma olhada em quantos tokens são consumidos. Vamos clicar em outra guia e você poderá ver se o total de fichas de 24 pessoas foi consumido, e temos seis minutos para redefinir nossa moeda atual Ok, então vamos esperar até que a etapa cinco seja concluída. Ok, então a etapa cinco está completa. Agora, e me peça para começar a etapa seis. Deixe-me escrever. Sim, comece. Etapa seis. Então, novamente, temos que esperar. A etapa seis está concluída. Deixe-me começar a etapa sete. Deixe-me escrever. Aqui, comece a etapa sete. E, novamente, temos que esperar. Então você pode ver que a etapa sete foi concluída e agora só nos resta uma etapa. E é por isso que está me pedindo a tarefa final. E deixe-me escrever, sim, comece a etapa oito. Você pode ver que o processo da etapa oito foi iniciado. E agora vamos dar uma olhada em nossos usos, e você pode ver que meu limite de sessão anterior foi redefinido e, depois de fornecer o comando ou prompt tet, apenas 2% são consumidos, e meu limite de sessão atual ou atual será redefinido após quatro horas e 56 minutos depois. Ok. Então, espero que você tenha uma ideia prática como o limite da sessão atual está funcionando, porque você acabou ver que meu limite de sessão anterior foi redefinido enquanto minha etapa prosseguia E você pode ver que a etapa oito ainda está sendo executada e é a etapa final, então levará um pouco mais de tempo porque está polindo o arquivo final e está auditando todas as coisas Portanto, levará um pouco mais de tempo. Portanto, temos que esperar até que a etapa oito seja concluída. E aqui vamos nós. Finalmente, concluímos um total de oito etapas. E você pode ver que finalmente recebemos nosso arquivo de tema. Este é o arquivo MoblerStaant, Zip, e este é o arquivo E junto com isso, é fornecido. É chamado de documento. MD significa Markdown. Então, em última análise, tudo gira em torno do desempenho de segurança ou das metacaixas de leitura para mim. Então, agora temos que verificar se o tema é viável ou não Então, temos que provar o tema da nossa hospedagem principal. Em seguida, garantiremos que o tema esteja funcionando e seja funcional. Portanto, o que temos que fazer escrever um prompt aqui e deixar eu fechar a pré-visualização do lado direito, e deixar eu escrever se eu quero levar a equipe para uma hospedagem compartilhada, então me dê o arquivo da equipe do WordPress para instalar no administrador do WP Ok. Então, o que eu escrevi aqui porque temos que provar que o tema está funcionando ou não e, portanto, vamos publicá-lo e, portanto, vou usar uma hospedagem compartilhada. E se você tiver a hospedagem dedicada, poderá escrever o comando de acordo com sua hospedagem, mas vou usar a hospedagem compartilhada, como vou usar o chip de nome e, portanto, vou provar o arquivo do tema na hospedagem compartilhada. É por isso que eu escrevi aqui. Quero executar o tema em uma hospedagem compartilhada. Então me dê um arquivo de tema do Wordpress para instalar o WP. Administrador, e esse administrador do WP significa administrador do WordPress. Está bem? Então, eu estou pressionando o botão de envio mais uma vez, e agora eu terei o arquivo G completo pronto. Está bem? Então eu só tenho que esperar um pouco. Então, vamos lá. Temos nossa saída final aqui. Então, nossa criação de tema está concluída, e você pode ver aqui que, depois do que escrevi aqui após minha solicitação anterior eu quero executar o tema em uma hospedagem compartilhada, então me dê o arquivo do tema WordPress para instalação no administrador do WP Depois de fornecer esse aviso, recebi meu arquivo Zip final aqui. Você pode ver no lado direito que eu tenho meu arquivo Zip, então você pode fazer o download aqui. Ou, se você rolar para baixo, também poderá fazer o download aqui. Este é o botão de download e o mesmo do lado direito. Ok. Então, deixe-me fechar uma prévia, e você já pode ver como você instalará o tema no seu wordpress Você pode ver que a instrução foi fornecida. Você tem que ir primeiro pela aparência, depois pelo tema, depois pelo anúncio novo. E, finalmente, você precisa escolher a opção de enviá-los, certo? E depois de fazer o upload, você precisa acessar a opção Instalar agora e, em seguida, selecionar a opção de ativação. Então, cada comando é dado aqui, e você pode ver que o nome do nosso tema é chamado de restaurante do Moogle Então, de acordo com nosso PRD, temos tudo e nosso tema foi criado Então, agora é hora de baixar, e eu vou clicar no botão de download e você pode ver que o arquivo foi baixado. Está bem? Então esse é o nosso arquivo principal. Agora, em nossa próxima lição, hospedaremos esse tema em nossa hospedagem e aprenderemos sobre a hospedagem e sobre a solução de problemas. Se você enfrentar algum erro, se tiver alguma falha, tudo será corrigido em nossa próxima lição Então, a próxima lição é muito, muito importante, e espero que você tenha gostado da aula e já tenha a ideia de como criar o tema WordPress usando a codificação vibe na nuvem Então, vamos pular para nossa próxima lição até lá. Cuide-se e adeus a todos. 5. Hospedagem e solução de problemas: Olá, pessoal. Bem-vindo de volta , mais uma vez, e agora vamos hospedar nosso tema e, se encontrarmos algum problema , resolveremos os problemas E isso é muito importante porque você precisa saber como a solução de problemas está funcionando, certo? Então você pode ver na minha tela que eu abri um domínio, e é nisso que eu entrei Isso está no meu administrador do WordPress. Está bem? Então, para conseguir isso, você deve ter sua hospedagem primeiro e dentro de sua hospedagem, você deve ter que instalar o word press e, em seguida, você terá essa interface. Está bem? Então você pode ver que, para testar o tema , o que eu tenho que fazer ir primeiro para a aparição. A partir daí, você deve escolher a opção de tema e, a partir delas, você encontrará essa opção de tema de anúncio. Portanto, você pode usar esse tema de anúncio. E mais uma coisa que eu quero te dizer se você não tem a hospedagem, se você não tem a hospedagem compartilhada ou a hospedagem comprada. Mas se você ainda quiser tentar, o tema está funcionando ou não. Nesse caso, você pode usar seu servidor local. E para o servidor local, você pode usar algum outro software como o Za wamp, e usando esse tipo de software, seu computador local funcionará como um servidor local, e você pode hospedar, você pode hospedar seu Wordpress dentro do host local, e então você pode carregar o tema aqui ou você pode usar diretamente este WP local, este WP local, você pode usar este site baixe o WP local aqui e você pode se conectar diretamente ao seu computador e transformar seu computador em servidor ou servidor local, e você pode usar o servidor local como sua hospedagem Está bem? Mas se você já está familiarizado com hospedagem como hospedagem compartilhada ou hospedagem comprada, nesse caso, você já está familiarizado com a forma como o wordpress é instalado e, depois de instalar o Wordpress, você terá esse tipo de interface. Ok, então vamos continuar com o teste do tema. Então, pela aparência, você deve escolher a opção de tema e, a partir daí, obterá essa opção de adicionar tema. Então, quando você obtiver a opção de adicionar tema, novamente, você terá outra opção e, a partir daí, você terá que ir para o tema de upload Depois de clicar em carregá-los, um pop-up aparecerá. Está bem? Então, a partir daqui, você deve escolher o arquivo e o pop-up aparecerá. E você pode ver o arquivo baixado já dentro da nossa pasta. Portanto, você precisa selecionar o caminho em que manteve o arquivo baixado. Então você pode ver aqui está o arquivo do meu restaurante, o arquivo do tema, então você deve selecionar o arquivo e clicar em Abrir. E depois de adicionar o arquivo aqui, você deve ir para a opção Instalar agora. E depois de clicar em Instalar agora, você precisa esperar um pouco e depois ativar o arquivo, certo? Então você pode ver que eu tenho o botão de ativação. Então, deixe-me clicar no botão Ativar. E você pode ver que o tema está ativado, e você pode ver aqui que o tema do restaurante mole está ativado Então, agora vamos dar uma olhada na aparência do tema porque temos que verificar se está funcionando ou não. E se você se concentrar no lado b, verá que já temos o menu de comida. E esse cardápio de comida faz parte do nosso tema. Isso significa que nosso tema é totalmente funcional e viável, certo? Então, para dar uma olhada, o que você pode fazer, clique aqui e, a partir daí, vá para a opção do lado da visita e eu estou abrindo em uma nova guia ou você pode simplesmente ir diretamente para a URL em que instalou o tema. Então você pode ver que eu tenho meu tema aqui e o tema está funcionando, certo? Então, agora não temos nenhum design. Nós só temos a arquitetura. Nós temos a arquitetura. Agora temos que fazer isso. Temos que adicionar esse design ao nosso tema. Anteriormente, o que criávamos era apenas criar a estrutura e a arquitetura do tema, e o tema é viável e não temos falhas, não temos erros e inclinamos, não tivemos nenhum problema e inclinamos, não tivemos Mas o tema não tem nenhum design. E agora temos que fazer um design. E para fazer o design, temos que seguir um processo diferente. E para o design, você precisa criar o design separadamente. Mas o tema que criamos é a funcionalidade, e você pode ver aqui, é o menu de comida daqui. Você pode criar os menus. Você pode ver aqui adicionar um novo item de menu, e esse menu será adicionado ao seu lado principal. Ok, então temos a arquitetura. Temos tudo o que precisamos. Mas a questão principal é ainda não temos o design porque queremos. Queremos criar nosso próprio design. E você pode ver que Gutenberg está funcionando perfeitamente, e Gutenberg trata do título do bloco, e você pode ver se quiser adicionar alguma página, você pode adicionar as páginas para adicionar os elementos Você tem o campo aqui e, se clicar nesse bloco de anúncios, terá um tipo diferente de opção, como se quiser adicionar imagens, parágrafos, cabeçalhos, códigos curtos e muitas outras opções disponíveis Se você clicar em navegar, você terá diferentes tipos de opções para adicionar qualquer outra coisa Você pode ver que aqui está a opção do Google hero exemplo, se você quiser adicionar um controle deslizante ou uma seção de heróis à sua página inicial, você pode adicioná-la aqui Mas não apenas essas coisas, você terá muitas opções para adicionar ao seu site. Está bem? Portanto, muitas opções estão disponíveis. Você só precisa bicar a partir daqui e usá-lo em seu site Tudo bem. Então nossa estrutura está pronta, mas agora é hora de projetar, e nós queremos. Queremos aplicar um novo design ao nosso tema porque temos a estrutura, temos a arquitetura, mas ainda não temos o design. E agora é hora de fazer o design. E em nossa próxima lição, aprenderemos como você criará um design e como conectará esse design ao seu tema atual. Ok, então esta lição é sobre hospedagem e solução de problemas, mas até o momento, ainda não temos nenhum problema porque o tema está funcionando perfeitamente Não temos nenhuma falha. Não temos nenhum problema. Portanto, essa é uma boa prática pois ao criar qualquer tema, se você tiver algum problema, seu tema não será instalado na hospedagem. E durante a instalação, você terá o erro e poderá ver que instalamos o tema, mas não recebemos nenhum erro. Isso significa que nosso tema está funcionando perfeitamente. E esse é um dos principais benefícios de usar o modelo Cloud OPS. Você pode ver que usei o modelo OPS da minha experiência anterior, uso o modelo Sont e criei muitos temas com o modelo Sonnet E com o Sonnet, eu tenho algumas hastes, tenho alguns glaches, mas com a versão Opus 4.8, e além da versão fable, obtive a saída perfeita mas com a versão Opus 4.8, e além da versão fable, obtive a saída perfeita. Tudo bem. Então, criamos o tema e, em nossa próxima lição, criaremos o design e aplicaremos o design ao nosso tema. 6. Aplique design ao tema: Olá, pessoal. Bem vindo de volta. Mais uma vez, e nesta lição, aprenderemos como você adicionará design ou como aplicará design ao tema. Então, anteriormente, acabamos criar o tema e você pode considerar o tema como o corpo e o design como um vestido. Então, agora vamos colocar o vestido no corpo, certo? Portanto, temos que fazer o design primeiro e, portanto, precisamos criar um PRD chamado documento de requisitos do produto também precisamos criar um PRD chamado documento de requisitos do produto para a peça de design E o design que não criaremos por meio da nuvem. Faremos o design com o Google Stitch. E você pode ver na minha tela que abri outro navegador e, no meu navegador, abri esse EL, e o nome desse ERL se chama stitch.withgoogle.com E esse Google Stitch é um produto do Google. E com este site ou com este aplicativo, faremos o design do nosso tema. Mas qual será o design? Qual será a paleta de cores? Qual será o tom, tudo, temos que tirá-lo da nuvem. É por isso que precisamos perguntar ao Cloud qual será o design e, portanto, precisamos escrever alguns prompts no Cloud. Portanto, vamos voltar para a nuvem e, aqui, você precisa escrever um prompt. Deixe-me escrever a solicitação e você pode seguir o que estou escrevendo. Preciso aplicar o design ao tema e ao design. Preciso criar pelo Google Stitch. Agora, me dê um PRD imediato para o design que aplicarei no Google Stage. OK. Então, mais uma coisa que eu preciso escrever sobre as imagens, porque a imagem da paleta de cores, é isso que eu tenho que mencionar aqui, e agora vou inserir a imagem sobre a paleta de cores, sobre o padrão Isso é o que eu vou escrever agora. Eu quero o Google Stitch, crie as imagens para o design por IA e use uma cor atraente para o O design deve parecer profissional. E moderno, vou te dar o design do Google Stitch em formato STML e CSS, e você tem que aplicar o design ao tema Ok, então esta é a nossa solicitação e, com essa solicitação, obteremos o PRD ou a solicitação do Google Stig, copiaremos a solicitação daqui e a usaremos no Google Stage Então, vamos revisar sobre o aviso o que eu escrevi. Então, em última análise, eu escrevi aqui. Preciso aplicar o design ao tema e ao design que preciso criar pelo Google Stage. Está bem? Então, aqui, eu mencionei a partir de qual plataforma vou gerar meu design. Agora, me dê um prompt e um PRD para o design, que aplicarei no Google Stitch Eu quero o Google Stitch, crie as imagens para o design com IA e use uma cor atraente para o Se você tem algum design esperado, nesse caso, pode escrever aqui que a cor primária será o roxo ou o verde ou qualquer cor que você queira colocar no seu design. Você pode escrever aqui se tiver alguma cor específica escolhida, certo? E se você não tiver, nesse caso, basta dar o comando básico. Nesse caso, a IA gerará a paleta de cores para você. OK. Então, o que eu escrevi sobre design deve ser que o design tenha uma aparência profissional e moderna Eu lhe darei o design do Google Stitch em formato HTML e CSS, e você deverá aplicar o design ao tema OK. Então, em última análise, o Google Stitch gera o design no formato HTML CSS Portanto, mencionei aqui que vou dar o design no formato HTML CSS, e Claude terá que compatibilizar o design com o tema OK. E embora apliquemos o design na nuvem, ele enfrentará alguns erros e, portanto, aprenderemos sobre a solução de problemas ao aplicar o design do Google Stage, certo? Então, vamos clicar no botão enviar e temos que esperar alguns instantes, pois isso levará um pouco de tempo. E certifique-se de usar o modelo Opas porque o modelo Opas realmente funciona bem E você pode ver na primeira parte que ele fornece o prompt do Google Stitch e você pode ver que está fornecendo o prompt do Google Stitch aqui e temos que apenas copiar as páginas. Quero dizer, temos que copiar tudo daqui e colá-lo no Google Você pode ver que a primeira parte está pronta e agora temos que esperar pela segunda parte e tudo gira em torno do design PRD. E aqui vamos nós. Temos duas coisas aqui. Como resultado, você pode ver na segunda parte que obtivemos o PRD de design e, na primeira parte, abordamos o prompt do Google Stitch Então, precisamos aplicar essas duas coisas no Google Stitch. Mas antes disso, eu quero usar um único prompt porque usar dois prompts é complicado. Portanto, quero mesclar essas duas coisas em uma única. É por isso que você precisa modificar ou escrever outro prompt aqui, e estou fechando a guia do lado direito para a visualização. E aqui vou escrever que preciso um prompt para design e PRD para o Google Stitch Dê-me uma cópia para usar o prompt de design e PRD no local, para que eu possa aplicar os dois ao mesmo tempo Então, o que eu escrevi é que preciso de um prompt para o design e o PRD para o Google Stage Dê-me uma cópia para usar o Design Prompt e PRD pessoalmente, para que eu possa aplicar os dois ao mesmo tempo Ok, então eu estou clicando no botão de enviar mensagem, ou você pode apertar o botão de introdução do seu teclado E agora recebemos uma solicitação combinada para o designer. Você pode ver no lado direito, agora temos a opção de copiar. Você pode ver que aqui está a opção de cópia, então podemos simplesmente usar a opção de cópia e copiar inteiramente o prompt de design, bem como o PRD. Então, tudo o que você pode ver aqui, tudo é fornecido de acordo com as instruções que fornecemos aqui. Ok, legal. Então, vou copiar daqui e você pode ver que foi copiado para minha placa climática, e agora estou voltando ao Google E no Google Stitch, verifique se você não está usando esta versão do aplicativo, pois esse aplicativo é basicamente usado para criar o design do aplicativo móvel Mas, como vamos fazer o design para a versão web, é por isso que você precisa ter certeza selecionar a versão web e, em seguida, colar aqui , colar aqui, e você pode ver o prompt e o design que eu colei aqui e você pode ver que ele fornece diferentes tipos de paleta de cores, bem como Tudo é fornecido aqui, certo? Depois que tudo estiver colado, você poderá clicar no botão genet. Ou se você tiver algum logotipo ou se tiver alguma imagem específica, nesse caso, você pode usar este sinal de adição e, em seguida, você terá a opção de upload de arquivos. Portanto, se você tiver algum logotipo, se tiver alguma imagem de herói ou imagem deslizante, nesse caso, você pode usar essa opção de upload de arquivos e adicionar as imagens Mas desta vez, não vamos fazer upload ou adicionar nenhuma imagem específica, vamos usar uma imagem gerada. Portanto, vou clicar no botão Gerar. E depois de clicar no botão gerar, levará muito tempo porque ele criará algumas páginas, criará alguns designs e, para concluir todo o processo, levará um pouco de tempo. Você pode ver que precisa ficar de olho no lado esquerdo, você pode ver que um círculo está se movendo aqui, um círculo está se movendo e a imagem está sendo criada aqui, a página está sendo criada aqui. Então você tem que esperar até que o carregamento ou o círculo de processamento parem de se mover, certo? Então, o círculo ainda está se movendo. Isso significa que o processo está em andamento e você pode ver que o palco do Google está esboçando nosso design Ok, então você pode ver que pode ser a página inicial , pode ser a página do produto e pode ser a página de detalhes. Tudo está sendo criado de acordo com nossas instruções. Portanto, temos que esperar até que todo o processo seja concluído. Em seguida, exportaremos o design e o exportaremos para o coágulo. Portanto, temos que esperar até que cada processo seja concluído. Então, vamos lá. Agora você pode ver que o processo foi interrompido. Isso significa que o círculo está parado. Isso significa que todo o processo está concluído. E no canto inferior direito, você pode ver as sete pessoas. Isso é tudo sobre o Zoom. Então, se você quiser aumentar o Zoom porque você pode ver o Google Stage criado, o número de imagens, e essas imagens são geradas por IA. Então, estávamos procurando as imagens, e é por isso que, de acordo com nosso comando, a imagem é gerada por meio da IA e são criadas algumas páginas. Então você pode ver que todas as páginas são criadas aqui, esta é a página inicial, esse é o menu e esses são os detalhes do produto Ok, legal. Então, agora temos que exportar essas coisas. E para exportar, o que você precisa fazer? Você precisa selecioná-lo e garantir que tudo esteja selecionado. Caso contrário, se algum elemento imagem ou algumas páginas estiverem faltando, o design não será aplicado corretamente. Portanto, você pode ver aqui que você precisa usar essa opção de seleção e, em seguida, selecionar as imagens primeiro, pressionar o botão shift do teclado e selecionar todos os elementos passo a passo. Novamente, estou dizendo que tudo deve ser selecionado. Agora você pode ver que tudo está selecionado, e agora precisamos. Agora temos que exportá-lo. E para exportação, você pode ver aqui a opção Exportar. E aqui, se você rolar para baixo, você terá essa opção de zip. Então você só precisa selecionar a opção zip e depois exportá-la. Você pode ver, tem um total de cerca 17,2 megabytes e o design Agora, temos que fazer o upload desse design para o coágulo para aplicar esse design ao nosso tema. Ok, vamos fazer isso. Então eu preciso voltar ao meu coágulo e aqui está um navegador. E para aplicar esse design, você precisa usar esse sinal de adição e, em seguida, selecionar a opção Adicionar arquivo ou foto. OK. E aqui está o design que acabamos de baixar, então você precisa selecioná-lo e clicar em Abrir. Então, temos que esperar um pouco porque são cerca de 17 megabytes, e você pode ver que o design foi adicionado Agora, você tem que escrever, você tem que escrever o prompt. E aqui, enquanto você tem que escrever, você tem que escrever, eu fiz o upload do arquivo zip do Ditch do Google e o arquivo é gerado a partir do prompt e do PRD que você forneceu Agora, aplique um design do arquivo Z e adicione-o ao tema. Ok, então o que eu escrevi aqui no prompt, eu fiz o upload do design e depois escrevi aqui. Eu fiz o upload do arquivo Z do Google Stitch, e o arquivo é gerado partir do prompt e do PRD que você forneceu Agora, aplique o design do arquivo Z e adicione-o ao tema. OK. Então você tem que fazer isso. Você precisa enviar a mesma mensagem, e isso levará um pouco mais de tempo e fará algumas perguntas. E você pode ver que o arquivo Z está sendo extraído. Está bem? Então, ele extraiu o arquivo Z. E o que essa caneta aqui, boas seis páginas HTML design dot md. Este MD significa markdown e 11 imagens. Deixe-me ler o documento do sistema de design e a marcação da página. Ok, vou demorar um pouco mais. Você precisa esperar até que o processo seja concluído e, uma vez concluído, ele nos fornecerá o arquivo Z ou, se você enfrentar algum problema , você terá os problemas aqui. Claude informará qual é o problema Aqui vamos nós. Recebemos nossa saída e, você pode ver, ela fornece um total de três arquivos diferentes, quanto mais design de restaurante, é sobre CSS e o arquivo do tema é sobre o formato JSON, ok? Mas será complicado para você aplicar o arquivo de design separadamente, esse arquivo de tema separadamente. Portanto, você precisa se preparar para usar o arquivo. Portanto, vou escrever outro prompt. Em seguida, temos um zíper e o design será aplicado ao zíper. Portanto, você precisa escrever um aviso aqui. Preciso de um arquivo Zip do tema pronto para usar , onde esse design seja aplicável e fique visível após a instalação do tema na hospedagem. Ok, então eu escrevi aqui. Preciso de um arquivo Z de tema pronto para usar onde esse design seja aplicável e fique visível após a instalação do tema na hospedagem. Está bem? Depois de escrever isso, você terá um único G. E, novamente, eu estou apertando o mesmo botão de mensagem, e você tem que esperar um pouco porque vai demorar um pouco. Então vamos lá Nós nos preparamos para instalar o arquivo Z em 1 segundo. E você pode me perguntar então por que isso realmente acontece. Este leia-me é um arquivo onde você terá a orientação de como instalar o que é necessário para esta equipe. E você pode ver que é necessária a versão 6.4 do Wordpress e a versão 7.4 do PhBour OK. E aqui está uma orientação de como essas coisas estão funcionando. E foi colocado um importador de demonstração para o conteúdo. Está bem? Portanto, é fornecido um botão de importação de demonstração para importar o design que criamos Então, primeiro, o que temos que fazer? Temos que baixar esse tema Moholrstaurant. Assim, você pode clicar neste botão de download e ver que o download foi concluído e o tamanho do arquivo foi transformado em 1,7 megabyte, e agora temos que enviá-lo para nossa hospedagem principal Vamos voltar ao Google Chrome. Aqui, abri meu administrador do WordPress e excluí. Não apliquei o tema Portanto, vamos dar uma olhada na aparência do design atual, e este é o meu design atual. Agora eu quero fazer o upload para upload, o que você precisa fazer é ir até a aparência a partir daí e clicar nessa opção de tema. Em seguida, temos que acessar o tema do anúncio e enviá-lo. E aqui, você deve ir até a opção Escolher arquivo. Portanto, você precisa ir até a opção Escolher arquivo. E aqui está nosso arquivo Zip, e você pode ver esse MobleRestaurant. Isso é o que acabamos de baixar da nuvem. Você só precisa selecioná-lo e clicar em Abrir e clicar em Instalar agora. Em seguida, solicita que eu substitua o arquivo porque já fizemos, já temos um tema com o mesmo nome instalado e, novamente, fizemos o upload. É por isso que você precisa clicar nesta substituição instalada com a carregada. Está bem? E agora você pode ver, agora você pode ver que a instalação do tema está concluída. Assim, você pode ver a equipe atualizá-lo com sucesso, está escrito aqui e agora você pode pensar que o design é aplicável em nosso site principal. Então você realmente acha que a resposta é não? Então, para ter certeza de que vou vou visitar meu RL principal e clicar neste botão de atualização, e ele ainda terá a mesma saída porque o design ainda não foi aplicado Então você pode me fazer a pergunta. O tema é carregado e atualizado, então por que o design não é aplicado. Então, se você se concentrar em nosso arquivo Leia-me, você pode ouvir que você pode ver aqui no arquivo Leia-me, temos que configurar a demonstração primeiro porque o design que enviamos ou criamos a partir do Google Stage foi adicionado ao tema. Funcionou como um conteúdo de demonstração e precisamos importar a demonstração. E para importar a demonstração, o que você precisa fazer? Você precisa recarregar a página ou ir diretamente para o painel e, em seguida, terá a atualização Então, eu estou clicando no painel, e agora você pode ver que temos uma opção para configurar a demonstração, e então você tem que clicar em Configurar a demonstração, e então você terá esse conteúdo de demonstração de importação. Então, quando você clicar em importar conteúdo de demonstração, ele começará a importar a demonstração Está bem? Assim, você pode ver a importação concluída. Você pode ver aqui uma notificação Importação concluída, seis pratos e duas páginas criadas. Então, mais uma coisa que quero dizer que, ao importar a demonstração, algum momento a página inicial pode estar faltando, em algum momento uma página adicional pode estar faltando e, se alguma coisa estiver faltando, nesse caso, aprenderemos como corrigi-la Então, agora é hora de aplicar a aparência exata que adicionamos. Então, para dar uma olhada, você pode acessar o meu blog aqui e, a partir daqui, você pode usar este site de visualização, e eu estou abrindo em uma nova guia. Ok, então você pode ver aqui está a demonstração. E como eu estava dizendo isso, podem faltar algumas páginas, alguns menus. Portanto, você pode ver que o estilo da nossa página inicial ainda está ausente. Mas vamos dar uma olhada se o menu ou outro está funcionando ou não porque tínhamos o cardápio, tínhamos os detalhes do produto. Portanto, vou verificar o menu a partir daqui, então estou clicando no menu e você pode ver que o menu está funcionando perfeitamente e você pode ver que a página do menu está funcionando perfeitamente. E agora precisamos dar uma olhada detalhes do produto estão funcionando ou não. Portanto, preciso selecionar um produto e vamos lá. Recebemos os detalhes do nosso produto e está realmente funcionando bem. Você pode ver o preço fornecido aqui. Aqui está a imagem. Aqui está o título e aqui estão os detalhes do produto. E para reservar, você pode ver, temos uma opção de mesa de reserva, mas ela ainda não está funcional Portanto, você precisa aplicar outros plug-ins. Ok, mas sim, em última análise, temos quase todos os designs aqui, mas exceto que temos a página inicial não aplicada aqui Portanto, precisamos fazer algumas alterações imediatamente. E para aplicar a página principal, precisamos fazer uma captura Está bem? Portanto, você precisa fazer uma captura ou usar as ferramentas de captura de tela, e forneceremos a captura de tela do coágulo informando e forneceremos a captura de tela do coágulo que problema Então é isso que precisamos fazer agora. Então, aqui, fiz minha captura e estou voltando para a nuvem. Essa é minha nuvem. E aqui, estou colando e preciso escrever um aviso que estou escrevendo aqui O design da página inicial não foi adicionado. resto do design foi adicionado, mas certifique-se de que o design da página inicial do Google Stitch seja aplicado Ok, então eu fiz a captura de tela, e você só precisa tirar a captura de tela daqui e colá-la diretamente Você pode usar Control plus V, ou você pode usar este sinal de mais e, a partir do sinal de mais, você pode adicionar a captura de tela onde você definiu Está bem? Ou você pode, para tirar a captura de tela, usar a ferramenta de captura de tela Portanto, se você for até a barra de pesquisa e escrever as ferramentas de captura de tela, nesse caso, poderá fazer a captura de tela a partir daí OK. Então, mencionamos aqui a página inicial não é e na verdade, o design da página inicial não foi adicionado OK. O resto do design foi adicionado, mas certifique-se de que a página inicial foi criada a partir do Google Speech Deve ser aplicado e, em seguida pressiono o mesmo botão de mensagem Então, agora temos que esperar porque Claude resolverá o problema, e você pode ver aqui, Cloud alreadyml, eu posso A página inicial está renderizando o herói e o bloco de notas do menu como texto simples, em vez do bloco de design real Está bem? Portanto, demorará um pouco até que o processo seja concluído pela nuvem, temos que esperar. E aqui vamos nós. O processo está concluído e o novo arquivo é gerado a partir de nossa nova solicitação sobre o design da página inicial E você pode ver que o novo arquivo foi criado e eu tenho que baixá-lo. Então, estou clicando em Baixar. Como baixe-o. Ok, agora temos que fazer o upload do tema para nossa hospedagem, não realmente hospedar sobre nosso Wordpress e, portanto, você sabe para onde ir , a aparência a partir daí, você tem que ir até um tema, adicionar tema e enviá-lo. E a partir daqui, temos que escolher o arquivo. Então, eu estou selecionando a opção escolher arquivo, e aqui está o meu arquivo e você pode ver que hoje eu acabei de baixar, e aqui está o restaurante Mogul. Você precisa selecioná-lo e clicar em Abrir. E então você precisa clicar no botão Instalar agora, e isso demorará um pouco porque o tamanho do arquivo é maior do que antes. É por isso que levará alguns minutos e, em seguida, você precisará ativar ou substituir a versão atual. Então, vamos esperar. Então, aqui está a opção. E como eu estava dizendo a versão anterior já foi enviada, mas vamos adicionar a nova versão. É por isso que temos que usar essa instalação substituta com o upload. Está bem? Porque a anterior é 1.2, e agora a versão do arquivo que enviamos é sobre a versão 1.2 0.1. É por isso que está solicitando a substituição e a instalação do novo. Portanto, você precisa usar a substituição instalada com a carregada. Ok, agora você pode ver que temos a opção a partir daqui e agora vamos recarregar Mas mais uma coisa: você precisa garantir que a velocidade de carregamento do tema seja mais rápida, pois mencionamos em nosso PRD sobre o desempenho Agora vamos dar uma olhada em como é, e você pode comparar antes e o depois agora, para ver aqui que design do campo inicial é aplicado acordo com nosso design importado do palco. E agora deixe-me rolar para baixo e agora você pode ver tudo o que recebemos de acordo com nosso prompt. Então, aqui está a seção de heróis e você pode adicionar a imagem aqui, e aqui os menus, e aqui está tudo sobre os detalhes do produto. Mas isso é tudo no tema anterior, não temos essa página inicial, certo? Então, tínhamos todos os menus, tudo o que tínhamos, exceto o design da página inicial, e resolvemos o problema com nossa página inicial E agora vamos dar uma olhada se os botões estão funcionando ou não. Então, vamos clicar no filtro. E se isso não estiver funcionando, se o botão não estiver funcionando, nós o corrigiremos. Então, deixe-me clicar no filtro como o Berry Ai e você pode ver que o filtro Bryan está funcionando, e você pode ver aqui se o Bryan está Agora vamos clicar nos pães e você pode ver o item de pães que está sendo exibido sobre os caril, aqui sobre a sobremesa, ouça sobre os cubobs e ouça sobre as Em última análise, cada filtro e cada botão estão funcionando e funcionando. Certo. Então, de acordo com nosso aviso, agora temos o tema perfeito. Então, tivemos um problema com nossa página inicial, mas o problema foi corrigido. Então, espero que você tenha tido uma ideia de como criar um tema do zero, como aplicar o design do Google Stage e, em seguida, como conectará o design ao seu tema e como solucionará o problema Então, tudo o que aprendemos aqui. Então, espero que você tenha gostado desta lição e, se tiver alguma dúvida, pode me perguntar na seção de comentários ou na seção de discussão. Então, se você tiver algum problema, para que eu possa responder aí e mais uma coisa, vou dizer que, se você tiver a assinatura nesse caso, pode começar a criar um tema como eu, ou pode simplesmente copiar o PRD e todas as informações relevantes necessárias que forneci dentro da pasta de recursos Portanto, se você não conseguir criar o PRD perfeito, basta copiar do arquivo de recursos Eu coloquei o PRD dentro do arquivo de recursos, então você pode simplesmente copiar e começar a criar o tema Ou você pode criar seu próprio PRD e criar seu próprio tema com um nicho diferente Porque aqui, eu criei sobre o tema do restaurante, mas em vez do tema do restaurante, você pode criar um tema de caridade, um tema de ONG, tema de notícias Dependendo da sua escolha, você pode criar o tema como quiser, certo? Então, espero que tenham gostado da aula, e espero que tenham vocês em nossa próxima aula até lá Cuidado e adeus, pessoal 7. Crie um plugin de lista de tarefas.: Olá, pessoal. Bem-vindo de volta mais uma vez. E nesta lição, aprenderemos como ele criará plug-ins. Então, na lição anterior, aprendemos sobre como ele criará um tema, mas desta vez aprenderemos como ele criará um plug-in, e é tudo sobre o plug-in do wordpress porque estamos focando no Wordpress e agora você já tem a ideia de qual processo deve seguir. No início, no que você precisa se concentrar, você precisa se concentrar no PRD. Portanto, como vamos criar uma lista de tarefas, contaremos com a ajuda do EI e o EI fornecerá todos os detalhes necessários, pegaremos o PRD a partir daqui e aplicaremos ao coágulo Está bem? eu sempre prefiro o GMNE para escrever o PRD porque o JM&E fornece o PRD perfeito, mas eu analiso todas as outras plataformas, o site de IA dos Então, vamos começar a escrever o PRD, e, você sabe, eu sempre prefiro o GMNE para escrever o PRD porque o JM&E fornece o PRD perfeito, mas eu analiso todas as outras plataformas, o site de IA dos agentes de IA. Mas descobri que um JMI PRD funciona bem e realmente fornece a saída perfeita com o Portanto, se você combinar o GME com o coágulo , ele terá a melhor saída Ok, então vamos começar a criar o PRD. Então, o que você tem que escrever no prompt, você tem que escrever, eu quero fazer uma lista de plugins do Wordpress para fazer. E eu preciso do PRD para isso. Vou desenvolver os plugues com um pano. E eu preciso que todos os recursos essenciais para o plug-in de lista tarefas sejam fornecidos no PRD. Ok, então eu escrevi um prompt muito simples, e vamos revisar o prompt que eu escrevi aqui Então, eu escrevi que quero criar plug-ins do Wordpress para o Todo List e preciso do PRD para isso Vou desenvolver os plug-ins com o Cloud e preciso que todos os recursos essenciais para plug-in da lista Todo sejam fornecidos no PRD. Portanto, é um aviso muito simples e, em seguida, aperto o botão de introdução E você pode ver que o processo foi iniciado e, aqui, todos os detalhes já fornecidos. Portanto, o nome do projeto é mencionado aqui sobre o fluxo de tarefas W. Então esse será nosso título provisório. E em vez deste, se você quiser colocar um nome específico, você pode escrever aqui porque anteriormente demos o nome ao nosso tema como um restaurante Mughul, mas desta vez não fornecemos nenhum nome específico Então você pode escrever o nome aqui. Então, se você tiver o nome, caso contrário, Jamie gerará o nome gerado pela IA Assim, você pode ver esse fluxo de tarefas do WB, é o nome do projeto gerado pela IA Em seguida, é fornecido sobre a visão geral e a meta do produto e, em seguida, sobre o público-alvo e os principais casos de uso. No número três, tudo gira em torno da arquitetura do sistema. E no número quatro, ele forneceu um modelo diferente sobre a especificação do recurso. E no número seis é fornecido tudo sobre a execução. Ok, então ele fornece tudo aqui, e agora temos que usar outro prompt de cópia para uso e pronto para uso. Agora, o que você tem que escrever, você tem que escrever. Agora, prepare-me para usar e copie para usar o PRD. Então, você escreverá esse prompt e, quando pressionar o botão de entrada, Jamini fornecerá a cópia para o prompt PRD, e você só precisará copiar daqui e colar E aqui vamos nós. mas você precisa ter certeza de que, antes de copiar esse PRD, cada ponto, cada recurso está incluído ou não, porque eu tenho alguma alucinação e, com a alucinação, às vezes ela pula, e é isso que Aqui está nosso PRD, mas você precisa ter certeza de que, antes de copiar esse PRD, cada ponto, cada recurso está incluído ou não, porque eu tenho alguma alucinação e, com a alucinação, às vezes ela pula, e é isso que estou contando da minha experiência anterior. Então, deixe-me rolar para baixo. E sim, você pode ver as três primeiras colocações adicionadas na cópia usam PRD, mas o número quatro, o número cinco e o número seis não são adicionados aqui Então, nós temos que fazer isso. Temos que garantir que todo o módulo, todos os pontos, sejam incluídos na cópia para usar o PRD. Portanto, precisamos. Temos que escrever mais uma coisa. Precisamos escrever todo o PRD em M pronto para usar e copiar o PRD Todo o PRD não está incluído. E pronto para usar e copiar para usar o PRD. E mais uma coisa, preciso garantir que, para executar, você precise solicitar à nuvem que conclua um processo ou uma etapa por vez Caso contrário, se você fornecer todo o PRD de uma vez, Cloud terá alguns problemas o token, com os Portanto, em cada módulo, Claude fará a pergunta A nuvem iniciará a próxima etapa ou não, como fizemos antes em nossa aula de criação de temas. É isso que queremos seguir, o mesmo processo aqui. Depois de concluir uma etapa, Claude deve me pedir permissão para iniciar a segunda etapa incluindo este comando interno, PRD. OK. Então, o que eu escrevi aqui todo o PRD não está incluído no PRD pronto para usar e copiar para o PRD Depois de concluir uma etapa, Pod deve me pedir permissão para iniciar a segunda etapa, incluindo esse comando dentro do PRD. Ok, agora estou clicando no botão enviar. E agora vamos aguardar a saída. Aqui, a cópia para usar o PRD aparecerá. Ok, agora temos que verificar mais uma coisa, mas você pode ver aqui que os números quatro, cinco e seis ainda não estão incluídos aqui. Portanto, preciso de uma solicitação final e, aqui, preciso escrever um PRD completo e pronto para usar, onde todas as etapas e processos estão incluídos Me dê uma cópia para usar o formato. O que escrevi aqui é um pacote completo pronto para uso , onde todas as etapas e processos estão incluídos, forneça o formato cópia para uso e agora estou apertando o botão enviar E aqui vamos nós. E você pode ver que ainda temos o mesmo problema. Na verdade, isso é chamado de alucinação da IA, mas você não precisa se preocupar com o fato de eu estar mostrando como você pode copiar as coisas digitadas, exceto Se você estiver usando o módulo Enter dentro da cópia, tudo bem. Mas se você não está recebendo , não precisa se preocupar, basta rolar para baixo. E então você terá essa opção de resposta de cópia. Portanto, você pode usar essa opção de resposta de cópia. E agora vamos voltar ao nosso coágulo e você só precisa uma nova opção de bate-papo e garantir que a modelo esteja alta aqui em vez de alta Agora vou usar essa opção máxima. Está bem? Portanto, essa é a opção máxima. Vou usar este ou agora você pode ver em vez do Opus 4.8, agora temos o Opus Então, agora vamos usar esse novo modelo porque o Opus cinco é mais avançado e o Opus quatro pontos É por isso que vou usar o Opus cinco. E com o Opus five, acho que o alto é perfeito porque, se usarmos o esforço máximo, nesse caso, isso consumirá muitas fichas Portanto, vou manter o grande esforço com o modelo Opus five Anteriormente, estávamos usando o Opus 4.8, mas é a versão mais recente e foi lançada ontem, e é por isso que vou usar esse Opus E agora vamos colar. você pode ver, eu colei aqui, e agora você pode apertar o mesmo botão de mensagem e esperar, pois levará um pouco mais de tempo e, em cada etapa, ele solicitará a permissão para iniciar uma etapa secundária, como Portanto, temos que esperar até que esse processo seja concluído. E aqui vamos nós. Você pode ver que nossa primeira etapa foi concluída e você pode ver que muitos arquivos foram fornecidos aqui no formato PHQ E agora ele pediu que eu iniciasse a segunda etapa. Então eu tenho que dar a permissão, e temos que dar uma olhada no uso da nossa estação atual. Então você pode ver que eu já consumi cerca de 30% da minha estação atual e, portanto, tenho que tomar cuidado com o limite atual porque se a apresentação terminar durante a execução de um processo , podemos ter algumas falhas ou podemos ter algum É por isso que é sempre boa prática dar uma olhada em sua estação atual. OK. Então, agora, para começar a segunda etapa, você tem que escrever aqui, sim. Começar. Etapa dois. E então você tem que apertar o botão de introdução do seu teclado ou você pode usar este botão de enviar mensagem E você pode ver que o processo dois foi iniciado. Então, novamente, temos que esperar até que o processo dois seja concluído. Portanto, nossa etapa dois está concluída e agora está solicitando a etapa três. E agora precisamos dar uma olhada em quantas sessões atuais são consumidas. Anteriormente, tínhamos 30%. Agora vamos dar uma olhada e você pode ver que se transformou em 37% Isso significa que, com o comando atual, é consumível 7% em nossa sessão atual Ok, então deixe-me concluir todas as etapas e vamos direto para a nossa saída final, pois isso levará muitas vezes. E toda vez que preciso, tenho que escrever aqui a etapa três, aqui começar, a etapa quatro, cinco, da mesma forma. Então, deixe-me concluir todas as etapas. E quando chegar a última vez, começaremos nossa aula a partir daí. Ok, então toda a nossa etapa está concluída e agora você pode ver que não está pedindo o início da outra etapa Em última análise, um total de cinco etapas é concluído. E se eu rolar para cima, você pode ver aqui, que está prestes a começar a etapa cinco. É sobre a etapa quatro e assim por diante. Mas agora temos a saída final aqui, e você pode ver que o nome do nosso plugin é fluxo de tarefas WP, certo? Então você pode ver que é o que temos aqui. Temos um nome de arquivo diferente, mas não precisamos de um nome de arquivo diferente Precisamos de plug-ins prontos para usar. E, portanto, precisamos escrever mais uma coisa. Eu quero usar no WPadmin e me dar o plugin zFle pronto para usar Ok, então se você usar esse prompt, você terá uma única pilha G e poderá fazer o upload para o administrador do WP e, em seguida, poderá usá-la E será mais fácil em vez de usar esse total de quatro arquivos diferentes. E agora estou totalmente me preparando para usar o formato. Está bem? Portanto, temos que esperar até que o edifício Z seja concluído. E aqui vamos nós. Temos nosso arquivo Z aqui e ele forneceu alguns problemas sobre o erro. Por exemplo, se uma tarefa não for salva, execute o WP Dbug. Tudo isso tem a ver com o Dbug e esse é o processo como você corrigirá o erro Mas se o erro aparecer, teremos que seguir essas coisas e aprenderemos como você corrigirá o erro. Mas agora temos o arquivo WTs low Z e precisamos fazer o download primeiro Então, onde clicar em Baixar e você verá que o download está concluído. Agora temos que testá-lo. Ou está funcionando ou não. Então, vamos experimentar nosso administrador do WP. Então, vamos lá. Você pode ver no meu navegador que eu abri o mesmo tastedkillfod.com desta ARL, e aqui, desta vez não vamos com Desta vez, desta vez, não vamos continuar com isso porque isso não é um tema. É um plug-in. E, portanto, você precisa escolher a opção de plug-ins. A partir daí, você deve usar isso na opção de plug-ins. E então você terá essa opção de plug-in de upload e os processos como antes, você deve escolher o arquivo, e este é o nosso arquivo, o fluxo de tarefas W, e você precisa clicar em Abrir e clicar em Instalar agora. Vou demorar um pouco. E você pode ver que a instalação do plugin foi bem-sucedida e agora temos que ativá-lo. E para Ativar, você precisa clicar neste botão de ativação do plugin. Ok, vamos lá. Você pode ver que nosso plugin está ativado. E se nosso plugin tiver algum erro ou problema, nesse caso, você pode receber a mensagem de erro aqui. Mas o plug-in foi construído com sucesso e o plug-in foi ativado com sucesso, e você pode ver a mensagem para a ativação bem-sucedida do plug-in. E agora, onde você vai conseguir as coisas. Você obterá as configurações. Você pode ver no site. Temos uma nova configuração, e isso é tudo sobre a minha lista de tarefas. Então, a partir daqui, você tem que definir sua tarefa, certo? Então, deixe-me clicar aqui, e você clicará aqui, você terá tudo de acordo com suas necessidades. Portanto, você pode ver aqui que temos uma lista de tarefas pendentes e concluídas e, para adicionar a mesa, temos os problemas. Então, vamos adicionar uma tarefa aqui. Então você pode escrever aqui. Preciso adicionar tarefas como ter uma reunião com o NGB. Ok, então eu tenho uma reunião com NGB e isso é o que eu mencionei, e isso estará na minha lista de tarefas E é sobre a prioridade. É prioridade média ou alta prioridade ou baixa prioridade. Então, eu vou dizer a alta prioridade. E quando a reunião acontecer, você deverá definir a data aqui, para poder ver a data do calendário. E aqui, eu quero definir cerca de 28. Ok, então eu marquei a data. E se precisar de outros detalhes, nesse caso, você pode usar isso para adicionar detalhes com frequência. E quando você usar esse recurso de adição de detalhes com frequência, você terá o campo para adicionar os nós. Como se fosse sobre desenvolvimento de CRM. Ok, então eu tenho uma reunião com NGB e é sobre o desenvolvimento do CRM. Eu fiz uma anotação aqui e depois vou clicar aqui na opção de tarefa. Então você pode ver que o processo está começando. E agora você pode ver que a tarefa foi adicionada e ainda está pendente. E você pode ver aqui que está na lista pendente. Portanto, quando minha tarefa for concluída, você poderá excluí-la daqui ou ela será concluída automaticamente, excluí-la daqui ou ela será concluída automaticamente pois será automaticamente marcada como a tarefa completa quando a data terminar. Então é assim que você pode criar uma lista de tarefas com carga, e você pode ver que ela está totalmente funcionando, totalmente funcional e funcionando bem. Portanto, esse é um processo simples. Então, agora vamos revisar desde o início, isso vai te ajudar. Então, o que fizemos. Então, em última análise, pegamos o jami.google.com, esse URL e aqui, criamos nosso PRD criamos nosso Este é o PRD, e nós copiamos daqui. Em seguida, usamos o Cloud, um novo bate-papo, e colamos o bloco copiado aqui Eles são colados e, em seguida, o processo é iniciado pela nuvem e só precisamos dar a permissão, e demos a permissão para iniciar cada etapa E, finalmente, obtivemos a saída dessa maneira. Mas com essa saída, será fundamental que você se inscreva na hospedagem ou no WP Admin, porque se você não tiver a tecnologia anterior nesse caso, será complicado para você É por isso que escrevi outro prompt e, com esse prompt, fiquei pronto para usar apenas uma pasta. E foi isso que baixamos da pasta em nosso computador. Em seguida, voltamos ao nosso painel do WordPress, e este é o nosso painel, estamos logados E então, a partir do botão de plug-ins, instalamos um botão de plug-in e, em seguida, ativamos o plug-in. E agora você pode ver que temos nossa lista de tarefas aqui e, para o teste, escrevemos um nome aqui. Nós editamos os detalhes, definimos a prioridade e adicionamos a hora aqui. Ok, então agora você pode me fazer uma pergunta como se algo estivesse faltando, certo? Então você pode ver que temos a data aqui, mas não tínhamos a hora aqui. Então, aqui, você pode seguir duas etapas. Você pode simplesmente escrever a hora aqui. E se você não quer fazer isso, mas se está procurando de uma forma inteligente de forma padrão, nesse caso, você pode usar, você pode usar o lembrete ou pode usar um horário específico aqui Portanto, a reunião será realizada às 10h30 para que você possa definir a hora e mais uma coisa que você pode fazer. para que você possa definir a hora e mais uma coisa que você pode fazer Você pode adicionar uma notificação por e-mail. Portanto, antes da reunião, o e-mail será enviado para seu e-mail pessoal desta hospedagem e você receberá uma notificação. Você pode fazer isso. Portanto, ao aplicar esse tipo de recurso, você deve mencionar que deve mencionar em seu BRD. Em seguida, a hora e o recurso de notificação por e-mail serão adicionados. E o recurso ainda não foi adicionado porque não mencionamos a notificação por e-mail sobre o horário específico. Não mencionamos em nosso PRD. É por isso que o recurso não foi adicionado. Mas se você quiser adicionar a notificação por e-mail, se quiser adicionar a hora, nesse caso, você pode escrever dentro do PRD E como eu disse, não entramos aqui porque o PRD é gerado pelo Google JNE É por isso que não recebemos o recurso. Mas se precisar do recurso, você pode adicionar dentro do PRD ou mencionar enquanto criará o PRD com o JMNE Certo. Portanto, este é o processo simples de como você criará um plugin de lista de duas tarefas para WordPress, e nós o criamos com sucesso. E agora vou solicitar que você crie plug-ins semelhantes ou você pode criar outros plug-ins. E sim, você também pode praticar. E para criar, se você enfrentar algum problema ou se enfrentar algum problema, sinta-se à vontade para me perguntar. Você pode escrever os problemas na seção de comentários ou na seção de discussão, então eu entrarei em contato com você com a resposta. Então eu espero que vocês aventurem essa lição até lá, se cuidem e adeus, pessoal 8. Projeto de curso — Crie uma calculadora usando a programação Vibe: Olá pessoal, chegou a hora do projeto de aula, e vocês podem considerar o projeto de classe como sua lição Então, o que quer que você aprenda, é hora de aplicar sua habilidade de aprendizado com trabalhos práticos. Então, isso é chamado de projeto de classe, e o nome do nosso projeto de classe é criar uma calculadora com codificação E esse será o nosso projeto de classe. E vamos nos concentrar na descrição. É mencionado sobre a criação um aplicativo de calculadora totalmente funcional com codificação Vibe com assistência de EI Neste projeto, você aprenderá como transformar uma ideia simples em um aplicativo funcional escrevendo um prom eficaz, gerando código, refinando o EI, corrigindo erros e adicionando os principais recursos da calculadora, como operações aritmicas básicas e Esta é a descrição do nosso projeto de classe. Agora, temos que focar no que você tem que fazer. Então você tem que seguir os três passos. A primeira é que você precisa abrir a nuvem e vamos nos concentrar em como você fará isso. Então, no meu navegador Firefox, vou abrir a nuvem aqui, e, você sabe, essa é a barra cloudlclod.ai NU, ou você pode simplesmente usar esse sinal de adição para um novo bate-papo Ok, então você terá essa interface semelhante à minha. Ou, sim, você também pode fazer isso em seu aplicativo Cloud em seu smartphone, mas eu prefiro usar a versão Distro Certo. Então, o que você tem que seguir, então você tem que escrever este baile Portanto, o aviso é mencionado sobre o aplicativo web criativo e moderno de calculadora responsiva usando HTML, CSS e JavaScript. A calculadora deve ter uma interface limpa e intuitiva com suporte para operações rítmicas básicas, adição, subtração, multiplicação e divisão, permitindo números decimais, porcentagens, funções claras, atrasadas claras, Inclui suporte para teclado, tratamento adequado de erros, animações de botões suaves e um layout responsivo compatível com dispositivos móveis Organize o projeto em arquivos separados, como ponto de índice, estilo html, ponto css e ponto de script, GSS, usando código limpo, modular e bem comentado que segue as melhores práticas modernas de JavaScript O aplicativo deve estar totalmente funcional e pronto para ser executado simplesmente abrindo o arquivo HTML de ponto de índice em um navegador da web. Então, a partir do prompt, você teve a ideia de qual será a funcionalidade? Ele estará totalmente funcional e será aberto no navegador da web. E se usarmos esse arquivo HTML de índice em um navegador da web, poderemos usar a calculadora. E, finalmente, temos que nos concentrar na etapa três, verificar a funcionalidade. Qualquer uma das calculadoras está funcionando. Então, já abrimos a primeira etapa. Já abrimos o pod, agora temos que copiar esse prompt daqui. E então você tem que colá-lo. E você pode manter o opus cinco, assim como usamos esse modelo opus cinco, então você pode manter o opus E então você tem que apertar o botão de introdução. E você sabe, levará um pouco de tempo para criar a calculadora, porque mencionamos qual será o idioma. Portanto, temos que esperar um pouco até que o processo seja concluído. Então, vamos lá. Temos a saída aqui e você pode ver que temos um total de quatro arquivos. Este é o arquivo Zip e aqui está o índice, aqui está o estilo e aqui está o arquivo de script, como mencionamos em nosso prompt. E agora deixe-me baixar o arquivo Zip. Então, aqui o arquivo é baixado e deixe-me abri-lo. E para abrir, você tem que abrir este, e você pode extraí-lo. Então você pode simplesmente extrair dois diretamente. Então, vou extrair na minha pasta de download. E vamos dar uma olhada se o arquivo está funcionando ou não. Então, vamos dar uma olhada na minha pasta de download. E aqui vamos nós. Extraímos nosso arquivo aqui e temos três arquivos. Esse é o arquivo de índice. Esse é o script e esse é o arquivo de estilo. Então, em última análise, o que mencionamos em nosso prompt, você pode ver que esse arquivo de ponto de índice HTML será usado para abrir em um navegador da web. Então, vamos dar uma olhada se ele está abrindo ou não no navegador da web, então temos que ter certeza de que está abrindo no navegador da web. Portanto, temos que abrir esse arquivo. E aqui está o arquivo de índice. Então, deixe-me clicar duas vezes aqui e você pode ver que a calculadora está aberta no navegador da web. Então, em nossa etapa três, o que precisamos fazer é verificar a funcionalidade. Então, em última análise, a calculadora está funcionando ou não. Temos que verificar isso. Então, vamos verificar isso. E sim, eu vou multiplicar dez é cinco igual a 50. Ok, então, em última análise, a calculadora está funcionando e está totalmente funcional. Então, isso é tudo sobre seu projeto de classe. E agora vamos nos concentrar no resultado do projeto da turma. E ao concluir este projeto, os alunos serão capazes de construir uma calculadora totalmente funcional usando a codificação vibe alimentada por EI Eles aprenderão como escrever um prompt eficaz para gerar, melhorar e refinar o código do aplicativo, criar uma interface de calculadora limpa e responsiva, implementar operações aritmicas básicas, implementar operações aritmicas básicas como adição, subconstrução, multiplicação e divisão, depurar e otimizar um código gerado e executar com sucesso o aplicativo completo da calculadora em um navegador da web Então, a partir do prompt, criamos a calculadora e executamos com sucesso o aplicativo da calculadora dentro do navegador da web, e ela está totalmente funcional e verificamos. Ok. Portanto, a parte final é onde os alunos enviarão o projeto da turma. Portanto, este é um projeto de classe. Você precisa criar o mesmo arquivo e compartilhar seu projeto de classe dentro da seção do projeto ou também pode compartilhar ou postar na seção de discussão. Assim, você pode se concentrar em duas maneiras. Você pode compartilhar diretamente a captura de tela ou compartilhar o URL ou arquivo Z que carregado no Google Drive ou em algum lugar Você pode compartilhar o zFle para que possamos ver como sua calculadora está funcionando Então é assim que você compartilhará seu projeto de classe. Ok, então esta é sua tarefa, e estou muito interessado e animado para ver como sua calculadora está funcionando e como você está fazendo a calculadora, e estou muito animado para dar uma olhada. Então, comece a participar do projeto da classe e compartilhe sua tarefa comigo.