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.