Node Js: Construa seu site de comércio eletrônico parte 2

1. Introdução: Olá e bem-vindo a uma nova turma. Neste, vamos implementar o back-end do nosso projeto, que é criar um site de comércio eletrônico. Como podemos ver aqui, temos nossas páginas de front-end que criamos anteriormente na aula anterior. Se você ainda não viu isso, eu o encorajo a fazer isso. No entanto, se você já conhece os conceitos básicos de CMLCSS e bootstrap, você sempre pode continuar com este curso para aprender o back-end e como podemos trabalhar com coisas como ir de uma página para outra, obter dados do banco de dados e assim por diante Então, vamos discutir todos esses tópicos. Vamos aprender sobre APRs restful, como podemos acessar e publicar nas funções que temos Agora eu vou te dar um tour neste projeto. Por exemplo, aqui temos a página inicial. Como podemos ver, temos as marcas, os mais vendidos e as categorias Por exemplo, se eu for até as marcas, obterei todas as marcas que estão disponíveis para nós no momento, por exemplo, temos Johnson, pressionarei Explorar, serei redirecionado para a página do produto, onde terei todos os produtos da Johnson como Baby Johnson, da Johnson e assim por diante, junto com a categoria de marca de preço e tamanho. Obviamente, se eu pressionar esse item específico, serei redirecionado para o Baby Johnson ou para a página do produto, onde posso ver o bebê Johnson Aqui temos a imagem, no entanto, ela não está sendo exibida no momento porque não está totalmente carregada. Claro, teremos preço, o tamanho da marca, a quantidade. Vamos supor que eu tenha cinco peças. Se eu adicionar ao meu cartão, serei redirecionado para a página de login Nesse caso, preciso colocar meu exemplo, por exemplo, nesse caso, eu criei isso. Obviamente, se eu pressionar o sinal, agora posso comprar ou adicionar esse item ao cartão. Como podemos ver, depois de adicioná-lo, teremos este aqui indicando que tenho um item no meu cartão e, claro, saio aqui em vez de assinar porque já estamos conectados. Agora, se eu for até o meu cartão, posso ver o item aqui. Eu também posso removê-lo. Obviamente, precisarei adicionar o endereço e a forma de pagamento. Então, é claro, se eu tiver um item, também posso fazer o pedido. Deixe-me voltar à marca, por exemplo. Vamos rolar até Johnson e escolher qualquer um deles. Claro, vou escolher a quantidade que é uma. Vou adicioná-lo ao meu carro, tudo parece bom. Agora eu o tenho aqui no meu pedido. Obviamente, se eu fizer o pedido, serei redirecionado para esta página onde verei minhas compras Então, eu tenho uma compra há três dias, e eu tenho uma compra agora, e ambas estão pendentes. Então, vamos examinar todas as páginas uma por uma e atualizar cada uma delas até ter esse projeto completo. Espero que você tenha gostado dessa aula e, dito isso, vamos começar a primeira tarefa. 2. Bancos de dados 1: Olá e bem-vindo de volta. Nesta parte, como dissemos, vamos lidar com o back-end do nosso site. Já construímos todo o front-end. Construímos a página de contato da categoria de marca doméstica, e esta é a nossa página inicial. Como podemos ver, temos as fotos, temos as marcas, os mais vendidos e, em seguida, as categorias E também temos esse, que é o pedido do local, e vamos colocá-lo no arquivo do pedido de local posteriormente. Finalmente, temos o rodapé e ele se parece com isso. Agora, vamos voltar ao nosso código e começar com o back-end. Então, a primeira coisa que vamos fazer é exigir novo módulo que nos ajudará no Mongo a criar o banco de dados de que precisamos A primeira coisa que vamos exigir é definir ou criar e isso será exigido pelo Mongo, como dissemos, Mongo find or create, e tudo bem Só precisamos importá-lo ou instalá-lo usando o NPM. Aqui, vamos voltar e o NPM encontrar ou criar. Precisamos digitar Mongo logo antes. Então, crie um fundo ou crie e espere um pouco até que ele seja instalado Enquanto isso, podemos voltar e continuar com nosso código Essa é a primeira coisa que vamos fazer e agora precisamos conectar e configurar o Mongoose Vamos fazer isso aqui mesmo, entre esses dois. Para conectar o Mongoose, simplesmente escrevemos mongoose para conectar e vamos escolher onde vamos Já que vamos armazená-lo localmente na bússola Mongo dV E vamos digitar Mongo DB local host 27017, seguido pelo nome do nosso banco de Já que vamos criar talvez esse site comercial. Talvez seja melhor chamá-lo banco de dados comercial e seguido por DB. Depois disso, usaremos um novo passador de URL e o definiremos como verdadeiro Isso é principalmente para a conexão e, mais tarde, veremos como podemos visualizar o banco Precisaremos instalar a bússola Mongo DB, e eu vou fazer isso no próximo vídeo Mas, por enquanto, vamos apenas conectá-la e definir M. Como usamos a conexão, precisaremos configurá-la e também precisaremos usar find and modify Okay. Até então, também definiremos o índice use create como verdadeiro. Vamos criar esse índice e falaremos sobre isso nos próximos vídeos. Mas, por enquanto, vamos configurá-lo para que o Mongo finalmente encontre e modifique como falso Sempre que chamamos find, não precisamos modificar nosso trabalho. É isso principalmente. É assim que podemos conectar, configurar o mongoose e criar nosso Agora, vamos pensar nisso por um segundo. Quais bancos de dados realmente precisamos. Em primeiro lugar, estamos falando de marcas e categorias Faz sentido ter bancos de dados para marcas e categorias. Também temos os itens individuais e precisaremos um banco de dados especificado para os itens individuais. Depois, também temos os e-mails que vamos extrair daqui Depois que o usuário pressionar CU, pegaremos esse e-mail e o adicionaremos ao Obviamente, precisaremos um banco de dados especificado para usuários. Cada usuário. Cada vez que um usuário se cadastra, pegamos todas as informações dele e as armazenamos em um banco de dados específico. Também precisamos do banco de dados dos mais vendidos. Isso é para os itens mais vendidos. Como podemos ver aqui, temos três itens por enquanto, mas talvez possamos ter mais depois, faz sentido ter um banco de dados especificado para esse tipo de coisa. OK. Então é isso principalmente. Vamos começar codificando os bancos de dados, criando-os e talvez adicionando alguns elementos ou itens a eles. A primeira coisa que vamos fazer é criar o esquema da marca É assim que criamos um banco de dados. Dê um nome. Vamos chamá-lo de esquema de marca, e vamos criar use mango, esquema Mongoose, abriremos as chaves curvas e precisaremos principalmente e precisaremos A primeira é a marca da qual estamos falando. Talvez vamos adicionar as categorias dessa marca especificada. Por exemplo, se tivermos uma marca específica, como a Johnson, precisaremos de quais categorias a Johnson vende. Por exemplo, temos o xampu, a loção corporal e etc Portanto, faz sentido ter uma sequência de uma matriz de cadeias de caracteres que contenha todas as categorias que essa marca contém. Temos o nome da marca e isso será uma string. Também temos as categorias dessa marca, e essa será uma variedade de cordas Talvez vamos adicionar uma imagem. Isso também será uma string para mais tarde. Esse é o primeiro, crie o segundo que é o esquema da categoria Esquema de categoria igual ao novo esquema Mongoose. Vamos abri-lo como antes. A categoria será uma string. Agora, como você pode observar aqui, se tivermos uma categoria específica, como xampu, precisaremos ter uma lista de todas as marcas que vendem xampu Por exemplo, temos Johnson, temos Sons e assim por diante. Essa é a categoria que é o nome, que será uma string. Também temos as marcas aqui, e isso também será uma variedade de cordas Então temos a imagem. Agora vamos passar para o esquema de e-mail, que será um simples e-mail. Há uma string, então novo esquema do Mongoose a abre E então temos o e-mail que é uma string, como dissemos. Vamos passar para o esquema do item e vamos criá-lo aqui Temos o esquema de itens sobre pistas nele, e vamos ver. A primeira coisa que vamos adicionar é o título ou o nome desse item, e será uma string. Também temos a descrição que vamos adicionar, que também será uma string, e temos o URL da imagem. Corda. Basicamente, tudo isso é picante. A marca também será uma string, a categoria, e vamos adicionar um preço, quantidade e tamanho. O tamanho será uma sequência e o preço e a quantidade serão números. Aqui temos o preço, e esse será o número, finalmente temos a quantidade que também será um número. Isso é basicamente para o esquema do item. Vamos passar para o esquema do usuário, então ainda temos dois esquemas para criar o usuário e o best-seller Continuando, esquema de usuário constante igual ao esquema normal. Vamos entrar nisso. Temos o e-mail do usuário, a senha. E talvez possamos adicionar o ID do Google se o usuário login usando sua conta do Google. Nós temos o número. Então esse é o número de telefone. Temos o nome e também temos os pedidos e o endereço. Dentro dos pedidos, talvez seja uma matriz. Dentro desse pedido, vamos adicionar algumas coisas. Vamos ver. Temos o pedido, temos a data de finalização da compra E talvez vamos adicionar algo chamado recebido para especificar se o usuário recebeu esse pedido ou não, e adicionaremos os itens que essa pessoa pediu Precisaremos da imagem, do preço do título, da quantidade e do tamanho desses itens. Também temos o total e data em que o usuário fez o pedido. Primeiro, o This recebido será principalmente, mas antes, vamos apenas adicioná-lo como um objeto. Esse é o primeiro objeto. E dentro do qual vamos adicionar o recebido, ele será banido e o padrão será falso. Agora, também temos o checkout, que também é do tipo e o padrão será falso Então é isso para o checkout. Vamos passar para os itens. Como dissemos, os itens serão uma variedade de itens. Assim, o usuário pode pedir mais de um item dentro de um único pedido. Então, dentro dos itens, vamos adicionar a imagem, será o título, que também será um preço em sequência, que é um número. A quantidade que o usuário solicitou e também será um número e, finalmente, o tamanho, que deve ser uma string. Isso é basicamente para os itens. E, como podemos ver, precisamos apenas adicionar o total, que será uma string, e a data em que o usuário solicitou, que também será uma string. Isso é principalmente para os pedidos. Agora vamos para o endereço. Então, terminamos aqui. Vamos adicionar a vírgula e criar o endereço, que basicamente conterá apenas três componentes, o endereço como uma string, a cidade em que o usuário mora e o número de telefone. O endereço será algo assim, string city strength e, finalmente, o número de telefone, que será um número. É isso principalmente. Isso é o que vamos fazer. Esse é o nosso esquema de usuário. Só precisamos adicionar o esquema mais vendido. Para fazer isso, adicionaremos um esquema de best-seller constante igual ao esquema b, como de costume. Vamos abri-lo. Do item talvez vamos adicionar a referência desse item, então será um item, e então teremos adicionar o nome desse item, que é uma string, e a imagem mostrada também será uma string E é isso principalmente. Vou apenas adicionar o tipo que vamos extrair do esquema, os tipos e o ID do objeto Vou explicar isso mais tarde, mas, por enquanto, vamos nos ater a esse esquema Esses são principalmente nossos esquemas. Agora só precisamos criar o modelo e depois visualizá-lo dentro de nossa bússola Mongo. Para fazer isso, vamos baixar a bússola Mongo B Assim que for baixado, basta abri-lo e nos vemos no próximo vídeo. OK. 3. Databases 2: Agora que terminamos com o esquema, podemos criar o modelo Vamos começar criando talvez o modelo da marca ou o modelo do item. Então, vamos começar e é bem simples. Só precisamos cronometrar o item constante. Esse é o nome do item, modelo Mongo, e vamos modelar o item como o esquema de item que acabamos de criar anteriormente E vamos fazer a mesma coisa todos os outros. Nós temos o e-mail. Portanto, o e-mail será modelado como o esquema de e-mail. Claro, eu não vou escrever todos eles. Vou copiá-lo mais algumas vezes e adicionar o resto. Então, aqui temos o best-seller. E então ele é modelado como mais vendido aqui e como o esquema mais vendido Depois, também temos os três restantes para traçar a marca, e ela será modelada como uma marca normal e um esquema de marca aqui Temos o esquema do usuário. É modelado como usuário e a constante seria chamada de usuário. Finalmente, temos a categoria de categoria, e ela será modelada como a categoria Basicamente, é isso. Vamos verificar talvez se eu perdi alguma coisa. Temos os mais vendidos, então temos seis, um, dois, três, quatro, cinco e seis Por enquanto, criamos os bancos de dados para nossos itens, categorias, marcas e assim por diante. Agora, já que terminamos com isso, vamos talvez adicionar alguns desses itens, algumas dessas marcas ou categorias aos bancos de dados. Para fazer isso, é bem simples. Podemos ir até aqui e começar criando talvez marcas. Eu o chamo de B um, deve ser igual a vamos começar com o best-seller, por exemplo, best-seller, abra-o, já que dissemos aqui que o best-seller conterá principalmente o nome e a imagem. Então, vamos continuar com isso. Então, talvez tenhamos Johnson e a imagem será adicionaremos o P. Por enquanto, vou adicionar aqui uma pasta de arquivos chamada imagens dentro desta pasta, vamos adicionar algumas imagens. Mas, por enquanto, vamos chamá-lo Johnson PG e estamos bem. Esse é o primeiro. Vamos criar outro, dois iguais ao best-seller Como de costume, precisaremos do nome, talvez ligue para oito, e a imagem será, como sempre, o caminho da imagem. E, como podemos ver, é uma corda. Como dissemos, temos três best-sellers. O último será do nome, talvez o cervo. Vamos abri-lo. Nome oder Finalmente, a imagem conterá o caminho exato desta imagem e estará na pasta de imagens, oder GPG. Isso é tudo principalmente para os mais vendidos Vamos passar para os próximos bancos de dados. Vamos adicionar quatro categorias de marcas e , em seguida, adicionar todas elas aos bancos de dados reais. O que estamos fazendo aqui é apenas criar algumas constantes. Essa é a constante B um, indicando o best-seller, o primeiro best-seller, e temos o nome disso e a imagem a seguir. E também temos o best-seller número dois e três. Mas nós realmente não os adicionamos ao banco de dados, e faremos isso mais tarde, quando terminarmos as marcas e categorias. Para criar as marcas, vamos chamá-la de marca 1, e talvez seja Johnson, já que falamos primeiro sobre Johnson. Aqui vamos nós. Johnson. Como dissemos, precisamos sair das categorias que Johnson tem. Vamos subir e subir, talvez Shampoo, talvez Pica, e talvez, como fizemos antes, a imagem seja a imagem exata que usamos anteriormente. Isso está definido para a primeira marca, vamos copiá-lo e colá-lo aqui embaixo. E vamos criar mais duas marcas. Então essa é a marca dois e, finalmente, a marca três. Então, mude-os um pouco. Aqui temos talvez oito. Digamos que talvez apenas a categoria seja apenas dentes. Então a imagem será dentes DGG. Vamos adicioná-los mais tarde. Finalmente, vamos passar para o último. Isso será básico, talvez as categorias sejam apenas bodica. Vamos continuar com A imagem será BodyPG finalizamos os mais vendidos e Vamos adicionar algumas categorias. A categoria um será uma nova categoria. Abra e comece aqui mesmo. O nome da categoria talvez seja Johnson, Johnson que temos. Johnson e talvez vamos fazer, por exemplo. E, finalmente, temos a imagem, que estaria na pasta de imagens. E, como dissemos, já que estamos usando xampu, faz sentido adicionar uma foto de Johnson de um xampu como imagem principal. Nós vamos. Essa é a primeira categoria. Vamos adicionar mais dois Ok. E é isso. O segundo será um cuidado corporal, já que falamos sobre isso anteriormente. Dentro dos cuidados com o corpo, talvez tenhamos apenas Vasilin e vamos embora Finalmente, para mudar isso. Talvez apenas digite. Talvez vamos mantê-lo como está por enquanto, vamos mudá-lo mais tarde. Isso é tudo para as categorias. Vamos adicionar mais uma coisa aqui. Em vez de xampu, vamos torná-lo o Inside TV que só temos, talvez revestido como marca É isso principalmente. É assim que podemos criar as constantes que vamos usar ou adicionar ao banco Obviamente, esse não é o único método. Na verdade, existe um método mais simples que você pode simplesmente adicionar todos eles de uma vez ou talvez adicioná-los usando a bússola, e discutiremos isso mais tarde no próximo vídeo Mas, por enquanto, vamos adicioná-los manualmente apenas para ter uma ideia como podemos criá-los ou como podemos adicioná-los ao banco de dados usando código. Então é isso. Basicamente, vamos adicioná-los agora mesmo. Então, falamos sobre o esquema de categorias e criamos o modelo chamado categoria E para inserir nessa categoria, basta digitar categoria dot insert many se quisermos inserir várias categorias ao mesmo tempo. Então, abrimos a matriz um, dois e a categoria três. Então é isso principalmente. Só precisamos verificar se há possíveis erros para que seja bastante simples se um erro ocorrer apenas impresso no console, caso contrário, basta imprimir todas as categorias que acabamos de Portanto, temos a categoria um, a categoria dois e a categoria três. Isso é tudo para as categorias. Vamos copiá-lo e colá-lo para marcas e talvez para os mais vendidos posteriormente Por enquanto, vamos trabalhar com marcas. Marca que insere muitas, temos a marca um, marca dois e a marca três. Vamos lá, marca dois. Também verificaremos possíveis erros e, caso contrário, simplesmente imprimiremos as três marcas que acabamos de adicionar. Marca dois e marca três. É isso, principalmente, ainda temos os mais vendidos, mas acho que temos a ideia de como criá-los e inseri-los. OK. Então, neste vídeo, no próximo vídeo, discutiremos como podemos trabalhar com a bússola MongoDB, como podemos visualizar os dados que acabamos de adicionar e como também podemos editar, modificar ou até mesmo adicionar novos itens ou novos bancos Então, isso é tudo para este vídeo com isso dito, até o próximo. 4. Crie o rota: Olá e bem-vindo de volta. Neste vídeo, aprenderemos como podemos vincular as páginas da web. Por exemplo, aqui estamos na página inicial. Talvez queiramos ir para a página de categoria de marca sobre conduta. Por enquanto, eles não funcionam. Vamos criar os formulários para essas páginas. Obviamente, se quisermos ver esse produto específico, se eu pressionar os detalhes C, quero acessar os detalhes C ou os detalhes desse item específico. Nós vamos fazer isso também. Mas, por enquanto, vamos começar com a página da web, a página inicial, essa. Então, vamos ao nosso código de estudo visual. E aqui dissemos que sempre que tivermos essa, a barra será renderizada para casa Mas vamos ter em mente. Vamos voltar aqui e ver. Dentro de nossa casa, precisamos de algumas coisas do banco de dados Monge ou do banco de dados que temos A primeira são as categorias que temos, por exemplo, aqui. Quando mostramos as categorias, precisamos tê-las aqui, e então podemos listá-las assim em um carro. Mas, por enquanto, precisamos deles, então precisamos obtê-los sempre que voltarmos para casa. Também precisamos dos mais vendidos. Lembre-se de que criamos um best-seller aqui. Criamos o esquema mais vendido e adicionamos algumas coisas a ele Essas são as duas coisas principais e, claro, também precisamos das marcas. Como dissemos, é o mesmo que as categorias, também precisamos disso. Vamos começar com isso. Vamos voltar ao G slash neste caso, o que vou fazer é pesquisar todas as marcas que temos no esquema de marcas ou no banco de dados de marcas, e vamos pesquisar tudo, então deixamos essa em branco E nós vamos obter a função. Portanto, temos o erro e a marca desencontrada. Em caso de erro, não faça nada. Se não houver erro, vamos pesquisar os mais vendidos e depois as categorias. Mais vendido. Sem descoberta, encontraremos todos os itens mais vendidos que temos Como sempre, temos a função que contém o erro e o melhor encontrado. Então vamos abrir. Se não tivermos nenhum erro nesse caso, vamos simplesmente pesquisar o último, ou seja, as categorias. Encontre e funcione por categorias com categorias reencontradas. Agora podemos renderizar em casa a renderização RESG em casa com os seguintes itens ou os seguintes componentes Temos as categorias de nomes duplos. E isso conterá categorias definitivas que encontramos anteriormente Também temos o pedido. Não vamos esquecer isso. Vamos passar para as marcas, e isso conterá a marca encontrada e a melhor que conterá a melhor encontrada. É isso principalmente. Renderizamos a página inicial com as melhores marcas a seguir e toda a solicitação que recebemos daqui Esse é o primeiro. Vamos passar para o segundo. Claro, antes, deixe-me falar sobre o que podemos fazer com isso aqui. Então, sempre que formos à página inicial, teremos as marcas, os mais vendidos e as categorias conosco E se formos direto para casa, podemos mudar isso. O que estamos fazendo aqui é mostrar apenas uma imagem, que mostrar apenas uma imagem, é a imagem dois e o título, que é minha legenda intitulada primeira imagem e a legenda inteira Então, eles são estáticos. Podemos mudá-los e fazê-los mudar, por exemplo, aqui, estamos mostrando as marcas. Podemos obter todas as marcas que obtivemos dessa lista e podemos acessá-las aqui usando o Javascript embutido no SML aqui, e podemos mostrá-las aqui na página inicial E também podemos fazer isso para os mais vendidos e para as marcas e categorias, desculpe Então é isso. É isso que pretendemos fazer, mas, por enquanto, vamos simplificar Vamos voltar ao aplicativo para JS e, em seguida, finalizar com todos os requisitos, e também podemos vinculá-los aqui e alterar os títulos das legendas e assim por diante Vamos continuar. Vamos voltar aqui e ver. Como podemos ver aqui, temos a opção de ficar conectados. Desta vez, fique conectado onde o usuário insere seu endereço de e-mail para receber ofertas exclusivas. Nesse caso, vamos pegar isso e adicioná-lo ao nosso banco de dados. Como podemos fazer isso? Vamos voltar e começar. Esta é uma postagem. Então, vamos receber uma postagem. Publicação de anúncio. Sempre que obtivermos algo da página Stay Connected, que é uma postagem, talvez entremos nessa função, tão grosseira como sempre, e criaremos o e-mail Vou chamá-lo simplesmente de e-mail e ele conterá um novo esquema ou um novo componente que vamos adicionar ao esquema O e-mail com isso será o e-mail do corpo da solicitação. Agora, se eu voltar aqui, desculpe pelo rodapé, e como podemos ver se rolarmos até o fim, temos a entrada do e-mail com o nome e-mail Podemos acessar este usando o nome simplesmente escrevendo uma solicitação. Essa é a solicitação que vamos receber que contém todos os componentes desse formulário aqui e o corpo do e-mail da solicitação Vamos receber esse e-mail e adicioná-lo aqui. Então, simplesmente vamos criá-lo, enviar por e-mail, criar esse e-mail com a função, então há outro e talvez apenas impresso e vamos imprimir esse e-mail adicionado. É isso mesmo. Desculpe, esqueci as citações. Estamos bem. Claro, depois de terminar isso, vamos redirecionar para a página inicial, talvez Acho que estamos bem. Redirecione para este aqui , onde vamos renderizar para casa Isso é tudo para ficar conectado. Vamos passar para o segundo. Tudo bem Agora, vamos tentar nos mover entre essas páginas da web. Então, como dissemos, temos a categoria de marca doméstica e contato. Então, o que estou disposto a fazer é que, sempre que eu pressionar um deles, ele me leve automaticamente para a página da web associada Nesse caso, todos esses botões não fazem nada por enquanto, vamos corrigi-lo. Vamos para o cabeçalho. Este é o nosso cabeçalho e no qual temos todos os botões aqui. Mas é claro, sem o link de referência para eles. Vamos consertar isso. A primeira coisa que vamos fazer é excluir essa hashtag e colocá-la Aqui temos a casa, vamos para casa. Nesse caso, temos marca. Eu vou às marcas e aqui temos a categoria. Também temos informações sobre e talvez o feedback. Vamos chamá-lo de feedback. Isso é principalmente, vamos voltar ao Apo S. Então, digamos aqui temos o apt get para a página inicial Nós vamos fazer isso. Vamos passar para os outros. Então, temos um G. Se sairmos da página Sobre, receberemos essa função e renderizaremos para o JS junto com a solicitação que recebemos. Então, deixe-me verificar este. Então, vamos atualizar. Enquanto isso, vamos fazer o segundo Mas acho que pode haver um erro aqui. Estamos bem. Então, se voltarmos para a página de contato que chamamos de feedback, então feedback. Funciona normalmente, abra renderização e vamos ver o feedback JS. Ou talvez o chamemos de contato, eu acho. Então, sim, está aqui. É entre em contato com JS. Então, por enquanto, vamos voltar ao aplicativo. E isso é tudo principalmente para as páginas. Vamos simplesmente retomar a solicitação também. Vamos voltar. E vamos ver o erro aqui. Então, agora, após o JS, execute-o e tudo ficará bem. Então, anfitrião local. Ok. Sim, estamos bem. Ainda temos as páginas de categorias e marcas. Então, vamos fazê-las aqui e vamos verificar todas elas juntas de uma só vez. Para obter a categoria, simplesmente adicionaremos a categoria aqui e funcionaremos. Como de costume, vamos pesquisar todas as categorias, encontrar todas elas e, em seguida, funcionar com as categorias de erro e desfinanciar Abra. Se não houver erro, vamos simplesmente renderizar para alugar a renderização. Então, aqui, renderize novamente para a categoria, JS, e junto com as categorias que temos e, claro, a solicitação que recebemos. É isso. Se houver um erro, talvez imprimemos no console dessa e obteremos a categoria. Vamos passar para as marcas agora mesmo. Nesse caso, obteremos as marcas como categorias que temos Abra a pesquisa pelas marcas que temos, encontre todas elas e chamaremos essa função como de costume. Então, aqui temos as marcas encontradas. E se houver outro console, registre-o, caso contrário, vou simplesmente renderizar, na página apropriada, as marcas DGS junto com as marcas que temos . Essas são as marcas encontradas e as solicitações que também recebemos normalmente Então é isso, criamos o que temos, já temos a página inicial. Criamos sobre categorias de feedback e marcas. Então é isso, neste vídeo e no próximo vídeo, vamos conferir tudo isso. E, claro, continuaremos criando as páginas da web vinculadas entre elas, e pronto Nos vemos no próximo vídeo. Ok. 5. O contato e Sobre o contato e o contato: Olá e bem-vindo de volta. Neste vídeo, vamos configurar o Mongo DB. Como dissemos, criamos todas essas talvez constantes, best-sellers, marcas e caligorias e os esquemas para cada uma delas Obviamente, vinculamos o Mongo ao Mongo DB, o host local 27017, o host local 27017, e precisamos que o banco de dados seja um DV No entanto, não temos realmente um espaço ou software para usar para visualizar talvez esses itens, os dados dentro do nosso banco de dados Para fazer isso, vamos direto para o Google, vamos para o Mongo DV e Temos os servidores da comunidade de software , um banco de dados de documentos gratuito e aberto, vamos até o fim e clicaremos em download. Então, um arquivo EXE será baixado e , em seguida, você clica nele e passa pelo Assistente. É um procedimento muito simples e direto. E quando você terminar, isso aparecerá na sua página. Como dissemos, vamos executar esse código novamente. No entanto, agora temos o banco de dados, temos o host local para o qual vamos correr. E então, uma vez que o executemos, vamos colocar esse banco de dados comercial DV dentro de nosso local Como podemos ver, criamos as marcas e categorias e, se pressionarmos sobre elas, podemos ver quais são as marcas ou quais são as categorias. Isso é basicamente para o DV comercial. Agora podemos voltar ao nosso site comercial. Que possamos ver trans acho que temos um erro aqui. Vamos verificar isso. Como podemos ver na parte das categorias, é bom. Então, funciona perfeitamente bem. No contato, temos algumas modificações que precisamos fazer talvez no CSS. Verificaremos isso mais tarde. Mas, por enquanto, vamos dar uma olhada nas marcas DGS, vamos voltar aqui Como podemos ver, é a marca DGS. Não são marcas. Vamos rolar para baixo e corrigir isso. Acho que agora estamos bem, se nos atualizarmos, podemos colocar as marcas aqui à medida que chegamos aqui, funciona perfeitamente bem Vamos voltar para casa e estamos bem por enquanto. Vamos ver com o que devemos começar primeiro. Como podemos ver nas marcas e categorias, será um pouco complicado mostrar as marcas e categorias reais Precisamos ter um loop para examinar todas as marcas e todas as categorias e mostrá-las na tela. Talvez comecemos com algo simples. Esse é o contato. Temos o nome, o e-mail, número de telefone e a mensagem. Claro, o botão de enviar mensagem, e isso não fará nada por enquanto, mas faremos com que funcione daqui a pouco. Então, se você quiser começar com este, temos o nome e telefone de e-mail. Isso não parece bom, vamos consertá-lo. Em vez deste, vamos escrever um botão com a classe BTN e light, e talvez enviar uma mensagem Se voltarmos, ficará mais bonito Wever, vamos adicionar talvez MEUS dois à atualização de cliques. Como podemos ver, recebemos nossa mensagem de envio aqui e vamos fazer o mesmo com todas elas. Nesse caso, vou adicionar aqui Y um. Y um e Y um. E acho que, por enquanto, se voltarmos, podemos ver que temos alguns espaços entre eles. Então é isso. Basicamente, temos o nome, e-mail, o número de telefone, a área tributária e o padrão de envio de mensagens. Então, vamos ver. Como dissemos, temos as informações da pessoa e a mensagem apropriada. E precisamos diferenciar se o usuário está autenticado OK. Nesse caso, temos todas essas informações dentro do banco de dados do usuário. Nesse caso, basta iniciar a mensagem, a nova mensagem que o usuário está enviando. Se o usuário talvez não esteja autenticado, ele não esteja conectado, receberemos seu nome, número de e-mail e mensagem Nesse caso, precisamos iniciá-los em um novo usuário e depois salvá-los em nosso banco de dados. OK. Então, como fazemos isso? Vamos começar criando a publicação do aplicativo. E nesse caso, temos a função de contato e vamos verificar se a solicitação está autenticada e essa é a maneira de fazer isso A propósito, quanto ao login e inscrição, vamos fazê-los no final. Talvez falemos sobre eles agora enquanto trabalhamos com isso, por exemplo, aqui no contato, usaremos a solicitação como autenticada Nesse caso, estamos apenas verificando se esse usuário está conectado e, em caso afirmativo, vamos apenas atualizar esse usuário selecionando seu ID e pronto. Então, o que estamos fazendo aqui é verificar o banco de dados do usuário, estamos apenas verificando se há um usuário no qual o ID desse usuário é igual ao ID que obteremos da página de contato. Como podemos ver aqui, se voltarmos e obtivermos o ID do usuário. Então, como dissemos, aqui temos o usuário, e o método ID nos dará apenas o D do usuário específico. E se encontrarmos uma correspondência , começaremos pegando essa mensagem e adicionando-a à caixa de mensagem dentro do nosso usuário. Como dissemos, temos esse banco de dados, que é o esquema do usuário Temos o e-mail, senha, número de ID do Google, nome, endereço do pedido, deixe-me verificar aqui. Ainda temos apenas a mensagem. Vamos adicionar, vamos adicioná-lo agora, na verdade. Aqui dentro, talvez adicione uma mensagem que seja uma string e tudo bem. Podemos trabalhar com isso agora. Então, basicamente, é isso. Estamos apenas verificando se o usuário está conectado. Nesse caso, vamos receber essa mensagem e adicioná-la à caixa de mensagem dentro do nosso usuário. E, claro, se algo acontecer, como um erro, simplesmente imprimiremos esse registro de erros. Caso contrário, vamos usar um blog do console. Mensagem recebida. É isso, basicamente, se o usuário estiver conectado. Agora, se esse não for o caso, precisaremos criar um novo usuário e adicioná-lo ao banco de dados do usuário. Um novo usuário igual a um novo usuário entre parênteses igualmente latão. Vamos adicionar o nome pelo nome do texto da solicitação OK. Precisaremos adicionar o e-mail, solicitar o corpo do texto do e-mail. E se você está se perguntando de onde estou conseguindo isso, se voltarmos para o contato, temos aqui o nome do texto nome. Essas são as entradas que obteremos do usuário e as acessaremos normalmente, usando o método buddy solicitado Nesse caso, recebemos o nome e mail, talvez os números ou solicitados pelo telefone. Finalmente, a mensagem. Esta é a mensagem real na qual estamos interessados, e ela será acessada solicitada pela mensagem de texto. É isso mesmo. Ainda temos que salvá-lo. Novo usuário que salva e, claro, vamos redirecionar o usuário para essa rota Esta é a página inicial, e eu esqueci de adicioná-la aqui, então vou simplesmente redirecionar o redirecionamento para a É isso principalmente. Se eu voltar e me refrescar. Vamos digitar algumas coisas. Se eu enviar uma mensagem aqui, preciso adicionar um e-mail, então envie um e-mail para o e-mail T we good. Tudo bem. Isso não funcionará porque estamos apenas perguntando se o usuário está autenticado e ainda não iniciamos o processo de autenticação Então, vamos deixar isso por enquanto e, claro, voltaremos a ele mais tarde. Isso é tudo para o formulário de contato. Vamos passar talvez para outra coisa. Vamos voltar a este e verificar se temos categorias de marcas domésticas. À medida que definimos categorias e marcas, as faremos mais tarde. Para a página A, nós realmente não precisamos de nada. Talvez vamos adicionar esses. Temos marcas domésticas, categorias, contato e exemplos. Este é o e-mail. Talvez possamos adicionar as referências a eles. Para o e-mail, já o vinculamos. Agora talvez faça isso. Vamos voltar agora para o rodapé. Nesse caso. Como fizemos anteriormente neste eixo, faremos exatamente a mesma coisa que fizemos aqui Então, por exemplo, em casa, simplesmente renderizaremos com essa barra frontal e as marcas que renderizaremos para marcas Deixe-me verificar. Sim, está correto. Marcas. As categorias serão categorias. Acho que estamos bem. Ainda temos o contato que é para verificar o feedback. Sim, é o feedback. Agora, se eu voltar, destrua os espaços da casa. Vamos voltar às marcas domésticas. A mesma coisa. Vamos abordar marcas, categorias e, finalmente, verifique o contato conosco e estamos bem com elas. Então, como podemos ver aqui, acabei de perceber que adoraríamos ouvir seus comentários no meio disso. Então, vamos voltar para a página de contato. Como dissemos, temos este e talvez eu adicione aqui um sintoma de texto Vamos voltar e ver como fica agora, e talvez adicionar algumas linhas. Ainda temos que adicionar talvez aqui dentro dessa nova linha. Sim, acho que isso pode ser bom. Vamos voltar a atualizar. Me desculpe. Vamos adicioná-lo também aqui. Atualizar. Como podemos ver, entendemos, mas simplesmente não notamos esse. Vamos agora. OK. Como podemos ver, acho que estamos bem por enquanto. Gostaríamos muito de ouvir seus comentários e ele deveria inserir deveria inserir as seguintes informações e pronto. Acho que, por enquanto, estamos prontos para o rodapé, o cabeçalho, as páginas ao e conduta No próximo vídeo, começaremos com a página da marca. Vamos mostrar as marcas que temos aqui, bem como as categorias. É claro que, depois disso, precisamos inserir cada marca. Por exemplo, aqui, se tivermos Johnson, vamos explorá-lo. Agora, se pressionarmos em explorar, nada acontecerá. Mas, para mais tarde, vamos continuar explorando e exibindo toda a marca talvez, digamos, qualquer marca, por exemplo, Johnson. Nesse caso, exibiremos todos os itens que a Johnson tem, é claro. Cada item será que também podemos filtrar pelas categorias. Por exemplo, para Johnson, talvez tenhamos o corpo, o xampu e o gel de banho. Nesse caso, exibiremos todos esses itens e o usuário também poderá filtrar por categoria. E vamos fazer exatamente a mesma coisa com as categorias. Vamos mostrar, por exemplo, aqui, xampu. E se o usuário pressionar esse botão do explorer, ele será redirecionado para a página do xampu, onde ele pode filtrar pelas marcas Por exemplo, há Johnson, talvez Sosk e assim por diante Isso é principalmente para este vídeo, se você não entendeu exatamente o ponto não entendeu exatamente o ponto, não se preocupe talvez discutiremos isso em detalhes nos próximos vídeos. Te vejo então. OK. 6. Marcas e categorias: Tudo bem Olá, e bem-vindo de volta. Neste vídeo, mostraremos as marcas e categorias que temos nas páginas da web de marcas e categorias. Se acessarmos nossa página da web, essa é a página inicial e, se clicarmos em marca, na verdade iremos para a página da marca. No entanto, esses são os mesmos. Então, temos o nome da marca e talvez a mesma imagem, mudamos a imagem aqui, mas elas não são do banco de dados. Então, temos nossas marcas em nosso banco e queremos dar uma olhada nelas ou queremos exibi-las aqui. Se formos até nossa bússola Mongo DB, e esta é nossa base de dados, DV comercial, vamos continuar. Na verdade, salvamos marcas e categorias. Se você pressionar marcas, podemos descobrir que cada marca tem o nome da marca, a imagem e o D dessa marca. Vamos voltar às nossas marcas, a DGS. Como podemos ver, estamos exibindo várias marcas. Vamos excluir tudo isso e criar apenas uma marca, na qual examinaremos todas as marcas e as exibiremos de uma só vez. Como fazemos isso? Na verdade, vamos excluir tudo isso e começar talvez recriando ou vamos manter esse e excluir todo o resto Então, como podemos ver se excluirmos isso, vamos ver. Este é o último, e acho que seria bom deletar todos eles. Vamos verificar se isso é para zero, coluna seis e zero, então estamos bem. Ok. Então é isso, basicamente, essa é a única coisa que precisamos. No entanto, precisamos examinar todas as marcas que obtemos. Então, se você se lembra corretamente, vamos voltar para o Apt Bet , onde vamos conseguir as marcas Examinamos as marcas e encontramos todas as marcas e talvez as tenhamos enviado usando as marcas. Então, se quisermos acessar todas as marcas que temos, podemos simplesmente usar essa marca aqui. Agora, vamos voltar para a página da marca. Como podemos ver aqui, em vez do nome da marca, precisamos exibir a marca real. Para fazer isso, eu simplesmente criarei aqui. Esta é a nossa parte, e é aqui que vamos trabalhar. Vamos criar um espaço aqui, algumas linhas. Vamos começar criando quatro ciclos para percorrer todas as marcas. Essas são todas as nossas marcas, mas para cada uma, vamos criar uma nova função que usa uma marca e vamos abrir os parênteses Basicamente, agora vamos fechar aqui. E aqui. É assim que podemos implementar Java Script dentro do arquivo EJS. E eu vou simplesmente cortar isso e colar aqui. Agora temos nosso loop telefônico. Vamos pegar todos os nomes das marcas. Então, vou chamar a marca de marca e acho que estamos bem. Esta marca representa esta. Esse é o nome da marca. Obviamente, essa marca representará o nome da marca real. Eu a chamo aqui de marca. Você pode nomeá-lo como quiser , desde que seja o mesmo dentro do banco de dados e da forma como você o acessa aqui. Agora, sempre que quiser usar um nome ou algo de valor, você precisa colocar isso igual antes de talvez chamar a função ou chamar o valor. E sempre que você quiser implementar uma função ou talvez fazer um loop for, você não precisa fazer nada para isso. E acho que há uma lista de talvez sugestões ou coisas que devemos usar quando quisermos implementar o script Java no EGS e veremos isso mais tarde Mas, por enquanto, precisamos apenas dessas duas coisas. É isso mesmo. Acabamos de exibir a marca. Agora, para a imagem, vamos fazer exatamente a mesma coisa. Agora, aqui, é muito importante seguir exatamente o mesmo procedimento. Então abrimos a porcentagem igual e depois as imagens e a imagem mais a marca IMG, como dissemos anteriormente, e agora estamos bem. É isso principalmente. É assim que podemos exibir nossas marcas. Vamos verificar se tudo funciona. talvez. É isso mesmo. Essas são todas as marcas que temos. Claro, temos alguns problemas com as imagens. Vamos verificar isso. Se voltarmos até aqui, na verdade não temos a pasta de imagens ou temos Sim, então não a temos. Vou criá-lo agora mesmo e entrar em contato com você em um minuto. Tudo bem Examine os arquivos, encontramos o arquivo de imagens aqui. Na verdade, o problema é que chamamos as imagens aqui de Johnson PG e JPG e, claro, pena que não as chamemos assim. Então, vamos corrigir isso, na verdade. Vamos nomear, por exemplo, este como Johnson. Talvez o segundo corpóreo e o final como D. Então, aqui, não é maiúsculo, então vamos corrigir isso e vamos começar por enquanto Talvez façamos isso. Na verdade, deixe-me criar uma nova imagem. Vamos copiar isso e baseá-lo aqui. Neste, vamos chamá-lo de dentes. Eles são iguais, mas acabamos de mudá-los por causa deste exemplo. Agora, se voltarmos e vermos que o problema que enfrentamos é que cada vez que salvamos isso, o aplicativo está, na verdade, adicionando tudo isso simplesmente mantendo isso sem comentários Nós inserimos muitas, estamos inserindo três categorias e três marcas, cada vez que salvamos esta Como não basta fazer isso sempre que você salvar, ele será executado novamente. Então, uma maneira de corrigir isso é descartar todo o banco de dados e executar o código novamente. Para eliminá-lo, basta digitar o nome desse banco de dados. Agora, se você voltar aqui e vamos executar o Node Man novamente. NodeJS e se voltarmos e clicarmos em atualizar aqui, obteremos nosso banco de dados que contém marcas No entanto, desta vez, temos apenas uma, duas, três, quatro e cinco marcas e as seguintes categorias. É isso principalmente, mas antes de executá-lo. Novamente, precisamos garantir que eles sejam penteados. Ok. Então é isso basicamente agora, se voltarmos ao nosso site comercial. Como podemos ver, temos Johnson Colgate e Vaseline como queremos Essa é a primeira parte do nosso código. Então, analisamos todas as marcas que temos e as implementamos usando um simples loop for. Como podemos ver, esse código é muito pequeno. Apenas algumas linhas e simplesmente mostraremos o nome da marca e a imagem aqui. Vamos fazer exatamente a mesma coisa a categoria antes de prosseguir com a pesquisa e como podemos pesquisar essas marcas e categorias. Vamos excluir o cabeçalho e a página inicial adicionais do contato. Vá para a categoria e faremos exatamente a mesma coisa que fizemos antes. Vamos deletar tudo isso. Vamos verificar se isso terminaria aqui, exclua todos eles. Ok. E é isso. Vamos começar a partir daqui e dar uma olhada nas categorias que temos. Mas primeiro, vamos verificar todo o banco de dados, o que temos? Vamos voltar às categorias. Como podemos ver, temos a categoria e a imagem que são para a categoria específica. Ok. Agora, vamos voltar e verificar no AJ como estamos retornando ou como estamos enviando as categorias do apto J. Se formos e vamos verificar se essa é a nossa categoria apt get. Vamos pesquisar no esquema de categorias ou no banco de dados de categorias e enviaremos todas as categorias que temos na forma de categorias com duplo Talvez seja necessário, vamos voltar. Temos todas as informações de que precisamos para analisar isso. Vamos começar obtendo as categorias e não para cada uma. Nesse caso, vamos criar a função que nos dará cada categoria uma por uma, depois abriremos sem chaves, fecharemos essa função aqui e ali Temos que recortar isso e colar aqui. Agora temos todas as categorias. Podemos mostrá-los simplesmente acessando o nome, como fizemos com a marca, chamamos a categoria que criamos aqui e verificamos no banco de dados. Qual é o nome disso? Também é uma categoria, categoria D. E estamos bem. É assim que podemos acessá-lo. Quanto às imagens, vamos fazer exatamente a mesma coisa. Então, é igual a agora abrir os parênteses, abrir as aspas duplas, Imagens mais a categoria IMG, como dissemos anteriormente Ok. Então é isso principalmente. Vamos apenas verificar as imagens. Então, eles são iguais. Nós não temos nenhum problema. Então, vamos voltar e clicar em atualizar aqui. E vamos para a categoria. Ok. Nesse caso, devemos ter uma lista de todas as categorias. Sim, temos o xampu, cuidados com o corpo e os dentes e, claro, seguidos pelo botão explorer, e isso não fará nada por enquanto. Precisamos ajustá-lo, assim como a barra de pesquisa aqui. Então, vamos começar com a barra de pesquisa aqui. Se voltarmos e verificarmos, esta é a nossa barra de pesquisa. Ainda não temos a ação do formulário. Então, o que fazemos com isso? Então, primeiro de tudo, vamos chamá-la de categoria e a ação ou o método serão publicados normalmente. Então, método igual ao post. E vamos começar, por enquanto, temos o botão com o tipo de envio. E sempre que pressionarmos isso, ele vai para a categoria aqui. Então, voltando ao nosso aplicativo, aqui publicaremos essa categoria e pesquisaremos todas as categorias disponíveis que correspondam à que o usuário está procurando. Então, para fazer isso, vamos começar com a categoria de postagem do aplicativo. E nesse caso, vamos criar a função, que é grosseira, como de costume, e começar obtendo a categoria que o usuário está procurando, e podemos acessá-la usando o corpo da solicitação Se voltarmos à categoria, podemos descobrir que esta tem um nome, que é um nome de marca. Na verdade, vamos alterá-lo para talvez o nome da categoria. Acho que será o nome lógico da categoria aqui. Se voltarmos, podemos acessar isso simplesmente acessando o nome da categoria do corpo da solicitação. E então, é claro, se a categoria de comprimento for maior que um, talvez precisemos colocá-la maiúsculas porque estamos iniciando as categorias em maiúsculas. Status do shampoo com S, que é maiúsculo. Dentes, vamos consertar tudo isso. Mas, por enquanto, vamos supor que todas essas categorias tenham maiúsculas ou que a primeira letra seja maiúscula Nesse caso, se o comprimento for maior que um, vamos modificá-lo chamando a categoria de primeiro caractere na categoria, para que possamos acessá-la usando o gráfico em zero. E vamos colocá-lo em maiúsculas. Essa é a função que vamos usar e, em seguida, vamos dividir essa categoria e pegar todo o resto dessa categoria Por exemplo, se tivermos xampu, digamos: temos xampu assim. O que vamos fazer é isso ou, por exemplo, com isso. O que vamos fazer é pegar esse S aqui, ponto em zero. Será um S maiúsculo mais H PooHich faz xampu com S maiúsculo. É isso principalmente para este vídeo Na próxima, continuaremos esse método e, claro, também para a marca. Te vejo então. 7. Marcas e categorias 2: Olá, bem-vindo de volta a um novo vídeo e a este, continuaremos criando esse método de postagem. Então, também faremos exatamente a mesma coisa com as marcas. Em primeiro lugar, vamos remover D e continuar como dissemos, aqui talvez usemos letras maiúsculas para o primeiro caractere e assumiremos que todos os caracteres estão em maiúsculas em nosso banco de estão em maiúsculas em nosso banco O que vamos fazer agora é pesquisar em nosso banco de dados simplesmente encontrando todas as categorias. Eu tenho uma categoria de erro de digitação que corresponde ao nome desta Como dissemos, pegamos o nome do usuário e, se voltarmos às categorias, podemos descobrir que o nome da categoria também é chamado de categoria. Como você o encontra , simplesmente digitamos categoria e eu vou pesquisar por categoria. Nesse caso, vamos encontrá-lo. E, claro, se found for igual a null, então não encontramos nada Então, vamos simplesmente criar apenas renderizar na página inicial. Então, descanse para renderizar, neste caso, a página inicial é a página da categoria com as categorias , não temos nada e a solicitação é igual à solicitação normal. Se realmente encontrarmos algo, vamos armazená-lo em algo chamado categorias, por exemplo, vamos consultar o registro apenas para mostrá-lo na tela e, claro, renderizaremos a categoria com o seguinte parâmetro. Categorias, como dissemos, que serão a categoria que acabamos encontrar e a solicitação, como de costume. E estamos bem por enquanto. Essa é a função principal que vamos usar. Estamos apenas examinando as categorias que temos e procurando por algo ou uma categoria que corresponda a essa, e aqui também temos um erro de digitação E se encontrarmos algo, vamos apenas renderizar na página da categoria ao lado dessa categoria que encontramos. Caso contrário, renderizaremos a página da categoria com uma string vazia. É isso aí, principalmente se voltarmos e clicarmos em atualizar, vamos pesquisar as categorias Vamos primeiro experimentar o xampu. Então, como podemos ver, encontramos o Champ, sempre esquecemos de deletar este Toda vez que estou economizando, estou inserindo muitas categorias e muitas marcas Vamos excluí-los e eliminá-los antes de continuar lançando esta coleção, e a marca também lançará essa coleção. Nesse caso, talvez eu a publique mais uma vez. Agora, se eu voltar aqui, vamos modificar algo, por exemplo, assim. Como podemos ver, está sendo lançado novamente e, se eu for atualizar aqui, temos nossas marcas e categorias Vamos voltar agora e apenas enviá-los. Como podemos ver agora, se eu tivesse que me refrescar, encontraríamos apenas uma categoria que é o shampoo Agora, se eu voltar para a página inicial, vamos às categorias novamente. Temos shampoo alt e vamos digitar algo que não está em nossa pesquisa de categorias, e não teremos nada para mostrar nesse caso. Talvez possamos fazer algo com isso mais tarde, talvez guardá-lo para o projeto que você vai fazer. Nesse caso, em vez de exibir um espaço vazio aqui, talvez diga que essa categoria não está disponível, tente outra coisa ou talvez mostre todas as categorias com uma mensagem de que essa categoria específica não está disponível no momento ou que você cometeu um erro de digitação na nomenclatura da categoria Isso é tudo para as categorias, vamos passar para as marcas. Como podemos ver, também temos três marcas e queremos criar esse código como antes. Se procurarmos por alguma marca aqui, ela deve aparecer como a categoria. Vamos voltar. Ok. Como podemos ver, precisamos criar exatamente a mesma função para a categoria. Mas depois, vamos comprar marcas. E nesse caso, a função t cress, como de costume, se abre, e vamos deixar brand igual ao body request brand name Eu vou verificar isso agora. Então, se você for para a marca. Como podemos ver, temos aqui o nome da marca. Vamos acessá-lo usando este. No entanto, no formulário aqui, precisaremos de marcas e o método será sempre publicado. Temos o tipo de envio desse padrão, então estamos bem. Agora, o que vamos fazer é pegar essa marca e fazer exatamente a mesma coisa com o nome Vamos dividir talvez o corte do índice um até o final e colocar o primeiro elemento ou o primeiro caractere em maiúsculas Vamos verificar se o comprimento da marca é maior que um. Vamos simplesmente modificá-lo como antes, então adicione zero e faça duas letras maiúsculas Nesse caso, vamos adicionar tudo isso no final, vamos pesquisar as marcas, temos o banco de dados de marcas. Vamos encontrar todas as marcas que correspondem ao nome desta, é claro, temos a função que faz por nós o trabalho. Achei que não é igual a nulo, vamos mostrar essas marcas Como dissemos, neste caso, se a marca ou a encontrada não são iguais. Assim, vamos pegá-los e renderizá-los para as marcas da JS. Então, vamos fazer isso. Vamos chamá-la de marcas iguais a encontradas. E nesse caso, vou fazer registro de pontos no console dessas marcas que encontramos antes de renderizar na página de marcas Então, as marcas nos doem. Nesse caso, junto com as marcas que recebemos e a solicitação que também recebemos do usuário. Nesse caso, e se algo mais acontecer, se houver um erro ou não encontrarmos nada, vamos apenas renderizar para Brands dot JS ao lado de um y vazio. Então é isso, talvez eu agora, vamos voltar ao reflash aqui E vamos verificar. Então, por exemplo, serve para Johnson aqui. Pesquisa Johnson. Portanto, temos outra falha na pesquisa de visualizações da marca DGS. Desculpe, vamos verificar isso aqui. O que estamos fazendo, na verdade? Talvez sejamos. Para que façamos o trabalho. Conjunto de marcas. digitar uma marca em vez de marcas. Esse é o nome do desfiladeiro. Agora, se voltarmos, digamos que atualizemos, verifique se tudo está funcionando aqui, então estamos bem Vamos digitar Johnson search. Como podemos ver, encontramos o que procurávamos. Este é o Johnson e se eu digitar alguma coisa. Não vamos conseguir nada. Este é um espaço vazio, dizendo que não temos nenhuma marca com esse nome. Basicamente , é isso que acontece neste vídeo. Neste vídeo, criamos o botão de pesquisa e a opção de exibição dessas marcas e categorias. Na próxima, mostraremos talvez os itens que temos dentro deste Johnson. Vamos criar a rota para o botão pler. Sempre que o usuário pressiona essa opção, explore. Ele também deve ver todos os itens relacionados a esse produto ou marca Johnson. Obviamente, faremos exatamente a mesma coisa para as categorias. Por exemplo, se o usuário pressionar Shampoo, ele também deverá ver talvez todos os itens relacionados ao xampu de todas as diferentes marcas que temos É isso, principalmente com isso dito, este é o final deste vídeo, até o próximo. 8. Produtos: Olá, e voltaremos neste vídeo, vamos fazer o botão Explorer. E vamos mostrar todas as marcas disponíveis ou todos os itens disponíveis dentro dessa categoria. Vamos voltar às categorias aqui. Como podemos ver, temos aqui esse botão com o tipo enviado. O formulário está vazio por enquanto, vamos corrigi-lo. Eu o chamo de produtos e métodos que sempre devem ser publicados nesse tipo de formulário. Nesse caso, vamos até o abdômen e vamos criar esse método aqui. Ok. Então, vamos começar com isso aqui. Nesse caso, vamos começar com produtos e, claro, a função, abrir essa função e começar com a categoria que temos. Como podemos ver, a categoria será retirada desta aqui. Nós temos o nome. E também podemos armazenar esse, na verdade, dentro de uma entrada para mantê-lo como a categoria. Nesse caso, vou guardá-lo aqui mesmo. Então, a entrada será do tipo in, e eu vou definir o valor desse nome de categoria aqui. Talvez façamos o nome, será a categoria e o valor será exatamente o que exibiremos aqui. Nesse caso, será categoria de categoria. Tudo bem Então, basicamente , é isso. Agora, se eu voltar ao aplicativo, posso acessar o nome da categoria simplesmente digitando a categoria do corpo do ponto de solicitação Nesse caso, terei a categoria menino e posso pesquisar as categorias que temos e encontrar a apropriada para exibi-la. Então, nesse caso, o que vamos fazer é exibir todos os itens que temos que correspondem a essa categoria específica. Então, como você faz isso? Vamos simplesmente tentar pesquisar. Então, item, encontre toda a categoria que corresponde a essa. E para ter certeza disso, vamos ao banco de dados. Então encontrei a categoria. Tudo bem Então, se voltarmos ao banco de dados, peço desculpas pelo esquema E vamos verificar o interior desses itens. Esse é o esquema do item. Temos a descrição do título e temos a categoria aqui. Obviamente, vamos adicionar alguns itens e vamos examiná-los agora. Mas, por enquanto, vamos terminar essa categoria e talvez a façamos. Então, por enquanto, vamos abrir essa função aqui. E vamos trabalhar com isso. Então, se encontrarmos algo, se não houver erro, vamos verificar se foram encontradas categorias. Ou talvez os itens encontrados sejam um pouco mais lógicos, itens, ok. E, nesse caso, os itens encontrados não são iguais a nulos. Isso significa que encontramos algo e podemos renderizar na página ao lado desses itens. Então, renderize, e vamos renderizar para a página de produtos que criamos anteriormente, e está aqui. Obviamente, junto com os itens que temos , os itens seriam os itens encontrados, e a solicitação será apenas uma solicitação simples como. Basicamente, vamos simplesmente pesquisar os itens dessa categoria específica e retornar todos os itens que correspondem a essa categoria. Basicamente, é isso. Agora vamos criar alguns itens e adicioná-los ao banco de dados para poder exibi-los nos produtos do arquivo JS. Tudo bem Então, vamos subir. E nesse caso, vamos criar alguns itens. Então, vamos copiar o esquema para tê-lo à nossa frente aqui Eu acho que aqui é bom. E vamos apenas comentar isso. Nesse caso, vou criar o item um, que será novo e esse será o item. E os colchetes com o título seriam, por exemplo, talvez baby Johnson e a descrição, desculpe, preciso colocá-los entre aspas Então esse é o bebê Johnson. E, claro, eles também estarão em catiões. Agora, quanto ao URL da imagem, MR L também será uma string. Esta capa será composta por imagens e Johnson JPG. Então temos a marca, e é óbvio. Por enquanto, é Johnson. A categoria talvez seja xampu. E tamanho talvez 100 milli. E o preço, por exemplo, é de $8 e a quantidade total será, por exemplo, talvez 50 por enquanto Encontrei o erro aqui. Eu preciso consertá-lo, então vamos rolar para cima. E aqui temos um. Então é isso, basicamente, esse é o nosso primeiro item. Vamos copiar e colar mais algumas vezes e mudar algumas coisas. Tudo bem Então eu acho que estamos bem. Temos o item dois e este. Talvez tenhamos algo como Sam. E vamos simplesmente mudar isso para corpo. E, claro, a categoria anti-ramificação também deve ser pomba e xampu Nesse caso, o item três, talvez seja corpo. Digamos que eu não saiba. Johnson, por exemplo, depende do corpo de Johnson, me desculpe, e a categoria é boné corporal. Agora, nesse caso, temos mais alguns itens. Vamos apenas trocá-los. E acho que estamos bem. Só queremos inseri-los em nosso banco de dados de itens. E para fazer isso, simplesmente inserimos muitos, vamos inserir o item, o item dois, o item, o item quatro e o item cinco. Com isso dito, simplesmente queremos verificar se há um erro. Se houver um erro, vamos imprimi-lo. Caso contrário, vamos imprimir todos os itens. Item um, item dois, item três, item quatro e item cinco. Acho que estamos bem. Agora, sempre que salvamos isso, na verdade o salvamos, e esses são os itens que criamos. Vamos voltar e comentar isso Se voltarmos e fizermos uma atualização aqui, encontraremos esse banco de dados de itens que contém cinco itens por enquanto Claro, agora vamos implementar isso em nossos produtos para a DGS Agora temos o banco de dados. Temos todas as informações de que precisamos. Temos todos os itens que queremos e podemos acessá-los por meio desse banco de dados. O que estamos realmente fazendo é adquirir esses produtos. E enviá-los para a página de produtos, que é essa aqui. O que vamos fazer agora é acessar a página de produtos, GS e modificá-la para mostrar essas marcas ou mostrar esses itens de uma marca específica. Então, rolando para baixo, podemos ver que temos talvez dois, então temos esse único produto Temos as imagens e também temos o item intitulado. Talvez vamos visualizá-lo primeiro. Em vez de enviá-los por enquanto, vamos excluí-los. Por enquanto, vou renderizar novamente para a página de produtos. Então, se eu pressionar e explorar, vou renderizar para esta página do produto, onde tenho os itens e eles são os mesmos por enquanto. Então, o que vamos fazer é ir até este, excluir os dois. Como podemos ver, temos uma coluna. Vamos deletar tudo isso. Nós temos alguns. E vamos conferir aqui. A partir daqui, até o segundo. Então, vamos deixar um deles e vamos trabalhar com ele. É com isso que vamos trabalhar. Temos colunas e vamos modificar o preço, o nome da marca, o nome da categoria, o tamanho, as imagens, tudo isso e, claro, o título. Agora, vamos voltar aos aplicativos e levar esses itens conosco. Para acessar esses itens, vamos apenas escrever itens aqui. Então, dentro deste, depois de criar os produtos, vamos examinar todos os itens que temos. Os itens de cada um criarão essa função com o item e acima, e de, vamos adicioná-los ao script Java incorporado em ML ou EJS Okay. E, claro, vamos pegar todos esses itens e imprimi-los. Então, como você faz isso? Vou simplesmente pegar este e colar até o fim depois deste aqui. Agora podemos acessar esse item. Por exemplo, se eu quiser o título do item aqui, posso simplesmente escrever esse título para o item e acho que estamos bem. Agora, se eu voltar aqui e clicar em atualizar, vou receber Desculpe, não escolhi nenhum item por enquanto, então 5% da categoria, além de explorar agora Vamos ver o que temos. Como podemos ver, o título não é exibido, e acho que é porque aqui esquecemos a entrada Agora, se voltarmos e nos refrescarmos, teremos Baby Johnson, Campo, Baby Johnson, Baby Johnson Esses são todos os itens que pertencem a essa categoria específica, que é Champ. Nesse caso, vamos alterar o preço, o nome da marca, a categoria e o tamanho. Vamos voltar ao nosso código e vamos mudar aqui mesmo. Ao acessar o preço do item, e aqui a marca será, como de costume, categoria da marca do item também. Então, categoria do item, finalmente , essa, que é o tamanho, item daquele tamanho. Acho que estamos bem. Ainda temos a imagem e faremos isso em um minuto. Agora, se eu voltar e tudo estiver fresco, mudamos tudo. Temos o tamanho da categoria da marca, tudo isso. Vamos voltar agora. Obviamente, quanto ao URL da imagem, nós o chamamos de IMR L. Basta acessá-lo aqui, como podemos ver, temos tudo o que queremos como queremos Basicamente, para as categorias, faremos exatamente a mesma coisa com as marcas no próximo vídeo. Te vejo então. Ok. 9. Casa marcas: Olá e bem-vindo de volta. No último vídeo, criamos o link entre a categoria e a página de produtos. Por exemplo, se o usuário pressionar essa opção, ela acessará todos os produtos ou itens que estão nessa categoria específica Agora, não temos nenhum item no microfone. Mas para o shampoo, na verdade temos quatro itens, como podemos ver aqui. Então, temos esses quatro e os exibimos usando quatro loops, pegando todos os itens do APTOs aqui Então, estamos simplesmente pegando todos os itens que correspondem à categoria específica e simplesmente levando-os com a renderização para a página do produto e, é claro, exibindo-os como dissemos anteriormente, usando quatro loops. Agora, o que vamos fazer é implementar o mesmo procedimento para a categoria DGS Desculpe pela BrandG, vamos supor que estamos na página da marca DGS Então está aqui. E vamos fazer a mesma coisa para isso, mas vamos verificar as marcas. Vamos renderizar para os produtos, a página web da DGS, no entanto, com marcas em vez de categorias Isso é o que vamos fazer. O que eu estou pensando é ter como antes. Por exemplo, aqui, fomos verificar. Sim. Por exemplo, na categoria D JS, este formulário nos levou aos produtos com o método de postagem. O que estou pensando é criar um método separado para esse tipo de postagem, por exemplo, em vez de apenas produtos, vamos chamá-lo de produtos, talvez marcas, neste caso, e vamos abrir uma função, por exemplo, Abrir. Agora, o que vamos fazer é pegar a marca do corpo da solicitação, da marca, e registrá-la no console aqui. E, claro, continuaremos com a busca nos itens. Portanto, a localização do item encontrará a marca que é essa marca específica. Erro ativo e itens encontrados. Nesse caso, se não houver erro, verificaremos os itens encontrados que não são iguais a nulos, depois encontramos alguns itens dessa marca e os imprimiremos antes de renderizá-los na e os imprimiremos antes de renderizá-los página do produto com os itens que são itens falsificados junto com a solicitação Sim. É isso mesmo. Basicamente, vamos até a marca ou DGS aqui dentro deste formulário, vamos realmente acessar produtos, marcas, e o método deve ser publicado É isso mesmo. Acho que estamos bem. Agora, se voltarmos e isso for uma atualização. Portanto, não se preocupe, isso não acontecerá. É só porque ainda não temos os produtos. Não temos os produtos aqui ou os itens para acessar esta página de produtos. Agora estamos bem, estamos na marca e, se eu clicar em explorar, iremos para a página de produtos. No entanto, não temos nenhum item que se enquadre na categoria ou na marca Johnson. Nesse caso, vamos abrir uma compressa. Mongo DB compass e vamos verificar nosso banco de dados. Se houver um item que tenha Shampoo como marca. Desculpe, Johnson como marca. Nesse caso, se quisermos nos conectar ao banco de dados, vamos rolar até o topo e usar isso como um link e abrir nosso banco de dados. E, como podemos ver, temos os itens aqui. Também temos o shampoo. Tudo bem. Portanto, não há problema aqui. O problema é que o que estamos recebendo é indefinido e acho que é porque esquecemos de inserir a marca Então, talvez vamos adicioná-lo aqui. E esse será o nome. Marca e, neste caso, vamos usar a marca D. Dessa forma, obtivemos a entrada que está oculta com o nome da marca, para que possamos acessá-la usando a marca corporal solicitada com o valor da marca dessa marca aqui. Acho que estamos bem, por enquanto, se voltarmos e nos refrescarmos, vamos verificar se há Johnson E vamos esperar um pouco, se não houver erro. E acho que estamos bem. Como podemos ver, temos todos os itens que têm essa marca específica, que é Johnson. Então, temos quatro itens da Johnson e três xampus e um Bo, para os quais estamos bem por enquanto. É isso que pretendemos fazer. Isso é o que fizemos também para as marcas, assim como para as categorias. É isso basicamente para esta etapa, vamos passar para a próxima. Então, vamos ver se voltarmos para casa, podemos descobrir que marcas, best-sellers e categorias não funcionam bem, então precisamos obtê-los do banco de dados que temos e mostrá-los em nossa página inicial Então, voltando para casa para D JS. É isso mesmo. Podemos começar pelas marcas aqui mesmo. Estas são as nossas marcas, confira nossas marcas e aqui. Precisamos mostrar todas as marcas que temos ou talvez algumas delas. E para fazer isso. Vamos voltar aqui, como podemos ver na barra frontal, que nos levará à página inicial Na verdade, estamos pegando todas as marcas, best-sellers e categorias e renderizando-as na página inicial Aqui temos categorias, marcas e o melhor. Nesse caso, podemos acessá-los diretamente na página inicial da GS Nesse caso, vou começar criando talvez aqui mesmo após o recurso. Então, o que estou pensando em fazer é em vez de iminir todo esse mar, estou pensando em algo um pouco mais simples Vamos começar com isso aqui. Em primeiro lugar, talvez conteremos o contêiner e, dentro desse contêiner, teremos a linha e a coluna 12 no meio, ao lado do centro tributário. Aumente e suba esta, e vamos começar com o título, então será H dois com a classe da seção de cabeçalho. B três, e talvez Pb quatro. Acho que estamos bem. Vamos sem marcas e o parágrafo será da classe B cinco. Nesse caso, escreveremos para conferir nossas várias marcas. Agora, se voltarmos e voltarmos para o novo, podemos ver que temos marcas, confira nossas várias marcas. Agora podemos criar nosso carrossel real. Nesse caso, vou simplesmente criá-lo aqui com a coluna central 12. Nesse caso, serão apresentados o carrossel e o carrossel antigo Claro, agora podemos começar mostrando nossas marcas, então vamos criar quatro loops Dissemos que temos marcas e das marcas. Vamos usar para cada um e, claro, vamos atualizar a função com uma marca e aumentar essa função E, claro, fechando no final. É isso, basicamente, agora podemos começar com a criação do nosso item. Esse é o item da classe. Vamos criar uma classe chamada trabalho. Nesse caso, o que eu vou fazer é criar um formulário com uma ação de produtos ou algo parecido, vamos discutir isso mais tarde, e o método será publicado. Nesse caso, vamos criar nosso botão, que tem um tipo de envio e, claro, a turma também deve ser PT N. Agora, depois de apertar esse botão, vamos criar a divisão que é a carta Então, vamos ter o texto centralizado no meio. E, claro, talvez adicionemos um pouco de estilo. Por exemplo, a largura, vou considerá-la como 18 Rm. Agora podemos ter nossa imagem com o arquivo de origem da seguinte forma. Por exemplo, aqui temos a imagem real que está na pasta de imagens, além da imagem da marca. E neste caso, vamos tirar essa imagem e adicionar o corpo do cartão. É claro. O corpo desse cartão seria o nome real da marca. Então, neste caso, vou fazer com que seja H seis, então isso será o texto do cartão. E isso conterá uma marca, marca e, claro. OK. Vou precisar adicionar isso para torná-lo legível Acho que é isso basicamente. Isso é o que deveríamos estar fazendo. Se eu voltar agora e clicar em atualizar, obteremos essa imagem Vamos pegar Johnson, Cogate e Basin. Como podemos ver, temos todos eles no mesmo local. Vamos consertar isso. O que eu estou pensando está aqui dentro desta. que vou fazer é pegar tudo isso e talvez criar aqui. Uma linha e copie tudo isso na linha. Claro, vamos criar uma coluna de quatro talvez, ou vamos fazer com que seja assim. Aqui, coluna de quatro. Nesse caso, vou copiar tudo isso mais uma vez. Baseie-o aqui e vamos verificar agora. Então, o que temos aqui? Tudo bem. Acho que descobri quanto é o dinheiro É que estamos criando cada vez uma nova linha, cada vez que entramos nesse loop de quatro. Agora, acho que se eu voltar e clicar em atualizar. Sim, estamos bem por enquanto. Ainda temos algumas modificações a fazer. Então, por exemplo, podemos fazer com que o tamanho da imagem seja corrigido. Então, não temos algo assim. Isso será maior do que as outras imagens e também não será muito bonito. Então, com isso dito, acho que esse é o fim desse vídeo. E no próximo vídeo, faremos exatamente a mesma coisa talvez para as categorias e os mais vendidos e, claro, adicionaremos o link a este Por exemplo, se o usuário pressionar isso, então aqui temos o que temos aqui, temos Johnson Portanto, se pressionarmos Johnson, você deve redirecioná-lo para os produtos relacionados à Johnson e, claro, à Colgate e à Basin faremos exatamente a mesma coisa as categorias reais. Dito isso, este é o final deste vídeo, nos vemos no próximo. OK. 10. Casa de venda melhor: Olá e bem-vindo de volta. Neste vídeo, continuaremos nossa página inicial e, claro, começaremos com o best-seller. A última vez que terminamos as duas marcas e categorias. Ainda temos a página do best-seller, e vamos começar com ela. Aqui, criamos o primeiro contêiner que contém as marcas e aqui temos as categorias. Vou colocar os mais vendidos no meio disso Para fazer isso, vamos começar com a construção do contêiner. E eu vou criar a primeira classe. Essa é a primeira divisão, desculpe, em que teremos o texto da linha silenciado e o texto centralizado E neste caso, eu vou ter outra coluna com margem de quatro em todos os lugares de dimensões. Nesse caso, vamos começar criando o cabeçalho. A classe será expositora ou caneca e os quatro piores, e eu vou chamá-la de mais vendida Vou seguir esta por uma nova divisão. E eu vou deixar o sublinhado escuro e todas essas são aulas de alças de botas, e você pode conferi-las no site oficial Mas, por enquanto, vamos usá-los como aqui. Vou criar um sublinhado seguido por um parágrafo com o líder da turma, dizendo que confira alguns dos nossos itens mais vendidos Agora, se voltarmos, vamos nos refrescar. Ok. E, como podemos ver, temos os mais vendidos. Confira alguns dos itens mais vendidos. Isso é basicamente para o parágrafo do título. Agora, vamos voltar e começar com outra linha e, nesse caso, precisaremos criar uma linha com itens de linha texto e Maxto Agora podemos dar uma olhada em nossos best-sellers e vamos fazer isso simplesmente criando um loop completo Ideal para cada função, vamos chamá-la de mais vendida. Claro, vamos abrir isso. E feche-o aqui mesmo. Eu achei que era o melhor. Vamos até os APOGs e conferir, o que estamos fazendo com a página inicial Vamos pegar as marcas, os mais vendidos categorias e as nomearemos como as melhores aqui Vamos escolher nossos mais vendidos como este. Podemos acessá-los simplesmente criando esses quatro loops e acessando-os item por item. Isso é basicamente. Agora só precisamos criar nossas colunas. Coluna grande quatro e, claro, talvez dez se o usuário estiver usando algo menor do que uma tela de desktop. Nesse caso, vou adicionar x auto e acho que estamos bem. Podemos começar criando o cartão. Vou chamá-la de cartão um para mais tarde, talvez para o CSS, e meus quatro com x auto. Agora, podemos começar criando a imagem. A fonte dessa imagem será exatamente como dissemos, vamos conferir. Por enquanto, não criamos nenhuma imagem nem nenhum best-seller. Vamos adicioná-los mais tarde. Mas, por enquanto, vamos supor que eles sigam o mesmo formato do MMR L aqui Teremos imagens com pontos e barras no nome do produto Então, vou acessá-lo usando apenas o best-seller e voltando aqui. Vamos ver em nosso esquema do best-seller, qual é o nome desse? No best-seller, temos o nome, temos a imagem, para que possamos acessá-la usando a imagem. Nesse caso, o que vamos fazer é criar a imagem de best-seller, e acho que estamos bem. Agora podemos continuar criando o título no corpo do cartão. Teremos o título que é o título cinco com a classe de texto em maiúsculas. Talvez seja em negrito, fonte branca, negrito, margem e três itens da lista de cartões Dentro deste, vou simplesmente exibir o nome. Então, best-seller, o nome e, para ter certeza de que eu vou voltar e ver, demos o nome a esse nome. É assim que podemos acessar o nome. Agora, ainda precisamos criar o formulário para enviar nossos botões, por exemplo, se o usuário pressionar esse best-seller específico, deverá redirecioná-lo para essa página específica Para fazer isso, vamos chegar aqui após o título, vou criar um formulário e esse formulário será redirecionado para uma coisa específica Eu vou fazer isso mais tarde. Mas, por enquanto, o método, como sempre, será publicado. Neste formulário, vou criar uma parte inferior com o tipo submit class BTN, preenchendo dois textos em maiúsculas e peso frontal dourado ao lado alguns outros botões da tabela de preços. Isso é para o CSS. Nós vamos usá-lo mais tarde. Mas, por enquanto, aviso BTN para tornar o texto amarelo e claro Então, aviso BTN, desculpe, por deixar o botão amarelo e o texto claro por tornar o texto claro E vou simplesmente escrever os detalhes. Ok. Acho que estamos bem por enquanto, temos nosso formulário, temos nosso botão e tudo parece bem. Se eu voltar e clicar em atualizar. Sim, nada vai acontecer já que não temos o best-seller aqui. O que estamos tentando fazer é ir para casa e tentar acessar o melhor que não está disponível porque não temos nenhum best-seller em nosso banco Vamos consertar isso. Na verdade, criamos alguns best-sellers aqui, mas não tivemos a chance de adicioná-los ao nosso esquema Vamos voltar até o fim. Nesse caso, o que vamos fazer é criar a melhor inserção Many I remember B one, B two, B three. Claro, vamos criar a função com o erro. Portanto, se houver um erro, desconecte-o, caso contrário, basta registrar os melhores conjuntos. E agora, se eu voltar, podemos ver que os criamos, criamos o nome Johnson, hidrante Cgate e o seguinte ID No entanto, acho que perdemos algumas coisas, por exemplo, perdemos a imagem. Sim. O que fizemos aqui foi criar o best-seller com o nome IMG em vez de imagem Uma maneira de corrigir isso é simplesmente excluir este. Será IMG. Obviamente, precisamos voltar ao nosso banco de dados, atualizá-lo e colocar todo esse best-seller aqui Abandone esta coleção, pois não precisamos delas sem suas imagens. Agora, se voltarmos e salvarmos este, vamos atualizar. Sim. Tudo bem Então, fazendo isso. Se voltarmos aqui e ele se referir, encontraremos o banco de dados dos mais vendidos. Então eu acho que devemos esperar um pouco. Mas, por enquanto, podemos ver que o temos aqui. Temos as marcas, as categorias e a imagem. E nesse caso. Se voltarmos agora, vamos ver que temos os mais vendidos, confira alguns dos mais vendidos Temos o Johnson Colgate e o outro acho que temos um problema com o MatErl e isso é um Mas a ideia geral é que tenhamos todos os nossos produtos, todos os nossos itens e os mais vendidos nas marcas e nas categorias É isso principalmente. É assim que podemos criar a página do mais vendido ou a seção do mais vendido. E, claro, o que vamos fazer agora é criar esse botão. Agora, se pressionarmos isso, isso nos levará a uma página de erro. No entanto, precisamos nos levar à página real do produto onde veremos o produto específico. Este é um item que tem detalhes específicos , tamanhos específicos e assim por diante Se o usuário quiser comprar esse item, ele também deve ver todos os detalhes e pode fazer isso simplesmente clicando nos CDs. Agora, o que vamos fazer é fazer a mesma coisa com as marcas e categorias. Agora, se você pressionar marcas, isso nos levará a todos os itens que estão nas marcas específicas. Como podemos ver se pressionarmos aqui, temos todos os itens. Temos alguns detalhes aqui, mas não temos a descrição, não temos a quantidade e, claro, não podemos fazer o pedido aqui. O que vamos fazer também é que, se pressionarmos isso, também devemos nos levar à página de descrição do produto. E nesse caso, nós já criamos aqui, temos produtos e temos produto. Esta página deve ser exibida sempre que pressionamos algo assim. Seja nas marcas ou categorias ou mesmo nos mais vendidos, deve nos redirecionar para esta página específica que é o produto da JS e mostrar todos os detalhes desse produto específico que o usuário deseja Porque é basicamente isso para este vídeo. Espero que você tenha gostado. E na próxima, vamos fazer o que falamos agora e até lá. Ok. 11. Página do produto: Olá, e voltaremos neste vídeo, continuaremos a construção desses produtos. Então, aqui temos os produtos e, como dissemos, sempre que pressionamos em algum produto específico, queremos ser renderizados na página do produto, que é principalmente esta Como dissemos, também queremos fazer isso se estivermos na marca ou na categoria. Se estamos aqui na categoria, usamos xampu e acessamos a página do produto. Temos aqui agora alguns produtos específicos. Se eu clicar neste produto específico, quero ver os detalhes desse produto específico e também a seção de mais vendidos Portanto, se estou aqui no best-seller e quero ver os detalhes desse produto, também devo acessar esta página específica, que é o produto da GS Então, como fazemos isso? Agora, voltando ao Apo JS, podemos ver que no esquema mais vendido, criamos algo chamado item, que é principalmente o tipo, que é principalmente o tipo, e esse é na verdade o ID desse Item de referência e, claro, temos aqui o ID. Se quisermos acessar este item, podemos acessá-lo por ID, nome ou imagem, mas não faz sentido acessá-lo por imagem e também não faz sentido acessá-lo pelo nome, talvez tenhamos mais do que um produto com o mesmo nome, talvez tamanhos ou quantidades diferentes e assim por diante. Dito isso, podemos acessar esse item específico por meio do ID do objeto. Isso é o que vamos fazer. Agora voltando para a casa da DGS, e eu disse, deixo isso vazio por enquanto Agora é a hora colocar algo aqui, para onde vamos. Vamos até os produtos. No entanto, vamos adicionar algo, e esse é um costume que o Javascript nos permite fazer e fazer isso. Vamos simplesmente escrever os produtos. Vamos renderizar dois produtos. No entanto, não estamos renderizando apenas produtos, estamos renderizando produtos mais o item mais vendido E esse item nos permitirá pegar a identificação e colocá-la aqui. Então, suponha que temos esse D aqui. Agora, sempre que estamos renderizando, estamos renderizando cada vez para uma ação específica ou diferente Então, talvez estejamos renderizando para o primeiro item, então teremos produtos Nós vamos ter algo parecido. Produtos. Supondo que o primeiro ID seja um Então, produtos aquele primeiro, na segunda vez, se estivermos acessando o segundo produto, talvez os produtos sejam dois, e assim por diante. Portanto, a ideia aqui é que não é a mesma coisa toda vez que renderizamos para um produto Nesse caso, o que vamos fazer é usar algo chamado personalizado. Então, com isso dito, precisamos agora voltar aos AppGs e criar nossa função aqui. Então, como você faz isso? Simplesmente, o que vamos fazer é criar o aplicativo para obter o produto e, claro, nesse caso, o que obteremos são produtos mais o D desse produto. Então, como você faz isso? Vamos voltar e rolar até o fim. Talvez vamos adicioná-lo aqui depois do produto. Aqui temos os produtos aqui. Talvez também possamos adicioná-lo depois dos produtos principais. Aqui. O que vamos fazer é adquirir esses produtos e também sabemos que isso é um costume. O que vamos fazer é colocar um c e digitar custom. Nesse caso, vamos criar a função. Também. O que vamos fazer é criar o personalizado, que é basicamente obter esse costume daqui. Como podemos acessá-lo? Na verdade, é muito fácil apenas com solicitações de tipo, personalizadas. É assim que podemos obter o ID daqui e acessá-lo aqui mesmo. Basicamente, agora podemos pesquisar os itens e encontrar o item específico com esse ID específico. Agora, se voltarmos até o fim, podemos ver que o que estamos começando aqui é o esquema Mongoose que digita esse ID de Então, aqui temos a ideia desse objeto específico, e não é do best-seller. Não é desse item, é do item. O que estamos fazendo, na verdade é ir até o item. OK. E se formos ao banco de dados, podemos encontrá-lo aqui, na verdade. Então, temos o item. Na verdade, o que estamos fazendo é pegar esse ID daqui e colocá-lo dentro do nosso esquema como uma forma de item OK. Basicamente, é isso. Agora, voltando aos produtos, podemos pesquisar no item um banco de dados, encontrar por ID. Vamos encontrar por erro de função personalizada e encontrar itens cada vez mais altos. Se não houver erro, verificaremos se encontramos alguns itens redirecionaremos Talvez vamos registrá-los primeiro, itens encontrados. Me desculpe. E nesse caso, vamos simplesmente exibir os itens encontrados. Se esse não for o caso, é claro, exibiremos ou renderizaremos na página inicial. Então, coloque isso direto na página inicial. Agora, se encontrarmos os itens, queremos apenas criar, pegar a marca desses itens Então, vamos primeiro exibir esses itens encontrados. Vamos pegá-los e levá-los para a página do produto. Nesse caso, o que vamos fazer é simplesmente renderizar produto junto com a solicitação e os itens. Quais seriam os itens encontrados. Talvez digamos o nome de itens encontrados ou itens. Nesse caso, acho que estamos bem, por enquanto, se encontrarmos algo, renderizaremos página do produto ao lado desses itens encontrados. Agora, o que vamos fazer é acessar a página do produto e exibir esses itens encontrados como um formulário ou talvez como os detalhes desses itens encontrados. Aqui temos apenas um item. No entanto, podemos ter mais de um, vamos pegar o primeiro, então é por isso que estou colocando-o como item. Agora, se voltarmos e clicarmos em atualizar, eu desço até a impressora mais vendida Aqui temos produtos indefinidos. Vamos voltar e ver. Aqui temos produtos em vez de produtos. Agora, se eu voltar. Agora, o que estamos enfrentando aqui é que eu esqueci de parar de inserir os mais vendidos Vamos continuar e retirar todo banco de dados dos mais vendidos a partir daqui. E salve isso mais uma vez. Então, vamos parar com isso agora. O que vou fazer é talvez ligar o noto novamente. Vamos armazená-los e depois salvar este. No momento, teremos nosso melhor banco de dados aqui e ele contém apenas três produtos que mostraremos. É isso, basicamente, é uma atualização. Agora vamos fazer exatamente a mesma coisa para todos os produtos. São marcas ou categorias. De qualquer forma, seremos renderizados ou redirecionados para os produtos JS e continuaremos a partir daí Aqui estamos nos produtos da JS. Nesse caso, o que vamos fazer é criar cada alça aqui, em vez de ir a lugar nenhum Vamos corrigir isso simplesmente adicionando o local ou adicionando o link à página específica Nesse caso, o que vamos fazer é tentar digitar produtos, que é basicamente a página de produtos. Deixe-me adicionar as cotações, os produtos e, em seguida, abrir aqui que temos os itens Eu posso adicionar o item Do ID. Nesse caso, posso acessar a ideia do item específico. Claro, isso é o que estamos fazendo. Se eu voltar, vamos experimentar. Podemos enfrentar alguns erros, mas podemos ver ao longo da jornada. Se eu voltar do zero, vamos para a categoria, por exemplo, se eu pressionar o xampu específico, por exemplo, eu serei renderizado nesta página se eu pressionar esta Tudo bem. Então, estou correndo para a página inicial. Estou assumindo que temos um erro desde o que dissemos aqui no aplicativo para JS, se enfrentarmos algum erro dentro deste aplicativo para obter os produtos, o que vamos fazer é redirecioná-lo para ser redirecionado para a Não enfrentamos nenhum erro, simplesmente não encontramos nenhum item que tenha esse ID específico. O que vamos fazer é dividi-los em três categorias. A do best-seller, a das marcas e a das categorias. Então, acabei de criar um para a marca. Então eu o chamo de produto da marca. Então, o que vamos fazer é pegar esse, obter o nome do corpo que vamos criar e, em seguida, pesquisar os itens dentro do banco de dados de itens. Pesquise, há um título exatamente igual ao habitual. E nesse caso, se não houver erro e tivermos encontrado alguns itens, vamos apenas exibi-los e, é claro, renderizar o produto ao lado do item e da solicitação que recebemos. OK. Então, basicamente isso é o que estamos fazendo, e vamos fazer exatamente a mesma coisa para o produto das categorias neste caso, certo? Então, vamos fazer isso aqui. O que vamos fazer é obter a categoria do produto. Aqui, me desculpe, eu tenho um erro de digitação, então isso é e nós entendemos Agora, dentro desta, o que vamos fazer é criar a função. Acres abre esse único costume constante solicitando que, por nome, registre-o aqui apenas para visualizá-lo e , em seguida, pesquisar os itens Encontre o que corresponde a isso em termos de título e, claro, se tivermos um erro, precisamos exibi-lo e, se não, encontraremos algo. Então, se não houver erro, fazemos outra coisa para exibir esse erro. E, claro, vamos verificar se encontramos itens e então apenas redirecionar para a página inicial Se encontrarmos alguns itens, basta simplesmente exibi-los como itens. Libra mais itens. Obviamente, vamos renderizar a página do produto junto com a solicitação que recebemos e o item que encontramos. É isso, basicamente. É assim que podemos implementá-los de forma fácil. Vamos comprar este e simplesmente resolver isso. OK. Então, é isso, principalmente no próximo vídeo, vamos mostrar ou visualizar isso em ação e, claro, vamos continuar construindo Ainda temos a página de administração, ainda temos a opção de fazer pedidos. Precisamos adicionar todas as informações do usuário em nosso banco de dados e, claro, continuaremos fazendo seu pedido, armazenando seu pedido em nosso banco de dados e, é claro, exibindo-os na página de administração e na página de pedido do usuário. Com isso dito, este é o fim deste vídeo. Nos vemos na próxima. OK. 12. Carrinho: Olá e bem-vindo de volta. Neste vídeo, vamos dar uma olhada na página do produto. Como dissemos, acabamos de implementar anteriormente a página do best-seller, onde podemos clicar nos detalhes de C, e ela nos redirecionará para a página do produto E esse será o título do item, a descrição, preço, o tamanho da categoria da marca e quantas peças o usuário deseja. Em seguida, ele também pode adicioná-lo ao seu cartão. Neste exemplo, o que vamos fazer é mudar esses títulos, a descrição e os preços. Eles são estáticos, queremos torná-los dinâmicos. Desculpe, queremos torná-los dinâmicos e que possam ser alterados para cada produto. Nesse caso, vamos voltar para a página do produto. E nesta página do produto. Agora, lembre-se de que os enviamos aqui, Product of Best, e os renderizamos usando o item Então, o que vamos fazer é ir para a página do produto. E, como podemos ver, temos o título do item, uma descrição do preço, então queremos alterá-los. Então, como você os muda? É bem simples. Nesse caso, podemos chamar de título do item. OK. E aqui precisamos chamar o item D de descrição, já que estamos descrevendo esse item e o temos em nosso banco de dados. Então, como podemos ver, vamos excluí-los e tudo bem. Então, descrição do item. Deixe-me ter certeza de que, dentro do banco de dados, podemos descobrir que temos a descrição. Agora podemos exibir a marca e a categoria img R L. Quanto à marca, vamos exibi-la aqui. Então, como dissemos, marca do item. Agora, para a categoria, a mesma coisa. Então, a categoria do item quanto ao tamanho, podemos colocá-lo aqui. Este é o nosso tamanho, talvez adicione-o aqui, tamanho do item. Então temos quantas peças. Isso não é para nós. Isso é para o usuário. Temos o botão adicionar para cortar. Nós realmente não precisamos fazer nada aqui. No entanto, precisamos mudar a imagem, que é a imagem do item R L assim. Acho que estamos bem agora, se voltarmos e clicarmos em atualizar, obteremos o preço Desculpe, precisamos voltar aqui. Acho que o problema é que estamos exibindo ou pegando o primeiro ou qualquer título do item. Lembre-se de que, quando estamos pesquisando o item, estamos pesquisando todos os itens que têm o mesmo título. Nesse caso, estamos retornando uma matriz de itens e queremos apenas o primeiro item, então, para lidar com isso, simplesmente usaremos o item em zero. Este item é, na verdade, uma lista de itens. Vamos precisar apenas do primeiro, para lidar com isso, vamos simplesmente escrever em zero. Aqui, esquecemos o preço do item e, claro, em zero também esquecemos o igual, e vamos fazer a mesma coisa Acho que estamos bem, ainda temos o tamanho e a imagem. Isso é tudo para a imagem. Agora, se voltarmos e clicarmos em atualizar, obteremos algo parecido Temos nossa imagem, nosso título, descrição, preço, marca, categoria e tamanho ao lado da quantidade que o usuário deseja. Aqui, ele pressiona a quantidade e depois pode adicioná-la ao cartão Nesse caso, o que fizemos na verdade foi vincular o com aqui, temos o best-seller e vinculamos esse produto à sua descrição. A página do produto agora está vinculada à página inicial e, basta criar essa função que pega o item e o pesquisa no banco de dados do item e, em seguida, volta à página do produto e exibe todas as descrições ou todas as informações do item específico É isso, basicamente, é assim que podemos nos conectar entre eles. Agora, o que vamos fazer é trabalhar com esse cartão de adição. Agora estamos pressionando esse cartão de adição e nada está acontecendo. Vamos fazer com que funcione. Vamos adicionar isso ao cartão do usuário e, claro, vamos renderizá-lo novamente, talvez na página inicial ou na página de produtos. Vamos ver. Vamos voltar ao código aqui. Temos o botão aqui, e esse botão é do tipo enviar e temos nosso formulário. Então, agora a ação desse formulário é enviar, então vamos ter uma função de envio, e o método deve ser postado normalmente. Agora, voltando ao aplicativo JS, vamos criar uma nova função, que é basicamente vincular o produto à página de envio Então, vamos fazer isso aqui e eu vou primeiro criar a função e depois discuti-la. Vamos entrar nisso. Tudo bem Em primeiro lugar, aplique o aplicativo, mas após o envio e crie as funções normalmente, subindo e subindo os parênteses E, claro, o que vamos fazer é criar uma data para essa função ou sempre que o usuário estiver inserindo ou adicionando ao cartão. Eu o chamo de created a e será uma nova data, e vou transformá-la em uma string local. Nesse caso, vamos começar criando a caixa. Então, solicite na caixa. E nesse caso, a caixa está realmente aqui. Temos essa entrada, que é a caixa, e nessa caixa, teremos a quantidade que o usuário deseja. Vou adicionar algumas entradas que estão ocultas para tê-las conosco no arquivo aptOS. Nesse caso, vou ter o título do nome. O valor será como o nome indica o título deste produto, e eu vou ter mais alguns, então teremos a imagem do nome e o valor será igual a item.rl, e então finalmente teremos a última entrada, que também está oculta, e esse será o preço do valor, será igual ao preço do item, e acho que ainda estamos Tenho aqui para modificar este e obtemos. É isso, principalmente. Agora temos nossas entradas junto com a quantidade que o usuário deseja, podemos prosseguir e trabalhar com a função apto JS Primeiro de tudo, vamos pegar a caixa, vamos obter o tamanho ou o tamanho solicitado. O solicitado por idade, o título, como de costume, e o preço, como de costume. Agora, não tenho certeza se adicionamos o tamanho. Vamos prosseguir com o produto e adicioná-lo aqui mesmo. Temos a entrada e , em seguida, o tamanho e o valor do nome serão itens desse tamanho. É isso, basicamente. Vamos voltar. Agora estamos prontos para trabalhar com essa função. O que vamos fazer primeiro é encontrar o usuário que está fazendo login e, claro, adicionaremos isso ao cartão dele. Então, o que estamos fazendo primeiro é verificar se o usuário está bloqueado. Como você faz isso? Vamos criar o comprimento. Por exemplo, deixe-me criar uma variável primeiro, para que essa variável seja falsa, isso representará se o usuário está bloqueado ou não. E se eles solicitarem ao usuário que duração do pedido seja igual a zero, faremos alguma coisa. O que vamos fazer é pegar essa Variável S e torná-la verdadeira. Esse S representa que o usuário está fazendo o pedido pela primeira vez e queremos exibir ou obter suas informações para ter uma ideia melhor de sua localização, número de telefone e assim por diante S será verdadeiro nesse caso, e vamos verificar se o usuário e o comprimento são maiores que zero Nesse caso, verificado será esse pedido verificado será o último pedido do pedido e finalizado. O que estamos fazendo principalmente aqui é perguntar se o usuário já fez algum pedido antes e, nesse caso, se ele tiver alguns pedidos, o que faremos é retirar o cheque do último pedido. Agora, lembre-se de que o check-out é uma variável que é verdadeira se o usuário tiver feito o check-out e cai se não. E neste caso, vamos pegar e começar pelo nosso código aqui, de acordo com esses dois. Se um deles for verdadeiro, isso significa que queremos adicioná-los ao nosso banco de dados. Como você faz isso para verificar se S é verdadeiro ou se verificado é verdadeiro. Nesse caso, o que vamos fazer é encontrar por ID e atualizar. Esse é um método para localizar qualquer item ou usuário nesse caso, que tenha o ID específico e atualize as informações a seguir. O ID será o ID do usuário solicitado e, em seguida, abriremos isso, e é assim que podemos mudar, escrevemos o cifrão, pressionamos e podemos começar com a atualização. O que vamos atualizar são os pedidos desse usuário específico. Vamos abrir isso e atualizar cada um. Nesse caso, vamos abrir a matriz e os itens específicos. Então, o que vamos fazer é atualizar os itens específicos e, nesse caso, vou atualizar o preço, a quantidade e o tamanho do título da imagem. Como dissemos, a imagem será um será o preço será preço e a quantidade será a caixa que recebemos. OK. E, finalmente, esse tamanho será o tamanho que também temos. Agora, se os dois não estiverem satisfeitos, se um deles estiver satisfeito, descobrimos que podemos trabalhar com isso caso os dois não estejam satisfeitos, precisamos fazer outra coisa. Nesse caso, vamos começar encontrando o usuário, localizando o ID e atualizando o ID do usuário da solicitação , e usaremos o mesmo método, que é push. É assim que enviamos ou atualizamos , encontraremos os pedidos que finalmente estão e, nesse caso, atualizaremos a imagem, o título e o preço, a quantidade e o tamanho. Então eu acho que estamos bem. O que você precisa fazer agora é simplesmente sair daqui e filtrar de acordo com o checkout. Queremos que o checkout seja falso. Então, como você faz isso? Vamos simplesmente digitar filtros de matriz. É assim que fazemos, digitamos array filters checkout igual a false Com isso dito, este é o fim da visita. Continuarei na próxima para ver você. 13. Inicio a sessão: Olá e bem-vindo de volta. Neste vídeo, veremos como podemos entrar e sair aqui. Por exemplo, se quisermos fazer login, posso digitar meu login. Se houver algo errado, Se houver algo errado, receberei esta página da web se seu e-mail ou senha estiverem errados e eles solicitarão que eu tente novamente. Nesse caso, se eu quiser me inscrever, por exemplo, posso simplesmente digitar meu nome e depois meu e-mail. E, claro, uma senha, vamos criá-la por enquanto e depois clicar em. Vamos ver. Este é meu nome e este é qualquer e-mail, unis at example.com Vamos fazer disso um e um. Agora, se eu clicar em assinar, serei redirecionado para a página inicial, como podemos ver, agora podemos ver esse ícone e, claro, temos a opção de sair Agora, estamos fazendo isso porque, se quisermos ir para a marca, por exemplo, como dissemos, se marcarmos para a Johnson. Digamos que temos esses produtos, essas imagens não estão sendo registradas ou não estão carregando por enquanto, vamos esperar um pouco. Mas, para fins de argumentação, temos esta página onde temos os produtos. Nesse caso, quero adicionar este ao meu carro. Se eu estiver conectado, serei redirecionado para a página de envio, conforme dissemos Se não, vamos sair. Então, se eu não estiver desconectado, se eu não estiver conectado, serei solicitado a fazer login. Então, se eu voltar agora e tentar adicionar isso ao meu cartão, serei solicitado a entrar novamente. Quero inserir o e-mail e a senha. E isso é o que realmente fizemos neste caso. Então, aqui, quando implementamos o produto ou a função de adição ao cartão que nos leva ao envio, também dissemos que aqui, se virmos Então, se estivermos verificando se o usuário está conectado ou não, se for esse o caso, estamos atualizando o pedido do usuário. Caso contrário, vamos apenas atualizar o item específico nesse pedido. Obviamente, agora vou ver se o usuário ou o endereço do usuário está disponível. Caso contrário, vou renderizar esta página de envio como dissemos. Obviamente, se tivermos as informações do usuário, vou acessar a página da Web do Place Order. Agora, essa é uma ideia geral sobre o que vamos fazer. Mas é claro que vamos entrar nos detalhes e, claro, entender melhor enquanto trabalhamos nisso. Tudo bem O que estou pensando agora é criar a página de falha de login, já que temos a inscrição e ainda não temos o login, o login falhou. O que vou fazer é criar uma falha de login aqui, e tudo bem, esse é o arquivo EJS, e é para onde seremos redirecionados se algo errado acontecer com nosso login O que vamos fazer é primeiro incluir o cabeçalho So from partials. E então vamos começar com o fluido do recipiente. Então, vou criar a linha, que seria o centro do texto principalmente com pouco de preenchimento e a coluna seria média em três Acho que estamos bem. O segundo será seis. E nesse caso, vou escrever e, em seguida , um parágrafo do líder da turma dizendo que seu e-mail ou senha estão errados. Mas basicamente é isso. Agora vamos pedir que ele tente novamente. E vou começar criando o formulário real para tentar novamente. Este formulário nos levará ao seno n. Vamos criá-lo mais tarde, e o método será o post usual Agora, vamos começar a trabalhar com esse formulário. Vou criar o diálogo do modelo. Esses são de. Vou criar o conteúdo do modelo. Vou começar com o cabeçalho do modelo. Ok. Então é isso, basicamente, agora podemos colocar nosso cabeçalho. Vou escrever o seno n. Então isso será modelado. Título. Vou escrever o sinal seguido por um botão com o botão de digitação. A aula será BTN, encerrada e, claro, o que vou fazer é descartar isso e vamos usá-la Isso falhará e será igual ao modelo. Nesse caso, o que vamos fazer é continuar com a criação do corpo do modelo. E, claro, vou criar o grupo de formulários por Y dois. E, claro, vou começar com o rótulo. Portanto, esse rótulo será para e-mail e a turma será um endereço de e-mail com rótulo. E depois vou segui-lo pelo tipo louco e, claro, por algumas classes, como controle de formulários. Eu vou ter y dois, P dois e input como classes. O nome será principalmente nome de usuário. Agora, depois disso, vou criar outro grupo de formulários para a senha. Vou copiar isso. Isso é copiar e colar aqui. No entanto, aqui temos a senha, vou escrever a senha. E o tipo também será a senha e o nome. Ok. Então é isso principalmente. É assim que podemos criar o endereço de e-mail e a senha. Então, vamos seguir em frente e visualizá-lo aqui. Vamos supor que eu tenha cometido um erro ao me inscrever. Isso me levará a esta página onde eu tenho endereço de e-mail do Ops, a senha, estou errado. Tente novamente, temos o sinal, temos o endereço de e-mail e a senha ao lado do botão de login aqui. Então, vamos criá-lo lá embaixo. O que vamos fazer agora é criar o rodapé do modelo e eu vou justificar o conteúdo. Começar. Nesse caso, vou criar o botão que vamos enviar, e a classe será T N. Talvez vamos adicionar algum estilo, como a cor de fundo. Vou fazer com que eu goste do sclorthree 18f5, oito F cinco, e vou escrever É isso, basicamente. Agora, se eu voltar, como podemos ver, esta é a nossa página, e isso nos redirecionará para, como dissemos, esse formulário seno ou ação de login que criaremos posteriormente no apto criaremos posteriormente no apto Este é o nosso sinal de falha. Vamos voltar ao nosso apto JS e continuar nosso trabalho aqui. Agora, no arquivo apto, o que vamos fazer é criar a função de login e, neste caso, deixe-me criá-la logo abaixo desta O que vamos fazer é criar o apto post, sign, e o que vamos fazer é criar as funções normalmente, e eu vou criar o usuário Nesse caso, o usuário estará em U user Okay. Vamos abri-los e o nome de usuário será solicitado pelo nome de usuário. Como dissemos, agora, obtivemos o nome do usuário do corpo da solicitação e o que vamos fazer é verificar se esse usuário está fazendo login. Então, como você faz isso? Solicitamos o login. Nós inserimos o usuário que criamos e criamos a função com o erro. Se houver algum erro, basta desconectá-lo, caso contrário, vamos verificar. Se o passaporte estiver autenticado, então estamos bem. Caso contrário, precisamos redirecioná-lo para o campo de login que acabamos de criar anteriormente Então, como você faz isso? Então, escrevemos passaporte autêntico oito autêntico oito e vamos abrir. Vamos dizer que a falha redireciona dois, vamos redirecioná-la para o sinal Essa é outra função que criaremos posteriormente, e essa função será apenas responsável pela renderização para assinar o arquivo DGS com falha Nesse caso, depois de criar este, o que vamos fazer é continuar com a solicitação, d e seguida pela função, e essa função simplesmente será redirecionada para a página inicial Ok. Então, basicamente, é isso. É assim que podemos fazer isso. Agora, o que vamos fazer é criar o aplicativo sem fio e falhar Então, como dissemos, se algo estiver errado, seremos redirecionados para a senoidal. Então, como você faz isso? Ative as funções de seno e falha como de costume, aumente aumente e renderize para seno e falhe Ok. Então, temos a solicitação de solicitação, como de costume, e terminamos agora. É assim que podemos fazer isso. Em primeiro lugar, criamos a postagem adequada para fazer login. E o que estamos basicamente fazendo é obter o nome de usuário do usuário, estamos criando um usuário. E estamos verificando. Se esse usuário estiver fazendo login agora, tudo bem. Acabamos de acessar este usuário que está, na verdade, em nosso banco de dados. Basta acessar a página inicial e ajustar o login para sair. Nesse caso, indicando que o usuário está conectado agora e também pode comprar ou adicionar ao seu cartão. Caso contrário, se esse não for o caso, vamos redirecioná-lo para a página de falha de login E como você faz isso, vamos até o AbdTgt, renderizamos até o sinal e falhamos pelo sinal abd g e falhamos aqui Basicamente, é isso. Agora, se voltarmos para casa aqui, e como você pode ver, agora projetamos e falhamos. O que precisamos fazer agora é que, se eu realmente criei isso, suponhamos que eu tenha feito login e esteja tudo bem agora. Se eu voltar, por exemplo, para casa, como você pode ver, estou conectado, temos o botão de sair agora e temos esse cartão. Se eu pressionar no cartão, o que faremos é exibir essa página da web onde o usuário talvez possa adicionar todas essas informações e, em seguida, pressionar Avançar. Ok. E, claro, vamos adicionar esse pagamento. Por enquanto, temos apenas um pagamento em dinheiro na entrega. Se o usuário pressionar, eu serei redirecionado para esta página onde teremos o pedido que o usuário tem Por exemplo, acabei de adicionar este ao meu cartão e você também pode adicioná-lo novamente, para que ele possa voltar aqui e depois voltar novamente, por exemplo, se você quiser mudar o endereço dele ou algo assim. E, claro, depois de tudo isso, ele também pode remover ou fazer o pedido. Basicamente, é isso. É assim que podemos fazer isso. Obviamente, depois de fazer o pedido, o que veremos são as compras aqui e com o botão pendente, indicando que esse pedido ainda está pendente, ainda não foi recebido e, claro, o total com a data e hora do pedido. Então, com isso dito, este é o fim deste vídeo. No próximo vídeo, vamos implementar todas essas funções. Eles são bem simples. No entanto, precisamos ter muito cuidado ao criar ou trabalhar com esses tipos de funções, pois elas se encaixam muito umas nas outras. Por exemplo, aqui, temos esse endereço de pagamento e, em seguida vamos voltar para a página de assinatura na web e assim por diante. Então, basicamente, nos vemos no próximo vídeo. Ok. 14. Envio: Olá e bem-vindo de volta. A primeira coisa que faremos neste vídeo é aprender como podemos alternar entre o login e a saída. Então, como podemos ver, sempre que não estamos fazendo login ou não estamos nos inscrevendo, podemos ver os dois botões, o cadastro e o login aqui. Vamos clicar em entrar, escrever nosso e-mail. Em seguida, pressione o botão de login. Nesse caso, vamos ver esse ícone seguido pelo botão de sair. Como fazemos isso? Vamos voltar para o abdômen aqui e abrir o cabeçalho. Esse cabeçalho está parcial, como podemos ver, estamos apenas exibindo a inscrição aqui. OK. Então, o login foi seguido, é claro. O que vamos fazer é criar isso aqui mesmo. Então, digamos. Em vez de apenas mostrar a inscrição, verificaremos se o usuário está autenticado ou se a solicitação está autenticada, que significa que o usuário está fazendo login ou está conectado Nesse caso, não mostraremos o botão de inscrição. Caso contrário, mostraremos o ícone deste , como dissemos. OK. Então, neste caso, vamos fazer isso aqui. O que vamos fazer é abrir uma declaração if, então, se a solicitação for autenticada, se for esse o caso, faremos alguma coisa E o que eu estou pensando é fazer isso aqui. Então, o que vamos fazer é verificar se o usuário da solicitação não está autenticado Se for esse o caso, mostraremos esse botão. Caso contrário, o que vamos fazer é mostrar o ícone. Nesse caso, como podemos fazer isso, podemos simplesmente abrir outra declaração. Então, se a solicitação for autenticada. Nesse caso, o que vamos fazer é criar uma classe de P x uma coluna dois e, para grandes, vou torná-la coluna grande um. E vamos abrir. Vamos abrir a barra de navegação e vou chamá-la de item de navegação E neste, vou criar um link que vai para o carrinho e vamos usá-lo mais tarde. Mas, por enquanto, vamos criar o Nank. Neste, vou criar o ícone que é do bootstrap Vou pegar o ícone que é um carrinho de compras. OK. E então vamos mudar a cor para branco e, claro, esse item ficará vazio. O que vamos fazer aqui é fechar este por enquanto e continuaremos com o login. O que acabamos de fazer aqui é verificar se o usuário ou a solicitação estão autenticados e, portanto, se o usuário está logado Se for esse o caso, vamos mostrar este. Caso contrário, mostraremos a inscrição aqui. Vamos fazer exatamente a mesma coisa com o login. Aqui, vamos verificar se o usuário ou a solicitação estão autenticados Mostraremos o sinal, se não for o caso, e o sinal de saída, se for esse o caso. Como você faz isso? Como antes, vou apenas tentar se a solicitação está autenticada O que eu vou fazer é abrir aqui e fechar aqui. Vou copiar isso ou talvez eu possa digitar aqui L, por exemplo, abrir novamente. E depois feche-o aqui mesmo. Então eu acho que isso faria sentido. Então, o que estamos dizendo aqui, se a solicitação for autenticada, precisamos mostrar algo e, se não, mostraremos o login Então, vou copiar tudo isso, colar novamente aqui e alterar o login para sair. Então, como podemos ver, agora, se voltarmos, classe é atualizada, agora conectada, para que a solicitação seja autenticada É verdade. Vamos mostrar este seguido pelo padrão de desconexão. Agora, se você pressionar para sair, faremos algo que nos levará de volta à página inicial junto com a solicitação autenticada para ser igual a falsa Como você faz isso? Vamos voltar e fazer isso no laboratório, como antes. O que vamos fazer é obter o sinal que acabamos de criar aqui, como podemos ver. Temos o sinal de saída. O que vamos fazer é deixá-lo ir até o logout Here. Então, como você faz isso, simplesmente escrevemos sine out. Claro, o que vamos fazer com este é entrar. Estamos recebendo a placa aqui. Vamos voltar ao apto JS e corrigi-lo aqui. Vamos pegar a placa. Isso é seno de saída e, em seguida, criaremos a função normalmente, para cima e renderizaremos o seno em caso de falha e solicitação de solicitação Ou talvez eu me desculpe, aqui não precisamos renderizar a falha de login. Vamos acessar a página inicial em vez de falhar no login porque só queríamos sair e, claro, como você sai? Simplesmente digitamos a solicitação de saída. E então, simplesmente seremos redirecionados para a página inicial, redirecionando para a página acima, e ela nos levará de volta à Então, agora com isso dito, podemos continuar com nossa função, que é a função do cartão de remessa. E nesse caso, se você se lembra, acabamos de criar essa função e também dissemos que, se o usuário solicitado esse endereço de endereço é igual a nulo Nesse caso, isso significa que o usuário ainda não adicionou seu endereço , então precisamos adicioná-lo. Então, o que vamos fazer é renderizar para o cartão de remessa aqui e junto com a solicitação e, claro, o endereço que solicita esse endereço ao usuário. Então, basicamente, é isso. É assim que podemos fazer isso. Agora, o que vamos fazer é ir até o cartão de remessa e corrigir o endereço, é claro, e depois vamos passar para o cartão. Agora, se o usuário já tiver adicionado o endereço, simplesmente acessaremos ou renderizaremos a página do cartão. E nesse caso, o que estamos simplesmente dizendo é que, se o usuário tiver seu endereço configurado e tudo estiver funcionando corretamente. Não precisamos acessar esta página, que é a página do carrinho de remessa. Essa é essa, se você quiser ver aqui. Se for o usuário, vamos supor que queremos ir até Johnson e pressionamos Baby Johnson. Nesse caso, se eu pressionar adicionar ao cartão, vou até aqui porque adicionei esse endereço. Mesmo que tenhamos um vazio, lembre-se de que passamos pelo processo, então isso significa que eu adicionei o endereço aqui. Se eu quiser editá-lo, posso voltar e editá-lo aqui. Tudo bem. Então, o que vamos fazer agora é receber esse frete. Então, como fazemos isso? Vamos obter At the shipping e, ao lado da função, drag seguido pela renderização. Em seguida, acessaremos o cartão de remessa e, é claro, acompanharemos a solicitação junto com o endereço em que solicitamos esse endereço ao usuário , e tudo bem. Então é assim que podemos fazer isso. Agora, o que vamos fazer é ir até o pagamento e, nesse caso, como dissemos anteriormente, então, se estamos enviando aqui e tudo bem, clicamos em Avançar, queremos ir para a forma de pagamento e, nesse caso, vamos criar a função para esse pagamento. Então, para fazer isso, vou simplesmente escrever o pagamento e, claro, vou arrastar como de costume, e vou renderizar agora o cartão de pagamento GS precisa de HS e apenas digitar o cartão de pagamento e pronto. Como temos apenas um método de pagamento, não precisamos realmente levá-lo conosco. Sabemos que isso é dinheiro na entrega, então levamos a solicitação conosco. OK. Agora, depois de receber o pagamento, também podemos trabalhar com o método postal desse pagamento. Então, como você faz isso? Todas essas funções serão implementadas daqui a pouco. Mas, por enquanto, vamos apenas escrevê-las e, claro, vamos discuti-las em detalhes depois. Portanto, o método postal para pagamento será Function, red and open these Vamos pegar as informações que obtivemos função de envio ou do método de envio. Então, vou armazená-los constantemente. Portanto, solicite o número do ponto corporal. OK. Constante: adicione mesmo corpo da solicitação, ponto, endereço, solicitação constante da cidade para por cidade. E o ID é igual à solicitação ao ID do ponto do usuário. E nesse caso, o que vamos fazer é pesquisar o usuário por ID e atualizar as informações a seguir. Nesse caso, como você procura por isso. Então, vou digitar usuário para encontrar por ID e atualizar. Vou descobrir por meio dessa identificação que sentamos agora. E o que vamos atualizar é o seguinte. Então, como atualizamos ou configuramos realmente algo que não está disponível para nós no momento. Podemos simplesmente escrever set , abrir e alterar o endereço desse endereço, torná-lo igual ao endereço que obtivemos, alterar o endereço para ser igual ao número de telefone e a cidade do endereço para ser igual à cidade. Então é isso, principalmente agora, vamos apenas retornar a função. Então, se tivermos uma rede, vamos ter, então, se tivermos um erro, vamos simplesmente desconectá-la. Caso contrário, vamos apenas registrar que nenhum erro é Não. Erro seguido pelo endereço do usuário que acabamos indicando que tudo funcionou bem, e esse é o endereço que obtivemos e salvamos em nosso usuário. Então, se você quiser ter certeza que essa é a maneira correta, podemos ir até o usuário. E, como podemos ver dentro desse usuário, temos o nome de usuário e os pedidos. Claro que, por enquanto, não temos o endereço. No entanto, nós o temos em nosso esquema aqui. Então, como dissemos, esse é o esquema do usuário. Temos algo chamado endereço e, dentro desse endereço, temos a cidade e o número de telefone ADD R S. E foi isso que fizemos. Acabamos de criar esse endereço e adicionar tudo isso a esse endereço específico. OK. Então, basicamente, é isso. Agora vamos voltar até o fim. Agora, o que vamos fazer é acessar as páginas página por página, começando com o cartão de remessa, e vamos dar uma olhada. Vamos supor que agora estamos neste cartão de remessa. O que vamos fazer é rolar até o fim. Como podemos ver aqui, precisamos ajustar esse formulário e isso nos levará ao pagamento, que é o método post. O que estamos fazendo aqui? Primeiro de tudo, vamos adicionar essa função aqui. Armazenamos todos os endereços. Portanto, temos o endereço do usuário, a cidade e o número de telefone. E sempre que pressionarmos em Avançar, seremos direcionados para o pagamento ou para a página da web de pagamento Nesse caso, antes de ser renderizado para este, vou para essa ação, que é o pagamento com o método post, e basicamente isso é tudo Vou pegar todas as informações que acabei de receber. Encontre o usuário pelo ID e armazene todas as informações. E então, é claro, vou renderizar para o cartão de pagamento. OK. E é isso basicamente. Agora, estamos bem. No próximo vídeo, continuaremos com a função de envio e armazenamento. Então, até lá. OK. 15. : OK. Olá e bem-vindo de volta. Neste vídeo, continuaremos nossa discussão e nossa implementação dessa função específica. Ou seja, se eu pressionar Johnson e escolher um dos produtos e adicioná-lo ao meu cartão. Como podemos ver, chegamos a esta página em que exibiremos todos os pedidos e, claro, o padrão de fazer pedidos aqui. Obviamente, também queremos adicionar o endereço e o pagamento. Então, para fazer isso, deixe-me voltar e começar criando o método post da função de cartão. Como dissemos, a primeira coisa que nos renderizaremos é o cartão de remessa E, nesse caso, se já adicionamos o frete ou a alocação do pedido, então não queremos realmente ir para este Podemos ir diretamente para o cartão de fazer pedido ou para o arquivo de fazer pedido e, nesse caso, isso aparecerá aqui na nossa frente Como já adicionamos o endereço, agora ele está vazio, mas já o adicionamos no vídeo anterior, seremos renderizados automaticamente nessa página Por exemplo, se eu sair, vamos me inscrever novamente e dar o nome de “morrer”. E vamos mudar de ideia em example.com, passe a. E se eu clicar em Inscrever-se, serei renderizado para esta E se eu clicar em Inscrever-se, serei renderizado para Agora, se eu escolher um dos produtos, como você pode ver, aqui, se eu escolher Baby Johnson e adicionar ao meu cartão, serei processado na remessa em vez do pedido pois ainda não adicionei meu endereço completo Então, como fazemos isso? A primeira coisa que vamos notar é que sempre que houver um cartão de remessa sempre que estivermos na página do produto. Vamos supor que eu esteja aqui na página do produto e pressione o botão Adicionar ao cartão aqui. Nós vamos ser renderizados a este. Esse é o formulário. Seremos renderizados de acordo com o método de envio Deixe-me deletar esses. OK. Portanto, não precisamos deles. Todos eles. Agora, se eu for até o abdômen, e como podemos ver, procuro o frete. Essa é a função de envio que acabamos de criar no vídeo anterior e a temos aqui. Estamos dizendo que, se o tamanho do pedido for zero, ou se o pedido ou a finalização da compra forem falsos nesse caso, faremos outra coisa Caso contrário, adicionaremos esse pedido ao item específico ou à caixa de pedidos específica. Obviamente, caso contrário, encontraremos o usuário pelo ID e atualizaremos o pedido nesse caso. Isso é o que estamos fazendo aqui e, é claro, vamos renderizar para a próxima página. Estamos dizendo que se o endereço for nulo o usuário ainda não tiver inserido nenhum endereço, vamos renderizar no cartão de remessa Caso contrário, vamos renderizar para o cartão aqui mesmo. Agora, vamos supor que estamos no cartão de remessa. Se eu voltar para o cartão de remessa, e vamos ver, temos o botão para enviar e nosso formulário é para ação de pagamento, na verdade. Agora, se eu voltar e digitar o pagamento, já criamos os dois métodos. O primeiro. É o método de postagem que consiste em encontrar o ID do usuário e, claro, atualizar todas essas informações e depois renderizar no cartão de pagamento. Agora, se formos até o cartão de pagamento, como podemos ver aqui, podemos ver a forma de pagamento que, por enquanto, só é paga na entrega. No entanto, temos o botão do tipo enviar e nosso formulário ainda está vazio. Portanto, agora podemos atualizar esse formulário e, claro, trabalhar nesse método posteriormente. Então, por exemplo, aqui, vou criar uma função que é card e o método sempre será post. Agora, se eu voltar, vamos criar nosso método aqui. Então, postagem do aplicativo. Vamos postar o cartão e funcionar normalmente, , é claro, vamos encontrar por identificação e vamos enviar essa identificação. Então, vamos encontrar por esse ID e, claro, vamos aumentar a função Então, se tivermos um erro, vamos desconectá-lo. Caso contrário, receberemos os pedidos do usuário. Vou dar o nome de ordens. Então, o usuário faz pedidos, e eu vou pegar o primeiro pedido, que é o que eu adicionei recentemente, e depois vamos fazer alguma coisa. O que estou basicamente fazendo aqui é que temos nossa lista, vamos supor que ela esteja ativa e, na verdade o MG DB a veja no banco de dados. Então, o que estamos basicamente fazendo é que temos o usuário que pediu algo, e os pedidos estão, na verdade, em uma lista de pedidos. Então, vamos supor que eu tenha feito o pedido hoje. Eu tenho um pedido hoje e, se eu fizer o pedido amanhã, tenho um pedido completamente diferente do de hoje. No entanto, ambos estão em uma lista de pedidos. Agora, se pudermos ver aqui, vamos abrir o mais recente, e este é o banco de dados m to edge. Vamos abri-lo, pois podemos ver que temos os usuários. Por enquanto, por exemplo, temos três usuários e temos pedidos aqui. Como podemos ver se eu pressionar isso, não tenho nenhum pedido no momento para esse primeiro usuário. Agora, se eu rolar para baixo, podemos ver este, acho que temos alguns pedidos, tudo bem. Portanto, temos o número de ordem zero, temos o pedido número um e temos o pedido número dois. Como dissemos, a primeira coisa que vamos receber é o recebido, o que é falso. Ainda não o atualizamos. O checkout é falso. Esse é o ID do pedido e temos os itens dentro desse pedido. Como podemos ver dentro deste item, temos uma matriz de objetos. Portanto, o primeiro objeto é, na verdade, o ID do objeto , a imagem, o título , o preço e a quantidade. OK. Então é assim que podemos obtê-los. Então, basicamente, o que estou fazendo é que sempre que o usuário estiver pressionando o botão de fazer pedido, ele será redirecionado para o cartão E nesse caso, o que vamos fazer é exibir o último pedido que ele está recebendo. Então, por exemplo, se ele tiver três pedidos, como 012, exibiremos o último, é isso Então, esse é o último que o usuário pediu. E nesse caso, vamos fazer isso simplesmente dizendo que a ordem é a ordem em zero. Agora, o que vamos fazer é verificar novamente se o endereço não é nulo, apenas para garantir que, nesse caso, não seja nulo E se for esse o caso, retornaremos ao envio e a solicitação será como de costume, junto com o endereço. Então, basicamente, é isso. Agora, esse não é o caso. O que vamos fazer é renderizar para o arquivo de pedido de local. Então, como fazemos isso, simplesmente renderizamos a ordem de colocação e precisamos levar conosco os parâmetros de que precisamos. Portanto, nesse caso, precisamos da solicitação, precisamos dos itens, seja, podemos sempre pegar esse item ou acessá-lo simplesmente fazendo este pedido. Então, neste pedido, temos o primeiro item ou é o primeiro elemento dentro da lista de pedidos. E, nesse caso, poderíamos ter dito esse pedido ou talvez possamos dizer usuários, os pedidos com zero itens. Então, pegamos tudo e os colocamos do lado de fora e podemos acessar esses itens simplesmente adicionando usuários ou itens, e então temos o pedido real. Então eu entendo assim e os pedidos, como de costume. Então, basicamente, agora aqui, temos uma função, então estamos bem. Agora, vamos passar para o pedido de colocação. Como podemos ver, primeiro temos essa barra de progresso, depois, se rolarmos para baixo, temos a cidade e precisamos mudar tudo isso e torná-lo dinâmico. Por exemplo, sempre que o usuário pressionar o botão Fazer pedido, exibiremos seu endereço, a cidade, o número de telefone e, claro, alteraremos esses pedidos aqui Portanto, se você tiver itens, vamos alterá-los de acordo com os itens que o usuário pediu anteriormente. OK. Então, basicamente, é isso. Isso é o que vamos fazer. E com isso dito, este é o fim deste vídeo. O que fizemos por enquanto foi pegar todas essas informações e adicioná-las, então vamos supor. Vamos ver se eu adiciono algumas coisas aqui. E vamos para o próximo pagamento na entrega. Então, o que estamos basicamente fazendo aqui é exibir todas as informações aqui. Então, discutiremos isso ainda mais no próximo vídeo, esse é o seu projeto. E espero que você tenha uma ideia clara sobre sua tarefa e o que você deve fazer neste projeto Então, espero que você tenha gostado dessa aula. Espero que tenha sido benéfico. Com isso dito, este é o fim deste vídeo. Nos vemos na próxima. 16. Projeto: Olá, e bem-vindo de volta. Neste vídeo, vamos discutir o projeto. Portanto, lembre-se de que, no vídeo anterior , adicionamos tudo isso ou bloqueamos a função do cartão que é responsável por nos renderizar ao local, se tudo funcionar bem Nesse caso, o que levaremos conosco é a solicitação, os itens que o usuário pediu ou o pedido real e os pedidos. Agora, sua tarefa é fazer com que esta página fique assim. Como dissemos, obtivemos todas as informações e, por enquanto, elas não exibirão os pedidos aqui. Ele exibirá variáveis fictícias que acabamos de criar. O que você vai fazer é pegar esses pedidos e adicioná-los a esse pedido aqui. Voltando ao código, se formos para a ordem de colocação aqui, podemos ver que colocamos algumas variáveis fictícias aqui, e precisamos transformá-las em variáveis reais Sua tarefa é basicamente criar um loop dobrável, examinar todos os itens que o usuário pediu e, claro, exibi-los aqui e, em seguida, talvez calcular o total desses itens, exibir aqui o item com talvez seu preço e, em seguida, exibir o total aqui Obviamente, como dissemos, vamos supor que a entrega gratuita do pedido seja inferior a $50 Então, você deseja calcular o total desse pedido. Se for menor que 50, você escreverá a entrega gratuitamente. Obviamente, se for menor que 50, você escreverá talvez $10 pela entrega e, se for maior que 50, escreverá gratuitamente Por enquanto, é isso e, claro, só temos mais uma tarefa que é a forma de pagamento. Talvez, é claro, eu sempre possa voltar a partir desse botão adicionado e, claro, se eu pressionar aqui em seguida, serei processado com esse pagamento. Então, o que vamos fazer aqui também é acessar esta página e fazer com que o próximo botão não seja exibido, como neste exemplo aqui. Agora, se eu pressionar esse botão de pagamento na entrega, agora posso acessar próximo botão para ir para a página de fazer o pedido. A primeira tarefa é simplesmente exibir todas as informações que obtivemos da função do aplicativo ou da função de postagem que criamos anteriormente e exibi-las nesta página, como o resumo do pedido, os pedidos e, claro, a segunda tarefa é adicionar a função de pagamento que exibirá o próximo botão assim pressionarmos o pagamento na entrega. Agora, a última tarefa do seu projeto é criar essa edição ou executar a função adicionada. Nesse caso, sempre que pressionarmos essa função adicional ou esse botão adicionado, seremos redirecionados para a página de envio Essa é uma tarefa simples que você pode fazer com algumas linhas de código e pronto para todo o projeto. Criamos todos os componentes que são úteis e essenciais para nós. Com isso dito, este é o fim deste vídeo. Não se esqueça de colocar este projeto na seção de projetos, para que eu possa dar uma olhada e dar meu feedback. Com isso dito, este é esse vídeo. Espero que você tenha gostado dessa aula e mal posso esperar para ver você em mais aulas.