Construir clone de Trello Fullstack: WebSocket, Socket IO

1. Apresentação: Bem-vindo ao meu curso full stack, onde estamos construindo projetos ferroviários do zero. É tão bom ter você aqui neste curso, implementaremos um projeto real a partir da pasta vazia até o aplicativo de produção totalmente funcional finalizado que será implantado no trilho servidor, vamos implementar um recurso que o projeto típico precisa, como por exemplo, autenticação, trabalhar com o Pi, gerenciar e criar estado reativo, trabalhar com formulários e muito, muito mais. Neste curso, usaremos muitas ferramentas diferentes em nosso cliente. Usaremos o Angular, que é a melhor solução para grandes aplicações de produção escaláveis. No back-end, usaremos agora o xadrez foi expresso para criar nossa API para armazenar nossos dados. Usaremos o MongoDB, que é uma solução muito popular para armazenar dados em seu projeto. E também as pessoas usam o Socket Layer para criar atualizações em tempo real dentro do nosso aplicativo. Obviamente, escreveremos o melhor código possível, que será seco, escalável e fácil de entender. Ao final deste curso, você poderá criar seus próprios projetos de qualquer complexidade usando essas ferramentas. Quem sou eu? Meu nome é Alexander Cohesion e sou um desenvolvedor web com mais de dez anos de experiência, bem como o instrutor profissional com vários cursos sobre tecnologias da web. Eu fiz o meu melhor para colocar todo o meu conhecimento dentro deste curso e eles querem dizer isso com você. Então, bem-vindo a bordo e vamos começar. 2. Que tecnologias usamos ?: Neste vídeo, quero falar sobre as tecnologias que usaremos neste curso. E, desde o início, quero definir expectativas realistas. Usaremos muitas tecnologias aqui. Será Angular, Node.js Express, MongoDB, TypeScript e socket IO. E isso é muita coisa para aprender. E então, neste curso, eu não vou te ensinar todas as coisas do começo ao fim. Simplesmente não é possível. A quantidade de conhecimento em cada ferramenta aqui é enorme. É por isso que este curso é focado. Construindo um projeto real do início ao fim. Sim, claro que você entenderá e aprenderá todas essas tecnologias em algum nível. Mas aqui, em algumas tecnologias, você pode precisar compreensão básica do que estamos falando. Com isso dito, vamos pular para a lista. E o primeiro da nossa lista é o Angular. Se você não sabe, o Angular é um dos três frameworks front-end mais populares, e nós o usaremos para criar frente e lado de nosso aplicativo. Angular é uma estrutura muito rígida que se adapta a grandes empresas. E temos esse TypeScript pronto para uso, o que significa que, usando o Angular, podemos construir aplicativos maiores, torná-los seguros por causa das digitações e dimensioná-los, se necessário. Se você não conhece o Angular tall, eu recomendo que você veja a lista sobre os conceitos básicos do Angular, como os componentes estão funcionando, como criar módulos, como adicionar roteamento e assim por diante. Depois de entender essas coisas, será muito mais fácil para você entrar no curso. O próximo na lista, conhecemos o xadrez e, na verdade, o NodeJS usaremos no back-end com o Framework, que é chamado Express. E se não o expressar, o framework mais popular para Node.js, é super pequeno, não é rigoroso, é realmente flexível e vamos usá-lo como uma solução muito popular para construir back-end. E neste projeto, devemos construir não apenas conexões de soquete gerenciadas. O back-end, é aqui que expressa uma boa escolha aqui, mas nem tudo é expresso por padrão, temos JavaScript. Claro que não é a melhor abordagem. Nós realmente queremos usar o TypeScript porque usaremos o TypeScript no cliente com angular. É quando o back-end com o Express. Também queremos usar o TypeScript. Por que isso? Porque , na verdade, o TypeScript traz para o JavaScript estática aperta. Isso torna nosso código muito mais seguro e vemos todos os nossos problemas, não em tempo de execução, mas no transpiler e no tempo. Obviamente, agora um projeto, devemos armazenar nossos dados em algum lugar, o que na verdade significa que, para o nosso back-end, precisamos de um banco de dados. E a solução mais popular aqui é o MongoDB. Este é realmente o banco de dados mais popular do mundo, onde podemos armazenar dados e se encaixa muito bem em nossa pilha com o Angular no cliente e o NodeJS foi expresso no back-end. E por último, mas não menos importante, na lista está o Socket IO. Queremos em nosso aplicativo implementar WebSockets para notificar outros usuários quando criamos uma coluna de tarefa ou crédito quando mudamos de parte, todos os usuários dentro dessas partes devem ser notificados. E a solução mais popular para WebSockets dentro de uma palavra conhecida é chamada de soquete IO. É a biblioteca que nos ajuda a gerenciar WebSockets no back-end e simultaneamente no cliente. É por isso que é realmente uma boa escolha. Mais uma vez, se você não estiver familiarizado com algumas ferramentas aqui, está tudo bem. Começaremos do zero, mas focaremos o aprendizado de todas essas ferramentas apenas nas necessidades diárias. O que realmente significa que vamos aprender coisas básicas, coisas corretas e coisas que são necessárias para implementar este projeto ferroviário. 3. Recursos para download: Neste vídeo, quero lembrá-los sobre o código-fonte, porque, na verdade, dentro deste curso, em cada aula em que codificamos algo, você pode encontrar o código anexado desta palestra específica, que na verdade significa que cada palestra tem um código fonte dentro. E se você quiser apenas pegar o código-fonte da palestra, você certamente pode fazer isso. Basta crescer sob o vídeo e verificar o arquivo anexado ao vídeo. E de forma diversa, como sempre, se você tiver alguns problemas com seu código, algo não estiver compilando ou você tiver apenas uma pergunta sobre o vídeo ou o curso em geral, basta escrever seus comentários nesse vídeo, e eu certamente responderei a eles. 4. Instalar o nó e o angular: Neste vídeo, instalaremos o NodeJS Angular em sua máquina. Como você pode ver aqui, estou no site oficial, Node js.org, onde você pode baixar agora o xadrez em sua máquina. Se você não o tiver instalado, você pode verificar se ele está instalado em sua máquina. Se você acabou de escrever o nó menos a versão dentro do seu console, se você está obtendo a versão como 16, está tudo bem se você tiver algo mais antigo, eu recomendo que você atualize sua versão do Node. Mas aqui está o ponto importante, é que você pode ver que temos duas versões. Em primeiro lugar, 16 LTS e 17 atuais. E você pode pensar, ok, eu preciso instalar o atual. E eles não podem recomendar que você instale o atual porque a versão de suporte de longo prazo é normalmente muito mais estável. É por isso que, para todos os meus projetos, especialmente se eles estão sendo enviados em produção, estou usando a versão do nó LTS, o que na verdade significa que se você está pulando para este site e vê como a versão LTS pode ter 17 ou 18 anos. Eu ainda recomendo que você faça o download de Ts e não atuais e não importa em qual sistema operacional você está trabalhando. Não, isso funciona em todos os lugares. Basta baixá-lo aqui, instalá-lo em sua máquina e, em seguida, verificar dentro do console com o nó menos versão que foi instalada com sucesso o Node em sua máquina. Você também pode digitar aqui e Pm menos versão para verificar se o npm também está disponível para você. Nosso próximo passo é instalar angular e realmente trabalhar com o globo, estamos usando uma ferramenta chamada Angular CLI, que na verdade significa que esta é a ferramenta que nos ajuda antes de tudo a criar um Projeto Angular, então gere diferentes módulos ou componentes e faça muitas coisas com o Angular. Então, como podemos instalar o Angular CLI em sua máquina, como você pode ver aqui, estou no site oficial, Angular slash CLI, e aqui está o primeiro passo instalando o angular CLI. E podemos simplesmente copiar esse comando que instalará globalmente o Angular CLI em sua máquina. E como você pode ver para isso, estamos usando o npm, que terá após a instalação de cadeiras conhecidas. É aqui que eu posso simplesmente jogar pagamentos tau menos g Angular CLI. E estou instalando globalmente o Angular CLI na minha máquina. Agora devemos verificar se nosso Angular CLI foi instalado com sucesso. Podemos escrever isso na versão G menos e aqui estão algumas informações importantes. Em primeiro lugar, podemos ver que o Angular CLI é a versão 13, o que na verdade significa que instalamos angular 13 aqui em nossa máquina. Em segundo lugar, esta é a nossa versão do nó que é ativada em sua máquina. Isso é npm e este é o sistema operacional. E algumas versões do Angular que você pode ver aqui. Se você vir essa saída, isso significa que você instalou com sucesso o Angular CLI em sua máquina. O próximo passo é gerar frente e parte do nosso aplicativo. Como você pode ver aqui, eu estou dentro dele ser dobrado. E eles não criaram nosso projeto aqui, o que na verdade significa que raramente criamos tudo do zero. Então, o que eu quero fazer aqui, eu posso apenas experimentá-lo negócio MK e depois o nome do nosso projeto, L Trello. E, na verdade, neste projeto, estamos implementando o clone do trailer. Aqui está apenas um nome com um prefixo legal e WSSE, você pode criar uma pasta não a partir do botão terminal, apenas no seu gerenciador de arquivos. Agora, eu quero pular dentro da nossa pasta ultra law. E aqui devemos criar duas pastas diferentes porque queremos separar nosso back-end do nosso front-end. E você pode perguntar, por que isso? E, na verdade, por diferentes motivos. Em primeiro lugar, é mais fácil dividir seu front-end e back-end se você quiser, por alguns motivos, colocá-los posteriormente em diferentes repositórios ou talvez até equipes diferentes. Em segundo lugar, se os separarmos em pastas diferentes, então não é um monólito, que na verdade significa que com certeza não injetaremos algumas coisas do back-end dentro da pasta front-end e vice-versa. Eles são realmente isolados e os separam conforme precisam estar na aplicação real. É por isso que aqui eu quero criar duas pastas. Em primeiro lugar, será cliente e, em segundo lugar, será cliente de servidor e insight. Teremos nosso aplicativo angular e, em seguida, diz servidor. Teremos nosso gs conhecido com o Express, que será nosso aplicativo de back-end. Agora podemos gerar nossa aplicação angular, como você pode ver aqui na documentação, simplesmente executamos o gene hue e o nome da pasta. Depois pulamos a pasta e iniciamos nosso servidor. Mas aqui temos um problema porque criamos diretamente nossa pasta cliente e podemos pular agora inserir pasta do cliente, o que na verdade significa que não podemos criar nosso aplicativo angular com mecanismo você porque a pasta já existe. Para isso, podemos usar um comando muito bom no gene you. E então aqui devemos fornecer o diretório do nome do aplicativo, e aqui está a barra de pontos, o que na verdade significa que esse comando criará para você em aplicativo angular em seu diretório existente. Como você pode ver aqui, estou dentro do cliente onde exatamente queremos gerar nossa aplicação angular. E eles podem colar esse comando aqui no gene Hue app name, directory dot slash. E, obviamente, não queremos nomear o nome do nosso aplicativo. É aqui que podemos fornecer o ELL Trello, assim como nomeamos nosso projeto com o mesmo Enter oculto. E iniciamos nosso processo de geração de um novo projeto Angular. E aqui temos algumas perguntas do Angular CLI. Precisamos de roteamento angular? Claro, sim, é por isso que estou acertando sim, aqui, qual folha de estilo devemos usar. E aqui vou escolher um CSS. Depois disso, nosso projeto será gerado. Como você pode ver aqui, todos os pacotes foram instalados com sucesso, mas depois estamos recebendo uma mensagem que pode ser confusa para você. Aqui estamos recebendo a mensagem de que agora foi criado o branch master como nosso branch git padrão. E eles podem mudar o nome para o nome mais tarde, mas ele ainda não está lá. E, na verdade, não importa qual branch foi gerado para você, master ou main, ele funcionará em qualquer caso. Então você pode simplesmente ignorar esse aviso. E a última etapa que precisamos fazer é iniciar nosso aplicativo de cliente. E como você pode ver aqui na documentação, ele está no G serve. Então, simplesmente inserimos o cliente, devemos experimentá-lo e apenas servir sem especificar nada. Como você pode ver aqui, estamos obtendo uma saída verde. A mensagem de que agora o servidor de desenvolvimento ao vivo angular está escutando no host local por 1200. Então, agora podemos simplesmente abrir o localhost 4.200. E aqui vemos a página angular padrão e agora inserimos o console. Nosso servidor web deve estar funcionando o tempo todo enquanto estamos desenvolvendo o aplicativo. Agora, vamos dar uma olhada nos arquivos que foram gerados rapidamente. Como você pode ver aqui, abri meu editor, estou na pasta L Trello, e temos aqui duas pastas, servidor e cliente e cliente insight. Todos esses arquivos foram gerados com o Angular CLI. E a parte mais interessante para nós é essa pasta de origem. E dentro da AB, temos nosso componente de aplicativo. Isso é exatamente o que vemos aqui na tela. Este é o componente padrão do angular. É aqui que, em primeiro lugar, quero remover o componente do aplicativo, o SCSS, as especificações dos componentes do aplicativo. E aqui temos apenas esses quatro arquivos. Agora podemos entrar no HTML do componente App e realmente queremos remover tudo, e realmente queremos remover tudo exceto esta última linha, a saída do roteador. Isso é extremamente importante rapidamente. Então eu vou remover tudo desse arquivo e apenas viver aqui seca a saída. E no topo, podemos apenas experimentá-lo. Olá l Trello. Então, sabemos que está funcionando. Depois disso, precisamos entrar no componente do nosso aplicativo e alterá-lo. Porque, na verdade, aqui estamos usando URLs de estilo do arquivo, o que alterará o removido. É aqui que podemos simplesmente remover essa linha e usamos aqui um modelo. E nem precisamos desse trailer do título L porque não o estamos usando. Simplesmente temos nosso componente de aplicativo e ele é um componente vazio. Agora, quando vou pular para a página dentro do navegador, posso ver que tudo foi removido. Nossa página está completamente limpa e agora temos apenas uma mensagem de hello little trailer, o que na verdade significa que preparamos com sucesso a parte do cliente de nosso aplicativo que a boa vontade implementará posteriormente. 5. Configurar servidor: Neste vídeo, quero preparar nossa parte de back-end do nosso projeto para iniciar a implementação. Como você pode ver aqui, está completamente vazio. Então, o que vamos criar aqui, na verdade, o que devemos fazer, devemos inicializar o arquivo JSON do pacote com o conhecido. Então, aqui podemos escrever npm in need e ele criará para nós um arquivo JSON de pacote. Aqui, devemos responder a algumas perguntas. Normalmente, eu só pressiono Enter em todos eles. Não importa para nós. E no final, simplesmente clicamos em Sim e estamos prontos. Agora podemos pular e dizer editor e sair do nosso cliente para o nosso servidor. Agora, aqui temos apenas um arquivo simples, Beckett Jason com nome, descrição da versão , script principal, onde não temos nada no autor vazio e na licença. Agora, precisamos instalar dois pacotes que nos ajudarão a criar nosso projeto de back-end. Então, aqui podemos escrever estilo de deficiências. E depois desse não demônio menos d, o que isso significa? Em primeiro lugar, o que não é um demônio? Que este é um pacote especial que nos ajudará a recarregar toda vez que mudarmos algum arquivo, nosso aplicativo back-end. E é exatamente isso que a Angular está fazendo rápido no cliente. Mas dentro do nosso projeto de back-end não temos nenhum servidor web que esteja fazendo isso rápido. É por isso que quando Stalin e um demônio, e como você pode ver aqui, eu usei a opção menos d, o que na verdade significa em nosso pacote Jason, nenhum demônio foi instalado dentro das dependências de desenvolvimento. E dependências de desenvolvimento são dependências que estamos usando quando estamos desenvolvendo um projeto. Não precisamos de nenhum demônio na produção. Isso é apenas para desenvolvimento. E nosso próximo pacote é chamado de nó Ts, e também é apenas para desenvolvimento. É aqui que estamos escrevendo npm install Ts node minus t, o que significa que essa é uma dependência de desenvolvimento. Então, o que o node está fazendo? Este é apenas um processo que transpira nosso código TypeScript dentro do código JavaScript em tempo real, executado exatamente como o código JavaScript normal dentro do node. Isso é extremamente eficiente porque queremos escrever código TypeScript. É por isso que devemos transformá-lo primeiro de TypeScript para JavaScript. E esse pacote ajuda a fazer isso de uma maneira muito fácil. Agora vamos pular e dizer Beckett json e verificar o que temos. Temos aqui para desenvolver dependências. E aqui eu quero criar um novo script, mas não preciso do teste de script. Queremos aqui iniciar nosso servidor web. Este é y, aqui está um estilo de script, e aqui podemos chamar um demônio de caminho para o nosso arquivo. E aqui eu quero escrever a barra de origem server.js. E como você pode ver aqui, temos o server.js, que criaremos em um segundo. Então este é o arquivo TypeScript e a parte mais interessante aqui que não especificamos que estamos usando aqui o nó Ts dentro de nenhum daemon. Daemon faz isso automaticamente fora da caixa se instalarmos o nível nevado e especificado aqui não o arquivo JavaScript, mas o arquivo TypeScript. E a última coisa que devemos fazer é criar o arquivo de configuração ts, que é um arquivo de configuração para TypeScript. Isso está aqui dentro de uma pasta de serviço. Quero criar um novo arquivo, ts config dot json. Aqui vou colar esse conflito e esse é um conflito super típico para o aplicativo Node.js com TypeScript. Então, aqui estamos definindo as opções do compilador. É exatamente assim que o TypeScript transpira nosso código de TypeScript para JavaScript. Portanto, o módulo CommonJS significa que estamos escrevendo nosso TypeScript no backend dentro do substantivo baú. E nosso alvo é a óptica atmosférica, porque o nó pode ler facilmente no meu código seis do script. Portanto, nossa resolução de modo é nó porque estamos escrevendo dentro de cadeiras de substantivos, mova-se nos mapas de origem. É aqui que passa o mapa de origem. Nosso negócio é o diretório. A saída será gerada. Aqui temos uma pasta dist, ela será criada automaticamente. Também temos aqui o módulo NDS verdadeiro estrito inter pop, e precisamos dessa opção yes module inter Pope para converter corretamente as entradas TypeScript para exigir dentro do jazz conhecido. Então, criamos com sucesso nossa configuração do TypeScript, e agora podemos criar nossa pasta de código-fonte e dentro desse arquivo, porque como você pode ver aqui, nosso servidor viverá dentro do servidor de origem Ts. Então, estou entrando nessa fonte e criando um ponto ts de servidor de arquivos. E não se esqueça do Ts NodeJS. Agora podemos entrar e simplesmente escrever servidor de log do console apenas para testar se ele está funcionando. Agora, vou pular dentro do console e aqui dentro da pasta do servidor, posso escrever npm start, como você pode ver aqui, temos uma saída de no demon, o que é totalmente bom. Ele está lavando arquivos TypeScript aqui e aqui. Nenhum demônio iniciou nosso teste do servidor de origem do nó Ts, o que na verdade significa que ele simplesmente usa o nó Ts dentro, mas reinicia nosso servidor. E este é o servidor de saída que escrevemos dentro desse arquivo. E agora o Demon Bull reinicie nosso servidor todas as vezes quando fazemos algumas alterações. 6. Instalar banco de dados: Neste vídeo, falaremos sobre no banco de dados de estilo em sua máquina. E há outra dimensão que usaremos o MongoDB aqui. Então, qual foi a ideia? Devemos instalar em nosso banco de dados de máquina local para que possamos salvar lá e ler a partir daí alguns dados que usaremos em nosso aplicativo. Esses dados estarão disponíveis para nós ao vivo localmente. No momento em que queremos implantar nosso projeto em produção, devemos configurar o banco de dados em produção e faremos isso no final deste curso. Portanto, agora a questão é como podemos instalar o MongoDB em sua máquina específica e você pode trabalhar em diferentes sistemas operacionais. Então, queremos algo que funcione em qualquer lugar sem problemas. Na verdade, instalar o banco de dados sempre pode ter algumas dificuldades. Aqui, como você pode ver, eu já abri o site oficial do MongoDB com a seção de instalação do MongoDB. Este é o URL para que você possa verificar se estiver interessado e parece muito fácil. Simplesmente escolhemos aqui um sistema operacional. Então, aqui estou clicando no link MongoDB Download Center. E agora estou aqui nesta página da web. E neste momento já não está muito claro o que o MongoDB devemos instalar. Existem diferentes versões disso. Existem versões gratuitas que queremos usar e as soluções pagas que não precisamos. E, na verdade, aqui devemos rastrear um pouco e ver aqui o servidor da comunidade MongoDB. Na verdade, essa comunidade do MongoDB é o nome da versão gratuita do MongoDB que queremos usar. Então, aqui à direita, podemos escolher a versão atual é totalmente boa. Agora, aqui está sua plataforma, talvez o Windows, e agora você simplesmente faz o download e instala. Então, basta clicar duas vezes aqui e instalá-lo. Mas depois disso, existem algumas etapas adicionais. Devemos configurar o diretório de dados. Aqui você pode ver que eles estão fazendo isso dentro da linha de comando assim. E assim, é por isso que você pode instalar o MongoDB assim. Isso é totalmente bom. Essa é a maneira oficial, mas na verdade meus alunos tiveram muitos problemas ao usar bancos de dados com instalação oficial. Por que isso? Porque, na verdade, em cada sistema operacional, você pode ter alguns problemas. Além disso, você deve criar uma pasta, especificar o caminho e assim por diante. É mais difícil. É por isso que eu recomendo que você veja a segunda possibilidade, como você pode instalar o banco de dados em sua máquina. E depois falando aqui sobre o DACA e sobre o Docker Desktop. Então, o que é Docker? Esta é uma ferramenta adicional específica que você não deve aprender, mas você pode simplesmente usá-la. A ideia principal é que o Docker embale tudo dentro do contêiner. É completamente isolado e não tem nada a ver com o seu sistema operacional. Docker funciona em todos os sistemas operacionais e é gratuito, que realmente significa a ideia aqui de que estamos instalando o Docker, antes de tudo em sua máquina. E em segundo lugar, usamos a imagem oficial do Mongo do Docker. Como você pode ver aqui, o link para o Mongo, que é suportado pelo próprio MongoDB. Portanto, isso não é uma ferramenta de terceiros. Isso é super oficial e a ideia principal é que este mongo seja embalado dentro do contêiner, por isso fica completamente isolado em sua máquina e você simplesmente pega do contêiner, a porta onde você pode conectar e gravar dados nesse contêiner. E é assim que ficará quando você começar. Como você pode ver aqui à esquerda, deve ser verde. E neste momento, você sabe, ok, meu Docker está funcionando e para você provavelmente a lista aqui estará vazia. Isso é totalmente bom. A ideia principal é que, antes de tudo, você inicie o Docker em sua máquina. Depois disso, simplesmente pulamos para o console e devemos executar esse comando, como você pode ver aqui, escrevi docker run e depois de instalar o Docker desktop em sua máquina, você pode escrever o Docker dentro do console. Este é o nome conhecido, e aqui estamos escrevendo docker run then minus d, que significa que este deve ser um processo desanexado, o que na verdade significa que não queremos executá-lo aqui dentro deste terminal. Queremos apenas desconectá-lo do terminal. Aqui especificamos ports e depois disso estamos especificando o nome mongodb. E aqui, Mongo, esse nome, mongodb é o nome do contêiner na minha máquina. E aqui o que queremos baixar, essa é exatamente a imagem que usaremos. Aqui estamos usando o Mongo 404. Você também pode usar a versão posterior aqui, você pode conferir no site oficial do Mongo ou aqui dentro do Docker. Como você pode ver, você pode clicar aqui tags, rolar um pouco. Por exemplo, você pode usar mais recente ou apenas verificar a versão, como você pode ver aqui, a versão mais recente é 507. Neste momento, eu instalei na minha máquina por 0 para, mas isso não faz muita diferença. As coisas que vamos experimentar dentro do MongoDB são as mesmas em todas essas versões. Agora estou acessando aqui e Docker fará o download desta imagem na minha máquina. Como você pode ver, não obtive nenhuma saída , exceto um hash. E isso ocorre porque o MongoDB já foi baixado pelo Docker na minha máquina. Portanto, isso não é um problema, e essa linha simplesmente iniciou o Mongo DB novamente na minha máquina. E, na verdade, se eu estou abrindo agora a ferramenta Docker, você pode ver aqui que contém um MongoDB e ele é verde porque está sendo executado no momento e podemos falar com ele. É por isso que, como você pode ver, você não precisa criar arquivos adicionais. Você não precisa se preocupar com algumas permissões ou pastas. Simplesmente funciona. E esta é uma linha única que é usada para muitos projetos. Agora, a questão é obviamente como podemos pular dentro do console do MongoDB quando ele está dentro do contêiner. E para isso temos um comando especial, docker exec, que significa executar TI. E aqui está o nome do nosso contêiner. No nosso caso, foi o MongoDB. E depois disso, estamos escrevendo nosso comando e queremos vir e Mongo aqui porque é isso que está instalado dentro do contêiner. recipiente interno pode ser instalado seja o que for. No nosso caso, essa imagem do Mongo simplesmente tem o Mongo dentro. É por isso que estamos pressionando Enter. Estamos recebendo aqui muitas mensagens do MongoDB. E como você pode ver depois disso, agora estou aqui no terminal do Mongo dentro do contêiner, e eles podem escrever aqui alguns comandos do Mongo. Por exemplo, mostrar bancos de dados, ponto e vírgula, estou pressionando Enter, e você pode ver quais bancos de dados eu tenho aqui dentro. Agora, você pode dizer, ok, mas eu não usei o Docker, instalei o MongoDB apenas da maneira oficial, o que eles deveriam fazer? E, na verdade, você deve fazer apenas uma única coisa. Se você o instalou da maneira oficial, então você tem dois comandos diferentes em seu console. Em primeiro lugar, será um comando de Deus, e isso começará exatamente da mesma forma que fizemos com o docker execute o processo MongoDB em sua máquina, que na verdade significa que o banco de dados será como um processo rodando em sua máquina. E o segundo comando que você deseja usar é o Mongo. Este comando saltará diretamente no console de inserção, assim como fizemos com o torque. Será exatamente o mesmo. O mais importante neste curso é que seu banco de dados Mongo deve estar sendo executado diretamente em sua máquina durante o desenvolvimento do projeto. O que realmente significa que você tem três coisas. Em primeiro lugar, você tem um banco de dados padrão. Em segundo lugar, iniciamos o servidor web para o back-end. E o último é o servidor web estático para o frontend. 7. Você usa um bom editor?: Estamos quase terminando com a subtipagem de todas as nossas ferramentas. E a última pergunta que eu quero fazer, você realmente usa o editor correto? Porque, na verdade, escreveremos muito TypeScript dentro do seu editor. E o editor não suporta muito bem o TypeScript, então você pode pensar em usar outro editor. Como você pode ver aqui, estou dentro do meu editor, este é o Vim, mas não estou sugerindo isso para você. Eu só quero mostrar do que estou falando. Como você pode ver aqui onde inserir componente dentro do Angular e aqui temos a entrada do nosso componente. Normalmente, quando estamos escrevendo o código com não escreva invertidos apenas escreva algo como adicionar componente ou talvez apenas adicionar do que comp. E então temos um preenchimento automático. E isso você pode ver aqui, podemos escolher muitas coisas. Na verdade, queremos inserir componentes do Angular. Ele não cuidava apenas daqui. E antes de tudo, foi preenchido automaticamente até o fim. E em segundo lugar, recebi esse componente de entrada externo do Angular com. E é extremamente importante que seu editor possa fazer isso. Você realmente precisa de suporte essas entradas externas quando está escrevendo código. Porque toda vez que você deve escrever uma entrada, se você realmente fizer isso manualmente, como o componente de entrada, e você realmente não se lembra de qual pacote você deve inseri-la. Isso não é eficiente. Você simplesmente gasta um tempo escrever código nas coisas de Ron. Nós realmente precisamos desse recurso de entrada externa. E o segundo recurso é , obviamente, que você deseja ter um suporte do TypeScript dentro do seu editor, o que na verdade significa quando estamos escrevendo algo incorreto. Por exemplo, não selecione aqui, mas apenas selecione onde chegar diretamente aqui, um argumento de mensagem do tipo select não existe no componente de tipo, o que na verdade significa, mas não gasta tempo depurando alguma mágica. Simplesmente vemos nosso erro de digitação diretamente no editor. Você pode usar aqui qualquer editor que tenha suporte ao TypeScript. Mas se você não sabe qual editor usar, eu recomendo fortemente que você procure no VS Code. Este é um editor totalmente gratuito, que funciona em todos os sistemas operacionais. Você simplesmente o instala. Você está obtendo esse editor com suporte integrado ao TypeScript pronto para uso, o que na verdade significa que você está obtendo todos esses recursos dentro do seu editor. E, nesse caso, é muito mais fácil escrever código. 8. Configurar soquete com Express: Neste vídeo, estamos começando com o desenvolvimento do nosso projeto. E, na verdade, o objetivo deste vídeo é configurar nosso servidor back-end com express, MongoDB e socket IO. Então, vamos começar. Aqui. Precisamos instalar vários pacotes novos. Em primeiro lugar, queremos expressar que isso é uma estrutura. É por isso que eu quero entrar no console. E como você pode ver onde dentro da pasta raiz isso é desenhado, não queremos instalar aqui pacotes porque primeiro devemos pular dentro da pasta do servidor aqui boop deseja instalar pacotes. É aqui que estou certo no npm install express. Nesse caso, estamos instalando essa estrutura como uma dependência. Aqui você pode ver agora que temos uma nova dependência, expressando isso como nossa estrutura. A próxima coisa que queremos instalar é o mangusto. E se você não sabe o que é o Mongoose, este é o pacote mais popular para trabalhar com o MongoDB dentro de cadeiras conhecidas. Por que é mais popular, porque você pode simplesmente configurar sua conexão com o MongoDB com ele, você pode criar seus modelos e trabalhar com MongoDB de maneira mais correta trabalhando com modelos. Então você normalmente tem algo como uma RAM e aprenderemos Mongoose mais íngreme nas próximas palestras. E a última coisa que queremos instalar aqui é o Socket IO. É por isso que o npm install socket dot ion. E esta é exatamente a nossa biblioteca para trabalhar com WebSockets dentro de cadeiras conhecidas. Então, como você pode ver, todas as nossas dependências estão instaladas e agora podemos pular na fonte definida, servidor Ts, e não temos nada aqui. E podemos começar configurando nosso xarope. Mas, na verdade, aqui está a questão. É muito fácil escrever seu código para o Stratton Express. Sua entidade é realmente fácil de criar um servidor web para Socket IO, mas na verdade não é tão fácil configurar juntos o MongoDB Express e o soquete IO. Porque o que queremos de expresso, queremos rodadas normais, assim como na aplicação normal, mas também queremos vincular ao seu soquete IO para que possamos trabalhar com WebSockets. E, além de tudo isso, precisamos de alguma forma iniciar nosso MongoDB. Então, como eu disse, não é fácil, mas esta é a produção porque na verdade ninguém precisa de apenas um único pacote. Nós realmente queremos a aplicação completa pronta para produção. Então, primeiro de tudo, vou inserir nosso Express. Expressar. E, na verdade, neste momento você provavelmente pensa, ok, o que ele está fazendo. Ele tentou um inverso dentro das cadeiras de substantivos. E, na verdade, isso é totalmente bom porque não estamos bem aqui. Javascript, onde bem aqui, TypeScript. E isso acontece com nossa configuração. E só para lembrá-lo aqui, temos nossa configuração ts. Isso aconteceu para o ECMO ScriptSig, que agora pode ser lido , Jess. Mas o mais importante, mais resolução é CommonJS e node. É aqui que ele será convertido para exigir e funcionará como um encanto dentro do jazz agora. Mas, para nós, é extremamente confortável porque usar entradas é muito melhor do que o exigido pela mão direita. E aqui temos um próximo problema. Como você pode ver aqui, eu tenho um erro. Não é possível encontrar o arquivo de declaração para o módulo expresso. O que isso tem um significado? texto datilografado tenta nos ajudar com o inverso. Ele não pode fazer isso fora da caixa porque TypeScript não sabe nada sobre pacote expresso. E aqui está uma solução que devemos instalar com o npm install save-dev, types express. Assim, podemos instalar digitações adicionais para pacote expresso e, em seguida, digitar script pode nos ajudar pequenos. E isso é exatamente o que queremos fazer. Precisamos pular e definir console e direito e pagamentos tau. E aqui está em tipos slash Express, e aqui é importante menos a opção de apenas instalá-lo como uma dependência de desenvolvedor. Não precisamos dessa biblioteca na produção. E como você pode ver após a instalação, esse erro desapareceu. E agora o TypeScript pode nos ajudar com o Express. Então, aqui importamos com sucesso nosso pacote expresso e agora podemos criar nosso aplicativo. Então eu posso simplesmente escrever aqui const ab equals, e aqui estamos chamando Express. E como você pode ver agora, se eu sou halita e expresso, você pode ver todos os tipos de expressos neste pacote específico. Por exemplo, podemos ler aqui que ele cria um aplicativo expresso e isso é extremamente útil para fins de desenvolvimento. A segunda coisa que queremos fazer criar um servidor HTTP e você verá o porquê em um segundo. Então aqui eu quero desestruturar, criar servidor a partir de, e aqui estará http. Como você pode ver, estamos obtendo o ATP pronto para uso e também criando um servidor porque esse é o pacote de nós padrão. Mas pode acontecer que você não tenha digitações para cadeiras conhecidas. É aqui que podemos pular diretamente no console e escrever npm install types node menos t. E, neste caso, estamos instalando com certeza todas as digitações necessárias para cadeiras de substantivos. Então, aqui importamos o servidor de criação de http. Agora devemos usá-lo. Então, após o aplicativo, podemos criar nosso servidor HTTP. E aqui queremos chamar nosso servidor de criação e fornecer dentro do nosso aplicativo. E só para lembrá-lo, app, esta é uma instância do nosso Express. Este é o nosso servidor expresso. Estamos criando aqui o servidor HTTP. Além disso, a próxima coisa que queremos inserir aqui é soquete. Este é o y aqui, onde é importante Servidor com grande S do pacote de E/S de soquete. E agora, depois disso, podemos criar diretamente nosso servidor de soquete. Então aqui const ion, e aqui estamos nos chamando de servidor. E, por dentro, estamos fornecendo nosso servidor HTTP. É exatamente por isso que criamos esse servidor HTTP primeiro e antes de serem expressos. Agora, neste arquivo, temos três coisas diferentes. Em primeiro lugar, temos nosso aplicativo, para que possamos trabalhar diretamente com o Express. Em segundo lugar, temos nosso servidor HTTP, que podemos começar com alguma porta. O terceiro é o nosso IR, para que possamos fazer algumas solicitações do WebSockets. E só para verificar se tudo está funcionando, quero usar aqui nosso aplicativo e experimentá-lo apt-get slash. Então, queremos criar nossa nova rota na barra. E aqui não precisamos de nada, mas eu só quero responder com alguma corda. É por isso que aqui podemos escrever solicitação e resposta. E aqui dentro da API rest dot send está ativa. Se você não está familiarizado com o Express, é assim que criamos apenas rotas de jogo dentro do nosso servidor de back-end. Então, aqui estamos dizendo, ok, estamos criando agora get route for slash, o que significa para a página inicial. E aqui está nosso Kohlberg. Dentro de nosso Kohlberg estavam recebendo solicitação e resposta. E aqui podemos usar dot send para enviar a string para essa rodada específica. A última coisa que devemos fazer aqui é iniciar nosso servidor. Então, aqui podemos escrever servidor HTTP. Não ouça e ouça. Estamos fornecendo algumas portas, por exemplo, para 1001. Depois disso, temos um retorno de chamada. O servidor web em torre é bem-sucedido e talentoso. Assim, podemos escrever dentro de algum log do console, por exemplo, que nossa API está escutando na porta. E aqui vai ser nossa parte. E, na verdade, teria sido isolado colocar o esporte em um arquivo de configuração adicional, mas por enquanto ele também irá. Então, vamos verificar se está funcionando. Eu tenho aqui uma guia com o servidor de API aberto. E como você pode ver aqui, nenhum demônio reiniciou esse servidor da web de novo e de novo. E em algum momento agora estamos recebendo nossa API de log do console escutando na porta 4.001, o que na verdade significa que até mesmo o navegador, abriremos o host local para 1001. Você pode ver aqui que nossa API de mensagens está ativa, mas não é tolerável. Também quero verificar se nossa conexão de camada de soquete está funcionando. É por isso que aqui depois do EB, podemos escrever ir ponto e aqui temos. E como você pode ver, em primeiro lugar, estamos tirando todas as digitações da caixa com o Socket Layer. Não precisamos instalar nenhum pacote adicional. Em segundo lugar, você pode ver isso na função de ouvinte para o nosso soquete IO, o que na verdade significa que podemos escrever aqui, e estamos fornecendo aqui como a primeira conexão de parâmetro. E, na verdade, essa é a ação padrão que pode acontecer dentro do soquete IO. E aqui temos nosso retorno de chamada. Não queremos nada por enquanto aqui, mas podemos simplesmente escrever console.log conectado. E não podemos realmente ver que a camada de soquete está funcionando para nós porque apenas definimos uma guia no back-end, mas não no cliente. Mas é assim que escreveremos nosso código Socket Layer no back-end e estamos totalmente preparados para isso. Então aqui nós zap, estamos trabalhando com o Express com um quintal, estamos trabalhando com Socket Layer e servidor HTTP que estamos usando para iniciar o servidor. E a última coisa que devemos fazer aqui é configurar nosso Mangusto. E só para lembrá-lo, mangustos o pacote para trabalhar com o MongoDB. Então, aqui no topo, eu quero inserir um vai de mangusto. E agora aqui está um ponto muito importante. Você nunca deseja iniciar seus servidores web antes de iniciar a conexão com o banco de dados. A ideia principal é que dentro de você observador, você fará algumas solicitações para o banco de dados, e o banco de dados ainda não está pronto, então podemos fazer essa solicitação, o que realmente significa todas as vezes queremos ter certeza de que o MongoDB é, sua conexão está estabelecida. E só depois disso estamos iniciando nosso servidor web. Aqui é o que eu quero escrever depois do nosso soquete IO, podemos escrever aqui ponto Mongoose e temos aqui um método connect. E, na verdade, por dentro, queremos fornecer nosso URL mongodb. Então, o que eu quero colar aqui é este ano, é MongoDB dois pontos duas barras, host local 27017 barra de porta l Trello. E, na verdade, essa parte à esquerda é o caminho padrão do MongoDB. E realmente não importa como você instalou o Mongo DB da maneira oficial ou com o contêiner Docker, ele funcionará exatamente da mesma forma. Ou você tem um processo MongoDB em execução em sua máquina, no esporte, ou você tem um MongoDB em execução dentro do contêiner com o esporte, que está disponível fora em nossa máquina local. Aqui após a barra, este é apenas o nome de como um banco de dados que você pode escrever aqui, qualquer nome e ele será criado. Acabei de escrever aqui o trailer, como o nome do nosso projeto. Então, essa linha é realmente uma promessa. É por isso que aqui podemos escrever ponto. Depois de nos conectarmos com sucesso ao nosso banco de dados MongoDB, ele será acionado. E agora, por dentro, podemos primeiro escrever que nos conectamos com sucesso ao nosso banco de dados. Para que eu possa escrever aqui conectado ao MongoDB. E também quero mover esse ouvinte HTTP para dentro. Nesse caso, em primeiro lugar, nossa conexão com o MongoDB é estabelecida. E depois disso, estamos iniciando nosso servidor. Agora eu quero entrar no nosso servidor web e verificar se ele está funcionando. Como você pode ver agora, estou recebendo uma mensagem conectada ao MongoDB e depois do semestre que nossa API foi bem-sucedida, o padrão, o que na verdade significa que esse é exatamente o nosso objetivo. Em primeiro lugar, o MongoDB. Em segundo lugar, nosso servidor web. Na verdade, neste momento, você pode obter um pouco do Azure em relação à conexão aqui. E o problema mais popular que você pode ter, você não iniciou o processo do MongoDB em sua máquina. Se não for iniciado, não poderemos nos conectar a um banco de dados do MongoDB. Então aqui você provavelmente receberá algum erro, como não é possível conectar-se ao Mongo DB ou a conexão falhou. Mas se você vir na tela conectado ao MongoDB e o pagamento for iniciado, isso significa que você configurou tudo com sucesso. E iniciamos nosso servidor web no back-end com MongoDB e socket IO. 9. Criar modelo de usuário Mongoose: Neste vídeo, falaremos sobre como criar nosso modelo de usuário. Na verdade, agora a inicialização do aplicativo registrará usuários. Assim, usuário atual, podemos fazer login com o usuário, que significa que precisamos de alguma forma lidar com nossos usuários no front-end, no back-end e no banco de dados interno. Então, neste vídeo, vamos nos concentrar no mangusto e no banco de dados. Mais uma vez, o que é mongoose já foi instalado este pacote no pacote R JSON. Você pode ver o Mongoose aqui, mas o que ele essencialmente faz, este é o site oficial do Mongoose. Você pode ver aqui o exemplo. Então, injetamos bens humanos e fazemos o ponto do Mongoose se conectar. E aqui está um banco de dados do MongoDB. Depois disso, podemos escrever o módulo mongoose cat, e definimos que nosso gato nomeou string, o que na verdade significa que cat é nossa entidade. E agora podemos criar essa entidade apenas dentro do JavaScript. É aqui que estamos no Reino Unido, e fornecemos dentro do nome. Então aqui criamos um gatinho, que é apenas um objeto. Mas agora, dentro de Katie, temos um método de salvar. E esse método retorna como uma promessa, o que na verdade significa que é assim que salvaremos o registro dentro do MongoDB. Agora você pode perguntar, ok, por que precisamos de mangusto? Por que não podemos simplesmente usar o driver oficial do MongoDB como mongodb dot save e jogar dentro de algum objeto que queremos salvar. Não é confortável trabalhar em um projeto enorme, mesmo no projeto médio, não é tão confortável porque você não tem nenhuma abstração. Você está escrevendo um código de nível super baixo, como você precisa salvar dados no banco ou como você os lerá. Na verdade, é por isso que preferimos usar rampas dentro de nossos projetos de back-end. O que são Ram Dass rápido, definimos algo como modelos, que são nossas entidades dentro do nosso projeto. Por exemplo, temos um usuário que talvez tenha tarefas ou você tenha quadros se estivermos falando sobre aplicativo de trilha e assim por diante. E então podemos definir quais relações entre esses modelos. E então todas essas relações são feitas de uma maneira muito mais fácil. Podemos fazer isso sozinhos com o MongoDB, o que significa que simplesmente escrevemos menos código. É por isso que, neste vídeo, queremos nos concentrar em nosso modelo de usuário. E a primeira coisa que eu quero fazer dentro da fonte, eu quero criar uma pasta de tipos. E, na verdade, estamos bem aqui TypeScript, o que significa que devemos aproveitá-lo. E isso é muito importante para investir mais tempo em TypeScript do que em escrever seu código. Nesse caso, será mais fácil para você desenvolver seu aplicativo. É aqui que aqui nos tipos de fonte eu quero criar pontos ts da interface do usuário. E como você pode ver aqui, eu tenho essa notação em que temos um sufixo do que exatamente é. Por dentro, quero criar nossa nova interface de usuário. E se você não conhece o TypeScript muito bem, esta é apenas uma definição do objeto que podemos usar em qualquer lugar. Neste caso, estamos usando a interface do Word, que é uma palavra reservada dentro do TypeScript. E aqui definimos um usuário de interface e podemos definir quais campos temos dentro de nosso usuário. Em primeiro lugar, devemos criar um e-mail, porque e-mail é o que estamos usando no aplicativo para registrar o usuário, validar esse usuário e enviar e-mail para o usuário. Além disso, precisamos aqui de um nome de usuário e ele será transmitido e a senha também será necessária. E, obviamente, devemos usar o hash de uma senha e nunca interromper as senhas apenas como uma tensão de avião. E por último, mas não menos importante, aqui será criado em, não precisamos usar esse campo, mas é muito bom tê-lo, antes de tudo, para fins de depuração. E em segundo lugar, podemos obtê-lo do Mongoose imediatamente e será um encontro. Então, é assim que uma interface de usuário está parecendo. Agora, em toda a nossa aplicação, em nosso back-end, podemos usar essa interface de usuário. Agora, à direita, quero criar um modelo para esse usuário. É por isso que na fonte podemos criar uma nova pasta chamada modelos. E lá dentro podemos registrar pontos ts do usuário, e esse é o nosso modelo. Isso é exatamente algo para Mongoose. Então, o que eu quero escrever aqui é nosso esquema de usuário. E o que isso significa aqui, definimos um esquema do nosso modelo. E para isso, estamos usando um novo esquema. E como você pode ver, eu não tenho nenhum preenchimento automático. Então, vamos tentar importar aqui o esquema. E como você pode ver, eu não tenho uma entrada correta aqui. Eu tenho outra entrada do inspetor, e isso não está correto. Então, vou digitar aqui o esquema de entrada do mangusto. Vamos verificar se temos um erro. Não temos um erro, o que significa que isso foi apenas um problema do meu editor. Aqui eu posso inspecionar o esquema, que significa que ele está realmente disponível com o TypeScript dentro. Aqui estamos bem no seu esquema. E agora, dentro de colchetes redondos, podemos definir nosso objeto, mas o esquema não é o que usaremos dentro do aplicativo. Deveria ser um modelo. É por isso que aqui podemos escrever isso e exportar o modelo padrão. E esse modelo também vem do Mongoose. Então, vamos colocar aqui o modelo de vírgula. E aqui model é uma função em que fornecemos nossa string. Ele será usado com grande matiz. E há um segundo argumento. Fornecemos aqui um esquema de usuário. É assim que definimos um modelo dentro do Mongoose. Então, aqui podemos exportar o modelo padrão que fornecemos aqui e nome e nosso esquema. E aqui devemos definir nosso esquema. Mas estamos certos no TypeScript. E, na verdade, não é a melhor maneira de criar um novo esquema. Por que isso? Aqui destacamos nosso esquema e você pode ver que muitos n estão aqui e isso é ruim. Por que isso? Porque não definimos nenhum tipo do nosso esquema. É por isso que o que queremos fazer. Queremos criar uma definição do esquema para um usuário. Então, eu quero pular aqui à esquerda e criar aqui uma interface especializada. Portanto, é uma nova interface para o documento do usuário. Aqui está uma grande diferença, temos aqui uma interface para o usuário. Isso é apenas usuário com os campos e isso é usar um documento. Isso é o que estamos usando apenas para mangusto. E aqui eu quero escrever x tans. E se você não sabe com o que se estende, basta pegar todos os campos do nosso usuário aqui. Então eu quero escrever aqui estende o documento de vírgula do usuário. E, na verdade, esse documento deve ser carregado do Mongoose. Então, aqui no topo, eu preciso escrever um documento de entrada do mangusto. E, na verdade, por enquanto, não precisamos fornecer nada lá dentro. E você pode perguntar agora, ok, mas não faz nenhum sentido O que fez estava aqui fora. Criamos um documento de usuário de interface. Aqui estamos simplesmente usuários e documentos estendidos. E sim, faz sentido porque, antes de tudo, temos nosso usuário de interface. Podemos usá-lo em qualquer lugar. Essa é a nossa parte, mas também a misturamos com o documento. E o documento está vindo do Mongoose. Esta é a definição do documento e parte rápida e importante é, por exemplo, esse AD, porque cada documento dentro do mongodb tem NAD. E neste caso aqui, não precisamos especificar se o usuário tem AD, ele vem do documento do mangusto. E agora podemos pular aqui à direita e usar frequentemente o esquema. Podemos fornecer em tanques um documento de usuário que acabamos de criar. E agora eu posso inseri-lo aqui no topo. Portanto, é da nossa interface de usuário de tipos. Neste caso, estamos dizendo que nosso documento do usuário é o que precisamos fornecer dentro do esquema de nossos usuários. E exatamente o mesmo que podemos fazer com nosso modelo aqui, podemos fornecer nosso documento de usuário. E se você não sabe o que essa parte significa, isso é na verdade um genérico, o que significa que estamos fornecendo o tipo genérico. Pode ser o que for por padrão que fosse qualquer um. Mas se agora inspecionarmos nosso esquema, você pode ver que ele não é mais. Aqui temos nosso documento do usuário, e isso é extremamente importante para nós e para a validação do TypeScript. Porque na verdade aqui, agora dentro do que eu quero fazer, eu quero jogar algo que não existe dentro do usuário. Por exemplo, digamos que temos dentro do formulário de propriedade do usuário. E aqui dentro, queremos fornecer que o tipo é string. E eu estou salvando isso e depois entro aqui e estreitando que o argumento do tipo foo não é atribuível ao parâmetro do tipo. E aqui podemos ver nosso nome de usuário de e-mail, senha criada adicionar ID de sublinhado, que vem do documento e aqui para sublinhar a versão. O que realmente significa que, se não tentarmos este documento do usuário aqui, não obteremos nenhuma validação do TypeScript. É extremamente importante que estejamos conseguindo. Agora, dentro da máscara, forneça todos os campos. Chairman d'etre para nosso usuário. E vamos começar com o e-mail. Então aqui nosso campo é e-mail e depois disse: Devemos fornecer o tipo, é uma string. Em segundo lugar, aqui podemos dizer propriedade necessária e, como você pode ver, TypeScript nos ajuda e mostra quais propriedades podemos fornecer informações Mongoose. Então, na verdade, é necessário, mas pode fornecer uma matriz com alguns dados e mensagens válidos. Porque, na verdade, queremos mostrar no front-end e uma boa mensagem quando nosso e-mail não é válido. Portanto, não é apenas uma corda. Este é um e-mail inválido. E para isso, podemos inserir aqui no validador superior. Então, aqui eu quero inserir dados válidos para o validador John. E como você pode ver, estamos recebendo um módulo de erro. validador não está instalado, então devemos entrar no nosso servidor. Aqui estou parando o servidor web e eles escreverão aqui deficiências tau dados válidos, mas isso não é tolerável. Também quero obter tipos para este pacote. Isso é y here at types slash valid data, mas deve ser instalado no modo de desenvolvimento. Então aqui, não se esqueça, menos t. Agora podemos abrir à direita, são empacotados em JSON e, como você pode ver aqui nas dependências de desenvolvimento, tenho tipos validador e independências validadas. Agora, aqui não temos nenhum erro para os dados válidos, que possamos especificá-los dentro de required. E, na verdade, aqui, estou um pouco errado. Este não é um campo obrigatório porque, em vez disso necessário simplesmente fornecer se for obrigatório ou não. No nosso caso, o e-mail é obrigatório. Aqui, como segundo parâmetro, podemos fornecer uma mensagem de erro se estiver vazia. E aqui podemos fornecer e-mail é necessário. E depois disso, temos nossa validação. É aqui que temos uma propriedade validada, e é exatamente aqui que queremos usar nosso validador. Então, aqui eu posso escrever um ponto de validação e estamos obtendo um bom preenchimento automático por causa dos tipos. E aqui vou escrever é um e-mail. Então, aqui temos muitas validações. E onde eu obtenho uma validação de e-mail pronta para uso. E há um segundo argumento que podemos fornecer aqui, o e-mail inválido. Por último, mas não menos importante, quero criar índices. E, na verdade, se você não sabe o que são índices, essas são coisas que podem tornar suas solicitações de banco de dados mais rápidas. E em segundo lugar, ele pode tornar, por exemplo, o campo de e-mail único. Nesse caso, quero escrever índices de criação. E aqui como um objeto, estou fornecendo insights, únicos, verdadeiros o que ele faz, ele lê nosso e-mail é um índice único neste caso, mas não consigo salvar duas pessoas com o mesmo e-mail. Então, mais uma vez, dentro do esquema do mangusto, estamos fornecendo todos os campos que precisamos para o nosso usuário. E o primeiro campo era um e-mail aqui, mas deve fornecer um tipo dentro. E essa é exatamente a linha de carga que precisamos por padrão. Mas, na verdade, podemos fornecer aqui obrigatório, o que podemos definir em verdadeiro ou falso, aqui podemos fornecer alguns validadores e podemos criar índices. E, na verdade, podemos fazer todas essas coisas assim dentro do driver MongoDB do avião. É por isso que eu prefiro usar o Mongoose porque é em um reino em que estamos tirando todas essas coisas da caixa. Nosso próximo campo é nosso nome de usuário. Então, aqui podemos fornecer nosso nome de usuário e será mais fácil. Em primeiro lugar, o tipo será string e, em segundo lugar, required deve ser true. E aqui também quero fornecer o erro de validação. É por isso que usaremos a mesma notação com a matriz. Aqui é verdadeiro e o nome de usuário é obrigatório. Agora podemos copiar e colar esse usuário porque será o mesmo. E a última, o que temos aqui é nossa senha e nossa senha é tipo string, e também é necessária, mas aqui a senha é necessária. E a última coisa que queremos fazer é selecionar false. E, na verdade, o que select false está fazendo, ele nunca selecionará esse campo quando estivermos fazendo alguma solicitação. Por exemplo, queremos obter um usuário por ID do banco de dados. Não conseguiremos esse campo de volta. E isso é extremamente importante porque faz com que nosso aplicativo seja salvo. Não importa quais consultas estamos escrevendo. Sempre sabemos que não receberemos uma senha de volta, o que significa que estamos, por padrão, no lado seguro. Por último, mas não menos importante, o que eles querem fornecer aqui são carimbos de data/hora. Assim, podemos fornecer aqui dentro de um objeto e podemos escrever aqui carimbos de data/hora, e aqui estamos definindo-o como verdadeiro. Nesse caso, nossa propriedade CreateDat será gerada diretamente pelo mangusto. Mas, como você pode ver aqui, há um erro de digitação. Não precisamos fornecer o assunto aqui. É um segundo argumento depois do nosso objeto, que na verdade significa no novo esquema como uma função que estamos fornecendo em primeiro lugar, esse objeto com todos os nossos campos e, em segundo lugar, o objeto com carimbos de data/hora verdadeiros. Portanto, este é o segundo documento de como o novo esquema. Então, estamos prontos com a primeira parte do nosso modelo. Mas temos um problema muito grande aqui se tentarmos usar nosso usuário assim. Por exemplo, aqui podemos escrever um novo usuário e foram fornecidos dentro de um objeto com senha de nome de usuário de e-mail. E depois disso, chamaremos de seguro e, em seguida, nosso usuário salvará diretamente essa senha como string simples. Isso é proibido, isso é errado e nunca devemos fazer isso. É por isso que devemos corrigir esse problema. O que podemos fazer sobre isso, devemos fazer hash de nossa senha antes de armazená-la no banco de dados. E para isso, podemos usar uma biblioteca muito boa, que é chamada de cripta. E essa é a solução mais popular. Faça hash na senha. É aqui que devemos entrar no console e instalar este pacote. Então, o npm instalado be crypt jazz e também queremos instalar digitações. Então, aqui no types slash be crypt jazz, mas obviamente deve ser width menos t. Então, vamos verificar o som. Estou pulando para o pacote JSON. E aqui eu vejo os tipos serem cristãos nas dependências de desenvolvimento e serem independentes da cripta. Isso está completamente correto. Agora, o que podemos fazer aqui, podemos definir a oração de pontos do esquema do usuário. E essa é a possibilidade de executar alguma função antes de algo. Aqui, estamos interessados em fornecer segurança, o que na verdade significa que executaremos nossa função diretamente antes da segurança. Então, aqui eu quero escrever uma função sinc e eles dirão Por que estou usando a função aqui e não a função de seta em um segundo. É muito importante escrever assim. E aqui estamos obtendo o Next. E agora aqui temos colchetes e podemos fazer algo por dentro. A ideia principal é que podemos fazer o que quisermos aqui com nosso objeto. E depois disso, quando mudamos de assunto, por exemplo, devemos ligar em seguida e, em seguida mangusto prosseguirá com o salvamento de nossos dados. E a pré-venda significa que essa função será chamada, primeiro depois de Criar e depois após a atualização. E isso é exatamente o que queremos. Por exemplo, queremos não apenas criar uma senha para o usuário, mas também atualizar posteriormente no formulário de atualização. E a primeira condição que eu quero escrever aqui é assim. Caso contrário, esse ponto é modificado. E como você pode ver, temos uma função modificada e podemos fornecer insight palavra, senha, e então queremos apenas não fazer nada e retornar em seguida. Então, o que estamos fazendo aqui, estamos verificando se nosso campo de senha foi modificado. Não é o caso foi criado porque lá teremos uma senha, mas é o caso da atualização se as sugestões do usuário e não alteramos a senha, então não faz sentido aplicar essa função. Este é o caminho aqui onde frango, ok, se o campo da senha não for modificado, então simplesmente dizemos para o Mongoose, vá em frente. Agora, como você pode ver aqui, escrevemos uma função sinc e não uma função de erro. E é importante aqui porque queremos usar aqui essa propriedade. E para ter uma referência correta , devemos escrevê-la como uma função e não uma função de seta, porque outro caso, isso será executado e também usamos aqui uma função sinc porque a operação da cripta será síncrona. Então, depois disso, eu quero escrever try-catch. E, na verdade, se obtivermos algum erro, será cripta, então entraremos na jaula. Aqui, estamos recebendo nosso erro e queremos devolver essa Sarah para dentro em seguida. Aqui estamos jogando dentro do Azure como erro. E você pode perguntar, ok, mas por que esse estranho erro de notação é como era? Na verdade, se você tentar escrever assim, receberemos um erro. Argumento do tipo desconhecido não é atribuível ao parâmetro do tipo callback error ou undefined, o que na verdade significa que dentro de uma gaiola, todo Azure é desconhecido, o que é óbvio porque isso é esboço e não sabemos o que aconteceu. É por isso que estamos escrevendo catch, mas na verdade não podemos usar flecha assim e podemos fornecê-la dentro de seguida, é por isso que devemos converter um tipo de nossa era em algo significativo. Nesse caso, estou usando a seta S e podemos fornecer erros dentro da próxima função. Isso é exatamente o que estamos fazendo aqui. Agora devemos tentar nossa lógica para hash da senha. E para isso eu quero, no topo, inserir nosso módulo js grande e rasgado. Então, estou inserindo be crypt jazz do Big Rip jazz. E agora, dentro da nossa tentativa, podemos primeiro obter um sal. E se você não sabe Para ser cripta onde gerar e primeiro sal e , em seguida, fornecemos na função descriptografar para hash a senha. Este é o caminho aqui, precisamos pegar um sal. E para isso nós somos Colin be crimped js dot gen salt. Como você pode ver, esta é uma função que são sincronicamente gera sal rápido. E aqui podemos fornecer dez, por exemplo. E essa é uma função assíncrona. É aqui que devemos tentar esperar, para obter sal rápido. E agora aqui devemos atualizar nossa senha. E, na verdade, essa função é chamada antes de salvarmos esse registro, o que significa que, com isso, temos uma referência a todos os campos que estamos tentando salvar. E aqui vou escrever essa senha de ponto para alterar nosso campo que estamos tentando salvar. Aqui queremos atribuir um hash de ponto de xadrez creep de peso B e, na verdade, hash como você pode ver aqui, teremos nossa senha e primeiro lugar, devemos fornecer nossa senha, essa senha. E em segundo lugar salt, neste caso, nossa senha será criptografada e apenas armazenaremos um hash dentro de nosso banco de dados. Nesse caso, depois de ligarmos seguida e precisarmos fazer isso com certeza, essa senha será atualizada e salvaremos o registro limpo. É por isso que, por dentro, queremos escrever return next e simplesmente o chamamos, isso acionará o salvamento de um registro no banco de dados. E a parte mais importante que redesenhar essa lógica dentro do modal vendeu essa lógica com a economia é completamente isolada dentro do modelo. E quando escrevermos algum código relacionado ao usuário, nem saberemos sobre essa lógica. Está tudo dentro do modelo. Não tem nada a ver com encontrar um usuário ou salvá-lo. É o que está acontecendo dentro do modelo. A última coisa que precisamos para o futuro é a função validar senha. Por que precisamos disso? Porque, na verdade, quando vamos tentar fazer o login do usuário, queremos comparar não apenas o e-mail, mas também a senha fornecida. E temos uma coisa muito boa que é chamada de métodos dentro do Mongoose. Então, aqui podemos escrever métodos de esquema de usuário e aqui queremos criar um novo método, por exemplo, validar senha. E, na verdade, está funcionando exatamente da mesma maneira, como por exemplo, métodos dentro de classes. Assim, podemos chamar nossa instância do nosso usuário. Esse método valida a senha. E aqui devemos fornecer a função. E, novamente, não estou escrevendo aqui a função de seta, mas apenas uma função aqui obtendo a senha como parâmetro. Porque, na verdade, quando queremos comparar uma senha, forneceremos algo que queremos comparar. Aqui, a senha é uma string, e aqui dentro queremos comparar a senha fornecida com senha dentro de nossa instância. Então, aqui podemos simplesmente retornar be grip js dot compare. E esta é uma função para comparar, em primeiro lugar, uma senha de avião que é fornecida de fora. E em segundo lugar, nossa string, e essa é essa senha de ponto que estamos armazenando como um hash dentro do nosso registro. Portanto, nosso uso mais recente ficará assim, onde aqui, por exemplo, temos um usuário e queremos salvá-lo. Então, aqui temos um novo usuário. Devemos fornecer dentro do nosso e-mail. Em seguida, devemos fornecer aqui um nome de usuário e, em seguida, forneceremos aqui uma senha. Depois disso, tentaremos salvar um usuário. Então, aqui vamos chamar de uso. Isso economiza. E, na verdade, depois de Colin tão fino, nossa imprensa Salvar será chamada e armazenaremos a senha correta. Mas depois dessa linha, também podemos escrever uma senha de validação de ponto de usuário. E aqui podemos fornecer qualquer senha que quisermos comparar. Essa função retornará para nós verdadeiro ou falso, dependendo da exatidão da senha. E isso é totalmente correto para fazer todas essas coisas dentro do modelo do usuário e não dentro de alguns controladores onde simplesmente trabalhamos com usuários. Porque neste caso nossa lógica está completamente isolada dentro do usuário. E agora estamos perdendo apenas uma única linha aqui dentro de nossa interface de usuário de tipos com documento de usuário definido. Mas, na verdade, devemos especificar dentro deste documento do usuário que escrevemos aqui um novo método, validar senha. É por isso que o que eu quero fazer aqui, eu quero criar um novo método dentro de validar senha. E sabemos que por dentro estamos obtendo algum parâmetro, podemos apenas chamá-lo de param1, e isso é uma string, e sabemos que de volta estamos recebendo uma string. Nesse caso, usarei um documento digitado completamente corretamente e podemos usá-lo mais tarde dentro do TypeScript para chamar esse método de validação de senha e obter o preenchimento automático. 10. Adicionar registro: No vídeo anterior, criamos com sucesso nosso modelo de usuário. E eles podem entender que vídeo anterior estava realmente seco porque acabamos criar um modelo e você não viu como usamos esse modelo em um aplicativo real. É por isso que o objetivo deste vídeo é criar nosso método de registro, o que significa que registraremos o usuário, e é exatamente assim que usaremos nosso modelo de usuário. Então, vamos dar uma olhada em nosso código. Por enquanto, temos apenas um modelo dentro dos modelos de origem. E o que queremos construir é a arquitetura MVC. O que isso tem um meio realmente interno expresso como uma estrutura. Não temos nenhuma arquitetura expressa com algumas rotas simplesmente definidas iniciar o servidor da web e estamos prontos para ir. Não temos muitas regras definidas internamente expressas. É por isso que devemos fazer algo por conta própria. E a arquitetura muito popular que usa bem nosso projeto de back-end é o MVC, que na verdade significa visualização de modelo e controlador. E, na verdade, 90 por cento dos casos, usaremos apenas modelos e controladores. Não usaremos nenhuma visualização só porque estamos trabalhando e criando um EPI e não precisamos renderizar visualizações lá. Nós apenas respondemos com o castigo e é isso. É por isso que minha ideia é criar uma nova pasta chamada controllers. A ideia principal é que aqui, em vez disso irmandade S registre todas as nossas rotas. Por exemplo, aqui temos uma rota para a página inicial. A ideia principal é que não estamos escrevendo a lógica dessa rota aqui diretamente como um retorno de chamada, vamos escrevê-la em um controlador específico do site, o que na verdade significa que todos os nossos pedidos queremos dividir controladores diferentes. Por exemplo, temos um controlador de usuário e houve tumultos em todas as nossas ações em relação ao registro, login, obtenção de login do usuário e assim por diante. Em seguida, temos um controlador de placa onde escreveremos dentro de tudo o que está relacionado à placa. A parte mais importante é que o modelo interno definiria como estamos trabalhando com o banco de dados. Então, criamos nossa entidade como usuário, mas dentro da maneira do controlador usando essa entidade. E estamos construindo algumas respostas da nossa API, o que na verdade significa que estamos separando nossa lógica. Tudo o que era banco de dados está indo para modelos, mas estamos usando modelos em tais controladores. Então essa era a teoria. Agora vamos criar nosso primeiro controlador. E para isso eu quero me registrar aqui em sua rota, e será uma rota para registro. É por isso que aqui temos uma postagem no aplicativo e o URL será de usuários slushy pie slash. Aqui estará o registro de pontos do controlador de nossos usuários. Portanto, nossa primeira regra aqui é que todos os nossos URLs, começaremos com a API de barra, porque na verdade é muito bom ter um namespace para nossa API. Em segundo lugar, como você pode ver onde não é importante, algo como registrar onde as entradas aqui controlam todo o usuário e precisamos ter uma boa nomenclatura. O nome típico e para controladores é sempre com ativo do que, por exemplo, um controlador de usuário e não um controlador de usuário. Agora vamos importar a estrela à medida que os usuários a controlam. E se você não sabe o que isso está fazendo, a ideia principal é que por dentro teremos um monte de funções. E desta vez como grupos, todas essas funções dentro desse objeto. E então podemos escrever algo como registro de ponto de controle de usuários. Então, aqui queremos importá-lo, e aqui temos nossa barra de controladores, e aqui vamos criar usuários de arquivos. E como você pode ver, não faz sentido nomear esse arquivo como controladores de usuários, porque esse arquivo está situado diretamente dentro dos controladores. Este é o caminho aqui, Vamos pular para que ele controle. E aqui está o users.js. E este é o nosso arquivo que é um controlador. E então diga que estava certo, todas as ações que estão relacionadas à entidade do usuário. Agora à direita, quero abrir nosso servidor Ts. E como você pode ver, na verdade essa parte que você pode ver aqui é o que estamos escrevendo dentro do controlador. Então esse é o nosso retorno de chamada. E, como você pode ver, essa é apenas uma função simples com a resposta da solicitação. E o terceiro parâmetro aqui pode ser o próximo. É por isso que o que eu quero fazer aqui, eu quero criar uma função que é chamada register. E essa é uma função assíncrona. Por que precisamos aqui em uma função síncrona, porque trabalharemos com banco de dados e essas solicitações para nosso banco de dados ou como síncronas. E aqui estamos recebendo como argumento, antes de tudo, pedido, segundo resposta, e o último é o próximo. E isso é apenas uma função. Então isso é exatamente o mesmo que estamos colando aqui diretamente, mas acabamos de movê-lo para fora, dentro do nosso controlador. Mas esse código é ruim. Por que isso? Porque, na verdade, aqui não digitamos nossa resposta de solicitação. E a seguir, então aqui posso escrever dois pontos, e aqui temos nosso pedido. E essa é a parte mais importante. Aqui temos uma solicitação que vem da API Fetch. Nós não precisamos disso, mas precisamos é de um pedido que vem do expresso. Este é o y aqui, pedido de importação do expresso. E como você pode ver agora, temos uma definição completamente diferente. Temos aqui dentro vestido, corpo, corpo de pedido. E isso é exatamente o que precisamos. Além disso, precisamos aqui não apenas de solicitação, mas de resposta, e estou na Grã-Bretanha aqui também de resposta. Digite aqui a resposta como resposta. E a última não é a próxima, mas a próxima função. Aqui, nossas duas entradas estão corretas. É de expresso. Então, é assim que normalmente criaremos uma nova ação do controlador. Não importa se é um controlador de usuário ou se é algum controlador de artigo, será sempre o mesmo. Agora, diretamente lá dentro, eles querem escrever try-catch. Por que isso? Porque, na verdade, escreveremos um código síncrono com async await dentro dessa função. E queremos lidar com todos os erros. E a maneira mais fácil foi expressa para lidar com um erro é usando next, e já o usamos anteriormente dentro do nosso modelo. Aqui está funcionando exatamente da mesma forma. Então podemos escrever aqui, tentar e temos gaiola e estamos recebendo algum erro. O que queremos fazer, o que chamar aqui seguir e jogar dentro do erro. É isso, na verdade, esta é uma única linha que propagará nosso erro para expressar, e então express mostrará a Sarah na tela. Agora, por dentro, queremos criar um usuário porque, na verdade, esse é o registro e o registro significa simplesmente criar um usuário. É por isso que aqui eu quero importar o modelo do usuário. E aqui temos nossos modelos slash user model que criamos anteriormente. E como você pode ver aqui, eu não nomeei usuário com U maiúsculo, mas usei o modelo. Isso é apenas para ficar bem claro dentro do nosso código que estamos trabalhando com o modelo. E agora podemos usar esse modelo por dentro. Então podemos escrever aqui const, e aqui está o novo usuário, porque aqui queremos registrar um novo usuário e estamos bem aqui no modelo de usuário hue. E agora, por dentro, devemos passar alguns dados. No nosso caso, devemos passar aqui em masculino do que nome de usuário e senha. Então, aqui queremos escrever isso. Queremos definir um e-mail, e isso é request dot body dot email. Então, queremos definir aqui nome de usuário, e isso é request dot, dot username. E a última é a senha, e é a senha do ponto do corpo do ponto da solicitação. Mas aqui temos um grande problema. Por padrão, o express não pode funcionar com fervura e, por padrão, o express não passa um tau. É por isso que o que devemos fazer, devemos instalar um pacote adicional para isso. E esse pacote se chama BodyParser. É por isso que vou entrar no console e estar ciente de que estou dentro do servidor. Vou escrever npm install. E aqui queremos instalar o BodyParser. Estou pressionando Enter e o pacote está instalado. Agora podemos iniciar nosso servidor novamente e voltar atrás. Então, a ideia principal é que aqui, em vez da irmandade S, vou importar meu analisador corporal. Então, aqui vamos chamá-lo de BodyParser com CamelCase e estamos importando do pacote BodyParser. Agora, em algum lugar aqui, antes de fazermos nossas rotas, podemos escrever ab use e por dentro queremos experimentá-lo bodyParser dot json. E, na verdade, aqui você pode verificar diretamente o que o BodyParser Jason está fazendo e ele retorna um middleware, o tom labial analisa JSON e é exatamente isso que queremos. Queremos passar nosso JSON, mas não é apenas isso, mas também queremos mais um analisador de corpo de IPOs. E aqui será codificado por URL de ponto. E, por dentro, estamos fornecendo informações estendidas através do que essas duas linhas estão fazendo. primeira linha procurará apenas aplicativo de tipo de conteúdo json e , em seguida, os pais de um corpo no JSON. Assim, podemos trabalhar com nosso corpo como um objeto e isso é extremamente fácil. Na próxima linha, faremos exatamente o mesmo mas para strings codificadas por URL. E então também obteremos nosso corpo. Assim, com essa configuração em cada projeto, você pode trabalhar normalmente com a API onde você tem o corpo como adjacente. E isso é exatamente o que estamos fazendo aqui. Estamos lendo corpo a pedido. Agora eu quero fazer o log do console aqui nosso novo usuário para que possamos verificar como ele se parece. E depois disso, quero tentar salvar o usuário. Então, aqui podemos experimentá-lo usuário salvo, e aqui podemos chamar um peso em seu usuário dot save. Esta única linha criará um novo usuário na França dentro do banco de dados. É por isso que aqui eu quero registrar o console do usuário salvo, coma, usuário salvo. Agora eu quero usar essa ferramenta que é chamada Postman para fazer o pedido. E se você não tem carteiro em sua máquina, você pode simplesmente pular para Postman. Não carregue aqui. É totalmente gratuito. Ele tem níveis pagos, mas não precisamos deles para o nosso curso. Aqui, parece que sim. E, na verdade, o que queremos fazer, queremos fazer uma solicitação de postagem em nosso URL. E aqui temos nosso host local para 1001 usuários slash slash. Agora, aqui devemos pular para o corpo e selecionar aqui errado. E à direita podemos dizer que isso é adjacente. Agora, o que queremos passar por dentro é um objeto com três campos. Em primeiro lugar, temos aqui e-mail, por exemplo, foo em gmail.com. Em seguida, temos nosso campo de nome de usuário, por exemplo foo, e nosso campo de senha, por exemplo, 123. Agora vamos enviar uma solicitação e verificar se está funcionando. Como você pode ver, a solicitação trava. E isso é completamente normal porque na verdade aqui , mas não chamou de descanso Jason, por exemplo. É por isso que é revólver. Mas agora podemos pular para dentro do console e essa é a nossa saída. Em primeiro lugar, aqui podemos ver nosso novo usuário. Isso é antes de salvar. Então isso é o que temos depois de Colin, novo modelo de usuário, o que na verdade significa que estamos jogando dentro desses três campos e obtendo usuários de um Goose. E como você pode ver, a principal diferença do nosso objeto é que temos aqui o NAD, que é um AD do MongoDB, e ele foi gerado automaticamente rapidamente. E, na verdade, depois disso, podemos usar esse novo usuário e salvá-lo, por exemplo, banco de dados com o método dot save, o que é extremamente fácil. E a parte mais importante é aqui o usuário salvo. Este é o nosso usuário salvo, que vem do banco de dados. Como podemos dizer que ele já está salvo. Em primeiro lugar, aqui vemos nossa senha e, na verdade, nossa senha aqui. Demos 123, mas aqui não salvamos como 123. É uma senha com hash. Por que isso está acontecendo? Porque na verdade definimos o modelo e aqui temos um método pressione Salvar. E só para lembrá-lo, aqui geramos um hash da nossa senha e salvamos esse hash com a cripta em vez da senha. E esse é um padrão extremamente importante. Não queremos escrever aqui nenhuma lógica em relação à alteração da senha para o hash. Não faz nenhum sentido porque queremos definir um modelo com alguma lógica. E então isso acontece magicamente porque está definido. Neste caso, aqui salvamos, acabamos de alterar nossa senha e hash e dentro do nosso controlador não sabemos nada sobre isso. Os mesmos objetivos sobre esses campos criados em e atualizados em. Esses dois campos foram adicionados para nós porque aqui definimos carimbos de data/hora verdadeiros. Portanto, nosso usuário foi salvo com sucesso no MongoDB. Mas, na verdade, não podemos simplesmente jogar o usuário salvo como resposta. É que, antes de tudo, não precisamos de todos os campos e, com certeza, nunca devemos fornecer essa senha fora. E, na verdade, só para lembrá-lo aqui, dentro do nosso usuário de modelos, dissemos que a senha não está selecionada, ela é selecionada como falsa. Mas, na verdade, depois que salvamos o usuário aqui, essa senha é devolvida rapidamente. E, na verdade, se estivermos fazendo algo bem, não receberemos o campo de senha. Mas depois de salvar, o usuário obviamente está conseguindo. É por isso que devemos criar uma boa resposta que atenda às nossas necessidades. É por isso que aqui eu quero criar uma função adicional, normalizar o usuário. E aqui estamos recebendo o usuário e sabemos que este é o documento do usuário. E como você pode ver nosso documento do usuário, podemos inserir a partir de tipos de interface do usuário. Só para lembrá-lo, usar um documento é exatamente como um objeto de usuário com ID e método de validação de senha. E como você pode ver aqui, podemos inspecionar novos usuários e podemos ver que isso é usar um documento e a propriedade, isso é exatamente o que estamos passando aqui e aqui dentro desta função, queremos retornar o normalizado para o usuário da API. Então, primeiro de tudo, aqui teremos um e-mail, este é o email ponto do usuário. Então queremos nosso nome de usuário. Ele será usado nome de usuário, e o último é 80, é o ID do ponto do usuário. E só para lembrá-lo, no MongoDB ou as mulheres são armazenadas com ID de sublinhado. Mas, na verdade, aqui dentro do Mongoose, podemos usá-los de ambas as formas, como ID de sublinhado e como ponto AD. Esse método já existe e é simplesmente como referências sublinhado id. Então vou normalizar o uso de uma função está completamente pronta e agora podemos chamar aqui comer quando respondermos com esse usuário salvo. Então eu posso simplesmente escrever aqui como areia e por dentro estamos passando usuário normalizado e aqui está nosso usuário salvo. Vamos verificar se está funcionando. Não temos nenhum erro aqui no servidor da web. Vou abrir aqui Postman e clicar em Enviar novamente. E como você pode ver com sucesso em nosso usuário normalizado e não chegamos aqui, por exemplo, senha de volta, o que é extremamente importante. Mas aqui está algo que eu não gosto em nossas respostas. Na verdade, fizemos alguma validação dentro de um modelo. Mas se eu remover aqui o nome de usuário e clicar em Enviar, chegaremos aqui 500. E esta é, na verdade, uma página HTML com alguma validação aqui. Não é isso que queremos, o que podemos fazer aqui, podemos usar o esboço e ler mensagens da nossa época. Mas o principal problema é que nosso erro nem sempre é erro de validação. Pode ser, por exemplo, 500, mas também podemos obter erros de validação. E a maneira mais correta de verificar isso dentro do TypeScript é assim, onde bem aqui que estão o Azure é a instância erro de validação do Azure DOD. Mas aqui é importante inserir o erro corretamente porque queremos importar esse erro do Mongoose. Então, aqui estou eu informando nossa era do Mongoose. Neste caso, ele será tratado corretamente porque, na verdade, aqui, era que o erro de validação é uma classe de mangusto. E se tivermos algum erro de validação do Mongoose, podemos trabalhar com eles aqui. Agora vamos tentar dentro log do console e verificar o que estamos obtendo aqui. Vou clicar em Enviar novamente. E como você pode ver dentro do console, estamos recebendo aqui erros. E isso é um objeto. O que significa que podemos ler as mensagens do assunto e mostrá-las na tela. Aqui eu quero criar uma mensagem de propriedade. E aqui podemos escrever valores de ponto de objeto, que lerão valores de nosso objeto. E por dentro estamos lançando erros de erro. Isso é exatamente o que estamos recebendo do mangusto e queremos passar por todos os campos. E aqui estamos recebendo erros e só precisamos de uma mensagem de erro. Então, isso será uma série de strings. Agora podemos simplesmente escrever o status de risco de retorno, por exemplo, quatro para dois, o que significa entidade não processável. E aqui pontar mensagens JSON, o que na verdade significa que aqui, quando estamos recebendo alguma mensagem de validação respondendo com esse status estamos respondendo com esse status e estamos mostrando essas mensagens de erro, não temos quaisquer erros no console. Então, vamos tentar novamente. Estou batendo aqui e estamos recebendo boas mensagens de erro. usuário é exigido por isso porque aqui verificamos dentro da gaiola, por exemplo, da classe, normalizamos nossas mensagens aqui e respondemos com elas. E, na verdade, faz muito sentido mover essa função mais tarde para algum auxiliar, porque faremos exatamente as mesmas coisas repetidamente, onde temos uma validação. E aqui está o último passo que queremos fazer. Na verdade, precisamos que nosso cliente forneça um token, o que na verdade significa que quando nosso usuário é logger tin, geramos um token exclusivo para fazer uma autenticação DVT. O que isso significa? Temos um token de string especial que estava jogando no cliente. E então o cliente pode anexar isso para ser t ao cabeçalho. E, posteriormente, verificaremos se a solicitação está autenticada e o difusor tem permissão para fazer algumas alterações. Mas neste vídeo, simplesmente precisamos lançar dentro de nossa resposta, o token GBT que geraremos. E para isso, devemos instalar um pacote adicional. Aqui vou escrever o token da web JSON npm install. E não é só que também vai querer começar a digitar. Então, aqui estarão os tipos slash JSON web token. Então, instalamos dois pacotes e, em seguida, reiniciamos meu servidor web. Agora vamos pular de volta. Aqui queremos importar agora nosso JSON Web Token, ou apenas DVT. Então, vamos tentar aqui na produtividade do token da web JSON. E agora o que queremos fazer aqui dentro normalize, e este é o melhor lugar para fazer isso, porque aqui temos todo o usuário e estamos construindo algo que não está relacionado ao banco de dados. Então, queremos gerar aqui nosso alvo. E para isso somos apenas Colin, pontos GBT assinam o interior. Devemos fornecer uma carga útil e alguma chave secreta. Então, o que mostramos a carga útil do insight aqui? Em primeiro lugar, queremos obter um anúncio e este é o ID do ponto do usuário e , em seguida, um e-mail. É user.email. Na verdade, basta fornecermos apenas um ID para que possamos usá-lo posteriormente por ID. Mas também é bom ter e-mail para validação e compreensão com Susan e o que é secreto aqui. É apenas uma string aleatória que nos ajudará a decodificar e depois chamar tokens. Então, o que queremos fazer realmente queremos aqui dentro desses serviços criar um novo arquivo. Por exemplo, config dot ds. Aqui, armazenaremos todas as propriedades necessárias , como, por exemplo, secretas. Então aqui eu só quero exportar, const, nossa propriedade secreta e eles vão chamá-la de segredos, obviamente por razões de produção você quer ter aqui algo mais seguro. Talvez algum hash longo como 12 símbolos sejam. Então agora podemos usar o segredo aqui apenas invertendo nosso segredo para John. E aqui temos nosso arquivo de configuração. Agora, em vez dessa chave secreta ou privada, vou apenas escrever um segredo. Então, o que essa linha faz, ela gera um token que é apenas uma string. E agora precisamos adicionar aqui à nossa resposta, esse símbolo. Vamos verificar se está funcionando, mas não há erros. Vamos pular para dentro. Carteiro, clique em Enviar. Como você pode ver aqui, devo fornecer meu nome de usuário. Então, por exemplo, para, vamos dar uma olhada nisso. Aqui temos todos os nossos campos e também conversamos. E como você pode ver, nosso token é apenas uma string única que anexaremos a todas as suas solicitações no cliente e decodificaremos de volta no back-end, que faremos em nossos próximos vídeos. Por isso, implementamos com sucesso nosso método de registro também com validação e normalização para nossa API. 11. Implementação de login: Nos vídeos anteriores, mas implementamos totalmente nosso método de registro neste vídeo, queremos implementar o início do nosso usuário, mas na verdade eu quero que você tente fazer isso sozinho, porque será super parecido com o registro e já estamos preparados de tudo. Então, o que você precisa fazer com um dedo do pé? Em primeiro lugar, insights server.js, você quer criar uma nova rota. E, na verdade, aqui já temos nossa rota para registro. Agora precisamos criar um para o login. Por exemplo, podemos criar uma string slash api slash users slash login. Agora aqui em tal controlável deve criar um novo método de login. A questão é, obviamente, o que chegaremos lá e o que esse método deve fazer. E, na verdade, inserir Postman, podemos apenas tentar usá-lo. Então, aqui você terá um login de barra e, em vez de e-mail, nome de usuário, senha, simplesmente jogamos nosso e-mail de solicitação e senha. Não temos nome de usuário porque esse é o login e o e-mail é exclusivo. E aqui você tem duas variações possíveis, como você pode implementá-la. A primeira variante é mais fácil. Você simplesmente quer ler um e-mail do corpo. Você quer tentar encontrar o usuário dentro do banco de dados e retornar esse usuário de volta. E, na verdade, não se esqueça de usar o usuário normalizado porque precisamos dessa conversa. E também, se você quiser uma abordagem mais difícil, você também pode tentar validar não apenas o e-mail, mas também a senha para esse método de validação dentro do nosso modelo. Mas mesmo que você tente dar o primeiro passo sozinho, tudo bem. Se você quiser implementar um deles, basta pausar o vídeo agora e agora, vamos fazer isso juntos. Portanto, nosso primeiro passo será pular para dentro ou para as irmandades. Aqui queremos criar uma nova rota. Então, temos aqui um post porque este é um pedido de postagem seguindo o Guinean. E aqui temos o CPI slash users slash login. E aqui está o nosso método de login ponto do controlador de usuários, que criaremos em um segundo. Agora vou pular para salvar o usuário dos controladores e eles não copiarão colarão nada porque queremos e colarão nada porque queremos tentar escrevê-lo do zero. Então, aqui temos nosso método de login e sabemos que este é um método assíncrono em que recebemos nossa solicitação, que é a solicitação exatamente como no topo do registro interno. Em segundo lugar, temos aqui a nossa resposta, que é a resposta do tipo. O último é o próximo, esta é a próxima função. E agora, aqui dentro da nossa função, queremos escrever, tentar pegar. Então, dentro da gaiola aqui, teremos nossa era e eles só querem propagá-la para a próxima era. Por que isso? Porque, na verdade, aqui não teremos nenhuma regra de validação, mas vamos apenas verificar, oh, validação dentro da nossa tentativa e não dentro da captura. O que precisamos fazer lá dentro? Aqui, estamos recebendo nosso corpo de solicitação com e-mail e senha. E nosso primeiro passo é tentar colocar esse usuário dentro do banco de dados. Aqui podemos escrever um K. Precisamos do nosso usuário e tentar novamente com um modelo de usuário de peso para encontrar um. E como você pode ver aqui, encontramos por ID, encontramos e encontramos um. Então, na verdade, usar model.fit find tenta encontrar todos os documentos como uma matriz por algum predicado. Por exemplo, aqui podemos encontrar uma lista por campo ativo. Aqui, encontre um. Faremos o mesmo, mas tudo bem, apenas um único disco. É isso que queremos usar e, às vezes precisaremos encontrar um elemento por ID. Aqui temos uma boa multa pelo método. E como você pode ver aqui, também temos muitos outros métodos, como por exemplo, encontrar um e excluir e atualizar e assim por diante. Mas, por enquanto, usaremos find one e depois dissemos Devemos dar um predicado como um objeto. E aqui temos nosso e-mail e este é o e-mail do corpo de solicitação. Então, na verdade, esse único liner tentará encontrar nosso registro dentro da coleção do usuário por meio deste e-mail. Aqui, como você pode ver onde obter o documento do usuário. Mas na verdade isso não é verdade porque podemos chegar aqui agora e não um documento porque talvez a mulher não exista. Este é o caminho aqui. Quero verificar se não recebemos um usuário, então queremos lançar um erro. E para isso, podemos simplesmente retornar nosso status de ponto de resposta. Aqui temos foto para status como anteriormente. E aqui queremos jogar um pouco de JSON de volta. E, na verdade, aqui com não tem validações diferentes. Em qualquer caso, simplesmente lançamos login ou senha inválidos. Este é o caminho aqui no topo. Posso criar e salvar no objeto nossos erros. Então, aqui eu quero criar erros. Este é um objeto com campo, e-mail ou senha, por exemplo. E aqui o valor é e-mail ou senha incorretos. Portanto, o ponto principal é que temos exatamente a mesma estrutura de nossos erros, assim como temos em todos os outros lugares. Aqui, estamos apenas retornando nossos erros dentro do JSON. Se não tivermos um usuário. Depois disso, podemos responder com nossos usuários. Então aqui está areia e aqui podemos chamar nosso usuário normalizado e foram fornecidos inserir o usuário que encontramos. E, na verdade, se você escreveu esse código mesmo sem esse erro, verifique seu ouro, porque você tentou fazer algo sozinho. Agora vamos verificar se esse código está funcionando. Portanto, não temos nenhum erro aqui dentro do servidor da web. Vamos abrir nosso carteiro e clicar em Enviar. E como você pode ver aqui, na verdade, ele já está funcionando. Aqui está nossa barra api slash users slash login. Esta é uma solicitação de postagem com nossos dois campos. Aqui estamos recebendo o banco do usuário correto com o Tonkin. E, na verdade, se aqui, nosso e-mail não existe, envio oculto e estamos recebendo um objeto com e-mail e senha, e-mail ou senha incorretos, o que realmente significa que temos sucesso implementou nosso pulmão queniano do usuário. Mas aqui estamos perdendo apenas uma pequena coisa, e isso é validado pela senha, mas isso é extremamente fácil de usar Só porque já preparamos tudo dentro do nosso modelo. E só para lembrá-lo dentro do nosso modelo de usuário aqui na parte inferior, temos esse método de validação de senha e estamos usando aqui be crypt compare, onde estamos comparando a senha de o usuário com alguma string. Isso é exatamente o que queremos fazer aqui. Podemos apenas criar uma variável com a mesma senha. Aqui, queremos chamar o usuário dot validate password. E como você pode ver, temos aqui nosso preenchimento automático do TypeScript. E, na verdade, estamos obtendo esse preenchimento automático só porque, dentro do nosso documento de interface do usuário, escrevemos essa linha. Se você não escreveu essa linha aqui, então você não obterá esses preenchimento automático. Então, aqui temos nossa senha de validação e, dentro, queremos fornecer uma string para verificar se ela está correta. E esta é a senha do corpo da solicitação. E, na verdade, se essas senhas forem iguais, chegaremos aqui booleano. Mas, como você pode ver, estamos recebendo uma corda, o que significa que algo está errado. Vamos verificar nossa interface. Validar senha retorna uma string, está errado, deve ser booleano aqui. Agora é a mesma senha retorna falso booleano. E aqui podemos escrever alguma condição. Por exemplo, se nada for a mesma senha, queremos lançar exatamente o mesmo erro. Então, vou copiar e colar aqui. Desde o status dos dois erros JSON, vamos verificar isso. Estou sentado aqui e estamos recebendo esse bom usuário. Mas o que acontecerá se jogarmos aqui a senha incorreta? Estou clicando aqui enviar e estamos recebendo um erro. Então, vamos dar uma olhada no console. Aqui estamos recebendo uma mensagem bastante estranha, argumento ilegal, string indefinida. E como você pode ver aqui em nosso rastreamento de pilha, ele vem do nosso controlador e ouve da nossa linha Model Ts de origem por padrão. Então, vamos pular dentro do nosso modelo Ts linha 44. Como você pode ver, esta é a nossa grande comparação de criptas. A questão é: qual é o problema? É por isso que o que podemos escrever aqui é validar a senha. E aqui temos, antes de tudo, nossa senha e essa senha. E, na verdade, eu só quero ver isso aqui, saber que estamos no lado seguro. Nosso servidor é reiniciado. Então, vamos verificar o som. Estou pressionando enviar olhar sem fim para dentro do console. E como você pode ver aqui, quanto melhor vemos, primeiro lugar, validar a senha. Isso é uma string e aqui está o nosso objeto. Mas como você pode ver neste assunto, com não tem senha, é por isso que não podemos comparar o objeto com a senha porque não temos uma senha. Por que não temos? Porque na verdade aqui no topo, dissemos para a senha, selecione false, o que é completamente correto. Em 99 por cento dos casos, não queremos selecionar uma senha porque ela é segura. Mas, na verdade, neste caso específico , neste método de login não podemos trabalhar sem senha porque precisamos comparar nossa senha do usuário. É por isso que o que podemos fazer, devemos assumir que este encontre um. Então, ele também recebe uma senha. E para isso, podemos escrever dot select. Aqui está uma string dentro que estamos escrevendo mais a senha. E, na verdade, esta é uma notação muito boa porque podemos usar aqui mais senha, menos biografia e assim por diante. Se quisermos remover ou adicionar campos específicos, nesse caso, apenas para essa solicitação específica, estamos recebendo não apenas o usuário inteiro, mas também o campo de senha. E agora, se tentarmos de novo, estou batendo na areia. Podemos verificar e disse console. E agora estamos recebendo nosso usuário com senha, que é hash, e então não temos nenhum erro, mas não está funcionando corretamente porque aqui eu tenho uma senha errada e ainda estamos recebendo usuário, por que isso está acontecendo. E, na verdade, se aqui analisarmos nosso método de validação de senha, estamos usando aqui big crypt compare. A questão é o que estamos recebendo de volta aqui, podemos ver que os Taipings estavam recebendo uma promessa booleana. E isso é extremamente importante. Essa é uma operação assíncrona. Não é síncrono. É assim que devemos voltar para dentro da interface do usuário de nossos tipos. E aqui podemos dizer que estamos recebendo o booleano. Na verdade, é Rami do Booleano. E agora está completamente correto, porque agora, se entrarmos em nosso controlador aqui, usamos a senha de validação. Vemos que estamos recebendo de volta a promessa Boolean Now é a mesma senha prometida Boolean, que não é o que queremos. É aqui que podemos escrever um peso e isso resolverá nossa promessa. E aqui vamos pegar nosso booleano. Como você pode ver, o TypeScript realmente nos ajuda muito a entender as digitações corretas. E sempre podemos verificar o tipo que temos. Aqui. Estamos recebendo a mesma senha e agora ela deve funcionar. Vamos verificar isso dentro de Boltzmann. Estou na areia e estamos recebendo uma mensagem, e-mail com uma senha ou não está correto. Aqui com a senha correta, 123, estamos recebendo de volta nosso usuário e isso é exatamente a solicitação de login implementada. 12. Criar um middleware de auth: Neste vídeo, quero falar sobre middlewares. Então, o que é Middleware? Normalmente, quando estamos fazendo uma solicitação do cliente para o back-end, simplesmente lançamos essa solicitação dentro de nossa rota. E então dentro do controlador, isso é exatamente o que fizemos aqui dentro do nosso servidor de origem. Então, aqui temos dois pós-solicitação, registro e login, e simplesmente entramos em nosso controlador, o que na verdade significa que aqui insira o controlador, estamos recebendo solicitação e resposta. Middleware é algo que pode ser chamado antes de chegarmos aqui, o que na verdade significa que o middleware está sendo aplicado no back-end, mas antes que nossa solicitação seja dois pontos dentro do nosso controlador ou dentro de nossa rota, Kohlberg, fazendo isso middlewares em tudo. Se você precisar fazer algo com solicitação antes que essa solicitação entre no controlador, é exatamente quando você precisa de um middleware. Middleware, precisamos em nosso projeto? Esse é o middleware de autenticação. Por que precisamos disso? Imagine que toda vez que precisamos fazer algo com o Estrategista no usuário, precisamos verificar seu token, o que realmente significa em cada método, como por exemplo aqui registrar, estamos recebendo o token do usuário. Devemos passar esse token. Devemos validar esse token e encontrar o usuário atual com esse token. E não faz sentido escrever esse código em cada ação do controlador. É por isso que devemos criar um middleware que reutilizaremos em todos os lugares. É por isso que eu quero pular aqui dentro da pasta de origem e criar aqui uma nova pasta, que é chamada de meio. Enquanto aqui podemos armazenar todos os nossos middlewares. E o primeiro middleware que devemos criar é o owls dot ts. E, na verdade, o que é Middleware? Isso é só uma função. É por isso que aqui eu quero exportar a função padrão e síncrona. E você pode perguntar, ok, mas por que é um síncrono? Simplesmente recebemos nosso pedido e fazemos algo com ele. Porque, na verdade, aqui também queremos trabalhar com o banco de dados. Se tivermos um token, esse token é válido. Queremos ler uma ideia do usuário a partir desse token e obter esse usuário do banco de dados. Assim, podemos usar esse usuário que será preparado dentro do nosso controlador posteriormente. É por isso que é uma função assíncrona. Aqui estamos recebendo uma resposta de solicitação. E a seguir, exatamente como fizemos anteriormente, aqui, vamos digitar nossa solicitação, então temos nossa resposta. A última aqui será nossa próxima função, que será a próxima função de R expressa. E aqui vou inverter no topo nosso pedido e resposta. E essa função não retorna nada. É por isso que é uma função vazia. E dentro dessa função, queremos ler o token da nossa solicitação, mas não vou envolver diretamente todo o nosso código com try catch. Por que isso? Porque tentaremos fazer alguma solicitação assíncrona ao nosso banco de dados e ela pode falhar. É por isso que aqui é uma boa abordagem escrever try-catch onde estamos pegando nossa flecha e depois a captura lateral. Só queremos assumir riscos e status e aqui estaremos 401. Você pode perguntar, ok, mas por que não mostramos um erro aqui? Porque, na verdade, não nos importamos. Este é um middleware para verificar nossa autenticação. Se por algum motivo não pudermos analisar a conversa e falar e ouvir, válido. Não foi possível encontrar esse usuário em nenhum caso, isso significa que nosso usuário não está logado. É aqui que estamos diretamente com nosso status 401. Agora, aqui devemos ler nosso status. Então, aqui eu quero criar nosso cabeçalho e podemos obter nosso cabeçalho a partir de cabeçalhos de ponto de solicitação, autorização de ponto. Na verdade, isso significa que armazenaremos nosso token dentro do cabeçalho de autorização. E, na verdade, uma abordagem típica, espero que implementemos nossa autorização de dever é que temos aqui a chave de autorização, este é o nosso cabeçalho e o valor aqui será o token de espaço do portador. Então, aqui teremos um fluxo único. É por isso que devemos dividir nosso token de acordo. Mas antes de tudo, aqui lemos nosso cabeçalho e pode ser que ele não esteja definido. Nesse caso, podemos simplesmente dizer para 01, aqui é y. Se não tivermos nosso cabeçalho, podemos simplesmente copiar e colar esta linha com pausas e status para 01. Depois disso, realmente precisamos analisar nosso token. Então aqui vamos começar nossa conversa e esta é a nossa divisão de cabeçalho, e isso é apenas uma string que foi dividida por espaço. Então, estamos obtendo uma matriz com dois elementos. Como você pode ver aqui. Na primeira posição, teremos melhores. E na segunda posição , será a nossa corda. O que queremos obter, é aqui que pegarei o segundo elemento da matriz e ele será nosso token. Mas, como você pode ver aqui, estamos recebendo a mensagem do TypeScript. Esse objeto é possivelmente indefinido. E é por isso que eu gosto tanto do TypeScript. Isso ajuda muito durante o desenvolvimento. Qual é o problema? Na verdade, aqui temos nosso IV, vestimenta e status, o que significa que não viremos aqui. Mas o TypeScript entende que viremos aqui porque, na verdade, não tentamos aqui, retorne. E é por isso que esse código é inválido porque neste caso aqui, nosso cabeçalho pode ser esticado ou indefinido. Mas após essa verificação correta com return, ela pode ser apenas uma string válida. Portanto, a próxima etapa que precisamos fazer é verificar nosso token. Ao usar o GBT, esse é o caminho aqui, eu quero importar DVT do JSON Web Token. E só para lembrá-lo, esta é uma biblioteca que usamos para gerar um token no back-end, e agora precisamos validá-la. É por isso que aqui podemos tentar que estamos obtendo alguns dados do nosso token. E aqui estará o GBT verificando o interior. Bem, Python, antes de tudo, um token. Em segundo lugar, nossa chave secreta. E só para lembrá-lo aqui dentro de nossa configuração, nós temos nosso segredo. É por isso que aqui vou apenas tentar segredo e ele será enviado a partir de nossa configuração. E não precisamos fornecer opções adicionais para ouvir. Mas se verificarmos aqui nossa tensão de dados ou lote de TVP PE, mas na verdade sabemos que isso não está correto, não é isso que estamos começando por dentro. Se olharmos aqui, dentro de nossos usuários do controlador, aqui geramos nosso token e dentro temos ID e e-mail, o que na verdade significa que é válido aqui dizer após a verificação da derivada como. E aqui podemos dizer que estamos recebendo de volta um objeto com uma string D e também nosso e-mail, que é uma string, neste caso aqui agora nos dados estamos obtendo o banco de dados correto. Este é um objeto com um e-mail D e D. Então, estamos pegando aqui a ideia do usuário e agora podemos tentar buscá-la no banco de dados. Mas, para isso, precisamos usar nosso modelo. Este é o caminho aqui no topo. Podemos importar nosso modelo de usuário de nossos modelos. Então, aqui podemos pular de volta para dentro de nossos modelos slash, e aqui temos nosso usuário. Agora, após nossos dados, podemos fazer uma solicitação para recuperar um usuário. E, na verdade , aqui estamos usando um peso. Aqui teremos usado um ponto modelo. E aqui queremos encontrar o usuário pelo AD, e temos essa função por padrão dentro do mangusto. E aqui, em vez de uma div, podemos escrever o ponto de dados AD, e esse usuário estará lá, ou pode estar agora, é aqui que também precisaremos verificá-lo. Se não tivermos um usuário de volta, também queremos dizer que o usuário não está logado. Mas se tudo estiver bem, então queremos definir uma solicitação interna ao nosso usuário. Então, na verdade, a ideia principal é que essa solicitação seja atualizada por nós aqui. E mais tarde, quando ligarmos em seguida, essa solicitação chegará ao nosso controlador e, em seguida, teremos acesso direto a esse usuário. Este é o caminho aqui, eu quero escrever a solicitação usuário igual a usuário. E esse é esse usuário que obtivemos do banco de dados. E depois desse romance, basta ligar em seguida. E esta linha está dizendo que estamos prontos com nosso middleware e nossa solicitação pode prosseguir para nosso controlador. Mas aqui temos um problema, como você pode ver aqui, onde eu obtendo um usuário de propriedade de erro não existe na solicitação de tipo e, na verdade , é completamente válido. Esta solicitação vem do expresso e expresso internamente, não há usuário de campo. Então, o que podemos fazer aqui, a abordagem Ron será escrever aqui qualquer um e eu recomendo que você evite usar qualquer em seus projetos, porque TypeScript não pode realmente ajudá-lo. Você simplesmente tem seu código com buracos de JavaScript simples. Este é o seu aqui, Ras como qualquer outro, será uma abordagem super ruim. Por que isso? Porque aqui simplesmente dizemos que não nos importamos com as solicitações. Simplesmente dizemos que é qualquer usuário pontual e está funcionando. Essa é a abordagem para iniciantes. Não estamos escrevendo um código assim. Aqui. O usuário da solicitação está totalmente bem, mas essa solicitação não deve ser uma solicitação expressa. Devemos estendê-lo. E, na verdade, aqui dentro dos tipos, podemos criar um novo tipo e vamos chamá-lo interface de ponto de solicitação expressa, ponto ds. Agora, por dentro, posso criar essa nova interface. E vamos chamá-la de interface de solicitação expressa e, na verdade, ela deve se estender. Então, aqui está a solicitação estendida. E, na verdade, esse pedido virá diretamente do expresso. Então, aqui no topo, posso escrever uma solicitação de importação expressa. Então, o que estamos fazendo aqui, na verdade, simplesmente criamos uma interface e estendemos tudo o que tínhamos pedido interno para nossa interface. E agora aqui podemos simplesmente dizer que temos um campo, o usuário, que pode estar indefinido, e este é o nosso documento do usuário. Aqui você pode tarefa ou k, Mas por que o usuário pode ser indefinido aqui não temos um caso em que o usuário de solicitação interna é indefinido e você está totalmente certo, mas não estamos usando middleware com cada solicitação. Às vezes, não teremos um usuário dentro de nossa solicitação porque nem todas as solicitações precisam ser autorizadas. E agora podemos simplesmente copiar colar essa interface de solicitação expressa e pular definir nosso middleware e colocá-lo aqui em vez de solicitar. Então, agora eu preciso importar middleware de solicitação expressa. Não estamos mais usando solicitações do express. Estamos usando a versão regular estendida. E agora não temos nenhum erro. E o que estamos recebendo aqui é uma solicitação completa do express mais nosso campo de usuário. E essa é exatamente a abordagem correta para usar o TypeScript. Então, criamos com sucesso nosso middleware. Agora precisamos usá-lo. E para isso, quero criar uma nova rota. Bem, vamos pegar o usuário atual falando. Então, vamos voltar atrás e dizer servidor de origem. E aqui temos dois trilhos posteriores aqui. Agora eu quero criar o apt-get e temos aqui barra API slash user. Essa é a rota para buscar o usuário atual. Agora, depois disso com vírgula, eu quero escrever middleware. E, na verdade, neste arquivo, não declaramos qual é o nosso middleware. Então, precisamos inserir aqui nosso middleware a partir de nossos middlewares. Então aqui temos horas de middlewares. E isso é exatamente o que faremos. Se você está escrevendo assim, então você aplicará esse middleware antes de sermos dois pontos aqui controlador. E aqui obteremos o ponto do controlador de nossos usuários, por exemplo, a ação atual do usuário, o que na verdade significa, antes de tudo , nesta rota, esse middleware coruja será executado se obtivermos uma solicitação do usuário é ir para o controlador, então onde campeão aqui. E como você pode ver com o express, é muito fácil de ler e entender. Agora eu quero pular para dentro do controlador de usuários e criar esse novo método. Então, vamos ao fundo, criar nossa nova função, que será um usuário atual. E aqui sabemos que estamos recebendo solicitação e resposta, mas importante, mas aqui não estamos usando solicitações expressas, estamos usando nossa versão estendida. Então, aqui vou escrever dessa forma, obtenho uma interface de solicitação expressa. E o próximo parâmetro aqui será a resposta levantada. Está permanecendo o mesmo de antes. E aqui, dentro da nossa função, devemos aplicar alguma lógica. O que queremos fazer aqui, na verdade, dentro do usuário atual, podemos obter esse usuário diretamente da solicitação. Aqui podemos dizer pontos de vestir e normalizar o usuário, assim como fizemos no topo. E aqui solicitaremos esse usuário. E, na verdade, funcionará principalmente porque o que estamos fazendo aqui, estamos usando nosso usuário a partir da solicitação para jogá-lo dentro do usuário normalizado. E só para lembrá-lo, nós normalizamos o usuário aqui no topo. E isso é apenas um documento de usuário normal. E geramos aqui falando nossa resposta e a enviamos de volta. Mas, na verdade, aqui temos o TypeScript. O que isso significa? Aqui estamos recebendo um argumento de erro do tipo documento do usuário ou indefini-lo. Ele não pode usar um documento. E isso é totalmente válido porque dissemos que dentro da nossa solicitação nem sempre temos um usuário. E, na verdade, o ponto é que essa lógica nunca vai acontecer porque dentro do nosso servidor aqui, vamos lançar esse middleware, o que na verdade significa que, se não tivermos usuário, então esse middleware doméstico retorno para 01. Mas o TypeScript não se importa com nosso middleware porque simplesmente lê nossa função. E se eu estiver apenas olhando nossa função sem nosso middleware, então nosso código é inválido por isso, porque aqui estamos tentando jogá-lo indefinido dentro do usuário normalizado. E para lidar com isso para o TypeScript, devemos tentar aqui. Com não ter um usuário, então queremos lançar 401. Então aqui podemos escrever return, res, send status, e aqui dentro para 01. Nesse caso, é totalmente válido para TypeScript porque aqui no usuário request, não pode ser indefinido com isso verificou aqui? E, na verdade, esse código é muito melhor porque neste caso aqui temos essa única função e podemos testar completamente isoladamente, mas não nos importamos com essa função, o que fizemos fora com funções adicionais, middleware sobre terror com nota mais simples de que essa função funcionará corretamente em todos os casos, porque cobrimos todos os casos aqui, nossa função deve ser implementada corretamente. Vamos verificar se está funcionando. Estou pulando para o servidor e temos algum erro. Vamos verificar o que temos. E, na verdade, aqui você pode ver que era a era do TypeScript e a última compilação foi bem-sucedida. Começamos o observador conectado ao MongoDB e aqui está nossa API. Assim, podemos ir diretamente para o Postman e tentar fazer uma solicitação GET. Mas dentro de nossa solicitação, devemos fornecer um token. Este é o caminho aqui. Vou copiar e colar para conversar porque devemos usá-lo. E para isso criarei aqui a solicitação GET. E isso é slash api slash user. Só estou acertando aqui enviado. E como você pode ver, estamos chegando aqui sem autorização. Por que isso? Porque a autorização interna com não forneceu um token válido. Mas se em vez dessa corda, eu vou colar nossa conversa tão Birra do que espaço. E então nós temos nossa corda, eu estou apertando aqui enviar, e funcionou magicamente. E aqui estamos recebendo nosso usuário normal com o Tonkin. Mas o mais importante é que não experimentamos. Toda essa lógica com a obtenção do usuário atual aqui dentro desse método, é escrita dentro do middleware. E agora podemos usar nosso middleware em todos os lugares onde queremos verificar o usuário atual ou se precisamos das informações do usuário atual dentro do nosso controlador. 13. Criar módulo de auth: Nos vídeos anteriores sempre serão preparados alguns pedidos de Pi para o nosso usuário registrado e o usuário atual. Então, agora não seria bom começar a implementar algo no front-end. É por isso que aqui eu quero entrar no nosso cliente. E aqui eu quero começar com nosso módulo de usuário. E o que teremos em nosso módulo de usuário são duas páginas fazendo login e registrando. Mas não basta ter apenas duas páginas para se registrar e fazer login dentro do nosso módulo, também precisaremos de um serviço para trabalhar com o usuário atual. Por exemplo, precisamos registrar o usuário, fazer login do usuário, obter o usuário atual, e assim por diante e até esse loop, precisamos de uma interface para o nosso usuário atual também, é aqui que neste vídeo, vamos nos concentrar noções básicas do nosso módulo de autenticação. Para isso, quero entrar na pasta do aplicativo de origem. E aqui eu quero criar uma nova pasta. Aqui queremos isolar tudo, o que está falando sobre autenticação, o registro está começando. Nosso primeiro passo aqui é criar um módulo. E se você não está familiarizado com o Angular, apenas duas palavras sobre módulos dentro do Angular, dentro de outras estruturas, como por exemplo, reagir, simplesmente usamos importações e exportações, Bot Insight angular, temos muito mais, temos injeções de dependência, que na verdade significa que todo o aplicativo está dividido em módulos diferentes. Por exemplo, no nosso caso, estamos definindo o módulo aqui e agora. Agora podemos criar coisas diferentes dentro deste módulo e elas serão isoladas dentro desse módulo. E podemos definir o que queremos expor para uso externo. E se não expusermos nada para uso externo, não podemos simplesmente usar as coisas deste módulo. E essa é realmente uma boa abordagem para grandes aplicações. Vamos criar, antes de tudo, nosso módulo. Para isso, precisamos exportar nossa classe, nosso módulo. Agora, no topo desta classe, queremos fornecer um decorador de módulo NG. E por dentro passaremos coisas diferentes, mas por enquanto não precisamos registrar nada aqui ainda. O que eu quero fazer agora, quero voltar para dentro do nosso módulo de aplicativo, porque, na verdade, precisamos registrar esse módulo dentro do nosso módulo de aplicativo. Em outro caso, este módulo não vincula ao nosso aplicativo porque estamos apenas carregando um módulo e devemos colocar todos os módulos filhos também dentro dele. É aqui que aqui dentro dos pássaros, podemos simplesmente escrever nosso módulo. E com esta linha onde obter uma entrada automática aqui no topo. E agora temos certeza de que nosso módulo está carregado. Nosso próximo passo aqui é criar uma interface de usuário atual. E do meu ponto de vista, não tem nenhuma relação com o módulo corujas. Então aqui podemos criar um novo tipo de pasta e registrar aqui, ponto ts da interface do usuário atual. E dentro do nosso projeto Express, não tínhamos nenhuma regra sobre a nomeação de arquivos porque lá acabamos expressar e tudo o que estamos escrevendo, simplesmente escrevemos com nossas próprias diretrizes digamos o angular, é altamente recomendável nomear todos os nossos nomes de arquivo, Start e depois postfix da entidade. Por exemplo, aqui escrevemos o módulo de pontos porque é um módulo anunciado. Neste caso, estamos bem aqui, interface de pontos porque será uma interface e exatamente o mesmo acontece com as classes. Aqui não estamos escrevendo corujas de classe, mas nosso módulo. E aqui dentro do CurrentUser, estamos bem aqui, interface especializada, e aqui temos nossa interface de usuário atual. Agora, a questão é o que vamos entrar? E é fácil responder que só precisamos olhar para dentro do nosso carteiro. Então, aqui estamos voltando para nosso usuário atual, e-mail, nome de usuário, ID e token. Então, podemos simplesmente escrever aqui que obtemos um DStream. Temos nosso token, que é string. Nós temos o nome do nosso usuário. Também é string, e o último é o nosso e-mail. E com isso, temos sucesso ao definir nossa entidade de usuário atual em nosso cliente. E agora, em todos os lugares em que estamos falando sobre o usuário atual, podemos usar essa interface. Nosso próximo passo aqui é criar uma classe, porque, na verdade, antes de começarmos criar componentes para registro e leucemia, mas devemos criar um serviço que se comunique com nossa API. E o serviço com certeza pertence ao nosso módulo. É por isso que aqui vou criar uma nova pasta, serviços e quero criar aqui o ponto services.js. Na verdade, é realmente um bom nome se você não sabe como nomear seu serviço. Se você quiser apenas empacotar alguns métodos dentro do seu serviço dentro do módulo e você realmente não sabe do que se trata esse Methods II. Você pode simplesmente nomear o serviço como um módulo. No nosso caso, temos aqui nosso módulo e nosso serviço. Mas se você for o serviço em algum momento será muito grande. Você sempre pode se separar. Pode ser no serviço de login, registro, serviço, Serviço de Usuário Atual, o que você preferir. Por enquanto, nosso serviço está completamente bom. Aqui eu quero exportar o novo serviço de horário de aula. Agora, é super importante não esquecer de escrever no topo injetável. Porque se você quiser, tente esta única linha, será muito difícil depurar um problema. Suas entradas funcionarão, mas você obterá alguma mágica no console. É por isso que nunca se esqueça do injetável se estamos falando de serviços, agora devemos registrar o serviço dentro de um módulo. E isso é exatamente, está indo na direção de injeções de dependência e módulos dentro do Angular. Então, o que queremos fazer aqui, queremos criar um novo campo chamado provedores. E aqui está uma matriz e estamos escrevendo dentro do nosso serviço. Portanto, essa é exatamente a maneira correta de registrar todos os serviços dentro do nosso módulo. Agora queremos criar nosso primeiro método aqui e ele será obtido do usuário atual. Bem, aqui podemos simplesmente escrever que queremos criar, obter a função do usuário atual e ela retornará rapidamente observável do usuário atual. E neste ponto, você pode ter perguntas se você não conhece Angular tão profundamente, e se você não sabe quais são nossos observáveis e este fino com genérico aqui pode ser confuso para você. Então, o que é observável? Isso é apenas uma representação do fluxo. Então, o que é stream? Isso é algo que mudou ao longo do tempo, o que realmente significa que podemos nos inscrever no stream. E quando a mudança estiver acontecendo no fluxo, obteremos um novo valor. Então diga o angular, tudo está trabalhando no amor com fluxos quando não está usando promessas. que realmente significa fluxos e observáveis, é um padrão específico, como escreveremos nosso código. Então, o que estamos dizendo aqui é que estamos recebendo de volta um observável. E aqui estamos fornecendo o tipo de dados que estamos recebendo de volta. E no nosso caso, estamos dizendo aqui que essa função deve retornar um observável do tipo interface do usuário atual. interface do usuário atual é exatamente nosso objeto de usuário atual. Agora, dentro, queremos buscar alguns dados e, para isso, dentro do Angular, temos HTTP. É por isso que aqui vou escrever construtor e dentro privado, http é igual ao cliente HTTP. Então, o que esta linha está fazendo no topo, essa notação com construtor, então privada alguma variável é igual a alguma classe é como estamos injetando algumas dependências dentro de um serviço. E está tudo bem se for um pouco assustador para você ver esse código, vamos escrever exatamente o mesmo código repetidamente em cada vídeo. Por enquanto, você só precisa entender que devemos usar HTTP aqui dentro do nosso serviço. É aqui que devemos injetar esse cliente HTTP. E agora aqui em nossos métodos, podemos usar esse ponto HTTP e dinâmico é aqui que queremos usar o método GET para obter nosso usuário. Então, o que eu quero fazer agora eu quero criar um URL. E, na verdade, aqui podemos simplesmente colar http localhost 4.001 slash api slash user, e simplesmente jogamos aqui nosso URL. E agora precisamos retornar esse URL HTTP GET. Mas aqui estamos recebendo um erro. tipo de objeto observável não é atribuível à interface do usuário atual observável do tipo, por que isso está acontecendo? Porque eles realmente HTTP GET retornando por padrão observável fora do objeto porque nosso HTTP GET Cantril e sabe quais dados estamos recebendo de volta quando não, é apenas nós mesmos em nosso aplicativo, mas podemos fazer aqui, devemos especificar o que estamos recebendo de volta. E neste caso aqui estamos dizendo, ok, esse HTTP GET específico por esse URL retornará interface de usuário atual falsa e não apenas um objeto aleatório. É por isso que, neste caso, quando não está recebendo nenhum erro, porque essa única linha está retornando rapidamente observável da interface do usuário atual. E você só deve se lembrar que todo esse HTTP retornará para nós sempre observável de algo. Agora, a próxima coisa que é muito ruim é essa linha. Por que isso? Em primeiro lugar, aqui estamos diretamente na base da estrada aqui. Essa é uma abordagem super ruim. Por que isso? Porque essa linha vai quebrar na produção. É adequado apenas para desenvolvimento. E precisamos escrever exatamente o mesmo código repetidamente em cada método, isso é ruim. Para isso, temos variáveis de ambiente dentro do Angular. Podemos voltar para dentro ambientes de origem e aqui ambiente, sim, é exatamente aqui que devemos definir todas as nossas constantes com base em um ambiente específico. Então, o que devemos fazer aqui, podemos criar um novo URL da API de propriedade e podemos simplesmente colar nosso fluxo aqui. Então, host local para 1001 slash API. E isso é totalmente bom porque aqui em nosso ambiente de desenvolvimento onde definido na URL da API também terá aqui ambiente para produção. E podemos definir diferentes URLs de API lá. Essa é a maneira mais correta de fazer isso. Agora podemos usar o ambiente aqui e, como você pode ver, estamos recebendo uma URL de API de ponto de entrada externa plus. E aqui simplesmente precisamos usar slash user e nada mais. Nesse caso, estamos reutilizando esse URL de ambiente e ele está completamente isolado dentro da variável de ambiente, nossos serviços estão totalmente prontos. Mas o que queremos fazer, queremos que esse usuário sempre que carregarmos nosso aplicativo angular. Por que isso? Porque eles realmente foram roubados. Nosso usuário atual normalmente está na memória e depois de fazer login ou registro, estamos simplesmente falando dentro do armazenamento local. É por isso que toda vez que estamos entrando em nosso aplicativo, precisamos obter o usuário atual. Para isso, quero voltar para dentro do nosso componente de aplicativo. E esse é exatamente o componente que será carregado em qualquer página. Aqui podemos escrever implemento no init. E se você não sabe o que não está nele, este é um método especial que será chamado na inicialização do nosso componente. Aqui estou certo em engenharia nisso. E então disse que podemos usar nosso serviço, mas para usá-lo, devemos injetá-lo aqui. E aqui estamos escrevendo exatamente as mesmas coisas que escrevemos dentro ou no serviço. Privado, não HTTP como fizemos no serviço, mas nosso serviço que acabamos de criar. E aqui devemos inserir nosso serviço, que está dentro do nosso módulo. E agora podemos usá-lo aqui diretamente dentro do motor nele. Então, este é o nosso serviço e nós temos aqui o método do usuário atual. Mas o que é mais importante esses retornos para nós e observáveis. E normalmente queremos fazer algo para ouvir as mudanças do observável. É por isso que aqui vamos tentar assinar pontos. E agora, inscreva-se aqui, obteremos algumas informações. Então, aqui vou apenas escrever rads e log do console Ras para que possamos verificar se está funcionando. Vou pular para o navegador e recarregar a página. E só para lembrá-lo, seu servidor web cliente também deve ser iniciado. Aqui estamos recebendo um erro. Serviço de cliente HTTP, nenhum provedor para cliente HTTP. O que isso significa? Isso significa que usamos o cliente HTTP em nosso aplicativo, mas não injetamos um módulo de cliente HTTP dentro de nosso aplicativo. Essa é a maneira de consertar isso. Devemos pular dentro de um módulo e aqui devemos importar o módulo cliente HTTP. Nesse caso, nosso erro será corrigido. Vamos recarregar a página. Como você pode ver agora, ele está funcionando, mas aqui estamos recebendo um erro sobre a solicitação de origem cruzada. E, na verdade, isso está totalmente correto porque não configuramos corretamente nosso aplicativo de back-end Express para funcionar com solicitações de origem cruzada. É por isso que podemos simplesmente voltar para dentro do nosso servidor. E aqui em camadas de servidor de código aberto, nosso próximo passo será instalar um pacote adicional. É por isso que vou entrar no nosso servidor. E aqui, npm install course and course é o pacote mais popular para resolver problema do curso com o aplicativo Express. Vou pular de volta para dentro da irmandade S. E aqui posso escrever no curso de entrada superior, corpo de bateria. E agora a única coisa que devemos fazer aqui é antes que nosso analisador corporal, por exemplo, possamos escrever um banco e estamos fornecendo um curso de insight como uma função. Como você pode ver, não temos nenhum erro agora dentro do back-end e podemos recarregar nossa página de front-end. Como você pode ver agora, com a era do não ter discurso e estamos ficando não autorizados. Vamos verificar o que temos dentro da rede. Temos essa solicitação para o usuário, e se eu for torná-lo um pouco menor, podemos ver o que estamos recebendo dentro dos cabeçalhos de resposta e estamos obtendo aqui o controle de acesso permitir estrela de origem. E, na verdade, é por isso que está funcionando. Nosso back-end, configure-o corretamente. Isso permite a origem do acesso. É por isso que não estamos recebendo um erro do navegador. Mas como você pode ver aqui, estamos recebendo 401 não autorizados. E, na verdade, isso é completamente normal. Não estamos logados em nosso aplicativo. Simplesmente buscamos o usuário atual e recebemos um erro. Isso é totalmente bom. O que não está bem com não reagiu de forma alguma a essa solicitação autorizada. Então, o que podemos fazer, podemos voltar para dentro do componente do aplicativo onde escrevemos esse código. E também podemos lidar com um erro. E para isso, podemos escrever dentro do Subscribe, não uma função, mas um objeto. Aqui dentro do objeto , podemos ter dois campos. Em primeiro lugar, depois, esse é exatamente o nosso sucesso. E como você pode ver aqui, estou deixando essa função como está. Mas depois disso, podemos criar um erro. E nesse caso, é isso que acontecerá se tivermos um erro. Então, aqui podemos simplesmente escrever erro do log do console e talvez queiramos ver a Sarah, vamos verificar o que estamos recebendo. Estou recarregando a página e estamos recebendo nosso erro, resposta de erro HTTP. E aqui não temos autorização e podemos reagir nesta era. Então, o que eu quero fazer agora, eu quero criar definir a função do usuário atual. E, na verdade, não faz muito sentido porque não temos sorte, mas ainda precisamos salvar informações dentro do nosso aplicativo de que o usuário não está bloqueado. Nesse caso, todo o aplicativo, cada componente pode verificar, estamos presos de vez em quando nosso componente sabe como reagir a isso. É por isso que devemos voltar para dentro do nosso serviço. E aqui eu quero criar um novo método definido usuário atual. Aqui dentro, estamos recebendo o usuário atual, que é nossa interface de usuário atual. E isso retornará um vazio porque, na verdade, apenas alteraremos os dados internos e não retornaremos nada. E, na verdade, não está totalmente correto. Aqui está a interface do usuário atual ou null se não tivermos um usuário atual. Porque na verdade, se não estivermos bloqueados no Poupon para definir o usuário atual para agora. Agora, a questão é o que estamos recebendo lá dentro? Normalmente, o que você verá em muitos aplicativos. As pessoas simplesmente definem uma propriedade local dentro de horas, como usuário. E então aqui você pode simplesmente escrever esse usuário é igual a usuário. Essa não é a melhor abordagem com o Angular. E dentro do Angular, é super confortável e eficiente trabalhar com fluxos porque é muito mais fácil reagir aos fluxos e combiná-los. É por isso que devemos usar uma abordagem mais difícil, mas é mais adequada para grandes aplicações. Está correto. É aqui que eu quero escrever que estamos chegando aqui, fluxo de usuários atual. Aqui. Eu quero criar um novo comportamento como sujeito, e ele diz comportamento um assunto. Estou dizendo que estamos chegando aqui interface do usuário atual ou agora, ou indefini-la. E depois desses colchetes redondos, e aqui estamos dizendo indefinido por padrão. Então, o que eu escrevi aqui e como vamos usá-lo. Na verdade, o que é assunto de comportamento? Isso é apenas uma representação de fluxos. Isso é apenas um fluxo que tem um valor padrão. Nesse caso, nosso valor padrão é indefinido, e também podemos definir dentro do fluxo tipos como interface do usuário atual agora ou indefinido. E agora dentro do usuário atual definido, podemos mudar o fluxo. Podemos escrever aqui este ponto do usuário atual. E para mudar o fluxo, estamos usando o ponto seguinte e estamos fornecendo valor a você. Neste caso, estamos fornecendo o usuário atual e é totalmente válido porque a interface do usuário atual é um tipo válido. O ponto principal é aqui que muitos componentes dentro de nosso aplicativo podem se inscrever neste fluxo de usuários atual, e eles serão saqueadores automáticos encerrados neste momento aqui, quando nós Você está alterando o valor dentro do fluxo atual do usuário. E não se preocupe, se você não estiver entendendo completamente, você verá como estamos usando isso em palestras posteriores. Então, criamos com sucesso nosso usuário atual definido. Agora, aqui dentro do nosso componente de aplicativo, pelo menos por engano, podemos fazer algo. Podemos definir nosso usuário atual dois. Agora, aqui vou escrever este ponto nosso serviço dot set usuário atual. E aqui dentro eu vou agora. Então, o que está acontecendo aqui em Inicializar nosso aplicativo, estamos chegando aqui usuário atual. Se não obtivermos o usuário atual, estamos definindo-o como nulo. E agora você quer com certeza me perguntar por que eu escrevi aqui agora e defini-lo e usuário atual, faz algum sentido definir aqui usuário atual e agora, mas não indefini-lo. Além disso, eles fizeram isso com o propósito porque na verdade, devemos lidar com três estados diferentes. Em primeiro lugar, por padrão, nós o definimos, o que na verdade significa que, para nós, ainda não buscamos o usuário atual. Não está pronto se estamos sentados aqui agora, significa que buscamos o usuário atual, mas não teve sucesso. Não estamos trancados. Então, agora aqui significa que não estamos trancados. E a interface do usuário atual obviamente significa que estamos presos. Por isso, criamos com sucesso nosso módulo, nosso serviço, interface de usuário atual e algumas funções básicas que precisaremos nas próximas palestras. 14. Página de registro - Marcação + Formulário: No vídeo anterior, preparamos muitos funcionários em relação ao usuário atual. Neste vídeo, quero me concentrar em criar nossa página de registro porque a torta para registro já estará implementada. E para isso, primeiro precisamos criar um novo componente. É por isso que aqui estou dentro das horas do aplicativo aqui, precisamos criar uma nova pasta chamada componentes. O primeiro componente que podemos implementar é o registro. E aqui está uma palavra importante. Na verdade, mais tarde, implementaremos dois componentes, registro e login. As diferenças entre esses dois componentes não são tão significativas. Temos no registro, campo adicional, nome de usuário e login com, não temos esse campo. Então temos diferentes A borracha do pneu. É isso aí. Tudo. Outras coisas continuam as mesmas. É por isso que temos duas possibilidades. Poderíamos criar um único componente e gerenciá-lo apenas entre o login e o registro. Ou podemos criar dois componentes diferentes. Eu prefiro criar dois componentes diferentes só porque é mais fácil de manter mais tarde, mesmo quando duplicamos um pouco o código. Então, aqui vamos criar uma nova pasta e chamá-la de registro. Agora, dentro dessa pasta, devemos criar o arquivo ts, um arquivo HTML. E aqui teremos registrado dot component dot ts e também registrado dot component dot HTML. Agora, dentro de nosso componente, devemos conhecer nosso novo componente de registro de classe e, em seguida, dizer esse componente, devemos primeiro fornecer um seletor. Aqui você tem uma decisão importante. Você pode nomear todos os seus seletores começando com o nome do seu aplicativo. Por exemplo, você cria algum prefixo que é válido dentro do aplicativo. Por exemplo, no nosso caso, podemos chamá-lo de L Trello ou apenas L. E então você tem uma diferença entre todas as bibliotecas que você usa e os componentes do nosso projeto. Porque, na verdade, se estamos pulando dentro do HTML, aqui temos L register, então sabemos que isso é um componente do nosso projeto. Se você tem aqui, por exemplo, prefixo vazio e depois um botão, você entende o k. Esta é uma biblioteca de materiais e não é nosso projeto. Esta é a primeira abordagem possível. Eu prefiro outra abordagem em que eu prefixe cada componente dentro do módulo, o que na verdade significa que agora estamos dentro do nosso módulo. É aqui que o seletor estará lá fora registrado. É muito mais fácil porque não usaremos bibliotecas. E, nesse caso, podemos ver de qual módulo estamos obtendo esse componente. A próxima coisa que devemos fornecer dentro do nosso componente é o URL do nosso modelo. E esta é a URL do nosso componente de registro HTML. Agora, não devemos esquecer de registrar nossos componentes dentro do nosso módulo. Aqui estamos pulando dentro do nosso módulo Ts, e criamos aqui uma declaração de campo. E dentro agora podemos escrever componente de registro e delta E importado de componentes registrados, registrados. Portanto, nosso componente está lá. Agora podemos escrever algumas marcações para nosso componente dentro do nosso componente de registro, sim, e na verdade aqui eu perdi letra S na palavra register. Agora vamos criar um marcador para nossa página de registro. E a primeira classe que temos aqui é div com página de login da classe. E pode ser confuso para você, mas isso ocorre apenas porque nossos estilos foram escritos para a página de login e é exatamente o mesmo que a página de registro. Então, aqui temos nossa página de login div, e agora dentro teremos um link na parte superior. Aqui temos um link de roteador e aqui está a barra. Então, essa rota está indo para nossa página inicial. Dentro do link do nosso roteador, queremos uma imagem. Então, aqui estará a fonte da imagem slash acids, slash Trello, logo dot SVG. E depois desta aula, lei do fio, logotipo principal. E neste momento você quer dizer com certeza, ok, não temos nenhuma imagem. Isso é especialmente para você preparar todas as imagens e colocá-las dentro dessa pasta, dentro de ativos. E você pode pegar todas essas imagens do arquivo desta lição específica na caixa de descrição abaixo, como você pode ver aqui, dentro da fonte, dentro dos ativos, eu tenho muitas imagens, então não se esqueça para levá-los para o nosso projeto. Agora vamos voltar para dentro de nosso aplicativo, nossos componentes se registram, registram HTML e, depois de nossa tag a aqui no topo, queremos criar div com contêiner firme de classe e será nosso contêiner para o nosso formulário. Agora, dentro do contêiner, queremos primeiro escrever o cabeçalho de login da classe def. E, novamente, temos a classe do login, mas não é grande coisa. E aqui estamos escrevendo um registro para o Trello. Depois disso, escreveremos uma classe para erros de validações. E, na verdade, por enquanto, não vamos colocar nenhum erro dentro dele, mas vamos usá-lo mais tarde. Este é o y aqui, apenas erros de classe div estavam fechando. Está completamente vazio e nada é renderizado lá ainda. Agora, depois disso, temos nosso formulário. Então, vamos abrir e fechar a tag do formulário. E dentro de nós temos campos específicos. Então, primeiro de tudo, aqui temos um e-mail, então digite e-mail. E aqui queremos colocar o e-mail do titular. E o último será a entrada de login da classe. Agora eu quero copiar e colar esta linha duas vezes porque não precisamos apenas de e-mail, mas também precisamos aqui do nome do nosso usuário. Então, aqui não precisamos do Type. espaço reservado será nome de usuário e classe. Estaremos procurando informações. E depois desse tipo senha e senha do titular do lugar. Depois disso, podemos criar nosso botão para registrar o usuário. Aqui estaremos tipo de botão, enviar, aula, login, botão enviar. E dentro desse botão, vamos experimentá-lo para um registro. Depois do nosso formulário, queremos renderizar nossos links. Então, aqui teremos links de formulário inferior da classe div. Vamos fechar essa div e criar um único link para nossa página de login. Então, aqui estará um link de roteador. Novamente. Aqui teremos a página de login da barra e o link de registro da classe. Aqui dentro da nossa tag a, simplesmente executaremos o login. Vamos verificar se alguma coisa é renderizada. Na verdade, queremos pular para a página de registro e ver nossa página, mas não funciona porque não registramos nossa rota. Registrado. Para isso, devemos voltar dentro do nosso módulo, nosso módulo. E aqui devemos registrar todas as rotas que queremos criar dentro desse módulo específico. É aqui que aqui no topo podemos criar um array de rotas e podemos dizer que isso é redondo e, neste caso, não será apenas um array. Teremos dentro da validação de cada rodada. Então, aqui precisamos adicionar um objeto com nosso caminho que será registrado e nosso componente que acabamos de criar. E é componente de registro. Nesse caso, ele funcionará depois que adicionarmos essas rotas às nossas entradas. É aqui que devemos direto nos pássaros e usar o ponto do módulo de rota ouvir para crianças. E é importante usar aqui para crianças e não franzidas porque queremos criar o Strauss dentro ou um módulo filho, não dentro do módulo do aplicativo. Aqui está aqui para rotas filho e rotas para este módulo específico. Agora vamos verificar isso. Vou recarregar a página e pular para o registro de barra. E como você pode ver neste caso, ele foi renderizado. Podemos ver nosso telefone sem nenhum CSS, e aqui está nosso arquivo SVG que fornecemos na parte superior. Então agora sua pergunta é certa, enquanto é nosso CSS e esse é o ponto. Também preparei todo o CSS para o nosso projeto. Portanto, estaremos totalmente focados apenas no Angular e escreveremos na lógica de negócios. É por isso que você deve usar o código-fonte do nosso projeto no vídeo. E, em seguida, dentro da pasta de origem, dentro de styles.css, você deve copiar essas linhas. E como você pode ver aqui, tudo isso está em partes dos estilos de Nova Pasta, que você também deve copiar. Portanto, você precisa copiar duas coisas, pasta de estilos de origem e estilos de origem, CSS, você deve substituir esse arquivo. Então, dentro de nossos estilos de origem, temos muitos estilos diferentes. Como você pode ver aqui. Por exemplo, criar tarefa. Temos tudo relacionado à criação de tarefas. E todos esses estilos são globais e usaremos estilos mais antigos apenas para nos concentrarmos totalmente no aplicativo Angular. Além disso, quero lembrá-lo de que nosso arquivo global, estilos de origem, CSS, é usado automaticamente pelo Angular, o que significa que se você escreveu esses símbolos aqui, ele funcionará imediatamente. E agora, se vamos recarregar a página, temos aqui, nossa marcação. Então, temos aqui o ícone do trello, e este é, na verdade, um link para a página inicial. E temos nosso formulário de cadastro com e-mail, nome de usuário e senha. O único problema está aqui, olá l Trello que podemos ver no canto. São apenas algumas sobras dentro do nosso aplicativo de origem, o componente HTML do aplicativo. Aqui podemos remover essa linha e apenas viver aqui tomada do roteador. Então, aqui criamos com sucesso nossa página de marcação para registro. Agora siga em frente para vincular de alguma forma essa forma junto com Angular. E, na verdade, dentro do Angular, temos formas reativas. E este é um módulo Angular adicional para trabalhar com formulários no xadrez desta semana. Este é y. Vamos voltar para dentro de nossos componentes, registrar, registrar componentes ts. E aqui, antes de tudo, quero colocar dentro do nosso formulário, novo grupo de formulários de atributos. E aqui vou tentar que seja igual à forma. E aqui também precisamos do NG Submit para enviar o formulário. E aqui vamos criar no Submit. Agora, a questão é o que é esse grupo de formulários? E, na verdade, dentro de formas reativas, podemos criar um grupo de formulários dentro de um componente. E será uma representação do nosso formulário HTML. E será totalmente vinculado aos nossos elementos HTML e funcionará imediatamente. O que queremos fazer aqui dentro da nossa turma, queremos criar nosso formulário. E isso é, na verdade, esse grupo de pontos se b. E não temos B dentro do nosso componente. É por isso que devemos inserir o construtor injetado. Então aqui vou escrever privado if b, e este é o construtor de formulários. E como você pode ver, ele foi importado de formas angulares. Agora, aqui no topo, temos acesso a esse grande grupo e aqui está o nosso formulário. Então, quais campos temos? Em primeiro lugar, temos um e-mail e, na verdade, aqui podemos dizer como um array nossos validadores, então o valor inicial aqui está vazio e aqui podemos escrever validadores dot required, neste caso formulários reativos. Por padrão, verificaremos se esse campo está vazio. Agora podemos copiar e colar esta linha porque temos exatamente o mesmo. Temos aqui nosso nome de usuário, também campo vazio e validação necessária, e aqui está nossa senha. Também é um campo vazio por padrão e é necessário para que nossa empresa já tenha sucesso. E esta linha aqui para o formulário Firm Group está vinculando esse formulário específico ao nosso HTML, mas não é tudo. Também devemos vincular cada campo. Aqui, em todos os lugares, temos essa contribuição. E, na verdade, o que eu quero fazer aqui, eu quero colocar um atributo de nome de controle de formulário. Aqui, vincularemos um campo específico para cada entrada. Então, o primeiro aqui será nosso e-mail. O segundo é o nosso nome de usuário e o último é a senha. Nesse caso, quando alterarmos essas entradas, elas serão atualizadas dentro do nosso grupo de formulários aqui. E a última coisa que devemos criar é no método Submit. Então, já o criamos dentro do nosso HTML. Aqui podemos simplesmente adicionar no envio e ele retorna nulo. E agora dentro eu quero apenas o login do console em Enviar vírgula, este formulário valores de ponto. Vamos verificar se está funcionando. Vou recarregar o paciente que estamos recebendo um erro não pode vincular ao grupo de formulários, pois não é um elemento conhecido do formulário. Por que isso está acontecendo? Porque não injetamos módulo de formas reativas dentro do nosso módulo. Então, vamos voltar para dentro ou para fora do módulo. E aqui dentro das entradas, devemos escrever um módulo de fóruns reativos. E depois dessa contribuição, não devemos pegar a Sarah. Vamos recarregar a página. Como você pode ver, não temos nenhum erro. Agora posso fornecer algo interno e clicar em Registrar. E como você pode ver aqui dentro do console onde obter onsubmit, e-mail, nome de usuário e senha, o que na verdade significa que todos os nossos campos foram vinculados com sucesso ao nosso componente angular. 15. Página de registro - serviço + validação: Em vídeos anteriores, criamos o mercado para a página de registro e também a empresa, mas ainda estamos perdendo nossa chamada de API, que devemos implementar neste vídeo. É por isso que, em primeiro lugar, quero voltar para dentro de nossos serviços, nosso serviço, porque, na verdade, aqui vamos escrever todas as nossas chamadas de API e já temos aqui o usuário atual, o que vamos polonês depois. Mas, por enquanto, quero criar registro de carvão API. É por isso que aqui podemos simplesmente escrever registro. E a questão é, o que estamos conseguindo aqui? Na verdade, estamos recebendo nosso formulário, mas ainda não o digitamos. É por isso que não é confortável de usar. E não queremos escrever aqui que estamos recebendo nada porque não faz muito sentido o que esse método quer, ele quer saber o que foi fornecido dentro. É por isso que eu queria voltar para dentro nossos tipos e criar aqui um novo tipo. E podemos nomear esse tipo de interface de solicitação de registro. E você pode perguntar, ok, mas por que nome tão estranho? E, na verdade, não é estranho. A ideia principal é a hora corrigir tudo o que estamos escrevendo sobre solicitação e resposta com postfix específico neste caso aqui eu sei. OK. Esta é uma solicitação de registro. Então, esse é o corpo da solicitação. Se estamos falando sobre a resposta do nosso registro, se necessário, então seria um teste de interface de resposta registrado. Nesse caso, é mais fácil entender para que você está usando essa interface. Agora vamos criar essa interface. Então, aqui eu quero exportar nossa nova interface e ela será a interface de solicitação de registro. O que teremos dentro exatamente todos os nossos campos que escrevemos dentro de um formulário. Então, aqui teremos nosso e-mail, uma string, nosso nome de usuário, também será string. E a última é nossa senha. E a senha também é string. E, na verdade, não se trata apenas da forma. Se olharmos dentro de nossos controladores de origem do servidor, os usuários já foram criados aqui um método de registro. E dentro do nosso método de registro, é isso que procuramos dentro do corpo. Portanto, solicite o corpo do e-mail, nome de usuário , senha, e isso é exatamente o que estamos enviando do cliente. Portanto, nossos registrados solicitaram que pudéssemos voltar para dentro de nossos serviços, nossos níveis de serviço. Aqui dentro do registro, o que estamos recebendo como parâmetro, é nossa solicitação de registro e nosso tipo é a interface de solicitação registrada que acabamos de criar. Agora a questão é: o que eu recebo depois do registro, estamos recebendo de volta nosso usuário atual. É assim que podemos escrever exatamente como podemos observar o usuário atual da interface do usuário atual. Nós já temos isso. Nesse caso, tudo dentro do nosso método é digitado corretamente. Agora precisamos criar uma propriedade de URL. Então aqui URL e estamos usando novamente o ambiente pontilham um reino pagador porque são os mesmos usuários de barra, porque eles foram registrados, a solicitação é apenas postar para usuários de barra. E aqui agora eu quero retornar este HTTP e temos acesso aqui ao post HTTP e dentro estamos fornecendo o URL do festival. E em segundo lugar corpo, e nosso corpo é nosso pedido de registro. Mas, novamente, estamos recebendo aqui um erro porque nosso tipo é observável do objeto e não observável na interface do usuário atual. Porque, obviamente, por padrão, postagem HTTP não sabe o que queremos fornecer insights. É aqui que, dentro de nossa postagem HTTP, devemos fornecer o que estamos recebendo de volta. E é a interface do usuário atual, mas não é tudo, também deve criar um método adicional para definir o token dentro do armazenamento local. O que isso significa? Na verdade, quando estamos registrando um usuário ou obtendo o usuário, estamos obtendo também campo token que preparamos no back-end. E não devemos fazer nada com esse campo no cliente, mas devemos apenas salvá-lo e dito armazenamento local e anexar a cada solicitação. Nesse caso, nosso back-end pode entender quando a solicitação é autorizada e que fornecemos o token correto. É aqui que eu quero adicionar um token de conjunto de métodos adicional. E, na verdade, forneceremos o usuário atual porque chamaremos esse método depois de obter um usuário atual ou após o registro ou guineense. Então, aqui o usuário atual é a interface do usuário atual e agora ela retornará nula porque, por dentro, simplesmente queremos usar o armazenamento local. E aqui vou escrever um item de conjunto de pontos de armazenamento local. E por dentro eu quero fornecer conversas de campo e estamos escrevendo dentro do token de ponto do usuário atual. Portanto, esse método mais simples armazena dentro localStorage nosso token do usuário atual, e agora estamos totalmente prontos para ajustar nosso componente. Então, vamos voltar para dentro do nosso componente de registro de componentes. E aqui temos em submissão, e obviamente esse valor firme é desenhado aqui. Queremos usar nosso serviço. É por isso que aqui eu quero injetar nosso serviço. Então, estamos escrevendo novamente em particular e temos nosso serviço, que é nossa classe de serviço de autenticação. E aqui agora dentro no envio, podemos escrever isso serviço dot register. E como você pode ver, somos fornecidos dentro de uma solicitação de registro, mas dentro de nosso componente temos apenas essa forma de ponto, valor de ponto. E, na verdade, esse valor firme, como você pode ver aqui o tipo é qualquer, é por isso que funcionará para nós e não podemos digitá-lo de forma alguma. Então, o que os retornos registrados são rápidos? É um observável. É por isso que aqui podemos novamente escrever Subscribe with so object dentro dos campos que serão próximos se estiver correto ou se for um erro. Então, dentro a seguir, mas vamos pegar a bolsa do usuário atual. E aqui vamos fazer alguma lógica. E se tivermos um erro aqui, devemos especificar um campo de aviação. E aqui está uma função com o Era. E por dentro podemos simplesmente consolar log e estreitar. Então, primeiro de tudo aqui eu quero escrever erro, erro aqui dentro do próximo console log nosso usuário atual, coma, usuário atual. Agora vamos verificar se está funcionando. Fornecerei alguns e-mails que não existem dentro do nome de usuário e senha e clicarei em Registrar. E como você pode ver, aqui está nossa rede. Estamos chegando aqui para solicitar. Em primeiro lugar, estamos recebendo solicitação de opções. E isso é completamente normal porque usamos o curso. E temos uma solicitação entre dois hosts diferentes porque estamos hospedando nossos aplicativos em partes diferentes. Então, você verá essas opções todas as vezes. É completamente normal. Mas estamos interessados em nossa solicitação de postagem, que é uma postagem de usuários sem caminho. E aqui está nossa carga útil. A carga útil está completamente correta e aqui está nossa resposta. Como você pode ver, estamos recebendo de volta nosso token de ID de e-mail e nome de usuário, o que na verdade significa que tudo está funcionando bem. E aqui estamos recebendo nosso usuário atual. Mas, como você pode ver antes, estamos recebendo erro, resposta de erro HTTP. E isso não deve incomodá-lo porque esse é o erro dessa solicitação não autorizada e nós o corrigiremos no vídeo posterior. Ele não faz nada com nosso componente de registro. Então, como você pode ver aqui no console, estamos recebendo nosso usuário atual, o que significa que nosso código aqui está completamente correto. Então, o que podemos fazer agora, podemos escrever este ponto e aqui temos nosso serviço e podemos chamar aqui um token de conjunto de métodos e fornecer insert current user. Então esta linha, porque temos aqui o usuário atual salvará nosso token de currentUser no armazenamento local, mas não é mantido. Também queremos salvar um usuário para todo o aplicativo, e já estamos preparados antes para o mesmo método dot set currentUser. Lá dentro. Podemos simplesmente fornecer nosso CurrentUser e ouvir esse método. Ele apenas definirá esse usuário atual no fluxo de usuários atuais. Você verá como usar o fluxo atual do usuário em vídeos posteriores. Mais importante ainda, que agora após o registro, nós o definimos no Target e nos sentamos em um CurrentUser dentro de nosso aplicativo. E a última coisa que queremos implementar é nossa validação. Porque, na verdade, se obtivermos um erro, queremos mostrá-lo. É por isso que aqui. Em primeiro lugar, quero digitar nosso erro porque sabemos o que é. É uma resposta de erro HTTP. E aqui estamos recebendo nosso erro e podemos escrever aqui, pelo menos, ponto Azure. E sim, essa flecha será qualquer, mas ainda assim é melhor do que nada. Mas queremos fazer agora, queremos salvar nosso erro aqui. Agora, a questão é: em que formato obteremos nossos erros. E para este segundo abrir novamente, nossos controladores, usuários. E como você pode ver, aqui está nossa pegadinha. E o que estamos fazendo nesta linha, estamos mapeando nossos erros e recebendo mensagens como uma matriz de strings, que na verdade significa que temos certeza de que, se estamos recebendo um erro, é sempre uma matriz de strings. É por isso que o que podemos fazer em nosso componente de registro interno do cliente, podemos gerar uma mensagem de erro e mostrá-la aqui. Este é y. O que eu quero fazer aqui, eu quero criar apenas um único erro e ele será do tipo string agora. E, por padrão, será agora porque não temos nenhum erro. Agora, aqui dentro do nosso erro, podemos escrever essa era dos pontos. Sabemos que aqui estamos recebendo nosso erro como um array. É por isso que aqui podemos simplesmente criar o Azure dot dot join aqui se tornará um espaço, o que na verdade significa que queremos juntar todos os nossos erros com vírgula e espaço, e será apenas um campo. Agora, eu quero pular dentro de um componente de registro HTML aqui, onde temos erros de classe div. Eu quero escrever e GE e mostrar esse campo somente quando tivermos um erro e dentro deles eles podem simplesmente renderizar nosso erro. Agora vamos verificar se está funcionando. Mas como você pode ver aqui, estamos recebendo um erro não pode ser vinculado a G se não for uma propriedade conhecida de div. E isso está acontecendo quando não injetamos um módulo comum dentro do nosso módulo. É aqui que, dentro das importações, devemos inserir o módulo comum do Angular. Agora, como você pode ver, não estamos recebendo nenhum erro. E o que eu quero fazer, eu quero fornecer dados inválidos. Por exemplo, dentro do e-mail, fornecerei dados e formato não incorreto. Agora vamos limpar tudo e clicar em Registrar. E como você pode ver aqui, estamos recebendo nosso erro. E esse é um array com e-mail inválido. E estamos renderizando este e-mail inválido aqui no topo, o que na verdade significa que reagimos corretamente azure e Don sucesso ao registrar nosso usuário. Agora, vamos verificar se estamos realmente seguros conversando após o registro. É aqui que vamos recarregar a página e fornecer e-mail correto, nome de usuário, senha, e clique aqui registrar. Como você pode ver, temos nosso usuário, o que significa que começamos na memória. Mas aqui, quando sou campeão dentro do armazenamento local do aplicativo, você pode ver nosso token e aqui está um valor, o que na verdade significa que implementamos com sucesso o registro do usuário e armazenamos o token dentro do localStorage. 16. Página de login: No vídeo anterior, concluímos com sucesso nossa página de registro. Neste vídeo, devemos implementar a página de login. E eu acho que essa é uma ideia incrível que você tente implementá-la por conta própria. Então, o que precisamos implementar nesta página? Na verdade, a página de login é simplesmente um login de barra de URL e vemos exatamente a mesma forma de registro, mas formulário de login. Então, na verdade, temos apenas um e-mail e senha e não temos nome de usuário. Obviamente, todos os textos são diferentes, mas essencialmente é isso. Também usaremos a outra solicitação para seguir o jogo no slushy pie slash users slash login. E aqui eu tenho três níveis de complexidade para você. Em primeiro lugar, você pode pausar este vídeo agora mesmo e tentar implementá-lo sozinho. segundo nível é que você está recebendo alguma orientação minha antes de começar a implementar. Então, o que precisamos fazer? Em primeiro lugar, como você pode ver aqui, componentes de dentro para fora, temos um componente de registro. E como eu disse anteriormente, com não quero compartilhar o componente entre registro e login, o que na verdade significa que podemos implementar o novo login do componente com exatamente a mesma marcação, mas sem nosso nome de usuário e nosso arquivo ts será super semelhante. Precisamos de um formulário, precisamos onsubmit e assim por diante. Mas a principal diferença que haverá em um serviço, não usaremos nosso serviço de registro, mas devemos criar um método de login, que realmente significa que devemos em nosso serviço aqui, criar uma solicitação de login, que fará uma chamada de API. E, na verdade, será muito parecido com o nosso registro. Mas aqui devemos criar uma solicitação não registrada, mas uma interface de solicitação de login. E então, dentro, devemos fornecer um URL correto se você quiser experimentar você mesmo. Agora, basta pausar o vídeo aqui. E se você não quiser experimentar sozinho, vamos fazer isso juntos. E nosso primeiro passo será criar a interface para o nosso serviço. Então, aqui temos nossa interface de solicitação de registro. E, na verdade, como você pode ver, temos três campos aqui, então não podemos reutilizá-los dentro do login. Mas eu quero fazer aqui, eu quero criar uma nova interface, interface solicitação de login. Vamos pular dentro desse arquivo e podemos copiar e colar completamente nossa interface de solicitação de registro, só porque será muito semelhante e eles não querem digitar muito. Então, aqui devemos criar nossa interface, interface de solicitação de login. E temos e-mail e senha internos, e não temos nosso nome de usuário. Então, criamos nossa interface com sucesso. Agora podemos voltar para dentro do nosso serviço e podemos copiar o método de registro e colar totalmente porque o método de login será super semelhante. Vamos nomear nosso método de login. E aqui não recebemos solicitação de registro, mas nossa solicitação de login, aqui precisamos de outra interface que acabamos de criar. É uma interface de solicitação de login. E de volta estamos recebendo nosso usuário, o que significa que é uma interface de usuário atual correta e observável. Agora, aqui está o URL. Temos aqui API URL slash users slash login. E essa API já está implementada dentro do nosso back-end. O login é, com certeza, uma solicitação de postagem, o que significa que aqui devemos fornecer uma postagem com a solicitação de login do corpo que definimos como um parâmetro e nosso serviço de login está totalmente implementado. Nosso próximo passo será criar um componente aqui e, na verdade esse componente de registro definido é muito semelhante ao nosso componente de login. Não faz sentido redigitar tudo sozinho. É por isso que eu quero copiar a pasta inteira e colá-la aqui e renomear o login da pasta. Agora temos o componente de login. Devemos renomear aqui as páginas. Então, será login dot component dot HTML. E aqui faça login dot component dot ts. Nova deve pular dentro do nosso HTML e alterá-lo um pouco e não será tão diferente. Em primeiro lugar, aqui, em vez de registrados no Trello, podemos escrever o login no trailer. Agora estamos deixando aqui o erro, assim como os tivemos. Também houve necessidade de envio de formulário e aqui temos e-mail, nome de usuário. Não precisamos do alto, podemos removê-lo. Nós temos nossa senha. E agora aqui está o botão de envio, não com registro, mas entramos, por exemplo, por último, mas não menos importante, é o link do roteador aqui na parte inferior, ele deve ir para uma página de registro. É aqui que aqui está o registro de barras. E em vez desse texto, podemos escrever dentro de se inscrever para uma conta. Então, mudamos nosso HTML com sucesso. Agora vamos pular para o nosso arquivo TypeScript. Em primeiro lugar, devemos mudar nosso seletor. Ele não está registrado, mas nosso login e modelo são HTML do componente de login. Agora className também é diferente. É o componente de login da era Live como está. E aqui está nosso formulário. Precisamos de e-mail e senha, mas não de um nome de usuário. Então, vamos remover o nome de usuário aqui. Nosso construtor permanece o mesmo. Nosso onsubmit permanece quase o mesmo. Mas aqui não usaremos o método de registro. Criamos um método de login onde dentro estava fornecendo todo o formulário. E aqui temos a assinatura e, se obtivermos sucesso no login, então aqui o log do console e o usuário atual definidos na conversa e estamos definidos no usuário atual, o que na verdade significa que é 99% exatamente o mesmo código como registro interno. E nosso último passo aqui será registrar nossos componentes. Portanto, devemos pular dentro das lágrimas do nosso módulo. Aqui dentro das declarações, devemos dizer que temos um novo componente e é componente de login. E também devemos criar aqui uma nova rota. Então, vou copiar e colar a rota do registro e esse caminho de login e componente serão o componente de login. Vamos verificar se está funcionando. Não temos nenhuma flecha aqui dentro do observador. Vou recarregar a página e tentar pular aqui na parte inferior, por exemplo, na página de login. E como você pode ver onde fazer login na barra. E aqui está o nosso formulário e podemos recarregar a página onde mancha nesta página, está tudo bem. Agora vamos tentar se podemos fazer login. Então, aqui, antes de tudo, quero escrever algo incorreto. Aqui estão alguns e-mails que não existem. E depois alguma senha. Estou batendo aqui dizendo em, e estamos recebendo um erro, como você pode ver aqui antes, estamos obtendo foto em erro com validações. E dentro do nosso erro onde receber e-mail ou senha preenchidos, e-mail incorreto uma senha. E estamos fazendo isso nesse caso porque não queremos notificar o usuário exatamente o que não está correto. Não devemos dizer que algo como este e-mail já foi recebido. Nós simplesmente dizemos que é inválido. É por isso que essa lógica dentro do componente de login do bone work. E só para lembrá-lo aqui copiamos colado no envio e aqui dentro de um erro com juntamos nossos erros, porque no caso da página Register tínhamos aqui uma matriz de strings. Aqui não temos que ver diretamente uma seta, e-mail, uma senha, que na verdade significa aqui, em vez de entrar, podemos escrever um e-mail ou senha da era Dodd. Nesse caso, aplicaremos corretamente a área interna. Vamos verificar o som. Estou recarregando a página. Vamos digitar aqui algum e-mail que não existe, algum login com senha e estamos recebendo um e-mail incorreto com uma senha, o que significa que nossa validação está funcionando corretamente. Agora vamos tentar fazer o login com as credenciais corretas. Então aqui eu tenho completo em gmail.com e aqui está nossa senha 123. Estou batendo aqui, diga maldade, e estamos recebendo o usuário atual. Mas o principal problema é que continuamos nesta página. E em segundo lugar, não removemos essa área. E, na verdade, podemos fazer as duas coisas simultaneamente. Em primeiro lugar, o que eu quero fazer aqui no envio, podemos remover a Sarah. Então, aqui, esse erro de dólar que podemos escrever dentro agora. E, na verdade, posso dizer agora que o nome da era não é o melhor, porque na verdade o erro é super genérico e eles gostariam de mudar esse nome aqui de uma mensagem de era para era, por exemplo, neste caso, precisamos mudar isso aqui dentro da próxima e aqui dentro da era. E depois disso, devemos pular para o modelo e alterá-lo lá também. Então aqui temos Angie se erro, deve ser mensagem de erro. Aqui estamos renderizando nossa era. E eu acho que essa abordagem é muito mais limpa porque nos dá a compreensão que estamos renderizando aqui. Não é um erro genérico. Isso é realmente uma mensagem de erro. Agora devemos aplicar exatamente o mesmo dentro do nosso registro. Então, vamos voltar para dentro do nosso registro. E aqui, antes de tudo, quero escrever uma mensagem de erro. Aqui também está a mensagem de erro e, em seguida, diga o arquivo ts, eu quero mudar a mensagem de erro da seta dois aqui, mensagem de erro correta dentro da era, e queremos configurá-lo agora em nosso sucesso. Então aqui essa mensagem de erro é igual a agora, a última coisa que queremos fazer, queremos redirecionar o usuário para outra página. Não faz sentido que estejamos nesta página e ela lista, queremos pular para a página inicial após o login de um usuário. Para fazer isso, devemos injetar aqui nosso roteador. Este é o meu construtor de inserções. Eu posso escrever roteador privado é igual a roteador. E como você pode ver, esse roteador vem do angular-ui-router. E agora aqui dentro do sucesso, na última linha, podemos escrever este ponto, ponto navegar por URL. E estamos fornecendo aqui URL, por exemplo, apenas barra. E agora devemos fazer exatamente o mesmo dentro da nossa página de login. Então, eu estou entrando no componente de login aqui. Em primeiro lugar, quero injetar um roteador Zhao privado. E depois disso, eu posso colar essa linha, essa rota navegar por barra de URL, o que na verdade significa que em ambos os casos, com registro e login, queremos rejeitar nosso usuário para a página inicial. Vamos verificar se está funcionando. Estou aqui na página de login Estou escrevendo aqui f2 em gmail.com, aqui 123. Estou acessando o login e, em seguida, defendendo a página inicial, que significa que implementamos com sucesso nossa página de login. 17. Página inicial: Nos vídeos anteriores, terminamos nossa página de login. Neste vídeo, implementaremos nossa página inicial para o projeto. E o ponto principal é que esta página será apenas uma marcação e nenhuma lógica. Por que isso? Porque, na verdade, esta página é apenas para usuários anônimos se estivermos bloqueados, mas nunca a vermos porque somos redirecionados diretamente para a página de painéis de ideias. Então, primeiro de tudo, vamos implementar em seu módulo. E para isso dentro do aplicativo, eu quero criar um novo módulo que é chamado Home, que na verdade significa que este é um módulo completamente separado. Não tem nada a ver com horas, e há apenas um componente da página inicial dentro do qual está isolado dentro deste módulo. Então, vamos pular para dentro dessa pasta e criar um novo arquivo Módulo inicial Ts. E muitos estudantes estão me perguntando com frequência por que eles não usam geradores junto com o Angular. E, na verdade, há uma razão para isso. Acho que leva mais tempo para usar um gerador apenas copiar e colar o módulo se precisarmos fazer isso, e também para o processo educacional, que você se lembre melhor. Estou escrevendo do zero. Aqui é y. Vamos criar um módulo home mais uma vez do zero. E a cada próximo módulo, vamos apenas copiar e colar. Isso é o que queremos fazer aqui. Queremos criar uma nova classe e vamos chamá-la de módulo home. Depois disso, devemos injetar aqui um decorador no módulo GI. E por dentro devemos fornecer nossas dependências, pelo menos aqui dentro das entradas, devemos fornecer um módulo comum porque precisamos dele dentro de cada módulo. Por exemplo, para loops como no G4, oferecendo G Se agora, vamos criar nosso componente inicial para essa biomassa, criar um novo diretório componentes. E por dentro, queremos criar uma nova pasta home. E sim, eu entendo que temos apenas um único componente aqui e não faz muito sentido criar componentes de barra do que a pasta Home dentro. Mas, no entanto, é uma boa estrutura. E se você não precisou dividir essa página inicial em componentes diferentes, certeza pode fazer isso. Então, vamos entrar na página inicial e criar aqui o componente home dot HTML e o componente home dot ds. Agora vamos pular dentro da página HTML e voltar para casa aqui, mas não precisamos de nada, apenas algo para testar. Agora vamos pular dentro do nosso arquivo ts. E aqui queremos criar nossa classe e é o componente doméstico. Depois disso, devemos registrar nossos componentes. Então, aqui queremos injetar nosso componente e, por dentro, devemos primeiro fornecer um seletor. Então, aqui vou simplesmente usar um seletor de casa porque não faz muito sentido prefixar nosso componente doméstico com o nome do módulo como home, home, simplesmente não é necessário após a nossa seletiva, devemos forneça aqui no URL do modelo e, em seguida, diga URL do modelo, teremos o HTML do componente inicial. E nosso último passo aqui é adicionar nosso componente à nossa declaração. Então, dentro do módulo home aqui, queremos criar declarações e colocar dentro do nosso componente home. Tudo parece bem aqui, mas não criamos uma rota. É por isso que aqui eu quero criar uma rota de propriedade. E podemos dizer que esse é o tipo de rotas e este é um array com apenas uma única chave. E aqui estará nosso caminho. Esta é uma string vazia, significa homepage, e aqui está o nosso componente, e nosso componente será o componente inicial. Depois disso, podemos registrar essa rota dentro das entradas. Então, aqui estará o ponto do módulo de rota para rotas secundárias. E agora não devemos esquecer de registrar nosso módulo doméstico dentro do módulo do aplicativo. É por isso que eu quero voltar para dentro do nosso módulo de aplicativos. Aqui, insider in birds, podemos adicionar nosso módulo home. Tudo está parecendo bem. Não vejo nenhum erro dentro do observador. Então, vamos abrir um navegador e aqui está nossa página inicial. Como você pode ver, a palavra home é renderizada aqui, o que na verdade significa que criamos com sucesso todo o nosso módulo e componente vazio. E agora simplesmente devemos tentar marcar para a página inteira. Este é o meu, vamos voltar para dentro dos componentes domésticos, home, HTML do componente doméstico. Aqui, comece a escrever nossa marcação. Nada de especial aqui, apenas muitos elementos DOM. Então, aqui temos cabeçalho com cabeçalho home de vidro. E agora vamos fechar esse cabeçalho. Em seguida, queremos criar um link para nossa página inicial. Então, aqui estará uma barra de link do roteador. E aqui temos a aula em casa tinha um link para casa. Vamos fechar a venda e dentro do vínculo duplo para mostrar uma imagem. Então, aqui teremos a barra da fonte da imagem, etc, barra Trello, o logotipo, o ponto branco SVG. E vamos fechar essa imagem. Como você pode ver no navegador, ele é aplicado. E aqui vemos nosso cabeçalho e link para nossa página inicial. Agora devemos fornecer links para a página de login e registro. É por isso que depois de um, podemos escrever div. E dentro do div podemos escrever dois links. Em primeiro lugar, aqui, dentro do div terá um link de roteador para o nosso login de barra que acabamos de criar com a classe WHO tinha um login, fecharei a venda. E logo dentro do login, agora podemos copiar e colar este link e aqui temos o registro de barra. Aqui está o registro do cabeçalho inicial da classe, e o texto dentro também será registrado. Vamos verificar se está funcionando, como você pode ver no navegador aqui à direita, temos link de login e link de registro. Agora, digamos que o primeiro bloco da nossa página. Então aqui estará div, herói doméstico da classe. Vamos fechar essa div e, dentro, queremos adicionar um contêiner inicial da classe div. Vamos fechar essa div. E dentro do contêiner doméstico, temos um div. E dentro dessa div estará a tag H1. E aqui temos o título de Desh em casa de classe. Vamos fechar esse H1 e dentro de cada um que eu quero colar. Embora o texto preparado ajude as equipes a trabalhar de forma mais colaborativa e a fazer mais depois de cada uma, temos a tag p. Essa é a nossa descrição. Aqui deve estar a descrição da casa de vidro. E dentro deste p vou colar a descrição sobre quadros, listas e atuais do Trello. Depois da primeira div, teremos uma segunda div. Vamos fechá-lo. Lá dentro. Deveria ser uma imagem. Então, aqui estará fonte da imagem slash acids slash hero dot SVG. E vamos fechar essa imagem e verificar se está funcionando. Estamos pulando dentro do navegador. E como você pode ver aqui, temos uma primeira seção da nossa página inicial. Aqui à esquerda temos texto e boa imagem à direita. Acho que você tem uma ideia de como funciona a taxa de trabalho e blogs para a página inicial. Como você pode ver, simplesmente temos título, a descrição e a imagem do blog, o que realmente significa que você deseja acelerar o processo de criação da página inicial, porque este é apenas um HTML sem nenhuma lógica. Então, aqui eu quero colar o segundo time da casa do blog. Se desejar, você pode simplesmente pausar o vídeo, redigitar tudo ou simplesmente pegar o HTML da página inicial do código-fonte abaixo do vídeo. Então, o que temos aqui, temos a equipe da casa, o contêiner da equipe do contêiner doméstico dentro. Trabalhamos com qualquer equipe, alguma descrição e uma imagem. Vamos verificar como isso se parece. Aqui. Depois do nosso primeiro elemento, temos o segundo com texto e agora a imagem. Vamos criar agora mais um bloco aqui. Estou colando informações da casa. mesma coisa aqui temos aulas em imagem do que H1 e p. Vamos dar uma olhada nisso. Estou recarregando a página e temos aqui na parte inferior mais um bloco com uma imagem e textos. E agora vamos colar nosso último bloco. Como você pode ver, é um pouco maior. Temos aqui algo sobre fluxo de trabalho e automação. Aqui temos a descrição H1 e também a lista de marcadores. E à direita temos uma imagem como sempre, como você pode ver aqui à direita temos uma imagem e à esquerda temos primeiro uma descrição do título e depois uma lista de marcadores, que na verdade, significa que criamos com sucesso nossa página inicial. Não era algo especial, apenas um marcador para usuário não logado. 18. Interceptor de auth: No vídeo anterior, criamos com sucesso nossa página inicial, mas agora temos apenas um único problema. Na verdade, implementamos muito a obtenção do usuário após a página apenas para lembrá-lo, dentro do nosso aplicativo de insight do cliente, componentes do aplicativo ts, estamos chamando nosso serviço de obter usuário atual. E, na verdade, agora estamos sempre recebendo um erro aqui e não autorizado. E, na verdade, se eu pular para a página de registro e apenas criar alguma conta que não existia anteriormente. Como você pode ver após o registro onde reagiu à página inicial. E dentro do armazenamento local, temos esse token. Isso é o que configuramos no back-end para autenticar nosso cliente. Mas depois recarregue a página. Este token não é usado e estamos chegando aqui sem autorização. E a ideia é basicamente que o cliente da torre deve, em cada solicitação, aplicar esse token do armazenamento local, se o tivermos, neste caso, nosso back-end sabe quando foi autorizado, mas imagine se raramente precisarmos entrar em cada método, como por exemplo, obter usuário atual e que ele tem algum cabelo do armazenamento local. Isso não é deficiente, consome e realmente queremos apenas adicionar esse token em cada solicitação. Para isso dentro do Angular, temos middlewares. É por isso que agora vamos criar um middleware agora. Então, o que é Middleware? Isso é algo no meio entre iniciar nossa solicitação e, e, e, na verdade, aqui temos, por exemplo, o HTTP GET e criaremos um middleware. Isso significa que depois que essa solicitação foi iniciada, mas ela não foi enviada para cá. Queremos aplicar middleware, então queremos fazer algo. Por exemplo, é preciso um cabeçalho lá. É por isso que eu quero entrar nossos serviços domésticos e criar aqui em seu horário de serviço, interceptor, ponto ts de serviço DOD. E será apenas uma aula, assim como o serviço injetável normal. Aqui temos especialistas, horário de aula, interceptor, e aqui devemos dizer que implementa interceptor http. Portanto, a ideia principal é que esse middleware no Angular seja chamado de interceptivo porque intercepta nossa solicitação. E aqui estamos escrevendo implementa interceptor http para obter um interceptor de casa de classe estreita implementa incorretamente interface e interceptação de propriedade está faltando, e isso é exatamente o que devemos criar para implementar esse middleware. É por isso que aqui vamos criar um novo método que é chamado de interceptação. E como você pode ver aqui, meu preenchimento automático já recebeu solicitação e próximo, e retorna evento HTTP observável do escritório, o que na verdade significa que temos um acesso total ou solicitação aqui dentro da propriedade request. E ligaremos em seguida quando estivermos prontos e terminarmos tudo o que precisamos fazer aqui. É por isso que, antes de tudo, o que queremos fazer lá dentro é obter um token do nosso armazenamento local. Então, vamos escrever aqui que temos um alvo e este é o item get de armazenamento local. E por dentro estamos fornecendo token. Depois disso aqui eu quero escrever request equals request clone. E aqui dentro estamos fornecendo um objeto com cabeçalhos de conjunto de campos. Os insights de que os cabeçalhos são um objeto que estamos fornecendo autorização são iguais a uma string falante ou vazia. E depois disso, estamos ligando para retornar ao lado da maçaneta e recebemos nossa solicitação. Então, o que esse código está fazendo, em primeiro lugar, aqui obtivemos um token da Pesquisa Google. Portanto, é um it indefinido ou é um token válido. Agora aqui estamos fazendo pedido de clone. Por que estamos fazendo isso? Como o pedido é imutável, não podemos realmente mudá-lo. É aqui que devemos colônia para definir algo. Aqui estamos usando o cabeçalho do conjunto de propriedades para definir um cabeçalho. O cabeçalho é chamado autorização e dentro estamos fornecendo nosso token. Então, se não tivermos um token, estamos dizendo aqui uma string vazia. E depois disso, estamos chamando next handle, o que significa essencialmente que devemos continuar nossa solicitação e estamos fornecendo uma solicitação atualizada dentro. Então é assim que estamos criando middlewares ou interceptores dentro do Angular. Mas agora devemos injetar esse interceptor dentro do nosso aplicativo. Mas o principal, mas queremos fazer para injetar interceptor, não módulo de dentro para fora, mas dentro do módulo de aplicativo, porque queremos fazer isso em um nível global para injetar interceptor, estamos usando provedores aqui. Então, o que queremos fazer dentro disso fornece um objeto com field provide, e aqui estamos usando interceptores HTTP. Está vindo do Angular também estamos aqui usando a classe. E esta é nossa classe, nosso interceptador, que acabamos de criar. E o último é movido para verdadeiro. E é exatamente assim que devemos fornecer interceptores http dentro do Angular. Então, aqui estamos dizendo que devemos nos registrar e você forneceu e é um interceptor http e devemos usar nosso interceptor de horas de aula. Agora vamos verificar se está funcionando. Estou recarregando a página e vamos verificar dentro da rede, nosso usuário de solicitação. Na verdade, aqui eu quero rolar até o final. Aqui podemos ver a autorização e nosso token, que na verdade significa que nossa interceptação, está funcionando corretamente. E aplicamos diretamente esse cabeçalho de autorização a cada solicitação, por exemplo, para obter um usuário atual. Mas ainda estamos recuperando nosso erro 401 e eles realmente sabem qual é o problema. Se olharmos para dentro do armazenamento local, podemos ver esse token simplesmente como um alvo, isso é apenas um valor. Mas se voltarmos para dentro do nosso backend aqui, dentro da fonte, middlewares, corujas. E é aqui que estamos verificando um token aqui, como você pode ver onde fazer divisão por um espaço. Porque, como eu disse anteriormente, estávamos certos na cerveja e depois no espaço falando. Se estivermos usando uma autenticação DVT, esse não é o nosso caso aqui. Não temos aqui uma palavra, cerveja, e esse é exatamente o nosso problema. Não o implementamos e devemos fazê-lo quando estamos devolvendo um token ao cliente. Então, aqui dentro dos servidores, controladores de origem, usuários, quando geramos torque aqui, dentro de usuários normalizados, devemos escrever aqui espaço. Aqui temos o trem da justiça, onde dentro, onde certo, e cerveja. E aqui estamos injetando nosso token que geramos. Vamos verificar se está funcionando. Portanto, nosso token é inválido, eles simplesmente o removerão e ele pulará para a página de registro. Agora eu quero apenas colocar algumas credenciais aqui e clicar em registrar. E agora, quando estamos verificando nosso armazenamento local, você pode ver que temos cerveja do que espaço e estamos conversando. É por isso que quando eu recarrego a página com o erro don't get for 01 mais, estamos recebendo aqui nossa resposta. E, na verdade, aqui você pode ver que nosso usuário de solicitação é 200 e nossa resposta é exatamente o que esperávamos, como está funcionando. Mais uma vez, estamos nos registrando, por exemplo, ou fazendo login e configurando um token dentro do armazenamento local. Então, o espaço Birra e o token, então, toda vez que estamos fazendo um interceptor de saída de solicitação dentro do Angular, ele anexa dentro do cabeçalho, esse token de autorização. E aqui temos o bear e, em seguida, nosso token e nosso back-end verificam esse usuário e nos dão uma resposta aqui. É por isso que toda vez que recarregamos a página, estamos recebendo de volta nosso usuário atual. E isso é exatamente o que queríamos alcançar. Agora, aqui dentro de nossos clientes fonte AB, componente AB, sim, eu quero fazer uma pequena melhoria porque na verdade, aqui anunciamos o serviço, mas não usamos esse Ras e na verdade agora estamos recebendo um usuário para que possamos escrever aqui não trans, mas este é o usuário atual. E em vez do log do console, queremos defini-lo com o método que já estamos preparados. Então, aqui temos isso, nosso serviço dot set usuário atual, e dentro estamos fornecendo nosso usuário atual. Então, agora nosso usuário está logado com sucesso em nosso aplicativo. 19. Guarda de auth: Neste vídeo, quero falar sobre Gvd em nossos URLs, que na verdade significa, por exemplo, não devemos permitir que o usuário pule para a página inicial. Se ele já está trancado, ele deve pular diretamente para a prancha. Por exemplo, se não estamos bloqueados e estamos tentando pular para a página do quadro, quando não for permitido entrar e devemos ser redirecionados para a página inicial. Portanto, existem diferentes abordagens para esse problema. Mas para qualquer caso de uso, eu recomendo que você comece criando um observável de estanho islâmico. Vamos fazer isso agora. Então, na verdade, eu quero entrar em nosso aplicativo, nossos serviços, nosso serviço aqui será criado fluxo de usuários atuais. E como eles disseram, isso é cortado que podemos usar em qualquer lugar de nossa aplicação. E só para lembrá-lo, estamos usando aqui definir usuário atual para alterar o fluxo. Então, essencialmente o que podemos fazer agora, por exemplo, dentro do nosso componente de aplicativo em algum lugar aqui depois de junho nele, podemos escrever este ponto, nosso serviço ponto usuário atual aqui estamos certos e inscreva-se no quadro, e estamos recebendo aqui nossa resposta. E agora eu só quero escrever aqui o log do console. Então você vê do que eu estou falando? Então, aqui nos inscrevemos no stream do nosso serviço. E agora, toda vez que mudamos nosso fluxo, estamos recebendo esses dados de volta dentro desse componente. Vamos verificar no navegador agora. E estamos obtendo aqui dois registros de console. Em primeiro lugar, corra e defina, e depois Ras e as informações sobre nosso usuário, por que isso está acontecendo assim no início do fluxo é indefinido porque ainda não suspeitamos do usuário. Mas depois de algum tempo em que nossa chamada currentUser for concluída e for bem-sucedida, estamos definindo esse currentUser dentro desse fluxo. É por isso que cada local em que assinamos esse usuário atual pode obter essas informações. E essa é exatamente essa informação. Mas podemos torná-lo ainda melhor porque essencialmente, queremos verificar se estamos trancados ou não. É por isso que normalmente você deseja receber essa resposta e convertê-la em booleana e verificar se é verdadeira. Nesse caso, estamos presos, mas não queremos escrever esse código em todos os lugares. É aqui que podemos, dentro do nosso serviço, criar um fluxo adicional com base em nosso primeiro fluxo. Então, aqui está o nosso usuário atual do Stream. Mas agora eu quero criar um novo fluxo, que é chamado é logger tin. E agora, dentro do nosso aplicativo, em qualquer lugar que possamos usar, o novo fluxo é a equipe de log. Então, o que eles fizeram lá? Aqui estamos usando esse usuário atual e isso já é um fluxo. Nós simplesmente queremos transformá-lo em outro valor. É aqui que estou no pipe do DOD, depois na função Mapa do Site. E se você não sabe, esse é o código Rix JS. Então, essencialmente, estamos usando looks xadrez e dizemos ao Angular para transformar nossos fluxos. E estamos usando dessa forma. Estamos sempre escrevendo dot pipe e depois a lista de nossas transformações. É aqui que você verá esse tubo em todos os lugares e aqui dentro de onde usando o mapa para mapear nossos dados. Então, sabemos que dentro do nosso mapa podemos obter três estados diferentes, indefinido, falso e verdadeiro. Mas o ponto principal é que nosso aplicativo não se importa com indefinido. Era relevante verificar se o login. Se tivermos essas informações, se ainda não as tivermos, queremos apenas aguardar essas informações. Isso é muito antes de eu querer pular essa propriedade indefinida como. É aqui que podemos usar o filtro antes do nosso mapa. E o filtro também é uma função. Então, essencialmente, em primeiro lugar, estamos usando filtro dentro do tubo e depois um mapa. Então, o que estamos obtendo filtro de insight dentro do filtro obtendo nosso usuário atual, e na verdade esse usuário atual pode ser indefinido agora ou nosso usuário atual. E aqui não queremos chegar ao mapa se for indefinido, é por isso que aqui podemos escrever que o usuário atual não é igual a indefinido. Então, neste caso, viremos aqui e aqui está o nosso mapa. Então, o que queremos fazer mapa inserido, onde eu entro aqui, usuário atual. Aqui queremos simplesmente convertê-lo em booleanos para que possamos escrever aqui booleano e depois usuário atual. Nesse caso, essa lógica nos trará de volta verdadeiro ou falso, e ignoraremos isso, indefinindo-o que não precisamos e não usaremos dentro de nosso aplicativo. Mas podemos simplificar ainda mais esse código. Em vez de voar e essa lógica pode definir o mapa, podemos simplesmente escrever aqui booleano, e ele fará exatamente o mesmo. Então R is look at tin é um novo fluxo baseado no usuário atual, que retornará para nós verdadeiro ou falso. Vamos verificar se está funcionando. Eu vou voltar para o componente de configuração. E aqui eu quero escrever este ponto ou ponto de serviço está bloqueado. Aqui também podemos escrever Assine e nossas cabeças e nosso descanso estarão trancados. Então, vamos verificar isso. Podemos até nomeá-lo para ser mais compreensível, está logado. E aqui vamos console log é log of tin, coma é propriedade de login. Vamos salvar isso e verificar o navegador. Estou recarregando a página e aqui não vemos o Islã ficando indefinido. É. Nós simplesmente vemos que aqui é baixo passar porque este é o primeiro estado em que temos verdadeiro ou falso. E é exatamente assim que podemos usar em qualquer lugar do nosso aplicativo, esse fluxo para saber se o usuário está logado ou não. Então, agora eu quero remover esse código porque não precisamos dele aqui. Foi só para testes. E agora eu quero mostrar a solução mais fácil, como você pode redirecionar o usuário para outra página. E podemos simplesmente começar com nosso componente inicial, porque essencialmente aqui queremos redirecionar o usuário para a página do quadro, se ele já estiver bloqueado, como podemos fazer isso. Em primeiro lugar, aqui, devemos injetar dentro do construtor nosso, nosso serviço. Então, aqui o serviço de horário privado é anunciado, serviço que já temos. Agora, aqui queremos escrever implementos no necessário, então inicializamos. Agora, aqui vamos usar a engenharia nele. E por dentro agora podemos escrever exatamente essa lógica Lake Road dentro do nosso componente de aplicativo. Então aqui vai estar este ponto, nosso ponto de serviço. Aqui temos está trancado. Então, depois disso, podemos escrever Subscribe e podemos obter aqui é fazer login na propriedade aqui dentro desta assinatura ou obter true ou nós obtemos false. E se entrar aqui verdadeiro, queremos redirecionar o usuário para a página do quadro. É aqui que podemos simplesmente experimentá-lo. Eve é como uma lata. Em seguida, queremos redirecionar o usuário. E para tentar redirecionar, podemos usar como usamos anteriormente, roteador. Então, aqui vamos criar um novo roteador de propriedade privada. E esse roteador, agora dentro da nossa condição if, podemos escrever esse ponto, ponto navegar por URL. E aqui podemos apenas fornecer painéis de barras. E, na verdade, ainda não implementamos essas barras, mas isso não importa. Nós simplesmente fazemos isso como um exemplo, como você pode restringir o acesso aos URLs. Vamos verificar isso. E, na verdade, aqui já recebemos um erro, não podemos corresponder a novas rotas. E aqui estão os quadros. E, essencialmente, podemos verificar isso, por exemplo, com o registro de barra. Para entender que está funcionando, vou recarregar a página e como você pode ver onde no slash register, por que está acontecendo quando pulando para a página inicial, estou pressionando Enter e nem vimos nossa página inicial onde eles se registram diretamente. Portanto, esta é a maneira mais fácil de implementar, digamos, o redirecionamento angular para outra rota. Mas aqui está um problema que usamos aqui, inscreva-se em uma troca. Você deve ser muito cauteloso com isso. Porque se estivermos usando subscribe, também devemos escrever unsubscribe. Se não tentarmos cancelar a inscrição, isso significa que temos uma assinatura de revólver dentro de nosso aplicativo. Na verdade, nossa patologia do componente doméstico foi destruída porque estamos dentro da página de registro, mas essa inscrição ainda está lá porque não cancelamos a inscrição dela. É aqui que devemos sempre lembrar cancelar a assinatura de nossas assinaturas. Para fazer isso, basta criar uma assinatura aqui na parte superior, por exemplo, é fazer login na assinatura e o tipo é assinatura. Agora, aqui dentro do nosso mecanismo, podemos atribuir esta assinatura registrada. O resultado do Subscribe será nossa assinatura. Agora, aqui no topo, podemos adicionar destruir. Então, quando esse componente será destruído, mas queria criar em G no método destroy. E por dentro podemos simplesmente escrever isso é como obter assinatura, DOD, cancelar inscrição. Estou salvando isso, mas estamos recebendo um erro. Não temos inicializador aqui porque há baixo get in por padrão não está definido, é indefinido e é verdade. É por isso que aqui podemos escrevê-lo ou indefini-lo, porque ele não é definido por padrão e simplesmente o definimos em engenharia nele. Mas este é o meu código aqui, é inválido porque esse objeto pode ser indefinido. É por isso que aqui devemos colocar um ponto de interrogação. Portanto, essa linha não fará nada se for um it indefinido. Mas se tivermos uma assinatura, teremos sucesso com o cancelamento da assinatura quando o componente for destruído. Mas agora eu quero mostrar a você a segunda variante possível dentro e cor para fazer redirecionamentos ou para proteger suas rotas. E esse é exatamente o recurso que é chamado de quadrantes dentro do Angular. E a ideia é exatamente a mesma que com os interceptores, estamos fazendo algo antes do trabalho definir o componente. Então, essencialmente, queremos fazer alguma verificação e retornar verdadeiro ou falso. Este é o caminho aqui dentro de nossas horas de módulo. Quero criar um serviço de insights e você arquivar, e será nosso serviço word dot. Então, aqui eu quero exportar nosso novo serviço de palavras em horário de aula. E aqui estamos escrevendo que os implementos podem ser ativados. E isso é exatamente a mesma coisa que fizemos com nossos interceptores. Como você pode ver aqui, devemos definir, pode ativar para fazer esse R quadrado funcionar. É por isso que aqui podemos escrever, ativar, e aqui estamos recebendo muitas coisas dentro. Na verdade, não precisamos de tudo isso. Podemos removê-lo e esse retorno é muito detalhado. Queremos voltar aqui. Queremos retornar um observável de Boolean, que na verdade significa que estamos retornando verdadeiro ou falso. Mas como o fluxo, agora aqui dentro, queremos usar nosso serviço. É por isso que aqui devemos definir o construtor e injetar aqui dentro do nosso serviço de nosso serviço de horas. E a ideia é que dentro desse método, devemos retornar um observável de Boolean. Este é o caminho aqui diretamente. Eu posso escrever isso. Nosso serviço. Dot é uma lata de madeira. Aqui eu quero escrever pipe porque precisamos fazer algumas coisas dentro. Essa é a minha visão. Também adicionarei o MAB e estamos chegando aqui, pois um argumento é a propriedade de login. Agora, aqui dentro, eles querem simplesmente verificar se temos login, então é verdade, então eles querem diretamente retornar verdadeiro. Mas se tivermos false, quero redirecionar o usuário para outra página. É aqui que também precisamos de um roteador. Assim, podemos injetar aqui roteador privado, e este é o nosso roteador, e podemos usá-lo aqui. Então, estamos escrevendo este roteador ponto de navegação por URL. Por exemplo, com o detector, use o para a página inicial. Se eles não estiverem trancados. Depois disso, devemos retornar false. É obrigatório porque, essencialmente, este é um observável de Booleano e devemos não apenas fazer algo aqui, mas também retornar false. E aqui eu quero navegar por URL, não string vazia, mas apenas uma barra. E você pode dizer, mas por que não voltamos, simplesmente ouça isso, porque esse trancado é um fluxo com verdadeiro ou falso. Porque aqui também queremos usar rota e navegar por URL, e podemos fazer isso se simplesmente retornarmos verdadeiro ou falso. Então agora nosso guache está pronto, mas devemos nos registrar corretamente. Este é o meu dentro do nosso módulo. Aqui dentro dos provedores, devemos colocar nosso serviço de notícias de corujas que acabamos de criar. Agora devemos verificar em alguma rota, nosso quadrante de rotas, é aqui que podemos, ele pode ser ativado. E, por dentro, estamos fornecendo um array com nosso serviço de autenticação, o que na verdade significa que, quando estamos pulando para o login, nosso serviço externo verificará se estamos bloqueados em um nó com o uso de nosso fluxo. E se retornar false, seremos redirecionados para a página inicial. Vamos verificar isso. Estou recarregando a página e estamos recebendo um erro. A classe, nosso serviço quadrado não pode ser criado porque não tem decorador angular. E, na verdade, aqui de dentro para fora ao quadrado, esqueci de escrever injetável. Não se esqueça disso. Este é o caminho aqui. Vamos colocar colchetes injetáveis e redondos. Vamos recarregar a página, mas não temos nenhum erro. Agora eu quero tentar pular para a nossa mesma média. Estou atingindo a mesma média. E como você pode ver, posso acessar a página de login porque aqui escrevemos podemos ativar nosso esquadrão. O que realmente significa que, se estamos passando por aqui, podemos acessar esta página. O que realmente significa que, se aqui dentro do nosso aplicativo, removerei nosso token e eles recarregarão o login da página. Serei redirecionado para a página inicial porque eles não têm acesso a esta página específica porque podem ser ativados, o que na verdade significa que implementamos com sucesso o acesso às páginas em dois maneiras diferentes. Em primeiro lugar, usando o componente e segundo lugar, usando o recurso Angular que pode ser ativado. Mas, na verdade, criamos essa coruja ao quadrado, não para login ou registro, mas para futuras placas e páginas de port, porque havia muitas solicitações apenas para usuários logados. É aqui que eu removerei, posso ativar. E eles também querem mudar nosso código de volta a página inicial dos componentes domésticos, porque aqui não devemos redirecionar para o registro de barra, mas sim placas de barra, que implementaremos em nosso próximo vídeo. 20. Placas de captação: Nos vídeos anteriores, terminamos de implementar nossa página inicial e agora estamos iniciando uma nova seção. E este é um quadro de páginas. Então, sobre o que é esta página, esta é uma página onde podemos obter a lista de painéis do usuário, executá-los na tela e criar um novo quadro. Aqui você com certeza quer perguntar, ok, mas temos soquete IO. Usaremos soquetes que você está exatamente nesta página? E minha resposta é não, porque não precisamos usar socket ou o seu em todos os lugares que temos para isso é para TP ontem, muitos casos em que precisamos de soquete IO, mas com certeza não para esta página. Por que não? Porque, na verdade, esta é a página onde nós, para o usuário atual, uma lista aleatória mais simples de palavras. Não temos outros usuários que precisem acessar essa página específica. É aqui que não faz sentido usar aqui o soquete IO, mas não se preocupe, usaremos o socket ion muito mais tarde na página da placa única. E neste vídeo, vamos nos concentrar em criar nosso quadro no back-end e obter a lista de placas da API. É por isso que vamos voltar do nosso cliente para o nosso servidor. Aqui dentro de nossa pasta de origem, dentro de tipos, queremos criar uma nova interface e vamos chamá-la de board, dot interface e dot ts. Portanto, o conselho é nossa nova entidade. Dentro, registraremos nossa interface de placa, que usaremos em diferentes páginas. Por exemplo, na página com a lista de quadros e na página do quadro único. Então, aqui queremos exportar nossa nova interface e esta placa. E a questão é: o que teremos dentro, exatamente como fizemos dentro do nosso usuário. Teremos aqui uma interface para a placa assim. E teremos aqui o documento do conselho, que estenderá o documento para obter pelo menos uma identificação. Portanto, não precisamos de NAD aqui, mas precisamos de pelo menos um título. Portanto, cada porta deve ter um título. Em segundo lugar, nós o teremos criado aqui, é data e também será data. E, na verdade, aqui no lado direito, usuário, como você pode ver, não criamos o head atualizado, mas está lá por causa do Mongoose, então podemos escrevê-lo aqui também. O último campo que precisamos aqui dentro do nosso quadro. Nosso conselho deve pertencer a algum usuário. É aqui que devemos salvar o MAD do usuário que criou esta placa. E para isso, podemos escrever aqui ID de usuário, e não estamos escrevendo aqui string, mas tipos de ponto Schema, ID de objeto de ponto. Agora devemos importar aqui no esquema superior do Mongoose. Como você pode ver aqui, temos essa notação especial, tipos de esquema, ID de objeto ponto. E é exatamente assim que estamos criando um d's dentro do Mongoose. Então, por dentro, isso não é apenas uma ideia, é um ID de objeto, mas no momento em que construiremos nossa API, esse ID de usuário será simplesmente uma string rápida, para que possamos entender o que o usuário criou essa parte específica. Nosso próximo passo aqui é criar nosso documento para o conselho. É aqui que eu quero uma interface especializada e aqui temos o documento do Word, exatamente como tínhamos à direita. Aqui queremos usar o documento extents e este documento está chegando até nós do Mongoose, então não devemos esquecer de adicioná-lo aqui no topo porque outro caso não funcionará. Aqui, simplesmente colocamos colchetes e nada mais. Portanto, não temos aqui a senha de validação ou algo semelhante porque simplesmente estendemos o documento e assustamos qualquer coisa nova. Então, criamos com sucesso nossa interface de placa. Agora é hora de criar nosso modelo. Então, dentro dos modelos, estamos criando novos pontos de quadro de arquivos. E, novamente, assim como fizemos no usuário, criaremos nosso esquema de quadro. Então, aqui à direita, abrirei nosso usuário para que possamos dar uma olhada. Primeiro de tudo, aqui no topo, vou importar esquema e modelo. E agora queremos criar nosso esquema de quadro exatamente como fizemos com nosso usuário. E aqui estamos vendo um novo esquema e esse é o esquema do mangusto. E lá dentro estamos fornecendo nosso documento do conselho que acabamos de criar. Depois disso, temos colchetes redondos e, dentro, devemos fornecer todos os campos do documento do nosso conselho. O primeiro campo aqui será intitulado. Então, o que é título? É uma corda. Então, vamos dizer aqui que nosso tipo é string. E em segundo lugar, é necessário porque não podemos criar nosso quadro sem um título. É por isso que colocamos aqui obrigatório. Como você pode ver aqui, estamos recebendo um erro. Portanto, o argumento do tipo title não é atribuível ao parâmetro, o que na verdade significa que fizemos algo errado com nosso documento do conselho. E veja nosso problema porque aqui foram estendidos do documento, mas não estendemos do nosso Conselho, o que na verdade significa que todas essas propriedades não estavam disponíveis rapidamente, como você pode veja agora que não temos nenhum erro. O título é que agora só precisamos fornecer o ID do usuário. E aqui dentro, devemos definir nosso tipo e será exatamente o mesmo esquema, tipos de ponto, ID de objeto de ponto. E o próximo é necessário neste caso quando não, Ok. O uso do raio D também é obrigatório. Depois disso, devemos exportar nosso modelo. Então, aqui estará o modelo padrão do especialista e estamos fornecendo uma visão como um documento genérico do nosso conselho aqui agora podemos abrir nossos colchetes e o primeiro perímetro que estamos fornecendo aqui chamado quadro. E há um segundo parâmetro, nosso esquema de placa. Então, como você pode ver, implementamos nossa placa exatamente da mesma maneira que fizemos com o usuário. Mas o board é muito mais simples porque não temos aqui métodos adicionais e validações adicionais. Agora devemos criar um novo controlador de placa. E o método para colocar o Albert lá dentro. É por isso que o que eu quero fazer, eu quero pular em tais camadas de servidor de origem de serviço. Aqui. Em primeiro lugar, quero registrar uma nova rota e ela será app.get. E temos aqui slash api slash boards. E esta é a lista para obter todas as placas do usuário atual. É aqui que queremos usar nosso middleware de SO, porque se não estivermos logados, podemos obter placas. Precisamos ter um usuário. E o último aqui será o controlador do nosso conselho. Nós não temos aqui e aqui, ponto, por exemplo, obter pranchas. Portanto, devemos criar controlador da nossa placa e aqui obter o método da placa. É por isso que no topo. Em primeiro lugar, quero inserir nossa estrela como controladora da placa, Roma, e aqui estarão as placas de barra dos controladores de caminho. E ainda não temos esse arquivo, então vamos criá-lo agora. Aqui dentro dos controladores, eu posso criar pontos ts de placas, e aqui devemos criar uma nova ação. Aqui, faremos exatamente da mesma maneira que fizemos dentro do controlador de nossos usuários. Então, primeiro de tudo, no topo, precisamos inserir nossa resposta de solicitação e a próxima função do express. Depois disso, podemos criar nossa nova função, obter placas, que será uma função assíncrona. E estamos chegando aqui antes de tudo, nossa solicitação e isso é tipo de solicitação, depois resposta, é tipo resposta. E o último é o próximo do tipo, próxima função. E isso anteriormente, queremos escrever aqui try-catch para que possamos lidar com tudo corretamente. Aqui estamos recebendo nosso erro e podemos simplesmente jogá-lo dentro de nossa próxima era aqui será a próxima. Agora, dentro de nossa tribo devemos tentar permitir a lógica para isso. Devemos injetar aqui nosso modelo de placa que já criamos. Então, aqui vai ser um importante modelo do Conselho para Roma. E aqui para dançar, estamos pulando dentro de modelos slash board. E agora podemos tentar encontrar todas as placas por ID de usuário específico. Então, aqui queremos obter nossos conselhos de propriedades. E aqui estamos usando um modelo Bohr de peso. E se você não sabe, find encontrará para nós registros antigos por predicado específico. Então, dentro, podemos fornecer um objeto com usura alimentada t igual a request dot user dot ID. E como você pode ver aqui, obtemos diretamente uma seta do TypeScript informando que o usuário não existe dentro da solicitação. E isso está totalmente certo. Só para lembrá-lo, criamos aqui nossas próprias solicitações personalizadas com o uso de um campo interno. Aqui podemos escrever a interface de solicitação expressa e, nesse caso, ela funcionará corretamente, mas nosso usuário de solicitação pode ser indefinido e, em seguida, esse código não funcionará. É aqui que devemos tentar. Se não tivermos o usuário ponto de solicitação, então queremos jogar aqui para 01. Então retorne o endereço, envie o status, e aqui estará 401, exatamente como fizemos anteriormente no agora controlador de um usuário. Então, aqui na parte inferior, fizemos exatamente o mesmo. E agora devemos simplesmente responder com nossos conselhos. Então aqui podemos escrever rest dot sand, e estamos enviando aqui quadros. E a central, a lista deste quadro é apenas uma matriz. Vamos verificar se está funcionando. Como você pode ver aqui, insira o servidor, isso está conectado e eles não têm nenhum erro. Então, vamos pular para dentro do carteiro. Vamos fazer aqui um pedido slushy pie slash boards. E como você pode ver aqui dentro dos cabeçalhos, ou você já tem um token injetado porque usamos essa solicitação anteriormente. Estou batendo aqui na areia. E como você pode ver onde estou recebendo de volta uma matriz vazia porque não temos nenhuma placa. Então, agora a questão de como podemos obter algumas pranchas se ainda não tivermos nenhuma torta para criar uma placa. E para isso, podemos simplesmente pular dentro Mongo e criar esse porto por conta própria. Este é o caminho aqui. Dentro do console vou escrever docker exec menos 80 MongoDB Mongo. Então, essencialmente, queremos chamar o comando Mongo dentro do nosso contêiner, o MongoDB. Só para lembrá-lo se você não usou o mais escuro aqui, mas simplesmente instalou o MongoDB em sua máquina. Então você só precisa escrever o console de inserção MONGO e ele funcionará. Estou batendo aqui, insira-os aqui dentro do console do Mongo. Agora, aqui precisamos usar nosso banco de dados. É por isso que aqui estou escrevendo use space ultra long. E depois disso eles colocaram ponto e vírgula. Estou apertando Enter. E como você pode ver aqui, mudamos para o trailer dB HL. Agora, aqui podemos escrever as coleções de espetáculos e ponto e vírgula, e como você pode ver, essas são nossas coleções. Temos aqui quadros e temos nossos usuários. O que queremos fazer agora, queremos inserir um novo registro em nossos quadros. Para isso, podemos escrever db dot, ports, dot insert, e aqui temos uma função, então colchetes redondos e dentro de um objeto. E aqui devemos fornecer o que queremos inserir. No nosso caso, será apenas título, por exemplo, primeiro quadro. E devemos escrever aqui algum ID de usuário, mas aqui não devemos fornecer a string VM deve fornecer um ID de objeto. É aqui que eu quero escrever o ID do usuário dois pontos e, em seguida, o IED do objeto. Eu abri aqui colchetes redondos e por dentro estou colando em nosso fluxo. Como você pode ver, isso não é apenas usura, o fim da corda. Estamos começando aqui dentro do ID do usuário e do objeto com a string. E no final, devemos colocar um ponto e vírgula. Estou pressionando Enter e estamos obtendo o resultado correto inserido. E agora aqui podemos tentar obter todos os registros dentro dessa coleção específica. Então, db dot boards, dot find e colchetes redondos. Estou pressionando Enter e estamos recebendo apenas um objeto com ID. E essa é a ideia do primeiro quadro do título do nosso quadro e o AD do usuário é um ID de objeto correto. É por isso que agora podemos voltar para dentro do nosso carteiro, escolher nossa solicitação de painéis de API e clicar em Enviar. Como você pode ver agora, estamos recebendo nosso ASHRAE com um objeto dentro. Aqui temos nosso ID e aqui o vemos como uma string, título e ID de usuário, o que na verdade significa que criamos com sucesso nossa primeira placa a partir do console e temos a lista de nossas placas. Mas aqui eu quero melhorar o last small thin, como você pode ver aqui, estamos obtendo nossos IDs do backend com sublinhado. E, na verdade, normalmente a partir da API, estamos obtendo um DES. Normalmente sem sublinhado. Isso é exatamente a coisa do MongoDB, o que significa que não é tão confortável conseguir um, isso foi sublinhado no front-end e não quero fazer isso. E dentro do Mongoose, existe a possibilidade de ajustar isso. É por isso que eu quero voltar para dentro do nosso código, dentro das irmandades. E aqui, por exemplo, após nossa configuração de abuso, podemos escrever aqui o ponto do Mongoose definido aqui como o primeiro parâmetro que estamos fornecendo ao Jason. E como segundo parâmetro, estamos fornecendo um objeto. E por dentro, em primeiro lugar, estamos dizendo que terminamos Charles. E em segundo lugar, transforme. E aqui dentro transformados temos dois argumentos. O primeiro será sublinhado e o segundo será convertido. E essa é a função. E dentro dessa função, queremos escrever delete o ID de sublinhado de ponto convertido. Então, o que estamos fazendo aqui, aqui podemos mudar para o método JSON que está escrito dentro de um vai aqui, estamos fornecendo transformação, então estamos dizendo como vamos transformá-lo. E, na verdade, dentro do Mongoose, recuperaremos o NAD e o ID do sublinhado. E aqui vamos remover apenas do ID de sublinhado JSON, o que na verdade significa que dentro do Mongoose, ainda temos esse ID de sublinhado. Podemos usá-lo com segurança, mas não o obteremos dentro do JSON, obteremos um ID normal. E você também pode querer saber o que é virtual forte e, na verdade, o incitamento está dentro dos modelos. Podemos criar propriedades virtuais e, por padrão, dentro do Mongoose whoop não as recuperará. E, na verdade, queremos recuperá-los. É aqui que escrevemos virtuals, true. Então, vamos verificar se esse código está funcionando. Estou pulando de volta para o carteiro e estou batendo na areia. E como você pode ver aqui, estamos recebendo exatamente a mesma resposta, mas não temos ID de sublinhado. Temos apenas um d normalmente, que é uma string. E é exatamente como queremos usá-lo dentro do front-end. 21. Frontend para placas de gettings: No vídeo anterior, implementamos com sucesso a colocação de nossas placas no back-end. Agora devemos começar com nosso festival de frontend. Para isso, devemos implementar nosso módulo de placas. Mas só para lembrá-lo aqui dentro da fonte dos clientes , aplicativo, componentes domésticos, casa, Ts domésticos, temos muito direto nas barras quando estamos trancados. É aqui que devemos, antes de tudo, implementar nosso módulo de placas e dentro dessa rota, para que pelo menos nosso código possa funcionar com sucesso. É aqui que queremos criar novas placas de módulos. E este é um módulo separado para uma única página onde temos uma lista das placas e, na verdade, dentro também podemos criar um componente para uma única placa. Mas eu realmente quero separar esses dois módulos porque eles são dois diferentes. Este é o meu interior do nosso módulo de placas. Podemos criar placas ponto module.js. E aqui eu não quero escrever tudo do zero. Eu quero copiar e colar o módulo inteiro completamente e apenas alterá-lo. Então, o que temos aqui? Primeiro de tudo, nossa classe será módulo entediado. Não teremos aqui nas declarações, componente inicial e precisamos aqui e você, mas aqui não precisamos do caminho para casa, mas precisamos de placas de caminho. E essa casa de componentes não existe aqui, então precisamos mudá-la para nosso novo componente, componente de placas. É aqui que, na verdade, o que eu quero fazer, eu quero que os componentes internos copiem totalmente, cole este diretório inicial e cole-o aqui dentro das placas, dentro da pasta de componentes. Então, na verdade, você pode usar geradores angulares se quiser. Eu realmente só quero copiar e colar o módulo. É mais rápido para mim. Então, aqui eu quero renomear esses componentes para placas, e este é o nosso componente raiz das placas de módulo. E lá dentro temos dois arquivos. Em primeiro lugar, o componente HTML das placas. Em segundo lugar, componentes de placas ts. Aqui dentro do HTML, podemos simplesmente remover tudo e apenas escrever quadros para que possamos verificar se está funcionando. Agora, podemos pular para dentro do nosso componente de placas. E aqui, antes de tudo, podemos mudar nosso seletor e podemos escrever aqui quadros e nosso URL de modelo será um componente importante HTML. Agora, aqui dentro, temos nossa classe, que é componente de placas, e aqui devemos remover implementos. Não precisamos disso por enquanto. E eles removerão todo o código do nosso componente de placas, e também podemos remover todas as entradas. Então, criamos com sucesso nosso novo componente de quadro vazio e agora podemos usá-lo dentro de nosso módulo de placas. Aqui podemos escrever componentes de placas e fazer isso. Insira automaticamente aqui na parte superior. E agora aqui temos uma rota para placas de corte. E aqui, dentro das declarações, podemos definir nosso componente de placas. E o último passo que não devemos esquecer é que devemos registrar o módulo desta placa dentro do nosso módulo de aplicativos. Então, aqui dentro de nossas entradas, devemos adicionar módulo de placas. Vamos verificar se está funcionando. Eu não tenho nenhuma seta aqui dentro do servidor web. Agora eu quero pular para a nossa página e recarregar. E como você pode ver onde as palavras em barra aqui está o nosso texto. Se eu pular aqui na página inicial, estarei diretamente no quadro porque estou trancado. Agora, vamos verificar se seremos redirecionados de volta. Se não fizermos login. Para isso, por exemplo, podemos simplesmente remover o token e recarregar a página. E como você pode ver aqui, estamos ficando não autorizados, mas quando não redirecionados de volta para a página inicial. E essencial para isso, criamos dentro de nossa casa serviços r ao quadrado, e podemos usar esse R quadrado agora dentro de nosso módulo de placas. Então, dentro das placas, dentro do módulo Ts aqui na rota que podemos anexar, pode ativar. E aqui devemos fornecer uma matriz com o Serviço Mundial que criamos anteriormente. É totalmente bom usá-lo assim. Não precisamos registrá-lo aqui. Como você pode ver aqui, não há erros. Então, vamos recarregar a página. Como você pode ver agora, não podemos pular para nossos esportes de lama e fomos redirecionados para a página inicial. O que realmente significa que r pode ser ativado, está funcionando corretamente. E agora, apenas com uma única linha aqui, podemos definir quais páginas são permitidas apenas para usuários conectados. Então, criamos com sucesso nosso módulo de placas e agora quero criar uma interface de porta. E poderíamos criá-lo dentro do módulo de placas. Mas, na verdade, eu quero criar aqui dentro da nova pasta AB e chamá-la de compartilhada. Porque, na verdade, eu quero colocar todos os tipos que estamos usando em todos os lugares dentro dessa pasta compartilhada. Por exemplo, quadro de colunas de tarefas. Todas essas são entidades compartilhadas que podemos usar em diferentes módulos. O mesmo acontece com os serviços ou serviços que são compartilhados, como serviço de conselho, serviço de placa única, serviço coluna, serviço de tarefas. Poderíamos colocá-lo em um módulo específico, mas eu realmente quero colocar tudo isso em que apenas buscamos dados para o serviço compartilhado. É por isso que aqui temos a AB compartilhada. E aqui, antes de tudo, quero criar novos tipos de pasta. E agora, dentro dos nossos tipos de fotos de aplicativos, podemos definir um novo tipo e é a interface de pontos da placa. Ts. E vamos exportar aqui nossa nova interface. E isso será uma interface da nossa placa e devemos chamá-la de interface de porta. E por dentro, devemos definir exatamente os mesmos campos que criamos no back-end. E antes de tudo, aqui está NAD, é uma string. Em segundo lugar, é título, também é string. Também criamos aqui que isso é tenso e o último é atualizado. É também uma corda. E, na verdade, aqui adicionais estavam obtendo ID de usuário, apenas para lembrá-lo aqui dentro nossos modelos de origem de servidor e aqui temos nossa placa. Temos UserID, o que na verdade significa que aqui também obteremos o ID do usuário e é uma string. Nossa interface para um único Boyd está completamente pronta e podemos usá-la em qualquer componente. Agora eu quero criar o Serviço para trabalhar com quadros. E, na verdade, todos os pedidos, como criar quadro, ficar entediado , obter quadros, excluir quadro, entrarão no serviço. É aqui que aqui dentro compartilhado, quero criar uma nova pasta e chamá-la de serviços. E então disse que vamos criar um novo serviço chamado Boards service dot ds. Então, aqui vamos definir nossa nova classe. Então, aqui temos o serviço de placas de classe, e devemos escrever em cima dele injetável para que possamos usá-lo em qualquer lugar. O primeiro método que queremos definir aqui é obter placas. Isso é exatamente o que já estamos preparados no back-end. Então, aqui estão nossos painéis get e não precisamos fornecer nenhum argumento aqui. E vamos receber de volta um observável com um raio de nossas pranchas. É por isso que aqui podemos escrever um array de interface de porta. Isso é exatamente o que acabamos de definir. Agora, dentro deste get boards, queremos ter certeza de que o pedido HTP. É por isso que aqui devemos tentar construir e injetar. Aqui estão os clientes HTTP e HTTP. Agora, dentro de nossos quadros, queremos obter um URL exatamente como fizemos anteriormente para o serviço ao usuário. Então, aqui temos nosso URL e é o ambiente. Não use o URL da API para nós. E aqui está o slash board. Esse é exatamente nosso filho. Agora, aqui podemos retornar esse ponto http.get e queremos obter nosso URL sem nenhuma opção. E como você pode ver aqui, obviamente estamos recebendo um erro. O objeto observável não é atribuível à interface observável da placa. É aqui que aqui, como anteriormente, devemos especificar que estamos voltando em uma série de placas, para que nossos serviços estejam completamente prontos e eles só queiram testá-lo. É por isso que aqui eu quero voltar para dentro de nosso módulo de placas e devemos primeiro injetar o serviço aqui dentro dos provedores. Aqui podemos escrever que temos aqui o serviço de placas, e está disponível rapidamente. Agora temos permissão para pular dentro do nosso componente aqui injetado. Então, antes de tudo, quero definir nosso construtor e sabemos que aqui temos o serviço de placas e este é o nosso serviço de placas. Agora, além disso, eu quero escrever aqui implementos nele. E agora não inicializados, eles querem buscar esta lista de nossas placas. Então, aqui temos nossa energia nele e por dentro, eles podem simplesmente escrever este serviço de conselho, obter quadros, se inscrever para obtermos o resultado. Aqui estão alguns resultados. Na verdade, são placas e eles só querem registrar no console o que estamos recebendo de volta. Então, aqui estamos recebendo nossas pranchas, placas de coma. Vamos verificar se está funcionando. Mas não tenha setas aqui dentro do servidor web front-end. E vamos fazer login agora novamente porque estamos bloqueados. Então, aqui vou fornecer nossa comida em gmail.com. Agora, como você pode ver depois de fazer login, mas eu entro no slash boards. E aqui dentro do console podemos ver placas. E esta é uma única placa enquanto estamos conseguindo, porque no vídeo anterior foram criadas dentro do console para testar a torta neste ponto e, essencialmente subplacas para o nosso usuário atual. Por que isso? Porque eles, na verdade aqui está nosso pedido de back-end. Aqui, estamos encontrando nossas placas por ID de usuário, o que significa que estamos encontrando todas as placas dessa solicitação de ID de usuário de onde estamos obtendo essa ID de usuário de nossa solicitação de rede. Aqui está o pedido do nosso conselho e aqui estão nossos cabeçalhos. E como você pode ver aqui nos cabeçalhos na parte inferior, temos essa autorização e aqui está nosso token. Essas são exatamente as informações de que nosso back-end precisa para fornecer dados rápidos e corretos do usuário atual. Então, como você pode ver, está recebendo das placas dentro do módulo funciona corretamente. E preparamos com sucesso nosso serviço para obter uma lista de placas no cliente. 22. Formulário inline: Neste vídeo, quero falar sobre um módulo adicional que geralmente deseja criar ao vivo para o nosso aplicativo. E eu estou falando aqui sobre um formulário em linha. Vamos dar uma olhada no projeto totalmente concluído que estamos implementando. Como você pode ver aqui, estou na página de esportes de barra e aqui acabei de criar um usuário. Portanto, não temos nenhuma placa. E aqui temos a placa de criação. Como você pode ver, isso é apenas um quadrado com alguns textos. Mas quando estou acertando, você pode ver aqui uma entrada sem nenhum espaço reservado, podemos digitar aqui, por exemplo, foo board, e estamos pressionando enter. E depois disso, nosso conselho é criado diretamente. Aqui. Vemos esse cartão novamente, e isso é essencialmente um exemplo de um formulário embutido. Então, temos aqui um quadrado com o texto. Então estamos clicando aqui e ativando um modo de edição onde basta digitar algo e pressionar Enter. Portanto, a solução mais fácil aqui seria simplesmente criar esse componente e jogá-lo dentro de nossas placas. Mas então vamos pular em uma única placa. Aqui à esquerda, temos exatamente o mesmo. Você pode ver aqui o título do nosso quadro que estou acessando aqui e estamos entrando no modo de edição. Aqui vemos o título do nosso quadro, mas agora podemos alterá-lo para que possamos atualizá-lo e clicar em Enter e data da web, o título do nosso quadro, exatamente o mesmo que temos aqui com a lista. Este é apenas um tempo de texto escondido aqui e estamos recebendo aqui não apenas uma entrada, mas também um botão, pelo menos. E como você pode ver, os estilos são diferentes em cada caso, mas não faz muito sentido criar componentes adicionais para cada caso, como criar um onboard, atualizar o nome do quadro, criando uma tarefa, criando uma coluna e assim por diante. Porque também dentro da nossa coluna podemos adicionar a tarefa e esta também é uma empresa em linha. É por isso que uma abordagem realmente sábia seria criar um único componente que possa cobrir todas as nossas necessidades. Então, quais casos temos? Em primeiro lugar, em qualquer caso, temos algumas marcações. Em seguida, temos um estado de edição quando apenas clicamos no elemento. Mas, como você pode ver, a marcação pode ser completamente diferente. Mas o que é diferente não é a marcação, é apenas estilizá-la, na verdade, se verificarmos aqui, como você pode ver, esta é uma fonte embutida que eu criei e simplesmente anexamos aqui o formulário Criar Tarefa. A ideia principal é que todas essas classes estejam disponíveis globalmente e podemos simplesmente alterá-las com CSS. Dentro foram fornecidos em coisas diferentes. Por exemplo, podemos primeiro digitar algum texto que será mostrado aqui, como, por exemplo, no atual. Mas também podemos mostrar aqui esse texto como o nome do nosso quadro. Agora estamos escondidos aqui, Editar e talvez queiramos propagar esse texto no formulário de edição. Mas aqui com uma tarefa, não precisamos fazer isso. Mas também aqui temos um caso em que temos no botão Carrinho e não apenas uma entrada. Portanto, todos esses casos devem estar dentro desse único componente para funcionar sem problemas. Então, vamos tentar agora criar esse componente. E esse componente é super compartilhável. É por isso que eu quero embalá-lo dentro do AB srand. E aqui queremos criar os módulos de pastas. Aqui você pode perguntar, ok, mas estamos falando sobre componente. Sim, você está totalmente certo, mas não pode usar componentes sem módulo. Você pode registrar o componente dentro de algum módulo ou injetar módulo e o módulo de injeção é muito melhor porque você pode definir quais componentes deseja permitir fora e quais não é. É aqui que normalmente, quando queremos compartilhar um componente, eu recomendo que você crie um módulo para isso. É aqui que temos módulos e podemos criar uma nova pasta que será em linha. E esse é exatamente o formulário para todos esses casos. Agora vamos pular para dentro e criar aqui formulário inline dot module.js. E aqui dentro devemos exportar nossa classe, que é o módulo de formulário inline. Agora na parte superior de um para injetar nosso módulo NG, assim como fizemos anteriormente. E aqui queremos entradas internas para adicionar nosso módulo comum. O próximo passo é criar nossos componentes. Então, aqui teremos a pasta de componentes, e aqui dentro teremos nosso formulário embutido com dois arquivos. Em primeiro lugar, no componente de ponto de forma ao vivo, ponto ts, e em segundo lugar, componente de ponto de formulário embutido ponto HTML. Agora vamos tentar dentro de alguns textos, por exemplo, em forma de linha. E vamos pular para o nosso interior a partir daqui, especialista, nosso componente de formulário inline de classe. Agora, aqui no topo, devemos definir nosso componente. No interior, podemos fornecer um seletor, e esses seletores serão apenas de forma embutida. E aqui também precisaremos fornecer um modelo TRL. Este é o componente de formulário embutido HTML. Portanto, nosso componente básico está pronto quando massa agora é registrada dentro do módulo. Então aqui, antes de tudo, nossas declarações, teremos aqui o componente de formulário embutido. E em segundo lugar, e é super importante são os especialistas porque aqui queremos permitir o uso desse componente fora. É assim que estamos adicionando componente de formulário em linha dentro da matriz de especialistas. Agora vamos voltar para dentro do nosso componente e definir algumas entradas como anteriormente neste conjunto. Em primeiro lugar, queremos fornecer um título para o nosso formulário em linha. É por isso que aqui temos um título de entrada e isso é uma string e, por padrão, é uma string vazia. Mas é importante distinguir entre o título do formulário. Isso é o que queremos mudar e apenas os textos que estamos mostrando porque precisamos coisas diferentes em casos diferentes. Por exemplo, você deseja executar o texto padrão, mas quando está oculto em nosso telefone, deseja renderizar outro texto. E isso é essencialmente título, mas agora também precisamos aqui no texto padrão, isso é o que estamos renderizando quando não estamos ativados em nossa empresa. Aqui, vamos criar um texto padrão, e isso é uma string. E aqui eu quero fazer uma reviravolta muito boa. Eu quero escrever aqui, não defini-lo. E isso é essencialmente o que eu recomendo que você faça muito se você começar a implementar algo ou mesmo para produção, quando você não tem certeza de que tem alguns dados, é muito melhor definir não definiu-o do que apenas indefini-lo ou apenas uma string vazia. Nesse caso, as pessoas podem ver diretamente que o valor não está lá e não está quebrado. Também temos um caso quando queremos mostrar um botão, é aqui que devemos criar mais uma entrada, tem botão e é booleano. E, por padrão, será falso, o que significa, mas não renderize o botão. Se tivermos um botão, queremos alterar o texto desse botão. É aqui que aqui estará nossa entrada com o texto do botão e é uma string. E, por padrão, eles querem configurá-lo para enviar porque esse é o tipo de texto mais popular. Depois disso, às vezes também queremos fornecer um espaço reservado para nossa contribuição. É aqui que entra com o marcador de lugar de entrada, e esta é uma string e, por padrão, será uma string vazia. E a última coisa que precisamos é um tipo de entrada porque temos um caso em que somos tendência de massa e não uma entrada, mas uma área de texto. É aqui que eu quero escrever a entrada com o tipo de entrada, e isso é apenas uma string. Poderíamos criar um enum aqui, mas vou deixá-lo como uma string. Por padrão, podemos escrever que isso é apenas uma entrada de string. E no momento em que quisermos escrever a área de texto, forneceremos aqui uma área de texto de string. Agora, aqui também devemos definir uma saída. Esses são os valores que queremos propagar depois de enviar um formulário. Isso é por aqui, vamos definir um nome infinito de saída que ele manipula enviar. E esse é o novo emissor de eventos. E aqui há um ponto importante. Devemos inseri-lo do núcleo angular e não do nó e, em seguida, dizer adicionar novo emissor de eventos. Queremos fornecer esse tipo de dados que queremos recuperar. E será uma string porque a forma substantiva, temos apenas uma única string que queremos devolver. Também aqui precisamos que a propriedade local para manipular seja editada por padrão, precisamos editar para definir como false e, em seguida, ativamos a edição, definimos como true. Aqui está a edição será booleana e, por padrão , será falsa. E por último, mas não menos importante, aqui queremos criar uma forma reativa. É aqui que eu quero fornecer um insight construtor privado se b e este é o grupo de formulários e já criamos um formulário reativo anteriormente para nosso registro. É aqui que usaremos exatamente o mesmo, mas vamos criar aqui um formulário. E aqui podemos escrever esse grupo de pontos FB. Devemos prover dentro de nossos campos. E no nosso caso, temos apenas um título. E aqui podemos dizer que isso é uma string vazia. E, na verdade, aqui eu cometi um erro. Se b não for um grupo firme, na verdade é o construtor de formulários. Então, aqui precisamos de outra contribuição. Agora vamos escrever um pouco de mercado para que você entenda a lógica Beta. Então, aqui eu quero pular dentro do HTML e não precisamos desse texto. Agora, aqui, em primeiro lugar, quero criar um div, e esse div será nosso div padrão com alguma marcação. É por isso que aqui precisamos de uma aula que possamos usá-las globalmente e mais, certo, para nossas necessidades. Então, aqui podemos escrever um contêiner de formulário embutido. Mais uma vez, não estamos escrevendo nenhum estilo para nosso contêiner de formulário embutido. Cada caso de uso deve criar seus próprios estilos. Também aqui eu quero criar outra classe também para estilizar se estiver no modo de edição, é aqui que vou criar na classe G. E aqui estou fornecendo um objeto, copo de uísque em linha , recipiente de traço. Então, o mesmo nome, edição de traço. Aqui estamos fornecendo o valor da edição que acabamos de criar. A ideia principal é que recebemos classes suficientes para que outros desenvolvedores usem esse componente e o estilizem adequadamente para cada estado. E a última coisa aqui é, claro, um clique. Queremos ativar nossa edição. Então vamos criar aqui uma nova função, ativar a edição e não precisar fornecer nada aqui. Agora vamos definir essa função. Então, dentro do nosso arquivo aqui na parte inferior, podemos criar a edição ativa e o que isso ativou e está fazendo isso. Em primeiro lugar, defina este ponto está editando como verdadeiro, mas não é tudo. Temos um caso em que queremos ver o valor que queremos mudar. Por exemplo, temos um formulário de edição como o nome divertido do quadro. E para isso, fornecemos dentro deste título de entrada. Mas como você pode ver em nosso título firme está vazio, o que está correto. Mas, no nosso caso, quando estamos pulando para a edição, queremos definir nosso título. É por isso que o que podemos escrever aqui se tivermos um título. Então, se tivermos this.title, então queremos colocá-lo dentro do nosso formulário. E para isso, podemos escrever esse valor de ponto em forma de ponto. E lá dentro, recebemos um objeto com o título, esse título. Então, o que esta linha está fazendo, se a ativarmos na edição e fornecermos um título dentro dela, atualizaremos nosso valor do formulário com o valor da afinação da função. Agora vamos voltar ao nosso HTML. Então, dentro de uma div com o Festival one para criar uma div que mostraremos quando não estivermos na fase de edição. E isso é apenas um texto com alguma classe que podemos estilizar. Este é o meu aqui, aula div. Aqui estaremos o texto do formulário embutido. E aqui queremos mostrar a este DFF apenas um. Não estamos no editor e afirmamos é assim aqui, o NADH está editando. Em seguida, mostramos esse div e dentro de um para renderizar nosso texto padrão que estamos recebendo na entrada. E depois disso, estamos criando nosso formulário, assim como fizemos no registro interno. Portanto, é uma forma reativa e bem definida nosso grupo de formulários. Então, aqui podemos fornecer nosso grupo de formulários. Este é o nosso formulário e também teremos aqui o NG Submit. E devemos criar a função onsubmit. Mas vamos terminar com este formulário aqui. Em primeiro lugar, queremos renderizar essa forma apenas uma barra no estágio de edição. É por isso que a GE está editando. E também vamos querer fornecer uma classe para estilizar e nós apenas o nomeamos de forma inline. Vamos voltar agora para dentro deste arquivo e criar aqui nossa função onsubmit. E aqui está a parte complicada. Poderíamos abrir um formulário, não fornecer um valor e, em seguida, pressionar enter. E não é isso que queremos emitir. Não faz sentido encontrar uma corda vazia. Então, aqui queremos verificar isso. Se tivermos essa forma de ponto, valor de ponto, título , somente, então queremos emiti-lo. E para uma carne, temos esse identificador de ponto enviar um meio, e dentro estamos fornecendo esse título de ponto de valor firme, o que na verdade significa que se estamos enviando este formulário e tivermos uma entrada vazia, queremos imediato o que queremos fazer depois que queremos fechar nossos ouvidos estado de edição, É por isso que editar é igual a falso. E também queremos redefinir nossa empresa para o estado inicial. É por isso que essa redefinição de ponto de forma de ponto e essa funcionalidade que estamos obtendo do Angular fora da caixa. Agora, vamos voltar ao nosso HTML. Aqui temos um formulário. Agora devemos definir uma entrada. Então, aqui vamos criar uma entrada com um texto de tipo. E estamos chegando aqui dentro do nome do controle do formulário. E quando nesta forma reativa de flores, aqui temos nosso nome, o título também desejará criar aqui uma classe para estilizar. Então, aqui entrada do formulário de entrada da classe. Também queremos fornecer aqui nosso espaço reservado e estamos obtendo isso a partir da entrada. Portanto, é um marcador de entrada e queremos renderizar essa entrada. Somente aquele que forneceu o tipo correto dentro. Aqui estará NG IV com tipo de entrada, onde nosso tipo de entrada é igual a entrada. E agora queremos fazer exatamente a mesma área de texto de largura. Portanto, temos aqui no exterior e queremos fechar diretamente nossa área de texto. E agora, lá dentro, queremos verificar esse NG IV. Então, aqui nosso tipo de entrada é igual a textarea, então vamos randy. Mas também devemos fornecer aqui um nome de controle de formulário, e isso também será um título. E também devemos fornecer aqui uma aula. E neste caso, a classe será a mesma entrada do formulário de entrada e depois de como ela se estende sobre a máscara, crie um botão para enviar. É aqui que aqui no botão e dentro teremos nosso texto, texto botão que estamos obtendo da entrada. E queremos renderizar esse botão somente se tivermos uma entrada adequada. Então, se tivermos um botão input has, então vamos renderizá-lo. Então aqui queremos o tipo submit, e aqui queremos desativá-lo se for inválido, é aqui que ele está desativado e podemos usar o formulário dot invalid. E depois disso, também queremos adicionar uma classe para estilizá-la. E aqui estará o botão de formulário embutido. E, na verdade, com estes o formulário de entrada está completamente pronto. Então, o que estamos fazendo aqui, temos uma div, temos aqui ativar a edição. Temos aqui diferentes classes para cada elemento aqui foram renderizadas em nosso texto padrão e aqui está nosso formulário com entrada ou textarea e botão, se precisarmos. Então, no próximo vídeo, tentaremos usar nossa empresa interna no caso de uso da criação da placa. 23. Implementação de criação de um conselho: No vídeo anterior, preparamos com sucesso nosso formulário interno, mas não está claro como o usaremos com o recém-criado com todos os valores possíveis dentro. Neste vídeo, vamos querer usá-lo, mas não temos nada dentro da nossa página de painéis. Esta é a maneira de colocar dentro da nossa forma interior. Também devemos gerar nossa página de painéis. E aqui temos principalmente marcação on-line porque já temos acesso aos nossos quadros, porque já criamos o método get board e o assinamos para obter nossos quadros. Então, vamos começar com nossa marcação aqui, podemos remover o mundo dos esportes. E antes de tudo, no topo, eu quero escrever acima porque, na verdade, neste vídeo, não vamos implementar nossa barra superior, mas não devemos esquecer que precisamos implementá-la mais tarde. E aqui podemos começar nossa marcação. Então, primeiro de tudo, temos aqui quadros, contêiner de páginas. Agora vamos fechar essa div e dentro teremos mais uma div com a barra lateral esquerda da classe home. Aqui estamos fechando nossa div. E, na verdade, aqui estamos criando nossa barra lateral à esquerda e dentro teremos links para nossas diferentes páginas. É por isso que aqui temos um link de roteador e queremos fornecer aqui um link nas placas de barra. Depois disso, também precisaremos adicionar uma classe aqui, opção de menu lateral de quadros. Também aqui queremos halite o link quando é uma rota inativa e um Angular para isso, temos um atributo especial que é chamado de link de roteador ativo. E, na verdade, é uma diretiva. E então dito, nós podemos fornecer o que a classe put deseja obter. No nosso caso, queremos selecionar uma opção de menu lateral dos quadros de aula. Vamos fechar nosso a aqui e por dentro. Vamos tentar textos. São pranchas também. Vamos definir aqui mais um link que será o lar. É por isso que vou copiar e colar completamente pois um link de roteador aqui será cortado. Link de roteador da mesma classe ativo. Aqui podemos escrever não placas, mas em casa, mas também aqui queremos escrever opções ativas de link de roteador por isso, porque na verdade aqui nós roteamos a barra de link e cortamos em cada link de roteador. É por isso que esse link de roteador ativo sempre destacará esse elemento que queremos evitar. É por isso que devemos fornecer opções ativas de link de roteador. E aqui dentro estamos fornecendo um objeto com o campo exato verdadeiro. Nesse caso, destacaremos esse loop lean on e teremos malha completa na barra. E, na verdade, da nossa perspectiva, não faz muito sentido criar esses dois links diferentes. Porque quando estamos trancados, mas não conseguimos acessar nossa casa, o que significa que seremos redirecionados diretamente para nossa página de painéis. Mas essa é a marcação que estamos obtendo do projeto. Então, simplesmente implementamos o que temos depois da nossa barra lateral. Devemos criar uma parte principal com nosso contêiner para as placas, é aqui que aqui estará o contêiner da seção de placas da classe div . Agora vamos fechar aqui div e dentro queremos criar mais uma div. Aqui teremos aulas div em meus quadros. Vamos fechar essa div e dentro dela queremos criar mais uma classe com um cabeçalho. Este é o caminho aqui, classe div, meu cabeçalho da seção Boards e por dentro devemos criar mais uma classe. E será o cabeçalho da página das placas de vidro, o nome e, por dentro, tentaremos. Minhas pranchas. Depois do nosso cabeçalho, queremos renderizar nossa lista. Este é o caminho aqui. Teremos uma lista de blocos do quadro div porque teremos aqui cada quadro como um bloco. Aqui podemos fechar nossa div e dentro dessa div, queremos renderizar nosso formulário embutido. Vou terminar em um segundo porque, por enquanto, quero terminar nossa marcação. E depois de formarmos o grupo um em linha para renderizar todos os nossos blocos, que são placas. E para isso, escreveremos nosso gráfico aqui, então um link de roteador. E aqui queremos fornecer um link para cada placa. É aqui que temos um parâmetro dinâmico. Então, aqui podemos fornecer uma matriz com placas de barra. E o segundo parâmetro que colocamos aqui, ponto do quadro de vírgulas. Nesse caso, geraremos o link correto do roteador para cada placa. Mas, para obter acesso ao quadro aqui, devemos escrever e G for loop. Este é o caminho aqui no G4 e estamos percorrendo nossas placas. Então aqui vamos deixar o conselho, e aqui também sentiremos falta da nossa aula. Então, aqui devemos ter o bloco do quadro e vamos fechar este a. Agora, dentro do nosso link a, queremos fornecer um div com nome dos detalhes do bloco do quadro de classe. Vamos fechar essa div e renderizar dentro do nome. Será azulejo entediado e eles marcarão está totalmente pronto. Vamos verificar se está funcionando. Na verdade, tenho aqui uma seta porque eles usaram a propriedade não corretamente. Aqui, devemos colocar colchetes duplos e não colchetes simples. Vamos verificar novamente. Temos uma narrativa de que não temos painéis de propriedades, e isso é totalmente válido dentro do nosso script de tipos. Estamos recebendo nossas placas, mas simplesmente temos aqui o registro do console com Dan, salve-as. E, na verdade, devemos fazer desta forma aqui no topo, podemos criar propriedades de placas. Será a interface da nossa placa que já temos. Este é um array e, por padrão teremos uma lista vazia de nossos quadros. Agora, aqui, em vez do nosso registro do console, podemos simplesmente atribuir aos nossos quadros, nossos quadros que estamos obtendo do nosso serviço. Vamos verificar novamente. Como você pode ver agora, não temos nenhum erro, mas temos uma placa de erro. O bloco não existe. E é por isso que eu gosto tanto do TypeScript. Foi simplesmente um erro de digitação, mas não o depuramos em tempo de execução. Simplesmente temos uma validação do TypeScript. Então aqui deve estar o título, e agora não temos nenhum erro. Você não deveria ser válido. Vamos verificar isso. Estou recarregando a página e na verdade, ela está olhando de alguma forma. Temos aqui nosso aplicativo para bar. Ainda não o implementamos. Aqui à esquerda, temos um link de painéis e um link inicial. Então, os links estão lá. E aqui está o nosso conteúdo principal com meus quadros em relevo que criaremos um segundo e nosso primeiro quadro com o link correto. E como você pode ver aqui na parte inferior, é porta de barra, id de barra, o que significa que nosso URL também está funcionando. Mas eu tenho um pequeno erro de digitação na marcação. Como você pode ver, nossa barra lateral não parece tão boa porque aqui dentro de uma barra lateral esquerda da classe div, perdi o contêiner de palavras, então deve ser o lado esquerdo da casa, mas o contêiner, como você pode ver agora, nossa barra lateral é muito maior e parece melhor. Então, como você pode ver, buscamos com sucesso nossas placas com esse código dentro de nosso componente com nosso serviço. Salvamos essas informações na propriedade de nossos conselhos e foi renderizada nossa lista de painéis. E, na verdade, aqui dentro da nossa rede, podemos ver que temos uma solicitação no host local para 1001 placas sem caminho. E estamos recebendo nossa única placa que temos. E agora é hora de falar sobre a empresa do interior. Então, como vamos usá-lo aqui dentro do nosso HTML. E para isso, quero abrir nossa forma interior aqui à direita para que possamos entender o que temos dentro de nosso componente. Então, aqui temos muitas entradas. Então, o que devemos fornecer para esse uso específico, na verdade, aqui estamos certos de que temos nosso formulário de traço embutido. Vamos fechar aqui. E agora, antes de tudo, por dentro, quero dar uma aula. E a ideia principal é que essa é a classe pai que podemos estilizar porque queremos aplicar estilos exclusivos ao nosso componente. E só para lembrá-lo aqui, temos aulas como o interior do contêiner, interior do texto e da música. A ideia é que essa classe mais essa classe substituam qualquer CSS. E essa é exatamente a ideia. É aqui que estamos fornecendo algumas aulas, por exemplo, criar formulário de quadro. Agora, todos esses clusters internos serão mais simples aninhados dentro do nosso CSS. A segunda coisa que precisamos aqui é o texto padrão. E esses são os textos que veremos no cartão de antemão. E aqui temos nossos textos padrão, criar um novo quadro. E a última coisa que devemos fornecer aqui é lidar com o envio. Isso é o que estamos obtendo do nosso formulário. Aqui. Podemos escrever, por exemplo, criar quadro e estamos chegando aqui evento. Então, o que fez esse evento, só para lembrá-lo aqui, temos um identificador de envio e é uma string. Este é o nosso título e não precisamos aqui ter título do botão, texto do botão, espaço reservado, tipo de entrada, só porque esta é a principal empresa interna padrão. Agora vamos verificar se está funcionando onde pular aqui dentro do console e morrer diretamente tem um erro. Não temos um método de criação de placa, então vamos criá-lo agora aqui. Este é um método em que estamos obtendo uma string. Então, podemos dizer que aqui estamos recebendo um título, é uma corda e, de volta, retornaremos vazios, o que não significa nada. E lista aqui que eu quero consultar nosso título, que foram criados dentro de nossa forma interior. Agora estamos chegando aqui e o argumento restrito do evento de tipo não é atribuível para permitir uma string. E, na verdade, pode ser muito complicado para você depurar porque você pode pensar, ok, estou fornecendo aqui algo diferente. Mas o problema não está nisso. O problema é que dentro deste módulo, não injetamos dentro do nosso módulo de formulário interno. É aqui que aqui dentro do módulo de placas, devemos importar nosso módulo compartilhado e ele estará alinhado para o módulo. E a ideia principal é que estamos invertidos aqui em um módulo, mas por dentro temos um componente de id especialista. É por isso que agora podemos usar esse componente explorado no interior do nosso componente. Vamos verificar isso. Como você pode ver, não temos mais esse erro. Temos algo diferente e aqui não podemos nos vincular ao grupo de formulários, pois não é uma propriedade conhecida do formulário, é por isso que devemos fazer. Devemos colocar formas reativas dentro do nosso módulo de formulário em linha. É por isso que eu quero pular dentro do módulo de formulário embutido. E aqui dentro das entradas, eu quero escrever um módulo de formulários reativos. Agora não devemos receber esse erro. Vamos verificar isso. Como você pode ver, tudo é verde e estamos prontos para começar. Vamos verificá-los em um navegador onde recarregar a página e pronto, esse é o nosso elemento. E pode ser muito difícil para você entender o que está acontecendo aqui porque não escrevemos nenhum CSS e o CSS já estava preparado rapidamente. Então, vamos inspecionar esse elemento. O que temos aqui? Como você pode ver, este é um formulário interno e este é o nosso formulário de criação de quadro de classe. Vamos verificar isso. O que temos dentro de nosso projeto e nossos estilos. Não dissemos estilos de origem e aqui muitos estilos e estamos interessados agora em criar formulário de quadro. Vamos abri-lo, e esse é o nosso CSS. Isso é exatamente o que vemos aqui. Este é o formulário de criação de placa. Este é nosso pai. O mais importante é que dentro da forma interior, temos estilos diferentes. Por exemplo, aqui está o contêiner de formulário inline da classe div e como estamos estilizando, estamos usando aqui nossa classe pai que temos aqui. Isso é criar formulário de quadro e , em seguida, recipiente de formulário embutido. E isso é o que você pode ver aqui. Sempre prefixe aqui, tudo para o interior de classes com o formulário de criação de quadro, que é nosso formulário pai, apenas para esse uso específico. Então é assim que estamos tornando nosso interior super flexível. Ele contém 0 CSS dentro e simplesmente definimos todo o nosso CSS externo para cada caso. É por isso que aqui definimos, ok, temos o interior do contêiner, você deve exibir flex, alinhar itens e justificar o conteúdo. Então, se precisarmos estilizar em linha a partir de textos, por exemplo, neste caso, não estilizamos, mas também poderíamos apenas aqui, criar formulário de quadro, formulário embutido, texto e estilizar esse elemento. Então foi assim que criamos nossa incrível forma interna, que é super compartilhável para cada caso. Agora vamos verificar se está realmente funcionando. Portanto, temos aqui nosso texto padrão para criar um novo quadro. Podemos clicar nele, e agora temos nossa opinião e podemos escrever algo aqui. E eles já veem aqui um erro. Como você pode ver aqui, temos entrada com uma entrada de formulário de entrada de classe, mas isso é o que estamos estilizando e onde estilizar a entrada de formulário inline, o que na verdade significa que cometemos um erro de digitação lá. Vamos voltar para dentro do nosso componente, componente de forma interna. E aqui temos nossa entrada e aqui precisamos alterar nossa entrada de formulário de entrada para entrada de formulário em linha. E como você pode ver, estamos tendo exatamente o mesmo problema aqui na área de texto. Deve ser uma entrada de formulário embutida. Vamos verificar novamente. Estou recarregando a página onde está escondida no botão, e agora temos uma entrada com o estilo correto. Agora posso pagar algo como foo e clicar em Enter e nosso formulário é fechado com sucesso. Vemos criar novos quadros novamente. E dentro do console, vemos que nosso título é exatamente nossa saída dentro do componente da placa. Mas o que estamos perdendo aqui completamente é criar uma placa no cliente e no servidor. E agora eu quero fazer o contrário. Quero começar com o front-end e terminar com o Pi. E então você pode ver como estamos fazendo isso na ordem inversa. Então Festival aqui temos nosso componente Create board inside. Portanto, a ideia é que aqui usaremos nosso serviço de diretoria. Este é o meu serviço dentro do nosso conselho, devemos criar um novo método. Por exemplo, vamos chamá-lo de ponto de criação. Então, o que estamos recebendo aqui, simplesmente chegamos aqui no título e é string e vice-versa , obteremos um observável com o Board criado, o que significa que será uma interface entediada. E agora o que teremos dentro, em primeiro lugar, podemos copiar e colar o URL porque será exatamente o mesmo. É slash boards e estamos fazendo uma solicitação postal. É aqui que podemos dizer que estamos retornando esse HTTP e não obtemos, mas postamos. E por dentro. Em primeiro lugar, devemos fornecer um URL. E em segundo lugar, forneceremos aqui um objeto com o título do campo. E, na verdade, esse é o nosso corpo. E para o nosso conselho, basta fornecer o título. Porque no backend com set apenas duas coisas. Isso é título e ID do usuário. E o ID do usuário, nosso back-end deve entender por si só, porque estamos fornecendo um token com nossa solicitação e somos autenticados. O principal problema é que estamos contornando a digitação. Devemos fornecer uma visão ou uma postagem. Estamos recuperando nossa interface de placa. E, nesse caso, criamos com sucesso o método Create Board. E como você pode ver todos os nossos métodos de API, vou olhar exatamente da mesma forma. Isso é simplesmente URL e, em seguida, postagem HTTP é derrubada, precisamos. Agora vamos usar o método service dentro do nosso componente. Então, vamos pular para trás. E aqui está nosso quadro Criar. E aqui queremos chamá-la de ponto de serviço da palavra. E aqui Create Point. E por dentro estamos fornecendo exatamente o título que obtivemos aqui da nossa forma interior. E depois disso, estamos escrevendo dot subscribe e aqui estamos criando o quadro de volta. O que queremos fazer com esse ponto? Nós simplesmente queremos mudar nossa taxa dessas placas. É por aqui que vou escrever esses quadros de pontos iguais. E aqui estamos espalhando nossos quadros de pontos e então eles querem colocar nosso quadro criado. Então, essencialmente, estamos criando aqui em sua matriz, onde dentro colocamos todos os nossos campos da matriz antiga e, em seguida, são criados o quadro. Então, nossa frente e isso totalmente preparado. Agora, devemos pular para o backend e criar tudo lá. No back-end. Não é tão difícil porque todos nós criamos um modelo para o quadro e podemos usá-lo. Nós só precisamos pular e disse irmandade S. E aqui criando sua solicitação de API. Aqui podemos copiar, colar , obter completamente, e será postado em quadros de barra. Aqui, devemos usar o middleware do sistema operacional porque essa é uma solicitação autenticada. E aqui estamos usando o ponto controlador da placa, por exemplo, criar placa. E agora devemos criar esse método dentro do nosso controlador. Então, vamos pular de volta para dentro do controle da nossa placa. E aqui queremos criar exatamente o mesmo, mas será uma solicitação de postagem para criar um registro. É por isso que vou copiar e colar isso completamente e renomeá-lo. Então, aqui temos nosso quadro Criar e estamos recebendo aqui nossa resposta de solicitação. E em seguida, e temos dentro tentar pegar aqui. Em primeiro lugar, dentro de onde o frango para pedido usa que isso é totalmente bom. E depois disso, queremos criar um novo quadro. É aqui que vou remover essa linha. Então, aqui vou escrever que estamos criando nosso novo quadro e, para isso, estamos usando seu modelo entediado e depois dissemos: Devemos fornecer um objeto válido. Aqui. Em primeiro lugar, estamos fornecendo um título do quadro de solicitações, o título do ponto. E o segundo é o usuário AD e realmente usar em relação à tomada em massa de nossa solicitação, de nosso middleware. Então, aqui teremos o pedido dot USA, dot underscore ID. E, na verdade, podemos usar ID de sublinhado ou um D, não importa. Temos os dois disponíveis. Portanto, essa linha não salvará nada no banco de dados. Simplesmente criamos aqui uma instância do nosso modelo. E depois disso, queremos salvar esse registro no banco de dados. É por isso que aqui podemos experimentar o quadro salvo e estamos usando aqui um peso aqui, e você comprou dot save. Nesse caso, estamos salvando esse registro e recuperando nosso quadro salvo. E como você pode ver, este é um documento do Word. Então, depois disso, podemos responder com nosso quadro salvo. Então, mais uma vez, temos uma solicitação de postagem, temos uma ação Criar quadro aqui. Estamos verificando se estamos trancados. Depois disso, estamos usando nosso modelo de quadro para criar um novo quadro com o título que fornecemos e usar 3D que não fornecemos. Mas Deus, do nosso usuário bloqueado e salvamos esse novo ponto dentro do banco de dados. Recuperamos nosso quadro salvo e estamos respondendo com essa API. Vamos verificar se está funcionando. Eu não tenho nenhum erro aqui dentro do back-end. Então, vamos entrar no cliente aqui. Eu quero clicar criar um novo quadro e estou digitando algo e pressionando Enter. E como você pode ver diretamente aqui, temos nossa nova diretoria. Vamos verificar nossa rede. E, na verdade, dentro da rede, temos o pedido do nosso conselho. E este é um post sobre pontos de barra de torta rasgada. E o que é mais importante aqui dentro da pré-visualização, esta é a nossa resposta. Esta é uma ID de usuário do título. Isso é exatamente o que foi salvo dentro do banco de dados, que realmente significa que se eu recarregar a página aqui, estamos recebendo duas placas agora porque essas informações são todas salvas dentro do banco de dados. E aqui dentro da nossa rede, estamos recebendo nossas placas. E como você pode ver na prévia, já estamos recebendo dois quadros e não um, o que significa que terminamos totalmente com nossa página de painéis. Em primeiro lugar, seja renderizado aqui na barra lateral, mas não fizemos nada com isso. Também usamos aqui nossa forma interna, que é super compartilhável. E criamos nosso serviço, que está falando com nossa API, para criar um novo quadro a partir desta página. 24. Adicionar barra e saída superior: No vídeo anterior, terminamos nossa página de painéis, mas esquecemos de implementar nossa barra superior. E, na verdade, este é o TBA em cada página para um usuário conectado, que na verdade significa não apenas a página dos meus quadros, mas também uma única página do quadro, é por isso que devemos criá-lo como um módulo compartilhável. Então, eu quero ir para o nosso aplicativo de origem do cliente compartilhado. E aqui temos nossos módulos e empresa interna. E, na verdade, aqui eu quero copiar e colar este formulário em linha completamente e renomeá-lo para a nossa língua. Mas agora dentro da massa muda tudo. Em primeiro lugar, vamos começar pelo nosso módulo. Então aqui temos um módulo de barra superior e dentro com não temos nenhum módulo de formulário reativo, simplesmente teremos alguma marcação e o botão de logout. Aqui podemos remover essa entrada e devemos alterar nosso componente também. Mas antes de tudo, vamos mudar o nome da turma. Deve ser o nosso módulo de barra superior. Agora vamos entrar em nossos componentes. E aqui não temos empresa no interior, temos nossa barra superior e temos dois arquivos dentro. Primeiro de tudo, será top bar dot component dot HTML. E aqui está o nosso componente de ponto da barra superior, pontos ts. Agora vamos mudar a marcação. Quero remover tudo na barra superior direita mais simples. Agora vamos pular para o nosso arquivo ts e remover tudo do nosso componente. Agora quero renomear nosso seletor para a barra superior apenas para deixar claro onde ele pertence. Na verdade, temos apenas um único Toba dentro do nosso aplicativo. Poderíamos simplesmente escrever aqui Tampa, mas como é compartilhável para nós, vou escrever aqui em cima, mas apenas neste único lugar, aqui temos nosso URL de modelo. Esta é a barra superior e nome do nosso componente é componente de beliche superior. Agora eu posso remover os símbolos e apenas viver aqui nossa entrada de componente. Agora vamos voltar para dentro de um módulo. Agora não temos esse componente de formulário embutido, mas queremos declarar aqui nosso componente de barra superior e componente TBA especializado porque queremos usá-lo fora. Portanto, nosso módulo agora está totalmente pronto. Sim, não implementamos nenhuma lógica interna, mas ainda não podemos vinculá-la. E nós queremos pular e dito módulo de placas e dentro de nossas entradas podemos adicionar aqui módulo de barra superior. Agora aqui dentro de nossas placas de componentes, placas, HTML na parte superior. Em vez desse texto, podemos simplesmente escrever a barra superior AP e fechá-la aqui. Vamos verificar se está funcionando. Não temos nenhum erro aqui. Vou recarregar a página. E aqui no topo você pode ver a barra superior dos textos, o que na verdade significa que vinculamos com sucesso nosso módulo e componente à nossa página de quadros. Agora vamos tentar comercializar nossa barra de ferramentas. É aqui que eu estou voltando para dentro do nosso componente Tombow HTML. Aqui, vamos escrever. Então, primeiro de tudo, temos aqui div com placas navbar de classe. Vamos fechar essa div lá dentro. Teremos mais um div, div, navbar, lado esquerdo. Vamos fechar essa div e , em primeiro lugar, teremos um link para nossa casa. É por isso que um link de roteador. Aqui estará nossa barra, e aqui estará o ícone da barra de navegação da classe. Vamos fechar nosso a e dentro devemos fornecer uma nova imagem. Então, aqui estarão as imagens dos recursos de barra de origem slash home dot SVG. Depois disso, teremos mais um link de roteador. É por isso que vou copiar e colar completamente e ele está indo em quadros de barra. E será Naropa eigenspace, ícone de placas navbar. E por dentro temos outro arquivo SVG. É slash assets slash boards, como você pode ver agora, quando estou recarregando a página, temos dois ícones legais, um para o link da página inicial e outro para nossos quadros. Mas como você pode ver isso aqui, os trilhos são inválidos. Nós não os temos porque, na verdade, devemos pular dentro do nosso módulo de barra superior. E aqui, importe o módulo de rota. Vamos salvar isso e recarregar a página. E como você pode ver agora, isso realmente vincula, em primeiro lugar, página inicial e aqui os quadros de barra. Agora vamos continuar com nossa marcação. Depois do nosso lado esquerdo, temos o lado direito. Aqui. Queremos fornecer nossa imagem com ácidos de barra de origem, logotipo de barra Trello, ponto branco SVG. E aqui está nossa barra de navegação de classe. Mais tempo depois de uma imagem, temos um div com a classe navbar lado direito. Vamos chamar isso de t. E por dentro queremos criar um vestido de acompanhamento de link, este é y. Aqui estará a classe div, o ícone da barra de navegação, a barra de navegação , o ícone de logout. E aqui dentro eu quero simplesmente escrever texto log gout. Vamos verificar se está funcionando. Aqui temos nossos links à esquerda, temos a imagem do trailer no centro e temos um botão como o link de logout à direita. Mas não anexamos nenhuma lógica aqui. Portanto, nossa barra superior está essencialmente totalmente pronta. Implementamos tudo, mas precisamos agora implementar nosso logout. implementação do logout é muito simples. Só precisamos remover nosso token do armazenamento local, limpar CurrentUser dentro de nossa memória e redirecioná-lo ou usá-lo para a página inicial. Isso é o que queremos fazer aqui. Queremos anexar um evento de clique. Então, aqui vamos clicar com o botão direito. E o que estamos fazendo, estamos chamando nosso método de logout. E o número deve criar esse logout dentro do nosso componente. Então, o que queremos fazer lá dentro? Na verdade, quero armazenar nossa lógica de logotipos em nosso serviço porque isso está relacionado à autenticação e eles não querem escrever essa lógica diretamente aqui. Isto é y. O que devemos fazer, devemos injetar nosso serviço de horas, que é nosso provedor de serviços dentro desse componente. E agora aqui podemos usar nosso logout de ponto de saída. E, na verdade, não temos esse método. Devemos criá-lo, mas não é tudo, mas também depois disso redirecionar o usuário para a página inicial porque não estamos mais logados. E para isso devemos injetar aqui roteador. Então eu posso aderir roteador e será nossa seca. Depois do cólon é nosso serviço. Podemos escrever aqui este ponto do roteador navegar por URL e simplesmente queremos redirecionar o usuário para nossa página inicial. Então, estamos quase prontos. Só precisamos implementar nosso método de logout aqui dentro de nossa classe de serviço. Então aqui na parte inferior, vou escrever logout com não preciso de nada aqui. Nós simplesmente queremos remover nosso token. Então, aqui podemos escrever o item de remoção de ponto de armazenamento local e foram fornecidos dentro do destino. Isso é suficiente, mas não limpamos nossa memória. E, na verdade, esses usuários atuais ainda têm um usuário atual válido. Isso não é bom. Devemos configurá-lo para agora. É por isso que esse ponto atual do usuário ponto. Em seguida, somos fornecidos dentro agora e, com esse revestimento único, todos os nossos componentes serão notificados de que não estamos mais presos. Vamos verificar se está funcionando. Eu não tenho nenhum erro aqui. Não precisamos implementar nada no back-end. Agora vamos simplesmente clicar aqui logout. E como você pode ver, boom, estou diretamente na página inicial e podemos verificar se não estamos presos. Na verdade, foi chamado de salto aqui dentro do armazenamento local do aplicativo. Eu não tenho meu token. É por isso que, quando estou recarregando a página, recebo 401 não autorizado, o que significa que implementamos com sucesso nossa barra superior e funcionalidade de logout. 25. Criar módulo de placa: No vídeo anterior, concluímos com sucesso a implementação da nossa página de conselhos. Neste vídeo, estamos começando a implementar nossa página de quadro único. E estamos focados aqui apenas em criar nosso módulo e componente básicos. É por isso que eu quero entrar no conjunto de origem. E aqui eu quero criar uma nova pasta com o novo módulo. E na verdade você pode dizer, Ok, mas por que não embalamos nossa placa de componente dentro do módulo de placas e sim, você pode fazer isso, mas eu quero dividi-lo porque a lógica dentro desses dois módulos é bastante diferente. Ainda precisamos pagar muito dentro do nosso módulo de placa. Aqui é y. Vamos criar aqui uma nova pasta chamada board. E por dentro, queremos criar nosso quadro ponto module.js. Além disso, vamos criar diretamente aqui nossa pasta de componentes e pasta mu dentro da qual é chamada board. E aqui precisamos de dois novos arquivos. Em primeiro lugar, board dot component dot ts e, em segundo lugar, board dot component dot HTML. Agora vamos criar tendências dentro do HTML, palavra fervida, e vamos criar nosso componente. Então, aqui podemos exportar nossa nova classe, e ela é chamada de componente de placa. E no topo remasterizou um decorador de componentes. Por dentro, queremos fornecer nosso seletor e podemos simplesmente dizer aqui que selecionamos o quadro e também devemos fornecer aqui um URL de modelo que é derramado em HTML componente, nosso componente de placa é totalmente preparado. Devemos saber criar nosso módulo. Então, aqui queremos exportar uma nova classe, que é chamada de molécula de placa. E queremos adicionar no topo do decorador e do módulo GI e fornecer informações, pelo menos, a lista de entradas. E aqui teremos, antes de tudo, módulo comum também agora podemos criar nossas declarações e fornecer insights, os componentes do nosso conselho que acabamos de criar. Então, queremos se registrar aqui em sua rota. É aqui que aqui no topo podemos criar uma nova propriedade chamada rotas. E são nossos gritos, que são uma matriz. E por dentro, devemos fornecer um novo objeto com caminho de campo. E aqui teremos a barra de placas de URL, e aqui temos o ID da placa de dois pontos. O que significa esse ID de placa? Isso significa que temos um parâmetro dinâmico, o que significa que aqui temos um ID de placa e é diferente para cada placa. Depois disso, devemos fornecer aqui um componente e, no nosso caso, será o componente da nossa placa. Também aqui eu quero usar a palavra serviço. É por isso que aqui podemos escrever, podemos ativar. Este é um array, e aqui está o nosso serviço necessário. Por que estamos fazendo isso? Porque esse URL é apenas para usuários conectados. Se não estivermos logados, não queremos acessar esse URL. E agora devemos registrar essas rotas dentro de nossas entradas. Então, aqui podemos colocar o módulo de rota ponto para criança, e aqui estamos fornecendo informações sobre nossas rotas. E por último, mas não menos importante, devemos registrar esse módulo dentro do nosso módulo de aplicativo. Então, aqui dentro de nossas entradas, podemos simplesmente escrever o módulo da placa, e este é o nosso novo módulo, que é inserido aqui na parte superior. Vamos verificar se está funcionando. Podemos pular agora dentro do nosso navegador, abrir nossas ferramentas de desenvolvimento. Aqui podemos clicar em nosso primeiro quadro. E como você pode ver agora, não temos nenhum erro. Vemos aqui no quadro de palavras superior e, em seguida, o URL que vemos slash boards, slash e eles D deste quadro específico. O que precisamos fazer agora é obter um único quadro para essa página específica. Por que isso? Porque, na verdade, nem sempre saltamos da página dos quadros para o nosso único quadro. E você pode dizer, Ok, bem, na página de painéis, temos todos os nossos quadros. Mas, novamente, quando estamos nesta única página e recarregamos a página, não temos nenhuma informação importante, que significa que devemos obter esse anúncio do nosso URL e obter esse quadro específico com o CD. Também informações adicionais posteriormente, como colunas ou tarefas. É por isso que quero abrir nosso aplicativo, serviços compartilhados, placas, níveis de serviço, e a venda será definida anteriormente, aqui estamos escrevendo todos os nossos pedidos para o corante, que estão relacionados aos nossos quadros. É por isso que aqui podemos criar um novo método que é chamado de ficar entediado. E então, para obter uma placa, devemos fornecer um ID de placa, que é uma string, e, de volta, obteremos um observável com nossa interface de placa. Agora, aqui dentro, devemos preparar nosso URL. Então, aqui vamos usar o ambiente Doherty Pi URL plus, e aqui queremos concatenar nossas placas mais AD. É por isso que faz muito sentido usar strings ECMO ScriptSig aqui e injetar dentro desse ambiente URL de DPI. Então temos aqui slash, boards, slash, e aqui está um AD como argumento. E, na verdade, não é um AD, nasce e AD. Portanto, esse é o URL que queremos buscar no back-end. E agora devemos retornar nossa solicitação deste ponto http.get. E estamos fornecendo informações privilegiadas para obter nosso reino de urina que queremos buscar. Mas, novamente, aqui estamos voltando observar objetos e devemos especificar que estamos recuperando nossa interface de placa. Agora vamos tentar buscar esse URL. É por isso que devemos voltar para dentro do módulo da placa, componentes, componente da placa. E aqui dentro eu quero criar um novo método fetch data, e esse método retornará void. E por dentro, queremos usar esse método que acabamos de criar para buscar nosso quadro pelo AD. É aqui que devemos fornecer um construtor e aqui estará serviço de placas privadas que encerramos este serviço de placas. E dentro de nossos dados de busca, podemos escrever esse ponto de serviço de quadro de pontos, ficar entediado. Estamos fornecendo o ID do painel de ideias, mas ainda não temos um D neste componente. E, na verdade, devemos armazenar esse ID da placa a partir do URL, porque o usaremos muito dentro desse componente. Mas se escrevermos aqui o ID da placa é igual a string, então chegaremos aqui uma placa estreita que eles cavam não tem inicializador e não está definida no construtor. E, na verdade, não queremos chegar aqui indefinidamente porque não será confortável trabalhar mais tarde. O AD da placa é obrigatório para o nosso componente. E para obter o perímetro da nossa URL, devemos injetar aqui a rota. Então, aqui estará a mortalha privada. Aqui queremos usar a rota ativada. Agora, aqui dentro, queremos tentar ler essa seca ativada. Então, aqui eu quero obter o ID da placa como um parâmetro e estamos usando aqui esta cobertura de pontos, pontos, instantâneo, mapa de parâmetros de pontos aqui será o ID da placa. E é assim que você normalmente obtém parâmetros do URL dentro do Angular. Mas, como você pode ver, é isso que estamos recebendo de volta. Estamos ficando tensos agora, isso é totalmente razoável porque o Angular pode ter certeza de que esse parâmetro está sempre lá. É por isso que podemos escrever aqui, porque realmente queremos salvar apenas uma string. Podemos verificar e lançar um erro se ele não estiver lá. É por isso que aqui podemos escrever. Se não tivermos nossa placa AD, então lançaremos uma flecha. Aqui será lançado um novo erro, por exemplo, não pode ficar entediado AD do URL. E depois disso, simplesmente escrevemos esse ID de placa igual a Id de placa. E como você pode ver neste caso onde entrar dentro da string, porque verificamos aqui para TypeScript que não é agora. E se for agora, então estamos lançando um erro. Isso é realmente o melhor que podemos fazer para obter uma string neste componente. Porque não será confortável verificar todos os lugares em que estamos obtendo esse parâmetro. E agora, aqui dentro de uma boa prancha, podemos fornecer uma visão. Este quadro de pontos AD. Depois disso, podemos escrever dot subscribe e estamos recebendo volta nosso quadro e podemos atribuí-lo e salvar em algum lugar. Mas pelo menos por enquanto, eu só quero registrar o console do nosso quadro Comma board, mas não chamamos isso de busca de dados em algum lugar. É por isso que aqui devemos escrever implementos nele. E agora, depois do nosso construtor, podemos em junho nele e dentro dele podemos chamar esses dados de busca. E, na verdade, toda vez em cada componente em que preciso buscar alguns dados, prefiro criar um método adicional para isso, que é chamado de buscar dados. E não apenas jogue essa lógica dentro e junte-se a ela apenas para torná-la mais limpa. Como você pode ver quando estamos pulando para o navegador, estamos fazendo agora uma solicitação em nossa barra de API, barra, barra e esse ID específico do parâmetro momma, que realmente significa que temos sucesso implementado no cliente ou quando você comprou o módulo e até mesmo buscou nossa placa no back-end. Obviamente, não implementamos uma parte de back-end e faremos isso no próximo vídeo. 26. Obter um único tabuleiro: No vídeo anterior, implementamos com sucesso a parte front-end de nosso componente de placa e módulo de porta. Mas agora, no back-end, queremos implementar a obtenção de uma única placa. Este é exatamente o pedido que está quebrado aqui. E acho que implementamos muitas coisas juntos e você já não sabia como fazer isso. É por isso que eu recomendo que você o implemente por conta própria. Como sempre digo, tenha três níveis diferentes para o nível número um da UE, basta pausar o vídeo aqui e fazer você mesmo. No final, você deve obter aqui nosso quadro do back-end, nível número dois, vamos falar sobre isso. Então, o que precisamos implementar? Em primeiro lugar, quero abrir aqui nosso servidor de origem do servidor. E aqui devemos fornecer em sua solicitação e ela será gerada em slash, api slash boards e depois Boyd AD, e deve ser um parâmetro dinâmico. Deve ser protegido contra a seca. Dentro do nosso controlador de placas, devemos criar uma nova ação. Agora estamos pulando aqui dentro dos controladores fervidos, e simplesmente fazemos exatamente o mesmo, como esquecemos as placas. Mas aqui Groupon para encontrar uma única placa com o d desta placa a partir do URL. Então, se você quiser fazer um nível para pausar o vídeo aqui, e se você quiser fazer isso juntos, vamos começar. Em primeiro lugar, precisamos voltar para dentro nossos níveis de servidor aqui e criar um novo URL de API. Então, aqui teremos apt-get slushy pie slash boards e aqui arriscar a identificação da placa de cólon. Agora queremos criar um novo método. É por isso que vou pular para dentro das portas dos controladores e aqui ficamos entediados. Eles querem copiá-los completamente porque serão muito parecidos. Então aqui eu copio colado, fico entediado, e eles querem nomear esse método, ficar entediado. E aqui estamos recebendo a resposta da solicitação e a seguir, e estamos verificando se estamos presos. Agora, aqui, em vez de encontrar, todas as placas vão querer usar find one para encontrar apenas uma única placa. E, na verdade, ainda melhor, podemos usar aqui find by ID. É também um método que é possível e dentro do vermis basta fornecer uma identificação desse esporte. É por isso que podemos remover um objeto e mais simples aqui, solicitar dot params dot board Id. E de volta aqui, estamos recebendo nossa placa e simplesmente enviamos essa sacola para dentro de nossa API. Agora vamos verificar se usamos nosso método corretamente aqui, e aqui está o controlador da placa dot get boards. Isso não está correto. Deveria ficar entediado. Não temos nenhum erro aqui dentro de nossa API e implementamos com sucesso o processo de sair do quadro. Vamos verificar isso. Estou recarregando a página, mas não tenho um erro. Aqui. Estamos recebendo nosso conselho por d, e aqui estão as informações do banco de dados. Temos um título em D e um ID de usuário. 27. Adicionar fluxo de placa: No vídeo anterior, implementamos com sucesso a medição de nossa placa única a partir da API. Neste vídeo, quero compartilhar minha ideia como usaremos esse quadro e o salvaremos. E, na verdade, pode ser um pouco complicado. Por que isso? Porque, na verdade, aqui dentro do cliente, temos nosso componente de placa e simplesmente podemos armazená-lo em uma propriedade aqui. Isso é totalmente bom. Nós podemos fazer isso. Mas depois teremos um modelo e é aí que as coisas serão diferentes. Só para mencionar, temos aqui uma página com o quadro e depois batemos em uma tarefa para abrir essa tarefa dentro do modelo, o principal problema é quando recarregamos a página, queremos voltar para essa tarefa específica, o que significa que queremos ter em nosso URL slash board slash board ID slash tasks slash task ID. Em seguida, recarregamos a página e buscamos primeiro nosso quadro, depois talvez todas as colunas, todas as tarefas. E queremos resolver essa tarefa dentro do modelo, mas isso tem um meio? Estamos salvando, por exemplo, nossa placa aqui dentro do componente da placa, mas não podemos realmente usar essas informações dentro do nosso componente de tarefa. Por que isso? Porque mais tarde registraremos nosso componente de tarefa aqui como o componente filho desse caminho. E não podemos realmente acessar de forma alguma alguns dados que foram armazenados dentro desse componente do quadro da criança. Qual é a solução para esse problema? Devemos usar um serviço. Como podemos fazer isso? Em primeiro lugar, dentro de um quadro, quero criar uma nova pasta chamada serviços. E aqui podemos criar um serviço de ponto de placa, ponto ds. Aqui. Não devemos misturar nosso serviço de diretoria aqui com nosso serviço de conselhos, que tem placas de serviços compartilhados. Esse serviço serve apenas para buscar dados do back-end. Se quisermos obter nossas pranchas, usamos boas pranchas, entediados, criamos pranchas e assim por diante. Mas o que estamos fazendo dentro do quadro, esse é um tipo de estado para esta página específica, o que significa que aqui vamos armazenar nossas colunas do quadro, tarefas, tudo o que temos nesta página, e, em seguida, todos os componentes desta página podem usar o serviço para obter essas informações por meio de fluxos. É por isso que aqui queremos criar nossa classe e será um serviço entediado. E aqui no topo não devemos esquecer de usar um injetável. O que eu quero fazer agora aqui, exatamente o mesmo que fizemos com nosso usuário atual. Só para lembrá-lo, nós tínhamos aqui, nosso serviço. Aqui no topo, criamos esse fluxo de usuários atual que podemos usar em todo o nosso aplicativo. Queremos fazer exatamente o mesmo. Agora aqui, queremos criar aqui O tabuleiro era mais alto e isso é um fluxo e isso está no seu assunto de comportamento. E estamos chegando aqui em qualquer interface de placa agora. E aqui dentro estamos colocando agora só porque, por padrão, não teremos placa. Ainda não fomos buscá-lo. E depois de buscarmos esse quadro, podemos configurá-lo e atualizar o fluxo. É assim que aqui devemos criar um novo método, disse o conselho. E dentro do útero deve fornecer nossa prancha, que é a interface da nossa placa, e isso é vazio. E aqui o que queremos fazer, bom chamar esse ponto Stoller de dardos seguida, porque queremos atualizar um fluxo e retirar dentro do nosso tabuleiro. Agora não devemos esquecer de registrar nosso serviço de diretoria dentro de um módulo. Então, aqui devemos criar nossos provedores e estamos escrevendo nosso serviço de diretoria dentro. E agora podemos usá-lo diretamente dentro da nossa placa de componentes. Portanto, não queremos criar aqui um quadro de propriedades. Queremos realmente injetar aqui dentro de nossa nova propriedade do construtor. E será um serviço entediado do serviço do conselho. E como você pode ver, essa é a diferença que temos aqui, tanto os serviços, o serviço de placas quanto o serviço de diretoria. E isso é uma grande diferença. Em primeiro lugar, esse é um serviço para trabalhar com o eBay. O segundo serviço é mais parecido com um estado. E o que podemos fazer agora com buscar dados após a assinatura, podemos escrever e dizer este serviço de placa, quadro de pontos. E somos fornecidos dentro do nosso quadro. Neste caso, estamos armazenando isso dentro do fluxo. E agora podemos usar essas informações não apenas dentro de nosso componente de placa, mas depois também dentro de nosso componente de tarefa. E isso é extremamente flexível e a melhor solução que posso imaginar para compartilhar dados entre duas rodadas. E só para verificar se está funcionando, quero criar aqui no fluxo superior para o quadro. Então, na verdade, aqui temos um fluxo de placa e sabemos que esse é um observável da interface da placa. Então, estamos mostrando aqui que devemos obter uma prancha. Não há outra possibilidade. E para evitar esse erro de script de tipo sem inicializador, escreveremos esse código diretamente no construtor. Isso é totalmente bom. Então, aqui podemos escrever este quadro de pontos com dólares iguais, e aqui queremos usar o ponto de serviço armazenado. E aqui temos nossa corda, que é o dólar do tabuleiro. E você pode dizer, Ok, por que não usamos isso diretamente? Porque aqui dentro do stream de placas, podemos entrar agora nosso componente sem precisar de null. Nós simplesmente queremos trabalhar com nosso componente quando a placa não é agora, é por isso que o que podemos escrever aqui, podemos escrever pipe e filtrar o resultado. Então, aqui é só filtrar Boolean eliminará. Agora, a partir daqui, não chegaremos aqui nada se for agora, vamos apenas atualizar nosso quadro. Se conseguirmos um quadro, e agora pudermos pular dentro do nosso arquivo HTML e renderizar aqui o fluxo do nosso quadro apenas para testar, é por isso que o dólar do conselho. E aqui estamos usando um único canal para renderizar essas informações. Vamos verificar isso. Estou recarregando a página e obtendo objeto, objeto porque essencialmente temos adjacente e devemos passá-lo com o tubo Jason. Vamos verificar isso de novo. Estamos chegando aqui nosso conselho, e como você pode ver, esta é a nossa informação do nosso conselho que foi pré-buscada. Isto é Título, usuário, ID do usuário. Então, essencialmente, a ideia é que esse serviço tenha informações dentro dele, mas não precisamos armazenar essas informações alguma forma dentro de nosso componente de placa. Simplesmente usamos fluxos do serviço e os usamos dentro de cada componente onde precisamos, por exemplo, escreveremos exatamente o mesmo código dentro nosso componente de tarefa, se precisarmos o acesso para o nosso pássaro, por exemplo. O que é mais importante, podemos mapear dados assim, o que é muito conveniente. 28. Criar serviço de soquete: Neste vídeo, estamos iniciando uma parte interessante de nossa aplicação e configurando nossa conexão de camada de soquete. E só para lembrá-lo, nós já configuramos isso. Então, Quetta, você está no back-end. Então, aqui dentro do nosso código, podemos abrir o teste do servidor de fonte de serviço. E aqui no topo temos o novo servidor IR, e aqui temos IR na conexão. E aqui está nossa conexão de log do console, o que na verdade significa que a configuramos com sucesso. Então, entre no back-end e agora devemos implementá-lo no cliente. E para isso, usaremos exatamente a mesma biblioteca que estamos usando no back-end. Só para lembrá-lo aqui, usamos soquete. Este é o seu aqui dentro do console, eu quero pular dentro da pasta do cliente. E aqui eu quero instalar um novo pacote que é chamado socket Datta your dash client. E esse é exatamente o mesmo pacote da mesma equipe, mas é para configurar nosso cliente. E esse pacote não tem nada a ver com angular. Isso é apenas um JavaScript simples. Então, o que queremos fazer agora? Em primeiro lugar, dentro do aplicativo de origem de nossos clientes , serviços compartilhados do Insight, quero criar um novo serviço e será nosso serviço trabalhar com soquete. Este é o caminho aqui. Vamos chamar seu soquete, ponto ts do serviço DOD. E agora, por dentro, devemos criar nossa classe que é chamada de serviço de soquete. E, obviamente, não devemos esquecer injetável aqui no topo. Então, o que queremos criar aqui, queremos criar uma função que gere para nós uma nova conexão. É por isso que aqui podemos escrever a conexão do soquete SetTab. E aqui estamos recebendo nosso usuário atual. Por que usá-lo atualmente porque eles realmente querem enviar alguns dados privados por meio da conexão do soquete. Por que isso? Porque, na verdade , usaremos socket. Você está na página do fórum, que significa que nosso usuário está registrado. Mas por dentro, mergulhe nos iogues, não temos um sistema como o GET, como usamos para autenticação. Não temos cabeçalhos HTTP lá e não podemos anexar nosso token ao nosso soquete. Mas há uma maneira de passar nosso token usando socket. Essa é a maneira de tornar isso possível. Queremos configurar essa conexão para nosso usuário atual. E podemos então lançar o token do CurrentUser dentro de nossa conexão de soquete com cada solicitação. Então, como eu disse aqui, estamos recebendo como argumento o usuário atual e essa interface de usuário atual. E de volta estamos ficando vazios. Agora, aqui dentro, queremos usar nosso íon. E, na verdade, devo inserir aqui na parte superior ou no seu tambor. E aqui temos nosso cliente de E/S de soquete. Agora, aqui dentro do pronto-socorro, posso fornecer um URL onde queremos nos conectar. E, na verdade, aqui podemos apenas tentar HTTP e nossa porta do servidor. Não queremos usar isso porque para isso, temos variáveis de ambiente, o que na verdade significa que queremos entrar no ambiente de origem dos clientes, sim, e aqui, como temos nossa API Euro, queremos criar um URL de socket. É aqui que podemos criar URL de sockets, e este é o http localhost. Aqui temos 4.001 e não precisamos colocar aqui a barra oito pi porque configuramos nossa conexão de camada de soquete diretamente em nosso servidor. E você pode dizer, tudo bem, mas poderíamos reutilizar essa API como uma única propriedade para URL de API e E/S de soquete. Sim, poderíamos, mas eu recomendo que você o divida em duas propriedades diferentes. Nesse caso, é mais fácil dividi-lo posteriormente se você quiser mover sua camada de soquete para outro servidor web. Agora, dentro do nosso serviço de soquete, podemos usar nosso ambiente. É assim aqui, ponto do ambiente, temos soquetes, URL. Isso é exatamente o que devemos dar dentro para fora ou sua conexão. E excelente. Agora, além disso, quero fornecer o token do nosso usuário atual porque na verdade, configuramos conexão da camada de soquete apenas para o usuário de login, o que significa que nunca temos um caso em que não temos esse token. Aqui é o caminho, podemos escrever horas de campo e, em seguida, o lado que estamos fornecendo falando, que é o token de ponto do usuário atual. E, na verdade, aqui como segundo argumento, estamos fornecendo um objeto com nosso campo e esse campo externo dentro do soquete IO é exatamente para autenticar um usuário. E o que estamos recebendo de volta é que o resultado do nosso AR é essa conexão de soquete. É aqui que eu quero escrever esse soquete igual a IR. E aqui devemos criar essa propriedade , dentro do soquete. E como você pode ver, essas são nossas duas entradas. Isso não está correto. Queremos importar o soquete do cliente Socket Layer, ou ele está indefinido porque , por padrão, não temos um soquete. E então, em algum momento, nós o configuramos usando a conexão do soquete de configuração. Além disso, além da nossa função de configuração, quero criar a função de desconexão, o que na verdade significa que em algum momento nosso usuário será bloqueado e queremos desconectá-lo do nosso conexão de soquete. É aqui que vamos criar uma função adicional de desconexão. E isso é muito simples. O que queremos chamar aqui, queremos escrever esse soquete de ponto. E aqui temos um método que é chamado de desconexão. E como você pode ver aqui, eu não recebo um preenchimento automático porque na verdade, esse soquete pode ser indefinido. E há duas variações possíveis de como podemos corrigi-lo. Em primeiro lugar, aqui eu posso apenas colocar um ponto de interrogação e pronto. Mas eu não quero escrever o código assim. Eu realmente quero notificar um desenvolvedor que, se não tivermos soquete, teremos um problema. Na verdade, não podemos usar desconexão antes de configurar nossa conexão. Se não tivermos esse soquete de ponto, então queremos jogar e estreitar. Então, aqui será lançado um novo erro. E, por exemplo, aqui a conexão do soquete não está estabelecida. Portanto, nosso serviço básico de soquetes foi criado com sucesso. Agora, em algum momento, precisamos implementar a configuração da conexão do soquete e eles realmente querem fazer isso dentro do nosso módulo de aplicativo. Por que isso? Porque toda vez que somos autenticados e Berlim, agora que temos CurrentUser, gostaria de configurar uma conexão. É aqui que podemos entrar no componente do nosso aplicativo. E aqui temos um próximo. E só para lembrá-lo, aqui estamos recebendo o usuário atual toda vez que iniciamos nosso aplicativo. E aqui estamos definindo o usuário atual e podemos, antes disso, configurar uma conexão. É aqui que podemos escrever privado e temos um serviço de soquete, e este é o nosso serviço de soquete. Agora, aqui, antes que possamos escrever que temos aqui esses pontos, serviço de soquete, ponto, conexão de soquete de configuração. E, na verdade, aqui estamos recebendo nosso usuário atual e podemos entregá-lo por dentro. Vamos salvar isso e verificar se está funcionando, como você pode ver aqui com não tem erros e depois pular para o navegador. E aqui está vermelho, estamos recebendo um erro. Nenhum provedor de serviço de soquete encerrou isso porque criamos nosso serviço de soquete, mas não injetamos dentro de um módulo. E aqui estamos usando o serviço de soquete dentro do nosso componente de aplicativo, o que significa que faz sentido injetar esse módulo dentro de nossos provedores. É por isso que aqui podemos escrever serviço de soquete e estamos prontos para ir. Vamos verificar isso. Estou recarregando a página e estamos recebendo outro erro. Então, o que quer que estejamos recebendo, estamos fazendo esse pedido no socket a yarn. Você pode ver isso aqui, mas estamos recebendo um erro. Temos um curso, o que significa política de origem cruzada. Porque aqui com não tem controle de acesso permitir cabeçalho de origem no recurso solicitado. E isso é realmente completamente correto e devemos nos informar dentro do Serum por que isso está acontecendo, porque nosso servidor não permite conexões de outro host e com certeza usará aqui outro host, este é o host local para 1200. É por isso que devemos entrar em uma fonte de servidor. E aqui temos nossas camadas de servidor, e aqui devemos configurar nosso servidor IIS de forma um pouco diferente. Então, aqui como o segundo parâmetro, podemos fornecer algumas opções e estamos procurando a opção que é chamada de núcleos. E por dentro podemos definir a estrela de origem e realmente começar significa que estamos permitindo conexões de qualquer host. E no projeto ferroviário, você pode escrever aqui apenas um host do seu domínio. Mas, para nossos propósitos, estrela de origem é totalmente válida. Vamos verificar se está funcionando. Estou muito feliz agora com a página e não temos nenhum erro. Agora, podemos pular para dentro da rede, e aqui, como você pode ver, temos conexões WebSocket. Então, aqui estamos entrando em centenas. E se você puder ver em seu navegador algo assim, significa que sua solicitação da conexão do soquete é essa. E, na verdade, agora podemos entrar em nosso console de back-end. E aqui podemos ver conectar três vezes porque toda vez que eu recarrego a página, há uma nova conexão estabelecida, que na verdade significa que criamos com sucesso uma conexão de soquete no cliente. Agora, a única pergunta é: o que há com a desconexão? Criamos uma desconexão, mas não podemos usá-la onde quisermos. Na verdade, gostaria de usá-lo dentro do logout. É aqui que podemos entrar em nosso aplicativo, Serviços de Saúde e aqui serviço de resultados. E aqui temos nosso logout. E aqui nós primeiro removemos nossa fala, depois quando nulo e nosso usuário atual. E aqui podemos usar o soquete para desconectar nossa conexão porque sabemos que como a usamos não está mais travada. Não precisamos dessa conexão de soquete. Aqui está dentro do construtor, podemos injetar nosso novo serviço de soquete, e este é o nosso serviço de soquete. Agora, aqui na parte inferior do nosso logout, podemos escrever essa desconexão de ponto de serviço de soquete e desconectaremos nosso usuário atual e fecharemos nossa conexão de soquete. 29. Juntar-se e sair do tabuleiro: Neste vídeo, quero mostrar como podemos usar soquetes no exemplo de conexão à nossa placa e desconectá-los à placa. O que isso significa? Na verdade, insira o soquete IO. Nós temos esse thin que é chamado de salas, o que na verdade significa quando não apenas notificamos nosso back-end com alguma mensagem de soquete ou outro cliente quando eles definem todos os clientes que estão conectados a quarto. E, na verdade, quando estamos falando sobre pranchas dentro do trailer, faz muito sentido. Nós realmente queremos notificar apenas os usuários que se juntaram a esse quadro específico. O que significa, por exemplo, que temos dois usuários diferentes. Um usuário abriu o quadro, cheio. Formulário de quadro aberto do segundo usuário. Agora, o primeiro usuário criou uma tarefa e devemos notificar um segundo usuário sobre a criação dessa tarefa porque ele está conectado a esta sala ou a este quadro. É aqui que, neste vídeo, implementaremos como podemos nos juntar ao nosso conselho e deixar nosso conselho. E para isso, precisamos criar um novo método dentro do nosso serviço de soquete. É por isso que quero abrir nossos níveis de serviço de circuito aqui, criar um novo método chamado emmet. Por que precisamos desse método, na verdade, o próprio soquete de insights. Temos esses pontos, soquete, ponto e encontro, e podemos fornecer apenas uma corda como foo. Será nossa mensagem de emissão. E aqui podemos fornecer algumas informações, por exemplo, string Ambar. É assim que normalmente podemos usar soquetes dentro de nosso aplicativo, mas eu quero envolvê-lo em um método adicional por dois motivos. Em primeiro lugar, queremos isolar uma biblioteca e criar um invólucro. Nesse caso, sempre podemos jogar fora esse uso, por exemplo, socket para o seu cliente e usar alguma outra biblioteca. Em segundo lugar, aqui eu quero validar que foram conectados ao soquete de um fio. É assim, aqui está nossa imagem e estamos chegando aqui, primeiro lugar, o nome do nosso evento, é apenas uma string. E se você não conhece o IO interno do soquete, estamos sempre emitindo apenas com strings exclusivas, que estamos ouvindo em outros clientes ou dentro de nosso back-end. E a segunda aqui será uma mensagem aqui que escreverei qualquer desperdício, qualquer, porque é uma mensagem que podemos fornecer uma string e nenhum objeto ou qualquer dado que gostemos. E aqui estamos conseguindo um vazio, mas queremos fazer por dentro. Em primeiro lugar, vou copiar e colar esta linha para verificar a conexão do soquete. Porque se não tivermos uma conexão de soquete, não podemos usar carne. Depois disso. Podemos simplesmente usar esse commit de ponto de soquete e fomos fornecidos dentro da vírgula do nome do evento. E aqui está nossa mensagem. Portanto, nossa função de imagem está pronta e agora podemos usá-la. E, na verdade, eu quero usá-lo diretamente dentro de nossos componentes de placa de aplicativo, componente de placa, componentes ts. E aqui temos o método init de junho. E, na verdade, é um bom lugar para colocar apenas aqui a junção do usuário, que na verdade significa que toda vez que esse componente é carregado, significa que os usos saltaram para esse específico rota e devemos nos juntar ao usuário se ele mudou a rota e queremos sair desta sala ou desta placa. Portanto, desconecte um usuário dessa sala específica. É por isso que podemos escrever aqui. Em primeiro lugar, devemos injetar aqui nosso serviço de soquete. Este é y, aqui estará o serviço de soquete, e este é o nosso serviço de soquete. Agora, aqui podemos usar esse método e escrever esse ponto de serviço de soquete de ponto. E aqui temos nossa imagem e devemos fornecer uma visão primeiro do nome do nosso evento e, em segundo lugar, alguns dados. Então, essencialmente, o que queremos escrever aqui, algo como entrar em quadros. E aqui nossa mensagem será, por exemplo, um objeto com o ID da placa. E aqui estamos fornecendo o ID da placa desse URL específico. Este é o ID do conselho. Já temos essas informações. Por que eu empacotei essas informações dentro do objeto. Porque esvaziar, se por algum motivo quisermos colocar aqui mais informações com o objeto, podemos fazê-lo diretamente. Se tivermos aqui, uma string deve refletir todos esses lugares, da string ao objeto. E como você pode ver aqui, podemos emitir qualquer tensão. Podemos escrever aqui para. Está tudo bem, mas teremos muitos eventos de socket diferentes e queremos organizá-los de alguma forma. É por isso que aqui eu prefiro usar quadros, que é um plural de alguma entidade, como quadros ou talvez colunas ou tarefas. E aqui temos o que aconteceu? Por exemplo, nós nos juntamos, isso é apenas um começo. Mais tarde, podemos fazer algo como sucesso conjunto se estiver em um processo síncrono, o que na verdade significa que, por enquanto, os pássaros se juntam está bem. O que não está bem é que estamos escrevendo aqui uma string onde está bem no TypeScript e devemos usar inúmeras. E, na verdade, inúmeras são apenas algumas constantes dentro de uma única propriedade. É por isso que aqui à direita, quero abrir nossa pasta compartilhada, e aqui temos tipos. Aqui. Quero criar eventos de soquete ponto em m ponto ts. Aqui. Agora podemos exportar nosso enum, que é o ENM da ONU de soquete, e este é apenas um objeto aqui, podemos escrever placas de campo juntando iguais, e aqui estamos escrevendo placas de junção. Então, primeiro de tudo, aqui temos um estilo de código. Segundo Luba não desenhado aqui, uma corda. Bem aqui, eventos de soquete na cadeia de m dot boards, neste caso, em todos os lugares onde usando a mesma string, mas nunca vamos escrevê-lo incorretamente porque estamos usando aqui Justin unum, que é uma variável e não uma string simples. Então, o que essa linha faz, ela emite para o nosso back-end em uma nova mensagem de E/S de soquete. Aqui foram fornecidas algumas strings e alguns dados. Por que estamos fornecendo exatamente esses dados, porque queremos que o back-end se junte ao nosso usuário atual. Portanto, nossa conexão de soquete atual com a placa específica. E isso é suficiente para que nosso back-end reaja por isso. Agora, é hora de implementá-lo no back-end, é aqui que devemos abrir a fonte de nossos servidores. E aqui temos nosso teste de servidor. E aqui na parte inferior temos nossa própria conexão. Isso é totalmente bom. Agora, lá dentro, podemos remover esse log do console e queremos reagir com nosso ponto de soquete ligado, em alguns eventos e realmente ouvir o que estamos esperando. Estamos esperando o Boards juntos. Mas aqui temos exatamente o mesmo problema dentro do back-end e não queremos escrever apenas strings simples. Queremos também organizá-los no enum. E, na verdade, vamos duplicar exatamente todo o arquivo de nossos eventos de soquete no cliente e na calda. E você pode dizer, ok, isso é inútil. Podemos criar apenas um único arquivo. Você poderia, mas potencialmente você pode dividir seu cliente e servidor em diferentes repositórios e seguida, você pode compartilhar qualquer coisa entre eles. É por isso que eu realmente quero isolar nosso cliente e nosso back-end. Então, o que queremos fazer aqui dentro de nossos tipos, podemos criar exatamente o mesmo. Será que nossos eventos de soquete não enumeram pontos ts. E agora dentro eles poderão ser colocados exatamente o mesmo código que temos no cliente. O que eu quero fazer agora aqui, em vez de pássaros se juntarem, eu posso escrever eventos de soquete em m dot boards churn. E como você pode ver que essa entrada é de tipos de eventos de soquete. Então é assim que assinamos nosso evento do cliente com socket, a língua, mas de onde estamos obtendo nosso socket, este é o nosso primeiro parâmetro aqui. Como você pode ver, isso é socket e aqui temos socket dot on, mas aqui devemos fornecer dois argumentos. Em primeiro lugar, é o nosso evento e, em segundo lugar, é o nosso Kohlberg. Então, o que estamos obtendo aqui normalmente obtemos alguns dados, é que normalmente obtemos alguns dados, e esses são exatamente os dados que fornecemos do cliente. Poderíamos escrever aqui alguma lógica, mas não queremos, porque na verdade escrevemos tudo o que está relacionado às nossas placas dentro do controle. E faz muito sentido escrever todo o nosso código de E/S de soquete também dentro do controlador. Nós realmente não nos importamos se é Socket Layer ou Justice GTP. Podemos isolar todo esse código dentro de nossos controladores. É aqui que podemos usar o ponto controlador de nossa placa, por exemplo, entrar no quadro. Isso é o que queremos implementar. E agora, em primeiro lugar, quero dar mais do que o soquete e depois os dados. E nós iremos em todos os casos quando estivermos trabalhando com o Socket Layer e forneceremos essas informações. Isso é muito parecido com o que estamos fazendo com nosso Express. Aqui. Estamos usando controle de natalidade ou criando quadro. E, na verdade, é assim que damos diretamente uma resposta interna à solicitação. E a seguir, por que estamos fazendo isso. Na verdade, quando estamos fornecendo tudo dentro, podemos usar o que quisermos. Se precisarmos de um “vocês”, podemos usar um fio quando for andar de bicicleta. Podemos usar essas informações se precisarmos de alguns dados do evento, também podemos usá-los. E agora só precisamos implementar nossa junta. É por isso que eu quero entrar em nossos esportes de controle. E aqui na parte inferior, devemos criar uma nova função. Aqui temos cones especializados, Joan Board, e estamos chegando aqui, em primeiro lugar, Iowa, que é um servidor. Na verdade, temos aqui muito inverso. É por isso que você precisa ser cauteloso, mas precisamos aqui inserir nosso servidor a partir do soquete IO. Isso é importante. É aqui que estamos recebendo um fio e é nosso servidor como um tipo. Depois disso, temos nosso soquete. E o soquete também vem do soquete IO. E por último, mas não menos importante, aqui estão nossos dados. E, na verdade, sabemos que por dentro, estamos fornecendo o ID da placa, que é uma string, e isso é informação suficiente para nós. Então é assim que uma função típica dentro do controlador se parecerá quando estivermos trabalhando com Socket Layer. E agora o que queremos fazer lá dentro, queremos apenas escrever socket dot join. Aqui, estamos fornecendo o ID do quadro de pontos de dados. E é isso, é apenas uma única linha. Então, o que esse código faz, então Wed mostrado nesta conexão de soquete atual. Então, nosso usuário atual para este ID de placa, e isso é apenas uma string, nada mais. Mas, na verdade, quando estamos escrevendo join e alguns foo, simplesmente dizemos ao socket para juntar o socket atual a esta sala com este nome, mas não temos salas em nosso aplicativo, temos placas, mas a ideia é exatamente o mesmo, onde juntar nossos usuários ao quadro e, em seguida, eles receberão nossas mensagens para esse quadro específico. Agora há quem queira testar se nosso código está funcionando. É por isso que aqui eu só quero escrever servidor de log do console, junção de soquete. E aqui vou escrever o AD do quadro de pontos de dados de vírgula neste caso. Mas agora, quando vemos esse log do console, isso significa que o emitiu com sucesso nossa mensagem do cliente ou do back-end. E nosso back-end reagiu à mensagem e juntou nosso usuário a esta sala. Aqui é você, vamos pular dentro nosso back-end e recarregar a página. E como você pode ver, não temos nenhum erro. E, na verdade, nosso código com esse componente de placa e essa imagem será acionado porque nosso componente foi renderizado. E agora podemos entrar no console e você pode ver o circuito de serviço ou sua entrada. E aqui está o d do nosso conselho. É aqui que estamos unindo nosso soquete atual. E como você pode ver dentro do navegador, esse é exatamente o d do nosso quadro. E agora queremos fazer exatamente a mesma coisa com a vida e a alimentação. E na verdade o que eles queriam fazer, eu quero criar aqui um método adicional, isso inicializar ouvintes e na verdade, todos os meus ouvintes gostam de assinaturas, por exemplo, eu sempre empacoto isso método adicional. Esse é o mesmo nome em como, por exemplo, buscar dados. Nesse caso, eles não contêm muitas informações em junho. É aqui que eu quero escrever, inicializar ouvintes e me inscrever aqui ao vivo em uma página. E, na verdade, podemos fazer isso se estivermos usando um aplicativo de seca e tivermos aqui uma seca, mas não um roteador. É por aqui que devemos usar o roteador e esse é o nosso trabalho. E agora aqui podemos escrever uma assinatura para viver em uma página. E aqui podemos escrever esses eventos pontuais do roteador de pontos. E aqui nós nos inscrevemos. E, na verdade, assinamos, teremos aqui acesso a cada evento que é acionado por um roteador. E o que queremos escrever aqui, se evento, instância daqui temos início de navegação. E o início da navegação é o começo da mudança em nossa rota. E, na verdade, se isso estiver acontecendo, então aqui eu quero console log deixando uma página. Então, mais uma vez, aqui estamos usando eventos de seca para assinar todos os eventos de seca. E estamos obtendo acesso ao Subscribe a todos os eventos agora aqui para verificar o evento específico em que estamos usando a instância de e estamos fornecendo aqui a pilha de navegação. E aqui está o nosso log do console, onde realmente queremos emitir uma mensagem de soquete e essa mensagem estará ao vivo em uma placa. Em seguida, precisamos desconectar um usuário dessa placa específica. Vamos verificar isso. Estou recarregando a página e temos um limite que esqueci de colocar uma vírgula aqui no topo. Então, vamos colocá-lo agora e recarregar a página. E como você pode ver, não temos nenhum erro, mas não podemos pular para outra página onde eles possam tentar fazer aqui. Eu posso simplesmente voltar atrás e estamos saindo da página porque aqui estamos agora na página de quadros de barra. E aqui está este log do console, que na verdade significa que esse log do console será acionado toda vez que estivermos vivendo uma página. Mas, na verdade, aqui eu não quero usar sockets service summit. Em vez disso, quero escrever aqui este quadro de folhas de pontos de serviço de conselho. E, na verdade, você pode perguntar, mas por que, por que não escrever aqui em meio à resposta aqui, não é no LinkedIn que queremos fazer dentro de um serviço de conselho quando estamos saindo da página. E, na verdade, aqui dentro do serviço ao mar, temos o fluxo do tabuleiro e também devemos configurá-lo para agora, quando deixamos o tabuleiro, este é o caminho aqui. Vamos criar nosso método de placa de folhas e só temos aqui um vazio agora dentro. Primeiro de tudo, whoop, quero definir este quadro ao lado de agora, o que na verdade significa que não temos mais um quadro. E depois disso, queremos conhecer essa mensagem que sairá do quadro. É por isso que devemos abrir nossos tipos compartilhados. E aqui estão os eventos de soquete. Aqui temos a rotatividade de placas. Agora podemos copiar e colar esta mensagem e nomeá-la como placas ao vivo. E isso está entediado. Sair. Agora vou copiar e colar esta linha. E agora aqui podemos usar nosso serviço de soquete. Mas para isso VM deve injetá-lo aqui dentro do construtor. Então, aqui temos nosso serviço de soquete, e este é um serviço de soquete e estamos usando exatamente como fizemos anteriormente. O que eu quero escrever aqui é este serviço de soquete de pontos ponto m it e foram fornecidos dentro do nome do nosso evento. E, neste caso, serão nossos eventos de soquete E e M dot boards ao vivo. E, na verdade, aqui devemos fornecer o que o conselho devemos viver. Aqui está faltando um ID de placa, que deve ser uma string, e devemos fornecer a partir do nosso componente. Aqui eu quero colocar o ID do conselho. Agora precisamos atualizar nosso componente. Então, aqui temos nosso componente de placa, e aqui dentro do live board, vou escrever esse ID de porta de ponto. Então, agora só precisamos implementar exatamente o mesmo no servidor que fizemos com a união, mas precisamos usar ao vivo. É aqui que vamos pular de volta em silos, servidores, fonte, servidor, sim. E aqui temos nossa conexão e o gigante dos portos. O que eu preciso fazer agora, eu quero atualizar os eventos de soquete neles no back-end, e também serão portas de saída. E aqui estou eu pranchas ao vivo. Agora, aqui podemos copiar e colar essas linhas completamente e registrar mais um soquete, não para placas agitadas, Mas para placas de pontos ao vivo adivinhando que ele tem alguns dados. E aqui queremos usar o controlador de portas, não entrar na placa, mas sair da placa. E devemos criar agora esse pod ao vivo dentro do nosso controlador. E, na verdade, aqui será exatamente o mesmo. É por isso que vou copiar e colar esse método completamente e apenas nomeá-lo nascido ao vivo aqui, estamos obtendo nosso IR como soquete anterior aos dados internos anteriores, temos nosso ID de placa. Agora, aqui dentro do registro do console, podemos escrever nosso quintal para sair. E aqui está a placa de dados AD e em vez de junta de soquete, onde bem aqui, soquete folha escura, e com esta única linha para onde estamos movendo nosso soquete atual desta sala específica, o que significa que não receberei nenhum evento deste quadro. Vamos verificar se está funcionando. Estou recarregando a página e estamos lá dentro. Agora aqui estou eu, saco escondido e devemos despachar a seção para o nosso back-end. Vamos verificar isso como você pode ver aqui. Em primeiro lugar, tínhamos aqui o soquete ao lado e com entrar nesta sala específica. E então, quando eu revidar, temos uma folha desta sala. E é exatamente assim que um cliente e implorando estão trabalhando juntos quando estamos usando E/S de soquete. 30. Autenticação no socket.io: Neste vídeo, precisamos terminar de trabalhar na autenticação agora um soquete de insights do usuário. Mas antes de tudo, queremos resolver um grande problema. Como você pode ver aqui, estou logado e estou na página do quadro. Mas o que acontecerá se eu fizer logout? Então, eu simplesmente quero entrar no aplicativo, remover nosso token e recarregar a página. Agora estou diretamente na página inicial. Isso é totalmente válido. Mas então, em algum momento, eu quero me autenticar novamente. Estou acessando aqui login e depois cole aqui f2 em gmail.com. E nossa senha, estou acertando aqui a mesma média. E como você pode ver, não temos nenhum erro, mas depois do mesmo salto para o primogênito e estamos recebendo um erro, conexão do soquete não é estabelecida por que isso está acontecendo. Na verdade, temos nossa conexão de soquete de inicialização dentro de nosso aplicativo de origem, componente de aplicativo ts, esse código. Então, após a página Lord, estamos buscando o usuário atual e aqui estamos configurando a conexão do soquete, mas não estamos bloqueados no início. É por isso que viemos aqui e definimos nosso usuário atual agora, então travamos com sucesso. E só para lembrá-lo, é isso que está acontecendo, onde dentro de nossos componentes fazem login. Aqui está o nosso onsubmit aqui, onde assinar o login e estamos sentados aqui conversando e usuário atual, isso é totalmente bom, mas não atualizamos nosso soquete. Portanto, nossa conexão de camada de soquete não existe após o registro ou após o login e não vive quando recarregaremos a página, essa conexão de soquete será estabelecida. Novamente, isso obviamente não está correto e devemos estabelecer essa conexão após o login ou após o registro. E isso é extremamente fácil de fazer. O que devemos fazer aqui, podemos simplesmente injetar dentro de nossa nova propriedade de construtor, e será nosso serviço de soquete, que é nosso serviço de soquete. Agora, aqui podemos usar esse método. Então, por exemplo, depois de um determinado token, podemos escrever esses pontos de serviço de soquete ponto. E aqui temos a conexão do soquete SetTab aqui, pois eles têm acesso a um usuário atual e simplesmente o jogamos dentro de nossa conexão de soquete de configuração. E devemos fazer exatamente o mesmo dentro do nosso registro. Então, primeiro de tudo, estamos injetando nosso serviço de soquete. Portanto, o serviço de soquete privado é o serviço de soquete. E agora, depois disso, podemos usar esse método dentro do nosso sucesso. Então, depois de definir o token, é esse serviço de soquete de pontos, conexão de soquete de configuração de pontos com o usuário atual. Nesse caso, ele funcionará corretamente. Eu quero remover estão falando mais uma vez, pulei ou página de login e agora tente fazer o login. Então, aqui está completo em gmail.com e nossa senha, eu estou clicando em dizer maldade, e depois pular para a primeira parte. E não temos nenhum erro no momento porque configuramos com sucesso nossa conexão de soquete logo após travarmos. Mas não fazemos nada com nossa autenticação dentro do soquete IO, e é exatamente isso que queremos fazer. Então, o que está acontecendo dentro da nossa conexão de soquete de configuração? Aqui somos jogados dentro do nosso token de usuário atual. Isso é totalmente bom. De frente e de lado, fizemos tudo o que precisávamos. Mas agora devemos pular dentro de um servidor e analisá-lo de acordo. Para isso, o boom deve pular dentro de nossos níveis de servidor. E aqui está sua própria conexão. E, na verdade, antes de nossa própria conexão, passe a escrever aqui, ponto use. Aqui teremos nossa função e será nosso middleware. E depois disso, temos nossa própria conexão, o que na verdade significa que é exatamente a mesma coisa, como nosso middleware aqui segue em frente para autenticar nossa solicitação e saber que estamos presos porque nossa conexão de soquete só está disponível para usuários logados. É aqui que estamos escrevendo IOUs e por dentro devemos fornecer a função. E aqui será uma função assíncrona só porque queremos buscar nosso CurrentUser do banco de dados. E aqui estamos, em primeiro lugar, obtendo nosso socket, que é socket, e estamos obtendo, e a próxima função, porque é uma função síncrona que queremos escrever aqui, try and catch. Então, primeiro de tudo, devemos tentar diretamente e onde, cozinha e erro e o que vamos acontecer dentro da captura. Queremos simplesmente escrever aqui seguir e lançar uma nova era com, por exemplo, nosso erro de autenticação. E aqui está uma coisa super importante que você deve se lembrar. Não temos nenhum erro dentro do soquete. Eles não estão lá. Não propagamos nenhum erro de volta para o cliente, que na verdade significa que, se estamos recebendo algum erro, por exemplo no back-end, simplesmente queremos enviar uma mensagem para o cliente específico. Podemos enviar um estreito que acabamos de lançar dentro de um objeto pode ser uma mensagem de erro com algum código de erro ou o que você preferir. E é importante lembrar. Portanto, o Socket Layer não está funcionando exatamente da mesma maneira, como deveriam ser erros? E agora, a primeira coisa que queremos fazer em nossa tentativa é começar a falar a partir do pedido. E aqui podemos escrever socket dot, handshake, dot, house, dot token. E será exatamente o que passamos. E, na verdade, aqui estamos recebendo o token é qualquer, e eles não querem isso, porque na verdade aqui eu quero obter uma string. É por isso que aqui eu posso escrever colchetes redondos e apenas escrever a tensão S. E se não obtivermos esse token, então eu quero usar aqui uma string vazia. Por que estou fazendo isso? Porque aqui queremos usar Jason verify, para verificar nosso token. E, nesse caso, não queremos que seja indefinido. É. Podemos verificar isso quando for uma string. Este é o caminho aqui. Agora podemos tentar analisar o que estamos falando usando o token da web JSON. Então, aqui no topo, podemos importar GPS do nosso pacote JSON Web Token. Agora podemos voltar ao nosso código aqui, usá-lo. Então, aqui teremos o ponto JWT e aqui verificamos. E agora, por dentro, devemos passar antes de tudo, nosso alvo. Mas só para lembrá-lo, dentro de um token, temos o espaço do portador e, em seguida, nosso token, é aqui que eu quero dividi-lo por espaço e pegar o segundo argumento. E depois disso, devemos fornecer aqui um segredo. E só para lembrá-lo de qual é o segredo que vem da nossa configuração. E isso é o que estamos usando para analisar nosso token JSON. E é isso que estamos recebendo de volta. Estamos conseguindo aqui um lote de cordas ou DVT PE. Mas aqui nós realmente queremos contar o que estamos recebendo de volta. Aqui. Estamos recebendo, como sempre, nosso objeto, dizemos D, que é string. E em segundo lugar, estamos recebendo um e-mail que também é uma string. Nesse caso, estamos obtendo os dados corretos aqui e agora podemos obter um usuário exatamente como fizemos dentro do nosso middleware Auth. E para isso, devemos inserir um usuário aqui no topo. Então, estamos usando agora um modelo de usuário exatamente como fizemos anteriormente. Então, usamos apenas modelos de barra slash user. E agora aqui podemos fazer um pedido. Então, aqui queremos recuperar nosso usuário, e aqui queremos fazer uma solicitação ao banco de dados com o usuário ponto. E aqui está o nosso bom Tchau. Aqui podemos fazer find by ID porque temos ID de ponto de dados de insight NAD. E se não tivermos nosso utilizável, queremos lançar um erro. Então, aqui, se não encontramos um usuário, significa que não estamos trancados aqui. Simplesmente executamos return next e somos jogados dentro do erro de autenticação da nova era, assim como fizemos dentro de nossa captura. E depois disso, queremos anotar esse usuário dentro do nosso soquete. Na verdade, socket é a nossa instância, e podemos escrever dentro das informações adicionais, assim como fizemos anteriormente com a solicitação. Nesse caso, mais tarde, em cada controlador, podemos acessar esse usuário atual. Este é o caminho aqui, socket dot user é igual a usuário que encontramos. E como você pode ver aqui, obtemos diretamente uma propriedade de erro que o usuário não existe no tipo socket e devemos fazer exatamente o mesmo que fizemos com a solicitação SAML. Só para lembrá-lo, criamos uma solicitação expressa, na qual estendemos nossa solicitação para colocar o usuário dentro. E agora queremos fazer exatamente o mesmo, mas com nosso soquete. Este é o caminho aqui. Vamos criar socket dot interface dot ds. E aqui dentro queremos criar uma nova interface, e ela é chamada de socket. E aqui queremos usar estende de soquete, soquete. Na verdade, aqui eu tenho um nome bastante estranho porque essa não é uma entrada válida do soquete. Este é o caminho aqui. Eu quero importar o soquete como soquete ou o seu soquete. E estou fazendo isso do socket ou só porque não podemos ter exatamente o mesmo nome. Então aqui Gabão para exportar nosso soquete e aqui estavam soquete importante, isso é inválido. É aqui que queremos renomear nossa entrada do soquete IO e, depois disso estendido de nosso soquete, soquete. E queremos adicionar aqui nosso usuário. E nem sempre é feito dessa maneira aqui há um ponto de interrogação, e este é um documento de usuário que também devemos importar aqui na parte superior de nossa interface de usuário, Nossas interfaces de soquete lá. Agora podemos voltar para dentro do nosso servidor e usá-lo em vez do simples. Então, só para lembrá-lo, aqui temos um soquete de entrada do soquete IO. Isso não é mais válido. Aqui Woburn para inverter nosso soquete, e aqui está o nosso tipo slash socket. Vamos verificar se está funcionando. Estou rolando aqui até o final, e não temos mais nenhum erro aqui. O usuário do soquete é totalmente válido e é um documento do usuário ou indefinido. Agora vamos verificar se nosso código está funcionando. Então, eu estou pulando aqui dentro do console e não temos nenhum erro, então está funcionando. Agora, o que eu quero fazer, eu quero pular dentro de nossas placas controladoras. Aqui estamos fazendo parte do conselho. Então, aqui, em vez de placa de dados AT, eu posso console log aqui um usuário da mãe, um soquete. E, na verdade, aqui o usuário do ponto do soquete é obviamente inválido porque aqui não usamos a interface correta. Este é o y aqui no topo. Não precisamos usar o soquete do soquete IO, mas devemos importar nossa interface de soquete que acabamos criar a partir de nossa interface de soquete de barra de tipos. Aqui não temos um erro. Vamos entrar no console e verificar se está funcionando. E para isso, basta recarregar esta página e não temos nenhum erro. Agora vamos dar uma olhada dentro do console. Isso você pode ver que não há nenhuma mensagem aqui, o que significa que esquecemos algo. E o que esquecemos está dentro do sayo use para escrever a seguir, que na verdade significa que depois dessa linha, nosso código não está chegando a lugar nenhum. Este é y aqui, mas devo escrever a seguir e, nesse caso, deve funcionar. Vamos verificar novamente. Aqui estou recarregando a página. Entraremos em nosso back-end e, como você pode ver, aqui estão nossas informações. Então Socket Layer para se juntar e estamos chegando aqui nosso usuário, e aqui estamos obtendo dois logs de console porque toda vez que você atualiza a página, estamos recebendo esse soquete IO para se juntar porque isso abusos acontecendo. Estamos verificando nosso usuário, estamos obtendo isso do banco de dados. Agora, ele está disponível para nós dentro do nosso controlador. Então, com esse código, obtivemos com sucesso nosso usuário da solicitação. E agora, em cada ação dentro do controlador através de um circuito, um fio, temos esse usuário disponível rapidamente. 31. Conseguir colunas: Neste vídeo, começamos com a implementação de nossas colunas. E eu acho que é uma boa tarefa que você tente implementá-la sozinho. Então, o que queremos implementar? Um top? Temos nosso conselho e já estamos cotados em nosso cliente e o implementamos no back-end e no cliente. Agora devemos implementar colunas. Por que precisamos de colunas? Isso realmente coloca dentro de um quadro onde armazenaremos tarefas e nossos usuários podem criar colunas dentro do quadro, o que na verdade significa que a coluna deve pertencer aos usuários. Portanto, devemos ter o uso interno 3D, mas também o quadro AT, porque nossa coluna não pode existir sem uma placa e este é y. Aqui estão três níveis de dificuldades para você. Em primeiro lugar, se você quiser o nível mais difícil, basta pausar o vídeo agora e implementar no festival de back-end um modelo para a coluna, depois digitar para a coluna e, em seguida, um método get para obter uma lista de as colunas dentro do nosso quadro se você quiser experimentá-lo no segundo nível. Com minha orientação, aqui estão algumas dicas, pois o conjunto dentro nossos tipos de serviços deve ser criado exatamente como fizemos com a placa. Devemos criar aqui coluna e precisamos aqui de uma interface para a coluna e também de uma interface para o documento da coluna. Portanto, será muito parecido com o nosso conselho. Depois disso, dentro do nosso servidor, queremos criar uma nova rota. E aqui teremos placas de API apt-get, placa AT assim como aqui, colunas de barra. E será uma solicitação GET para obter todas as colunas dessa porta específica. E nós realmente precisamos dessa quantidade dentro da nossa rota. Em outro caso, não sabemos para qual quadro devemos obter nossas colunas. Para isso, devemos implementar em seu controlador, que é o controlador de colunas, e devemos implementar dentro do método, obter colunas, assim como temos aqui dentro. Fique entediado. E eles fizeram, é que queremos obter todas as nossas colunas até este ponto AD do banco de dados. Então, se você quiser experimentar você mesmo, basta pausar o vídeo agora. E agora a variante mais fácil, vamos implementá-la juntos. E estamos começando aqui. Em primeiro lugar, dos nossos tipos. Aqui queremos criar um novo tipo, que será a coluna dot interface ab.js. E, na verdade, eu quero copiar e colar completamente nosso quadro porque será super parecido. Então, aqui temos nossa interface e coluna de dados. E o que precisamos dentro da nossa coluna? Em primeiro lugar, precisamos de algum nome, o que significa que o título é totalmente válido, também terá aqui criado em e atualizado em. E temos aqui UserID porque é o conjunto. Talvez precisemos de informações sobre quem criou essa coluna específica. E depois disso, queremos ter uma referência ao nosso conselho. É aqui que temos um quadro AT. E é o mesmo ID de objeto de tipos de esquema, assim como temos aqui no topo para nosso usuário. E agora aqui, em vez de nosso documento do quadro, queremos criar nosso documento de coluna e estamos estendidos aqui documento e nossa interface de coluna que acabamos de criar. E agora é hora de criar nosso modelo. Então aqui temos o modelo Bohr, agora precisamos de um modelo de coluna. Então, aqui temos uma placa de lágrimas. Agora precisamos criar aqui a coluna Ts. E, na verdade, vou copiar e colar tudo do nosso quadro porque é super parecido. Então, o que temos aqui, estamos construindo aqui um esquema de coluna, e aqui estamos usando o documento do quadro NADH, mas em vez disso o documento de coluna que acabamos de criar aqui, o documento do quadro na parte superior podemos remover. Aqui, sabemos que temos nosso título, temos nosso uso 3D, é obrigatório. E o último aqui será o ID do nosso quadro, que é um ID de objeto de tipo, e também é obrigatório, e é nosso modelo de documento de coluna de tipo e o nome é coluna. E aqui temos nosso esquema de colunas. Então, como você pode ver, é muito parecido com o nosso quadro. E, na verdade, muitos modelos que você criará em seus aplicativos futuros serão realmente parecidos com isso. Então, criamos com sucesso nosso tipo e nosso modelo. Agora, precisamos gerar e usar dentro de nossos níveis de serviço. E aqui eu quero copiar e colar esta linha com um Id de placa de placas Pi. E aqui temos um get exatamente nesta rota colunas de barra porque, como eu disse, queremos obter nossas colunas para este ponto específico. E aqui devemos usar nosso middleware porque essa solicitação é apenas para usuários conectados. E aqui não precisamos usar o controlador da nossa placa, queremos um novo controlador aqui, controlador de colunas, e aqui podemos nomeá-lo, por exemplo, obter colunas, mas não temos controlador de colunas alto. Então aqui eu quero copiar o controlador da placa de colagem aqui na parte superior e apenas nomeá-lo controlador de duas colunas De controladores de barra colunas de barra. E nosso último passo aqui será criar um novo controlador, que é chamado de colunas. E isso é controlador para gerenciar todas as nossas ações para as colunas. Então, aqui estamos criando nossas colunas pontos ts. E aqui eu quero apenas copiar e colar um método de nossas placas porque é super semelhante e são boas placas. Então, vamos pular de volta para dentro das escadas de nossas colunas e colar esse método aqui. Primeiro de tudo, não é ficar entediado, mas obter colunas. E precisamos aqui são expressas interface de solicitação porque queremos verificar o usuário atual. E aqui precisamos da nossa próxima função. E também devemos contribuir aqui sobre a resposta do expresso. E aqui, como sempre, estamos verificando o CurrentUser. Estamos jogando por 01 se não estiver lá. Mas agora aqui devemos usar modelo não entediado, mas em vez disso coluna o modelo. Então, vamos inserir aqui o modelo de coluna superior a partir do qual acabamos de criar. E aqui estamos escrevendo modelos de barra coluna de barra. E agora estamos esperando para fazer uma solicitação para encontrar o modelo de coluna. Mas em vez de encontrar nossas colunas, aqui obteremos uma matriz por ID de usuário. Queremos encontrá-los pelo nosso conselho AD. Nesse caso, obteremos colunas de azar para esse quadro específico. E obtemos essas informações do ponto de solicitação, ponto de parâmetros, e aqui temos o ID da placa. Então, de volta aqui, estamos obtendo uma matriz de nossas colunas e simplesmente queremos responder ao cliente com essa matriz. E, na verdade, terminamos. Vamos verificar se está funcionando. Estou pulando para o back-end. Não há erros. Então agora eu quero fazer uma solicitação get, e aqui eu tenho nossa API, mas em vez de slash api slash boards, eu quero ter aqui slash e depois NAD. É por isso que do nosso aplicativo, eu quero copiar o d do nosso quadro para colar aqui dentro do carteiro. Estamos fazendo uma solicitação GET e vamos clicar em Enviar. Como você pode ver, onde eu recebo uma mensagem onde não autorizado, o que significa antes de tudo, eu devo fazer o login. Este é meu usuário, estou logado e aqui estou recebendo um token. Vamos copiar e colar essa perseguição e tentar mais uma vez. Aqui está uma solicitação GET para um ponto sem base. Aqui está o AD e eles perderam aqui as colunas de barra. Esta é uma solicitação get, e aqui está nosso cabeçalho. Isso é cerveja. E então vou colocar meu token que estou pressionando agora enviar e estamos recebendo nossa resposta, que é uma matriz vazia. E, na verdade, está completamente correto porque não criamos nenhuma coluna dentro do nosso banco de dados. Mas para torná-lo seguro e limpo, vamos criá-los a partir do console para que possamos verificar se está realmente funcionando para deficientes, pule dentro do console e tente docker exec menos 18 MongoDB, Mongo , assim como fizemos anteriormente para o nosso conselho. Agora, aqui devemos usar nosso banco de dados L Trello. Trailer tão útil e agora quero inserir um registro dentro de nossa coleção de colunas. É por isso que aqui podemos escrever colunas de pontos db, inserir pontos, e aqui dentro queremos lançar primeiro no título, por exemplo, primeira coluna. Portanto, aqui devemos fornecer um ID de usuário, e aqui devemos escrever a data é um objeto com alguma string dentro que devemos retirar da solicitação. E por último aqui estará nosso quadro AT, e também é um ID de objeto e dentro da string. Então aborreça o D. Nós já sabemos, podemos apenas pegá-lo aqui do carteiro e eles vão colocá-lo aqui. Mas nosso usuário AT, podemos verificar dentro do nosso back-end. Como você pode ver aqui, ainda tenho esse log do console com nosso usuário. E aqui está o D do meu usuário com o qual estou preso. Aqui dentro do nosso ID de usuário, vou colar o hash do meu usuário. Vamos apertar Enter. E como você pode ver onde inserir um. Agora podemos verificar se está correto. Então db dot columns, dot find e apenas colchetes redondos. E como você pode ver, aqui está nossa resposta. Então, vamos verificar agora no Postman, se estiver funcionando, estou clicando aqui enviar novamente, e estamos entrando na matriz, um único objeto. Aqui está nosso ID de usuário e título do AD Boyd AD, o que na verdade significa que criamos com sucesso nosso modelo de coluna e a primeira solicitação para obter todas as colunas para esse vínculo específico. 32. Crie coluna com websockets: No vídeo anterior, criamos com sucesso um método para obter uma lista de nossas colunas para o quadro. Neste vídeo, vamos nos concentrar na parte de back-end da criação de nossa coluna. E não faremos isso da maneira típica, porque não usaremos aqui o HTTP. Vamos criá-lo com socket por precisamos criar colunas com socket? Porque, na verdade, esse é o caso em que Woburn notifica todas as outras pessoas que estão olhando em nosso quadro atual sobre a criação da nova coluna. Nesse caso, todos os usuários com essa única placa aberta verão diretamente nossa parte nucleada. Então, como devemos fazer isso? E estamos começando aqui dentro de um servidor de origem. Na verdade, eles já sabiam como estamos fazendo as coisas. Temos aqui sua própria conexão e aqui está nossa tomada. Aqui devemos refletir em sua tomada. Por que isso? Porque, na verdade, vamos acionar, criar uma coluna suficiente em um dos clientes, que na verdade significa aplicativo interno ou angular. No próximo vídeo, criaremos um pod de frontend com o formulário para criar uma coluna. E então emitiremos um evento para nosso soquete IO. É por isso que aqui devemos assinar isso em meio a. Nosso primeiro passo será criar aqui um novo evento. E, na verdade, aqui eu quero criar três eventos enquanto isso, porque temos uma operação assíncrona, começamos a criar uma coluna, então temos sucesso e fracasso. E eles disseram que não podemos realmente obter erros do soquete IO. É por isso que faz muito sentido organizar todos os nossos eventos como sucesso e fracasso do Start. E no caso de entrar no conselho, não precisamos disso. Só precisamos de um único evento porque, essencialmente, isso não está em uma operação síncrona com não temos sucesso aqui, mas temos isso com criar outra coluna. Este é o caminho aqui, Vamos chamá-lo de grau de colunas. E isso é uma string, e podemos chamá-la de colunas dois pontos, e então criar isso. Você pode ver que estou usando a mesma notação como aqui no topo, temos uma entidade e é plural, e então nosso verbo, o que estamos fazendo agora aqui podemos copiar e colar esta linha duas vezes porque devemos criar aqui, colunas criam sucesso e colunas criam falha. Aqui à direita, teremos colunas que criem sucesso com o CamelCase e aqui a coluna crie falha. Portanto, nossos eventos estão prontos e agora podemos abrir nossos níveis de servidor. E aqui queremos escrever mais um soquete. Então, aqui nós queremos reagir agora que os eventos de soquete neles não. E aqui temos a nota das colunas, e há um segundo parâmetro com o qual estamos obtendo alguns dados, nem me importo com os dados. Agora, aqui dentro, queremos usar nosso controle de colunas e também somos os criados, mas não tínhamos nenhuma informação de soquete dentro. É aqui que queremos criar um novo método chamado Create column. E estamos passando por dentro exatamente o mesmo que fizemos aqui dentro do live board, por exemplo, é um seu soquete coma dados comuns, neste caso, em todos os lugares onde escrever o código e todos os parâmetros em da mesma forma. É por isso que é mais fácil entender nossa aplicação. Agora, é hora de criar essa seção dentro do controlador. É aqui que vamos voltar para dentro das colunas dos nossos controladores. Aqui temos colunas. E, na verdade, vamos escrever aqui do zero nosso novo método. Então aqui temos nossa constante e é criar coluna. E esta é uma função assíncrona e dentro de onde obter exatamente todas as coisas como obtivemos anteriormente. Então, antes de tudo, é um fio e é soro. Em segundo lugar, temos aqui nosso soquete, o soquete e o último são os dados. Então, a questão é quais dados obteremos para criar uma coluna? E precisamos de duas coisas. Primeiro de tudo e nome da coluna. E em segundo lugar, nosso ID do conselho. Essa é a informação que já escrevemos dentro do nosso modelo. É por isso que aqui temos o corpo D e é uma corda. E em segundo lugar, temos aqui o título. Também é uma corda. E só para lembrá-lo no momento em que vocês são nossas duas entradas aqui, soquete, você deve saber como inseri-lo a partir de tipos interface de soquete, não do soquete IO, porque devemos use uma propriedade de usuário dentro dessa interface. E agora dentro temos try-catch, como sempre, porque estamos fazendo aqui uma operação assíncrona e dentro da gaiola, o que queremos fazer com não temos acesso ao próximo, mas podemos emitir ouvir algo que você, por exemplo, aqui eu quero escrever socket Datta meet e nós somos jogados dentro de nossos eventos de soquete E e M ponto, e aqui está a falha, então as colunas criam falha. E em segundo lugar, aqui eu quero dar uma mensagem de volta. Mas o principal problema é que essa Sarah é desconhecida e isso é completamente normal porque estamos presos, não podemos saber o que é Sarah. É por isso que, se precisarmos ler uma mensagem do erro, devemos tentar algo assim. Então, aqui queremos ler nossa mensagem de erro e podemos verificar se nossa flecha deve ser um exemplo de uma época. Nesse caso, podemos ler aqui a mensagem de erro. E outro caso em que simplesmente queremos stringificar nosso erro aqui como o segundo parâmetro, podemos fornecer uma visão de nossa mensagem de erro, que será uma string. Nesse caso, este é o melhor pai possível e, digamos, o TypeScript. Você pode trabalhar com erro desconhecido dentro do catch. Mas aqui está o problema. Escreveremos essa única linha em cada ação quando estivermos recebendo um erro e quisermos ler uma mensagem e a usaremos dentro de cada imagem dentro do catch. É por isso que eu quero mover esse código para ajudá-la. E ainda não temos nossos ajudantes. É por isso que a fonte de insights. Vamos criar ajudantes ponto ds e apoiar esse método dentro. Aqui eu posso criar um novo método que é obter mensagem de erro. E estamos chegando aqui nosso erro e é desconhecido. Então isso é exatamente o que estamos recebendo em catch butt back. Queremos pegar uma corda. Agora, posso copiar e colar esta linha completamente e colá-la aqui. Não preciso aqui de uma mensagem constante. Podemos simplesmente retornar essa única linha. Como você pode ver, é assim que parece. Estamos chegando aqui erro desconhecido, onde instância de erro de frango e mensagem de erro bem escrita ou era de string. E agora, aqui dentro das escadas da nossa coluna, podemos importar esse método. É por isso que aqui podemos desestruturar, receber mensagem de erro e é de nossos ajudantes. E agora aqui, em vez dessa linha, podemos escrever aqui, obter mensagem de erro e fomos fornecidos dentro de nossa era. E agora esse ajudante é super utilizável rapidamente. Agora precisamos escrever nosso código dentro da tribo. Então, primeiro de tudo, devemos verificar se burlington ou não. Estamos fazendo isso apenas para o TypeScript porque eles realmente estavam bloqueados aqui por causa das IOUs e nosso middleware interno que construímos anteriormente. Mas aqui devemos verificar se put não tem um usuário de ponto de soquete. E só para lembrá-lo dessa interface de soquete deve ser nossa interface e não de íon de soquete. Aqui dentro, podemos emitir exatamente as mesmas coisas. Então aqui está o soquete e a carne e foram fornecidos dentro de um soquete. As colunas ENM de eventos criam falha. Aqui dentro, podemos simplesmente escrever a string que o usuário não está autorizado. Então, o que esta linha está fazendo, estamos emitindo uma mensagem para o nosso soquete, o que na verdade significa que temos um cliente e esse cliente envia uma mensagem, por favor, crie uma coluna. E então, aqui dentro da gaiola, aqui dentro do CIF emitirá apenas para um único cliente que nos enviar uma mensagem, esta mensagem de volta. E esse cliente pode ouvir essa mensagem e fazer algo de acordo. E depois de nos encontrarmos, podemos simplesmente ligar aqui de volta sem querer fazer nada. Mas se tivermos um usuário de soquete, podemos criar nossa coluna. Então, aqui vamos tentar que temos uma nova coluna e, para criá-la, devemos usar um novo modelo de coluna. Na verdade, mundo do modelo de coluna com o invertido aqui no topo. Então, podemos usá-lo aqui. Então, para criar uma coluna, o modelo, devemos fornecer uma visão, antes de tudo, um título e é um título de ponto de dados. Em segundo lugar, queremos fornecer aqui ID da placa e é theta dot board AT. Esta é toda a informação do nosso evento. E por último, mas não menos importante, é o nosso ID de usuário. É inflamação do socket dot user dot ID. Então, aqui criamos com sucesso um novo número de coluna, devemos salvá-lo no banco de dados. Aqui é você. Vamos voltar nossa coluna salva porque queremos chegar aqui NAD também. E estamos aguardando nossa nova coluna que foi criada ponto save. Estamos esperando para salvá-lo no banco de dados. E depois disso, queremos enviar essas informações não apenas para o nosso soquete. Queremos notificar todas as pessoas, todos os nossos clientes que estão inscritos em nosso conselho. O que realmente significa que estamos enviando esta mensagem, não apenas vector socket, estamos enviando essa mensagem para muitas pessoas. E podemos escrever esse código com socket aqui assim. Portanto, não é o soquete ponto dois e k dentro, estamos fornecendo o ponto de ponto de dados AD. E só para lembrá-lo aqui antes de placas internas onde escrevemos código de junção com John Boyd, escrevemos aqui, junção de soquete, dados, ID de porta. Aqui. Agora temos uma sala com um d da nossa prancha. E agora aqui podemos encontrar alguns dados para todos os usuários que estão dentro desta sala com o I2. Aqui está nossa placa de dados AT ponto m meet e foram fornecidos dentro de nossos eventos de soquete ENM, e neste caso, será um sucesso. Esta coluna cria sucesso. Aqui também queremos fornecer todas as informações da nossa coluna salva. E, na verdade, é o mesmo que usar HTTP, mas essas informações serão propagadas para todos os nossos usuários simultaneamente se eles estiverem inscritos nesse quadro específico. Agora, aqui, sem nenhuma lógica de cliente difícil, quero testar se está funcionando. Este é o y aqui, por exemplo, depois do nosso i2, eu quero escrever uma coluna salva no log do console para que possamos verificar se estamos vindo para cá. Agora, depois disso, eu quero pular dentro nossos clientes fonte, aplicativo, placa , componentes, placa HTML aqui, eu só quero testar para criar um botão foi clicado. Então, clicaremos no botão e aqui temos uma função de teste. Agora, quando clicarmos no botão, quero conhecer este evento. É assim que aqui temos nossa função de teste e, por dentro, quero escrever este ponto de serviço de soquete e carne e foram fornecidos dentro do nosso evento. E no nosso caso são colunas criadas e há um segundo parâmetro que devemos fornecer aqui um objeto com pour the tea, que será esse ID de placa. E em segundo lugar, o título, por exemplo, para esta única linha, deve dizer ao nosso back-end que queremos criar essa coluna específica para essa parte. Agora podemos pular para o back-end e verificar se está funcionando. Como você pode ver, não temos nenhum erro na API. Agora vamos abrir um navegador e recarregar a página. E estamos aqui em nossa página de quadro único. Aqui tem um botão. E, na verdade, esqueci de escrever o texto dentro do botão. Então, vamos escrever aqui teste para que possamos pelo menos ver um botão e clicar no botão uma vez. Agora vamos pular para dentro, acenou. E, na verdade, aqui estamos recebendo a coluna da última mensagem salva, o que significa que nosso back-end recebeu nossa solicitação. E isso está acontecendo em nossos níveis de serviço com esse código em que estamos inscritos na nota da coluna. E então do lado onde Colin, nosso controlador de colunas cria coluna e dentro dessa função, em primeiro lugar, estamos verificando se estamos presos. Depois disso, estamos gerando uma nova coluna com esses dados que obtivemos do evento. Em seguida, salvamos esta coluna e enviamos a mensagem a todos os nossos usuários que estão inscritos neste ponto. Vamos testar esse código profundamente no próximo vídeo. Mas, como você pode ver, aqui está minha coluna salva bloqueada constante. E isso é exatamente o que estamos vendo aqui dentro do log do console, o que na verdade significa que implementamos com sucesso nosso trabalho entre o soquete no cliente e o soquete no back-end. E em relação à criação de nossas colunas. 33. Conseguir colunas: No vídeo anterior, preparamos com sucesso o substantivo backend, criamos um fora da nossa coluna. Mas antes de implementarmos o formulário embutido para criar uma coluna no cliente, devemos pelo menos criar nossa página de quadros porque, por enquanto, ela está completamente vazia e também renderiza nossas colunas. É por isso que a primeira coisa que quero fazer é criar em nosso cliente a interface para o cone, porque ainda não a temos. É por isso que devemos defender conjuntos, fontes e tipos compartilhados de aplicativos. E aqui devemos criar interface de coluna Ts. E vamos conhecer aqui nossa nova interface, que é uma interface de coluna. E por dentro, em primeiro lugar, estamos recebendo NAD, que é uma corda. Em segundo lugar, no título, que é uma string. E por último criei, que é uma string. E, na verdade, também estamos recebendo aqui a cabeça atualizada, que também é uma string. Nosso próximo passo é criar um serviço com o método para obter todas as colunas para esse quadro específico. E, na verdade, aqui não temos esse serviço. Temos apenas o serviço Boards, que é um serviço sem estado apenas com métodos como obter placas, ficar entediado, criar placa e assim por diante. Devemos fazer exatamente o mesmo. Mas para colunas, é por isso que aqui eu quero criar colunas, pontos de serviço. E como você pode ver onde no AP compartilhado e não no quadro. Agora aqui, em primeiro lugar, o traço de biomassa injetável e segundo loop um para exportar nossa classe, que será nosso serviço de colunas. Agora, por dentro, devemos apresentá-lo ao cliente, pois faremos solicitações para obter uma lista de nossas colunas. Este é o caminho aqui. Em primeiro lugar, devemos escrever um construtor. E aqui temos um HTTP, que é um cliente HTTP. Isso é suficiente. Nobu deve criar o método get columns, que nos entregará na forma de colunas do back-end e no back-end já criamos esse método. É aqui que aqui, em primeiro lugar, devemos obter aqui um ID do conselho. Este é um identificador exclusivo para obter uma lista de colunas para esse quadro específico. E de volta estamos recebendo uma matriz de nossas colunas, obviamente como observável, porque é sempre do HTTP onde obter observáveis, é aqui que observável da interface da coluna e não se esqueça que é um matriz. Agora, aqui dentro, estamos fazendo exatamente o mesmo que fizemos a bordo. Então, se você não quiser redigitar tudo, você pode simplesmente copiar e colar, por exemplo, ficar entediado e pronto. O código é muito parecido. Então, aqui, em primeiro lugar, queremos criar um URL, e aqui queremos mesclar antes de tudo, nossa barra de URL da API do DOD do ambiente. Aqui temos nossas placas slash n. Aqui queremos injetar colunas de barra de ID da placa. E depois disso, só precisamos fazer uma solicitação HTTP GET. É por isso que aqui eu quero retornar este http.get e devemos fornecer isso de volta para obter nosso array de interface de coluna. E aqui dentro, estamos fornecendo nosso URL. E com esse código, obteremos nossas colunas para um quadro específico. E agora é hora de usar o serviço dentro do nosso componente. Mas, para isso, precisamos pular dentro nossa placa de aplicativos, molécula de placa. E a entrada aqui dentro dos provedores está ao seu serviço e será nosso serviço de colunas. Agora, aqui podemos pular para dentro dos componentes, placa, componente da placa e buscar esses dados aqui. Agora, aqui dentro de nossos dados de busca, queremos buscar nossas colunas. Mas para esse construtor interno, devemos injetar esse serviço. E foi o serviço de colunas, que é o serviço de colunas que acabamos de criar. Agora, aqui podemos pular dentro de nossos dados de busca e usar aqui this.com service get columns. Esse é exatamente o método que acabamos de criar. E aqui dentro estamos fornecendo agora, neste momento, já temos essa informação. Mas aqui queremos fazer exatamente o mesmo, mas não queremos salvar essas colunas diretamente aqui no componente. Já criamos nosso serviço de diretoria para isso. Lá dentro, podemos salvar todas essas informações. É por isso que aqui podemos escrever, Assinar e estamos recebendo de volta nossas colunas. E o que queremos fazer com as colunas, precisamos aqui no seu método, este serviço de quadro, DOD, por exemplo, definir colunas. E lá dentro lançaremos nossa lista de colunas. E agora só precisamos implementar essas colunas de conjunto de métodos. É aqui que vamos abrir dentro do Boards Services, nosso serviço de diretoria. E estamos fazendo exatamente o mesmo que fizemos aqui. Dissemos conselho. Então, aqui estão as colunas definidas. Estamos recebendo nossa matriz de colunas, que é uma matriz de interface de coluna. Aqui estamos obtendo um grande vazio e precisamos aqui de um novo fluxo de dados. É aqui que posso copiar, colar nosso fluxo de chefe e chamá-lo de fluxo de coluna. Nesse caso, cada local do nosso aplicativo, se estivermos usando este quadro, pode se inscrever e obter a lista das colunas que temos agora. E, na verdade, isso será um assunto de comportamento da matriz de interface de coluna. E não precisamos fornecer aqui agora porque, por padrão, podemos simplesmente fornecer aqui um array vazio. E agora, dentro do nosso método set columns, podemos simplesmente chamar esse ponto de colunas de ponto a seguir. E estamos fornecendo insights são colunas pré-buscadas. Agora vamos voltar ao nosso componente e eliminar esse fluxo. É por isso que aqui no topo, já temos esse quadro, dólar, que é um fluxo. E agora devemos criar colunas. Dollar, que é uma string para nossas colunas, e é um observável para array de interface de coluna. E agora aqui podemos escrever diretamente após esse ponto, essas colunas de pontos. E aqui estamos usando este ponto de serviço do conselho. E aqui temos nossas colunas. Não precisamos aqui do filtro de tubulação booleano porque isso é simplesmente uma matriz. Está vazio ou mais antigo, o campo com nossas colunas, a ideia principal é que não temos fluxos e podemos usá-los diretamente dentro do HTML. Mas aqui eu quero mostrar uma variante ainda melhor, porque na verdade aqui já temos dois streams depois. Teremos mais uma para tarefas, o que significa que temos três fontes diferentes de dados e queremos renderizar nossa página quando todas as fontes de dados forem preenchidas. É por isso que podemos reescrever esse código de forma um pouco diferente. Podemos escrever aqui esses dados pontuais com mais alto. E esta é uma notação especial que estou usando. Essa é uma variante super popular, como você pode gerenciar seus dados para seu componente. Normalmente, você tem uma página com muitas fontes de dados e deseja combiná-las em um único fluxo. E então você pode executar a página inteira somente quando preencher todos os fluxos. E nós cumpriremos o fluxo com os dados quando estivermos colocando você em seus dados. É aqui que eu quero escrever as últimas combinações e foram fornecidas dentro uma série de streams e festivais. Aqui podemos copiar esta linha com o fluxo de placas e colá-la aqui. E depois disso, pegamos essas colunas de serviço de porta e também as colamos aqui. Obviamente, devemos direto aqui, vírgula, porque esses são dois fluxos diferentes. A ideia principal é que estamos combinando os fluxos. E aqui nós queremos fazer isso com pipe e map, porque na verdade estamos obtendo isso como uma matriz e morrer quer um objeto aqui, este é y. Aqui dentro do mapa, podemos diretamente a estrutura, em primeiro lugar, uma placa e aqui a ordem é importante. Em segundo lugar, temos aqui colunas. E depois disso, queremos retornar os dados em outro formato como um objeto. E aqui estamos voltando primeiro a bordo e em segundo lugar, nossas colunas. Então, o que essa coisa está fazendo por nós. Então, estamos obtendo aqui dados, o que na verdade significa que não precisamos de dois fluxos aqui. Agora podemos criar aqui e usar dados de fluxo. E esses são os dados completos da nossa placa de componentes. Agora estamos dizendo aqui que isso é um observável do objeto. E antes de tudo, temos aqui uma placa, que é uma interface de placa. E em segundo lugar, estamos obtendo aqui nossas colunas, que é uma matriz de interface de coluna. E agora podemos remover o dólar do conselho e o dólar das colunas, não precisamos mais deles. O ponto principal é que nossa lógica era buscar dados e definir esses dados dentro do serviço de palavras permanecendo lá. Isso é apenas uma combinação de dois fluxos para mapear esses dados para o nosso componente. Então, agora a questão é como usaremos esses dados dentro do nosso HTML. É aqui que eu quero remover tudo e, na verdade, também remover aqui o teste na parte inferior. Não precisamos disso de jeito nenhum. Agora eu quero escrever um marcador para nossa página. Em primeiro lugar, aqui queremos renderizar a barra superior do nosso aplicativo. Ele já está lá. Depois disso, vamos comandar o quadro. Então, aqui teremos o div class board, e aqui está um truque que estamos usando aqui na GE, mas estamos fornecendo informações sobre o dólar, esta é a nossa última sincronização combinada como dados, e é isso. A ideia principal é que não estamos mais trabalhando com fluxos internos. Estamos trabalhando com dados como uma propriedade local. E isso criará para nós uma propriedade local dentro dessa div. Agora, aqui, em primeiro lugar, queremos criar nosso contêiner de cabeçalho de quadro. Aqui é onde aqui div class board header container. E vamos fechar essa div. Mas vamos executar o último Insight é um formulário em linha para atualizar nosso conselho. É aqui que eu simplesmente escreverei um vínculo de formulário embutido, para que não nos esqueçamos disso. Depois disso, renderizaremos nosso div com as colunas de classe e dentro eu quero fazer e G for loop para cada coluna. Este é y aqui, coluna de classe e depois G4. E aqui podemos escrever a coluna principal das colunas de pontos de dados. Como você pode ver aqui , não precisa nenhum canal assíncrono porque estamos resolvendo nossa propriedade de dados e estamos recebendo esses dados, e esses dados serão atualizados automaticamente se o fluxo de colunas também é atualizado. Aqui, vamos fechar nossa coluna e, em seguida, queremos renderizar o título da coluna da classe div. Agora, lá dentro, vamos nos divertir mais uma. É aqui que aqui na forma de linha para atualizar a coluna. E depois dessa coluna teremos mais uma em forma de linha. Então, aqui teremos um formulário embutido para criar uma coluna. Então, essa é a nossa marcação básica. Na verdade, não renderizamos muito aqui, mas pelo menos estamos renderizando aqui em colunas, o que estamos obtendo de nossos dados. Vamos verificar se está funcionando. Estou pulando para o console e estamos recebendo um erro. epítopo não está disponível para nós, portanto, devemos importá-lo dentro do nosso módulo de placa. Então, aqui dentro das entradas, podemos simplesmente adicionar o módulo da barra superior. Como você pode ver agora, não tenho nenhum erro, então vamos recarregar a página. Na verdade, ele já está lá. Podemos ver nosso belo bar superior. Aqui estão alguns espaços reservados e na verdade, essas já são nossas colunas. E sim, não tínhamos tendência no título apenas para testes, podemos fazer isso muito rápido. Vamos voltar para dentro do nosso quadro, e aqui estará o título da nossa coluna. Então, em vez do formulário embutido para atualizar a coluna, podemos simplesmente renderizar aqui o título do ponto da coluna. Estou recarregando a página aqui, estamos recebendo a primeira coluna e o formulário. Essas são exatamente essas duas colunas que já foram criadas. Em primeiro lugar, dentro do console do MongoDB. E em segundo lugar, na última palestra em que criamos com o evento, nossa nova coluna. E é altamente recomendável que você use o mais recente combinado para combinar dados como esse em todos os seus aplicativos. Isso é extremamente eficiente e escalável. 34. Criar formulário de coluna: Nos vídeos anteriores, tivemos sucesso nas colunas de ID do evento para nosso quadro e agora podemos continuar com Criar formulário para nossa coluna. E só para lembrá-lo, no back-end, já implementamos toda a lógica para criar uma coluna usando socket a yarn, e agora só precisamos implementá-la no cliente. E antes de tudo, quero começar com um pouco de HTML. E, na verdade, aqui já estamos preparados formulário embutido para criar coluna. É exatamente aqui que queremos usar nossa empresa no interior e já a temos. Só precisamos fornecer informações corretas sobre os dados. Aqui vamos fechar nossa forma interior em vez da mensagem. E agora o que precisamos dar aqui? Em primeiro lugar, devemos definir uma aula. E só para lembrá-lo, esta é uma classe pai com estilos que estamos substituindo para nosso formulário embutido para este caso específico aqui, nossa classe será criar formulário de coluna. Depois disso, queremos definir um texto padrão. Isso é o que veremos por padrão, e é o texto, pelo menos também aqui, devemos renderizar um botão para enviar este formulário. É por isso que aqui podemos escrever que queremos sua propriedade button. E é verdade depois disso, queremos fornecer o texto do nosso botão, e esse texto será pelo menos. Então, aqui queremos alterar nosso espaço reservado padrão. É por isso que aqui podemos escrever o marcador de entrada e aqui podemos escrever adicionar nome da coluna. E por último, mas não menos importante, é claro que aqui lidar com o envio. E este é um retorno de chamada em que obteremos um título da nossa coluna que queremos criar. Então, aqui eu quero adicionar um novo método que é chamado Criar coluna e, em seguida, site onde obter nosso título através do evento. E a última coisa que precisamos fazer, precisamos criar essa função de coluna de notas dentro do nosso quadro. Aqui, obteremos um título como uma cepa do nosso fórum no interior. E aqui está o vazio por dentro e eles querem apenas fazer login no console aqui, criar coluna e ver um título. Vamos recarregar a página e verificar como ela funciona. E, na verdade, aqui estamos recebendo uma mensagem. A forma inline não é um elemento conhecido do nosso módulo. É aqui que devemos voltar para dentro do nosso módulo de placa. E aqui dentro das entradas, queremos inserir nosso módulo de formulário embutido. Como você pode ver no navegador, agora temos um novo botão. Pelo menos podemos clicar nesse botão. E vemos agora nossa entrada que é estilizada e nosso botão pelo menos. E, na verdade, se você está se perguntando de onde todos os estilos estão vindo, Assim como ele disse anteriormente, nós estilizamos todos os elementos de formulário inline com nosso caso pai e dinâmico aqui foi criado formulário de coluna. É aqui que você pode ver os estilos criar formulário de coluna e, em seguida, edição de contêiner de formulário embutido. É por isso que nosso formulário é tão compartilhável. E agora vamos verificar se podemos adicionar uma nova coluna. Aqui estou digitando algo, estou acertando pelo menos. E dentro do console podemos ver nossa coluna de crédito e nosso título da coluna, o que na verdade significa que agora aqui podemos emitir um evento para nosso soquete, para nosso back-end, mas eu realmente quero fazer melhor. Quero especificar nossa opinião. É por isso que aqui, nesses tipos compartilhados, temos quadro e coluna, mas quero criar uma entrada. O que isso significa? Assim como tínhamos dentro de nossos tipos de corujas, tínhamos aqui solicitação de login e solicitação de registro, que é essencialmente um corpo de nossa solicitação. Normalmente, queremos nomeá-lo como request ou talvez você queira uma entrada de palavra. É assim que aqui nos tipos compartilhados, podemos criar nossa entrada de coluna ou você também pode chamá-la de solicitação de coluna. Então, digamos que essa seja a interface de entrada de coluna Ts, e esses são os dados que devemos fornecer para o back-end para enviar nosso evento. E aqui queremos especificá-lo dentro de uma interface. Então, em todo o aplicativo, saberemos como criamos sua coluna. Este é o caminho aqui, vamos chamá-lo Interface de entrada de coluna e as principais diferenças, não é calmamente interface, é entrada. É por isso que é um corpo. E aqui temos nosso título, que é uma string. Isso é o que devemos fornecer para o nosso back-end. E em segundo lugar, um ID de placa, que também é string. E agora podemos usar essa interface de entrada dentro do nosso componente de placa. Então aqui, em vez do log do console, podemos criar nossa entrada de coluna e sabemos que o tipo está aqui, entrada de coluna e aqui agora devemos fornecer todos os valores possíveis. No nosso caso, é apenas título. E em segundo lugar, conselho, AD e corpo. Temos dentro desse ID de porta de ponto? E como você pode ver aqui, temos um tipo correto, e agora devemos jogá-lo dentro do nosso soquete IO. Este é o caminho aqui, esta coluna de criação de ponto de serviço de coluna. E, na verdade, aqui não temos o método create column. É por isso que devemos criá-lo. Quero entrar em nossas colunas de serviços compartilhados. E aqui acabamos de obter a coluna. Aqui queremos criar cone. Mas esse método não fará nada com esse GTP. Ele usará nosso soquete IO, e isso é completamente normal, enquanto que no final, todos esses métodos dentro nossos serviços e simplesmente chamamos nossos serviços. Este é o caminho aqui, vamos criar o método create column e estamos recebendo aqui nossa entrada de coluna. É muito bom ter criado uma interface aqui. É aqui que podemos reutilizá-lo e será nossa interface de entrada de coluna e, de volta, seremos anulados. E só para lembrá-lo aqui com HTTP, sempre receba de volta um observável. Mas na camada de soquete, não funcionará assim. Com o soquete, você tem um único fluxo de dados. É aqui que aqui a única coisa que queremos fazer é acionar nossa emissão. Mas para isso, precisamos injetar aqui nosso serviço de soquete, e este é o nosso serviço de soquete que criamos e agora podemos usá-lo dentro desse método. Então este ponto, serviço de soquete ponto e encontro, e devemos fornecer aqui um nome. Então, vamos verificar primeiro, se temos esse nome dentro de nossos tipos compartilhados, temos eventos de soquete e aqui não temos nada. E, na verdade, podemos abrir dentro do back-end esse enum porque tipos internos , mas também têm eventos de soquete. E aqui temos a coluna de criação, sucesso e fracasso, e é exatamente a mesma coisa. É por isso que vou copiar e colar completamente. E agora podemos usá-lo aqui em vez do nome do evento, podemos escrever aqui eventos de soquete ENM não terminam aqui. Queremos acionar a nota da coluna e salvá-la como um parâmetro. Queremos dar nossa entrada na coluna. Isso nos dá mais um benefício escrever nosso código com socket dentro do serviço. Isolamos esse código dentro de um serviço. É por isso que nosso componente não sabe que estamos usando aqui a camada de soquete, por exemplo, simplesmente chamamos aqui coluna de grau de ponto de serviço de coluna, e recebemos dentro de nossa entrada de coluna. Vamos verificar se está funcionando aqui, podemos tentar criar uma nova coluna. Estou apertando Adicionar. E agora, dentro do nosso chamado, podemos ver a coluna salva. E depois de recarregar a página, você pode ver aqui o cone criado, o que significa essencialmente que está funcionando, mas não atualizamos nossa página em tempo real. E, obviamente, queremos atualizar esta página, primeiro lugar para o nosso usuário atual, segundo lugar para todos os outros usuários também. Mas, para isso, precisamos melhorar nosso serviço de soquete. Por que isso? Porque, na verdade, o que precisamos fazer internamente, devemos nos inscrever de uma forma confortável para o nosso sucesso. E só para lembrá-lo, dentro do nosso back-end aqui dentro das colunas do controlador, temos um encontro e, na verdade esses são os seus dois, emitiremos esta mensagem para todos os usuários inscritos. para esta sala específica. É por isso que o que precisamos fazer. Queremos nos inscrever neste evento específico, que será o sucesso da criação de coluna, mas queremos fazê-lo de forma ineficiente. E então disse camada de soquete, não é eficiente. Queremos fazer isso de forma angular. É por isso que devemos abrir dentro do nosso serviço compartilhado, serviço de soquete. E aqui eu quero criar depois de conhecer mais um método e é chamado Listen here. Em primeiro lugar, quero escrever isso lá dentro. E se você não sabe como usar genéricos, a ideia principal aqui é que podemos fornecer qualquer tipo de dados para bond inside listen, e será o que obteremos do soquete IO. Então, aqui estamos fornecendo t e aqui o nome do evento será string. E de volta eu quero ser observável de t. E essa é essencialmente a ideia. Este método nos devolverá um observável. Não é confortável trabalhar com Socket Layer dentro do angular. É por isso que queremos convertê-lo em observável aqui. Em primeiro lugar, é bom verificar se temos soquete IO ou não. É por isso que posso copiar essa condição if aqui, porque se não tivermos soquete e você estiver conectado, não devemos fazer nada. Depois disso. Quero devolver um novo observável. E aqui dentro, devemos fornecer uma função. E aqui temos apenas um único argumento que é um assinante. E agora, por dentro, podemos secá-lo. Soquete ligado. Este é apenas um código simples de íon de soquete. Aqui temos nosso nome de evento, o que significa que estamos assinando no cliente esse nome de evento que passamos como parâmetro. Aqui está nosso segundo parâmetro: estamos obtendo alguns dados e o que queremos fazer, queremos emitir nosso ponto de assinante ao lado dos dados. Então, o que esse código está fazendo? Em primeiro lugar, aqui devemos tentar isso e isso, você pode ver que estamos recebendo um erro. O objeto é possivelmente indefinido. E, na verdade, esse é um problema de TypeScript porque aqui ele não consegue entender que esse código com Eve cobre isso indefinido. O que podemos fazer em vez disso, podemos escrever aqui con socket é igual ao socket. E depois disso, estamos cobrindo esse soquete aqui. E então, em vez deste circuito onde usando apenas soquete e, neste caso quando não obtê-lo no teorema do TypeScript. Então, qual é a ideia dessa função? Vamos usá-lo assim. Então aqui está escute. Em seguida, estamos fornecendo algum tipo de dados, por exemplo, uma string. E depois disso aqui retire e evento, por exemplo, criação de coluna ou coluna cria sucesso. No nosso caso, essa única linha, nos devolverá um observável. É por isso que depois disso podemos escrever, por exemplo, assinar e aqui, e obteremos aqui nossos dados. Você verá como usaremos essa função em um segundo. A ideia principal é que essa função seja rápida e observável. Assinaremos com Socket Layer para esse nome de evento específico. E quando esse evento for acionado, simplesmente atualizaremos nosso observável. Essa é uma maneira angular muito confortável fazer as coisas com o Socket Layer. Agora vamos tentar usar essa função. Quero voltar atrás e dizer que nosso componente de placa, e aqui temos nossos ouvintes inicializados. E aqui está um lugar muito bom para ouvir os eventos. É por isso que aqui eu quero escrever esta lição de ponto de serviço de soquete de ponto. E aqui devemos fornecer o tipo porque é obrigatório. E aqui não forneceremos isso. Estamos recuperando nossa interface de coluna. Isso é o que estamos obtendo após a criação da coluna. E aqui está o nome do nosso evento e queremos nos inscrever aqui no Socrative termina em uma coluna de pontos cria sucesso porque estamos esperando pelo sucesso. E aqui, depois disso, podemos escrever, basta se inscrever e estamos recebendo aqui uma coluna. E aqui podemos apenas registrar essa coluna no console. Então, mais uma vez, o que essa linha está fazendo, ela cria para nós um novo observável e podemos simplesmente usá-lo como um observável. Mais importante ainda, dentro de onde está certo e encaixe. Então, estamos aguardando nossa emissão. Vamos verificar agora se está funcionando aqui, quero criar uma nova coluna e estou acertando pelo menos. E Viola, como você pode ver dentro do console, estamos recebendo nossa coluna. E, na verdade, esse é esse código com o evento de sucesso. E aqui estamos obtendo exatamente nossa coluna que foi salva no banco de dados porque, como você pode ver, aqui está um 80% de nossa coluna salva. E agora podemos fazer algo no cliente para atualizar o loop é muito ambulatorial nossa diretoria, mas não é alto como você pode ver aqui. Eu abri a mesma guia para o mesmo usuário. Mas a diferença é que o soquete aqui é diferente porque toda vez que estamos abrindo uma nova guia, mas estabelecendo uma nova conexão com outro íon de soquete. É por isso que, quando aqui, tentaremos adicionar uma lista. E eu estou apenas batendo aqui, pelo menos estamos chegando aqui esta coluna log do console. Mas, na verdade, aqui também obtemos essa coluna log do console porque essas são duas guias separadas, são dois usuários separados, o que na verdade significa que se dois clientes diferentes serão conectados e abrir este quadro, eles receberão simultaneamente nosso evento sobre a criação de uma nova coluna. E essa é essencialmente a funcionalidade principal que queremos alcançar dentro do íon de soquete. Agora devemos de alguma forma mudar uma lista de nossas colunas. E, na verdade, esse é o caminho aqui. Quero escrever este serviço de quadros de pontos e ter cuidado aqui, não é ruim, não é nosso serviço apátrida com funções, mas nosso serviço de conselho para o cliente. Aqui, devemos criar um novo método chamado Add Column. E podemos simplesmente jogar dentro de nossa coluna, o que significa essencialmente que nosso componente não sabe nada sobre lógica de negócios, como trabalhar com colunas em nosso serviço de conselho sabe disso. É por isso que aqui devemos entrar em nosso serviço de diretoria e podemos criar aqui uma nova função chamada coluna ABC. E aqui estamos entrando em sua coluna de tipo, interface de coluna e vice-versa, estamos sendo anulados porque não nos importamos com o retorno. Só precisamos atualizar nosso stream. E só para lembrá-lo aqui no topo, temos um fluxo de nossas colunas. E agora aqui precisamos atualizar isso de alguma forma. É por isso que o que podemos escrever aqui queremos, antes de tudo, atualizar nossas colunas. Aqui é y. Vamos criar aqui as colunas atualizadas da propriedade. Aqui precisamos antes de tudo, espalhar o que temos agora. E esse é o fluxo da coluna. E aqui temos uma função getValue, e ela apenas lerá o valor do nosso fluxo que temos atualmente. E no final, devemos escrever em sua coluna. Portanto, esse será nosso novo array de colunas atualizado. Como você pode ver, o tipo está correto. Esta é uma matriz de coluna e interface, e agora podemos atualizá-la com essas colunas a seguir. E aqui estamos lançando colunas atualizadas do site. Então, simplesmente criamos em seu array e vamos escrevê-lo dentro do nosso stream. Vamos verificar se está funcionando. Estou recarregando a página. Aqui no final, temos pelo menos o botão e, na verdade parece meio quebrado porque está com o zoom reduzido. Agora, vamos criar uma nova coluna. Estou acessando a lista de edição. E como você pode ver diretamente aqui, vemos nossa nova coluna, que na verdade significa que esse código atualiza nosso fluxo e , em seguida, nosso componente é inscrito no fluxo aqui no topo com isso combinadas mais recentes, essas colunas estão sendo atualizadas. E, em seguida, reenviaremos esse componente automaticamente. Mais uma vez, como tudo isso está funcionando? Em primeiro lugar, estamos chegando aqui nossa empresa no interior. E essa empresa do interior produz para nós apenas o título. Depois disso, criaremos esse objeto com título e Boyd AD e o lançaremos dentro do nosso serviço de coluna. Aqui está nossa coluna de crédito. Aqui estamos conhecendo nosso evento e estamos lançando dentro de nossos dados depois esse back-end recebe esse evento cria para nós a coluna e os meios para todos os usuários nesta sala, neste quadro, a mensagem que criamos com sucesso nossa coluna. E depois disso, cada cliente é inscrito com esse código desde o início até esta coluna. Grande sucesso. E quando isso acontece, estamos chegando aqui, nossa coluna de crédito, e somos dois pontos aqui, mas serviço para adicionar uma coluna. E isso basicamente atualizará um fluxo com as colunas. E nosso componente será finalizado em todos os nossos clientes. 35. Criar uma tarefa básica: No vídeo anterior, terminamos com sucesso a criação de nossas colunas. Neste vídeo, estamos começando a trabalhar em tarefas. E, na verdade, devemos implementar a parte de back-end da criação das tarefas e obter uma lista de tarefas para o nosso conselho. E, na verdade , acho que é uma boa possibilidade para você tentar implementá-lo sozinho. Porque na verdade você já fez pequenas fissuras dentro deste projeto. E agora você está pronto para fazer algo maior. E, na verdade, obter uma lista de tarefas e criar uma tarefa é muito semelhante às nossas colunas, o que significa que você pode usar toda a lógica a partir daí. Então, o que você precisa fazer se quiser implementá-lo sozinho? Em primeiro lugar, aqui estamos falando sobre acenou. Portanto, devemos criar uma nova interface para nossa tarefa, em seguida, o método do controlador de modelo para obter essas tarefas para os meninos e método insert controlá-lo para criar uma tarefa. A questão é: quais campos precisamos dentro da nossa tarefa? E, na verdade, aqui, eu só quero escrever quais campos precisamos. Em primeiro lugar, é um título da descrição da nossa tarefa que não é obrigatório. Ele pode estar vazio e, em seguida, usar 3D para sabermos quem criou esse ID de coluna de tarefa. Portanto, sabemos em qual coluna do nosso conselho devemos cuidar dessa tarefa e da AT adicional a bordo. Nesse caso, será mais fácil para nós obter todas as nossas tarefas por ID específico do conselho. No back-end, você precisa de uma interface e um modelo e, em seguida, registre-se em sua API para obter essas tarefas dentro do quadro. E o método para obter essa lista de tarefas por quadro caído. Além disso, você deve criar um novo método create também dentro do nosso controlador. E será um método com socket yacht porque queremos notificar todos os nossos usuários que estão inscritos neste conselho específico sobre essa nova tarefa. E se você quiser continuar sozinho, basta pausar o vídeo agora e experimentá-lo. Mas se você quiser apenas acompanhar, vamos fazer isso juntos. E há tudo isso dito. Será muito parecido com nossas colunas. É por isso que vou copiar e colar muito. Primeiro de tudo, aqui, eu quero entrar nossos tipos de fonte de servidor. E aqui teremos nosso teste de interface de coluna. E, na verdade, podemos copiar e colar totalmente e criar nossa interface Task Ts. Aqui dentro dos campos musculosos, exatamente como o plano. Em primeiro lugar, temos nosso título criado em atualizá-lo. Nós sempre, aqui está nosso ID de usuário e placa AT isso é totalmente bom. Mas também precisamos aqui para criar uma coluna lady. Neste caso, quando não, sempre que dominar essa tarefa específica. E também precisamos aqui de uma descrição, mas não é obrigatória. É por isso que coloquei aqui um ponto de interrogação. Portanto, nossa interface está ótima. Agora vamos mudar o documento que precisamos criar aqui documento de tarefas, que está estendendo o documento e nossa tarefa que criamos. E como você pode ver aqui, esqueci de renomear nossa coluna para a tarefa. Agora vamos pular e criar nosso modelo. Aqui dentro dos modelos já havia coluna. Também copiarei, colarei tudo e colocarei em nosso novo arquivo, que é o ponto ds da tarefa. Aqui devemos mudar tudo. Festival Aqui temos outro esquema de coluna, mas esquema de tarefas. E aqui não o documento da coluna, mas o nosso documento de tarefa que acabamos de criar aqui no topo, posso remover com segurança o documento da coluna. Aqui temos nosso título. É obrigatório. Isso é totalmente bom. Depois disso, vou colar o título novamente e renomeá-lo para descrição, mas é opcional. É aqui que o requerido não é necessário aqui. Também temos aqui nosso ID de usuário, ID de placa e aqui quero colocar um novo ID de coluna. E isso também é necessário com certeza. E type é o ID do objeto. Está parecendo totalmente bom. Agora, na parte inferior, devemos fornecer aqui nosso documento de tarefa. E aqui está uma tarefa, que é um esquema de tarefas. Nosso modelo está totalmente pronto. Agora precisamos criar uma nova API dentro do nosso servidor. Aqui é y. Vamos voltar para as camadas do servidor de origem do serviço. Aqui temos nossas chamadas de API. E, na verdade, nossa nova chamada de API será muito semelhante a esse código. Aqui estamos obtendo colunas por ID de placa específica. Na verdade, queremos obter todas as nossas tarefas para uma porta específica. É por isso que vou copiar, colar esta linha, colar aqui e renomear. Serão tábuas slushy pie slash. Board é um parâmetro dinâmico, e aqui temos nossas tarefas e aqui também precisaremos de nosso middleware. E aqui precisamos de um novo controlador, que será controlador de tarefas, porque por dentro queremos gerenciar nossas tarefas. E aqui o método receberá tarefas, e esse método deve retornar todas as tarefas para esse quadro específico. Agora é hora de criar um controlador. É por isso que eu vou pular e disse controladores. E eu quero copiar e colar todas as colunas do arquivo só porque é mais fácil alterar e será super parecido. Então, eu estou colando aqui e renomeando duas tarefas, ponto ds. Aqui dentro temos dois métodos, criar coluna e obter coluna. E, na verdade, aqui podemos simplesmente renomear as colunas get para obter tarefas. E aqui estamos deixando tudo como está, solicitando resposta. Em seguida, está tudo bem. Frango para o usuário está bem aqui. Reagendar, tudo é incrível. Agora, aqui não precisamos usar o modelo de coluna, mas, em vez disso, precisamos usar aqui o modelo de tarefas. É aqui que aqui no topo vou inserir o modelo de tarefa. Da tarefa de modelos. Agora, aqui podemos mudar nosso modelo de coluna para o modelo de tarefa. Aqui estamos encontrando por borda diferentes parâmetros de solicitação, ID da placa, e isso é exatamente o que precisamos e é por isso que temos corpo dentro do nosso esquema. Nesse caso, com apenas uma única linha de trabalho encontrando todas as nossas tarefas para esse quadro específico. Então, de volta, estamos recebendo nossa lista de tarefas, e aqui podemos simplesmente enviá-las de volta para nossa API. E com isso, nossa ação para obter a lista de tarefas está totalmente pronta. Agora vamos alterar diretamente essa coluna de criação. E como você pode ver aqui, estamos falando de E/S de soquete, e também será muito semelhante. Em primeiro lugar, temos aqui uma tarefa de criação de método aqui onde obter seu soquete e dados. Então, o que precisamos para obter dados internos? Em primeiro lugar, estamos ficando entediados ou ED, porque devemos notificar todos os usuários dentro desse quadro específico. Isso é totalmente bom. Agora temos aqui a string de título, e a última aqui é o id da coluna. E o id da coluna também é string e deveres obrigatórios. E você pode dizer aqui que não fornecemos uma descrição interna. Seu total está certo em criar, recontar, alterar descrição, descrição que podemos fornecer somente dentro da Atualização. É por isso que está tudo bem. Então, o que estamos fazendo aqui dentro, primeiro queremos ter uma falha para criar nossas tarefas. Mas, para isso, precisamos primeiro atualizar nossos eventos de soquete. É por isso que vou pular nesses tipos de fonte. E aqui temos nossos eventos de soquete, e aqui já temos a nota das colunas e eles querem copiar e colar todas as três ações. Aqui podemos renomeá-lo de colunas para tarefas criadas, e aqui estão as tarefas criadas , depois Tarefas, grande sucesso e tarefas criam, falhando nossos eventos de soquete estão prontos. Podemos voltar para dentro de nossas tarefas e mudar aqui eventos de soquete nelas para tarefas pontuais criar mais pálidas e eles não mudarão diretamente aqui nossa captura, e aqui podemos apenas fornecer tarefas de ponto criar falha. Agora vamos atualizar uma parte interna aqui não temos modelo de coluna, mas modelo de tarefa, já estamos inseridos. Aqui, estamos recebendo títulos a partir dos dados. Isso é bom. ID do conselho. E aqui o usuário do soquete está pronto. Tudo isso é totalmente bom, mas também devemos fornecer aqui alcalinidade da coluna de pontos de dados pode ser. E depois disso aqui estamos salvando não uma nova coluna, mas uma nova tarefa. Aqui. Vamos renomeá-lo para nova tarefa. E aqui podemos simplesmente chamar a nova tarefa dot save e estamos recebendo de volta a tarefa salva. Agora, com essa linha, queremos notificar todos os nossos usuários de que criamos uma nova tarefa. É assim que estamos emitindo esse evento e fazer essas tarefas gera sucesso. E aqui queremos fornecer de volta a tarefa de salvamento. E aqui podemos remover esse log do console. Não precisamos mais disso e criamos totalmente nosso método Create Task. E a última coisa que devemos fazer, devemos nos inscrever para começar a criar a tarefa a partir do cliente. É por isso que devemos pular de volta para dentro da nossa irmandade S. E aqui no fundo temos o soquete ligado. Na verdade, podemos copiar e colar colunas Criar e apenas alterá-lo para o nosso soquete, até mesmo as tarefas de pontos da CNN criam. E aqui estamos obtendo nossos dados e simplesmente precisamos chamar nossa coluna de criação de controlador de tarefas. E aqui você não será criado coluna, mas criar tarefa. E como você pode ver aqui com não importou nossas tarefas controlando. É por isso que no topo, eu quero copiar colar colunas controlador e renomeá-lo para o nosso novo arquivo, que é controlador de tarefas. A partir das tarefas dos controladores, parece que implementamos tudo. Agora vamos pular para dentro do console. Como você pode ver, não temos nenhum erro ao conectar-se ao MongoDB. Api está ouvindo. É por isso que, na verdade, eu só quero copiar e colar o quadro , eu abro o Postman aqui e tentar obter nossa lista de tarefas. Portanto, é slash sports do que colar este ID tarefas de barra e eles escondidos aqui enviar. E como você pode ver de volta, estou recebendo uma matriz vazia, o que é totalmente bom porque ainda não criamos nenhuma tarefa, o que significa que nosso back-end está totalmente preparado. E agora podemos começar com a implementação do lado do cliente. 36. Conseguir tarefas: No vídeo anterior, concluímos com sucesso a preparação nossos modelos de tarefas e a obtenção de tarefas no back-end. Neste vídeo, devemos fazer exatamente o mesmo com o cliente. E eu recomendo que você também faça isso sozinho , porque você já tem muito conhecimento. O que você precisa fazer se quiser fazer isso sozinho? Em primeiro lugar, você precisa pular e disse que fonte dos clientes, aplicativo compartilhado. E aqui temos nossos tipos, temos aqui Boyd e coluna, e agora devemos criar uma nova interface para nossa tarefa. Depois disso, devemos criar um novo serviço para trabalhar com tarefas, sejam elas quadros, colunas. Agora, precisamos de um novo servidor chamado serviço de tarefas. Aqui, o boop receberá as tarefas exatamente da mesma maneira, como se estivéssemos obtendo aqui colunas para o nosso quadro, mas não é tudo. Você também deve atualizar molécula do conselho interno em tais serviços, testes de serviço do conselho. Porque aqui estamos falando sobre stream para board e stream para colunas. Além disso, devemos criar aqui stream para nossas tarefas e, adicionalmente, funcionar que atualizará o stream. E depois disso, você deve simplesmente buscar dados aqui dentro deste último combinado. E é isso. Se você implementar esse ponto por conta própria, você é incrível. Mas se você quiser implementá-lo em conjunto, vamos fazer isso agora. Então, primeiro de tudo, eu vou pular em tais fontes de clientes, aplicativos, tipos compartilhados. E aqui eu quero criar um novo tipo para nossos Task interface Ts. E devemos ter exatamente as mesmas propriedades que tínhamos em nosso back-end. É por isso que aqui podemos exportar nossa nova interface e é a interface Task, o interior. Em primeiro lugar, temos nosso ID, que é uma string. Depois disso, temos nosso título, que é uma string. Também teremos aqui uma descrição, mas não é obrigatória. É por isso que aqui está o ponto de interrogação. Também é uma corda. Também precisamos aqui da nossa coluna eles D, que é a referência para a coluna específica, nosso pai. E precisamos aqui do nosso ID do conselho, e também é uma string. E, na verdade, estamos chegando aqui usura t, que também é uma corda. Portanto, nossa interface de tarefas está completamente pronta. Agora podemos voltar aos serviços compartilhados e criar aqui em seu serviço. E, na verdade, o que eu quero fazer, eu quero copiar e colar o serviço de colunas só porque será super semelhante. Vamos renomear o serviço de colunas para Tarefas, serviço Ts e Como você pode ver aqui é o serviço de tarefas MenuService. O que queremos fazer aqui, queremos mudar o nome. Então aqui temos tarefas, serviço onde o construtor vivo como é, devemos usar aqui http e mais recente. Serviço tão bom. E aqui está um método não obter colunas, mas obter tarefas. E aqui queremos obter nossas tarefas por quadro AT, porque estamos buscando apenas uma vez todas as nossas tarefas para um quadro específico. E aqui estamos obtendo Becker observável do array de interface Task. E aqui está nossa URL. São tarefas de barra de identificação de barra de barra de barra. Aqui está o HTTP GET não cirurgia de interface de coluna , mas matriz de interface de tarefa. Por enquanto, quero remover completamente a coluna de crédito porque não implementaremos a tarefa de criação neste vídeo. É por isso que posso remover essas três entradas na parte superior. Não precisamos deles por enquanto. Agora é hora de atualizar nosso serviço de diretoria. É por isso que vou adicionar serviços do conselho, serviço do conselho. E aqui devemos criar uma nova string. Vou copiar e colar aqui o fluxo da coluna e alterá-lo para o fluxo de tarefas. E este é um comportamento sujeito da matriz da interface Task. E, por padrão, aqui temos uma matriz vazia, que é totalmente rápida. Agora, aqui temos um método, enviar quadros em colunas. Devemos criar um novo método que é chamado de tarefas definidas. E aqui está uma discussão. Estamos recebendo nossas tarefas e é uma matriz, então é uma matriz de interface de tarefas. E agora aqui dentro do nosso fluxo, tarefas com dólar, queremos definir nossas novas tarefas para que estejamos quase terminando. Agora a biomassa salta para dentro do nosso componente, placa, componente da placa. E aqui está o nosso mais recente combinado. E só para lembrá-lo, aqui nos dados, estamos combinando todos os nossos fluxos para buscar dados para o conselho. Isso é o que devemos fazer aqui. Agora, devemos adicionar aqui este serviço de placa, e aqui está em uso tarefas de fluxo. E agora dentro do mapa como o terceiro argumento, devemos tentar tarefas e queremos devolvê-las aqui. Nesse caso, aqui dentro do nosso dólar de dados, teremos não apenas quadros e colunas, mas também tarefas. E se você fez tudo aqui sozinho, você é realmente incrível e está fazendo um bom progresso. E agora a única coisa que devemos fazer aqui, devemos renderizá-los dentro do HTML. Então, vamos abrir o HTML dos componentes da nossa placa. E o que temos aqui é nossa coluna para loop. E por dentro temos um título e não temos mais nada. E depois desse título, queremos renderizar mais um. E aqui precisamos. E, e G for loop para nossas tarefas dentro da coluna. E, na verdade, não podemos fazer isso porque temos apenas esse fluxo para nossas tarefas dentro dos dados, mas não temos tarefas para essa coluna específica e precisamos filtrar esses dados de alguma forma. É por isso que aqui eu quero escrever em G4 e ele será conduzido tarefa de, e aqui eu quero criar uma nova função. Por exemplo, obtenha tarefas por coluna. E, em seguida, devemos fornecer primeiro o id da coluna e, em segundo lugar, todas as nossas tarefas, são tarefas de ponto de dados. E só para lembrá-lo aqui dentro do fluxo de dados, onde entramos em nossas colunas e tarefas do quadro. Este é o caminho aqui dentro dessa função como argumento, podemos simplesmente lançar tarefas de ponto de dados, muitas vezes G4, devemos também aqui uma classe, será tarefa. E aqui dentro, queremos renderizar o título do ponto da tarefa. E agora só precisamos criar essas tarefas infantis por função de coluna. Este é o meu aqui dentro do arquivo OTS. Eu vou criar essa função aqui. Nós, em primeiro lugar, eu recebo o ID da coluna, que é a nossa string. E em segundo lugar, tarefas, e é uma matriz de interface de tarefas. E aqui, de volta, estamos recebendo nosso array de interface de tarefas. Por que isso? Porque, essencialmente, queremos simplesmente obter nosso array com todas as tarefas e filtrar por essa coluna específica. Este é o caminho aqui, o array de interface de tarefas é totalmente bom. E o que queremos fazer por dentro, queremos filtrar nossas tarefas que eram de Deus, é por isso que o filtro de tarefas terá acesso a cada tarefa. E aqui podemos verificar o ponto dois-pontos da tarefa é igual ao nome da nossa coluna que fornecemos como argumento, o que na verdade significa que somos colin para cada coluna que estamos renderizando, essa função obtém tarefas por coluna e renderizaremos aqui em energia para fazer um loop de nossas tarefas. Vamos verificar o som. Temos algum erro? Sim, temos tarefas de propriedade que não existem nas colunas do quadro de tipos, o que significa essencialmente que não atualizamos nossa propriedade de dados. E como você pode ver aqui no topo, estamos definindo que dentro do nosso observável, acabamos de comprar e colunas. Mas aqui também temos nossas tarefas, que é uma matriz de interface de tarefas. Agora, aqui não temos nenhum erro dentro do nosso servidor web e podemos pular para a página e ver todas as nossas colunas, mas não vemos nenhuma tarefa dentro do motivo pelo qual isso está acontecendo, porque na verdade não chamamos nossa busca. E, na verdade, aqui dentro do nosso construtor, devemos injetar nosso serviço de tarefas que acabamos de criar. E é o nosso serviço de tarefas que é compartilhado. E agora devemos entrar em nossos dados de busca, assim como fizemos aqui. Podemos copiar, colar nosso serviço de colunas e renomeá-lo para nosso serviço de tarefas. E aqui não haverá colunas, mas obter tarefas e o interior vale a pena jogar nosso ID do quadro, que é essa parte AD e vice-versa, não estamos recebendo colunas, mas tarefas. E aqui queremos chamar esse serviço de placa não definir colunas, mas definir tarefas. E por dentro estamos jogando em tarefas que buscamos. É por isso que, com esse código, atualizamos nosso fluxo e o fluxo obterá novos dados dentro do nosso HTML. Vamos verificar isso. Vou recarregar a página e estamos recebendo um erro. Como você pode ver agora, estamos em slash boards. E quando estou pulando para a primeira parte, estamos recebendo um erro que não fornecemos para o serviço de tarefas porque, na verdade, sim, devemos injetá-lo dentro do módulo da placa. É aqui que, dentro dos provedores, devemos adicionar adicionalmente nosso serviço de tarefas. Vamos recarregar a página e, como você pode ver agora, não temos nenhum erro. E aqui dentro da rede, devemos ter uma solicitação para nossas tarefas. E aqui está um pedido slushy pie slash boards slash ID slash tasks. E aqui está a prévia com não tem nenhuma tarefa, o que é totalmente bom. Ainda não os criamos, mas obviamente queremos verificar se nosso código está funcionando. É por isso que o que eu quero fazer dentro do console. Quero abrir nosso Mongo, assim como fizemos anteriormente. Agora, eu preciso selecionar nosso banco de dados para usarmos L trailer. E aqui podemos verificar o que temos. Por exemplo, aqui agora podemos escrever painéis de pontos db, dot find. E com isso, veremos todas as placas que temos. Só temos uma única placa. E da mesma forma, podemos escrever db dot, columns, dot find e onde eu entro em nossas colunas. E o que queremos fazer agora, queremos inserir em sua tarefa dentro de uma dessas colunas. É por isso que aqui podemos escrever db dot e temos tarefas dot, insert e dentro estamos lançando um objeto. Então, a primeira pergunta, o que precisamos para fornecer uma visão? E para isso, podemos verificar nossa interface de tarefas. Então, primeiro de tudo, id será gerado externamente, devemos fornecer um título. Então aqui está o título. Por exemplo, minha primeira tarefa após essa promessa fornece uma descrição. Então, digamos que a descrição seja minha descrição. E depois disso, devemos fornecer a coluna carente. E, na verdade, aqui no topo, eu já vejo colunas. É aqui que eu posso simplesmente pegar um AD ou FirstColumn e eles vão jogá-lo aqui. Então será o ID da coluna. E aqui está esse anúncio. E depois disso, eu também devo fornecer um quadro AD Aqui. Também teremos um anúncio de quadro aqui na parte superior e podemos aceitá-lo. E por último, mas não menos importante, é um usuário AT e realmente usa 3D. Eu não vejo aqui no topo, mas eu posso pegar do back-end. E como você pode ver aqui dentro do nosso back-end, ainda temos um log do console com e-mail do nosso ID de usuário e objeto. É por isso que vou copiar e colar a ideia de como um usuário e escrevê-la aqui. Portanto, use re d é igual a esse ID de objeto. Estou apertando Enter, e aqui está nosso primeiro disco. Vamos criar mais uma, por exemplo, minha segunda tarefa, e aqui está minha descrição. Estou apertando Enter e estamos recebendo mais uma tarefa. Agora vamos recarregar a página e o navegador. Como você pode ver aqui, voila, nós temos nossas duas tarefas. Então, como está funcionando aqui é a nossa rede e temos uma solicitação com tarefas de PS para nosso back-end. E aqui estamos filtrando todas as tarefas por esse ID específico do quadro. E então, dentro do nosso código, dentro do nosso quadro, temos esse código que escrevemos para filtrar nossos dados. Então aqui temos uma função get tasks by column onde dentro de onde filtrar todas as nossas tarefas por essa coluna específica AD. É aqui que estamos renderizando apenas tarefas relacionadas a esta coluna, que na verdade significa que implementamos com sucesso no front-end, obtendo nossas tarefas e renderizando eles dentro do nosso componente. 37. Criar formulário de tarefa: Neste vídeo, podemos finalmente implementar ou formar um interior para criar uma nova tarefa. E, na verdade, já estamos preparados tudo o que precisamos no back-end. Só precisamos implementá-lo no cliente. Então, vamos começar com nosso fórum. Isso é pelo que eles querem fazer. Eu quero começar, definir o HTML do nosso componente do quadro. Aqui, há uma diferença para renderizar na tarefa? E depois disso, no final, queremos renderizar nosso formulário embutido. Vamos tendência aqui componente de formulário inline. E vamos fechar aqui. E agora, por dentro, quando deve fornecer alguns valores. Em primeiro lugar, é a aula. Esta é a nossa classe de padrões que substitui todos os estilos e é Criar Formulário de Tarefa. Depois disso, também devemos fornecer o texto padrão. Será adicionar um cartão, mas também terá um botão aqui. Portanto, o botão aqui deve ser verdadeiro e devemos fornecer um texto. É aqui que aqui estará o texto do botão e ele está no momento. Também queremos fornecer aqui nosso espaço reservado de entrada e inserir um título para este atual e por último, mas não menos importante, é o nosso método de envio de identificador que devemos criar. Vamos dar um nome, criar tarefas, assim como fizemos com nossa coluna e o insight que queremos antes de tudo dar a qualquer evento. Este será o título da tarefa criativa, mas também precisaremos aqui de nossa coluna, porque nosso back-end deve saber em qual coluna estamos criando essa tarefa. E se você quiser perguntar por que recebemos aqui apenas colunas e não Boyd AD. Temos uma placa 3D dentro desse componente interno. É por isso que não precisamos fazer isso. Agora, vamos criar esse método. Vou pular para a nossa prancha e, na verdade, devemos fazer exatamente o mesmo. O que fizemos foi criar uma coluna. Mas aqui está uma pergunta. Temos aqui a interface de entrada da coluna. É assim que parece e agora precisamos criar nossa interface de entrada de tarefas. Então, todas as nossas coisas são escritas da mesma maneira e isso é evitado que devemos enviar para criar uma tarefa. É aqui que podemos chamá-lo também de interface de entrada de tarefa Ts e o que queremos escrever dentro? Essa é a nossa interface, que é uma interface de entrada de tarefas. E o interior, em primeiro lugar, boom deve fornecer um título. É obrigatório e é uma string. Segundo loop, estamos fornecendo aqui nosso ID de coluna, que também é uma string. E por último, mas não menos importante, é o nosso AD fervido, e também é uma corda. E agora temos uma boa contribuição e podemos voltar para o nosso quadro. E agora eu quero copiar e colar esta coluna de criação porque ela será exatamente a mesma, mas para a tarefa. Então, aqui precisamos renomeá-lo para criar uma tarefa. Aqui estamos obtendo não apenas o título, mas também o ID da coluna porque o fornecemos a partir do nosso HTML. E agora aqui podemos alterar o nome da da coluna para a entrada da tarefa. E nossa interface aqui será a interface de entrada de tarefas que acabamos de criar. E como você pode ver onde estou perdendo aqui, nosso ID de coluna. É aqui que devemos adicioná-lo a partir do argumento. E aqui não precisamos chamar um serviço de cone. Devemos coagir nosso serviço de tarefas. E só para lembrá-lo de que este é nosso serviço sem estado, onde estamos escrevendo nossa solicitação HTTP e nosso soquete IO. E esse método deve ser chamado de create task, e estamos lançando dentro de nossa entrada de tarefas. Mas esse método ainda não existe. Devemos criá-lo. É por isso que vamos voltar atrás e dizer que são serviços compartilhados de aplicativos de origem, e aqui está nosso serviço de tarefas. Mas o que eles querem fazer, eu quero copiar e colar o método create column, porque na verdade isso será exatamente o mesmo. Eu copio a coluna de criação colada e eles querem colá-la aqui dentro do serviço de tarefas. Mas esse método será chamado de criar tarefa. E estamos recebendo como argumento nossa entrada de tarefa e bem escrita, sabemos que tipo será a interface de entrada da tarefa. Aqui também queremos chamar um soquete IO porque ele está funcionando da mesma maneira. Temos uma operação assíncrona e iniciamos o sucesso e o fracasso. Então começamos a criar uma tarefa, notificaremos com o nosso back-end. Em seguida, Bacon cria uma tarefa de faceta e, em seguida, o back-end notifica todas as pessoas que estão inscritas em nosso conselho sobre a nova tarefa. É aqui que, na verdade, devemos atualizar nossos eventos de soquete neles. Quero abri-lo aqui à direita e, além disso, abrir o enum dentro de um servidor porque já escrevemos dentro de nossos eventos. Esses três novos eventos, tarefas, criam sucesso e fracasso. E agora podemos colá-los aqui para usar no cliente. Depois disso, podemos voltar ao nosso serviço de tarefas e alterar o nome aqui. E serão criadas tarefas do Departamento de Defesa. E há um parâmetro aqui. Recebemos uma entrada de tarefa, o que na verdade significa que depois de preencher nosso formulário interno aqui, enviaremos nosso soquete, sua imagem para nosso back-end e nosso bacon já está preparado para criar nossa tarefa e o sucesso da carne de volta para todos os nossos usuários. Vamos verificar isso. É realmente assim que podemos pular em nossos controladores de origem de servidor, e aqui está nosso controlador de tarefas. E como você pode ver, nós temos aqui criar método de tarefa, e aqui estamos criando uma nova tarefa e, em seguida, notificando com esta linha todos os nossos clientes, o que na verdade significa que devemos apenas assinar esses mudanças dentro do nosso cliente. É aqui que eu estou pulando de volta para dentro de nossos componentes de placa ts. E só para lembrá-lo, aqui temos nossos ouvintes de inicialização e aqui temos um ouvinte para que nossa coluna crie sucesso. Agora, fazemos exatamente o mesmo para nossa tarefa, grande sucesso. Então, aqui teremos nossa interface de tarefas, e aqui o tipo será DOD. As tarefas geram sucesso. E o que essa interface de tarefas está fazendo dessa maneira, estamos recuperando a interface de tarefas porque é genérica. E agora especificamos ou k, Esta lição nos devolveu nossa interface de tarefas. É aqui que devemos criar um novo método na tarefa dentro da palavra serviço. E estamos fornecendo aqui nossa tarefa que obtivemos do back-end. E a última coisa que queremos fazer é adicionar esse método ao nosso serviço. Vamos abrir nosso serviço de diretoria. E aqui temos na coluna. E como todos vocês fizeram o stent, eu quero copiar e colar e fazer exatamente o mesmo. Aqui temos um método de tarefa e estamos chegando aqui quando você cria uma tarefa, e é uma interface de tarefas. Aqui, precisamos fazer uma série de tarefas atualizadas. Então, aqui estamos obtendo isso do que não fluxo de colunas, mas fluxo de tarefas, então obtemos valor. E aqui no final, queremos escrever nossa nova tarefa. E depois disso, devemos atualizar nossa cepa novamente. Aqui está o fluxo de tarefas e aqui estão as tarefas atualizadas. E com esse código, atualizaremos nosso fluxo com sucesso e todos os nossos componentes inscritos nesse fluxo serão encerrados automaticamente. Vamos verificar se está funcionando. Não temos nenhum erro aqui. E agora eu quero abrir duas guias aqui. E eles querem que os dois clientes entrem no mesmo quadro. E, como você pode ver, aqui está o nosso log do console. E eles querem experimentar o corte aqui. Então, aqui está nosso formulário embutido e vamos chamá-lo, criou um recurso de tarefa. Agora estou pressionando Enter e, como você pode ver diretamente aqui nesta guia, esse elemento aparece. Então, como está funcionando, na verdade, preenchemos nossa empresa no interior. Enviamos nossa imagem para o back-end. Back-end, entendi, criou uma nova tarefa e notificou todas as pessoas, todos os nossos clientes que estão inscritos neste conselho sobre essa mudança. E com essa escuta, atualizamos sobre a recusa de nossa gama de tarefas e esse componente foi finalizado. A parte mais interessante aqui é outra guia e outro usuário, este é outro cliente com outro soquete AD. E como você pode ver aqui, também temos nosso recurso Criar tarefa porque agora todos os nossos clientes estão sincronizados. E você pode dizer, tudo bem, mas seu destino, você precisa apenas de um único navegador. Realmente não importa. É apenas uma conexão de soquete diferente para o seu servidor. Se você tiver apenas dois computadores e seu projeto for implantado na produção, ele funcionará exatamente da mesma maneira. Por exemplo, aqui eu posso simplesmente criar uma nova tarefa. Por exemplo, foo, eu estou batendo aqui no cartão e, em seguida, obtendo exatamente a mesma informação sem Pedro lote em outra guia, o que realmente significa que nosso recurso estava criando tarefas é completamente acabado. 38. Atualizar o nome do cartão: Neste vídeo, implementaremos mais um recurso ausente e é uma forma de atualização do nome do nosso conselho. E como você pode ver aqui, temos um quadro de formulário embutido de espaço reservado, e aqui devemos usar nosso formulário interno. E, na verdade, este é o nosso primeiro vídeo que, juntos, implementaremos todo o backend e cliente em apenas um único vídeo. E, na verdade, toda a lógica será exatamente a mesma que já fizemos anteriormente, porque construímos uma arquitetura agradável e agora podemos criar facilmente novos recursos. Então, do que se trata esse recurso, teremos aqui e depois a minha empresa e estamos obtendo dela um título. Mais importante ainda, em primeiro lugar, devemos colocar nosso título do conselho em assinar este formulário sobre nosso sucesso de atualização, mas não queremos usar o GTP aqui. Uau, quero usar Socket IO por isso, porque todos os nossos clientes devem ser notificados se o pronto-socorro, neste ponto, mudamos o nome da placa. É aqui que o soquete ou sua carne, como sempre. E então, em nosso backend, precisamos pegar esse evento e atualizar nosso nome. E, na verdade, podemos criar um método para atualizar todo o quadro, mas vamos atualizar por enquanto no título da camada. Então, vamos tentar fazer isso agora. Para isso, quero entrar no nosso código e começar. Primeiro de tudo foi o nosso servidor. E para este evento de boom de registro de massa e soquete de uso aqui dentro de nosso Socrativo e xenônio. E já temos aqui pranchas, cadeias de folhas e portos e, na verdade, colocamos o desejo exatamente da mesma forma que fizemos com as colunas. E aqui temos colunas criadas, por exemplo, e elas querem copiar e colar todas as três. Porque, na verdade, aqui, por exemplo, depois que os painéis estiverem no ar, queremos escrever quadros e aqui haverá atualização. É aqui que podemos alterá-lo diretamente para atualizações das placas de atualização da placa sucesso das atualizações das placas de atualização da placa e falha na atualização das placas. E agora aqui à direita, devemos fazer exatamente o mesmo. Aqui estarão os quadros e as atualizações. Após o sucesso da atualização desta placa e a falha na atualização das placas. Portanto, nosso evento de soquete foi criado com sucesso e agora devemos registrá-lo dentro de nosso soquete IO. Isso é por vamos voltar para dentro ou um serviço, sim. E aqui na parte inferior temos nossa tomada. Aqui devemos registrar e usar socket ton. Para isso, podemos simplesmente copiar, colar, por exemplo, criar tarefas e escrever aqui, não criar, mas reagir na atualização de quadros de pontos que acabamos de criar. Então, estamos aguardando a atualização dos painéis de eventos do nosso cliente. E aqui não queremos usar o controlador de tarefas, mas o controlador da placa aqui não cria tarefa, mas placa de atualização. E, na verdade, por dentro, estamos passando ou seus dados de soquete, assim como fizemos anteriormente. Agora, vamos criar esse método de atualização do quadro para esses pagamentos entrem em nossas placas de controle. E aqui já temos esse método create board, mas isso não é o que queremos porque esse método é com um sapato TP. É por isso que, na verdade, queremos algo como quadro ao vivo, por exemplo. É por isso que vou copiar e colar esse método porque todas as opções serão semelhantes e podemos nomear esse método de atualização de placa. E sabemos que aqui estamos obtendo nossa tomada IR e depois nossos dados. E a questão é quais dados precisamos para atualizar um conselho certeza precisamos saber no título do conselho que queríamos fornecer. E em segundo lugar, a ideia do conselho que queremos atualizar. É aqui que nosso corpo está totalmente bem. E, na verdade, aqui eu não quero escrever um título, eu quero escrever campos. E aqui vamos passar a string do título. Por que temos essa notação? Neste caso aqui, podemos facilmente adicionar um novo campo que queremos atualizar dentro do nosso quadro. Por exemplo, se mais tarde tivermos uma descrição, podemos simplesmente jogá-la aqui, mas por enquanto temos apenas um título. Agora, aqui podemos remover esse log do console, não precisamos dele e também folha de soquete. Então, a questão é o que vamos escrever aqui? Em primeiro lugar, devemos escrever aqui try-catch só porque podemos obter um erro. Este é o caminho aqui, vamos criar, tentar pegar. E aqui estamos entrando, pegando um erro. E se tivermos um erro, só queremos escrever socket and meat. E aqui estão nossos eventos de soquete em um ponto. E já criamos nossa falha de atualização de placas. E o que queremos fornecer insights é nossa mensagem de erro get. E só para lembrá-lo, este é o nosso ajudante que transformará uma flecha. Esse é o meu interior. Podemos simplesmente fornecer nosso erro desconhecido. Agora vamos criar nossa tribo. Então Festival aqui queremos verificar se um usuário válido, este é y. Vamos verificar se não temos um usuário ponto de soquete e, em seguida, seguir em frente para emitir exatamente o mesmo erro. Então, aqui vamos tentar o soquete, os eventos do soquete, a falha de atualização das placas ENM. E aqui, em vez de receber mensagem de erro, podemos simplesmente escrever que o usuário não está autorizado. Além disso, não devemos esquecer aqui de escrever um retorno. Nesse caso, vamos parar de fazer qualquer coisa. Porque depois disso, se quisermos escrever nossa lógica, isso é atualização do quadro. E, na verdade, é extremamente fácil, mas devemos tornar esse método síncrono porque queremos usá-lo no Kuwait por dentro. Agora, aqui dentro do que eu quero fazer, eu quero recuperar nosso quadro atualizado. E para atualizar uma placa, devemos usar aqui um peso e acessamos aqui nosso modelo de trabalho. E podemos usar localizar por ID e atualizar. E, na verdade, esse é um método incrível do Mongoose. Neste caso, estamos apenas fornecendo NAT e, no nosso caso, é um ID de placa de ponto de dados. E aqui está nossa atualização. E, na verdade, atualizar é exatamente o que queremos atualizar dentro de nossa entidade. É aqui que podemos apenas experimentar os campos de pontos do quadro e este é um objeto. E o último são as opções. Aqui, eu quero fornecer uma opção para você. Essa opção é muito importante porque, nesse caso, recuperaremos nosso quadro atualizado. Além disso, como você pode ver aqui, eu cometi um erro. Não é um campo de pontos de placa, são campos de pontos de dados. Agora não temos nenhum erro e podemos responder com essa porta. E para isso, podemos simplesmente usar socket and meet. Aqui está o nosso soquete até mesmo os viu. E temos aqui o sucesso. Então, os conselhos atualizam o sucesso Queremos fornecer como o segundo parâmetro são atualizados placa. Nesse caso, todos os nossos clientes serão notificados sobre este evento após este cupom para notificar todos os nossos clientes inscritos neste fórum sobre nossa mudança. É aqui que podemos escrever ir ponto t2, e aqui queremos notificar todos os clientes dentro de nossa sala. É aqui que teremos dados, dot board Id dot e nos encontraremos exatamente como escrevemos anteriormente. E aqui dentro podemos usar nossos eventos de soquete em m ponto. E aqui temos um sucesso na atualização do conselho. E há um segundo parâmetro que queremos escrever aqui, porta atualizada. Nesse caso, os usuários do Oliver serão notificados para que o conselho sido atualizado e eles saberão quais campos precisam alterar. Nossa parte de back-end está completamente pronta. Agora devemos implementar uma parte do cliente. É aqui que vamos voltar para dentro nosso aplicativo de origem do cliente. E aqui eu quero entrar em primeiro lugar no Shared Services, Board service. Por que isso? Porque, na verdade, aqui estamos lançando nossos eventos para o back-end. E, na verdade, antes de escrevermos aqui, assim como o gato GTP e a proposta exigente. Mas no nosso caso agora, devemos emitir um evento de soquete. É por isso que o que queremos criar aqui é a placa de atualização de método. Queremos fornecer aqui. Em primeiro lugar, nosso conselho AD, esta é uma string e, em segundo lugar, campos que queremos atualizar. Como você pode ver, temos parâmetros exatamente como no back-end. Aqui campos é intitulado, que é uma string, e de volta com não precisa obter nada porque simplesmente usamos aqui soquete IO, mas para usá-lo aqui, mas deve injetado dentro do construtor. É aqui que estamos recebendo nosso serviço de soquete, que é nosso serviço de soquete. Agora, dentro da nossa placa de atualização, podemos usar este serviço de soquete de ponto, ponto e carne. E aqui devemos fornecer nosso evento de soquete. Mas aqui está o problema. Ainda não o registramos dentro do nosso cliente. Aqui, não temos essas cordas. É aqui que aqui na parte inferior, eu quero abrir nossos eventos de soquete de servidor neles. E aqui eu quero copiar e colar esses poros, atualizar o sucesso e o fracasso. E agora só queremos colá-los aqui dentro do nosso cliente. Então, agora não dissemos ao nosso cliente as cordas e podemos emiti-las. É por isso que aqui podemos simplesmente escrever eventos de soquete em m ponto e aqui temos uma atualização da placa. Este é o início da nossa atualização em protesto. E o segundo parâmetro aqui segue em frente para fornecer nossa vírgula de ID de placa, nossos campos. Portanto, temos exatamente o mesmo data lake que preparamos em nosso back-end. E agora, de qualquer parte do nosso aplicativo, podemos usar esse serviço de conselho compartilhado. Use esse método de atualização do quadro para enviar uma reunião. Agora é hora de adicionar nosso formulário, que ainda não criamos. É por isso que vamos voltar para dentro do nosso aplicativo. Componentes da placa, placa, componentes da placa HTML. E como você pode ver aqui no topo dentro do contêiner do cabeçalho do quadro, temos esse quadro de formulário embutido de espaço reservado. E exatamente aqui, queremos escrever um formulário embutido para atualizar o título do nosso conselho. Este é o caminho aqui, vamos escrever nosso formulário de traço embutido que queremos usar, e vamos fechá-lo aqui. Agora, em primeiro lugar, o útero interno deve fornecer a classe para obter o estilo correto. E neste caso aqui, será adicionado fórum do conselho. Depois disso, também queremos fornecer nosso texto padrão. E aqui teremos nosso quadro de pontos de dados, título de ponto. Por que isso? Porque, na verdade, só para lembrá-lo aqui no topo, temos nossos dados, dados de uma propriedade local, e dentro temos todas as nossas colunas, todas as nossas tarefas e um quadro. É por isso que aqui temos um acesso direto ao título do painel de dados e queremos renderizá-lo como um texto padrão. Depois disso, também queremos fornecer um título, e esse é o valor para nossa empresa. Aqui também escreveremos o título do quadro de dados e último, mas não menos importante, é tratado enviar. Este é o nosso evento e queremos criar um novo método, por exemplo, atualizar o nome do quadro e evento interno do dólar é uma string para atualizar um quadro. Agora vamos criar esse método. Vou pular no arquivo RTS e em algum lugar na parte inferior podemos adicionar o nome da placa de atualização. E sabemos que aqui estamos recebendo o nome do nosso conselho, que é uma string. E, de volta, queremos obter um vazio porque aqui queremos simplesmente usar nosso serviço. E, na verdade, aqui já temos acesso ao nosso serviço these dot boards. E isso é importante, não entediado, mas as placas pontuam. E aqui temos nosso quadro de atualização aqui dentro. Em primeiro lugar, devemos fornecer o ID do nosso conselho, e este é o AT do quadro de pontos. E em segundo lugar, nossos campos. No nosso caso aqui, temos apenas um título, que é o nome do nosso conselho que recebemos de nossa forma interna. Então, criamos com sucesso um único fluxo. Então, criamos nosso interior a partir daqui, atualizamos o nome do nosso conselho, e foi emitido um evento para nosso back-end. Vamos verificar se essa parte está funcionando. Não tenho nenhum erro no cliente ou no back-end. E agora vamos abrir um navegador. Como você pode ver aqui, temos agora primeira parte e posso clicar aqui para abrir um formulário. E aqui vemos nossa primeira prancha. Eles podem escrever algo aqui e clicar em enter. E, como você pode ver, ele não foi atualizado porque não reagimos às nossas mudanças no back-end. E, na verdade, como você pode ver aqui dentro, não temos nenhum erro e provavelmente nosso título já foi atualizado, mas não notificamos nosso cliente. E, na verdade, podemos verificar isso facilmente. Podemos simplesmente recarregar a página. E como você pode ver agora, estamos recebendo nosso título atualizado, que na verdade significa que toda a lógica já está funcionando e nosso backend atualizou nosso quadro com sucesso. Mas o principal problema é que não notificamos todos os nossos clientes sobre mudanças. Na verdade, sim, fizemos isso no back-end, mas não criamos uma assinatura para esse evento no cliente. Aqui é y. Vamos fazer isso agora. Então, primeiro de tudo, devemos voltar para dentro do nosso componente de placa. E só para lembrá-lo aqui no topo, temos inscrições para diferentes eventos. É por isso que aqui eu quero copiar colar uma assinatura e alterá-la. Então, aqui temos nosso serviço de soquete e estamos ouvindo o evento de atualização de nossa placa, o que na verdade significa que estamos recebendo uma nova placa. É aqui que temos uma interface de placa e aqui temos o evento de soquete C num dot. E aqui estamos ouvindo o sucesso. Aqui temos quadros, atualizações, sucesso. E dentro do nosso Assine agora, estamos recebendo nosso quadro atualizado. Então, o que queremos fazer com isso? Na verdade, gostaria apenas de chamar um método dentro de nosso serviço de placas e ele atualizará nosso fluxo de dados. É por isso que aqui podemos usar o serviço de placa, placa de atualização de pontos e linha de valor. E dentro do nosso quadro atualizado, super sucesso está inscrito no nosso evento. E só precisamos criar essa função de atualização da placa dentro do nosso serviço de placa. Então, vamos entrar no nosso serviço de diretoria. E aqui na parte inferior, podemos criá-lo. Então aqui está o ponto de atualização, e sabemos que estamos recebendo aqui o quadro atualizado, que na verdade é uma interface de placa completa. E aqui vamos nos alargar porque simplesmente queremos atualizar nosso fluxo. Mas aqui temos um problema. Por padrão, nosso conselho agora está aqui. texto datilografado gritará que não podemos trabalhar com ele. Agora, aqui é onde eu quero verificar se temos agora dentro do quadro ou não. Então, aqui eu quero obter um quadro, e isso é, esses conselhos são transmitidos para obter valor. E depois disso, quero verificar se é agora. Então, se não tivermos nossa placa, então eu quero lançar um erro. Então, aqui lançamos um novo erro porque, na verdade, não podemos atualizar a placa se não tivermos uma placa. Aqui, digamos que a placa não seja inicializada depois disso se pudermos trabalhar com parte e na verdade, quisermos apenas atualizar nosso fluxo. Então, este quadro com ponto de dólar a seguir, e aqui eu quero mesclar todo o quadro que temos com o título porque eu quero apenas atualizar no título. Portanto, o título é o nosso título de ponto do quadro atualizado. E você pode dizer, ok, nós poderíamos apenas pegar o objeto inteiro. Sim, estamos bem, mas quero ficar do lado seguro e apenas implementar um recurso que precisamos resolver. Esse código deve atualizar o fluxo com êxito e nosso componente, como está inscrito no stream, será notificado e finalizado. Vamos verificar se está funcionando. Não temos nenhum erro aqui. Vamos recarregar a página e aqui temos o primeiro quadro. Vamos apenas mudar seu título e clicar em Enter. E como você pode ver, aqui estão diretamente minhas mudanças. Agora vamos duplicar essa guia e tentar novamente. Então, aqui na segunda guia, vou tentar sintonizar e pressionar Enter. E como você pode ver aqui na primeira guia, ele também foi atualizado, o que significa que implementamos com sucesso um recurso de atualização do título de um quadro do início ao fim. 39. Excluir placa: Neste vídeo, implementaremos a exclusão do ponto. E, na verdade, esse recurso será super semelhante ao nosso recurso anterior com a atualização suficiente da nossa placa, este é y. Vamos implementá-lo muito rápido como sempre. Coloque um para começar com nosso servidor. Aqui é y. Vamos pular para dentro da fonte do servidor. E aqui estamos interessados em nossos eventos de soquete. E, na verdade, exatamente como essa atualização, precisamos de três novos eventos para exclusão. Aqui é você, vamos criar três novos eventos. É port delete boards para seu sucesso e fracasso. E vamos mudar à direita, nossa string two boards delete. Em seguida, os painéis excluem o sucesso e os painéis excluem Agora vamos nos inscrever nosso evento para este salto bônus dentro do nosso servidor. E aqui podemos copiar, colar o sucesso do nosso conselho e alterá-lo para nossos quadros. Excluir. Aqui queremos usar um novo método, não atualizar a placa, mas excluir a porta. Agora vamos pular para o nosso controlador e criar esse método dentro do controlador da nossa placa. E, na verdade, para isso, eu quero copiar totalmente e colar nosso método de atualização porque uma exclusão será super semelhante. Então, primeiro de tudo, vamos mudar o nome. É delete board e é um método assíncrono. Agora, dentro de nossos dados, a única coisa que precisamos não é um d do nosso conselho. Aqui é onde eu comprei o D é suficiente aqui, mas não preciso fornecer mais nada porque simplesmente excluímos nossa placa por d. E para back-end, é informação suficiente. Agora, aqui dentro, temos try-catch como sempre, e estamos verificando nosso usuário de soquete. Mas aqui, em caso de erro, queremos lançar outro erro e será falha de exclusão de placas. Aqui. Vamos também mudar nossa gaiola. Também será falha na exclusão das placas do DOD. E agora precisamos mudar nosso modelo lógico sussurrado, porque aqui fizemos uma atualização. Agora temos a movimentação do Azure e na verdade, não queremos receber nada de volta, mas simplesmente queremos remover essa ligação por d. E, para isso, podemos usar métodos diferentes. Por exemplo, podemos usar find one e delete. Isso é totalmente bom. Isso é exatamente como fizemos na atualização interna. Mas, na verdade, você também pode usar diretamente sem açúcar, exclua um. E este é um método apenas para você saber dentro de delete one, devemos fornecer um objeto com campos pelos quais queremos encontrar o sensível. E, na verdade, aqui podemos apenas fornecer id de sublinhado igual a e d Agora, no caso de ser AD de quadro de pontos de dados, e na verdade não importa se você está usando delete one ou find até o final delete, está funcionando exatamente o mesmo. Portanto, essa linha remove com sucesso nosso quadro. E depois disso, queremos emitir nosso sucesso de remover. É aqui que, para todos os nossos usuários dentro desta porta, queremos emitir placas, excluir o sucesso. E, na verdade, aqui não precisamos fornecer um ID do nosso quadro, porque todos esses usuários estão dentro desse quadro específico e sabem qual placa foi removida e devem ser redirecionados para a página inicial. porque eles não podem ficar no conselho que um dos clientes removeu. Portanto, nossa lógica de servidor está completamente pronta. Agora vamos voltar ao nosso cliente e exatamente como antes. Em primeiro lugar, queremos começar com eventos compartilhados e com nossos soquetes. E copiarei e colarei de nossos eventos de soquete, três eventos, sucesso e falha de exclusão do quadro e colarei aqui na parte inferior. Agora devemos entrar em nossos serviços, serviço de diretoria, porque aqui queremos criar um novo método para remover uma placa. É aqui que vamos copiar e colar nosso quadro de atualização e alterá-lo para o ponto de exclusão. E a única coisa que precisamos é do nosso conselho AT, não precisamos de nenhum campo aqui. E aqui queremos emitir nosso evento de exclusão de quadro. Então, vamos tentar aqui. Comprou delete e dentro forneceremos um objeto com apenas um campo. De fato, é o ID do nosso conselho. Agora, dentro de nosso aplicativo, podemos chamar essa placa de exclusão e ela lançará uma visão final corretiva do Socket Layer. Agora vamos atualizar nosso componente. Então, eu quero voltar para dentro do nosso quadro. Componentes comprados em HTML. Aqui temos nosso formulário em linha. E depois deste formulário embutido, devemos criar um ícone que excluirá o quadro. Aqui é onde, digamos, classe div Delete Board. E aqui teremos nosso evento de clique e desclique em Poupon para excluir nosso ponto. E, na verdade, não precisamos fornecer nada interno porque temos o NAD da nossa placa dentro do nosso arquivo de teste. Então, aqui eu quero fechar nossa div e experimentá-la dentro do código Delete Board. Agora devemos pular dentro do nosso arquivo ts e criar esse método aqui na parte inferior. E o que queremos fazer dentro do nosso quadro de exclusão, basta ligar para o nosso serviço. Bem, aqui sabemos que é um vazio e queremos chamar um serviço. Mas, na verdade, além disso, quero escrever aqui uma confirmação porque devemos ter certeza de que os usuários realmente desejam remover uma placa. Então, vamos tentar aqui. Se confirmar e se você não souber o que está confirmado, este é um pop-up Javascript padrão dentro do navegador, que mostrará um sim ou não. Então, aqui queremos escrever algo como tem certeza de que deseja excluir o quadro? E se a resposta for sim, então entraremos nessa peneira e chamaremos esse serviço de bordo. E aqui temos o ponto de exclusão onde podemos fornecer o AD da nossa placa. E agora você pode pensar, ok, devemos atualizar agora nosso serviço de diretoria. Mas não precisamos fazer isso porque, na verdade, é muito mais simples. O que queremos fazer Poupon para se inscrever aqui no nosso evento de soquete, que será excluído com sucesso. Vamos fazer isso agora. Para isso, queremos copiar e colar nosso serviço de soquete, ouvir e ouvir boop, quero ouvir o void porque back whoop não receberá uma placa. Sabemos que isso é apenas o sucesso da exclusão do nosso conselho. É aqui que o evento será comprado, excluirá o sucesso e voltará quando não conseguir nada. E a questão é: o que queremos fazer por dentro e, na verdade, simplesmente queremos redirecionar o usuário para nossa página inicial. Por que isso? Porque, na verdade, temos um ouvinte aqui no topo da navegação Iniciar, que na verdade significa que no momento nosso usuário está indo para outra página, por exemplo, para a página inicial, nós lidaremos com a transmissão ao vivo por meio de nosso serviço de diretoria e removeremos todos os fluxos corretamente. Aqui é o que queremos fazer dentro da nossa assinatura, basta escrever este ponto do roteador navegar por URL. E aqui temos, por exemplo, placas de barra, que na verdade significa que a placa não existe. Devemos mostrar para cada cliente uma lista de possíveis placas disponíveis. Vamos verificar se esse código está funcionando. Como você pode ver, não temos nenhum erro no cliente. Não temos erros no back-end. Vamos abri-lo agora no navegador. E como você pode ver, nossa página ainda está funcionando. E agora temos esse quadro de exclusão. Mas, na verdade, não quero remover essa parte porque construímos muitos testes aqui. Mas eu quero fazer, eu quero pular de volta para dentro de nossas pranchas e criar uma nova placa, por exemplo, para remover. Nesse caso, podemos testar essa funcionalidade nessa nova barra vazia. Mas queremos fazer agora, queremos duplicar essa guia apenas para verificar se ela funcionará para o segundo usuário. Então, o que eu quero fazer agora, eu quero clicar em Excluir ponto e, como você pode ver, eu vejo uma confirmação. Garanto que você quer deletar um quadro onde estiver escondido, ok? E onde há regularidade reagiu aos nossos conselhos. E como você pode ver aqui, não temos nosso quadro porque ele foi bem-sucedido ou removido. E como você pode ver na segunda guia, onde todos os dígitos direcionados para nossa parte de barra porque todos os nossos clientes dentro desta sala foram notificados sobre o sucesso na remoção da placa e eles devem ser rejeitado em nossa página de fóruns. E como você pode ver, nossa arquitetura é tão incrível que podemos criar novos recursos em questão de minutos. 40. Excluir coluna: Neste vídeo, devemos implementar a exclusão de nossa coluna. E, na verdade, aqui temos uma coluna dentro do nosso quadro e a massa perto do título mostra o ícone para excluir uma coluna. E, novamente, ele deve ser implementado com o soquete IO. Portanto, notificaremos outro usuário sobre nossa exclusão. E eu acho que é um recurso muito bom que você pode implementar por conta própria, porque será muito semelhante a excluir em um pássaro. E aqui está uma ajuda da minha parte. Em primeiro lugar, como sempre, devemos no back-end, implementar novos eventos e registrar o evento use socket. Depois disso, devemos criar uma nova ação do controlador que é colunas. Por exemplo, excluir coluna. Também devemos fazer sentido apenas com o cliente. Em primeiro lugar, registro e novo evento. Em seguida, reunimos um novo método dentro do serviço de coluna que pode ser compartilhado para remover uma coluna. Depois disso, devemos atualizar nosso componente para adicionar um botão no qual removeremos essa coluna específica deste ponto. E, na verdade, isso é apenas uma reunião do evento para o back-end. E também devemos assinar o sucesso para remover essa coluna em todos os nossos clientes. E aqui está a marcação do botão. Então você sabe o que precisa implementar. Como você pode ver aqui, estou dentro do componente HTML da placa. Aqui temos os títulos das nossas colunas e logo após o título, queremos escrever aqui uma imagem com a fonte. E aqui teremos ativos de barra, barra estreita sublinhado, ícone ponto SVG. E aqui podemos fechar nossa imagem, mas também devemos fornecer aqui uma classe que será o ícone de exclusão de coluna. Vamos verificar isso. Estou recarregando a página e aqui agora temos uma bela cruz. E é exatamente aqui que você vinculará o evento de clique. Mas se você quiser apenas acompanhar, vamos implementar isso juntos. E, na verdade, como eu disse, será muito parecido com a exclusão do quadro. Aqui é y. Vamos fazer isso rápido e furioso. Então, primeiro de tudo, quero começar com nosso backend e salto de biomassa aqui dentro de nossos tipos de fonte de servidor. E aqui temos nossos eventos de soquete. E, novamente, temos aqui os quadros deletar, posso copiar e colar e apenas alterá-lo para excluir colunas. Aqui é y aqui à esquerda, teremos colunas excluídas e à direita, em vez de placas escreveremos colunas em todos os lugares. E também devemos mudá-lo em sucesso e fracasso. Então, nossos eventos estão lá. Agora devemos pular dentro de nossas camadas de servidor que aqui e usar socket aqui em vez de placas delete, eu quero escrever colunas delete, que acabamos de criar. Aqui. Em vez do controlador de placa, devemos usar nosso controlador de colunas. Aqui não excluiremos um quadro, mas excluiremos nossa coluna. E agora somos o método de exclusão de coluna mostarda dentro do nosso controlador de colunas. Mas eu não quero redigitar nada porque o código é exatamente a mesma perna de exclusão do quadro. É aqui que podemos copiar, colar completamente esse quadro de exclusão e colá-lo dentro do nosso controlador de colunas , pois será 99% o mesmo. Então, em primeiro lugar, a questão é o que devemos obter aqui como parâmetro? Aqui já estamos, eu entro no AD e eles também querem obter aqui a coluna que eles D, porque precisamos saber o que estamos excluindo. E você pode dizer aqui, ok, mas por que precisamos da pobre dama? Só precisamos de uma coluna e na verdade, não, porque devemos notificar todos que se inscreveram neste anúncio específico do conselho. É por isso que devemos fornecer os dois valores aqui. Depois disso, estamos verificando aqui o nosso usuário e aqui devemos atender a um evento de falha. No nosso caso, será falha de exclusão de colunas. Aqui este usuário não está autorizado, e aqui temos nossa captura e podemos usar aqui as mesmas colunas delete failure com nossa mensagem de erro get. Aqui. Em vez do modelo de placa, usaremos nosso modelo de coluna. Aqui estamos excluindo um registro por ponto de dados, e aqui estará o ID da coluna porque devemos excluir nossa coluna não nasceu e depois dessa forma alcançamos nosso sucesso. Mas aqui vamos tentar o sucesso para a exclusão de nossa coluna, e aqui será o sucesso. E, na verdade, já estamos prontos com nosso back-end. O que eu quero fazer agora é copiar e colar esses eventos de soquete porque vamos usá-lo no cliente. É assim que copiarei e colarei colunas, excluirei o sucesso e o fracasso, e que o Champion desativado defina o aplicativo de origem dos clientes. E aqui temos tipos compartilhados e aqui estão nossos eventos de soquete onde dentro podemos colar colunas, excluir. Nosso próximo passo será as colunas de serviços compartilhados tub Data, Service, Insight. Porque queremos implementar a coluna de exclusão exatamente aqui. Podemos escrever um novo método delete column, e sabemos que estamos obtendo aqui nosso ID de placa, que é uma string, e também nosso ID de coluna, que também é uma string. E estamos ficando com um grande vazio porque só queremos emitir nosso evento de soquete. É por isso que aqui podemos escrever este serviço de soquete e atender, e estamos usando aqui nossos eventos de soquete em m colunas de pontos delete. E devemos fornecer como um segundo parâmetro e um objeto com o AD do nosso quadro e também o ID da coluna, que estamos obtendo dos parâmetros. Depois disso, devemos atualizar nosso serviço de diretoria. E só para lembrá-lo, furar serviços exatamente onde estamos armazenando nosso fluxo de colunas. O que realmente significa que aqui devemos implementar a exclusão da coluna. Então, aqui na parte inferior, eu posso criar o método delete column. E aqui só precisamos do nosso colunado. Não precisamos da ideia do Board porque chamaremos esse método apenas do componente para atualizar nosso stream. Então, aqui sabemos o ID da coluna que queremos excluir e, de volta, estamos sendo anulados, e agora queremos atualizar a lista de nossas colunas. Este é o caminho aqui. Podemos criar colunas atualizadas de uma propriedade. E aqui podemos acessar nosso stream com essas colunas stream. Aqui estamos obtendo nosso valor. E depois disso, queremos filtrar nossa matriz. E, na verdade, aqui estamos obtendo acesso a cada coluna e queremos rejeitar esse ID de coluna específico. É por isso que aqui podemos verificar se o ID da coluna não é igual aos nomes das nossas colunas, que foram passados como um parâmetro. Neste caso, estamos obtendo exatamente a mesma lista de nossas colunas, mas sem essa coluna. E depois disso, precisamos apenas atualizar nosso stream. Para isso, podemos escrever essas colunas seguir e estamos jogando dentro de nossas colunas atualizadas. Então, na verdade, esse método atualizará nosso fluxo e removerá uma coluna do fluxo. O próximo passo é atualizar nosso componente. E, na verdade, já mudamos nosso HTML. Aqui agora temos uma imagem, mas devemos anexar, ouvir um evento de clique. E aqui o que eu quero fazer, eu quero excluir uma coluna. É assim que podemos fornecer um método delete column, e devemos passar dentro do com dot id. E aqui no topo, como você pode ver, temos acesso à nossa coluna. Agora podemos pular dentro do nosso componente e criar esse método. Portanto, a coluna Dalit está recebendo apenas um único argumento, que é o ID da nossa coluna que queremos remover e banco onde será anulado. E agora, por dentro, simplesmente queremos ligar para o nosso serviço compartilhado. Então aqui estará este mundo de serviço de coluna ou o Herodes. Agora, aqui temos uma coluna de exclusão de método dentro. Devemos fornecer um AD de placa e, na verdade, são esses AD do quadro e, em seguida, o ID da coluna. Portanto, essa linha de código emitirá um evento para nosso back-end para remover essa coluna e notificar todos os nossos clientes. E agora só precisamos nos inscrever dentro da nossa assinatura aqui no topo que queremos atualizar nossa lista de colunas. É aqui que aqui, na verdade, podemos copiar e colar algo semelhante e as colunas soldadas aqui criam sucesso. Vou copiar, colar e colar aqui na parte inferior. E aqui nós excluímos e na verdade, excluímos com não fizemos isso corretamente. Eu quero pular de volta para dentro de nossas colunas de controle. Como você pode ver aqui, temos o quadro de dados i2 que eles emitem, e aqui eu apenas mudei o nome colunas delete success, mas não é suficiente. Devemos fornecer aqui alguns dados porque, na verdade todos os nossos clientes devem saber qual coluna devemos remover. É aqui que aqui como o segundo parâmetro, eu quero fornecer coluna de pontos de dados que eles aprofundam. E, neste caso, recebemos informações suficientes para todos os nossos clientes sobre a exclusão de nossa coluna. Agora podemos voltar para dentro do componente do quadro e aqui está nossa escuta. E, na verdade, aqui estamos ouvindo nossas colunas, exclua o sucesso. E aqui o que estamos recebendo de volta não é uma coluna, mas apenas a string que queremos remover. É por isso que aqui podemos escrever que esse é o ID da coluna e na verdade, são informações suficientes para o cliente remover uma coluna. É por isso que aqui agora podemos ligar para o ponto de serviço do conselho. E aqui temos nossa coluna de exclusão. E por dentro, como você pode ver, estamos fornecendo a coluna D, e isso é exatamente o que temos aqui do nosso back-end. Então, na verdade, implementamos tudo para o nosso recurso. Vamos verificar se está funcionando. Em primeiro lugar, vamos verificar se o back-end que temos aqui é um problema. Excluir coluna não existe no tipo e aqui estão as colunas. Vamos verificar isso. Vou pular de volta para dentro de nossos controladores, e aqui temos nossa placa de exclusão. Então esse é o problema. Copio o método Delete Board colado, mas eles não o renomearam. Deve ser a coluna de exclusão. Vamos verificar isso de novo. Estou salvando e pulando no console. E como você pode ver agora, não temos nenhum erro. Agora vamos verificar nosso cliente. Tudo está parecendo bem. Então, vamos pular para o nosso quadro. Como você pode ver, nossas páginas estão funcionando. E agora aqui posso clicar para remover, por exemplo, essa coluna completa. Estou clicando nele e, como você pode ver, ele desapareceu completamente. E o que é mais interessante, podemos duplicar a guia e tentar remover a próxima coluna, F, F, d, d e assim por diante. Estou batendo aqui cruzado e ele é removido não só aqui, mas também nesta guia. E tudo é atualizado automaticamente, o que significa que implementamos com sucesso remoção das colunas dentro do nosso aplicativo. 41. Atualizar a coluna: Neste vídeo, devemos implementar um dos últimos recursos relacionados ao nosso quadro, e isso é a atualização da coluna. E como você já pode entender, será muito parecido excluir a coluna. A única diferença é que teremos um interior do atualizado, mas muitas coisas permanecerão exatamente iguais. Onde uma reunião, eu sou um evento de soquete onde colocá-lo no back-end e quando definimos todos os nossos clientes, este é y. Vamos implementá-lo juntos agora, antes de tudo, eu quero voltar para dentro do nosso servidor tipos de origem. E aqui devemos criar eventos internos de soquete em novos tipos e hairball para a nota das colunas principais, posso copiar, colar e renomear atualização de duas colunas. Então, aqui teremos colunas Atualização, atualizações de colunas, sucesso e fracasso. Aqui à direita. Em seguida, podemos alterá-lo para atualizar. Em seguida, um sucesso na data de nascimento e uma falha de atualização após este lítio de volta para nossa irmandade S e aqui e seu próprio evento. Então, aqui eu copio a exclusão de coluna colada e vamos alterá-la para nossa atualização de colunas que acabamos de criar. E aqui estamos usando nosso controlador de colunas, mas aqui estamos recebendo não excluir coluna , mas atualizar coluna. Agora devemos criar essa ação, mas na verdade podemos copiar e colar de nossos quadros porque aqui já estamos implementados placa de atualização e será super semelhante. É por isso que eu quero copiar colado completamente e colar na parte inferior dentro do nosso controlador de colunas. Aqui com primeiro de tudo, deve mudar a nomenclatura. Então, aqui temos nossa coluna de atualização e, na verdade, quero mantê-la exatamente igual com a pobre senhora e os campos. Portanto, temos exatamente a mesma estrutura. É aqui que a única coisa que precisamos é o ID da coluna, que é uma string. E o único campo que estamos atualizando aqui é nosso título. Agora vamos mudar nosso conteúdo. Aqui teremos eventos de soquete em m e aqui foram criadas falhas de atualização da coluna. E vamos mudar também o nosso problema aqui também será a falha na atualização da coluna. Agora devemos mudar nossa lógica. Em vez do modelo de Bohr, teremos aqui o modelo de coluna e estamos sendo multados até o final da atualização. Isso é totalmente bom. Mas aqui não queremos obter um quadro, mas uma coluna por ID de coluna. E aqui temos campos de dados. Isso é completamente normal e retroceder a coluna atualizada e não o quadro atualizado. Agora, aqui queremos emitir para todos os nossos clientes nosso evento, que será um sucesso de atualização de coluna. E aqui devemos fornecer nossa coluna atualizada para que eles possam alterá-la no cliente. Nosso backend é bem-sucedido, mudou. Agora devemos atualizar nosso cliente. E antes de tudo, quero copiar colar esses três novos eventos, que são atualização de colunas, sucesso e fracasso. Agora, vamos voltar ao aplicativo de origem de nossos clientes. E aqui não dissemos que dispensamos nossos tipos de eventos de soquete. E aqui na parte inferior vou adicionar colunas de sucesso e fracasso de atualização. Agora queremos mudar nosso serviço de camisas, que é responsável por fazer solicitações à nossa API. Aqui estão as colunas de serviços e aqui já implementamos a coluna de exclusão, mas precisamos fazer agora é nossa nova coluna de atualização de método. Aqui já sabemos o que estamos recebendo. Estamos recebendo aqui nosso ID do conselho, que é uma string. Depois disso, estamos obtendo nosso ID de coluna, que também é uma string. E por último, mas não menos importante, estão nossos campos, que é um objeto com um título, que é uma string. E de volta estamos ficando vazios porque aqui simplesmente emitimos um evento. É aqui que o serviço de soquetes de ouvido Datta se encontra e queremos usar aqui o soquete até mesmo vê-los ponto. E aqui temos nossa ação de atualização de colunas como o segundo parâmetro. Devemos fornecer tudo. Em primeiro lugar, bordo AT segunda coluna carente. E por último são os filmes. E com isso, nosso serviço está totalmente pronto. Agora precisamos atualizar nosso serviço de diretoria para que possamos alterar nosso componente. É por isso que vou entrar em nosso aplicativo, serviços de diretoria, serviço de diretoria. E aqui já criamos um quadro de atualização de método. É aqui que vamos criar nosso método de atualização de coluna. E sabemos que esse grupo quer atualizar um único registro dentro do nosso array. E aqui a única coisa que queremos é uma coluna um pouco datada. Isso é o que obtivemos do nosso back-end. Aqui. Estamos recebendo toda a interface da coluna e, de volta, queremos anular. Agora, aqui está nossa ideia. Precisamos mapear cada coluna e atualizar essa coluna por dia. É assim que podemos recuperar nossas colunas atualizadas. E aqui queremos obter, antes de tudo, o valor do nosso fluxo. Então, aqui teremos nossas colunas obtendo valor e estamos mapeando por meio dessa matriz. Então aqui está o mapa e estamos obtendo acesso a cada coluna aqui dentro , devemos escrever nossa lógica. Portanto, se o ID da coluna que estamos percorrendo for igual ao nosso ID de ponto de coluna atualizado, então devemos fazer nossa mágica. E se não, simplesmente queremos retornar nossa coluna sem uma atualização. Agora, o que queremos fazer dentro do loop um para atualizar essa coluna específica. É por isso que quero mesclar nossa coluna com o título. E aqui estamos fornecendo um título de ponto de coluna atualizado. Neste caso, estamos atualizando apenas uma única jaqueta quando ela combina. Em outro caso, onde simplesmente retornar nossa coluna. Depois disso, só precisamos atualizar nosso stream com essas colunas a seguir. Somos fornecidos dentro de nossas colunas atualizadas, então nosso método está completamente pronto. Agora só precisamos atualizar nosso componente. Então, vamos voltar para dentro do nosso componente do quadro, e aqui temos o título da nossa coluna, mas em vez de apenas um título , devemos seguir a tendência aqui. Vamos experimentá-lo em linha, e vamos fechá-lo aqui diretamente. Agora, antes de tudo, aqui devemos definir nossa classe que será adicionada forma de coluna. Depois disso, devemos fornecer o texto padrão. E aqui queremos escrever o nome da nossa coluna, que será coluna, o título, mas também deve fornecer aqui um valor. Este é y, aqui estará o título, que é o título da nossa coluna. E o último é o nosso retorno de chamada, que é tratado como enviar. E, na verdade, esse método podemos nomear, atualizar, nome da coluna, e dentro estamos recebendo Festival, nosso evento, que na verdade é o nome da nossa coluna. E aqui também devemos fornecer o ID da coluna, porque não é o caso do Groupon saber para qual coluna queremos atualizar essa tela específica. Agora, vamos criar esse método dentro do nosso componente. Então, aqui na parte inferior, quero adicionar o nome da coluna de atualização. E aqui estamos obtendo, em primeiro lugar, nome da nossa coluna, que é a sequência da nossa diversão no interior. E em segundo lugar, estamos obtendo aqui nosso ID de coluna. Nesse caso, sabemos o que precisamos atualizar e o que queremos fazer aqui. Só queremos chamar nosso método de colunas de fragmentação. Este é y, aqui, este serviço de coluna, e aqui está nossa coluna de atualização de método que acabamos de criar. Em primeiro lugar, devemos fornecer aqui nosso ID do conselho, ID da coluna e também nossos campos. No nosso caso aqui, temos apenas um único campo, que será nosso título, que é o nome da nossa coluna. Do lado do cliente, tudo está pronto, mas devemos assinar o sucesso de uma data de nascimento na coluna. É por isso que devemos ir aqui no topo, agora um serviço de soquete. E, na verdade, aqui já temos nossa atualização do quadro, que na verdade significa que eu quero copiar e colar essas linhas e apenas alterá-las. Porque aqui de volta, obteremos nossa interface de coluna depois de atualizarmos nossa coluna. E, na verdade, aqui queremos nos inscrever para chamá-los de sucesso de atualização. E aqui estamos recebendo o quadro não atualizado, mas estamos recebendo o número da coluna atualizado devemos chamar outro método do nosso serviço de diretoria. E esse método será a coluna de atualização. E dentro estamos fornecendo nossa coluna atualizada, o que na verdade significa que, com esse código, todos os nossos clientes serão notificados e atualizaremos essa coluna específica. Vamos verificar se está funcionando aqui no back-end, está tudo bem. Aqui no cliente, não temos nenhum erro. Vamos para o navegador. E como você pode ver aqui, eu tenho esse nome legal e agora posso clicar nele porque esta é nossa empresa no interior e não apenas o título. Agora vamos tentar aqui, atualizado e eu estou pressionando Enter. E como você pode ver, ele foi atualizado e adiado carregando a página, então esse código também é mancha, o que na verdade significa que fizemos com sucesso essa alteração está no back-end e eles fizeram todos os nossos clientes. E aqui, se eu estiver pulando para a segunda guia, ela parece exatamente a mesma porque também foi atualizada e notificada por meio do soquete IO. Com isso dito, implementamos com sucesso nosso recurso de atualização na coluna. 42. Cancelar assinatura: Neste vídeo, quero falar sobre inscrição porque, na verdade, temos um problema. Vamos dar uma olhada em nosso teste de componentes de placa. Aqui temos nossos ouvintes de inicialização e estamos usando o dot subscribe várias vezes. E, na verdade, você deve saber que dentro do Angular toda vez que estiver escrevendo a palavra subscrever, você está em perigo porque está criando uma assinatura lá. E esta assinatura vai ficar lá até o fim do mundo. O que significa, por exemplo, que estamos deixando nossa prancha e pulando para outra prancha. E todas essas assinaturas já estão lá e nunca serão destruídas porque todas as assinaturas não têm nada a ver com o nosso componente e o angular não tem qualquer coisa sobre eles. Mas aqui é importante mencionar que, se estamos falando dentro do Angular sobre o cliente HTTP, não devemos cancelar a assinatura dele. Isso não é obrigatório porque angular cancelará a inscrição automaticamente, o que na verdade significa que aqui, quando estamos usando este roteador, os eventos se inscrevem, Isso é totalmente bom. Aqui também podemos ver nossos dados de busca e aqui também usamos a assinatura do nosso get bored. E para isso devemos abrir nosso get bored e verificar o que temos aqui. E, na verdade, este é um Gad bem grande, que é um cliente HTTP, o que na verdade significa que esse código é totalmente bom e não devemos cancelar a inscrição. Mas, na verdade, eu prefiro cancelar a assinatura em todos os lugares, em cada aplicativo em que uma assinatura C, porque você nunca sabe o que exatamente é esse método get board? É realmente um cliente HTTP ou é apenas um invólucro por aí? E você realmente precisa cancelar a inscrição. E a questão é como você pode cancelar a inscrição em seu aplicativo para torná-lo confortável. E há muitas maneiras de fazer isso. E, na verdade, sempre queremos cancelar a inscrição quando estamos destruindo um componente. E normalmente onde esse componente Turner, quando estamos mudando, o que na verdade significa que aqui podemos escrever algo como esta assinatura do conselho é igual. E aqui estamos obtendo o resultado de nossa assinatura e o resultado da assinatura fácil de assinatura, o que na verdade significa, por massa, criar essa propriedade e, em seguida, diretamente dentro do nosso mecanismo, destruir assinatura do Boards dot unsubscribe. Isso é totalmente válido, mas depois criaremos muitas propriedades e isso não é tão confortável. É por isso que existem maneiras melhores de fazer isso. Eu queria mostrar uma abordagem simples que você pode usar. O que eu quero fazer dentro do meu componente do quadro, eu quero criar mais uma propriedade e eles querem nomear essa propriedade unsubscribe. E, na verdade, eu quero colocar aqui dólar porque será um fluxo. E aqui eu quero atribuir um novo assunto e na verdade, também o assunto comportamental juvenil dentro do nosso serviço do conselho. Mas aqui temos um novo assunto com vazio, e estou apenas chamando, a principal diferença entre sujeito e sujeito comportamental é que o sujeito comportamental sempre tem um valor inicial e então digamos, sujeito, não temos nenhum valor inicial. Agora, aqui queremos adicionar implementos em destruir, o que na verdade significa que devemos criar em G ao destruir. E agora estamos falando sobre isso na Alemanha. E aqui podemos escrever em junho destruir e o que queremos fazer por dentro, queremos escrever este ponto de cancelamento de inscrição a seguir, então estamos na coluna o próximo valor. E depois disso, esse ponto de cancelamento de inscrição foi concluído, o que significa que depois que destruímos esse componente, não queremos obter novos valores dentro desse cancelamento de inscrição. E agora podemos usar esse cancelamento de inscrição em qualquer lugar para ignorar assinaturas. Como isso parece? Na verdade, aqui, não precisamos usá-lo, mas devemos usá-lo dentro do serviço de soquete porque é uma assinatura personalizada. E para fazer isso antes de nossa assinatura, podemos apenas experimentá-lo ponto pipe e dentro queremos usar o método take until e dentro eles querem colocar esse cancelamento de inscrição que acabamos de criar, o que na verdade significa que aqui estamos pegando, ok, devemos adotar novos valores e ter essa assinatura até que esse cancelamento seja válido. No momento em que formos Colin com vínculo completo, venha aqui para nossa assinatura. O que na verdade significa que, em todos os casos , quando temos uma assinatura, podemos experimentá-la antes aceitando até esse cancelamento. E estamos prontos para ir atrás que nossos componentes sejam destruídos. Aqui teremos o completo e essa lógica nunca acontecerá. Essa é realmente uma variante confortável e fácil implementar, cancelar a inscrição. É por isso que eu quero copiar, colar esse código e colocá-lo em todas as lições que estamos escrevendo aqui antes de me inscrever. Neste caso, estamos no lado seguro, e não chamaremos esse código depois de destruir um componente. Agora você com certeza quer saber se está realmente funcionando assim. É por isso que, para testá-lo, podemos simplesmente comentar até , por exemplo, em colunas, acesso a atualizações. Mas na verdade não vai funcionar assim porque quando estávamos saindo do conselho, Bacon para de enviar eventos para perguntar, é por isso que o que podemos fazer apenas para testar é defendido dentro das colunas dos controladores. E aqui está nossa coluna de atualização de método, e aqui temos nossa função são suas duas. E aqui precisamos encontrar apenas clientes onde eles estão dentro dessa parte específica. Apenas por uma questão de teste, removerei aqui para notificar todos os clientes , porque eles querem mostrar que essa assinatura ainda está lá quando saímos do conselho. Então, agora aqui eu quero apenas tentar o log do console. Coluna atualizada. Aqui está nossa coluna atualizada. Vamos verificar isso. Estou recarregando a página, estou pulando para esse ponto e estou tentando atualizar a coluna. Como você pode ver, este é o nosso log do console, e aqui também temos o log do console. Está tudo bem. Mas agora estamos voltando para nossas pranchas e não temos nada e nosso componente foi destruído. Agora, aqui na segunda guia, atualizaremos essa coluna. E como você pode ver aqui, insira o primeiro passo. Temos esta coluna atualizada e estamos recebendo porque esta assinatura ainda está pendurada com não inscrição do nosso código e denotado para fazer isso, podemos apenas descomentar até, Vamos tentar isso. Agora, aqui estamos entrando em nosso aplicativo. Estamos recebendo, atualizamos a coluna onde o campeão volta às nossas pranchas. E agora aqui podemos tentar atualizar nossa coluna. Mas, como você pode ver agora na primeira etapa, não recebemos uma mensagem porque aqui ela não passou por essa tomada até, é por isso que é tão importante cancelar a inscrição de todas as nossas assinaturas. Agora vamos mudar esse código de volta. Em primeiro lugar, não precisamos desse log do console. E em segundo lugar, vou pular dentro das colunas do nosso controlador e alterar o código de volta para o ID do banco de dados i2. Portanto, no aplicativo real, eu recomendo que você cancele a inscrição de todas as suas assinaturas. 43. Módulo de tarefa e componente básico: Neste vídeo, iniciamos recurso novo e interessante e depois falamos aqui sobre o modelo de tarefa de recurso. O que isso tem um significado? Na verdade, como você pode ver aqui, onde dentro do quadro e quando clicamos em tarefa específica dentro deste ponto, na verdade, devemos abrir aqui um modelo, mas não é tão simples assim, porque o que queremos Para fazer isso, queremos mudar nosso roteamento. Então agora temos slash board slash board Id. E, na verdade, quando abrimos uma tarefa após o recarregamento da página, queremos ver a mesma tarefa. E a maneira mais fácil de implementar isso é obviamente o roteamento. Então, queremos, no momento em que abrirmos um URL de tarefa como barra barra ID do quadro de barras tarefas de barra tarefa de barra KD, o que na verdade significa que temos uma rota aninhada dentro do quadro. E, na verdade, Angular nos permite muito simples administrar as secas das crianças. Por que precisamos aqui de uma seca infantil? Porque eles realmente aqui queremos antes de tudo renderizar todo o quadro e, adicionalmente, renderizar esse modelo, o que na verdade significa que nosso modelo, estará aqui na parte superior e abaixo do nosso modelo, veremos todo o conselho. E isso é extremamente importante porque, na verdade, vamos, mesmo dentro do modelo, buscar o quadro inteiro. E, na verdade, todo esse componente será renderizado Assim como está, sem nenhuma alteração. E o que também é interessante dentro do nosso modelo de tarefas, usaremos essas informações do conselho, e é exatamente isso que implementamos aqui. Aqui dentro de nossa fonte de cliente, aplicativo, serviços de placa, serviço de bot, temos três fluxos. Nossa coluna de tarefas e, mas, e isso é incrível, porque agora dentro do nosso modelo de tarefas, podemos ler todas as nossas tarefas, encontrar a tarefa necessária por esse ID dentro da URL que implementaremos em um segundo e depois apenas renderize essas informações da tarefa sem solicitações adicionais. E neste vídeo, quero começar com o básico desse modelo de tarefa. Aqui queremos criar um componente básico e vincular corretamente nossa rota. E para isso, quero voltar para dentro do nosso módulo de placa. E aqui temos nossa rota com slash boards, slash board Id. E aqui queremos ter uma seca infantil. É aqui que podemos escrever filhos e isso é uma matriz. Aqui também temos um objeto com caminho, que será uma barra de tarefas. E aqui está o ID da tarefa, o que na verdade significa que estamos seguindo o caminho pai e nosso caminho filho. E juntos teremos nosso caminho de ID de tarefa aqui, mas também devemos fornecer um componente que criaremos em um segundo. E é o nosso componente do modelo de tarefas. Mas também não implementamos a mudança de nossa rota. E para isso, quero pular dentro da nossa placa de componentes. E aqui está comprado componente HTML. E como você pode ver aqui, temos um link para nossa tarefa. Esta é a tarefa da classe div, e aqui está energia para loop. E, na verdade, aqui queremos escrever um evento de clique. E aqui o que queremos fazer, queremos abrir a tarefa. E para isso só precisamos da nossa tarefa dot id. E o que queremos fazer dentro desse método é apenas mudar uma rota. Este é o caminho aqui. Vamos criar essa tarefa aberta dentro do componente do quadro. E aqui estamos obtendo nosso ID de tarefa, que é uma string. A parte de trás está ficando vazia. E agora aqui podemos simplesmente usar nosso roteador para alterar a rota. Então, aqui podemos escrever este roteador dot navigate, e estamos usando aqui navigate e não navigate por URL porque queremos passar dentro de um array. Aqui. Primeiro, temos placas, depois concatenamos essa string com esse ID de placa, depois vírgula. E temos aqui nossas tarefas, e aqui teremos nosso ID de tarefa. Como você pode ver, é muito mais simples escrever navigate with array e depois navegar por URL, onde devemos concatenar essa string nós mesmos. Portanto, nosso evento click está completamente pronto, e agora só precisamos criar esse novo componente. É por isso que dentro da nossa placa e ainda estamos falando sobre os componentes da inserção do módulo da placa. Queremos criar nosso novo componente e ele será nosso modelo de tarefa. Agora dentro com primeiro de tudo, precisa criar uma tarefa Modelo Ts e também modelo de tarefa componente ponto ponto HTML. E agora, aqui dentro do HTML, quero fixar diretamente toda a marcação do nosso modelo sem qualquer lógica. Nesse caso, podemos ver diretamente que o termo modelo está funcionando e o roteador também está funcionando. É aqui que vamos escrever todo o mercado. Então aqui, antes de tudo, temos nosso contêiner de modelo de tarefa de classe, e aqui não vincularemos nenhum dado ainda. Agora, dentro dessa div, devemos experimentá-la mais profundamente, e será nosso cabeçalho modal de tarefas. Vamos fechar essa div e, dentro dela, renderizaremos mais tarde o título da nossa tarefa em forma de linha. E depois da nossa forma interior, precisamos aqui para renderizar uma imagem. E, na verdade, aqui estarão os ativos de barra de origem barra fechar ícone ponto SVG. E aqui também precisamos fornecer uma aula que será tarefa. Modelo fechado e, na verdade, eu escrevi não corretamente. Esta imagem deve seguir o título da nossa tarefa em linha firme. Então, estamos falando aqui sobre o cabeçalho modal da tarefa. E depois do cabeçalho modal dusk, queremos criar o próximo div, que será o corpo modal Task. Vamos fechar aqui nossa div e por dentro queremos criar um motivo porque precisamos agrupar nossos elementos. Então, dentro dessa div, queremos criar nosso formulário mais tarde. Você pode perguntar, ok, mas por que aqui estamos usando a empresa Justin Lin e aqui queremos criar uma empresa real porque, na verdade, aqui mais tarde, também precisaremos de um select para alterar nossa coluna. É por isso que é muito mais fácil de usar neste fórum. Aqui é você. Vamos criar um formulário por enquanto sem nenhum grupo firme, basta bater o copo. E aqui teremos nosso contêiner de seleção de coluna. Vamos fechar esse formulário. E dentro do nosso formulário mais tarde, renderizaremos aqui um select, mas por enquanto não o temos. Aqui é onde aqui, basta selecionar a coluna. E depois disso, a empresa desejará criar um motivo em que teremos a descrição do nosso modelo de tarefa. E aqui teremos nossa div com o rótulo de descrição do modelo de tarefa de classe. E então, do lado, simplesmente escreveremos uma descrição de palavras. Após essa div, teremos um formulário embutido para nossa descrição. Então, aqui está a descrição do formulário em linha que criaremos mais tarde. E agora, após essa div que criamos , precisaríamos criar um motivo. E aqui teremos nossas ações de modelo de tarefa dentro, antes de tudo, precisamos de uma classe adicional e serão ações de modelo de tarefa rotuladas e dentro dessa div, simplesmente escreveremos ações. E depois disso, precisamos criar mais uma div. E dentro dessa div, vamos empacotar um motivo com classe, tarefa, modelo, ações, ação. Aqui, vamos fechar esse div e, em seguida, dentro podemos renderizar uma imagem com fonte slash acids slash trash SVG. E aqui está a nossa classe que será encarregada ícone de ações do modelo. E depois do segundo, nós apenas renderizaremos uma palavra delete. E depois de toda a marcação no final, precisamos renderizar um pano de fundo, todo o nosso quadro fique um pouco escondido. É aqui que devemos criar div com pano de fundo do modelo de tarefa de classe aqui Vamos fechar esta div para que nossa marcação esteja completamente pronta. Agora, só precisamos criar esse componente. Vamos primeiro criar aqui uma classe e ela será nosso componente modal de tarefas. No topo foram dominados nosso componente, e vamos nos registrar lá dentro. Primeiro de tudo, um seletor, será encarregado modelo. E depois disso, um URL de modelo e soldado, mais pesado é HTML componente modal tarefa, mas não é tudo. Devemos fornecer mais uma classe para todo o invólucro desse componente. Somente nesse caso, nosso mercado estará correto. E aqui devemos encadernar diretamente o host. E aqui estou dando aula de insights. Aqui podemos escrever classes iguais ao modelo de tarefa. E se você nunca escreveu algo assim, estamos usando essa notação quando não precisamos aplicar essa classe a algum profundo dentro desse componente, mas queremos que o aplique exatamente uma classe em nosso elemento componente. Então, fizemos alguns componentes básicos. Vamos verificar agora se está funcionando. Então Festival aqui temos muitos erros. Por exemplo, aqui no módulo da placa não é possível encontrar componente modal de tarefa. Então, primeiro de tudo, aqui devemos pular dentro do nosso módulo de placa. E aqui precisamos inserir nosso componente de modelo de tarefa. E também devemos fornecê-lo aqui dentro da declaração, este é o componente do modelo de tarefa. Vamos verificar novamente com não há erros aqui. Vou recarregar a página e eles não verão nenhum erro dentro do console agora. Mas o que devemos fazer agora, precisamos clicar em uma das tarefas. Por exemplo, aqui está minha primeira tarefa e estou apenas clicando. E como você pode ver, nada aconteceu. Mas dentro da seca, podemos ver agora cortar placas, cortar nosso ID do conselho, cortar tarefas e cortar o d da nossa tarefa que acabamos de abrir. E agora você pode perguntar, ok, mas por que não vemos nosso componente e, na verdade, não tendemos a saída para nossos filhos, que na verdade significa dentro de nossa placa, dentro do componente HTML, em algum lugar dentro da nossa marcação, por exemplo, na parte inferior, devemos renderizar a saída Zhao exatamente como fizemos dentro do nosso componente de aplicativo. Então, aqui vamos fechar a tomada do roteador e agora ele deve funcionar. Vou recarregar a página. E como você pode ver, vemos nosso modelo por isso porque, na verdade, essa é a rota. E agora, toda vez que estou recarregando a página, vemos nosso pai em segundo plano. E aqui vemos nosso modelo e na verdade, já temos algumas marcações básicas para esse modelo, o que significa que ele está funcionando totalmente. Mas agora eu quero consertar uma grande armadilha que será muito difícil de depurar o que estou falando. Como você pode ver aqui dentro do nosso componente do quadro, aqui temos uma verificação de rota e, na verdade, aqui no topo, assinamos as estrelas de navegação deste evento. E aqui estamos desencadeando nascidos vivos. O que o live board está fazendo? Na verdade, aqui estamos encontrando um evento de soquete para nosso back-end, o que na verdade significa que estamos cancelando a inscrição neste soquete atual, nosso usuário atual de você foi neste ponto, que na verdade significa que aqui estávamos neste ponto, slash board slash AD. E agora estamos recebendo eventos. Está tudo bem. Mas no momento em que abrimos nosso modelo, mudamos. E, na verdade, isso significa que estamos aqui neste IV e aqui vemos ao vivo o que podemos facilmente verificar. Por exemplo, aqui vou tentar ao vivo, mas estou recarregando a página. Parece bom. Mas quando estou pulando nossas pranchas e depois clico na minha primeira tarefa. Como você pode ver aqui, estamos recebendo licença. Isso foi completamente redesenhado porque, nesse caso, não receberemos nenhuma notificação em nosso quadro, mas já saímos do quadro. Esse é o comportamento do Sean porque não queremos viver como um conselho. Se apenas abrirmos o modelo, ainda queremos estar nesta página, mas podemos fazer para corrigi-lo, na verdade só precisamos verificar nossa rota de slash boards. Porque, na verdade, se aqui dentro da seca tivermos slash boards slash, isso significa que ainda estamos nesta página. Porque se estamos voltando para nossa página de quadros, então aqui temos apenas placas de barra e não temos uma barra. E então é aqui que eu posso escrever URL end not event dot. E esse é todo o URL para o qual vamos incluir, e estamos verificando se essa barra de URL específica , barra de placas. Então, na verdade, aqui vamos acionar nosso quadro de vidas quando nosso início de navegação acontecer. E esse URL que vamos usar não inclui barra de porta. Essa barra de barra é nossa única ligação ou nossa placa única foi modelo. Vamos verificar se está funcionando. Estou clicando aqui na minha primeira tarefa e agora não estamos deixando a parte, o que significa que tudo funcionará bem. E agora vamos implementar juntos. Vá para o quadro porque essa é apenas uma única linha que eu quero fazer. Eu quero entrar em nosso modelo de tarefa. E aqui no topo temos essa imagem de perto. E, na verdade, aqui também podemos criar um evento de clique e vamos nomeá-lo, ir para o quadro. Agora podemos pular diretamente dentro do nosso modelo de tarefa e criar esse método, vá para o vínculo. E o que precisamos saber dentro desse componente para saltar para o nosso quadro, devemos ler a partir deste ano. Bem, em primeiro lugar, nosso ID de tarefa, precisaremos dele em qualquer caso. E aqui, o mais importante, o AD da placa, que na verdade significa que escreveremos o mesmo código que escrevemos dentro do nosso construtor dentro da placa. Então, aqui vamos registrar nosso construtor. E por dentro, precisamos primeiro de tudo, nosso conselho AT. Para isso, precisamos usar route, que realmente significa que aqui devemos injetar nossa rota, que é uma rota ativada. E agora aqui podemos escrever esta rota dot snapshot, dot, params, map, dot, get. E aqui estamos tentando obter nosso ID do conselho. E como você pode ver aqui, estamos ficando tensos agora. É por isso que faz muito sentido verificar se realmente conseguimos nosso ID do conselho. Nesse caso, podemos salvar o ID da placa e o AD da tarefa diretamente como uma propriedade dentro do nosso componente. É por aqui que eu primeiro quero criar nosso anúncio de quadro. É uma corda. E em segundo lugar, tarefa Katie, também é uma corda. Agora aqui podemos verificar, ok, duplicar uma placa. Caso contrário, precisamos lançar um erro. É aqui que o ouvido lançou um erro para você. E aqui podemos dizer que não é possível obter o ID da placa do URL. E agora precisamos fazer exatamente o mesmo para nosso ID de tarefa. Este é o caminho aqui. Vamos tentar fazer a tarefa AD e estamos tentando fazer com que a tarefa seja diferente. E agora aqui queremos escrever mais uma Eva e verificar aqui a tarefa AD. Então, aqui podemos escrever, não é possível obter o ID da tarefa do URL. Mas, na verdade, aqui cometi um grande erro é que você pode ver que temos um ID de placa e ID de tarefa, mas com o Taskade, está tudo bem. É este mapa de parâmetros de instantâneo de rota. Mas com Boyd AD, não está tudo bem porque queremos ler todas essas informações de nossos pais. É por isso que aqui devemos tentar route dot parent, e aqui devemos colocar um ponto de interrogação e, em seguida, mapear programas instantâneos. Nesse caso, vamos lê-lo diretamente dos pais. E agora, após essas duas verificações, podemos simplesmente atribuir a essa tarefa AD, e isso é uma string agora, e aqui também temos esse ID de placa e também é uma string. Agora, aqui podemos implementar o método go to board, mas para este útero deve injetar aqui. Além disso, grite para mudar sua rota. Então, aqui temos nosso roteador. E agora, dentro desse método, podemos simplesmente escrever essa rota e navegar exatamente como fizemos anteriormente. E aqui queremos embarcar. E como segundo parâmetro , é essa placa. Neste caso aqui, o URL será pontos cortados, ID do quadro de barras. Vamos verificar isso. Estou recarregando a página aqui. Estou dentro da tarefa e aqui estou clicando em Cross. E depois de clicar onde eles pularam diretamente insight slash id. E, o mais importante, não tivemos um recarregamento de página. Não precisamos buscar dados para essa parte porque todos os dados estão lá. E agora podemos simplesmente abrir uma segunda tarefa, fechá-la, e ela é muito fácil e rápida porque não precisamos buscar informações adicionais aqui. 44. Obtenha tarefas e colunas: Neste cupom de vídeo para falar sobre fluxos de dados dentro do nosso modelo de tarefas. É aqui que será realmente interessante. Por que isso? Como eles realmente já tinham todos os dados de cada modelo dentro do nosso quadro, só precisamos usar esses dados e mapeá-los corretamente dentro do modelo de tarefas. É aqui que a primeira coisa que quero fazer é injetar aqui nosso serviço de diretoria que já temos e não o serviço de placas para não funcionar com a torta, mas nosso serviço de diretoria com o estado. Agora, aqui, antes de tudo, quero encontrar a tarefa. E, na verdade, aqui, por exemplo, após esse ID da placa dentro do construtor, podemos apenas escrever que essa tarefa era mais alta e será o nosso fluxo da tarefa atual que abrimos. E aqui podemos realmente experimentar esses serviços esportivos. E aqui temos nosso fluxo com todas as tarefas do nosso conselho. E como você pode ver, ele já está disponível, mas não precisamos de toda a gama de nossas tarefas. É assim que o boop quer usar o mapa. É por aqui que podemos escrever por mapa e depois citar onde obter acesso a todas as nossas tarefas. E agora só precisamos encontrar uma tarefa específica que precisamos para esse modelo de tarefa. Então, aqui eu quero apenas retornar tarefas encontrar, e aqui dentro, teremos acesso a cada tarefa. E aqui nós apenas pegamos essa tarefa pelo AD e a comparamos com essa tarefa AD que aqui no topo dentro do construtor. Então, na verdade, o que isso faz, transforma nossas tarefas de serviço de stream board. E aqui estamos apenas mapeando a tarefa única e aqui estamos recuperando. Mas não é tudo, na verdade, depois do mapa. Eu quero escrever filtro e aqui dentro eu quero fornecer booleano. Por que estamos fazendo isso? Porque, na verdade, pode acontecer que no início não tenhamos uma tarefa porque não buscamos todas essas tarefas aqui, que na verdade significa onde saltar para construtor dentro do nosso modelo, este é o nosso fluxo. Tasks é simplesmente uma matriz vazia. Aqui tentamos encontrá-lo e não conseguimos e obtemos um indefinido, mas indefinido não está interessado em rápido. Foi aqui que escrevi o filtro Boolean e ele simplesmente se livrará de cada indefinido nele. Agora, neste caso aqui, esse fluxo não será cumprido até que possamos encontrar uma tarefa. Então, agora vamos tentar usar esse corte dentro do nosso HTML. Aqui no topo, devemos criar um formulário embutido, o título atualizado da nossa tarefa. E podemos simplesmente escrever aqui nosso formulário em linha que já foi usado centenas de vezes. E então lado primeiro de tudo, devemos definir uma classe, e aqui teremos modelo de tarefa adicionado título fórum. Depois disso, queremos definir nosso texto padrão. E, na verdade, aqui precisamos fornecer o título da tarefa. Mas, novamente, quero escrever ainda melhor. Poderíamos usar esse fluxo dentro do nosso HTML. Mas, como já falei anteriormente, podemos combinar diferentes fluxos de dados dentro de uma única propriedade, e isso é exatamente o que podemos fazer agora, aqui podemos escrever esses dados eram mais altos e podemos usar aqui combinado mais recente, assim como usamos anteriormente e, na verdade, mais tarde, não teremos aqui apenas uma tarefa, pelo menos também teremos obter aqui uma lista de nossas colunas por isso, porque na verdade temos um select para alterar a coluna em que esta tarefa está. Este é o caminho aqui. Em primeiro lugar, teremos nossa tarefa e, mais tarde, adicionalmente, aluno aqui, fluxo para as colunas. E aqui precisamos mapear todos esses dados e queremos converter nossa matriz para o objeto. Aqui. Em primeiro lugar, vamos conseguir nossa tarefa. Aqui. Precisamos devolver apenas uma tarefa. Agora, aqui devemos criar esses dados dentro desse componente, desta forma aqui no topo. Em primeiro lugar, devemos mudar o dólar da tarefa para observável. E aqui estamos obtendo nossa interface de tarefas e nunca agora porque a verificamos com filtro. E agora aqui também precisamos dos dados que roubamos. E aqui também teremos um observável do objeto. E aqui temos nossa tarefa, que é uma interface de tarefas. Agora, os dados estão prontos, na verdade, dentro do HTML, podemos usar esses dados diretamente. É aqui que aqui no nosso div superior, vou tentar. E G, Aqui temos nosso fluxo com dados como, e aqui estamos obtendo dados, o que na verdade significa que agora em todo o arquivo, podemos apenas usar dados. Isso é y aqui dentro do texto padrão, podemos fornecer tarefa de ponto de dados, título de ponto. E depois disso, precisamos fornecer um título dentro do formulário, também será um título de ponto de tarefa de dados. E como você pode ver, não temos fluxos aqui, mas, na verdade, aqui dentro dos dados, criamos um fluxo de tarefas, que é uma string baseada em nosso fluxo, onde temos uma variedade de tarefas. E a última coisa é uma saída aqui e aqui temos nosso identificador submit, por exemplo, update task name. E aqui dentro de onde conseguir um evento. E eles só querem criar essa função dentro do nosso componente. Não vou implementar nada aqui. Então, aqui estamos obtendo o nome da nossa tarefa. Que é uma corda, as costas estão vazias. E agora eu só quero escrever aqui o log do console. Este é o nome da tarefa de atualização, e aqui estamos obtendo o nome da tarefa. Vamos verificar se está funcionando. Não temos nenhum erro aqui e eles simplesmente recarregarão a página. E como você pode ver diretamente aqui, estamos recebendo minha primeira tarefa. Como isso funciona? Aqui nós construímos nossa tarefa de stream, que é baseada em nossas tarefas e na verdade, depois de páginas muito quando não obtemos um erro. E nós poderíamos potencialmente obtê-lo. Na verdade, não porque temos aqui na GE com Chegg, mas é sempre bom escrever filtro booleano só para saber que estamos no lado seguro. E aqui estamos recebendo nossa primeira tarefa dentro desse fluxo de dados. Aqui podemos mudar isso diretamente, minha primeira tarefa e atualizada. E como você pode ver, este é o nosso registro do console. Obviamente, ainda não implementamos a atualização, mas estamos no caminho certo. Agora. Podemos escrever exatamente o mesmo código com a descrição do nosso formulário embutido. É por isso que eu quero voltar para dentro do nosso HTML. Aqui está nosso interior a partir da descrição. E, na verdade, aqui podemos apenas experimentá-lo em linha, como fizemos para o título. E aqui já temos os dados dentro do fluxo de dados. Este é o caminho aqui. Em primeiro lugar, nosso modelo de tarefa de classe , edição, descrição, formulário. E depois disso, em primeiro lugar, temos aqui o texto padrão. Aqui vamos tentar a descrição da tarefa de dados. E aqui eu quero escrever, ou porque na verdade uma descrição dentro da tarefa não é obrigatória, o que significa que em algum momento ela será uma string vazia. Este é o caminho aqui, adicione uma descrição mais detalhada. Depois disso, também queremos definir nosso título. É por isso que a descrição da tarefa de ponto de dados. Também queremos fornecer aqui no exterior, e este é o nosso primeiro uso da área de texto. Este é o caminho aqui. O tipo de entrada é a área de texto também tem a propriedade Button deve ser definida como true. E depois desse botão, o texto pode ser configurado para salvar. E também precisamos fornecer aqui eu cuido do envio. Aqui, vamos chamá-lo, atualizar a descrição da tarefa. Aqui estamos recebendo nosso evento, na verdade. Aqui devemos criar a função, mas será exatamente a mesma. É por isso que vou copiar, colar, atualizar o nome da tarefa e apenas alterar o nome e o log do console. Mas, obviamente, não é um nome de tarefa, mas uma descrição da tarefa. Vamos alterá-lo e o log do console e verificar se está funcionando. Como você pode ver aqui, estamos recebendo um tipo de erro indefinido. Não é atribuível ao tipo string. Na verdade, é um ponto válido do TypeScript porque nosso interior deseja obter apenas uma string e não uma indefinida aqui. É por isso que podemos simplesmente experimentá-lo ou uma string vazia. Isso é totalmente bom. Como você pode ver agora, não temos um erro. Aqui estamos obtendo agora minha descrição, que é uma descrição real da nossa tarefa. Podemos alterá-lo e clicar em Enter. E, na verdade, aqui está uma área de texto, então Endo não ajuda. Devemos clicar no botão Salvar. E aqui estamos recebendo atualizações internas do console, descrição da tarefa, minha descrição, o que na verdade significa que nossa empresa no interior está trabalhando e nosso fluxo também está fornecendo dados rapidamente. E agora vamos falar sobre colunas. Na verdade, é ainda mais fácil. Devemos simplesmente pular , digamos, modelo de tarefa. E aqui precisamos desse fluxo para as colunas do nosso quadro. E, na verdade, não precisamos nem mesmo criar propriedades adicionais aqui dentro do mais recente combinado, posso simplesmente escrever este cão de serviço do conselho. E aqui temos colunas de fluxo e podemos simplesmente empacotar uma matriz de colunas aqui dentro deste componente, e estamos prontos para ir. Então, aqui estamos conseguindo nossa tarefa. E em segundo lugar, as colunas aqui dentro do objeto boop querem retornar essa matriz de colunas. E agora aqui podemos usar essas colunas para construir um select dentro do nosso Markov. Então, na verdade, aqui temos um formulário e dentro dele queremos escrever um select. Vamos fazer isso agora. Em primeiro lugar, aqui estará S Select e queremos escrever aqui nome do controle do formulário porque, na verdade precisamos incorporá-lo a partir do Grupo. Por que estamos fazendo isso? Porque, na verdade, é muito mais fácil trabalhar com formulários reativos se você tiver, por exemplo, um Select. Este é o caminho aqui. Vamos criar um grupo de formulários. E aqui queremos criar, por exemplo, formulário de coluna. E aqui dentro do select, podemos simplesmente empacotar o nome do controle do formulário, e será o ID da nossa coluna. E aqui também devemos fornecer a seleção da coluna de classe. Agora, dentro do select, queremos renderizar todas as nossas opções e será nossa matriz de colunas. Esta é a maneira aqui, opção dentro do G4, estamos renderizando aqui com apenas um loop através de nossas colunas porque as temos em colunas de pontos de dados e não precisamos nos preocupar com fluxos aqui. Também aqui queremos usar no valor G e fornecer o valor dentro da opção R. Isso será o ponto da coluna AD porque estamos percorrendo eles. Vamos fechar essa opção e executar o interior de cada opção no título. Então, aqui vamos apenas executar o título do ponto da coluna. Vamos verificar se está funcionando. Estou pulando aqui e estamos recebendo um erro e o valor G é desconhecido. E antes de tudo, devemos criar nosso formulário. É por isso que vamos voltar atrás e definir nosso componente. E aqui no topo, devemos criar um formulário para apenas uma única propriedade. Então, aqui vou tentar que tenhamos nosso formulário de coluna. E é esse FB. E na verdade nós não injetamos aqui se p. Então vamos fazer isso agora. Se B é como sempre, apenas construtor de formulários, e aqui escreveremos esse grupo F B e dentro passaremos nossos controles. E aqui temos apenas um ID de coluna, mas não precisamos de mais nada. E, por padrão, será. Agora, aqui ainda temos essa Sarah. E, na verdade, porque não injetamos formas reativas dentro do módulo da placa. Portanto, devemos pular para trás e configurar nosso módulo de placa. E bem aqui dentro do módulo de formulários reativos de entrada, como você pode ver agora, estamos recebendo outro erro dentro do nosso HTML. E aqui estamos obtendo colunas que não existem no tipo Task interface porque na verdade não estendemos nossa interface. Aqui no topo temos fluxo de dados e aqui dizemos que só temos uma tarefa e isso não é verdade. Temos aqui colunas, e esta é apenas uma matriz da nossa interface de coluna, como você pode ver agora dentro do nosso console com não há nenhum erro. Então, vamos verificar isso. Agora estou recarregando o paciente aqui, agora temos nosso incrível select e não vemos nenhum valor porque não fornecemos um valor padrão. Agora, aqui podemos abrir esse select e podemos escolher entre diferentes colunas. E como você pode ver, isso é diretamente nossas colunas que temos dentro do quadro. Agora, a única última coisa que eu quero implementar, definindo o valor padrão dentro do select, porque na verdade, por padrão, temos uma coluna e essa tarefa está situada em alguma coluna. E podemos fazer isso facilmente porque temos fluxos. Então, aqui podemos apenas usar essa tarefa foi roubada porque temos o fluxo. E aqui sabemos que estamos conseguindo nossa tarefa e podemos simplesmente escrever Assine aqui e teremos acesso à nossa tarefa. E agora precisamos atualizar nosso formulário. Então, aqui temos acesso a esse formulário de coluna, qual valor, e se você não sabe o que o valor de pitch está fazendo, ele atualiza as propriedades dentro do formulário. Então, aqui devemos fornecer campos a um objeto. E, no nosso caso, isso é apenas um ID de coluna de campo único. Por dentro, queremos fornecer um ideal para a coluna dessa tarefa. É o ID da coluna do ponto da tarefa, o que na verdade significa dentro do construtor inicializar onde se inscreve no fluxo de tarefas. E quando estamos recebendo nossa tarefa aqui, estamos corrigindo o valor. Como você pode ver agora, em vez do navegador, estamos recebendo nossa primeira coluna. Mas o que eu não gosto aqui, estamos usando a assinatura novamente sem cancelar a inscrição. É por isso que eu quero fazer exatamente o mesmo que fizemos dentro do nosso quadro. Em primeiro lugar, aqui devemos criar nosso cancelamento de inscrição. E isso está em uso, onde por dentro estamos fornecendo vazio. E agora aqui queremos criar em G ao destruir. Este é o caminho aqui, implementos neste Troy. E em algum lugar após o construtor, podemos criar em junho, a greve e o insight com, em primeiro lugar, queremos chamar esse cancelamento de inscrição em seguida e depois concluir. Então, esses cancelamentos de inscrição são concluídos. E depois disso, não devemos esquecer antes de assinar o tubo de gravação. E aqui, até aqui, estamos fornecendo a eles esses cancelamentos de inscrição que acabamos de criar. Nesse caso, estamos no lado seguro emDestruir este componente. Nossa assinatura também será destruída. 45. Atualizar a tarefa: Neste vídeo, devemos implementar a atualização de nossa tarefa do início ao fim. E, na verdade, dentro de uma tarefa, temos três coisas diferentes. Em primeiro lugar, aqui temos um formulário embutido para o nosso título, para todos os implementados. E estamos chegando aqui o registro do console. Na verdade, essa é uma atualização parcial da nossa tarefa. Temos exatamente a mesma lógica com a descrição. Aqui podemos simplesmente alterá-lo e clicar em Salvar. Mas também aqui temos uma mudança de nossa coluna e, na verdade, não lidamos com isso e devemos fazê-lo. E isso também é uma atualização da tarefa. Mais importante ainda, todas essas são atualizações parciais que devemos atender para nosso back-end porque queremos notificar todos os nossos clientes sobre essa mudança dentro da tarefa, o que realmente significa que nossa lógica será exatamente como na parte interna anterior, estamos emitindo algo no cliente, no back-end, fazemos algo em nosso banco de dados, por exemplo, tarefa de dados da web. E depois disso, estamos notificando todos os nossos clientes que estão inscritos nesse quadro específico. E a primeira coisa que precisamos fazer é criar novos eventos de soquete. Vamos começar desta vez com o cliente. E dentro de nossos tipos de fragmentação de aplicativos de origem, temos eventos de soquete. E, na verdade, aqui eu vejo tarefas Criar, e agora precisamos exatamente o mesmo com a atualização de tarefas do PS. E aqui temos sucesso e fracasso como sempre. E aqui podemos alterar o nome para tasks, update, update success e update failure. Para que nosso evento esteja pronto, Nobu deve implementar um novo método dentro de nossas tarefas de serviço de camisas, porque, como anteriormente, queremos esconder nosso soquete dentro desse método dentro das tarefas de compartilhamento. Este é o caminho aqui. Vamos criar nosso método que atualizará a tarefa. Aqui. Em primeiro lugar, estamos recebendo nosso ID do conselho porque precisamos saber quais usuários devemos notificar. É aqui que ouvir aniversário, essa string também precisará de um ID de tarefa porque precisamos saber qual tarefa devemos atualizar. E por último, mas não menos importante, aqui está uma lista de campos. E aqui teremos um objeto em que todos os nossos campos não serão obrigatórios. É por isso que estou escrevendo com um interrogação para que possamos atualizar nosso título. É uma corda. Também podemos atualizar nossa descrição. Também é opcional e string. E aqui também temos nossa coluna e nossa senhora da coluna é onde nossa tarefa está situada. E aqui estamos ficando vazios. A única coisa que devemos fazer aqui é o socket meet. É por isso que socket service summit. E aqui queremos usar nosso novo método, eventos de soquete em m ponto. E temos aqui nossas atualizações de tarefas começam aqui como o segundo parâmetro, devemos fornecer um objeto com todos esses campos. Em primeiro lugar, é um raio de borda, depois o ID da coluna e, em seguida, nosso objeto com campos. E como você pode ver aqui, eu cometi um erro de digitação. Não é continuidade , mas ID da tarefa e por causa do TypeScript com ver diretamente um erro. Então, agora podemos voltar atrás e definir nosso componente e fazer as mudanças necessárias. E aqui temos o nome da tarefa de atualização e a descrição da data. Aqui, em ambos os casos, queremos chamar esse método de tarefa de atualização. Este é o caminho aqui no topo com primeiro de tudo, deve injetar essas tarefas serviço que acabaram de ser atualizados. E é um serviço de tarefas. Depois disso, podemos simplesmente escrever aqui este serviço de tarefas, e aqui está nossa nova tarefa de atualização de método e depois dizê-la. Em primeiro lugar, devemos escolher uma placa EM este ID de placa aqui é de uma tarefa ou temos aqui ID de tarefa? Sim, nós temos, nós definimos isso aqui dentro do construtor. Então aqui também podemos escrever este ponto faz KD, e aqui temos nossos campos. Nesse caso, só precisamos atualizar o título. É assim que podemos dizer título, Tarefa, Nome, e como você pode ver aqui, estamos recebendo um ID de coluna de propriedade estranho faltando no tipo, o que na verdade significa que fiz algo errado. E eles já podem ver o problema aqui. Column lady também é opcional. Não deve estar lá sempre. É aqui que está aqui. Você pode ver agora que não estamos recebendo um erro porque todos os nossos campos podem ser indefinidos. E aqui só precisamos fornecer um título. Então, aqui nós atualizamos o nome da nossa tarefa. Agora posso copiar e colar esse código e atualizar aqui nossa descrição. Aqui vou apenas fornecer uma descrição, e esta é a descrição da nossa tarefa a partir do parâmetro e agora é a parte mais interessante. Devemos lidar com essa mudança desse único select. E, na verdade, esta é uma forma reativa, o que é realmente bom porque podemos reagir às mudanças de forma completamente reagida. O que eu quero escrever aqui é este formulário de coluna de pontos Gad. E aqui podemos obter o ID da nossa coluna, mas, na verdade, aqui queremos reagir às mudanças de valor e as mudanças de valor reais nos devolverão e observáveis, o que na verdade significa que podemos escrever aqui subscrever. Mas como você pode ver aqui, estamos recebendo um aviso do TypeScript de que possivelmente esse campo pode ser agora, mas não no nosso caso, porque no nosso caso, sempre se diz que é aqui que realmente aqui estamos pode suprimir esse aviso apenas usando o banco aqui. Nesse caso, estamos dizendo TypeScript, não se preocupe com a verificação que essa propriedade está lá. E como você pode ver agora aqui, as mudanças de valor são observáveis. Aqui é onde eu posso agora tentar me inscrever e, em seguida, obter aqui o que está dentro desta coluna senhora após a mudança, que na verdade significa comer esta coluna senhora quando era atualizado. E agora eu só preciso escrever o log do console de inserção. ID da coluna alterada. E aqui podemos verificar se está realmente funcionando. Vamos recarregar a página. Como você pode ver aqui dentro do console, estou mudando a coluna que eles D, e aqui está o ID da nossa coluna. E, na verdade, isso é um problema porque o que queremos fazer agora dentro desta assinatura, queremos acionar uma mudança para o back-end, como fizemos aqui com a tarefa de atualização. Mas não faz sentido acioná-lo no início, quando temos o mesmo ID de coluna, nós realmente queremos ser muito complicados quando o alteramos. É por isso que o que podemos escrever aqui. Podemos verificar se a coluna carente, o que foi alterado não é o mesmo que metade válida. Mas aqui também, o problema, temos essas informações apenas dentro do nosso fluxo de tarefas, o que na verdade significa que devemos combinar esses dois fluxos juntos. É por isso que aqui podemos usar lasers combinados, assim como fizemos anteriormente. E aqui podemos fornecer, primeiro lugar, essa tarefa era mais alta. E aqui depois disso, esse fluxo que escrevemos aqui na parte inferior, vou apenas colá-lo como um segundo parâmetro. E esse último combinado nos dá de volta uma matriz, o que na verdade significa que aqui temos acesso à nossa tarefa e depois disso ao nosso id de coluna do formulário. E aqui agora eu posso registrar os dois no console. Aqui eu quero ver antes de tudo, mudou a senhora da coluna e, mudou a senhora da coluna e segundo lugar, o que temos dentro da tarefa. E, na verdade, aqui queremos verificar o ID da coluna do lote da tarefa. Vamos dar uma olhada nisso. Estou recarregando a página e estamos conseguindo os dois anos oitenta. E como você pode ver, eles são semelhantes, o que na verdade significa que esse é exatamente o caso quando não precisamos fazer nada. Então, o que queremos escrever aqui, se nossa coluna de tarefas eles D não for igual ao nosso id de coluna, então precisamos fazer uma atualização. Aqui podemos simplesmente escrever esse serviço de tarefas exatamente como fizemos na tarefa de atualização inferior. E aqui dentro foram fornecidos. E primeiro de tudo, esse ID do quadro, depois a tarefa, temos dentro do ID do ponto da tarefa, e aqui estão nossos campos. Dentro dos campos, só temos nossa propriedade de id de coluna. Então, como você pode ver, o JS de Eric realmente nos ajuda a trabalhar em conjunto com formas reativas, fluxos, nossos próprios fluxos ou um caminho que é extremamente eficiente. Agora podemos remover esse código comentado. Não precisamos mais disso. Mas o que eles querem fazer aqui, eu quero escrever para lidar com o cancelamento de inscrição neste caso aqui, não teremos uma assinatura de arma de fogo. É aqui que devemos pegar o tubo reto até que, como já fizemos aqui. E dentro desses cancelamentos de inscrição e na verdade, nossa parte de front-end do código está completamente pronta. Agora devemos tentar o material padrão no back-end, o que na verdade significa que, antes de tudo, devemos copiar e colar eventos. Em seguida, precisamos criar uma nova assinatura para esse evento e, em seguida, implementar um novo método dentro do controlador para atualizar uma tarefa. Vamos fazer isso agora. Em primeiro lugar, quero entrar nossos eventos de soquete e copiar e colar a atualização de tarefas. Depois disso, podemos entrar nos tipos de origem de um servidor. Aqui temos nossos eventos de soquete e, na parte inferior, posso colar esses três novos eventos. Agora podemos pular de volta para dentro ou para a irmandade S. E aqui na parte inferior podemos adicionar uma nova tonelada de soquete. Aqui, queremos ouvir nossos eventos de soquete em m ponto. E aqui temos nossas tarefas atualizadas aqui com não quero chamar um controlador de colunas, mas controlador de tarefas. E aqui temos uma nova função, tarefa de atualização, e devemos fornecer informações sobre seu soquete e dados. Agora é hora de criar essa tarefa de atualização. E, na verdade, preciso copiar e colar da atualização de colunas porque será super semelhante, como você pode ver aqui, temos a coluna de atualização. Vou copiar, colar todo o método e pular e dizer tarefas, e colar aqui na parte inferior. Agora vamos mudar isso aqui. Em primeiro lugar, temos nossa tarefa de atualização e estamos obtendo aqui os dados. Então, o que obtivemos dentro dos dados? Era uma identificação do conselho. Então temos aqui no ID da tarefa, e dentro de nossos campos, temos três campos. Em primeiro lugar, título, é opcional. Então podemos obter aqui a descrição. Também é uma string opcional. E por último é a nossa coluna eles D, que também é opcional. Agora vamos atualizar nosso festival try and catch aqui, estamos verificando a atualização das colunas que está desenhada, precisamos alterá-lo para nossas tarefas. Falha na atualização. Aqui estamos enviando o usuário não está autorizado, também devemos alterar a falha dentro da gaiola. Então, aqui também teremos falhas de atualização de tarefas. E agora aqui devemos mudar nosso modelo. O modelo de tarefa encontrado por ID e atualização está totalmente correto. E aqui temos nosso ponto de dados, e aqui temos nosso ID de tarefa. Aqui, simplesmente jogamos todos os campos de dados que temos dentro e eles serão atualizados com o que fornecemos. Aqui de volta, estamos recebendo uma tarefa atualizada e queremos enviar essa tarefa atualizada para o nosso cliente. E aqui estamos fornecendo o ID da placa de dados. Isso é totalmente bom e a demanda aqui é o sucesso da atualização de tarefas. E aqui dentro, estamos fornecendo nossa tarefa atualizada. Portanto, terminamos totalmente com nossa parte de back-end, mas devemos no cliente, também escrever uma escuta para notificar todos os nossos clientes sobre mudanças. Portanto, devemos lidar com a Cúpula sobre o cliente. E para isso, é preciso voltar para dentro do aplicativo de origem de nossos clientes , Serviços de placa, serviço de placa por aqui, porque na verdade simplesmente precisamos escrever uma lição dentro dos componentes de nossa placa sem precisa escrever ouvir dentro do modelo da placa porque o modelo realmente comprado simplesmente usa nossos fluxos a partir daqui, o que na verdade significa apenas se inscrever dentro do nosso componente de placa. Aqui, chamaremos um método para atualizar na tarefa dentro do nosso fluxo de tarefas. É por isso que aqui eu só quero dar uma olhada em nossa coluna de atualização, porque ela será muito semelhante à nossa tarefa de atualização. E, na verdade, podemos copiar e colar totalmente. Então, vamos mudar isso agora. Aqui temos nossa tarefa de atualização. Estamos chegando aqui são tarefas atualizadas, que na verdade está na interface do crepúsculo. Aqui, precisamos fazer exatamente as mesmas coisas, basta atualizar uma única tarefa dentro de nosso array. Então, aqui estamos recebendo tarefas atualizadas e aqui estamos usando nossas tarefas de fluxo para obter valor e estamos obtendo acesso a todas as tarefas. Agora, aqui estamos verificando, ok, nosso ID de tarefa deve ser igual ao AD de nossa tarefa atualizada. Neste caso, aqui devemos retornar, estamos espalhados essa tarefa e queremos atualizar aqui apenas um título. E na verdade isso não é válido porque aqui precisamos retornar mais aqui. Em primeiro lugar, a tarefa atualizada, o título, mas também devemos atualizar aqui nossa descrição, pois pode acontecer que a atualizemos. É aqui que ouvimos a descrição atualizada do ponto da tarefa e o último aqui será nossa coluna carente, e também é atualizado o ID da coluna do ponto da tarefa. Agora parece totalmente bom. E em outro caso, nós apenas retornamos nossa tarefa. E depois disso, precisamos atualizar nosso fluxo de tarefas com algumas tarefas atualizadas para que nosso método esteja totalmente pronto, agora só precisamos voltar e definir nossa placa de componentes, componente da placa. E aqui devemos criar mais uma lição, palestra. Quero descobrir aqui sucesso da nossa atualização do cone porque será super semelhante. Aqui está. Vou apenas copiar e colar. E aqui precisamos mudar isso. Em primeiro lugar, de volta, estamos recebendo nossa interface de tarefas e aqui está sucesso da atualização das tarefas Socrative e C num dot. Agora, aqui temos nosso cancelamento de inscrição e volta, estamos recebendo nossa tarefa atualizada. E agora aqui podemos simplesmente chamar esse método que acabamos de criar, essa tarefa de atualização. E aqui dentro, devemos fornecer nossa tarefa atualizada que estamos obtendo do back-end. Nesse caso, aqui com esse código, atualizaremos o fluxo de tarefas para cada cliente que estiver inscrito em nossa página. Vamos verificar agora se seguir um código está funcionando aqui. Não temos nenhum erro no front-end, nenhum erro no back-end. Agora vamos abrir nosso site e, na verdade, quero duplicar a guia para que possamos verificar com outro cliente. Então, aqui abrimos minha primeira tarefa e eles só querem atualizar um título aqui. Vamos escrever na íntegra e pressionar Enter. E como você pode ver, ele foi atualizado diretamente aqui, aqui no quadro. E também na próxima etapa, ele também foi atualizado, que na verdade significa que o atualizamos com sucesso no back-end, notificaremos os clientes legais com esta assinatura de escuta, quando atualizada o riacho e agora todos os lugares que estão inscritos nos riachos foram dramaticamente traseiros. Isso está funcionando muito bem. Agora vamos verificar se podemos alterar uma coluna. Então aqui eu quero selecionar a segunda coluna, atualizada e algum número. E como você pode ver diretamente, essa tarefa desapareceu da primeira coluna e agora está aqui dentro da segunda coluna. Ele foi atualizado dentro do nosso formulário. E aqui na próxima etapa Vemos minha primeira tarefa, que também é atualizada na próxima coluna. O que realmente significa que implementamos com sucesso a atualização de nossa tarefa e também a movemos entre nossas colunas. 46. Excluir tarefa: Neste vídeo, implementaremos o último recurso dentro do nosso projeto, e isso é a exclusão das tarefas. Vamos fazer isso agora. Em primeiro lugar, quero começar a partir do nosso servidor aqui, mas devo entrar em nossos eventos de soquete de tipos de origem e criar três novos eventos de soquete. Porque, na verdade, queremos notificar todos os outros clientes que foram removidos de uma tarefa. É por isso que faremos isso por meio de eventos de soquete. É aqui que vou copiar, colar, atualizar tarefas, basta alterá-lo para tarefas, excluir. E aqui à direita, podemos alterá-lo para tarefas, excluir, tarefas, excluir sucesso e tarefas excluir falha. Depois disso, podemos pular dentro dessas celebridades e da nova tonelada. Então, aqui devemos chamá-lo de ponto, e aqui temos nossas tarefas delete, que é um padrão. E aqui está nosso controlador de tarefas onde estamos chamando nossa tarefa de exclusão. E agora, na verdade, eu quero copiar e colar nossa exclusão da coluna. Vai ser super parecido. Como você pode ver aqui no topo, temos o método delete column e eles simplesmente copiam e colocam dentro de nossas tarefas aqui na parte inferior. E agora vamos mudar esse método. Em primeiro lugar, não exclui a coluna, mas exclui a tarefa. E o que estamos recebendo aqui, estamos ficando entediados, eles precisam notificar todos os nossos clientes. E aqui devemos obter apenas a tarefa Katie, para saber o que precisamos remover. E aqui temos nosso erro e só precisamos chamar aqui tarefas falha de exclusão. E aqui dentro de nossa gaiola, também podemos chamar tarefas de falha de exclusão. Agora, aqui, em vez do modelo de coluna, podemos apenas usar um modelo de tarefa, excluir um ponto, e simplesmente excluímos nossa tarefa pelo ID da tarefa que fornecemos. E depois disso, não definimos todos os nossos clientes com essas tarefas de soquete. Exclua o sucesso aqui Beckwith, só preciso dar um D a uma tarefa porque não temos mais informações e essas informações são suficientes para nosso cliente entenda qual tarefa deve ser removida. Agora devemos continuar com caminho do cliente e, para isso, é preciso copiar e colar esses três eventos de soquete que acabamos de criar. Voltarei para dentro da fonte AB de nossos clientes, tipos compartilhados, eventos de soquete. E aqui na parte inferior , podemos adicioná-los. E agora precisamos atualizar nosso serviço para trabalhar com tarefas. E o que queremos fazer aqui, queremos criar um novo método que será removido na tarefa. Este é o caminho aqui. Vamos criar uma tarefa de exclusão. E sabemos que simplesmente fornecemos aqui um ID de placa, que é uma string. E também precisamos aqui do nosso ID de tarefa, e também é uma string. E de volta estamos chegando aqui vazios. E agora, por dentro, podemos simplesmente chamar nossa imagem de ponto de serviço de circuitos. Aqui está mostrando tarefas de ponto de cinema de evento de soquete de evento excluídas aqui como o segundo parâmetro. Estamos fornecendo nossas opções, que são, em primeiro lugar, AT do conselho e, em segundo lugar, nosso ID de tarefa. E com isso, nosso método de API está completamente pronto. Agora devemos entrar no módulo da placa e no serviço da placa. E, na verdade, aqui precisamos um novo método, como delete column, mas será uma tarefa excluída e na verdade, o código será super semelhante porque aqui só queremos filtrar um específico tarefa do nosso array. É aqui que vamos alterá-lo para excluir tarefa, e aqui está um argumento de que estamos recebendo nossa tarefa AD. É aqui que queremos percorrer nosso fluxo, que é o Task Stream obter valor aqui, onde eu obtenho acesso a cada tarefa. E estamos comparando nossa tarefa k, d com a id da tarefa que precisamos remover. E aqui para trás obtendo tarefas atualizadas. E agora queremos atualizar nosso fluxo, que é nossa Reserva de fluxo de tarefas e você atualizou o array de tarefas. Então, criamos com sucesso nossa tarefa de exclusão para o estado do conselho. E agora aqui eu também quero remover esse comentário. Não precisamos mais disso. Agora, precisamos criar algum HTML para remover nossa tarefa. É aqui que devemos pular para trás e disse nosso modelo de tarefa de componentes. E aqui na parte inferior do nosso componente de modelo de tarefa HTML, temos ações, e aqui temos uma exclusão com uma imagem. E, na verdade, agora nesta div, podemos simplesmente adicionar o evento click e chamar aqui um novo método que será excluído tarefa. Agora vamos criar essa tarefa de exclusão dentro do nosso componente. Aqui não precisamos de nada, só precisamos desse ID de tarefa e desse ID de placa, e já os temos. É por isso que aqui podemos simplesmente escrever este serviço de tarefas Dot Delete Task e estamos fornecendo-os dentro. Então, aqui neste ponto, nesta tarefa KD, então nossos clientes emitiram com sucesso esse evento para o back-end. back-end atualizou nossa tarefa e notificou todos os nossos clientes. Mas, na verdade, devemos nos inscrever com a escuta em diferentes lugares. Em primeiro lugar, queremos fazer isso aqui dentro do nosso modelo de tarefas. E em segundo lugar em nosso quadro, e na verdade dentro do quadro, simplesmente precisamos chamar esse método que criamos Delete Task apenas para atualizarmos um fluxo. Mas o que eu quero fazer aqui, eu não quero diretamente dentro da tarefa de exclusão para ir para a nossa página do quadro. Na verdade, faz sentido, mas não temos certeza se removemos com sucesso na tarefa. É por isso que eu não quero escrever código aqui. Eu realmente quero escrever ouvir, por exemplo, dentro do nosso construtor. Para isso, devemos injetar aqui nosso serviço de soquete. É aqui que ouvimos o serviço de circuito privado e estamos recebendo aqui nosso serviço de soquete. E agora aqui no construtor Sul por exemplo, na parte inferior, podemos simplesmente escrever esta lição de serviço de soquete. Aqui, deve fornecer isso recuperando a tensão. E esta é a tarefa k d que estamos removendo. Agora, aqui podemos usar eventos de soquete em m ponto e onde a assinatura de nossas tarefas exclui o sucesso. E aqui eu quero andar até estarmos no lado seguro e, em seguida, fornecer informações sobre o cancelamento da inscrição. E depois do cachimbo, podemos usar nossa assinatura e, na verdade, não nos importamos com Tuskegee. Nós simplesmente queremos ir muito amplo e já criamos esse método. Isto é, isso vai para o quê? Temos esse método diretamente aqui dentro deste arquivo, o que na verdade significa que quando estamos obtendo sucesso e nosso modelo é aberto, esse código voltará diretamente para o quadro porque podemos mostrar essa tarefa excluída mais. E agora eu quero copiar e colar esse código totalmente porque escreveremos exatamente o mesmo dentro do nosso quadro. E aqui, como você se lembra, estamos escrevendo todas essas ligações para o nosso serviço de diretoria. É aqui que faz muito sentido colocar esse código aqui. E em vez disso, vá para o quadro, tente aqui, esta palavra ponto de serviço. E aqui temos nossa tarefa de exclusão qual estamos fornecendo o ID da tarefa. E neste caso aqui precisamos dessa tarefa AD que estamos obtendo do back-end, e eles realmente foram totalmente implementados esse recurso. Agora vamos verificar se está funcionando, mas não há erros aqui e nenhum erro no back-end. Agora, vamos para o navegador. Aqui eu tenho minha primeira tarefa, então vamos removê-la agora, como você pode ver dentro das ações, temos essa exclusão e, em seguida, clique aqui delete e essa tarefa desapareceu completamente não vejo aqui dentro do tabuleiro, e não o vemos dentro do segundo quadro. E, na verdade, no sucesso , foi redirecionado com sucesso para o slash slash board ID, o que na verdade significa que implementamos com sucesso esse recurso, Fool Live do início ao fim. 47. Implementação: Concluímos com sucesso nosso projeto com a criação do clone do Trello e agora precisamos falar sobre implantação. E normalmente a implantação não é uma tarefa fácil e muitas pessoas têm dúvidas. Como o jogador deve projetar, como vamos gerenciá-lo, que serviço devemos usar para isso. E isso é realmente um problema. Existem centenas de empresas diferentes nas quais você pode pagar dinheiro e elas serão implantadas para o seu projeto. Mas antes de tudo, você deve comparar todas essas empresas, entender como implantar seu projeto, aprender suas ferramentas on-line e assim por diante. Não faz muito sentido. Na verdade, todas essas ferramentas fazem exatamente o mesmo. Eles estão configurando seu projeto em produção em um servidor real. E, na verdade, a melhor variante para aprender produção e implantação é implantar nosso projeto por nós mesmos em nosso próprio servidor. Essa é a base da implantação. É aqui que faz muito sentido aprender a fazer isso. Além disso, provavelmente será a variante mais barata, como você pode hospedar seu projeto. Sim, não será gratuito porque você deve pagar pelo servidor, mas não paga à empresa para gerenciar um servidor e não paga por algumas ferramentas gráficas para aplaudir seu projeto. É aqui que, neste vídeo, devemos alugar um servidor juntos, configurá-lo e, em seguida, implantar esse nosso projeto. E, na verdade, se você não quiser pagar pelo servidor, está tudo bem. Você pode simplesmente deixar seu projeto como está. E verificando disse o vídeo, como eu estou fazendo isso e faz uma empresa de servidores, eu mesmo uso hertz e este é um provedor de servidor bastante barato e confiável. E, na verdade, você pode escolher qualquer provedor de sua preferência. Você só precisa acessar o servidor virtual privado. Mas eu gosto do hatsune porque é confiável e não é tão caro. Como você pode ver aqui, podemos clicar na nuvem e verificar os preços aqui na parte inferior. Como você pode ver, existem muitos pacotes diferentes e o mínimo está aqui por anos e US $0,15, que é bastante barato para o mês de 20 terabytes, trágico dois gigabytes de RAM e processador de CPU. E, na verdade, estou usando esse menor servidor para dois projetos em produção, mas muitas pessoas estão chegando. E se você otimizar seu thriller de projetos, bom, então você está totalmente bem com um pequeno xarope. É por isso que neste vídeo alugaremos exatamente o xarope. Então, agora o primeiro passo é registrar dentro de seu filho um pente ou qualquer provedor que você gostaria de. Eu já tenho aqui uma conta e após o registro e confirmação do seu e-mail, você verá essa página. Na verdade, aqui, esse serviço em seu perfil estará vazio, mas este é meu próprio servidor web. Aqui eu quero clicar no servidor porque eles só querem, por causa deste curso, criar um novo servidor. Então, o primeiro aqui é a localização, realmente não importa. Podemos escolher aqui Helsinque ou o que você preferir. ferimento da imagem está totalmente bom. Não precisamos escolher nada. Aqui está o tipo padrão, totalmente bom. E aqui, o menor nível, que é para o seu, $0,15. Não precisamos mudar nada. Não precisamos de volumes, redes, firewalls, recursos adicionais, chave SSH e aqui apenas um nome. Podemos nomeá-lo aqui, trailer, assim como nosso projeto, para sabermos do que estamos falando. E como você pode ver aqui com não selecionamos nossa chave SSH, o que significa que receberemos um e-mail com o usuário root e a senha, que é totalmente bom rapidamente. Estou clicando aqui para criar e agora, e nosso servidor será criado. Como você pode ver, meu servidor já está verde e funcionando. E, na verdade, digamos, o e-mail, obtive minhas credenciais onde tenho um usuário root e a senha do nosso servidor. Agora devemos entrar no console e escrever SSH. E aqui estará, antes de tudo, nosso usuário root add. Em seguida, o endereço IP que temos aqui, basta clicar nele e ele será copiado e eles precisam colá-lo aqui. Então temos aqui SSH, root at, e aqui o artista AP. Estou pressionando Enter e estamos recebendo a mensagem. Garanto que você quer continuar. Onde bem aqui, sim. E pressionando Enter, como você pode ver aqui, estamos recebendo, em primeiro lugar, a pergunta sobre nossa senha. Então, precisamos pegar uma senha do e-mail e colar aqui. E depois disso, estamos recebendo muitas informações sobre nosso servidor. E iniciamos o processo de alteração da senha root e, na verdade, para alterar a senha com antes de tudo, devemos fornecer uma senha atual. É por isso que estou colando novamente e pressionando Enter. E agora devemos fornecer uma nova senha para nosso usuário root. E estamos fazendo isso só para que Kasner não saiba nossa senha. Aqui, fornecerei apenas 123. E mais uma vez, 123. E como você pode ver, estamos recebendo uma mensagem. Você deve escolher uma senha mais longa. Vamos fazer isso 12345678. E mais uma vez, e na verdade você deve entender que para o projeto de produção real, você deve criar uma senha segura e não assim, isso é apenas para o teste. Então, se você tem essa saída com root em L, Trello e hash aqui, isso significa que você conseguiu, nós olhamos dentro do observador. Aqui podemos fazer alguma coisa. Aqui eu quero mencionar algo importante. Não estamos falando neste curso sobre como gerenciar servidores com eficiência e segurança. O que realmente significa que mostrarei tudo, toda a implantação com nosso usuário root. Normalmente, em um projeto de produção real, você não quer fazer tudo com o usuário root. Você deseja criar outro usuário com permissões limitadas que pode simplesmente implantar um projeto. Então, novamente, usar a rota na produção é ruim, mas se você fizer isso como seu projeto de estimação, isso é totalmente bom. Nosso próximo passo aqui é trazer nosso projeto para dentro da calda. E, na verdade, existem muitas possibilidades para isso e eu quero usar o mais fácil aqui. O que podemos fazer, podemos simplesmente enviar nosso projeto para o GitHub ou GitLab, o que você preferir, e então clonar esse projeto dentro do nosso xarope. Isso é muito eficiente porque você pode fazer algumas alterações em um projeto. Você certamente armazenará e atualizará seu projeto dentro do repositório Git, o que na verdade significa que toda vez que você quiser atualizar seu projeto, você simplesmente pule aqui dentro do seu console e disse Sarah, você apenas tenta obter pool para agrupar seu projeto e , em seguida, reiniciá-lo. É isso aí. Espero que você já não saiba como implantar seu projeto para obter o laboratório ou o GitHub. Mas se você não ouvir um pequeno passo, prefiro que meus próprios projetos usem o MATLAB, mas é apenas minha preferência pessoal. Aqui eu já tranquei dentro do GitHub e eles clicaram em Criar novo projeto. Agora, aqui eu só preciso clicar em Criar projeto em branco. E aqui podemos escrever algum nome. Por exemplo, podemos nomear nosso trailer do projeto L e não precisamos mudar nada aqui. E, na verdade, por padrão, no GitHub, estamos ficando privados de graça, e isso é incrível para nossas necessidades. Agora, aqui dentro da URL do nosso projeto, devemos escolher nosso namespace e eles escolherão o namespace do meu usuário. Agora eu só clico em Criar projeto aqui e nosso projeto é criado. E aqui estamos dando alguns passos de como devemos trazer esse projeto para obter o laboratório. Agora devemos entrar no console do nosso projeto e escrever o que precisa. Isso inicializará bem para o nosso projeto. Estou acessando aqui e, em seguida, recebendo uma mensagem de que minha pasta já é um repositório Git porque eles já têm meu projeto dentro de bom, normalmente você não receberá essa mensagem, mas apenas a mensagem que inicializamos com sucesso. Bom dentro deste repositório, nosso segundo passo aqui é implantar todos os nossos arquivos dentro do MATLAB. Mas o ponto mais importante aqui é que devemos adicionar para ignorar todos os módulos de nó dentro dos módulos do nó do cliente e módulos do nó do servidor do insights. Não precisamos fazer upload todas essas bibliotecas dentro do repositório Git. É por isso que devemos criar arquivo dot gitignore dentro do servidor. Eles têm aqui módulos de nós neste e também dentro do cliente. Aqui, como você pode ver, eu também tenho o ponto gitignore, e aqui temos muitas coisas. Ele foi criado automaticamente pelo angular e não precisa mudar nada aqui. Aqui os módulos de nó sinalizaram e isso é ignorado, o que significa que, na verdade, devemos mudar apenas o servidor. E aqui está o nosso ser ignorado. Depois disso, devemos pular no set console aqui, certo? Git add dot e ele adicionará todos os nossos arquivos ao bem. Agora precisamos criar nosso primeiro commit para isso, podemos tentar git commit am. E aqui, por exemplo, projeto concluído, como você pode ver aqui, estou recebendo uma mensagem, nada para confirmar, mas não deve ser o seu caso. No seu caso, você terá centenas de arquivos aqui, que já foram criados neste projeto. Nosso último passo aqui é que você pode ver é adicionar esta linha, git remote, adicionar HTTPS de origem e, em seguida, o caminho completo, vou colar agora aqui. E com isso, vinculamos com sucesso o get lip a esse repositório. E nosso último passo aqui será esse git push menos uf origin main. E, na verdade, como você pode ver aqui, está escrito em main. Mas para mim, por padrão, tenho um branch master, o que é totalmente bom. É por isso que eu quero renomear main para master. É bom. Push menos uf origin, domine-os ocultos aqui, Enter, como você pode ver aqui, devo fornecer antes de tudo, um nome de usuário do meu usuário do GitHub. E em segundo lugar, a senha é, você pode ver aqui que estou recebendo uma mensagem para acesso profundamente básico negado, o que na verdade significa que isso não aconteceu. Mas aqui devemos criar um token de acesso pessoal com repositório correto redepositado dentro do GitLab. Se você estiver usando o GitHub, por exemplo, talvez tenha funcionado para você. Se não estiver aqui, podemos pular para esses tokens de acesso pessoal do perfil de barra de link. Como você pode ver, eu o abri aqui e aqui só precisamos criar um token de acesso para que possamos fazer push no GitHub. E aqui, por exemplo, ele pode criar um nome falante do trello. E aqui devemos selecionar escopos. Para nós. Devemos criar o repositório correto e ler o repositório. Isso é o mais importante. Estou acessando aqui, crio token de acesso, e aqui estamos chegando ao topo do nosso novo token de acesso. E, felizmente, agora devemos mudar nosso controle remoto novamente por causa desse token de acesso para esta tabela, certo? Bom Ashram ou região remota, que removerá essa origem que criamos aqui no topo com esta linha, e isso será removido. Agora eu quero copiar e colar esta linha e é assim que estamos fazendo isso com o token de acesso dentro do GitHub. Como você pode ver aqui ao escrever git remote add origin HTTPS. Aqui, primeiro devemos fornecer o nome do token de acesso. É por isso que aqui criamos o trailer l como nosso símbolo. Vou escrever isso aqui, ultra law, e agora aqui temos dois pontos e nosso token de acesso. Vou copiar e colar também da nossa página onde o geramos. E depois disso, temos exatamente o mesmo que temos aqui no topo. Para mim, é https github com slash meu apelido barra L dot. Bom. É aqui que escreverei exatamente o mesmo. E então meu repositório, eu vou Trello, vamos dar uma olhada nisso. Estamos tentando fazer push novamente para o nosso repositório com git push origin master, assim como fizemos anteriormente. Estamos batendo aqui. E como você pode ver, quando não for questionado sobre nosso nome de usuário e senha, porque agora estamos fazendo push com nosso token de acesso. E como você pode ver, não temos um erro. Aqui. Estamos conseguindo que tudo esteja resolvido e agora temos sucesso em impulsionar o branch master dentro da origem. Como você pode ver agora, aqui dentro do nosso projeto, temos um branch master, e aqui estão todas as nossas mudanças. Temos aqui duas pastas, cliente e servidor. E aqui dentro podemos ver todo o projeto que construímos. E agora podemos aplaudir nosso código para o nosso servidor. É por isso que aqui eu quero voltar para dentro do nosso servidor que acabamos de criar. E como você pode ver, estou dentro da calda. Então, primeiro de tudo, aqui eu quero criar um novo diretório que é chamado de projetos. Agora, eu quero pular dentro desse projeto de diretório e clonar esse projeto aqui. E, na verdade, aqui podemos tentar usar com o mesmo token de acesso que acabamos de usar. Podemos simplesmente escrever dentro do console, obter o chmod menos a versão dentro do console local, não dentro do servidor. E aqui está nosso controle remoto com esse URL de token. E, na verdade, podemos simplesmente copiar e colar esse URL e usá-lo aqui dentro do xarope aqui. Eu só quero escrever git clone e depois esse URL que estou acessando aqui. E como você pode ver, não temos problemas de permissão. E clonamos com sucesso nosso projeto aqui dentro dos projetos. E aqui agora eu posso escrever Ls. E como você pode ver, temos o trailer da pasta L, o que na verdade significa que temos sucesso no exterior do nosso projeto para o nosso servidor. Agora, para continuar, precisamos atualizar todos os pacotes dentro do nosso servidor. E para isso, podemos simplesmente escrever apt-get update e pressionar Enter. Como você pode ver, todos os nossos pacotes foram atualizados e agora eu quero instalar, primeiro de tudo em jeans e em segundo lugar MongoDB. Então, o que está em jinx? Este é o nosso futuro servidor web que usaremos em nosso projeto. É aqui que podemos escrever EPT com estilo e azaração. Aqui devemos clicar em yes, para instalar este pacote. Como você pode ver, nosso pacote foi instalado com sucesso. Vamos verificar se está funcionando aqui, podemos simplesmente escrever o status do serviço e do jinx. E como você pode ver, estou pressionando Enter e estamos recebendo muitas informações. Em primeiro lugar, o que está no Jinx e aqui, em execução ativa, o que na verdade significa que ele foi instalado com sucesso e está sendo executado agora, nosso próximo passo é instalar nosso banco de dados, e era o MongoDB. Este é o caminho aqui, apt install Mongo DB e devemos confirmá-lo com sim. Agora vamos verificar o estado do nosso MongoDB para este fim de semana, certo, serviço e status do Mongo DB. E como você pode ver, ele também está ativo e funcionando, o que significa que está tudo bem. A próxima ferramenta que eu quero instalar é chamada n. E, na verdade, vamos usá-la para gerenciar nossa versão do nó porque na verdade pode acontecer que desejemos atualizar o nó e é muito mais fácil de fazer isso usando essa ferramenta, especialmente se você tiver vários projetos e precisar alternar entre diferentes versões do nó. É aqui que vou colar essa linha dentro do console. Portanto, é curl menos l e esse URL, é Gita, sua barra n no estilo bash. Estou pressionando Enter e estamos recebendo um erro. É por isso que o que devemos fazer. Antes de tudo, devemos executar o apt install. E aqui é essencial. Estou apertando Enter e devemos confirmar. Agora, como você pode ver, ele está instalado para que possamos tentar instalar. E novamente, estou apertando Enter e put. Não tenha nenhum erro. Aqui. Podemos simplesmente escrever sim e prosseguir com a instalação. Como você pode ver aqui, por padrão, n instalado para mim, sei, 16151. E, na verdade, esse é exatamente o mesmo nó que eles têm localmente. E eles sempre recomendam que você tenha a mesma versão de nó em seu servidor de produção e no ambiente local. Nesse caso, você evitará aborrecimentos e caixa mágica. E os dois últimos que queremos instalar são chamados de PM2.5. Este é um gerente especial para reiniciar nossos processos de nó e nós o usaremos para iniciar nosso aceno. É aqui que podemos escrever npm install menos g, o que significa globalmente VM2. E como você pode ver aqui, estamos recebendo um comando de erro npm not found, e o mesmo para o nó de comando não encontrado. Se eu estiver bem aqui, nó menos versão. E, na verdade, após a instalação de n, tanto internamente quanto obtendo Node e npm. Mas devemos reiniciar nosso terminal. Portanto, devemos nos desconectar do servidor e nos conectar novamente para trazer uma chance conhecida dentro do caminho. É aqui que podemos simplesmente escrever exit e, novamente, usar SSH root e nosso endereço IP. Keaton aqui Entre e devemos fornecer nossa nova senha. E como você pode ver aqui, eu estou dentro e agora eu posso escrever node minus fashion e seguida, obter a versão do nó e o mesmo com NPM menos versão, que na verdade significa que agora podemos instalar o TM2 novamente com o npm install globalmente VM2. Agora não temos um erro e nosso PM dois está sendo instalado. Agora, devemos instalar todos os nossos pacotes para o cliente e para o servidor. E para isso, devo pular novamente dentro da pasta de projetos. E aqui, como você pode ver, eu tenho nosso projeto ultra lab. Como você pode ver aqui, estou dentro do trailer e eles têm cliente e servidor. Primeiro de tudo, eu quero pular e dizer servidor. E aqui temos muitos arquivos, então podemos simplesmente escrever e pagar o estilo e ele instalará todas as dependências para o nosso servidor. Como você pode ver, tudo está instalado agora devemos pular dentro do nosso cliente. Então, eu estou escrevendo CD client e depois deste npm install novamente, e instalaremos todos os nossos pacotes front-end para Angular. Portanto, todos os nossos pacotes foram instalados com sucesso e agora devemos criar uma configuração para o nginx para o nosso projeto. E para isso podemos escrever cd slash UTC e jinx Cohen's d. E aqui dentro temos que criar um novo arquivo. E para isso podemos escrever Tij e depois L trailer ponto com.com. E, na verdade, aqui para abrir e editar o arquivo, devemos usar algum editor do console. E vou escrever aqui nano e depois o nome do nosso arquivo, que é o trailer antigo, calmo, calmo. Estou chegando aqui e é assim que esse editor está parecendo. Então, aqui podemos simplesmente digitar algo e depois salvar. E, na verdade, aqui eu quero já colar o conflito, muitas vezes azarar o tipo preparado anteriormente, e é assim que parece. Então, aqui temos um blog do servidor. Agora, lá dentro, ouvimos AT, que é uma parte AT padrão. E aqui é onde nossa raiz de frontend está mentindo. Aqui estão os projetos de barra de rota de barra onde já o criou. Aqui, a pasta é forte. Na verdade, é uma pasta ultra baixa que acabamos de criar. Em seguida, corte o aplicativo slash e slash do cliente. E, na verdade, devemos construir também mais tarde nosso cliente depois de instalar pacotes. Portanto, nosso script de tipo será convertido para JavaScript, e estará aqui dentro desta pasta, dentro do aplicativo de barra. É por isso que agora está tudo bem. Aqui estamos resolvendo nosso index.HTML e aqui o nome do servidor, o sobrenome é realmente importante porque, na verdade, esse é o nosso domínio. Este é L.com e www L Trello.com. E, na verdade, não temos nenhum domínio. E isso é totalmente bom porque na verdade, podemos dentro de nossa máquina local, dentro do arquivo host, apenas escrever um endereço APR do servidor. Nesse caso, não precisamos nos preocupar com a estratégia logo que o domínio real, e ela funcionará exatamente como com o domínio. Depois disso, temos a localização. Então, estamos tentando sempre carregar nosso index.HTML. E aqui temos a API de barra de localização. E, na verdade, isso é importante porque aqui estamos dizendo, ok, quando somos campeões na API de barra L Trello.com, devemos enviar nossa solicitação por proxy para este servidor web e esse servidor web usaremos dentro do nosso backend. Este é o host local da API 1001 slash. Depois disso, temos exatamente o mesmo, mas para solicitações de E/S de soquete. E aqui temos http localhost 4.001, e aqui temos alguns cabeçalhos. E, na verdade, essa é toda a configuração que precisamos para o In Jinx. Então, agora a questão é como podemos salvar esse arquivo? E para isso, em primeiro lugar, queremos clicar em Control O. E aqui na parte inferior vemos o nome do arquivo para escrever ys l Trello com conf, onde basta pressionar enter. E isso é totalmente bom. Foi salvo. Agora, aqui eu quero clicar em Control X, e agora estamos fora, estamos de volta ao nosso console. E agora se você precisar verificar se tudo foi salvo com sucesso, você pode escrever cat e então eu vou Trello, estou apertando Enter e estamos entrando no console essa boa saída com o conteúdo do nosso arquivo, mas não é tudo onde também devemos mudar um usuário dentro da configuração dos genes. Este é o caminho aqui. Eu quero sair desta pasta aqui eu quero escrever novamente nano, mas no nosso caso agora ele estará em jinx.com. E, na verdade, essa é a configuração padrão, geralmente Jinx. E aqui queremos mudar apenas uma única linha. Aqui no topo, temos os dados do usuário e queremos alterá-los para a rota do usuário com a qual estamos bloqueados aqui, e precisamos salvar esse arquivo novamente. Então Control O Enter, depois Control X. Agora devemos reiniciar o In Jinx para aplicar a configuração que fizemos. É por isso que podemos escrever serviço e reiniciar o jinx. Estou pressionando Enter e não temos nenhum erro. E agora não devemos esquecer de construir nossa frente. E é por isso que devemos voltar para dentro projetos de barra de rota. E aqui está nosso trailer L e cliente. E, na verdade, somos clientes internos. E para construir nosso projeto Angular, podemos simplesmente executar npm, executar build. E como você pode ver aqui, estamos chamando GI Bill, que é o comando do Angular, e ele vai construir para nós todo o projeto dentro desta pasta, como você pode ver aqui, depois de construir, Estou recebendo muitos erros dentro do console. E, na verdade, o principal problema é que é uma construção de produção e a folha de pagamento não existe no tipo de produção booleano, o que na verdade significa que não atualizamos nossos ambientes, Config dentro do nosso projeto. É aqui que é real e bom que temos agora o bem, para que possamos fazer ajustes rapidamente. Aqui, quero voltar ao nosso projeto e estamos interessados nos ambientes de origem de peças de nossos clientes. Aqui temos dois arquivos. Meio ambiente, sim. E à direita, abrirei protesto ambiental. Aqui. Como você pode ver à esquerda, fornecemos o URL da API e o URL dos sockets, mas não os fornecemos à direita. E, na verdade, vou apenas copiá-los da esquerda para a direita aqui. Agora, temos essas propriedades dentro da nossa configuração. Depois dessa ferida deve implantar essas mudanças para o salto bom para deficientes no projeto local, certo? Git add dot, ele adicionará apenas todos os arquivos localmente e após esse commit. Então git commit menos m e por exemplo, ambiente atualizado. Estou batendo aqui, entre em nossos comutados. Depois disso, podemos simplesmente escrever git push origin master e pressionar Enter. E nossas mudanças já estão dentro do GitHub ou GitLab. Depois disso, podemos voltar para dentro do nosso servidor, que foi inserido. E aqui eu quero sair do cliente. E aqui estou eu dentro da nossa pequena pasta de trailers. Agora acabei de experimentar o Git pool e estamos trazendo nossas mudanças, como você pode ver aqui, protease do ambiente dentro do nosso servidor. E depois disso, devemos tentar novamente executar build, e é npm run build, mas não devemos esquecer, devemos pular dentro do cliente, como você pode ver, nenhum pacote de arquivo ou diretório, Jason, porque eu não sou cliente interno. Então, o cliente e aqui o npm executam build. Agora, como você pode ver, não temos nenhum erro e estamos recebendo uma mensagem de que tudo foi concluído. E, na verdade, aqui devemos verificar o que temos dentro de nossa pasta dist. Então, diminuiu. E como você pode ver aqui, temos todos os trailers e dentro de todo o Trello, temos todos esses arquivos. Primeiro de tudo, nosso index.HTML e, em seguida, nossos ativos, gerentes e assim por diante. Mas, na verdade, isso significa que temos um pequeno problema dentro de nossa configuração interna e jinx porque nossa pasta raiz foi rolada , esse aplicativo de barra. E no nosso caso aqui temos uma barra reduzida, eu vou Trello, o que na verdade significa que devemos atualizá-lo agora. Portanto, devemos tentar Nano slash, ETC. E jinx Cohen d. E aqui temos nossa L Trello Comic-Con. Estou pressionando Enter e abri novamente nossa configuração. E aqui dentro da rota devemos tentar esta barra l Trello. Agora estou pressionando Control O, Enter Control vaza e precisamos reiniciar e azarar, então o serviço e o jinx reiniciam. Portanto, agora nosso front-end está completamente pronto e simplesmente precisamos executar nosso back-end e não precisamos começar de alguma forma nosso fronted, porque no jinx fará isso rápido. Mas para começar, não vai porque, na verdade, dentro do nosso front-end temos apenas arquivos estáticos como HTML, JavaScript e CSS. Mas dentro do nosso backend, temos nosso observável. É por isso que eu quero pular dentro do nosso back-end. Então aqui servidor de CD, e aqui precisamos iniciar nosso servidor com PM2.5. Mas, na verdade, aqui também temos um problema dentro do nosso servidor. Nós temos o TypeScript com não temos arquivos JavaScript e, na verdade, o womb deve converter todo o nosso TypeScript para JavaScript antes de começarmos a executá-lo sem PM2.5. E, na verdade, para isso, é preciso criar em seu comando. É por isso que devemos voltar ao nosso projeto e entrar no pacote do servidor, Jason. E aqui temos um script para começar, mas não temos um script para Build. É por isso que aqui podemos simplesmente escrever build e aqui o script será TAC. Então, o que é TAC? Na verdade, é um TypeScript e simplesmente transpira todo o código que temos dentro deste projeto com essa configuração ts. Como você pode ver aqui é a saída, é uma pasta dist. Isso está completamente bem rápido. Mas depois que fizemos essas mudanças. Devemos pular no set console e fazer exatamente as mesmas coisas novamente, primeiro de tudo, get head, depois git commit e depois git push. Então, com esses comandos, estamos trazendo nossas alterações para dentro do get wrapper. Agora estamos voltando em vez de uma pesquisa. Aqui estamos saindo e eu estou puxando meu projeto novamente. Então, estamos prontos para ir agora, podemos voltar e dizer, oh, pasta do servidor. E aqui podemos tentar construir nosso back-end. É aqui que eu posso simplesmente escrever npm run build, e isso transpira meu script de tipo para o meu JavaScript. Como você pode ver aqui, está feito. Agora podemos tentar menos dist e verificar o que temos. E como você pode ver aqui, vemos todos os nossos arquivos que foram criados, mas com extensão js, o que na verdade significa que isso está totalmente bem e devemos iniciar dist slash server.js e ele irá comece nosso projeto. Queremos usar PM2.5. É aqui que podemos simplesmente executar PM para o espaço, começar o espaço. Aqui será diminuída a busca por barra. Sim, estou pressionando Enter e estamos obtendo muita saída. Como você pode ver aqui, essa é toda a saída do PM dois. Não importa, mas aqui no fundo vemos gerando PM para demônio. É demonizado com sucesso e estamos começando com esses surtos no modo 4k, e está pronto e aqui está o nosso servidor. E, na verdade, por que estamos usando aqui P M2, não apenas o processo de nota que poderíamos escrever aqui nó e , por exemplo, o surto, sim, isso é totalmente bom. Mas pm tubule, em primeiro lugar, os riscos começam para nós, este servidor web se ele estiver quebrado por algum motivo. Em segundo lugar, o PM dois é mais adequado para as aplicações de produção. Então, o que fizemos aqui, em primeiro lugar, construímos com sucesso nosso cliente e, em segundo lugar, iniciamos nosso backend. E o último passo que queremos fazer é abrir um navegador. Mas podemos simplesmente abrir um navegador porque devemos apontar nosso domínio, L Trello.com, que não existe. Não o compramos da nossa máquina local para o nosso servidor. E, na verdade, aqui eu devo pular dentro do console localmente. E abra o arquivo host, por exemplo, dentro do Linux e macOS, é linha em barra, hosts de barra ETC. Então, aqui está como parece para mim, se você estiver no Windows, aqui está o seu caminho, é o Disco C, sistema Windows, então os dois drivers, ETC, hospedam e você está abrindo esse arquivo e isso é exatamente como meu arquivo aqui. E como você pode ver aqui, eu já testei esse projeto. É por isso que eu tenho essa linha. Então aqui eu tenho um domínio, L Trello.com. Isso é o que estamos registrados, mas esse é o endereço antigo da API. Eu não preciso disso. Devo voltar para dentro do meu painel de SNA principal e copiar este domínio e colá-lo aqui, que na verdade significa em nossa máquina local, quando estamos pulando dentro da dose ultra baixa, quando não olhando na tabela de pesquisa de DNS, estamos apenas apontando para o nosso endereço IP do servidor. Então, agora o momento da verdade, vamos abrir nosso projeto. Estou escrevendo dentro do navegador L Trello.com. E isso, você pode ver que este é o nosso projeto. Está funcionando. E, na verdade, eu quero abrir aqui console para que possamos verificar se temos alguns erros. E, na verdade, aqui temos um host local estreito para 1001 usuários de elevador de gelo lamacento da origem, eu vou Trello e, na verdade, como você pode ver, rede, este é o nosso pedido para API. Este é http localhost 4.001 pares slushy mais usuário. E, obviamente, isso é forte. Isso não é o que precisamos usar. É por isso que devemos voltar ao nosso projeto e entrar no cliente localmente e alterá-lo. Então, aqui está a fonte, o meio ambiente e o protesto ambiental do nosso cliente . Aqui. Obviamente, esse host local não existe. O que temos agora aqui é uma API de barra CTP L Trello.com e a mesma aqui, http L Trello.com. E então não precisamos fornecer aqui um porto. E agora devemos cometer essas mudanças novamente. É por isso que git add git commit e depois git push. Agora queremos pular para o nosso servidor, sair e dizer pasta Trello e certo, obter ***. Mas depois disso, devemos construir nosso cliente novamente porque mudamos nosso cliente. E para fazer isso, podemos escrever c, d client. E agora, novamente, npm run build e ele simplesmente gerará arquivos estáticos rápidos para o frontend, nosso projeto é construído com sucesso. Estou recarregando a página aqui e não temos um erro. Temos aqui para 01, para HTTP L trailer com slash APIs slash user. Isso é totalmente bom. Não estamos trancados. Agora vamos tentar registrar o usuário. Então, aqui estou eu escrevendo f2 em gmail.com. Aqui está nosso nome de usuário e senha 123 ocultos aqui registre-se. E, na verdade, funcionou. E isso é importante verificar porque significa que aqui configuramos o MongoDB com sucesso porque essa solicitação de postagem é enviada para a API e esta é a nossa resposta. E aqui estamos recebendo de volta o anúncio do usuário salvo e aqui o token. Portanto, nosso back-end e DPI também funcionam. Agora, aqui temos um quadro e aqui vou criar meu primeiro quadro. Vamos apertar Enter e estamos pegando nosso quadro, podemos abri-lo. E aqui estamos dentro do quadro. Agora vamos verificar se nosso soquete IO está funcionando para isso. Quero duplicar esse toque aqui e tentar criar uma lista. Então, aqui, por exemplo, primeira lista, estou acertando aqui pelo menos, e estamos recebendo a lista. E também na próxima etapa, estamos obtendo exatamente a mesma lista. Agora, aqui no segundo mandato, podemos criar um novo cartão. Por exemplo, primeiro cartão, estou acertando aqui, adicione e estamos recebendo esse cartão nas duas páginas. Agora, aqui podemos abrir nosso modelo e ele está funcionando conforme o esperado, o que na verdade significa que implantamos com sucesso nosso projeto na produção. Não foi fácil, mas isso é a base de qualquer projeto que você possa implantar. Não importa qual visão angular reaja. Qualquer cliente que você quiser, JavaScript simples ou qualquer back-end, sempre será muito semelhante. 48. Trabalho de casa: Meus parabéns, você terminou este curso com sucesso, e eu realmente acho que você é incrível e aprendeu muitas coisas. Agora, com certeza, você aprendeu como criar seu projeto full-stack com Node.JS no back-end e express como um serviço. Além disso, você pode com certeza usar facilmente o soquete IO porque o usamos bastante no cliente. Você novamente, muita experiência em relação a n Cooler TypeScript, ótimo e interfaces e criando um bom estado reativo. Mas, obviamente, não é o fim. Como um bom professor, devo lhe dar lição porque, na verdade, se você quiser melhorar suas habilidades como desenvolvedor, deve aprender e criar seus próprios projetos. E aqui você tem duas possibilidades. Você pode criar seu próprio projeto do zero. Isso é o que eu realmente recomendo, ou você pode implementar recursos neste projeto. E, na verdade, há benefícios em ambas as possibilidades. Se você continuar implementando este projeto, você já tem uma arquitetura muito boa e será muito mais fácil para você. E, na verdade, a quantidade de recursos que você pode implementar neste projeto é realmente tremenda. Em primeiro lugar, você pode implementar aqui diferentes funções. Por exemplo, como usuários administradores que podem criar, por exemplo, equipes, o que na verdade significa que você começa a organizar as pessoas dentro do Teams, assim como no Trello real também, por exemplo, no front-end, você pode implementar arrastar e soltar para tarefas dentro do quadro. A variante mais fácil para você seria abrir o aplicativo oficial do trailer e apenas olhar para o conjunto de recursos e apenas implementar algo que seja interessante para você. E, na verdade, isso é super importante e está relacionado ao seu próprio projeto. Se você planeja fazer seu próprio projeto, eu recomendo que você implemente algo em que esteja realmente interessado. Porque se o seu projeto não for interessante para você, você não o fará por um longo período de tempo. E se você está procurando ideias para seus próprios projetos, interrompa muitas delas. Por exemplo, você pode implementar um choque de comércio eletrônico, ou talvez uma livraria, um clone da netflix ou um aplicativo financeiro para gerenciar suas despesas. Eu realmente espero que você tenha gostado deste curso e tenha aprendido muito e nos veremos no meu próximo curso.