MEAN Stack: aprenda fazendo um aplicativo de comércio eletrônico com Angular 12, PrimeNG e NodeJS [2024]

1. O que vamos fazer: Você vai construir um ótimo aplicativo que é uma plataforma de comércio eletrônico. E com esta plataforma de e-commerce, você poderá fazer algumas animações. Você terá banner, você pode controlá-los. Você terá uma categoria para seus produtos e você terá um banners de produtos em destaque e, bem como, quando você vai para uma categoria específica como esta, você verá apenas os produtos que estão sob essa categoria. E também, você será capaz de ver o produto em destaque aqui, que você pode controlar no painel de administração como eu vou mostrar-lhe e, bem como, quando você vai para o detalhe do produto, você verá todos os detalhes sobre o produto que você vê um nome ou título e a classificação do produto, essa quantidade. E você pode adicioná-lo ao seu carrinho e você verá a descrição completa, que pode ser diretamente no painel de administração. E também você terá uma galeria do produto. Então você será capaz de construir esta galeria por sua mão. Não vamos fazer esta galeria usando uma biblioteca. Não, vamos fazer isso à mão. Você aprenderá a usar a realidade dos componentes em Angular. E também, vamos ver como ir ao seu carrinho e adicionar itens ao seu carrinho. E você verá também as notificações e as notificações do Toast. E você será capaz de ir para o carrinho. Você pode gerenciar seu carrinho, você pode excluir itens do cartão. Você também pode alterar a quantidade e tudo será calculado imediatamente após a atualização da quantidade. Tudo é observado. Então vamos usar nossos x js para observar nosso carrinho e ele é atualizado imediatamente toda vez que o usuário está atualizando ou adicionando um produto ao carrinho. Além disso, teremos uma página de checkout onde o usuário pode inserir seus dados e fazer um pedido. E ele também pode fazer obter o pedido e obter uma página de agradecimento. E também, trabalharemos com o painel de administração. Painel de administração irá conter todo o painel que você precisa. Quantos pedidos, quantos produtos todos vêm do banco de dados, de dados rayon, nada é codificado. Além disso, você aprenderá a fazer o painel de produtos para gerenciar o produto, excluí-los, editá-los ou até mesmo adicionar novos produtos. Ao adicionar novos produtos, você também será capaz de usar um grande componente, como esses graus botão de chave drop-down. Você também vai usar um grande editor. Assim, refletirá para você todas as informações no front-end. Então você não terá dor de cabeça para estilizar o componente ou a descrição do produto, mas você verá como você pode deixar o estilo do usuário com um editor amigável como você vê aqui. Além disso, você aprenderá a fazer upload de imagens para o seu servidor. E então você poderá usar todas essas imagens e seguida, criar uma galeria para o seu aplicativo e para o seu produto também. Algo diferente com categorias, vamos usar os ícones. Vamos usar também alguma filtragem na tabela ou classificação. E também, você usará também um seletor de cores, como você vê aqui. Nós também podemos usar este grande componente para pegar cores e atualizar também as categorias. Todo o trabalho é com dados reais, nada é falso, nada é codificado. Nós vamos aprender realmente como uma prática. E sobre isso, você vai aprender uma grande estrutura com Angular. Como você pode estruturar seus arquivos, como você pode construir um estilos compartilhados, e como você pode construir um módulos e componentes reutilizáveis, que podem ser construídos como qualquer grande empresa. Além disso, há ordens. Você será capaz de gerenciar os pedidos e, em seguida, você pode alterar o estado dos pedidos e isso será refletido no painel de administração também. E você verá também o detalhe do pedido. Vamos pegar estrutura de dados complicada do banco de dados usando nossa API com NodeJS e também o cliente M4 e conectar informações do cliente com o pedido. E também, faremos uma gestão para o usuário. Seremos capazes de ver toda a gestão dos nossos usuários. E seremos capazes de atribuir o papel dos usuários se ele é administrador ou não. Então, ele será capaz de olhar para a nossa página ou para a página de administração ou não. E também vamos fornecer com como um grande olhar em, vamos usar o login, a autenticação, os Tokens da Web para autenticar o usuário e especificar se o usuário é admin ou não. Tudo isso. Você aprenderá através de Angular, através de um repo X Mono. E você vai aprender também como construir um grande aplicativo como este aplicativo, você vai aprender um monte de coisas. Você aprenderá a estilizar. Você aprenderá a estruturar o projeto. Você verá como as grandes empresas estão codificando, como eles estão criando módulos compartilhados. E eles serão capazes de desenvolver mais e mais aplicativos mais rápidos . No final deste curso, você vai aprender um monte de coisas, NodeJS, MongoDB, e também angular, e, em seguida, um X Mono repo e RX e também os observáveis RX JS. Você vai entendê-los na prática. Então, você está pronto? Vamos começar a fazer isso. 2. O que é a pilha MEAN: Ok, nesta palestra vamos saber o que é uma pilha de maldade. Mas primeiro, deixe-me apresentar a vocês o que é uma pilha de tecnologia em geral? Uma pilha de tecnologia é uma lista de todas as tecnologias e serviços que voltaram e que são usados para criar e executar um único aplicativo. Por exemplo, o lado social, Facebook, é composto de uma combinação de frameworks de codificação e linguagens, incluindo JavaScript, HTML, PHP e React js. E esta é a pilha de tecnologia do Facebook. Por exemplo, eu listei aqui uma estatística média, que é MongoDB Express Angular Node.js, como vamos explicar mais tarde, lâmpada está usando as tecnologias sistema operacional Linux, servidor Apache, banco de dados MySQL, e como Will PHP linguagem de programação também. Casado é MongoDB, Express, reagir ou Reagir nativo e NodeJS. Então, o que significa stat significa pilha está usando para tecnologias. Então, para banco de dados onde eu estou indo para armazenar meus dados, eu estou usando MongoDB. Mongodb é um banco de dados muito esparso, que está me fornecendo muitas funções que eu posso recuperar e filtrar meus dados facilmente. O Express é usado para criar APIs da Web onde estou obtendo e criando ou excluindo dados do meu banco de dados. E NodeJS é a famosa estrutura para criação de aplicativos back-end e a execução de servidores web. E finalmente, Angular. Angular é um objetivo principal do nosso curso. Vamos aprender muito sobre Angular. Angular é uma estrutura de front-end fornecida pelo Google para construir principalmente aplicações web e também aplicações multi-plataforma para construir o seu aplicativo na web ou em dispositivos móveis. Fornecer uma ótima estrutura para arquitetar seu aplicativo e facilitar a combinação completa usando ferramentas excelentes e também proporcionando um desempenho muito rápido e construções de produção seguras. Aprendendo. Todas essas tecnologias por si só não cumprirão sua experiência para aprender como essas tecnologias podem trabalhar juntas. Porque se você não fizer nenhum trabalho prático ou um projeto do mundo real, você não vai aprendê-los em real. Você vai apenas ver cursos que eles estão apenas lendo documentação de cada tecnologia. Mas aqui neste curso, tivemos a idéia de trazer um site de comércio eletrônico funcional completo. E com este site, você usará o MongoDB e conectado com o Express. E express será conectado com Angular e todos eles interagindo usando Node.JS. Toda tecnologia tem responsabilidade. E vamos ver em detalhes como implementar essa responsabilidade em um aplicativo funcional do mundo real. Caso contrário, tenho certeza que você não vai aprender. Você precisa de um curso de aplicação do mundo real para aprender isso. 3. Quem pode fazer este curso: Ok, nesta palestra, eu quero explicar quem pode fazer este curso. Quais são os requisitos do curso? Então, para mim, eu diria que se eu já tenho um pequeno básico Angular chamadas sobre como um conhecimento básico de Angular, então este curso é adequado para mim. Como se precisasse de um Angular muito, muito básico. Como você precisa saber o que é componente, o que é serviço, o que é módulo? Até eu explico rapidamente. Mas quando você faz algo prático, você vai entendê-los. Eu fiz de certa forma, como no início. Eu os explico em detalhes. E então, com o tempo, porque vamos criar vários componentes, vários serviços e vários módulos, você vai se acostumar com eles. Você precisa saber também um conhecimento básico com TypeScript. Então, neste caso, conhecimento básico com TypeScript e JavaScript é realmente suficiente para se inscrever e ir para este curso. - Também. Precisamos de um estilo e modelagem. Conhecimentos em HTML e CSS também são necessários. Então você vai entender o código CSS que eu estou digitando, mesmo eu estou explicando ponto-a-ponto e eu estou mostrando como se eu estou colocando padding top, o que vai acontecer? Como se eu mudar a cor da fonte, como eu faço uma caixa de sombra, como eu faço borda para o botão, etc. Então todas essas três informações que você precisa saber antes de se inscrever no curso. Caso contrário, preferiria que seguissem este curso muito lentamente, porque mesmo isso, expliquei todos os pontos aqui mencionados. Mas eu prefiro estudantes que têm um conhecimento muito básico sobre angular. E também gostaria de mencionar que este curso é feito de forma iniciante. Eu não complicei muito. Por exemplo, eu não estou usando estrutura de óculos muito complicado e também gosto de como eu posso fazer as relações entre as classes um monte de extensão e herança. Não, eu não fiz isso. Eu fiz isso com um conhecimento básico. Então, quem é recém-terminado curso Angular, teoricamente ou prático? Ele também pode ver como as coisas podem ser implementadas e isso irá expandir o seu conhecimento sobre Angular para construir mais e mais aplicações e você sabe como estruturá-las também. Esta palestra é aplicada na parte back-end sobre NodeJS. E NodeJs, vamos começar do zero e vocês verão o que eu quero dizer com cada palavra que estou fazendo lá. Então é isso. Se você tem algum conhecimento, também, este curso é bom para você. Mas eu, como eu disse, você precisa segui-lo bem devagar. Você precisa repetir vários funcionários. Você precisa repetir uma e outra vez alguns vídeos. Então você vai obter a informação e você vai entender que vem Ailey mais fácil para você depois disso. 4. Como instalar Nodejs: Para iniciar o desenvolvimento, sempre precisamos do gerenciamento de pacotes. O gerenciamento de pacotes vem com aplicativo NodeJS. Então, para instalá-lo apenas joga no Google NodeJS e vá para Download. E você verá o download para todos os sistemas operacionais. Por exemplo, eu tenho aqui para Windows e também eu tenho para Mac OS. Existem dois tipos como LTS, que é recomendado para a maioria dos usuários, e o atual, que é os recursos mais recentes. Melhor obter sempre uma versão estável, que é recomendado para a maioria dos usuários. Aqui, você pode escolher sua instalação com base no seu sistema operacional. E será simplesmente um aplicativo, como qualquer aplicativo que você possa instalar. Então, depois disso, você pode baixar este aplicativo e executá-lo. E será como qualquer instalação normal de aplicativo. Então, para ter certeza, depois disso, você termina todas essas etapas. Você precisa executar alguns comentários MPM. Então, para executar comandos mpm, podemos usar Visual Studio Code. Depois de abrir o código do Visual Studio, você verá aqui os projetos mais recentes que você tem. Mas, por exemplo, precisamos abrir o terminal do código do Visual Studio. Então eu vou aqui dizer Controle e J. e então eu vou ter o terminal aberto. E no terminal, podemos, por exemplo, colocar um comentário NodeJS. Então podemos dizer, por exemplo, versão NPM. E nós obteríamos o detalhe completo virgem sobre o Node.js instalado. Depois disso, poderemos usar o gerenciamento de pacotes NodeJS, onde existem muitas bibliotecas que podemos usar em nossos aplicativos e desenvolvimentos. 5. Configure o MongoDB: Para o nosso e-shop, precisamos de um banco de dados. E o banco de dados, não precisamos instalar nenhum software. Usaremos MongoDB, Atlas. Mongodb oferece agora um armazenamento de banco de dados on-line, que significa que o banco de dados já está na Nuvem. O que precisamos fazer apenas para ir para o URL que eu anexei com esta palestra e criar uma conta aqui e se inscrever e, em seguida, olhar para a sua conta. Após o registro, você verá esta tela que você precisa para criar um projeto. Então, antes de tudo, você precisa criar um projeto para a nossa loja virtual. Então você vai aqui e diz, eu quero um projeto que é, por exemplo, cada hub. E eu clico em Avançar. E, em seguida, criar o projeto. Depois disso, o projeto requer um cluster. Então precisamos construir um cluster onde oferecemos nosso banco de dados. Então aqui, há clusters compartilhados, que é de graça. Você pode usá-lo e escolher o servidor mais próximo do seu país. Por exemplo, vou usar este, o padrão. E depois de criar o cluster, estamos prontos para criar nosso banco de dados. O banco de dados no MongoDB chamado coleção. Então você precisa ir para as coleções e criar uma nova com base em sua necessidade. Já temos um que criamos para o curso no projeto 0. Aqui há coleções em que eu criei vários bancos de dados. Então sua parte é apenas criar uma conta e criar cluster e criar sua própria coleção, que usaremos no curso. Veremos mais tarde como fazer a conexão entre nosso código back-end e o MongoDB na Nuvem. 6. Como instalar o PostMan para testar as APIs: Quando estamos criando APIs, precisamos testá-las. Você pode testar suas APIs com um aplicativo de front-end como React ou Angular ou Vue js. Mas nós estamos indo neste curso para começar com o backend primeiro. Então, a melhor maneira de fazer isso e testar as APIs é instalar uma ferramenta chamada Postman. Vamos ao Google. Você vai para o download Carteiro. E aqui você encontrará com base no seu sistema operacional. Então, aqui você escolherá baixar o aplicativo. E depois que ele é baixado, ele será uma configuração normal como qualquer aplicativo. Depois de abrir o arquivo baixado, você receberá uma notificação se estiver usando o Mac OS. E ele vai pedir que você mova este aplicativo para a pasta do aplicativo. E depois disso, você verá que este aplicativo está localizado na pasta do aplicativo. A mesma coisa para o Windows. É normal instalar como qualquer aplicativo pequeno. Depois de abrir o aplicativo, você poderá testar APIs. Vamos testar um. Quando você vai para o Google e digite espaço reservado JSON, você verá o primeiro link é algumas APIs falsas. Assim, você pode testar um solicitações GET ou postar solicitações. Então vamos tentar este. Diz aqui. Como um pedido GET, eu vou para o Postman e, em seguida, eu abrir uma nova guia com o pedido GET e colocar o link que eu copiei do espaço reservado JSON e pressione Enviar, eu vou obter uma resposta. Esta resposta vem como um JSON. E da mesma forma, vamos construir nossas APIs. 7. a começar com o backend: Bem-vindo à terceira seção deste curso. Vamos ter uma introdução sobre começar com o back-end. O que é um back-end? Na engenharia de software, os termos front-end e back-end referiam-se a uma separação de preocupações entre a camada de apresentação e a camada de acesso a dados. Portanto, qualquer aplicativo web e aplicativo móvel é considerado como um front-end. back-end é a parte onde eu estou segurando dados. Novamente, um banco de dados ou um servidor de arquivos. E o próprio servidor pode ser considerado como um back-end. Então vamos fazer isso assim. O front-end está mostrando os dados e o backend está mantendo esses dados em algum lugar seguro chamado servidor. Precisamos de alguma forma lidar com esses dados que são armazenados no servidor e servi-los para o cliente. E usando algumas linguagens de programação como Java, SQL, e também nenhum GS, que vamos fazer neste curso, para enviar esses dados para o cliente de uma maneira bonita, para renderizá-los em HTML, CSS e Bibliotecas JavaScript. Então, na próxima palestra, vamos ver como o front-end pode se comunicar com o backend para pegar esses dados, que é chamado de APIs RESTful. 8. Visão geral à API RESTful: Vamos dar uma olhada na nossa API RESTful para ver como trocar dados entre o cliente e o servidor. Qual é a arquitetura da API RESTful? Temos o cliente e temos um servidor, e eles estão trocando dados através do protocolo HTTP. Este é o conceito básico da API RESTful. Há também operações de inclusão para criar dados, ler dados, atualizar dados e excluí-los. Suas operações podem ser feitas através do protocolo HTTP. Existem métodos específicos de protocolo HTTP que fazendo essas operações, que estamos chamando operações em primeiro lugar, qual é a diferença entre RESTful API e a rota front-end? A API RESTful está trazendo dados. A seca front-end está mostrando os dados ou renderizando uma página específica. Quando você abre o seu navegador e colocar link RESTful API, se você tiver acesso para obter esses dados, então você terá uma string que consiste em JSON ou arquivo XML. O protocolo Http é capaz de renderizar uma página com HTML CSS e trazer seus dados. Então métodos HTTP em geral, eles são GET, post, PUT, e delete, que são as operações brutas. Mas em métodos HTTP, eles são chamados assim. Então eu estou enviando uma solicitação para o banco de dados ou para o back-end em geral para obter através de descanso API alguns dados. Por exemplo, obter uma lista de produtos através da API, ele vai me dar matriz de lista de produtos. Obtendo um único produto, ignorando o ID deste produto, ele vai me dar arquivo JSON com todos os detalhes do produto. Quando eu quero atualizar um produto, eu envio uma solicitação PUT com a ideia do produto e também anexando os novos dados. E a resposta será o mesmo produto, mas com dados diferentes. E excluir um produto é apenas passar o ID do produto com solicitação de exclusão. Criando um produto, precisa postar um novo produto. Então eu estou usando a rota principal da API dos produtos e então eu estou passando quaisquer novos dados, os dados que, por exemplo, nome do seu produto e a imagem, e que é lagoas, serão um novo ID com o novo nome do produto e, claro, a imagem. Essas são as nossas solicitações de API para obter os dados ou postar, excluir ou atualizar dados no servidor. E eu estou usando api barra v1, que significa a versão um. Então, quando você quiser atualizar sua API no futuro, você adiciona uma nova versão. Portanto, os usuários ainda podem usar as versões mais antigas da sua API. A mesma coisa para os pedidos e os usuários. Então, neste caso, você tem todas a mesma sequência, mas você só precisa planejar seus dados, certo? Criar um servidor web com NodeJS é muito simples. Vamos ver isso na próxima palestra. 9. Como criar o servidor de backend com Express com Express: Vamos começar a criar nosso servidor back-end, ou digamos nosso servidor web, onde vamos chamar nossas APIs para o cliente. Depois de ter aberto nosso Visual Studio Code para a pasta back-end pasta, como estruturamos antes, executamos um comando npm init no MPM nele, ele vai nos pedir um nome de pacote. Eu coloquei e-shop, uma virgem. Eu pressiono Enter description, digamos que algum back-end para o e-shop, por exemplo. E, em seguida, o ponto de entrada como onde o aplicativo vai começar, eu coloquei app.js e, em seguida, alguns, outro comentário. Continuamos pressionando Enter e então ele vai nos perguntar que está tudo bem. Pressionamos Enter. Então vamos ver um pacote Jason é criado. Então vamos criar agora o nosso arquivo até js, onde vamos começar o nosso ponto de entrada da nossa aplicação. Então eu vou colocar aqui, por exemplo, console.log, Olá Mundo. E, em seguida, ele vai imprimir Olá Mundo quando eu estiver executando este aplicativo. Mas como vamos executar este aplicativo, eu aconselho a usar uma biblioteca chamada NADH Monde, que é um utilitário que irá monitorar quaisquer alterações de nosso código-fonte quando pressionamos Control S ou salvar este aplicativo JS, ele vai reinicie o aplicativo novamente automaticamente. Então, depois de instalar esta biblioteca, vemos que está em independência em um pacote JSON como um script personalizado, podemos adicioná-lo aqui, como se fosse um comentário para iniciar o aplicativo usando Node monitor. Então eu posso dizer iniciar monitor nó ou nó gemer. Aplicativo ponto JS. Neste caso, terei o aplicativo iniciado com o arquivo de ponto de entrada app.js. Vamos tentar agora. Vamos salvar ab.js e, em seguida, escrever npm start. E depois que eu comecei o aplicativo, eu vou ver Hello World. E o aplicativo ainda está em execução. Então ele está detectando qualquer alteração que eu faço no aplicativo. Então eu digo “Helloworld “com a mudança foi ponto de exclamação, e vejo que mudou. Vamos mudar o mundo E-Sharp. Vamos ver Olá e-shop. Isso é ótimo. Então, até agora temos apenas um aplicativo em execução, mas ainda não temos nenhum servidor. Então, para criar um servidor web, vamos instalar o Express, que é uma biblioteca famosa de Node.JS para hospedar um servidor. Então, depois de fazer esta instalação, eu vou vê-lo também em dependências. Mas vamos remover este log console e criar uma constante, chamá-lo express e chamar a biblioteca express usando a palavra-chave require express. Ele irá chamá-lo automaticamente a partir de módulos de nó. E vamos criar uma constante que é chamado aplicativo. E este aplicativo com chamada de uma função chamada Express, que mencionamos ou definimos antes. Este servidor Web requer escuta de uma porta específica. Então eu digo que escutem. E eu especifico, por exemplo, 3 mil como um porto. E há um retorno de chamada. Callback nos dará, todos nós serão executados quando houver uma criação bem-sucedida do servidor. Então, no retorno de chamada, posso imprimir qualquer mensagem no console. Por exemplo, eu vou dizer que o servidor é iniciado agora ou o servidor está sendo executado agora no host local de link com porta 3000. Então, agora vamos executar o aplicativo novamente. Eu vou dizer npm começar. E vamos ter algum erro porque eu já estou executando o servidor. Então vamos começar e eu executo de novo. Vou ver o host local ou o servidor está sendo executado no localhost 3000. Quando eu abrir o navegador e visitar este URL, localhost 3000, vamos ver o que teremos. Eu coloquei aqui e eu vejo que vêm para cima, obter, não pode obter porque eu não especifiquei nenhuma rota inicial para o aplicativo. Nós criamos. Agora a rota inicial ou a raiz, podemos dizer app ponto get. Vamos ver Express está nos fornecendo todas as solicitações HTTP. Por exemplo, PUT, delete e também postar. Então esqueça. Ele aceitará dois parâmetros. A primeira é a rota em si. Por exemplo, direi a rota inicial ou a raiz. Então, neste caso, vou pedir um retorno de chamada. O retorno de chamada terá a resposta que enviarei ao cliente quando ele chamar esta rota. Então eu digo na resposta de retorno, ponto areia, por exemplo, digamos que uma mensagem, podemos chamá-la de olá ou API, não Hello World. Então agora temos esta API. Vamos salvar, e agora podemos executar o aplicativo novamente no navegador. O aplicativo chamará um GetMethod e teremos como resposta, esta API Olá. Então, como recapitulação, vimos como criamos nosso próprio servidor ou servidor web com express. E estávamos assistindo nossas mudanças com o nó Monitor e como chamamos esse aplicativo começar a inicializar uma rota. E executamos o servidor sob uma porta específica que vimos antes. Precisamos ter uma API e uma versão na URL do que fora. Então vamos ver como podemos criar isso com variáveis de ambiente na próxima palestra. 10. Variáveis de ambiente de leitura: Ok, então vamos começar com variáveis de ambiente. As variáveis de ambiente normalmente são usadas como uma variável pública, que são usadas entre o aplicativo. Então, por exemplo, eu quero uma variável pública para URL da API. Então este URL API, que será prefixado para cada rota que eu uso para o meu aplicativo ou para a minha API. Então, como vimos antes que cada API que tínhamos, é prefixado com algo como barra, api barra versão um. E isso significa que cada API no meu aplicativo terá esse URL. E, em seguida, API versão um. E então eu digo, por exemplo, produtos. E então eu posso postar, excluir ou criar alguns dados para esta API. Então agora vamos ver como podemos ler este prefixo. Então eu não quero repetir na minha API é sempre a string. Então eu posso corrigi-lo em alguma constante que é legível de todos os lugares. E então eu posso passá-lo para o microfone, para as minhas rotas de cordas, e então ele seria legível nessa rota. Então, para fazer isso, primeiro, normalmente, não no Node.JS, normalmente temos uma variável de ambiente chamada ponto n ou arquivo de ambiente. E que exemplo eu passo um nome de variável que eu quero, qualquer nome que você pode, por exemplo, API URL. E então eu posso dizer a string que eu quero passar, que é api barra v1. E neste caso, eu vou ter este URL API é definido em todos os lugares no aplicativo. Mas primeiro, como podemos ler esta variável a partir deste arquivo em nosso aplicativo, há uma biblioteca, podemos instalá-lo a partir de pacotes MPM. E chama-se EMF ponto-ponto. Então não podemos dizer npm instalar dot EMF. E esta biblioteca normalmente está disponível sempre. E podemos usá-lo no aplicativo JS na rota na raiz, Sem problema. Então podemos dizer definir ou podemos dizer exigir esta biblioteca. Então, o EMF não corta o conflito. E normalmente isso deve estar em uma string. Então, quando eu digo exigir esta biblioteca, então eu vou ser capaz de usar alguma constante específica para obter esses valores do arquivo M. Então eu irei aqui e definirei uma constante. Vamos chamá-lo, por exemplo, API. E então podemos dizer processo ponto, ponto, em seguida, o nome da variável que eu criei aqui. Então eu posso dizer API na URL da pontuação. Então vamos salvar tudo. E agora vamos tentar imprimir esta variável para ver se ele está realmente lendo este arquivo ou não. Então vamos fazê-lo no início quando iniciamos o servidor. Então eu vou dizer console.log, a API para constante. Então eu vou iniciar meu servidor, mpm start. E aqui está, já definimos. Então, em cada rota que eu tenho, eu posso definir ou passar esta variável API mais a rota que eu quero, por exemplo, produtos. Então, neste caso, eu terei a versão da API prefixada um mais produtos. Veremos isso mais detalhadamente nas próximas palestras para ver como criar a rota e como construí-la e como chamá-la. A coisa mais importante que você precisa saber agora que podemos criar as variáveis públicas neste arquivo e lê-las em qualquer lugar do aplicativo. Então, neste caso, eu quero armazenar, por exemplo, a cadeia de caracteres de banco de dados ou cadeia de conexão. Eu posso armazená-lo aqui neste arquivo e também, por exemplo, algum segredo para autenticação, eu também posso armazená-lo aqui. E quando eu quiser implantar o aplicativo no servidor de produção, vou alterar essas variáveis. Então, teremos também outro arquivo, por exemplo ponto EMF, mas para o servidor de produção, vamos ver que, claro, na palestra onde vamos implantar o aplicativo Node.JS. Então agora vamos passar para a próxima palestra onde vamos criar a API real e como vamos enviar dados JSON através dele porque precisamos de dados JSON para nossa e-shop para trocar com o front-end as informações sobre os produtos e a ordem e et cetera. 11. Crie uma primeira chamada e dados de Json da API para analisar: Agora vamos ver como trocar dados entre front-end e back-end. Vimos anteriormente como trocar dados com o front-end com a solicitação GET. Então nós enviamos Olá API. Mas o que fizemos foi apenas trocar uma string, que é Olá API. Então precisamos trocar dados JSON. Por exemplo, o produto é um objeto, consiste em ID, nome , imagem e preço. Então agora vamos simular a API de produtos. Então, no início, Vamos ter o bom prefixo como antes. Então eu vou usar os ticks traseiros, que são muito úteis para combinar entre constantes e strings sem usar este plus. Então, agora, vamos remover esta parte e criar um backticks. E com um sinal de dólar e suportes curvos. Vou fazer API. E então digamos produtos. Vamos remover esta parte daqui. E também este. E eu vou criar uma constante. Digamos produto. E este produto é objeto, contém ID, digamos um, e nome, digamos cabelo, cômoda. E imagem com, por exemplo, algum URL. Então você tem a opção aqui para selecionar aspas duplas ou cotação simples. Mas com JavaScript, É melhor usar sempre aspas simples nessa resposta. Vamos enviar este produto para o front-end. E vamos executar o aplicativo. Agora temos o aplicativo em execução. Vamos falar com o Carteiro. Carteiro é aplicação como conversamos antes e vimos como instalá-lo. Então eu não posso chamar APIs como com métodos GET, post, PUT, etc Então vamos ter aqui nossa API 3000 e, em seguida, api slash versão um slash produtos. E eu clico em Enviar. Então isso é pons é o objeto que eu já criei. Então, assumimos que estamos construindo este objeto, obtendo os dados do produto no banco de dados ou do banco de dados e, em seguida, enviá-los para o front-end com um GetMethod. Então, e se o usuário ou o administrador da aplicação da questão, vamos enviar, ou, por exemplo, criar um novo produto. Assim, o novo produto precisa de um dado que será enviado a partir do front-end. Então agora vamos mudar este método muscular de chegar a postar. Que exemplo eu vou copiá-lo e dizer post. Os pedidos de post também precisam de dados. Estes dados virão do front-end. Então, como eu obter esses dados do front-end, é muito simples usando o corpo do ponto de solicitação. Então, depois de postar os dados do corpo, eu vou enviá-los de volta para o front-end. Então vamos criar uma constante, digamos novo produto. E este novo produto será pedido corpo ponto. Então vamos fazer assim. Consola. Registre o novo produto. Então vamos ao Carteiro. Carteiro nós mudamos este método de chegar a postar. E o corpo da solicitação será, por exemplo, na linha JSON, que é JSON. E então eu posso passar, por exemplo, esse objeto. E quando eu clicar em Enviar, vemos que retornamos um. E no registro do console fiquei indefinido. Então o problema é que o corpo não é bem analisado. Então precisamos de algo chamado middleware. O middleware é uma função que tem controle de solicitação e a resposta de qualquer API. Então, quando o front-ends e objeto JSON, precisamos do back-end para entender que isso é adjacente. Então, por favor, analise e use-o no back-end. Então, para fazer isso, precisamos apenas usar uma coisa do Express JS. Então precisamos usar esse JSON. Assim, o Express aceitará dados JSON. E a coisa é muito simples. Como eu disse anteriormente, precisamos ter um middleware. E este middleware pode ser feito usando o uso do aplicativo. E então dizemos Express dot JSON. E este método, vamos tornar nossos dados compreensíveis pelo Express, que são enviados do front-end. E podemos digitar aqui como middleware. E no futuro, veremos que colocaremos todos os middleware. Nesta seção. Anteriormente, não era usado algo chamado BodyParser, e este corpo-analisador foi duplicado. Então agora em diante estamos usando Express JSON. Então, se você ver nas próximas palestras que estamos usando BodyParser, basta substituí-lo por expresso ou JSON. Então, desta forma, você garante que seu aplicativo será executado da maneira certa. Então agora somos capazes de fazer um get e também postar dos dados. Eu vou, por exemplo, mudar aqui cabeleireiro para e enviá-lo. E eu vou recuperar o cabeleireiro dois. Então agora nossa API está pronta. Estamos agora começando a construir esta estrutura de API para pedidos de produtos e 40 usuários, como falamos anteriormente na seção anterior. Na próxima palestra, veremos como registrar esses eventos de APIs. Por exemplo, quando alguém postar dados ou bons dados, vamos bloqueá-los no console do nosso aplicativo. 12. Solicitações de API de log: É uma falha muito útil que o desenvolvedor para saber o que está acontecendo em seu servidor. Assim, podemos saber e registrar as solicitações HTTP que estão vindo do front-end, como postagens, get ou put ou delete. Para fazer isso, há uma biblioteca muito boa chamada Morgan, possamos usá-lo para registrar nossos pedidos HTTP que estão vindo do front-end. Então vamos instalar esta biblioteca. Eu paro o servidor, digamos, instalo Morgan. E depois de instalar esta biblioteca, podemos chamá-lo também com exigem. Então custou ao Morgan. Exigir. O Morgan. Nós dissemos que esta biblioteca é uma biblioteca de middleware, então temos que colocá-lo no aplicativo dot usar Morgan. E há algumas opções padrão, que é chamado Tiny. Isso é bom no caso de exibir as solicitações de log em um formato específico. Por exemplo, vamos executar o servidor novamente. Mpm começar. Então temos aqui que um servidor está rodando com o Postman. Vamos fazer alguns pedidos. Por exemplo, vou enviar o post novamente. Certo, de volta ao aplicativo ou ao código. Veremos que temos uma solicitação de postagem na API e com seu número de status específico. Vamos fazer um GET. Também. Aqui está um get, Enviar e voltar para o aplicativo. E eu vejo que eu logado também, eles GET pedidos. Há muitas opções para esta biblioteca, que você possa formatar seus logs como quiser. Mas não vamos fazer isso. Vamos usar apenas minúsculos. E, claro, você pode dizer com este logs em alguns arquivos, tudo isso é, é exibido aqui na documentação desta biblioteca. Agora estávamos usando apenas dados falsos do produto. Vamos começar a vincular esses dados ao banco de dados. Então vamos na próxima palestra para fazer a conexão com o MongoDB usando Atlas. 13. Como instalar Mongoose e se conectar ao banco de dados de MondoDB: Anteriormente vimos como falsificar dados do produto para armazená-los e exibi-los em nosso aplicativo. Agora o que precisamos é armazenar os dados no banco de dados. E neste curso estamos usando MongoDB. E como vimos antes, não precisamos instalar nenhum software especial para MongoDB. Só precisamos entrar na nuvem do MongoDB. E então criamos nosso banco de dados e conectamos nosso aplicativo a esse banco de dados na nuvem. Então, antes de tudo, como podemos conectar nosso aplicativo ao banco de dados na nuvem. Então primeiro precisamos instalar uma biblioteca chamada Mangusto. Mangusto é responsável por toda a operação do banco de dados MongoDB no aplicativo ou um aplicativo Node.js. Então vamos instalar esta biblioteca que se chama Mangusto. Vou digitar aqui npm instalar mangusto. E como todas as bibliotecas precisamos criar uma constante. Vamos chamar-lhe mangusto. E este Mongo, podemos dizer que requer mongóis. Podemos supor que esta coisa aqui é como importação. Então, estamos importando cada biblioteca e armazená-lo em uma constante. Normalmente, adicionamos a conexão ao banco de dados antes de iniciar o servidor. Então aqui vou dizer Mangusto, ponto conectar e desligar. Está pedindo uris. Uvis ou cadeia de conexão. Posso obtê-lo do MongoDB Cloud. Vimos anteriormente como se conectar à nuvem do MongoDB e criar nosso aplicativo e clusters e nosso projeto. E vimos que temos várias coleções, ou podemos dizer bancos de dados. E esses bancos de dados, teremos acesso a eles através do nosso aplicativo. Então vamos ver como podemos nos conectar a esses bancos de dados em clusters. Se eu voltar para clusters, vejo aqui um botão que diz Conectar. Quando eu digo conectar, eu posso usar várias opções do MongoDB. Por exemplo, o que precisamos é conectar seu aplicativo. Então precisamos usar uma cadeia de conexão para obtê-lo a partir daqui e colá-lo em nosso método de conexão com de Mangusto. Então, clicando nesta opção, vamos obter uma string de conexão. Vamos copiá-lo e tê-lo em nosso aplicativo. Então eu trago citações aqui e copio essa string de conexão. Mas não podemos ver que diz que estas cadeias de conexão devem conter um nome de usuário e senha e nome de banco de dados. Mas de onde eu não posso obter esta informação é simplesmente no MongoDB Cloud. Podemos usar um usuários específicos para se conectar a esses bancos de dados. Nós só precisamos ir para o acesso ao banco de dados e criar um novo usuário. E este usuário podemos conectar ao banco de dados na nuvem. Então, vamos clicar aqui, adicionar um novo usuário de banco de dados. E vamos dar-lhe um nome de usuário, E sharp usuário e a senha, você tem liberdade para selecionar qualquer senha. Por exemplo, eu coloquei de um a sete. Ele disse que a senha é fornecida é muito fraca. Então vamos adicionar algumas letras a ele. E, em seguida, adicionou com sucesso o usuário. Voltando à nossa cadeia de conexão, precisamos substituir esses dados aqui. Então, primeiro, vou colocar aqui o nome de usuário, usuário e-sharp, e a senha que eu tinha antes, e o nome do banco de dados. Certo, ainda não temos a base. Então vamos adicionar um. Voltamos para os grupos. E então podemos ver aqui nossas coleções. E nesta lista de coleções que eu tenho anteriormente, eu posso criar um novo banco de dados. Então eu vou dar-lhe um nome E-sharp, que a base eo mesmo nome para a coleção. Voltar pegou aquela cadeia de conexão. Podemos adicionar agora um nome de banco de dados. Então agora temos a cadeia de conexão completa. Falamos antes sobre variáveis de ambiente. Então vamos armazenar essa string nas variáveis de ambiente, então eu copiá-lo. E então eu crio, por exemplo, uma variável, chamá-lo de cadeia de conexão. E então eu dou este valor, que é a string que eu obtive da nuvem de banco de dados. E aqui eu só digo variável de ambiente ponto processo , ponto, conexão, string. Então agora como podemos verificar se estamos conectados ao banco de dados ou não. Se verificarmos este método Connect, notaremos que ele está retornando uma promessa. A promessa normalmente está sendo executada e está retornando dois métodos. Um é, então, quando seus sucessos e um com o erro quando é falhar. Então, aqui vou colocar. E, em seguida, se eu função seta e eu console log alguma mensagem, essa conexão de banco de dados está pronto. E quando falhar na captura. E também é o método de seta. Podemos dizer console registrar o erro. Vamos tentar iniciar o nosso servidor. Então agora o NPM começa. E vemos que há algumas notificações dizendo que o aviso de depreciação. Está dizendo que o analisador de string URL atual está obsoleto. Então precisamos usar alguma variável específica. Portanto, precisamos usar uma opção específica como verdadeira para fazer essa depreciação desaparecer. Mas como podemos usá-lo, vemos que este método de conexão tem outro parâmetro chamado opções. Então, com essas opções é um objeto onde eu posso passar as opções que eu quero. Então vamos copiar este. Adicionado como opção. Temos também outro aviso de depreciação que é usar topologia unificada. Isso também é usado para procurar os servidores. Então vamos adicioná-lo aqui. E vamos salvar. Ainda estamos recebendo um erro. Na verdade, o erro que precisamos passar também o nome do banco de dados nas opções. Então eu posso dizer que é uma palavra reservada, é chamado DB name. E com esse nome de TB, posso passar o nome do banco de dados. Nós nomeamos nosso banco de dados na Nuvem como e-shop que a base. E depois de salvar e tentar reconectar, vemos novamente que a autenticação falhou. No MongoDB Atlas, você precisa dar um eixo de rede. Então este acesso à rede, você precisa ter uma lista branca de IPs que podem acessar seu banco de dados. Então eu já tenho dois IPs. Eu posso adicionar outro IP indo, por exemplo, para o Google e apenas digite o que é o meu IP. E no primeiro resultado da pesquisa, obterei meu IP diretamente. Então eu vou aqui, copiar este IP, e então eu digo adicionar o novo IP. Então este IP é adicionado, eu posso dizer meu escritório em casa. E, em seguida, clique em Confirmar. Então, de volta ao aplicativo. Podemos ver se somos capazes de nos conectar ou não. Então só podemos pressionar Salvar novamente. E vemos aqui o servidor está sendo executado, mas ainda não obtivemos nenhuma resposta do servidor de banco de dados. E vemos que a conexão de banco de dados está pronta. Então, desta forma, nós conectamos a questão do aplicativo back-end para o banco de dados na nuvem. A próxima parte, vamos ver como gravar dados para este banco de dados usando nossas APIs que criamos antes. 14. Usando o Atlas MongoDB: Claro, há também uma ferramenta local para navegar no banco de dados do MongoDB. Você não precisa usar nossa aula online. Você também pode baixar alguma ferramenta que tem mais, mais funcionalidade como veremos mais tarde, como exportar e importar dados. Porque eu quero dar-lhe os arquivos e os dados e o banco de dados que eu criei para não ser incomodado em preencher seus dados ou banco de dados por conta própria. Você terá os arquivos prontos. Então você pode usar esta ferramenta para importar como os bancos de dados e as tabelas e os documentos para o seu banco de dados também. Com esta palestra, há um link anexado para e algo chamado MongoDB Compass. E esta é uma ferramenta muito grande para navegar banco de dados MongoDB. E está disponível para todas as versões dos sistemas operacionais. Além disso, como para Windows, para um Ponto e também para Mac OS. Então, depois de baixar este link, ele lhe dará um aplicativo que você pode usar. E este aplicativo você pode instalá-lo em seus aplicativos e, em seguida, você pode abri-lo. Ok, vamos abrir o aplicativo instalado. Como eu mostro aqui, eu tenho isso aqui na minha lista de aplicativos, no meu sistema Mac. E vai acrescentar para mim o MongoDB Bússola. Como você vê aqui, estamos inicializando. Então está inicializando. E deixe-me ampliar um pouco como dar um tamanho maior. Então agora ele está me pedindo para adicionar uma cadeia de conexão, que nós criamos na palestra anterior para que eu possa ir e copiar minha cadeia de conexão e, em seguida, colado aqui e, em seguida, clique em Conectar. Já expliquei como obter o nome de usuário, senha e também o nome do banco de dados. Então eu já fiz isso. Então é recente. Eu tenho aqui o usuário e-shop e também MongoDB e todas essas informações entre ele. Então agora precisamos clicar em Conectar. E então ele vai se conectar ao meu banco de dados. Como você vê, eu listei todo o meu cluster, que são os que eu tenho no atlas. Então temos todos os bancos de dados que eu criei anteriormente. E também o banco de dados com o qual vamos trabalhar. Então você tem duas opções. Talvez você possa usar MongoDB Atlas ou MongoDB Compass, compostos MongoDB. Você não precisa olhar para o navegador e olhar para o site do MongoDB Atlas. Mas você pode ouvir o uso localmente. Basta abrir um aplicativo, adicionar sua cadeia de conexão, e ele será salvo aqui sempre. Neste curso eu vou usar MongoDB Atlas. E quando estamos indo para implantação, eu vou usar MongoDB Compass porque precisamos importar e exportar dados. E também. Na próxima palestra mais tarde, vou mostrar-lhe como importar e semear seu banco de dados. Você não precisa preencher todas essas informações manualmente, como o banco de dados. Então você já terá banco de dados que você pode importar para sua coleção e, em seguida, você pode usá-lo. Gosto de acompanhar o curso deles. 15. Leia dados de escrita para banco de dados usando API: Perfeito, Então eu estou tão feliz agora que temos uma conexão bem-sucedida com o banco de dados, vamos agora tentar postar alguns dados para o banco de dados para que possamos vê-los no MongoDB Cloud. No banco de dados relacional. Anteriormente, vimos que a relação entre as tabelas, mas aqui no MongoDB é adquirir diferente. Podemos considerar a tabela de nomenclatura é uma coleção. Então, como vemos aqui, já temos um banco de dados. Dentro deste banco de dados, há uma coleção. Então podemos dizer que a coleção é uma tabela no banco de dados relacional. Apaguei o banco de dados que criamos antes. Vou criar um novo com a tabela, vamos chamá-lo de produtos. Então, por exemplo, dissemos que nosso nome de banco de dados é e-shop. Banco de dados. Products é o nome da coleção. Então eu tenho o banco de dados. Cada banco de dados e dentro que há uma tabela ou uma coleção. Podemos chamar-lhe um produto. Ok, ótimo. Então agora temos, digamos que esta coleção, vamos postar dados para esta coleção. Então, no Postman, como vimos antes, temos aqui para este objeto, vamos empurrá-lo para este banco de dados. Mas primeiro, o que precisamos fazer no aplicativo Node.JS, precisamos criar um modelo com Mangusto. Modelo é a mesma coisa que uma coleção. Então podemos dizer no MongoDB, é chamado de coleção e em Node.JS, é chamado de modelo. Então precisamos criar um modelo de produto. Este modelo conterá as colunas que precisávamos para o produto. Por exemplo, o nome ou a imagem, ou por exemplo, a quantidade do produto no armazenamento em Mangusto. Isso é chamado de esquema. E se formos lá para a documentação, vemos que o Mangusto tem muita flexibilidade aqui. Então podemos criar esquemas. Por exemplo, esquema de bloco como vemos aqui. E podemos colocar o título do campo, o autor, o corpo, e há um tipo dele, e cada campo tem algumas opções. Então você pode especificar, por exemplo, ponto de data. Agora, por exemplo, estamos neste registro ou este documento é criado, então veremos que ele leva automaticamente a data da hora atual. Então vamos começar de forma simples. Então, vamos primeiro criar o modelo do produto. Eu vou para o aplicativo e depois, digamos usar e antes das APIs. Eu crio, por exemplo, em constante, chamá-lo de esquema de produto. E este esquema de produto usará biblioteca e esquema de Mangusto. E o esquema aceitando um objeto e este objeto tomará os campos como vimos aqui na documentação. Então temos um novo esquema e aqui podemos listar nossos campos. Então vamos adicionar nossos campos que tínhamos antes. Então eu digo que preciso do nome. Nós digitamos é string. E, por exemplo, eu preciso também imagem. Que tipo também string. Ele conteria a URL da imagem. E vamos adicionar também algo como contagem em estoque. Contagem em estoque. E esta contagem em estoque será um número. Há muitos tipos. Você pode verificar a documentação de mangusto e veremos no curso os diferentes tipos que usaremos para a nossa aplicação de loja virtual. Depois de ter este esquema, precisamos criar o modelo. Então eu digo produto constante. Normalmente, os modelos começam com letra maiúscula. Então podemos dizer produto, que é modelo de ponto de mangusto. E o modelo chamado, ou a coleção é chamado de produto. E usando o esquema do produto que tínhamos antes aqui. Então eu digo esquema do produto, e eu pressiono Salvar. Agora temos o esquema do produto e o modelo do produto já definidos. Então agora precisamos, por exemplo, com pedidos de postagem, precisamos receber esses dados do post do front-end, que é que podemos dizer carteiro ou qualquer outro aplicativo como Angular ou React. E então precisamos receber esses dados pelo back-end, analisá-los e enviá-los para o banco de dados. Para isso, precisamos primeiro, precisamos criar um novo produto, por exemplo, desse modelo. Então vamos fazer isso. Podemos dizer produto const. E este produto é novo produto que tínhamos antes. Mas quais são os campos deste produto? Então o produto é este modelo que tínhamos antes. E nós vamos adicionar os campos desse produto, como o nome. E a imagem e a contagem em estoque. Então eu vou aqui e eu vou receber esse pedido, que eu recebi. Com este pedido, fico com o corpo. E com o corpo dentro do corpo, eu estou enviando aqui id, nome, imagem, e eu posso enviar também contagem em estoque. Será exatamente o mesmo nome aqui, que vem do front-end. Portanto, o front-end e o back-end devem concordar com a mesma nomeação para os campos e o objeto que são enviados para o back-end. Então aqui eu digo que o nome é pedido ponto corpo, ponto nome. A imagem é corpo de ponto de solicitação, imagem de ponto. Contagem em estoque também é da contagem de pontos de corpo de pedido em estoque. Agora temos o modelo pronto, então só precisamos salvá-lo no banco de dados. Então, para fazer isso, podemos dizer ponto do produto. E tem um método chamado Salvar. Salvar. Isso significa que salvá-lo no banco de dados. Se verificarmos este método salvar, ele está retornando uma promessa, promessa com o documento. Então podemos dizer, então está retornando uma promessa. Então podemos dizer produto criado. Então este é o produto depois que ele foi criado no banco de dados. Então é o nosso próprio método. Então, podemos dizer aqui, status de ponto de resposta, que é conexão bem-sucedida ou criação bem-sucedida do banco de dados do documento. Então eu posso dizer aqui ponto JSON. Então eu quero devolver o produto criado para vê-lo no front-end. E em caso de erro ou qualquer coisa pode acontecer, podemos dizer pegar o erro. E este erro, podemos dizer status de ponto de resposta. Por exemplo, 500. É o código de resposta para erros no ponto http JSON. Eu crio, por exemplo, meu próprio objeto. Eu digo que erro é o erro que eu tenho. E, por exemplo, eu digo se o seu sucesso ou não, talvez eu possa usar essa variável no front-end. Por exemplo, para terminar algum carregamento ou voltar para a página inicial. Se houver alguma falha. Já enviamos esse produto. Então vamos excluir esta parte aqui e iniciar nosso MPM backend, iniciar. Já o temos pronto e a conexão está pronta. Vamos postar alguns dados aqui. - Legal. É vangloriado, temos identificação, nome, imagem. Então, se formos para a nossa coleção no MongoDB, Vamos pressionar Refresh aqui. Temos os mesmos dados aqui. Vamos tentar novamente adicionando contagem em estoque. Digamos, por exemplo, 500 peças no meu estoque. Eu mando-o. Criei um novo produto com o mesmo nome e ele está retornando o ID do produto criado. Voltando ao MongoDB, atualize novamente. - Legal. Eu também tenho dois produtos já postados através da minha API no back-end. E notamos aqui que está trancado e bem sucedido. Vamos cometer um erro. Por exemplo, para cometer um erro, vamos tornar este campo conforme necessário. Então banco de dados reconhecerá que essa contagem no Stoke é obrigatório campo. Assim, ele irá responder com erro que você não enviou, por exemplo, a contagem em estoque. Para fazer isso, voltamos para o esquema e alteramos isso para um objeto. O tipo deste objeto é número e obrigatório é verdadeiro. Então vamos salvá-lo e executar nossa, novamente nossa API, mas sem contar em estoque. E se validarmos o JSON e enviar novamente, veremos que recebemos um erro, erro e sucesso, falso ou falhou. Então, neste caso, eu diria que o erro é validar ou contagem de caminho de erro em estoque é necessária. Então o banco de dados me respondeu que este campo é obrigatório. Quando eu fizer isso de novo, seu sucesso. Então agora temos postado um dado para o back-end. Vamos criar uma solicitação get. Então eu quero obter esses dados, exibir suas informações de produto no front-end, por exemplo. Então, para fazer isso, precisamos criar uma solicitação get. Então, criando uma solicitação GET simplesmente mudamos isso para obter. E precisamos especificar a lista de produtos. Então, vamos, por exemplo, obter a lista de produtos antiga. E se eu enviar o pedido, vou receber a antiga API que tínhamos antes. Então vamos alterá-lo para tê-lo a partir do banco de dados. Para fazer isso, vamos para a solicitação get e, em seguida, substituímos essa constante e chamamos, por exemplo, essa lista. E eu chamo apenas o modelo em si que criamos antes e encontramos. É isso. Então eu digo lista de produtos const ea resposta vai ter o nosso, me enviar a lista de produtos. Vamos tentar isso. Nós ascendemos. Percebemos que temos um erro aqui. O erro ocorre porque esse método find está retornando uma promessa. E aqui, quando estou enviando a resposta, talvez esta lista de produtos ainda não esteja pronta e eu ainda não a recebi. Então eu preciso esperar até que esta lista de produtos esteja pronta e então eu posso enviá-la com a resposta. Há outra maneira do que fazer, por exemplo, ponto então e não pegar. Isso é algo que podemos fazer com esperar palavra-chave. E na palavra-chave await requer sempre método assíncrono. Então eu coloquei este método aqui e é assíncrono, e eu tenho um peso aqui. Então, neste caso, quando eu chamo a lista de produtos, então ele vai esperar, ele será preenchido, e então eu envio a resposta para o front-end. Então vamos fazer de novo. Agora. Estou salvando e, em seguida, enviando esse pedido, vemos que temos os dados aqui. Não recebemos mais o erro. Então, é por causa disso que retornamos uma promessa. Devemos esperar que o banco de dados nos envie sua resposta, e então esperaremos no front-end. Então talvez você me pergunte como eu posso detectar o problema ou problemas. É muito simples. Eu posso dizer se uma lista de produtos ou nenhuma lista de produtos, se não houver lista de produtos, então eu posso dizer status ponto resposta 500. E, por exemplo, com JSON, posso dizer erro ou sucesso falso. Então, se houver algum erro aconteceu, por exemplo, conexão ou qualquer coisa, eu posso simplesmente retornar erro com um sucesso se esta lista estiver vazia. Então, temos duas maneiras diferentes de expressar e capturar erros do banco de dados. Então eu posso dizer aqui, encontrar, eu posso colocar um peso e assíncrono, ou eu posso fazê-lo com promessas normais. Como, por exemplo, eu digo Salvar, ponto então e pegar. Claro que isso é mais economia de código. Fizemos isso apenas em duas linhas, e isso é muito bom. Então, a partir de agora, usaremos sempre assíncrono e aguardaremos. Isso é tudo por enquanto é mangusto. Vamos fazer alguma refatoração. É muito bom ter as rotas em alguns arquivos e os modelos em outro arquivo. Assim, podemos ter mais organização do nosso código, do backend. 16. Como analisar o banco de dados de loja de e: Bem-vinda de volta. Mudei de idéia aqui, então não faremos refatoração. Vamos analisar primeiro o banco de dados de e-shop. Assim, desta forma, podemos saber quais rotas e quais esquemas podemos construir e criar os arquivos no back-end. Então aqui temos menos das tabelas ou documentos ou coleções que precisamos em nosso banco de dados. Cada loja tem produtos, pedidos, categorias, usuários e itens de pedido. Esta é a loja eletrônica mais simples. Então, quando você quer crescer mais, você precisa ter mais tabelas como um comentário ou, por exemplo, algumas novas categorias são categorias maiores. Então começamos simples e vamos construir nossa loja virtual para ser maior lentamente. Em primeiro lugar, os produtos, por exemplo, tem ID, que é o ID do produto. E este ID é gerado quando postamos qualquer ID para o banco de dados automaticamente pelo MongoDB. O nome do produto e também a descrição. E a descrição atinge scription é usado para, por exemplo, eu quero armazenar algum código HTML. Às vezes as pessoas estão usando como uma descrição dos produtos com imagens e títulos e alguns textos de alcance complicado. Então vamos ver como teremos editor no front-end. Para HTML. Precisamos também da imagem principal do produto. E é uma string, string, que irá armazenar a URL para essa imagem. Além disso, precisamos de uma galeria de, uma galeria terá algumas imagens e matriz de strings, de URLs onde temos uma galeria do produto, mais detalhes sobre o produto. E então teremos uma marca e também preço, preço da categoria de produto. Será a categoria de tipo. No MongoDB. Aqui teremos algo chamado referências. Não é como bancos de dados relacionais, mas aqui podemos definir o tipo da tabela diretamente. Então, como veremos no futuro, veremos que esta categoria é um tipo de categoria ou tem uma referência à tabela de categorias. E conte em estoque quanto itens deste produto estão no armazenamento. Também classificação com base em comentários e se este produto é apresentado ou não. Então, para vê-lo na página inicial imediatamente como um produto em destaque. E então vamos ver que o que eles, este produto é criado quatro categorias. Só precisamos de um nome, talvez alguns dados adicionais. Por exemplo, o que eu preciso no front-end, às vezes cor, para que eu possa colorir cada categoria com base em alguma cor específica e também ícone ou imagem. Para pedidos, precisamos de itens de ordem, que é uma matriz de item de pedido. E o item do pedido é uma tabela onde contém o produto e a quantidade. Assim, cada pedido terá um produto e a quantidade. Então talvez eu tenha 10 produtos. Eu os pedi em uma ordem. E, em seguida, cada produto terá alguma quantidade. O endereço de entrega um e o endereço dois. E cidade, código postal, país, número de telefone do status do usuário para ver se esta ordem de nascimento é, por exemplo, dobrada, enviada ou entregue. E também o preço total. Veremos como calcular o preço total com base nos itens do pedido e no usuário que solicitou este pedido. Porque teremos que procurar todos os usuários que querem encomendar algo. E depois a data do pedido. Para os usuários. Precisamos de um nome de identificação, e-mail, onde o usuário fará login com seu e-mail e o hash de senha. A senha deve ser armazenada com hash no banco de dados. Não posso guardá-lo como texto simples. Rua, apartamento, cidade e CEP. E também país com um número de telefone. E também para saber se este usuário é admin. Assim, ele pode fazer login no, por exemplo, painel de administração ou não. Talvez alguém pergunte por que eu separei aqui o endereço do usuário. Como, por exemplo, eu posso ter tabela extra como endereço aqui. Então eu posso colocar este campo naquela mesa. E posso relacionar usuários e ordens com essa tabela de endereços. Na verdade, a maioria do Aesop tem um problema que às vezes o usuário, depois que ele pediu algo, ele mudou seu endereço. Mas o pedido já foi enviado. Portanto, precisamos armazenar o pedido como um avião com um endereço de envio, como o usuário o colocou, não relacionado ao endereço do usuário. Usaremos este endereço apenas para preencher automaticamente o endereço do pedido quando o usuário estiver solicitando algo após ele bloquear. Desta forma, tomamos uma visão geral sobre o nosso banco de dados no MongoDB. Agora vamos para o backend e criar os arquivos e refatorar nosso código um pouco para ser baseado nesta estrutura de banco de dados. 17. Crie rotações de API e esquema: Bem-vinda de volta. Estou imaginando agora que se colocarmos todos os esquemas aqui neste arquivo App.js, seria muito grande. E acho que teremos milhares de linhas aqui. Então normalmente em Node.JS, as pessoas ou os codificadores em geral, eles estão colocando essas rotas, por exemplo, as rotas de API, e também os esquemas em arquivos separados. Para, vamos fazer isso agora e vamos ver como organizar o projeto mais melhor maneira. Esquemas assim por diante. Vamos criar uma pasta aqui. Chamamos-lhe modelos. E dentro modal, vamos criar um arquivo para cada modelo que temos, por exemplo, produtos ou produto dot js. Em produtos como eu vou colocar este esquema. Então vamos copiar esta parte e colocá-la aqui. Mangusto não está definido neste arquivo, então precisamos também copiar esta parte onde const mangusto exigem mangusto porque este arquivo não pode ver o mangusto importado no app.js. Então temos aqui const Mangusto e esquema de mangusto. E a propósito, vamos pegar também o magnata. Mas nós cortamos e colocamos aqui. Agora, como ArcJS usará esse modelo em Node.JS. Se queremos exportar uma constante ou, por exemplo, uma classe ou objeto, apenas dizemos que precisamos fazê-lo dessa maneira. Exporta produto ponto e, em seguida, o modelo. Então, aqui, neste caso, produto será visto em qualquer outro arquivo. E eu posso importá-lo com método exigem. Então, indo para o arquivo ab.js e eu digo produto const, que está vindo de exigindo-lo a partir deste arquivo onde temos o modelo, por exemplo, modelos cortar produto. Neste caso, temos o produto e podemos usá-lo como um modelo para a nossa API. Vamos fazer mais refatoração. Vemos que temos todas as APIs, obter post, GET post. Então, se fizermos isso para todos os esquemas, seria um arquivo muito grande. Há uma maneira no Node.JS que você também pode armazenar as rotas ou as APIs em arquivo separado. Vou te mostrar como se faz. Então, primeiro vamos criar uma pasta do Word, roteadores de seca. E dentro do roteador, eu crio também produtos, o js. Então, para cada modelo, talvez existam roteadores. No Express. Há algo chamado roteador, e este roteador é responsável apenas por criar APIs, paralisar as APIs e importá-las e exportá-las entre os arquivos. Então, como fazer isso? Primeiro, precisamos importar o Express. Exigir Express. E o roteador fará parte do Express. Então, podemos dizer Express dot router. Então este roteador, quando eu importá-lo no ArcJS, eu posso usá-lo aqui. E este roteador, ele pode ser usado como um middleware, então eu posso usá-lo com o uso do aplicativo. Então, primeiro, vamos mover, ver como mover esses roteadores. Então, primeiro, vamos copiar todas as APIs que tínhamos e colocá-las aqui. Em vez de aplicativo. Eu só digo roteador. Isso é muito simples. E também os apago daqui. E como dissemos até o 2s é, ele pode usar também que exterior. Então, podemos tomar a principal rota API dos produtos e colocar aqui, por exemplo, roteador do produto. Mas de onde esses produtos roteador virá, ele virá a partir daqui. Então eu não posso dizer que eu quero exportar também o roteador. Então eu posso ir aqui e dizer que o módulo dot export é roteador. Então temos aqui uma maneira diferente para exportar. Aqui estamos exportando o produto em si, e aqui estamos exportando um módulo. Então, desta forma, eu posso dizer produtos roteador é uma constante. Então podemos dizer aqui, constante. Produtos roteador vindo de, exigem, de roteadores. E, em seguida, produtos. Então vamos ver aqui que esta aplicação está usando essas rotas de rotas que estão vindo de produtos roteador. Então aqui precisamos fazer alguma coisa. Não podemos usar a API assim, porque caso contrário, será, podemos considerar isso como as crianças. Então, por exemplo, aqui, eu preciso colocar apenas a barra para que eu possa considerá-lo quando eu digo localhost 3000 produtos de barra, então eu posso chegar a este, obter. E a mesma coisa para o correio. Se eu quiser algo no futuro como contagem, Eu colocá-lo assim, em seguida, a API será http 3000 slash produtos de contagem de barras. Então esta é a melhor maneira como podemos lidar com isso fora em um arquivo separado. Mas primeiro temos aqui o produto modelo. Portanto, precisamos também importar este modelo. Então eu digo const, produto é necessário a partir de modelos do produto. Agora temos as rotas concluídas. Então temos tudo começar post e vamos ver como adicionar a exclusão e atualização. Vamos salvar este arquivo e também salvá-lo aqui. Faça um pouco mais de organização do código aqui para que não precisemos mais dele. Assim, podemos ouvir, digamos roteadores. E aqui, o roteador do produto, podemos tê-lo aqui importado. Vamos ver agora se tudo funciona bem, podemos dizer MPM, começar. Tudo está conectado e tudo está funcionando como fumaça. A mesma coisa. Nós também vamos para as outras coleções de banco de dados. Por exemplo, eu vou ter aqui ordens GS e também usuário e também a categoria. Também a mesma coisa para que autores. Terei os mesmos arquivos. Então, tenho certeza que você não está interessado em ver todo o processo porque é exatamente o mesmo. Vou adicioná-los. E então vamos ver depois disso como eles se parecem no final, nossa aplicação se parece com isso. Em app.js. Temos os middlewares, rotas, e também a conexão de banco de dados e o vendedor. Nas rotas. Criei rotas para cada tipo ou, ou para cada coleção que tínhamos em nosso aplicativo. Então eu vou aqui e criei isso exatamente como os produtos. Nós temos, as ordens dos usuários, categorias. E a mesma coisa para esquemas. Cada esquema tem o seu próprio agora. Então, neste caso, agora temos tudo pronto para criar nossas APIs. Atualmente, eu uso apenas entrar em todos os tipos. Só quero mencionar uma coisa. Quando exportamos o modelo das exportações ponto-produto desta forma, não desta forma. Quando importamos, precisamos importá-lo como um objeto. Então aqui, quando eu vou para os produtos, eu importá-lo assim. No ES6, temos essa destruição de objeto. Então este modelo está retornando um objeto. Então eu preciso criar um novo objeto e atribuir todos os campos desse objeto a este. Então, neste caso, eu posso usá-lo em todos os lugares certeza não há nenhum problema se você usar desta maneira. A forma de exportar o módulo diretamente. Vamos tentar o nosso LPI. Agora. Eu vou aqui e digo para pegar, eu tenho uma lista de produtos. É isso por enquanto. Para as próximas palestras, veremos como preencher esses esquemas e como conectá-lo às estruturas do nosso banco de dados. E vamos ver como continuar a construir a nossa loja electrónica de uma forma melhor. 18. PerDA o CORS e por que precisamos que ela: Se você estiver fazendo um front-end e o desenvolvimento de back-end em seu mesmo tempo. Tenho certeza que você viu esse erro. Esse erro chamado Cross-Origin Resource Sharing, o que significa que em um idioma humano aplicativo Node.JS não pode confiar em nenhum outro aplicativo. Então, quando eu estou enviando solicitações do meu front-end para o backend, em seguida, o back-end quando Lot resposta para mim o mesmo que eu quero porque é proibido. Ele está usando porta diferente, que é totalmente um domínio diferente. Então, no meu aplicativo front-end, quando eu crio um serviço para chamar as APIs, então eu obterei esse erro. E na Mozilla org, eles estão explicando todos os dados ou todos os detalhes sobre este curso. Então, de alguma forma, no aplicativo NodeJS, precisamos habilitar esses cursos. Como podemos permitir que qualquer aplicativo solicite API do meu servidor. Há uma biblioteca chamada curso. Podemos usá-lo para permitir o curso para qualquer aplicação. Então eu parar o servidor e eu digo npm instalar curso. Depois de instalá-lo, precisamos exigir e importá-lo. Então aqui estamos importando tudo em ArcJS. Então eu digo curso const, exigir curso. E para habilitar o curso, é muito simples antes de tudo, antes do início do aplicativo, antes de usar qualquer serviço no aplicativo, precisamos fazer, não usar núcleos. E opções de ponto de aplicativo. Com estrela, como tudo. Usando o curso. Opções de pontos deste aplicativo. Isso significa que é algum tipo de solicitações HTTP, como GET e postar e colocar e excluir. Mas o que é isso? Quando nós Google opções http, vemos que a opção HTTP é um método solicita opções de comunicação permitidas para um determinado URL para o servidor. Então, quando eu digo, eu quero uma estrela, então eu estou permitindo tudo usando este curso. Então, neste caso, estou permitindo que todos os outros pedidos HTTP sejam passados de qualquer outra origem. Portanto, é muito importante usar este curso e habilitá-los a evitar esse erro. Finalmente, depois de terminarmos este módulo ou esta seção, eu diria que este projeto é a inicialização para nós para criar a questão do back-end. Então eu vou colocá-lo como um arquivo zip para que você possa baixá-lo e começar a partir daqui. Você pode ver este projeto em recursos com esta palestra. Nos próximos módulos, vamos ver como construir todos os esquemas e as APIs para cada parte do aplicativo. 19. Back, and de back, : produtos e categorias: Bem-vindo à terceira seção deste curso. Vamos ter uma introdução sobre começar com o back-end. O que é um back-end? Na engenharia de software, os termos front-end e back-end referiam-se a uma separação de preocupações entre a camada de apresentação e a camada de acesso a dados. Portanto, qualquer aplicativo web e aplicativo móvel é considerado como um front-end. back-end é a parte onde eu estou segurando dados. Novamente, um banco de dados ou um servidor de arquivos. E o próprio servidor pode ser considerado como um back-end. Então vamos fazer isso assim. O front-end está mostrando os dados e o backend está mantendo esses dados em algum lugar seguro chamado servidor. Precisamos de alguma forma lidar com esses dados que são armazenados no servidor e servi-los para o cliente. E usando algumas linguagens de programação como Java, SQL, e também nenhum GS, que vamos fazer neste curso, para enviar esses dados para o cliente de uma maneira bonita, para renderizá-los em HTML, CSS e Bibliotecas JavaScript. Então, na próxima palestra, vamos ver como o front-end pode se comunicar com o backend para pegar esses dados, que é chamado de APIs RESTful. 20. Schema de produtos: Bem-vinda de volta. Nesta palestra, vamos ver como construir o modelo de produto ou o esquema de produto. Tudo em Mangusto começa com esquema. Cada esquema mapeia para uma coleção MongoDB e define a forma do documento dentro dessa coleção. Então, com base no modelo que você vê à direita da tela, vamos construir o mesmo esquema que construímos antes nesse modelo. Assim, os campos do produto podem ser como começar aqui, eu digo que o tipo deste campo é uma string. E há opções de esquema ou Opções de tipo de esquema. Essas opções de tipo de esquema, você pode vê-los na documentação do Mangusto. Então eu vou aqui para a documentação do Mangusto. Eu vou para tipos de esquema. E em tipos de esquema, podemos ver que existem muitos tipos. Por exemplo, string, number, date, e há algo chamado opções, como vemos aqui neste exemplo. Então eu vou, por exemplo, para Tipo de Esquema, e vejo que há caminho e opções na documentação de Opções de Tipo de Esquema, eu posso ver todas as opções que eu preciso para construir meu esquema. O que precisamos realmente para o nosso curso, eu acho que precisamos desse campo obrigatório e também algo chamado href para referência a outra tabela e padrão, que é um valor padrão quando o objeto é criado do produto. Portanto, o nome do produto é sempre necessário. Eu defini isso como verdadeiro. O próximo campo é a descrição, que será uma breve descrição do produto. E será também uma corda. É necessário? Eu diria que a breve descrição será necessária no nosso caso. E então vamos para a descrição rica. Na descrição rica é também tem uma cadeia de caracteres de tipo. Mas eu diria que não é necessário. E podemos colocar um valor padrão para ele quando ele é criado. Por exemplo, eu digo string vazia. A mesma coisa vale para a imagem. Então eu coloquei dizer aqui também, a imagem é uma string e tem um valor padrão como vazio. Agora vamos às imagens. Imagens. Eles são sempre matriz de cordas. Então podemos colocá-lo simplesmente como este array. E o tipo de cada item desta matriz é uma string. Temos também marca, que é será a mesma coisa. Corda e preço. Assim, o preço será na forma como o tipo é o número. E o valor padrão. Podemos dizer que é 0. O próximo passo agora precisamos adicionar a categoria. Então é simples. Dizemos que categoria é tipo de ID de categoria. Então aqui no produto, quando eu quero adicionar um produto, eu uso o ID da categoria, não a categoria inteira. Então eu digo que o link entre a tabela e do produto e a tabela de categoria é o ID da categoria. Então, o tipo deste campo será esquema de ponto Mangusto, tipos de pontos, ID de objeto ponto. Então, neste caso, eu preciso passar sempre o id. E como eu diria que este ID está conectado à tabela de categorias ou esquema de categoria. Eu só faço isso. Eu digo que uma referência é esquema de categoria. Então, neste caso, este ID será conectado ao esquema de categoria. Então, quando eu adiciono produto, é pesquisar em categorias e eu pego ID específico. E então eu digo que este produto tem categoria, por exemplo, beleza e saúde. Isso é necessário? Sim, vamos adicioná-lo conforme necessário. O próximo campo que fazemos já é contar em estoque. Contagem em estoque, É normalmente um número e necessário. Então você precisa especificar quanto deste produto você tem em seu armazenamento. Há também outra propriedade que podemos colocar max e Min. Por exemplo, eu digo mínimo tem 0 e máximo. Tem 255, por exemplo. Então eu digo aqui que quando eu postar um produto com menos número de contagem em estoque, então eu vou ter erro porque mangusto, quando ele se virou para mim e me diga que, não, isso é errado. Você precisa colocar o número entre 0 e 255. O mesmo vale, por exemplo, para classificação e também uma série de comentários. São números. Então eu os adicionei aqui. E o campo é destaque é o tipo Booleano. Portanto, o valor padrão dele é false. Então isso é para mostrar o produto na página inicial como um produto em destaque. Além disso, eu tenho a data do campo criada. Assim, os dados criados são uma data de tipo e o valor padrão é ponto de data agora, por isso é muito simples. Então, quando o produto ou este pedido vem, então levará o tempo atual. Agora temos todos os esquemas estão prontos para o seu produto e veremos mais tarde como adicionar produto nos pedidos de post e como obtê-lo. 21. Categorias modelo e esquema.: Anteriormente, criamos o esquema de categoria. E como você vê aqui no modelo à direita da tela, precisamos criar esses campos. Então vamos começar com o nome. É exatamente a mesma coisa que fizemos para o produto. Então eu digo tipo string necessário através. Então, para não levar tanto tempo na digitação, eu vou adicionar os outros campos porque eles também estão tendo o tipo de string. Então aqui temos ícone e cor. O ícone será o nome do ícone, por exemplo, estamos usando alguns ícones de fonte ou ícones de material do Google. Então eu posso dizer apenas o nome do ícone. E também eu digo aqui a cor, essa cor será um hash, hash string, como algo como eu posso dizer 000 000, que é preto. Assim, desta forma, eu posso armazenar a cor da categoria que eu preciso exibir no front-end. Então vamos começar agora com a criação da API da categoria. Na próxima palestra, vamos ver como adicionar categoria e excluído. 22. Adicionar e excluindo categorias: Ótimo. Então, de volta ao mundo real. Agora vamos ter a categoria API. Então, nesta palestra, saberemos como adicionar uma categoria e remover uma categoria. Comecei simples aqui porque a API categoria é a mais simples que veremos no futuro. Como criar APIs mais complicadas, como os produtos e os pedidos. Então, como você se lembra antes de criarmos as rotas e rotas, estamos adicionando nossas APIs. Temos aqui um GET, vamos editá-lo para fazer melhor maneira ou podemos mantê-lo para obter lista de produtos. Agora, vamos adicionar uma categoria. Então, criando postagem ponto roteador. Então eu vou adicionar uma categoria, então por barra e, em seguida, assíncrono, solicitação e resposta. Então eu vou fazer aqui a adição ao banco de dados usando Mangusto e adicionando uma nova categoria. Vimos antes que a solicitação sempre recebendo as informações do front-end, como o usuário está enviando as informações. E então vamos lê-los e postá-los no banco de dados. Vamos criar, por exemplo, uma constante, podemos chamá-lo ou deixar categoria. E este será um novo modelo de categoria. Então, esta categoria, nós já importamos ela aqui. E teremos o objeto desta categoria será nome e também ícone e cor, exatamente como o esquema. Então, como eu obteria esses dados? Então solicite o nome do ponto, do corpo, do ponto. Então o front-end deve me enviar exatamente esse nome. Então também a mesma coisa vale para o ponto de solicitação, ícone, ponto ou desculpe, ponto, corpo, ícone ponto. Também para a cor. Nós adicionamos aqui. A cor. Se você se lembra, quando publicamos um produto aqui, tivemos algo como salvar. Então eu digo o modelo dot save, e então este save vai me devolver uma promessa. E então eu retorno com o status que criou os produtos. E nós conversamos antes também sobre esperar e assíncrono. Então vamos fazer isso agora com um peso e assíncrono. Então, usando um peso e uma pia, eu digo categoria, que eu criei antes. Posso dizer que o nosso peso de categoria, que eu criei ponto salvar. Então, neste caso, estou esperando até que isso seja salvo. E este salvamento retornará para mim uma promessa com documento ou a própria categoria que é criada. E então eu verifico se não há categoria, como nenhuma categoria criada. Então eu digo erro de retorno. Então o status do ponto de resposta dirá 400 quatro. Por exemplo, os pontos terminam. Que a resposta, por exemplo, ou a categoria não pode ser criada. Por exemplo. E, em seguida, se houver categoria, então eu digo pontos de resposta terminam a categoria. Isso é muito simples. Como recapitulação, crio um novo modelo de categoria e, em seguida, preenchi com dados. Eu o salvei usando Mongos e então eu estava esperando aqui até que esta categoria esteja pronta. E então eu verifico se há categoria, há dados dentro desta categoria, então eu envio. Mas se não, estou retornando um erro. Vamos iniciar o nosso servidor agora. Mpm iniciar conectado ao banco de dados. Está tudo bem. E eu uso o Carteiro. Carteiro, por exemplo, eu criei esta categoria. Eu disse que o nome é saúde e ícone é ícone saúde e alguma cor. Envio-o e vejo que foi postado com sucesso. E eu tenho uma nova identificação desta categoria para verificar se está realmente funcionando. Vamos novamente ao Atlas e checamos no banco de dados. Eu vou aqui e já encontrei. Então vamos criar outra categoria. Por exemplo, como computadores. E este computador tem ícone computador e alguma cor específica no front-end você pode criar uma coleta de cor. Coletor de cor. Vamos atribuir a você o código da cor. Por exemplo, eu digo 444, e eu envio e criei um novo. Vou ao Atlas. E diga “refrescar”. E veremos que essa categoria também é adicionada aqui. Então temos computadores e saúde. Agora vamos excluir uma categoria. Excluir uma categoria é a mesma. Então não podemos dizer ponto roteador, excluir, não postar. E eu digo isso que eu quero atribuir para excluir uma categoria. E então eu digo pedido e resposta como um retorno de chamada. E eu usaria esse pedido e resposta. Vamos fazer isso aqui com o jeito prometido. Fizemos isso antes com um peso e assíncrono. Vamos fazer isso aqui com um jeito promissor. Então, primeiro, eu chamo o modelo, eu digo categoria ponto. Há método chamado encontrar por ID e remover. Então, encontramos um ID por e removê-lo o mesmo com encontrar por ID e excluir. Então aqui eu preciso encontrar a categoria que eu quero excluir. Então, por ID. Então, onde eu vou obter o ID de, eu vou obter o ID do usuário ou do cliente. Então o cliente vai me enviar o ID alguma forma e então eu vou encontrá-lo no banco de dados e excluído. Então, como posso obter a identificação do cliente? Há uma maneira, é muito boa maneira. É através da URL. Então eu não posso dizer aqui por dois pontos e então eu posso dizer por ID. Então este ID, você pode colocá-lo como quiser, como qualquer nome que você quiser. Em seguida, o URL será parecido com api barra v1 barra o ID, que eu quero excluir da categoria. Então, aqui, como eu vou obter esse ID do URL. É muito simples. Eu digo pedir pontos params ponto ID. Então aqui este nome é o mesmo nome que, como eu designei aqui. Então, por exemplo, eu digo id de categoria. Eu, então eu devo colocar aqui ID de categoria. Então, antes de vermos que pedimos o corpo. O corpo é quando enviamos o pedido dentro do corpo. Então aqui temos corpo e estamos enviando o corpo do pedido, os dados. Mas agora vamos enviá-los ou vamos enviar o ID pelo URL. Então, como vemos aqui, que este método retornará para nós uma promessa. Então eu vou dizer então e, em seguida, a promessa vai retornar para mim um documento eo documento que é a categoria excluída. Então eu digo aqui, se há categoria, como se você encontrá-lo, em seguida, retornar um ponto de resposta, ponto status ou desculpe, 200 e ponto JSON. E eu posso criar meu próprio objeto. Posso dizer que o sucesso é verdadeiro e alguma mensagem para o usuário. Então não posso dizer a ele que a categoria foi deletada. E então, se não houver categoria, quando eu não encontrar essa categoria mais, eu digo retorno, status de ponto de resposta. O código não encontrado é 404. E o JSON, eu digo sucesso, falso. Então eu não encontrei essa categoria e nada é excluído. Então eu posso dizer na categoria de mensagem não encontrado. Mas e se houver algum erro no servidor? Por exemplo, não sobre não encontrar essa categoria, mas algum erro, como erro de conexão ou se eu comprar os dados errados, ID errado. Então não posso dizer isso com o erro de captura. Eu digo que por favor encontre para mim ou me envie uma mensagem de que há um erro aconteceu no servidor. Em geral, não se trata de categoria encontrada ou categoria não encontrada. Então aqui eu digo resposta de retorno, status de ponto. O erro em geral é 400. Então, JSON. E então eu digo que o sucesso é falso. E então eu posso enviar o erro para o front-end para o usuário. Então agora vamos testar esta API, a exclusão da categoria. Vamos criar um e excluir iniciando o servidor novamente. Mpm começar. Estamos conectados a esse banco de dados. Então vamos criar, por exemplo, uma nova categoria de computador, por exemplo. Sim, este nome, mantemos o mesmo. E eu copio esta categoria. E então eu altero esse método para excluir. Então aqui eu digo depois de categorias, eu digo o ID da categoria que eu quero excluir. E então eu carrego em Enviar. Boa categoria é excluída. Se obtivermos a lista de categorias novamente, se você quiser, você pode ver aqui o histórico do que você fez antes. Então vamos obter uma lista de categorias. Ainda temos a velha categoria que a doença de saúde que excluiu também. Então eu posso ir aqui e dizer para apagar esta identificação. E então, se eu voltar para obter, eu teria matriz vazia. Então não temos nenhuma categoria. Agora, vamos tentar excluir o ID não encontrado. Por exemplo, posso dizer 444 aqui. Então, quando eu enviá-lo, Eu tenho sucesso categoria falsa não encontrado. Isso é bom. É exatamente a mensagem que queríamos. E também, vamos cometer um erro. Normalmente, se você quiser cometer erro ao excluir o ID de categoria ou objeto ID tem este formato no MongoDB. Vamos mudar esses formatos. Por exemplo, eu faço isso curto assim. Então, quando eu enviar, eu recebo aqui o erro. Então o erro é 400 e então eu digo que o sucesso cai e o erro aconteceu. Trata-se de ID de objeto porque está formatado errado. Você tem aqui essa escolha para fazer entre métodos assíncronos e aguardam ou com então. Assim, as promessas podem ser em ambos os sentidos. Você não tem nenhuma diferença. Mas aqui também é mais guiado e aqui é o código mais curto. Na próxima palestra, vamos ver como obter lista de categorias e também uma única categoria. 23. Obter categorias e detalhes de categoria: Nesta palestra, vamos obter uma lista de categorias e categorias de detalhes. Então, primeiro vamos fazer a lista de categorias. Já fizemos isso antes nas palestras anteriores. Então, aqui estou usando GetMethod e, em seguida, eu estou usando find. Com o uso deste método, eu vou obter lista Categorias. E se houver lista de categorias, então eu vou conseguir, eu vou enviá-lo por resposta. E se não houver nada, então eu enviarei erro. Vamos editar, editar aqui. E podemos dizer estado 2s 200 que encontramos a lista de categorias. Agora vamos obter uma categoria por ID. Então eu vou dizer aqui ou alterar. Também é pedido GET. Então este get vai aceitar a mesma API, mas com parâmetro como vimos antes. Então eu usaria aqui método assíncrono, solicitação, resposta, função. E então eu vou fazer uma categoria constante. E aqui eu usaria o método aguarde. Então eu vou fazer aqui chamado a categoria. E há método chamado find by ID. Então, usando este método, vou pedir o id da solicitação params dot ID. E vou verificar se não há categoria, em seguida, enviar a resposta errada ou erro. Se houver categoria, então eu enviarei com essa resposta. Então aqui eu fiz isso rapidamente. Se não houver nenhuma categoria, envie a resposta 500. A mensagem para o usuário dizendo que a categoria com o ID fornecido não foi encontrada. E se houver categoria, então enviarei com essa resposta. Vamos testar isto com o Carteiro. Então, a lista de categorias é a versão da API uma barra categorias e um pedido get que eu envio, mas eu não tenho nenhuma categoria. Vamos adicionar um. Eu tenho o pedido de correio aqui, e eu já tenho o corpo neste aqui. E vamos adicionar outro como saúde. Saúde. Isso é o fim. Portanto, temos que voltar agora para o pedido GET. Ligue de novo, tenho dois pedidos ou duas categorias. Vamos obter esta categoria apenas por ID. Então eu vou passar apenas o ID após o URL. Vou clicar em enviar. E eu tenho a categoria detalhada aqui no meu pedido de API. 24. Categoria de atualização: Bem-vinda de volta. Então agora vamos atualizar a categoria. Atualizar categoria significa que vamos atualizar o nome ou a cor ou o ícone. As solicitações HTTP para fazer isso é chamado Realtor ponto colocar. Então nós colocamos, eu posso atualizar os dados no banco de dados. Mas aqui é uma mistura entre pegar os parâmetros e pegar o corpo, os params. Vamos usá-lo para obter o ID do produto ou a categoria que queremos atualizar. E então nessa resposta ou no corpo do pedido, vamos fazer isso. Vamos obter os dados que são atualizados. Assim, da mesma forma aqui, solicitação assíncrona e resposta será um método ROM. E então eu vou constante a categoria em alguma variável. E então eu vou dizer esperar por categoria e encontrar por ID e atualizar. Então eu posso encontrar o produto e, em seguida, nossa categoria, e então eu atualizá-lo. Portanto, o primeiro parâmetro deste método é request dot powerapps dot ID. Então eu tenho que passar o ID, que eu obtive do usuário. E o segundo parâmetro é o objeto onde contém os dados atualizados. Então categoria tem um nome, ícone e cor. Então obtendo-os a partir do corpo de ponto pedido, nome de ponto. A mesma coisa, exatamente como postamos uma nova categoria. Então eu vou fazer isso aqui. Então, se eu conseguir categoria, então tudo está bem e tudo foi atualizado. Se não, então há erro. Então, vou implementar esta lógica. É exatamente o mesmo que temos no correio. Então eu vou copiar o mesmo e colocá-lo aqui. Então eu salvei conectado ao banco de dados, e esse é o estado com o Postman. Então aqui temos a lista de categorias que criamos antes. Agora vamos tomar este ID e alterar este método para um put. E então eu passo a identificação que eu tenho. E o corpo será diferente. Por exemplo, aqui temos computadores de elefante 11. Vamos mudá-lo, por exemplo, para eleger através de fonics. E o ícone será o mesmo eletrônico, e a cor é 55 quando eu enviar. Então o que eu tenho aqui são os dados antigos em Node.JS. Há uma opção se você quiser obter de volta os dados antigos que você envia, ou por exemplo, que era a categoria original ou os dados atuais que você atualizá-lo. Porque se formos aqui e pressionar em get, veremos em nossa lista os dados atualizados. Teremos aqui, os eletrônicos. Mas aqui no pedido PUT, retornamos os dados antigos. Então, neste caso, em Node.JS, você precisa passar um parâmetro para o find by ID e update, que é chamado é objeto, é claro, e você pode dizer um novo através. Então aqui isso significa que eu quero retornar os novos dados atualizados. Vamos salvá-lo e tentar novamente. Então vamos para o porto. Vamos, por exemplo, mudá-lo para outra coisa, por exemplo, beleza. E eu disse “Beleza”. E eu clico, então eu tenho os dados atualizados. Se eu disser novamente aqui com a lista, Eu tenho todos os dados atualizados. 25. Publique uma nova API de RESTOS: Então, nesta palestra vamos ver como postar um novo produto. Como trabalhar com categorias. Vamos também publicar um novo produto. Então só precisamos coletar os campos, os mesmos campos que são enviados do front-end. E, em seguida, adicione-os como um modelo de produto e salve-os no banco de dados. Anteriormente, fizemos essa parte. Então vamos refatorar e fazê-lo com nosso modelo e com nosso banco de dados. Então vamos criar nossa cópia dos campos que tínhamos no modelo. Então aqui eu já sinto os campos para não tomar tanto tempo em preenchê-los. São todos iguais. Estão todos vindo do corpo. Vamos reduzir também aqui o código para que possamos usar assíncrono e aguarde. Então, aqui vou adicionar assíncrono. E então vamos descer. E dizemos, temos, por exemplo, produto é igual a esperar e o produto que criamos o modelo de produto ponto salvar. Então nós temos aqui agora o novo produto é criado depois de salvá-lo. Então vamos apagar esta parte. E dizemos aqui, se não houver nenhum produto, então retornado como uma resposta, o código de status é 400 ou 500, que é como um erro interno do servidor. E, em seguida, envie uma mensagem informando que o produto não pode ser criado. E se tudo correr bem, então devolva o produto. Então, o que há de especial aqui? A coisa especial aqui que você pode postar o produto facilmente, mas e se o usuário ou a frente e centro na categoria errada? Então, por exemplo, se eu tiver algum ID de categoria e o usuário criou ID sozinho, e esse ID da categoria não existe em nenhum lugar no banco de dados. Então vamos primeiro validar se há categoria existe ou sabe. Para fazer isso. Podemos fazer a mesma coisa, podemos fazer, categoria Const. E nesta categoria dizemos aguardar um novo modelo de categoria. E encontre por ID. Já vimos isto antes. Então eu digo pedido corpo ponto, categoria ponto. Assim, o front-end na categoria irá enviar o ID da categoria que eu quero adicionar ao produto. Então aqui, se não houver categoria, então retornar status de ponto de resposta, por exemplo, 400, que o usuário cometeu um erro e ele está enviando categoria inválida. Então, em geral, temos todos os campos e o usuário deve enviar a categoria. Se tudo for válido, ele continuará e adicionando seu produto normalmente. Vamos tentar isso com o Carteiro. Então eu vou para o Postman e eu crio uma nova API. E o link será o mesmo. Http e categorias, não categorias. Precisamos de produtos. Então caneta eu acho que agora podemos adicionar o corpo aqui. E este amigo será o tipo de linha. E esta linha não é texto, é JSON. Assim, o front-end irá enviar bloco adjacente para o back-end. Então eu já tenho preparado para não perder tempo digitando isso. Então eu tenho o nome, a descrição e leitura descrição, imagem, marca, preço, categoria, e a categoria. Eu peguei a string da lista de categorias. Então, se você se lembra, temos duas categorias. Copiei um e adicionei aqui. E a contagem de ações é 10. Classificação é para não tanto bom produto. E críticas. O número de comentários é 22. E está em destaque? Sim, é verdade. Então, agora, quando eu enviar o produto, eu vou obter resposta do produto e com um novo ID do produto. Vamos verificar a base de dados do Atlas. Aqui está Atlas e temos aqui MongoDB, Eu recriar uma atualização. Então vemos aqui que o produto já está publicado. E notamos que a categoria tem ID de objeto. Vamos agora tentar enviar categoria inválida. Então vamos remover, por exemplo, isso e torná-lo 80. Por exemplo. Enviar eu tenho categoria inválida. E isso é ossos é 400 mau pedido. Então, a coisa especial na postagem de um produto é apenas como nós o vinculamos à categoria. Então você deve validar cada categoria que já existe no banco de dados e, em seguida, enviá-lo para o post com a publicação do produto. Desta forma, você terá um produto válido que está realmente ligado a uma categoria. 26. Obtenha um produto e lista de API de RESTo: Quando estávamos preparando nossa API, fizemos uma solicitação get para uma lista de produtos. Então, como vemos aqui, a lista de produtos é salva com find. E então vamos devolvê-lo para a frente que. Então vamos tentar isso com nossas mudanças. Com o Carteiro. Eu vejo aqui o produto, Eu mudo o post para obter. E vemos que temos matriz e lista de produtos. Isso é muito simples. Vamos criar uma solicitação GET apenas para um produto. Será exatamente o mesmo que obter lista de produtos, como vimos antes. Nós só precisamos aqui para adicionar o parâmetro ID. E vamos mudar esse nome para produto. E agora, se houver um produto, então, se não houver produto, desculpe. Então você retorna um erro. Se houver produto, envie-o novamente para o front-end ou para a API. Mas o que precisamos mudar aqui não é bom, mas encontrar por ID. E o ID, como vimos antes, vem de solicitação olhado pelo ou, params ponto desculpe porque temos os parâmetros no ID do ponto URL. Vamos salvar e tentar. Agora. Copio, por exemplo, um dos IDs que tenho aqui para produtos, e coloco aqui depois do produto. Então eu tenho a identificação aqui. E eu digo, eu entendo, então eu tenho os detalhes do produto exatamente como aqui. Gostaria de mencionar aqui que, por exemplo, na lista de produtos, às vezes se eu tiver uma grande lista de produtos, eu não tenho que enviar todos os dados. Por exemplo, se eu quiser no front-end exibir apenas o nome do produto e a imagem. Então eu manivela criar uma API específica que retornando apenas lista de nomes e imagens dos produtos. Vamos tentar isso agora. Então sempre, depois que temos encontrar aqui, encontrar método, se eu clicar em ponto, então eu vou encontrar um método chamado select. Então é exatamente como selecionar uma consulta. Então eu posso passar aqui quais campos eu quero exibir. Então eu digo, por exemplo, eu preciso apenas do nome. Então vamos dizer aqui o nome ali, mexendo e salve-o. Então aqui vamos remover o produto único e obtemos uma lista. E vemos aqui temos uma lista de produtos e apenas os nomes se quisermos, por exemplo, nome e imagem. Então eu vou para esta string e eu adiciono apenas espaço. E então o campo que eu quero exibir, por exemplo, eu digo imagem, e então eu salvo. Vamos ao Carteiro e conseguiríamos imagem e nome. Observamos aqui que há ID, então também podemos excluir esse ID. Como podemos fazer isso. Nós também vamos para a mesma string, e nós temos o ID neste caso. Então eu posso dizer menos a identificação. Então, quando eu pressionar Salvar, eu vou para o Postman, enviar esse pedido. Agora tenho uma seleção limpa. Dessa forma, você pode criar suas APIs com mais desempenho e eficiência. Então você não tem nenhum obstáculo nas memórias para carregar para o cliente. Você precisa de uma lista de produtos. Então mande o que precisa. Então você pode criar uma API especial para isso. Então você pode enviar o que quiser através desta API. 27. Mostrar detalhes de categoria no Populate de produtos: Então, como vimos anteriormente, que estamos recebendo um único produto dessa maneira. Então, mas o campo de categoria é apenas o ID. Se eu quiser, por exemplo, exibir o produto com o nome da categoria. Então eu tenho, por exemplo, o detalhe do produto, mas eu também quero mostrar seu nome. Então não é bom ir e obter outro pedido para a categoria e, em seguida, mesclar esses dois pedidos juntos e mostrar no front-end o que eu preciso. Há uma maneira muito bonita de fazê-lo em MongoDB e Mangusto. Então, depois de encontrar pelo método ID, quando eu pressionar ponto, eu vê-los MSO não é preencher. Preencher significa que qualquer ID ou campo conectado a outra tabela será exibido como detalhes neste campo. Então, o campo é tem, por exemplo, ID, que está vinculado a outra tabela, como vimos antes no esquema que temos aqui, criamos a categoria é ID do objeto e a categoria de referência. Então esta categoria é realmente ID como vimos antes. Então eu digo uma população agitada. Categoria. Vou para o Postman e, em seguida, clique em Enviar. Vejo que tenho os detalhes da categoria. Então aqui desta forma, quando eu crio uma solicitação GET para um único produto, eu suponho que eu estou em uma página de produto. Eu envio uma solicitação para obter os detalhes do produto, e então eu recebo também os detalhes da categoria para que eu possa exibi-los também na página do produto. Ele também funciona com a solicitação GET. Então eles entram em geral. Então, se eu quiser aqui ter toda a lista preenchida, então eu só digo preencher categoria de todas as listas de produtos. Eu pressiono Salvar, vou para o Carteiro. Eu recebo lista de produtos e IC eles já povoados. Alguns deles, eles não estão conectados a uma categoria. Eles são anteriormente nós os criamos. Então aqui, por exemplo, este produto, ele tem uma categoria e ele está conectado a alguma categoria no banco de dados. Então, como uma recapitulação, se alguém lhe perguntar como eu posso conectar tabelas MongoDB juntos como banco de dados relacional, Eu apenas criar um campo na tabela original. E então eu digo neste campo que eu quero um ID de objeto e ele é referenciado para o esquema que eu criei para a outra tabela. E, em seguida, quando estou criando uma solicitação GET, eu digo preencher este campo. Portanto, este campo deve ser um ID e, em seguida, ele irá preencher o que está relacionado a essa tabela. 28. Atualização uma API REST do produto: Então agora vamos atualizar nosso produto. Atualizar um produto é exatamente a mesma maneira como atualizamos uma categoria. Mas como vimos no post, precisamos apenas validar a categoria. Embora indo para categorias, vamos copiar todo o pedido PUT seria exatamente o mesmo. E então eu vou para o produto, eu adiciono a nova rota. E aqui temos o produto ou colocar ID. E então vamos fazer a mesma coisa, que fizemos para a categoria. Então vamos mudar isso para produto. Aqui está o produto, o modelo do produto. Encontre por ID e atualize. Temos os perímetros solicitados identificação de params e eu vou pegar os campos daqui. Vamos copiá-los o mesmo e colá-los aqui. Então temos todos os campos do produto, novo. Sim, queremos devolver o novo produto. Se não houver nenhum produto, envie uma solicitação incorreta ou erro interno do servidor e, em seguida, diga, o produto não pode ser otimizado. E também, se tudo estiver bem, envie o novo produto de volta. Só agora falta a parte onde precisaríamos validar a categoria. Então, novamente aqui temos a mesma coisa aqui. E então eu digo colar categoria de custo, e então eu estou pedindo categoria. E se isso não for categoria, envie categoria inválida para o usuário. Então vamos tentar agora com o Carteiro. Vou ao Carteiro, vamos copiar ou já temos os campos aqui. Então podemos mudar isso, começar a colocar. E aqui passo a ideia de que quero mudar. Então eu digo aqui, por exemplo, este ID. E então vamos mudá-lo para o produto um em novo. E aqui também descrição você e Ford exemplo. Vamos atualizar o preço 32. E é isso. Enviamos a solicitação de postagem e temos um erro aqui dizendo que é categoria inválida. Então vamos fazer a categoria certa. Então vamos aqui para as categorias API e pegar o caminho certo e atualizado aqui. E eles enviam, nós recebemos novamente o novo produto. Então vemos ou ouvimos o produto novo e a descrição está em U e com o novo preço. Então a única coisa que fizemos aqui que nós também, nós validamos a categoria. Então, no front-end, como veremos mais tarde, que teremos Fórum do produto. Então, quando eu clicar em Editar, então eu vejo os campos já preenchidos. Então eu apenas atualizo os campos que eu preciso e então eu envio esse pedido novamente. Vamos verificar também o banco de dados se tudo estiver atualizado. E depois recebo a lista de produtos. E vejo aqui que o produto tem uma nova descrição e um novo nome. E, claro, também, o seu preço. 29. Excluir uma API REST do produto: Além disso, excluir um produto é da mesma forma como excluímos uma categoria. Mas aqui eu quero mencionar algum ponto que é muito importante para validar nossa API. Vamos primeiro copiar também que excluir solicitações de categorias. Vou pegar este e, em seguida, colá-lo aqui na API do produto ou rotas do produto. Nós substituímos tudo para o produto. Tudo é substituído. Então, agora temos todos os estados. E vamos tentar agora. Vamos pegar uma lista de produtos. Teremos todos esses produtos. Vamos remover os antigos porque eles estão vazios. Então, podemos selecionar um dos IDs, alterar isso para excluir, e enviar essa solicitação. Agora passa e o produto é excluído. O que quero mencionar aqui é algo muito importante. E daí se eu mandar uma má identidade como esta? Eu vou ver que eu vou obter o erro de que o ID do objeto não é válido. Portanto, precisamos também validar o ID do objeto em todas as solicitações. Então, neste caso, pegamos um erro. Mas aqui no pedido PUT, esse pedido não há qualquer captura do erro. Estamos apenas verificando se estamos recebendo um produto ou não. Mas aqui está a verificar a identificação, por isso vai pendurar de alguma forma. Então vamos mudar isso para a solicitação PUT e fazer um problema no, no ID. Por exemplo, removo este e, em seguida, envio uma solicitação e vejo que o back-end está pendurado. É por isso que prefiro mais assim, a maneira prometida. Para que eu possa dizer sempre o que posso ver, o que eu posso obter e o que eu posso pegar. Mas se você quiser manter desta forma, então também não podemos validar apenas a categoria. Podemos validar a identificação. Como podemos fazer isso? O ID deve ser o tipo de ID de objeto que é armazenado em Mangusto. Então aqui vou começar primeiro a fazer uma constante. Exigir mangusto. Este mangusto constante. Ele tem um método onde eu posso usá-lo na solicitação PUT. Então eu não posso dizer ponto Mangusto é ID de objeto válido, então eu posso passar, em seguida, a solicitação dot params dot ID. Então, se isso é válido, então eu continuo. Caso contrário, retornarei uma resposta sobre o erro. Então, como vemos aqui, isso está devolvendo um booleano. Então vamos colocá-lo dentro de um “se”. Então eu digo aqui se Mangusto. Então eu vou enviar também um pedido ruim desta forma e eu digo ID do produto inválido. E neste caso, o produto ou a API retornará para mim erro quando eu estiver passando junto ID. Vamos tentar agora. Temos identificação errada. Vejo que não retornei nenhum erro. Isso é porque eu disse se é válido, em seguida, retornar erro, então eu não deveria ter válido, então eu adicionar não. Então vamos voltar novamente e enviar o pedido novamente. E recebo o ID do produto inválido de erro. 30. Obtenha contagem de produtos para fins de estatística: Bem-vinda de volta. Às vezes, no painel de administração, eu quero mostrar ao administrador quantos produtos eu tenho no banco de dados. Então, neste caso, eu quero ver uma API que está me devolvendo todos os produtos ou quantos produtos eu tenho no banco de dados. Então, ele retornará apenas um número. Mangusto tem muitos métodos. Assim, com base nesses métodos, você pode retornar qualquer consulta que desejar com uma API. Por exemplo, em Mangusto, você pode ter do produto modelo qualquer método que deseja retornar. Assim, você pode criar sua própria API com base no que Mangoose fornecer a você. Não vou contar os produtos. Quero o preço total dos meus produtos. Eu quero, por exemplo, total ou preço dos pedidos, total de vendas, quaisquer estatísticas que eu quero ter no meu front-end, por exemplo, eu quero ter painel de administração. No futuro. Vou mostrar-lhe isso com algumas estatísticas. Então, para isso, você precisa criar API, que é obter normalmente para obter o que você quer do banco de dados. Então vamos adicionar um novo aqui, como roteador dot get. Seria GetMethod, claro. E, em seguida, dizer, por exemplo, obter contagem de barras. Assim, a API será depois que os produtos recebem contagem. Então, o segundo parâmetro, será o mesmo que GetMethod. Então vamos copiar este da mesma forma e mudar a estrada lá. Então eu digo obter contagem, eu tenho resposta assíncrona e aqui eu preciso mudar com base no que Mangusto me dá. Então, criamos uma constante, chamamos de contagem de produtos. E aqui eu excluiria até o final e dizer, por exemplo, há um método conjunto de documentos contagem. Então eu quero ver quantos documentos neste modelo ou nesta tabela. Então contar documentos e, em seguida, ele irá retornar a contagem ou como um retorno de chamada. E então eu digo apenas devolva a contagem. Então eu recebo a contagem e devolvo. E então os documentos de contagem foram devolvidos para mim, a contagem de produtos. Então aqui eu digo, se não houver contagem de produtos e, em seguida, retornar um erro para o usuário, senão, enviar a contagem de produtos. É isso. Normalmente devolvemos um JSON. Então, por exemplo, eu digo aqui, contagem de produtos é uma contagem de produtos, ou, por exemplo, eu digo que apenas contagem é contagem de produtos. Você tem liberdade aqui para escolher qualquer nome. Prefiro este. Vamos testar que nós supostamente homem, eu vou para Postman e então eu digo produtos GET método, obter contagem. E nós executamos isso. E vemos que a contagem de produtos é três, então é realmente três. Vamos verificar isso. Sim, eu tenho primeiro 1, segundo, 1, terceiro 1. Isso é fixe. Então, agora podemos mostrar ao administrador quais produtos ou quantos produtos ele tem em sua palestra. 31. Obtenha uma lista de produtos de REST: Outra solicitação de estatísticas pode ser, por exemplo, eu quero os produtos em destaque, como vemos aqui na página inicial deste site. Estamos vendo alguns produtos em destaque que são exibidos sempre na página inicial. Então, anteriormente no modelo de produtos, tínhamos algo ou algum campo chamado é destaque. É destaque tem um valor booleano como true ou false. Isso significa que este produto deve ser exibido na página inicial ou não. Agora vamos fazer uma API para obter apenas os produtos em destaque. E para torná-lo mais complexo, podemos ter conta. Então, por exemplo, eu posso obter três produtos em destaque ou últimos três produtos em destaque ou últimos seis produtos em destaque. Vamos fazer isso agora. Portanto, qualquer solicitação GET é como começar com router.get. Então vamos copiar este e criar nossa API em destaque. Ou, em vez de começar a contagem, vamos dizer, ficando em destaque, produtos em destaque, por exemplo. Então, em Mangusto, precisamos encontrar os produtos em destaque. Apenas, nem todos os produtos, apenas o destaque. Então eu digo aqui, produtos ponto encontrar. E como você se lembra antes, tivemos alguma filtração. Nós acabamos de falar sobre isso, mas veremos como construir um filtro com o produto. Então, de qualquer maneira, então agora eu acho que ele está aceitando como objeto e então você pode definir quais campos são necessários para ser o valor. Então, por exemplo, eu digo que é destaque deve ser um verdadeiro. Então, todos os produtos que tem apresentado através, então eu vou obtê-los. Então aqui tudo ficar o mesmo é feito apenas o objeto. Então ISA aqui acabou de devolver para mim os produtos. Então eu digo aqui produtos, produtos, produtos. Agora vamos verificar isso com o Carteiro. Eu vou aqui, eu digo Obter recurso. Então nós enviamos e temos apenas um produto em destaque porque temos apenas um produto em destaque em nossa API, então em nosso banco de dados. Então, se verificarmos aqui, então o primeiro tem, é falso. O segundo também é falso, mas o último é apresentado. Ok, então agora eu não quero sentir a minha página inicial que apresentou produto, por exemplo, eu tenho como esta página, por exemplo, eu tenho 200 recursos produtos. Então eu não vou apenas, por exemplo, cinco produtos. Para fazer isso, podemos merecer também alguma limitação à nossa API com base no que o usuário está enviando. Por exemplo, posso adicionar aqui, como vimos antes, podemos adicionar qualquer parâmetro como antes, adicionamos um ID. Mas aqui podemos adicionar contagem, por exemplo. E então aqui eu vou conseguir essa contagem. Contagem é igual a solicitar os parâmetros porque seu parâmetro e contagem. Então, se houver contagem de pontos de solicitação ou solicitar uma contagem de pontos de parâmetros de torque, se o usuário passar algo, em seguida, obtê-lo. Caso contrário, retorne 0. Então isto é como se estivesse aqui. Então, se há contagem passado com a API, em seguida, obtê-lo. Caso contrário, retorne 0. Portanto, esta contagem pode ser este valor ou este valor. É exatamente como a declaração IF. Então, como vamos usar essa contagem? É muito simples. Depois que eu encontrar o que eu quero, apenas o produto em destaque, Eu digo contagem limite. Então vamos tentar isso com o Carteiro. Nós dizemos para ser destaque. E então a contagem que eu quero, por exemplo, três, então eu vou enviar esse pedido. Nós não vamos é que ele está pendurado. Portanto, há um erro. Vamos verificar qual é o erro. O erro está dizendo aqui que o campo incapaz de analisar produtos de busca é apresentado através do limite de rejeição três, Return key false. Então, por que isso está acontecendo? Campo Limite deve ser numérico, mas nós o temos numérico aqui. Porque isso, porque aqui, esta solicitação dot powerapps dot count está retornando, como você vê aqui, uma string. E isso também será uma string. Então temos aqui um valor de string, não um número, porque limite é pedir um número. Então, para mudá-lo para facilmente para um número, basta colocar um plus por trás desta bebida. Então, agora, depois de salvar e reiniciar, o servidor, pede nossa API. Nós vamos obter o produto em destaque. 32. Filtrando e recebendo produtos por categoria: Continuando com a filtragem, Vamos ter também filtragem por categorias. Então, quando o usuário seleciona algumas categorias específicas, ele vai obter os produtos que estão nessa categoria. E isso é filtragem normal em todas as oficinas. Então, precisamos de alguma forma ajustar a solicitação GET ou obter solicitação de lista de produtos para ter filtragem por categoria. Mas primeiro, preciso falar sobre algo que experimentamos antes. Dois tipos de parâmetros que podemos enviar para o backend. O primeiro é o parâmetro URL. Assim, o usuário pode enviar qualquer ID depois que eles, você está doente ou no parâmetro corpo. Então, temos corpo. E dentro deste corpo existem alguns parâmetros, e também com a URL. Então, temos outro tipo de passagem de valores para o backend, que é chamado de parâmetros de consulta. Os parâmetros de consulta são usados sempre. Nesse caso, por exemplo, eu tenho URL API, URL localhost e, em seguida, passo o parâmetro de consulta. O parâmetro API é passado assim, então eu posso passar aqui número, mas o parâmetro de consulta está indo sempre após um ponto de interrogação. Então eu não posso dizer sempre que eu preciso aqui de uma categoria. Então, como vimos antes que também podemos filtrar no método find. Então, depois de passar o modelo e, em seguida, encontrar, podemos passar objeto como fizemos antes. Como é apresentado como um dos campos deve ter este valor. Mas agora vamos torná-lo como categoria. Então este Find devemos ter categoria e com um ID específico que é passado pelo usuário. Mas como podemos torná-lo múltiplos valores, porque aqui eu posso ter apenas um único valor. É muito simples. Você pode apenas passar uma matriz e automaticamente mangusto vai perceber que todos esses valores devem estar nessa categoria. E, em seguida, isso irá retornar os produtos certos que tem essas categorias melhores. Então eu não posso dizer aqui algo como isso, primeira categoria e segunda categoria ID. Então vamos fazer isso aqui como algo diferente. Então, para ser mais diferente. Então agora precisamos pegar de alguma forma este parâmetro de consulta e dividi-lo em uma matriz e, em seguida, passá-lo para este achado. Então, é muito simples. Eu digo que se houver um ponto de solicitação, categorias de ponto jquery, que é este, então vamos armazená-lo em alguma constante. Const, por exemplo, filtro. E este filtro, teremos as categorias de consulta de ponto de solicitação de valor. E vamos dividir esse valor. Então dividimos por vírgula. Então nós dizemos dividir, dividir a string com base em vírgula, e então ele vai retornar para mim para itens na matriz, que é uma string e a outra. Então, simplesmente, podemos colocar esta variável aqui porque nós a dividimos como matriz. Mas por causa do escopo em JavaScript, não podemos atribuir esse valor ou usa valor fora disso se, porque outros campos não podem vê-lo. Então, é melhor criar a variável aqui e dar-lhe como matriz vazia. E essa variável, eu atribuo a ela a divisão, e então eu estou usando isso aqui. Vamos tentar isso com o Carteiro. Então eu fui aqui e tentei pegar o produto. Não recebo nada porque estou forçando a API a ter categoria. Então, quando não há nada, então ele deve ter uma categoria. Então vamos ter uma maneira mais dinâmica. Eu faço isso como objeto vazio. E este objeto vazio será atribuído e tem valor quando há parâmetros e ou parâmetros de consulta. Então diga que eu digo categoria é esta. E então este filtro, eu removo todo esse objeto e então ele será passado para a multa. Então, quando está vazio, não há nada. Então eu vou pegar toda a lista do produto. E quando há parâmetros de consulta, ele seria preenchido com categoria, que é nossa condição, e ele terá esse valor do usuário. Vamos tentar de novo. Agora. Eu envio esse pedido, legal. Eu tenho todos os produtos anteriormente. Criei alguns produtos, por exemplo, produto 1 e produto 2 e produto 3. E eles têm de diferentes categorias, por exemplo, essa categoria e essa categoria. Então eu digo aqui, categorias de pontos de interrogação. E o valor dessas categorias. Vamos pegar a primeira categoria. Por exemplo, este aqui. E eu envio, e então eu tenho duas categorias ou dois produtos. Então esses dois produtos, eles pertencem a esta categoria. Vamos adicionar outro. Por exemplo, o segundo, dividindo-os com uma vírgula. Então eu digo aqui. Então temos 123. O primeiro produto é da segunda categoria, e os outros dois produtos, eles são da primeira categoria. E quando eu passar nada, então ele funcionará normalmente para obter toda a lista dos produtos. Então, aqui o usuário tem a opção de passar os parâmetros de consulta ou não. Então agora na minha página inicial, eu posso ter, por exemplo, alguns banners que estão exibindo alguns produtos específicos de categorias e também o usuário quando ele vai para a página do produto, você também pode filtrar esses produtos por categoria. Por exemplo, será algo como caixas de seleção ou, por exemplo, algumas pílulas. Então ele pode clicar sobre eles e selecionar as categorias para as quais você deseja exibir os produtos. 33. Mudar a chave "_id" para o "id" — mais com fronts amigável: Quando estou recebendo um produto ou lista de produtos, Mangusto ou MongoDB está enviando o campo com o direito de como eu os fiz. Mas a identificação, tem um pequeno problema. Tem este sublinhado. Eu quero que o ID seja apenas ID como uma chave, para que eu possa usá-lo em todos os lugares em meus aplicativos, não apenas, por exemplo, para o aplicativo que estamos fazendo neste curso. Então eu posso usar este backend com outros aplicativos que normalmente estão aceitando principalmente o ID apenas como uma chave. De alguma forma. Mangusto, também podemos copiar este ID e criar um campo chamado ID apenas sem sublinhado. Então, como fazer isso? Chama-se virtuais. Então, com este esquema de produto, que criamos antes, sempre podemos criar uma ID virtual. E esta ID virtual terá um get. E este get será a partir do ID que é passado no esquema do produto. Então esta é uma maneira de como fazê-lo e para hexadecimal string porque temos strings hexa para o ID, que é chamado ID do objeto. E então precisamos habilitar alguma opção para o esquema do produto. E dizer que quando eu quiser enviar algum valor para o front-end ou para a API, nós habilitamos os virtuais porque este é um campo virtual. Então, em cada esquema, podemos adicionar essas duas ou quatro linhas ou dois métodos. E então teremos a identificação. Então, se tentarmos agora com o Carteiro, eu posso enviar. E eu vou dizer que eu vou ter o ID original e o ID que eu quero. Então, o shopping front end amigável, eu posso usar este ID diretamente sem este sublinhado incomodando. 34. Usuários e autenticação: Bem-vindo a um novo módulo. Neste módulo, vamos aprender como fazer a autenticação e criar a API de usuários. Vamos obter informações rápidas sobre como criar todo esse processo e como proteger nosso back-end. O conceito que é seguido em cada servidor ou servidor de autenticação é o seguinte. Primeiro, o usuário está fazendo login usando seu ID ou e-mail e senha. E, em seguida, o servidor de autenticação irá respondê-lo com autenticado. Se ele tiver as credenciais certas. E gt, que é chamado JSON Web Token. E este token será devolvido ao usuário. Assim, o usuário pode usá-lo para obter as outras APIs como produtos e pedidos. E, claro, o usuário não tem todos os direitos de fazer o que ele quer com o back-end. Assim, podemos diferenciar entre os administradores e os usuários, mas eles estão na mesma tabela. Assim, alguns usuários terão uma habilidade especial para fazer alguns produtos criando, criando pedidos, removendo ou alterando o estado do produto, etc. Então, quando o usuário tem esse token, ele pode passá-lo com qualquer chamada de API, por exemplo, criando um produto para o servidor e para a API que criamos anteriormente. E então o servidor vai dizer, Sim, você está verificado e você pode fazer a chamada API. Então eles usuário aqui ou o servidor aqui, estamos resposta ou com autenticado, você é. Está bem. Você recebe a resposta, você recebe o que você fez. Além disso, se não houver autenticação, o servidor está respondendo como se você não fosse um usuário autenticado para fazer essa chamada de API. Assim, nas próximas palestras, veremos os principais passos como o seguinte. Então, primeiro vamos dar uma olhada no modelo do usuário e esquema. Então, podemos criar exatamente o esquema que precisamos para os usuários. Exatamente como fizemos antes com os produtos. E, em seguida, vamos postar todos registrar um novo usuário com uma API de descanso. Então, quando temos um usuário em nosso E-sharp, então vamos registrá-lo e então ele pode fazer suas encomendas. Hash da senha do usuário. Claro, não vamos salvar a senha no banco de dados exatamente em que é? Então temos que fazer com que a senha de alguma forma seja hash. Então, se houver algum ataque e alguém avisou um banco de dados, então eles não usarão a senha de usuário novamente em nossa loja virtual. Em seguida, vamos ver como obter usuário e lista para obter lista de usuários, mas estamos excluindo a senha. Então, vamos aprender como excluir partes de nossas APIs e, em seguida, atualizar os dados do usuário com e sem senha. Por isso, às vezes, um utilizador quer actualizar o seu perfil. Então eu só quero mudar meu nome, certo? Quero mudar o meu endereço. Então eu só digo que eu quero atualizar esses dados, mas eu não quero atualizar minha senha. Mas também quando eu esqueci minha senha, eu posso redefini-la. E então, neste caso, vamos atualizar os dados do usuário com a senha. Em seguida, vamos para a parte importante onde vamos proteger as APIs. Assim, por exemplo, nenhum usuário é capaz de criar um produto. Só o administrador. Além disso, nenhum usuário é capaz de alterar o estado da ordem, apenas os elementos. Então, vamos ver como proteger essas APIs. Assim, o usuário não pode enviar qualquer solicitação somente se ele é, ele é autenticado. E, em seguida, veja como procurar no usuário depois que criamos esse usuário. Assim, a pessoa pode entrar na loja e obter um token para que ele possa usá-lo para obter um produto ou fazer um pedido. Além disso, como conversamos antes, talvez o servidor possa responder com erro de autenticação. Então, quando você está solicitando uma API e você não está autenticado, então você receberá um erro. Vamos ver como lidar com isso. Além disso, somos apenas fatura para adicionar mais informações secretas para o usuário, então através do token. Assim, também podemos especificar ou diferenciar entre os usuários e os administradores. Então podemos dizer algo como é admin, mas onde eu posso esconder essa informação. Porque se eu colocá-lo como um avião, então todo mundo pode mudar os dados e dizer, eu sou administrador e ele não pode ter acesso. Mas aqui vamos esconder o token de é admin dentro do token. Também no final para estatísticas, como sempre fazemos, temos a contagem de usuários ou quantos clientes temos em nossa loja virtual. Por enquanto, é isso. Então vamos começar com o esquema do usuário. 35. Modelo e esquema: Como tínhamos em nosso modelo de usuário antes, vemos que precisamos de um nome e e-mail e senha, etc Então vamos construir nosso esquema de usuários exatamente como temos neste modelo. À direita. Eu já os escrevi para que possamos revê-las rapidamente. E então você pode implementado a partir do código que eu vou enviar para os recursos. Primeiro, o nome do usuário é uma string e é obrigatório. Em segundo lugar, o e-mail é uma string e também verdadeiro necessário. E também o hash de senha. Nós dissemos que vamos salvar a senha com hash no banco de dados. Será uma string e é necessário. O número de telefone do usuário também será uma string ou um número. E com a verdade e é necessário. Aqui, vamos identificar o usuário se ele é administrador na loja ou não. Então será um booleano e o valor padrão é false. O endereço que será usado para enviar a ordem do usuário. Então, podemos usar uma rua como uma string, eo padrão é o valor vazio. Apartamento também é String. Código postal é uma cadeia de caracteres, cidade e país. E no final temos um esquema de usuário, como fizemos anteriormente com os produtos, criamos um ID virtual. Então conseguiríamos identificação dessa maneira, não dessa maneira. Então, é mais amigável para usuário ou front-end. Então, podemos usá-lo no front-end como um ID normal para buscar dados do usuário ou identificar um usuário. E aqui nós habilitamos os virtuais para o esquema. E aqui a exportação normal do módulo e do esquema. Então isso é tudo sobre o esquema do usuário. Vamos passar agora para criar um usuário ou usuário registrado em nossa loja virtual. 36. Registre uma nova API de REST.: Nesta palestra, vamos ver como registrar ou postar um novo usuário como qualquer solicitação de postagem. Também podemos postar os dados do usuário no corpo da solicitação e, em seguida, enviá-los para o banco de dados. Então, para torná-lo rápido, Vamos copiar um dos pedidos de post que temos antes, por exemplo, a categoria. Então vamos copiar este e, em seguida, colá-lo em nosso módulo de rotas de usuário e começar a adicionar as solicitações de corpo com base no modelo que tínhamos antes para o usuário. Então vamos sentir todos esses campos como se os tivéssemos do front-end como normais e colá-los aqui em nosso pedido. Então, primeiro de tudo, vou ajustar isso para ser usuário. E aqui usaríamos modelo de usuário. E então vou esperar para salvar o usuário. E, em seguida, se não houver nenhum usuário, em seguida, responde com o erro de que o usuário não pode ser criado ou registrado. Então vamos adicionar os campos que precisamos agora. Então eu vou separar essas duas telas e, em seguida, eu vou adicionar meus campos aqui. Então, nome, o mesmo nome. E e-mail será e-mail. E aqui o e-mail do corpo. Vamos fazer rápido para o resto. Agora, nosso novo modelo de usuário ficará assim. Então eu coloquei todas as chaves ou todos os campos, que eu obtive do esquema. E lá eu assumi que estou recebendo isso do corpo do pedido. Então este amigo e pedido virá do carteiro ou do front-end. Como veremos a seguir. Vamos tentar isso com um carteiro agora. Então vamos criar um objeto, por exemplo, e eu vou atribuir um usuário e um hash senha e todas essas informações nesse objeto. Então, qual será a rota completa para isso? Será a rota da API e, em seguida, os usuários. Por quê? Porque no app.js, tínhamos antes, todas as rotas de APIs são definidas aqui. Então eu estou dizendo produtos AP US e, em seguida, eu atribuir as rotas de produtos. E então aqui teremos usuários. Então, em nossa API, vamos usar usuários. Então, indo para o front-end, Vamos copiar uma das APIs que tínhamos antes e colá-lo aqui. E aqui. Em vez de produtos, diremos usuários. Isso é perfeito. Então vamos adicionar um post. E então, no corpo, adicionaremos uma linha. E o tipo dessa linha é JSON, porque o usuário enviará os dados em um formato JSON. E então vamos criar nosso objeto aqui. Então eu diria o nome, e eu atribuo qualquer nome, por exemplo, James, e a mesma coisa para o resto. Então vamos senti-los. Então temos aqui a senha hash, o número de telefone, o administrador, Sim ou não, apartamento, CEP, cidade e país. Então, neste caso, teremos um usuário que tem essas propriedades. Não devemos colocar a senha assim. Então temos que hash, como veremos na próxima palestra. Então eu poso os dados agora e recebo todas essas informações. Então temos aqui nome do que nome de usuário, e os dados e todas as informações que inserimos. E também a API respondeu com ID e ID de sublinhado. Assim, o usuário criou no banco de dados. Vamos checar nosso banco de dados no Atlas. Então, quando vamos para o nosso cluster e, em seguida, coleções, eu vou acessar nosso banco de dados, que é usuários ou banco de dados e-shop e os usuários da tabela. E vamos ver o usuário é criado aqui. Acho que perdi um campo que não é enviado com a API, então temos que adicioná-lo. Então vamos adicioná-lo aqui, que é rua. Então colocamos três também, e é 3s. Por exemplo, 100. Vou adicionar usuários diferentes com nomes diferentes para sentir nosso banco de dados. Então eu vou dizer James, por exemplo, eu diria Tom e Tom aqui. E a mesma senha, vamos supor que ele tem 777 aqui e o mesmo endereço, por exemplo. E vamos enviar, enviar. Teremos também o mesmo que também outro usuário como Mike. Teremos aqui, Mike pequeno M. e também a mesma informação como digamos aqui 88. E o número da rua, por exemplo, cinco, o apartamento é 4. Então, neste caso, em nosso banco de dados tínhamos três usuários. Como veremos aqui. Estou refrescando a página. E veremos aqui que temos três usuários. 37. Como cortar a senha de usuário: Salvar a senha, neste caso como um texto simples não é seguro porque se alguém tem de alguma forma nosso banco de dados, ele verá a lista de todas as senhas de todos os usuários em nosso banco de dados. Então, é melhor de alguma forma para hash ou codificado alguma forma para que qualquer um não possa entender o que é isso, a senha real por trás deste hashing ou é codificação. Para fazer isso, há uma biblioteca, que é fornecida pelo NodeJS. Chama-se descriptografar os JS. Podemos instalá-lo aqui em uma nova janela. Então MPM instalar ser preso JS. E eu vou instalar esta biblioteca e, em seguida, importá-la no meu aplicativo. Então eu diria causado, ser agarrado e exigir descriptografar JS. Então, como vamos usar esta biblioteca? Então eu não vou pedir ao usuário ou ao front-end para um hash de senha. Vou pedir uma senha normal, mas internamente no meu back-end, vou criptografar essa senha. Então aqui eu vou dizer ser crypt dot, hash sync. E, em seguida, Hash Sync irá pedir uma string e também algo chamado sal. O sal é, por exemplo, como informações extra secretas para que qualquer pessoa não possa descriptografar esse hash. Então, por exemplo, vou acrescentar aqui o meu segredo. Você pode adicionar qualquer segredo. Por exemplo, você pode dizer meu cigarro. Você pode adicionar qualquer coisa. Vou adicionar aqui, por exemplo, número, é 10. E não vou pedir ao usuário um hash de senha, mas vou pedir-lhe simplesmente uma senha. Vamos tentar isso agora e vamos ver o que o servidor ou o backend nos responderá depois de criptografar a senha. Então, aqui, vamos criar outra senha de usuário, não hash de senha. Então, será de um a seis também. E ele tem algumas informações como tínhamos anteriormente. Não vamos torná-lo administrador, por exemplo. E eu vou enviar, e vamos ver aqui o hash de senha como este. Então não é exatamente o que o usuário enviou. Então, vamos usar de alguma forma quando fazemos login, vamos comparar este hash com a senha que o usuário usou quando ele bloqueou. Isso também será feito pela biblioteca descriptografar. Então agora temos um back-end seguro ou objeto seguro do usuário para que ninguém possa resolver ou descriptografar essas informações. 38. Obter uma lista e lista dos usuários excluindo senha: Como vimos antes, que criamos solicitação GET para obter lista de usuários. E também podemos criar a mesma coisa para obter um único usuário. Então copiá-lo de categorias também. E eu vou mudar essa categoria de usuário. Então, desta forma, temos uma lista de usuários e obter um único usuário. Vamos tentar isso com um carteiro. Eu vou aqui e não vou conseguir um usuário que tenha sua identidade. Há assim e eu não vou listar os usuários. Então eu os pego assim. Temos um problema de segurança aqui. Eu não quero enviar a lista de usuários com seu hash de senha. Portanto, é melhor enviar a API ou os campos API sem senha Hash. Como podemos fazer isso? Anteriormente, vimos que podemos excluir algumas partes da nossa API ou alguns campos. Como fazemos isso depois de chamar o método find, colocamos Select e, em seguida, eu pressionar Minus, e, em seguida, com menos, eu posso especificar qual campo deve ser excluído. Por exemplo, aqui neste caso, direi hash de senha. E, em seguida, quando eu chamar a API, eu vou ver que eu tenho campos sem hash senha. Vamos fazer isso também para o único usuário. Vou colocar aqui selecionar, ou podemos copiar isso diretamente. Ele também funciona com find by ID, como com find e width, find by ID. Salve isso. Experimente. E vamos obter, por exemplo, esse usuário com esse ID que eu postei aqui. E vemos que temos esse usuário sem qualquer hash de senha. Nós também podemos, ao obter lista de usuários, por exemplo, no painel de administração do meu aplicativo, eu só quero exibir o nome do usuário e, por exemplo, número de telefone e e-mail. Então, neste caso, você pode criar uma API que tem apenas esses campos. Então você pode selecionar não com menos, mas você pode dizer nome, telefone, e-mail. Então, você receberá apenas esses campos com esta solicitação desta API. Então vamos pegá-los. Só temos nome, e-mail e telefone. Isso é muito útil quando você quer, por exemplo, quando você tem uma lista de bico e, em seguida, esta grande lista, você quer reduzi-la. Então você deseja apenas selecionar um campo específico que você deseja usar no front-end. Vamos colocá-lo de volta para hash de senha. Então eu quero apenas excluir o hash senha e obter lista de usuários com todos os seus detalhes. 39. Faça o login uma API de REST e criar um Token: Nesta palestra, vamos ver como o usuário pode fazer login e usar as APIs. Então ele é obrigado a ter seu e-mail ou ID e senha e , em seguida, enviá-los de alguma forma com API para servidor de autenticação. E o servidor de autenticação irá responder com GW t, que é JSON Web Token, e dizer que o usuário é autenticado e é capaz de usar as APIs que são protegidas. Vamos começar a fazer a primeira parte. Então, precisamos criar um pedido de post onde a pessoa pode enviar seu nome de usuário e senha para o servidor. Então, vamos primeiro criar uma solicitação de postagem em nossa API de usuários. Então eu vou dizer roteador ponto post, e então o caminho será login. E então vamos salvar um método assíncrono, a solicitação e a resposta. E teremos a chamada de volta aqui. Vamos fazer o login por e-mail. Então vamos esperar em sua resposta pelo e-mail e senha. Então, primeiro, precisamos saber se esse usuário existe. Eu realmente tenho um usuário com este e-mail. Então, primeiro, vou criar constante, dar-lhe usuário. E este usuário terá um método de peso, exatamente como fizemos antes do usuário e encontrar um. Quero encontrar o usuário por e-mail. Então eu vou dizer aqui, encontrar um, e então será objeto. Posso atribuir o campo pelo qual quero pesquisar o usuário. Por exemplo, eu quero pesquisar por e-mail. Então, aqui vou dizer e-mail. E esse e-mail virá do e-mail de ponto do corpo do pedido. Então aqui eu tenho o usuário já que são enviados para bloquear pelo e-mail. Então, se eu receber um usuário ou se eu não receber um usuário, eu enviarei erro. Então vamos fazer que o usuário de retorno ou status de ponto de resposta para 100 pontos final. E então diremos que o usuário não foi encontrado. Caso contrário, enviarei a resposta que o usuário foi encontrado. E será no objeto areia como usuário. Vamos tentar isso para ter certeza de que isso está funcionando. Então aqui eu preciso de um pedido de post, eu removo isso, e aqui teremos um login. E então não precisamos de tudo isso. Só precisamos do e-mail, como dissemos, e da senha do usuário. Então aqui eu vou ter senha. Por exemplo, digamos 1, 2, 3, 4, envie-o. E, em seguida, vamos obter este usuário realmente existe com este e-mail. Vamos cometer um erro no e-mail. Você faz dois, por exemplo, eu vou obter o usuário não encontrado. Então estamos no caminho certo agora. Então encontramos o usuário que queremos fazer login. Para fazer login em um usuário, precisamos comparar a senha que ele inseriu e com a senha que já existe no banco de dados. Mas já temos uma senha com hash. Então precisamos de alguma forma infeliz ou decodificar esta senha e, em seguida, compará-la com a senha que você enviou pelo usuário. E então eu digo, ok, você está certo, você está autenticado. Então, depois de ter certeza de que eu tenho um usuário no meu banco de dados com esse e-mail, eu quero verificar se há usuário que temos antes e descriptografar Com compare cantar, eu não posso comparar duas senhas com o hash. Então eu vou dizer que request dot body dot password, que é enviado pelo usuário e, em seguida, compará-lo com o usuário dot password hash, como o usuário, que eu encontrei com sua senha hash. Então, se essa compactação for bem-sucedida, eu direi, por exemplo, enviado para o backend ou para o front-end. Vamos dizer, por exemplo, status de ponto de resposta, por exemplo, para um usuário de envio de 100 pontos. Senão. Apagamos esta parte. E dizemos, por exemplo, com 400 e dizemos que a senha está errada. Vamos tentar isso. E aqui, por exemplo, eu tenho essa senha, nome de usuário. Eu diria que a senha está errada, mas você se lembra que temos a senha dessa maneira de um a seis e o usuário foi autenticado. Então, quando a senha está errada, temos a senha está errada. Então agora chegamos à parte importante. Então vimos antes que o servidor responderá com token web JSON. Então, de onde eu vou obter JSON web token no back-end. Em Node.JS, há uma biblioteca chamada JSON Web Token. Então precisamos instalar esta biblioteca. Então eu vou para a outra janela que eu tinha quatro para instalação, eu diria npm I. E então JSON Web Token. Instalar esta biblioteca me dará a capacidade de usar JSON Web Tokens. Então vamos tê-lo em nossas constantes ou importações podemos dizer, ok, AVT faculdade exigem JSON web token. Então eu posso usar essa variável agora ou constante para gerar o JSON Web Token. Como fazer isso? Então, quando o usuário é autenticado e tudo correr bem. Então eu vou dizer const token. E então eu usaria esta biblioteca JSON Web Token, esse sinal há um método lá. E este método aceitando o objeto, objeto com uma carga útil e segredo, que é chave secreta ou privada. Vamos falar sobre o segredo. Então este JVP, aquele sinal como vimos antes, está pedindo por objeto. E este objeto terá, por exemplo, você não pode passar nada. Posso dizer, por exemplo, ID de usuário. E o ID de usuário terá, por exemplo, ID de ponto de usuário, o usuário que eu tenho aqui, e com seu ID. Então aqui você pode passar os dados que você deseja com o token. Vamos ver como resolver o token no front-end. E também como podemos comparar o token na API de autenticação. E aqui no segundo parâmetro, precisamos passar um segredo. Secret é algo como, por exemplo, uma senha que é usada para criar seus tokens. Então pode ser qualquer corda. Por exemplo, vou dizer, por exemplo, cigarro. E depois disso há opções. E nessas opções, podemos adicionar algumas opções ao token, como a data de expiração, que veremos mais tarde. E em seu pedido de envio de succes, enviaremos o usuário com seu token. Então eu vou dizer enviar usuário e usuário, por exemplo, e-mail que enviar apenas o e-mail eo token. Então, desta forma, o usuário obterá o token no front-end e poderá usá-lo para acessar a API. Vamos tentar isso. Então eu vou para o Carteiro. Vou usar o login. Novamente, temos a senha errada. Vamos colocar a senha certa. E depois recebi o e-mail e uma ficha. Então este símbolo é criado pelo segredo que temos aqui. Então você pode fazer o que quiser. E este segredo, ninguém sabe sobre ele. Assim, ele não pode criar um token como com os mesmos tokens que são usados em sua loja virtual. Então, neste caso, nenhum usuário enviar com a API, por exemplo, qualquer token, e então ele terá a resposta, resposta certa porque ele não tem o Segredo. Vamos ver como resolver o token com o segredo que criamos para que o usuário possa obter a resposta certa. Então, se você se lembra, nós temos aqui as variáveis de ambiente. Então aqui podemos colocar nosso segredo. Por exemplo, posso dizer aqui secreto. Meu cachorro é legal. Então eu digo aqui segredo. E vamos usá-lo aqui. Vamos dizer constante. E então digamos que segredo é processo, lote, variáveis de ambiente, ponto secreto, que eu criei aqui. Então vamos passar esse segredo em vez da string codificada. Vamos verificar novamente para ter certeza de que tudo está funcionando bem. Então temos um novo médico. Assim, às vezes você vê que quando você está bloqueado em um site no dia seguinte, automaticamente você está desconectado. Isso acontece porque esse token expirou. Então o servidor tem algum tempo de expiração. Então, quando você tenta usar esse token, novamente, o servidor responderá a você, desculpe, esse token expirou. Como definir o tempo de expiração? O terceiro parâmetro desta sinusoide, tem opções. E essas opções podem ser uma delas. Por exemplo, expire em, expire em, você pode especificar um dia, uma semana, um mês. Eu quero um dia. Eu digo um d. Se eu quiser uma semana, eu digo 1 w. Então normalmente, Vamos olhar, por exemplo, para a nossa oficina, temos o token para um dia. Quando eu voltar depois de um dia para usar qualquer API e eu estou carregando o token expirado, então o servidor vai dizer, desculpe, você não pode usar esta API porque ela expirou. Vamos salvá-lo. E veremos na próxima palestra como proteger nossas APIs. Assim, o usuário não pode usar qualquer IBI somente se ele tiver um token. 40. Proteção a API e autenticação JWT: Vimos antes como o usuário agora tem o token. Agora ele pode usá-lo para acessar os dados ou nossas APIs, mas como podemos tornar nosso servidor protegido. Portanto, ninguém pode usar a API sem um token. Como vimos antes em nosso app.js, tínhamos um middleware. E o middleware está verificando tudo, indo para o servidor antes de ser executado. Então, aqui neste ponto, eu quero verificar se o usuário está autenticado ou não. A sequência. Para fazer isso, normalmente, eu crio no meu, por exemplo, eu quero criar alguma pasta auxiliar. E na pasta helpers, vou criar um novo arquivo, chamá-lo por exemplo, GBT dot js. E há e há uma biblioteca chamada Express JWT, que é usada normalmente para proteger as APIs em nosso servidor. Então vamos instalar esta biblioteca, MPM express JWT. E vamos pedir por isso. Então eu vou dizer constante JWT expresso. E então exigirá JWT expresso. E a função de proteção será a seguinte. Então eu vou criar uma função, chamá-lo de Autenticação ou nosso JWT. E este método retornará DWT expresso como uma função. E esta função, tem opções. Falamos antes sobre o segredo. O segredo é baseado em alguma string onde podemos criar nosso token. Então, quando alguém passar qualquer token para o nosso, por exemplo, backend, precisamos compará-lo com o cigarro. Então, se o token for gerado com base nesse segredo, ele terá acesso à API. Mas quando seu token baseado em segredo diferente, então a API não funcionará. E como você se lembra, nós importamos esse segredo ou colocamos nas variáveis de ambiente. Então aqui vou dizer segredo const novamente e, em seguida, processar o ponto do ambiente segredo. Outra opção que precisamos passar também é o algoritmo está gerando este token. Se formos para o site do JWT io, veremos que o token pode ser gerado com base em muitos algoritmos. Aqui estão os mais utilizados. Para o exemplo, estou usando HS 256, que também a biblioteca JSON Web Token está usando. Então podemos ter, por exemplo, algoritmos é matriz HS 256. Agora exploramos esse método com o módulo, então dizemos que as exportações de pontos do módulo é o nosso JWT. Então, desta forma, seremos capazes de usá-lo em nosso app.js. Então aqui eu vou dizer para cima, não usar o nosso JWT vindo de constante de DWT, que é necessário. Ajudantes JWT. Então o middleware é usado agora. Agora nosso servidor é protegido com base no token. Então, qualquer pedido que viremos, seremos solicitados autenticação JWT. E então nós vamos aqui ou expressar JWT onde ele virou para nós. Se for possível que o usuário possa usar esta API ou não com base em seu token. Então vamos verificar agora se nossa API está protegida ou não. Então eu vou pedir um get da lista de produtos. Eu vou aqui, eu envio esse pedido e então eu vejo esse erro não autorizado. Portanto, nenhum token de autorização foi encontrado. Express JWT retornou para mim este erro. Então eu preciso de alguma forma lidar com esse erro e enviado para o usuário que precisava de dados. Mas primeiro, como podemos adicionar um token ao pedido. Normalmente adicionar um token com uma solicitação vem com autorização no Postman. E também no front-end, você precisa usar, por exemplo, um token de portador. E o símbolo do portador. Vamos precisar passar o token que você obteve após o login com o usuário. Existem diferentes tipos de autenticação que usaremos aqui, a maior. Então, antes tivemos também aqui o token depois que fechamos com um usuário Thomas. E aqui vamos passar este símbolo. Então, a autorização aqui vindo para esta API carregada com este token. Então, depois que eu enviar o pedido, eu vou chegar lá i dados. Se eu remover essa ficha, não farei isso. Eu não tenho qualquer autorização na frente e vamos ver como carregar token sobre a solicitação nos cabeçalhos. Então agora temos certeza de que nosso token está funcionando. Então vamos fazer uma mudança aqui. Erro de cometer. Veremos que no erro autorizado, token inválido. Então, temos erros diferentes aqui. Então precisamos lidar com esse erro de alguma forma. Veremos isso na próxima palestra. 41. Operação com erros de autenticação: Vimos anteriormente que temos alguns erros em nossa API. Então, precisamos lidar com esses erros para ser exibido forma mais bonita para o usuário ou o front-end. Erro de manipulação no RGS pode ser feito simplesmente desta maneira. Vamos para o middleware e dizemos AP US. E criamos uma função que contém erro como uma resposta de solicitação de retorno de chamada. E em seguida, neste caso, esse método será executado toda vez que houver um erro em nossa API. Então, aqui você pode verificar se há erro. Então você pode ascender, por exemplo, response.status. Como, por exemplo, digamos 500 e o JSON. E neste JSON EUA, por exemplo, uma mensagem e esta mensagem dizendo erro no servidor. Portanto, qualquer erro pode acontecer no backend será chamado com esta mensagem. Vamos tentar isso com o erro que obtivemos com a autorização. Então eu vou cometer um erro aqui neste símbolo. Então vamos ver aqui que temos erro no servidor porque temos um problema no token, mas não sabemos qual é o erro exatamente. Então, podemos classificar esses erros com base no tipo. Porque se nós imprimir este erro de alguma forma, digamos que em vez da mensagem, o sprint, este erro, um erro aqui e, em seguida, tentar, vamos ver que o erro tem um nome. Baseado no nome. Talvez eu possa classificar os erros ou podemos mantê-lo assim. Cabe a você, mas podemos torná-lo mais bonito da maneira atual. Mas primeiro, para ter um app.js limpo, Vamos mover este método para os nossos ajudantes. Então vamos criar arquivo aqui, chamá-lo manipulador de erros para JS. E nós criamos uma função, chamá-lo de manipulador de erros. E terá os mesmos parâmetros, erro, solicitação, resposta e próximo. E então podemos lidar com o que temos aqui. Então podemos pegar isso se colar aqui. E desta forma, podemos manter J o mais limpo possível. Então aqui temos que dizer manipulador de erros. E manipulador de erros é constante. Erro e aprendizado é necessário dos auxiliares e manipulador de erros. Assim, com base no tipo ou no nome do erro, podemos classificar nossos erros. Por exemplo, digamos que se o nome do ponto de erro, vimos anteriormente que temos um nome, um erro autorizado. Então eu retornarei aqui status 401, e o erro será como uma mensagem. Podemos dizer que a mensagem é, por exemplo, o usuário não é. Como veremos também no futuro, teremos tipo de erros que é chamado de erro de validação. Veremos isso mais tarde, quando vamos fazer upload de fotos. Ou dizemos que o nome do ponto de erro será, por exemplo, erro de validação. Então a resposta será a mesma que esta. Mas, por exemplo, vamos ser suficientes. Agora apenas com o erro, vamos mudar esta mensagem quando vamos fazer o upload das imagens e dos arquivos. E para erros gerais, é melhor lidar com isso também. Então nós temos aqui retornado status ponto resposta. E quando há algum general, podemos dizer que é um erro do servidor, então é 500. E, em seguida, no JSON, eu envio a mensagem como erro. Ou você pode enviar o erro diretamente sem uma mensagem. Aqui, vamos nos preparar para voltar e voltar aqui também. Portanto, agora temos um manipulador de erros para nossa autorização e validação. Agora na frente, quando eu fizer uma sincronização não autorizada. Então, quando eu pedir uma API sem qualquer token, então eu obterei esse erro. E se eu fizer, Por exemplo, Eu carrego um PDF e eu não tenho permissão para carregar um PDF para o nosso Thurber, então eu vou obter o erro de validação. E também se não houver erro classificado aqui, então teremos o erro em geral como uma mensagem no JSON. É bom ter alguns comentários sempre no código. Então você pode jogar alguns comentários para explicar que tipo de erro é este. 42. Excluindo o Excluding API de roteadores da autenticação: Bem-vindo de volta. Agora temos uma API totalmente segura, então ninguém pode usá-la sem autenticação. Então, neste caso, o usuário, quando ele queria olhar, ele deve ser autorizado. Então isso não é lógico para nós. Assim, o usuário pode ser capaz de usar um login para obter um token. Então, neste caso, precisamos excluir de alguma forma esta API de ser autenticada. Então aqui no Express JWT, eu não posso dizer a menos que. E neste, a menos que eu tenha objeto onde eu possa localizar empático é todas as APIs que eu quero excluir. Por exemplo, vamos excluir o login. Faça isso. Preciso especificar todas as APIs que eu quero que elas sejam excluídas. Então eu posso dizer aqui, barra api, v1 barra usuários e login. Então eu quero que este seja executado. Vamos tentar que agora é o Carteiro. E ainda não estamos autorizados. Isso é porque eu preciso adicionar outra barra aqui. Então vamos de novo ao Carteiro. Tentamos e temos o token novamente. Então você tem que ter cuidado para ter a barra aqui. Então, também podemos adicionar o registro. Eu já acrescentei que apenas a API, que é exatamente como o post. Então aqui nos usuários, eu tenho o registro de postagem, que é exatamente o mesmo que post. Assim, o usuário também pode registrar uma conta na loja virtual. E aqui é usado para o administrador que deseja remover ou adicionar usuários. E quanto aos produtos? Produtos Além disso, eu preciso de alguma forma obter o produto gratuitamente sem autenticação. Portanto, não preciso que o usuário seja autenticado para obter o produto, porque não quero que as pessoas façam login. Então eles podem ver minha loja na internet. Preciso deles para obter a lista de produtos sem qualquer autenticação. Então, como podemos fazer isso, precisamos especificar o método, o método HTTP. Então eu posso dizer imprimir apenas que pedidos GET, mas não permitir post. Caso contrário, as pessoas poderão publicar produtos na minha loja web. Então, para fazer isso, este método caminho aceitando Um objeto e este objeto tem um primeiro campo como uma URL. E o segundo campo é os métodos. E URL, eu posso especificar o URL como temos aqui. Mas em vez disso, usarei produtos. E os métodos serão obtidos, por exemplo, e opções. E isso será um array. Então vemos aqui nós especificamos a URL da API, e então nós especificamos os métodos. Vamos tentar isso. Eu vou aqui para obter a lista de produtos. Sem autenticação. Funciona perfeitamente. E quando eu remover isso, não vai funcionar. Então, é melhor tê-lo assim para o usuário possa obter a lista de produtos no front-end. Refatorei aqui o código, para que fique mais bonito. Então aqui temos a variável API, que é obtê-lo a partir da variável de ambiente. E aqui estou eu usando contractores para injetar a variável dentro da força. Mas agora temos um problema. Você se lembra? Nós tínhamos antes nas APIs para produtos, nós criamos métodos como, por exemplo, obter destaque e obter destaque. Nós também precisávamos ser públicos porque eu quero mostrar o produto de recursos no meu front-end sem autenticação do usuário. Então aqui, se eu quiser experimentá-lo, eu vou para o Postman postado aqui e eu digo três produtos em destaque. Não serei autorizado. Neste caso, precisamos especificar também este URL aqui. Mas então teremos uma lista muito longa de APIs, especialmente no momento em que temos loja web muito grande. Porque precisamos de muitas APIs. Não só dizendo, por exemplo, me dê o produto de recurso ou me dê a contagem de produtos. Então, a coisa boa aqui que eu posso usar string STD assim, eu posso usar expressões regulares. Expressões regulares estão me dando a capacidade especificar tudo após os produtos, por exemplo. Então aqui com esta corda, eu posso ser capaz de usar esta. Então, porque aqui temos eu tenho esta estrela. Então, qualquer coisa após os produtos funcionarem. Então agora depois que eu construí meus rejeitos, então aqui eu digo API barra, v1 barra produtos. Aqui está escapando Slash. Por isso, não entrará em conflito com a barra que temos de definir. Este assunto é sobre expressões regulares. Então você precisa saber mais sobre essas expressões regulares. Estou usando sempre rejeita testador, que está sempre localizado online. Esse é um lindo site chamado Regex 101. E aqui você pode testar suas expressões regulares. Então aqui eu vou pegar este e experimentá-lo naquele site. Então eu digo aqui, algo assim será permitido, mas se eu cometi um erro aqui, então não será permitido. Então é exatamente essa fórmula. Então, aqui é melhor usar sempre expressões regulares para especificar mais as APIs e ter menos código. Então vamos tentar agora. E nós temos nossos produtos em destaque. Vamos fazer também a mesma coisa, quatro categorias. Então temos aqui 1 e categorias. Para que possamos pegá-los. E, por exemplo, não podemos comer ou postar. Então, no futuro, quando eu adicionar mais APIs, precisamos adicionar algumas exclusões aqui, sempre nesta matriz de caminhos. 43. Adicione mais informações do usuário secretas ao Tokens: Vimos antes quando tivemos um login que não podemos especificar alguns dados dentro dessa resposta ou dentro do token. Neste caso, eu também posso passar alguns dados secretos, que eu quero ser só vem com o token. Então, se o usuário não tiver essa informação no token, eu não permitirei que ele faça algo. Uma das informações secretas que posso passar aqui é a administração. Então é admin, eu posso dizer que este usuário é admin na loja virtual ou não. Então, neste caso, posso permitir que ele olhe para o painel de administração da loja web ou não. Então, o usuário normal não pode fazer login, mas o administrador, que tem admin, true, ele continuou procurando. E, claro, neste caso, é melhor separar as tabelas. Assim, eu posso ter usuários e clientes, por exemplo, ou usuários e administradores. Então, isso veremos na próxima palestra com mais detalhes. Agora temos o usuário e, em seguida, vou verificar o usuário é admin. Então, neste campo, neste token, eu posso enviar o usuário se ele é admin ou não. Talvez você me diga por que você não pode fazer isso no front-end, como verificar se o usuário é admin ou não. Neste caso, o usuário poderá, por exemplo, algum hacker que tenha experiência em programação, ele poderá do front-end ao login no painel de administração. Nem ele tem essa habilidade. Ele pode apenas criar um dados falsos que ele é administrador. E então ele pode colocar como no JSON é admin é verdade. E então ele pode olhar. E este caso, não é bom em nossa loja virtual, então é melhor tê-lo seguro aqui. Então, se o usuário não tem que eu token, que tem é admin, então ele não será capaz de olhar para o painel de administração. Vamos tentar isso e ver o nosso token se ele for validado, certo, eu vou para o Postman e pressione Enviar. Isso é bom. Agora temos o símbolo. Então nós verificamos este token em DWT dot io. Vá aqui, experimente. Eu vou dizer também este admin e tempo de expiração. Então, neste caso, a pessoa não pode construir um símbolo como esse porque não tem, ele não tem o segredo. E se você se lembrar, sempre a API está verificando esse token. Se foi construído com aquele cigarro, que especificamos no nosso back-end. 44. Usuários e administradores: Como vimos antes, excluímos algumas solicitações de API para não serem autenticadas. Por exemplo, aqui os produtos como Git e opções não devem ser autenticados porque eles estarão em público. Assim, qualquer usuário público pode navegar pelos produtos na minha loja virtual. Assim, o usuário de login que trancou no e-shop, ele pode postar produtos ou atualizar para produtos, produtos elite. Mas no nosso caso agora os usuários, nossos clientes. Então, se eu sou cliente e fiz login no problema, então, neste caso, poderei excluir produtos. E nos primeiros segundos que publicar este site online, ele será destruído. Se você se lembrar, criamos no modelo um campo que diz é admin. Então, aqui nós especificamos o usuário se ele é admin ou não. Em nosso E-sharp, teremos também painel de administração. E este painel de administração não é permitido para usuários normais inserirem apenas os administradores. Então temos aqui na tabela de usuários, algumas funções de usuário. Temos um cliente e temos admin, e ambos estão na tabela de usuários. Você tem liberdade aqui para fazer, por exemplo, tabelas separadas neste caso. Mas aqui eu queria mencionar as funções de usuário. Então você também pode torná-los na mesma tabela, mas com diferentes funções. Há muitas maneiras de fazer funções de usuário em Node.JS, mas eu estou indo com a maneira mais simples que precisamos para nossa loja virtual. Se você se lembrar, depois que o usuário obteve o login no aplicativo, ele recebeu um token. E esse token está sobrecarregado com o ID do usuário e é admin. E aqui sabemos dentro do token se o usuário é admin ou não. E quando o usuário envia uma solicitação, a biblioteca JWT está desmontando esse token com o código secreto que é fornecido em nossa API ou em nosso servidor. E ele vai ver que se ele é realmente gerado a partir deste servidor ou não. Então, podemos identificar o usuário se ele tem token da nossa loja virtual ou não. Até agora tudo está bom. Então vamos supor que eu tenho um símbolo certo. E eu também quero olhar para o meu trabalho como administrador. Deixando assim ele vai nos manter não seguros porque o usuário, neste caso, é capaz de excluir ou adicionar produtos. Assim, o JWT expresso tem um ótimo método que está revisando, por exemplo, ou revogando o token sob algumas condições específicas. Para fazer isso, há um campo é revogado, e isso é revogado é uma função. Então, também podemos, no retorno de chamada, podemos especificar se o usuário é admin ou não. Então eu crio aqui, por exemplo, outro método é revogado. E isso é revogado será uma função, função assíncrona. E terá pedido, carga útil. E Don. Quais são esses parâmetros? Solicitação é quando eu quero usar os parâmetros de solicitação ou o corpo da solicitação, Eu quero saber algo que está enviando o usuário. A carga útil contém os dados que estão dentro do token. Por exemplo, eu quero obter é admin do token que está assinado para o usuário. E este usuário está enviando para mim com os cabeçalhos de solicitação. Então aqui, neste caso, eu posso dizer se não payload dot é admin. Porque agora eu tenho acesso a isso, é admin para a carga desse token. Então eu retornarei que feito é nulo e verdadeiro. Então, neste caso, estamos dizendo que rejeitar o token. Então, se qualquer API autorizada chamada e nosso usuário não é admin, então ele será rejeitado. E então, se ele é administrador, podemos dizer feito sem quaisquer parâmetros. Como dissemos antes, temos apenas dois tipos de usuários em nossa edição. Então, temos administrador e usuários. Se você tem mais papéis, você pode ouvir, classificá-los. E aqui você define o que está em evocado ou o que é permitido. Agora, vamos tentar isso com o carteiro. Se você se lembra, temos um usuário aqui, Thomas Jackson, que ele não é administrador na loja. E estes são os dados dele. Então vemos aqui que é admin é falso. E quando eu tentei postar um produto em nossa API e novo produto, eu vou obter o usuário não está autorizado. Vamos alterar o token para estar com o admin através. Bem, vamos ao banco de dados manualmente e mudar esse usuário para ser um administrador. Então eu vou dizer aqui admin através e, em seguida, eu clique em atualizar. Se eu tentar agora usar o envio, eu também vou ficar não autorizado. Por quê? Porque eu estou usando o token que é carregado com é admin false. Então precisamos olhar de novo para obter uma nova ficha. Então eu vou para a API de login, eu tenho o usuário e a senha. Se eu enviar esse pedido, tenho uma nova ficha. E vamos usá-lo em nossos pedidos de postagem. Na autorização. Eu jogo, substituo aqui e tente novamente. E é postado com sucesso o produto graças a expressar JWT que ele tem este método. Então foi capaz e nos fez capaz de fazer, por exemplo, essa função de usuário. Agora nosso aplicativo é totalmente seguro e ninguém pode usá-lo ou acessá-lo sem qualquer autorização ou qualquer função de administrador. 45. Obtenha a API de contagem do usuário: Às vezes, o administrador do workshop quer saber quantos usuários ou clientes ele tem em sua oficina. Então, neste caso, ele precisa de uma API para obter a contagem de usuários. Fizemos isso anteriormente com os produtos. Tivemos uma API, especialmente para obter quantos produtos temos em nossa edição. Então vamos copiá-lo e ir para a API do usuário. Após o login e o registro, podemos usá-lo aqui. E dizemos o mesmo GetCount, mas usuário. E aqui dizemos contagem de usuários. Se nenhum usuário contar, em seguida, retornar 500 e, em seguida, o seu retorno para mim contagem de usuários. Então vamos salvar tentou o carteiro dele. Vamos, por exemplo, aqui, eu digo usuários e obter contagem. Experimente. Temos um erro porque eu estou fazendo um post. Precisamos fazer um GET. Tentamos de novo. Temos contagem de usuários para, temos realmente quatro usuários. Nós também não fizemos uma solicitação de exclusão. Então, vamos também copiá-lo de, por exemplo, as categorias ou produtos. Podemos fazer a partir daqui e pegar este. E então nós colocamos um pedido de exclusão e eu substituo usuário, usuário. E todo o resto é usuário. Então, como você vê aqui, é exatamente da mesma maneira que fizemos com os produtos. Nós o salvamos, e agora estamos totalmente feitos com os usuários. Estou tão feliz que você terminar este módulo e você verá o código onde chegamos na pasta de recursos. Então você pode baixá-lo e, em seguida, tentar coisas, mudar coisas, tentar sozinho e tentar comparar seu código com o código que eu enviei. 46. Backend: ordens: Bem-vindo a uma nova seção. Nesta seção está relacionada totalmente com as ordens. Então criamos seus produtos e também os usuários. E agora vamos construir as ordens. Como cada e-shop, o usuário vai ter um preenchido seu cartão e, em seguida, ele vai check-out para enviar um pedido. Este pedido virá com o endereço da pessoa e também as opções de envio e como ele vai pagar este pedido. E veremos também depois que o usuário entrar, como obteríamos também os dados do usuário e preencher os dados do pedido automaticamente. Então, sem deixar que o usuário sinta o endereço de cobrança novamente. Então vamos deixar os dados vem das informações do usuário que criamos antes. E também nesta seção, veremos como vincular o produto ao pedido. Então vamos ver que a ordem contém muitos produtos. Então, às vezes eu adiciono, por exemplo, camisetas e calças. Então vamos ver como vincular a ordem com os produtos. E no back-end ou no back-office onde o administrador pode fazer login e controlar os pedidos. Vamos ver como seremos capazes de alterar o estado da ordem. Por isso, será entregue ou, por exemplo, enviado, ou mesmo está em espera ou cancelado. Então, aqui tudo será relacionado totalmente com o back-end. Não vamos trabalhar no front-end. Então vamos trabalhar com o Carteiro. aluno pode entender como esse backend funciona isolado do front-end. Espero que você goste desta seção. Esta seção, como eu disse, não está repetindo as seções anteriores. Não tem coisas novas. Como vamos vincular os produtos como matriz de itens de ordem e também vinculá-lo para o pedido fica pronto. E vamos começar. 47. Modelo e sistema para pedidos: Bem-vinda de volta. Agora vamos implementar o esquema de ordem e esquema de itens de ordem. Anteriormente, implementamos o banco de dados ou planejamos o banco de dados com base no que precisamos para o e-shop. Como você vê à direita da tela, já temos a tabela de pedidos e itens de ordem. Como no banco de dados relacional, vemos a conexão entre os itens de ordem e ordem. Vamos começar primeiro com pedidos, como vimos antes, com os produtos e a relação com as categorias. Nós também tinha implementado que a categoria tem um tipo de ID de objeto e a referência é a tabela de categoria. Então vamos fazer o mesmo entre o pedido e o item do pedido. Então vou copiar esta parte. Eu vou para o pedido e eu vou colocar aqui itens de ordem. E aqui vamos ter o ID do objeto e a tabela de item do pedido e obrigatório sim, através. Mas a diferença aqui que temos talvez vários itens de pedido, não apenas um. Então, em Mangusto podemos implementar isso alinhando isso dentro de uma matriz. Então, neste caso, precisamos passar ou ter a matriz de itens de ordem de IDs de itens de ordem que estão existentes no banco de dados. Então, neste caso, precisamos criar tabela de itens de ordem. Então vamos ter um arquivo aqui. Chame de item de ordem ponto js. E terá o mesmo esquema, Mangusto toda essa informação. A coisa aqui vamos ter item e aqui estão os itens que não temos isso. Teremos quantidade, que é o número do tipo. E é necessário. Sim, é verdade. E como vemos também que temos um produto. Portanto, precisamos vincular este item de pedido ao produto. Então eu vou dizer aqui que eu vou ter ID ou tipo de ID de objeto. Tipos de esquema de mangusto que ID de objeto. E que é referência deste item pedido será produto. E vamos exportar como item do pedido e tê-lo como item do pedido. E aqui temos ordenado esquema de item. Então, nosso item de pedido está pronto, que importamos aqui. E nós referenciamos com ID de objeto na tabela de ordem. Então, a coisa aqui que temos muitas relações. Portanto, o pedido está relacionado a todos os outros itens e item do pedido está relacionado ou se refere ao produto. Então, na minha aplicação, quando eu pedir um pedido, eu vou obter todos os outros itens, incluindo seus produtos e preencher esses produtos. Por exemplo, eu preciso do nome e da categoria também. Aqui eu adicionei rapidamente os outros campos que precisamos, o endereço de entrega, 12, cidade, CEP, país, status do telefone, que vamos dizer que um valor padrão anexando. Então, quando a pessoa enviar um pedido, então o valor padrão ou o primeiro estado da ordem estará pendente. E aqui temos também o preço total. Como vamos ver que nós iria calculá-lo internamente quando criamos a ordem. E aqui, outra referência com ID de objeto para a tabela de usuário. Sabemos qual usuário ou sua desordem e a data ordenada então aqui, que o usuário não tem que enviá-lo para o back-end. Ele será criado automaticamente com o ponto agora. Assim, ele irá criar a hora em que o pedido de postagem é enviado. E como você se lembra antes, tínhamos aqui uma identificação virtual. Então, para não ter este ID sublinhado, podemos ter também ID normal. Vamos copiá-lo também e tê-lo da mesma maneira. Então, aqui eu disse esquema de ordem, criar para mim um campo ID virtual em vez de ID sublinhado. Então agora estamos prontos para trabalhar com essas tabelas. Por exemplo, aqui temos ordem e item de ordem, modo que a relação é alcançada entre essas duas tabelas. E agora estamos prontos para criar nossa API com pedidos. 48. Disposição de referência a ordem com artigos de ligação aos produtos: Assim, a ordem é vinculada aos itens da ordem por matriz. Então vamos ver e ler exemplo como o front-end irá enviar esses dados para o back-end que eu criei aqui e objeto de, por exemplo, como o usuário irá enviar os dados para o back-end. Então, primeiro de tudo, vamos imaginar que o usuário tem um carrinho e ele selecionou dois produtos, produto 1 e produto 2. E eles têm identidades diferentes. Então, itens de ordem será matriz de dois produtos, e cada produto terá uma quantidade. Então, desta forma, eu tenho uma matriz de item de pedido ou seu item tem uma quantidade eo produto. E o resto será o mesmo. Exceto aqui, veremos que o usuário enviará o nome de usuário, mas enviamos o ID do usuário criando o pedido. A mesma coisa aqui. Não enviamos o nome do produto, mas enviamos o ID do produto. Então é assim que o ID do produto é vinculado ao item do pedido e como os itens do pedido são vinculados ao pedido. 49. Nova ordem e crie itens de pedido no envio nova ordem: Colocar um pedido em nosso banco de dados dados necessários do usuário. Como vimos antes, temos esses dados JSON onde eles usuário depois de fazer o checkout, ele vai colocar o pedido em nosso banco de dados. Então, o que precisamos primeiro para criar uma solicitação de post em pedidos API, já temos uma solicitação GET. Precisamos criar agora uma solicitação de post para não repetir o mesmo processo que fizemos antes. Vamos copiar a solicitação de postagem mais simples que criamos em categorias. E nós vamos aqui duas categorias, postar pedido e copiá-lo, e colá-lo em nossos pedidos. Então, o que é exigido de nós, precisamos criar um modelo de ordem e os campos da ordem que éramos, tínhamos antes e criamos o esquema. Então vamos assumir o caso mais simples, pois o usuário enviará esses dados. Então aqui nós pegamos os dados. Eu colá-los rapidamente para não repetir o mesmo processo. Então nós temos do usuário os itens do pedido todos vem com o corpo da solicitação, que é este aqui. Então temos todos os outros itens e todos os dados que são enviados pelo usuário a partir do front-end. Vamos consertar isso aqui. Estou ensinando desse jeito como chamá-lo rápido, então não temos que escrever novamente tudo sobre a ordem porque, você sabe, temos sempre post request, temos sempre delete request. Portanto, é melhor copiá-lo da solicitação básica e alterar, por exemplo, as coisas de nome para caber em nossa nova API. Então aqui temos encomendado tudo agora ordem e enviado de volta a ordem criada. Mas se você se lembrar, criamos a tabela de itens de ordem. Assim, o usuário não sabe no front-end que os itens de ordem que são armazenados no banco de dados. Então aqui você vai apenas enviar esses dados. Ele quer três vezes deste produto e duas vezes deste produto. Mas para buscar esses dados e armazená-los para o administrador, isso será como, por exemplo, um obstáculo, um pequeno obstáculo para obtê-los novamente do banco de dados. Mas vamos resolver isso com Mangusto durante esta relação entre ordem e itens de ordem. Então, quando o usuário ou o pedido de post é enviado ou criado, temos que criar os itens de ordem primeiro em seu banco de dados e , em seguida, anexá-los ou relacioná-los com o pedido de ordem que temos aqui. E como vimos anteriormente, que itens de ordem, é uma matriz de IDs da tabela de itens de ordem. Então, neste caso, precisamos de matriz de IDs, IDs que estão no banco de dados desses nossos itens de ordem. Então, primeiro, precisamos criar essas identidades ou como Mangusto as criará para mim. E então eu vou guardá-los com a ordem ou relacioná-los com essa ordem. Então, aqui, não vamos obter do usuário diretamente o item do pedido que está contendo o produto ea quantidade sabe, precisamos apenas matriz de IDs. Então, podemos dizer IDs de itens de ordem. E esses IDs de item de pedido virão de nossos itens de pedido criados no banco de dados, que faremos aqui. Então nós temos este constante const ID item ordem, que vamos obtê-los a partir de após a criação do item de ordem no banco de dados. Então, precisamos de alguma forma primeiro dois loop dentro dos itens de ordem que são enviados do usuário. Então eu vou dizer pedido corpo ponto, ponto itens de ordem para loop sempre usamos mapa porque sabemos que o usuário vai enviar matriz, matriz de itens de ordem. E aqui teremos ou seu item, um item de pedido. E, em seguida, dentro deste item de pedido, criamos deixar novo item de pedido, novo modelo de item de pedido. Então ordenou o modelo do item. Precisamos de o ter a partir dos nossos modelos ou do seu item. É exatamente como estamos criando uma nova categoria ou um novo produto, ou é como uma solicitação de postagem. Então eu digo aqui, ou o item, quais são os campos no item do pedido? Temos quantidade e um produto. Então eu vou aqui, eu digo quantidade. Então, já temos um item de pedido da lista dos itens de ordem que eles usuários. E assim eu digo aqui, pedido item quantidade ponto e também produto, que irá conter o ID do produto. Então, a partir do item de encomenda ponto-produto, então precisamos salvar este item no banco de dados. Então eu digo deixar ou o novo item de ordem, a mesma variável que podemos usá-lo. Aguarde um novo item de pedido que criamos anteriormente ou o modelo, e não é seguro. Então, aqui estamos salvando o item do pedido no banco de dados. Então, quando nós loop em itens de ordem, então para cada item de pedido, eu vou salvá-lo no banco de dados. Mas eu quero que este mapa me devolva apenas as identidades. Então aqui eu digo devolver não o novo item do pedido, mas o novo ID do ponto do item do pedido. Então, neste caso, vamos obter apenas os IDs em uma matriz. Então criamos os IDs do pedido e os anexamos ao pedido, e vamos salvar o pedido. Não vamos salvá-lo agora no banco de dados, vamos apenas enviar a ordem é criada ou o modelo de ordem para o front-end para o usuário depois que ele postar solicitação. Então vamos tentar isso com o Carteiro. Eu vou ao carteiro e substituo isso por pedidos baseados em nossa API, como nós criamos. E então eu vou colocar aqui os dados. Vamos primeiro rever o token de autenticação e, em seguida, o corpo, o que temos este JSON por exemplo, eu já estou recebendo esses IDs de nosso banco de dados. Portanto, devemos ter esses IDs no banco de dados já. Vamos enviar o pedido de correio. Vemos que recebemos um erro. O erro vem, Vamos ver no console do nosso servidor de teste ou do nosso servidor, vamos ver que temos aqui um peso. Isso é porque temos aqui um peso, mas isso requer uma função assíncrona. Quero dizer, aqui. Então aqui temos um peso e isso requer uma função assíncrona. Então, neste caso, não podemos esperar dentro de uma função normal. Precisamos colocar uma função assíncrona basicamente é esta. Então eu diria aqui assíncrono e salvar e tentar novamente. E veremos que a solicitação é criada ou a ordem é resfriada recriada, mas os itens do pedido estão vazios. Vamos rastrear esses itens de pedido para ver por que eles não são criados. Para rastreá-los. Podemos fazer o log do console de pedidos, itens, IDs. E vamos ver no console o que ele vai devolver para nós. Então aqui eu salvei. E então vamos tentar de novo. Vamos checar o console. Veremos que voltamos às promessas. Então, não estamos devolvendo realmente o ID, estamos retornando uma promessa. Isto porque temos aqui função assíncrona e esperar, e estamos retornando com esperar uma promessa. Então, de alguma forma, precisamos resolver essas promessas. Como o usuário está enviando uma matriz de itens de pedido, não apenas um. Por isso, temos de combinar essas promessas. Então aqui temos uma série de promessas para combiná-las, eu uso o promise dot all. Então, neste caso, eu terei uma promessa de retorno ou uma promessa, que será resolvida depois disso aqui, antes de criarmos a ordem. Então vamos tentar consolidar. Novamente. Vemos que temos uma promessa, não promessas como antes. Então precisamos resolver essa promessa. Como podemos resolvê-lo, podemos criar uma nova constante. Chame-o ID do pedido é apenas ou itens do pedido. Ids, por exemplo, resolvidos. Porque isto é uma promessa. Então eu posso dizer aqui, uh, esperar que isso seja resolvido e depois imprima para mim. E, em seguida, substituo esse ID de itens de pedido pelos IDs de itens de pedido resolvidos. Vamos tentar de novo. Isso é ótimo. Chegamos a eles de novo. E no log do console, temos os dois IDs que são criados de nossos itens de pedido. Vamos verificar isso no banco de dados. Depois de fazer login, vejo aqui a tabela de itens de ordem é criada. Eu não criei que eles livro atlas é muito inteligente. Então, com base no modelo que eu criei no meu banco de dados ou no meu código, ele está criando a tabela para mim. Então aqui se eu ir para itens de ordem, eu vou ver para encomendar itens que são criados com base no carteiro e eles têm o mesmo ID que estão no banco de dados. Então agora estamos prontos para criar nossa ordem. Então aqui não temos nada, então não temos mesa de pedidos. Isso é porque comentamos esse salvamento. Então, aqui, depois que o pedido for criado ou salvo, então eu o reenviarei de volta. Vamos remover este registo de consola para não ter o nosso registo cheio de dados desnecessários. Então aqui eu vou agora para o carteiro. Faça um pedido. Ótima. Agora criamos um pedido, e temos aqui, o novo ID é criado do pedido. Então, se eu for ao Atlas de novo, eu me refrescarei. E vamos ver que a tabela ordens é criada automaticamente porque temos modelo de ordem. Então o que eu pedi ao Mangusto para criar para mim este modelo de ordem, então ele criou a tabela. Então aqui temos outros itens, ID do objeto dos novos itens de ordem que são criados novamente aqui. Então, toda vez que eu faço o pedido, eu crio um novo item de pedido. Na próxima palestra, vamos ver como obter itens de ordem ou a ordem em si maneira mais detalhada. Então, não obteremos apenas IDs, vamos ficar mais detalhados. Vamos ver o item do pedido, o que ele contém, e também tudo. Por exemplo, qual usuário o criou, não apenas IDs. 50. Obtenha detalhes de ordem e pinche nos produtos nos itens e dados de encomenda para usuários: Ok, agora vamos obter uma lista de pedidos, já que agora temos uma ordem no banco de dados. Nós já criamos uma solicitação GET para uma lista de pedidos. Então vamos tentar agora com um carteiro. Eu vou aqui, criar o mesmo que pedido de post, mas será um GET e a autorização porque sempre quando eu criar uma nova API, eu devo tê-lo autenticado. Ou excluímos essa API da autenticação como vimos anteriormente. Então agora eu vou usar este token get lista ratos, temos lista de ordens. Então, agora temos apenas uma ordem no banco de dados. E estamos obtendo-o com a solicitação GET porque é uma matriz. Vamos preencher o usuário para que possamos ver os detalhes do usuário dentro desta solicitação. Porque, por exemplo, eu quero ver no painel de administração, na tabela de pedidos, eu quero ver os usuários que os encomendaram. Então, aqui vamos nós no código e dizemos apenas “dot populate”. O que preencher o usuário. Salvar. Tente de novo com o Carteiro. Agora temos os detalhes do usuário, todos os detalhes dele. Mas para mim como usuário ou administrador, não preciso de todas as informações do usuário. Então eu só quero, por exemplo, o nome dele. Para fazer isso. Acabamos de colocar após a população do usuário, colocamos os campos que queremos preencher. Então tudo o que eu tenho, por exemplo, o nome e no Carteiro, quando eu enviar esse pedido, eu recebo apenas o nome. Vamos postar outra ordem com dados diferentes. Por exemplo, vou dizer aqui em vez de país, República Checa, Vou colocar EUA. Então aqui eu vou lá e digo, eu não uso um e um número diferente. Exemplo, 1, 2, 3, 4, 5, 7. Então aqui vou postar outro pedido ou outra ordem. Então, neste caso, eu vou chegar lá pelo menos dois pedidos. Assim, também podemos classificar os pedidos por data. Então, porque já temos essa data ordenada campo, então temos a data aqui pelo ponto. Agora, nós também podemos classificar isso por data. Para fazer isso, É muito simples. Eu só vou aqui e depois da população do usuário, Eu digo classificar com base na data da coluna ordenada. Então aqui temos, você se lembra de uma data encomendada. E com base nessa coluna, eu quero classificar minha saída. Então vamos aqui, Carteiro, tentamos pegar a lista de novo, e vemos que os temos ordenados por data. Como você vê, o pedido aqui é do mais antigo para o mais novo. Então nós temos anteriormente este em 23 de dezembro neste momento. E agora temos este. Para que possamos encomendar do mais novo para o mais antigo. E eu acho que isso interessa ao usuário para fazê-lo. Nós apenas alinhar isso em um objeto e, em seguida, dizer que este objeto é igual a menos um. Então, quando eu digo no método de classificação, neste caso, então isso significa que ordená-los do mais novo para o mais antigo. Então, se eu atualizar e ir para o Postman imediatamente, e veremos que temos o mais novo 1 primeiro e depois o mais velho. Você pode verificar a documentação do método de classificação. Ele tem um monte de características. Assim, você pode usá-los para classificar suas saídas com base em algum campo específico ou em alguma ordem específica. Vamos agora obter um detalhe de solicitação ou um detalhe de pedido. Então a mesma coisa está aqui. Eu postar ou eu recebo este pedido colado aqui. E então, em vez de ter o tipo e a população, temos encontrar por ID. E aqui nós especificamos o ID. E a identificação será pedir pontos params. Porque seus parâmetros tomaram ID. E nós fomos renomeados isso para ordem apenas em vez de lista ordenada. Aqui temos ordem, ordem, ordem. Vou agora para a frente e recebo, por exemplo, este. Depois disso, eu coloquei esse ID do pedido e envio esse pedido. E eu vou obter apenas esta ordem com população do usuário. Chegamos agora ao ponto importante. Temos aqui, os itens do pedido apenas como IDs. Queremos ver os produtos estão dentro desses itens e a quantidade que, vamos limpar o nosso código um pouco. Então nós temos aqui povoar. E nós também teremos ensinado preencher de outro campo que é itens de ordem. Vamos tentar isso agora. Veremos que temos o produto e a quantidade. Mas e se eu quiser também preencher este produto de uma forma que vemos os detalhes do produto dentro ou os itens. Então, como vimos aqui, o usuário, nós temos todos os detalhes dele. A diferença aqui que temos uma matriz deles. Portanto, precisamos saber como preencher o produto dentro desta matriz de itens de pedido. Para fazer isso, temos aqui uma maneira diferente de povoar. Então, em vez disso, o método populate será um objeto que aceitará um caminho. E aqui eu coloco item do pedido ou itens do pedido. E dentro deste objeto, eu digo também preencher para mim o campo, que é chamado de produto. Então eu vou colocá-lo aqui e tentei de novo. Veremos como uma magia. Temos todas as informações sobre os itens do pedido. E em nosso banco de dados, a ordem se parece com isso. Então, se atualizarmos, temos nosso pedido apenas com IDs e itens de pedido são apenas IDs. Assim, desta forma, estamos mantendo um tamanho pequeno os documentos do banco de dados, e estamos fazendo as relações usando flexibilidade Mangusto. Se vemos também aqui que o produto tem a categoria e a categoria também é id. Se eu quiser preencher também a categoria, não podemos fazer isso. Sem problema. Podemos dizer também que isso é povoado. Este é um caminho que é chamado produto e, em seguida, preencher categoria que está dentro deste produto. Então, se formos novamente, enviar este pedido, vamos ver a categoria também é preenchido para toda a ordem. Então, para torná-lo mais limpo, não podemos ter aqui este caminho, então podemos entender como ele foi construído. Então aqui eu tenho que dizer aqui, este aqui. Agora tenho o código limpo. Então esta é a maneira como fazer população da relação entre as tabelas no banco de dados. Vemos no futuro. Agora, como excluímos essas ordens e como atualizamos o estado dessa ordem, que será na próxima palestra. 51. Atualização do status de pedido: Depois que fizemos a solicitação GET e postar solicitação para ordem, Vamos fazer a solicitação de atualização como os requisitos do meu problema para cima. O administrador do A-Sharp quer apenas alterar o status do pedido. Então, quando algum cliente faz um pedido para a loja virtual, o proprietário da loja quer processar isso mais antigo. Assim, desta forma, o pedido será transferido de flexão e, em seguida, para processado e, em seguida, por exemplo, para mudar e, em seguida, para o estado entregue. Então, precisamos apenas atualizar o status do pedido. Vimos anteriormente como estamos atualizando, por exemplo, o produto. Estávamos atualizando todos os campos para que o usuário ou o front-end deve me enviar todos os campos novamente. Mas aqui nas ordens, só precisamos atualizar um campo, que é o status, que é este. Para fazer isso, vamos fazer isso rápido. Copiamos uma das solicitações, por exemplo, de categorias. Nós pegamos esse. Nós copiamos para as ordens. Aquela identificação exterior. Precisamos da identificação. E então direi aqui que tenho a ordem. Aqui. Peço o modelo do pedido. E aqui não passamos nada, apenas o status. Assim, o status virá da exigência ou solicitação ponto corpo, ponto status. Dessa forma, se não houver nenhum pedido atribuído com este ID, então eu estou enviando um erro. Caso contrário, eu estou enviando de volta o pedido atualizado. Claro que você pode adicionar todos os campos que deseja atualizar. Mas os requisitos para este e-shop, Eu só preciso atualizar o status. Vamos guardá-lo e tentar isso com o carteiro. Então, já temos esta ordem, Vamos atualizar. Então eu vou ter uma linha e o tipo de que ou é JSON. Então, aqui vou dizer que o status será, por exemplo, enviado. Então eu coloquei aqui enviado. E precisamos também de alterar este pedido para colocar. E nós enviamos. E temos a mesma ordem que um turno. Então vamos pegar novamente a ordem. Temos um chegar aqui, verifique. Nós vemos o detalhe do pedido já e temos o status do pedido será enviado. Excluir o pedido será o mesmo. Vamos copiá-lo também a ordem Excluir da categoria. E aqui vamos adicionar ordem, encontrar por ID, e então ele vai retornar para mim ordem. Se houver ou lá, então retorne o verdadeiro sucesso. Caso contrário enviar erro ou não encontrado nosso algum erro no servidor. Então vamos tentar isso com o Postman também. Vou mudar isso de get to delete. Nós apagamos e temos sucesso. Essa categoria é suprimida. Temos que consertar isso porque não é categoria. Temos que fazer isso como ordem. E aqui também ordem. Então agora, se eu quiser obter uma lista das ordens, novamente, teremos apenas uma ordem, que é a que chamou EUA. E agora tínhamos apenas um. Talvez alguém vai perguntar O que sobre os itens do pedido? Eles são apagados ou não. Vamos verificar isso no banco de dados. Em nosso banco de dados tínhamos itens de pedido e devemos ter dois pedidos apenas para encomendar itens, mas vemos que os itens do pedido ainda estão aqui. Então, temos um problema aqui. Precisamos também excluir os itens de ordem do pedido que é excluído. Então vou deixar isso como um exercício para você. Assim, o exercício será apenas para excluir os itens encomendados também depois de excluir o pedido. E então eu vou vê-lo no próximo vídeo para ver a solução, como implementamos a exclusão de itens de pedido depois de excluir o pedido. 52. Como calcular o preço total de uma ordem com Mongoes: Enviar o preço total a partir do front-end não é uma boa prática. Por exemplo, se algum hacker foi capaz de enviar um pedido com um preço total falso de alguma forma, então ele será armazenado no meu banco de dados com um preço total falso. Então talvez alguém tenha pedido foi cem, dez mil dólares, mas ele fingiu e conseguiu com 2 dólares. Quando eu tenho uma loja virtual muito ocupada, eu não vou detectá-la. Portanto, é melhor depois que o usuário está enviando os itens do pedido, IDs ou os itens do pedido em geral para o back-end. Calculamos isso internamente no backend com base no que temos no banco de dados. Então a fonte da verdade é um banco de dados. Então o que eu preciso fazer é fazer um loop sobre os itens do pedido que eu recebi do usuário ou do front-end. E então eu resolvo os itens do pedido. Eu recebo o produto relacionado ao produto. E com a quantidade, multiplico isso e calculo o preço total. Então tudo está vindo do banco de dados. Então vamos tentar fazer isso. Aqui. Temos IDs de item de pedido resolvidos. Então, de alguma forma, precisamos substituir isso por uma variável que calculamos internamente. Então vamos chamar de preço total. E este preço total virá de uma constante onde vamos resolver este pedido itens. Da mesma forma, clicamos em Criar uma constante, chamamos de preços totais. Porque nós estamos indo para loop em itens de ordem exatamente da mesma maneira aqui. Então vamos fazer isso como promessa ponto tudo. Então, aqui eu vou obter os itens de ordem resolvidos IDs e mapear sobre eles. E eu vou receber a identificação do item encomendado. Vou recuperar o item do pedido do banco de dados porque ele já está armazenado aqui no banco de dados. Então exatamente como aqui, diga assíncrono para o nosso item de pedido. E nós obtemos o item do pedido através aguarde. E temos também o modelo de item de pedido. E encontre por ID, a identificação que consegui aqui do mapa. E, em seguida, dentro deste item de pedido, obteremos apenas o ID do produto e a quantidade. Portanto, precisamos também preencher o produto. E para torná-lo mais rápido, podemos pedir apenas o preço. Então aqui eu vou obter item de pedido devolvido com o campo de produto dentro dele, apenas o preço. E então eu vou para Create Constant preço total, apenas um. E eu vou dizer o item do pedido que eu tenho do banco de dados, ponto-produto, ponto preço, porque nós temos o preço preenchido já multiplicado pela quantidade do item do pedido. Neste caso, vou obter também a quantidade multiplicada pelo preço. Receberei o preço total de um item. Então mapeando toda essa matriz, eu gostaria depois disso, retornar, apenas o preço total. Então aqui eu vou ter uma variedade de preços totais para cada item de pedido. Então vamos tentar console log esta matriz de preços totais para ter certeza de que tudo vai funcionar bem. E eu vou postar um novo pedido ou um novo pedido. Recebi um erro aqui porque estou log console uma promessa. Então aqui, como fizemos antes, que temos aqui apenas uma promessa, devolvida, prometida em tudo, toda promessa combinada, colocamos um peso. Então é simplesmente que nós também podemos colocar um peso aqui, como o peso e resolver esta promessa depois que tudo é feito dentro. Vamos tentar de novo. Reinicie o nosso servidor. Tente postar. Vamos ver aqui que temos matriz de dois itens ou itens de ordem com seu preço total. Então precisamos fazer a fusão ou resumir esses dois preços para um. Para fazer isso, não podemos simplesmente fazer um preço total constante. E este conjunto de preços totais, vou reduzi-lo. E é um método reduzido. É uma forma famosa de obter a soma de todos os números dentro da matriz. Então eu tenho a e b, devolva para mim um mais B. E aqui nós adicionamos um 0. Assim, o valor inicial é 0 e, em seguida, combinar a e B, ou combinar cada item desta matriz. Então aqui, depois que temos o preço total, podemos colocá-lo aqui, reiniciar nosso servidor, fazer uma solicitação, e veremos que criamos uma solicitação de post com o pedido. E o preço total é 146, que é combinado de dois itens de ordem. Vamos obter também este detalhe do pedido. Vamos aqui, colocamos no pedido GET para obter os detalhes. Então vamos ver primeiro produto, temos um 32 e a quantidade é três. E também o segundo produto é a quantidade 2, e o preço é 25. O preço total será 146. Desta forma, garantimos que o preço total vem apenas do nosso banco de dados, não do front-end. Então, em primeiro lugar, criamos os itens do pedido como vimos antes. Então temos o preço, preço total de cada item do pedido e, em seguida, combiná-los ou resumi-los para um número. E então criamos a ordem com o preço total, que vem totalmente do banco de dados. 53. Obtenha vendas de e, usando $ $sum: Como sempre. E no final de cada módulo, fazemos sempre algum post ou pedido GET de alguns dados estatísticos. O que veio à minha mente aqui que, por exemplo, eu quero mostrar no painel do painel de administração do aplicativo quanto totais colinas eu tenho em toda a minha e-shop. Então, o proprietário da loja, quando ele trancou no painel de administração, ele vê o total de vendas e ele ficará feliz. Então, como sempre, vamos criar uma solicitação get. E a rota será obter e vendas totais. E aqui vamos, depois de passar esta API, após os pedidos, obteremos o total de vendas. Então aqui temos assíncrono, solicitação e resposta. E será um método ROM. E definimos uma variável, chamamos de vendas totais. E vamos obter o total de vendas diretamente do MongoDB. Então, usando Mangusto, aqui, eu tenho que esperar, o modelo de pedido. Então eu uso um método chamado agregado. E o agregado, eu posso agrupar como juntar, podemos dizer no banco de dados relacional, todas as tabelas ou todos os documentos dentro dessa tabela para um. E então eu recebo um desses campos nessa tabela e uso um dos métodos de Mangusto, como por exemplo, alguns nesse campo. Então ele vai retornar para mim a soma de todos os campos, que nome, Preço total. Se você se lembra, temos um preço total calculado já, como vimos na palestra anterior em cada ordem. Então precisamos somar todos esses preços totais em um usando alguns. Então, para fazer isso, temos aqui um objeto. Estamos agrupando a mesa. E aqui no método, dizemos que o ID é nulo. É assim. E nomeamos o campo que queremos retornar em nossa API. Então eu digo que o total de vendas é a soma. Esta é uma palavra reservada em Mangusto de preço total. O preço total é um campo na ordem, e nós calculamos aqui enquanto estamos criando a ordem. Então eu vou obter o total de vendas resumindo todos os preços totais. Em seguida, verificamos se não há vendas totais, em seguida, retornou para mim, resposta de erro.status. E então, por exemplo, dizemos 400. Não enviar, a ordem, vendas não podem ser geradas. Senão, dizemos ponto de resposta enviar. O total de vendas é o total de vendas. Vamos tentar isso agora com o Carteiro, eu vou aqui, eu digo para obter vendas totais. Enviamos um pedido. Vemos que temos matriz com ID nulo e total de vendas. Então vimos que temos exatamente o que construímos no grupo. Então, se eu remover este ID null, eu vou obter erro porque Mongoose não pode retornar qualquer objeto sem um ID ou ID de objeto 2, como vemos aqui neste erro, ele diz que uma especificação de grupo deve incluir um ID. Então, é melhor colocá-lo de volta. Ou você também pode dar ID usando especificações Mangusto, É melhor colocá-lo como nulo. Então vimos aqui que temos uma matriz. Nós também pode diretamente BOP este array e tomar apenas o total de vendas. Então, podemos dizer aqui, devolvido para mim total de vendas ponto pop porque é uma matriz. E, em seguida, vendas totais. Então, neste caso, eu tenho o primeiro item deste array, ou o item leve porque ele está retornando apenas um array com um item. Então eu digo, me dê este item e o total de vendas que eu especifiquei aqui. Tentamos de novo. Enviamos esse pedido, vamos obter o total de vendas é 290 para isso porque temos aqui, se recebermos o pedido, temos pedidos. Então a primeira ordem tem 146 e a segunda ordem tem também 146. Também podemos obter quantos pedidos são criados ou colocados na minha loja antes de como fazemos uma contagem total dos produtos. Então, podemos aqui copiar isso da API do produto e colocá-lo em pedidos. E dizemos aqui ou ali, conte a nossa subcontagem ou a contagem do titular da conta e aqui ordem. E com os documentos de contagem, vamos obter a contagem e retornar à nossa contagem de pedidos, e então nós vamos obtê-lo. Vamos tentar isso no nosso carteiro de novo. Então aqui eu digo GetCount. E veremos que temos três pedidos. Então agora a nossa API para os pedidos está concluída. Estamos prontos agora para usar toda a API relacionada aos pedidos no front-end. E na próxima seção, voltaremos ao produto para fazer upload das imagens. Você se lembra, nós temos aqui imagem e imagens. A imagem será a imagem principal de seu produto, e as imagens conterão as imagens da galeria de seu produto. Espero que tenham gostado desta seção e nos vemos na próxima. 54. Obtenha encomendas para usuários: No front-end, quando o usuário faz login, ele precisa saber quais pedidos ele encomendou no histórico. Então precisamos ter pelo menos um histórico de pedidos. Assim, desta forma, esta API será exatamente como obter o menor dos pedidos, algo assim, mas será especificado apenas para um usuário específico. Então vamos pegar esses pedidos GET e copiá-lo para o último. E vamos dizer aqui que eu quero obter, por exemplo, usuários mais antigos ou pedidos de usuários. E precisamos especificar como um, por exemplo, como um parâmetro, o ID do usuário. Então aqui dizemos ID de usuário. Então, quando estou enviando uma solicitação do front-end ou da nossa API, precisamos especificar o ID do usuário para o qual eu quero obter os pedidos. E como uma condição para a busca, dizemos objeto, campo de usuário deve ser pedido ponto params ponto. O mesmo paradigma que eu tenho aqui, ID de usuário. E talvez não precisemos preencher o próprio usuário. Precisamos preencher os produtos dentro deste pedido. Então, é exatamente como fizemos aqui no detalhe do pedido, como estávamos preenchendo os itens do pedido, produtos e categoria. Copiamos esse mesmo e passamos por aqui. Então, neste caso, vamos ver que os itens do pedido são preenchidos com os produtos e eles encomendados do mais novo para o mais antigo Para não ter nomes confusos. Vamos renomear isso. Por exemplo, podemos dizer usuário ou sua lista. E aqui lista de ordem do usuário aqui também ordenada pelo usuário. Vamos executar o servidor. Pm começar. O servidor está executando conexão de banco de dados pronto? Tentamos isso no Carteiro. Então eu tenho aqui ordens, obter ordens de usuário, e eu passar o ID do usuário, que eu quero ter seus pedidos. Então eu passo este e eu tenho outros itens. Eles são parecidos com isso. E outra ordem, ele também tem itens de ordem. Então nós temos os três pedidos para este usuário. Vamos ver aqui o mesmo nome de usuário são o mesmo ID de usuário. É sempre n igual a 4, 4. E aqui outro. Então, no final desta seção, você verá que você é capaz de criar quaisquer solicitações ou qualquer API que você precisa com base no que as necessidades no front-end. Então, por exemplo, temos aqui os pedidos do usuário e também temos, por exemplo, quantos pedidos eu tenho na minha edição. Isso é tudo sobre APIs. Na próxima seção, vamos aprender como fazer upload de arquivos para o nosso servidor, como imagens ou alguns anexos em geral. Nesta palestra, há anexo do código de recurso onde chegamos nestes pedidos. E você pode baixá-lo e tentar sozinho fazer algumas coisas diferentes com as APIs com base em suas necessidades. 55. Backend: upload de imagem e galeria: Agora chegamos ao último módulo, que relacionado com a parte de trás e desenvolvimento. Precisamos agora fazer upload das imagens com o nosso produto, como vimos antes, o produto contém dois campos. Um deles é uma imagem principal e o segundo campo é as imagens. Então, onde será mais descrição sobre o produto como uma galeria de imagens? Então, neste módulo, você verá o passo principal é instalar a biblioteca Walter. Biblioteca é uma biblioteca famosa usada para carregar arquivos para o servidor usando Node.JS. E no segundo passo, vamos descobrir a melhor configuração para o nosso e-sharp porque precisamos configurar esta biblioteca para usar e carregar os arquivos para o nosso servidor. O terceiro, vamos ver como usar o destino e carregou os nomes dos arquivos. Sempre que o administrador carregar um arquivo ou uma imagem, ele deve especificar o nome do arquivo. Mas não, não podemos fazer isso para o administrador ou para o usuário. Não temos que deixar que ele nomeie o arquivo. Você pode fazer upload de qualquer arquivo e ele será codificado em nosso servidor. Usando Postman também é muito importante para o nosso caso aqui para testar o upload de imagem, vamos ver como testar o upload de imagem com um carteiro usando o upload de um arquivo ou vários arquivos. E não permitiremos que o usuário faça upload de nada. Precisamos que ele envie apenas tipos específicos de imagens, como a extensão PNG para J Beck. E, claro, tudo isso feito para um único arquivo. Agora precisamos estender a biblioteca para tornar possível o upload de vários arquivos. E vários arquivos são necessários para que possamos carregar muitas imagens para a galeria de produtos. E finalmente, vamos ver como buscar este produto com as imagens e as imagens da galeria para vê-las no front-end. Claro, vamos buscar apenas o URL da imagem. Espero que você vai desfrutar deste módulo e vê-lo na próxima palestra onde vamos começar a instalar biblioteca de argamassa. 56. Configure o upload de contas do servidor: Certo, primeiro precisamos configurar o back-end para aceitar o upload dos arquivos. Para fazer isso, precisamos instalar uma biblioteca chamada Walter. Como qualquer biblioteca, nós instalamos Walter. E com isso, vamos instalar a biblioteca e usá-la para fazer upload de arquivos para o nosso servidor. E como sempre, fazemos constante, Walter e necessário argamassa. Vamos ver a documentação desta biblioteca. Se você vai para o Google e digitar motor, você verá os pacotes MPM, o site npm, onde temos todo o uso desta biblioteca. Para ver o uso mais detalhado ou o uso atualizado, você pode acessar a página inicial da biblioteca. Então aqui eu clico nele e ele me levaria para a página inicial da biblioteca de argamassa. Assim, o uso mais simples desta biblioteca será o seguinte, como ele está na documentação. Então, em primeiro lugar, precisamos de um formulário e esta forma será fornecida pelo carteiro, como veremos mais tarde. E o primeiro uso aqui que podemos chamar a biblioteca molto e , em seguida, configurá-lo com um destino em nosso servidor da pasta. Então, quando o usuário carregar qualquer arquivo através do formulário, ele será armazenado na pasta uploads, que estará na raiz do aplicativo back-end. E depois disso, em cada pedido de post, por exemplo, temos um produto posts que precisamos passar também não só a URL e a função de solicitação e resposta, precisamos também passar o upload, quero dizer o upload configuração da Walter. Então aqui podemos passar o upload e dizemos um único, passamos o nome do campo, que é visto do front-end. Então, como você vê aqui, o nome do campo é chamado Avatar, e aqui é passado no pedido. Mas aqui o arquivo enviado será exatamente o mesmo nome onde o usuário o carregou. Então, teremos um problema quando um cliente, ou desculpe, o administrador fará o upload do arquivo. Ele terá, por exemplo, outro arquivo com o mesmo nome. Então, este arquivo substituirá o arquivo antigo. E neste caso, temos um problema entre os produtos pode ser que eu vou perder alguns nomes de produtos ou algumas imagens de produtos. Então, a melhor maneira que precisamos ter mais controle sobre nomear os arquivos e nomear o destino. Então, por exemplo, precisamos, sempre que o arquivo carregado é carregado, precisamos renomeá-lo de alguma forma para alguns, um nome único e, em seguida, armazená-lo em nosso servidor. Para fazer isso em várias bibliotecas, há outra opção de ter um controle total sobre o nome dos arquivos, que é chamado de armazenamento em disco. E com este exemplo, vamos construir nossa API de upload. Então vamos usar esta parte. Vamos levá-lo exatamente o mesmo e copiá-lo para o nosso aplicativo. E vamos dizer que o armazenamento é armazenamento de disco Walter, que tem dois campos, o controle do destino e o controle do nome do arquivo. O destino será uma função onde ele tem o próprio pedido e o arquivo e o retorno de chamada. O retorno de chamada será retornado se houver um erro no upload e atribuirmos o destino nele. Então, aqui, vamos colocar nosso destino de upload. Podemos chamar isso de público e uploads. Então nós aqui, teremos uma pasta chamada uploads públicos. Podemos criar esta pasta. Então podemos dizer aqui no back-end, podemos dizer uploads. E dentro dele, ou desculpe, poderíamos ter público primeiro. Público. E o público estará no nível da raiz. Assim, terá, por exemplo, aqui. E o público, a pasta de uploads estará dentro dela. Então aqui agora temos uploads públicos. Então, no futuro, quando enviarmos o arquivo, vamos vê-lo aqui localizado diretamente nos uploads públicos. No nome do arquivo. Será a mesma coisa. Ele conterá o pedido de rock e o arquivo. E precisamos de alguma forma renomear o arquivo para atender às nossas necessidades e como ele será localizado em uploads. Então há outra maneira como ele está criando aqui. Por exemplo, o, algumas matemáticas aleatórias para ter uma nomeação aleatória do aplicativo ou sobre o arquivo. E então ele colocou o nome do arquivo original com traço e o sufixo único que ele criou antes. Vamos fazer de outra maneira. Então eu criaria uma constante. Vamos chamá-lo de bom nome. E este nome de arquivo será o arquivo em si que obtivemos o nome original. Já está definido. E então dizemos, alguma forma, para substituir os espaços, não é bom ter espaços na nomeação dos arquivos no servidor. Porque quando você tem o URL, você terá URL feio onde ele irá substituir como com comercial t2 para os espaços. Mas aqui podemos ter exatamente o nosso substituído os espaços por divisão. Então eu estou dividindo o nome do arquivo com base no espaço e a substituição ou junção. Mais uma vez este espaço com um traço. Você também pode usar outra maneira, que é, por exemplo, ponto substituir cada espaço por um traço. Ambos os lados estão bem. Então, também podemos adicionar algum prefixo ou sufixo a este nome. Então aqui podemos dizer o nome do arquivo. E, por exemplo, podemos dizer muito encontro agora. Então, aqui DataNode agora método, se nós vê-lo, ele irá retornar o número do dia. Então, podemos experimentá-lo com o console do Google Chrome. Você pode dizer “encontro” agora. E você vai ver que você tem o número da data e a hora agora. Portanto, este é um grande número único para criar nossos arquivos. Então, depois disso, criamos uma constante. Vamos torná-lo como uma constante, não como um VAR. E essa constante é chamada de upload. Novamente, chame-o, por exemplo, opções de upload. E essas opções de upload, precisamos passá-lo para a nossa solicitação de post onde estamos criando o produto exatamente da mesma forma como ele é descrito na biblioteca Malta. Então, se vemos aqui que temos também o único upload e Avatar e o nome do campo. Nome do campo, precisamos enviá-lo do front-end. Então aqui dizemos opções de upload, ponto, único, e o nome do campo para onde eu quero enviar a partir do front-end. Então eu digo, por exemplo, imagem. Mas aqui quando estamos criando o produto, estamos analisando pedido ponto corpo ponto imagem. Isto é errado. Precisamos editar este campo para ter o caminho completo da imagem. Então, eu sou Walter já nos enviou com este pedido, o arquivo. Então não podemos dizer, por exemplo, nome do arquivo constante é o arquivo de ponto de solicitação, o nome do arquivo ponto. E este nome de arquivo vindo daqui onde nós configuramos o nome do arquivo enviado. Então vamos ter o nome exatamente como nós tê-lo desta maneira. Como o nome original do arquivo, substituído por traços e depois traço, eles não sabem. Vamos fazê-lo desta forma. Temos um nome de arquivo e, em seguida, colocamos o nome do arquivo aqui. Mas quando eu quiser buscar esses dados no front-end, e eu quero ver o, OR, por exemplo, exibir a imagem no front-end. Terei que emitir isso. Eu vou ter apenas o nome do arquivo. Por exemplo, eu obteria imagem 300, 300 pontos J Beck. E isso é um problema para nós porque no front-end não sabe o caminho original do arquivo. Precisamos de alguma forma ter o caminho completo com a URL também do backend. Então eu vou dizer http, localhost 3000 e a pasta de upload. E então a imagem com o nome e a extensão. Sentimos que também chegou aqui para adicionar a extensão. Então nós temos o nome do arquivo apenas como este. Precisamos também editar as opções de nome de arquivo aqui. Para ter também com a extensão. Veremos isso quando estivermos validando o arquivo nas próximas palestras. Mas agora vamos nos concentrar nesta parte que precisamos do URL completo, não apenas o nome do arquivo. Para isso, precisamos construir de alguma forma essa corda. Então podemos dizer constante. Podemos dizer caminho base, como o caminho base fora de sua aplicação. E podemos fazer isso com backticks de alguma forma, como ponto de pedido. Tem um campo chamado protocolo. E este protocolo devolverá para mim o HTTP. E então vamos ver que temos dois pontos barra barra e precisamos passar o host. Assim, também podemos fazê-lo da mesma maneira. Podemos dizer pedido ponto get, obtendo um campo específico chamado host. Esta é uma maneira de obter o host a partir da solicitação. Então agora construímos nosso caminho base. Vamos adicionar quatro. É também a parte onde estamos dizendo a pasta onde ele é carregado. Por isso, temos de acrescentar também esta parte. Para que possamos dizer assim. E então adicionamos apenas o nome do arquivo. Então podemos dizer aqui, depois disso temos backticks, caminho base, e o nome do arquivo. Desta forma, nós construímos nossa URL API ou URL de arquivo carregado. Dessa forma, temos o caminho base é esta parte e o nome do arquivo, que é esta parte. Vamos tentar isso agora com o carteiro. E experimente se tudo está funcionando bem. 57. Como testar upload com with: Agora vamos testar nossas mudanças com o Carteiro. Você se lembra, nós criamos aqui o campo de imagem, que terá o caminho e o nome do arquivo que é carregado. Indo para o Carteiro. Precisamos criar uma solicitação de post na API do produto e adicionamos a autorização com o token de barreira que obtivemos antes. E nós temos o token aqui para lembrá-lo, nós temos esse token depois de obter um usuário conectado. Então aqui vou eu. E então eu olho em um usuário com seu e-mail e senha, então eu vou obter o token. Isto. Se você não sabe como obter este token, o que explicamos isso no capítulo do usuário. Está bem, mas agora como podemos testar o Carteiro para carregar ficheiros. Você se lembra que estávamos enviando o corpo da solicitação como um JSON, e estávamos criando o JSON aqui e estávamos colocando o nome do produto ou a descrição do produto ou a descrição e o preço. Mas aqui será diferente um pouco. Na frente, será algo como uma forma. Formulário era campos como você vê lá dentro direita da tela. Então aqui temos um campo onde vamos preenchê-lo e enviá-los para o backend. E o campo de arquivo onde o usuário pode fazer upload de um arquivo. Isso será preenchido com um arquivo de dados, e os dados do arquivo serão enviados para o backend através de um formulário de dados. Então precisamos criar algo como um formulário de dados e homem em relevo. Se você quiser simular um formulário, você pode criar um formulário de dados e cada campo será nomeado aqui com seu valor. Por exemplo, terei aqui o nome do produto. E, por exemplo, o produto que quero publicar será o produto seis. E eu quero também, por exemplo, descrição do produto. E aqui será o produto procura descrição. Então precisamos de alguma forma colocar todos os campos que queríamos como vimos anteriormente, o modelo de produtos que temos aqui. A descrição lê, descrição, imagens e tudo aqui. Então precisamos ter o campo de imagem, deixe-me sentir os campos aqui no Carteiro. E então vamos falar sobre as imagens. Então aqui nós preenchemos todos os campos de formulário que precisávamos enviar para o backend e com seu valor. Então, para a imagem aqui, ele vai evalue, não será, por exemplo, textos como aqui, ou um valor, ou um número ou um booleano. Será um arquivo. Então, como podemos fazer isso como um arquivo? É muito simples. Temos carteiro, Há um truque que quando você coloca o mouse, o campo, onde você quer mudar? Você pode selecionar que o tipo desse campo pode ser um arquivo. Quando você coloca o arquivo, você terá sua capacidade de selecionar um arquivo do seu PC. Exatamente como você está carregando um arquivo no formulário da Web. Então vamos selecionar uma imagem. Eu tenho aqui, muitas imagens, por exemplo, esta aqui. E vamos fazer o upload e enviar o pedido de postagem. Veremos que a solicitação de postagem é criada exatamente como fizemos isso no back-end. E temos a imagem como um URL completo. E o arquivo de imagem com a mesma extensão aqui. Mas se você ver aqui que nós temos uma extensão e, em seguida, a nomeação, então nós temos um problema aqui. Então precisamos de alguma forma excluir esta extensão e colocar esta data ponto depois, e então colocamos a extinção no final. Vamos fazer isso rápido. Vamos alterar a sua configuração aqui da nomeação do arquivo em Walter para obter o nome do arquivo derivado com a extensão. Então vamos mudar esta parte com os backticks será mais agradável no código. Então podemos ter o nome do arquivo Dash, este documento agora. E nós precisamos aqui para adicionar de alguma forma a extensão para que possamos dizer ponto e aqui será a extensão de onde eu vou obter a extensão. Na próxima palestra, vamos ver como validar esses arquivos que estão chegando ao back-end. Então, precisamos que o usuário faça upload apenas de tipos específicos de imagens. Precisamos que ele envie apenas JPEG e PNG. Portanto, não podemos deixá-lo aplaudir, por exemplo, um arquivo PDF ou, por exemplo, um arquivo XML. Então precisamos de alguma forma o back-end para recusar um pedido quando não há uma imagem. Isto é o que faremos na próxima palestra. 58. Validação tipos de arquivos de arquivos de upload: Certo, agora precisamos criar nossa extensão. Mas primeiro dissemos que precisamos validar os arquivos enviados do usuário. Para fazer isso, precisamos criar uma lista de arquivos que são permitidos que backend completo para aceitar. Então podemos definir uma constante. Nós dizemos o tipo de arquivo mapa. E este mapa de tipo de arquivo conterá uma lista de extensões que podem ser carregadas no meu back-end. O primeiro campo será a imagem PNG. E depois PNG. Por que eu fiz isso dessa maneira. Então aqui temos a chave como um ponto de imagem PNG e o valor é um PNG. Isso precisamos disso por causa do tipo mime. Tipo mímico. Se você o Google, é tipo imediato e conhecido como extensões de e-mail de internet multiuso ou tipo mime. E este é um padrão que indica a natureza e o formato de um arquivo de documento. Cada solicitação é enviada para o back-end. E o arquivo que está contendo o arquivo de dados ou os dados do arquivo, também tem um tipo MIME. Um tipo MIME tem um formato como este. Então eu recebo e PNG documento dxdy. Assim, desta forma, eu posso definir qual é o tipo de arquivo que está vindo para o backend. Os três tipos mais importantes que precisamos em nosso back-end são este, PNG, JPEG e JPEG. Então aqui vamos ter esses tipos. E em Walter, quando eu quero configurar o nome do arquivo, eu posso encontrar aqui algo chamado tipo mime. Assim, o tipo MIME irá incluir as informações ou as informações do arquivo com a estação de tinta do tipo mime aqui. Então, para termos a extinção certa, vamos fazê-lo desta forma. Extensão const igual ao laboratório de tipo de arquivo e obter o valor do tipo MIME de lote de arquivo. Então aqui ele irá para esta matriz e tomar o tipo MIME, que vem um destes, e então atribuir a extensão como um valor. E aqui eu vou obter o valor ou a extensão para o meu nome de arquivo. Certo, falamos sobre validação do arquivo. Então precisamos de alguma forma validar o arquivo se ele tem permissão para ser carregado ou não. No retorno de chamada do destino, você pode definir o erro. Então, quando há um erro, o retorno de chamada irá jogá-lo aqui. Então, primeiro podemos fazer uma constante é arquivo válido, por exemplo. E usaremos o mesmo conceito aqui. Então ele vai obter o tipo mime e verificá-lo se ele é encontrado no mapa que eu atribui no meu back-end. E em Node.JS, podemos definir um erro. Então eu posso dizer aqui, deixar o erro de upload é igual a novo erro. E podemos dizer que o erro é um tipo de imagem inválido. E então podemos verificar se há, é válido. Em seguida, faça este erro de upload como freira. E, em seguida, usa o erro de upload no retorno de chamada. Portanto, se o arquivo é válido, não há erro e o retorno de chamada será executado. Lembra-te, enviámos um ficheiro com o Postman e tem este nome. Então agora não vamos ter este JPEG aqui. Teremos isso no final. Talvez ele fique aqui, mas teremos pelo menos extensão no final. Vamos testar isso com um carteiro. Agora, com o nosso formulário, tenho os mesmos dados, mesma imagem que enviei. Envie esse pedido, eu recebi uma imagem enviada. E vamos verificar a extensão. Vamos ver que tem a extensão no final e o nome do arquivo. E aqui está a imagem funcionando bem. Vamos tentar fazer upload de um arquivo, mas não da imagem. Podemos dizer, por exemplo, um PDF. Então eu tenho aqui um PDF de teste. Vou fazer o upload dele. E temos o erro. Então temos um erro, esse tipo de imagem inválido, que criamos aqui. Então, aqui no front-end, vimos que quando carregamos o PDF, conseguimos o problema. Mas o que, por exemplo, J peg, enviar esse pedido. Não temos nenhum problema. Temos o caminho completo e temos também a extensão. E toda vez que faço uma solicitação de upload, recebo novos dados e uma nova data e o arquivo, é o mesmo, mas é carregado novamente com um nome diferente. Indo ao nosso banco de dados no Atlas, podemos verificar o arquivo ou o produto que é criado. Vamos ver o produto tem a imagem e tem uma URL completa. Portanto, isso será acessível a partir de qualquer lugar em nossa aplicação. Mas devemos ter algo como excluído da autenticação. Porque se você se lembrar, todas as API são autenticadas. Então não podemos fazer nada sem sermos autenticados. Mas precisamos que isso seja público, o que veremos nas próximas palestras. Na próxima palestra, vamos ver se o arquivo é realmente existe. Portanto, se não houver um arquivo ou imagem para o produto, precisamos rejeitar o pedido. 59. Carregamento de imagem com solicitação de post de produtos: E se o front-end me enviar o pedido sem um arquivo? Então esse campo de imagem requerido seria recusado a lidar com isso. Vamos primeiro verificar se temos um arquivo em nossa solicitação. Então eu vou aqui e criar uma constante, chamá-lo de arquivo e dar a esta constante o valor do arquivo de ponto de solicitação. E exatamente com a categoria, podemos fazer o mesmo com o arquivo. Então eu digo se não houver arquivo, então retorne um erro ao usuário de que não há arquivo. Desta forma, teremos certeza de que nosso pedido não passará sem um arquivo. Quando vamos para o Postman e enviar o pedido sem arquivo, vamos ter que não há nenhuma imagem lá pedidos. Na próxima palestra, veremos como usar imagens para carregar várias imagens, que serão, por exemplo, uma galeria sobre o produto. Assim, em uma solicitação, o usuário enviará vários arquivos, não apenas um arquivo. E isso acontecerá no campo de imagens. 60. Carregamento de imagem com solicitação de colocação de produtos: Quando vamos atualizar um produto, também, precisamos nos preocupar com a imagem. E daí se o usuário quiser fazer upload de uma nova imagem para seu produto, como se ele quisesse atualizar a imagem em si. Para isso, vamos fazer os mesmos passos que fizemos para o post. Então precisamos adicionar as opções de upload, bem como para a solicitação PUT. Então nós adicionamos aqui e então nós vamos fazer algumas mudanças aqui. Então, primeiro, se o usuário não carregar nenhuma imagem, então eu quero manter a imagem antiga que está no banco de dados. Mas se ele carregar alguma imagem, então eu preciso enviar e carregar novamente a imagem para os arquivos e, em seguida, adicionar o novo URL para o banco de dados. Vamos fazer este cão ecoar. Então, primeiro de tudo, eu quero encontrar o produto. Então eu adiciono aqui uma constante chamada um produto e o produto encontrar por ID, pedido dot powerapps dot ID, e então eu verifico se não há nenhum produto, em seguida, retornou para mim status 400, que é produto inválido, Ok, agora está tudo bem. Então garantimos que o usuário está realmente inserindo um produto específico e chegado. Outra coisa, então vamos obter o arquivo em si. Então eu diria arquivo const e este arquivo, nós viemos com o seu arquivo ponto de solicitação como fizemos exatamente com um pedido de post. E então eu vou definir um caminho que é chamado caminho de imagem. E este caminho de imagem está vazio. Vou usá-lo para preencher o caminho da imagem. Ou ele será o antigo que já está no banco de dados, ou então você arquivo caminho se o usuário carregou uma nova imagem lá pedido PUT. Então, como uma lógica, vou dizer se arquivo, então exatamente como fazemos com o pedido de post. Vou definir um nome de arquivo e, em seguida, de caminho base. E eu vou dizer que o nome do arquivo ou o caminho da imagem será exatamente o mesmo que temos aqui. Então, teremos o caminho base e também o nome do arquivo juntos como botão Imagem. E então, se não houver nenhum banho de imagem ou se houver arquivo, então eu diria que o caminho da imagem é o mesmo o caminho da imagem antiga que foi definido anteriormente quando o produto foi criado. Então eu diria produto, essa imagem, a antiga porque eu tenho o ano produtivo e eu garanto que o produto realmente existe. Então eu não estou jogando um erro para o usuário. Então, com certeza, o produto tem um valor aqui. E então eu vou dizer se são cinco, então carregue o arquivo e me dê o passado para ele. Senão, dar o caminho da imagem será a imagem do produto, que foi anterior. E então aqui vou dizer que a imagem será o caminho da imagem com os dados atualizados. Mas aqui vamos renomear esse produto. Então podemos dizer um produto aqui para obter o produto. E podemos dizer aqui, produto atualizado eo produto atualizado, Eu encontrá-lo e, em seguida, verificar e, em seguida, enviar esse pedido de volta com os dados atualizados. Portanto, essas são as alterações necessárias para a solicitação PUT. Neste caso, você não receberá nenhum erro e você vai ter quaisquer problemas quando você está carregando a imagem novamente ou quando você não carregar a imagem. Então, o usuário aqui tem opção, ele pode fazer upload de imagem ou não no pool, solicitação. 61. Carregamento de várias imagens com produtos: Ok, aqui nós tínhamos um único arquivo, então nós carregamos apenas um arquivo para a API. Mas aqui precisamos de vários arquivos para a galeria de produtos. Da mesma forma, podemos alterar este pedido de post para aceitar também um vários arquivos. Mas vamos tornar um pouco mais complicado ter um verdadeiro exemplo prático. Normalmente, quando você está atualizando um produto ou adicionando um produto, a segunda coisa que você faz é carregar a galeria de imagens. E isso acontece normalmente nas lojas web. Depois de criar um produto, tudo está bem. Em seguida, você vai e edita o produto novamente para ablar a galeria de imagens. Então, vamos criar uma API específica apenas para carregar a galeria de seu produto. Esta API será uma solicitação de atualização, não uma solicitação de postagem. Então precisamos do pedido de correio. Então eu copio este pedido post. Vamos até o final e adicioná-lo aqui. Além disso, podemos manter a ID do produto e também podemos adicionar suas dúvidas onde vamos atualizar apenas as imagens da galeria. Então aqui podemos adicionar imagens de galeria. E, em seguida, o ID do produto. Como vimos antes na solicitação de post do produto, adicionamos também a opção de upload única imagem. Também podemos adicioná-lo à solicitação PUT. Então, podemos adicionar aqui opções de upload, mas não único. Vamos dizer “array”. Então vamos esperar do front-end nossa matriz de arquivos, vamos chamá-lo emite. E se você notar aqui que o método array está me dando também uma contagem máxima. Assim, você pode permitir o tamanho máximo de upload de arquivos. Então, por exemplo, eu diria máximo, eu preciso de 10 arquivos ou 20 arquivos em uma solicitação. Então vamos colocar como 10. Morremos mais nosso código. Então vamos ter isso em uma nova linha. Então não podemos dizer que este está aqui. E aqui, o método assíncrono. E aqui temos o porto e temos aqui o conteúdo do nosso pedido PUT. Assim, a solicitação de atualização de seu produto será atualizar exatamente esses dados, mas teremos apenas as imagens, não todos os dados. Então podemos fazer o mesmo que fizemos aqui. É copiar esta parte para ver se o usuário está passando o ID exato ou correto. Não precisamos verificar sua categoria porque não estamos atualizados. Então, vamos ter este também. Mas como dissemos, tínhamos todos os dados. Precisamos atualizar apenas a imagem. Então campo de imagem será matriz de imagens. Então, como vimos aqui, matriz de strings de imagem ou caminho da imagem. Então precisamos aqui de alguma forma para construir uma matriz de cordas. Então podemos ouvir, digamos, buffers de imagem. E esses observadores de imagens seriam valiosos como uma matriz de cordas. Então, como vamos construir esta matriz primeiro nessa solicitação, como vimos antes, que podemos ter arquivo de ponto de solicitação. Ou se você ver que temos um arquivo também não só. Então podemos dizer que os arquivos serão arquivos constantes. E exatamente como antes, podemos verificar se há arquivos. Então eu vou loop dentro desses arquivos e construir as imagens incomoda matriz. Então aqui eu vou mover isso para cima e dizer arquivos mapa ponto. E isso terá arquivo. E dentro deste método de arquivo, podemos dizer Caminho da imagem é ponto push, o nome do arquivo ponto fino. Mas não temos que empurrar apenas o nome do arquivo. Precisamos empurrar também a URL base e também com a extensão. Então, se você se lembra, nós criamos aqui a URL base, que nós construímos para as solicitações de postagem. Então, podemos copiar esta parte também e ir para o método put e dizer aqui a URL base ou o caminho base. E empurramos o caminho base com o nome do arquivo. E aqui podemos devolver o produto. Então exatamente como o pedido PUT, podemos verificar se há produto, então isso é lagoas ser os dados do produto. Caso contrário, será um erro. Então copiamos esta parte e colocamos aqui. Vamos testar isso com o Postman sobre o que temos a ver com o carteiro, que colocamos vários arquivos aqui. Então vamos criar um campo, chamá-lo, por exemplo, imagem. E esta imagem será um arquivo. E selecionamos dois ou imagem, por exemplo. E não nos esquecemos disso para alterar a API. Então aqui será Galeria de imagem e o pedido é colocado. E precisamos também da identificação do produto. Exactamente este. Vamos pegar nosso produto, ou produto é o produto seis, que criamos antes. E agora vamos adicionar o ID aqui. E enviaremos esse pedido. Nós temos o nosso erro, eu esqueci aqui para adicionar produtos. Então, teremos o caminho certo. Agora vamos tentar. E então veremos o produto foi atualizado. E nós temos duas imagens na galeria e imagem principal, Ele ainda está lá. Vamos verificar a nossa pasta de envios. Veremos que temos duas imagens, esta e esta. Assim, no front-end, sempre vamos atualizar nossa galeria ou atualizar um produto e adicionar a ele as imagens da galeria. Isso é tudo sobre esta seção. Na próxima seção, vamos ver como buscar o URL da imagem, para que possamos vê-lo no navegador e no front-end, porque agora ele está bloqueado e não temos acesso a ele porque está protegido com nossa API autenticação. 62. Com exclusão de uploads da pasta da autenticação: Agora vamos tentar obter este URL e colocá-lo no navegador, o URL da imagem. Então, colocamos no navegador e veremos que o usuário não está autorizado. Isso porque se você se lembra, em nosso JWT, estávamos definindo o banho é que são permitidos para público. Então, precisamos adicionar o caminho da pasta de upload para ser permitido para que qualquer um possa ver essas imagens. Caso contrário, teremos um problema. Portanto, a loja virtual não mostrará as imagens do produto. Então vamos copiar este. Será exatamente o mesmo Git e opções. Precisamos também substituir este pelo caminho da pasta uploads. A expressão regular para este é este. Eu tenho barras, barras públicas uploads em tudo vem depois dele. Vamos salvá-lo. E vamos para o nosso navegador. Refresque. Veremos erro de que não podemos obter imagem de upload público. Por que isso porque é uma pasta estática. Precisamos definir esses upload público como uma pasta estática no middleware de nossa aplicação. Então, para fazer isso, precisamos ir para o nosso app.js. Então vamos aqui e dizemos “use”. E então definimos o caminho que precisamos para torná-lo estático. Então, envios públicos. E, em seguida, no Express, há método para dizer que esta é uma pasta estática e uma palavra-chave reservada, que é terrível nome retornar para mim o caminho raiz ou o caminho raiz do aplicativo. E mais o caminho que eu queria torná-lo como uma estática. Então agora este caminho, qualquer arquivo pode ser carregado para ele. Não será como uma API. Será como um caminho estático que está servindo os arquivos. Então, de volta ao navegador e fazemos uma atualização. Ainda recebemos o erro. Isso porque eu preciso adicionar barra atrás do público. Atue com nosso navegador e atualize. Vamos ver a imagem que já tínhamos no front-end sem qualquer autenticação diretamente pelo URL. Agora nosso back-end está pronto. Criamos as rotas, quatro categorias, pedidos, produtos e usuários, que precisamos exatamente para nossa loja eletrônica. Vamos passar agora para a parte front-end e você verá mais do que coisas novas e como nos reconectamos a esse back-end e criamos nossa interface de webshop. 63. Estrutura de aplicativos no comércio NgShop: Ok, nesta palestra vamos ver o que é o design ou a estrutura da página da nossa loja virtual. O cliente me deu um arquivo XD. Xd pode ser aberto com o Adobe XD, e este aplicativo pode usar para fazer um wireframes. E como você vê aqui, o designer me deu este design e eu posso mover componentes, tirar alguns layouts, algumas colorações. Então eu posso usá-lo também para o meu estilo e para o meu CSS. Mas a estrutura da página em geral, como você vê aqui, que temos como algum cabeçalho. Temos, por exemplo, algum banner. E temos também uma lista de categorias e alguns produtos em destaque. E quando você clicar em um dos produtos, você terá os detalhes do produto. E você também terá adicionar ao carrinho ou ir ao seu carrinho. Teremos várias páginas. Então teremos a página inicial e uma página de contato e a lista de produtos. Então vamos ver como vamos estruturar o aplicativo em Angular e como vamos fazer isso com NX. Então, se mudarmos, por exemplo, para uma visão de programação ou desenvolvimento de visão, podemos dividir nossa aplicação para componentes. Eu chamo este aplicativo como loja NG, como costeleta angular. Então, se formos para o próximo slide, veremos a estrutura da página que precisaremos para esta aplicação ou esta loja de comércio eletrônico, precisamos de duas aplicações. Primeiro, precisaremos de um e-shop, que exibirá o front-end ou como veremos o produto sai da página do carrinho, etc. E também o painel de administração, o painel de administração, que controlará todos esses front-end. Então, teremos algumas ferramentas e tabelas, editar, excluir. Assim, podemos ter todas as funcionalidades que refletirão o front-end. Então, o administrador da questão, ele pode dar uma olhada em suas ordens. Ele pode dar uma olhada em um produto. Até agora do NX, veremos que cada pedido de emprego precisa de uma página inicial. Precisamos de uma página de lista de produtos, precisamos de uma página de detalhes do produto, check-out do carrinho. E também precisamos de uma página de login para que o usuário possa fazer login e salvar seus dados e seus pedidos também. 64. Criação de pasta e instalação angular: Ok, agora vamos fazer um trabalho prático. Primeiro de tudo, estou abrindo o Visual Studio Code e vou instalar o Angular CLI. Angular CLI, significa interface de linha de comando. Então, podemos executar comentários de Angular, como executar aplicativo ou serviço aplicativo ou testá-lo, ou gerar componentes e módulos, como veremos mais tarde. Então, se formos para o Google e digite Angular CLI, veremos no primeiro link o Angular CLI. Então instalação de Angular CLI, vamos ser feito com como pacote Node instalar globalmente. Então traço menos g ou traço g está instalando globalmente do Angular CLI. Vamos tentar isso em nosso código do Visual Studio. Então eu vou primeiro e abro o terminal. Como podemos abrir o terminal? É muito simples. Você não pode dizer Control Shift e J, ou Command Shift J. E ele abrirá para você o terminal. E em alguns casos pode ser apenas Controle J. Então aqui você terá o terminal aberto. Podemos instalar o Angular CLI. Então eu vou copiar esse comando, que é npm instalar menos globalmente em barra angular CLI. E aqui ele começa a instalar globalmente o pacote. Então eu serei capaz de executar comandos angulares em todos os lugares do meu PC. Se você estiver usando o Mac, talvez você chegue ao erro. Assim, você verá que você não está tendo permissões para instalar algumas bibliotecas globais. Então o que você faz normalmente você pode dizer pseudo antes do comentário madeira. Então eu vou dizer senha sudo e, em seguida, iniciar a instalação novamente. E você verá que Angular CLI foi instalado com sucesso. Se você estiver usando o Windows, você não terá esse erro. E se você tiver, você pode abrir o Visual Studio Code como administrador. Então vamos tentar alguns comandos angulares. Podemos dizer “mg ajuda”. E você vai ver aqui que você vai obter ajuda de comentários Angulares. Por exemplo, há algumas análises de anúncios, alguma documentação e linting e veiculação. E como você vê aqui na documentação da CLI, você pode verificar todos os comentários. Então você tem que adicionar e você constrói NG config e você implanta, et cetera. Mas não estamos interessados neste curso sobre o comando angular. Precisamos de um comando X. Como veremos mais tarde, que o NX é uma biblioteca global também, que está localizado sobre comentários angulares. Então, na verdade, quando estamos executando e comando X, estamos executando comandos angulares internamente. O mais importante agora que temos angular instalado globalmente e podemos criar uma pasta, por exemplo, a minha área de trabalho. Eu diria que CD este top. E eu vou fazer um diretório terrível. Então eu vou chamá-lo, por exemplo, com o nome da minha empresa. Vou dizer, por exemplo, a minha empresa, está bem? E podemos acessar minha empresa. E aqui teremos a nossa aplicação tudo o que teremos o nosso repositório de espaço de trabalho, que conterá todas as aplicações e bibliotecas em Angular e em NX. 65. Componentes, módulos, serviços no Angular: Porque este é um curso prático e estamos fazendo o exemplo do mundo real. Se você é iniciante em Angular, talvez você precise saber quais nossos componentes, módulos, serviços. E como você vê aqui, que você pode imaginar comigo que você vai construir algum aplicativo em Angular. Eu não quero ir para dizer o que é módulo, o que é componente com o serviço? Muito parte teórica. Não, vamos fazer isso na prática. Eu só quero que você imagine comigo que o módulo é contêiner de componentes e serviços. Assim, o componente em Angular tem algumas partes onde você pode definir o modelo HTML e o estilo dele, como CSS. E para codificar o script que se comunicará com o serviço e o próprio serviço. Ele vai se conectar ao backend do seu aplicativo. E, em seguida, o back-end, vamos pegar dados do banco de dados. Então você está obtendo os dados através do backend para o front-end. Então temos muitos módulos também em Angular, que eles possam se conectar uns aos outros. Então você pode usar alguns componentes deste módulo nesse módulo. E também talvez os componentes, podem conter ou chamar alguns outros componentes, como veremos mais tarde. Então, esta imaginação, vai ajudá-lo muito neste curso. Então você não precisa saber o que é cada detalhe sobre essas partes. Então você só precisa saber que o módulo é contêiner de componentes e serviços. E os componentes se comunicam com os serviços. E talvez outros módulos possam se conectar a este módulo. Vamos ver alguns exemplos práticos. Tenho o módulo do produto na minha loja virtual. E eu tenho dois componentes, que são nós podemos dizer componente lista de produtos onde eu estou listando todos os produtos. E outro componente onde eu vejo o detalhe do produto quando eu clicar em um dos itens aqui, dentro deste componente, eu vou para a página onde eu vou ver os detalhes do produto. E quando eu quero ver quais são os dados deste, por exemplo, lista de produtos, eu preciso ter um serviço no front-end e chamar do backend para o banco de dados. Os dados que quero mostrar. A mesma coisa acontece aqui. Quando eu vou para esta página, eu vou pedir que o serviço me traga dados através do backend do banco de dados para mostrar os detalhes do produto, como o preço, imagem, nome ou descrição. Então, neste caso, você pode criar aplicativos Angulares. Então aplicações angulares, na verdade, eles são módulos. E os módulos podem se comunicar uns com os outros para construir todo o aplicativo. Nas próximas palestras, vamos ver como construir esses módulos e torná-los comunicativos juntos para construir todas as aplicações. E no final, você verá que o aplicativo é construído dessa maneira. Então temos usuários de ordens de módulo, módulo, módulo de produto, e todos eles, eles têm seus próprios serviços e seus próprios componentes se comunicando com o mesmo backend e mesmo banco de dados. 66. O que é NX e MonoRepo?: Bem-vindo à primeira palestra desta seção. Vamos saber o que é n-x e o que é mono REPL. Vamos começar com a maçã Monod. O significado do relacionamento Manet como Prêmios é dividido em duas palavras. Primeiro, modelo, que significa relatório sozinho ou único, que é repositório. Como um repositório do GitHub onde estamos armazenando nosso código. E Mano ondulação é uma estratégia de desenvolvimento de software onde o código para muitos projetos é um armazenado no mesmo repositório. Então, como você vê aqui, temos aqui App 12 e até três. E esses aplicativos estão todos no mesmo repositório, que está sob o nome da empresa. Além disso, vemos que esses aplicativos estão compartilhando algumas bibliotecas. Então Mano ondulação é um repositório, vários projetos e bibliotecas compartilhadas. E, claro, cada aplicativo tem seus próprios componentes ou módulos próprios. Esta é a definição geral do relatório mauna. Ok, quem está usando o relacionamento Mono em geral? As empresas mais famosas como Google, Microsoft, Facebook, Uber e Airbnb, e Twitter estão usando hoje relatório mono, por exemplo, relatório Google mauna é considerado o maior do mundo. E também é chamado de sistema de grande escala e deve ser tratado por dezenas de milhares de contribuições todos os dias no repositório com o tamanho de mais de 80 terabytes. Certo, por que uma ou uma época? Por que isso é tão importante? Quais são as vantagens da ondulação mono? Primeiro, facilidade de reutilização de código. Como veremos mais tarde em nosso exemplo do mundo real, vamos ver como estamos usando módulos novamente em várias aplicações. Outro recurso é o gerenciamento simplificado de dependências, que está em um ambiente de vários repositórios onde vários projetos dependem da dependência de terceiros. Essa dependência pode ser baixada ou compilada várias vezes. Preciso baixar a biblioteca para cada projeto. Mas em Amã, Aleppo construído pode ser facilmente otimizado. Assim, podemos ver que a referência ou as bibliotecas externas podem ser baixadas uma vez para vários projetos, como veremos nos próximos pontos. A terceira característica do hipopótamo de manana é “commits atômicos”. Commissão atômica, o que significa sincronização entre as dependências. Então, quando há alguma atualização vem para uma das bibliotecas, todos os projetos serão notificados e eles receberão essa atualização. E também colaborações entre as equipes. Então estamos falando aqui de vários projetos. Temos várias equipes. E a calibração entre várias equipes será mais aprimorada quando estiverem indo tudo da mesma maneira usando as mesmas bibliotecas ou suas mesmas bibliotecas compartilhadas. E a parte mais importante, política JSON de pacote único. Então, por exemplo, quando você está usando o sistema de gerenciamento de empacotamento npm ou Node, em seguida, você terá um único pacote, JSON. Então você não tem para cada projeto como pasta de módulos de nó separados. E dessa forma, você está economizando muito espaço, ok, depois que vimos as vantagens, vamos passar para os contras. Então, é claro, cada tecnologia ou cada método de desenvolvimento de software tem alguns contras. O primeiro é manter as configurações. Então, sempre quando temos vários projetos com configuração diferente, teremos um problema quando algumas colunas Atualizar. Então, precisamos manter todas as configurações após cada atualização de biblioteca que é compartilhada entre os projetos. A segunda é coordenar um processo de liberação. A mesma coisa, esse processo de lançamento pode se tornar complicado, já o conhecimento de quais componentes devem ser liberados depende da equipe de desenvolvimento. A terceira desvantagem é a criação de todo o projeto. Configurar o projeto localmente pode levar um longo tempo para cada componente tem seu próprio leia-me e tem várias variações. Então, quando temos um novo projeto configurado, precisamos novamente vincular todas as dependências a esse projeto. Então, vamos nos sentir mais demorado para configurar todo o projeto. Ok, depois disso, vamos ver o que é um X? E X é uma maçã menorah e é um DevTools. E não podemos dizer que é baseado em TypeScript mono ou ferramenta EPA, que é construído em cima de Angular, criança surda, CLI e esquemas. Além disso, funciona também com outras tecnologias, como veremos mais tarde. Ele também fornece um espaço de trabalho, CLI e um cache de computação baseado em nuvem, e um ótimo suporte a IDE em nível de idioma. E x foi criado pela equipe Angular no Google. E então os membros do núcleo decidiram começar uma nova empresa chamada romance, fornecendo uma cadeia de ferramentas x. Então, quando você verificar o site do NX, você verá que ele é fornecido pela Norval. Novamente, vamos ver Y e X são bons. Ou por que precisamos n-x e x fornecer ferramentas para lhe dar os benefícios de uma ondulação mono. Sem isso, os sacos de linha de símbolo chamado co-localização. Então eu não preciso configurar o menorah ou manualmente. Existem ferramentas ou comentários que me ajudaram no NX a criar todos os projetos configurados sem fazer qualquer arquivo de criação à mão. Também n ovos Fornecendo uma execução comentário mais rápido, como eu disse. E x é uma estrutura de arquivos. Então eu não preciso criar os arquivos manualmente. Eu não quero criar componente em Angular manualmente. Então, por um comentário, eu faço uma execução de comentário mais rápida para gerar o componente e seu arquivo de dívidas e os estilos. E também é controlado chamado de cadeira. Então, quando eu estou criando uma biblioteca, ele é compartilhado e controlado por todos que são membros dos projetos dentro dos aplicativos NX fornecendo diagrama de arquitetura preciso. E este diagrama mostrando que a dependência entre as bibliotecas e os aplicativos e dependência circular se você tê-los e corrigir todos os loops que estão levando a circular. E tem também um grande negócio i, vamos vê-lo nas próximas palestras. E a característica mais importante que quando você está construindo um projeto ou testando-o, ele não vai levar muito tempo porque ele vai testar apenas o que é alterado. Portanto, ele irá testar apenas os arquivos afetados que você alterou. Portanto, isso também é bom para o desenvolvimento. Você não precisará ter Hall construído novamente ou teste inteiro. Novamente. Você terá acesso ao repositório Git pelo NX e ele fará para você apenas os arquivos afetados ou alterados. Finalmente, vamos ver o que está apoiando anexo. As seguintes tecnologias como Angular, React e NodeJS são as estruturas onde um suporte X. Então você pode usar e x com Angular, Reagir e NodeJS, você pode ter também um projeto ou repositório que todas essas estruturas compartilhando uma biblioteca ou várias bibliotecas. Na próxima palestra, veremos um exemplo do mundo real sobre NX. 67. Visão geral no exemplo do mundo real - E-Shop: Bem, vamos passar agora para um exemplo do mundo real. Na verdade, não entendo as ideias só quando vejo um exemplo real. É por isso que o objetivo deste curso não é ler uma documentação, mas vamos ter um exemplo real do meu trabalho. Na verdade, estou trabalhando em uma empresa e quero mostrar como estamos trabalhando, como estamos compartilhando os recursos e bibliotecas usando o NX. Então vamos seguir em frente. Presumo aqui que eu tenho na minha empresa, que é o repositório do projeto no topo. Então, em um repositório, estou colocando três aplicativos. O primeiro é o aplicativo e-shop, e o segundo é o aplicativo de blog interno. E vamos falar sobre o painel de administração mais tarde. Este aplicativo de e-shop tem seus próprios componentes. Portanto, esses componentes não são compartilhados com os outros aplicativos. Então, como vemos aqui, temos E-sharp componente home, que é a página inicial e também destaque banner produtos. Então, onde eu vou mostrar os produtos em destaque e também categorias, como eu vou listar as categorias do meu componente de e-shop e lista de produtos, onde eu vou listar todos os produtos e usar algum filtro para que o usuário ou o cliente possa entrar em o problema, filtre por categoria, por exemplo, e veja a lista de produtos. Além disso, teremos um componente de detalhes do produto que exibirá os detalhes do produto e também componente onde o usuário pode fazer login e ver seu histórico de pedidos. E, finalmente, confira e componentes do cartão. O checkout onde a pessoa está inserindo seus dados ou endereço de entrega para que ele possa fazer seu pedido. O carrinho está abrindo a página do carrinho para ver o que está dentro do carrinho. O que compramos lá. Ok, este aplicativo e-shop não compartilha esses componentes com quaisquer outros aplicativos porque as outras obrigações não estão interessados sobre esses componentes. Por exemplo, o aplicativo de blog interno não está interessado em exibir o componente de lista de produtos porque é um blog. Assim, o aplicativo de blog terá o seu próprio, por isso terá homepage e também lista de posts e também um serviço de post. Esse serviço de correio é algo onde posso pegar dados do banco de dados. Posso pegar minhas postagens no banco de dados. Estes dois aplicativos estão compartilhando algumas ações. Vamos começar primeiro com o login deles. Então, quando eu quero criar um aplicativo como e-shop, Eu preciso de uma página de login e também o mesmo para o aplicativo de blog. Eu também preciso de um login. Normalmente, se você estiver trabalhando normal Angular com aplicação autônoma, você criará o login aqui novamente. E a mesma coisa que você vai fazer para o e-shop. E quando surgir alguma atualização, você precisa atualizar o login aqui e fazer login aqui. Esta é a aplicação do trabalho, a aplicação do trabalho em equipe. Então, em que é positivo 3, podemos criar uma biblioteca, como veremos no NX. E como conversamos antes, que teremos uma biblioteca. E esta biblioteca irá conter um componente de login, componente página e registro, e serviços de usuário onde eu posso pegar usuários e também ver como adicionar usuário, usuário registrado, etc E também serviços de autenticação para que o usuário pode procurar ou sair ou outros serviços, como proteger as APIs. E quando o usuário logado, precisamos quando atualizamos o aplicativo ou quando o usuário visita o aplicativo. Mais uma vez da questão, por exemplo, precisamos que ele fique logado, por exemplo, por um dia. Então, para isso, vamos usar User State Store e também para sessões. Então, esses dois aplicativos estão compartilhando todos esses recursos. Então precisamos ter uma biblioteca que seja compartilhada para ambos. A mesma coisa. Aqui vai, por exemplo, para alguns componentes da interface do usuário, como por exemplo, eu preciso de um banner. A Banner terá alguns serviços para pegar dados do banco de dados. E veremos que e-shop tem um banner em sua própria página. E a mesma coisa para o bloco interno, também deslizante e carrossel. Ok, vamos continuar agora para o painel de administração. Esses dois aplicativos precisam do painel de administração. Então, primeiro, vamos começar com esta biblioteca. Por que o painel de administração que compartilha esta biblioteca está compartilhando por causa dos serviços. Preciso usar esses serviços. Então eu preciso pegar banners do banco de dados e, por exemplo, postar banners que conteúdo no banco de dados. E, como você vê aqui, temos edição de conteúdo de banner e controle deslizante. Então, o administrador vai olhar, alterar esse banner e, em seguida, ele será exibido no aplicativo de e-shop. Além disso, o aplicativo admin precisa log n, Então precisamos proteger o painel de administração também. Então precisamos ter um componente de login. Mas, por exemplo, eu não preciso de um componente de registro. Mas como o componente de registro é compartilhado entre esses dois aplicativos, então eu preciso colocá-lo aqui. E a coisa boa, quando eu não estou usando o componente de registro no aplicativo painel de administração na compilação de produção, Eu não vou ver este componente de registro. Mesmo que eu esteja usando esta biblioteca. Então NX automaticamente fornecer quente para mim exatamente o que eu usei das bibliotecas e que irá refletir o tamanho do aplicativo ou o tamanho do pacote. Certo, e os produtos? Os produtos que estamos pegando aqui a partir do banco de dados e exibi-los como produto menos detalhe produto. Precisamos dos serviços. Portanto, esses serviços podem ser localizados em uma loja. Mas agora porque painel de administração tem também adicionar formulário categoria de produto e também listagem de uma tabela de produtos. Então precisamos ter um serviço compartilhado entre o aplicativo do painel de administração e o aplicativo de e-shop. Você vê isso direito, como estamos compartilhando os recursos. É a mesma coisa para as ordens. Veremos que os pedidos, Eu preciso apenas dos serviços e eu estou compartilhando entre o aplicativo Admin e o aplicativo e-shop. Mas o blog interno não tem ordens. Então, no painel de administração, preciso editar o formulário de pedido e listar a tabela de pedidos. E a mesma coisa aqui. Eu preciso fazer um pedido como adicionar um pedido como dos usuários quando eles fazem o checkout. E também preciso ver o histórico de pedidos do usuário. Então eu preciso de um serviço para pegar informações para mim no banco de dados. Ao mesmo tempo, precisamos ter uma loja estadual para o carrinho. Então, onde eu posso colocar a loja estadual, eu posso colocá-la na biblioteca, ou eu posso colocá-la aqui. Sem problema. Mas eu prefiro tê-lo aqui, mesmo que seja usado apenas pela questão da aplicação. E, claro, você tem a opção de colocar a loja estadual aqui. Não, qualquer problema. Ok, para entender a idéia mais, eu gostaria de fazer outra aplicação ou quarta aplicação, que também é um tiro. Então eu estou em uma empresa, nós construímos três aplicativos e agora um novo cliente vem. Ele quer um design diferente e um layout diferente para o seu problema. Não vou mostrar-lhe a imagem diferente, mas vou mostrar-lhe como vou categorizar os componentes. Vamos seguir em frente. Então, apenas uma dica para você, como eu construo este diagrama, como eu desenhei, estou usando uma ferramenta chamada Draw Dot io. Esta é uma ferramenta muito grande, para que você possa construir seus próprios diagramas. Ele é fornecido com um monte de formas, o que irá ajudá-lo a construir diagramas de explicação. Então, vamos seguir em frente e criar nosso próprio aplicativo, ou outro aplicativo do E-sharp. Então eu vou me mudar para cá e fazer isso maior um pouco, e nós teremos um espaço para outra aplicação. Então vamos imaginar que estamos realmente codificando em Angular. Então eu vou ter aqui uma e outra aplicação. Vou criá-la aqui. Vamos chamar, este é e-shop até um ou cliente 1. E este é o cliente do aplicativo e-shop para, para que possamos copiar este cliente para. Ok, também, ele terá sua própria página e-sharp. Pode ser destaque banner pode ser, por exemplo, categorias lista banner. Então vamos copiar todos esses itens e colocá-los aqui. Vamos mantê-lo assim, por exemplo, agora. Então, como você vê aqui que temos muitos componentes compartilhados. Precisamos colocar esses componentes em lugares onde possam ser compartilhados. Eu não tenho componentes duplicados somente se eu estiver criando um novo componente que não existe em outro problema. Por exemplo, a página inicial será diferente entre esses dois recortes. Então eu manteria este componente aqui, e-shop homepage, que é diferente deste e destaque banner do produto. Posso colocá-lo na biblioteca compartilhada. E também o banner da lista de categorias. Posso colocá-lo na biblioteca compartilhada também. lista de produtos, componente de detalhes do produto e também histórico de pedidos do usuário. Então vejo que tudo pode ser compartilhado. Então colocamos todos eles aqui e excluímos todos esses componentes daqui. Então a única diferença entre este E lojas para cada OBS é apenas este componente, que é a página inicial. E eles estão compartilhando todos esses componentes. Então é melhor colocá-los aqui. Talvez alguém pergunte, se esses componentes tiverem estilos diferentes entre dois Esopo? Vou mostrar-lhe no exemplo prático como podemos criar um CSS especial para cada e-sharp no repositório NX e usar o correto que você quiser. Por exemplo, eu diria criar um tema, tema de CSS. O layout será o mesmo, mas o CSS será diferente e o estilo. Espero que entenda como estamos estruturando nosso projeto no mundo real. Então vamos ver nas próximas palestras como vamos construir esta estrutura com Angular. Vamos usar todos um comando X para construir todo este repositório. 68. Como instalar NX: Para criar nossa estrutura, qual falamos antes, precisamos de um x CLI. É exatamente algo como Angular CLI. Então eu vou para o Google e digite ECS CLI. E no primeiro resultado, vou para este link. E eu vou ver que no Excel I é uma ferramenta de interface de linha de comando que ajuda você a desenvolver, construir e manter aplicativos. Então vamos ver como gerar aplicativos. Vamos ver também como executar um servidores web. E também podemos gerar gráfico de dependência, como veremos mais tarde, e et cetera. Então vamos instalar primeiro NX, e ele será instalado globalmente. Então, primeiro, vamos novamente para o nosso Visual Studio Code, e vamos digitar o mesmo comando quando instalamos o angular. Então bem, vou dizer aqui sudo npm instalar não Angular CLI, mas NX. Novamente, ele vai me pedir uma senha e, em seguida, ele vai começar a instalar a linha de comando NX para mim. Ele vai me dar erro porque eu tenho que NX já instalado. Então, basta executar este comando, ele irá ajudá-lo a instalar o NX para ter certeza de que tudo está instalado, você apenas mergulha em x. E quando você obtém isso, então significa que você tem um X. Por enquanto, isso é o suficiente. Só precisamos ter certeza de que instalamos o NX para passar para as próximas palestras e ver como podemos trabalhar com ele. 69. Como instalar extensões para programação rápida: Nesta palestra, vou mostrar-lhe algumas extensões que irão ajudá-lo a codificação rápida. Primeira extensão é chamado de serviço de linguagem angular. Portanto, esta extensão irá ajudá-lo a completar automaticamente alguns comandos em Angular. Então, como você vê aqui neste Give, ele irá ajudá-lo a completar automaticamente o que está dentro do script. Então temos um modelo, como vimos antes, que temos modelo HTML. E no modelo HTML às vezes precisamos acessar algumas variáveis que eles estão no script. Portanto, esta biblioteca irá ajudá-lo a acessar essas variáveis ou métodos que estão no arquivo de script. Outra extensão que precisamos também é uma mais bonita. Falamos anteriormente sobre mais bonita e como instalá-lo. Eu criei um vídeo especial para mais bonito porque ele precisa de alguma configuração. Então, se você não sabia sobre mais bonito, ele estará nas extensões do Visual Studio Code. Então você pode chamá-lo aqui e configurá-lo. Outra extensão incrível que eu estou sempre usando é chamado polarizador de pera de suporte. Então podemos dizer polarizador de pera de suporte. Portanto, esta extensão irá ajudá-lo também a colorir os colchetes por grupo. Assim, desta forma, você vai saber o que é o início eo fim de seus colchetes, especialmente se você tem um muito grande objetos aninhados, honesto e fechamentos. Então aqui você vê como é colorir com base no início e no fim. Funciona para suportes curvos e suportes normais. Outra grande extensão que estou usando é chamado de navegação CSS. E esta extensão irá ajudá-lo a acessar qualquer classe diretamente indo para a definição. Então, como você vê aqui neste dar, quando você clica em alguma classe no CSS, você vai para essa classe, ou quando você pressionar Control e clicar na classe. Então, como você vê aqui, nós estávamos em arquivo HTML. Saltamos para o arquivo CSS do aplicativo, onde o vidro está. Ok, se você não quiser instalar essas extensões manualmente, Eu anexado com esta palestra algum arquivo JSON que você pode localizar como o seguinte. Então você vai para a pasta do projeto. Eu abri aqui My Folder Project. Então dizemos que estava na área de trabalho, minha empresa. E aqui eu abro o projeto e crio uma pasta, chamo de ponto VS Code. E dentro deste código VS, localizarei um arquivo chamado extensões. Então aqui eu crio um arquivo, eu chamo de estender shells que JSON. E aqui dentro extensão para JSON, vou dar-lhe o arquivo que você precisa copiar. Então, será listado nas recomendações. E você verá aqui todas as extensões que você precisa para este curso. E depois de salvar este arquivo e você ir para as extensões novamente e digite recomendado. Então, quando você colocar em recomendado, você vai obter menos das extensões recomendadas, que eles estão listados aqui neste arquivo. Então você só precisa instalar todos eles e, em seguida, você está pronto para codificação. 70. Como criar Nx para sua equipe ou empresa: Ok, Agora vamos começar uma codificação real e trabalhar com um exemplo real com projeto do mundo real, como falamos anteriormente, que temos este repositório que vamos implementar neste curso. Então, precisamos primeiro criar um espaço de trabalho ou repositório de trabalho. E neste repositório de trabalho, vamos dar-lhe um nome. Normalmente, o nome nas empresas, pegue o nome da empresa. Assim, a empresa está criando suas próprias bibliotecas e aplicativos próprios, e todos eles são compartilhados juntos ou a empresa é muito grande, você pode dividir repositórios com base em Teams. Por exemplo, eu diria equipe de e-shop, por exemplo. E, por exemplo, equipe de aprendizado de máquina e, por exemplo, outro tema para desenvolvimento móvel. Então, neste caso, posso dividir pelo nome da equipe. Então eu vou assumir neste curso que vamos criar repositório para a nossa empresa. Voltamos ao Visual Studio Code, fechamos tudo. E também fechamos essa pasta e, em seguida, anexamos o terminal novamente. E aqui vamos digitar criando um novo espaço de trabalho usando NX. Então, se formos para um dev x-dot, você verá na página inicial e px criar um espaço de trabalho ECS. Então, quando vamos para começar, vamos ver o primeiro comando para criar um espaço de trabalho. Vamos copiar este comando e voltar para o nosso código do Visual Studio no terminal. Cole aqui. E temos uma predefinição, angular porque suporte NX e outras estruturas como React e também não JS. Assim, MPI x, que é um comentário empacotado com MPM, é trabalhado para criar um espaço de trabalho ou aplicativos. Então, quando pressionarmos Enter, ele nos dará uma notificação. Qual é o nome do espaço de trabalho? Isto é o que eu disse antes. Será o nome da empresa ou o nome do tema. Então, para mim, eu gosto do nome Blue Bits. E qual é o nome do primeiro aplicativo? Como vimos antes, temos vários aplicativos para que possamos criar ou digitar o nome do primeiro aplicativo neste repositório ou neste espaço de trabalho. Então será loja NG. E o que é um estilo é usado dentro deste N G afiado ou nesta aplicação? Prefiro Sas. E quanto a linting ES LND ou o Estlund? A ferramenta de linting moderna agora é camada ES, que irá corrigir para você todos os erros que podem acontecer durante a codificação. E isso lhe dará erros. Então ele vai encontrar e corrigir todos os problemas em seu código JavaScript como veremos mais tarde. Então eu vou selecionar ES fiapos porque TS terra, como você vê aqui na notificação que é usado por Angular CLI. E ficou obsoleto e usa o NX Cloud. É como algo para construir o projeto e executar alguns detalhes e integração do GitHub. Então dizemos que não. E veremos que agora está criando o espaço de trabalho. Vamos começar a instalar alguns pacotes usando MPM install, tudo é feito automaticamente. E como você vê aqui, o pacote foi instalado com sucesso. Adicionar, instalar mais pacotes que são necessários para este projeto continua a criar aplicativos. E você compra como você vê aqui e todos os arquivos necessários. E esta loja ND é um projeto Angular. Então estamos prontos e temos todos os arquivos necessários para o nosso projeto. Então vamos abrir esse projeto. Vamos para o arquivo ou podemos clicar nesta pasta ou neste ícone, e clicar em Abrir pasta. E irei para onde instalei minha empresa, como você se lembra. Então aqui e eu verei o nome deles, Blue Bits. Vou entrar nesta pasta e clicar em abrir. Então ele vai abrir para mim todo o projeto. E vamos falar agora sobre esses arquivos. Mas primeiro, veremos que também está recomendando outras extinções necessárias para o desenvolvimento. Vamos clicar em instalar. Por exemplo, que é a extensão chamada jest runner, que é uma ferramenta para testes de unidade. Então voltamos ao nosso aplicativo e vamos verificar esses arquivos. Então, como você vê aqui, temos um aplicativo de pasta. Então, neste aplicativo, ele será localizado meus aplicativos como loja de doces e também o painel de administração. Então aqui teremos duas aplicações. E o que é isso? N G afiado, E para E. Este é o teste final. Então você precisa ter também aplicação para isso, para testes de ponta a ponta. E na pasta de lábios, veremos que estamos localizando aqui nossas bibliotecas. Atualmente está vazio, mas veremos mais tarde como criar essas bibliotecas. Por exemplo, a biblioteca de interface do usuário como falamos antes, e também biblioteca de produtos ou faz biblioteca, etc. Então eu acho que aqui todos os aplicativos estão usando a mesma pasta módulo nó. Portanto, para cada aplicativo que você instalar aqui ou criar aqui, você não precisa criar outra pasta de módulo de nó. A mesma coisa que você tem aqui, um pacote JSON. Então você terá as mesmas bibliotecas que são usadas todas entre estas aplicações. E o pacote Jason é criado automaticamente pelo NX para atender a todas as informações necessárias que são necessárias para criar ou criar aplicativos e servi-los. Veremos todos esses comandos mais tarde e essas bibliotecas também. E neste arquivo JSON anexo, você verá os projetos listados e as bibliotecas que vamos criar. Nós também não vamos sobre essas tags mais tarde. Então aqui, todas as informações sobre este espaço de trabalho. O que é importante para nós é esta parte, como você verá nas próximas palestras. E JSON angular, como você sabe, aplicações angulares estão sempre vindo com algumas configurações. Por exemplo, você precisa incluir alguns estilos específicos que estão dentro do aplicativo. Então, como você vê aqui que temos aqui todas as aplicações listadas em projetos. Então temos aqui qualquer loja. E quando criamos outro aplicativo, teremos, por exemplo, aplicativo do painel de administração. Então, neste caso, você verá toda a configuração relacionada a esta aplicação Angular. É como se você estivesse trabalhando em um aplicativo autônomo, mas sob o pico de espaço de trabalho. Então, quando eu quero criar um estilo específico, por exemplo, eu tenho aqui estilo CSS, que é o padrão, que vem com Angular. Então, se formos aqui, abs e G-sharp, SARC, e vamos ver aqui estilos, CSS, pasta de ativos onde você está localizando as imagens ou alguns formulários. Então você pode localizado na pasta de ativos e você deve declarar que para o aplicativo principal ts é o ponto de entrada para nossa aplicação onde estamos bootstrapping todas as bibliotecas e todo o código TS que estamos escrevendo em um HTML índice, será o ponto de entrada para o nosso modelo. Então, como você vê aqui, nós temos aqui a cabeça e o corpo, e dentro dele há raízes de beterraba azul. Então, nesta rota, vamos chamar este componente, que é o ponto de entrada para a nossa aplicação. Portanto, ele já tem um modelo padrão. Acho que vamos limpar isso. Mas primeiro, vamos executar este aplicativo para ver como podemos executá-lo. E então vamos excluir todo esse conteúdo para começar nossa edição. Se você se lembra, eu lhe disse anteriormente que cada aplicativo contém componentes e módulos e serviços. Então, aqui está um módulo que contém um componente atualmente, que é chamado componente aplicativo. Você pode criar tanto quanto quiser componentes. Veremos que também mais tarde, como se comunicar e trabalhar com esses componentes. E a coisa boa aqui e oito cobras que ele vem também com configuração mais bonita. Então você pode configurar o seu mais bonito como você quiser. Então vamos adicionar de volta nossa configuração para mais bonita como configuramos antes, que possamos pegá-los, copiá-los. Eu os copiei. Eu os coloquei aqui de novo. Então temos a largura superior quatro e imprimir tweets 160. E alguma outra configuração que você carregou na cotação de ES Linde mais bonita também é configuração para o linting, como veremos também mais tarde. E o bom recurso aqui que quando você vê algum arquivo de configuração, por exemplo, ES lint RC, você verá um global e um específico para a aplicação. E quando você quiser fazer algo como um específico para este aplicativo, ou especialmente LinkedIn para este aplicativo, você pode adicionar sua configuração aqui. Mas para avisar que você deseja uma configuração global, você pode adicioná-la. Pasta global lá. A mesma coisa para o café datilografado. Você verá aqui que você tem uma configuração geral para o TypeScript. E dentro T é aplicação de tosse. No nível de aplicação, você verá uma especialidade é conflito para cada aplicação, não vamos tanto em detalhes, nosso objetivo de construir a nossa aplicação. E vamos ver sempre que precisamos usar esses arquivos e precisamos configurar isso. Então, vamos agora tentar executar este aplicativo. Será aplicação angular, que é chamado de loja ND, e vamos executá-lo. Então abri meu terminal de novo. E é muito simples. Eu apenas digitar x, morrer de fome e, em seguida, o nome do aplicativo. Então eu vou dizer loja NG. Então, aqui ele começará a servir esta aplicação. Então eu posso vê-lo no meu navegador. Então, agora o aplicativo é compilado com sucesso. Vamos abri-lo em nosso navegador. Então eu vou aqui para o meu navegador e digite localhost 4200, e vamos ver que o aplicativo está em execução. Então, quando eu vou para o aplicativo novamente, para a página inicial deste aplicativo, exclua tudo. E eu vou colocar H1 e eu vou dizer E afiado ou NG e-shop. E salve-o e abra novamente o navegador que veremos e G-sharp. Então, desta forma, estamos servindo o aplicativo. Colocamos o serviço NX e o nome do aplicativo. 71. Como criar aplicativos (aplicativo de painel administrativo) (App)): Ok, nesta palestra, vou mostrar-lhe como adicionar mais aplicação para o seu espaço de trabalho. Então, se você se lembra, nós temos que criar dois aplicativos. Primeiro é a própria e-shop, onde os clientes estão entrando e navegando em nossos produtos. E o segundo aplicativo será o painel de administração para este e-shop. E no painel de administração, verei como posso editar meus produtos, editar usuários e editar pedidos. Então vamos criar agora o aplicativo Admin. Então, aqui no painel, vou usar isso para manter o serviço do aplicativo NDA. Você pode abrir várias janelas de terminal clicando neste plus. E aqui você terá outra janela de terminal. Então agora você pode criar um novo aplicativo. Então precisamos executar algum NX. E este comando NX será um gerador. E no romance é o nome da empresa que criou qualquer repo X Mono. E então o tipo de aplicativo que eu tenho é angular. E então eu vou dizer aplicativo, criar para mim aplicativo. E então eu nomeei o aplicativo que eu quero. Então eu vou dizer aqui admin. Então Admin app, ou admin, ou admin E sharp, qualquer nome que você está livre para selecionar. Então eu vou criar um administrador e, em seguida, vamos ver como ele está criando o aplicativo. Ele vai me perguntar primeiro para o que é um sistema de estilo que eu preciso para esta aplicação? Estou sempre a usar o SAS. Você tem liberdade para selecionar qual você deseja. Vou usar o SAS. E então ele vai me fazer outra pergunta sobre se eu vou usar roteamento nesta aplicação. Na verdade, ele vai gerar um novo módulo para mim para roteamento. Veremos isso mais tarde. Então não se preocupe com isso. Faça sim, e falaremos sobre isso mais tarde. Então, neste caso, criando o aplicativo. E vamos ver agora em nosso explorador de arquivos, vamos ver que temos admin e N G afiado, e cada aplicativo tem teste de ponta a ponta. Então, agora vamos tentar servir com este aplicativo. Então, podemos executar este aplicativo na outra janela. Temos um terminal aqui que já estamos executando nosso aplicativo, que é NGA e-shop. Mas agora também podemos executar até a aplicação juntos. Então vamos deixar uma clara. E então vamos ver NX servir como vimos anteriormente, que servimos. E, em seguida, o nome do aplicativo. Então, será admin. E como você vê aqui, é muito inteligente. Ele está me dizendo que essa porta já está em uso porque eu estou usando essa porta para o aplicativo anterior, que é N G nítido. Então aqui está me perguntando, você quer usar outro porto? Vou dizer que sim. Em seguida, ele irá selecionar porta aleatória para mim. E então eu posso abri-lo no navegador com esta porta. Se você quiser selecionar um relatório personalizado, você não permite que um extra gere para você a porta. Você pode simplesmente colocar menos Minos porta e, em seguida, o número da porta que você deseja. Então eu estou escolhendo 4.100 e executar este comando. E, em seguida, teremos que o nosso aplicativo está sendo executado nessa porta. Então, se formos novamente e para o navegador e navegar para o host local, temos 4.200 é usado para loja de energia. Vamos abrir outra conta. E vamos tentar dizer anfitrião local 4.100. E vamos chegar aqui o administrador, que é aplicativo admin. Então, voltando para a rota do aplicativo ou rota do aplicativo, como vimos anteriormente, já temos esse código personalizado. Vamos removê-lo e, em seguida, tentar fazer cada um. E vamos dizer, por exemplo, painel de administração. Vamos salvá-lo, voltar para o nosso navegador, e veremos que ele foi atualizado para o painel de administração. Então, neste caso, estamos executando agora para aplicativos juntos. 72. Criação de componentes de nível de aplicativos: Anteriormente, vimos como criar a estrutura para o aplicativo. E de uma forma teórica, dissemos que algumas aplicações têm seus próprios componentes. Por exemplo, como você vê aqui, que o aplicativo de e-shop tem componente de página inicial e-sharp e também banner e categoria e componente de lista de produtos. Porque esses componentes não são usados em outros aplicativos. Então nós os colocamos no nível do aplicativo. Então este é o significado de componentes de nível de aplicativo, mas os componentes de nível de biblioteca, eles são os componentes que estão localizados nas bibliotecas ou em suas bibliotecas compartilhadas, como o componente de login e o componente de registro. E nesta palestra, vamos ver quais são os comentários que criam para mim os componentes no nível de aplicação. Então vamos criar primeiro um componente homepage. E dentro desse componente homepage, teremos cabeçalho e rodapé. Vamos fazer isso prático e nos afastar da teoria. Certo, então estamos aqui agora. Nós vamos criar componentes, especialmente para aplicação de loja NG. Então não vamos fazer para o administrador. Veremos isso no próximo passo. Então, primeiro de tudo, vamos usar também a linha de comando para criar componentes. Então, como você viu anteriormente, já temos um componente padrão, que é chamado componente aplicativo. Este componente de aplicativo é o ponto de entrada para o nosso aplicativo, e isso é exatamente o que vemos no navegador ou no ponto de entrada do aplicativo em geral. Então, como vimos anteriormente, que este componente pode chamar também outros componentes. Então, podemos criar outro componente, e vamos chamá-lo aqui no componente aplicativo. Então, primeiro de tudo, abrimos um novo terminal e criar um componente com n x será da mesma maneira. Como estamos criando aplicativo, mas é principalmente semelhante ao Angular. Então vamos ter um componente de geração de x. Se você está acostumado a Angular, você pode dizer mg gera componente. Mas aqui estamos dizendo um x, g, que é um atalho para Gerar e, em seguida, componente. E então você pode especificar o nome do seu componente. Por exemplo, eu quero dizer home page, por exemplo. E, em seguida, porque você está usando um espaço de trabalho X, você precisa especificar o projeto. Então, precisamos especificar o aplicativo. Então o aplicativo que temos aqui é N G afiado. Então eu vou colocar menos projeto igual a loja NG. Então aqui, neste caso, eu vou ter o componente criado no choque NG para ter certeza de que seu componente é criado da maneira certa, você pode executar o seu comando a seco para que você não vai executar nada. Você só vai ver o que o comum deles fez. Então você não verá nenhuma mudança na estrutura aqui. Você só verá aqui na linha comum o que ele realmente fez. Então podemos dizer menos, menos uma corrida seca. Então execute este comando no controle remoto, não faça nada. Vamos pressionar Enter. Vamos ver que temos erro, Eu acho que porque eu tenho espaço aqui entre projeto e N G afiada. Então vamos tentar remover este espaço. E então tente de novo. Veremos que está realmente funcionando. Então, quando você recebe esse erro, você que tem que ter cuidado com o comando para não ter espaços entre o comando e o valor. E se você perguntar como estou retornando aos comentários anteriores, estou usando setas para cima e para baixo no teclado. Então você pode entrar na história de seus comentários. Então, como você vê aqui, eu uso isso como o último. Veremos que o componente é criado em aplicativos. Você compra, origem, aplicativo, página inicial e componente de página inicial. E como você vê aqui, ele deve estar localizado aqui. Então aplicativos e você compra componente de origem e, em seguida, aqui. Mas normalmente estamos localizando as páginas dentro de algumas pastas. Estamos localizando os componentes dentro também algumas pastas que expressam sua funcionalidade como veremos mais tarde. Então, porque esta é uma página, eu criaria uma pasta, chamaria de páginas. E dentro destas páginas, vou colocar a página inicial. Então, como podemos fazer isso? Podemos fazê-lo de forma muito simples. Nós apenas dizemos páginas barra e, em seguida, você pode passar o nome do seu componente. Então, quando pressionamos enter com uma execução seca, vamos ver que o componente é criado na pasta de páginas aplicativo, página inicial, componente homepage. Então, como você vê aqui que criamos uma pasta dentro do aplicativo. Então vamos tentar executar este comando sem executar seco para ver o que exatamente ele está fazendo. Então, quando eu clicar em Enter sem execução seca, eu vou ver que eu criei um componente ou uma pasta com o meu componente. Então, da mesma forma, Vamos criar outro componente para a página de listas de produtos. Então podemos dizer o mesmo. Eu digo páginas. Lista de produtos e, em seguida, nome do projeto e G-sharp. Então eu vou pressionar Enter, e então eu vou ver que eu criei outro componente dentro de páginas. Então eu tenho agora dois componentes. E cada componente ou cada pasta de componente conterá o modelo HTML onde eu escreverei meu HTML e o arquivo de estilo, e também o arquivo de teste, e também o arquivo TypeScript onde eu vou pegar dados para o front-end. Você também pode estruturá-lo de maneira diferente. Você pode dizer páginas e, em seguida, dizer, por exemplo, básico. E, em seguida, no básico, você coloca Homepage Fale Conosco, por exemplo, sobre nós, etc. E outra pasta dentro de páginas, você pode dizer, eu quero criar uma pasta de produto. E dentro dessa pasta de produtos, você coloca a lista de produtos, detalhes do produto, pedidos de produtos, etc. E se você ver na linha comum, você verá que esses arquivos são criados e alguns arquivos são atualizados. Qual arquivo é atualizado? É o módulo de aplicativo dentro deste aplicativo. Como você se lembra, nós definimos anteriormente que o módulo contém vários componentes, modo que seu recipiente de componentes da minha aplicação. Então aqui estou dizendo que este módulo irá conter vários componentes, que é AB componente, o básico, e, em seguida, o componente homepage e o componente de lista de produtos. E então podemos tentar verificar como esses componentes estão funcionando. Então temos aqui, por exemplo, componente homepage. Tem um parágrafo PIE e trabalhos de página inicial. Então vamos nos referir a este componente, consulte nossa aplicação para usar este componente. Então, no nível do componente do aplicativo, vou escrever a tag deste componente. Então, como sabemos que tag deste componente, você pode ir para seus ts componentes e você verá algo chamado seletor. E neste seletor, você verá que ele é criado pelo nome da nossa empresa e pelo nome do componente. Então, podemos copiar este, o nome da empresa Anteriormente que definimos quando definimos o espaço de trabalho. E é claro que você pode mudá-lo como quiser. Então, por exemplo, vou dizer aqui, e-shop homepage. Então precisamos fazer isso. Então eu posso fazer aqui. E então eu copio este e colá-lo aqui como um elemento ou como um seletor. E eu pressiono Salvar, e eu pressiono um para este. E temos anteriormente que nossos projetos estão sendo executados. Então é compilado com sucesso. E voltando para o navegador, veremos que este aplicativo já está sendo executado e temos componente em execução lá. Vamos adicionar também o outro componente sob ele. Então, voltamos para a nossa aplicação e usaremos também o seletor do componente. Então eu vou pressionar aqui pedaços cresceram. Podemos ficar com ele e, claro, você pode mudar o nome como quiser, mas há regras. Veremos essas regras mais tarde. Então aqui temos criando esse segundo componente. Eu salvo, ele é compilado com sucesso. Volto ao navegador, vejo que esses dois componentes estão funcionando. Então, esta é uma maneira de criar componentes com a linha de comando NX. E veremos mais tarde como estruturar melhor e melhor. 73. Rotação para componentes de nível de aplicativos: Bem-vinda de volta. Nesta palestra vamos falar sobre roteamento, roteamento dos componentes. Então eu quero ter alguns URLs para se referir exatamente ao meu componente. Então eu quero, por exemplo, a página para uma lista de produtos. Então eu vou ter um link onde ele vai dizer localhost 4000 para um 100 produtos barra. E então ele vai me levar para o produto menos componente. E eu também gostaria de ter o componente homepage sem qualquer sufixo ou sem qualquer rota, como se fosse a rota padrão. Então eu vou ter aqui um componente homepage para a rota padrão e para a lista de produtos, eu vou ter localhost barra produtos. Então vamos fazer isso e ver como podemos gerar as rotas. As rotas basicamente estão relacionadas ao nível do aplicativo. Então você precisa especificar que outs no aplicativo. Além disso, você pode ter rotas especificadas na biblioteca, como veremos mais tarde. Mas agora vamos fazer o roteamento no nível do aplicativo. Então eu vou para o módulo de aplicação aqui. E na importação, eu vou aqui e digo módulo roteador. Ligue para o módulo do roteador. Você vê esta extensão, como é muito grande. É auto importando os componentes que eu quero, todos os módulos que eu quero. Então eu não preciso digitar módulo de roteador de importação do exterior angular. Eu apenas mergulho na classe e então realmente importado automaticamente quando está disponível. Então, para adicionar uma rota específica, você precisa ter o ponto do módulo do roteador para root. E aqui você vai especificar suas rotas. Então aqui temos o primeiro parâmetro, está fora? Então, antes de tudo, precisamos de uma rota para a página inicial e uma rota para a página de lista de produtos. E esta rota é normalmente uma matriz de rotas. Então precisamos, em primeiro lugar matriz e dentro desta matriz temos os objetos de que fora. Cada objeto de que fora, você precisa especificar o caminho que você deseja definir. Por exemplo, eu quero definir o caminho padrão e o componente que este banho está crescendo para se referir. Então eu vou dizer que o componente será o componente homepage. E também terei outro caminho, que é, por exemplo, o caminho da lista de produtos. Então eu vou dizer aqui produtos de banho. E dentro deste caminho, vou dizer que o componente é o componente da lista de produtos. E, em seguida, quando vamos para o navegador, vamos ver que quando eu ir para localhost que eu ainda tenho trabalho Homepage, produto menos trabalho. Por quê? Porque eu preciso especificar sua saída externa, que é baseada no componente do aplicativo ou no componente raiz. Então, para fazer isso, vamos para o componente do aplicativo e, em seguida, precisamos remover aqueles e dizer tomada do roteador. Precisamos especificar esta tag ou este seletor para especificar a tomada do roteador. Então esta tomada de roteador vai me guiar para o componente certo com base no link que eu fornecer. Então, quando eu salvar e voltar para o navegador, ele é compilado com sucesso. E então eu vou ver apenas na rota que o componente homepage. E, em seguida, quando eu quiser adicionar uma lista de produtos, Eu vou dizer produtos como eu especificado em que outs, Eu vou ver que lista de produtos trabalho. Então é assim que estamos definindo as rotas internas que se refere a outros componentes. Mas primeiro, eu gostaria de ter um código limpo. Então vamos fazer alguma refatoração. Podemos colocar este array em uma variável para que possamos ter um clean for escrito. Então eu defino aqui uma constante, chamo de rotas. E essas rotas tem um tipo de rotas e que também é importado automaticamente. E isso é igual ao meu array. Então vamos fazer como uma formatação melhor aqui. Então temos aqui o caminho, primeiro caminho e também o componente. E então eu passar essas rotas constante 2, 4 raiz, e salvá-lo. Então teremos nossas rotas aqui. Em nível mais avançado, algumas pessoas estão criando um módulo especial para suas rotas. Mas você também pode fazê-lo dessa maneira. Mas não há problema, não podemos mantê-lo assim. E veremos mais tarde quando estamos refatoração nossa aplicação, como criaríamos um módulo especial para roteamento. Por enquanto, isso é exatamente o que precisamos. Temos agora rotas internas. Temos o caminho que é o padrão, está indo para o componente homepage e também o produto que está indo para o componente lista de produtos. 74. Página com cabeçalho e Header: Ok, nesta palestra nós vamos fazer um cabeçalho e rodapé para a nossa aplicação no G-Sharp. E, claro, vamos saber como criar uma página-mestre. Assim, cada página em nossa aplicação terá cabeçalho e rodapé. Então, se você se lembrar a criação de componentes em Angular ou em NX foi neste comentário como criamos antes da lista de produtos, estamos especificando o nome do projeto. Então aqui eu vou substituir esses tipos. Então eu vou ter aqui, por exemplo, uma pasta compartilhada, compartilhada, que é como um componente compartilhado. E eu vou chamar o primeiro é cabeça e dentro e você faz compras. E, claro, eu quero ter também outro que é chamado de rodapé. E agora, como você vê aqui, temos uma pasta compartilhada com rodapé e cabeçalho. Então vamos chamar esses componentes em nossa página inicial. Então podemos dizer aqui, chame para mim o primeiro componente. Vamos para o arquivo ts para encontrar o seletor. Vou colocar este aqui. E também a mesma coisa para o rodapé. Adicione quando salvarmos e vá para o nosso navegador. Estamos agora na página de lista de produtos. Então vamos para a página inicial. Vou ver que eu tenho cabeçalho, homepage em si e rodapé. E se você ver antes que o produto não tem cabeçalho e rodapé. Então precisamos adicioná-los também lá. Então, a melhor maneira de fazer isso, precisamos fazer o cabeçalho e o rodapé como algo como compartilhado. Então podemos voltar aqui e cancelar esta chamada. Nós estamos indo para componente aplicativo. E dentro deste componente aplicativo, vamos colocar o componente de cabeçalho e o componente de rodapé e a tomada onde estamos renderizando os componentes, ele será no meio. Então, se eu voltar novamente agora para o meu navegador depois de excluir isso da página inicial. Então não precisamos mais deles. Nós tê-los agora no componente aplicativo. Eu vou para o navegador que a lista de produtos tem também cabeçalho e rodapé. Então eu vou novamente para a página inicial. Vou ver que a página inicial também tem cabeçalho e rodapé. Desta forma, eu garanto que eu tenho uma página mestre que contém sempre cabeçalho e rodapé eo conteúdo está mudando com base na rota que eu estou especificando. E estrutura de arquivos falsos. Mais uma vez, podemos dizer que temos um componentes compartilhados e páginas. E páginas. Temos homepage baseada no produto e também os componentes compartilhados rodapé e cabeçalho. E também o módulo do aplicativo foi atualizado com o novo componente que já adicionamos. Então temos aqui componente cabeçalho e componente Rodapé. Vamos ver mais tarde como fazer os estilos e estruturado os cabeçalhos e também os todos os componentes e o componente homepage, exatamente como conseguimos como um design. 75. Como citar regras de Selector componentes com ESLint: Gostaria de mencionar aqui a convenção de nomes dos nossos componentes. Como você vê aqui, está começando sempre com o nome da empresa ou o nome do espaço de trabalho que somos criados. Portanto, é melhor ter um nome especial que é baseado no aplicativo quando você está usando componentes apenas relacionados a esse aplicativo. Então eu diria que talvez possamos renomear isso, por exemplo, para terminar você loja, por exemplo, cabeçalho. E será dessa forma, nós o temos como um componente específico para o tiro de energia. Então, a mesma coisa que vou fazer para o rodapé, e então precisamos especificar a nomeação também nos próprios componentes. Então precisamos mudar os seletores. Então, substituímos isto pela loja NG. E também para o cabeçalho, vamos mudar este nome para comprar. Então, depois de salvarmos esses arquivos, precisamos também de algum lugar para mudá-lo na pista ES. A terra das orelhas é uma ferramenta onde está especificando o revestimento para a minha aplicação. Então, ele irá corrigir meus erros quando eu estou indo para construir meu aplicativo ou quando eu estou indo para implantar o aplicativo. Então aqui, quando eu estiver executando o fiapo ES, então ele vai me dizer, não, você tem um problema em seu seletor nomeação. Então, por favor, altere-o com base na regra que está no fiapo ES. Então, quando eu vou para o arquivo Eastland RC onde temos a configuração, vamos ver em uma das linhas desta configuração sobre Eastland. Veja que temos o que é o seletor de diretiva e quais são os componentes do vetor. Portanto, o prefixo é sempre bits azuis porque nós nomeamos nosso namespace ou o espaço de trabalho com base nessa empresa. Então, precisamos simplesmente mudá-lo para acabar com você loja, então não teremos problemas de alongamento ouvidos. E também, você pode especificar qual é o estilo da convenção de nomenclatura. Então você pode dizer, eu tenho um caso K-Pop, que será como nós temos aqui. E você compra menos rodapé, ou você pode especificar uma caixa de camelo. Um caso de camelo vem assim, então não temos menos, temos uma capitalização. Normalmente, em Angular, temos a directiva com CamelCase e seus componentes eleitores estão vindo como um caso K-Pop. E lembre-se, estamos editando o arquivo ES lint, que está localizado dentro do aplicativo. Nós não estamos editando o arquivo principal é vinculado porque, como você se lembra temos o arquivo ES lint, geral, e então temos um arquivo específico ES lint. Então aqui temos que colocar nossa migração, que estão relacionados exatamente a esta aplicação. 76. Linting de programação ao vivo: Na palestra anterior, vimos que precisamos de algo chamado linting e vimos que estamos modificando o arquivo ES lint. E nós dissemos que o fiapo ES está nos ajudando a corrigir problemas em nosso código. Mas como eu posso ver este poderoso lint ES que me ajuda a corrigir meu código ao vivo. Como quando estou digitando algum código, eu quero ver que erros estou fazendo desta maneira após a instalação das extensões, das extensões recomendadas que temos antes, e também as extensões recomendadas que vem com o NX. Vemos que a terra ES ainda não está habilitada. Então você precisa em código VS, você precisa clicar aqui no ES lint para habilitar o empréstimo ao vivo do seu código. Quando você clica nele, ele vai pedir-lhe que a extensão ES lint irá usar módulo Node Eastland para validação, que é instalado localmente. Então, você quer habilitar isso? Você quer permitir isso? Então você diria um baixo em todos os lugares. Quando você permite isso, então eles ES fiapos vem ativo. E então você começará a obter erros e erros do seu código. Como você vê aqui, eu cheguei aqui e erro vermelho. Por quê? Porque está dizendo, por exemplo, que eu não posso ter um construtor vazio. Ou, por exemplo, eu venho para cima tem função vazia. Isto são regras de linting. E, claro, você pode modificar essas regras de empréstimo como quiser em seu arquivo EMS Lane. Outro exemplo aqui que recebi um erro sobre nomear o seletor deste componente. Porque antes dissemos que colocamos uma regra que cada componente deve ser prefixado com N D afiado, E afiado. Então aqui funciona bem. Nós não temos qualquer erro e qualquer problema porque nós especificamos que no arquivo ES lint, dissemos que tudo ou cada componente deve ser prefixado com NG shop. Então, quando eu voltar novamente para aquele componente que me causou e um problema e eu coloquei NG loja. Eu vou ver diretamente que eu tenho que é tudo está bem. Às vezes, esses erros são irritantes, então você pode excluí-los também. Então precisamos também de alguma regra para adicioná-lo a este arquivo ES lint. Então não podemos dizer que não verificar para mim sobre funções centrais vazias. Então você tem um monte de regras que você pode modificar. Em seguida, você pode criar seu ambiente como quiser para ajudá-lo a codificar da melhor maneira que você quiser. Então, às vezes é irritante ver esses erros, mesmo você não está fazendo grandes erros. Então você pode desativar alguns desses erros que estão incomodando você. Então, quando você colocar o mouse sobre o erro, ele irá pedir-lhe para construtor vazio inesperado. Então você precisa consertar isso. Então, como consertar isso? Você saberá a regra deste link. Então, quando você clicar neste link, ele pedirá que você o abra no navegador. E quando vamos para oito, vamos ver que esta função, você possa adicionar ao seu ES lint arquivo essas regras para que você possa desligá-lo. Então, se você quiser fazer isso, basta copiar isso e voltar para o nosso código. E no arquivo ES fiapos onde eu estou colocando minhas regras ES fiapos onde escrevemos esta loja NG. Podemos adicionar uma nova regra fazendo vírgula, e copiamos essas duas regras. Portanto, nenhuma função vazia está desativada. E também eu quero desativar a função vazia para TypeScript ES comprimento. Então, podemos apenas remover esta parte. Não dizemos “me dê erro”. Dizemos para desligar. Então, quando desligo essa regra, verei que esse erro desapareceu. E também temos aqui outro erro. Veremos que seu método de ciclo de vida em, nele não deve estar vazio. É também angular ES fiapos largos. Então, também fazendo esta regra, virar esta regra, ele irá ajudá-lo também a desativar esse erro. Mas para mim, eu gostaria de ficar com ele. Há muitas funções que você pode configurar em sua terra EMS. Assim, você também pode configurá-los com base na documentação da biblioteca ES lint. Se você acessar o site, se você acessar o Google, você encontrará esta biblioteca. Chama-se Eastland. Eastland tem muitos papéis. Então você tem, por exemplo, regras, teste de unidade, mas você está interessado sobre as regras. Você pode verificar na documentação, todas as regras que você está interessado em. Acho que o que temos agora é suficiente. vez, um lembrete, você não precisa configurar essa regra somente no nível do aplicativo. Porque se você se lembrar, temos ES arquivo vinculado no nível do aplicativo e também um global. Você pode configurá-lo no global. Então, desta forma, você não obterá erros entre todos os aplicativos e bibliotecas que você está indo para criar. Então eu adicionei aqui, salvá-lo, e nós salvá-lo aqui. Nós o removemos de uma regra de aplicativo específica. 77. Extensão NX NX: Nas palestras anteriores, vimos como estamos criando componentes através da linha de comando usando uma CLI EQ. Mas o NX tornou a vida mais fácil criando e extensões, que acelerará nossa codificação e geração de componentes, módulos, serviços, etc. Quando você configura um espaço de trabalho, o projeto vem sempre com a recomendação de extensões, como vimos anteriormente, novo console angular. E essa extensão já está disponível nas extensões pesquisando NX ou no console ECS. Então você pode iniciar esta extensão clicando aqui. E você sempre é capaz de usar a linha comum do NX, mas em alguma interface gráfica do usuário. Então, por exemplo, eu gostaria de gerar um componente. Então eu vou aqui para NX e clique em Gerar. E então eu vou obter uma lista de itens de gerador de testamento em Angular. Vimos anteriormente essa linha de comando como estamos criando aplicativo. Vimos também como estamos criando um componente, como vemos aqui. Também podemos gerar diretivas. Em guardas armados, um monte de tipos de elementos que são fornecidos por angular. Eles podem ser criados aqui. Vamos, por exemplo, criar um componente. Novamente, como vimos anteriormente. Eu vou obter algumas informações que eu tenho que colocar o nome do componente, o nome do projeto, e também módulo. Se eu quiser algum módulo específico e o estilo que é usado para este componente, você pode, por exemplo, CSS ou SCSS é depender de sua escolha e muitas outras opções como você vê aqui. Então, se vocês se lembram que temos dois projetos aqui. Então temos admin e loja ND, e vamos trabalhar neste curso em ambos. Então vamos gerar, por exemplo, uma página para o painel de administração. Então, podemos dizer que eu quero componente, chamá-lo de painel. E o nome do projeto é admin. E como você vê aqui, toda vez que eu estou digitando algo, ele está executando aqui, o comando, mas com a bandeira de corrida seca. Então, como você vê, eu crio um painel no projeto de administração e, em seguida, eu obtive. Projeto de administrador do painel. Mas eu queria entrar em uma pasta específica. Então eu vou dizer páginas barra painel. E ele será novamente executado como uma corrida seca e nós vamos buscá-lo aqui. Então, como você vê, temos todas as habilidades da mesma forma que uma linha de comando. Então eu vou preencher este campo. Então temos aqui páginas barra painel. O projeto é admin. Se eu quiser algum módulo específico, nem eu quero mantê-lo no módulo aplicativo como você vê aqui. E também eles usam um estilo é SCSS, eu prefiro isso, e também a estratégia de detecção de mudanças. E podemos mantê-lo como padrão por enquanto. E há outra, e há outras opções que, por exemplo, não são tão importantes para nós agora, mas precisaremos delas mais tarde, como vemos. Mas aqui também precisamos de um seletor. Você pode especificar algum seletor personalizado, como vimos anteriormente para os componentes. Então eu posso dizer painel de administração. Então aqui temos painel de administração e, em seguida, podemos ter ignorado teste. Por exemplo, eu não quero gerar o TS de especificação, que é este, que é usado sempre para testes de unidade. Então você também pode pular isso. Então, tudo isso é pode ser possível dentro desta interface do usuário. Então, quando eu clicar em Executar, então o comando será executado. Então vamos tentar isso agora. Eu clico em executar e vejo que o comentário é executado, claro, sem a execução seca, então ele está realmente executando. Então eu vejo aqui o componente de painel é criado aqui e o módulo de aplicativo é atualizado. Então você tem duas opções aqui. Você pode usar sempre um x para gerar, também executar projetos, e também fazer um teste e construí-los, que é como uma GUI para facilitar para você tudo para não digitar na linha de comando. Então, por exemplo, eu quero executar o administrador do projeto. Então eu vim aqui para correr. Então eu seleciono servir ou construir. Então, selecionarei Centro de administração e, em seguida, clique em Executar. E então ele também vai fazer o celular para mim. Então uma ferramenta selecionar alguma porta e eu posso executá-lo no navegador. Então, como você vê aqui, ele diz que o projeto está sendo executado no navegador, na porta 400, 4200. Então, se formos aqui, vá novamente para o projeto, executá-lo, e então teremos o painel de administração. Então, como você vê, isso é tudo possível através da GUI, mas cabe a você se você quiser usar a linha comum ou esta GUI. 78. Criação bibliotecas compartilhadas por linha de comando: Ok, agora estamos indo para um novo passo. Nós vamos construir uma biblioteca compartilhada. Como conversamos anteriormente, vimos que esses aplicativos estão compartilhando algumas bibliotecas para objetivos específicos. Um deles, por exemplo, u i bibliotecas e também você lá e biblioteca de autenticação. Outra biblioteca é a biblioteca de produtos e categorias. E já conversamos antes por que precisamos fazer isso. E como um lembrete rápido, eu diria que a razão foi porque nós vamos compartilhar os mesmos componentes entre esses aplicativos. Então eu preciso ter um componente de login para o painel de administração e a questão da aplicação no mesmo tempo que vimos anteriormente como criamos componentes para aplicação específica. Agora vamos ver como criar bibliotecas e criar componentes dentro dessas bibliotecas. Vou agora fazê-lo com a linha comum. E na próxima palestra, faremos isso com um x2. Lancei a extensão no código VS. Então voltamos ao nosso projeto e eu vou abrir um novo terminal. Então, clicando sobre isso mais aqui. E então eu vou executar o comando para criar uma biblioteca. Esse comando que é usado para criar biblioteca é NP x e x gerar. E, em seguida, romance, que é o nome da empresa que criou em x. e então eu vou dizer espaço de trabalho. E o tipo de espaço de trabalho será lib, o que significa que é biblioteca. E então você pode passar o nome da biblioteca que você deseja. Por exemplo, eu começaria com a primeira biblioteca, que é chamada de interface do usuário. E vamos tentar também fazê-lo no modo seco. Então, com a corrida seca, eu asseguro que a biblioteca de leis não será criada, mas apenas eu vou ver o que o comando está fazendo. Então, vamos pressionar Enter. E como você vê aqui, que a biblioteca é criada especificamente neste caminho lábios UI e com suas próprias fontes de configuração ts e código. E, claro, outros arquivos poderiam atualizá-lo como a configuração ts. Vamos ver por que e também Angular JSON, pacote NX JSON, et cetera. Então, o que veremos mais tarde que esta biblioteca é criada em lábios porque temos lábios UI código-fonte. E como você vê aqui, temos bibliotecas de aplicativos que são compartilhadas entre esses aplicativos. Então vamos tentar executar este comando sem a execução seca. Como você vê aqui, a biblioteca foi criada. E estamos vendo aqui no Explorador de Arquivos, vemos que ele tem sua própria biblioteca ou módulos próprios. Então você vê aqui que a interface do usuário tem uma fonte e salto e esta perna aqui. E você pode ter arquivo de índice para exportações, como veremos mais tarde para chamar essas bibliotecas. Disse que eu acho que aqui também que você pode especificar um me ler para esta biblioteca. Por exemplo, você pode dizer UI, e você pode dar, por exemplo, descrição para esta biblioteca. Eu diria que esta biblioteca contém os componentes da interface do usuário que são usados na empresa, por exemplo. E quais componentes, por exemplo, temos componente banner, temos controle deslizante. Temos, por exemplo, outra coisa como stepper, etc. Então, como você vê aqui, temos tudo descrito para esta biblioteca e tem seu próprio arquivo README. Certo, vamos cavar mais nos arquivos. Então vemos que a biblioteca é criada aqui. Então, neste nível, não após a fonte e no lábio, eu vou criar meus componentes. Então vamos ver como criar componentes mais tarde. E agora temos essa interface do usuário, você ou TS, que no exemplo de arquivo, apenas para mostrar como exportar funções, métodos de exportação, módulos de exportação, como veremos mais tarde. E também temos index.js. Este índice ts é usado para exportar tudo a partir desta biblioteca. Por exemplo, eu estou indo para exportar módulo. Vou exportar, por exemplo, serviço de componentes. Por isso, temos de listar aqui todas as exportações que precisamos exportar. E então podemos usá-los em outros lugares, como em aplicativos ou em outras bibliotecas, como veremos mais tarde, não precisamos cavar agora neste arquivo de índice, veremos que é impraticável como podemos usar. E novamente, precisamos também especialmente configuração Estlund para esta biblioteca. Se você quiser especificar algo não geral e específico para esta biblioteca, você pode adicionar as regras aqui. Então, neste caso, somente esta biblioteca será sensível para linting ES com base nessas regras de configuração apenas é usado para testes e testes de unidade. Vamos ver também como usar ou como fazer uma unidade testes dentro das bibliotecas em outras seções se você quiser também alguma configuração TypeScript especial em vez de quais estão no geral. Porque como você vê aqui, temos ts config dot pace, que é o principal ts config que é criado aqui. E também há uma configuração ts ou configuração TypeScript específico. Novamente, para esta biblioteca, o que fez a diferença entre esses arquivos é apenas sobre como criar referências. É só uma arrumação dos arquivos. Então você não precisa se importar tanto com isso. Então, se você quiser fazer alterações, como veremos mais tarde, você pode especificá-las na biblioteca ts config dot, que está estendendo o principal ts config, que está localizado na mesma pasta. Ok, o que os arquivos são atualizados como vemos aqui, ts config Bayes, JSON é atualizado. Então, por que foi atualizado? Ele foi atualizado porque adicionou um novo caminho para esta biblioteca. Vamos ver como usar este caminho quando estamos indo para chamar esta biblioteca ou quando estamos indo para usar componente nesta biblioteca. Então aqui vamos salvar esse caminho de alguma forma. E veremos mais tarde quem você não usará esse caminho para importar componentes ou importar módulos ou serviços. Mas para usar este atalho ou esta parte curta, angular JSON também que atualizado, podemos ver por que, porque você sabe que em Angular, você deve especificar e definir cada projeto que é criado em seu ou no seu projeto antigo. Então, como vemos aqui, temos aplicativos, e então temos nossa biblioteca. E vemos a raiz desta biblioteca. Vemos a rota de origem e todas as configurações que são necessárias para configurar Angular para fazer esta biblioteca funcionar de uma maneira boa. E x JSON também são atualizados porque adicionamos uma nova biblioteca. Por isso, ele também tem UI e tags. Veremos o uso dessas tags mais tarde. Está bem, fixe. Então, o que é importante para nós agora que criamos uma biblioteca? Veremos mais tarde como criar a biblioteca novamente, mas com, não com linha comum, mas com esta extensão. Então nós usaríamos esta extensão de gerar ou NX para gerar uma biblioteca que nós estamos indo para implementar e usar essas bibliotecas em nossa aplicação. 79. Como criar bibliotecas compartilhadas através da extensão NX: Ok, anteriormente nós criamos as bibliotecas usando a linha comum. Agora vamos usar a extensão, a extensão que eu mostrei antes nas palestras anteriores, que baixamos para o código do Visual Studio. Então, nesta palestra, vamos criar todas as bibliotecas restantes que precisamos para construir nosso projeto. Anteriormente, criamos a biblioteca de interface do usuário. Agora vamos construir usuários e biblioteca de autenticação, produtos e biblioteca de categoria e todos esses biblioteca. Então, de volta ao Visual Studio Code, clicamos na extensão NX e, em seguida, vamos para Gerar. E para gerar vamos selecionar uma biblioteca. Então aqui temos que colocar o nome da biblioteca, então vamos chamar produtos de TI. Então, porque temos anteriormente UI e agora temos os produtos e criamos mais tarde os usuários e o diretório. Se você quiser especificar algum diretório específico que não precisamos, queremos colocá-lo nos lábios, como você vê aqui. Temos aqui lábios e queremos colocá-los aqui. Então, tudo está indo bem. E vamos clicar em Executar. E depois de executar este comando, veremos aquele laboratório que mal fui criado aqui. E vamos ver que agora temos UI e produtos. Agora vamos passar para a segunda biblioteca, que é usuários e autenticação. Nós chamamos de usuários é suficiente. E então ele criará também uma corrida seca. E vamos cavar mais sobre os comentários ou parâmetros desta biblioteca. primeiro parâmetro é o estilo ou o sistema de estilo que é usado dentro dos componentes desta biblioteca. Eu usaria sempre scss. Claro, você tem liberdade para selecionar o sistema que você gosta. Além disso, se você quiser ter um diretório específico para criar esta biblioteca, você pode definir não apenas elipse, mas você pode definir outro diretório. Então você pode especificar o diretório aqui, mas quando você deixá-lo vazio, ele será criado dentro da pasta lábios e adicionar especificação módulo, que é um módulo que é criado aqui. E este módulo tem um arquivo de teste. Então, quando você habilitar este arquivo de teste ou quando você ativar esta opção, então você terá um arquivo de teste de unidade testfile, Algo como aqueles. Então, se você não mencionar isso, então você não vai ter este arquivo de especificação, mas é fácil e você pode criá-lo manualmente mais tarde. Buildable é gerar uma biblioteca compilável. É claro que precisamos sempre construir todas as bibliotecas de que precisamos para a nossa produção. Mas, por padrão, esta biblioteca gerada pode ser executada quando você está indo para executar o comando build para esta biblioteca, como veremos mais tarde, enable IVY é para habilitar para uma biblioteca, então ele, você usaria estes método de compilação em Angular. Angular tem muitas maneiras de compilar. Um deles é a Ivy. Ivy é uma reescrita completa do motor de renderização Angular. Se você sabe mais sobre isso, você tem um o t e também que é IVY. Ivy promete grandes melhorias para a sua aplicação. Com o IVY, você também pode compilar componentes de forma mais independente um do outro. Então você pode habilitar isso para esta biblioteca e não há problema. Então eu tenho um erro aqui que habilitar IVY deve ser usado apenas com buildable. Portanto, precisamos habilitar também este para este passe de importação de biblioteca. Vimos anteriormente que na configuração ts que temos algum caminho específico que é gerado. Então você pode ouvir também especificar seus parceiros com base no que você precisa. Por exemplo, os produtos foram gerados com nome da empresa Linda, com AD e, em seguida, o nome da biblioteca. E a mesma coisa. Se você quiser algum nome específico, não como este, então você pode especificá-lo lá. Mas eu quero ter os mesmos módulos de carregamento preguiçoso é usado também para não carregar o módulo diretamente. Quando você estiver executando o aplicativo, você usará esses módulos ou bibliotecas somente quando precisar deles. Como veremos mais tarde, usaremos os dois tipos. Usaremos os módulos de carregamento preguiçosos e a molécula imediata. Então, por sua vez, como vimos anteriormente, o que é um inverno é usado para esta biblioteca. Prefiro sempre usar fiapos ES. Quando você especifica o módulo de carregamento lento, você precisa especificar o módulo piloto. Qual módulo chamaremos este módulo. Normalmente, será o módulo de aplicação, como veremos também mais tarde. Se você quiser algum prefixo específico para os componentes ou diretivas da biblioteca, como vimos anteriormente, então você pode especificá-lo aqui, para que você não precise editar o arquivo ASM. Por exemplo, eu usaria também aqui, usuários publicáveis. Acho que não, não precisamos dessa biblioteca publicável. Roteamento da mesma forma como vimos rotas no nível do aplicativo. Além disso, podemos ter roteamento para o nível de biblioteca, possamos configurar isso também. E também há outras opções como arquivos de formatação ignorados para, por exemplo, para mais bonito e também ignorar pacote JSON para não adicionar dependência para backend JSON também para ignorar ts config, que é para não atualizar ts config para desenvolvimento experiência. Não, precisamos de todas essas coisas e etiquetas. Vamos falar sobre isso mais tarde, quando vamos chamar essas bibliotecas em nossas aplicações. Runner de teste de unidade também é para testes que vamos usar exatamente como veremos também no futuro. Então vamos executar e executar este comando. E vamos ver que todo o comando foi escrito aqui com todos os parâmetros que eu preciso. Então não temos que canalizar a linha de comando. Então nós só precisamos fazer alguns cliques apenas para gerar esses comentários. E como vemos que temos agora a biblioteca do usuário foi criada a diferença aqui que selecionamos mais justo, que nós configuramos com um roteador. Então, já temos o módulo de roteador, mas por exemplo, a biblioteca de produtos não tem um módulo de roteador. E também falamos sobre algum prefixo específico para diretiva e componentes. Veremos que o temos aqui também. Então temos usuários, não o nome da empresa. Então temos CamelCase para diretivas e caso K-Pop para componentes, e o prefixo é sempre deve ser usuários. Agora vamos criar a última biblioteca que precisamos, que é chamado de ordens. Então, nós já produtos usuários de interface do usuário. Vamos criar também a biblioteca de pedidos. Por isso, vou substituir isto por encomendas. Tudo o mesmo. Nós temos aqui, nenhum diretório, tudo já está definido. E nós substituímos o prefixo e todas as outras informações que já estão definidas. Então, clicamos em executar e geramos esta biblioteca, e ela será localizada perto das outras bibliotecas. Se formos novamente agora para a base de configuração ts que todas essas bibliotecas criaram aqui. 80. Como criar componentes dentro e usá-los nos aplicativos: Ok, nesta palestra, nós vamos saber como criar um componente dentro da biblioteca. Por exemplo, o componente banner, que está dentro da biblioteca de interface do usuário. E vamos ver também como podemos usar este componente no nível de aplicação. Por exemplo, na aplicação nítida N G também aqui podemos usar a linha de comando para criar o componente ou a extensão NX. Vou fazer isso em ambos os sentidos. Portanto, criamos anteriormente essas bibliotecas, produtos de interface do usuário, usuários e pedidos. Então, vamos primeiro criar o componente usando a extensão NX. Vou para a extensão do anexo, clique nele, e depois gerar. E eu usaria a Geração de esquemas de Angular porque um x não tem essa geração para os componentes. Então nós usaríamos este, diagramas componente angular, que está criando um componente angular. Vamos clicar nele. E então podemos dar o nome deles para o componente que eu quero criar. Por exemplo, eu daria, como vimos antes que temos banner e o projeto. O projeto é o nome da biblioteca onde eu quero criar este componente. Como vimos anteriormente, temos muitas bibliotecas. Um deles é a biblioteca de interface do usuário. E então eu vou usar as outras opções. Vamos passar rapidamente por cima deles. Então vamos primeiro que vamos ver esse módulo. O que é um módulo para o qual você deseja definir este componente? Como eu disse anteriormente, temos o módulo contendo vários componentes e cada componente deve estar relacionado ao nosso módulo. Podemos manter este módulo vazio, em seguida, ele vai usar o módulo padrão dessa biblioteca. Porque, como vemos aqui, que os produtos, por exemplo, tem um módulo padrão chamado módulo Produtos, em seguida, o componente será colocado aqui ou a declaração do componente será colocado aqui. Então eu volto novamente para o nosso gerador. Vou selecionar o sistema de estilo. O que é o Sistema de Estilo que eu quero usar é o SCSS, como nós concordamos desde o início neste projeto. Além disso, precisamos saber sobre a estratégia de detecção de mudanças. Esta estratégia está definindo como o componente está sendo atualizado. Então, por exemplo, eu tenho um componente que contém o texto, por exemplo, o banner em si. Então eu quero atualizar o texto desse componente, desse banner de fora, de outro componente. Então aqui eu posso escolher a estratégia, como ele vai ser atualizado. Padrão é sempre o componente, está ouvindo as alterações no push significa que cada vez que eu digo Por favor atualize-se, então ele vai ser atualizado. Mas se eu empurrar um novo texto para o componente sem informar o componente que há alguma atualização chegando, então nada acontecerá. Então sempre você pode escolher as estratégias. Vou explicar isso durante a explicação do mundo real do nosso projeto. Por enquanto, vamos mantê-lo como padrão. Algumas pessoas preferem ter um bloco de exibição no nível do host, como o componente em si terá um bloco de exibição. Para mim. Mantenho-o vazio porque não preciso dele. Componente de entrada, este é o método obsoleto. Não precisamos mais dele. Exportar, você precisa sempre, às vezes para exportar o componente se você quiser usá-lo em outros módulos. Então, se eu quiser ter este componente banner para ser usado em outros módulos, eu preciso exportá-lo. Então, por enquanto, vamos mantê-lo assim ou você pode definir isso como um componente exportado. Flat significa que queremos criar esses arquivos deste componente no nível raiz desse projeto. Por exemplo, quando eu criar este componente, ele será criado aqui e ele com seu próprio arquivo, não dentro de uma pasta. Então, para mim, eu iria mantê-lo dentro de uma pasta e usá-lo dentro desta biblioteca. Por isso, é melhor não verificar este apartamento no estilo de vida se eu quiser incluir estilos embutidos dentro desse componente, como você sabe no modelo Inline Angular que eu não quero ter separado arquivo para o modelo. Portanto, este componente irá conter dentro dele o código HTML ou você pode colocá-lo em arquivo separado. Quando você marcar isso, o componente será criado com seu próprio modelo, sem qualquer arquivo HTML. Porque cada componente em Angular deve conter um arquivo JavaScript, arquivo HTML e o arquivo de estilo, que pode ser CSS ou SCSS. Mas para mim eu manteria os arquivos separados. Correção de fiapos, isso está obsoleto. Não é mais usado. O caminho, se você quiser que um fato específico em seu componente seja definido, você pode defini-lo aqui. Você pode dizer a pasta onde deseja criar este componente. Mas para mim, eu o mantenho vazio, então ele será criado dentro da biblioteca, que eu alvo. Prefixo, como vimos anteriormente, que temos cada componente tem seletor. Então precisamos definir o que o prefixo desse seletor. Então, para mim, eu diria sempre, cada componente dentro da biblioteca de interface do usuário terá prefixo UI. E também aqui o seletor, ele vai perguntar o que é o seletor? O seletor deve ser criado aqui. Então eu diria banner, pular importação. Isso significa que não colocar um componente dentro do módulo, como vimos anteriormente, que o módulo contém vários componentes. Então eu preciso não colocá-lo aqui. Skip Seletor especifica se o componente deve ter um seletor ou não. Agora precisamos de um seletor. Ignorar testes, então ele não irá gerar os arquivos de teste que precisamos para testes de unidade, que está terminando com SPECT de Ts. E no final, precisamos saber qual é o tipo desse componente ou o tipo desse item. Pode ser diretiva ou componente. Nós o mantemos como componente que está localizado na lei de nomeação. Então vamos ter como banner.com dot ts view encapsulation é a estratégia de encapsulamento view para usar neste componente. Então você pode manter isso vazio por enquanto. Então, quando eu executar este comando, eu vou ver que eu estou sempre recebendo erro. Não é possível localizar o módulo NG usa a opção manter importação para ignorar a importação de um módulo. Não, precisamos disso no módulo porque vamos usá-lo em outro componente ou no nível de aplicação como vimos antes. Então, para isso, precisamos de um módulo. Por que estamos recebendo esse erro? Este erro vem porque você, ou biblioteca não tem módulo e porque nós criamos através da linha de comentário usando MPI x como vimos anteriormente. Mas os outros componentes ou as outras bibliotecas que temos lá, que criamos com extensão NX. Eles têm módulo, mas a biblioteca de interface do usuário não tem nenhum módulo. Então vamos criar também isso. Você pode criar esse módulo manualmente como os outros, ou se desejar, você também pode usar o gerador NX. Com um gerador x, você também pode criar módulos, como você vê, por exemplo, aqui temos esquemas, módulo angular, e então você especifica a biblioteca e você especifica o caminho. E é isso. Exatamente como fazemos com seus componentes. Por agora. Vamos mantê-lo, por exemplo, fazer algum trabalho profissional para fazê-lo manualmente. Então, primeiro de tudo, vou criar um novo arquivo. Vou chamá-lo de UI dot módulo dot ts. E cada módulo em Angular deve começar com módulo de anotação ONG. Então, como vemos aqui no módulo de produtos que é gerado anteriormente, temos que módulo NG e importações e, em seguida, o nome como uma classe desse módulo. Vamos copiar este e usá-lo em nosso módulo de interface do usuário. Só precisamos renomear produtos para UI. E neste caso, terei meu gerador ou meu módulo pronto para ser usado pelo gerador. Então vamos tentar de novo e vamos executá-lo. E veremos que o comentário é criado ou gerado. Vemos que n esquemas degenerados componente angular nome banner projeto UI estilo é CSS ou SCSS e, em seguida, exportar. E se eu for para o módulo em si, eu vou ver que há declaração e exportações do módulo ou do componente que eu criei. E aqui está o componente. Temos modelo HTML, temos o CSS, temos também o arquivo de mesa e o arquivo TypeScript. Então vamos gerar outro componente usando a linha comum. Como vimos anteriormente, podemos executar com uma extensão ou com a linha comum. Algumas pessoas não gostam da extensão, então gostam de fazer algumas linhas comuns. A linha comum que temos aqui é Andy gera esquemas, componente angular, e então você especifica algumas propriedades que queremos. Então vou copiar este e abrir um novo terminal. E então eu vou colá-lo, e então eu vou renomear o banner para ser, por exemplo, controle deslizante. Então, teremos controle deslizante e aqui também, bem como controle deslizante. Então, através da linha comum, fazemos estes comentários. Então o que eu preciso mudar não é mg, será um x porque estamos executando comentário NX. Então, aqui eu vou dizer NX gerar diagramas componente angular, e então eu especificar as propriedades. E então se o executarmos, veremos que ele é gerado com exatamente os mesmos valores que eu queria. E estará perto de seu irmão, que se chama bandeira. Ok, agora vamos ver como podemos usar esses componentes no meu aplicativo. Como estamos agora em uma biblioteca, não estamos no nível do aplicativo. Então, como vemos, temos aplicativos e bibliotecas. E no aplicativo, eu quero usar esses componentes. Então, por exemplo, vamos pegar este banner 1. Podemos criar, por exemplo, qualquer coisa dentro dele, como podemos dizer que um banner de parágrafo funciona. E usaríamos esse componente nessa biblioteca. Então, como estamos usando um componente em geral, eu apenas ir e escolher o seletor. Eu vou dizer, por exemplo, que deve ser como este banner de interface do usuário. E este seletor. Vou pegá-lo e colocá-lo na minha candidatura. Então eu vou dizer aqui componente AB. E eu vou dizer, por exemplo, que podemos colocá-lo aqui dentro. E eu quero dizer que este, banner UI é banner UI. Mas temos problema aqui que u i banner não é conhecido elemento y porque não é conhecido como um módulo dentro desta biblioteca ou dentro desta aplicação. Então eu preciso pegar o módulo da interface do usuário e importado aqui. Em seguida, o aplicativo saberá que há um componente chamado banner UI. Eu posso usá-lo a partir da biblioteca, que é chamado de UI. Como podemos importar o módulo de interface do usuário ou a biblioteca de interface do usuário. É muito simples. Eu vou para o módulo do aplicativo. Então eu escrevo aqui UI, como vimos anteriormente, módulo. E, em seguida, este módulo de interface do usuário, ele será importado do caminho. Então eu vou dizer importar módulo de interface do usuário de, e então eu vou especificar o caminho embora. Temos o nome da organização e, em seguida, a interface do usuário. Assim, com isso, terei acesso ao módulo de interface do usuário dentro da biblioteca de interface do usuário. Então, como vimos anteriormente quando criamos a biblioteca, a configuração ts é alterada para definir para nós alguns parceiros que eu precisava usar de outras bibliotecas. Mas eu ainda estou recebendo um erro aqui. Por quê? Porque o módulo de interface do usuário não está localizado neste caminho. Então elipse UI fonte index.js. Vamos navegar até este. Eu vou verificar, e eu vou ver que eu não tenho exportação do módulo. Então o que precisamos fazer é apenas exportar estrela partir de então eu vou dizer lib e, em seguida, o próprio módulo. E quando eu salvar e ir para o módulo de aplicativo, e então vamos ver que tudo está bem e está definido. E se eu ir para o componente aplicativo, novamente, Eu vou ver que eu não vou ter qualquer adulto aqui Porque você, I banner é conhecido pelo aplicativo porque eu importei o módulo do módulo de interface do usuário. Então, vamos agora executar o aplicativo e tentar isso. Então, primeiro vamos salvar tudo e você pode executar seu aplicativo usando a linha de comando como vimos anteriormente. Ou você também pode usar a extensão NX. Então você apenas diz NX servir e, em seguida, você deve especificar qual aplicativo você deseja. Então nosso aplicativo está sendo executado agora, e como vemos aqui, que ele está sendo executado sob o host local 4200, a porta. Então eu estou indo para o navegador e então eu vou ver que nós temos este. E então eu atualizo a página, e então vejo que o banner está dentro desse nível de aplicativo. Então, estamos usando realmente o componente que é criado dentro da interface do usuário da biblioteca, dentro do nível do aplicativo. 81. Como chamar Libraries: Certo, agora está tudo bem. Nós especificamos nosso componente, nós o importamos da biblioteca e o usamos no aplicativo. Então vamos removê-lo daqui agora porque vamos usá-lo em outros lugares, não aqui como veremos mais tarde. Agora vou repetir a mesma ideia só para confirmar e consertar para você. Então, quando eu quiser importar um módulo, eu posso usar sempre o caminho. O caminho é definido no arquivo de configuração ts. E dentro do arquivo de configuração, podemos sempre modificar este caminho é como queremos. Então vemos que este caminho está se referindo a este arquivo e sempre em Angular ou em TypeScript em geral, quando você deseja exportar alguns módulos ou classes ou, por exemplo, modelos, você sempre pode usar esse conceito. Então eu tenho um arquivo de índice onde eu estou sempre listando todos os meus componentes que eu quero exportar ou módulos ou serviços. Então, por exemplo, eu tenho na interface do usuário o serviço para pegar dados do banco de dados. Então eu preciso colocá-lo aqui neste arquivo. Então eu vou dizer, por exemplo, exportar, então tudo do arquivo, por exemplo, que é chamado de Biblioteca. E dentro deste arquivo, por exemplo, há este serviço. Então, tudo o que você quiser usar fora desta biblioteca, você precisa exportá-lo. E então você vai usar esse banho, que é especificado na base ou no ts config Bayes para usá-lo em qualquer aplicativo ou mesmo em qualquer outra biblioteca. Por exemplo, no produto eu quero usar também a interface do usuário. Então eu vou aqui, então eu digo que eu quero usar o módulo UI dentro desses produtos módulo. Da mesma forma, sempre. Então isso, nós economizamos esse tempo ou encontrando o caminho onde queremos localizar o módulo, ou queremos localizar o que queremos importar. Então, neste caso, temos caminho unificado e é definido em todos os lugares, todo o aplicativo e todo o seu espaço de trabalho, vê-lo. Então. Não terei problemas em definir o caminho da maneira correta. 82. O que sobre arquivos de estilo compartilhados: Ok, como vimos anteriormente que criamos um componente, e esses componentes vêm com um arquivo de estilo. E neste pequeno arquivo, você pode especificar os estilos especificamente apenas para este componente. Portanto, você não pode usar esses estilos fora deste componente. Então eu diria, por exemplo, que vou dar um exemplo de classe. Vou dar-lhe como cor vermelha. E dentro do estilo ou do arquivo CSS, direi cor. Vou dar uma aula, chamá-lo de cor vermelha. E a cor será, por exemplo, vermelha. E quando eu ir para o navegador e verificar, e então eu vou ver que o componente não está mostrando aqui porque nós removemos a chamada para ele. Então vamos chamá-lo de volta novamente. E vamos novamente para o componente do aplicativo. Eu digo você, eu banner. Vamos removê-lo novamente. É só para testes. Vejo que esta cor está funcionando aqui. Então, quando eu usar esta classe em outro componente, então vamos ver que esta classe não está dando qualquer efeito porque estamos usando fora desse componente. Então vamos para o componente home page novamente, e vamos tentar usar essa classe. Então aqui temos esta classe cor vermelha. Estamos no componente Banner. Vou agora para o componente da página inicial que criamos antes. Então eu vou aqui e dizer cor vermelha. Vá novamente para a minha página. E eu vou ver que não há qualquer coloração porque este é o estilo é específico para este componente. Você não pode usá-lo fora deste componente. Então esta é a vista, por exemplo, para mim, não é muito boa porque eu gostaria de ter tudo é compartilhado porque eu estou usando uma biblioteca compartilhada. Então, estou usando um espaço de trabalho compartilhado. Então eu gostaria de ter também os estilos são compartilhados entre todos os aplicativos. Esta é uma das razões. Então minha idéia para evitar isso, que nós podemos criar uma pasta perto dessas pastas para que possamos fazer dentro dela os estilos e todos dentro desses aplicativos e bibliotecas podem usar esses estilos. Então vamos tentar isso com esta classe e veremos os resultados. Então, em primeiro lugar, vou abrir um novo terminal. E então eu estou dentro da minha, por exemplo, organização, o espaço de trabalho. Vou criar um diretório, eu chamo de estilos. E então veremos que esse estilo é criado aqui. Vamos criar um arquivo dentro dos estilos. Chame-o, por exemplo, style.css. Ok, e agora podemos usar este discagem SCSS dentro de qualquer aplicativo. Então, por exemplo, eu vou usá-lo dentro e você faz compras. Em qualquer loja, já temos um arquivo de estilos. E dentro deste arquivo de estilos, você pode importar o que quiser de fora desta biblioteca. Então eu posso importar o arquivo que eu criei fora, dentro deste arquivo. Então, o arquivo de entrada para o estilo deste aplicativo é este arquivo porque ele é especificado em configuração angular. Se eu for aqui para o arquivo de configuração angular. Então eu vou ver nos ativos ou os estilos que ele está usando este arquivo. Então aplicativos e você comprar estilos de origem, SCSS. Então eu vou saber que meu projeto está usando apenas esses estilos arquivo como estilo de entrada. Então vamos voltar a esse arquivo e importar o arquivo externo que eu criei anteriormente. Então eu vou abrir aqui citação, e eu vou passo a passo fora desta pasta, fora do nível do aplicativo. Então acabou mais. E também depois, eu estou aqui. Posso ver, por exemplo, aplicativos, lábios. Então eu não posso ver talvez os estilos aqui, os estilos de pasta e, em seguida, usar o estilo CSS. Então aqui quando eu importar este arquivo, então todos os componentes dentro deste aplicativo usarão esse estilo. Então, quando eu voltar para o componente e eu vou dizer, por exemplo, em seus lábios, eu vou aqui para o componente, corte, o estilo. Vamos cortá-lo. Não precisamos mais dele aqui. Então precisamos colocá-lo dentro do estilo público ou do arquivo estilo camisa. Então eu coloco aqui e lembramos que chamamos essa classe aqui dentro deste componente. E também no componente homepage onde eu queria colorir também a página inicial funciona. Então vamos ver no final que esses dois componentes compartilharam um tipo de classe ou pausá-lo de apenas um interno classificado. Então, como você vê aqui, temos trabalhos de Homepage e banners, e eles são coloridos em vermelho. Então, ambas as classes ou esses componentes compartilharam uma classe. Então podemos usar todos estes, por exemplo, classes compartilhadas em todos os aplicativos e todas as bibliotecas que queremos. Portanto, é melhor sempre criar uma pasta separada para seus estilos e compartilhar todas as classes dentro desses blocos. Você também pode importar bibliotecas, como veremos mais tarde. Você também pode, por exemplo, definir algum material. Você pode definir algumas variáveis. Os outros benefícios também sobre a extração dos estilos fora do aplicativo ou componentes específicos é que podemos usar as variáveis compartilhadas. Então, por exemplo, se eu estiver definindo uma variável no meu componente de soma, eu também não posso usá-lo em outro componente. Então você sabe que no SAS você pode definir uma variável. Então, por exemplo, eu diria primário, por exemplo, cor para minha empresa. Por exemplo, a cor e a cor principal da minha empresa é verde. Então eu quero usar este valioso em todos os lugares na minha aplicação. Mas se eu defini-lo dentro do componente, não posso usar estes valiosos. Então, neste caso, eu posso usar este valioso em todos os lugares onde eu posso criar os arquivos de estilos dentro desta pasta ou da pasta compartilhada. Então talvez eu diria que podemos nos livrar de todos esses componentes internos porque nós também não temos um bom benefício aqui que não podemos ver as variáveis que estão disponíveis dentro desta pasta compartilhada. Porque toda vez que eu quero usar a cor primária, valioso, então não, eu preciso importar os estilos novamente. Então eu preciso sempre dizer que importar dentro deste componente todos os estilos ou o estilo que eu queria criar aqui. Então, quando eu faço isso, então eu posso ver a cor primária verde novamente. Então, caso contrário, será uma dor de cabeça para mim porque toda vez que eu importar este arquivo neste componente, então será um monte de importação e vamos acabar com uma estrutura muito complicada. Então, para mim, eu diria tentar evitar estilos de componentes para que possamos excluir este arquivo Nos componentes e também em cada estilo de componente podemos excluir o totalmente, podemos criar uma boa estrutura no estilo ou no estilo público. Então, podemos especificar isso é para o banner, isto é para a página inicial do painel de administração ou, por exemplo, esta é a página inicial da loja virtual. Então, neste caso, você será capaz de ter mais controle sobre todas as suas variáveis e também sobre todos os seus estilos. Então lembre-se, depois de excluir os estilos, você também precisa excluir do arquivo ts. Então você vai ver que você recebe erro aqui porque você excluiu o estilo de componentes a partir daqui. Por isso, temos também de ter cuidado com isso. Então, depois, vamos ver como podemos estruturar lentamente esses arquivos ou esta pasta ou a pasta de estilos externos com base em nossa necessidade, com base no aplicativo ou com base na biblioteca, o mais importante para você agora que criamos um pasta pública, esta pasta pública contém um estilo público. E este estilo público, você pode usá-lo dentro do arquivo de entrada para o estilo no aplicativo. Então aqui podemos defini-la aqui. E então podemos usar as classes que estão disponíveis dentro desta pasta ou dentro deste mostrador. 83. Estruturar arquivos de estilo para aplicativos (NgShop + administrações) (admin)): Tudo bem, agora vamos estruturar os arquivos com base na prática de construir o Ayesha, como você vê aqui, que se você imaginar comigo que a estrutura, você vê na sua frente, você , nós temos, por exemplo, um cabeçalho. Temos o rodapé, e temos também alguns componentes entre. Então já podemos definir nossa estrutura com base nisso. Por exemplo, eu teria um estilo de arquivo, especialmente para o banner, para onde é escrito os melhores produtos. Então, aqui este banner terá suas próprias categorias de arquivos de estilo, bem como você vê, nós também podemos definir seus próprios estilos e seu próprio componente. E também esses componentes que são definidos para produtos de recurso, eles também podem ser usados como um arquivo de estilo separado. Mas como você sabe também, temos um painel de administração. E painel de administração também está usando alguns recursos do produto. Ou, por exemplo, teremos outro e-shop, mas com estilo diferente. Assim, desta forma, temos que definir nossa estrutura de estilo com base nessa necessidade. Existem muitas maneiras diferentes de estruturar os arquivos de estilo, mas você pode escolher o que é exatamente necessário para você. Não significa que o que estou fazendo aqui esteja lá. Eu acho que é exatamente o que eu gosto, a estrutura que eu gosto. Então você também pode fazer sua própria estrutura. Vou mostrar-lhe como eu fiz a estrutura para e-shop, que está combinando o painel de administração e a própria loja, e talvez para outra loja futura. Então, voltando ao nosso projeto, estamos vendo aqui que estruturamos alguns arquivos. Vamos fechar os lábios aplicativos e vai para o estilo. Em, no Styles, vamos definir a seguinte estrutura. Primeiro de tudo, eu vou ter um arquivo específico para cada aplicativo. Então, por exemplo, eu vou renomear este estilo CSS como administrador CSS. E eu vou criar outro arquivo, eu vou chamá-lo, e você compra ponto SCSS. Então, neste caso, eu vou ter um estilo específico para cada aplicativo, ok, antes de tudo, cada aplicativo precisa de alguma configuração. Configuração de estilo. Por exemplo, você precisa definir quais são as cores, o que é uma fonte e como ela se parece, ou quais bibliotecas você vai usar como externas para o seu, por exemplo, aplicativo. Como por exemplo, material angular, terrível exemplo Bootstrap ou end u-prime, como vamos fazer neste curso. Então, no meu ponto de vista, primeiro, vou criar uma pasta, chamá-la dentro dos estilos, chamá-la de base. E dentro desta base, eu vou combinar todos os arquivos que são sempre necessários para cada aplicativo e cada biblioteca. Vou dar-lhe um exemplo. Então primeiro podemos criar um arquivo, chamá-lo de cores. Mas SCSS no interior dessas cores, vamos definir as cores que serão usadas dentro das aplicações. Por exemplo, a cor primária do meu aplicativo será a cor laranja ou a cor da marca. Então aqui eu vou definir duas variáveis chamadas uma, cor primária. E esta cor primária será, por exemplo, FF três um 000, que é, por exemplo, a laranja. E então talvez eu precise de outra cor, cor primária, mas de maneira escura. Por exemplo, quando estou passando o mouse sobre um botão, quero mostrá-lo como um mais escuro. Então aqui podemos chamá-lo de escuro. E então podemos definir nossa própria cor, por exemplo, 29 000. Então esta é uma laranja mais escura, um pouco mais escura. Então essas duas variáveis que eu vou usar em todas as aplicações. Ok? Outro arquivo é necessário. Por exemplo, eu preciso ter alguma configuração ou conflito. Então, nesta configuração, eu vou definir o que é um corpo, como ele se parecia, e também, por exemplo, os links e, por exemplo, as fontes. Então vamos começar, por exemplo, configurar o corpo. Então, no corpo, eu quero usar uma família de fontes. Digamos “Open Sans”. Além disso, por exemplo, sempre o navegador padrão está me enviando os links com subjacente. Desejo remover este sublinhado por padrão. Então eu vou dizer decoração de texto do a ou o próprio link. Será, por exemplo, nenhuma. Normalmente vem sublinhado, mas precisamos fazê-lo como um non. Então aqui eu coloco a configuração básica que eu preciso para o meu aplicativo ou para todos os meus aplicativos. Ok, talvez também, Eu vou precisar definir as fontes que eu vou usar no aplicativo como você sabe, font-face. Então, por exemplo, vou criar outro arquivo. Chame de fontes. Você tem liberdade. Você pode colocar todos esses arquivos em um único arquivo. Por exemplo, você pode colocar as cores e fontes, tudo no arquivo de configuração. Mas eu estou definindo ou dividindo isso com base em arquivos ou com base na funcionalidade que eu preciso. Então, no Google, existem algumas fontes que podem ser usadas diretamente. Podemos chamá-los de rostos de fonte. Então, se você quiser usar um deles, você só precisa ir ao navegador e pesquisar Fontes do Google e Fonts do Google. No primeiro link, você encontrará um monte de fontes que você deseja usar. Por exemplo, precisamos usar sons abertos, como vimos anteriormente. Então, baseado em nosso design, o designer me disse que eu deveria usar essa fonte. Então eu vou tê-lo. Então, primeiro de tudo, você pode selecionar o estilo que você deseja usar. Que exemplo eu vou usar este. E eu quero ter o estilo também. Então eu preciso pegar o CSS, que é necessário para isso. Então você tem aqui duas opções. Link em geral, você pode vinculá-lo exatamente em seu arquivo HTML ou importação. Para mim, vou usar esta importação. Então podemos usar este e ir para o aplicativo e colá-lo aqui. Então aqui teremos importar este arquivo ou este arquivo CSS. Algumas pessoas estão fazendo isso dessa maneira. Então, por exemplo, eles copiam este arquivo ou este link, eles vão para o navegador. E então, por exemplo, eles se basearam na URL. E então eles vão ter essa lista. Algumas pessoas estão usando ou copiando esta lista e usando-a no aplicativo. Porque nas fontes do Google, você pode definir o tipo de fonte que você precisa. Por exemplo, você pode ter luz 300, itálico regular. Você pode combiná-los todos em um estilo. Então, desta forma, você pode importar todos eles em um único link. Então, para mim, prefiro usar assim. Então, primeiro de tudo, eu vou remover essas, por exemplo, estas formas itálicas. Então podemos ter três pesos. Então, dessa forma, podemos ter essa importação, podemos pegá-la, copiá-la sem essas tags de estilo porque as tags de estilo serão usadas no HTML. Mas aqui estamos usando a importação dentro de um arquivo CSS. Então, podemos copiar esta Importação, voltar para o nosso aplicativo e, em seguida, colá-lo aqui. Então, aqui você vai ver que nós importamos toda essa fonte para a nossa aplicação. Ok, então agora vamos tentar testar isso. Essa é a estrutura. Por exemplo, eu quero ver que eu realmente estou usando essa fonte no meu aplicativo. Primeiro de tudo, você vê aqui que temos um erro, e este erro diz que estamos usando uma folha de estilo errada porque se você se lembrar, tivemos o arquivo aqui é chamado estilo SESS. Então, o que precisamos fazer, precisamos ir para os estilos desse aplicativo, por exemplo. E nós estamos dirigindo a oficina de motores, como você se lembra. Então eu vou aqui para o arquivo de estilos do aplicativo no nível do aplicativo. Então aqui vou eu. E então Styles e renomeie isso para seu arquivo, que eu estava criando nos estilos ou estilos públicos. Então, se você vê aqui que temos admin e loja NG, então eu vou ligar para a loja ND. Ok, então agora não temos nenhum erro. Vamos tentar ver como podemos usar esse arquivo. Porque se eu for agora para a frente, não verei nada. Eu não vou ver essa fonte que eu queria usar porque nós não importamos os arquivos que são necessários para o aplicativo. Então, o primeiro passo que precisamos fazer, temos que ir para esse estilo específico dessa aplicação. Por exemplo, este final você compra. E precisamos importar esses arquivos, essa cor, configuração e fonte. Então vamos começar primeiro com, por exemplo, as cores. Eu vou aqui baías em cores. Vou importar este arquivo. E também posso importar outro arquivo, que é a configuração. E então eu posso importar também as fontes. Então, como você vê aqui, eu importei todos esses arquivos e, em seguida, este arquivo é usado aqui. Então, quando eu salvar, o aplicativo é recompilado, eu enganaria o navegador. Eu ainda vou ver talvez ele não é mais usado, esta fonte. Por quê? Porque se você abrir a ferramenta inspecionar, você pode usar o elemento inspecionar usando o Chrome ou o Safari. Isso não importa. Nós vamos usar o Chrome neste curso, mas para este nível, eu vou mostrar a vocês é Safari. Então aqui temos isso, nós inspecionamos este elemento. E se formos, vemos que não estamos usando essa fonte porque há algo substituindo dois sans serif. Então, como isso acontece, isso aconteceu porque se formos para o aplicativo, nível de aplicativo, vemos que temos os estilos, ok, tudo está bem, mas temos aqui componente aplicativo tem alguns estilos específicos que vem com o índice por padrão. Então vamos excluir totalmente este arquivo CSS. Nós não precisamos dele. Então eu vou primeiro para o componente e removê-lo. Este arquivo é não tem nenhum estilo porque nós vamos usar o estilo público. E então eu uso ou excluo esse arquivo e salvo o componente. E voltamos para o aplicativo. Novamente. Vamos ver tudo realmente que temos usando a fonte ou a fonte certa e temos conjuntos abertos. Gostaria de mencionar aqui algo que a ordem desta importação é muito importante. Por exemplo, se você colocar a cor após a configuração, o arquivo de configuração não verá o que está dentro das cores. Então a ordem deste arquivo é muito importante. Então eu diria que talvez eu precise importar primeiro as fontes. Está funcionando porque é, por exemplo, um estilo, estilo que o corpo está usando essa fonte. Então, quando é carregado, então ele será usado. Mas é muito importante manter a ordem assim. Então temos, por exemplo, cor, fontes e configuração. E dessa forma, podemos estruturar esse arquivo. Vamos copiar a mesma coisa para estar no arquivo de administração. Então temos aplicativo também chamado admin, que será o painel de administração. Então, da mesma forma, vamos usar isso para o estilo. Então, nos estilos, não usarei o arquivo de estilo da loja, mas usarei o básico. Então eu vou dizer aqui que voltar um nível e outro nível e , em seguida, Estilos e, em seguida, usar o CSS admin. Então, aqui este aplicativo de administração usará o CSS admin, que está localizado nos estilos de arquivo públicos, e a mesma coisa. Vamos excluir também o componente daqui. Então, podemos excluir o estilo desse componente, que é o componente do aplicativo ou aquele componente antigo. Voltando à estrutura das descobertas, você também pode incluir outras coisas aqui. Por exemplo, você pode incluir algo que eu gosto também para mantê-los em arquivo separado que é chamado mixins. E se você conhece SPSS ou SAS, você está usando mixins. Mixins são funções que são usadas para estar em todos os lugares no aplicativo. Então você não precisa criar um monte de código. Você pode usar esse monte de estilos dentro com uma linha. Quero criar um Mixin. Vamos chamá-lo, por exemplo, redefinir lista. E esta lista de reinicialização. Por exemplo, ele terá uma margem 0. E, por exemplo, brotação é 0, e também, por exemplo, estilo de lista será nenhum. Então eu estou falando sobre o componente UL que u l aqui. Então, como eu posso usá-lo, Vamos usá-lo, por exemplo, usar este mixin dentro do arquivo de configuração. Então, primeiro de tudo, eu vou importá-lo e dizer aqui baías e então fazer sentido. Então aqui eu já o importei e vou usá-lo na configuração. Mas tenha cuidado aqui teremos problema, essa configuração não verá mixins. Você precisará primeiro colocar essa configuração sob esses mixins. Então, desta forma, a configuração, vamos ver essas misturas. Então eu vou aqui para a configuração e, em seguida, eu vou dizer UL, incluir lista de reset. E quando eu salvar, eu vou ver que eu ainda estou recebendo erro porque eu acho que porque eu não salvei este arquivo. Então, quando eu salvar e salvar isso, novamente, a configuração, tudo poderia ir. Tudo bem, então vamos ver como se eu virar este pedido. Então, quando eu viro eles, eu coloco a configuração antes dos mixins e eu salvo este arquivo. Verá que recebi o erro. Diz porque não consigo ver, por exemplo, que há pelo menos mixin. Então, desta forma, é muito importante saber que a ordem é muito importante para o seu casaco. Então temos que colocá-lo de volta, salvar e veremos que o aplicativo está sendo executado com sucesso. Continuando a estrutura do que precisamos para nossos estilos públicos. Vamos dar uma olhada em nossas aplicações. Por exemplo, vamos para o final que você compra. Vamos ver que temos homepage e temos, por exemplo, cabeçalho rodapé e também alguma lista de produtos. E todos eles, eles ainda têm seus próprios estilos. Precisamos deletar isso. Precisamos colocá-los no estilo público para que possamos ver tudo lá. Então tudo será, por exemplo, compartilhado e podemos usá-lo em qualquer lugar em outra edição ou em outra aplicação adicional. Então a minha ideia, é minha ideia. Você pode criar sua própria estrutura que você deseja. Talvez não goste desta estrutura, mas estou a dar-te a ideia. E então você pode decidir com base na estrutura do seu projeto. Então eu vou dizer aqui eu tenho os estilos que eu criaria, por exemplo, pasta de aplicativos. E dentro desta pasta de aplicativo, vou criar uma pasta para cada aplicativo que eu tenho no meu espaço de trabalho. Então eu vou dizer aqui loja em geral. E então criarei outra pasta para o painel de administração. Então eu vou usar essas pastas para ter os estilos de aplicações específicas, componentes, os componentes que estão realmente relacionados a essa aplicação. Não está relacionado à biblioteca ou a uma configuração pública. Então eu recrio aqui outra pasta, chamo-a de admin. E por exemplo, dentro desta loja, tivemos, por exemplo, o cabeçalho e rodapé dentro do compartilhado, você pode seguir a mesma estrutura aqui para não ser perdido. Ou você também pode criar sua própria estrutura com base em sua necessidade de não duplicar um código ou duplicar alguns estilos. Então aqui eu criaria uma pasta, vou chamá-la de páginas. E outra pasta que eu chamarei de compartilhada. Exatamente como temos nos aplicativos. E dentro do compartilhado, vou criar um arquivo tour dot SCSS e outro arquivo que será cabeçalho ponto SCSS. E se você realmente precisa de um estilo para essas páginas, você pode criar um arquivo, estilo de arquivo para essa página. Então, no meu caso, vou usar uma biblioteca. Vou usar, por exemplo, o Bootstrap. Então eu não vou precisar ter um arquivo de estrutura ou estilo para a página porque eu vou usar essa biblioteca para organizar a grade e os componentes que eu preciso. Então, por exemplo, como você vê neste arquivo XD, eu vou ter tudo como componente. Terei componente de navegação. Terei, por exemplo, não navegação. Podemos ter um cabeçalho e um rodapé. E, por exemplo, esses serão componentes apenas o que eu preciso para a esta página ou a página inicial é a grade. E a grade virá da biblioteca, que eu vou usar. Mas de qualquer maneira, vamos criar agora o arquivo. E se não precisarmos dela no futuro, podemos apagá-la. Então vamos dizer na página ponto SCSS e, em seguida, produtos menos página ponto SCSS. E aqui eu tenho agora dois arquivos e ou quatro arquivos. E então esses arquivos, eu devo importá-los para a loja NDI, mas esses arquivos não serão usados. Então eu não preciso importá-los para lá. Então vamos fazer isso. O que eu copiaria este, ou vamos chamar aplicativos de importação, páginas nítidas e, em seguida, página inicial. E outro para a lista de produtos. Então eu vou dizer aqui que a lista de produtos, então nós temos, nós podemos chamar isso é a base. Podemos chamar isso como um exemplo de páginas e veremos outras seções como veremos mais tarde. E nós também teremos compartilhado. E aqueles compartilhados serão, por exemplo, a importação para o cabeçalho e o rodapé. Então temos aqui o cabeçalho compartilhado loja e outro para o rodapé. Então tudo o que eu escrever dentro desses arquivos refletirá o quê? Isso refletirá o final que você compra porque eu estou importando eles aqui. E este arquivo é usado no nível de aplicação de N D afiado. Então, neste caso, eu não preciso dessa discagem para esses componentes. Então vamos deletá-los. Então primeiro eu vou aqui, apago este arquivo. Estou fazendo uma limpeza aqui em cima. E também deletamos este. Então nós excluímos também o estilo e cabeçalho, o mesmo rodapé, o mesmo. Portanto, não precisamos manter nada relacionado a estilos nesses componentes. São idealmente, este, eu fiz isso, o estilo do componente de cabeçalho, e também este. Então agora tudo está funcionando sem problemas. Certo, voltando à nossa estrutura de arquivos, como vemos aqui, que criamos a estrutura com base na nossa necessidade. Então temos agora um aplicativo específico arquivos e também a base. E quanto às bibliotecas? Também podemos seguir o mesmo caminho. Por exemplo, eu quero criar algo para a interface do usuário. Eu quero criar um estilo para o banner. Então vamos lá. Crie uma nova pasta. Podemos chamar-lhe lábios. E dentro dessas bibliotecas ou bibliotecas, podemos criar exatamente a mesma estrutura aqui. Então, podemos ter um componente de interface do usuário. E dentro desta pasta UI, podemos criar um ponto banner SCSS, exatamente como o componente que eu estou usando dentro da interface do usuário. Eu posso criar, bem como controle deslizante. Então, dentro desta interface do usuário, eu vou criar slider dot SCSS. Além disso, posso incluir outras bibliotecas, por exemplo, produtos. E dentro desses produtos, deve estar dentro de bibliotecas. Vou ter, por exemplo, podemos chamar outro componente que ainda não criamos. É apenas por exemplo, é item de produto SCSS. É exatamente o item que mostrará um produto. Então, se eu estiver indo para usar esses componentes ou este bloco está no front-end bem, eu preciso importá-los. Então eu vou aqui, eu digo lábios, aqui está a Seção 4 elipse. Eu também vou importar esses componentes saltos. Então temos aqui U, eu, temos um banner, temos controle deslizante aqui. Devo colocar um ponto-e-vírgula aqui também. E então temos esses arquivos aqui. Mas imagine se estamos importando todos os estilos de bibliotecas aqui, teremos aqui um arquivo muito grande. Então, o que eu prefiro que eu crie um arquivo em cada biblioteca. Por exemplo, chamo esse ponto de interface do usuário SCSS, que incluirá os estilos para ambos. Então eu posso copiar este. Eu posso dizer não você, mas exatamente diretamente na pasta. Então temos aqui o CSS slider e banner CSS. E na minha loja ND, em vez de usar o componente em si, posso usar diretamente a biblioteca de interface do usuário. Então eu vou dizer aqui, não os aplicativos, mas nós dizemos lábios UI e usar o UI SCSS desta forma, se eu ir clicando no controle para este arquivo, eu vou ver que também esses arquivos são importados. Neste caso, estou usando o banner e o controle deslizante. Mas se você quiser usar apenas o controle deslizante, é claro que você pode importá-lo aqui. Você não tem que importar tudo para você da interface do usuário para reduzir o tamanho do arquivo do CSS build porque você sabe que o SCSS será convertido em CSS para ser adequado para o navegador, então este arquivo não conterá, por exemplo, o controle deslizante porque você não o usou na loja. Então, neste caso, você pode importar apenas a maneira. Você não tem que importar tudo. Mas para mim, neste caso, quero importar tudo. Então eu coloquei UIs, CSS, e este UX css já está aqui. Então vamos criar pastas para as outras bibliotecas. Então, temos usuários que usa irá conter, por exemplo, o componente de login e o componente de registro, também ordens. E todos eles terão seu próprio componente, todos os estilos, pois veremos como vamos construir esse aplicativo. Tudo bem, então vimos que a loja de energia tem seus próprios estilos nas importações, e também o administrador tem suas próprias importações. Então, no aplicativo que eu tenho aqui, o administrador, eu tenho aqui a loja em si, os componentes específicos para os componentes específicos para o administrador. E aqui estou eu importando os estilos para eles. Então, nas próximas palestras, vamos construir toda essa estrutura. Vamos construí-la lentamente. E você vai ver como eu vou usar cada arquivo em um aplicativo específico e como eu vou decidir que em que local este estilo de componente será. Então, por exemplo, eu quero criar um componente de item de produto. Eu coloquei aqui. Se eu quiser um criar, por exemplo, uma página de check-out, Vou colocá-lo, por exemplo, na página de aplicação específica loja. Como eu lhe disse, repito novamente, você tem uma grande liberdade para construir sua estrutura à sua maneira como quiser. Mas aqui, a estrutura é muito importante para mim e muito amigável ou desenvolvedor amigável. Porque como um desenvolvedor Angular, eu vou usar SCSS e usar esses arquivos com base no que eu preciso para construir diferentes aplicativos usando um X. Na próxima palestra, vamos ver como usar bibliotecas externas como Bootstrap, end u-prime, e importe os arquivos aqui. E veremos as grandes características de usar um estilo público. A importância de colocar esses arquivos em uma pasta pública na raiz do nosso espaço de trabalho. 84. Instalação material de três partituras e incluir estilos: Ok, nesta palestra vamos aprender como incluir bibliotecas externas, como Bootstrap ou prime end D, que vamos usar neste curso em nosso projeto. Então, primeiro, às vezes você precisa ter alguns componentes externos já estilo que você pode usar dentro do seu projeto. Então eu vou para outras bibliotecas externas como Bootstrap e depois instalá-lo, e então eu construo meu projeto com base nisso. E nesta palestra, quero mostrar a vocês como incluir bibliotecas externas dentro de nossos arquivos de estilo. Então, primeiro de tudo, vamos instalar uma biblioteca. Vamos, por exemplo, ao Bootstrap. Bootstrap é apenas biblioteca styling. Ele não contém, por exemplo, os componentes angulares como extremidade prime g. Então vamos, por exemplo, para bootstrap. Estou lembrando que não vamos usá-lo neste curso. Então é apenas um exemplo. Então eu iria e selecionar um bootstrap, ir para o site do Bootstrap, e então eu vou para começar. E aqui você verá várias opções para instalar a biblioteca. A primeira maneira de usar ou incluir uma biblioteca é usar a CDN direta, que é uma URL que você pode fornecer dentro do seu projeto, e então você usa esse estilo. Por exemplo, a maneira mais simples para isso, eu posso copiar este link, que é fornecido pelo Bootstrap. E então eu vou para o projeto. Então eu vou para um lugar do meu arquivo CSS onde eu estou incluindo os principais arquivos CSS como vimos anteriormente. E digite URL de importação. E aqui nós incluímos o URL que você copiou. Então colamos aqui. E depois carregamos o projeto. Está tudo bem. O projeto já está sendo executado. E vamos tentar um desses módulos que estão incluídos no Bootstrap. Por exemplo, seleciono um botão. Vamos copiar esta parte. Um dos botões que estou rodando agora, a oficina de motores do projeto. Então eu vou até o final, você compra, por exemplo, página inicial e baseado em aplicativo aqui. Então nós tentamos, executamos, e vejo que temos aqui o botão é estilizado, então importamos diretamente on-line a biblioteca Bootstrap para o nosso projeto. Mas neste caso, você deve ter uma conexão com a Internet. Então, quando você desconectar a Internet, você não pode trabalhar offline e, em seguida, você não é capaz de ver os estilos. Você não pode carregar os estilos da Nuvem. Há outra maneira de garantirmos que estamos trabalhando off-line, o que, como vemos aqui, que ao começar temos um download. Você pode baixar os arquivos e incluí-los no projeto, ou você pode usar o gerenciamento de pacotes npm. Então, quando você executar este comando em nosso projeto, então eu abro uma nova guia aqui para executar o comando, colá-lo aqui, e executar o npm install Bootstrap. Então ele irá instalar para mim a biblioteca localmente para que eu possa trabalhar offline porque como vimos aqui que temos aqui o link remoto. Então, como podemos incluir o que instalamos dentro da Law Library. Então é muito simples. Normalmente a biblioteca vem com um nome. Então este é o nome onde a biblioteca tem uma pasta no módulo MPM. Então você tem uma escolha. Assim, você pode incluir a biblioteca navegando para módulos MPM. Então eu vou aqui e eu vou um nível acima, eu vou para módulos de nó, procurar por Bootstrap, e então isso, e então o CSS. E aqui você tem os arquivos CSS. Ou outra maneira que você pode fazê-lo é muito simples que você só tem que usar este sinal. E, em seguida, chamar a pasta da biblioteca que você deseja. Então eu digo tira de inicialização e, em seguida, você quer saber a qual arquivo CSS você deseja incluir. Normalmente está escrito na documentação da biblioteca. Então ele dizendo que eu estou indo para esta pasta para ter o pacote e instalá-lo ou incluído no meu projeto. Mas se você não encontrá-lo, como nós temos aqui no Bootstrap, você não pode navegar sozinho na pasta módulo nó. E então você pode navegar para o CSS que você deseja. Estou mostrando essa maneira de ter mais conhecimento sobre como jogar dentro de módulos de nó. Então eu vou para módulos de nó e, em seguida, eu encontrar o Bootstrap, e então vamos ver normalmente cada biblioteca vem com uma compilação de destino. Então, quando você vê estes suporte, então isso significa que esta é uma versão de compilação. Então isso que você quer usar normalmente, ou você tem um SAS Virgin tem você vê aqui no Bootstrap. Então, o Bootstrap tem arquivo Sass e também tem o arquivo CSS. E este é o arquivo CSS como minified também. Então, o caminho para nós é menos CSS e, em seguida, Bootstrap CSS min, ou temos outro caminho que é SCSS. E então você navega até o arquivo SCSS de bootstrap, onde ele está incluindo todos os arquivos que precisamos aqui. Você também pode incluir apenas alguns arquivos específicos. Você não tem que incluir tudo como você quer usar uma grade e você não quer usar todas as outras coisas. Então você pode incluir o que você quer dentro. Então, para mim, vou incluir este arquivo bootstrap. Então eu vou aqui depois deste sinal bootstrap, I-type SCSS como uma pasta me mostrou. E então eu coloquei Bootstrap SCSS. É exatamente o mesmo caminho em módulos antigos. Então, em módulos Node, temos uma pasta bootstrap, que é este, e, em seguida, SCSS. E então eu vou diretamente para Bootstrap SCSS para incluí-lo. Desta forma, incluí tudo o Bootstrap. Vamos salvar e tentar novamente em nosso navegador. Em seguida, veremos que o botão está funcionando mesmo se você estiver desconectado à Internet porque a biblioteca já está instalada em sua máquina. Então, de volta ao navegador, você verá o botão está aqui e começar. Há outra maneira de incluir estilos dentro do seu projeto. Normalmente em Angular. Usando JSON Angular. Angular JSON é um arquivo onde você pode configurar seu projeto com um arquivo que pode ser incluído por padrão com o projeto quando você está construindo ou combinando o projeto. Então, quando eu vou para Angular JSON, eu vejo que cada projeto tem alguma configuração específica. Então, uma dessas configurações é um Styles. Styles é uma matriz onde você pode incluir qualquer coisa que você quer para o seu estilo do projeto? Então, se eu quiser incluir o bootstrap, eu usaria a mesma string e adicionar entrada para este array, mas o caminho será um nó módulos. Nestes módulos temos Bootstrap e, em seguida, como vimos anteriormente que temos um css e, em seguida, bootstrap outro SCSS. Então aqui nós incluímos o CSS em nosso projeto. Lembre-se de que você precisa reiniciar seu projeto após essa alteração, porque essa alteração é uma alteração de configuração, você precisa reiniciar o projeto novamente. Então, vamos removê-lo do arquivo SCSS e, em seguida, reiniciar o projeto. Então, para parar o compilador, Controle C no compilador. E então eu executo de novo. Ele compilado com sucesso e correndo de volta para a atualização do projeto. Você vê que realmente moveu a biblioteca do arquivo SCSS, mas nós tê-lo incluído no arquivo Angular JSON onde eu posso incluir os estilos. O que eu prefiro, de que maneira eu prefiro a maneira onde estamos incluindo os arquivos aqui. Porque desta forma, quando você incluir especialmente arquivo SCSS, você pode ter acesso a algumas variáveis dessa biblioteca. Como você sabe, no SPSS, você pode definir uma variável. E essas variáveis podem ajudá-lo a ajustar esta biblioteca para caber exatamente no seu projeto. Por exemplo, se formos para bootstrap novamente e vamos para o sistema de grade. E no sistema de grade, como você sabe, temos algumas variáveis ou valores predefinidos para tamanhos que podem ser usados para celular, computador ou tablet. Mas como eu disse antes, o benefício de incluir o arquivo SAS é que podemos usar alguns recursos dessa biblioteca, dessa grade. Podemos ajustá-lo. Então temos, por exemplo aqui arquivos SAS ou as variáveis SAS como colunas de grade ou largura de calha acordada. Então, sempre que eu vou aqui e mudar essa variável com base no que eu preciso no meu projeto, então todo o Bootstrap vai se comportar com base nessa mudança da variável. A mesma coisa. Por exemplo, existem alguns mixins. Eu também posso usá-los. Veremos isso profundamente mais tarde depois que estamos construindo o projeto, como usaremos essas variáveis, como usaremos esses mixins desta biblioteca ou qualquer biblioteca para construir nossa loja eletrônica da maneira certa. 85. Como instalar PrimeNG: Ok, Como decidimos anteriormente, vou mostrar-lhe como instalar a biblioteca N D principal em seu projeto para executar e andar com ele. Primeiro de tudo, precisamos ir ao seu site da NGA principal, que é prime faces.org. E então você clica em Prime NG e, em seguida, demo. E aqui você será especializado para componente angular sob Prime NG. Então, se você for para a demonstração, você verá todos os componentes que precisamos para a nossa biblioteca. Veremos todos os componentes mais tarde quando estamos trabalhando com o projeto. Mas agora vamos instalar a biblioteca para o nosso projeto. E na próxima palestra, mostrarei como trabalhar com esses componentes desta biblioteca. Então, primeiro de tudo, você precisa ir para começar. E comece, você verá duas coisas que você precisa instalar. Primeiro, prima NG e, em seguida, ícones primos. Porque m principal biblioteca NG e componentes, existem ícones e esses ícones devem ser instalados separadamente. Então vamos fazer isso em nosso projeto. Primeiro, vamos instalar Prime NG e, em seguida, ícones primos. Voltando ao nosso código, abrimos um novo terminal para instalação. E nós digitamos npm install, e depois prime end e salvar flag para salvá-lo em profundidade dependências entrar e nós vamos tê-lo instalado em nossa máquina. Outra biblioteca que precisamos instalar, é chamada de ícones primos. Então vamos instalá-lo também. Vamos para npm instalar ícones prime, e depois Salvar, ok, Agora temos tudo instalado e instalado com sucesso. Então, anteriormente fizemos alguma atualização sobre Angular JSON que adicionamos biblioteca bootstrap. Vamos removê-lo para não ter conflitos com a biblioteca Prime NG. Então você precisa ter certeza de que você não está instalando várias bibliotecas para não obter conflitos juntos, especialmente se eles estão usando às vezes mesmo nomeação de classes de CSS. Então nós salvamos o JSON angular e então nós reiniciamos o projeto como aqui, nós o temos em execução, então nós precisamos pará-lo. E, em seguida, executá-lo novamente. E depois disso, eu vou para o final você comprar e importar a biblioteca principal N G. Eu vou usar o caminho onde eu vou importar os arquivos de end para minhas principais lojas de motores, SESS. Então aqui podemos criar uma seção chamada bibliotecas. E aqui temos que importar. E então colocamos o sinal que combinamos antes sobre. E colocamos o NG principal , mas não sei qual arquivo. Você tem duas maneiras de saber qual arquivo. Você pode ir para módulos de nó como vimos anteriormente. Ou você pode ir aqui na documentação para ver qual arquivo você tem que incluir. Aqui diz que você deve incluir esses arquivos. Então vamos incluir este que estamos contidos por ícones, que precisamos, como vimos anteriormente. E o segundo é tema. Precisamos instalar um tema. A coisa boa com a energia Prime, ele vem com vários temas. Para poder selecionar o tema certo para o seu projeto. Por exemplo, vamos selecionar este. Há um roxo, ele vai mudar imediatamente nesta vista. Então você tem um tema escuro, você tem vários temas que você pode usar. Para este curso, eu vou usar saga azul. Então, assim, você tem que copiar esta parte. Ou você pode copiar um desses temas aqui. Então eu vou usar a saga azul como combinamos. Então aqui eu vou ter outra importação e assinar, e então aqui eu vou incluir a coisa. A última coisa que temos a incluir é a própria biblioteca. Então copiamos este. E depois fazemos outra importação. Novamente. Colocamos o arquivo CSS desta biblioteca. Então aqui nós incluímos tudo sobre esta biblioteca. Salvamos que vemos tudo compilado com sucesso. Não temos nenhum problema porque estamos no caminho certo. Não tínhamos nenhuma flecha aqui. Na próxima palestra, vou mostrar a vocês como usar um desses componentes nesta biblioteca. Então é muito fácil. Não temos que fazer muito trabalho. É exatamente como é implementado aqui. A energia prime está muito bem documentada, como veremos na próxima palestra. 86. Como usar componentes PrimeNG no nosso projeto: Ok, agora como prometido, vou mostrar-lhe como usar um desses componentes desta biblioteca. Então, antes de tudo, vamos a esta biblioteca. Vamos procurar alguns componentes. Por exemplo, temos o acordeão prime NG vem com documentação muito agradável para cada componente e mostra como usar cada componente. Então, antes de tudo, podemos ir para a documentação deste componente. Precisamos importar o módulo acordeão para o nosso módulo de aplicação. Então vamos copiar esta linha e vamos para o nosso projeto. E veremos que temos duas aplicações. E cada aplicação tem módulo de aplicação. Claro que talvez tenhamos vários módulos como veremos mais tarde, mas agora temos apenas um módulo de aplicação. Então vamos trabalhar aqui. Então eu vou importar este módulo de acordeão primeiro. E nós vamos para as importações aqui para incluí-lo dentro do nosso módulo NG do módulo de aplicação. E então vamos ver essa documentação. O que nos diz um desses exemplos está nos mostrando que temos que copiar este código HTML. Então este HTML será colado na página onde vamos usar este componente. Por exemplo, vamos para a página inicial. Então, se formos aqui em nossa aplicação, temos páginas. Uma dessas páginas é a página inicial. Podemos remover este botão que criamos anteriormente. E então colamos este código aqui. Ok, nós executamos o projeto, ele foi salvo. Vamos de novo. E então temos dois anfitriões locais, 4200, o porto. E veremos que temos o acordeão, mas ainda perdemos algo. Há um problema porque não estamos usando as animações. Se formos começar novamente nesta biblioteca, você, precisamos instalar as animações. Tudo o que precisamos para importar módulo de animação. Então temos que importar este módulo, que já está instalado com Angular. Vamos novamente para o nosso módulo de código. E então colocamos normalmente após o módulo do navegador. E importamos aqui. Então, nós importamos a animação porque esta biblioteca está usando este módulo. Então, se voltarmos para o navegador, voltar para o nosso projeto, veremos que o acordeão está funcionando principalmente da mesma maneira que você faz para todos os componentes. É muito bem documentado. Você pode fazer o que quiser. Vamos usar a maioria dos componentes que estão nesta biblioteca quando estamos indo para construir nosso projeto. 87. Overrride PrimeNG: Além disso, gostaria de mencionar que depois que estamos instalando os componentes prime nk, percebemos que ele está substituindo as fontes. A fonte, que é nós, por exemplo, estávamos planejando usar Open Sans, que já instalamos anteriormente, mas eu gostaria, por exemplo, de instalar ou usar isso no motor principal. O problema é que para NG principal há algum caso específico. Não é o único ditado que queremos corpo e, em seguida, usamos Open Sans. Mas você também tem que dizer depois de importar, é claro energia primária, você tem que dizer componente B, como esta classe, componente traço P. E então você pode continuar trabalhando. Então, neste caso, componente p é o ponto de entrada para as fontes de energia primária. Portanto, o corpo não é suficiente, mas também componentes p. Neste caso, você permitirá que sua aplicação e os componentes do prime NG usem a fonte que você especificou aqui. Então, para isso, o nível de aplicação, quando eu vou aqui, por exemplo, para NG shop, eu coloquei a configuração não aqui no início, mas depois de usar o NG principal e importar todas as bibliotecas do NG prime. Então, depois que temos tudo da energia Prime, eu vou e atualizo a configuração do componente de pico e do corpo para usar essa fonte. Apenas para mencionar este ponto para você no caso de você não ver sua fonte é aplicável em seus aplicativos. 88. Como instalar o sistema de Installing: Ok, eu sei que você está muito motivado para começar a codificar e começar o projeto do mundo real. Mas a última coisa, por favor me perdoe por eu querer mostrar-lhe como instalar uma grade. Em cada aplicação, precisamos de um sistema de rede. Um sistema de grade que está mostrando a estrutura do aplicativo. Você quer saber o que eu quero dizer. Se você for a uma biblioteca, você verá algo chamado flexão principal. E esta flexão principal é um sistema que está mostrando a grade para colocar seus componentes com base nessa grade. E tem uma funcionalidade muito bonita e é muito dinâmica. Assim, você pode usá-lo e ajustar seu aplicativo em todas as plataformas, como um celular ou tablet ou um desktop. Se você não sabe sobre o sistema de grade, veremos isso mais tarde em detalhes, como construir nosso aplicativo baseado no sistema de grade. Mas primeiro, se formos para este sistema de grade, ele tem sua própria configuração. Então, primeiro de tudo, precisamos passar pela configuração. Precisamos de novo instalar uma biblioteca, a Biblioteca do Vinho. Chama-se “prime flex”. Exatamente algo como ícones primos ou Prime NG em si. Então, primeiro de tudo, precisamos ir ao nosso projeto e instalar o prime flex. Então abrimos um novo terminal. E então vamos aqui, dizemos npm install prime flex, e então dizemos, OK, agora este prime flex está instalado. Vamos ver como podemos usá-lo. Vamos pegar um exemplo da própria biblioteca. Então vemos aqui que o fluxo primário tem sistema de grade múltipla. Um deles é o sistema de grade e flexbox. Então vamos usar neste curso esse sistema de grade. Esse sistema de grade é muito dinâmico, o que se adapta à nossa aplicação em tablets móveis ou desktops. Então, como você vê aqui, há vários exemplos. Vamos pegar um desses exemplos. Então nós temos aqui primeiro este ser grade. Mas antes de vermos que temos aqui uma aula. Mas esta aula vem de onde precisamos usá-la. Então, primeiro de tudo, precisamos incluir este arquivo em nossa biblioteca, exatamente da mesma maneira que fizemos anteriormente com outras bibliotecas. Então copiamos este caminho. Vamos para o projeto. Novamente na loja de energia ponto SCSS. Nós importamos esta biblioteca usando este sinal e nós temos agora como CSS. Então, quando salvamos, vemos que o projeto está sendo executado com sucesso. Agora somos capazes de pegar um exemplo. Voltando ao sistema de grade da biblioteca que está pegando um desses exemplos. Como, por exemplo, podemos dizer este. Volte para o nosso código, vamos para a página inicial e depois colamos este código aqui. Vamos para o navegador. Para o nosso projeto, veremos que este sistema de grade está funcionando. Porque se eu desativar esta biblioteca, vamos comentar esta biblioteca. Volte para o nosso projeto. Vamos ver que eles estão alinhados uns com os outros porque padrão que div tag todo o espaço. Assim, com um sistema de grade que instalamos, teremos o sistema que é adequado para nossa aplicação e precisamos dele para celular, desktop e tablet. Como eu disse mais tarde, vamos usar todas as funcionalidades deste sistema de grade. Agora estamos prontos. Construímos a estrutura dos estilos. Temos a estrutura dos arquivos e das pastas. Agora estamos prontos para começar a codificação e construir o aplicativo. Vou primeiro começar com o painel de administração. O painel de administração onde estamos adicionando produtos, usuários, pedidos e também categorias e fazer todas as operações brutas sobre eles. 89. Introdução: visão da área do administrador: Bem-vindo a uma nova seção. Aqui vamos construir o aplicativo do painel de administração. O painel de administração onde vamos controlar os pedidos. Vamos controlar produtos, categorias e todas as operações neles, como adicionar, editar e excluir. Então, como uma visão geral, eu vou ter uma tela de login. Vou fazer login no meu usando minha conta aqui. Então eu vou usar, por exemplo, esta conta. Eu sou admin, é claro, os usuários normais também não podem olhar. Então, só podemos como administradores olhando, teremos um painel como você vê aqui. Quantos pedidos eu tenho, quantos produtos, quantos usuários na minha loja e quanto total de vendas eu fiz para a minha loja. Assim, também teremos uma visão geral sobre os produtos. Então você pode também produtos auxiliados. Você pode excluí-los. Você vai ver como você pode muito bem fazer como conformação. Eles são logs e você pode editar e produtos. Por exemplo, vou atualizar este. Você pode clicar na atualização e você obteria todas essas notificações. E também, podemos trabalhar com categorias. Vamos ver como usaríamos, bem como o seletor de cores. Gostaríamos de adicionar como formas básicas como você vê aqui. E vamos usar os ícones e, claro, as ordens onde teremos o status das ordens que estão dobrando ou processadas. E o usuário ou o administrador pode alterar o estado do envio ou do pedido. Então ele pode ter como enviado ou entregue. E com base nisso, os dados serão atualizados aqui também. Vamos ter algum controle sobre os usuários ou seus clientes. Vamos ver quem é administrador, quem não é. Teremos como lista de países, como podemos saber de que país ele é. E nós vamos adicionar as informações, usar uma senha, e, em seguida, estamos enviando esses dados para o back-end no caminho certo para a funcionalidade do painel de administração sem qualquer coisa faltando, vamos ver também como podemos carregar imagens e nós tem que usar editores de alcance. Vamos ver todas as informações que precisamos realmente para construir um aplicativos do mundo real e pegar dados do banco de dados também. Você usará o botão de logout para que o usuário possa fazer logout e voltar para a página de login. Vamos ver como proteger o nosso caminho é para que o usuário não pode ir para qualquer página até que ele seja autorizado. Vamos ver como vamos adicionar um token, como vamos pegar esse token para o nosso armazenamento local e usá-lo. Como podemos obtê-lo a partir do banco de dados ou do backend e usá-lo no front-end para saber se o usuário é admin ou não. Tudo isso estará nas próximas seções. E vamos construir isso passo a passo usando NG principal e também outras tecnologias que precisamos para isso. 90. Como criar o Shell: Certo, agora vamos construir a concha. O que eu quero dizer com a concha, como você vê nesta foto, que temos uma barra lateral e temos um conteúdo à direita. Então esta área branca estará cheia do conteúdo para o qual eu vou navegar. Então, quando eu clicar em produtos, Eu vou ver tabela de produtos, ou, por exemplo, eu vou ver tabela de categorias. Vou ver Editor para o produto. Então, neste caso, preciso da concha. Eu estou chamando de concha porque ele continha como um lado fixo onde é barra lateral é fixo. Não preciso atualizar a barra lateral toda vez que estou navegando para uma nova página, mas só preciso atualizar o conteúdo. Então, como você vê aqui, precisamos de dois componentes. Um componente é o shell em si, como a página onde vou localizar o painel e os itens e também a barra lateral. A barra lateral, também é seu próprio componente, conterá o logotipo e seus próprios links. Então vamos fazer isso no código e vamos ver o que vamos precisar para isso. Ok, agora, como a primeira coisa que temos que fazer, temos que configurar o aplicativo certo. Como você se lembra, criamos dois aplicativos. Então o primeiro é a obrigação de administração e o segundo é ND shop. Então, para isso, vamos trabalhar no aplicativo de administração porque estamos construindo agora o painel de administração. Então vamos configurá-lo. Bem, primeiro de tudo, precisamos importar os estilos, que estão nos estilos públicos, e fizemos isso anteriormente. Segundo, quero configurar Eastland. Eastland, como nos lembramos, é corrigir nosso código quando estamos fazendo alguns erros, estranho quando estamos importando algumas bibliotecas desnecessárias, etc. Então, para isso, precisamos primeiro corrigir o prefixo para as diretivas e o componentes em Angular. Como você se lembra, criamos um componente que este componente tem um seletor e o selecionado deve seguir alguma regra, como um prefixo. Portanto, precisamos ter um prefixo admin para cada componente. Claro, você não tem que seguir esta regra. Você pode nomear seus componentes como quiser. Mas para coisas organizacionais, é melhor tê-lo assim. Então eu iria para ES fiapos. E aqui nesta parte, o atributo desta diretiva eletrodo será prefixado como admin e também o componente seria prefixado como admin. Então, neste caso, cada componente deve ser prefixado com admin. Além disso, o componente App deve ser prefixado com admin. Mas como você se lembra, em Angular, temos componente N3, que é componente aplicativo, que é chamado de um arquivo HTML índice do projeto. Então eu estou no nível do projeto acima. E aqui eu tenho índice. E este índice que estamos chamando o HTML básico que é necessário para o projeto. Então, para isso, temos aqui também admin. E aqui também, administrador para uma tag de fechamento. Agora estamos prontos e nossa aplicação seguindo as regras de ES fiapos. Claro que você pode adicionar mais regras com base em suas necessidades. Eu não vou ter todos eles. Eu só quero mostrar que há um arquivo chamado Eastland que você está seguindo algumas regras que você precisa fazer para o seu código. Então, como conversamos anteriormente, precisamos criar um shell. Shell conterá uma barra lateral e o conteúdo. Então, para isso, precisamos gerar dois componentes. Uma é concha e a outra é uma barra lateral. Podemos fazer isso através de um console x. Clicamos em Gerar e procuramos por um componente. Nós clicamos nisso e damos um nome, por exemplo, shell. E o projeto é administrador. Falamos anteriormente sobre todas as outras opções. Então eu vou dar isso a um CSS e, em seguida, eu vou clicar em Executar. Mas primeiro, preciso ter uma estrutura para os arquivos e os componentes. Então, seria melhor se nós estamos colocando dentro de uma pasta. Por exemplo, temos aqui algo para as páginas e podemos criar outra pasta. Nós o chamamos compartilhado porque o shell é compartilhado entre todos os aplicativos. Então podemos verificar o caminho. Vemos que, ok, até shell compartilhado e, em seguida, o componente é criado. Vamos executá-lo. E teremos o arquivo ou o componente é criado aqui. Legal. Então vamos limpar um pouco. Como por exemplo, precisamos fazer o prefixo admin e também precisamos remover o CSS porque teremos o CSS no status público. Então vamos remover este arquivo. E o objetivo desse arquivo, faremos isso para cada componente que estamos criando. Outro componente que eu preciso ter é a própria barra lateral. Então vamos novamente para gerar componente. Selecionamos este e dizemos compartilhado e, em seguida, barra lateral e no administrador do projeto e tudo o mesmo. Então executamos este comando. Teremos em nossa estrutura de arquivos, novamente uma barra lateral. Nós limpá-lo e fazemos este prefixo como um administrador de barra lateral e realmente mover o arquivo SCSS. Nós salvamos e veremos que os componentes já estão importados no módulo. Vamos voltar ao nosso compilador. Estamos executando já esse aplicativo e D-sharp, precisamos executar o aplicativo Admin para que possamos ir novamente e x servir. Mas dizemos que o nome do aplicativo é admin. Então estamos rodando agora para verificar se tudo está funcionando bem. Estamos recebendo algumas setas aqui porque não atualizamos o arquivo de estilos do aplicativo Admin. Então, se você se lembrar, estamos trabalhando apenas na loja ND, não no administrador. Então vamos copiar as mesmas coisas que tínhamos em G sharp e colá-las no admin, exceto a parte que é realmente, muito específica para o aplicativo. Então temos aqui Apps shop. Não, não precisamos disso no administrador. Precisamos apenas de algo específico para o administrador do aplicativo. Então, podemos remover esta parte e executar o projeto novamente e verificar se tudo está funcionando bem. Voltamos ao estilo CSS, onde chamamos o administrador. No nível do aplicativo de estilo, pressionamos Salvar novamente, e veremos que tudo foi compilado com sucesso. Agora, como uma estrutura de componentes, estamos prontos para ir para a próxima etapa onde vamos chamar esses componentes como o shell e a barra lateral para mostrá-los no aplicativo. Para isso, precisamos configurar rotas. E isso é o que veremos na próxima palestra. 91. Como criar as rotas: Ok, nós falamos anteriormente sobre as rotas. Agora vamos importar ou construir algumas rotas para o painel de administração. Primeiro de tudo, precisamos ter que preencher este array. Então precisamos, como conversamos anteriormente, para definir um caminho é, e esses passes se referirão aos componentes. Mas como faremos isso no caminho, como construímos o aplicativo. Então, conforme necessário, eu criei a matriz da rota. A matriz desta rota, que terá componentes ou objetos, e cada objeto terá o caminho e o componente ao qual esta passagem está se referindo. Assim, por exemplo, o padrão se referirá ao componente shell. Quando salvamos isso e tentamos nossa aplicação, veremos que ainda temos painel de administração porque temos o componente aplicativo, ainda temos este título. Então precisamos dizer a este componente aplicativo, para o justo e usuário fora como podemos fazer isso. Nós apenas dizemos tomada roteador e nós fechamos como uma tomada de roteador tag. Então, quando executamos isso, vamos ver que ele está se referindo exatamente ao shell porque o caminho padrão está se referindo ao componente shell. Certo, como conversamos anteriormente, precisamos dividir a concha em duas partes, uma barra lateral e outra conteúdo. Faça isso. Então eu vou para o componente shell, remover esta parte, vou criar uma div, chamá-lo de wrapper admin. Cabe a você. Você pode criar o código HTML com base no que quiser. E dentro dessa borracha, eu quero chamar a barra lateral do administrador, que nós criamos anteriormente. E perto da barra lateral, precisamos criar o conteúdo. Então eu digo administrador ao vivo, por exemplo, conteúdo. E o que vai estar aqui dentro estará dentro dele, o conteúdo. Então, como podemos nos referir a isso? Primeiro de tudo, vamos ver se tudo ainda está funcionando. Vamos novamente para o navegador, ok, barra lateral funciona. Precisamos aqui para sentir o conteúdo. Por exemplo, precisamos do painel, como vimos anteriormente, que a barra lateral contém muitos links, como produtos, painel e pedidos. Assim, o conteúdo será sempre diferente. Então, neste caso, precisamos criar conteúdo dinâmico. Podemos fazê-lo também através das suas rotas. Então eu vou dizer que este caminho tem o componente de cisalhamento e esses caminhos têm filhos e as crianças também serão rotas. Assim, as crianças também serão array e ele irá conter objetos e cada objeto, teremos um caminho. Podemos chamá-lo, por exemplo, painel e também componente. Então, precisamos nos referir ao componente painel, que criamos também anteriormente. Então, quando eu salvo e depois eu vou para o navegador, eu ainda vejo tudo vazio. Quando eu navegar diretamente para o painel, veremos que nada aconteceu porque o painel, ok, estamos no caminho certo, mas não podemos ver nada no conteúdo. Então, como podemos consertar isso? Nós estamos indo para ir para o componente shell e dizer que este filho ou este componente tem também tomada roteador. Então, quando você deseja exibir os filhos deste componente ou seus caminhos filhos deste componente, você precisa colocar também uma tomada de roteador. Nós salvamos isso de volta para o navegador. Vamos ver que temos trabalhos de barra lateral e trabalhos de painel. E quando você cria outro caminho aqui, por exemplo, chamamos de produtos. Em seguida, você vai se referir ao componente produtos, e ele será chamado e renderizado dentro do shell. Então, neste caso, eu não estou atualizando cada vez que a barra lateral, eu estou atualizando apenas esta parte. E é assim que lidamos com o caminho está em nossa aplicação e veremos no futuro o benefício disso, que podemos proteger todas essas rotas, como proteger todos esses passados para que ninguém possa acessar seus filhos também. Na próxima palestra, vamos estilo wrapper admin e conteúdo admin para ter o design alvo que eu mostrei anteriormente. 92. Barra admin: Ok, vamos começar com a primeira coisa. Primeiro, quero criar esta barra lateral. Como você vê aqui, que temos o logotipo e temos alguns botões de navegação. Dentro destes botões de navegação, temos ícones. Então vamos criar isso. Ok, como vimos anteriormente, que criamos um wrapper admin. Então temos a barra lateral. Vamos para o modelo da barra lateral. Nós vamos fazer a div. Div é barra lateral ou barra lateral do administrador. E então eu quero definir dentro da barra lateral primeiro, como vemos anteriormente, que temos um logotipo no topo. E também eu quero definir os links, os links que vem sob o logotipo. Então aqui eu preciso também importar uma imagem. A imagem já está, eu a tenho na minha pasta de ativos. E se você for para a pasta Ativos, eu pego no design e coloco no local da pasta. Assim, os ativos é o nível de aplicação. Então vamos voltar e criar os links. Que links como normal, precisamos criar uma lista não ordenada. E esta lista não ordenada terá lista dentro de um item da lista e cada item da lista terá um link. E dentro deste link eu defino minhas cordas que eu precisava. Por exemplo, eu preciso de um painel. Eu também preciso, por exemplo, dos produtos e das encomendas, etc. Como você se lembra, tínhamos um ícone antes do texto. Então, depois do texto, temos um ícone. Vamos para a extremidade principal da biblioteca, porque já instalamos esta biblioteca, copiamos estas duas linhas de código ou esta linha de código para importar o ícone. Então, primeiro de tudo, eu vou para o painel de controle novamente ou para a minha barra lateral, e eu colei aqui. Assim, para todos os outros links, podemos criar outra lista. E então podemos renomear esses itens como produtos. E nós renomeamos, por exemplo, categorias. E também precisamos de ordens. E também no final, preciso de usuários. E, claro, precisamos de um link que é chamado de sair, onde o usuário vai sair do painel de administração. Mas primeiro vamos colocar os ícones certos porque temos aqui verificar pi, assim você pode encontrar os ícones Eu também na biblioteca de ícones. Então temos aqui todos os ícones. Então pegue o nome e cole-o. Então, por exemplo, para o painel, eu preciso de casa, para produtos, eu preciso de uma pasta, quatro categorias. Eu preciso de uma lista e para pedidos, eu preciso, por exemplo, carrinho de compras. E, por exemplo, para os usuários, Eu preciso de usuários ícone. Assim, cada ícone precisa do nome que pode pegar na biblioteca. E para o logout, eu tenho algo chamado Sign Out. Vamos salvar e ir para o aplicativo e ver se tudo está funcionando bem. Ok, nós temos tudo está bem, mas sem qualquer estilo. Então vamos estilizar a barra lateral em nossa pasta de estilos públicos. Então, primeiro de tudo, eu vou para os estilos públicos. E aqui eu já defini a pasta admin. Então, dentro desta pasta admin, precisamos ter algo chamado shell, shell dot SCSS, e então importamos no admin. Então aqui eu tenho um compartilhado E eu digo importar de, por exemplo, há aplicativos e, em seguida, Admin, e depois Shell. Então eu preciso importar essa. Então, depois daqui, precisamos escrever nossos estilos aqui. Então, primeiro de tudo, eu preciso ter, por exemplo, seu invólucro, o invólucro e o principal, modo que o nosso superior terá todos os tipos barra lateral dentro dele. Então vamos ter a parte superior deles primeiro. Então, dentro do shell eu crio classe admin. E esta classe de administração terá um rapper. E dentro deste invólucro, por exemplo, eu tenho uma altura 100%. E, por exemplo, eu tenho um rebatida 0 apenas para inicializá-lo. E, em seguida, uma margem terá um 0. Só estou inicializando o conta-gotas todo. E então precisamos criar a classe da barra lateral e a classe da barra lateral, como vimos anteriormente, que ela está dentro e é prefixada com admin. Então é por isso que eu uso essa barra lateral comercial e menos. A posição da barra lateral será corrigida porque eu não quero rolar a barra lateral como mostrarei mais tarde. E a largura será 175. Foi assim que consegui a partir do design e da cor de fundo. Por exemplo, eu tenho um preto e também temos uma altura. Podemos dar-lhe 100%, para que possa ser pés em toda a página. Então, e o conteúdo principal? O conteúdo principal que virá perto da barra lateral. Então aqui eu preciso ter também comercial e principal. E dentro deste principal eu terei uma largura. Qual é a largura será um cálculo de 100% menos 175 pixel porque a barra lateral tem 175 pixel. Então aqui eu também tenho uma margem. Eu preciso empurrar este conteúdo principal principalmente para a direita. Então eu vou dizer margem esquerda , será 175 pixels. Então, se formos aqui, veremos que temos a barra lateral e também temos o conteúdo aqui. E como você se lembra, nós tínhamos a rota do painel. Então, a rota do painel, vemos que é realmente são e em seu conteúdo. E podemos ter certeza de que minha abertura o tem ferramentas e, em seguida, verificar o administrador principal ou o próprio wrapper admin para ver que tudo está bem. Então vamos fazer mais estilo. Primeiro de tudo, eu preciso ter o logotipo de uma maneira mais agradável. Então eu vou ter um logotipo, e este logotipo terá um preenchimento como 20 pixels, e então ele terá uma largura de cerca de 100%. Assim, ele pode caber exatamente na barra lateral, dentro do conteúdo principal da barra lateral. Dentro do logotipo, percebemos que temos uma imagem e dentro desta imagem, vou dar-lhe máxima largura 100% para não sair de seu conteúdo. Então tudo está bem na barra lateral e na imagem. Vamos amarrar agora eles são links, que links também eles têm sua própria classe que é chamado links. E então eu preciso estilizar cada elemento dos links. Então eu vou ter os links de classe em um lado, esta classe eu tenho URL, e o URL será inicializado com margem 0 e preenchimento 0, porque às vezes ele vem com alguns valores, então precisamos inicializá-los. E o mínimo deles, teremos um bloco de exibição para exibi-lo como um div. E o menor estilo será não tutti, mais desses pontos perto do item da lista, e também a largura seria 100% de seu contato. E como você se lembra, dentro deste item de lista, temos um link e este link vamos agora para estilizá-lo. Então, em primeiro lugar, damos uma aula, e essa classe tem uma cor, e essa cor pode ser branca. E podemos dar esses links rebatendo. Assim, pode haver mais espaços entre esses links. Mas primeiro sobre a cor, quero te mostrar um truque. Como você se lembra, eu falei sobre algumas, algumas variáveis definidas de cores que são definidas em sua biblioteca de NG principal. E essas variáveis, você não pode vê-las nas ferramentas de desenvolvimento. Então, como você vê nesta lista, já existem CS definidos como variáveis para suas cores. Então você pode pegar a cor que você gosta e principalmente são utilizáveis porque você pode usá-los em qualquer lugar em seu estilo, que vem com esse tema. Então, para usar essa cor, você precisa dizer var e você colocar o nome da variável, e então ela terá a cor. E se verificarmos, vemos que está realmente tendo essa cor. Ok, então agora está tudo pronto. Precisamos ter um bloco de exibição para o um link que eles possam ter largura efetiva e também acolchoamentos eficazes. E como vemos aqui, que tudo está funcionando bem. Mas primeiro precisamos dar alguma cor pairando, como quando coloco o mouse em um link, eu terei uma cor. Então, em primeiro lugar, eu tenho, por exemplo, um fundo. Vamos pegar um pouco de cor da nossa lista aqui. Então eu vou ligar o azul 500 ou 600 e 700 a qualquer hora qualquer coisa. Então você pode colocar, por exemplo, var e isso via azul 700. E então qual é o ângulo? Mas temos um navegador. Eu navegar e IC que o titular está funcionando bem. Então vamos estilizar esses ícones mais para que possamos dar como mais espaços. Então, se você se lembrar que temos eu elemento dentro do link, como você vê aqui. Então nós temos o I, precisamos estilizá-lo. E isso eu terei, por exemplo, uma margem, margem, certo? Como se eu quisesse afastá-lo do texto. Dou-lhe o oitavo pixel. E também se você quiser, você pode dar como alguns top margem. Podemos dar-lhe como um 0 para inicializá-lo se ele tem alguma margem antes. E também podemos dar um flutuador à esquerda, que ele possa ser empurrado para a esquerda principalmente. Então economizamos e vemos que tudo está funcionando bem. Vamos agora dar algum quarto estilo especial seu botão Alt logotipo. Então eu vou dizer aqui classe que ele tem alguma classe específica que é chamado de logout. E esta classe eu vou defini-lo aqui dentro do a. E o botão de logout terá uma cor, que é, por exemplo, podemos dar-lhe uma cor mais clara, como um azul. Podemos dizer 500. E neste caso, veremos que tem uma cor realmente diferente. Como você vê aqui, existem alguns espaços em branco como a barra lateral não está se encaixando diretamente nas bordas da página. Isso porque o componente HTML ou elemento HTML não é inicializado mundo. Para inicializar os elementos, eu aconselharia a usar uma biblioteca chamada normalize dot css. E esta biblioteca inicializará sua página web ou código HTML desde o início, e então você pode trabalhar com ele da maneira certa. Então ele está fazendo algumas inicializações para o aplicativo ou o HTML antes de começar a codificar. Então é por isso que eu vou colocá-lo no topo do meu arquivo CSS. Então aqui eu vou chamá-lo, e seria da mesma forma como estamos chamando todas as bibliotecas MPM. Porque se você entrar nesta biblioteca, quando você pressionar controle e para esta biblioteca que você vai ver que nós temos inicializações de tudo, como HTML barra lateral progresso tudo. Então aqui nós temos a inicialização e vamos ver que ele está realmente funcionando bem. Mas ainda temos este espaço no topo. Isso porque eu quero inicializar também a barra lateral para estar no topo. Como você se lembra, eu coloquei esse mostrador fixo. Então, quando eu colocá-lo em fixo, eu preciso fazer o topo para ser 0. Então voltamos ao nosso código e dizemos “top 0”. Então é por isso que eu não quero ter uma rolagem no conteúdo porque ele terá um fixo. Então, quando eu rolar o conteúdo, a barra lateral permanecerá fixa à direita e não será rolada. Eu também quero dar um pouco de cor em vez de preto para a barra lateral para ser mais agradável e se encaixar com o design. Então, como você vê aqui, que tudo está funcionando bem. Então agora eu preciso navegar entre esses ícones ou esses links. Então, quando eu clico neles, eu navego para a página. Então, se você se lembra em Angular temos algo chamado link roteador e você pode adicioná-lo ao elemento HTML, como um link ou um. E então você pode navegar para um lugar específico. Então eu vou adicionar cada link baseado na rota que é definido no módulo como vimos na palestra anterior. Então eu vou ter aqui, por exemplo, um painel e produtos e outras coisas como as categorias. E como você se lembra, temos tudo definido no módulo. Por enquanto, temos apenas o painel, mas eu vou adicionar para o resto. Então eu vou pular este vídeo para fazê-lo rápido. Agora temos tudo dentro que se altera, mas tenha cuidado. Eu o movi do um ou do olho para o um porque se você, se você colocá-lo dentro do olho, então a navegação funcionará somente quando você clicar no ícone. Vamos tentar isso. E veremos que estamos navegando, certo? Mas quando eu clico em produtos, eu recebo erro. Isso ocorre porque a navegação do produto não existe no módulo do aplicativo. Então precisamos adicionar lá fora, como veremos mais tarde. 93. Disable de backend para API para propósito Frontend: Certo, de volta ao back-end. Como você se lembra, que criamos autenticação para nossas APIs. E essas APIs estão protegidas agora. Portanto, não podemos fazer nada sem fazer login para criar o aplicativo do painel de controle. Quero desativar esta autenticação porque a autenticação virá depois de prepararmos tudo, como as guloseimas, produtos, amieiros e também os usuários. Então, quando o assunto de autenticação virá para o front-end, então podemos ativá-los novamente. Então, para desativar a autenticação, vamos para JWT, arquivo JS em nosso backend. Então eu vou comentar tudo isso a menos, e então dentro a menos que eu vou permitir tudo. Então eu vou adicionar uma linha aqui, eu vou chamá-lo de URL, e então ele vai aceitar um regex. E essa rejeição será exatamente a mesma que aqui, mas exceto esse prefixo. Assim, desta forma, vou permitir que todos os URLs sejam chamados para o back-end sem qualquer autenticação ou autorização. Isto é temporariamente. Então, basta comentar esta parte e adicionar esta parte porque nós vamos excluí-la depois de ativar realmente o back-end. Mas, por enquanto, eu quero usar essas APIs sem autenticação. E em um vídeo posterior, depois que terminamos no backend totalmente e no front-end, então eu vou dizer-lhe como ativá-los e testamos nossos aplicativos com autenticação. 94. Categorias de serviço: Ok, agora vamos preencher nossa tabela com os dados reais, dados, que vêm do back-end. Para isso, precisamos criar um serviço que é chamado de serviço de categoria. E como vemos neste gráfico, temos o serviço de categoria localizado na biblioteca de produtos. Então, desta forma, precisamos criá-lo lá e vinculá-lo ao painel de administração. Então vamos fazer isso praticamente e vamos ver como podemos pegar isso na mesa. Então temos a nossa tabela pronta e precisamos, por exemplo, para preencher esta matriz a partir de dados não codificados, mas do back-end. Então vamos começar a fazer isso. Em primeiro lugar, como dissemos anteriormente, que temos o serviço localizado na biblioteca de produtos. Portanto, não vamos ter o serviço no nível do aplicativo porque o serviço é compartilhado também com o outro aplicativo. Então precisamos colocá-lo em algum lugar onde ele possa ser compartilhado para todos os aplicativos aqui. Então, quando vamos para a biblioteca de produtos, que é pasta elipse, então vamos fechar tudo como aplicativos. Temos elipse e dentro dos laços, vamos ter em produtos, nossa superfície. Então, podemos criar serviço usando um console ECS. Então podemos usar ir lá e gerar e procurar por serviço. E aqui temos a primeira opção. E só precisamos colocar o nome do serviço. Então eu quero tê-lo em uma pasta, serviços e, em seguida, categorias. Isso, nós ainda temos o nome e sempre observamos o que está acontecendo aqui com uma corrida seca porque ele está mostrando onde o arquivo está sendo gerado. Projeto será produtos, que é biblioteca de produtos. E eu quero pular esses testes. Então, quando você gera e clica em Executar? Veja que esta biblioteca é gerada. Você não pode controlar e clicar neste link. Você verá isso que saltamos diretamente para este serviço. Então aqui temos serviço de contiguidade. Nós vamos pegar dados aqui, ok, como você se lembra em um carteiro que temos do serviço backend ou localhost 3000 API versão 1 categorias. Então, quando envio uma solicitação, recebo os dados do back-end. Então eu quero ver esses dados no front-end dentro da nossa tabela, que vemos aqui. Então, primeiro de tudo, vamos ter a solicitação HTTP porque podemos solicitar os dados através do protocolo HTTP. Então, primeiro de tudo, precisamos importar cliente HTTP, que já está localizado na biblioteca Angular. Então primeiro preciso ligar para a Importação. E, em seguida, cliente HTTP de será em angular e, em seguida, barra de comando, barra HTTP. Então, a partir desta biblioteca, eu posso pegar todos os clientes HTTP, para que eu possa fazer chamadas HTTP. Então, como podemos usar esta biblioteca ou este serviço, porque isso também é serviço. Então, aqui vou para o construtor do serviço de categoria de serviço. E eu digo privado, eu defino uma variável que é o tipo de cliente HTTP. E desta forma, eu posso criar um HTTP, GET , delete, post PUT solicitações. Então vamos fazer agora o nosso primeiro objetivo. Então temos um método que podemos chamá-lo Get categorias. E este método dentro irá retornar para mim dados que vem deste serviço HTTP. Então eu vou dizer este ponto http ponto get, Eu quero obter alguns dados. E esses dados virão através da URL, que eu atribuí aqui. Então eu vou copiar este URL e, em seguida, voltar para o meu código. E eu vou dizer, me dê esses dados deste URL. Então, depois disso, teremos todos esses dados. Mas no texto datilografado, quero que você tenha a digitação. Então eu quero especificar tipos para cada tipo de dados que eu recebo. Então, para isso, precisamos criar tipos. Primeiro de tudo, o que este retorno para mim, está voltando para mim, pelo menos, de categorias. E esta categoria pode ser um modelo. Então este modelo pode ser criado aqui. E eu digo que eu quero categoria array. Então vamos criar um arquivo aqui. Você pode usar também no console ECS ou você pode usar também o manual normal como. Então eu crio uma pasta aqui, eu chamo de modelos, porque no futuro, vamos localizar também o modelo de produtos. Então primeiro precisamos ter modelo de categoria, exatamente como fizemos no back-end. Então modelo de contiguidade será também tipo Ts e dizemos exportação. Estamos criando um tipo. Você tem opção, você pode criá-lo como interface ou você pode criá-lo como uma classe. Então para mim eu vou criá-lo como uma classe. E esta classe chamada categoria. E esta categoria terá ID. Exatamente os mesmos dados que tínhamos antes. E este ID tem uma cadeia de caracteres de tipo. E também temos um nome que tem um tipo também string. Estou colocando este ponto de interrogação para torná-los opcionais. Então, sempre que eu criar uma categoria ou, por exemplo , alguma categoria, então ele não vai me dizer ou você está faltando o ID. Então, se estou perdendo o iodo ou tateando, eu só quero ter meu front-end estável. Então aqui não estamos criando objeto, estamos criando variáveis, nome e ícone, como vimos front-end. Então aqui temos agora o modelo. E eu quero que este GetCategories para retornar para mim matriz de categorias. Então eu vou dizer aqui que eu posso retornar, ou este método que retornamos para mim matriz de categoria. Mas temos um problema aqui porque solicitação GET ou GetMethod do serviço HTTP não está retornando os dados exatamente como queremos. Está devolvendo-os sob algo chamado observável. E este observável é algo como você pode imaginar comigo que este serviço está esperando o back-end para responder e então ele está observando os dados até que eles vêm e eles dizem, Ok, agora eu tenho os dados, você pode pegá-los. Este assunto é para os nossos x js, vou mais fundo quando vamos usar NG RX, você vai entender mais o observável por enquanto. E o front-end está esperando os dados e a espera vindo através de observáveis. Então ele não vai retornar para mim categoria array, ele vai retornar para mim observável. E dentro deste observável é matriz de categorias. Então, primeiro de tudo, precisamos ter aqui 0 servable. E quando você não sabe como importá-lo, basta controlar e espaço no Windows ou ponto de controle no Mac. Por isso, ele irá dizer-lhe importar Observável automaticamente. Então você vê aqui, e vemos que é importante aqui. Então, e então eu quero especificar um tipo. Então eu digo que o tipo de aquilo que vem dentro deste observável é categoria. E precisamos também importar esta categoria que criamos anteriormente a partir do modelo de categoria. Mas também dessa forma, precisamos dizer, para obter que ele irá retornar matriz categoria. Não pode ser assim. Então, precisamos dizer que GET, ter cuidado que vamos retornar um dado que são matriz categoria. Então, podemos dizer também para o GetMethod. Então, não teremos esse erro porque aqui é melhor especificar o tipo de dados que está vindo do intestino. Então, este pedido GET vai saber que ele vai retornar categoria array. E eu tenho o link no final e tudo está bem agora. Então salvamos. E então vamos usar esse serviço em nossa agregação. Então vamos ver como vamos importar este serviço categoria e usá-lo dentro da aplicação de categorias ou admin. E aqui vamos ver como vamos usá-lo nesta lista de categorias para substituir esses dados codificados por um dados back-end. 95. Use categorias em componentes de lista de categorias: Ok, então, por enquanto, vamos usar as categorias ou método GetCategories no serviço de categoria dentro da lista de categorias. Então, como eu disse antes que nós importamos um cliente HTTP serviço da mesma maneira que vamos fazer no componente lista categorias. Então eu quero importar o serviço no construtor. Então eu defino uma variável. Podemos definir uma instância desse serviço. Então eu digo serviço de categoria privada. E dentro dessas categorias ou o tipo deste serviço categoria será categorias de serviço. Mas de onde vou pegar esse serviço de categoria da biblioteca de produtos. Então, se eu for aqui e ISA, como vimos anteriormente, importar o bem ou serviço de. E então eu vou dizer na Blue Bits e o nome da empresa e dos produtos, eu vou notar que ele não tem nenhum tipo. Ainda tenho o módulo de erro. Produto não exportou membro, então precisamos exportá-lo de alguma forma. Então, voltando para a biblioteca, novamente, vamos ver que temos aqui index.js. Então eu preciso exportar de serviços que estão localizados dentro da biblioteca. Então eu vou aqui serviço e, em seguida, eu vou dizer serviço categoria. E também precisamos exportar o modelo que criamos. Então, porque vamos usá-lo lá. Então eu digo também viver e, em seguida, modelos e, em seguida, categoria. Então agora tudo é exportado. Veremos que não temos mais esse erro. Então, aqui vou ver que o serviço de categoria, Eu posso usá-lo agora. Então eu não preciso mais desses dados codificados porque nós vamos preencher este array do back-end. Mas podemos dizer que essas categorias tem uma categoria de tipo que vem desses produtos biblioteca também. Nós importamos. Então, e aqui ele será matriz, e então ele será matriz vazia no início. E depois que este componente foi inicializado, vamos sentir esta matriz. Então, como podemos fazer isso? Eu digo que este ponto recebendo bom serviço, use o método getCategories. E então se você se lembrar que nós temos um observável e eu lhe disse que o front-end está esperando por qualquer ação vem deste observável, então de qualquer movimento de qualquer mudança de dados. Então, primeiro, eu preciso dizer que eu quero me inscrever e observar esses dados. Então, quando eles são alguma mudança, em seguida, pegá-lo e vamos usar dados. Então eu quero usar ou assinar este observável que é retornado de GetCategories. Porque você se lembra que ele está voltando para mim observável que tipo de categoria. Então aqui temos na assinatura e, em seguida, especificamos no callback e em seu callback vamos obter a resposta dos dados. Então, para mim, vou chamá-los de gatos, por exemplo, categorias. E então o retorno de chamada será um método. E neste método eu digo essas categorias de pontos, a variável que eu defini aqui serão gatos. E então eu salvo. Vemos aqui que no compilador não temos nenhum problema. Mas aqui eu acho que temos problemas. Vamos abrir o console e verificar. Vemos que temos um erro detectado dependência circular e a seta do injetor nulo. Isso vem porque o módulo do aplicativo não importou o módulo HTTP. Então, toda vez que eu quiser usar uma biblioteca, como vimos anteriormente, que precisamos importar esse módulo. Usamos no serviço de categoria, o cliente HTTP. Então, precisamos também anexar o módulo. Você tem a opção de usar esse módulo dentro do módulo do produto, ou você usá-lo no próprio módulo do aplicativo. Eu prefiro usá-lo no módulo de aplicação porque nós estamos indo para importar biblioteca múltipla. Então, se formos importantes em todas as bibliotecas, então ele será duplicado. Teremos como módulo HDTP importado muitas vezes. Então, para fazer isso, vamos para o módulo do aplicativo. Então aqui dizemos nas importações de módulos, dizemos que me dão módulo cliente HTTP. E isso será importado automaticamente porque você está usando o plugin e nós tê-lo aqui. Eu também gosto de organizar o código um pouco. Então eu tenho as importações, as importações básicas aqui, e então os componentes, e então os componentes UX ou módulos lyse, tudo está funcionando bem. Eu vou novamente categorias protegidas e eu vou ver as cabeças mydata jogos com sucesso. Às vezes, talvez você tenha erro do que não há nenhum provedor. Serviço de quatro categorias. Por isso, é melhor também no módulo de aplicação, digamos que eu quero fornecer este serviço para ser usado nesta aplicação. Então, porque estamos usando este serviço dentro do componente que está localizado dentro da aplicação. Então eu tenho que importá-lo também. Assim, podemos importar este serviço. Podemos dizer diretamente que os provedores fornecem para mim categorias de serviço. E este serviço categoria seria fornecido aqui. E nós economizamos e garantimos que tudo vai funcionar bem. Então, como você vê aqui, nós temos os dados que vêm do backend, exatamente como nós temos no Carteiro. Como uma recapitulação rápida, como você se lembra, importamos o serviço, importamos o modelo e, em seguida, usamos essas categorias. Nós removemos o código embutido e, em seguida, usá-los nesta tabela. E esta tabela está renderizando os dados com base no que vem do backend. E como você vê aqui, temos nos dados ou nas solicitações de rede HTTP, temos nossa solicitação, que vem com as categorias que estão localizadas aqui. Vemos exatamente os mesmos dados que vêm do backend. 96. Adicione categorias com formulários PrimeNG: Ok, agora temos nossa mesa pronta ou dados vindo do back-end. Vamos adicionar categorias. Como você se lembra, nós desativamos anteriormente a autenticação para o back-end. Então agora podemos adicionar categorias sem ter sido autenticado. Vamos ativar isso novamente quando tivermos o login e os usuários. Por enquanto, vou adicionar uma nova categoria, como vamos fazer isso. Então, normalmente o comportamento do usuário irá para um novo e, em seguida, eu vou adicionar outro componente. E eu vou ver outro componente aqui para adicionar o nome da categoria e o ícone. E então eu pressiono Salvar. Eu mostro notificação ao usuário de que a categoria gut adicionou com sucesso. E precisamos voltar novamente para a tabela e ver nossa categoria adicionada ao banco de dados e fazer esta tabela. Então eu disse que estamos indo para uma nova página quando eu clicar em Novo, então eu preciso de um novo componente. Então vamos gerar este componente. Preciso gerar um novo componente que estará no aplicativo de administração sob categorias. Então, primeiro vamos para o componente gerar NX, e então este componente estará sob Getty e o nome do componente será a forma da categoria. E, em seguida, o projeto será admin. E novamente, nós fazemos as outras coisas que fizemos anteriormente, styling e ignorar testes. E então estamos tendo certeza de que tudo está bem, então é adicionado a este caminho. Certo, perfeito. Clique em Executar e, em seguida, vemos que o formulário categorias foi criado. Então, aqui o componente está pronto, só precisamos adicionar também a navegação para 84 categorias menos você se lembra que criamos o link do roteador e este link do roteador, Vou dar-lhe, por exemplo, formulário. E, em seguida, no módulo, precisamos adicionar um novo caminho. E este caminho terá a mesma estrutura e damos-lhe antiguidades forma barra. E aqui vamos chamar o componente de formulário categorias que salvamos. Vamos voltar aqui. Nós clicamos em você. Vemos que estamos navegando para o módulo de formulário ou componente de formulário. Então agora vamos ter a estrutura aqui. Vamos ter o formulário aqui. Então eu gostaria de ter o mesmo que sua estrutura como nós temos este cartão e também título legenda, e então o conteúdo com controles vem aqui. Então vamos copiar o mesmo que fizemos na lista de categorias. Então copiamos tudo e colamos aqui. Nós removemos essa tabela que já tínhamos, então não precisamos mais dela neste componente e então estamos prontos para isso. Então aqui não precisamos mais e novo, precisamos também torná-lo como AD. Então, por exemplo, crie. Então salvamos, vamos para Novo, vemos que temos um criar. Então vamos mudar o texto aqui. Por exemplo, podemos dizer Adicionar categoria. E aqui também, podemos dizer aqui. Então temos agora o título e o subtítulo foram criados. E também precisamos, por exemplo, usuário é usado para ter os controles aqui. Por exemplo, criar e um conselho. Então vamos criar outro botão perto dele. E também podemos mudar isso para ver laticínios Khan e também esses dois primários. E aqui temos criar e isso chamamos não criar, mas cancelar. E depois disso temos tudo criado. Mas como vemos aqui que temos como a arte colando uns nos outros, esses botões, isso porque precisamos fornecer alguma margem, certo? Mas então eu acho que no NG principal, você não precisa ter que criar uma classe Michelle cláusula e ir para o estilo e, em seguida, adicionar esta margem e não é primo NG fornecendo dentro da grade algo como classes prontas, que são chamados de espaçamentos. E esses espaçamento, como você vê aqui neste exemplo, você pode espaçar entre o componente entre folhas, entre colunas. Então você pode usá-lo da maneira que quiser. Então, como podemos usar isso? Ele disse aqui que precisamos ter um B primeiro b menos e a propriedade como margem, por exemplo, ou preenchimento. E então você pode dizer posição superior, direita, esquerda, por exemplo. E, em seguida, o valor, e o valor pode ser de 0 a seis, e depende do espaço. Então, podemos usar, por exemplo, para este botão. Podemos dizer que para mim, este botão, B menos margem, direita será quatro, por exemplo. Então, se eu for e verei esses espaços aqui. Então vamos torná-lo menor. Podemos fazer dois, e temos esta base aqui. Então eu preciso colocar esses botões à direita, para que não possamos fazer isso como vimos anteriormente. Só precisamos mudar isso para a direita. Mas não vemos nenhuma alteração porque isso, você também precisa para componente barra de ferramentas, você precisa especificar também a esquerda. Então, mesmo ele está vazio, então basta fazê-lo assim e você vai tê-lo à direita. Então, vamos também mudar o ícone para que não precisemos mais dele. Precisamos de um ícone como voltar ou sair. Então eu tenho o ícone já pronto. Então é chamado de flecha. Vá. À esquerda. Aqui nós salvamos e temos, o ícone já está aqui. Certo, agora vamos voltar à nossa forma. Então o que eu preciso fazer é limpar um pouco. Precisamos remover este link do roteador porque não estamos clicando em Criar. Então aqui quando clicamos em Criar, precisamos disso para salvar como um formulário no banco de dados. Então, primeiro precisamos criar o formulário. Vamos dar uma olhada. Duas extremidades primos. Nossa, como ele está usando o formulário para mim, eu preciso caixa de texto 14 para o nome da categoria e um para o ícone da categoria. Então, primeiro de tudo, vamos para o NG principal e verificamos como estamos usando a entrada. Por exemplo, você vê aqui muitos tipos de entrada que são entrada, a máscara de entrada do grupo, interruptor de entrada e também o texto de entrada. E como você vê aqui, nós temos este texto de entrada. Mas se eu quiser usar este aqui, eu preciso seguir a documentação. Então eu preciso importar também módulo de texto e, em seguida, eu posso usá-lo. Então vamos fazer isso. Importo o módulo de texto para os meus módulos. Se você se lembra, temos o módulo U xs aqui. Então eu importo-o aqui. Novamente, coloque aqui. Então temos módulo de texto de entrada pronto, para que eu possa usar seu componente. Então vamos começar o básico. Eu quero usar este aqui. Eu tenho aqui. E eu vou para o formulário, ou por exemplo, aqui eu crio um formulário. E esta forma, por exemplo, estará vazia. E dentro deste formulário, vou usar uma grade novamente. Então eu vou dar novamente uma grade div dot py porque eu quero colocá-los perto um do outro. Então eu tenho aqui div chamado, por exemplo, para e também para não perder aqui o p. E também outro para outro texto. Então aqui, 12, nós salvamos, voltamos para o aplicativo, vemos que eles estão próximos um do outro. Então vamos adicionar alguma margem aqui no espaço entre a barra de ferramentas e o próprio formulário. Então, como você se lembra, temos aqui a propriedade em, margem ou, por exemplo, ser margem inferior. Preciso especificar, por exemplo, cinco. Então vamos ver aqui que nos dá algum espaço, mas aqui precisamos de um rótulo. Então vamos adicionar também alguns rótulos, ou exemplo C no NG primo. Então temos aqui vários rótulos. Mas todo mundo está sofrendo como alinhar esses textos de entrada e, por exemplo, uma caixa de seleção ou como alinhamos esses ícones com os livros didáticos ou perto do botão, é sempre um sofrer com um formulário. Mas principal N G resolver este problema criando acordado, especialmente para a forma. É muito grande. Então, se você vai para o sistema de grade OU flex prime, há algo chamado layout de formulário. E no layout do formulário, você pode selecionar o layout que você quer reforma loucura. Então, como você vê aqui, isso é o que precisamos exatamente vertical e uma grade. Então podemos ir aqui e ver isso, o código deste formulário. Então vamos aqui novamente para baixo para vertical e desengordurado. Vemos que está usando uma classe chamada Floyd. E também está usando a grade de formulário e a grade. Então vamos copiar esta parte e colá-la em nossa aplicação. Então, dentro do formulário, eu tenho uma grade, eu removo aqui tudo e colado ir para o aplicativo. Novamente. Vou ver que muito agradável e guiado para. Então vamos renomear as coisas para que possamos fazer isso como um nome. E também aqui nome, o rótulo é nomeado como nome da categoria e tudo está bem. E, em seguida, ícone. E eu preciso aqui também ícone. E aqui eu clico em Salvar. Temos agora tudo está funcionando perfeitamente. Na próxima palestra, vamos ver, quando clicamos em Criar, vamos ler os dados do formulário e criar a categoria no banco de dados. 97. Adicione dados de formulários finda: Ok, Nesta palestra eu vou mostrar-lhe como vincular dados do nome, um ícone da categoria quando estamos clicando em Criar. Então, em primeiro lugar, não vamos adicionar nada ao banco de dados. Só precisamos ligar os dados. Então eu preciso, por exemplo, quando eu clicar em Criar, você verá aqui no console os dados que eu coloquei aqui. Então, para isso, precisamos usar forma reativa e também precisamos usar para módulo. Então, para fazer isso, Vamos começar passo a passo. Primeiro de tudo, vou para o formulário Categorias. Eu tenho tudo aqui. Então eu preciso criar uma forma, forma interativa, que possa interagir com Angular. Eu posso ler os dados quando eu enviar o formulário ou quando eu clicar em qualquer botão. Até agora que em Angular temos algo chamado formar um grupo. Então, cada formulário tem uma forma de um grupo. E este grupo de formulários contém todos os controles como este nome e ícone. Então, para isso, precisamos definir que nossa forma é um grupo de formulários. Então não podemos ter especificando esta entrada ou propriedade. E dizemos que vamos usar esta forma valiosa no meu edifício, esta forma. Então, vemos que temos erro não pode vincular grupo de formulário uma vez que não é conhecida propriedade do formulário. Por quê? Porque precisamos importar para módulo. Então precisamos importar duas coisas. Em primeiro lugar, o módulo do fórum, que vem de Angular. E também há algo chamado módulo de formas reativas. Então aqui temos dois componentes ou dois módulos que precisamos importar para o nosso módulo de aplicativo. Depois veremos que esta directiva funcionará principalmente. Então, salvamos módulo de aplicativo e precisamos saber como construir este formulário. Então, nesse arquivo TypeScript ou o arquivo de código deste componente, eu vou aqui e eu preciso definir forma valiosa. Então, como você sabe, em Angular, tudo definido aqui, depois que eu definir uma propriedade ou diretiva ou a entrada, eu preciso ter uma variável. Esta variável está disponível ou deve estar disponível no arquivo TypeScript. Então podemos fazer isso e dizer que a forma para mim é um tipo de grupo de formulários. E este grupo de formulários, como você vê, é importante automaticamente a partir de formas angulares para construir uma forma reativa em Angular, precisamos usar um serviço, este serviço chamado construtor de formulários. E para chamar este serviço ou qualquer serviço, usamos construtor de formulários privados. Nós damos um nome e eu importar este, construtor de formulário e também vem de biblioteca Angular de formulários. Então, como você vê aqui, nós temos agora o construtor de formulários. E na inicialização deste componente, eu preciso definir quais são os membros do grupo deste componente, toda essa forma. Então eu preciso construir o formulário de alguma forma. Então eu digo que esta forma de ponto é igual a isso. O construtor de formulários de serviço. Dê-me um grupo antigo ou um grupo. E este grupo conterá de vários membros, que são controles. E os controles que vimos no arquivo HTML. Eles são o nome e o ícone, e eles são controlados aqui. Por isso, temos de os definir também aqui. Direi o porquê mais tarde porque precisamos usar o validador para isso. Então angular irá interagir com este formulário para detectar todos os erros que o usuário pode portar. Então eu vou aqui e digo esse nome. Então eu preciso especificar exatamente como as entradas que eu tenho para esta fonte. Então eu tenho aqui nome, como nome dessa categoria, e será array. E este array, por exemplo, agora o valor padrão dele está vazio e, em seguida, eu definir o ícone e o ícone também. Está vazio na inicialização desta fonte. E também, precisamos de alguma propriedade que é chamada de cor. Vou mostrar-lhe mais tarde como usar o seletor de cores para pegar uma cor e implementado e inserido no banco de dados. Porque, como você se lembra, nossa categoria também tem uma cor. Mas agora estou apenas começando o mais simples possível. Então deixamos apenas nome e ícone. Então agora este formulário, esperando que ele tem nome e ícone dentro. E isso pode estar no modelo HTML. Mas como podemos dizer, ok, você, esse controle, você está relacionado a este grupo de formulários. Podemos especificar que por uma propriedade que é chamado de nome de controle de formulário. E este nome de controle de formulário terá o mesmo nome que eu especifiquei no grupo de formulários. Então aqui eu devo ter também o nome. Então aqui eu digo que, que esta entrada e este campo é exatamente seguir o nome da categoria. A mesma coisa que eu faço também para o ícone. Então eu especificar aqui novamente ícone. Então, desta forma, eu conectei o formulário. Com forma reativa, que está aqui. Certo, por que estamos fazendo tudo isso? Agora vamos ver como vincular os dados e ler a partir das entradas. Agora que todos os nossos botões criar, que é vem agora. Então precisamos vincular alguma função a este botão. Quando eu clicar nele. Como fazemos isso é muito simples. Eu vou para o modelo HTML, eu vou para o botão, e então eu digo que um clique. E então eu digo em Enviar, por exemplo, este qualquer método que você pode definir, qualquer método que você quiser para este botão e nós não podemos testar este método. Então eu vou aqui e faço o arquivo TypeScript que defini fora de energia nele. Eu defino um método que é chamado onsubmit. Vamos registrar algo como, por exemplo, algo como eu sou o botão. Então, aqui temos o botão que é clicado e ele vai console log para mim no console eu sou botão. Quando eu clicar sobre ele, precisamos sólido para salvar também o modelo. Então, quando eu clicar nele, eu tenho, eu sou o botão. Certo, vamos ligar os dados agora. Então precisamos ter uma maneira de ler os dados que eu insero aqui. E então eu os coloquei no console. Como podemos fazer isso? Primeiro, precisamos ir para o TA é arquivado e método onsubmit, steve de íon na parte inferior eu digo esta forma ponto, que nós construímos já, pontos controles. E então eu especificar o campo, por exemplo, nome. E então eu digo “valor”. Então eu preciso ter o valor deste campo. A mesma coisa que eu faço também para o ícone. Então eu vou aqui, salvo, e então eu crio, e eu vejo que eu tenho vazio porque eu não especifiquei nada. Eu especifico aqui. E eu vou ver se eu tenho os dados. Então eu vou dizer categoria é saúde. E também o ícone é, por exemplo, a saúde do ícone. Então, quando eu salvar ou clicar, eu vou ver que eu tenho os dados. Então agora precisamos ler esses dados e colocá-los no banco de dados. Mas primeiro, vamos fazer alguma validação. Por exemplo, como você viu aqui, que quando eu coloquei valor vazio, eu vejo que eu não recebi nenhum erro e os dados são enviados. Então eu preciso mostrar ao usuário que você não pode enviar, por exemplo, nome Mt e ícone vazio. Então vamos fazer isso. É muito simples que quando estamos criando o grupo de formulários ou o construtor de formulários, precisamos especificar que este campo é obrigatório. E como fazemos isso. Fazemos de uma forma que chamamos uma biblioteca chamada validadores. E este validadores tem uma propriedade que é chamado obrigatório. E também tem outra propriedade como comprimento máximo ou máximo ou e-mail, etc Por enquanto, o que eu preciso é apenas um necessário. Portanto, este campo será obrigatório. Então não posso enviar o formulário apenas quando estiver cheio. Então, quando apenas quando o usuário colocar dados dentro desta caixa de texto, Ok, agora se eu clicar, Eu vejo que eu ainda ser capaz de enviar. Por exemplo, vamos fazê-lo de uma forma que, se o formulário não for válido, então não registre nada no console. Mas quando é válido, em seguida, log console para mim o nome e o ícone. Então, como podemos fazer isso, É muito simples. Eu digo se este formulário de ponto é válido ou inválido, então não faça nada quando você clicar no botão. Então, apenas volte. Caso contrário, faça o log do console e faça o nome e o ícone. Porque se você sabe que quando eu clicar em retornar ou quando eu escrevi aqui, tudo depois não será executado. Então aqui eu salvo. E então vejo que não tenho linhas vazias. Mas quando coloco dados, vemos que temos os dados. Então, a partir daqui, garantimos que o formulário é realmente válido ou não. Mas e sobre a exibição de uma mensagem para o usuário? Como aqui, por exemplo, dizemos que seu nome é exigido quando ele envia dados vazios. Então não podemos fazer isso muito fácil. Nós apenas ir para o modelo e após a entrada, não podemos ter outro elemento que é chamado pequeno. E este pequeno tem vidro, que é chamado de ser inválido. E esta classe vem com Prime NG. E dentro disso, podemos definir qual será o método para o usuário. Por exemplo, o nome é obrigatório. Eu salvo. E veremos que isso é sempre exibido. E o que é um problema para mim. Eu preciso apenas quando não há nada neste campo, eu quero exibir esta mensagem. Mas primeiro vemos que não está lá no, porque eu acho que a classe está errada. Podemos mudar para erro. E veremos que está falando. Sim. Então agora temos uma leitura. Com base na classe de erro, P, classe de erro. Então aqui temos que especificar quando ele será mostrado. Então, como você sabe em Angular, há energia se assim for em ng-se eu disser quando o ponto forma controla o nome do ponto é inválido, em seguida, exibir esta mensagem. ponto do formulário controla o nome do ponto, ponto inválido. Em seguida, exiba esta mensagem. Então agora nós temos isso inválido, mas quando eu coloco texto, eu vejo que ele desapareceu. Então agora, como você vê aqui, mostrando e escondendo coisas. Mas a questão aqui que quando eu vou para Categoria eu ir sabia que eu vejo diretamente que o nome é necessário. Não quero surpreender o usuário diretamente com erros. Eu só quero mostrar-lhe o erro quando ele clica em Criar e ele tem campo vazio. Então, como podemos escondê-lo primeiro. Então precisamos verificar se o usuário clicou no botão ou saber como podemos fazer isso é muito simples que eu vou para aqui para o arquivo ts e eu digo que é enviado é uma variável onde eu posso definir sempre colocar suas variáveis, sempre na parte superior antes do construtor, em seguida, o construtor e, em seguida, a inicialização. E eu vou falar sobre também os métodos privados. Então aqui é enviado tipo Boolean, e ele tem um valor padrão que é falso. Então, no início, o fórum ainda não foi submetido. Aqui eu tenho um erro de digitação ou ter enviado. E então agora podemos ir para o botão em enviar e IC primeiro, este ponto é enviado é verdadeiro. Então aqui temos o submetido é verdadeiro. Então eu posso dizer agora que quando este erro é ng-if inválido e o formulário é enviado, então me mostre o erro, mas não envie nada, então não mostre. Então aqui no início, não temos nada. Não temos nenhuma flecha. Mas quando eu tenho isso, ok, eu não tenho nenhum erro. Eu posso me submeter. Mas quando o esvazio, vejo-o novamente. Vamos voltar outra vez. Duas categorias voltarão a ouvi-lo de console. Então aqui nós dizemos que quando eu enviar, eu recebo esse erro. O nome é obrigatório. Então devo sentir alguns dados aqui. Então, desta forma, eu mostro que isso é exigido estrangeiro. Vamos fazer uma refatoração rápida. Então, primeiro de tudo, eu não quero ter no meu modelo HTML nome muito longo. Então eu posso fazer isso e eu posso fazer este tipo aqui em uma variável. Então é muito fácil. Você pode usar conjunto e obter. Então, como podemos fazer isso, podemos definir, por exemplo, obter formulário categoria será um método e ele vai retornar para mim este ponto forma pontos controles. Então, quando eu quero acessar os contornos desta forma, eu apenas digo este nome de ponto ou esta forma de categoria, ícone, etc Assim, desta forma eu posso acessar e substituir também este. Então eu posso dizer aqui, não controles de formulário, mas categoria 4. Então eu guardo, teste tudo. Temos tudo funcionando bem. Então agora precisamos também colocá-lo para o ícone que eu vou aqui. Também temos que copiar o mesmo. Eu digo que esse ícone é obrigatório. E aqui em vez de nome, eu digo o ícone. Então agora temos o ícone e os campos de nome são obrigatórios e somos capazes de vincular os dados e vê-los no log do console. Na próxima palestra, vou mostrar-lhe como enviar esses dados para o banco de dados para que não possamos vê-los também em nossa tabela de categorias. O que nós adicionamos aqui. 98. Adicione categorias de formulário para o Backend: Agora vamos enviar os dados para o back-end. Então eu tenho aqui um nome e ícone, e eu vou criar categoria no back-end. Então, como podemos fazer isso? Em primeiro lugar, temos tudo coletado. Então nós temos aqui os dados, nós coletamos, o objeto, nós coletamos o nome e o ícone. Então agora precisamos ter um serviço também. Se você se lembra, nós tínhamos um serviço para obter as categorias. Agora precisamos do serviço para adicionar as categorias. Então, o que precisamos é importar serviço de categoria e adicionar as categorias adicionar método de categoria. Então, primeiro vamos importá-lo serviço de categoria privada. E então eu digo categorias de serviço. Por isso, será importante automaticamente, como vemos aqui a partir dos produtos. E precisamos ir lá e também definir nosso método. Então, aqui, de alguma forma, direi que, se for inválido, retorne, caso contrário, use o serviço e encontre adicionar categorias. Mas agora não definimos ainda. Vamos fazer isso. Para entrar rapidamente, dentro desses arquivos é que é tão fácil você só tem que pressionar Control e p. E então ele abrirá para você todos os arquivos. Você pode servi-los pelo nome e, em seguida, você pode dizer categorias, serviço e, em seguida, você vai saltar para o arquivo diretamente. Então isso é como Ele vai lhe dar mais produtividade. Não procure o arquivo na lista dos arquivos. Então eu quero que você crie a glória e eles criem categoria. Precisamos também de enviar os dados. Então precisamos enviar os dados da categoria. Então eu tenho que dizer categoria tem uma categoria de tipo. Então eu quero enviar categoria própria para o backend por este método. E este método irá retornar este através da solicitação HTTP ponto post, porque estamos postando dados. E esses dados terão primeiro a URL. Como você sabe anteriormente, temos esse URL aqui. Então temos o mesmo URL para postar o outro como vimos no back-end. E também precisamos especificar os dados. Então os dados, eu os peguei daqui, eu digo, coloque Siga-me essa categoria, é isso. Então agora temos criar categoria. Volto para o formulário e, em seguida, eu vou ver que no produto ou categoria serviços que criamos categoria que eu preciso para passar nossos dados. Então precisamos primeiro criar uma constante, chamá-la de categoria. Esta categoria tem uma categoria de tipo, e esta categoria terá o nome da propriedade de onde vem, a partir do formulário da categoria, nome do ponto, valor do ponto, como vimos anteriormente. E console registrá-los e ícone. Então esta categoria forma o ícone, esse valor. Então, desta forma, eu criei um objeto. Aqui. Não é ponto e vírgula, mas é vírgula porque eu estou criando um objeto e então eu vou enviar essa categoria para este serviço. Então vamos tentar isso. Agora. Eu vou para Criar. Eu adiciono, por exemplo, saúde e vi para o ícone, clique em Criar. E eu vejo que nada aconteceu porque também se eu for para a rede, eu vejo que o front-end não está enviando qualquer pedido. É por isso que eu disse que precisamos assinar tudo que observável do servidor de dados está me enviando de volta. Como você se lembra ao ouvi-lo, que este bem está voltando para mim observável. A mesma coisa, chefe também está retornando observável. E como vimos anteriormente no back-end, que o back-end está me enviando, por exemplo, quando eu crio uma categoria, está enviando para mim que a categoria é adicionada com sucesso. Então, para isso, precisamos apenas assinar esses dados para que eu não possa usar o serviço como ele está aqui. Então eu só preciso dizer para assinar. Então, quando nos inscrevemos e desta forma significa que realmente me dar uma execução de dados. Então aqui eu tenho saúde e, em seguida, saúde P. E eu estou observando aqui a rede. Quando clico em Criar, vejo que a categoria é criada e adicionada. E quando eu ir para sua lista de categorias, eu vou ver que ele é adicionado aqui. Então lembre-se que você sempre precisa se inscrever, porque se você não se inscrever, é como se você chamar o método, mas você não fez nada. Portanto, esta solicitação HTTP gabinetes não será executada somente quando você se inscrever para ele. Ok, eu notei quando eu adicionei isso, Eu não mostrei para o usuário, ok, Isso é adicionado com sucesso, ou ele recebeu erro ou algo assim. Precisamos interagir com o usuário de alguma forma. Eu preciso adicionar, por exemplo, uma notificação diz que, ok, A categoria é adicionado com sucesso e voltar automaticamente. Duas categorias, tabela em prime end você, há um módulo chamado brinde. E este brinde, você sempre pode exibir notificações para o usuário, algo assim. Assim, você sempre pode mostrar alguma notificação para o usuário e eles desaparecem automaticamente após algum tempo. Por isso, temos de implementar isso. Então primeiro precisamos importar o módulo. Como sempre estamos fazendo. Então aqui precisamos do módulo. Eu vou para o UX dos módulos. Um deles aqui, como dissemos anteriormente, Vamos colocar os módulos principais primeiro no topo. Então, para não ter quaisquer problemas. E, em seguida, temos também os módulos UX são agrupados. Então aqui temos um módulo de brinde. Ok, legal. Tudo é importado. Nenhum problema se você receber esse erro de alguma forma que você precisa reiniciar o front-end. Então, quando você receber esse erro, você só precisa reiniciar a frente e novamente, e ele desaparecerá. E para usar esta notificação, você só tem que chamar P brinde. Então, quando vamos aqui e copiamos esta tag HTML e vamos para o formulário adicionado ao topo antes do formulário, eu digo Pete perdeu. Então eu guardo aqui, e então precisamos fazer este brinde. Então, como dissemos, quando eu clicar em Criar e tudo bem sucedido, então eu vou disparar esta notificação do brinde. Então, como fazemos isso? Se continuarmos na documentação, precisamos chamar um serviço que é chamado Serviço de Mensagem. E esses servidores de mensagens terão ADD. E então você especificaria sua cor, que é sucesso, e a mensagem de serviço de resumo e o detalhe da mensagem. Então, vamos importar o serviço. Vou ao serviço de mensagens privadas. Eu também vou aqui para o formulário. E também temos aqui muitos métodos privados. Então aqui temos também o serviço de mensagens. Então você só precisa importá-lo da API prime end. Depois disso, tudo está funcionando bem. Então eu preciso saber depois que sua categoria é adicionado em impostos para eu quero exibir uma mensagem de sucesso. E quando há algum erro aconteceu, então eu era uma mensagem falhada. Então, como você se lembra, dissemos que criar categoria será observável e ele vai retornar para mim alguns dados. Então, como você vê aqui, que este serviço gabar-se está retornando observável com os dados. Então o que esses dados, seria a própria categoria, como criamos no back-end. Então, a nova categoria. Então aqui eu vou ter um post observável. Então aqui eu vou ter um tipo de retorno é observável, mas não observável matriz, será uma categoria única categoria, não matriz. Então, voltando para o próprio componente do formulário, vejo que se eu receber uma resposta, então eu exibo uma mensagem de sucesso. E se eu não vir qualquer resposta ou eu receber erro na parte de trás e, em seguida, eu exibir uma mensagem de erro. Então, como podemos fazer isso, a resposta, eu entendo. E então eu vou dizer aqui que exibir esta gravidade do serviço de mensagem. E então eu vou dizer sucesso e o resumo da mensagem e os detalhes dela. Então aqui eu vou dizer que eu tenho primeiro a mensagem de sucesso e o tipo é Exemplo, sucesso ou o resumo é sucesso. E que eu posso dizer categoria ou como mensagem para as pessoas ou para o usuário, categoria é criada. E também temos, quando recebemos erro, então temos que exibir uma mensagem de erro. Então, como podemos fazer isso após este colchete, temos uma vírgula e dizemos que erro, e este erro será uma função. Ele retornará para mim a mensagem de erro que eu vejo em meus dados. Então farei o mesmo aqui. Eu vou pegar este. Eu vou dizer this.me dot add cyber t é erro. E então eu vou exibir, por exemplo, nossa categoria não foi criada. Mas primeiro temos de acrescentar algo que é muito importante. Esse é o modelo, o modelo do próprio host. Então temos aqui o modelo HTML. Nós estamos indo para olhar normalmente adicioná-los ao topo do modelo. Então salvamos, voltamos ao nosso aplicativo e vamos para Novo. Ainda estamos recebendo um erro. Este é um erro do injetor porque estamos usando o serviço de mensagens e ele não é fornecido no meu módulo de aplicativo. Então primeiro vamos para o módulo de aplicativo novamente. E nos provedores, como conversamos anteriormente, precisamos adicionar o serviço de mensagens aqui. E então temos que importá-lo. E nós salvamos, e vemos que temos, tudo está funcionando bem. Então agora vamos adicionar alguma categoria e vemos se recebemos a mensagem do sistema ou não, que é chamada, por exemplo, computadores. E então o ícone será, por exemplo, podemos selecionar qualquer ícone, PCI, PCI, por exemplo. Não sei se existe, mas não podemos ver isso mais tarde. Então, como vemos aqui que temos outro erro. Isso porque não incluímos módulo de animação do navegador. Se você se lembra, na loja NGI adicionamos este módulo, mas aqui não adicionamos. Então vamos adicioná-lo novamente ao nosso módulo. Então, se você se lembra, temos aqui um módulo de navegador. Então precisamos importar o, também o módulo de animação do navegador. E isso será importante. Aqui. Dizemos módulo de navegador, módulo animação de Angular e, em seguida, navegador de plataforma. E depois do navegador da plataforma, dizemos animações. Então aqui nós importamos o módulo de animação. Então vamos criar novamente essa categoria. Temos que dizer computador e podemos dizer PCI, PCI, por exemplo. E nós criamos, e vemos que a categoria é criada. E vamos verificar a nossa mesa. Vemos que ele é realmente criado e isso criado aqui porque ele é criado e então nós não recebemos a mensagem. Então é por isso que foi criado aqui duas vezes. Então vamos cometer um erro para ver se o erro está realmente funcionando. Então eu vou ao serviço deles, que nós criamos. Vamos cometer um erro no ABI, por exemplo, podemos dizer com alguma carta como esta. Então, quando adicionamos uma categoria, vamos novamente para novo. Eu diria novamente computador. E dizemos PI BC eu criar, e então eu recebo categoria de erro não é criado porque a volta e responder a 4.4 não encontrado. Então vamos colocá-lo de volta e tudo está funcionando bem. E nós temos a categoria criada. Vamos lutar com o exemplo. Coloque o usuário de volta para a tabela de categorias automaticamente depois que criamos a categoria com sucesso. Então, como podemos fazer isso? Eu vou novamente para o componente de formulário categorias. Depois do sucesso, eu exibo a mensagem. Eu vou definir um temporizador e este tempo limite depois que ele é feito, em seguida, voltar para as categorias. Então primeiro precisamos ter um timeout, timeout ou você pode usá-lo a partir da nota, nossos x js. E você pode, dentro deste dímero especificar quantos milissegundos você deseja executá-lo. E então eu digo para prometer. Então diplomas, como depois que foi executado, depois de dois segundos, então o que você quer fazer, digamos, por exemplo, feito. Então, para voltar às categorias, precisamos usar outro serviço que é chamado de localização. E este local é um serviço. Você pode importá-lo facilmente. Então aqui temos também outro serviço. Podemos chamá-lo como este privado e chamamos-lhe localização. E este local é tipo fora de local, esse local de Angular comum. Certo, como vemos aqui, temos módulos de nó, angulares comuns. Então nós importamos e vemos que é realmente de Angular comum. Então, aqui usamos também esses métodos ou este serviço. Nós dizemos este ponto de localização e então eu balanço de volta. Então eu só quero voltar onde eu estava antes. Nós salvamos tudo como um estilo. Novamente. Nós adicionamos, por exemplo, outro com digamos, por exemplo, eu quero adicionar eletrônicos. E então o ícone será PI eletrônico. Este é um ícones são apenas aleatórios, precisamos corrigi-los mais tarde. Então eu pressiono Criar. E depois de dois segundos, voltamos automaticamente. Então, como vemos aqui, que tudo está funcionando bem. Temos que esses dois, temos as mensagens e também criamos categorias. Na próxima palestra, vamos ver como excluir uma categoria e como editar a categoria. 99. Elimine uma categoria com diálogo de confirmação: Ok, Nesta palestra, vou mostrar-lhe como excluir uma categoria e diálogo de confirmação para o usuário quando ele queria excluir uma categoria. Em primeiro lugar, vamos voltar à nossa tabela de categorias. Precisamos adicionar aqui alguns botões de ação para cada categoria, como um botão para excluir e botton para edição. Então voltamos para a nossa tabela de lista de categorias. E se você se lembrar, temos aqui o cabeçalho da tabela e os campos. Então eu preciso aqui primeiro para ter outro cabeçalho ou outra coluna no cabeçalho. Vamos mantê-lo vazio. E aqui eu quero adicionar dois botões, um para editar e outro para excluir. Então, em vez deste ícone de categoria, nós removemos e adicionamos aqui dois botões. primeiro é um botão que eu copiei do topo. Terá uma estrada ou perigo. Podemos chamá-lo como depender o que a classe que vamos usar rótulo. Não precisamos de um rótulo. Podemos simplesmente excluí-lo porque precisamos apenas ícone para este botão eo nome do ícone, ele não ser mais ele será PI, tordo e este lixo. Para mim, há um link de roteador de exclusão. Não queremos um link de roteador, mas precisaremos de um clique. Vamos acrescentar isso quando estivermos prontos para isso. Precisamos adicionar outro botão. E este botão será para edição. Então temos aqui outro botão, mas ele não terá um lixo, ele terá um ícone chamado lápis. E como você vê aqui, nós temos lápis PI e então nós salvamos. E veremos que nosso aplicativo foi atualizado. Mas aqui precisamos adicionar mais distância entre esses botões. Vou adicionar aqui uma aula. Vou dizer p menos margem, certo? Em seguida, para adicionar salvamos e ele terá este espaçamento. Então vamos verificar como podemos colorir os botões. Se você se lembra, se formos para NG prime, vamos novamente para os botões e o botão que temos uma cores diferentes. Então, essas cores são chamadas, por exemplo, de perigo. Se você quiser ver todo o código, basta ir para a fonte e você verá todas as cores aqui, todo o código que está escrito lá. Então vamos usar duas cores. Primeiro, podemos usar um perigo para remover ou excluir. E também podemos usar, por exemplo, succes com um verde, que é para edição. Então salvamos, voltamos para o aplicativo, mentiras, temos tudo está bem aqui. Então vamos ter um evento de clique neste botão. Então, primeiro de tudo, podemos adicionar método aqui, que é chamado onclick ou clique. Então aqui temos, por exemplo, Excluir categoria. E eu quero passar também o ID da categoria que eu quero excluir, então eu posso dizer ID do ponto da categoria. Dessa forma, garanto que estou excluindo o ID correto. Este método será declarado no arquivo TypeScript. Eu vou para a lista de arquivos TypeScript de categorias, e eu adiciono um novo método após ONGs nele. Eu chamo esse método de categoria DDD, e ele tem ID de categoria como um parâmetro, que é uma string. Então, para isso, precisamos usar o serviço de contiguidade categoria irá excluir para mim uma categoria através do back-end. Então, para isso, precisamos criar o serviço que está excluindo para mim uma categoria. Então vamos ao nosso serviço. Eu disse serviço de categoria. E eu adicionei aqui na categoria principal, que é aceitar ID de categoria como uma string. E está retornando observável talvez da categoria principal ou talvez por exemplo, apenas algum objeto sem especificar nada. E também a solicitação HTTP será excluída. Então aqui nós também retornou objeto porque se você se lembrar no back-end, Eu estou passando o ID para o URL e, em seguida, ele será excluído. Então, como você vê aqui, nós temos aqui os backticks e também o URL. E então eu usei o ID da categoria, que é passado por este método. Nós economizamos de volta ao nosso componente. Nós usaríamos o serviço de categoria. Então dizemos isso, porém, categoria serviço Dot Excluir categoria. E então eu passo ID de categoria, que eu obtive do modelo HTML. Mas, como você sabe, essa exclusão não será executada. Então eu vou aqui, eu digo para assinar, e então eu fui para a resposta. E essa resposta, eu posso exibir uma mensagem de sucesso ou uma mensagem falhada. Então, para isso, precisamos ter o serviço de mensagens que tínhamos anteriormente, e também a mensagem do brinde. Então nós temos aqui o brinde, nós copiamos do formulário. E também adicionamos aqui ao topo da lista na lista de componentes. Então aqui temos este e vamos chamar novamente o serviço de mensagens. Então, qual é esse? Vamos copiá-lo novamente para o nosso componente ou lista de categorias componente, e nós chamá-lo, e nós dizemos exatamente as mesmas mensagens que queríamos exibir para o usuário. Então eu quero quando há algum sucesso ISA que sucesso e categoria foi excluído. Então eu digo aqui mensagens ou serviço de mensagem succes categoria é excluído. E também quando há um erro, quero mostrar ao usuário que há um problema. Não podemos excluir a categoria. Então, o mesmo que aqui, os colchetes depois, antes de terminar a assinatura, eu adiciono o erro ISA, a categoria não é excluída. Então nós salvamos, temos tudo está funcionando bem agora. E quando eu tento excluir, por exemplo, vamos excluir o que está duplamente localizado. E então vemos que a categoria é excluída. Mas não é excluído da lista apenas quando eu vou para outra página, por exemplo, para o painel e voltar para a categoria, então eu vou ver que categorias é realmente necessário. Então, quando eu quero excluir algo, eu quero atualizar esta tabela. Então é muito simples. Chamamos o serviço de novo. Assim, em succes da exclusão, podemos dizer também novamente chamado para mim isso. Então vamos colocar o serviço de categoria de obter categorias novamente em um método. Chamamos esse método, por exemplo, privado porque ele está apenas dentro deste arquivo ts, ele não é usado em nenhum outro lugar. Então podemos dizer Get categorias. É um método. Dentro deste método, estou chamando este serviço. Então, primeiro eu chamo o método em ONG em Editar chamando este ponto getCategories. E também estou indo atrás de uma mensagem de sucesso ou resposta bem-sucedida. Quero ter essas boas categorias novamente. Então salvamos, vamos novamente para o front-end, tentamos apagar algo. Legal. Temos atualização que eles vão, e temos os novos dados como Excluir novamente. Bom, é excluído e temos dados atualizados. Mas para mim como uma experiência de usuário, tenho medo de que quando eu clicar por engano sobre isso e ele é excluído. Então eu quero mostrar uma caixa de diálogo de confirmação para o usuário. Então, quando ele queria apagar algo, então ele recebe confirmação. Se ele realmente confirmar a exclusão ou não. Prime N G também tem um componente chamado diálogo confirmado. E quando você vai confirmar a caixa de diálogo e experimentá-lo, por exemplo, este, há uma mensagem de confirmação com algum ícone e algum texto. Sim e não. Isso é exatamente o que precisamos para a reunião e confirmação para a nossa exclusão da categoria. Então, como podemos usar este componente, podemos ir primeiro para a documentação e veremos que temos que importar dois módulos, ou um módulo e um serviço. Assim, o primeiro módulo é confirmado módulo de diálogo. Podemos copiar este e ir para o módulo aplicativo onde estamos importando o módulo ou o módulo UX. E então adicionamos aos nossos módulos UX. E precisamos também de importar um serviço de confirmação. E este serviço, vamos usá-lo em nossas categorias, menos componente. Mas primeiro, precisamos usar também alguns HTML. Então eu também preciso copiar este código. Vou dizer que temos aqui confirmação e ícone e também um diálogo confirmado. Ou é melhor também usar o exemplo exatamente que está aqui, porque ele tem mais propriedades, porque como você sabe, cada componente tem muitas propriedades. Então, quando você encontrar a propriedade que você quer ou o exemplo que você quer, basta usá-lo da mesma forma. Então, quando você quiser ver o exemplo disso, confirme, basta ir para a fonte e você verá aqui o exemplo exato. Então, como vemos aqui, que no básico, ele usou esta tag HTML p confirmar diálogo, e ele deu-lhe algum estilo e também baias Z, índice e algum estilo para o botão. Então podemos copiar este. Vá para a lista Categorias, e nós colocá-lo, por exemplo aqui no final. E agora precisamos ter o serviço, então como ele está usando o serviço de confirmação de serviço. Então eu vou ver que ele foi, ele clica no botão, ele executa um método de confirmação um. E esse método terá essas propriedades. Portanto, este serviço de confirmação tem uma confirmação e tem algumas opções como uma mensagem, cabeçalho, ícone, e também quando a aceitação e quando rejeitar. Então, quando eu aceito, eu apago a categoria e exibo uma mensagem de sucesso. Mas quando eu rejeito, eu simplesmente não faço nada. Então podemos copiar esta parte, toda ela. E vamos para a nossa lista de categorias. Então, quando o usuário clica na categoria de necessidade, em primeiro lugar, queremos mostrar-lhe um diálogo. E esse diálogo será exatamente do serviço de confirmação. Mas primeiro, precisamos importar o serviço de confirmação, como vimos anteriormente. Então precisamos ter o serviço de confirmação deles, que é importado da energia primária. Então temos aqui Serviço de Mensagem e também serviço de confirmação. E quando você pressiona o espaço de controle ou ponto de controle, você obteria a importação automática. Agora de volta ao método, vamos ver que, que temos a mensagem de confirmação. Então podemos substituir isso por algo como, você quer excluir essa categoria? E também o cabeçalho será Excluir categoria. Então é como um título desta caixa de diálogo de confirmação. E nós damos triângulo de exclamação como um ícone para mostrar que é perigo. Então nós movemos este gráfico de barras, onde está este serviço de categoria? E copiamos tudo com a flecha em si, e colocamos dentro da aceitação. Legal. Então agora temos a caixa de diálogo de confirmação, serviço de diálogo de confirmação, e então temos o erro e as mensagens. Mas rejeitando, não farei nada. Vou mantê-lo assim para não termos que fazer nada com ele. Nós salvamos. E como eu lhe disse, talvez você veja esse erro. Basta reiniciar o front-end e você vai se livrar dele de volta para o front-end. Nós experimentamos. Veremos que o serviço de confirmação não é fornecido. Então, vamos para o módulo do aplicativo e, novamente, precisamos fornecer o serviço de confirmação como vimos com o serviço de mensagem. Então voltamos para o front-end e tentamos excluir alguma categoria. Eu digo para apagar este, ok, nós temos a categoria principal. Você quer obtê-lo nesta categoria? E quando eu clicar em Sim, vejo que foi excluído. E também a mesa é atualizada e recebi uma mensagem. Mas quando eu clicar agora, nada está acontecendo. 100. Edite uma categoria: Ok, nesta palestra, eu vou mostrar a vocês como editar uma categoria. Anteriormente, fizemos o Excluir. Agora queremos fazer a edição. Então, queremos fazer este botão categoria de edição funcional será exatamente o mesmo formulário para uma nova categoria. Apenas a diferença de que estamos preenchendo os dados da categoria já aqui. E precisamos também alterar este título para ser categoria de edição e também este botão para ser, por exemplo, atualização. Então vamos começar do começo primeiro. Vamos dar uma função que temos 20. Clique nisso, vamos para o componente do novo. Então, primeiro de tudo, precisamos criar esses métodos. Então vamos novamente, duas categorias, componente lista. Aqui está categorias menos componente. E na atualização de botão que tivemos aqui, excluir, e também tivemos uma atualização ou edição. Temos que adicionar uma função. Então, será exatamente o mesmo que fizemos com a exclusão. Então eu preciso ter um clique, e este clique será categoria de atualização. E eu quero passar também. Eles categoria ID porque eu preciso do ID para pegar os dados da categoria. Então, aqui nós digitamos ID de categoria. Voltamos para o arquivo TypeScript, vamos para a lista Categorias e adicionamos um novo método. Estamos chamando de categoria Atualizar. Então aqui atualizar categoria, e então eu tenho ID de categoria, que é uma string. E esse método irá me navegar para a forma de categoria. Então ele vai navegar para mim duas categorias para, então, dessa forma, precisamos de um navegador. Então precisamos de uma maneira que quando clicamos nisso, ela nos navegue até esse componente. Claro que você pode fazê-lo e longe também no modelo HTML, você não precisa ter um evento de clique, mas você também pode fazê-lo diretamente como um link de roteador, como fizemos anteriormente com um links normais. Mas quero mostrar-lhe também como navegar quando você precisa disso. O arquivo TypeScript em Angular, há uma classe que é chamada roteador. Também podemos importá-lo no roteador construtor. E é roteador, e vem do roteador angular. E quando queremos usar este roteador, vamos novamente para atualizar categoria. E eu digo que este ponto roteador ponto navegar por URL. E aqui eu especifico o URL que o roteador me levará. Assim, será para o novo componente, que é o componente de formulário. E aqui dizemos, temos carrapatos. Nós, nós dizemos forma de categoria. E então eu posso especificar o ID que eu quero passar para este link. E então dizemos aqui que ID de categoria é esse ID de categoria. Então eu quero ir para este link como formulário de categorias ISA e, em seguida, passar o ID onde eu quero navegar para. Mas a questão aqui que nós não temos esse link, nós temos apenas como o fórum. Então, quando eu clicar em Novo, ele vai me levar para o fórum, mas eu não tenho algo com o ID. Então vamos adicionar isso ao módulo do aplicativo. Vamos para o arquivo do módulo do aplicativo, e então temos aqui as rotas. Teremos uma nova rota, que será exatamente a mesma que a nova. Mas precisamos adicionar aqui alguma identificação. Então, quando você atribuir isso com ID ou qualquer chave que você deseja usar, então ele terá como um parâmetro, como uma variável. Então você pode usar isso como um parâmetro e ler o valor dele em ângulo. E queremos nos referir a categorias formulário também. Então vamos verificar se tudo está funcionando bem. Vou salvar tudo, então todas as alterações serão salvas. Voltamos ao nosso aplicativo, ele é atualizado automaticamente. Nós clicamos em editar, vemos que tudo está certo. Navegamos para o URL correto. E também temos aqui o ID, o ID de sua categoria, que eu cliquei. Então, quando eu clicar neste, eu terei ID diferente. Quando eu clicar sobre este, Eu também tenho ID diferente. Assim, com base nesse ID, vou especificar que este fórum é para edição ou é para adicionar uma nova categoria. Então, para isso, eu vou para a sua forma de categorias e definir uma variável. Chamamos de modo de edição. E este modo de edição obterá um valor no início, ou como padrão será falso. Portanto, não é modo de edição por padrão, mas temos que torná-lo como modo de edição quando estamos navegando para editar uma categoria. Ok, Então, como eu posso saber que este formulário está no modo de edição ou não, isso será conhecido por se houver parâmetro após este link, então eu estou no modo de edição. E se eu não tiver esse parâmetro, então eu não estou no modo de edição. Então, como podemos saber que primeiro eu criaria um método sobre energia na edição. Chamo-lhe, por exemplo, estes pontos. Podemos chamar esse modo de edição de verificação método. Então, desta forma, vou verificar dentro deste método se eu estou no modo de edição ou não. Então vamos definir esse método. Vá para baixo. E se você notou, estou mostrando os métodos internos. Eu estou usando sublinhado por trás deles e uma sinaliza-los com um privado. Então eu preciso de uma maneira de ler parâmetros de seu link, a partir do URL. Preciso saber se há ID 3D ou não, como podemos fazer isso. Se você se lembra, usamos algo chamado Route. Mas aqui no outono há algo chamado rota ativada. E isso, podemos usá-lo de Angular para saber se temos um parâmetro na URL ou não. Então, vamos chamá-lo. Temos um privado ou roteador. E este roteador, é chamado de rota ativada. E esta rota ativada vem também de roteador Angular, ou é melhor, Vamos chamá-lo de uma rota apenas. Voltamos ao nosso método que é verificar o modo de edição. Nós vamos aqui e dizemos estes pontos, ponto de rota, parâmetros, como os parâmetros, verificar para mim os parâmetros que estão no URL atual e, em seguida, assinar. Então eu quero me inscrever para ver e observar o link quando eu vou para este componente. Então você se lembra, estamos assinando observável. E observável está sempre nos dando um novo valor. É como um batimento cardíaco, você pode imaginar cada vez que vem com um novo valor. Então desperdício no abusador o que ele está clicando quando ele clicar em Adicionar vir a este componente e ele tem ID ou parâmetros em geral em seu link, em seguida, a assinatura seria demitido. E então eu posso ler os parâmetros que estão vindo com a URL. Então, para ler esses parâmetros, o retorno de assinatura para mim, armas de fogo, por exemplo, você pode definir uma variável aqui. Então temos a função de seta aberta e a função de seta dentro dela. Posso lidar com o que quero fazer. Então, por exemplo, se houver parâmetros, ID, se houver ID dentro desses parâmetros, e este será exatamente o mesmo que eu defini em um módulo. Então aqui, quando eu digo ID, então eu devo procurar também por ID. Mas se eu chamá-lo, por exemplo, ID de categoria, então eu devo aqui também procurar por ID de categoria. Então, se houver um ID como o usuário clicou no modo de edição e há ID param no link. Em seguida, torne o modo de edição como verdadeiro. Ok, então agora estamos no modo de edição, temos certeza de que o usuário clicou no botão Editar e estamos lendo os valores que vem deste ID de categoria. Perfeito, Vamos salvar agora e vamos ver se podemos como mais fraco começar simples. Podemos dizer, por exemplo, vamos alterar este texto para ser anúncio é TD editar quando eu estou adicionando uma nova categoria. E também editar é Td de anúncio, onde eu estou editando categoria ar. E também este botão terá aqui atualizar quando eu estiver atualizando a categoria, quando eu estiver no modo de edição ou criar quando estou criando um novo. Então vamos fazer isso é muito simples. Então vamos para o modelo, modelo HTML, e se você sabe condições ternárias, É como in-line. Se assim for, quando eu definir esta entrada como ligação bidirecional, então eu serei capaz de ler os valores aqui. Então, por exemplo, eu posso ver variáveis. Posso usar o modo de edição se for possível alterá-lo ou não, ou ler nele baseado nisso. Assim, desta forma, eu posso ser capaz de ler o modo de edição valioso. Então eu digo como foi definitivamente condicionado a condição inline se, Eu digo Modo de edição. Quando eu tiver o modo de edição. Então para mim aqui, coloque para mim aqui, edite categoria. Mas quando eu não tenho modo de edição, em seguida, torná-lo como adicionar categoria como antes. Então aqui nós especificamos com base no valor do modo de edição. Se for verdade, então é modo de edição. Mas quando é falso, então é categoria ou adicionar um novo modo de categoria. Vamos guardá-lo e tentar de novo. Vamos ver que temos categoria ADT, mas quando eu voltar para categorias, Eu clique em Novo, Eu vou ver que eu tenho adicionar categoria. Mas quando eu vou aqui e clique neste lápis, Eu vou ver que eu tenho edição categoria. Então a mesma coisa que vou fazer é com este botão. Então, quando é Editar Modo, em seguida, torná-lo como criar, mas então torná-lo como editar. Então o botão já está na barra de ferramentas e está aqui? Então nós o temos aqui como um Criar. Então dizemos que o rótulo estará disponível com base no modo de edição. Então, quando é Modo de Edição, em seguida, me dê como atualização. E quando não é modo de edição, torná-lo como cria ou quando salvamos, vemos que ele tem uma atualização porque eu sou ou eu tenho ID aqui. Então, quando eu voltar para a categoria. Você não, que é Criar. Volte para categorias, edite e depois atualize. Então, agora fizemos uma mudança tática. Então só temos essa troca baseada se eu tiver aqui uma identificação ou não. Então agora vamos sentir os dados que vêm com este formulário. Então precisamos de uma API ou da Ecole que ele vai pegar para mim aquela contiguidade com essa identificação. Então eu sinto os dados dessa categoria dentro desses campos dessa forma. E, claro, tudo isso estará no modo de edição. Então, quando voltarmos para a nossa função que criamos aqui, precisamos verificar se temos uma categoria com esse ID ou não. Então nós já temos esses parâmetros ID. Então eu estou lendo a identificação aqui. Então eu preciso de um serviço para obter uma categoria por ID. E nós criamos isso já no backend. Se você se lembrar, quando eu vou para a categoria e eu chamá-lo por ID, segue por exemplo, Eu chamo este. E coloquei a identificação depois da ligação deles. E quando eu enviar, eu vou obter essa categoria do banco de dados, que é exatamente com os detalhes como nome, ícone e cor. Então também, precisamos de um serviço. Então, quando voltarmos para o nosso serviço, que é serviço de categoria, precisamos ter uma categoria gets, categorias, mas uma categoria, então será a mesma. Mas aqui estou passando o ID da categoria, que será uma string. E também os observáveis foram devolvidos para mim apenas uma categoria, não várias categorias. Então eu vou conseguir apenas um. E no final, terei aqui o ID da categoria. Então eu vou ter aqui como mais ID categoria. Ou, se desejar, você pode usar o recurso backticks. Então nós podemos ter aqui o tick de volta e também ouvir tick de volta e aquele cifrão e, em seguida, ID da categoria Isaac. Então, neste caso, temos o ID da categoria. Conseguimos exatamente com esse serviço, mas precisamos renomear isso e temos isso como uma boa categoria. Então vamos voltar à nossa forma. Então podemos ir aqui, duas categorias se formam. E então eu vou dizer esta categoria ponto, ponto de serviço obter categoria. E esta categoria aceitará ID de categoria, que está nos parâmetros. Então eu vou dizer params dot ID e, em seguida, assinar como sempre. Então eu vou ter, ok, então inquérito. E depois vou fazer alguma coisa. Eu quero definir os campos da categoria para estar no formulário com essa categoria que eu obtive do back-end. Então, se você se lembrar, podemos alcançar esses controles usando este formulário de categoria. Então dizemos esta forma de categoria de ponto, nome de ponto, valor de conjunto de pontos. Então eu quero definir valor para isso. Então eu defini o nome do ponto da categoria de valor. Então eu estou recebendo aqui essa categoria e eu estou usando o nome dela, que eu obtive do backend para definir o valor do campo, que está neste controle. Então, é muito simples. Então aqui temos este e também outro para o ícone. Então eu vou dizer embora ícone ponto definir valor e, em seguida, categoria ponto ícone. Então vamos guardar isso, tentar. Ok, temos pesadamente coisa está bem. Então temos, novamente, voltamos às categorias. Temos aqui uma beleza e temos saúde. Quando eu clico em saúde, então eu chegaria aqui saúde, saúde. E também quando eu clico em beleza, eu tenho aqui beleza, beleza. E toda vez que eu clico, chamo o back-end para obter a categoria da categoria visitada atual ou ID visitada. Ok, então o que precisamos agora é quando eu mudar esses campos e então eu clicar em Atualizar, então ele fica realmente atualizado no banco de dados. Então o que precisamos, você tem que repetir comigo primeiro, um serviço que está atualizando para nós no banco de dados. E também precisamos definir a lógica. Quando eu clicar no botão, ele irá enviar solicitação de atualização, não qualquer pedido, porque se você se lembrar, este formulário é feito apenas para criar uma nova categoria, precisamos verificar também o modo de edição, e então decidimos se é atualização ou se está criando uma nova categoria. Então vamos fazer a lógica do botão primeiro. Quando eu clico neste botão Atualizar, como você se lembra, é apenas um botão. Só estamos mudando o texto. Então aqui temos apenas atualizar ou criar, e então temos o método em enviar e enviar. Estou verificando se este formulário é válido ou não e, em seguida, estou criando uma nova categoria. Então, talvez depois que coletamos os dados de sua categoria, como sabemos o que o usuário inseriu no formulário. Podemos verificar o Modo de Edição. Se esses pontos, edite o modo. Então atualize para mim essa categoria. Senão. Então faça por mim, eu crio categoria. Então, para isso, podemos definir um método. Podemos chamá-lo de categoria de atualização de ponto. Seria um método privado. E este método aceitará para mim uma categoria. Então eu vou enviar esses dados de categoria que são coletados do usuário, e então eu vou enviá-los para este método. Senão. Então eu vou dizer também outro método, apenas para tornar o nosso código mais limpo e mais legível, podemos dizer Adicionar ou Criar categoria. E então eu passo novamente os dados da categoria. Portanto, precisamos definir dois métodos. Então este método já está definido aqui, nós já o temos aqui. Então nós apenas dizer privado adicionar categoria, e esta categoria vai aceitar dados de categoria. Então, podemos dizer que temos aqui também categoria. E então podemos cortar esta parte do código aqui e, em seguida, colado na categoria. Então temos adicionar categoria dentro deste método. Então precisamos adicionar categoria de atualização. Será a mesma coisa. Então temos aqui categoria de atualização privada e, em seguida, será uma categoria e também será tipo de categoria. Eu sempre tento mostrar que para adicionar sempre tipos. Então seria melhor para você. E mais amigo do código ou desenvolvedor. Faremos alguma refatoração mais tarde com base nas regras. Por exemplo, eu não estou usando engrenagem essa resposta para que eu possa me livrar desse parâmetro. Veremos isso mais tarde. Então eu quero que você veja o vídeo que eu quero fazer sobre refatoração. Nós refatoramos todo esse código, verificamos nossos problemas. Tudo é limpo para entregá-lo de forma muito limpa. Então, qual é a diferença entre criar categoria e atualizar categoria? A diferença que a categoria de criação, eu não preciso passar um ID de sua categoria que eu quero atualizar ou criar. Mas na categoria de atualização, eu preciso passar os novos dados de categoria e também o ID da categoria que eu quero atualizar, que é este. Então, para isso, eu acho que todo este método será exatamente o mesmo que adicionar categoria, exceto que precisamos ter também o ID. Então eu vou dizer aqui que nós podemos copiar aqui tudo e colá-lo aqui. Mas não temos aqui criar categoria, mas precisamos de uma categoria de atualização. Então atualizando uma categoria usando a categoria que eu quero atualizar. Mas como eu disse anteriormente, precisamos também da identificação. Então vamos criar este serviço. Primeiro, vamos novamente duas categorias, serviço, criamos o serviço e, em seguida, vamos discutir sobre o ID, como podemos obtê-lo. Então, primeiro de tudo, temos aqui criar categoria , será exatamente o mesmo. Nós só precisamos substituir este também, categoria de data. E depois lemos essa categoria. Ele vai retornar para nós uma nova categoria que está desatualizada. Mas aqui em vez de post, precisamos adicionar colocar. E com este pedido PUT, podemos atualizar a categoria. E também ouvimos, como você se lembra, ao atualizar o pedido, precisamos ir para colocar, precisamos passar tudo. Assim, o ID da categoria com um novo dado. Portanto, não se trata apenas de obter e enviar novos dados, mas também precisamos passar também o ID. Então precisamos aqui de alguma forma, como dizemos, mais ID de ponto de categoria. Ok? Mas isso virá indefinido, eu acho, porque nós não especificamos nesta categoria que nós também temos ID. Então, como podemos fazer isso, voltamos à nossa forma aqui. Então nós dizemos que, ok, eu tenho aqui categoria de atualização. Mas se você se lembrar dessa categoria que é passada aqui no método, ela tem apenas nome, um ícone, mas não tem o ID da categoria. Ok, se você se lembra, nós temos o ID da categoria de onde estávamos verificando o modo de edição. Então, no modo de edição, eu posso definir também uma variável global como perto deste modo de edição, eu chamo de ID de categoria atual. Então eu digo ID da categoria atual. E isso será, por exemplo, uma string. E no início não é assim porque não tem nenhum valor no início. Então, quando voltarmos para o modo de edição, precisamos ter este modo de edição de verificação. E depois que eu atribuir o modo de edição, eu digo que este ponto ID de categoria atual será params dot ID, porque se houver ID, em seguida, atribua-o ao ID atual. Então, quando salvarmos, acho que aqui temos um problema. Estamos perdendo o final da assinatura. Bracket, então precisamos adicioná-lo aqui. Portanto, basta ter cuidado quando copiamos colar alguns funcionários para não perder alguns suportes. Verificamos o nosso terminal. Se não temos nenhum problema aqui, então vemos que, ok, temos falta que a categoria não está definida. Isso é porque eu não salvei o serviço de categoria deles. Então salvamos de novo. Eu clico em categorias. Eu quero atualizar também a beleza ícone, então não, não excluir ou atualizar. Então, vou dizer aqui uma beleza, por exemplo, corrigimos esse problema e removemos esse ícone. E então clicamos na atualização. Vemos que estamos recebendo erro e nosso backend diz que é indefinido. Isto é indefinido. Por quê? Porque li o ID da categoria, mas não o passei para o serviço. Temos aqui o ID da categoria atual. Então nós só precisamos construir o objeto de sua categoria que eu estou passando para atualizar ou excluir ou desculpe, adicionar com um ID. Então eu vou dizer ID será este ID categoria atual. Então, quando há um ID dentro do modo de edição, então eu enviá-lo para o modo de edição. Mas quando não há, então eu enviá-lo mesmo Não há porque a idéia seria criada no banco de dados quando eu criar qualquer categoria. Então vamos guardar isso. Tentou novamente, removemos este ícone e adicionamos aqui beleza novamente e aqui uma beleza novamente, e clicamos em Atualizar. Vemos que categoria foi atualizado e voltamos para a lista isso porque copiamos o mesmo código, que é 4 adicionar categoria. Então, vamos apenas escolher as mensagens. Tudo o que precisamos aqui, ficar bom é atualizado. Categoria não é atualizada quando há algum erro. Então, quando salvarmos, tente editar este. Então podemos ver aqui ser atualização de saúde, piolhos, obter um bom é atualizado e é automaticamente voltou. E temos aqui a categoria atualizada. Então, como uma recapitulação e rápido, então precisamos especificar se estamos editando ou temos NU. Estamos usando o mesmo formulário porque não precisamos negar o código duas vezes. Não quero criar mais quatro para criar ou editar uma categoria. Então podemos usar o mesmo componente, mas em condições diferentes. Então, primeiro de tudo, quando eu tenho um novo, eu apenas crio um componente, sem problema ou categoria. E quando eu tenho edição, eu passo o ID de sua categoria clicada. E com base nessa identificação, defini minhas coisas, defini minha lógica. Eu digo que isso é edição, isso é atualização ou não. E também sinto os dados da categoria. E como fizemos isso, vimos que estamos lendo esse valor dos params. E pelos parâmetros, envio novamente a função baseada no Modo de Edição. Se eu estiver no Modo de Edição ou não. E então eu atualizo essa categoria ou adiciono categoria Eliyahu com base na condição do modo de edição. E, claro, para cada movimento em que eu quero fazer, eu precisava de serviços de um serviço que está agarrando para mim a categoria selecionada do banco de dados. E também quando eu quero atualizar categoria, Eu criei serviço de categoria de atualização, que também está localizado no serviço para atualizar as coisas do banco de dados através do backend, que estamos usando a API aqui. 101. Adicione o selecionador para cores de cores para cores categorias: Bem-vindo de volta. Nesta palestra, vou mostrar-lhe como criar um seletor de cores. Porque como você se lembra que a nossa categoria também vem com uma propriedade que é chamada de cor prime. Ng também vem com um controle de seletor de cores. Então você pode pegar uma cor e usar o valor e armazená-la no banco de dados. Como podemos usar este seletor de cores? Primeiro de tudo, precisamos importar o módulo Color Picker e, em seguida, usá-lo em nosso módulo de aplicação como eu fiz aqui. Então eu tenho aqui o módulo seletor de cores e eu importá-lo para a nossa exposição VOCÊ. Em seguida, precisamos usar algum componente que é chamado de seletor de cor de ervilha. Então vamos copiar esse e ir para o nosso formulário. Então eu gostaria também de colocá-lo perto do ícone e do nome. Então podemos ter também aqui uma propriedade de cor. Eu estou mostrando isso porque eu quero que você saiba como adicionar outras propriedades para que nós não temos apenas nome e ícone na categoria é claro que pode ser que vamos ter cor, vamos ter imagem, vamos ter várias coisas. Assim, você pode adicionar suas próprias propriedades com base em sua necessidade. Então eu estou mostrando a vocês esta palestra especialmente só para mostrar como adicionar outras propriedades para ser mais prático. Então voltamos à nossa forma e encontramos o campo. Então nós criamos aqui um campo como temos um nome e ícone. Vamos criar outro campo. Eu digo div. Eu dou-lhe uma classe que é campo B, e também outra classe que é chamada chamada P. Então, quando eu pressionar tab, eu vou ver que eles são atribuídos a um div como uma classe. Então precisamos também de um rótulo. Então podemos ter este rótulo para cor. E dentro deste rótulo será a cor do texto. E então vamos colocar nosso componente aqui. Então temos aqui seletor de cores e você modelo de cor. Mas como você vê aqui, não estamos usando modelo NG. Estamos usando o nome do Controle de Formulário. Claro, este seletor de cores, tenho certeza na documentação que eles mencionaram sobre isso. Assim, podemos ver que em fóruns orientados por modelo ou em formas reativas, seletor de cores pode ser usado em uma forma orientada por modelo também. Como podemos fazer isso, nós apenas dar-lhe um nome de controle de formulário de propriedade, que é bem simples. Então removemos essa parte. Dizemos: “Ok, nome do Controle de Formulário. Mas como você se lembra, dissemos que cada nome de controle deve estar dentro do nosso grupo de formulários, que nós construímos no arquivo ts ou no arquivo de código. Então eu vou novamente para o meu construtor de formulários e um grupo, e então eu adiciono a propriedade de cor. Então eu digo aqui, adicione para mim cor. E o valor padrão, por exemplo, pode ser FFF. Então esta cor, a ampla, que será um padrão quando não houver nenhum valor vem do banco de dados. Então vamos salvar tudo para ver se tudo está funcionando bem. Voltando ao nosso aplicativo, vemos ótimo que temos a cor aqui. Então temos tudo. Temos um seletor de cores e o que estamos faltando agora que precisamos, quando estamos atualizando a cor, precisamos enviá-lo para o back-end. Então, primeiro de tudo, como você se lembra, quando eu adiciono uma categoria, precisamos pegar uma cor. E também quando estamos indo para atualizar categoria. Então primeiro vamos adicionar uma categoria. Então, quando eu estou adicionando uma categoria e pressione no botão Criar, se você se lembrar, estamos criando o objeto categoria. Estamos tendo ID, nome e ícone, que pegamos a partir do próprio formulário. E então eu estou enviando com base se eu estou no modo de edição e tudo se eu estiver no modo Adicionar. Então nós conversamos sobre isso anteriormente. Então eu também preciso enviar a cor. Então seria exatamente da mesma maneira. Então eu vou dizer também, cor será esta forma de categoria de ponto porque nós definimos a forma na forma que temos uma cor também. Então eu vou dizer valor de ponto de cor. Mas aqui ainda estamos tendo um problema. Estamos tendo problemas dizendo que a cor não é atribuível à categoria, como a cor não existe no tipo de categoria. Então, quando eu for para essa categoria, eu vou ver que eu já não tenho essa propriedade, então nós não podemos adicioná-la e também adicioná-la como opcional porque às vezes eu não preciso dela e também é opcional. Então, depois disso, quando eu adicionei, o erro, estes aparecem. Então, agora vamos tentar adicionar categoria com base no que fizemos aqui. Então eu vou para o nosso aplicativo, dar um nome, por exemplo, jogos de PC. E o ícone será um PC. E então eu vou dar uma cor. Por exemplo, este vermelho. Ou vamos dar assim para ser reconhecível. E então eu clico em Criar, apenas atente para sua rede o que estamos enviando para o back-end. Então, quando eu clicar em Criar, vejo que obtém uma GUI é criada. E a cor que enviei é exatamente a cor que selecionei. E quando eu ir novamente para editar esta categoria, eu vou ver que a cor é ajustado de volta para colar isso porque nós não estamos inicializando. Além disso, quando eu clico no modo de edição, como você se lembra, estamos inicializando esses campos, esses valores. Então o que precisamos também para inicializar a cor. Fazer isso é bem simples. Nós apenas vamos novamente para o nosso formulário de categorias. Se você se lembrar, estamos fazendo o modo de edição de verificação e injetar o modo de edição. Quando eu tenho modo de edição, então eu estou definindo os valores desses campos para o valor inicial que eu recebo do banco de dados. Então nós vamos apenas precisar adicionar esta categoria forma ponto cor e, em seguida, definir o valor da cor para ser categoria ponto cor, que eu obtive do back-end, que eu obtive do banco de dados. Porque se você se lembra, também, nosso back-end está nos enviando a cor porque nós a salvamos no back-end. Então, quando eu clicar em Salvar, tudo bem, volte para o aplicativo. Vemos que a cor é inicializada e que é uma grande coisa. Então aqui eu tenho essa cor. Às vezes não tenho nada. Então porque está ficando um preto ou algo assim largo. Então isso já tem uma cor no banco de dados. Então, quando eu vou para Categorias e eu quero editar, eu vou ver a cor original. Mas como você vê, eu não gosto de tê-lo assim. Está na mesma linha do rótulo deles. Então precisamos apenas colocar este ícone ou esta cor para estar na mesma linha com essas entradas. Então, ter o rótulo no topo e sob ele é uma cor. É muito simples aqui. Eu vou fazer isso é muito rápido. Vou apenas adicionar um BR. Br é uma linha quebrando. Então, quando eu salvar, eu vou ver que eu tenho aqui uma linha quebrando e eu tenho essa cor, que eu posso escolher e atualizar minha categoria com base nisso. Então vamos adicionar também essa coluna à lista da tabela. Então podemos ter aqui id, nome, ícone e uma cor. Então, para fazer isso, nós também podemos ir para a lista. Eu tenho aqui outro td, que é categoria que cor. E também tenho um cabeçalho. Então, teremos um cabeçalho da tabela que será chamado de cor. Então podemos tê-lo como cor. E também o valor ou o TD ser a cor do ponto da categoria. Então, quando salvamos este formulário ou esta tabela, vamos ver que temos a cor. Na próxima palestra, vou mostrar-lhe como embelezar esta mesa. Queremos que o usuário seja mais amigável com a interface do usuário. Como eu quero que ele veja o ícone em si e também eu quero mostrar-lhe o lote Recolor, textos e códigos como este. Então queremos mostrar ao usuário o real ou a realidade da categoria, como será. 102. Refatoração e Beautify a tabela com mais recursos: Muito bem, nesta palestra, quero mostrar-lhe como podemos exibir a cor e o ícone na lista de categorias da tabela. Então, em primeiro lugar, como você se lembra que estamos usando Icon Library, que é fornecido por end primo. E esta biblioteca de ícones vem sempre com uma classe II e, em seguida, BI, que é um atalho para o ícone Prime. E, em seguida, você especifica o nome do ícone. Claro, você tem a opção de não usar esta biblioteca de ícones. Há muitas bibliotecas de ícones. Você pode usá-los apenas você precisa substituir o arquivo de estilo que tínhamos anteriormente e que criamos nos arquivos públicos. Então você só precisa ir aqui e dizer que eu não quero usar, por exemplo, ícones primos. Eu quero usar, por exemplo, ícones de material do Google. Então, neste exemplo, estamos mostrando como usar ícones primos. Então, se você se lembrar em nosso banco de dados que estamos apenas armazenando o nome do ícone. Então, por exemplo, se eu quiser usar um desses ícones, por exemplo, eu quero uma bússola. Eu só vou aqui e digo que o ícone desta categoria será uma bússola. E então eu clico em atualizar. Você tem duas opções aqui. Você pode armazenar todo o nome do ícone, como ícone PI, e depois armazená-lo aqui. Ou você também pode, você apenas colocar este prefixo e hardcode, este prefixo que precisamos aqui na tabela no código HTML. Isso depende se você vai usar esta biblioteca de ícones ou não. Então, se você quiser usar biblioteca de ícones diferentes, então eu aconselho você a armazenar todo o nome do ícone que está neste campo. Ou se eu estiver indo para usar apenas os ícones N G principais como eu vou fazer aqui. Então eu guardo apenas o sufixo deste ícone, que é o nome do ícone. E aqui no código, eu vou para o campo onde estou recebendo o nome do ícone. Eu exatamente como estamos usando o ícone. E este ícone terá uma classe que é chamado ícone P e, em seguida, o próprio prefixo. Mas fazemos isso de maneira diferente. Então dizemos ng-class será exatamente como, por exemplo, colocamos também entre parênteses para que possamos usar uma variável dentro da classe NG. Assim, a classe ng-neste caso será o próprio prefixo, como PI mais ícone de ponto de categoria. Então eu digo aqui que eu não quero ter um prefixo ou sufixo, mas eu quero usar esse ícone de categoria, mas tudo aqui é codificado. Então, quando salvamos, podemos ver que estamos indo para obter o ícone na tabela. Então aqui temos a, por exemplo, a bússola. Eu também quero mudar isso, por exemplo, saúde. Podemos dar-lhe outro ícone como, por exemplo, podemos ter este coração, que possamos ir aqui e substituir isto. Nós dizemos atualização, ok, dê-me como um coração. E também podemos mudar isso para algo como No ícone, algo assim, th large. Então nós podemos ter este, bem como um ícone que eu atualizei. E então todos eles serão colocados exatamente como eu prefixo na tabela. Caso contrário, se o nome estiver errado ou não existir na biblioteca de ícones, então ele estará vazio aqui. Você também pode redimensionar este ícone e torná-lo maior. Também está escrito na documentação que você só precisa adicionar. Também estilo de fonte, que vem aqui. Então estilo, tamanho da fonte, você dá, por exemplo, para R, m. Assim podemos tê-lo assim. Então aqui eu tenho eu e então eu dou como tempo. Este estilo será salvo no nosso EM. E então vamos ver que o ícone ficou realmente maior como um usuário ou usuário front-end, Eu não estou interessado sobre o ID porque é muito longo e eu não estou interessado em como este ID é exibido. Então talvez possamos remover essa coluna de identificação daqui, então não precisamos mais disso. Então nós apenas removemos e nós podemos ter apenas o nome e, em seguida, o ícone e essa cor. Então, como você vê aqui, teremos uma nova tabela e, em seguida, temos a cor para a cor. Eu aconselho você também a substituir isso para ser o mesmo que a cor. E será um dever de casa para você. Vou criar uma lição de casa após esta palestra, eu quero que você me mostre como substituir esses hashCode pela cor vermelha. Então eu quero, por exemplo, aqui uma div, que mostrará, por exemplo, a cor deste hashCode. Ok, que tal adicionar um recurso de classificação para a tabela? Então, por exemplo, se eu clicar nos cabeçalhos, eu posso classificar essas colunas. Então eu posso classificar por nome neste caso. Então vamos ativar isso. Eu vou para a mesa principal e verificar como podemos ativar o tipo. Então, como você vê aqui, nós temos uma mesa e então nós temos aqui uma espécie. E este exemplo está nos mostrando como ele está classificando com base no que você clica na coluna. Para mim, eu quero apenas uma coluna para ativar a fonte baseada em. Então, se formos para a documentação, veremos que ele está anexando um atributo para o cabeçalho da tabela. Então, onde ele quer mostrar todos classificar a tabela com base em. Então eu quero, por exemplo, classificar com base na coluna que é chamada de código. Ou eu posso classificar com base em uma coluna que é nomeado nome. Então podemos fazer isso também para a nossa mesa. Então eu posso ir aqui e copiar esta parte onde ele coluna adequado. Então eu vou aqui e eu vou para o campo de nome ou seu nome Cabeçalho onde eu quero classificar por nome e colocá-lo aqui. Então teremos uma espécie de nome de coluna. E quando eu salvar e voltar para o nosso aplicativo, então veremos que ele é clicável e está classificando. Mas ele não está me mostrando o ícone onde eu quero classificar como, por exemplo, de um para Zed ou de Z para a. Então eu quero adicionar também outro campo que é chamado ícone de fonte P. E este é um componente que pode ser usado para exibir o ícone do tipo. E como você vê aqui que ele colocou depois do nome deles, será depois do nome que criamos aqui, o texto em si. Assim, ele irá exibir o ícone que queremos em nossa aplicação. Então, quando voltarmos e veremos o ícone, então saberei como estou classificando. Há mais recursos podem ser adicionados à tabela. Mas agora vamos mantê-lo assim para a categoria. Porque, como dissemos, começamos simples, mas nas próximas palestras para produtos e usuários, vamos adicionar alguns filtros como pesquisa por produto ou, por exemplo, alternar ou, por exemplo, redimensionar as colunas. Isso é o que temos que fazer, que está tudo documentado aqui por enquanto. Como vejo, temos uma bela mesa. A menos que quando você fizer isso e você exibir a coloração, Eu vou adicioná-lo também ao seu código desta palestra. Mas primeiro, eu quero que você faça isso como um dever de casa e poste sua tarefa no repositório de código ou na base de código da lição de casa que eu anexarei após esta palestra. 103. Correções de ESLint: Ok, Nesta seção, criamos um monte de código e escrevemos muitas coisas. Então eu tenho certeza que nós também cometemos muitos erros. Então vamos consertá-los usando Eastland. Eastland, como você se lembra, é a extensão que instalamos no Visual Studio Code e que vem por padrão configuração com o NX. Então aqui, como você se lembra, temos um prefixo como admin e também algumas outras regras que você pode especificar. Então vamos passar pelo que criamos. Primeiro de tudo, temos categorias formulário. Estamos vendo que estamos recebendo um erro aqui, que isso deve ser prefixos como admin. Então vamos consertar isso. Então primeiro temos este fixo, eu tenho outra seta que temos aqui que tipo booleano é booleano. Nós definimos aqui um booleano e dissemos novamente que é booleano, não é bom caminho. Então, em ES lint está dizendo que você só diz que se é booleano ou torná-lo igual a um valor booleano. Então aqui temos agora que apenas false, então o código ou o compilador saberá automaticamente que esta é uma variável booleana. Então vamos verificar aqui o outro código, como você vê aqui, que também temos alguns erros como esta resposta é declarada, mas nunca é lida. Portanto, eu não quero usar uma resposta quando eu criar uma categoria, menos que, se eu disser, por exemplo, categoria e nome seja criado. Então, por exemplo, eu posso usar essa resposta. Por exemplo, renomeio-a como uma categoria porque quando criamos uma categoria, ela está respondendo para mim o backend com essa categoria. Então, desta forma, eu tenho que dizer, por exemplo, esse tipo de categoria. E então eu digo que ele tinha categoria, eu removo essa parte, uso backticks aqui, substituo por backticks. E eu digo que a categoria, este nome de ponto categoria é criado. Então, quando eu substituir isso e ir para o código, crie uma nova categoria. Eu digo, por exemplo, PlayStation. E então o ícone é, por exemplo, jogar ou outra coisa. Então, em eu selecionar uma cor, então eu vou ver que a notificação iria dizer categoria PlayStation é criado. Exatamente do jeito que você quer aqui. E também, por exemplo, aqui eu não uso a variável, então simplesmente você pode removê-lo para manter sua coisa pista mais fácil é claro em seu código é claro. Também a seta se você não quiser mencionar o erro, ok, Então apenas apague isso. Nós não precisamos de você. A mesma coisa para isso é porque você também pode com a categoria de atualização, você pode fazer o mesmo aqui. Por exemplo, vou excluí-lo. E também aqui, eu não preciso disso feito. Então nós não precisamos disso também o erro. Então, como você vê agora temos um código limpo, quatro categorias, quatro componentes no HTML. Acho que não temos nenhum problema. Tudo é claro e encontrar na lista de categorias também. Temos também algo no HTML. Não, não temos, temos em conta a lista deles. Ok, temos aqui algum erro de que este prefixo deve ser admin, deve ser bits azuis. E também, novamente, precisamos remover essas variáveis não utilizadas. Por exemplo, aqui, a caixa de diálogo de confirmação diz que tudo bem, quando eu aceito , eu faço algo, quando eu rejeito , então eu não faço nada, então é melhor removê-lo. Ok, O que criamos também no módulo de aplicativo, vamos ver se temos algum problema. Ok, nós não temos nenhum problema aqui. Além disso, trabalhamos no serviço de categoria como você se lembra. Então aqui nós também tínhamos criado alguns funcionários, como veremos na próxima palestra, precisamos substituir isso por 100 variável, porque como você vê, estamos repetindo a mesma URL em cada núcleo. Portanto, aqui também precisamos refatorar isso. Aqui está me dando um objeto é dizer, não use objeto como um tipo. Então eu cometi um erro aqui porque objeto significa qualquer valor não-conhecimento. Então, neste caso, eu diria para o exemplo, vamos apagá-lo. Por exemplo, Excluir categoria, ele vai me dar um objeto em troca. Então eu digo qualquer, então você pode especificar qualquer para esse tipo. Portanto, você pode esperar qualquer resposta do back-end. Então, por que guardamos isso? Ok, não temos nenhum problema com a fiapos, então tudo está funcionando bem agora. Temos um código limpo. Não precisamos nos preocupar com erros no editor. Na próxima palestra, vou mostrar-lhe como usar variáveis de ambiente. Você se lembra que Angular vem sempre com variáveis de ambiente, como veremos na próxima palestra. 104. Tabela de lista de produtos: Ok, agora nesta palestra vamos construir a tabela de produtos. Então, como você se lembra, estamos criando o componente e, em seguida, estamos preenchendo o modelo e, em seguida, chamamos os serviços. Então vamos primeiro criar dois componentes. Um para a lista de produtos e o outro para os produtos para. Então, como fazemos sempre, vamos gerar no console NX e procuramos por componente como sempre. E depois vou dar-lhe um nome. Onde está o caminho é Pages e, em seguida, produtos e, em seguida, lista de produtos. E o projeto é administrador. E novamente, não precisamos de nenhum estilo com ele porque temos estilo público. E também temos que importar ou ignorar esses testes. Então é isso. E verificamos se está tudo bem. Ok, ele vai Admin, páginas de aplicativos, produtos, lista de produtos e o componente. Nós executamo-lo. E criamos outro componente para quê? Para o formulário. Então temos fórum e lista exatamente como as categorias. Então, clicamos em executar. E veremos em nossa lista de arquivos que temos dois componentes em você, que nossos produtos formam e lista de produtos. E eles estão listados sob as páginas. Então, como eu disse no início desta seção no artigo, escrevi que eu vou fazer o mesmo com categorias, então não temos que repetir o mesmo código. Traga a tabela exatamente como fizemos com categorias. Podemos simplesmente copiá-lo e você pode ajustar esta tabela para caber no produto. Por exemplo, vamos para a lista de categorias e copiamos o conteúdo dela. Então eu vou trazer todos eles aqui. E então eu vou colar isso no componente da lista de produtos onde ele está vazio agora porque ele está em você. E então nós obteríamos alguns erros. Podemos corrigi-los com base em nossa necessidade, e então podemos exibir os dados dos produtos. Esta seria uma maneira mais rápida. Quero mostrar-lhe como reutilizar o código e como implementar coisas reutilizáveis. E como eu disse no início desta seção, vamos implementar coisas novas, como categorias. Como podemos fazer um seleto categorias, e também como fazer upload de imagem do produto. E também como podemos ter um editor HTML caixa de texto alcance para descrição do produto. Assim, podemos nos concentrar nas coisas novas e nas coisas anteriores que fizemos antes. Nós só podemos copiar colá-los. Então, como você vê aqui que nós temos que começar no brinde, ok, que esses dois permanecerão iguais, que é exibir mensagens de confirmação sobre exclusão ou edição. E aqui precisamos ter o título para ser um produto. E aqui lista de todos os produtos. E mais uma vez, precisamos substituir. Temos um botão que é novo, ok, não precisamos de nada aqui. E também precisamos substituir essas categorias variável, que seria definido no construtor antes do construtor aqui. Então eu posso dizer uma variável que é chamado de produto, e este produto é apenas uma matriz vazia por enquanto. Então podemos salvar isso. E vamos novamente para o modelo HTML e, em seguida, precisamos substituir essas colunas. Assim, por exemplo, no início temos o nome do produto, se você se lembra. E também precisamos de uma imagem se você se lembrar disso em nosso back-end. E então precisamos ter também preço para que seja classificável também. Então eu também preciso classificar por preço. Então eu preciso ter um campo classificável aqui. E também precisamos ter um estoque, como quantos deste produto no meu estoque interno ou no meu estoque. Assim, também podemos substituí-los por estoque. Então precisamos de uma coluna também para essa categoria. Portanto, precisamos aqui de ter uma categoria a que esses produtos pertencem. Então, podemos ter uma categoria e vamos ver como podemos conectar categorias com os produtos como fizemos no back-end. E agora precisávamos aqui no front-end para exibir o nome da categoria. Se você se lembrar, não foi preenchido no backend que está mostrando quando este produto é criado. Então podemos dizer criado em, então sabemos que este produto em que o tempo é criado. E nós também podemos classificar com base nisso. Nós não precisamos classificar por imagem e este campo ou esta coluna será seguir a ação como os botões de editar e excluir. Certo, vamos para o corpo. Então aqui eu tenho um produto. Vou mostrar-lhe como podemos reduzir este código no final desta seção como opcional. Portanto, é opcional até você se você quiser refatorar este HTML e reduzido neste código. Então você não pode deixar que assim codifique a tabela. Algumas pessoas não gostam. Eles gostam de usar um loop aqui. Assim, eles podem fazer loop em alguma constante ou algumas colunas que já estão configuradas EHR. E então eles podem substituir ou colocar suas colunas com base nessa matriz. Então, o que aqui agora nós somos difíceis de codificar coisas. No futuro, veremos como podemos refatorar isso como opcional. Então, por enquanto, eu posso duplicar tudo isso. Preciso do nome do produto. Então podemos ter aqui nome do produto, produto, como dissemos imagem. Podemos ter também um produto, preço do produto. Então temos aqui também preço. E podemos ter um estoque, quanto no conteúdo ou contar em estoque. Então lembre-se, este campo deve ser exatamente o mesmo que criamos no banco de dados. Então, se formos ao carteiro, se você se lembrar, se eu for aqui e eu quero mostrar a vocês quando eu listar os produtos, então eu recebo os produtos aqui. Temos aqui uma descrição rica, imagem e da marca e também avaliações de preços é destaque, descrição do nome, você se lembra? Então aqui temos também alguns contagem em estoque. Então isso o que precisamos que é chamado de contagem é doca. Portanto, esses campos devem ser exatamente os mesmos que estamos usando no front-end. Então, para não ter um conflito de código, você pode usar um nome diferente, mas vamos manter as coisas consistentes e mais estáveis entre o front-end e o back-end. Então eu preciso de uma contagem em estoque e também precisamos da contiguidade. E aqui teremos também questão. Vamos mostrá-lo mais tarde porque, como você vê aqui, estamos bem recebendo essa categoria. Mas a categoria é objeto. Então, dentro que podemos dizer categoria, em seguida, nome. Mas eu quero mantê-lo assim agora apenas para focar nele e mostrar como ele realmente está vindo do banco de dados. Então agora precisamos de uma categoria de produto e no final precisamos de uma coluna para criado em. Então temos que dizer aqui, criado em. E deve ser exatamente o mesmo campo, exatamente como está aqui. Portanto, ele não é criado em sua data, criado. Então temos que colocar a mesma coisa aqui, outras coisas que não precisamos para que possamos excluí-las. Temos também de eliminar esta parte. Nós não precisamos de cor, mas os botões, precisamos mantê-los apenas nós substituímos os métodos para que possamos dizer um produto, fez isso produto, e também, precisamos ter o produto de atualização. E aqui não temos mais ID de categoria, mas temos aqui um ID de produto. Outras coisas são exatamente as mesmas. Não temos que fazer nada. Vamos verificar o nosso aplicativo a menos que tenhamos que ir para o módulo do aplicativo, eu vou mostrar-lhe o porquê. Então, vamos para a nossa aplicação novamente e clique em produtos. Vemos que não temos nenhuma rota correspondente aos produtos, então precisamos adicionar rotas da mesma maneira. Temos três rotas, quatro categorias, categorias de formulário categorias, ID de formulário para editar o produto ou a categoria. Exatamente a mesma coisa. Precisamos fazer o mesmo, mas temos que chamar produtos de TI. E aqui os produtos se formam. E novamente, uma forma de produtos. E o componente aqui que é importado automaticamente é componente de lista de produtos e forma de produtos. Vamos movê-los para cima para estar com essa parte componente. E então podemos usá-los no aplicativo para baixo. Então não podemos ter aqui a lista de produtos. E também precisamos ter aqui categorias ou produtos formam componente. Então, temos aqui componentes de forma de produtos. Está tudo bem. Nós salvamos, vamos para o aplicativo, não temos nenhum erro. Nós verificamos aqui produtos, ok, agora temos tudo e todas as colunas. Mas temos dados vazios porque tínhamos matriz vazia. Então o que precisamos fazer agora é apenas verificar e pegar os dados que vimos anteriormente no Carteiro e colocá-los em nossa mesa e ver como podemos criar o serviço Exatamente. Também gosto das guloseimas e criar o modelo do produto. 105. Serviço e obter produtos do banco de dados: Ok, nesta palestra nós vamos preencher a tabela que construímos na palestra anterior com os dados. Então, como vemos aqui que temos os dados vem do banco de dados e também do backend com alguns campos para todos os produtos, como lista de produtos. E esta é a API que já tínhamos. Então, primeiro de tudo, precisamos preencher esse conjunto de produtos, exatamente como fizemos com categorias. Então primeiro precisamos ter um serviço. Eu acho que o serviço, nós também podemos colocá-lo na biblioteca de produtos como fizemos com categorias, para que possamos ouvir o mesmo. Também podemos ter o serviço de categoria, mas podemos substituí-lo e renomeá-lo para serviço de produto. Então temos aqui produtos. E então eu vou ter aqui o arquivo que é chamado produto services.js. E então eu quero ter que exportá-lo para os módulos ou para o próprio módulo da biblioteca. Então podemos ter aqui um produto e precisamos também ter um modelo. Assim, o modelo será exatamente como os campos do produto. Então eu vou enchê-los rápido para não perder algum tempo. Então podemos ter aqui um arquivo de produto. Podemos chamar isso também de um produto. E vou preencher todas essas informações exatamente como as temos no back-end. Então eu também gostaria de manter este mesmo nome dos campos que vem do back-end para manter tudo consistente e não ter conflito com seu desenvolvedor back-end. Então temos aqui o nome, como uma descrição de string é uma string. Descrição também é string, como vimos no backend, imagem, será uma string que será a imagem principal do produto. Imagens, que serão a menor das imagens do produto, que são como por exemplo, vamos usá-las para uma galeria como veremos no futuro. Também uma marca que será novamente corda. E o preço é, deve estar aqui. Um número, não como uma string. Categoria será tipo de categoria. Então eu importei aqui essa categoria do modelo de categoria e coloquei essa categoria como categoria. Então contar na parada será um número e também uma classificação será número. Número de comentários é apresentado. Então, podemos exibir o produto na página inicial ou não, e será um booleano. E então a data criada, que será uma data de string. E também aqui precisamos importá-lo ou exportá-lo. Então precisamos exportar este modelo para que possamos vê-lo em outros lugares do nosso projeto. Assim, podemos levantar também produtos. Então teremos produto e também categoria. Mas aqui temos que renomeá-lo não produtos, mas produto porque estamos dando uma classe apenas para um produto. Então teremos aqui um produto e categoria. Então agora vamos ao serviço e renomeamos tudo. Então primeiro precisamos ter produtos aqui. E também, será a mesma URL porque estamos dizendo a mesma URL para o back-end. E também aqui teremos um produto para o prefixo ou sufixo desta URL. E então vamos comentar todas as coisas para que possamos começar um por um. Então, o que precisamos agora, temos produtos, então vamos fazer, obter produtos. E será exatamente o mesmo, mas o que foram devolvidos matriz de produtos que não foram para retornar para nós apenas categorias, mas ele vai retornar um produtos. Então temos aqui um produto e o produto. E então não precisamos dessas categorias para que possamos removê-lo porque não é mais usado. Ok, então agora o nosso serviço está pronto. Nós só precisamos ir para o nível do aplicativo e, em seguida, podemos usar este serviço. Então eu vou aqui para o aplicativo, para a lista de produtos. E como você se lembra, nós fizemos isso também em categorias. Então vamos fazer isso rápido. Primeiro, preciso ligar para o serviço de produtos. Então eu vou dizer aqui produto ou serviço de produto privado, que será do tipo produtos de serviço, como você vê, ele já é conhecido, então e é importado do espaço de trabalho e o nome que temos aqui um problema, É ES lint problema, então precisamos chamar isso como admin e, em seguida, criamos um método. Podemos chamar-lhe este ponto obter produtos. E vamos implementar este método. Então eu vou para baixo, digo privado, sublinhar obter produtos. E neste bom produto, eu vou dizer este ponto produto serviço que recebe produtos como vimos anteriormente, e, em seguida, assinar esta biblioteca ou para este observável como vimos. E, em seguida, os produtos retornarão na chamada de volta da assinatura. E então eu posso dizer este ponto produtos, a variável que eu defini aqui será também de produtos. Então eu estou de lado tinta, este produto para os produtos que retornaram do backend. Então, depois disso, Vamos salvá-lo e tentou atualizar nosso aplicativo. E vemos que temos todos os dados que precisamos. Certo, nem tudo é perfeito, mas vamos um por um. Ok, o nome está bom. A imagem, precisamos substituir a imagem. Como veremos na próxima palestra, o preço está bem, tudo bem. Stock, o número em estoque está bom. Ambas as categorias são objeto. Então precisamos achar um jeito de vir assim. Então, se você quer saber o que está retornando do back-end, no front-end, você não tem capacidade de usar o carteiro, então você pode ir para a rede e verificar suas chamadas. Então, por exemplo, aqui eu chamei a categoria ou produtos. Então produtos, eu tenho todos os produtos. Aqui. Eu vou aqui novamente, e eu vejo que a categoria é, objeto, não é como um campo. E esta categoria, como nos lembramos, fizemos população para esta. Então aqui temos a categoria e, em seguida, o nome deles. Então, no HTML do nosso aplicativo ou do próprio modelo, temos que dizer que não vamos ter apenas a categoria, mas o nome do ponto da categoria. Então é por isso que estou dizendo para manter a mesma digitação. Agora, eu não posso ver o nome do ponto da categoria e eu não tenho nenhum erro ou erro. E como vemos aqui, essa categoria veio exatamente como queremos. Certo, e o encontro? A data, como vemos aqui, é formatada a partir do formato que vem do banco de dados. Para corrigir este formato, podemos usar algo em Angular chamado pipe. E este tubo, se você usá-lo, nossa busca por ele na biblioteca Angular, você vai ver como nós usá-lo. Então, se você descer, você pode ver as opções ou o exemplo de como podemos usar isso. Você tem que fornecer uma cadeia de data e, em seguida, ou objeto. E então você diz Este sinal e, em seguida, data e, em seguida, você especifica a opção. Há muitas opções para formatar as datas em Angular, então todas elas estão listadas aqui. Ou você também pode usar um desses formatos 3D como dia longo, dia inteiro, tempo curto, tempo médio. Há muitas opções para mim. Eu vou usar este que é chamado gráfico. Então, como podemos usar isso? Então nós podemos ir aqui e então nós colocamos esta coluna e então nós podemos dizer, e eu quero ter um encontro com formato curto. E depois de salvar e tentar isso em nosso aplicativo, ok, os jogos de formato de data, realmente perfeito. Então, dessa forma, formatamos a data. A próxima palestra. Será, como eu disse, mostraremos a imagem que está vindo do back-end. Então vejo você na próxima palestra como implementar esta imagem. 106. Mostrar a imagem de produtos na tabela: É muito útil que o usuário possa ver também a imagem de seu produto na tabela. Então é muito simples como podemos fazer isso. Se formos para os campos, você se lembra que temos a imagem de cabeçalho e, em seguida, estamos pegando os dados da imagem. E a imagem vem como você é L, como vimos como ela vem do backend. E se quisermos ter uma imagem aqui, nós apenas substituímos esta parte aqui com imagem. E esta imagem terá fonte e também alternância quando não puder ser exibida. Então, se quisermos usar a imagem do produto, só precisamos fazer isso e colocar a imagem do produto dentro daqui. Então vai funcionar. Mas eu prefiro sempre duas correntes que assim você não precisa usar esses suportes aqui. Então você não precisa usar esses colchetes, então você pode substituí-lo por colchetes como este. Então, isso será como a forma de ligação ou ligação de duas vias em Angular. Então ele vai dizer que a entrada da imagem ou a imagem será uma fonte e ele vai aceitar variáveis. Então ele vai aceitar variáveis angulares, não, por exemplo, pontos fortes, como sabemos no HTML normal. Então aqui temos a imagem do produto. Quando salvarmos, então veremos que obtemos as imagens. Mas, como vemos aqui, eles são muito grandes porque eles não são estilizados da maneira certa. Então, o que podemos fazer, você também pode criar algumas unhas. Então você pode fazer upload de imagens pequenas. Então você precisa no back-end para criar um campo que é chamado de miniatura. Ou você também pode fazer aqui, redimensionando por estilo. Então você vai aqui e diz estilo. Por exemplo, ele terá uma largura que será 100%. Então eu vou com este caminho, que é muito simples, é claro. Você também pode fazer upload de pequenas imagens onde há algumas unhas com um tamanho fixo e você vai vê-los como ele parecia bem aqui. Então, por exemplo, eu tenho este produto com muito alto, então eu preciso mantê-lo dessa maneira. Mas você também pode criar um quadrado imagens. Então este é apenas um exemplo para você. Você pode fazer o que quiser e perfeito para você, para sua exibição de mesa. 107. Crie modelos de formas de produtos: Ok, nesta palestra vamos ver como podemos criar o formulário para adicionar um produto. Então, se você se lembra que tivemos a mesma categoria, estamos clicando em você, então estamos indo para a forma de categorias e que será aqui formulário para adicionar um produto. Então não podemos usar a mesma coisa. Podemos começar como um modelo a partir de categorias formulário. Então, podemos copiar este, as categorias formam e colados em forma de produtos também. Mas precisaremos de um campo diferente. Vamos corrigir todos os erros que temos aqui. E também vamos usar um novo controles, como um interruptor, como uma caixa de rich text, área de texto e seletor. Isso é exatamente como você viu na demonstração no início das seções do painel de administração. Então teríamos o mesmo brinde que será a conformação para adicionar produto ou atualizar um produto. E também aqui vamos ter um guarda. E a guarda terá um cabeçalho, e este cabeçalho estará aqui, produto. E também aqui o nosso produto. E aqui temos produtos também. Então eu vou fazer isso como um rápido, porque nós explicamos tudo nas categorias. Então tivemos aqui também o modo de edição. Então, precisamos definir uma variável que é chamado de modo Editar. E este modo de edição terá, por exemplo, no início do falso valor, temos uma barra de ferramentas e a barra de ferramentas terá também, esquerda e direita. Ele terá também o modo de edição, atualizar ou criar um botão para onsubmit e um botão para cancelar. Exatamente o mesmo que fizemos com as categorias. Ok, vamos agora para o trabalho sério. Onde está, por exemplo, o grupo de formulários? Então eu preciso definir também, um grupo anterior neste componente, como fizemos com categorias. Neste caso, precisamos definir outra variável ou outro membro da classe, que é chamado de formulário. E este formulário terá um tipo de grupo de formulários. E para construir este grupo de formulários, precisamos usar um serviço que é chamado de construtor de formulários. Então teremos um privado aqui, e privado será um construtor de formulários. E este construtor de formulários é do construtor de formulários de tipo. E aqui podemos ter um método privado. Podemos defini-la. Então podemos ver esses pontos na forma, por exemplo, nós não fizemos isso na categoria, mas eu estou mostrando a vocês como obter avançado passo a passo. Então aqui estamos colocando tudo em e g em qualquer, como ao inicializar o componente. Quando eu clicar em Adicionar novo, então este componente será inicializado. Então eu estou fazendo aqui o formulário, mas agora eu estou tornando-o mais compreensível. Então eu vou agrupá-lo em um método e colocá-lo que é chamado nele o formulário. Portanto, temos que definir um método privado que é chamado em sua forma. E dentro deste formulário inicial, precisamos construir o formulário em si. Então eu diria que este grupo de pontos construtor de forma ponto. E então começaremos a construir nosso grupo. Então temos aqui de dizer que esta forma é igual ao grupo que vamos construir agora. Assim, os membros deste grupo serão exatamente os mesmos dos campos do próprio produto. Então, como você se lembra, nós tínhamos um nome, nós temos o preço, nós tínhamos, por exemplo, categoria, nós também tínhamos, imagem e imagens. Vou listá-los, todos eles aqui e então vamos explicá-los rápido. Então eu não quero digitar para não perder tempo para você. Ok, então como você vê aqui, nós temos o nome que é obrigatório e também marca é necessária. Também o preço também é obrigatório categoria coisa em si, que será vindo também do backend ou como podemos publicá-lo no back-end. E será um seletor, como uma lista que você pode selecionar através dele e procurar por uma categoria, como veremos mais tarde. E contar na descrição do estoque, descrição rica que não é necessária imagem. Eu acho que podemos fazê-lo agora para como um autor necessário e também é destaque. Podemos colocá-lo também, não é necessário. Então, ao mesmo tempo, precisamos construir esses itens ou este formulário controles no modelo. Então, a partir da categoria que já tínhamos nome, por exemplo, mas não precisamos de ícone, não precisamos de cor. Precisamos substituí-los pelos componentes certos. Assim, por exemplo, o nome seria ficar o mesmo e também marca. Será também uma entrada de texto e podemos substituí-lo também. Então podemos dizer marca aqui e também uma marca aqui. E também podemos ter aqui tudo como uma marca. E aqui precisamos criar como, por exemplo, o atalho como falamos sobre isso anteriormente. Então podemos fazer isso assim. Nós dizemos obter forma de produto e este ponto forma pontos controles. E então teremos aqui, não ficando bom é quatro, mas os produtos formam. Então este é como o nosso modelo, então temos que usar esse modelo toda vez que criamos. E uniforme. Eu expliquei tudo em detalhes, como criamos cada passo desse formulário na seção de categorias, ok, colocamos isso com uma marca e também, precisamos de um preço. Então pagar preço, não será uma caixa de texto , será um número importante. Então, um número de entrada, como você vê aqui, podemos usar algo chamado número de entrada. E este número de entrada do Prime NG é tão grande. Está a dar-te muitas, muitas, muitas opções. Vou usar este que é chamado sem agrupar. Então primeiro precisamos importar o módulo. Como sempre, eu vou para o módulo do aplicativo, importar o módulo de número de entrada e, em seguida, colocá-lo aqui novamente em nossos módulos u x. E então podemos usar ou usar exemplos, então podemos dizer fonte. E se vamos classificar, vamos ver sem um agrupamento, então precisamos usar este. Então, de volta ao nosso modelo. Não precisaremos de uma cor, mas precisaremos aqui de um preço. Então, e como nós concordamos antes, nós não vamos usar ng-model como bidirecional como entrada e saída ao mesmo tempo? Não, porque temos aqui um controle de formulário e, em seguida, este será um nome de controle de formulário para ele será um preço e o rótulo será um preço aqui. Bem aqui preço e precisamos também preço aqui. Então, quando formos verificar, veremos que tudo está correto. E tem aqui algo chamado ID de entrada. Podemos copiá-lo e fazê-lo como um preço também. E este campo é obrigatório. Então, precisamos também adicionar algum aviso de validação para o usuário quando ele colocar ou ele não colocar qualquer valor dentro dele. Então, vamos dizer que este produto formulário ponto preço inválido e é enviado, em seguida, me mostrar erro que o preço é necessário. Também esta é enviada variável. Podemos defini-lo também no componente. Então dizemos aqui é submetido no início é uma falsa. Então vamos ver agora o que temos na frente. Então, depois de salvar tudo, eu vou para a frente e novamente, eu vou ver esse produto publicitário. Eu tenho você criar botão, botão Cancelar. Temos marca e preço. E como você vê aqui, o usuário não pode colocar letras, mas ele só pode colocar números. Então aqui precisamos ter uma categoria, categoria. Eu prefiro usar a lista, como vou mostrar-lhe mais tarde, uma lista suspensa e este menu suspenso, É também vem como filtro componente, como veremos na próxima palestra. Vamos sentir os simples. Então eu vou adicionar também a contagem é tok e descrição. Então contar em estoque será novamente um número. E este número será lei, não perto deles. Estará em uma nova linha. Então eu coloquei caso também para criar uma nova grade que estará sob esta parte. Então, como você vê aqui, nós temos todos eles agrupados nesta grade. Mas agora podemos criar uma nova, como uma nova linha. E esta linha, porque este formulário campos. Então podemos copiar a mesma oferta, o preço e dizemos a contagem em estoque. Então eu os substituí aqui. Então temos agora contar em estoque para tudo, e tudo é definido como número de entrada. Então, quando atualizarmos, veremos que nosso componente é atualizado com um culto em estoque, mas está cheio. Assim, também podemos definir um pequeno, pequeno forro. Então podemos dizer aqui que eu quero apenas a coluna 4. Então eu preciso ter isso como um formulário colunas como vemos aqui. Mas também, você pode definir um macarrão de maneira diferente. Então você não tem que criar uma grade, mas você pode dizer também que eu também posso ter uma coluna, mas será na riqueza. Você pode ter aqui quatro e 12, mas quando não se encaixa, ele irá automaticamente para uma nova linha. Você vê aqui. E é como se tivéssemos definido uma nova linha. Então isto é o que eu vou fazer com uma descrição. Então teremos aqui 12 colunas, quatro colunas para o culto é conversa. E também, teremos aqui perto dele para as categorias. Então podemos sentir isso também, mas não vamos usar número de entrada quatro categorias. Nós usaríamos o menu suspenso como veremos na próxima palestra. Então podemos renomear esta parte como categoria e deixá-la tão vazia como você vê aqui, eu substituí tudo como categoria. Nós colocaríamos aqui a entrada da categoria ou o drop down na célula, como veremos na próxima palestra. E também aqui eu tenho uma descrição e descrição será uma área de texto, e podemos acrescentar também isso. Então, vamos ter certeza de que tudo está bem. Temos o seu nome, a contagem de prémios da marca ainda está na categoria vazia. Vamos nos sentir com sua categoria e depois temos uma descrição. E a descrição será uma área de texto. E esta área de texto, também podemos encontrá-la. Então, quando eu vou para a área de texto de entrada, vamos ver módulo de área de texto de entrada. Podemos importá-lo também e colocá-lo aqui com nossos módulos. E nós temos aqui os módulos UX também, e nós importamos. E então veremos as opções do. Então aqui temos um rótulo de fluxo. Não, não precisamos disso, embora o tamanho, podemos usar o padrão. Então eu posso dizer que talvez possamos usar este aqui. Volte ao nosso modelo e coloque a descrição aqui. E damos a ele um nome como um nome de controle de formulário, como fazemos sempre para não perder isso. Então temos aqui o nome de controle de formulário de área de texto será a descrição em si. Então, salvamos isso, vá para o nosso aplicativo. Veremos que temos uma descrição. Aqui temos a descrição. Você também pode definir altura para ele. Por exemplo, isso é como pequeno. Você pode torná-lo maior. Eu acho que Prime NG fornecer que, como você vê aqui, temos um linhas e colunas. Então você também pode definir isso. Então podemos adicionar que duas linhas e descrição que podemos fazer cresce como sete. Então salvamos. E voltaremos para a inscrição. - Legal. Temos aqui as linhas, e depois disso teremos uma descrição de alcance. Alcance descrição, vamos explicar que também termina palestra separada porque é um bico. Podemos adicionar aqui também é destaque campo. Então, se você se lembrar, podemos usar é bandeira em destaque. Então, podemos usar também um interruptor, e isso está localizado aqui é chamado interruptor de entrada. Assim, podemos definir nosso produto se ele está em destaque ou não. Então também podemos importar esse módulo. Vá aqui, importe o módulo também, e vá importar switch. Então podemos colocar isso aqui. E então podemos usar as entradas do interruptor de entrada, que serão exatamente as mesmas e esta. Então teremos uma nova linha. Podemos adicioná-lo após a categoria, como perto de sua categoria. Então podemos adicioná-lo aqui. Então temos aqui essa categoria temos também outras colunas peform. Temos aqui, quatro colunas e substituir tudo por suas características. Então precisamos especificar que é destaque é necessário para que não precisamos da validação. Será o suficiente assim. E então temos o controle em si. Podemos copiá-lo e depois colocá-lo aqui. Então temos aqui o interruptor de entrada, e podemos remover este modelo NG porque estamos usando o nome de controle de formulário. Você sempre, você precisa verificar se este apoio que. Então exatamente o seu nome de controle de formulário suporte para o nosso componente, porque temos construção desses controles dentro de um grupo e você não pode usar ng-model dentro do grupo de formulário, caso contrário, você receberá erro. Portanto, é melhor usar um nome de controle de formulário neste caso para formulários reativos ou diretivos. Então vamos verificar se f é tudo o que está querendo. - Legal. Temos aqui é o nome em destaque, marca e descrição. Na próxima palestra, vou mostrar-lhe como podemos pegar categorias e como vamos pegar os dados do banco de dados também. Então vamos ver aqui as categorias reais que estão listadas aqui. 108. Dropdown para categorias de produtos com filtro: Ok, nesta palestra vamos ver como criar a categoria suspensa com um filtro. Então eu posso filtrar e selecionar as categorias que eu quero e quais são armazenadas no meu banco de dados. Primeiro de tudo, precisamos ter um componente suspenso. Ele está disponível também no NG principal como um adereço para baixo se você vê-lo aqui. E então você terá muitos exemplos. Vamos selecionar o exemplo mais simples. Mas primeiro precisamos importar o módulo de caiu primeiro. Então vamos aqui e importamos o módulo drop-down e, em seguida, adicioná-lo ao nosso código. Já o fiz para podermos seguir em frente e dar o exemplo. Então temos aqui um p opções suspensas. E algumas cidades, como cidades, virão do backend. E nosso back-end será suas categorias em si. Então vamos copiar esta parte e ir aqui e colá-la dentro da nossa etiqueta. Então nós já criamos essa categoria, e nós temos aqui sua categoria é necessária e então nós colamos aqui, mas nós não temos aqui opções ou cidades. Temos categorias. Assim, essa lista de categorias será colocada na entrada, que é chamado de opções. Assim que drop-down aceitar entrada chamada opções, que serão os dados que serão preenchidos no abandonado. E também o modelo. Nós não precisamos modelo NG, como dissemos anteriormente, precisamos apenas ter nome Form Control. Este nome de controle de formulário será categoria. Então, como vemos aqui neste exemplo que ele definiu uma variável chamada cidades. E as cidades tem matriz, nossa matriz que é nome e código. E é claro que você pode definir qualquer objeto ou qualquer estrutura que você quiser. Então vamos fazer isso primeiro. Vamos definir a categoria que será categorias matriz. Vamos definir categorias que serão uma matriz. Então, por enquanto, será um array vazio. E como ele fez aqui, temos em cidades como um array codificado, mas vamos pegá-lo do banco de dados. Para isso, precisamos do serviço de categoria que criamos anteriormente, e temos um método lá que é chamado getCategories. Então, primeiro, depois disso, depois de reinicializar o formulário, dizemos este ponto obter categorias. Então vamos obter todas as categorias do banco de dados e exibi-los para o usuário para ver qual deles é certo para ele. Então temos aqui um método privado. Nós chamamos isso de GetCategories. E aqui vamos usar o serviço de categoria. Então também precisamos chamar o serviço de categoria. Então dizemos aqui categorias privadas serviço. E este serviço categoria será tipo de serviço de categorias, que já está definido aqui. Assim, podemos importá-lo automaticamente. Então, aqui temos serviço de categoria, e então vamos dizer que este ponto categoria ponto serviço recebe categorias. E então, como você se lembra, nós temos aqui como um assinante, para que possamos assiná-lo. E então vamos entrar no callback as categorias. E então abrimos e uma função. E então dizemos que essas categorias de pontos serão categorias. Então nós carregamos a matriz de categorias aqui. Em seguida, vamos dizer que as categorias matriz tem campo. Então vamos salvar tudo e tentar isso. Veremos que realmente, temos toda a lista. Então está tudo bem, está funcionando perfeitamente. Então nós temos aqui agora as categorias que já criamos, e então nós as temos quando criamos uma nova categoria para que o usuário possa selecionar entre elas. Mas vamos adicionar mais recurso como podemos adicionar um filtro para que o usuário, se tem uma longa lista aqui, não tem que procurar manualmente para ele, ele pode digitar algo e ele vai obter os dados filtrados. Então não podemos fazer isso muito facilmente como vemos no exemplo que ele tem aqui, algo como para filtrar. E um deles é filtrar e limpar o ícone. Então, a diferença disso que ele adicionou opção e outra entrada para essa filtragem, que é chamado de filtro através. E ele disse que filtrado através, em seguida, filtrar por nome. Então ele também pode filtrar por algo. Você pode filtrar por nome, por ID. Assim, o usuário irá, quando ele digitou algo, os dados serão filtrados por esse valor. E também, ele criou um titular de lugar. Também podemos copiá-lo. Então, primeiro podemos copiar esta parte e ir para o nosso formulário de produtos e adicionar essas propriedades. Então temos aqui leilões nome de controle formulário e ele filtrado é através de filtro por nome e, em seguida, mostrar claro através de espaço reservado selecionar categoria. Então vamos guardar isso, tentar. E então abrimos, bom, temos o filtro pronto. Então nós temos aqui para celular, eu quero carros. Então você vê que nós obtemos os resultados imediatamente. 109. Editor em HTML para descrição detalhada do produto: Às vezes precisamos mostrar ao usuário alguns detalhes e liberdade para criar seus detalhes de produto. Como vemos aqui que podemos também com Prime NG, descobrir algum editor que é chamado de editor de caixa de duto alcançado. Isso chegou ao editor do Xbox. Você também pode estilizar o seu texto. Então, por exemplo, eu quero ter títulos. Eu também quero ter texto subjacente para que possamos dar ao usuário a capacidade colorir e fazer muitas coisas no texto e a descrição detalhada do produto. Caso contrário, acabaremos por Adicionar campo para cada peça especial ou mastigar que o usuário tem que entrar. Mas agora podemos dar a liberdade ao usuário com esta caixa de texto grande alcance. Então, vamos adicioná-lo ao nosso formulário de produto e ver como trabalhar com ele. Então, quando vamos para a documentação deste editor, nós rolamos para baixo também. Precisamos de um módulo editor. E este módulo editor vamos e importado no módulo de aplicação como fazemos sempre para cada módulo em energia primária. E depois de fazer isso, precisamos importar ou usar um componente que é chamado editor. E aqui o texto, que será como HTML e um estilo se você tiver algum estilo específico para ele. E então você retorna esse texto em seu back-end ou para sua API quando você envia um novo produto. Mas o que queremos não é com nenhum modelo, mas com nome de controle de formulário, como eu disse, estamos usando formas reativas. Então vamos aqui novamente para a nossa forma. Vamos criar um novo campo e novo ao vivo. Vamos dar-lhe uma aula. E esta classe será também 12 colunas com um rótulo e será o editor dentro dele. Então eu criei isso já aqui. Então nós temos aqui uma descrição rica como exatamente como nós definimos aqui na forma. E também temos o próprio editor e o nome do Controle de Formulário será alcançado descrição. E eu criei um rótulo que é chamado de detalhes do produto. Então, quando salvarmos isso e vamos para a nossa aplicação e veremos que estamos faltando algo porque veremos que esta parte não está funcionando para a nossa aplicação. Primeiro, ele tem uma dependência que é chamado uma pena. E aqui está uma grande chance para nós ver como podemos incluir bibliotecas externas, bibliotecas JavaScript para aplicação Angular. Então, se você descer aqui para a documentação no final, você verá que esta é uma dependência. Quill editor é um editor que você pode instalar com o npm install, e então você precisa importá-lo. Então primeiro vamos instalar esta parte. Então vamos, abrimos um novo terminal e depois dizemos npm instalar Quill seguro. E depois que ele foi instalado com sucesso, precisamos importar as bibliotecas. Então, primeiro precisamos importar script no arquivo Angular JSON. Se você se lembra, temos um arquivo JSON angular que estamos configurando os aplicativos dentro dele. Então, vamos configurar a obrigação de administração, não outros aplicativos, mas apenas aplicativo de administração em scripts. Podemos adicionar esta linha. Nós não temos que ir para step up porque nós temos o módulo nó no mesmo nível de Angular JSON. Então não temos que subir um nível ou dentro de uma pasta. E também, há dois estilos arquivo que precisamos também para importá-los. Então aqui, depois que temos os estilos, depois que estilos, podemos importar este CSS núcleo e também o outro que é chamado Snow CSS. Então, depois de ter salvo todas as coisas que as alterações foram não entraram em vigor até que você reinicie seu aplicativo. Precisamos reiniciar o servidor porque temos JSON angular alterado. E aqui vou reiniciar meu aplicativo. Está bem, foi reiniciado, mas ainda reclamando de algumas flechas que não consertámos anteriormente. Então vamos consertá-los e fazer tudo funcionar. Portanto, temos um problema que este onsubmit e OnCreate ou próprio conselho não estão definidos, então precisamos defini-los. Então eu vou copiar esta parte, ir para o componente em si, código de componente. E eu vou dizer em submeter um. E também temos em cancelar. Então, definimos ambos os métodos. Não temos mais erros. Em seguida, voltamos para a nossa aplicação. Verificamos como temos, como eles são cada editor. É muito grande. Agora temos tudo. Você pode digitar, tudo o que quiser. Então você pode ter ele está estilizado em seu front-end já como um usuário, exatamente tê-lo para o front-end. Então vamos ver mais tarde como podemos exibir este HTML no aplicativo front-end em qualquer loja. Assim, o usuário tem liberdade para digitar o que ele quer aqui. E então vamos ver mais tarde como podemos exibir este HTML que é exibido aqui, ou que o usuário usou no detalhe do produto. 110. Campo de upload de imagem de produtos com a exibição de miniatura: Neste curso, e para o produto, temos dois tipos de imagens. Primeiro, a imagem principal, onde exibirá a imagem do produto. E também, temos uma galeria. A galeria onde eles usam quando ele vai para detalhes do produto, ele não pode ver várias imagens do produto. Então, primeiro vamos criar agora a imagem principal. E não só isso, veremos também uma exibição. Quando o usuário carregar uma imagem, ele dirá uma pequena tela. A imagem que ele enviou para ter certeza de que tudo é carregado bem para o upload de imagem, não vamos usar nada específico. Vamos usar HTML padrão. Então, primeiro de tudo, eu vou ter um div como este. Estará sob a descrição também. E aqui, dentro disso, terei também um rótulo e darei, por exemplo, como nome, imagem principal. E então teríamos uma entrada, e esta entrada será tipo de arquivo. Então vamos ter aqui um tipo que é chamado arquivo. Então eu posso fazer upload de arquivos através desta entrada. E para estilizá-lo, veremos como podemos torná-lo mais bonito. Vamos adicionar alguma classe e, em seguida, vamos dizer que este tipo de arquivo, é HTML padrão, está aceitando toda a imagem. Portanto, não podemos aceitar nenhum outro arquivo. Aceitaremos apenas imagens. Ok, bem, vamos salvar e tentar o que temos aqui. Então, depois que o aplicativo é atualizado, vamos ver que temos um campo aqui. Mas olha, é feio. Ele não tem essas imagens principais e você sabe, como o rótulo não está no topo e o upload do arquivo estará aqui. Então eu aconselharia você a adicionar uma classe para essa entrada, que é chamado de texto de entrada. Consegui isso inspecionando as entradas M e G principais. E eu tenho essa aula. Então aqui temos p texto de entrada quando você salvar, ele terá mais estilo de vida. Estaria localizado exatamente sob o rótulo e tudo ficará bem. Ok, legal. Então vamos implementar o upload. Então, quando eu selecionar alguma imagem do meu computador, então eu preciso ter alguma exibição aqui que depois de eu carregar a imagem, ela seria exibida aqui. Então, como podemos fazer isso, ok, primeiro de tudo, precisamos detectar a imagem ou o arquivo que é carregado. Então eu vou dizer aqui que quando eu mudar este, este campo GF mudança, então eu vou ter um método que é chamado no upload de imagem, por exemplo. E este upload de imagem vai passar para mim os dados do arquivo que eu carrego através de uma valiosa variável adicionar específica, que é chamado evento. E você deve colocar esses dólares atrás disso. Então você obteria os dados no caminho certo da imagem. Então, podemos implementar este método. Vamos para o arquivo TypeScript e, em seguida, vamos dizer que aqui temos no upload de imagem e isso terá evento como vimos. E então nós vamos ter o arquivo em si e exibido no véu ASAM, a própria miniatura. Será sob isso, por exemplo, sob esta entrada, teremos como um div, como sempre como div pequeno. Esta div terá dentro dele e imagem. Então podemos ter aqui uma div, e dentro desta div temos imagem. E a fonte desta imagem será a imagem que carregamos. Então precisamos preencher uma variável que é chamado de exibição de imagem, por exemplo. E isso será como entrada para a imagem. Portanto, devemos colocá-lo entre parênteses. Então precisamos definir uma variável que é chamado de exibição de imagem, que irá pegar os dados do arquivo que nós carregamos e colocá-los dentro desta imagem. Então vamos fazer isso. Nós definimos uma variável, e esta variável pode ser uma string ou um tipo que é chamado de buffer de matriz. E eu vou lhe dizer mais tarde o que é buffer array e por que nós temos isso. By the way, vamos corrigir este linting que temos aqui deve tê-lo como administrador porque não podemos nomeá-lo assim. Então temos formulário de produtos de administração. Ok, e então no upload da imagem quando este evento aconteceu, eu receberia um arquivo do evento, e este arquivo será definido. Vou buscá-lo do evento. Então aqui temos, por exemplo, evento. Mas vamos ver primeiro que evento está voltando para mim. Então, quando eu for aqui, eu posso consolar o registro. Eu quero sempre rastrear as coisas que eu preciso entender por que eu vou fazer as coisas. Então vamos salvar isso e ir para o nosso aplicativo e tentar fazer upload de uma imagem. Então nós temos aqui uma imagem, eu tê-lo no meu PC, e então eu vou ver esse evento vem com um monte de propriedades. E as propriedades que preciso são boas para Deus. E então algo chamado arquivos. E esses arquivos contêm meu arquivo que eu enviei. Então, vamos voltar. Podemos remover isto. Não precisamos mais dele. Podemos então definir uma constante como vimos um arquivo. E essa constante terá destino de ponto de evento. E então esses alvos, como vimos que ele também tem dentro dele arquivos. E esses arquivos, precisamos pegar apenas o primeiro elemento porque ele está vindo sempre com matriz. E precisamos pegar apenas o primeiro elemento dessa matriz, como vimos aqui. Então aqui ele tem um raio e precisamos apenas do primeiro elemento. Então, como sempre, se há algo dentro do arquivo, então precisamos fazer algo. Se não, então não faremos nada. Então temos que ter certeza de que o arquivo está certo. Em seguida, precisamos colocar o conteúdo do arquivo dentro da nossa variável, que é chamado de visualização da imagem como um dado. Então, como podemos ler esses dados em JavaScript, há algo chamado FileReader. E este leitor de arquivos, podemos ler dados através dele. Então, podemos criar uma nova classe de FileReader. E este leitor de arquivos através dele, eu posso ler sempre os dados que eu quero. Então, como podemos ler, podemos dizer leitor de arquivos, ler como URL de dados, e então você passar o arquivo que você deseja. Então nós temos aqui carregado o arquivo, nós o temos. Em seguida, criamos um FileReader e encontrar leitor leu como URL de dados, o próprio arquivo. Agora eu tenho esse arquivo em si como um dado dentro do leitor de arquivos. Como podemos dizer algo como esta visualização de imagem de ponto ou exibição de imagem terá os dados em si. Portanto, este FileReader vem sempre com um método que é chamado onload. Então, quando carregamos nossos dados para este leitor de arquivos, fazer algo e isso, nós podemos defini-lo. Ele tem um retorno de chamada, mas de maneira diferente , tem um método. E então essa chamada de volta, você chama assim. E dentro desse método, você pode fazer o que quiser. É um evento. Então, não podemos fazer essa exibição de imagem de ponto e, em seguida, o resultado de ponto FileReader. E dentro deste resultado teremos nossos dados de arquivo. Assim, desta forma, você sempre pode ler o arquivo como um dado, colocá-los em alguma variável e passá-los para a entrada da imagem ou a tag HTML da imagem. Às vezes, se você colocar isso depois de ler os dados ou o FileReader, ele não funcionará. Então, é melhor colocá-lo antes. Em seguida, o evento será executado depois ler os dados porque ele vai saber que há algo no lote porque é evento e deve ser definido antes de ler os dados. Então vamos guardar isso e tentar. Talvez possamos tentar fazer upload de algum arquivo. Então eu vou aqui novamente para o meu arquivo. Eu seleciono um arquivo que eu já tenho. Como você vê aqui, eu tenho 0 é indefinido. Por quê? Porque eu tenho um problema aqui. É o arquivo, não o arquivo. Então deve ser arquivado como você se lembra, nossa matriz. Então eu tive um erro aqui e consertei. Vamos carregar novamente o arquivo. Voltamos aqui, vamos ver, ótimo, temos a imagem é carregada. Então, como recapitulação rápida, enviei o arquivo. Eu criei um FileReader, que está chegando JavaScript padrão. Vamos aplicação web ler o conteúdo dos arquivos. Então, aqui eu carrego o arquivo, que eu enviei para o FileReader e, em seguida, eu atribuo à exibição da imagem. Mas como você vê, é uma grande imagem. Então talvez se eu carregar uma imagem maior, vai demorar mais do que o espaço. Então vamos limitar essa imagem. Então eu iria aqui, talvez eu pudesse fazer algumas coisas usando minha experiência em energia primária. Vou dar-lhe, por exemplo, uma aula. E esta classe será chamada coluna P, por exemplo, para duas colunas. E esta imagem terá estilo, que será como largura 100%. Então, seria 100% de seu pai. Então, vamos guardar isso. Volte novamente para a nossa aplicação. E então tentamos fazer upload do arquivo deles. Novamente. Nós vamos aqui. Pessoal, nós temos um muito bom, então vamos colocar um pouco de espaço entre a imagem e o InputField porque é feio assim. Como você se lembra do, nossas classes, classes de extremidade privilegiada, podemos ter margem, fundo, margem, topo. Então podemos fazer o que quisermos sobre a margem. Então eu quero colocar a margem no topo dois. E também se você notar que há, porque usamos esta coluna, ele tem algum preenchimento. Então, podemos fazer também P preenchimento esquerda 0 por exemplo. Então aqui podemos salvá-lo e depois tentamos de novo. Fazemos upload de um arquivo e vemos se tudo funcionou bem. Perfeito. Temos agora com o arquivo e estamos prontos para enviar este arquivo para o backend, e então ele será carregado através de nossa API back-end. Na próxima palestra, veremos como enviar todos esses dados para criar um produto no banco de dados. 111. Envie um novo produto como FormData: Ok, nesta palestra, vamos ver como postar um novo produto ou adicionar um produto ao banco de dados. Então, se você se lembrar, nós criamos o formulário, então nós vamos fazer um Criar. Aqui as coisas são um pouco diferentes da categoria. Por quê? Porque não vamos postar os dados como JSON. Vamos postá-los como um formulário de dados, como veremos agora, isso é porque temos um arquivo que é a imagem. Portanto, devemos postar os dados como um tipo de dados formulário, não como um JSON. Porque se você se lembra, quando estávamos trabalhando no backend, eu estava mostrando que estamos postando ou colocando um produto no banco de dados, mas com forma que o formato não com o JSON como os outros. Assim, você será capaz de fazer upload de imagens com seus dados de formulário. Então vamos seguir em frente. Então. Quando criamos, quando clicamos neste Criar, vamos construir nossos dados de formulário. Então vamos aqui e temos o método já, nós o definimos, que está onsubmit. Vou ver se tenho primeiro o formulário válido. Então eu digo se este formulário ponto, como o grupo de formulários que eu tenho é inválido, em seguida, retornar. Não faça nada de outra forma. Após esse retorno, vamos construir os dados do formulário, mas antes disso, precisamos validar o campo. Então, depois disso, se você se lembra, nós criamos essas notificações para que o usuário veja se ele tem alguns erros ou erros nos campos. Então, com base nesses campos obrigatórios que definimos aqui, criamos nossas notificações aqui. Então precisamos ativá-los, não férias. Então, antes de tudo, precisamos dizer que é submetido é verdade. Então, quando eu clicar em Enviar, eu tenho que dizer que o formulário enviado é verdadeiro. Então, sim, está submetido. Exatamente como fizemos com a categoria. Então, depois de salvarmos isso, tentamos novamente e, em seguida, eu tentei clicar em Criar. Então, depois disso, eu vou obter os erros de validação como você vê aqui. Agora que temos, vamos sentir esses dados e recebê-los e enviá-los para o back-end. Então, como podemos receber com esses dados como um formulário de dados? Primeiro de tudo, precisamos definir uma constante que é chamado de dados de formulário de produto e é um tipo é formado que formam gums de dados com um JavaScript básico no navegador. Então não é uma biblioteca. Não precisamos importar nada. Está dentro do JavaScript que estamos usando agora, então este formulário de dados, vamos passá-los para o serviço, que estará em um produto, e então vamos enviá-lo para o back-end. Mas como podemos preencher este formulário que o nosso primeiro, Então eu preciso mover os dados que eu inserir aqui nas entradas para produtos formulário dados. Nós apenas dizemos o produto formulário data dot append. Em seguida, especifico a chave que eu quero acrescentar e, em seguida, o valor dela. Por exemplo, vou dizer o nome e depois vou dizer o nome do controle. Então eu vou dizer que este ponto produtos forma, que já é que temos visto é este tem controle formulário nome ponto, ponto valor. Então, neste caso, eu especifiquei um nome de acréscimo para este valor. Lembre-se que esse nome deve ser exatamente como especificamos no back-end. Então exatamente os campos que especificamos aqui também. E você faz o mesmo para todos os campos. Assim, você tem que fazer uma marca e categoria e etc. Mas eu acho que é melhor fazê-lo em um loop, especialmente se tivermos vários campos. Então eu diria aqui talvez eu possa dizer para cada controle que eu tenho aqui, fazer essa chave e o valor dela, nós apenas dizemos chaves de ponto de objeto. Significa dar-me as chaves, não os valores disto. A forma dos produtos. Formulário do produto tem vários controles e eu quero tomar as chaves deles. E então eu disse, mapeá-los, como passar por todos eles. E então eu 2 vai me devolver a chave. Então, como dissemos, porque estamos revisando as chaves, que estamos aqui. Então, depois que eu pegar a chave, podemos fazer o que isso acrescenta para isso. Mas primeiro, vamos fazer o registro do console para ver o que está acontecendo aqui para deixar isso claro para você. Então eu vou dizer console log a chave em si, e, em seguida, log console para mim este formulário de produto ponto. E então eu especifico a chave que eu quero, e então eu obtenho o valor dela. É exatamente como dissemos aqui, como esta forma ponto-produto, nome do ponto, valor do ponto, exatamente o mesmo. Então aqui ele tem uma matriz e então eu vou lê-los. Então ele deve imprimir para mim agora essa chave, como nome e valor, e todos eles. Então, ao contrário de categoria, para marca , etc, eu volto para o aplicativo. Eu sinto que alguns são como um produto que podemos dizer. E então a marca é Brian Guan. E o preço é, por exemplo, 500 e a contagem em estoque é 20. E a categoria será, por exemplo, a beleza é destaque No. E então temos, por exemplo, alguma descrição e outra descrição detalhada, e temos uma imagem. Então eu vou fazer upload de uma imagem aleatoriamente. Nós o temos aqui. Então eu vou clicar em criar. Quando eu clico nisso e vemos que temos os dados exatamente. Então eu nomeei Produto 1 e, em seguida, marca, marca um. Preço é 500, categoria é categoria tudo isso porque estamos devolvendo o objeto tudo isso e também contar em estoque 20. Então é exatamente como precisávamos. Então, como podemos anexar aqueles que apenas passar, dizemos formulário de produto, data dot append. E depois dizemos essa chave. Então eu preciso de uma chave, como dissemos anteriormente. E, em seguida, estes ponto-produto forma. E então eu digo a chave em si, valor de ponto. Então vá todos os produtos formulário e, em seguida, enviar o valor do campo. Então dizemos este ponto, podemos definir um método que é chamado adicionar um produto. Exatamente como fizemos com a categoria, mas estes vão aceitar, aceitar os dados formulário de produtos depois de ter sido upended tudo dentro dele. Então vamos definir esse método. Seria exatamente o mesmo que definimos quatro categorias. Será exatamente como vamos usar serviço de produto, produto de anúncio, e então eu vou usar toda essa propriedade. Gosto do serviço de mensagens. Então vamos fazer isso rápido. Eu defini em um produto tanto estranho, então nós temos como adicionar categoria, mas precisamos em um produto e este produto de anúncio vai aceitar não produto em si, não o produto como um arquivo JSON, mas vamos aceitar dados de formulário. Então temos que dizer aqui, dados do produto será tipo de dados de formulário e, em seguida, eu vou usar um serviço de produto. Portanto, precisamos usar também o serviço do produto para adicionar o serviço que está criando um produto. E então eu passo os dados do produto para ele. Então, primeiro precisamos chamar o serviço do produto. Então nós temos aqui para que possamos dizer serviço privado, serviço de produto. Vamos para baixo novamente para a nossa adição de um produto. Então crie um produto. Temos de definir este método. Então eu vou novamente para o nosso serviço de produto. Então, temos aqui. Então, depois de irmos que, então aqui colocamos este método novamente e sem comentários e dizemos criar produto, não categoria. E aqui temos os dados do produto. E aqui ele aceitará dados do formulário. E então ele vai voltar para mim observável de um modelo de produto porque eu vou obter o produto em si. E aqui também um produto, e será um pedido de post, mas aqui será o URL para os produtos. Aqui temos as categorias que precisamos para corrigir isso. Então temos aqui para esse produto. E então eu passo os dados do produto para o pedido de postagem. É exatamente como fizemos com um homem do correio. Agora, eu estou construindo um dados de telefone e enviá-los para o back-end com o pedido HTTP post. Então vamos salvá-lo. E então continuamos em nosso front-end aqui nós temos a categoria nem ele vai retornar para mim um produto. E este produto, será um produto. E então temos o modelo do produto. Precisamos importá-lo novamente. E aqui precisamos de um serviço de mensagens. E o serviço de mensagens, se você se lembra, também é do Prime NG. Nós o usamos para exibir mensagens como Notification Service, que está localizado no NG principal. E então temos agora tudo está bem. Agora temos de definir isso. O Eu preciso exibir o nome do produto e, em seguida, eu tenho um temporizador para retornar. Após a adição bem-sucedida do produto, importamos isso, que é de Rx2. Sim, você especifica o tempo e espera até que ele seja executado ou passado, então você volta para a lista de produtos. E então precisamos ter aqui algumas correções como produto, como no texto das mensagens. Aqui temos produto não é criado quando recebemos erro e agora só falta o local. Então vamos voltar aqui e chamar método privado ou serviço privado, que é chamado de localização. E este local virá de um local em Angular. Então vamos tentar isso. E então eu vou preencher novamente meus dados aqui. Eu tenho marca, eu tenho marca um. E sempre fique de olho na rede aqui, então usaremos isso sempre. Então, quando você quer saber o que está enviando ou o que você está enviando para o front-end ou para o backend. É melhor usar a rede porque você verá claramente o que você está enviando para o backend aqui, 500, 23, e então nós escolhemos categoria e é destaque. Sim, podemos colocá-lo como está em destaque. E aqui descrição e aqui descrição detalhada. E depois mando uma imagem. Então, depois disso, nós submetemos, ok, ele está dobrando e dobrando novamente. Então, estamos recebendo erro na parte de trás e eu acho, e aqui eu abrir o saco e novamente para você mostrar o erro, ele está dizendo o valor do campo ID do objeto de conversão, objeto, objeto, categoria ID de caminho. Porque se você se lembra, nós imprimimos no registro do console essa categoria e nos dá uma categoria como objeto. Então eu preciso passar apenas ID de ponto de categoria. Não quero passar na categoria inteira. Podemos resolver esse problema muito facilmente. Portanto, não podemos apenas enviar a categoria em si para o front-end ou para o backend, tudo isso. Podemos enviar apenas um valor específico ou um campo específico. Porque se formos para a documentação de caiu, o menu suspenso em si, porque você sabe que estamos lendo o valor aqui a partir da lista suspensa. Assim, o valor da categoria na lista suspensa está dando todo o objeto da categoria que inclui ID, nome, cor, ícone. Agora, precisamos apenas da identificação. Então, precisamos dizer de alguma forma que por favor este controle e me dar apenas o ID que é especificado aqui, não todo objeto. Se você ir para soltar documentação no NG prime, vemos que temos algo de entrada com essas entradas, que é chamado de valor de opção. Assim, você pode definir um valor de opção ou uma chave do leilão. Então você não pode dizer isso, me dê apenas estas chaves aqui. Portanto, não podemos usar esse valor também de opção e especificá-lo como rótulo opcional aqui. Por exemplo, a opção rotulada, eu disse, escolha a partir do objeto de categoria, apenas o nome, e exibi-lo aqui. Mas qual será o valor, o valor desta opção. Então eu não posso dizer que o valor da opção será o ID, o ID dessa categoria que eu estou recebendo com categorias. Então, depois de salvar isso e quando estamos postando dados para o back-end, então vamos ver que a categoria não é mais objeto. Será também ID. Então, quando eu seleciono algo aqui, eu estou especificando apenas ID, não a categoria de objetos, tudo isso. Estou detalhando este ponto apenas para evitar, se você receber algum erro como este, então você pode saber como resolvê-lo. Então vamos preencher este formulário novamente e vamos clicar em Enviar. Então já sinto esses dados. Vou pressionar em criar. Quando pressiono o grau, digo que o produto não foi criado porque recebi um erro. Vamos checar a rede aqui. Então você vê que estamos enviando tudo bem. Eu vou aqui e vejo os cabeçalhos. Os cabeçalhos do pedido será um formulário de dados e tudo me parece bem. Tenho o nome, o preço da marca, a categoria. Olha, essa categoria vem também apenas como contagem de ID é descrição de conversa, descrição alcançada, tudo está bem, mas o campo de imagem está vazio. E a resposta está dizendo, nenhuma imagem lá dentro pede. Então precisamos ter de alguma forma a imagem também nos dados do formulário. Então é por isso que estamos usando dados formados. Por isso. Eu preciso dizer para formar que anexar para carne também imagem, mas o upending da imagem é maneira diferente de anexar campos normais. Não é assim. Não é como eu disse, anexar a chave e o valor dela. Então o valor de sua imagem chave está vazio de alguma forma, mesmo nós definimos isso aqui. Mas o problema usando a imagem de controle de formulário aqui, ele não vai me dar os dados reais. Ele me dará apenas o caminho dos dados. Porque se eu enviar, novamente com esta mudança, por exemplo, eu tenho aqui nome de controle de formulário, então você vai ver que os dados estão vindo apenas o caminho dele. Então não vou enviar o caminho. Eu queria enviar os dados exatamente como os obtivemos e como os construímos com o FileReader anteriormente. Então, se você se lembra, quando fazemos upload de imagens, quando eu clico no upload de imagens, então eu criei um leitor de arquivos como vimos na palestra anterior. Então precisamos passar o arquivo em si. Então, como fazemos isso? É muito simples. Vamos fazer upload de imagens. E eu digo que não tome o valor do nome de controle de formulário, então remova isso. Mas vamos aqui e dizer que o valor do nome do Controle de Formulário será o próprio arquivo. Portanto, não será o caminho do arquivo, mas será o próprio arquivo. Então, como podemos fazer isso? Se este arquivo, se houver um arquivo, então isso forma a forma que estamos construindo no grupo de pontos. Dizemos valor de patch, como adicionar um valor, valor em uma chave que é chamado imagem, e, em seguida, colar o arquivo. Como você se lembra, nós definimos a imagem, mas ela está vazia. Mas agora precisamos defini-lo e corrigir esse valor para o próprio formulário. E outra coisa como precisamos validar isso porque estamos postando um arquivo que é apenas imagem. Então precisamos dizer que para este ponto ponto ponto ponto obter a imagem em si. E então dizemos valor de atualização e validade. Então aqui temos que usar esse método apenas para confirmar que tudo está funcionando bem. Estamos atualizando o valor porque depois de corrigi-lo, precisamos atualizar o formulário em si. Então nós apenas obter esse valor e atualizado como um arquivo que nós buust. Eu preenchi os dados novamente e eu também tenho imagem aqui. Então, quando eu clicar em Criar, eu vou ver que também ele ainda está pendente. Estou recebendo outro erro porque está dizendo que a validação do produto é destaque, gás para valor booleano sentiu, está vazio. Portanto, precisamos tornar esse recurso por padrão falso ou verdadeiro. Então, quando é assim, então não fazemos, não podemos enviar um valor vazio. Precisamos enviar um valor falso. Portanto, ele é apresentado deve ser por padrão como um falso. E então, quando mudamos, então lemos o valor dele. Vamos tentar de novo. Depois de dar um valor padrão para os recursos do ISB, então clicamos em Criar. Veremos que o produto é criado com sucesso. E se formos para a nossa lista de produtos, veremos que a imagem do produto foi carregada e já está no servidor. Então está no lado do servidor, foi carregado com sucesso. Então, como uma recapitulação, fizemos exatamente como fazemos com categorias que estamos fazendo é enviado, verificar para o formulário é inválido. Nós não fazemos nada quando é inválido, então estamos enviando os dados como um formulário de dados, não como um JSON, como fizemos com a categoria. E então estamos construindo esses dados de formulário. E então estamos anexando esses dados. Dois produtos formam dados. E então estamos criando um método que é chamado adicionar um produto, que está usando o serviço do produto, criar um produto. E então baseado nisso, ele vai me dar uma mensagem de sucesso ou uma mensagem de fracasso. A principal questão que enfrentamos aqui que o campo de imagem não pode ser usado como um nome de controle de formulário porque ele vai retornar para mim aqui apenas o caminho. Ele não retorna o arquivo em si. Então, o que fizemos para resolver isso, dissemos no upload de imagem quando fizemos na palestra anterior, dissemos patch um valor para o formulário que é chamado imagem. E o valor dele deste controle de formulário será o próprio arquivo. Não será o caminho. Em seguida, para fazer as coisas ficarem ativas, precisamos chamar este campo novamente e, em seguida, dizer Atualizar valor e validade. E também, temos que ter cuidado com os valores padrão aqui porque às vezes quando você não envia nada para o backend, estranho quando você envia um tipo errado, por exemplo, é destaque estava vazio aqui, então eu estava usando string vazia. E para o back-end é um problema porque o back-end espera um valor booleano. Então o valor padrão disso é Richard será falso a menos que nós estamos alterando. Então, quando eu vou aqui e mudá-lo, ele vai ler o valor como um booleano porque estamos lendo os valores de onsubmit quando eu estou enviando um método. Então vamos fazer agora uma refatoração rápida. Nós só precisamos remover esses logs de console para que não tenhamos que ter um log de console e nosso código, e temos nosso produto criado já na lista de produtos. 112. Edite um produto: Nesta palestra, vamos ver como podemos editar um produto. Exatamente como fizemos com a categoria. Se você se lembrar, estamos clicando em um dos editar a categoria e, em seguida, podemos editar e atualizar. Podemos fazer o mesmo com o produto. Então, quando eu clicar neste botão de edição, eu posso ir novamente para o formulário e sentir os dados. Então, como podemos fazer isso? É exatamente como em categorias. Fui à lista de produtos. Se você se lembra, nós temos o botão para a edição e nós apenas dizemos atualizar um produto e eu estou passando o ID do produto que eu quero. E, em seguida, implementação deste produto de atualização, será estes roteador navegar por URL para o formulário de produtos e, em seguida, o ID do produto, porque definimos essa rota já como vimos aqui anteriormente. Então, agora, quando clicamos no Editar, então vamos para Adicionar produto. Mas o problema de termos dados vazios, não obtivemos o produto em si preenchido já nesses campos. Então, novamente, precisamos especificar o modo de edição. E então dizemos quando eu tenho ID, então eu preparo o modo de edição e, em seguida, eu pego os dados do produto do banco de dados e, em seguida, colocá-los nos campos como fizemos com categorias. Então vamos fazer isso rápido. Como você se lembra no modelo que definimos e editar variável de modo, e esta variável é definida aqui. Então, precisamos especificar e verificar o modo de edição como fizemos anteriormente. Então, primeiro de tudo, precisamos criar um método que é chamado modo de edição Jack e clique em Editar modo. Será um método privado. Então, onde posso verificar o modo de edição e ler o ID do URL, exatamente como fizemos com categorias. Então precisamos da rota em si, aquele serviço de saída. Podemos pegá-lo e colocá-lo em nossas chamadas de serviços. Então aqui temos a rota que é ativado rota e ouvir a partir da rota. Eu não posso saber quais são os parâmetros são passados no URL se houver um ID que é passado como fizemos anteriormente, em seguida, disse que o modo de edição para true. E então vamos definir os campos dos produtos pelo produto que obtivemos do back-end. Então primeiro precisamos definir também um ID de produto atual. Então, porque precisamos disso, como você se lembra, então temos um ID de produto atual que é definido aqui, será uma string, e então precisamos criar uma superfície para obter um único produto. Então, se formos novamente para os serviços, vamos para o serviço do produto, precisamos criar um método que é chamado obter um produto. E como fizemos exatamente novamente com uma categoria, podemos definir esse método. Então podemos apenas dizer que temos um bom produto, ID do produto, produto aqui para chamar o modelo do produto. E também aqui eu vou pegar o produto. E aqui precisamos da URL da API e, em seguida, passarei o ID do produto. Então, aqui o serviço está pronto. Voltamos ao nosso formulário e, em seguida, para verificar o modo de edição, precisamos chamar o serviço do produto. Então eu digo este serviço de produto ponto e, em seguida, obter um produto, um único produto, e, em seguida, assinar o produto em si. E então eu vou pegar o produto do backend. E então para cada campo desses campos de produto, precisamos especificar o valor que obtivemos do back-end. Então podemos apagar esta parte. Então precisamos dizer de alguma forma como esta forma ponto-produto que já temos. E então eu ir campo por nome de campo e o valor definido. E então eu defino o valor com o produto que eu obtive do backend e o nome. Então vamos fazer isso para todos os campos rapidamente. Então eu vou aqui primeiro para a categoria, e então eu definir o valor da categoria que eu obtive do produto. E também, eu tenho essa marca. E, em seguida, o preço em estoque é caracterizado descrição e descrição rica. Vamos economizar no trie que vamos para o nosso front-end, selecionamos um produto, por exemplo, este. E então eu vou ver que todos os campos estão preenchidos perfeitamente, mas exceto o campo da imagem que nós não temos uma imagem principal aqui, nós não podemos vê-lo. Isso ocorre porque a visão de piedade da imagem, como você se lembra, é armazenada em uma variável que é chamada de exibição de imagem. E na exibição da imagem, posso especificar o valor da URL da imagem, que estou recebendo do back-end. Então podemos fazer isso de forma muito simples. Podemos dizer este URL da imagem ponto ou a exibição da imagem. Será o produto em si, essa imagem. Então aqui temos um caminho já vem do backend e com a exibição da imagem. Vamos atualizar isso e verificar. Ok, vemos que temos a imagem já está selecionada e exibida aqui. E também se vemos que estamos faltando a categoria, a categoria não é selecionada porque ainda é por padrão. O problema que, se você se lembrar, nós especificamos a categoria por ID. E quando eu estou indo para a rede e verificar o que eu estou recebendo categoria, eu estou obtendo como objeto porque um backend está me enviando toda a categoria com o produto. Precisamos especificar também o ID. Então eu vou dizer categoria ponto ID. Então aqui vou eu e digo definir produto, categoria ponto ID em si. Tentamos isso novamente e veremos que a categoria já está selecionada. Então você vê passo a passo, você tem que verificar que tudo está funcionando bem. E então vamos fazer o Submeter da atualização por mim. Por exemplo, quando eu altero o preço, eu quero enviar a atualização do preço para o back-end. Então, o botão em Enviar já estava definido como vimos aqui, mas temos apenas adicionar um produto. Então precisamos de alguma forma fazer da mesma maneira que fizemos com as categorias formulário. Precisamos verificar o modo de edição. É realmente o modo. Em seguida, atualize o produto, não um produto publicitário. E se não for, então adicionamos o produto. Então eu tenho aqui se este modo de edição de ponto, e então eu vou e eu digo que, ok, Faça para mim a atualização, caso contrário, faça para mim produto de anúncio. Então, precisamos definir outro método que é chamado Editar produto ou atualizar produto. Por isso, será também um método privado. Ele será atualizado produto e, em seguida, ele vai pedir para os produtos formulário que novamente. Então atualizar produto, ele será no topo aqui temos como sublinhado privado, atualizar produto. E então eu vou passar os dados do formulário do produto, que tem como bem mergulhar fora forma do produto ou dados de formulário em si. Então aqui precisamos passar também para a atualização, um formulário que porque e se o usuário atualizou a imagem. Então exatamente como fizemos com a categoria de atualização. Como você se lembra, criamos o serviço de categoria de atualização e, em seguida, criamos uma mensagem e um temporizador para voltar à lista de produtos. E, em seguida, se houver uma falha, nós mostramos uma mensagem de falha. Vamos também adicionar o método de atualização, que estará neste serviço de produto também. Então vamos novamente para o serviço do produto. Então também temos a atualização do produto e, em seguida, temos os dados do produto em si observável. Ele vai retornar para mim o do produto atualizado e também, precisamos passar o ID, mas aqui estão as coisas um pouco diferentes. Precisamos passar o ID e tê-los dentro de um formulário de dados. Você também pode obter nosso pegar o ID em si a partir de dados do produto. Mas, na minha opinião, é melhor adicionar outro parâmetro para atualizar o produto, que é será o ID do produto. Então eu vou adicionar aqui também um ID do produto, que será digite uma string. E então eu vou para o formulário do produto novamente. E no método de atualização, adicionarei, se você se lembrar, este ponto ID atual do produto, que definimos anteriormente, e pegamos ele injetado no modo de edição. Então, se você se lembrar, nós temos aqui que verificação do modo de edição e nós atribuímos o ID atual de seu produto para o ID do produto atual. Então agora temos todo o método está funcionando bem. Precisamos apenas enviar os dados. Vamos guardar isso. Se formos a um dos nossos produtos, como os que criamos anteriormente, verei aqui que, ok, eu tenho o nome do produto, marca do produto um. Eu atualizar, por exemplo, é destaque. E na descrição eu digo descrição atualizada apenas para ter certeza de que tudo está bem. E então estamos clicando na atualização. Então vamos atualizar isso. Veremos que o produto é atualizado e voltamos novamente e veremos que o produto é realmente atualizado com a descrição atualizada. Ok, vamos tentar mudar a imagem também. Então eu vou ver aqui que, por exemplo, eu tenho uma imagem como esta por exemplo, eu atualizar e vamos ver que ele também foi atualizado como vemos aqui. 113. Campo de imagem de validação dinâmica: Então é por isso que eu fiz a imagem principal não é obrigatório campo no início porque eu estou aqui mostrando apenas visualização de imagem, mas eu não estou carregando a imagem novamente para o arquivo de entrada aqui. Então, quando eu enviar uma atualização, e como você viu no back-end, nós já fizemos que estamos verificando a imagem. Se houver imagens com essa solicitação, então tudo bem, use-a. Mas se não, então mantenha a imagem antiga. Se o usuário não carregou nenhuma imagem aqui. Então foi assim que fizemos no back-end e como estamos lidando com isso no front-end. Mas temos problema aqui que se o produto, quando eu clicar em você, Eu criar um novo produto. Não estou mostrando ao usuário nenhum erro de validação aqui. Como, por exemplo, quando eu clico em Criar, Eu estou apenas mostrando o produto não foi criado, mas eu não estou mostrando nenhum erro de validação aqui nós precisamos corrigir algum erro de validação. Mas, na atualização, essa validação não deve ser aparecida. Em outras palavras, eu quero no modo de edição, este campo não é obrigatório, mas OnCreate, Eu queria ser um campo obrigatório. Como podemos fazer isso? Primeiro, vamos fazer este campo conforme necessário. E no próprio modelo, copiamos uma dessas pequenas descrições ou as pequenas tags Temos aqui, a imagem, upload de imagem e depois da imagem aqui, podemos, por exemplo, colocar um erro de validação. Então eu diria que o formulário do produto, como se o usuário não corrigiu qualquer imagem, então inválido e é enviado, em seguida, exibir erro, dizer que a imagem é necessária. Mas isso será mostrado somente quando houver erro e não houver nenhuma imagem carregada antes. Então, queremos mostrá-lo como eu disse no Create. Então voltamos para o formulário em si e, em seguida, fazemos esses campo de imagem conforme necessário. Então vamos aqui, isso define o validador para ser um obrigatório. Então, quando eu vou para o front-end, eu clique em Criar, Eu vou ver, ok, A imagem é necessária. E neste caso, eu não posso enviar qualquer produto apenas quando eu tenho imagem dentro dele. Então vamos tentar isso rapidamente. Eu criei aqui um produto. Eu sinto o formulário já e eu também carrego a imagem. Então, quando eu clicar em Criar, eu vou ver que o produto é realmente criado. Mas quando não há imagem, então eu vou receber um erro. Essa imagem é necessária como vimos anteriormente. Mas o que eu quero agora quando eu vou para o modo Editar, eu não quero que este campo seja necessário quando o usuário está atualizando um produto. Por exemplo, estou atualizando este. Clique em Atualizar, eu vou receber o erro. A imagem é necessária porque o usuário não deseja alterar a imagem. Então ele não enviou nada, mas o campo em si está vazio. A maneira de corrigir isso, que eu não sinto o campo de imagem novamente para torná-lo não necessário porque caso contrário, quando eu atualizar, eu enviarei de volta o arquivo e o arquivo será carregado novamente. E terei arquivos replicados no back-end lá. Boa maneira que no modo de edição, eu posso remover essas regras de validação. Então eu posso dizer quando há ID e este ID, quando eu pegar o produto, tudo está bem. Eu vou aqui e digo este produto ponto para essa imagem em si. E então dizemos definir validadores novamente, e os validadores serão nulos, como dissemos aqui, temos validadores ok, mas este validadores agora não são nada matriz vazia. E para fazer isso funcionar, se você lembrar, quando nós batemos um valor da imagem em lote, precisamos verificar o valor de atualização e validade. Então, podemos novamente chamar isso para atualizar e atualizar este campo de formulário para tomar todas as alterações que fez lá, podemos este ponto imagem formulário produto e, em seguida, novamente atualizar valor e validade. Então, quando dizemos este, então veremos que foi atualizado e, em seguida, o validador não estará mais ativo. Então, quando eu vou aqui, eu digo ano 2002, e eu não tenho nada neste campo e não é válido porque eu não tenho nenhum arquivo aqui. Mas quando eu clico na atualização, ele funcionaria e atualizará o arquivo. Mas quando eu vou para um novo produto, então este campo será obrigatório. Eu não posso criar um produto somente quando eu sinto o campo aqui. Então, no modo de edição, temos exigido e não vai editar o modo, não é necessário. Você pode fazer o mesmo para todos os campos. Esta imagem foi apenas um exemplo. 114. Adicionar a tabela de produtos: Nesta palestra vamos ver como adicionar originador à tabela de lista de produtos. Adicionando paginate ela em prime NG é muito fácil. É apenas uma propriedade, você pode adicioná-lo e, em seguida, a variável terá uma paginação. Então, quando vamos para NG prime e depois vamos para a tabela, há uma categoria chamada página. E aqui você vai ver como você pode usar o paginado é apenas propriedade adicional, que é chamado paginado ou através. E então você pode ver quantas linhas você pode mostrar em cada página você também pode mostrar um relatório sobre a página. Por exemplo, isso mostra de uma a dez de 100 entradas e você não pode ter um modelo para ela. Assim, você pode especificar um texto que deseja exibir dentro deste relatório. E também linhas por página opção, que é esta. Você pode mostrar também opções de quantas linhas você deseja exibir em uma página. Vamos adicionar isso à nossa mesa. Vou adicionar o paginado à nossa mesa. Então eu vou aqui e dizer paginate é através de linhas são 10. Então guardamos isso. Vamos novamente para a nossa aplicação. Está carregado de novo. E vamos ver que temos o originador. Você pode adicionar os outros modelos, como relatório atual de costa ou se quiser ter a opção de linhas por página. Então, cabe a você. Para mim. Sinto que é lindo assim. 115. Lista de usuários e serviços de usuários: Ok, como nós concordamos neste curso, que nós não vamos repetir as coisas de novo e de novo. Então, anteriormente fizemos a tabela de categorias e será para os usuários o mesmo. Então, para isso, eu criar um componente que é chamado lista de usuários. E o componente de lista deste usuário tem exatamente o mesmo que tínhamos em categorias como o próprio brinde, como temos conformação sobre operações. E também página de administração, Eu vou apenas para substituir aqueles para ser usuários e também aqui usuários. E, em seguida, temos novamente o botão Novo para adicionar um novo usuário. E também temos a tabela que eles vão valorizar, será usuários e também seus campos, que sabemos tudo sobre os usuários e como nós os obtivemos a partir do backend. Para mim, vou exibir na tabela apenas o nome, e-mail e se ele é administrador ou não, eo país. E podemos fazer também essas tabelas ou colunas como classificáveis ou não. E para isso, temos o usuário, e o usuário tem um nome. O e-mail é administrador e país. E temos o botão Excluir usuário e atualizar usuário. E para isso, criamos a rota que já estão definidos anteriormente, se fizemos categorias e produtos. Temos os usuários, que está se referindo ao componente lista do usuário e a forma que você está falhando para usuários do componente. Então, para pegar os dados do banco de dados também, criamos os serviços para o usuário. Então, o componente do usuário, eu tenho o serviço do usuário e o serviço do usuário. Se formos para ele, ele terá usuários obter usuário, criar um usuário, atualizar e excluir exatamente como fizemos anteriormente com categorias. E a URL da API será para usuários. E eu coloquei o serviço exatamente na biblioteca do usuário, não na biblioteca de produtos porque estamos usando agora a biblioteca do usuário. Assim, a biblioteca do usuário teria uma pasta que é chamada de serviços. E dentro dos serviços teremos serviços de usuário. Além disso, criei um modelo do usuário exatamente como o temos no back-end, como ID, nome, senha, e-mail, telefone e token. Se ele tem um token, como veremos mais tarde, é admin, Rua, Apartamento, CEP, cidade e país. E voltamos para o componente de lista de usuários. Como sempre, quando NG sobre ele, Eu digo obter não categorias, mas obter usuários. E esses usuários, nós já os temos no back-end. Então temos aqui em usuários e também obter usuários. E então usarei os serviços do usuário para obter os usuários e seus usuários assinados. E this.UserID será os usuários que definimos como uma classe membro, que é matriz de usuários. E então eu uso isso nessa tabela como um valor. E verificamos o front-end, veremos que a lista do usuário veio assim. Então nós temos aqui o nome de usuário, e-mail é admin, e o país, ele está vazio aqui porque no banco de dados esse país também está vazio. Vamos atualizá-los quando vamos fazer a edição no mesmo tempo que eu fiz também, que excluir, que será também diálogo de confirmação, como você deseja excluir o usuário? E, em seguida, o usuário pode selecionar sim ou não, e então ele executará a decisão correta. Então aqui temos também excluir o usuário e estamos executando este código quando o usuário está clicando no botão Excluir adicionar, quando eu vou para a lista do usuário, estamos chamando novamente o serviço de confirmação. Portanto, precisamos confirmar se os usuários devem ser excluídos ou não. E, em seguida, quando o usuário aceitar isso, em seguida, Serviço de usuário, estaremos chamando um usuário de exclusão com o ID de usuário selecionado. E então eu atualizo a lista novamente obtendo os usuários. E, em seguida, o serviço de mensagem, que me mostrará que o usuário é excluído ou o usuário foi excluído. E lembre-se de que importamos o usuário, o modelo do usuário e os usuários do uso da biblioteca. Gostaria de adicionar uma coisa aqui que eu não quero exibir é admin true ou false? Podemos, por exemplo, exibir um ícone ou podemos exibir algo no uso final primo é chamado tag. E tag, podemos usar uma dessas tags com base no estado se ele é admin ou não. Então, por exemplo, exibirei essa tag quando o usuário for admin e exibirei esse DAG com esse ícone quando o usuário não for admin. Então vamos fazer isso. Também podemos importar o módulo de tag para o nosso módulo de aplicativo. E quando nós vamos aqui, nós usá-lo em nosso módulo UX. E podemos usar o exemplo que está vindo com ícones. Então ele usou de uma forma como se nós formos para a fonte, vamos ver ícones que ele usou tag p. E então ele especificou alguma margem e, em seguida, ele selecionou o ícone e, em seguida, gravidade será sucesso eo valor será sucesso. Nós não estamos tendo um valor aqui, então teremos apenas ícone. Então, podemos usar este um dag e ir para o nosso componente lista de usuários. E aqui está, administrador. Não vamos verificar isso, mas diremos que use este DAG e ng-if mostrará essa tag ou não baseado se o usuário for admin ou não. Então eu diria que o usuário é admin. Então, se o usuário é admin, então faça ou mostre este emblema ou esta tag. E como dissemos aqui, não precisamos do valor. Então, podemos salvá-lo e verificá-lo nos piolhos front-end, vamos ver que já temos essa tag e também podemos usar os recursos como ele está em torno dele. Então não podemos dizer que arredondado é verdade. Podemos definir esta tag como bordas arredondadas, para que possamos adicioná-la aqui. Temos um arredondado através, por isso tem entrada que é chamado arredondado. Então salvamos. E novamente, quando não for administrador, então eu mostrarei o perigo. E eu digo que o usuário não é admin. Então aqui temos outra tag P e eu digo MET ng-if não admin, e então o ícone será outro ícone e gravidade será perigo, como vermelho e arredondado. Então, quando vamos novamente e verificamos o ícone do ícone para que seja tempos, que possamos pegá-lo e colocá-lo aqui. Salvamos o aplicativo e verificamos se tudo está funcionando bem. Então, como você vê aqui, temos então o administrador vindo com verdadeiro ou falso fluxo a partir daqui, Eu não vou se o administrador tem este ícone, então ele é admin. Se não, então ele não é adicionado. Então eu estou mostrando isso para vocês porque eu quero ver como nós podemos renderizar os valores dentro disso tudo exatamente como nós queremos. Então, quando você queria jogar ícone, você pode exibi-lo. Se você quiser imagem, você pode exibir a imagem como vimos no produto. E se você quiser exibir algo como um componente, você pode fazê-lo tão bem quanto vemos aqui em Admin. 116. Adicionar e editar o formulário: Ok, nesta palestra, estou passando pelo formulário de usuário. O formulário de usuário que criei exatamente também como categorias, como eu disse, porque categorias serão nossa referência. E a partir disso teremos um modelo e usar esse modelo em todos os lugares onde quisermos. Irei rapidamente para não repetir as mesmas coisas. Mas se você quiser tudo em detalhes, como criamos este formulário, você vai verificar as categorias para. Assim, as categorias se formam. Expliquei tudo em detalhes como estamos construindo esse formulário. Então exatamente como fizemos com as categorias. Você sabe que o modelo de usuário que criamos anteriormente, ele precisa de um nome, senha, e-mail e outras coisas. E baseado nisso, eu criei os quatro. Então, tudo é igual. Temos um brinde para mensagens de confirmação e também o cabeçalho, a barra de ferramentas que contém o onsubmit e cancelar se você quiser vê-lo aqui mais detalhadamente, Eu mostrei a você. Então, como você vê aqui, nós temos a atualização e cancelar e está mudando quando eu estou clicando em você com base no modo de edição. E agora temos o nome, e-mail e também o telefone. E também, temos aqui o administrador é administrador e a rua, apartamento e outras coisas. Claro, há coisas novas que vou mostrar a vocês como fazê-las. Por exemplo, precisamos, por exemplo, de mostrar como validar o e-mail, que é uma coisa nova, e também como podemos levar esses países a países para cair para baixo. Agora eu o tenho vazio. Quero mostrar a vocês como podemos pegar os países em nossa lista suspensa de uma biblioteca. E no componente em si, eu estou indo em energia sobre ele. Estou dizendo init, telefone de usuário e formulário de usuário de fato. Como cada formulário que estamos usando construtor de formulário, temos o nome que é necessário. A senha também é necessária, mas na atualização não é necessária porque, como você se lembra no backend, como fizemos isso, fizemos isso de uma forma que se o usuário não colocar nenhuma senha na atualização de um usuário, então ele manterá a senha anterior, que ele já tem. Mas quando ele colocou algo aqui, então ele irá atualizar a senha com base nisso. Então exatamente como fizemos com a imagem do produto, se você se lembrar, a mesma coisa exatamente, vamos fazer com o usuário para uma senha será necessária quando eu vou ter o novo formulário. Mas isso não será necessário quando eu estiver editando um usuário. Então aqui devemos fazer e lidar com a coisa com uma senha. Então, como vemos aqui, temos isso exigido por padrão, e então vamos para verificar o modo de edição como vemos anteriormente. E então eu vou dizer este formulário de usuário ponto, a senha quando eu estou no modo de edição. Então, ou é MOD é através de validadores de conjunto, será como matriz vazia de validadores. E então dizemos esta senha ponto, valor de atualização e validade. Então, como vemos aqui, nós atualizamos este campo depois que estamos verificando o modo. Então, quando eu voltar e experimentá-lo, então vamos para os usuários ou sabia que seria necessário. E em Editar, não será necessário. Então, podemos atualizar se não for necessário. Então, com base nisso, eu criei o formulário também. Vamos ter o e-mail. O e-mail em si também é necessário. Mas não é só necessário. E se o usuário colocar algo errado? E se colocar assim, então precisamos dizer a ele. Não, é errado. E-mail. Podemos fazer isso muito facilmente. É também que é outro validador, que é chamado de e-mail. Então temos que colocar um novo array, como se tivéssemos vários validadores. Então eu vou dizer obrigatório e também validador dot e-mail. Então, neste caso, teremos dois validadores. Mas quando voltamos ao nosso formulário novamente e tentamos clicar em você, então diga, por exemplo, um e-mail inválido, algo assim. Não é e-mail. Quando eu clicar em Criar, Eu vou dizer que eu vou ver que não é e-mail é necessário. Eu não quero ter e-mail é necessário. Eu quero dizer que o e-mail é inválido, mas quando está vazio, eu diria, ok, E-mail é obrigatório. Então, como podemos diferenciar entre duas mensagens. Então, como você vê aqui, temos ng-if e-mail do usuário inválido e o formulário é enviado, em seguida, exibir para mim uma mensagem. Podemos ter aqui dois tipos de mensagens. Então podemos dividir esta mensagem, podemos colocá-la dentro de um espaço e temos outra mensagem em outro espaço. Então podemos ter aqui dois vãos. Um para o e-mail é obrigatório e um, o e-mail é inválido. Mas aqui precisamos também verificar ng-if, qual é o tipo de erro? Então eu vou dizer aqui também em ng-if para e-mail é necessário, eu vou dizer erros de ponto de formulário de usuário. É um obrigatório. Então mostre-me esta mensagem. Mas se o erro for e-mail, mostre-me a outra mensagem. Então, podemos colocar isso também aqui e dizer, em vez de erros ponto necessário, dizemos erro dot email. Então salvamos isso e tentamos novamente. E vamos ver quando eu vou colocar um e-mail errado, Eu vou dizer e-mail é inválido, mas quando eu colocar vazio, Eu vou ver e-mail é necessário. Dessa forma, você pode diferenciar entre os validadores dentro de seu e-mail, voltando para nossos componentes. Então temos aqui dois validadores. E para o telefone, também é necessário para o estrangeiro como IC aqui, eu usei um novo controle que é chamado de máscara de entrada. E esta máscara de entrada, se você for para NG primo, você verá que eu usei este componente. Este componente é apenas para mostrar a você e ajudar o usuário a inserir esse número de uma maneira correta. Então, como você vê aqui, eu coloquei um número e ele está mascarando. Então, usar isso é exatamente o mesmo. Eu importei o módulo para o módulo de aplicativo e, em seguida, eu usei um desses exemplos são usados, por exemplo, aquele que a fonte. Mas como você pode especificar a máscara que você deseja, você pode especificá-la colocando 99 dessa maneira. Então, quando eu remover esta parte bem da máscara, então eu devo ter a máscara desta maneira. Então é um mascaramento. Então o usuário sempre colocará isso lá, do jeito certo. Então você vê aqui eu tenho o mascaramento exatamente como eu defini aqui é admin é um switch. Nós já tínhamos visto isso no produto quando ele está em destaque ou não. Rua é um apartamento de caixa de texto, cidade de código postal. E depois temos os países. Na próxima palestra, vou mostrar-lhe como listar seus países dentro desta lista usando alguma biblioteca externa. Mas agora, como vemos aqui em nosso componente, que somos capazes de fazer a mesma coisa como fizemos com as categorias e o produto. Então, quando eu vou primeiro, eu verifico o modo de edição e eu verifico se eu tenho parâmetros sobre o usuário. Então, quando eu tenho parâmetro, por exemplo aqui, que é ID de usuário, então eu estou no modo de edição. E no modo de edição eu estou mostrando algumas informações que eu cresci a partir do back-end. Então eu uso o serviço do usuário para obter um usuário por ID e assinar esse valor. E então eu defino os controles com base nos valores que eu obtive do backend. Mas quando eu estiver em um New, então eu vou ter adicionar um produtor. E este usuário Adicionar criará um usuário para mim. E, em seguida, ele irá exibir mensagem de sucesso e voltar quando eles estão vazios. E o local, voltamos para a lista do usuário e se houver falha, ele vai me dizer usuário não é criado. Conversamos sobre tudo isso em vídeos anteriores de categorias e produtos. Você pode vê-los mais detalhadamente e repeti-los se você não entender algo. Estou explicando aqui apenas as coisas novas que são realmente importantes para você, que não fizemos anteriormente no curso e na próxima palestra, Vamos ver como podemos preencher seus países com base em alguma biblioteca externa. Como eu lhe disse antes. 117. Como recuperar países para dar to com i18n: Ok, ótimo. Agora nesta palestra eu vou mostrar a vocês como se sentem a lista de países. É claro que não vamos ter uma série de todos os países do mundo. Não, mas vamos usar uma biblioteca que está sempre sendo atualizada com o código dos países e os nomes. E esta biblioteca é chamada IAT EN, países ISO. E você pode encontrá-lo como pacotes MPM e você pode instalá-lo através deste comentário. Então eu vou para o nosso componente de formulário de usuários e eu vou ter a lista do país preenchido aqui. Então, temos agora matriz vazia porque estamos usando-o para a lista suspensa como fizemos exatamente com categorias no produto. Então, primeiro de tudo, precisamos instalar a biblioteca que parar o nosso compilador e, em seguida, colar o comando de instalação MPM. E então vamos ver como podemos chamar esta biblioteca e chamar a lista dos países. Ok, como você vê aqui, eu tenho instalado já tinha. Agora, se formos para o formulário do usuário, precisamos ter o campo do país, exatamente como fizemos com as categorias. Podemos definir um método que é chamado, por exemplo, obter países. E isso dá aos países, eu vou inicializar um país e obtê-los daquela biblioteca. Então, definimos um novo método. Estamos chamando de países Git privados, e isso será definido aqui. Ok, vamos para a documentação da biblioteca. Vou aqui verificar. Ele diz que eu tenho que definir uma variável que é chamado de países, e então eu vou fazer uma exigência. Ok, aqui está usando um JavaScript, mas no TypeScript, se você quiser importar uma das bibliotecas, você tem que fazer o seguinte. Você tem que ir aqui. E depois de instalar a própria biblioteca, você diz Importar e, em seguida, artístico ou estrela. E então você diz, ao definir, por exemplo, uma constante que você vai usar para essa biblioteca. É como eu estou dizendo, importar para mim tudo e colocá-lo em uma constante, chamá-lo de países, por exemplo, lista ou lábio como biblioteca. E depois dizemos a partir. E então você define o caminho que é definido aqui. Então você diz, eu quero importá-lo desta biblioteca. Ok? Nós definimos isso. Colocamos aqui e veremos que tudo ainda está bem. Ainda não temos nenhum erro. Ok, vamos voltar para os nossos países GET. Precisamos registrar alocação e ler a lista do país. Foi assim que ele disse. Então não podemos copiar também esta linha. Digamos que os países registram localidade e temos que fazer isso, mas não temos países. Temos algo chamado lábio do país. Então eu vou dizer aqui países Lib, em seguida, registrar locale e, em seguida, exigir. E isso necessário vai pedir da biblioteca para trazer o arquivo JSON Inglês que está localizado e ele tem toda a lista do país. Você também pode usar solicitação HTTP para obter este JSON. Mas vou te mostrar uma maneira mais fácil. É muito simples para fazê-lo funcionar. Você pode fazê-lo como declaração e você pode dizer declarar e, em seguida, causado, exigir. E nesse caso, vai funcionar com sorte. Então, como você vê aqui, agora temos em adquirir e tudo está funcionando bem. E eu tenho aqui a biblioteca. Ok, vamos ver um exemplo para obter todos os países. Então, como você vê aqui, ele disse definir países e, em seguida, ele fez a exigência e que ele disse log console com os países, obter nomes em Inglês e selecione oficial. Então vamos fazer isso dessa maneira e tentar ver o que temos em nosso log de console para mapear as coisas exatamente como queremos para o nosso menu suspenso. Então vou colocar este código aqui. Substituo o lábio deste país por este. E então podemos ver o que ele vai digitar para nós. Depois de salvar, vou ao painel de administração novamente, mas precisamos executar o projeto. Então, como vemos aqui, esse projeto está sendo executado com sucesso. Atualizamos aqui para ver o que vamos conseguir no console. Ok, no console eu, eu tenho um objeto. E este objeto tem código de seu país e, em seguida, o nome dele. Certo, mas do jeito que é, não podemos aceitar isso assim. Precisamos de ter os países como uma lista porque os nossos países caíram, aceitam os países como uma matriz. Então, podemos usar ou encontrar uma maneira de mapear as coisas que estão dentro deste método como matriz. Então, como podemos fazer isso? Então eu vou fazer primeiro, eu vou me livrar deste log console. Vamos usá-lo para outra coisa. Então eu vou dizer que os países vivem, dêem-me os nomes em inglês, e então precisamos mapeá-lo. Então, não podemos mapear no objeto usando um método que é chamado de entradas de ponto de objeto. E neste método, ele vai me permitir loop sobre todas as entradas como se fossem uma matriz. Para explicá-lo mais claro para você, Eu vou fazer, Eu vou assumir que este entradas como matriz e eu vou dizer mapa, ok, Eu rezo aceitar esse mapa e este mapa foi devolvido para mim entrada por entrada. Para fazer alguma operação com ele. Então vamos, por exemplo, log de console esta entrada. Então eu vou dizer aqui, ok, registro do console para mim essa entrada. Vamos atualizar e tentar isso novamente e veremos o que teremos no bloqueio do console. Então, como você vê aqui, ele é atualizado e nós temos todos os membros da matriz. Assim, o objeto sempre vem como primeiro número é a chave, e o segundo membro é a Espanha. Então, e nós temos todos os arrays como este. Então podemos, então, com o retorno do mapa como exatamente o que queremos. Então, na forma de usuários, precisamos da opção rotulada como um nome e o valor da opção como ID. Então podemos mapear com base nisso. Então podemos dizer aqui, esses países ponto serão entradas de objetos sobre todos os países que estão nesta biblioteca e mapear sobre eles. E em vez de retornar o objeto em si, a própria entrada retornou para mim e objeto onde o ID é a entrada 0, como o índice 0. Então temos aqui o ID e o nome será entrada e um. Então teremos o ID como entrada 0 e o nome de seu país será a entrada um para a segunda entrada. Então, depois disso, vamos registrar os países no console. Então eu vou dizer aqui, console dot log novamente esses países. Então, depois de salvar isso, atualizamos, vamos para o nosso aplicativo e veremos que retornamos uma lista ou matriz de todos os países com o código ID e nome. E se eu for aqui para os países, porque como você se lembra nós temos este país é matriz, matriz vazia. E este array é usado para opções deste menu suspenso. Então, quando eu for aqui, eu vou ver que eu tenho todos os países. E a coisa boa que eu posso procurar através deles para que eu possa dizer Espanha, ok, eu tenho Espanha e tudo está funcionando perfeitamente. E, claro, eu posso atualizar meu usuário. Então eu diria atualizar aqui e então ele vai me trazer de volta e eu vou chegar aqui aquele país e é dor. Então isso é porque o que estamos armazenando no banco de dados, mapeando de volta para o Renomear, então você tem que fazer também o mapeamento aqui nessa lista. Então temos que fazer uma função na lista do país deles. E então ele vai procurar a Espanha e depois recuperar o nome do país. E esse método é fornecido aqui. Então você pode dizer a biblioteca deles, me dar o nome do código nós, e ele vai lhe dar o nome do país, que é Estados Unidos da América. Como lição de casa para você ou como uma tarefa eu quero que você faça para mim na próxima palestra, a tarefa que nós temos aqui na lista, o nome real do país, mas não o nome ou o código do país. Assim, seu trabalho será baseado exatamente na lista de usuários. Então você precisa novamente usar esta biblioteca em usuários, este componente. E então você tem que mapear ou descobrir o nome onde estamos mapeando esse campo. Então, em vez desse usuário daquele país, você precisa fazer algo aqui. Esta solução também é fornecida com a atribuição e também vou anexá-la ao código. Dessa forma, fizemos tudo em relação ao usuário. Então temos tudo o nome, e-mail é admin e país. E como combinamos antes, que o usuário para nós é o mesmo que o cliente. E se você quiser torná-lo mais grande ou mais complicado, você não pode separar os usuários do site sobre os clientes porque estamos usando aqui o usuário como um cliente. E pode ser admin ou não, mas será exatamente da mesma maneira que fizemos com os usuários para anexar um cliente. 118. Como recuperar a solução com países: Ok, como você vê aqui, eu recuperei com sucesso o nome completo do país. Como eu fiz isso? Primeiro de tudo, para o país na lista de países dos usuários, eu criei um método chamado get country name, e então eu passo o usuário nesse país. E porque estamos salvando o ID do país no banco de dados. Então vamos verificar o nome do país. Como você vê aqui, Eu verifico se há uma chave de país passado para o método, em seguida, retornou para mim, Users Service faz bom país. Ok, então eu defini um método chamado bom país no serviço do usuário. Então, como você vê aqui, eles recebem país está usando o lábio do país ou sua biblioteca de países, que nós usamos anteriormente no vídeo anterior. E, em seguida, obter o nome e, em seguida, iPads a chave do país, e, em seguida, o idioma que eu quero obter este. Se você se lembra, havia algo para registro desta biblioteca, como você vê aqui, se quisermos usá-lo, temos que registrar que eles estão localizados. Então, como eu fiz que eu removi esse registro e eu coloquei no construtor deste serviço, do serviço do usuário. Então, será chamado apenas uma vez. Então eu já ajustado deslocar apenas uma vez porque serviço do usuário é chamado Apenas uma vez quando eu estou inicializando o aplicativo, eu removo isso dos usuários para eu removi-lo daqui. Então não temos essa chamada da biblioteca de novo ou registro. Temos apenas o mesmo método get países. E então eu disse que esses países usam o serviço de usuário e, em seguida, obter. Então eu vou aqui para pegar países. E como você vê aqui, eu estou retornando as mesmas entradas de objeto de código. E então eu uso a biblioteca que eu inicializei aqui no serviço do usuário. Então, dessa forma, estamos usando apenas uma vez. Estamos chamando isso uma vez, e não estamos tendo uma duplicação de registro do local como vimos anteriormente. Então sempre quando você tem alguma duplicação, jogue as coisas para o serviço. Além disso, ouvi um erro porque estou usando países dentro do Serviço de Usuário. E se eu quiser usar o país e país do Git em outras bibliotecas, como por exemplo, em pedidos ou em produtos. Neste caso, removo tudo isso e crio um serviço que é chamado, por exemplo, utilitários. Estes utilitários me darão, por exemplo, países, cidades, por exemplo, para transformação de textos ou para formatação de números. Assim, podemos usar esses utilitários em todos os lugares entre nosso aplicativo ou espaço de trabalho. Veremos isso mais tarde, quando precisaremos obter países e obter país em nosso projeto passo a passo. 119. Crie a de componentes: Ok, Agora que estamos aqui, vamos criar a lista de pedidos e a página de detalhes do pedido. Então, para isso também, precisamos fazer dois componentes. Primeiro, ou aquelas listas onde eu vou ver a tabela da ordem e também o detalhe da ordem onde eu vou ver os detalhes da ordem como estamos fazendo sempre, vamos criar dois componentes. Claro que estou usando um console ECS. Como sempre, eu nomeei um novo componente, que é chamado de lista de pedidos, e ele será criado um aplicativo ou um administrador. E então eu tenho um estilo de vida para não gerar arquivo CSS porque nós não precisamos dele. Temos estilos públicos. E também eu criei um seletor que será admin ou há lista, e então eu pulei esses testes. Vamos executar esta parte. E então veremos o próximo, que é o detalhe do pedido. Aqui não teremos forma, teremos sobre os detalhes e em detalhes mostrarei a ordem e, em seguida, posso alterar o estado da ordem como fazemos sempre com qualquer problema. Então, aqui vou chamar o item como detalhes pedidos de administração. Então, qual será o seletor? E será exatamente as mesmas opções que escolhemos para a lista de pedidos. Certo, vamos voltar à nossa estrutura de código para ver se tudo foi criado. Ok, nós temos agora, tudo foi criado. Temos agora componente vazio. Vamos primeiro fazer a lista de pedidos, a lista de pedidos. Então, será exatamente o mesmo que categorias, bem como eu lhe disse, temos as categorias como um modelo. E se você se lembrar, definimos sempre o modelo da tabela, que usamos quatro categorias. Então eu também não vou usar a mesma coisa aqui. Então eu vou copiar esta parte, voltar novamente para a lista de pedidos, e então nós vamos fazer algumas coisas aqui. Claro que não será exatamente o mesmo. Por exemplo, teremos apenas excluir mais antigo, mas não teremos, por exemplo, atualizar tudo isso. Vamos dizer ordem certa. Como se fôssemos ver os detalhes das ordens porque não vamos editá-lo. Então vou renomear essas coisas rapidamente. Então, como vê, eu renomeei tudo. Temos agora ordens, lista de ordens, e então eu renomeei ele afunda aqui. Claro, o pedido não virá com nenhum novo, como a forma como temos aqui com a categoria, porque o pedido será feito pelo usuário na própria loja. Então, o usuário fará o pedido. Não podemos criar aqui uma nova ordem. Então, nesse caso, podemos remover esta parte. Então, é claro que você ainda pode criar um novo pedido. Você só tem que fazer o formulário novamente e seguir o que fizemos anteriormente. Mas agora para detalhes, eu quero mostrar-lhe coisas diferentes para não ser a mesma coisa que fizemos anteriormente em partes anteriores. Então eu vou me livrar de toda essa barra de ferramentas que é usada para criar ou uma nova ordem para que possamos nos livrar dele como vemos aqui. E agora teremos mesa mais simples. Então, como você se lembra, a ordem tem alguns campos que definimos anteriormente no back-end. Então agora vamos fazer também novamente, o mesmo modelo que temos para o front-end. E se vocês se lembram, criamos uma biblioteca que é chamada de ordens. Então, em encomendas, vamos colocar o nosso modelo também. Então farei isso rapidamente. Então, como você vê aqui, eu criei o modelo de pedido. O modelo de pedido contém algo chamado item de pedido. E o item do pedido , deve ser também outro modelo. Então podemos criar esse modelo também. Então temos aqui outro arquivo que é chamado item de ordem. Então, com este item de pedido, eu vou colocar uma nova classe que é chamado item de ordem. E, em seguida, temos este item de pedido que terá ID do produto e a quantidade. Então, vamos voltar para o item do pedido e importar este item do pedido. Então, teremos aqui ou o item que é importado do item do pedido. Temos também de lembrar que precisamos exportar esses modelos no arquivo de índice. Então temos aqui também, estrela de exportação do próprio modelo. E depois encomendar. Então temos aqui a ordem e também precisamos exportar o item do pedido para que salve tudo está funcionando bem, bem como você vê aqui temos aqui o módulo de ordem que criamos anteriormente. Mais tarde. Vamos também criar os serviços. Então vamos criar agora pasta, Vamos chamá-lo de serviços, que vamos colocar dentro dele, o serviço de ordens. Então volte para a nossa candidatura. Vamos definir outra variável ou outro membro da classe, que é chamado ordens. E distúrbios terão uma ordem de tipo. E esta ordem que criamos anteriormente, e será matriz vazia no início. Às vezes você recebe esse erro como item de pedido de propriedade está faltando no tipo undefined. Então é melhor ter como sempre os campos. Opcional como sempre. Então, se você tem este campo como opcional, não vai incomodá-lo tanto a Eastland que está mostrando a você. Sim. Ok. Isso não está definido. Você quer dizer que você precisa defini-lo e, em seguida, você cria um item de ordem, etc. Então, quando você define um array apenas, é melhor apenas torná-lo um opcional. E aqui você não terá mais problema. E nós adicionamos esses também para não ter um problema aqui. Então, teremos as ordens, ordens e matriz ordenada está vazia. Então vamos voltar para o nosso modelo e vamos adicionar esses módulos ou este campos membros aqui. Então eu adicionei essas colunas como preço total do usuário, e então a data ordenada e o status. E aqui teremos a coluna apenas para ações. Então, como você vê aqui, você pode adicionar as colunas que você deseja com base no que você deseja exibir. Então aqui eu preciso apenas disso, mas é claro que você tem liberdade para adicionar mais coisas para você. Então agora vamos novamente para o modelo aqui, para os valores onde estamos exibindo os valores da ordem. E nós vamos remover todas essas coisas. Nós apenas manter os botões de ação e vamos mostrar apenas como os valores que estão nesses campos. Ok, adicione, eu adicionei todos esses campos. Veremos mais tarde como podemos fazer um mau para o seu estatuto. Como vamos mostrar uma cor da ordem com base no status da mesma. Eu também gostaria de adicionar alguns pedidos para que não possamos ter ordem para o seu nome, desculpe para o usuário, para o prêmio. E também você pode por data e você pode encomendar, bem como o status. Então vamos fazer isso rápido. Então, como você vê aqui, defini toda a equipe para ser classificável como precisamos. Vamos dar uma olhada se não tivermos nenhum problema lá. Então eu vou para a mesa de pedidos. Você vê que eu tenho um erro que eu não defini a ordem de rota. Então, precisamos ir para o módulo do aplicativo e, em seguida, precisamos definir a ordem, bem como vimos anteriormente. Então primeiro eu preciso ter a ordem, por exemplo, lista. Então, serão ordens, componente lista, e teremos aqui ordens. E também precisamos definir um ID. Então vamos ser suficientes, por exemplo, com apenas ordens. E então eu vou dizer para mim o ID sem, por exemplo, o, o formulário em si porque nós não temos formado mais aqui. Então, aqui vamos dizer detalhes e salvamos. Então, voltando para o aplicativo novamente, e depois que ele está sendo carregado, vamos ver que podemos ir para o pedido e ver os usuários e o status e a ordem de data. Mas não temos dados. Precisamos criar um serviço para pegar os dados para o front-end. Exatamente como dissemos. Novamente com a categoria, também podemos copiar esse serviço de categoria e substituir as coisas aqui. Então vamos fazer isso também rapidamente. E, claro, você pode usar a capacidade de substituir. Então nós temos aqui categoria e você não pode igualar o caso. Então eu posso igualar o caso, este caso ou casos. Então eu vou dizer substituir categoria por ordem. Então tudo será substituído imediatamente. E também, se você quiser ter uma letra maiúscula, como alguns casos como esta categoria tem uma letra maiúscula. Você também pode substituí-lo por ordem de letra maiúscula. Então, como você vê aqui, eu também substituí tudo para ser como uma ordem. Ok, é muito simples. Nós também temos categorias, então você também pode substituir isso. Então dizemos que categorias são ordens. Bem, aqui precisamos substituí-lo. Como vê, ainda temos categorias, mas com letra maiúscula. Então nós temos aqui ordens e também com letra maiúscula, e nós substituímos todos eles. Como você vê agora, temos todas as encomendas, está pronto ou serviço está pronto. Não temos que fazer e sofrer tanto com isso. Então nós o salvamos e depois exportamos como fizemos anteriormente em outras bibliotecas. Então eu vou ver aqui Serviços que, ok, agora vamos voltar para a nossa aplicação. Estamos indo para o componente lista e vamos ver como podemos adicionar todos esses pedidos. É muito simples, exatamente como fizemos com as categorias. Só precisamos fazer isso que precisamos inicializar ou receber as ordens. Então eu diria este ponto, obter titulares e obter todos aqueles será um método que eu vou definir agora. Então será aqui, eu recebo categorias ou recebo ordens. E isto aqui recebe ordens. Ele vai pedir o serviço de pedido. Portanto, precisamos também importar o serviço de pedidos. Então, como vêem aqui, fiz isso rapidamente porque já o fizemos em categorias. E também podemos fazer isso aqui. Então, depois disso, eu vou pegar os dados também aqui, como você vê, nós já temos as ordens, mas como você vê, nós temos o usuário vindo como objeto, objeto. Mas este não é o objetivo que queremos tê-lo porque precisamos ter apenas o nome ou o e-mail. Porque se formos para a rede e verificar o nosso exemplo, esse pedido que criamos quatro ordens como vemos aqui. Em seguida, vamos ver que os itens de ordem jogos da maneira que eles são preenchidos. Por exemplo, o usuário é preenchido totalmente. Então o que eu preciso é apenas o nome, exatamente como fizemos no back-end. Então, nesse caso, você pode exibir o nome ou você pode exibir, por exemplo, o e-mail. Então eu vou mostrar apenas o nome. Então vou dizer aqui esse nome. Mas se você se lembrar, nós definimos o usuário no modelo como uma string. Então, é melhor defini-lo como um usuário. Então aqui nós iria obter o usuário de outra biblioteca, que é chamado de usuário Importar. E este usuário será de usuários. E como você vê aqui, vamos pegar o usuário e colocá-lo aqui. E então teremos que tudo está certo, para que possamos obter o nome do jeito certo. Então vamos salvar isso de novo e verificar nosso front-end. Está bem, vejo que tenho o meu nome aqui. Eu tenho o preço total e eu tenho a data em que eu fiz o pedido, mas ele precisa de formatação eo status é 0. Então o que significa 0. Para mim, eu gostaria de ter algo como nomeação, como pendente, envio ou enviado ou entregue. Então eu quero mostrar o status da ordem que vamos editar aqui. Assim, o usuário ou o administrador da loja, ele pode atualizar o status do pedido. Então, para isso, é melhor fazer algum mapeamento. E isso, o que veremos na próxima palestra. 120. de o pedido: Ok, nesta palestra vamos ver como podemos definir um status para o proprietário. E esse status, eu vou usar as tags que usamos anteriormente. Então eu posso mostrar em alguma cor como entregue, ou é um envio, ou está em processo, ou é, por exemplo, recebido, etc. Então eu vou mostrar a vocês como eu vou definir essas constantes e , em seguida, como vamos colocar esta tag dentro da nossa tabela. Então, primeiro de tudo, nós já importamos esse módulo para o nosso módulo de aplicativo. Então só precisamos ter ou definir a tag em si. Então eu vou pegar este DAG e, em seguida, colocá-lo no meu código onde eu estou recuperando o status do pedido. Então aqui vamos colocar essa etiqueta. Vamos atualizar para ver se tudo está funcionando bem. E então vamos ver que o aplicativo é recarregado. Perfeito. Nós temos agora aqui em você, Ok, nós estamos indo agora para ver a coloração. Vamos ver como ajustar o texto. Como você se lembra, você pode definir seu próprio mapeamento para a ordem em que você pode definir isso. Você não tem que fazer isso no back-end. Back-end é apenas um local para armazenar dados. Você não tem que lidar com quais são os tipos de pedidos. Então, a solução mais simples para isso, eu vou ter algo como o texto do pedido ou o texto de status mais antigo e também o status do pedido em si, como como ele será colorido. Então, para isso, podemos definir uma constante. Então, podemos chamar essa constante, por exemplo, o status do pedido, e podemos definir constante aqui, ou você pode fazê-lo também em arquivo externo. Vou te mostrar quando vamos refatorar isso. Então primeiro precisamos ter uma constante. Podemos chamar isso de ordem constante e então status. E esse status de ordem será o objeto e o objeto será, por exemplo, vários objetos. E esses objetos estarão definindo o rótulo que será como pendente ou processado ou enviado, e também a cor, a cor que será baseada nesses valores. Então, primeiro de tudo, eu vou colocar o valor como aqui, assim, como um objeto como este. Claro que você pode torná-lo como array ou você pode torná-lo como objeto. Você pode ouvir também definir chaves como você deseja. Então, como dependem como você está armazenando ou como você está indo para armazenar o status no banco de dados. Para mim, por exemplo, o primeiro será rotulado, vou chamá-lo, por exemplo, pendente, que será o primeiro status e a cor. Então a cor do crachá será a cor dessa etiqueta em si. Então, como você vê aqui neste exemplo, ele tem várias cores, então eu vou usar as mesmas cores. Então podemos ter isso também. Vemos que ele está usando informações de sucesso, cores de aviso. Então depende de você. Então, se você quiser algumas cores especiais, você pode definir isso em CSS. Mas para mim essas cores são suficientes. Então, como um primeiro status, essa cor será uma cor primária como é definida aqui. Então temos aqui sucesso primário, informação, alerta e perigo. Então vamos usar essas cores. Então, primeiro, eu vou usar essa cor e, em seguida, eu iria definir outro status, que será, por exemplo, o processado e processado terá a cor como laranja, que será aviso, cor de aviso. E, claro, eu vou definir outra cor ou outro estado que será enviado e barato para ter também cor de aviso como estamos em processo e teremos outro status que seria chamado entregue. E este entregue terá cor de sucesso. E então teremos como um rejeitado ou, por exemplo, cancelado ou falhou. Podemos chamá-lo. Então podemos fazer outro campo que será chamado falhou. Então, quando o usuário para fazer um pagamento ou, por exemplo, quando o usuário pede para o reembolso. Então podemos fazer, por exemplo, essa cor um perigo. Certo, agora temos o status do pedido. E este status do pedido, vamos armazená-lo em uma variável que recuperamos ou o status porque vamos usá-lo no modelo. Então eu vou dizer que o status do pedido é igual ao status do pedido, a constante. Então, quando eu for aqui, eu tenho esse DAG aqui. Então eu diria que o valor deste DAG, você precisa definir a ligação. Então vamos vincular uma variável aqui. Nós não vamos usar uma string estática porque já temos a string. Portanto, não podemos dizer que o status do pedido será o status do pedido em si. E a chave será ordenada esses status porque, como você se lembra, nós definimos chaves para os estados e com base no que eu estou salvando no banco de dados, como veremos no front-end em qualquer loja quando eu estou enviando o pedido e como nós atualizar o status do pedido, vamos ver como estamos armazenando isso no banco de dados e, em seguida, o status do pedido depois com o nome do ponto qi. E aqui eu vou obter o nome do status ou o rótulo do status. Aqui devemos ter um rótulo, não o nome. E então precisamos definir a cor. Mas vamos ver primeiro, se tudo está funcionando bem, eu estou guardando tudo. O aplicativo recarregado, Ok, temos aqui pendente e vamos ver como vamos mudar o status e, em seguida, vamos ver como ele vai refletir nesta tabela. Então agora temos o pendente e precisamos agora da coloração. Então, para colorir essas tags, precisamos definir algo chamado gravidade. E a gravidade será exatamente a mesma cor que defini em nossa constante. Então eu vou aqui. Eu vou dizer como esta gravidade e será também como uma ligação variável. Não vamos usar um texto estático. Nós não vamos dizer como um perigo ou nossa corda aqui. Não, porque estamos usando uma variável e será a mesma coisa. Será também o status do pedido e, em seguida, mais antigo que o código de status, que vem do backend e, em seguida, será a cor. E quando salvarmos isso, veremos que estamos retornando a cor certa. Então, quando eu for aqui, verei se estiver funcionando bem. Então vamos mudar, por exemplo, o estado pendente da ordem. Podemos mudá-lo, por exemplo, para perigo, por exemplo, para ver se tudo está funcionando bem. Então estou guardando isso. Eu vou aqui, vou ver que ficou vermelho. Então estamos no caminho certo, não temos nenhum problema. Então, como eu disse, definimos uma constante no componente de lista de ordens. E em ordem componente Grécia, Eu também usei uma variável ou um membro da classe porque eu vou usá-lo no modelo. E, em seguida, se você lembrar este valor do status do pedido retornado como 0, e isso será salvo no banco de dados para o status do pedido. Então 0 para o pendente. Um é para processamento, três é para envio, para quatro entregues. E nós definimos todo este gráfico ou dicionário aqui. E também usamos o item de tag porque este módulo de tipo ou componente de tecnologia pediu também para colorir e fizemos as cores exatamente como esta tag está funcionando. Data da fórmula, como você vê aqui, é formatado como a partir do formato que vem do banco de dados. Também podemos formatar a data usando os tubos, como fizemos anteriormente com o produto. Se você se lembrar, nós fizemos ou fazer o criado em neste formato. Então podemos fazer isso também para a ordem. Então vamos novamente para o campo. Não temos uma etiqueta, não temos isto. Podemos ter ordem de data e colocar a formatação de pipe curto para a data. E tudo funciona perfeitamente. Então temos aqui a data e o status. Na próxima palestra, vamos criar o detalhe desta ordem para que possamos ver mais detalhes sobre esta ordem de como os itens e também o produto. Quais são os produtos e o preço de cada elemento de um produto? Então vamos ver todos esses detalhes na próxima palestra. 121. Componente de detalhes de encomenda: Ok, vimos anteriormente como criamos a lista de pedidos e vimos como criamos o selo de status para o pedido. Agora, nesta palestra, vamos ver como fazer os detalhes da ordem. Então, qual é o requisito para isso? Os requisitos são para mim são apenas eu quero ver os detalhes do pedido e alterar o status. Eles usuário não vai aqui para criar ordens ou, por exemplo, atualizar todos os dados do pedido. Mas será no front-end, o front-end, o usuário ou o cliente vai criar os dados ou a ordem em nosso problema. Então eu gostaria de sugerir algum projeto que eu já fiz. Como por exemplo, podemos ter todos os detalhes. Podemos ter o ID do pedido, a data pedido e o status do pedido, que podem ser atualizáveis. E também o preço total do pedido e os itens do pedido. Podemos listar itens de pedido aqui e , em seguida, o endereço do pedido e algumas informações sobre o cliente. Então vamos fazer essa estrutura exatamente como ela é feita aqui. Então vamos novamente para o administrador. Então eu quero mudar aqui o ícone para ser editar lote, mas será como uma vista. Assim, podemos mudar o ícone com base em ícones em energia privilegiada. Temos aqui ícone no uso final primo é chamado Pi I, para que possamos usar este. Então eu vou novamente para a minha lista de pedidos e, em seguida, eu vou mudar o ícone aqui de lápis para I. E então nós salvamos, vamos para ver que tudo está funcionando bem em nossa aplicação. Certo, temos o ícone aqui. Então agora precisamos ver os detalhes do pedido. Então, quando eu clicar aqui, eu quero ir para o detalhe dos pedidos. Primeiro precisamos de uma rota e que já criamos, e depois referência a esta rota. Então, primeiro precisamos definir a função que é chamado Mostrar ordem. Vamos aqui novamente e, em seguida, vamos definir um método que é chamado Mostrar ordem ombro aqui. E estou recebendo aqui o ID do pedido do front-end. E vamos usar o roteador. E o roteador, como dissemos anteriormente, é um serviço ou uma classe que podemos usar. Então eu vou ter aqui o roteador em si, eu diria roteador privado. E este será o tipo de roteador. E podemos importá-lo também Angular. Fazemos isso como letra pequena para ser utilizável. E então vamos aqui e dizer que este ponto roteador ponto navegar por URL. E então eu especificar a URL para onde eu vou ir a partir daqui. Então eu quero ir para a rota onde eu especifiquei em nosso módulo. Então, se você se lembra, temos aqui várias rotas. Nós dissemos que todos eles serão depois que ele é ID. Então eu vou para o componente de detalhes. Então vamos aqui novamente e dizemos navegar para mim, ordens barra e, em seguida, o ID do pedido ID. Então podemos combinar isso com backticks e dizer pedidos, e então dizemos ID do pedido. Desta forma, navegamos por URL para o nosso componente. Então vamos tentar isso. Nós vamos aqui, ok, nós temos trabalho de detalhes de ordem de ano, mas como você vê aqui, nós não vamos ter, por exemplo, estrutura de fóruns. Nós queremos ter algo como detalhes, você sabe, então você precisa ter tipo texto estático. Nós não temos um formulário, então não vamos usar formulário aqui. Somente aqui quando eu vou mudar o estado, eu vou alterá-lo com base no evento onchange, que está voltando do menu suspenso aqui. Então não precisamos de um formulário. Só precisamos mostrar os dados. E também podemos usar este acordeão. Então, podemos ir lá e verificar NG primo para algo que é chamado de conjunto de campos. Então, no conjunto de campos, como você vê aqui, podemos usá-lo e exibir conteúdo dentro desses conjuntos de campos. Mas primeiro, vamos ter o título e outras coisas como a forma como temos na categoria. Temos aqui a legenda do título, e então temos uma barra de ferramentas. Nós não precisamos de barra de ferramentas aqui, mas nós só precisamos mostrar como algumas informações sobre isso. Estamos em ordem de detalhes. Então vamos fazer isso como fizemos exatamente na forma de categorias. Usamos algo como cartão chamado. E dentro do cartão temos uma barra de ferramentas. Não precisamos da barra de ferramentas. Nós só precisamos, Por exemplo, a página de administração e brinde para a atualização. Não é possível copiar apenas esta parte no início. E então podemos adicionar nossa grade e dentro dela, o campo se define. Então primeiro eu vou cortar para copiar apenas esse cartão e, em seguida, a página de administração e o próprio host para que possamos copiá-los e ir novamente para nossos detalhes de pedidos. Vamos remover esta parte e colocá-la com o nosso cartão postal. Fechamos novamente o pKa para ser tudo está bem e também que. Então dentro do Picart vamos colocar nossos dados. Então, primeiro não precisamos de modo de edição, temos apenas uma ordem de exibição, então precisamos remover toda essa parte. Dizemos que temos apenas uma vista ordenada. Então eu diria aqui Ver ordem e aqui. Podemos dizer que você pode editar o status do pedido aqui. Então só podemos ter essa informação. Então agora aqui podemos usar nosso conjunto de campo. Usando conjunto de campos é muito simples, é apenas você tem que copiar esta parte e importar o módulo. Então vamos importar o módulo em si como fizemos anteriormente em nosso módulo de aplicativo. Então vamos aqui, temos importação deste módulo, módulo conjunto de campos, e então colocamos aqui. Então, é claro, como eu disse, nós temos muitos módulos. Você também pode separar os módulos como faremos mais tarde. Vou mostrar-lhe na parte de refatoração. Vamos, vamos fazer um módulo especial apenas para o UX não ter módulo muito grande. Mas nós estamos indo aqui no curso passo a passo. Salvamos esta parte e então verificamos qual é o HTML necessário para isso. Então podemos dizer que, Ok, eu quero o que é dobrado. É muito simples. Alternar modelo é este. Então podemos copiar esta parte e depois colocá-la aqui. E aqui teremos nosso conteúdo e podemos definir nossos cabeçalhos. Por exemplo, eu quero alternar cabeçalho para mais detalhes e, em seguida, itens de ordem e, em seguida, endereço do pedido. Então precisamos aqui detalhes do pedido e outro para itens do pedido. E também precisamos de outro para o endereço do pedido. Então aqui nós salvamos e, em seguida, tudo aqui está alinhando e formatando para nós. Verifique as ordens. Vamos aqui de novo, verifique. Está bem, está tudo bem. Mas como você vê aqui, eles estão grudando um no outro. Temos classes prontas para margem e preenchimento para que possamos usá-los também aqui. Mas eu só quero mencionar para 1 que aqui no campo definido ou qualquer componente que é de prime e g, não podemos usar como classe como este e, em seguida, dar-lhe uma classe como um HTML. Há algumas chaves especiais para isso, então você precisa verificar sempre na documentação, o que é uma chave para dar uma classe específica para esse componente? Por exemplo, aqui no nosso caso, é chamado de classe de estilo. Então, na aula de estilo, eu posso usá-lo como uma classe. Então, podemos definir a classe que queremos para este painel alternado. Então eu quero ter uma classe que é chamado P margem inferior, por exemplo para e o mesmo para o outro. Então vamos salvar isso e tentar para ver se está funcionando. Ok, como você vê, nós temos aqui um espaço. Então vamos fazer de novo para os outros. Então eu preciso aqui para classe de estilo bem, e aqui classe de estilo também. Então temos aqui três aulas de estilo e está funcionando bem. E acho que também é visável. Então vamos colocar o nosso conteúdo, o que vamos ter. Por exemplo, aqui temos o ID do pedido, data do pedido, o status do pedido e o preço total do pedido. Pegamos tudo isso do back-end. Então você tem que repetir atrás de mim, o que precisamos fazer? Precisamos de um serviço. E o serviço está pegando os detalhes do pedido e no front-end ou no componente ou no item ou detalhe do pedido. Vou usar este serviço para pegar os dados. Mas vamos fazer primeiro este layout, este layout, eu acho que é bem simples. Como vê aqui, concordamos? E esta grade é de três partes, três partes iguais, e aqui a quarta parte. Então, como você vê, precisamos ter uma grade e coluna 444 e dentro de todos eles algum conteúdo de dados. Então podemos fazer isso simplesmente. Vamos primeiro para os detalhes do nosso pedido e diremos que precisamos ter uma grade. Então eu vou definir uma div que é uma classe chamada grade p. E, em seguida, dentro desta grade p, eu terei componentes ou itens onde eles irão definir três colunas. Então dizemos div dot py call. Por exemplo, você define uma coluna para que eu não possa ter coluna p para, então, por exemplo, temos que ter colocado aqui primeiro, segundo, terceiro, quarto. Então, vamos vê-los que eles estão alinhados um sob o outro em nosso modelo, exatamente. Então, temos tudo bem aqui. Então vamos sentir esses dados. Para preencher esses dados, precisamos, por exemplo, um rótulo como um título, e, em seguida, os dados dentro dele que estou recebendo do banco de dados. Então eu iria aqui para um título como com H5. E, em seguida, em H5, eu digo ID do pedido, como um texto codificado. E, em seguida, um parágrafo onde eu possa colocar o ID em si. Então teremos aqui algum ID, e este ID será substituído, que temos do banco de dados. E você vê esse ID de pedido parecido com isso. O que precisamos também, precisamos da data do pedido e do status do pedido. Então temos aqui também outro h5. Então eu vou ter aqui ordem, que será data. E também teremos algum encontro aqui, certo, que virá do banco de dados também. E também precisamos aqui outra coisa que é chamado de status do pedido. Então você terá aqui o status do pedido, mas esse status, não será, por exemplo, um texto, será um menu suspenso. Então eu vou usar P caiu como ele é definido, isPrime NG. E este bloqueio terá opções e veremos mais tarde como vamos preenchê-lo com os dados. A última coisa que precisamos também é o preço total da ordem, como falamos anteriormente. Então eu preciso aqui outro F5 e que eu vou dizer preço total da ordem. Eu vi que seu usuário pode saber qual é o preço total do pedido. E então, dentro dela, eu terei algum preço. Então vamos guardar isso. Nós vamos aqui, ok, nós temos aquele menu suspenso, nós temos os dados, nós temos a data, então nós só precisamos preencher os dados. Então vamos primeiro fazer ou pegar dados do banco de dados. Como você se lembra, definimos um serviço e esse serviço contém detalhes do pedido. Então, se formos para a biblioteca de pedidos e temos aqui Serviços e serviço de ordem, temos algo chamado ficar mais velho. Então, em nosso componente de detalhes do pedido, precisamos usar o serviço de pedido. Então primeiro eu tenho que dizer privado ou o serviço. E então teremos um tipo que é chamado de serviço de ordem. E esse serviço de pedido é importado automaticamente do meu espaço de trabalho. E, em seguida, as ordens em é definido como vimos anteriormente, um método que é chamado este ponto obter o chamado, é muito simples. Só precisamos chamar esse método. E então esses métodos serão implementados como privados. E então dizemos ficar mais velhos e obter ordem nos dará a ordem para uma variável ou um membro da classe, que é chamado ordem e tem uma ordem de tipo como nós previamente definido o modelo de ordem. Então, aqui vamos nós. Perdemos um serviço. Dizemos que este serviço de ordem ponto, ponto obter ordem, e depois ficar mais velho com vir com a ordem que está vindo dos parâmetros que eu tenho pela URL. Então precisamos também de usar o serviço que usamos anteriormente, que é chamado de rota ativada. Então temos aqui importado rota ativada. E nesta rota, vou observar o parâmetro isto, a truta e depois os params. E então eu vou ver se inscrever, e então eu vou pegar params e então eu vou assiná-los. E como você vê anteriormente que no módulo de aplicativo definimos nosso param como ID. Então temos aqui a identificação. Então, quando você tem algum porco, você tem que usá-lo. Então precisamos usar ID, por exemplo. E eu vou dizer aqui, se params ponto ID, e então eu vou chamar o serviço de pedido get. E usaremos esse serviço, esse ID, porque no ID de params, como você se lembra, estamos obtendo o ID do pedido. Então eu vou obter um pedido com esse ID. E então dizemos que temos a ordem e a ordem será igual à ordem. Então esta ordem, que definimos como um membro da classe, que será a mesma que ordem. Então aqui nós salvamos tudo e então nós vamos para o nosso front-end e verificar se tudo está funcionando bem. Então não recebemos nenhum erro. Estamos apenas recebendo um erro aqui. Eles precisam de ordem. Então, só precisamos defini-lo de alguma forma para não ter esse erro no console para dizer ID do pedido. E este será o seu dever de casa para fazê-lo, a ordem principal como você verá nas próximas palestras. Então salvamos esta parte. Nós não temos qualquer erro apenas como ES erro lint que este método não pode estar vazio, nenhum problema. E então vamos preencher os detalhes dos dados do pedido. Então, por exemplo, nós definimos a classe membro que é chamado ordem. E este pedido eu vou substituir com o ID do ponto do pedido. Então eu vou obter este ID de ordem entre esses colchetes para ser definido como uma variável e, bem aqui, precisamos ter a ordem de data ordenada, data ordenada, e o menu suspenso vamos deixá-lo cair. A próxima palestra e o prêmio total do pedido será da mesma forma que fizemos aqui. Então vamos ter ordem o preço total. Então economizamos e verificamos que tudo funciona bem. É melhor sempre quando estamos recebendo dados para o front-end, é melhor ver se esses dados estão prontos ou não. Às vezes, em servidores lentos , quando você não obter ordem, você receberá erros no console e isso estará causando um problema e não há dados serão exibidos. Então, é melhor esperar que este pedido esteja pronto, como esta variável esteja pronta porque, como você vê, temos muitos tempos de espera. Então precisamos assinar params e esperar pelo serviço até esta ordem, Garfield. Então, é melhor usar sempre ng-if para esse ritmo. Então eu diria no nível da página de administração, usarei ng-if. Então, em ng-se eu vou dizer se há ordem, então exiba o conteúdo dentro. Caso contrário, exiba a página vazia até que os dados venham. Então, até que os dados vêm significa que eu não vou obter erros quando eu vou dizer, por exemplo, ordem ponto algo, porque se isso não definido, então eu vou ter erro no console. Ele vai dizer que não podemos obter ordem de data de variável indefinida. Então é melhor aqui ter ng-if em GF, isso significa que se houver ordenado, como há ordem definida, há dados dentro desta ordem. Em seguida, uma garra para mim os dados e mostrar a página caso contrário, exibir página vazia. Certo, agora temos o pedido aqui. Vamos fazer um pouco de estilo ou purificação para esses dados. Por exemplo, temos aqui a data é feia, não está formatada, e também o preço mais antigo não está vindo como uma moeda. Então, como conversamos antes, aquele Angular vem com algo chamado canos. E nesses pipe você pode definir o que quiser para formatar seus dados. Por exemplo, vou usar a data aqui, que é para usar a data. E esta data será formato curto como vimos anteriormente, exatamente. E o prêmio, há algo chamado moeda. Então, se você quiser ver todos os tubos que você quer, basta fazer isso e todos eles serão colocados e exibidos aqui. Então você pode ter, por exemplo, data, você pode ter número, pessoa, e também fatia. E se você quiser também exibir dados JSON, todos esses pipe estão disponíveis para exibir seus dados da maneira correta. Então, por exemplo, aqui vou usar a moeda. Então vamos salvar e verificar se o gelo que temos aqui que moeda é muito bonita e também a data está formatada. 122. Exibição itens de pedidos com preços subtotais: Então vamos verificar agora o que estamos recebendo do backend para exibir os itens de ordem. Então o que eu vou aqui e abrir a rede e as Ferramentas de Desenvolvimento, então eu vou ver que eu estou recebendo aqui alguns pedidos. Então você tem duas opções. Uma das opções que você pode registrar o ID do pedido depois de obtê-lo. Por exemplo, quando eu vou aqui para detalhar, e, em seguida, você pode fazer um log de console e , em seguida, esta ordem de ponto para ter certeza de que dados estão vindo do back-end. Ou de outra forma, você pode ir diretamente para a guia de torque autêntico e, em seguida, encontrar o pedido que chamamos anteriormente para obter o detalhe do pedido. Então eu o consolo, procuro no registro do console. Vamos ver que temos itens de ordem e este item de ordem é matriz. Por exemplo, no nosso caso aqui está vazio. Vamos tentar outro pedido que eu tenho aqui ou ali com alguns itens. Certo, temos outro. Podemos apagar, atrasar este, ir aqui ou ali itens. Ok, eu tenho aqui dois itens. E como você vê em todos os itens do pedido, eu tenho esse produto e a quantidade. Então eu tenho aqui para encomendar itens. Cada um deles é para produtos com uma quantidade e para exibi-los. Se verificarmos aqui o nosso modelo, temos o seu nome, categoria de marca, subtotal, e temos aqui o preço total e como ele está contando tudo isso. Você tem duas opções. Uma das opções que você pode criar uma tabela e exibir esses dados ou, de outra forma, você pode fazer isso manualmente. Podemos fazer isso manualmente e facilmente fazendo também a estrutura de campo ou uma grade, uma grade dentro deste campo. Então podemos dizer também aqui que dentro deste conjunto de campos, precisamos definir não o conteúdo, mas outra grade. E esta grade terá a mesma estrutura que vimos anteriormente. Eu vou preenchê-los. Então, como você vê aqui dentro deste conjunto de campos, eu defini um grande anúncio dentro desta grade, há colunas de dois, então até que eles tenham igual a 12, porque nós temos 12 colunas disponíveis. Precisamos de seis colunas e todos esses dados e inflamação. Se formos verificar nosso item de pedido, tudo bem, temos eles exatamente como precisamos. Então agora precisamos pegar os itens do pedido daqui e colocar as informações nessa tabela. É muito simples. Também podemos fazer outra grade debaixo dela. Então, será exatamente igual a esta grade. Mas vamos substituir esses dados de texto com a ordem ou os dados de pedidos. Mas essa grade ser repetida porque precisamos de vários itens de ordem, precisamos de várias funções. Então você pode considerar que esta é uma linha e cada rocha será repetida com base nos dados que estão vindo por itens de ordem. Então, como vemos aqui, temos MD4. Md4, eu vou colocar dentro dele todos os itens do pedido. Então eu vou dizer deixar o item de ordem fora, encomendar que itens de ordem. Então vamos ter aqui, ou os itens que eu acho que temos aqui um erro no modelo. Ele diz que o item do pedido não está definido. Então eu acho que nós precisamos voltar para o modelo para verificar se tudo está funcionando bem aqui. Temos aqui ordem e, em seguida, o campo é chamado itens mais antigos devem ser itens alterados. Então, voltamos novamente, vemos que o erro é corrigido. Então não temos nenhum problema aqui. E então eu vou substituir o item do pedido por esses dados. Então, primeiro precisamos do produto do item do pedido. Então temos aqui primeiro item de pedido, e dentro deste item de pedido que é um produto, e dentro deste produto há detalhes do produto. Então, primeiro de tudo, eu vou dizer item de pedido, item de primeira ordem forçado, que eu recebi do LC4. Então eu diria que ele encomendar produto ponto item e, em seguida, me dar o nome do produto. Então é assim que deve ser feito. Então, como vemos aqui, temos todas as informações que obtivemos com este MD4. E então o mesmo, será exatamente para sua marca. Vou verificar aqui, ir para o produto, e o produto será a marca também. Precisamos dessa categoria. Mas vamos ver como essa categoria é implementada. Então vamos aqui e verificar se essa categoria também preencheu. Então precisamos nomear a categoria. Então, nome do ponto da categoria. E também precisamos do preço. Por isso, temos de verificar também isto. Então temos que dizer item de ordem ponto-produto. Essa quantidade de preço vem diretamente com o item do pedido. Então temos aqui o produto e a quantidade. Então escolheríamos isso. Então dizemos a quantidade de ponto do item do pedido. E depois disso, o subtotal, veremos como podemos corrigir isso. Então temos aqui olhos de ordem, temos quantidade três, computadores premiados e marca, e tudo está funcionando perfeitamente. Então precisamos agora do subtotal. O subtotal, precisamos tê-lo bem calculado. Então podemos calcular multiplicando o preço com a quantidade. É muito simples. Então eu vou aqui copiar este e dizer preço multiplicado pela quantidade. Temos aqui tudo multiplicado. Então vamos verificar novamente, ok, Temos também o preço está vindo pelo cálculo do preço multiplicado por 3. Então chegamos aqui 750 e o mesmo para aqui. Podemos dar-lhe também, uh, bandeiras aqui como moeda e também para o preço que podemos dar aqui também uma bandeira ou uma moeda de cachimbo. Então e então ele será exibido assim. Vamos dar algum espaço entre essas grades. Por exemplo, temos aqui um pouco pegajoso e assim podemos fazê-lo com mais espaços. Então eu posso dizer também esta grade dar para mim margem inferior será cinco. E o mesmo para a grade em si. Assim, cada grade será gerada, terá o botão de margem cinco. Então, como vemos aqui, tudo é perfeito. Então podemos fazer com que os ousados seja com você. Prime NG também vem com algumas classes, são classes prontas para fazer coisas ousadas. Então, se você for aqui para os flocos Prime e você verá algo chamado texto. E neste texto você tem alguns estilos para que você possa alinhar o texto e também dar-lhe algum estilo. Então, por exemplo, eu quero dar esta pesquisa de texto p. Então podemos ir aqui e, em seguida, podemos definir cada coluna como um p, texto negrito. Então temos todos eles serão ousados. Então, quando salvamos, vamos para aqui, temos tudo é careca. Então agora nós definimos todos esses itens e também temos aqui subtotal. Precisamos ter também aqui esse total, para que o usuário possa ver o subtotal e, em seguida, o preço total de toda a ordem. Como vimos anteriormente, como calculamos o preço total no back-end. Para fazer isso, podemos também definir outra grade para isso. Então podemos ter outro div. E esta div terá uma classe de grade de pico. E esta grande grelha com duas colunas. Um é para o título ou o rótulo do preço total e, em seguida, o preço total em si. Então vamos ter um div com P, chamar dois, e outro, teremos p igual a, e aqui vou escrever um preço total. E aqui também, vou definir esse prêmio total, que recebo da ordem em si. Então, aqui vou dizer me dê o preço total da ordem. Então peça ponto preço total, guarde isso. Nós tentamos. Vamos ver que temos preço total. Este preço é a soma dos subtotais. Mas vamos dar alguma compensação para estar exatamente sob essas linhas como vemos aqui. Então também podemos fazer isso definindo algo chamado offset. Então, quando você usa offset para isso, em seguida, ele vai empurrar as colunas, alguns espaços, jogá-lo iria obter o lugar certo. Então eu quero empurrar aqueles como, por exemplo, temos esses 2222, então precisamos compensar oito, então 1234. Então aqui eu vou ter as duas colunas. Então eu vou deslocar colunas e eu vou dar-lhe um descanso, quatro a dois. Então podemos fazer isso também. É muito simples. Você acabou de dizer que a primeira coluna terá um deslocamento de oito. E quando dissermos, veremos que foi compensado debaixo deles no oitavo lugar. Vamos torná-los tão carecas como vimos anteriormente. Então podemos dar a este, por exemplo aqui, classe ousada. Então eu tenho p texto negrito, e outro terá PTX parafuso. E você também pode dar-lhes um pouco de estilo como cor. Então, podemos dar a todo o conteúdo da grade para ser cor, por exemplo, verde. Então eu diria estilo e desde estilo eu direi cor, e então você pode definir uma cor verde. Então, depois de salvar isso, veremos que tudo tem o verde nesta grade. E esta grade tem um texto em negrito, que tem preço e preço total. Vamos dar-lhe também alguma moeda como fizemos anteriormente, para ter formato de moeda. Está bem, Legal. Agora temos nossa tabela de pedidos com essa moeda. Como eu disse antes, você tem a opção de usar uma tabela, mas usamos a tabela muitas vezes. Eu queria usar alguns específicos com uma grade para que você possa se acostumar com as grades. 123. Endereço e informações para compra: Então, por enquanto terminamos os detalhes do pedido e os itens do pedido. Vamos fazer o mesmo para o endereço do pedido em seu endereço é exatamente o mesmo como ele vem com uma informação do usuário e também com o detalhe do pedido. Então eu vou saber qual usuário encomendou e também, eu sei o endereço, e é isso. Então podemos ir aqui e definir outro conjunto de campos. Não podemos ter outra grade ou div, podemos dizer uma grade de pico. E dentro deste copo, e eu vou ter colunas. Então eu vou ter três colunas e cada uma delas irá conter alguns dados específicos. Então eu vou dizer H5, me dê outro endereço ou endereço do cliente é até você como você quer nomeá-lo. E então dentro deste B, eu vou obter os detalhes do pedido que estão vindo do back-end. Então o que queremos aqui para exibir todas essas informações para economizar tempo. Já o defini. Então nós temos aqui o pedido ou endereço será encomendado que endereço de entrega, e então eu pulei uma linha e, em seguida, endereço de entrega ISA dois, e, em seguida, o zip e, em seguida, a cidade perto um do outro. Em seguida, BreakLine onde eu vou ter o país da ordem. Ok, vamos verificar essas mudanças, como vai se tornar no front-end. Podemos ir de novo aqui. Ok, eu tenho aqui o endereço, Rua Flower, 13, Praga, República Checa. Certo, precisamos mostrar também o nome do cliente. Então, na próxima coluna, vou dizer aqui h5. E, como você se lembra, as informações do cliente vêm com uma classe de usuário. E dentro desta classe de usuário eu terei o nome. Assim, podemos ter também aqui informações sobre o usuário. Então eu vou ouvir dizer que, dê-me a ordem que o usuário, e depois disso, é melhor ter o nome. Então guardamos isso. Está bem. Eu também tenho o meu nome. Você também pode em que outras informações como e-mail ou, por exemplo, número de telefone. Então podemos ter aqui outro h5, podemos dizer informações de contato. Ou vou definir, por exemplo, o telefone. Então eu vou dizer aqui Ordem e não para o usuário, mas será exatamente vindo no nível de ordem. Então vamos chegar aqui ou ali e depois formar. Então guardamos isso. Vamos de novo. Ok, nós preenchemos o detalhe do pedido, então tudo está funcionando bem. Agora, eu tenho aqui dois pedidos, mas você pode adicionar mais pedidos se quiser. Então aqui meu pedido está ótimo. Nós temos tudo. Nós pedimos data, status do pedido, vamos ver na próxima palestra, usamos a moeda que usamos, como usamos a grade, e também usamos as informações sobre os dados de captura do pedido e itens do pedido. 124. de ordem Atualizar: Ok, nesta palestra vamos ver como podemos atualizar o status do pedido. Como você se lembra, temos um status específico para os mais velhos. E agora vamos preencher esta lista e então teremos todo o status da ordem. E quando selecionamos um desses status, então ele receberá, por exemplo, nitrificação para nós para atualizar o status do pedido. Então, como primeiro passo, vamos preencher esta lista ou esta lista suspensa. Como você sabe aqui não estamos usando um formulário, então podemos usar modelo NG, que é uma ligação bidirecional para leitura e inserção de dados para a lista suspensa. Então, se formos para o prime end, não podemos ver no menu suspenso que temos o básico. Vamos usar este básico. Então o básico irá conter, por exemplo, ele vai pedir um raio do status e então eu posso usar o modelo NG como é mencionado aqui. Então precisamos definir as opções e o modelo NG. Então, primeiro de tudo, vamos ter as opções. E como vemos aqui, as opções vem como matriz. Então vamos pegar esta parte e, em seguida, colocá-la em nosso componente de detalhes do pedido. Então, podemos ir aqui onde definimos o status do pedido. Então temos aqui a lista suspensa, e então temos opções. Será status de ordem, como temos vários estados dentro desta ordem ou desta matriz, e temos um status selecionado. Então, primeiro de tudo, precisamos preencher o menu suspenso, o menu suspenso. Como você se lembra, nós definimos anteriormente no item da lista ordenada, algum array de status do pedido. E este array de status de ordem, ele irá conter todos os estados que podem vir do front-end. Mas como vemos, não é array, array, mas dicionário. E nós vamos mapear este dicionário para e mudá-lo para array. Mas primeiro, podemos colocar essa constante em arquivo adicional ou arquivo externo para que possamos ler a partir dele e, em seguida, podemos usá-lo nos dois componentes. Então aqui no nível ordenado, eu posso definir um novo arquivo. Não podemos dizer constantes de ponto mais antigas. Podemos chamá-lo assim. E, em seguida, dentro desta constante mais antiga, eu vou colocar este status de pedido e exportado para que eu possa usá-lo em outros lugares. Eu diria aqui, estado da ordem const exportação. E este status de ordem será array ou o dicionário de aderir para manter. Tudo está funcionando bem. Nós estamos indo para importar este status de ordem do arquivo de constante. Então subimos um nível e obtemos a constante de ordem. Então, vamos nos certificar de que tudo está funcionando bem por enquanto em nossa lista de pedidos. Tudo está funcionando e o mapeamento está funcionando bem. Ok, Agora vamos usar esta constante em componentes de detalhes de ordem. Então, vamos para o componente e tomar também novamente importar também o status do pedido de e, em seguida, também um passo para cima e, em seguida, me dar a constante. Ok, mas como você se lembra que nós dissemos que caiu para baixo, exceto apenas matriz. Então precisamos mapear esta matriz ou este dicionário para ser como uma matriz, então podemos usá-lo também. Então nós definimos aqui o status do pedido é, para que possamos usá-lo também. Podemos definir isso. Então, podemos dizer aqui status de ordem, que é, por exemplo, matriz vazia por enquanto. Por isso, temos de definir isso. Então, em Anki no init, podemos dizer este status de ponto. Então precisamos mapear o status do pedido e é melhor chamá-lo antes de obter o pedido para que o menu suspenso esteja pronto e, em seguida, vamos obter o pedido. Então, o método que eu defini aqui, e então eu vou ver como podemos mapear esses status mais antigos para matriz de ordem. Então, o que precisamos para o menu suspenso, na verdade, precisamos de opções, e essas opções consistem como vimos anteriormente a partir de ID e nome. Assim, cada leilão terá ID e um nome, nome para exibir e id 4 usando e enviar para o banco de dados. Então, se você se lembrar, temos usado uma função que é chamado de chaves de ponto de objeto. Então eu posso ir através de um dicionário para todos os objetos dentro de um dicionário. Então, quando eu digo aqui, object.Create deste objeto, então ele vai me dar 0, 1, 2, 3, 4. Vamos tentar isso. Então eu diria chaves de ponto de objeto do status do pedido. E podemos fazer um registro de console para ele. Então, para ter certeza de que tudo está funcionando perfeitamente, eu quero que você entenda por que eu estou fazendo isso. Então, primeiro, precisamos console chaves de ponto de objeto de log do status do pedido. Então vamos a uma das ordens. Ok, eu tenho 0, 1, 2, 3, 4. Ok. Mas não temos valores. Não temos nenhum nome desse status. Como podemos fazer isso quando eu criar outro log do console. E então eu vou ter aqui outro registro de console. E eu digo, por exemplo, me dê o status do pedido e, em seguida, diga 0. Então eu vou aqui, eu vou dizer que 0 está dobrando e cor é primária. Então, quando eu quero alcançar um dos status do pedido, eu tenho que especificar a chave e eu estou recebendo essas chaves através de chaves de objeto. E como você se lembra, nós temos uma matriz. Então, através de loop, através deste array, eu posso fazer algo com ele. Então vamos novamente aqui, objeto do mapa de ponto de status. Então eu estou indo para loop ou passar por todos esses elementos, gerar uma nova matriz em estilo diferente que se encaixam para a minha lista suspensa. Então, quando eu faço o mapa, eu passo por todas as chaves. Então eu vou dizer chave, então ele vai retornar para mim chave por chave. Vamos mover este registro de console aqui e colocá-lo aqui. E no lugar do 0, Eu vou dizer me dar um console para mim o status da ordem da chave que é retornado a partir desta matriz. Então, quando economizamos, notamos que eu recebo todo o status tão facilmente. Podemos mapear todos esses elementos e torná-los como matriz de ID e rótulo ou ID e nome. E como você sabe, esse mapa é apenas para alterar o estilo de dicionário ou estilo de matriz. Para que possamos fazer algo diferente. Podemos construir nossa própria matriz. Então eu vou dizer aqui, devolvido para mim, para cada chave que você está passando, este array de objeto é devolvido para mim ID. E este ID será a chave em si. E então o nome será o status do pedido e não o status do pedido em si, a chave. E dentro temos não só o status do pedido, temos cor e etiqueta. Então eu vou usar o rótulo porque eu preciso do nome. Eu quero exibir este nome em nossa lista suspensa, então eu vou dizer rótulo, ok, nós salvamos para ver o resultado de todo esse mapeamento, então nós precisamos atribuí-lo a constante. Então eu vou dizer que este status de ordem de ponto é igual a chaves de objeto e todo esse mapeamento. Então não podemos salvar isso e ir novamente para o nosso aplicativo. Vamos ver que tem a lista suspensa de objeto, objeto. Certo, vamos ver qual é o problema, por que temos isso. Então, podemos console log eu sempre, por exemplo, quando eu não sei o que está acontecendo ou quando eu recebo este objeto, matriz de objeto, Eu console log as coisas. Então, se você se lembra, nós atribuímos para a lista suspensa esta esteatose mais antiga e eu vou registrar o console. Então eu quero ver o que há lá. Então, como você vê aqui, nós temos, nós temos um array, ok, tudo bem. Temos ID e, em seguida, nome dobrando o problema aqui, que m energia principal que você precisa especificar qual rótulo você deseja exibir dentro de sua matriz. Então, se você quiser exibir o nome, então você tem que dizer opção rotulada, em seguida, nome. Como você vê aqui, ele definiu nome e código. Então ele pode dizer que pode exibir o acorde ou ele pode exibir o nome. Por isso, temos de fazer o mesmo. Então precisamos dizer em nossa lista suspensa, por exemplo, não me mostre o status do pedido como objeto, mas me mostre o nome dele. E o rótulo de opção será o nome. Certo, volte para a nossa candidatura. Vamos ver que temos o nome exibido exatamente como definimos em nossa constante. Ok, e agora o modelo NG? E você modelo, ele vai retornar para mim esse elemento selecionado e também eu posso atribuir um elemento selecionado para ele. Então status selecionado, ele será o elemento selecionado deste menu suspenso, então precisamos defini-lo. E podemos dizer aqui também status selecionado, será qualquer. Ok, vamos ver como podemos obter o valor. Por exemplo, eu quero mudar quando eu mudar daqui para isso, e isso para isso, eu quero ver as mudanças. Quero fazer o registro do console. Qual é o resultado dessa mudança? Então é muito simples. No menu suspenso, você pode simplesmente definir um método, método saída em sua lista suspensa, que é chamado de mudança. E quando mudamos algo, você pode criar um método, por exemplo, na mudança de status. E nesta mudança, você pode passar uma palavra-chave que é chamado evento, e nós salvamos esta. Vamos novamente para a nossa aplicação, definimos o método e dizemos sobre mudança de status e este evento podemos dizer, por exemplo, pode ser evento como este. E vamos registrar este evento para que possamos ver o que está acontecendo aqui. Então, podemos dizer aqui, evento de log console, é melhor também excluir todos os logs do console, que definimos anteriormente para ter um console claro. Então nós temos aqui log console do evento quando eu vou mudar esse status. Então eu vou mudar. Mas não estou recebendo nada disso porque não podemos usar a mudança. É exatamente como eu te disse antes sobre o estilo. Você não pode usar uma classe sobre esses membros. Você tem algumas chaves específicas que você tem que seguir. Então eu sempre encorajo você a ler documentação do componente quando você quer fazer alguma coisa. Então, quando eu for aqui, eu quero ver quando eu mudar o que vai acontecer. Então também podemos descobrir sobre tudo isso. Você vê, você tem um monte de métodos. Por exemplo, há onclick, onchange on filter. Então, há muitas coisas. Então o que precisamos exatamente é inalterado. Então, quando eu substituir essa mudança por mudança, então eu vou ver esses resultados. Não é como um menu suspenso padrão. Não é como um botão padrão. Então você tem que ler a documentação e ver o que você precisa aqui. Então vamos tentar de novo. Ok, legal. Temos evento original e não há valor e o valor é um. Assim, o valor retornado como objeto. primeiro campo é o id, e o segundo é o nome do status. Então, por exemplo, eu tenho aqui falhou, então eu vou ter objeto, que é valor e ID e nome. Então, é melhor de alguma forma também podemos retornar apenas o ID porque vamos usar apenas o ID para armazená-lo no banco de dados ou carregar o status do pedido com base nisso. Assim, podemos ver também na documentação que temos também, não rótulo opcional, mas valor de opção. Assim, o valor da opção será usado para este campo ou para este cão para baixo, seria o ID. Então nós conversamos anteriormente muitas vezes sobre isso. E eu só quero que você saiba como exatamente especificar as coisas e as entradas para o componente do Prime NG. Mudamos novamente, Ok, temos aqui, novamente, temos o valor dois, então estamos recebendo apenas o valor. Então, na mudança de status, eu vou atualizar o status do pedido com base em como nós o obtivemos no back-end, como nós fizemos no back-end. Então, como você se lembra, eu estava criando um put mal soletrado e, em seguida, post método. Estou apenas enviando o status para a ordem específica na nossa API de pedidos. Então, quando eu enviar este pedido, eu vou obter o status atualizado e, em seguida, eu vou receber o pedido novamente. Então só precisamos passar o status. Não precisamos passar todos os dados do pedido como fizemos anteriormente com o produto e a categoria. Então, para isso, precisamos de um serviço. Este serviço será pedido de atualização. E como você se lembra, definimos todos os serviços que precisamos para atualizar o pedido. Então, depois que eu atualizar o pedido, eu não vou enviar o pedido em si. Vou enviar apenas o status. Então eu vou dizer aqui status. E como você se lembra, no JSON, estamos enviando o status como este, status JSON e dois, então você também pode enviar o status, dike isso ou definir seu próprio tipo. Então eu vou ter status. E o status será uma string e o que eu conseguirei em ordem. Então, para obter o pedido em si depois de atualizar o meu pedido. E também, precisamos passar o ID do pedido, que também será string. Então precisamos aqui também, ou da identificação deles. E então enviarei o status do pedido. Então aqui é diferente, mas é claro que você pode enviar o pedido novamente e ele será automaticamente, o back-end terá apenas o status como vimos na parte back-end. Então aqui temos ordem de atualização. Vamos voltar ao nosso componente e criar ou chamar o serviço de atualização. Então eu iria para detalhes do pedido novamente e OnChange, Eu vou chamar não evento, mas eu vou dizer este ponto Order Service, Atualizar ordem. E atualizar a ordem. Eu estou indo para tortas o status como você vê aqui, nós temos cadeia de status, eu vou enviar um objeto terá status, eo status será o valor do ponto do evento, como vimos anteriormente no log do console. E também, precisamos enviar também o ID do pedido. Então precisamos também aqui, quando eu receber o pedido, eu preciso dizer isso, o ID do pedido. Então aqui temos tudo bem. E assim como conversamos anteriormente, dissemos que não será executado até que você assine. Então temos aqui ordem e talvez possamos, por exemplo, console registrar o mais antigo atualizado. Então vamos salvar e ir novamente para o nosso front-end e verificar para que possamos dizer enviado, ok, Ele foi atualizado e nós temos o novo status. Então nós temos status para, ok, vamos fazer outra falha. Então, podemos ir aqui e veremos o status é para, ok, então, por exemplo, isso falhou. Vamos de novo às ordens. Veremos que o status foi alterado também. Então vamos novamente, atualizamos entregue. Nós vamos aqui e o estado que se atualizou. Então, é muito bom ter como alguma notificação para o usuário. Como sempre fizemos, que tudo está bem. Então, quando ele clicar aqui, em seguida, ele vai receber uma notificação de que ok, a mensagem ou o outro, a ordem foi atualizado para isso. Se você se lembra, nós criamos ou chamamos o Serviço de Mensagens e o método que terroristas farão por mim o que eu quero. Então, podemos copiar esta parte e, em seguida, ir novamente para a nossa lista de detalhes do pedido. E dizemos que depois deste eixo, ok, Mostrar saxões do serviço de mensagens e, em seguida, dizer ordem é atualizada. Caso contrário, quando houver um erro, mostraremos o erro. Mas primeiro, vamos chamar o serviço de mensagens. Então nós vamos aqui para o nosso construtor e, em seguida, chamamos serviço de mensagens privadas, que será Serviço de mensagens, que vem da energia Prime. E depois salvamos, tentamos de novo. Ok, tudo está funcionando bem. Então o pedido foi atualizado. E se formos de novo aqui, está funcionando bem. Então, quando vamos novamente e verificar se há erro, então me mostre o erro. Então, aqui após a assinatura, posso dizer também que, se houver erro em geral, faça para mim uma mensagem de erro e diga que o pedido não é atualizado. Mas é claro que o Estlund está reclamando aqui que não usamos esse erro, então você pode excluí-lo ou você também pode imprimi-lo nos detalhes. Mas para mim agora, Eu vou apenas exibir ordem não é atualizado e, bem aqui, precisamos excluir a ordem para que não estamos usando aqueles. Não estamos apenas exibindo mensagens após a assinatura, falha ou sucesso, ok, como você vê aqui, temos agora tudo está atualizado e nosso status do pedido é atualizado. Uma última coisa é deixado que quando eu vou para ordens, por exemplo, eu tenho aqui um entregue, mas quando eu vou aqui, Eu ainda vê-lo como pendente. Isso é carne causada que quando estamos carregando o pedido, não estamos atualizando o status selecionado no menu suspenso. Então simplesmente você apenas ir aqui e dizer que esses pontos selecionado status será ordenado status ponto. Então isso é tudo. Você só precisa fazer isso para ter certeza de que você está inserindo o status correto. Então, como você vê aqui, temos um entregue e pode ser atualizado facilmente. 125. Crie uma página de login: Tudo bem, agora vamos ver como podemos criar o componente de login. Mas primeiro, vamos dar uma olhada no nosso gráfico sobre a estrutura do nosso projeto. Como você se lembra, que criamos uma biblioteca que é chamada de usuários e biblioteca de autenticação. E nesta biblioteca, ele será compartilhado entre todos os aplicativos. Porque eu não preciso repetir o componente de login em cada aplicativo. Ou a página de login, que conterá e-mail e senha. Vou criar esses componentes para serem compartilhados também na biblioteca do usuário. Então, como você vê aqui, teremos um componente de login e um componente de registro. E além disso, teremos também os serviços que vão me ajudar a fazer login e registrar um novo usuário. Como você leu no artigo anterior, precisamos fazer muitas coisas em relação às autenticações. Temos muitas palestras e muitos recursos para implementar dentro dessas palestras nesta seção. Então, primeiro de tudo, eu vou mostrar a vocês como criar o componente de login para ser compartilhado entre todos os aplicativos. Eu começaria primeiro a ser, por exemplo, apenas templante. Então, teremos apenas HTML, CSS, teremos página de login agradável, e então vamos ver como conectá-lo ao aplicativo, que é aplicativo painel de administração. E então, mais tarde, quando vamos trabalhar quando a questão da obrigação, nós estávamos conectados lá também. Ok, como fazemos sempre, vamos criar um componente que é chamado de login. Então, estou usando um console ECS para criar um componente. Então, aqui eu vou colocá-lo dentro da pasta Pages, e então o nome do componente será um login. E também temos aqui onde é um projeto. Então não estamos usando admin, estamos usando a biblioteca do usuário e também, eu vou pular o estilo. Então já temos estilo público e também precisamos de um seletor. Então eu vou colocar usuários login como um seletor porque eu tenho usuários, eu estou dentro da biblioteca do usuário, então o prefixo será usuários e, em seguida, ignorar os testes. Então, executamos este componente ou este comentário, e veremos que o componente é criado dentro da biblioteca do usuário. Então, temos aqui várias bibliotecas, se você se lembra, uma delas é usuários, e temos aqui páginas. Um deles é uma página de login. A página de login que estou planejando fazer é esta. Então temos aqui como alguma imagem e também como algum administrador de loja de boas-vindas, nome de usuário ou e-mail, senha e enviar. E então temos aqui o espaço vazio. Então vamos criar o layout para isso. Vamos usar o sistema de rede de energia principal para criar todo esse layout. Mas primeiro, deixe-me falar sobre as rotas. Aqui temos rotas. Então também quando vamos ter um login, precisamos de uma rota para fazer login. Então, como podemos fazer isso, como você se lembra no aplicativo admin, no módulo do aplicativo, temos suas próprias rotas porque esses componentes estão localizados dentro deste módulo também, ou dentro desta categoria também. Então temos aqui os componentes e que as rotas estão localizadas aqui. Mas como você se lembra que nós criamos o componente de login dentro da biblioteca do usuário. E para isso, vou colocar a rota aqui para que os usuários tenham sua própria rota. Ele não deve entrar em conflito com essas rotas porque este módulo será usado também no módulo admin, então não teremos nenhum problema. Então vamos criar primeiro a rota. Como você se lembra, nós criamos constante que chamam de rotas. Esta rota tem um tipo que chamou rotas também. E essas rotas serão uma matriz de objetos onde eu colocarei minhas rotas. Então primeiro objeto terá um caminho que é chamado de login. Então, quando eu colocar no meu aplicativo barra login, então eu vou para este componente, que é componente de login, ok, agora eu criei aqui a rota, e vamos ver se estamos trabalhando bem. Então, meu supor que quando eu colocar aqui login, então eu vou ter página de login. Mas como você vê aqui, temos um erro que não existe porque módulo de usuários não é mais usado dentro do módulo de aplicação, que é chamado de módulo. Então aqui temos o módulo de aplicação. Precisamos chamar o módulo do usuário também. Então aqui teremos uma adição desses módulos. Teremos outra coisa que é chamado de molécula de usuários. Então vamos ter aqui usuários módulo, que vem dos usuários da biblioteca e verificar novamente que, que ele é automaticamente importado. Ele estará aqui como um módulo de usuário do meu espaço de trabalho. Então vamos organizar este código um pouco e colocá-lo aqui. Está bem, Legal. Vamos verificar novamente se vamos trabalhar bem. Então eu vou dizer login, ok, Ainda assim, Eu estou recebendo erro que esta rota não existe. Por quê? Porque se você se lembra quando criamos as rotas aqui. O módulo de aplicação, dissemos algo como módulo de roteador, chamamos de seca e módulo. E então nós dissemos para root, e então nós chamamos a rota, que tem analisadores e componente. Devemos fazer o mesmo no módulo do usuário. Então aqui também, no módulo de usuários, vou chamar o módulo de rota. E este módulo de roteador não terá lutado root porque a raiz é o aplicativo. Então, o aplicativo terá uma raiz. E o módulo deste usuário é um filho deste módulo. Então estamos chamando módulo de usuários dentro do nosso módulo de aplicação. Então, desta forma, este módulo é uma criança e eu quero usar os autores desta criança dentro da minha rota de aplicação. Então eu vou dizer para criança, e então eu vou especificar que rotas constantes, que eu defini aqui. Vamos guardar isso e verificar se tudo está funcionando bem. Eu vou voltar aqui novamente e eu vou dizer, Olhe no meu login funciona. Então, agora estamos atingindo o um componente que criamos anteriormente, que é chamado de componente de login futuro, eu vou falar sobre módulo de carregamento preguiçoso. Então nós temos aqui carregado o módulo totalmente, exatamente. Então vamos falar mais tarde sobre o carregamento preguiçoso, que está tornando o tamanho do pacote para o carregamento preguiçoso é o menor, como veremos isso mais tarde. Primeiro, vamos começar a modelar os componentes de login. Então, primeiro de tudo, eu vou ter o, este cinza, o fundo cinza. Então eu vou ter um contêiner de login. Então eu vou ter, por exemplo, div, e eu vou usar este lock-in e também em forma de registro. Então teremos registro de login e registro de login div irá conter também o painel, o painel que irá conter esta área branca. Então temos aqui todo o registro e aqui temos um painel. Então vamos criar isso. Então eu vou criar outro div e eu vou dar-lhe painel Login Register. E então eu vou jogar com equidade. Mas primeiro, lembre-se que criamos estilo público. Então, podemos usar também este estilo ou essas classes em nosso estilo público. Então, primeiro de tudo, eu vou ter aqui a biblioteca do usuário, se você lembrar, nós criamos um registro de login e usuários e usuários é chamado no nível do aplicativo, mas aqui não estamos chamando, então precisamos chamar os usuários como Bem. Então aqui podemos dizer clipes e, em seguida, importar o estilo que eu quero importar, que é lábios, usuários e usuário SCSS, porque temos aqui chamando todos os componentes. Mas aqui vamos excluir este porque vamos fazer apenas um, por exemplo, para um login e registro. Então podemos chamá-lo de login e registro. Então de primeira classe deste registro de login será este. E, em seguida, dentro que eu vou ter painel. Então, como você vê aqui, nós temos aqui como algum gradiente, que está indo de preto para cinza. Existem muitas ferramentas para criar gradiente. Você não precisa fazer isso manualmente, você pode copiá-los. Então eu vou fazer o que é chamado gerador CSS e gerador CSS3, você pode escolher o que você quer. Por exemplo, você deseja um gradiente e, em seguida, você pode especificar o gradiente que deseja criar. E então você pode copiar todo o CSS e, em seguida, usá-lo lá. Para mim, eu coletei algum gradiente, que é exatamente para o nosso caso. Então eu vou ter aqui o gradiente de cinza para preto. Como você vê aqui. Já definimos isso e guardamos tudo. Ainda temos um erro. Ele diz que o arquivo não corresponde ao estilo, porque aqui nós dissemos que olhar em apenas para que nós precisamos fazê-lo login e registrar. E eles fizeram este porque não precisamos mais dele. Então vamos guardar isso. E então veremos que não há fundo cinza porque devemos definir uma altura. Então, precisamos dizer que a altura desta página ou esta div será 100%, ou você pode usar VH, então dizemos 100 de uma altura de visão. Então, neste caso, teremos a altura exatamente como queremos. Temos aqui o gradiente, e então, como você vê aqui, temos um painel branco. Então vamos criar este painel. Então eu vou fazer, eu quero ter uma largura deste painel. Assim, terá, por exemplo, 650 pixels. E também terá uma altura que é 525 pixel, é como eu medi-lo, e cor de fundo será branco. Você também tem a opção de usar em um NG primo um monte de cores, e essas cores são definidas como este aqui. Então, se você apenas inspecionar em qualquer elemento, você vai vê-los aqui em baixo. Então você pode usar todas essas cores. Por exemplo, o branco é suface a. Então eu usaria esta cor é melhor para tornar todo o código unificado. Então eu vou dizer aqui var, então fase a, ok, vamos verificar isso. Ok, nós temos aqui o espaço em branco é criado, mas precisamos colocá-lo no meio. Então, como podemos fazer as coisas no meio. Então eu vou ter aqui posição absoluta, e então eu posso posicioná-lo como. Esquerda a 50 por cento, como no meio. E também a partir do topo será 50 por cento também. Mas precisamos dar margens. Então, como você vê aqui que ele tem alguma margem, ok, ele caiu, mas é demais porque, como você sabe, quando você coloca algo no meio, você tem que medir menos metade do tamanho do painel. Então podemos dizer, por exemplo, que você pode fazê-lo assim. Você pode dizer Calc 2 por cento menos metade de 650 é 325 pixels. E então será no meio. E também precisávamos no meio deste verde do topo. Então podemos dizer também, Calc 50% menos 525, digamos, por exemplo, é 260 pixels. Então, desta forma, podemos dizer que isso pode ser no meio, como você vê aqui. E quando você redimensionar a tela a partir da altura e da largura, ele vai ficar no centro sempre, ok, dentro deste painel agora vamos ter metade da imagem e metade do conteúdo onde eu tenho que colocar meu telefone, ele vai ficar no centro sempre, ok, dentro deste painel agora vamos ter metade da imagem e metade do conteúdo onde eu tenho que colocar meu telefone, senti por isso precisamos de uma nota. Então a grade terá coluna, você sabe, que essa grade tem 12 colunas. Então a grade estaria localizada dentro do painel. Então vamos dizer que me dê tudo isso como uma grade e me dê seis colunas para a imagem e seis colunas o conteúdo. Então vamos fazer isso. Dentro do painel, vou dar div, que é tem grade p. E dentro da grade eu terei também outra div, que terá P menos coluna e seis, porque temos seis colunas para a imagem. E dentro disso, eu vou colocar a imagem em si. Então eu tenho imagem definida e eu copiei na pasta avaliada, mas a pasta Ativos do aplicativo. Porque aqui não temos pasta de ativos. Então você precisa especificar o aplicativo que você obteria da imagem. Então, no aplicativo de administração, vamos colocar na pasta de ativos nossa imagem, temos imagens. E então eu vou colocar a foto de login aqui. Então aqui temos que dizer que a fonte da imagem estará exatamente na pasta de ativos. Assim, ativos, ele levará automaticamente o aplicativo, eles estão executando pasta de ativos do aplicativo, imagens. E então podemos dizer login. E guardamos isso. Nós verificamos. Nós vemos, ok, a imagem é colocada exatamente naquele lugar. Então agora fazemos a segunda coluna que conterá nossa própria forma. Então eu diria div dot novamente a coluna 6. E então dentro da coluna 6, eu vou ter, como você vê aqui, que nós temos um título e, em seguida, a própria forma. Então não podemos simplesmente dizer que eu quero ter h3 para o título. Direi bem-vindo. E também eu quero ter H2, por exemplo, página de login. E então temos que salvar isso. E então vamos ver que temos aqui bem-vindo e página de login. E sob eles, como vimos que precisamos criar o formulário. Então aqui temos que criar um formulário. Então eu definiria outra grade. Podemos dizer assim, você não pode considerar a grade como uma linha. Então aqui novamente, podemos dizer div ser chamado 12 ou sim, porque precisamos deles um sob o outro. E aqui vou colocar o primeiro componente, que é como o componente de e-mail. E também, eu estou aqui, vamos colocar a senha. Precisamos colocar o botão de enviar, mas o trenó faz alguma coisa. Você pode, por exemplo, se você se lembrar, na biblioteca NG prime temos componentes como este. Temos este ícone e, em seguida, o usuário. Então, seria ótimo se fizéssemos o mesmo para usar este componente também. Então temos aqui grupo de entrada, e ele tem usuário e nome de usuário, possamos copiar o mesmo para isso, ou podemos nomeá-lo como e-mail. Então temos aqui usuário, titular lugar será e-mail eo mesmo será para input-group, mas vamos colocar senha eo ícone de senha, como eu sei, ele está bloqueado. Então este grupo tem uma extensão para o ícone e também para a entrada em si. Vamos ver a nossa página. Ok, nós temos tudo, mas não é estilizado porque eu acho que nós não temos os estilos do Prime NC. Eu diria o porquê. Porque estamos aqui em um novo módulo e estamos trabalhando em um componente que não está no módulo de aplicação. Então este módulo não pode ver os módulos de prime e G que importamos no nível de aplicativo, no aplicativo admin, como aqueles. Porque precisamos importá-los para lá também. Mais tarde, quando fazemos refatoração, vamos ver como criar um módulo para isso. E então podemos chamar este módulo para todos os módulos NG principais. Então não podemos ser usados em todos os lugares. Então eu acho que este está usando o módulo de texto de entrada possamos usá-lo também em nosso módulo de usuários. Então, voltamos para o módulo de usuários e importamos esse módulo também. Então nós diríamos aqui, módulo de texto de entrada, bom para mim. Como vemos aqui, estamos importando do texto de entrada de energia Prime. Verificamos nossa aplicação novamente e vemos que tudo está funcionando bem. Então, mas nós temos aqui alguns, está fazendo tique-taque totalmente para o painel. Vamos ter um pouco de estofamento. Então talvez possamos dar para esta coluna, aquele recipiente do lado direito, mais enchimento. Assim, podemos dizer que o preenchimento em geral será, por exemplo, cinco. Então, quando salvarmos e verificarmos isso, ok, agora temos um melhor p-adic. E para a grade que está contendo os controles ou as entradas, podemos dar-lhe também uma margem superior como quatro, para que possamos criar espaço entre os títulos e também a própria forma. Também pode torná-lo maior. Podemos tê-lo como seis, ok, agora está melhorando. Então aqui temos agora o título, as entradas. Aqui ainda temos como texto. Então precisamos alterar o tipo dessa senha de entrada para ser senha. E então precisamos chamar um botão. E aqui o botão que já criamos ou já vimos isso em sua biblioteca prime e g. Então temos aqui vários botões. Então precisamos também importar o módulo moderno, que é o módulo dos usuários finais. Então podemos tê-lo aqui também. Você pode criar sua própria constante para módulo UX, mas eu acho que no módulo de usuários não vamos usar tanto você próximo módulo, teremos aqui no módulo inferior e módulo de texto. Então vamos novamente aqui novamente e usar um dos botões. Por exemplo, vamos usar este, o padrão. Não vamos complicar as coisas. Vou chamá-lo de enviar ou login é até você. Então, quando salvarmos, vamos aqui novamente, veremos que temos o botão enviar. Você pode especificar as classes que você deseja, bem como para os botões, alguns, lembre-se, então queremos fazer este botão com largura total no conteúdo Para que possamos fazer bem. Como você se lembra, na descrição ou nas propriedades, temos algo chamado classe de estilo. Então podemos dar uma aula a ele também. Então, podemos dizer aqui, classe tipo botões será btn completo, por exemplo. E então temos que usar isso será a classe e dar-lhe uma propriedade, por exemplo, no registro de login. E aqui podemos dizer o btn completo, teremos um trigo que é 100%. Então, quando salvamos e vamos novamente para o aplicativo, vamos ver que temos botão de largura total. Ok, vamos adicionar também alguma validação. Se você se lembrar, quando queremos adicionar validação, precisamos usar um grupo de formulários e o grupo anterior, vamos usar construtor de formulários para isso. Então, primeiro, precisamos combinar esta forma e usar algo chamado form-group. E o primeiro grupo terá um valioso ou a constante que é criada no arquivo ts, que terá a forma em si exatamente como fizemos com categorias, com produtos, com pedidos. Tudo isso, já fizemos isso e já explicamos. Então eu vou dar aqui um nome que é chamado de grupo formulário de login. Mas aqui está reclamando que não há entrada para reagrupar estrangeiro porque precisamos importar também alguns módulos, como quatro módulos. E também módulo de forma reativa. E esses módulos são definidos em formas angulares como vimos anteriormente e falamos demais sobre isso. Voltando ao arquivo, fiz isso rapidamente. Temos aqui o grupo de formulário de login, que definimos como um grupo formal. Usei o serviço de construtor de formulários para criar um formulário. E eu tenho método aqui é chamado qualquer formulário de login. E o formulário de login será como e-mail e senha. E o e-mail tem dois validadores, que é necessário e e-mail, como vimos anteriormente, e a senha também é necessária. Vamos voltar ao HTML e dar validação. Então, primeiro, precisamos dar para este componente para o nome de controle, como você se lembra. Então, este nome de um controlador será e-mail e a mensagem de erro, ele será exatamente sob este grupo. Então teremos também um formulário de login para defini-lo. Então, se você se lembra, nós definimos um formulário de login para fazer curto frio. Então podemos dizer obter formulário de login. E este formulário de login retornará para mim que este grupo de formulário de ponto ou grupo de formulário de login que controla para não ter toda a frase no modelo HTML. Então, podemos usar apenas um formulário de login. Então, um formulário de login se o e-mail é inválido e o formulário é enviado, em seguida, escolha um dos dois erros, como vimos anteriormente. O e-mail necessário e, em seguida, mostra o e-mail necessário quando o e-mail é, por exemplo, inválido e, em seguida, mostra que o e-mail é inválido. Vamos definir é enviado formulário bem ou variável. Então, como enviado por padrão é falso, A mesma coisa também vai para a senha. Precisamos definir o nome de controle estrangeiro e a fonte. Fonte ou nome terá senha. E então eu vou ter a mensagem de erro também. Então, o botão Enviar, nós não clicamos porque estamos usando prime n j componente, dizemos onclick. Então, se você se lembrar que o NG principal tem sua própria implementação para o clique de seus componentes. Então, podemos dizer aqui em Submeter é definido também, o método onsubmit. Então vamos aqui e dizer novamente que onsubmit é submetido, é verdade. Então vamos salvar tudo e tentar isso. Ok, nós recebemos as mensagens de erro, ok, o AML também é inválido quando eu coloco e-mail inválido, mas agora é válido. Então agora temos o formulário de login. Então agora temos nossa página de login. Vamos ver como podemos redirecionar o usuário para a página de login quando ele não está logando, sempre que ele está indo para tentar colocar, por exemplo aqui produtos ou, por exemplo, quando ele está tentando ir para o painel de administração em geral, vamos redirecioná-lo para a página de login com base na regra, se ele está logado ou não. Em seguida, vamos criar o serviço de login e vamos enviar o usuário para pegar o token do backend. 126. Serviço de login e obter o Tokens: Ok, depois de termos criado nosso componente de login e painel de login e os controles, vamos criar o serviço, o serviço, que está vindo quando eu estou clicando em Enviar, então eu vou enviar um usuário com e-mail e senha e obter de volta o token. Esse token, que eu vou usar para validar o usuário se ele está bloqueado em tudo não no meu aplicativo. Então, como você vê aqui no método Enviar, vamos chamar um serviço. E este serviço, você pode usar o próprio Serviço de Usuário e você pode definir um método. Você pode chamá-lo, por exemplo, login, ou você pode criar um novo arquivo e um novo serviço, e chamá-lo de usuários ou serviço de autenticação. Para mim, vou criar um novo serviço. Então eu vou clicar no gerador NX e, em seguida, eu vou procurar por serviço e, em seguida, dar o nome para este serviço, como autenticação auth. Ou você pode dar o nome completo e o projeto será usuários. E se você se lembrar que temos estrutura de arquivos lá para que possamos colocá-lo dentro pasta de serviços e podemos também ignorar testes para que possamos verificar agora ouvir que, ok, o serviço é criado dentro dos serviços sob o nome de services.js. Ok, vamos criar este arquivo e depois vamos lá. Veremos que é gerado e vamos usá-lo. Primeiro de tudo, como fizemos com os usuários, precisamos configurar o URL de login ou o URL da API. Então vamos copiar este, em seguida, colado aqui e definir uma nova variável. Chamamos, por exemplo, boca URL API. E será o mesmo, seria usuários. Então podemos manter o mesmo nome também. Então, como você se lembra no back-end, criamos API que é chamado de usuários. E esses usuários também contiveram o login do método. Então não vamos usar a mesma API. Vamos importar também essa variável de ambiente porque vamos usar esta variável de ambiente também aqui. Então primeiro serviço que vamos usar, que é chamado de login. E este login terá um nome de login, e ele aceitará e-mail, que será uma string, e também senha, que será, bem como encolher. E ele vai voltar para mim observável do que de usuário, porque nós estamos indo para obter o usuário com um token deste observável. Então precisamos importar, bem como o modelo de usuário, e então precisamos usar o cliente HTTP para que possamos também usá-lo no construtor ou chamá-lo no construtor, e, em seguida, importado também da biblioteca HTTP em Angular. E aqui dizemos retorno para mim um post HTTP este ponto. E antes de tudo, postamos o URL e os dados como vimos no carteiro anteriormente, será e-mail e senha. Então podemos também aqui passar e-mail será e-mail e o próprio e-mail. Então temos objeto, a chave é e-mail, e esse e-mail é um valor que é passado aqui. E também, temos um buzzword que será também senha. Se você tem o mesmo nome das chaves e o objeto que você carrega mover também a definição de chave. Você pode apenas dizer e-mail e senha, e ele será conhecido automaticamente pelo cliente post HTTP. E aqui ainda estamos recebendo erro porque temos que colocar o tipo de retorno esperado, que será, por exemplo, o usuário. Porque definimos aqui que estamos esperando usuário. E aqui também, precisamos dizer que estamos esperando usuário. E no carteiro é, se você viu anteriormente, temos também o usuário, que é o e-mail e o token. Vamos substituir este URL de API por usuários. E agora temos o serviço de login está pronto. Então vamos usar isso e tentar registrar o console o que estamos recebendo do back-end no front-end. Então eu vou voltar aqui para o nosso componente de login e, em seguida, eu vou pedir o serviço de casa. Então, no construtor, vou dizer uma beira para mim, o serviço OSS. Então eu diria aqui privado de e, em seguida, aqui será o nosso quarto serviço. E seria mostrado automaticamente e importante automaticamente com base no que definimos aqui. Então temos aqui isso. E então eu vou dizer onsubmit, faça isso diretamente. Podemos dizer este ponto auth, como o nosso, nosso login de cão de serviço. E então podemos passar o nome de usuário e a senha. Então precisamos criar aqui um objeto que está contendo nome de usuário e senha. Vamos chamá-lo, por exemplo, de dados de login. E esses dados de login terão o e-mail. Que será este ponto login formulário ponto e-mail porque este será olhando grupo de formulário que controla e, em seguida, o valor de ponto de e-mail ea senha será exatamente o mesmo. Assim, podemos definir outro membro que é chamado também senha. Então, podemos dizer também me dê o campo de senha do formulário e dado para mim o valor dele. Então, como vemos aqui que criamos os dados de login. Então, podemos dizer aqui, login data dot e-mail e login data dot senha. Claro que pode fazer isso diretamente. Você pode dizer como eu quero enviar diretamente os dados do formulário como este. E assim sem enviar nenhum objeto. Então podemos fazer isso diretamente. Então você não precisa desse objeto total. Então vamos tornar isso muito simples. Mas primeiro, precisamos verificar também se o formulário é válido, como se não tivéssemos nenhum erro de validação. Se este ponto de grupo de formulário de login inválido, então nós apenas dizer retorno. Então não precisamos fazer nada de outra forma, continuar e fazer para mim que eles estão procurando. Então, como dissemos anteriormente, este login retornará para mim e observável. Ele observará os dados. Quando há dados estão chegando, então ele será executado. Então precisamos torná-lo executável. Precisamos subscrever. Então esperamos os dados do usuário. E dentro deste usuário, vamos console isso em nosso log, então dizemos usuário log console. Então vamos tentar isso. Vemos isso se tudo estiver funcionando bem. Então eu suponho que quando eu estou tentando olhar para dentro, Eu vou obter dados na frente que então aqui é o meu console. E eu vou ter, por exemplo, meu e-mail. E então terei a senha. Vou clicar em Enviar. Vou ver que estou recebendo aqui os dados com um novo token, exatamente como fizemos com o back-end. Mas se eu vou colocar como senha longa, Eu vou chegar aqui erro, talvez o pedido ruim, que é o palavrão, está errado. Portanto, também precisamos mostrar que aqui senha deles está errada porque não estamos vendo nada aqui no front-end. Então precisamos mostrar ao usuário que há algo errado acontecendo. Então, como podemos fazer isso? Como você se lembra, após a assinatura, podemos definir e editar. Esse erro pode se tornar assim. E então dizemos que se houver erro e dentro desse erro, podemos dizer log do console para mim, o erro em si. Então podemos fazer isso também. Vamos tentar nome de usuário e senha errados para que possamos usá-lo assim. E eu vou colocar um nome aleatório. Ok, eu tenho um erro e eu tenho o tipo de erro aqui. Então agora vamos mostrar alguma mensagem para o usuário. Por exemplo, aqui que há erro ou o nome de usuário ou senha errado. Então podemos mostrar isso exatamente aqui. Então, podemos ir para o formulário de login novamente e podemos colocar outra coluna. Por exemplo, aqui podemos definir outra coluna com k, digamos div, a chamada P e 12 também. E dentro deste p igual 12, podemos definir um pequeno. E este pequeno nós vamos ter uma classe que é chamado erro P. E isto seja arrotado. E-mail ou senha estão errados. Mas como vemos aqui que estamos sempre vendo esse erro porque nós o definimos como um span sem definir qualquer condição na aparência. Então podemos colocar também aqui ng-if. Então, podemos dizer ng-se o formulário for enviado. E também, podemos definir outra variável que é chamado de erro, como erro de autenticação. Então podemos ir aqui e definir este. E, por padrão, terá um valor cai. E então, quando estamos indo para obter erro aqui, podemos dizer auth arrowed é verdade, então nós salvamos tudo. Volte para a nossa candidatura. Não vemos a mensagem de erro. Então, quando eu vou colocar meu e-mail e senha, em seguida, mouses, Eu não recebi nenhum erro porque eu tenho o usuário eo token. Mas quando eu cometo erro, por exemplo, na senha, eu recebo erro e eu recebi e-mail ou senha errada. Mas e se eu obter, por exemplo, um erro de autenticação setado, mas o que não. Como alguns, algum erro que vem como com o erro do servidor porque o servidor não está conectado. Então precisamos especificar o status do erro. Se você se lembrar, nós definimos no status de backend do erro, mas se houver erro de servidor em geral, então ele vai me dar 500. Então, com base no status do erro, posso mostrar aqui mensagens diferentes. Então aqui, em vez de ter esta mensagem, podemos definir também uma variável. Podemos chamar-lhe, por exemplo, mensagem doméstica. E esta mensagem será substituída pela frase que criamos anteriormente. Por isso, teremos aqui, por exemplo, a nossa mensagem. E esta mensagem por padrão é e-mail ou senha errada. Mas aqui podemos alterá-lo com base no erro. Então eu posso verificar aqui que o status do erro. Portanto, não podemos dizer resposta de erro HTTP. Então temos aqui resposta de erro HTTP vem com um tipo ou status. Então, quando eu vou aqui e verificar o erro, se você se lembrar, nós temos aqui resposta de erro esse tipo, e então nós temos aqui, ok, falso, e então o estado 2s é 400. Então, de qualquer forma, vamos mostrar o erro se houver algum erro aconteceu. E então eu vou dizer se status de erro igual a 400 ou não igual a 400, então esta mensagem ponto OK será erro no servidor. Portanto, não podemos dizer isso ao usuário que ele sabe que há um problema na autenticação em nosso servidor. Então podemos dizer erro no cérebro. Por favor, tente novamente. Mais tarde. Nesse caso, cercamos todos os erros ou erros possíveis ímpares para o usuário. Portanto, não será nenhum problema para nós quando estamos mostrando as setas para o usuário. E da mesma forma, precisamos dizer que este ponto da flecha, quando tudo está bem, então temos que escondê-lo. Então dizemos que o erro do juramento não é visto, é falso. Então, podemos ir aqui novamente e podemos recarregar nosso aplicativo e tentar isso novamente. Então eu vou dizer, por exemplo, encontrado em seu gmail.com, e então eu vou cometer, por exemplo, um erro. Ok, eu tenho o erro e então eu vou fazer isso direito, então nós podemos fazer isso. Então, tudo bem, o erro desapareceu. Então agora eu vou cometer erro no servidor. Erro não sobre nome de usuário ou senha estão errados, mas adulto em seu servidor quando o usuário saberá que há um erro no servidor e verá esta mensagem. Então nós podemos ir aqui para o serviço de usuário e talvez nós podemos ou o serviço de autenticação, e nós podemos cometer algum erro aqui, por exemplo. Então, vamos novamente para o nosso aplicativo e tentar fazer login novamente. E então eu vou clicar em enviar. Legal porque eu tenho erro diferente, que não é 400. Eu tenho 404. E isso me deu essa mensagem. Então agora nós cercamos o usuário com todas as possibilidades das setas. Na próxima palestra, vamos ver o que fazer com este usuário e o token. E podemos armazená-lo e tomar algumas decisões em nossa aplicação com base nesse token. 127. Crie um serviço de armazenamento local e Tokens de loja: Ok, talvez estejamos perguntando agora por que estamos fazendo o login deles ou por que precisamos da autenticação. A autenticação normalmente ocorre quando você deseja impedir que o usuário vá para algumas páginas específicas ou faça algumas solicitações para o servidor. Por exemplo, se alguém vem ao meu aplicativo e em seguida, ele disse navegar diretamente para os produtos, então ele vai ver seus produtos, mas eu quero impedir que o usuário faça isso. Então ele será redirecionado diretamente para a página de login e, em seguida, eu vou deixá-lo entrar. E, claro, quando vamos navegar quando o usuário está navegando, precisamos sempre verificar se ele tem permissão para navegar através do meu aplicativo ou não. Para isso, não é justo fazer um novo token ou gerar o token toda vez que eu quiser navegar para algum lugar. Então, cada vez que eu vou perguntar ao usuário se ele tem o token ou não, e em seguida, pedir-lhe o backend validado e, em seguida, enviá-lo de volta para a frente e, em seguida, eu permitir que ele navegue para outro lugar. Não é justo e é muito cansativo para o servidor. Então, para isso, nós vamos armazenar o token que nós temos quando nós trancado no armazenamento local. Se o nosso aplicativo, qualquer site e qualquer aplicativo tem ouvido algo chamado armazenamento local ou armazenamento. E no armazenamento local, você pode usá-lo para armazenar dados de seu aplicativo, que você sempre precisa usar para verificar o usuário, por exemplo, ou se você deseja armazenar seu carrinho como vemos aqui, ou se você deseja definir o localidade atual do aplicativo, por exemplo, algum usuário o tem em inglês e ele o definiu, por exemplo, para francês. E então, quando ele voltou para o site, ele não iria ver novamente Inglês, mas ele vai ver o francês, o francês que ele começou. Então esses valores são sempre armazenados aqui. E com base nisso, então eles usuário quando ele visitou o site novamente, tudo quando ele navegar em outro lugar, ele vai usar todas essas informações que é usado no armazenamento local. Então, o armazenamento local, você abre DevTools e, em seguida, você vai para o aplicativo e você verá o LocalStorage. Há também os cookies que é bem o armazenamento da sessão. Mas vamos usar neste curso, o armazenamento local. Então, o que eu vou fazer agora primeiro, eu vou salvar esse token no meu armazenamento local. Então, quando eu entrar e eu tiver um login bem-sucedido, então eu vou armazenar esse token no meu armazenamento local. Então, vamos remover todas essas informações de dados. Você pode remover todos os dados do site facilmente ao acessar uma guia de armazenamento aqui no Google Chrome e, em seguida, dizer dados laterais claros. Então, quando você limpar tudo, então você verá que seu armazenamento local está vazio. Agora, estamos indo, quando fazemos login, colocamos o token no armazenamento local. Por isso, eu diria também que posso fazer outro serviço que é chamado aqui um serviço de armazenamento local. Então vamos gerar isso também. Então eu vou aqui, gerar, e então eu vou dizer serviço como fizemos anteriormente. E o serviço seria repetido em serviços. E o nome dele será armazenamento local e o nome do projeto será usuários. E também, vamos pular esses testes. Nós executamo-lo. Criamos o serviço como vemos aqui, e vamos fazer o serviço de armazenamento local. Então, como podemos trabalhar com o mecanismo de armazenamento local e tudo o que eu mostrei a vocês. Podemos fazê-lo muito facilmente, fazer com JavaScript padrão e Luke e armazenamento se você Google para ele no navegador e você vai aqui para MD e web docs, você vai ver que temos algo chamado um armazenamento local. E estes armazenamento local, ele tem alguns métodos como definir item e obter item e remover item e limpar em geral. Então vamos dar um exemplo. Vou criar um método de serviço. Podemos chamá-lo, por exemplo, aqui, depois do construtor, podemos dizer set item. E set item vai me pedir um dado. E, em seguida, eu não posso dizer exatamente ponto ponto ponto ponto ponto ponto ponto ponto de armazenamento. E então eu posso especificar a chave. Então, por exemplo, eu posso dizer token e, em seguida, eu vou dar os dados como um valor. Então, podemos usar este serviço de armazenamento local em qualquer lugar. Então vamos usá-lo depois de ter um logado ou sucesso bloqueado. Então, por exemplo, depois de fazer um login, então irei aqui e chamarei seu serviço de armazenamento local a partir daqui. Então podemos dizer aqui, serviço de armazenamento local privado. E, em seguida, ele terá um tipo de serviço de armazenamento local. E então podemos usar este serviço de armazenamento local aqui. Então, vamos dizer que depois disso, este serviço de armazenamento local colocar o item definido. E eu vou especificar os dados. Por exemplo, eu vou armazenar o token de ponto do usuário, ok, nós salvamos, e então vamos tentar fazer login e verificar nosso armazenamento. Então vamos aqui e eu vou ter meu e-mail e senha. Então, depois de clicar em Enviar onde vou bloquear e chamar o serviço de log, então eu devo ele aqui a chave set do token. Para estar com um valor do token. Então, quando eu clicar em Enviar, como eu vejo que eu tenho rede bem-sucedida e, em seguida, eu tenho nome de gravação e senha, e então eu recuperei esse token. Então, a partir de agora, vamos usar este token para verificar a navegação do usuário sem pedir dados de login novamente e novamente, toda vez que o usuário está navegando em algum lugar, eu quero ver se ele é permitido ordinal do que eu vou pedir por um novo token. Agora, podemos pedir sempre o token de armazenamento local. E como você se lembra, este token tem tempo de validade. Então, quando expirar, o usuário não poderá navegar novamente no aplicativo somente quando ele logou novamente e pedir um novo token. Então, o que realmente precisamos aqui, precisamos de um item definido e também obter item, como precisamos obter o token de volta. Então, podemos dizer que o valor de retorno será uma string e, em seguida, ele irá retornar para nós ponto de armazenamento local obter item, e será o que? O token, e podemos fazer também adicionar remover item. Então remova o item, vamos usá-lo ou removemos o token quando o usuário logout também. Aqui eu vou dizer ponto de armazenamento local remover item, e aqui não é retorno é apenas método normal onde ele irá remover para mim o item. É melhor do que renomear aqueles não definir item, mas setosa porque estamos usando apenas uma chave que é token, e especificamente para a autenticação. Então eu estou indo aqui para dizer que set token e bem aqui e obter token. E aqui, remova o token. Então é melhor assim. Assim, podemos usar este serviço fora e em qualquer lugar em nossa aplicação. E é sempre bom definir uma constante para strings repetidas. Então, por exemplo, vou dizer aqui const, por exemplo, será token. E este token terá um nome JWT token. E aqui, que seria sempre, as constantes serão letras maiúsculas. E podemos substituir este símbolo aqui. Então, para não repetir a mesma string, podemos dizer sempre uma constante e podemos usar essa constante e renomeá-la. Ou queremos sempre que quisermos mudar o nome desta chave? Então vamos salvar isso e tentar de novo. Ainda temos o símbolo. E se eu tiver que colocar meu e-mail novamente, Eu vou ver que eu tenho erro porque aqui precisamos chamar não definir item, mas vamos dizer set token. E então salvamos o e-mail novamente, enviamos, e então teremos aqui esse token JWT. Por isso, precisamos também de apagar este. Então vamos deixar um começo claro para que possamos limpar os dados novamente. E então não teremos nada em nosso armazenamento local. Então, vamos tentar novamente nos submeter. Ok, bom, nós temos token JWT e desta forma vamos usar este token para proteger e proteger os URLs. E isso equivale ao back-end. 128. Crie um Create do painel para administração: Ok, nesta palestra vamos ver como proteger o painel de administração. Como temos que proteger o painel de administração de usuários que não estão autorizados ou autenticados para fazer login. Mas antes de tudo, normalmente depois que colocamos o nome de usuário e a senha e então clicamos em enviar, estamos sendo redirecionados para o painel de administração se tudo estiver bem e nosso nome de usuário e senha, certo? Então não podemos fazer isso após o botão Enviar ou clicar em Enviar, então podemos redirecionar o usuário para o aplicativo ou para o aplicativo do painel de administração. Então, como podemos fazer isso, podemos ir aqui para o componente de login. E vemos que criamos anteriormente a autenticação de login. E depois que o usuário está ficando aberto. Então, podemos chamar o roteador, o roteador, que está deixando v navegar para uma nova página ou para a página inicial do nosso aplicativo. Então não podemos chamar aqui o roteador privado. E este roteador terá um roteador e será importado de Angular. E então nós estamos indo aqui onde temos um login bem-sucedido. Então dizemos isso, o roteador, e então eu posso dizer navegar, e então eu especificar o URL na matriz. Por isso, precisamos, por exemplo, da página inicial. Não precisamos ir a nenhuma sub-página. Então vamos para a página inicial quando estamos fazendo login no aplicativo. Então vamos tentar isso e depois vamos para aqui. Podemos dizer, por exemplo, e-mail, vou colocar meu e-mail e a senha, e então eu vou clicar em Enviar. Então, clicamos em Enviar e, em seguida, vemos que somos redirecionados para o aplicativo ou para o painel de administração. Temos aqui espaços em branco por causa das rotas. Nós vamos organizar nossas rotas mais tarde para torná-lo para ir diretamente para o painel de controle. Então, como você vê aqui, agora somos capazes de navegar através do aplicativo. Temos um problema aqui. Vou excluir o token do armazenamento local, então seremos considerados como não trancados. Então, quando eu navego, eu ainda sou capaz de navegar através do aplicativo. Nem eu tenho um símbolo. Ou, por exemplo, deixe-me recarregar o aplicativo, vá novamente para a página de login. E então, como você vê aqui, estamos na página de login. Então, se eu for para U R, L e eu disser ordens, então eu vou para a página de proprietários. Então isso é errado. Precisamos fazer login primeiro e ver que o usuário está realmente bloqueado. Então permitimos que ele vá para pedidos ou dois produtos ou para outras páginas. Então, para isso, precisamos criar algo chamado guarda. E guarda, na verdade, é um serviço. Você pode passá-lo para os roteadores ou para as rotas que você criou. E então você pode dizer proteger esta rota até que o usuário tenha aprovado algo ou que o usuário tenha feito algo. Então podemos fazer isso muito facilmente. Então, quando vamos para o módulo de aplicação aqui, assim como você se lembra, nós temos aqui as rotas. Então eu não posso dizer que rota, rota, eu digo que pode ativar. E então eu especifico algo chamado guarda. E o guarda é na verdade um serviço e o serviço que está observando sempre os roteadores e ver se é permitido entrar nesta rota ou permanecer no lugar sem passar para uma nova rota. Então vamos manter isto vazio e vamos criar a nossa guarda. Então, primeiro de tudo, eu vou criar os guardas nos serviços na biblioteca do usuário. Então aqui vamos criar um novo serviço. Então eu vou para o módulo NX e então eu digo gerar para mim um novo serviço. E este serviço será localizado na pasta de serviços e será chamado de protetor bucal. Então chamamos este serviço como nosso protetor bucal. E então eu especificar que o projeto será usuários porque estamos colocando dentro da biblioteca do usuário e é isso. Então também podemos pular esses testes. Então, quando eu clicar em Executar, vou ver que o serviço é criado aqui como antigo serviço de guarda. Você pode remover esse sufixo. Por exemplo, você pode dizer apenas como desprevenido sem serviço Asgard, você pode dizer apenas desprevenido. E estes são o guarda vai implementar algo de Angular, que é chamado pode ativar. E este é do roteador Angular. Então isso pode ativar é um método que está sempre observando para mim o roteador e retorno true, então nós permitimos que estamos indo para uma nova rota, ou é falso, dois 4-bit indo para essa rota. Para entender mais de mim, vou criar isso pode ativar. Então, por exemplo, aqui está dizendo que o erro que a classe está desprevenida está implementando pode ativar, o que pode ativar método está faltando. Então vamos criar este método porque quando você quer implementar alguma classe ou estender algo da classe, você também precisa fazer os mesmos métodos que são. Criado nessa classe. Então, quando eu vou aqui para não poder ativar, eu pressiono Control. Vejo que ele tem interface e esta interface tem um método que é chamado pode ativar, e este método vai aceitar rota que será ativado instantâneo e também estado. E ele vai voltar para mim observável de Booleano ou uma promessa ou Booleano em si, o que é claro. Então, também podemos copiar este método. Podemos pegá-lo aqui e ir ao nosso protetor bucal, e depois colá-lo aqui e abrir a implementação para este método. Então precisamos importar algumas coisas. Por exemplo, ativado gravado instantâneo, isso é importante. Nós controlamos o espaço de ponto ou contorno no Windows, e então veríamos que ele é importado aqui automaticamente. E outro também precisamos importá-lo. Ok, ele está me dando um erro porque este método está retornando um booleano ou observável de booleano ou uma promessa de booleano. Para que possamos voltar simplesmente como falso. E, em seguida, precisamos exportar este método para que possamos usá-lo no nível de aplicação. Então vamos aqui e dizemos que a exportação dos serviços Lip. E, em seguida, o guarda que eu criei, nós salvamos e eu estou indo agora para o nosso módulo de aplicação. E então eu diria, use o protetor bucal que eu criei. Então aqui temos o Asgard e seria importado automaticamente da biblioteca de usuários. Então vamos rolar para baixo e veremos que nós protegemos esse caminho, como a rota adicionar seus filhos para que não possamos acessar nenhuma criança porque este desprevenido está sempre retornando falso. Vamos ver isso. Então, como você vê aqui, nós temos uma página em branco porque eu não sou capaz de acessar nada, mas por exemplo, login, ok, eu não posso acessar login. Mas se eu colocar, por exemplo, algo que é crianças desta rota, porque aqui temos categorias, encomendas, produtos, etc. Então eu vou colocar um deles porque nós temos aqui produtos. E então eu vou ficar ampla página porque eu não tenho permissão para entrar agora porque pode ativar é para me licitar para entrar porque ele está retornando uma força. Então, quando eu enviá-lo de volta para true e, em seguida, salvar e tentar novamente, vamos ver que somos capazes de fazer login e ver o painel de administração. Mas quando eu definir como falso, eu não vou ser permitido entrar lá e eu vou ter uma página em branco. Então, estamos muito perto. Então agora temos permissão para ir para a página de login porque não a incluímos na guarda. Porque se você se lembrar que a página de login está localizada no módulo de usuários aqui. Então, temos a rota de login fora da jardinagem, então não precisamos protegê-la ou protegida. Então eu quero de alguma forma não ser direcionado para uma página branca ou para alguma página que não está definida. Então eu quero ser redirecionado para o seu logado quando eu não tenho permissão para entrar nessa rota. Então, quando eu colocar aqui algo como produto ou o usuário está tentando acessar diretamente através de URL. Quero enviá-lo para a página de login de volta. Então exatamente o mesmo. Usamos esse guarda exatamente para fazer o que queremos. Então, quando o usuário está tentando fazer algo com seus links, estamos gerenciando. Qual é o resultado disso? Então podemos fazer isso muito facilmente. Então, podemos dizer que também, precisamos redirecionar o usuário usando o roteador para a página de login. O que eu vou fazer aqui que eu vou importar novamente um roteador privado. E este roteador está vindo por angular novamente como fizemos diretamente no login. E também, eu vou dizer que navegue para mim para fazer login. Então, quando eu digo este e, em seguida, ir novamente e eu tento inserir, por exemplo, duas ordens. Então eu vou obter três direcionado para a página de login porque eu não estou autorizado a entrar para esse salário. Está bem. Quando tenho permissão para entrar, tenho permissão para entrar quando tenho um token com um tempo de expiração válido e, em seguida, posso permitir que o usuário entre nessa página. Neste caso, eu quero obter o token aqui de alguma forma e então eu retornarei falso ou verdadeiro que pode ser ativado com base nos dados do token. Então, se você se lembrar, nós armazenamos o token no armazenamento local. Então, podemos usar novamente aqui nosso serviço de armazenamento local. Então eu digo token de armazenamento local privado, trazendo para mim novamente esse serviço de armazenamento local. E aqui estou eu, antes de tudo. Quero pegar a ficha. Então eu vou dizer const token e, em seguida, este ponto serviço de armazenamento local e, em seguida, obter o token. Então aqui temos o símbolo. Então eu vou verificar se há token em seu armazenamento local, como ele não está vazio, em seguida, permitir para mim, o usuário para acessar essa página e enviá-lo através de dois pode ativar método. Então eu vou dizer aqui, retorno verdadeiro, senão roteador ponto navegar para página de login e retornar false. Então vamos tentar salvar isso e tentar novamente. Então estamos aqui, eu estou indo, eu tenho aqui esse símbolo. Então, quando tento ir aos produtos, devo ser capaz de ver os produtos. Porque temos um símbolo aqui. Eu vou dizer aqui produtos. E então, certo, perfeito, temos o eixo. Ok, vamos tentar excluir o token e ir novamente para a nossa página de login. E depois apaguei a ficha. Então, quando eu ler o símbolo, eu não terei nada. Então ele vai renomear o me direto e retornar falso. Então eu vou dizer aqui produtos. Voltei para o Logan. Então é assim que estamos protegendo a rota. Assim, a rota em si é protegida no aplicativo módulo aplicativo, como você se lembra, temos aqui com o protetor bucal. Assim, todas essas rotas são protegidas com base em pode ativar o que ele vai devolver para mim, verdadeiro ou falso. Então, quando eu vou aqui, eu verifico se há token, e então eu digo, ok, login. Mas agora, neste caso, se alguém vier aqui, eu me sinto como um token de DVT, exatamente como a chave e eu coloquei qualquer coisa, então eu serei capaz de ir para a página de produtos. Porque eu disse que se há token, eu não vi o valor desse token se eu sou permitido ou não, se eu sou administrador ou não. E isso o que veremos na próxima palestra, precisamos ler esse token e analisá-lo. E com base nisso, permitimos que o usuário entre nessa página ou lemos direcioná-lo para a página de login. 129. Leia dados de Tokens isAdmin e validade: Ok, nesta palestra vamos ver como podemos verificar se o usuário é administrador ou não. Como eu disse aqui anteriormente, que nós não estamos fazendo aqui uma segurança de usuário, nós não estamos fazendo segurança de aplicativos. A segurança em si está indo quando estamos interceptando as solicitações HTTP, como obter produto ou obter ordens ou postar produtos ou postar ordens apenas com um token. Portanto, normalmente qualquer cliente pode acessar minha API sem token. Falaremos sobre isso mais tarde. Mas agora o que estamos fazendo é apenas uma experiência de usuário. Então eu estou apenas liderando o usuário se ele está logado ou não. E se ele estiver preso, ele pode ver o painel de administração. Caso contrário, ele será redirecionado para a página de login. Então vamos analisar o token que temos daqui. Então, se você se lembrar, criamos esse token JWT e no back-end, incorporamos alguns dados como o ID do usuário e também se ele é administrador ou não. Então, quando vamos para JWT dot io e, em seguida, colocar o nosso token aqui, vamos ver que nós chegar aqui o ID do usuário e se ele é admin e também tempo de expiração. Então precisamos de alguma forma decodificar este token no front-end. E então descobrimos se o usuário está logado é muito estranho administrador. Então vamos tentar isso agora. Então, primeiro de tudo, eu vou usar um método que é chamado AT ou B. Isto é como para decodificar as cadeias de dados que foram codificados com base na codificação base-64. Então vamos ver o que conseguimos aqui. Então, primeiro de tudo, eu quero decodificar este token. Então, se houver um token, então faça para mim uma constante, chame-o de token decode. E então vamos usar esse método é o método Javascript, para que possamos usá-lo diretamente sem chamar qualquer biblioteca. Então eu vou dizer aqui token, e então vamos ver o que obtemos como resultado. Então vamos log console também, este token decodificar para ver o que temos no console e o que isso, ou que token decodificado retornará para mim. Então, salvamos e vamos para o nosso aplicativo e verifique nosso console. Então, se você se lembra, nós já fizemos login aqui que eu possa ir diretamente para pedidos, por exemplo. E então eu vou chegar aqui algo que vamos ver que estamos recebendo erro é chamado erro de caractere inválido. Isso porque o token é composto por três partes. A primeira parte é chamada de cabeçalhos, que é especificar que tipo de token e também o que o algoritmo é escrito ou gerado este token. E a segunda parte conterá os dados, como você vê aqui, a cor está correspondendo. Então nós temos aqui também os dados que estão vindo dentro do token. E a terceira parte é para verificar o token criptografado ou assinatura do token. Estamos interessados sobre a segunda parte. Então precisamos dividir esse token com base no ponto. Então, depois que dividimos, ficamos com a segunda parte. Então, primeiro de tudo, precisamos nos separar. Nós dizemos token dot split. E, em seguida, baseado no ponto. E como você se lembra, a divisão retornará para mim uma série de três itens. Então, primeira parte e segunda parte, que está contendo nossos dados. Então vamos contar de 0 a dois. Então queremos a segunda parte. Então aqui nós dividimos a matriz e vamos pegar a peça e decodificada e ler esse token dessa maneira. Então, após a codificação e voltar para o aplicativo, vamos ver que estamos recebendo também ID de usuário objeto é admin e também tempo de inicialização e tempo de expiração do token. Então exatamente como chegamos aqui. Então, a primeira parte é para os cabeçalhos, e a segunda parte é para os dados do token. E a terceira parte é para assinatura e verificação da assinatura. Então nós temos realmente esses dados, nos quais estamos interessados. Então agora estamos prontos. Estamos lendo o token como um JSON. Então podemos tomar também esta parte, tudo como um JSON. Então podemos dizer JSON dot parse. E então eu posso ler tudo isso como um objeto JSON. Então poderei ler o conteúdo deste token. Então, não podemos dizer se token decode dot é admin, como o usuário é admin exatamente como nós enviá-lo do back-end e, em seguida, retornamos um verdadeiro. Então, neste caso, se o usuário é realmente admin, então ele pode acessar o painel de administração. Se não, ele não será capaz de acessá-lo. Então vamos remover esta parte e verificar se tudo está funcionando bem para nós. Então eu vou tentar o nosso token depois que eu salvar. Então eu vou aqui para o login. E então, tudo bem, temos aqui tudo. E eu vou sair removendo este token minoramente, e eu vou fazer login novamente. Então vou dizer o meu e-mail. E como você vê, eu coloquei aqui meu e-mail e senha e vou clicar em Enviar. Ok, nós somos realmente dirigidos porque eu sou administrador. Vou tentar outro usuário. Então, teremos um usuário que não é admin. Então, irei novamente para a página de login. Então eu vou diretamente para o banco de dados e, em seguida, eu vou me mudar para não ser admin, mas eu vou ser como False of admin. E então eu vou clicar em atualizar esta linha. Então, depois disso, eu fui atualizado, vou tentar novamente fazer login. Vamos ver o que teremos. Então eu vou colocar meu e-mail e senha e, em seguida, eu iria clicar em Enviar. Nós vemos que, ok, eu tenho esse token, mas eu não sou capaz de fazer login como você vê aqui, porque eu não sou admin, porque é admin não está vindo com esse token. Então, para ter certeza, eu quero mostrar a vocês para que possamos copiar este token e colocá-lo aqui. E vamos ver que é admin é falso. Então, neste caso, eu não sou capaz de fazer login mais. Então vamos colocá-lo de volta como um verdadeiro Para ser capaz de sempre fazer login. Então, neste caso, eu distingo entre os clientes e não os clientes. Talvez alguém venha e me diga, ok, Eu posso criar um ID de usuário e é admin. E como eu crio um token como este, exatamente. E eu colei no meu armazenamento local e tento passar pelo link, vou lhe dizer, sim, é claro que você pode fazer isso, mas você não poderá enviar solicitações. Você não pode levar o produto, você vai, você vai para o painel de administração, é claro, mas você não será capaz de ver quaisquer dados. Você não poderá enviar nenhuma solicitação para o servidor. Porque, como veremos mais tarde, vamos interceptá-los e proteger APIs com um token. Então, como você se lembra no Postman, como estávamos sempre carregando o token no corpo da solicitação para poder enviar essa solicitação para o backend. Então, como você vê aqui, estamos sempre carregando um token com cada pedido que eu estava fazendo. Então, neste caso, estamos protegendo o back-end. O que estamos fazendo aqui na verdade é apenas experiência do usuário. Assim, o usuário não será capaz de ver facilmente o back-end ou o painel de administração se ele não for admin. Então eu defini o meu mesmo como administrador novamente e eu sou capaz de bloquear e obter dados para que nós também possamos usar o tempo de expiração. Assim, um usuário é capaz de fazer login a qualquer momento em nosso aplicativo, a qualquer momento durante o dia. Então, se você se lembra, nós temos um dia de exploração, nós colocamos no back-end. Claro, você pode definir o token no back-end tanto quanto você quiser como vimos anteriormente. Então aqui eu vou verificar também o token se ele expirou ou não. Então vamos dizer aqui admin. E também eu vou ter um método que irá verificar para mim o tempo de expiração do token, um método privado, ele será token expirou. Então aqui eu vou saber que se o token está expirado ou não, então, e então vamos dizer enviar o token decode e EXP, porque se você se lembrar, expiração vem no campo x. Então eu vou criar este método. Vou mostrar-lhe rapidamente. Então temos aqui para o método que é chamado token expirou, e ele terá tempo de expiração. Voltará para mim booleano. Então, para verificar o tempo de expiração de algo, você sabe que a hora está chegando para nós como uma impressão ou como um carimbo de data/hora. E este carimbo de data/hora, podemos analisá-lo fazendo este método. Então eu posso verificar se andar e obter tempo. Então tudo isso, como se eu estivesse recebendo o tempo agora, se é maior do que essa exploração, então o token é válido. Caso contrário, a expiração do token terminou, modo que o token expirou. Então, desta forma, você pode verificar o token se ele expirou ou não. Claro, há também outras maneiras como você pode Google eles. Você pode encontrá-los como usando mulher JS ou, por exemplo, usando outra biblioteca que está tomando, verificando o token e enviar-lhe de volta todas as informações que você deseja. Aqui. Fizemos isso com JavaScript de baunilha. Então vamos tentar que agora economizamos e temos agora o token. Claro que eu não posso fazê-lo expirar agora porque eu não sou como eu criei o token agora, mas agora nós definir tudo e nós somos capazes de usar esse token e nós somos usuários válidos como admin, para olhar para o painel de administração. Como eu disse, esta é a maneira mais simples de codificar esse token, existem maneiras mais complicadas. Na próxima palestra, como eu disse, faremos mais segurança e, portanto, não seremos capazes ver nenhum dado se não tivermos um token válido. 130. Habilit back para a autenticação de Backend para API: Se você se lembra no início do trabalho com o painel de administração, desativamos no back-end a autenticação de nossas APIs. Então, como fizemos isso, se você lembrar que comentamos toda a autenticação e dissemos que permitimos tudo. Então, no arquivo JWT, no Acme, no back-end, eu desativei tudo e disse, Ok, um baixo para mim. Tudo o que você deve ser, a menos que tenhamos falado sobre isso antes. Então vamos voltar atrás. Como todas as APIs são protegidas, exceto aquelas. Portanto, também precisamos proteger todas as APIs. Portanto, não seremos capazes de postar um produto. Não seremos capazes de postar usuário ou não somos capazes de obter os usuários. Então, após a ativação, Vamos tentar, por exemplo, ir em nosso painel de administração para os usuários porque aqui os usuários não está incluído. Então vamos verificar isso. Vou voltar aqui e verificar os usuários. Vou ver que fiquei vazio e recebi um erro no console que estou não autorizado. Então precisamos fazer algo exatamente como fizemos com o carteiro. Se você se lembrar, estávamos carregando um token na solicitação e, em seguida, enviamos essa solicitação. Neste caso, obtemos o que queremos, tudo sem problemas. Então, aqui estamos indo também para carregar este token, que temos depois de logar para esta solicitação. Então o backend me autorizará a obter os dados do banco de dados. Então aqui o que vamos fazer na próxima palestra. 131. Intercept com Tokens: Certo, como eu disse antes, precisamos carregar o token sobre o pedido deles. Se você se lembra, estávamos carregando o token sobre seu pedido no Postman, e estávamos passando esse token nos cabeçalhos da solicitação. Isso foi muito fácil como carteiros, nós estávamos indo aqui e selecionando autorização. E então dizemos símbolo de barreira, e então estávamos desperdiçando nossa ficha aqui. Da mesma forma que vamos fazer aqui, mas com Angular. Em Angular, esse conceito é chamado de interceptores. O interceptor é algo que está observando todas as solicitações que estão saindo do front-end e, em seguida, verificando se esta solicitação está indo para o backend é API, então eu carrego um token sobre ele. Porque como você vê anteriormente que o back-end agora está feito, permita-nos enviar quaisquer solicitações sem esse token porque não estamos mais autorizados. Então, como podemos fazer isso facilmente? Como você se lembra, nós estávamos sempre usando ferramentas NX. Eu estou indo aqui para gerar um novo módulo e há algo chamado interceptor. E o interceptor é algo que será carregado sobre o serviço HTTP e, em seguida, ele irá carregar o token sobre ele. Então, a maneira de fazer isso, vamos e damos um nome, por exemplo, GW t. E então podemos passá-lo também na pasta de serviços, que está localizada nos usuários do projeto porque vamos usar isso no aplicação. E então vamos pular isso por enquanto. Então, podemos clicar em pular isso, então nós executamos isso, e então vamos para a nossa aplicação e vamos ver que temos JWT interceptor. Certo, vamos ver o que é o interceptor. Interceptor está implementando uma classe ou interface que é chamado interceptor http. E dentro deste interceptor http, há um método que é chamado interceptar. E esta interceptação recebendo uma solicitação e, em seguida, próximo para manipulação, e, em seguida, ele irá retornar o evento HTTP. Então, por enquanto, é assim. Então, precisamos carregar sobre os cabeçalhos de solicitação HTTP como carteiros fazendo para a solicitação HTTP com o token. Porque sempre colocamos dados extras dentro dos cabeçalhos. Cada solicitação que vai em seu aplicativo está passando por cabeçalhos. Então token de autenticação será carregado sobre os cabeçalhos da solicitação, como você vê aqui, temos aqui, por exemplo, a solicitação de cabeçalhos e eu tenho portador de autorização e, em seguida, o token. Isso é exatamente o que o carteiro está fazendo. Então vamos fazer o mesmo exatamente com nossos aplicativos. Assim, seremos capazes de ver os usuários porque agora não temos permissão para ver os usuários ou pedidos porque não estamos autorizados. Então, primeiro de tudo, eu vou entrar aqui dentro deste método e , em seguida, eu vou receber esse token e também o URL. Então, o token, como você se lembra, é armazenado no armazenamento local. Então, primeiro de tudo, vou definir uma constante. Vou chamá-lo de token, e vou usar o serviço de armazenamento local. Então, o serviço de armazenamento local que usamos anteriormente, que também está localizado no mesmo repositório, tudo na mesma pasta do serviço deste usuário. Então eu vou dizer aqui token de armazenamento local privado. E, em seguida, este token de armazenamento local será vindo do serviço de armazenamento local. E então eu vou usá-lo. Então eu vou dizer aqui este ponto LocalStorage escurecer e, em seguida, GetToken. Então, isso é tudo. Então temos aquele token que armazenamos no armazenamento local aqui dentro desta constante. O próximo passo é o pedido. Essa solicitação é cada solicitação indo da solicitação HTTP front-end. Porque se você se lembra, em nossos serviços estamos usando solicitações HTTP. Então, sempre estamos usando HTTP post HTTP, relatório HTTP GET, etc Então, como você vê aqui, estamos usando protocolo HTTP para enviar nossas solicitações para o backend, então queremos interceptá-los. Então o u r l estará dentro deste pedido. Então, quando eu digo me dar os dados do usuário, então eu vou e colocar o pedido. E dentro deste pedido há URL, e este URL será o nosso URL API. Aqui podemos dizer const é URL API. E então eu vou dizer que me dê esse pedido, que é passado aqui. E então você é L e, em seguida, começa com, então, se a URL começar com a minha API, se você lembrar que nós armazenamos a API dentro de nossas variáveis de ambiente, que está localizado no arquivo de ambiente. Então podemos dizer aqui que me dá o meio ambiente. Será importado de ambientes, meio ambiente. E, em seguida, vou definir a URL da API. Então, se o URL da minha API começar com este URL. Então eu vou interceptá-lo. Então isso significa que é uma URL de back-end. Certo, como eu disse antes, precisamos colocar isso nos cabeçalhos, como podemos fazer isso. Então, quando temos um token, então eu digo quando, se token e também quando eu tenho é URL API, então eu vou adicionar os cabeçalhos para essa solicitação. Então eu vou dizer solicitação será a mesma solicitação, mas cloná-lo como clonar a solicitação atual e ajustar o seguinte. Então, precisamos ajustar essa solicitação para ter cabeçalhos definidos. Como você se lembra, eu disse que precisamos colocar o token nos cabeçalhos do pedido. E então eu diria autorização. E então se você se lembrar que estamos usando autorização de cerveja, então aqui eu vou ter fluxo chamado amargo e depois espaço. Você se lembra que tem que colocar espaço. E então eu vou colocar o token depois dele. Então, dessa forma, vou passar o token com uma autorização amarga nos cabeçalhos de qualquer pedido. E mantemos este próximo pedido de punho de ponto. Então, tudo bem, guardamos isso e verificamos nosso console se tudo está funcionando bem, tudo está funcionando bem. Mas agora precisamos exportar este interceptor como qualquer serviço que fizemos antes, para que possamos usá-lo fora da nossa biblioteca, da nossa biblioteca de usuários. Então vamos aqui para indexar e eu vou dizer Exportação, e depois de serviços de lib e, em seguida, JWT interceptor. Então, depois disso, salvamos e então precisamos usar este interceptor onde estamos usando o interceptor. Você tem uma escolha. Você pode usá-lo aqui no módulo de usuários porque estamos usando, bem como o usuário como módulo no módulo de aplicativo. Ou você pode usá-lo diretamente no módulo de aplicação. Então, como podemos usar isso? Eu vou também aqui e eu vou verificar os provedores que eu estou tendo, declaração módulo NG ou importação. E há algo chamado provedores. Então, improvisadores, estou prestando serviço. Estou fornecendo algum símbolo. Estou fornecendo alguma variável para um serviço para que eu possa usá-lo. A maneira de usar isso é dizer que colocamos uma vírgula aqui e então abrimos um objeto e dizemos fornecer. E, em seguida, interceptores HTTP. E como você vê aqui, interceptores http vem de HTTP em Angular. Então, usamos este aqui. E, em seguida, vamos dizer usar classe como um padrão. Nós vamos usar a classe qual é JWT interceptor, que eu criei na biblioteca do usuário. Então, quando eu for aqui, eu vou ver que ele é automaticamente importado como você vê aqui. Por exemplo, se formos para cima, veremos que JWT interceptor é importado da biblioteca de usuários. Dizemos que Multi é verdade. Então, depois de salvar e, em seguida, vamos para o nosso front-end, vamos ver que somos capazes de ver seus usuários. Então também, eu posso ver os pedidos porque aqui eu tenho um token e, em seguida, eu estou carregando o pedido com o token. Então, como você vê aqui, se formos a um desses pedidos, você sabe que nós temos aqui na rede. Ok, eu tenho este. Vou verificar os cabeçalhos que tenho aqui, pegar, e eu vou ver que, ok, portador da autorização é o meu token, ok, talvez alguém me diga. Ok, eu posso então gerar qualquer token e então eu posso enviá-lo com os cabeçalhos dos meus pedidos e tendões através Postman e então eu posso destruir o site deles. Não, isso não é possível porque se você se lembra, no back-end, nós tínhamos um segredo. Se você se lembra, eu fiz um arquivo secreto que é chamado, por exemplo, secreto. Você adicioná-lo ao token, e, em seguida, com base nisso, você tem uma assinatura de token JWT, e, em seguida, ele irá gerar para você esse token com base nesse segredo. Então, dessa forma, você verá que você também está enviando este token e ele será analisado com base na cadeia secreta que você criou. Se você se lembra, eu coloquei, Eu amo meu cão, por exemplo, como um segredo no back-end. Então agora, se isso for analisado por Birkbeck e aceito por esta chave secreta, então diabético e sua resposta comigo com um dado. Caso contrário, se eu enviar qualquer token, ele não será aceito porque ele não terá o mesmo segredo que eu criei quando eu estava assinando esse token no back-end e enviá-lo para o front-end. Portanto, tenha cuidado que você tem que manter este segredo, realmente secreto para que você não possa usá-lo em qualquer outro lugar ou dá-lo a ninguém porque ele está protegendo seu aplicativo totalmente. Então, se você se lembra, estávamos usando o segredo, se você se lembra, e este segredo está no arquivo ambiente e eu estava usando como meu cão é legal ou eu amo meu cão é dependente. Então você pode colocar aqui qualquer corda. E com base nisso, todas as suas solicitações no back-end, usaremos esse segredo e analisaremos. Cada pedido vem com esse segredo, depois sobre o token, e então ele responderá por você se estiver certo ou não. Ok, agora que temos, está tudo bem. Nós carregamos nosso token sobre a solicitação HTTP. Estamos recebendo e protegendo nossa aplicação de administração totalmente sem problemas. Agora tenho a recapitulação. Se você se lembra, fizemos uma segurança e colocamos esse token no aplicativo, no armazenamento local. E estamos usando esse token para enviar essa solicitação e também redirecionar o usuário para a página de login se eles não estiverem bloqueados. Na próxima palestra, vamos fazer o logout, que está apenas removendo este token JWT. E então seremos desconectados. 132. Usuário de download: Ok, ótimo. Agora vamos ver como podemos fazer logout de um usuário. Então, se eu clicar neste botão, eu vou fazer logout do usuário. Quando queremos olhar para o usuário, basta excluir esse token do armazenamento local e, em seguida, redirecionar o usuário para a página de login. Então, no clique neste botão, vamos chamar um serviço chamado lockout. Então podemos fazer isso de forma muito simples. Nós apenas ir para a biblioteca de usuários onde estávamos criando nossos serviços ou serviços de autenticação. Temos login aqui. Vamos ter também o logout. Então eu vou aqui e dizer, me dê uma função de logout. Ele não terá nenhum parâmetro. Vamos apenas olhar para o usuário. Então, para isso, vamos usar também o serviço de armazenamento local. Então precisamos também aqui para chamar o serviço de armazenamento local. Então eu vou aqui e digo “privado”. Podemos dizer token ou serviço token, e então podemos chamar o serviço de armazenamento local. E este serviço de armazenamento local, vou usá-lo aqui. E então este token de ponto e, em seguida, remover token. Então isso é tudo. E então nós estamos indo para a frente para olhar para fora o usuário ou você pode olhar para ele aqui fora. Então, nesse caso, precisamos também de um roteador. Então eu chamaria aqui privado e, em seguida, roteador. E então eu me lembro do roteador novamente. E então eu tenho, depois que eu excluir o token, eu vou dizer esses pontos, roteador, ponto, navegar. E, em seguida, selecionarei a página de login. Então eu vou dizer aqui login e, em seguida, salvar. E então precisamos chamar o serviço sempre que eu clicar no botão na barra lateral. Então, se você se lembrar, temos que em sua compartilhada no aplicativo Admin. Eu tenho na barra lateral, bem como o botão que é chamado de bloqueio. E eu vou aqui dizer “clique”. Como quando eu clico neste botão neste link, eu vou olhar para fora o usuário. E o que dizemos aqui? Olhar para fora usuário. E então implementamos esse método. Então vamos para a barra lateral também aqui no componente. E então eu preciso chamar o serviço de autenticação porque ele é usado no, OU é criado na biblioteca do usuário. Então eu vou dizer aqui, serviço de autenticação privada e em seguida, chamar para mim fora de serviço da biblioteca do usuário. E veremos que ele é importado aqui automaticamente. Mas às vezes você estará em erro com a Importação Automática que você verá que ele está retornando o caminho completo. Não está fazendo isso como com o atalho como conversamos anteriormente. Então, às vezes, como deveria ser, como esses usuários. Mas como vê aqui, temos um problema. Temos um erro porque eu acho que é todo o serviço não é exportado. Então, para verificar isso, vamos novamente para a nossa biblioteca de usuários e verificar se exportamos o serviço de autenticação. Veremos que não é exportado. Por isso, temos de fazer também aqui, Exportar. E depois de. E então eu vou selecionar a biblioteca e, em seguida, serviços, e, em seguida, nosso serviço. Então aqui nós seremos capazes de ver isso em nosso componente barra lateral. Então é melhor sempre para linting ter este caminho de atalho. Então, temos agora o serviço de autenticação. Eu vou criar outro método, que é que nós criamos aqui. Então é chamado de usuário de bloqueio. E esse usuário de logout estará localizado no TS. Tudo bem. Vou definir este método aqui e, em seguida, eu vou dizer este ponto serviço AVS. Então olhe para fora. É assim tão simples. E então o vigia, se eu for até ele, ele irá remover esse token para mim e então ele iria me navegar para a página de login. Vamos salvar tudo e depois vamos tentar isso. Então, como você vê aqui, minha ficha expirou. por isso que gravei este vídeo depois de um dia. Então, como você vê aqui, quando ele expirou, eu tenho o token II já foi lido direcionado para a página de login. Então vamos olhar de novo. Então eu vou aqui e colocar meu e-mail e senha. Agora vou fazer login. Ok, eu me conectei, eu estou aqui, eu vejo tudo. Vejo os usuários de pedidos, esse token é válido. Agora vou clicar no Logout. Então, quando você clicar no logotipo aqui, você será redirecionado para a página inicial ou para a página de login. E você verá que o armazenamento local não tem mais o token. Então é assim que estamos desconectando o usuário. Tudo está funcionando bem. Você pode fazer login novamente e, em seguida, ir para o aplicativo do painel de administração. Dessa forma, terminamos tudo sobre a autenticação. Então agora vamos ver como podemos organizar nosso código mais. Vamos fazer alguma refatoração e isso é o que veremos na próxima seção. 133. Estilo de painel: Certo, depois de terminarmos a autenticação, vamos decorar nosso painel. Se você se lembrar, temos a página do painel aqui. Vamos fazer algo assim. Então vamos ver que o total de pedidos e quantos clientes temos, e quantos produtos e as vendas totais. Se você se lembrar no back-end, implementamos todas essas APIs. Então eu posso pegá-los também do banco de dados. Então vamos fazer isso. Primeiro de tudo, eu vou para o meu aplicativo original onde nós temos um progresso lá. Então eu vou trancar. Em seguida, nós iria para o painel de água do banho tem painéis de obras. Ainda não fizemos nada lá. Então, vamos novamente para nossas páginas em nosso aplicativo de administração e, em seguida, vamos para o painel. O painel, se você se lembrar, criamos componente como este, então precisamos refatorá-lo. Primeiro excluímos o estilo. Nós não precisamos do estilo porque nós vamos usar os estilos públicos, que são pasta de nossos estilos aqui. Então, primeiro de tudo, vamos modelar este painel. Então, como cada página de administração, vamos fazer o mesmo. Então, primeiro de tudo, eu vou ter um div e ele terá página de administração. E essa classe de página de administração já está implementada. Então nós vamos ter tão bem aqui o nosso cartão como fizemos anteriormente. Então, podemos ter aqui um painel como um título e um sub-cabeçalho. Podemos ter atualizações mais recentes. Então vamos remover assim, gostaria de não torná-lo como entrada. Podemos torná-lo só apareceu string e entrada pura. Então temos aqui o painel. Então eu vou ter concordado, se você se lembra, nós temos aqui quatro retângulos. Então precisamos exatamente de uma grade. Então vamos lá e vamos lá. E dizemos div dot py grid. E dentro vou ter a chamada UV dot py e depois três. Então precisamos de quatro. E mais uma vez, vou usar esse cartão lá dentro. Então também teremos aqui outro cartão. E dentro deste guarda, vamos colocar o nosso item. Assim, o item que terá exatamente o mesmo, que terá ícone, e algum título e algum número. Então vamos fazer o mesmo. Então eu também vou definir uma div. E essa div como um nome, podemos chamá-lo de item, como item de painel. E então, dentro deste item, eu vou ter outra div. Vou colocar primeiro o ícone. Então, por exemplo, vamos ter ícone do carrinho de compras, como quatro pedidos. E novamente, um espaço onde vamos colocar o nome. Então temos aqui a extensão que é chamado de ordens. E então teremos também outra extensão que irá conter o número. Então podemos dizer como código rígido um número que é como 25, por exemplo. Então vamos ver se estamos indo bem. Ok, agora temos este cartão, temos o ícone, temos o texto e o número. Então vamos amarrá-los. Primeiro de tudo, eu vou ter um fundo Eu estou usando algum site é chamado um ponto gradiente io. E isso lhe dará um monte de gradientes muito grandes. Você pode usá-los e você pode simplesmente copiar o CSS do gradiente que você deseja, e então você pode usá-lo em seu aplicativo. Então, primeiro de tudo, eu vou fazer um gradiente, este. Então vamos aqui e vamos ao estilo da nossa aplicação. Então, primeiro de tudo, precisamos ter um arquivo de estilo para o painel. Então se formos, se você se lembra, temos todos os estilos aqui. Então, o aplicativo estilos, e este é o painel, que é usado apenas no painel de administração. Então, podemos colocá-lo dentro do aplicativo de administração. Então não podemos dizer aqui o ponto do painel SCSS. E, em seguida, precisamos também importar este painel no admin porque estamos usando este arquivo. E este arquivo contém todos os arquivos que são usados aqui, e estamos usando no aplicativo. Então, se você se lembrar, temos aqui também pasta Estilos no nível do aplicativo. Então eu vou e usando o arquivo SCSS admin. Então, precisamos de alguma forma importar também o arquivo do painel de controle. Lembre-se que temos a concha. Agora vamos importar também o painel. Então simplesmente substituímos isso pelo painel. Ok, vamos agora para o nosso painel de instrumentos. Vamos fazer a cláusula dos outros. Então não temos nada aqui. Podemos ter apenas o CSS e o arquivo do painel, então precisamos apenas desses dois arquivos. Vamos trabalhar com isso. Então, primeiro de tudo, eu quero estilizar o item do painel. Então, o item do painel, estaremos na minha opinião como um flex para que possamos alinhar as coisas dentro deste Flexbox. E também que precisamos alinhar cada texto a ser centralizado. Então, será todo o texto dentro deste será centrado. Ok, vamos dar a todos os viram um gradiente. Assim, podemos, por exemplo, copiar este gradiente aqui. E eu vou para o meu CSS e eu apenas colar e eu iria obter exatamente o estilo CSS que é atribuído aqui. Então nós carregamos nosso aplicativo e vemos que ele é apenas styling dentro do div, mas eu quero o cartão inteiro. Se você se lembrar, o carrinho sempre vem com algo chamado estilo de classe ou classe de estilo. Então, o cartão em si precisa ter algum estilo. Então podemos ouvir ter aula de estilo. E esta classe do tempo será diferente de cartão para cartão, como você vê aqui, porque nós tê-los diferentes. Então precisamos de um gradiente para cada cartão. Então podemos dar um nome a ele. Então podemos dizer as ordens. Por exemplo, eu vou ter uma classe especial para isso, que é chamado de ordens. Então aqui eu volto para o CSS e, em seguida, eu crio essa classe, e então eu dou um nome, e então eu movo esses ingredientes aqui. Então eu vou colocá-lo aqui e depois salvar. E veremos que o cartão inteiro é colorido. E isso é exatamente o que queremos. Agora queremos que tudo dentro do carro seja branco. Então, no item, direi cor. E se você se lembra, estávamos usando vars. E se você se lembrar que temos uma variável que é chamada pesquisas, ou você pode usar simplesmente a cor branca. Então eu estou usando os vars, que eu falei sobre eles muitas vezes anteriormente. Então temos aqui a cor da superfície será branca. E também, precisamos ter que justificar o conteúdo entre esses itens dentro do item ou item do painel para ter espaço entre eles. Então, como você vê aqui que temos tamanhos ou fontes diferentes, ou temos esse tamanho, por exemplo, esse tamanho e esse tamanho. Então vamos dar a todos na sala de aula. Então eu, nós demos, nosso olho vai usar uma classe deste e eu vou dar para isso como, por exemplo, um nome. E eu vou dar para esta classe que podemos chamá-lo em número geral. Então, aqui estamos indo para estilizar esses. Então, primeiro de tudo, eu quero estilizar o ícone dentro que o item eu vou dar o PI e então eu vou dizer tamanho da fonte, bem antes do EM. E então nós damos como uma margem inferior apenas para empurrar o conteúdo abaixo de oito, como 15 pixels. E também, vou dar um tamanho para o nome. Assim, o tamanho da fonte de seu nome será, por exemplo, 1.4 AM. E o número será um pouco grande. Então eu vou dar como, por exemplo, tamanho da fonte será 3M. Por exemplo, podemos dar-lhe um 3M. E também vamos fazê-lo flutuar, certo? Podemos colocar o texto à direita, mas não vamos fazer isso agora. Eu mostro-te mais tarde. Então salvamos este. Verificamos se tudo é redimensionado, certo, mas como vemos aqui que não temos a cor, não sei por que temos cor, terno, rosto. Esqueci-me de um litro. Então teremos a cor branca, espero. Certo, agora temos a cor branca. Mas como vê aqui, não tivemos nenhum efeito. Então talvez eu possa agrupar esses dois itens como o ícone e o nome em uma div. Então isso será como, por exemplo, em uma div, eu posso remover este e colocá-lo e fazer este espaço sozinho. Então vamos ver que o fluxo será dividido entre esta extensão e esta div. Então, será dividido entre eles. Então, como você vê aqui, que o flex me deu a capacidade de ter aqui as ordens e aqui o número. Para simplificar o modo de código como não ter este div e este div e colocá-los dentro de um div para estar em novas linhas, podemos apenas usar um HTML simples como fim de semana, dizer um BR aqui. Como se pudéssemos colocar uma linha de freio aqui. Então eu estou fazendo isso muito simples. Claro que você pode fazer da maneira que quiser. Só quero mostrar como podemos estilizar rapidamente. Vemos também, então, este número é como um pouco alto. Podemos abaixar um pouco. Então, podemos dar margem superior a este número. Então podemos dizer aqui, que o número lhe dá uma margem superior de cerca de 50 pixels. Então vamos ver agora que temos o nosso primeiro item. Então nós só precisamos duplicar esses itens para ter outros quatro, como os produtos do usuário e vendas totais. E então nós damos a eles diferentes gradientes. Então, fazemos isso rapidamente. Então, primeiro de tudo, vou duplicar esta coluna porque temos aqui a coluna três e outra, outra e outra outra. Então precisamos de quatro. Então, primeiro, serão produtos, certo? Tem um número. E também os produtos serão, por exemplo, um caso breve. E se você se lembrar, queremos dar um gradiente diferente. Então precisamos colocar aqui também um produto. Então o cartão terá uma classe diferente da outra. Então também aqui fazemos o mesmo para os usuários e fazemos o mesmo também. Como damos o ícone serão os usuários. E também aqui os usuários do item do painel. E também, precisamos ter aqui vendas totais. E podemos dar aqui, como podemos dizer que o ícone é dólar. Estou recebendo os ícones do Prime NG como vimos anteriormente. Então colocamos aqui as vendas totais. E também, precisamos aqui ter um número, mas em dólar, para que possamos usar também os canos que falamos anteriormente. Então eu vou ter aqui uma string como 120, e então eu vou usar o pipe de moeda. Então salvamos tudo. E vamos novamente para a nossa aplicação. Veremos que temos as cartas, mas não temos o suficiente ou o gradiente. Então vamos copiar os mesmos gradientes que eu criei aqui. Então, para fazer isso rapidamente, eu também selecionei algum gradiente, como eu disse anteriormente, do site. Então, podemos salvar isso e ir novamente para a nossa aplicação. E veremos que temos aqui as cores como designamos aqui. Como eu vejo aqui, que a fonte é um pouco grande, então podemos torná-la menor. Então, para o número, que possamos fazer este número para ter, por exemplo, 2.5. Seria melhor, eu acho. Certo, agora temos tudo bem. Decoramos nossa primeira página em nosso painel. Portanto, também precisamos substituir esses números com os dados reais que vêm do back-end. E isso é o que veremos na próxima palestra. 134. Serviços de estatísticas de dashboard: Certo, como você vê aqui, peguei todos os dados do banco de dados com base em nossos serviços. Então como eu fiz isso, mas a solução, eu anexei, o código com este dever de casa e eu vou explicá-lo rapidamente. Então, primeiro de tudo, se formos para o componente de painel, eu chamei vários serviços, um para obter a contagem de pedidos, a contagem de produtos, e a contagem de usuários, e o total de vendas. E então eu não disse como separadamente, como ok, este ponto se inscrever e me dar a contagem de pedidos e em seguida, ponto de produto subscrever e me dar a contagem de produtos, como fizemos anteriormente com muitos lugares aqui no fóruns ou com a lista de categorias , por exemplo, como você vê aqui que eu estava assinando esta saída deste GetCategories. E então eu estou atribuindo duas categorias para exibi-las no modelo. Saiba que aqui é um pouco diferente. Eu usei uma função em R x js que é chamado combinar mais recente. E estes combinados mais recente, É tão ótima maneira de combinar vários observáveis. Então, quando todos eles estão prontos, como se fosse, estes são observáveis. Quando eles estão prontos, então eu assino para eles e eu vou obter matriz dos valores exatamente a mesma ordem deste array. Então aqui eu vou entrar no primeiro membro deste valor, eu vou obter a contagem de pedidos. E na segunda contagem de produtos, contagem usuários e vendas totais. E se você mudar isso, como por exemplo, se você mover isso para cima, então os valores serão diferentes. Então, como você vê aqui, os valores, será uma matriz. Como vemos aqui. Será a contagem de pedidos, a contagem produtos, a contagem de usuários e o total de vendas. Ok? E então eu atribuo esses valores. Membro da classe, que é chamado de estatísticas, que é uma matriz. E este array, eu usei no modelo. Eu fui aqui e disse, “Ok, estatísticas, dêem-me a primeira, porque como vocês se lembram, nós temos aqui, a primeira é a contagem de pedidos. Então me dê o primeiro. E, em seguida, contagem de ordem ponto. Vou falar sobre essa contagem de usuários contrariados pontos mais tarde. Então agora temos exatamente como obtemos os valores do back-end. Então, as estatísticas primeiro serão a contagem de produtos, exatamente a mesma ordem que aqui. E também para todo esse usuário legal e também o total de vendas. Apenas uma coisa, como lembre-se de ter aqui, ng-se que se varas estáticas está cheio ou quero dizer que tem comprimento, em seguida, exibir o próprio componente de toda a página do painel, porque caso contrário você vai ter erro quando aqueles ainda não estão prontos. Certo, vamos para as superfícies. Então seus serviços, como você vê aqui, que eles são chamados de bibliotecas diferentes. Então eu usei aqui serviço de usuário, produto, serviço, serviço de pedido. Depende onde cada função relacionada com, por exemplo, o serviço de encomenda. Fui ao serviço de encomendas aqui na biblioteca de encomendas. Então eu disse, dê-me a contagem de ordens e ele voltará para mim observável. E o tipo de que será número de contagem de pedidos. Por que eu tenho isso? Exatamente isso porque nossa API, se você se lembrar, ele vai retornar para mim um objeto, e será dessa forma, ele não vai retornar para mim o número diretamente. Ele será retornado em um objeto. Então eu devo igualar exatamente a mesma renda que vem do backend e eu colocá-lo na frente. Então eu vou esperar campo de contagem de ordem com um valor que será o número. Assim, o retorno observável terá esta forma e também que get estará esperando esta forma. Então a mesma coisa que eu fiz também para todos os outros serviços. Então temos aqui painel e temos também a contagem de produtos. A contagem de produtos, como você vê, ele virá bem da mesma maneira, porque eu estou recebendo do backend desta maneira. Você também pode ajustar que eu vou mostrar-lhe mais tarde e bem para os usuários e o total de vendas, o total de vendas está nas ordens. Então nós também temos isso na biblioteca ordenada. Então, como você vê aqui, temos também o total de vendas como um número. É por isso que no painel, no modelo, eu disse, Ok, me dê estatísticas. O primeiro valor. E, em seguida, o valor será objeto porque aqui as estatísticas terão vários valores que estão vindo desses observáveis. E todos os observáveis estão voltando para mim objeto. Então eu quero usar valor ou estatística membro da matriz estática. E então eu vou dizer para me dar a ordem contagem disso. Se você não quiser assim. Como se você quiser fazer isso dessa maneira, só que. Estou explicando isso apenas para mostrar como fazer todas essas mudanças facilmente em seu código. Então, digamos que estamos esperando os valores. Diretamente, como eu vou chegar aqui, não objetos, mas o valor diretamente. Então, como podemos fazer isso? Primeiro de tudo, eu vou para a contagem de ordem get, por exemplo, e eu esperaria não ordenado contagem, mas eu esperaria apenas número. E também, eu esperaria aqui apenas número. Mas como você sabe, a API irá retornar para mim o objeto, o próprio objeto. Então isso é errado para mim. Então eu não vou conseguir um número, eu vou conseguir objeto. Então eu posso mapear o retorno deles, que vem da API. Posso mudar para ser apenas um número. Então eu posso fazer isso apenas como um número. Então, como posso fazer isso? Eu posso pegar isso e colocar cachimbo depois de tudo, todos eles obter. E então eu digo mapa. E eu vou importar este mapa de nossos operadores x js. E este é um mapeamento espacial, não como o mapa da matriz. É o mapeamento do nosso operador XJ AS que está vindo da nossa biblioteca x js. Então ele vai retornar para mim esse mapeamento e eu posso mapear o valor como eu quiser. Então eu vou esperar aqui para o objeto, que está vindo assim. Então aqui ou o conde virá como objeto. E eu quero mapear uma maneira de ser apenas um número. Então, como eu posso fazer isso, eu vou dizer que eu tenho aqui valor objeto por exemplo. E então eu não retornarei o valor do objeto. Eu retornarei o ponto do valor do objeto. E então eu escolherei este, a contagem de pedidos. Então eu digo que, que este valor de objeto será contagem de ordem. Então, dessa forma, eu preciso dizer que esse valor de objeto pode ser qualquer ordem. Você pode especificar o tipo diretamente como o especificamos antes. Então, como recapitulação, usei o mapa do nosso x j como operadores. E então eu esperava objeto que virá da API. E então eu disse, não me dê o objeto em si, mas me dê campo deste objeto, que será ordenado contar. A mesma coisa que vamos fazer pelas outras partes. Então, por exemplo, vamos fazer para os usuários, Vamos aqui. E nós aceitaríamos, esperar que não teremos contagem de usuários, mas teremos número. E também aqui não contagem de usuários, mas teremos também número. E então eu vou dizer dot pipe. E, em seguida, o valor do objeto não será o objeto em si, mas a conta de usuário. Como porque, como você se lembra, a API retornará para mim a contagem de usuários no objeto. Então este é o mapeamento de seu valor de retorno, que vem do observável. Então, dessa forma, eu vou garantir que eu vou obter o número porque o objeto forma de backend é assim. Vamos importar também este mapa aqui a partir de nossos x j s. Então temos aqui observável e bem o mapa de RX j como operadores. Lembre-se, este mapa não é mapeamento de matriz, é mapeamento de nossos x js. Então você tem que colocá-lo dentro de um tubo fora observável. Então, a mesma coisa que vamos fazer também para o total de vendas. Então não esperamos vendas totais como este, mas podemos esperar mapa e este mapa foram devolvidos para mim assim, exatamente da mesma maneira. Nós não estamos fazendo nenhuma alteração, exceto este campo como ele vem do backend. Então eu vou dizer aqui total. Então salvamos tudo. E então tentamos também fazer isso para produtos. Eu vou fazer isso rapidamente. Então teremos aqui número e também aqui teremos um número. E então eu usaria e importaria esse mapa de nossos x js. Então podemos ter aqui mapa e então eu vou usá-lo aqui importado. Então, para cada serviço, temos que fazer da mesma maneira e colocar aqui o valor do tubo e do objeto. E não será contagem de ordem, mas seria Deus produto. Então, salvamos tudo e verificamos se tudo está funcionando bem. Todos esses passos, que eu fiz agora é apenas porque eu não quero ver aqui como ponto e, em seguida, encomendar a contagem e, em seguida, contagem de produtos. Agora podemos apenas ter as estatísticas e os valores de inundação que estão vindo do back-end. Então nós podemos aqui tentar voltar para o navegador. E vamos verificar se estamos recebendo os valores da maneira correta. Como vemos que não estamos recebendo o total de vendas. Vamos verificar a API. Vamos ver como o total diz um retorno. Então talvez tenhamos alguns erros de digitação, para que possamos ter aqui o total de vendas. Certo, vamos checar nossa API. Vamos novamente para pedir serviço. Então, onde está o serviço de encomendas? É aqui. E então eu vou dizer obter vendas totais são, ainda é contagem de pedidos. Então podemos colocar vendas totais assim. E então temos também a API. Tudo está funcionando bem. Nós recarregamos e vamos para o navegador e verificar se ele está funcionando novamente. Legal, está funcionando de novo. Então, como você vê que temos mapeado os valores que estão vindo do back-end para um único valor depois de ler esse objeto. Então você tem controle total no front-end. Basta combinar-se com um back-end e tudo vai funcionar bem para você. A parte mais importante desta palestra que, ou esta solução da lição de casa está usando este combinado mais recente. Então você não precisa se inscrever um por um. Temos um código muito curto. Subscrevemos tudo e colocamos os valores em estatísticas e os usamos no front-end ou no modelo. 135. Refatoração com rotas: Ok, nesta palestra nós vamos fazer alguma refatoração para o nosso código. Então, primeiro de tudo, vamos fazer alguma refatoração para a rota. Então, a rota, como você se lembra, nós os criamos no nível do aplicativo. Então, como você vê aqui que temos no módulo de aplicativo, temos todas as nossas rotas estão localizadas aqui. Primeiro de tudo, o que vamos fazer, vamos criar um módulo especial para as rotas e, em seguida, fazer o painel funciona bem. E também as outras páginas. Porque, por exemplo, quando eu vou aqui para a rota e ir para a página inicial, Eu vou ver que eu estou recebendo página vazia. Então, o que eu espero que eu deve ter o painel diretamente. Então eu não quero ter uma rota que é chamado painel de controle aqui. Fazer isso é muito simples. Nós só precisamos dizer que, ok, eu tenho o pai é rude e eu tenho o shell que está contendo o conteúdo ea barra lateral sempre. E então eu quero ter o painel não em URL separado, mas será exatamente o mesmo que rota aparente. Então nós podemos apenas remover este caminho daqui e então nós dizemos Salvar. E então vamos ver que nosso aplicativo é carregado diretamente para a página do painel. Então, sempre que eu ir para o Painel, eu vou ver que o painel estará na página inicial. Então, como você vê que temos configurado anteriormente na barra lateral que o painel terá barra painel. Então precisamos remover isso também. Então vamos aqui para o compartilhado e depois para a barra lateral. E na barra lateral, eu diria que o link do roteador será apenas a página inicial. Portanto, não precisamos especificar a página dessa maneira. Então eu vou aqui para os produtos, voltar para o painel, tudo está funcionando bem. Certo, no segundo passo, vou refatorar o módulo do aplicativo e colocar as rotas no módulo de rota separado. Porque como vemos aqui que temos arquivo muito grande para o módulo de aplicativo. Então, normalmente podemos colocar as rotas em módulo separado. Então vamos fazer isso. Como você sabe, que podemos ter módulo múltiplo em aplicação angular e essas moléculas podem conter vários componentes em si também. O módulo não precisa conter vários componentes. Ele pode ser usado para importar algumas bibliotecas, como módulo UX também. Ele pode estar segurando as rotas em si. Então podemos fazer isso com um X. Você pode gerar um módulo ou você pode simplesmente usar trechos angulares. Eu só quero mostrar que eles são diferentes maneiras de gerar componentes e módulos em Angular. Então, primeiro de tudo, você pode usar Gerar e, em seguida, você pode encontrar módulo. E você vai encontrar aqui diagramas, módulo angular. E aqui você especifica as propriedades do seu módulo como vimos anteriormente. Mas há outra maneira que eu posso instalar também extensão, que é chamado de trechos angulares. E este trechos angulares, ele está sempre seguindo a versão angular, então ele está sempre seguindo a versão atual em que você está. Então aqui temos trechos angulares. Você pode instalá-lo e ele lhe dará a capacidade gerar componentes diretamente ao vivo no código, como você vê aqui. Por exemplo, precisamos de um módulo. Então, depois de instalar esta extensão, podemos usá-la. Então, primeiro de tudo, eu vou criar um novo arquivo no nível do aplicativo, tão perto do módulo do aplicativo e chamá-lo de roteamento do módulo dot ts. E dentro deste roteamento de aplicativos, eu vou usar os trechos. Então eu só tenho que colocar um menos. E então ele irá listar para mim algumas opções dos trechos. Então eu vou dizer aqui módulo, como você vê aqui. E então eu coleciono Enter ou pressione Enter. E quando eu pressionar enter, ele irá gerar para mim todos esses itens. E ele irá gerar para mim a nomeação e especificado para que eu possa dar um nome diretamente. Então eu diria módulo de roteamento de aplicativo. E é por padrão importar algum componente que eu não preciso. Então, podemos remover essa importação de componente, não precisamos mais disso. E agora temos o módulo de roteamento de aplicativos. Então podemos copiar todas as rotas aqui que temos. Então, podemos copiar todos eles ou cortá-los e, em seguida, colá-los no módulo NG atrás do módulo AND porque é uma constante e eu vou usá-lo. E da mesma forma, precisamos importar todos esses componentes. Então, para importá-los rapidamente, você só precisa pressionar o espaço de controle ou ponto de controle e, em seguida, você vai obter todos eles. Então eu vou fazer isso rapidamente. Como vemos que importamos automaticamente tudo e precisamos, bem como o, nosso protetor bucal, que temos especificado a partir de usuários Biblioteca. E também, precisamos importar o tipo de rotas que vem de Angular. Então agora temos as rotas importadas. Vou fazer exatamente o mesmo que fizemos no módulo. Então precisamos copiar esta linha também ou cortar o slide. Então vamos aqui e pegamos. E então vamos para o módulo do aplicativo e vamos para a importação, porque ele está na importação, eu vou importar módulo roteador. E, em seguida, vamos usar este módulo de roteamento no módulo de aplicação. Precisamos também importar nosso módulo de proteína em nosso módulo de aplicação. Então, nesse caso, teremos as rotas automaticamente dentro da nossa aplicação. Novamente, controle o espaço a ser importado automaticamente. E então teremos todas essas bibliotecas não são mais necessárias. Então, quando você salvar, veremos que estamos acinzentados. Então isso significa que eles não são usados em qualquer lugar. Assim, também podemos remover a importação não utilizada. Se você receber tal erro no console que ok, tomada do roteador não está definido. Isso ocorre porque esse módulo de aplicativo não tem mais o módulo de roteador. Por isso, você também pode fazer uma exportação do módulo de roteador no módulo de roteamento ARP. Então você só precisa ter em exportações módulo roteador novamente. Então ele vai então sabe que o módulo de aplicação está usando o módulo de roteador, que é usado no módulo de roteamento AP. E podemos verificar novamente a nossa navegação. Vemos que tudo está funcionando sem problemas. E também, precisamos especificar se o usuário, por exemplo, foi para a página indefinida, algo assim. Então, o que vai acontecer? Não quero que ele veja um amplo debate. Eu queria, por exemplo, ser redirecionado para a página inicial. Então, como podemos fazer este redirecionamento para a página inicial, É muito simples, bem como você vê aqui que temos vários parceiros e o caminho raiz, mas não vamos usar esses caminhos de rota. Vamos criar outro passe. E é muito importante estar no final deste caminho. Então este caminho será como duas estrelas. E então podemos dizer redirecionar para a página que você deseja. No nosso caso, queremos ser direto para a página inicial. E então você precisa, depois de ter tudo como Diretório direto para, você precisa ter jogo banho e, em seguida, cheio como eu quero combinar exatamente este caminho que para fora. Então, podemos ter aqui exatamente isso. Então temos tudo, tudo o que não está definido aqui, então redirecionado para a página inicial. Você tem que ter certeza sempre que isso está chegando no final. Caso contrário, se você colocá-lo antes, então tudo será redirecionado para a página inicial. Então vamos tentar novamente e fazer algum problema aqui. E, por exemplo, veremos que temos três direcionado para a página inicial. Então, dessa forma, temos re-fatorado nosso módulo de roteamento para ter módulo aplicação mais estável e mais limpo. E também, vamos fazer outras refatoração que estão relacionadas ao desempenho, como veremos mais tarde. 136. Assinaturas finais para desempenho: Uma das histórias importantes que o usuário ou o desenvolvedor está sempre caindo nesse vazamento de memória. O vazamento de memória é muito dor de cabeça para a aplicação, especialmente em Angular. Você precisará ter e ter certeza de que não há vazamentos de memória em seu aplicativo. Então, qual é o significado de vazamento de memória? Um vazamento de memória é como algo que você está criando, por exemplo, um objeto. E esse objeto está sendo criado novamente e novamente toda vez que você visita, por exemplo, alguma página específica. Então, por exemplo, eu vou aqui duas categorias. Eu abro um novo objeto, e este objeto fica na memória deles. Volto e volto, abro um novo objeto, e o objeto antigo fica na memória. Isto é que eu estou falando de objeto. Mas no nosso caso aqui, o único vazamento de memória que temos são as assinaturas. Se você se lembra, estávamos usando assinaturas para pegar os dados dos serviços, do back-end. E esses serviços estão sempre fornecendo observáveis. E esses observáveis, nós os usamos dizendo que queremos assinar algo. Por exemplo, eu tenho uma lista de categorias. E se você quiser no componente lista de categorias, você pode ver como estamos abrindo uma assinatura. E se você se lembrar que a assinatura significa que eu estou observando os valores não faria quando eles estão prontos a partir deste observável, que é método GET, método HTTP. E então eu estou assinando para obter os dados dele. Então, toda vez que eu estou visitando este componente, eu estou abrindo uma nova assinatura. E essas assinaturas devem ser fechadas. Há várias maneiras de fazer como assinatura ou encerrar a assinatura. Um deles é fazer como ponto, cancelar a assinatura, como imediatamente depois de assinar. Então eu pego os dados e então eu cancelei a assinatura. Caso contrário, você pode ter, outra maneira usaria KMS e mais eficiente do nosso XJ como fazemos é chamado tomar até. E aqui você pode especificar uma Bíblia. E dentro deste tubo é como se estivéssemos filtrando os dados que estão vindo daquele observável. Eu digo tomar até e levar até sempre de operadores de nossos x js. Escolha até está esperando por algo que é chamado assunto. E este assunto, quando você usá-lo ou concluído , a assinatura será encerrada. Para explicar mais, como eu estou dizendo, big data, big data até que algo aconteça. Então o que isso é algo, algo que é chamado RX JS, chamado assunto. Assim, você pode definir e usar objetos com muita facilidade. Digamos que podemos dar um nome a este assunto. Então, podemos dizer, e subs N subscrições. E sempre um assinaturas que eles estão dando como sufixo com um cifrão. E este cifrão dessa forma, isso significará que eu tenho aqui sujeito ou observável. E este n subs terá um tipo de assunto. E o assunto também dos nossos x js. E sempre, quando você cria um assunto, você precisa dizer um novo assunto. E eu vou sempre, este assunto precisa especificar um tipo, como você vê aqui, um tipo genérico. Então você precisa esperar algo dentro desse tipo. Então podemos dizer por enquanto qualquer. Então, neste caso, temos n subs. Então n subs vai começar a executar sempre que eu visitar este componente, que é por exemplo, lista de categorias. Então eu abro agora e você sujeita piscinas, é chamado termina ups. Então eu quero tomar esta assinatura de dados até n subs terminar. Então, quando acaba digitalizado acabamento ou como eu posso terminar termina ups e subsequente ser terminado desta forma. Então você não pode dizer que isso acaba e então você pode dizer completo. Então, neste caso, eu digo que acaba acabado. Então, tome até termina ups como n assinatura, que está acontecendo aqui. Então, quando salvarmos, vamos tentar isso. Vamos ver se estamos, ok, estamos recebendo os dados. Então, depois que temos as categorias, nós terminamos as extremidades ups e estamos recebendo aqui os, por exemplo, os dados. Mas como você vê que nós terminamos sua assinatura em n, n ele, que não é muito boa prática porque no NDI, em Editar, se houver algum atraso do backend, então isso será executado antes disso. E então obtemos as categorias, e então haverá atraso e a assinatura será encerrada antes de começar. Então, para você, para isso, estamos usando OnDestroy. Então, quando o componente é destruído, o que eu quero dizer, então quando eu sai de qualquer componente em Angular, por exemplo, quando eu sair da lista de categorias e eu vou para produtos, eu vou obter NG OnDestroy de categorias componente, o que significa que estou destruindo o componente diretamente. Não preciso mais dele, só quando visito de novo. Então eu executo o NG nele. Novamente. Este é o ciclo de vida dos componentes em Angular. Então eu quero adicionar assinatura quando componente foi destruído. Então você me entende? Acho que sim. Então aqui precisamos usar em destruir também. Então este componente irá implementar em init e em destruir. Então, para isso, precisamos criar um método que é chamado NG OnDestroy. E essa energia em destruir fará para mim o trabalho que eu quero. Então eu digo aqui, n subs completo. Então, para ter certeza que podemos registrar algo aqui para ver como ele é executado ou imprimir algo que categorias destruídas. Por isso, se quiseres, podes guardar isso. E então vamos para Categorias e navegamos para fora dela. Então aqui meu aplicativo está sendo recarregado novamente. Eu saio agora das categorias. Verei que as categorias são destruídas, por isso são removidas da memória. Não temos nada lá. Então, para isso, quando a energia e é destruída é concluída e eu não tenho que tomar até aqui. As assinaturas permanecerão abertas. E cada vez que eu visitar a página de categorias, eu vou abrir você se inscrever, assinar, assinar, o que vai causar para mim um vazamento de memória. Então, é melhor dizer levar até e destruir esta assinatura quando n subs é concluída, que está realmente acontecendo quando Nk da constante não será destruído. Então, como você vê aqui, que depois de destruir este componente, estamos terminando as assinaturas para torná-lo mais eficiente. Às vezes as pessoas que dizem fazer isso também, como pegar o próximo valor, ter certeza de que você tem o próximo. E, em seguida, fazer, por exemplo, esse fim da assinatura ou completar sua assinatura. Então, nesse caso, você precisa fazer isso para todas as assinaturas que você está abrindo em seu aplicativo para evitar todos os vazamentos de memória que você tem. Para isso, precisamos fazer tudo isso pelos nossos componentes, o que fizemos. E a partir de agora, vamos sempre usar isso acaba ups para completar sempre o assunto e terminar as assinaturas. Neste vídeo, eu vou fazer o mesmo para todos os componentes que criamos ou para todas as assinaturas que abrimos para não torná-lo vídeo lento para você. E no final você verá o código da seção, que é em que com tudo com NG OnDestroy e bem com Assinar tomar até. 137. Arquitetura dos componentes no repositório: Ótima. Agora vamos começar com a nossa loja de ND. Agora compre onde seus clientes entrarão e C produtos e encomendar alguns produtos. Então, se você se lembra, criamos o repositório do projeto de forma que temos uma loja e, por exemplo, um aplicativo de blog interno e o aplicativo do painel de administração. Nós terminamos o aplicativo do painel de administração e vamos começar com o aplicativo de e-shop, mas eu não vou usar esse conceito de que eu tenho um único e-shop, vou assumir que eu tenho vários clientes enquanto estou desenvolvendo empresa, por exemplo, sou empresa de software. E quero fornecer o meu E-sharp a vários clientes. Então, para não repetir esse código de novo e de novo, eu posso obter o benefício de usar as bibliotecas. Então, por exemplo, eu quero, por exemplo, usar o componente de login e componente de registro novamente em outro cliente ou em outra loja. Claro, eu posso mudar o estilo do login e, em seguida, eu não vou repetir o mesmo código cada vez que eu tenho um novo cliente. Então eu vou usar essa abordagem. Então, como você vê aqui que nós temos NGI loja um e choque de energia também. E eu movi todos os componentes do final G-sharp um para ser fornecido pelas bibliotecas como produtos e pedidos. Por exemplo, teremos a lista de categorias, o banner e o componente de detalhes do produto e o componente de lista de produtos que estarão todos na biblioteca de produtos. Então, nesse caso, quando eu criar e você comprar, eu posso usar os mesmos componentes que estão localizados nessa biblioteca. Então eu não quero repetir o código novamente em todas as lojas de NG. E isso será tudo sob um repositório, que é chamado de repositório Blue Bits. E teríamos o benefício de compartilhar o código entre nossa organização. Deixe-me explicar mais. Assim, por exemplo, o Google tem o mesmo login para todos os seus serviços, como Google Drive, Google AdSense, Google Analytics, você verá sempre o mesmo componente de login é usado. E isso que eu vou fazer aqui, eu vou usar os mesmos componentes ou a mesma biblioteca com serviços diferentes. Estou a providenciar isso. De volta ao nosso projeto. Veremos que estamos usando essas categorias, por exemplo, lista de produtos alugados e em destaque. E esses serão localizados exatamente na Biblioteca de produtos. Além disso, o login será o mesmo login que usamos para o painel de administração anteriormente. Então, dessa forma, estamos reutilizando componentes. Cada e-sharp que estamos criando. 138. Como preparar estrutura e estilos: Ok, bem-vindo de volta. Vamos agora executar o aplicativo que precisamos para qualquer loja. Se você se lembra, temos duas aplicações. Um é o administrador, e o segundo é inicialmente, você tem duas maneiras de executar qualquer aplicativo. Você só pode digitar x serve e, em seguida, você pode digitar o nome do aplicativo. Por exemplo, Eu tenho qualquer loja ou você pode usar também o console NX, como fizemos anteriormente, como um saque. E então você pode especificar a loja que você deseja. Então, para mim, eu vou usar uma linha de comentários e começar a nossa aplicação. Aqui. Em vez de ter o aplicativo do painel de administração, teremos o front-end ou o final que você compra aplicativo. Ok, o aplicativo deles está sendo executado com sucesso. Vamos aqui e atualizar nossa página e veremos que temos o que fizemos anteriormente quando eu estava explicando para vocês sobre a energia principal. Então, primeiro de tudo, precisamos configurar os estilos de soma. Precisamos preparar nosso front-end. Então, se voltarmos ao design, como você vê aqui na foto, você verá que o próprio site está em um recipiente. Então esse recipiente tem uma largura específica. E vamos colocar toda a aplicação dentro desse recipiente. Portanto, o aplicativo não será um aplicativo de largura total. Então, para fazer isso, vamos aqui para a nossa aplicação de compras final. E também temos aqui aplicação. E aqui no componente aplicativo, não vamos ter diretamente o cabeçalho e o rodapé, mas vamos contê-los em algum recipiente. Então podemos criar uma div, dar-lhe uma classe, podemos chamá-lo de contêiner. E dentro deste recipiente, vamos colocar todos esses componentes que estamos chamando para a nossa aplicação. E este contêiner, podemos configurá-lo para que possamos ir para os estilos de nossa aplicação. Se você se lembra, temos estilos públicos e temos aqui e você compra na loja NDI está usando alguns outros estilos. Então, por exemplo, podemos usar alguma classe que podemos colocá-la aqui. Então aqui você não precisa importar apenas, mas você também pode escrever classes. Então, por exemplo, você pode dizer recipiente terá larguras. Por exemplo, 1, 0, 0, 0, 0, 0 a 100 pixels. E também podemos dar-lhe um preenchimento, como por exemplo, 15 pixels. Então, de cima e de baixo. Então ele terá alguma largura específica e algum preenchimento. Então, se formos aqui, veremos que o conteúdo é movido um pouco com base na configuração que demos. Então, como você vê aqui que o recipiente div tem essa largura e também, ele tem algum preenchimento. Vamos colocar no meio. Então, podemos dizer que este recipiente terá margem 0 fora todos. Então, desta forma, podemos colocar o conteúdo no meio, como você vê aqui. Claro, depende da largura que você obteve do designer. Você pode pedir-lhe áudio pode abrir o arquivo XD e verificar a largura que é fornecido lá. O arquivo XD para o design é anexado com esta palestra para que você possa usá-lo também. E como você se lembra no design, como você vê aqui, que temos um fundo cinza, esse fundo cinza do conteúdo. Podemos usar o mesmo fundo cinza novamente. Então, podemos usar uma dessas cores, que são fornecidas pelo NG principal porque já o importamos. Então podemos ter um desses cinza, por exemplo, vamos pegar este cinza. Então eu vou dizer para me dar aqui também. Uma cor de fundo será valiosa e esta variável será a superfície 100. Então eu vou colocar isso e eu iria obter este fundo cinza. Mas como você vê aqui que nós não temos o, por exemplo, o DV não está colando exatamente no navegador de página porque nós não temos normalizá-lo. Se você se lembrar, no aplicativo admin, temos usado uma biblioteca que é chamado normalize. Então vamos usá-lo também aqui. Então podemos colocá-lo no topo da nossa aplicação. E então podemos ter como um grande dimensionamento do recipiente e acolchoamentos inicializados para a configuração do aplicativo. Se você se lembra, temos arquivo de configuração. Nós especificamos a fonte e o tamanho da fonte e também alguns inicializar em que links. Eu prefiro colocar isso também em importar as bibliotecas porque o N G principal está substituindo alguma pauta, ele está substituindo a fonte. Está substituindo alguma configuração que fizemos. Então podemos começar aqui claro. Depois que importamos tudo, então podemos inicializar nossa aplicação com fonte específica, e então podemos inicializar ou começar a styling com base nessas configurações aqui. Então guardamos isso. E veremos que agora temos fontes melhores. Temos o tamanho padrão da fonte será 14. E com base nisso, vamos construir nossa aplicação. Então vamos limpar um pouco. Então temos aqui cabeçalho e temos aqui o conteúdo. Então podemos também, embora aqui. E temos o roteador em nas páginas, temos o componente homepage. Então, no componente da página inicial, não precisamos mais disso, então podemos removê-lo e salvá-lo. Então, na próxima palestra, vamos começar a estilizar o cabeçalho. Então, como você vê aqui, nós temos o cabeçalho e vamos estilizá-lo exatamente como nós temos em seu design. 139. Como definir o cabeçalho: Ok, nesta palestra vamos estilizar o cabeçalho, o cabeçalho que irá conter logotipo, cert, e alguns links. Então, primeiro de tudo, vamos limpar um pouco. Não estamos usando a dieta de componentes porque temos o arquivo que estamos localizando nos estilos públicos. Então temos aqui na loja algo chamado cabeçalho. Então vamos usar esse até agora que precisamos excluir o que criamos anteriormente. Então agora podemos começar com o cabeçalho. Então, se voltarmos ao design, como você vê aqui, podemos ter o logotipo aqui e a pesquisa aqui, e também a navegação e alguns ícones para carros e a conta de usuário. Mas como isso localizou, como podemos localizar essas coisas. Se você se lembra que estávamos usando uma grade em prime end. E você pode concordar com um designer para fornecer um design guiado por grade. Então, como podemos fazer isso? Se você quiser, você pode simplesmente ir para Ver e, em seguida, você pode dizer certamente fora grade no XD ou Adobe XD. E então você verá essas grades. Teremos um 12 colunas e todas essas colunas serão usadas exatamente como nós tê-los em prime end. Então, se você manter mais olhos, você pode ver que a pesquisa está usando quatro colunas. E também há aqui espaço uma coluna, e então a navegação tem três colunas, e esta tem apenas uma coluna. O banner está usando todo o espaço. Por exemplo, categorias. Cada item está usando duas colunas. E aqui também, a mesma coisa para o item do produto. Veremos que temos três colunas para cada item. Então, dessa forma, você pode ter um bom designer e o designer lhe dará o design do sistema gridded, que tornará para você o dimensionamento fácil. Então eu acho que precisamos de uma linha de grade que terá três colunas e quatro colunas, e uma coluna de espaço que terá deslocamento deste. Então, teremos três coluna com deslocamento 11 coluna no final para esses ícones. Então vamos fazer exatamente o mesmo. Eu vou aqui primeiro e vou abrir uma etiqueta. Normalmente, o cabeçalho vem com uma tag chamada cabeçalho, que é tag HTML. E então eu vou ter um div e eu vou dar-lhe uma grade classe P. E este grau B terá várias colunas, como conversamos anteriormente. Então, primeiro de tudo, teremos uma div com três colunas, então p chamado três. E vamos ver como vamos falar sobre a capacidade de resposta no final deste curso. Então este terá, por exemplo, col md como tamanhos médios para três, mas vamos usar agora o geral, que será apenas três colunas. E também, precisamos de outra div, que terá para a barra de pesquisa, que terá chamada P, e quatro colunas, e outras três colunas com deslocamento uma para empurrá-la. Então, para o menu, teremos div P chamada três. E então teremos também uma classe que é compensada uma. Então vamos dizer p offset e especificamos quanto. Então podemos compensar apenas um. Então podemos ter compensação e depois um. Então, nesse caso, teremos uma linha empurrada. Então vamos colocar algumas palavras aqui. Por exemplo, aqui eu coloco logotipo, e aqui vou colocar, por exemplo, pesquisa. E aqui vou colocar, por exemplo, o menu. E no final temos uma coluna para os ícones, que terá chamada P e um. E aqui vamos colocar ícones. Vamos salvar isso e verificar nossa aplicação. Mais uma vez, vamos ver que não podemos resolver componente de cabeçalho SCSS, sim, porque nós excluímos. Vamos para o arquivo ts do componente e excluímos essa linha porque não estamos mais usando. Então voltamos novamente para a nossa aplicação. Vamos ver que temos logotipo, pesquisa, menu e ícones. Então exatamente como especificamos esses espaços. Agora, vamos preencher esses espaços. Em primeiro lugar, vou preencher o logotipo. Então, o logotipo, eu já usei no aplicativo de administração. Então, se você se lembrar que cada aplicativo tem seus próprios ativos. Então, precisamos usar o logotipo também, que está localizado na pasta de ativos e colocá-lo na aplicação de Andy loja. Então eu vou aqui, copiar o arquivo ou a pasta tudo e dizer ND shop. E então eu vou para a pasta Assets e, em seguida, colar as imagens aqui. Então eu vou ter um logotipo e a foto de login que precisamos também para a página de login. Então aqui temos o logotipo e eu vou usá-lo no cabeçalho. Assim, o logotipo simplesmente podemos colocá-lo dentro, por exemplo, um div. Podemos dar-lhe uma aula, podemos chamar-lhe logo. E dentro do logotipo eu vou colocar a imagem. Então eu vou ter aqui imagem e, em seguida, ele terá como alguma fonte, que será a pasta Assets. E depois imagens e logo. E esqueci o nome. Será logo ponto. Png. Então vamos ter aqui logotipo ponto PNG ea alternância será local. E então podemos salvar isso. E veremos que temos o logotipo aqui, mas devemos ter alguns tamanhos específicos. Então, para estilizar isso, podemos ir para o nosso estilo de aplicação. Por exemplo, ele pode brilhar este e nós não precisamos do componente. Podemos ir aqui e especificar que temos o cabeçalho. E o cabeçalho irá conter o logotipo. Então, podemos colocar aqui logotipo e dentro do logotipo teremos imagem. E esta imagem terá um tamanho específico. Assim, com base no design, podemos dar uma largura, por exemplo, 160 pixels para o logotipo. Então podemos ir aqui e verificar. Veremos que temos o tamanho do logotipo assim. Então, dessa forma, nós preparamos nosso logotipo e, em seguida, vamos fazer esta barra de pesquisa. A barra de pesquisa estará localizada dentro deste item ou desta coluna. Então teremos aqui uma entrada. E você também pode criar um componente de TI separado para isso. Por exemplo, você pode chamá-lo de pesquisa de produto. Mas vou mantê-lo assim por enquanto, porque vamos substituí-lo por um componente, como veremos mais tarde. Então agora podemos mantê-lo assim. Então vamos fazer o cardápio. Podemos também o menu, não localizar todos os itens de menu aqui para não ter cabeçalho grande. Mas também podemos criar um componente. Podemos chamar-lhe EV. O nome pode ser N, G afiado, NADPH. E este nav da loja da NG será um componente onde ele mantém meus itens de navegação. Então vamos criar este componente. Para criar o componente podemos usar também o console NX. Então eu vou aqui para gerar um novo componente, e eu vou procurar por componente. E este componente terá um nome nav. E os projetos serão acabar com você loja. E o estilo. Ok, eu ignoro o estilo e também, nós precisamos de um estilo de vida. E também, o seletor será N G nav afiado. E precisamos pular os testes. E onde estaria localizado. Ele não será localizado na raiz do aplicativo, mas será, ele será localizado em um compartilhado e, em seguida, nav perto do cabeçalho e do rodapé. Então podemos salvar isso e verificar nossa aplicação. Veremos que criamos o componente nav aqui, e é automaticamente importado no módulo do aplicativo. Então agora podemos usar este componente. Então vamos salvar e verificar se o componente está realmente balançando bem, ok, ele tem Navisworks para que possamos criar ou modelar a navegação agora, que são normalmente sua navegação vem em lista sem classificação. E esta lista não ordenada, podemos dar-lhe uma classe que é chamada nav. E então podemos ter LI e vamos precisar de três itens da lista. E dentro do item da lista teremos um link. Então, quando você clicar em Tab, você vai tê-lo assim. Então primeiro teremos H ref. Nós não precisamos deles porque vamos substituí-los pelo link do roteador, como vimos no aplicativo admin. E aqui podemos ter, por exemplo, casa e teremos aqui produtos, e teremos contato. Então também, vamos criar um estilo. Você pode usar o cabeçalho também aqui, ou você pode criar um arquivo separado para o estilo. Então, dessa forma, eu vou criar outro arquivo que é chamado nav ul dot SCSS. E este CSS nav será importado no meu aplicativo. Então eu vou aqui para a loja de MD. E depois do cabeçalho e do rodapé, vou chamar o arquivo NAV. Então, depois disso, salvamos e vamos para a luta suficiente para estilizar nossa navegação. Então eu vou ter aqui nav. E como você se lembra, dentro do amor, teremos LI. O estilo de lista desse LI será nenhum para não ter esses pontos perto de cada item da lista e a exibição será inline-block, para que eles possam estar próximos uns dos outros, não uns dos outros como uma lista. E então eu vou dar margem escrever cerca de 15 pixel para empurrar os itens longe um do outro. Então vamos salvar e verificar nossa aplicação. Veremos que teremos todos esses itens de navegação. Então agora podemos estilizar os links para que um link tenha cor e a cor será como um cinza escuro. Então eu vou usar uma variável que é chamada superfície. 500. E em quem quer que seja, vou usar cores diferentes. Então, quando eu colocar o mouse no link, eu vou usar uma cor diferente. Então, por exemplo, podemos ter aqui sobre o a, e o a terá uma cor, que será a cor primária. Se você se lembrar, definimos uma cor primária na configuração e esta cor podemos usá-lo aqui. Então, a cor primária vamos usá-lo sempre em nossa aplicação quando você quer mudar o tema ou a coloração ou a cor base do aplicativo. Então a cor está localizada aqui. Então, se eu salvar, nós vamos aqui, vamos ver que, ok, nós temos a navegação assim. Ainda temos um problema que precisamos. Como, de alguma forma, quando colocamos o mouse, não parece ter um texto. O que queremos tê-lo como um elo. Então você pode mudar o comportamento do mouse aqui. Você pode dizer que mais grosseiro será um ponteiro, então você pode fazê-lo assim. E então o mouse seria como um ponteiro. E para os links do roteador, precisamos adicioná-los para que possamos ir novamente para a navegação aqui. E então podemos dizer sobre isso, vamos para o link do roteador, que será página inicial. Então não será nada. E para produtos vamos usar o link do roteador, que é chamado de produtos. E para contato, vamos usar o link do roteador, que é chamado de contato. Nós guardamos isso. E então não podemos verificar se temos a lista de produtos e a página inicial. Finalmente, como vimos no design, temos dois ícones aqui. Vamos substituí-los pelos ícones da navegação. Então aqui podemos ter o cabeçalho e dentro temos os ícones. Vou usar ícones de ONG principais. Tenho dois ícones. Um é usuário, o outro é um carrinho de compras. Mas também, esses componentes ou ícones serão substituídos pelos componentes. Por exemplo, o carrinho de compras. Quero mostrar quantos itens no carrinho de compras. Então precisamos substituí-lo de alguma forma com seu componente, como veremos mais tarde quando vamos trabalhar com seu carrinho. Mas, por enquanto, vamos estilizar assim. Então também, precisamos ter os estilos ou todos eles devem ser como uma linha de alguma forma, porque você vê aqui eles não estão alinhados juntos. Então podemos dar uma aula para cada item. Então, por exemplo, temos aqui nosso logotipo, e aqui podemos dar um copo chamado surto. E aqui podemos dar uma classe como, por exemplo, navegação. E aqui podemos dar um copo, podemos chamá-lo de Ferramentas ou ações. Então podemos dar como ferramentas. E então podemos colocar como uma margem superior, alguns acolchoamentos de margem. Então, para alinhar todos eles juntos, para mim, a navegação está bem assim se eu verificar. Então, está tudo bem para mim assim. Então, podemos apenas mover que ferramentas como dar editado com algum topo de preenchimento para que possamos tê-lo alinhado com o item. Então, podemos dizer que esta div terá preenchimento, estofamento top, podemos dizer que seria 15 pixels ou mais até que eles estejam alinhados juntos. Então podemos ter isso como 22 pixels. Então íamos para o estilo de cabeçalho. Então vamos para o nosso cabeçalho SCSS, e então podemos ir aqui e abrir uma nova tag. Podemos chamar-lhe ferramentas. E essas ferramentas terão, o topo da banda será 22 pixels. E como você vê aqui, está alinhado. Vamos colocar um pouco de espaço longe um do outro desses ícones. Então, como você vê aqui que criamos os ícones próximos um do outro. Para que eu possa acessar essa aula a partir das ferramentas. Então tudo o que o BI Insight Tools dá margem, certo? Como, por exemplo, cinco pixels ou 10 pixels. Então podemos dizer aqui dot py e depois margem, certo? Por exemplo, 10 pixels. Então podemos fazer isso assim. E veremos que eles estão longe um do outro. Isso é muito bom. Então agora o cabeçalho para nós está pronto, exceto a busca. Vamos criar um componente, especialmente para o aumento, e vamos usá-lo e colocá-lo na biblioteca de produtos. Então, a partir da biblioteca de produtos, vamos usar o componente set para pesquisar em seus produtos. 140. Componente de pesquisa de produtos: Ok, nós vamos nesta palestra para fazer a entrada de busca. Então, a pessoa que pode procurar por um produto quando ele colocou algum texto dentro desta entrada. Mas uma coisa diferente aqui que vamos colocá-lo dentro do cabeçalho, mas vamos fornecer este componente em sua biblioteca de produtos. Claro, você pode mantê-lo também no componente de cabeçalho e você pode usá-lo normalmente. Mas eu vou fazê-lo aqui como um componente separado que pode ser localizado e reutilizável em outro lugar. Então, em primeiro lugar, vamos para o nosso código. Primeiro, vamos substituir isso por algo como um componente que será localizado em sua biblioteca de produtos. Algo como temos qualquer afiado, mas qualquer nav loja está localizado dentro do próprio aplicativo, perto do cabeçalho e do rodapé. Mas este componente estará localizado na biblioteca de produtos. Então, como podemos fazer isso? Primeiro de tudo, vamos criar o componente. Então primeiro eu vou para o NX gerar, e então eu vou usar esse gerador, procurar por componente. E então eu vou criar na pasta de componentes e um componente que é chamado de pesquisa de produtos. E este projeto será produtos. E então vamos pular os testes de estilo e pular. Tudo como estamos como estamos fazendo sempre com cada componente e podemos dar seu seletor como produtos. Busca. Essa é também uma opção chamada Exportar. Não vou colocá-lo agora, mas vou mostrar-lhe a diferença minimamente. Então vamos criar este componente e, em seguida, executar este aplicativo ou esta linha comum. E este comando será executado em sua biblioteca de produtos. Como você vê aqui que criamos a pasta de componentes. E dentro desta pasta de componentes, há um componente chamado pesquisa ou pesquisa de produto. Simplesmente, vou dizer à minha aplicação que usam este componente de alguma forma. E eu vou aqui para o cabeçalho, e então eu vou substituir isso com o componente que eu criei. Então estamos chamando o componente dessa maneira. Mas como você vê aqui, que ainda é indefinido porque diz que o produto cert não é elemento conhecido. Ok? Para isso, vamos usar o módulo de produto ou a biblioteca de produtos. Então aqui a biblioteca de produtos tem um módulo e está segurando componentes. Para permitir que o cabeçalho ou o aplicativo ver esses componentes, precisamos importar o módulo de produtos. Ok, Nós vamos aqui e, em seguida, para a nossa aplicação, como você vê aqui, temos no módulo no nível de aplicação e temos aqui importando os módulos. Mas o problema aqui que temos o módulo do produto é importado e mesmo que não somos capazes de ver o componente de pesquisa do produto. Isto é porque nós não verificamos o algo que é chamado de exportação. Então você precisa exportar o componente no módulo ONG. Então, como fazemos isso? Vamos novamente para o nosso módulo de produtos. Então eu vou procurar por módulo de produtos, que está localizado na biblioteca de produtos. E então, como você vê aqui, temos uma declaração. E dentro da declaração estamos colocando o componente. Mas também, precisamos dizer que este componente é exportável, ele possa ser usado em outros componentes fora deste módulo. Então, quando salvamos tudo e voltamos ao nosso cabeçalho, veremos que, ótimo, a busca do produto é definida. Então, quando vamos para o navegador e verificamos se vemos trabalho de pesquisa de produto. Então lembre-se, sempre quando você está criando um componente arma fora do aplicativo, como por exemplo, na biblioteca de produtos, você precisa exportar este componente, não apenas declará-lo. E para fazer isso quando você está gerando um componente, basta verificar este no console NX. Então você diria apenas para exportar também no módulo, este componente. Ok, então vamos estilizar este componente. Vou para o componente deles e colocar aqui. Em vez de ter trabalho de pesquisa de produto, vamos criar uma div. E esta div terá uma pesquisa de produtos de classe. E então, como um design, temos ícone e perto dele uma caixa de texto. Então primeiro precisamos ter definido o ícone e o ícone como vimos anteriormente, ele será definido como PI. E então eu especificar o ícone PI, que será pesquisado. Ok, nós temos o ícone e agora precisamos ter entrada. E entrada terá um tipo de texto, e, em seguida, com o nome pode ser pesquisa. E a identificação será também uma busca. Vamos ver como vamos usar essa pesquisa mais tarde. Um suporte de lugar para que podemos usar encontrar produtos. E podemos dar-lhe uma classe que pode ser, por exemplo, pesquisa de produtos, como a mesma patente. E então podemos dizer entrada. Assim, dessa forma, podemos acessar essa entrada facilmente em nossos estilos. Então, para isso, vamos estilizar este componente. Vamos chamar tudo de outros. Como se não precisássemos de todos. Nós só precisamos deste componente e nós estamos indo para estilos públicos novamente. Mas não estamos na loja, mas em seus lábios porque criamos o componente na biblioteca. Então, como regra para mim mesmo, eu vou criar os componentes de pesquisa de produto discagem será dentro da biblioteca de produtos. Eu vou criar um novo arquivo e eu vou dizer ponto de pesquisa de produto SCSS. E então eu vou colocar esse copo aqui e salvar. Então, vamos ao nosso aplicativo para ver se tudo está funcionando bem. Ótimo. Temos aqui o ícone e a entrada de texto. Então, primeiro de tudo, precisamos colocar a borda, como vimos no design anteriormente, que temos aqui, como uma área cinza e dentro dela há ícone e, em seguida, a entrada de texto. Então o usuário vai pensar que tudo isso é uma entrada de texto. Então fazer isso é muito simples. É só uma brincadeira com a SESS. Então, em primeiro lugar, eu gosto sempre de usar o flex. Então exiba flex. Deixamos que os itens como o ícone e a entrada fiquem próximos uns dos outros. E eu vou dar-lhe uma cor de fundo, que é dos objetos de valor do Prime NG. E será em breve a fase. E, por exemplo, 200 mais escuros do que o fundo do recipiente. E tem um raio de fronteira como cerca de 10 pixels. E podemos dar-lhe uma largura como inicialmente podemos dizer 275 pixels como um design e podemos dar-lhe uma altura para dizer, por exemplo, 35 pixels. Você pode dar mais. Nós economizamos, verificamos novamente tudo. Vemos que não estamos vendo as mudanças. Por quê? Porque não usamos esse arquivo de estilo. Então, primeiro de tudo, precisamos importar o arquivo de estilo. Então eu tenho que dizer Importar, e então eu vou dizer a pesquisa de produto. Então, nesse caso, os produtos são importados em anti loja como você vê aqui. E então eu vou ser capaz de ver esta dieta como você vê aqui, nós temos a caixa cinza. Então agora precisamos ter um ícone laranja. Então eu vou voltar aqui para a minha pesquisa de produto. Vamos acessar o ícone, como sempre fazemos com PI porque ele tem uma classe chamada PI. E eu vou dar-lhe uma largura que será 25 pixels. E, por exemplo, podemos, tamanho da fonte pode ser um ícone maior, um pouco maior. Então podemos dar-lhe 1.3 AM. E então podemos dar-lhe uma cor, que será a nossa cor primária. Então nós salvamos, nós verificamos que, ok, nós temos o ícone colorido, mas nós precisamos dar alguma margem e estofamento gostaria de estar mais no espaço. Então, podemos dar para margem examinada, top 10 pixel, e margem direita ou esquerda, em seguida, pixel. E nós salvamos. Tentamos de novo. Está localizado naquele lugar. Claro, você sempre pode usar as ferramentas de desenvolvimento para gerenciar ou medir o quanto você tem aqui. Espaços como, por exemplo, você pode usar com ok, o que você gosta. Você pode colocá-lo em seu estilo. Certo, agora vamos estilizar essa entrada. Então esta entrada tem como fundo e borda. Vamos removê-los. Então eu vou dizer aqui como eu o nomeei. Então eu tenho aqui a pesquisa de produto menos entrada. Vou dizer aqui menos entrada. Então eu estou dentro da pesquisa de produtos com SAS. Ele me dá a capacidade com este comercial e, eu posso dar menos entrada e, em seguida, eu vou dar-lhe altura será exatamente a mesma altura que demos para o recipiente. E a cor de fundo será transparente. Como se não tivéssemos uma cor de fundo e cor do próprio texto. Será var, variável, que é superfície e 600, como seria mais escuro um pouco como cor da fonte e borda, por exemplo, podemos removê-lo totalmente. Nós não precisamos de uma fronteira, então eu vou dar a fronteira 0. E então economizamos, experimentamos. E diríamos: “Ótimo, temos aqui tudo. Mas como você vê aqui que quando eu coloco o mouse sobre ele, eu vejo alguma borda. Vamos também remover esta fronteira. Como podemos fazer isso dentro da entrada, posso dizer “comercial e foco”. E também estou por cento ativo para isso. Nesse caso ou nessa situação, quando eu estou focando na entrada, você pode colocar a borda é nenhum ou 0 e contorno é nenhum. Então, nesse caso, garantimos que não temos nada quando nos concentramos, como você vê aqui. Agora temos estilo totalmente. Temos todo o componente é criado. O que vamos fazer no futuro para que, quando eu colocar um texto aqui, encontre uma lista de produtos sugeridos onde se encontra na base de dados. Mas agora vamos empurrá-lo de cima um pouco. Então, se você se lembrar, nós temos no cabeçalho, então quando eu vou para o NG, mostrar-se para o cabeçalho, nós demos uma classe que é chamado de pesquisa. Então eu vou para o arquivo CSS e dizer que este cabeçalho terá no topo você se lembra que temos ferramentas e temos também pesquisa. E terá tampo acolchoado. Podemos dizer 25 pixels, por exemplo. Então, nesse caso, precisamos alinhar também tudo. Então podemos ter aqui também, esta navegação pode ter mais, mais espaço no topo. Então, podemos, em seguida, a navegação dar-lhe topo de preenchimento também. E podemos medi-lo como 25 pixels para que ele possa ser alinhado. E também, precisamos dar às ferramentas mais espaço no topo, para que também possamos dar assim. Então, para a navegação, precisamos de 23 pixels, cerca de 23 pixels, e as ferramentas que precisamos de cerca de 38 pixels. Então, para as ferramentas, precisamos de 38 pixels. E o topo do preenchimento de navegação será de 25 pixels. Então salvamos tudo. Nós salvamos todo o estilo. Vemos que temos o cabeçalho está pronto. 141. Componentes de banner: Ok, então agora nós terminamos o cabeçalho, o cabeçalho que contém o logotipo e alguma barra de pesquisa. E também, temos alguns ícones e o menu. Agora estamos nos movendo para a página inicial. Vamos voltar ao nosso projeto. Como você se lembra, em nosso design temos um banner e, em seguida, uma lista de categorias e, em seguida, temos uma lista de produtos em destaque. Então vamos criar componente por componente. Então, na minha opinião, eu vou fazer um componente para a página inicial. Então, em nosso código, criamos anteriormente uma página inicial no aplicativo e você compra. Nós nos mudamos para cá e dissemos homepage. E nós dissemos, em seguida, componente homepage irá conter algo a e B. Isto quando eu estava ensinando sobre a grade. Então, para mim, imagino que a página inicial contenha o seguinte. Primeiro, algo como o chamado banner UI. E isso será um componente. E então talvez eu tenha categorias lista ou categorias Banner também. Podemos chamá-lo de categorias Banner, sem problema. E também temos destaque produto. Assim, desta forma, teremos três componentes um sob o outro e eles aparecerão na minha página inicial. Mas onde está a localização desses componentes? Então, em primeiro lugar, banner UI, Eu acho que ele pode ser na biblioteca UI, que nós criamos anteriormente nos lábios. E temos pedidos, produtos, UI e usuários. Temos a interface do usuário. Então eu acho que aqui vamos criar o componente do banner da interface do usuário. Para fazer isso, quero mostrar primeiro como excluir uma biblioteca. Por exemplo, se eu quiser excluir esta biblioteca porque ela foi gerada de alguma forma errada com a gente. Eu cometi este erro de propósito quando estamos criando esta biblioteca na linha de comando, se você se lembra. Então eu quero excluir agora esta biblioteca. Como podemos excluir uma biblioteca. Primeiro de tudo, você só vai aqui e diz que eu quero excluir essa pasta totalmente. Mas isso não é suficiente. Você também deseja removê-lo do JSON index.js, que está localizado na raiz do projeto. Então você também precisa remover a interface do usuário aqui também. Você precisa removê-lo da base de configuração ts, se você se lembrar, estávamos definindo o caminho está aqui, então você precisa remover isso também. Não se esqueça de remover a biblioteca também do Angular JSON porque em Angular Jason, estou definindo meus projetos. Se você se lembrar, nós definimos a interface do usuário, ele jogos como gerado aqui automaticamente. Então precisamos remover essa parte também. Então, de quatro lugares. Primeiro o NX config e, em seguida, JSON angular e, em seguida, a pasta que está contendo a biblioteca. E então você pode gerar uma nova biblioteca facilmente usando um console ECS. Então vamos salvar tudo agora. Veja se o nosso projeto ainda está funcionando bem. Certo, o projeto ainda está funcionando bem. Não temos nenhum problema aqui. E agora vamos criar uma nova biblioteca. Então vamos fechar todas essas guias. Não precisamos mais deles. Só precisamos criar um gerador. E então podemos dizer biblioteca, que é aqui. E então podemos definir o nome da biblioteca. Vou dizer UI, a biblioteca chamada UI. Vou localizar meus componentes de interface do usuário, como uma galeria, banners, etc. E então você apenas pressiona na corrida essas opções. Você pode dar uma olhada neles. Falamos principalmente sobre eles nas primeiras palestras quando estávamos criando a biblioteca. Então primeiro clicamos em executar. E então veremos que a biblioteca foi gerada novamente. Vamos aqui para os lábios. E então vamos ver, ok, ótimo, nós temos a biblioteca novamente aqui definida e tudo está bem. Agora vamos gerar um componente que será o componente da interface do usuário, o banner da interface do usuário. Se você se lembra, eu disse que vou colocá-lo na biblioteca de IU. Então, abrimos novamente o mesmo tipo de gerar. Então precisamos fechar isso porque estávamos gerando uma biblioteca. Temos que gerar uma coisa nova que é chamada componente. Então, então eu vou aqui, clique em Gerar componente, e este componente terá um nome. Primeiro, vamos colocá-lo dentro da pasta para ser mais organizado dentro da biblioteca. Então eu me lembro desta pasta componentes como sempre. E então eu vou dar-lhe o nome, que é Banner. E, em seguida, o projeto aparecerá com é UI. E então faremos o resto das coisas que fizemos anteriormente. Então, o mais importante é a exportação. Lembre-se, falamos sobre isso anteriormente, para que possamos usá-lo em outros lugares. E então não temos mais nada em um estilo de vida. Um lector que é muito importante, temos que chamá-lo de banner UI. E então temos que dizer pule isso se você não estiver interessado em criar testes unitários agora. Então, vamos clicar em Executar e, em seguida, chamar para nossos arquivos e verificar se o componente foi gerado. Vamos verificar. Ok, nós vamos CUI fonte componentes lábios e nós temos o componente banner e ele tem seu arquivo ts com o eleitor direito. disso, ele já foi importado no módulo e também exportado. Então eu só preciso fazer uma coisa, pelo menos. Então aqui no módulo, eu preciso usar esse componente. Então, em sua página inicial, como você vê, ainda está me dando erro que você, I banner não é elemento ou elemento conhecido. Então, o que temos que fazer é apenas ir para o módulo de aplicativo novamente, e então vamos importar o módulo de interface do usuário. Então eu vou para a importação e dizer módulo UI. Então, se você às vezes, ele não sabe que ele foi criado, especialmente quando você criou esta biblioteca recentemente. Então você tem que dizer módulo UI digitá-lo assim. E então você clica em Control Space ou control dot no Mac para ver se seus automóveis completam isso ou não. Então vemos que não é auto completando. Vamos e importamos manualmente. Então eu vou aqui e digo “Importar”. E então você ICT módulo de, e então eu vou dizer adicionar bits azuis, UI, o nome da organização e, em seguida, a interface do usuário. Porque se você se lembrar, a configuração ts já definido para mim um banho, que está se referindo à biblioteca UI. Então, e então salvamos, e vemos que banner da interface do usuário não tem mais o erro. Vamos comentar esses. Então nós comentamos essa parte e salvamos, e então vamos para o aplicativo. Veremos muito bem que o banner funciona. Então agora vamos estilizá-lo. Ok para estilizar a maneira, eu gostaria de dar uma olhada no design. Então, em primeiro lugar, vamos para o design. Veremos que dividimos, por exemplo, esse banner para duas colunas como eu posso imaginar. Então, se você continuar, você também pode habilitar a grade de layout para que você possa ver como o layout está acontecendo aqui. Então, primeiro de tudo, eu gostaria de ter, por exemplo, cinco colunas aqui e, em seguida, Deslocar uma coluna. Então eu tenho um 1, 2, 3, 4, 5 para este título e o botão, e outra coluna para a imagem, que será seis colunas. Então, primeiro de tudo, precisamos criar uma div que conterá o banner e damos-lhe esta cor do fundo. E também, vamos fazer uma grade que está dentro dela, essas duas colunas. Então eu vou aqui e eu vou dar div, e eu vou chamar este banner div em geral. E então eu vou criar uma div e dar-lhe como grade de pico. E, em seguida, dentro deste pico de leitura, eu vou ter duas colunas. A primeira será chamada P, e depois cinco, como vimos no projeto. E o segundo terá apenas seis. Aqui teremos seis, mas este terá b offset e depois um. Então podemos empurrar esse conteúdo uma coluna para a direita. Assim como vemos dentro do design que temos duas partes, como dois textos, os melhores produtos em cada categoria. Por isso, precisamos de duas mensagens. Então eu colocaria, por exemplo, os primeiros textos em H1, e eu vou dizer os melhores produtos. E também outra vantagem, por exemplo, será H2 e estaria em todas as categorias. Então aqui temos duas mensagens e então teremos um botão. Então o botão, podemos pegá-lo da energia Prime. Como você sabe que temos uma biblioteca de botões, mas como podemos usar este botão. Então vamos para aqui e ir para a sua biblioteca principal NG. Não podemos verificar. Então nós podemos ter aqui, nós temos os ícones. Vamos para os botões. Então aqui temos os botões. Eu quero um botão que irá conter texto e, em seguida, ícone. Portanto, precisamos usar aquele que está nas fontes. Acho que precisamos usar este porque tem a composição dos olhos está à direita. Podemos copiar esta parte. E depois vamos ao nosso código e colocamos este botão aqui. Mas como você vê, temos um problema que o botão não está definido porque precisamos importar o módulo de botão, mas fazer cada módulo temos que importá-lo para você ou para o nível de aplicação, eu diria para a interface do usuário porque na interface do usuário tem esses componentes. E esses componentes não vêem nenhum outro componente que esteja fora deste módulo ou fora desta biblioteca. Então precisamos importar o módulo de botão novamente aqui. Então eu vou aqui e digo “Importar”. Botão, módulo de e, em seguida, eu vou dizer prime end g barra botão. Então, como você vê , já está definido aqui. E então nós colocamos na importação do módulo e veremos que nosso botão foi definido. Assim, o rótulo deste botão será ver mais. E o ícone será, como vimos, temos filhos, certo? E depois salvamos. Verificamos se temos tudo está funcionando bem, temos tudo funcionando bem, mas o botão não mostrando porque o módulo não está salvo. Vamos novamente para a nossa aplicação. Novamente, não aparecendo. Você pode salvar seu componente novamente. Ok, está mostrando. Então, às vezes, você precisa salvar várias vezes para fazer as coisas funcionarem ou aparecerem em seu front-end. Então agora precisamos estilizar isso. Em primeiro lugar, precisamos criar um arquivo de estilo para o banner. Então, se vocês se lembram, temos estilos públicos e criamos saltos. E dentro deste loops temos pasta para cada biblioteca. Então eu vou criar uma biblioteca de interface do usuário ou você eu pasta. E dentro desta pasta de interface do usuário, teremos esse ponto de banner SCSS. E então vamos estilizá-lo aqui. Então, primeiro de tudo, eu vou rapidamente para estilizá-lo. Então temos esconder que será como um design para um pixel 180. E também temos uma largura, será 100%. E uma cor de fundo, que será assim, como uma cor ligeiramente azul. Então, como vemos aqui no design, temos um slide, uma cor azul. Então, se eu for aqui e então podemos esconder o layout, vamos ver este azul claro. Você pode copiar a cor que é a mesma que aqui. Você pode copiá-lo, ou você pode usar algo da superfície. A ordem definida, as cores definidas que estão no motor principal, mas eu seguiria o designer exatamente. Então aqui eu vou ter como esta cor de fundo banner. E então precisamos de um raio de fronteira porque tem algumas bordas curvas. Então precisamos ter o raio da borda e seria 15 pixels. Vamos verificar se estamos no caminho certo. Agora não vemos nada do estilo porque não estamos importando banner SCSS para o nosso aplicativo. Então precisamos importar Banner CSS para a nossa aplicação. Mas como fazemos sempre, colocamos um arquivo que está importando tudo, todos os componentes, e então importamos este arquivo em nosso aplicativo. Então, neste caso, vamos economizar menos linhas. Então eu estou indo aqui para criar outro arquivo. Vou chamá-lo de BWI dot SCSS. E dentro deste UI SCSS, eu terei importação para ser assim. E então essa importação importará para mim esse banner ou CSS. E na minha loja eu estou indo aqui e eu vou dizer importação para mim toda a biblioteca, que está contendo como este salto. E, em seguida, temos a interface do usuário e, em seguida, seu banner ou desculpe, o scss UI. Então, neste caso, eu importei VOCÊ É CSS que continha o banner. Então vamos salvar tudo. Vá novamente para a nossa aplicação. Ok, nós temos essa cor, nós temos tudo bem. Então vamos empurrar um pouco o banner do topo. Então, podemos fazer qualquer margem inferior do cabeçalho ou margem superior do banner, eu diria, por exemplo, margem superior do cabeçalho. Você também pode colocar margem superior ou superior do banner. Então vamos aqui e onde estão nossos estilos de cabeçalho? Temos aplicativos. E, em seguida, afiada cabeçalho compartilhado. Vou dar-lhe, por exemplo, botão de margem para o cabeçalho, empurrar tudo sob o cabeçalho, cerca de 25 pixels, digamos que tudo o que você pode medi-lo com um design. Então nós temos isso assim agora. E agora vamos fazer um pouco de estilo. Primeiro de tudo, vamos estilizar esses títulos. Vou repassar a bandeira deles outra vez. E então eu vou dizer, Talvez eu possa dar uma aula para todos esses grupos para que eu possa dar como um texto. Cancelamos um banner de mensagens. Então eu vou aqui e definir aqui algo como banner. E, em seguida, texto. E todos esses textos podem ser estilizados. Então, antes de tudo, terá uma cor. Já tenho essa cor, que será variável, fase do traje. E depois 700. E, em seguida, margem superior. Podemos dar-lhe como empurrar o texto do topo cerca de 50 pixels. E então começamos a estilizar os títulos para que o título primeiro, H1, ele terá como por exemplo, margem superior 0 ou margem em geral 0 para não ter esses espaços ao redor, podemos inicializá-lo. E, em seguida, o tamanho formado será três AM e um peso de fonte. Podemos dar um pouco de peso pesado, algo como 400. E também H2. E então nós também podemos dar-lhe uma margem 0. E, em seguida, também podemos dar um tamanho de fonte e peso da fonte. Então, podemos dizer aqui o tamanho da fonte será 20 AM e o peso da fonte 300. Eu sou rápido no estilo porque nosso curso não é sobre estilo, é sobre mostrar a estrutura angular e como vamos estruturar nossa aplicação. Então é por isso que eu sou tão rápido em explicar o CSS. Então vamos guardar cheque. Ok, estamos muito perto do nosso projeto. Agora temos o botão aqui. Precisamos apertar o código deles ou apertar o botão um pouco. Você pode fazer isso através do estilo. Se você se lembra, damos estilo, não classe diretamente, mas classe de estilo. E então você pode usar as margens e preenchimentos predefinidos, que estão no NG principal. Então eu diria margem superior, e então eu vou dar-lhe, por exemplo, três ou quatro. Então podemos colocar isso e veremos que ele é empurrado automaticamente. Ok, legal. Precisamos também agora de um lugar para a nossa imagem. Eu tenho, por exemplo, a imagem já definida. Já o tenho na minha pasta de ativos. Chama-se imagem de banner. Então é SVG. Você pode coletar qualquer imagem desejada e colocá-la na pasta de ativos do nível do aplicativo. Então temos aqui os ativos do aplicativo, e então colocamos imagens como vimos anteriormente com o logotipo. E, em seguida, dentro desta coluna, eu vou dizer imagem. E a fonte da imagem será a pasta Ativos e depois de ativos, imagens. E depois de imagens, banner, imagem, ponto SVG. Então nós também podemos importar SVG, ok, nós temos nossa imagem aqui. Precisamos empurrá-lo um pouco para a esquerda ou para a direita. Mas quero mostrar-vos algo que é animação. Eu estou usando alguma biblioteca que é chamado Qualquer feito SCSS animate ou CSS animate. Vou mostrar-lhe como podemos, por exemplo, quando o usuário abrir esta página ou este site, isso virá como da esquerda para a direita para como deslizar. Este carrinho está deslizando da esquerda para a direita. Vou mostrar-lhe isso na próxima palestra. 142. Banner de animar: Antes de começarmos com a palestra sobre animação da maneira que quero mencionar sobre o problema da fonte. Então nós já falamos anteriormente no início do curso sobre fontes, as fontes que temos instalado anteriormente, mas eles não têm efeito somente quando você configurar algo na classe NG primed, que é chamado componente pico. Portanto, apenas certifique-se de que você configurou isso e certifique-se de que em sua chamada de suas bibliotecas e outros componentes, que você colocar a configuração após chamadas Prime NG. Então, depois disso, temos esse arquivo de configuração. O arquivo de configuração é chamado aqui e tem um componente de pico para a fonte. Agora vamos ver como podemos animar o banner. O estandarte. Acho que o melhor caso aqui é que podemos deslizar esta imagem da direita ou da esquerda para a direita. Para isso, eu estou usando uma biblioteca que é chamada CSS animate. Se você acessar seu site, que é chamado Animate dot style, então você vai encontrar esta biblioteca. Esta biblioteca é muito grande para animação. Ele tem um monte de animações como você pode usar para suas divs, para suas imagens, por exemplo, textos. Você pode fazer o que quiser, css e muito leve e muito leve para o navegador sem usar JavaScript e isso coisas complicadas. Então eles são animação CSS é muito leve e também amigável navegador. Então o que precisamos realmente aqui que queremos deslizar a imagem da esquerda para a direita. Então podemos usar essa animação. Mas primeiro vamos ver como podemos instalar esta biblioteca. Primeiro de tudo, precisamos executar este comando npm instalar qualquer main.css menos salvar. Então eu vou abrir um novo terminal e então eu vou instalar esta biblioteca. Assim, a instalação desta biblioteca pode levar algum tempo. Eu vou pular isso. Então aqui eu tenho a biblioteca foi instalada, adicionou um pacote, como você vê aqui. Agora vamos adicioná-lo ao nosso estilo. Então, se você se lembra, nós estávamos usando aqui na loja ND, SCSS, não em administração em nenhuma loja. Isto é especializado para a sua loja que estamos adicionando bibliotecas aqui. Então, queremos adicionar o CSS animado aqui. Então, como podemos fazer isso? Primeiro de tudo, Eu disse-lhe com este sinal, você pode chegar a todas as bibliotecas que estão no módulo npm ou na pasta módulos nó. Aqui temos a pasta módulos nó. O que queremos, na verdade, temos instalado já é animar CSS. Então NMAC como S está localizado aqui e queremos incluir o arquivo animate dot CSS. Então é isso. Então, primeiro de tudo, eu vou fazer importação. E então usarei este sinal. E então eu diria qualquer CSS ponto feito e, em seguida, barra porque se você ver que o nome da pasta tem CSS animado. E então vamos entrar no vidro ou o arquivo que é chamado novamente animar o CSS. Então, neste caso, nós importamos a biblioteca. Então agora é importante para a nossa aplicação. Vamos usar uma dessas animações, então como podemos usá-la. Então, primeiro de tudo, você precisa dizer que eu estou dizendo que este H1 ou este div ou esta imagem é animado. Como podemos fazer isso dizendo que qualquer companheiro animado. Então podemos copiar esta aula. E depois vamos para a nossa bandeira. Então nós criamos o banner na biblioteca, que é chamado biblioteca UI, e então temos o banner aqui. Então o que eu quero animar na verdade não é apenas a imagem, podemos animar toda a div. Então eu posso colocar aqui no recipiente div da imagem. Então esse recipiente desta imagem aqui, eu posso colocá-lo dentro de uma div e então podemos animá-lo. Então temos qualquer feito animado. Então agora é, estamos dizendo que essa coisa é animada, mas qual é a animação? Assim, a animação será deslizar para a esquerda. Então aqui podemos copiá-lo. Você tem o botão aqui para copiá-lo. E então nós vamos aqui novamente para a nossa classe e nós colocamos espaço que nós temos outra classe, que é chamado lodo na esquerda. Então, economizamos, vamos para o nosso aplicativo e atualizamos. E vamos ver isso deslizando dessa maneira. É uma ótima maneira de fazer isso. Então o que eu vou fazer agora apenas para colocar esta imagem no final aqui, como algo como o design, porque o design está mostrando que isso está indo principalmente para a direita. Então vamos fazer isso. Então primeiro podemos dar o recipiente div da imagem, algo como imagem banner. Então temos aqui essa imagem de banner. Então, depois disso, temos o texto do banner e agora a imagem do banner. Então, vamos para o estilo do banner. Então nós já temos nos estilos, lábios de estilo público. E então eu vou aqui para o banner, e então eu vou escolher aqui, não texto, mas eu vou abrir uma nova tag, que será imagem. Então aqui será imagem. E esta imagem podemos dar-lhe, por exemplo, alinhamento de texto centro, como as coisas dentro desta imagem serão centradas. Vamos voltar para o navegador. Veremos que ainda está lá porque eu não salvei esta parte aqui. Então, se voltarmos novamente, veremos que é mais para a direita, então está centrado. Mas quando você coloca, por exemplo, a imagem em si, texto alinhar mais para a direita, em seguida, ele será empurrado totalmente para a direita como você vê aqui. Mas precisamos aqui novamente algum preenchimento para que possamos dar a esta imagem como se tivéssemos que empurrá-la um pouco do topo e da direita. Então, podemos dar ao próprio recipiente algum preenchimento. Então não podemos dizer que o preenchimento será desse topo cerca de 15 pixels. E então, da direita, será como novamente 15 pixel. E de baixo será 0, e da esquerda será 0. Então, depois disso, veremos que temos exatamente o que queremos. Então nós temos aqui a animação, e nós verificamos isso no console. Então talvez precisemos de mais estofos como a partir da esquerda para que possamos dar mais empurrando para a esquerda, algo como 50 pixels. Acho que não fui suficiente com isso. Então eu tenho que colocar aqui 50 pixels. Então salvamos. Vamos de novo. Vemos que a animação está indo muito bem. Claro, se você não usar ensacamento, você pode apenas dizer estofamento top. E então você pode, por exemplo, colocar todos esses valores em 0. E então você pode apenas dizer centro de alinhamento de texto. Então, será no centro da div, que especificamos ano. Prefiro sempre no centro. Então é assim que estamos animando as coisas com CSS. Usando esta grande biblioteca que é chamado CSS animar. Claro que você pode usar também a animação de CSS ou animar angular. Mas eu prefiro sempre usar coisas simples que podem afetar o desempenho do meu aplicativo. Então eu estou usando principalmente mais CSS e HTML amigável sem usar algumas bibliotecas extras complicadas ou bibliotecas JavaScript. 143. Como mudar o estilo de botão de PrimeNG: Nesta palestra, vou mostrar-lhe como substituir o botão do Prime NG para um estilo específico que você deseja. Se você se lembra, nós importamos o botão da energia Prime e ele veio como um estilo padrão, que é azul. Mas nós queríamos como no design, como nós temos isso aqui. Então podemos fazer isso facilmente, substituindo o estilo do NG principal. Então vamos fazer isso agora. Então, primeiro de tudo, eu vou voltar para o componente banner que eu criei anteriormente. E, em seguida, na classe de estilo, eu posso adicionar uma nova classe. Podemos dar-lhe botão ou banner botão. E aqui o botão do banner terá um estilo em Banner, CSS. Então vamos aqui e criar outra tag, que será novamente prefixado com banner e, em seguida, botão. Então, se você quiser substituir este botão, temos especificado classe para ele. Então vamos dar, por exemplo, algumas propriedades. Então o que eu quero primeiro é que um fundo seja branco. Então eu vou colocar cor de fundo será var, e, em seguida, terno fase 0. E então podemos ter um fundo branco, e então essa cor será uma cor primária, que eu defini anteriormente para nossa aplicação. E já falámos sobre isso antes. E também fronteira ou vamos tentar agora sem estilo mais para ver se estamos indo para progredir. Bem, ok, como você vê aqui, nós temos agora a fronteira ainda é azul. E em Hoover ainda temos o azul. Então vamos primeiro, remover a fronteira. Eu vou remover a borda como fronteira 0. Agora salvamos. Ok, vamos agora remover o pairar. Então, como podemos fazer isso? Primeiro? Se você quiser passar o mouse ou remover o cursor do mouse, É muito simples. Como você vê aqui no CSS, o pairar será em seu caminho como eu estou dentro da classe botão. E depois digo isto e mais. Tão comercial e pairar. Então significa como o botão. E então eu tenho esse atributo que é chamado de hover, e então eu posso remover o fundo também. Então eu também posso fazer as mesmas propriedades aqui. Então, podemos salvar e notaremos que não terá nenhum efeito. Então extremidade privilegiada, É estilizar alguns botões de maneira diferente. Então, se você quiser substituir alguns estilos do Prime NG, não apenas botão, a única maneira de fazê-lo direito, é inspecionar. Então você pode abrir as ferramentas de desenvolvimento. Você pode clicar com o botão direito do mouse no botão e depois inspecionar. E então você verá o, por exemplo, o estilo aqui. Então eu não quero o estilo da extensão do texto dentro dele. Eu quero o botão em si. E não só o botão, Eu quero o botão B, como este azulejo, como eu, onde aqui o estilo do botão banner. Então, como você vê aqui, nós temos toda a informação vindo aqui. Mas ainda temos um problema que não vemos nossas aulas que especificamos. Eles estão no botão e aqui estão nossas propriedades. Como você vê, esse botão banner, a classe que definimos está aqui e também no botão em si. Então o Prime ND está fazendo tudo para você é através da classe de estilo. Então o que eu vou fazer agora para verificar toda a razão pela qual não está funcionando. Então, para habilitar o estilo do mouse, você pode clicar sobre este botão de alternância. E então você pode selecionar o que a atividade pode fazer como em vez de você, como se você não tivesse que fazer a atividade do mouse sozinho. Você pode apenas dizer, eu quero acabar. Agora está no estado de Harvard, o botão. Então, como você vê que nós não temos sobre diretamente, ele tem ativado e, em seguida, passar o mouse. Então precisamos fazer o mesmo porque olha, está substituindo nossas mudanças porque isso é mais importante do que nossas mudanças. Então, nesse caso, devo fazer exatamente da mesma forma que estou fazendo aqui. Então, podemos levar isso habilitar Hover e, em seguida, vamos novamente para o nosso código. Então eu vou aqui e dizer, não só pairar, mas habilitar também, habilitado. E então veremos que temos aqui as mudanças acontecendo principalmente. Então vamos tentar ou reiniciar a página. E nós vamos aqui. E veremos que ele normalmente tem o efeito de pairar. Então não temos mais esse problema. Então, dessa forma, você pode substituir não apenas o botão, mas tudo no NG principal. Às vezes você precisa disso. Você precisa substituir algum estilo de componente como acordeão ou alguns livros didáticos ou, por exemplo, algum botão de alternância. Então você precisa fazer isso para cada parte do Prime NG com base em seu design. Então é a maneira mais fácil de substituir. E este é o objetivo de ter os estilos públicos. Porque sem ter estilos públicos, você não verá as alterações em seu componente. Porque se eu tiver este mostrador no componente, em seguida, a extremidade principal onde renderizar bem com base no componente. Nesse caso, eu não serei capaz de acessar o estilo do, por exemplo, este botão apenas com algo chamado host e, por exemplo, host deep. E isso é usado em Angular para acessar dentro de alguns componentes ou componentes filho que são definidos dentro do componente principal ou pai. Então, nesse caso, garantimos na maneira com estilos públicos que tudo é público e aberto para nós. Podemos simplesmente passar e, em seguida, estilo como quisermos baseado no que inspecionamos aqui. É por isso que uso sempre os estilos públicos. Não estou usando os estilos dos componentes. Claro que depende de você. Você pode usar também, o estilo dos componentes. Então vamos verificar o projeto novamente, vamos ver que temos aqui como mais raio de fronteira. Então podemos dizer como se fosse 13. Então vamos colocar o mesmo raio de borda que um projeto. Então vamos voltar ao nosso código. E então vamos dizer aqui que o botão tem raio de borda será 13 pixels. Vamos salvar, verifique novamente em nosso navegador. E vamos ver que temos isso dessa maneira também. Percebemos que o botão tem mais altura. Então você também pode dar-lhe uma altura que você quer como aqui, ele tem 48 ou talvez vamos fazê-lo, por exemplo, 50 para ter como algum número constante. Então aqui vamos nós novamente e dizemos, ok, a altura do botão será 50. Então ele veio aqui, Pixel, 50 pixels. Então, novamente, vamos para o navegador, verificamos que, ok, temos o botão com 50 pixels. Então esta é uma maneira como implementamos as coisas e como nós substituímos isso morre do Prime NG. 144. Categorias: Ok, de volta ao nosso design, vamos fazer agora o componente categorias ou categorias banner. Portanto, essas categorias terão um título e a lista de categorias. E cada item de categoria terá o ícone que especificamos no back-end e o nome da categoria. E quando eu clico em uma categoria, eu iria para a página de lista de produtos e eu vou mostrar os produtos que estão sob essa categoria. Então vamos fazer isso rapidamente e vamos implementá-lo da mesma forma como implementamos esse banner. Então, primeiro de tudo, eu preciso ir aqui. Agora podemos fechar tudo. Então não precisamos fazer mais nada aqui. Então nós estamos indo apenas para criar um novo componente que é chamado de categorias de massa. E onde isso poderia ser bom é banner será criado. Eu sugiro para mim agora eu posso criá-lo na biblioteca de produtos. Então temos produtos de lábios, e aqui podemos definir componentes que fizemos com a pesquisa de produtos. Podemos adicionar também o banner categorias. Então nós podemos ir aqui e gerar, e então nós damos um novo componente. E este esquema componente. E eu vou dar-lhe aqui componentes. E não seria o objetivo planar. E então o nome do projeto será os produtos. E então eu estou indo aqui na lista como fazemos sempre, eu dou exportação porque eu vou usá-lo na página inicial e no caminho e de metas. Precisamos dar um seletor, o seletor, como dissemos, definimos isso, que damos ao produto o nome da biblioteca como regra. E então definimos o que queremos. Então, podemos dizer produtos, categorias, banner. E aqui temos esse seletor. Ignorar textos e precisamos especificar não há necessidade de styling para que possamos colocar em estilo de linha. Então, nesse caso, teremos o banner categorias gerado dessa forma. Então, vamos clicar em Executar. E depois voltamos aos nossos arquivos. Vamos ver que temos categorias banner. Então, como cada categoria ou como cada componente que precisamos div e podemos dar este banner categorias de qualidade div. E este banner categorias irá conter um título, como vimos no design. Seria chamado aqui categorias. Então eu dou H3, você pode dar qualquer idade que você quiser para mim, eu dou o H3 porque é o terceiro nível da página. Então aqui temos agora categorias e, em seguida, definimos, concordou, então grade p, porque se você se lembrar no design que essas categorias estão sob métrica, concordou. Então, em cada grade terá duas colunas porque temos seis categorias lá em tudo. Então nós damos este div e depois ligamos e dois. Então, nesse caso, teremos as categorias localizadas aqui. Então, o que queremos primeiro precisamos de uma div que irá conter a categoria em si ou item de categoria. E, em seguida, dentro deste item de categoria, teremos um plano de fundo e, em seguida, o ícone e o nome. Então eu vou dar aqui div. E então eu diria, por exemplo aqui div, um ícone de categoria ou será, sim, ok, Eles são ícone de categoria porque eu preciso aqui o ícone primeiro. Então temos aqui ícone categoria e outra div onde eu vou colocar o nome da categoria para que possamos dizer categoria de ponto div, nome do traço. E aqui vamos colocar um ícone. O ícone que lemos usando era do prime e g, Se você se lembrar, estávamos usando a tag que é chamado I e, em seguida, ícone P, e então eu dou o ícone que eu quero, por exemplo, verificação PI. Então aqui temos o ícone e o nome será, por exemplo, o nome da categoria será, por exemplo, jardim. Então vamos substituir mais tarde todo este componente ou este texto sólido ou texto codificado com a categoria que está vindo do back-end. Então agora estamos estruturados nossa página. Vamos voltar para a página inicial. Então nós temos tudo está funcionando bem, mas nós não temos esse banner porque nós não chamá-lo na página inicial. Então, primeiro de tudo, eu preciso ir para o aplicativo e você compra, como você se lembra, nós temos as páginas e aqui a página inicial. E o segundo componente em que estamos trabalhando é que categorias componente ou categorias banner. Então aqui nós chamamos isso de produtos. Ok, eu acho ou é banner e também temos que fechá-lo bem, então nós não temos nenhum problema aqui. Então, neste caso, eu vou ter como o banner categorias será chamado da biblioteca de produtos. Então, se você se lembra, já importamos o módulo de produtos. Assim, o módulo de produtos, dentro do módulo de produto, Eu já tenho o banner categorias, que no console ECS fez na exportação e colocar este componente, que no produto de bibliotecas ou a biblioteca de produtos. Então aqui temos tudo. Vamos tentar isso. Veremos, ótimo. Temos categorias. E o ícone e o jardim. Então o que precisamos, na verdade precisamos primeiro para estilizar este banner. Então, vamos também para os nossos estilos públicos. Temos lábios. Se, se você se lembra, nós definimos a mesma estrutura. Então eu vou criar um novo arquivo dentro da biblioteca Produtos e dar-lhe como banner categorias. E este banner categorias terá, será um CSS. E então vamos estilizá-lo aqui. Mas primeiro precisamos importá-lo também em nossos produtos, que é importado em nosso estilo de aplicação. Então nós temos aqui também, nós não temos os produtos, temos categorias, banner. Então, nesse caso, eu posso ver os estilos no meu aplicativo. Então, como vemos no design, temos um pouco de espaço aqui. Então, ou você pode dar banner ou, por exemplo, aqui, margem inferior, ou aqui você dá margem superior para mim, Eu vou dar margem superior para as categorias. Então talvez possamos ir aqui duas categorias, Banner e primeiro de tudo, precisamos chamar essa classe. Então temos aqui a classe de categorias, banner em categorias mamífero fina, arquivo CSS. Então eu vou dar aqui Ferraris como margem, mas droga ou sim, droga, não podemos dizer 75 pixels. E também vamos estilizar o H3, que está dentro. Então, podemos dar-lhe, por exemplo, botão de margem. Então, podemos empurrar o ícone de categoria abaixo dele, cerca de 20 pixels. Então, podemos salvar isso para verificar se estamos realmente importando desta vez. Ok, nós vemos que nós temos, o estilo é importado. Está bem, Legal. E nós vamos colorir isso da mesma forma que a cor que é definida aqui. Não é totalmente preto, mas é como cinza claro. Então podemos usar os cinzentos que estão na superfície e definidos no, na energia primária. Então, como você vê aqui, nós temos um monte de variáveis para cores, então nós podemos ficar nelas. Então podemos tomar, por exemplo, este mais escuro. Então podemos pegar este slide. Podemos tomar, por exemplo, pesquisas 500, por exemplo. Então vamos aqui, damos uma cor a este H1 ou H2, H3. E dizemos longe, então fase 500. Então agora nós especificamos a cor do título. Vamos de novo e veremos que tem essa cor. Talvez você possa usar mais escuro, então você apenas aumentar o número que é especificado aqui. Por isso, vou dar-lhe, por exemplo, 700. Então vamos aqui, damos 700. Ou com base no design, você pode definir suas próprias cores, nossas próprias variáveis. E então você pode usá-los em seu aplicativo com base no design que é fornecido pelo designer. Então aqui temos estilo, o H3, o que precisamos também para estilizar essa categoria em si. Então, dentro de categorias banner, nós definimos uma div que é chamado categoria ou categoria item. Podemos chamar-lhe o quê, estou a chamar-lhe aqui, categoria. E dentro dessa categoria eu vou ter alguns valores semelhantes. Como por exemplo, temos altura mínima para ele, como se tivesse alguma altura, podemos dar-lhe 100 pixels. Eu estou copiando essas informações ou eu conheço esta informação do projeto, para que possamos copiar também. O raio da borda dois será de cinco pixels. E então temos alinhar texto. Damos a ele um centro. Então, tudo dentro dele estaria no centro. E isso será exibido como um flex. Eu vou te dizer por que, Porque nós também queremos justificar o seu conteúdo para estar no centro. Então, primeiro, podemos dar assim. Eu só quero dar uma cor de fundo, cor de fundo aleatória, apenas para ver como minhas mudanças estão indo, porque tudo é transparente agora. Então, também podemos ser, por exemplo, aleatoriamente essa cor. Claro, vamos substituí-lo por suas categorias de cor, que definimos também no back-end. Então temos este jardim aqui, temos esta bandeira. Por isso, quero justificar o seu conteúdo. Então, se você se lembra, nós definimos isso como fluxo. Então você não pode dizer simplesmente justificar o conteúdo e, em seguida, você vai dizer centro e, em seguida, alinhar itens. Você pode dar-lhe, por exemplo, também centro. Então, será exatamente no centro desta div. Então, duas coisas, justificar o conteúdo e alinhar itens. Então vamos dar aqui. Assim, à medida que vemos justificar o conteúdo, dizemos centralizar e alinhar itens. Será também, Center. Então, tudo será centrado dentro dele. Mas como você vê, eles estão próximos uns dos outros, como o ícone e também o nome, eles estão próximos uns dos outros porque dissemos flex exibição. Então, para colocá-los sob o outro há bom eu acho que em flex você pode dizer direção flex. Não será em, eles são todos como não uma horizontal, mas será coluna e também coluna reversa. Você tem várias opções aqui. Você pode alternar entre todas essas coisas. Como vê, fazer coisas é muito importante aprender. Como você vê, você não pode fazer as coisas somente quando você está aprendendo algo prático. Então é por isso que estou fazendo esses tipos de cursos. Cursos que estão vindo com experiência prática. Não só estou levando algum documento e então tudo bem, você pode aplicá-lo. Não, você vê na sua frente. Você vê como nós realmente precisamos, por exemplo, de direção flexível. Talvez tenha visto direção flexível. Ok. Você não sabe o que é? Você nunca experimentou por que estamos usando, mas agora você pode ver como ele é usado. Portanto, este é um grande valor de fazer as coisas praticamente. Então aqui temos agora essa categoria. Então, o que precisamos com base no design para dar ao ícone como um tamanho maior e também o texto para ser um pouco maior. Então vamos fazer isso no código. Vá, eu vou aqui. Então eu vou dizer que, se você se lembrar, nós especificamos ícone, categoria, ícone. Então eu vou aqui e eu vou dizer que eu sou categoria percentual ou ícone porque eu sou percentual vai me dar categoria ponto. E então eu coloquei ícone de traço. Ele vai fazer para mim nesse ícone de categoria. Então aqui vamos ter a classe, e dentro desta classe estamos usando o ícone. Então podemos usar essa classe também. Então aqui eu posso dizer PI, será o tamanho da fonte. Podemos dar como, por exemplo, 40 pixels. Tudo o que você pode usar as unidades EM, você pode dizer para EM. Então podemos tê-lo como um grande texto. Então, de volta ao navegador, vamos ver, ok, nós temos isso assim. Ignoro as mudanças porque não guardamos isso. Então precisamos colocar novamente, direção flexível será coluna. Ok, agora temos tudo bem, então está recarregado. E nós temos isso assim. Também talvez esse texto, podemos dar um pouco maior. Então eu vou alinhar também outra classe que é chamado de texto ou nome. Não, o que chamamos de vidro aqui. Temos como nome. Então eu vou aqui nome, e então o tamanho da fonte do nome será como um pouco maior. Podemos dar-lhe 1.2 AM. Então este 1.2 E m, o que significa, como, eu vou multiplicar 1,2 por 14 pixels e então ele vai dar-lhe o tamanho em pixel. Então é assim que ele é calculado porque nós temos o corpo especificado anteriormente em sua configuração, que nós temos. O tamanho do corpo da fonte será de 14 pixels. Então, depois disso, podemos salvar e ir de novo. E veremos que temos uma fonte maior um pouco aqui. Vamos dar também um pouco de espaço aqui sob o ícone. Então podemos ir aqui para o ícone em si. E podemos ir novamente aqui e dizer, por exemplo, para o próprio olho ou para o PI, podemos dar margin-bottom como 10 pixels. Então podemos usar também esta aula aqui. E nós dizemos como, eu quero uma margem inferior será de 10 pixels. Então, para empurrar o texto um pouco para longe do ícone. Então nós economizamos, recarregamos, Ok, tudo agora está bem. Então vamos verificar pelo menos o raio da fronteira. Acho que é maior. Tem 14. Então podemos dar também um raio de fronteira maior. Então podemos dar aqui 14 pixel. E então vamos novamente para o nosso projeto. E veremos que temos uma categoria específica. Então agora o que vamos fazer é apenas repetir as categorias que estão no banco de dados, que obtemos do Postman e resolvemos isso anteriormente no aplicativo do painel de administração e colocá-los aqui. Então, primeiro de tudo, precisamos chamar essa categoria de serviço. Então, como você vê aqui, nós elegemos tudo. Primeiro, precisamos ter como matriz de categorias. Então, podemos definir aqui nas categorias de arquivo ts por que ele será como matriz. E este array será tipo de modelo de categoria. Se você se lembra, nós definimos este modelo também. Então, ele estará inicialmente vazio porque nós vamos obtê-lo do back-end. E o que, como ou como eu posso usar ou obter as categorias. Podemos obtê-los através do serviço, se você se lembrar, que criamos no serviço de categoria. E nós temos toda essa lista para que possamos obter categorias. Então eu vou aqui para o meu arquivo TypeScript no banner categorias, e eu vou chamar esse serviço categoria. Eu vou dizer serviços de categorias privadas. Será categorias de serviço como você vê aqui. Então, se você quiser, você pode usar este aqui. E, em seguida, na ONG Edit, podemos chamar novamente essa categoria de serviço. E então podemos sentir essas categorias. Então vamos fazer isso. Podemos dizer este serviço de categoria de ponto, em seguida, GetCategories. E se você se lembrar, temos que assinar, temos que esperar por um valor que está vindo do back-end e, em seguida, empurrá-lo para o array. Então temos aqui ponto inscrever porque é solicitação HTTP. E então eu vou obter suas categorias no retorno da assinatura. Então aqui temos categorias. E então eu vou dizer que essas categorias, como a variável que eu defini aqui, serão as categorias que voltam, ou as categorias de resposta que voltaram do backend. E se você se lembrar, nós também precisamos cancelar a assinatura, nós precisamos. Por exemplo, leve até se você se lembrar, nós fizemos que é apenas para o desempenho para não fazer problemas. Portanto, esta assinatura não vai ficar aberta. Então temos que fazer também. E subs, se você se lembra, e nós definimos isso e falamos sobre isso na refatoração do painel de administração. Então n subs será uma variável que será tão bem definida aqui. Então podemos chamar isso de submarinos, desculpe. Então n subs também com dólar. Então ele terá um tipo que é chamado assunto. E o assunto vem de nossos x js e o tipo de ele será qualquer. E então nós como inicialização, quando eu visitar este componente, eu digo novo assunto. Então isso acaba, bem, vai acabar, como eu estou dizendo aqui, pegue até que, Ok, eu estou levando até que este submarino. E quando acabar, terminaremos quando eu destruir este componente. Quando eu destruo esse componente, quando eu navego para longe da página inicial, quando eu não vejo mais esse componente. Então é por isso que também precisamos chamar algo sobre destruir. Portanto, este OnDestroy faz parte do ciclo de vida angular dos componentes. E então podemos usá-lo, então ele será executado quando o componente for destruído. Então aqui nós implementamos OnDestroy e então eu digo NG OnDestroy, e então eu vou especificar o que ele vai fazer. Então eu quero que esses submarinos sejam concluídos. Então, como eu disse, obviamente precisamos fazer assim. Dizemos Avançar, como ir o próximo passo e, em seguida, concluído. Então, quando este componente foi concluído, a assinatura será encerrada e não teremos qualquer vazamento de memória. Então salvamos. E temos agora a categoria Isso é, por exemplo, aqui, fazer um log de console para ter certeza de que estamos recebendo as categorias do back-end. Claro, você tem que ter certeza de que você está executando o back-end. Então salvamos novamente e vamos para o console. E veremos que talvez haja um erro. Isso é um erro aqui. Diz que são três erros do injetor. Serviço de categoria está usando o cliente HTTP e não há nenhum provedor para o cliente HTTP. Então precisamos fazer ou ligar também. Se você se lembra, fizemos isso no painel de administração, precisamos chamar também no final você compra aplicativo, o módulo cliente HTTP. Então eu gravar aqui novamente, módulo cliente HTTP como fizemos anteriormente na obrigação de administração. Então aqui nós temos agora chamado, ok, eu tenho cinco categorias como você vê aqui. Mas no front-end, não fazemos nada ainda porque não adicionamos isso ao template. Então voltamos novamente para o nosso banner categorias aqui. Então temos usado matriz. Claro que você removeria o log do console sempre porque ele está afetando o desempenho do aplicativo. Não faça muitos logs de console e mantenha-os em produção. Então, é melhor removê-los. Então aqui, como você vê, nós temos categoria e nós temos coluna dois. Então precisamos fazer um loop sobre essas duas colunas ou duas a cada categoria. E, em seguida, ele irá gerar para mim essas categorias, que é fornecido a partir da matriz de categorias. Então eu diria aqui na coluna dois, G4. E, em seguida, no final você para, Eu vou dizer deixar categoria será fora categorias, categorias. Já definimos isso e está cheio. Então agora temos a categoria aqui. Eu vou dizer substituir para mim o nome da categoria. Então podemos fazer isso dessa maneira. Eu digo o nome do ponto da categoria e, em seguida, as larguras verificam isso para ver se tudo está funcionando bem. Legal, temos todos eles assim. Então, vamos substituir a cor de fundo. Fazer isso é muito simples. Se você se lembra, nós temos a cor sobre a categoria, então nós temos isso no CSS aqui. Então temos aqui a cor de fundo em categorias classe ou componente categoria. Então aqui categoria div. Então aqui vamos nós e dizemos que temos uma entrada para devs ou qualquer elemento HTML que está vindo de Angular, nós apenas chamado estilo NG. E em qualquer estilo temos especificar isso entre colchetes. Então é uma entrada. Então precisamos fazer dentro desta entrada algum código angular. E dentro abrimos um objeto, e este objeto conterá a propriedade de styling, o fundo, a propriedade de styling, nós o definimos assim. Fundo. Cor. Então, ele terá como essa cor de fundo. E então eu vou dizer categoria, a categoria que eu tenho do MD4, e depois cor. Então aqui, esta div terá essa cor de fundo, que será a cor de ponto de categoria. Então salvamos. E então vamos para o aplicativo. Veremos que temos a cor que definimos no painel de administração antes, se você se lembrar. Então, dessa forma, temos essa cor. O estilo de energia está fazendo o trabalho para você. Então você também pode usar outras propriedades, como, por exemplo, cor. Então você vê aqui que a cor também vai mudar com base nisso. Então é muito simples. Você pode que dentro do NG quatro e também o ícone, se você se lembrar, temos aqui especificado ícone para sua categoria, possamos usá-lo também. Você tem duas opções. Um deles é apenas fazer isso e, em seguida, você diz ícone de ponto categoria. Porque se você se lembrar, nós estávamos especificando o ícone apenas o nome do ícone, que é do Prime NG. Então precisamos conectá-lo para ser pi e, em seguida, menos, e, em seguida, especificar o nome do ícone. E então podemos pegá-lo aqui. É exatamente como fizemos com o painel de administração. É por isso que estou indo rápido aqui. Então, como você vê, nós temos tudo está definido. Acho que a fonte do texto é um pouco grande. Vamos torná-lo menor. Eu vou aqui novamente para o banner categorias e então eu vou fazer o nome para ser. Mantemos como um. Então não temos que fazer nada ou qualquer mudança aqui. Então podemos mantê-lo assim. E vamos ver, ok, nós temos o texto e os ícones são muito bonitos. Temos cinco categorias apenas porque definimos cinco categorias no back-end, você pode adicionar outra categoria. Vou adicioná-lo para a próxima palestra. Você pode usar o aplicativo do painel de administração para adicionar categoria, e ele será adicionado aqui com o ícone direito. Claro, a última coisa que eu quero mencionar é quando eu clicar em uma dessas categorias, eu quero ir para a lista de produtos e, em seguida, a categoria desse produto. Então eu quero ver os produtos dessa categoria, da categoria que eu cliquei. Então, para fazer isso, precisamos fazer no próprio banner. Aqui, a categoria. Não podemos dizer link do roteador se você se lembrar. Então não posso dizer isso aqui. Pode ser um link de roteador. Então, o link do roteador, o que será, será um produto. Então podemos colocar aqui em aspas duplas porque eu defino essa entrada. Então aqui estou escrevendo um código TypeScript ou JavaScript, digamos, ou código angular. Então aqui estou eu especificando o chefe. Serão produtos. E então eu estou criando, por exemplo, o mesmo componente que eu estou chamando, mas seria como sob categoria. Então eu estou indo para uma categoria específica e, em seguida, eu passar esse ID de categoria porque eu vou usar neste roteador ou neste link, eu vou usar um componente que está lendo seu ID de categoria. E então ele vai devolver para mim a categoria que eu quero. Então aqui eu posso dizer mais, é claro que colocamos isso entre aspas simples porque é string. E eu vou combinar com ele categoria ponto ID. Então eu vou ler o ID, então ele será com este link roteador. Mas ainda estamos recebendo erro aqui. Por quê? Como não usamos o módulo de roteador no módulo de produtos, você precisa usar esse módulo de roteador dentro do módulo do produto. Então vamos usar isso. Claro, retornaremos a este módulo de roteador mais detalhadamente quando definirmos os produtos estão fora. Então nós precisamos apenas chamar o módulo roteador assim. E então temos um especificado nossa categoria, como ele vai se comportar, exatamente o que queremos. Então, se eu clicar agora sobre eles, talvez eu receba erros porque eu não posso ir para essa categoria porque nós não temos rota para isso. Então, se você quiser fazê-lo funcionar, precisamos criar um componente. E então vamos criar a lista de produtos com base em filtrados, com base nessas categorias, como veremos mais tarde nas próximas palestras. Então, como você vê aqui, eu estou clicando, estou recebendo erro porque eu não posso acessar ou ir para este componente. Então, para mim, estarei aqui o suficiente. Só quero mencionar que podemos fazer um bom comportamento ou um comportamento mais livre e amigável. Que quando eu colocar o mouse , será como um ponteiro. Então podemos fazer isso no estilo da categoria. Então, se eu clicar em Controle, se você vir eu clique em Controle, em seguida, clique na classe e ele vai me levar para a classe especificada. Então eu posso dizer aqui ponteiro do cursor. E depois salvamos. E vamos novamente para a nossa aplicação no front-end, você vai ver que temos agora toda a categoria é clicável. Então nós podemos, se eu clicar aqui, ok, Eu recebo erro no console porque eles estão fora ainda não está definido. Então, na próxima palestra, vamos ver como fazer este aplicativo maior. Vamos para a lista de produtos e vamos filtrar por categoria. Como você verá mais tarde, passo a passo. 145. Item para produtos: Certo, ainda estamos na página inicial. Vamos criar os produtos em destaque. Os produtos em destaque terão alguns itens de produtos. Como fizemos exatamente no backend, se você se lembra, temos irritante que apresentou produtos API. Assim, podemos ter apenas os produtos em destaque aqui. Se você se lembra, nós estávamos sinalizando cada produto com bandeira que é chamado é destaque e nós definimos como verdadeiro ou falso. E com base nisso, estamos levando o produto em destaque para o front-end. Mas antes de tudo, eu gostaria de estilizar o item de trabalho ou o item do produto. Este item de produto que vamos usar também em sua lista e também em outros lugares como produtos sugeridos ou, por exemplo, na página inicial novamente, ou em algum outro lugar na própria página do produto. Então, nesse caso aqui precisamos de dois tipos de componentes. Primeiro, o recipiente de todos esses itens de produtos, que é chamado de produtos em destaque e o próprio item do produto. Então você também pode fazer produtos em destaque e colocar item do produto. Mas, neste caso, o item do produto não será reutilizável em outro lugar. Então, primeiro de tudo, vamos criar dois componentes. primeiro componente será localizado na biblioteca de produtos, como fizemos com categorias, banner e pesquisa de produtos, vamos localizar os produtos em destaque e o item do produto para que possamos usar também o console. Vou fazer isso rapidamente. Então, como você vê aqui agora nós temos dois componentes. Primeiro, ele chamou produtos em destaque, e também o item do produto. Eu cometi erro aqui que eu coloquei o, por exemplo, eu mantive quando eu estava gerando o item, eu estava usando a mesma ferramenta de geração. Então eu errei isso. Eu coloquei eu ainda tenho os produtos ou o seletor ficou produto item. Então precisamos fazer isso também. Então precisamos consertar isso. Então, como podemos consertar isso? Se você cometer algum erro, você pode simplesmente ir novamente para o componente e você pode editá-lo diretamente aqui. Então nós temos o seletor, então eu quero produtos e eu vou dizer produtos em destaque também. Então, neste caso, nada mudará, apenas este seletor. Então, quando eu quiser chamar este componente, eu quero usar o seletor. E estou usando produtos como prefixo. Porque se você sabe que temos uma regra em ES lint que temos produtos como atributo como prefixo. Portanto, precisamos sempre prefixar nossos seletores com produtos como o nome da biblioteca. E então eu coloco o nome do componente que eu quero. Então também, temos aqui o item do produto que criamos anteriormente. Então agora podemos fazer o recipiente primeiro, podemos dizer, por exemplo, temos div, que contêm os produtos de recurso e o título. Então eu vou criar aqui um div e eu vou dar-lhe uma classe que é chamado de produtos em destaque. E também, eu vou dar um título que são realmente, realmente como H3. E este h3 terá produtos em destaque também. E então eu preciso ter uma grade porque nós vamos colocar os itens na grade, o item do produto. Então precisamos ter uma grade também, exatamente como temos no design, no design, se você lembrar, temos quatro colunas, então precisamos de 34 para cada item de produto. Então, se formos novamente para o código, podemos definir uma div ou uma grade. Podemos chamar-lhe uma grelha. E então dentro desta div, vamos definir as colunas. Então eu vou dizer div ponto P coluna, porque aqui eu estou usando o sistema de grade do Prime NG. E depois vou dizer três. Temos 12 colunas, então preciso de quatro colunas. Neste caso, preciso dividi-lo por três. Então 4 multiplicado por 3 é 12. Então aqui teremos quatro colunas. E dentro disso vamos usar o item de produtos. Então eu vou dizer aqui, produtos, item do produto. Então nós temos aqui esse componente definido já. Então, neste caso, eu vou salvar, salvar tudo, e então nós vamos usar o componente de produto de recurso no aplicativo de loja. Na página inicial, como você se lembra. Então nós temos na página inicial, este DAG também. Temos o banner, temos as categorias, e agora vamos usar o produto em si ou os produtos de recurso. Então vamos comentar esta parte e, em seguida, dizemos que temos a nova tag que é definida anteriormente. Então produtos e, em seguida, produtos em destaque. Assim, desta forma, temos chamado o componente, que é chamado de produto de recurso. E dentro deste recurso produtos, estou chamando o item de produtos. Então, neste caso, eu devo ter no produto front-end funciona para o tempo. Então, vamos aqui verificar. Certo, temos itens de produto, funciona. Temos uma vez porque estamos chamando isso apenas uma vez. Não temos aqui um loop for para cada produto. Então, por enquanto, vamos criar o item do produto. E na próxima palestra, vamos chamar os produtos de recurso e colocar isso em loop. Então você terá o item de todos os produtos. Então, primeiro de tudo, vamos fazer o estilo do item de produtos. Então, no item do produto, se você se lembrar, no design, temos na imagem superior, título, preço e, em seguida, botão, que é chamado Adicionar ao carrinho. Então precisamos criar um div, div. E então eu diria Classe deste div será item de produto. Precisamos criar um arquivo de estilo para isso, como veremos mais tarde. E dentro desta div, eu vou ter algo invólucro de produto ou embalagem de item de produto. Por que eu preciso disso? Porque se você vê no design, temos aqui um fundo cinza. Então este será o invólucro e fora dele, como se eu estivesse empurrando a imagem para fora. Então aqui teremos também a imagem. Então eu me pergunto Arbor para ser colorido assim. E então eu vou colocar a imagem, o texto e o prêmio dentro dele. E dentro do invólucro do item do produto, vamos ter a imagem. E a imagem terá como uma fonte, que será a imagem do produto em si. E também teremos uma aula para esta imagem. Chamamos-lhe Imagem, e depois alternância. Podemos mantê-lo vazio por enquanto, todos substituem o nome do produto dentro. E também, precisamos de um título que terá um copo também, que será o nome, o nome do produto, e dentro dele terá o nome do produto. E também precisamos ter um preço. Então temos aqui um preço. Nós colocá-lo em H5 e dentro ou sua classe será preço. E dentro dele teremos o preço do produto. E no final precisamos de um botão. E este botão será exatamente como fizemos o botão do banner. Então, será botão P e classe de estilo. Vou dar-lhe uma classe que é chamado Adicionar ao carrinho. E a etiqueta será adicionada ao carrinho, e o ícone será um carrinho de compras. Mas aqui temos um problema que não estamos chamando o módulo de produtos ou o módulo de botão, desculpe. Então precisamos chamar também esse módulo de botão no módulo ou módulo de produtos. Porque se você se lembrar que cada módulo é totalmente separado, que é não vê os outros componentes ou os outros módulos que são chamados no aplicativo ou em outra biblioteca. Então precisamos chamar o módulo de botão novamente, dentro desta biblioteca de produtos, Vamos salvar tudo novamente para que possamos ter um salvar e depois vamos para o aplicativo. Ainda não vemos nada porque aqui está vazio. Temos apenas como eles são botão e aqui devemos ter como algum nome, imagem, etc Mas agora temos eles vazios porque não especificamos isso. Então o que pode ser aqui, ok? Se eu voltar para o item de produtos ou os produtos de recurso, o recurso de produtos virá do back-end. E aqui, neste caso, eu quero passar esses produtos para o item do produto. E então o item do produto será renderizado com base em quê? Tão inserida dentro dela. Então precisamos de algo chamado entrada. E essa entrada pode ser definida dessa maneira. Se você se lembra, estávamos usando entradas sempre como propriedades. Então nós especificamos como alguma entrada que ele pode fazer algo exatamente como nós temos entrada. Por exemplo, fonte da imagem. Então é entrada, também classe estilizada é entrada. Assim, podemos especificar a entrada que é chamado de produto, o próprio produto. E então aqui eu vou passar o produto que eu estou tendo do backend ou lista de produtos, que eu tenho do back-end. Então vamos ver isso na próxima palestra. Mas agora vou definir este item ou esta entrada. Então vamos fazer isso. Podemos colocar de volta tudo e ir para o item do produto. Então, neste caso, eu posso ver cada entrada que está vindo para este componente e eu posso renderizá-lo aqui. Então vamos para o TypeScript deste componente ou para o arquivo de classe deste componente. E então vamos adicionar uma entrada. Entrada é algo que você pode definir em Angular, e este será item injetável, por isso será como esta entrada. E então você pode definir o nome da entrada que você deseja. Por exemplo, eu quero um produto. Isso o que eu vou ter também no produto ou recurso produtos, eu vou passá-lo aqui. Eu vou dizer produto de entrada será o produto que está vindo do back-end. Então aqui eu tenho um produto e o tipo, se você quiser definir um dipolo. Assim, seria mais fácil para você acessar essa entrada. Por exemplo, eu quero acessar seu prêmio nome facilmente. Então podemos chamar esse produto moderno porque estou passando um produto e a entrada será importada do núcleo angular. Então aqui temos angular ou importação de núcleo angular. Então, neste caso, temos agora a entrada. Agora estou dentro deste componente. Eu posso usar este produto dentro, como eu tenho os produtos que eu tenho a partir do backend e eu posso usá-lo aqui ou usar suas propriedades aqui. Então, primeiro de tudo, eu posso usar, por exemplo, a imagem. Então eu vou ter aqui a entrada fonte, como você vê aqui, é entrada. Então eu não posso dizer imagem de ponto do produto. Então teremos a imagem do produto. E aqui no Alt, você pode especificar também o nome. Então você pode muito bem passado o nome do produto. E também aqui, você pode especificar o nome do produto que será intitulado no nome. Então temos aqui o nome do produto. E também, podemos definir que é um preço. Então temos aqui também, produto, que preço. E então você também pode passar ou fazer um tubo que é, será uma moeda. Então, se você se lembra, nós estávamos colocando o preço em um cachimbo de moeda para estilizá-lo e colocar cifrão atrás dele. Então vamos guardar isso. Notaríamos que não veremos nada porque este componente ainda não tem entrada. Então não temos nenhum dado aqui. Portanto, é melhor sempre dizer que quando há um produto, como quando isso é definido, há que o interior dele, em seguida, exibir este componente. Estou sempre a fazer isso para evitar erros. Então, como podemos fazer isso, você pode apenas dizer ng-if dentro deste ng-se você apenas dizer produto. Então, se houver produto a receber este componente com os nossos dados, então esta placa, se não, não exibir nada, para que possamos salvar e verificar novamente. Veremos que não temos nada porque não estamos passando nenhum produto para produto de produtos futuros. Então, o que vamos fazer em seguida é fazer que os produtos de recurso. Nós vamos ligar para eles. E então vamos passar para o item de produto ou o item de produtos. O produto em si, que vem do backend de produtos de recurso. 146. Banner de produtos característicos: Se você se lembra no Postman ou no back-end, estávamos recebendo os produtos de recurso com base em alguma contagem. Como você se lembra, criamos API no back-end, que diz produto obter e, em seguida, destaque. E, em seguida, você especifica quantos produtos você deseja mostrar no front-end ou mostrar, ou para obter fazer o seu front-end. Então, primeiro de tudo, eu quero mostrar a vocês como eu posso chamar essa API. Então eu coloquei no Postman, como você se lembra, nós temos agora três produtos que são destaque como a bandeira leste é verdadeiro todo o caminho. Assim como sempre fizemos com cada produto ou com cada serviço que podemos chamar os produtos de recurso. Assim, podemos chamar os produtos de recurso dentro do componente, que criamos quatro produtos em destaque. Então, primeiro de tudo, eu preciso criar esse serviço. Então, primeiro de tudo, eu vou para o serviço de produto e, em seguida, criamos uma nova função. Podemos chamar de produto em destaque. E então esses produtos ou esta função retornarão para mim observável. E este observável será array de produtos, como eu teria vários produtos, não apenas um. E, em seguida, isso vai retornar para mim solicitação HTTP e, em seguida, obter. E então podemos especificar novamente que queremos matriz de produtos. Então eu vou tê-lo aqui também. E então podemos especificar o que é uma URL. Será exatamente o mesmo que você é L aqui. Então, podemos ter toda essa parte e, em seguida, vamos substituir o que temos no back-end ou como temos isso no back-end. Então temos aqui a URL, e então dizemos que precisamos obter e, em seguida, produtos em destaque. E então especificamos a conta. E essa conta, você pode torná-la dinâmica. Você pode passá-lo para a mesma função, que você possa usá-lo novamente em outro lugar. Então eu vou dizer aqui número contagem. Então eu vou passar o número dois quando eu chamar esta função. Então eu vou dizer aqui que eu tenho destaque e, em seguida, especificar para mim a contagem. Então eu vou precisar aqui contar. Então, neste caso, nós chamamos essa função de uma conta específica de produtos, como eu preciso de três produtos em destaque. E então ele vai chamar para mim esta API. Então, salvamos isso e vamos novamente para o nosso componente de produto de recurso. E precisamos ligar para o serviço do produto. Então temos que dizer aqui, serviço de produto privado, ou por exemplo, serviço de prod. Você pode especificar o nome que deseja aqui com base na sua capacidade de ler o código. E então eu diria produtos de serviço, que está vindo de serviços, serviço de produto. E então no final você na edição, eu posso especificar um método que será chamado também, como um privado, podemos dizer obter produtos em destaque. E então eu especificar contagem, como dissemos anteriormente. Então você pode especificar a conta aqui ou você pode definir um diretamente quando estamos criando este método. Então aqui eu vou criar este método e eu vou dizer privado e, em seguida, especificar o método. E então eu vou dizer este serviço de produto ponto e, em seguida, obter produtos em destaque. E então isso retornará para mim, por exemplo, assinante. Mas primeiro eu preciso especificar quantos produtos de recursos eu quero. Por exemplo, no meu caso, eu quero quatro porque eu tenho quatro produtos em uma linha. E então podemos dizer subscrever como quando o seu valor está pronto, Dê-me dentro de um produtos. E então eu vou chegar aqui e eu preciso especificar a variável do produto como sempre fazemos. Então eu preciso de um membro da classe aqui, que é chamado de produtos. Você pode chamá-lo também produtos futuros, que será um tipo de produto e, em seguida, ele será array. E dentro disso, seria uma matriz vazia. Então, esses produtos serão preenchidos. Nós vamos usá-lo no modelo e, em seguida, como ele vai ser preenchido por, podemos dizer neste ponto, produto é igual a produtos que está vindo de assinar. Se você está confuso, você pode renomear isso, você pode chamá-lo como produtos bem apresentados. Vamos renomeá-lo assim para não se confundir. Portanto, temos produtos futuros. E, em seguida, esse recurso produtos é um produto que está vindo desta API ou desta chamada. E então vamos usar esses produtos de recurso no front-end. Então eu preciso ir para o modelo e, em seguida, eu vou dizer nos produtos de recurso, trazer para mim cada coluna um produto e passá-lo para um item de produto. Então aqui eu vou dizer MD4 e, em seguida, deixar o produto, como um produto de produtos em destaque, como eu vou passar por todos os produtos que estão vindo através deste recurso produtos. E então eu vou dizer passe por mim. Se você se lembra na palestra anterior, criamos uma entrada que é chamado de produto. E então eu vou passar este produto para essa entrada ou para aquele componente. Então, neste caso, este componente receberá este produto toda vez, e isso seria executado quatro vezes porque temos quatro produtos provenientes do back-end. E então ele será renderizado dessa maneira. Então eu vou para o componente deles. E aqui o modelo será renderizado exatamente como recebemos o produto. Então, na verdade, teremos quatro componentes são chamados aqui porque temos produtos pregador para produtos. Então vamos salvar tudo e verificar se tudo está funcionando bem. Eu clico em Salvar tudo. E então vamos para a frente e vamos ver, ok, ótimo, temos todos esses produtos, mas não é estilizado e vamos estilizar cada item de produto na próxima palestra, como veremos vocês mais tarde. Mas antes de tudo, lembre-se de fazer sempre o acabamento da assinatura subescapular. Então aqui temos uma assinatura. E como você se lembra que quando eu sair com este componente, eu preciso terminar a assinatura. Caso contrário, terei vazamento de memória no futuro. Então, para fazer isso, precisamos ir e fazer exatamente como fizemos com cada assinatura anteriormente, que eu falei sobre isso muitas vezes. Então eu vou fazer isso rápido. 147. Item de produtos para estilo: Ok, aqui eu estilizei o item do produto. Vou mostrar-lhe o estilo rapidamente, como o CSS, porque eu disse que estamos focando aqui em Angular. Então a parte de estilo para nós é como apenas parte secundária. Então eu posso explicar isso rapidamente se você já tem experiência com CSS. Então nosso curso aqui é apenas focando em Angular e como podemos estruturar nosso projeto da maneira certa. Mas, claro, eu posso mostrar-lhe rapidamente o CSS para não fazer o curso de embarque e mais tempo. Então eu posso compartilhar com vocês o código diretamente do CSS. Então, primeiro de tudo, eu tenho aqui um componente de item de produto ou arquivo de estilo, que eu criei em nossa pasta de estilo público, como nós concordamos anteriormente, que nós temos o estilo público nas bibliotecas. E esta biblioteca é cada biblioteca tinha seu próprio estilo público para cada componente que está dentro desta biblioteca. Então aqui temos o item do produto que eu criei. E como você se lembra no modelo de item do produto, se você voltar para o item do produto novamente, temos aqui Item e, em seguida, wrapper do item do produto, e dentro dele eu tenho imagem e, em seguida, nome , preço e etc. Então eu vou para o estilo novamente, então eu vou te mostrar que eu tenho o invólucro. Eu dou uma cor de fundo para dar este fundo cinza aqui. E também dou uma fronteira porque se você notar, nós temos um pouco de fronteira aqui. E também, eu dei flex de exibição de raio de borda porque eu quero alinhar esses itens no centro um sob o outro. Então nós temos um flex, todos eles centrados, justificar seu conteúdo também. Centro, gosto de ser todos eles no centro, no meio da caixa. E como vai flexionar direção é coluna como eu não quero que eles perto um do outro, mas eu quero que eles de cima para baixo colunas. Então, como você vê aqui, nós também temos altura mínima para dar a todos eles a mesma altura, como esta caixa terá toda a mesma altura. E, em seguida, margem superior, eu empurro o código um pouco, ou aquele componente do topo, um pouco, cerca de 85 pixels. Ok, a imagem em si, nós a temos como uma largura. Aqui. Temos 60% da parte superior deles porque está dentro do invólucro. Então não teremos largura total da imagem, mas temos 60 por cento de sua parte superior aqui. Então, será assim e no meio, porque nós especificamos aqui justify-content center e o topo da margem é menos 85. Por que eu fiz isso? Porque eu quero empurrá-lo para fora do invólucro. Então eu dei a ele uma margem superior, como a margem superior da imagem, empurre-a para fora do subpixel riper 85. O nome que eu dei a ele um pouco como margem, topo e baixo. Por isso, será 10 pixels para estar longe do bit editor de imagens e longe do preço também. E eles, em seguida, o preço. Eu dei a ele uma cor primária, que nossa variável de cor primária que definimos anteriormente, algum tamanho da fonte e como vamos margem 0 porque ele vem inicialmente este H1 ou h5, inicialmente com algumas margens. Então eu os faço 0. E o fim, eu tenho o botão, como você vê aqui, Eu substituo o botão com o arquivo de estilo ou que a classe de estilo que temos aqui, classe de estilo do botão e eu tenho Adicionar ao carrinho. Por isso, anulamos isso. E então nós fomos aqui e nós demos como o estilo. Eu fui para o estilo e eu dei cor de fundo será cor primária. É como se eu substituísse a cor e, em seguida, a borda e dê 0. Eu não quero fronteira e eu dou mais raio de fronteira baseado no design, como eu tenho isso. E então eu exportei ou importou este arquivo em produtos SCSS. E, em seguida, este produto de arquivo SCSS , que contêm todos os estilos, Eu importado em e você compra, que nós importamos já na importação para lábios. E então veremos que o estilo ficará assim. Então, o estilo é bastante simples. Não temos de complicar as coisas. Estamos seguindo o design como ele é. E, em seguida, vamos fazer Adicionar ao botão Carrinho quando estamos indo para trabalhar com o carrinho. 148. Item de produtos para estilo: Olá e bem-vindo de volta. Agora, nesta seção, vamos criar o componente de lista de produtos ou a página de produtos. Então, quando o usuário, quando ele está na página inicial e ele vai para os produtos, ele vai ver esta lista de produtos. E como você vê que estamos usando alguns componentes que criamos anteriormente. Usamos o que criamos para futuros produtos, que é chamado item de produto, e vamos usá-lo dentro da lista de produtos. Além disso, vamos fazer alguma filtragem para os produtos. Se você se lembra, temos categorias e essas categorias que podemos selecionar qual categoria eu quero exibir. E neste caso, meus produtos, eles vão ser filtrados. Então vamos começar a fazer isso. Como você vê que temos duas colunas, uma coluna para as categorias, e uma coluna será para a lista de produtos. E dentro da lista de produtos, há três colunas. Vamos fazer isso e começar com esta lista. E vamos apresentar primeiro todos os produtos que temos na loja. E passaremos depois disso para filtrar por categorias. 149. Componentes de reuso de páginas de artigos: Ok, então, como você se lembra, nós criamos o link que está se referindo à lista de produtos. E esta lista de produtos está localizada dentro da nossa aplicação. Temos aqui nas fontes, temos algumas páginas e essas páginas, nossa página inicial e criamos lista de produtos. Mas com base na nova arquitetura que eu sugeri que vamos construir vários trabalhos, então precisamos mover esta lista de produtos para a biblioteca de produtos. Então não vamos usá-lo apenas para isso e você compra, talvez eu tenha loja ND também. Então vou usar novamente o componente da lista de produtos. Então, nesse caso, eu vou ter o aplicativo no meu código. É melhor mover sua lista de produtos para a biblioteca de produtos, como vemos aqui, que temos biblioteca de produtos e estamos localizando todos os componentes compartilhados aqui. Assim, podemos também criar aqui um mais frio que é chamado de páginas. E dentro desta pasta Pages, vamos colocar a página de lista de produtos. Então vamos excluir primeiro este componente. Eu vou me livrar dele. Então, nós agora excluímos o componente e não se esqueça de excluí-lo também do módulo de aplicação onde teremos chamado este componente. Então, estamos sempre removendo os componentes do módulo relacionado. Então vamos removê-lo. E também, vamos remover este caminho. E vamos usar esses buffers filho como fizemos com a página de login. Então vamos remover isso também. E nós vamos remover a importação porque ela não existe mais. Então agora estamos limpos e prontos para começar a trabalhar. Então, primeiro, vamos gerar um novo componente que será localizado em sua biblioteca de produtos. Então, primeiro, vou procurar por componente. E, em seguida, este componente será localizado em uma pasta que é chamada de páginas. E dentro dessas páginas, vou chamar, por exemplo, a lista de produtos. Então eu diria produtos Lista, desculpe, lista. E então eu vou colocar dentro do projeto ou da biblioteca que é chamado de produtos. E nós vamos, em primeiro lugar, exportado porque nós vamos usá-lo no aplicativo também. Ou e, em seguida, vamos ter estilo inline para não ter como CSS embutido. Então nós também temos que pular esses testes como sempre fizemos. Então nós temos aqui pulando isso, este e o seletor também é. Nós vamos usar ou escolher o seletivo com base em nossas regras na Islândia, e nós chamamos isso diretamente lista de produtos. Então, neste caso, podemos executar este comando e ir para a nossa biblioteca de componentes ou para biblioteca que é biblioteca de produtos. E veremos que as páginas foram criadas aqui, que é a lista de produtos. Agora, se você sabe que se eu for aqui, eu vou ter um erro no console porque eu não posso mais isso ou ver esta rota. Então, como podemos resolver isso? Se você se lembra, fizemos a mesma coisa exatamente com o login. Se você se lembrar, temos o componente de login. E no módulo do usuário, eu estava me referindo a esta página de login e usar rotas para criança como fizemos exatamente com o login. Então vamos fazer o mesmo com o produto. Então, primeiro de tudo, eu tenho que ter certeza de que eu estou importando módulo de produto, que será no módulo de aplicação na oficina de motores. Então nós temos que verificar se, ok, nós não temos os produtos, nós temos aqui. Temos módulo de produtos. Agora, no módulo de produtos, vou criar rotas. Ok, vamos para o módulo de produtos. E no módulo de produtos, vamos criar uma constante, novamente, como fizemos anteriormente. Então chamamos de rotas. E essas rotas terão um tipo de rotas. E, em seguida, essas rotas terão o valor de matriz. E cada array ou cada membro desta matriz será um objeto. E o primeiro objeto que vamos ter é o caminho que é chamado de produtos. Então, quando eu estou chamando este módulo, e então eu vou na minha página dois produtos, em seguida, aqui ele será redirecionado porque eu estou chamando este módulo no módulo de aplicação. Assim, todas as rotas que são adicionadas aqui serão definidas também na aplicação. Então vamos fazer isso. Temos aqui produtos e vamos ter o mapeamento como uma criança se você quiser ou você pode fazer o caminho é exatamente como você quer aqui. Então, por exemplo, você pode dizer componente e, em seguida, você pode importar o componente de lista de produtos. Então vamos mantê-lo assim por enquanto. E eu vou usar as crianças mais tarde quando nós vamos ter as categorias página Garth e verificar, et cetera. Então, primeiro de tudo, vamos fazer assim. Então, quando eu vou para os produtos, Eu devo ver que isca ou item de lista de produtos que eu criei, mas na biblioteca de produtos. Então, primeiro de tudo, precisamos também de usar esta rota, como vamos usá-la. Então, se você se lembrar, estamos chamando um módulo roteador, mas em todo o nosso módulo é usado puramente aqui, mas precisamos dar-lhe uma propriedade que é chamado para filho, e esta criança terá aceitar as rotas. Então, neste caso, eu estou dizendo que este módulo de produtos é filho do módulo de aplicação e ele pode usá-lo rotas. Então, quando eu ir agora para a minha aplicação e clique em produtos, ok, Eu tenho trabalho lista de produtos que está localizado em sua biblioteca de produtos. Então, na minha aplicação, eu tenho apenas uma rota, que é, por exemplo, a página inicial. E lá dentro meu módulo de produtos, Eu tenho sua rota para os produtos. Então, toda a lista de produtos. Então aqui temos produtos. Estamos indo para esta rota produtos. E então eu vou ver que eu sou realmente direcionado para componente lista de produtos. Então agora vamos discar este componente e fazê-lo funcionar. Então teremos à direita, como a lista de produtos, e à esquerda teremos a lista de categorias. Portanto, precisamos chamar para serviços, categorias e produtos. E os dois já os fizemos. Então vamos aqui e definir nossos componentes. Então, primeiro de tudo, eu vou usar essa grade para que possamos envolver tudo dentro de uma div e dar-lhe um nome. Podemos dizer lista de produtos ou página de produtos. Então nós podemos, cabe a você e podemos dar um nome como este. E então nós vamos ter o div, que é chamado de grade B para ter como uma linha de grades. E então vamos ter duas colunas. Então um terá três colunas. Então temos aqui P, chamada três, que conterá as categorias. Então podemos dizer aqui categorias. E também, vamos ter outra div para o item de produtos em si. Então temos aqui div e P chamada seria o resto. 12 menos três serão nove. Então vamos colocar os produtos aqui. Então vamos Salvar para ter certeza de que tudo está funcionando. Então eu vou aqui para o meu aplicativo perfeito, Eu tenho aqui categoria e eu tenho aqui os produtos. Então vamos começar com os produtos. Se você se lembra, nós criamos em nossos produtos algo como um componente que é chamado item de produto. E este item de produto, nós o chamávamos em todos os lugares, por exemplo, em produtos em destaque. Então eu vou usar o mesmo. Então podemos fazer exatamente a mesma coisa que fizemos. Então nós temos aqui como item de produto, mas primeiro, vamos dividi-lo. Então temos dentro desta div, teremos outra grade. Então div dot grid ou p grid. E dentro deste grau B vamos ter várias colunas. Então par linha, será três. Então eu vou pedir para P chamar. Então, dentro disso, então teremos três colunas. 12 divididos por 4 serão três colunas. Então nós estamos indo aqui para usar nosso item de produto. Então temos aqui o item do produto. Mas primeiro, precisamos passar por isso, os produtos. Então precisamos chamar novamente o serviço do produto, não o produto do recurso, mas vamos usar o serviço do produto, tudo isso. E então podemos ser capazes de loop sobre os produtos e obter produtos. E aqui será repetido várias vezes e irá listar o meu produto. Então vamos fazer isso. Então eu estou indo aqui e ligar para o meu serviço de produto. Então eu diria aqui, serviço de produtos privados. E aqui teremos serviço de produto novamente. E vamos definir um membro da classe que é chamado de produtos. Então ele conterá meu produto antigo, será tipo de produto e será array, e no início estará vazio. Então aqui vamos ter método que é chamado, podemos dizer obter produtos e vamos implementar este método. Então, primeiro, eu vou ter aqui como um bom produto privado. E isso recebe produtos usarão o serviço do produto. Então eu vou dizer este serviço de produto ponto, ponto obter produtos. Nós já definimos esse método quando criamos o aplicativo Admin. Então podemos usá-lo novamente aqui. Então eu vou ter aqui se inscrever. E depois da assinatura, eu obteria os produtos. Eles próprios do back-end. E então esses produtos, eu vou atribuí-los aos produtos ou ao membro da classe que eu defini anteriormente. Então eu posso alcançá-lo dizendo este produto e, em seguida, usar os produtos de resposta que eu possa dar um nome como produtos de risco apenas para você não ser confundido entre nomes. Então vamos atribuir isso a esta matriz. Então, depois disso, vamos para o modelo. E, em seguida, no modelo, diremos MD4. É exatamente como fazíamos as coisas antes. Estávamos explicando em detalhes. Então nós dizemos deixar produto fora produtos, que eu defini na minha aplicação ou como um membro da classe, e, em seguida, loop sobre ele e exibir para mim o item do produto. Então vamos salvar isso e ir para o aplicativo. E nós vamos ver que não temos nada porque eu acho que eu não salvei o modelo ou não, talvez eu não atribui o produto. Então eu tenho aqui entrada de produto como você vê. E então eu preciso atribuir seu produto, que eu tenho do loop for. Então aqui eu tenho produto, e então eu vou atribuir esses produtos aqui. Então, quando vamos novamente para o aplicativo e veremos que temos listado todos os nossos produtos e usando o item do produto que criamos anteriormente. Para evitar, por vezes, o erro pode ser os produtos não vão estar prontos. Portanto, é melhor não exibi-los até que os produtos estejam realmente prontos. Então temos que dizer aqui, ng-if produtos. Então, se houver produtos prontos, essa grade será criada. E então vamos fazer um loop sobre os produtos para cada item de produto, como vemos aqui. Agora temos toda a nossa lista de produtos pronta, vamos criar agora as categorias. Então as categorias serão exatamente as mesmas. Vou ligar para o serviço de categoria. Então eu diria aqui privado. E então eu vou dizer serviço categoria. E então o serviço de categoria será chamado. E aqui vamos dizer também, este embora, GetCategories. Portanto, não vamos conseguir apenas produtos, vamos ter categorias também. Então aqui estamos chamando esse método. Vamos criar este método novamente. Então temos aqui GetCategories privado e, em seguida, GetCategories. E o GetCategories, vamos usar um serviço GATT e este serviço categoria. Foram devolvidas para mim todas as categorias. E depois subscrevemos. E então vamos ter as categorias de resposta. Por exemplo, uma resposta recebe. E então vamos definir uma variável ou um membro da classe. Estamos chamando de categorias. Ele terá uma categoria de tipo e será array, bem inicializado como uma matriz vazia. E então vamos atribuir essas categorias de variáveis às nossas categorias de resposta. Então temos aqui respostas recebe. Então, depois disso, vamos usá-lo no front-end. Se você se lembra, temos a coluna quatro categorias. Então eu estou indo aqui para ter, por exemplo, H4, e eu vou dizer aqui categorias. Então você pode dar um título no topo. E então eu vou usar a extremidade principal a caixa de seleção. Como você vê aqui, temos componente NG principal, que está usando como uma caixa de seleção. Então podemos usar isso também. Então vamos usar esse básico como este. Então, primeiro de tudo, podemos copiar esta parte nas fontes. Podemos ter aqui uma div, e isso terá um campo, e terá NG ID de entrada modelo. E vou ver como podemos preparar isso. Então nós vamos ter aqui no campo em si. Mas P checkbox não é importante porque precisamos importar módulo checkbox para o nosso módulo de produtos, não para módulo de aplicação, porque temos esse componente dentro do módulo de produtos. Então vamos importar isso também. No final de suas importações, eu vou dizer como módulo caixa de seleção. E este módulo de caixa de seleção com vêm da caixa de seleção Prime NG. Então, podemos também importado aqui, Importar e dizer módulo caixa de seleção do prime e g. barra de seleção. Então estamos tendo agora esse módulo de caixa de seleção. E se formos para o aplicativo, veremos que não temos mais o erro aqui. Então agora vamos usar esta caixa de seleção e vamos fazer loop sobre as categorias. Então, novamente, precisamos ter aqui NG quatro, eu vou dizer n 24 e esta categoria de chumbo MD4. Então eu vou fazer um loop sobre todas as categorias. Então eu diria que categorias de categorias que eu defini anteriormente. Então, primeiro, eu vou dizer que esta caixa de seleção terá, será binário, como verdadeiro ou falso. E ele vai, ou o ID será, podemos colocá-lo como entrada. Então, podemos colocar aqui a categoria ID ponto. Então eu vou ter, a entrada terá este ID, e então podemos dar como um rótulo não verificado, mas podemos dar nome de ponto categoria, por exemplo. Então, neste caso, teremos este nome de ponto categoria exibido como uma caixa de seleção. E aqui para, estava aqui para binários. Então precisamos mudá-lo para ID de categoria. Então, nesse caso, teremos aqui não ID de entrada como era antes binário. Será o ID da categoria. Então, os quatro, então quando você clicar no rótulo, ele será marcado ou desmarcado a caixa de seleção. Então aqui temos que dizer também, me dê o ID da categoria. Então, depois de salvarmos isso, vamos para o aplicativo e veremos se temos tudo de bom. Temos agora as categorias listadas como caixas de seleção. Então, desta forma, vamos criar nosso filtro, que veremos na próxima palestra. 150. Como filtrar produtos por categoria: Ok, agora nesta palestra vamos filtrar por categoria. Então, se eu for para a minha demo que eu já preparei, Eu quero mostrar-lhe como eu vou filtrar, como você vê aqui, quando eu clicar em Mais, enquanto eu vejo apenas móvel, mas quando eu clicar bem na beleza, então eu vou ter uma beleza e celular juntos. Então, neste caso, precisamos de algo como combinar todos esses IDs de categorias, e enviá-los para o back-end. E o backend responderá comigo com essas categorias IDs para esses produtos. Então, voltando ao nosso aplicativo, vamos implementar primeiro algo. Quando eu clico nesta caixa de seleção, algo vai acontecer. Então vamos fazer isso. Então, primeiro de tudo, vamos para o modelo e vamos ver que temos aqui caixa de seleção e temos aqui algum erro. Este é o modelo NG não é propriedade conhecida da caixa de seleção pico. Por quê? Porque precisamos importar também formas Módulo, fóruns módulo incluindo o, é claro, o modelo NG. Então temos aqui forma módulo. E, nesse caso, o erro desaparecerá. Certo, agora já temos essa multa. Então o que vamos fazer é mudar. Então, quando essa caixa de seleção mudar, ele afirma, então nós vamos filtrar. Então eu vou ter aqui um método que é chamado onchange. E ele está vindo como uma propriedade ou propriedade de saída desta caixa de seleção. Então vamos abaixar isso. Não precisamos mais dele assim para ter mais espaço. E agora eu vou dizer onchange, ok, filtro de categoria. Então temos aqui filtro de categoria. E eu vou definir este método. Então vamos para o arquivo TypeScript. E teremos aqui público ou diretamente método, que é chamado de filtro de categoria. E agora temos que consolar o registro como algo. Por exemplo, digamos filtro de categoria console.log, por exemplo. Para ter certeza de que tudo está funcionando bem. Então eu tenho aqui filtro de categoria. Eu vou para o meu aplicativo, abrir o console novamente e verificar se estamos tendo perfeito. Então temos filtro de categoria. Como você vê depois que eu adicionei o modelo NG, estamos vendo que todos eles são verificados. Um, eu tenho um cheque. Isso ocorre porque eu defini uma variável para qualquer modelo. Então isso, quando essa variável é verdadeira, todos eles vão passar, como todas essas caixas de seleção que são geradas neste loop MD4 estão seguindo essa variável. Precisamos de algo separado. Precisamos especificar isso para cada categoria. Então, para isso, eu preciso criar para cada categoria algum campo que é chamado de verificado. Então, se este campo está marcado ou não. Então podemos fazer isso também quando vamos para o modelo de categoria ou quando eu digo, por exemplo, categoria ponto verificado. Mas eu vou receber um erro aqui porque não há nenhum campo na categoria chamada marcada, então precisamos adicionar isso. Mas neste caso, vejo que estes verificados serão para todas as categorias verdadeiras ou falsas. Então, para explicar mais, vamos fazer isso. Então, primeiro de tudo, eu vou definir este cheque. Irei para os modelos que definimos anteriormente. Então temos aqui categoria e nessa categoria eu vou ter verificado. E será opcional com um valor booleano. Então, quando formos aqui, não teremos mais esse erro. E, em seguida, no rodapé da categoria, eu vou mostrar as categorias. Então, em geral, Então eu vou dizer aqui, console log esta terceira categorias. Então temos aqui para estas categorias de carga. Então eu não quero apenas ver que todas as categorias em cada clique da caixa de seleção que eu tenho aqui. Então vamos fechar isso também. E agora, quando eu clico em cheque, eu vejo que eles estão todos verificados porque eu não salvei. Estou sempre esquecendo de salvar. Então voltamos novamente para o aplicativo, ele é recarregado. Então, quando eu clicar no celular, por exemplo, eu vou aqui para este log do console e vou verificar mais enquanto e abri-lo. E eu vou ver checado através. Isto é muito bom. Mas aqui, se eu for para essa categoria que é chamada de beleza, eu não tenho esse campo totalmente marcado. E agora vamos remover tudo, vamos fechar esta parte ou remover o console e desmarcar o celular. Então, quando eu verificá-los quer enquanto e, em seguida, ir aqui, eu vou ver verificado é falso e os outros são, não tem nada. Então, dessa forma, eu não posso dizer que eu ou eu podemos filtrar com base em qual lista ou quais categorias são verificadas. E então eu posso obter suas idéias e, em seguida, enviá-lo para o back-end para obter os produtos filtrados. Então temos que traduzir este cão. Então, primeiro de tudo, eu preciso obter apenas as categorias filtradas ou selecionadas. Como posso fazer isso. Então vou filtrar a categoria. Vamos aqui, vou chamar novamente que obter produtos, mas com alguns filtros. Então, com idéias de categorias que eu quero passar para o back-end. Mas antes disso, vamos fazer, por exemplo, uma lista de IDs de categorias selecionadas. Então, podemos ter uma lista de IDs de categorias. Então, no filtro de categoria, eu vou ter uma constante. Por exemplo, eu chamo de categorias selecionadas, por exemplo. E nestas categorias selecionadas, serão estas categorias de pontos. Então você não percebe cada clique quando eu clicar no filtro Categoria, isso será executado. Então categorias selecionadas, eu vou filtrar, filtrar categorias. Então, como eu vou filtrar isso é matriz de filtragem ou nós estamos indo para filtrar a matriz. Então, nesse caso, ele irá filtrar e retornar para mim apenas as categorias que são verificadas, que sentiu campo verificado através. Então, como podemos fazer isso? Então eu vou dizer aqui filtro e este filtro, ele vai voltar para mim ou eu posso obter a partir dele categoria, Categoria um por um. E com o método seta diretamente, vou dizer retorno para mim categoria, que é verificado. Então, quando eles são categoria é marcada, em seguida, retorná-lo e, em seguida, colocá-lo em categorias selecionadas. Então, depois de fazer isso, vamos registrar o console as categorias selecionadas para ver se estamos realmente recebendo apenas as categorias selecionadas. Então vamos aqui, registro do console. Eu gosto de usar o registro do console. Também posso usar um depurador, mas gosto de log do console porque não consigo ver os resultados ao vivo na minha frente. Então, se você quiser, então você pode usar o depurador também. Então, mas agora temos aqui as categorias selecionadas. Vou agora clicar no celular. Ok? Só tenho o celular. Isso é muito bom. Então vamos limpar novamente, clique em beleza e computadores. Terei três itens verificados. Mas não consegui todas as categorias, o que é tão bom. E se você verificar aqui, você verá todos eles verificados através. E cada vez que eu clicar em cheque, Eu reduzi novamente as categorias. Então agora são dois. Tenho celulares e computadores verificados. Isso é muito bom. Então agora precisamos não só categorias selecionadas que você vê aqui, eu estou devolvendo todas as categorias. Quero devolver apenas o ID. Então, nesse caso, nós temos aqui, o filtro está retornando para mim matriz. Então, como você vê, estamos retornando matriz aqui. Então eu posso mapear através desta matriz e dar-lhe novamente como uma nova forma. Então eu vou dizer como novamente categoria, mas não categoria em si ou devolvido para mim, mas retornar para mim apenas a categoria e ID. Então, nesse caso, eu obteria apenas as categorias IDs em categorias selecionadas. Então vamos tentar de novo. Então eu vou aqui, móvel. Então eu tenho essa idéia de computadores de categoria móvel, ok, eu tenho duas identificações. House, bom, tenho três identidades. Então, nesse caso, estamos selecionando ou coletando as idéias de categorias selecionadas. Agora precisamos passá-los para a API e devolver os produtos que são atribuídos com essas categorias. E se formos para o carteiro, se você se lembra, estávamos passando para o backend as categorias como parâmetros de consulta. Então, quando eu enviar um pedido com para obter seus produtos foram e quando este pedido tem categorias ou categorias idéias, em seguida, ele vai filtrar para mim com base nos IDs que são passados nesse pedido. Então podemos fazer isso facilmente. Então eu posso ter aqui no homem, as categorias ou podemos ter sua chave, que é chamado de categorias. Se você se lembra, nós criamos isso. E os valores serão as categorias separadas por vírgula. Então podemos ter essas categorias também. Então podemos ir aqui, por exemplo, podemos pegar o primeiro e ir de novo para o carteiro. E podemos passar, por exemplo, vamos pegar um agora. Então eu vou ter os produtos, não todos eles. Terei apenas os produtos que têm esta categoria. Então, quando eu clicar, eu vou pegar, recebendo goodie dos telefones. Então eu vou ter produtos ou dois produtos que são telefones exatamente como nós tê-lo no front-end na demo. Então, se eu passar outra categoria, como por exemplo, se eu colocar vírgula e então vamos pegar a categoria de outra. Então podemos ir aqui novamente para o Carteiro e depois passar com uma vírgula, outra categoria. Então eu vou obter dois ou muitos produtos perfeitos com base em categorias selecionadas. Então, nesse caso, precisamos ajustar nosso serviço de produto para obter categorias também ou passadas através dele para o backend. Então, como podemos fazer isso no front-end. Então, após filtragem ou filtro de categoria, eu preciso obter os produtos novamente. Quero chamar isso novamente e, em seguida, atualizarei o próprio produto. Então, como podemos fazer isso? Primeiro, vamos remover esse log do console. E então eu vou dizer aqui que me chamar este produto ponto ou obter produtos, mas com categorias filtro ou categorias selecionadas. Então aqui nós já temos matriz de categorias selecionadas, matriz de IDs, e vamos passá-lo aqui. Então eu preciso adicionar também a este parâmetro método, que será categorias, por exemplo, categorias selecionadas, ou podemos chamá-lo categoria é filtro. Então podemos ter aqui categorias. Filtro. E esta categoria é filtro terá, por exemplo, opcional e será string, matriz de strings porque temos filtrado nossas categorias e estamos retornando apenas o ID, como você se lembra. Então agora temos o filtro de categorias. Precisamos agora passá-lo para o nosso serviço de produtos. Então precisamos ir para obter produtos e, em seguida, para este filtro e, em seguida, enviá-lo para o backend. Assim, o filtro de categorias é indefinido neste método. Então, precisamos ir para este método em nosso serviço de produto e ajustado para aceitar também obter o filtro de guloseimas. E este filtro de categorias será matriz de strings. Então, podemos tê-lo também opção para não destruir que bons produtos que criamos no aplicativo painel de administração. Então aqui nós temos isso opcional. Então, quando você passar algumas categorias, então, ok, ele lhe dará os produtos filtrados. Mas se você não passar nada, então ele vai lhe dar todo o produto. Assim, o tipo deste campo será string, e seria array de string. Então agora vamos passar esta solicitação HTTP. Como podemos fazer isso? Primeiro de tudo, precisamos definir, por exemplo, variável que é chamado de params. Aqui eu estou usando chumbo, não const porque eu vou mudá-lo nas próximas linhas de seu código. Então, este será um novo HTTP ou HTTPS pequenas letras params. Então isso é bombas vindo de Angular e aqueles que você pode chamá-los de biblioteca núcleo angular ou biblioteca HTTP. Então, esses parâmetros, vamos passá-los para o pedido deles, exatamente como fizemos com o Postman, como estou transportando aqui, consultar parâmetros. E no front-end, como podemos passar isso, estamos usando parâmetros HTTP. Aqui temos as palmas das mãos separadas por vírgula. Então precisamos fazer o mesmo também. Então vamos verificar se há filtro de categorias. Então, podemos dizer se categorias filtrar como temos categorias filtro passado para não destruir tão bem que eu lhe disse o aplicativo painel de administração. Então eu vou dizer que os params serão params dot a banda. Aqui você precisa acrescentar um parâmetro que é chamado de categorias. Exatamente como fizemos com um carteiro. Então aqui temos categorias. E então essas categorias serão o quê? Eles serão categorias filtro, que eu obtive do front-end ou do usuário, ou das caixas de seleção. Ele será contendo o ID de categorias, mas é array. Então precisamos juntar este array para ser um, como por exemplo, como este, para ser ID ou ID da categoria vírgula outro, vírgula outro. Então, é muito simples. Você pode juntar uma matriz de strings, dizendo que esta junção ponto matriz. E então você pode especificar o que você deseja juntar com base em vírgula, com base em ponto ou com base em aspas. Então você só tem que dizer vírgula. Então, nesse caso, essas categorias terão a forma disso. Então salvamos isso e salvamos também aqui. Então vamos verificar se estamos realmente fazendo as coisas certas. Então eu quero, por exemplo, para, por exemplo, log de console os parâmetros. Então podemos ter aqui o log de pontos do console, e então podemos passar os parâmetros. Então, e agora eu vou para a caixa de seleção do aplicativo, uma categoria, ok, eu tenho aqui atualizar um array param, e nós temos um padrão. Então, se você vai para aqui encontrar encoder, temos o param já está definido. Então, novamente, se eu clicar, eu vou obter também o patch HTTP. São limitados dentro de parâmetros HTTP, que serão enviados sobre sua solicitação. Vou mostrar-lhe como você pode ver o pedido é Br coisas ou prompts ou não. Mas, por enquanto, estamos indo no caminho certo. Então, com certeza que estamos passando as categorias ou o ID categorias para obter produtos e estamos passando para obter o serviço do produto. E este bom produto por serviço devolvido para mim, os produtos. Mas agora o pedido como você vê aqui. Então, se eu clicar em, por exemplo, aqui, eu clico se eu for para a rede novamente. Então vamos tentar de novo. Vamos limpar esta rede. Eu clico aqui, estou enviando como você se lembra, um pedido. Então eu não estou vendo nada. Você tem que ter certeza de que você não tem apenas um tipo. Você está filtrando por um tipo. Quero filtrar tudo para poder ver todos os pedidos. Então eu clico em Mais vinho, ok, eu chego a produtos como você vê aqui. E este pedido de produtos primeiro, que está passando pelo backend e não carregado com nenhum parâmetro. Portanto, precisamos carregar alguns parâmetros ou padrões de consulta para esta solicitação. Então aqui teremos um ponto de interrogação categorias, e então as categorias seriam separadas por vírgula. Bem, podemos fazer isso muito simplesmente quando voltarmos ao pedido GET. E então eu vou passar objeto. Não se lembre dos params diretamente, como você não pode dizer, ok, chefe para mim os params sabem disso ou não, trabalho de garfo para você. Você precisa passar objeto e este objeto, a única chave será chamada params. E então você passa a variável params, que criamos aqui. Então, vamos remover este log do console e voltar para o nosso aplicativo, recarregado. E então vamos, por exemplo, limpar este console limpar tudo. Vou ter mais bílis. Ok, eu tenho categorias. Como você vê nesse pedido. Eu tenho aqui categorias e sua contiguidade que eu selecionei. E também, se eu for aqui, beleza, temos outro pedido e procurá-lo. São categorias de produtos, certo, Nice. Temos aqui as categorias de produtos e eles são separados por vírgula. Então, nesse caso, agora o filtro está funcionando enviando para o backend algum pedido com parâmetros de consulta. E o back-end está me enviando de volta os produtos que estão sob essas categorias. Em cada clique, eu clico aqui, estou filtrando. Eu estou pedindo o backend, me envie de volta os produtos que estão tendo esta categoria. Então, neste caso, filtramos nossa página do produto. Então temos filtros de produtos. E na próxima palestra, eu quero mostrar a vocês quando eu clicar em uma dessas categorias na página inicial. E eu pulo aqui para a página de produtos. Mostrarei apenas os produtos que se encontram nessa categoria. Então não vamos ter, não vamos ser redirecionados para a página de produtos, mas vamos ficar bem usando o produto é componente, mas vamos exibir apenas a categoria que clicamos em sua primeira página. 151. Página de categoria: Ok, nesta palestra nós vamos ver o que se eu clicar em uma dessas categorias e então o que vai acontecer. Então, para mim, eu diria que talvez você, quando eu clicar em um deles, eu vou para a página de seus produtos também. E então eu vou mostrar apenas os produtos que estão sob essa categoria que eu cliquei. E, claro, podemos fazer coisa adicional para que possamos esconder esta barra lateral e também mostrar seus produtos. Então podemos fazer isso facilmente. Vou mostrar-lhe isso nesta palestra. Então, antes de tudo, precisamos especificar uma nova rota. Então, no módulo de produtos, se você se lembrar, temos algumas rotas múltiplas e uma dessas rotas também será quatro categorias. Então não podemos ter um novo caminho aqui também. Então podemos dizer, podemos chamá-lo de categoria. E esta categoria terá como parâmetro como vimos anteriormente, que temos ID de categoria também. Então, teremos o ID de categoria passado com esta categoria. Então, nesse caso, nós estamos indo bem para o componente lista de produtos. Mas no produto este componente, Eu vou verificar se eu estou recebendo meu clique de produtos que está vindo da navegação no topo ou da categoria na casa. Então, para isso, precisamos ir para o componente da lista de produtos. E então teremos a rota ativada. Por isso, precisamos também de subscrever a rota atual. Por isso, precisamos de saber em que rota estou, por exemplo, nos produtos ou na categoria. Então, neste caso, eu vou usar outro serviço que é chamado de seca ativada. Então podemos chamá-lo, chamar este serviço como rota, e então chamar rota ativada de Angular. E aqui estou eu indo na NDI sobre ele. Eu vou dizer, olha para mim, eles estão fora. Então aqui eu vou dizer isso, porém, truta, que eu chamei como um serviço, em seguida, params, em seguida, subscrever esses params e, em seguida, verificar quais biomas eu tenho. Então nós temos aqui params e então eu vou verificar e lidar com isso. Talvez se houver em seus parâmetros ID categoria. Conforme especificado na definição de rota , traga para mim os produtos usando esse ID de categoria, que é passado nesse URL. Então podemos fazer isso facilmente. Então eu vou dizer esta categoria de ponto ou bons produtos, exatamente como fizemos anteriormente. Então precisamos cancelar este ou removê-lo totalmente. Vamos removê-lo. Então eu não tenho nada aqui. Eu vou obter os produtos com base em sua categoria que é passada na URL. Mas não posso passá-lo diretamente. Eu não posso dizer params dot categoria ID. Porque estou passando para este método. Bom produto, estou passando matriz, matriz de cordas. Então precisamos colocar isso dentro da matriz, tão simples. Então você diria apenas matriz de parâmetros categoria ID. Então, será um ID de categoria, que dentro de um array, que será passado para obter produtos. E isso será como filtro de categoria. E então ele vai pegar os dados dos produtos da categoria. Então, nesse caso, vamos ter apenas os produtos que estão sob essas categorias, que eu cliquei. Então você sabe, isso está na linha. Se, então, se houver essa coisa ou essa variável, então faça isso. Caso contrário, basta obter produtos sem qualquer filtro, como obter todos os produtos como fizemos anteriormente. Então aqui nós dizemos este ponto, obter produtos sem qualquer filtro. Então, nesse caso, estou recebendo os produtos do backend com base nessa categoria. - Legal. Então vamos guardar isso e tentar isso. Então eu vou para a página inicial novamente para que possamos clicar em Início. Clique no celular. Certo, vemos que não está funcionando. Vamos checar nosso console. Vamos notar que acho que não temos essa rota até agora que definimos categoria de produtos e, em seguida, colocamos o ID da categoria. Então, para isso na página inicial, se você se lembra, nós colocamos ou em categorias banner, dissemos que, ok, eu quero ir primeiro dois produtos e então eu vou para a categoria. Então podemos definir isso como um filho desse caminho. Podemos definir a categoria vasta como um filho de caminho produtos. Ou você pode apenas ajustar as categorias Banner, como vimos aqui, para não ter roteador categoria produtos link, podemos ter diretamente essa categoria. Então, quando você clica em Salvar, então eu não tenho mais produtos. Então, quando clicarmos em Salvar, vá novamente para a nossa aplicação, vou clicar em um desses. Ok, eu ainda estou recebendo erro porque isso não está definido porque eu não salvei, novamente seu módulo de produtos. Está sempre a acontecer comigo. Então eu preciso salvar o módulo de produtos. Vou de novo aqui, móvel, legal. Eu tenho aqui dois produtos apenas e com esse ID. Mas quando eu vou para a página de produtos, eu estou recebendo todos os produtos. Mas quando eu clico em uma dessas categorias, eu recebo apenas as categorias que estão sob, Eu estou recebendo apenas os produtos, desculpe, que estão sob essa categoria. Mas eu ainda tenho aqui essa categoria barra lateral, o que não é legal, como caso contrário você precisa fazê-lo como verificado. Caso contrário, você pode ou outra solução que você pode, por exemplo, escondê-lo totalmente. Vamos fazer alguma coisa prática com o esconderijo. Torne este componente dinâmico para saber mais. Então, primeiro de tudo, eu vou primeiro não mostrar essa barra lateral totalmente. Então, nesse caso, temos na lista de produtos, precisamos também verificar se estou na página de categorias ou não. Então podemos definir outro membro da classe. Não podemos dizer que é categoria. Por exemplo, ordenar página. Então eu não posso dizer como um booleano, eu posso definir isso como um booleano. E então eu vou aqui para os parâmetros onde eu estava lendo os parâmetros da URL. Então eu tenho ID de categoria de parâmetro ou não. Não posso fazer o mesmo. Então podemos dizer ticker é ID de ponto estéril, em seguida, definir esta categoria ou cada página de categoria como true. Então eu estou realmente em sua página de categoria. Caso contrário, defina-o como falso. Então, ok, por que estou fazendo isso? Então eu vou usar essa variável no modelo. Então, aqui no modelo, quando eu vou para o modelo HTML, eu quero primeiro esconder suas categorias. Então eu vou dizer aqui para sua lista de categorias, que é caixas de seleção, que está na coluna 3 como nós definimos anteriormente. Então eu diria que ng-if é página de categoria. Então, se ele tem página agouti, em seguida, mostre-o. Mas não precisamos é página de categoria. Precisamos escondê-lo. Então, não vai para a página. Está bem. Eu fiz. Será falso porque não mostrará isso. Mas quando é uma página de categoria, em seguida, ele irá ocultar este componente. Então ele irá esconder esta coluna aqui, que contém as caixas de seleção para sua categoria. E aqui também, se salvarmos, vamos tentar isso. E vamos para a frente. Certo, temos aqui as categorias. Então nós temos aqui o produto, desculpe, então quando vamos para a página inicial, eu tenho aqui celular. Está bem. Eu tenho dois itens e quando eu vou para produtos ou eu vou ter a barra lateral com os produtos que eu tenho eles aqui. Então é exatamente o mesmo componente, mas está se comportando com base na rota que está aqui. Mas eu gostaria de mencionar também sobre o caso. E se tivermos mais de três produtos aqui na linha? Quero mostrar-te o que aconteceu. É um inseto. Então precisamos, por exemplo, ir para, por exemplo, dois computadores. Certo, temos três produtos. Vamos para o painel de administração e acessar nossos produtos novamente. E vamos fazer um produto para ser como um computador. Então eu vou aqui para o computador, Tom com isso mais selvagem e colocá-lo como uma categoria de computador. Atualize isso e vá novamente para o nosso aplicativo no front-end. Ok, e eu clico no computador. E como você vê isso, ok, eu tenho um produto extra aqui, mas é grafiado para baixo, como se eu tivesse 123 e então foi um macarrão. Porque aqui está vazio. E isso está acontecendo quando eu tenho esta coluna ainda está com nove colunas. Então vamos inspecionar isso. Então eu quero mostrar a vocês que definimos isso como nove colunas. Agora que a barra lateral da categoria está oculta, então é empurrado seu conteúdo para a esquerda. Então temos agora essa grade de conteúdo. Tem apenas nove colunas. Por isso, também precisamos torná-lo dinâmico. Então nós, nós terminamos, nós queremos torná-lo tão bem como 12. Então, quando eu clicar aqui ou eu vou aqui, eu vou ter isso como uma coluna 12, então ele vai estar totalmente na tela. Assim, podemos usar o mesmo valioso que definimos anteriormente para cada página de categoria. Mas eu vou usar classe diferente aqui. Em vez de nove colunas, vou usar 12 colunas. Então, como podemos fazer isso? Então você só diz aqui classe NG por isso, e você defini-lo como entrada para este div. E aqui você vai definir um objeto. E este objeto terá batido chamada nove quando eu estiver fora da página da categoria. Então, quando não é página de categoria, então é página de contiguidade não é. Caso contrário, você pode definir qualquer nova classe. Podemos chamá-lo. Será chamado 12. E quando é a página da categoria. Então salvamos isso e vemos que quando não for para a página serão nove. Então, como você vê aqui, não é contiguidade. É página de categoria, desculpe, e é 12. Então nós temos aqui, 12 colunas. Mas quando eu vou para produtos, todos os produtos, eu tenho como três colunas. Então nós temos como nove colunas. E aqui temos a coluna da barra lateral existir, por isso será como um nove. Então, nesse caso, eu também tenho definição dinâmica de classes aqui. Então eu posso jogar no modelo no mesmo componente com base no que eu vim. Então, quando eu vir desta página ou desta categoria, eu vou ter este. E quando eu venho de produtos como aqui em alegação fundamental, eu não tenho nenhum parâmetro aqui, nenhuma categoria. Então eu vou mostrar este aqui. Então, mas temos um pequeno problema aqui. Então, se eu for para computadores novamente, vemos que eles são um muito amplo, eu quero mantê-los, por exemplo, para na linha para que possamos usar a mesma coisa como fizemos com a classe ng aqui. Então, podemos colocar também é categoria, é página de categoria ou não. No, por exemplo, este onde estamos definindo a largura do item do produto. Então podemos também aqui remover esta classe ng-ou esta classe e dizer quando não é página de categoria, em seguida, torná-lo como por exemplo, o 3, como era antes ou quatro. Mas quando é página de categoria, em seguida, torná-lo como um três. Então teremos aqui quatro colunas, porque 12 dividido por 3 , será quatro. Então vamos salvar isso e atualizar para mim o aplicativo automaticamente. E veremos que teremos quatro produtos aqui. E quando eu vou, porque aqui estou no projeto Categoria ou caminho de categoria. Quando eu for para o produto, eu vou tê-los aqui como três também. Então você vê que você tem uma área dinâmica e dinâmica para jogar com seu componente usando de onde você está vindo. Então usamos o mesmo componente, que é muito bom ter que listar os produtos com base nisso. Então agora temos mais liberdade para o usuário se mover dentro do meu aplicativo. 152. Página de detalhes do produto: Ok, nesta palestra vamos ver como construir a página de detalhes do produto. Então vamos criar um componente que vamos nos referir a um produto específico, especialmente quando estou clicando em um dos produtos. Então eu vou aqui e eu vou ver o detalhe do produto em todos os detalhes. Então, primeiro de tudo, precisamos ter algum título e alguma descrição que teremos também. Eles estão avaliando. Ele virá de estrelas que estão indo para usar a partir do preço Prime NG. E podemos acrescentar uma oferta falsa. E também, vamos adicionar essa quantidade para que você possa selecionar quanto você quer comprar deste produto. E então vamos ter dois botões. E também, vamos ter a descrição que criamos como HTML no editor aqui. Então, ele será processado exatamente como nós temos aqui no front-end também. Vamos ver como renderizar o HTML, que é escrito no painel de administração, e ele estará no front-end também. Nós vamos criar uma galeria, então eu não vou usar algum componente pronto. Vamos aprender a construir uma galeria pela nossa mão. E com isso, que nos veremos na próxima palestra. E eu quero mostrar a vocês que construir a galeria IS ou construir um componente de interface do usuário em geral também é possível. Assim, você pode usá-lo em todos os lugares em seus aplicativos. Assim, podemos construir nossos próprios componentes como uma galeria e exemplo vol, classificação de estrelas ou, por exemplo, algum controle deslizante. Você pode construí-lo por conta própria e localizado em suas bibliotecas em seu projeto. Então vamos começar a construir esta parte aqui. E na próxima palestra vamos construir a galeria. Então, primeiro de tudo, vamos dar uma olhada aqui. Então precisamos de uma descrição do título, classificação e, em seguida, algum preço e quantidade. Então, primeiro de tudo, eu quero criar um componente que estará dentro da biblioteca Produtos, dentro das páginas. Portanto, temos uma página especialmente para detalhes do produto. Então eu vou clicar em Gerar e, em seguida, eu vou ter um componente aqui, e ele será localizado bem em páginas. E então podemos chamá-lo de página do produto ou detalhe do produto. Então, cabe a você. Então eu vou chamá-lo de página do produto. E a página do produto estará localizada nos produtos do projeto. E também, vamos usar as mesmas opções que estamos usando sempre. Então aqui temos seletor de prefixo, teremos aqui produtos. E, claro, será a página do produto. Claro que não vamos usar seletor porque vamos ler direto, diretamente o roteador para este componente. E vamos dizer “pule testes”. E então vamos gerar esse componente. Temos certeza de que está na biblioteca de produtos. Perfeito. Vamos aqui novamente e veremos que esta página ou página do produto é criado aqui. Então o que vamos fazer, nós vamos, quando eu clicar em algum produto aqui no meu front-end, então eu serei redirecionado para o detalhe do produto. Então, digamos, por exemplo, que clicamos na imagem. Então, se você se lembrar, criamos item, produto, item. Este item de produto, ele tem imagem, e nós vamos colocar o link sobre a imagem. Então, quando eu clicar na imagem, então ele vai me redirecionar para os detalhes do produto. Então temos aqui o roteador. Então, qual Roteador? Vamos usar o link do roteador. E então eu vou usar o produto em si. Então vamos ter aqui algum código como o próprio produto, ID do produto. Mas antes disso podemos dizer, por exemplo, que eu quero os produtos. Como se pudéssemos colocá-lo dentro de uma corda para que possamos colocar produtos de corte. Então me leve para a página de produtos deles. E depois disso, adicione para mim o ID, o ID do produto. Então eu vou ter aqui ID do ponto do produto. Então, o produto de entrada para o item do produto, eu vou obter seu ID e cortá-lo com seus produtos. Então vamos e criar esta rota no módulo do produto. Então, no módulo de produto, criamos anteriormente categoria de produto e vamos criar outro caminho que é chamado de produtos e, em seguida, o ID do produto. Então temos aqui ID do produto. Então, nesse caso, cada ID virá após a página do produto. Ele será renderizado para um componente de página de produto, não lista de produtos, mas componente de página de produto. Então, criamos este componente de página de produto para esse objetivo. Então vamos testar isso. Então, como você vê aqui nós temos aqui toda a aplicação. Quando eu clico na imagem, eu recebo trabalhos de página do produto. Então isso é exatamente o que queremos e temos aqui o ID de seu produto. Então vamos novamente para o nosso código e vamos modelar este produto ou esta página de produto. Então vamos até aqui e fechar todas as outras páginas. Nós vamos ficar aqui. E, a propósito, vamos criar um arquivo de estilo. Então, se você se lembra, nós temos o público Styles em suas vidas. Produto que podemos criar também aqui, algum arquivo para a página de produtos. Então vamos dar-lhe uma página de produto nome, SCSS. E, em seguida, nos produtos, eu quero importá-lo também, exatamente como fazemos sempre. Então temos duas páginas do produto, SCSS, então cada estilo que vou escrever aqui, aqui, ele será importado para o meu aplicativo e o aplicativo pode vê-lo. Então, em primeiro lugar, vamos ter uma grade como sempre. Então podemos envolver essa grade primeiro em um produto. Podemos chamá-lo de página do produto. Então temos aqui a página do produto. No interior desta página do produto, eu vou ter uma grade, então div, grade p. E dentro desta grade, terei duas colunas. O primeiro será seis e o outro será também seis. Então temos colunas iguais. Então nós temos aqui P chamado procura, e nós vamos ter outro que é bem ser chamado de seis. Então agora temos a grade aqui. Nós estamos indo para localizar como algum componente galeria UI e vamos localizar isso mais tarde. Por isso vou comentar isto. E estamos colocando aqui os detalhes do produto. Então, primeiro de tudo, eu vou ter, por exemplo, nós podemos colocar aqui uma aula. Podemos dar-lhe, chamar-lhe produto. E este produto vamos colocar seus detalhes. Então, em primeiro lugar, eu quero o título do produto, que será vindo de um nome de produto. Então vamos ver mais tarde como vamos obter o seu produto. Então, para isso, precisamos ter um valioso no arquivo TypeScript para obter os detalhes do produto, se você se lembrar. Então criamos esse serviço e vamos pegá-lo novamente e usá-lo aqui. Então nós temos aqui o nome do ponto do produto, e então nós vamos ter a descrição do produto. Então eu vou colocá-lo dentro do parágrafo e dar-lhe uma classe, por exemplo, produto. E será descrição, por exemplo, disco. E então vamos colocar a descrição do produto. Então aqui vamos chamar todas as informações sobre o produto. Então e bem, nós temos que ir para ir para uma classificação e outros componentes. Mas vamos primeiro importar o produto para que possamos trazer o produto do back-end e então podemos usá-lo aqui. Então, primeiro de tudo, eu estou indo para a página do produto. Vou ligar para esse serviço de produtos. Então temos aqui um serviço orgulhoso novamente. Então temos serviço de produto, que estará aqui. E nós estamos indo também para usar um roteador porque nós vamos obter o ID da URL. Então temos aqui também, privado e rota. E eu vou ter ativado a rota, que eu peguei, a partir da URL. Vou pegar os dados da URL. Então vamos dizer aqui, esta rota de ponto, e então me dê os parâmetros, que estão vindo do back-end ou através da URL. E esses parâmetros vamos assiná-los porque toda vez que mudamos o ID, precisamos assinar e pegar o que o ID está mudando para ver o produto certo. Então podemos dizer aqui params, temos os fundos também na assinatura. E então vamos usar esses parâmetros para usá-lo no serviço de produtos. Então vamos ter aqui este ponto. Ou vamos fazer como se primeiro params ponto ID do produto. Como se tivermos um parâmetro que é chamado de ID do produto, então vamos usar este serviço ponto-produto. Tudo o que podemos dizer em função separada, obter o produto em geral gosta de organizar apenas o nosso código para ser mais agradável e podemos passar o ID do produto aqui. Então, depois disso, vamos para outra linha e abrimos um novo método. Nós chamamos isso também obter produto. Então, como você vê aqui, nós obtemos o produto e este produto receberá o ID do produto. Então podemos dizer ID, será uma string. E então vamos usar este serviço ponto-produto e, em seguida, chegar ao produto. E obter o produto, se você se lembrar que ele está pedindo o ID do produto. Então eu vou dar o ID do produto e, em seguida, eu vou assiná-lo, e então eu vou obter um produto de resposta. Por exemplo, aqui podemos dar-lhe este nome e este produto de resposta. Eu vou usá-lo para atribuí-lo a um membro da classe, que será chamado de produto e tem um tipo. Produto. Então vamos definir um membro da classe. Chamamos-lhe produto. E isso terá classe que é o tipo de produto. E vamos novamente aqui e dizemos este produto ponto. Será o produto de resposta. Então é isso. Então, neste caso, estamos recebendo o produto do backend. Vimos anteriormente como criamos isso no aplicativo do painel de administração. Então lembre-se sempre de terminar a assinatura. Então, se você se lembra, eu estou sempre dizendo que estes levam até, e nós vamos dizer estes subs finais, como duas extremidades e assinatura e n subs serão um assunto. Então podemos defini-la aqui também. E será sujeito e digite qualquer. E o assunto será igual a um novo assunto, que está vindo também de nossos x js. E então precisamos chamar OnDestroy. Então nós temos aqui na classe, nós precisamos implementar também neste Troy. E precisamos, então ele vai nos dar erro que não estamos implementando o método NG em destruir. Então você também precisa chamar esse método. Então, quando este componente é destruído, estes pontos n subs, desculpe, este ponto. E desculpe, eu preciso colocar aqui os suportes e, em seguida, este ponto n subs, em seguida, o próximo. E então isso acaba com o completo. Então, nesse caso, quando isso terminar ajuda a concluir, quando o componente for destruído, essa assinatura será concluída e não teremos vazamento de memória. Perfeito, Agora temos que um produto. Aqui. Temos tudo o que vamos verificar. Como se nós temos um produto, em seguida, exibir para mim os detalhes do produto para não ter quaisquer problemas. Então aqui vamos ter o produto ng-if. Então, se eu tiver o produto, então exiba as informações do produto para mim. Então vamos guardar isso e ir para aquele front-end. Veremos que temos o produto que clicamos. Então, se eu for para outro produto, eu veria que eu tenho este produto também. Então vamos continuar e estilizar as coisas exatamente como fizemos em sua demo. Então eu estou indo aqui, como você vê, eu vou adicionar agora a classificação, a classificação, eu gosto de usar algo que está vindo da energia Prime. Então você pode procurar por ele. Chama-se componente de taxa. E, como você vê, tem muitos usos. Para mim, vou usar o deficiente. Então, primeiro de tudo, precisamos importar o módulo como fazemos sempre com cada UI ou cada componente z primo. Então eu quero o módulo de classificação e, em seguida, eu vou importá-lo para os meus módulos. Então não podemos colocar aqui módulos, módulo de classificação, e então vamos descobrir qual deles é bom para nós. Então vamos cair exemplo, obter o que é chamado NÃO cancelar este e, em seguida, podemos desativá-lo. Então, se formos para a fonte aqui, você pode ver todos esses exemplos. Então, vamos pegar este. Por exemplo, podemos dizer classificação, modelo e essa coisa. Então vamos novamente para a nossa página do produto, e depois disso abrimos uma div e podemos dar-lhe um nome que chamamos como classificação do produto. E então colocamos este componente aqui. Assim, a classificação que está vindo do backend será a classificação de pontos do produto. Então, podemos ter aqui a classificação de pontos do produto, e então vamos usá-lo. Então, primeiro, não precisamos cancelar. Precisamos de ter os deficientes. Então, se você se lembra, nós desativamos e então nós colocamos isso para verdade como eu sei que há isso desabilitado porque eu verifiquei a documentação. Então, se você for aqui, você verá esse exemplo desabilitado e não desabilitado. Ele gostava de algo como deficiente. Ele definiu isso para que possamos fazer o mesmo. Assim, o número de estrelas padrão será cinco. Então, não há problema aqui, somos capazes de continuar. Então vamos levar isso em nossa aplicação. Então vamos novamente para a nossa página ou produto. Legal, temos aqui. Eles estão comendo. Vamos remover este. Vamos ver como podemos removê-lo. Então temos aqui cancelar falso. Então podemos dar cancelamentos. Nós colocamos de volta. Por isso, coloquei aqui formulários do Conselho e verifiquei novamente o pedido. Perfeito. Nós temos isso assim. E agora vamos adicionar outras coisas, que é o preço do produto. Então vamos adicionar o preço. Então eu vou ter aqui também ao vivo, que é chamado de preço do produto. E este preço do produto conterá o seguinte. Primeiro, vamos ter o produto e que será como com uma moeda. Então vamos ter aqui produto. Preço Dot. E nós vamos ter este cachimbo, que é chamado de moeda. Então vamos exibir o produto como um dinheiro. Então, no caminho da moeda. E então teremos outro espaço para fazer como uma oferta. Então podemos ter aula e dizer preço antes. Podemos chamar-lhe o preço antes. E isso podemos, por exemplo, torná-lo imaginado. Por exemplo, podemos dizer produto de preço mais 18 e será também moeda. Então, cada produto virá com um preço como este, preço original e mais 18, que será deixado assim. E nós podemos, depois disso, nós vamos estilizá-lo para que possamos fazer este grande e nós podemos fazer isso como uma linha através para que ele possa ser descartado como este é um preço antes. E agora vamos ter a quantidade. Então, a quantidade, como você se lembra, nós a temos aqui. Então, temos uma entrada de número em prime end. Vou usar este número de entrada. E como vê, temos aqui. Então também é uma boa maneira de usá-lo. Precisamos importar esse módulo numérico. Vou para o módulo do produto, importar esse módulo de número e, em seguida, usar este módulo de número de entrada em meus módulos. E então podemos verificar este componente como ele parecia. Então este que é chamado de limites médios MAX, vamos e verificamos. E nós temos este, que será como com um botão para que possamos copiar toda esta linha. E então vamos aqui para a página do produto e podemos dizer produto div dot. Podemos dar como uma quantidade. Podemos dar essa aula. E então estamos colocando esses números de entrada aqui. E também aqui vamos não ter algo número. Nós vamos ter variável quantidade. E esta variável quantidade, devemos defini-lo como membro da classe para ler o valor a partir dele. E então vamos usá-lo para adicionar o produto ao carrinho com uma quantidade específica que é adicionado aqui. Então aqui será este UML certeza, botões. Podemos dar aqui nome, quantidade e máximo Min. E nós vamos ter aqui também quantidade, letra maiúscula. E então estamos colocando isso para ser uma quantidade. Então, quando eu clicar no rótulo, eu vou estar focado automaticamente neste. Então, quando eu clicar aqui, eu estarei focado na importação também. Então aqui funciona bem. Claro que precisamos de mais estilo como veremos mais tarde. Então a última coisa que vamos adicionar são os botões. E vamos ter aqui outra div. Então nós temos aqui div, e nós chamamos isso como produtos. Ações. E essas ações, teremos dois botões. Primeiro botão será quatro até agora, eo segundo botão será quatro Para Carrinho e Adicionar ao Carrinho, Eu vou chamar método que é chamado produto anúncio para carrinho. Portanto, precisamos implementar também o método aqui. Portanto, temos um outro método no produto para o carrinho e nós o temos vazio por enquanto. Não vamos implementá-lo. Agora. Vamos implementá-lo quando tivermos um carrinho. Então aqui temos usado o botão, que está vindo também da extremidade prime. Então eu usei o módulo de botão, que nós chamamos anteriormente para outros fins. Então temos agora aqui o rótulo do botão e todos são usados também, o arredondado. Então, se você for aqui para os botões, temos aqui vários botões. Então temos aqui também, arredondado. Então você não precisa estilizá-lo e fazer alguns arredondamentos. Você pode usar isso diretamente. Então, se você for para a fonte, você verá este botão arredondado aqui. Então usei exatamente este. Então também, eu coloquei aqui o botão para Adicionar ao carrinho. Então vamos verificar isso no aplicativo, ok, nós temos dois botões. Tudo está funcionando bem e eu aperto este botão e ele lidou com o irmão porque você lembra que estamos usando esses óculos para empurrar coisas um do outro, como Bim NG, margem, certo? Dois, então ele vai empurrá-lo da direita. Agora vamos estilizar isso. Então criamos um arquivo de estilo. Então eu vou estilizá-lo rapidamente. Temos, em primeiro lugar, precisamos ter a classe da página do produto ou a classe do produto. Então nós temos aqui esse produto, como você vê em nossa página de produto. Se abrirmos de novo, temos aqui o produto. Então precisamos ter o nome do produto, a descrição do produto. Esqueci-me de dar aula aqui. Então podemos ouvir dar um nome também. Então vamos para a descrição do nome do produto, classificações, quantidade de prêmios, etc. Então vamos estilizar tudo isso. Então primeiro vamos começar com o nome. Então esse nome será como Nós não podemos dar-lhe tamanho da fonte será como dois EM como nós podemos torná-lo tamanho duplo, ele será grande. E então vamos ter a descrição. A descrição será tão bem como o tamanho da fonte será como 1.4 EM. E também, estamos tendo sua classificação. Então eles estão classificação vai estar na forma como eles, nós empurrá-lo de cima e para baixo. Então podemos dizer margem 15 pixel 0. Então, de cima e para baixo, dê-lhe mod 15 pixels de cima e para baixo. E então vamos ter o preço. Então, primeiro, o preço será assim. Então temos preço do produto, já temos a classe, tamanho da fonte. Nós damos, por exemplo, 1, ferramenta EM, bem como, e font-weight, podemos torná-lo em negrito. Então, podemos dar-lhe como 600 botão de borda de peso de fonte para todo o recipiente do preço. Assim, podemos ter uma linha sob ele para separar dos botões de ação, assim por diante e a quantidade. Então, podemos ter botão Borda, damos-lhe um pixel e sólido. E então podemos dar uma variável. E esta variável terá uma fase de esgoto, que as cores que eu estou escolhendo do Prime NG 300, que será um cinza. E, em seguida, ensacamento, vamos ser dar algum preenchimento 25 pixels de cima e para baixo para empurrar o conteúdo para longe dele. Então vamos salvar e ver o que está acontecendo e o que está acontecendo aqui. Então eu vou para a página, Ok, eu tenho aqui o título, a descrição, eu tenho aqui, a classificação. E vamos estilizar esta parte. Então aqui nós temos, se você se lembra, definiu uma classe e esta classe, que estava aqui por preço antes. Então eu vou estilizar essa também. Então, dentro do preço, nós vamos ter o preço da classe antes. Será o tamanho da fonte. Nós damos como um EM, como se fosse menor um pouco. E, em seguida, margin-esquerda, por exemplo, para empurrar o conteúdo um pouco da esquerda, podemos dar-lhe 10 pixels para não ficar preso um ao outro. E podemos dar um peso de fonte será como um 100 para torná-lo mais leve. E podemos dar uma cor mais clara. Podemos dizer var, como Claro, fase. Será como cinza, acinzentado. Então, em breve, a fase 500 é boa. E então, por exemplo, decoração de texto gosta de ter como dizer linha através. Então, podemos dar linha através deste como o preço anterior. Então podemos verificar se está funcionando bem. Você vê, nós temos agora uma linha através e nós temos o preço do produto. Eu diria que vamos torná-lo um pouco maior. Por exemplo, aqui podemos ter, o preço pode ser 1,4 e podemos verificá-lo novamente. Vamos ver, ok, temos preço mais fraco e, em seguida, temos o tamanho da fonte para isso não está tendo qualquer efeito se eu sei por que, porque aqui temos 1 para EM, ok, Quando eu coloco aqui também E M 1 M, então isso significa que ele será o tamanho do pai. Então aqui eu posso dizer que as patentes são, ou o tamanho ou o tamanho da fonte desta classe será um EM, exatamente o mesmo desse tamanho. Então, quando eu colocá-lo como 0 ou 0, por exemplo sete, então ele vai ficar menor. Então, porque EM é como dizer que está relacionado, está relacionado com os pais deles. Então, quando eu digo relacionado, então será do mesmo tamanho se eu colocá-lo um EM, o mesmo tamanho de sua patente. Então, nesse caso, vamos torná-lo menor e colocamos 0,7. Então, se eu fizer este maior, como se eu colocá-lo para, por exemplo, isso também, nós ficamos maiores, mas com porcentagem que é menor que o pai, porque eu tenho aqui também, 0,7. Então estas são as unidades EM, como elas estão funcionando. Então agora temos tudo. Agora vamos estilizar essa quantidade. Então, primeiro de tudo, é empurrado um pouco para a direita e para a esquerda porque temos aqui com a classe deles, se você se lembra, temos algo como uma chamada P 12 PM D3. Então, podemos dar a esta classe, e esta classe é, estão vindo por padrão com preenchimento. Podemos dar também, cama 0. Então vamos inicializar isso para ser preenchimento 0 e, em seguida, ele seria empurrado exatamente. Então agora vamos ter a quantidade também. Então eu vou ter essa aula. Então temos aqui depois do preço, abrimos uma nova etiqueta e dizemos que a quantidade, damos de novo, como margem superior ou margem direita e para baixo. Então podemos ter margem 25 pixel e 0. E então podemos dar o rótulo que está dentro desta fonte maior, tamanho de fonte maior. Então, podemos dizer aqui para o rótulo terá algo sólido rótulo está errado. O rótulo teria tamanho da fonte, que será para o exame 1.2 M. Então não podemos dizer tão bem aqui 1 para EM. Então vamos ver que ficou maior exatamente como queríamos. Mas como você vê, eu quero essa laranja, como meus botões, eu tenho em todos os lugares botões com laranja. Então podemos ter também isso, para que possamos substituir os botões aqui, que estão vindo do Prime NG. Então, se você inspecionar este botão, você verá que é um botão normal. E este botão normal tem uma classe que é chamado botão PI. Então vamos rolar até detectarmos a cor. Então, se vamos mais para baixo, vamos ver o botão e ele tem esta cor, para que possamos mudar este fundo. Então vamos pegar essa aula. Este é o benefício de ter estilos públicos. Caso contrário, não poderemos alterá-lo facilmente dentro do componente. Porque se este componente de brilho, então não seremos capazes de mudar isso. Então nós dizemos, como a cor de fundo deste botão será a cor primária, que eu defini minha cor primária. E, em seguida, a fronteira será 0 para não ter essas bordas azuis. E agora será, eu acho, laranja como você vê aqui. Então é muito bom. Agora vamos estilizar também esses botões é muito simples. Nós estamos apenas tendo aqui, não quantidade, mas nós definimos uma classe que é chamado de ações. Então eu posso ir aqui e definir ações. E dentro desta ações temos também botão PI. Podemos copiar a mesma coisa aqui. Assim, podemos ter também a cor de fundo para ser laranja deste botão. Então não tenho certeza se tenho o nome certo da turma. Então podemos ter aqui quantidade. E aqui estão uma espécie de ação não é ações. Então eu tenho que colocar S. E agora vai ser, eu acho laranja como você vê aqui. - Legal. Então tudo o que temos agora tudo que eu acabei de perder uma coisa, que é a descrição do produto. Então vamos ter uma nova grade. Então, uma nova grade no mesmo nível. Então, porque ele está recebendo todo o espaço sob a galeria de produtos e a página do produto. Então, nossa falta total de detalhes. Então temos aqui outra grade de pico e, em seguida, vamos dar uma div ser chamado e então 12, como se fosse enganado. E dentro desta div, eu vou pegar os dados dos dados HTML que estão vindo para o produto. Se você se lembrar, temos aqui no admin definir este e ele está vindo ou salvo no banco de dados como HTML. Então, como podemos agarrar isso? Então, porque se eu for aqui e eu digo, ok, imprima para mim produto que alcance descrição porque nós armazenamos na descrição de alcance como você se lembra. Então aqui eu vou ver que eu vou obter código HTML, o que é horrível. Então precisamos fazer algo para isso. Então a maneira mais fácil de fazer isso é definir uma div. E esta div, você pode usar algum DAG, que está vindo com Angular chamado HTML interno. E dentro deste HTML interno, a entrada, você pode dizer me dar produto ponto alcance descrição dessa maneira. Então, todo o conteúdo deste div será processado como HTML como você vê aqui. Então precisamos de um pouco mais de estilo porque é substituído pelos estilos de NG principal ou da minha aplicação. Então, podemos dar, por exemplo aqui, Eu também gosto de algo como produto e alcance descrição, por exemplo. Então, e nós vamos usar essa classe também para que possamos ouvir suas ações. E nós vamos ter aqui fora porque não está dentro do produto. Então, vamos tê-lo aqui fora. Vou ter o produto e depois chegar à descrição. E então eu vou ter a altura da linha, por exemplo, será 1.6. Então, nesse caso, eu vou ter como alguns espaços entre todos esses itens. Então vamos salvar também o HTML porque eu não o salvei. Então vamos ver que temos como um pouco mais bonito linha de altura aqui. Então, dessa forma, temos a descrição da descrição detalhada do produto. Agora o que nos falta é uma galeria. Vou para a próxima palestra, criar um componente para a galeria. E então nós vamos pegar os dados aqui e colocá-los ou as imagens e colocá-los dentro daquela galeria. Mas antes de sairmos, vejo que temos um erro no console. Então, se você ver essa descrição de leitura de indefinido, então eu quero mencionar que é por isso que eu disse que você tem que colocar o produto ng-if. Então, se houver um produto, então vamos exibir esse produto. Então eu prefiro mover este para o topo, como a div de contêiner deles como se tudo isso fosse contido aqui. Então, se houver um produto, exibi-lo. Se não, então não faça nada. Então, nesse caso, você não está recebendo esse erro aqui. Então isso é tudo sobre o produto. Como eu disse, vamos criar a galeria na próxima palestra. 153. Componente de imagem da galeria de produtos: Ok, Agora vamos continuar com a nossa página do produto e vamos implementar a galeria, as imagens da galeria do produto. Então, se você se lembrar que temos vindo anteriormente com o pedido de bala Act com todas as imagens, que é chamado de campo de imagens. E temos a imagem principal onde estamos exibindo o produto em si como você vê aqui. E também aquela imagem da galeria onde o ou as imagens, onde as imagens de sua galeria são armazenadas. Então, se você quiser trabalhar neste componente, vamos não usar algo do Prime NG. Claro Prime NG também fornecendo alguma artilharia, como por exemplo aqui, este, se você verificar, É chamado gonorréia e tem uma documentação muito agradável e você pode adicionar imagens e removê-los dinamicamente. Mas eu vou usar nesta palestra meu próprio componente, porque eu quero mostrar-lhe como criar componente UI bem e usá-los dentro de sua aplicação. Então, primeiro de tudo, vamos criar esse componente de galeria em sua biblioteca de olhos. Se você se lembrar, se formos para elipse, temos uma biblioteca de interface do usuário onde colocamos nossos componentes de banner. Então vamos criar um novo componente, que é chamado galeria. Vamos chamá-lo de galeria de IU. Então, primeiro, eu vou gerar um novo usuário componente usando este console NX. E então vamos chamá-lo dentro da pasta de componentes. Vou dar-lhe um nome que se chama galeria. Então será como imagens de galeria. O projeto será UI. E a mesma coisa para todas as outras opções que usamos usando aqui. Então é por isso que eu te disse no início do curso, apenas seja paciente. Você saberá tudo, por que está acontecendo, por que estamos verificando essas caixas de seleção. Então agora você conhece todos eles. Então, o seletor será Galeria, como, assim. E porque está começando com o nome da biblioteca, como dissemos, eles estão todos no ES ligados. Então agora vamos criar este componente e executá-lo. Ok, o componente deles foi criado. Vamos verificar. Vamos ver que temos galeria aqui e também é colocado em seu módulo e também, Ele está usando isso. Também é exportado. Ok, agora vamos seguir em frente. Como você vê na minha demo que eu já preparei, Eu tenho a imagem principal e, em seguida, duas imagens, e eu estou clicando sobre elas e esta imagem está mudando. Então precisamos de algo como div, main, div onde eu estou exibindo a imagem principal e aqui como uma lista onde eu vou exibir várias imagens. Então vamos lá, fazer o trabalho da galeria, e então vamos implementar isso. Mas primeiro, vamos chamá-lo em nosso componente. Então, se você se lembra, temos espaço vazio aqui. Então vamos chamar esta galeria dentro de nossos produtos. Então vamos para esse produto e páginas, página do produto. E se você se lembra, eu comentei aqui, a galeria de IU. Então aqui você, eu galeria, vamos chamá-lo. E vemos que ele ainda está dando erro porque não estamos usando o módulo de interface do usuário aqui. Então vamos usar o módulo de interface do usuário aqui. Módulo para onde vou exportado ou importado. Ele será importado da biblioteca de interface do usuário. Então vamos ter importação. E, em seguida, seu módulo de olho de. E então eu vou colocar o nome da organização, seguida, dizer que você, i. E neste caso, eu vou ver que o meu produto aqui ou UI Gallery, o erro este aplicativo ainda. Então vamos salvar tudo e verificar se o nosso componente é colocado lá. Então, vamos aqui. Certo, a galeria funciona. Então vamos preencher esta área. Então vamos para o componente da galeria. Como eu me lembrei ou como eu disse anteriormente, você pressiona Control P e, em seguida, você pode saltar para qualquer componente que você deseja digitando o nome do componente. Então eu tenho aqui componente galeria, bom, eu estou aqui. Então é melhor não procurar aqui. Agora temos galerias de trabalho. Então vamos agora criar o modelo. Ok, para isso, eu vou criar uma div e dar-lhe uma galeria de nomes. E esta galeria irá conter imagem em destaque, por exemplo, ou imagem principal do como temos no topo. Para que dv esteja dentro dele, uma imagem, e esta imagem terá uma fonte que será a imagem selecionada na qual estou clicando. E também as outras imagens estarão sob ele, como podemos ter aqui div. E podemos chamar-lhe imagens. E essas imagens, como eu disse, uma ferramenta B lista para que eu possa usar. A UL e o LI. Então, nesse caso, eu posso dizer UL e LI e dentro que depois de pressionar tab, se você ver que estamos usando Emmet, então é auto completar meu código HTML. E aqui eu não vou usar para colocar imagem assim, como aqui, imagem alguma coisa. Eu quero mostrar-lhe uma maneira diferente de colocar a imagem como um fundo. Então, podemos colocar um fundo estilo da imagem e, em seguida, ele será exibido como a imagem este LI. Mas agora vamos colocar como algo só para ter certeza de que tudo está funcionando. Podemos dizer imagem. E aqui temos uma fonte e podemos, por exemplo, chamar, chamamos de imagem selecionada. E esta será uma variável. Então vamos ter isso como entrada. Então, precisamos definir a variável ou esta classe membro selecionado imagem dentro do arquivo ts. Então eu posso ir aqui e definir um membro da classe e chamá-lo de imagem selecionada, e será uma string. Então aqui vamos usar isso. Vamos salvar tudo para ver se estamos indo bem, assim que temos agora que não estamos fazendo nenhum erro, Então não temos problemas em seu código. E temos que ver aqui, Ok imagem, mas eu não tenho imagem principal. Então vamos fazer uma imagem estática. Então eu vou passar aqui através do arquivo ts novamente e dar isso como algumas imagens. Imagem. Por exemplo, vou para a pasta Ativos do meu aplicativo e, em seguida, chamarei uma imagem. Claro, você pode chamar qualquer imagem no Google. Então, por exemplo, eu vou colocar URL de alguma imagem aqui. Por exemplo, eu estou procurando por imagens é chamado produto. Eu vou para esta imagem, por exemplo, e eu vou dizer copiar o endereço da imagem. Então, se eu for aqui e colocar a imagem, tudo bem, eu tenho o endereço da imagem aqui. Então vamos lá e colocá-lo em nossa imagem selecionada valiosa. Então aqui nós selecionamos imagem, e então nós vamos ter a imagem selecionada, eu acho, em nossa aplicação. Então, depois de salvarmos isso, vamos para a nossa aplicação, veremos que esta imagem é colocada aqui. Então, se você sabe que nós fonte de entrada quando você está usando como entrada, então você terá fonte repentina como entrada, que está vindo de variável, que é definido no arquivo ts. Caso contrário, será apenas uma string e não lhe dará qualquer entrada aqui. Então é melhor sempre ou não melhor. Você tem que colocá-lo como neste colchete para dizer que isso é entrada e eu vou usar valioso, que é definido no arquivo ts componente galeria aqui. Então, depois de salvarmos isso, temos certeza de que estamos recebendo a imagem. Agora vamos receber as imagens, lista das imagens, como posso receber uma lista de imagens. Então, se você se lembra, nós trabalhamos com as entradas. Então esta galeria, eu acho que teremos uma entrada que é removida. Esta parte aqui. Dizemos aqui, nada, apenas deixe-o vazio. E se você se lembra, eu falei sobre as entradas. Então entrada é algo onde eu vou definir entrada para este componente. Então este componente vai aceitar essa entrada e usá-lo para renderizar-se no modelo. Então podemos dizer imagens. Podemos dizer que é uma matriz de cordas. Podemos ter uma série de parceiros, como se não tivéssemos apenas um caminho. Teremos várias imagens, várias partes. Por quê? Porque eu quero exibir esta parte aqui, lista das imagens. Então vamos usar essas imagens aqui. Então, depois disso, nós vamos nesse LI, eu disse que vamos usar uma maneira diferente. Então, aqui vou dizer, vou dar como MD4. Então temos aqui NG quatro. Então deixe imagem como uma imagem de imagens, as imagens que uma é a entrada que eu já defini. Então agora, depois disso, vamos dizer que podemos dar a imagem como estilo nervoso. Como eu disse, esta é uma maneira diferente de dar a imagem. Então vou te dizer por que estou fazendo isso. É só para o tamanho. Então eu quero manter tamanhos fixos para que todas as imagens sejam iguais. Então eu estou colocando-os como uma cor de fundo ou uma imagem de fundo. Então aqui podemos ter imagem de fundo. Então você pode definir como aquela imagem de fundo. E, em seguida, esta imagem de fundo terá URL como este. Porque você sabe, em CSS, Eu estou dizendo a imagem, imagem fundo como URL. Então, nesse caso, temos aqui URL. E então eu vou colocar outra citação dupla e mais, mais. E no meio dessa aula, eu colocaria a imagem que obtive das imagens. Então, para cada loop, eu vou ter uma imagem e colocá-la aqui para que a URL seja substituída ou colocada aqui dentro desta URL de imagem de fundo. Então, nesse caso, teremos nossa imagem. Mas é claro. Ainda precisamos de estilo. Então vamos estilizar isso primeiro para que possamos ver ou o que está acontecendo. Então, primeiro, como vê aqui, não temos nada. Então, podemos ter aqui também salvo para não ter erro. Então salvamos tudo. Novamente, não temos nada. Então agora vamos usar este componente, este um u i galeria para colocá-lo onde na página do produto, na página do produto e dar esta entrada de galeria, que é chamado de imagens. E essas imagens serão as imagens do produto. Mas primeiro, vamos fazer isso. Então eu quero mostrar a vocês que este pedido, como veio do back-end. Então eu quero aqui rede, Vou para DevTools e redes abertas. E vamos atualizar a página e procurar por solicitação, que está terminando com este ID porque eu, a solicitação está terminando sempre com nosso ID de produto. Então, como você vê aqui, eu tenho este aqui. Então, se eu for para Preview, quando eu clicar nele, eu vou ver que eu tenho marca ou tudo sobre o produto. Agora vamos ter as imagens. Se você vê que temos imagem que é imagem principal e, em seguida, imagens, várias imagens estão aqui, que estão vindo do back-end. Então vamos usar essas imagens em nossa galeria. Então precisamos apenas dizer produto, como a entrada que já definimos. Nós dizemos que as imagens serão produto, como aquele produto que eu estou usando imagens. Então, como você vê, nós temos agora a entrada, nossa galeria dentro, como esta página do produto. E estamos passando as imagens para essa entrada. E a entrada ou o componente, nós estamos renderizando-o desta maneira aqui. Então vamos aqui e brilhar que vamos ver. Ok, temos algumas coisas que você ouviu falar. Eles são totalmente sem estilo. Nós vamos estilizá-lo. Então, primeiro de tudo, vamos criar um arquivo de estilo. Então, nos estilos públicos, temos biblioteca e então você, i, e vamos ter como galeria também. Dot SCSS, desculpe, é CSS, então temos que colocá-lo como S, S, S, OK. E agora temos que importar isso. Então dizemos também importar para mim galeria. Então temos dessa forma e esta interface de usuário é importante também em qualquer loja. Então quando você compra não pode ver isso. Então agora vamos usar ou estilo que Gana. Então você pode usar bem o meu caminho, eu vou sempre dessa maneira. Então eu separo aqui a tela para que eu possa aqui ver quais classes eu usei. Então vou começar com a galeria. E esta galeria contém a imagem principal. E como você vê aqui, e imagem principal, por exemplo, vamos mantê-lo como por enquanto vazio. Eu vou ter também o estilo das imagens. Então temos aqui imagens. E essas imagens, como você se lembra, nós as definimos como U L. Então esta UL será uma flexão. Então temos que fazer um display flex para que ele seja alinhado perto um do outro, esses elementos ou aqueles aliados. E nós inicializá-lo com margem 0 e cama 0 porque ele está vindo com um valor padrão do navegador ou da biblioteca. Então agora temos esse flex, e vamos verificar se estamos realmente nos colocando perto um do outro, colocando-os perto um do outro. Então nós salvamos, ok, nós ainda não temos nada porque nós precisamos dizer o estilo do LI também. Então salvamos e continuamos com o LI dentro desta UL, temos um LI e estamos tendo, por exemplo, tamanho de fundo. Lembre-se que temos a imagem de fundo que é definida lá, então nós colocá-lo na capa. Então ele vai cobrir toda a área que tem uma largura de 100 e pixel, como eu vou dar-lhe 100 pixels de largura e 100 pixels de altura. E sempre itens LI, precisamos dar-lhes um bloco de exibição porque caso contrário eles serão exibidos como um texto, textos embutidos, eles estarão próximos um do outro. Então, quando você dá a eles bloco de exibição, ele vai dar a ela ou dar-lhe um comportamento como este. Vamos salvar e, em seguida, verificar se o que está acontecendo no front-end. Ok, seus dados, agora temos todos eles perto um do outro. Então vamos ter novamente, mais para styling. Estamos desenhando as imagens. Nós não o estilizamos, a imagem principal. Então temos que dar alguma margem, certo? Gostaria de colocá-los longe um do outro um pouco. Vamos dar 15 pixels. Então podemos ter neles como separados. Agora, é muito bom. Vamos agora estilizar a imagem principal, como podemos fazer isso. Primeiro de tudo, precisamos dar a essa variável um valor. Então vamos clamar e depois voltar aqui. E eu vou dar um valor a esta variável. Portanto, esta variável deve ser, como você se lembra, algum URL que está vindo do back-end. Então o que temos aqui, apenas as imagens. Então, nesse caso, eu posso exibir as primeiras imagens ou imagem da matriz de imagens que está vindo da página de produtos. Então, nesse caso, eu não posso dizer em minha energia em, nele, este selecionado a imagem será este ponto imagens como estas imagens, e tomar o primeiro membro da matriz. Então, para ser mais agradável, você pode verificar se há imagens. E essas imagens têm comprimento, como se houvesse itens dentro desta imagem, então você pode dar a ela a imagem selecionada. E também, precisamos verificar a galeria como veremos mais tarde se há imagens ou não. Então agora temos essas imagens selecionadas é colocado aqui. Você vê, nós temos agora a imagem principal é colocada. E então temos também imagens da galeria debaixo dele. Então vamos estilizar isso um pouco. Vamos usar um pouco de estilo nele. Vamos para o arquivo de estilo para que div da imagem principal aqui conterá a imagem em si. Então eu posso alinhar tudo dentro dele para o centro para que possamos dar centro de alinhamento de texto. Eu gostaria de fazê-lo no meio apenas para torná-lo um pouco no meio do, desta página ou esta div. Então, depois disso, vamos ter alguns valores para isso. Como se pudéssemos empurrar o conteúdo por baixo dele, cerca de 15 pixels. E também, podemos fazer uma altura, damos esconderijo como 600 pixels máximo para não ser muito grande. E então podemos estilizar a imagem dentro dela. Então você se lembra, temos a imagem principal na div e dentro dela há imagem. Então eu posso acessar isso diretamente. Eu posso dizer que não, Oh meu Deus. Eu digo EMG imagem terá largura máxima será 100%. Então eu não quero colocar a imagem mais do que o tamanho. Caso contrário, ele será enviado para dentro deste conteúdo. Então eu queria ter o máximo de 100% do contêiner pai, que é este. Então estamos tendo uma largura máxima de 100% e damos altura 100%. Então para ter a altura da patente como 600 pixels. Então vamos salvar isso e tentar e verificar se estamos fazendo o certo. Refresque, Nice. Temos todos os itens são estilizados. Temos este 600 pixels e temos aqui imagens da galeria. Então vamos agora fazer isso no centro. Como fazemos as coisas no centro, se você se lembra, estamos usando flex para que possamos dizer justificar conteúdo de seu recipiente, que é a URL para o centro. Então, depois disso, veremos que após o carregamento, teremos esses itens centralizados. Então olhe, nós temos uma galeria muito grande e a primeira imagem é selecionada, como esta é selecionada. Então vamos agora fazer o clique. Então, quando eu clicar em uma dessas imagens, eu vou mudar essa imagem. Então é muito simples. Tenho certeza que você está pensando o mesmo como eu. Então aqui vou eu fazer um evento. Podemos dizer “clique”. Este clique terá como, por exemplo, alterar a imagem selecionada. Assim, desta forma, eu posso ser capaz de mudar a imagem para que não possamos passar tão bem a imagem que eu estou selecionando aqui. Então, vamos agora verificar isso. E podemos criar esse método. Eu posso simplesmente dizer aqui no arquivo ts, definir um novo método aqui, que é o mesmo que estamos chamando, e ele tem imagem e será string porque estamos usando imagem URL. E então nós temos aqui que estes dois selecionados a imagem será a imagem que eu obtive do front-end. Então vamos renomear isso para URL da imagem. É melhor gostar de ter mais porque a imagem está se expressando como um dado. Então podemos fazer isso assim. Então URL da imagem aqui também. Então podemos ter. Imagem selecionada URL da imagem, selecionou o URL da imagem. Aqui temos outro. E então aqui temos imagens sintaticamente. E podemos dizer também esta URL imagem. Então, para não ter nomes confusos porque não estamos passando a imagem em si, estamos apenas passando a célula, a URL dela. Então aqui estamos salvando isso, Salve também, este componente aqui, e vamos verificar isso. Então discamos para não usar o construtor. Vou mostrar-lhe que temos aqui flechas. Vamos consertá-los todos. Estamos usando um X, como você verá mais tarde. Então nós temos um dois, por exemplo aqui está reclamando sobre isso. Eu não tenho método dentro deste porque ele está vazio, por isso é melhor para você excluí-lo se você não tem ou se você não está indo para usar este método. Então salvamos e agora estamos limpos de erros como erros gramaticais quebrados. Então, quando eu clico, como você vê, eu estou clicando na imagem e a imagem é essa mudança. É muito bom. E também, vamos verificar se temos imagens inseridas. Então você precisa verificar se há entrada de imagens. Então é melhor fazer isso muito facilmente. Então você não pode dizer que get é o seu método como você pode definir um getter e dizer tem imagens. Assim, desta forma, você pode definir este método como uma variável que pode ser usado como uma variável ou um membro de classe e usá-lo no modelo. E eu vou dizer retorno para mim este ponto imagens comprimento ponto. Então eu quero verificar se ele tem comprimento superior a 0. Então eu tenho imagens no componente. Então eu tenho imagens do front-end ou da página do produto. Caso contrário, isso me dará falso, então eu não mostrarei nada. Então é a forma como fazemos isso. Então aqui temos ng-if. Então, se há uma galeria, então podemos dizer aqui tem imagem. Então, se ele tem imagem, em seguida, exibir todos os componentes. Caso contrário, não exiba nada porque nesse caso, eu vou quebrar toda a equipe porque eu estou usando aqui imagens, links, e várias ou outras coisas aqui. Então, dessa forma, é melhor usar sempre este valioso. Então eu vou dizer aqui, se este ponto tem imagem, então, e também, quando isso vier como indefinido, então ele vai me dar um problema. Eu vou te mostrar assim. Então vamos aqui e eu vou salvar tudo. Então eu quero mostrar que quando não temos imagens na matriz, na entrada, apenas para ser um pouco cuidadoso com as entradas, porque nesse caso talvez você vai causar componente quebrado e ele vai dar erros de console. Portanto, é melhor sempre ter certeza de que a entrada é realmente tem dados ou não. E então, especialmente se for um array e você estiver loop nesse array e fazendo algumas coisas no modelo. Então, é melhor ter certeza de que você tem imagens 3D e, em seguida, exibir o modelo. Bem aqui. Porque agora eu estou perguntando se há imagens e, em seguida, se as imagens são indefinidas, eu vou obter erro. O comprimento é indefinido ou você está chamando comprimentos de algo que é indefinido. Então, nesse caso, teríamos um erro. Então, é melhor resolver isso como vou mostrar agora. Então vamos aqui e dar uma matriz vazia de imagens. Eu não vou dar nada. Então não podemos dizer nulo aqui ou indefinido. Para que possamos salvar. E então, é claro, não vamos conseguir nada na galeria. Mas vamos receber um erro no console. Estamos dizendo comprimento de nulo, como você vê aqui no componente galeria ts T2 e T4. Então, se formos para este componente de galeria ts 24, como você vê aqui, eu estou dizendo, Ok, há erro aqui. Então é por isso que eu disse que é melhor verificar cada linha de código quando você está usando, especialmente as entradas. Então TypeScript está dando a você a capacidade de verificar isso colocando um ponto de interrogação. E, em seguida, se este indefinido, então ele irá retornar para você algum valor. Então vamos tentar de novo. Nós salvamos quando esta imagem tem valor nulo, então ela não vai continuar aqui e ele vai retornar indefinido em geral. Então agora eu não recebo mais esse erro como você vê aqui. E também a minha galeria está vazia. Então eu garanto que com este ponto de interrogação, eu disse que, ok, se há este indefinido, não continue sua condição, apenas retorne indefinido. E aqui, quando isso for indefinido, a galeria inteira não será exibida. Então você vê, sempre tenha cuidado com suas entradas. Então é por isso que estamos fazendo aqui coisas práticas. Caso contrário, você vai estar em apuros. Temos muitos erros no console e você não saberá de onde eles estão vindo. A última correção que eu quero adicionar aqui que temos aqui você galeria está dando erro, desmarcar ou deve ser prefixado por um dos prefixos, bits azuis. Então, porque aqui no arquivo ES lint dentro da interface do usuário da biblioteca, eu defino isso. Ok, eu quero esse atributo como um pouco azul específico para seus pedaços azuis. Então vamos corrigir isso também. Nós fazemos como você vê aqui. E também, o elemento ou o seletor será prefixado como UI. Então, quando guardarmos isso, vamos novamente para a nossa galeria. Claro que vai demorar algumas vezes para gostar de algum tempo para ser corrigido ou pode ser corrigido imediatamente como você vê aqui. E também temos aqui o banner, você eu banner também corrigiu esse erro. Portanto, desta forma, não estamos a ter quaisquer erros aqui. Estamos limpos. Mas de qualquer forma, vamos corrigi-los todos no final, como vou mostrar-lhe mais tarde com um excelente. Então isso está tudo acima da galeria. Agora, vamos colocar de volta o erro, que ordem eles são erro que eu cometi aqui para que possamos ter as imagens do produto. Então agora vimos toda a galeria e terminamos totalmente a página do produto. Então eu posso ver qualquer imagem de produto, por exemplo, este, e também qualquer outro produto que você queira ver. Então, nesse caso, é muito bom. Implementamos totalmente a página do produto. Vamos trabalhar na próxima seção com o carrinho deles. Vamos adicionar ao carrinho, adicionamos essa quantidade e vamos trabalhar com a ONG RX para salvar os itens do carrinho. E veremos como está mudando aqui imediatamente. 154. Serviço no LocalStorage: Ok, então de volta à nossa estrutura de diagramas. Precisamos criar o componente de check-out, o componente de cartão e o componente de histórico do usuário, como vimos na visão geral. Então agora o que precisamos primeiro para criar o componente do cartão, mas também o componente do cartão precisa de um serviço de carrinho. E este serviço de carrinho, você pode criar uma biblioteca para isso. Ou você pode colocar bem todas as coisas na biblioteca de pedidos, que você vê à direita. Assim, à direita, a biblioteca mais antiga será responsável pelo carrinho de checkout e também como todos os usuários encomendar e também talvez possamos gerenciar o pagamento. Então, primeiro de tudo, vamos começar com o carrinho. O carrinho, Eu vou criar um serviço que é chamado de serviço de carrinho, e ele será localizado na biblioteca de pedidos. E para a semana observada, o carrinho nós vamos usar algas bem, os observáveis ou NDR x. Então eu vou mostrar para vocês os dois lados. Vou começar com o mais fácil, que é como observáveis. Assim, podemos observar no cabeçalho como você vê aqui, algo como podemos ver sempre atualização ao vivo no carrinho. Então, por exemplo, quando eu clicar em Adicionar ao carrinho aqui, Ok, ele é adicionado também. Quando eu clicar novamente em, por exemplo, vamos para a página de produtos e eu clique para este produto. Eu vejo que como você vê isso é atualizado para que possamos ver como este cartão está sendo atualizado ao vivo. Então eu vou usar as duas maneiras e DRX e observáveis. Mas agora vamos começar com fácil, que é observável. Então de volta ao nosso projeto e código. Vamos criar um novo serviço, que é chamado de serviço de carrinho. E será localizado no serviço de ordem ou biblioteca de pedidos. Então, podemos ir aqui e novamente para NX console gerar e temos serviço, e vamos nomear este serviço dentro de uma pasta chamada serviços dentro da biblioteca de pedidos. Então podemos ter aqui carrinho de serviços. O nome do projeto será encomendas, e nós temos que pular esse teste. Não precisamos deles no momento. Então, depois disso, criamos este serviço de guarda e vamos sentir o nosso código lá. Então vamos fechar tudo vai dois lábios e novamente, ordens baixas e depois lábios e serviços. E aqui estamos no nosso serviço de carrinho. Assim, o serviço de carrinho terá, em primeiro lugar, como alguns, por exemplo, inicialização para o carrinho. Então, para o cartão, eu vou usar o depósito local. Por que o armazenamento local? Então, quando o usuário voltar para a loja depois de recarregar o aplicativo, eu quero manter sempre o cartão que ele preencheu anteriormente. Então eu quero manter todos os dados dos guardas que ele sente P4 para não perdê-los. Então, por exemplo, quando eu movo especialmente de página para página, ou por exemplo, quando eu deixar o aplicativo indo para outro lugar, eu quero manter os dados de guarda ainda os mesmos aqui. A melhor maneira é, como você vê aqui, que podemos usar o armazenamento local. O armazenamento local terá, por exemplo, o carrinho. E lembre-se que salvamos também o token JWT aqui. E agora vamos salvar aquele Cartier também. Assim, o carrinho terá itens e cada item terá ID do Produto e uma quantidade desse item. Então, nesse caso, eu posso salvar o produto que é usado e também a quantidade dele. E também, quando eu quiser adicionar algo ao seu carrinho, novamente, Eu vou ver que este carrinho cortar atualizado e nós temos a quantidade para o mesmo produto. Então eu não tenho que adicionar o produto novamente, mas eu apenas aumentar sua quantidade quando o usuário clica em Adicionar ao carrinho várias vezes. Então, neste caso, precisamos ter algo como armazenamento local. Então, quando eu atualizo minha página, eu vou aqui, atualizar. E eu ainda vejo meus itens de carrinho que estão localizados em sua página de carrinho. E também estamos tendo aqueles no armazém local. Algumas pessoas também usando o banco de dados, eles estão atrasando a guarda dos usuários no banco de dados. Mas aqui ainda não estamos logados, então estamos perdendo usando o armazenamento local, que é como para público, para todos, qualquer usuário, é apenas salvar sob o domínio, que é host local, ou para exemplo, meu e-shop ponto com. E isso pode com.com, teremos armazenamento local como você vê aqui. E este armazém local terá um carrinho. Assim, sempre que o usuário voltar para a loja, novamente, ele verá que seu cartão ainda está lá e ele não perdeu os itens do carrinho. Então aqui não estamos forçando o usuário a fazer login, É apenas público. Nós não temos qualquer forço para login. Então é por isso que estamos armazenando no armazenamento local, não no banco de dados. Nesse caso, vamos criar esse serviço com base no armazenamento local. Então, em primeiro lugar, como eu sei que tudo ou todos os armazenamentos locais precisam ser inicializados. Precisamos inicializar nosso armazenamento local com seu carrinho, como itens de carrinho vazios. Então podemos usar init, armazenamento local. Podemos fazer um método que está em seu armazenamento local. E então dizemos como constante, podemos dar carrinho inicial, como podemos chamá-lo carrinho inicial. E este cartão inicial terá, será como objeto, que contém duas coisas, ou uma coisa que é chamado itens. E esses itens serão os itens que eu quero localizar como de costume, como vimos anteriormente, ID do produto e a quantidade. Então, por enquanto, os itens ou o cartão NHL, o começo estará totalmente vazio. E aqui vamos dizer armazenamento local em geral, porque este é JavaScript. Agora estamos escrevendo, dizemos set item e então eu defino o item dessa forma, eu digo guarda, ou podemos dizer como carrinho normal, que será o k, A chave aqui temos aqui c0. E então colocamos o valor, e o valor será cartão inicial. Ok, legal. Estamos recebendo um erro aqui porque não é atribuível ao parâmetro de string, porque não podemos atribuir objetos para ser uma string dentro do item de conjunto. Item exigiria que isso fosse uma string. Então, como podemos fazer isso, como você vê aqui, que estamos armazenando os dados, ok? Matriz de objetos e todos esses dados. Podemos alterá-los para string usando stringify JSON. Então isso é como um método que é chamado JSON stringify. Ele vai mudar para mim este objeto para string e armazená-lo no armazenamento local como uma string. Então podemos fazer isso facilmente. Então é como se tivéssemos um raio que é ou string JSON, e estamos armazenando os dados dentro dele. Então podemos dizer constante, novamente, outra constante. Podemos dizer cartão inicial, mesmo, mas não será carrinho inicial como objeto, será JSON. E este guarda terá, usará esta classe ou esta biblioteca, que está internamente em JavaScript. E dizemos JSON dot stringify. Então, faça este objeto como uma string e, em seguida, armazená-lo na guarda inicial aqui. Então, depois de salvarmos isso, vemos que, ok, tudo está bem. Não recebemos nenhum erro. Mas a questão aqui, quem vai chamar essa função? Como se precisássemos chamá-lo apenas da primeira vez que entrei na minha loja. Como eu quero aqui, vá o cliente que ele vai entrar na minha loja. Mas eu preciso de alguma forma inicializar um carro para um item vazio. Então eu preciso inicializar seu cartão com itens vazios no início para um novo visitante que veio no início para minha loja pela primeira vez. Então precisamos chamá-lo como a primeira vez e apenas uma vez. Não só como toda vez que vou a uma página, preciso ligar para inicializar, inicializar. Caso contrário, isso afetará o desempenho. Então, é melhor chamá-lo de alguma forma, uma vez. Então você tem uma de duas opções. Então, se você sabe que temos módulos e vamos usar o módulo de ordem no módulo de aplicação aqui. Então vamos chamar o módulo de ordens no módulo de aplicação da loja de energia. Então eu vou para uma loja e, em seguida, módulo aplicativo aqui, que é como o componente raiz que podemos dizer, ou o módulo de rota. É o início da minha candidatura, o contentor principal. Então eu digo aqui adicionar módulo e, em seguida, eu chamo ok, ou o módulo. Assim, a ordem é módulo será importado do nome da organização e ordem é, é depender da biblioteca como nós especificou o nome lá. Então agora o módulo de ordens, que é este, é chamado no meu módulo de aplicação. Vamos guardar isso aqui. E agora vamos verificar. Então precisamos saber que quando isso for chamado, então você pode inicializar o carrinho. Então isso será chamado apenas uma vez, apenas com uma primeira vez onde eu vou usar o módulo ordenado. Então, nesse caso, você precisa ter certeza de que todos esses módulos são realmente chamados apenas uma vez. No módulo de ordens, eu posso definir um construtor. E quando isto for ouro ou este módulo de ordens for criado, posso chamar a ordem ou o serviço Carter. Então, podemos dizer serviço carrinho dentro do módulo que você vê como você também pode usar os serviços dentro do construtor módulo. Então, e então eu digo ponto de serviço carrinho inicializar cartão de armazenamento local. Então, como você vê aqui temos aqui este método. E eu vou chamar o construtor do nosso módulo o método que é chamado de armazenamento local de carrinho inicializado. Então, quando salvarmos, então meu aplicativo será recarregado e ele chamará o módulo de pedidos. Ou seja, o módulo será construído como no início porque é uma classe. Então, cada classe, quando você chama internamente, Angular está chamando este módulo de ordens e criar um novo objeto dele. E então ele chamará automaticamente o construtor. O construtor tem este método que está dentro do serviço de cartão. Então, quando vamos para o nosso aplicativo e atualizar, veremos que o carrinho é criado. Então, vamos remover este token novamente ou como este armazenamento local ou todo ele. Então vamos para, por exemplo, para a página inicial. Então agora não temos nada porque eu excluí porque ele tinha a prova que eu não estou chamando o módulo de ordens de vários tipos. Então, quando eu recarregar a página, como quando eu estou chamando meu aplicativo pela primeira vez, então o item do carrinho será criado com seu valor em seu armazenamento local. Então aqui nós garantimos que estamos usando ou criando o cartão apenas uma vez. E não é criado várias vezes quando eu navego dentro do meu aplicativo. Mas também às vezes talvez você usaria módulo de ordens em outros lugares como você está indo para usá-lo. Por exemplo, em seu aplicativo, você tem páginas ou, por exemplo, você tem outro módulo e você vai usar módulo de ordens porque você precisa de alguns componentes de lá, como vimos anteriormente. E neste caso, isso fará um problema para você que isso será chamado várias vezes. Então, nesse caso, é melhor chamá-lo e encontrar algum lugar onde é chamado ou as coisas podem ser chamadas apenas uma vez. Por exemplo, eu sugiro para você, o cabeçalho, como você se lembra do cabeçalho no meu aplicativo é chamado Apenas uma vez. Então temos aqui no aplicativo mais componente, temos cabeçalho ND Shoppe. E este cabeçalho de energia Shoppe é chamado apenas uma vez. Então, para provar isso, eu vou mostrar-lhe como eu vou ter aqui log console. Por exemplo, no cabeçalho, podemos dizer. E então vamos ver que toda vez que eu navegar dentro do meu aplicativo, eu vou ver que, ok, qualquer cabeçalho é chamado Apenas uma vez. Você vê que ele é chamado Apenas o tempo em que eu defini o cabeçalho porque ele está na raiz do meu aplicativo em seu componente aplicativo principal. Então seria chamado apenas uma vez, independentemente que fora ou os parceiros que eu estou visitando. Esta é uma maneira, outra maneira que eu mostrei que você pode usar um construtor do módulo de Arthur se você não tem certeza de que você não vai usar o módulo de ordem várias vezes. Então aqui temos a inicialização de seu carrinho. Agora vamos preencher este guarda e ver como podemos definir itens para este carrinho. Como veremos na próxima palestra. 155. Adicione produtos ao carrinho: Bem-vinda de volta. Vamos agora adicionar itens ao carrinho. Então, se eu clicar neste botão, Adicionar ao carrinho, eu vou adicionar este produto com seu id e quantos ou quantidade para a matriz de itens, que é definido no armazenamento local em seu carrinho. Então, para isso, precisamos adicionar um novo método que também é adicionado ao serviço de carrinho. Eu chamo de definir item de guarda e ele estará aceitando um item de carrinho como vamos definir mais tarde. E este item de carrinho será um modelo e ele vai devolver para mim o cartão que eu gosto sempre de dar digitação para tudo o que eu estou usando, como string, número ou mesmo eu criar meu próprio tipo. Então, para isso eu vou criar o carrinho e o item do carrinho. Então vamos simplesmente para os modelos que temos aqui ou o item ou podemos tão bem definido carrinho. E como você vê aqui, nós definimos isso como uma classe, então podemos dizer classe de exportação. E esta classe será nomeada como carrinho no início, e terá itens, e esses itens serão tipo de item de guarda e matriz de item Garth. Então, neste caso, eu preciso definir também esta classe, eu vou dizer classe Garth item. E este item Garth terá primeiro o produto em si. Ou podemos dizer ID do produto, que será mais simples. Então podemos dar-lhe este nome e será uma string. E então podemos definir a quantidade. Então, a quantidade deste produto dentro do carro. Então será um número. Então, para isso, É melhor sempre dar esses itens como opcional. Então, quando você cria um novo objeto desta classe, ele não lhe dará erro onde você não passar, por exemplo, quantidade. Então, no mesmo arquivo, eu tenho dois tipos, carrinho e item Garth. Vou usar esses tipos aqui. Então, basta pressionar o espaço de controle e importamos o item do carrinho e também contornar o espaço ou ponto, ele vai me dar o carrinho em si. Então, agora, quando eu definir um item de carrinho, eu quero devolver o carrinho em si. Então, primeiro de tudo, precisamos adicionar item ao carrinho no armazenamento local. Vamos fazer isso. Então, primeiro de tudo, eu posso dizer que eu posso obter a guarda atual que está dentro do armazenamento local porque eu vou usar esses itens e adicionar a eles mais itens. Primeiro de tudo, preciso pegar o cartão atual. Então, o que guarda eu tenho atualmente no armazenamento local talvez porque eu adicionei anteriormente alguns itens, então eu preciso obter o guarda atual. E então eu empurro para os itens deste guarda, o novo produto. Então podemos fazer isso facilmente. Então, primeiro de tudo, podemos obter aquele cartão de const de guarda, e este cartão será tipo de guarda. E então podemos dizer armazenamento local, ponto obter ou obter item. Exatamente. E agora estamos definindo ou obtendo a fila que definimos aqui. Então eu quero pegar esse guarda. Então, se você ver que quando você várias vezes usar esta constante é melhor defini-lo no topo aqui. Então você pode dizer exportação, e podemos chamá-lo como Guard, item ou chave do cartão. Podemos dizer assim. E é melhor que a constante possa ser letra maiúscula. Nós afundamos e dizemos guarda e chave. E este carrinho e a chave estarão no caminho nomeados como carrinho. Então, dessa forma, estamos definindo essa constante e que vamos usar em toda a nossa classe aqui ou em todo o nosso serviço. Então, neste caso, é melhor ter esta chave de cartão e corcel deste e em vez deste. Então, nesse caso, você não terá string codificada, o que não é bonito. Então é como se eu tivesse todo o carrinho e como esses itens. E por dentro eu vou ter aqui empurrar como o item de guarda para o carrinho. Então podemos fazer isso facilmente. Então, primeiro, precisamos pegar o cartão também. Se você se lembra, colocamos como um JSON ou string de JSON. Então precisamos devolvê-lo de volta para ser como um objeto. Então, nesse caso, não somos suficientes para fazer isso. Não é suficiente, porque isso vai retornar para mim uma string e isso vai me dar um erro porque é aqui dizendo cartão será como uma string, mas é tem um cartão. Então, estamos retornando uma string e estamos definindo que este cartão tem cartão tipo, o que está errado até agora que é melhor para analisar este JSON. Então eu diria JSON Dot Parts. Aqui estamos retornando de string para objeto, então não temos que stringificá-lo porque quando definimos item em que Garth, nós stringificá-lo. Mas quando queremos obter item do armazenamento local, vamos ter analisá-lo a partir de string para JSON. Então, nesse caso, eu o tenho como um objeto e então eu posso acessar itens ou todos os membros da classe dentro deste JSON. Então aqui eu vou apenas e ISA cartão pontos itens que empurrariam. Então eu estou empurrando um novo item para o carrinho e eu dou item de carrinho a ele. Então, aqui temos nosso item de carrinho definido e enviado para seus itens de carrinho. Mas está me dando um erro porque eu não devolvi o cartão. Novamente. Quero devolver o guarda atualizado. Então, podemos dizer aqui, devolver o carrinho que é atualizado com um novo item aqui. Então, primeiro de tudo, precisamos chamar esse método como podemos chamá-lo. Como dissemos, que vamos clicar neste botão e adicionar este item ao carrinho aqui. Então, como podemos fazer isso, podemos ir para o nosso item de produto se você se lembrar deste componente que definimos anteriormente, para que possamos procurá-lo e dizemos item de produto. E aqui está. Então, podemos dizer componente item do produto. E se você se lembrar dentro deste componente de item de produto, temos botão. Então, podemos dizer este botão onclick. E podemos dizer Adicionar produto ao carrinho. Então aqui, nesse caso, podemos adicionar este produto ao carrinho. Portanto, precisamos definir também este método. Então, vamos para esse TypeScript deste item de produto e dizemos que o produto de anúncio para o carrinho estará chamando o serviço de carrinho. Então também precisamos chamar o serviço de carrinho. Direi serviço de guarda particular. E este serviço será importado do serviço de carrinho. Mas como você vê aqui, ele vem como o caminho completo. Precisamos de algo como um atalho, como precisamos dizer, como adicionar. E então eu coloquei o nome da organização e eu diria qual biblioteca eu criei o serviço, mas ele ainda está me dando erro porque nós não exportamos os pedidos ou o serviço de carrinho na sua biblioteca ordenou. Então vamos para o arquivo de índice aqui. Então eu clico no arquivo de índice dentro ou na biblioteca. E eu digo exportar para mim também, não ou seu serviço, mas também o serviço de guardas. Então podemos ter aqui serviço de carrinho. Então aqui, quando eu for para o item do produto, eu não terei problema quando eu estou importando esse serviço de guarda porque ele será definido. Então agora, quando usarmos este serviço de guarda, se eu for aqui e usar esse serviço de cartão dentro do meu produto, não terei nenhum problema aqui. Eu ainda estou recebendo erro porque deve ser ou não há ordem. E agora vamos para o nosso método, novamente, adicionar produto ao carrinho. E então dizemos este produto ou serviço ponto. E então teremos definir item de guarda. Mas aqui precisamos de um item de carrinho. Como podemos criar um item de carrinho? Podemos criar um objeto, podemos dizer const, e então chamamos de item Garth. E este item terá um tipo de item de guarda, mas este item de guarda também acho que não é exportado. Então nós também precisamos ir para o nosso arquivo de índice. E para a biblioteca. E então eu digo exportação, começar de não superfícies, mas precisamos de modelos. Precisamos importar ou exportar um novo modelo, que será o modelo GARCH que criamos. Então, neste caso, item de produto, biblioteca de produtos pode ver este item de carrinho. Então podemos passá-lo aqui e apagar esta linha. Então, nesse caso, aqui meu item de carrinho será definido. Preciso criar um novo item de guarda. Então, você tem item será ID do produto. E este ID do produto será este ponto ponto ID porque eu tenho aqui produto de entrada, se você se lembrar, estávamos passando o produto ou contagem para este item de produto e então eu estou recebendo de volta. E assim eu posso obter todos os detalhes do produto, incluindo o ID e, em seguida, a quantidade. Então, estamos no item do produto, então o usuário, quando ele clicar uma vez no produto ou botão Adicionar ao carrinho no item do produto, vamos adicionar apenas um ao carrinho. E depois passamos este item de guarda dois. Item de salvaguarda, e estamos todos bem. Então, vamos salvar tudo e recarregar o aplicativo. Espero que não consigamos erros. Ok, aqui vamos nós. Então agora eu tenho aqui o item do produto, se você se lembra, nós usamos o item do produto em produtos de recurso e também usamos isso, bem como na lista de produtos. Então eu vou adicionar isso ao carrinho. Então, quando eu clicar aqui, vejo que o carrinho aqui não está sendo atualizado. Por quê? Porque, assim como no serviço, quando você vai para o serviço de carrinho, você não é suficiente para enviar itens aqui. Você também precisa empurrá-los de volta para o armazenamento local. Nesse caso, você precisa novamente para stringify tudo, como você tem que fazer essas linhas novamente. Então, depois de empurrar este cartão, você pode dizer como guarda inicial JSON ou você pode dizer guarda JSON. E isto vai ser estringify este guarda depois de empurrarmos este item para ele. E então vamos empurrar este guarda JSON usando esta chave de guarda para o armazenamento local deles. Então vamos fazer isso. É claro que vamos refatorar este método. Só estou mostrando os passos, como podemos fazer isso. Então eu vou novamente para o aplicativo e, em seguida, Adicionar ao carrinho. Vejo que o item foi adicionado aqui. Clique novamente, vejo que o item foi adicionado. Eu clico no IC, eu tenho agora três itens. Então vamos fazer alguma refatoração. Então vamos primeiro colocar isso em um novo método. Como todos esses como barras JSON, LocalStorage, obter item como o próprio carrinho. Vamos colocá-lo em um método que podemos chamar de guarda. Então podemos dizer obter carrinho como em geral. E isso vai retornar para mim o carrinho em si, como carrinho como objeto, não guarda como por exemplo, que dados JSON. Então, primeiro de tudo, podemos dizer, dê-me o gosto e dessa forma eu diria cartão JSON.Parse, mas podemos dizer dessa forma, como eu quero torná-lo mais detalhado, só você pode entendê-lo. Então, é claro que você pode mantê-lo como fizemos antes, mas eu quero detalhar, então podemos dizer aqui proteger dados JSON, ou podemos chamá-lo de carro JSON string porque precisamos stringify este. E então eu definir constante, Eu chamá-lo novamente cartão. E este cartão, será também do tipo de guarda. Então aqui não será cartão, será string. Então pegamos o item do depósito local. Ele irá retornar para mim a string que está no armazenamento local com essa chave. E então eu entendo. E então eu vou dizer aqui, JSON ponto partes, e, em seguida, proteger JSON string. E aqui terei os dados do carrinho também. E no final eu direi devolva para mim este guarda como objeto. Então aqui não temos que nos incomodar. Nós apenas dizemos aqui, apenas me dê uma constante será Guarda. E este carrinho vai ter este cartão de ponto obter. Então isso é simples. Nós salvamos todas essas linhas porque vamos usar também obter Garth várias vezes em outros métodos como veremos mais tarde. Então, depois disso, empurrar itens e, em seguida, proteger JSON stringify novamente. E então eu coloquei o item dentro do depósito local e eu devolvo o guarda novamente. Ok, depois disso, vamos novamente ao nosso aplicativo e verificar se tudo está funcionando bem. Ok. Estamos adicionando itens ao seu carrinho. Ok. Mas com a adição, temos um problema que você se você ver que quando eu estou clicando neste item Adicionar ao carrinho, ele está adicionando o produto de novo e de novo e de novo. Terei ID do produto e é adicionado várias vezes. Precisamos apenas quando eu clicar em Adicionar ao carrinho. E se este produto já está em seu carrinho, então eu preciso adicionar a quantidade, aumentar a quantidade apenas, não adicionar um novo item de produto. Caso contrário, nossa guarda terá problemas que irá duplicar o próprio produto. Portanto, precisamos verificar se o ID do produto ou o produto já existem em seu carrinho. Basta aumentar a quantidade e não fazer qualquer adição a este conjunto de itens até agora que precisamos verificar se o produto está dentro ou dentro do cartão já. Então eu estou recebendo o cartão, então eu posso criar uma constante, nós podemos criar, chamá-lo de guarda. O item existe. Podemos dizer Garth item existe, este item de carrinho existe. Vamos iterar através dos itens do carrinho e verificar se há item Garth passado já neste carrinho. Então, podemos dizer cartão para encontrar ou pontos sólidos primeiro, ponto encontrar porque temos como uma matriz. E eu vou verificar se há item do produto ou ID do produto semelhante ao item do carrinho que é passado aqui, então o item do carrinho existe. Então eu vou dizer “encontre”. E então item, você sabe que podemos usar esta multa dessa maneira. E podemos especificar um valor booleano ou como um valor de retorno booleano, que irá definir para mim este item existe ou não. Então, para cada item dentro desta matriz, verifique o ID. Se for exatamente o mesmo item de guarda que estou clicando ou adicionando ao seu carrinho, então devolva-o para mim. item no carrinho existe. Então aqui eu vou verificar se há Garth item existe. Em seguida, aumente a quantidade, empurre o novo item atual para a guarda e, em seguida, devolva esse guarda novamente. Então é assim que vamos fazer. Então vamos aumentar a quantidade para o produto que chamamos que encontramos ou o item que encontramos. Até agora que se eu tiver vários produtos, eu preciso encontrar um. Como ir através de todo o array, todo o item, e verificar quando eu encontrar um, em seguida, aumentar a quantidade dele. Então, a melhor maneira de percorrer esses itens é usar o mapa. Então, quando eu vou aqui e digo itens de carta novamente, e então mapa ponto. E então podemos dizer aqui item de guarda ou como item, assim como este. E este item, ele estará verificando. Então, se o item é igual a, desculpe, produto ponto do item, é exatamente como encontramos o item Garth. Então eu vou dizer aqui, se o item que ID do produto é igual a Garth item, que eu estou passando neste conjunto aqui, guarda item item item ID do produto. Então precisamos ter esse item, essa quantidade aumentada. Então nós apenas dizemos item.quantity igual ao item que a quantidade que tínhamos antes como anteriormente, mais a quantidade que é passada com o item Garth. Então eu vou dizer aqui carrinho item quantidade ponto. Então, depois disso, economizamos e verificamos se estamos realmente aumentando a quantidade. Então aqui meu guarda está inicializado novamente. Eu clico em OK, eu adiciono, você vê, nós temos aumentando a quantidade com base em seu item de guarda se ele existe ou não. Então, quando eu clico em outro produto, ok, eu tenho aqui apenas um produto. Quando eu clicar em outro, ele não vai encontrar esse produto, então ele irá adicionar um novo item, como você vê aqui. Quando eu clicar novamente, veremos que este item aumentar a quantidade. Terceiro produto. Temos aqui, três produtos. Mais uma vez, aumentará sua quantidade. Então, temos apenas um produto, mas a quantidade é diferente com base nesses cliques. É melhor sempre em alguns casos, dentro do mapeamento, você retorna o item atualizado. Então você só diz aqui novamente que devolver para mim o item. Claro que estamos usando as referências de array, mas é melhor também devolver o item para o mapa para que os itens possam ser atualizados como de uma maneira agradável. Então, depois de salvarmos, vamos tentar de novo. Nós inicializamos, novamente o nosso item de carrinho. Eu clico em OK. Estou aumentando a quantidade e adiciono um novo produto com a nova quantidade. Cliquei aqui de novo. E vejo que também temos essa quantidade. Claro, como lição de casa para você, vou adicioná-lo à próxima seção. Quando eu quero adicionar aos seus cartões no item, Eu quero que você mostre um barco até o usuário que ele pode, que o item de guarda é adicionado porque quando ele pode tomar às vezes e não é uma boa experiência de usuário como nós não podemos ver o que aconteceu. Como, é claro, o usuário não verá esse log do console, mas você só clicará, mas ele não verá nada se o item do carrinho for adicionado ou não. É claro que mais tarde vamos atualizar este gráfico aqui para mostrar que, ok, isso, há um novo item de carrinho adicionado aqui, mas é melhor também adicionar alguma caixa de diálogo de confirmação ou confirmar que este carrinho ou este item é adicionado ao carrinho com sucesso. Então este é o nosso método de item de guarda de conjunto. É simples, temos definido e obter Guarda também. Então, vamos usar este item de carrinho de compras. Como você vê aqui, que quando recarregamos o aplicativo, estamos inicializando o armazenamento local novamente. Portanto, não estamos recebendo nenhum benefício do armazenamento local porque é se, se o cliente ou o usuário sair do site e voltar, ele perderá seu item de carrinho. Então precisamos mantê-los em sua loja local de alguma forma. E isso será o que veremos na próxima palestra, passo a passo. 156. Restaurar o carrinho de compras no reload: Ok, então como você vê aqui, quando estamos recarregando o aplicativo novamente, estamos perdendo os itens do carrinho. Então, quando eu adicionar alguns carrinho dois itens para sua história carrinho, então você vai recarregar o aplicativo novamente e estamos perdendo os itens e os itens sendo inicializados novamente. Então, neste caso, precisamos de alguma forma obter o benefício do armazenamento local porque dissemos que o cliente está saindo do site e voltando novamente, queremos manter seu carrinho cheio, então como podemos fazer isso? Então, primeiro de tudo, eu gostaria de ir para a minha inicialização do armazenamento local carrinho. Então, antes de inicializar o Garth, podemos verificar se há guardas no armazém local ou não. Então podemos definir cone também, que é chamado carrinho. E isso custa ou será tipo de guarda. E então podemos dizer que este ponto obter guarda, o método que definiu na palestra anterior. Então aqui eu vejo se eu tenho um carrinho ou não. Então, se houver um carrinho ou se não houver cartão, podemos então criar a inicialização do carrinho. E então podemos usar o cartão inicial para adicioná-lo ao nosso armazenamento local. Então podemos usar toda essa parte do código aqui. Não há nenhum cartão inicializado anteriormente. Então, na verdade, estamos apenas inicializando o carrinho. Caso contrário, não faça mais nada porque se já estamos tendo o carrinho, então não vamos inicializá-lo. Novamente. Só estamos chamando esta parte. Nós não temos guarda que está vindo do cartão em si, que é do depósito local. Então vamos salvar isso e grelhas tentar aqui. E veremos que quando recarregarmos o aplicativo depois de adicionar alguns itens ao carrinho, ainda teremos eles. Então aqui, por exemplo, eu tenho dois itens, quantidade 2 e 1. Vou recarregar o aplicativo. Então meu código está verificando se há um cartão no armazenamento local ou não, se não houver nenhum cartão de armazenamento local, então inicialize um. Caso contrário, fique com ele. Não faça nada, não inicialize nada de novo. Então, dessa forma, estamos recebendo o benefício de voltar ao site depois de adicionar alguns itens ao carrinho. Assim, o usuário poderá ver seu carrinho novamente quando não tiver tempo para comprar agora. Então ele pode voltar ao site a qualquer momento, e então ele não pode ver que seu cartão ainda está cheio. Ali. 157. Observar o contador do carrinho no cabeçalho: Ok, agora nesta palestra vamos observar o carrinho. Então aqui, quando o usuário está adicionando algo ao seu carrinho, então nós vamos adicionar aqui algum ruim para mostrar quantos itens em seu carrinho temos aqui. Então, em primeiro lugar, eu gostaria de criar um componente para isso. Então, podemos usar quantos itens de carrinho temos aqui. Então vamos fazer isso passo a passo. Primeiro, vamos para o cabeçalho do nosso aplicativo. Como você se lembra, criamos este ícone no cabeçalho, por isso temos compartilhado cabeçalho e no cabeçalho como você se lembra, colocamos seu ícone de carrinho de compras. Em vez disso, vou usar um componente que pode chamá-lo como, por exemplo, ordens e ordens. Podemos fazer compras, ou podemos dizer apenas guarda. E eu posso, por exemplo, assim. Então vamos definir esses componentes na biblioteca ordem. Então podemos ver um ovo de gerar e então eu quero gerar um componente. E este componente será colocado no projeto que é chamado ordens. E aqui podemos dizer que nos componentes, definimos ícone carrinho ou carrinho ruim. Quem pode dizer que depende de você. Então podemos ter aqui o ícone de Garth, que estará no cabeçalho. E então fazemos toda a equipe que estamos fazendo sempre eu não quero estilo inline, eu não quero testes tão bem. Então, podemos usar um seletor, bem como, que definimos anteriormente. Podemos dizer carrinho e, em seguida, ícone. E aqui podemos pular testes. E então executamos esse componente. Fizemos este comentário muitas vezes. Então não precisamos mais explicar isso a qualquer momento. Então temos agora aqui o componente que é criado, que é ícone carrinho. E dentro deste ícone de carrinho, eu vou colocar meu ícone de carrinho de compras, que eu defini no cabeçalho. E então nós também precisamos salvar tudo e verificar se nosso componente está realmente funcionando bem. Então, como eu não verifiquei a exportação, nós temos tudo isso. Vejo que ainda estou recebendo o erro aqui ou há um item de carrinho não é desconhecido. Sim. Ok. Tenho aqui erros de digitação, então vamos guardar isso. Tenho certeza que teremos agora o ícone perfeito. Agora isso não é ícone, ícone de avião. É um componente que chamamos no cabeçalho da nossa aplicação aqui. Então vamos usar este componente para observar essa placa atual. Primeiro de tudo, quero mostrar aqui quanto tempo ou quanto guarda temos aqui. Então, em primeiro lugar, na inicialização deste componente, podemos usar também o serviço de cartão. Então eu vou dizer serviço privado e, em seguida, guarda, que já definimos em nosso módulo de ordens. Então podemos dizer serviço carrinho e os erros guardas ou em Orangi em Editar, podemos dizer este serviço de guarda e, em seguida, podemos dizer obter carrinho, como você vê aqui. Assim, podemos obter o cartão atual que é carregado para a nossa aplicação. Então, primeiro de tudo, precisamos definir uma variável que é chamada, por exemplo, podemos dizer contagem de cartas. E essa contagem de cartas talvez tenha um número. E este número talvez possa ser inicializado como 0. Então podemos dizer count será inicializado como 0. E então podemos dizer que depois de obter este guarda, porque este carrinho vai voltar como um cartão. Então podemos dizer que esta contagem de cartas. Eu quero que você mostre como tudo pode ser em uma linha depois de obter o carrinho, podemos dizer que os itens porque isso vai voltar para mim guarda. E então eu digo “comprimentos”. Então esta contagem de carrinho de mão será o comprimento dos itens que estão dentro desta guarda. Então vamos salvar isso e vamos para o modelo e exibir este carrinho de compras ou este número perto desse ícone para que possamos ficar pequenos, dag. E definimos como se pudéssemos dizer “contagem de guardas”. Então, sem estilo, só para ver como estamos tendo a contagem de cartas no cabeçalho desse componente. Então, recarregamos o aplicativo. Então, às vezes, depois que você não vê essas alterações, você só precisa salvar talvez o cabeçalho novamente, então você verá essas alterações. Então, como você vê aqui, temos três itens porque em nosso armazenamento local, adicionamos três produtos. Ok, que agora temos o número dos ícones ou, ou itens que estão em nossos cartões. Toda vez que eu recarregar o aplicativo, eu terei os itens ou quantos itens em seu carrinho eu tenho aqui. Então, em primeiro lugar, precisamos também de estilizá-lo. Então vamos fazer isso como um distintivo para ser algum ícone vermelho aqui. Isso mostrará que temos aqui três itens. Então, para fazer isso, prime end também fornecendo-lhe algo chamado crachá. Você também pode usar diretamente o ícone com este emblema, ou de outra forma você pode usar apenas o crachá e colocá-lo de alguma forma e dilatar em seu caminho. Então vamos usar o básico. Vou usar esses números. Então eu vou usar este aqui. Então, se formos para suas fontes, veremos que este, que é chamado de Perigo, então este terá três e então terá cor atual, que é chamado de perigo. Então, o que precisamos primeiro para importar o módulo, que é chamado módulo emblema. Mas neste caso, no lugar onde criamos seu componente, ou no lugar onde vamos chamar esse crachá. Então, no nosso caso, será no módulo de ordens. Então, no módulo de ordens, eu vou importar isso. Então temos aqui módulo de crachá de importação. E o módulo de crachá estará na matriz de importações desse módulo. Nós salvamos e vamos novamente para o nosso ícone carrinho. Recebemos o modelo deste crachá vermelho. Então vamos aqui, dizemos “crachá P”. E em vez deste pequeno o que definimos aqui, nós apenas colocamos e a contagem de guardas seria como d dt desta teoria, o número codificado. Podemos dizer que a contagem de Garth será o valor desse distintivo. E removemos o antigo que temos, e recarregamos o aplicativo e vemos se temos o lote, bom, temos aqui também. Você tem outra opção para usar um que está vindo também com ícone? Então você pode usar este aqui. Então, podemos muito bem ir aqui e ver nas fontes, por exemplo, temos posicionado crachá e será o único. Podemos pegar, o do meio, por exemplo. Certo, copie toda essa parte. E, em seguida, removemos tudo isso porque ele está vindo por padrão com ícone. Então nós temos aqui o tipo, é colocado de volta ou a área. Então agora temos a sua cor e a contagem ou o valor deste item ou item de carrinho será a contagem de cartas, que definimos anteriormente. E nós temos algum tamanho da fonte, nós temos algum estilo. E aqui estão os dentes do calendário PI ícone. Vamos usar esse ícone, que é chamado de carrinho de compras. Então, depois de salvarmos isso, vá novamente para o nosso aplicativo no front-end. Veremos que temos o carrinho de compras aqui. Ok, parece grande, mas sim, nós podemos, você pode estilizá-lo como quiser. Você pode dar uma fonte menor aqui como você vê, porque ele especificou algum tamanho de fonte no estilo deste olho para que possamos torná-lo menor como 1,5. Será como mais claro e mais agradável e visto para os usuários todos eles. Aqui temos o item de guarda que é atualizado com o número atual de meus itens de carrinho no meu armazenamento local. Então, talvez nesse caso, vamos também estilizar este ícone para que eles possam ser os mesmos, podemos dar a mesma propriedade, para que possamos dar a mesma cor, como temos aqui, um texto de classe P secundário. Então, podemos ir para o nosso componente de cabeçalho novamente, e podemos dar este estilo para esta classe, para o ícone do usuário. Então, para não ter estilos diferentes em todos os lugares. E também, precisamos dar o estilo de cor são tamanho, tamanho fonte do ícone. Por isso, pode ser tão bem o mesmo que podemos dar aqui Estilo e ir para componente de cabeçalho. E então dizemos aqui, tamanho da fonte será de 1,5 grama. Claro, isso também será um componente no futuro quando vamos ver as ordens do usuário, quando estamos clicando neste ícone. Então, vamos substituir como isso sempre, bem com o componente como fizemos com o ícone de carrinho de pedidos. Então vamos salvar tudo agora e verificar se temos que eu estilizaria, nós não temos nenhum problema. Legal. Temos agora o carrinho e os ícones do usuário tem a mesma aparência. Mas agora eu tenho um problema como quando eu quero adicionar item a este guarda, por exemplo, vamos adicionar este. Vejo que não está sendo atualizado. Só quando me refresco. Ok. Vejo que o item foi adicionado ao meu carrinho. Então precisamos de alguma forma observar, como fazer esta variável soma e esta variável está observando seu armazenamento local, está observando o armazenamento local está observando meus itens de carrinho sempre. Então, quando Ellie mudança acontecer no aplicativo sobre seu carrinho, então isso vai sentir a mudança e, em seguida, ele vai relatar e mostrá-lo para mim aqui. Então vamos usar para isso os observáveis. Então, para entender observador vai mais, você vai vê-lo aqui. Então vamos fazer alguma variável em seu serviço que é chamado sujeito, e este assunto é observável. Então podemos subscrever este observável como eu posso, esta, esta contagem variável de guarda. Quando é que vamos assistir sempre esse cartão como o carrinho está sempre atualizando. Então toda vez que eu clicar em algum lugar para adicionar ao carrinho, remover alguns cartões, então isso vai ouvir isso e dizer, ok, eu estou atualizando, eu tenho alguma atualização. Vamos fazer isso. Então, passo a passo, vamos fazer o observável. Como podemos fazer um público observável. Observável em público para mim, posso fazê-lo dentro do serviço de cartões. Então podemos definir um observável simplesmente chamando algo chamado assunto. Se você se lembrar, usamos o assunto também em qualquer shell ou terminando a assinatura como você viu anteriormente. Então podemos usar um assunto também aqui. Mas em vez disso, estávamos dizendo assim, podemos definir guarda e este carrinho, como eu disse, sempre, observáveis são sufixos com este cifrão. E não podemos dizer que este cartão tem um tipo ou assunto e o assunto terá um tipo que colocamos anteriormente qualquer, se você lembrar, quando estávamos terminando assinaturas. Mas agora vamos dizer que este assunto conterá o carrinho. E este assunto, estamos fazendo um novo assunto. Inicializamos isso rapidamente. Nós criamos objeto. Ok, Então, nesse caso, quando eu ir para o meu componente aqui, como por exemplo, vamos dizer ícone carrinho, então eu não vou usar obter Guarda apenas. Obter guarda só está retornando para mim que guarda atual quando eu carregar o aplicativo. Não, quero observá-lo de alguma forma. Então podemos dizer também aqui, este serviço de cartão ponto. Então temos aqui definir o seu serviço de carrinho e, em seguida, o carrinho, este item ou esta variável que eu defini. E então eu digo para assinar. Então eu vou assinar este cartão, que vai devolver para mim o carrinho em si. E então o cartão em si. Posso obter o comprimento e atribuí-lo à contagem de carrinhos deles. Então não podemos dizer aqui que esta contagem de cartas será o guarda. Este seria um carrinho. Bons itens comprimento ponto. Então, nesse caso, teremos o carrinho sempre observado. Assim, cada mudança acontecer em seu carrinho será observada pela contagem de carrinho. Ok, agora, vamos remover esta linha. Então, agora, se eu for para o aplicativo, eu estou chegando aqui 0, ok, eu quero adicionar algo ao carrinho deles. Ainda não foi observado. Então, um estado de mudança, como aqui estamos dizendo que a mudança não é sentida como este item ou este item de armazenamento local cartão não está sentindo as mudanças. E também não podemos observar isso também. Então precisamos dizer a este assunto que atualize você mesmo. Então todo mundo que está se inscrevendo em você pode sentir essa mudança. Então, como podemos fazer isso? Se formos ao serviço de guarda. No final deste método, vou dizer depois de inicializar tudo, Eu, antes de dizer devolver o carro, Eu não posso dizer este cartão ponto, o assunto que eu criei. E depois o próximo. Em seguida, em vez de devolver o cartão, Eu posso dizer também em seguida, atualizar o carrinho. Então, nesse caso, todo mundo que está adicionando, quando eu adicionar algo ao seu carrinho, todo mundo que está se inscrevendo para este valioso, ele vai sentir a mudança porque então isso se atualizou e com o mais novo guarda depois que eu adicionar itens a ele. E então todo mundo que se inscrever, ele vai dizer, ok, isso é uma atualização. Vou pegar essa atualização e mostrá-la ao usuário. Então, para isso, eu quero mostrar a vocês um registro do console. Então você vê que este log console será executado toda vez que eu tenho, por exemplo, alguma atualização no carrinho que está adicionando itens ao seu carrinho. Então vamos salvar isso e ir para o nosso aplicativo. Novamente. Será recarregado. Ok, agora nós ainda temos o Euro porque nós não inicializamos a assinatura ou assinante. Então eu vou adicionar alguns itens ao seu produto. Então, por exemplo, vou adicionar este. Quando eu clico, eu vejo que este tem um 5 porque ele foi atualizado. O carrinho que temos ou o observável que definimos lá. E este observável. Sempre observando, ou este item está sempre observando o que estamos fazendo com seu carrinho. Então glicose, eu tenho aqui como o registro do console que eu mostrei a vocês. Então, quando eu clicar em Adicionar ao carrinho, o ícone aqui na parte superior vai sentir a mudança e console. Então aqui podemos dizer, por exemplo, clique, eu vejo que você olha, que são itens que o guarda foi atualizado. E por causa disso, que temos aqui, então o guarda observável ou guarda objeto, irá atualizar a Intel e dizer a todos que estão assinando, como no nosso caso, este ícone de carrinho que tudo bem, estou atualizado. Atualize você mesmo e faça o código que você estava fazendo dentro da assinatura. Então, nesse caso, estou consolando o registro e atualizando a contagem de guardas, que foi eu que defini aqui. E usei no valor deste crachá, então vejo o número aqui. Mas agora quando eu recarregar o aplicativo, Eu ainda tenho 0 e não recebendo que a contagem atual ou anterior da minha guarda onde eu tenho anteriormente no meu armazenamento local porque a Europa que o armazenamento ocre está bem, tudo está bem. Temos cinco itens, mas não podemos ver a atualização aqui. Porque também quando inicializamos o exemplo completo que guarda, se você se lembrar, estávamos dizendo que se não há nenhum cartão, então ok, atualizar ou criar um novo guarda nesse armazenamento. Caso contrário, se não houver nenhum cartão, então podemos dizer aqui também, este assunto tomou guarda será ou que próximo atualizado com o cartão atual que você tem aqui. Então, por exemplo, eu posso dizer este. Então, nesse caso, eu posso dizer outra coisa, se houver carrinho, em seguida, atualizado para mim com o cartão atual. Então, quando não houver cartão, inicialize um novo cartão e adicione-o ao armazenamento local. Caso contrário, atualize o sujeito que gerunda, que estou observando com o guarda que você encontrou no depósito local. Então vamos salvar isso e ir para o aplicativo novamente. Você verá que isso não está funcionando novamente. Então isso é porque estamos usando assunto. É melhor também usar algo é semelhante ao assunto, mas é chamado de sujeito comportamental. Você pode, em vez disso, você pode usar assunto comportamental. Então está fazendo exatamente o mesmo. Mas nós, porque estamos indo, estamos chamando isso no instrutor do construtor do módulo do módulo, então isso não estará pronto. O assunto ainda não está pronto, então não será executado e não receberá o próximo. Então isso está sendo executado e terminado antes que esse assunto seja inicializado. Então, é melhor usar para esse assunto comportamental. Temos o seu assunto, é exatamente o mesmo. A diferença aqui que você precisa dizer behaviors objeto deve ser inicializado com algo como dentro de seu carrinho. Então não podemos dizer simplesmente aqui, este ponto obter carrinho. Então eu recebo seu carrinho que está no armazenamento local, e então eu crio meu assunto de comportamento. E neste caso, não precisamos mais disso. Então, depois disso, temos o carrinho inicializado com o guarda atual, que é armazenado no armazenamento local. Então, desta forma, eu vou chegar aqui cinco cada vez que eu recarregar meu aplicativo. Então, agora, quando estou adicionando um novo produto ao meu armazenamento local, eu terei, por exemplo, este. Podemos ter Adicionar ao Carrinho e chegarmos aqui, seis fica aumentando e observando essa contagem. E quando eu recarregar o aplicativo, eu ainda tenho seis aqui. Ok, vamos tentar remover todo o carrinho que está no depósito local. Então totalmente e ver para o usuário que está vindo pela primeira vez para a nossa loja. Então eu vou excluir selecionado. Apaguei o guarda. Agora eu vou para a página inicial novamente e eu sou novo cliente vindo para a loja. Quero abrir o console. Quero ver se estou recebendo algum erro. Então, recarregamos o aplicativo. Então eu digo aqui, recarregue. Primeiro, recebo um erro. Não é possível ler itens de propriedade de null onde eu recebo esse erro no componente ícone do carrinho. Ok, precisamos ir para este componente porque vimos que esses itens não estão definidos porque o guarda ainda não foi inicializado. Então, vamos remover este log do console. E então nós dizemos se o cartão tem item ou que guarda que eu tenho é definido, então me dê o comprimento dele. Então, nesse caso, temos esse ponto de interrogação. Caso contrário, no TypeScript você pode dizer para ponto de interrogação quando este indefinido. Então guarde o Conde, dê como 0. Então é como se fosse outra coisa, então a contagem de guardas será essa. Mas quando este é indefinido por causa deste ponto de interrogação, para evitar o erro no console como vimos anteriormente, em seguida, retornar como 0. Então, salvamos isso novamente, recarregue o aplicativo. Nós não temos nada agora em sua guarda, então ok, nós não temos o erro, mas para testá-lo mais, precisamos remover, novamente, recarregar o aplicativo, ir para o console deles. Legal, não temos nenhum erro. Agora vou adicionar um item a este Karp. Eu clico mentiras, eu tenho 123. Sim, como vê. Então, quando eu clico ou outro produto, vejo que ele não é adicionado porque eu estou recebendo apenas a contagem de itens. Então eles são repetidos produto não será contado aqui. Portanto, temos apenas os diferentes produtos. E vamos ver quando vamos para o detalhe de guarda, vamos ver quantos itens temos e quantas vezes o usuário clicar em Adicionar ao carrinho para você na próxima palestra como lição de casa, Eu quero que você adicione um pop-up como você vai ver, e eu explico no dever de casa. Então, quando eu clicar em Adicionar ao carrinho e tudo é sucesso, Eu quero que você mostre um pop-up como o item é adicionado com sucesso ao seu carrinho. Então, neste caso, o usuário não clicará muitas vezes e ele não sabe disso. Ele, ok, é adicionado ao depósito local tudo porque certo. Mas não estamos tendo qualquer notificação para o usuário, o que não é uma boa experiência. Como última pergunta, precisamos acabar com as assinaturas aqui? Não, não precisamos disso porque estamos sempre assinando o carrinho deles. Nós não precisamos ter n assinatura porque eu não vou sair primeiro. E este componente, este cabeçalho é sempre existir. Este componente sempre criado apenas por uma vez e não está sendo criado várias vezes. Então eu não estou criando multicolor de várias assinaturas. Mas aqui temos apenas uma vez e é o tempo todo, o tempo todo quando estou visitando ou navegando no meu aplicativo, eu tenho este item inscrito e ele está observando o carrinho sempre. Então, nesse caso, como um resumo, nós criamos em seu serviço carrinho algo chamado comportamento sujeito, que é observável e este observável será observado e não desafiar todas as pessoas ou todos os itens ou seus componentes que são subscrever este comportamento para sobre as suas alterações. Então, quando eu digo ponto cartão próximo, por exemplo, neste caso aqui nós temos um deles. Aqui temos ponto próximo. Então estou atualizando esse assunto comportamental. Então ícone carrinho vai ouvir esta mudança e executar o código que será dentro da assinatura com base em sua guarda que é retornado a partir desse assunto comportamento. Então esta é a maneira mais fácil de observar as coisas na minha aplicação. Caso contrário, podemos usar NG RX, o que é mais complicado. E para isso, eu não vejo como um calor para usar MDR x ou que é gestão estadual apenas para este caso simples, que temos apenas quatro esse cartão. Eu vou, é claro, no final desta seção, explicar como adicionar em armazenamento de estado RX usando esquemas NX. E também vamos implementar esse carrinho como na loja estadual, não como temos aqui com observáveis. E você tem opcional se você quiser seguir o MDR x caminho, ou você pode seguir esta maneira simples e agradável aqui. 158. Adicione produtos ao carrinho com quantidade: Tudo bem, agora nós vamos nesta palestra para adicionar produto ao carrinho, mas com a quantidade, se você se lembra, nós estávamos adicionando aqui apenas um item deste produto. Então agora estamos indo para o detalhe do produto e vamos selecionar Quantidade. E então eu vou clicar em Adicionar ao carrinho. É exatamente o mesmo que fizemos com o componente do item do produto. Vamos fazer com componente detalhe do produto. Então, primeiro de tudo, eu vou ter esse item de produto aqui. Se você se lembra, nós estávamos usando o serviço de carrinho também. E no serviço de carrinho estávamos usando o produto publicitário para o carrinho. Então, a principal diferença aqui, vamos usar o nas páginas, página do produto. Temos que usar essa quantidade que estamos recebendo a partir da quantidade de entrada ou o número de entrada e, em seguida, colocá-lo ou passá-lo quando estamos criando o item do produto. Então, no componente de página do produto, vou para o arquivo TypeScript e, em seguida, eu vou ter o produto ou serviço novamente. E então vamos usar este serviço de carrinho quando eu vou adicionar produto ao carrinho. Então, primeiro de tudo, podemos obter essa quantidade. Então nós definimos anteriormente a variável que é chamada quantidade. Então, para como fazer algum prefixo, podemos inicializar este item com um e min pode ser um a 100, não tem 0. E também podemos inicializar a quantidade com o número um. Então podemos dizer aqui em vez de número, você pode dizer também, este pode ser um. Mas é claro que ele ESL e reclamar quando você define o tipo e, em seguida, o valor, porque o valor é um. Então é sabido que é um número. Então, automaticamente, TypeScript irá dizer que este é um número. Então dizemos que essa quantidade foi inicializada e então vamos salvar tudo. Nós tentamos isso depois de atualizar nosso aplicativo. Então vemos que não foi inicializado. Eu acho que eu tenho um dipolo, sim, ok, nós precisamos ter aqui igual, não digitando. Então podemos ter aqui quantidade é igual a um. E como vemos que ele é inicializado com um e eu não posso ir para 0. Agora, quando eu clicar em Adicionar ao carrinho, eu preciso adicionar este item ao carrinho. Então, primeiro de tudo, eu posso disparar para chamar o serviço de guarda exatamente como fizemos com aquele item ou no item do produto que tínhamos definido anteriormente. Então, primeiro de tudo, eu vou ter a criação de item de carrinho. Então eu diria item const carrinho. E este item do Garth será do tipo de item do carrinho. E será igual a como o item em si, que será ID do produto, será a ID do produto onde eu estou agora. Então, se você se lembra, nós temos aqui o produto que está recebendo, então não podemos dizer depois que nós temos este ponto-produto porque nós não definimos aqui. E nós preenchemos nossa variável ou membro da classe com o produto que temos do back-end aqui. Então, podemos dizer que este ponto produto ID ponto. Então eu estou sentindo que o ID do produto do item Garth seria este ponto ID do ponto do produto e uma quantidade será essa quantidade de ponto. Assim como uma quantidade será alterada com base nas minhas alterações aqui porque eu estou usando o modelo NG, que terá ligação bidirecional. E ele irá refletir que sempre ou refletir sempre a página ou número de entrada, que eu estou mudando aqui do usuário. E então ele vai colocar isso na variável que é chamado de quantidade. E eu defini isso aqui como uma classe membro como você vê aqui. Então agora vamos novamente e adicionamos este item de carrinho ao nosso carrinho. Então eu vou dizer isso, porém, serviço de guarda, ponto, adicionar ou definir item de corte. E então eu passo o item do carrinho, que eu quero. Então, quando salvamos isso e tentamos isso em nossa aplicação, então eu vou salvar aqui, e eu escolheria cinco ou seis e, em seguida, adicionar ao carrinho. E então este item será adicionado ao meu carrinho. Então vamos verificar se temos isso como realmente em nosso armazenamento local. Então temos aqui dois itens. Vejo aqui que não foi adicionado. Talvez este botão não esteja funcionando. Então vamos voltar novamente ao nosso aplicativo e verificar. Certo, temos aqui o botão. Nós não temos um botão PI, então podemos usar apenas Glick, como nós não estamos indo para usar o onclick que está vindo apenas com botão PI do Prime NG sei que estamos tendo um botão. Então, o, ainda mais o botão para disparar que este evento podemos usar apenas clique, mas quando você usa a energia principal na documentação eles disseram que você tem que usar onclick. Então, nesse caso, temos apenas botão. Vamos alterá-lo para clicar. Então vamos salvar e ir novamente para o nosso aplicativo. E depois verificamos isso. Então, selecionamos quatro. Nós adicionamos, ok, cartão atualizado. Temos agora o item que tem quantidade cinco, como porque temos anteriormente no carrinho. 159. Página para carrinho: Ok, nesta palestra vamos modelar essa página de guarda, essa página atual. Ele vai ter todos os itens do carrinho onde eu vou enviar para pedido e, em seguida, eu posso rever meu carrinho e UTI o que eu pedi. E eu sempre posso alterar a quantidade, quanto ou quantos itens eu pedi. E, claro, vamos listar como algo como o meu carrinho tem três itens e temos algum botão gostaria de voltar para a loja novamente e também algumas informações. E também vamos implementar a exclusão de um item do cartão. Então, primeiro de tudo, vamos fazer este modelo que eu estou mostrando a vocês aqui. Então, primeiro, vamos criar um componente que é chamado de página de guarda, e será na página Ordens. Então eu vou para um console ECS e, em seguida, clique em Gerar e, em seguida, componente. E então eu vou ter aqui as páginas nas páginas dentro da biblioteca de pedidos. Então eu vou ter aqui páginas e, em seguida, página carrinho. E então vamos selecionar o projeto que serão pedidos, porque precisamos fazer isso na biblioteca de pedidos. E a mesma coisa para outros componentes. Então temos um estilo de vida. Nós também temos, pulando o teste. Então aqui temos tudo isso e também o seletor pode ser pedidos e página de carrinho. Então, neste caso, teremos um componente criado. Nós só precisamos agora para encaminhar este componente para suas rotas. Então, se você se lembrar de como criamos rotas no módulo do aplicativo. Então temos aqui no módulo de aplicativo de loja de energia, criamos algumas rotas e temos apenas a rota principal. Mas no módulo de produtos, estamos definindo também os módulos filho. Faremos o mesmo como fizemos exatamente com o módulo de pedido ou como fizemos isso nos produtos. Então vamos fazer isso. Então primeiro vou à biblioteca de encomendas. Vamos fechar tudo e voltar para os lábios. E, claro, já importamos a ordem é módulo em nosso módulo de aplicação, então não teremos nenhum problema. Então fechamos tudo e nos movemos para nossas bibliotecas e temos aqui ordens. E eu vou implementar as rotas no módulo de ordens. Então definimos uma constante que é chamada rotas. E terá um tipo de rotas. Então temos aqui rotas e ele terá tipo de rota e a rota que estamos importando de Angular. E este será array, e este array será objetos de matriz, e os objetos serão Bath. E, por exemplo, posso definir o primeiro caminho, que pode ser carrinho. E o componente deste caminho será o componente que eu criei, que é o componente da página de guarda. Então agora estamos prontos para isso e nós apenas ir para rotas novamente ou para o módulo roteador. E dizer que para criança como fizemos exatamente com os produtos e, em seguida, eu passar as rotas que eu criei. Então agora temos que verificar se tudo está funcionando bem. Vou à minha candidatura, estou a mostrar esta. Se você vê que é porta indiferente, Eu tenho demo, Eu já preparei, modo a mostrar-lhe o que vamos fazer e, em seguida, implementamos isso facilmente. Então, primeiro de tudo, eu quero que quando eu clicar neste ícone, eu vá para a página do carrinho deles. Então nós criamos o componente para o ícone carrinho e nós só precisamos adicionar algo que é chamado roteador, link roteador. E o link do roteador vai me levar para a página do carrinho. Tão simples. Então nós apenas salvar, ir novamente para o aplicativo e recarregado e nós clicar no cartão. Tenho aqui um erro, preciso removê-lo. E então voltamos para o carrinho deles novamente ou para a página novamente. E vamos ver que somos capazes de ir para a página do carrinho funciona. Então isso que estamos indo para modelar. Então vamos para o componente que é chamado de página carrinho. E na página do carrinho, bem como em cada componente, definimos primeiro com a página do carrinho ou o nome do componente. E então dizemos div p grid, e vamos usar a grade aqui também. E como você vê, temos no modelo que temos aqui oito colunas, porque aqui eu vou colocar o resumo das encomendas como o preço total e se há impostos e navios ou algo assim. Então, primeiro de tudo, podemos ter a grade e terá oito colunas. Então eu vou colocar div chamada e, ou, desculpe P chamada. E 8 primeiro div terá como um botão e podemos dar-lhe assim. E isso terá um botão PI, então podemos usar o botão também. Então o botão, eu posso tirá-lo da energia Prime. Então, podemos usar exatamente o mesmo botão como fizemos anteriormente muitas vezes. Não tenho que repetir. Então a única coisa que falta aqui é que eu preciso importar o módulo novamente do botão. Então nós só precisamos ter aqui módulo de botão. Então temos que adicionar módulo de botão, que está vindo de energia Prime também. Título. Então, no título, teremos algo como o meu cartão para que possamos criar outra div. E esta div terá também H4 e H4. Terei um texto que se chama meu carrinho. E então, como eu posso colocar a informação, por exemplo, podemos dizer contagem de cartas. Então podemos colocar aqui como a contagem do carrinho, como vamos levá-lo também. Já fizemos isso com a navegação, mas podemos fazê-lo novamente aqui para corrigir a informação. Então nós temos aqui H4 e também podemos adicionar depois que alguma frase como nós temos aqui como envio após pagamento, tempo de entrega, sim, algo assim. Então também podemos adicionar essa inflamação. Então vou adicionar outra div. E dentro desta div, posso dar-lhe uma aula também. E este vidro, podemos dar-lhe um transporte de guarda, por exemplo, informações, para que possamos colorir. E então podemos colocar o texto aqui. Então, é claro, este texto pode ser dinâmico com base nos métodos de envio se você implementar isso no back-end. Então vamos salvar e estilizar esta parte. Tenho certeza que não funcionará diretamente. Precisamos fazer um pouco de estilo. Então primeiro precisamos ter um saco para mostrar o botão. Então todos nós podemos remover este botão ou podemos deixá-lo assim. Então, podemos ter outro método para ele aqui no script componente. Para que possamos voltar às compras. E aí dentro vamos ter o botão onde ele me levaria de volta para a loja. Então eu preciso no construtor, eu preciso chamar o roteador. Então eu diria aqui roteador privado. E então precisamos de um roteador. E dentro deste roteador, vamos ter pedido o botão Voltar. Vamos dizer que este ponto roteador navegar. E então especificamos a navegação que serão produtos. Então eu vou colocar ou eu vou voltar para a página que é chamado de produtos dessa forma. E vamos ver que temos base em nossa página. Então, se eu for clicar de volta para como loja, então eu vou voltar para a loja como eu era, quem você é como eu mostrei a você com aquele exterior e aqui temos o meu cartão, este número, nós vamos substituí-lo com o cartão atual. Os itens contam. E aqui, transportando vamos estilizá-lo. Então só precisamos adicionar essa aula de alguma forma. Então, primeiro de tudo, eu preciso definir uma classe ou um arquivo ou arquivo de estilo, que será baseado nos lábios exatamente na biblioteca onde criamos. Portanto, não daria nenhum conflito ou não nos confundirá ao ver onde ele está. Então eu vou dar a este cartão que CSS, eu criar um novo arquivo e este arquivo, eu vou importá-lo nas ordens. Então aqui temos que dizer Importar, não URL, mas apenas importar esse link que queremos importar, que é card dot SCSS. Então, depois disso, temos que ter certeza de que é também encomendas é importante em qualquer loja. Temos de verificar isso, está bem? É importado, por isso estamos a trabalhar bem aqui. Então, como você viu anteriormente, criamos uma classe que é chamada de página de guarda, como podemos dizer página de carrinho. E estes cartões página podemos dar-lhe, por exemplo, a altura média. Gostaria de dar alguma altura mínima para o carrinho aqui. Então podemos ter aqui algum espaço vazio para nos deixar trabalhar bem. E é claro que vou implementar mais tarde quando não tivermos nenhum elemento no carrinho deles. Então podemos mostrar como se seu carrinho estivesse vazio. Por isso, temos de implementar isso também. E depois disso vamos ter que item carrinho ou tivemos que dissemos que precisamos criar o item Garth. Então podemos dizer cartão de ponto. E dentro deste cartão de ponto, podemos ter esse envio, desculpe, frete. E podemos dar a este transporte como cor verde. E podemos empurrar o contexto um pouco com 15 pixels ou podemos dar como nenhuma necessidade para isso. Nós podemos apenas empurrá-lo usando as classes que estão prontas em nossa extremidade principal. Então podemos dizer como aqui, B ou margem inferior, que será como se pudéssemos levar cinco. E também podemos fazer isso para cada div que criamos. Então para dar alguns espaços entre todas essas folhas para não ficar preso um ao outro. E salvamos tudo. E então estamos prontos com as primeiras linhas. Vamos discar agora o item de guarda, que é este. Assim, o item do carrinho também estará dentro de uma div. Então temos aqui algo como div e podemos dar-lhe um nome que é chamado item carrinho. E dentro deste item de guarda, vamos ter outra grade porque eu quero ter como divisão da grade. Então podemos ter aqui duas colunas para a imagem. Exemplo 9 coluna para a inflamação e o nome, e também três colunas para o botão aqui. Então é claro que você não pode, você sabe como, você tem que saber que quando eu estou criando grade dentro de um aqui, então dentro de oito colunas, então eu também tenho aqui novamente 12 colunas. Então, será relacionado com o pai. Então estou dentro do quê? Estou dentro da chamada P oito. Eu não estou dentro do como toda a largura da página porque aqui se você quiser ver temos b, desculpe, lembre-se. E então podemos dizer 12 menos 8 é 4. E aqui vamos colocar o resumo da ordem, podemos chamá-lo. Então aqui nessa área, neste espaço, vou colocar o resumo da ordem. Até agora, o modelo do item do carrinho, como dissemos, criamos uma nova grade. Podemos dar uma grade. E dentro destes ser grande fim de semana, outro vivo para coluna que irá conter a imagem. Então, podemos dizer ferramenta de chamada P e dentro dele teremos imagem item carrinho. Então podemos dizer diretamente imagem terá a fonte. Não consigo captar nenhuma imagem do Google. Copiei uma imagem. Vou postar aqui. Mas é claro que vamos mudar isso também. Então não podemos dizer que este div vai ter uma aula. Podemos dizer carrinho, item e imagem. Então, sempre é melhor prefixar assim. Então podemos usar esse benefício da SESS. Então, podemos prefixar sempre com um pai, Eu digo item lacuna e, em seguida, eu passar aquela coisa que eu quero o estilo. E depois disso, precisamos também da coluna, a segunda coluna que estará perto dela, onde terei a informação de seu produto. Então podemos ter sido chamados, por exemplo, sim, podemos dar oito ou sete também. Então podemos ter agora nove colunas. Então podemos dar o nome do produto. Então, podemos dar div e ele terá o nome do item do carrinho. Então, teremos o nome do item do carrinho, que será como hard-codificado. Agora podemos codificar as coisas que podemos dizer apenas o nome do produto. Podemos ter também um div e que terá carrinho, item e, em seguida, preço. E podemos dar também algum preço codificado e usar a bandeira da moeda. Assim, podemos dar moeda como o tubo que criamos anteriormente, tudo o que conhecemos ou falamos sobre isso anteriormente. E depois deles vamos ter o botão Excluir. Então, se você ver que eu quero excluir também o botão ou excluir o produto do carrinho. Claro, o botão na extremidade nobre. Há muitos deles. Um deles é apenas com ícone, então você pode ter um botão em mim com ícone. Então você pode usar isso também. Então podemos criar uma div também. Podemos dar-lhe classe, que é chamado de guarda Item remover. Então, nós removemos item de guarda e será um botão PI também, e ele tem algum onclick sobre ele. Então nós temos botão P e este botão B terá lixo ícone, exatamente como nós o obtivemos de ONGs privadas e, em seguida, excluir item guarda. Então eu preciso saltar para o arquivo e criar o método que é chamado item CreateCars. Podemos deixá-lo vazio por enquanto. Então, depois disso, criamos o primeiro lado. Então vamos verificar se está tudo bem. Então, depois de carregar o aplicativo, vemos que nada é estilizado. Precisamos estilizar isso. Então vamos agora para o arquivo de estilo. Vou ter aqui, o estilo de novo. Então precisamos estilizar todos os itens que criamos. Então eu escondo este painel. Podemos também encerrar tudo o que temos anteriormente para podermos ver o que vamos começar. Então, primeiro de tudo, precisamos ter o item, como você vê aqui. Temos alguns um fundo branco e foi fronteira e fronteira raio. Então eu vou ter aqui no cartão. Primeiro, vou saltar para dentro e dizer que quero um item. Este item terá uma cor de fundo de como uma ampla e também alguma borda, que será como um cinza mais claro. E podemos dar-lhe também algum preenchimento para que possamos empurrar o conteúdo dentro de 15 pixels e podemos dar também aquele raio de fronteira, que eu disse a vocês que temos alguns rádios na fronteira. E então podemos dizer que a imagem que definimos aqui, para que possamos, que temos IR, imagem do item Garth e dentro dela alguma imagem que podemos também chamá-la e dar-lhe dentro deste item que temos aqui também, imagem. Assim, a imagem dentro dele há tag de imagem e terá alta para 120 e largura máxima 100%. Então, quando o site vai ser responsivo, é melhor dar-lhe como largura máxima, que é 100. Portanto, o conteúdo da imagem não sairá do contêiner principal ou do contêiner pai para não ter um problema no estilo. Então salvamos e vamos para o aplicativo, ok, Agora temos os itens dessa maneira. Então agora precisamos fazer algum estilo para o seu nome e também o preço e este botão, que já está aqui, só precisamos mudar a cor como vou mostrar-lhe mais tarde. Então, primeiro de tudo, precisamos estilizar o nome que vou dar aqui. Styling ou uma classe que é chamado de nome. Então, como eu disse, este é um benefício de ter Garth e, em seguida, item e, em seguida, nome e isso o que estamos fazendo como podemos dar este prefixo e, em seguida, nomear como você vê aqui. Então podemos obter o benefício do SCSS aqui. Portanto, o peso da fonte deste texto será 600 e o tamanho da fonte pode ser 1 para EM. Então podemos dar um tamanho um pouco maior. E podemos colocar esse conteúdo sob ele cerca de 15 pixels porque, como você vê, ele está aderindo um ao outro. E pelo preço, vamos dar as mesmas propriedades que estão aqui, exceto que vamos colorir com laranja ou nossa cor primária. Então, aqui a cor será a cor primária, que eu defini em meus arquivos SAS. E vamos ver que temos o estilo bem aqui. Vou mostrar-lhe mais tarde como colorir todos os botões com a nossa cor laranja com uma cor primária. Mas primeiro vamos seguir em frente e vamos implementar, que eu disse antes que precisamos implementar o, a contagem ou o que é chamado de quantidade. E também o subtotal, se você se lembra, fizemos isso já na página do produto do cartão e temos aqui a página de detalhes do produto que temos este item de quantidade, então podemos usá-lo da mesma forma como usamos do prime end. Então podemos copiá-lo. E primeiro, mas você tem que criar outra coluna porque nós terminamos duas colunas para a imagem e sete colunas para o seu conteúdo e excluir botão. Agora precisamos criar outra coluna, que são o resto. Então podemos dizer p call, e então ele terá quatro ou ordenado3. Então temos 12 colunas no total. E dentro dessas 12 colunas no total, vamos ter esse número P ou o número de entrada que definimos em nossa página de produtos. Então, se formos para a página de detalhes do produto, que você possa ir rapidamente, pulou para ele. Podemos dizer produto. E Page, como você vê aqui, eu pulei diretamente para este componente. E temos neste componente que chamamos de botão de quantidade, que é este. Então podemos copiar tudo isso. Será exatamente o mesmo. Então precisamos voltar ao nosso componente que está aqui. Então definimos o que é também aqui. Então não precisamos, por exemplo, de todas essas informações. Nós só precisamos ter guarda, por exemplo, item e nós dar-lhe quantidade. Então, nesse caso, podemos estilizá-lo e dar-lhe um pouco de classe. E nós temos o rótulo não precisa como vemos no design para que possamos removê-lo. E p número de entrada não é importante. Precisamos importar também. Verificamos como temos em energia salmoura. Então podemos ter aqui entradas, múltiplas entradas. Um deles é o número de entrada, então deve ser este. Você pode copiar, ok, módulo de número de entrada. Então precisamos importar este para o nosso módulo de pedidos. O mesmo que fizemos com o botão e outras coisas. Então nós apenas colocar aqui módulo número de entrada. Então, de volta ao nosso modelo para ver se tudo está funcionando bem. Ok, nós temos, nós não precisamos usar o modelo NG. Vou mostrar-lhe mais tarde como podemos obter o valor disso. E o modo será este UML, mostrar botões através da quantidade ID de entrada, e ele terá. Então agora temos esse número de entrada. Vamos recarregar a página. Ok, nós vemos como um problema aqui que ele está saindo do nosso módulo. Isto é, eu não quero que você explique tanto isso porque nós temos que adicionar também outra classe para este componente que é chamado P Floyd, que é será para essa grade. Então precisamos colocar na grade fora do item de guarda também, p Floyd, então nesse caso, ou fluido. Então, neste caso, teremos a classe certa fixada aqui porque o fluido P é tracejado com. Modelos ou os componentes de formulário do prime end g. E você precisa usá-lo toda vez que você estiver indo para usar componentes de formulário dentro de alguma grade. A última coisa que eu quero ter aqui, apenas adicionando subtotal. E quanto é o subtotal deste item de produto subtotal, quero dizer, com ele, como se eu precisasse saber o quanto nossos muitos são Homer para este preço deste produto multiplicado pela quantidade. Então, neste caso, eu posso usar também o conceito de subtotal. Então temos aqui também itens de carta, subtotal e subtotal. Temos espaço aqui porque eu vou dar-lhe outra cor, que será verde e será codificado para um $100. E podemos estilizar esses itens ou os componentes que adicionamos agora. Então, primeiro de tudo, eu preciso estilizar essa quantidade. Então temos aqui P ou a quantidade do item do carrinho. Então, a classe de quantidade do item carrinho que criamos aqui e dentro do número de entrada. Então podemos dar algumas margens, como margem. Podemos dizer, podemos dar dois quando t, como 20 pixels ou 15 pixels em geral, como podemos, e dar-lhe assim de cima e para baixo e da esquerda e direita, nada que possamos mantê-lo como 0. E podemos também para o subtotal, podemos dizer subtotal classe total, podemos dar font-weight, que pode ser 600, como um pouco ousado. E também o valor dentro deste subtotal, como eu defini aqui, eu tenho itens de guarda subtotal, e, em seguida, guardar itens subtotal e, em seguida, valor. Então eu posso usar esse benefício de assim, e eu dar-lhe uma cor verde. Vamos salvar tudo e ver se estamos fazendo o certo. Bom Agora temos a nossa inicialização guarda está pronto para os botões que estão aqui. Precisamos colorir com nossa cor primária, que é laranja também. Então você pode fazer isso facilmente indo para a página do carrinho e dizer que eu quero estilizar todos os botões e dar-lhes cor de fundo como fizemos anteriormente. Então, se você se lembrar, nós demos cor de fundo, cores primárias e bordas é 0. Então você pode colocá-lo aqui, ou se você sentir que você está usando que sempre, você pode colocá-lo no arquivo raiz aqui NG shop. Você pode, se você se lembrar, nós adicionamos aqui alguns óculos e também você pode dizer que apenas todos os botões dar-lhes cor de fundo. A cor primária será assim, e a borda será 0. Então você pode fazer isso. Tudo o que pode fazer dessa maneira. Assim podemos ver as mudanças. E vemos que todos os botões têm essa cor primária, que temos. Na próxima palestra, vamos ver como sentir esses dados de um produto real. Então agora temos apenas o produto. Nesse caso, precisamos sentir que o carrinho com dados reais dos produtos do banco de dados que o usuário selecionou e adicionou ao seu cartão. 160. Conecte o carrinho com produtos: Ok, nesta palestra vamos conectar o carrinho com produtos. Como você vê aqui, eu tenho dois itens no meu carrinho, mas eu não posso exibi-los aqui. Então nós estamos indo para conectar este carrinho, que temos agora a página do carrinho com um produtos reais que estão dentro dele. Então, a melhor maneira de fazer isso, nós vamos pegar os serviços do produto. Então, primeiro de tudo, vamos para a página do carrinho como fizemos anteriormente. E agora vamos implementar aqui os dados codificados que introduzimos aqui com os dados reais. Então, primeiro de tudo, eu vou ter como algum módulo onde eu vou ter o item do carrinho com seus detalhes. Então, no início, aqui podemos começar a usar esse serviço de guarda ou como vimos anteriormente. Então eu vou aqui serviço de guarda particular. E depois importarei o serviço do carrinho. Depois disso. Na inicialização desta página, eu vou ter outro método que vai me dar a inicialização de sua página de carrinho. Então, em NG nele, vou usar um método como podemos chamá-lo, por exemplo, obter detalhes do carrinho, por exemplo. E então definimos os detalhes deste cartão. Então, novamente, temos aqui obter detalhes do cartão e eu vou dar-lhe como um particular detalhes do cartão Git. E dentro disso eu vou usar esse serviço de cartão. Então, o serviço de carrinho, Vou observar o cartão atual, que definimos anteriormente e temos observado, então eu vou dizer aqui carrinho. E então pegamos cachimbo, fazemos um cachimbo. E então nós temos que lembrar que para fazer take até como quando eu sair desta página, eu vou destruir a assinatura, possamos fazer isso mais tarde. Agora vamos mantê-lo como por jogar este e, em seguida, assinar. E então eu obteria o, por exemplo, o cartão de resposta que podemos chamá-lo. E nesse cartão de resposta, vou dar, por exemplo, como itens de cartão de resposta. E então eu vou loop sobre eles porque você se lembra que nós criamos todos os itens do carrinho e vamos fazer alguns loop dentro. Então, como você vê aqui, temos para cada, então para cada item dentro do item do carrinho, então por enquanto eu tenho dois itens e eles são armazenados no armazenamento local e no meu carrinho. Então eu vou aqui, loop sobre cada item e obter o produto, e obter a quantidade até agora que precisamos, bem para rever o serviço do produto. Então dizemos aqui como item Garth. Então vamos voltar aqui todos os itens do carrinho e eu vou fazer um loop sobre eles. Então vamos log console, gostaria de ter certeza de que estamos fazendo tudo está bem. Então eu vou dizer aqui, log console para mim que item carrinho onde eu estou looping. Então, depois disso, o aplicativo é recarregado. Abrimos o console novamente e veremos que temos dois objetos, um com ID do produto e quantidade, e um com ID do produto e quantidade. Mas o id, como você vê, não é suficiente porque eu preciso do nome do produto, o preço, a imagem, e também este up filha, a quantidade, tantas informações sobre o produto. Então eu preciso usar o serviço do produto. Então, para isso, podemos usar também esse serviço de produto. Mas eu tenho certeza, como você não tem que seguir isso porque eu sou, eu quero mostrar-lhe um erro que vamos dizer cara agora, e vamos continuar corrigindo esse erro na próxima palestra. Então aqui eu tenho um serviço de produto. Eu usei para que possamos obtê-lo produto ou serviço. E será vindo do nome da organização de produtos. Então, podemos ir aqui e dizer produtos de importação de serviço de mas de onde? Da biblioteca de produtos. Então podemos ter aqui pedaços azuis e, em seguida, biblioteca de produtos. Certo, agora está tudo bem. Não temos nenhum problema. Estou indo aqui para para cada item de carrinho, se você se lembrar, temos ID do produto para obter o produto. Então vamos fazer isso. Então eu vou dizer este ponto produto serviço, ponto, desculpe, o serviço do produto que definimos ponto obter produto. E, em seguida, item do carrinho, que eu tenho aqui no loop, ponto ID do produto. Porque se você se lembrar, bom produto está trabalhando com boa ID do produto como fizemos nas seções do painel de administração. Então aqui temos esse bom produto e vamos, por exemplo, subscrevê-lo. E podemos dizer produto como este. Como se tivéssemos o produto em sua resposta e o deixássemos vazio. Quando eu salvar, obterei erro no console e também no aplicativo. Eu digo-te porquê. Isso ocorre porque estamos tendo chamadas de recursos ou dependência circular, que é chamado mencionado aqui. Porque como sabemos anteriormente que usamos esse serviço de guarda na biblioteca de produtos onde o usamos no admin ou desculpe, no item do produto, como lembramos aqui. Então, se eu ir para o item do produto na biblioteca de produtos, temos aqui a lista de produtos da página do produto, e um deles é componente chamado item do produto. E se você se lembra, usamos o serviço de cartão. Então este é um, um grande problema para mim aqui porque esse serviço de produto ou biblioteca de produtos está usando a biblioteca de pedidos. E, ao mesmo tempo, biblioteca ordenada está usando a biblioteca de produtos. Assim, dessa forma, teremos looping entre pedidos e produtos. Então, como você vê aqui, Eu usei a partir de produtos Biblioteca e aqui eu usei no, nos produtos que eu usei da biblioteca de pedidos. Portanto, esta é a razão pela qual estamos recebendo um erro aqui. E ele vai dar alguns não pode ler propriedade ou o de indefinido, que é erro indefinido por causa desta dependência circular. Como podemos resolver isso, vamos resolver isso com a solução mais simples. Como vou mostrar-lhe o nosso, EUA, vou mostrar-lhe na próxima palestra. Porque temos várias soluções para isso. Um deles está duplicando algum código na biblioteca de pedidos em relação a obter o produto. Ou vamos fazer uma classe pai que está segurando duas bibliotecas que referências. 161. Remove dependências circulares entre bibliotecas: Certo, como vimos anteriormente, temos um problema na dependência circular. Então, em outras palavras, vimos que a biblioteca de produtos está dependendo da biblioteca de pedidos. E também a biblioteca de pedidos é dependendo da biblioteca de produtos. E este conceito em x em geral ou em angular em geral é Angular irritante. Então angular não gosta de ter dependência circular porque não é tentado implementação. Quando você está indo para implementar uma biblioteca. A biblioteca deve ser totalmente independente e não depende quaisquer outras bibliotecas que estejam no mesmo repositório ou no mesmo projeto. Especialmente se você quiser se livrar da biblioteca de produtos, você não terá problemas que então eu preciso passar por isso também da Biblioteca Arbutus. Então, uma das duas soluções que vamos fazer. Primeiro, vou fazer uma solução fácil. Então, o que é, eu estou indo aqui, por exemplo, em sua página de produto ou página de carrinho. Eu vou criar no serviço de pedidos algo chamado obter produto, que é exatamente o bom serviço do produto, que está vindo do serviço do produto. Então aqui como uma solução, eu vou dizer que, ok, bom produto, e este produto será implementado, por exemplo, nos serviços de pedidos. Então não vamos usar mais esse serviço de produto. Então a outra solução é criar uma biblioteca base, como você vê aqui. Então temos, por exemplo, uma dependência que é chamada biblioteca base. Eu crio uma terceira biblioteca. E, em seguida, esta terceira biblioteca irá conter modais como pedido de produto, cartão , produto I, item de pedido, e dois também, como vários modelos, todos os modelos do meu projeto. E então terei serviços abstratos. Então eu não vou ter a implementação dessas áreas como eu não vou ter obter vendas totais e a implementação dele, não, eu vou ter abstrato. E, em seguida, a biblioteca de produtos irá implementar este serviço abstrato. Então, nesse caso, todos esses biblioteca não dependerá da biblioteca de produtos, ele vai depender da biblioteca base. Então, em qualquer mudança que você deseja fazer na biblioteca de pedidos, você precisa fazê-lo bem na biblioteca base. Ou, em outras palavras, você precisa sempre implementar alguns funcionários que são criados na biblioteca base. Então você precisa implementar sempre tudo na biblioteca ordens quando você tem, por exemplo, obter ordens método na biblioteca base. Então, na seção de refatoração, na próxima seção desta seção, vamos fazer uma refatoração e fazer esta biblioteca base. Eu não vou fazer isso agora porque agora estamos focando no lado do cartão. Vamos ver mais tarde como podemos refatorar nosso projeto e usar uma biblioteca base, então não teremos dependência circular como vemos aqui. Então vamos fazer isso. Primeiro. Eu vou ter em vez de serviço do produto, que eu importado da biblioteca de produtos, Eu vou ter serviço de pedido. Então podemos usar aqui ordens de serviço. E em vez disso, dizemos Pedidos de serviço e serviço de pedidos. Vou importá-lo de. É melhor quando você está na mesma biblioteca não importar do caminho. Você pode importar do caminho relativo. Então, o que é mais fácil e limpo. Então, agora excluímos essa parte e usamos o serviço de pedidos. O serviço de pedido nesse caso deve ter um bom método de produto. Então, atualmente, teremos duplicação de código, o que não é um grande problema para nós agora, porque vamos refatorar isso mais tarde. Então, por enquanto, eu vou para o serviço de produtos. Aqui. Onde é que está? Aqui? Temos serviço de produtos. E eu quero apenas obter produto. Então copiamos este. E então vamos para o serviço de pedidos e criamos esse método aqui. Assim, o serviço de pedido verá que o serviço do produto também. Então, nesse caso, não teremos dependência circular. Mas olha, nós temos aqui um produto, também o modelo com códigos para mim, uma dependência circular. Então talvez você possa mover o modelo aqui também, fazer uma duplicata dele, ou simplesmente colocá-lo agora como qualquer outro. E nós vamos refatorar que tudo isso nós colocamos agora qualquer, como eu vou obter o produto, claro, objeto produto, mas eu vou usar qualquer por enquanto. E para a URL da API, teremos outra URL da API aqui. Então, o que é chamado. Produtos, para que possamos chamar isso de um produto. E aqui teremos produtos também. Então, neste caso, estamos tendo a aplicação do código, mas não é problema porque vamos refatorá-lo. Então, seja paciente comigo porque estamos indo neste curso passo a passo. Então agora eu posso ver que um bom produto está funcionando bem aqui, que é exatamente o serviço de produto que criamos na biblioteca de produtos. Então agora eu vou tentar ver se eu realmente estou recebendo esses produtos detalhados do meu item carrinho. Vamos registrar o produto que obtivemos do serviço que criamos. Então, vamos salvar tudo e ir para o nosso aplicativo. Está recarregado, e não temos mais essa dependência circular. Então, como você vê aqui. Portanto, precisamos também no futuro para remover essa dependência que criamos sobre o serviço de carrinho, porque um serviço de carro é usado na biblioteca de produtos. Por isso, também precisamos de implementar isso. Então agora temos todos os detalhes do produto. Como vê, tenho dois produtos na guarda. Tenho os detalhes deles. Então vamos criar ou vamos modelar ou substituir essas coisas codificadas por nossos itens de carrinho. Então eu estou indo primeiro para criar como matriz. Podemos chamá-lo como item Garth detalhado. Então, podemos dizer itens de carta detalhados como este será o seguido do item de carrinho como para não ter apenas o ID do produto, mas ele terá o próprio produto. Então, podemos dar este produto detalhado exatamente o mesmo tipo. Podemos dar também. Os itens do carrinho detalhados. Então, nesse caso, precisamos criar esse modelo. Então, este guarda também, teremos não apenas o ID do produto do item de guarda, como temos itens de carta, produto detalhado apenas. E este produto terá ou será tipo qualquer por enquanto porque caso contrário teremos outra dependência circular. Então vamos usá-lo assim agora como qualquer outro. Mas, claro, vamos substituí-lo por um modelo de produto, que está na biblioteca de produtos. E vamos fazer isso na refatoração. Então aqui não tem itens, é um item. Então precisamos aqui um item e será uma matriz desses detalhes do item carrinho. Então precisamos importar isso também do nosso modelo de carrinho. Nós definimos aqui e temos também a quantidade que vamos adicionar também outros campos, como veremos mais tarde. Então, voltando para este detalhe do item carrinho, lembre-se de inicializar sempre que com matriz vazia porque nós vamos preencher esta matriz dentro deste loop. Então nós dizemos que este carrinho itens detalhados, não pode chamá-lo novamente. Sim, itens do carrinho detalhados porque temos vários aqui, ponto push. Vamos empurrar o produto. Então podemos criar aqui objeto. E este objeto será o produto, e nós obtemos o produto que temos uma resposta aqui. Então podemos ter aqui não produtos, podemos dizer produto de resposta. Então, para diferenciar entre esses produtos e produto de resposta. Então, nesse caso, teremos produto. O produto de resposta e a quantidade serão a quantidade de pontos do item Garth. Então salvamos tudo. Ok, legal. Não temos nenhum erro. Agora vamos pular para esse modelo. Então, como você vê, nós criamos no item de guarda. Então eu preciso fazer um loop sobre este item de carrinho várias vezes para criar vários itens de carrinho aqui. Então, só temos um agora. Mas se eu colocar aqui MD4 e neste MD4, Eu vou dizer deixar item carrinho fora de guarda itens detalhados. Então precisamos ter item de carrinho de Deus ItemDetail um por 1. Primeiro de tudo, vamos substituir a imagem. Então eu diria aqui, não a única fonte, como teríamos SRC. E então eu vou dizer produto ponto item, imagem ponto. Como você vê aqui, não estamos recebendo autocomplete porque definimos o produto como qualquer. Mas vamos ter campo de imagem depois que vamos fazer isso. Factoring. O Alt, é claro que também podemos colocar o nome do produto. Então, para Are, você não pode fazer isso. Você só tem que fazer ATTR como atributo dot alt. E, em seguida, você pode usar novamente o produto do item do carrinho, o nome do ponto. E aqui vamos substituí-lo com o nome do produto para que não digamos o nome do produto codificado. Nós dizemos item carrinho produto ponto, nome do ponto. Exatamente como está no modelo, como estamos obtendo do back-end. Então aqui vamos dizer ponto produto, ponto preço. E aqui temos a movimentação do item do carrinho. Vamos fazer isso na próxima palestra. Então temos também a quantidade também vamos trabalhar com a quantidade deles na próxima palestra. Aqui, subtotal é, será como um preço do item do carrinho ou preço do ponto do produto multiplicado por ou mais. Ele é multiplicado pela quantidade de pontos do item do carrinho. Então, teremos vários itens de carrinho. Cada item do carrinho tem sua quantidade. E então multiplicamos pelo preço e eu obterei o subtotal. Ok, como você vê aqui, nós temos que guardar itens que são exatamente dois aqui. E nós estamos tendo eles com todos os seus detalhes como o prêmio eo nome, imagem e escrever subtotal. Então nós temos aqui às vezes aviso, é dizer como encontrado dois elementos com o mesmo ID. Porque aqui, se você se lembrar com a quantidade que eu disse que eu preciso ID de entrada será quantidade. Então é melhor como se pudéssemos mudar isso. Podemos colocar, por exemplo, o ID do ponto do produto, por exemplo. Por isso, será único e não teremos essa aplicação em cada loop porque este item de guarda está acontecendo duas vezes com base no meu número ou contagem de meus itens de carrinho em seu carrinho. Então, depois disso, você vê que dois desses são criados. Então, se formos para inspecionar, vamos ver que temos que carrinho itens como você vê aqui. Vamos fazer mais como estilo pequeno. Como se pudéssemos empurrar esta margem para baixo. Podemos dar-lhe 15 pixels, como se fosse separado assim. Podemos fazer isso diretamente no modelo. Podemos usar extremidade privilegiada, como ferramentas de margining. Então podemos dizer p botão de margem cinco. Então ele vai dar-lhe algum espaço sob ele, que já está definido em NG primo. Então, como você vê, nós os separamos. Então vamos tentar adicionar algo ao guarda. Vou continuar a fazer compras. Quero adicionar este laptop. Então eu adiciono ao carrinho, carrinho atualizado. Temos aqui três itens no carrinho. Então vamos fechar isto e ir para o nosso carrinho. - Legal. Temos três itens no carrinho deles agora. Então, na próxima palestra vamos trabalhar com excluir o item do carrinho, e vamos trabalhar com a quantidade, atualizando a quantidade do armazenamento local. Como recapitulação, lembre-se, refatoramos nosso serviço de pedidos. Nós adicionamos o produto para obter o produto Em ordem serviço, que é na minha opinião errado porque temos o aplicativo no código entre a biblioteca de produtos e a biblioteca. Mas como eu disse, vamos consertar isso na parte de refatoração. Eu quero que você tente por sua mão para ver realmente a diferença entre ter como esta duplicação ou como vamos criar uma biblioteca base em, herdar dele todos os métodos abstratos e implementá-los na biblioteca. Nesse caso, não teremos qualquer dependência circular entre bibliotecas e teremos exatamente dessa maneira. 162. Remova produtos do carrinho: Bem-vinda de volta. Agora estamos indo nesta palestra para excluir o item do cartão. Então, como você se lembra, criamos vários itens e agora vou excluí-los do meu carrinho. Então, se o usuário mudou de idéia e ele quer filtrar alguns itens, ele não quer, por exemplo, para Y este. Então ele pode clicar neste botão e, em seguida, ele pode ser excluído. Então, se você se lembrar em nosso código no modelo, temos um método no clique neste ícone que temos excluir item de guarda. Então, vamos passar em frente também. O item Garth, que temos aqui no final você FOR loop é de carro os itens detalhados. Então e, em seguida, eu vou para o arquivo ts e, em seguida, receber este item carrinho. Claro, este tipo de item de carrinho será item de carrinho detalhado. E então vamos chamar um serviço do carrinho. E este serviço podemos criá-lo aqui. Então é exatamente algo como conjunto item carrinho. Estamos recebendo um item Garth e, em seguida, estamos empurrando-o novamente para o nosso armazenamento local e atualizar o nosso observável de seu carrinho. Devidamente definido que temos um novo dados de guarda. Então vamos fazer isso. Então eu vou criar um método. Podemos chamá-lo de excluir item de guarda. Eles precisam de item de carrinho. Basta obter apenas o ID do produto, ID, que está dentro deste item de proteção. Assim, podemos ter o ID do produto como uma string. E então fazemos novamente um recebimento de seu carrinho. Então nós temos que pegar o carrinho deles novamente porque nós vamos atualizar este guarda. E então nós estamos tendo um filtro. Então, vamos filtrar os itens do carrinho para receber tudo novamente, exceto o ID do produto ou o item do carrinho com este ID do produto. Então o que eu tenho que fazer, eu vou criar uma constante, eu vou chamá-lo em seu carrinho. E este novo cartão será Deus, os itens. E depois vou filtrá-los. Se você se lembrar, temos como método de filtro onde ele está devolvendo para mim itens sob alguma condição. Então, se todo o pedido, o ID do produto não é igual ao item que eu tenho recebendo aqui. Em seguida, ele vai devolver para mim todos os outros itens que não têm o ID do produto. Então, nesse caso, eu vou obter um novo carrinho, exceto este item de guarda que tem este ID do produto. Então eu vou dizer item ponto ID do produto, não igual, como me dar tudo o que não é igual ao ID do produto que eu recebi do item do carrinho. Então, depois disso, temos um recebendo esta constante. E simplesmente dizemos que este carrinho ou carrinho que criamos pontos itens, dá-lo novamente, então você pegou. Então nosso guarda foi atualizado. Agora vamos atualizá-lo no armazenamento local. Exatamente o mesmo que fizemos aqui. Precisamos criar essa string JSON. Então podemos chamar isso JSON, podemos chamá-lo como cadeia de guardas e, ou por exemplo, podemos dizer string JSON. E então foi 10 Guifei ele. Então eu posso ser capaz de configurá-lo no armazenamento local como uma string. E, claro, não nos esquecemos no final de atualizar que ficou observável. Então vamos ver as atualizações no front-end também. Se para cada item ou para cada componente que está observando esta guarda observável. Então vamos salvar tudo e tentar isso no nosso front-end. Então vamos ver que temos dois itens. Vamos apagar um deles. Então, quando apago um deles, vejo que nada está acontecendo porque não estou ligando para o serviço novamente. Então, vamos novamente para a nossa página de carrinho e temos que receber este serviço de carrinho de pontos que excluem Garth item, mas o que eu tenho que passar o ID do produto, então eu vou obter o item do carrinho ponto-produto, ponto ID. Então vamos tentar isso agora eu vou clicar em Excluir. - Legal. Não aconteceu nada, mas o cartão deles foi atualizado. E aqui eu tenho um item extra que é algo errado. Eu digo-te porquê. Porque se você sabe, nós temos um guarda observável e este guarda o observável está disparando tudo dentro da assinatura novamente quando há atualização chegando em seu carrinho. Então, nesse caso, Eu também tenho, novamente uma resposta itens de guarda para cada um. E então eu obter o produto novamente e eu empurrá-los para o item do carrinho detalhado novamente. Assim, os detalhes do item de guarda antigos terão itens. E também quando eu excluir e isso foi atualizado, ele irá adicionar itens novamente, que ainda estão. carrinho deles no armazém local. Então, a melhor maneira de resolver este problema, podemos inicializar sempre esse item de guarda detalhado com matriz vazia. Então, quando há atualização vem para o carrinho, em seguida, basta esvaziar os detalhes do item do carrinho onde estamos looping aqui. Então, dessa forma, ele ficará vazio e será preenchido novamente. Então, depois disso, eu vou ver que meu carrinho está se atualizando. Então vamos salvar isso e tentar de novo no nosso front-end. Certo, agora só temos um item. Então vamos adicionar, por exemplo, este e este, e voltar para o carrinho deles. Certo, temos três. Então, quando eu excluir este, eu vou ver que foi atualizado novamente. Está bem, foi actualizado. Quando adiciono um floreio da página, ainda tenho este item de carrinho aqui. Então, nesse caso, garantimos que estamos excluindo sempre esse tipo de item do armazenamento local. E também de nossa guarda observável, que está enviando cada comentário ou cada mudança para os assinantes, como por exemplo, este ícone porque ele está assinando a conta. E também para outras páginas onde eles estão se inscrevendo para o carrinho. Então agora temos aqui um problema. Vamos corrigi-lo rapidamente. Eu quero obter a contagem de cartas para que possamos fazer isso facilmente fazendo outra variável que é chamado de contagem de guarda aqui. E isso no início será 0. Então, por exemplo, vamos tê-lo como um 0. Fizemos isso anteriormente exatamente aqui no ícone do carrinho. Assim, a contagem de cartões terá o depois de se inscrever para o carrinho observável, eu vou ver links de itens carte me dar o comprimento ou me dar 0, e também aqui, não se esqueça de colocar este ponto de interrogação no caso de não haver itens ou totalmente. Então vamos novamente para a página do carrinho. E dentro desta assinatura deste cartão, vamos aqui e dizemos como não antes para cada um temos que dizer este ponto ou, por exemplo, cartão de resposta aqui nesse caso. Então nós dizemos guarda Conde, dê-me a contagem de cartas aqui, atualizado com essa resposta, que vem do jardim observável ou sujeito comportamental. E aqui precisamos substituí-lo com contagem de cartas, porque se você se lembra, nós temos aqui como codificado. Agora, vamos tê-lo como um número real de quantos itens dentro do carrinho. Então vamos salvar isso, salvar este aqui. E então vamos para o aplicativo. Veremos que temos também os itens certos que estamos adicionando aqui. Então, exatamente como fizemos com este crachá ou ícone. Então nós podemos verificar agora, nós vemos, ok, são três. Nós comemos. Está mudando para dois. Então, tudo é observado e atualizado. Então, última coisa, eu só quero acrescentar que precisamos sempre quando eu visitar esta página de guarda, precisamos terminar a assinatura. Então também, precisamos fazer tomar até como sempre fazemos. E então este ponto n subs. Lembre-se, nós definimos isso várias vezes. E cada componente que é necessário para entrar na assinatura. 163. Guia sumário de pedidos: Tudo bem, nesta palestra vamos fazer este resumo de ordem. E esta ordem para alguém. É exatamente como fizemos e como observamos os itens do carrinho e chamamos o produto e fizemos o cálculo do subtotal. Vou fazer o mesmo aqui. Então vamos criar o componente. Eu já criei isso. Então, o componente, Eu usei o console um x, e então eu criei um componente e dar-lhe um nome, resumo da ordem. E este componente será localizado nos componentes dentro da biblioteca de pedidos, e será automaticamente importado para o módulo de pedidos, então poderemos usá-lo em outras páginas. Então, por que eu fiz isso como um componente? Porque eu vou usá-lo em sua página de carrinho, como você vê aqui, Eu chamei em nossa página de carrinho como fizemos anteriormente. E também, vou chamá-lo na página do checkout. Então, quando vamos substituir este conteúdo aqui com o endereço do usuário. Então, vamos também manter este resumo de ordem como qualquer E-sharp formal. Então agora o que eu fiz exatamente é apenas dar como uma coisa de modelo. Eu dei como h3. Faça este resumo do pedido. Estou indo rápido porque fizemos isso várias vezes. Vou anexar para você o código para que você possa continuar com o curso. Agora, nós temos o preço sumário também. E eu estou fazendo aqui alguns cálculos para o preço total, que será no script de componentes como veremos mais tarde. E também, estamos fazendo alguma inflamação como embalagem e transporte. É informação codificada. Eu dou como algum estilo, que é chamado de preço de resumo ou remessa de resumo. E então eu mostro novamente o preço total, que será como o preço total será o mesmo aqui. Então é como alguns dados aleatórios de declaração. Eu só estou fazendo isso como em um caso como se parecesse como um verdadeiro e-shop. Então temos aqui o item vendedor e será exatamente quando eu adicionar um novo item a ser calculado aqui. Então vamos ver como fizemos isso. Então eu estou tendo aqui como algum modelo, eu estilizei. Adicionei este arquivo de discagem aos nossos estilos públicos, que estarão dentro de estilos, lábios e depois pedidos. E eu tenho aqui o Resumo da Ordem. E este pedido alguém que eu dou para o recipiente dele como fundo de cor branca e alguma borda para manter o mesmo estilo, algum preenchimento. Então eu dei o preço de exibição flex, que será como este div aqui. Então, ele terá duas colunas. Uma coluna será a informação ou seu rótulo e, em seguida, o valor do rótulo. Mais uma vez aqui temos algo como se tivéssemos outro como os preços dos itens. E então temos aqui span, dois vãos como eles são exibidos como Flex e eles serão alinhados perto um do outro. E eu dou a este diamante flex que eles são como bloco. Porque se você não exibi-los como bloco, os vãos, eles ficarão presos uns aos outros e eles não serão considerados como, como uma div, podemos dizer. Então nós temos aqui bloco de exibição que vão, como você vê, temos dois vãos aqui. Primeiro banimento e segundo período, digamos o primeiro período e o segundo em cada linha. Então o que, como eu fiz estilo? Acabei de ler esta banda diretamente. Eu dei para o primeiro com 80%. Então, como você vê aqui, tem 80%. Claro que você também pode usar a grade. Eu só fiz isso como de maneira diferente apenas para mostrar que você também não tem que depender do na grade sempre. E então eu disse, última criança, última gigante do contêiner como alguém que tem preço. E o último filho desta extensão terá 20% de peso de fonte 600. Então eu tenho aquelas bandas. Este é o primeiro filho, e este é o último gigante do recipiente, que é chamado de preço de resumo. Então, como você vê aqui, nós temos esse 80% e isso será 20 por cento. E depois disso eu tenho outra linha e, em seguida, temos um botão para checkout. Então, este botão vai me levar para a página de checkout como veremos mais tarde. Então agora temos esse estilo. Como você vê, colocamos algumas informações, é muito fácil. Acrescento que também o estilo com esta palestra. Então eu adiciono esse componente. Então você não, você não tem que digitar de novo comigo ou parar o vídeo. Você pode pegar o componente. Eu tenho o modelo, eu tenho o roteiro, e eu coloquei o estilo bem no anexo ou para os recursos desta palestra. Então agora vamos fazer para isso, o cálculo do preço total. Então, por exemplo, eu tenho que ir aqui para adicionar outro produto e outro produto. Volto ao guarda para verificar. Ok, Nós temos aqui o preço calculado automaticamente, que será um resumo de todos esses preços aqui. Então, como isso pode ser feito. Então é muito simples. Eu só mais uma vez subscrever o seu carrinho como fizemos exatamente com essa página de guarda. E então inicializei cada mudança deste carrinho. Então inicializo algo chamado preço total. É uma variável fixa ou membro da classe, que será chamado de preço total, que seria um número. E então eu fui para o jardim novamente. Aqui, eu verifiquei se eu tenho um guarda retornando desta assinatura, nós estamos observando isso. E então eu olhei sobre os itens deste carrinho e então eu chamei o produto para cada item de cartão. Pegue um. Aqui. Eu tomei um porque estamos chamando isso uma vez. Então, quando você faz uma assinatura para isso, em seguida, ele iria dar-lhe a capacidade de cancelar a assinatura facilmente para que você não tem que fazer tomar até como n subs até que o componente foi destruído tão facilmente que você pode fazer isso. Você só diz tomar um, eu pego um e terminar a assinatura automaticamente. Então ele vai pegar um e, em seguida, terminar a assinatura. Então aqui você não se importa com vazamento de memória. Este bife vem também do nosso x j como operadores, para que você possa usá-los também. E, em seguida, subscrevemos o seu produto. E então eu digo que o preço total, que eu inicializei em cada mudança de sua guarda, será o preço do produto multiplicado quantidade item. Mas mais igual. Isso significa que eu quero fazer algo assim. Então o preço total para cada item apenas acumulado com como preço total anterior. E então com esse preço em tudo, como por exemplo, a filha do jantar. Então, com um subtotal que calculamos aqui. Então, nesse caso, você pode torná-lo menor. Você só diz mais igual. E igual lhe dará um produto do preço, como item.quantidade. E se acumulará a esse preço total. Somente quando há uma mudança vem, então ele será inicializado para 0. Então, nesse caso, somos capazes de percorrer os itens e calcular o preço total que estamos adicionando, adicionando, adicionando. E então será calculado da maneira certa. Então é isso. Não há nada complicado. Então temos agora definido subs também. Então será na ONG OnDestroy. Eu não adicionei isso. Então precisamos adicionar energia OnDestroy também para evitar. E então veremos que essas duas extremidades serão as próximas. E também este nó n subs será completo. Então, quando eu deixar este componente, Eu vou terminar a assinatura para o guarda, assinante ou assunto comportamento. Então, nesse caso, estou sempre atualizando o carrinho. Aqui, o resumo do pedido será calculado automaticamente. Então eu vou aqui, vou novamente, adicionar ao carrinho, podemos adicionar mais itens. Vou para o meu carrinho de novo. Verei isso aqui. Ok. Eu tenho mais itens e está calculando para mim o resumo da ordem certa, o último ladrilhos que eu gostaria de fazer, talvez possamos fazer este botão completo, gosto de ser botão grande e mostrado bem, ele vai atrair o olho de o usuário. Então podemos fazer isso simplesmente neste arquivo de discagem. Vou ao resumo do pedido. Se você se lembra, temos aqui encomendar alguém que eu criei check-out botão dentro do resumo do pedido para que possamos ouvir. Ordenamos que alguém vá e abrimos uma nova aula. Chamamos-lhe botão check-out e o botão dentro do resumo terá largura 100%. E verificamos se recarregamos o aplicativo, ok, temos a largura total do botão Checkout. E quando clicamos no Check out, devemos passar para a página de checkout. Como veremos mais tarde. 164. Quantidade no carrinho de atualização: Ok, nesta palestra vamos ver como podemos atualizar a quantidade do item de guarda. Então, nesse caso, precisamos atualizar essa quantidade de item de guarda da maneira que atualizamos também o subtotal e o resumo do cartão. Então, primeiro de tudo, vamos começar com a inicialização nossa quantidade quando a quantidade que o usuário pediu. Então, por exemplo, quando eu for, novamente, vamos atualizar esta página. Eu não tenho nada aqui. Então vamos inicializar com o número de itens dentro dessa quantidade. Então, primeiro de tudo, temos que ir para o nosso número de entrada que criamos. Está dobrado este. E este número de entrada tem como quantidade mínima, máxima. Vamos acrescentar algo como na documentação da energia do crime. Então, siga sempre a documentação. Então, como você vê, nós temos aqui modelo NG e modelo NG, você pode especificar o valor, então simplesmente, você pode apenas dizer, ok, e você modelar, e então no final você modelar, nós dizemos item quantidade ponto, ok, mas nós somos ainda obtendo erro. É como se não pudesse vincular o modelo NG. Sempre quando você receber esse erro, como não pode vincular modelo NG uma vez que não é conhecido número de entrada de propriedade. Isto é porque precisamos importar um módulo que é chamado módulo de força ou módulo de formulários. Então, onde temos que importar este módulo, nós importamos anteriormente em vários módulos, como produtos e também como no próprio aplicativo. Então o que podemos importar aqui também. Na biblioteca de pedidos, temos o módulo de ordens. Dizemos que nossos componentes também usando formulários módulo quatro como módulo contêm todos esses itens que precisamos para o formulário. Então, nesse caso, teremos que a nossa aplicação e foi atualizado com a última quantidade que são definidos dentro do carrinho. E vemos aqui que inicializamos com sua quantidade. Eu vou adicionar ao carrinho outro também deste item. Então eu iria para o produto e iria para este produto. Acrescentarei quatro, por exemplo. Certo, me atualizei. Vou para o meu carrinho. Eu vou ver que eu tenho cinco porque anteriormente eu tinha um. Então agora temos cinco deste item. E também o resumo do pedido está funcionando bem. Mas agora, tudo bem, isso está funcionando bem. Gosta de um subtotal, como você vê aqui, porque ele vem por cálculo entre a quantidade do item e o preço do produto. Por isso, é fácil de calcular e é automaticamente atualizado. Mas o que precisamos atualizar também é o resumo do pedido. Então, como podemos atualizar o resumo do pedido ou também quando recarregar a página, você vê que eu tenho aqui novamente cinco, mas eu quero salvá-lo. Quero manter este troco sempre. Então a melhor maneira de fazer isso é atualizar o carrinho em si. Como fazemos a atualização no carrinho em si. Primeiro de tudo, vamos ter um evento. Quando eu mudar isso, vou ler o valor e fazer algo com esse valor. Então, primeiro de tudo, vá novamente para a documentação. Eu quero algum evento que é disparado quando eu mudei o valor deste número de entrada. Siga sempre a documentação. Você irá novamente para o primo, fim para o número de entrada. E você vê na documentação que você tem propriedades como vimos aqui, que temos botões Mostrar, ID de entrada, etc. E também temos eventos. E esses eventos, eles estão se comportando com base na interação do usuário nesse componente. Então aqui eu tenho algo que é chamado na entrada. Então, quando o valor é inserido, quando o usuário colocar um valor dentro desta entrada, em seguida, ele vai disparar um evento. Então, como podemos disparar ou chamar o evento? Nós só vamos aqui para o componente. E é como temos com OnClick ou por exemplo, como este ou por exemplo, em foco em algo onclick, onmouseover. A mesma coisa que você tem que fazer aqui que você acabou de dizer na entrada, porque ele já está definido como uma propriedade desse componente, que é chamado p input number. Então, oninput, vou criar um método, vou chamá-lo de atualização, guarda quantidade do item. Ok, então quais são os parâmetros deste método? Os parâmetros serão primeiro é evento, porque eu quero ler o valor desta entrada. Quanto é agora o valor que entrou em valor como aqui. Está bem, eu mudo, preciso de quatro. Então eu preciso ler esse valor. Então, para fazer isso, passamos algo chamado evento. Deve ser prefixado com este cifrão. Claro, é um evento que pode ser disparado para todos os tipos de saídas. Isso é chamado de saída, e isso é chamado de entrada. Assim, em componentes de angular, você define saídas e entradas para cada componente. Então agora temos isso definido aqui, e também precisamos passar o item do carrinho em si. Então vamos criar esse método. Vamos para o arquivo TypeScript e, em seguida, criamos este método, o parâmetro, como dissemos, será par, você não tem que colocar prefixo com sinal, sinal dólar e nós apenas colocar evento e também o item carrinho. O item do carrinho será o item de guarda detalhado porque estamos pegando do loop for. Por isso, será guardar o item detalhado. Se você se lembra, quando estávamos definindo um item de carrinho, eu estava chamando este serviço de carrinho de pontos e, em seguida, definir o item de carrinho, esse item de carrinho, precisamos passar o item de carrinho em si. Então, como você vê aqui, precisamos passar o item Garth e então ele será definido. Mas neste caso, quando estou adicionando um novo item de carrinho ao carrinho. Então, para isso, vamos verificar se temos o item do carrinho já e estamos aumentando a quantidade. Caso contrário, empurramos o item do carrinho recentemente e na Europa como ele é. Então aqui não passamos o item do carrinho, mas passamos o seguinte. Primeiro, precisamos ter id do produto para o item do carrinho, que virá do produto ponto do item do carrinho, ID do ponto. E também precisamos passar uma quantidade, aquela quantidade que estamos lendo deste evento. Então vamos verificar o que é este evento está me retornando e como podemos ler o valor. Então vamos comentar esta parte. Eu estou fazendo isso com barra de controle e ele vai comentar para mim ou as partes ou as linhas que eu selecionei. Então temos aqui console.log evento, assim como isso. Então, quando eu atualizar a quantidade, eu quero ver algo. Então, abrimos o console e então eu vou atualizar a quantidade. Ok? Estou recebendo objeto, que é chamado de evento original, como o evento que é feito, que é clique do mouse, eo valor. Então o que nos importa é o valor. Então temos que dizer aqui, valor do ponto do evento. Vamos de novo para o nosso front-end. Nós tentamos. Nós alteramos esse valor. Vemos que estamos recebendo agora que eu agrego valor, isso é ótimo. Então precisamos para o seu item de carrinho aqui, essa quantidade será o evento que o valor. Então aqui temos o valor do ponto do evento. Então, se eu for agora para o front-end e tentar isso. Certo, vemos que estamos aumentando, mas errados. Você vê que é como várias vezes duplicado porque há algum cálculo errado acontecendo. Olha, está realmente ficando errado e errado mais. Então, o que podemos fazer nesse caso, temos que verificar nosso item de carrinho. Então, se você se lembrar, quando o item do carrinho existir, eu estou enviando o item do carrinho com a nova quantidade e então eu estou aumentando a quantidade. Então, estou calculando se o item do carrinho já existe, estou aumentando a quantidade com a quantidade anterior. Então, nesse caso, estamos recebendo uma acumulação errada. Por isso, estamos a aumentar cada vez mais. Então eu tenho, agora quando eu clicar em 525, ele irá adicionar 525. Então, será o que existe em seus carros antes, e então terá mais acumulação como você vê aqui. Então, nesse caso, precisamos dizer para definir item carrinho para atualizar a quantidade, não por exemplo, adicionar à quantidade. Então, porque antes aqui nós fizemos isso porque nós vamos dizer que se tribunais, se o usuário vem aqui e ele clicar em Adicionar ao carrinho, outro adicionar ao carrinho, então se o item já existe em sua guarda, nós aumentamos a quantidade. Mas agora o nosso caso aqui estamos atualizando totalmente essa quantidade. Então precisamos ler este valor e remover a quantidade antiga e atualizado com o número que está localizado aqui. Então, para isso, eu vou adicionar outro parâmetro para definir o serviço de item de carrinho, que é chamado de item de carrinho de atualização, como apenas este e este item de guarda de atualização será opcional, gostaria de não ser necessário quando você chamar o item de carrinho definido, porque às vezes estamos enviando apenas o item de guarda para atualizar ou adicionar a quantidade ou enviar um novo item de carrinho. Portanto, este não será necessário. Não obteremos erros nos outros objetivos deste item de carrinho de conjunto. E, em seguida, verificamos se há item de guarda de atualização, em seguida, atualizar a quantidade totalmente. Ou se não, basta pegar a quantidade antiga e adicionar um novo item ou uma nova quantidade ao item do produto e atualizar seu carrinho. Então, onde isso tem que ser feito. Então vou checar aqui. Eu vou dizer se atualizar item guarda, como se este chiclete como verdadeiro, então isso significa que eu estou vindo aqui e eu estou clicando sobre isso. Nesse caso, temos que dizer que a quantidade do item é apenas igual à quantidade do item do carrinho. Nós não temos que fazer qualquer acumulação ou adicionar toda a quantidade para o novo. Caso contrário, se for falso, então, ou se for desconhecido, indefinido ou falso, então temos que fazer essa acumulação. Então vamos salvar isso e precisamos atualizar nosso componente de página de item de carrinho aqui que temos o item de guarda conjunto, ok, primeiro parâmetro é este item de guarda. E depois dizemos através porque precisamos atualizar o item do cartão, não adicionar ao Descartes. E vamos dizer mais como alguns itens que são realmente tem grande. Então só podemos ter este. Então eu vou aumentar a quantidade como você vê quando eu estou atualizando esse cartão está sendo atualizado. E também o resumo porque todo mundo neste aplicativo está observando o carrinho, porque como você se lembra, temos este carrinho observável. E no serviço de carrinho, toda vez que eu estou colocando um item de carrinho, eu estou dizendo para o observável, atualize o guarda e notifique todo mundo. Então, nesse caso, atualizamos a quantidade de itens de jardim, que me ajudará a rastrear sempre o resumo do pedido e que Deus permanecerá o mesmo sempre até você adicionar outro item, por exemplo, aqui, e você vai para o jardim de novo. Você verá aqui o item. Por exemplo, vou adicionar este item. Mais uma vez, este será sete. Então temos que ir e encontrá-lo. É este que eu adicionei. Vá para o carrinho deles. Veremos que tem sete. Assim, desta forma, temos certeza de que nossos dados são corrigidos, nosso carrinho é corrigido. Não temos nenhum problema aqui. E estamos prontos para ir ao checkout. 165. Página de check-out: Ok, Depois de ter a nossa página do carrinho, vamos passar para a página de finalização da compra. Então, para isso, precisamos criar também um novo componente que estamos chamando de uma página de checkout, como fizemos com sua página de carros. Então vamos para o próximo console, gerar. E então teremos componente. E este componente terá um nome que está sob componente ou páginas. Estará sob páginas. E, em seguida, ele terá check-out página. O nome do projeto será ordens porque estamos colocando nas ordens. E então fazemos a mesma coisa, o que fizemos para cada componente. E nós mantemos os testes. E também precisamos adicionar um seletor que será ordens check-out página. Então aqui que temos agora pronto para nós o componente. Pressionamos Run. Nós vamos para as páginas em nossa biblioteca de pedidos. Então devemos ter aqui e você confira página. Então, verificamos isso. Vemos que temos página de check-out aqui e temos o componente também. Então o que precisamos, temos que adicionar uma rota na biblioteca de ordem, exatamente como fizemos com o guarda. Eu vou ter aqui checkout. E veremos mais tarde como vamos autorizar esta página. Então vamos forçar o usuário para, para olhar e, em seguida, ele pode colocar seu endereço e, em seguida, ele pode colocar um mais velho. Mas agora vamos fazer uma formulação para check-out. Mas como hóspede, como se não tivéssemos. Por exemplo, o usuário leitor está fazendo login. Você vai fazer isso na próxima seção. Mas agora estamos apenas fazendo ordem normal de colocação com uma conta de usuário existente que é chamado de convidados. E então precisamos verificar ou ir para a página de check-out quando clicamos neste botão em seu carrinho. Então, como podemos fazer isso? É muito simples. Fazemos a mesma coisa, como fazemos com a navegação normal. Então vamos dizer como roteador ponto navegar e, em seguida, vamos para uma página específica. Ou você pode dizer um link de roteador na página de check-out e você dá assim no resumo do pedido. Então, temos que ir para encomendar alguém componente porque o botão Checkout existe no componente de resumo do pedido. Então aqui vamos dar onclick. E este onclick, vamos dar-lhe como navegar para check-out. E então temos que criar esse método. Então vamos novamente para o resumo do pedido e, em seguida, criamos este método. Dizemos navegar para check-out, precisamos importar também o serviço de roteador. Então dizemos aqui roteador privado, e então ele será roteador. E este roteador virá do núcleo angular, como sabemos sempre. Então vamos usar este serviço de roteador. Dizemos que este ponto router, ponto navegue. E então abrimos a matriz. Dizemos dentro desta matriz que navegar para mim para verificar página. Então é isso. Então vamos salvar tudo e tentar se estamos realmente navegando para nossa página de checkout, que criamos anteriormente. Mas eu ainda estou na página de checkout porque eu cometi um erro. Aqui vamos para o módulo de ordens e temos que dizer que esse componente será componente checkout, não componente de página de guarda. Então, desta forma, você garante que você está indo para a página de checkout. Então vamos voltar de novo. Vá para a nossa guarda, clique em Check out. Certo, perfeito. Temos trabalhos de página de checkout. Então, a página de check-out , será exatamente como a página de guarda. Então ele terá no topo Algo como voltar para o carrinho, como botão. Como temos como voltar ao seu carrinho aqui e todos, por exemplo, de volta às compras. E também, terá uma forma. E o formulário será exatamente como construímos no painel de administração. Se você se lembrar, eu vou olhar e como você vê aqui nos usuários, nós criamos um formulário que está nos dando nome, e-mail, senha, e todas as outras informações sobre o usuário. Vamos usar o mesmo formulário para que possamos copiá-lo exatamente o mesmo. E temos que remover é admin e a senha e as outras informações que podemos usá-los. Então eu já expliquei sobre este formulário, como conseguimos os países, como obtivemos sempre a validação. Então, quando você deseja criar um usuário sem validação, a única diferença que precisamos para validar esses campos quando estamos fazendo isso em sua página de checkout. Então, nesse caso, vamos usar o mesmo exatamente estrangeiro que usamos no painel backend. Vamos usar exatamente os mesmos componentes como esta entrada. Então, primeiro vamos fazer esse modelo para a página de checkout. Então o que eu preciso também para ter como uma página de checkout aqui, exatamente como nós temos com a guarda deles. Então nós temos. Checkout página e teremos botão que chamá-lo de volta para seu carrinho, não de volta para a loja. E nós fazemos um botão aqui que está de volta para o carrinho deles. Então temos que adicionar também este método. Então temos de volta para o carrinho deles. Nós usaríamos também o módulo roteador. Nós dizemos privado e o roteador. E o roteador. E este roteador virá de Angular. E nós dizemos, este ponto roteador navegar. E eu quero navegar para a página do carrinho deles. Então é exatamente como estamos navegando sempre. Então, nós salvamos isso, nós salvamos isso. E vamos para a nossa página do carrinho na frente. Então nós temos aqui check-out. Ok, agora temos o botão de volta para o carrinho deles. Então, quando o usuário quiser mudar algo em seus carros antes de fazer o check-out, ele pode voltar para o carrinho. Agora vamos adicionar o formulário. Assim, o formulário também estará dentro de uma grade. Então eu vou dar como uma grande grade de mira. E ele terá um nome que é chamado como check-out formulário. Então exatamente o mesmo. Então nós demos forma. E então precisamos usar o formulário que usamos nos usuários para formulário na parte de trás e tudo no painel de administração. Então vamos usar exatamente o mesmo. Então eu preparei esse código já porque repetimos tudo como falamos sobre como criamos nome de controle de formulário, como usar cada componente, como usamos o switch, como usamos o menu suspenso, como conseguimos os países. Se você não sabe como fazer isso, basta ir para a palestra onde criamos o usuário no painel de administração. Então aqui você pode usar o mesmo conceito. Vamos usar o mesmo, vamos usar também. Mesma inicialização para o formulário como aqui. Vamos usar o mesmo envio. Teremos também que os mesmos validadores que usamos anteriormente como este é necessário, isso não é necessário. E depois disso, vamos usar o mesmo ordens exatamente modelo e, em seguida, vamos colocar o pedido. Então deixe-me agora importar este código. Então temos todo o código aqui na grade. Então eu já preparei isso. Eu clico aqui e temos agora as coisas são importadas. Então precisamos importar alguns controles. Como por exemplo, precisamos importar o módulo de modelo de texto de entrada e precisamos usar uma máscara de entrada e também as outras entradas como a lista suspensa. Então podemos fazer isso também no módulo de ordens. Então nós importamos todos eles módulo de texto de entrada, módulo de máscara de entrada, todos eles para os nossos módulos que estão localizados aqui. Então, temos uma máscara de entrada e temos também o menu suspenso de entrada. Portanto, não teremos nenhum problema no modelo. Então, o modelo deve funcionar bem depois disso. Então salvamos e não devemos ver esses erros apenas porque ainda estamos vendo este erro porque este nome de controle formulário não está definido porque precisamos também importar algo que é chamado módulo reativo. Então módulo de formulários reativos, que temos usado também no painel de administração e falamos sobre isso anteriormente. Então aqui, agora não temos nenhum erro. Então, se você se lembrar no usuário é forma, temos que inicializar um formulário e também obter os países. Então também precisamos usar o mesmo código que temos aqui. Então eu preparei isso também para não ter tanto tempo de você na palestra. Então eu não preciso explicar isso novamente porque nós explicamos isso já nas palestras dos usuários. Então aqui está o formulário que eu disse em um NG nele, Eu tenho qualquer formulário de check-out e qualquer check-out quente temos estes formulário de check-out, grupo, construtor de formulário e grupo. E eu listei os campos que eu quero usar. E também, eu costumava ter países, ter países. Conseguimos do serviço de usuário, se você se lembra de como o usamos. E o formulário de pagamento, que devolve para mim os controles também. E, em seguida, temos é enviado grupo de formulário check-out ou seus itens porque precisamos ler itens pedidos para colocar o pedido, como veremos mais tarde, o ID de usuário que é usado, precisamos usar, bem como o ID de usuário. Então, e nós temos a lista do país que será listado no menu suspenso. Então é exatamente esse código agora, atualmente é exatamente como temos na forma do usuário. Então você não tem que escrever. Novamente. Vou anexá-lo com esta palestra. Basta usar esses códigos para seus componentes. Vou anexar componente de página de check-out, o HTML e o texto datilografado. - Também. Você não precisa esquecer de importar esses módulos, sobre os quais falei anteriormente no módulo de pedidos. Então agora precisamos apenas estilizá-lo. Mas primeiro vamos economizar para verificar. Temos agora tudo está bem, porque precisamos também para estilizar a página de checkout. Então eu vou para o caixa. Certo, agora temos tudo. Mas ainda temos este botão check-out porque está em ordem alguém componentes. Então, precisamos verificar se estamos na página de check-out, ocultar este botão. E agora temos aqui tudo, mas também os botões são azuis. Então vamos criar um arquivo de estilo primeiro. Temos que acrescentar aqui. E não só pedidos, precisamos adicionar uma nova pasta ou arquivo, chamamos de check-out. Como podemos apenas dizer check-out, SCSS e injetar ou nas ordens que precisamos importá-lo. Então, dessa forma, este também seria importante. Então temos que colocar aqui, confira. Então, depois de importarmos, estamos colocando o estilo para isso. Então o que eu fiz no estilo é exatamente como fizemos com a página do carrinho, se você lembra. Então aqui eu tenho a página do checkout. Eu dou min-height para dar-lhe como uma altura mínima para não ser como muito, muito fina. E também os botões que lhes dei borda de cor primária 0, como fizemos anteriormente. E confira o formulário. Eu dou como um pouco de margem superior daqui para estar longe do botão. E também a ordem de colocação do bot. Será largura total, porque aqui temos também botão Fazer pedido. Vamos colocá-lo com os fluidos. Será colorido também a partir destas classes que definimos aqui com laranja. E então vemos que temos tudo como eles check-out de volta para o carrinho e o pedido de lugar. Mas como eu disse, precisamos esconder o caixa. Então eu não posso dizer em ordem alguém componente, se eu estou na página checkout, esconder para mim este botão, como podemos fazer isso? Podemos fazer isso simplesmente. Vamos para o resumo do pedido. Nós já o chamamos de componente roteador, se você se lembrar, ou serviço de roteador, precisamos verificar este roteador se contém página de check-out ou não. Então, no método construtor, dizemos este roteador, esse URL, como o URL atual do roteador. Isso inclui. Portanto, você não pode dizer inclusões para qualquer string para procurar uma string específica dentro da string. Então aqui o URL irá retornar para mim este URL. Então eu vou verificar se este URL contém palavra que é chamado check-out, em seguida, esconder para mim o como o pintinho fora ou o botão Checkout, que está no resumo da ordem. Então não podemos dizer se está contido, confira. Podemos usar a linha final. Se assim temos aqui, podemos dar como uma variável ou um membro da classe que chamamos é checkout. Então, para saber que temos a página de check-out e damos-lhe no início como um falso. Então, inicialmente, será uma falsa. Se nós temos uma página de check-out, então nós dizemos que este é check-out é através. Caso contrário, como outra coisa, será falso. Estes check-out, será falso. Então agora com esta variável que criamos, vamos através da ordem alguém template e dizemos que este, este botão será totalmente escondido. Então podemos dizer ng-se a expressão é check out. Então, quando não é check-out, em seguida, mostre o botão. Mas quando o check-out for feito, oculte o botão. Então nós salvamos, nós salvamos isso também. Vamos para o modelo. Então, como você vê aqui, o botão está escondido na página de check-out porque eu tenho check-out botão aqui ou takeout string. Mas quando eu ir para o carrinho deles, Eu vou ter check-out é apareceu aqui. Como vê, verifiquei o roteador. Eu fiz isso no construtor, é claro que você pode fazer isso em ONGs nele, sem problema. Mas eu fiz isso no construtor, que é como antes da ONG sobre ele antes de inicializar componente. Quando construímos esta classe, em seguida, ele vai chamar roteador, URL inclui checkout, em seguida, é checkout através ou check-out false. Então usamos isso no ng-if para mostrar ou ocultar este botão. Então o que precisamos fazer, a única diferença que queremos que este formulário seja validado. Portanto, precisamos validar todos esses campos porque quando copiamos do formulário de usuários, esses não são obrigatórios. Por isso, temos de os fazer tão bem quanto necessário. Então vamos fazer isso rápido. Eu vou ter aqui como cidade, é obrigatório código postal país? Todos eles são necessários. Nesse modelo, precisamos ter, por exemplo, e-mail, ok, temos validação. Para estrangeiros, temos validação, mas as ruas não temos. Então temos que mudar todos eles para não serem formados, mas será Street. Então uma rua é necessária. Então, há a mesma coisa. Tenho de copiar esta parte e pô-la no apartamento. Acho que não é necessário. Vamos verificar isso na nossa forma. Está bem. É necessário também, é importante quando você entrega uma remessa, o expedidor deve conhecer o apartamento. Então dizemos também, aqui, apartamento e apartamento é necessário. A mesma coisa que fazemos para o CEP. Então temos que adicionar também esse código postal aqui. Então temos zíper. E depois a cidade. Veja, é exatamente a mesma coisa que fizemos com o formulário de usuários. Então você não tem que gostar, me diga se você, se você não entende esta palestra, basta voltar para o formulário de usuários. Você entenderá todo esse ponto. Então é por isso que no início deste curso, Eu prefiro que você não pule qualquer parte deste curso porque todos eles são, você pode considerá-los, são obrigados a participar no caso que você quer me seguir. Mas eu estou mencionando em todas as palestras onde eu explico isso, então você não precisa se preocupar com esse ponto. Então agora eu tenho tudo está validado. Então precisamos adicionar, bem, adicionar um botão para fazer o pedido. Dizemos como jogar onclick. Temos aqui o botão onclick do Prime NG. Então eu vou dizer Place Order. Então este método de ordem local, eu tenho que implementá-lo. Então, primeiro de tudo, eu preciso fazer o pedido. Então eu vou dizer aqui, se isso, como, se você se lembrar, nós temos este formulário de ponto, como o formulário de checkout é inválido, então retornar e não fazer nada porque nós não alcançamos essas condições de validação. Então, neste caso, voltamos. Então, quando submetemos o formulário, precisamos definir a variável que criamos, que é chamado é submetido a true, como habilitar a validação. Então, quando o usuário clicar em Colocar, Ordem, significa como ele enviou, mas ele tem um problema na validação. E, em seguida, próxima palestra vamos ver como podemos colocar a ordem que precisamos para coletar os dados e fazer o modelo de ordem. Assim, desta forma, terminamos esta palestra. Então você vê aqui temos o modelo, definimos o botão Fazer Ordem, e temos o formulário pronto para suporte ou colocar o pedido. E como você vê aqui, quando eu cliquei no pedido, todos esses campos são obrigatórios. 166. Ordem de colocação: Certo, o que vamos fazer agora, precisamos fazer o pedido. Se formos para a página de checkout e clicar em Fazer pedido, então o pedido será feito depois de validar os dados do formulário do usuário. Como eu disse, vamos fazer um pedido como um convidado, não vamos implementar o login agora. Faremos isso na próxima seção. Então, antes de tudo, precisamos tentar a colocação do pedido passo a passo. E, em seguida, movemos para o login e pegamos dados do usuário do banco de dados. Mas agora temos que fazer o pedido normalmente. Então vamos coletar os dados do formulário. Como você se lembra, temos na biblioteca de pedidos e modelo que é chamado ordenado. Então, na biblioteca de ordens vamos aqui e vemos aqui ordem. E no pedido temos como ID, itens de pedido, envio, endereço, um envio também, e todas as informações que precisávamos para fazer um pedido. Então precisamos coletar esses dados e colocá-los exatamente o mesmo nas costas. E se você se lembra com o Carteiro, nós estávamos postando o pedido como eu mostrei anteriormente na parte back-end. Se você não vir o vídeo, você tem que ir e ver o vídeo de criação de uma ordem no banco de dados. Então vamos copiar esses dados e ir para a nossa página de checkout. No método Fazer Pedido, quando eu clico neste botão, que está aqui para fazer o pedido, eu tenho enviar e, em seguida, eu estou verificando se o formulário é válido. Aqui precisamos criar o modelo de pedido. Então precisamos criar ordem const, e será tipo de ordem. Então a ordem virá dos modelos. E então isso será igual aos meus campos, o que eu preciso sentir aqui. Mas primeiro precisamos substituir essas strings pelo valor, o ID. Não precisamos dele porque quando fizemos o pedido, ele virá automaticamente com o ID do banco de dados. Mongodb fará isso por mim. E depois encomendar itens. Precisamos coletar os itens do pedido. Por enquanto, vamos definir um membro da classe. Chamamos isso de itens de pedido. E estes itens de ordem, podemos defini-lo aqui como um membro da classe, como você vê aqui, que será matriz de item de ordem. Então temos um item de ordem e será uma matriz. No início, será matriz inicial. Portanto, também precisamos remover esta questão enquanto ainda temos um problema aqui, porque precisamos colocar uma vírgula. Temos aqui erro porque ele está dizendo que o tipo de item de pedido é array, mas está no modelo, é apenas um ou o direito. Vamos verificar o pedido. Se você se lembra, nós fizemos, acho que esqueci de colocar aqui uma matriz, então precisamos consertar isso. Eu acho que o aplicativo empacotado admin não será afetado por isso. Então, vamos verificar o painel de administração para ter certeza de que não temos nenhum problema aqui. Ok. Ainda está tudo bem. Não temos nenhum problema. Ok. Volte para o aplicativo front-end. Até o fim das compras. Agora temos os itens do pedido para fazer agora o endereço, então eles estão enviando o endereço um. Podemos dizer que este ponto check-out formulário. Você se lembra que estávamos acessando os controles do grupo de formulários assim. Dot. Podemos colocar agora a rua, por exemplo, esse valor. Então, com isso, temos acesso ao campo de rua e dizemos que temos o valor dele no endereço de entrega um, devemos corresponder exatamente ao modelo. Então você não tem que esquecer que talvez o endereço de entrega dois também pode ser como o não a rua, mas podemos usar o apartamento. Então temos aqui o valor do ponto do apartamento e também a cidade será a mesma. Então precisamos copiar isso, colocá-lo aqui, remover este ponto de interrogação e dizemos que a cidade, esse CEP é o mesmo. Temos que adicionar também o CEP aqui também. Então temos que colocar aqui vírgula, vírgula e aqui país. Mais uma vez, temos que fazer o mesmo. Vou fazer isso rápido. Então temos que adicionar todos eles assim. E teremos problemas com um usuário. Explicarei mais tarde. Então, primeiro de tudo, precisamos ter como todos os valores para estar certos. Temos um país que remove este ponto de interrogação. Nós vamos aqui, telefone country, precisamos colocar também. O telefone aqui diz 2s, preço total, preço total. Também precisamos. Também para calcular de alguma forma. Usuário e eles pediram. Então nós também temos aqui. Eles pediram ou pode ser ponto de data. Agora, vamos remover esses pontos de interrogação e vamos verificar se está tudo certo. Então temos a cidade, o status do país, o preço total e o usuário. Então o usuário que não temos na forma algo chamado usuário. Então vamos usar algo chamado ID de usuário. E esse ID de usuário virá de como um ID estático ou usuário estático, que eu vou usar como convidado. Então, vamos para o aplicativo empacotado admin. Podemos criar um usuário como usuário aleatório. Damos um nome como convidado, e podemos preencher o e-mail. Por exemplo, se a sua organização podemos dizer e podemos dar-lhe uma senha como e todas as outras informações. Talvez possamos dar-lhes assim. Podemos colocar qualquer número aqui. E nós clicamos em Criar, criado, que convidado. Então, o que precisamos fazer? Vamos para o banco de dados e pegar o ID do usuário. Então eu fui para o banco de dados, cloud mongodb.com e eu faço login com minha conta e então eu vejo todos os usuários, que eu tenho aqui. Eu criei este convidado. Então nós pegamos isso, para que possamos clicar em editar. Talvez possamos copiar esta parte aqui e ir para a nossa candidatura. Precisamos substituir também. Eles check-out página, temos que adicionar isso a este usuário, mas você pode fazer, como padrão, este usuário será o convidado. Claro, vamos exibir ou substituir isso quando o usuário ficar preso. Então precisamos adicionar esta string aqui. Então não precisávamos de tempo para não receber um erro. Então, o ID de usuário para mim será esta string. Então guardamos isso. E então precisamos mudar para o usuário. E vemos que ainda temos um problema aqui. Por quê? Porque eu cometi este erro por roxos só para mostrar como quando você recebe um pedido diferente. Por exemplo, no painel de administração, estávamos recebendo o usuário como um objeto que irá conter o tipo de usuário, o usuário que tem um nome de ID, senha para o back-end estava retornando para mim este objeto, não todo ele. Era apenas o nome, talvez um e-mail, e algumas outras informações. Então, nesse caso, quando você tem conflito entre a solicitação de um post e eles GET solicitação, então é melhor no front-end para definir isso como qualquer. Porque lá GET solicitação, estamos recebendo isso como um objeto de usuário. Mas quando publicamos um pedido, precisamos enviar apenas o ID. Então, é melhor resolver esse problema, esse conflito entre o aplicativo. Você apenas diz que este campo é n. Então, nesse caso, você será capaz de usar o formulário que criamos aqui como uma string, bem como para postar uma ordem para o banco de dados ou para o back-end. Porque se você se lembra do backend com fios recebendo o usuário como uma string de seu ID para a data ordenada, só precisamos colocar data. Então agora é letra maiúscula. Então, quando o usuário postar este pedido com sucesso, então colocamos o ponto agora. Então, se formos para a ordem de data, então precisamos ter essa data agora e você pode encapsular isso como uma string. Então você pode usar um porquinho morcego e tomar isso como uma corda porque ele está pedindo como uma corda. Então, como você vê aqui, então vamos para a ordem que diz que eu quero isso como uma corda. Então podemos agarrar isso entre nós, pensar carrapatos. E agora precisamos pegar os itens do pedido. Então, queremos postar um pedido. Precisamos enviar os itens do pedido. Então, cada item de pedido, como lembramos, continha o produto e a quantidade. Por isso, temos de subscrever o carrinho deles novamente. Então, se você se lembra, criamos um serviço de guarda e serviço de descarte. Posso recuperar todos os itens do carrinho. Então vamos aqui e dizemos “privado”. E então temos que começar como serviço de carrinho. E será tipo de serviço de carrinho. E usamos este serviço de guarda para pegar os itens do jardim. Eu criei aqui. Membro da classe, que é chamado de itens de ordem. Então, um MD nele após a forma intializer, podemos dizer isso e, em seguida, obter itens de carta. Então, nesse caso, temos que definir um método após a inicialização do formulário, podemos dizer itens de carrinho Git privados. E este obter itens de guarda estará usando esse serviço de cartão. Então temos que dizer este serviço de cartão ponto e, em seguida, observar nossa guarda. Ou você pode usar também obter guarda porque nós não temos que usar diretamente. Os itens do carrinho, que temos, como todos observam que guarda porque não estamos fazendo qualquer cadeia. Então, toda vez que visitamos o componente, pegamos esse cartão do nosso armazenamento local e depois lemos os dados. Então você pode dizer como um carrinho constante. E, claro, você pode usar o cartão que criamos o observável. Assim, este carrinho terá um tipo que é chamado de cartão, e este cartão será importado dos modelos. Agora precisamos de itens de carta. Então eu tenho que dizer este ponto itens de ordem, que nós definimos anteriormente, nós diríamos itens de ponto de cartão. Mas aqui teremos um problema também. Porque se formos para itens do carrinho, eles terão ID do produto do item do carrinho. Mas no item do pedido de vamos para o modelo, temos apenas o produto. Então temos uma de duas opções. Talvez tenhamos que mudar isso para ID do produto também. Ou podemos mapear novos itens para caber nos itens deste pedido. Então eu posso dizer aqui que esta ordem guarda itens ponto mapa. E então neste mapa eu posso dizer item. E cada item será como um retorno para mim um objeto. E será produto, e este produto será item.name, ID do produto e, em seguida, a quantidade será a mesma quantidade de ponto do item. Então, desta forma, eu estou mapeando todos esses itens para ter um ID de produto, mas produto. Assim, ele irá percorrer todos os itens dentro, guarda item, item por item, e alterá-lo para que o produto não ID do produto lendo o ID do produto ponto do item. E este foi devolvido para mim matriz, como você vê aqui, de item de ordem. Então, nesse caso, preenchemos nossos itens de pedido. Então, para ter certeza de que temos tudo está bem, podemos apenas olhar no log console este item de ordem para ter certeza de que estamos realmente indo bem. Então, não podemos dizer console registrar esses itens de terceiro pedido depois que fizemos este mapeamento aqui. Então eu vou atualizar e, em seguida, vou abrir o console. E vamos ver que temos matriz, produto e quantidade. E será um produto não ID do produto, que se encaixa exatamente com os itens do pedido. E então, quando estou enviando um novo pedido, eu digo que este ou outros itens serão itens mais antigos que temos preenchido aqui. Precisamos calcular o preço total? Não, porque estamos se enviarmos o preço total para a parte de trás e, em seguida, qualquer usuário pode postar o preço total em. Nesse caso, isso fará para mim um problema que, como eu, colocarei. Por exemplo, hackear seu site e enviar um pedido com um preço total falso. Como eu posso colocar 41, $1000, Eu posso colocar $2 e eu posso enviá-lo para a API. Então o backend não está recebendo o preço total, mas estamos calculando internamente e colado fazer o banco de dados, então não temos que enviar esse preço total, o preço total no modelo que usamos porque nós queria usá-lo no aplicativo do painel de administração. Se você se lembra, nós fomos para pedidos e nós, nós, nós estamos recebendo o preço total aqui. Então, nesse caso, garantimos que tudo está acontecendo no back-end. Não enviamos nada para a frente. Então, sempre quando estamos fazendo esse cálculo, quando colocamos ordem, tudo deve se tornar do backend. Caso contrário, se você enviar do front-end como este aqui como uma string, por exemplo, você enviá-lo para o back-end, então não é uma boa prática porque qualquer um pode falsificar este preço e enviá-lo para o back-end e fazer um problema para você em a loja electrónica. Então, depois disso, fizemos o cheque. Criamos o modelo de pedido. Se você se lembra, criamos um serviço que é chamado criar ordem. E esta ordem de criação vai postar um pedido para mim no banco de dados. Então vamos chamar o serviço de pedidos. Vamos novamente para a nossa página de finalização da compra. Pedimos o serviço de encomenda. Então temos aqui serviço de carrinho. Precisamos de serviços privados. E seria tipo de serviço de encomendas. Então este serviço de ordem, precisamos usá-lo para criar uma ordem. Então eu vou aqui de novo. E então eu diria que este serviço de ordem ponto, ponto criar ordem. E eu vou enviar esta ordem, fazer o back-end. Mas como você se lembra, isso não será executado até que eu me inscreva. Então, quando podemos fazer a assinatura, e então podemos dizer ordem aqui ou podemos apenas mantê-lo vazio, como vazio. E então podemos redirecionar o usuário para uma página de agradecimento, como veremos na próxima palestra. Para que possamos dizer boatos. Direto também. Página de agradecimento. E como veremos mais tarde, vou adicioná-lo ao seu curso em breve. Como depois de você, ok, você olha para este curso, você se inscreveu, mas você não vê o pagamento. Vou adicionar o máximo de pagamento após duas semanas de criação deste curso. Então nós aqui, nós talvez não também, obrigado, mas também talvez para o pagamento. Então página de pagamento. Então vamos ver no pagamento que não vamos colar qualquer ordem ou qualquer ordem para o banco de dados até que o pagamento tenha acesso. E vamos fazer isso com o gateway de pagamento sprite. Mas e sobre o status, se você se lembrar, tivemos um status também para a ordem e você sabe que a ordem está vindo sempre como dobra inicialmente. Então o status da ordem, nós não sentimos isso porque nós não temos um quatro membros que é chamado de status aqui. Então, se você se lembrar, criamos uma constante no painel de administração, que é chamado de status. Portanto, o status da ordem inicialmente deve ser como flexão, como o estado inicial da ordem. Então, quando vamos para o aplicativo Admin e, em seguida, para a ordem, temos ordem constante e temos o status do pedido. Portanto, é melhor usar este status do pedido da mesma forma, que usamos no back-end. Então, nesse caso, podemos ler no backend os mesmos dados que são colados ou ambos através de seu front-end. Então aqui eu diria que talvez possamos mover esta constante de ordem, como a partir daqui, cortá-la e movê-la para a biblioteca de pedidos. Então vamos aqui e podemos ouvir colado perto dos serviços do modelo de componentes. Não podemos basear diretamente na biblioteca, então ela estará perto do módulo. E, em seguida, no aplicativo de administração, obteremos erro porque esse arquivo estará ausente. Então, especialmente quando eu estou liderando o detalhe do pedido e também a lista de pedidos. Então, como você vê, o status do pedido não será mais existir e ele vai me dar erro. Então primeiro precisamos importá-lo deste, de pedidos Blue Bits. Então nós pegamos este e colamos aqui, Ok, e remova esta parte e salve esta. E também nos detalhes da ordem, temos isso aqui e colar na ordem como eu vou obtê-lo da biblioteca de pedidos, mas ainda estamos recebendo o erro. Portanto, o status do pedido aqui não é exportado da biblioteca de pedidos. Então precisamos ir para o índice e dizer Exportar para mim, começar. E depois dizemos lábio. E este lábio vai, eu vou importar ou exportar a constante de ordem. Então, nesse caso, os detalhes do pedido no aplicativo do painel de administração e também a lista de pedidos. Veremos isso como a constante de status do pedido. Assim, assim podemos ser capazes de usá-lo também no front-end ou em qualquer aplicativo de loja, ou na própria biblioteca onde criamos o pedido ou postando o pedido. Assim, o status inicial para qualquer pedido, ele não será como processado ou enviado. Vai estar dobrando. Então, quando eu vou para o aplicativo do painel de administração, eu vou para o detalhe do pedido aqui o usuário receberá o pedido, o administrador terá sempre o estado inicial do pedido para novos pedidos como anexando. Assim, desta forma, vamos ter certeza de que estamos sendo sempre inicializados essa flexão. E então o administrador pode alterar o status aqui como vemos aqui. Então, agora vamos voltar para a nossa página de finalização da compra. Então vamos importar aqui a constante de status da ordem de status, que temos usado aqui. Assim, podemos importá-lo também para a nossa página de checkout. Então eu vou aqui. E então eu diria importar para mim o status da ordem constante de. E então selecionamos o caminho atual ou a patente porque estamos na mesma biblioteca, então não precisamos nos importar com isso. Então, depois disso, dizemos que o status do pedido inicialmente será o status do pedido. E então se precisarmos ir e verificar o status do pedido. Assim, o status do pedido no armazenado no back-end como a seguir, como você se lembra ou no banco de dados. Se formos para pedidos e veremos, em seguida, o status é armazenado como um número. Então também precisamos obter a chave, que não tenhamos que usar o rótulo ou sua cor. Precisamos pegar a chave tão longe que eu diria que talvez possamos ir, voltando para a nossa página do checkout. Então temos aqui a constante que temos página de check-out. Vou dizer aqui chaves de ponto de objeto. Então você sabe que isso vai devolver para mim as chaves deste objeto que eu estou passando aqui. Então precisamos pegar as chaves do primeiro objeto. Então, se eu pegar as chaves, então nós teríamos matriz das chaves, que é 0, 1, 2, 3. Então o que eu preciso é do primeiro. Então nós temos como este 0, tudo que você pode diretamente sem nada que apenas dizer que eu quero o status 0, que será armazenado no banco de dados, exatamente como nós temos um definido nosso mapeamento de status, que também está na constante como você vê aqui, temos o 0 para pendente. Então eu quero o estado 0 e ele será armazenado no banco de dados como status 0. E no painel de administração, ele aparecerá inicialmente como flexão, que é o status 0 0. Então eu vou primeiro. Podemos fazer como aqui um registro de console. Talvez possamos confirmar que é um sucesso. Então eu vou dizer console.log, como adicionado com sucesso. Claro, como eu disse, vamos substituir para agradecer página ou direção ou com o pagamento como veremos mais tarde. Então vamos salvar. Vou preencher estes dados rapidamente. Então eu sinto esses dados, eu vou fazer o pedido, mas vamos abrir o console para que possamos ver nossa mensagem se ela aparecer depois de fazer este pedido. Então, quando eu clicar em Colocar ordem, ok, adicionado com sucesso. Então vamos verificar seu banco de dados se estamos realmente adicionando este pedido com sucesso. Então vamos fechar novamente estes e, em seguida, atualizar nosso banco de dados. E vamos ver que se estamos recebendo a ordem, bom, nós temos a ordem aqui. Então temos o status do pedido e ouvimos tudo o que está relacionado a mim. E como você vê que temos o usuário é aquele convidado. Então não temos, como ouviremos, o nome e o e-mail porque não estamos deixando o usuário fazer login. Porque como dissemos, vamos forçar o usuário a fazer login na página de checkout para que possamos obter suas informações sem, por exemplo, colocar todas essas informações no banco de dados. Então, na verdade, nós podemos nos livrar do nome e e-mail aqui porque nós não precisamos dele, porque nós vamos perguntar ao usuário quando ele se registrar no futuro, quando nós vamos fazer a autenticação para inserir seu nome e e-mail no registro. Então nós, em seguida, basta fazer, por exemplo, estas são variáveis somente leitura ou campos somente leitura. E todas essas informações são editáveis para que ele possa fazer o pedido com seu e-mail e o nome com o qual ele se registrou. Então, vamos ao painel de administração, vemos se realmente temos essa ordem. Está bem, Legal. Eu tenho aqui a ordem dobrada para que eu possa ver a ordem e ela vem do convidado. É claro que, como eu disse, vamos substituir isso por um usuário, como veremos na próxima seção. Mas agora estamos postando a ordem como convidado. E mais tarde vamos usar o login e a autenticação no front-end para obter a ideia real usando a biblioteca compartilhada. Então, como você vê aqui, vamos ver como podemos usar o componente de login, que usamos também no aplicativo do painel de administração. Então, o mesmo bloqueio, vamos usá-lo também no front-end para fazer login no cliente e deixá-lo fazer pedidos. Na próxima palestra, vamos ver como podemos realmente direcionar o usuário para uma página de agradecimento após o sucesso de fazer o pedido. E uma última coisa que quero mostrar a vocês, se formos ao detalhe desta ordem, veremos que teremos a mesma quantidade, exatamente as coisas que tínhamos em seu carrinho. 167. Página de agradecimento: Após uma colocação bem-sucedida do pedido em nossa loja virtual, vamos redirecionar o usuário para uma página de agradecimento, como não podemos dizer a ele. Ok. Obrigado pelo seu pedido. Vamos enviar seu pacote em três dias, por exemplo. Então, podemos remover este log console que criamos aqui. E então vamos ler, direcionar o usuário para um novo componente. Eu já criei esse componente que é chamado obrigado e obrigado página será como alguma página de check-out. Será o mesmo na página de finalização da compra. E dentro há uma div que é chamado de página de agradecimento. Eu coloquei H2 como o primeiro título, como obrigado por estar conosco. E outro h3 que recebemos aqui eu tenho erro. Então o seu pedido e, em seguida, ele será entregue em próximos três dias também. Eu tenho um botão que vai voltar para as compras. Mas aqui eu não usei navegar e OnClick. Eu usei link roteador, como ele vai me levar para a página inicial do aplicativo. Então, agora vamos tentar isso. Então eu, é claro, depois de adicionar tudo isso, adicionei a rota para a página de sucesso. Eu chamei de sucesso. E o componente será componente de agradecimento. E, claro, isso também será autenticado como veremos mais tarde. Então, no meu componente de página de check-out, eu vou apenas usar o roteador novamente. Então, temos que dizer que este livro roteador navegue até a nossa navegação. E então será uma matriz. E será o dirigido como para o sucesso. Então, nesse caso, teremos como o redirecionamento de seu sucesso depois de garantir que subscrever como Sucesso. Mas se não, você também pode exibir uma mensagem de erro para o usuário. Você pode tê-lo como um dever de casa para você. Então você pode apenas dizer que há erro. Por exemplo, você pode exibir alguma mensagem para o usuário como eu disse. Então podemos dizer assim. Então, após a assinatura, temos aqui, a assinatura, esses colchetes. Após esses colchetes, você coloca uma vírgula, então ela responderá por você com o erro. Então, se houver erro nesta assinatura, então ele será executado aqui, então ele não irá navegar. Então talvez possamos dizer exibir alguma mensagem, por exemplo, para o usuário. Então você pode fazer isso como um dever de casa para você. Então, agora vamos tentar isso. Vamos como navegar para ver se estamos navegando. Depois de verificar para fora, Eu vou para a página de check-out, Eu sinto que os dados. E então nós vamos fazer o pedido e quando o seu sucesso, ele vai me redirecionar para a página de agradecimento. Então fazemos o pedido. Perfeito. Agradecemos por fazer compras conosco. Recebemos seu pedido e ele será entregue em três dias. E então você pode clicar em volta para comprar e você vai para a página inicial novamente. Então isso é ótimo. Então, fizemos o pedido com sucesso e agora temos totalmente E-sharp, como podemos dizer, funcional, só precisamos adicionar esses pontos, que eu falei sobre autenticação, que precisamos forçar o usuário a fazer login antes que ele possa verificar . Outro ponto, preciso mencionar, você vê que nosso guarda ainda está caindo. Então nós temos aqui como ele ainda é dois itens depois de colocar o pedido para que possamos inicializar, bem como o armazenamento local com carros vazios porque depois de sucesso off check-out, Eu quero ter este guarda tão vazio quando eu vou para a parte de trás para o site ou para a loja, Eu não tenho cartões porque eu pedi que já. Então, para fazer isso, nós também podemos ir para o nosso como aqui onde estamos criando com sucesso a ordem. Nós chamaríamos esse serviço de cartão. Então eles ficaram de serviço de guarda. Precisamos não chamar armazenamento local do cartão de inicialização porque em qualquer armazenamento local atual, como você se lembra, temos verificando se estamos tendo novo cartão, inicializado e novo cartão, então ok, fazer um novo cartão. Caso contrário, use seu cartão em nosso armazenamento local. Então precisamos de algo que é chamado de esvaziar esse carrinho. Então podemos também fazer carrinho vazio. Então, podemos ter esse método também. E aqui podemos copiar o mesmo. Então, podemos criar cartão inicial, podemos dar-lhe uma constante. E, em seguida, podemos dizer verificar como ponto de armazenamento local item conjunto e, em seguida, com carrinho inicial. Então, depois disso, podemos chamar esse método. Eu vou aqui. E então eu coloquei esse método em nossa página. Nós ainda temos erro aqui porque também precisamos mudá-lo para JSON porque caso contrário ele não vai funcionar. Então nós temos aqui cartão inicial e eu vou passar qualquer camisa cartão JSON. Assim, desta forma, temos o carrinho vazio novamente. Então vamos aqui e dizer para esvaziar o carrinho. Então, depois de navegar, então é melhor fazê-lo antes da navegação. Então esvaziamos seu carrinho e navegamos até a página de sucesso. Então vamos tentar isso. Então eu sinto a forma. Vou fazer o pedido. Ok. Vamos voltar para a loja. E como vemos que ainda temos esses dois aqui porque este está observando, como você se lembra, está observando o carrinho. Então, de alguma forma, temos que dizer ao observador para obter o cartão inicial, não temos que ter como o guarda observável que já mantemos. Então, para isso, eu vou para o serviço de carrinho deles e eu digo que este ponto guarda ponto observável próximo e então nós damos o carrinho inicial. Então, depois de esvaziar o cartão aqui, não podemos dizer estes dois pontos de cartão em seguida e, em seguida, instinto inicial. Então, nesse caso, a pessoa que está registrando no aplicativo depois, se ele ficou na página, por exemplo, ele voltaria para a página inicial novamente e ele verá que esse diretório guarda vazio. Então vamos tentar de novo. Vou adicionar dois itens a este guarda e, em seguida, ir para o meu carrinho, check-out, preencher o formulário novamente. Então eu vou dizer-lhe mais tarde para não preencher o formulário novamente, novamente para desenvolvimento, eu vou dizer-lhe como inicializar esses campos com valores iniciais. Então você não tem que sentir essa forma toda vez que você testa algo. Então eu tenho aqui, novamente o campo de formulário, então eu substituo um pedido. Como você vê, tudo bem, de volta para a loja. Temos aqui que Garth está vazio. Vamos novamente e vemos que temos, nosso carrinho já está vazio. Então, quando eu vou para o produto, eu adiciono algum item. Você vê que temos o item de volta novamente. Então, dessa forma, garantimos que temos carrinho vazio para o usuário. Ele não terá nenhum problema quando ele queria voltar para fazer compras na minha loja virtual. Eu só quero mencionar para você algo no caso propósitos de desenvolvimento como você quer desenvolver. Você não tem que sentir cada vez que este formulário quando você quer, por exemplo, para testar o check-out, eu tenho certeza que você vai tentar sempre para testar o check-out quando você está desenvolvendo. E então você precisa se sentir sempre dessa forma para tornar a solução fácil para você. Se você se lembrar, temos aqui alguma string que está vazia quando estamos criando o grupo de formulários. Então você pode dar aqui um valor padrão. Então você pode dizer aqui nome um, por exemplo, e-mail. Você pode enviar algum e-mail, email.com. E quando você estiver recarregando o aplicativo, você verá todos esses dados são preenchidos automaticamente, então eles serão por padrão com esses valores. Como você vê aqui, eu recarreguei e vejo esses valores padrão. Então, nesse caso, você não terá que se preocupar em preencher este aplicativo ou este formulário cada vez que você está atualizando seu código e, em seguida, você voltar, será um muito difícil para você. Então você acabou de configurar alguns valores padrão. E depois de terminar o desenvolvimento, você tem certeza de que tudo está bem. Em seguida, você pode substituir, remover todos esses valores padrão. Portanto, ele estará vazio por padrão para o usuário em público ou em produção. 168. Habilit login no check-out: Na seção anterior, vimos como conseguimos fazer um pedido como usuário convidado. Mas agora vamos fazer a colocação do pedido com base nos dados do usuário. Então, dessa forma, como cada loja, vamos pedir ao usuário para fazer login quando ele está pressionando o botão Checkout. Então, como podemos fazer isso facilmente? Então, primeiro de tudo, se você se lembra, nós criamos guardas, e esses guardas, eles são criados especialmente para proteger páginas. E usamos nosso componente de login, que criamos anteriormente no aplicativo de administração. Então, indo para os lábios, se você se lembra, nós temos ordens e essas ordens, se você se lembra, nós temos o módulo de ordem. E no módulo de ordem eu defini minha hipótese. Mas como podemos criar ou proteger a página de check-out, página de check-out, vamos usar algo como, por exemplo, a guarda que criamos para a página de administração. Voltando para o aplicativo Admin, se você se lembrar Indo para suas rotas, veremos que temos no módulo de roteamento aplicativo aqui que criamos pode ativar a guarda fora. E a guarda vinda da biblioteca do usuário, que criamos antes, que é verificar os links e o token. E, com base nisso, ele irá direcioná-lo para a página de login ou ele irá dizer-lhe, ok, você é bem-vindo. Você pode entrar e retornar, verdadeiro. Explicamos isso antes. Então, dessa forma, podemos usar também o protetor bucal para proteger a página de checkout. Então, a página de checkout, se você se lembra, nós definimos o ar fora dela, o módulo de pedidos. Então, dessa forma, não posso dizer que depois do banho pode ativar. E depois dizemos para usar o protetor bucal. E os Asgard vieram de onde? Da biblioteca de usuários. Então, se você ver, ele é automaticamente importado aqui. E não se esqueça da vírgula. Mas aqui temos um problema porque precisamos dizer que este é um array. Então você tem que colocá-lo dentro de uma matriz. Então array fora de guarda para evitar ter algum erro. Então, agora, se formos novamente para a nossa aplicação, indo, por exemplo, para o carrinho de compras, e eu vou para a página de checkout e, em seguida, dizer aqui , check out, eu não sou capaz de fazer nada. Então, vamos abrir o console e ver qual é o problema. Vamos ver que não há não pode corresponder a quaisquer rotas de login segmento URL, ok, Então eu sou realmente lido direcionado para o seu login, mas eu não posso ir lá porque um olhar na rota não está definido. Se você se lembrar, a rota definida na biblioteca do usuário ou no usuário é módulo. Se eu for para o módulo do usuário, eu veria o login do caminho é definido aqui. Então, dessa forma, eu preciso incluir o módulo de usuários no meu aplicativo. Então, se você se lembra, nós incluímos também o módulo do usuário, no módulo de roteamento de aplicativos ou no módulo de aplicativo do aplicativo admin para se definir para todas as rotas que estão incluídas nessa biblioteca, como você vê aqui. Então precisamos fazer o mesmo também para a oficina de máquinas. Então eu vou para o final você compra aplicativo e, em seguida, dizer no módulo de aplicativo, importar para mim o módulo do usuário. Então, dessa forma, eu vou usá-lo aqui. E então eu usaria a possibilidade de Auto Importar Tudo que você pode usá-lo ou importado por si mesmo manualmente. Então pressionando Ponto de controle ou espaço de controle, então você será capaz de ver o Método de Importação Automática. Então, dessa forma, vamos ver que o módulo foi importado. Ok, Vamos salvar agora e nosso aplicativo será recarregado e eu vou tentar clicar na página Checkout novamente ou no botão Checkout. Eu cliquei. Como você vê aqui, passamos para a página de login da loja I-N-G. Então o logotipo é exatamente o mesmo estilo que criamos antes com o fundo cinza e também, por exemplo, a imagem e também o texto. Então ele está usando o mesmo componente que temos usado anteriormente na página de administração. Mas como vê, tudo é mantido aqui. Por exemplo, o cabeçalho e também o rodapé, portanto, apenas no contêiner. Então, agora, se eu olhar como um usuário, como meu usuário que está registrado em seu banco de dados, então eu vou ser capaz de ver a página de checkout. Caso contrário, eu não posso ver ou eu não posso verificar apenas se eu posso ou se eu olhar em sua loja. Então eu vou tentar fazer login. Então eu vou colocar aqui meu e-mail que eu tenho. Então eu vou colocar aqui o e-mail e então eu tenho a senha. Como você vê aqui, eu sou redirecionado para a página inicial. Agora, eu vou voltar para a página de check-out e eu vou ver ok, que eu posso acessar a página de check-out. Então, nas próximas palestras, eu vou preencher meus dados automaticamente. Você sabe que eu tenho, meu usuário já tem dados no banco de dados. Dessa forma, se eu não tiver isso no início, posso colocar ou preencher o formulário, fazer o pedido, e meus dados serão salvos no banco de dados. Mas como eu vou carregar os dados do usuário, é assim que vamos ver na próxima palestra, vamos usar NGINX para salvar todos os dados do usuário em alguma loja onde podemos ser usados em todos os lugares no aplicativo. Então, por exemplo, aqui nos produtos, como você vê, eu não posso ver um produto, mas eu não posso fazer uma revisão somente se eu estiver bloqueado. Então, porque aqui vamos adicionar alguma seção de revisão que não aparecerá apenas se o usuário estiver logado. Como eu posso saber que o usuário está logado no aplicativo que usaríamos para que MDR x com o atual, usamos os observáveis como você vê antes. Mas agora vamos usar o MDR para fazer um gerenciamento de estado do estado do usuário ou a sessão do usuário em sua loja. 169. O que é NGRX: Ok, nesta palestra vamos saber o que é MGR X, y. precisamos de NGINX. Então NDR x em geral é um gerenciamento de palco. Ok, você não me entendeu, mas vou explicar de uma maneira que é prática para você. Muitos cursos estão cobrindo e DRX como uma biblioteca e pode ser usado para gerenciamento de palco. Mas o que é a gestão estatal? Se você se lembra antes de criarmos Adicionar ao carrinho. Então, quando estou adicionando algo ao carrinho deles, vejo que o número aqui está aumentando. Então é como se eu tivesse uma variável pública que toda a aplicação tem acesso a essa variável. Ele pode ser aumentado de qualquer lugar ou de qualquer componente. Então, quando eu vou aqui ou quando eu vou, por exemplo, para a página do produto, eu clico em Adicionar ao carrinho. Vou ver que este número está aumentando diretamente de qualquer componente que está usando estes, por exemplo, que o estado. Então, dessa forma nós fizemos isso, nós usamos observáveis, mas agora nós vamos usar isso usando NGINX. Então NGINX na verdade é uma loja que contém as variáveis públicas que são usadas entre o aplicativo. Então, para mim, eu tenho uma variável que é pública. Posso acessá-lo de qualquer componente. E este é exatamente o objetivo de x. Claro, ele também tem mais habilidades, como veremos mais tarde, como ter efeitos ou está buscando dados do banco de dados, etc. Assim, o uso é para variáveis públicas que podem ter r pode ser acessado a partir de qualquer componente. Então, como estruturado aqui, eu tenho uma loja de variáveis. Então loja ou variável tem, por exemplo, acesso a algo chamado efeitos redutor e o serviço de descanso e componente inteligente. Então nós temos, por exemplo, nosso componente inteligente, que será no nosso caso como este. Então eu tenho aqui nosso componente inteligente, que será o próprio produto. Eu clico em um botão e, em seguida, faço uma ação. Então essa ação está me dando a capacidade de acessar essa variável no carrinho. Assim, o componente inteligente dessa forma ou qualquer componente em Angular, é observar ou subscrever a esse armazenamento das variáveis e ler dados a partir dele. Claro, que também há, por exemplo, o componente inteligente pode criar uma ação. Portanto, é preciso uma ação para alterar alguma variável em sua loja. Então, por exemplo, eu tenho uma ação que é como Adicionar ao carrinho. E este Adicionar ao carrinho vai buscar alguma ação é chamado Adicionar ao carrinho para alterar o valor da variável de número do cartão ou contagem do carrinho quantos produtos no carrinho a ser aumentado na loja. Então, aumentar que na loja está usando algo um redutor. Assim, o redutor é usado para filtrar os dados ou atualizar o estado dessa variável. Ele vai se mover, por exemplo, como vimos aqui, de três para quatro quando eu clicar em Adicionar ao carrinho. Então, dessa forma, o aplicativo ou qualquer variável pode ser visto a partir de todos os componentes. Então eu não tenho, por exemplo, como dizer que não podemos ter uma variável privada para cada componente. Então, dessa forma, muitas pessoas estão perguntando como eu posso definir uma variável pública que pode ser acessada nossos dados de transferência de componente para componente. Esta é a maneira que NDR x ou usando observáveis epsilon como vimos antes. Então, agora, como você vê aqui na documentação do NGINX, ele está dizendo que é uma estrutura para gerenciar o estado global e local. Eu vou mostrar-lhe também um exemplo de uso de MDR x em algo como um dados em tempo real. Então eu quero, por exemplo, eu tenho um aplicativo de negociação. E neste aplicativo de negociação, eu tenho vários componentes e os preços estão sendo alterados muito rapidamente com base no WebSocket. Então, por exemplo, este site, chama-se hetero. Eu não sei se você sabe disso. E é observar os preços de todas as ações como, por exemplo, o petróleo ou, por exemplo, que Bitcoin aqui como você vê o Bitcoin, por exemplo, este componente está ficando aumentado ou diminuído com base em alguma conexão WebSocket. E o estado deste componente está sendo atualizado, sempre como os números aqui estão sendo atualizados. Como isso está acontecendo, como isso está sendo atualizado, o tempo. Isso é chamado de estado. Assim, o estado deste componente, que é chamado Bitcoin, e este número está sendo atualizado sempre com base nos dados WebSocket que estão vindo em tempo real do banco de dados ou do servidor específico. Mas os outros componentes não estão sendo atualizados porque não há nenhuma ação de estado é mencionada ou indo para esses componentes. Então, só esse componente. Então eu tenho que assumir que eu tenho, por exemplo, uma variável que é chamada Bitcoin na loja estadual. E esta variável só está sendo atualizada, mas os outros como ouro ou Euro-USD não estão sendo atualizados. Então, a mesma coisa que fazemos aqui. Usamos apenas uma variável em nossa loja de estado, então usamos apenas o carrinho. Então, como você vê, há vários. Então aqui temos apenas a variável guard, modo que pode ser acessado a partir de todos os componentes no aplicativo. Então esta é a idéia principal de MGR x em geral, vamos ver em detalhes como vamos implementar e o r x para observar a sessão do usuário. Então, dessa forma, quando eu estou indo para check-out, eu tenho armazenado uma variável, variável pública, que é chamada de usuário autenticado. Então este usuário, quando tem dados, então ele vai preencher esses dados aqui. E também, por exemplo, vou usá-lo como você vê mais tarde, que teremos aqui alguns comentários e comentários. Então o usuário, se ele está bloqueado ou se esta variável é definida na loja de estado, então nós vamos ter aqui algo como um campo de revisão e comentário. Assim, o usuário poderá ver que, se ele não estiver logado, você verá apenas esta página. Se ele não estiver preso. 170. Vamos criar loja de estados NGRX na biblioteca de usuários: Passando pela documentação de ovos NDR, se você ir diretamente para algo chamado arquitetura ou começar no site NDR x dot au. Então você verá este diagrama. E neste diagrama está explicando para vocês mais o que eu falei antes. Então, como você vê aqui, temos um componente está sempre fazendo uma ação. E, em seguida, esta ação pode ser, ele vai usar dados para obter alguns dados do banco de dados ou não. Então é por isso que está pontilhada. Então esta ação vai usar o redutor para alterar um estado ou uma variável na loja de estado ou na própria loja. Então aqui temos algo chamado seletor. É como, por exemplo, eu tenho aqui 20 variáveis e eu quero que meu componente selecione apenas uma variável ou subscreva a ela para observar sempre o estado desse valor na porta dos Estados. Então, dessa forma, todos os outros componentes, como se eu tiver aqui outro componente, veremos as mudanças também dessa variável no ponto de estado. Então, usando seletor também é algo que vamos ver agora em ação. Então, se você imaginar comigo que na arquitetura de MDR x há algo chamado redutores de ações, seletores, O que são eles? Eles são arquivos e todos esses arquivos, eles são classes. E eles contêm algumas funções para alcançar este diagrama. Então, para ver como criar esses arquivos, impraticável, eu vou mostrar a vocês uma maneira com o NX aqui no console NX. Se você se lembra, estávamos criando componentes. Estávamos criando vários funcionários usando este console. E isso nos ajudou a gerar também alguns caldeirão de n DRX. Então, quando eu clicar em Gerar aqui, eu vou ter uma lista. E nesta lista eu vou ver que eu vou ter romance angular e DRX. Então, dessa forma, vamos gerar os arquivos que são necessários para Angie RX ou a loja de estado usando este console. Então, quando eu clico nele, ele está me pedindo para definir um nome para esse recurso. Então, se você se lembra, nosso aplicativo é dividido dois recursos ou bibliotecas. Temos pedidos, produtos, UI e também usuários. Então precisamos ter o estado do usuário ou a sessão do usuário em nossa aplicação. Assim, todos os componentes no aplicativo ou na loja podem acessar essa variável para buscar dados do usuário em todos os lugares no aplicativo e observar as alterações se o usuário estiver autenticado, bloqueado ou não. Dessa forma, exibo algumas informações sobre o aplicativo ou não nesses componentes. Então, em primeiro lugar, é pedir um nome. Portanto, este nome é será sempre o mesmo nome do recurso. Então, por exemplo, aqui eu tenho usuários. Tudo que você pode definir qualquer nome, mas aqui neste caso, vou chamar também usuários e também o módulo. O módulo aqui você precisa especificar o caminho exatamente como ele está aqui. Então, primeiro de tudo, você tem que dizer lábios. E depois de vidas temos SRC cortar SRC. E então vamos colocar lib, e então vamos especificar o módulo. O que é um módulo como vimos aqui, seu módulo de usuários. Então aqui este arquivo vai ser alterado com base em como geração do armazenamento de estado porque ele vai adicionar algumas bibliotecas e algumas importações onde ele está usando o armazenamento de estado. Então aqui temos que definir o arquivo, eu vou dizer módulo users.js que tem exatamente o mesmo nome do arquivo aqui. Ok, o que é esse dicionário ou diretório que será definido? Normalmente eles estão nomeando assim. Chama-se estado. Mas, por exemplo, para nós, podemos remover este plus e defini-lo dessa forma. Além disso, como você vê, o comentário está sendo executado e está dizendo que erros podem acontecer. Então, por exemplo, aqui é um passado que não existe. Eu cometi aqui erro, especialmente para mostrar quando você começa algum tipo de erro, você tem que ver qual é o problema. Então, como você vê aqui, eu tenho aqui faltando S. Então será depois da adição o S deve estar bem. Certo, ainda temos o erro. Passar não existe y. vamos verificar o porquê. Então, por exemplo, nós temos aqui os lábios, como você vê, nós definimos a partir dos lábios de cima e então nós esquecemos o nome da biblioteca. Então eu tenho que colocar lábios, usuários e, em seguida, SRC e, em seguida, lib, e, em seguida, usuários. Então, depois disso, deve ficar tudo bem. Então, como vê, está mostrando o que vai acontecer. Ainda não aconteceu. É criado um arquivo que está neste caminho. É chamado de efeito, exatamente como eu disse, modelo e também redutor de usuário e, em seguida, seletor e, bem como alguns a atualização no módulo do usuário e index.js. Então, dessa forma, eu também tenho várias opções onde eu posso definir, bem, algum comportamento específico desta loja de estado. Então, por exemplo, eu posso gerar FSH. Isto é para o Sayed. Ele é usado para usar algumas funções onde eu posso acessar a loja de estado e tornar meu código mais organizado e mais bonito quando eu quero algo da loja de estado como veremos mais tarde. Então verifique isso também. Vai nos ajudar tão bem quanto vemos aqui que está gerando alguns modelos. E se você se lembra, temos modelos já definidos em nossa aplicação. Portanto, não há necessidade de criar como modelo. Então vamos remover este depois que a barraca do estado for criada. Então agora estamos prontos para executar este comando. Dessa forma, poderemos usar a loja estadual. Então nomeie o módulo que passa pelo módulo, o direito, o nome do diretório. E aqui estão algumas opções. Você pode usá-los ou você pode cavar sobre eles. Por exemplo, aqui você verá que este barris vai criar para você importação ou exportação dos componentes para que você possa importá-los de uma só vez. Mas eu quero mostrar-lhe o estado puro apenas o que é realmente necessário, por exemplo, aqui para analisado e também a soma mínima replicada. Mais comentários estão aqui. Então você não precisa usá-los. Configuração de rota, rota para gerenciamento de estado de feição com MDR x. Você não precisa fazer isso porque vamos fazer isso manualmente. É mais seguro para manter nossa aplicação da maneira correta. Então aqui, há muitas informações como, por exemplo, ignorar um JSON. É Nossa vai adicionar as dependências NDR x para instalar e biblioteca DRX para nossos módulos de nó. Então, dessa forma, você pode ignorá-lo se você já tiver instalado. Mas se você não tiver instalado, não verifique este. E também a ciência TX e RX você pode definir, como você pode ver na documentação ou como veremos mais tarde, dois estilos de criação do NDR ao lado. Óculos e criadores. Por exemplo, aqui vou mostrar-lhe a ação. Vou criar ação. E essa ação pode ser criada dessa maneira. Então algo como login constante criar ação, e esta ação tem algumas propriedades. Há também uma outra maneira, criando uma classe, mas eu prefiro o caminho dos criadores. É melhor e ele vai dar-lhe uma mais dinâmica em digitação para o TypeScript. Então, antes de terminar este vídeo, por favor revise o que você tem aqui para ter exatamente como eu tenho. E, em seguida, clique em Executar, e então você verá o estado do arquivo ou o estado adicional tem criado aqui com os arquivos de teste também. Dessa forma, veremos nas próximas palestras quais são ações FX para saids, et cetera, que nos ajudarão a criar nossa loja de estado da sessão do usuário em nossa loja. 171. Processo de sessão de usuários com Diagram: Tudo bem, no início, eu gostaria de explicar como um diagrama como o processo será quando nós estamos indo para obter o usuário ou construir a sessão de usuário. Então, como um lembrete, o objetivo principal que eu quero, cada componente da minha aplicação como detalhe do produto, componente bomba, e também verificar componente página. Obter alguns dados da loja que são compartilhados entre todos os aplicativos. Então, por exemplo, eu defini aqui duas variáveis. Um deles é o usuário. Ele conterá os dados do usuário do usuário conectado atual. E também irá segurar, é autenticado, é como, por exemplo, é uma variável booleana. Pode ser verdadeiro ou falso, o que está dizendo que, ok, Agora a loja ou o site autenticou usuário ou não. E com base nisso, Como eu disse, podemos mostrar, por exemplo, algumas partes do aplicativo como a revisão do produto e bem os dados do usuário. Ele vai me ajudar a fazer um componente de página de check-out e também um pegar os dados do usuário conectado atual para o meu check-out para. Então, como será o processo, o processo que realmente precisamos agir, para fazer uma ação como você se lembra. Então, algum componente está acionando uma ação e, em seguida, ele vai disparar para nós para buscar dados do banco de dados do usuário com base no token e como falamos antes. Então eu vou com o processo fácil primeiro. Por exemplo, temos aqui uma página de login, e quando eu clico em Login, estou criando um token que está vindo do banco de dados ou do servidor. E, em seguida, eu vou pedir a loja de estado para disparar para mim e ação, que é chamado Build sessão de usuário. Claro, isso é após o login bem-sucedido. Então, dessa forma, depois que eu construir a sessão do usuário, eu diria para a loja, ok, o usuário é dados do usuário, que eu obtenho do banco de dados e também é autenticado, é verdade porque eu tenho login bem-sucedido . Assim, o login em si disparou os dados ou disparou esta ação e alterar os dados em seus estados. Dog as duas variáveis que eu tenho, que são usuário e também autenticado. Também outra ação pode, por exemplo, ou outro componente ou outro evento pode mudar para mim, a loja de estado, ok, o usuário já está logado. Ele voltou, por exemplo, depois de duas horas, ele abriu o aplicativo novamente. Agora, como você se lembra, estamos lendo esse token do armazenamento local para ver se esse usuário está autenticado ou não. Então, dessa forma, eu vou julgar se é como um token válido, então estamos construindo uma nova sessão de usuário, ok, dizer para o efeito e também o redutor, como veremos mais tarde em detalhes, para definir que é autenticado para true e também obter os dados do usuário do banco de dados e passá-los para a variável de usuário no documento States. Se não, o que é possível, como então temos, por exemplo, o token não é válido, então eu vou dizer, ok, nele sessão de usuário para sessão, ou, por exemplo, redefinir a sessão do usuário. Portanto, redefinir uma sessão de usuário é definir, é autenticado para quedas e os dados do usuário serão nulos no armazenamento. E quem está assistindo era o que está acontecendo na loja. Esses componentes. Portanto, não só página de checkout ou detalhes do produto, talvez outro componente também na minha aplicação. Então esta é a ideia principal da NGINX ou da gestão dos estados. Claro, existem muitos usos. Você também pode armazenar todo o seu armazenamento de estado de dados. Mas eu estou especificando aqui um caso em que é realmente necessário o MDR x. Então, dessa forma, você aprende como construir uma ação, como dispará-la, e então criar efeito e redutor para alterar o estado do na loja de estado. E então vamos ver como podemos ler todas essas variáveis nos componentes que eu preciso para construir meu aplicativo para mostrar ou ocultar coisas. Convido você a dar uma olhada neste diagrama. Novamente. Nós o guardamos em seu cérebro. Ele vai nos ajudar nas próximas palestras para construir nossa loja de estado em relação ao usuário e autenticação. 172. Serviço de sessão do usuário: Agora vamos continuar criando nossa lógica, lógica para inicialização da sessão do usuário. Vamos fazer essa lógica aqui. Então, a partir de carregar o aplicativo, eu vou ler um gesto token se for válido. E então eu vou fazer com uma ação adequada para definir algumas variáveis na loja de estado. Então, primeiro de tudo, precisamos de um serviço que é chamado de serviço de usuário init. Então, como podemos chamar este serviço? Não podemos chamar o serviço na verdade em nossa inicialização do aplicativo. Então, voltando ao final, você compra o ponto de entrada do aplicativo no está no componente do aplicativo. Então, podemos ouvir, ter na inicialização do aplicativo, podemos chamar um serviço na sessão de aplicativo de TI. Então, para isso, eu vou chamar o serviço de usuário. Então temos aqui no construtor como sempre, como estamos chamando serviços nos componentes. Então eu vou dizer aqui um serviço privado e, em seguida, eu vou dizer usuários. Serviço de usuário virá do serviço de usuários, que definimos na biblioteca do usuário. Em seguida, dentro deste construtor, vamos inicializar o, por exemplo, a sessão do aplicativo. Mas você pode muito bem fazer, nele. Então você pode ter aqui como na inicialização do componente aplicativo, como o nosso aplicativo vai chamar o serviço que é chamado sessão aplicativo init. Então vamos ter aqui nele, implementa nele. Então, dessa forma, precisamos chamar algo chamado NG na função init. E esta função será executada quando nós estamos indo para chamar o aplicativo ou quando começamos o nosso final você compra. Então, dessa forma eu vou dizer este serviço de usuário ponto, e então eu vou chamar o serviço que eu quero. Então vamos para o serviço do usuário clicando no controle e no clique do mouse, ele irá levá-lo diretamente para o serviço do usuário. E no serviço do usuário, se você se lembra, tínhamos muitos serviços que criamos para nossos usuários, criando, editando e adicionando. Então, no final aqui podemos ter como algum serviço, chamamos de qualquer sessão de aplicativo. E nesta sessão de aplicativo init, vamos chamar algo ou alguma ação que virá da loja estadual. Então, desta forma, aqui vamos começar a nossa inicialização da sessão no estoque estadual. Vamos ver se tudo está funcionando bem. Então eu vou salvar este aqui. Então também precisamos chamá-lo aqui. Então, depois de termos isso, obsessão, ok, nós chamamos isso. E depois salvamos, e salvamos este. E nosso aplicativo está sendo executado sem erros. Então vamos verificar o navegador. Ok, nós temos um problema que temos módulo de aplicativo, módulo recurso loja, mas reduzir seu gerente, gerente redutor, reduzir e gerente. Isso acontece porque estamos criando um armazenamento de estado em uma biblioteca. Então aqui os usuários é uma biblioteca, mas o aplicativo não sabe nada sobre este armazenamento de estado. Então, para inicializar o armazenamento de estado em geral, precisamos criar ou chamar alguns métodos no módulo de aplicação. Então, no aplicativo e você compra ou no aplicativo que você está indo para criar, você precisa iniciar o armazenamento de estado de alguma forma como a inicialização pode ser. Precisamos chamar dois módulos. Então esses dois módulos serão o primeiro módulo de uma loja. Assim como esta porta que vai inicializar a minha loja. Então armazenar módulo, você tem que ter certeza de que ele é importado de MDR x biblioteca. E então você pressiona ponto e então você tem quatro raiz. E esta raiz de quatro, chamará um objeto vazio. Então aqui estamos inicializando nossa loja com objeto vazio também. Vamos usar efeitos, efeitos. Nós saberemos para que eles são usados mais tarde. Então temos aqui afeta módulo. Então, e então podemos chamar novamente para root e inicializá-lo com objeto vazio ou não, nós inicializá-lo com matriz vazia. Assim, podemos ser capazes de inicializar nossa loja. E vamos salvar e ver se o erro desapareceu. Ok, agora nosso aplicativo sabe que há uma loja estadual. Então, dessa forma, eu sou capaz de começar a trabalhar com minha loja de estado na biblioteca do usuário. 173. Criação de ação de sessão de usuários: Ok, nossa loja de estado tem armazenamento inicializado afeta módulo no nível de aplicação. Vamos ver o que aconteceu no módulo do usuário, porque se você se lembra, dissemos que ele foi atualizado. Então aqui diz que também está chamando o módulo em si. A biblioteca, como o módulo de biblioteca do usuário, está chamando o armazenamento de estado. Mas para o recurso, porque os usuários é destaque no aplicativo. Então, dessa forma, eu não estou chamando por rota, mas eu estou gravando um recurso. Então este do usuário, os usuários apresentam D. Então você precisa para recurso dois parâmetros, um, esse nome do recurso, e então também o redutor. Redutor, que vai ser usado na loja de estado para alterar os estados e alterar as variáveis dentro do estado armazenado. Então aqui precisamos de um nome e também o redutor. Redutor vêm do arquivo redutor. Então, se você for aqui para os usuários da estrada, você verá que nós inicializamos algo com os redutores. Certo, vamos trabalhar com isso. Vamos excluir algum código que é inicializado automaticamente pelo plug-in de um console ECS. Mas antes de tudo, vamos criar uma ação. Ok? A ação vai verificar ou construir a sessão do usuário com base em algum token. E este token será tratado se for válido ou não dentro dos efeitos. E no redutor, eu vou mudar as variáveis com base nisso. Então vamos ver como este exemplo ou esta inicialização de estados porta instinto chamando a ação. Então, se você vai para os usuários para avaliá-lo dizendo aqui como se fosse, é claro que é um serviço. Então, como você vê aqui, seus usuários para analisado. E este usuário analisado contém algumas variáveis, Vamos ver mais tarde. E também construtor que tem uma loja e, em seguida, nele, e neste init, está dizendo que este ponto armazena a ação do usuário do crachá nele. Portanto, há ação nas ações do usuário, que é chamado de terminá-lo. Vamos à acção do utilizador, está bem? Nas ações do usuário, há ações são inicializadas com a nossa criação desse armazenamento de estado. Então podemos criar agora nossas próprias ações. Então vamos colocar aqui algum espaço. Claro que vamos apagar essas coisas mais tarde, mas vamos criar nossa ação. Então, primeiro de tudo, eu preciso criar a ação que é chamada Build user session. Então você inicializaria constante e isso será chamado de compilação de sessão do usuário. E desta forma, eu vou ter um método de ação criar que é chamado de armazenamento de estado. Então aqui, como você vê aqui, criar ação é importada da biblioteca armazenada e GR x. Então, dessa forma, você precisa dar um nome para esta ação. Assim, o nome normalmente é chamado dessa forma, você define o nome do recurso, você pode dizer usuários, e então você pode definir o que esta ação está fazendo. No nosso caso, é chamado Build user session. Assim, criamos nossa primeira ação. Claro, há mais ações que virão mais tarde, como em sucesso ou fracasso, como desmarcar o token, repelido ou não. Então é isso que vamos fazer mais tarde. Então, agora, Ok, eu vou voltar para a minha identificação do FSA. Vamos limpar uma coisa aqui. Então vamos remover todas essas coisas. Não precisamos deles inicializados. E também podemos remover este comentário aqui, e podemos dizer construir método de sessão do usuário. Então aqui temos construir sessão de usuário também. E ele vai enviar para mim uma ação da ação que nós criamos antes, que é chamado Build user session. Dessa forma, estou despachando a ação. Então precisamos chamar isso de alguma forma para onde vamos chamá-lo. Vamos chamá-lo no serviço que criamos antes. Então, dessa forma, irei ao Serviço de Usuário. E no construtor, preciso chamar a identificação da FSA, se você se lembra. Então, aqui vou dizer usuários privados para Sayed. E então chamaremos o usuário de primeiros socorros da loja estadual. Então eu vou dizer aqui faceta usuários. Então, dessa forma ele foi importado automaticamente e eu posso usá-lo e usar os métodos dentro dele. É um serviço. É como se estivéssemos chamando um serviço interno. Então eu diria aqui, esses pontos usuários para avaliados. E, em seguida, eu vou construir sessão de usuário dessa forma, esta conta, então sessão de usuário, ele irá despachar uma ação para mim que é chamada Build user session. E com base nisso, a ação enviará notificação para o efeito para fazer algo, como veremos na próxima palestra. Vamos salvar agora tudo para ver se tudo ainda está funcionando bem. Não temos erros. Então voltamos ao nosso navegador. Certo, não temos erro. O aplicativo ainda está funcionando bem. 174. Como criar o UsersState: Ok, vamos fazer agora a loja, a loja dos usuários. Então, na loja, terei dois campos. Um é um usuário que irá manter para mim os dados do usuário como nome, endereço, e-mail, etc, e também se autenticado, se o usuário é autenticado ou não. Então agora vamos criar esse estado. Que os estados são criados nos redutores. Então, em que ele usuário, teremos alguma classe ou interface que terá os campos ou as variáveis que eu preciso usar na minha loja, como o usuário, e é autenticado desta forma aqui, como você vê, existem alguns inicialização já concluída. Nós não vamos usá-lo. Eu vou explicar isso e criado na frente de você passo a passo para não ter um problema ou mal-entendido. Então, em primeiro lugar, podemos manter todas essas importações. Vamos remover o que não precisaremos nas próximas palestras ou nessa refatoração. Então, primeiro, eu preciso criar um estado. Para criar um estado, precisamos ter Exportação e, em seguida, definimos interface. Como você vê aqui, ele já criou propriedade, mas vou dar-lhe um nome, estado do usuário, que é melhor nome e mais claro para não ter um nomes duplicados datas entre a biblioteca. Se você quiser ter outra loja de estado em outra biblioteca. Então você não precisa também ter aqui Entidade, estado ou entidade de usuários. Falaremos sobre isso mais tarde em assuntos mais avançados. Então eu preciso criar uma interface pura que é chamado de estado do usuário. E esse estado de usuário terá dois campos. Um é chamado de usuário. Ele terá um tipo, é chamado de usuário. O modelo de usuário, que criamos a partir do usuário no modelo que conterá e-mail, senha, etc Assim, todas essas informações, eles estarão nesse campo. E também, vamos criar uma variável que é chamada é nossa autenticada. Então, dessa forma, podemos saber se o usuário está autenticado ou não. Então ele terá um tipo booleano. Ok, Então, para isso, podemos remover este original que é criado pelo console NX. E agora há interface que é chamado de estado parcial de usuários. Então, só precisamos substituir o estado parcial dos usuários. Normalmente não precisamos dele por enquanto, mas vamos precisar dele também em assunto mais avançado. Mas vamos ter o tipo dessa chave de recurso de usuários, que é chamado de usuários. E, em seguida, ele terá um tipo de estado de usuário. Certo, não precisamos desse adaptador. Agora, depois disso, precisamos ter estado inicial. Assim, o estado ou o estado inicial do meu aplicativo, normalmente o usuário é nulo no início e também autenticado é falso. Então precisamos ter estado inicial também. Então eu vou chamar aqui constante de exportação também. Será chamado de estado inicial. Então eu vou ter aqui os usuários iniciais estado para ter como nomes mais convenientes. E, em seguida, neste estado de usuário inicial, ele terá um tipo de estado de usuário, e será igual a um objeto. Então este objeto terá um usuário vazio como null no início como dissemos, e é autenticado será falso no início. Então temos um estado inicial como esse. Então, desta forma, criamos nosso estado. Então agora vamos criar o redutor, como ele vai sentir a ação. Então eu vou dizer quando alguma ação aconteceu como construir estado de sessão, eu vou chamar algo. Se não houver nada, então não fará nada ou nenhuma mudança em sua loja de estado. Então eu vou primeiro remover tudo isso como se já tivéssemos estado inicial. Então agora criamos um redutor. Seria chamado também redutor de usuários. Será o mesmo nome da loja de estado, como sempre usuários, usuários, é plural. Então, agora nós criamos uma redução que cria método redutor vêm da porta estados DRX. Então aqui temos criar redutor e ele vai pedir para nós estado inicial. Qual é o nosso estado inicial? Este é um? Estado inicial do usuário? E qual é o outro ou quais são os outros parâmetros? Outros parâmetros serão, por exemplo, os tipos de redutores. Então vamos ter um código mais organizado. Podemos colocar isso para baixo e bem colocar isso aqui e vamos colocar vírgula, nosso primeiro ou segundo parâmetro estará ligado. Este em também é importado a partir dos redutores ou de MDR x. Então, como você vê aqui, temos aqui em é importado. Assim por diante. Então eu vou dizer que ação sobre a ação, que é das ações do usuário. Como você vê aqui, é importado estrela como ação de usuários, como importar tudo de ação de usuários e, em seguida, você pode usá-los. Então temos aqui também carregar usuários de acesso, ou temos aqui construir sessão de usuário. E isso no método, ele terá dois parâmetros. primeira é a, por exemplo, a ação em si, como a ação que vai acontecer. Então eu vou ter aqui ação ponto build do usuário, sessão do usuário. Ok, o que vai acontecer? Então aqui o segundo parâmetro, vamos mudar o estado. Então eu vou ter também uma função de retorno de chamada que terá como um estado de parâmetro. E vai fazer algumas coisas para mim ou mudar o estado em si. Por agora. Nós só podemos fazer como uma mudança no estado, gosto de copiar como ele é. Não vamos atualizar o estado. Então eu tenho aqui também outros suportes. Então eu vou dizer aqui, basta copiar o estado, então não faça nada a ele, apenas clone. Assim, nosso estado não mudou, nada aconteceu com ele. Certo, dessa forma, sabemos que nosso redutor executará algo baseado nessa ação e mudará esse estado. Vamos fazer mais mudanças na próxima palestra quando vamos trabalhar com o efeito. Mas primeiro, vamos remover este código que não é necessário porque já o criamos. Então agora temos aqui o redutor de função, que é exportado e usado no módulo do usuário, se você lembrar. Então temos aqui o estado, será do estado do usuário tipo e, ou indefinido e a ação. E aqui o redutor do usuário foi criado e é importado e usado aqui. Assim, desta forma, a nossa loja de estado está pronta do ponto de vista do estado. Assim, desta forma, posso chamar todas as ações que preciso e mudar o estado com base nisso. Ainda estamos tendo alguns erros no console. Você pode ignorá-los por enquanto porque eles estão nos seletores e nós vamos corrigi-los nas próximas palestras. 175. Crie ações eficazes se Tokens válidas ou não: Depois de ter a compreensão das ações e também redutor e da loja de estado, vou fazer uma atualização para o nosso diagrama. Então, se você se lembrar, nós criamos ação que é chamado sessão de usuário cinto. Assim, desta forma, teremos duas opções com base no token. Então o token, se for válido, ele dirá que, ok, construir a sessão de ação do usuário é sucesso. E também, se não, será falhado e mudará lá. Ou ele irá ordenar o redutor para fazer algo para o armazenamento de estado, como configuração é autenticado para false e o usuário para null. E do jeito oposto, isso acontecerá quando o token for válido. Assim, a sessão de usuário de compilação ação irá disparar efeito. Este efeito irá validar esse token que é armazenado em nosso armazenamento local para obter os dados do usuário do banco de dados se for válido para definir com os dados do usuário. Se não, vamos configurá-lo em null no caso de haver um erro na API ou no caso de haver um token não válido. Então, dessa forma, vamos criar duas ações que decidirão que a sessão do usuário constrói com sucesso ou não é. E o efeito vai chamar essas ações com base na validação do token. Ok, primeiro, vamos criar essas duas ações. E eu vou ter duas ações que já estão em julho. Então, podemos excluir este que é chamado init porque temos compilação sessão do usuário. E da mesma forma que estamos tendo uma grande ação. E também terá um nome. Por isso, posso substituir todo este texto aqui. Podemos dizer que os usuários constroem o sucesso da sessão do usuário, como a forma como temos aqui. E também podemos renomear este para que possamos, em vez de construir ou usuários permitidos, podemos dizer construir sucesso sessão de usuário e também construir sessão de usuário falhou. Então podemos ter aqui em vez de falhar. Então, desta forma, podemos ter a ação, ok, quais são as propriedades desta ação? Assim, as propriedades serão os dados que são carregados. Então, teremos os dados é autenticado através e os dados do usuário é, por exemplo, o próprio usuário, o objeto do usuário. Então, desta forma, eu vou ser suficiente de apenas carregar os dados do usuário. Assim, desta forma, podemos ter aqui adereços ou a propriedade que será chamado de usuário. E o tipo de que será modelo de usuário, que criamos antes. Portanto, não há necessidade de usar toda essa entidade de usuário aqui. E também em caso de falha, ele também terá a mesma coisa, como se tivesse a mesma corda. E também fará para mim alguma ação baseada nisso. Ele irá carregar um erro ou pode carregar, por exemplo, como alguma mensagem de que o token não é válido ou algo assim, seremos suficientes para criar a ação apenas sem adereços apenas por enquanto. Então agora eu vou ter duas, três ações. Um, construir sessão de usuário, que é este, ele será chamado e disparar o efeito. E o efeito será decidir qual é a ação certa a tomar quando seu sucesso, quando o token for válido e os dados do usuário estiverem prontos, ou se falhar e o redutor se comportará de maneira específica, garoto, com base nessas ações. Então aqui nós só temos que não esquecer que nós temos aqui a frase falhada para não ter confusões do nome ou nomeação de suas ações. Então agora podemos adicionar mais redutores. Então, desta forma, podemos ir aqui e dizer que, ok, na ação do usuário Construir estado de sessão, fazer algo. Você também pode fazer outro em. Temos aqui outra vírgula e dizemos sobre como os usuários ação também. E podemos selecionar o sucesso. Assim, o estado será, ou será atualizado com base no que ganhamos com essa ação ou com esse efeito. Então, dessa forma, teremos essa data. Ele será atualizado com um clone desta data. É muito importante, esta aqui, e esta linha é muito importante. Como se fôssemos atualizar o estado, não mudarmos o estado inteiro. Isso é chamado de imutável. Você tem que acompanhar todas as ações ou alterações de ordem em sua loja de estado. Então, como vou mostrar-lhe nas ferramentas de desenvolvimento mais tarde, quando criarmos um ferramentas de desenvolvimento, veremos como o estado está mudando passo a passo em cada chamada das ações. Então agora nós temos o estado e eu vou atualizar agora meus dados naquela loja de estado. Então, quando você define um objeto dessa maneira e você coloca vírgula aqui, e você adiciona os campos que vão ser atualizados dessa forma você está dizendo, ok, pegue o mesmo estado, mas atualize apenas dois campos, que são realmente esses, você pode atualizar apenas um campo, por exemplo, usuário e, em seguida, atualizar o usuário preenchido com os dados do usuário. Como eu posso obter os dados do usuário que são passados para esta sessão de usuário compilação sucesso. Quero dizer, esta, esta propriedade que virá do efeito como eu lhe disse. Então, dessa forma, você também pode adicionar um parâmetro aqui que é chamado de ação. E essa ação, terá os campos dessa ação. Então temos aqui neste caso usuário, para que o usuário seja usuário ponto de ação. E porque a sessão obteve sucesso, podemos atualizar também é autenticado para ser verdade. Então, dessa forma, teremos dois campos atualizados nesta loja de estado. Mas quando a ação falhou ou construir sessão do usuário falhou, então vamos fazer o usuário é nulo e ethos indicado é falso. Para que possamos fazer o mesmo. Ou vamos copiar esta parte aqui. Podemos dizer isso, colocamos vírgula e mudamos a ação. Então, aqui teremos a sessão do usuário construído falhou. E também a ação do Estado, mesmo assim. Nós só temos que atualizar o usuário para ser nulo porque ele falhou e que é autenticado será falso. Assim, desta forma, criamos as ações baseadas na validação do token e no impacto sobre os redutores. Mas nós não lidamos com esta parte ainda, como esta parte que é afeto e token válido. Ainda não trabalhamos com ele. Então agora nossa loja de estado é atualizada com base no comportamento dessas ações. Na próxima palestra, vamos lidar com o efeito onde será decidido tomar esta ação ou esta ação. 176. Criação de sessão de criação: Criando um efeito. É um simples e silencioso. Vem sempre com a ação. Então a ação vai disparar o efeito. E o efeito decidirá com base no que devido ao sucesso ou ao fato de que a estrutura criada de MDR X nos permitiu ter ações também nos permitem ter efeitos. Também os auxílios FES e também redutores e seletores. Falamos sobre os redutores, também ações e também falamos sobre a passagem, vamos passar para os usuários afeta pontos ds. Então, no efeito aqui, ele também está usando algo chamado Criar efeito. Criar efeito é uma função que está vindo de MDR x biblioteca. Então, por causa das mudanças que fizemos nas ações aqui, perdemos o init e as funções padrão que são criadas antes pelo console NX. Então vamos fazer uma limpeza aqui em cima. Então, como fizemos antes, vou começar do zero. Temos aqui efeito usuários, que é usado também no módulo de usuários. Então vamos apagar tudo isso. Agora vamos criar um efeito. Assim, a melhor fonte para ter como criar efeitos é uma documentação de n DRX. Então, como você vê aqui, nós temos a documentação interna, algo chamado NDR x efeitos. E está mostrando aqui um exemplo de como criar os efeitos. Há alguma explicação sobre modelo Angular e também como usar um serviço para o qual os filmes. E então aqui ele está pegando os filmes e , em seguida, escrevendo efeitos em sua seção de efeitos de escrita, você pode ver exemplo de criação desse efeito. Então exatamente como a documentação, eu vou ter um nome para o meu efeito. Então o nome do nosso efeito é construir sessão de usuário. E sempre os efeitos são sufixos com o cifrão, como você vê aqui. Então agora podemos criar nosso efeito usando o método de criação de efeito. O parâmetro de criar efeito será uma função que está observando sempre as ações estão indo no aplicativo. Então, por exemplo, eu vou ter aqui primeiro uma função de retorno de chamada, e esta função de retorno de chamada irá retornar para mim essas ações, o pipe. Então eu estou aqui observando as ações que estão sendo executadas no aplicativo. Este é o serviço que é fornecido pelo n DRX para observar as ações que estão indo no aplicativo. Então aqui no pipe, quando eu tenho a ação que é chamada Build user session, então eu vou fazer algo assim por diante que você precisa dizer do tipo, como quando essa função ou quando a ação tem um tipo de, por exemplo, a sessão do usuário de compilação, então vamos apenas escurecer e buscar os dados. Então, se você se lembrar, nós importamos a ação do usuário aqui. Então eu vou usá-lo, e eu vou dizer a ação do usuário ponto Construir sessão ou construir sessão de usuário desta forma, quando este é o tipo, então eu vou fazer algo com ele. Então você tipo de colocar uma vírgula aqui para adicionar outro pipe, que é mapa concat ou mapa de mesclagem. Este é um RTX para nós para ser capaz de mapear, que é vínculos de tudo isso observável para um novo tipo para uma nova ação. Então, dessa forma, você pode ter um mapa concat. E este mapa concat também com tem como parâmetro, uma função de retorno de chamada. E esta função de retorno de chamada, podemos fazer dentro dele o que vamos fazer para o token. Então, como o desenho, vou verificar se o token é válido ou não. Então, se você se lembra, criamos um serviço de armazenamento local, e este serviço de armazenamento local continha para mim tudo sobre o token de autenticação. Então, para isso, eu vou adicionar também outro método aqui com o serviço de armazenamento local, que será, é token válido. Então aqui podemos ter é uma conversa válida e função. E esta função irá validar para mim esse token, que agora está no armazenamento local. E então ele retornará falso ou verdadeiro com base na validação e tempo de expiração do token. Então a implementação deste método no armazenamento local, este serviço que vamos ter aqui primeiro causou token, e eu vou pegar o token deste ponto, obter token. É como se eu estivesse chamando esse método para obter o token do armazenamento local. E então eu vou verificar se há token ou se há realmente token como ele está definido, como nós temos token na loja de estado ou no armazenamento local, então nós vamos verificá-lo. Então precisamos decodificar. Se te lembras, estávamos a decodificar aquela ficha no guarda. Então aqui eu vou ter decodificar token e então eu vou ter que o guarda ou eu vou copiar o método que estava na guarda aqui. Se você se lembrar que estávamos analisando esse token para algumas partes e, em seguida, estamos recebendo a exploração ou também alguns campos como is admin e também o ID do usuário, se você lembrar. Então agora eu vou copiar esta parte e depois voltar para a função de armazenamento local. E então aqui teremos, e então fechamos o suporte. Agora temos o símbolo. Então agora precisamos obter o x por organizado no tempo e validar esse token. Se você se lembrar também, temos na velha guarda alguma maneira de validação, que foi token expirou e estávamos fazendo algum cálculo. Ele retornará para mim através de tudo falso se isso, como por exemplo, o token expirou. Então eu vou copiar o mesmo método que vamos fazer mais tarde, alguma refatoração. Então eu vou tê-lo aqui também. Será um método privado. E também, eu vou dizer que aqui, se o token não está expirado, em seguida, devolvido para mim através, porque aqui estou dizendo é token válido. Então, se é válido, então ele foi devolvido para mim através. Então aqui eu terei se não expirou, porque aqui token expirou, ele retornará para mim verdadeiro ou falso. Verdadeiro se expirar. Falso se não tiver expirado. E aqui eu quero não está expirado como é token válido, por isso não está expirado. Então também para fechar todas as lacunas desta função, então precisamos também adicionar mais. Então, quando não há nenhum token totalmente, em seguida, retornar para mim falso, como se você não tivesse um token válido. Então podemos ter aqui retorno false, ok, é válido token agora pode ser usado no efeito, como podemos usá-lo. Também podemos importar esse serviço. Então podemos dizer aqui serviço de armazenamento local. E então este serviço de armazenamento local, podemos chamá-lo de exatamente como temos. Aqui. Temos serviço de armazenamento local e nosso serviço de armazenamento local verificará se o token expirou ou não. Então eu vou ter aqui, se este ponto serviço de armazenamento local que é token válido, então eu vou fazer algo que é ação para succes. Senão eu vou fazer ou agarrar a ação de falhar como vimos em nosso diagrama. Então aqui eu tenho exatamente o ponto onde eu cheguei aqui. Então temos aqui, sim, vamos pegar a ação do sucesso e construir a sessão do usuário. Caso contrário, nós também temos que pegar a ação que está falhando ou não há token ou token expirado, e construir o estado vazio, que estará refletindo que temos conjunto vazio ou não há nenhum usuário conectado já para a nossa loja. Na próxima palestra, vamos construir ou ver como podemos fazer esses passos. Como eu mencionei antes. 177. Como chamar ação no Tokens on: Então, o comportamento aqui que quando é token inválido, vamos chamar essa ação. Então, dessa forma, eu vou fazer o mais fácil aqui. É mais difícil um pouco porque somos uma necessidade de pegar alguns dados do banco de dados usando nossas APIs. Então eu vou fazer primeiro a parte fácil. Então agora, no outro, quando o token não é válido, Vamos chamar uma ação. Chamando uma ação no efeito. Será no caminho como retorno off, como off será importado do RX JS. Ele vai voltar para mim e observável fora de alguma ação. Assim, desta forma, eu posso dizer as ações do usuário ponto e, em seguida, construir sessão do usuário falhar, mas você tem que chamá-lo como uma função. Então isso é o importante a notar, para não perder isso. Então aqui nós não chamamos isso como uma função porque é um tipo. Então, estamos pedindo o tipo dessa ação, mas aqui vamos executar essa ação. E esta ação não é executada como quando o token é inválido, então vamos ter em nosso redutor algum comportamento. E esse comportamento será definir o usuário como nulo e é autenticado como falso. Então, dessa forma, os componentes notarão que quem está observando essas variáveis ou esses campos, então eles saberão que o usuário é nulo e é autenticado é falso. Portanto, não mostre algo ou oculte algo do usuário global. Então agora a parte, se vamos ter aqui, como se houver token válido, então precisamos verificar ou pegar os dados do usuário e seguida, adicioná-los a outro redutor e chamar a ação, que é Sucessos de sessão, que terá os dados da ação, que será usuário e adicionar à variável do estado, armazenar o usuário e o objeto do usuário e é autenticado será verdadeiro. Então, de onde eu vou obter esses dados do usuário, os dados do usuário virá do serviço, o serviço que nós criamos antes, que é chamado de usuário Git. E precisamos disso, o ID do usuário. Então é por isso que no back-end, também armazenamos no token, o ID do usuário. Então temos a ração expirada, temos é admin ou não, e também temos o ID do usuário. Então, como eu sugiro, podemos criar também uma função que é chamada Obter ID do usuário a partir do token. Por que precisamos disso? Porque eu vou chamar no efeito o serviço do usuário. Então aqui também, nós também estamos na necessidade de obter o serviço de usuário. Terei aqui serviço privado e, em seguida, usuários. E este tipo de serviço de usuários aqui. Então temos aqui o serviço de usuário, então podemos usá-lo agora. Mas primeiro, depois disso. Então, este serviço de usuário ponto, dot get usuário está na necessidade de ID de usuário. Então aqui eu preciso definir um ID de usuário que é constante, e podemos chamá-lo de ID de usuário assim. E vamos chamar este ponto de serviço de armazenamento local. E então eu vou ter uma função que é bom, dizendo Obter ID de usuário do token, por exemplo. Desta forma, teremos o ID do usuário do token. Vamos fazer esta função. Então eu vou copiar esta parte para ter o mesmo nome, e então eu vou ter que dopamina aqui ou a função aqui. Será exatamente o mesmo. Vamos decodificar e fazer a mesma coisa. E não vamos obter a expiração, mas obteremos o ID do usuário, que foi armazenado com o token. Então exatamente o mesmo. Eu vou ter aqui token GetToken e, em seguida, eu vou verificar esse token. Vou decodificar. Primeiro de tudo, terei que retornar o ID do usuário do ponto de token. Assim, desta forma, podemos excluir esta parte. E eu vou dizer token decodificar e, em seguida, ID de usuário porque eu sei e eu tenho certeza de que há ID de usuário neste token depois de decodificar, senão, retornar para mim null. Então, quando não há nenhum token, em seguida, retornou para mim null. Então, dessa forma, vamos obter o ID do usuário do token para ser mais seguro, gostaria de não ter erros ou problemas no caso de não haver ID de usuário, então podemos ter também se aqui. Então eu posso adicionar aqui, se token decodificar, como eu tenho aqui algum token, mas por exemplo, não é possível dividi-lo. Então, desta forma, token decode, vamos ficar indefinidos. Então, dessa forma, eu posso ter se, OK, e o código, como se eu obter realmente um token decodificar, em seguida, retornado para mim, esse token decodificar esse ID de usuário. Senão, volte para mim também, nulo. Assim, desta forma, estamos cobrindo todas as possibilidades que podem acontecer em relação ao ID do usuário do token. Então aqui estou eu pegando o ID do usuário do Docker. Agora podemos usar esse ID de usuário dentro desse serviço. Mas também é melhor aqui porque temos a possibilidade de que ID de usuário pode ser nulo, então é melhor ter se aqui também. Então, se houver ID de usuário, então vamos retornar também, o retorno de dados de serviço e ação. Então, isto vai ser assim. Então terei de voltar. Eu quero voltar fora desta ação ou de ação de sucesso, mas eu preciso chamar o serviço. Assim, no serviço, quando eu chamo o serviço, eu posso adicionar também um pipe e mapeá-lo para outro tipo, que será um sucesso sessão de usuário build. Então, para explicar isso, eu posso ter aqui este serviço de usuário ponto que getUser e, em seguida, eu passar o ID de usuário que eu quero aqui. Então, ainda estamos dando erro, obtendo erro porque são os tipos não estão combinando juntos. Então precisamos gerenciar esse tipo para ser exatamente o mesmo dos tipos de ações. Porque criar efeito, espere por mim. Ações não, por exemplo, como observáveis de dados. Então, dessa forma, teremos aqui também tubulação. Então precisamos mapear esses dados para um novo tipo. Então o mapa deve vir de nossos x js como você vê aqui. Então aqui teremos um mapa. E então este mapa, nós obteríamos os dados do usuário a partir dele. E este mapeamento, ou vamos retornar como não por exemplo, os dados do usuário em si, mas ação, ação de sucesso. Então, podemos ter aqui retornar após a ação do usuário mapeamento e, em seguida, construir sessão do usuário succes. Mas esse sucesso de sessão de usuário precisa de um prompts e esses testes são usuários. Então, dessa forma, eu terei aqui, este prompts será o usuário. Então o usuário será os dados do usuário, que eu tenho aqui. Então, dessa forma, eu estou dizendo quando há um token válido, em seguida, encontrar para mim o ID de usuário desse token. E, em seguida, se seu ID de usuário é válido, em seguida, pegue para mim os dados do usuário do backend e, em seguida, altere os dados de retorno para ser como uma ação de construção seção de usuário ou sessão sucesso usando os dados do usuário. Então, desta forma, eu estou dizendo que fogo para mim esta ação. E indo para o redutor desta ação, vamos notar que eu estou entrando na ação da ação, os dados do usuário e colocá-los no campo do usuário, na loja de estado e também é autenticado. Eu estou fazendo isso como uma verdade. Então, dessa forma, eu criei o efeito. Mas agora estamos perdendo alguns pontos. Sempre disse que quando temos macacos, sempre cobrimos todas as possibilidades, certo? Se eu não ouvir ter token válido, em seguida, retornou para mim ação, ok, sessão falhou. Aqui, por exemplo, se houver um erro com a API. Então, quando estou pegando os dados do usuário do serviço do usuário e há um erro. Como podemos enviar, por exemplo, a sessão do usuário de compilação falhou. Aqui, você pode adicionar a vírgula após o mapeamento dentro do método pipe. Então, dessa forma, você pode dizer erro catch. E este erro catch terá para você um erro ou uma função de retorno de chamada onde você carrega virar exatamente o mesmo aqui. Assim, você também pode retornar de sessão cinto de ação usuários falhou. Então, isso será chamado quando houver uma falha na API e, em seguida, ele irá inicializar a decisão e é autenticado será falso. Mas também um ano temos um se, se não houver ID de usuário, também precisamos pegá-lo. Então, temos também para adicionar aqui mais para o ID do usuário. Então, se não houver nenhum token válido e então, se não houver nenhum ID de usuário e mais falhou, se houver ID de usuário, então faça o seu trabalho, pegue esses dados e campo para mim a loja de estado, como vemos aqui no redutor e como discutimos isso antes. Então agora nós terminamos também esta parte. Então, temos agora ação quando ela falha e também ação quando é sucesso. Nós carregamos os estados disse usando o redutor com os dados e os dados estão fora da loja, está sendo atualizado sempre com base em toda essa data. Agora precisamos de alguma forma ler todas essas variáveis em componentes. Por exemplo, vou lê-lo na página de check-out e preencher o formulário de dados de check-out e dizer que o formulário será preenchido automaticamente quando eu entrar na página de checkout. Por isso, não tenho de sentir os meus dados como o meu nome, e-mail, endereço, etc. 178. Observe campos de Observe usando selecionadores: Então agora vamos pegar um dado para nossos componentes. Então eu quero que meus componentes vejam os dados da loja estadual. Mas primeiro precisamos criar seletores. Os seletores são, na verdade, para pegar os dados do armazenamento de estado. Então, se você se lembrar que nossa estrutura é criada para nós, um seletor de usuário. E neste seletores de usuário, estamos recebendo um erro aqui porque é, nós mudamos os tipos, nós mudamos as ações. Então eu vou remover tudo daqui, que é criado automaticamente, e também remover todos os erros que são definidos na importação e começar do zero. Mas eu vou manter esta parte é olhar para cima o estado de recurso do usuário gerenciado por NGINX. Então aqui é como se eu estivesse recebendo o estado de usuário. Eu estou recebendo toda a loja aqui. Então, com esta loja, posso fazer algumas coisas. Então eu posso selecionar os dados do usuário e também o usuário autenticado ou é autenticado ou não. Então, aqui temos apenas um erro é um estado, precisamos substituí-lo pelo estado de usuários. Se você se lembrar, criamos estados de usuário no redutor. Então temos aqui estado de usuário importação de lá você faz redutor. Então esta constante está recebendo o estado do usuário está usando criar seletor de feição. Então, selecione para mim todo o estado do usuário usando a chave de recurso de usuários, que é chamado de usuários. Porque aqui, nossa aplicação, se criarmos outra biblioteca ou em outra loja estadual, por exemplo , seus produtos, precisamos diferenciar entre aqueles todos os estados portas que eu tenho aqui. Assim, a chave de recurso de usuários ou o nome de estado que é usado no módulo de usuários, que é este para o recurso é chamado para o recurso Eu chamo usuários recurso Qj é chamado usuários devem ser diferentes de biblioteca para biblioteca, ou de biblioteca, ou de recurso para recurso. Então aqui eu vou criar também um seletor. Eu sei que você não entende o que é um seletor, mas em breve você vai ver o uso dele e você vai entendê-lo. Então eu criaria aqui uma constante, vou chamá-lo de Get User. Então, da loja estadual, apenas me dê o campo de usuário. Então aqui eu vou chamar algo que é chamado cria um lector, e isso cria um vetor é de MDR x. e então eu vou usar getUser estado aqui. E então eu vou dizer a partir desse estado, que eu tenho aqui, então eu posso usá-lo para retornar alguns campos específicos dele. Então eu vou dizer aqui a partir desse estado, em seguida, retornou para mim, usuário ponto estado. Então o usuário ou o usuário preenchido dentro que estados porta onde será com dados ou será nulo com base na decisão aqui, então eu posso obter os dados do usuário exatamente a mesma coisa que podemos fazer também para autenticado. Assim, podemos criar outra constante que será também seletor. Então, podemos dizer get user é autenticado. Por exemplo, tudo é nosso para ser mais curto. Então cria um eleitor é nosso também estará recebendo do estado de usuário. E então usarei exatamente o mesmo aqui. Mas em vez de campo de usuário, vou usar é campo autenticado. Então aqui estou recebendo está autenticado. Ok, eu criei este elétron, tudo bem. Agora o que posso fazer com ele, como podemos usar esses seletores. Se você se lembra, eu disse que nós temos a fachada é para fazer e embelezar nosso código mais. Não teremos grandes chamadas nos componentes. Podemos ter apenas chamadas curtas quando eu quero chamar o usuário get ou quando eu quero ter os dados do usuário da loja de estado. Então vamos para a USAID. E aqui podemos criar algo que é chamado de observável, podemos dizer. E este observável será uma variável do usuário para analisado. E ele terá atual, por exemplo, podemos dar-lhe um usuário atual. Então este é um nome e seria observável como eu, eles vão fazer isso. Variáveis observáveis são sempre sufixos com cifrão. E aqui temos essa porta de pontos. E, em seguida, tomou tubo aqui como podemos chamar um seletor. Então, se você se lembra, aqui estamos chamando uma ação. Agora podemos chamar aqui um seletor. Então eu vou dizer que este ponto armazenou o tubo, e então eu vou dizer selecionar usuários, seletores, usuário selecionado, o que é isso? É aqui. É importar tudo para mim dos seletores de usuários. Tão importante para mim, tudo, o que é exportado aqui. Então exporta para mim isto, isto e isto. Então agora temos na faceta, exportar ou seleciona para mim seletor de usuário, que será, por exemplo, GetUser. E também vamos criar outra ou outra variável que será chamada é autenticada. E isso é autenticado, ele também será observável porque este tubo irá retornar para mim observável e selecionar para mim um dado específico da loja. Então eu diria aqui armazenar dot py pz também, e depois selecionar, e então seletores de usuário. E, em seguida, vou selecionar Git, o usuário está fora. Então, dessa forma, eu tenho aqui duas variáveis no usaid do usuário. Posso usá-los e canalizar dados da loja e observar os dados que são armazenados na loja de estado. Não precisamos desta importação para que possamos removê-la. Então, na próxima palestra, eu vou mostrar a vocês como nós também podemos chamar todos esses observáveis. Então, vamos passar para o nível de componente, por exemplo, no produto, e vamos chamar o serviço de usuário e chamar, por exemplo, este obter usuário atual. Então usuário atual, ele vai buscar os dados do usuário a partir do armazenamento de estado se ele é autenticado ou não. 179. Página de check-out de preenchimento de automático com base no usuário de registro: Ok, agora temos essas duas variáveis ou dois campos do estado armazenados que estão observando para mim o usuário atual, e se o usuário é autenticado ou não. Só quero mencionar de novo que fizemos essa parte. Então, carregando o aplicativo desde o início, assumimos que já temos um token de armazenamento local. Então nós bloqueamos antes de alguma forma e temos o token já em sua loja de estado e estamos verificando se é válido ou não. Nós não fizemos essa parte. E esta parte virá mais tarde após esta palestra ou esta soma de palestras depois de terminarmos completamente esta parte e observar ou preencher a página de checkout com base no usuário conectado e logado. Então agora temos essas variáveis. Podemos então usar usuários para Sayed diretamente em qualquer componente em nossa biblioteca, por exemplo, em pedidos. Ou podemos chamá-los ou chamar isso através dos serviços. Porque dissemos que as bibliotecas estão se comunicando entre si através dos serviços dessas bibliotecas. Então podemos ter aqui também algum serviço que podemos ser chamados observar, entrar em usuário. Então eu posso adicionar aqui um serviço bem, que seria observado, ou pode ter sua pequena letra observar o usuário atual. Então aqui temos um usuário atual. Assumimos que bloqueamos e temos o usuário atual. Assim, vou chamar isso de Sayed rápido, que é usuários de Sayed. Assim, com os usuários do Sayed, ele terá dois campos. Um deles é o usuário atual. Assim, desta forma, podemos devolver isto. Então este vai voltar para mim e observável. E estes observáveis conterão o usuário atual. E também podemos criar ou o usuário atual é autenticado? O usuário atual está autenticado? E desta forma, também podemos chamar ou retornar que observável, que seria estes, o usuário primeiros socorros embora, é autenticado. Então, dessa forma, podemos ir novamente para a nossa biblioteca de pedidos ou para a página de check-out ou página de componente de check-out. E temos aqui na página de checkout, podemos chamar o Serviço de Usuário. Já o chamámos. Então agora, com base nisso, podemos obter os dados de seu usuário atual e sentir que check-out formulário. Podemos adicionar aqui um método que pode ser este ponto auto Feel usuário. Isso. Assim, desta forma, podemos ter os dados do usuário já preenchidos no formulário quando fazemos um checkout. Então, eu quero dizer, aqui nesta página, quando eu vou aqui para o guarda e, em seguida, clique em Checkout, eu vou ter aqui meus dados com base no meu token depois que eu entrar. Porque se você se lembra, nós ativamos o logado aqui. Então, precisamos fazer login e, em seguida, teremos aqui esta página ou acesso a esta página. Então vamos aqui de novo e dizer “privado”. Definimos um método e chamamos de preenchimento automático de dados do usuário. E estes dados de usuário de preenchimento automático com ouro para mim, este ponto observar o usuário atual. Portanto, precisamos observar o estado atual do usuário. Podemos ver se ele está logado ou não. E então podemos obter também os dados do usuário. Não precisamos verificar aqui se o usuário está logado ou não porque esta página já está protegida pela rota, se você se lembra. Mas vamos falar sobre a observação de que o usuário está logado quando ouvimos a revisão do produto. Mas aqui já está protegido. Portanto, você não precisa verificar se o usuário está autenticado ou não. Você só precisa obter os dados do usuário ou do usuário atual. Portanto, observe os dados atuais do usuário. Eu vou subscrever. Podemos, em vez disso, ter este cachimbo e levar até e todas essas coisas. Você não pode adicionar também um tubo que é chamado tomar, e ele será tomar um. E você pode pegar apenas um valor da loja estadual. Como se você não tivesse que pegar o valor sempre, sempre, sempre, e observá-lo. Não, você só pega um e automaticamente sua assinatura, como conversamos antes, ele será concluído. Então, dessa forma, você não terá nenhum vazamento de memória. Então aqui eu tenho um cachimbo, pegue um, ok, assine, e então eu terei usuário. Então, aqui este usuário retornará para mim os dados do usuário. Então, se verificarmos aqui esse tipo, como você vê, ele será o tipo de usuário. Então também precisamos retornar, é uma função de retorno. E notaremos que esse parâmetro tem usuário, tipo de usuário. Eu salvo seu auto formatado. Eu abro esses colchetes novamente, e então nós vamos preencher o formulário. Então, como estávamos falhando no fórum antes, estávamos indo campo por campo. Então eu vou dizer aqui, este, o valor de conjunto de pontos de forma de checkout dot seti. Então, desta forma, eu vou ter aqui este embora, checkout forma ponto, por exemplo, nome. Será valor definido ponto, se você se lembrar. E, em seguida, vou definir o valor do nome do ponto do usuário. Então, nesse caso, teremos o nome de usuário automaticamente no checkout. Então vamos de novo e tentar isso. Então eu vou aqui de novo, confira. E notaremos que não conseguimos nada. Ok, vamos verificar o console por que não temos dados e tenho certeza que temos algum erro. Ok, legal. Já há algum erro aqui. Precisamos checar. Portanto, este erro dizendo que falhou ao carregar um recurso, o vínculo sem servidor com status para 01, não autorizado para o usuário obtendo API. Então estamos realmente recebendo o usuário, mas não estamos autorizados. Por quê? Porque se você se lembra, nós não fizemos nenhuma interceptação, nenhuma intercepção HTTP para nossa aplicação em uma loja de doces. Fizemos isso apenas para o administrador. Se você se lembrar, temos aqui no módulo de aplicação, nós fornecemos com algo chamado fornecer interceptor http, e então nós chamamos JWT interceptor e multi é verdadeiro. Assim, desta forma, podemos carregar cada solicitação HTTP com o nosso token. Dessa forma, o servidor nos autorizará a usar essa API. Então agora nós temos aqui no administrador, mas nós não temos no final você compra. Então eu vou aqui para o aplicativo, para o módulo e, em seguida, para seus provedores. E então eu usaria aqui que fornecem ponto de controle interceptor http para Auto Import. E também eu tenho aqui JWT interceptor do usuário Blue Bits, e então vamos tê-lo já aqui. Ok, vamos agora novamente para a nossa página inicial. E então vamos salvar de novo. Vamos remover este ponto de interrupção. E então nós vamos e vamos verificar. Vamos notar que temos agora o nome preenchido já nesse campo. Então, para continuar aqui, você também pode sentir todos esses dados baseados em dados do usuário ou bloqueado no usuário. Então agora eu vou ir novamente e eu vou preencher todo este conjunto de valor nome de usuário. Então, é melhor também aqui para verificar se temos usuário para evitar erros. Às vezes, não teremos um usuário se você se lembrar, e ele vai retornar para mim nulo porque a loja de estado disse que o usuário pode ser nulo. Assim, desta forma, podemos ter se aqui é melhor. Então, podemos dizer aqui este formulário do check-out. E então, e vamos passar por todos esses campos. Então eu irei rapidamente sobre eles. Claro, você pode senti-los sozinho também e terminar esta palestra preenchendo os dados do formulário. Então aqui eu sinto todos os dados adquiridos pelo usuário em sua página de checkout. Então, quando eu voltar aqui, como você vê, temos todas as informações. Então agora temos aqui em casa e eu vou para o caixa. Então vamos remover esta parte e, em seguida, vou clicar em Checkout. E eu vou ver que meus dados preencheram automaticamente todos os campos que eu tenho aqui. E também posso fazer um pedido. Mas ainda agora, se você se lembrar que fazer o pedido é baseado no ID de convidado do usuário, Mao, vamos ter o ID de usuário que está bloqueado. Então você vai fazer isso e fazer muitas refatoração nas próximas palestras. 180. Refatoração + Place com usuário atual: Ok, nesta palestra, vamos corrigir alguns bugs e também localizar um pedido baseado no usuário conectado. Então, primeiro de tudo, eu vou ter um inseto aqui, que é eu, como eu disse, é tomada uma. Então aqui temos o Q1 e quando você salvar a página e o aplicativo é recarregado nessa página de check-out, então você verá que não há dados. Isso ocorre porque quando você está tomando apenas um, talvez esse usuário seja nulo. E temos aqui, se o usuário é nulo, então não somos capazes de definir os valores do usuário para o formulário. Então, a melhor maneira quando você está se inscrevendo da loja de estado, sempre levar até que eles até o término da assinatura ou quando o componente foi destruído. Então, exatamente como fizemos anteriormente no curso, estamos criando um, uma variável que é chamado de assinaturas finais, ou podemos chamá-lo de cancelar assinatura. Então aqui eu vou ter um cancelamento de assinatura e isso vai ter um assunto de qualquer, e ele vai ter um novo assunto. Então podemos ter o tipo, desculpe, aqui temos um tipo e também será um novo assunto. Então, dessa forma, posso definir meu novo assunto e inicializá-lo, depois terminá-lo quando este componente foi destruído. Então aqui em Destruir, eu posso chamar isso de cancelar assinatura. Será como o próximo e depois completo. Então, quando o componente foi destruído, esta assinatura será feita. Então aqui vamos ter isso e depois conflito. E não se esqueça sempre quando você está usando NDI em destruir para implementar também o componente com destruir. Então teremos aqui nele e também OnDestroy como vimos antes. Então, agora temos que terminar esta assinatura do copo, levar até esta assinatura. Então, dessa forma, nossa assinatura funcionará. E quando eu atualizar a página, verei que meus dados ainda estão lá. Então aqui eu tenho um problema. Tenho de substituir isto por e-mail. E vamos ter todos os dados estão bem e vindo do banco de dados. Ok, agora vamos fazer outra refatoração, que é exatamente para colocar o pedido com base no ID do usuário, que está logado. Então, em vez desse ID de usuário, eu posso fazê-lo sem nada. Como podemos dizer, é só uma corda. E então podemos dizer, depois de obter o usuário, esse ID de usuário é o ID de ponto do usuário, que está vindo do banco de dados. Então, dessa forma, teremos o ID no caminho certo. E quando eu estiver fazendo o pedido, eu vou ver o pedido no backend com base no usuário conectado. Vamos executar o aplicativo Admin para ver se nossos pedidos estão realmente indo para o back-end para testar isso. Então, estou abrindo uma nova porta para abrir o aplicativo ao mesmo tempo. Então teremos a abertura do front-end e o painel de administração ou a loja e o painel de administração, ao mesmo tempo. Ok, ele está funcionando com sucesso. Podemos ir, por exemplo, para isso e dizemos anfitrião local. E colocamos a porta que eu especifiquei no NX ou no comentário. Então você terá aqui o aplicativo Admin em execução. Mas como você vê aqui, estamos recebendo o mesmo erro que tivemos quando estávamos criando a loja estadual. Então também precisamos inicializar o aplicativo Admin para sua loja de estado. Então, precisamos copiar ambos os módulos de armazenamento de linhas e também afetar módulo para executar o aplicativo Admin com sucesso sem qualquer problema. Então agora eu vou aqui e então eu vou pegar as importações. E na importação após o cliente HTTP, dizemos, ok, módulo armazenado, Auto Import e também afeta módulo será Auto Import e salvar e nosso aplicativo deve ser executado normalmente. Então agora temos a página de login sem qualquer problema, vou fazer login e, em seguida, clique em Enviar. E teremos a nossa obrigação ou o nosso back-end em execução. Irei às ordens. Eu tenho aqui, as ordens. Então, vamos tentar fazer um pedido na frente ou na loja. Então, um ano eu já fiz um pedido. Vou clicar em Fazer Pedido. Está bem. Meu pedido que adicionado com sucesso e eu tenho aqui botão para voltar para a loja. Vamos ao painel de administração e voltar aos pedidos. E veremos que as ordens ou a ordem que coloquei estão aqui. Então, e também vai com o meu nome porque eu bloqueei com o meu nome como um usuário. E veio com sucesso aqui. E eu também posso vê-lo e ver todos os detalhes sobre o pedido. Então eu gostaria de aconselhar você sempre verificar este gráfico ou este gráfico, como nós construímos todo o processo de armazenamento de estado para pegar dados da loja de estado e também usá-los em nossos componentes. 181. Gateway de pagamento do Stripe: Nesta seção, vamos adicionar o método de pagamento para o usuário depois que ele está fazendo check-out. Então, depois de fazer um check-out, me pedem e-mail e senha para entrar. E então, depois disso, quando eu check-out ou faço um pedido, eu devo ter um gateway de pagamento para que eu possa pagar e então eu posso fazer meu pedido e, em seguida, a loja vai lidar com ele e entregar o meu produto para mim. Então, nesta página quando eu estou clicando em fazer o pedido, eu não vou fazer o pedido diretamente. Eu vou ser redirecionado para alguma página de pagamento. Esta página de pagamento decidirá se faço o pedido ou não. Mas como podemos adicionar essa página. Nós não vamos criar um componente que é feito por Angular. Então, se você se lembra, estávamos criando um componente para a página e, em seguida, estamos adicionando alguns campos para o pagamento com cartão e, em seguida, estamos fazendo o pedido. - Não. Agora, desta forma, vamos adicionar algum gateway diferente que virá também com o formulário e tudo o que diz respeito à entrada dos dados do carrinho. Então, para isso, precisamos de um gateway de pagamento. E este gateway de pagamento, eu sugiro que você use algo chamado stripe. Stripe.com tem a capacidade de fornecer a você uma API onde você pode fazer um pedido e pagar por si mesmo ou para sua loja para pessoas que eles podem colocar ou aqueles em sua loja. E também terá a capacidade de que você acompanhar os pagamentos em não só em sua loja, mas também em algum painel que é criado por stripe. Então, antes de tudo, você precisa se registrar. Então eu tenho aqui como entrar, mas você precisa se registrar primeiro. Portanto, o registro é clicando aqui em inscrever-se como você vê aqui. E, em seguida, quando você clicar sobre ele, você terá algumas informações. Então você tem que preencher seu e-mail, nome completo, país e senha. E, claro, haverá mais informações sobre o que é seu negócio e como você está ciente como seu endereço e como você está localizando ou quais são os produtos de sua loja que você deseja alinhar o gateway de distribuição com sua loja. Claro que tudo isso, é informação simples. Você não tem que ter tanto tempo ao se registrar. É como e-mail, nome completo e algumas informações sobre sua empresa que você pode preenchê-los facilmente. Depois disso, você pode fazer login e você terá como algum painel. Claro, há também alguma autenticação. Você precisa fornecer seu número de telefone para que eles possam enviar algum código. É para mais segurança. Então eu tenho o código no meu telefone, então eu vou colocá-lo. E então eu estou começando a estar logado na minha conta. Então, depois disso, temos como o caminho para o painel. E no painel você pode saber como você está lidando com os pagamentos de sua loja. Então, por exemplo, eu tenho algum pagamento feito antes e eu tenho algum, por exemplo, pagamento que pode ser, por exemplo, ao vivo e pagamentos que podem ser com teste, com modo de teste, com o qual você vai trabalhar. Este, você só precisa ativar o modo de teste. Modo de teste, como você vê, Eu tenho aqui alguns pagamentos para que eu possa colocar, Há tanto quanto eu posso para implantar meu aplicativo ou desenvolver o meu aplicativo e trabalhar com a faixa. Portanto, certifique-se de que o modo de teste está ativado. E vamos continuar na próxima palestra como nos conectamos usando a API. E também vamos criar como, por exemplo, o Developer Tools, que é como para criar as chaves de API, como veremos mais tarde. Além disso, não se esqueça de ir para a documentação de stripe. Então você não pode escrever documentos de desenvolvedor Stripe. E na documentação você verá as informações sobre as quais vou falar nas próximas palestras. Vou anexar todos esses links nesta palestra. 182. Como instalar bacias necessárias: A documentação de listras suporta todas as linguagens de programação que precisamos para o nosso gateway de pagamento. Para começar com a documentação, podemos clicar em Get Started. E aqui temos várias operações para pagamentos. Um deles que vamos fazer é aceitar pagamentos online porque há também alguma facturação de subscrição e tratamento fiscal que não iremos cobrir neste curso. Precisamos apenas aceitar pagamento on-line ou um pagamento. Então, se você clicar em Aceitar pagamento on-line, você terá um exemplo completo de como implementar o pagamento ou aplicação. Para aqui temos HTML reagir, e Next JS como um front-end e também cair back-end. Todas as linguagens de programação incluem nó. Então o problema aqui é que não temos um exemplo para Angular. Então, se a linguagem de programação do front-end não estiver listada aqui, você pode clicar aqui, não codificar, obter ajuda de nossos parceiros. Então, quando você clicar sobre ele, você terá alguma recomendação de listra, que é chamado de faixa SGX. E você extrai é uma biblioteca. Podemos usá-lo com Angular para construir o gateway de pagamento no front-end. Então, como você vê aqui, se você digitar Angular e, em seguida, você vai ver esta faixa NC. É uma espécie de elogiado pelo site Stripe. Então podemos começar com esta faixa NC por começar aqui. E então ele iria nos levar para o repositório Git da faixa MDX. Mas para uma melhor visualização de documentação, você pode ver também o site de documentos. Portanto, há documentação para a faixa MDX, que eu também vou adicionar que o link com esta palestra. Então, quando clicamos em documentos e, em seguida, você verá esta introdução. Vamos ver como instalar a biblioteca e, em seguida, vamos usar os serviços desta biblioteca. Então vamos começar primeiro a instalar a biblioteca e a tribo gx e também a faixa, que é originalmente de stripe. Então eu vou copiar este código e então eu vou para o nosso projeto. Vamos abrir um novo terminal, o que eu já fiz. Então podemos ter aqui, note que está tudo de volta e podemos abrir um novo. Selecionamos uma festa e, em seguida, ele abrirá para nós um novo terminal. Claro, você pode usar qualquer terminal que você quiser. Mas para mim eu uso, por exemplo, zed como H ou Bash. Baseamos o comentário aqui. E se você notar que há sinal de dólar no início, você só precisa removê-lo. E então vamos instalar a biblioteca NC listra e a faixa JS. Então, quando você pressiona enter, ele será adicionado às bibliotecas ou ao backend JSON, onde temos instalar ou adicionar nossas bibliotecas para desenvolvimento. Então, se verificarmos aqui nossas dependências, veremos que temos duas bibliotecas. Um deles é listrado e o outro é faixa SGX. Portanto, há também uma documentação para esta biblioteca que podemos usar para construir nosso pagamento. Eu estou indo neste curso com o mais simples. Claro que há múltipla opção fim de semana fazer. Mas vou escolher o que é exatamente para a nossa loja. 183. Fluxo de pagamento de check-out: É melhor sempre explicar o fluxo, como vamos implementar o pagamento. Então, quando eu vou programar agora, você pode entender o que eu estou fazendo. Primeiro de tudo, como você vê neste diagrama, que o usuário vai clicar no botão, que é chamado Place Order tem, temos isso no front-end. E, em seguida, vamos criar algo chamado Criar sessão de check-out. E esta solicitação vai ser tratada no backend depois que estamos enviando os itens do pedido para o back-end. E com base nisso, isso vai calcular o preço total da ordem. E, em seguida, ele vai criar algo chamado ID de sessão. E esse ID de sessão vem da API sprite, que vamos usar no back-end. E depois de criarmos o ID da sessão, vamos redirecionar o usuário para uma página bem-sucedida, como uma página de agradecimento ou para uma página de falha. Como se não pudéssemos criar o ID da sessão porque, por exemplo, conexão com a Internet ou ele tem algum problema de rede. Mas agora estamos assumindo que vamos criar um sucesso ID de sessão. Então nós vamos enviar que eles direcionam informações para o usuário no front-end. E o aplicativo de front-end será lido diretamente para a página de pagamento. A página de pagamento seria fornecida por stripe. Ele terá alguma forma específica para que você possa colocar o número do seu cartão e, em seguida, alguns, outro detalhe que nós vamos ver. E usaremos alguns dados de cartão de teste, então não usaremos o pagamento real. Vamos usar algum guarda de mesa, como veremos mais tarde. E depois de lidar com o pagamento através da frente e depois de redirecionar para API ou para a página de pagamento da Stripe, vamos ter redirecionamento para atribuir página Q que criamos antes ou para uma página de falha. Então, quando lermos direcionado para a página de agradecimento, criaremos uma mensagem de sucesso e recriaremos o pedido com um status pendente. Mas quando ele é criado como ou se houver falha no pagamento, então vamos redirecionar o usuário para uma página com falha e vamos criar o pedido como um status com falha. Então precisamos manter o controle de cada ordem que é criada, se é o acesso ou se falhou. Assim, o cliente ou o usuário ou o proprietário do e-shop pode saber quais são os problemas podem acontecer em seu ego. 184. Criação de sessão do Checkout: Vamos implementar agora este diagrama com codificação. Então, em primeiro lugar, clicamos no titular do lugar, que já implementamos no front-end. E então vamos criar uma sessão de check-out. Mas a sessão de tick out exigiu alguma API, que é chamada Create check out session API. E nós vamos enviar os itens do pedido para essa API. Então, voltando para o aplicativo back-end que criamos antes com NodeJS, eu vou para a página Pedidos. E, em seguida, nos roteadores de pedidos, se você se lembrar, criamos várias APIs e uma delas, esta, que está ostentando e ordenando. Mas agora precisamos antes de postar e encomendar, precisamos pedir uma sessão de check-out. Então, para isso, precisamos ter um roteador também. E este roteador terá uma solicitação de postagem. E nós chamaríamos essa API como uma sessão de check-out ou criar sessão de check-out. Então, dessa forma, teremos a API pronta com uma solicitação e a resposta como sempre fizemos com nossas APIs. Então eu vou ter aqui pedido e, em seguida, uma resposta. E com base nisso, retornamos o retorno de chamada que vamos usar. Então, o Create Session check out, como você vê, nós dissemos que vamos enviar os itens do pedido. Então eu vou criar aqui uma constante chamá-lo itens de ordem. E estes itens do pedido, vamos recebê-los do corpo do ponto da solicitação. Então, dessa forma, seremos capazes de lidar com os itens do pedido e obter o ID do produto e construir nossa sessão. Há exemplo na documentação, como estamos crescendo para criar um pagamento para isso, precisamos instalar primeiro uma biblioteca que é chamado Stripe. E vamos usar esse esforço para criar nosso token de sessão. Então vou abrir aqui um novo terminal. Vou instalar o Stripe. Então eu vou ter NPM instalar stripe. É isso. Então isto está seco. Nós vamos usá-lo em nossa API aqui para gerar a sessão. Então eu vou definir aqui uma constante que é chamado Stripe. E esta unidade, vai exigir a faixa que temos instalado antes. Então você tem que se certificar de que você tem stripe instalar em suas bibliotecas, como você vê aqui, nós já temos isso. E para isso, precisamos fornecer a chave, chave de teste que criamos antes. Mostrei como conseguimos a chave. Mas eu, de novo, posso mostrá-lo para você. Então, vamos novamente ao nosso painel, como estávamos criando nossos pagamentos e como criamos uma conta Stripe. Se você for para desenvolvedores, você terá aqui algo chamado chaves de API. E isso aqui você terá chave publicável onde você pode usar para, por exemplo, usar ou criar um pagamento em seu aplicativo. No nosso caso, ao criar a API, não precisamos da chave publicável, mas precisamos dessa chave secreta. Então você tem que fazer uma revelação secreta e depois copiá-la. E você tem que se certificar de que você está no modo de teste. E novamente, você vai para o código e depois exigem stripe, você faz outra chamada que irá segurar a própria chave. Então temos aqui nossa chave de teste. Tente usar sua própria chave para não tentar usar a mesma. Assim, você pode ter resultados em sua conta. Então eu tenho aqui a conta Stripe, eu tenho aqui a chave. E então eu vou criar a sessão. Como podemos criar a sessão. Então, se você se lembra, nós criamos a ordem. Então agora podemos usar uma biblioteca listrada para criar nossa sessão. Então vou definir aqui uma constante em nossa API. Vou chamá-lo como sessão. E esta sessão terá uma função de peso como nós estamos indo para esperar até obter alguma resposta de Stripe ponto check out. Exatamente assim. Chama-se esforçar-se para verificar. E então você tem que dizer sessões com S. E então você tem que dizer Criar. E com este Create, é um método onde você pode passar um objeto e este objeto terá alguns parâmetros específicos. Então, primeiro temos que definir que temos algo chamado tipos de método de pagamento. E então temos que dizer que tipos de pagamento. Agora vamos usar o guarda como MasterCard ou cartão Visa. Novamente, precisamos ter os itens de linha, mas os itens de linha devem ser formatados de uma maneira específica. Podemos dizer como podemos definir nossos próprios itens de linha. Então podemos definir aqui, podemos dizer itens de linha de custo. E como veremos mais tarde, mostrarei como vamos defini-lo. Então eu usaria aqui itens de linha, matriz. Precisamos passar adicionar solda alguma opção que é chamado de modo. E o modo é pagamento. Então podemos dizer para criar uma sessão de pagamento. E então temos algo chamado URL de sucesso. Então, por que temos esse URL de sucesso? Explicarei isso mais tarde. Mas por enquanto, podemos colocar o URL localhost e, em seguida, 4200. A porta 4200 é usada em nossa aplicação angular no front-end. Então, se você tem uma porta diferente, então você tem que usá-la. Mas para mim, eu vou usar o 4200 para a minha aplicação front-end como você vê aqui. Então, após o pagamento, vou começar a ler direcionado para o aplicativo novamente, que é, por exemplo, passar, eu digo sucesso, que é a nossa página de agradecimento, se você se lembra. E então temos algo chamado cancelar URL. E com este URL de cancelamento, você poderá redirecionar o usuário para uma página de falha se ele não puder pagar. Então podemos ter em vez disso, podemos ter como alguma página, podemos chamá-lo, por exemplo, erro. Então, podemos criar esta página no front-end. E depois disso temos a sessão aqui. Nós vamos enviar de volta para o usuário, para o front-end, como vimos em nosso diagrama, que eu vou enviar o ID da sessão e ler NFO direto. Assim, desta forma, eu tenho que enviar de volta para o ID da sessão front-end para que eu possa redirecionar Para sessão ou página de pagamento ou a página onde eu vou colocar os dados do meu cartão. Então eu diria aqui, Vamos laços que JSON e, em seguida, vamos colocar como ID. Podemos colocar sessão, que temos aqui, ponto ID. Então, dessa forma, porque esta sessão ou esta sessão de check-out iria retornar para mim como asiático e ele tem um membro que é chamado ID. Posso obter o ID da sessão. Agora ainda temos um problema, que são os itens de linha. Agora, os itens de linha devem ser mapeados de uma maneira específica. Então, se vamos para a documentação de Stripe e ver, por exemplo, aceitar um exemplo de pagamento que é listrado documentação. Vamos ver no Node.JS, há como algum exemplo que podemos usar. E este exemplo, como você se lembra, colocamos tipos de método de pagamento e há itens de linha. Itens de linha é matriz, que tem uma matriz específica de objetos. E este objeto tem dados do Bryce, moeda e dados do produto, etc. Então colocamos toda essa informação, mas não criamos essa. Então, para isso, precisamos construir essa matriz desse objeto onde ele tem dados de preço, moeda, dados do produto e, em seguida, quantidade unitária. Se você se lembrar, temos um item de linha ou item de pedido que tem apenas ID do produto, e então temos também a quantidade. Então, dessa forma, precisamos criar também este objeto dessa forma, é algo como mapeamento. Mais uma vez, vamos ler mapa, o outro item para ter esta forma. Então exatamente como fizemos antes com a postagem e mais velhos, se você se lembrar, lemos os itens do pedido, nós repetimos sobre eles. Então temos o detalhe do produto depois disso para obter o preço de cada produto e o nome dele, e então para calcular o preço total. Mas aqui vamos fazê-lo novamente, mas na frente, como por exemplo, de maneira diferente. Então, primeiro de tudo, eu vou verificar se eu realmente estou recebendo um pedido itens do front-end. Então, se não há itens de ordem da frente e, em seguida, enviado diretamente e erro, Eu vou dizer aqui retornar uma resposta e, em seguida, status podemos dizer, e será 400. E então enviamos como um erro, por exemplo, para o usuário. sessão de check-out não pode ser criada, verifique os itens do pedido. Então, podemos, desta forma, ter alguma mensagem de erro no console para nós. Depois disso, vamos verificar se há realmente itens de ordem. Vamos fazer um loop sobre eles e mapear itens de linha com base no que vimos na documentação. Então, exatamente como fizemos antes com os itens do pedido que estávamos criando como ou fazendo loop sobre eles para obter detalhes do produto, porque precisamos dos detalhes do produto como o nome. E também temos a quantidade unitária, que é o preço. Então, dessa forma, precisamos ter um detalhe do produto. E para isso, se você se lembrar, estávamos fazendo loop, mas criando uma promessa, todos nós teremos uma variedade de produtos ou itens de linha que são passados através do ID do pedido ou os itens do pedido. Então eu vou aqui e, em seguida, novamente loop para encomendar item. Então vamos dizer u, que itens de linha terá, prometa que tudo novamente, se você se lembrar, Eu expliquei todos esses passos. Então, prometa que tudo tratado para mim os itens do pedido onde eu posso devolver vários itens do pedido ou vários produtos por looping em itens do pedido. Então ele sempre diz, ou seu item ponto mapa. E então vamos retornar ou realmente moldar esta matriz. Que tem apenas ID do produto e a quantidade para outra forma que terá a forma que é definida em nossa matriz ou na documentação de Stripe. Então, no final, teremos retorno desse objeto como uma matriz. Então, primeiro de tudo, precisamos ter mapa. E se você se lembrar, porque estamos recebendo os dados de nossos produtos do banco de dados, precisamos colocar assíncrono, então precisamos esperar às vezes para que cada produto venha e então podemos continuar nosso loop ou nosso mapeamento se eu tiver vários itens do pedido. Então, depois disso, temos a folha de itens do pedido aqui deve ser encomendado item como um, porque eu estou looping agora um por um. E vou definir aqui um produto. E este produto terá, irá manter os dados do detalhe do produto onde vamos obter os itens do pedido. Então causou o produto longe. E então usaremos o modelo do produto se você o tiver, como se você o importasse. Portanto, o modelo do produto deve ser usado. Como você vê aqui, não temos modelo de produto, precisamos importá-lo. Então, após os itens do pedido, eu vou ter aqui como custo, importação para mim, modelo do produto. E então vamos dizer exigir dos modelos onde definimos nosso modelo de produto, se você se lembrar antes na sessão de backend. Então, agora podemos usar o modelo do produto. Então eu vou dizer aqui ponto produto, e então vamos dizer encontrar por ID porque nós estamos indo para obter o pedido ou o produto por ID. E, em seguida, aqui, o ID que é passado está vindo do front-end ou outros itens, ponto ID ou ponto produto. Se você se lembrar, mapeamos o front-end para dizer que os outros itens contêm o produto e também a quantidade que o produto irá reter, o ID do produto. Ok, O objetivo do mapeamento agora para remodelar a matriz de itens de ordem para outra forma que vamos chamar itens de linha. Então aqui eu terei um retorno. Então eu vou voltar e em forma de U, que será este exatamente. Então podemos copiá-lo e ir novamente para o nosso código. E dizemos retorno para mim objeto, que é chamado de dados de preço. Moeda é dólar e dados do produto. O nome não será a camisa, mas será o ID do produto ou o nome do produto. Se você se lembra, nós estávamos chamando o produto e ele tem campo chamado nome. E também, o valor unitário aqui é de 2 mil ou é calculado pelo sentido. Então você precisa ter também esse senso, surpresa. Então podemos ter aqui preço ponto do produto e multiplicado por 100 porque cada $1 é $0.100. E a quantidade nesse caso será a quantidade que vem pelo item do pedido. Então eu vou ter aqui pedido item, item, não itens e aqui também item ou itens para evitar o problema. Então aqui teremos algo chamado quantidade. Então, depois disso, podemos passar itens de linha leis, bem como para esses itens de linha porque agora temos uma nova forma dessa matriz. Mas aqui você tem que se lembrar sempre, Eu fiz isso por arcos comprados para não esquecer, esperar, porque esperar aqui estamos retornando uma promessa. Por isso, temos de esperar até que todo este acabamento e vamos obter os itens de linha porque aqui temos um produto que está vindo do banco de dados e tem um peso também. Então vamos voltar ao nosso terminal para ver se temos alguns problemas. Como vê aqui, temos um problema. Diz inválido, intializer de propriedade de cabeça curta. Então temos aqui algum problema com o nome. Então nós precisamos ter aqui não iguais, mas dois pontos, então, dessa forma, ok, Nós não temos nenhum problema e a conexão do banco de dados está pronta. E agora podemos chamar essa API, que é chamada cria uma sessão de check-out para obter a sessão de check-out do back-end. 185. Criação de sessão de check-out Frontend: Vamos voltar agora para a frente e para a frente onde estamos lidando com nossas ordens. Então, vamos fazer um pedido e ser redirecionado para um pagamento pago, como explicamos no diagrama antes. Então, primeiro de tudo, precisamos criar um serviço que está solicitando o token de sessão de check-out. Então, para isso, nós não vamos fazer um pedido quando eu clicar em Fazer pedido. Mas eu vou chamar um serviço onde ele vai me devolver o ID da sessão para que eu possa realmente direcionar o usuário para o pagamento primeiro. E, em seguida, com base no pagamento, se for sucesso ou não, eu criei o pedido com base no status se ele está dobrando ou falhou. Então, primeiro de tudo, se formos novamente para nossas bibliotecas, nós tínhamos criado uma ordem é biblioteca. E na biblioteca de encomendas temos um serviço e temos serviço especial para cartões e temos também para as encomendas. Então, no serviço de pedido, eu vou criar um serviço onde ele também vai ler me direcionar para a página de pagamento depois de obter o ID da sessão. Faça isso, podemos fazer um Criar. Por exemplo, podemos dar um novo nome de método. Podemos chamá-lo de um check-out criando uma sessão. E dessa forma, a sessão de check-out solicitará itens de pedido. Itens de ordem, porque precisamos enviá-los para o backend, como vimos antes para calcular que todo o preço e também o detalhe do pavimento. Então nós temos aqui ou a matriz de itens, ele seria enviado para o serviço, e então ele irá retornar uma solicitação HTTP, exatamente como fizemos antes com os outros serviços, como você vê aqui no topo. E o pedido será pós pedido. Então vamos postar um pedido de dados. E onde temos o mesmo URL que temos baseado antes dos pedidos. E, em seguida, algum caminho que temos especificado anteriormente, como criar sessão de check-out da API. Então temos aqui criar sessão de check-out. Esta é a nossa API, como definimos na parte de trás e antes. E os dados de envio com a solicitação de post serão os itens de ordem que passamos na função. Então podemos ter aqui ou os itens que estamos analisando aqui. Então vamos salvar e ver se esta seta é, está realmente criando para mim ID de sessão e não temos nenhum problema no back-end. Vamos tentar testar isso. Vou primeiro ver se temos alguns erros. Às vezes você tem como o modelo do item do pedido ser importado como um caminho relativo. Mas, ou por exemplo, o caminho mais antigo, como vimos com qualquer x. Mas é melhor se estivermos na mesma biblioteca para usar um caminho relativo é. Então eu uso aqui, eu vou mudá-lo para ser como este modelo e item de pedido. Como se eu estivesse atingindo o item de pedido de arquivo usado o barramento relativo. Agora eu quero, quando eu clicar no botão Fazer pedido, Eu vou obter um ID de sessão. Podemos usá-lo como para colocá-lo no registro do console por enquanto. Por isso, será o trabalho na página de check-out, componente de página de check-out onde estou criando ou fazendo o pedido. Então colocar a função de ordem, que será executado quando eu estou clicando nesse botão como vimos antes, que como nós criamos. Então agora eu vou ter feito o pedido. E, em seguida, colocar o pedido não será criar um pedido, mas ele chamará o serviço, que é Criar sessão de check-out. Então, em vez disso, podemos comentar isso por enquanto. Só por agora, e depois voltamos a ele quando precisarmos. Então eu diria ano este serviço de ordem e, em seguida, eu seria criado fora sessão e vamos passar os itens de ordem. Então, podemos dizer aqui, este os itens do pedido porque nós os coletamos do armazenamento local como você vê aqui antes. Então agora, depois disso, eu estou criando o armazenamento local ou a, desculpe, a sessão de brincadeira ou chamando esse serviço. Vou conseguir uma sessão e podemos imprimi-la no diário. Então eu vou dizer aqui, log console diretamente e nós iria verificar ou imprimir esta sessão. Então vamos salvar isso e ir novamente para o nosso aplicativo. E então abriremos o console. Então agora vou tentar fazer um pedido. Então vamos dizer OK, fazer pedido. Não estou captando nada no console. Então, vamos verificar a guia Rede onde estamos enviando solicitações do nosso aplicativo. Então, como você vê aqui, há um pedido de envio, mas ele não tem conteúdo. Então ele voltou sem qualquer conteúdo. Então isso é certo. Temos, por exemplo, que no back-end, algum erro. Vamos verificar novamente o nosso código de back-end. Então eu vou aqui e checar o back-end. Vamos ver esse console do backend que temos um erro, como eu disse, ele diz que um ano que recebem parâmetro desconhecido cancelar URL. Então eu tenho aqui um erro de digitação. É por isso que eu quero que você sempre tenha certeza de ter os erros de digitação, certo? Portanto, não terá nenhum erro de digitação em seu código. Então aqui eu tenho que colocar, não cancelar assim. Eu tenho que colocar assim. Nós salvamos de novo. Verificamos se a nossa aplicação está em execução. Então está reiniciando devido a mudanças. ligação à base de dados está pronta. Então agora vou tentar fazer um pedido novamente. Então, vamos atualizar e, em seguida, remover todo o console. E novamente coloque a guia Console e, em seguida, colocá-la. Ok, temos um pedido e se verificarmos a pré-visualização, bom, eu tenho a identificação da sessão. Então, como você vê aqui, eu recebo um ID, que é um ID de sessão que eu enviei do backend. E agora temos o ID da sessão. Agora precisamos redirecionar o usuário para a página de pagamento. Para fazer isso, temos várias maneiras de fazê-lo. Primeiro, precisamos usar um serviço de distribuição, algo chamado serviço Stripe. Então, primeiro de tudo, precisamos ir para o construtor aqui e importar o serviço de listras da Stripe. Então eu vou dizer aqui serviço privado de listras. E então será chamado de serviço Stripe. E este serviço de listras será importado de nx seco. Porque se você se lembrar, temos instalado biblioteca nx stripe. Então eu vou usá-lo aqui. Então eu vou dizer Import e, em seguida, Stripe serviço, exatamente como eu tê-lo aqui digitado. E então a partir de nós chamaríamos de biblioteca, que é chamado de faixa SGX, que nós instalamos antes. Ok, agora nós somos capazes de usar o serviço de listras, ok, Então depois que eu estou recebendo a sessão ou o ID da sessão, então eu posso usar esse token ou aquele ID da sessão para redirecionar o usuário para a página de pagamento. Então, simplesmente, eu tenho que fazer aqui este serviço de listras e, em seguida, ler diretamente para check-out. Então eu tenho que usar um ID de sessão de objeto, como este é ID de sessão. Já está definido como você viu aqui. E este ID de sessão virá desta sessão que eu criei. E eu tenho dentro dele uma identificação, porque se você se lembra, nós temos um objeto e dentro dele ID. Então eu tenho exatamente da mesma maneira. ID do ponto da sessão. Se você receber um erro aqui, isso é por causa dos Taipings. Então, é melhor sempre refinar ou definir seus digitação com base no que o serviço você está usando? Por exemplo, criar página de checkout, se você se lembrar, nós o usamos para retornar alguns dados. E esses dados podemos dizer que ele vai retornar para mim digite qualquer. Então eu posso dizer aqui, o pedido de post terá uma sessão e esta sessão terá tipo qualquer. Então nós podemos colocá-lo bem, como observável aqui porque ele vai voltar para mim observável do tipo qualquer. Então, dessa forma, eu não vou ter esse erro onde ele não está retornando porque esta sessão é desconhecida para mim. Ou você pode digitar. Então você pode dizer que eu preciso ter como o tipo de retorno será ID, que terá string de tipo. Então, dessa forma, se você voltar aqui, você verá que o erro é este apareceu e você tem um definido porque você tem o ID já definido. E também aqui você precisa corrigir algum problema, que é o tipo esperado, que é retornado pela solicitação. Então eu vou dizer ano, o tipo de retorno será objeto, que tem ID e a string, porque aqui eu tenho ID e uma string. Então aqueles scripts de digitação, eles estão em ou como, por exemplo, truques, você tem que fazê-los usando TypeScript. Então você tem que ter certeza sempre que você tem uma digitação válida. Você não tem erros ou erros de digitação entre as funções e os serviços. Então, depois disso, precisamos assinar este redirecionamento para check-out. Então eu tenho que dizer aqui, assine também, e então eu preciso encontrar UC como você vê. Ele está retornando para mim erro stripe, este erro. Eu vou assiná-lo e verificar se eu recebo um erro quando o usuário não é capaz de pagar ou se o usuário não é capaz de acessar a página de pagamento devido, por exemplo, a rede ou conexão, erro de conexão com a internet. Mas, como você vê aqui, é muito ruim ter Assinar dentro de assinar, como inscrição de aninhamento em geral. Nosso x js e também em Angular é muito mau comportamento, assim por diante que podemos fazer outra maneira que podemos chamar esses serviços depois de retornar um tipo específico desta sessão de check-out criar, como nós alteramos a saída desta sessão e então podemos usá-lo novamente de uma maneira diferente. Então eu estou indo aqui para o serviço de pedidos. Eu estou indo bem para ter tudo isso de volta. Eu tenho solicitação de post HTTP. Vamos remover esta digitação por enquanto que se transformou em picos de morrer. Não precisamos deles. Como eu expliquei a você, precisamos diretamente ir e mudar o tipo de retorno a partir deste post. Você sabe, ele está devolvendo para mim a sessão e dentro dela ID. Mas agora quero fazer algo antes de assinar, como podemos fazer isso. Então, se você sabe que há algo chamado pipe, e este pipe é como um pipe onde você está mudando os dados de retorno de um observável ou de um serviço. Então, por exemplo, retornamos aqui uma sessão e sessão.Get IID. Mas não, eu quero fazer outra coisa antes de retornar este ID de sessão, é claro, usando esse ID de sessão. Então eu vou aqui e cachimbo. Eu diria, ok, mudar para mim o valor de retorno de alguma forma ou antes de uma usinagem para o usuário ou para o assinante, alterá-lo e, em seguida, enviá-lo para o assinante. Então eu diria aqui algo chamado um mapa de troca. E este mapa de comutação, significa que eu vou mudar isso, que como ele é parecido, que retornam a outra forma. É exatamente como o mapa. Estamos fazendo com a matriz, como se estivéssemos tendo uma matriz. Mapeamos sobre ele para alterar esse array de alguma forma para outras entradas de dados para alterar a forma dele. Então este mapa de comutação é importado de nossos x js. Então você tem que se certificar de que você tem este mapa de comutação importado do nosso x j como operadores, como você vê aqui. Então agora vou mudar isso. Como a saída da assinatura, como se eu tivesse o ID da sessão. Então eu estou esperando para obter o ID da sessão aqui. Então eu vou ter aqui sessão. E o tipo dessa sessão. É exatamente o mesmo tipo que definimos antes. Portanto, não observável, mas terá o ID do tipo e uma string. Então precisamos remover isso. E então diga aqui que eu tenho esta sessão. Ele irá conter id que tem string de tipo. Então esta será uma função de retorno de chamada está mudando a emissão de que observável ou a partir dessa assinatura. Então, para isso, teremos novamente um retorno, como retorno para esta função, outra forma da sessão. Então vamos ter aqui devolver este serviço de faixa de pontos. Então, aqui vamos chamar o serviço stripe não no componente. Então eu vou remover tudo isso e vamos chamá-lo ou usá-lo aqui. Então, no serviço, então não vamos usá-lo no próprio componente. Então vamos copiar ou obter esta parte e ir para o construtor do serviço. E eu vou dizer aqui que, ok, eu preciso chamar o serviço de stripe. E também você pode usar a importação automática diretamente pressionando ponto de controle e você terá nx listra importante. E agora vamos dizer que este serviço de faixa ponto e, em seguida, ler diretamente para check-out usando o ID de sessão que é retornado a partir do pipe. Então eu vou dizer aqui, direto para check-out, e então eu vou abrir um objeto e me dizer que ID de sessão é sessão que é retornado ID ponto. Por que eu estou recebendo aqui ponto ID porque eu definir o tipo esperado retornando desse serviço, que é criado fora sessão. Então eu tenho aqui o tipo esperado aqui. Então, se você verificar este método, ele está retornando observável de erro. Então, dessa forma, não estou retornando o ID da sessão, estou retornando e alterando o comportamento deste pedido de post para outro observável. Então aqui eu vou ter observável de erro. Então, como você vê, ele é automaticamente alterado. Ele tem o tipo de retorno erro observável, erro de faixa. Então agora eu sou capaz de usar esse método. E aqui automaticamente ele irá me redirecionar para uma página de check-out usando o ID da sessão, que é retornado do back-end. Então agora eu vou aqui e eu vou dizer diretamente se inscrever para este serviço criar página de check-out. E esta assinatura retornará para mim apenas erro. Então eu vou usar isso apenas para saber se o usuário tem um problema com a conexão ou não. Então eu vou dizer aqui, se. Há algum erro. Em seguida, podemos dizer como erro de log console no redirecionamento para o pagamento. Assim, assim, podemos fazê-lo dessa maneira. E aqui temos alguns problemas, então só precisamos remover todos eles. Então temos agora, certo? Então serviço criar sessão de check-out. Eu subscrevi e, em seguida, eu vou ser redirecionado para essa página. E aqui no serviço, já está feito dessa maneira. Ok, agora vamos tentar isso e ver se nosso serviço está funcionando bem e temos um redirecionamento. Então eu vou novamente para o carrinho e então eu vou ver que eu tenho algum erro. Aqui diz que o serviço de unidade de serviço de ordem, nenhum provedor para o serviço Stripe. Então precisamos fornecer o serviço de distribuição. Mas antes disso, temos que dizer algo em configuração para esse serviço. Porque se vamos para a documentação da faixa MDX e ver algum passo que é chamado de instalação. Há algo ao lado que é chamado de aplicação de configuração. E sente-se aplicativo requer que você importe NGINX stripe módulo 4 raiz e você colocar a chave publicável, então não a chave secreta de Stripe, mas você tem que colocar a chave publicável. Então precisamos importar essa parte. Então precisamos ter módulo de distribuição NX importado. Então, onde no nível de aplicação. Então eu tenho aqui e você compra, Eu vou para o módulo de aplicativo. E, em seguida, aqui nas importações do módulo, eu vou importar o meu módulo que é chamado MDX stripe módulo de NC stripe. E então eu vou usar o módulo de distribuição MDX e dizer para root. E na rota quatro, você é solicitado a ter uma chave publicável. Dessa forma, você precisa usar a chave publicável de seus dados. Então, como você vê aqui, temos chave publicável e chave secreta. Então eu vou clicar sobre isso para ser copiado, e então eu vou colocar minha chave publicável como uma string aqui. Então vamos salvar e, em seguida, ver nosso aplicativo se ele ainda tem o erro. Então eu vou novamente para o guarda. Como você vê, não estamos mais tendo o erro porque módulo de distribuição MDX já forneceu o serviço para nós, então não precisamos fornecê-lo manualmente. Isso significa que podemos usar esse ou aquele serviço, que é chamado de serviço Stripe e diretamente em qualquer módulo em nossa aplicação. Então agora eu vou clicar no check-out e depois fazer o pedido. E você verá que temos três direcionado para outra página que terá o pagamento. E como você vê aqui, eu tenho os preços que são devolvidos a partir dos itens que eu construí antes, se você lembrar no back-end porque eu enviar os itens de ordem para o backend. E dessa forma, poderei colocar os dados do meu cartão e fazer um pagamento. Vamos tentar isso. Então, aceitando um pagamento, você precisa usar alguns dados de teste. Então, na documentação de Stripe, que é um pagamento e há um exemplo que eu mostrei você chamado aceita um pagamento. E aqui há um guarda onde nosso falso como você pode usá-los e então você pode fazer um pagamento. Então, por exemplo, eu vou usar este aqui. Então vamos de novo à loja. Eu colocaria meu e-mail aqui e também vou colocar como o número do cartão ou você pode colocar qualquer data aqui. Então vou colocar aqui cinco, vinte e um, vinte e um, digamos 25, e algum número e também nome. Podemos apenas colocar qualquer nome e, em seguida, arrastar País do pagamento e, em seguida, você pode pagar. E depois disso, se você notar que após o pagamento bem-sucedido, você será redirecionado para uma página bem-sucedida. Mas se formos para o nosso aplicativo de administração, não temos nenhum pedido feito. Portanto, não podemos rastrear os pedidos onde os colocamos a partir do backend porque, se você se lembrar, cancelamos a colocação do serviço de pedido aqui. Na próxima palestra, veremos como vamos fazer o pedido. Temos o pagamento bem-sucedido e enviá-lo para o back-end e salvá-lo no banco de dados. Mas depois, antes disso, desculpe, eu preciso mostrar a você como você pode ver os pagamentos diretamente em seu painel em stripe. Então, como você vê aqui, Eu tenho aqui um pagamento que eu fiz usando esta chave de descrição e também este e-mail. E você também pode clicar nele e ver mais detalhes sobre qual local e também quais são os itens desse produto e tudo o que é passado para o back-end, como nós o criamos com sucesso. 186. Ordem com ording após o pagamento bem-sucedido: Então, na palestra anterior, vimos que éramos capazes de lidar com o pagamento e também colocar nossos dados de cartão e pressionar Bay. E então temos três direcionado para uma página de agradecimento, que criamos em nosso aplicativo. Mas estamos perdendo a parte que está criando a ordem. Portanto, não estamos criando a ordem na verdade no banco de dados. Então, quando eu vou para o aplicativo Admin e vou para os pedidos, é claro, gostaria de lembrar que você também precisa adicionar o módulo de aplicativo do administrador para adicionar o módulo de distribuição MDX. Porque talvez você também precise lidar com algum pagamento no painel de administração. E também o aplicativo não funcionará porque usamos o serviço stripe no serviço de pedido e o aplicativo não funcionará sem ele. Quero dizer, o aplicativo de administração. Então agora temos toda essa informação. Como vê, não estou fazendo nenhum pedido. Eu não tenho meu pedido feito depois que eu fiz o pagamento. Então, para isso, precisamos colocar a ordem no banco de dados também. Onde na página de agradecimento. Quero dizer, depois de um pagamento bem sucedido, não quando eu estou clicando aqui em Fazer Pedido. Quando eu faço o pedido, eu pago e volto para a página de agradecimento na página de agradecimento, eu vou ter o pedido criado. Então, voltando para a página de check-out, se você se lembrar, criamos um objeto de ordem. E estes objeto ordenado, estamos contendo as informações sobre o usuário ou sobre a entrada ou o usuário, ou sobre exatamente a mesma informação que vem do usuário que insere as informações no formulário. Então, para isso, precisamos usar o serviço de pedidos, mas não estamos aqui, mas na página de agradecimento. Então eu vou aqui para a página de agradecimento. Eu criaria novamente a ordem e colocaria aqui. Então, na página de agradecimento, não temos essa informação. Nós não temos depois que estamos sendo redirecionados para a página de pagamento, que está diretamente fora do nosso aplicativo e voltar para a página de agradecimento. Nós usaríamos os dados ordenados. Quero dizer, essas informações, nós vamos perdê-las. Então, precisamos de algum modo descontá-los. Por exemplo, em nossa aplicação, podemos dizer que a maneira mais fácil é o armazenamento local. Eu posso armazenar em cache todas essas informações no armazenamento local do meu aplicativo, e então eu posso usá-los novamente na página de agradecimento para fazer o pedido. Então, para isso, eu vou criar dois serviços. Primeiro serviço é chamado de ordem de pagamento. Por exemplo, em nosso aplicativo, que estará localizado em seus serviços e serviços de pedidos. Então eu vou dizer aqui, depois de criar o token de check-out, eu criaria um serviço que é chamado de ordem de dinheiro ou, por exemplo, dados de ordem de dinheiro. Então, dessa forma, passarei a ordem que morreu ou lá também. E este diodo usará o armazenamento local, ou este serviço usará o armazenamento local para armazenar em cache os dados do pedido. Então eu vou dizer aqui simplesmente ponto de armazenamento local item definido. E vamos dar um nome a este item como dados ordenados. E esses dados de ordem serão passados a ordem em si ou o objeto que será passado a partir do front-end ou do componente da página de checkout. Mas aqui precisamos de uma corda. Então, nós não podemos dizer JSON dot stringify, como nós poderíamos adicioná-lo como uma string e vamos dizer, ok, stringify esta ordem. Ok, Então, depois de armazenar em cache os dados ordenados, para que possamos, em seguida, recuperá-los na página de agradecimento do armazenamento local e usá-los para criar o pedido. Então, aqui estou eu. Depois de fazer o pedido, quando o usuário clica no botão, pedido, eu coleto todas as informações do pedido. E então usarei esse dinheiro do cofre do Serviço de Ordem ou os dados, e passarei esse pedido. Então, desta forma, eu estou armazenando em cache no armazenamento local. Então não precisamos deste serviço agora. Precisamos dele na página de agradecimento. Quero dizer, a criação da ordem, a ordem real será feita. O agradecimento. Página. Então vamos voltar e obter esta parte ou removê-lo totalmente e ir novamente para a nossa página de agradecimento. Então tudo está bem até agora, mas a criação da sessão de check-out deve ser feita depois que eu coletar as informações e descontar os dados do pedido. Caso contrário, serei redirecionado para a página de pagamento e perderei os dados do pedido. Portanto, é melhor mover esta parte para estar no final depois que armazenamos os dados do pedido em cache. Então vamos nos certificar de que temos realmente as informações são armazenadas em cache. Então eu também preciso salvar o serviço. Então tudo está funcionando bem. - Legal. Então, vamos fazer o pedido e verificar nosso aplicativo e armazenamento local. Armazenamento de sessão, eu levaria o armazenamento local. Então, no armazenamento local, temos o carrinho e também temos o token. Então, quando eu colocar ou quando eu pressionar em ordem lugar, Eu devo ter também o podemos dizer os dados ordenados. Ok, eu vou clicar nele. Eu pedi que como você vê, mas agora eu perdi totalmente porque eu estava realmente direcionado para outro domínio, que é chamado checkout strive.com. Então, agora aqui eu vou colocar minha informação e o guarda e então eu vou fazer o pedido. Então agora eu vou ser redirecionado para uma página de agradecimento. Então, obrigado. Página vai me redirecionar para o aplicativo onde eu tenho localhost 4200 porta. Então, quando eu clicar em OK, pressione. Então aqui nesse momento eu preciso fazer o pedido, então localhost 4200, e então eu terei exatamente os dados do pedido que eu preciso para que eu possa recuperá-los na página de agradecimento e fazer o meu pedido. Isto é o que veremos na próxima palestra. 187. Ordem com ording em agradecimento: Então, voltando para o componente de página de agradecimento, vamos ver que temos componente vazio. Tem apenas como Obrigado por fazer compras com a gente. Recebemos seu pedido, mas antes de exibir essas informações, precisamos fazer o pedido. Então, em primeiro lugar, nós temos, se você se lembra, nós removemos a colocação do serviço de pedidos daqui. Então, estamos apenas armazenando em cache os dados da ordem. Então precisamos fazer outro serviço que não é cache ou os dados, mas obter os dados da ordem. Então, podemos ter outro serviço que podemos chamá-lo como, por exemplo, recuperar ou obter ou o, ou obter dados de ordem armazenados em cache. Fique cortada. Gostaria de não ter confusão entre boa ordem e obter como ordem que está no armazenamento local. Então eu vou dizer aqui, basta obter item e este item get, eu não só vou usá-lo assim, então nós podemos ter apenas o item chave get está exigindo apenas a chave que é ordenado dados. E este serviço deve devolver uma ordem para mim. Então eu diria aqui, o tipo de devolução é ordem. Então, dessa forma, precisamos ter também um tipo de retorno que é encomendado. Então temos que colocar aqui de volta. Mas estes obter item está retornando para nós como corda. Então, dessa forma, precisamos fazer JSON.parse. Então, estamos analisando a partir de string para adjacente ou dois objeto que terá a nossa ordem. Então, depois disso, estamos recebendo o JSON.Parse como ordem e obtemos essa ordem. Claro, este método não precisa de nenhum parâmetro, então nós apenas usar GetCacheDir ordem, ordem de retorno do armazenamento local depois de analisá-lo. Voltando novamente à nossa página de agradecimento, componentes. Então vamos fechar todos esses. Não precisamos deles. Certo, salvamos este. Vá novamente para a nossa página de agradecimento. Precisamos de implementar novamente o G nele. Então implemente nele. E então precisamos chamar nele e g em qualquer método. E na Índia no método init, eu vou recuperar os dados do pedido usando o serviço, tão privado ou o serviço. E então chamamos ordens de serviço ou desculpe, não módulo de ordem ou o serviço e serviço de ordem virá do serviço que criamos aqui. Então nós temos que remover isso como caminho aliased. Novamente, eu não sei por que eu tenho isso assim, mas você sempre pode consertá-lo manualmente. Eu teria e-services e, em seguida, pedir serviço. Então, em ONGs nele, eu vou usar ou chamar esse serviço. Então eu diria aqui, constante, podemos dizer ordem que. E esta ordem que será igual a este ponto ou seu ponto de serviço obter dados ordenados cortados. Então temos GetCacheDir ordenou dados aqui. Então vamos fazer um registro de console de dados encomendados para ter certeza de que estamos realmente recebendo os dados corretos do pedido e do pedido armazenado em cache e repetir nosso método de pagamento novamente. Então eu vou novamente para a nossa aplicação, vá novamente para o cartão, confira. Então eu vou fazer o pedido e eu vou ser redirecionado para o pagamento. Vou colocar os meus dados de pagamento. E vamos verificar se realmente temos os dados do pedido. Então nós os temos porque não podemos vê-los, vamos agora adicionar outra página. Então eu vou pagar agora e eu vou ser redirecionado para uma página de agradecimento agora. Então, tudo bem. Temos três direccionados. Temos os dados do pedido no armazenamento local, e também temos o item de pedidos. Então, dessa forma, eu tenho os dados ordenados na página de agradecimento. Eu tenho todas as minhas informações, meu endereço, e todas essas informações que são armazenadas em cache e enviar a partir do componente de página de check-out. Então agora somos capazes de fazer o pedido. Então podemos dizer aqui diretamente, este serviço de ordem embora, criar ordem. E esta ordem de criação vai pedir dados de ordem porque estamos passando uma ordem para esses dados e, em seguida, assinar. E então eu posso obter os resultados como notificação ou algo como para exibir para o usuário. Nós não precisamos. Nesse caso, temos que fazer isso atrás do local porque ele já recebeu notificação de que ordenou que colocasse lama com sucesso no sucesso. Precisamos ter uma coisa que é remover os itens do carrinho, como inicializá-lo novamente, se você lembrar, fizemos isso antes e também, podemos, por exemplo, fazer um redirecionamento para a página inicial após cinco segundos. Mas nós podemos ter, dar isso de volta para o botão show onde o usuário pode voltar para a loja novamente. Então, depois de assinar, terei um método de sucesso como um retorno de chamada, e então usarei um serviço de cartão novamente aqui, se você se lembrar, precisamos usar o serviço de cartão. Então, serviço de guarda. E, em seguida, serviço de guarda novamente aqui. Então precisamos como fim de semana chamá-lo diretamente como um serviço, mas não de pseudônimo, mas de um caminho relativo para não ter o problema novamente. Então aqui eu tenho o serviço de cartão, e eu diria aqui, depois deste eixo, estes pontos de serviço de guarda ponto esvaziam seu carrinho. Já não precisamos que o carro esteja cheio. Então vamos voltar novamente, tentar nossa aplicação. Ok, agora temos cartões vazios porque eu atualizei a página de agradecimento. Então vamos colocar agora o autor. Então eu vou remover, Vou fechar o console para tê-lo mais claro para ver. Vou colocar ou adicionar ao carrinho este item e também este item. Então agora vamos para o carro 2. Nós temos dois itens e eu vou agora fazer um check-out. Então meu preço total é $2200. E tenho essas informações na minha ordem. E agora eu vou clicar em fazer o pedido. Serei redirecionado para a página de pagamento. Vou colocar novamente em formação do pagamento. Como eu disse, você também pode usar alguns outros tipos de cartões. Então, como você vê aqui na documentação, há guardas que é sempre um pagamento bem sucedido, como um teste. Isto é seguro em 3D. A autenticação deve concluí-la para um pagamento bem-sucedido. E também há isso sempre falhar. É o que diz fundos insuficientes. E desta forma você pode usar este guarda para testar sua loja forma mais ou ineficiente. Então temos estes agora o que é chamado de teste, que tem sucesso sempre. E é detectado como um cartão Visa que eu vou colocar meu pedido €2200. Eu tenho dois itens, como você vê aqui. Toda essa corrupção está vindo exatamente como nós implementamos antes. Então eu substituo PE. Agora vou ser redirecionado para a loja. Está bem. O carro que é atualizado porque ele tem mt voltando novamente para o painel de administração para ver se o meu pedido foi feito. Então precisamos fazer para atualizar novamente. Como vê aqui, temos o meu pedido. Eu tenho o meu pedido feito. Eu posso ver e ver todos os dados dessa ordem como você vê aqui. Então, somos colocados com sucesso a ordem da maneira certa para que eu possa, em seguida, alterá-lo para entregue ou falhou ou dobra depende do estado da minha loja e administração do meu e-shop. Além disso, após o sucesso de fazer um pedido, É melhor também remover a ordem em cache, que está no armazenamento local do armazenamento local. Até agora, também podemos remover os dados do pedido porque não precisamos mais deles. Portanto, não é bom ter os dados encomendados sempre no meu armazenamento local. Então, primeiro de tudo, podemos criar outro serviço que é chamado Criar ou remover os dados ordenados em cache. Então eu iria ao serviço de pedidos. Será algo como remover, armazenar em cache ou os dados. E, dessa forma, não retornará nada porque é vazio. Vamos apenas dizer armazenamento local, ponto remover item, e temos que especificar o nome do item. O nome do item no nosso caso era pedir aquilo. Então agora eu posso chamar este método que é chamado remover ordem em cache no sucesso após a colocação da ordem, e remover o item de ordem dos dados ordenados. Então podemos ter aqui este ponto, como por exemplo, ponto de serviço de pedido de carro, remover o cache ou os dados também. Então, desta forma, eu removo esvaziar o guarda e também removo os dados de ordem armazenados em cache. Mas agora temos um inseto muito, muito perigoso. E se uma pessoa como fosse capaz de ir para a página de sexos? Então, por exemplo, eu posso fazer isso na URL. Posso ir para a isca do sucesso, está bem? Mas eu não tenho nenhuma ordem e eu estou colocando ordens vazias para o meu, ele está colocando ordens vazias para a minha base de dados. Então, dessa forma, este é um problema muito perigoso. Dessa forma, precisamos consertá-lo. Assim, uma coisa de segurança pode ser resolvida obtendo o ID de sessão que criamos para o pagamento. E certifique-se de que realmente o usuário fez um pagamento quando ele chegou a esta página e validar seu pagamento e dizer, ok, agora você é capaz de colocar o pedido no banco de dados. Portanto, não permitimos qualquer realização da chamada do pedido até que obtenhamos as informações bem-sucedidas do usuário que ele realmente pagou e ele realmente tem um ID de sessão para fazer o pedido. Isto é o que vamos ver na próxima palestra. 188. Como ligar um projeto com NX Lint: Tudo bem, nesta palestra, vamos fazer o revestimento para o nosso projeto. Se você se lembra, eu sempre tenho alguns erros no meu código que eu tenho, como eles são mencionados em vermelho às vezes, e às vezes temos alguns avisos como quando eles são mencionados em amarelo. Então eu mantive esses erros porque eu quero mostrar a vocês como podemos corrigi-los para todo o projeto. Por isso, temos alguns comentários que são fornecidos a partir do NX, o que nos ajudará a fazer linting para o nosso projeto ou para o nosso próprio espaço de trabalho aqui. Então é por isso que durante o curso que você está vendo às vezes eu estou ignorando esses erros porque eu quero mostrar-lhe como descobrir e corrigir todos esses erros quando vamos fazer o revestimento. É por isso que temos em cada projeto algo chamado ES fiapos. Então a configuração ES lint, que são mencionados aqui, eles são regras que temos para todo o projeto ou repositório para corrigir para nós os problemas que podem ser em TypeScript ou em HTML, ou em JavaScript, ou em os arquivos JSON. Assim, desta forma, garantimos que somos entregues em produção o projeto certo, sem quaisquer problemas ou erros. Se formos para o arquivo JSON pacote, que está aqui, vemos que já temos scripts e esses scripts podemos executá-los para fazer algumas funções. Começarei com o Linde. Linde é o que precisamos para agora, precisamos descobrir quais os erros e erros que fizemos em nosso código com base em ES inclinado regras e correções. Então, para fazer isso, podemos apenas ir para o console. Podemos ir para um novo terminal como, por exemplo, podemos fechar tudo isso. Temos, por exemplo, este terminal, por exemplo. Então temos agora podemos dizer limpo ou claro. Então vai limpar a interface para mim. Então eu tenho aqui que depois Manila. Vou executar o comando que é chamado MPM executar lint dentro do meu projeto. Então, como você vê, eu tenho comprimento de execução NPM, então eu vou executar este comando, então ele será retornado em x comprimento do espaço de trabalho. Então este comentário na verdade é um comando anexo que será executado ao lado do NG Lint, que é também para alongar o código. Então vamos executar este comando e ver quais erros teremos aqui. Então está funcionando agora. Agora emprestando na loja, ele vai terminar em projeto por projeto como, por exemplo, temos dois aplicativos, admin e qualquer afiado, e ele também tem bibliotecas. Então todos eles são projetos. Ok? Então temos aqui, por exemplo, o primeiro erro, que está dizendo que a página inicial, método inesperado do ciclo de vida do construtor vazio não deve estar vazio. Método vazio inesperado em junho nele. Então, para ir lá diretamente, você pode apenas dizer cmd e clicar com um mouse. Ou você pode controlar e clicar com o mouse seguindo aqueles. Então vamos lá. Certo, nos levou diretamente para aquele componente. Como você vê, isso é regra em Eastland que eu não posso ter funções vazias, então é melhor excluí-las. Não preciso tão bem do construtor. Assim, também podemos excluir a implementação da energia nele. E também excluímos esta biblioteca. Então agora temos um componente limpo sem problemas aqui. Então vamos verificar também os outros erros. Então nós terminamos esta página inicial. Temos aqui também erro. Então o que diz, este eletrodo deve ser prefixado com um dos prefixos, bits azuis. Então, se você se lembrar, no aplicativo, criamos isso com qualquer loja. Então o seletor deve ser bits azuis. Agora queremos mantê-lo com loja NDI porque estamos em aplicação loja MD. Então precisamos ir para a configuração inclinada ETS, não que a global, mas aquela que está dentro do projeto. Então temos um global que será aplicado para todo o espaço de trabalho ou seus repositórios ou as bibliotecas e aplicativos. E temos também dentro de cada aplicação, temos algo específico para ES fiapos, que substituem primeiro lugar o global que estendemos e, em seguida, fazemos e ajustamos horas. Então aqui temos na aplicação inicial que temos este atributo net deve ser prefixado com um bits azuis. Agora queremos prefixá-lo com loja de energia. Então, nesse caso, não teremos mais esse erro. Então, quando formos para o rodapé, temos que verificar isso. Ok, nós ainda temos erro novamente com um construtor e g em qualquer 20 para removê-los. Portanto, é melhor também manter nossos componentes limpos sem problemas. Então, como você vê aqui, temos um erro na página inicial também. Precisamos substituir isso. Com loja NG. Então dizemos NG loja como um prefixo. Então vamos verificar outros erros também. Então eu vou para o Rodapé. Certo, consertamos o cabeçalho do rodapé. Precisamos consertar o cabeçalho também. Então vamos novamente aqui, vamos ver que usamos serviço de carrinho, mas somos chamados de cartéis, mas não usamos isso. Temos que apagá-lo. Nós também precisamos limpar e nos proteger dele e do construtor. Então ES fiapos tem um monte de regras. Você pode adicioná-los ao seu código. Então, por exemplo, você não quer ter funções vazias. Você pode ir para a documentação do ES lint. Como você vê aqui. Estou no site formal da ES lane.org. Então Eastland tem um monte de propriedades e regras que você pode configurar para sua aplicação. Por exemplo, os códigos devem ser duplos, não únicos. Por exemplo, temos aqui algumas vezes usando aspas simples, mas você pode configurá-lo para fornecer aspas duplas. Então há regras sempre vindo com este Eastland. E então eu acho que o NX já quando você criou este projeto, ele vem sempre com algumas regras específicas e semelhantes que já estão predefinidas em um X. Então você não precisa ajustá-lo tanto. Então você só faz. A próxima coisa que eu mostrei a vocês sobre prefixar o componente e as diretivas. Então, se você vai para o Guia do Usuário e, em seguida, você vai para uma regra, você vai ver que há um monte de regras e eles são descritos aqui, todas elas. Então, por exemplo, aqui, isso permite ponto-e-vírgula desnecessários. Por isso, está sempre a mostrar-lhe que quando ponto e vírgula não é necessário, por isso irá dar-lhe um erro quando activar este e não tem um ponto-e-vírgula. Então, é claro que há muitos papéis. Você pode vê-los ir um a um para eles. E então você vai descobrir que eles são realmente benéficos para você quando você está construindo seu projeto. E você não permite que os desenvolvedores publiquem qualquer código ou confirmem qualquer código sem corrigir todos esses problemas ou as regras que você colocou para o seu projeto. Então, voltando para a nossa Eastland, novamente, queremos resolver outros problemas. Então temos aqui cabeçalho, nós corrigi-lo. Temos aqui mensagens, e temos alguns problemas aqui. Então, um dos problemas nos mensageiros, o seletor deve ser prefixado com um desses prefixos. Então precisamos também consertar aquele que está aqui, precisamos ter qualquer afiado, então já consertamos isso. Adicionamos o prefixo da loja NG ao lint ES, bem, então não teremos erros. Então vamos executar novamente o comando que podemos dizer claro e, em seguida, executar fiapos. E vemos se estamos recebendo novos erros novamente, para ter certeza de que estamos corrigindo as setas certas. Ok, o último erro que temos aqui é bem que componente do aplicativo deve ser prefixado com como loja de doces. Então temos aqui deve ser sempre e você comprar componente. Então agora temos tudo é limitado, mas apenas para aplicação loja ND porque é o aplicativo principal que criamos quando criamos finais. Então vamos vincular também o aplicativo de administração. Então eu vou executar aqui um comentário, também MPM executar fiapos, mas para aplicação admin. Então você pode especificar o administrador. Então, ele será executado para você também o linting para o projeto admin. Então, dessa forma, também teremos alguns erros. Precisamos consertá-lo. Então, por exemplo, temos alguns avisos de que usamos qualquer aqui. Então, como você vê, temos como algum aviso de que estamos usando o qualquer. Você também pode desativar essa regra porque às vezes você precisa especificar como qualquer um, como vimos anteriormente. Então, podemos procurar por desabilitar esse erro. Então, podemos ir inesperado qualquer especificar tipo diferente. Então você não pode subir em seus papéis aqui. E se você não encontrar nada, você também pode usar a ferramenta de pesquisa aqui. Então, quando você não consegue encontrar nada, a melhor maneira é usar o Google. Então, se formos aqui, inesperado qualquer especificar e você pode dizer Desativar. Então vamos para o Google, verificar se o TypeScript desativado, Eastland função plug-in. Então, como você vê no estouro de pilha, temos o Google o erro e há alguma solução. Ele disse, basta adicionar esta regra para que possamos copiar esta e ir para o nosso arquivo Eastland. É melhor colocá-lo no global porque ele será aplicado para todo o projeto. Por isso, temos também essas regras. Então podemos colocar essa regra, por exemplo, aqui. Assim, ele será aplicado em todos os arquivos, principalmente T, SDS, x e JavaScript. Então podemos adicionar esta regra também aqui. Então podemos. Vá, como você vê aqui, nós não temos nenhuma função vazia e também nenhuma explícita nenhuma. Então salvamos isso e vamos de novo e executamos nosso comando. Podemos dizer claro aqui novamente. E, em seguida, em NPM executar lint admin. Então, como você vê, ainda estamos recebendo esse erro. Que todos os avisos, podemos dizer inesperado qualquer. Isto é porque quando vamos para o, novamente para as regras, nós colocamos esta regra aqui. Então não deveria estar aqui. Deve ser assim como a extensão da biblioteca TypeScript. Então, você pode adicionar essa regra aqui, que será aplicada em funções TypeScript. Então precisamos mover este e também este, e colocá-lo dentro das regras que temos para o texto datilografado. Como você vê TypeScript, então aqui seria o prefixo TypeScript. Então, toda essa informação, você tem que ter cuidado com ela e você pode adicionar suas regras de escrita para fazê-los funcionar. Então vamos salvar novamente e tentar executar nosso comando. Então eu vou novamente para a minha linha de comando aqui. E não podemos dizer claro. E então podemos ir NPM, executar administrador de fiapos. Novamente. Estou mostrando lentamente passo a passo para saber como corrigir esses problemas e avisos. Então, como você vê, não temos mais esse erro. Então nós não temos o aviso ou que é dizer que qualquer um é como não preferir ser usado. Então, temos apenas esses erros no aplicativo de administração. Então vamos consertá-los. Então aqui diz que o NG, ou por exemplo, aqui nesta aplicação, NG OnDestroy deve ser implementado porque aqui eu não tenho implementos neste desenho. Temos que chamar também para destruir. Então este é um dos erros. Também temos outro erro aqui. Precisamos implementar o OnDestroy. Então não implementamos isso. Então você precisa importá-lo e implementado, bem como os erros que temos, temos na lista de produtos, nós corrigimos, nós também temos na lista do usuário. Então precisamos consertar isso também. Terei aqui em destruir outro erro, que é o mesmo que fizemos anteriormente. As ONGs nele não devem estar vazias. Assim, podemos simplesmente excluir a liderança, a implementação das ONG nele. Nós não precisamos mais e também a entrada de energia nele. A mesma coisa vai para a barra lateral. Corrigimos esse erro também. Então, dessa forma, você faz tudo o mesmo para todas as bibliotecas. E agora eu terminei com o administrador. Em seguida, você deseja fazer para a biblioteca, que é chamado, por exemplo UI. Então você só vai aqui, MPM Linde e você diz UI. Então, dessa forma, ele irá vincular a biblioteca você, então você deve especificar sempre o nome da biblioteca. Então, como você vê, temos um erro no banner e sobre e não deve estar vazio. Portanto, temos aqui também, precisamos remover a implementação do mesmo. Então salvamos tudo. E vamos ao aplicativo para verificar se tudo está funcionando bem. Então, vamos ter certeza de que não temos nenhum erro em nossa aplicação. E como você vê aqui, eu recebi um erro e você mostra que a prova não corresponde a nenhum dos elementos. Então podemos ir para o seletor aqui. Podemos verificar por que temos esse problema. Então, no aplicativo e você compra se vamos para o índice como, Ele está pedindo raiz bits azuis porque este módulo aplicativo que criamos ou componente aplicativo, nós mudamos este show NG provou que era raiz bits azuis. Então, no índice HTML do aplicativo e você compra, você só precisa renomear isso porque este é o ponto de entrada para a nossa aplicação. Então vamos aqui, responde e recarregar o aplicativo. Tudo está funcionando bem. Então é isso para corrigir os problemas de revestimento. Como eu disse, basta executar NPM ou mpm run lint e você especificar o nome do projeto e ele irá resolver para você ou mostrar-lhe os erros após o que você especificou no lint ES com base nas raízes lean ALS ou regras que nós especificamos lá. Então, para isso, eu vou corrigir todos esses erros de lente para todas as bibliotecas, que serão os mesmos. Eu não vou fazer isso como na sua frente para não demorar tanto tempo. E vou acrescentar que o código do projeto no final desta seção. E eu só quero lembrá-los que quando você corrigir todos esses problemas, por exemplo, eu consertei os pedidos no final, você vai ter todos os arquivos passado linting. Então, dessa forma, você não tem nenhum erro. 189. NX para atualização do projeto para versão mais recente: Tudo bem, nesta seção vamos falar sobre atualizações da versão Angular e biblioteca NX. Então você sabe que sempre Angular fornecendo as novas versões a cada quatro meses ou a cada seis meses. E também em X está seguindo isso para sempre para manter interagir com Angular. Então, por exemplo, eu trabalhei neste curso com Angular 11. E então surgiu uma atualização, que é angular 12. Então vamos atualizar nosso projeto para Angular 12. Agora, a grande coisa com Angular ou NX romance, é fornecer-lhe uma ferramenta para atualizar. Você não tem que fazer nada. Você não precisa fazer isso manualmente e descobrir no fundo um JSON, quais são as bibliotecas que você usou e depois atualizá-las. Cara, que já sabe que o NX está te fornecendo todas essas coisas. Mas primeiro, precisamos verificar nossas mudanças. Então, antes de tudo, eu gostaria de instalar um programa chamado GitHub Desktop. É aplicação. Você pode baixá-lo em desktop.gov dot com. Você pode instalá-lo para Mac OS e Windows. Após a instalação deste, como a área de trabalho do GitHub, você pode conectar seu projeto a ele e ver as alterações que são feitas no projeto quando você tem o repositório dot git. Então, quando vamos aqui para o nosso aplicativo ou para o console ou dois, eles são como o Explorador de Arquivos. Veremos que temos sempre um arquivo que é chamado de portão. Você não pode vê-lo aqui. Mas se você for para o Finder ou para o Windows Explorer, você verá uma pasta que é chamada de garoto. Isso significa que este projeto está conectado a um bom projeto ou conectado a um repositório Git por padrão. E X está fornecendo este garoto e ele está conectado de alguma forma, fazer um repositório Git. Então o que você precisa fazer é apenas talvez você possa remover esta peça ou você pode mantê-la para rastrear suas alterações. Então, para mim agora, vou ficar com ele. Mas se você não tiver esse arquivo duplicado, vou mostrar-lhe como criar um novo. Então, primeiro de tudo, eu vou para o GitHub Desktop, que eu instalei. Como você vê aqui. Eu tenho todos os meus projetos que eu fiz antes. E agora podemos começar a fazer o seguinte. Primeiro, precisamos criar um novo repositório a partir do disco rígido. Então você pode, se você não tem este arquivo dot git, você pode clicar sobre isso e, em seguida, você pode especificar a pasta que você está indo para implementar o seu projeto. Por exemplo, eu tenho, meu projeto está aqui, eu vou clicar em abrir, mas ele diz que este diretório parece ter um repositório Git porque eu tenho dot get file como eu mostrei aqui. Então, para isso, não precisamos usar essa opção. Caso contrário, você pode usá-lo criando um nome de repositório e também ele irá inicializar para você novo arquivo. Então, nesse caso, vamos adicionar um repositório existente de um disco rígido porque já temos isso. Temos aquela pasta dot git. Então eu vou navegar para o meu projeto, para o espaço de trabalho que eu criei. E como abrir este projeto que o espaço de trabalho onde o ponto obter pasta está lá. Então, abrimos e dizemos Adicionar repositório. E como você vê aqui, eu vou ver todas as mudanças foi que eu fiz desde o tempo que eu instalei em x e até agora até agora que eu quero que você clique no commit. Você pode escrever uma mensagem de commit para que possamos obter tudo isso como comprometido e confirmado. Então você não pode dizer como terminar. Podemos porque podemos dizer que terminamos o curso ou a loja. Então, podemos dizer terminando o e-shop. Então é isso. Então você pode dizer comprometer-se com o mestre. Agora não temos nenhuma mudança. Então, mas quando eu vou para o meu arquivo ou no Explorador de Arquivos no editor, eu vou ver isso quando eu mudar. Então vamos fazer aqui mudar, por exemplo, salvá-lo, ir novamente, e vamos ver que temos, e esta mudança está aqui. Eram 11, agora são 12. Então, para isso, eu quero fazer isso porque nós vamos atualizar nosso projeto. Então, nesse caso, seremos capazes de ver quais mudanças são feitas. Primeiro, o que fez por mim para atualizar meu projeto? Então, para atualizar o projeto, podemos ir para o navegador. Vou enviar-lhe um link, ou você tem um link que está anexado com esta palestra. Está mostrando a documentação de atualização de um X no site normal do NX. Então precisamos usar o terminal para isso. Então é muito fácil e muito simples, o que é muito bom para fazer com n-x. É por isso que eu encorajo as pessoas a fazer os projetos de largura angular NX porque ele está fornecendo as ferramentas que são realmente ótimas para atualizar e migrar seu projeto. Claro, você pode usar também NG, atualizar. Mas será parcialmente atualizado. Ele não irá atualizar as outras bibliotecas como, por exemplo, NDR x, ou por exemplo, se você estiver usando TypeScript, etc Então, para que nós vamos abrir o terminal e usar este comentário. Então vamos aqui, abrir o terminal novamente do nosso projeto como vemos anteriormente. Então podemos ir para este nó aqui estamos. Você pode parar o projeto é melhor. Então é melhor parar este. E eu vou parar também o aplicativo do painel de administração. Então, aqui estamos indo para colar o comentário dos terminais NX migrar mais recente. Então, quando executamos este comando, vamos ver que NX começar a fazer algo que está atualizando o pacote JSON, então é melhor fechá-lo e também criar um arquivo que é chamado migração. Isso vai demorar um pouco. É cerca de cinco a dez minutos. Vou pular nossa velocidade deste vídeo. E você vai, eu vou voltar para você depois que isso estiver pronto. Então, como você vê agora que a migração está pronta. Então o pacote JSON, ele disse, certifique-se de que pacotes e alterações façam sentido e, em seguida, execute o npm install. Vamos checar nosso pacote, Jason. Vamos ver que, tudo foi atualizado para a versão 12, como você vê aqui. Então temos também angular e tudo foi atualizado para a última versão do Angular. Então, dessa forma, nós atualizamos nossos pacotes e bibliotecas e todas as dependências facilmente. Agora vamos verificar a atualização ou como podemos instalar essas atualizações. Ele disse, certifique-se de que o pacote JSON muda, faça sentido e, em seguida, execute o npm install. Mas também você pode verificar as alterações verificando o GitHub e você vê todas essas alterações que são feitas aqui. E também criou um arquivo de migração que será usado para a migração. Então vamos executar a instalação do npm novamente. Então podemos dizer npm instalar em nosso projeto. E ele irá instalar todas as bibliotecas atualizadas. Novamente. Além disso, vai demorar algum tempo. E eu vou fazer este vídeo rápido. Ok, Agora, depois de instalar MPM, como vemos aqui, que ele instalou e compilou toda a biblioteca e tudo teve sucesso. Então, se formos novamente para verificar nossas alterações é apenas o package.json, que é um arquivo temporário para confirmar todas as bibliotecas e suas dependências e seus links e tokens. Então, por enquanto, vamos executar o comando mais recente após esta atualização. Então, se percorrermos até as instruções, novamente, vemos que aqui o npm instalado e depois disso, temos que fazer a migração ONNX em torno das migrações. Então aqui estamos indo para executar este comando e, em seguida, ele irá atualizar o nosso projeto. E podemos executá-lo novamente e ver se foi atualizado. Então, aqui vamos nós novamente para a linha comum. Eu copio essa. Eu vejo aqui como baseado em seu comando. E então eu dirijo essa migração também. Vai demorar um pouco, mas vou acelerar o vídeo. Bom como você vê aqui, o grande gradiente terminou. Ele fez um monte de coisas como remover algumas coisas obsoletas e também atualizar eram pobres trabalhadores, rotas ativadas migração, instantâneo ou atualizações que são feitas ou em Angular nesta nova versão. Então o NX fez isso por mim. Então vamos agora executar o projeto e ver se estamos realmente fazendo. Está tudo bem. Então eu vou dizer em x servir e você comprar, e no outro terminal, eu quero executar bem o aplicativo de administração. Então vamos aqui, executamos esses dois aplicativos para ver se tudo está funcionando bem. Durante isso, podemos verificar também o nosso bem. Como você vê, muitas mudanças acontecem. Então meu conselho para você, você tem que verificar sempre as mudanças de trabalho são feitas, especialmente se você atualizou algumas regras sobre ES lean, por exemplo, especialmente se você tem como alguns aplicativos onde você tem alguns, fez algum núcleo ajustamentos. Então você precisa sempre verificar todas essas mudanças. E então você pode migrar e iniciar seu aplicativo ou mesclar ou o código que foi atualizado para o seu projeto. Então eu não vou falar em detalhes sobre cada atualização que aconteceu aqui, mas está acontecendo principalmente. Eu gosto na configuração de arquivos de do projeto como ES lint, como testes, ferramentas, como apenas, e também as variáveis de ambiente que criamos anteriormente, e também os campos de poli, etc. todos esses arquivos são atualizados, também o NX JSON. Então, muitas coisas podem o NX fazer por você sem ter um esforço para fazer isso manualmente, o que é tão bom. Você não tem que se importar com tudo isso pode ser mitos, alguma biblioteca, você, talvez você perdeu alguma atualização importante. Então NX fazer tudo isso para você, que é obrigado, grande, obrigado por esta equipe que está desenvolvendo toda essa biblioteca e mantê-lo no caminho certo para as últimas atualizações do Angular. Então, como vemos aqui que compilamos com sucesso o projeto de qualquer loja e também o administrador. Então vamos ao nosso navegador e verificar se temos tudo bem. Então primeiro eu vou à oficina de máquinas. Então aqui eu preciso me refrescar. Então temos aqui o Refresh. Ok, parece que tudo está funcionando bem. Como você vê a página do produto, produto viciado, Adicionar ao carrinho. - Legal. Tudo está funcionando bem. A página de finalização da compra. Perfeito. Portanto, não temos nenhum problema no aplicativo admin ou front-end. Vamos para o aplicativo do painel de administração. Então eu vou para o administrador também. Vamos atualizar novamente também. Ok. Nós temos produtos, temos categorias, todos eles funcionando bem. Fizemos alguns pedidos e também usuários. Tudo está perfeito. Não tivemos nenhum problema. Depois disso. Você pode criar uma mensagem. Você pode chamá-lo como núcleo, atualização ou atualização, você pode dizer. E então você pode se comprometer com o mestre. E todas essas alterações serão enviadas e enviadas para o seu repositório. Tudo o que você tem que fazer é empurrar isso para um repositório ao qual você se conectou. Você vê, é muito fácil. Levamos cerca de 15 minutos apenas para fazer a atualização para as bibliotecas mais recentes do nosso projeto. 190. Como instalar Heroku e preparar Git: Ok, Nesta seção vamos implantar nosso backend ou nossa API Web para Heroku. Heroku é uma das ferramentas que é usada para implantar o projeto ou APIs web. E eles podem ser públicos e podemos usá-los em seus projetos. Então você não terá sua API baseada apenas no localhost 3000 como vimos, mas vamos colocá-lo em algum URL e podemos conectar nossos aplicativos front-end a ele. O primeiro passo que temos que fazer, temos que ir a um site chamado Heroku.com e, em seguida, somos convidados a ser trancados. Claro, se você é alguns não tem conta aqui, você também pode se inscrever. A inscrição é muito simples. Basta fornecer FirstName, sobrenome, endereço de e-mail. E qual é o seu papel? País? E também, você tem que colocar um pouco de linguagem de desenvolvimento de dinheiro Brian. Temos que colocar NodeJS no nosso caso e você tem que verificar se você não é um spam e então você pode obter uma conta. Depois de fazer login, você verá um painel como este. Então este painel, precisamos criar um aplicativo que vamos torná-lo público para a nossa API. Então, primeiro de tudo, você precisa criar um novo aplicativo. E esta criação de um novo aplicativo, você pode dar qualquer nome para o seu aplicativo. No meu caso, eu daria um nome como e-shop, back-end, por exemplo. E talvez esse nome não possa estar disponível, então você precisa especificar algum nome específico. Talvez você possa dar como qualquer sufixo aleatório. Por exemplo, você pode colocar seu sobrenome. Por exemplo, vou colocar o meu sobrenome ou o nome da minha empresa. Eu vou ver, eu diria como um pedaço azul. Então, nesse caso, terei e-shop de volta e pedaços azuis. E então você escolhe sua região é melhor usar a região mais próxima onde está mais perto para seus clientes-alvo. Então é melhor para mim neste caso, eu estou vivendo na Europa. Então eu vou colocar a Europa e, em seguida, você tem que clicar em criar um aplicativo. Por isso, criámos agora uma obrigação. Há algumas instruções que temos que fazer primeiro. Primeiro precisamos baixar e instalar o Heroku CLI. Vamos para este link e verificar. Então, neste link você pode ver várias opções para instalar Heroku. Então, por exemplo, você tem maneira macOS, você pode usar comentário se você tem Homebrew e também se você tem o Windows, você pode instalar um instalador. E também para abrir TO dessa forma, que eu gosto sempre de usar é usando NPM, NPM global instalado. Então você pode fazer npm instalar dash global, Heroku. Então vamos a Paris fazer isso. Então eu vou aqui e abrir meu terminal. Vou usar o botão Control J como vimos anteriormente. E então eu vou dizer npm instalado menos g. Então, desta forma, vou instalar o dispositivo Heroku Domain public, para que eu possa usar comandos Heroku em minha máquina. Mas o primeiro que preciso fazer é talvez precisemos ter permissões. Assim, as permissões, talvez ele não permitirá que você instale público ou globalmente. Você precisa prefixar este comentário com sudo. Então, como você vê aqui, eu não sou r. Eu não tenho permissões para fazer isso, então eu preciso prefixar este comando com sudo. Então, podemos dizer sudo nmap, mas no Windows, eu acho que você não terá nenhum problema. E então ele vai me pedir a minha senha. E então eu vou colocar a senha e ele será instalado com sucesso. Agora, como você vê, ele foi instalado, nós temos agora o comando Heroku. Então você pode, por exemplo, colocar Heroku assim e você obteria um comando como opções que você tem, algumas opções que você pode usar para seus comentários Heroku. Então volte para o nosso navegador. Após a instalação, voltamos ao nosso aplicativo novamente e temos que fazer uma boa edição. E também, temos que conectar nosso projeto Heroku ou nosso projeto back-end ao Heroku git. Mas antes de tudo, a coisa mais importante, porque antes de fazermos este passo, você tem, é claro, para criar um arquivo gitignore. Então, por exemplo, em Heroku, eu não vou implantar esse arquivo final. Este arquivo m contém minha string de conexão para banco de dados é meu segredo e também URL API. Eu não vou empurrar isso para o repositório Heroku git. Então, desta forma, precisamos adicionar um arquivo que é chamado git ignore. Então, quando eu uso um bom comentário de Heroku, então ele não vai empurrar esses arquivos que eu especificar. Então também, você não precisa enviar módulos de nó. Módulos Monod vêm normalmente um arquivo muito enorme, quase 200 megabytes, porque estamos instalando bibliotecas e suas dependências. Você não precisa usar módulos Node também. Então, criando ficar ignorado arquivo, É muito simples. Você só precisa criar um arquivo na raiz do projeto. Então você tem que dizer git ignore antes de fazer qualquer passo que é mencionado lá. Então, primeiro, você precisa ignorar a pasta de módulos do nó. Então nós dizemos barra nó sublinhado módulos. E também precisamos ignorar o arquivo m e também outros arquivos de desenvolvimento como o RC mais bonito, como você vê aqui, temos este arquivo para que possamos ignorá-lo também. Então, nesse caso, nós temos, estamos, estamos prontos para conectar nosso projeto ao repositório Heroku. Então voltamos para as instruções novamente e temos que dizer para entrar nele. Porque se não inicializamos nosso projeto anteriormente como vimos que não temos um bom, Nós não conectamos a nenhum bem. Então, nesse caso, precisamos dizer obter qualquer, ok, Depois que você entrar nele, você verá que há um arquivo criado neste repositório que está indo ou chamado como dot kid. E se você quiser vê-lo, você pode ir aqui para a pasta backend e você vai ver que esta pasta e foi criado. Então, a próxima instrução que precisamos para conectar Heroku git remoto. Mas primeiro precisamos usar o login Heroku. Então vamos primeiro investigar Heroku. Então eu vou usar Heroku login e, em seguida, ele vai me perguntar, você quer abrir o navegador e você pode entrar em seguida. Então não podemos dizer sim, podemos pressionar qualquer tecla e, em seguida, ele abrirá automaticamente o navegador. Então, como você vê aqui, eu tenho outra página. Está dizendo para olhar para Heroku CLI. Eu vou dizer olhar em e, em seguida, logado porque eu estou anteriormente conectado no mesmo navegador. Então, quando você voltar para o terminal, ele saberá que você já se conectou e, em seguida, você pode usar comandos Heroku, como mencionado na documentação. Depois disso, precisamos conectar nosso Heroku ou nosso projeto ao repositório git Heroku. Então nós precisamos usar este comando, todos esses comandos, você pode usá-los como você vê, digamos Heroku, git remoto, e depois adicionar E afiado volta e bits azuis. Então é exatamente o mesmo nome do aplicativo. Então vamos fazer isso. E então nós baseamos este comentário aqui. E então, como veremos isso, ok, o repositório Git é definido para este caminho. Então, agora, quando estamos indo para implantar nosso projeto ou enviar nosso código para lidar com cool, então Heroku vai obter ou ler todos os seus arquivos e o código que temos carregado a partir deste caminho. Na próxima palestra, vamos ver como podemos criar também um banco de dados de produção. Não precisamos usar o mesmo banco de dados que vemos porque talvez esse banco de dados possamos diferenciar entre desenvolvimento e produção. Como veremos na próxima palestra. 191. Criação opcional de banco de produção: Ok, nesta palestra vamos falar sobre a criação de um banco de dados de produção. Então, quando você está fazendo um desenvolvimento ou quando você faz algum aplicativo, normalmente você tem um banco de dados espacial para você, apenas para desenvolver e testar coisas e fazer um progresso para sua aplicação. Mas depois de implantar o projeto para o ativo, então você precisa criar um banco de dados de produção. Neste curso, isso é opcional para você criar banco de dados ao vivo, banco de dados de produção ou não. Então nesta seção ou nesta palestra, nós vamos fazer isso. Se você se lembra, instalamos MongoDB Compass e este aplicativo MongoDB Compass, podemos criar bancos de dados e também podemos importar e exportar dados para ele. Então, em nosso curso, estávamos usando este banco de dados, que é chamado de banco de dados e-shop. Agora vamos criar um novo. Podemos chamá-lo de E afiado também, banco de dados. E seria uma produção ampla. Então podemos ter isso e podemos criar a primeira coleção, que será chamada, por exemplo, categorias. E então fazemos, criamos para o banco de dados, e o banco de dados é criado. Então, como você vê aqui, mas nós temos apenas uma mesa. Então, se você se lembra, eu anexei para você no início do curso, alguns arquivos, você pode usá-los como dados padrão. É como os dados que estamos inserindo fazer o banco de dados. É como semear. Então podemos usar também a semeadura que também aqui. Então, farei isso rapidamente. Então, como importar dados usando uma bússola? Você só tem que ir aqui, clicar em categorias, por exemplo, no nome da coleção. E então você pode dizer dados de importação. E então você navega até o arquivo onde eu te dei. Então eu lhe dei, por exemplo, categorias ou os itens e outras tabelas. Então, para isso, você pode usar para essas categorias e você tem que especificar aqui que você tem JSON. E agora estamos fazendo importação. E esta importação foi concluída. E veremos que nossos dados estão localizados aqui. Então vamos fazer o mesmo para todas as tabelas. Vou fazer isso rapidamente na sua frente. Então eu criei aqui uma nova tabela. Eu chamo de usuário, ou usuários. E esses usuários, eu vou importar esses dados também. Então temos que fazer o mesmo para todas as outras tabelas. Então agora minha produção de banco de dados está cheia. Então nós vamos usar este banco de dados, mas nós estamos apenas para sua aplicação de produto ou aquele aplicativo desenvolvido no desenvolvimento local Heroku, nós ainda estamos usando a questão do banco de dados. Então, como podemos fazer isso dinamicamente, como quando eu implantar ISA para o aplicativo usa banco de dados. Mas quando estou desenvolvendo, eu quero dizer para o aplicativo, ok, use este banco de dados. Então é bem simples. Nós vamos configurar essas variáveis de ambiente que são preferidos para Heroku porque nós vamos usar essas variáveis e nós usá-los dentro do aplicativo. E no desenvolvimento, podemos manter, por exemplo, essa cadeia de conexão. Mas na produção vamos ter outra cadeia de conexão. Mas aqui como você vê que o arquivo de ambiente não é implantado porque nós adicionamos ao git ignore. Então isso não será na implantação em Heroku porque Heroku não saberá que temos arquivo de ambiente aqui. 192. Configuração de variáveis de desenvolvimento e produtos: Ok, agora como podemos dizer ao aplicativo para usar esse banco de dados de produção, não o banco de dados de desenvolvimento. Primeiro de tudo, se você se lembra, nós adicionamos o arquivo m e no arquivo final estávamos usando ele para se conectar ao banco de dados que criamos no MongoDB Atlas. Então, a cadeia de conexão é armazenada no arquivo m como você vê aqui, e falamos sobre isso anteriormente. Então agora vamos ter uma cadeia de conexão diferente para a produção. Então, nesse caso, ok, estamos usando essa string de conexão aqui em conexões de processo para fazer. Mas como eu disse que quando estamos indo para implantar este aplicativo, este m-file, mais bonito, IC e módulo Node, eles não serão carregados para o servidor. Então, de onde o aplicativo implantado saberá qual string de conexão usar. Porque, nesse caso, quando eu implantar, ele não saberá qual string de conexão usar porque será indefinido aqui. E então teremos um erro de conexão. Então, para isso, vamos mudar primeiro tudo o que temos, como dois ou em nosso app.js, tudo o que precisamos mudar para estar em produção. Por exemplo, este nome, vou usar um banco de dados, mas no exterior, não este. Por isso, temos de mudar isso também. Temos também que usar algumas, outra variável, que podemos chamá-lo de nome dB, por exemplo. E podemos dar esse nome de banco de dados no arquivo. Então nós podemos, depois que foi uma linha, podemos dizer o nome DP. E então para local, terei que usar esse banco de dados de e-shop. Mas na produção vamos usar um diferente. Ok, o que mais? Portanto, o aplicativo também está usando uma porta específica. Então, quando você inicia o aplicativo em produção, como você vê aqui, quando vamos para o navegador para o nosso aplicativo e usamos, dizemos, por exemplo, abrir o aplicativo aqui no topo. Então teremos um novo aplicativo. Como você vê aqui, nós temos o link, mas ele não contém qualquer porta ou como, por exemplo, 3000 ou algo assim. Porque antes tínhamos como anfitrião local como este e 3000. Então não temos o conselho aqui. Então, como também podemos tornar o tabuleiro dinâmico. Por isso, temos de o fazer também porque na produção utilizará um porto diferente. Então também aqui temos que definir uma variável. Podemos dar-lhe como uma constante e dizemos porto. E esta porta virá também de variáveis de ambiente. E será chamado de porto. Se não houver porta, use 3000. Então, só para o caso de esta parte não vir ou vem com indefinido. Então usamos este quadro aqui. E no meu arquivo eu posso definir essa porta. Então podemos dizer também aqui, usar o porto, podemos dizer que o porto será 3000. Mas lembre-se, isso é apenas para desenvolvimento local. Não temos para isso para produção. A produção irá substituí-lo por outra porta. Mas a palavra-chave para isso será comprada assim. Então Heroku vai encontrar ou criar um porto por conta própria. Normalmente, é a porta 80, que é a porta padrão para o HTTP. Ok, agora temos um problema. Então, como a produção sem variável de cadeia de conexão. Então, como podemos criar isso. Então vamos novamente para o navegador onde criamos nosso aplicativo. E então vamos encontrar no topo algo chamado atividade ou configurações. E em suas configurações você vai encontrar um revelam vars configuração. Estes são, portanto, os vars de conflito que serão utilizados na produção. Então, nesse caso, eu preciso dizer para o meu aplicativo aqui, usar a cadeia de conexão, mas nós somos a produção um. Então eu vou voltar para o navegador e, em seguida, criar uma nova cadeia de conexão de chave será o que será. A conexão permanece a mesma, mas com banco de dados diferente. Então eu vou usar o mesmo. E então eu vou dizer que não usar banco de dados e-shop, mas cada um que obedece no exterior. E também, também precisamos criar outra coisa que é chamado de nome DP. Vamos usar esse nome afiado, que a base, então aqui também, E-sharp, que obedece amplamente também. Então, nesse caso, o aplicativo saberá que há uma string de conexão e ele iria lê-la a partir daqui. Então não temos que nos preocupar com isso. Portanto, é melhor também adicionar todas as variáveis de ambiente à conexão pois caso contrário nossa aplicação falhará. O que temos que usar aqui, API URL, que será a mesma coisa que tivemos lá. Será api barra v1 e estamos adicionando segredo. O mesmo. Deve ser também as mesmas letras maiúsculas ou letras pequenas porque é sensível a maiúsculas e minúsculas. E nós teremos aqui o segredo ou você pode usar outro segredo. Então, quando eu implantar meu aplicativo, em seguida, ele vai procurar por processo. Mas nosso erro local não é implantado porque nós temos isso no bom ignorar. Portanto, não estará no servidor para que Heroku não saiba do trabalho para obtê-lo. Ele irá para os vars de conflito e depois lerá esses valores. Então, neste caso, temos banco de dados diferente da produção e um banco de dados para o desenvolvimento local. Na próxima palestra, vamos ver como podemos usar isso e como podemos implantar o aplicativo para o servidor. 193. Implemente o aplicativo e teste: Agora vamos voltar às instruções de implantação do aplicativo. Então, aqui se formos para o aplicativo novamente e clicamos em Implantar, e veremos novamente nossas instruções. Então já fizemos essa conexão e temos implantado ou fazer o link entre o aplicativo e o repositório Git do Heroku. Agora vamos executar esses comentários. Primeiro de tudo, precisamos adicionar o código para o bem, então precisamos cometê-lo. Então, se você não sabe o que é, É como se você estivesse dando informações sobre, como o código que você está enviando para o seu repositório. Então, quando eu mudar, então eu digo, ok, eu mudei este, eu removo aquilo. Então eu diria na mensagem de commit que remover o manipulador de erros. Então, dessa forma, você mantém o controle sobre suas mudanças no projeto. Então aqui podemos fazer isso também com Heroku. Então temos que fazer git add dot e, em seguida, git commit dash am, torná-lo melhor ou qualquer mensagem. Então, primeiro de tudo, vamos fazer o bem. Isso significa que estamos adicionando todos os arquivos do projeto para o repositório Git para prepará-los para upload para o servidor. E depois disso, temos que fazer o git commit e, em seguida, traço m. E então você pode especificar uma mensagem. Então, por exemplo, implantar primeiro, morrer. Então nós também podemos adicionar esta mensagem de commit. Depois disso, precisamos empurrar o código para o cetera. Nós somos como fazemos isso com este mestre heroku comum. Então eu vou para o terminal e, em seguida, colar este comando aqui. E então ele vai carregar todas as informações ou todo o código que eu especifiquei, exceto os arquivos ou os arquivos e pastas que eu especifiquei no git ignorar. Então, nesse caso, teremos todos os nossos arquivos de desenvolvimento lá. Então, como você vê aqui, é dardo, fazer implantar o aplicativo, os arquivos terminados, ele, começar a construí-lo. E agora ele está mostrando todo o progresso da instalação de bibliotecas. Ele também instala o npm para instalação os pacotes que usamos para a nossa aplicação. E então ele terá módulos Node, mas no servidor, não este. Então, depois disso, ele irá comprimir o aplicativo para uso mais rápido. E você também tem que se lembrar de carregar as imagens que estão na pasta de upload para que possamos ver as imagens também no, no servidor. Caso contrário, se você não tem as imagens que eu anexei para você também, porque elas estão no banco de dados também, os links para essas mensagens ou imagens. Você precisa carregá-los também para o seu servidor. Assim que a implantação terminou, verificando implantação, feito. Ok, vamos voltar para o navegador e ir para o aplicativo e atualizar aqui. - Legal. Temos uma mensagem, o usuário não está autorizado. Isso é ótimo porque, se você se lembrar, nós autorizamos nossa API. Então, se você se lembra nas rotas ou nos ajudantes, dissemos JWT que vamos excluir algumas rotas da autenticação, por exemplo, na obtenção de um produto ou obtenção de uma categoria. Então, vamos tentar obter um produto no navegador. Então eu vou dizer aqui exatamente se você se lembra de como estávamos fazendo com host local e 3000 e, em seguida, eu coloquei API v1, e então eu coloquei produtos por exemplo. Então isso é como um pedido get quando você tenta, Ok, nós temos todos os dados do nosso banco de dados. Você não pode tentar isso tão bem quanto Carteiro, se você se lembra, nós estávamos trabalhando muito com o carteiro e nós estávamos tentando nossa API no Postman. Então, aqui vou abrir uma nova guia para um novo pedido GET e, em seguida, vou colocar este link. Então, o link do meu aplicativo API, produto v1. Então vai ser exatamente como eu estou fazendo isso como de anfitrião local. Então você vê que todas essas informações são armazenadas e estamos usando o banco de dados de produção. Não estamos usando o banco de dados que tínhamos para local. Então, para provar isso, Vamos fazer uma mudança no banco de dados usando bússola. Então eu vou para o meu aplicativo, eu vou para o banco de dados de produção. Vou clicar sobre isso e vou abrir os produtos. E eu vou para aquele em que começa com, eu me lembro como mol, algo assim. Então aqui o pequeno, você vê aqui o pequeno e este é. Então vamos mudar isso. Podemos dizer para mudar esta frase. Vamos para o, então clicamos no pequeno aqui e podemos dizer, por exemplo, no exterior. Então podemos fazer isso maior e dizer produção. Então não podemos adicionar esta palavra produção aqui. Então, depois de atualizarmos, e então vamos para o Postman, e então clicamos em Enviar. Certo, temos aqui produção. Então, esta é a prova de que eu estou usando o banco de dados amplo, mas no meu host local, Vamos tentar executar o aplicativo no local. Então podemos dizer npm começar como estávamos executando o aplicativo localmente, ok, O localhost 3000, tudo está bem. Agora vamos para a solicitação GET, mas no host local. Então nós temos aqui, por exemplo, localhost 3000 produtos API. E então se o chamarmos, veremos que estamos chamando o banco de dados, que está no host local. E se verificarmos, este banco de dados, eu vou aqui. E vou verificar esta edição da base de dados. Vá para os produtos. Terei um monte de produtos fictícios que estávamos usando durante o desenvolvimento. Então, nesse caso, estamos diferenciando cada vez que eu implantado para a minha coisa polegar aplicativo, você pode então ele vai usar um banco de dados de sua produção. Por exemplo, vou mudar algo aqui. Vou adicionar um registo da consola. Que exemplo de log do console. Como usar, estamos usando. Por exemplo, você pode colocar adicional e, em seguida, você pode usar o nome do banco de dados aqui. Então, quando eu salvar, ok, no meu local, eu vou dizer que estamos usando o banco de dados de e-shop, mas precisamos implantar isso. Então aqui, nosso host local, local, temos banco de dados de e-shop, como sabemos para desenvolvimento. Mas se implantarmos isso, obteríamos, estamos usando a questão do banco de dados trouxe chá ou produto. Então, desta forma, como podemos empurrar mudanças, novamente, precisamos colocar git add e, em seguida, adicionar uma mensagem. Então, por exemplo, comentários, podemos dizer mudança, e então pressionamos enter, e então usamos novamente push comum. Então git, empurre heroku mestre, ele será implantado novamente. Então, como você vê aqui, ele está implantando novamente. O mesmo processo que vimos no primeiro passo. Agora está concluída a implantação. Como podemos ver que, por exemplo, esta mensagem que estamos usando, como o banco de dados, você, Quero dizer, como podemos ver o log do console ou os erros que vemos no desenvolvimento. Para ver que você pode ir fácil Dois mais aqui, e você pode verificar aqui uma exibição logs. Então, quando você clicar nele, você verá todos os logs como você está desenvolvendo localmente. Então dizemos aqui, estamos usando banco de dados e-shop no exterior. Então essa coisa muito grande e exatamente como estávamos tendo o aplicativo no local e também, ele vai fazer como monitoramento para a nossa API. Então, quando eu chamo essa API, então eu vou para os logs. Vou ver que, ok, temos informações Obter produtos API v1 e algumas outras informações sobre a solicitação e devolução e quanto tempo levou. Mas se formos ao banco de dados, precisamos, por exemplo, verificar uma imagem. Então eu vou aqui e eu vou para o banco de dados e eu tenho produtos. Teremos um problema com as imagens. Então, se você se lembra, nós carregamos algumas imagens com o nosso e-sharp. Então, quando eu for aqui, eu vou ver que no produto, eles ainda têm este localhost 3000. Infelizmente, isso não é possível substituí-lo. Então você precisa substituir todas as cadeias de caracteres que estão relacionadas com o host local. Você precisa substituí-los anualmente pelo link que é fornecido para o seu aplicativo. Então, nesse caso, eu vou aqui para a minha aplicação e, em seguida, copiar esta parte que é daqui para.com. Então eu vou copiar tudo isso. E então eu vou para o campus novamente e substituir de HTTP para localhost. Além disso, a porta não é necessária e, em seguida, vou adicionar atualização ou atualizar esta parte aqui. Então, clicamos em Atualizar e, em seguida, ele será atualizado. Então, quando eu vou agora para o aplicativo e colar o URL da imagem, então eu serei capaz de ver a imagem com sucesso. Caso contrário, todas as imagens, infelizmente, eles ainda estão no localhost 3000. Então, para isso, com base em seu nome de seu aplicativo, você precisa substituir tudo isso para o banco de dados. Claro, depois de usarmos este banco de dados, por exemplo, em algum front-end ou quando estamos, você vai usar o Postman, por exemplo, quando eu vou postar um produto usando este URL API, ele irá carregar a imagem baseada nesse URL, então ele será armazenado no banco de dados assim. Mas como estávamos usando esse banco de dados em desenvolvimento, você precisa fazer isso manualmente. Porque também, estávamos usando quando estamos publicando um produto. Se você se lembrar, se formos para postar o produto e no produto pós estávamos fazendo como a imagem usando o host. Eu recebo o host atual e, em seguida, colocar o resto aqui para armazenar o caminho da imagem. Assim, o host será retirado do host que você está usando e chamando a API de. Então, nesse caso, você não precisa se preocupar com os links que queremos enviar para os arquivos enviados. Então agora temos uma API totalmente funcional no servidor. O aplicativo foi implantado. Claro, se você quiser remover este Heroku.com e criar seu próprio domínio, não é de graça. Você tem que pagar por isso. E, claro, você pode tê-lo sob seu próprio domínio. Então, no aplicativo front-end ou em qualquer aplicativo front-end, quando você estiver indo para implantar seu aplicativo front-end, não sua API Web. Você pode dizer que para o meu aplicativo no front-end em produção, use este URL API para todos como o aplicativo. E então, quando seu aplicativo foi implantado, ele se conectará a essa API e capturará os dados de lá. 194. Como preparar Git e páginas de Git: Quando estamos implantando o backend, Eu disse para instalar o aplicativo, que é chamado GitHub Desktop. Vou colocar novamente o link com esta palestra para ver onde a instalação desta aplicação. Github está fornecendo com muito grande ferramenta para a implantação de aplicativos, que eles estão contendo JavaScript, CSS e HTML. E você pode implantar seus aplicativos lá e vê-los no navegador. Então você pode ter um domínio e, em seguida, você pode ver seu aplicativo publicado no navegador. Então nós estamos indo neste curso para mostrar como podemos implantar o aplicativo para GitHub Pages. E se você quiser ver outras maneiras, como se você quiser ver como podemos implantar isso via FTP em nosso próprio domínio. Além disso, posso fazer um vídeo no curso. Me dê uma mensagem se quiser que eu faça isso. Então, primeiro de tudo, vamos ter esta publicação do GitHub Pages. Então, para isso, precisamos conectar nosso repositório atual, nosso projeto atual que criamos com Git, aplicativo desktop GitHub para conectar ao seu repositório. Porque vamos criar repositório em nossa conta GitHub. Então, primeiro de tudo, você precisa fazer clone um repositório da internet. Portanto, este irá pedir-lhe para atribuir à sua conta no seu GitHub. Então, para fazer isso, você só precisa clicar em Entrar. E então ele pedirá que você abra o navegador onde você já entrou no GitHub no navegador. Então, quando você clicar em continuar como um navegador, e, em seguida, ele vai aparecer para mim abrir aplicativo GitHub Desktop. E, em seguida, quando você clicar em Abrir aplicativo GitHub Desktop, eu estarei conectado aos meus repositórios, que eu estou entrando no navegador. E então eu vou tê-los aqui para que eu possa cloná-los ou fazer qualquer coisa com eles. Mas quando você cria um projeto de Angular com NX, o projeto vem por padrão. Como você vê aqui estão os arquivos de projeto que estávamos trabalhando como aqui, Apps, lábios ou tudo isso. E temos aqui as aplicações. Como você vê, nós temos um arquivo dot git e esta pasta dot get, desculpe, nós temos que removê-lo porque ele está conectado a outro repositório que é criado por um X. Até agora é melhor mover esta pasta. E também isso para eu quero mencionar que esta pasta pode ser escondida no sistema Mac por padrão. Então o que você precisa fazer é apenas pressionar Command e Shift e ponto, e então ele lhe dará a capacidade de vê-los. Então eu vou ver o Comando Shift e ponto, e como você vê aqui, eu estou mostrando e escondendo eles. No Windows. Você verá a pasta limpa e você a verá, e poderá excluí-la diretamente. Mas para a segurança está ligada, Mac está escondendo os arquivos que estão começando com um ponto. Então vamos excluir a pasta dot get, que já é criada por um x. e eu vou clicar em Mover para ganhar. Claro, se você estiver conectado, seu projeto estará conectado a algum repositório. Você não precisa fazer esta etapa e não precisa removê-la dos arquivos. Agora vamos voltar para o aplicativo de desktop GitHub para criar um novo repositório, mas a partir do disco rígido. Então o que eu tenho que fazer aqui é apenas criar um novo repositório. E então eu vou dar-lhe um nome com o mesmo nome da pasta onde a fonte de código está lá. Então, se eu for aqui um nível acima, eu vejo que eu tenho aqui pedaços azuis. E em pedaços azuis eu tenho os arquivos fonte que eu trabalhei e criei com n-x para criar meu aplicativo Angular. Até agora que subimos um nível, como na maneira que vemos a pasta de sua fonte. E então clicamos em abrir. E então aqui temos que colocar o mesmo nome da pasta, que contém o código-fonte. Então, no meu caso aqui, vou dizer um bits azuis e, em seguida, eu vou clicar em criar um repositório. Então, nesse caso, eu terei o repositório existente, que eu já tenho. E ele será inicializado com uma pasta GitHub ou GitHub. Então, como você vê aqui, temos a pasta Git está de volta, mas inicializado localmente. Ainda não o conectamos ao nosso repositório no GitHub. Então, como podemos conectar isso ao nosso repositório do GitHub? Primeiro de tudo, você precisa clicar neste botão. Você diz Publicar repositório. Claro, você já está logado em sua conta no GitHub, no GitHub desktop. E também, vamos criar um repositório para isso. Então, primeiro de tudo, você precisa dar um nome. Então não é necessário aqui você tem liberdade para dar o nome que você quer. Por exemplo, eu criaria e-shop lá assim. E, em seguida, é sempre quando você quer usar páginas do GitHub, você não deve manter este código privado. Você tem que torná-lo público. Para que seja privado. E com as páginas do GitHub, você tem que pagar. Mas para isso, é de graça. Você pode apenas torná-lo como um público e, em seguida, você clicar em Publicar repositório. Então, nesse caso, depois de ter certeza de que a pasta ponto get é voltou, É como X criado aqui, não aqui. Então você precisa saber que ele está realmente dentro do código-fonte do seu aplicativo. Então você precisa ter este ponto get pasta antes de criar um repositório. Ok, eu vou para minha conta do GitHub para ter certeza de que, se for realmente, o repositório é criado. Então, como você vê aqui, se eu for para repositórios, eu tenho meu repositório que é criado aqui, inicializado com as coisas que eu tenho por padrão criado por uma documentação x. Então, como você vê aqui, nós temos todos os arquivos e os arquivos fonte aqui. Ok, então o que precisamos fazer em seguida é construir o aplicativo e, em seguida, publicá-lo no GitHub Pages. E isso, o que vamos ver na próxima palestra. Por enquanto, estamos prontos. Nós só precisamos publicar a compilação dos aplicativos como o motor shop e o administrador para nossas páginas GitHub. 195. Como criar aplicativos Frontend: Ok, agora nós publicamos nosso repositório no GitHub. Agora precisamos construir o aplicativo e será, ou seremos capazes de ver as mudanças e podemos acessar o site da nossa edição. Então, desta forma, temos que ir para esse código. E se você se lembra, estávamos abrindo o projeto, que é o projeto front-end. E como você vê, nós vamos aqui para a raiz. Não temos que fazer nada. Vamos fechar todo o comando ou os terminais que não são necessários. Agora abrimos um novo terminal. Novamente, o Build significa que eu quero criar meu aplicativo. Eu não tenho que carregar todos esses arquivos. Eu quero que os arquivos que angulares me dão para ser publicáveis e eles podem ser usados na produção. Então eu não tenho que carregar todos esses arquivos de origem, arquivos e ver como meu aplicativo está funcionando lá. Caso contrário, estou carregando os arquivos fonte. Não, angular tem uma propriedade que está lhe dando a capacidade de construir o aplicativo que irá comprimir todos os arquivos. Em alguns poucos arquivos, seu projeto, todos eles estarão nesses arquivos como veremos mais tarde. Então, se formos para o pacote JSON, vamos ver no script vários scripts. Então, como você vê que temos script de construção, que está dizendo mg construído. Mas se você se lembra, dissemos que Angular ou NX é construído sobre angular de alguma forma. Então você pode fazer os mesmos comentários com um x, como o mesmo que você faz com energia ou comentários angulares. Até agora que a construção de qualquer aplicativo, se você tiver um instalado, você só diz construir NX e, em seguida, você especificar o aplicativo que você deseja usar. Exemplo, eu quero administrador ou eu quero e você comprar por agora. Eu quero n G-sharp. Então não podemos dizer construir Angie, fazer compras assim. Então, quando você pressiona Enter, o aplicativo será cobrado e ele será especificado em alguma pasta é chamado o Leste. Então, nesta pasta dist, nos aplicativos, você verá seu aplicativo aqui. Então, como você vê que a compilação terminou e nós temos apenas alguns arquivos na pasta dist. Então não temos todo o código-fonte do projeto e esta pasta que vamos carregar para o nosso GitHub. Ou você pode carregá-lo para o seu servidor. Então ele pode ser visto. Ou você pode ver o aplicativo que já estávamos construindo e você pode navegar no site, em público. Mas se queremos implantar este projeto no GitHub Pages, GitHub Pages tem algumas condições que temos que seguir. Em primeiro lugar, fazemos a mesma coisa. Nós fazemos NX construir qualquer loja, mas precisamos especificar alguma pasta que é chamado banho de saída. E aqui nós neste caminho de saída, você especifica algum caminho específico que o GitHub gosta, que é chamado docs. E, em seguida, há uma palavra-chave que é chamado Bayes HRF. E aqui nós especificamos HRF ou o link que será gerado no arquivo de índice, como você vê aqui. Porque aqui ele vai dizer base H ref é barra. Mas precisamos que nossa base HRF seja o mesmo nome do projeto que criamos no GitHub, o mesmo nome do repositório. Se você se lembra, eu tenho o nome do repositório que é chamado de e-shop. Então temos que colocar o mesmo nome porque o GitHub não vê nenhum outro nome, apenas o nome do repositório. Então temos que dizer aqui, Slash, é muito importante colocar slash. Não se esqueça disso. Você tem que dizer e-shop, o mesmo nome exatamente do repositório e, em seguida, outra barra. Então, nesse caso, vamos construir nossa aplicação sob essas condições. Então vamos pressionar Enter e ver o que ele vai construir. Legal, essa construção terminou. Mas, claro, não na pasta dist, será nessa pasta docs, como você vê aqui, Tooele ser exatamente a mesma compilação que temos na pasta dist, mas será em outra pasta também. E a base H ref será E sharp como especificado no comentário. Então essas são as condições básicas que você tem que fazer para criar seu aplicativo. Claro que não terminamos. Estamos construindo agora o ambiente de desenvolvimento. Não estamos construindo a produção deles. Mas eu só quero mostrar passo a passo para ser claro para você cada vez mais. Na próxima palestra, veremos como construir ou implantar todo esse projeto ou esses arquivos para poder navegar no site que criamos para N D sharp. 196. Como implementar aplicativos Frontend para páginas github.: Ok, agora depois disso, criamos a implantação na pasta cães e vamos implantar isso para o servidor, muitas vezes páginas do GitHub. Então, como podemos fazer isso? Primeiro de tudo, vou para o GitHub Desktop. Novamente, como você vê aqui, temos vários arquivos criados recentemente. É melhor sempre criar uma nova ramificação no GitHub, que será como o nome da ramificação onde você sempre implantará seu aplicativo no GitHub Pages. Então podemos dizer isso. Brian pode ser GH e então podemos dizer páginas como esta. E então criamos uma nova filial. E então clicamos em criar uma ramificação. Então trocamos essa marca. Mas aqui temos que dizer trazer minhas alterações para GitHub Pages porque nós criamos esta compilação. Então também precisamos mover esses arquivos, os novos arquivos, como você vê aqui, todos eles em você. Precisamos movê-los também. Então você ramifica. Então eu digo piscar minhas alterações nas páginas. Então, quando podemos ir e clicar Switch branch, eles serão todos movidos para cá. Depois disso, a etapa é publicar a ramificação. Temos que colocar este ramo na página do GitHub e também para o nosso repositório do GitHub. Então agora tudo é publicado. Mas primeiro precisamos enviar esta mensagem. Então precisamos comentar esses arquivos também. Precisamos dizer que, ok, esses arquivos são novos. Precisamos comprometê-los e empurrá-los para o servidor. Então temos que dizer ao GitHub. Então, para isso, podemos criar uma mensagem. Podemos dizer GitHub Páginas, prever urso, por exemplo. E então nós colocamos todos aqueles que podemos dizer cometer devido ao ramo GH Páginas. Está comprometido. E então precisamos empurrar de novo. Por isso, empurramos novamente as nossas mudanças que criámos aqui. Agora não temos nenhuma alteração no arquivo. Vamos voltar à nossa página do GitHub. E eu vou para o repositório que eu criei, que é chamado de E afiado. Então lembre-se que você vai para o mesmo repositório e depois disso, vamos para Configurações, que está localizado aqui dentro do repositório. E então clicamos em Configurações e respondemos as coisas. Você vai ver como várias opções. Uma delas é páginas. E por padrão, o aplicativo será publicado lama na pasta raiz, precisamos dar a pasta específica. Precisamos dar os arquivos que criamos pela compilação, que estão dentro de documentos. Não precisamos construir tudo isso. Isso é errado porque não funciona. Mas para isso, precisamos especificar uma pasta. Eu só vou dar um idiota. Ele aparecerá aqui. Então eu vou dizer me dê a pasta docs e, em seguida, Salvar. E como você vê, diz que seu lado foi publicado neste link. Quando você clica neste link, veremos que temos alguma página padrão, que era o Leia-me. Leva algum tempo porque precisamos esperar algum tempo quando você está alternando entre as pastas. Então você tem que esperar um pouco até que ele seja implantado. Então, depois de algum tempo, ele será implantado. E também, você pode verificar esse domínio. Então, como você vê aqui, ele foi implantado. Tão legal. Então temos toda esta ligação e temos o nosso fim. Você faz compras aqui. Mas há um problema que não há dados. Não há conexão com o banco de dados. E se você verificar aqui, o console dentro, teríamos muitos erros. Quais são esses erros? Isso quer dizer que localhost 3000. Então ainda estamos no anfitrião local. O back-end, ele ainda está se conectando ao host local, pedindo categorias e pedindo produtos. Então precisamos mudar esse link, localhost 3000 para nosso aplicativo Heroku, que criamos. E esta aplicação será E-sharp volta e bits azuis Heroku app. E aqui podemos acessar as APIs como vimos na compilação do back-end. Então, como podemos consertar isso. Então, como você vê aqui que ele está dizendo que seu site é publicado. Então sempre quando você faz algumas mudanças, você precisa esperar um pouco até ver as mudanças que são publicadas aqui. Então leva um pouco de tempo. Então, agora, depois de publicarmos, precisamos mudar esse link. Então, se você se lembra, na aplicação quando estávamos criando o aplicativo, tínhamos ambientes pasta. E eu disse que temos dois tipos de ambientes onde vamos usar. Um é para produção, e aqui estávamos colocando nosso URL API e outro para desenvolvimento local. E colocamos quatro nesse tempo para ambos, o mesmo, apenas no caso de construirmos a produção. Mas agora chegamos àquele momento. Precisamos substituir. O link que é criado para o host local aqui. Mas no arquivo ambiental, precisamos mudá-lo para nosso link Heroku. Então, aqui vou substituir http localhost 3000 com o link que eu tinha do aplicativo Heroku. Então vamos ter este e esta será a minha produção. Então, quando salvarmos isso, ele será salvo para todos os nossos aplicativos. Precisamos construir o projeto novamente. Mas aqui, depois de construir o projeto novamente, precisamos usar uma bandeira que é chamada ampla. Como construir, ação ampla. Preciso da produção além. Eu não quero a construção normal, o desenvolvimento além, porque aqui temos aço, o desenvolvimento construído. Não temos a produção. Como vê, temos aqui desfazer nele. E todo o código-fonte está disponível aqui porque isso é desenvolvimento, compilação não é produção. E o tamanho do pacote é muito grande porque não está comprimido. Então essa produção é cultivada osso pressionando para mim todos os arquivos. E será minificado e será mais rápido, especialmente para conexões de internet fracas. Então, para isso, precisamos sinalizar nosso comando aqui com uma mulher, não precisamos usar um expulso em um trabalho. Apenas o que precisamos também para sinalizá-lo com o exterior. É exatamente o mesmo comentário. Então, depois disso, executamos o comando. E como você vê que o NX começa a executar qualquer produção de construção de loja. Você vê que o Gorman mudou. Temos agora a produção e vai usar o ambiente, os arquivos. Então agora nossa construção está feita. E como você vê aqui, se formos a documentos, temos novos arquivos e eles são sempre alguns hash para evitar seu dinheiro. E também, temos o índice HTML foi atualizado e também os arquivos anteriores onde ele foi excluído. Então, para isso, precisamos empurrar esses arquivos. Então vamos novamente para o nosso GitHub Desktop depois que fizemos todas essas alterações. E então, como você vê, há várias mudanças feitas. Alguns arquivos foram excluídos, que são da compilação antiga, e nós criamos um novo arquivo. Então precisamos criar uma nova mensagem. Podemos dar-lhe um nome como mudança para a construção de produção. Então, neste caso, teremos a mudança para a produção construir e nós empurrá-lo para GH Pages, e então nós empurramos esse código aqui. Às vezes você recebe essa mensagem que você precisa buscar. O controle remoto muda. Então você só diz puxar de novo e então você pode apenas empurrar de novo. Então, porque às vezes o GitHub está adicionando algumas variáveis ou alguns arquivos com base na compilação com o GitHub Pages. Então, depois disso, temos implantado tudo. Vamos novamente para nossas páginas do GitHub e atualizamos. Precisamos esperar um pouco porque aqui está dizendo que seu site está pronto para ser publicado. Temos que esperar um pouco até que seja publicado no domínio aqui. Aqui diz que meu site foi publicado. Então eu vou de novo à nossa loja de doces, refrescar-me. Certo, ainda temos esse problema. Nós ainda não vemos nem os arquivos foram publicados como você vê aqui na fonte, nós ainda temos esse problema. Portanto, precisamos de alguma forma resolver este problema. Então, como você vê, se você se lembra que estávamos usando em Angular arquivo decente para cada projeto, por exemplo, eu tenho aplicação Admin. Eu estava vendo quando você quer construir o aplicativo apenas para substituir os arquivos que são chamados ambiente Ts com ambiente amplo dot ds, UC. Estamos substituindo esses arquivos. E esses arquivos, se você se lembra, nós os editamos. Uma é para a produção e outra para o desenvolvimento. Mas o caso aconteceu apenas para o aplicativo de administração. Precisamos também de fazer o mesmo para a aplicação da loja NG. Então eu preciso ir e você comprar um formulário. Vou rolar até aqui. Temos aplicação nítida N D. E, em seguida, ele ainda está usando a configuração antiga porque nós não atualizá-los. Então eu cometi este erro por, de propósito apenas para mostrar que se você não tem porque eu tenho um monte de perguntas sobre isso anteriormente. Então você apenas tenha certeza de que você está substituindo este, o antigo. Se você voltar para a palestra de variáveis de ambiente, você precisa ter certeza de que você também não está usando o ambiente específico do aplicativo, mas você usa aquele que é público e compartilhado. Então temos este aqui. E então precisamos executar o comentário de compilação novamente. Por isso, temos de ter cuidado para que tenhamos de ter isto como no estrangeiro e depois fazer o comentário da produção. Então aqui eles são construídos acabados. Mais uma vez, precisamos cometer as mudanças, que não temos nenhuma outra vez. Tão proporcionado que, precisamos, novamente, temos que fazer uma mensagem de confirmação. Podemos dizer mudar arquivos, então podemos dizer aqui. E então nos comprometemos com o GitHub Pages. Nós empurramos, e temos que esperar novamente pela implantação de nosso aplicativo. Então, quando eu vou para GitHub Pages, atualizar e eu vou ver que ele vai ser construído. Ele mudará isso para verde quando a compilação estiver pronta. Ok, como você vê aqui, o aplicativo foi implantado. Vamos voltar ao link da nossa loja ND online nas páginas do GitHub. Nós atualizamos, vemos que não recebemos nenhum erro. Finalmente, então vamos aqui, fechamos o console, e aqui está o nosso aplicativo. Então, se formos novamente para o back-end ou para sua rede novamente e atualizar, veremos que nossa rede está pedindo a partir daqui ou resfriando. Então temos aqui a coisa do Heroku. Então, a partir dessa API, estamos consumindo nossos dados. Então é assim que é muito bom. Agora, temos todo o aplicativo está funcionando. Tenho Adicionar ao carrinho, Adicionar ao carrinho. Vou para o meu carrinho. E como você vê, a velocidade é muito grande. É como se eu estivesse executando o projeto no local. É muito rápido e consumindo muito bom e formando muito bom. Assim, desta forma, nós construímos o aplicativo para páginas do GitHub para que você possa enviar este link para qualquer pessoa que você deseja visitar para sua aplicação. Então a questão é, eu também quero construir o aplicativo Admin, como eu posso construí-lo. Então, precisamos construir a aplicação da loja NDI e também a aplicação do painel de administração, que criamos anteriormente. Infelizmente, esse GitHub Pages está vinculado apenas a um repositório. Então nós podemos, não podemos criar aqui várias páginas em um repositório. Então, para isso, você precisa criar outro repositório, que você pode chamá-lo de administrador e-sharp. E nesse caso, você pode implantar suas alterações lá. Ou você pode gerenciar sua implantação de uma forma que o GitHub vai usar os buffers que são implantados do seu ambiente. Você não precisa implantar todo o código, todo o código-fonte. Você pode simplesmente empurrar o código que é gerado por cães. E isso, o que podemos ver na próxima palestra, eu vou fazer isso na sua frente rapidamente. 197. Como criar vários aplicativos e criar scripts: Ok, nesta palestra vamos fazer um projeto de lei para várias aplicações. Então, se você quiser primeiro que você não precisa carregar seu código-fonte para o GitHub. Você só pode carregar a compilação, produção de sua pasta de projeto que, como eu disse, vamos criar dois repositórios para um é ND shop e outro para o aplicativo do painel de administração. Então, mas primeiro, precisamos especificar um caminho que não está dentro do repositório que eu criei dentro do nosso, como o nosso código-fonte, estamos fazendo isso fora do nosso código-fonte. Então, podemos especificar o caminho no comentário como este. Podemos subir um passo assim. Então, podemos dizer sair da pasta atual, que agora é bits azuis, que organização o arquivo de origem e criar um aplicativo que é chamado loja NG, por exemplo. Então podemos criar este como N G afiado. E podemos banho base, que também pode ser loja NG. Então, nesse caso, temos que ter certeza de criar um repositório exatamente com esse nome. Lembra-se disso? Então, pressionamos Enter e nosso aplicativo vai construir a si mesmo até o acabamento da construção. Você vê aqui que eu estou dentro da pasta da minha organização. Então eu preciso ir um passo para cima. Como fora do nosso repositório, você não precisa colocá-lo dentro do mesmo repositório. Então, depois que a lei foi concluída, nós também precisamos ir para nossas pastas aqui como vemos, e dar um passo para cima. E veremos que temos N D afiado aqui. Então eu tenho agora minhas produções de arquivos estão aqui. Então, não preciso que enviemos o código-fonte. Então este será, vai criar um repositório para ele. Então, podemos usar o GitHub Pages para implantar este. Então, como podemos fazer isso? Mais uma vez, faremos os mesmos passos que fizemos anteriormente. Nós não vamos usar este repositório, mas vamos usar um novo. Vamos dizer criar um novo repositório. Então, clicamos em criar um novo repositório. E este nome do repositório será exatamente o mesmo nome da nossa pasta. Então nós temos aqui N D afiado, como eu disse anteriormente, e onde nós temos que escolher o caminho, ele será exatamente na mesma rota aqui. Então, em um passo acima do nosso arquivo fonte onde ele é implantado para que eu não possa ver a pasta. Eu não entro lá dentro. Não, eu não consigo ver a pasta em si aqui. Então, clique em Abrir, mesmo nome aqui, clique em Criar Repositório. E nesse caso, teremos nosso repositório criado. E então nós só precisamos dizer Publicar repositório. Mantemos o mesmo nome. E também, dizemos Publish repositório, mas precisamos torná-lo público. Nesse caso, mostrarei que se eu for agora para minha conta do GitHub, não terei o código-fonte nessa categoria. Então eu posso manter meu código anterior da fonte como este que nós criamos para o e-shop. Podemos manter este como privado. Você não tem que colocá-lo em público, mas um novo repositório que é criado, como você vê aqui nós vamos para repositórios. E então eu vou ter N D afiado aqui. Então, como vê, só tenho esses arquivos fonte aqui. Não sinto muito, os arquivos de produção. Não teremos o código-fonte aqui e é público. Então eu não me importo porque eles são hash e eles são minimizados como você vê aqui, que não é fácil para o normal ou os usuários para buscar o meu código-fonte novamente. Então, desta forma, eu vou para a sessão e depois vou para as páginas. E então vamos dizer que a fonte será como Diretório, você pode dizer principal, e depois a própria raiz. Então você não precisa usar a pasta docs, você pode dizer rota porque nós construímos diretamente na raiz desse projeto. Então você só precisa especificar o caminho e também o ramo. Então eu mantenho no ramo principal porque temos apenas uma marca, é claro que você pode criar outra planta, mas neste caso não precisamos porque temos apenas os arquivos de produção. E depois disso, esperamos até que seu site seja publicado. Nós dizemos, ok, seu site está publicado. Eu vou novamente aqui para o site e eu vou vê-lo produzido anteriormente. E aqui o caminho que é loja ND. Então eu posso voltar para o nosso repositório, que eu tinha para o final você compra e eu posso fechá-lo, eu posso torná-lo privado. Então temos sódio para o teste anterior que fizemos antes. Então, o E afiado, eu vou torná-lo como um privado para que você não pode ir novamente para Configurações. Você pode dizer que aqui segurança ou gerenciar o acesso. E então você coloca sua senha novamente. Tenho aqui confirmar a senha. E então eu vou mudar o repositório de acesso para não ser público, mas eu quero colocá-lo como um privado. Vou aqui mudar a visibilidade do repositório. Vou colocá-lo como um soldado. E então eu entendo essa mudança. Só copiamos esta parte. Então, nesse caso, ninguém vai ver o meu Por exemplo, o código-fonte, porque eu já tenho repositório para o público ou o código de produção que é publicado para páginas publicadas ou GitHub. Então vamos fazer o mesmo novamente para o aplicativo de administração. Então, primeiro de tudo, precisamos usar novamente o mesmo comentário, mas não com loja NDI. Nós vamos fazer isso com o aplicativo Admin. Mas deixa-me mostrar-te um truque. Não é necessariamente sempre fazer esse comando. Sempre, sempre. Podemos fazer um peso como podemos salvar este comentário no pacote JSON dentro do meu projeto. Como se pudéssemos criar uma nova compilação para aqui. Então podemos dizer, por exemplo, eu crio um novo script no pacote JSON. Eu digo, por exemplo, construir ampla, por exemplo, dessa forma, como admin. Então, podemos dizer painel de administração, aplicativo painel de administração. E o comentário para isso será exatamente o comentário que usamos aqui. Mas precisamos substituir isso com admin e também aqui com admin. E eu digo que o NX crie o aplicativo Admin, não o produto ou o aplicativo. O mesmo que podemos fazer para o nosso M construído a partir de uma loja N D em si. Então você não precisa salvar esse comentário de alguma forma. Você pode apenas dizer, trouxe construir um administrador orgulhoso todo barba no exterior. A aplicação que é N G afiada, por exemplo. Então, nesse caso, você não tem que escrever todas essas linhas não são um comentário. Então resolvemos isso. Escolhemos aqui outra vírgula. Nós salvamos tudo. E agora eu vou executar o comando que eu tenho para como a produção construída para o administrador. Então, como podemos fazer isso? Eu só digo npm executar e eu especificar o comando que eu quero executar. Eu vou dizer construir, mas estranho. E, em seguida, administrador. E então vamos ver que ele vai executar este comentário, que é tão bom para mim. Então, depois disso, o aplicativo foi construído, mas o administrador. Então vamos novamente para a nossa área de trabalho do GitHub e criar um novo repositório. Os mesmos passos que fizemos com a loja NDI. Então eu vou aqui. Vou ver todos os meus repositórios. Este contém o meu código fonte, isto contém a loja NG, mas a conta de produção. E eu vou adicionar outro para a compilação de produção do administrador. Então aqui temos que criar outro nome, admin, exatamente os mesmos nomes, como nós os construímos anteriormente. Verifique o caminho. Acho que já foi construído. Temos aqui a compilação do administrador. E novamente, vamos criar o repositório. E vemos que nosso repositório foi criado. Publicamos o repositório e, em seguida, precisamos torná-lo público. Não temos de o manter como privado. Então, criamos ou publicamos o repositório que queremos. E então vamos para nossa conta do GitHub e vamos para nossos repositórios. Vamos ver o repositório admin novamente aqui. Então eu vou clicar nele. Vou fazer com que seja construído para isso. Eu vou para as configurações, eu vou para as páginas. E, em seguida, nas páginas, escolherei o ramo principal e, em seguida, a pasta raiz. E então eu vou clicar em Salvar. Depois disso, o site está se preparando para ser construído. E então vamos verificá-lo no aplicativo de administração quando ele ficar pronto. Então, o site é publicado neste link, clicamos nele. Certo, temos o administrador e está tudo bem. Vamos tentar fazer login. Terei aqui as minhas credenciais. Então temos aqui minha senha, eu clico em Enviar. Bom, eu tenho aqui o administrador, exatamente como temos em nossa aplicação quando estávamos desenvolvendo. E tudo está funcionando perfeitamente e sem problemas. Então isso é tudo sobre a construção de produção. Se você quiser que eu faça para você o aplicativo para executar no servidor personalizado usando FTP. Acho que isso vai ser fácil para você. Se você quiser que eu faça um vídeo, você pode me enviar uma mensagem ou você pode adicionar alguma pergunta em QA. E eu vou adicionar um vídeo para o upload de FTP para que você possa ver como podemos construir nosso aplicativo em um servidor personalizado, não em GitHub Pages. Eu também vou anexar este pacote de arquivos JSON, como ele foi atualizado com esses comentários. Então você pode usar esses comentários também para criar seu aplicativo.