Guia de desenvolvimento do Blazor WebAssembly

1. Introdução: Bem-vindo a este curso, desenvolvimento web moderno com blazer e feito cinco. Neste curso, você aprenderá a construir uma aplicação de blazer dos adultos usando técnicas e recursos de nível empresarial. Sou seu instrutor, Terroir Williams e tenho mais de 10 anos de experiência tanto implementando sistemas como treinando pessoas como você para desenvolvê-los. Então eu posso garantir que este é o curso para você e você vai estar em boas mãos. Agora, como introdução, queremos saber o que é o blazer Blaser é uma das mais recentes tecnologias de desenvolvimento web da Microsoft. Sim, tínhamos a luz prateada e o interruptor, mas não o blazer, parece que está aqui para ficar. Ele nos dá cria alternativa ao JavaScript quando consideramos construir aplicativos interativos de uma página, é leve, versátil e suporta tanto WebAssembly quanto nosso aplicativo regular dotnet cenários de implantação. Neste curso, você vai aprender desenvolvimento básico através da construção de WebAssembly totalmente funcional, por favor, nossa aplicação. Você também vai entender todo o fluxo de trabalho e a estrutura de pastas dotnet cinco. E, em última análise, queremos, é claro, usar nossas habilidades para entrar no local de trabalho com eles, então, código limpo e estaremos explorando algumas de nossas opções quando se trata dessas coisas. Neste curso, você vai aprender sobre Entity Framework Core. Você é mais recente para aprender a manipular e desenvolver nossa API de descanso onde, o que está no atordoamento dotnet Core Services, quem eu fui olhar para padrões de codificação, controle de código-fonte, implantação e hospedagem. Este curso é repleto de informações para guiá-lo para o sucesso. Agora este é um grande curso que é silencioso alguns pedaços de conteúdo e, você sabe, eu não vou passar por tudo isso. Vai sair à medida que avançarmos. E estou muito entusiasmada por te ter aqui. Vejo-te na próxima lição. 2. Instalar Visual Studio 2019 Edição da comunidade e . Rede 5 SDK: Pessoal, hoje vamos começar a instalar Visual Studio Community Edition e.net cinco. Agora, nossa jornada começa aqui no site do Visual Studio, que você pode acessar através de uma simples pesquisa do Google. Ou você pode tentar reproduzir esse URL, que é Visual Studio dot microsoft.com barra VS comunidade barra. Agora, existem adições diferentes do Visual Studio. E a comunidade é aquela que é, é gratuita para uso individual e essa é a que vamos usar. Então você pode ir em frente e baixar o Visual Studio, que lhe dará o instalador do Visual Studio. E quando isso estiver concluído, podemos ir em frente e executar esse arquivo. Vamos lançar os pontos de verificação de segurança que você pode ter, mas você pode continuar para permitir que o instalador comece. E tudo isso é onde você realmente define o que Visual Studio será capaz de fazer. Portanto, esses são chamados de cargas de trabalho, e cada carga de trabalho irá expor um conjunto de recursos diferente para você. Então, para desenvolvimento web, você vai querer obter o ASP.net e a carga de trabalho de desenvolvimento web. Para desenvolvimento de desktop. Você deseja obter o desenvolvimento de desktop net ou fazer upload. E para qualquer outro SDK ou tipo de projeto que você queira desenvolver, você pode ir em frente e obter a carga de trabalho associada a ele. Não, para este exercício, queremos preparar o nosso estúdio de resultados com os recursos necessários para o desenvolvimento web. Mais uma vez, você pode ir em frente e levar tantas dessas cargas de trabalho. Cada um virá com seu próprio tamanho e lhe diz quanto espaço é necessário com base nos que você selecionar. Mas, no mínimo, para desenvolvimento web, você quer ter certeza de que você tem ASP.net e desenvolvimento web marcado. Você pode ir em frente e pegar as outras ferramentas de desenvolvimento, se desejar. Mas eu não estou disposto a fazer isso porque estes são todos.net framework 644.84.6, desculpe, 4.74.8. Mas vamos instalar o documento cinco em poucos minutos para que você possa fazer isso e deixar o Visual Studio instalar. Isso vai demorar um pouco para que você possa tomar uma xícara de café e voltar. Agora, uma vez que o download e a instalação estão concluídos, você tem duas opções. Você pode ir em frente e entrar. E assinar o que significa que você entra com seus cones vivos. Se você tiver um, se não, então vá em frente e crie um. É gratuito e torna a vida mais fácil se você apenas criar um e realmente entrar. Mas vou em frente com uma opção não nula talvez mais tarde. E então você escolhe suas configurações gerais. Então eu acender o tema escuro e você pode escolher o que eles querem, quais configurações de desenvolvimento ou geral. Vou deixar o meu em geral, mesmo que estejamos fazendo o que desenvolvimento. Mas eles basicamente apenas otimizam certos atalhos de teclado e o layout com base em sua seleção. Vou deixar o meu em geral. Vou começar com o Visual Studio. Certo, assim que isso for feito, você será solicitado com esta neve. Se você não entender isso, então tudo bem. Mas é por isso que eu teria sugerido que você se inscrevesse com seus cones de vida porque então tudo você tem um período de teste de 30 dias. E se você não quer o topo do cone, então eles basicamente vão dizer para você sair. Então você pode realmente ir em frente e entrar. Então eu vou assinar com a minha própria. E uma vez que você assinou e, em seguida, você vai ver que ele não está licenciado para você e ele só parece enviar mais convidativo. Então agora, em vez de sair do Visual Studio, posso fechar. E este é o Visual Studio no nível básico. Agora temos o Visual Studio. O que também precisamos é o.net 5. Assim, você pode chegar à página de download net cinco através de uma pesquisa simples do Google mais uma vez. Ou você tenta reproduzir esse URL, qualquer que você achar mais fácil de fazer. Neste ponto, você deseja baixar o SDK e o tempo de execução. Então deixe-me começar fechando o Visual Studio porque ele precisa instalar extensões para ele. E o instalador está sempre disponível para você. Então, se você não adicionar uma carga de trabalho, só para que você saiba, você pode realmente apenas clicar em modificar e, em seguida, ele irá reiniciar esse pH com tudo o que o trabalhador diria se mais tarde você quiser que ele faça algo novo, você só precisa modificar essa carga de trabalho , em seguida, você obterá esses modelos de projeto em conformidade. No entanto, vou fechar o Visual Studio, para que possamos continuar com nossas instalações. Então vamos pegar o.net cinco. Agora você pode ver que os SDKs disponíveis com base em seu sistema operacional, eu tenho um sistema operacional Windows 64 bits trabalhando com retina, então eu vou em frente e baixar isso. E enquanto esse está baixando e apenas Lindsay aperte o botão Voltar e passar para o tempo de execução, que é absolutamente necessário para hospedagem. Então você vê que é o suporte de tempo de execução. Então, se você estiver indo para hospedar o aplicativo do.net cinco em, em um servidor local, então você definitivamente precisa do tempo de execução. Então você pode apenas obter este pacote de hospedagem que eles têm lá disponível para download. Então você pode baixar ambos e quando eles terminarem. Então, quando os SDKs terminarem, você pode ir em frente e instalar esse 1 primeiro. Não deve demorar muito. E tudo bem, então é bem sucedido. Depois de instalar o SDK, queremos apenas ter certeza de que temos tempo próprio. Também concorde com qualquer coisa, e vá em frente e execute sua instalação. E ele vai deixar você saber quando ele for concluído com sucesso, saber que temos o SDK está completamente instalado. Eu só queria iniciar o Visual Studio e mostrar o que você ganha com esses SDKs. Então, se eu for em frente e criar um novo projeto por causa das cargas de trabalho que tenho disponíveis para mim, verei diferentes modelos de projeto. Então eu escolhi apenas o nó web worker. Então eu tenho a capacidade de fazer um console regular para cima. Tenho o núcleo ASP.NET. Na verdade, eu acho que este vem por causa da carga de trabalho da área de trabalho, mas neste momento eu não estou tentando descobrir o que funcionou, quem pertence a qual. Basta saber que se você está indo para estar fazendo nosso projeto web, você tem a opção de escolher um aplicativo web core, um aplicativo blazer, e você pode escolhê-los se você não vai fazer para R.NET framework, alguém para escolher uma aplicação Web. NET Core. Esta não é a aplicação que estamos construindo. Só estou mostrando suas opções. Então vamos em frente e colocar o nome do projeto poderia criar. Em seguida, a partir da lista suspensa aqui, você pode escolher se deseja um Core 2.13.1 ou o mais recente dominate core 5. E com isso, você poderá escolher os diferentes modelos e prosseguir. Então, quando voltarmos, vamos realmente criar um projeto e fazer um tour fora das estruturas de pastas. 3. UPDATE: instale Visual Studio 2022 Community Edition e . NET 6: Ei pessoal. Nesta lição, estaremos instalando o Visual Studio 2022, que vem com dotnet six, que é o dotnet mais rápido até agora. Então, para começar, só precisamos ir até o Visual Studio dot Microsoft.com slash downloads. E então iremos em frente e vamos o download gratuito na edição da comunidade, que nos dará um instalador. Assim que executarmos esse instalador, poderemos selecionar as cargas de trabalho que queremos. Nenhuma carga de trabalho realmente se refere às bibliotecas ou bibliotecas de suporte para o tipo de up que você está interessado em criar. Portanto, neste caso, definitivamente queremos obter essa carga de trabalho de desenvolvimento web ASP.net e desenvolvimento web. Mas então, se você estiver interessado em outras tecnologias, você pode ir em frente e selecioná-las. Assim, você pode ver que tenho várias cargas de trabalho selecionadas com desenvolvimento do Azure, NodeJS e desenvolvimento de desktop. Assim, você pode ir em frente e selecioná-los também. Eu acho que eles serão úteis com outros projetos que você pode acabar construindo tudo, uma vez que você tenha feito isso, você pode ir em uma vez que você tenha feito isso, frente e clicar em Instalar, o que seria feito no canto inferior direito. Obviamente, quanto mais cargas de trabalho você selecionar, maior o tamanho do download. Então, depois de concluir isso, você poderá continuar. Agora, quando isso não carregar estiver concluído, você pode ter certas opções que eu não vou ter porque já o tenho instalado. Então, isso o guiará pelo que esperar. Você pode ter uma opção na qual você escolhe seu tema. Como você pode ver, estou usando o tema escuro, mas então você tem a opção de um tema claro, um tema azul. E o problema é que o Visual Studio 22 tem muito mais temas do que seus antecessores. Então, mesmo que você não queira iluminar os temas iniciais, você pode obter todos os temas se precisar deles. Além disso, você pode ser solicitado a fazer login. Portanto, se você já tiver o 2019 instalado em sua máquina e acabou de instalar em 2022, você já entrou em 2019, provavelmente não solicitará que você faça login novamente. No entanto, se esta for sua primeira instalação do Visual Studio, você pode ser solicitado a fazer login ou criar uma conta ativa, ponto em que você gostaria de usar apenas sua Microsoft emitida em tempo real em todos os loci me ensinam muita calma em cones. Ou você pode simplesmente ir em frente e criar um. E se eu, se minha memória me servir corretamente, você pode usar outro endereço de e-mail que não seja da Microsoft secreta a saliva fria. No entanto, quando você estiver nesta tela de aterrissagem, é aqui que você cria um projeto. Portanto, não vou criar nossos projetos. Não, só estou mostrando o que esperar. Então, basta ir para Criar novo projeto. E então, abaixo disso, você poderá escolher seu modelo. Então, como este é um curso blazer, gostaríamos de procurar blazer. Você vai em frente e procure por modelos se não vê como uma das primeiras coisas aqui. Depois de fazer isso, você pode dar o nome a ele. Mais uma vez, não estamos criando nada ainda. Quando você pressiona Avançar, então você escolhe a estrutura que você preferir. Então você começará a ver dotnet Core 3.1, dotnet five e dotnet Sikhs, que tem suporte a longo prazo. Então, neste momento, como estamos usando o Visual Studio 2022, você provavelmente desejaria maximizar seu potencial e usar dotnet seis. Mas então você vê que você tem outras opções. Mas quando voltarmos e estamos criando um projeto e analisaremos o que exatamente precisa ser selecionado até agora, não, depois de chegar até aqui, então você instalou com sucesso Visual Studio 20226. 4. Crie uma conta GitHub: Ei pessoal, neste vídeo estaremos criando ou contas do GitHub. E esta é uma coisa muito simples, envelhece, torna muito fácil para nós nos inscrevermos. Você só precisa ir para GitHub.com. Faz GIT HUB DOT COM, github.com, e você vai pousar nesta página. Agora a partir daqui, se você já tem uma conta e você pode entrar e você pode praticamente parar de assistir o vídeo aqui. Se não o fizeres. No entanto, então o formulário central está bem aqui. Você pode fazer uma pequena leitura, apenas recebe uma apreciação do que o GitHub é quatro e é tudo sobre, eles têm preços, então eles oferecem planos empresariais e planos de educação e plantas diferentes ou situações diferentes . Mas para o desenvolvedor solar ou para equipes muito pequenas que podem não ser de nível empresarial do que eles são. Te dou muito de graça. Então, para se inscrever, você só precisa inserir um nome de usuário, endereço de e-mail e uma senha. E uma vez que você forneceu todas essas coisas e desde que seu nome de usuário é único o suficiente, claro, então você clica em se inscrever no GitHub e você deve estar dentro. Então eu já tenho uma conta, então eu realmente vou entrar. Você viu que minhas sobrancelhas estão enlouquecendo tentando fornecer informações. Por isso, vou iniciar sessão com a minha conta existente. Então esse é o meu bem, você pode usar seu nome de usuário ou endereços de e-mail para entrar e a senha. E aqui estou eu, esta é a minha página inicial, então eles realmente te dão um senso de comunidade. É quase como um Facebook para desenvolvedores, até certo ponto, você pode seguir as pessoas. E uma vez que elas seguem as pessoas, você vê suas atividades na página inicial, você pode ir para o seu repositório. Então, obviamente, se você é novo para se levantar, então você não teria nada listado para o lado aqui. O que eu não sou novo. Tenho estado muito ocupado colocando conteúdo no YouTube, quase qualquer pequeno projeto de estimação que é eu começar, eu tenho um repositório do GitHub ou realmente eu preciso passar por ele. Assim, e também tive alunos que me adicionassem ao seu repouso no passado para que pudéssemos colaborar. Talvez eles estivessem tendo um problema e eu poderia apenas verificar o código deles através do repositório. Todas essas coisas são possíveis através desta foto verbal. Mas uma vez que você criou seus cones e você está conectado e bem, você obviamente não veria o que eu estou vendo mais uma vez. Mas isso completaria a inscrição. 5. Crie um projeto de blazor: Ei pessoal, bem-vindos de volta. Então neste vídeo vamos passar muito tempo. Nós só queremos ir em frente e criar um novo projeto de blazer. Então vamos fazer é abrir o nosso Visual Studio e, em seguida, vamos para criar um novo projeto. E então a partir daqui, vamos querer olhar para os modelos blazer up. Então você pode não tê-lo à esquerda se você nunca criou antes, mas então você não seria capaz de encontrá-lo na lista de modelos aqui. E, em seguida, com base nas cargas de trabalho que você pode ter instalado ao configurar o Visual Studio. Pode não ser visto no topo. Então você sempre pode usar uma pesquisa e você pode digitar blazer e ele irá filtrar essa lista de modelo de projeto, trazendo o blazer até o topo. Então você pode ir em frente e clicar duas vezes nisso. E, em seguida, para o nome do projeto com base no tipo de projeto que estaremos construindo, que é um aplicativo atual ou aplicativo de gerenciamento atual. Vou em frente e chamá-lo de gestão atual para que você possa nomear o que você estiver mais confortável. Mas depois de dar-lhe o nome, basta ir em frente e clicar em Criar. E, em seguida, a próxima tela é uma tela muito crítica. Então deixe-me orientá-los através das opções que são apresentadas e quais são as implicações de qualquer uma delas. Então, em primeiro lugar, temos a opção de usar o servidor blazer. E se você ler a descrição é um modelo para criar, mas ele tem um servidor até que executar o lado do servidor e ele é executado usando o.NET Core também. Sinal são tão bonito que isso só vai nos dar um site como qualquer outro site.NET Core, se você já usou núcleo.net antes, e ele tem que ser implantado em um servidor, talvez ISR em apenas esse código, implantar nosso site regular que como este teria que ser implantado. Ele usa sinal ou quem quer que tipo de nos dar uma sensação em tempo real para a nossa aplicação. Então não é a pior opção, mas é claro, contexto vai definir se você precisa usar este, r nada. A opção blazer Web Assembly, no entanto, nos dá a opção de ter um aplicativo Web Assembly. E web, web assembly é um padrão aberto que permite que os aplicativos sejam executados diretamente dentro do navegador. Isso significa que estaremos criando um poderoso aplicativo web verbo que irá interagir com uma API, mas não precisa de um servidor para ser hospedado. Tudo bem, então uma vez que um cliente ou alguém navegue para este site, o tempo baixo inicial pode demorar mais do que o servidor configurado, mas ele vai realmente baixar todo o aplicativo e todas as dependências ali mesmo para o computador. E ele será executado inteiramente fora do navegador, reduzindo a necessidade de ida e volta para o servidor toda vez que ele precisa de dados. As implicações deste nulo seriam que todos os seus binários, todas as suas dependências são e sabem quando estar na máquina de outra pessoa. E se eles têm alguma intenção em relação ao que quer que seja que seu aplicativo pode fazer, então eles podem causar algum dano se souberem o que estão procurando. Então você sabe, você tem que levar cada um em um passo e tomar a melhor decisão com base no contexto. Então, para este curso real, estaremos usando Web Assembly. Mas então, se você olhar para a direita, você verá que você tem a opção de fazer. Principal dominante hospedado Web Assembly up. Então isso é como um híbrido entre um servidor e nosso subconjunto. Então eu realmente vou fazer isso porque ele nos dá a capacidade de criar todo o lado do Assembly da Web, que é a interface do usuário, bem como o lado da API, que representaria o servidor em oposição a o aplicativo do servidor, que já discutimos é realmente como qualquer outro aplicativo principal dominar. Se você não está familiarizado com 0.1x principais aplicativos com um MVC IRAs são sites, aplicativos funcionam. Então você pode conferir meus outros cursos onde passamos por esses tipos de sites. Mas, por enquanto, estaremos construindo a montagem web usando o núcleo ASP.net hospedado e as aplicações web progressivas. Ou o propósito da opção Progressive Web Application é nos permitir criar um aplicativo que as pessoas realmente não podem carregar em sua máquina. Então estamos passando do DOE carregando para o navegador e nenhum lugar falando sobre baixar para o seu computador. Então o site iria realmente descer para a sua máquina e você pode executá-lo e executá-lo exatamente como você faria com qualquer outro programa em sua máquina. Então é isso que uma aplicação web progressiva permitiria. Tudo bem, então você teria que carretel até um navegador toda vez que você queria apenas embora tíquete e uso. E outro benefício é que aplicativos web progressivos também podem ser baixados para telefones celulares e executados quase nativamente. Então, é um recurso muito poderoso para entrar. Então, vamos em frente e incluir ambos os aplicativos web hospedados e progressivos do ASP.net. Mas então eu só queria empurrar o Chuck um pouco antes de seguirmos em frente. E queremos analisar nossas opções de autenticação para que possamos ler Não, está em nenhuma autenticação. Podemos mudar isso e podemos ver o usuário individual um cone. Então o que isso vai fazer é realmente nos permitir ter a capacidade de gerenciar toda a nossa autenticação, autorização e operação relacionada ao usuário. Tudo viria embutido, não teria que fazer muito mais trabalho para incluir todas essas bibliotecas. E esta distribuição de Web Assembly e dominar o núcleo do aplicativo hospedado. Ele realmente nos permite usar o servidor de identidade, que é construído sobre os padrões abertos fora, que é basicamente como, certo? Não, esse é o padrão de segurança de camada superior para autenticação. A maioria dos sites na internet usa, e isso nos permite ter suporte para autenticação local, bem como autenticação de terceiros. Então isso foi um pouco de informação vindo para você quando estamos criando este álbum. Faz Latino todas as opções. Quais são os prós e contras de cada opção. Mais uma vez, reforçar esse contexto determinará qual é o melhor para a sua situação. Agora queremos fazer o trabalho, o blazer Web Assembly com o.NET Core hospedado recursos de aplicação web progressiva incluídos, queremos adicionar individualmente contas de usuário como autenticação. E é claro que é ponto net cinco core curso. Portanto, precisamos ter certeza de que fizemos isso cinco selecionados. Tudo bem, então podemos ir em frente e clicar em Criar. E uma vez que isso é concluído, onde recebido com Visual Studio e nosso explorador de soluções e toda esta interface. E vemos alguns arquivos em nosso explorador de soluções. Então eu vou fazer uma pausa ali mesmo porque você tem muita informação. Basta saber que você pode rever essa seção sobre suas diferentes opções sobre o que todas elas significam. Mas no próximo vídeo, eu vou dar a vocês um tour pela estrutura de pastas para que possamos entender exatamente o que cada arquivo serve e como eles se unem para fazer nossa aplicação. 6. Registre arquivos de projetos e pastas: Ei pessoal, bem-vindos de volta. Então, nesta lição, nós só queríamos fazer um rápido tour pelo blazer, todos os arquivos que estão incluídos neste modelo de projeto. Então você pode lembrar que quando criamos este projeto, queremos blazer selecionado Web Assembly dois emitted.net Korea hospedado. Incluímos os conjuntos progressivos de recursos da aplicação web, bem como a autenticação incluída. Então algumas coisas aconteceram bem ali. E além de tudo isso, são o.net cinco ou.NET Core cinco projetos. Então nós só queria ter uma apreciação completa sobre, eu vou puxar tudo neste projeto funciona. Então vamos começar com um fundo que vai meu explorador de soluções apenas à minha esquerda, se este é o primeiro curso que eles estão fazendo comigo, basta segurar minha configuração do Visual Studio. Caso contrário, você saberia que você pode arrastá-lo para a esquerda, você pode arrastá-lo para a direita e para qualquer lado, mas parece mais natural para mim. Então eu sempre vou para a esquerda quando eu estou mostrando a estrutura de pastas onde você pode apenas seguir junto com o seu acordo. Então vamos começar com o fato de que quando olhamos para o explorador de soluções, temos nossa solução, é claro, qualquer que você nomeou Projeto ou a solução. Mas então você percebe que você tem três projetos. Você tem carro ou em gerenciamento, cliente, servidor de gerenciamento atual e ponto de gerenciamento atual compartilhado. Então você tem três projetos. Embora a caixa, porque criamos nosso aplicativo hospedado núcleo de assembly web. Então, para o contexto, se não escolhêssemos a opção hospedada do Núcleo NET, então teríamos apenas obtido o projeto do cliente de gerenciamento de aluguel de carros. Então, não teria obtido essas ferramentas, teria apenas obtido este projeto Web Assembly. E então teríamos que nos conectar a uma API em algum lugar e fazer o que temos que fazer para que ela realmente tenha funcionalidade. Mais uma vez, isso é quase como um site estático, todo esse projeto, todos esses arquivos que eu estou destacando quando ele compila, aquele programa, esse projeto , esse site, tantas maneiras de colocá-lo. Nós só não vamos carregar para o cliente mushy e para o navegador e executar a partir daí. No entanto, porque fizemos dominar o núcleo hospedado, o Visual Studio proporcionou de neve é a capacidade de realmente criar o APA tudo em um. Assim, o aplicativo de servidor de pontos servirá como a API. Então isso terá que ir em algum servidor, talvez um servidor IIS em hosts estejam no Uzziah ou em qualquer lugar. E então nós vamos apenas conectar através da internet a partir da Web Assembly para nosso projeto API ou funcionalidades API que temos em nosso projeto de servidor. Tudo bem, em poucas palavras, é por isso que temos esses dois projetos, servidor ponto e cliente. O Departamento de Defesa compartilhado é como, você sabe, ponte que eu tenho entre os dois porque pode haver classes que a ferramenta pode ter em comum ou objetos de dados. Então, em vez de criá-los duas vezes, eles apenas nos dão um ponto compartilhado. Portanto, ambos os projetos fazem referência à seção de documentos compartilhados e alavancar o já criado cruza nossos recursos. Agora você provavelmente perceberia que cada vez que eu clicar em Up Project, o arquivo de projeto real aqui, esse arquivo CSB, ele abre uma guia e é apenas um arquivo XML. Então isto é, tudo o que eu quero salientar é o fato de que todos eles estão dizendo “framework.net 5 “alvo, certo? Então, todos eles estão mirando o.net 5. Então, vamos dar uma olhada no projeto do cliente por um pouco. Assim, no cliente sob este nó você tem suas dependências. E se você quiser detalhar, você vê analisadores ou o projeto diz que C8 ou França é o projeto compartilhado ali, ou os pacotes. Não vou me aprofundar muito no que pacotes, frameworks e analisadores fazem à medida que o projeto continua. Aqueles que fazem mais sob propriedades, temos este arquivo chamado Lançamento settings.js sanduíche. Obtido ele só tem algumas configurações para que nosso aplicativo possa ser executado. Quando está correndo. Ele deve ser executado nos problemas de endereço http localhost do que se é SSL ou HTTPS, ele terá esse número de porta. E há as configurações lá que, caso a caso, talvez precisemos vir aqui e mudar as coisas, mas eu não quero sentar aqui e falar com vocês sobre cada pequeno porque as chances são que você talvez não precise interagir com alguns destes. Então vamos seguir em frente. Então www root, que vai armazenar nossos arquivos estáticos ou recursos CSS. Ele vem embutido com Bootstrap e aberto icônico. Então, eles estão dando algumas coisas prontas para ajudar você a começar seu design. Você tem o arquivo index.html. Se você faz o que bys n há algum tempo, você sabe que o índice deve ser sempre seus primeiros arquivos. Então o que acontece é que quando o aplicativo cliente é executado, ele sempre vai olhar para o arquivo de índice. E, em seguida, o arquivo de índice é onde nós definimos referências para todas essas coisas. Temos o nosso título. Então você é, se você está familiarizado com HTML e o esqueleto básico, isso não deve parecer muito estranho para você até pelo menos a parte onde ele diz div ID up carregamento. E então dá um erro se não pudermos carregar. Então isso é como nosso pequeno arquivo template para dizer esta div onde o aplicativo será renderizado. Tudo bem, o manifesto JSON assim como o trabalhador de serviço. E esses dois realmente estão lá para apoiar ou ambições de aplicações web progressivas. Certo, então quando chegarmos a esse ponto, então podemos olhar mais para isso, mas é por isso que você tem esses dois arquivos. Se você não quer ter esses dois arquivos, então ele é propenso a fazer com que ele não escolheu aplicações web progressivas. Vamos passar para páginas e páginas. É aí que vamos definir literariamente as páginas que precisamos para construir nossa aplicação. Então você pode ver que ele veio com alguns já dados para nós, um para autenticação, tudo bem, um como um contador de amostra, buscar dados e o índice, tudo bem, então índices onde ele irá primeiro. E à medida que construímos o aplicativo de carga, estaremos adicionando mais páginas. E com mais páginas vêm mais estradas compartilhadas terá quaisquer páginas são componentes. Então, estas são páginas. Você vai notar que eles são a mesma extensão de arquivo dot navalha, o que a página seria a coisa toda. Enquanto componente r é reutilizável em vários lugares. Então é por isso que no compartilhado nós chamaríamos esses componentes porque qualquer um do menu de navegação, que você sabe, iria aparecer em muitas páginas diferentes por todo o lado. Você tem o layout principal. Que é, este é o nosso modelo real onde ele apenas renderiza o corpo fora do que está na página em si. Tudo bem, avisos de pesquisa. Todos estes são apenas componentes reutilizáveis e eles são compartilhados porque não pode ser compartilhado entre as diferentes páginas. Temos o arquivo de importações, que fala sobre as diferentes bibliotecas que gostaríamos de usar dentro de nossos PHs e nossos componentes. Vamos construir sobre isso à medida que vamos junto com o arquivo app.js, que tipo de linhas certas seções. Então aqui você vê que ele tem autenticação em cascata no estado. E então ele fala sobre se ele não está autorizado, o que ele deve fazer e se ele não for encontrado, o que ela disse pode realmente tipo de estender o mecanismo de roteamento original do blazer até dizer que sob certos circunstâncias por padrão, você deve fazer isso ou fazer aquilo. Então é isso que avaliador app.all navalha meio instalação. Em seguida, passamos para o nosso arquivo program.cs. Agora aqui está um arquivo muito, muito, muito importante. Neste arquivo, nós realmente vemos que queremos que todas essas coisas estejam no lugar no momento em que o aplicativo é iniciado. Tudo bem, então program.cs vai conter nosso mecanismo de inicialização, a configuração de inicialização. Então basicamente qualquer coisa que você vê aqui está vendo na inicialização, no momento da inicialização, isso é o que eu queria que acontecesse. Então vamos tomar, por exemplo, este, este construtor, os construtores dizendo que eu quero construir um monte de configurações para execução. Tudo bem, então se você olhar para a primeira linha, é aqui que ele define um construtor. E então a última linha executa esse construtor. Então tudo no meio está adicionando ao construtor. Componentes raiz do ponto do construtor, adicionar hashtag up. Onde vimos hashtag acima ou que relevância é essa? Se olharmos para trás para o arquivo de índice em nossa regra www para ver que temos uma div com o ID para cima. Tudo bem, então isso é realmente só ver que nós queremos somar. Up é apenas essa palavra-chave global para a ferramenta blazer up, qualquer componente ou qualquer elemento HTML tem o ID. Se você sabe CSS, você não sabia que a hashtag realmente significa ID. Então, qualquer elemento que tem o ID acima, tudo bem, e como ele vai junto, ele constrói, ele cria um cliente padrão, que vai olhar para o projeto de servidor que Kim built-in com nosso modelo. Nós também temos este cisne onde estamos vendo, eu procuraria para baixo, estamos adicionando o, Bem, o próprio cliente para o construtor de clientes HTTP. Então tudo isso está sendo feito por você. Se você tinha outra API que você queria adicionar ou interromper também, se então você teria que fazer algo semelhante para ter certeza de que este APA é facilmente acessível de qualquer outro lugar em sua aplicação blazer. E então, à medida que avançamos, vemos que adicionamos alguma facilidade para autorização. Tudo bem, então isso é basicamente em poucas palavras, realmente em poucas palavras para o cliente e todos os arquivos envolvidos. À medida que avançarmos, faremos mudanças e certas coisas se tornarão mais claras e certas coisas farão mais sentido. Agora vamos olhar para o aplicativo de servidor e eu vou apenas para brilhar sobre coisas que os dois têm em comum de qualquer maneira. Então dependências que se parecem da mesma maneira. Mais uma vez, ele tem uma dependência do projeto cliente e tem uma dependência do projeto compartilhado. Tudo bem. Passamos para as propriedades. E as propriedades que temos o arquivo de configurações do gramado, já vimos isso antes. Nós também temos este para um serviço dependências, que vamos falar sobre ter uma dependência em MS. SQL. Você pode precisar estender isso. Você pode precisar mudar isso. Podemos deixar isso em paz por enquanto. Então vamos para áreas. Então áreas é apenas foi gerado automaticamente porque dissemos que queríamos incluir os serviços de identidade são os recursos de autenticação de contas individuais. Então nós temos a seção desta área que nos permite tipo de interagir com login e logout e assim por diante. Você não vê os arquivos e, em vez disso, sabe o que devemos precisar para personalizá-los. Podemos realmente gerá-los e o que queremos. Mas, por enquanto, é isso que temos as áreas para removermos isso. Temos a pasta de controladores. E se você já trabalhou com MVC, você entenderia qual é o nosso controlador. Se não, então um controlador é realmente apenas arquivo ou um arquivo de classe que tem comandos. Aceitei o nosso pedido e lhe darei a nossa resposta. Nosso pedido pode ser que eu queira ir para esta página. Quando você clica em um link, você está enviando uma solicitação para um controlador. O controlador recebe o seu pedido e , em seguida, dá-lhe a resposta na forma da página Web que solicitou. Se essa página da web não estiver disponível, isso é um GET 400 fours e se algo der errado no meio, então você recebe um erro. Então, isso é praticamente o que nosso controlador é quatro, então vamos usar controladores API porque, como eu disse, o projeto do servidor realmente serve um propósito. Manutenção do projeto do cliente com uma API. Então temos um exemplo. Terei dois controladores. Eu não vou obter muito para este com o controlador de configuração c OID porque este, este é um controlador de configuração. E mais tarde, quando estamos fazendo coisas de autenticação, vai começar a entender isso um pouco mais. O controlador de previsão meteorológica de Farnell apenas fala sobre os diferentes endpoints e é uma boa amostra para que você veja como as coisas funcionam juntas e como elas podem funcionar. Então, quando você solicita a previsão do tempo, este endpoint recebe hits, são esta ação é atingido, então ações do controlador e, em seguida, a ação é atingido, e então ele retorna esses dados. E esses dados são enviados através das fivelas de API em um cliente, e é isso que o usuário verá. Então é isso em poucas palavras, os dados irão definir algumas de nossas configurações de banco de dados e classes e assim por diante. Então, certo, não, não precisamos nos meter muito nisso mais tarde, quando estivermos sentados no topo, entraremos nesses arquivos. Modelos são basicamente apenas abstrações das classes de dados. E então podemos passar para páginas e ouvi-lo no projeto servidor Girona, C1, ph. E realmente e sinceramente, não tenho certeza se vamos realmente ver e interagir com o discurso ou qualquer outra página que fazemos aqui. Porque mais uma vez, o ponto focal do nosso AP é o lado do cliente, o aplicativo do cliente, o projeto do cliente, certo? Então o pH é pasta está lá, mas não vamos fazer muito lá. De qualquer forma. Temos settings.js filho mais uma vez outro arquivo de configuração. Temos o program.cs. E se você olhar para o program.cs aqui, é um pouco diferente do program.cs no cliente. Mas eles estão realmente fazendo a mesma coisa porque o program.cs no cliente, é o mesmo programa de classe, exceto que ele está fazendo tudo isso na função principal, certo? Se você conhece C sharp uma vez a, a primeira coisa que ele vai procurar como um arquivo program.cs, e vai executar a função principal. É assim que eles operam. Então, no projeto do servidor, temos a inicialização, desculpe, temos o program.cs. Ele tem a função principal também, mas em uma função principal está chamando outra função. E esta outra função que ele está chamando praticamente está executando o que está no startup.js. Então, se você olhar no style.css, então você verá uma configuração e configuração muito semelhantes às que vimos no program.cs no lado do cliente. Então é realmente uma coisa muito parecida. Isto é apenas configurar bootstrapper para dizer que quando o aplicativo é iniciado, estes são serviços e recursos que eu quero ter certeza que eu tenho sido satisfeito. Tão vermelho aqui parecia que eu queria se conectar ao banco de dados que pode ser encontrado na conexão padrão. Ainda não preparamos isso, mas está lá. Está vendo que queremos adicionar alguma filtragem de exceção. Queremos adicionar identidade usando o modelo de usuário do aplicativo. Vamos falar mais sobre isso mais tarde. E queremos adicionar servidor de identidade disse que é um estaria recebendo capacidades de servidor de identidade, que é quando a autenticação manipulador e autorização, queremos usar alguma autenticação JWT. Então tudo isso pode sair da caixa sem que tenhamos que fazer muita configuração. E, em seguida, ele quer adicionar controladores com vistas e adicionar facilidade para facilidade de páginas. Você também verá que há a seção middleware onde ele está adicionando outros recursos. Então eu poderia ir linha por linha. Mas então alguns deles, quando você olha para eles, eles são meio que auto-explicativos e, à medida que avançamos, vão interagir com eles mais uma vez. Então isso é realmente para os projetos de servidor e cliente. E então quando olharmos para a previsão do tempo, veremos aqui que este é realmente apenas o modelo, certo? Então, se olharmos para as referências, você vê que este modelo, este arquivo está sendo referenciado em ambos o aplicativo cliente. Então, se essa referência você vê que ele o usa no cliente ou no componente de dados buscar. E ele também o usa no servidor. Lado na chamada de API. Então eu estou apenas apontando que caixas de transporte para destacar o que o projeto compartilhado está longe porque este modelo pode atender ambos os projetos e assim por diante. Temos coisas em comum entre os dois. Podemos defini-los dentro do compartilhado. Então eu vou apenas executar este aplicativo para que eles possam ver como ele se parece. Muito bem, então este é o nosso modelo base para o nosso blazer up. Mais uma vez, este é o nosso projeto cliente em execução. Então, se você olhar para a porta número quatro para três ele para, deixe-me apenas rapidamente mostrar o paralelo. Então, se eu for para o cliente e depois ir para as sessões de gramado Propriedades, lá está para 4384. Então esse é o aplicativo cliente que temos em execução aqui. Então o contador, quando clicamos, olhe para isso, podemos clicar e ele muda. E de repente interrompi quando buscamos dados, olha para o que ele sabia. Então ele disse buscar dados, verificar o estado de login, e, em seguida, ele está lançando esta página de login. Esta página de login está realmente vindo dos Serviços de Identidade. Você vê aqui embaixo ele vendo carro no servidor de pontos de gestão. Então lembre-se que nós tínhamos a seção da área que eu apontei é realmente para o material de autenticação, certo? Assim que as páginas realmente renderizando a partir daqui. Então é assim que funciona o servidor de identidade, onde você pode realmente ficar preso a apenas reescrever, redirecionar, desculpe, uma solicitação autenticada para o servidor de identidade, e então que Pj será servido. E uma vez satisfeito, então ele vai seguir em frente. Se eu puder, o app.js e aqui é onde ele fez isso. Então ele disse que quando não está autorizado, direito, em seguida, redirecionar para login. Então leitor e um redirecionamento para login, isso é um componente. Se olharmos para o que esse componente está fazendo, e esse componente está em redirecionamento compartilhado para acessá-lo vendo, navegue para autenticação no login de barra com nosso URL de retorno e todos os tipos de coisas. Então eu estou apenas mostrando a vocês como tudo está bem acoplado, só sei que tudo parecia tão perfeito. A única coisa que realmente não viu isso sobre isso é que não é, não parece o tema geral para o pH que começamos com, certo? Essa é a única coisa que não parece muito perfeita. Mas a questão é que se eu não explicar tudo isso para você, e eu percebo que tenho tantas partes móveis trabalhando para renderizar tudo isso. Então, certo, e todas as nossas coisas de login e registro não funcionarão porque há coisas que precisamos fazer. Mas só estou mostrando como as lâminas são perspetivas. E espero que tenha gostado desta loja onde passamos por como todas essas coisas funcionam juntas. E se as coisas ainda não estão claras, barco, então, à medida que avançarmos, elas farão mais sentido. Então fique atento. Em seguida, vamos falar sobre a aparência de todo o modelo e como podemos modificá-lo. E à medida que avançamos, continuaremos adicionando funcionalidade e explorando cada vez mais barcos são opções nesta aplicação de blazer. 7. UPDATE: crie/Upgrade projeto para . NET 6: Ei pessoal, nesta lição vamos ver duas coisas. Um, como criar o projeto blazer WebAssembly usando dotnet 6. E também veremos como você pode atualizá-lo se você já o criou em donot five, o que é surpreendentemente muito fácil. Então, vamos começar com a forma como o criamos. Então, tudo o que tenho que fazer abrindo o Visual Studio 2022 em vez de 2019 porque seis são exclusivos de 2022. Então eu posso simplesmente ir em frente e criar um novo projeto. Vou selecionar meu aplicativo blazer WebAssembly, modelá-lo em seguida e, em seguida, darei meu nome. Então esse é o carro e a rede de gerenciamento 6. Estou dizendo net 6 porque já tenho o projeto dotnet cinco com o nome de gerenciamento atual no mesmo diretório. Se este for o primeiro que você está criando com esse nome, você não precisa colocar na rede seis ou pode dar qualquer nome com que se sinta confortável. Então, depois de selecionar o nome, vamos para o próximo e, em seguida, queremos selecionar qual estrutura para que possamos usar dotnet five, podemos usar o Dani core 3.1, mas dotnet six é exclusivo do Visual Studio 2020. Para também tirar o máximo proveito deste curso, você gostaria de usar Don às cinco, porque este curso é ministrado dentro do contexto de feito às cinco. E tudo o que é ensinado aqui é compatível com dotnet 6, entre outras coisas. Então você vai querer usar dotnet six e você vai querer escolher o tipo de autenticação para ser cones individuais. E você pode usar cada uma das seguintes opções. Depois de passar por tudo isso, você pode ir em frente e clicar em Criar. Agora digamos que você já tenha criado o projeto dotnet cinco e já passamos por um tour pelas pastas. E o que cada arquivo em um nível mais alto realmente representa, realmente significa e como ele é usado no projeto. Então, se quisermos atualizá-lo para dotnet six, tudo o que realmente temos que fazer e apenas alguns passos. Primeiro, queremos alterar a estrutura de destino. Então você quer clicar nesse arquivo CSV. Esse arquivo na parte superior do projeto? Basta clicar nele uma vez e ele abrirá esse arquivo editável. estrutura de destino é 6. Então isso estaria vendo 5. Você pode mudar isso para seis. E você também deseja adicionar esses dois pacotes para que você possa clicar Pausar e redigitá-los conforme necessário. Então você quer adicionar esses dois pacotes e, em seguida, você quer, se você fizer uma compilação, você receberá alguns erros. Não entre em pânico porque tudo o que você realmente precisa fazer é fazer a mesma coisa para o projeto do servidor. Permite que você meta atingiu seis e adicione os mesmos dois. Então, você poderia simplesmente copiá-los do cliente e colar dentro do arquivo do servidor. Depois de fazer isso, você provavelmente deseja atualizar a pasta compartilhada também para dotnet six. Essa parte é realmente opcional. Você também pode fazer isso. Então você quer. Portanto, existem alguns passos, mas eles são passos muito simples. Então, só estou te dando pouco a pouco. Então, para mim, a coisa mais fácil de fazer para atualizar os pacotes, porque o que acontece é que estamos segmentando dotnet six, mas tudo por padrão estaria segmentando dotnet cinco. Então você quer obter tudo até a mesma versão para que você possa gravar a solução neste momento e ir para Gerenciar pacotes NuGet para solução, o que permitirá que você apenas execute atualizações em todos os seus projetos de uma só vez. Então, vou apenas pular para atualizações, que em poucos segundos serão preenchidas. Lá vamos nós. E todas essas coisas precisam ser atualizadas de seus cinco pontos atuais, independentemente das versões para seis. Desculpe, vá em frente e diga atualização. Claro, temos que aceitar e um contrato de licença se você não estiver muito familiarizado com essa etapa, como no que é o gerenciador de pacotes NuGet e como isso ajuda, ou mais tarde, tudo isso fará sentido para você. Então, com todas essas atualizações feitas, ainda estou recebendo alguns erros e acho que isso é porque eles estão filtrando nosso estranho pouco a pouco. Mas acho que alguns projetos ainda não se apanharam. Então, vou criar, fazer uma solução de reconstrução. E agora temos tudo reconstruído com sucesso e 0 setas. Então, é basicamente assim que funciona. E à medida que você avança usando o Visual Studio 2022, você verá que as ferramentas são muito melhores. Você verá coisas que você não vai necessariamente ver na minha tela porque vou ensinar a maior parte do curso usando 2019. Mas você receberá certas dicas de código que você vê aqui que eles podem, eles estão perguntando se você deseja permitir que o código IntelliJ o monitore e o ajude. Em outras palavras, In teleco faz um intellisense aprimorado que lhe dá melhores dicas de código do que as paradas padrão. Então você vai se divertir absoluta. Outra característica legal que eles introduziram, sua recarga quente, você pode ver aqui com esta bola de fogo. Então, quando estamos criando interfaces de autor, você verá como se eu farei certas alterações no CSS ou certas coisas, então terei que reiniciar. Essa é uma das limitações de 2019. Caso contrário, se você estiver usando 2022, você pode realmente fazer uma recarga a quente e, em seguida, ele pode apenas atualizar a interface sem precisar reiniciar a compilação. Se tudo isso for punido para você, não se preocupe enquanto avança, você se acostumará com isso e começará a apreciar todas essas pequenas coisas. E se você já estiver familiarizado com a interface do Visual Studio, verá algumas coisas incríveis saindo desse novo IDE. Se você não puder atualizar, isso não é problema. Tudo o que há neste curso é amigável para qualquer um dos ambientes. Então é isso por enquanto. Vejo você na próxima lição. 8. Personalize o layout de blazor: Ei pessoal, bem-vindos de volta. Nesta lição, estaremos estudando nosso blazer. Saiba que se você está familiarizado com qualquer forma de desenvolvimento você saberia que estilizar um aplicativo web realmente tem a ver com modificar e o CSS e o HTML para garantir que podemos oferecer a melhor experiência de usuário para qualquer um que está indo para interagir com o nosso up. Se você estiver por extensão familiarizado com aplicações.NET MVC ou.NET Core MVC páginas de resultados do servidor de aplicativos. Você saberia que obtemos esse arquivo de layout layout.css HTML, que basicamente define o tom de como todas as páginas pareciam. Blazer faz isso um pouco diferente livros no final do dia, é o mesmo conceito de HTML e CSS como vimos na turnê. Temos um monte de arquivos HTML. Temos alguns arquivos CSS, e o que vamos fazer, alguns pequenos ajustes serão transformando o que está na tela nulo para parecer algo mais parecido com isso. Então eu estou dando para o campo escuro, certo? Estou tirando o marcador roxo para tossir a barra no topo, e movo a seção de navegação para a esquerda. Então, enquanto estamos fazendo essa atividade, não é muito, mas nos dará uma noção de onde podemos ir para modificar Watts. E também vamos ter um pouco de CSS inteiro. Isolamento Css funciona em blazer. Agora só um pouco de mancha. Então, um dos arquivos mais importantes será modificado em geral quando vamos estar me adicionando porque alguns temas, scripts personalizados ou qualquer coisa assim para todo o blazer up seria o arquivo index.html porque isso define o tom para o índice para o documento HTML triste com um cabeçalho tags, todos os links CSS, todos os js dot sobrinha, sua própria frente, certo, então você acabaria modificando isso em algum momento, no entanto, além disso, tudo é carregado em nossa div com a identificação para cima. Então além ou index.html Node. O próximo arquivo mais importante seria nossas principais bandejas Leo são que, em seguida, renderiza uma div chamada página, dá-nos o nosso menu de navegação para o lado, certo? E então ele nos dá nossa área de conteúdo principal onde temos a exibição de login em cima que um link de barco, e então o que vem no corpo. Então aqui é onde muita magia acontece em termos de CSS e é aqui que o isolamento CSS entra. Não há um grande arquivo CSS. Quero dizer, sim, nós temos arquivos CSS disponíveis para nós na pasta CSS. Temos app.js, CSS, que tem algum CSS geral para o aplicativo que realmente corresponde ao arquivo acima ou índice porque há uma referência, certo? Mas quando se trata do layout principal, ele tem seu próprio arquivo CSS como vimos antes. Então daqui eu posso controlar certos elementos que estão apenas neste componente. E eu posso aplicar esses estilos CSS, o que quer que seja em conformidade. Então esse é o pólo do isolamento CSS. Eu posso ter um arquivo CSS dedicado aos componentes Ariza separado do CSS UP geral. Vamos começar por uma mudança na cor da barra de navegação. Então, para chegar ao CSS barra de navegação, eu posso dizer OK, a barra de navegação seria suficiente. Menu é encontrado nesta div chamada barra lateral. Se eu passar para o principal ponto de Leodes, ponto CSS, vejo a barra lateral da classe. Então, o que aqueles que não sabem é aprendido durante o gradiente, é por isso que você vê um tipo de mudança sombreado em roxo se você quiser correr novamente e olhar para ele. Mas é por isso que muda de sombra em roxo. Então o que eu vou fazer é apenas comentar isso. Quero dizer, você pode deletar se quiser que alguém o guarde. E eu vou colocar em outro estilo como sua cor de fundo e, em seguida, hashtag e aquele saquê de valor e apenas rasgar isso fora. E isso é o que dá a ele que bom concordar não com o tipo escuro de fundo, certo? Então vamos ver como isso se parece. Tudo bem, então eu fiz a mudança e eu carrego o aplicativo e eu não estou vendo as mudanças. E agora isso é apenas algo com o cache. Você tem uma série de coisas que pode fazer aqui. Você pode limpar seu histórico e tentar novamente e qualquer navegador que estiver usando. Ou você pode segurar o controle e pressionar F5. Então Ryan, Não, esse é o gradiente mas cresceu para a barra de navegação quando eu controlo F5, então eu tenho o meu fundo escuro. Lá vamos nós. Tudo bem, então se você tiver alguma dificuldade com isso, faz o controle F5 e você deve ficar bem. Então é isso que acontece quando eu mudo o CSS nesse arquivo CSS específico para esse componente. Então vamos ver o que mais podemos fazer. Eu não disse que queríamos remover esta barra de cima. Então deixe-me voltar para o acorde, voltar para o menu principal. E esta linha de cima aqui está, top Reuters na tela de login, bem como um link de morada. Eu não quero nada disso, então eu só vou tipo de mover a tela de login um pouco e pegar isso. Na verdade, na demonstração eu tinha a exibição de login sendo exibido menu nav. Então, o que eu posso fazer é fazer a exibição de login, certo? Então isso é apenas uma referência para todo o componente chamado exibição de login. Então eu vou para o menu de navegação e ainda estou no modo de depuração, mas atualize mais cedo, em breve, em breve, desculpe. E o que eu vou fazer no menu de navegação é colar nosso componente de exibição de login, certo? Então menu suficiente tem botões para o que temos aqui? Temos casa, onde temos o balcão e temos a busca. Esses são os três muitos itens que vemos, contador de casa Fitch. E então tem algo para derrubar o menu e tudo bem. Então, o que precisamos saber é realmente certificar-se de que a tela de login esteja alinhada com a forma como tudo o resto faz loops. Porque, como vimos, havia realmente apenas links na barra de navegação. Então eu vou me refrescar e lá podemos ver como isso se parece. Certo, e é isso que estou vendo. Então eu estou vendo os dois links. O bar de cima sumiu. Tão realizado que o que as ferramentas são apenas, eles não estão se encaixando bem com o design de nossa barra de navegação. Então vamos modificar o que está na exibição de login para tipo de olhar como este. E eu só vou copiar isso porque eu sei que a maneira como os links precisam olhar na barra de navegação depende de todo esse bloco. Precisamos disso, e precisamos de todas essas aulas ao longo do caminho. Então eu só vou copiar isso, saltar para o visor de login. E então aqui veremos que temos o autorizado sob visões não autorizadas. No entanto, nós também notamos que eles são realmente apenas um monte de tags âncora, certo? Então você vai notar que esse blazer realmente vem com certos componentes que ajudam você a emular alguns elementos HTML, certo? Então link nav seria um desses componentes que lhe dá uma etiqueta âncora ou é apenas uma maneira blazer de ver Oncotype porque você percebe que ambos têm o mesmo H ref, certo? Então eu posso apenas ficar este árbitro H, substituí-lo aqui. E eu vou apenas transformar este LI. Bem, quero dizer que o LI vai me dar o tipo de ligação que eu preciso para encaixar na barra de navegação. Então eu estou realmente transformando essa etiqueta âncora neste LI. Então é isso que se encaixa, certo? Então o texto que eu quero ser dividido seria o que seria exibido aqui nesta tag âncora, os nomes de usuário Olá e nós substituímos a casa. E para isso seria o Perfis. Então eu acho que para o ícone, eu vou usar pessoas OID. Então todos nós temos, temos esses ícones disponíveis para nós através de icônico aberto. Já está incluído no projeto. Então é assim que colocamos aquela casinha no sinal de adição e assim por diante, na barra de navegação. Só para o caso de você não estar familiarizado com. Se você está, então você deve estar se sentindo bem em tudo. Tudo bem? Então esse é o único para se a pessoa está autorizada, o que significa que a pessoa já fez login que um diz perfil, o próximo diz logotipos. Então eu vou apenas duplicar que eu bit de código e substituir o que eu preciso para substituir agora e olhar para a diferença com isso. Este é um botão. Este foi feito em criptologia. Este é um botão. Vamos ver o que o botão faz. O botão tem evento onclick que diz Being begin psi nada. E, em seguida, abaixo, você vê um bloco de código com esse mesmo clique evento começar psi nada. E então o que ele faz é navegar para este URL. Então eu poderia, você sabe, eu poderia manter o botão, mas então eu estou usando links de navegação. Então, em vez de modelar o topo, eu vou apenas mantê-lo consistente de desvendar aqui, de inovar aqui. Então, o que eu vou fazer é definir o HRF para o link de navegação do logotipo para ser o mesmo URL para o qual ele teria navegado. Então, a referência de idade aqui é autenticações barra logotipos. Tudo bem? E, em seguida, este, eu acho que há um logotipo ícone Open. Se não estou enganado, lá vamos nós. Eu traço o logotipo, certo? E então eu vou apenas comentar esses dois porque eu não preciso deles. Acabei de substituí-los. A etiqueta âncora para o perfil da pessoa, bem como o botão do logotipo. Eu os substituí por links de navegação de ferramentas indo para os mesmos lugares, certo? Então você pode pausar aqui e você pode tentar fazer o mesmo com esses dois. Eu só vou fazer isso. Então eu acabei de substituir o login e registrar com as tags LI correspondentes. Tudo bem, e para o registo eu tenho o, eu traço Burson para o ícone, e depois para o login ou login tracejado, login traço, desculpe. Tudo bem. E então realmente e verdadeiramente este bloco de código torna-se inútil porque não há nada que vai chamá-lo de qualquer maneira. Mas mais tarde vamos começar a escrever o código e entender esses blocos de código e eventos. No entanto, vamos dar uma olhada rápida em como isso se parece. Certo, então é isso que temos. Não, você verá que parece um pouco mais em casa com todos os outros links olhar ambos ao mesmo tempo. Não, eles ainda não se encaixam. E este é outro ponto do blazer, a parte de isolamento CSS do blazer onde sim, eles estão no componente da barra de navegação. Mas este é outro componente por si só. Este é o componente de exibição de login, e estamos apenas chamando do login, do componente de menu nav. Mas são dois componentes diferentes. Portanto, o CSS que se aplica ao menu nav não se aplica aqui porque este é um componente inteiramente diferente. Então, o que eu teria que fazer para obter esses links para exibir como todos os outros links são exibidos. E eu vou pegar todo esse autor como você da cópia de exibição de login e depois vir aqui. E em vez de fazer referência ao componente de exibição de login, eu vou apenas fazer parte de todo esse conteúdo lá. Tudo bem, então temos a autorização, você autoriza a desconhecer os aliados, que deve ser exibido de acordo. E tudo cai nos componentes do menu nav, que significa que todo o estilo do componente agora será aplicado. Então isso é nós reiniciar e ver o que isso. E quando voltamos vemos algo diferente. Certo? Então isso parece um pouco melhor para mim. Tipo, oh, parece neve. Você pode fazer é ir em frente e clicar ao longo do caminho e você vê que o link romance funciona lá. E se eu voltar e, em seguida, eu clicar em Registrar e ver que ele funciona lá também. E assim podemos ter certeza de que todos os nossos links funcionam. Tudo parece uniforme. E mais uma vez, ele, além das nuances que temos que compartilhar nosso CS, ou eles não têm certeza do CSS entre os componentes. Você pode ver onde é bastante a mesma coisa quando se trata de styling em blazers, apenas que eles lhe dão a capacidade de aplicar algum componente CSS exclusivo, se você quiser. Mas, em última análise, você pode estilizar tudo a partir de uma protease como com qualquer outra aplicação. 9. Como criar componentes de blazor: Nesta lição, vamos dar uma olhada em alguns componentes de blazer e como podemos criá-los, para que eles podem ser usados. E isso é apenas um brilho sobre qualquer lugar e começou o aplicativo AR que ainda estamos aprendendo sobre, nosso ambiente blazer e todas as coisas que ele nos oferece. Então eu não vou ficar muito em profundidade, mas o que eu quero falar é sobre um inteiro, nós podemos criar mais páginas. E dois, como podemos criar componentes que podem ser incorporados em páginas. Então, quando falamos sobre uma página, realmente queremos dizer algo que podemos navegar para escrever. Então, quando eu clicar no contador, ele muda, ele vai para a página de contador e você pode vê-lo na URL ii vai a partir do contador de barra de endereço de host local. Se eu clicar em pente, ele volta, certo? Estes para buscar dados vai tentar ir para buscar dados, mas, em seguida, ele está sendo protegido contra acesso não autorizado. E assim ele irá navegar para a página de login. Não vamos entrar nisso ainda. Mas o que eu quero fazer é criar outra página, como tudo o que temos o contra-pêssego e, em seguida, criar o nosso componente que podemos, em seguida , incorporar nessa página para que possamos ver um top end diante de nossos olhos. Antes de entrarmos nisso, vamos dar uma olhada no que a página de contador tem. Assim, a página de contador, que é realmente apenas um componente, é encontrado em páginas e você vai vê-lo cone navalha Teradata. E as razões pelas quais é realmente apenas um componente. Se você olhar para compartilhado, você vê que todos eles estão lá com as matrizes são. E acabamos de passar pela dose de Login contra Nev Many contra todos estes, certo? Inverno tão frio e estes partilham uma coisa. São todos os raios são componentes. No entanto, compartilhado implica que esses componentes são usados em muitos aplicativos. Versus o Pij é onde o, o componente serve como literalmente uma página. Então, quando você olhar para este componente para contador, você verá que ele tem esta diretiva de topo na página. E então ele diz que o servidor raiz só clicará ou alterará seu no SRE do Colin. Ele disse contador de barra de endereço do host local. Bem, é por isso. Tudo bem, de qualquer forma eu tenho todo o conteúdo. Lembramos que tínhamos a palavra terror do cólon. Nós adicionamos os cones atuais, e então tivemos nosso botão. E o que acontece é que quando você clica no botão há um evento onclick que diz, bem, incrementar por um. Mais uma vez, vamos entrar em todos os onclick e assim por diante, pouco mais tarde. Então eu não vou gastar muito tempo com isso. Então, se eu quisesse criar outra página, eu poderia ir para Pages clique com o botão direito do mouse dizer componente navalha. E então daqui eu posso dar um nome a este componente. Digamos que quero chamar este de gente. Ph, tudo bem, porque isso é tudo o que realmente vai ser neste momento. Então só queria amostra de página. Agora, a primeira coisa que eu queria fazer é deixá-lo saber que é otimista. Então eu preciso que eu tinha inscrito página em cima e então eu dar-lhe a sua rota. Então eu digo barra página de exemplo. Isto é o que você tem que digitar para chegar a esses componentes. Tudo bem? E deixe-me dizer que é um h3. Então deixe-me usar um H5 e dizer que esta é a página inteira. Tudo bem, agora para chegar a ele a partir do menu, porque nenhuma nova peça que eu quero navegar para ter que ir para o meu componente de menu nav, que eu ainda tenho todos esses comentários, não há problema. Mas então eu preciso adicioná-lo à navbar viu riso é realmente apenas pegar uma cópia disso e mudá-lo. Então este diz que é ref buscar dados. É um contador áspero. O que isso significa? Bem, contador tem dados de busca do contador raiz tem a barra de rota buscar dados. Então, para chegar à minha página, eu preciso de barra página de amostra. Então, para o novo item de menu, eu só vou dizer h ou f é igual a página de amostra. Claro que tenho que mudar o texto para que fique claro que é para isso. E eu não vou mudar mais nada. Porque mais uma vez, isto é um experimento. Então, quando eu executar este aplicativo, eu vou ver minha nova página de exemplo de itens de menu. E quando eu clico nisso, navegamos para a página de amostra com o nosso conteúdo certo? E observe a página de exemplo de barra de rota. Então, se eu disse alguma página um, então basicamente vai dizer por quatro dias nada neste endereço. Ele não sabe o que é isso. Alguns verbiage, no entanto, sempre me levarão de volta à minha página. Então vamos criar nossos componentes que eram, você sabe, componentes que podem ser reutilizáveis. Então, se é algo que queremos usar várias vezes múltiplas, por favor é incorporado aqui, mas exibir totalmente lá, o que nós vamos olhar para. Mais uma vez, esta é apenas uma prévia das capacidades. Mas vamos olhar para realmente colocar esta parte em um componente e, em seguida, incorporar este componente em nosso campo. Digamos que eu queria componentes, mas isso não queria colocá-los na mesma pasta compartilhada, certo? Portanto, é tão fácil quanto criar uma nova pasta. A organização de arquivos é sempre muito importante, então vou chamá-lo de componentes, certo? Então, conhecemos componentes. Lá vamos nós. E então aqui eu posso dizer adicionar componente navalha. E então eu vou chamar isso de algumas pessoas pij componente, nossos componentes de conteúdo de página de amostra. E sendo muito explícito para que eu me lembre para que era, certo? Então agora temos este componente. Posso colocar o que quiser lá. Eu posso colocar, digamos que eu não queria que isso fosse impresso lá. Eu queria colocá-lo dentro deste componentes pode ser colocado em um botão. Tudo bem? E este só vai dizer Olá, mundo, certo? Claro que eles estão usando Bootstrap, previu todos os Bootstrap quatro classes se aplica. Eu posso dizer btn escuro, apenas para dar-lhe algum caráter. E agora eu tenho esse componente, certo? Não, quero que o conteúdo deste componente seja incorporado nesta página. Tudo bem, então o que eu posso fazer aqui é simplesmente chamar este componente como se fosse um puxão. Tudo bem? Mas então você percebe agora que tem uma linha vermelha e não tem muito verde. Vamos ver se encontro outro, certo? Então, quando estamos lidando com componentes, você sempre quer ver que o verde encoraja o texto. Você não vê isso aqui. Por quê? Porque precisamos incluir uma biblioteca para ser capaz de acessar este porque este não está no mesmo diretório que a página de exemplo. Ele está em outro diretório e ele não sabe ou ver não ninguém estrutura. Então, podemos adicionar uma instrução usando aqui em cima onde vemos usando o gerenciamento atual, que é o nome do nosso projeto, plantas de ponto de gerenciamento atuais são, que é o nosso nome do projeto, que é a nossa pasta nomeada como o namespace. E uma vez que temos que usando declaração, podemos então acessar o componente e você vê tudo parece certo. Claro, o uso de declarações pode ficar confuso. Então, o que você pode fazer em alternativa é colocá-los nas importações. Então, nas importações você pode empilhá-los usando dizer Zelda usando todas essas bibliotecas que você sabe, você estará usando nossas múltiplas visões cruzadas. Você pode simplesmente ir em frente e incluí-los no arquivo de importação. Cada visão vai estar olhando para isso ou todos os componentes são, é as entradas candidatos. Então ele vai saber, sabe que este é o lugar onde ele deve olhar. Então vamos apenas executar isso e ver como isso se parece. Tudo bem, então estamos de volta ao nosso up e eu olho para a página de amostra e aqui está. Então eu estou vendo algum conteúdo de lixo e componente, certo? Então esta é a página de exemplo que é h3 tag que Kim originalmente com componente r. Lá está ele. Mas, em seguida, nosso componente de conteúdo de página de amostra tem seu próprio título, tem o conteúdo e o botão Hazara que sabemos ser couro escuro ou assim por diante tema, certo, então isso é apenas mais uma vez, uma introdução rápida ou brilho rápido sobre como podemos criar nossos próprios componentes. E, à medida que desenvolvemos esse aplicativo, veremos mais e mais recursos sendo lançados. 10. Revisar e adicionar alterações no GitHub: Ei pessoal, bem-vindos de volta. Então estamos aqui no final do nosso primeiro módulo onde o que fizemos foi criar uma nova aplicação de blazer. Tivemos um rápido passo a passo de todos os arquivos, manter cada um desempenhar um papel em todo este ecossistema. E então olhamos para como podemos personalizar a aparência dele e até mesmo criar alguns componentes para nós mesmos. Então nós não fizemos muito, mas pelo menos agora temos um TS coisas muito blazer é e se ele parecia intimidante antes do meio, você provavelmente percebe que é realmente apenas outro aplicativo Núcleo.NET neste momento. Ou eu quero apenas manter o controle de onde ele muda. E vamos tomar cones mais curtos como este no final de cada módulo vai apenas check-in ou citações são repositórios GitHub para que tenhamos nossos pontos de verificação básicos na história da evolução do nosso projeto. Espero que você já tenha criado sua conta do GitHub. E o que precisamos fazer para seguir em frente seria apenas adicionar ao controle da fonte. Portanto, se você olhar no canto inferior direito das suas webs do Visual Studio, desculpe, janela. Você deve ver Adicionar ao controle de origem. Então você pode ir em frente e clicar nisso e você deve ver obter. E então essa janela aparece. E se ele solicitar que você faça login, você forneça suas credenciais do GitHub. Ele já sabe quem eu sou e conhece o caminho local. Meus cones, eu sou o dono, o nome do repositório. Posso dar uma descrição. Posso torná-lo privado ou público. Vou torná-lo público para que vocês possam acessá-lo, é claro. E eu recomendaria que você tornasse público em geral para que outras pessoas possam se deparar e ver o trabalho que você está fazendo. E isso pode ajudar a construir seu portfólio para que ele compartilhe com futuros empregadores. Então você pode ir em frente e torná-lo privado. No entanto, se você, se você viu desejável para admitir o meu em público mais uma vez, e então apenas dizer criar e empurrar. Os resultados de todas essas ações serão a criação de seu próprio repositório do GitHub. Mais uma vez, se você tornou público, então alguém pode entrar no GitHub e procurar por seu identificador do que eles podem encontrar o projeto. Mas na próxima parada, vamos começar a ver algumas coisas divertidas. Vamos começar a olhar para um pouco mais add rebocado, o mecanismo de autenticação funciona, bem como como como podemos começar a colocar banco de dados atrás de nosso aplicativo. 11. Visão geral de seção — operações de banco de dados: Ei pessoal, bem-vindos de volta. Nesta seção do curso, vamos analisar algumas das operações relacionadas a dados que podem ser fornecidas a nós através de toda a nossa aplicação de blazer. Então, quando tínhamos criado ou aplicativo adicionamos indica que queríamos autenticação em provisões. E fora da caixa, o que o bootstrapper fez foi nos dar acesso ao servidor de identidade, que nós demos uma breve olhada difícil para Arras e identidade e páginas. Você verá que temos algo aqui que indica algumas operações relacionadas à identidade. E a identidade é a biblioteca que a Microsoft usa para sessões de gerenciamento de usuários, armazenamento e todas essas coisas. Então, faça login, logout e todos esses recursos maravilhosos saem da caixa através da biblioteca do núcleo de identidade. Por extensão, eles também teriam incluído as bibliotecas Entity Framework Core que nos permitem fazer meu acinzentado em define um contexto de banco de dados em um primeiro método de citação e realmente construir o banco de dados de nossa op e, em seguida, scuffled ele depois. Então, nesta seção, vamos tomar uma abordagem passo a passo para entender como todas essas peças unem e como exatamente vamos construir nosso banco de dados para o nosso blazer, porque isso não faz sentido. Começamos a criar toda a funcionalidade de subscrição se não tivermos onde armazenar, certo? Então, quando voltarmos, vamos começar a olhar essas coisas em pedaços. 12. Entendendo as disposições de autenticação: Tudo bem, bem-vindos de volta, pessoal. Nesta lição, queremos entender todas as provisões de autenticação fornecidas a nós através de todo este bootstrapped incluem autenticação, criação de projeto bem ali algumas partes móveis que se você não Não entendo bem o que você está olhando pode parecer esmagador, ou você provavelmente poderia simplesmente ignorá-los e tudo funciona. Mas é sempre bom quando você está trabalhando em um projeto e você terá uma apreciação completa de como tudo se junta. Então eu só queria orientá-los por algumas das bibliotecas e as funções que foram incluídas no projeto desde o início para dar a vocês uma idéia, o que está lá e o que saiu da caixa. Então eu vou começar no arquivo de inicialização para o nosso projeto de servidor. E nós meio que passamos por isso antes, mas eu queria levar meu tempo e apontar certas coisas novamente. Ninguém que estamos adicionando ao serviço, bootstrapper serviços ponto identidade padrão. Então isso saiu da caixa, é claro. E o que isso faz, ele diz que eu quero adicionar biblioteca de identidade para meu aplicativo usando o modelo que é indicado aqui. Então, por padrão, temos usuário de identidade. Esse é o nosso modelo padrão dado a nós pela identidade central do Microsoft dot ASP.net. Então esse é um usuário padrão que uma vez que você tenha incluído a autenticação, você tem acesso a esse usuário. No entanto, que os usuários tipo de limitado em termos dos campos que ele, ele permite. Porque às vezes, você sabe, usuário distante para se inscrever em seu site. Você quer o primeiro nome, sobrenome, você quer outras coisas. Então o que eles fizeram foi criar um bit de classe personalizado baseado em usos de identidade. Então ele está herdando todos os campos do usuário identidade. E então você pode estender este copo e você pode colocar no primeiro nome, sobrenome, data de nascimento, ou as coisas que o usuário de identidade fora da caixa simplesmente não tinha. Quando brigamos com o banco de dados, você meio que vê como exatamente são o que exatamente é gerado com base nessa herança direta. E então veremos como podemos estender isso depois. Então, estamos adicionando um padrão e entidade na forma de usuário do aplicativo e apenas dizer, você sabe, você pode ter vários tipos de usuário. Então aplicativo usa o padrão que eles nos deram. Podemos criar alternâncias se quisermos, eu não vou lá, certo? E embora, e então nós temos a opção. Então aqui podemos apontar ou que tipo de opções de autenticação este usuário deve cumprir. Eles precisam confirmar seus cones após a inscrição? Certo? Então, em outras palavras, precisamos carregar para configurar um mecanismo de e-mail, você sabe, como quando você se inscreve em seu site e eles enviam um e-mail para confirmar seu contador e confirmar e então você pode dizer e isso é o que este opsin basicamente diz. Você quer impor isso? Então eu vou colocar isso nas cataratas pelo menos Farnell vai ou eles não estão dispostos a entrar em qualquer coisa de e-mail ainda. Então eu vou dizer falso, significa que você pode areia em vermelho Nandan, desculpe, ele pode enviar ou registrar em null e então ele pode entrar imediatamente depois. Então é isso que esta opção, praticamente aqueles e, na verdade, esta seção de opção é realmente opcional. Certo, então você não precisa especificar opções. Você pode remover isso se quiser. E você pode adicionar outras opções, se quiser. O CMMI que cai muito nulo. E então estamos dizendo que queremos adicionar tudo isso aos contextos de banco de dados do aplicativo, que representa nossa conexão com o banco de dados. Então teria apontado que disse anteriormente onde ele está procurando conexão padrão como nossas conexões com o banco de dados. Mais tarde, porém, vamos colocar todas essas configurações em, em nossos dedos e entendê-las melhor. Em seguida, temos serviços que servidor de identidade, não, servidor de identidade é na verdade um conjunto de bibliotecas que, você sabe, ele é usado para controlar o acesso para aplicativos modernos. E inclui recursos diferentes, como gerenciamento de identidade de logon único, autorização, API, segurança, todos os tipos de coisas maravilhosas. E é baseado no padrão Open Auth. Então, é como nível da indústria, padrão OpenID. É como proteção de nível industrial para sua aplicação. Assim, mesmo sem o núcleo de identidade do servidor de identidade, esse conjunto central de bibliotecas pode fornecer muitas das funções, mas um servidor de identidade meio que amplia os recursos. E geralmente é dado como um aplicativo autônomo para o gerenciamento rigoroso das identidades, certo? Nessa situação, eles incluíram essas bibliotecas em todo o nosso blazer e assim podemos colher todos os benefícios dele. E mais tarde. Bem, além de adicionar o servidor de identidade, em seguida, continua a dizer onde adicionar autorização de API para o usuário do aplicativo e que área de armazenamento. Tudo bem, então a autorização da API diria que ele configura o servidor de identidade para autorização baseada em API, o que geralmente significa que ele vai usar o servidor de identidade JWT. Tudo bem, então JWT, JSON tokens web, que são provavelmente os mais altos padrões de segurança que API feito pode ter agora. Tudo isso está saindo da caixa. Se você tem, porém, meu outro curso sobre blazer, então você veria onde nós construímos a API nós mesmos, nós colocamos em nosso JWT nós mesmos e então nós adicionamos para atender provisões ainda, o JWT no lado do cliente. Tudo está conectado e conectado fora da caixa para você. Quando construímos o nosso blazer usando esta seção de configuração de modelo de projeto, vemos que temos até eu uso servidor de identidade, em seguida, usar autenticação e usar autorização. Então esses três middlewares ser Skelly, apenas meio que colocar a cereja no bolo para deixar nossa aplicação, ou que isso é o que pretendemos ter. Queremos a capacidade de permitir que alguém entre e se registre, e também sobre a capacidade de restringir. Todas essas bibliotecas devem ser relativas a quais provisões são dadas a nós através do servidor de identidade. Sabe, outra parte que eu queria apontar O seriam as áreas. Por isso, já olhamos para as áreas antes. Ele não está em nenhum grande detalhe, mas nesta seção temos essas páginas e as páginas, elas estão vazias. Tudo o que temos é aquele login parcial. No entanto, sempre que executamos nosso aplicativo, clicamos em login ou registrar, vemos que o realmente passa para outra seção. Vamos apenas pegar rapidamente. Tudo bem, então quando eu clicar em registrar, então ele vai para o aplicativo do servidor em uma página de registro de inicialismo. Se eu acessar o login, ele ainda estará no servidor mostrando uma página de login. No entanto, já estabelecemos que não há páginas com esses nomes são endereços em nosso aplicativo de servidor porque bem, nós não temos nenhuma página. Nós só temos este controlador aqui que faz a configuração de óleo DC. E bem, nós não temos Pj é nomeado registro e login. Então, o que teria que fazer se você quisesse obter essas páginas e, por extensão personalizar sua aparência, porque ele pode ver que eles não se parecem com o site. Eles não se sentem como se fossem parte da nossa aplicação web. O que podemos fazer aqui é clicar com o botão direito em áreas ir para Adicionar e, em seguida, vamos ver novo item andaime. Então vamos até a identidade, e então podemos ir em frente e clicar em adicionar. E então ele vai fazer algum trabalho em segundo plano. E então ele vai nos permitir decidir quais arquivos nós queremos realmente andaimes em nossos projetos. Então eu posso dizer “override off “, o que significa que ele vai apenas materializar todos nós e adicioná-los a toda esta estrutura de pastas. Eu posso ser muito seletivo e dizer que eu só quero o Leodes, Eu só quero talvez o registro e login e qualquer outra coisa pode ficar bem. Então eu só vou dizer para substituir todos os arquivos, não há mal nisso, certo? Após os contextos de dados maioria pode estabelecer o contexto de banco de dados aplicativo. E então eu posso dizer adicionar. E depois que fizermos isso, veremos que agora temos uma nova pasta e alguns arquivos novos, certo? E se eu olhar em um cone que eu vou ver todo o jejum. Então você tem que se registrar e fazer login. E então, bem, eu tenho a coordenada, eu posso modificá-las e fazê-las parecer mais como se fossem parte da minha barra de aplicativos. E estes levam algumas das coisas que fazem isso, faz com que pareçam que estão fora das crianças fora de toda a tendência ideal para construir. Tudo bem. Nós também podemos modificar seu Laozi criando nosso próprio Leo pij. Bem, ele diz que o caminho leo lágrima no início da vista é páginas barra barra compartilhada layout.css. E se você olhar em páginas, em seguida, barra compartilhada, nós não vemos um HTML layout.css, então nós poderíamos criar nosso próprio pequeno campo e, em seguida, substituir isso, se necessário. Mas a questão é que todas essas coisas aqui fora e personalizáveis. Então, se você já trabalhou com núcleo de identidade em IRAs MVC são páginas, então isso não deve ser muito estranho para você. Você deve se sentir em casa. Se esta é a sua primeira vez, então é exatamente assim que você pode começar a personalizar seu registro, sua página de login, e qualquer coisa em qualquer aplicativo principal dominar. Não se limita apenas à navalha. Tudo bem. Ou bem, Blaser Outro não se limita ao blazer. E eu queria seguir em frente das coisas visuais e falar mais sobre as coisas do banco de dados porque eu disse que esse teria sido o ponto focal de toda essa discussão. Então vamos descer para os dados. E nos dados vemos que temos duas bibliotecas para pastas, certo? Ou uma pasta e um cabeçalho de arquivo. Temos a pasta Migrações com dois arquivos lá dentro. E então temos o contexto de banco de dados do aplicativo. Então, quando clicamos em contextos de banco de dados de aplicativos, vemos aqui que é contexto de banco de dados aplicativo apenas preso classe. É herdar do contexto de banco de dados de autorização de API, que é contextos ou carregar os usuários do aplicativo. Então, essas mais uma vez são bibliotecas internas e até mesmo aquelas que passam o mouse sobre a autorização de API, você verá que ele está dizendo que é uma obstrução de banco de dados para contexto de banco de dados combinado usando identidade e servidor de identidade. Tudo bem, então eu vi o contexto do banco de dados de identidade sendo usado aqui para o, para a classe herdeira. Eu vi o contexto DB sendo usado aqui. Mas porque dissemos que queríamos autorização da API, certo? Lembra que dissemos aqui em cima, adicionar autorização de API, certo? Então, temos o contexto de banco de dados de autorização de API sendo usado para facilitar isso. Então, estamos enviando a funcionalidade geral desta biblioteca para nossos contextos de banco de dados, nossos contextos de banco de dados de aplicativos incorporam todos os recursos aqui e qualquer outra coisa que vamos colocar. Tudo bem. Aqui temos um construtor onde nos permite passar em algumas opções. E você percebe que muitas coisas são muito personalizáveis e ele chega a isso e eles nos dão algumas opções fora da caixa. Então personalizar, talvez limitado a apenas Watson fora da caixa e talvez pequenos ajustes com base em nossos requisitos pessoais. Então esse é o nosso arquivo de contexto do banco de dados do aplicativo Se recuarmos um pouco e irmos para migrações, o que você vê aqui é a primeira migração que permite a criação do esquema de identidade. Então todos difíceis a caixa, eles estão nos dando o que precisamos criar, todas as tabelas relacionadas à identidade ou quando eles disseram tabelas relacionadas à entidade de funções de rede SBI. Esta é a tabela de funções para armazenar funções e aplicativos em todos os administradores, usuários, etc. Nós também temos uma rotação para os usuários e usuários da rede SBI vai ser gerado com base nos campos padrão que eu mencionei calma com o usuário identidade, certo? Então lembre-se que queremos ir para o usuário do aplicativo. Nós dizemos usuário de identidade. Se eu tentasse olhar para a definição disso, então deixe-me ver. Exponha isso. Bem, eles realmente não expõem os campos que estão lá e isso não é problema. Mas o usuário de identidade vai incorporar automaticamente ID, nome de usuário, e-mail, e-mail, confirmar senha, hash, todos esses campos. Então, quando eu disse que podemos precisar estender esses campos, adicionando ao usuário aplicativo. Isso é o que eu quis dizer. Talvez queremos FirstName, Sobrenome e outras coisas como campos nesta tabela de banco de dados. Então, mais tarde, vamos olhar para estendê-los. Mas Farnell, esta migração está nos permitindo criar todas as tabelas padrão e então podemos estender. Veja aqui temos escolas de dispositivos. Isto é do servidor de identidade, porque se você usar o núcleo de identidade, você não teria visto essa biblioteca. Você não veria que Subsídios persistentes estão sendo consideradas limpas. Sbi, reivindicações de usuário net, logins de usuário, todas essas coisas. Saímos da caixa com nossa biblioteca do núcleo de identidade. Tudo bem? Então o que vamos fazer agora é realmente andaime este banco de dados faz até agora nosso olhar para este código, não temos nenhuma evidência tangível de nada. Se tentássemos fazer login, certo, normalmente falharia como quase alfa. Vamos tentar fazer login porque vemos que ele vai para a página de login. Bem, vamos ver o que acontece quando você realmente tenta fazê-lo. Tudo bem, então eu vou tentar me registrar, e vamos ver o que acontece. Tudo bem, agora está dizendo que a operação do banco de dados falhou ao tentar processar esta solicitação. E então ele disse que ele não pode abrir este banco de dados e todos os tipos de coisas que estão nos enviando que precisamos aplicar a migração, que é o mesmo arquivo que estamos apenas olhando, aplicar a migração e executar os comandos, e então podemos rastrear novamente. Então vamos em frente e configurar o que precisamos configurar para que possamos começar a criar essas tabelas em nosso banco de dados. Então, no OB settings.js nele disse que ele não conseguia encontrar um telefone de banco de dados que x-y-z. Então, estava inferindo que o banco de dados será encontrado o endereço que descrevemos em nosso aplicativo settings.js no arquivo. Certo, então temos o servidor sendo o banco de dados local, que é o servidor que eu vim com o Visual Studio. Está muito ligado ao Visual Studio. Não precisamos entrar no Management Studio para isso. No entanto, se você quiser usar outro servidor de banco de dados, como talvez você tenha uma instância de desenvolvedor ou uma instância do SQL Express. Você só precisa mudar o nome do servidor, certo? Então você poderia torná-lo host local, você poderia fazê-lo ponto SQL Express, o que quer que seja. Você pode ir em frente e mudar isso. E eu vou deixar que ele faz DB local porque, você sabe, para fins de desenvolvimento, eu quero isso aqui mesmo no Visual Studio. E eu vou mudar o nome do banco de dados. Então este é um nome padrão, é girá-lo traço, traço do servidor de pontos de gerenciamento atual, e algum bom valor. Não preciso de tudo isso. Alguém vai chamar isso de corrente no banco de dados de sublinhado de gerenciamento. Então eu vou tirar todas essas coisas e fazer isso. Está bem. Lá vamos nós. Então, depois que eu limpei meu aplicativo settings.js, arquivo JSON, nulo Lionel onde null, eu estou vendo que se este banco de dados ainda não existe, este é o que eu quero criar. Então, e ele disse adicionar a migração ou aplicar a migração em vez de executar banco de dados de atualização. O que estava vendo foi que quando eu digo atualizar banco de dados, ele vai criar o banco de dados se ele ainda não existir, e então criar as tabelas de suporte de acordo com esse arquivo de migração. Se você prestar atenção a este arquivo de migração, você notará que ele é realmente como uma tradução nítida do que vai acontecer no SQL, certo? Id, tabela, coluna, string. O tipo vai ser convidado cobrar. Então, se você conhece bancos de dados, então você começa a ver que isso é realmente apenas C-sharp. Dizendo-nos o que a sequência vai ser ouvida. Não é muito complicado, não é mesmo que encontra C, Para ser honesto, há apenas um construtor. E depois, no final da construção de tudo o que não deveria acontecer, vai ser executado, certo? Só vai criar. Então, vamos olhar para como criamos o banco de dados. Então eu vou para o console do Gerenciador de Pacotes. Se você não tiver um rasgo em seu Visual Studio, ele pode sempre ir para ferramentas e novo gerenciador de pacotes de obter e você verá o console do Gerenciador de Pacotes para que você sempre possa trazê-lo assim. E então vamos dizer atualizar o banco de dados de hífen. Depois de executar esse comando vai construir um projeto e, em seguida, deixe-nos saber quando ele é feito. Não, isso foi muito rápido. Começou a construir, foi bem sucedido e depois diz feito. Nada visivelmente. Não há diferença, certo? Eu não vejo como algo aconteceu em novos arquivos foi adicionado ao projeto, mas vamos olhar para o banco de dados. Então eu vou trazer o MySQL Server Object Explorer. Se você não vir isso, basta ir para Exibir e você verá SQL Server Object Explorer. Então você pode apenas trazer isso para cima e olhar para bancos de dados locais. E você vê que eu tenho alguns bancos de dados, incluindo meu banco de dados de gerenciamento atual, que é o que acabamos de criar. E se eu expandir isso e olhar em tabelas, então eu vou ver todas as tabelas que foram descritas neste arquivo que está sendo exibido à minha direita. Então temos a tabela de funções, temos a tabela de usuários. Todas estas tabelas estão lá e disponíveis para nosso uso. Certo, então há duas partes para quando queremos atualizar o banco de dados, onde você tem a migração, que é esse tipo de arquivo C. E essas são as mudanças no MBL atômico. Tudo bem, então ele mantém o controle de cada vez que fazemos uma mudança no banco de dados, é como manter o controle dele. Então, se você é um desenvolvedor de banco de dados e tradicionalmente você construiu o banco de dados, mas quando o aplicativo está sendo construído para fazer alterações, é um pouco mais difícil de camionar que você altere esta coluna para isso e é mais dinheiro. Bem, quando fazemos migrações na primeira sessão do acorde, isso nos permite ver que neste momento era isso que estava no lugar. O próximo ponto, isso é o que as mudanças foram feitas e isso nos ajuda a manter o controle. Por isso, façamos algumas alterações. E a mudança que vou fazer é apenas o usuário do aplicativo, certo? Dissemos que queríamos estendê-lo. Então eu só vou dizer que eu quero adicionar String firstname. E eu vou adicionar o sobrenome da string. Certo, então essas são as duas coisas que eu quero acrescentar. E mais uma vez, você não está limitado a assistir. Você não pode, você não pode data de nascimento, ele não pode abordar o que é que você precisa em um usuário de aplicativo , sua agonia, mas não autonomia e mudanças neste arquivo. E esse arquivo está diretamente relacionado ao contexto do banco de dados do meu aplicativo, certo? Então ele vai perceber que a versão que foi, que existiu e criou um banco de dados da última vez não é diferente do que eu apliquei. Então não, eu preciso que eles saibam que eu gero um arquivo de migração. Posso dizer adicionar migração de hífen. E então eu posso ver o nome adicionado ao usuário. Algo nos leva a algo indicativo das mudanças que foram feitas. E então eu apenas ir em frente e pressionar entrar em uma lei que para construir. E então ele vai criar um arquivos de migração. Então, agora, se você olhar em migrações, você verá que há outro arquivo mesmo com carimbo de data/hora. Então este está zerado porque cresceu 0 literalmente, certo? Este não é sobre carimbos de data/hora para dizer neste momento neste dia, você fez a migração com qualquer nome que você deu. E, em seguida, se olharmos para os arquivos, você verá que ele só vai dizer adicionar uma coluna FirstName. Então a tabela está sendo nos usuários. Esse é o tipo e é anulado. Você vê, isso é tudo o que está fazendo. Tudo bem? E então você vai ver que você tem ou não funciona. Então esta é porque a mudança é menor, parece muito mais fácil ler e entender o que está fazendo. E mais uma vez, é realmente apenas C afiado. Danny era o que faz um barco em, em, em SQL? E o Você não vê nisso, se eu reverter a migração são reverter as mudanças, então isso é o que ele deve fazer, soltar coluna e soltar isso. Então temos o OP dizendo o que estamos prestes a fazer e eles não vêem o que deve ser queimado, devemos mudar de idéia? Certo, observe que temos a Migração. Acabamos de executar um banco de dados. Após a migração, executamos um banco de dados de atualização e, em seguida, o banco de dados já existe. Então, é literalmente apenas para fazer sobre obesidade. Se ele não existia, o primeiro, então ele criou e atualizou. Então, se eu olhar para trás para o banco de dados e olhar para minha tabela de usuários ASP net e olhar para as colunas. Então vamos ver que temos primeiro nome e sobrenome. Então eu realmente não mostrei que não havia perto antes, mas com base na migração inicial, first_name e last_name não estavam lá. Nós apenas fomos e adicionou-os ao usuário do aplicativo e sabemos que eles estão lá. Tudo bem, então essa é uma boa introdução rápida sobre como fazemos migrações e como vamos configurar sua identidade e certificar-nos de que temos informações adequadas sobre nossos usuários quando estamos prestes a criar nossos aplicativos. Agora eu vou realmente fazer o nosso registro de novo e ver, ver se conseguimos passar. Então a palavra-chave que estou usando é a senha fora de um porque eles são muito rigorosos para a política do analisador phi, digamos negligenciar aquele que, bem, primeiro lugar, se eu não os encontrar muito, Você vê que é isso que está enviando Eu tanto assim. E se eu negligenciar o tal, está me dizendo que é muito fraco, certo? Então, fora da caixa, você tem uma política de senha forte o suficiente que você pode aumentar a força de mais uma vez através das opções. Mas acho que isso é complicado o suficiente para mim, certo? E também sua senha, senha com um Boogle AdSense e número um no final, clicamos em Registrar e ver o que acontece. Então estamos indo muito mais longe do que da última vez. E olha para isso. Basta deixar isso apenas executando dois comandos. Eu nem precisava adicionar nome e sobrenome para fazer isso funcionar porque ele estava trabalhando há muito tempo. E eu vou apenas salvar isso no meu navegador. Bem, você vê aqui nós, ele está nos dizendo olá, certo? Lembra quando personalizamos nosso display de login para mover os botões de navegação para que eles saibam dizendo olá, a pessoa logada, certo? Está a permitir-me sair. E então eu acho que se eu clicar nisso, ele vai trazer perfil, direita, autenticação e perfil de barra. Certo, então isso vai voltar para o servidor, para o gerenciador de identidades. Desculpe, servidor de identidade gerenciar e, em seguida, indexar gravações. Lá vamos nós. Então é isso que estamos olhando agora. Tudo bem, então quando nós brigamos as páginas em nenhum lugar tem acesso a todas essas páginas são que nós podemos personalizar, olhar e campo fora de campo, certo? Então agora ele está mostrando o perfil com o nome de usuário e o número de telefone é nome de usuário , número de telefone, novamente, James, um número de telefone c. Então nós podemos dar todas essas coisas fora da caixa com muito poucas personalizações, com muito pouco esforço, com muito pouco esforço de nós, podemos colocar nosso sistema de login e registro em funcionamento em nossa aplicação blazer. Mais uma vez, vá em frente para tipo de modificar isso. Parece que não vamos entrar e sair da aplicação. Mas a realidade é que o servidor de identidade é realmente como um aplicativo autônomo. Então, você sabe, é, é vai para os dois lados. Depende do que você precisa é mesmo se você quiser dar ao usuário acesso a todas essas coisas, porque você pode não querer dar acesso a eles para alterar seu número de telefone e endereço de e-mail à vontade e assim por diante. Você pode querer controlar tudo isso para si mesmo. Então essa é uma boa introdução rápida para todo o servidor de identidades. E a identidade funciona numa aplicação de blazer. Espero que você entenda isso um pouco melhor e em nenhum lugar vai passar para realmente criar nossas tabelas de banco de dados para suportar o resto dos recursos de nosso aplicativo. 13. Crie banco de dados com núcleo de estrutura de entidade: Ei pessoal, bem-vindos de volta. Então, nesta lição vamos começar a criar o banco de dados com as tabelas de suporte para nossos aplicativos de gerenciamento atuais agora, tudo o que já temos nossas tabelas de suporte ao usuário para o login para limpeza de caminhões, todos os essas coisas maravilhosas ou para tê-las. E já discutimos como os conseguimos entrar. Não, queremos criar nossas próprias tabelas para adicionar ao banco de dados mais tarde. Então eu tenho na tela aqui Nieto diagrama de relacionamento, um diagrama de relacionamento de entidade. Você sabe, ele tem muitos nomes, mas este diagrama está mostrando as tabelas de banco de dados e quem tem relacionamentos com através. Tudo bem. Então o que podemos ver aqui é que já temos, já sabemos algumas dessas tabelas que já sabem que temos o dispositivo escolas persistem bases todas essas tabelas relacionadas ao usuário da rede ASP que já conhecemos porque Foram todos andaimes para nós através dos Serviços de Identidade, certo? No entanto, à direita, temos tabelas adicionais que vamos criar este ponto. Então temos cores. E estou começando com aqueles sem chaves estrangeiras ou sem dependências. Então temos cores, modelos, microfones, certo? Porque é um carro no sistema de gestão. Quando adicionamos um veículo, queremos ter certeza de que capturamos a cor que ele é. Uma modalidade é o que a torna. E no veículo ruído relacionado a todos esses custos vai ter o modelo de marca e o identificador de chamadas. Deixe-me ampliar um pouco no caso de ser um pouco pequeno, certo? Então temos o Vin e temos outros campos que queremos capturar todo o carro. Vamos ter reservas para que possamos rastrear quem foi alugado por quem. E ele fez realmente velho e, em seguida, calcular o custo, todas essas coisas maravilhosas, mas têm os clientes e informações básicas sobre os clientes e assim por diante para que os clientes não serão usuários, que é onde temos um tabela do cliente diferente de uma tabela de usuários. Se nós fizéssemos isso que os clientes poderiam login e acessar o sistema e fazer o que eles queriam fazer, então nós não teríamos que criar um cliente ainda poderia apenas usar a tabela ASP net users estendida para um tipo de cliente de operação. E então poderíamos usar o para armazenar tudo a morada dos clientes. Então, mais uma vez, o contexto é tudo. Como você desenha suas tabelas, para que você projete sua aplicação em todas essas coisas são regidas por ambos os anos objetivos são os objetivos do negócio para o qual este sistema está sendo projetado. Então o que queremos fazer agora é começar a criar essas tabelas. Então temos 1236 tabelas que precisamos criar. Vamos chegar a ele. Não, em termos do layout do seu projeto e da arquitetura geral e assim por diante, aquele júri, Zoltan, onde é o melhor lugar para criar suas tabelas ou criar seus arquivos de classe que se tornarão tabelas. O que quero dizer é que já temos projetos cliente onde você tem um projeto de servidor. No entanto, projeto compartilhado, que serve a finalidade de ter arquivos de classe, são quaisquer recursos que seriam compartilhados entre os dois com base em qual padrão você vai usar. Você pode querer colocar suas classes de dados dentro de uma pasta compartilhada porque, em seguida, você não deseja tê-las duplicadas. Você não deseja ter uma versão deles no projeto do servidor, uma versão deles em um cliente. Você acabou de colocá-los em compartilhados em ambos os projetos pode acessá-los, que é o que nós vamos fazer saber. Bem, só estou te dando um contexto caso você esteja tricotando sua sobrancelha já tenha outra idéia que não seja problema. Em outras situações, as pessoas fazem camadas de acesso a dados onde criam as classes de domínio diferentes, certo? Eles significarão, ou seja, as classes que então se tornarão as tabelas. Eles criam outro projeto para eles. E, em seguida, eles obstruem o caos de domínio é das classes de cliente, ou seja, o servidor e o banco de dados operacional relacionado. Novamente, veja as classes de dados dentro do cliente está usando uma versão diferente deles para fins de cliente. E é isso que vamos começar a olhar para esse padrão chamado como MVVM, cauteloso com modelos de visão ou API como eu chamo de detalhes. Então, mais tarde, entraremos nos padrões. Não tenho nada contra botões. Adoro padrões e vejo onde eles são bons. Mas agora só queremos fazer o básico para colocá-lo em funcionamento. Porque talvez aqueles queriam construir um aplicativo que pode falar com o banco de dados azul do banco de dados e olhar muito certo. Então, às vezes você não precisa ir para esse nível de obstrução, mas então as abstrações ajudam quando você precisa dimensionar o aplicativo. Estou colocando mais recursos em mais tabelas e assim por diante. E você tem menos proteases após a manutenção de Guandu, isso é um auto-padrão roxo. Tudo bem? Então retinal, o que vamos fazer é criar uma pasta neste compartilhado. E eu vou chamar essa pasta, vamos chamá-la de domínio. Tudo bem? Então domínio vai ter todas as nossas classes de domínio. Então você pode ver aqui com uma previsão já está segurado. Mas por que isso é assegurado? Porque o nosso controlador aqui, previsão do tempo é quando usar esse arquivo. Aqui vamos nós, previsão do tempo. E em todos os nossos clientes disseram que se olhássemos para os dados obtidos, eles saberiam que também está usando previsões meteorológicas. Então esse é o propósito de colocá-lo em compartilhado para que ambos os projetos possam ter acesso a ele. Então certo, não, nós não vamos colocar em que abstração entre as classes de domínio para as operações de banco de dados em para o cliente. Eu só vou usar os mesmos arquivos de classe para tipo de show hole em um fim de semana nível básico facilitar a conversa com os dados. Então vamos começar com as mesas simples, certo? Então, não quis dizer classe nova. E uma das mesas mais simples era eu. Tudo bem, então nossa mesa de microfone, e eu vou tornar isso público para que todos possam acessá-la. MC de classe pública, podemos adicionar, e aqui estão apenas uma banheira de adereços duas vezes e, em seguida, gera esta fechadura. Então corda e escreve para mim seria como Toyota Honda. Sabe, essa é a marca. Então eles podem chamar de marca, se você quiser. Isso é bom. Também tivemos o que chamaremos de campos de auditoria. Vermelho, porque é claro que precisamos de um campo ID como sempre tabela deve ter. Nós também queremos sentir que dizer data criado e atualizado. Bem, a coisa com esses três campos seria que esses três campos realmente vão se repetir em todas as tabelas, certo? Então, cada tabela vai ter que ter um ID e queremos ter data criada e ações atualizadas. E nós poderíamos até empurrar o envelope para ver criado por um atualizado por. Então vamos fazer isso também. Para que saibamos quem fez assistir stringing criado por e atualizado por. Essas seriam cordas. Porque então queremos armazenar o nome de usuário da pessoa que realizou a operação na Terra. Então string atualizado por string criado pela data de criação de D, o título pintado de vermelho. Mas, mais uma vez, esses campos vão se repetir em todas as tabelas porque este sou eu quando eu faço modelo e saiu essas taxas novamente. Então o que eu vou fazer é criar como um modelo base, basicamente um tomate. Então eu estou indo apenas para criar outra classe e eu queria chamá-lo dados base, modelo de domínio Barbies. Deixe-me chamá-lo de modelo de domínio. Não importa, mas a questão é que eu queria ser uma base, certo? Não quero torná-lo público, abstrato, não abstrato. Isso significa que eu não posso instanciar esta classe por si só, certo? Mas então essa classe abstrata vai ter nesses campos. Então eu vou tirar a identidade de mim, colocá-lo nesta classe abstrata. Eu também vou tomar criado por períodos de data em todos esses campos de auditoria. E eu vou colocá-los dentro desta classe de domínio abstrato. E então o que posso fazer é herdar. Certo, então classe pública faz cólon B Islam em modelos. Então, nenhum microfone realmente terá qualquer campo lá, bem como o, então é o mesmo princípio como o que acabamos de olhar com nosso usuário identidade versus aplicativo. Aplicação de usuário usa herdar da classe base adicionar usuário entidade, e, em seguida, podemos estender como precisamos. Então aqui está a extensão para mim, certo? Então todos os outros que vamos fazer podem seguir esse mesmo princípio. Então faça modelo. Mais uma vez público. Ele vai herdar do modelo de domínio base. Então o botão diz os campos de auditoria e então eu vou colocar o nome. A razão pela qual eu não coloquei nome dentro da base é que nem todas as dicas são nomes. Eu não quero colocar nada dentro da besta que nem todas as mesas vão se concentrar, certo? Então, embora possa parecer tolice ter marca e modelo, ambos tendo Nome e, em seguida, outro vai ter nome na forma de cores, cor, cor. E também vamos dar o nome do campo. Vamos torná-lo herdar modelo de domínio baseado. E é claro que você tem que torná-lo público. Tudo bem, mas é isso para o nome 11. Então, agora vou usar mais perto dele. Então vamos entrar em algumas mesas mais complicadas. E eu sempre vejo mesmo, mesmo no desenvolvimento de código primeiro, estão desenvolvendo bancos de dados sempre começam com as tabelas que tub e todas as chaves estrangeiras não são dependências. Porque, então, quando você chegar à dependência é os dados dependentes ou dados que é que depende em vez de já está lá, certo? Então, se quisermos fazer o próximo veículo, o que faremos com o domínio Gosse. E então veículo é o nome deste. Mesmo tratamento, herança pública do nosso modelo de domínio base. Tudo bem? E então o que queremos no conjunto de veículo seria ID do módulo do ano e, em seguida, até campo virtual para o modelo, certo? Então isso representa nossa chave estrangeira bem aqui. Tudo bem, então o que, então isso, ele vai automaticamente dizer, bem, eu sei que há uma tabela ou uma classe de dados correspondente, classe domínio chamada model. Eu sei que ele tem um campo ID, então ID de modelo automaticamente ir para o mapa para o campo ID na classe correspondente chamado modelo. Tudo bem, então Entity Framework vai fazer isso para você automaticamente. Se, se um banco de dados de construção normal usando SQL server, você sabe que você tem que entrar e dizer manualmente, este é o nosso relacionamento com este Entity Framework foi gerado com inferir esse relacionamento para você. E, em seguida, incluindo este campo, que é o modelo de tipo, e nós apenas chamamos de módulo. Mas este nó permite que ele tipo de implicar que uma junção interna pode ser necessária. Então, sem escrever todo o código para uma junção interna, você iria automaticamente apenas trazer sobre os dados relacionados para nós. Então, estamos armazenando o ID, qualquer que possamos acessar o nome e quem o criou em qualquer outro detalhe que precisamos. Podemos ficar virtuais porque o virtual e a música podem ser substituídos se quisermos. O que isso é bom. Nós podemos Você não precisa necessariamente torná-lo virtual. Estou incluído no inverno. Então temos ID pública, int público, fazer ID com os mesmos tratamentos. Temos cor com identificação de cor, mesmo tratamento, mesmo princípio. E depois temos o Vin, o número da placa, e depois temos a reserva. Então, aqui está um exemplo perfeito de por que devemos criar o dependendo da tabela necessária primeiro. Então o veículo requer a tabela de reservas porque ele tem uma dependência lá ou há alguma relação distante entre eles, exceto este. Você não percebe que ele não tem esse ID e peering de objeto. E isto deve verificar o meu trabalho. Esta deve ser uma lista de olhar representando os registros de aluguel. Certo. Assim, um veículo pode estar em várias reservas. Então deixe-me mudar isso de todo o nosso símbolo de acordes ganhos. Então, é mais claro. Tudo bem, então esta seria uma lista de reservas para qualquer veículo. Praticamente isso é o que significa. O que significa que quando criamos uma classe de reserva, e eu posso apenas passar o mouse sobre isso e dizer gerar reserva em um novo arquivo, classe genérica em um novo arquivo. C criado reserva para reserva de classe pública dos EUA herdar do modelo de domínio obeso. E depois a reserva vai ter uma relação com um veículo, certo? Então, para qualquer pessoa reservando, você vai comprar um veículo, certo? Então nós vamos ter a data nele alt, certo. Então você vírgula você fazer uma reserva. Que horas? Eu iria em frente e incluiria quaisquer bibliotecas que faltassem lá. Temos o cliente. Então, qual cliente? Então precisamos criar uma tabela de clientes, mais uma vez, dependência. E depois temos as taxas. Certo, bem, eu acho que na verdade, não, isso é, eu estou olhando para o meu design original. Eu estou pensando que a taxa deve provavelmente estar no veículo porque geralmente falando, as realidades no veículo, e então, por mais tempo que você tomar o veículo, isso é quanto dinheiro fora da peça. Então eu vou colocar lá em salário aqui. Então eu estou colocando um novo campo dentro do veículo chamado Bilbo ou em tolerar. Tudo bem, então quando colocarmos a lata V no sistema, vamos colocar que este veículo vai ser como $2 mil em oh, desculpe. Na Jamaica ponto ponto seria as notas gerais 2000 leis sobre todos os nossos direitos são duplos e Dasa D, já que estamos lidando com reservas, o inundate velho. Então, por dia ou por noite você tem o veículo. Isso é um pouco GOP. E então podemos sempre calcular com base no que está aqui. Então é isso para a reserva. Mas é claro que ainda precisamos de clientes para que possamos fazer a mesma coisa. Só geramos os quatro clientes, certo? É um OAEP ou cliente. E então vimos que herdamos do modelo de domínio base. E, em seguida, nossos campos aqui seriam tucks endereço idéia, endereço e-mail, e número de contato. E então, é claro, vamos querer ter certeza de que temos uma representação para o relacionamento. Então a coisa é que isso é como um relacionamento bidirecional, que realmente um relacionamento bidirecional onde é apenas certificar-se que essas duas entidades relacionadas se conheçam. Então esta é uma reserva só pode pertencer a um cliente, mas então um cliente pode ter várias reservas, certo? Então sim, a reserva como uma representação de um cliente de cada vez, mas então o cliente tem várias reservas, assim como vimos com os veículos. Certo. Assim, o mesmo tipo de lista de reservas que temos nos veículos que você tem que colocar na tabela de clientes e incluir quaisquer referências ausentes. Lá vamos nós. E então nós podemos apenas fazer uma compilação para ter certeza de que tudo está bem. Então podemos fazer uma conta só para ter certeza de que está tudo bem. Tudo bem, então nós temos todos os nossos arquivos de domínio em nosso projeto compartilhado com a pasta de domínio, certo, então esse é o namespace. Sabe, a fim de obter o nosso banco de dados para gerar a tabela é que corresponde a estes, certo? Bem, precisamos fazer é passar para os nossos dados em nosso projeto de servidor, ir para o contexto de banco de dados aplicativo. E então precisamos listá-los aqui. Então, para listá-los, note que não dentro do construtor, este é o nosso construtor. Então, abaixo do construtor ponto, mas na classe, precisamos começar a ver VB público definir o tipo de dados e, em seguida, o nome que vamos querer as tabelas do hub. Então, reparem que este é singular, um é pleura, certo? A classe, geralmente, a entidade é singular, a grama porque nossa classe representa uma instância off. Mas então a tabela é a coleção dessas instâncias, certo? Assim, o nome da tabela seria veículos, qual a classe da qual a tabela é baseada no veículo pretendido. Tudo bem, então novamente, aqueles vão em frente e incluem a biblioteca ausente usando o dat atual. Não, ele sabe de onde está encontrando essas coisas. Então podemos ir em frente e incluir isso. Então siga este padrão, conjunto de banco de dados público, colchete angular, o nome da classe, colchete angular próximo, o nome da classe pluralizado, e então obter onsets para que ele possa simplesmente ir em frente e incluir isso para todos eles para cor, MY modelo de reserva do cliente. Tudo bem? Então, uma vez que você tenha feito tudo isso, a próxima etapa seria criar uma migração porque nula, quando criaríamos uma migração vai olhar o contexto do banco de dados do aplicativo de backup. E reparem que a última migração não tinha neve. Isto está ali. Claramente, tenho mudanças a fazer. Então deixe-me documentar essas mudanças, certo? Então, Gerenciador de Pacotes, console, adicione migração de hífen. E então vamos ver adicionadas, digamos tabelas de aplicação. E então uma vez que fizermos isso vai construir. E então ele vai nos dar nossos arquivos de migração mostrando mais uma vez, o que fez sub-balas hoodoo está prestes a criar uma tabela chamada cores. E as colunas incluem a coluna ID, que é int, e é automaticamente configurá-lo faz identidade. Então você sabe que se você fez isso no banco de dados você mesmo, você teria que configurá-lo como chave primária sintetase identidade. Isso está acontecendo sozinho. Está inferindo que a coluna id vai ser a chave primária lá está, disse que a chave primária como a coluna ID, certo? Clientes, mesmo tratamento. E então, para os relacionamentos, você verá que está sentado algumas restrições de chave estrangeira aqui. Diz uma chave estrangeira para cores, cores, identificação, FK, veículos. Então este é um veículo estável e ele vendo na configuração chave estrangeira entre a tabela de veículos e a tabela de cores, onde o identificador de chamadas relevos para a coluna ID da tabela do chamador. Tudo isso é comido FRD para você por Entity Framework. Tudo bem? E da mesma forma que temos a web que não se usa no novo, podemos simplesmente reverter as mudanças. Então, o ponto é que sempre que você está prestes a fazer uma alteração ou você fez uma alteração no se você adicionou uma nova tabela ou você adicionou novos campos ou alterou os campos. Uma vez que você tenha feito essa mudança, tudo o que eles têm que fazer é migração de ADA. Ele vai passar e comparar o que há de novo com o que o nulo obtém. E então documentará as mudanças dessa forma. E depois de ter feito isso, você pode dizer atualizar banco de dados. Então, às vezes, você sabe, quando você faz certas mudanças, isso pode levar à perda de dados. Como se você pudesse alterar esse tipo de dados ou remover um campo. Ele vai avisá-lo. Até agora não fiz nada que levasse à perda de dados. Mas vamos dar uma olhada no que é um auto-gerado. Então aqui está o corredor atual do banco de dados de gerenciamento levantado da última vez. Se eu apenas atualizar e, em seguida, ir e dar uma olhada nele novamente, então nós vamos ver nossas novas tabelas, reservas, cores, clientes, marcas de modelos, veículos, todas essas coisas. E basicamente que se gerássemos um diagrama disso, seria se não fosse exatamente como então muito semelhante ao que eu mostrei no início desta lição. Então agora criamos nossas próprias tabelas além de tudo o resto. Então, em seguida, queremos ver como semeamos dados no banco de dados. Semeando significa que colocamos alguns dados de amostra em algumas dessas tabelas. E depois voltamos, vamos dar uma olhada nisso. 14. Configure dados de sedimento: Bem-vindos de volta, rapazes. Nesta lição, vamos estar olhando para ceder dados e eu vou semear dados tem o propósito essencial de nos dar alguns dados de amostra para começar. Você sabe, como nós queremos ter certeza de que eu usuário está sempre no B2B é quando o aplicativo começa ou nós queríamos ter certeza de que existem alguns auto-informação lance básico em tabelas. Sempre que o aplicativo começa. Quando eu falo bolha, quando o aplicativo começa, quero dizer como se tivéssemos que instalar este site diferente, terminamos o aplicativo em nossa máquina, mas eu teria que implantá-lo em um servidor diferente. Quando executamos o aplicativo pela primeira vez e carregá-lo, o assento iria preencher o banco de dados com os dados básicos. Então eles só queriam dar uma olhada em como isso funciona. Tão calma e coisas que ficam sentadas. Talvez regras padrão. Então talvez ele, Eu vivi a função de administrador versus a função de usuário em tudo o que poderia ser pré-implantado seria talvez padrão marcas em modelos em nossa situação e cores. Coisas que você provavelmente não quer que as pessoas tenham que gerenciar a si mesmas, ou pelo menos ele queria dar alguns dados básicos mais uma vez. Então, para semear alguns dados em nosso banco de dados, o que teria que fazer é criar uma substituição para nossa função padrão na criação de modelos. Então, uma vez que temos o contexto de banco de dados aplicativo e ele está herdando de qualquer forma de contexto de banco de dados. Ele vai ter uma função que está protegida e nós podemos substituí-la. E ser chamado de vazio e ver dentro dos sentidos está me dizendo qual é a função que estou tentando construir, então na criação de modelos e ele fará tudo isso por você, sem problema. Então, o que quer que ele gere, você pode deixar isso em paz. Mas, por baixo desse nulo, podemos começar a ver o que queremos. Então eu posso dizer algo que o ponto construtor tem dados. Tudo bem? O ponto do construtor tem dados. Sinto muito, estou pulando a arma aqui. Entidade apologistas logo ali atrás entidade, nossos colchetes e então vemos as entidades. Então, neste caso, digamos que queríamos e as cores padrão, vamos começar com cores. Então a entidade seria cor. Tudo bem? E então abra e feche a cinta. E depois dizemos que ponto tem o, lá vamos nós. Saltando um pouco a arma. Então abrimos e fechamos. Bem, eu só vou abrir e fechar nossos parênteses dentro, dentro desses parênteses e outros dessa linha para que possamos ver claramente. Precisamos de novas instâncias dessa entidade que estamos prestes a criar uma nova cor e então preenchemos os campos, certo? Então criado por, eu só vou dizer sistema, certo? Porque isso não é, eu usei. Este é o sistema literariamente criando Enter. Ele criou, eu vou dizer isso data, hora, ponto nulo. Então, sempre que é, ele é criado. Esse é o momento e eu vou apenas quebrar, então. Então, não se afaste muito da tela. Então vírgula, o próximo campo será dados ou dados, que também é passou a ser ponto datetime. Não. Obrigado. Guan seria o nome. E eu fui ver, digamos, bloquear. Essa é uma cor de carro muito comum e atualizado por é igual ao sistema. Então eu meio que fiz como POSIX mordiscou. Você pode ordená-lo se quiser ou qual é o ponto que você deseja senti-los em, e que deve estar entre aspas como uma string. Lá vamos nós. Tudo bem, eu não preciso colocar no ID porque se eu não fornecer o ID, então ele irá automaticamente dar-lhe o ID e tudo para incrementar nós vimos o quê? Se eu colocar no ID, em seguida, ele vai dar-lhe o valor ID que eu dei a ele. Então, se eu quisesse que este fosse IB 10, então eu poderia dizer que a identificação é 10. Eu não quero isso. Quero que o sistema faça tudo isso. E então para cada cor que eu queria adicionar, eu posso separar os diferentes modelos. Então eu acabei de criar este. Posso dizer vírgula e, em seguida, cria um model1. E então digamos que este é azul. E então podemos separá-los, continuar e continuar. E então esse método é verdadeiro para qualquer outra coisa que possa criar nossa semente. Então eu posso pegar todo esse bloco de código e, em seguida, repetir essa entidade ponto construtor. E isso disse que eu queria vê-los fazer ou algumas entidades mistas. Meek dot, dot, dot, dot tem dados e, em seguida, basta dizer novo microfone, e então basta preencher esses modelos de acordo. Agora, novamente, se eu fizer isso para cada tabela, se, se fazendo isso para Joe estudiosos para subir este espaço de modo, imagine fazer isso cinco vezes mais para mais, potencialmente mais registros. E eu não gosto disso. Não gosto que meus arquivos pareçam espaguete, para ser honesto. Então o que vamos fazer é obstruir isso em outra função, certo? Ou outro arquivo completamente. E eu vou criar uma pasta aqui no meu projeto de servidor e eu vou chamá-lo de Configurações. Então, configurações de Nova pasta, certifique-se de que eu tenho que está girando em torno dele. Lá vamos nós. E, em seguida, a inserção de configurações, eu vou ter uma pasta mãe porque as configurações podem ter várias coisas. Então eu vou dizer apenas entidades. Eu sempre adoro separar essas coisas em arquivos diferentes sobre plenitude. Eu sei exatamente onde ir para encontrar Watts. Então, essas entidades null, eu posso criar um arquivo de configuração por tabela que eu gostaria de facilitar o assento para. Então vamos criar uma classe e eu vou chamá-la cor são variação de configuração de semente, tudo bem, configuração de semente de cor. Agora, a fim de obter este arquivo de configuração para saber sobre o padrão que precisa ser obtido com todo o construtor e assim por diante. O que não saímos para fazer é deixá-lo herda da configuração do tipo de entidade I. Tudo bem, e isso pode exigir bibliotecas desaparecidas. Então, Microsoft Entity Framework Core, vamos em frente e incluir isso. E então eu especifico a entidade que eu precisava saber, uma tigela, que neste caso é cor, que então estava indo para requisitos que incluem outra biblioteca, seu objetivo. E então eu vou ter que implementar a interface que então traz esse arquivo de configuração, certo? Configurar. Bem, o método lamenta. Então configure vai então injetar um construtor baseado na cor, que é basicamente baseado no mesmo construtor aqui para o ModelBuilder. Então todo esse código que eu tinha aqui, eu posso saber que tic pode cortá-lo e colá-lo dentro deste método. Agora eu não preciso de muito código e é aqui que eu estava pulando a arma porque este é o meu método habitual. E quando eles usam esse método, ele já sabe que está lidando com cores. Eu não tenho que dizer entidade ponto construtor é cor porque ele já sabe construtor é baseado na cor. Então eu posso dizer que o ponto construtor tem dados e é onde eles estavam. Minha mente estava inicialmente quando eu estava criando todo o pedaço de código aqui. Então, agora que temos essa configuração configurada neste arquivo que claramente não é além do contexto de obrigação DB. Agora eu preciso do aplicativo e contextos dv, ou pelo menos este método para saber que ele deve estar chamando este método configure aqui, certo? Assim, na criação indesejada o que os outros dizem pontos construtor, aplicar a configuração. E então eu vou instanciar nossa configuração de sementes de cor, certo? E então, claro, inclua quaisquer referências faltantes, e então é isso. Então você vê nós transformamos toda essa LAN, todas essas linhas de código em uma linha de código. E para mim isso parece melhor maneira. Você sabe, quando você olha para o contexto do banco de dados do aplicativo, você deve ser capaz de procurar as concessões de dados e ter uma boa idéia se você quiser os detalhes, você vai para outro lugar. Então vamos até aqui e depois vemos os detalhes do que está sendo sentado. E assim esse princípio pode continuar para qualquer outra entidade que encaminhe você deseja ver dados. Então, digamos que queríamos semear em mistura. O que são, vamos lá, carbonos, vamos ver, Toyota e BMW, certo? Então estou te desafiando a fazer uma pausa, certo? Conheça, crie sua própria configuração de semente e coloque-os em. Então para mim, assim por diante Toyota e BMW. E então você provavelmente pode tendência semente para modelos que correspondem aos modelos Toyota e BMW. Certo, então espero que tenha feito uma pausa e tentado por conta própria. Se não, você pode fazer isso. Não. Mas o que eu fiz foi seguir a mesma técnica. Criei um para o microfone, criei um modelo de fóton, e depois tenho os respectivos ficheiros aqui. Então, para o microfone. Tenho dois microfones nos fóruns da BMW e da Toyota. E então para os modelos que criei quatro, certo? Eu criei as larguras Prius, que se você conhece carros, esses são da Toyota. E, em seguida, as três séries em um X5 que pertenceria ao BMW. Tudo bem. Então você pode ir em frente e você cria você vê a inflamação e você apenas cria esses arquivos de configuração. Quero dizer, se você não gosta de fazer os arquivos de configuração, tudo bem. Você sempre pode colocar tudo dentro do modelo criando o que já discutimos. Por quê? Pessoalmente, não gosto disso. Então é por isso que estou mostrando esse método. Qualquer OMS, uma vez que tenhamos feito essas configurações, precisamos se você completou minha sentença dizendo migração do ADA, então você está sob caminhões. Então, precisamos dizer adicionar migração. E então eu posso dizer ver o padrão. E digamos que os dados do carro. Claro, você quer contar, é uma história dentro do nome, certo? Então, podemos ir em frente e adicionar essa migração e nos permite dar uma olhada rápida no que esse arquivo de migração cospe. E uau, tudo bem, estou recebendo um erro desagradável. É bom para nós ver esses erros porque nós os encontramos de tempos em tempos com nossa migração. Então é bom entender o que pode ter acontecido. Então ele diz que a entidade semente para a cor do tipo de entidade não pode ser adicionada porque valores diferentes de zero necessários para o ID da propriedade consideram fornecer um valor negativo para, ok, mas então olhando para as minhas configurações de semente que não têm nenhum ID. Mas então eu estou pensando agora se essa vírgula no final é este sistema pensando que eu queria colocar uma identificação. Então deixe-me pegar o o.com. Não sei se você tem esse problema. Se você fizer isso, então você pode tentar isso também. Se não o fizer, então parabéns para você acertou na primeira vez, alguém para tentar de novo. E há também um processo de solução de problemas. Bem, isso não ajudou. Então o que eu vou fazer então é tentar ser explícito com o id. Tudo bem, então uma das vantagens de ser explícito com o ID de qualquer maneira seria que se estivéssemos criando registros que C tinha dependências. Então, eu vou semear em veículos padrão, por exemplo, e, em seguida, adicionar para colocar a cor, Sinto muito, o ID do Chamador e o ID Meek e assim por diante. Então, por ser explícito com o MC e todos os IDs são todos os IDs nessas entidades. Então eu posso dizer explicitamente que o veículo deve ter este ID de chamador, este ID Meek, porque eu sei que por padrão esses IDs devem estar presentes. Então vamos colocar essas identidades. E as chances são de você entrar na mesma era que eu e isso não é problema. Podemos ver exatamente qual é o erro em espera. Sólido. Então, colocando esses valores de ID em cor, marca e modelo. Vamos tentar de novo e este estilo. E lá vamos nós. Então, chegamos à nossa migração. Então não, nós vemos, tudo bem, então sim, eu te enganei um pouco. Temos que colocar esse valor de id desde o início. Tudo bem? Então nosso arquivo de migração diria inserir as cores e, em seguida, é quebra-cabeça as colunas. E então ele nos dá os valores que irão para cada coluna. Então ID, ID do sistema, nova data e hora para o criado. A mesma coisa para data atualizada e assim por diante. Então ele faz isso para todas as tabelas para as quais tínhamos especificado semeadura, ver esses dados, certo? E então o amanhecer, é claro, inverte isso. Então, quando atualizamos a base de dados e, em seguida, executar isso. E, em seguida, enquanto isso, o que eu queria fazer apenas ir para o servidor Object Explorer e atualizar. E podemos apenas dar uma olhada nos dados que estão agora em nossa tabela de cores. Então, se eu clicar com o botão direito e dizer ver dados, em seguida, vemos nosso conjunto de dados ACR IDs, mesmo que não será gerado automaticamente quando estamos no sistema está sendo usado pelos usuários. Estamos semeando, temos que fornecer esses valores de ID, o que faz sentido, certo? Então isso é tudo o que fazemos pelas cores. Então, se você quiser, você pode tentar e semear alguns dados para um veículo, para alguns veículos padrão, porque já temos fazer alguns modelos. E digamos que comecemos a frota com dois veículos. Eu não tenho certeza se eu quero necessariamente semear veículos no sistema embora. Eu provavelmente vou querer que o usuário ou quem vai estar usando esta obrigação em uma base diária para realmente fazer isso. Mas uma outra coisa que eu definitivamente quero semear em nosso banco de dados seria rolos, porque nós vamos ter diferentes funções no sistema, vamos ter admin user_roles, certo? Então vamos apenas fazer as filas e então podemos chamá-lo um dia para esta operação. Então, você sabe o que eu estou desafiando mais uma vez, vá em frente e faça você mesmo e nós podemos comparar notas. Tudo bem, então se você chefe Don, você assistir pequenininho ficou preso, isso não é problema. E estou aqui para ajudá-lo a superar isso. Tudo bem, então a coisa com a regra é que eu disse rolar, mas o tipo de dados necessário não é regra como, oh, você tem identidade usuário para os usuários, você tem papel de identidade para as linhas. Então nosso arquivo de configuração de função teria regra de identidade como o contexto ou como a entidade, certo? E então, quando estamos construindo tudo, temos nova regra de identidade e temos nome e nomes normalizados. Então este nós não, nós definitivamente não precisamos colocar um ID porque o ID para nossas tabelas de rede ASP seria GUID, certo? que significa que é, é difícil para nós colocar o ID lá que poderíamos, mas nós não temos que adicionar este ponto a menos que nós estávamos indo para ver os usuários que vão pairar foi, nós precisávamos explicar o id. Oque significa que é, é difícil para nós colocar o ID lá que poderíamos, mas nós não temos que adicionar este ponto a menos que nós estávamos indo para ver os usuários que vão pairar foi, nós precisávamos explicar o id. dizer algo como id é igual a ponto novo bom ponto toString. Então ele iria gerar um GUID explícito e, em seguida, colocar isso, mas então isso ainda é tipo de aleatório porque nós realmente ainda não temos certeza de que valor isso iria fornecer. Então você pode realmente ir em frente e obter isso bom em outro lugar. Você pode encontrá-lo on-line e gerar um GUID. E você acabou de colocar essa boa Valerie ou eu. Então você sabe que este é um bom valor para a função de usuário. E então poderíamos dizer que isso poderia modificar ligeiramente, que se dissolveria para ser qualquer grande modificação, a estrofe de quatro a 56, e não seria nada muito extravagante. C, C T, T, T, T para F, F, certo? E então esse é o nosso bem. Então temos o amanhã, sabemos as identidades. Então, se usarmos como usá-los mais tarde, podemos fazer isso. Então eu estou apenas mostrando a vocês que há tantas dinâmicas existentes muito menos cedo feito árabe fazendo isso de uma maneira, então ele pode tentar de outra maneira e nós podemos trabalhar a nossa própria maneira de acordo. Então agora eu adicionei esses papéis. Preciso adicionar a configuração da função aqui. Certo? De modo que quando adicionamos uma migração mais uma vez, e então este é C. C as funções são regras padrão. Então, se dermos uma olhada nele, veremos aqui que está nos adicionando os papéis. Vai fazer tudo isso. E então ele ainda vê as configurações aqui, mas não está fazendo nenhuma atualização. Não há nada lá para ser atualizado para o duro, certo? Então podemos ir em frente e atualizar nosso banco de dados. E, em seguida, quando eu ir para o meu banco de dados e ver as regras, eu não estou vendo eles com os próprios valores de ID assim fornecidos e os dados em conformidade. Então isso é apenas uma introdução rápida como todo o fim de semana configura alguns valores padrão em nosso sistema. Para quando nosso aplicativo é instalado, os usuários teriam algo para começar a usar. Algo como regras definitivamente terá que estar no lugar. Porque quando os usuários estão se registrando estão sendo criados, precisamos atribuí-los a todos, todos difíceis a caixa, certo? Então, será bom se em seu próprio tempo você ir em frente e semear em administrador padrão, usuário, certo? Qualquer um que somos diz que precisaremos nos registrar como nosso uso regular de mais tarde. Mas vamos olhar para isso. Mas agora você quer se concentrar em, pelo menos, entrar em um administrador padrão usuários, para que você crie o usuário um. Mas ao ceder este, você tem que ver o usuário Andy fora para semear o user_roles. Tudo bem, então você pode ir em frente e fazer isso como um desafio. 15. Usuário padrão e função de usuário — Compare notas: Tudo bem, pessoal, bem-vindo inseto. Então, como eu tenho certeza que você inferiu a partir do título desta lição, é realmente apenas para comparar notas porque eu deixei você com uma mini tarefa de codificação e eu espero que você tentou. Se não, então a história da escola juntos de qualquer maneira. Portanto, a atribuição era certificar-se de que você vê o usuário, bem como a função de usuário. Porque o que queremos é aquele usuário padrão com a função de administrador em nosso sistema. Então eu criei uma configuração para o usuário e a configuração para a função de usuário. Então, já fizemos o rolo juntos são as funções onde tivemos ou função de identidade que criamos nossos próprios bons valores são definidos os IDs explicitamente. A coisa é que, claro, se você tem dependências, você ainda quer colocar em dados na ordem das dependências. Então a mesma regra que é aplicada ou que eu teria incentivado ao criar as tabelas. Aplica-se quando semeando dados Cozy Car B, semeando, um usuário associado com a nossa função quando você não tem as regras, são os usuários, certo? Então temos o papel. Nós criamos o usuário. Então eu tenho a configuração de semente de usuário onde eu configuro um usuário. E quero dizer que seu usuário pode ser diferente do que se você tivesse dificuldades com essas coisas, então não há problema. É por isso que estamos aqui. O que acontece é que eu tive que usar um mais duro. Então nós não temos biblioteca fornecida a nós pelas bibliotecas de núcleo de identidade chamado a senha mais dura, e nós contextualizá-lo para o usuário do aplicativo. E, em seguida, com este fim de semana do HobShare, crie as senhas com hash. Então, estou apenas inicializando isso. Então dissemos construtor tem o, ele vai criar um novo usuário aplicativo com o ID explícito, que é apenas mais um bom, o endereço de e-mail, o e-mail normalizado. Então e-mail e e-mail normalizado será o mesmo, exceto normalizado significa que tudo é maiúsculo, certo? Damos-lhe FirstName, LastName, nome de usuário, normalize nome de usuário, mesmo princípio que o e-mail e você normaliza o e-mail e, em seguida um hash de senha tem que ser uma versão hash de qualquer senha. Então este é um chefe padrão ou que estamos usando. - Claro. Mas não podemos armazenar esse texto no banco de dados, mas podemos classificá-lo em código-fonte porque nossos clientes provavelmente nunca verão o código-fonte. Mas então, no nível do banco de dados, nós nunca devemos, ninguém deve ser capaz de entrar em nosso banco de dados e ver esse processador. Então, em palavra diferente, desculpe, núcleo de identidade com sempre hash a senha. Então, quando estamos sentados, é isso que temos que fornecer uma senha com hash. Tudo bem? Então nós fornecemos esse buzzword silencioso e esse é o usuário. E, em seguida, na configuração de função de usuário, mesmos cefalópodes que acabamos de passar, exceto que estamos usando função de usuário identidade e que tem que ser contextualizado para string. Tudo bem? E então o que vamos colocar aqui, não precisamos do ID aqui, mas isso realmente, eu não acho que essa coisa é estável, usa um ID, mas precisamos do ID da função. e certifique-se de que eu tenho o ID do personagem, que eu tinha no topo. Então deixe-me encontrar essa coragem na direita, e todo administrador, tudo bem. Id que precisamos é o administrador, o único. Lá vamos nós, e então o ID do usuário está errado, todos os tipos. Estou só a mostrar-te, certifica-te de que recebes isto correctamente. Então, o ID de usuário a ser usado está certo? Então, depois que fizemos essas correções são, quero dizer, aqueles axônios porque tenho certeza que você já está subscrevendo caminhão. Em seguida, podemos ir em frente e semear nossos padrões de usuário, certo, assim atualizações, Banco de dados. E desculpe, precisamos adicionar os apologistas da migração. Então adicione migração de traço, certo? E então dizemos usuários padrão adicionados. Carrego a migração para ser executada. E esta é a segunda vez que vemos esta faixa amarela. Se você lê-lo da primeira vez, eu não apontei que é velho, mas está basicamente dizendo que há alguns problemas e que pode resultar na perda de dados. Então eu aludi a isso antes, quando estávamos descobrindo como as migrações funcionam, que às vezes você encontra mudanças que podem afetar os dados existentes. Então você vai chegar, é um aviso para dizer, hey, você sabe, cuidado porque você pode estar apagando dados. Basta dar uma revisão rápida só para ter certeza de que salgado realmente quer. É tudo o que está vendo. E esses arquivos de migração, como vemos, sempre podemos modificá-los se quisermos, certo? Então aqui estamos vendo inserções nessas tabelas, esses valores, sem problema. E então sabemos que o próximo ponto de ação é nossa atualização, que então deve nos dar alguns usuários padrão. Então já registramos eu usuário. E então, quando eu olho em usos de rede ASP, eu deveria agora ver dois usuários. O que registramos, certo? Lembre-se do teste no blazer.com, esse foi o usuário que configuramos inicialmente. E aqui está o que nós apenas semeá-lo no banco de dados, que é o nosso usuário administrador. Tudo bem? Então você vê que isso está funcionando e, em seguida, nós não fornecemos um nome e sobrenome quando registramos o usuário porque bem, nós precisamos dele, nós precisaremos modificar o registro para isso. Mas então temos os campos de usuário admin aqui, o FirstName, LastName, de acordo com o que vemos que, claro, eles eram opcionais de qualquer maneira. E então, se eu for para os papéis, sabemos que somos zeros. Bem, deixe-me apenas focar na tabela de funções de usuário onde ele irá nos mostrar quais usos associados a qual função. Então, como eu disse, ele não tem uma coluna de identificação de qualquer maneira, certo? Então nós só queríamos saber que este ID de usuário, que é o nosso usuário administrador, ele E para, para ele, para, para o seu baixo corresponde a essa regra. Então isso é basicamente tudo o que há para semear regras padrão, usuários padrão em nossa aplicação. 16. Revisar e adicionar alterações no GitHub: Certo, pessoal, então nós estamos aqui e estamos em outro ponto de controle e nós só queremos tipo de rever tudo o que fizemos para esta seção. Então, em primeiro lugar, começamos olhando para nossas permissões de núcleo de identidade do servidor de identidade. Analisamos o que está no arquivo de inicialização que nos permite realmente conectar ao banco de dados, bem como conectar ao nosso servidor de identidade e todos esses recursos. Então nós entramos em realmente configurar nossas próprias notas de andaimes de banco de dados, as tabelas do servidor de identidade para que possamos armazenar usuários sob funções e todos aqueles bits de suporte de dados que foram para criar nossos próprios modelos de domínio e adicioná-los para o mesmo banco de dados. E então fomos em frente e olhamos para sementes de fim de semana inteiro nosso cria alguns registros padrão em nosso sistema em tempo de execução. Então, depois de fazer tudo isso, eu tenho certeza que você teria absorvido em tudo e ele pode sempre não revisá-lo e tentar obtê-lo, concretizar como tudo funciona, o que está neste momento, nós só queremos verificar em nossas mudanças ao nosso repositório para garantir que mantemos uma boa conta rápida de todo o trabalho realizado. Então o que fazemos aqui é passar para obter mudanças, e então nós damos a ele uma pequena mensagem de commit agradável. E essa mensagem, é claro, deve ser clara o suficiente para, você sabe, você mesmo no futuro ou seu eu futuro, bem como qualquer outra pessoa que poderia vir e olhar para dizer a eles, você sabe, o que exatamente foi feito. Então você sempre pode simplesmente percorrer e ver tudo o que aconteceu com andaimes fora nossas páginas de identidade. Demos uma olhada nas configurações de semeadura, todas essas migrações. Então a coisa legal é que se alguém vem atrás de você e recebe o que você está prestes a verificar nesta citação, repositório de software antigo, tudo o que eles precisam fazer é modificar, talvez eles estão acima settings.js filho para qualquer banco de dados nome do servidor e do banco de dados que eles desejam ter. E então eles são uma atualização precisa de uma base. E então ele passará automaticamente por todas as migrações e aplicará tudo na mesma ordem em que é alinhado notas. Tudo bem, então se você perder esta máquina que você está trabalhando nulo, mas você tem uma cópia do seu projeto no GitHub, então neste, pelo menos neste momento, você não perdeu nenhum dado porque todos os dados são apenas padrão coisas capturadas nesses arquivos de migração. Então você só precisa tirar esse projeto aquele instantâneo onde tanto o frango e depois você executar meu banco de dados. Você vai em frente e criar o banco de dados, colocando todas as tabelas e a estrutura e os grandes dados para você. E então você está no, mas tem uma estaca zero. Então agora vamos em frente e dizer “cometer tudo” e afundar. Então aquele comitê miserável localmente e ele irá sincronizá-lo com o bom trabalho que Stacy cometeu localmente. E então ele está empurrando e, em seguida, ele sincronizado com sucesso com nosso repositório GitHub. Então, quando voltarmos, vamos continuar aprendendo mais problemas para todo este aplicativo blazer funciona com Entity Framework em todas as partes móveis. 17. Visão geral - API e configuração de acesso para banco de dados — REST: Ei pessoal, bem-vindos de volta. Nesta seção do curso, vamos dar uma olhada em como descanso APIs interagem com blazer. Não, eu tinha aludido a essa interação antes e eu vou apenas dar uma breve recapitulação nesta visão geral onde vamos dar uma olhada em um, o fato de que o projeto do servidor é realmente um projeto de API. E o que vamos criar controladores de API Ruby como vemos aqui com o controlador de previsões meteorológicas de amostra, onde temos um controlador de API e o que ele realmente expõe nossos endpoints. Então, se você não está muito familiarizado com APIs de descanso, você pode olhar para o meu Embora cursos sobre desenvolvimento de API de descanso com.NET Core Five, ou meu blazer de ponta a ponta e curso de desenvolvimento de API Web, onde realmente ensinou, falar sobre a construção da API como um entidade separada e clientes de construção para se conectar a ela. E esses clientes serão clientes blazer. No entanto, neste curso em particular, não vou me concentrar muito em Rest, API e todas as práticas que vão. E eu realmente quero garantir que quando você tem este modelo de projeto e você quer um aplicativo blazer, você vai acabar com nosso aplicativo cliente que nós vimos aplicativo servidor e como nós vamos construir a funcionalidade da API para atender a este cliente. Então, tudo aqui é interno a uma grande aplicação. Ele diz que ele faz algumas partes móveis e eu só quero que nós tenhamos uma plena apreciação de todos os diferentes pontos de contato e como eles se unem. Então, quando voltarmos, vamos continuar nossa discussão sobre nossos controladores de API irá criar o nosso próprio e ver exatamente como podemos testá-lo para ter certeza de que está funcionando. E então seguiremos em frente a partir daí. 18. Crie e testar os endpoints de REST: Nossos caras, estamos de volta e nesta lição vamos analisar a criação, antecipando nossos endpoints de API de descanso. Tudo bem, então nós já estabelecemos que ou endpoints são expostos através do que vamos chamá-lo de controlador de API. E mais uma vez, estou usando o controlador de previsões meteorológicas como crescido 0 porque é isso que nos é dado. E vemos aqui, Se você é usado eles VC, é realmente apenas um outro controlador só tem esta anotação para especificar que é um controlador API. Ele herda da base do controlador, mas tudo o resto é praticamente o mesmo. Também sobre os axônios, tratamos os leilões nem como pontos finais, e temos o que chamamos de verbos restantes. Assim, os verbos RS serão obter, postar, colocar e excluir. E de qualquer forma, estas são geralmente as operações que estamos acostumados, certo? Obter seria lido, postar seria criar, colocar seria atualizar, e excluir é excluir, certo? Então estes são os verbos que nos ajudam a facilitar nossas operações cantadas. Agora no, em termos de teste de nossos endpoints quando executamos nosso aplicativo aqui. Sabemos que temos nossa interface web, certo? Isso é o que nos são apresentados e tudo bem. Mas então todos nós, já estabelecemos que ambos os aplicativos cliente e servidor estão executando o mesmo endereço aqui, que é localhost dois-pontos 443. Se eu tivesse no meu caso você, provavelmente teria um número de porta diferente. Mas o ponto é que tanto o cliente eo aplicativo servidor, eles estão usando o mesmo endereço, que significa que eu posso usar minha ferramenta de teste API chamado Postman e agradou esse mesmo endereço em uma solicitação get. E então o que eu queria testar é se eu posso obter os dados da previsão do tempo, certo? Então ele diz “pegar”. Então, depois de ter certeza de que meu pedido é que eu recebo. E então a maneira de chegar a ele seria através do controlador raiz. E controlador quer significa o nome do controlador, que neste caso é se para previsões de corte, desculpe. Então eu posso ver HTTPS dois-pontos localhost, barra de dois-pontos, barra, desculpe, dois-pontos localhost, o número da porta e, em seguida, o nome do controlador, que é previsões meteorológicas. Então, quando eu enviar esse pedido, bem, neste caso eu estou recebendo de volta um status para 01 em autorizado por que eu estou recebendo esse dinheiro? É porque temos essas anotações autorizadas, então você tem que ser um usuário conectado e tudo mais. E passamos por todo o fluxo de identidade e tudo mais. Portanto, se você não é uma tendência de usuário conectado para acessar este endpoint, ele irá rejeitá-lo. Então, se eu apenas comentar isso, não autorizar e tentar novamente, então eu vou obter uma resposta diferente onde eu obter um 200 OK e eu estou recebendo de volta os dados do banco de dados. Tudo bem, então isso é todo e API funciona. Eu estou começando sobre este JSON, e este é o JSON que vai, bem, isso não está vindo do banco de dados primeiro e isso é tudo alguém que foi cozido na, na ação ou no ponto final. Mas vamos apenas representar OS executando uma consulta, obtendo os dados e, em seguida, enviá-los de volta para quem está solicitando os dados, que neste caso pode ser perdido através do Postman ou do nosso aplicativo blazer lado do cliente, é por isso que no cliente projeto. Agora veja com os dados de busca da página, eles vão buscar dados. Ele fez a mesma operação. Ele foi e disse, eu quero dados deste ponto final. Então eu não quero que você olhe para este código ainda. Não estou mostrando que esse discurso é para isso, que dados estão fazendo. Você não foi capaz de acessá-lo antes porque ele tem o autor que eu começo. E na época não configuramos todo o sistema de login do usuário e assim por diante corretamente. Então agora você pode realmente ir e testá-lo, mas isso prevê o aplicativo do lado do cliente. Considerando que este autor como odor, prevê o ponto final de acesso não autorizado, mas, em seguida, através da autenticação integrada em nosso aplicativo até agora, em seguida, somos realmente capazes de apenas autenticar no lado do cliente. E então este autor que eu começar, veremos que é nosso, é um pedido autenticado vindo através do cliente para este ponto final, então ele permitirá que ele interrompa. Então eu estou apenas dando a vocês uma visão geral do que obtém na amostra. Nenhum lugar vai criar o nosso. Então vamos criar S1 e um simples. Vamos começar com uma de nossas mesas mais simples como eu. Tudo bem, então vamos querer que os endpoints para permitir que o cliente seja capaz de interagir com nossa tabela de banco de dados para mim. E o cliente vai fazer isso através da API. Portanto, a API precisa ser capaz de se comunicar com nosso banco de dados. Agora, a coisa boa sobre Dante Corps é que eles nos dão andaimes para que eu possa apenas clicar com o botão direito do mouse em ir para, ir para novo item. E então eu posso escolher isso. Quero um controlador de API. Vou escolher três, certo? Então eu queria ir para controladores, ir para Adicionar e, em seguida, dizer controlador. E então eu vou ter esta caixa de diálogo perguntando que tipo de controlador eu gostaria? Bem, em primeiro lugar, eu quero um controlador API e, em seguida, eu quero um com ações usando Entity Framework. - Não. Fui construí-la dentro de dois trabalhos diferentes. Passo você através do código e, em seguida, tipo de explicar por que as pessoas iria implementar outros padrões em cima do Entity Framework para que habilidades minton mais fácil a longo prazo. Mas para obter-se aplicação básica que pode ler, escrever e interagir com o banco de dados e o cliente. Isso é tudo que você realmente precisa. Então ações do controlador API usando Entity Framework, clicamos, damos-lhe Doyle que tem que especificar a classe modelo. Então, a classe modelo aqui significa qual classe não realmente nem curável as nuvens é qual é o domínio não são. É claro que temos a responsabilidade de garantir que escolhemos o correto. Então eu quero um para o manso, certo? A classe de contexto de dados seria aplicativo no contexto de banco de dados e, em seguida, é tudo degenera o nome do controlador de mistura. Você pode mudar isso, mas eu acho que está claro o suficiente o que este controlador será forçado a deixá-lo. E então eu fui para ir em frente e clique em adicionar. E depois de alguns segundos e um pouco crescido Ward, agora teremos o nosso controlador. Então você verá aqui ele tem o controlador de barra API raiz. Se você comparar isso com a previsão do tempo, este controlador de doses. Então a diferença é que podemos realmente especificar a rota. Então eu não quero que ele diga api slash, Eu queria apenas dizer controle. Então, em outras palavras, para chegar a este controlador, a essas raízes, nós só precisamos ver marcas, tudo bem. Ele nos dá controlador API de anotação. Se quisermos protegê-lo, podemos adicionar a anotação de autorização na parte superior, o que não faremos ainda, então vou colocá-la lá para que você se lembre de fazer isso mais tarde. E, em seguida, o resto é realmente apenas dizendo que, ok, nós temos uma classe com esse nome herdando de controle obesos, temos contexto privado de banco de dados de aplicativo somente leitura, e nosso objeto está nos contextos de pontuação. E então o que está acontecendo aqui é chamado de injeção de dependência, onde estamos injetando o contexto de banco de dados do aplicativo que está servindo todo o aplicativo em toda a API, onde injetá-lo neste controle específico e fazendo um cópia local. E é isso que está acontecendo aqui. Então fazemos o nosso campo privado. Nós deixamos o construtor nem que ele deve esperar até, você sabe, o, o objeto do contexto de banco de dados aplicativo, que representa nossas conexões com o banco de dados. E depois queremos fazer uma cópia local. Então nós equiparamos ou campo local para os objetos que estão sendo enviados, e então nós continuamos nossas operações com nosso campo local. Então você notaria que nós também temos todos esses verbos tipo de gerados para nós. Temos o HTTP Get verbo, web, HTTP Get com a especificação ID e, em seguida, eles podem dar exemplos. Então, mistura da NSA. Então ele diz API Slash mix porque, por padrão, é um controlador de barra API. Nós tiramos a API Slash Cirílico e certamente o que devemos ter é apenas misturar, certo? Esses são comentários que você não tem que passar inalterados e eu estou apenas explicando por que vamos tirá-lo, certo? Então, quando você aperta mix, ele vai acertar o get por padrão. E, em seguida, ele vai chamar este método. Então, o ponto final aqui, este método é realmente apenas um método que tem qualquer ação que precisa ser realizada. No entanto, o nome da função ou um nome de método não é o que estamos colocando no caminho. Tudo o que temos que fazer é chamar isso porque então ele vai inferir que quando você atender esse tipo de qualidade, você está fazendo um pedido get. E então eu chamarei esse método automaticamente. Tudo bem, então você notaria que este iria obter o mesmo nome de método, exceto que ele leva um parâmetro do tipo ID e é esperado para dispersar em ID que você espera chegar. E realiza toda essa operação. A mesma coisa com o nome do método put. Ele espera que o ID e espera que os dados para cartão 22. O que devo ver uma empresa com este ID? E eu não estou passando muito do código ainda porque nós vamos estar fazendo um grande refator com isso. Mas só estou dizendo que tudo isso vai funcionar fora da caixa. Então o que vamos fazer é executar isto e testar. Tudo bem, então estamos de volta ao Carteiro e eu vou mudar isso para dizer mix. Agora lembre-se que tínhamos soma andaime. Misture no banco de dados inicialmente. Então isso significa que eu tenho dados que devem ser capazes de voltar quando eu enviar esse pedido. Lá estamos obtendo Bach ou dados ou obtendo sobre Toyota com o ID1 criado por embora por todas essas coisas maravilhosas. Veja, todos os dados estão voltando. Apenas no caso de você estar aqui, acho que não está realmente trabalhando na tendência para arrastar o STM quando colocar um ponto de interrupção aqui neste GetMethod. Então vamos tentar de novo. Eu clique em enviar e, em seguida, Visual Studio vai me alertar que eu atingi o ponto de interrupção neste método, que irá então executar esta conexão de banco de dados consulta, obter a tabela marcas e colocar tudo lá em uma lista e retorná-lo. Isso é praticamente sempre fazendo. Ele irá serializá-lo automaticamente em bloco JSON de texto e enviá-lo de volta. Você queria testar outro. Digamos que queríamos testar o Get with the ID. Tudo bem, então eu posso dizer misturar ferramenta de lama. E então isso deve me trazer de volta apenas os objetos BMW porque, em seguida, o método disse, ir para o banco de dados e encontrar o registro na tabela mix que tem esse ID. E se não for, se não encontrares nada devolvido, não telefonaste , senão virou os Beatles. Então, se eu colocar em ID Tin aqueles, eu não tenho dez mix no banco de dados. Então, ele retorna, não telefonou esta declaração se e ele retornou não dobrar desde que ele, toda essa funcionalidade saiu da caixa. Tudo o que fiz foi clicar três ou quatro vezes e temos um controlador inteiro. E o fato é que você pode gerar esses controladores para todas as funções, todas as outras tabelas e endpoints que você precisa expor ao seu cliente para que você possa ir em frente e fazer tudo isso se quiser. Só para explicar o que eles colocam leva o ID e leva os dados para o microfone, o que significa que eu estou prestes a fazer o meu barco para atualizar algumas coisas fora para enviar sobre o objeto com os dados atualizados. Ele irá certificar-se de que os IDs correspondem. Caso contrário, ele retornará uma seta 500 ou solicitação incorreta. Então ele vai dizer, ok, banco de dados, olhar para o registro correspondente são baseados no ID, o registro no banco de dados neve, e, em seguida, mudar seu estado para modificá-lo e, em seguida, apenas salvar as alterações porque eu acabei de obter dados atualizados, modo NOR que é modificado e em CVE, quaisquer alterações que haja para o registro existente. E então isso entra em erupção em uma captura de tentativa apenas no caso de haver conflitante nossa tentativa conflitante de atualizar o mesmo registro. Isso é praticamente tudo o que está fazendo. O posto é o Cria, certo? Então, quando estamos fazendo um post, isso significa que eu preciso mudar o verbo. Então o verbo em Postman precisa ser alterado estão coordenando isso, eu vou mudá-lo para postar. Será a mesma barra Meeks. Mas depois o corpo. E o que eu vou fazer é apenas uma espécie de tomar um que já teve. Então eu tenho que fornecer dados semelhantes a este em um pedido post. Então, no corpo. Tudo bem, eu vou dizer que eu queria um possível ponto geral JSON e PS lá. Desta vez vou colocar um Honda. Então esse é o novo microfone. E este Honda subiu ID3. Bem, na verdade eu não deveria estar fornecendo o id. Então, neste ponto, eu não forneço ID porque eu estou realmente criando algo no banco de dados. Então o banco de dados deve ser responsável por seus próprios pontos de idéia, certo? Então, a Honda criou analisando um sistema da mesma maneira porque não estamos prontos para ver o usuário que está logado está fazendo a operação, deixar os carimbos de data/hora que auditoria coisas. Então, agora podemos nos safar dessa. E o que eu vou fazer é enviar este post pedidos. Então isso deve me enviar de volta o objeto que foi criado. Havia empréstimos, por isso está cheio em criado. E está me mostrando que Honda foi criada com o ID3, com todos esses dados, certo? Então este Endpoints é banco de dados, me dê a tabela e adicione a ele qualquer objeto que está vindo através de nossa solicitação e veja se essas mudanças. E, em seguida, retornar created_at ação, que é a alta. E digamos que você pode ir me pegar com essa identificação e esse é o objeto. Praticamente. Tudo isso foi o que nos deu esse retorno, esse resultado de retorno. E se eu for aqui, local, se eu for para cabeçalhos e olhar para o local, isso é o que não comprou criado em leilão. Então isso significa que é sedentário onde eu posso ir e obter os detalhes, certo? Excluir trabalhos. Da mesma forma, mais uma vez, eu só tenho que passar nas exclusões. O que eu faria é dizer misturar e vamos dizer dois. Mas depois deletar. Então aqui está o que eu vou não querer criar aquele carro fictício. Então carro falso. Tudo bem, então eu vou enviar mais um pedido de postagem para o nosso carro falso. Deixe-me enviar embora MCAR com ID 4. Eu percebo, oh não, isso foi um erro. Eu não deveria ter feito isso. Então eu voltar, ir para excluir e eu vou mudar o verbo para excluir marcas é para ID para. E, em seguida, quando eu enviar vai dizer ferramenta para nenhum conteúdo. Então, qualquer coisa que seja um código 200 é bem-sucedido. E então, você sabe, pode variar. Tudo o que é um 400 é, é relativamente mal sucedido, geralmente mal sucedido, e 500 definitivamente não é bem sucedido. Então essa ferramenta para nenhum conteúdo, mesmo que ele diz nenhum conteúdo e pode parecer uma resposta negativa se você conhece os outros verbos e o que eles significam respostas de risco ADA em vez disso. E o que eles significam, você veria que essa ferramenta é na verdade uma boa resposta. Então, o que estamos recebendo, o que estamos fazendo neste método de exclusão é onde encontrá-lo. Se for nulo, então nós, se não for, não, desculpe, então removemos e salvamos as alterações e depois retornamos. Não são bons resultados. Então, é isso que tiramos da caixa para o nosso controlador. Agora, como eu disse, é simples o suficiente para ir em frente e brigar com esse tipo de controle para todos os outros recuperados para mim. Então eu posso ir e fazer de novo para nossos modelos. Posso fazer isso de novo por veículos. Novamente, faça de novo por todos eles. O problema, quem entrar quando talvez haja certas personalizações que precisam ser feitas. Ao salvar as alterações, talvez eu queira fazer algo diferente. Ou outras operações básicas que eu posso querer incluir em 1 e não incluir. Esse é outro ponto. Há certas coisas que dificultam a manutenção. Como nossa obrigação se expande quando usamos apenas o alt off the box code, como você vê aqui. Então o que queremos na próxima lição é implementar um padrão chamado unidade de trabalho, onde abstraímos isso, toda essa operação de banco de dados do controlador diretamente. Nós não vamos interagir diretamente com o banco de dados do controlador, mas nós vamos colocar outra camada no meio que nos permite orquestrar o que está acima, e acaba no nível Nitobi HIS. Sabe, é um pouco mais escrutínio e mais genericamente. Então não seja difícil digitar fortemente todas essas coisas o tempo todo. E então podemos ver onde a manutenção pode se tornar muito mais fácil a longo prazo. Então, eu não sou de lutar com nenhum outro ainda. Eu vou em frente e colocar na unidade de trabalho e então nós podemos brigar, prender e implementar a unidade de funcionalidade de trabalho naqueles tempos. 19. de implementação de trabalho: Ei pessoal, bem-vindos de volta. Nesta lição estaremos implementando o padrão de codificação popular chamado unidade de trabalho. Sabe, antes de eu ir para a unidade de trabalho Potter e eu só queria salientar que enquanto eu vou estar mostrando o padrão e enquanto eu encorajo você a aprender este padrão, este observador e pode não ser necessariamente necessário para você em seu contextos. Porque como dissemos, e já estabelecemos, poderíamos facilmente com alguns cliques, apenas gerar o controlador que já tem uma conexão o banco de dados e nos permite manipular dados, smoking dados, tudo a partir do banco de dados e nossa aplicação em conformidade. Então, dentro de seu contexto, você pode não precisar ir tão longe quanto implementar esse tipo de padrão. No entanto, quando você está pensando em capacidade de escala e manutenção, legibilidade do código e não repetir certas bibliotecas críticas em todo o lugar. E ter que fazer muitas mudanças toda vez que você quiser fazer uma atualização ou uma modificação, então você começa a pensar em padrões. Então, minha arma de escolha quando se trata de acesso a dados, padrões seria a unidade de trabalho porque permite uma implementação muito genérica de operações básicas cantadas em vários tipos de classe sem ter que ficar muito específico com a citação. Quanto mais específico o seu código recebe mais manutenção você tem que fazer quando algo precisa ser alterado. Então, quando você pode mantê-lo genérico, então é bom. Então vamos implementar o repositório genérico Potter e, bem como as unidades de potes de trabalho são. E em cima disso. Então vamos entrar nisso. Então, para isso, no projeto do servidor, eu vou criar duas novas pastas. Então eu vou criar um e eu vou chamá-lo de repositório I, que vai armazenar as interfaces. E então eu vou ter outro. Vou apenas copiar e colar e renomear que, em seguida, foi para chamar repositório. Certo, então temos duas pastas, uma para armazenar as interfaces, uma para armazenar as implementações concretas. Então a primeira interface que eu vou ter é o, é a nossa classe. Eu só vou criá-lo como uma classe sem ir para adicionar repositório genérico. Então você pode dizer classe ou interface. Se você fizer interface, lembre-se que eu tenho que mudar para público. Se você fizer classe, então lembre-se que você tem que alterá-lo a partir de interface de vidro. Então eu gerei apenas fazer a classe e, em seguida, mudá-la porque às vezes eu esqueço para mim a interface pública de qualquer maneira. Certo, então vamos falar sobre genéricos agora se você é novo no C-sharp, talvez sete ou ele, genéricos foram introduzidos. E eu genérico me permite especificar, não são difíceis de especificar ou outro nome de classe. Tudo bem, então eu quero que este repositório tenha funções que me permitam interagir com várias classes. E quando digo que classe é, quero dizer esses modelos de dados, certo? Então este repositório genérico, ele vai pegar uma chave do tipo T. E então eu vou especificar que t vai representar nossa classe, significa que não pode ser nada além do Dr. Classic encontrou a melhor interface do Darren ou qualquer coisa, você testa o vidro traseiro. Então dentro desta interface eu vou especificar uma função de combustível, certo? Então eu vou. De uma função que vai me permitir obter, tudo bem, e eu apenas digitei disse que você pode pausar, replicar seu por conta própria, certo? Mas então eu vou explicar cada linha de qualquer maneira. E este é realmente apenas um método com todos os parâmetros que eu acabei de escrever a linha porque eu não queria ir muito longe da tela. Então eu tenho uma tarefa. Estamos retornando uma lista de íons do tipo T. Então T, esse genérico , seja qual for o tipo de dados passado , esse é o tipo que vamos, esse é o tipo de dados que vamos nos concentrar. Quando este método é executado. Ele vai chamar o método obter tudo. Nós abrimos parênteses, nossa tomada Parramatta número um, que é uma expressão, certo? O que é apenas expressões lambda. Irei em frente e incluirei isso. Então eu tinha tomado uma expressão lambda como bare metal um, onde tomar uma consulta ordenável como parâmetro e, em seguida, uma lista de string chamada includes. Então podemos querer chegar a todos os parâmetros. Sempre vi que temos relações diferentes entre as nossas mesas, certo? Por isso, poderia ser que quiséssemos obter todas as reservas e continuar a incluir todos os detalhes dos veículos e do cliente por reserva. Assim, teríamos de nos certificar de que incluímos os dados adicionais. E eu mencionei anteriormente que esse tipo de união interna implícita está disponível para nós através da direita. A seguir, temos outra tarefa. E reparem que estou a usar tarefas. Então esta é uma parte da programação assíncrona. Veremos mais disso quando implementarmos os métodos, temos outra tarefa do tipo T. Certo? E estamos entendendo como ainda temos essa expressão. Então, o mesmo tipo de expressão, mas esta não é anulada. Então este diz que você não tem que passar em uma expressão. Se você continuar com este, se eu estou entendendo, isso é representar uma entidade, então você tem que me dizer qual você quer. Então você tem que me dar a expressão, certo? E então permitimos a lista de inclusões também. E então outros métodos incluirão e outros os colocarão lá e guiarão você através deles. Ou insira a entidade T. Certo? Então, quando queremos adicionar ao banco de dados, chamamos o nosso método de inserção. Podemos inserir uma lista de entidades se alguma vez surgir a necessidade. Podemos apagar um com base na identificação. Podemos excluir nosso chefe gama em todos os que queremos excluir. E, em seguida, temos atualização t entidade. Certo, então esse é o nosso repositório genérico. Não, precisamos ter a classe concreta para o nosso repositório genérico. Então nós vamos para o repositório, não ire repositório neste momento, mas repositório vai adicionar uma classe. E na verdade é um sistema de classes. Onde é que lhe dá este mesmo nome apenas com todos os I0, I0 repositório genérico e, em seguida, repositório genérico, clique em adicionar. E então temos que deixar este também ser genérico. E ele vai herdar do repositório genérico I. Certo, qual é claro do tipo T? Desculpe, eu construí inadvertidamente? E então fazemos a mesma coisa onde dizemos onde é vidro. Eu vou apenas copiar isso porque nós só queria ser um muito explícito, mas então eu preciso incluir o Conselho de Referência ausente que depois incluir a referência ausente terá que implementar a interface. Então vá em frente e faça isso. E então você verá que ele é gerado todos os fogões do método ponto correspondem com os métodos que tínhamos todos alinhados. Muito bem, então vamos trabalhar no nosso repositório genérico. Para esta seção, precisamos injetar nosso contexto de banco de dados também. Inicializar nosso conjunto de banco de dados para qualquer tipo de dados é passado em St. Então eu vou criar meu próprio campo privado contexto de banco de dados aplicativo somente leitura. Então, após este contexto de um nada, lembre-se que ponto representa nossas conexões no banco de dados incluem a obrigação de referência ausente no contexto do banco de dados, e eu vou chamar este nos contextos de pontuação. Tudo bem. Além disso, eu vou inicializar outro privado somente leitura onde eu tenho db sit. Essa palavra-chave toca um sino para você e o aparelho de TV é do tipo T. Porque mais uma vez, não sei o que vai ser a qualquer momento. Estou fazendo isso o mais genérico possível e vou chamar isso de sublinhado DB. Então eu preciso incluir uma referência ausente aqui. Isso é bom. E então eu preciso de um repositório genérico de formato de construtor para que eu possa escrever o atalho de teclado CTO para stub duas vezes e ele gera essa parada de construtor para mim e então eu preciso injetar. Assim, da mesma forma que vimos que a largura de banda do hub de injeção faz o controlador lá está. mesmo tipo de injeção que precisamos para injetar este objeto no repositório genérico. E então eu estou literalmente apenas copiar sobre leis básicas é a mesma citação é o mesmo conceito que precisamos para inicializar ou cópia local para o objeto injetado. E, em seguida, depois disso, eu vou inicializar meus objetos de banco de dados campo RDB para ser sublinhado conjunto de pontos de contexto do tipo T. Então, em outras palavras, DB sabe quando representar conjunto de banco de dados conectado do tipo T, o que quer que t está indo para ser no momento. Isso é um método. Então você coloca em seu departamento ambiental faz e fecha fora. Isso é dele ou resolvido por genérico ou arrogante. Então, sempre que este repositório vai ser inicializar, vai injetar essa conexão para o banco de dados. E então ele tem que ser inicializado em relação a uma classe particular. Então ele vai dizer, OK, eu estou conectado ao estábulo. E então vamos ver quando esses métodos são chamados, são chamados em ação. O que deveria acontecer? Então vamos começar com os simples. Excluir é muito simples, é realmente muito, muito simples porque o que precisamos fazer é encontrar as entidades. Eu vou dizer entidade var, ou eu posso dizer var cartão rect é igual a. E então vamos começar em uma programação não assíncrona em um pouco. Então, quando temos, quando estamos trabalhando com Entity Framework Core, eles nos dão um monte de métodos assíncronos porque se você apenas dizer db dot, você vai começar a ver adicionar assíncrono, ibérico JS sync. Todos esses, a maioria deles têm uma versão assíncrona para eles. Sempre que vamos estar fazendo algo que é assíncrono, temos que preceder essa chamada com a palavra-chave aguarde. Tudo bem, então eu quero encontrar um, encontrar uma pia, e eu não vou encontrar quando eu posso encontrar uma pia, certo? A diferença entre os dois é que assíncrono significa que D meio executado em diferentes threads. A obrigação de tuft vai parar aguardando os resultados desta função chamadas. Então é isso que o AC, essa é uma vantagem que a programação assíncrona traz. Então eu vou apenas dizer para encontrar uma pia e, em seguida, encontrar espera alguns objetos. Bem, vou passar a identificação. Então, como vimos no controlador de escopo principal é o mesmo tipo de lógica, correto? Na exclusão, ele tinha que encontrar o registro. E então ele vai chamar isso de remover, certo? Mas então não estamos passando por tantos passos no contexto que torna isso, nós não estamos sendo tão explícito porque eles estão sendo genéricos. Então BERD encarna o que foi passado, encontrá-lo assíncrono armazenamento e cartão vermelho. E então eu vou dizer no ponto de banco de dados pontuação, remover este necessário. Portanto, não há nenhuma função correspondente assíncrona para remover. Então, tudo bem. Eu só vou mover o usuário. E eu vou dizer para remover o disco. Não, reparem que li falas. Um. Eu preciso oh, eu disse que precisamos preceder isso com esperar. Tudo bem. Então nós temos que dizer, oh, é notado ponto-ponto desaparece, mas então este aparece porque uma vez que estamos fazendo uma espera, o método tem que ser uma pia. Então, uma vez que você está fazendo uma chamada assíncrona e você vai ter que usar a palavra-chave aguarde. Certifica-se de que o método que faz a chamada tem a palavra-chave assíncrona. Observe que ambos se acendem quando eu realço apenas um. Tudo bem, então lá vamos nós com deletar. Excluir intervalo é bem, menos linhas de código, porque eu amo ver é pontuação honesta db dot remover intervalo. E eles removem intervalo está esperando um parâmetro, uma coleção de tudo o que deve remover, que estavam passando na forma de entidades. Tudo bem. Então é isso para apagar. Um. Como eu disse, estou lidando com uma fruta baixa. Então este pode ficar Wordy, este gangue ficar Wordy. Então vamos saltar para baixo para inserir na cirurgia em atualizações gerais sobre lá podemos voltar atrás. Então inserir é relativamente simples. Tudo o que eu tenho a dizer para inserir é um peso d, b, adicionar assíncrono e entidade. E mais uma vez, se estamos usando um peso, tenho que ter certeza que o método é uma pia. Se estamos fazendo o intervalo de inserção, temos código semelhante, exceto que é cada centímetro de sangue que se vê. Então, ao alcance e mais uma vez, uma pia. Tudo bem, e então por um pouco, o que precisamos fazer aqui, então para a atualização deste lado, o que ele fez foi que eu encontrar ou fez isso apenas disse que a entropia muda de estado para modificado, tudo bem, e então salvar as alterações, e Isso é bom. Tudo bem? O que podemos fazer deste lado, o que vou fazer neste domínio é um pouco diferente. Bem, é uma linha extra onde eu vou dizer sublinhado DB dot-dot touch entidade. E a razão pela qual estamos fazendo essa parte da entidade anexada é que quando fazemos o get, eles ficam todos onde se destacam do banco de dados. Então, basicamente na mistura, sempre que uma consulta é não são essas entidades estão sendo lançadas nossas próprias, elas são sempre anexadas, o banco de dados está sempre observando no rastreamento de tudo o que esse objeto está passando, que pode ter algumas implicações de desempenho quando você tem milhares de registros que em mercados diferentes tendem a manter o controle em todos os momentos na memória. Então o que nós vamos fazer é quando nós, quando nós fizermos o get, nós vamos dizer sem rastreamento, que significa que eles estão separados. Então, quando estou prestes a fazer uma atualização, a reanexar esta entidade. Então o banco de dados para a coleção. Então começa a transportá-lo. E então uma vez que ele está transportando, não, eu posso ver a entrada da entidade. Qualquer entidade é a nossa entrada de ponto de contexto, a entidade que está sendo passada nesse estado é igual a entidades, estados modificados, que é a mesma coisa que estava acontecendo aqui. Mais uma vez onde sendo genérico para não especificar microfone porque eu não sei se é em mim, dar-lhe algum modelo. Se é um vagamente parecido com Can, nós não sabemos. Então é por isso que estamos sendo muito vagos com nossos nomes aqui. Eu estou chamando de entidades m em oposição a mim pode modelar e qualquer nó específico . Vamos recuar um pouco e ir até o nosso Git e pegar tudo. Então chegar a, obter é mais fácil. Vamos começar com o Git. Então, a primeira linha a ser obtida é inicializar uma consulta. Tudo bem, então eu quero chá, e eu questionável é um tipo de dados muito específico, o que significa, que basicamente representa o primeiro tipo de dados que você está recebendo quando você interage com o banco de dados. E a partir daqui você pode tipo de executar certas operações de forma mais eficiente contra as coleções de banco de dados do que você poderia se você tivesse uma lista armazenada I enumerável ou outra coisa, certo? Então estamos inicializando nossa consulta daquele BB. Então aqui, todos os registros são carregados na memória. E depois vou ver se inclui. Então teríamos passado em inclusões. Inclui não é igual a null, o que significa que algo foi enviado nesta lista. Certo? Então queríamos ver se para cada um, eu posso apenas fazer isso e dizer banheira, banheira, var. Eu só vou dizer dentro, vamos dizer adereço. Vamos usar uma palavra prop na lista inclui. Tudo bem, então queríamos ver consulta que representa a conexão de banco de dados. As consultas de banco de dados são iguais a pontos de consulta incluem? E então eu só vou salvar o adereço. Então, é uma string imperturbável, tudo que você realmente precisa é o nome do que deve incluir, então vamos selar que funciona mais tarde. Sem problema. E depois de tudo isso, você vai notar que isso é, é lido. Precisamos retornar pontos de consulta. E então eu queria ver como mais rastreamento. Então aqui é onde eu estou vendo separar do banco de dados. Mas eu quero que você retorne o primeiro nosso padrão e eu vou escolher a versão assíncrona desse método. E então eu passo a expressão. Tudo bem, então se você não está familiarizado com expressões lambda, bem, expressão lambda, expressão lambda é o que teria sido configurado aqui. Nós mandamos através dele, certo? Então você pode ver em alguns especialistas em lambda bluff aqui neste microfone existe método onde dizemos contextos ponto, ponto n0, e então esta é uma expressão lambda. Então é esse tipo de expressão ou esse tipo de valor que passará neste método. E então ele vai realizar essa operação. Certo? Agora, é claro, eu vi uma pia aqui. Então isso significa que eu preciso da palavra-chave, eu espero. E se eu precisar da palavra-chave o h, isso significa que eu preciso fazer meu método aqui uma pia. Lá vamos nós. Certo, então esse é o registro de Juan, Juan, certo, baseado nessas expressões lambda. Então pode ser por ID, pode ser pelo nome igual b por ano. Quer dizer, eu não sei. Pode ser o veículo de Vin vivo olhando acima da ICO por Vin, você sabe, apenas certifique-se de que colocamos a expressão apropriada para ter certeza de que recuperamos o valor que estamos procurando, certo? Quatro fica tudo nulo. Na verdade, começamos com o mesmo menos linhas de código. Então eu preciso do, bem, eu preciso da consulta primeiro, certo? E então eu não tenho certeza se eu vou chegar a uma expressão, então eu não quero ir em frente e experimentá-la, tocar uma expressão, especialmente se for nula, isso vai me dar um erro. Então eu vou ver se a expressão não é nula. Tente isso de novo. Se expressão on, se eles vão expressar em não é igual a null, então eu quero filtrar a consulta. Então lembre-se que isso representa todas as tabelas no banco de dados. Então eu vou dizer que a consulta não é suposto ser filtrada pela expressão. Então não temos todos os que sabemos que não precisamos se uma expressão foi dada. Então, se dissemos para me dar todos os veículos daquele quarteirão inteiro, então passaremos isso para me dar todo o preto. Então, todos os veículos que se filtram para os que são apenas blocos. E depois. Baseado no campo. E assim que fizermos o mesmo inclui, então vou copiar esse bloco aqui. Então, se ele incluir, então vamos em frente e incluir os detalhes que precisávamos. E então nós também temos a ordem por deixe-me apenas derrubar todos os departamentos para que possamos lembrar deles. Então temos a expressão, então temos a ordem BY. Então, depois de incluir, então podemos ir em ordem. Então, vamos dizer se ordem por não é nula, então o que queremos é Query sendo igual a. E então temos esta ordem método por consulta, certo? Então os rabinos realmente gostam de um método e ele vai apenas reorganizá-los de acordo com o que foi especificado. Então, no final de tudo isso, nós só queremos retornar pontos de consulta. Mais uma vez desanexá-los da lista de pontos dito banco de dados. E eu vou encontrar aquele assíncrono, se for uma sincronização, eu preciso esperar. E se estou esperando, então meu método precisa ser uma pia. Tudo bem, e lá temos um repositório genérico parecendo bom até agora, certo? Agora a coisa com o repositório genérico, embora seja um genérico, sim, nós ainda vamos ter que tipo de instanciá-lo cada vez que ele foi para interromper com aquela tabela diferente. O que significa que se em uma lei de controle precisarmos interagir com várias tabelas, precisaremos instanciá-la várias vezes. Então eu vou colocar em outro nível de obstrução. E outra coisa que está faltando é Salvar alterações. Então, outro nível de trabalho vai entrar. E eu fui implementar isso na pasta do repositório IRE. E eu vou criar outra interface. Então deixe-me apenas criar isso como uma interface é tempo, e eu vou chamá-lo, eu preciso de um fork. E mais uma vez, lembre-se de torná-lo público. Agora esta unidade de trabalho, eu só vou herdar de descartáveis porque o que queremos acontecer é que quando você terminar de usar as unidades são força, ele morre na memória. Não queremos persistir através de alterá-lo. Então, tudo bem. Mas então o que podemos fazer nesta seção, null é realmente tipo de criado como o nosso registro para todas as implementações potenciais do repositório genérico para que nós só teríamos um só faria isso uma vez bem o suficiente para fazer dia cada vez que você tem que interagir com várias tabelas só terá como eu registrar uma vez. Então eu criaria ij repositório genérico para mim. Por exemplo, dê-lhe o seu nome. Então eu vou chamar isso de misturar algumas pessoas. Se você, se você tiver um olhar para este padrão, caso contrário ele pode ver algumas pessoas chamá-lo que faz repositório para ser muito explícito. Mas, mais uma vez, esse é apenas o ponto do NIMA. Mas a aula é o que é realmente importante. Então eu estou vendo implementar um repositório genérico para o nosso microfone, certo? E lembre-se repositório genérico classe necessária, Cool e, em seguida, misturar. Então, sempre que chamamos de mistura de palavras difíceis de IU, ele vai implementar isso automaticamente. E ele vai automaticamente passar por esta conexão com o banco de dados. conecte essa mesa. Tudo bem, então nós podemos fazer isso para todas as mesas realmente. Então podemos dizer modelo. Mais uma vez, ver veículo, todos eles, certo? Quando adicionamos uma nova tabela, terei que ter um novo repositório. Vamos adicioná-lo ao registo. Não temos que passar por tudo isso de novo toda vez que temos uma nova mesa. Então você pode ir em frente e adicionar todos eles. Mas, por enquanto, só vou trabalhar com aqueles que só trabalho comigo. Ativar essas necessidades porque nós temos o controlador de mixagem, então eu vou apenas trabalhar comigo e mostrar a vocês como essa refatoração vai acontecer. Certo, então depois disso, não, precisamos de aulas de concreto para nossas unidades fora do trabalho. Eu também vou implementar tarefa salvar. Então isso vai representar nossas mudanças de salvamento e quaisquer outras operações nele é que podemos precisar para realizar um gêmeo onde salvar. Permitam-me, pois, criar a classe concreta nem para a unidade de trabalho. Então eu vou voltar para o repositório, adicionar uma nova classe, e eu estou chamando cada unidade fora do trabalho. Então eu unidade de trabalho e unidades são garfo criar que isso vai herdar de IU e é tudo garfo. E então, é claro, da mesma forma que qualquer outra coisa herdada, temos que ir em frente e implementar ou fazer interface. Tudo bem, então aqui ele vai tentar e inicializar a mistura genérica, direto para tha é o método dispose que está sendo criado porque nós tivemos a herança para o dispor, e então nós temos o método save sendo gerado. Então daqui eu vou fazer algumas coisas. Vou ter o mesmo tipo de somente leitura que tivemos para o contexto. Alguém para criar essa referência de contextos de banco de dados do aplicativo aqui. E então eu também vou ter uma versão privada deste repositório público para mim x. Então deixe-me apenas fazer isso. Então eu estou fazendo privado somente leitura. Eu projetei o microfone do repositório, mas então é privado tão completamente nessa palavra-chave ou naquela convenção de nomenclatura que eu vou chamá-lo de mix, certo? Também vou precisar de um construtor. Então, bar C, certo? E este construtor, se eu estou esperando para usar isso, então eu definitivamente vou ter que injetar no objeto, como eu fiz antes disso. E vá em frente e instanciá-lo, nosso inicializá-lo para o injetado. Lá vamos nós. Tudo bem, é tudo isso é chamado de injeção de dependência, mais uma vez, procedimento padrão e é muito fácil através do núcleo dominado. Então vamos nos concentrar antes que eu me concentre no pináculo, vamos nos concentrar no que acontece com o dispor, no que acontece com o Salvar. Então, nesta pose, o que eu vou fazer é dizer, primeiro lugar, me dê o contexto e me livre dele. Então, qualquer cópia local do contexto que estou usando quando a unidade de trabalho é feito seu trabalho, basta descartá-la. E então eu vou também chamar a coleta de lixo e ver supressivo, analisar isso. Então essas unidades de objeto de trabalho matam na memória, mas isso é o que está acontecendo lá, certo? Para a operação de salvamento, vou dizer, vou esperar, contextos Salvar alterações assíncrono. Certo, claro que são nossos pesos, então preciso de uma pia. Sabe que o que está acontecendo aqui é que nós podemos, nós temos a oportunidade de realmente colocar em mais coisas em nossa operação de salvamento quando temos esse método, certo? Porque temos onde queremos fazer pela última vez atualizado e criado por um todas essas coisas. Imagine se adicionarmos todos esses controladores, construídos assim. E então toda vez que algo acontece, não é como colocar como uma atualização. Tenho que me lembrar disso. Eu tenho que dizer ponto manso atualizar a data-hora atualizada, nenhum ponto de beta bys igual a quem estava logado. E eu tenho que fazer isso religiosamente, certo? E muitas vezes fazem isso por todo o lado. Se eu tiver dez controladores fora para fazê-lo em controladores Alton, se algo mudar, um campo muda, as mudanças de nome são algo depois. Lembre-se de mudá-lo dez vezes. Quando temos a oportunidade de colocar tudo isso em um só lugar, isso traz uma grande vantagem porque aqui eu posso personalizar este método para fazer esses ajustes antes de eu salvar as alterações. E então eu faço isso uma vez. E esse é o poder de um padrão. Mas ainda não estamos prontos para chegar lá. O que eu vou fazer para finalizar este vídeo é mostrar a vocês o que é necessário para esta linha. Então, para o método público e maneira fácil de fazer essa inicialização é usar uma expressão lambda. E então vamos usar isso. E veja no mix partitura foi a versão privada. Score faz que se espalhou fors para isso. E então vamos ver se não é nulo, então deve ser igual a. Então este operador só significa que se é nulo, em seguida, torná-lo igual a. E então vamos iniciar um novo repositório genérico do tipo microfone nesse objeto, certo? E então vamos passar no contexto que foi inicializado aqui. Certo, então é assim que esse pedaço de código se parece. E isto não devia ser “apologistas só de leitura”. Portanto, isso não deve ser somente leitura. E isso está dizendo que ele precisa, ok, tudo bem, então deixe-me, deixe-me voltar e cartão assim erros. Então, quando colocamos o sabão no registro das unidades i oferecidas, isso não deve ser Obtém, isso deve ser apenas get. Então vamos tirar este conjunto, certo? Estes não devem ser conjuntos get. Eu criei todas essas áreas de imagens, em seguida, a partir do não. Tudo bem, então isso deve ser apenas um me levar a qualquer lugar, apenas pegar aquele objeto. E então o nó público vai recuperar esse objeto e colocá-lo lá. Então é assim que a nossa unidade de trabalho se parece. Agora, quando voltarmos, vamos ver como você refatorar nosso controlador de marcas para tirar proveito da unidade de trabalho e, em seguida, executá-lo através de alguns testes. E então podemos implementar em toda a linha para cada objeto de domínio que vamos ter em nosso programa. 20. Refactor controladores existentes para usar a unidade do trabalho.: Tudo bem, bem-vindo de volta. Agora que temos nossas unidades de configuração de trabalho, o que queremos fazer é começar a refatorar nossos controladores. Mas antes de deixarmos nossos controladores interromperem a unidade de trabalho, temos que deixar o Bootstrap ou saber que este é um tipo de serviço injetável em nossa aplicação e qualquer outra coisa que queira temer. Então o que precisamos fazer é ir para a inicialização. E, em seguida, bem de joelhos, o servidor de identidade de anúncio, JWT, Eu vou adicionar uma linha, unidades i transitórias adicionadas fora unidades de trabalho 04. Podemos ir em frente e incluir todas as referências que faltam em conformidade. E o que acontece é que estamos fazendo, eu teria tendências Indianola, eu transitório, adicionar escopo e adicionar Singletons. Singleton significa que ele vai ser um incenso para todo o tempo de execução oferecer sua aplicação. Esculpir significa que ele vai criar, bem, ele vai ser um exemplo para o tempo de vida de um certo conjunto de ações. E então eu transiente significa que cada ação vai girar a sua própria beira em praticamente. Então nós queremos ter certeza de que as unidades de trabalho não são, você sabe, é, ele está sendo único a cada vez. E bem, nós já temos a coleta de lixo, então assim que não for mais necessário, ele se livrará de qualquer maneira. Então isso é inteiro ou unidades ou quatro, ele é injetado ou se prepara para injeção. Então, um nulo em qualquer lugar que quiséssemos o mesmo, você poderia injetar contextos de banco de dados de aplicativos ou qualquer outro serviço. Eu posso saber injetar minhas unidades i, então 4k, então eu estou indo para Snyder fatoração aqui mesmo no controlador de mistura onde eu vou dizer i unidades de trabalho. Então eu não quero mais interagir diretamente com meu contexto. Quero começar a usar a unidade de trabalho i como intermediário, certo? É ir em frente e incluir quaisquer referências que faltam. E depois vou ligar para esta unidade de trabalho. E assim a injeção nula não será obrigação DB contexto marcadores. Você sai do trabalho, certo? E então a inicialização segue praticamente o mesmo padrão de qualquer outra coisa que temos feito que envolveu injeção. Portanto, note que temos a unidade i TO para substituir contextos RDB. Temos uma grande quantidade de erros que precisamos resolver. E vamos ver exatamente o que acontece. Então aqui ele disse retornar um enumerável de Mick e ele foi para o banco de dados, a tabela e, em seguida, convertido isso. Então isso teria sido levar II consultável para uma lista. Então o que eu vou fazer aqui é dizer i unidades, então quatro mix. E então eu posso ver, me dê os ganhos. Tudo bem. Lá vamos nós. Não, estou recebendo um erro aqui e isso é parcialmente devido ao tipo de retorno versus o que estou realmente retornando. Então eu vou realmente fazer um pouco mais do que aqueles refatores que precisam de uma cor base. E eu realmente vou construir todo esse controlador da maneira que eu me sinto mais confortável com o meu controle olhando. Então eu queria mudar isso para ser apenas uma tarefa do tipo. A ação resulta em quando retirar esse tipo de dados forte. Então tarefa fora do tipo resultados reais. E então ele está esperando alguma forma de HTTP. Resposta a ser devolvida, alguém para expandir isso um pouco. Var mix é igual a, e então fizemos esse telefonema. E então eu posso ver o retorno. E eu queria ficar bem. Então lembre-se que quando estávamos olhando para os tipos de retorno, quem teria visto a chave antiga ou o conteúdo e assim por diante. Então tudo k é uma resposta 200 que me permite colocar nos dados que ele deve retornar se tudo está bem e isso é tudo que você tem, certo? Então sim, mais linhas de código estão longe. Mais uma linha de código. Mas para mim isso é muito mais legível e é mais fácil para mim manter. E com base no que implementamos, você vê que tudo funciona de qualquer maneira. Portanto, não há nada de errado em alterar o código gerado, desde que você entenda por que você está mudando e uma vez que você entender o que sua mudança no próximo ou no caminho certo. Então vamos fazer uma operação semelhante para o Get com o parâmetro. Então tarefa I axônio resultados. Estou removendo o tipo de dados forte. E então o que vamos fazer aqui é ver uma mistura de pontos de trabalho muito difícil. Então vou substituir tudo isso. Mas desta vez é um “get”. E então, em vez de passar a identificação, mais uma vez, poderíamos ter conseguido quatro, obter por ID. Podíamos ter conseguido outra coisa, certo? Então a flexibilidade da expressão é que podemos colocar os especialistas lambda aqui e dizer q dot. E então eu posso ver ID é equivalente a ID. Essa é a minha expressão lambda. Então essa condição vai ser executada como vimos, como nós implementamos no repositório genérico. E ele vai ir em frente e devolver aquele microfone. E então aqui eu posso retornar, ok, com o microfone como os dados sendo retornados. Mais uma vez, se você está acostumado com o pulso, princípios de risco de design , API de descanso, desenvolvimento, então tudo isso fará sentido para você. Se não, então não há problema, é por isso que estamos aqui. Então é por isso que dois pontos finais não têm apenas alguns para ir. Então, para nossa atualização, as modificações que eu vou fazer serão na pontuação Unidade 04 ponto, faz pontos. Tudo bem, então por causa do registro, podemos acessar e misturar diretamente para cerca de 2 que disse anteriormente. Bem, então podemos dizer atualização e então nós apenas passar na entidade que está fora do microfone, certo? Então eu, que é o MIC vindo através do parâmetro aqui, e nós enviamos tudo. Então esta linha de código vai ser atendida no repositório. Então ninguém precisa olhar para o nosso controlador e saber os segredos obscuros profundos do que realmente está acontecendo. Tudo bem, isso é a abstração. E, em seguida, para uma operação como esta, quando modificamos os dados, precisamos chamar nossas mudanças de salvamento. Então eu vou pegar este velho e eu vou te ver quando estiver fora de quatro pontos salvar. Tudo bem. E então é isso. Então vamos seguir em frente. Então você vê, a refatoração realmente não é muito, mas para mim é, não há muita atividade pesada de bancos de dados acontecendo em nosso controlador. Queremos mantê-los claros e claros quanto possível. Então, para o post, nós queremos unidade fora do trabalho para misturar pontos e então vamos ver inserção, certo? E o que estamos inserindo é o microfone. Tudo bem. Isso é assíncrono. Oh, e é assíncrono e eu esqueço de colocar a espera, você vê uma linha verde rabiscada. Então e depois há todos assíncronos que está pronto para me responder voltando e colocando uma pia. E então daqui eu vou para as unidades SI são quatro pontos salvos. E então eu posso remover essa linha e tudo o resto fluirá de acordo. Para o SAC, mais uma vez, o botão está lá. Funciona, mas pode não precisar. Então eu não estou dizendo que você deve se desenvolver com ele, mas eu estou apenas guiando você como o todo. Você pode ir sobre implementá-lo. Então, o que queremos excluir? Lembre-se que excluir, excluir só precisava do ID, certo? Então o que podemos fazer aqui é sair do trabalho, ponto, mix, dot, delete, passe no ID null, onde na verdade meio que ignorando alguns dos carrapatos mais essenciais que vemos aqui. Porque o que está fazendo é descobrir se o registro existe, se não existir, então ele vai retornar, não telefonou. E então, é claro, eles queriam salvar as alterações depois disso. Certo? Então reduziu tudo isso em mais como duas linhas de código. Mas então, como eu disse, esse cheque é meio essencial. Então, provavelmente podemos fazer aquela verificação onde dizemos microfone. Então vamos pegar o microfone. E lembre-se que já fizemos isso em algum lugar aqui em cima onde fizemos isso. Para que possamos fazer o mesmo, prepare-se. Só dizemos para me dar o microfone. Se o microfone é equivalente a null, em seguida, retornar NOT_FOUND auto como continuamos com isso. E então podemos remover qualquer outra coisa que esteja lá. E foi C. E então temos esse método que diz que Make existe alma. Você pode implementar na unidade de trabalho C. Quando você passar para ID, você verificar se existe. Mas já temos esse método que vai verificar se há algo lá alguém para usar isso e substituir isso existe em algum lugar para dizer var me eq é igual a isso, hum, e então ele deve retornar um booleano. Então eu vou dizer que devolver-me é equivalente a nulo. Tudo bem? Nossa alma aqui, isso é assíncrono, o método não é. Então o que eu posso fazer é tornar isso uma tarefa assíncrona que retorna um C booleano, u, que eu sei que todos estão felizes. E então é claro que a chamada do método tem que ter o excesso de peso aqui em cima. Então isso é tudo, tudo meio que flui, certo? Então isso é apenas o reflexo para os microfones. Se você tivesse gerado, eles vão eles vão controladores e ele pode ir em frente e fazer isso. Caso contrário, ainda vamos fazer isso juntos de qualquer maneira. Mas vamos dar uma volta nesse controle refatorado. Note que estamos usando unidades de trabalho. E verifique se funciona com o carteiro. Tudo bem, então eu vou começar com um pedido get. Então, se eu enviar, então nós pegamos todos os veículos ou desculpe, todos os modelos ou a mistura ou outro no sistema. Então você vê, funciona, ainda funciona. Isso faz com que nossa citação termine para mais limpo e segmentação é meio que no lugar. Se quiséssemos criar, é o mesmo princípio. Eu posso ir para a escola aqui e ver Enviar, e então ele cria um novo carro fictício. As crianças vão trabalhar da mesma maneira. Tudo vai declarar. Então vamos ver o que acontece quando eu excluo um ID que não está lá, causa remoção. Já excluímos a mistura com o ID para nos permite ver o que acontece. Ver 404 Não telefone. Se eu subir para cinco, que é o cara boneco que acabamos de criar. É conteúdo nulo, então tudo ainda funciona. Nenhuma coisa que eu queria apontar é que quando estamos criando nosso, você sabe, qualquer coisa, nós realmente não esperamos obter essas coisas de todos os nossos clientes, certo, então criado por Big criado tudo isso não deve ser impedido pelo cliente E o carteiro deveria estar realmente imitando o que um cliente faria. Então, nesta situação, se eu quisesse criar aquele carro de fazer, qualquer coisa que MCAR id procura, e então esses campos devem ser realmente preenchidos automaticamente, certo? Então você vê aqui nulo, eu não sei quem criou. É que eu não sei quando ele foi criado ou atualizado ou qualquer coisa. Eu não sei nada disso. Portanto, deveríamos realmente implementar isso. Não, eu tinha apontado que o que teríamos que fazer para facilitar algo assim seria que no put, que é a atualização, eu teria que me ver pontuar, criar nossos dados digitais é igual a isso. Não queremos fazer isso. Mais uma vez, nós não queremos ter que fazer isso em dez controladores são cada vez que chegar ao nosso controlador, nós temos que fazer isso contra a entidade manualmente. Então o que vamos fazer é implementar em nossa operação segura a capacidade de obter os contextos HTTP e modificar os objetos antes que eles vão para C. Certo, então vamos nos concentrar em adicionar as ações. Então o cenário é que quando eu criar algo que D criou e os dados atualizados devem ser os mesmos. No entanto, quando eu fiz algo nessa data, atualizado e atualizado por deve mudar. Tudo bem, então o que nós queremos fazer é esta operação segura, nós vamos salvar var. Eu vou chamá-lo entradas é igual para me obter os caminhoneiros de mudança de ponto de contexto. Porque lembre-se que eu disse que uma vez que os dados estão chegando, ou quero dizer, uma vez que você está criando algo, uma vez que estamos orbitando algo, ele não está rastreando o objeto. Uma vez que o recuperamos, porque dissemos como rastreamento norte, não há rastreamento. Então a estrutura do acaso é realmente só vai ver bem. Qualquer coisa que eu esteja carregando, me dê todas as entradas e esse é um método. E então eu vou apenas dizer ponto para We 're, então eu vou executar uma expressão lambda em, no banco de dados ou consulta para ver onde a expressão Lambda Q dot state é equivalente a NTT State, que é realmente um enum. Então eu não gosto de ter toda essa qualificação completa. Há entidades teatro e incluem a biblioteca ausente onde entidades, estados ponto modificado. Ou eu vou para a próxima linha para que são o estado q ponto. Então o estado que é isso não é. Então lembre-se quando fizemos a atualização, que é o estado, o estado da entidade ferramenta direita DOT modificado. Então eu posso ver ponto modificado, nosso estado de entidade é ponto morto. Então isso significa que está prestes a ser criado arte. Foi apenas adicionado ferramenta que rastreamento, ou pelo menos no que diz respeito, ele diz pouco id para muito. Então eu vou percorrer todos eles. Então eu queria dizer para cada entrada em qualquer coisa que veio de volta em entradas. Porque a realidade é que quando chamamos c, Se pudéssemos ter tocado muitas coisas diferentes, certo, temos todo o update_many que poderia ter modificado na marca e modelo. E estamos tentando fazer uma operação de salvamento e não sabemos. Então é por isso que estamos apenas recebendo de todas as entradas. Esse é o nosso barco para ser salvo para obter todos os resultados são modificados e todos aqueles que são adicionados. E, em seguida, para cada um deles, eu quero mudar seu modificá-lo e modificá-lo, certo, nós não estamos prontos para o modificado focando na retina de dados. Então o que eu teria que fazer é ver pontos de entrada e, em seguida, dizer entidade. Mas então o problema é que entidades muito genéricas. Não sabe o que sente que tem, não sabe, certo? Então, uma das vantagens com aqueles que usam esse objeto de domínio BCE é que podemos sempre custar e entidade nesse objeto de domínio base, que nos dá as taxas de auditoria que sabemos o que cada campo único, cada domínio objetos são permitidos. Então eu posso dizer b é modelo de domínio aqui. E então eu posso envolver tudo isso em um parênteses grandes, então ele vai vê-lo como um grande objeto do tipo modelo de linha de base. Então eu posso ver ponto atualizado, dados atualizados. Vamos nos concentrar no funil é hora, data e hora ponto nada C. E então eu vou ver se o estado, então na árvore. Se este estado é equivalente adicionado, então ele tende a obter tratamento especial porque, além de obter o tempo de dados, ele também precisa obter o criado a ameaça. Então eu vou copiar isso e eu vou apenas mudar isso para criado, data, data criada. Tudo bem, então basicamente eu estou dizendo que sempre que a operação de salvamento está sendo feita recebe qualquer coisa que foi modificada ou adicionada. E então para cada um deles que você tem os dados para saber porque claramente ele está sendo atualizado e qualquer um de vocês foi adicionado, vá em frente e preenchê-lo Então, se ele está sendo atualizado, eu não preciso atualizar a parte adicionada. E depois de tudo isso, vamos em frente e salvar nossas mudanças independentemente. Tudo bem, isso não fica mais, muito mais complicado do que isso por isso. Então, mais uma vez, este sistema de scanner naquele momento de ter que lembrar que em cada controle, em cada operação, eu estou tentando rastrear tudo isso porque apenas o automatiza bem aqui. Então vamos dar um passo adiante e ver como rastreamos o usuário. Como estou logado como usuário e estou fazendo minhas operações diárias, provavelmente não sei se você está me rastreando, então eu não deveria ter que digitar meu nome de usuário ao lado de qualquer trabalho que estou fazendo ao clicar em Enviar, Você deveria estar rastreando isso. Sou eu quem clica em Enviar e os nossos campos de auditoria fazem isso. Mas como levamos os dados da pessoa que usa o blazer para o banco de dados? Bem, vamos permitir a inclusão do que chamamos de contexto HDTP. Tudo bem, então você sabe, eu salvo operacional, nós estamos colocando neste contexto HDTP parâmetro, que está vindo do nosso controlador. Tudo bem? Porque sabemos que é disso que chamamos de segurança. Toda vez que ligamos para salvar, é de onde estamos encontrando. Então, é claro, se eu atualizá-lo aqui, eu vou ter que atualizá-lo na unidade de trabalho. Então C-F é esperado para ter parâmetro de contextos HTTP tipo. Então, em breve, volte e atualize os controladores de acordo. Então, quando obtemos os contextos HTTP que nos dá acesso. Então, talvez o nome de usuário, coisas incertas, um barco, um controlador, então qualquer solicitação chegando. Então eu posso dizer var usuário é igual a. E então eu posso ver o usuário de ponto de contexto HTTP. Temos a identidade do ponto, o nome do ponto. Isso dá-me o nome de utilizador. Tudo bem, então eu queria camionar qual usuário precisa de muito. Bem, aqui está. Eu sei como o nome de usuário. Tudo bem, então eu também posso ver que sempre que algo está prestes a ser atualizado, que o atualizado por é usuário, certo? E, em seguida, o CreatedBy é usuário. E, em seguida, do nosso controlador, eu vou ter que ter certeza de que sempre que eu salvar, eu passo neste contexto HTTP ponto. E então eu tenho que dizer, bem, sim, este contexto HTTP ponto. Então, na verdade, isso é suficiente. Acho que nem preciso da palavra-chave que é suficiente. Lá vamos nós. Então eu só Boston os contextos HTTP, então é automaticamente indo para caminhão. Ok, este usuário foi o único fazendo a solicitação porque os contextos HTTP, ele está carregando tudo sobre qualquer coisa acontecendo, acontecendo, a conexão que está sendo usada, o usuário, eles solicitam que a retorção responsiva está neste objeto, então era possível sem objeto. E, em seguida, as unidades são garfo CM operação vai ser apenas um grande carros de guerra enquanto ele está colocando as coisas no banco de dados e colocá-lo em todas as auditorias. Portanto, esta é uma boa maneira de obter o registro de auditoria em seu aplicativo. Oh, talvez dependendo dos desenvolvedores para ter certeza que eles colocá-lo em ou dependendo de si mesmo para lembrar que coloca em tudo o tempo todo. Então vamos testar isso. Vamos ver como o carteiro vai ser visto. Tentamos enviar dados para o banco de dados. Então eu vou colocar um ponto de interrupção aqui em nossa operação segura e então vamos testar a criação de outro carro fictício. Então, vou ver o Send. E então nossa operação de salvamento entra em ação. Então, quando eu olho para o nome, vamos ver que nome está lá. Deixe-me apenas fazer F 11 e, em seguida, usuário, enquanto o usuário é nulo porque ninguém está logado. Certo, então é por isso que o usuário ainda é novo, mas tudo bem. Então, quando eu olho para as entradas, eu quero dizer apenas fazer F 11. Então, quando olharmos para as entradas, vamos ser capazes de ver que temos esta entrada sendo adicionada, C, que é um estado sendo adicionado. Tudo bem, você pode tentar quebrar, mas mais uma vez, tudo neste nível, é muito genérico, então não vai mostrar nada específico ou específico, é por isso que tivemos que fazer toda essa digitação para chegar ao estanho. Mas vou pressionar F5. Vamos continuar. E quando olho os resultados, você vê o carro falso e os dados. Sabemos que C, nosso D, está voltando. Então eu não forneci nenhum bit, mas as datas estão voltando porque elas foram colocadas automaticamente pelo nosso código e atualizadas por, e criadas pelo nosso nulo. Porque, tanto quanto ele foi, remetentes e todos os usuários associados com a solicitação, a solicitação apenas skimming. Certo, então essa é uma das maneiras que automatizamos nosso registro em log e auditoria, desculpe, com a unidade de padrões de trabalho. Então, neste momento, fizemos algumas coisas muito críticas. Temos um implementado ou unidades de contas de trabalho. Eu mostrei a você como fazê-lo para um em uma tabela, mas já estabelecemos que esta unidade i de seção de trabalho é realmente como um registro. Então, o que quer que tenhamos feito por um, podemos replicá-lo entre os outros. Para a unidade de trabalho, você tem que fazer a mesma coisa aqui para veículos, para modelos onde quer que, embora um. E não precisamos voltar para a inicialização porque já lidamos com nossa injeção lá. Então, tudo bem. Nem temos que fazer mais nada lá. E basicamente se você brigou com outros controladores, então você tem que refatorá-los. Caso contrário, se você não tiver brigado com os outros, então eu sugiro que quando você faz app.controller, você cria um controlador de API apenas com as ações de leitura, gravação para que nós provavelmente fazer e difícil de fazer tanto trabalho o que você faz com o Entity Framework e ele apenas fez algumas mudanças, então isso não é problema também. Então eu vou desafiá-los a fazer isso no próximo vídeo, nós vamos voltar e eu vou apenas comparar notas com você só para ter certeza que eles vão mostrar a você o que eu fiz. E então você pode apenas olhar para o que eu adicionei e certificar-se de que você está no caminho certo. 21. Refactor controladores existentes para usar a unidade do trabalho — Comparar: Ei pessoal, bem-vindos de volta. Deixei vocês com uma tarefa da última vez, mas estamos aqui para comparar notas e vou apontar certas coisas que tenho certeza que conseguiram se não o fizessem, então não há problema. Vou apontá-los para você e você pode ir em frente e completar a atividade. Então o que eu mostrei a vocês foi uma configuração para as unidades, e nós só fizemos isso dentro do contexto da mesa de mistura. Então, inicialmente, teríamos apenas 11 coisa, aspas unaspas registradas nessas unidades de interface de trabalho. Então nós fomos em frente e registramos todos os outros para modelo de veículo, livro de cores, King, cliente, e qualquer outro objeto de domínio. Agora você pode ter a necessidade de incluir, você pode ir em frente e apenas continuar esta lista. Além disso, na classe concreta, quem teria que fazer nossos campos particulares correspondentes para aqueles. Então faça, adicionamos microfone, Boa para atender modelos, cores, reservas, etc. E então, claro, tivemos que fazer a inicialização dos objetos públicos, certo? Então um tipo de espaço que é desenfreado para que você possa vê-los todos mais facilmente, certo? Da mesma forma que fizemos, literalmente eu copiei e colei e depois mudei o microfone para modelar e o texto correspondente. Isso é realmente tudo o que precisava ser feito e é fortemente digitado. Então, se você cometeu um erro, você veria uma linha vermelha. Foi assim que fizemos pela unidade concreta de execução do trabalho. Agora, depois de fazer tudo isso, eu fui em frente e andaime todos os outros controladores. Então você vê nos controles que você vê reservas, cores, clientes, modelos e veículos que criamos misturam juntos. E para ser honesto, tudo o que eu fiz foi copiar a maior parte do código do controlador de mixagem e, em seguida, passar para modelos e, em seguida, terminou controle F, onde eu procurei por qualquer coisa neste documento atual que disse que Mick e eu mudamos para modelo C ou bem, Ken Pienta e modelo. Tudo bem, e foi tudo o que fiz. E depois substituir porque o que acontece é que já temos a unidade de trabalho. Se ele disse me conseguir x, então depois de fazer isso, substituindo saberia, digamos obter modelos, se você tivesse dito marcas aqui agora vai ver modelos. Tudo apenas mudar aqueles como até mesmo as variáveis. Agora, se o capital m é que é oferecido pequenas consequências do grande esquema das coisas. Então eu só estou mostrando que, você sabe, se você trabalhou através, eles não fizeram a cópia e baseado e assim por diante, tudo bem. Talvez você quisesse fazer isso para ter a experiência deles e isso é bom. Sem problema. Vamos começar lá. Estou só a partilhar convosco o procedimento acelerado do Havaí. Então, se for eu que você não terminou a operação e acha isso tedioso, então essa é uma dica. Para te ajudar a carregar isso mais rapidamente. Para a raiz, lembre-se de que não estamos usando barra de API. Sonya brigou com eles, você teria controlador de barra API. Então eu passei e me certifiquei de que eu tinha que chamar a barra API Alltop, todos eles. Então eles também dizem controlador. Tudo bem? E isso é praticamente tudo para a nossa API de descanso. Não há muito que precisamos fazer, é muito mais que precisamos fazer aqui. Neste ponto, ele está bem preparado e pronto para servir nosso aplicativo cliente Web Assembly. E assim, no próximo vídeo, vamos apenas bater nosso ponto de verificação onde vamos em frente e verificar em nosso código. 22. Revisar e adicionar alterações no GitHub: Vocês são todos? Chegamos ao final desta seção onde passamos nosso tempo preparando nossa API de descanso para atender nosso aplicativo cliente. O que fizemos foi ter certeza de que testamos ou endpoints. Criamos um endpoints que falava diretamente com o banco de dados e vimos isso funcionar. Mas então tivemos uma discussão sobre por que é bom implementar outros padrões em cima do que é andaime para nós fora da caixa. E essa razão, a razão para isso realmente foi para manutenção e certos tipos de automação que podemos colocar no futuro. Então a arma de escolha era a unidade de trabalho em cima do padrão de repositório genérico, onde temos o repositório genérico sendo implementado para ser, como a palavra sugere, esse genérico. Então nós, nós não estamos digitando fortemente para qualquer classe, mas qualquer tipo de classe que é seu jejum , temos essas operações que podem ser realizadas de acordo. E, em cima disso, temos a unidade de trabalho onde registramos as diferentes implementações são as implementações fortes e digitadas desse repositório genérico. E isso nos permite fazer chamadas para eles à vontade. Nós também olhamos para personalizar o método onreceive, onde podemos ir em frente e injetar nossos contextos HTTP, permitindo-nos obter o usuário que está realizando uma operação. E então nós metodicamente passamos por todos os registros, um barco a ser peneirado, e verificar qual é modificado, qual está sendo adicionado, e definir esses valores de auditoria de acordo com tudo antes do bico salvar. Depois de analisarmos tudo isso, nos certificamos de registrá-lo em nosso arquivo de inicialização, modo que permite que ele seja injetado em qualquer outra parte do aplicativo. E, em particular, estamos olhando para nossos controladores onde refatoramos o que nós brigamos para então usar a unidade de trabalho em vez de falar diretamente com o contexto do banco de dados do aplicativo. Seguindo este exemplo, nós scaffolded são criados controladores para todos os outros pontos de acesso de dados que podemos ter no futuro. Esta é a norma que iremos utilizar se precisarmos de alargar esta aplicação. Então, neste ponto, vamos apenas ir em frente e verificar todas as nossas mudanças para que eu possa trazer mudanças algumas que não estão vendo aqui. O que eu vou fazer é apenas ir para o View e eles são boas mudanças. Então a partir daqui eu escrevo meu míssil e é um editor de mensagens simples, endpoints API e a unidade de padrão de trabalho. E então vá em frente e confirme tudo e sincronize. E nesse ponto temos nossos bits atualizados de código. Vejo-te na próxima lição. 23. Visão geral - trabalhando com Blazor e dados: Ei pessoal, bem-vindos de volta. Eu só queria dar-lhe uma visão geral rápida do que vamos fazer nesta seção. Então eu tenho aberto os componentes de dados buscar que teria vindo como uma parte do algum aplicativo da criação deste blazer projetos. Então eu só queria apontar algumas coisas e nos dar uma sinopse do que vamos cobrir nesta seção inteira onde vamos falar sobre o uso do blazer para se comunicar com nossa API e manipular os dados de acordo. Então esta busca arrays de dados ou componente um, representa um componente semelhante ao que vamos criar. Nós já meio que passamos por como nós criamos um componente ou alguma infiltração e nosso compartilhado e todas essas coisas. Então nós, nós temos uma idéia básica de objetivos de criação de componentes inteiros. Mas o que provavelmente não nos focamos era o que estava acontecendo dentro de dados Fichte onde estamos autorizando. Então você viu que quando tentamos navegar para buscar dados, temos que fazer login para prosseguir. Isso é um. Bem, então você percebe que nós também estamos injetando este novo bit de código chamado cliente HTTP. Saiba que este cliente HTTP representa apenas uma biblioteca. E a maneira como você teria visto as configurações para este cliente HTTP aqui em nosso program.cs. E ele é configurado para olhar para o projeto do servidor, a API do servidor como seu endereço. Tudo bem, então em outras palavras, ele vai estar olhando para a API automaticamente. Portanto, o cliente HTTP é configurado para olhar para a API dada a nós através do projeto de servidor. E então este objeto nos permite aproveitar algumas das funções que nos permitem interagir com a API restante. Então eu vou apenas pular para a última parte do código onde o que ele está fazendo é inicializar, você sabe, uma lista de dados que tomar picos. E, em seguida, quando ele é inicializado, ele vai tentar recuperar através de nosso objeto cliente HTTP. E então ele tem funções embutidas para todos os verbos que passamos na API. Eles pegam o posto, o posto, todos aqueles que estaríamos olhando. E então foi C perceber que os dados JSON que vimos do carteiro de nossos testes. Você vai tipo serializar quaisquer dados que ele recebe de volta para a classe correspondente. Até agora, todos os nomes de campo que muito ele vai realmente preencher o, esta classe e ele vai apenas recuperar tudo isso na forma desses objetos e armazená-los em previsões, que vemos apenas uma coleção de dados voltando do Chamada de API. Agora, o que está aqui na string seria o endereço que ele irá causar uma previsão do tempo aqui corresponde ao controlador de previsão do tempo na API. Então, nossa concessão HTTP significa que solicitações GET e nós vemos, vemos nosso verbo, HTTP GET, que é realmente apenas retornando algumas coisas aleatórias na forma de uma matriz. Tudo bem, então isso é realmente uma sinopse do todo. Vamos realmente deixar os componentes blazer falar com o resto API. Você pode ver que não é tão difícil. Então, quando voltarmos, vamos começar criando um componente de lista onde podemos listar todos os dados no banco de dados em um pH blazer e exibidos para os dados. E então olhamos para todas as outras operações crud. 24. Dados de exibição com blazor - lista: Ei pessoal, bem-vindos de volta. Então, seguindo nossa rápida visão geral desta seção, vamos saltar direto para ela e vamos olhar para como podemos criar um componente que irá listar os dados de nosso banco de dados. Então, é sempre uma boa idéia organizar seus arquivos em pastas como temos feito até o nariz. Então eu vou começar com a página é partes do projeto de cliente de ponto de carro e gerenciamento. E eu vou criar uma pasta que eu vou chamar que comece com microfones. Então, é claro, você gostaria de ter a capacidade de ver todos os arquivos por tabela em seu banco de dados com algumas exceções, certo? Mas a questão é que temos reservas, temos cores, temos clientes de mix, temos modelos, temos veículos. Então isso significa que para todas as operações crud que vamos fazer, vamos querer fazê-las em cada um desses tipos de dados. Então eu gostaria de tipo de agrupar todos os componentes relacionados por tabela ou por conjunto de operações em uma pasta. Então, se eu tiver uma pasta mix, então eu vou ter uma pasta de modelo e assim por diante. Então eu vou apenas ir em frente e criar toda a pasta. Certo, então esse é o tipo de organização que vou manter. Saiba para esta seção, eu vou fazer dois exemplos. Nós vamos fazer um exemplo com a mistura, o que é simplesmente suficiente porque você sabe, ele realmente só tem alguns campos de qualquer maneira. E então vamos fazer um com talvez algo mais complicado como veículos, que tem entidades relacionadas, certo? Então eu fui fazer aqueles dois. E então, claro, você sabe, nosso padrão é que eu mostro o conceito e então você experimenta por conta própria, e então nós voltamos e comparamos notas. Então vamos direto ao assunto. Então, nesta lição, mais uma vez, estamos olhando para corredor vamos recuperar dados e exibir em uma lista ou em um formulário de tabela para o nosso formulário tabular para nossos usuários. Então começamos criando nossos novos componentes. Então eu estou começando com mix, eu vou criar um novo componente navalha. Então eu vou chamar esses componentes do que eu acho que o pH deve ser chamado. Então eu queria chamá-lo de índice. Tudo bem. É sempre, na verdade, eu vou dizer que é recomendável pensar que é realmente necessário. Mas eu sou, se não for necessário, os lambdas recomendando que sempre nomeemos ou componentes com letras maiúsculas. Tudo bem, então índice como epitélio, eu vou em frente e acerto OK. E agora temos o nosso componente. Já vimos componentes antes. Nós já olhamos para ele quando fizemos nosso componente de amostra mais cedo. Então isso não é novidade para nós. No entanto, vamos tentar certificar-se de que nossa raiz está lá alguém para dizer na página de sinal abrir e fechar aspas? E este, eu só vou ver a mistura de barras, que significa que qualquer um que navegue e diga mixagem de barras deve ser capaz de acertar este componente. E tudo o que eu vou me certificar de fazer é injetar nosso cliente HTTP. Então, apenas voltando para buscar dados, você vê que para injetar cliente HTTP no buraco, no, no componente para que eles pudessem falar com a API. Então definitivamente precisamos disso. Nós também podemos olhar para injetar alguns destes, mas que estão colocando estes usando declarações como nós vamos definitivamente precisar de acesso ao tosquiado. E eles significarão sexual e o que não mostraremos como fazer isso de uma maneira mais limpa e global. Então não temos que fazer isso toda vez que precisamos em cada componente. Então eu vou começar com a injeção. E eu estou chamando meus clientes de sublinhado, essa é a minha convenção de nomes, mas, você sabe, você pode nomear o que você se sentir mais confortável em nomeá-lo. Eu queria mudar este título h3 para ser de título de cartão de classe. E eu vou mudar o texto para dizer Make list art ou, você sabe, provavelmente lista de mix. Nosso carro faz algo algo que o usuário me desculpe, eu estou apenas sendo convidado para essas pequenas coisas. E quero dizer, podemos trabalhar em certos elementos de design. Você pode ter todas as idéias em mente, mas eu estou apenas colocando nesses elementos agradáveis que a regra horizontal e, em seguida, um ponto , nossa tag break, desculpe, para separar o título no topo do resto do conteúdo. Sei que vou me concentrar no que estamos colocando no código. Então eu vou começar nesta seção do tribunal. O que precisamos fazer é ver antecipadamente que temos um modelo de pH em que tipo de dados é. Então, vou dizer privado. E já que estou lidando com microfones e não sou uma lista de mixagem, vou inicializar uma lista de microfone tipo, certo? Perceba que o microfone não mistura cósmica é o tipo de dados da tabela com que estamos lidando, certo? Tão manso. E então eu vou chamar o modelo de objeto. Você poderia chamá-lo de “faz “, você pode chamá-lo “modelo “porque esse é o modelo para o Peach. Agora eu vou fazer é dar uma flecha porque mais uma vez, eu preciso sentar nas declarações usando para que ele saiba onde ele pode referenciar isso de. Então, em vez de fazê-lo da maneira que eu acabei de apontar, Fitch dados está fazendo isso onde ele está fazendo a instrução usando diretamente dentro do componente. O que eu vou fazer é ir até as importações. E então daqui eu posso definir algum tipo de global usando declarações, certo? Então eu posso ver abaixo aqui usando o gerenciamento atual ancorado, domínio ponto cisalhado. E então, fazendo isso, qualquer componente que requer coisa do domínio saberá que enquanto ele já está na importação. Então eu não tenho que vir aqui e vê-lo novamente. Então eu fiz isso uma vez. Eu só estou fazendo isso neste componente, mas no futuro você vai notar que você não tem que fazer essa parte novamente. Muito bem, agora que temos o nosso modelo definido, o que queremos fazer é criar a nossa protecção é submergir sobreposição, sobrepor a tarefa. E esta tarefa Isso é um múltiplo, mas não se preocupe, vai fazer é chamado não inicializado assíncrono. Então, esse é um método interno que cada componente tem não inicializado assíncrono. O que você quer que eu faça quando eu for inicializado? É basicamente isso. Repare que é uma sobreposição. Então, a classe base na qual cada componente é baseado, ali está. Componente b é. Desculpe, componente de tarefa baseado em assíncrono inicializado. Então, estamos substituindo o padrão e vamos dizer o que queremos fazer quando este componente é inicializado. O que eu queria fazer, eu quero obter o armazenamento de dados e os modelos. Então eu vou dizer que um modelo é igual a e então eu posso, eu vou esperar, meu cliente fazendo uma ligação. Então o cliente, o cliente HTTP tem o método interno. Então eu posso dizer obter de JSON uma pia. Tudo bem, é, ele vai automaticamente e e desserializar o que quer que esteja recebendo. Então, o que está recebendo? Saia para especificar que tipo de valor eu espero obter. Então eu queria dizer, bem, eu espero obter uma lista de microfone tipo. Tudo bem, então isso vai dizer, ok, você quer listar fora do microfone, onde você quer que ele de soft para colocar no endereço do lugar que eu esperava. E eles abordam seria o ponto final. Então lembre-se que quando olhamos para o program.cs, ele já está resolvido o cliente HTTP para olhar para o endereço base do nosso aplicativo, certo? Endereço base, o que significa o endereço? Então, observe que o servidor e o cliente, ambos compartilham o mesmo endereço apenas no caso de você ter esquecido gramado settings.js no host local para 4385. E se fizermos a mesma coisa para o servidor, é o mesmo endereço. Então o endereço base, ele sabe onde a API está. No entanto, precisamos dizer-lhe qual endpoint offset API. E depois baseado na nossa nomeação aqui, que acredito que vai causar um conflito. Então provavelmente teremos que mudar a si mesmo, mas vamos começar a ver o erro e não corrigi-lo depois. Mas nós dissemos que endpoint deve ser os nomes dos controladores, que neste caso significa marcas é onde eu quero ir. Onde eles são testados API e olhou para todos esses endpoints embora. Então eu vou ver, ir para o endpoint faz. Então este, este componente, uma vez que é inicializado, vai fazer esta chamada API para esse endereço e obter a lista. E sabemos que vai voltar para JSON. Então esta função ou este método vai reconstruir automaticamente os dados JSON em uma lista de mim, fortemente digite, fortemente digitado, desculpe, para que possamos usá-lo e manipulá-lo tudo o que quisermos. Tudo bem, então isso praticamente cuida dessa API, vai me dar a lista de marcas no banco de dados e armazená-las aqui dentro deste objeto chamado modelo. Então não, como você mostra tudo isso, certo? Vou ver em primeiro lugar, se o modelo de fora está, desculpe, eu não preciso que isso me salve o traseiro. Então, se o modelo é equivalente a nulo, então eu quero exibir algo vendo carregamento ou ele vai colocar em uma div. E eu vou dar essa aula vai, lembre-se que estamos usando Bootstrap, então alerta e me alerte para estar na íntegra. Alerta na íntegra. Acho que passei. Lá vamos nós. E então eu vou dizer que o carregamento faz a mistura de carregamento. Isso é azul, qualquer mensagem de carregamento que você quiser. Então a questão é que vamos sempre começar vazios. Isto vai ser nulo porque isto significa que é nulo. Mas então uma vez que isso é concluído, então queremos exibir uma tabela. Então isso vai ser. Exibido enquanto tudo isso está acontecendo, por mais tempo que leve para ir para a API, isso será exibido. Então a coisa legal sobre blazers que quer que os dados mudem. Ele envia uma mensagem de volta para a interface do usuário para dizer, Ei, você sabe o que os dados mudaram. Então o mero pensamento, que é novamente aqueles, você sabe, ele está monitorando quando esses dados mudam, eu posso ver se é nulo, fazer isso. E então, quando ele mudar, ele sempre reavaliará se é o normal. Não, não é. Certo, o que devo fazer aqui? Certo? Então é quase como um loop while sem o loop, é tão legal. Certo, então o que vamos fazer é C, talvez queira uma mesa. E então eu estou usando classes Bootstrap para minha tabela. Então eu vou definir isso para ter mesa e tabela que é responsivo. E se você não está tão familiarizado com Bootstrap, podemos olhar para os outros que você provavelmente quer incluir, mas eu queria furar a mesa responsiva e talvez SM Bem, não, deixe-me apenas dar-lhe essa mesa e revendedor responsivo. E, em seguida, definir segurar esta tabela deve olhar para que nós temos nossa cabeça T, que tem um TR, que então tem o th é que eu vou ter th para nome como em MC, nome, apenas olhando microfone de backup, make really ou camada nome e ID baseado no modelo de domínio baseado e criado por um número esloveno de detalhes que você quer incluir passando por eles agora eu só preciso do nome e eu vou ter outra coluna chamada leilões, que vai hospedar, você sabe, editar botões, excluir títulos, etc. Depois de definir a cabeça, vou colocar o corpo TI. E então no corpo da equipe é onde fazemos a parte divertida onde temos que percorrer nossos dados, voltando, você sabe, modelo que sabemos que é do tipo, lista fora da mistura, certo? Então eu vou dizer para cada item no modelo, eu quero um novo papel, TR, com a primeira célula sendo jogando casa para item.name. Tudo bem, então você vê eu estou desistindo de todos os objetos porque móvel é do tipo, make. Cada item representa o criador que. E então eu queria ter outro T d, desculpe, na mesma regra, que então vai guardar todos os meus botões. Agora é assim que eu quero que meus botões se pareçam. Quero etiquetas de âncora. Eu tenho duas tags âncora em, eu tenho um botão para que você possa pausar, dar uma olhada no que esse código é, e então continuar. Tudo bem, então minha primeira tag âncora tem o HRF para ir para mixagem de barra, certo? Então nós vamos estar configurando tudo isso, mas este aqui significaria que eu quero olhar para os detalhes deste registro. Então eu crio o botão de exibição e estou passando para o ID do item. Este aqui significa que eu quero editar talvez. Então, estou passando a identificação. Este é o deletar, mas observe que não é uma etiqueta âncora, é um botão. Estão todos usando as mesmas classes Bootstrap. Shore são apenas variações baseadas na operação. Mas, em seguida, o botão tem um evento onclick. Então, se você já trabalhou com parques eólicos ou mesmo fóruns da web, você seria usado para clicar em eventos. Então isso é como um pequeno evento clique onde ele vai ver que eu quero chamar essa função chamada delete e PaaS no make dot ID. Tudo bem, desculpe, eu bati nele. Tudo bem. Tudo bem, eu tinha microfone. O ponto é que provavelmente você quer fazer isso porque, você sabe, quando você está vendo modelo, quando eu estou vendo mod 2, eles tinham 10 ou 12 isso. Então vamos torná-lo um pouco mais fácil de ler, certo? Então esta é uma lista de mistura. Todos os microfones entram e fazem isso. E então em qualquer lugar que eu disse lambda mod vai me ver x em vez. Tudo bem, e em vez de ver o item porque você sabe, o código quando é uma grande pista pode ser mais difícil de ler para alguém olhando. Então vamos apenas torná-lo o mais fácil de ler possível. Então mudando todo o vago ou, por exemplo, o item no modelo para dizer algo mais parecido comigo. Tudo bem, então fazer ponto ID e, em seguida, temos nossa referência método delete aqui, mas não há nenhum método delete para chamar. Então o que eu quero é que quando a pessoa clica em excluir, quando o usuário clica em excluir, nós apenas dar-lhe um prompt rápido. Tem certeza que quer apagar e se eles disserem que sim, então vamos em frente e não comemos, certo? Então eu preciso de uma metadona aqui que eu vou definir como uma tarefa assíncrona. E ele vai ser delete ou, e eu vou fazê-lo tomar um parâmetro int id. Tudo bem, agora o que queremos que este método delete dizer, então isso vai embora porque eu estou chamando um método. Ele só não viu ainda. Sei que está lá. Está tudo bem com isso. Certo. E isso fez dela uma pia. Você vê o porquê em um minuto. E reparem que não preciso de um modificador de acesso porque pode ser privado. Realmente não faz sentido. Torná-lo público. Mas na ausência de ver privado, isso implica que isso é privado. Então você não precisava dessa parte. Então eu queria ver o microfone. Eu vou dizer var MC é igual ao e eu já tenho o menos off mix. Então aqui vai uma coisa legal. Eu já sei a mistura. Há a audição, o componente. Eu não tenho que ir e fazer um modelo API chamá-lo para recuperar o mito que precisa ser excluído. Então eu posso apenas olhar para a lista que já tem e dizer me dar o primeiro que eles querem sentar para uma loja, para uma loja padrões. Eu só faço primeiro e eu vou ver minha expressão lambda. Vamos tentar de novo. Primeiro, onde Q dot ID é equivalente ao ID do microfone que estava apenas rebentando através do parâmetro que veio do nosso evento de clique botão contra esse registro particular nesta tabela inteira. Então você vê que tudo é simplesmente contraditido lindamente. Então eu vou dizer se eu quiser obter uma confirmação do usuário, então vamos apenas fazê-lo em primeiro lugar, sem uma confirmação, Vamos olhar para um código sem uma confirmação. Então, depois de fazer isso, eu posso dizer esperar uma chamada de cliente para excluir um dissipador. Ele disse isso. Assim, para cada verbo, o cliente HTTP tem um método. Tudo bem? E depois vou ligar para a minha mistura. Então eu quero chamar mix slash goes, lembre-se que é o nome do endpoint. Certo? Faz barra e faz para a exclusão tomou um parâmetro. Então vamos voltar e olhar. Então pegamos um parâmetro para nossa exclusão, então ele tem que passar em mix barra Fiverr. Então eu vou dizer faz barra e, em seguida, colocar na ID humilde que foi passado dentro E, em seguida, indo para recordar o método assíncrono inicializado. E porque estamos usando nossos pesos, é por isso que fizemos este método arte assíncrona. Então, basicamente nós excluímos e, em seguida, ele vai atualizar a página. Agora eu disse que queria solicitar ao usuário porque você não deseja que o usuário exclua. E eu apenas atualizei e eles estão tipo, bem, o que eu cliquei? Então tudo o que vamos fazer é provavelmente colocar em um pouco de alerta. E você sabe, como em JavaScript você sempre pode ver como alerta, algo assim. Nós vamos fazer isso. Vamos colocar um alerta ou aviso JavaScript. Para interromper com JavaScript através de blazer, temos que injetar outra biblioteca chamada IGS runtime ou JS interrupção. Essa é a tecnologia ou a biblioteca por trás deste JS Runtime. Então, com este objeto, podemos saber interagir com algum código JavaScript usando C-sharp. É só que, eu tenho uma maneira híbrida agradável para não duro os ossos são propensos a muitas línguas para realizar usando todos eles, certo? Então eu vou dizer se, e nós vamos muitas vezes, eu vou esperar, JS dot invocar uma pia, certo? E eu espero um booleano, então eu vou dizer que você está esperando um booleano depois de fazer esta invocação. E dentro deste método faz métodos. Então, após os suportes angulares com bool, nós apenas abrir e fechar parênteses. Eu tenho o primeiro parâmetro, que é ver que tipo de método do JavaScript é suposto chamar. Praticamente quais parâmetros são necessários para os métodos SCID. Então confirme, esse é o método que estava chamando. E então eu estou passando o texto, você quer deletar e, hum, aqueles super ou interpolador nome do ponto do microfone lá dentro. Tudo bem. Então esta é uma declaração “if”. Então, se sim ou não, então confirmar vai ser sim ou não, então ele está esperando a resposta e está armazenando lá. Então todo esse oxigênio, modo que um híbrido, cada declaração, apenas escrevendo em uma linha. Se você quisesse separá-lo, você poderia dizer var decisão ou var confirmar é igual a, deixe-me apenas colocar isso lá de AGORA é igual a este gene está envolvido para que você sabe, você pode tipo pseudo-código um pouco mais, Certo? E então se confirmar, então nós ligamos, tudo bem, então isso é praticamente o que não. E esse é um exemplo simples, muito simples de todas as execuções de interrupção js. Mais tarde, veremos maneiras mais avançadas e provavelmente mais bonitas de fazer isso. Mas para nulo, fizemos um pouco. Deixe-nos ir e testar. Acho que já tínhamos colocado algum mix em nosso banco de dados, se não estou enganado, certo, então devemos ter pelo menos alguns mix para olhar. Então vamos ver como isso funciona. Então eu acabei de carregá-lo e eu percebi que eu não tenho nenhuma maneira imediata de chegar lá. Então vamos nos animar um pouco e ter certeza de que atualizamos nossa barra de navegação. Pule esse passo. Então o que eu vou fazer é me livrar desta página de exemplo e até mesmo os dados de busca foram realmente não precisa deles. O que eu queria começar mudando os dados de busca, eu vou dizer Meeks, certo? E o árbitro aqui seria misturar com uma barra, certo? Então, isso quer dizer, vá para a barra da pasta mixada e então já nos disseram ao índice que você está nesse endereço, praticamente certo? Então isso é só reiniciar. Tudo bem, então não há como nosso item de menu se formos lá, ele vai começar a carregar o que vai dar um erro. Este erro realmente ocorre porque estamos tentando fazer essa chamada API com a autorização de segurança adequada, bem como Luke. Então eu aludi ao fato de que talvez precisemos mudar ou endereço para a API. Então isso é realmente ver mistura de barra. O que nós dissemos ao componente que é também um arrebatar-me x. Então, quando escrever a minha inicial ou errado onde eu teria sugerido que nós apenas ir pelo controlador. Porque o que acontece é que se voltarmos para o controlador e então nomearmos nossas pastas com os mesmos nomes, então o ascendente meio que fica confuso. Vou misturar no servidor e no BIA ou vou até ele em um cliente? Então, para medidas corretivas e isso é apenas re, fazer são aqueles Roebuck, nosso padrão para a API, controlador de barra api, certo? E eu quero fazer isso de uma maneira simples o suficiente onde eu vou apenas fazer um achado e substituir. Então eu só vou dizer encontrar colchetes controlador colchetes e substituí-lo com barra api. Colchete quadrado. E eu estou olhando para o projeto atual e eu vou apenas substituir um de cada vez para ter certeza de que eu não tenho que substituir esse. Mas preciso substituir isso. Ignorar ou assim os outros. Sim, qualquer coisa que precise ser substituída, eu faço isso. E devemos ser bons para ir atrás dessas mensagens. Tudo bem, então eu estou apenas apontando uma sala de aula em potencial, não potencial em uma paixão que encontramos. E nós podemos deixar o tempo porque nós realmente não precisamos dele de qualquer maneira, e é isso. Então outra coisa, outra mudança deles foi para mim... barulho para o endereço API que está sendo chamado porque eu só disse microfones. Então eu preciso ver api slash aqui e api slash neste ponto. Então vamos fazer isso de novo. Não, outro ponto de informação antes de continuarmos. Enquanto nós não colocar qualquer autorização em nossa visão em nossos componentes, Desculpe, nós não colocar qualquer autor como na API também, certo? Mas nós realmente tirámo-lo. A coisa no entanto é que a configuração do cliente HTTP no aplicativo cliente e program.cs diz que ele precisa de autorizações, então isso significa que ele sempre tentará símbolo vontade autorização. E é apenas configurado para saber que deve ser uma chamada autorizada, significa que quem está ligando deve estar conectado. Então, embora não tenhamos colocado a proteção na página, ele pode não funcionar porque ele vai tentar fazer uma chamada autorizada. Tudo bem, lá vamos nós. Então, enquanto ele não está nos mostrando as coisas da API, vamos corrigir isso, mas ainda temos um problema. Portanto, é um problema simples o suficiente para obter o nosso próprio porque já temos alguns usuários que criamos. Então eu meio lento. E depois de ter logado, vou tentar de novo e lá vamos nós. Tão rapidamente fez essa ligação. Bem, quero dizer, tudo está sentado em uma máquina e diga-lhe o fundo que é emitido em chamada API e voltou é transparente para o usuário. Então aqui estamos olhando para todos os nossos cartões, são, desculpe, nossos Meeks no banco de dados, certo? E então se eu quisesse excluir, já que essa é a única outra funcionalidade do sistema até agora. Mais uma vez, tente isso. Recebo a confirmação. Deseja apagar o carro fictício? Eu clico em Ok, e depois olhar para isso. Então é como se tudo estivesse acontecendo em tempo real. Nenhuma recarga visível real ou algo assim. Posso apagar o outro carro fictício e temos os nossos dados. Portanto, quaisquer alterações cosméticas que você deseja fazer neste ponto você pode fazer e assim por diante. Mas este é o básico, esses são os passos básicos para obter a lista e exibi-la em uma forma tabular. 25. Dados de exibição com Blazor — Lista - Compare notas: Ei pessoal, bem-vindos de volta. Então, em nossa lição anterior, passamos pela configuração da interface do usuário para que possamos recuperar dados da API e exibi-los para nossos usuários? Não, só queria mostrar-te algumas das pequenas mudanças que fiz no discurso do microfone. E então eu vou explicar como transferimos o conhecimento do que acabamos de fazer do componente de mistura como um componente de pH. Estou a usá-los de forma intercambiável neste momento. Mas todas as técnicas e vamos querer gravar quem colocou no lugar para fazer o mix UI funcionar. Eu queria estar guiando você sobre como eu espero que nós transferimos esse conhecimento ou podemos transferir esse conhecimento para as outras partes de nossa aplicação. Agora você só sente falta de mim criticando mix e então você percebe que ele foi direto para a página de login. Por que fez isso? Então a primeira coisa que fiz foi adicionar um tog autorizado ou atributo Flagler ao topo da nossa página de mixagem, certo? Então eu só estou trazendo isso à tona. Então eu disse atributos autorizados. Então lembre-se que nós apontamos que cada vez que a chamada API é feita, ele precisa ter certo tipo de lata de ferramenta que indica que é o usuário não autorizado que está fazendo essa chamada. Então eu só, colocando isso no topo, esses atributos autorizados na parte superior da interface do usuário. É enviar a interface do usuário que você precisa ser autorizado para acessar isso. E isso é o que aconteceu no Fetched Dates são componente, é por isso que temos que fazer login antes que possamos prosseguir para chegar à data de término. Então eu só coloquei isso para ter certeza de que nós evitamos uma instituição de qualquer um tendência para carregar esta página e obter esse erro quando tudo o que eles realmente precisam fazer é fazer login. Então, estamos forçando eles a fazer login com este atributo. E embora a mudança que eu fiz aqui fosse para transportar, nós formamos os pontos finais. Então eu tive que colocar mix barra api e, em seguida, não hesite em dizer api slash mix novamente, barra MC ID. E isso é um padrão no tempo. Queremos um endereço, temos que dizer api cortar o endereço. Então o que eu fiz foi criar um arquivo de endpoints que eu coloquei em uma pasta chamada static. Então eu criei uma nova pasta no projeto cliente chamou-a estática. E então eu tenho C, classe C-Sharp chamada endpoints. Então esta classe é uma classe estática que tem apenas um monte de strings estáticas lidas em que poderia ter feito isso privado, mas tudo bem. Mas eu defini o prefixo, que é API, o que quero dizer é aplicável a todos eles. E se você alterá-lo da API, é outra coisa, então você só precisa alterar um prefixo uma vez. Mas, em seguida, para cada ponto final potencial, eu criei outra string estática para que você possa pausar, fazer tudo isso mais uma vez, criar uma pasta. Vá em frente e criar, desculpe, ele cria uma pasta chamada estática criar o arquivo chamado endpoints são classe C-Sharp em vez. E então nessa aula, podemos colocar esse pedaço de código. E então, é claro, depois de fazer tudo isso, você quer ir para as importações e deixar seu aplicativo cliente saber sobre esse namespace para que possamos usar a cruz todos os componentes confortavelmente. Então, essas são duas mudanças que eu fiz na mistura. Agora, em termos de transferência do conhecimento ou das técnicas usadas no mix, e eu vou apenas fazer login para que você possa ver. Se você olhar para modelos e as cores de vigia, eles são praticamente a mesma coisa que microfones. Eles só tinham uma propriedade que é o nome, certo? Então eu fiz a mesma coisa para modelos, a mesma coisa para cores, certo? Então tivemos a pasta é criada a partir de antes. Tudo o que fiz foi criar um novo índice. E praticamente você se certificar de que o caminho, isso é cores e todos se certificar de caminho precisamos das mesmas bibliotecas, o mesmo autorizar que estamos usando as mesmas cores do título do cartão H3. Realmente e verdadeiramente este é o código idêntico, mas pelo fato de que estamos usando o endpoint diferente. E provavelmente verbiage é diferente aqui e ali. Mais uma vez, é o seu pedido. Você pode ajustar o ITO, você precisa. Só estou mostrando que as mesmas técnicas que foram usadas para a mistura, podemos usá-las para todas as outras. Tudo bem. Então, para ser justo, tudo o que fiz foi copiar do mix, colar esse arquivo de índice dentro das cores e dentro dos modelos. E então fez um Controle F e encontrou cada microfone e substituiu pela palavra cor. E eu fiz isso para letras maiúsculas e minúsculas apenas para tornar a edição muito mais fácil. E, em seguida, quaisquer erros ao longo do caminho, nós apenas limpá-los. Isso foi realmente não, eu estou mais avançado situação viria na forma de veículos. Portanto, os clientes não são muito diferentes. Quero dizer, você sabe que não tínhamos muito para clientes. Quero dizer, poderíamos ter colocado um pouco mais de dados talvez para Dan apenas colocar o contato ID no endereço de e-mail, talvez nome, sobrenome. Mas isso é bom. Podemos fazer isso mais tarde, se for necessário. Mas mais uma vez, foi tão fácil quanto foi para o Cisne pré-construído, nossos anteriores, exceto que você tem que estar atento às colunas que você está colocando. E o pai, você precisa dessas colunas adicionais e tudo o resto é praticamente o mesmo. E acabei de ter um pequeno ajuste. Então, é claro que você vai querer ser muito cuidadoso e meticuloso ao fazer você está copiando e colando porque veja, eu fui desleixado com o meu. Mas é bom para você ver o que pode dar errado de qualquer maneira. Então eu só estou me certificando de que qualquer coisa que disse MIX não diz clientes e pensando que disse manso e também seu cliente, certo? E basicamente tudo o resto está escondido e no lugar. Então podemos seguir em frente. 1 embora com o atributo authorize, ele irá dizer-lhe que você precisa de uma biblioteca. Esqueci de mencionar isso. E você também pode cuidar desse requisito adicionando essas duas linhas às suas importações. Então, não importa onde você usa o autor como, você deve ficar bem. Tudo bem, então você pode ir em frente e fazer isso como você está colocando em autorização, saber para as situações mais avançadas como onde temos campos relacionados. Assim, no caso de veículos e no caso de reservas. Tudo bem. Então vamos olhar para reservas. Vejamos os veículos para nós. Acho que veículos, estou fazendo coisas menos complicadas. Então, em veículos, certo. Sabemos que temos ou página ou injeção do cliente em seu próprio tempo e autorizar. Veículos, se não forem nulos, então carregamos a mesa. Agora na mesa eu tenho fazer modelo e eu poderia ter, você sabe, cor. Então vamos adicionar cor. Na verdade, isso seria , bem, não vamos adicionar cor, não, mas poderíamos ter colorido do ponto é que temos campos que precisamos exibir que são campos relacionados provenientes de outra tabela. Então o veículo naturalmente fez ID, mas eu não quero exibir o ID make. Isso não significa nada para ninguém. Observe que não estou exibindo nenhuma das identidades. Só estou exibindo os nomes e dados irrelevantes, então eu tenho que dizer qual é o nome do ponto da marca e o nome do ponto do modelo. Então é assim que é realmente fácil referenciar campos na tabela relacionada, certo? Então estamos apenas imprimindo, mas esses campos e todo o resto praticamente permanece em smoking como, Oh, nós sabemos, é o mesmo loop, é a mesma tabela CAM muito. É o mesmo tipo de chamada de serviço inicializada e tudo mais. Mas nós tivemos que fazer um ajuste para os dados realmente volta quando nós chamamos para os veículos. Então, indo para a API, se eu trazer o ponto final de veículos e ir para a parte onde pegamos os veículos. Então você vai notar que eu fiz alguns ajustes em nossa unidade ou quatro chamadas. Tudo bem. Então ambos esquecer veículos e obter veículo por idéia apenas eles fizeram o mesmo tempo porque a necessidade é semelhante. O que temos de fazer é tirar partido do mecanismo de inclusão que tínhamos colocado nas unidades de trabalho. Então lembre-se, e eu vou apenas fazer Controle F 12, que me leva à implementação de obter tudo. Lembre-se que nós incluímos esse parâmetro para uma lista potencial de inclusões. E o que fizemos foi dizer que se a inclusão NÃO É nula, então vamos em frente e incluímos todos os dados relacionados. Tudo bem, então aqui está um exemplo prático de como isso é usado. Então o que eu estou fazendo aqui nesta chamada API é dizer que quando eu faço uma chamada, quando alguém faz uma chamada para obter veículos, apenas incluir automaticamente a marca relacionada, o modelo relacionado e a cor relacionada para que quando esse veículo voltar, é fácil o suficiente para nós acessar os campos relacionados são os campos das colunas relacionadas. Certo, então não estou usando cores aqui. Eu poderia facilmente ter sido disciplinado a cor, mas então eu empurrar o envelope para responder quando eu tenho uma vista cartão correto. Também quero incluir todos esses detalhes e quero incluir a lista de reservas, certo? Lembra-te mais uma vez, estou a mostrar-te como tudo está ligado. Quando criamos o nosso modelo de veículo, dissemos que queremos a lista de reservas são queremos saber que há uma lista de reservas. Então, na reserva, um veículo desculpe, tem muitas reservas. Se eu quisesse como um histórico de reservas neste veículo para ser exibido sempre que eu olhar para o veículo. Então eu estou vendo quando você recuperar esse veículo, recuperou essa lista de reservas, eu não preciso deles este material reservas cada vez que eu estou recebendo todos os veículos porque pode não haver um caso para isso, mas você poderia Coloque-o lá. Então é só isso que estou fazendo de verdade. Então pode significar que é só alugar um veículo e enquanto estivermos aqui, você pode conhecer isso. Eu só queria fazer reserva, certo? Desculpe a chamada da API de reserva. Tudo bem. Então Booking tem campos relacionados também. Então isso é o que temos saber e o que vamos fazer é modificá-lo de tal forma que somos conhecidos incluindo veículo e cliente. E, em seguida, quando estamos chamando em vão passar para cima que intromete parâmetro. Tudo bem, e reserva distante. Mais uma vez, quando você chega a uma reserva, é a mesma coisa. Temos a nossa expressão Lambda incluir. Então a razão pela qual eu incluí dois pontos inclui é que nós realmente temos alguns parâmetros que podem ser passados dentro. Nós temos essa expressão Lambda, nós temos a artéria ou abaixo nós temos o material inclui eu não quero colocar os especialistas em Eu não quero colocá-lo nisso. Eu só queria colocar inclusivamente. Assim, com as versões mais recentes de C Sharp, podemos realmente apenas especificar o parâmetro que queremos colocar e, em seguida, colocar no valor correspondente. E porque os outros são notavelmente ele vai simplesmente ignorar e ignorá-los de qualquer maneira. Portanto, é isso que queremos fazer tanto para as reservas como para os veículos. Certo, mais uma vez, quando olhamos para nossa página de índice, desculpe, quando olhamos para nossa página de índice para nossos veículos, é assim que somos capazes de realizar isso. Não, para a reserva, estou fazendo um pouco mais então sim, estou carregando a reserva. Sim, estamos fazendo o resto das coisas que sabemos. Mas então estou exibindo o cliente que concedeu o veículo. Mais uma vez, podemos adicionar mais detalhes ao registro do cliente. Eu não coloquei o primeiro nome e sobrenome. Podemos fazer isso se quiser. Mas para Nautilus, resolva com a ideia do smoking e informações de contato. Colocamos a data da reserva. Vou colocar na duração, o que eu pretendo significar o número de dias que essa pessoa tinha feito a reserva para. Então, no loop for, os dados que estão sendo apresentados vão procurar de forma diferente. Sim, temos reservas. Bem, isso deve ser reserva. Então deixe-me fazer esse ajuste. Se eu estou pregando, então eu devo praticar, certo? Então deixe-me apenas certificar-me de que o meu código está de acordo com o mesmo padrão que o tempo encorajador. Então var reserva em reservas. E depois dizemos Booking dot clienter, dot-dot-dot sociedade. muito parecido com o que fizemos com o veículo, o microfone e o nome. Então temos a data do ponto de reserva criado porque essa é a data, certo. Assim, podemos assumir com segurança que uma reserva foi criada nesta data. Este foi o dia em que foi criada a data da reserva. O que eu não quero a data e a hora. Só quero o encontro. Então essa é a data. E então podemos empurrar isso um pouco mais para querer e formatar. Isso será como uma ferramenta, algum formato. Então eu geralmente gosto de ter meu dia é o dia ou o dia faz no dia 29 ou o primeiro ou o segundo, o dia, as letras, a montanha, como no nome do mês, e o ano de quatro dígitos são feitos. Isso deve ser aspas duplas. Então isso seria ver algo como o 29º de mim, 2020. É tudo o que queremos, nossa data de exibição. Tudo bem. E então, durante a duração, eu vou dizer que eu quero a praticamente esta matemática. Podemos fazer as contas com datas de vencimento, certo? Eu posso dizer Reserva data ponto em, que seria a divindade maior porque você traz mas no carro depois que você tirou. Então os dados trouxeram de volta em mamíferos no dia em que levou Ito, eu não queria totalizar dias entre essas duas datas e queremos lançar isso para uma corda. Tudo bem? E eu acabei de perceber que eu preciso realmente colocar tudo isso em um grande parêntese por causa de como matrizes de páginas funcionam. Então, do jeito que eu tinha, apenas saiba se nós só tínhamos isso entre parênteses, então você realmente veria esse valor impresso e o ponto de string literal para totalizar essas duas cordas, que não é o que eu quero. Então eu quero tudo isso porque tudo isso é um código C-Sharp. Vou embrulhar tudo isso entre parênteses para que você possa ver os marcadores amarelos que eu estava a citar, começa e termina. E estou disposto a colocar o ponto-e-vírgula dentro desses parênteses. E é isso que vai me trazer de volta a representação da string do número total de dias, que será a duração. Então você pode quantificar isso, são quantificá-lo e dizer duração em dias, se você quiser, tudo bem. E então tudo o resto está basicamente de acordo com o mesmo padrão. E então vamos um pouco mais longe e então temos nossos bits de código fazendo a mesma coisa, recuperando as reservas, fazendo toda essa lógica de exclusão, e tudo na frente. Certo, então você vê que não é difícil transferir esse pouco de conhecimento fora de nós ficando chiques com cálculos. E talvez apenas fazendo o bit extra para ter certeza de que obtemos os dados relacionados, o que é realmente fácil para nós por causa de como construímos a camada de acesso a dados. Além disso, É buraco bastante básico e padrão para obter dados de Bach da API e detém uma estrutura-lo de uma maneira agradável, user-friendly. Quando voltarmos, olharemos para fazer nosso botão de visualização funcionar. Então este botão de pessoa, nosso primeiro link em cada 10 para tabelas de detalhes. Ele, ele serve o propósito de fazer nosso registro exibir por si só em seus próprios componentes. Então vamos configurar outro componente ou vamos chamá-lo de vista. E vamos ver como chegamos ao componente inferior, aceitamos apartamento ou perímetro não utilizado para inferir quais dados devem estar na página. 26. Crie o formulário - parte 1: Ei pessoal, bem-vindos de volta. Então vamos passar para a criação de dados nesta lição. E a realidade é que sim, sabemos como vemos os dados, mas esses são realmente dados padrão. A realidade da situação é que quando os usuários estão interagindo com nosso aplicativo, eles precisam da capacidade de criar dados. Então nós vamos ter que dar a eles um formulário que lhes permita preenchê-lo, enviar o armazenamento de informações e o banco de dados, e exibi-lo para eles de acordo. Então vamos começar com veículos no exemplo anterior, eu começo com o menos complicado e depois dou a vocês a chance de fazer os mais complicados. E então comparamos notas neste, eu vou começar com o mais complicado e então você pode transferir esse conhecimento para lidar com os menos complicados. Então a razão pela qual vamos começar com veículos é que temos que exibir o microfone, o modelo, e nós temos que exibir a capacidade para o usuário de inserir esses pontos de dados quando eles estão criando-os. E já estabelecemos que estes estão relacionados. O, estes são pontos de dados relacionados que vão de outras tabelas. Então, evidentemente, não podemos permitir que o usuário os digite. E eles terão que fazer listas suspensas e tal. Então, por causa dessas situações mais complexas, vamos começar com os veículos e então você pode tentar os outros por conta própria e nós apenas comparamos notas. Agora, você percebe que minha interface é algumas mudanças. Primeiro, eu inseri este botão ou inseri este botão no código. E é realmente apenas um botão com btn secundário nele e um sinal de mais. Vou mostrar-lhe o código em poucos, mas também a tabela. O que eu fiz foi remover a classe sensível traço mesa dele. Então agora ele só se estende pela tela de qualquer maneira, que é mais parecido com o que eu gostaria. Então você pode atender a esse ajuste se você assim o desejar. Mas vamos dar um código de olhar para o botão. E vemos aqui que é realmente apenas uma etiqueta de âncora. Eu tenho o HRF sendo igual a cortar veículos barra cria. Então esse é o nosso componente que precisamos criar desta vez. E a classe btn secundário girou fora ou traço mais e criar veículos. Então, mais uma vez, é o seu aplicativo que você começou em tudo, você sente a necessidade de, você experimenta. Cabe a você, mas continuaremos com essa alma. O que acontece quando eu clico no botão é que ele continua por duas páginas é algum, desculpe, não há nada no centrista, não há nada lá porque precisamos ir em frente e criar o componente que ele irá navegar para. Então vamos começar com isso. Então agora eu tenho certeza que você sabe como criar um componente já criado, mas apenas como uma atualização, você pode clicar com o botão direito do mouse, ir para Adicionar e, em seguida, série ou componente e estamos chamando ele cria as matrizes são para que você possa ir em frente e criar que nos veículos. E para cada outra página ou, você sabe, criar Piazza que precisamos, nós apenas, apenas fazê-lo nas respectivas pastas. Então, a primeira coisa que queremos neste componente e eu criei é impuro tudo fora dele. Então você pode apenas acrescentar o que estou prestes a mostrar para o conteúdo padrão do discurso. Temos a navegação da página no topo para deixá-lo saber que ele pode ser obtido ferramenta através deste endereço veículos barra criar. Eu também vou injetar meu cliente HTTP, bem como um gerenciador de navegação, que é apenas uma biblioteca que nos ajuda a navegar entre componentes em nosso blazer up. Vamos modificar nossa tag h3. E eu vou colocar a mesma classe de cartão para ele. E ele vai dizer criar novo veículo em vez de apenas criar. E então nós vamos entrar na carne dele. Claro, você sabe, você tem essa citação, que eu vou colocar lá. Então isso é basicamente o que seu componente precisa se parecer neste momento. Então, quando falamos de fazendas, você precisa usar o componente embutido dado a nós por um blazer chamado Editar Formulário. Agora, este formulário de edição leva alguns parâmetros. Primeiro, os parâmetros são nossos atributos, bem, um modelo. Então basicamente isso está dizendo, o que eu deveria querer tipo de dados, devo usar para inferir quais campos devo prestar atenção a um formulário. Então, se estamos criando veículos, então nosso modelo precisa ser alguma forma de objeto de veículo ou valores de veículo. Então eu vou dizer no sinal de veículo. Mas é claro que você não quer ter nenhum objeto com o nome do veículo, então ele vai mentir para operar. Para remediar isso, eu vou apenas ir em frente e criar esse objeto aqui em baixo e inicializá-lo para uma nova instância de veículo ao mesmo tempo. E então vemos que a linha vermelha desaparece. Então agora ele sabe que tudo bem, ele está lidando com veículos. Então olhe aqui para ver os pontos de dados que ele precisa prestar atenção. A próxima coisa que eu queria apontar agora seria o que acontece ou o que deveria acontecer após uma submissão. Então, podemos ver que queremos em, em evento de envio inválido, queremos um evento onsubmit. Quero um envio válido. Então, o que queremos fazer quando os dados não atenderem aos requisitos? O que queremos fazer quando alguém clica em enviar em geral e o que queremos fazer quando alguém clica em enviar? E não há violações de validação praticamente. Então é isso que em válido me submeter. E então eu só vou trabalhar com submissão inválida. E então eu vou dizer que eu quero que você chame esse método chamado criar. Agora, mais uma vez, se eu estiver fazendo referência a esse método, eu preciso ter certeza de que ele está entre aspas. Eu vou descer e, em seguida, criar esse método chamado criar veículo. Então você pode ir em frente e fazer isso. Essa linha vai embora. Este, no entanto, está lá porque não está fazendo nada, mas logo Remy fez isso. E então podemos começar a colocar as diferentes partes do formulário. Então, os dois principais componentes que eu vou colocar na forma nossas tags seriam para o validador de anotações de dados, bem como a validação. E agora não estamos prestando muita atenção à validação ainda. Mas a coisa é que temos anotações de dados que podemos realmente colocar sobre modelos, mas agora estamos compartilhando os modelos com o banco de dados. Então, mais tarde veremos por que é uma boa idéia separá-los. Mas Farnell, enquanto dividi-los e vamos manter assim. Assim, o validador de anotações de dados não será o mais, ele não vai fazer muito agora, mas vamos colocá-lo lá para uso posterior. Resumo de validação significa que se tentarmos fazer uma submissão e eles são pontos de dados inválidos, então isso mostrará que isso é necessário que não atenda a isso, etc. Então esses dois trabalham lado a lado, mas quando começamos a focar na validação mais tarde, então vamos vê-los em melhor axônio. Saiba o que queremos fazer é criar nossa estrutura farm semelhante a como Bootstrap teria formado alguém para dizer div classe é igual a formar grupo traço. E então dentro desta div de grupo de formulários, eu vou ter um rótulo. Então o primeiro loop será para o microfone. E então desculpe, sabemos disso para o microfone. Não queremos uma caixa de texto. Você quer alguma forma de selecionar a lista suspensa, selecione a lista. Então o que eu vou fazer é colocar isso em outra div e então eu vou usar uma tag select e outros abrir e fechar. Mas, em seguida, dentro desta tag select, eu posso dizer bind é igual a e a que eu quero vinculá-lo? Ele vai ser ligado ao óleo de valor para o modelo e o valor no modelo, nós estaremos encontrando ID porque isso é para mim. Então eu estou ligando essa lista de permissões para o ID do microfone, certo? E claro, de acordo com os fungos, estamos fazendo um formulário de bootstrap. Eu só dou a este a classe igual formada. Então, a próxima coisa que precisamos tomar nota é o fato de que este é um slot vazio lista de onde as opções que vêm. Então, se você sabe HTML básico, você sabe, você tem sua seleção, então você tem opções, opções, opções, é claro, nós não sabemos o que vai estar no banco de dados. Então temos que atender esta lista de opções o mais dinâmico possível. Então precisamos olhar para o banco de dados, aka olhou através da API para nos devolver a lista de mixagem. E então podemos usar isso para gerar dinamicamente quais serão as opções. Então deixe-me apenas ir para a seção de código e eu vou inicializar um objeto de lista de tipos. Então lista I lista. Posso usá-los de forma intercambiável. Fui avisado que provavelmente não é a melhor coisa a fazer barcos nesta situação. Está tudo bem. Então podemos apenas dizer que eu listar microfone, eu chamaria de mix. Tudo bem. E então queremos que quando o componente é carregado ou a página carrega, que a mistura será preenchida e pronta para uso pela interface. Assim como o que tivemos que fazer com o Index quando tínhamos dois, deixe-me pular ali. Tivemos que dizer no inicializado, eu quero que você vá buscar a lista de veículos. Eu preciso fazer algo semelhante e criar não inicializado ir buscar a lista de mix. Por isso, vou copiar isto. Você realmente não precisa copiá-lo, mas você pode redigitar protegido Assíncrono em uma tarefa no assíncrono inicializado novamente. E o que eu vou fazer é em vez de procurar veículos, porque eu acabei de copiar isso da página de índice de veículos. Mas em vez de procurar veículos, procuro mistura. Isso significa que estou fazendo cliente. Sim, HTTP concede client.connect do JSON, apagando a lista do microfone. E meu endpoint aqui seria mix endpoint. Lá vamos nós. Certo, então um nulo, basicamente quando, quando formos inicializados, vamos chamar a mistura. Então eu preciso preencher isso com os dados uma vez que a mistura de ser recuperada. Então o que eu vou fazer é colocar em uma opção padrão que diz selecione o microfone. Então o usuário sabe que, ok, você precisa selecionar o microfone, tudo bem. Mas então eu vou ver e começar com o sinal de at se a mistura não é igual a nulo. Tudo bem, então misture ou objeto aqui, que é a lista de misturas. Aqui é nulo. Passamos por isso, só sei com o índice. Então ele vai começar como nulo, mas então ele vai ser preenchido eventualmente. Então, se não é igual a nulo, então para cada, digamos eu, que volta. Em vez de misturar, quero criar uma opção, certo? E o valor para a opção estará fora de mim ID ponto porque queremos rastrear o ID. Lembre-se que quando criamos o veículo onde realmente armazenar no ID do microfone, não o nome. No entanto, esse nome é o que queremos mostrar. Então, na seção para a disciplina foi ver exibir o nome do ponto do microfone. Lá vamos nós. Então ele vai gerar tantas opções quanto há microfones para seleção a partir desta lista suspensa. E é isso mesmo. Acabamos de criar nossa primeira lista suspensa. Agora temos um não e mais três para ir porque é a mesma coisa para o modelo e é a mesma coisa para a cor. Eles são todos armazenados em tabelas de banco de dados, que precisamos carregar dinamicamente o conteúdo de quando estamos lidando com este formulário. Então o que eu vou fazer para tornar as coisas mais fáceis é apenas replicar esta estrutura aqui para o formulário. Então foi MC. Este vai ser modelo. E eu estou indo basicamente mudar tudo o que é dito MC ID, Eu vou salvar modelo ID ponto. Isso vai ser modelos, modelos, e isso será modelos comuns, modelos, desculpe, e model.py, nome model.py. E onde você vai fazer a mesma coisa para a cor. Então eu estou fazendo algumas mudanças expressas aqui para agilizar esta operação. Então cores, cores, esta é uma cor de semente comum e estamos apenas fazendo essas mudanças rapidamente. Então não, nós fizemos provisões para a lista suspensa de microfone, para a lista suspensa do módulo e para a cor descartada sobre isso. Linhas vermelhas no entanto, estão indicando que um precisamos desses respectivos objetos. E dois, já sabemos que não configuramos nenhuma chamada de API para eles. Então, para apenas completar esta operação, podemos colocar na linha para o objeto modelos, bem como o objeto cores. E, em seguida, da mesma maneira que tivemos que ter certeza de que fizemos a chamada de API para inicializar mix. Temos que fazer isso para modelos, e também temos que fazer isso para cores. Tudo bem, então apenas conserte isso. Então, basicamente modelos. Aguardaremos a chamada do cliente para obter a lista de modelos do endpoint modelos, cores fazendo a mesma coisa, lista de cores do ponto de extremidade de cores e misturar a mesma coisa. Tudo bem, então é isso para as listas suspensas. E realmente, realmente, essa foi uma coisa mais complicada. Mas você pode ver que se ele fez isso uma vez, você pode fazê-lo para os outros. Alternativamente, para a seleção, há na verdade um componente no blazer chamado input select, que funciona muito semelhante. E eu não disse semelhança de festa, mas em vez de comprar, temos que dizer vincular traço, valor. Tudo bem, alguém para deixar um como a seleção de entrada, e eu vou deixar os outros dois como um seleto. Então este era o nosso código original. Isto está usando o componente navalha e, em seguida, este é mapeado para o código original. Mas vamos preencher o nosso formulário. E então veremos como tudo funciona nos laços juntos. Então nosso próximo campo que gostaríamos que o usuário entrasse é talvez o ano do veículo. Então eu vou seguir o mesmo grupo de formulário formato e, em seguida, o rótulo e, em seguida, uma div que vai ter minhas entradas. Mas porque o ano é um, deixe-me corrigir esses B maiúsculas, certo? Porque ano é do tipo inteiro, eu vou usar o componente número de entrada, certo? Então número de entrada por n valor veículo ponto ano. E então você não quer dizer, eu estou colocando nesta nova, nova seção aqui que diz mensagem de validação para, e então nós abrimos ou é uma sintaxes ver veículo ponto ano. Então, na verdade, poderíamos pegar essa mensagem de validação e aplicá-la a todas as outras. Porque o ponto é que precisamos alguma forma de validação para garantir que esses vales sejam selecionados. Mais uma vez, não estamos prestando muita atenção à validação, mas estou apenas colocando-os do nulo. Então eu vou salvar a mensagem de validação para. E então temos parênteses abertos fora e, em seguida, abrir e fechar Lambda seta ponto veículo e, em seguida, o nome do campo. Então esse é para o ID do Meek, este será para o ID do modelo. Este vai ser para identificação de cor. E então este é para o ano, como vemos. Tudo bem. O próximo campo seria o número da placa de licença, mais uma vez seguindo o mesmo formato. E desta vez vamos usar texto de entrada e ainda somos o valor, mas desta vez para o número da placa. Tudo bem. No entanto, mensagem de validação para então eu tenho número da placa que temos ano eu acho que próxima parada provavelmente seria o número de identificação do veículo ou VIN. Então esse é o próximo. Então rótulo de grupo de formulário, texto de entrada porque o nosso Vin é uma string. E, para completar tudo, acho que as tarifas diárias são intolerantes, então eu vou colocar essa e então as taxas de aluguel mais uma vez é o dobro. Então o número de entrada é aquele. Tudo bem, mas o ponto é que se você apenas abrir o colchete angular e escrever a entrada da palavra, você verá todas as diferentes opções são construídas em componentes disponíveis para você tem caixa de seleção, data, arquivo, rádio, botão de opção , grupo, entrada, texto, área, etc. Então, todos esses componentes são integrados nos fóruns e estão disponíveis para você. Então, em nossa situação nós usamos o que, 33 diferentes nós usamos número, texto e seleção, e tudo bem. Agora vamos seguir em frente do nosso design e focar um pouco mais no que queremos que aconteça quando você enviar. Então é claro que precisamos de um botão para enviar porque você tem todos os campos, mas nós não colocamos um soviético. Então, meu botão Enviar, apenas um tipo de botão enviar e colocá-lo na reunião de classe e bateu sucesso holandês e bloco indústria de carne criar veículo. Então é apenas um botão simples o suficiente, mas então nós precisamos fazer a lógica não aqui para ter certeza de que uma vez que ele, uma vez que é clicado, ele chama essa lógica e realmente vai em frente e executa o mandato. Então vamos explorar o que precisa acontecer aqui. Então lembre-se de que quando estamos criando dados, precisamos fazer uma chamada postal. Então eu já tenho o modelo que precisa ou o objeto em qualquer Enviar Postel para a API efetivamente cria o recurso. Então o que acontece é que começa vazio. Ele, ele define o contexto para o formulário, mas, em seguida, quaisquer dados são colocados nele, é por isso que nós temos que vincular. Então, independentemente dos dados que estão sendo colocados ao longo do caminho, nós vamos realmente apenas obter osso para o mesmo objeto e, em seguida, OnCreate teria esses valores. Então, o que precisamos fazer aqui seria esperar a chamada do cliente para o nosso post como JSON assíncrono. Mais uma vez, há um método por verbo, então nós olhamos para os gets anulados. Vamos olhar para o correio. Para onde estamos ligando? O que estamos chamando de pontos finais, veículo ponto, ponto final. E eu vou passar o veículo como o objeto que precisa ser postado. Tudo bem, depois que for criado, gostaríamos de voltar para a nossa página de índice. Então aqui é onde podemos agora usar este NEF Mônaco. Apenas desmorone isso. Então agora podemos usar o gerente NEF e dizer suficiente gerente ponto navegar para. E então nós apenas vemos, desculpe, nós apenas dizemos cortar veículos cortar. Certo? Então vamos pegar tudo isso, trabalhar para dar uma volta e dar uma olhada. Tudo bem, então eu estou carregando no meu formulário e eu estou vendo alguns erros gritantes aqui e isso não é problema, isso é consertá-los juntos. Então, em primeiro lugar, isso deveria ser, isso deveria ser mais contextos, mas eu não tinha disciplina suficiente para passar e dizer Select model, select color. Além disso, meus controles precisam se parecer com o controle Bootstrap. Então vamos começar juntos porque se você tem o mesmo código que eu tenho, então você também estaria vendo esses. Se você não caiu nas minhas armadilhas, então parabéns para você. Então, para a seleção, para a seleção padrão, estou alterando-os para selecionar uma cor para cor, selecione microfone para mim. E eu vou colocar essa classe bootstrap, que é o controle de forma em cada um desses outros componentes para garantir que todos eles compartilham o mesmo estilo. Então, com tudo isso feito, vejo apenas algumas mudanças cosméticas. Deixe-me recomeçar. E aqui estamos nós. Então isso parece muito melhor. Tudo bem, então vamos selecionar, OK, aqui está nossa lista suspensa com nossa mistura do banco de dados. Então, modelo Toyota. Está bem. Cor Prius, é preto. É o modelo 2020. O número da placa, alguém para dirigir as aulas com números semelhantes aos que teríamos na Jamaica e no VIN. Bem, isso é muitas vezes numérico, então eu não acho que depois, você sabe, ser muito rigoroso com isso. Tudo bem. E então para os empréstimos de taxa diária, novamente, dentro do contexto da Jamaica, você provavelmente está alugando um carro por US $3 mil por dia. E, em seguida, quando clicamos Criar olhar veículo, ele navega ferramenta ou página de índice, e está aqui para nós ver. Tudo bem, então nós apenas efetivamente criamos nosso primeiro recurso usando a interface do usuário em vez da API como fizemos no passado. Então eu vou encorajá-lo a pegar esse conhecimento, transferi-lo para os outros. Então você ainda tem que ter certeza de que as pessoas podem entrar e manter a lista de mistura porque nós já sabemos que você pode vê-los. Mas podemos ver e apagar a retina. Precisamos ser capazes de criar modelos de fórmula cm, mesmas quatro cores para os clientes, bem como para reservas. Tudo bem, então reservas, podemos rever as reservas juntos mais tarde porque isso pode ser um pouco mais aptidão, mas essencialmente ir em frente e transferir o conhecimento e fazer isso. E então podemos comparar notas apenas retorno. 27. Crie o formulário - Parte 2: Ei pessoal, bem-vindos de volta. Então você tem uma tarefa e espero que você tenha completado de qualquer maneira nós vamos passar por isso juntos. Então o desafio era transferir o conhecimento que já ganhou de sentar nos veículos, criar forma e ir em frente e defini-los, criar componentes para todos os outros recursos que queremos permitir que os usuários possam entrar. Assim faz modelos, cores, veículos, clientes e reservas. Bem, nós fizemos veículos juntos. Assim, apenas como uma revisão rápida, poderíamos navegar para o componente de veículos. Temos nossas listas suspensas que são preenchidas dinamicamente com dados baseados no que está no banco de dados. Cortesia para API. Então faça modelo, cor. Todos eles são API e formados. E então temos nosso número de entrada. A entrada leva um número de entrada. Então vimos que temos os diferentes componentes de entrada dados a nós através de peças ou fora da caixa. E como podemos personalizar outros usando o HTML selecionado ou a tag select dada a nós por um blazer. Agora, o que queremos fazer é passar pelas outras telas juntos apenas para ter certeza de que estamos todos na mesma página. Então eu vou começar com alguns dos mais fáceis que seriam modelos mistos e cores porque tudo o que realmente está lá nessa forma é o nome. Muito bem, então outro microfone teria sido mandado WWF para colocar no Nissan. Vamos testar criar microfone. Lá vamos nós. Agora temos Nisan na lista. Então, se nós apenas voltar e rever o código para isso, ele parece bastante idêntico aos veículos nas partes superiores onde temos a página com o caminho faz barra 12 hora cliente HTTP e gerenciador de navegação ser injetado ou pequena tag no topo para que as pessoas saibam exatamente onde estão no aplicativo. E então temos nosso formulário de edição, que está usando o modelo de um objeto chamado manso. E então sabemos que temos nosso objeto principal sendo inicializado no código. E, em seguida, em envios válidos , temos cria microfone, que também temos no código. E, em seguida, temos nossas anotações enquanto o resumo de dados e validação. Em seguida, passamos para dizer texto de entrada e vincular valor traço, fazer dotnet. Tudo bem, e nós damos a ele o controle do formulário e temos a mensagem de validação. E temos o nosso botão. É isso mesmo. Agora, o método não inicializado está realmente vazio e, sem dúvida, poderíamos passar sem ele. Quero dizer, não está fazendo nada. Não precisávamos redigitar. Mas apenas no caso de haver algo que você queira fazer antes da página ser carregada ou quando a página é carregada, você sempre pode colocar esse método em. Tudo bem, então eu deixei lá em todos os componentes apenas por precaução, mas apenas para você saber que você poderia tê-lo não fazendo nada ou para um código mais limpo, discutivelmente mais limpo, você poderia apenas omitir, já que isso é realmente apenas uma sobreposição qualquer maneira em criar microfone, vá em frente para dizer aguarda client.read post como JSON assíncrono, e lembre-se o endpoint apropriado passando do objeto que queremos criar, em seguida, navegamos de volta para a nossa página de índice. Agora, esse é o tema geral para modelos e cores. Então, apenas olhamos para cima marcas, se olharmos para modelos e olharmos para cores, é praticamente a mesma citação. Literalmente, copie de mim, clique em Criar e, em seguida, cole no próximo. Então este seria executado modelos e tudo o que eu fiz foi Controle F e encontrar todas as coisas que disse MY maiúsculo M com muito caso em e mudá-los para. E modelo, e eu fiz a mesma coisa com microfone minúsculo e modelo minúsculo. E com isso, eu não tive que mudar nenhum outro código porque tudo o resto simplesmente caiu na linha porque os campos são praticamente os mesmos e é fácil o suficiente para replicar. Então isso é a mesma coisa para o modelo. E mais uma vez, a mesma coisa para a cor. Vamos criar barra de cor, e tudo o resto parece praticamente da mesma maneira. Tudo bem, então, os modelos claramente são diferentes para as diferentes Create Pages. Agora vamos olhar para os fóruns de criação de clientes. Então, no novo formulário de cliente, não é muito para se preocupar. Um barco que temos tucks, número de identificação, endereço de e-mail, número de contato, bem como endereço. Agora, uma coisa a observar, certifique-se de que você está usando o componente carrinho relativo ao tipo de dados do carrinho porque mesmo que este seja o número de identificação fiscal, ele diz número, mas a realidade é que em diferentes territórios, este número pode ser apenas alfanumérico, estão tendo caracteres especiais. Por exemplo, na Jamaica, tendemos a usar traços entre nossos números. Tudo bem? Então você só quer ter cuidado para não estar usando seu próprio campo para esse tipo de dados. De qualquer forma, vamos apenas ir em frente e criar algum livro que o cliente realmente criou este cliente, mas eu vou apenas fazer isso e criar um cliente. Diga veja, aqui temos nossos clientes sendo exibidos. Tudo bem, então vamos dar uma olhada nas reservas. Então Booking embora, deixou para o último porque é indiscutivelmente teve o bit mais complicado de código. Mas eu vou brilhar sobre o formulário de cliente só para que você possa ver exatamente o que foi feito. Então, temos cada seção de formulário, texto de entrada para o ID fiscal, endereço de e-mail, número de contatos, ou endereço, área de texto de entrada eras. Digamos que você não quer começar esse tipo de maior do que a caixa de texto normal porque só leva tempo. E então o resto está de acordo com o que vimos. Caso contrário, ninguém iria para a reserva. Vemos uma estação diferente. Um. É uma lista suspensa para os veículos. Mas reparem como estou listando todos os veículos. Estou listando-os basicamente pelo nome, certo? Toyota Prius. E então eu coloquei lá em cima e esse é o número da licença. Poderia ter colocado mais detalhes, mas vamos apenas trabalhar com isso para null, o cliente, nós colocamos os pontos ID um pipe e o endereço de e-mail para o referido cliente e, em seguida, a data, notar que ele está realmente exibindo a data de hoje, a data da hora. E então temos o controle Callender que nos permite mudá-lo. E este calendário será basicamente o mesmo em qualquer navegador baseado em cromo. Então esta é a Internet, desculpe, este é o Microsoft Edge. Você vai da mesma forma no Chrome, mas pode parecer diferente no Firefox. E enquanto eu não estou inteiramente certo sobre como ele pode parecer na ópera, mas o ponto é que ele pode parecer diferente através dos diferentes navegadores. Então você vai querer prestar atenção a isso. Mas a questão é que o controle do calendário é dado a nós cortesia desse componente ou do tipo que ele infere, certo? Então deixe-me mostrar o código que está por trás desta renderização fora da fazenda. Então, mais uma vez, o layout geral é o mesmo. Mais uma vez, consistência. Depois de um tempo você começa a perceber que você está repetindo coisas como, você sabe, toda vez que temos que amarrar essa classe h3 e ver isso, isso, então você pode pensar em fazer disso um componente próprio. Eu chamaria de componente e provavelmente passaria o que é único. Assim, se quisermos mudar a forma como mostramos o título, não teremos que fazer isso em 20 lugares diferentes, mas faremos isso mais tarde. Então eu só estou te dando idéias de como componentes podem facilitar sua vida. Então, de volta à nossa forma. Temos o nosso Formulário de Edição Baseado na web de reserva ou função de envio válida, que e o que vimos, não importa o quão complicado é o formulário, o envio inválido é praticamente o mesmo o tempo todo. Passamos para a API, e seguimos nosso caminho, certo? Mas então vamos prestar atenção ao que acontece aqui. Bônus de uma hora para os veículos. Sabemos que devemos ir para a API e, em seguida, onde obter a lista de veículos. Então estamos familiarizados com isso baseado no que fizemos no discurso do veículo desta vez, onde obter os veículos embora. Mas, em seguida, para as listas suspensas reais, desculpe, errado para a era da lista suspensa real, temos ID do veículo ok. Onde se vincula a esse veículo. E se os veículos não são conhecidos, então para cada veículo na lista, então queremos gerar uma opção que tenha o valor do id do registro do veículo. Mas então olhe para o que eu coloquei na seção de exibição. Então eu estou apenas exibindo vários detalhes do veículo. Em seguida, faça o nome do ponto do modelo, e então eu tenho este tubo e, em seguida, o número da placa. Tudo bem, então você quer colocar os dados para o usuário para que ele possa saber exatamente qual veículo é, porque provavelmente seria útil até mesmo colocar a cor em algum lugar lá. Então seria Toyota Prius preto ou BMW X5 azul no sol. Mas isso é com você. Mas só estou mostrando o que fiz, certo? Para obter os tipos mais complexos de displays, realmente não é tão difícil. E então, na seção de clientes, muito parecida, tivemos que pegar a lista de clientes mais uma vez da APA, preenchê-los, ok? E, em seguida, para cada um deles, nós geramos a opção com o cliente ponto idéias de valor. E então estamos exibindo o índice, digamos que o separador e o endereço de e-mail poderiam colocar mais detalhes, poderiam colocar menos, certo? O ponto é que é o seu aplicativo, você quer torná-lo o mais fácil de usar possível. Mas uma vez que você entende como manipular seus dados é a coisa mais importante. Agora, para a data, observe que o meu próprio está exibindo a data de hoje. Eu não tenho certeza se você é um é você provavelmente só tem que os dados padrão de 0 em cortado 01 barra três zeros à direita. A razão para isso é que o tipo de dados que estamos usando é do tipo data, certo? É a hora. Então ele fez oh, é do tipo datetime. Por padrão, eu fiz. tempo não pode ser nulo. Tem que ter alguma forma de DID. E os dados que você provavelmente está vendo são os padrão. Isso não é muito fácil de usar. Então. O que eu fiz foi ao declarar o objeto a ser usado para o formulário como um modelo para o formulário, I, dados inicializados devem ser data-ponto-ponto, ponto-ponto. Então, o que quer, você sabe, ponto de data e hora agora recebe um carimbo exato como um nulo. O que eu não quero o tempo perplexo. Não preciso das 12 horas ou o que quer que seja. Então eu só estou dizendo para me dar em D8, o nível de detalhe que você colocou nisso, isso é com você. Sem problema. Mais uma vez, sua aplicação, suas necessidades podem ser diferentes do que estou expressando aqui. Mas, mais uma vez, eu só quero passar os conceitos fundamentais. Então eu estou inicializando esse objeto que podemos fazer isso a qualquer momento queremos que o formulário carregue com dados, podemos dizer ao nosso objeto PDV, esse bit de dados para que, no momento em que ele é desossado aqui, qualquer campo que tenha que bind exibirá automaticamente os dados correspondentes que foram pré-carregados. Tudo bem, para que tudo isso eu tenha essa data para ser exibido e divertido um componente de data de entrada, é por isso que nós temos o Callender. Tudo bem? E, em seguida, fora de tudo isso, nós temos o básico criar reserva onde nós apenas enviá-lo através para o endpoint e navegar sempre. Então deixe-me criar uma reserva para este cliente que está alugando todos os tar Toyota Prius criar a reserva e eu estou ficando sobre ela. Sem problema. Eu realmente não testei isso antes desta palestra. Então vamos inspecionar esta era para nos dar um pode sempre clicar com o botão direito do mouse ir para Inspecionar. Vá até o console do seu navegador. E depois mostraremos o que é a flecha. Então aqui na leitura do ar no mar e que há 500 respostas na bancada. E então você veria em que está acontecendo linha 63 de nossas matrizes de pontos de índice ou pH. Então é a linha 63 de index.js são, vamos ver o que e que é a nossa chamada API para a nossa página de índice. Não, não sabemos qual é o problema. E se verificarmos, vimos que a mensagem no navegador não nos deu muita ajuda, mas temos essa janela de saída à qual temos acesso. Basicamente toda vez que há depuração acontecendo, certo? Portanto, Microsoft ou dotnet Core está realmente sempre registrando nesta janela. Então, se eu rolar um pouco para cima, começar a ver as mesmas áreas que são ainda mais erros são mais detalhes de erro, em seguida, o que o navegador foi exibido para mim. Então, esta é uma boa maneira de você saber como depurar seus aplicativos quando você está recebendo esses tipos de erros porque ele funcionou antes e saber que ele parou de funcionar. Por que parou de funcionar? Então ele diz algo aqui, um barco, um erro e exceção ocorreu ao calcular o conteúdo da era do banco de dados. Não tenho certeza se é isso. O que vemos aqui, a mesma coisa que estava no navegador. Se eu continuar rolando para cima, talvez veja mais detalhes. Começo a ver algumas coisas. Comprei JSON, JSON serialização e estou subindo e subindo. E, em seguida, no início desta pilha, trace é um possível ciclo de objetos é detectado. Isto é devido a alguma coisa, alguma referência lá. Então eu conheço essa mensagem, eu sei exatamente o que está errado. Não te diz necessariamente qual é o problema, mas vou guiar-te através desta. Tudo bem? Então, o que acontece? E eu vou apenas obter um monte de depuração real rapidamente e saltar para baixo para o nosso objeto para reserva. O que acontece é que pode haver momentos em que estamos tentando recuperar objetos e incluir detalhes adicionais. Mas os detalhes adicionais são os objetos adicionais que estamos tentando incluir, tem, relacionamentos são devem conter objetos do objeto. É confuso. Então isso é o que eles queriam dizer com um ciclo. Algumas setas de referência do ciclador. A reserva contém um veículo, mas o veículo contém uma lista de reservas, certo? Então, basicamente, está ficando confuso porque está dizendo que você quer uma lista de reservas. Você deseja incluir os detalhes do veículo, mas os detalhes do veículo também incluem uma lista de reservas, então ele pode ficar confuso, e isso é um problema comum com APIs na verdade. Então, de um modo geral, resolvemos isso usando essa biblioteca chamada “soft” de Newton. Então eu vou apenas clicar com o botão direito do mouse em nosso projeto de servidor e vamos para Gerenciar pacotes NuGet. Eu já tenho o pacote instalado, mas o que você vai procurar é o soft do Newton. E apenas deixe que a pesquisa e, em seguida, você quer este Microsoft não é velocidade dotnet curso nosso ASP NET Core dot NVC dot JSON suave de Newton. Então você quer apenas clicar que, que não carregar. Bem, você veria instalar ou você verá que a seta preta já tem. Então é por isso que eu vejo o X vermelho. Vá em frente e instale isso. E, em seguida, uma vez que isso é feito, em seguida, você deseja ir para o arquivo de inicialização para o projeto do servidor. Vá embora todo o caminho até esta linha serviços ponto adicionar controladores com vistas. E então você vai adicionar o seguinte código. Dot adicionar JSON macio de Newton. E então vamos dar-lhe alguma inicialização e opções vão ver o p com o nosso erro Lambda, desculpe, seta Lambda. Mas, e lá vemos o p dot Síria, Síria, senhor serializer configurações. E deixe-me ir para os próximos nove para ficar claro o que está acontecendo. Muito bem, companheiro mais Smith. Então Sara Lazar, referência de ponto de configurações, manipulação de loop. Então é isso que está acontecendo. Está causando nosso ciclo de referência. Tudo bem, então a manipulação de loop de referência é igual a e eu vou apenas ir e ver self.age JSON de Newton manipulação de dados ponto ignorar. Tudo bem, então em outras palavras estamos vendo sim, você pode acabar com nosso loop de referência no entanto, fazer um grande negócio sobre isso. Faça o que tem que fazer e compre os dados. Então isso é praticamente o que isso vai dizer à API que está em nossos projetos de servidor. Então vamos a Austrália, isso é como uma navegação para reservas. E, claro, você sabe, nós temos que fazer login primeiro. E depois de entrarmos no momento da verdade, então veículos K desculpe, eu disse reservas e lá vamos nós. Não, estamos vendo nossas reservas com os detalhes apropriados base no que pretendemos listar na página de índice. Então, isso é realmente um erro muito comum com APIs. É um bom caminho. Um bom trabalhador de propriedade. O soft de Newton fez muito bem em gerenciar esse erro. Então aqui está o código. Mais uma vez, acabamos de adicionar este para o piloto disse adicionar controlador com vistas. Se você estiver usando apenas uma API que provavelmente você só tem controladores AD. Como o método aqui, Serviços dot-ponto controladores. É a mesma coisa. Basta colocá-la no final dos parênteses e deve funcionar. Então, neste ponto, atingimos um marco em que configuramos nossos formulários de criação para todos os nossos vários recursos. Então agora você sabe como permitir que o usuário insira dados através de seu blazer up e armazenamento no banco de dados. Passando por isso, veremos como permitimos que modifiquem os dados que entraram. Porque quando olhamos para a reserva, veríamos que ok, há uma data em e atualizar retinol velho. Tudo o que estamos exibindo são os dados. verdade, eu tinha realmente comentado nesta coluna aqui que estaria morto em menos 0, 2, que eu sei que vai causar um problema porque quando atualizar e tentar recarregar a página reservas não. Mostrando a coluna que falta, olhe para o que você está vendo. Então isso não é um valor sensato porque o Dayton tem um tempo Xia coma, nós sabemos que ele vai ser padrão para 0 1 barra. Então, quando ele está fazendo o cálculo, ele vai nos dar um negativo desde essa data até o dia que tivemos. Então isso vai ser um problema. De qualquer forma, podemos corrigir esse cosmético porque podemos facilmente colocar em uma declaração if para ver se não há data em vindo do modelo, em seguida, exibir outra coisa. Caso contrário, exiba a duração em dias. Não obstante isso, precisamos configurar o formulário de edição porque quando alguém traz o carro, ele precisa atualizar o registro de reserva existente com o retorno. Caso contrário, precisamos da edição para todos os outros. Então vamos ver como isso funciona em poucos. 28. Formulário de atualização de configuração — Parte 1: Ei pessoal, bem-vindos de volta. Então, nesta lição vamos estar olhando para configurar o formulário de edição ou atualização para a nossa aplicação. Então, nesta lição, vamos olhar para algumas coisas. Um, como podemos criar componentes reutilizáveis e reutilizáveis reais, e como podemos implementar parâmetros e 3, como podemos implementar o que chamamos de retornos de chamada de evento. Assim, a gênese de todas essas coisas para olhar em apenas uma operação de edição simples seria o fato de que um formulário de edição se parece exatamente com um formulário Criar. E eu não costumo ter os mesmos campos. As operações só serão diferentes porque um está criando dados em um está alterando dados existentes. No entanto, no que diz respeito ao farm, de modo geral, você terá os mesmos conjuntos de campos que você usa para criar que você deseja que o usuário seja capaz de alterar. Tudo bem, então nós vamos começar com um simples e eu vou usar o formulário de criação de microfones, certo? Então o que precisamos fazer é criar um componente que tenha esse formulário nele para começar. Então eu vou clicar com o botão direito no mix e eu vou ir em frente e adicionar um componente de navalha. Vou chamá-lo de componentes da fazenda, nada muito chique. Tudo bem. E depois espero que isso seja auto-explicativo. É um componente para o formulário. E o que queremos neste componente de formulário é o formulário de edição real. Então, tudo o que foi para o, para o formulário de edição que colocamos em nosso componente Criar. Queremos que tudo isso, pelo menos aquela parte, as peças reutilizáveis estejam em nossos controladores de forma, componentes do farm, desculpe. Então eu vou remover este HTML e substituí-lo com o formulário de edição. E tudo é praticamente permanece o mesmo. Mas também queremos especificar certos parâmetros para este componente. Ou seja, podemos configurar os nossos componentes de tal forma que, quando o invocamos, passamos valores. Então, da mesma forma que eu iria editar fórum, nós dissemos modelo é igual a algo no envio válido é igual a algo. Estes são realmente apenas valores de parâmetro que são cozidos no componente de edição de formulário. Então meu componente, que é componente de criação, precisa ter um parâmetro. Então, chaves quadradas abertas escrevem o parâmetro da palavra e então eu vou dizer que ele deve tomar um parâmetro do tipo mic com o nome mic que vai corresponder com esse modelo que é passado dentro. Certo, Próximo parâmetro, queremos algo para determinar o texto do botão porque este é um fazendas razoáveis, então eu não quero que ele diga me criar o tempo todo, caso eu esteja realmente editando. Tudo bem, então queremos definir contextualmente o que leva, fica impresso botões abertos. Eu tenho um parâmetro chamado texto botão, que é do tipo string. E ele vai ter um valor padrão de salvar. Então isso significa que se eu não fornecer um valor para esse parâmetro, então ele vai apenas dizer Salvar, caso contrário nós podemos substituí-lo. Então eu posso saber, substituir este texto estático pelo texto dinâmico que está sendo dito por qualquer Vale que seja passado. E mais uma vez. Isso é definir um valor padrão de C se nenhum valor for passado. O terceiro parâmetro que vou ter é um chamado em envio válido. E este vai ser do tipo evento chamado Bach. Então isso é como um delegado manipulador de eventos para ver, ok, que método devo chamar isso no lugar disso. Então submissão inválida, é o que estou chamando de parâmetro. Então eu vou dizer envio inválido é igual a no sinal em envios válidos. Então isso significa que quando alguém chama este componente de formulário, eles podem fornecer um objeto de microfone. Se estiver vazio, queremos supor que eles estão prestes a criar um. Se ele estiver preenchido, então assumimos que eles estão prestes a editar um. Tudo bem? Se eles passam, eles podem ver, bem, quando eu estou editando, eu queria dizer Salvar alterações. Se estou criando, eu queria dizer criar, seja lá o que for. Se eles não impedirem este, nós temos um valor padrão de qualquer maneira. E, em seguida, este parâmetro está vendo qual método devo chamar. Então, seja qual for o nome do método é passado aqui, esse é o método que enviar inválido vamos chamar. Então esse é o nosso componente do antebraço. Agora temos um pouco de refatoração para fazer tanto para a edição, bem para o nosso cria o que me permite configurar a página de edição primeiro para que você possa ver exatamente como ela se vincula. E então podemos voltar e modificar nossas criações. Então, na mesma mistura, vamos em frente e adicionar RAs são componentes e vamos chamá-lo de editar, editar ponto, navalha. Tudo bem, e então vamos em frente e injetamos a coisa usual, bem como definimos nossa página raiz dois. Portanto, o pH é igual à edição de barra de MC slosh. E então estamos especificando aqui que esperamos um parâmetro. Então este id dois-pontos em DC e eu preciso de um parâmetro que quer referido como ID. E deve ser do tipo int. Tudo bem, então há um parâmetro de palavra-chave, então eu preciso dizer a este componente mais uma vez, que é ele precisa de um parâmetro e eu vou chamá-lo de parâmetro public int id. Então este nome de propriedade tem que corresponder com qualquer nome que eu estou definindo no topo aqui. E isso iria apenas definir isso para ficar e sentar. Muito bem, a seguir, preciso de me definir. Então MC ou um objeto de mim é igual a uma nova instância. E então a primeira coisa que eu preciso fazer quando meu componente carrega é buscar o necessário que é a morada dele para ser editado. Portanto, lembre-se de que quando você estiver editando, isso significa que os dados existem. Então isso significa que eu preciso ir e obter o registro com o ID que foi fornecido porque a pessoa teria clicado em um e disse, Eu quero editar este registro. A identificação é cinco, precisamos daquele cartão vermelho, então eu vou colocar protegido está vendo sobreposição para a tarefa no parâmetro. Sit é dizer, tudo bem, tão protegido Assíncrono sobre uma tarefa. Parâmetros definidos. Parece que isso significa que uma vez que os parâmetros fornecidos, o que devo fazer? Então note que nos anteriores nós provavelmente tivemos em inicializado, então ele não está sendo usado aqui. Está bem. Bem, então nesta situação, eu não quero isso em não inicializado, eu quero ele para cima e quando há um parâmetro sentar, Tudo bem, então em parâmetros definidos é afundar. O que eu quero fazer? Acho que estou perdendo um “S” aqui. Perímetros ajustam uma semente. Lá vamos nós, direto. Então lá vamos nós, Basta pegar o cartão giratório em parâmetros, sentar-se assíncrono. Então, uma vez que eu quero fazer agora é preencher meu objeto de microfone com uma chamada para a lata eu int ponto, e então obter de JSON é pia foi eu queria obter o registro direito e eu quero que ele serializar como um microfone. E então eu vou chamar pontos finais. E este é MC, então é o ponto final do microfone faz pontos finais, certo? Então esse é o nosso ponto final que estamos chamando. Mas então eu precisava passar a identidade também, certo? Então isso significa que eu preciso tipo de formato ou aplicar um pouco mais de delicadeza a este endpoint. Porque lembre-se que nosso endpoint GET, deixe-me apenas passar para misturar e mostrar que recebe endpoint. Mais uma vez, estamos à procura desta. Então, ou pode ser cinco, certo? Por isso, temos de ser capazes de chamar este ponto de extremidade específico. Então, para formatá-lo, vou usar interpolação. Então eu vou atribuir e embrulhar estes nesta festa com chaves. Então estamos chamando o ponto final. Tudo bem? E deixe-me escrever seu objetivo e, em seguida, cortar, porque eu não tenho barras nos endpoints. Lá vamos nós. Lembrem-se que removemos os cortes, então dizemos “slash”. E então eu vou passar o valor ID. Lá vamos nós. Muito bem, tão semelhante à forma como modificamos o microfone e preciso fechar as aspas. Lá vamos nós. A próxima coisa que quero fazer é definir o que deve acontecer depois de clicarmos nesse botão. Então lembre-se que não começamos a olhar para o poder visual, apenas codificando as coisas dos eventos. E então eu vou mostrar a vocês como podemos alavancar essa arte componente. Vou chamar essa tarefa assíncrona, me edite. Tudo bem, então quando, quando, quando clicamos em Enviar no formulário de edição, eu queria chamar editar make. O que eu quero fazer? Bem, eu vou dizer, eu vou esperar meu cliente ligar para colocar como JSON assíncrono, e sentar. Então, o cliente já tem verbo. O que estou colocando? Bem, em primeiro lugar, qual é a URL? Então minha URL seria endpoints, dot mic faz endpoint. E então os dados que estou colocando o seriam o próximo parâmetro, que seria feito. Tudo bem? Porque lembre-se que estamos namorando, então eu tenho que fornecer o objeto com os dados. Acabamos de pegar o objeto. Você teria sido editado e saber que clique em Enviar, vamos atender a esta chamada e dizer executar um PUT usando esses dados nesse endpoint. Certo? Depois disso, eu quero navegar alguém, apenas dizer, desculpe gerente suficiente, Pontos, navega ferramenta e, em seguida, apenas navegar para casa. Assim como o que fizemos na Create. Certo, direto para a frente. Mais uma vez, estamos aceitando apartamentos são chamados ID e este link, este URL ou adquire esse parâmetro. Definimos ou objeto de microfone e inicializá-lo. E então nós preenchê-lo quer que os medidores de energia estão prontos para uso. E então vamos em frente e fazemos nossas edições. No entanto, e as coisas visuais? Ainda não fizemos nada além desta etiqueta H3, certo? Então, para o formulário, posso chamar meus componentes da fazenda, certo? Então sim, quando editar formulário, mas como determinamos, editar formulário é realmente apenas o fórum interno onde a validação de dados e anotações em tal, temos os campos e, em seguida, temos o botão. Todas essas coisas são comuns entre a edição e a criação. Então nós colocá-lo neste componente formulário e agora podemos chamar componentes formais e olhar para este nó. Eu posso fornecer valores para o nosso texto de botão e envio inválido. Lembre-se que esses são parâmetros que dissemos que queríamos texto botão direito e no envio válido. Então vamos passo a passo. Então, texto de botão, talvez eu queira que meu botão veja a direita. E então para o envio inválido, eu preciso fornecer a função que deve ser chamada assim que apertarmos o botão. Então submissão inválida, você sabe que uma vez que apertarmos o botão ele vai para enviar não válido e chamar qualquer função que colocamos aqui. Isso é o que ele faz na criação. Se nós apenas voltar para o Criar, isso é o que aqueles vermelho no envio válido cria microfone. Salta, não e vai aqui. Isso é codificado. Precisava de dinâmica porque não sei se estou criando edição RFM. Então, a partir do componente edit borracha, eu estou chamando este componente de formulário dinâmico e esta dinâmica, este parâmetro. Vou dizer a ele que eu queria ligar para editar microfone. Então esse é o método que eu quero este componente de formulário para chamar quando há um envio válido. E então o último parâmetro que eu preciso fornecer é make, porque eu vi isso. Deixa-me encontrá-la outra vez. O modelo vai ser igual ao sinal microfone, certo? Então ele está esperando algum microfone ou algum valor ambiental do tipo microfone. Então, vou passar no manso que sentimos que não ouvem, certo? Então. Este era um MC igual a MC. E então eu vou fechar esse parâmetro, me livrar de todos esses erros que podem colocar no lado de fora e eles estão certos. Lá vamos nós. Então coloque nossos anúncios. No entanto, faça-me a mim e à nossa actualização. Tudo bem. Deixe-me apenas verificar se eu tinha um link para a edição em. Sim, eu fiz. Então, misture barra, edite barra. E é por isso que passamos o ID do microfone mais uma vez porque o definimos para pegar esse parâmetro. Então vamos ficar ou editar para uma rodada. Tudo bem, então onde está a nossa lista de mistura. E eu vou apenas criar um novo. Então este era suposto ser a Honda, mas cometemos um erro ou uma rotunda pelo iPhone. - Não. Isso está tudo bem. Deixe-me pensar em algo é que ainda não temos Jaguar. Tudo bem, então é jaguar. Jaguar, então preciso editá-lo. Então eu vou bater na minha edição e olhar para onde vamos. Então este formulário idêntico ao formulário de criação, não faz sentido. Escrevemos esta quinta duas vezes. Tudo bem? Quero dizer, talvez a situação possa exigir isso. E se isso acontecer, então os mesmos princípios que você acabou de usar no formulário de criação, você pode reaplicá-los no formulário de edição, a tag de formulário de edição, e você sabe, todos os campos que você precisa e tudo bem nesta situação, Eu não preciso, eu não quero ter que escrever duas vezes. Tudo bem. Então eu vou apenas mudar essa atualização e olhar para isso. Está bem. Não funcionou todo o pedágio que ela esperava. Vamos dar um passo atrás e avaliar. Então eu estou olhando para trás para o código e eu acho que eu vejo qual é o problema. Nós não formamos este URL corretamente, então meu erro, deixe-me apenas voltar para o put, desculpe, arquivo errado, mas para o método put no controlador mix. E o que ele deve ter é a URL com esse parâmetro ID. Então foi isso que fizemos incorretamente. Então deixe-me apenas recuar. E a URL realmente precisa se parecer com isso. Tudo bem, então eu vou apenas usar isso e substituir isso faz partes de endpoint de sua barra ID porque nós temos que passar no valor ID como ele é usado para alguma validação distante ao longo do caminho. Tudo bem, então nós vamos ter que fazer isso e, em seguida, passar os dados para ser atualizado também. Então vamos tentar isso mais uma vez. Então eu vou entrar, editar Jaguar, colocar o r, e então nós clicar em Atualizar, e lá temos ele sendo atualizado. Então era apenas um problema de URL. Mas vemos como podemos usar nossos componentes reutilizáveis para facilitar a edição. Agora, uma vez que é dolorido utilizável, o ponto disso é que eu posso saber refatorar nosso PJ cria para usar esses componentes do formulário. E a vantagem disso, mais uma vez, é que temos menos sistema policial mantido. Porque se amanhã soubermos que há outro campo que precisa entrar no banco de dados. E, claro, se ele está no banco de dados, então ele provavelmente precisa estar nas telas de criação e edição. Em seguida, em vez de ter duas formas para modificar, nós apenas temos o componente formulário. Então, para o Criar, eu posso realmente apenas remover tudo isso e fazer referência mais uma vez ao componente de formulário. E apenas preenchendo o resto dos parâmetros eu teria que o botão leva o microfone, o microfone sendo igual a mim. Mais uma vez, este objeto que inicializamos, percebe que está vazio, não estamos consertando nada. Então, quando ele passa, ele não tem dados para pré-carregar em nosso componente. E, em seguida, no envio válido, chamamos o método create MC. Tudo bem, então vamos criar mais um manso e depois editá-lo e nós podemos enviar fora deste ativo. Então eu vou criar um novo microfone. Desta vez vamos fazer alto no dia criar, fazer. Nossos anúncios são novos. Componente de formulário está trabalhando para a criação. E bem, eu deveria ter colocado um erro de ortografia para justificá-lo. Então eu vou apenas modificá-lo. Clique em Atualizar. Lá vamos nós. E então eu disse, Oh, eu cometi um erro. Deixe-me modificá-lo novamente. E deixe-me fazer isso de novo. Pegue todos esses extras e lá vamos nós. Portanto, nenhum componente reutilizável para a nossa fazenda. Então o desafio aqui é ir em frente e fazer esses componentes semelhantes para todas as outras entidades ou recursos que precisaremos manter. E vá em frente e refatore o Criar e crie também a edição para usar os componentes do formulário. Quando voltarmos, podemos comparar notas. 29. Formulário de atualização de configuração — Parte 2: Ei pessoal, bem-vindos de volta. Então, nesta lição, vamos apenas comparar notas. Eu só vou orientá-lo através do código que eu implementei e espero que você também tenha feito isso, mas eu vou estar lhe dando, é claro, jardins no caso de você enfrentar dificuldades e caminhar através do código devagar o suficiente para que você possa na verdade copiado se for necessário. Então vamos começar com os mais fáceis, que seriam cores e modelos, porque as cores em modelos basicamente têm tão poucos dados quanto o mix tem. Então o mesmo componente de formulário, coisas que fizemos para mim X e então nós refletimos ou, ou criamos e nossa edição para usar apenas esse componente de formulário é a mesma coisa para modelos, certo? Para o componente de formulário, a única coisa que tivemos que mudar tudo foi uma diversão. Agora estamos lidando com eles modelo, certo? Tudo o resto praticamente o mesmo. E, em seguida, no Criar, vemos que eu não alterei as atualizações de firma de texto do botão. Eu preciso dizer Criar modelo aqui. Tudo bem, é uma boa, estamos passando por esta revisão, mas esse componente chamado é idêntico como é o da edição. Certo, e então o código é praticamente idêntico. Estamos à espera da mesma identificação. Nós nos certificamos de que nosso pH está indo para o que quer que seja, barra, editar barra com o id sendo int. E fizemos isso como parâmetro. Chamamos o modelo a ser editado. E então vamos em frente e chamar nosso PUT com os modelos e apontar com barra ID com o modelo a ser editado. E então navegamos de volta para nossa página de módulos. Muito bem, basicamente entre modelos, mixagens e cores, a única diferença no código é a classe real e o nome do objeto que está sendo usado. O resto é praticamente o mesmo. E também os pontos finais, é claro, sem veículos. Todas as séries diferentes que é uma forma mais complexa. Então o formulário de Cria, nós colocamos dentro de nosso componente de forma. O que você também notaria que estou injetando o cliente HTTP. Certo, por que estou injetando essa tendência? Porque no formulário original, precisamos que ele carregue até três listas suspensas. Então todo esse código do Create, como não pegamos nesta rota? Nós realmente teria que repetir estes na página de edição porque ambos precisam dessa lista de valores na frente. Então, o que fizemos é que tiramos esse código da creatina, vamos colocá-lo nos componentes da fazenda. E um componente de formulário lida com a preparação do formulário e todos os dados e necessidades na frente, ainda temos nossos parâmetros para nossos dados. O botão leva bem como o método de retorno de chamada de evento, certo? E na criação, nossos clientes entram em ação quando temos que enviar os dados via post como JSON chamada, bem como na página de edição quando temos que pré-carregar os dados um e, em seguida, enviar os dados atualizados. Mais uma vez, nossos endpoints mudam de acordo. Então você vê, estamos juntando tudo, tornando a aplicação um pouco mais sustentável, menos pontos de contato quando há mudanças a serem feitas e onde tirar proveito de blazer inteiro nos permite ser muito modular em nossa abordagem na construção de qualquer aplicativo. Clientes. Bastante simples. Formulário simples foi usado, sem necessidade extra para qualquer cliente aqui para qualquer pré-carregamento de dados. Então o código de criação parece da mesma maneira apenas com o componente do antebraço bem ali. E o formulário de edição é praticamente a mesma coisa. Tudo bem? Não. Quando se trata de reservas, tivemos que fazer um pouco mais. Bem, as reservas completas estão fazendo o mesmo que fizemos para nossos veículos, certo? Porque da mesma forma que tivemos que pré-carregar a lista da lista de veículos e a lista de clientes, a fim de fazer uma reserva. Então tivemos que injetar nosso cliente no componente do antebraço e então fazer o nosso não inicializado. Então pegamos tudo isso do componente Criar. Repare que não tem isso não inicializado. Ele não tem nada para colocá-lo no componente de forma. E, em seguida, temos o nosso cabo cria apenas como este, e o nosso código de edição com este aspecto. Tudo bem, então isso é uma corrida rápida para aborrecê-lo até a morte explicando e explicando demais porque o conceito teria sido explicado na lição anterior. Esta é a implementação, é claro, você pode passar e pausar como você precisa copiar o que você não tem tanta certeza sobre. Mas o que eu quero salientar é que eu criei outros componentes. Então, na minha pasta de componentes, lembre-se quando estamos enganando nossos próprios componentes, inicialmente, cria uma pasta de componentes e eu criei essa amostra. Bem, eu criei outro chamado “Buck to List Dot Borracha”. Então deixe-me mostrar onde é usado. modo geral, se eu pousar na página de criação ou edição, há uma chance de eu não querer realmente criar nada, nossa edição qualquer coisa. Então eu queria voltar para a lista. Então eu teria que replicar esse corredor de botão em todos os formulários e alterar a URL onde eu queria ir com eles quando usar a tag âncora e digitar manualmente a URL. Ou eu não vou ver o gerenciador de navegação de um clique ir para esse URL específico, certo? Então, em vez de repetir esse código em todas as páginas, o que eu fiz foi criar um dólar para listar componentes. E então isso leva um parâmetro chamado target. E então tudo o que eu estou fazendo é colocar na página específica relativa a onde eu estou. Então, se eu estiver no formulário de reservas, então meu dinheiro para listar seria para a lista de reservas. Certo? E então isso muda por componentes. Então, para os clientes é a mesma coisa apenas buffed para listar clientes. Para qual é este? Este é para os veículos, é a mesma coisa, mas listar veículos. Então vamos olhar para Buck para listar. Ele segue o mesmo tipo de padrão como um componente que requer um parâmetro e todos um, eu não estou navegando através de seu eu não tenho fora e pH como qualquer coisa. Estou injetando meu gerenciador de navegação. Tudo o que eu tenho aqui é um botão que eu estilizei. Quero dizer, este estilo pode não ser o que você quer, mas você veria seu aplicativo, você modificá-lo ou você sente. Mas eu estou estilizando este botão para ser um botão escuro on-line, btn block. E eu defini esse evento onclick para este botão. Tudo bem, então sempre que este botão é clicado, ele vai, cara, chamado este método. Tomou o parâmetro. Então nós já passamos por parâmetros quando dissemos para formar componente, certo? Então eu estou tomando departamentos são chamados de alvos, é por isso que podemos especificar alvos e apenas passar nessa string. Então, quando esse botão é clicado, vamos descer para este método e ver gerenciador de navegação e navegar para. Tudo bem, nós usamos esses, que esse método já sabemos como navegar dois trabalhos. Mas então eu vou carregar dinamicamente o BaseURL de todo este aplicativo e nav gerenciar sobre URI base me dá o servidor basicamente. E então eu vou colocar os alvos. Ele vai dizer algo que o localhost dois-pontos, qualquer número de porta que você tem, cortar. Então note que eu não tenho que colocar uma barra aqui porque a barra está implícita através deste valor. E então eu vou apenas para o alvo como especificado através do parâmetro. Então vamos dar uma olhada rápida no que isso parece. Então eu vou voltar para crescer e 0, que é mix, tudo bem, cria um novo veículo e eu sou como, oh snap, eu realmente não quero criar um novo visto. Quero voltar a esta lista, ver onde aterramos microfones de reserva. Se eu for para modelos, mesma coisa, voltar para a lista, voltar para modelos. Se eu acabar na edição, eu realmente não quero voltar para a lista. Tudo bem, então é assim que podemos, mais uma vez fazer nossos aplicativos modulo e não difícil repetir código demais através do Windows cria um componente. Dê parâmetros suficientes para, você sabe, torná-lo dinâmico o suficiente. E então nós apenas conectamos esses parâmetros e nos componentes onde quisermos. Tudo bem, então isso é realmente tudo para esta revisão. Mais uma vez, se você perdeu alguma parte do ajuste ou você teve dificuldade em passar por ele, sinta-se livre para Bach. Bach caminhão através do vídeo em pausa nas diferentes partes e rever o código. Certifique-se de que a ortografia está ao quadrado e todas as suas referências estão corretas. E quando tudo falhar, você sempre pode me ligar se precisar de mais orientação. 30. IMPORTANTES - Fixe campos de auditoria de usuários: Ei pessoal, bem-vindos de volta. Então eu tenho uma solução rápida para nós antes de seguirmos em frente. E isso é sobre esses campos de auditoria. Então você provavelmente notou que no banco de dados, todas as datas estão aparecendo quando criamos. Deixe-me apenas ir em frente e ver os dados de uma das tabelas que as datas estão aparecendo. No entanto, nossos nomes de usuário não são. Portanto, estes provavelmente teriam sido feitos através da API. Isso é bom. Mas a razão pela qual criamos por um atualizado por seria que o usuário conectado no UP seria registrado como a pessoa foi tocada no registro, certo? Não, isso não está acontecendo. Então nós só temos uma correção rápida para fazer e eu vou torná-lo na unidade de trabalho seguro novamente, a escola mas osso para a unidade de trabalho na pasta repositório. E o código original que temos é var usuário é igual a contextos HTTP dot user, dot identity, dot name. Não, a realidade é que eu provavelmente fiquei um pouco zeloso em implementar isso em blazer. Porque isso funciona em MVC, funciona em suas páginas Razor, onde os contextos HTTP geralmente contém as informações do usuário, se ele também é indicado seria transmitido no contexto. E é uma maneira fácil de obter apenas o nome de login do usuário atual. No entanto, na situação de blazer em que não estamos realmente fazendo trabalho na API, pouco estamos fazendo no nível do lado do cliente. Ou que realmente está sendo passado junto é um Tolkien com a inflamação sobre quem ele é. Portanto, este contexto HTTP não tem r. Ele não mantém o usuário conectado porque ele realmente não sabe quem está logado. Não sabemos quem é o cliente. Ou melhor, só conhece o cliente. Que é realmente a inflamação do Tolkien que ele realmente usa para dizer sim, ok, você pode acessar o ponto final. Portanto, este HTTP contextos não usá-lo. Eu nome da entidade não funciona neste contexto, então vamos modificá-lo um pouco. Então eu vou entrar no manto, o código original. E eu já vou ter a correção de citações aqui, que eu vou apenas orientá-lo. Então a primeira linha para a correção é que não estamos recebendo o usuário diretamente onde obter o ID do usuário, porque ele faz Constantine, sendo o token. E o Tolkien, já está analisado para fora no contexto HTTP. Então, podemos detalhar partes da informação token através de contextos HTTP, usuário ponto. Então o usuário é realmente o que vamos chamar de princípios de reivindicações. Então, alegações são basicamente pedaços de informação que nos dizem quem você é, certo? Afirmam que eu afirmo ser isso, eu afirmo ser que isso é o que a alegação é. Assim, o objeto do usuário em vez dos contextos HTTP é um princípio de reivindicações, que é uma coleção das reivindicações de vir do Tolkien sendo enviado para baixo pelo nosso cliente blazer disse interface. Tudo bem, então contextos HTTP, usuário ponto obter todas as reivindicações e agora vamos encontrar a primeira reivindicação. Então, se eu colocar isso no modo de depuração e apenas passar o mouse, você veria que suportável 15 afirmações. E aquele que contém informações úteis sobre quem é o usuário. Será encontrado no identificador de nome do tipo de reivindicação. Então temos uma constante aqui chamada tipos reivindicados, certo? Então, se você começar a digitar isso, você pode ter que incluir uma biblioteca para declarações de pontos de segurança System.Out , tipos de declaração, eles são apenas constantes e nome identifica uma dessas constantes. Tudo bem, então isso vai nos dar o ID do usuário praticamente. E então queremos o valor dessa reivindicação. Portanto, este creme ou o ID do usuário é armazenado ao lado deste tipo de reivindicação. Então, quando encontramos o tipo de afirmação deste identificador de nome de tipo, obter o volume, obtemos o ID de usuário. Agora que temos o ID de usuário, eu não quero armazenar o ID de usuário porque usos podem ser excluídos em todos os dez anos no futuro. Você não quer que o telefone histórico saiba qual usuário teve essa idéia neste momento, provavelmente é mais fácil armazenar o nome de usuário, é por isso que aumentamos para nome aqui, certo? Então eu preciso recuperar esse usuário. Então agora eu tenho a identificação. Eu quero dizer var usuário é igual ao nosso usuário gerente de peso ponto encontrar por ID uma pia. E então passamos esse ID de usuário e, em seguida, obtemos esse objeto de usuário inteiro. Tudo bem? Este objeto de usuário tem tudo sobre o usuário neste momento porque isso foi para o banco de dados e recuperar esse cartão vermelho de nossa velocidade que os usuários tabela. Então FirstName, LastName, qualquer coisa que tínhamos colocado no usuário do aplicativo é saber este objeto para que você possa armazenar o que quiser. Só estou fazendo sugestões. Saiba se você já digitou gerenciador de usuários e está recebendo setas. Isso é porque precisamos injetar o monitor do usuário também. E bem, você sabe, se estamos injetando, isso teria que inicializá-lo como de costume, certo? Mas, em seguida, isso é no contexto do usuário do aplicativo. Tudo bem, Então Gerenciador de Usuários no contexto do usuário do aplicativo dar ao objeto o nome injetado para inicializá-lo, e então podemos usá-lo livremente. Use um gerenciador como uma variável para biblioteca que tem uma série de recursos e funções para encontrar usuários sobre o uso de inflamação à vontade. Então, depois que sabemos ter todo o objeto usuário, não precisamos dizer atualizado por Anne e eu posso ver ponto usuário. E como eu disse, você pode obter qualquer informação sobre o usuário através deste objeto. Então, se quiser guardar o endereço de e-mail, primeiro nome, sobrenome, o que quer que queira guardar, tudo bem para mim. Só vou guardar o nome de usuário. O nome de usuário é o mesmo que o endereço de e-mail ou não. Eu queria armazenar o nome de usuário da pessoa que neste momento fez essa opção. Então, sempre que isso acontece, eu sei quem é e então é excretado NO2, quem é. Então vamos apenas executar um teste rápido para ter certeza de que nossos trabalhos fixos. Tudo bem, alguém notou isso criando um novo microfone e você vê que eu tenho um teste de negócios registrado no Blazerer.com. Então outro microfone de um veículo seria, digamos fiat, peneira. Muito bem, o fogo está guardado. Vamos olhar para trás em sua aplicação. Vá para ver os dados. E agora você está vendo aquela inflamação de auditoria. Então, aqueles que faltam para os testes anteriores e não, daqui para frente, deve estar tudo bem. Certo. 31. IMPORTANTES - Fixe a edição do veículo: Ei pessoal, bem-vindos de volta. Nesta lição, vamos realizar uma correção de bugs essencial. E esse bug está centrado em torno dos veículos e provavelmente qualquer outra operação de edição que tenha uma lista suspensa. Então a anomalia atual é que mesmo se modificarmos este veículo, se mudarmos qualquer coisa que tenhamos que digitar, será bem sucedido. Mas quando mudamos as listas suspensas, nada muda. Então, se eu quisesse mudar isso de preto para azul, salvaria tudo, mas então ainda rotinaria a origem dos valores. Então, vamos abordar que sabem que o fundo desta questão tem a ver com a maneira como estamos recuperando os dados quando estamos prestes a editar. Então, nele, três ou componentes, o código por trás dele, pelo menos quando temos o componente carregando, nós temos o veículo agora está operando. Nossa API é realmente equipada com todas as inclusões. Então nós estamos realmente incluindo todos os detalhes sobre o que está acontecendo é que esses detalhes são incluídos enquanto os IDs podem mudar os detalhes não. Então, em The put, é realmente apenas receber o novo objeto com todos os detalhes originais incluídos. Então, o que vou fazer nesta lição é introduzido outro ponto final. Então estamos separando o “get” de obter detalhes. Então, no AI HTTP e eu vou apenas orientá-lo através das mudanças que eu fiz até agora. Então, no repositório HTTP, eu introduzi outro comportamento aqui que é obter detalhes. Então tivemos que introduzi-los obter detalhes, que vai tomar os mesmos dois parâmetros que o get, o URL e o ID. E então sua implementação simplesmente acrescentará detalhes de barra ao final. Então é idêntico para obter, exceto que ele vai especificar que queremos os detalhes em vez de apenas obter. Tudo bem. Então, uma vez que você tenha feito isso no componente, você pode ir em frente e, e você modificaria pelo menos os componentes de exibição. Então, o componente Editar não mudaria porque já está recebendo, tudo bem. Mas, em seguida, o componente view, que é onde nós realmente precisamos ver detalhes de qualquer componente ou qualquer objeto que ele é. Na verdade, vamos dizer “obter detalhes”. Portanto, embora isso seja específico para veículos, isso também pode aplicá-lo a outros objetos com os quais você possa estar trabalhando. Nossos outros relacionamentos com os quais você pode estar trabalhando. Se você estiver visualizando os detalhes de um objeto que tem relacionamentos e precisar obter Buck incluído propriedades de navegação são incluídos detalhes de outras tabelas. Então você provavelmente vai querer dividi-los tudo isso. Então, agora que modificamos isso no cliente, então vamos olhar para o que precisamos fazer no controlador ou controladores. Sei que especifiquei um traje de traje, então temos o original get. E o que eu fiz foi eliminar todos os Incluídos. Então, no parâmetro inclusões que veio cortesia de nossa unidade de trabalho, eu retirei isso completamente. Então é realmente ir e pegar o veículo e devolver apenas aquele objeto, sem detalhes extras ou qualquer coisa. No entanto, quando vemos obter detalhes, ele vai chamar ID cortar a palavra detalhes. Na verdade, esse endpoint seria realmente algo parecido com isso quando ele é tocado. Também seria api barra, barra 05 cortar os detalhes da palavra. Então eu realmente não preciso das chaves porque isso representaria mais como um parâmetro do vale. Então, são literalmente os detalhes da palavra que eu espero depois da identificação. Então, para este, ainda estamos tomando apenas um parâmetro. Eu dei-lhe um nome diferente, claro, porque não podemos ter um confronto diz que me pode ser caudas. E, em seguida, este tem essa consulta completa com que inclui parâmetro envolvido na operação. Então, quando este veículo é devolvido, é devolvido com todos os detalhes incluídos. Então vamos declarar isso para um teste. Então, da nossa lista de veículos, vou até os componentes do Vue. Então eu coloquei um ponto de ruptura no final do espectador. E se você olhar para os dados que serão retornados, ele tem aqueles incluídos, o make o modelo e o que mais pode ter sido especificado, certo, Então isso é bom porque eu estou prestes a vê-lo. Então eu vou querer incluir todos os detalhes de outras tabelas para tê-lo pronto para apresentação. E se eu for para Edit, você verá que as tetas, as originais ficam. E então este get é apenas devolver o veículo com os campos relevantes, não com nada adicional. Então make IS null, model é null e qualquer coisa que teria sido incluída originalmente é não, não. Então eu vou em frente e mudar todas essas listas suspensas para algo diferente. Então isso agora vai ser X5 e é verde. E eu vou clicar em Atualizar. E então quando eu olho eu vejo high-end dia X5 e foi bem sucedido. Então essa é a solução para esse problema de edição. Se você tinha, se você não tinha, então tudo bem, você detecta cedo e resolveu. Excelente trabalho. Mas fazendo o processo contínuo de desenvolvimento de software, você verá essas anomalias em alguma forma de testes. E é sempre bom quando você pode descobrir como resolvê-los. 32. Adicione Validação com formulários: Ei pessoal, bem-vindos de volta. Nesta lição, vamos estar olhando para a validação. A validação é muito importante. Ou a realidade neste momento é que não sabemos o que o usuário está entrando. Nós não sabemos se eles estão entrando pontos de dados são que nós realmente achamos que são importantes. Porque, por exemplo, aqui estamos com criar novo cliente. Eu posso inserir talvez apenas um pouco de dados, nada mais. E, em seguida, clique em Criar personalizado Anna, obtemos dados muito incompletos indo para o banco de dados que está sendo exibido para o usuário. Isso não faz nenhum sentido. Precisamos adicionar validação para garantir que os dados atendam a certos requisitos antes que possam ser enviados ou antes que o usuário possa prosseguir para inserir esses dados ruins em nosso sistema. É claro que a validação com depois ocorre no formulário de criação, bem como no nosso formulário de edição. Porque da mesma forma que eles podem colocar em dados incompletos, eles podem ir para um completo nosso completo ou adquirido e remoto, remover dados vitais e, em seguida, atualizá-lo. E então ainda estamos na mesma situação para que a validação tenha que ocorrer em qualquer coisa que esteja coletando dados. Então, para este exemplo, vamos estar usando clientes. Para a nossa cobaia. O que eu fiz foi adicionar dois novos campos, nome e sobrenome. O cliente da classe de dados, que estava todo o caminho para baixo em compartilhado. Telefonamos para o cliente, adicionamos esses dois campos. E então fomos para o gerenciador de pacotes, tivemos uma conta falhou, mas então eu adicionei a migração e depois fui em frente e atualizei um banco de dados e então sabemos que podemos coletar FirstName e LastName. E, assim, a unidade do ponto inicial sobre quando fazemos alterações no banco de dados, como neste exemplo. E temos que atualizar a interface para refletir que quando temos um conteúdo componente com para coleta de dados, isso torna a vida muito mais fácil. Então eu vou apenas encontrar nossos clientes formam componentes. E então eu posso literalmente adicionar os dois campos aqui. E eles serão aplicáveis tanto para a edição quanto para o Creates. Então deixe-me me apressar e fazer isso. Então, por um tempo não foi visto que poderíamos adicionar mais pontos de dados para os clientes como FirstName, LastName se você não fez isso antes e você quer fazê-lo náusea chance eles podem ir em frente e fazer o material de migração adicionado para a interface como você achar melhor. E eu vou apenas modificar o índice também. Então eu não sou de mostrar o smoking. Eu acho que tudo o que realmente precisamos exibir é talvez como o nome completo do cliente, certo? E, em seguida, aqui eu posso ver o espaço do cliente FirstName ao dizer o sobrenome do cliente. Então temos o nome completo sendo impresso em uma coluna. Tudo bem, agradável e fácil. E então você pode literalmente ver a vista onde você vai e ver os detalhes. Então essa é a mudança do PICQUIC. Então deixe-me focar nesta lição que é validação quando estamos preenchendo este formulário. E você percebe que quando estamos criando o formulário, agora podemos colocar em algumas coisas que eu perco a validação, mas não está funcionando. Então precisamos deixar a lei formar, que regras deve viver. Para realizar essa validação, vejo esses dados de palavra-chave em notações. Tudo bem, então anotações de dados são nossa maneira de especificar regras para os diferentes campos. Tudo bem, então o que estamos colocando em um novo cliente, precisamos colocar em FirstName e Sobrenome. Precisamos colocar um número de identificação fiscal. Temos que ter um endereço de e-mail e um endereço de e-mail legítimo onde o número de contato deve estar, mas talvez esse vestido seja opcional. Então vamos trabalhar com isso. Situações diferentes exigem regras diferentes, mas mais uma vez, esta é a nossa experiência para isso hoje. Então eu vou para os dados, falar conosco a partir do qual este formulário é derivado radicais, sabemos que ele está usando objeto cliente, que é do tipo clientes. Assim, a classe de dados está definindo os campos que podem ser coletados. Então, para adicionar anotações de dados acima do campo, vou apenas abrir colchetes e, em seguida, começar a digitar. E há certas palavras-chave, não é, eles vão começar a digitar. Então, se eu quiser fazer algo necessário, I, tipo II e necessário, mas depois desta biblioteca de anotações, e uma vez que é adicionado, você vê Nalgene. Então qualquer campo que eu estou vendo é obrigatório pode obter o TOD necessário acima dele. Tudo bem, isso exigiu anotação de dados. Então, o endereço, eu disse que não é obrigatório. Então eu vou apenas colocar um espaço lá para que você veja esse endereço aqueles ou ter aquela bandeira necessária acima dele. Então FirstName é definitivamente necessário. Outra coisa que eu poderia dizer sobre o primeiro tema é que o comprimento da corda deve ser máximo, talvez 100, certo? E talvez no mínimo. Então eu posso apenas dizer mini mãe, comprimento é igual ao comprimento mínimo enquanto FirstName que é colocado em três, você sabe, pode ser jóia ou vamos colocá-lo em dois. Tudo bem. J. Oh, essa é a semelhança de comprimento mínimo para o sobrenome. Comprimento mínimo de dois, certo? Você pode não necessariamente memorizar todas essas anotações. Há momentos em que tenho de ir ver o que são. Mas a questão é que eles estão lá. E esta é a maneira mais fácil de especificar as regras que regem cada campo. E outra coisa sobre isso é que às vezes essas anotações realmente afetam o banco de dados. Então, se eu fiz isso antes da migração, então ele realmente faria algumas demandas de espera as ações dessas tabelas devem ser projetadas ou geradas com base em Sinto muito, manter esses campos nas tabelas de banco de dados deve ser gerado e que constrangimentos nossa própria eles. Mas vamos nos concentrar na validação do lado do cliente ou sem toxicidade. Deixe isso em paz. Mas, novamente, eu poderia dizer um comprimento mínimo, comprimento máximo de talvez 10, e comprimento mínimo de talvez oito, certo? Dependendo das IDs de smoking que estavam suportando. Tudo bem. Outra coisa que você provavelmente gostaria de fazer é com um número de contato, você pode dizer algo como tipo de dados. Ponto quatro números, então tipo de dados e, em seguida, eu estou especificando que este tipo de dados é do tipo número de telefone. Tudo bem, essas são as duas coisas que informam nível os campos como para endereço de e-mail, Eu só vou copiar e colar, mas há um tipo de dados que diz endereço de e-mail. Então, ele vai tentar validar estes em geral Rosie pode obter mais específico e escrever suas próprias anotações e validações e atributos. Mas eu não vou entrar tão profundamente nisso. E certo, não, isso parece bom o suficiente. Vamos fazer uma migração e ver o que aparece. Adicionamos validações, doadores tão próximos. Vamos ver. Então, neste arquivo de migração é gerado, você verá que um monte de colunas alter commons de Gamal cinza e cada um está vendo, ok, e o tipo é int varchar 15, o máximo emprestado você verá que um monte de colunas alter commons de Gamal cinza e cada um está vendo, ok, e o tipo é int varchar 15, é 15, fototoxicidade. Certo, então os atributos de validação na própria classe Data afetarão a migração, certo? Isso pode não ser necessariamente o que você quer. É hora por essa razão. Quando você chega a aplicativos maiores, você está iniciando a abstração e a criação de camadas. Então você tem a classe de dados e, em seguida, você tem outra camada para os aplicativos para obstruir as classes de dados para esta aplicação fins. E isso geralmente é onde você coloca suas validações porque você pode não necessariamente querer ver invalidações entre o banco de dados e o lado do cliente. No entanto, nesta situação, já que estamos apenas usando essas classes de domínio compartilhado, e não é realmente tão prejudicial considerando que se eu for para a tela é no nível da interface, eu provavelmente quero que o banco de dados rejeitá-lo se ele tem de qualquer maneira, certo? Então é isso que obtemos quando fazemos uma migração em uma tabela que tem R em uma cruz, desculpe, que tem essas anotações de dados e regras de validação. Agora eu posso ir em frente e atualizar o banco de dados porque ele não vai fazer nenhum mal. Mas o verdadeiro teste para esta lição é o que acontece na interface. Aqui estou pegando algumas flechas. Essas setas são porque ele diz que não pode inserir o valor null em uma coluna Touch ID, certo? Porque aqui eu disse ID fiscal é necessário como resultado, ele está modificando-o e vendo que não é anulável, enviar um banco de dados NÃO nulo seria, desculpe, nulo, nulo estaria marcado. Então não posso passar nulo. Mas eu fiz anteriormente remover alguns dados da coluna ID docs. Então é por isso que a migração sente que estou apenas explicando para você. Tudo bem. De qualquer forma, vamos corrigi-lo no nível da interface e, em seguida, podemos voltar a essa migração mais tarde. Certo, então nosso número um com uma toalha que são validações funcionando embora isso não é exatamente como eu queria demonstrar. Mas veja você está recebendo um erro aqui. Então, estamos recebendo um erro não tratado quando somos tendências e carregamos os clientes, percebemos que começamos olhando para os clientes, então ele estava funcionando. Mas quando vamos para o console do nosso navegador, vemos aqui onde estamos recebendo nossa resposta 500. Então, a lança, alguma dor de cabeça? O que realmente está acontecendo aqui é que temos os dados inválidos. O banco de dados está consultando o Beta inválido. E então todo esse erro, erro, um dado completo, está chegando até nossa interface. A API é Tolkien porque o banco de dados não sabe o que fazer porque ele vê um monte de regras e está recebendo dados inválidos, certo? Então o que eu vou fazer é limpar os dados inválidos, significando os registros dos quais eu removi os dados vitais. Então eu vou pular para o explorador de objetos. E o que eu vou fazer é apenas remover coisas que as reservas estão relacionadas, então eu tenho que remover qual é o nome do nosso banco de dados? Lá vamos nós. Terei que remover as reservas assim como os clientes, certo? Então deixe-me sentir os dados rapidamente. Ok, eu só tenho uma reserva de qualquer maneira. Esta visualização de dados aqui. E assim você vê aqui nós temos nulo, nulo, nada no endereço de e-mail e Touch ID não-linear. É isso que está causando os problemas. Então deixe-me remover esses dois. Na reserva. Isso é para um cliente com ID 1. Ok. Então eu removo 23. Esses são os problemas das ferramentas. Tudo bem. Vamos tentar isto. Ainda tenho o aerossol ligado para fazer o primeiro nome e sobrenome esquecíveis. Então eu só adicionei cliente de teste. E quando voltamos, vemos que nosso pH está carregando corretamente. Não. Então você vê a validação. Se houver dados inválidos, então ele não será capaz de processar o que está trazendo de volta. Tudo bem, então tudo está bem acoplado. Então, quando criamos um novo usuário, se eu tentei criar um cliente, desculpe, cria um novo cliente e eu tento criar sem colocar nada que você veja aqui que estamos recebendo essa quantidade de erros. Então, isso, deixe-me apenas sujar caminhão para o código e tipo de executar o paralelo com você sobre o que está acontecendo. Em primeiro lugar, o validador de anotações de dados está vendo, estou olhando para quaisquer dados válidos anotações de dados anexados ao modelo para o qual este formulário é gerado. Tudo bem, nós já examinamos todas as anotações são, essas são anotações. Ele sabe que isso é necessário e esta é a qualidade de dados esperada e tal. Então aquele validador que está no topo da nossa fazenda, você vê, eu estou observando o campo, o valor e quais os requisitos são baseados nos dados, em notações quando você aperta Enviar. Tudo bem. Você está tentando dizer para enviar o formulário para o banco de dados. Nós apenas tratamos de envio não válido, que significa que o envio inválido é modo ímpar automático. Podemos colocar um envio inválido, mas não vamos tão longe. O ponto é que, na submissão, não vai dizer, bem, este é o resumo da validação. Se a página recarregar, o resumo mostrará que a única maneira que a página não recarregaria é se tudo fosse válido e pudesse continuar. Então, quando a página recarrega mostrando esse resumo de validação. E então nós temos que métodos de validação específicos para o campo aparecendo sob cada um, certo? Então nós obtemos isso em cada campo, que essa mensagem pode realmente ser personalizada. Porque no necessário podemos colocar mensagem é 0, mensagem de erro. Lá vamos nós. E podíamos ver algo como TR, smoking. Eu D, tudo bem, então é isso. Então, podemos colocá-lo em como uma mensagem personalizada em vez de que um padrão para ver o campo é obrigatório. Você pode colocar essa mensagem de erro com base no requisito. E então basicamente para cada um deles, você pode especificar a mensagem de erro que você deseja, certo? Assim, você pode ver o nome, nosso ID de ações, assim que o ID de dobra não atende aos requisitos de comprimento. Tudo bem, então com essas duas mensagens, eu vou atualizar e eu vou apenas prestar atenção ao campo de identificação fiscal. Certo, recarreguei a página. Tentei de novo e notei enterotoxina, é isso que está aparecendo. Portanto, nossa mensagem personalizada está chegando porque é necessária e nada é fornecido. E se eu colocar um lá, lembre-se que nós dissemos que tem que ser mínimo andar para qualquer terra que a terra era, mas olhe para ele. Não, o Touch ID não atende aos requisitos de comprimento. Assim, a mensagem com quase olhar contextualmente baseado em qual regra está sendo violada naquele momento. Atualmente, se é necessário e não há nada lá, então eu não preciso mencionar requisitos de comprimento e olhar para a mudança automaticamente. Então, se eu começar a encher este velho e chamar este de Archibald, e depois olhar para aquilo. O Douglas. Tudo bem. Tudo bem. E nós enchemos a caixa de transporte. Legal. Se eu disser criar cliente, olhe para isso, mas então o endereço de e-mail ainda não está satisfazendo nossos requisitos. Se eu for para Edit, então precisamos ter certeza de que a validação adequada em nossa EMEA que bebida. Então, para isso, nós realmente precisamos desta anotação que diz endereço de e-mail. Então, sim, podemos ver o tipo de dados. Acho que isso é mais para fins informativos, certo? Mas então, neste momento, estamos vendo bits válidos e endereço de e-mail. E eu acho que para o número de telefone, nós também podemos ver o telefone. Lá vamos nós. Portanto, você tem validações diferentes para diferentes tipos de dados. Eu provavelmente não vai ser tão rigoroso sobre o número de telefone embora, porque eu não tenho certeza que regras a validação está jogando por um, mas nós definitivamente queria ser rigoroso no endereço de e-mail. Então vamos tentar outra vez. Então eu sou Buck na visualização de edição para este cliente, se eu tentei atualizar, observe que ele não vai rejeitar esse endereço de e-mail, não um endereço de e-mail válido depois de ter certeza que eu coloquei em algo que se parece com um típico e- endereço de correio. E então fica satisfeito, eu clico em Atualizar e estamos prontos. Tudo bem, agora que temos dados válidos nesses campos em, em nosso banco de dados, deixe-me tentar executar essa migração novamente. Então a migração é, estão lá, eu só preciso vê-lo atualizar banco de dados. E lá vamos nós, está feito. Então agora todos nós temos os novos campos e as novas restrições são propriedade de todos esses campos, certo? Então, no nível do banco de dados, se você souber sobre design de banco de dados e restrições de desenvolvimento são regras que governam caminhada podem ser armazenadas. Então é assim que você pode especificar usando o código. Primeira abordagem, as regras em torno do que pode ser armazenado em todo o corredor. É quando dizemos n varchar eo tamanho, é assim que você pode determinar o tamanho. Mas, claro, algumas dessas coisas são mais do lado do cliente do que do banco de dados. Tudo bem? Então, a partir de uma perspectiva compartilhada, isso é bom porque nós começamos a especificar segurar o cliente deve se comportar e segurar o banco de dados deve se comportar. Mas, mais uma vez, há momentos em que as regras podem não necessariamente ir para os dois lados nesse ponto, você quer introduzir outro nível de obstrução ou onde quer que os modelos de visualização que regem o lado do cliente ou a interface do usuário faz separado do banco de dados e o que os objetos de domínio fazem. Então, agora que você tem um aperto de buraco para colocar a validação em seus antebraços, você conhece o desafio usual, vá em frente e adicione validações semelhantes às outras tabelas como você achar melhor. Então eu não vou necessariamente rever este com você porque este aqui é mais contextos. Você pode precisar de validações que eu não vejo necessariamente como importantes e vice-versa. Então você vá em frente e veja seus requisitos de dados. Você tem requisitos de negócios, seja lá o que for, você sabe, quiser que seus dados olhem e adicionem suas validações de acordo. 33. Dados de exibição com Blazor - detalhes: Ei pessoal, bem-vindos de volta. Nesta lição, queremos configurar um componente que nos permita visualizar os detalhes de um determinado contexto de registro. Aqui está o nosso cliente. Agora sabemos que quando criamos o cliente, inserimos mais do que apenas 1234 bits de dados. Também inserimos identificação fiscal e endereço. E bem, eu acho que esse é o ponto. O ponto é que queremos ser capazes de ver e é por isso que temos este botão azul aqui que seria para visualização. Então precisamos definir esse componente. Agora, há duas maneiras de pensar sobre isso. Primeiro, ele precisa ser somente leitura porque nós não queremos ir no botão Ver e, em seguida, tem que fazer. Não queremos que seja editável porque estamos vendo os detalhes. Essa é uma também. Como exatamente nós deitamos dito? Uma maneira comum de colocá-lo em um detalhe agradável. Nosso campo para a esquerda, detalhe para o tipo de formato direito. Algumas pessoas realmente apenas reutilizam a mesma fazenda Leo que foi usado na criação e edição e exibi-los, mas de uma forma somente leitura. Então eu acho que vamos usar esse porque esse é realmente fácil de implementar. Você sempre pode mudar seu design. Olá você deseja, mas eu vou mostrar-lhe mais alguns truques e coisas que podemos fazer para estender ou formar componente em relação aos diferentes fins já têm os componentes de formulário criando, nós temos edição agora vamos usá-lo para apenas fazer vista são lidos. Então, usando a seção do cliente como exemplo, vamos em frente e adicionar um novo componente. Você pode chamá-lo de vista ou detalhes de álcool em detalhes. E o que eu acho que usamos a palavra vista. Fizemos nossa cabeça, então deixe-me remover detalhes e fazer isso de novo. Deixe-me criar um novo componente e eu vou chamá-lo vista de acordo com a convenção de nomenclatura que começamos com. Então, nosso componente é chamado de visão. Em nosso componente, teremos que fazer algo parecido com a edição. Então nós definitivamente vamos precisar de todos estes no topo porque precisamos navegar para a página, mas este vai ser View. E então nós vamos ter que ter nosso cliente HTTP, bem como nossa navegação. Bem, provavelmente não precisamos necessariamente do gerenciador de navegação, mas veremos o que fazemos. Nós também precisamos ter certeza de que nós carregamos nossos poços. Então deixe-me apenas copiar tudo isso realmente colocar em nossa visão porque nós vamos estar reutilizando esse componente. Tudo bem? Não, eu estou mantendo tudo isso porque os parâmetros estão chegando, qual cliente eu quero ver? Aceitamos a identificação e depois vamos buscar o cliente. Eu não preciso desta edição, porque a edição vai acontecer neste componente. Vamos nos concentrar nesta seção componentes do formulário um, eu não preciso de um botão leva porque eu realmente não quero um botão para exibir de qualquer maneira, eu não preciso definir isso. Eu não preciso me sentar em um envio válido porque não há nenhuma submissão que vai acontecer. Mas uma coisa que eu adoraria fazer é dizer ao componente de formulário que quando ele está carregando a partir desta página ele deve ser desativado. Então eu vou adicionar um novo parâmetro. Vou chamá-lo de “zibelina”. E isso vai ter um booleano. Ou é verdadeiro ou falso. Ou vai ser desativado ou não. Tudo bem. Observe que é azul porque não modificamos o componente de formulário para reconhecer. Então vamos passar para formar componente e fazer nossa modificação. Então precisamos desse novo parâmetro chamado desabilitado. Bem, eu chamo isso de deficientes, então isso significa que a corrente não está aqui. Então vou chamá-lo de deficiente. Onde eu estou? Lá vamos nós. E ele vai ter um valor padrão de false. Tudo bem, então isso significa que se não for especificado, assim como com o nosso botão leva, se não for especificado, então suponha que o farm não está desativado. Tudo bem, rapidamente, podemos facilmente ver se e, em seguida, o nosso AdSense, desculpe. E, em seguida, IF. E então, dentro daqui, podemos ver se está desativado ou se não está desativado. Então, isso significa que se desabilitado for falso, então exiba o botão. Tudo bem, então só exibir este botão que diz Atualização são salvos quando desabilitada é falsa. Tudo bem, agora, como se relaciona com o formulário e desativar a fazenda, e uma boa maneira fácil de desativar um monte de campos. Forma suficiente seria embrulhá-los todos em um conjunto de campos e, em seguida, definir o conjunto de campos para ser desativado. Então vamos fazer isso. Então eu vou adicionar apenas colapso todos eles para tornar mais fácil para que possamos ver exatamente onde tudo começa e termina. E então eu vou criar essa tag chamada Fields sit open e fechá-la. Mas então eu vou especificar que desabilitado é igual a e isso seria verdadeiro ou falso. Então, se eu disse verdade, então este feto, se ele se sente definido, desculpe, está desativado. Se eu disser quedas, nada teria mudado. No entanto, eu não sei se é verdade ou Fazio de qualquer maneira, eu sei que é o que vem através do parâmetro. Então eu vou ver desabilitado vai tomar o mesmo valor que este parâmetro tem. E então eu posso colocar tudo isso dentro deste conjunto de campo. O botão está sendo exibido quando desabilitado é igual a false, então C, e este é o CML vendo equivalente de false. Só para explicar se você é um novato e esse é o botão. E então ainda temos o bacilo porque quando vemos ainda queremos opção de voltar à lista. Certo, então é isso que estamos fazendo aqui. Então vamos recuar e voltar para o View. E então você vê, você sabe, ele reconhecer é que os desativados serão verdadeiros nos outros componentes que usam esse componente de formulário. Nós não temos que especificar nada com desabilitado porque nós definimos como padrão como false. Então vamos dar uma volta. Tudo bem, então quando eu for e clicar em ver, veja o que acontece. Todos os dados estão lá. Para o tipo de ícone somente leitura. Todos estes estão desativados. Não há nenhum botão aqui para sugerir salvar nossas criações. E eu só posso voltar para List. E lá vamos nós. Então agora eu posso ver a América. É agradável e fácil. E não foi preciso muito esforço. Mais uma vez, tudo o que fizemos foi estender nossos componentes de formulário para tomar outro parâmetro na forma de desabilitado, que é um booleano que nós assumimos como padrão falso. E, em seguida, colocamos esta declaração se ou na exibição do botão. Se desabilitar isso cair, então exiba o botão. E já temos a ductilidade. Então não colocamos isso no depoimento, é claro. E a próxima coisa que fizemos foi no componente de visão, vamos em frente e buscar o nosso disco. Basicamente, quando a empresa recebe a identificação. E então carregamos nosso componente de formulário com os dados do cliente e desativamos ao longo do caminho. Tudo bem, então é isso mesmo. Então você pode ir em frente e aplicar esse mesmo padrão para os outros componentes de componentes de exibição que você tem. 34. Limpe de código e adicione alterações no GitHub: Muito bem pessoal, então nesta lição vamos apenas rever o que fizemos para esta seção inteira e verificar nossas mudanças no GitHub, confirmá-las. Assim como a minha maneira de recapitular, o que fizemos foi Explorer, como nos comunicamos com o resto API do blazer. Então, a maioria de nossos componentes teria este cliente HTTP injetado e, em seguida, código para acompanhar onde fizemos essa chamada. Também analisamos como podemos atender aos endpoints mais fáceis de usar nos diferentes componentes e reduzir o risco de erro. E olhamos para a criação de componentes reutilizáveis, ou seja, na forma deste componente de formulário, onde o usamos tanto para nossa edição de criação e então vimos como poderíamos estendê-lo para também usar para cenários somente leitura. Nós também introduzimos alguns outros componentes como este cabeçalho componentes. Então não passamos por isso juntos. Eu apresentei, só sei onde eu uso Bootstrap, estilo jumbotron. Tudo bem? E em, injetando este mutuário sinto muito, eu estou esperando em um parâmetro chamado texto, que eu vou apenas exibir. Então isso vem a calhar como na nossa página de índice onde tínhamos que ser trans ou lembrar de tudo que queríamos ter três anos com esta grama toda vez. Então, podemos substituir esses títulos com este componente de cabeçalho e nós apenas passar o texto que queremos exibir. Componentes reutilizáveis, certo? Bem, assim como montar a multidão para todos os nossos recursos. Portanto, todos os nossos recursos agora podem criar, atualizar, excluir e apenas visualizar os dados que estão lá. Em nossa API. Nós escrevemos errado onde tiramos a barra api do caminho, enquanto que isso estava causando um conflito no roteamento. Então, na barra api Poupon. E apenas para mostrar mais uma vez o que fizemos com nosso arquivo de endpoints, acabamos de criar uma classe estática com strings estáticas que apenas construíram os diferentes endpoints por recurso. Então, se você obter outro recurso que você precisa na API, você pode apenas fazê-la para o Instituto aqui e reutilizá-lo de acordo em qualquer outro lugar e aplicação. Nós também olhamos para validação de dados e buraco. A adição de anotações de dados às nossas classes de domínio não afetará apenas o UA lida com a validação no nível do farm. Além disso, como o banco de dados, essas restrições quando ele está criando intermediário, criando as tabelas estão modificando-os no nível do banco de dados. Então vemos, mais uma vez, discutimos que há momentos em que você pode querer separar esses dois, mas para não, como Oh, estamos aprendendo não vai tão longe. Eu só quero dizer t nisso. Então vamos em frente e vamos para obter mudanças. E essa é a minha mensagem rápida. E então eu vou em frente e cometer tudo. E assim que isso for feito, você pode fazer uma pausa e eu vou vê-lo novamente na próxima lição. 35. Usando uma abordagem de código: Ei pessoal, nesta lição nós vamos estar falando sobre o Bowl totalmente pode separar nosso codificador u ou marcação citação da nossa lógica ou o código C-Sharp? - Não. O fato é que o que temos até agora funciona, certo? Temos um pouco de C afiado em cima. Estas são mais como diretivas. Isto é uma página. Mesmo essas coisas e autorizar, estas são todas directivas. No topo, temos a nossa marcação, que é um híbrido da sintaxe Ariza na sintaxe HTML. E então temos nossa seção de código ou lógica abaixo. Não, tudo funciona como está. Mas então há uma abordagem que podemos tomar onde realmente temos dois arquivos separados. Um só para a marcação como vemos aqui. E então podemos migrar nossas certas partes da nossa lógica e código C-Sharp para o nosso código atrás do arquivo. Tudo bem, então eu vou começar usando as cores index.js ou componente. Eu acho que isso é bom e simples o suficiente para nós levantarmos e correr e colocar o conceito sob nossos dedos antes de ir em frente e fazer o resto de nossos componentes, se você assim desejar, ele vai, isso é completamente opcional. Não há nada dizendo que você deve fazê-lo ou se você não está fazendo isso, você não está fazendo algo corretamente. Depende de seus objetivos, depende do seu contexto, é claro, mas pelo menos você sabe como fazê-lo se surgir a necessidade. Então o que vamos fazer é adicionar uma nova classe à mesma pasta com nossos componentes. E nós vamos realmente dar a esta classe o mesmo nome. Então é index.js, balas de barbear e CSS de ponto de extensão extra. Então é o nome do componente pontos raise ou dot cs. Tudo bem, vamos em frente e clique em Adicionar. E o que você pode notar no explorador de soluções é que seu arquivo de índice pode ficar aninhado sob o componente de lâmina de índice. Acontece às vezes não acontece, às vezes não acontece para mim. Pode ter sido para você, mas isso não é problema. Desde que você veja o arquivo aparecer e você tenha feito o nome incorretamente, ele deve funcionar. Então abra o arquivo de classe e temos parciais públicas. Então parcial significa que esta é uma metade implementação são parte da implementação de outra classe, certo? Então há um componente é uma classe e estamos vendo, bem, a classe C-Sharp que estamos fazendo é uma parte disso. Então todos trabalharão juntos. Eles vão apenas automaticamente amarrado para dar-lhes não, tudo bem. Estes dois pertencem um ao outro, certo? Então isso é tudo começa migrando algumas diretivas de pagamento, nulo. Tivemos injeções, alguém para tomar essas injeções, todo o nosso componente. E eu vou colocá-los dentro da classe direito. Agora, em vez de ter o lado de fora injetado, o que vamos ter é uma chave quadrada aberta, capita eu injeto uma cinta quadrada próxima. E nós vamos ter que incluir algumas bibliotecas, ou seja, os componentes centrais dotnet que eu vario seu objetivo. E, em seguida, em outras bibliotecas para estes, para os clientes e essas outras bibliotecas que precisamos. Então vamos em frente e injetar e fazer o mesmo para o JS Runtime. Então podemos definir isso como Get e sentar-se sobre essas duas propriedades. Tudo bem. Você pode colocar o injetável para que eles queriam ao lado dele, Desculpe, queria acima dele. Isso realmente não importa. Tem Ozzie, você tem a sintaxe certa e está pronto para ir. Depois de fazer isso, a próxima coisa que quero passar é toda a lógica, certo? Então eu vou ter que pegar tudo isso e eu vou cortá-lo. Afinal, trata-se de uma migração. Agora a coisa é que se você dobrar o código e você vai ter um monte de barcos Arezzo. Já existe. Então deixe-me, deixe-me apenas mostrar-lhe um exemplo. Então, se eu deixar o código aqui, eu copiei e cole-o aqui, então você vai começar a ver erros. Bem, na verdade, se eu não movi as diretivas, então se eu injetar aqui, bem como injetá-lo no código atrás e você começará a ver coisas sobre o já existe. Ou você tem uma inicialização dupla de algo, que não é uma errata muito ruim aqui como um exemplo, ambiguidade entre esta, esta propriedade, certo? É fácil aqui, e também o vê lá. Então, uma vez que você tenha visto esse tipo de erro, se você copiar e colar isso e você sabe, ele está funcionando. Então, já que fiz esse ponto, deixe-me remover isso mais uma vez e seguir em frente. Eu vejo metade dessas áreas desaparecidas, as bibliotecas que faltam para o nosso ou bits de código. E depois de fazer tudo isso, onde livre de erros em ambos os lados, se eu fizer uma compilação, tudo bem, então nossa construção foi bem sucedida e agora vamos dar uma volta e ter certeza que funciona. Mas antes de eu fazer isso, o que eu vou fazer é introduzir apenas uma linha de gravação de ponto de console rápido bem aqui e o assíncrono não inicializado, que é apenas dizer código de aquecimento atrás. Então isto é, isso nos permitirá a partir do console no próprio navegador para ver esta mensagem. E então saberemos que é definitivamente batendo o código por trás não componente mérito como nenhum código e sem injeções. Tudo bem, então vamos em frente e levar isso para nós. Tudo bem, então aqui nós batemos na nossa página de cores e tudo é clone Buck como normal. Deixe-me apenas ir para o elemento inspecionar no console e você verá aqui a linha console.log que colocamos no código de acerto atrás de sua cabeça. Então, se em algum momento você quiser imprimir algo para o console ou você sabe, algo está dando errado. Eu quero saber se você sentaria no canto ou o que quer que seja. Você sempre pode usar esse console.log essa linha e ele vai realmente apenas escrever para o console no navegador. Tudo bem, então eu posso apenas remover essa linha. E lá vai você. Isso é realmente tudo o que há para mover seu código para um código atrás de um arquivo. Mais uma vez, isso é realmente muito opcional. Você não tem que fazer isso. Não há nenhuma estipulação que você deve fazer isso. Como você viu, temos tudo funcionando até este ponto. Então você pode ir em frente e fazer isso para o resto dos componentes. Você sabe, um desafio em si migra sobre o código, mas é claro que eu vou fazê-lo. E mais tarde você terá meu código para comparar apenas no caso de você ter alguma dificuldade. 36. Tratamento de erros globais: Ei pessoal, bem-vindos de volta. Então, nesta lição, vamos falar sobre a manipulação de erros globais. Nenhuma manipulação de erros em c-sharp é realmente feito através do que vamos chamar de declarações try-catch. Então eu só digitei bandeja, apertei Tab duas vezes e então nós temos este bloco de código, certo? Tente, faça algo, pegue qualquer erro que venha em seu caminho. Lançar significa travar o programa. Então, basta pensar sobre isso se você não está tão familiarizado com o que é manipulação de erros, fora do que eu acabei de mostrar, basta pensar em cada vez que você usa um aplicativo quando algo der errado, ele tem alguma seta. Faz uma de duas coisas. Ou isso traz uma mensagem de erro que diz: “ Ei, você sabe o que você tentou fazer, não funcionou bem. Estes dragões, o programa ainda está em execução. Ou às vezes ele realmente apenas lança o antigo tipo de programa, Hey, quer rabiscar é inválido e, em seguida, o programa falha e subs trabalhando. Então, isso é essencialmente o tratamento de erros. Então você pode travar o programa através da declaração throw que eu só quero endireitar. Ou você pode realizar alguma ação. Mostre uma mensagem, informe o usuário, hey, você sabe, algo deu errado, tente novamente e então ele pode tentar novamente. Nós teríamos visto que no passado quando estávamos fizemos algumas modificações e eu acho que estamos tentando obter minhas reservas nem a lista de reservas. Você teria visto aquela barra amarela subir e entrar no console e ler o erro e então Bogan na moda, correção de tendência no fenol, o que estava errado? Obviamente, você não iria querer necessariamente esse tipo de experiência de usuário para o seu ouvido, usuário real, está tudo bem para você como o desenvolvedor porque você precisa corrigi-lo. Mas quando o usuário está usando o programa, você não quer que eles vejam recarregar e nosso amarelo por algo deu errado. Eu sou apenas uma flecha V. O que vamos querer fazer nesta lição é configurar. Uma maneira que podemos realmente lidar com erros não importa onde eles acontecem em nossa aplicação enquanto escrevemos o mínimo de código possível. Isso também é a chave. Claro, contextos de emissão de bilhetes porque, você sabe, citação, não é necessariamente ruim, mas você não quer ter que escrever esses blocos try-catch toda vez que você está indo para realizar uma operação que tem essa chamada de API. Porque se a API se sentir, então nossa aplicação vai se sentir como vimos. Mas então teríamos que escrever essa captura de tentativa em cada lugar que teríamos feito uma chamada de API. E como você pode ver, eu cuspo tudo É a lógica e o componente de navalha phys e isso seria muito poucos. Tudo bem. Então você provavelmente não quer necessariamente tomar essa abordagem. Isso funcionaria, mas vamos tentar de uma maneira diferente. Então, o que vamos estar fazendo para implementar nosso tratamento de erros globais é instalar este pacote chamado interceptor de cliente HTTP. Então nós estamos indo apenas para ir para o novo get em nosso aplicativo cliente. E estamos procurando pelo interceptor de cliente HTTP. Então vamos em frente e instalamos o cinto de ferramentas, blazer de ponto, o interceptor de pontos. Agora, depois que isso foi instalado, vamos passar para o nosso arquivo program.cs, e então vamos fazer alguns ajustes, começando com nossos serviços de construção que adicionam cliente HTTP. Então eu vou mudar este cliente aqui. Quando abrir e fechar parênteses, e eu só vou colocar para SP curto. E bem, podemos retirar a palavra cliente. Então, porque há tipos surdos trabalhando. Então cliente da SVN. E então eu vou abrir uma chave encaracolada aberta e fechada, mas eu vou abrir primeiro. E depois da definição do endereço da base de clientes, vou fechar essa chave. Tudo bem? Ou se comigo aqui, e depois disso colocamos um ponto-e-vírgula e trazemos 29 novamente. Lá vamos nós. Então temos, em vez de apenas cliente vai abrir e fechar parênteses segurando Sb, que representa o provedor de serviços, certo? E, em seguida, as plantas que representam o cliente HTTP. E então abrimos a chave e definimos qual é o endereço base para o cliente. Nós não mudamos essa linha, não vemos que fazemos é adicionar um ponto-e-vírgula. Em seguida, fechamos a chave encaracolada e fechamos que os parênteses são. Nós também não modificamos isso, mas dentro dessas chaves, eu também vou interceptar os pontos do cliente e mordidela. Tudo bem, e então isso vai precisar de mim para incluir o cinto de ferramentas da biblioteca. O que foi o cinto de ferramentas, Dr. Blaser, extensões, injeção de dependência. Lá vamos nós. E, em seguida, dentro disso, vamos colocar todos um provedor de serviços, que é velocidade ou objeto provedor de serviços, que nós definimos lá. Tudo bem, então podemos colocar o ponto-e-vírgula lá. E depois disso vamos para Dawn um pouco mais, só uma bala aqui. Isto é bom. Podemos registrar nosso em nossos serviços de interceptação. Então, vão dizer serviços de pontos construtor. Pontos adicionam interceptor de cliente HTTP. Assim, o objetivo do interceptor é sentar osso e monitorar todas as chamadas API e ele vai saber se foi uma resposta bem sucedida não são antes de ele voltar. Então nós já meio que passamos pelo que, o que nós já meio que passamos por como o sucesso parece e como uma chamada mal sucedida parece em termos de códigos de retorno, certo? É, você sabe que 500, 400, esses não são bem sucedidos. 200 é geralmente bem sucedido, cento e trezentos, isso significa alguma quantidade de sucesso ou o sucesso não foi alcançado medo. Então o que acontece é que quando você chega a 500 e algo deu errado, o aplicativo em si, como vimos, basta usar um muito vago, ele não diz exatamente o que deu errado. Art não deixa o usuário saber, hey, você sabe, dificuldades técnicas se arrastam mais tarde. Isso é o que estamos tentando fazer aqui. Mas o interceptor será bom. Maneira limpa de ter esse código sendo monitorado por todo o lado sem termos que escrever “Tentar capturas” em todos os lugares. Então, depois disso, temos que criar um arquivo de código para deixar o interceptor saber como ele deve se comportar, sob que circunstâncias. Então, em vez do projeto do cliente, vou supor que cria uma nova pasta. Vou chamar-lhe serviços. E então, em serviços, estamos adicionando uma nova classe. E eu vou chamá-lo de serviço interceptor http. É UDP interceptação de serviço. E vamos em frente e acrescentamos isso. E vamos começar com um construtor. Então precisamos injetar duas coisas para ser muito específico. Precisamos do interceptor http e precisamos do nosso navegador, Monica. Então, podemos simplesmente ir em frente e colocá-los nos parâmetros para o nosso construtor. Vá em frente e inclua todas as referências que faltam. Agora nós entramos em uma coisinha legal aqui para obtê-los realmente inicializado nos resultados frios, você sabe, dinheiro enquanto você está escrevendo ou nós temos feito o Windows, clique na lâmpada e então nós dizemos criar e atribuir campo. Então, ele vai apenas automaticamente ir em frente e criar um atribuído o campo e fazer isso inteiro em ejeção. Então podemos fazer isso para ambos os parâmetros, tanto para o gerente quanto para o interceptor. E reparem que estou usando campo não propriedade porque é ganância privada, ou o direito. Por padrão, ele não vem com o sublinhado. Então eu só vou colocar em pontuações para ser consistente com a convenção de nomenclatura que eu tenho usado até este ponto. Mas isso não é grande coisa. Fora do Smith. Você só usa isso porque eles têm os mesmos nomes. Então, isso é bom. Podemos seguir em frente, saber que fizemos nossas injeções. E a primeira coisa que vamos fazer é configurar algo como um manipulador de eventos neste. Isso é chamado de queria continuamente fazer outra chamada para algo. Então é como um evento, certo? Então eu vou dizer vazio público, vamos dizer evento monitor, certo? E eu só vou fazer aquela inicialização 19 e ver ponto interceptor. E então você vê aqui são os nossos eventos que podemos preparar pão. Então eu vou dizer depois de enviar e, em seguida, fazer isso é como um incremento. Então, após cin, o que significa continuamente toda vez que você está fazendo isso, basta fazer esta chamada de função. Então eu vou ver inter resposta. Mais uma vez, queremos isso, isso vai ficar entre nosso cliente e a chamada API. Então ele precisa realmente assistir quando uma chamada é feita, obter as de Butler antes do cliente e, em seguida, wearable para dizer-lhe o que deve fazer quando interceptar a resposta. Certo, então, ao interceptar nossa resposta, o gramado a fazer é avaliar que tipo de resposta é e agir. Então eu sou apenas gerar o método para interceptar resposta, private void, interceptar resposta e o remetente e os argumentos do evento. Se você já trabalhou com WinForms ou formulários web, você saberia tudo sobre eles se você nunca teve que construí-los fora desse contexto, é claro, mas vamos continuar. Então o que queremos fazer é uma mensagem. Nós podemos apenas encontrar que uma corda vazia para começar. E então eu queria ver se E, E representa o evento ou a resposta do evento, o resultado de eu tentar fazer algo. Então ponto E. E se você olhar aqui, você verá que você tem acesso à resposta sob solicitações. Eu posso assistir para ver o que foi solicitado e o relógio para ver quais respostas. Então eu vou dizer se o ponto de resposta E é código de sucesso, tudo bem, é a citação de sucesso significa que é o 200 a 300, o 100 e algo que não significa um erro, certo? Bem, se você olhar para ele por definição, é realmente de 100 a 99, caso contrário é falso. Então é isso que o sucesso é. Então eu realmente queria fazer o tratamento de erros, o que significa que se eu quiser, eu quero realmente assistir, se não for um código de sucesso, então eu faço alguma coisa. Tudo bem, porque, em seguida, se é um sal Cisco, em seguida, aplicação pode ser executado como normal. Mas se não foi um sucesso, eu queria entrar em ação. Então eu queria dizer código de resposta var é igual a. E então podemos dizer e ponto Stato marcou. Lá vamos nós. E então podemos ter como um interruptor nossa declaração se apenas para passar pelas diferentes opções. Então, e se eu quisesse fazer algo se fosse um 40 para diferente de se fosse um 500 diferente de se fosse um 40, 1, o que significa não autorizado e coisas assim. Certo. Então você tem diferente se você quer conhecer diferentes caminhos diferentes baseado em, oh meu Deus, quem tem isso? Foi um acidente no meu império. Mas lá ele já está dando todos os códigos de status que provavelmente não precisa mesmo, nós não precisamos de todos eles. Então, vou desfazer isso. E aqueles que estavam realmente, realmente, realmente querem se concentrar em qualquer maneira seria o código de status HTTP caso. Deixe-me apenas fazer isso fora do código de status HTTP e fazer quaisquer inclusões que eu preciso fazer. E então eu quero talvez assistir por 500 ou bem, vamos começar com o não encontrado, certo? Então, se não está ligado, então eu quero tomar algum curso de ação. Deixe-me colocar isso aí. E digamos que se fosse talvez 40 Huan são um não autorizado, não autorizado e eles também têm proibido, certo? Então, se for qualquer um desses, então provavelmente queríamos mostrar o mesmo novamente, uma mensagem e depois os padrões, eu vou deixar isso para dizer que se não fosse nenhum desses, então apenas padrão. Então aquela praia de mensagem de erro genérica que diz, você sabe, algo deu errado esses dragões mais tarde, que provavelmente seria como 500. Então, só estou mostrando que você pode ser específico. Ou você pode apenas ter esse genérico. Então, mesmo que não quiséssemos ver caminhos diferentes, poderíamos apenas dizer, se não fosse uma mensagem de sucesso, nosso sucesso marcou, então faça isso. Tudo bem, então eu vou colocar esses dólares. E a razão pela qual temos o gerenciador de navegação, o gerenciador injetado é que eu quero tenhamos páginas diferentes para os diferentes caminhos que poderiam ser tomados. Tudo bem. Então, basta ir em frente e preencher todo o resto e eu vou apenas guiá-lo através do solo. O caso para o não telefonou. Vamos dizer que um novo gerente de pontos navega até uma página chamada fluoróforo, que é claro que vamos criar. Esta mensagem é o que será exibido provavelmente no, o console do navegador. Então vamos ter que jogar algo fora em tudo isso, mas chegaremos lá eventualmente. Então, vamos em frente e navegar para o 40 para nós amamos isso para o console. Se você estiver longe em meados de março, não autorizado navegará para não autorizado. Nós também amamos isso no console e, em seguida, padrão, significa qualquer outra coisa que foi uma falha. Nós apenas navegamos para a página 50, 100 e então vemos que algo deu errado. Entre em contato com o administrador. Depois de fazer todas essas verificações, vamos ter que abrir uma exceção. Então nós podemos apenas dizer lançar nova exceção e nós vamos apenas passar em que a mensagem. Tudo bem, então isso vai desencadear a obrigação de saber que, hey, algo realmente deu errado. Mas mais uma vez, podemos realmente navegar para uma página onde mostramos ao usuário um bom, amigável nós, que nós lidamos com a situação. Agora, depois de tudo isso, temos mais uma coisa que precisamos fazer onde precisamos descartar o evento. Então começamos o evento em que estamos continuamente chamando este método para assistir. E então precisamos chamar o evento descartar, onde vamos fazer o oposto. Então aqui estávamos adicionando e acumulando. Aqui nós apenas fazemos menos igual a arte. Então, depois de fazer tudo isso, vamos ter que registrar e nosso program.cs, os fatos de que esse serviço existe. Então vamos fazer isso por baixo. O anúncio é interceptor cliente HTTP onde nós apenas colocar e esculpir e colocar no nome do arquivo, é claro, incluir quaisquer referências ausentes. E então estamos prontos para implementar todo esse serviço. Então vamos voltar para o nosso arquivo de ponto de índice CSS. E o que vamos fazer é deixar esta classe parcial herdar de eu descartável. Então isso realmente nos dará um método que nos permite descartar qualquer objeto que não queremos depois que sua vida se foi. Então, geralmente o que acontece é que o descarte é chamado quando o componente continua são quando o componente não é mais necessário pelo aplicativo. Mas o que queremos fazer é colocar uma lógica personalizada para eliminar o nosso interceptor. Então, bem, antes que possamos fazer isso, vamos injetar o interceptor. Então eu estou indo apenas para duplicar essa linha e eu vou adicionar HTTP inter cetro. Deixe-me copiar este serviço de interceptação. Em vez de tendências são isótopos. Vá em frente, inclua referências faltantes. Tudo bem, e então deixe-me começar com a disposição. Essa é provavelmente a mais fácil de fazer aqui. Nós apenas dizemos ponto interceptor e nós já temos o método que diz descartar evento. Então podemos ir em frente e fazer isso, certo? Não, fora disso, queremos monitorar o que vai acontecer. Logo antes de fazermos a nossa chamada, podemos ver eventos do monitor de ponto interceptor. E é isso. Então, quando dizemos evento monetário, ele vai então iniciar este método que não é monitoramento para ver o que é a resposta eo que ele deve fazer depois. Certo, então essa é uma maneira legal e limpa de ter algo lá para ver o que vai acontecer. Então podemos fazer isso em todos os lugares. Temos um serviço chamado barco para ser feito em tantos arquivos. Vejo que isto é muito mais fácil de colocar. Então todo o try-catch, try-catch, try-catch, porque isso levaria a muita repetição. Então eu vou fazer isso novamente na criação. Então eu inadvertidamente coloquei o código lá sem quaisquer injeções e é do zero novamente um que eu vou colocar no olho implementos descartáveis essa interface. E então eu vou ver, e você não quer necessariamente depois de escrever o código nesta artéria e eu tenho certeza que você sabe disso, mas eu sei que você pode escrevê-lo em qualquer ordem se você estiver confortável com o tempo siga as etapas. Então nós temos o interceptor sendo descartado, nós temos a interceptação está monitorando a função, desculpe, a chamada API aqui. E então a última parte deste quebra-cabeça é apenas o injetado. E eu estou indo para alguns novamente, copiar esta linha para que eu não tenha que escrever tudo do zero e voilá. Tudo bem, então estamos tomando nota de completar esta atividade. Outra coisa que precisamos fazer é criar as páginas de erro porque nós vimos que queria uma página chamada fluorophore para ser navegado ferramenta, um chamado no autor como indesejado chamado 500s. Então eu morri e criei esses componentes. 40 para e não é nada de fundos. Ele é só uma página com uma etiqueta H1. Vendo nos leva perigo recurso que você está procurando, ele não pode ser encontrado. É um endereço de navegação como um OLAP dizer página cortar o endereço. Então isso é 404. Temos uma configuração semelhante para o 500 e temos não autorizado e ter em mente em Azar como seus componentes têm que começar com letras maiúsculas ou não autorizado é U maiúsculo, mas o endereço de navegação é bom como um pouco comum. Isso é com você. Eu não estou colocando nada muito chique nesses componentes, mas é claro que você pode melhorá-los como você ou seu contexto requer. Não, no controlador de cores, eu vou colocar um não encontrado logo no início deste método onde nós, você sabe, quando a página de índice é chamada de causa obter cores, certo? Então o que ele chama de obter e tenta obter as cores. Então vamos devolver nossos 40 para adiantamento e ver como isso reage. Certo? Então vamos em frente e olhar a página para cores e estamos aquecendo os pontos de interrupção para que possamos ver, você sabe, que ele deve apenas retornar 400 para alguém remover os pontos de interrupção e pressionar F5 para que ele continue. E voilá, o recurso que você está procurando não pode ser o telefone. Essa é a nossa página 404. Tudo bem. Claro que estamos recebendo esse erro não processado porque lançamos uma exceção. Se olharmos no console, veremos a exceção sendo lançada com a mensagem, certo? Então cabe a você se você realmente quer lançar uma exceção e você sabe como esta barra amarela carregando, porque isso não significa nada para o usuário, certo? Não que estejamos usando. Também vá para o console e veja as setas. Então nós poderíamos realmente fazer sem isso, jogar novas cartas de exceção no final do interceptor. E o interceptor realmente lida com tudo graciosamente para nós. Tudo bem, então poderíamos apenas dizer, navegue até esta página, certo? Nós poderíamos até mesmo melhorar o, os componentes de tal forma que nós apenas passar na mensagem como parâmetro. Então nós não queremos difícil de escrever disse que leva dinheiro. Bem, é, mais uma vez, depende inteiramente de você, mas você tem o conceito e também você pode ir frente e implementar isso em seu aplicativo. E é uma maneira agradável e limpa de lidar com setas porque não sabemos o que pode acontecer com a API. Algo pode ser interrompido em nossa qualidade obter bokeh 500. Em vez de escrever muito código personalizado para cada 500 potencial, nós apenas escrevemos código genérico, código global para ver que algo deu errado. Por favor, arrasta os nossos administradores de tiros. É inteiramente com você. 37. Adicione mudanças no GitHub: Ei pessoal, bem-vindos de volta. Então chegamos ao fim de outro posto de controle. E nesta seção, tudo o que realmente fizemos foi olhar para como podemos refatorar alguns dos códigos em nossos componentes, tendo nossa seção de componentes ou UI em diferente do código atrás, certo. Então eu fiz isso para cores, clientes, modelos mistos, veículos. Eu não fiz isso para reservas. Então deixei este em seu estado original para preservar o que ele pode parecer. E então eu fiz isso por todos os outros, certo? Também não fiz isso para os componentes estrangeiros porque realmente era tudo o que havia para ele. Então eu não me preocupei em alguns apenas te mostrar que não é absolutamente necessário. Claro, não é necessariamente ideal para misturar e combiná-lo da maneira que estamos vendo eu tê-lo nesta seção, é assim e, em seguida, separado em outras seções. É bom ser consistente em toda a linha. No entanto, deixo aqueles lá como exemplos de código para o seu recurso ou amigos. Além disso, nós também adicionamos manipulação de erros globais usando o HTTP, http interceptor, que nos permite usar apenas uma linha para tipo de monitor. E nós fizemos isso especificamente no índice uma linha para tipo de monitorar se ele vai ser bem sucedido ou não. É claro que, com esta linha, temos o injetor, o serviço ao cliente, bem como nos certificamos de que dispomos apenas para garantir que nada permaneça na memória por muito tempo. Então, depois de fazer todas essas mudanças, queremos ir em frente e fazer o check-in. Então, como de costume, lemos ou mensagem útil e, em seguida, ir em frente e cometer tudo e afundar. 38. Personalize layout e lógica para identidade: Ei pessoal, bem-vindos de volta. Então o que queremos fazer nesta lição é explorar algumas das partes mais importantes da biblioteca de identidades e ver o que precisamos modificar. O que é bom ter e apenas ter uma sensação geral disso. Então eu não vou percorrer isso em grande detalhe, pelo menos não neste curso. Se você quiser entender identidade e entender toda a funcionalidade, pode embaralhar meu outro curso onde passamos por identidade, núcleo e todos os trabalhos internos estrangeiros, embora nós só queremos tipo de brilho sobre ele, porque no No final do dia, queremos fornecer algo básico para protegê-la. E temos feito isso. Implementamos ou um login, implementamos nosso registro. E em nosso projeto nós tínhamos um monte de páginas relacionadas a identidade e gerenciamentos. Se nós apenas expandirmos isso, se você esqueceu no projeto do servidor, nas páginas de identidade de áreas, se você tivesse me seguido, então você teria andaime todas essas páginas. Vê isso? E em vez de menorragia, mais páginas para que essas posições que eles realmente forneceram um monte de, talvez não todas fora, mas algumas páginas voltadas para ajudar você e seus usuários a gerenciar próprio usuário ou cones dentro do a aplicação. Se você não seguiu os passos, você sempre pode ir para o Pages, clicar em, Adicionar novo item do andaime, então você vê a identidade e, em seguida, você pode brigar com adultos. Caso contrário, você sempre pode revisitar o vídeo anterior. Agora neste vídeo, eu só quero que nós tipo de percorremos o que está lá e como podemos ajustá-lo para talvez ter uma experiência melhor para nós mesmos. Então, temos feito o login, sabemos como semear usos e assim por diante. Vejo que esta página é drasticamente diferente do resto do nosso site. Agora você provavelmente deseja modificar isso. E se você realmente olhar para o conteúdo da página, você verá que nem tudo aqui é realmente relevante para a nossa aplicação. Então você pode, se você não fizer parecer exatamente como esta pele com a parte triste, barra lateral e tudo mais. Mas você provavelmente não precisa incluir o texto usando outro serviço para fazer login, que é claro que é contextual, porque se este é um up interno para sua empresa, então o único serviço que você deseja facilitar é o usuário gerenciado pela empresa ou cones. Se é um aplicativo público voltado para usuários em geral, público em geral, então você pode querer olhar para estender para apoiar o login do Facebook e assim por diante. Mas mais uma vez, eu não vou cobrir tudo isso neste curso particular. Mas se você quiser modificar esta página, você verá que no URL ele diz identidade barra um login barra dois-pontos. Então, se voltarmos para o nosso projeto e olhar em nossas páginas andaimes veria identidade são co-propriedade. E então temos a página de login. Então esta é a página que está sendo servida até nós quando clicamos em login. Então isso significa qualquer alteração em mim se quisermos remover o link de senha esquecido. Então, estamos usando um link de confirmação recente. Ou vamos começar com os logins externos, externos. Portanto, não temos quaisquer logins externos em queria alguém para remover esta seção inteira. Eu só vou entrar em colapso que eles apagaram. E então provavelmente eu quero esta seção com as caixas de texto para ocupar mais espaço. Então o que eu vou fazer é expandir isso para MD 12 para que ele vai se estender para anúncios em toda parte. Tudo bem, eu também posso dizer Use os cones da sua empresa para fazer login. Tudo bem, então essas são todas as coisas que podemos fazer aqui na aplicação. E você pode modificá-lo como quiser. Se você queria alterar o layout geral da página porque você vai notar que tanto o login quanto o registro tipo de tem um layout semelhante. Mais uma vez, há apenas uma página está disponível para nós para modificação. Aqui está uma página de registro. Então, se quisermos fazer uma modificação semelhante para remover esses logins externos acionáveis, eu também posso recolher e excluir isso, estender este formulário para ocupar toda a página. E então, quaisquer que sejam as mudanças que precisarmos fazer, podemos fazer. Não, eu não estava no ponto de que se quiséssemos mudar o layout geral de todas essas páginas, então o que podemos fazer é ir até o explorador de soluções e olhar e ver começa, que indicará onde essa página de layout é chamada . E isso é páginas barra compartilhada barra layout.css HTML. E se você olhar em compartilhado, você não vai vê-lo. Mas, em seguida, se você descer para a pasta Páginas, em seguida, você encontrará compartilhado. E aí está o nosso layout. Então, a partir daqui, e se você já usou o dotnet Core MVC ou páginas cavalete, você estará pelo menos familiarizado com este tipo de página de layout onde é a página Bootstrap 4 padrão. E então você pode alterar os itens do menu. Então você pode ver aqui aplicativo de gerenciamento atual, em vez de apenas o nome do projeto, você sabe, você pode personalizar todas essas coisas. Está mostrando um monte de parciais e algumas condições. Você provavelmente não quer necessariamente modificar cada coisa, mas você certamente pode mudar algumas coisas para torná-lo mais parecido o seu aplicativo em vez de apenas um modelo mãe. Tudo bem, então o aplicativo de gerenciamento de carro e Tom, você coloca os principais lugares. Se houver uma declaração de privacidade, então claro, vá em frente e faça isso. E ele torna o ano e todas essas coisas maravilhosas que eu sei a maior parte disso mais uma vez, foi meio que feito para o suporte das páginas relacionadas com o servidor de identidade. Tudo bem, então você quer ter muito cuidado como você faz modificações. Mas para tags HTML gerais, qualquer coisa que não é para aumentar orientado, então você pode ir em frente e fazer suas alterações e corrigi-los como você achar melhor. Agora eu vou apenas reiniciar este aplicativo dado todas as alterações que eu acabei de fazer. E então quando o aplicativo aparece e eu vou para login, sei que você vai ver a página de login parece diferente, certo? Eu só modifiquei o layout até certo ponto. A fazenda não está mais pedindo Theobald, é qualquer coisa que não seja relevante para o aplicativo. E o texto parece um pouco mais nulo convidativo. Tudo bem. E o mesmo para a página de registro? Não, em termos de adição de mais campos à página de registro. E outra coisa comum que você provavelmente quer fazer não é apenas pedido para o e-mail, mas talvez e-mail ou nome de usuário ou apenas nome de usuário porque Ryan Não, o que acontece é que este formulário é padrão para pedir um endereço de e-mail para o nome de usuário e apenas feche algumas abas que não são absolutamente irrelevantes, certo? - Não. Tudo bem. Então vamos começar com a página de registro. Tudo bem. Então, a página de registro está sendo Razor páginas aplicação são matrizes de páginas página. Então tem o código por trás, certo? Então, se olharmos para trás páginas repetidas, você verá o CSS, HTML. Css. Nós meio que olhamos para algo assim quando já não podemos ter componentes blazer e o código por trás do arquivo, certo? Então, sempre página aqui tem um código por trás. Então, seja qual for o arquivo CSS, HTML e CSS por trás dele, este é o CS5 por trás dele. E o que você verá aqui é que ele tem uma propriedade chave chamada de modelo de entrada do tipo de entrada chamado input. E então isso é realmente apenas uma aula. E este vidro é usado para modelar o formulário. Portanto, esta classe só tem campo para endereço de e-mail, que está sendo fortemente digitado como um endereço de e-mail. Analisamos a validação mais cedo. É por isso que temos que usar um endereço de e-mail no momento do cadastro e, em seguida, temos que usá-lo para fins de login. Saiba que se removermos essa restrição e dissemos, você sabe, string pública, nome de usuário por causa do argumento. E dissemos que digite seu nome de usuário ou seu endereço de e-mail. Não é tão rigoroso quanto exigir um endereço de e-mail nesse momento. No entanto, não vou incomodar isso. Eu acho que eu endereço de e-mail é uma boa maneira suficiente para manter tudo que você precisa para a coluna de nome de usuário. E serve para o propósito de ir em nome de usuário e endereço de e-mail. Então podemos deixar aquele estrangeiro decepcionando todas essas coisas chave no caso de você provavelmente querer modificar. Conheça o usuário do nosso aplicativo. Deixe-me parar e pular para o nosso modelo de usuário de aplicativo. Aqui vemos que temos FirstName, LastName, e, em seguida, é, ele está herdando do usuário identidade. Então isso significa que temos a capacidade de armazenar nome e sobrenome em nosso banco de dados para cada usuário, o que não é uma opção ruim, certo? - Não. E se quisermos quando a pessoa está registrando o nome e sobrenome digite. E, por extensão, você pode adicionar outros campos se quiser uma data de nascimento, sexo, etc., você pode adicionar tudo isso aqui. Mas, em seguida, a parte chave para isso é que no modelo de entrada, você precisa ter representantes sobre para esses campos. Então, se eu no modelo de entrada colocar em interesses bem esses dois campos, e vamos encontrá-los necessários porque isso não faz sentido para nós. Ou use um IAM, desculpe, FirstName e LastName opcional, mas o e-mail não está certo. Então e-mail, primeiro nome, sobrenome, senha e confirme senha. E você vê que eles estão usando os dados em notações que nós olhamos quando já não podemos validar, certo? Então todas essas coisas são necessárias não, no começo. Tudo isso é baixo. O pH. Podemos até remover esta partícula em logins externos. Não estamos usando logins externos. O que é que eu não sou código linear ainda. No poste. Vemos que valida. Então isto é o que nós validamos. E, em seguida, ele constrói o objeto de usuário antes que ele vá em frente e crie-o. Não, eu só pedi nome e sobrenome, além do e-mail e senha. Então isso significa que na construção deste objeto, eu posso saber fornecer valores para FirstName. E agora aqueles Brian Kernighan, primeiro nome agora pode ser igual ao primeiro nome do ponto de entrada. Mais uma vez, a entrada é apenas o tipo de objeto que representa o modelo de entrada, que é o que acabamos de modificar. Então agora eu posso colocar no FirstName e agora eu posso colocar no sobrenome. Então isso significa que quando alguém se registra, eles devem ter dados nos campos de nome e sobrenome. Bem, esse é o código por trás da interface, no entanto, ainda não reflete isso. Então o que vamos fazer é modificar a interface para saber que ela deve ter caixas de texto para nome e sobrenome. E agora aqueles fazem isso simplesmente copiando e colando a caixa de texto para e-mail. E eu vou dizer no primeiro nome. Então esse é um rótulo para primeiro nome de entrada para primeiro nome e uma validação para FirstName. E, em seguida, o mesmo para LastName. E, em seguida, envie um e-mail quando eu copiá-los via duas vezes. Portanto, o e-mail permanece como e-mail. Então saiba que mudamos este formulário quando alguém se registrar, ele será capaz de fornecer seus detalhes completos e, em seguida, se registrar e ter esse registro. Então vamos fazer isso para um teste rápido. Então eu só vou registrar para que ele veja esquema para o primeiro nome, sobrenome, sem notado FirstName. Isso é meio que juntos. É CamelCase, mas não há espaço no meio, então vou consertar isso antes mesmo de ir mais longe. Então, de volta à entrada, o que eu posso fazer é dizer exibição. Meu nome é primeiro o nome com um espaço nele. Certo, então é isso que o rótulo irá renderizar. Certo, então não serão os sobrenomes, então deixe-me recomeçar e mostrar como é. E aqui estamos nós. Primeiro nome, sobrenome, para que eles vejam que parece muito melhor. Então deixe-me colocar alguns valores aleatórios e apertar Registrar e vamos ver o que acontece. Tudo bem, então o registro, algum processo foi bem sucedido e isso é porque ele com sucesso no post criou o objeto, criou o usuário. Foi em frente e desde que o código agora esta parte da Etruria, aquele remetente de e-mail e assim por diante. Podemos ver mais tarde. Segure para realmente configurar no sistema de e-mail em nosso aplicativo blazer, que é muito importante para a segurança, porque queremos verificar se a pessoa que está se registrando pode receber e validar Will eles são, certo. É apenas mais um nível de segurança que traz conforto para a empresa e para seus potenciais clientes, certo? Então foi isso que aconteceu quando nos registramos. Tudo bem? Agora, se você olhar para a minha insuficiência, isso poderia precisar de um pouco de conserto e tudo bem. Mas, em seguida, se eu clicar na seção que diz Olá, GOP vai trazer a página de perfil, que é mais uma vez apenas outro arquivo que é encontrado dentro desta pasta. Não, este é dentro gerenciar, diz um cólon barra gerenciar. E eu acredito que isso seria índice, certo? Então, uma barra de dois pontos gerenciar. E então nós procuramos o arquivo de índice, e esta é a página que estamos olhando para onde ele está mostrando o nome de usuário, o número completo, qualquer coisa que está no sistema para esta pessoa escreve poderia facilmente colocar aquele em, Salvar e ele iria atualizar o perfil com isso, eu clico em e-mail, ele está me mostrando que você vê todas essas coisas estão aqui. Então você pode dar a um usuário a capacidade de gerenciar sua própria ou co-propriedade, redefinir sua senha ou alterar sua senha ou outra, e configurar para um PHP, se necessário. Não temos nenhum tophi, mas estou mostrando tudo o que nossa biblioteca de identidades nos permite fazer. Mais uma vez, você sempre pode modificar o layout se quiser que ele exiba mais informações aqui. Então, certo, nenhum modelo de índice está simplesmente exibindo o número de telefone. Mas então você sempre pode estender isso. Você sempre pode estendê-lo para incluir o FirstName, LastName, e quaisquer outros detalhes que você deseja que eles para usá-lo para ser capaz ver e modificar quando o R em que. Agora o bucking está para cima, eu só vou sair. E então você verá que há um registro de erros ou não, quando estávamos configurando a navegação ou reescrevendo todo o componente de navegação, eu teria removido algumas aspas vervet. Então vou escrever errado ou certo? Não, não. Se saltarmos para o componente de menu nav, você veria que tínhamos pobre para o conteúdo de exibição de login para esta área. Tudo bem, agora se eu pudesse comparar esta seção para a autorização com o visor de login, você veria bem, em primeiro lugar, comparação de componentes. Existem algumas injeções em algumas bibliotecas que estão sendo usadas na exibição de login. E também há código no final do componente de exibição de login. Agora o que acontece é que o procedimento de logotipo é realmente como um envio de formulário em vez de apenas link clique. Então, eu teria substituído o botão que teria enviado um formulário ou pelo menos iniciado um processo de envio de formulário para navegar para o voto autenticados. Esta parte é muito vital. Eu teria ignorado isso e pulado diretamente para a URL, é por isso que temos esse erro. Estava dizendo, bem, se vem de uma fonte desconhecida. Então o que eu preciso fazer ou o que precisamos fazer é deixar este Novalink onclick chamado este código. Mas, mais uma vez, isso é tudo dentro e exibição de login. Então, apenas por uma questão de simplicidade, vamos eliminar a exibição de login. E vamos colocar todo o código nas cenas do menu de navegação. É onde tudo está acontecendo com autorizado e os muitos itens e tudo mais, certo? Então eu estou indo apenas para copiar esta função de exibição de login. Se você apagou, se você tiver, então tudo bem. Você sempre pode pausar e reproduzir esse pedaço de código. E eu também vou pegar essas bibliotecas, então injeta e também Shan State Manager, gerente de navegação. E essas duas bibliotecas, ou superior ou bem, as bibliotecas e as funções injetadas ou classes, certo? E então o que podemos fazer é no link de navegação que diz F é igual a autenticação e logotipos. Vou colocar isso como um haxixe divulga como parece que recebe um link ativo. Mas felizmente, estamos usando um componente blazer e componentes blazer podem fazer no clique. Assim, da mesma forma que o botão na exibição de login, que era apenas um botão. E teria feito isso. Onclick começa psi nada. Eu vou dizer a este NovaLink que quando ele é clicado, ele deve chamar essa função. Comece a dizer ALT, que está aqui. Mais uma vez, você sente que queria separar estes PFAS tem o componente eo código por trás do arquivo. Então já passamos por um exercício ou fizemos isso. Tão poucos livres para ir em frente e fazer isso. Mas para esta operação simples, vou apenas mantê-lo simples. Eu não fui fazer tudo isso. Tudo bem. Então vamos tentar este processo de logotipo uma vez. Então eu sou Buck como JPSM management.com, e então eu clico em logout e você vê que é um processo completamente diferente, sentimento totalmente diferente. Eu sei que está realmente funcionando. Então você vê onde um monte de pontos e você pode voltar e se registrar. - Não. Assim, você vê que mesmo esses procedimentos podem ser gerenciados com nossas páginas e como tudo flui da perspectiva do usuário nas diferentes partes do aplicativo. Claro, nós autorizamos todos esses links. Então, uma vez que você clica em um link, você tem que ser autorizado. E a razão mais profunda para a autorização, apenas como uma recapitulação, é que uma vez que você autoriza você automática Valley, é um cookie criado que tem um Tolkien. E este Tolkien é o que é usado para autenticar este usuário através do APA, o projeto do servidor. Tudo bem, então lembre-se que o que o usuário está fazendo quando eles estão adicionando carros estão fazendo uma operação maravilhosa. Eles estão realmente no cliente por partes. Tudo bem? E, em seguida, quando eles têm que atingir um desses endpoints de API, tem que haver um Tolkien anexado a esta solicitação. E isso é uma parte do que foi enviado aqui quando construímos este cliente HTTP. E dissemos a ele que ele sempre deveria enviar um manipulador de mensagens de autorização. Agora, mais tarde, veremos como podemos enviar solicitações de API autorizadas. Porque enquanto atordoa, uma vez que estamos usando este cliente, ele vai automaticamente tentar anexar um Tolkien. Digamos que se nenhum token estiver presente, então você sempre terá backup 40, 1 ou 4 ou 3, vendo que você não pode acessar o recurso no lado da API. Então esse é o jeito dele. Ter o login do usuário é tão vital. Mas então pode haver uma situação em que você não quer que o usuário ou você não quer forçar o usuário a ter que fazer login para acessar uma determinada página ou ser capaz de interagir com determinados dados. Pode haver essa situação. Então vamos ver como o fim de semana faz isso mais tarde. 39. Javascript interop com bibliotecas de terceiros: Ei pessoal, bem-vindos de volta. Nesta lição, queremos dar um mergulho mais profundo em JavaScript, interoperabilidade, saber que tocamos em É um pouco quando fizemos uma chamada. E isso foi para o nosso próprio método interno onclick. Quando clicamos no nosso botão aqui, tivemos essa confirmação. Tem certeza de que deseja excluir corretamente? Agora? A realidade é que você provavelmente vai querer que isso pareça um pouco melhor. Você não quer que seja a baunilha de alerta tonelada de caixa de confirmação que vem embutida com um navegador. Você provavelmente quer usar uma biblioteca de terceiros como talvez para que você aprenda até agora, assim por diante para tipo de dar-lhe um pouco mais de caráter. Outra coisa que você provavelmente quer fazer é modificar um todo, que os dados estão sendo exibidos. Então certo, Não, tudo está apenas sendo exibido na mesa de rúcula e é apenas acontecendo e sobre e sobre. Então, quanto mais guardas eu era um lamda, o pH é não. Hoje o que vamos fazer é focar na exibição dos dados aqui na grade. Então nós vamos colocar em uma grade em vez de graduação e eu fui para focar na página de reservas porque eu acho que este seria bem com a grade mais do que os outros, pelo menos dentro do contexto, mas não há limitação . Tudo bem? Então o que queremos fazer é transformar essa exibição tabular de dados em uma grade. E a grade que usaremos hoje são as tabelas. Então, se você nunca usou as duas tabelas antes, você pode ir para Tabelas de dados.NET e você pode usar esta barra URL exata, exemplos barra estilo barra Bootstrap 4 dot HTML. Então, estamos usando Bootstrap 4 em nossa aplicação blazer. Então eu quero a skin para tabelas de dados que ficarão melhor com o layout geral que temos. Tudo bem, então quando você estiver nesta página, você será capaz de experimentar com ela. Se você está familiarizado com tabelas de dados, alguém sabe o que estamos fazendo hoje? Se não, então é uma maneira agradável e divertida, uma maneira fácil de tabular todos os dados que estão chegando. Tem paginação automática. Tudo isso está acontecendo do lado do cliente. Então isso é como uma vitória rápida. Mais tarde, à medida que o aplicativo começa a crescer, você provavelmente deseja implementar. paginação no lado do servidor reduzirá a carga. Mas para nulo para um pequeno para cima que apenas parecem ter esta vitória rápida através da implementação de tabelas de dados. E isso nos dará um pouco mais de insight sobre como o blazer interage com JavaScript e outras coisas que precisamos considerar ao fazer esse tipo de operação. Então, abaixo do show, todos os links de acesso ou CDN para todos os recursos necessários para as tabelas de dados funcionarem. E eles devem ser incluídos nessa ordem específica. Tudo bem, e no mínimo, esse código é necessário. Depois de tudo isso? Não. Estes são links e estes são links para arquivos que estão hospedados na Internet. Eles são bons em termos de quando você tem acesso à Internet. Eles realizaram aplicação para carregar mais rápido, especialmente como usar o blazer Klan disse. E especialmente se alguém decide ir progressivo no download do aplicativo. Você sabe, não ter o Fazlollah físico reduzir a pegada da AP em geral. No entanto, no modo offline ou alguém tenta abrir isso e vai para o acesso imediato à Internet. E esses links não podem ser alcançados no momento. Em seguida, nessa situação é provavelmente bits ele para ter os arquivos físicos. Então você sabe, você pode dar e tomar e avaliar seu apetite risco. Mas, mais uma vez, para a vitória rápida e apenas para a sensação geral de como JS interrompe funciona, vamos apenas usar os links CDN e estaremos incluindo essas referências em nosso projeto à medida que avançamos. Agora vamos começar. E o que vamos fazer é criar algumas referências bíblicas para esses links dentro do nosso aplicativo blazer null, onde temos que incluí-los é muito específico em partículas. Então nós temos que ir para a página index.html e eu vou apenas parar lá em execução ou em tudo para que possamos fazer nossa edição na página index.html que está na pasta raiz, e que é index.html. Precisaríamos incluir ou referências das escrituras antes do nosso arquivo WebAssembly ab.js do blazer dot. Então, eu quero dizer, nós podemos incluí-lo antes do serviço de autenticação, mas esse é um tipo de secundário para o fanático mais comumente para este agora isso é porque estamos usando o cliente blazer são projeto WebAssembly. Se estamos usando os projetos de servidor blazer, então ele estaria no arquivo host e uma restrição semelhante seria realmente aplicada. Então vamos continuar em nosso index.html e eu vou apenas colá-los lá. E então o que precisamos fazer é meio que ela até eles dentro de scripts dot js. Então eu vou dizer script é igual a S, Script, SRC é igual a e, em seguida, o link. E então vamos em frente e fechamos nossas tags de script. E então vamos fazer isso para todos esses links. E uma vez que você tenha concluído isso e você tem seus links parecendo algo assim, deixe-me apenas remover isso. Então podemos voltar para a página de tabelas de dados e desculpe, e nós podemos buscar os arquivos CSS para qualquer coisa que você é capaz usar e é quase as mesmas regras se aplicam ao lidar com gustation ou desculpe, o CSS é o que queremos. As mesmas regras se aplicam ao lidar com os aplicativos web. Se vamos usar na biblioteca, você tem que se certificar de que você tem todas as referências relevantes para a biblioteca. Então eu fui em frente e adicionei os links de ferramentas para o arquivo CSS da tabela de dados , é claro, swell realmente só precisa de um porque um deles é Bootstrap, que eu já tenho no meu projeto. Então eu vou ter apenas uma referência que é uma tela que é, eu vou rapidamente antes de prosseguirmos. Então, quando eles têm a referência andarilho, e esse é o segundo seus amigos aqui. As tabelas de dados ponto Bootstrap, 4 dot main.css. Então é disso que precisamos. Saber. Precisamos escrever nosso próprio arquivo de script, que vamos realmente fazer alguma inicialização dinâmica porque se planejarmos usar a tabela de dados em vários lugares que precisamos ser capazes de chamar uma função específica a partir das ações das tabelas, passando a tabela à qual queremos que ela seja aplicada. O nome da tabela ou algum identificador para a tabela, seja uma classe ou é o ID, sabemos como isso funciona, ou se você já está familiarizado com o funcionamento. É por isso que precisamos escrever este JavaScript personalizado que temos controle sobre. Tudo bem, então eu estou indo para a pasta www root, vá em frente e adicione uma nova pasta e eu vou chamá-lo de Scripts. E então dentro eu vou scripts, eu vou adicionar um novo item na forma de um arquivo JavaScript. E eu só vou chamá-lo de tabela de dados dot js, tabela de dados dot js lá vamos saber em data.table ab.js, eu vou ter uma função que me chama mantê-lo simples. Tabela de dados ou a tabela. Tudo bem? E esta função vai levar Qualidade Ambiental a tabela. Tudo bem? E praticamente tudo isso vai fazer é inicializar os documentos e dizemos document.ready. Você sabe que essa é uma parte padrão do jQuery. Função ouvida, abrir e fechar cinta, abrir e fechar chave encaracolada. E, em seguida, dentro disso, vamos apenas procurar elementos ou tabela de cifrão. Então, como eu disse, o nome do elemento ou algo para identificar o elemento é o que será passado como um parâmetro. Então ponto tabela e, em seguida, é tão simples como data.table. Então isso é tabelas de dados inteiras exigiria que você inicializá-lo. Tudo bem, nós só estamos passando por isso porque precisamos que ele seja acessível através da interrupção GS, interrupção. Mas então, caso contrário, todos nós sabemos que isso é tudo o que realmente precisamos em uma parte normal do HTML sentado. O próximo que eu vou fazer é remover nosso descartar a cauda porque o que acontece é que quando a página se move, nós não queremos que esse componente seja persistente no navegador, no console, e persistente na memória que tudo o que eu estava na tabela de dados três páginas é o nosso objetivo que queríamos através movido, certo? Então vamos chamar esse método de dispor que sabemos que vamos limpar essa tabela de qualquer referência. Está quente, certo? Ainda precisamos do documento ou qualquer outro, então vou copiar e colar isso. Mas dentro desta seção eu vou dizer dados de tabela ponto, tabela ponto destruir. Você quer ou mover os amigos deles. E então eu vou encontrar os elementos. E eu vou fazer isso dizendo document.write, seletor de consulta e procurar tabela mais. E, em seguida, uma palavra-chave que geralmente continua, é que diz sublinhado wrapper. E então eu vou dizer elemento nó pai removido elementos filho, certo? Então eu estou apenas removendo todos os traços deste elemento uma vez que terminamos com o DataTable, Então digamos que estão na página, vai carregar a tabela de dados, você navegar para longe. Queremos matar a tabela de dados e remover o elemento de toda a janela, de todo o aplicativo até que você volte de qualquer maneira depois de reinicializar, é uma subpartes do território. É algo que precisa ser feito para manter a obrigação no tempo de execução limpa e, mais uma vez, reduzir essa pegada do aplicativo. Certo, agora que temos esse arquivo de script no HTML, é claro, o Ultimaker para institutos, e farei referência a ele depois de tudo, certo? Então, eu posso arrastar e soltar isso do Solution Explorer e há nosso arquivo de script personalizado. Agora vamos passar para o componente onde pretendemos usar este JS Runtime. E eu disse que vamos começar com as reservas, passar para o índice das reservas. E eu vou começar por incluir até o topo traste na injecção, dizendo implementos descartáveis. Então eu descartável é cortantes C nós fora fazendo coleta de lixo teria realmente interagido com ele antes. Não. Então, quando este componente é terminado, eu descartável entra e destrói o componente na coleta de lixo de memória. Então isso vai funcionar lado a lado com nosso método de eliminação aqui, mas vamos vê-lo em alguns segundos. Co-executivo, tudo vai amarrar tudo. Agora eu vou dar a nossa mesa aqui e a IBM quando chamá-la de equipe de reservas, certo? Ou mesas de reservas. Esta mesa de reservas, certo? Não, todos sabemos disso. Até agora devemos saber que em HTML e damos a um elemento um ID, é um identificador único. Isso será útil quando vamos chamar nosso método assíncrono. Porque lembre-se que nós vamos estar chamando este add para o método tabela de dados, que vai tomar como um parâmetro o nome do elemento que deve aplicar a tabela de dados chamada 2M. Então o que vamos fazer aqui é chamar outros métodos protegidos. Tão protegido é afundar e nós queríamos substituir a tarefa. E esse que estamos substituindo é depois que a renderização está vendo, que leva um booleano chamado primeiro renderização para usar nas cargas no IntelliSense. Deixe-me tentar de novo. Tudo bem, tão protegido sobre ele e, em seguida, espaço. Lá vamos nós. Então nós começamos depois sob um canta Eu acho que porque eu escrevi assíncrono mais cedo, ele não fez ele não pediu que um. Tudo bem. Deixe-me corrigir isso para que eu queira que ele seja assíncrono. Claro, lá vamos nós. Então este método, e eu estou fazendo isso direito no não inicializado. Então você pode ver que existem alguns métodos aqui que podem ser exagerados para fins específicos. Então a renderização após, um dissipador realmente é um método para ver depois que o componente foi renderizado, o que você gostaria que eu fizesse? Agora lembre-se, vou dizer que é importante fazer certas coisas em certos pontos. Então, a forma como incluímos os arquivos, talvez tenha sido um exagero, talvez pudéssemos ter misturado muito a ordem. Claro que sim. É melhor carregá-los antes que tudo divida o Maryland aqui, deixe-me colocá-los de volta. Tudo bem. Isso é bom. Mas, no que diz respeito a um componente, se vamos chamar funções JavaScript de nosso próprio corredor, de código de terceiros. Precisamos fazer isso depois que o componente tiver carregado todos os seus ativos. Então é isso que este método diz após renderizador assíncrono, depois que o componente terminar de carregar tudo o que ele precisa fazer. O que você quer fazer com esse extra? Então, enquanto queremos fazer isso, isso é extra. Então eu vou apenas remover essa linha padrão. E eu vou ver que eu não quero esperar um, G, S, e nós sabemos este código, nós fizemos este trimestre, o JS direito invocar é afundar e recuperar um valor tanto que eu vou apenas copiar isso, certo? É o mesmo código. Js é nosso objetivo, invocar uma pia. A única diferença é o tipo de retorno. Então eu queria colocar este tipo de retorno como objeto. Ou você pode realmente ver uma arte vazia pia, desculpe, invocar vazio assíncrono, que não retorna nada, certo? Então vamos tentar o vazio. Se o menino não funcionar, nós apenas voltar para o, para o invocar Async. Mas quando fazemos isso, precisamos passar esse nome de método. Então, no caso de nossa confirmação, o nome do método em JavaScript é confirmado, certo? Nessa situação, o nome do método que estamos chamando é nossa tabela de dados. Essa é a nossa metodologia criada adicionar tabela de dados. Certo, quais são os parâmetros? Então isso leva um parâmetro, a confirmação, a mensagem que queremos que ele seja exibido nesta situação, nosso parâmetro aqui é o valor ID para a nossa tabela. Certo, hashtag C ou libra, e então o valor do ID, e pronto. Então, quando o componente é renderizado, queremos chamar o código JavaScript. Tudo bem? Não, eu teria mencionado que o descartável, então precisamos ver o que acontece quando você está se livrando. Então, vamos amarrar o código jQuery descartar para os códigos quase padrão eliminados componente. Eu só vou dizer vazio Eu ponto descartável descartar quando você está se livrando. Isto é o que eu quero que você faça por mim. Eu quero chamar g is invoke. E eu vou apenas mostrar isso real É isso, certo, mas método diferente desta vez, mesmo parâmetro, mesmo método de chamada exceto que eu estou chamando tabela de dados é descartado e isso é um vazio, então nós não estamos dispostos a esperar essa chamada de método. Tudo bem, então vamos dar uma volta e ver se nosso discurso de reserva vai refletir nossas necessidades de que ninguém vamos para a nossa página de reservas. Lá vamos nós. Temos nossa tabela de dados exibindo nossas opções de paging. Podemos pesquisar seu instantâneo tudo que poderíamos fazer no fim de semana normal em HTML sentado, não fazer em nosso aplicativo blazer, isso só vai mostrar como é fácil incorporar uma biblioteca de terceiros. Então eu acho que eu comecei com o exemplo de que você provavelmente quer mudar a antiga desconfirmação para algo como um doce alerta ou algo que você pode ir em frente e experimentá-lo por conta própria, obter os ativos, colocá-los no lugares, e então você só tem que chamar o seu invocar no momento apropriado. Agora observe que quando eu navego para as outras páginas, tudo está limpo. Eu não coloquei as tabelas de dados nas outras páginas, mas quando eu voltar para as reservas, tudo está bem. Agora, se não estava se livrando e eu vou mostrar a você a consequência do caso de desposse. Você está pensando que talvez sejam passos desnecessários. Então eu vou apenas comentar essa linha de reinício. E então olhamos para a página de reservas. Agora olhe para o topo. O que eu fiz foi ir a reservas, ir a outra página sobre queixos combustíveis. Agora estou em reservas. Veja o que acontece quando vou aos veículos. Ele ainda está estocando, então não está se livrando da tabela de dados do contêiner. Porque lembre-se que este WebAssembly uma vez que é carregado, tudo é carregado na frente de uma só vez. Então temos que nos manter pequena pegada fora certas coisas que não queremos penetrar em toda a aplicação nesta situação, que a tabela de dados de apenas a página de reservas está subindo, começou a aparecer nos clientes. E toda vez que eu vou para reservas e vou para outra avaliação de página para continuar empilhando e empilhando. É por isso que esse código de eliminação é da maior importância. Então Alice Goldbach não comentou isso. Eu sinto muito. Eu não queria apenas experimentar e estou feliz que você está aqui. Tudo bem, de modo que é uma introdução agradável e fácil para interromper interrupção JavaScript, Desculpe, com blazer. Você pode estender em novamente tra, outras bibliotecas de terceiros, e, em seguida, talvez pode empurrar suas habilidades para cima lances e desenvolver uma biblioteca personalizada ou componente que apenas implementa uma dessas bibliotecas para que você possa reduzir a quantidade de trabalho e você está chamando o código de repetição para invocar GS. Tudo bem. 40. Suporte de upload de arquivos: Ei pessoal, bem-vindos de volta. Nesta lição, queremos dar uma olhada no suporte de upload de arquivos que o Blaser tem. Então o que vamos fazer para esta lição é adicionar um campo de imagem à tabela de veículos. uploads de arquivos não estão limitados a imagens, é claro , mas como exemplo, vamos usar o veículo porque quando estamos adicionando um novo veículo, provavelmente queria tirar uma foto do veículo, coloca-o no sistema por qualquer motivo . Mas também pode ser aplicado a talvez quando estamos a bordo do cliente, provavelmente quereríamos alguns detalhes sobre eles. Sabe, seus passaportes são uma carteira de motorista válida são algumas formas de documentação. Portanto, o mesmo conceito que estamos prestes a aplicá-lo ao upload de uma imagem do veículo pode ser aplicado em vários cenários em quaisquer regras de negócios, com requisitos que você possa ter. Então, vamos começar. Então, na classe de domínio do veículo, queremos adicionar dois novos campos, e eu vou apenas adicioná-los abaixo aqui. E o primeiro vai ser público pela RE, então é apenas um orçamento e eu vou chamar essa imagem, há essa imagem de nuvem, certo? E definir quando estamos transportando nossa imagem do aplicativo cliente para a API. Nós vamos ter que tipo de convertê-lo em uma matriz de bytes, uma fazenda, e então nós vamos desmontá-lo, enviá-lo sobre o fio, e então remontá-lo para salvá-lo do outro lado. E isso é praticamente o que a tala fora do tópico. Mas o que realmente queremos fazer é tomar nota do nome, alguém para ter este novo campo chamado nome da imagem. E isso é realmente o que vai identificar a imagem. Então o que nós vamos fazer é quando nós recriá-lo e salvá-lo para o disco na API disse que vamos ver qualquer nome que demos no banco de dados para que eles possam ser recuperados sempre que precisamos dele. Não, um destes é necessário no banco de dados, e este não é o que é necessário. Então o que podemos fazer é adicionar uma anotação acima dela para dizer e não limpar. Tudo bem, então não esfregado é basicamente vai ver um quando estamos prestes a fazer uma migração, ignorado este campo. Tudo bem, então isso é muito importante sempre que você está editando suas classes de domínio e você provavelmente coloca em campos que você não quer no banco de dados. Você acabou de adicionar esta anotação não mapeada e ele irá ignorar o banco de dados. Tudo bem, então vamos ver isso na prática. Então eu vou apenas adicionar migração. E esta vai ser a imagem do manto. Veículos. Deixe isso pra lá. E quando isso for feito, podemos dar uma olhada e ver que só temos um dos dois campos que acabamos de adicionar. Assim, o nome da imagem não é adicionado dois veículos. Então podemos ir em frente e pegar os dados, certo? Então saiba que isso está feito. Vamos pular para a API e fazer alguns ajustes. Primeira ordem de trabalhos, por favor, injete estas duas linhas ou estas duas bibliotecas. Temos o host da web e o ambiente, e temos o acessor de contexto HTTP AI. Então isso vai nos dar acesso à pasta de arquivos estáticos. Então dotnet core por padrão como uma pasta de arquivos estáticos, que é a nossa raiz www de Tipo de passou por isso anteriormente. O que é armazenado nisso? Então, dentro dessa pasta, queremos ter outra pasta chamada Upload. Então você pode ir em frente e criar que basta clicar com o botão direito do mouse, ir para adicionar e dizer nova pasta e chamá-lo de uploads. E, em seguida, nossos objetos de ambiente de host web olho que estamos injetando aqui vai realmente nos dar acesso fácil para construir nossa rota para a nossa pasta uploads ou acesso contextos HTTP para que, como você sabe, nos dá acesso a alguns detalhes da solicitação em um- off solicitações, detalhes que queremos é para o servidor atual ou o valor do host atual, modo que nós realmente construir uma URL, que é o que nós vamos estar armazenando no banco de dados. Então vamos saltar para as Cria. Tudo bem, e remova o meu ponto de interrupção aí. E já sabemos que estamos fazendo nosso tratamento global de erros neste lado da API. Então não temos que nos preocupar em tentar e pegar se houver algum erro ao longo do caminho, ele vai jogar os 500 e nós podemos seguir adiante. Mas o que queremos realizar aqui é a construção da URL que o RI, digamos, a reconstrução do arquivo. Porque lembre-se que é uma matriz de bytes, certo? Não, ou ele vai ser uma área ruim quando ele está vindo do cliente através da API, assim por diante para reconstruí-lo de uma matriz de bytes em uma imagem física em nossa pasta de uploads. Então vamos entrar nisso. Então, primeiro, então eu vou ter é var URL, e isso vai ser igual HTTP contextos acessor não HGTV contexto dot request, dot host dot valor. Então eu vou chamar esse URL, poderia chamá-lo de host atual, URL atual. Mas, eventualmente, apenas falar sobre o, você sabe, como quando estamos rodando do Visual Studio vai ser dois-pontos host local. Essa porta quando a implantarmos na internet, será qualquer nome de domínio. Então isso é tudo o que isso realmente vai estar recuperando. Em seguida, queremos construir o nosso caminho. E como eu disse, ou caminho será vindo do ambiente de host web dot web root path, que apenas nos dá um caminho direto para WW root. E então temos nossa pasta de uploads. E então nós vamos apenas injetar no nome da imagem do ponto do veículo, que, claro, deve ser passada com todas as informações no objeto VGG em um momento de criação. Agora vamos entrar nas coisas boas onde realmente criamos o arquivo. Então vamos usar nosso fluxo de arquivos para fazer isso. Então temos fluxo de arquivo VAR é igual ao ponto do sistema o ponto do arquivo dot criar. E então o que estamos criando é qualquer imagem ou o caminho que construímos aqui, estamos apenas passando pelo fim. Em seguida, nosso fluxo de arquivos, vamos dizer-lhe para escrever imagem de ponto de veículo. Lembrem-se mais uma vez, imagem é a nossa área de mordida, por isso são os nossos dados. Então estamos vendo certo, esses dados começando em 0 e De 0 para todo o comprimento da matriz. Então conceitualmente, então vendo um arquivo de write-off, este bico, praticamente certo, se você apenas passar o mouse sobre ele, você verá gravações de um bloco de bytes para o fluxo de arquivos. Então qualquer tipo de arquivo é, certo. Não se limita a imagens, estamos apenas fazendo imagens aqui, mas qualquer tipo de arquivo, estamos apenas escrevendo para o sistema de arquivos. E depois fechamos o riacho assim que terminarmos. E então o que vamos fazer é mudar o nome da imagem no nível do objeto. Então nós já temos o nome e estamos usando-o para o caminho. Tudo bem, no entanto, nosso novo nome, nome da imagem do ponto do veículo vai ser igual a https dois-pontos barra barra nossa URL, certo? Ou você pode chamá-lo de host atual ou valor de host, você quiser chamá-lo. Mas é aí que o nosso endereço praticamente barra, uploads barra e, em seguida, a origem no IM que veio através da API. Então isso é o que será armazenado no banco de dados. E então vamos em frente e fazer a inserção regular e Salvar. Tudo bem, então eu vou apenas colocar algum espaço lá que está criando o arquivo no lado da API ou no lado do servidor. Muito bem, então vamos saltar para o nosso componente de forma para os nossos veículos. Então eu vou colocar em um novo formulário grupos tais provavelmente apenas colocá-lo no topo. E eu vou dizer que este é para uma imagem opcional, certo? Portanto, rótulo de imagem opcional. E então o que vamos fazer é ter um arquivo de entrada, língua. Tudo bem, então você viu os diferentes tipos de entradas. Nós fizemos isso. Fizemos número, fizemos tomadas. Então nenhum lugar fazendo arquivo de entrada. E então inalterado vamos fazer um manipulador de arquivos e manipulador de eventos Exxon. Tudo bem. Eu também vou colocar em um acetal peta lá com um pequeno aviso, aviso de arquivo de upload. Então ele pode ir em frente e fazer isso. E então vamos fazer as inicializações abaixo. Então, o primeiro que é, eu vou inicializar o aviso. Agora, isto inicializa-o. Não precisa mudar nada, certo? - Não. Ele só irá configurá-lo se a necessidade do aviso surgir logo abaixo deste cisne, nós vamos ter nosso telefone vazio privado Shun para lidar com os uploads, desculpe, a seleção de arquivos. Então eu tenho um vazio privado lidar rápido e como Sean. E então temos como parâmetro o arquivo de entrada alterar o evento R, e então R Tolkien, que estamos apenas chamando e. Tudo bem, então saberíamos que todo ou eventos funcionam até agora que só fizemos ao vivo em um envio válido. E então agora estamos olhando para um evento personalizado que é 45 seleção. Assim, sempre que um arquivo for selecionado, ele irá acionar isso automaticamente. E este é o tipo de dados que armazenaremos todos os detalhes necessários sobre o evento que está ocorrendo, certo. Um caso em ponto vai ter uma variável de arquivo. Eu vou dizer var arquivo é igual a ponto E. Eu queria olhar para E. Vemos que temos arquivos, cones de arquivo. Vamos conseguir vários arquivos? Então, se estivéssemos permitindo que o usuário carregasse vários arquivos, você poderia apenas obter todos eles uma vez como uma matriz ou coleção bem aqui estamos. Só estamos pedindo por um. Então, o arquivo E dot. Mas então precisamos ter certeza de que esse arquivo realmente tem conteúdo, certo? Então ou porque lembre-se que se a clínica, mesmo que eles não selecionem nada, o evento teria sido demitido. Certo. Então estamos tentando entrar no arquivo, mas ainda precisamos ter certeza de que algo foi selecionado e então podemos começar nosso processo. Tudo bem. Nenhum preenchimento automático foi abundância de cautela. Quer verificar nossa extensão no arquivo. Então eu vou dizer var EXT, que é abreviação de extensão. E então eu vou apenas fazer um System.Out.Println. Obter a extensão sobre o ponto de arquivo Nim. Tudo bem, então este objeto de arquivo tem tudo o que precisamos saber sobre os EUA agora com o tipo de conteúdo, nós temos o último modificado o nome, o tamanho de tudo o que precisamos. A propósito, esse tipo de arquivo é chamado sobrancelhas nosso arquivo. Então esse é o tipo de dados e que está disponível para upload de arquivos em blazer, sobrancelhas ou arquivo. Em seguida, vamos colocar em uma instrução if para verificar as extensões de arquivo que estamos atendendo para ele. Então, nesta situação, só queremos JPG, JPG e PNG. É claro que, com base na sua situação, você pode querer mais ou você pode ter restrições diferentes. Mas, mais uma vez, tudo isso é conhecimento transferível e conceitos transferíveis. Então aqui eu estou apenas verificando se a extensão que nós apenas obtivemos a partir do nome do arquivo é se ele contém um dos nossos aceitos, mas eu estou colocando-o para baixo porque às vezes os nome do arquivo é se ele contém um dos nossos aceitos, mas eu estou colocando-o para baixo porque às vezes osarquivos são salvos com todas as maiúsculas são maiúsculas mistas como extensão. Então você sabe, apenas para manter tudo em um nível onde forçá-lo a minúsculas e comparar com o equivalente em minúsculas. Então, nesta declaração if, se nos é dado um dos tipos de arquivo que estamos procurando, então eu quero criar um novo valor para o pico, o que eu estou chamando de ID de pico, mas é realmente que será dado para a foto. - Não. Meu cenário ou minha razão para fazer isso é, eu não sei que nome divertido esse usuário pode ter para qualquer um desses arquivos, certo? Eu não quero arriscar ter um confronto entre dois arquivos com o mesmo nome de arquivo também. Então o que estou fazendo é gerar usando a biblioteca de grade, bons pontos, novo bom para uma string. E o que acontece é que um bom lhe dá como uma string de 16 caracteres. E alguns desses blocos de caracteres são separados por hífens. Só estou substituindo todos os hífens por um texto em branco. Então, no final, você só tem uma grande bolha de caracteres aparentemente aleatórios. Se você não está familiarizado com o que é pegajoso deles, isso é o que você vai ser repreendido sobre isso. E então estamos vendo o nome da imagem do ponto do veículo é. Eles estavam mesclando esse volume vazio com a extensão. Então é isso que queremos chamar o arquivo no sistema de arquivos. Então eu vou inicializar uma imagem de ponto do veículo, que é o nosso militar para um novo por RE dado o tamanho file.js. Então nós temos o arquivo agora, então nós apenas inicializar uma bateria, é tamanho de lote de queda. E então nós vamos esperar arquivo não aberto fluxo, ponto ler uma pia e, em seguida, imagem de ponto de veículo, e isso é uma cena, então é por isso que há uma linha. Então, vou fazer disto um vazio de pia. Tudo bem, e isso deve cuidar dessa era. Lá vamos nós. Tudo bem, então isso é basicamente apenas indo para dizer Arquivo Abrir e copiar ou conteúdo em nossa matriz de bytes, que é imagem de ponto de veículo. Agora, isto é se conseguirmos as coisas que queremos. Caso contrário, eu só vou dar um aviso de Upload File. Então, algum conteúdo para ver. Selecione um arquivo de imagem válido e informe-os sobre as extensões. Eu não vou colocar JPEG. Você poderia se quisesse, mas acho que está claro o suficiente. Na verdade, se obtivermos o arquivo do carrinho, eu só quero ter certeza de que se o erro estava lá antes, que estava sempre. Então eu vou apenas inicializar isso ou definir o valor de upload arquivo aviso destruir não vazio se nos for dado o carrinho. Então, se é MDRD e, em seguida, ele ainda vai estar vazio. Se você digitar conteúdo e tivermos o caminho certo, então ele ficará vazio. Não, então está tudo bem. Certo, então vamos pegar esse pedido para uma volta de carga artificial. A maioria do formulário. Eu vou apenas ir em frente e selecionar uma das minhas imagens aqui e depois criar o veículo. E então vemos que estamos recebendo o novo veículo, mas não temos nenhuma maneira de exibir esse veículo, certo? - Não. Então seria bom se víssemos a imagem aqui na página da página de índice para mostrar qual veículo é. Então, vamos saltar para a página de índice e fez a seguinte modificação vão esvaziar novo cabeçalho nesta tabela. Não, eu não tenho que colocar imagem. Eu não vou colocar nenhum texto no cabeçalho, mas nós vamos ter esta nova coluna, este novo td que só vai ter IMG SRC sendo igual ao nome da imagem do ponto do veículo. Então lembre-se nome da imagem é o caminho no servidor onde a imagem pode ser telefone. Então só estamos vendo sua fonte. É esse URL praticamente que teríamos construído a partir do lado da API. E então eu estou apenas colocando em um estilo personalizado para dizer que altura e largura são 150 pixels. Então eu vou apenas salvar isso e pegar, e quando nós recarregamos nossa página, nós vemos nossa imagem aparecendo. Tudo bem, então mais uma vez isso é apenas incorporar. Deixe-me fazer um elemento inspecionar e você vê que é o URL https host local. Então foi isso que obtivemos através do contexto, acessá-la desculpe, o valor do host, e então a pasta de uploads e, em seguida, o nome do arquivo de imagem. Certo, então vamos tentar adicionar um sem a imagem. Então Toyota visita, eu só vou colocar em alguns valores fictícios para passar por isso rapidamente. E então vamos em frente e clique em Criar veículo. E tudo bem, então algo interessante acabou de acontecer. Um. Não há criação. Então, claramente, houve um erro também. Na verdade, vimos que 500 páginas descarregadas e depois descarregamos. Então algo é definitivamente 0. Então vamos voltar para o controlador e vamos ter que fazer algumas modificações aqui. Então o fato é que nosso código aqui pressupõe que uma imagem estará presente. Então eu acho que está me dando um erro neste momento porque então ele está vendo, certo? Nada porque isso seria nulo neste momento se nenhuma imagem fosse selecionada durante o processo de upload do arquivo. Tudo bem, então o que nós queremos fazer então é talvez envolver isso em uma declaração if que nós só tentamos fazer tudo isso quando a imagem ou o comprimento da matriz de bytes é maior que Z. Tudo bem, então eu fiz essa declaração simples. Se o comprimento do ponto da imagem do veículo é maior que 0, então vá em frente e obtenha o URL, obtenha o caminho, e faça todas essas coisas extravagantes antes de tentarmos salvar. Então isso significa que se nenhuma imagem GameOver, então ele vai apenas operar como normal. Então este passo é importante porque também queremos levar isso em consideração quando alguém está atualizando o veículo, eles podem ter iniciado a operação de atualização e alterado a imagem ou não, certo? Então, quando sabemos quando dois genes. Então esta afirmação poderia realmente ser reutilizada aqui. Se essa matriz de bytes tem dados, então é uma suposição segura de que uma nova imagem está presente. Temos que reconstruir o caminho do arquivo com base no novo nome que foi dado a este novo para carregar esse arquivo, ir em frente e atualizar os campos de dados. E, em última análise, atualizamos o veículo. Então você percebe que todas essas linhas de código estão tipo de repetição. Então seria bom se nós criássemos alguma forma de função que tipo de todos esses trabalhos pesados e provavelmente apenas retorna esse caminho de imagem. Então eu só vou pegar todas essas linhas e eu vou criar outra função privada, não. Então esta função, eu só fiz isso para que você sempre pode apenas pausar e replicar o que eu vou guiá-lo através dela de qualquer maneira, cadeia privada, eu estou chamando de criar caminho de arquivo. Eu poderia ter chamado “criar arquivo”. Depende coisa provavelmente criar arquivo é um pouco TR descrição faz ele está criando o arquivo. E então o que vamos para possível enquanto a matriz de bytes da imagem e o nome da string, certo? Então eu copiei e colei o código. É por isso que temos essas setas de referência. Então vamos trocar esses velhos. Então, em vez de veículo, o nome da imagem, eu só vou dizer o nome. Em vez de imagem do ponto do veículo, estou passando imagem. E então isso também seria imagem. Tudo bem? E, em seguida, no final, eu só vou retornar que construído URL https barra cortar os URLs uploads e, em seguida, estamos passando nome de dólar. Tudo bem. Então o que podemos fazer então é ver se o comprimento da imagem é maior que 0, então o nome da imagem vai ser uma chamada para essa função. Então nós o chamamos de Criar Arquivo. E estamos de passagem no veículo. Pontos. E o primeiro é a matriz de bytes, então a imagem e o nome da imagem do ponto do veículo. Tudo bem, assim não temos que repetir muitas linhas de código é apenas uma simples declaração se e 19. Então eu acho que isso é muito mais, é muito mais limpo e é mais reutilizável neste formato. Se temos uma imagem que chamada de função atualizar este campo no momento em que ele voltar para aqui, sabemos que o arquivo já teria sido criado e, em seguida, ir em frente e atualizar. Tudo bem. Então essa é uma questão resolvida, certo? Isso é o que estava jogando a era quando não havia imagem fornecida através de um erro? - Não. A outra questão é que temos o nosso interceptor que significa jumbo, o que é que ele cria aumento. Tudo bem, então esta é uma criação para veículos. E lembre-se que nós tínhamos configurado nossos interceptores para monitorar todas as atividades. Então, na verdade, tem uma resposta aqui. Se o seu código não se parece com isso, tudo bem. Isso não deveria estar lá. Mas temos este interceptor para monitorar a antiga coluna desta operação e, em seguida, tomar uma certa ação. Então nós realmente vimos o axônio porque você viu o texto vermelho descarregado na tela, mas então ele ainda navegou para a página de índice. E isso é o que não queremos necessariamente, certo? Então temos que fazer uma pequena coragem aqui, onde durante o teste, durante a implementação, eu teria lançado uma exceção no final desta declaração switch que eu mais tarde. Então nós vamos ter que colocá-lo de volta porque o que aconteceu é que ele atingiu esta declaração se. Claro, se você tem uma flecha, isso significa que temos provavelmente FIFO 100 muito. Um dos acima, sabemos que não é um 40 para porque ele foi para o recurso. Sabemos que não é o não autorizado. Então isso significa que deve ter sido um 500 e, em seguida, deve ter a ferramenta bones, a página 500, mas então é ossos lá e, em seguida, ainda navegou aqui. Então precisamos de uma maneira de parar a execução do aplicativo depois que isso acontece. E essa maneira infalível seria lançar a nova exceção. Então eu vou lançar uma exceção de solicitação HTTP. Então esta é a exceção de solicitação HTTP apenas, ele só vai ter a mensagem nele. Só para ver que isso foi provavelmente o que deu errado. E assim isso irá parar a execução depois que ele navega para essa página. Então, não iria tão longe. Tudo bem. Vamos tentar isso de novo. Tudo bem. Então estamos de volta aos veículos criar nova página de veículo. E eu não vou escolher uma imagem e então eu vou ir em frente e criar um veículo. E assim obteve esse erro. Desculpe-se, isto deve estar verificando se não é igual a null. Tudo bem, então eu não deveria estar tomando o comprimento porque se nada for fornecido, então será nulo. Então esse é o meu erro. Vamos apenas fazer esse ajuste para que a imagem do ponto do veículo não seja igual a nulo. Em seguida, vá em frente e tente fazer o veículo criar. Certo, então vamos tentar isso. Certo, então estamos de volta na tela de criar novos veículos. Não estamos escolhendo uma imagem. E então vamos em frente e criar veículo. Então, agora que fizemos isso, vemos que ele vai para a cabeça, cria-o, com sucesso, e não há imagem. Tudo bem, o que vamos fazer é garantir que nossa interceptação funcione porque fizemos isso consertado. Só quero verificar. Então, no início disso cria, certo? Acho que iríamos fazer este teste onde eu abri uma exceção no início, mas então isso foi em obter uma lista. Então não havia nenhum código real para navegar em qualquer lugar depois. Então é por isso que eu teria deixado a atividade sem quaisquer bandeiras vermelhas, mas normalmente apenas lançar uma exceção no topo do post VBR. Você não precisa necessariamente fazer esse passo. Você pode apenas seguir junto. Eu só queria verificar isso ou modificação onde mais uma vez preencher ou formulário com dados fictícios e, em seguida, clique em Criar veículo. E então vemos que estamos pousando em nossos 500 sem sermos navegados para longe. Então esse é o comportamento esperado deste interceptor e como ele navega. Tudo bem, então nós ajustamos isso e isso são apenas as partes do processo. E às vezes você vai olhar algo e, mais tarde, você encontra um erro. Mas é sempre bom pegar essas coisas cedo. É bom que onde, você sabe, passando por essa atividade e então vemos uma fenda na armadura e ajustada de acordo. Certo, então mais uma verificação e isso é testar o recurso de atualização, certo? Então ds1 para ir em frente e atualizar a imagem para o Prius. E eu vou escolher as belas estradas azuis que eles são. Clique em Atualizar e lá vamos nós. Então você vê criando trabalhos, atualizando trabalhos. Não havia imaginário que existisse. Deixe-me fazer isso mais uma vez. Porque você sabe, as imagens, o preenchimento de um sistema, não, então temos todas as quatro imagens sendo exibidas. Tudo bem, então você pode pegar esse conceito e ir em frente e provavelmente melhorado pela tela de visualização. E mais uma vez, esse conceito é algo que você pode aplicar a outras coisas quando se trata de carregar arquivos. Outro bom exemplo, mais uma vez, seria exigir alguma documentação legal dos clientes. Após a criação, você precisa de identificação, qualquer que seja o número de identificação fiscal fornecido, você precisa de um ID muito específico, certo? Ainda voa nisso. Então você pode ir em frente e experimentar com isso. Mas você tem a estrutura a seguir. 41. Repositório de HttpClient genérico: Ei pessoal, bem-vindos de volta. Nesta lição, queríamos que este curso configurasse um repositório de solicitações HTTP. E todo o contexto para isso é que há algumas coisas que queremos fazer e temos que fazer continuamente quando fazemos nosso cliente HTTP. Porque quero dizer, esta linha é simplesmente NADPH. Nós pesamos as postagens do cliente como JSON, JSON assíncrono, obter os endpoints e passamos o objeto, é simples o suficiente. Mas suas ligações podem ficar um pouco mais complicadas. E nesta situação, um nível de complicação que tivemos que colocar este interceptor unidirecional para este interceptor diretamente em todos os componentes, no componente ou no código atrás. E então tivemos que nos certificar de que esta linha estava presente. Tenho certeza que isso foi meio irritante. E, em seguida, se você tem outro, se l outro componente ou eles vão ter que levar isso em consideração, eles têm que sair deste e, em seguida, geralmente em septos. E então, se algo mudar, você tem um monte de coisas para chitas. Então, é claro, é sempre bom quando colocamos nosso código que sabemos que está se repetindo de uma forma mais utilizável, certo? Então, além disso, até que o interceptor batendo o cliente HTTP está sendo injetado diretamente em cada componente. E então temos essas chamadas de função. E então, se tivermos qualquer informação adicional ou rebatedores que precisamos colocar sobre eles teria todos esses componentes e modificá-los mais uma vez. Então o que vamos fazer é configurar alguns repositórios genéricos. Então você teria visto o poder de ter coisas genéricas já de quando fizemos nossa unidade de força para formar a API disse, certo, nós dissemos o repositório genérico pobre e nossas unidades de repositório de trabalho. Então, no lado do cliente, vamos estar configurando nosso repositório de clientes HTTP. Tudo bem, alma. O que eu vou fazer é criar uma nova pasta no projeto cliente. E nós vamos chamar essa nova pasta, e eu vou chamá-la de contratos, certo? Porque, de um modo geral, você tem contratos e você tem serviços bem aqui, nós chamamos isso de repositório de ferro e repositório de convenções de nomenclatura. Mas, essencialmente, esse é o mesmo conceito da interface que diz que isso é o que eu posso fazer. E então temos a implementação que faz isso. Então sabemos por saber que tentamos injetar o contrato em nossas aplicações como fizemos com a unidade de trabalho I em vez da unidade de trabalho. Muito bem, então o nosso contrato aqui vai ser uma nova turma. O que estou criando aula de arte. Claro que quer mudar isso. Eu só estou chamando de repositório HTTP. Vamos em frente e adicionar isso e, em seguida, mudá-lo de interface de classe. Tudo bem? E então este repositório vai tomar um parâmetro genérico de t. Nós estamos apenas chamando-o t, onde t é uma classe. Aquela betonilha ou classe T cólon. Certo, então estamos acomodando os diferentes tipos. Mais uma vez, genérico. Então, dentro desta implementação, vamos ter alguns métodos. Obter, obtém que retorna uma lista de t. Então t mais uma vez é o objeto que estamos solicitando ou o tipo de dados que estamos solicitando. Então, passe por curvas. Um recebe que retorna uma lista e nós provavelmente poderia qualificar isso um pouco mais para dizer obter todos estão recebendo lista ou algo assim, Eu vou deixar que eu recebo todos os quatro são nulos. Mas tarefa que irá criar, que leva a URL eo objeto a ser criado. Temos tarefa as atualizações que dias o URL, o objeto e o ID. E nós temos presas deletar, que apenas leva o URL e o ID. Tudo bem, é isso para o nosso contrato. Eu repositório HTTP sei em nossos serviços são essas razões a pasta de serviços que eu vou adicionar em kras e nós vamos chamá-lo repositório HTTP. Agora, repositório http, vamos ter que genérico ou parâmetro. E ele vai herdar do repositório HTTP, que também tem esse parâmetro genérico. E depois qualificamo-lo onde é uma classe. E depois vamos em frente e incluímos os namespaces ausentes. E então precisamos fazer essa implementação da interface. Então agora temos nosso método criado e estamos prontos para, você sabe, florescer. Então eu vou precisar injetar, no mínimo, o cliente HTTP. E claro que sabemos que temos o interceptor que queremos presente em cada chamada. Tudo bem, então eu vou fazer um construtor. E neste construtor eu vou ter o cliente HTTP ou serviço interceptor http. Então eu estou indo para ir em frente e incluir quaisquer referências ausentes e então nós apenas inicializar campos. Então eu copiei e colei os nomes dos campos com o nas partituras. Então deixe-me trocar essas aveia. Estamos prontos para esfriar o que acontece em um criar. Então vamos olhar para trás para o que fizemos quando criamos. Então, quando dissemos criar microfone, seria Wanda interceptor, e então nós faria essa chamada que leva esse endpoint, o endpoint apropriado e o objeto para a criação. Então eu vou apenas copiar Eu não fui ao tribunal. Bem, eu só vou copiar. Tudo bem. E então vá em frente e inclua todas as referências que faltam. Então MC método uma pia. E também precisamos incluir, bem, não precisamos incluir endpoints. Razão significa que devemos fornecer o URL. Então eu não sei qual é o tipo de objeto. Não sei qual é a URL aqui. Estava bem acoplado porque você sabia que estava no mercado. Então sabíamos passar por cima disso e daquele objeto. Então aqui não sabemos qual será a URL. Então eu não posso usar esse valor duro como ele vem de componentes específicos. Eu só vou tomar URL que é passado em quando este método é chamado. E eu não sei qual é o objeto. Balas, vou passar no OBJ e é isso, certo? Para a exclusão. O que acontece quando o fizermos? Vou saltar para um destes componentes de índice. E então você pode ver aqui que eu nem sequer usei o interceptor aqui. Certo, então essa é uma dessas coisas. Então queremos interceptar estão presentes o tempo todo. Mas é claro que foi tedioso estar repetindo isso, mas eu vou pegar emprestado essa linha de código que é relevante, assim por diante , o Delete, vamos começar com nosso interceptor no terceiro evento, certo? E este método assíncrono. E então vamos apenas ver URL e o ID. Mais uma vez, não é específico, então você tem que manter o mesmo formato embora. Então URL barra ID, tudo bem, para obter, e eu tenho certeza que você está recebendo a idéia por não, este interceptor deve ser usado em todos os métodos. Porque é claro que queremos monitorar o que está acontecendo, certo? E então vamos colocar as chamadas apropriadas com base no que teríamos feito no componente correspondente. Tudo bem, então eu só fui em frente e preenchi todos os métodos restantes. Então, para obter, temos o termo de interceptação e, em seguida, retornamos nosso cliente de pesos de JSON assíncrono, você pode precisar incluir uma biblioteca ausente, por exemplo, esta. Mas nós incluímos isso e seguimos em frente. Nós temos o parâmetro tipo do tipo T porque mais uma vez, não sabemos o que estamos recebendo. E então nós estamos vendo URL cortar o id 4 recebe todos os conceitos semelhantes exceto que estamos retornando uma lista e isso provavelmente deve ser mais como Alice porque nós vimos I lista no pedido, certo, então eu vou apenas retornar e tudo bem. E a URL, tudo bem. E, em seguida, para a atualização da tarefa vamos ver, colocar-nos JSON uma política de sincronização, RL slush o ID e nosso objeto. Mais uma coisa que provavelmente devemos considerar ou teremos que fazer é dispor, certo? Então só queríamos ter certeza de que manteríamos essa força. Portanto, há uma interface que podemos incluir descartável. E então podemos ter herança múltipla de várias interfaces em C afiado. E então isso implementa o método descartar aqui mesmo. Outros sobre editar com o nosso código onde dizemos em ponto interceptor descartar eventos. Tudo bem, então a seguir precisamos ir ao nosso arquivo program.cs e registrar nosso repositório HTTP. Então, isto é tudo o que vamos fazer. Serviços de ponto construtor são transitórios e, em seguida, vamos dizer typeof e, em seguida, passar no nome do nosso contrato, o repositório HTTP olho, e, em seguida, os colchetes de tipo. Então, porque é genérico, a implementação ou o registro parece um pouco diferente do que poderíamos ter visto com a unidade de trabalho ou distribuição. Deixe-me levar isso rápido. Então, quando fizemos a unidade de trabalho, foi o que pareceu com aquele eu transitório, certo? Então nós temos os colchetes, este tipo desse tipo nesta situação embora. Vamos ver chave aberta, typeof I HTTP ou cartaz com os colchetes tipo vírgula de repositório HTTP com foguetes. Note, mais uma vez, isso é genérico. Nós poderíamos obter específico e realmente ter como implementações específicas de repositórios que Collie específico, desculpe eu estou girando. Veja em cores específicas, mas isso mapeado diretamente para os tipos de dados que estamos usando. Então poderia ter o repositório de reservas, o repositório de cores. E, claro, isso nos dá a oportunidade de estender a funcionalidade diretamente para o tipo específico ou operações diferentes. Talvez as reservas precisem de algo que os outros não precisem. Portanto, o padrão genérico pode não funcionar necessariamente. Então, nesse ponto novamente, a coisa sobre ter mais repositórios, mas por enquanto estamos fazendo multidões simples de, então eu vou ter o repositório genérico simples que todos podem usar e apreciar e perceber onde estou colocando. Estou tentando colocá-lo depois do registro do cliente HTTP e do interceptor. Tudo bem, então agora que temos tudo isso configurado, podemos voltar aos nossos componentes. E eu vou começar com, nós sempre começamos com o simples. Então vamos fazer as cores, certo? Então, na criação de loterias ou arquivo, nós teríamos injetado o interceptor, bem como o cliente. Saiba o que vou fazer é injetar o repositório HTTP. E o que teremos que fazer aqui é ou tivemos a instrução usando diretamente para o componente ou sabemos que podemos apenas adicionar uma instrução usando para as importações view para que todos tenham isso. Certo, então isso é algo que pode considerar. Mas eu só vou avançar com as cores e este velho. Então, porque é genérico, precisamos especificar a classe de dados, então eu vou ter que ver a cor. Tudo bem? E outros o deixam como clientes. Então isso significa, ok, Então isso é injetado e, em seguida, o cliente não posou mais como JSON ponto uma pia. Não. Cliente terá uma chamada de função para criar. E os dois parâmetros serão o ponto final e a cor a ser criada. Eu posso remover o interceptor e deixe-me apenas comentar o modo para um não. E então vamos levar este cavaleiro. Então vamos tentar criar uma nova cor e ver como tudo se une. Tudo bem, então vamos em frente. Traga cores para casa, crie novas cores. E então eu vou colocar o que é outro Caracalla comum? Vamos colocar o verde. E então criamos cores, e lá vamos nós. Então nosso cliente HTTP ainda está disparando mesmo que não sejamos direcionados chamando-o. E temos nosso repositório saber. Então temos menos injeções e menos pontos de contato e menos manutenção geral se algo mudar, certo? Então agora eu posso apenas remover as referências do devedor, remover isso, eu descarto a herança e remover a injeção do interceptor. E então você pode ver que nosso código de componente parece um pouco mais limpo. Então este é um belo padrão que você sempre pode pensar. Você sabe, sempre que você está fazendo algo repetidamente e repetindo o código e então você está começando a adicionar a ele. E então você tem vários pontos de contato, então você pode começar a pensar sobre como você pode obstruir esses pedaços pesados longe de qualquer componente ou qualquer método ou qualquer classe em geral, e colocá-lo em uma classe para si mesmo e reutilizá-lo. Então você pode ir em frente e implementar isso. Então eu apenas desafiaria você a passar e refatorar e atualizar todas as suas referências que teriam apontado diretamente para o cliente HTTP e o interceptor saber que aponta para o repositório apropriado para isso componente. Então, quando eu disse o repositório apropriado, bem, este repositório, mas é claro que a classe Data precisa ser a correta, certo? Claro que já temos os pontos finais sendo passados e os objetos. Então, se você usar o errado, então você receberá um erro. Então vamos dar uma olhada nos microfones. Se eu fizer isso parecer um ajuste para a mistura, certo, eu vou substituir o cliente por esse repositório. Inclua uma referência. Então eu digo cor e, em seguida, aqui em baixo eu vejo que isso deve ser criado. Então eu vou acabar com uma seta porque eu estou passando o tipo de dados errado de acordo com isso, certo? Então você sabe que a Confederação, se apenas para ter certeza de que eu adicionar tipos de dados estão sempre corretos. E então você pode simplesmente ir em frente e remover as referências ao interceptor e as referências descartáveis. E então você pode apenas fazer isso para todos os outros componentes em conformidade. 42. UPDATE: removendo corDAS mágicas: Muito bem, bem-vindos de volta os desenvolvedores da nevasca. Nesta lição vamos estar olhando para reduzir nossas cordas mágicas e toda essa operação não é exclusiva para desencadear um desenvolvimento. É apenas uma boa prática em geral. E vamos apenas discutir um, quais são as cordas mágicas para o porquê de precisarmos reduzi-las. Então, começando com o que nossa cadeia mágica é, uma string mágica é qualquer string que é praticamente codificada e fica pior quando é repetida em torno do lugar. Então, um exemplo prático de onde teríamos usado cordas mágicas seria como em nosso controlador de reservas para nossa API. Não, estes são muito extremos. Os perigos de usar essas cordas mágicas seria que se eu mudar o nome da tabela do veículo amanhã, não haverá nenhuma indicação pelo IDE de que o ambiente de desenvolvimento de que algo mudou neste pode não ser mais relevante ou carrinho. Então, quando eu tiver essa corda mágica codificada e eu estou vendo veículo e cliente. E então talvez eu mudei o nome da tabela do cliente porque lembre-se estes são anexados que precisa ser incluído com as reservas. Então isso significa que tem que haver uma tabela correspondente com este nome, modo que o nome muda, então o código não vai lançar um erro. E nós não saberemos até que o cliente reclame que Ei, eu clique neste botão e ele não funcionou naquele momento. Já não é uma boa impressão. Certo, então vamos ver como podemos mudar essas cordas mágicas de aveia. E vamos começar com nossas unidades de trabalho. Tudo bem, então a primeira maneira de obter o nosso próprio isso vai coincidir com questão extrema seria na lista de inclusões em vez de codificação rígida, a palavra veículo, hard-coding, a palavra cliente, eu poderia realmente ver o nome fora e, em seguida, colocar em nome da classe que eu gostaria de incluir que seria veículo. Então isso realmente renderizaria uma representação de string do veículo palavra, que é perfeitamente legal na forma de Includes, que está esperando uma lista de strings. Então isso significa que se alguma coisa mudou na classe do veículo, talvez o nome dele mudou ou algo assim, então isso definitivamente iria lançar um erro porque não haveria mais uma classe com o nome do veículo. No entanto, esta é uma boa solução, mas não necessariamente corrige todo o cenário, pelo menos em relação à nossa necessidade de incluir propriedades adicionais. Porque se na classe de domínio de reservas, se eu realmente mudar o nome da propriedade de veículo para salvar os golpes são carro ou algo assim, então ainda não haveria indicação neste nível que não há nenhuma por mais tempo uma propriedade de navegação a ser incluída pelo nome do veículo. Então o que vamos fazer é mudar o velho mito, inclusive. Então, em vez de usar uma lista de string, vamos estar usando um tipo de dados diferente chamado de AI querable. Eu incluo uma consulta de tudo bem, Isso é, isso é bastante um bocado, mas vai parecer semelhante ao nosso ordenado, Eu pedi consultável. Na verdade, é um tipo de dados muito parecido. Então eu estou indo apenas para ir em frente e substituir em nosso repositório genérico a lista de inclusões para saber ser. Tudo bem, vamos chegar a ele. Ele vai ter a mesma função de primeira parte, nosso suporte de ângulo de telefone I consultável t, é a mesma coisa, exceto que a segunda parte é eu incluir objeto de vírgula t consultável. Tudo bem? E então isso é realmente apenas a função. Então está retornando algo como uma função. E eu tenho que incluir outra biblioteca do núcleo dotnet. Então esse é o problema. E então teríamos substituído o coração do barómetro. Então isso também tem que fazer isso novamente para o Git. Então eu só vou para o get e em substituição disso também. Agora que está na interface, claro, o que quer que estejamos fazendo, a interface que temos que fazer na implementação. Então, nossa implementação não está feliz agora porque nós mudamos algo, mas não se preocupe, em breve vamos começar a acelerar até agora nosso GET, nós fazemos a mesma coisa. Vou mudar isto para o nosso incrível consultável, e vou incluir as referências que faltam. Então a mesma coisa para o fica tudo. Sei que fizemos isso, temos que refatorar algumas coisas. Primeiro, nosso método está em todos os outros métodos que chamavam isso. Estou usando que inclui parâmetro. Tudo bem, então não, dentro de nossa implementação no caminho que o Incluir funciona nulo, é um mito estranho. Então não precisamos ir para cada uma através de cada propriedade e tentar incluí-la. Em vez disso, o que vamos fazer é remover isto para cada um. E, em seguida, dizemos consulta não é igual ao Includes, que é mais uma vez um método. E depois consulta. Tudo bem, então praticamente quando passamos em um objeto que vai parecer semelhante a uma expressão lambda, semelhante a segurar os olhares OrderBy e assim por diante. Mas quando chegarmos lá, chegamos lá. O que vai acontecer é que se alguma coisa entrar, no manto superior, que já estamos familiarizados com o conceito de. Em seguida, a consulta vai ir em frente e executar que inclui partes dele contra si mesmo. E então temos essa consulta com a permissão incluída. Esses são dados, certo? Então nós temos que fazer algo semelhante em nosso recebe tudo onde nós apenas dizemos consultas iguais para executar, que inclui contra você mesmo, por favor. Da mesma forma com o RW. Observe que a ordem por quem estava fazendo a mesma coisa. Bem, isso é o que o inclusivo está fazendo. Tudo bem, eu incluo duplo questionável. Agora que temos isso, vou voltar para o meu controlador de reservas. E agora vemos que tudo o que eu era tipo de caos se soltou porque nossos parâmetros incluídos não mais lista de string. Então eu posso remover isso, certo? Sabemos que precisamos de veículos e clientes, então farei com este que ainda não modificamos. Então, para o espirometro de inclusão, vamos passar expressão. Então eu fui ver Q e uma startup que lambda, expressão lambda. E agora posso ver incluir. Lá vamos nós. Agora incluir pode vir para cima, mas é o que eu tenho lá. Vá em frente. E se ele vir acima com um erro que você pode ir em frente e incluir as referências que faltam são. Então, quando eu digo incluir aqui, eu posso colocar outra expressão lambda dentro que incluem expressão e, em seguida, começar a incluir o real, as propriedades de navegação reais da classe de reserva para que nós, nós sabemos onde falando diretamente para a classe em oposição a Esperançosamente terceiro, colocando em uma corda e esperando que ele corresponde a algo naquela classe. Tudo bem, então eu posso saber C, eu quero incluir o veículo. E adivinha? Eu preciso incluir mais de uma coisa para que eu possa apenas ci e isso junto e dizer ponto incluir novamente. Então note que eu incluí e, em seguida, incluir. Certo. Então, se você precisar dele para incluir esta propriedade e um filho dessa propriedade, então você pode ver incluir, ponto, em seguida, incluir e você continuar indo para baixo para alcançar. Mas para cada vez que você diz incluir, você está olhando diretamente para a classe em questão, pelo menos neste caso reserva. Então você só está olhando para as propriedades de reserva enquanto você avança. Então eu preciso e preciso de clientes. Tudo bem. Deixe-me dividir isso um pouco em linhas diferentes para que possamos ver exatamente o que está acontecendo. E lá vai você. Então está tudo fortemente digitado. Então, se alguma coisa mudar na tabela de reservas, ele definitivamente trará o código apenas para dizer que mudaríamos o repositório e todo o código é quebrado. É bom quando ele é quebrado nesta fase porque então você conserta. E então você pode ir em frente e publicar seu aplicativo com mais confiança. Então eu vou apenas ir em frente e replicar que incluem declaração lá em cima porque nós sabemos que isso é o que este precisa. Além disso, remova essa lista e deixe-me apenas me certificar de se livrar de todas as setas que escrevi inclui dois pontos duas vezes. Certo, então esse é um problema resolvido. Tudo bem, então eu só vou fazer uma compilação e ver onde mais pode ser quebrado e nossa lista de erros, felizmente é curta, certo? Não, mas podemos ver que aqui seria outro lugar onde essas cordas mágicas poderiam causar um problema. Tudo bem, então agora eu posso apenas ver pontos incluídos, e olhar para isso. Estou usando o mesmo código que usei para reservas e estou recebendo erros. Por que estou recebendo erros? Primeiro, propriedades de navegação não dentro de veículos. Então isso é errado. Cliente é o que veículo não é de qualquer maneira. E bem, eu não incluiria o consentimento da igualdade. Então o problema com isso mais uma vez foi que se eu tivesse colocado o nome aqui, esse é um veículo e não haveria nenhuma indicação de que isso não funcionaria até o programa falhar. Então isso realmente economizará muito tempo na depuração e impedindo que livros ocorram nesta fase, certo? Então agora eu posso ver incluir o microfone. E então eu posso ver que incluir novamente. E este seria modelado de plantão. Tudo bem, então agora temos todos os três que estão sendo incluídos, e eu vou apenas copiar a linha e usá-lo abaixo, também inclui dois pontos e, em seguida, nossa declaração e, em seguida, eu posso me livrar dessas listas. Tudo bem, então, no fim das contas, isso ajuda a limpar muito do seu código, torná-lo mais à prova de balas à medida que você avança e ele cresce. Agora outra área que eu quero abordar, um fluxo mágico que poderia causar problemas seria dentro de nosso objeto de reserva ou manequim um objeto onde temos essa validação sendo realizada. Embora aqui, estou vendo que esta é nossa mensagem e deve ser aplicada contra esta propriedade. Mais uma vez, se o nome da propriedade mudou, bem, isso é uma flecha demais. Mas se o nome da propriedade mudou e depois mudamos aqui e mudamos lá. Poderíamos facilmente esquecer de mudá-lo lá porque provavelmente estamos mais atraídos pelas linhas vermelhas do que procurando por todos os satisfeitos que dissemos a palavra ou as palavras datam. Então meu ponto mais uma vez seria, e nós podemos, neste caso, usar o método original que eu mostrei onde vemos o nome fora e, em seguida, por favor, o nome da propriedade em que. Então isso irá renderizar para uma string. Então, se alguma coisa mudar no nome da propriedade, essa linha vermelha também nos alertará. Então essas são pequenas dicas de desenvolvimento. Mais uma vez, isso não é específico de negócios, isso é mais apenas diretrizes gerais de desenvolvimento para garantir que você está construindo à prova de balas. Então aplicativos e que eles são mais mantidas para a execução mais longa. 43. IMPORTANTES - Fixe o limite: Ei pessoal, eu só tenho um adendo rápido para a lição anterior onde nós teríamos refatorar nosso código um pouco e remover as cordas mágicas constantes como eles são chamados quando estamos chamando nossos endpoints, no entanto, que pedaços de refatoração e a maneira como eu escreveu que tipo de problema introduzido com a exclusão. Então, o que vai acontecer se você escrever o código exatamente como eu fiz, você iria acabar quando você excluir isso, este endpoint iria retornar um 404. E a razão para isso é que eu criei a string estática do ponto de extremidade mix com essa barra à direita. E, em seguida, na construção da URL, ainda nos colocar barra. Então isso significaria que você teria api barra, barra barra do que o ID. E então isso faria com que ele parasse de funcionar tão facilmente. Você poderia corrigir isso, talvez removendo essa barra à direita na API e na cadeia de caracteres estática em vez de você poderia simplesmente remover essas barras à direita. Assim, quando você estiver criando uma nova URL, você pode colocar essa barra. Ou se você quiser deixar o slush na string estática e remover a barra lá. Mas acho que é mais difícil ver isso funcionando ou você sabe exatamente como isso funciona. Então eu vou remover os slushes dos endpoints da API. E, em seguida, ao formar a URL em si, eu vou colocar essa barra lá. 44. Suporte de aplicativos da web progressistas: Ei pessoal, bem-vindos de volta. Então estamos aqui para falar sobre aplicações web progressivas. Não, aplicações web progressivas são PWA para abreviar. É persona refere-se a aplicações web que fazem uso de APIs de navegador modernos e permitem que você crie web ups para download. Então deixe isso afundar um pouco. Então, quando dizemos aplicativos web para download, essas aplicações web, muito parecido com orbitando é aqui em cima. Lembra-te de quando estávamos a criá-lo. E assegurei-me de apontar certas opções. E uma delas era aplicações web progressivas. Então ele veio com certos arquivos que suportam aplicações web progressivas, ou seja, o serviço de trabalho e aqueles arquivo JS como um JSON manifesto. Todos eles estão incluídos porque escolhemos o aplicativo web progressivo. Tudo bem, então, a fim de baixar este aplicativo web e apenas, apenas o 0 que isso está disponível no navegador baseado em cromo. Como você pode ver aqui, estou usando o Microsoft Edge. Tenho usado Edge. O que? Microsoft Edge, pelo menos no momento dessa gravação, é baseado no Chromium Engine do Google Chrome. O Google Chrome é o pioneiro dessa tecnologia. Opera também é baseado nessa tecnologia. Não tenho certeza sobre o suporte do Firefox para aplicativos web progressivos, pelo menos no momento desta lição. Mas podemos usar o Edge e fazer uma prova de conceito. Então, a fim de baixar este APP, tudo o que precisamos fazer é olhar para aquele pequeno bloco de construção aqui em cima na barra de endereços e ver quando eu passar o mouse sobre ele, ele diz Gerenciamento atual instalado. Então esse é o nome do nosso aplicativo que estamos construindo. E eu posso ir em frente e clicar nisso. Então a coisa é que isso é na verdade como uma versão modificada de um parque eólico que fez no passado. Tudo bem, então isso é realmente fazer, é baseado na web, mas há certas pessoas que apenas gostam de ter os aplicativos em seu computador. Eles queriam às vezes trabalhar no modo offline. E todas essas coisas podem ser possíveis para aplicativos web através desta tecnologia progressiva de aplicativos web. Então, quando eu ir em frente e clique em Instalar em realmente apenas tomar alguns segundos e colocar este aplicativo na minha máquina. Aqui está o aplicativo na minha máquina. E você pode ver que não está ganhando mais no navegador. Posso sempre clicar nisto. Vá para a informação. Posso abrir no navegador, se quiser. Posso desinstalar. Posso até custar um dispositivo de mídia, está na minha máquina. Tudo bem, e há o ícone na barra de menu Iniciar. Você provavelmente não pode ver. Mas eu estou passando o mouse sobre o ícone aqui embaixo onde eu posso realmente apenas fixá-lo na barra de tarefas. Aí está o ícone. Tudo bem, então todos esses arquivos, o ponto manifesto JSON. Mesmo quando eu parar, deixa-me parar e deixa-me saltar para estes ficheiros. O manifesto JSON aqui eu poderia mudar o nome do aplicativo e o nome abreviado, todas essas coisas, o dólar crescido cor dos ícones. Há uma série de coisas que você pode fazer a partir desses arquivos que influenciam o que é apresentado quando este é baixado. Então esse é o ícone, que é cinza que surgiu no meu aplicativo tendo instalado no computador. Tudo bem. Então, se mudarmos isso para talvez o logotipo da empresa ou assim por diante, imediatamente, quando ele instala, essa é a imagem que será exibida. E mais uma vez, ele pode fazer todas as mudanças nesses arquivos. Mas eu só queria 0 que apenas todos difíceis a caixa apenas selecionando algumas opções adicionais. Quando estávamos criando este projeto, tínhamos indicado, e nos foi tão graciosamente concedida a oportunidade de usar aplicativos web progressivos com nosso blazer up. Então agora podemos ter uma situação híbrida em que web uma web up, eles podem facilmente instalar em um dispositivo Windows, em um, em um, em um Linux, em um MAC, em um iOS, em um Android, realmente não faz muito ao mesmo tempo. Estamos usando um navegador moderno que suporta essa tecnologia. 45. Adicione mudanças no GitHub: Ei pessoal, bem-vindos de volta. E nós estamos em outro ponto de verificação onde nós vamos apenas estar verificando em nossa cota GitHub. Mas antes de fazermos isso, eu quero rever alguns dos principais pontos de discussão das atividades que completamos juntos e apontar algumas das advertências porque eu mostrei algumas coisas e então eu meio que deixei você terminar para cima. Eu encorajo você a terminar tudo, mas é claro, ter a minha calma para referência, mas no caso de você estar tendo alguma dificuldade ao longo do caminho, eu só quero apontar certas coisas para você. E é isso que vamos fazer antes de seguirmos em frente. Então, para recapitular algumas coisas que fizemos nesta Seção 1, começamos com a personalização do, ou pelo menos olhando para como podemos personalizar as páginas de identidade. Vimos que todos foram gerados onde os andaimes na seção de páginas de identidade. E vimos que podemos modificar o login ou o registro. Podemos estendê-los de acordo com nossas regras e requisitos de negócios. Então você tem uma boa idéia de como fazer tudo isso. Também analisamos a implementação de interrupção JS com bibliotecas de terceiros. Então eu só vou para a página de reservas onde nós fizemos isso na página de índice. Tudo bem. Então outra coisa que eu teria feito é certificar-se de que todos os componentes têm código por trás do arquivo. Então, mais uma vez, isso é realmente opcional, então eu não estou dizendo que você deve ou se você não tem isso, você não conseguiu nada porque se ele funciona, ele funciona e ele funcionou, ele foi projetado desculpe para trabalhar em qualquer formato. No entanto, eu fui em frente e importou cada pontuação de componentes individuais sobre o código por trás do arquivo. Tudo bem, então para a página de índice, temos que implementar o descarte de IA porque lembre-se que temos o método de eliminação que implementamos. Então, no componente em si, dissemos que eu descartável ou eu descartar ponto descartar. Nesta situação, vamos herdá-la e depois usá-la, e já fizemos isso antes, então isso não é nada para estrangeiros. Caso contrário, não saberemos. Temos nossas injeções à medida que avançamos, fazemos nosso JS Runtime e depois debaixo de uma pia, vamos em frente e renderizar a tabela de dados. Nós já passamos pela escola antes, mas apenas como uma recapitulação, sabemos, sabemos o que é preciso para implementar ou colocar em uma biblioteca JavaScript de terceiros em nossos aplicativos blazer. Então esta técnica vai através da placa para basicamente qualquer biblioteca JS de terceiros que você deseja implementar aqui. Outra coisa que eu teria feito fora da câmera é implementar algum nível de segurança. Portanto, há uma política de segurança chamada o que é chamado de política de segurança de conteúdo, onde podemos ir em frente e colocar restrições sobre os scripts que queremos ser executados em nosso aplicativo. Agora esta política não é exclusiva do blazer, é uma política da web. Só estou implementando em blazer aqui, mas é assim que essa política precisa parecer para que você possa pausar e tentar replicá-la. Mas eu fui te guiar por isso. Então o metatag, HTTP traço equiv. Política de segurança de conteúdo. Então é apenas um cabeçalho que estamos enviando para o navegador para o navegador saiba quais arquivos de script, quais arquivos CSS queremos executar em nosso aplicativo. E isso se torna importante para ajudar na luta contra ataques de script entre sites. Portanto, esta política vai em frente e estabelece restrições. E ele permite que ele saiba que qualquer coisa que não está vindo do próprio site ou incluindo este código específico ou tem uma avaliação insegura e não executá-lo. Também informamos que estamos confiando em scripts dessas fontes. E da mesma forma para os estilos que dissemos, Ok, vamos aceitar a si mesmo. Podemos aceitar estilos embutidos e aceitaremos uma folha de estilos a partir daqui. Então Nevada de terceiros, tão praticamente se nós estamos indo para ir em frente e incluir outras bibliotecas de terceiros, e queremos proteger nosso site da mesma maneira que nós só teríamos que estender este metatag para incluir essas coisas. Não, as políticas de segurança de conteúdo são um método muito popular de proteger sites. uma vez, leia mais sobre isso até mesmo no site do Firefox, que eu acabei de trazer na tela CSB. E você pode ler sobre ele e ver exatamente que tipo de proteção você pode obter e observar esses valores realmente significam na construção desta política. Agora, seguindo em frente, nós também fomos em frente e modificamos ou em serviço septa quando estávamos modificando o upload do arquivo. Então estamos testando uma coisa, desvendando outra brecha. Mas nós fomos em frente e adicionamos essa exceção ao intercepto 0 porque precisávamos que ela parasse a execução uma vez que houvesse um erro, porque ele realmente continuaria tentando executar. Então precisávamos pará-lo em seus caminhões e deixar o usuário saber que algo deu errado. E nessas mesmas notas, nós tínhamos implementado o uploader de arquivos. Fizemo-lo especificamente para os veículos. E o componente do antebraço para os veículos é muito maior do que os outros componentes da forma porque tem um pouco mais de lógica acontecendo lá. Mas mais uma vez, é assim que podemos isolar o código do componente no arquivo para que tudo fique compacto e fácil de encontrar, certo? Em uma tentativa de reduzir a repetição e casa nas dezenas ou chamando o cliente e o mesmo método repetidamente, bem, nós fizemos foi criar um repositório HTTP, que eu apenas chamá-lo de repositórios HTTP genérico o suficiente para aceitar qualquer tipo de dados e realizar a ação necessária, saber algumas coisas que eu quero. Algumas decisões foram tomadas aqui que mais tarde quando eu era uma refatoração voltou para assombrar o homem, você provavelmente ou passou por seu R, está passando por isso. Então deixe-me apenas apontar que você disse na implementação de um colocar isso como um idealista, mas então, você sabe, eu não posso misturá-los muito. Eu listo e lista através de todo o código. Então isso teria causado alguns conflitos. Então, ou você muda para lista e depois muda tudo o resto para lista ou muda isso o idealista e tudo como analista. De qualquer forma, essa pequena incompatibilidade de tipo de dados pode ter causado algumas dores de cabeça aqui e ali. Mas o meu fácil corrigir aqueles para mim nesta lista porque a maioria das outras coisas que estamos apenas lista no meu código de qualquer maneira ou no resto do programa. Tudo bem, então você pode ir em frente e olhar para fora para isso. E você também veria que se você fizesse o repositório e a lista, então é realmente mais fácil para você não teria essa incompatibilidade de tipo de dados para os que estão na lista, certo? Então, como eu disse, eu sou misturado e combiná-los. Isso não é necessariamente uma boa prática. Quando limpar isso, é claro. Mas se você estiver usando uma lista EUA LLC, se você estiver usando lista inútil. Mas a coisa boa sobre idealista é que é apenas uma obstrução de uma lista ou tipo de coleção que é lista. Então, como estamos retornando uma lista de nosso repositório genérico, isso não causou um conflito de tipo de dados porque estamos atribuindo o L2. É uma abstração, obstrução de nível superior. Tudo bem? Então isso é relativamente desconhecido é sim, eu estou apenas apontando isso velho caso você esteja se perguntando. E então, finalmente, exploramos o que é preciso para ter aplicação web progressiva, como exatamente ele funciona. Há muito mais nisso. O que eu não vou ficar muito em profundidade, mas vimos como é fácil instalá-lo na máquina ou em um dispositivo. E podemos personalizar as imagens e certos bits de informação desses arquivos que estão na pasta raiz www. Tudo bem. Então, com tudo isso dito e feito, e isso somos nós ir em frente e fazer um check-in. Este é um grande check-in para mim por causa de alguns arquivos que foram modificados ao longo do caminho. E temos as imagens e todas essas coisas maravilhosas. Então, é claro, os motins ou mensagem amigável e útil que retrata para si mesmo, para o futuro você e para sua equipe o que exatamente foi feito. E então eu vou apenas fazer um commit e empurrar. Então, um empurrão, claro, um envia maravilha, Shauna pia significa que se há mudanças lá em cima que é ocioso em cima, então ele vai puxá-los também não, já que eu sou o único trabalhando, realmente não importa qual deles é usado. Então, isso é bom. E é isso para esta seção. Vejo-te. E é isso para esta seção. Vejo-te em breve. 46. Implante no Azure: Ei pessoal, bem-vindos de volta. Então, estamos neste módulo onde podemos implantar nosso aplicativo no Microsoft Azure. E a Microsoft faz o seu é o principal provedor de nuvem da Microsoft. E o que eles fazem é fornecer a capacidade implantar seus aplicativos de forma praticamente integrada na Internet. Além disso, eles fornecem infraestrutura gerenciada para que você não precise se preocupar em configurar servidores e manter isso e segurança que eles oferecem tudo isso pronto para uso. E é relativamente acessível. Por isso, vamos implementar a nossa aplicação como a vê aqui, no Azure. Eu tenho em outra guia ligada a Azuri. Você pode chegar lá Azure dot microsoft.com. E o que eles têm, primeira coisa que você vai ver é que você pode começar de graça. Portanto, é realmente fácil se inscrever, especialmente se você já tem um live de cones, que você provavelmente usou quando você instalou o Visual Studio no início deste curso estão no preço passado deste curso. Mas é fácil para você se inscrever, começar de graça, você recebe 12 meses, bem como 200 dólares créditos para ir para serviços e experimentos que você deseja. Agora, pessoalmente, tenho um pagamento à medida que sobe, o que significa que só pago pelo uso de recursos. Então, neste tutorial, alguns recursos não serão gratuitos, como em se você estiver no plano gratuito, tudo bem. Mas se você está se você já está esgotado seu período de teste e então você está fazendo este curso e você está implantando que você pode ter que acabar pagando por certos serviços, que eu vou apontar todos eles. É como avançamos e tentamos manter tudo no mínimo. Mas se você não pode necessariamente acompanhar e bullseye fazer pelo menos vamos ver como ele funciona implantar um aplicativo no Microsoft Azure e é muito fácil. Então vamos começar. No Buck em nosso projeto, temos algum trabalho de preparação para fazer em nossas configurações antes que possamos pensar em ambos implantados em nosso arquivo AP settings.js JSON. Precisamos configurar um caminho. Bem, precisamos configurar um certificado SSL e configurá-lo para o nosso serviço de identidade. Então o que acontece é que, com base na configuração que o servidor de identidade alterou os parafusos, precisamos configurar um certificado SSL para que o aplicativo cliente possa realmente falar com o aplicativo servidor. Tudo bem, porque então ele vai falhar na inicialização. Então, na verdade, tinha um pequeno balde com a soma faz saltar à frente da fivela. E eu estou apenas mostrando a solução para esse problema muito, muito prevalente que você pode acabar tendo se você não seguir esses passos. Certo, então o aplicativo cliente precisa se comunicar com nosso servidor com o serviço de identidade. Ele precisa basicamente fazer como nos bastidores, entrar para que o cliente saiba ou o, desculpe, o serviço de identidade saiba que o cliente está aqui, ele está pronto para se conectar. Isso é feito através de conexões muito seguras. Portanto, um certificado SSL é necessário para facilitar isso. Então, no desenvolvimento, isso é bom porque nas configurações do aplicativo que o desenvolvimento ponto JSON. Você verá aqui que ele diz os desenvolvimentos do tipo chave. Então ele só diz, ok, bem, este é o momento de desenvolvimento, não é problema no entanto, em nossa perturbação. Então você não tem nenhuma configuração como essa. E nós temos o cliente onde ele diz que este é o cliente que está conectando o perfil é que é um servidor de identidade, SPA. E se você for para os controladores e todos os controladores de configuração IDC, então você vai ver onde todas essas coisas de cliente entram. Então este controle e no exterior, não fazia muito sentido no início deste curso. E eu não gastei muito tempo explicando o que estava acontecendo aqui. Mas com base em toda a interação e todas as coisas que fizemos até agora. E você vê como nós temos que autenticar contra o servidor obriga em nossos ganhos. Eu tinha entidade, a fim de usar o cliente com sucesso, o Tolkien precisa ser fácil em todas essas coisas. Então este controlador basicamente apenas puxando esses cordelinhos. Ele sabe onde o cliente identificou, mais uma vez, esta planta, certo? Ele sabe tudo sobre tudo isso e é basicamente apenas facilitando essa comunicação. Mas, mais uma vez, os certificados SSL têm de estar presentes. Então facilite isso. Agora, nesta implantação, estamos apenas implantando um aplicativo pessoal. Então o certificado vai ser um auto-censor que vamos gerar na máquina e então usar. Mas em um ambiente de produção, então é claro que você gostaria de usar um certificado pronto de produção e devidamente emitido por uma das principais autoridades. No entanto, os conceitos permanecerão os mesmos. Então vamos começar. Então, agora para começar, o que queremos fazer é trazer o PowerShell vai estar usando essa ferramenta muito poderosa. Mais uma vez, se você está em um computador Windows, mas é uma ferramenta muito poderosa e nós vamos usá-lo para gerar ou SQL scripts. Então você quer trazê-lo para cima como administrador. Tudo bem, então Run como administrador, você pode procurar por ele na barra de pesquisa ou você pode encontrar o próprio ícone Clique com o mouse e, em seguida, você vê que você executá-lo como administrador para que você possa usar qualquer opção para obter esse edifício. Certo, então o primeiro comando, e o que vamos fazer é construir alguns. Então, se esta é a primeira vez que usar Porsche facilmente obtém um C, tipo de como ele funciona. Bem, bem, não seria a primeira vez usando besteira porque o gerenciador de pacotes e o aluno de visuais está realmente usando comandos e comandos do PowerShell, certo? Então esse tipo de formato obter ajuda de traço ou o banco de dados de traço e adicionar migração de traço. Todos eles são o que eles chamam de comandos do PowerShell, certo? Então aqui vamos usar um comando conduzido para criar uma nova pesquisa. Então esta é uma variável. Tudo bem, se você não tem PHP isso não deve parecer muito estranho para você. E então nós vamos dizer novo eu e então ele pode pressionar Tab e ele vai completar automaticamente a linha, certo? Então Newell certificados autoassinados, DNS, nome. E então eu vou chamá-lo, vamos chamá-lo de carro em tau era carro ou uma toalha Watson, certo? É isso que estou preso no DNS. Então, de modo geral, que quer, você quer que para representar a URL para o site. Mais uma vez, isso é apenas implantar ou ativar. Assim, os conceitos estão lá, mesmo que a praticidade possa não necessariamente se aplicar em uma situação da vida real. Certo, então nome DNS, vou chamá-lo de carro até Watson ou você pode chamá-lo de algo com que você esteja mais confortável. A localização da loja de cert. Então ele meio local padrão é cert dois-pontos Sobre barra máquina local, que apenas contextualiza e isso está tudo bem. E então nós apenas, quão grande isso acabou de ver casos, eles serão muito pequenos. Lá vamos nós. Isso parece um pouco melhor. Tudo bem. Então você vai auto-censurar carro nome DNS até não era CERT, cert, loja, localização, pesquisa, máquina local, cert dois pontos barra, máquina local lama máquina local. E reparem na direção desta barra, cortem a minha direita. Então ele o cria, e então ele armazena qualquer detalhe dentro dessa variável chamada CRT. Certo, então precisamos ser protegidos. Então, vamos ver PWD e converter ferramenta, ou desculpe, converter ferramenta, fluxo seguro. Lá vamos nós. Dash string, e então vamos apenas dar-lhe uma corda. Então eu ia usar o chefe padrão ou que nós conhecemos e amamos. Claro que mais uma vez, você usaria uma senha muito mais forte em nossa situação real. E então temos dizer uma força e como bonito e textos pressione Enter. Então estamos armazenando a senha como PWD. Então vamos construir o caminho. Então cinco é igual a, e então dizemos “senhor cólon”. E então se eu apenas pressionar Tab, ele termina máquina local M banheira, digamos Candace, usar o topo para meio que acelerar isso junto. Eu só estou fazendo isso lentamente para que eles possam seguir. E eles dizem “Cert dot impressões digitais”. Tudo bem. E então nós vamos ter construído tudo isso exportado para um arquivo físico. Então eu vou dizer exportação traço b, fx, certificado, traço CERT, cert, e surf é caído ponto py. E então o caminho do arquivo é onde queremos que ele chame, certo? Então eu tenho um caminho de arquivo em c dois-pontos barra sh. Está bem, deixa-me fazer certs de cólon C. Então essa é a minha pasta na minha máquina. Então você pode ir em frente e criar sua própria pasta em sua própria máquina. E então você pode usar esse caminho de arquivo. Ele não vai criá-lo para você, então certifique-se de que ele existe. Mas você quer dar o nome do arquivo para que eu possa ver que o blazer não estava certo, então nós chamamos de efeitos ponto, ponto p. Certo, então esse é o arquivo que eu queria gerar. E então a senha é o Haverá tudo bem, vá em frente e pressione Enter, e então ele vai me mostrar que a pesquisa foi criada. Então, para facilitar, uma vez que eu vou fazer em porque há duas razões para eu fazer isso desta maneira. Um, para facilitar em vitórias rápidas. Então vamos apenas colocá-lo no projeto. Saberemos onde está? E também vamos colocar a conexão ou os detalhes do marcador em nossa clínica, em nossas configurações de aplicativo, em nossas configurações para que ele possa ser usado. Eu vou transformá-lo em poste sempre. E provavelmente a maneira que você realmente quer fazer isso em nosso ambiente seguro real seria dois. Ao implantar, quando ele for implantado como seu carregado no Azure, deixe-nos gerenciar o certificado e, em seguida, configurar sua configuração para ver o certificado como gerenciado pelo Azure. Agora, porque eu queria manter tudo de baixo custo, eu não vou estar girando a versão paga do Uzziah que permite que tudo isso aconteça. Vamos usar o nível gratuito. Então, por causa disso, vou manter as coisas simples. Mas, mais uma vez, o conceito está lá. Tudo bem, alma. Vamos importar este certificado para o nosso projeto. E tudo o que fiz foi encontrá-lo no sistema de arquivos copiá-lo e colá-lo no projeto. E aqui está. E o que queremos fazer é alterar as propriedades para ter certeza que ele desculpe, ele sempre copia. Você não pode dizer “copiar “se mais novo, tudo bem. Tudo bem, então o que acontece é que queremos que, quando estamos implantando, inclua isso na implantação. Então agora tudo o que precisamos para atualizar nossa configuração para que o servidor de identidade saiba para onde ir e encontrar esse certificado que deve intermediar essa conexão. Mais uma vez, isso é para que possamos passar por essa atividade. Mas o problema, a maneira mais segura de fazer isso seria permitir que você gerencie a chave e, em seguida, ter o ponto de configuração para essa chave gerenciada. Tudo bem, assim não há nenhuma chave física F0, F4 para qualquer um poder acessar. E, claro, quero dizer, desta forma pode ser seguro se nós apenas lotes osso para acessar os direitos de acesso ao serviço e ninguém pode realmente acessar o arquivo de chave física e qualquer coisa que balas, você sabe, provavelmente melhor apenas gerenciá-lo porque Uzziah não saberia melhor. Então aqui vamos colocar em algumas configurações para chaves. Então, dentro do objeto de configuração do servidor de identidade ou objeto JSON, temos clientes, e que são nossos clientes e assim por diante. Nossos clientes vão colocar uma vírgula e depois chave. E então dizemos dois pontos e, em seguida, abrimos um novo objeto de configuração. E então vamos especificar o tipo, o nome da loja, o caminho do arquivo e o caminho. E isso é o que parece, certo? Então temos o tipo que é arquivo. Tudo bem? Se ele estava sendo gerenciado por um tipo 0 seria diferente. Então temos tipo que é o nome do arquivo. Vamos chamá-lo de meu caminho de arquivo, o caminho que afirmam. Então eu acabei de colocá-lo em uma raiz do projeto. Eu poderia ter colocado em uma pasta, qualquer que seja, mas onde quer que eu coloque, esse é o caminho do arquivo e a senha é a postura que foi usada. Tudo bem? Se alguém acessa o patrocinado e pode acessar o arquivo, então obviamente, você sabe, alguém poderia quebrá-lo. Mas, mais uma vez, este é um certificado auto-assinado. Então, toda a idéia por trás disso é não ser o mais seguro e ser mais seguro custa mais dinheiro. Então, nesta situação, estamos apenas mantendo baixo custo mais uma vez. Então, depois de tudo isso, então podemos ir em frente e implantar. Então, vou clicar com o botão direito do mouse no projeto do servidor, clique em Publicar. E então, na tela publicada, vamos dizer “começar”. Assim, desde publicado podemos sempre enviar tudo para uma pasta, colocá-lo em nós, um servidor local e executá-lo. Poderíamos implementar no Azure, que é o que vamos fazer. Dependendo da instituição, você pode querer escolher uma das opções acima. Bem, mais uma vez, estamos focando em azurite e também ele, ele apenas flutua em seguida. E, em seguida, queremos um serviço de aplicativo irá mantê-lo janelas, assim por diante, alterar que Próximo, e, em seguida, eles vão confirmar sua assinatura em. Então, neste momento, você pode ser solicitado a fazer login. Você pode ir em frente e fazer isso. Mas o ponto e vírgula usando para Visual Studio é meu Microsoft.com e usado em 0. Então eles me conhecem, eles sabem quais assinaturas, assim por diante. E você tem teste de barra de desenvolvimento pay as you-go, onde você paga apenas pelo que você usa e obtém os recursos nos slides ou menor custo. Mas é claro que você não os está usando por razões corporativas, certo? Então essa é a minha assinatura em que estou. Eu tenho mais grupos de recursos, ou grupo de recursos é como um contêiner, como um contêiner lógico que diz que todos esses recursos pertencem a isso. Então você tende a querer ter nosso grupo de recursos por cima. Tudo bem? Então eu vou seguir em frente e criar um novo grupo de recursos. Bem, na verdade eu estou criando, então eu estou criando um novo serviço AP, que então sugere esse grupo de recursos para esse Serviço de Aplicativo. E o Serviço de Aplicativo é um servidor gerenciado. E continuo vendo gerenciado, gerenciado, o que significa que você não precisa se preocupar com a infraestrutura e com a instalação do Windows na configuração do IIS. Não precisa se preocupar com nada disso. Tudo está predefinido. O ambiente é que eles estão basicamente dizendo que eu tenho o ambiente, apenas me dê os arquivos e eu faço o resto. Então podemos dar-lhe um nome. Então nós provavelmente podemos mudar isso para dizer que a corrente não era atual, blazer, qualquer coisa, qualquer que seja o nome que você gostaria com base no que sua empresa quer. Grupo de recursos. Você pode deixar isso por padrão ou se você quiser criar, então você quer ter um nome específico, então você pode fazer isso. Todo o barulho do plano de vapor onde precisamos mudá-lo. Então eu posso clicar em Novo e podemos selecionar um o local. Assim, com base em onde I East US 2 é o meu data center mais próximo. Mas então você vê que eles ficaram lá por algumas localizações geográficas. Eu quero escolher o que é mais próximo de você para ter o mais eficiente ou certo? Então, depois de escolher East US 2, eu escolho qual plano eu quero. E é claro que a palavra mágica está no topo, a de graça. Então eu vou em frente e clique. Ok. E, em seguida, podemos clicar em Criar e, em seguida, dar que alguns minutos. Eu disse minutos, mas levou menos de um minuto, pelo menos para mim. Mas no final desta atividade temos o absurdo é criado. Então eu posso ir em frente e clicar em Concluir. Portanto, o recurso está lá na carga de trabalho. Ele está sentado conhecido esperando Web, implantá-lo ainda. Bem, temos outra solta e que precisamos amarrar, e esse é o nosso banco de dados, certo? Então eu preciso configurar as necessidades das abelhas. Estamos usando o SQL do Azure ou estamos usando um banco de dados local? E toda a Base de Dados SQL do Azure é outra versão do software de gestão. O T cuida de tudo isso para você. Eles só estão vendo Diga-me o que você quer que o banco de dados seja criado para você? Tudo o que você tem a fazer é criar uma tabela é ler, escrever e deixar Mary, você não precisa se preocupar em instalar ambientes de cerco em todas essas coisas. Então, vamos apenas usar o banco de dados SQL do Azure. Clique em Avançar, nulo. O banco de dados precisa de um servidor, como sabemos, certo? Use as ações de B como temos que ter um servidor e por favor, então temos que realmente criá-los. E então esse passo é onde o custo entra, certo em. Este passo não é necessariamente gratuito. Tudo bem, então nome do banco de dados, vamos deixar os padrões, pontos de gerenciamento atuais Server DB, onde as necessidades estão sendo atendidas. Bem, este é um banco de dados, então precisamos criar o servidor. Então, depois de ter pego você novamente, então os servidores ou a um custo e realmente vem em porque irritar, você tem que pagar por esse espaço. E eu vou chamar esse servidor de banco de dados apenas o nome genérico agradável. Eu não quero que ele seja muito específico como ele faz um servidor que vai ter muitos cuspe velho diferente que não está disponível. Gestão atual, Watson. E este é um slot no Watson é nítido para WebAssembly para que soa como aceito que um Leste EUA 2. Então você vai querer manter todos eles vão poucos recursos na região geográfica CMD. E eu vou apenas usar a verdadeira guerra como o nome de usuário e p sin Dala sinal de dólar W 0 RD para a senha, o mesmo sinal de dólar, sinal dólar W 0 RD. Tudo bem. Isso é tudo o que é necessário para configurar um novo serviço. Você vai facilmente que é não, se você fosse instalar o servidor Microsoft em sua máquina, ele Bravo teria um pouco mais de atenção do que a forma simples que chutar um botão Ok e, em seguida, clicando em Criar. E então este pode demorar um pouco. E quando terminar, teremos nosso servidor de banco de dados e banco de dados criado Android para você. Então podemos ir em frente e bater Next. E então eles nos pedem para confirmar a cadeia de conexão. Então esta reutilização a mesma guerra verdadeira e sinal P, cifrão, cifrão W RD. Tudo bem, então eles dão o valor da cadeia de conexão, que você sempre pode dar uma olhada em qualquer um pode copiá-lo e mantê-lo para seus próprios propósitos. Mas essa fonte de dados é o endereço do servidor. Bem, sim. Então o servidor de banco de dados. Tudo bem. E esse é o nome do banco de dados. Você sabe, um parafuso de conexão já. Mas você poderia simplesmente abrir um SQL Server Management Studio, colocar esse valor e, em seguida, autenticar e, em seguida, conectar. E a coisa boa é que ele é automaticamente protegido de modo que o seu tem ele colocou tudo na lista negra. Não há nada sozinho. Então, se você tentou se conectar a partir de sua máquina, ele vai dizer, bem, eu vejo seu endereço IP, mas ele é autenticado e então indica que você quer ser listado branco para que nós, você sabe, acessos não autorizados são detectados significativamente devido a essa política de segurança padrão em seu banco de dados. Só estou a tentar mostrar-te como é fixe quando se trata de guardar o salvamento. E então pergunte, onde você deseja armazenar seu valor de conexão? Vou deixá-lo nas configurações do aplicativo. Key Vault é um serviço pago. Se eu não estou enganado, como suas configurações de aplicativo que vem componentes, é claro, você tem um que funciona e, em seguida, um que é muito seguro, mais seguro. Então vamos ficar com o que funciona de qualquer maneira. Tudo bem, então vamos em frente e clique em Avançar. E então eles vão sugerir que precisamos implantar algumas dependências na Loja Secreta de Acetil-CoA para que possamos chegar ao Finish, permitir que isso faça a sua coisa. E, em seguida, quando é feito ou publicado pitch saber não tem nenhum aviso de que tudo está bom. Mas eu quero fazer uma modificação antes de clicar em Publicar e que é para as opções em Publicar. Então eu vou apertar Editar. E então ele traz esta nova caixa de diálogo que não vimos antes. Mas eu vou descer para as configurações e então ele vai descobrir os bancos de dados acabaram contextos. O que acontece é que neste ponto ele vai criar as batidas obesas, mas não haverá tabelas e nenhum dado de acordo com o nosso C, esses dados e assim por diante, certo? Então eu vou ir em frente e deixar que ele saiba que eu quero que ele aplique esta migração em público, em publicado, desculpe. E podemos optar por usar essa cadeia de conexão em tempo de execução, certo? Então eu vou apenas levá-los para as outras configurações. Realmente não devia a eles. Podemos optar por instalar esta extensão. Não sei se é um serviço pago, para ser honesto. E então podemos escolher que toda vez que publicarmos 12, limpar uma pasta e republicar. Provavelmente não precisa fazer isso. Mas eu vou deixar tudo isso marcado e então vá em frente e salve. E então, no momento em que trabalhamos de perto, vamos tocar Publish. E quando tudo isso for feito, estamos recebendo esse erro de 500. Ela, pelo menos, há progresso. Então o que vou fazer é entrar no portal. Então este é o meu portal. Isto é o que parece. Olá, você pode personalizá-lo, então não se importa como meu painel olha para são ou tem sem muitos recursos de qualquer maneira, mas eu vou direto para o Serviço de Aplicativo. E de lá vou usar o menu lateral. Então você pode, quero dizer, se você tem essa área, mas para olhar para ela, você pode levar algum tempo e apreciar que você está recebendo métricas diferentes, os dados de alcance. Muitas vezes você acerta um erro 500. Então, você vê, nós apenas acertamos um. É um painel muito útil. Você pode reiniciar novamente, pará-lo, e excluí-lo uma série de coisas, certo? Então o que eu quero fazer é chegar a alguma ferramenta avançada. Então, as ferramentas de desenvolvimento vão para baixo para ferramentas avançadas. Podemos clicar em Ir. E então isso nos levará a um painel que nos permite entrar no sistema de arquivos real, certo? Então eu posso ir para um console de depuração, cmd. E então aqui eu posso realmente ver os arquivos que foram carregados. Posso ir para sites www root e, em seguida, estes são os arquivos que foram publicados. Tudo bem. Então você vê que tudo está bem ali. Tudo bem. Então eu quero saber por que isso é sentimento. Eu queria ver no amor alguém para modificar o web dot config, que está no final desta lista. E então eu vou dizer que habilitar o logotipo STD é verdadeiro. Salvar. E então eu vou tentar escavar os sites novamente. Digamos que tenho algumas pesquisas abertas de outra atividade. Então SS Refresh. E quando isso for atualizado, isso significa que teria gerado um novo registro, alguém para se enlouquecer. E o destino do registro são esses arquivos de log e há o nosso logotipo, stdio dot, dot, dot. Olhe para ele. Diz que houve um erro ao carregar os certificados, o arquivo. Veja Holmes disse raiz WW, blazer, Watson cert não era telefone. Então é por isso que assim apenas para dirigir o ponto para casa que precisamos ter este certificado para correr porque você teria visto outra seta se os círculos e presidente e saber que dissemos que a busca está presente, ele não consegue encontrá-lo, ainda estamos recebendo um erro, certo? Então a busca é absolutamente vital. Agora, o que precisamos? O que eu preciso fazer é olhar para trás e ver por que ele não consegue encontrar esse certificado. Então está tudo bem, então eu vou dizer Copy sempre. Tudo bem, então parece que isso é uma cópia. E então eu vou fazer uma nova publicação. E quando terminar que publicou esse tempo. Boom, lá vamos nós. Então nós publicamos nosso blazer WebAssembly até a internet. Há nosso URL atual no gerenciamento não era websites.net. Claro, você pode comprar seu domínio personalizado e como ele está configurado corretamente. Mas vamos tentar amar e onde. Tudo bem, aqui está o que precisamos para consertar esse estilo, mas ficar de lado, você sempre pode consertá-lo mais tarde. Mas aqui estamos na Internet, então temos nossa mistura, temos nossos modelos, tudo o que semeamos no banco de dados quando começamos está lá. E então podemos ir em frente e fazer o nosso trabalho como quisermos. Tudo bem, então nós implantamos com sucesso nosso aplicativo na Internet cortesia da Microsoft como 0 e você vê, ele não assumiu o nosso direito. É assim que é fácil implantar um aplicativo na Internet usando o Microsoft Azure. Então é isso para esta atividade. Obrigado por se juntar a mim.