Guía de desarrollo de Blazor WebAssembly | Trevoir Williams | Skillshare

Velocidad de reproducción


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Guía de desarrollo de Blazor WebAssembly

teacher avatar Trevoir Williams, Jamaican Software Engineer

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      1:52

    • 2.

      Instala Visual Studio 2019 Community SDK neto 5

      6:46

    • 3.

      ACTUALIZADO: instala Visual Studio 2022 Community Redes 6

      3:20

    • 4.

      Crea una cuenta GitHub

      2:28

    • 5.

      Crear proyecto Blazor

      7:04

    • 6.

      Archivos y carpetas de proyecto de recorrido

      19:43

    • 7.

      ACTUALIZACIÓN: crear/mejorar el proyecto para. Redes 6

      5:53

    • 8.

      Personalizar la composición de Blazor

      13:11

    • 9.

      Crear componentes de blazor

      9:01

    • 10.

      Revisar y añadir cambios a GitHub

      2:25

    • 11.

      Resumen de la sección - operaciones de base de datos

      1:31

    • 12.

      Comprender las habilidades

      25:46

    • 13.

      Crear base de datos con el núcleo de la entidad

      21:18

    • 14.

      Configura la secuencia de datos

      19:00

    • 15.

      Usuario defecto de semena y el usuario mismo: comparar las notas

      6:07

    • 16.

      Revisar y añadir cambios a GitHub

      3:10

    • 17.

      Resumen de la sección - API y configuración del acceso a la base de datos

      1:43

    • 18.

      Crear y probar los Endpoints de API

      18:10

    • 19.

      Implementar la unidad de trabajo

      30:21

    • 20.

      Refactorizar los controladores existentes

      23:33

    • 21.

      Refactor existentes para utilizar la unidad de trabajo: comparar las notas

      3:49

    • 22.

      Revisar y añadir cambios a GitHub

      2:56

    • 23.

      Resumen de la sección: trabajar con Blazor y datos

      3:37

    • 24.

      Datos de exhibición Blazor

      26:20

    • 25.

      Datos de exhibición Blazor

      16:31

    • 26.

      Setup Create form: parte 1

      22:34

    • 27.

      Setup Create Form: parte 2

      19:26

    • 28.

      Formulario de actualización de configuración: parte 1

      18:14

    • 29.

      Formulario de actualización de configuración: parte 2

      9:06

    • 30.

      IMPORTANTE: corregir los campos del usuario

      6:33

    • 31.

      IMPORTANTE:

      5:30

    • 32.

      Añade Validación a las formas

      18:16

    • 33.

      Datos de exhibición de Blazor

      7:40

    • 34.

      Código y añadir cambios a GitHub

      3:11

    • 35.

      Uso de un enfoque de código

      6:22

    • 36.

      Gestión de errores globales

      21:36

    • 37.

      Agregar cambios a GitHub

      1:43

    • 38.

      Personalizar la imagen y la lógica

      20:55

    • 39.

      JavaScript Interop con bibliotecas externas

      19:24

    • 40.

      Soporte de carga de archivos

      26:06

    • 41.

      Repositorio HttpClient

      15:06

    • 42.

      ACTUALIZACIÓN: eliminar las cuerdas mágicas

      11:52

    • 43.

      IMPORTANTE: arreglar el punto

      1:33

    • 44.

      Soporte progresivo

      4:26

    • 45.

      Agregar cambios a GitHub

      8:58

    • 46.

      Deploy a Azure

      27:13

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

160

Estudiantes

--

Proyecto

Acerca de esta clase

Aprende a construir una moderna Blazor mientras ejecuta los conceptos, los patrones de diseño empresariales.

Visión

Escribir aplicaciones web modernas Blazor nos da . Desarrolladores de NET de tener oportunidad de aprovechar nuestras habilidades C# y crear UIs web interactive En este curso, Desarrollo web moderno con Blazor NET 5, tendrás la habilidad de crear aplicaciones web Explorar: configurar tu primera aplicación de Blazor; cómo trabajar con una API y cómo funciona la unión de datos; cómo crear componentes e integrar create

Cuando termines este curso, tendrás las habilidades y el conocimiento para construir una aplicación web utilizando Blazor.

¿Por qué desarrollar con Blazor?

Los fotogramas más populares con clientes tienen sido Angular, React, Vue y otros. En este curso, lo guardamos. NET utilizando Blazor, que es la respuesta de Microsoft a esa monopolismo.

Blazor te permitirá crear una aplicación de página única, por parte. El núcleo negro y seguir codificando en C# (sin tener que girar entre C# y Java. Las aplicaciones blazor están compuestos de componentes reutilizables Tanto el código de cliente y de servidor se escriben en C#, que te permitirá compartir código y bibliotecas.

Blazor WebAssembly

Blazor puede ejecutar tu código C# del lado del cliente Porque es real. El funcionamiento de redes en WebAssembly

Vamos a explorar muchas intricacies del ciclo de vida de Blazor, flujo de datos, JavaScript y development generales.

Deploy a Microsoft Azure Cloud

Azure Web También buscaremos el uso de Azure SQL para Database para apoyar nuestra API.

Construir una fundación fuerte. Programación en NET 5 con Blazor:

  • Construir un lado de la página única Redes 5

  • Diseñar una base de datos utilizando el núcleo de marco americano

  • Patrón de depósito

  • Aplicación web progresiva (PWA) con Blazor

  • Comprender el API REST y el diseño de la UI del cliente

  • Comprender C y . Sintesis web principal

  • Comprender cómo personalizar los diseños de aplicaciones Blazor

  • Comprender la autenticación de usuarios

  • Comprender el núcleo de la identidad y el servidor de identidad

  • Manejo de Blazor estado de autenticación de usuarios

  • Consume la API Web

  • Administrar paquetes con NuGet Manager

  • Configuración de GitHub control de origen

  • Implica las aplicaciones y la base de datos a Microsoft Azure

Contenido y resumen

Para tomar este curso, tendrás que tener algo de conocimiento de la programación orientado a objetos, si no Incluso si no tienes mucha exposición a la exposición Apy de desarrollo NET, este curso es muy básico y chock de consejos de desarrollo.

Este es un gran curso. Más de 10 horas de contenido premioso, pero se divito para destacar un conjunto de actividades relacionadas basado en cada módulo en la aplicación que se construyendo. También veremos cómo solucionar problemas y eliminar los errores mientras avanzamos, aplicando las mejores prácticas, escribirás la lógica Tu conocimiento crecerán paso a paso, y tendrás el desafío de ser el mejor que puedas ser.

No hacemos las cosas Cometemos errores y les señalamos y arreglar. Haciendo ello, desarrollamos habilidades en el uso de las herramientas y técnicas. Para cuando hayas terminado el curso, habrás pasado en Visual Studio y examinado los errores de sintaxis mucho, que será segunda segunda naturaleza cuando trabajes. Ambiente digital. Esto pondrá tus nuevas habilidades aprendidas a un uso práctico y impresiona a tu jefe y calistas.

El curso está completo con archivos de trabajo alojados en GitHub, con la inclusión de algunos archivos para que te resulte más Podrás trabajar con el autor mientras trabajas a través de cada lección y recibirás un certificado verificable de fin.

Conoce a tu profesor(a)

Teacher Profile Image

Trevoir Williams

Jamaican Software Engineer

Profesor(a)

Habilidades relacionadas

Desarrollo Desarrollo web
Level: All Levels

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción: Bienvenido a este curso, desarrollo web moderno con blazer y lo hizo cinco. En este curso, aprenderás a construir una aplicación blazer a partir de los mayores utilizando técnicas y características de nivel empresarial. Soy tu instructor, terroir Williams y tengo más de 10 años de experiencia tanto implementación de sistemas como en la formación de personas igual que tú para desarrollarlos. Entonces te puedo asegurar que este es el curso para ti y vas a estar en buenas manos. Ahora a modo de introducción, queremos saber qué es blazer Blaser es una de las tecnologías de desarrollo web más recientes de Microsoft. Sí, teníamos la luz plateada y el interruptor de luz, pero no blazer, parece que está aquí para quedarse. Nos da crea alternativa a JavaScript cuando consideramos construir aplicaciones interactivas de una sola página, es ligero, es versátil, y soporta tanto Webassembly como nuestra aplicación regular dotnet escenarios de despliegue. En este curso, vas a aprender desarrollo básico a través construcción de Webassembly completamente funcional, por favor nuestra aplicación. También vas a entender todo el flujo de trabajo de dotnet cinco y la estructura de carpetas. Y en última instancia queremos, por supuesto, usar nuestras habilidades para entrar al lugar de trabajo con ellos, así que en código limpio y vamos a estar explorando algunas de nuestras opciones cuando se trata de estas cosas. Este curso, vas a aprender sobre Entity Framework Core. Eres más nuevo en aprender a manipular y desarrollar nuestra API de descanso donde, qué hay en el aturdimiento dotnet Core Services, quien fui a ver patrones de codificación, control de fuentes, implementación y hosting. Este curso está lleno de mermelada de información para guiarte hacia el éxito. Ahora este es un gran curso que es silencioso algunos pedacitos de contenido y, ya sabes, no voy a pasar por todo. Va a salir a medida que avancemos. Y estoy muy emocionado de tenerte aquí. Nos vemos en la siguiente lección. 2. Instala Visual Studio 2019 Community SDK neto 5: Oigan chicos, hoy vamos a empezar con la instalación Visual Studio Community Edition y.net cinco. Ahora nuestro viaje comienza aquí en el sitio web de Visual Studio, que puedes llegar a través de una simple búsqueda en Google. O puedes intentar reproducir esta URL, que es Visual Studio dot microsoft.com slash VS slash community. Ahora hay diferentes adiciones de Visual Studio. Y la comunidad es la que es, es gratuita para uso individual y esa es la que vamos a utilizar. Para que puedas seguir adelante y descargar Visual Studio, que te dará el Instalador de Visual Studio. Y una vez que eso se complete, podemos seguir adelante y ejecutar ese archivo. Lanzaremos los puntos de control de seguridad que pudiera tener, pero puede proceder a permitir que comience el instalador. Y todo esto es donde realmente se define de qué será capaz Visual Studio. Por lo que estas se denominan cargas de trabajo, y cada carga de trabajo le expondrá un conjunto de características diferente. Por lo que para el desarrollo web, querrás obtener la carga de trabajo de ASP.Net y desarrollo web. Para el desarrollo de escritorios. Se desea obtener el desarrollo de net desktop o subir. Y para cualquier otro SDK o tipo de proyecto que tal vez desee desarrollar, puede seguir adelante y obtener la carga de trabajo asociada con él. No, para este ejercicio, queremos preparar nuestro estudio de resultados con los recursos necesarios para el desarrollo web. Una vez más, puedes seguir adelante y tomar la mayor cantidad de estas cargas de trabajo. Cada una vendrá con su propio tamaño y te dice cuánto espacio se requiere en función de los que selecciones. Pero como mínimo para el desarrollo web, quieres asegurarte de tener ASP.Net y desarrollo web ticked. Puedes seguir adelante y tomar las otras herramientas de desarrollo si lo deseas. Pero no estoy dispuesto a hacer eso porque estos son all.net framework 644.84.6, lo siento, 4.74.8. Pero vamos a estar instalando el documento cinco en unos minutos para que puedas seguir adelante y hacer esto y dejar que Visual Studio se instale. Esto tomará un tiempo para que puedas tomar una taza de café y volver. Ahora una vez que se complete esa descarga e instalación, tienes dos opciones. Puedes seguir adelante e iniciar sesión. Y firma lo que significa que inicias sesión con tus conos vivos. Si tienes uno, si no, entonces adelante y crea uno. Es gratis y hace la vida más fácil si solo creas uno y realmente inicias sesión. Pero sólo voy a seguir adelante con una opción no nula quizá más tarde. Y luego eliges tu configuración general. Entonces enciendo el tema oscuro y puedes elegir lo que quieran, qué configuración de desarrollo o general. Simplemente dejaré el mío en general, pesar de que estamos haciendo qué desarrollo. Pero básicamente solo optimizan ciertos atajos de teclado y el diseño en función de tu selección. Dejaré el mío en general. Empezaré con Visual Studio. De acuerdo, así que una vez que eso se haga, te van a impulsar con esta nieve. Si no consigues esto, entonces está bien. Pero aquí la razón por la que te hubiera sugerido que inicies sesión con sus conos de vida porque entonces todo lo que tienes un periodo de prueba de 30 días. Y si no quieres la parte superior del cono, entonces básicamente te dirán que salgas. Por lo que en realidad puedes simplemente seguir adelante e iniciar sesión. Por lo que sólo voy a iniciar sesión con los míos. Y una vez que lo hayas firmado y luego verás que no te tiene licencia y solo parece presentar más acogedor. Entonces ahora en lugar de salir de Visual Studio, puedo cerrar. Y este es Visual Studio en el nivel muy básico. Ahora tenemos Visual Studio. Lo que también necesitamos es.net cinco. que puedas llegar a la página de descargas de cinco redes a través de una simple búsqueda en Google una vez más. O intentas reproducir esta URL, cualquiera que encuentres más fácil de hacer. En este punto, se desea descargar el SDK y el tiempo de ejecución. Entonces déjame empezar por cerrar Visual Studio porque necesita instalar extensiones para ello. Y el instalador siempre está disponible para ti. Entonces si no agregas una carga de trabajo, solo para que lo sepas, en realidad puedes simplemente hacer clic en modificar y luego relanzar ese pH con todo lo que diría el trabajador si más adelante quieres que haga algo nuevo, solo necesitas modificar esa carga de trabajo luego obtendrás esas Plantillas de Proyecto en consecuencia. Voy a cerrar Visual Studio, sin embargo, para que podamos continuar con nuestras instalaciones. Por lo que vamos a conseguir el.net cinco. Ahora puedes ver que los SDK disponibles en función de tu sistema operativo, tengo un sistema operativo Windows de 64 bits trabajando con retinal, así que seguiré adelante y descargaré eso. Y mientras ese se está descargando y solo Lindsay pulsa el botón Atrás y pasa al tiempo de ejecución, lo cual es absolutamente necesario para el hosting. Entonces ves que es el soporte en tiempo de ejecución. Entonces si vas a estar hospedando la aplicación.net cinco en, en un servidor local, entonces definitivamente necesitas el tiempo de ejecución. Por lo que solo puedes obtener este paquete de hosting que tienen ahí disponible para su descarga. Por lo que solo puedes descargar ambos y cuando ambos estén terminados. Entonces, cuando terminen los SDK, puedes seguir adelante e instalar ese 1 primero. No debería tardar demasiado. Y está bien, así que es exitoso. Después de haber instalado el SDK, entonces solo queremos asegurarnos de que tenemos ahí tiempo propio. También acepte cualquier cosa, y adelante y ejecute su instalación. Y te avisará cuando se complete con éxito, sepan que tenemos el SDK está completamente instalado. Solo quería lanzar Visual Studio y mostrarte lo que obtienes con esos SDK. Entonces si sigo adelante y creo un proyecto totalmente nuevo por las cargas de trabajo que tengo a mi disposición, veré diferentes plantillas de proyecto. Por lo que sólo elegí el nodo de trabajador web. Por lo que tengo la capacidad de hacer una consola regular arriba. Tengo el núcleo ASP.Net. De hecho, creo que éste viene por la carga de trabajo de escritorio, pero en este punto no estoy tratando de averiguar qué funcionó, quién pertenecería a cuál. Sólo tienes que saber que si vas a estar haciendo nuestro proyecto web, tienes la opción de elegir una aplicación web core, una aplicación blazer, y puedes elegirlos si no vas a hacer para el framework R.net, alguien para elegir una.net Core aplicación Web. Esta no es la aplicación real que estamos construyendo. Solo te estoy mostrando tus opciones. Entonces vamos adelante y ponemos el nombre del proyecto podría crear. Entonces, de la lista desplegable aquí, puedes elegir si quieres un Core 2.13.1 o el último dominate core 5. Y con eso, podrás elegir las diferentes plantillas y proceder. Entonces, cuando volvamos, realmente crearemos un proyecto y haremos un recorrido fuera de las estructuras de carpetas. 3. ACTUALIZADO: instala Visual Studio 2022 Community Redes 6: Oigan chicos. En esta lección estaremos instalando Visual Studio 2022, que se envía con dotnet six, que es el dotnet más rápido hasta la fecha. Entonces para empezar, solo necesitamos ir a las descargas de Visual Studio dot Microsoft.com slash. Y luego vamos a seguir adelante y golpear la descarga gratuita en la edición de la comunidad, que luego nos dará un instalador. Por lo que una vez que ejecutemos ese instalador, podremos seleccionar las cargas de trabajo que queramos. No hay cargas de trabajo realmente se refieren a las bibliotecas o las bibliotecas de apoyo para el tipo de up que te interesa crear. Entonces en este caso, definitivamente queremos conseguir esa carga de trabajo de desarrollo web ASP.Net y desarrollo web. Pero entonces si te interesan otras tecnologías, puedes seguir adelante y seleccionarlas. Para que veas que tengo varias cargas de trabajo seleccionadas con desarrollo de Azure, NodeJS y desarrollo de escritorio. Para que puedas seguir adelante y seleccionar esos también. Creo que van a venir muy bien con otros proyectos que podrías terminar construyendo todo en general, una vez que hayas hecho eso, puedes seguir adelante y golpear Instalar, lo cual se haría por la esquina inferior derecha. Por supuesto, cuantas más cargas de trabajo selecciones es mayor será el tamaño de la descarga. Entonces una vez que hayas completado eso, entonces puedes continuar. Ahora cuando eso no carga esté terminado, puede que te den ciertas opciones que no voy a conseguir porque ya lo tengo instalado. Por lo que esto te guiará a través de qué esperar. Podrás obtener una opción donde llegues a elegir tu tema. Como puedes ver, estoy usando el tema oscuro, pero entonces sí tienes la opción de un tema claro, un tema azul. Y la cosa es que Visual Studio 22 tiene muchos más temas que sus predecesores. Por lo que aunque no quieras encender los temas iniciales, puedes conseguir todos los temas si los necesitas. Además, es posible que se te pida que inicies sesión. Entonces si ya tienes 2019 instalado en tu máquina y acabas de instalar en 2022, ya iniciaste sesión en 2019, entonces probablemente no te pedirá que vuelvas a iniciar sesión. No obstante, si esta es tu primera instalación de Visual Studio, posible que se te pida que inicies sesión o crees una cuenta en vivo, que punto te gustaría solo usar tu Microsoft emitida en vivo en todos los loci me enseñan mucha calma en conos. O simplemente puedes seguir adelante y crear uno. Y si yo si mi memoria me sirve correctamente, puedes usar una otra dirección de correo electrónico que no sea de Microsoft secreta saliva fría. No obstante, una vez que estás en esta pantalla de aterrizaje, aquí es donde se procede a crear un proyecto. Entonces no voy a crear nuestros proyectos. No, solo te estoy mostrando qué esperar. Por lo que sólo tienes que ir a Crear Nuevo Proyecto. Y luego bajo eso serías capaz de elegir tu plantilla. Entonces como este es un curso de blazer, nos gustaría buscar blazer. Sigue adelante y busca plantillas si no lo ves como una de las primeras cosas aquí. Una vez que hagas eso, puedes darle el nombre. Una vez más, en realidad no estamos creando nada todavía. Cuando golpeas Next, entonces eliges el marco que prefieras. Entonces empezarás a ver dotnet Core 3.1, dotnet cinco, y dotnet Sikhs, que tiene soporte a largo plazo. Entonces, en este punto, ya que estamos usando Visual Studio 2022, probablemente querrías maximizar tu potencial y usar dotnet six. Pero entonces sí ves que sí tienes otras opciones. Pero cuando volvamos y realmente estamos creando un proyecto y caminaremos por lo que exactamente necesita ser seleccionado hasta ahora, no, una vez que hayas llegado tan lejos , entonces has instalado con éxito Visual Studio 20226. 4. Crea una cuenta GitHub: Hey chicos, en este video estaremos creando o cuentas de GitHub. Y esta es una cosa realmente simple, envejece, hace que sea muy fácil para nosotros inscribirnos. Solo necesitas ir a Github.com. Hace GIT HUB DOT COM, github.com, y aterrizarás en esta página. Ahora desde aquí, si ya tienes una cuenta y puedes iniciar sesión y prácticamente puedes dejar de ver el video aquí. Si no lo haces. No obstante, entonces la forma central está justo aquí. Puedes hacer un poco de lectura, solo consigue una apreciación de lo que GitHub es cuatro y se trata de todo, sí tienen precios, por lo que sí ofrecen planes empresariales y planes de educación y diferentes plantas o situaciones diferentes . Pero para el desarrollador solar o para equipos muy pequeños que pueden no ser de nivel empresarial de lo que lo hacen. Te doy mucho gratis. Por lo que para inscribirte, solo necesitas poner un nombre de usuario y una dirección de correo electrónico y una contraseña. Y una vez que hayas proporcionado todas esas cosas y siempre que tu nombre de usuario sea lo suficientemente único, por supuesto, entonces haces clic en inscribirte en GitHub y deberías estar dentro. Entonces ya tengo una cuenta, así que de verdad sólo voy a iniciar sesión. Viste que mis cejas se están volviendo locas tratando de proporcionar información. Por lo que sólo voy a iniciar sesión con mi cuenta existente. Entonces ese es mi pozo, puedes usar tu nombre de usuario o direcciones de correo electrónico para iniciar sesión y la contraseña. Y aquí estoy, esta es mi página de aterrizaje, así que en realidad te dan un sentido de comunidad. Es casi como un Facebook para desarrolladores hasta cierto punto, puedes seguir a la gente. Y una vez que están siguiendo a la gente, ves sus actividades en la página de aterrizaje, puedes saltar a tu repositorio. Entonces obviamente si eres nuevo en levantarte, entonces no tendrías nada listado a un lado aquí. De lo que no soy nuevo. He estado bastante ocupado poniendo contenido en YouTube, casi cualquier pequeño proyecto de mascota que es que empiezo, tengo un repositorio de GitHub o en realidad necesito ir a través de él. Entonces y también he tenido alumnos que me agreguen a su descanso en el pasado para que pudiéramos colaborar. A lo mejor estaban teniendo un problema y solo pude verificar su código a través del repositorio. Todas esas cosas son posibles a través de esta foto verbal. Pero una vez que has creado tus conos y estás registrado y bueno, obviamente no verías lo que estoy viendo una vez más. Pero entonces eso completaría la suscripción. 5. Crear proyecto Blazor: Oigan chicos, bienvenidos de nuevo. Entonces en este video vamos a pasar mucho tiempo. Simplemente queremos seguir adelante y crear un nuevo proyecto de blazer. Entonces vamos a hacer es abrir nuestro Visual Studio y luego iremos a crear un nuevo proyecto. Y luego a partir de aquí, vamos a querer buscar las plantillas blazer up. Por lo que puede que no lo tengas a la izquierda si nunca lo has creado antes, pero entonces no lo podrías encontrar en la lista de plantillas aquí. Y luego en función de las cargas de trabajo que pueda haber instalado al configurar Visual Studio. Puede que no se vea en la parte superior. Por lo que siempre puedes usar una búsqueda y puedes escribir blazer y filtrará esa lista de plantilla de proyecto, llevando el blazer a la cima. Para que puedas seguir adelante y hacer doble clic en eso. Y luego para el nombre del proyecto basado en el tipo de proyecto que estaremos construyendo, que es una aplicación actual o aplicación de gestión actual. Simplemente seguiré adelante y lo llamaré gestión actual para que puedas nombrarlo lo que sea con lo que te encuentres más cómodo. Pero después de darle el nombre, solo tienes que seguir adelante y hacer clic en Crear. Y entonces la siguiente pantalla es una pantalla muy crítica. Entonces déjame guiarte por las opciones que se presentan y cuáles son las implicaciones de cualquiera de ellas. Entonces, en primer lugar, tenemos la opción del servidor blazer arriba. Y si lees la descripción es una plantilla para crear, pero tiene un servidor arriba que ejecuta el lado del servidor y se ejecuta usando.NET Core también. Señales son tan prácticamente esto sólo nos va a dar un sitio web igual que cualquier otro sitio web.NET Core, si alguna vez has usado el core .net, y tiene que ser implementado en un servidor, tal vez ISR en solo ese código, desplegar nuestro sitio web regular que cómo tendría que desplegarse éste. Utiliza señal o quien tipo de darnos una sensación en tiempo real a nuestra aplicación. Entonces no es la peor opción, pero claro, el contexto definirá si necesitas usar esta, r nada. El blazer Web Assembly opción, sin embargo, nos da la opción de tener una aplicación Web Assembly. Y web, web assembly es un estándar abierto que permite que las aplicaciones se ejecuten directamente dentro del navegador. Esto significa que estaremos creando un verbo potente aplicación web que interactuará con una API, pero no necesita un servidor para ser alojado. De acuerdo, así que una vez que un cliente o alguien navegan a este sitio web, el bajo tiempo inicial puede tardar más que el configurado del servidor, pero en realidad descargará toda la aplicación y todas las dependencias ahí mismo en el computadora. Y se quedará completamente sin el navegador, reduciendo la necesidad del viaje de ida y vuelta al servidor cada vez que necesite datos. Las implicaciones de este nulo serían que todos tus binarios, todas tus dependencias son y sepan cuándo estar en la máquina de otra persona. Y si tienen alguna intención hacia ti son hacia lo que sea que tu aplicación pueda hacer, entonces podrían hacer algún daño si saben lo que están buscando. Entonces ya sabes, hay que tomar cada uno paso y tomar la mejor decisión con base en el contexto. Por lo que para este curso real, estaremos usando Web Assembly. Pero entonces si miras a la derecha, verás que tienes la opción de hacer. Núcleo dominante alojado Web Assembly up. Entonces esto es como un híbrido entre un servidor y nuestro subensamblaje arriba. Entonces en realidad voy a hacer esa porque nos da la capacidad de crear todo el lado de Asamblea Web, que es la interfaz de usuario, así como el lado API, que representaría al servidor en contraposición a la aplicación del servidor, que ya discutimos es realmente igual que cualquier otra aplicación dominar core. Si no estás familiarizado con las aplicaciones de núcleo 0.1x con un IRA MVC son sitios web, las aplicaciones funcionan. Después puedes consultar mis otros cursos donde pasamos por ese tipo de webs. Pero por ahora, estaremos construyendo la web Assembly usando el núcleo hospedado ASP.Net y las aplicaciones web progresivas. O el propósito de la opción Aplicación Web Progresiva es permitirnos crear una aplicación que la gente realmente no pueda cargar en su máquina. Por lo que nos estamos moviendo de DOE cargando al navegador y a ninguna parte hablando de descargar a tu máquina. Por lo que el sitio web realmente bajaría a tu máquina y puedes ejecutarlo y ejecutarlo igual que lo harías con cualquier otro programa en tu máquina. Entonces eso es lo que permitiría una aplicación web progresiva. De acuerdo, así que tendrías que poner en marcha un navegador cada vez que quisieras solo aunque ticket y uso. Y otro beneficio es que las aplicaciones web progresivas también se pueden descargar en teléfonos móviles y funcionar casi de forma nativa. Por lo que es una característica muy poderosa para dentro. Por lo que seguiremos adelante e incluiremos tanto las aplicaciones web hospedadas como las aplicaciones web progresivas de ASP.Net. Pero entonces sólo quería acurrucar un poco a chuck antes de seguir adelante. Y queremos ver nuestras opciones de autenticación para que podamos leer No, está en ninguna autenticación. Podemos cambiar eso y podemos ver al usuario individual un cono. Entonces, lo que esto hará es realmente permitirnos tener la capacidad de gestionar toda nuestra autenticación, autorización y operación relacionada con el usuario. Todo vendría incorporado, no tendría que hacer mucho más trabajo para incluir todas esas bibliotecas. Y esta distro de Web Assembly y dominar la aplicación alojada núcleo. En realidad nos permite usar el servidor de identidades, que se construye sobre los estándares abiertos, que básicamente es como, ¿verdad? No, ese es el estándar de seguridad de nivel superior para la autenticación. La mayoría de los sitios web a través de internet utiliza, y es nos permite tener soporte para autenticación local así como la autenticación de terceros. Entonces eso fue un poco de información que se te acercaba cuando estamos creando este disco. Hace Latino todas las opciones. Cuáles son los pros y los contras de cada opción. Una vez más, reforzar ese contexto determinará cuál es mejor para su situación. En este momento queremos hacer el trabajo, el blazer Web Assembly hasta con las características de la aplicación web progresivas alojadas .net Core incluidas, queremos agregar individualmente Cuentas de Usuario como autenticación. Y por supuesto es punto net five core course. Por lo que necesitamos asegurarnos de que lo hemos hecho cinco seleccionados. Muy bien, para entonces podremos seguir adelante y dar click en Crear. Y una vez que eso se complete, donde saludó con Visual Studio y nuestro explorador de soluciones y toda esta interfaz. Y vemos bastantes archivos en nuestro explorador de soluciones. Entonces voy a hacer una pausa ahí mismo porque tienes mucha información. Sólo tienes que saber que puedes revisar esa sección sobre tus diferentes opciones sobre lo que todas significan. Pero en el siguiente video, les voy a dar un recorrido por la estructura de carpetas para que podamos entender exactamente para qué sirve cada archivo y cómo se unen todos para hacer nuestra aplicación. 6. Archivos y carpetas de proyecto de recorrido: Oigan chicos, bienvenidos de nuevo. Entonces en esta lección, solo queríamos hacer un recorrido rápido por blazer, todos los archivos que se incluyen en este proyecto plantillas. Por lo que pueden recordar que cuando creamos este proyecto, queremos blazer seleccionado Web Assembly dos emitted.net Corea alojado. Incluimos los conjuntos de características de aplicaciones web progresivas, así como la autenticación incluida. Entonces pasaron bastantes cosas ahí mismo. Y además de todo esto, se trata de un.net cinco o.net Core cinco proyectos. Por lo que sólo queríamos tener un aprecio completo en, voy a tirar de todo en este proyecto funciona. Así que empecemos con un fondo que hará mi explorador de soluciones justo a mi izquierda, si este es el primer curso que están haciendo conmigo, solo mantenga mi Configuración de Visual Studio. De lo contrario, sabrías que puedes arrastrarlo hacia la izquierda, puedes arrastrarlo hacia la derecha y a cualquier lado, pero para mí se siente más natural. Por lo que siempre iré a la izquierda cuando esté mostrando la estructura de carpetas donde solo puedes seguir junto con tu liquidar. Entonces, empecemos con el hecho de que cuando buscamos en el explorador de soluciones, tenemos nuestra solución, por supuesto, lo que sea que llames Project o la solución. Pero luego te das cuenta de que tienes tres proyectos. Tienes auto o en gestión, cliente, servidor de gestión actual, y punto de gestión actual compartido. Entonces tienes tres proyectos. Altough la caja, porque hemos creado nuestra aplicación hospedada de núcleo de ensamblado web. Entonces, para el contexto, si no hubiéramos elegido esa opción alojada.NET Core, entonces sólo habríamos conseguido el proyecto de cliente de gestión de alquiler de autos. Por lo que no hubiera conseguido estas herramienta, acabaría de conseguir este proyecto de Asamblea Web. Y entonces tendríamos que conectarnos a una API en algún lugar y hacer lo que tenemos que hacer para que realmente tenga funcionalidad. Una vez más, esto es casi como un sitio web estático, todo este proyecto, todos estos archivos que estoy destacando cuando lo compila, ese programa, ese proyecto, ese sitio web, tantas formas de ponerlo. Simplemente no cargaremos al cliente mushy y en el navegador y correremos desde ahí. No obstante, debido a que hicimos que dominara el núcleo alojado, lo que Visual Studio ofreció de nieve es la capacidad de crear realmente el APA todo en uno. Por lo que la aplicación del servidor de puntos servirá como la API. Entonces esto tendrá que ir en algún servidor, tal vez un servidor IIS en hosts están en Uzziah o donde sea. Y luego simplemente nos conectaremos a través de internet desde el Web Assembly hasta nuestro proyecto API o funcionalidades API que tenemos en nuestro proyecto de servidor. Muy bien, así que en pocas palabras, por eso tenemos estos dos proyectos, punto servidor y cliente. El DOD compartido prácticamente es como, ya sabes, puente que consigo entre los dos porque podría haber clases que la herramienta podría tener en objetos comunes o de datos. Entonces en lugar de crearlos dos veces, simplemente nos dan un punto compartido. Por lo que ambos proyectos escáner hacen referencia a la sección compartida doc y aprovechan el ya creado cruza nuestros recursos. Ahora probablemente te darías cuenta de que cada vez que hago clic en Up Project, el archivo actual del proyecto aquí , ese archivo CSB, abre una pestaña y es solo un archivo XML. Entonces esto Es, todo lo que quiero señalar es el hecho de que todos están diciendo target framework.net 5, ¿verdad? Por lo que todos están apuntando.net cinco. Por lo que vamos a echar un vistazo al proyecto del cliente un poco. Entonces en el cliente bajo este nodo tienes tus dependencias. Y si quieres profundizar, ves analizadores o el proyecto dicen C8 o Francia es el proyecto compartido ahí mismo, o los paquetes. No voy a ahondar demasiado en lo que hacen los paquetes y frameworks y analizadores a medida que el proyecto continúa. Aquellos que hacen más bajo propiedades, tenemos este archivo llamado Launch settings.js sandwich. Got it solo tiene algunas configuraciones para que nuestra aplicación pueda ejecutarse. Cuando se está ejecutando. Debe ejecutarse en los problemas de dirección http localhost que si es SSL o HTTPS, tendrá ese número de puerto. Y ahí están las configuraciones que de manera caso por caso, podríamos necesitar venir aquí y cambiar las cosas, pero no quiero sentarme aquí y hablarte a través de cada pequeño porque probable que no necesites nunca interactuar con algunos de estos. Entonces sigamos adelante. Entonces www root, eso va a almacenar nuestros archivos estáticos o recursos CSS. Viene incorporado con Bootstrap y abierto icónico. Por lo que te están dando bastantes cosas fuera de la caja para ayudarte a iniciar tu diseño. Tienes el archivo index.html. Si has estado haciendo lo bys n por un tiempo, sabes que ese índice siempre debe ser tus primeros archivos. Entonces lo que sucede es que cuando se ejecuta la aplicación cliente, siempre mirará al archivo índice. Y luego archivo de índice es donde definimos referencias para todas estas cosas. Tenemos nuestro título. Entonces lo estás, si estás familiarizado con el HTML y el esqueleto básico, esto no debería parecerte demasiado extraño hasta que al menos la parte donde dice div ID arriba cargando. Y luego da un error si no podemos cargar. Entonces esto es como nuestro pequeño archivo de plantilla para decir este div donde se renderizará la aplicación. De acuerdo, el manifiesto JSON así como el trabajador de servicio. Y estos dos realmente están ahí para apoyar o progresivas ambiciones de aplicaciones web. De acuerdo, entonces cuando lleguemos a ese punto, entonces podemos buscar más en estos, pero por eso es de él que tienes estos dos archivos. Si no quieres tener estos dos archivos, entonces es propenso a causar que no eligió aplicaciones web progresivas. Pasaremos a páginas y páginas. Ahí es donde estaremos definiendo literariamente las páginas que necesitamos para construir nuestra aplicación. Entonces se puede ver que vino con algunos ya nos dieron, uno para autenticación, bien, uno como contador de muestras, buscar datos y el índice, bien, entonces índices a donde irá primero. Y a medida que construimos aplicación de carga, estaremos agregando más páginas. Y con más páginas vienen más caminos compartidos tendrán cualquier páginas son componentes. Entonces estas son páginas. Te darás cuenta de que son la misma maquinilla de afeitar de punto de extensión de archivo, lo que la página sería todo el asunto. tanto que el componente r es reutilizable en múltiples lugares. Entonces por eso en lo compartido llamaríamos a estos componentes porque cualquiera del menú de navegación, que ya sabes, aparecería en muchas páginas diferentes por todas partes. Tienes el diseño principal. Es decir, estas son nuestras plantillas reales donde simplemente renderiza el cuerpo de lo que está en la propia página. Muy bien, avisos de encuesta. Todos estos son solo componentes reutilizables y se comparten porque no se puede compartir a través de las diferentes páginas. Tenemos el archivo de importaciones, que habla de las diferentes bibliotecas que nos gustaría estar usando dentro de nuestros PHs y nuestros componentes. Nos basaremos en eso a medida que vamos junto con el archivo app.js, que tipo de líneas ciertas secciones. Entonces aquí se ve que tiene autenticación en cascada en estado. Y luego habla de si no está autorizado, qué debe hacer y si no se encuentra, qué hizo ella puede realmente ampliar el mecanismo de enrutamiento original del blazer hasta decir que bajo ciertos circunstancias por defecto debes hacer esto o hacer aquello. Entonces eso es lo que tasador app.all maquinilla de afeitar un poco facilidad. Después pasamos a nuestro archivo program.cs. Ahora aquí hay un expediente muy, muy, muy importante. En este archivo, en realidad vemos que queremos que todas estas cosas estén en su lugar para cuando se inicie la aplicación. De acuerdo, así que program.cs va a contener nuestro mecanismo de arranque de flejado, la configuración de inicio. Entonces básicamente cualquier cosa que veas aquí está viendo en la startup, en el momento de la startup, esto es lo que quería que sucediera. Entonces tomemos por ejemplo, esto, este constructor, los constructores diciendo que quiero construir un montón de configuraciones para su ejecución. De acuerdo, entonces si miras la primera línea, aquí es donde define a un constructor. Y entonces la última línea ejecuta ese constructor. Entonces todo lo que hay entre sí se está sumando al constructor. Builder dot root componentes, sumar hashtag arriba. ¿ Dónde vimos el hashtag arriba o qué relevancia es esa? Si miramos hacia atrás el archivo índice en nuestra regla www para ver que tenemos un div con el ID arriba. De acuerdo, así que eso es realmente sólo ver que queremos sumar. Up es sólo esa palabra clave global para la herramienta blazer up, cualquiera que sea el componente o cualquier elemento HTML que tenga el ID. Si conoces CSS, no sabías que el hashtag realmente significa ID. Entonces cualquier elemento que tenga el ID arriba, bien, y conforme avanza, se construye, crea un cliente por defecto, cual va a mirar el proyecto de servidor que Kim incorporó con nuestra plantilla. También tenemos este cisne donde estamos viendo, yo abarcaría abajo, estamos agregando el, Bueno, el mismo cliente al constructor de clientes HTTP. Entonces todo esto se está haciendo por ti. Si tuvieras otra API que quisieras agregar o interrumpir también, si entonces tendrías que hacer algo similar para asegurarte de que este APA sea fácilmente accesible desde cualquier otro lugar de tu aplicación blazer. Y luego a medida que avanzamos, vemos que agregamos alguna facilidad de autorización. De acuerdo, así que eso es básicamente en pocas palabras, realmente en pocas palabras para el cliente arriba y todos los archivos involucrados. medida que avancemos, estaremos haciendo cambios y ciertas cosas se harán más claras y ciertas cosas tendrán más sentido. Ahora echemos un vistazo a la aplicación del servidor y solo voy a pasar por alto las cosas que los dos tienen en común de todos modos. Entonces dependencias que lucen de la misma manera. Una vez más, tiene una dependencia del proyecto cliente, y tiene una dependencia del proyecto compartido. Está bien. Pasamos a propiedades. Y las propiedades tenemos el archivo de ajustes de césped, ya lo hemos visto antes. También tenemos este para un servicio dependencias, que hablaremos de tener una dependencia de MS Sql. Es posible que tengas que extender eso. Es posible que tengas que cambiar eso. Podemos dejar eso en paz por ahora. Después pasamos a las zonas. Por lo que las áreas solo se generaron automáticamente porque dijimos que queríamos incluir los servicios de identidad son las características de autenticación de cuentas individuales. Por lo que tenemos la sección de esta área que nos permite tipo de interactuar con login y logout y así sucesivamente. No ves los archivos y en su lugar sabes qué debemos necesitar para personalizarlos. En realidad podemos generarlos y lo que queremos. Pero por ahora, eso es lo que tenemos las áreas para que lo quitemos eso. Contamos con la carpeta de controladores. Y si alguna vez has trabajado con MVC, entenderías cuál es nuestro controlador. Si no, entonces un controlador es realmente solo archivo o un archivo de clase que tiene comandos. Ver, he aceptado nuestra solicitud y le daré nuestra respuesta. Nuestra solicitud podría ser yo quiero ir a esta página. Al hacer clic en un enlace, estás enviando una solicitud a un controlador. El controlador recibe tu solicitud y luego te da la respuesta en la forma de la página web que solicitaste. Si esa página web no está disponible, eso es un GET 400 cuatro patas y si algo sale mal en el medio, entonces obtienes un error. Entonces eso es más o menos lo que nuestro controlador es cuatro, así que estaremos usando controladores API porque como dije, el proyecto del servidor realmente sirve a un propósito. Prestar servicio al proyecto cliente con una API. Entonces tenemos un ejemplo. Tendré dos controladores. No voy a meterme demasiado en este con el controlador de configuración OID c porque esto, este es un controlador de configuración. Y más adelante cuando estemos haciendo cosas de autenticación, llegaremos a entender esto un poco más. Qué controlador del pronóstico del tiempo de Farnell solo habla de los diferentes puntos finales y es una buena muestra para que veas cómo van las cosas juntas y cómo podrían funcionar. Entonces cuando solicitas el pronóstico del tiempo, este endpoint recibe hits, esta acción se golpea, por lo que las acciones del controlador y luego la acción se golpea, y luego devuelve estos datos. Y esos datos se envían a través de las hebillas API a un cliente, y eso es lo que verá el usuario. Entonces eso es todo en pocas palabras, los datos definirán algunas de nuestras configuraciones y clases de base de datos y así sucesivamente. Entonces bien, no, no necesitamos meternos demasiado en eso más adelante cuando estemos sentados arriba, nos meteremos en esos archivos. Los modelos son básicamente solo abstracciones de las clases de datos. Y luego podemos pasar a páginas y escucharlo en el proyecto de servidor Girona, C1, ph. Y de verdad y de verdad, no estoy seguro si alguna vez realmente veremos e interactuaremos con el discurso o con cualquier otra página que hagamos aquí. Porque una vez más, el punto focal de nuestro AP es el lado del cliente, la aplicación del cliente, proyecto del cliente, ¿verdad? Entonces el pH está la carpeta está ahí, pero no vamos a estar haciendo mucho ahí. De todos modos. Tenemos hasta settings.js son una vez más otro archivo de configuración. Tenemos el program.cs. Y si miras el program.cs aquí, es ligeramente diferente al program.cs en el cliente. Pero realmente están haciendo lo mismo porque el program.cs en el cliente, es el mismo programa de clase excepto que está haciendo todo esto en la función principal, ¿verdad? Si conoces C sharp una vez a, lo primero que va a buscar como archivo program.cs, y va a ejecutar la función principal. Es así como operan. Entonces en el proyecto de servidor, tenemos el arranque, lo siento, tenemos el program.cs. Tiene la función principal también, pero en una función principal está llamando a otra función. Y esta otra función a la que está llamando más o menos está ejecutando lo que está en el startup.js. Entonces si miras en el style.css, entonces verás una configuración y configuración muy similar a lo que vimos en el program.cs en el lado del cliente. Entonces es realmente algo muy parecido. Esto es solo configurar bootstrapper como decir que cuando se inicia la aplicación, estos son servicios y características que quiero asegurarme de que me han complacido. Tan rojo aquí parecía que quería conectarme a la base de datos que se puede encontrar en conexión predeterminada. Todavía no hemos configurado eso, pero está ahí. Está viendo queremos agregar algún filtrado de excepciones. Queremos agregar identidad usando el modelo de usuario de la aplicación. Nos meteremos más en eso más adelante. Y queremos agregar servidor de identidad dijo que es un estaría obteniendo capacidades de servidor de identidad, que es cuando la autenticación y autorización del manejador, queremos usar alguna autenticación JWT. Por lo que todo eso puede salir de la caja sin que tengamos que hacer demasiada configuración. Y luego quiere agregar controladores con vistas y agregar facilidad para facilitar las páginas. También verás que existe la sección de middleware donde está agregando otras características. Para que pudiera ir línea por línea. Pero luego algunos de ellos, cuando los miras, son algo que se explican por sí mismos y a medida que avanzamos interactuaremos con ellos una vez más. Entonces eso es realmente todo para los proyectos de servidor y cliente. Y luego cuando veamos el pronóstico del tiempo, veremos aquí que esto es realmente sólo el modelo, ¿no? Entonces si miramos las referencias, ve que este modelo, este archivo está siendo referenciado tanto en la aplicación cliente. Entonces si esa referencia ves que la usa en el cliente o en el componente fetch data. Y también lo usa en el servidor. Lado en la llamada API. Entonces solo estoy señalando que totes para resaltar lo que está lejos el proyecto compartido porque este modelo único puede servir tanto a proyectos como a otros. Tenemos cosas en común entre ambos. Simplemente podemos definirlos dentro de lo compartido. Entonces solo voy a ejecutar esta aplicación para que puedan ver cómo se ve. De acuerdo, así que esta es nuestra plantilla base para nuestro blazer up. Una vez más, se trata de nuestros proyectos cliente en ejecución. Entonces si miras el puerto número cuatro para tres para, déjame solo mostrarte rápidamente el paralelo. Entonces si voy a cliente y luego voy a Propiedades sentadas de césped, ahí está para 4384. Entonces esa es la aplicación cliente que tenemos corriendo aquí. Entonces el contador, cuando hacemos click, mira eso, podemos hacer click y cambia. Y de repente interrumpí cuando sí buscamos datos, mira lo que acababa de saber. Por lo que dijo buscar datos, verificar el estado de inicio de sesión, y luego está lanzando esta página de inicio de sesión. Esta página de inicio de sesión realmente viene de los Servicios de Identidad. Se ve aquí abajo viendo coche en el servidor de puntos de gestión. Entonces recuerda que teníamos la sección de esa zona que señalé es realmente para el material de autenticación, ¿no? Entonces que las páginas realmente renderizando desde aquí. Entonces así funciona el servidor de identidades, en realidad puedas sentarte pegado a solo reescribirlo, redirigir, lo siento, una solicitud autenticada al servidor de identidades, y luego ese Pj será servido. Y una vez que esté satisfecho, entonces seguirá adelante. Si puedo, el app.js y aquí es donde hizo eso. Por lo que dijo cuando no está autorizado, derecha, luego redirigir a login. Entonces lector y un redireccionamiento para iniciar sesión, eso es un componente. Si miramos lo que ese componente está haciendo, y ese componente está en redirección compartida para iniciar sesión viendo, navega a la autenticación en slash login con nuestra URL de retorno y todo tipo de cosas. Entonces solo te estoy mostrando cómo todo está bien acoplado, solo sé que todo se veía tan transparente. Lo único que realmente no se ve esto de esto es que no lo es, no parece el tema general para el pH con el que empezamos, ¿verdad? Eso es lo único que no se ve muy sin fisuras. Pero el punto es que si no te expliqué todo eso, y me doy cuenta de que tengo tantas partes móviles trabajando para renderizar todo esto. Entonces correcto, y todas nuestras cosas de inicio de sesión y registro no funcionarán porque hay cosas que tenemos que hacer. Pero solo te estoy mostrando cómo son las cuchillas las las miradas. Y ojalá disfrutaran de esta tienda donde pasamos por cómo funcionan todas estas cosas juntas. Y si aún hay cosas que no están claras, barco, entonces a medida que avancemos tendrán más sentido. Entonces mantente atentos. A continuación hablaremos sobre el aspecto y la sensación de toda la plantilla y cómo podemos modificarla. Y a medida que avanzamos, sólo vamos a seguir agregando funcionalidad y explorar cada vez más barcos son opciones en esta aplicación blazer. 7. ACTUALIZACIÓN: crear/mejorar el proyecto para. Redes 6: Oigan chicos, En esta lección vamos a ver dos cosas. Uno, cómo crear el proyecto blazer Webassembly usando dotnet 6. Y también veremos cómo puedes actualizarlo si ya lo has creado en donot cinco, lo cual es sorprendentemente muy fácil. Entonces, empecemos con cómo lo creamos. Entonces todo lo que tengo que hacer abriendo Visual Studio 2022 en lugar de 2019 porque seis es único para 2022. Entonces solo puedo seguir adelante y crear un nuevo proyecto. Seleccionaré mi app blazer WebAsembly, plantilla siguiente, y luego le daré mi nombre. Entonces eso es auto y manejo net 6. Digo net 6 porque ya tengo el proyecto dotnet cinco con el nombre actual gestión en el mismo directorio. Si este es el primero que estás creando con ese nombre, no necesitas poner en la red seis o puedes darle el nombre que te sientas cómodo. Entonces después de seleccionar el nombre, pasamos a siguiente, y luego querremos seleccionar qué marco para poder usar dotnet cinco, podemos usar Dani core 3.1, pero dotnet six es único de Visual Studio 2020. Para también para sacar el máximo provecho de este curso, querrías usar Don a las cinco porque este curso se imparte dentro del contexto de hecho a las cinco. Y todo lo que aquí se enseña es hacia adelante compatible con dotnet 6, entre otras cosas. Por lo que querrás usar dotnet six y querrás elegir el tipo de autenticación para que sean conos individuales. Y puedes tomar cada una de las siguientes opciones. Una vez que superes todo eso, puedes seguir adelante y golpear Crear. Ahora digamos que ya tienes el proyecto dotnet cinco creado y ya pasamos por un recorrido por las carpetas. Y lo que realmente representa cada archivo en un nivel superior, realmente significa y cómo se usa en el proyecto. Entonces si queremos actualizarlo a dotnet seis, todo lo que realmente tenemos que hacer, y solo unos pasos. Una, queremos cambiar el marco objetivo. Por lo que quieres hacer clic en ese archivo CSV. ¿ Ese archivo en la parte superior del proyecto? Basta con hacer clic en él una vez y se abrirá este archivo editable. El marco objetivo es 6. Entonces eso hubiera estado viendo 5. Se puede cambiar eso a seis. Y también quieres agregar estos dos paquetes para que solo puedas pulsar Pausa y volver a escribirlos según sea necesario. Entonces quieres agregar esos dos paquetes y luego quieres, si haces una compilación, vas a conseguir algunos errores. No te asustes porque todo lo que realmente necesitas hacer es hacer lo mismo por el proyecto de servidor. Te permite target met six y sumar los mismos dos. Por lo que en realidad podría simplemente copiarlos desde el cliente y pegar dentro del archivo del servidor. Después de que hayas hecho eso, probablemente quieras actualizar la carpeta compartida también a dotnet six. Esa parte es realmente opcional. Eso también se puede hacer. Entonces tú quieres. Entonces hay, hay unos pasos, pero son realmente sencillos pasos. Entonces solo te estoy dando poco a poco. Entonces para mí lo más fácil de hacer para actualizar los paquetes, porque lo que pasa sin embargo es que estamos apuntando a dotnet seis, pero todo por defecto estaría apuntando a dotnet cinco. Por lo que quieres poner todo hasta la misma versión para que solo puedas grabar la solución en este punto e ir a Gestionar paquetes NuGet para solución, lo que luego te permitirá simplemente ejecutar actualizaciones en todos tus proyectos de una sola vez. Por lo que sólo saltaré a las actualizaciones, que en unos segundos se poblarán. Ahí vamos. Y todas estas cosas necesitan ser actualizadas desde sus actuales versiones de cinco puntos cualquiera a seis. Perdón, solo adelante y di actualización. Por supuesto, tenemos que aceptar y unos acuerdos de licencia si no estás muy familiarizado con este paso como en qué es el gestor de paquetes NuGet y cómo ayuda sin embargo, o más adelante, todo eso tendrá sentido para ti. Entonces con todas esas actualizaciones hechas, sigo recibiendo algunos errores y creo que eso es porque están filtrando poco a poco nuestro raro. Pero creo que algunos proyectos aún no se han agarrado. Entonces voy a hacer construir, hacer una solución de reconstrucción. Y ahora tenemos todo reconstruido con éxito y 0 flechas. Entonces, básicamente así funciona. Y a medida que avanzas usando Visual Studio 2022, verás que las herramientas son mucho mejores. Estarás viendo cosas que no necesariamente estarás viendo en mi pantalla porque estaré impartiendo mayor parte del curso usando 2019. Pero vas a estar recibiendo cierto código insinuando que ves aquí que pueden, están preguntando si quieres permitir que código IntelliJ te monitoree y lo ayude. En otras palabras, In teleco hace un intellisense mejorado que te da mejor insinuación de código que las paradas estándar. Por lo que te vas a divertir absoluta. Otra característica genial que han introducido, su recarga caliente, se puede ver aquí con esta bola de fuego. Entonces cuando estamos construyendo interfaces de autor, vas a ver que voy a hacer ciertos cambios en CSS o ciertas cosas, entonces tendré que reiniciar. Esa es una de las limitaciones del 2019. Si no, si estás usando 2022, en realidad puedes simplemente hacer una recarga en caliente y luego simplemente puede refrescar la interfaz sin que tengas que reiniciar la compilación. Si todo eso te castiga, no te preocupes mientras avanzas, te acostumbrarás y empezarás a apreciar todas esas pequeñas cositas. Y si ya estás familiarizado con la interfaz de Visual Studio, vas a ver algunas cosas increíbles saliendo de este nuevo IDE. Si no puedes actualizar, entonces eso no es problema. Todo lo que está en este curso es amable hacia cualquiera de los ambientes. Entonces eso es todo por ahora. Te veré en la siguiente lección. 8. Personalizar la composición de Blazor: Oigan chicos, bienvenidos de nuevo. En esta lección, estaremos estudiando nuestro blazer up. Conoce si estás familiarizado con alguna forma de qué desarrollo sabrías que peinar una aplicación web realmente solo tiene que ver con modificar y el CSS y el HTML para asegurarnos de que podamos entregar la mejor experiencia de usuario a cualquiera que esté yendo estar interactuando con nuestro arriba. Si estás por extensión familiarizado con las aplicaciones.net MVC o.net Core MVC páginas de resultados del servidor de aplicaciones. Sabrías que obtenemos este archivo de diseño layout.css HTML, que básicamente establece el tono de cómo se verían todas las páginas. Blazer lo hace un poco diferente libros al final del día, es el mismo concepto de HTML y CSS que vimos en la gira. Tenemos un montón de archivos HTML. Tenemos algunos archivos CSS, y lo que vamos a estar haciendo, algunos pequeños retoques estarán transformando lo que está en la pantalla nulo para que se vea algo más como esto. Entonces lo estoy dando tendido a campo oscuro, ¿verdad? Me estoy quitando el resaltador morado para toser la barra en la parte superior, y muevo la sección de navegación hacia la izquierda. Entonces mientras estamos haciendo esta actividad, no es tanto, pero nos dará una sensación de dónde podemos ir para modificar Watts. Y también vamos a tener una pequeña sensación de CSS entero. El aislamiento Css funciona en blazer. Ahora sólo el buck chuck un poco. Por lo que uno de los archivos más importantes se modificará en general cuando vamos a estar agregándome porque algunos temas, scripts personalizados o algo así a todo el blazer up sería el archivo index.html porque esto marca el tono para el índice para el lamentable documento HTML con unas etiquetas de cabeza, todos los enlaces CSS, toda la sobrina js dot, su propio por adelantado, correcto, por lo que terminarías modificando esto en algún momento, sin embargo, más allá de eso, todo se carga en nuestro div con la identificación hacia arriba. Entonces más allá o index.html Nodo. El siguiente archivo más importante sería nuestras bandejas Leo principales son las que luego renderiza un div llamado página, nos da nuestro menú de navegación a un lado, ¿verdad? Y luego nos da nuestra área de contenido principal donde tenemos la pantalla de inicio de sesión arriba que un enlace de barco, y luego lo que viene en el cuerpo. Entonces aquí es donde mucha de la magia sucede en términos del CSS y aquí es donde entra el aislamiento CSS. No hay un gran archivo css. Es decir, sí, tenemos archivos CSS disponibles para nosotros en la carpeta CSS. Tenemos app.js, CSS, que tiene algún CSS general para la app que realmente corresponde al archivo de arriba o al archivo de índice porque hay una referencia, ¿verdad? Pero entonces cuando se trata del diseño principal, tiene su propio archivo CSS como vimos antes. Entonces desde aquí puedo controlar ciertos elementos que sólo están en este componente. Y puedo aplicar esos estilos CSS, sea lo que sea en consecuencia. Entonces ese es el polo del aislamiento CSS. Puedo tener un archivo CSS dedicado a los componentes de Ariza separados del CSS UP general. Empecemos por un cambio en el color de la barra de navegación. Entonces para llegar a la barra de navegación CSS, puedo decir OK, la barra de navegación sería suficiente. Menú se encuentra en este div llamado barra lateral. Si voy al punto principal de Leodes, punto CSS, veo la barra lateral de clase. Entonces lo que hicieron los que no saben se aprende durante el gradiente, razón por la que ves tipo de cambio sombreado en morado si quieres correr de nuevo y mirarlo. Pero por eso cambia de tono en morado. Entonces lo que voy a hacer es solo comentar esto. Es decir, puedes borrarlo si quieres que alguien lo retenga. Y voy a poner otro estilo como su color de fondo y luego hashtag y ese sake de valor y sólo arrancarle eso. Y eso es lo que le da ese lindo acuerdo no a oscuro tipo de fondo, ¿verdad? Entonces, solo veamos cómo se ve eso. De acuerdo, así que hice el cambio y cargé la app y no estoy viendo los cambios. Y ahora esto es sólo algo con el almacenamiento en caché. Tienes una serie de cosas que puedes hacer aquí. Puedes borrar tu historial e intentarlo de nuevo y cualquier navegador que estés usando. O puedes aguantar el control y presionar F5. Entonces Ryan, No, ese es el gradiente pero crecido para la barra de navegación cuando controlo F5, entonces consigo mi fondo oscuro. Ahí vamos. Está bien, entonces si te encuentras con alguna dificultad con eso, sí controla F5 y deberías estar bien. Entonces eso es lo que pasa cuando cambio el CSS en ese archivo CSS específico para ese componente. Entonces veamos qué más podemos hacer. No dije que quisiéramos quitar esta barra superior. Entonces déjame volver al acorde, vuelta al menú principal. Y esta fila superior aquí lo está, top Reuters en la pantalla de inicio de sesión, así como un enlace de morada. No quiero nada de eso, así que solo voy a mover un poco la pantalla de inicio de sesión y tomar eso. De hecho, en la demo tenía la pantalla de inicio de sesión que se mostraba el menú de navegación. Entonces lo que puedo hacer es tomar la pantalla de inicio de sesión, ¿verdad? Entonces eso es solo una referencia a todo el componente llamado login display. Entonces iré al menú de navegación y sigo en modo de depuración, pero refresco antes, pronto, pronto, lo suficiente, lo siento. Y lo que voy a hacer más en el menú de navegación es pegar nuestro componente de pantalla de inicio de sesión, ¿verdad? Entonces menú suficiente tiene botones para qué tenemos aquí? Tenemos casa, donde tenemos el mostrador y tenemos el fetch. Esos son los tres muchos artículos que vemos, home counter Fitch. Y luego tiene algo para colapsar el menú y eso está bien. Entonces lo que necesitamos saber es en realidad se asegura de que la pantalla de inicio de sesión caiga en línea con cómo todo lo demás bucles. Porque tal como lo vimos, realmente sólo había enlaces en la barra de navegación. Entonces me voy a refrescar y ahí podemos ver cómo se ve esto. Está bien, y esto es lo que estoy viendo. Entonces estoy viendo los dos enlaces. El bar superior se ha ido. Tan logrado que lo que las herramientas son justo, lo son, no encajan del todo con el diseño de nuestra barra de navegación. Entonces modifiquemos lo que hay en la pantalla de inicio de sesión para que se vea así. Y solo voy a copiar esto porque sé que la forma en que los enlaces deben verse en la barra de navegación depende de todo este bloque. Necesitamos que l i, y necesitamos todas esas clases en el camino. Entonces solo voy a copiar esto, saltar a la pantalla de inicio de sesión. Y luego por aquí veremos que tenemos los autorizados bajo vistas no autorizadas. No obstante, también notamos que en realidad son solo un montón de etiquetas de ancla, ¿verdad? Por lo que notarás que ese blazer en realidad viene con ciertos componentes que te ayudan a emular algunos elementos HTML, ¿verdad? Por lo que nav link sería uno de esos componentes el cual te da una etiqueta de ancla o solo es una forma blazer de ver Oncotype porque te das cuenta que ambos tienen el mismo H ref, ¿verdad? Por lo que solo puedo quedarme este H ref, reemplazarlo aquí. Y yo sólo voy a transformar esta LI. Bueno, quiero decir que la LI me va a dar el tipo de enlace que necesito para encajar en la barra de navegación. Entonces realmente estoy transformando esta etiqueta ancla en este LI. Entonces eso encaja, ¿verdad? Por lo que el texto que quiero ser dividido sería lo que se mostraría aquí en esta etiqueta ancla, los hello usernames y nosotros reemplazamos home. Y para esto serían los Perfiles. Entonces creo que para el ícono, voy a usar personas OID. Por lo que todos tenemos, tenemos estos iconos disponibles para nosotros a través de open icónico. Ya está incluido en el proyecto. Entonces así es como conseguimos esa casita en el cartel más y así sucesivamente, en la barra de navegación. Por si acaso no estás familiarizado con. Si lo eres, entonces deberías estar sintiéndote bien en absoluto. ¿ Está bien? Entonces ese es el para si la persona está autorizada, lo que significa que la persona ya ha ingresado eso dice perfil, el siguiente dice logotipos. Entonces voy a simplemente duplicar ese poco de código y reemplazar lo que necesito para reemplazar ahora y ver la diferencia con esto. Este es un botón. Este se hizo en criptología. Este es un botón. Veamos qué hace el botón. El botón tiene evento onclick que dice Ser iniciar psi nada. Y luego abajo se ve un bloque de código con ese evento muy click comenzar psi naught. Y entonces lo que hace es que navega a esta URL. Para que pudiera, ya sabes, podría quedarme con el botón, pero luego estoy usando enlaces de navegación. Entonces en lugar de modelar la parte superior, sólo lo mantendré consistente de desentrañar aquí, de innovar aquí. Entonces lo que haré es configurar el HRF para el link de navegación del logo sea la misma URL a la que hubiera navegado. Por lo que la edad ref aquí es autenticaciones slash logos. ¿ Está bien? Y luego éste, creo que hay un logos Icono abierto. Si no me equivoco, ahí vamos. Dash logo de dash, ¿verdad? Y luego sólo voy a comentar estos dos porque no los necesito. Acabo de reemplazarlos. El tag de anclaje para el perfil de la persona así como el botón del logotipo. Los he sustituido por links de nav herramienta yendo a los mismos lugares, ¿no? Por lo que puedes hacer una pausa aquí y puedes intentar hacer lo mismo con estos dos. Yo sólo lo haré. Por lo que acabo de reemplazar el login y registrarme con las etiquetas LI correspondientes. De acuerdo, y para el registro tengo o, me guión Burson para el ícono, y luego para el login o login discontinuos, dash login, lo siento. Está bien. Y entonces realmente y verdaderamente este bloque de código se vuelve inútil porque no hay nada que vaya a estar llamándolo de todos modos. Pero más adelante entraremos en escribir el código y entenderemos estos bloques de código y eventos. No obstante, echemos un vistazo rápido a cómo se ve esto. De acuerdo, así que esto es lo que obtenemos. No, verás que como que se ve un poco más en casa con todos los demás enlaces se ven ambos al mismo tiempo. No, todavía no encajan del todo. Y este es otro punto del blazer, la parte de aislamiento CSS de blazer donde sí, están en el componente para la barra de navegación. Pero este es otro componente todo por sí mismo. Este es el componente de visualización de inicio de sesión, y solo lo estamos llamando desde login, desde el componente de menú de navegación. Pero son dos componentes diferentes. Por lo que el CSS que aplica para el menú de navegación no se aplicará aquí porque se trata de un componente completamente diferente. Entonces qué tendría que hacer para que estos enlaces mostraran cómo se muestra cada otro enlace. Y yo solo tomaré a todo este autor como tú de la copia de visualización de inicio de sesión y luego vengo aquí. Y en lugar de hacer referencia al componente de visualización de inicio de sesión, solo voy a hacer pieza todo ese contenido ahí. De acuerdo, entonces tenemos la autorización, ustedes autorizan desconocedores de los aliados, eso debería mostrarse en consecuencia. Y todo cae en los componentes del menú de navegación, lo que significa que ahora se aplicará todo el estilo para el componente. Entonces eso somos nosotros reiniciar y ver qué eso. Y luego cuando volvemos vemos vemos que algo se ve diferente. ¿ Verdad? Entonces eso me parece un poco mejor. Al igual que, oh, parece nieve. Puedes hacer es seguir adelante y dar click en el camino y ves que ahí funciona el novedoso enlace. Y si vuelvo y luego hago clic en Registrarse y ver que funciona ahí también. Y así podemos estar seguros de que todos nuestros vínculos funcionan. Todo parece uniforme. Y una vez más, es, aparte de los matices con nosotros teniendo que compartir nuestro CS, o no están seguros del CSS entre componentes. Se puede ver donde es más bien lo mismo cuando se trata de estilizar en blazers, solo que te dan la capacidad de aplicar algún componente CSS único si quieres. Pero entonces en última instancia puedes peinar todo desde una proteasa como con cualquier otra aplicación. 9. Crear componentes de blazor: En esta lección, vamos a estar echando un vistazo a algunos componentes de blazer y cómo podemos crearlos, para qué se pueden utilizar. Y esto es solo un brillo sobre donde quiera y comenzó la aplicación AR de la que aún estamos aprendiendo, nuestro entorno blazer y todas las cosas que nos brinda. Entonces no voy a ponerme demasiado en profundidad, pero de lo que quiero hablar es de uno entero, podemos crear más páginas. Y dos, cómo podemos crear componentes que se pueden incrustar en páginas. Entonces cuando hablamos de una página, realmente nos referimos a algo que podemos navegar para escribir. Entonces cuando hago clic en contador, cambia, va a la página de contador y se puede ver en la URL ii va desde el contador de barras de direcciones de host local. Si hago clic en peine, se remonta, ¿verdad? Estos para buscar datos va a intentar ir a buscar datos, pero luego se está protegiendo del acceso no autorizado. Y así navegará a la página de inicio de sesión. No nos estamos metiendo en eso todavía. Pero lo que quiero hacer es crear otra página, como todo lo que tenemos el contador melocotón y luego crear nuestro componente que luego podemos incrustar en esa página para que podamos ver un top end ante nuestros ojos. Antes de meternos en eso sin embargo, echemos un vistazo a lo que tiene el contador de página. Entonces la página del contador, que en realidad es solo un componente, se encuentra en las páginas y la verás cono maquinilla de afeitar Teradata. Y las razones por las que realmente es solo un componente. Si miras compartido, ves que todos ellos están ahí con las matrices son. Y acabamos de pasar por lo que Login display dose versus Nev Many versus todos estos, ¿verdad? Tan frío invierno y estos comparten una cosa. Todos son rayos son componentes. No obstante, compartido implica que estos componentes se utilizan en muchas aplicaciones. Versus el Pij es donde el, el componente sirve como literalmente una página. Entonces cuando veas este componente para contador, verás que tiene esta directiva de top en página. Y luego dice que el servidor raíz sólo hará clic en o alterará su en SRE de Colin. Dijo contador de slash dirección del host local. Bueno, por eso. De acuerdo, de cualquier manera tengo todo el contenido. Recordamos que teníamos la palabra colon terror. Agregamos eso conos actuales, y luego tuvimos nuestro botón. Y lo que pasa es que al hacer clic en el botón hay un evento onclick que dice, bueno, incremento en uno. Una vez más, nos meteremos en todo onclick y así sucesivamente, poco después. Entonces no voy a pasar demasiado tiempo en eso. Entonces si quisiera crear otra página, podría ir a Pages clic derecho diga componente de maquinilla de afeitar. Y luego desde aquí puedo darle un nombre a este componente. Entonces digamos que quiero llamar a este algunas personas. Ph, está bien, porque eso es todo lo que realmente va a ser en este punto. Por lo que sólo quería muestrear página. Ahora lo primero que quería hacer es hacerle saber que es positivo. Por lo que necesito me había inscrito página arriba y luego le doy su ruta. Entonces digo página de muestra de slash. Esto es lo que hay que escribir para llegar a estos componentes. ¿ Está bien? Y déjame decir que eso es un h3. Entonces déjame usar un H5 y decir que esto es de página completa. De acuerdo, ahora para llegar a ella desde el menú, porque no hover nueva pieza que quiero navegar para tener que ir a mi componente de menú nav, que aún tengo todos estos comentarios, no hay problema. Pero entonces necesito agregarla a la barra de navegación vio risas es realmente sólo tomar una copia de eso y cambiarla. Entonces éste dice que es ref fetch data. Es contador áspero. ¿ Qué significa eso? Bueno, contador tiene datos de búsqueda de contador raíz tiene la ruta slash fetch datos. Entonces para llegar a mi página, necesito página de muestra de slash. Entonces para el nuevo elemento de menú, solo voy a decir h o f es igual a página de muestra. Por supuesto que tengo que cambiar el texto para que quede claro que para eso sirve. Y no voy a cambiar nada más. Porque una vez más, esto es un experimental. Entonces cuando ejecuto esta aplicación, voy a ver mi nueva página de muestra de elementos de menú. Y cuando hago clic en eso, navegamos a página de muestra con nuestro contenido ¿verdad? Y note la página de muestra de la tira de la ruta. Entonces si dije alguna página uno, entonces básicamente va a decir durante cuatro días nada en esta dirección. No sabe qué es eso. Alguna verbiaje, sin embargo, siempre me llevará de vuelta a mi página. Así que vamos a crear nuestros componentes que eran, ya sabes, componentes que pueden ser reutilizables. Entonces si es algo que queremos usar varias veces múltiples por favor está incrustado aquí, pero mostrar completamente ahí, que vamos a ver. Una vez más, esto es sólo una vista previa de las capacidades. Pero veamos realmente poner esta porción en un componente y luego incrustar este componente en nuestro terreno de juego. Entonces digamos que quería componentes, pero eso no quería ponerlos en la misma carpeta compartida, ¿verdad? Por lo que es tan fácil como crear una nueva carpeta. La organización de archivos siempre es muy importante, así que solo voy a llamarla componentes, ¿verdad? Por lo que conocemos los componentes. Ahí vamos. Y entonces aquí puedo decir agregar componente de maquinillas de afeitar. Y luego voy a llamar a esto algunas personas pij componente, nuestros componentes de contenido de página de muestra. Y sólo siendo muy explícito para que pueda recordar para qué era, ¿verdad? Por lo que ahora tenemos este componente. Puedo poner todo lo que quiera ahí dentro. Yo puedo poner digamos que no quería que esto sólo se imprimiera ahí. Yo quería ponerlo dentro de estos componentes se pueden poner en un botón. ¿ Está bien? Y éste sólo va a decir Hola, mundo, ¿verdad? Por supuesto que están usando Bootstrap, previó que todas las clases Bootstrap se aplican cuatro. Puedo decir btn oscuro, sólo para darle algún carácter. Y entonces ahora tengo este componente, ¿no? No, quiero que el contenido de este componente sea incrustado en esta página. De acuerdo, entonces lo que puedo hacer aquí es simplemente llamar a este componente como si fuera un remolcador. ¿ Está bien? Pero entonces te das cuenta ahora tiene una línea ardiente roja y no tiene del todo ese verde. A ver si puedo encontrar otro, ¿verdad? Entonces cuando estamos tratando con componentes, siempre se quiere ver ese verde envalentonar el texto. no se ve muy bien aquí. ¿ Por qué? Porque necesitamos incluir una biblioteca para poder acceder a porque ésta no está en el mismo directorio que la página de muestra. Está en otro directorio y no sabe ni ve nadie estructura. Por lo que podemos agregar una declaración de uso aquí arriba donde vemos usando la gestión actual, ese es nuestro nombre de proyecto, las plantas de punto de gestión actuales son, que es nuestro nombre de proyectoe.com, que es nuestra carpeta nombrada como el espacio de nombres. Y una vez que tengamos esa declaración usando, entonces podemos acceder al componente y ves que todo se ve bien. Por supuesto, el uso de declaraciones puede ponerse desordenado. Entonces lo que puedes hacer alternativamente es ponerlos en las importaciones. Entonces en las importaciones puedes apilar usando digamos Zelda usando todas esas bibliotecas que conoces, vas a estar usando nuestras múltiples vistas cruzadas. Simplemente puedes seguir adelante e incluirlos en ese archivo de importaciones. Toda vista va a estar mirando eso o todos los componentes son, son los insumos candidatos. Por lo que sabrá, sabe que aquí es donde debe verse. Entonces, sólo vamos a correr eso y ver cómo se ve eso. De acuerdo, entonces estamos de vuelta en nuestra arriba y miro a la página de muestra y aquí está. Entonces estoy viendo algo de contenido y componente de basura, ¿verdad? Entonces esta es la página de muestra que es etiqueta h3 que Kim originalmente con componente r. Ahí está. Pero entonces nuestro componente de contenido de página de muestra tiene su propio título, tiene el contenido y botón Hazara que sabemos que es de cuero oscuro o así sucesivamente tema, correcto, así que eso es sólo una vez más, una introducción rápida o un brillo rápido sobre cómo podemos crear nuestros propios componentes. Y a medida que construimos sobre esta aplicación, vamos a ver más y más de las capacidades que salen. 10. Revisar y añadir cambios a GitHub: Oigan chicos, bienvenidos de nuevo. Entonces estamos aquí al final de nuestro primer módulo donde lo que hicimos fue crear una nueva aplicación de blazer. Tuvimos un rápido recorrido de todos los archivos, sostén el cada juega un papel en todo este ecosistema. Y luego miramos cómo podemos personalizar el aspecto y la sensación de ello e incluso crear algunos componentes para nosotros mismos. Entonces no hemos hecho mucho, pero al menos ahora tenemos un blazer mucho de cosas de TS es y si parecía intimidatorio antes de la mitad, probablemente te das cuenta de que en realidad es sólo otra.NET Core aplicación en este punto. O quiero simplemente hacer un seguimiento de dónde cambia. Y estaremos tomando conos más cortos como este al final de cada módulo solo se registrarán o las cotizaciones son repositorios de GitHub para que tengamos nuestros puntos de control básicos en la historia de la evolución de nuestro proyecto. Espero que ya hayas creado tu cuenta de GitHub. Y lo que necesitamos hacer para avanzar sería sólo agregar al control de fuentes. Entonces si miras en la esquina inferior derecha de tus webs de Visual Studio, lo siento, ventana. Debería ver Agregar al control de fuente. Para que puedas seguir adelante y hacer clic en eso y deberías ver conseguir. Y luego sale esta ventana. Y si te pide que inicies sesión, entonces proporcionas tus credenciales de GitHub. Ya sabe quién soy y conoce el camino local. Mis conos, soy el dueño, el nombre del repositorio. Yo le puedo dar una descripción. Puedo hacerlo privado o público. Yo lo voy a hacer público para que ustedes puedan acceder a él, claro. Y te recomendaría que lo hagas público en general para que otras personas puedan encontrarse y ver el trabajo que estás haciendo. Y puede ayudar a construir su portafolio para que lo comparta con futuros empleadores. Para que puedas seguir adelante y hacerlo privado. No obstante, si tú, si viste deseable admitir mi en público una vez más, y luego solo di crear y empujar. El resultado de todas estas acciones será la creación de tu propio repositorio GitHub. Una vez más, si lo hiciste público, entonces en alguien puede venir en GitHub y buscar tu mango de lo que puedan encontrar el proyecto. Pero la próxima parada, vamos a empezar a mirar algunas cosas divertidas. Vamos a empezar a mirar poco más add remolcado, funciona el motor de autenticación, así como cómo podemos empezar a poner base de datos detrás de nuestra aplicación. 11. Resumen de la sección - operaciones de base de datos: Oigan chicos, bienvenidos de nuevo. En este apartado del curso, vamos a estar viendo algunas de las operaciones relacionadas con los datos que nos pueden brindar a través de toda nuestra aplicación blazer. Entonces cuando habíamos creado o aplicación agregamos indica que queríamos autenticación sobre disposiciones. Y fuera de la caja, lo que hizo el bootstrapper fue darnos acceso al servidor de identidades, cual echamos un breve vistazo a difícil a Arras e identidad y páginas. Ya verás que aquí tenemos algo que tipo de indica algunas operaciones relacionadas con la identidad. Y la identidad es la biblioteca que Microsoft utiliza para sesiones de administración de usuarios, almacenamiento, todas esas cosas. Por lo que el inicio de sesión, cierre de sesión y todas esas maravillosas características salen de la caja a través de la biblioteca de núcleo de identidad. Por extensión, también habrían incluido las bibliotecas de Entity Framework Core que nos permiten hacer mi grisáceo en configura un contexto de base de datos en un primer método de cita y en realidad construir la base de datos a partir de nuestra op y luego la estropearon después. Entonces en esta sección estaremos tomando un enfoque paso a paso para entender cómo se unen todas estas piezas y cómo exactamente vamos a construir nuestra base de datos para nuestro blazer arriba porque no tiene sentido. Empezamos a construir toda la funcionalidad de suscripción si no tenemos ningún lugar para almacenar, ¿verdad? Entonces, cuando regresemos, empezaremos a mirar esas cosas en bits y bits. 12. Comprender las habilidades: Muy bien, bienvenidos de nuevo chicos. En esta lección, queremos especie de entender todas las disposiciones de autenticación que nos brindan a través de todo este bootstrapped incluyen la autenticación, la creación de proyectos ahí mismo bastantes partes móviles que si no no entender del todo lo que estás mirando puede parecer abrumador, O probablemente podrías simplemente ignorarlos y todo funciona. Pero siempre es bueno cuando estás trabajando en un proyecto y tendrás un total aprecio de cómo todo se une. Por lo que solo quería guiarte por algunas de las bibliotecas y las funciones que se incluyeron en el proyecto desde el principio para que tipo de darte una idea, qué hay ahí y qué salió de la caja. Entonces voy a empezar en esos archivos de inicio para nuestro proyecto de servidor. Y un poco pasamos por esto antes, pero quería tomar mi tiempo y volver a señalar ciertas cosas. A nadie estamos agregando al servicio, servicios bootstrapper dot default identity. Entonces esto salió de la caja, claro. Y lo que esto hace, dice que quiero agregar biblioteca de identidades a mi aplicación usando el modelo que aquí se indica. Por lo que por defecto tenemos identidad usuario. Ese es nuestro modelo predeterminado que nos da Microsoft dot ASP.Net core identity. Entonces ese es un usuario predeterminado que una vez que has incluido la autenticación, tienes acceso a este usuario. No obstante, que los usuarios tipo de limitado en cuanto a los campos que, permite. Porque a veces, ya sabes, lejano usuario para registrarse en tu página web. Quieres nombre, apellido, quieres otras cosas. Entonces lo que hicieron fue crear un bit de clase personalizado basado en usos de identidad. Por lo que es heredar todos los campos de identidad usuario. Y luego puedes extender este vaso y puedes poner en nombre, apellido, fecha de nacimiento, o las cosas que el usuario identitario fuera de la caja simplemente no tenía. Cuando estropeamos la base de datos destrozada, como que ves cómo exactamente es lo que exactamente se genera en base solo a esta herencia directa. Y luego veremos cómo podemos extenderlo después. Por lo que estamos agregando un valor predeterminado y entidad en forma de usuario de aplicación y solo decir, ya sabes, puedes tener múltiples tipos de usuarios. Por lo que la aplicación utiliza el valor predeterminado que nos dieron. Podemos crear alternos si queremos, no iré ahí, ¿verdad? Y aunque, y entonces tenemos la opción. Entonces aquí podemos señalar o qué tipo de opciones de autenticación debe acatar este usuario. ¿ Necesitan confirmar sus conos al registrarse? ¿Verdad? Entonces, en otras palabras, necesitamos cargar para configurar un mecanismo de correo electrónico, ya sabes, como cuando te inscribes en tu sitio web y lo envían por correo electrónico para confirmar a tu contador y confirmar y luego puedes decir y eso es lo que esta opsin básicamente dice. ¿ Quieres hacer cumplir eso? Entonces voy a poner esto las cataratas por lo menos Farnell va o no están dispuestos a entrar en cualquier cosa de correo electrónico por el momento. Entonces voy a decir falso, lo que significa que puedes lijar en rojo Nandan, lo siento, puede enviar arriba o registrarse en nulo y luego puede iniciar sesión inmediatamente después. Entonces eso es lo que esta opción, más o menos esas y en realidad esta sección de opciones es en realidad opcional. Correcto, por lo que no tienes que especificar opciones. Se puede quitar eso si lo desea. Y puedes agregar otras opciones si lo deseas. El CMMI que cae muy nula. Y entonces estamos diciendo que queremos sumar todo esto a los contextos de base de datos de la aplicación, lo que representa nuestra conexión con la base de datos. Entonces habría señalado que dicho antes dónde está buscando conexión por defecto como nuestras conexiones a la base de datos. Más adelante sin embargo, vamos a conseguir todas esas configuraciones en, en nuestros dedos y entenderlas mejor. A continuación, tenemos servicios que servidor de identidades, no, servidor de identidades es en realidad un conjunto de bibliotecas que, ya sabes, se utiliza para controlar el acceso para aplicaciones modernas. Y incluye diferentes capacidades como administración de identidades de inicio de sesión único, autorización, API, seguridad, todo tipo de cosas maravillosas. Y está basado en el estándar Open Auth. Por lo que es como nivel de la industria, estándar OpenID. Es como protección a nivel industrial para su aplicación. Por lo tanto, incluso sin el núcleo de identidad del servidor, ese conjunto básico de bibliotecas puede entregar muchas de las funciones, pero un servidor de identidades amplía las capacidades. Y por lo general se da como una aplicación independiente para el manejo estricto de las identidades, ¿no? En esta situación, incluyeron a estas bibliotecas en todo nuestro blazer up y así podemos cosechar todos los beneficios de ella. Y más adelante. Bueno, además de agregar el servidor de identidades, luego pasa a decir dónde agregar autorización API para usuario de aplicación y ese área de almacenamiento. De acuerdo, entonces la autorización de API diría más o menos que configura el servidor de identidad para la autorización basada en API, lo que generalmente significa que va a usar el servidor de identidades JWT. De acuerdo, así que JWT, JSON tokens web, esos son probablemente los más altos estándares de seguridad que hace API puede tener en este momento. Todo eso está saliendo de la caja. Si tienes sin embargo, mi otro curso sobre blazer, entonces verías donde construimos la API nosotros mismos, nos ponemos en nuestro JWT nosotros mismos y luego agregamos para cumplir con provisiones todavía, el JWT en el lado del cliente. Todo está conectado y conectado fuera de la caja para ti. Cuando construimos nuestro blazer usando esta sección de configuración de plantilla de proyecto, vemos que tenemos hasta uso servidor de identidades, luego uso autenticación y autorización de uso. Entonces estos tres middlewares sean Skelly, sólo un poco poner la guinda en el pastel para dejar nuestra aplicación, o que esto es lo que pretendemos tener. Queremos la capacidad de permitir que alguien inicie sesión y se registre, y también sobre la capacidad de restringir. Todas estas bibliotecas deben ser relativas a las disposiciones que se nos dan a través del servidor de identidades. Saber, otra parte que quería apuntar O serían las zonas. Por lo que hemos mirado antes las zonas. No está en ningún gran detalle, pero en esta sección tenemos esas páginas y las páginas, están vacías. Todo lo que tenemos es ese login parcial. No obstante, cada vez que ejecutamos nuestra aplicación, hacemos clic en iniciar sesión o registrarnos, vemos que el realmente pasa a otra sección. Vamos a retomar rápidamente. Muy bien, entonces cuando hago clic en registrarme, entonces pasa a la aplicación del servidor en una página de registro de inicialismo. Si voy a iniciar sesión, todavía está en el servidor arriba mostrándome una página de inicio de sesión. No obstante, ya hemos establecido que no hay páginas con esos nombres son direcciones en nuestra aplicación de servidor porque bueno, no tenemos ninguna página. Sólo tenemos este controlador aquí que hace configuración de CC de aceite. Y bueno, no tenemos Pj se llama registrarse y entrar. Entonces, ¿qué tendría que hacer si quisieras conseguir esas páginas y por extensión sobre personalizar su look y sentir porque él puede ver que no se parecen a la página web. No sienten que sean parte de nuestra aplicación web. Lo que podemos hacer aquí es hacer clic en las áreas ir a Agregar y luego veremos nuevo elemento andamio. Después bajamos a la identidad, y luego podemos seguir adelante y dar click en agregar. Y luego va a hacer algún trabajo en segundo plano. Y entonces nos va a permitir decidir qué archivos de sentarse queremos realmente andamiar en nuestros proyectos. Entonces puedo decir anular, lo que significa que simplemente nos materializará a todos y los agregará a toda esta estructura de carpetas. Puedo ser muy selectivo y decir que solo quiero los Leodes, solo quiero tal vez el registro y login y cualquier otra cosa puede estar bien. Entonces sólo voy a decir anular todos los expedientes, no hay daño en ese derecho? Después de los contextos de datos la mayoría puede establecer el contexto de base de datos de aplicación. Y entonces puedo decir agregar. Y luego después de que hagamos eso, veremos que ahora tenemos una carpeta nueva y unos archivos nuevos, ¿verdad? Y si miro en un cono que voy a ver todo el ayuno. Por lo que tienes que registrarte e iniciar sesión. Y entonces, bueno, tengo la coordenada, puedo modificarlas y hacerlas parecer más como si fueran parte de mi barra de aplicaciones. Y estas toman viejas algunas de las cosas que lo hacen, les hace parecer que están fuera niños fuera de toda la tendencia óptima para construir. Está bien. También podemos modificar sus Laozi creando nuestro propio Leo pij. Bueno, dice que el camino leo lágrima en la vista inicio es páginas slash barra compartida layout.css. Y si miras en páginas, entonces slash compartido, no vemos un HTML layout.css, por lo que podríamos crear nuestro propio pequeño tono y luego anular eso si fuera necesario. Pero el punto es que todas estas cosas por aquí y personalizables. Entonces si alguna vez has trabajado con el núcleo de identidad en MVC IRA son páginas, entonces esto no debería ser demasiado extraño para ti. Deberías sentirte como en casa. Si esta es tu primera vez, entonces así es exactamente como puedes empezar a personalizar tu registro, tu página de inicio de sesión, y cualquier cosa en cualquier aplicación dominate core. No se limita sólo a la maquinilla de afeitar. Está bien. O bueno, Blaser Otro no se limita a blazer. Y quería pasar de las cosas visuales y hablar más sobre las cosas de la base de datos porque sí dije que ese hubiera sido el punto focal de toda esta discusión. Entonces vamos a bajar a los datos. Y en datos vemos que tenemos dos bibliotecas a carpetas, ¿no? O una carpeta y un encabezado de archivo. Tenemos la carpeta Migraciones con dos archivos ahí dentro. Y luego tenemos el contexto de la base de datos de la aplicación. Entonces cuando hacemos clic en Contextos de Application DB, vemos aquí que es contexto de base de datos de aplicación simplemente atascado clase. Es heredar del contexto de base de datos de autorización API, que es contextos o cargar los usuarios de la aplicación. Por lo que estas una vez más son bibliotecas integradas e incluso aquellas que pasan por encima de la autorización de API, verás que está diciendo que es una obstrucción de la base de datos para el contexto combinado de DB usando identidad y servidor de identidad. Muy bien, así que he visto el contexto de DB de identidad que se utiliza aquí para el, para la clase heredadora. He visto el contexto DB siendo usado aquí. Pero entonces porque dijimos que queríamos autorización de API, ¿verdad? Recuerda que dijimos aquí arriba, agrega autorización API, ¿verdad? Entonces tenemos el contexto de base de datos de autorización API que se está utilizando para facilitar eso. Por lo que estamos enviando funcionalidad general de esta biblioteca a nuestros contextos dB, nuestros contextos de base de datos de aplicación encarna todas las características aquí y cualquier otra cosa que vamos a poner. Está bien. Aquí tenemos un constructor donde nos está permitiendo pasar en algunas opciones. Y te das cuenta de que muchas cosas son muy personalizables y él viene a esto y nos dan bastantes opciones fuera de la caja. Tan personalizable, tal vez limitado a sólo Watson fuera de la caja y tal vez pequeños retoques basados en nuestros requisitos personales. Entonces ese es nuestro archivo de contexto DB de aplicación. Si retrocedemos un poco y vamos a migraciones, lo que se ve aquí es la primera migración que permite la creación del esquema de identidad. Entonces todo duro la caja, nos están dando lo que necesitamos para crear, todas las tablas relacionadas con la identidad o cuando dijeron Tablas relacionadas con Entidad de roles netos SBI. Esta es la tabla de roles para almacenar roles y aplicación en todos los administradores, usuarios, etcétera. También tenemos un giro a los usuarios y se va a generar SBI net users en base a los campos predeterminados que mencioné calmar con el usuario identitario, ¿no? Entonces recuerda que queremos ir al usuario de la aplicación. Decimos identidad usuario. Si traté de mirar la definición de eso, entonces déjame ver. Exponga eso. Bueno, en realidad no, realmente exponen los campos que hay y eso no es problema. Pero el usuario de identidad va a encarnar automáticamente ID, nombre de usuario, correo electrónico, correo electrónico, confirmar contraseña , hash, todos estos campos. Entonces cuando dije que tal vez necesitemos extender estos campos agregando al usuario de la aplicación. Eso es lo que quise decir. A lo mejor queremos FirstName, LastName y otras cosas como campos en esta tabla de base de datos. Por lo que más adelante veremos extenderlas. Pero Farnell, esto, esta migración nos está permitiendo crear todas las tablas por defecto y luego podemos extender. Ya ves aquí obtenemos escuelas de dispositivos. Esto es del servidor de identidades, porque si utilizas el núcleo de identidad, no habrías visto esa biblioteca. No verías subsidios persistidos se está gobernando limpia. Sbi, net Reclamaciones de Usuario, inicios de sesión de usuario, todas esas cosas. Nos sacamos de la caja con nuestra biblioteca de núcleo de identidad. ¿ Está bien? Entonces lo que vamos a hacer ahora es en realidad andamio esta base de datos hace hasta ahora nuestra mirada a este código, no tenemos evidencia tangible de nada. Si intentáramos iniciar sesión, a la derecha, normalmente fallaría como casi alfa. Intentemos iniciar sesión porque vemos que va a la página de inicio de sesión. Bueno, veamos qué pasa cuando realmente tratas de hacerlo. De acuerdo, así que voy a intentar registrarme, y vamos a ver qué pasa. Está bien, así que ahora está diciendo que la operación de la base falló al intentar procesar esta solicitud. Y luego dijo que no puede abrir esta base de datos y todo tipo de cosas que nos están enviando que necesitamos aplicar la migración, ese es el mismo archivo que solo estamos mirando, aplicar la migración y ejecutar los comandos, y luego podemos seguir de nuevo. Entonces sigamos adelante y configuremos lo que necesitamos configurar para que podamos empezar a crear estas tablas en nuestra base de datos. Entonces en el OB settings.js en él sí dijo que no podía encontrar un teléfono de base de datos que x-y-z. Por lo que se estaba infiriendo que a la base de datos se le descubrirá la dirección que delineamos en nuestra aplicación settings.js archivo IN. De acuerdo, así que tenemos el servidor siendo DB local, que es el servidor que vine con Visual Studio. Está muy apegado a Visual Studio. No tenemos que ir a Management Studio para eso. No obstante, si desea utilizar otro servidor de base de datos, como tal vez tenga una instancia de desarrollador o una instancia de SQL Express. Solo necesitas cambiar el nombre de ese servidor ahí mismo, ¿verdad? Por lo que podrías convertirlo en host local, podrías hacerlo dot SQL Express, sea lo que sea. Se puede seguir adelante y cambiar eso. Y lo dejaré hace DB local porque, ya sabes, para fines de desarrollo, lo quiero aquí mismo en Visual Studio. Y voy a cambiar el nombre de la base de datos. Entonces este es un nombre por defecto, es spin it dash, gestión actual dot server dash, y algún buen valor. No necesito todo eso. Alguien lo va a llamar una corriente en gestión subrayado DB. Entonces me voy a quitar todas esas cosas y hacerlo así. Está bien. Ahí vamos. Entonces después de haber limpiado mi app settings.js, archivo JSON, null Lionel donde null, estoy viendo que si esta base de datos no existe ya, esta es la que quiero crear. Entonces y dijo agregar la migración o aplicar la migración más bien a través de ejecutar la base de datos de actualización. Lo que estaba viendo fue que cuando digo actualizar base de datos, va a crear la base de datos si aún no existe, luego crear las tablas de soporte de acuerdo a este archivo de migración. Si le prestas atención a este archivo de migración, notarás que realmente es como una traducción C-sharp de lo que va a pasar en SQL, ¿verdad? Id, tabla, columna, cadena. El tipo va a ser invitado de cobro. Entonces si conoces bases de datos, entonces comienzas a ver que esto es realmente solo C-sharp. Diciéndonos cuál es la secuela que se va a escuchar. No es demasiado complicado, ni siquiera es que encuentra C, Para ser honesto, sólo hay un constructor. Y luego al final de construir todo lo que no debería pasar, sólo se va a ejecutar, ¿verdad? Simplemente va a crear. Por lo tanto, veamos cómo creamos la base de datos. Entonces voy a ir a la consola de Package Manager. Si no tienes un desgarro en tu Visual Studio, entonces siempre puede ir a herramientas y new get package manager y verás la consola Package Manager para que siempre puedas simplemente sacarlo así. Y luego vamos a decir actualizar la base de datos de guiones. Después de ejecutar ese comando se va a construir un proyecto y luego hacernos saber cuándo se hace. No, eso fue muy rápido. Empezó a construir, fue exitoso y luego dice hecho. Nada visiblemente. No hay diferencia, ¿verdad? No veo como si nada pasara en nuevos archivos se añadiera al proyecto, pero echemos un vistazo a la base de datos. Entonces voy a traer MySQL Server Object Explorer. Si no ves eso, solo tienes que ir a Ver y verás el Explorador de objetos de SQL Server. Por lo que solo puedes sacar eso y mirar las bases de datos locales de base de datos. Y ves que tengo bastantes bases de datos, incluyendo mi actual db de gestión, que es la que acabamos de crear. Y si amplío eso y miro en tablas, entonces voy a ver todas las tablas que se delinearon en este archivo que se está mostrando a mi derecha. Por lo que tenemos la tabla de roles, tenemos la tabla de usuarios. Todas estas mesas están ahí y disponibles para nuestro uso. De acuerdo, entonces hay dos partes a cuando queremos actualizar la base de datos, donde se tiene la migración, que es este tipo de archivo C. Y estos son los cambios en el MBL atómico. De acuerdo, así que hace un seguimiento de cada vez que hacemos un cambio en la base de datos, es como mantenerlo al tanto. Entonces si eres desarrollador de bases de datos y tradicionalmente construiste la base de datos, pero entonces cuando la aplicación se está construyendo para hacer cambios, es un poco más difícil camiones que cambies esta columna a esa y es más dinero. Bueno, cuando hacemos migraciones en el acorde primero sentado, nos permite ver que en este punto esto era lo que estaba en su lugar. El siguiente punto, esto es lo que se hicieron cambios y nos ayuda a hacer un seguimiento. Por lo tanto, hagamos algunos cambios. Y el cambio que voy a hacer es solo el usuario de la aplicación, ¿no? Nosotros sí dijimos que queríamos ampliarlo. Entonces solo voy a decir que quiero agregar String firstname. Y voy a añadir cadena apellido. De acuerdo, así que esas son las dos cosas que quiero agregar. Y entonces una vez más, no te limitas a mirar. No puedes, no puedes fecha de nacimiento, no puede abordar lo que sea que necesites en un usuario de aplicación, tu agonía, pero no autonomía y cambios a este archivo. Y este archivo está directamente relacionado con mi contexto de base de datos de aplicación, ¿verdad? Entonces se va a dar cuenta de que la versión que fue, que existió y creó una base de datos la última vez no es diferente de lo que he aplicado. Entonces no, necesito que sepan que genero un archivo de migración. Puedo decir agregar la migración de guiones. Y luego puedo ver nombre agregado al usuario. Algo nos lleva algo indicativo de los cambios que se hicieron. Y entonces sólo voy adelante y presiono entrar una ley que construir. Y luego se va a crear unos archivos de migración. Entonces ahora si miras en las migraciones, verás que hay otro archivo incluso con marca de tiempo. Entonces esta esta a cero porque eso ha crecido 0 literalmente, ¿verdad? Este aunque no se trata de marcas de tiempo para decir a estas alturas del tiempo de este día, hiciste esa migración con el nombre que le diste. Y luego si miramos los archivos, verás que solo se va a decir añadir una columna FirstName. Por lo que la mesa está siendo a los usuarios. Ese es el tipo y es nullable. Ya ves, eso es todo lo que está haciendo. ¿ Está bien? Y luego vas a ver que tienes o no funcionan. Entonces éste es porque el cambio es más pequeño, parece mucho más fácil leer y entender realmente lo que está haciendo. Y una vez más, en realidad es sólo C-sharp. Danny era ¿en qué se sube un barco, en, en SQL? Y el No ves en eso, en caso de revertir la migración son revertir los cambios, entonces esto es lo que debería hacer, soltar columna y soltar eso. Entonces tenemos al OP diciendo lo que estamos a punto de hacer y no ven lo que debe estar sin quemar, debemos cambiar de opinión? De acuerdo, nota que tenemos la Migración. Acabamos de ejecutar una base de datos. Después de alguna migración, ejecutamos una base de datos de actualización y luego la base de datos ya existe. Por lo que literalmente sólo va a hacer en la obesidad. Si no existió, el primero, entonces sí creó y actualizó. Entonces si miro hacia atrás a la base de datos y miro mi tabla de usuarios de red ASP y miro las columnas. Entonces vamos a ver que tenemos nombre y apellido. Entonces realmente no te mostré que no había cerca antes, pero en base a la migración inicial, first_name y last_name no estaban ahí. Acabamos de ir y añadirlos al usuario de la aplicación y saber que están ahí. De acuerdo, así que esa es una buena introducción rápida a cómo hacemos las migraciones y cómo vamos a configurar tu identidad y asegurarnos de que tengamos información adecuada sobre nuestros usuarios cuando estamos a punto de construir nuestras aplicaciones. Ahora mismo voy a hacer realmente nuestra inscripción de nuevo y ver, ver si podemos pasar. Entonces la palabra de moda que estoy usando es contraseña fuera de una porque son muy estrictas a la política del analizador phi, digamos descuidar la que, bueno, primer lugar, si no los encuentro mucho, Ya ves que es que está enviando a mí que tanto. Y si descuido el uno, me está diciendo que es demasiado débil, ¿verdad? Por lo que fuera de la caja tienes una política de contraseñas lo suficientemente fuerte cual puedes aumentar la fuerza de una vez más a través de las opciones. Pero creo que esto es bastante complicado para mí, ¿verdad? Y también su contraseña, contraseña con un AdSense y número uno al final, hacemos clic en Registrarse y ver qué sucede. Entonces estamos yendo mucho más lejos de lo que conseguimos la última vez. Y mira eso. Sólo deja que eso con sólo ejecutar dos comandos. Ni siquiera necesitaba agregar nombre y apellido para que esta cosa funcionara porque hacía mucho tiempo trabajaba. Y solo guardaré esto en mi navegador. Bueno, ven aquí nosotros, nos está diciendo hola, ¿verdad? Recuerda cuando personalizamos nuestra pantalla de inicio de sesión para mover un poco esos botones de navegación para que lo sepan diciendo hola, la persona ingresada, ¿verdad? Me está permitiendo cerrar sesión. Y entonces creo que si hago clic en esto, traerá hacia arriba perfil, derecho, autenticación y perfil de barra. De acuerdo, así que esto va directo de vuelta al servidor, al administrador de identidades. Lo siento, servidor de identidades administrar y luego índice escribe. Ahí vamos. Entonces eso es, eso es lo que estamos viendo ahora mismo. De acuerdo, entonces cuando rompemos las páginas en ninguna parte tienen acceso a todas estas páginas son que podemos personalizar, mirar y poner un campo fuera, ¿verdad? Entonces ahora mismo está mostrando el perfil con el nombre de usuario y el número telefónico es nombre de usuario , número de teléfono, otra vez, James, un número de teléfono c. Así podemos dar todas estas cosas fuera de la caja con muy pocas personalizaciones, con muy poco esfuerzo, con muy poco esfuerzo de nosotros, podemos poner nuestro sistema de inicio de sesión y registro en funcionamiento en nuestra aplicación blazer. Una vez más, pasa a tipo de modificar esto. Parece que no vamos a entrar y salir de la aplicación. Pero la realidad es que el servidor de identidades es realmente como una aplicación independiente. Entonces, ya sabes, es, va en ambos sentidos. Depende de lo que necesites son aunque quieras darle acceso al usuario a todas estas cosas, porque quizá no quieras darles acceso para cambiar su número de teléfono y dirección de correo electrónico a voluntad y así sucesivamente. Es posible que quieras controlarte todo eso a ti mismo. Entonces esa es una buena introducción rápida a todo el servidor de identidades. Y whoa, la identidad funciona en una aplicación blazer. Espero que lo entiendas un poco mejor y en ninguna parte se vaya a pasar a crear realmente nuestras tablas de base de datos para apoyar el resto de las características de nuestra aplicación. 13. Crear base de datos con el núcleo de la entidad: Oigan chicos, bienvenidos de nuevo. Entonces en esta lección vamos a empezar a crear la base de datos con las tablas de apoyo para nuestras aplicaciones de gestión actuales en este momento todo lo que ya tenemos nuestras tablas de soporte al usuario para el inicio de sesión para camionaje limpia, todo esas cosas maravillosas o tener esas. Y ya discutimos cómo los metimos. No, queremos crear nuestras propias tablas para añadirlas a la base de datos más adelante. Por lo que tengo en pantalla aquí Nieto diagrama de relación, un diagrama de relación de entidad. Ya sabes, va por muchos nombres, pero este diagrama está mostrando las tablas de la base de datos y con quién tiene relaciones a través. Está bien. Entonces lo que podemos ver aquí es que ya tenemos, ya conocemos algunas de estas tablas que ya sabemos que tenemos las escuelas de dispositivos persisten terrenos todas estas tablas relacionadas con usuarios de ASP net ya conocemos porque esos fueron todos andamios para nosotros a través de los Servicios de Identidad, ¿verdad? A la derecha, sin embargo, tenemos tablas adicionales que vamos a estar creando este punto. Entonces tenemos colores. Y solo estoy empezando con aquellos que no tienen claves foráneas ni dependencias. Entonces tenemos colores, tenemos modelos, tenemos micrófonos, ¿verdad? Porque es un auto en sistema de gestión. Cuando agregamos un vehículo, queremos asegurarnos de que capturamos de qué color es. Una modalidad es lo que la hace es. Y en el ruido vehicular relacionado con todos esos costos va a tener el modelo make y el identificador de llamadas. Déjame acercar un poco en caso de que sea un poco pequeño, ¿verdad? Entonces tenemos el Vin y tenemos otros campos que queremos capturar todo el auto. Vamos a tener reservas para que podamos rastrear quién cuando fue rentada por quién. Y lo hizo efectivamente viejo y luego calcular el costo, todas esas cosas maravillosas, pero tener los clientes e información básica sobre los clientes y demás para que los clientes no sean usuarios, que es donde tenemos un tabla del cliente diferente de una tabla de usuarios. Si lo hiciéramos que los clientes pudieran iniciar sesión y acceder al sistema y hacer lo que querían hacer, entonces no tendríamos que crear un cliente todavía podría simplemente usar la tabla de usuarios de red ASP extendida para un tipo de operación de cliente. Y entonces podríamos simplemente usar el para almacenar todo morada de clientes. Entonces, una vez más, el contexto lo es todo. Cómo diseñas tus mesas, para que diseñes tu aplicación en todas esas cosas se rigen por cualquiera de los objetivos del año son los objetivos del negocio para el que se está diseñando este sistema. Entonces lo que queremos hacer ahora es empezar a crear estas tablas. Por lo que tenemos 1236 tablas que necesitamos crear. Vamos a llegar a ella. No, en cuanto a la disposición de tu proyecto y la arquitectura general y demás, ese jurado, Zoltan, donde está el mejor lugar para crear tus tablas o crear tus archivos de clase que luego se convertirán en tablas. A lo que me refiero es que ya tenemos proyectos de cliente en los que se tiene un proyecto de servidor. No obstante, el proyecto compartido, que sirve para el propósito de tener archivos de clase, son cualquier recurso que se compartiría entre los dos en función del patrón que vas a usar. Es posible que quieras poner tus clases de datos dentro de una carpeta compartida porque entonces no quieres tenerlas duplicadas. No quieres tener una versión de ellas en el proyecto de servidor, una versión de ellas en un cliente. Acabas de ponerlos en compartidos en ambos proyectos puede acceder a ellos, que es lo que vamos a hacer saber. Bueno, solo te estoy dando un contexto por si acaso estás tejiendo tu ceja puede que ya tengas otra idea que no sea problema. En otras situaciones, las personas hacen capas de acceso a datos donde crean las clases de dominio diferentes, ¿verdad? Significarán, es decir, las clases que luego se convierten en las mesas. Crean otro proyecto para ellos. Y luego obstruyen el caos de dominio es de las clases de cliente, es decir, el servidor y la base de datos relacionados operativos. Nuevamente, ver las clases de datos dentro del cliente está usando una versión diferente de las mismas para fines de cliente. Y eso es lo que empezaremos a mirar ese patrón llamado como MVVM, cauteloso de los modelos de vista o API como los llamo detalles. Por lo que más adelante nos meteremos en los patrones. No tengo nada en contra de los botones. Me encantan los patrones y veo dónde están bien. Pero en este momento sólo queremos hacer lo básico para ponerlo en marcha. Porque tal vez aquellos quisieron construir una aplicación que pueda hablar con la base de datos azul desde la base de datos y verse bastante bien. Entonces a veces no necesitas ir a ese nivel de obstrucción, pero luego las abstracciones sí ayudan con cuando necesitas escalar la aplicación. Voy a poner más características en más mesas y así sucesivamente. Y tienes menos proteasas te Después de mantenimiento Guandu, eso es un auto patrones púrpura. ¿ Está bien? Entonces retinal, lo que vamos a hacer es crear una carpeta en esta compartida. Y voy a llamar a esta carpeta, solo llamémoslo dominio. ¿ Está bien? Entonces dominio va a tener todas nuestras clases de dominio. Por lo que puedes ver aquí con un pronóstico ya está asegurado. Pero, ¿por qué está asegurado? Porque nuestro controlador aquí, pronóstico del tiempo es cuándo usar ese archivo. Aquí vamos, pronóstico del tiempo. Y en todos nuestros clientes dijeron que si mirábamos datos recuperados, sabían que verían que también está usando pronósticos meteorológicos. Entonces ese es el propósito de ponerlo en compartido para que ambos proyectos puedan tener acceso a él. Entonces bien, no, no vamos a poner en esa abstracción entre las clases de dominio para las operaciones de base de datos en para el cliente. Simplemente voy a usar los mismos archivos de clase para especie de show hole en un fin de semana de nivel básico facilitar hablar con los datos. Entonces vamos a empezar con las sencillas mesas, ¿verdad? Entonces no te refieras a nueva clase. Y una de las mesas más simples fui yo. Muy bien, entonces nuestra mesa de micrófonos, y voy a hacer esto público para que todos puedan acceder a ella. Clase pública mc, podemos agregar, y aquí solo hay una tina de prop dos veces y luego genera este candado. Entonces cuerda y me escribe sería como Toyota Honda. Ya sabes, esa es la marca. Para que lo puedan llamar marca si quieres. Eso está bien. También teníamos lo que llamaremos campos de auditoría. Rojo, porque por supuesto necesitamos un campo ID como siempre la tabla debería tener. También queremos sentir que dicen fecha creada y actualizada. Bueno, lo que pasa con estos tres campos sería que estos tres campos realmente se repetirán en todas las tablas, ¿verdad? Por lo que cada mesa va a tener que tener una identificación y queremos tener fecha creada y escrituras actualizadas. E incluso pudimos empujar el sobre para ver creado por un actualizado por. Entonces hagámoslo también. Para que sepamos quién sí vio encordado creado por y actualizado por. Esas serían cuerdas. Porque entonces queremos almacenar el nombre de usuario de la persona que realizó la operación en la Tierra. Por lo que cadena actualizada por cadena creada por la fecha de creación de D, el título pintado de rojo. Pero entonces una vez más, estos campos se repetirán a través de todas las tablas porque este soy yo cuando hago modelo y salí de nuevo estas tarifas. Entonces lo que voy a hacer es crear como un modelo base, básicamente un jitomate. Entonces solo voy a crear otra clase y quería llamarla datos base, modelo de dominio Barbies. Déjame llamarlo modelo de dominio. Realmente no importa, pero el punto es que yo quería ser una base, ¿verdad? No quiero hacerlo público, abstracto, no abstracto. Esto significa que no puedo instanciar a esta clase por sí misma, ¿verdad? Pero entonces esta clase abstracta va a tener en estos campos. Entonces me voy a sacar identificación, ponerla en esta clase abstracta. También voy a tomar periodos creados por fecha en todos estos campos de auditoría. Y los voy a poner dentro de esta clase de dominio abstracta. Y entonces lo que puedo hacer es simplemente heredar. De acuerdo, así que clase pública hacen colon B Islam en modelos. Entonces ningún micrófono en realidad tendrá cualquier campo ahí así como el, por lo que es el mismo principio como lo que acabamos de ver con nuestro usuario de identidad versus aplicación. Aplicación de usuario utiliza heredar de la clase base add entity user, y luego podemos extenderlo según necesitemos. Entonces aquí está la extensión para mí, ¿verdad? Entonces cada otro que vamos a hacer puede seguir ese mismo principio. Entonces hacer modelo. Una vez más pública. Se va a heredar del modelo de dominio base. Entonces el botón dice los campos de auditoría y luego voy a poner nombre. Ahora la razón por la que no puse nombre dentro de la base es que no todos los consejos no son nombres arriba. No quiero meter nada dentro de la bestia que no todas las mesas se vayan a concentrar, ¿verdad? Entonces si bien puede parecer tonto tener make y model, ambos teniendo Nombre y luego otro va a tener nombre en forma de colores, color, color. Y también le vamos a dar el nombre de campo. Vamos a hacer que herede modelo de dominio basado. Y por supuesto hay que hacerlo público. Está bien, pero entonces eso es todo para el nombre 11-cis. Entonces ahora voy a ponerme más cerca de él. Entonces vamos a meternos en algunas mesas más complicadas. Y siempre veo incluso, incluso en el desarrollo de código primero, están desarrollando bases de datos siempre comienzan con las tablas que tina y todas las claves foráneas no son dependencias. Porque entonces cuando se llega a la dependencia están los datos dependientes o datos que es todo dependiendo más bien ya está ahí, ¿verdad? Entonces si quisiéramos hacer vehículo siguiente, qué le hacemos al dominio Gosse. Y luego vehículo es el nombre de éste. Mismo trato, heredar público de nuestro modelo de dominio base. ¿ Todo bien? Y entonces lo que queremos en conjunto de vehículo sería año módulo ID y luego arriba campo virtual para el modelo, ¿no? Por lo que esto representa nuestra, nuestra llave extranjera justo aquí. De acuerdo, entonces qué, entonces esto, automáticamente va a decir, bueno, sé que hay una tabla o una clase de datos correspondiente, clase dominio llamada modelo. Sé que tiene un campo ID, por lo que los ID del modelo van automáticamente al mapa al campo ID en la clase correspondiente llamada modelo. De acuerdo, entonces Entity Framework va a hacer eso por ti automáticamente. Si, si una base de datos de construcción normal usando SQL server, sabes que tienes que entrar y decir manualmente, esta es nuestra relación con este Entity Framework se generó con inferir esta relación para ti. Y luego incluyendo este campo, que es el modelo de tipo, y simplemente lo llamamos módulo. Pero este nodo permite que tipo de implicar que una unión interna podría ser necesaria. Por lo que sin escribir todo el código para una unión interna, automáticamente solo traerías los datos relacionados para nosotros. Entonces estamos almacenando el ID, lo que sea que podamos acceder a nombre y quién lo creó en cualquier otro detalle que necesitemos. Podemos ponernos virtuales porque lo virtual y la música se pueden anular si quisiéramos. Lo que eso está bien. Podemos No necesariamente tienes que hacerlo virtual. Soy invierno incluido aunque. Entonces tenemos identificación pública, int público, make ID con los mismos tratamientos. Tenemos color con color ID, mismo trato, mismo principio. Y luego tenemos el Vin, el número de matrícula, y después tenemos reserva. Por lo que aquí es un ejemplo perfecto de por qué deberíamos crear primero la tabla dependiendo la requerida. Por lo que el vehículo requiere la tabla de reservas porque tiene una dependencia ahí o hay alguna relación lejana entre ellos, excepto ésta. No te das cuenta de que no tiene ese ID y objeto peering. Y esto debería revisar en realidad mi trabajo. Esto en realidad debería ser una lista de buscar que representa los registros de renta. Correcto. Por lo que un vehículo puede estar en múltiples reservas. Entonces permítanme cambiar eso a partir de todo nuestro símbolo de acordes gana. Entonces eso es, está más claro. De acuerdo, así que esta sería una lista de reservas para cualquier vehículo. Más o menos eso es lo que significa. Lo que significa que cuando creamos una clase de reserva, y puedo simplemente pasar el cursor sobre eso y decir generar reserva en un nuevo archivo, clase genérica en un nuevo archivo. C creado reserva para reserva de clase pública de Estados Unidos heredan del modelo de dominio obeso. Y entonces la reserva va a tener relación con un vehículo, ¿verdad? Entonces, para cualquiera que reserve, te están consiguiendo un vehículo, ¿verdad? Entonces vamos a tener la fecha en ella alt, correcto. Por lo que u coma u hacer una reserva. ¿ A qué hora? Simplemente seguiría adelante e incluiría cualquier biblioteca que falte allí. Tenemos al cliente. Entonces, ¿qué cliente? Por lo que necesitamos crear una tabla de clientes, una vez más, dependencia. Y luego tenemos las tarifas. Está bien, bueno, creo que en realidad, no, eso es, estoy mirando mi diseño original. Yo estoy pensando que la tarifa probablemente debería estar en el vehículo porque en términos generales, las realidades en el vehículo, y entonces por mucho tiempo que tome el vehículo, eso es cuánto dinero de la pieza. Entonces voy a poner ahí en salario por aquí. Por lo que estoy poniendo nuevo campo dentro de vehículo llamado Bilbo o en tolerar. De acuerdo, entonces cuando metamos el V podría en el sistema, vamos a poner que este vehículo va a ser como 2 mil dólares en oh, lo siento. En Jamaica punto punto serían los grados generales 2000 leyes sobre todos nuestros derechos son doble y Dasa D, ya que estamos lidiando con reservas, el viejo inundado. Por lo que por día o por noche tienes el vehículo. Eso es un GOP algo. Y entonces siempre podemos simplemente calcular en base a lo que hay aquí. Entonces eso es todo para la reserva. Pero entonces por supuesto todavía necesitamos cliente para que podamos hacer lo mismo. Simplemente generamos el cuatro cliente, ¿verdad? Se trata de un OAEP o cliente. Y luego vimos que heredamos del modelo de dominio base. Y entonces nuestros campos aquí serían tucks idea dirección, dirección de correo electrónico, y número de contacto. Y entonces por supuesto, vamos a querer asegurarnos de que tengamos una representación para la relación. Entonces la cosa es que esto es como una relación bidireccional, que realmente una relación bidireccional donde solo está asegurándose que estas dos entidades relacionadas se conozcan entre sí. Entonces esta es una reserva solo puede pertenecer a un cliente, pero entonces un cliente puede tener múltiples reservas, ¿verdad? Entonces sí, la reserva como una representación de un cliente a la vez, pero luego el cliente tiene múltiples reservas, igual que vimos con los vehículos. Correcto. Por lo que el mismo tipo de lista de reservas que tenemos en los vehículos que tienes que poner en la tabla de clientes e incluir cualquier referencia que falte. Ahí vamos. Y entonces solo podemos hacer una construcción para asegurarnos de que todo esté bien. Entonces podemos hacer una factura solo para asegurarnos de que todo esté bien. De acuerdo, así que tenemos todos nuestros archivos de dominio en nuestro proyecto compartido con la carpeta de dominio, correcto, así que ese es el espacio de nombres. Conoce, con el fin de que nuestra base de datos genere la tabla es que corresponden con estos, ¿no? Bueno, tenemos que hacer es pasar a nuestros datos en nuestro proyecto de servidor, ir al contexto de la base de datos de la aplicación. Y entonces tenemos que enumerarlos aquí. Entonces para enumerarlos, noten no dentro del constructor, este es nuestro constructor. Entonces debajo del constructor de punto, pero en la clase, necesitamos empezar a ver pública VB establecer el tipo de datos y luego el nombre que vamos a querer las tablas el hub. Entonces note que éste es singular, uno es pleura, ¿verdad? El tipo, generalmente, la entidad es singular, el pasto porque nuestra clase representa una instancia fuera. Pero entonces la mesa es la colección de estas instancias, ¿no? Por lo que el nombre de la tabla sería vehículos, cuál es la clase de la que la tabla se basa en aspirante a vehículo. De acuerdo, así que de nuevo, esos van adelante e incluyen la biblioteca faltante usando dat actual. No, sabe de dónde está encontrando estas cosas. Por lo que podemos simplemente seguir adelante e incluir eso. Así que sigue este patrón, conjunto de DB público, corchete angular, el nombre de la clase, cierre de corchete angulado , el nombre de la clase pluralizado, y luego consigue onsets para que solo pueda seguir adelante e incluir eso para todos ellos por color, MI modelo de reserva de clientes. ¿ Está bien? Entonces una vez que hayas hecho todo esto, el siguiente paso sería crear una migración porque null, cuando crearíamos una migración va a buscar contexto de base de datos de aplicación de copia de seguridad. Y ten en cuenta que la última migración no tuvo nada de la nieve. Esto está ahí. Claramente tengo cambios que hacer. Entonces déjame documentar estos cambios, ¿verdad? Así Gestor de paquetes, consola, agregar migración de guiones. Y luego vamos a ver agregado, digamos tablas de aplicación. Y entonces una vez que hagamos eso se va a construir. Y luego nos va a dar nuestros archivos de migración mostrando una vez más, lo que hizo sub-balas hoodoo está a punto de crear una tabla llamada colores. Y las columnas incluyen la columna ID, que es int, y está configurando automáticamente hace identidad. Entonces sabes que si lo hicieras tú mismo en la base de datos, tendrías que establecerla como claves primarias sintetase identidad. Esto está sucediendo por sí mismo. Se infiere que la columna id va a ser la clave primaria ahí está, dijo la clave primaria como la columna ID, ¿verdad? Clientes, mismo trato. Y luego para las relaciones, verás que aquí está sentando algunas restricciones clave extranjeras. Dice una llave extranjera para colores, colores, ID, FK, vehículos. Por lo que se trata de un establo vehicular y se ve en configurar clave foránea entre la tabla de vehículos y la tabla de colores, donde el identificador de llamadas releva a la columna ID desde la tabla de la persona que llama. Todo eso se come FRD para ti por Entity Framework. ¿ Está bien? Y de la misma forma que tenemos la web que no se visten de nuevo, solo podemos revertir los cambios. Entonces el punto es que cada vez que estás a punto de hacer un cambio o has hecho un cambio a la si agregaste una nueva tabla o agregaste nuevos campos o cambias los campos. Una vez que has hecho ese cambio, todo lo que tienen que hacer es migración ADA. Pasará y comparará lo que hay de nuevo con lo que null obtiene. Y luego documentará los cambios de esta manera. Y luego una vez que hayas hecho eso, puedes decir actualizar base de datos. Por lo que a veces, ya sabes, cuando haces ciertos cambios puede llevar a la pérdida de datos. Al igual que podrías cambiar ese tipo de datos o eliminar un campo. Te avisará. Hasta ahora no he hecho nada que lleve a la pérdida de datos. Pero echemos un vistazo a lo que es un auto generado. Entonces aquí está el pasillo de base de datos de gestión actual levantado la última vez. Si solo refresco y luego voy a echarle un vistazo otra vez, entonces vamos a ver nuestras nuevas mesas, reservas, colores, clientes, hace modelos, vehículos, todas esas cosas. Y más o menos que si generáramos un diagrama de esto, se vería si no solo como entonces muy similar a lo que he mostrado al inicio de esta lección. Por lo que ahora hemos creado nuestras propias mesas además de todo lo demás. Por lo que a continuación queremos ver cómo sembramos datos en la base de datos. La siembra significa que ponemos algunos datos de muestra en algunas de estas tablas. Y luego volvemos, echaremos un vistazo a eso. 14. Configura la secuencia de datos: Bienvenidos de vuelta chicos. En esta lección, estaremos viendo ceder datos y voy a sembrar datos tiene el propósito esencial de darnos algunos datos de muestra para empezar. Ya sabes, como queremos asegurarnos de que yo usuario esté siempre en el B2B es cuando comienza la aplicación o queríamos asegurarnos de que hay unos pocos autoinformación de puja básica en las tablas. Siempre que comience la aplicación. Cuando hablo burbuja, cuando comienza la aplicación, quiero decir como si tuviéramos que instalar este sitio diferente, terminamos la aplicación en nuestra máquina, pero tendría que desplegarla en un servidor diferente. Cuando ejecutamos por primera vez la aplicación y la cargamos, el asiento llenaría la base de datos con los datos básicos. Por lo que sólo querían echar un vistazo a cómo funciona esto. Tan tranquilo y cosas que se sienten. A lo mejor reglas por defecto. Entonces tal vez sea, he vivido el rol de administrador versus el rol de usuario en todo lo que podría ponerse sembrado sería tal vez marcas por defecto en modelos en nuestra situación y colores. Cosas que probablemente no necesariamente quieres que la gente tenga que manejarse por sí misma, o al menos quería volver a dar algunos datos básicos. Entonces para sembrar algunos datos en nuestra base de datos, lo que tendría que hacer es crear una anulación para nuestra función predeterminada en la creación de modelos. Entonces una vez que tenemos el contexto de base de datos de la aplicación y está heredando de cualquier forma de contexto DB. Va a tener una función que esté protegida y podemos anularla. Y ser llamado vacío y ver dentro de los sentidos me están diciendo qué función es que estoy tratando de construir, así que sobre la creación de modelos y hará todo eso por ti, no hay problema. Entonces lo que sea que genere, puedes dejar eso en paz. Pero entonces debajo de ese nulo, podemos empezar a ver lo que queremos. Entonces puedo decir algo que el punto constructor tiene datos. ¿ Está bien? Builder dot tiene datos. Lo siento, estoy saltando el arma aquí. Entidad apologistas ahí mismo entidad, nuestros corchetes y luego vemos las entidades. Entonces en este caso, digamos que queríamos y los colores por defecto, empecemos con los colores. Por lo que la entidad sería color. ¿ Está bien? Y luego abrir y cerrar corsé. Y luego decimos punto tiene el, ahí vamos. Saltando un poco el arma. Después abrimos y cerramos. Bueno, sólo voy a abrir y cerrar nuestros paréntesis dentro, dentro de estos paréntesis y otros esa línea para que podamos verlo muy claramente. Necesitamos nuevas instancias de esa entidad que estamos a punto de crear un nuevo color y luego rellenamos los campos, ¿no? Tan creado por, sólo voy a decir sistema, ¿verdad? Porque esto no lo es, lo usé. Este es el sistema literariamente creando Enter. Se creó, lo voy a decir fecha, hora, punto nulo. Por lo que siempre que lo sea, se crea. Ese es el momento y yo sólo voy a romper entonces. Entonces no te alejes demasiado de la pantalla. Por lo que coma, el siguiente campo será datos o datos, que también se pasó a ser punto de fecha y hora. No. Gracias. Guan sería nombre. Y yo he ido a ver, digamos bloquear. Ese es un color de coche muy común y actualizado por es igual al sistema. Entonces como que hice su forma de mordisqueó POSIX. Puedes pedirlo si quieres o cuál es el punto en el que quieres sentir estos, y eso debe estar entre comillas como una cadena. Ahí vamos. De acuerdo, no necesito poner el DNI porque si no proveo el DNI, entonces automáticamente le dará el DNI y todo a increment ¿vimos qué? Si sí pongo el ID, entonces le dará el valor ID que le di. Entonces si quería que este fuera Ib diez, entonces podría decir que la identificación es diez. No quiero eso. Yo quiero que el sistema haga todo eso. Y luego por cada color que quería agregar, puedo separar los diferentes modelos. Por lo que acabo de tener este creado. Puedo decir coma y luego crea un modelo1. Y entonces digamos que éste es azul. Y entonces podemos separarlos adelante, seguir y seguir y seguir. Y entonces este método se mantiene cierto para cualquier otra cosa que ponible para crear nuestra semilla. Entonces puedo tomar todo este bloque de código y luego repetir esa entidad de punto constructor. Y eso decía que quería verlos hacer o algunas entidades mixtas. Punto manso, punto, punto, punto tiene datos y luego sólo decir nuevo micrófono, y luego simplemente llenar esos modelos en consecuencia. Ahora como de nuevo a si hago eso por cada mesa, si, si hacerlo para que los estudiosos Joe suban este espacio de modo, imaginen hacer eso cinco veces más por más, potencialmente más registros. Y eso no me gusta. No me gusta que mis archivos parezcan espagueti, para ser honesto. Entonces lo que somos, lo que voy a hacer es una especie de obstruir esto en otra función, ¿verdad? O otro archivo por completo. Y voy a crear una carpeta aquí en mi proyecto de servidor y lo voy a llamar Configuraciones. Por lo que Nuevas configuraciones de Carpeta, asegúrate de que obtengo eso que está girando alrededor de él. Ahí vamos. Y luego inserto de Configuraciones, voy a tener una carpeta madre porque las configuraciones podrían tener múltiples cosas. Entonces sólo voy a decir entidades. Siempre me encanta separar estas cosas en diferentes archivos sobre la plenitud. Sé exactamente a dónde ir para encontrar watts. Por lo que esta entidades null, puedo crear un archivo de configuración por tabla que deseo facilitar asientos para. Entonces vamos a crear una clase y lo voy a llamar color son variación de configuración de semilla, bien, configuración de semilla de color. Ahora con el fin de que este archivo de configuración conozca el estándar que se necesita obtener con todo el constructor y así sucesivamente. A lo que no nos fuimos a hacer es dejar que hereda de I configuración de tipo entidad. Está bien, y eso puede requerir bibliotecas faltantes. Por lo que Microsoft Entity Framework Core, seguimos adelante e incluimos eso. Y luego especifico la entidad que necesitaba conocer, un tazón, que en este caso es de color, que luego iba a requisitos que incluyen otra biblioteca, su objetivo. Y luego voy a tener que implementar la interfaz que luego trae ese archivo configure, ¿no? Configurar. Bueno, el método lo siento. Entonces configure se va a inyectar luego un constructor basado en el color, que básicamente se basa en el mismo constructor aquí para el ModelBuilder. Entonces todo este código que tenía aquí, puedo saber tic puede cortarlo y pegarlo dentro de este método. Ahora no necesito tanto código y aquí es donde saltaba el arma porque este es mi método habitual. Y cuando usan este método, ya sabe que se trata de colores. No tengo que decir constructor de punto entidad es color porque ya sabe que el constructor se basa en el color. Entonces puedo decir que el punto constructor tiene datos y ahí fue donde estaba. Mi mente estaba inicialmente cuando estaba creando todo el bit de código aquí. Entonces ahora que tenemos esta configuración configurada en este fichero que claramente no está aparte del contexto de la obligación DB. Ahora necesito los contextos de aplicación y dv, o al menos este método para saber que debería estar llamando a este método configure por aquí, ¿verdad? Entonces en lo no deseado crear lo que dicen los demás puntos constructor, aplicar configuración. Y luego voy a instanciar nuestra configuración de semillas de color, ¿verdad? Y luego por supuesto, incluir cualquier referencia que falte, y luego eso es todo. Entonces ya ves que acabamos de convertir toda esta LAN, todas estas líneas de código en una sola línea de código. Y para mí eso se ve más ordenado. Ya sabes, cuando miras el contexto de la base de datos de aplicación, deberías poder buscar las becas de datos y obtener una buena idea si quieres los detalles, vas a otro lugar. Entonces vamos por aquí y luego vemos los detalles de lo que se está sentando. Y para que ese principio pueda continuar para cualquier otra entidad que adelante quiera ver datos. Entonces digamos que queríamos sembrar en mezcla. ¿ Qué son, vamos, carbones, veamos, Toyota y BMW, verdad? Entonces te estoy desafiando a que hagas una pausa, ¿verdad? Conoce, crea tu propia configuración de semillas y hazlas entrar. Entonces para mí, Así en Toyota y BMW. Y entonces probablemente puedas tendencia semilla a modelos que correspondan con los modelos Toyota y BMW. De acuerdo, así que espero que se haya detenido e intentado por su cuenta. De no ser así, puedes hacer eso. No. Pero lo que hice fue seguir la misma técnica. Creé uno para el micrófono, creé modelo de un fotón, y luego tengo los archivos respectivos por aquí. Por lo que para el micrófono. Tengo dos micros en los foros de BMW y Toyota. Y luego para las modelos creé cuatro, ¿verdad? Creé anchos Prius, que si conoces autos, esos son de Toyota. Y luego las tres series en un X5 que pertenecería al BMW. Está bien. Para que puedas seguir adelante y crear ves la inflamación y solo creas esos archivos de configuración. Es decir, si no te gusta hacer los archivos de configuración, está bien. Siempre puedes simplemente ponerlo todo dentro del modelo creando lo que ya discutimos. ¿ Por qué? lo personal, no me gusta. Entonces por eso te estoy mostrando este método. Cualquier OMS, una vez que hayamos hecho esas configuraciones, necesitamos si completaste mi sentencia diciendo migración ADA, entonces estás debajo de los camiones. Por lo que necesitamos decir agregar migración. Y entonces puedo decir ver el default. Y digamos datos de autos. Por supuesto, quieres contarlo, es una historia dentro de su nombre, ¿no? Entonces podemos seguir adelante y agregar esa migración y nos permite echar un vistazo rápido a lo que escupe ese archivo de migración. Y whoa, está bien, me estoy poniendo mal error. Es bueno para nosotros ver estos errores porque sí nos topamos ellos de vez en cuando con nuestra migración. Entonces es bueno entender lo que pudo haber ido por ahí. Por lo que dice que la entidad semilla para el color de tipo de entidad no se puede agregar porque los valores distintos de cero requeridos para ID de propiedad consideran proporcionar un valor negativo a, vale, pero luego mirar mis configuraciones de semilla que no tienen ningún ID. Pero entonces me pregunto ahora si esa coma al final es este sistema pensando que quise poner una identificación. Entonces déjame solo tomar o.com. No sé si tienes este problema. Si lo haces, entonces podrías probar esto también. Si no lo haces, entonces elogios a ti lo hicieron bien la primera vez, alguien para volver a intentarlo. Y también hay un proceso de solución de problemas. Bueno, eso no ayudó. Entonces lo que voy a hacer entonces es intentar ser explícito con el id. De acuerdo, entonces una de las ventajas de ser explícito con el ID de cualquier manera sería que si estuviéramos creando registros que C tuviera dependencias. Por lo que voy a sembrar en vehículos por defecto por ejemplo, y luego añadir a poner el color, lo siento, el Caller ID y el Meek ID y así sucesivamente. Entonces por ser explícito con el MC y todas las IDs son todas las IDs en estas entidades. Entonces puedo decir explícitamente que el vehículo debe tener este identificador de llamadas, este ID de Meek, porque sé que por defecto esos ID deben estar presentes. Entonces pongamos esas identificaciones. Y lo más probable es que te metes en la misma era que yo y eso no es problema. Podemos ver exactamente cuál es el error en espera. Sólido. Entonces poniendo esos valores ID en color, make, y model. Vamos a intentarlo de nuevo Y este estilo. Y ahí vamos. Entonces llegamos a nuestra migración. Entonces no, ya vemos, está bien, así que sí, te engañé un poco. Tenemos que poner ese valor id desde el principio. ¿ Está bien? Por lo que nuestro archivo de migración diría insertar los colores y luego es rompecabezas las columnas. Y luego nos da los valores que irán a cada columna. Por lo que ID, sistema de ID, nueva fecha y hora para el creado. Lo mismo para la fecha actualizada y demás. Entonces hace eso para todas las tablas para las que habíamos especificado siembra, ver esos datos, ¿verdad? Y entonces el amanecer por supuesto invierte eso. Entonces cuando sí actualizamos base de datos y luego ejecutamos eso. Y luego mientras tanto, lo que quería hacer sólo tiene que ir al servidor Object Explorer y refrescar. Y sólo podemos echar un vistazo a los datos que ahora se encuentran en nuestra tabla de colores. Entonces si hago clic derecho y digo ver datos, entonces vemos nuestro conjunto de datos ACR ID, pesar de que se generará automáticamente cuando estemos en el sistema está siendo utilizado por los usuarios. Estamos sembrando, tenemos que proporcionar esos valores de ID, lo cual tiene sentido, ¿verdad? Entonces eso es todo lo que hacemos por los colores. Entonces si quieres, puedes probar y sembrar algunos datos para un vehículo, para algunos vehículos por defecto porque ya tenemos make algunos modelos. Y digamos que arrancamos la flota con dos vehículos. No estoy seguro de querer necesariamente sembrar vehículos en el sistema aunque. Probablemente querré que el usuario o quien esté usando esta obligación a diario lo haga realmente. Pero otra cosa que definitivamente quiero sembrar en nuestra base de datos serían rollos, porque vamos a tener diferentes roles en el sistema, vamos a tener admin user_roles, ¿verdad? Entonces vamos a hacer las filas y entonces podemos llamarlo un día para esta operación. Entonces, ya sabes el simulacro que estoy desafiando una vez más, adelante y hazlo tú mismo y podemos comparar notas. De acuerdo, así que si mandas Don, asistes a pequeñito se quedó atascado, eso no es problema. Y estoy aquí para ayudarte a superarlo. De acuerdo, así que lo que pasa con la regla es que sí dije roll, pero el tipo de datos requerido no es regla al igual que, oh, tienes identidad usuario para los usuarios, tienes rol de identidad para las filas. Entonces nuestro archivo de configuración de rol tendría regla de identidad como el contexto o como la entidad, ¿no? Y luego cuando estamos construyendo todo tenemos nueva regla de identidad y tenemos nombre y nombres normalizados. Entonces este no lo hacemos, definitivamente no necesitamos poner una identificación porque el ID para nuestras tablas de red ASP sería GUID, ¿verdad? Lo que significa que es, es difícil para nosotros poner el ID ahí podríamos, pero no tenemos que añadir este punto a menos que vayamos a ver a los usuarios que van a flotar era, necesitábamos declarar explícitamente el id. decir algo como id es igual a dot nuevo buen punto toString. Entonces generaría un GUID explícito y luego pondría eso, pero entonces eso sigue siendo algo aleatorio porque realmente todavía no estamos seguros de qué valor proporcionaría esto. Por lo que en realidad puedes ir adelante y conseguir eso bueno en otro lugar. Eso lo puedes encontrar en línea y generar un GUID. Y acabas de poner esa buena Valerie o yo. Entonces sabes que este es un buen valor para el rol de usuario. Y entonces podríamos decir que esto podría modificar ligeramente, eso se disolvería para ser cualquier modificación grande, la estrofa cuatro a 56 a ella, y no sería nada demasiado elegante. C, C T, T, T, T a F, F, ¿verdad? Y entonces ese es nuestro bien. Entonces tenemos el Mañana, conocemos las identificaciones. Entonces si fuéramos a usar cómo usarlos más adelante, podemos hacer eso. Entonces solo te estoy mostrando que hay tantas dinámicas existentes manera menos temprano hecho árabe haciéndolo de una manera, entonces él puede intentarlo de otra manera y podemos trabajar nuestra propia en consecuencia. Por lo que ahora he agregado estos roles. Necesito agregar la configuración del rol aquí. ¿ Verdad? Para que cuando agreguemos una migración una vez más, y entonces ésta es C. C los roles son reglas por defecto. Entonces si solo le echamos un vistazo, veremos aquí nos está agregando los roles. Va a estar haciendo todo eso. Y entonces todavía ve las configuraciones aquí, pero no está haciendo ninguna actualización. No hay nada ahí para actualizarse a duro, ¿verdad? Para que podamos seguir adelante y actualizar nuestra base de datos. Y luego cuando voy a mi base de datos y veo las reglas, no las veo con los mismos valores de ID así proporcionados y los datos en consecuencia. Entonces eso es solo una introducción rápida ya que todo el fin de semana configura algunos valores por defecto en nuestro sistema. Para cuando nuestra aplicación esté instalada, los usuarios tendrían algo que empezar a usar. Algo así como reglas definitivamente tendrán que estar en su lugar. Porque cuando los usuarios se están registrando se están creando, tenemos que asignarlos a todos son, todos duros la caja, ¿verdad? Entonces será bueno si en tu propio tiempo vas adelante y semillas en administrador por defecto, usuario, ¿verdad? Cualquiera que estemos solo dice que tendremos que registrarnos como nuestro uso regular de más adelante. Eso sí lo veremos sin embargo. Pero ahora mismo quieres enfocarte en al menos conseguir en un administrador predeterminado usuarios, por lo que creas el usuario uno. Pero al ceder este, hay que ver al usuario Andy fuera para sembrar los user_roles. De acuerdo, para que puedas seguir adelante y hacer eso como un reto. 15. Usuario defecto de semena y el usuario mismo: comparar las notas: Muy bien chicos, bicho bienvenido. Entonces como estoy seguro de que deduciste del título de esta lección, realidad es solo para comparar notas porque te dejé con una mini asignación de codificación y espero que lo hayas intentado. Si no, entonces la historia escolar juntos de cualquier manera. Por lo que la asignación era asegurarse de que veas al usuario así como al rol de usuario. Porque lo que queremos es ese usuario predeterminado con el rol admin en nuestro sistema. Por lo que creé una configuración para el usuario y la configuración para el rol de usuario. Por lo que ya hicimos el rollo juntos son los roles donde teníamos o rol de identidad que creamos nuestros propios buenos valores se establecen los IDs explícitamente. El caso es que por supuesto, si tienes dependencias, aún quieres poner datos en el orden de las dependencias. Entonces la misma regla que se aplica o que yo hubiera alentado a la hora de crear las tablas. Se aplica al sembrar datos Cozy Car B, sembrando, un usuario asociado a nuestro rol cuando no tienes las reglas, son los usuarios, ¿de acuerdo? Entonces tenemos el papel. Creamos al usuario. Por lo que tengo la configuración de semilla de usuario donde configuro un usuario. Y quiero decir que tu usuario podría ser diferente a si tuvieras dificultades con estas cosas, entonces no hay problema. Por eso estamos aquí. Lo que pasa es que tuve que usar un más duro. Por lo que no hemos hecho biblioteca que nos brindan las bibliotecas de núcleo de identidad llamadas más duras la contraseña, y la contextualizamos al usuario de la aplicación. Y luego con este fin de semana de HobShare, crea las contraseñas hash. Entonces solo estoy inicializando eso. Entonces dijimos constructor tiene el, va a crear un nuevo usuario de aplicación con el ID explícito, que es sólo otro bueno, la dirección de correo electrónico, el correo electrónico normalizado. Entonces el correo electrónico y el correo electrónico normalizado serán los mismos excepto normalizado significa que todo está en mayúsculas, ¿verdad? Le damos FirstName, lastName, username, normalizamos nombre de usuario, mismo principio que el email y normalizas el email y luego un hash de contraseña tiene que ser una versión hash de cualquier contraseña. Entonces este es un jefe por defecto o que estamos usando. Seguro. Pero no podemos almacenar ese texto en la base de datos, pero podemos ordenarlo en código fuente porque probablemente nuestros clientes nunca verán el código fuente. Pero entonces en el nivel de base de datos, nunca deberíamos, nadie debería poder entrar en nuestra base de datos y ver ese procesador. Entonces en palabra diferente, lo siento, núcleo de identidad con siempre hash la contraseña. Y así cuando estamos sentados, eso es lo que tenemos que proporcionar una contraseña hash. ¿ Está bien? Por lo que proporcionamos esa palabra de zumbido callado y ese es el usuario. Y luego en la configuración del rol del usuario, mismos cefalópodos que acabamos de pasar excepto que estamos usando rol de usuario de identidad y eso tiene que ser contextualizado a string. ¿ Todo bien? Y entonces lo que vamos a estar poniendo aquí, no necesitamos el ID aquí, pero eso va realmente, no creo que esa cosa sea estable, usa un ID, pero sí necesitamos el ID de rol Así que pasé a las configuraciones de semilla de rol y asegúrate de que tengo el ID de personaje, cual tenía encima. Entonces déjame cumplir con ese coraje a la derecha, y todo administrador, bien. ID que necesitamos es el administrador, el uno. Ahí vamos, y luego el ID de usuario se equivoca, de todo tipo. Solo te estoy mostrando, asegúrate de que las obtienes correctamente. Entonces el ID de usuario que se va a utilizar es éste correcto? Entonces después de que hicimos esas correcciones son me refiero, esos axones porque estoy seguro que ya estás asegurada camioneta. Entonces podemos seguir adelante y sembrar nuestros valores predeterminados de usuario, correcto, por lo que las actualizaciones, Base de datos. Y lo siento, necesitamos agregar apologistas migratorias. Entonces agrega la migración de dash, ¿verdad? Y luego decimos usuarios predeterminados agregados. Cargo esa migración para que se ejecute. Y esta es la segunda vez que estábamos viendo esta franja amarilla. Si lo lees la primera vez, no señalé que es viejo pero básicamente es decir que hay algunos rotos y eso podría resultar en la pérdida de datos. Entonces sí aludimos a eso antes cuando estábamos descubriendo cómo funcionan las migraciones que a veces encuentras cambios que podrían afectar a los datos existentes. Entonces llegarás a, es una advertencia decir, oye, ya sabes, ten cuidado porque podrías estar borrando datos. Tan solo da una revisión rápida solo para asegurarte de que salado realmente quiere. Eso es todo lo que está viendo. Y estos archivos de migración como vemos, siempre podemos modificarlos si queremos, ¿verdad? Entonces aquí estamos viendo inserciones en estas tablas, estos valores, no hay problema. Y entonces sabemos que el siguiente punto de acción es nuestra actualización, que luego debería darnos algunos usuarios predeterminados. Por lo que ya nos registramos yo usuario. Y así cuando miro en ASP net uses, ahora debería ver a dos usuarios. El que registramos, ¿verdad? Recuerda prueba en blazer.com, Ese fue el usuario que configuramos inicialmente. Y aquí está la que simplemente lo sembramos en la base de datos, que es nuestro usuario administrador. ¿ Está bien? Entonces ves que eso está funcionando y luego no proporcionamos un nombre y apellido cuando registramos al usuario porque bueno, lo necesitamos, tendremos que modificar el registro para eso. Pero entonces tenemos los campos de usuario admin aquí, el FirstName, LastName, de acuerdo a lo que vemos que por supuesto eran opcionales de todos modos. Y luego si voy a roles, sabemos que somos ceros. Bueno, déjame simplemente enfocarme en la tabla de roles de usuario donde nos mostrará qué usos asociados a qué rol. Entonces como dije, no tiene columna de identificación de todos modos, ¿verdad? Por lo que sólo queríamos saber que este ID de usuario, que es nuestro usuario administrador, es E para, para ello, E para, para su bajo corresponde con esa regla. Entonces eso es básicamente todo lo que hay para sembrar reglas por defecto, usuarios por defecto en nuestra aplicación. 16. Revisar y añadir cambios a GitHub: Muy bien chicos, así que estamos aquí y estamos en otro punto de control y solo nos quieren revisar todo lo que hicimos para esta sección. Entonces, en primer lugar, empezamos a mirar a nuestros subsidios de núcleo de identidad de servidor de identidad. Revisamos lo que hay en el archivo de inicio que nos permite conectarnos realmente a la base de datos, así como conectarnos a nuestro servidor de identidades y todas esas características. Después entramos en realidad a configurar nuestras propias notas de andamio de base de datos, las tablas del servidor de identidades para que podamos almacenar a los usuarios bajo roles y todos aquellos bits de datos que soportaban que entraron en crear nuestros propios modelos de dominio y agregarlos a la misma base de datos. Y luego seguimos adelante y miramos todo el fin de semana semilla nuestra crea algunos registros por defecto en nuestro sistema en tiempo de ejecución. Entonces después de hacer todo esto, seguro que habrías absorbido en absoluto y él siempre no puede hacerlo y revisarlo y tratar de conseguirlo, concretar cómo funciona todo, qué es en este punto, solo queremos revisar nuestros cambios a nuestro repositorio para asegurarnos de que mantenemos una buena cuenta rápida de todo el trabajo realizado. Entonces lo que hacemos aquí es ir a conseguir cambios, y luego le damos un bonito mensaje de compromiso. Y este mensaje, por supuesto, debería ser lo suficientemente claro como para, ya sabes, a ti mismo en el futuro o a tu futuro yo, así como a cualquier otro que pudiera venir y mirar para decirles, ya sabes, qué exactamente se hizo. Por lo que siempre puedes desplazarte y ver todo lo que pasó con andamios fuera de nuestras páginas de identidad. Echamos un vistazo a las configuraciones de siembra, todas estas migraciones. Entonces lo bueno es que si alguien más viene tras de ti y consigue lo que estás a punto de revisar esta cotización, antiguo repositorio de software, todo lo que necesitan hacer es modificar, tal vez están hasta settings.js hijo a cualquier base de datos nombre de servidor y base de datos que deseen tener. Y entonces son una actualización necesita una base. Y entonces pasará automáticamente por todas las migraciones y aplicará todo en el mismo orden que se alinee notas. De acuerdo, entonces si pierdes esta máquina en la que estás trabajando nulo, pero tienes una copia de tu proyecto en GitHub, entonces en esto, al menos en este punto, no has perdido ningún dato porque todos los datos son solo predeterminados cosas capturadas en estos archivos de migración. Entonces solo necesitas sacar este proyecto esa instantánea donde tanto el pollo como luego corres mi base de datos. Seguirás adelante y crearás la base de datos, poniendo todas las tablas y la estructura y el big data para ti. Y entonces estás en pero te pusieron cuadrada uno. Entonces ahora mismo vamos a seguir adelante y digamos comprometer todo y hundirnos. Por lo que ese miserable comité localmente y lo sincronizará con el buen trabajo que Stacy se comprometió localmente. Y luego está empujando y luego se sincronizó con éxito con nuestro repositorio de GitHub. Entonces cuando volvamos, seguiremos aprendiendo más problemas A toda esta aplicación blazer funciona con Entity Framework en todas las partes móviles. 17. Resumen de la sección - API y configuración del acceso a la base de datos: Oigan chicos, bienvenidos de nuevo. En esta sección del curso, vamos a echar un vistazo a cómo interactúan las API de descanso con blazer. No, antes había aludido a esta interacción y sólo voy a dar un resumen rápido en este resumen donde vamos a echar un vistazo a uno, el hecho de que el proyecto de servidor es realmente un proyecto API. Y lo que estaremos creando controladores API Ruby como vemos aquí con el controlador de pronósticos meteorológicos de muestra, donde tenemos un controlador API y lo que realmente expone nuestros endpoints. Entonces si no estás demasiado familiarizado con las API de descanso, puedes mirar mis cursos Aunque sobre el desarrollo de API de descanso con.NET Core Five, o mi curso de desarrollo de blazer end-to-end y Web API, donde en realidad impartido, hablan de construir la API como un entidad separada y clientes de construcción para conectarse a ella. Y estos clientes serán clientes blazer. No obstante, en este curso en particular, no me centraré demasiado en Rest, API y todas las prácticas que van. Y de verdad solo quiero asegurarte que cuando tengas estas plantillas de proyecto y quieres una aplicación blazer, vas a terminar con nuestra aplicación cliente que hemos visto aplicación de servidor y cómo vamos a construir la funcionalidad API para atender a este cliente. Entonces todo aquí es interno a una gran aplicación. Dice que hace algunas partes móviles y sólo quiero que tengamos un aprecio completo de todos los diferentes puntos de contacto y cómo se unen. Entonces, cuando regresemos, seguiremos nuestra discusión sobre nuestros controladores API crearán los nuestros propios y veremos exactamente cómo podemos probarlo para asegurarnos de que funcione. Y luego avanzaremos de ahí. 18. Crear y probar los Endpoints de API: Nuestros chicos, estamos de vuelta y en esta lección vamos a mirar a crear, anticipando nuestros extremos API de descanso. De acuerdo, así que ya establecimos eso o los endpoints se exponen a través de lo que lo llamaremos un controlador API. Y una vez más, solo estoy usando el controlador de pronósticos meteorológicos como crecido 0 porque eso es lo que nos dan. Y vemos aquí, Si los usas VC, realidad es solo otro controlador solo tiene esta anotación para especificar que es un controlador API. Hereda de base de controlador, pero todo lo demás es prácticamente igual. También sobre los axones, tratamos las subastas ni como puntos finales, y tenemos lo que llamamos los verbos restantes. Por lo que los verbos RS serán get, post, put, y delete. Y de cualquier manera, estas son generalmente las operaciones de cuervo a las que estamos acostumbrados, ¿verdad? Get sería leído, post sería crear, poner sería Actualizar, y Eliminar es eliminar, ¿verdad? Por lo que estos son los verbos que nos ayudan a facilitar nuestras operaciones de cuervo. Ahora en el, en cuanto a probar nuestros endpoints cuando ejecutamos nuestra aplicación aquí. Sabemos que obtenemos nuestra interfaz web, correcto. Eso es lo que se nos presenta y eso está bien. Pero entonces todos nosotros, ya establecimos que tanto el cliente las aplicaciones de servidor se están ejecutando aquí la misma dirección, que es localhost colon 443. Si tengo en mi caso usted, probablemente tendría un número de puerto diferente. Pero el punto es que tanto el cliente como la aplicación servidor, están usando la misma dirección, lo que significa entonces que puedo usar mi herramienta de pruebas API llamada Postman y complació esa misma dirección en una solicitud get. Y entonces lo que quería probar es si puedo obtener los datos del pronóstico del tiempo, correcto. Entonces sí dice get. Por lo que después de asegurarme de que mi solicitud es la obtengo. Y entonces la forma de llegar a ella sería a través del controlador raíz. Y controlador o bien significa el nombre del controlador, que en este caso es si para pronósticos de cultivos, lo siento. Entonces puedo ver HTTPS colon localhost colon, barra de colon, barra inclinada , perdón, colon localhost, el número de puerto, y luego el nombre del controlador, que es las previsiones meteorológicas. Entonces cuando mande esa solicitud, bueno, en este caso estoy recuperando un estatus para 01 on autorizado ¿por qué estoy consiguiendo ese dólar? Es porque tenemos estas anotaciones autorizadas, por lo que tienes que ser un usuario conectado y todo. Y pasamos por todo el flujo identitario y todo. Por lo que si no eres una tendencia de usuario conectado para acceder a este endpoint, te rechazará. Entonces si solo comento esto, no autorizo y reintento, entonces voy a conseguir una respuesta diferente donde obtengo un 200 OK y estoy recuperando los datos de la base de datos. Muy bien, así que eso es todo y API funciona. Me estoy sacando de este JSON, y este es el JSON que va a, bueno, esto no viene de la base de datos primero y esto es todo alguien que fue horneado en el, en la acción o en el punto final. Pero solo representemos OS ejecutando una consulta, obteniendo los datos y luego enviándolo de vuelta a quien esté solicitando los datos, que en este caso podrían perderse a través de Postman o nuestra aplicación del lado cliente blazer, razón por la cual en el cliente proyecto. Ahora ve en con los datos de fetch de la página, irán a buscar datos. Hizo esa misma operación. Se fue y dijo, quiero datos de este endpoint. Entonces no quiero que veas este código todavía. No les estoy mostrando que para eso es para lo que este discurso, qué datos están haciendo. No pudiste acceder a ella antes porque tiene el autor empiezo. Y en su momento no configuramos todo el sistema de inicio de sesión de usuario y así sucesivamente correctamente. Entonces ahora en realidad puedes ir y probarlo, pero esto predice la aplicación del lado del cliente. En tanto que este autor como olor, predice el endpoint desde el acceso no autorizado, pero luego a través de la Autenticación Integrada en nuestra aplicación hasta el momento, entonces realmente somos capaces de simplemente autenticarnos en el lado del cliente. Y entonces este autor empiezo, veremos que es nuestra, es una solicitud autenticada que llega a través del cliente hasta este punto final, por lo que permitirá que se interrumpa. Entonces solo te estoy dando una visión general de lo que obtiene en la muestra. En ninguna parte va a crear la nuestra propia. Entonces vamos a crear S1 y uno simple. Empecemos con una de nuestras mesas más sencillas como yo. Muy bien, así que vamos a querer que los endpoints para permitan que el cliente pueda interactuar con nuestra tabla de base de datos por mí. Y el cliente lo va a hacer a través de la API. Por lo que la API necesita poder comunicarse con nuestra base de datos. Ahora lo bueno del cuerpo de Dante que nos dan andamios para que solo pueda hacer clic derecho ir a, ir a nuevo artículo. Y entonces puedo elegir eso. Quiero un controlador API. Voy a elegir tres, ¿verdad? Por lo que quería ir a controladores, ir a Agregar, y luego decir controlador. Y entonces voy a conseguir este cuadro de diálogo preguntando ¿qué tipo de controlador me gustaría? Bueno en primer lugar, quiero un controlador API y luego quiero uno con acciones usando Entity Framework. No. Fui a construirlo dentro de dos trabajos diferentes. Caminarte por el código y luego tipo de explicar por qué la gente implementaría otros patrones en parte superior del Entity Framework para que las habilidades de minton sean más fáciles a largo plazo. Pero para levantarse aplicación básica que pueda leer, escribir e interactuar con la base de datos y el cliente. Esto es todo lo que realmente necesitas. Por lo que las acciones de controlador API usando Entity Framework, hacemos clic, le damos Doyle quien tiene que especificar la clase de modelo. Entonces la clase modelo aquí significa qué clase no realmente ni curable las nubes es cuál es el dominio no lo son. Por supuesto, tenemos la responsabilidad de asegurarnos de que elegimos el correcto. Entonces quiero uno para manso, ¿verdad? La clase de contexto de datos sería aplicación en contexto DB, y luego todo degenera el nombre del controlador de mezcla. Eso se puede cambiar, pero creo que está bastante claro lo que este controlador se verá obligado a dejarlo. Y luego fui a seguir adelante y dar clic en agregar. Y luego después de unos segundos y algunos buck crecido Ward, Ahora tendremos nuestro controlador. Por lo que verás aquí tiene el controlador de barras de API raíz. Si comparas eso con el pronóstico del tiempo, este controlador de dosis uno. Entonces la diferencia es que en realidad podemos especificar la ruta. Entonces no quiero que diga api slash, solo quería decir control. Entonces, en otras palabras, para llegar a este controlador, a estas raíces, sólo necesitamos ver marcas, de acuerdo. Sí nos da controlador API de anotación. Si queremos hacerlo protegido, podemos agregar la anotación de autorización en la parte superior, que no haremos todavía, así que solo lo pondré ahí para que recuerden hacerlo más adelante. Y entonces el resto de esto en realidad solo está diciendo que, de acuerdo, tenemos una clase con ese nombre heredando del control obeso, tenemos contexto de base de datos de aplicación privada de solo lectura, y nuestro objeto está en los contextos de partitura. Y entonces lo que está sucediendo aquí se llama inyección de dependencia, donde estamos inyectando el contexto de base de datos de la aplicación que está sirviendo a toda la aplicación en toda la API, donde inyectándolo en este control en particular y haciendo un copia local. Y eso es lo que está pasando aquí. Por lo que hacemos nuestro campo privado. Dejamos que el constructor ni que deba esperar hasta, ya sabes, el, el objeto del contexto de base de datos de la aplicación, que representa nuestras conexiones a la base de datos. Y luego queremos hacer una copia local. Por lo que equiparamos o campo local a los objetos que se envían, y luego continuamos nuestras operaciones con nuestro campo local. Entonces notarías que también tenemos todos estos verbos tipo de generados para nosotros. Tenemos el verbo HTTP Get, web, HTTP Get con la especificación ID y luego me pueden dar ejemplos. Por lo que la NSA slash mix. Por lo que dice API slash mix porque por defecto es un controlador de barras de API. Nos quitamos la slash API cirílico y seguramente lo que deberíamos tener es solo mezclar, ¿verdad? Esos son comentarios por los que no tienes que pasar sin cambios y solo te estoy explicando por qué nos lo vamos a quitar, ¿verdad? Entonces cuando golpeas mezcla, va a golpear el get por defecto. Y luego se va a llamar luego a este método. Entonces el punto final aquí, este método es realmente sólo un método que tiene cualquier acción que se necesite llevar a cabo. No obstante, el nombre de la función o un nombre de método no es lo que estamos poniendo en la ruta. Todo lo que tenemos que hacer es llamar a esto porque entonces se inferirá que cuando encuentres este tipo de calidad, estás haciendo una solicitud de get. Y así llamaré a este método automáticamente. De acuerdo, entonces notarías que este obtendría el mismo nombre de método excepto que toma un parámetro de tipo ID y se espera que se disperse en ID al que esperas llegar. Y lleva a cabo toda esa operación. Lo mismo con el nombre del método de poner. Espera ese DNI y espera que los datos se carguen 22. ¿ Qué debo ver una empresa este DNI? Y no estoy pasando por demasiado del código todavía porque vamos a estar haciendo un gran refactor con esto. Pero sólo estoy señalando que todo esto va a funcionar fuera de la caja. Entonces lo que vamos a hacer es ejecutar esto y probar. Muy bien, entonces estamos de vuelta en Postman y voy a cambiar esto para decir mix. Ahora recuerda que teníamos suma de andamios. Mezclar en la base de datos inicialmente. Entonces eso significa que tengo datos que deberían poder volver cuando envíe esa solicitud. Ahí estamos consiguiendo Bach o datos o obteniendo sobre Toyota con el ID1 creado por aunque por todas estas cosas maravillosas. Ver, todos los datos están regresando. Por si acaso estás aquí, piensa que realmente no está trabajando en tendencia arrastrar el STM cuándo poner un punto de interrupción aquí en este getMethod. Entonces intentemos esto otra vez. Doy clic en enviar y luego Visual Studio me va a alertar de que he tocado el punto de ruptura en este método, que luego ejecutará esta conexión de base de datos de consulta, me traerá la tabla make y poner todo ahí dentro a una lista y devolverlo. Eso es más o menos siempre haciendo. Automáticamente lo serializará en bloque de texto JSON y lo enviará de vuelta. Has querido probar otra. Digamos que queríamos probar el Get with the ID. De acuerdo, así puedo decir mezcla herramienta de aguanieve. Y entonces eso debería traerme de vuelta sólo los objetos BMW porque entonces dijo el método, ve a la base de datos y encuentra el registro en la tabla de mezclas que tenga esa ID. Y luego si es si no es si no encontraste nada devuelto, no telefoneado, de lo contrario se volvió a los Beatles. Entonces si pongo en ID Tin esos, no tengo diez mix en base de datos. Entonces regresa, no telefoneó esta declaración if y no volvió pliegue ya que él, toda esa funcionalidad salió de la caja. Todo lo que hice fue hacer click tres o cuatro veces y tenemos todo un controlador. Y el hecho es que puedes generar estos controladores para todas las funciones, todas las demás tablas y endpoints que necesitas exponer a tu cliente para que puedas seguir adelante y hacer todo eso si quieres. Tan solo para explicar lo que esos puestos se lleva el ID y se necesitan los datos para el micrófono, lo que significa que estoy a punto de hacer mi barco para actualizar algunas cosas para enviar sobre el objeto con los datos actualizados. Se asegurará de que los IDs coincidan. De lo contrario se devolverá una flecha 500 o mala solicitud. Entonces se va a decir, bien, base de datos, buscar el registro coincidente se basan en el ID, el registro en la base de datos nieve, y luego cambiar su estado para modificarlo y luego simplemente guardar los cambios porque acabo de conseguir datos actualizados, por lo que NOR que se modifica y en CVE, cualesquiera cambios que haya en el registro existente. Y entonces esto se pone en erupción en un try catch por si acaso hay conflicto nuestro intento conflictivo de actualizar el mismo registro. Eso es más o menos todo lo que está haciendo. El post es el Crea, ¿verdad? Entonces cuando estamos haciendo un post, significa que necesito cambiar el verbo. Por lo que el verbo en Cartero necesita ser cambiado están coordinando esto, lo cambiaré para publicar. Será el mismo slash Meeks. Pero luego el cuerpo. Y lo que voy a hacer es sólo una especie de tomar una que ya ha tenido. Por lo que tengo que proporcionar datos similares a esto en una solicitud de post. Entonces en el cuerpo. Está bien, voy a decir que quería posible en general JSON y PS punto allá. Esta vez voy a poner un Honda. Entonces ese es el nuevo micrófono. Y este Honda subió ID3. Bueno, en realidad no debería estar proporcionando el id Así que en este punto, no proporciono ID porque realmente estoy creando algo en la base de datos. Entonces la base de datos debería ser responsable de sus propios puntos de punto idea, ¿verdad? Por lo que honda creó al analizar un sistema la misma manera porque no estamos del todo listos para ver al usuario que está conectado está haciendo la operación, deja las marcas de tiempo que las cosas de auditoría. Entonces ahora mismo podemos salirnos con la suya. Y lo que voy a hacer es presentar este post solicitudes. Entonces esto debería enviarme de vuelta el objeto que se creó. Había préstamos, así que está lleno en creado. Y me está mostrando que Honda fue creada con el ID3, con todos esos datos, ¿verdad? Por lo que este Endpoints es base de datos, Consígueme la tabla y agréguele cualquier objeto que venga a través de nuestra solicitud y vea si esos cambios. Y luego regresa created_at action, que es la alta. Y di que puedes ir a buscarme con esa identificación y ese es el objeto. Bastante. Todo esto es lo que nos dio este retorno, este resultado de retorno. Y si voy aquí, ubicación, si voy a encabezados y miro la ubicación, eso es lo que no compré creado en subasta. Entonces eso significa que es sedentario donde puedo ir y obtener los detalles, correcto. Eliminar obras. De igual manera, una vez más, sólo tengo que pasar en las eliminaciones. Lo que yo haría es decir mix y digamos dos. Pero luego eliminar. Entonces esto es lo que no voy a querer crear ese auto maniquí. Tan coche maniquí. De acuerdo, así que voy a mandar otra solicitud de post para nuestro auto maniquí. Déjame mandar aunque MCAR con ID cuatro. Me doy cuenta, oh no, eso fue un error. No debí haber hecho eso. Entonces vuelvo, voy a borrar y voy a cambiar el verbo para borrar hace es para ID para. Y luego cuando mande se va a decir herramienta para ningún contenido. Entonces todo lo que sea un código 200 es exitoso. Y entonces, ya sabes, puede variar. Cualquier cosa que sea un 400 es, es relativamente infructuosa, generalmente infructuosa, y 500 definitivamente no tiene éxito. Entonces esa herramienta para sin contenido, pesar de que dice que no hay contenido y podría parecer una respuesta negativa si conoces los verbos restantes y lo que significan respuestas de riesgo ADA más bien. Y lo que significan, se vería para esa herramienta es en realidad una buena respuesta. Entonces lo que estamos obteniendo, lo que estamos haciendo en este método de eliminación es dónde encontrarlo. Si es nulo, entonces nosotros, si no lo es, no, lo siento, entonces lo quitamos y luego guardamos los cambios y luego regresamos. No buenos resultados. Entonces más o menos eso es lo que sacamos de la caja para nuestro controlador. Ahora, como dije, es bastante sencillo seguir adelante y rompía este tipo de control para todos los demás rescatados para mí. Para que pueda ir y volver a hacerlo por nuestras modelos. Puedo volver a hacerlo por vehículos. Nuevamente, hazlo de nuevo por todos ellos. El problema, quien entre cuando tal vez haya ciertas personalizaciones que necesitan hacerse. Al guardar cambios, puede que quiera hacer algo diferente. O otras operaciones básicas que quizá quiera incluir al 1 y no incluir. Ese es otro punto. Hay ciertas cosas que dificultan el mantenimiento. A medida que nuestra obligación se expande cuando solo usamos el alt off the box code, como ven aquí. Entonces lo que queremos en la siguiente lección es implementar un patrón llamado unidad de trabajo, donde abstraemos esto, toda esta operación de base de datos desde el controlador directamente. No interactuaremos directamente con la base de datos desde el controlador, pero vamos a poner otra capa en medio que nos permita orquestar lo que pasa, termina en Nitobi HIS nivel. Ya sabes, es un poco más escrutinio y más genéricamente. Por lo tanto, no te dudes en escribir con fuerza todas estas cosas todo el tiempo. Y luego podemos ver donde el mantenimiento puede llegar a ser mucho más fácil a largo plazo. Por lo que no soy de los que rasguñó a ningún otro todavía. Voy a seguir adelante y poner en la unidad de trabajo y luego podemos rozar, detener e implementar la funcionalidad de unidad de trabajo en esos una sola vez. 19. Implementar la unidad de trabajo: Oigan chicos, bienvenidos de nuevo. En esta lección estaremos implementando el popular patrón de codificación llamado unidad de trabajo. Conoce, antes de entrar a la unidad de trabajo Potter y solo quería señalar que mientras te voy a estar mostrando el patrón y si bien te animo a aprender este patrón, este observador y podría no necesariamente ser necesario para ti en tu contextos. Porque como dijimos, y ya establecimos, podríamos fácilmente con unos clics, solo generar el controlador que ya tiene conexión a la base de datos y nos permite manipular datos, esmoquin datos, todo desde la base de datos y nuestra aplicación en consecuencia. Por lo que dentro de tu contexto, tal vez no necesites llegar tan lejos como implementar este tipo de patrones. No obstante, cuando estás pensando en la capacidad de escala y mantenibilidad, legibilidad del código y no repetir ciertas bibliotecas críticas por todo el lugar. Y teniendo que hacer demasiados cambios cada vez que quieres hacer una actualización o una modificación, entonces comienzas a pensar en patrones. Por lo que mi arma de elección cuando se trata de acceso a datos, los patrones serían la unidad de trabajo porque permite una implementación muy genérica de operaciones básicas de cuervo a través múltiples tipos de clases sin tener que ponerse demasiado específicos con la cotización. Cuanto más específico se pone tu código es más mantenimiento tienes que hacer cuando hay que cambiar algo. Entonces cuando puedes mantenerlo genérico, entonces es bueno. Por lo que vamos a estar implementando el repositorio genérico Potter y así como las unidades de macetas de trabajo están. Y encima de eso. Entonces entrémonos en ello. Entonces para esto, en el proyecto de servidor, voy a crear dos carpeta nueva. Entonces voy a crear uno y lo voy a llamar yo repositorio, que va a almacenar las interfaces. Y luego voy a tener otra. Simplemente copiaré y pegaré y renombraré que luego fui a llamar al repositorio. De acuerdo, así que tenemos dos carpetas, una para almacenar las interfaces, otra para almacenar las implementaciones concretas. Entonces la primera interfaz que voy a tener es la, es nuestra clase. Simplemente lo voy a crear como clase sin ir a agregar repositorio genérico. Por lo que se puede decir clase o interfaz. Si haces interfaz, recuerda que tengo que cambiarla a pública. Si haces clase, entonces recuerda que tienes que cambiarla de interfaz de cristal. Por lo que generé solo hacer la clase y luego cambiarla porque a veces me olvido de la interfaz pública de todos modos. De acuerdo, así que hablemos de genéricos ahora si eres nuevo en el C-sharp, tal vez siete o él, se introdujeron genéricos. Y tengo genérico me permite especificar, no son difíciles de especificar u otro nombre de clase. De acuerdo, así que quiero que este repositorio tenga funciones que me permitan interactuar con múltiples clases. Y cuando digo clase me refiero a estos modelos de datos, ¿verdad? Entonces este repositorio genérico, va a tomar una clave de tipo T. Y luego voy a especificar que t va a representar a nuestra clase, lo que significa que no puede ser otra cosa que el Dr. classic encontró mejor stroke interfaz Darren o cualquier cosa, prueba el cristal trasero. Entonces dentro de esta interfaz voy a especificar unas funciones de combustible, ¿verdad? Entonces voy a hacerlo. De una función que me va a permitir conseguir, está bien, y yo sólo lo escribí dije que puedes pausar, replica su por su cuenta, ¿verdad? Pero entonces voy a explicar cada línea de todos modos. Y este es realmente solo un método con todos los parámetros que acabo de escribir la línea porque no quería ir demasiado lejos de la pantalla. Entonces tengo tarea. Estamos devolviendo una lista Ion del tipo T. Así que T, ese genérico, cualquiera que sea el tipo de datos que se pase, ese es el tipo al que vamos a ir, ese es el tipo de datos en el que nos vamos a centrar. Cuando se ejecuta este método. Se llamará al método obtener todo. Abrimos paréntesis, nuestra toma Parramatta número uno, que es una expresión, ¿verdad? Lo cual es realmente sólo una expresiones lambda. Seguiré adelante e incluiré eso. Por lo que había tomado una expresión lambda como una de metal desnudo, donde tomar una consulta ordenable como parámetro y luego una lista de cadena llamada incluye. Por lo que quizá queramos llegar a todos los parámetros. Siempre vi que tenemos relaciones diferentes entre nuestras mesas, ¿verdad? Por lo que podría ser que quisiéramos conseguir todas las reservas e ir a incluir todos los detalles de los vehículos y del cliente por reserva. Por lo que tendríamos que asegurarnos de que incluimos los datos adicionales. Y sí mencioné antes que ese tipo de unión interna implícita está disponible para nosotros a través de la derecha. A continuación, tenemos otra tarea. Y note que estoy usando tareas. Por lo que esto es parte de la programación asíncrona. Ya veremos más de eso cuando estemos implementando los métodos, tenemos otra tarea del tipo T. De acuerdo? Y estamos consiguiendo cómo todavía tenemos esa expresión. Entonces el mismo tipo de expresión, pero ésta no es nula. Entonces éste dice que no hay que pasar en una expresión. Si pasas a esta, si me estoy metiendo, esto es representar a una entidad, entonces tienes que decirme cuál quieres. Entonces tienes que darme la expresión, ¿de acuerdo? Y luego permitimos la lista de incluye también. Y entonces otros métodos incluirán y otros los pondrán ahí y te guiarán a través de ellos. O insertar entidad T. ¿ Verdad? Entonces cuando queremos agregar a la base de datos, llamamos a nuestro método de inserción. Podemos insertar lista de entidades si alguna vez surge la necesidad. Podemos eliminar uno basado en el DNI. Podemos eliminar nuestro bossing de gama en todos los que queremos eliminar. Y entonces tenemos actualización t entidad. De acuerdo, así que ese es nuestro repositorio genérico. No, necesitamos tener la clase concreta para nuestro repositorio genérico. Entonces vamos a pasar al repositorio, no al repositorio ire en este momento, pero el repositorio va a agregar una clase. Y en realidad es un sistema de clases. ¿ Dónde te da este mismo nombre solo con todo el repositorio genérico I0, I0 y luego repositorio genérico, hacemos clic en add. Y entonces tenemos que dejar que éste también sea genérico. Y va a heredar de I repositorio genérico. De acuerdo, ¿cuál por supuesto es del tipo T? Perdón, ¿construí inadvertidamente? Y luego hacemos lo mismo donde decimos donde t es vidrio. Simplemente copiaré eso porque solo queríamos ser un muy explícito pero luego necesito incluir la Junta de Referencia faltante que después incluir la referencia faltante tendrá que implementar la interfaz. Entonces, adelante y haz eso. Y luego verás que se genera todas las estufas del método punto corresponden con los métodos que teníamos todos forrados. Muy bien, así que vamos a trabajar en nuestro repositorio genérico. Para esta sección, necesitamos inyectar también nuestro contexto de base de datos. Inicializar nuestro conjunto de bases de datos a cualquier tipo de datos que se pase en St. Así que voy a crear mi propio campo local privado de lectura solo contexto de base de datos de aplicación. Entonces después de este único contexto nada, recuerda que el punto representa nuestras conexiones en la base de datos incluyen la obligación de referencia faltante en el contexto DB, y solo llamaré a éste en los contextos de partitura. Está bien. Además de eso, voy a inicializar otro privado solo lectura donde tengo db sit. Esa palabra clave te suena una campana y el televisor es de tipo T. Porque una vez más, no sé qué va a ser t en un momento dado. Estoy haciendo esto lo más genérico posible y voy a llamar a ese subrayado DB. Por lo que necesito incluir aquí una referencia faltante. Eso está bien. Y luego necesito un repositorio genérico de formato constructor para poder escribir el atajo de teclado CTO para stub dos veces y genera esa parada de constructor para mí y luego necesito inyectar. Entonces de la misma manera que vimos que el ancho de banda del concentrador de inyección hace controlador ahí está. Ese mismo tipo de inyección necesitamos inyectar este objeto en el repositorio genérico. Y entonces estoy literalmente sólo copia en leyes básicas es la misma cita es el mismo concepto que necesitamos inicializar o copia local al objeto inyectado. Y luego después de eso, voy a inicializar mis objetos DB campo RDB para ser underscore context dot set de tipo T. Así que en otras palabras, DB sabe cuándo representar conjunto de base de datos conectada de tipo T, lo que sea t va estar en su momento. Ese es un método. Por lo que pones en tu departamento ambiental hace y cierras. Eso es suyo o se conformó con genérico o bluster. Entonces en cualquier momento este repositorio se va a inicializar, se va a inyectar esa conexión a la base de datos. Y luego tiene que inicializarse en relación con una clase en particular. Entonces se va a decir, OK, estoy conectado al establo. Y luego vamos a ver cuándo se llaman estos métodos, se llaman a la acción. ¿ Qué debería pasar? Entonces, empecemos con los simples. Eliminar es muy simple, en realidad es muy, muy simple porque lo que necesitamos hacer uno es encontrar las entidades. Diré var entidad, o puedo decir var rect card es igual a. Y entonces vamos a empezar en una programación no puede asíncrona en un poco. Entonces cuando tenemos, cuando estamos trabajando con Entity Framework Core, nos dan un montón de métodos asíncronos porque si solo dices db dot, empezarás a ver add async, Iberian JS sync. Todos estos, la mayoría de estos tienen una versión Async para ellos. Siempre que vamos a estar haciendo algo que es asíncrono, tenemos que preceder esa llamada con la palabra clave esperada. De acuerdo, así que quiero encontrar un, encontrar un fregadero, y no voy a encontrar cuando pueda encontrar un fregadero, ¿verdad? La diferencia entre los dos es que asíncrono significa que D se ejecuta un poco en diferentes hilos. El deber de pendejo se estancará a la espera de los resultados de estas llamadas de función. Entonces eso es lo que la AC, esa es una ventaja que trae la programación asíncrona. Entonces solo diré encontrar un fregadero y luego encontrar espera algunos objetos. Bueno, voy a pasar el DNI. Entonces como vimos en el controlador de alcance principal es el mismo tipo de lógica, ¿correcto? En la eliminación, tuvo que encontrar el registro. Y entonces va a llamar a eso remover, ¿verdad? Pero entonces no estamos pasando por tantos pasos ensayo en contexto que hace esto, no estamos siendo así de explícitos porque están siendo genéricos. Por lo que el BERD encarna lo que se pasó, Encuéntralo asincrónicamente almacenamiento y tarjeta roja. Y luego voy a decir en el puntaje db dot, quitar esto requerido. Por lo que no hay una función correspondiente asíncrona que eliminar. Entonces eso está bien. Yo sólo voy a mover el usuario. Y yo voy a decir quitar el registro. No, ten en cuenta que he leído líneas. Uno. Necesito oh, sí dije que necesitamos preceder esto con espera. Está bien. Entonces tenemos que decir, oh, se nota dot-dot-dot desaparece, pero luego aparece éste porque una vez que estamos haciendo una espera, el método tiene que ser un fregadero. Entonces una vez que estés haciendo una llamada asíncrona y vas a tener que usar la palabra clave espera. asegura de que el método que realiza la llamada tenga la palabra clave asíncrona. Observe que ambos se iluminan cuando destaque solo uno. De acuerdo, así que ahí vamos con borrar. Eliminar rango está bien, menos líneas de código porque me encanta ver es honesto score db dot remove range. Y quitan rango está esperando un parámetro, una colección de lo que debería quitar, que pasaban en forma de entidades. Está bien. Entonces eso es todo para borrar. Uno. Como dije, estoy lidiando con una fruta baja que cuelga. Para que éste pueda ponerse wordy, esta pandilla se ponga wordy. Entonces vamos a saltar hacia abajo para insertar en cirugía en actualizaciones generales sobre ahí podemos retroceder. Por lo que insertar es relativamente simple. Todo lo que tengo que decir para insertar es un peso d, b, agregar asíncrono y entidad. Y entonces una vez más, si estamos usando un peso, tengo que asegurarme de que el método sea un fregadero. Si estamos haciendo el rango de inserción, tenemos un código similar excepto que es cada pulgada de sangre que uno tiene un ver. Por lo que a gama y una vez más, un fregadero. De acuerdo, y luego por un rato, lo que tenemos que hacer aquí, así que para la actualización de este lado, lo que hizo fue que yo encontrara o lo hizo simplemente decía que los cambios de entropía estado a modificados, acuerdo, y luego guardar cambios, y eso está bien. ¿ Está bien? Lo que podemos hacer de este lado, lo que voy a hacer en este aunque es un poco diferente. Bueno, es una línea extra donde voy a decir subrayado DB dot-dot touch entity. Y la razón por la que estamos haciendo esta parte de entidad adscrita es que cuando hacemos el get, obtienen todo donde se desprenden de la base de datos. Entonces básicamente en mezcla, siempre que una consulta es no son estas entidades se están tirando nuestras propias, siempre están adjuntando, la base de datos siempre está vigilando el seguimiento de todo lo que este objeto está pasando, que puede tener algunas implicaciones de rendimiento cuando se tienen miles de registros que en diferentes mercados tendencia a mantener un seguimiento en todo momento en la memoria. Entonces lo que vamos a hacer es cuando nosotros, cuando hagamos el get's, vamos a decir que no hay seguimiento, lo que significa que están desligados. Entonces cuando estoy a punto de hacer una actualización, el volver a adjuntar esta entidad. Por lo que la base de datos a la colección. Entonces empieza a camionearlo. Y luego una vez que lo esté camionando, No, puedo ver esa entrada de entidad. Cualquiera que sea la entidad que sea nuestra entrada de punto de contexto, la entidad que se está pasando en ese estado es igual a entidades, estados modificados, lo cual es lo mismo que estaba ocurriendo aquí. Una vez más donde ser genérico para que no especifiquemos micro porque no sé si es en mí, dale algún modelo. Si se trata de un vagamente parecido Podemos no saber. Entonces por eso estamos siendo muy vagos con nuestros nombres aquí. Lo estoy llamando m entidades en contraposición a mí pueden modelar y cualquier nodo específico . Retrocedamos un poco y subamos a nuestro Git y conseguimos todo. Entonces llegar a, conseguir es más fácil. Empecemos con Git. Entonces la primera línea que hay que conseguir es inicializar una consulta. Muy bien, entonces yo te consultable, y yo consultable es un tipo de datos muy específico, lo que significa, que básicamente representa el primer tipo de datos que estás obteniendo cuando interactúas con la base de datos. Y desde aquí puedes tipo de realizar ciertas operaciones más eficientemente contra las colecciones de bases de datos de lo que podrías si tuvieras una lista almacenada yo enumerable o algo más, ¿verdad? Entonces estamos inicializando nuestra consulta de ese BB. Entonces aquí mismo, todos los registros se cargan en la memoria. Y luego voy a ver si incluye. Por lo que habríamos pasado incluye. Incluye no es igual a nulo, lo que significa que algo fue enviado en esta lista. ¿ Verdad? Entonces queríamos ver si por cada uno, solo puedo hacer eso y decir tina, tina, var. Sólo diré en, digamos prop. Usemos una palabra prop en La lista incluye. Muy bien, entonces queríamos ver consulta que representa la conexión de base de datos. ¿ Son las consultas de base de datos iguales a los puntos de consulta incluir? Y entonces sólo voy a ahorrar la prop. Entonces es cuerda intacta, todo lo que realmente necesitas es el nombre de lo que debería incluir, por lo que sellaremos eso funciona más adelante. No hay problema. Y luego después de todo esto, te darás cuenta de que esto es, se lee. Tenemos que devolver un punto de consulta. Y luego quería ver como más rastreo. Entonces aquí es donde estoy viendo desprenderse de la base de datos. Pero quiero que devuelvas el primero nuestro predeterminado y voy a elegir la versión asíncrona de ese método. Y luego paso en la expresión. De acuerdo, entonces si no estás familiarizado con las expresiones lambda, bueno, expresión lambda, expresión lambda es lo que se habría configurado aquí. Nosotros lo manejamos a través, ¿verdad? Por lo que se puede ver en algunos expertos de bluff lambda aquí en este micro existe método donde decimos contextos dot, dot n0, y entonces esta es una expresión lambda. Entonces es ese tipo de expresión o este tipo de valor lo que pasará en este método. Y entonces llevará a cabo esa operación. ¿ Verdad? Ahora, claro, sí vi un fregadero aquí. Entonces eso significa que necesito la palabra clave, espero. Y si necesito la palabra clave o h, eso significa que necesito hacer de mi método aquí un fregadero. Ahí vamos. De acuerdo, así que ese es el disco get Juan, Juan, correcto, basado en estas expresiones lambda. Por lo que podría ser por identificación, podría ser por nombre igual b por año. Es decir, no lo sé. Podría ser el vehículo por Vin vivo mirando por encima de ICO por Vin, ya sabes, solo asegúrate de poner la expresión apropiada para asegurarnos de que recuperemos el valor que buscamos, ¿verdad? Cuatro se pone todo nulo. En realidad empezamos con las mismas menos líneas de código. Entonces necesito el, bueno, necesito la consulta primero, ¿verdad? Y entonces no estoy seguro si voy a llegar a una expresión, así que no quiero seguir adelante y probarla, jugar una expresión, sobre todo si es nula, eso me dará un error. Entonces voy a ver si la expresión no es nula. Vuelve a intentarlo. Si la expresión está encendida, si van a ir express on no es igual a null, entonces quiero filtrar la consulta. Entonces recuerda que esto representa todas las tablas en la base de datos. Entonces voy a decir que la consulta no se supone que sea filtrada por la expresión. Entonces no todos los que sabemos que no necesitamos si se dio una expresión. Entonces si dijimos dame todos los vehículos esa cuadra entera, entonces estamos pasando eso para darme todo el negro. Por lo que todos los vehículos que se filtrarían hasta los que sólo están bloqueados. Y luego. Con base en el campo. Y una vez que hagamos lo mismo incluye, así que sólo voy a copiar ese bloque aquí. Entonces si incluye, entonces seguimos adelante e incluimos los detalles que necesitábamos. Y entonces también tenemos la orden por déjame simplemente derribar todos los departamentos o para que podamos recordarlos. Entonces tenemos la expresión, entonces tenemos la orden BY. Entonces después de incluir, entonces podemos ir en orden. Entonces vamos a decir si ordenar por no es nulo, entonces lo que queremos es que Query sea igual a. Y entonces tenemos este método orden por consulta, ¿no? Entonces a los rabinos les gusta mucho un método y solo los va a reorganizar de acuerdo a lo que se especificó. Entonces al final de todo eso, solo queremos devolver puntos de consulta. Una vez más separarlos de la base de datos dot told list. Y voy a encontrarme con ese asíncrono, si es una sincronización, necesito esperar. Y si estoy esperando, entonces mi método necesita ser un fregadero. De acuerdo, y ahí tenemos un repositorio genérico con buen aspecto hasta ahora ¿verdad? Ahora la cosa con el repositorio genérico, si bien es un genérico, sí, todavía vamos a tener que una especie de instanciarlo cada vez que fue a interrumpir con esa tabla diferente. Lo que significa que si en una ley de control podríamos necesitar interactuar con múltiples tablas, tendremos que instanciarla varias veces. Entonces voy a poner otro nivel de obstrucción. Y otra cosa que falta es el Guardar Cambios. Por lo que va a entrar otro nivel de trabajo. Y fui a implementar eso en la carpeta del repositorio ire. Y voy a crear otra interfaz. Entonces déjame solo crear esto como una interfaz es el tiempo, y lo voy a llamar, necesito un tenedor. Y una vez más, recuerda hacerlo público. Ahora esta i unidad de trabajo, solo voy a heredar de desechables porque lo que queremos que suceda es que cuando termines de usar las unidades son fuerza, muere en memoria. No queremos persistir a través de alterarlo. Entonces eso está bien. Pero entonces lo que podemos hacer en esta sección, null es en realidad especie de creado como nuestro registro para todas las posibles implementaciones del repositorio genérico para que solo tuviéramos uno lo haría una sola vez lo suficientemente bien como para hacer día cada vez que tengas que interactuar con múltiples tablas solo tendrás como me inscribo una vez. Por lo que crearía repositorio genérico ij para mí. Por ejemplo, dele su nombre. Entonces lo voy a llamar mezclar algunas personas. Si usted, si le echan un vistazo a este patrón, lo contrario puede ver a algunas personas lo llaman eso hace que el repositorio sea muy explícito. Pero una vez más, ese es solo el punto punto del NIMA. Pero la clase es lo que realmente importa. Entonces estoy viendo implementar un repositorio genérico para nuestro micrófono, ¿verdad? Y recuerda repositorio genérico clase requerida, Enfriar y luego mezclar. Por lo que en cualquier momento que llamamos IU mezcla de palabras duras, va a implementar automáticamente esto. Y automáticamente va a pasar por esta conexión a la base de datos. Conecta esa mesa. De acuerdo, así podemos hacer eso para todas las mesas realmente. Por lo que podemos decir modelo. De nuevo, ver vehículo, todos ellos, ¿verdad? Cuando agreguemos una nueva tabla, tendré que tener un nuevo repositorio. Simplemente lo agregaremos al padrón. No tenemos que volver a pasar por todo esto cada vez que tenemos una mesa nueva. Para que puedas seguir adelante y sumar todos ellos. Pero por ahora solo trabajaré con los que solo trabajo conmigo. Activar esas necesidades sea porque tenemos el controlador de mezcla, así que solo voy a trabajar conmigo y mostrarte cómo va a suceder esa refactorización. De acuerdo, entonces después de eso, no, necesitamos clase concreta para nuestras unidades fuera del trabajo. También voy a implementar tareas guardar. Entonces esto va a representar nuestros Save Changes y cualesquiera otras operaciones en él es que quizá necesitemos llevar a cabo un gemelo donde guardar. Entonces déjame crear la clase concreta ni para la unidad de trabajo. Entonces voy a volver al repositorio, agregar una nueva clase, y voy a llamar a cada unidad fuera del trabajo. Entonces yo unidad de trabajo y unidades son bifurcación crear que esto va a heredar de IU y todo es bifurcación. Y entonces por supuesto, de la misma manera que cualquier otra cosa heredada, tenemos que seguir adelante e implementar o interfaz. De acuerdo, entonces aquí se va a intentar inicializar la mezcla genérica, derecho a ese es el método de disponer que se está creando porque teníamos la herencia al disponer, y entonces tenemos el método de guardar que se está generando. Entonces desde aquí voy a hacer algunas cosas. Voy a tener el mismo tipo de solo lectura que teníamos para el contexto. Alguien que cree que los contextos de base de datos de aplicación hacen referencia aquí. Y entonces también voy a tener una versión privada de este repositorio público para mí x. Así que déjame solo hacer eso. Entonces estoy haciendo privada de solo lectura. Yo diseñé el micrófono del repositorio, pero entonces es privado tan completamente en esa palabra clave o esa convención de nomenclatura más bien lo llamaré mix, ¿verdad? También voy a necesitar un constructor. Así que c bar, ¿de acuerdo? Y este constructor, si estoy esperando usar esto, entonces definitivamente voy a tener que inyectar en el objeto, como lo he hecho antes de esto. Y seguir adelante y instanciarlo, nuestro inicializarlo al inyectado. Ahí vamos. De acuerdo, todo esto se llama inyección de dependencia, una vez más, procedimiento estándar y se hace muy fácil a través de dominate core. Entonces concentémonos antes de enfocarme en la aguja, centrémonos en lo que sucede con el disponer, en lo que sucede con el Guardar. Entonces en esta pose, lo que voy a hacer es decir, primero, consígueme el contexto y disponer de él. Entonces sea cual sea la copia local del contexto que estoy usando cuando la unidad de trabajo se hace su trabajo, solo disponer de ella. Y luego también voy a llamar a la recolección de basura y ver supresor, analizar esto. Entonces estas unidades de objeto de trabajo lo matan en la memoria, pero eso es más o menos lo que está pasando ahí, ¿verdad? Para la operación de guardar, voy a decir, voy a esperar, contextos Guardar Cambios asincrónicos. De acuerdo, bueno claro que son nuestros pesos, así que necesito un fregadero. Saber lo que está pasando aquí es que podemos, tenemos la oportunidad de realmente poner más cosas en nuestra operación de guardar cuando tenemos este método, ¿verdad? Porque sí tenemos donde queremos hacer última actualización y creada por un todas esas cosas. Imagínese si agregamos todos estos controladores, solo construidos así. Y luego cada vez que pasa algo, no te pongas como una actualización. Tengo que recordar eso. Tengo que decir punto manso actualizar la fecha y hora actualizada, no hay puntos de bys beta igual a quien haya ingresado. Y tengo que hacer eso religiosamente, ¿verdad? Y muchas veces hacen eso por todas partes. Si tengo diez controladores fuera para hacerlo en controladores Alton, si algo cambia, un campo cambia, los cambios de nombre son algo después. Recuerda cambiarlo diez veces. Cuando tenemos la oportunidad de poner todo ese solo lugar, trae una ventaja importante porque aquí puedo personalizar este método para hacer esos ajustes antes de guardar los cambios. Y así lo hago una vez. Y ese es el poder de un patrón. Pero aún no estamos listos para llegar allí. Lo que voy a hacer para finalizar este video es mostrarte lo que se requiere para esta línea. Entonces para el método público y la manera fácil de tipo de hacer esta inicialización es usar una expresión lambda. Y entonces usaremos eso. Y ver en la mezcla de partituras fue la versión privada. Score hace que eso se extendió fors sobre esto. Y entonces sólo vamos a ver si no es nulo, entonces debería ser igual a. Entonces este operador solo significa si es nulo, entonces hazlo igual a. Y luego vamos a iniciar un nuevo repositorio genérico de tipo mic en ese objeto, ¿verdad? Y luego vamos a pasar en el contexto que aquí se inicializó. De acuerdo, así es como se ve ese trozo de código. Y oh, esto no debería ser apologistas de sólo lectura. Por lo que eso no debe ser de sólo lectura. Y esto es decir que necesita, acuerdo, de acuerdo, así que déjame, déjame retroceder y tarjeta así errores. Entonces cuando ponemos el jabón en el registro de las unidades i ofrecidas, esto no debería ser Gets it, esto solo debería ser conseguir. Entonces, vamos a despegar este set, ¿verdad? Estos no deben ser conseguir sets. Creé todas estas áreas de imágenes entonces desde no. Está bien, así que eso debería ser sólo un llevarme a cualquier parte, sólo conseguir ese objeto. Y entonces el público un nodo va a recuperar ese objeto y ponerlo ahí. Entonces así es más o menos como se ve nuestra unidad de trabajo. Ahora cuando volvamos veremos veremos cómo refactoriza nuestro controlador make para aprovechar la unidad de trabajo y luego ejecutarla a través de algunas pruebas. Y luego podemos implementar en todos los ámbitos para cada objeto de dominio que vamos a tener en nuestro programa. 20. Refactorizar los controladores existentes: Muy bien, bienvenido de nuevo. Ahora que tenemos nuestra configuración de unidades de trabajo, lo que queremos hacer es empezar a refactorizar a nuestros controladores. Pero antes de que podamos dejar que nuestros controladores interrumpan a la unidad de trabajo, tenemos que dejar al Bootstrap o saber que este es un tipo de servicio inyectable en nuestra aplicación y cualquier otra cosa que pueda querer tenerlo temido. Entonces lo que tenemos que hacer es ir a startup. Y luego a la derecha de rodillas, el servidor de identidad de anuncios, JWT, voy a agregar una línea, añadió transitorios i unidades fuera de las unidades de trabajo 04. Podemos seguir adelante e incluir cualquier referencia que falte en consecuencia. Y lo que pasa es que estamos haciendo, me gustaría tendencias Indianola, transitorio, agregar alcance y agregar Singletons. Singleton significa que va a ser un incienso para todo el tiempo de ejecución ofrecer su aplicación. Sculpt significa que va a crear, bueno, va a ser una instancia para toda la vida de un cierto conjunto de acciones. Y entonces yo lo transitorio significa que cada acción va a girar su propio borde en más o menos. Entonces queremos asegurarnos de que las unidades de trabajo no sea, ya sabes, es, es ser único cada vez. Y bueno, ya tenemos la recolección de basura, así que en cuanto ya no sea necesaria, se deshará de todos modos. Entonces eso es entero o unidades o cuatro, se inyecta o se prepara para inyección. Entonces un nulo en cualquier lugar que quisiéramos lo mismo, podrías inyectar contextos de base de datos de aplicación o cualquier otro servicio. Puedo saber inyectar mis unidades i, así 4k, así que voy a Snyder factoring aquí mismo en el controlador de mezcla donde voy a decir i unidades de trabajo. Por lo que ya no quiero interactuar directamente con mi contexto. Quiero empezar a usar la unidad de trabajo i como ese intermediario, ¿no? Es seguir adelante e incluir cualquier referencia que falte. Y luego voy a llamar a esta unidad de trabajo. Y así la inyección nula no será obligación balas de contexto DB. Te bajas del trabajo, ¿verdad? Y entonces la inicialización sigue más o menos el mismo patrón que con cualquier otra cosa que hemos estado haciendo que implicaba inyección. Por lo que tenga en cuenta que tenemos la i unidad TO para reemplazar contextos RDB. Tenemos un montón de errores por los que necesitamos trabajar. Y veamos exactamente qué pasa. Entonces aquí dijo regresar un enumerable de Mick y se fue a la base de datos, la tabla y luego convirtió eso. Por lo que eso hubiera sido plomo II consultable en una lista. Entonces lo que voy a hacer aquí es decir i unidades, así que cuatro se mezclan. Y entonces puedo ver, Dame los gets. Está bien. Ahí vamos. No, estoy recibiendo un error aquí y se debe parcialmente al tipo de devolución versus lo que realmente estoy regresando. Entonces en realidad voy a hacer un poco más que esos refactor que necesita un color base. Y en realidad voy a construir todo este controlador la forma en que me siento más cómodo con mi controlador mirando. Por lo que quería cambiar esto para que fuera solo una tarea de tipo. Resultados de acción sobre cuándo despegar este fuerte tipo de datos. Por lo que tarea fuera de tipo resultados reales. Y luego está esperando alguna forma de HTTP. Respuesta a ser devuelto, alguien que amplíe un poco esto. Var mix es igual a, y luego hicimos esa llamada telefónica. Y entonces puedo ver regreso. Y yo quería estar bien. Entonces recuerda que cuando estábamos mirando los tipos de devolución, quién habría visto la vieja clave o el contenido y así sucesivamente. Entonces todo k es una respuesta 200 que me permite poner en los datos que debería devolver si todo está bien y eso es todo lo que tienes, ¿verdad? Entonces sí, quedan más líneas de código. El uno más línea de código. Pero para mí esto es mucho más legible y es más fácil para mí mantenerlo. Y en base a lo que hemos implementado, se ve que todo funciona de todos modos. Entonces no hay nada de malo en cambiar el código generado siempre entiendas por qué estás cambiando y una vez que entiendas cuál es tu cambio en el cercano o en el buen camino. Entonces hagamos una operación similar para el Get with the parameter. Por lo que tarea me axón resultados. Estoy quitando el tipo de datos fuerte. Y entonces lo que haremos aquí es ver muy duro trabajo dot mix. Entonces sólo voy a reemplazar todo eso. Pero entonces esta vez es un get. Y entonces en lugar de pasar el DNI, una vez más, podríamos haber tenido que me dieran cuatro, conseguir por DNI. Podríamos haber tenido que me pasara por otra cosa, ¿verdad? Entonces la flexibilidad de la expresión es que podemos poner en los expertos lambda aquí y decir q dot. Y luego puedo ver ID es equivalente a ID. Esa es mi expresión lambda. Entonces esa condición se va a ejecutar como vimos, como implementamos en el repositorio genérico. Y va a seguir adelante y devolver ese micrófono. Y entonces aquí puedo regresar, bien, con el micrófono como los datos que se están devolviendo. Una vez más, si estás acostumbrado a la muñeca, diseña principios de riesgo , API de descanso, desarrollo, entonces todo esto tendrá sentido para ti. Si no, entonces no hay problema, por eso estamos aquí. Entonces por eso hace dos puntos finales No sólo unos pocos para ir. Por lo que para nuestra actualización, las modificaciones que voy a hacer estarán en el marcador Unidad 04 punto, hace puntos. De acuerdo, entonces por el padrón, podemos acceder y mezclar directamente por alrededor de 2 que dijo antes. Bueno entonces podemos decir actualización y luego simplemente pasamos en la entidad que está apagado de micrófono, ¿verdad? Entonces yo, que es el MIC entrando a través del parámetro aquí, y lo enviamos todo. Por lo que esta línea de código va a ser atendida en el repositorio. Por lo que nadie necesita mirar a nuestro controlador y conocer los profundos y oscuros secretos de lo que realmente está sucediendo. De acuerdo, eso es esa abstracción. Y luego para una operación como esta, cuando modificamos los datos, necesitamos llamar a nuestro Guardar Cambios. Entonces me voy a llevar esto viejo y te voy a ver cuando esté fuera de cuatro puntos guardar. Está bien. Y entonces eso es todo. Entonces sigamos adelante. Entonces ya ves, la refactorización realmente no es tanto, pero para mí lo es, no hay mucha actividad pesada de bases de datos en nuestro controlador. Queremos mantenerlos livianos y claros como sea posible. Entonces para el post, queremos unidad fuera de trabajo para mezclar punto y luego veremos inserto, ¿verdad? Y lo que estamos insertando es el micrófono. Está bien. Eso es asíncrono. Ah, y es asíncrono y me olvido de ponerme la espera, ves una línea verde garabateada. Entonces y luego hay todos asíncronos lo cual está listo para responderme volviendo atrás y poniendo un fregadero. Y luego de aquí voy a SI unidades son cuatro puntos salvados. Y entonces puedo quitar esa línea y todo lo demás fluirá en consecuencia. Para el SAC, una vez más, el botón está ahí. Sí funciona, pero puede que no lo necesites. Entonces no te estoy diciendo que debes desarrollarte con ello, pero solo te estoy guiando en su conjunto. Se puede ir a implementarlo. Entonces, ¿qué queremos eliminar? Recuerda que eliminar, eliminar solo necesitaba el DNI, ¿verdad? Entonces lo que podemos hacer aquí es bajarte del trabajo, dot, mix, dot, delete, pass in the ID null, donde en realidad especie de eludir algunas de las garrapatas más esenciales que vemos aquí. Porque lo que está haciendo es encontrar si el registro existe, si no lo hace, entonces va a regresar, no por teléfono. Y entonces por supuesto querían guardar los cambios después de eso. ¿ Verdad? Por lo que acaba de reducir todos estos en más como dos líneas de código. Pero entonces, como dije, este cheque es algo esencial. Por lo que probablemente podamos hacer ese cheque donde decimos micro. Entonces vamos a conseguir el micrófono. Y luego recuerda que ya hicimos esto en algún lugar de aquí arriba donde hicimos este conseguir. Entonces podemos hacer eso mismo prepárate. Sólo decimos que me traigan el micrófono. Si el micrófono es equivalente a null, entonces devuelve NOT_FOUND auto ya que seguimos con eso. Y entonces sólo podemos quitar cualquier otra cosa que esté ahí. Y fue C. Y entonces tenemos este método que dice Hacer existe alma. Podrías implementar en la unidad de trabajo C. Cuando pasas al DNI, revisas si lo hay. Pero ya tenemos este método que va a comprobar si algo hay alguien que use esto y reemplace esto existe en algún lugar para decir var me eq es igual a eso, um, y entonces debería devolver un booleano. Entonces voy a decir que me devuelvan es equivalente a nulo. ¿ Todo bien? Nuestra alma aquí, esto es asincrónico, el método no lo es. Entonces lo que puedo hacer es hacer de esto una tarea asíncrona que devuelva un C booleano, u, que sé que todos están contentos. Y entonces por supuesto la llamada de método tiene que tener el sobrepeso aquí arriba. Entonces eso es todo, todo tipo de fluye, ¿verdad? Entonces eso es solo el reflexivo para los micras. Si hubieras generado, van van a controladores y él puede seguir adelante y hacer eso. De lo contrario todavía lo vamos a hacer juntos de todos modos. Pero tomemos este control refactorizado para dar una vuelta. Tenga en cuenta que estamos usando son unidades de trabajo. Y sólo verificar que funciona desde cartero. De acuerdo, así que voy a empezar con una solicitud de get. Entonces si envío entonces conseguimos todos los vehículos o lo siento, todos los modelos o la mezcla u otros en el sistema. Entonces ya ves, sí funciona, sigue funcionando. Hace que nuestra cotización termine a más limpio y la segmentación es especie de en su lugar. Si quisiéramos crear, es el mismo principio. Puedo ir a la escuela aquí y ver Enviar, y luego crea un nuevo auto ficticio. Los niños trabajarán de la misma manera. Todo va a declarar. Entonces vamos a ver qué pasa cuando borro un DNI que no está ahí, causa remoción. Ya borramos la mezcla con el ID para nos deja ver qué pasa. Ver 404 No teléfono. Si lo muevo hasta cinco, que es el tipo maniquí que acabamos de crear. Es contenido nulo, así que todo sigue funcionando. No hay una cosa que quería señalar es que cuando estamos creando nuestro, ya sabes, cualquier cosa, realmente no esperamos conseguir este material de todos nuestros clientes, bien, así que creado por grande creado todo eso no debería ser prevenido por el cliente y cartero debería estar realmente emulando lo que haría un cliente. Entonces en esta situación, si quisiera crear ese DO make car, cualquier cosa aunque MCAR id busque, y entonces estos campos realmente deberían ser auto llenados, ¿verdad? Entonces ven aquí nulo, no sé quién creó. Es que no sé cuándo se creó o actualizó ni nada. No sé nada de eso. Entonces realmente deberíamos estar implementando eso. No, yo había señalado que lo que tendríamos que hacer para facilitar algo así sería que en la puesta, que es la actualización, tendría que verme puntearlo, crear nuestros datos digitales es igual a esto. No queremos hacer eso. Una vez más, no queremos tener que hacer eso a través diez controladores son cada vez que llegamos a nuestro controlador, tenemos que hacerlo contra la entidad manualmente. Entonces lo que vamos a hacer es implementar en nuestra operación segura la capacidad de obtener los contextos HTTP y modificar los objetos antes de que se vayan a ser C. De acuerdo, así que enfoquemos en agregar las escrituras. Entonces el escenario es que cuando creo algo que D creó y los datos actualizados deberían ser los mismos. No obstante, cuando hice algo en esa fecha, actualizado y actualizado por debería cambiar. De acuerdo, entonces lo que queremos hacer es esta operación segura, vamos a salvar var. Voy a llamarlo entradas es igual para conseguirme el contexto punto de cambio camioneros. Porque recuerda dije que una vez que esos datos están entrando, o quiero decir, una vez que estás creando algo, una vez que estamos orbitando algo, no es rastrear el objeto. Una vez que lo hemos recuperado, porque dijimos como rastreo Norte, no hay rastreo. Entonces la estructura del azar es realmente sólo va a ver bien. Cualquier cosa que sea yo estoy camionando, consígueme todas las entradas y ese es un método. Y entonces sólo voy a decirlo punto a We 're, así que voy a ejecutar una expresión lambda on, en la base de datos o consulta para ver donde la expresión Lambda Q punto state es equivalente a NTT State, que es realmente una enumeración. Por lo que no me gusta tener todo eso plena, plena calificación. Ahí hay entidades teatro e incluyen la biblioteca faltante donde entidades, estados punto modificado. O iré a la siguiente línea para que sean el estado q punto. Entonces el estado que es no lo es. Entonces recuerda cuando hicimos la actualización, que es el estado, entidad herramienta derecha estado DOT modificado. Para que pueda ver punto modificado, nuestro estado de entidad es punto muerto. Entonces eso significa que está a punto de ser arte creado. Se acaba de agregar herramienta que el seguimiento, o al menos en lo que se refiere, le dice poco id por demasiado. Entonces voy a recorrer todos ellos. Por lo que quería decir para cada entrada en lo que volviera en las entradas. Porque la realidad es que cuando llamamos c, Si pudiéramos haber tocado muchas cosas diferentes, correcto, tenemos toda la update_many que podrían haber modificado en make y model. Y estamos tratando de hacer una operación de guardar y no lo sabemos. Entonces por eso sólo estamos obteniendo de todas las entradas. Ese es nuestro barco que se guarden para que me todos los resultados se modifican y todos los que se suman. Y luego para cada uno de ellos, quiero cambiarlo su modificado y modificarlo por, correcto, no estamos listos para lo modificado centrándonos en la retiniana de datos. Entonces lo que tendría que hacer es ver puntos de entrada y luego decir entidad. Pero entonces el problema es que las entidades muy genéricas. No sabe lo que siente que tiene, su, no lo sabe, ¿verdad? Entonces una de las ventajas con los que usan ese objeto de dominio BCE es que siempre podemos costear y entificar en ese objeto de dominio base, que nos da esos honorarios de auditoría que sabemos lo que cada campo, cada uno de los objetos de dominio están permitidos. Por lo que puedo decir que b es modelo de dominio aquí. Y entonces puedo envolver todo esto en un paréntesis grande, por lo que lo verá como un gran objeto de tipo modelo de línea base. Entonces puedo ver punto actualizado, datos actualizados. Vamos a centrarnos en el embudo es hora, datetime dot naught C. Y entonces voy a ver si el estado, así que en árbol. Si este estado es equivalente agregado, entonces tiende a obtener un tratamiento especial porque además de obtener el tiempo de datos, también necesita conseguir el creado la amenaza. Entonces voy a copiar eso y solo voy a cambiar esto a creado, fecha, fecha creada. De acuerdo, así que básicamente estoy diciendo que cada vez que se esté haciendo la operación de guardar obtiene cualquier cosa que se modificó o agregó. Y luego para cada uno de ellos que te dieron los datos para conocer porque claramente se está actualizando y alguno de ustedes fue agregado, adelante y llénalo Así que si se está actualizando, no necesito actualizar la parte agregada. Y luego después de todo eso, seguiremos adelante y guardaremos nuestros cambios independientemente. Está bien, no se pone más, mucho más complicado que eso por eso. Entonces una vez más, este sistema de escáner en ese momento de tener que recordar que en cada control, en cada operación, estoy tratando de rastrear todo esto porque solo lo automatiza aquí mismo. Entonces, vamos a dar un paso más allá y ver cómo rastreamos al usuario. Porque estoy conectado como usuario y estoy haciendo mis operaciones diarias, verdad probablemente no sé que me estás siguiendo, así que no debería tener que escribir mi nombre de usuario junto a cualquier trabajo que esté haciendo al hacer clic en Enviar, deberías estar rastreando eso. Yo soy el que hace clic en Enviar y nuestros campos de auditoría lo hacen. Pero entonces, ¿cómo obtenemos los datos de la persona que usa el blazer hasta la base de datos? Bueno, vamos a permitir la inclusión de lo que llamamos contexto HDTP. De acuerdo, así que ya saben, guardo operativo, estamos poniendo en este parámetro contexto HDTP, que viene de nuestro controlador. ¿ Está bien? Porque sabemos que eso es de lo que llamamos a salvo. Cada vez que llamamos guardado, de ahí lo estamos encontrando. Entonces por supuesto, si lo actualizo aquí, voy a tener que actualizarlo en la unidad de trabajo. Por lo que se espera que C-F tenga parámetro de contextos HTTP tipo. Por lo pronto volver atrás y actualizar los controladores en consecuencia. Entonces cuando obtenemos los contextos HTTP que nos da acceso. Entonces tal vez el nombre de usuario, cosas inciertas, un barco, un controlador, así que cualquier solicitud entrando. Entonces puedo decir que el usuario var es igual a. Y luego puedo ver HTTP context dot user. Tenemos esa identidad de punto, nombre de punto. Entonces eso me da el nombre de usuario. De acuerdo, así que quería camiones qué usuario necesita mucho. Bueno, aquí está. Sé cómo el nombre de usuario. Está bien, así también puedo ver que en cualquier momento algo está a punto de actualizarse, que lo actualizado por es usuario, ¿verdad? Y entonces el CreatedBy es usuario. Y luego desde nuestro controlador, voy a tener que asegurarme de que en cualquier momento que guarde, pase en este contexto HTTP de punto. Y entonces tengo que decir, bueno, sí, este punto contexto HTTP. Entonces eso en realidad es suficiente. Creo que ni siquiera necesito la palabra clave que en realidad sea suficiente. Ahí vamos. Entonces yo solo Boston los contextos HTTP, así que automáticamente va a camión. De acuerdo, este usuario fue el que hacía la solicitud porque los contextos HTTP, está transportando todo sobre cualquier cosa que suceda, sucede, la conexión que se está utilizando, el usuario, solicitan el retorcido responsivo está en este objeto, por lo que era posible sin objeto. Y entonces las unidades son horquilla operación CM sólo va a ser un gran carro de guerra mientras está poniendo cosas en la base de datos y poniéndolo en todas las auditorías. Por lo que esta es una buena manera de obtener el registro de auditoría en su aplicación. Ah, tal vez dependiendo de los desarrolladores para asegurarse de que lo ponen o dependiendo de ti mismo para recordar que lo pone en todo el tiempo. Entonces vamos a probar eso. Veamos cómo se va a ver Cartero. Tratamos de presentar datos a la base de datos. Entonces voy a poner un punto de interrupción aquí en nuestra operación segura y luego vamos a probar la creación de otro auto ficticio. Entonces voy a ver Enviar. Y entonces nuestra operación de guardar salta a la acción. Entonces cuando miro el nombre, veamos qué nombre hay ahí. Déjame solo hacer F 11 y luego usuario, mientras que el usuario es nulo porque nadie ha iniciado sesión. De acuerdo, así que por eso el usuario sigue siendo novedoso, pero eso está bien. Entonces cuando miro las entradas, quiero decir sólo hacer F 11. Entonces cuando veamos las entradas, vamos a poder ver que tenemos esta única entrada siendo agregada, C, ese es un estado que se está agregando. De acuerdo, se puede tratar de descomponer, pero una vez más, todo a este nivel, es muy genérico, por lo que no va a mostrar nada específico ni a específico, razón por la que tuvimos que hacer todo este encasillador a llegar a estaño. Pero sólo voy a presionar F5. Sigamos. Y luego cuando miro resultados, ves auto ficticio y datos. Sabemos c, nuestra D, está regresando. Entonces no proporcioné ningún bit, pero las fechas están regresando porque fueron puestas automáticamente por nuestro código y actualizadas por, y creadas por nuestro nulo. Porque hasta donde se ha ido, los remitentes y todos los usuarios asociados a la solicitud, la solicitud simplemente escatimando. De acuerdo, así que esa es una de las formas en que automatizamos nuestro registro y registro de auditoría, lo siento, con la unidad de patrones de trabajo. Por lo que en esta coyuntura, hemos hecho algunas cosas muy críticas. Contamos con una implementada o unidades de cuentas de trabajo. Te he mostrado cómo hacerlo por uno en una mesa, pero ya establecimos que esta i unidad de sección de trabajo es realmente como un padrón. Entonces lo que sea que acabemos de hacer por el uno, podemos replicarlo a través de los demás. Para la unidad de trabajo, hay que hacer lo mismo aquí para vehículos, para modelos donde quiera, aunque uno. Y no necesitamos volver a la startup porque ya nos ocupamos de nuestra inyección ahí. Entonces eso está bien. Ni siquiera tenemos que hacer nada más ahí. Y más o menos si lo rascas otros controladores, entonces hay que refactorizarlos. De lo contrario, si no te has estropeado a los demás, entonces te sugeriría que cuando hagas app.controller, creas un controlador API solo con la lectura, escribe acciones para que probablemente hagamos y difíciles de hacer tanto trabajo lo que haces con el Entity Framework y acaba de hacer algunos cambios entonces eso no es problema también. Entonces te voy a desafiar a que hagas eso en el próximo video, vamos a volver y solo voy a comparar notas contigo solo para asegurarte de que te muestren lo que hice. Y así solo puedes mirar a lo que agregué y asegurarte de que estás en el camino correcto. 21. Refactor existentes para utilizar la unidad de trabajo: comparar las notas: Oigan chicos, bienvenidos de nuevo. Entonces los dejé con bastante tarea la última vez, pero estamos aquí sólo para comparar notas y sólo voy a señalar ciertas cosas que estoy seguro que han conseguido si no lo hicieron pero estamos aquí sólo para comparar notas y sólo voy a señalar , entonces no hay problema. Te los señalaré y podrás seguir adelante y completar la actividad. Entonces lo que te había mostrado era una configuración para las unidades son, y sólo lo hicimos dentro del contexto de la mesa de mezclas. Por lo que inicialmente, sólo habríamos tenido 11 cosa, cotización unquote registradas en estas unidades de interfaz de trabajo. Por lo que nos adelantamos y registramos todos los demás para modelo de vehículo, libro de colores, Rey, cliente, y cualquier otro objeto de dominio. Ahora puede que tengas la necesidad de incluir, puedes seguir adelante y solo continuar con esta lista. Además de eso en la clase concreta, quien tendría que hacer nuestros campos privados correspondientes para esos. Entonces make, agregamos mic, Boa para cumplir para modelos, colores, reservas, etcétera. Y entonces por supuesto tuvimos que hacer tipo de inicialización de los objetos públicos, ¿no? Entonces tipo de espacio que es desenfrenado de asumir para que puedas verlos todos más fácilmente, ¿verdad? Entonces de la misma forma que hicimos, literalmente acabo de copiar y pegar y luego simplemente cambié el micrófono a modelo y el texto correspondiente. Eso es realmente todo lo que necesitaba hacerse y está fuertemente tipado. Entonces si cometieras un error, verías una línea roja. Entonces eso es lo que hicimos para la unidad concreta de implementación de trabajo. Ahora, después de hacer todo eso, seguí adelante y andamié todos los demás controladores. Entonces ves en los controles ves reservas, colores, clientes, modelos, y vehículos que creamos mezclan juntos. Y para ser honesto, todo lo que hice fue copiar la mayor parte del código del controlador de mezcla y luego pasar a modelos y luego pegarlo y luego terminé controlando F, donde busqué cualquier cosa en este documento actual que dijo Mick y yo lo cambiamos a modelo C o bien, Ken Pienta y modelo. Está bien, y eso es todo lo que hice. Y luego reemplazar porque lo que pasa es que ya tenemos la unidad de trabajo. Si dijera conseguirme x, entonces después de hacer esto, reemplazar sabría, digamos conseguir modelos, si hubieras dicho hace aquí ahora va a ver modelos. Todo sólo cambia esos AS incluso las variables. Ahora si m mayúscula es que se ofrece pocas consecuencias del gran esquema de las cosas. Entonces solo te estoy mostrando que, ya sabes, si trabajaste, ellos no hicieron la copia y basados y así sucesivamente, eso está bien. A lo mejor querías hacerlo para conseguir su experiencia y eso es bueno. No hay problema. Ya lo empezaremos ahí. Solo estoy compartiendo con ustedes Hawaii tipo de procedimiento acelerado. Entonces si es yo no estás terminado con la operación y te parece tedioso, entonces esa es una pista. Para ayudarte a llevar eso más rápido. Para la raíz, solo recuerda que no estamos usando barra de API. Sonya los estropeó, obtendrías controlador api slash. Por lo que pasé y me aseguré de que tuviera que llamar a la API slash Alltop, todos ellos. Por lo que también sólo dicen controlador. ¿ Está bien? Y eso es más o menos para nuestra API de descanso. No hay mucho que tengamos que hacer son mucho más que tenemos que hacer aquí. En este punto, está bien preparado y listo para servir a nuestra aplicación cliente de Asamblea Web. Y así en el siguiente video, solo llegaremos a nuestro punto de control donde vamos adelante y revisaremos nuestro código. 22. Revisar y añadir cambios a GitHub: ¿ Son todos ustedes? Hemos llegado al final de esta sección donde pasamos nuestro tiempo preparando nuestra API de descanso para atender a nuestra aplicación cliente. Lo que hicimos fue asegurarnos de que probamos o puntos finales. Creamos un endpoints que hablaba directamente a la base de datos y la vimos funcionar. Pero luego tuvimos una discusión en torno a por qué es bueno implementar otros patrones encima de lo que es andamio para nosotros fuera de la caja. Y esa razón, la razón de eso realmente fue para la mantenibilidad y ciertos tipos de automatización que podemos poner en el futuro. Por lo que el arma de elección fue la unidad de trabajo encima del patrón genérico Repositorio, donde tenemos el repositorio genérico que se está implementando para ser, como sugiere la palabra, ese genérico. Entonces nosotros, no lo estamos escribiendo fuertemente a ninguna clase, sino a cualquier tipo de clase que sea su ayuno, tenemos estas operaciones que se pueden realizar en consecuencia. Y luego encima de eso tenemos la unidad de trabajo donde registramos las diferentes implementaciones son las fuertes y las implementaciones mecanografiadas de ese repositorio genérico. Y eso nos permite hacerles llamadas a voluntad. También miramos a personalizar el método onreceive, donde podemos seguir adelante e inyectar nuestros contextos HTTP, permitiéndonos conseguir al usuario que está realizando una operación. Y luego revisamos metódicamente todos los registros, un barco a tamizar, y comprobamos cuál se modifica, cuál se está agregando, y fijamos esos valores de auditoría en consecuencia todo antes del pico guardar. Después de ver todo eso, nos aseguramos de registrarlo en nuestro archivo de inicio, modo que eso permite que se inyecte en cualquier otra parte de la aplicación. Y en particular, estamos mirando a nuestros controladores donde refactorizamos el que lo scufamos para luego usar la unidad de trabajo en contraposición a hablar directamente con el contexto de la base de datos de la aplicación. Siguiendo este ejemplo, nos andamios se crean controladores para cada otro punto de acceso a datos que pudiéramos tener en adelante. Ese es el estándar que estaremos utilizando en caso de que necesitemos ampliar esta aplicación. Entonces en este punto, sólo vamos a seguir adelante y revisar todos nuestros cambios para que yo pueda traer consigo cambios algunos no lo ven aquí. Lo que voy a hacer es simplemente ir a View y son buenos cambios. Entonces desde aquí escribo mi misil y es un sencillo editor de mensajes, endpoints API y la unidad de patrón de trabajo. Y luego seguir adelante y comprometer todo y sincronizar. Y en ese punto tenemos nuestros bits de código actualizados. Entonces nos vemos en la siguiente lección. 23. Resumen de la sección: trabajar con Blazor y datos: Oigan chicos, bienvenidos de nuevo. Yo solo quería darte una visión rápida de lo que estaremos haciendo en este apartado. Por lo que tengo abiertos los componentes de datos de fetch que habrían venido como parte de la alguna aplicación a partir de la creación de este blazer proyectos. Entonces solo quería señalar algunas cosas y darnos sinopsis de lo que estaremos cubriendo en toda esta sección donde estaremos hablando de usar blazer para comunicarnos con nuestra API y manipular los datos en consecuencia. Por lo que esta fetch data arrays o componente uno, representa un componente similar a lo que estaremos creando. Ya pasamos un poco por cómo creamos un componente o alguna filtración y nuestra compartida y todas estas cosas. Entonces nosotros, tenemos una idea básica de los objetivos de creación de componentes enteros. Pero en lo que probablemente no nos enfocamos fue en lo que estaba sucediendo dentro de los datos de Fichte donde estamos autorizando uno. Por lo que viste que cuando intentamos navegar para buscar datos, tenemos que iniciar sesión para poder proceder. Esa es una. Bueno entonces te das cuenta de que también estamos inyectando este nuevo bit de código llamado cliente HTTP. Conoce este cliente HTTP solo representa una biblioteca. Y la forma en que habrías visto las configuraciones para este cliente HTTP por aquí en nuestro program.cs. Y está configurado para mirar el proyecto del servidor, la API del servidor como su dirección. De acuerdo, así que en otras palabras, va a estar mirando por encima de la API automáticamente. Por lo que el cliente HTTP está configurado para mirar la API que se nos da a través del proyecto de servidor. Y entonces este objeto nos permite aprovechar algunas de las funciones que nos permiten interactuar con el resto API. Entonces solo voy a saltar a la última parte del código donde lo que está haciendo es inicializar, ya sabes, una lista de datos que tomar picos. Y luego cuando se inicialice, va a tratar de recuperar a través de nuestro objeto cliente HTTP. Y luego tiene funciones incorporadas para todos los verbos que pasamos en la API. Ellos consiguen el puesto, El puesto, todos esos que estaríamos mirando. Y luego fue C darse cuenta de que datos JSON que vimos de cartero de nuestras pruebas. Vas a serializar cualquier dato que vuelva a entrar en la clase coincidente. Hasta el momento, todos los nombres de campo que mucho en realidad llenará el, esta clase y sólo recuperará todo eso en forma de estos objetos y los almacenará en pronósticos, que vemos sólo una recopilación de los datos que regresan del Llamada API. Ahora lo que está por aquí en la cadena sería la dirección que causará un pronóstico del tiempo aquí corresponde con el controlador de pronóstico del tiempo en la API. Entonces nuestra subvención HTTP significa que las solicitudes GET y vemos, vemos nuestro verbo, HTTP GET, que en realidad solo está devolviendo algunas cosas aleatorias en forma de matriz. Muy bien, entonces eso es realmente una sinopsis de todo. En realidad vamos a dejar que los componentes blazer hablen con el resto API. puede ver que realmente no es tan difícil. Entonces, cuando regresemos, empezaremos creando un componente de lista donde podremos enumerar todos los datos de la base de datos en un pH blazer y mostrados a los datos. Y luego miramos todas las demás operaciones de crud. 24. Datos de exhibición Blazor: Oigan chicos, bienvenidos de nuevo. Por lo que siguiendo nuestra rápida visión general de esta sección, vamos a saltar directamente a ella y vamos a ver cómo podemos crear un componente que enumerará los datos de nuestra base de datos. Por lo que siempre es una buena idea que tipo de organizar tus archivos en carpetas como lo hemos estado haciendo hasta la nariz. Por lo que voy a empezar con la página es partes del auto y el proyecto de cliente punto de gestión. Y voy a crear una carpeta a la que voy a llamar que empiece con micros. Entonces por supuesto, querrías tener la capacidad de ver todos los archivos por tabla en tu base de datos con algunas excepciones, ¿verdad? Pero el punto es que tenemos reservas, tenemos colores, tenemos clientes de mix, tenemos modelos, tenemos vehículos. Entonces eso significa que para todas las operaciones crud que vamos a estar haciendo, vamos a querer hacerlas a través de cada uno de estos tipos de datos. Por lo que quisiera tipo de agrupar todos los componentes relacionados por tabla o por conjunto de operaciones en una carpeta. Entonces si tengo una carpeta de mezcla, entonces voy a tener una carpeta de modelo y así sucesivamente. Entonces solo voy a seguir adelante y crear toda la carpeta. De acuerdo, así que ese es el tipo de organización que voy a estar manteniendo. Conoce para esta sección, voy a hacer dos ejemplos. Vamos a hacer un ejemplo con la mezcla, que es simplemente suficiente porque ya sabes, realmente sólo tiene algunos campos de todos modos. Y luego vamos a hacer uno con tal vez algo más complicado como vehículos, que tiene entidades relacionadas, ¿verdad? Entonces fui a hacer esos dos. Y entonces por supuesto, ya sabes, nuestro patrón es que te muestro el concepto y luego lo intentas por tu cuenta, y luego volveremos a comparar notas. Entonces vamos a meternos en ello. Entonces en esta lección, una vez más, estamos mirando pasillo vamos a recuperar datos y mostrar en una lista o en forma de tabla para nuestra forma tabular para nuestros usuarios. Por lo que empezamos creando nuestros nuevos componentes. Entonces empiezo con mix, voy a crear un nuevo componente de maquinilla de afeitar. Entonces voy a llamar a estos componentes lo que creo que debe llamarse el pH. Por lo que quería llamarlo índice. Está bien. Siempre es, en realidad, voy a decir que es recomendable pensar que realmente se requiere. Pero yo soy, si no se requiere, los lambdas recomendando que siempre nombremos o componentes con mayúsculas. Está bien, Así que índice como epitelio, voy adelante y golpeo OK. Y ahora tenemos nuestro componente. Ya hemos visto componentes antes. Ya lo miramos cuando hicimos nuestro componente de muestra más temprano. Entonces esto no es nada nuevo para nosotros. No obstante, vamos a tratar de asegurarnos de que nuestra raíz hay alguien que diga en la página de signos abrir y cerrar comillas? Y este, sólo voy a ver la mezcla de slash, lo que significa que cualquiera que navege y diga slash mix debería poder golpear este componente. Y todo lo que voy a asegurarme de hacer es inyectar a nuestro cliente HTTP. Entonces sólo volviendo a buscar datos, se ve que para inyectar cliente HTTP en el agujero, en el, en el componente para que pudieran hablar con la API. Entonces definitivamente necesitamos eso. También podemos buscar inyectar algunos de estos, pero que están poniendo estos usando declaraciones como si definitivamente vamos a necesitar acceso a lo cizallado. Y van a significar sexual y qué no sólo te mostramos cómo hacer eso de una manera más limpia, más global. Por lo que no tenemos que hacer esto cada vez que lo necesitamos en cada componente. Entonces voy a empezar con la inyección. Y estoy llamando a mis clientes un subrayado, Esa es mi convención de nomenclatura, pero, ya sabes, puedes nombrarlo lo que sea que te sientas más cómodo con nombrarlo. Yo quería cambiar este título h3 para ser de título de tarjeta de clase. Y voy a cambiar el texto para decir Hacer lista arte o, ya sabes, probablemente lista de mezcla. Nuestro auto hace algo que el usuario lo siento, sólo me están invitando por esas pequeñas cosas. Y quiero decir, podemos trabajar en ciertos elementos de diseño. Podría tener todas las ideas en mente, pero sólo estoy poniendo en estos elementos agradable que la regla horizontal y luego un punto de ruptura, nuestra etiqueta de ruptura, lo siento, para separar el título en la parte superior del resto del contenido. Sepan en lo que me voy a centrar es en lo que estamos poniendo en el código. Por lo que voy a empezar en esta sección judicial. Lo que tenemos que hacer es por adelantado ver que tenemos un modelo de pH sobre qué tipo de datos es. Entonces voy a decir privado. Y como estoy lidiando con micrófonos y no soy ni una lista de mix, voy a inicializar lista de tipo mic, ¿verdad? Aviso mic not mix cosmic es el tipo de datos de la tabla con la que estamos tratando, ¿verdad? Tan manso. Y entonces sólo voy a llamar al modelo de objetos. Podrías llamarlo hace, podrías llamarlo como me guste llamarlo modelo porque ese es el modelo para el Peach. Ahora voy a hacer es dar una flecha porque una vez más, necesito sentarme en las declaraciones de uso para que sepa de dónde puede hacer referencia a esto. Entonces en lugar de hacerlo de la manera que acabo de señalar, los datos de Fitch lo están haciendo donde está haciendo la declaración de uso directamente dentro del componente. Lo que voy a hacer es bajar a las importaciones. Y luego desde aquí puedo establecer algún tipo de global usando declaraciones, ¿verdad? Por lo que puedo ver aquí abajo usando la gestión actual acoplado, dominio de punto esquilado. Y luego al hacer eso, cualquier componente que requiera algo de dominio sabrá que mientras ya está en la importación. Entonces no tengo que venir aquí a verlo de nuevo. Entonces lo hice una vez. Yo sólo lo estoy haciendo en este componente, pero en el futuro te darás cuenta de que no tienes que volver a hacer esa parte. De acuerdo, así que ahora que tenemos definido nuestro modelo, lo que queremos hacer es carne fuera nuestro protegido es sumidero anular, anular tarea. Y esta tarea Eso es un múltiplo pero no te preocupes, lo hará se llama asincrónico no inicializado. Entonces ese es un método incorporado que cada componente ha no inicializado asíncrono. ¿ Qué quieres que haga cuando me inicialice? Eso es más o menos. Observe que es una anulación. Entonces la clase base sobre la que se basa cada componente, justo ahí está. Componente b es. Lo sentimos, componente de tarea basado en asincrónico inicializado. Entonces estamos anulando el predeterminado y vamos a decir qué queremos hacer cuando se inicialice este componente. Lo que quería hacer, quiero conseguir el almacenamiento de datos y los modelos. Entonces voy a decir que una modelo es igual y entonces puedo, esperaré, mi cliente haciendo una llamada. Por lo que el cliente, el cliente HTTP tiene el método incorporado. Por lo que puedo decir conseguir de JSON un fregadero. Está bien, es, automáticamente va a ir y desserializar lo que sea que esté recibiendo. Entonces, ¿qué está consiguiendo? Salga a especificar qué tipo de valor espero obtener. Entonces quería decir, bueno, espero conseguir una lista de tipo mic. Está bien, entonces eso va a decir, vale, quieres listar fuera del micrófono, dónde lo quieres de soft para poner en la dirección del lugar que esperaba. Y abordan sería el punto final. Entonces recuerda que cuando miramos el program.cs, ya se instaló el cliente HTTP para mirar la dirección base de nuestra aplicación, ¿verdad? Dirección base, es decir, ¿cuál es la dirección? Por lo tanto, ten en cuenta que el servidor y el cliente, ambos comparten la misma dirección por si has olvidado lawn settings.js en host local para 4385. Y si hacemos lo mismo por el servidor, es la misma dirección. Entonces la dirección base, sabe dónde está la API. No obstante, tenemos que decirle qué API de offset de endpoint. Y luego basado en nuestro nombramiento aquí, que sí creo que va a causar un conflicto. Por lo que probablemente vamos a tener que cambiarte, pero vamos a empezar a ver el error y no lo arreglamos después. Pero sí dijimos que endpoint deberían ser los nombres de los controladores, que en este caso significa que hace es donde quiero ir. ¿ Dónde se prueban API y miraron todos esos endpoints sin embargo. Entonces voy a ver, ir al endpoint hace. Entonces esto, este componente, una vez inicializado, va a hacer esta llamada API a esa dirección y obtener la lista. Y sabemos que va a volver en JSON. Por lo que esta función o este método va a reconstruir automáticamente los datos JSON en una lista de mí, teclear fuertemente, fuertemente tipado, lo siento, para que podamos usarlo y manipularlo todo lo que deseamos. Está bien, así que esto casi se ocupa de esa API, me conseguirá la lista de marcas en la base de datos y las almacenó aquí dentro de este objeto llamado modelo. Entonces no, ¿cómo exhibes todo esto, verdad? Voy a ver en primer lugar, si modelo outside-in son, lo siento, no necesito que eso me salvó el culo. Entonces si el modelo es equivalente a null, entonces quiero mostrar algo viendo cargando o se va a poner en un div. Y voy a darle esa clase va, recuerda que estamos usando Bootstrap, así que alerta y alértame para que esté en su totalidad. Alerta en su totalidad. Creo que lo pasé. Ahí vamos. Y luego voy a decir que la carga hace que la mezcla de carga. Eso es azul, cualquiera que sea el mensaje de carga que quieras. Entonces el punto es que siempre vamos a empezar vacíos. Esto va a ser nulo porque esto significa que es nulo. Pero luego una vez que esto se complete, entonces queremos mostrar una tabla. Entonces esto va a ser. Se muestra mientras todo esto está pasando, mucho tiempo que se tarda en ir a la API, esto se mostrará. Entonces cambia lo fresco de los blazers que quiere los datos. Envía un mensaje de vuelta a la UI para decir: Oye, ya sabes lo que cambiaron los datos. Entonces el mero pensamiento, eso es otra vez esos, ya sabes, está monitoreando cuando estos datos cambian, puedo ver si es nulo, haz eso. Y entonces cuando cambie , siempre reevaluará es lo normal. No, no lo es. De acuerdo, ¿qué debo hacer aquí? ¿ Verdad? Por lo que es casi como un bucle while sin el bucle, es tan genial. Muy bien, entonces lo que vamos a hacer ese punto es C, Quieres una mesa tal vez. Y luego estoy usando clases de Bootstrap para mi mesa. Entonces voy a establecer esto para tener mesa y mesa que sea receptiva. Y si no estás tan familiarizado con Bootstrap, podemos ver las otras que probablemente quieras incluir, pero quería pegar la mesa responsive y tal vez SM Bueno, no, déjame solo darte esa mesa y distribuidor responsive. Y luego definir sostener esta tabla debe lucir así que tenemos nuestra cabeza T, que tiene un TR, que luego tiene el th es voy a tener th por nombre como en MC, nombre, solo buscando micrófono de respaldo, make really o layer name and id id basado en el modelo de dominio basado y creado por un número esloveno de detalles que quieres incluir conseguir a través de ellos en este momento solo necesito el nombre y voy a tener otra columna llamada subastas, que va a albergar, ya sabes, editar botones, borrar bonos, etcétera. Entonces después de definir la cabeza, me voy a poner el cuerpo de TI. Y luego en el cuerpo del equipo es donde hacemos la parte divertida donde tenemos que recorrer nuestros datos, regresando, ya sabes, modelo que sabemos es de tipo, lista fuera mezcla, ¿verdad? Entonces voy a decir por cada ítem en modelo, quiero un nuevo rol, TR, con la primera celda siendo jugando a casa a item.name. Está bien, así que ya ves que estoy renunciando a todos los objetos porque el móvil es de tipo, make. Cada artículo representa al fabricante lo. Y luego quería tener otra T d, lo siento, en la misma regla, que luego va a guardar todos mis botones. Ahora así es como quiero que se vean mis botones. Quiero etiquetas de anclaje. Tengo dos etiquetas de anclaje encendidas, tengo un botón para que puedas pausar, echar un vistazo a lo que es este código, y luego continuar. Muy bien, entonces mi primera etiqueta de anclaje tiene el HRF para ir a mezclar vista de barra, ¿verdad? Entonces vamos a estar montando todos esos, pero éste significaría que quiero mirar los detalles de este disco. Por lo que creo el botón de vista y estoy pasando al Item ID. Este quiere decir que quiero editar tal vez. Por lo que estoy pasando el DNI. Este es el delete, pero nota que no es una etiqueta de ancla, es un botón. Todos están usando las mismas clases de Bootstrap. Shore son sólo variaciones basadas en la operación. Pero entonces el botón tiene un evento onclick. Por lo que si alguna vez has trabajado con parques eólicos o incluso foros web, estarías acostumbrado a hacer clic en eventos. Entonces esto es como un pequeño evento click donde se va a ver que quiero llamar a esta función llamada delete y PaaS en el make dot ID. Está bien, lo siento, le pegué. Está bien. De acuerdo, tenía micrófono. El punto es que probablemente quieras hacer esto porque, ya sabes, cuando estás viendo modelo, cuando estoy viendo mod 2, tenían 10 o 12 esto. Entonces hagámoslo un poco más fácil de usar, ¿verdad? Entonces esta es una lista de mezcla. Todos los micros entran y hacen eso. Y entonces en cualquier lugar dije mod lambda me va a ver x en su lugar. Está bien, y luego en lugar de ver el ítem porque ya sabes, el código cuando es gran ventaja que puede ser más difícil de leer para alguien más que lo mire. Así que hagámoslo lo lo más fácil posible para el lector. Entonces cambiando todo lo vago o por ejemplo, el ítem en modelo para decir algo más como yo. De acuerdo, así que haz dot ID y luego tenemos nuestra referencia de método de eliminación aquí, pero no hay método de eliminación para llamar. Entonces lo que quiero es que cuando la persona hace clic en eliminar, cuando el usuario hace clic en eliminar, simplemente les damos un rápido prompt. Estás seguro de que quieres eliminar y luego si dicen que sí, entonces vamos adelante y no comimos, ¿verdad? Entonces necesito una metadona aquí que voy a definir como una tarea asíncrona. Y se va a borrar o, y voy a hacer que tome un parámetro int id. Está bien, ahora qué queremos que diga este método de eliminación, así que eso desaparece porque estoy llamando a un método. Simplemente no lo vio todavía. Sepa que está ahí. Está bien con eso. Correcto. Y eso lo convirtió en un fregadero. Ya ves por qué en un minuto. Y note que no necesito un modificador de acceso porque podría ser privado. Realmente no tiene sentido. Lo haces público. Pero en ausencia de ver privado, implica que esto es privado. Entonces no necesitaste esa parte. Por lo que quería buscar el micrófono. Voy a decir var MC es igual a la y ya tengo menos off mix. Entonces, aquí hay una cosa genial. Ya conozco la mezcla. Ahí está la audiencia, el componente. No tengo que ir y hacer que una API modelo lo llame para recuperar el mito que hay que eliminar. Entonces solo puedo mirar en la lista que ya tiene y decir dame la primera que quieren sentarse para una tienda, para una tienda por defecto. Yo solo hago primero y veré mi expresión lambda. Intentemos eso otra vez. En primer lugar, donde Q dot ID es equivalente al ID de micrófono que apenas estaba reventando el parámetro que vino de nuestro evento click de botón contra ese registro en particular en toda esta tabla. Entonces ves que todo se contradice hermosamente. Entonces voy a decir si quiero obtener una confirmación del usuario, así que vamos a hacerlo en primer lugar, sin confirmación, Echemos un vistazo a un código sin confirmación. Entonces después de hacer esto, puedo decir esperar una llamada de cliente para eliminar un fregadero. Eso dijo. Entonces, para cada verbo, el cliente HTTP tiene un método. ¿ Está bien? Y entonces voy a estar llamando a mi mezcla. Por lo que quiero llamar mix slash va, recuerda ese es el nombre del endpoint. ¿ Verdad? Hace slash y hace que para la eliminación tomó un parámetro. Entonces, sólo volvamos atrás y miremos. Entonces tomamos un parámetro para nuestro delete, por lo que tiene que pasar en mix slash Fiverr. Por lo que voy a decir hace slash y luego poner en el Manso ID que fue pasado. Y luego Va a recordar el método asincrónico inicializado. Y porque estamos usando nuestros pesos, Es por eso que hicimos este método Arte asincrónico. Entonces básicamente borramos y luego se va a refrescar la página. Ahora sí dije que quería preguntar al usuario porque no quieres que el usuario elimine. Y acabo de refrescar y están como, Bueno, ¿en qué pinché? Entonces todo lo que vamos a hacer es probablemente poner un poco de prontitud. Y ya sabes, como en JavaScript siempre puedes ver como alerta, algo así. Nosotros vamos a hacer eso. Vamos a poner una alerta o un prompt de JavaScript. Para poder interrumpir con JavaScript a través de blazer, tenemos que, tenemos que inyectar otra biblioteca llamada IGS runtime o JS interrupt. Esa es la tecnología o la biblioteca detrás de este JS Runtime. Entonces con este objeto, podemos saber interactuar con algún código JavaScript en el uso de C-sharp. Es solo, tengo una buena manera híbrida de no duros los huesos son propensos a muchos lenguajes a lograr usando todos ellos, ¿verdad? Entonces voy a decir si, y vamos a ir a menudo, voy a esperar, JS dot invocar un fregadero, ¿verdad? Y espero un booleano, así que voy a decirle que estás esperando un booleano después de hacer esta invocación. Y dentro de este método hace métodos. Entonces después de los corchetes angulares con bool, simplemente abrimos y cerramos paréntesis. Tengo el primer parámetro, que es ver a qué tipo de método de JavaScript se supone que llame. Prácticamente qué parámetros se necesitan para los métodos SCID. Entonces confirme, ese es el método que estaban llamando. Y luego estoy pasando el texto, ¿quieres borrar y, um, esos super o interpolante micro nombre de punto ahí dentro. Está bien. Entonces esta es una declaración if. Entonces si sí o no, así confirmar va a ser sí o no, por lo que está esperando la respuesta y la está almacenando ahí. Entonces todo ese oxígeno, para que un híbrido, cada afirmación, simplemente escribiéndolo en una línea. Si quisieras separarlo, podrías decir var decisión o var confirmar es igual a, déjame solo poner que ahí desde AHORA es igual a este gen está involucrado para que ya sabes, puedes un poco pseudo código un poco más, ¿verdad? Y luego si confirman, entonces llamamos, de acuerdo, así que eso es más o menos lo que no. Y ese es un ejemplo sencillo, muy sencillo de todas las corridas js interrupt. Posteriormente veremos formas más avanzadas y probablemente más bellas de hacer esto. Pero por nulo, hemos hecho bastante. Vayamos a probar. Creo que ya habíamos puesto alguna mezcla en nuestra base de datos, si no me equivoco, correcto, así que deberíamos tener al menos unos cuantos mix para ver. Entonces veamos cómo funciona esto. Entonces acabo de cargarlo y me doy cuenta de que no tengo manera inmediata de llegar. Entonces vamos a buck chuck up bit y asegurarnos de que actualicemos nuestra barra de navegación. Sáltate ese paso. Entonces lo que voy a hacer es deshacerme de esta página de muestra e incluso los datos de fetch eran realmente no los necesito. A lo que quería empezar cambiando los datos de fetch, voy a decir Meeks, ¿de acuerdo? Y H ref aquí estaría mezclado con una tira, ¿verdad? Entonces eso es decir Entra a la tira slash de la carpeta de mezclas y luego ya nos dicen el índice que estás en esa dirección, más o menos, ¿verdad? Por lo que esto sólo reinicia. Muy bien, Así que no hay forma de nuestro elemento de menú si vamos allá, va a empezar a cargar lo que va a dar un error. Este error realmente se debe a que estamos tratando de hacer esa llamada API con la autorización de seguridad adecuada así como Luke. Por lo que sí aludió al hecho de que podríamos necesitar cambiar o dirección para la API. Entonces esto en realidad es ver mezcla de slash. ¿ Qué le dijimos al componente que también es un arrebatarme x. entonces cuando escribir mi inicial o mal donde hubiera sugerido que simplemente vayamos por el controlador. Porque lo que pasa es que si volvemos al controlador y luego nombramos a nuestras carpetas los mismos nombres, entonces los ascendentes se confunden. ¿ Voy a mezclar en el servidor y la BIA o voy a ello en un cliente? Entonces para las medidas correctivas y eso es sólo re, ¿son esos Roebuck, nuestro estándar para la API, controlador api slash, ¿verdad? Y quiero hacer esto de una manera bastante simple donde sólo voy a hacer un hallazgo y reemplazar. Entonces solo voy a decir encontrar corchetes corchetes de controlador de corchete cuadrado y reemplazarlo con api slash. Corchete cuadrado. Y estoy buscando en el proyecto actual y solo voy a reemplazar uno a la vez para asegurarme de que no lo haga así que no necesito reemplazar ese. Pero sí necesito reemplazar esto. Omita o así otros. Sí, cualquier cosa que necesite ser reemplazada, solo haré eso. Y deberíamos ser buenos para ir tras estos mensajes. Está bien, así que solo estoy señalando un aula potencial, no potencial a un enamoramiento que nos encontramos. Y podemos dejar el clima uno porque realmente no lo necesitamos de todos modos, y eso es todo. Entonces otra cosa, otro cambio de ellos se me pasó ruido a la dirección API que se está llamando porque sólo dije micrófonos. Entonces necesito ver api slash aquí arriba y api slash en este punto. Entonces hagámoslo otra vez. No, otro punto de información antes de continuar. Si bien no pusimos ninguna autorización en nuestra opinión sobre nuestros componentes, Lo sentimos, tampoco pusimos a ningún autor como en la API, ¿verdad? Pero en realidad nos lo quitamos. El asunto sin embargo es que la configuración del cliente HTTP en la aplicación cliente y program.cs sí dice que necesita autorizaciones, por lo que eso significa que siempre intentará símbolo autorizará voluntad. Y solo está configurado para saber que debe ser una llamada autorizada, lo que significa que quien esté llamando debe estar conectado. Entonces si bien no pusimos la protección en la página, podría no funcionar porque va a intentar hacer una llamada autorizada. Está bien, Ahí vamos. Entonces si bien no nos está mostrando las cosas de la API, lo arreglaremos, pero aún tenemos un problema. Entonces es un problema lo suficientemente simple como para conseguir el nuestro porque ya tenemos algunos usuarios que creamos. Entonces yo un poco lento. Y después habiendo ingresado, voy a intentarlo de nuevo y ahí vamos. Por lo que rápidamente hizo esa llamada. Bueno, quiero decir, todo está sentado en una máquina y lo alma el fondo que se emite en la llamada API y regresó es transparente para el usuario. Entonces aquí estamos mirando todas nuestras tarjetas, estamos, lo siento, nuestros Meeks en la base de datos, ¿verdad? Y luego si quería eliminar, ya que esa es la única otra funcionalidad del sistema hasta el momento. De nuevo, prueba eso. Obtengo la confirmación. ¿ Quieres eliminar auto ficticio? Doy click Ok, y luego miro eso. Entonces es como si todo estuviera sucediendo en tiempo real. No hay recarga real visible ni nada por el estilo. Puedo seguir adelante y borrar el otro auto ficticio y tenemos nuestros datos. Por lo que cualquier cambio cosmético que quieras hacer en este punto puedes hacer y así sucesivamente. Pero este es el básico, esos son los pasos básicos para conseguir la lista y mostrarla en forma tabular. 25. Datos de exhibición Blazor: Oigan chicos, bienvenidos de nuevo. Entonces, en nuestra lección anterior, caminamos por la configuración de la interfaz de usuario de tal manera que podamos recuperar datos de la API y mostrarlos a nuestros usuarios? No, solo quería guiarte a través de algunos de los minuciosos cambios que hice en el discurso del micrófono. Y luego te guiaré por cómo transferimos el conocimiento de lo que acabamos de hacer desde el componente de mezcla como componente de pH. estoy usando indistintamente en este punto. Pero todas las técnicas y vamos a querer grabar quién puso en marcha para que funcione la interfaz de usuario de mezcla. Yo quería estar caminando a través de cómo espero que transfiriéramos ese conocimiento o podamos transferir ese conocimiento a las otras partes de nuestra aplicación. Ahora solo me echas de menos critiquing mix y luego te das cuenta de que fue directo a la página de inicio de sesión. ¿ Por qué hizo eso? Entonces lo primero que hice fue agregar un atributo autorizado tog o Flagler a la parte superior de nuestra página de mezclas, derecha. Entonces solo lo estoy mencionando. Por lo que dije atributos autorizados. Entonces recuerda que señalamos que cada vez que se realiza la llamada API, necesita tener cierto tipo de herramienta lata lo que indica que es usuario no autorizado quien está realizando esta llamada. Entonces yo solo, al poner esto en la parte superior, estos atributos autorizados en la parte superior de la UI. Es enviando la UI que tienes que estar autorizado para poder acceder a esto. Y esto es lo que pasó en las Fechadas son componente, razón por la cual tenemos que iniciar sesión antes de poder proceder a llegar a la fecha de fin. Entonces solo pongo eso para asegurarnos de que evitamos una institución de cualquiera tendencia a cargar esta página y conseguir ese error cuando todo lo que realmente necesitan hacer es iniciar sesión. Por lo que los estamos obligando a iniciar sesión con este atributo. Y aunque el cambio que hice aquí fue para acarrear, formamos los puntos finales. Así que tuve que poner api slash mix y luego no dudes en decir api slash mix otra vez, slash MC ID. Y más o menos eso es un patrón en el tiempo. Queremos una dirección, tenemos que decir api slash la dirección. Entonces lo que hice fue crear un archivo endpoints el cual puse en una carpeta llamada estática. Por lo que creé una nueva carpeta en el proyecto del cliente llamada estática. Y luego tengo C, clase C-Sharp llamada endpoints. Entonces esta clase es una clase estática que tiene solo un montón de cadenas estáticas leídas en que podría haber hecho esto privado, pero eso está bien. Pero establecí el prefijo, que es API, que me refiero a que es aplicable para todos ellos. Y si lo cambias de API, es otra cosa, entonces solo necesitas cambiar un prefijo una vez. Pero luego para cada punto final potencial, creé otra cadena estática para que puedas pausar, hacer todo eso una vez más, crea una carpeta. Adelante y crea, lo siento, crea una carpeta llamada estática crear el archivo llamado endpoints son clase C-Sharp más bien. Y luego en esa clase, sólo podemos poner este bit de código. Y luego por supuesto, después de hacer todo eso, quieres ir a las importaciones y dejar que tu aplicación cliente sepa sobre ese espacio de nombres para que podamos usar el cruce todos los componentes cómodamente. Entonces es, esos son dos cambios que hice a la mezcla. Ahora en cuanto a transferir los conocimientos o las técnicas utilizadas en mix, y me limitaré a iniciar sesión para que puedas ver. Si miras los modelos y los colores del mirador, son más o menos lo mismo que los micros. Sólo tenían una propiedad que es nombre, ¿verdad? Entonces simplemente hice lo mismo para los modelos, eso lo mismo para los colores, ¿verdad? Por lo que teníamos la carpeta se crea desde antes. Todo lo que hice fue crear un nuevo índice. Y más o menos te aseguras de que el camino, esto es colores y todo se aseguraría de camino necesitamos las mismas bibliotecas, las mismas autorizan que estamos usando los mismos colores de título de tarjeta H3. Realmente y verdaderamente este es un código idéntico, pero por el hecho de que estamos usando el diferente endpoint. Y probablemente el verbiaje es diferente aquí y allá. Una vez más, es tu aplicación. Se puede ajustar ITO, es necesario. Solo te estoy mostrando que las mismas técnicas que se usaron para la mezcla, las podemos usar para cada otra. Está bien. Entonces con toda justicia, todo lo que hice fue copiar de mix, pegar ese archivo índice dentro de colores y dentro de modelos. Y luego hizo un Control F y encontró cada micrófono y lo reemplazó por la palabra color. Y eso lo hice tanto para mayúsculas como minúsculas solo para hacer mucho más fácil la edición. Y luego cualquier error en el camino, simplemente los limpiamos. Eso fue realmente no, estoy situación más avanzada vendría en forma de vehículos. Por lo que los clientes no es muy diferente. Es decir, ya sabes que no teníamos mucho para los clientes. Es decir, podríamos haber puesto un poco más de datos tal vez para Dan solo mete contacto de ID en dirección de correo electrónico, tal vez FirstName, apellido. Pero eso está bien. Podemos hacerlo más adelante si surge la necesidad. Pero una vez más, fue igual de fácil como lo fue para el Swan preconstruido, nuestros anteriores, excepto que hay que estar atento a las columnas que estás poniendo. Y el padre, necesitas esas columnas adicionales y todo lo demás es prácticamente igual. Y acabo de tener un ajuste menor. Entonces por supuesto querrás ser muy cuidadoso y meticuloso al hacer estás copiando y pegando porque mira, me puse descuidado con el mío. Pero es bueno que veas qué puede salir mal de cualquier manera. Entonces solo estoy asegurándome de que cualquier cosa que dijera MIX No diga clientes y pensando que dijo manso y también su cliente, ¿verdad? Y básicamente todo lo demás está en metido y en su lugar. Para que podamos seguir adelante. 1 aunque con el atributo de autorización, te dirá que necesitas una biblioteca. Olvidó mencionar eso. Y también puedes cuidar ese requisito agregando estas dos líneas a tus importaciones. Entonces no importa dónde uses al autor como, deberías estar bien. Está bien, para que puedas seguir adelante y hacer eso como estás poniendo en autorizar, conoce para las situaciones más avanzadas como donde tenemos campos relacionados. Por lo que en el caso de los vehículos y en el caso de las reservas. Está bien. Entonces, veamos las reservas. Echemos un vistazo a los vehículos por nosotros. Creo que vehículos, estoy haciendo menos cosas complicadas. Entonces en vehículos, correcto. Sabemos que tenemos o página o inyección del cliente en su propio tiempo y autorizamos. Vehículos, si no son nulos, entonces cargamos la tabla. Ahora en la mesa tengo make model y podría tener, ya sabes, color. Entonces vamos a añadir color. En realidad esto sería, bueno, no vamos a agregar color, no, pero podríamos haber tenido color del punto es que tenemos campos que necesitamos mostrar que son campos relacionados que vienen de otra tabla. Por lo que vehículo naturalmente ha hecho identificación, pero no quiero mostrar el make ID. Eso no significa nada para nadie. Aviso No estoy mostrando ninguna de las IDs. Solo estoy mostrando los nombres y los datos irrelevantes, así que tengo que decir cuál es el nombre make dot y el nombre del punto modelo. Entonces eso es lo fácil que es realmente hacer referencia a campos en la tabla relacionada, ¿verdad? Entonces solo estamos imprimiendo, pero estos campos y todo lo demás prácticamente queda en esmox como, Oh, lo sabemos, es el mismo bucle, es la misma mesa CAM mucho. Es el mismo tipo de llamada de servicio en inicializado y todo. Pero tuvimos que hacer un ajuste a los datos realmente regresa cuando llamamos a los vehículos. Entonces yendo a la API, si traigo el punto final de los vehículos y voy a la parte donde sacamos los vehículos. Entonces te darás cuenta de que hice algunos ajustes a nuestra unidad o cuatro llamadas. Está bien. Por lo que ambos olvidan vehículos y consiguen vehículo por idea solo que hicieron el mismo tiempo porque la necesidad es similar. Lo que tenemos que hacer es aprovechar el mecanismo incluye que habíamos puesto en las unidades de trabajo. Entonces recuerda, y sólo voy a hacer Control F 12, lo que me lleva a la implementación de get all. Recuerda que habíamos incluido este parámetro para una lista potencial de inclusiones. Y lo que hicimos fue decir que si el incluye NO ES nulo, entonces vamos adelante e incluimos todos los datos relacionados. Está bien, así que aquí tienes un ejemplo práctico de cómo se usa esto. Entonces lo que estoy haciendo aquí en esta llamada API es decir que cuando hago una llamada, cuando alguien hace una llamada para conseguir vehículos, solo incluye automáticamente la marca relacionada, el modelo relacionado y el color relacionado para que cuando ese vehículo vuelve, es bastante fácil para nosotros acceder a los campos relacionados son los campos de las columnas relacionadas. Está bien, así que no estoy usando colores aquí. Me podría haber disciplinado fácilmente el color, pero luego empujo el sobre para contestar cuando consiga una vista tarjeta correcta. También quiero incluir todos esos detalles y quiero incluir el listado de reservas, ¿no? Entonces recuerda una vez más, ya ves solo te estoy mostrando cómo todo está conectado. Cuando creamos nuestro modelo de vehículo, dijimos que queremos el listado de reservas son queremos saber que hay un listado de reservas. Por lo que al reservar, un vehículo lo siento, tiene muchas reservas. Si quería que se mostrara un historial de reservas en este vehículo cada vez que miro el vehículo. Entonces estoy viendo cuando recuperas ese vehículo, recuperaste esa lista de reservas, no las necesito estas cosas reservas cada vez que estoy consiguiendo todos los vehículos porque podría no haber un caso para eso, pero podrías lo puso ahí. Entonces eso es todo lo que estoy haciendo de verdad y de verdad. Entonces puede significar que es que solo rento un vehículo y mientras estamos aquí, puedes cumplir con eso. Yo sólo quería decir también a reservar, ¿verdad? Perdón por la llamada API de reserva. Está bien. Por lo que Booking tiene campos relacionados también. Entonces esto es lo que tenemos saber y lo que vamos a es modificarlo de tal manera que seamos conocidos incluyendo vehículo y cliente. Y entonces cuando estamos llamando van a dejar pasar ese parámetro entromete. Muy bien, y reserva lejana. Una vez más, cuando llegas a una reserva, es lo mismo. Tenemos nuestra expresión Lambda incluir. Entonces la razón por la que he incluido colon incluye es que en realidad tenemos bastantes parámetros que podrían pasarse. Tenemos esa expresión Lambda, tenemos la arteria o abajo tenemos las cosas incluye no quiero meter en los expertos en no quiero meterte en eso. Yo sólo quería poner en incluye. Entonces con las últimas versiones de C Sharp, en realidad podemos simplemente especificar el parámetro que queremos poner y luego poner en el valor correspondiente. Y debido a que los demás son notablemente sólo va a pasar por alto e ignorarlos de todos modos. Entonces eso es lo que queremos hacer tanto para reservas como para vehículos. Está bien, así que una vez más, cuando miramos nuestra página de índice, lo siento, cuando miramos nuestra página de índice para nuestros vehículos, así es como somos capaces de lograr esto. No, para la reserva, estoy haciendo un poco más así que sí, estoy cargando la reserva. Sí, estamos haciendo todo el resto de las cosas que sabemos. Pero entonces estoy exhibiendo al cliente que otorgó el vehículo. Una vez más, podemos agregar más detalles al registro del cliente. Yo no puse en nombre y apellido. Podemos hacer eso si quieres. Pero para Nautilus, conformarse con la idea del esmox y la información de contacto. Ponemos en la fecha de la reserva. Pondré en la duración, que pretendo significar el número de días para los que esta persona había hecho la reserva. Entonces en el bucle for, los datos que se presentan van a buscar de manera diferente. Sí, tenemos reservas. Bueno, esto debería ser reserva. Entonces déjame solo hacer ese ajuste. Si lo estoy predicando, entonces debo prácticas, ¿no? Entonces déjame solo asegurarme de que mi código esté a la altura del mismo estándar que el tiempo alentador. Tan var reserva en reservas. Y luego decimos Booking dot customer, dot-dot-dot society. muy parecido a lo que hicimos con el vehículo, el micrófono y el nombre. Entonces tenemos Booking dot date creado porque esa es la fecha, derecha. Por lo que podemos suponer con seguridad que se creó una reserva en esta fecha. Este fue el día en que es toda la fecha de reserva creada. De lo que no quiero la fecha y la hora. Yo sólo quiero la fecha. Entonces esa es la fecha. Y entonces podemos empujar esto un poco más allá por querer y formato. Esto será como una herramienta, algún formato. Por lo que generalmente me gusta tener mi día es el día o el día lo hace en el 29 o el primero o el segundo, el día, las letras, la montaña, como en nombre del mes, y se hacen el año de cuatro dígitos. Eso deben ser comillas dobles. Entonces esto sería ver algo como el 29 de mí, 2020. Eso es todo lo que queremos, nuestra fecha de exhibición. Está bien. Y luego por la duración, voy a decir que quiero la más o menos esta matemática. Podemos hacer esta matemática con fechas de vencimiento, ¿verdad? Puedo decir Booking dot date in, que sería la deidad superior porque traes pero en el auto después de que lo sacaste. Por lo que los datos lo trajeron de vuelta en mamíferos el día que tomó Ito's, no quería sumar días entre esas dos fechas y queremos echarlo a una cuerda. ¿ Todo bien? Y me acabo de dar cuenta de que en realidad necesito poner todo esto en un paréntesis grande por cómo funcionan las matrices de páginas. Entonces de la forma en que lo tenía, solo sé si solo teníamos esto entre paréntesis, entonces realmente verías este valor impreso y el punto de cadena literal para sumar estos dot dos string, que no es lo que quiero. Entonces quiero todo esto porque todo eso es un código C-Sharp. Voy a envolver todo eso entre paréntesis para que puedan ver los marcadores amarillos que fui a C- sharp cotizar, arranques y extremos. Y estoy dispuesto a poner el punto y coma dentro de esos paréntesis. Y eso es lo que me va a devolver la representación de cadena del número total de días, que será la duración. Por lo que podrías cuantificar esto, son cuantificarlo y decir duración en días si quieres, eso está bien. Y entonces todo lo demás está más o menos en consonancia con el mismo estándar. Y luego vamos un poco más allá y luego tenemos nuestros bits de código haciendo lo mismo, recuperando las reservas, haciendo toda esa lógica de borrar, y todo por adelantado. Está bien, entonces ves que no es difícil transferir ese poco de conocimiento fuera de nosotros haciéndonos fantasía con cálculos. Y tal vez solo haciendo el bit extra para asegurarnos de que obtenemos los datos relacionados, lo cual es realmente fácil para nosotros por cómo construimos la capa de acceso a datos. Aparte de eso, Es bastante básico y hoyo estándar para obtener datos de Bach de la API y sostiene una estructura que de una manera agradable, fácil de usar. Cuando volvamos, veremos cómo hacer que funcione nuestro botón de vista. Por lo que este botón persona, nuestro primer enlace en cada 10 para detalles tablas. Se, sirve para el propósito de hacer que nuestro disco exhiba por sí mismo en sus propios componentes. Entonces vamos a configurar otro componente o lo vamos a llamar vista. Y veremos cómo llegamos a menor componente, aceptamos departamento o sin usar hasta perímetro para inferir qué datos deben estar en la página. 26. Setup Create form: parte 1: Oigan chicos, bienvenidos de nuevo. Entonces vamos a pasar a crear datos en esta lección. Y la realidad es que sí, sabemos cómo vemos los datos, pero eso es realmente datos predeterminados. El hecho de la situación es que cuando los usuarios están interactuando con nuestra app, necesitan la capacidad de crear datos. Por lo que vamos a tener que darles un formulario que les permita llenarlo, enviar el almacenamiento de información y la base de datos, y mostrárselo en consecuencia. Entonces vamos a empezar con vehículos en el ejemplo anterior, empiezo con el menos complicado y luego te doy la oportunidad de hacer los más complicados. Y luego comparamos notas en esta, voy a empezar con las más complicadas y luego se puede transferir ese conocimiento al tratar con las menos complicadas. Entonces la razón por la que vamos a empezar con los vehículos es que tenemos que mostrar el micrófono, el modelo, y tenemos que mostrar la capacidad al usuario para ingresar esos puntos de datos cuando los están creando. Y ya establecimos que estos están relacionados. El, estos son puntos de datos relacionados que van de otras tablas. Por lo que evidentemente no podemos permitir que el usuario los escriba. Y tendrán que hacer listas desplegables y esas. Entonces por esas situaciones más complejas, vamos a empezar con los vehículos y luego puedes probar los demás por tu cuenta y solo comparamos notas. Ahora, notan que mi interfaz son algunos cambios. Uno, introduzco este botón o inserté este botón en el código. Y en realidad es solo un botón con btn secundario en él y un signo más. Te mostraré el código en unos pocos, pero también la mesa. Lo que hice fue quitar la clase responsive dash table de ella. Entonces ahora sólo se extiende justo a través de la pantalla de todos modos, que es más como lo que yo querría. Para que puedas cumplir eso es ajuste si así lo deseas. Pero echemos un código de búsqueda para el botón. Y aquí vemos que en realidad es solo una etiqueta de ancla. Tengo el HRF siendo igual a slash vehículos slash crea. Entonces ese es nuestro componente que necesitamos crear esta vez alrededor. Y la clase btn secundaria giró o dash plus y crear vehículos. Entonces, una vez más, es tu aplicación la que iniciaste en absoluto, sientes la necesidad de hacerlo, experimentas. Depende de ti, pero sólo seguiremos con esta alma. Lo que pasa cuando hago clic en el botón es que se pasa por dos páginas es algo, lo siento, no hay nada en el centrista, no hay nada ahí porque necesitamos seguir adelante y crear el componente al que va a navegar. Entonces empecemos con eso. Entonces por ahora estoy seguro de que sabes cómo crear un componente ya lo creó, pero justo como refresco, puedes hacer clic derecho, ir a Agregar y luego series o componente y lo estamos llamando crea las matrices son para que puedas seguir adelante y crear que en los vehículos. Y para cada otra página o, ya sabes, crear Piazza que necesitamos, solo, solo lo hacemos en las carpetas respectivas. Entonces lo primero que queremos en este componente y lo creé es sucio todo fuera de él. solo puedas anexar lo que estoy a punto de mostrarte al contenido predeterminado del discurso. Tenemos la navegación de página en la parte superior para hacerle saber que se puede obtener herramienta a través de esta dirección vehículos slash create. También voy a inyectar mi cliente HTTP, así como un Gestor de navegación, que es solo una biblioteca que nos ayuda a navegar entre componentes en nuestro blazer up. Vamos a modificar nuestra etiqueta h3. Y sólo voy a ponerle la misma clase de título de tarjeta. Y va a decir crear nuevo vehículo en lugar de simplemente crear. Y luego vamos a meternos en la carne de la misma. Por supuesto, ya sabes, tienes esa cita, que voy a poner ahí. Entonces esto es básicamente lo que tu componente necesita ser visto en este punto. Por lo que cuando hablamos de granjas, es necesario utilizar el componente incorporado que nos ha dado un blazer llamado Editar Forma. Ahora esta forma de edición toma algunos parámetros. Uno, toma parámetros son nuestros atributos, bueno, un modelo. Entonces básicamente esto es decir, ¿qué debo querer tipo de datos, debo usar para inferir qué campos se supone que debo prestar atención hacia un formulario. Entonces si estamos creando vehículos, entonces nuestro modelo necesita ser alguna forma de objeto vehicular o valores vehiculares. Por lo que voy a decir en señal vehículo. Pero entonces por supuesto que no quieres tener ningún objeto por el nombre vehículo, así que va a mentir operar. Para remediar eso, solo voy a seguir adelante y crear ese objeto aquí abajo e inicializarlo a una nueva instancia de vehículo al mismo tiempo. Y luego vemos que esa línea roja desaparece. Entonces ahora lo sabe bien, se trata de vehículos. Así que mira aquí para ver los puntos de datos a los que se necesita prestar atención. Lo siguiente que quería señalar ahora sería lo que pasa o lo que debería pasar con una presentación. Por lo que podemos ver que queremos en, en inválido enviar evento, queremos un evento onsubmit. Deseo en válida presentar. Entonces, ¿qué queremos hacer cuando los datos no cumplan con los requisitos? ¿ Qué queremos hacer cuando alguien hace clic en enviar en general, y qué queremos hacer cuando alguien hace clic en enviar? Y no hay brechas de validación prácticamente. Entonces eso es lo que en vigente presentarme. Y así sólo voy a trabajar con presentación no válida. Y luego voy a decir que quiero que llames a este método llamado crear. Ahora una vez más, si estoy haciendo referencia a este método, necesito asegurarme de que esté entre comillas. Voy a bajar y luego crear ese método llamado crear vehículo. Para que puedas seguir adelante y hacer eso. Esa línea se va. Este, sin embargo, está ahí porque no está haciendo nada, pero pronto lo haremos Remy. Y entonces podemos empezar a poner en las diferentes partes de la forma. Entonces los dos primeros componentes que voy a poner en el formulario nuestras etiquetas serían para el validador de anotaciones de datos así como la validación. Y así ahora no estamos prestando demasiada atención a la validación todavía. Pero la cosa es que tenemos anotaciones de datos que realmente podemos poner sobre modelos, pero ahora mismo estamos compartiendo los modelos con la base de datos. Por lo que más adelante veremos por qué es una buena idea el tipo de tenerlos separados. Pero Farnell, mientras que compartirlos y lo mantendremos así. Por lo que el validador de anotaciones de datos no será el más, no hará mucho ahora mismo, pero lo pondremos ahí para su uso posterior. Resumen de validación significa que si tratamos de hacer una presentación y son puntos de datos inválidos, entonces esto tipo de mostrar esto se requiere que no cumpla con esto, etcétera. Entonces estos dos un poco trabajan de la mano a la mano, pero cuando empecemos a centrarnos en la validación más adelante, entonces los veremos en mejor axón. Conoce lo que queremos hacer es crear nuestra estructura de granja similar a cómo Bootstrap habría formado a alguien para decir que la clase div es igual a formar grupo dash. Y luego dentro de este div form-grupo, voy a tener una etiqueta. Por lo que el primer bucle va a ser para el micrófono. Y luego lo siento, lo sabemos para el micrófono. No queremos un cuadro de texto. Desea alguna forma de seleccionar la lista desplegable, seleccionar lista. Entonces lo que voy a hacer es que me acabo de poner esto en otro div y luego voy a usar una etiqueta selecta y otros se abren y cierran. Pero entonces dentro de esta etiqueta selecta, puedo decir que bind es igual a y ¿a qué quiero vincularlo? Va a estar ligado al valor aceite al modelo y al valor en el modelo, estaremos reuniendo ID porque esto es para mí. Entonces estoy vinculando esta lista de let a la identificación del micrófono, ¿verdad? Y por supuesto, de acuerdo con los hongos, estamos haciendo una forma bootstrap. Yo solo le doy a éste la clase igual formada. Entonces lo siguiente de lo que debemos tomar nota es el hecho de que se trata de una ranura vacía listas de donde vienen las opciones. Entonces si conoces HTML básico, ya sabes, tienes tu selecto, entonces tienes opciones, opciones, opciones, claro, no sabemos qué va a ser en la base de datos. Por lo que tenemos que cumplir con este listado de opciones lo más dinámico posible. Por lo que necesitamos mirar a la base de datos, aka miró a través de la API para devolvernos la lista de mix. Y entonces podemos usar eso para generar dinámicamente cuáles serán las opciones. Entonces déjame simplemente bajar a la sección de código y voy a inicializar un objeto de lista de tipos. Entonces lista I lista. Puedo usarlos indistintamente. Me han aconsejado que probablemente eso no sea lo mejor para hacer botes en esta situación. Está bien. Por lo que sólo podemos decir que lista micrófono, lo llamaría mix. Está bien. Y entonces sí queremos que cuando se cargue el componente o se cargue la página, que la mezcla esté llena y lista para su uso por parte de la interfaz. Entonces igual que lo que teníamos que ver con el índice cuando teníamos dos, déjame solo saltar por ahí. Teníamos que decir en inicializado, quiero que vayas a buscar la lista de vehículos. Necesito hacer algo similar y crear sin inicializar ir a buscar la lista de mezcla. Entonces sólo voy a copiar esto. Realmente no tienes que copiarlo, pero podrías volver a escribir Async protegido sobre una tarea en asincrónico inicializado de nuevo. Y lo que voy a hacer es en lugar de buscar vehículos, porque acabo de copiar esto de la página del índice de vehículos. Pero en lugar de buscar vehículos, busco mix. Eso significa que estoy haciendo cliente. Sí, HTTP otorga off client.connect desde JSON, borrando la lista fuera del micrófono. Y mi punto final aquí sería mix endpoint. Ahí vamos. Muy bien, entonces un nulo, básicamente cuando, cuando estemos inicializados, vamos a llamar a la mezcla. Por lo que necesito llenar esto con los datos una vez que la mezcla de ser recuperado. Entonces lo que voy a hacer es poner en una opción por defecto que diga seleccionar el micrófono. Entonces el usuario sabe eso, vale, necesitas seleccionar el micrófono, bien. Pero entonces voy a ver y empezar con el signo al si la mezcla no es igual a nula. Muy bien, entonces mezcla u objeto aquí, que es la lista de mezcla. Aquí es nulo. Pasamos por esto, solo sé con el índice. Entonces va a empezar como nulo, pero luego se va a llenar eventualmente. Entonces si no es igual a nulo, entonces para cada uno, digamos yo, eso vuelve. En lugar de mezclar, quiero crear una opción, ¿no? Y el valor para la opción estará fuera de mí ID de punto porque queremos rastrear el ID. Recuerda que cuando creamos el vehículo donde realmente almacenamos en el micro ID, no el nombre. Ese nombre es lo que queremos mostrar sin embargo. Por lo que en el apartado para la disciplina fue a ver mostrar el nombre de punto del micrófono. Ahí vamos. Por lo que va a generar tantas opciones como haya micros para selección de esta lista desplegable. Y eso es realmente todo. Acabamos de crear nuestra primera lista desplegable. Ahora tenemos uno no y tres más para ir porque es lo mismo para el modelo y es lo mismo para el color. Todos están almacenados en tablas de bases de datos, las cuales necesitamos para cargar dinámicamente el contenido de cuando estamos tratando con esta forma. Entonces lo que voy a hacer para que las cosas sean fáciles es simplemente replicar esta estructura aquí para la forma. Entonces fue MC. Este va a ser modelo. Y yo sólo voy a cambiar básicamente todo lo que se dice MC ID, voy a guardar modelo dot ID. Esto va a ser modelos, modelos, y esto va a ser modelos comunes, modelos, lo siento, y model.py, nombre model.py. Y dónde vas a hacer lo mismo para el color. Por lo que solo estoy haciendo algunos cambios expresos aquí para agilizar esta operación. Entonces colores, colores, este es un color de semilla común y solo estamos haciendo esos cambios rápidamente. Entonces no, hemos hecho disposiciones para la lista desplegable de micrófonos, para la lista desplegable de módulos, y para el color caído sobre esto. Líneas rojas sin embargo, están indicando que una necesitamos esos objetos respectivos. Y dos, ya sabemos que no hemos configurado ninguna llamada API para ellos. Por lo que para tan solo completar esta operación, podemos poner en la línea para el objeto de modelos así como el objeto de colores. Y luego de la misma forma que tuvimos que asegurarnos de que hicimos la llamada API para inicializar mix. Tenemos que hacer eso para los modelos, y también tenemos que hacerlo para los colores. Muy bien, así que más o menos arregla eso. Así que más o menos modelos. Esperaremos la llamada del cliente para obtener la lista de modelos del endpoint de modelos, colores haciendo lo mismo, lista de colores de endpoint de colores y mezclar lo mismo. De acuerdo, así que eso es todo para las listas desplegables. Y realmente, verdaderamente eso fue uno más complicado. Pero se puede ver que si lo hizo una vez, se puede hacer por los demás. Alternativamente, para el selecto, realidad hay un componente en blazer llamado input select, que funciona bastante similar. Y no dije similitud de fiesta, pero en lugar de comprar, tenemos que decir bind dash, value. De acuerdo, alguien que deje uno como selección de entrada, y voy a dejar los otros dos como selecto. Entonces este era nuestro código original. Esto está usando el componente de maquinilla de afeitar y luego éste se mapea al código original. Pero sólo vamos a completar nuestro formulario. Y luego veremos cómo funciona todo en lazos con juntos. Por lo que nuestro siguiente campo al que quisiéramos que el usuario ingresara es quizá el año del vehículo. Entonces voy a seguir el mismo formato de grupo y luego la etiqueta y luego un div que va a tener mis entradas. Pero entonces porque el año es un, déjame simplemente corregir estas Bs mayúsculas, ¿verdad? Debido a que el año es de tipo entero, voy a usar el componente de número de entrada, ¿verdad? Por lo que número de entrada por n valor vehículo punto año. Y entonces no quieres decir, estoy poniendo en esta nueva, nueva sección aquí que dice mensaje de validación para, y luego abrimos o es una sintax ver vehículo dot year. Por lo que en realidad podríamos tomar este mensaje de validación y aplicarlo a todos los demás. Porque el punto es que necesitamos alguna forma de validación para asegurarnos de que se seleccionen estos valles. Una vez más, no estamos prestando demasiada atención a la validación, pero sólo los estoy poniendo desde null. Por lo que voy a guardar mensaje de validación para. Y luego tenemos afuera paréntesis abiertos y luego abrir y cerrar Lambda flecha vehículo punto y luego el nombre del campo. que esa sea para Meek ID, ésta va a ser para el modelo ID. Este va a ser para identificación de color. Y entonces éste es para el año, como vemos. Está bien. El siguiente campo sería el número de matrícula, una vez más siguiendo el mismo formato. Y esta vez vamos a usar texto de entrada y seguimos siendo el valor, pero esta vez al número de matrícula. Está bien. No obstante, mensaje de validación para así tengo número de matrícula tenemos año creo que próxima parada probablemente sería el número de identificación del vehículo o VIN. Para que esa sea la siguiente. Entonces form-group etiqueta, entrada texto porque nuestro Vin es una cadena. Y luego por si fuera poco, creo que las tarifas diarias, son intolerantes, así que solo pondré esa en y luego las tarifas de alquiler una vez más es el doble. Por lo que el número de entrada es ese. Está bien, pero el punto es que si solo abres el corchete angular y escribes la entrada de palabra, verás todas las diferentes opciones están construidas en componentes disponibles para que tengas casilla de verificación, fecha, archivo, radio, botón de radio, grupo, entrada, texto, área, etcétera. Por lo que todos esos componentes están integrados en los foros y están disponibles para ti. Entonces en nuestra situación usamos qué, 33 diferentes usamos número, texto y selecto, y eso está bien. Ahora pasemos de nuestro diseño y centrémonos un poco más en lo que queremos que suceda una vez que te sometas. Entonces por supuesto necesitamos un botón de envío porque tienes todos los campos, pero no pusimos en un soviético. Por lo que mi botón Enviar, sólo un tipo de botón enviar y ponerlo en la reunión de clase y batido éxito holandés y bloque de industria cárnica crear vehículo. Entonces es sólo un botón bastante simple, pero entonces necesitamos hacer la lógica no aquí para asegurarnos de que una vez, una vez que se hace clic, llama a esta lógica y en realidad sigue adelante y lleva a cabo el mandato. Entonces, exploremos lo que tiene que pasar aquí. Entonces recuerda que cuando estamos creando datos, necesitamos hacer un post llamadas. Por lo que ya tengo el modelo que necesita o el objeto en cualquier Enviar Postel a la API crea efectivamente el recurso. Entonces lo que pasa es que empieza vacío. Se, establece el contexto para la forma, pero luego cualquier dato que se ponga en ella, Por eso tenemos ese enlace. Entonces, cualesquiera que sean los datos que se estén poniendo en el camino, realidad nos quedaremos deshuesados el mismo objeto y luego OnCreate tendría esos valores. Entonces lo que necesitamos hacer aquí sería esperar la llamada de cliente a nuestro puesto como JSON async. Una vez más, hay un método por verbo, así que hemos mirado los consigue anulados. Miraremos el poste. ¿ A dónde estamos llamando? A lo que estamos llamando endpoints, dot vehicle, endpoint. Y voy a estar pasando por vehículo como el objeto que necesita ser publicado. Muy bien, entonces después de que se cree, quisiéramos volver a nuestra página de índice. Entonces aquí es donde ahora podemos usar este NEF Monaco. Simplemente colapsa eso. Por lo que ahora podemos usar el gestor de NEF y decir Enough manager dot navegar a. Y luego sólo vemos, lo siento, sólo decimos slash vehículos slash. ¿ Verdad? Entonces tomemos todo esto, trabajemos para dar una vuelta y comprobarlo. De acuerdo, así que estoy cargando en mi formulario y estoy viendo algunos errores evidentes aquí y eso no es problema, eso los arregló juntos. Entonces en primer lugar, esto debería ser, esto debería ser más contextos, pero no tuve suficiente disciplina para pasar y decir Seleccionar modelo, seleccionar color. Además, mis controles necesitan parecerse al control Bootstrap. Entonces empecemos juntos porque si tienes el mismo código que yo tengo, entonces también estarías viendo esos. Si no caías en mis trampas, entonces te honraste. Entonces para el selecto, para la selección predeterminada, los estoy cambiando para seleccionar un color para el color, seleccionar micrófono para mí. Y voy a poner esta clase bootstrap, que es el control de forma en cada uno de estos otros componentes para asegurarme de que todos compartan el mismo estilo. Entonces con todo eso hecho, veo sólo algunos cambios cosméticos. Déjenme simplemente reiniciar. Y aquí estamos. Por lo que esto se ve mucho mejor. Muy bien, así que vamos a seleccionar, OK, aquí está nuestra lista desplegable con nuestra mezcla de la base de datos. Por lo que modelo Toyota. Está bien. Color prius, es negro. Es modelo 2020. El número de matrícula, alguien que dirija las clases con números similares a lo que tendríamos en Jamaica y el VIN. Bueno, eso a menudo es numérico, así que no creo que después, ya sabes, sea demasiado estricto con eso. Está bien. Y luego para los préstamos de tasa diaria, de nuevo, en el contexto de Jamaica, probablemente estés rentando un auto por 3 mil dólares diarios. Y luego cuando hacemos clic en Crear mirada de vehículo, navega por página de herramienta o índice, y está aquí para que lo veamos. Muy bien, Así que acabamos de crear efectivamente nuestro primer recurso usando la interfaz de usuario en contraposición a la API como lo hicimos en el pasado. Entonces te voy a animar a tomar ese conocimiento, transferirlo a los otros. Por lo que aún hay que asegurarse de que las personas puedan entrar y mantener la lista de mezcla porque ya sabemos que las puedes ver. Pero podemos ver y eliminar la retina. Necesitamos poder crear modelos de fórmula cm, mismos cuatro colores para clientes así como para reservas. Muy bien, entonces las reservas, podemos revisar las reservas juntas más adelante porque eso podría tomar un poco más de fitness, pero esencialmente seguir adelante y transferir los conocimientos y hacer estos. Y entonces podemos comparar notas solo remontada. 27. Setup Create Form: parte 2: Oigan chicos, bienvenidos de nuevo. Entonces conseguiste una asignación y espero que lo hayas completado de cualquier manera lo vamos a pasar juntos. Por lo que el reto fue transferir los conocimientos que ya cosecharon de sentarse en los vehículos, crear forma y seguir adelante y establecer esos, crear componentes para todos los demás recursos que queremos permitir que los usuarios puedan ingresar. Así hace modelos, colores, vehículos, clientes, y reservas. Bueno, hicimos vehículos juntos. Entonces así como una revisión rápida, podríamos navegar hasta el componente vehicular. Tenemos nuestras listas desplegables que se rellena dinámicamente con datos basados en lo que hay en la base de datos. Cortesía para API. Así que haz modelo, color. Todos esos son API y se forman. Y entonces tenemos nuestro número de entrada. La entrada toma un número de entrada. Por lo que vimos que tenemos los diferentes componentes de entrada nos dan a través de jugadas o fuera de la caja. Y cómo podemos tipo de personalizar a los demás usando el HTML seleccionado o la etiqueta selecta que nos da un blazer. Ahora lo que queremos hacer es pasar por las otras pantallas juntas solo para asegurarnos de que todos estamos en la misma página. Entonces voy a empezar con algunos de los más fáciles los cuales serían modelos mixtos y colores porque todo lo que realmente hay en esa forma es nombre. Está bien, así que otro micrófono habría sido dicho WWF que te pusieras en Nissan. Vamos a probar crear micrófono. Ahí vamos. Ahora tenemos a Nisan en la lista. Entonces si solo volvemos atrás y revisamos el código para eso, se ve bastante idéntico a los vehículos en las partes superiores donde tenemos la página con la ruta hace slash 12 horas HTTP client y nav manager ser inyectado o pequeña etiqueta la parte superior para que la gente sepa exactamente dónde en la aplicación se encuentran. Y entonces tenemos nuestra forma de edición, que está usando el modelo de un objeto llamado manso. Y entonces sabemos que tenemos nuestro objeto principal siendo inicializado en el código. Y luego sobre envíos válidos, tenemos crea mic, que también tenemos en el código. Y luego tenemos nuestras anotaciones mientras los datos y la validación resumen. Después pasamos a decir texto de entrada y enlazar valor de guión, hacer dotnet. Muy bien, y le damos el control de formulario y tenemos el mensaje de validación. Y tenemos nuestro botón. Eso es realmente. Ahora, el método no inicializado está realmente vacío y podría decirse que podríamos prescindir de él. Es decir, no está haciendo nada. No tuvimos que volver a tipearlo. Pero por si acaso hay algo que quieras hacer justo antes de que se cargue la página o a medida que se cargue la página, siempre puedes poner este método en. acuerdo, así que lo dejé ahí en todos los componentes por si acaso, pero solo haciéndote saber que podrías tenerlo no haciendo nada o por un código más limpio, posiblemente más limpio, podrías simplemente omitirlo ya que esto es realmente solo una anulación cualquier forma en crear micrófono, seguir diciendo espera client.read post como JSON async, y recordar el pase de endpoint apropiado del objeto que queremos crear, luego navegamos de nuevo a nuestra página de índice. Ahora, ese es el tema general para modelos y colores. Entonces solo buscamos marcas, si miramos modelos y veremos colores, es más o menos la misma cita. Literalmente, copia de mí, haz clic, Crear, y luego pega en el siguiente. Por lo que este se realizaría modelos y todo lo que hice fue Control F y encontrar todas las cosas que decían MI mayúscula M con mucho caso encendido y cambiarlas a. Y modelo, e hice lo mismo con micrófono en minúscula y modelo en minúscula. Y con eso, no tuve que cambiar ningún otro código porque todo lo demás simplemente se alineó porque los campos son casi iguales y es bastante fácil de replicar. Entonces eso es lo mismo para el modelo. Y una vez más, lo mismo para el color. Vamos a colorear slash create, y todo lo demás se ve más o menos de la misma manera. Muy bien, entonces el, los modelos claramente son diferentes para los diferentes Crear Páginas. Ahora veamos los foros de creación de clientes. Por lo que en el nuevo formulario de cliente, no es demasiado preocuparse. A embarcación contamos con tucks, número de identificación, dirección de correo electrónico, número de contacto, así como domicilio. Ahora, una cosa a tener en cuenta, asegúrate de que estás usando el componente del carrito relativo al tipo de datos del carrito porque a pesar de que se trata de número de identificación fiscal, dice número, pero la realidad es que en diferentes territorios, este número podría simplemente ser alfonumérico, están teniendo caracteres especiales. Por ejemplo, en Jamaica, tendemos a usar guiones entre nuestros números. ¿ Está bien? Por lo que solo quieres tener cuidado de no estar usando su propio campo para ese tipo de datos. De cualquier manera, vamos a seguir adelante y crear algunos clientes de libro en realidad ya han creado este cliente, pero sólo voy a hacer esto y crear cliente. Diga ver, aquí tenemos a nuestros clientes siendo exhibidos. Está bien, así que echemos un vistazo a las reservas. Entonces Booking sin embargo, dejó para el final porque posiblemente ha tenido la parte más complicada de código. Pero voy a pasar por alto la forma del cliente solo para que puedas ver exactamente lo que se hizo. Por lo que tenemos cada sección de formulario, texto de entrada para el DNI fiscal, dirección de correo electrónico, número de contactos, o dirección, área de texto de entrada de eras. Digamos que no quieres empezar este tipo de más grande que el cuadro de texto normal porque sólo toma época. Y entonces el resto está más o menos en concordancia con lo que hemos visto. De lo contrario, nadie pasaría a reservar. Vemos una temporada diferente. Uno. Se trata de una lista desplegable para los vehículos. Pero ten en cuenta cómo estoy listando todos los vehículos. estoy listando básicamente por su nombre, ¿verdad? Toyota Prius. Y luego puse ahí arriba y ese es el número de licencia. Pudo haber puesto más detalles, pero vamos a trabajar con eso para null, el cliente, ponemos los puntos ID una pipa y la dirección de correo electrónico para dicho cliente y luego la fecha, note que en realidad está mostrando la fecha de hoy, la fecha como en el momento. Y entonces tenemos ese control de Callender que nos permite cambiarlo. Y este calendario se verá básicamente igual en cualquier navegador basado en cromo. Entonces esto es Internet, lo siento, esto es Microsoft Edge. Vas de la misma manera en Chrome, pero podría verse diferente en Firefox. Y si bien no estoy del todo seguro de cómo podría verse en ópera, pero el punto es que puede verse diferente a través de los diferentes navegadores. Por lo que querrás prestar atención a eso. Pero el punto es que el control del calendario se nos da cortesía de ese componente o del tipo que infiere, ¿verdad? Entonces permítanme mostrarles el código que está detrás de este renderizado fuera de la granja. Por lo que una vez más, el diseño general es el mismo. Una vez más, consistencia. Después de un rato comienzas a darte cuenta de que estás repitiendo cosas como, ya sabes, cada vez que tenemos que atar esta clase h3 y ver eso, eso, por lo que podrías pensar en hacer de esto un componente propio. Simplemente lo llamaría un componente y probablemente pasaría en lo que sea único. Entonces de esa manera si queríamos hacer un cambio a cómo mostramos el título, no tenemos que hacerlo 20 lugares diferentes, pero lo haremos más adelante. Entonces solo estoy, solo te estoy dando ideas de cómo los componentes pueden hacerte la vida más fácil. Por lo que volver a nuestra forma. Contamos con nuestro Formulario de Edición Basado en la web de reservas o función de envío válida, que y lo que hemos visto, complicado que sea el formulario, el envío no válido es prácticamente el mismo todo el tiempo. Lo pasamos a la API, y luego navegamos por nuestro camino, ¿verdad? Pero entonces prestemos atención a lo que sucede aquí. Por lo que bono de caída de una hora para los vehículos. Sabemos que vamos a acudir a la API y luego a dónde conseguir la lista de vehículos. Entonces estamos familiarizados con eso en base a lo que hicimos en el discurso vehicular esta vez donde conseguir los vehículos sin embargo. Pero entonces para las listas desplegables reales, lo siento, equivocada para la era de la lista desplegable real, tenemos identificación del vehículo bien. Donde encuadernación a ese vehículo. Y si no se conoce a los vehículos, entonces por cada vehículo de la lista, entonces queremos generar una opción que tenga el valor del id del registro vehicular. Pero luego mira lo que he puesto en la sección de display. Por lo que solo estoy mostrando diversos detalles del vehículo. Entonces haz el nombre de punto modelo, y luego tengo esta pipa y luego número de matrícula. De acuerdo, así que sobre quieres disponer los datos al usuario para que sepan exactamente qué vehículo es, porque probablemente sería útil incluso poner el color en algún lugar ahí dentro. Por lo que sería el Toyota Prius negro o el BMW X5 azul al sol. Pero eso depende de ti. Pero solo te estoy mostrando qué, lo que hice, ¿verdad? Para conseguir los tipos de displays más complejos, realidad no es tan difícil. Y luego en la sección de clientes, muy similar, tuvimos que ir a buscar la lista de clientes una vez más de la APA, llenarlos, ¿de acuerdo? Y luego para cada uno de ellos generamos la opción con las ideas de punto del cliente de valor. Y luego estamos mostrando el TOC, digamos el separador y la dirección de correo electrónico podría poner en más detalles, podría poner menos, ¿verdad? El punto es que es tu aplicación, quieres que sea lo más fácil de usar posible. Pero una vez que entiendas cómo manipular tus datos es lo más importante. Ahora para la fecha, note que la mía está mostrando la fecha de hoy. No estoy seguro si eres uno es probablemente acabas de obtener esos datos predeterminados de 0 en slashed 01 slash tres ceros a la derecha. El motivo de eso es el tipo de datos que estamos usando es de tipo fecha, ¿verdad? Es el momento. Entonces lo hizo oh, es de tipo datetime. Por defecto lo hice. El tiempo no puede ser nulo. Tiene que tener alguna forma de DID. Y los datos que probablemente estés viendo son los predeterminados. Eso no es muy amigable para el usuario. Entonces. Lo que hice fue al declarar el objeto que se usaría para el formulario como modelo para el formulario, yo, los datos inicializados deben ser datetime dot-dot, dot-dot-dot. Entonces lo que sea, ya sabes, punto datetime ahora obtiene una marca de tiempo exacta como nula. Lo que no quiero que el tiempo se perturbe. No necesito las 12 PM ni lo que sea. Entonces solo digo que me des en D8, el nivel de detalle que pongas en ello, eso depende de ti. No hay problema. Una vez más, su aplicación, sus necesidades podrían ser diferentes a lo que estoy expresando aquí. Pero una vez más, solo quiero que los conceptos fundacionales pasen. Entonces estoy inicializando este objeto que podemos hacer eso en cualquier momento queremos que el formulario se cargue con datos, podemos decirle a nuestro objeto POV, este bit de datos para que para cuando esté huesado aquí arriba, cualquier campo que tenga ese bind mostrará automáticamente los datos correspondientes que fueron precargados. De acuerdo, para que todo esto consiga que se muestre esa fecha y entretenida un componente de fecha de entrada, razón por la que obtenemos el Callender. ¿ Está bien? Y luego fuera de todo eso, tenemos la reserva básica de crear donde simplemente lo enviamos a través del endpoint y navegamos siempre. Entonces déjame crear una reserva para este cliente que está rentando todo el alquitrán Toyota Prius crea la reserva y me estoy subiendo a ella. No hay problema. Realmente no probé esto antes de esta conferencia. Entonces inspeccionemos esta época para darnos una puede siempre hacer clic derecho ir a Inspeccionar. Ve a la consola de tu navegador. Y luego te mostraremos cuál es la flecha. Entonces aquí en la lectura del aire en el mar y que hay 500 respuesta en la grada. Y luego verías en que está sucediendo la línea 63 de nuestras matrices de puntos índice o pH. Entonces es la línea 63 de index.js son, vamos a ver qué y esa es nuestra llamada API para nuestra página de índice. No, no estamos del todo seguros de cuál es el tema. Y si comprobamos, vimos el mensaje en el navegador no nos dio mucha ayuda, pero sí tenemos esta ventana de salida a la que accedemos. Básicamente cada vez que hay depuración pasando, ¿verdad? Por lo que Microsoft o dotnet Core en realidad siempre está iniciando sesión en esta ventana. Entonces si me desplaza un poco hacia arriba, empiezo a ver las mismas áreas que son aún más errores son más detalles de error entonces lo que me fue mostrado el navegador. Entonces esta es una buena manera para que sepas depurar tus aplicaciones cuando estás recibiendo este tipo de errores porque funcionó antes y saber que dejó de funcionar. ¿ Por qué dejó de funcionar? Entonces dice algo aquí, un barco, ocurrió un error y excepción al calcular el contenido de la era de la base de datos. No estoy seguro si eso es todo. Lo que vemos aquí, lo mismo que estaba en el navegador. Si sigo desplazándome hacia arriba, entonces tal vez vea más detalles. Empiezo a ver algunas cosas. Compré JSON, JSON serialización y voy subiendo y subiendo. Y luego en el inicio de esta pila, traza es un posible ciclo de objetos se detecta. Esto se debe a algo, alguna referencia ahí. Entonces conozco este mensaje, sé exactamente lo que está mal. No necesariamente te dice cuál es el tema, pero te voy a guiar a través de éste. ¿ Todo bien? Entonces, ¿qué pasa? Y voy a conseguir un montón de depuración real rápidamente y saltar a nuestro objeto para reservar. Lo que pasa es que podría haber momentos en que estamos tratando recuperar objetos e incluir detalles adicionales. Pero los detalles adicionales son los objetos adicionales que estamos tratando de incluir, tiene, las relaciones son deben contener objetos del objeto. Es confuso. Entonces eso es lo que querían decir con un ciclo. Algunas flechas de referencia ciclador. Entonces la reserva contiene un vehículo, pero luego vehículo contiene una lista de reservas, ¿no? Entonces básicamente se está confundiendo porque está diciendo que quieres una lista de reservas. Se desea incluir los detalles del vehículo, pero los detalles del vehículo incluyen una lista de reservas también, por lo que podría confundirse, y ese es un problema común con las API en realidad. Por lo que en términos generales, resolvemos esto usando esta biblioteca llamada Newton's soft. Entonces solo voy a hacer clic derecho en nuestro proyecto de servidor y vamos a ir a Administrar paquetes NuGet. Ya tengo el paquete instalado, pero lo que vas a buscar es el soft de Newton. Y solo deja que esa búsqueda y luego quieres este Microsoft no es velocidad dotnet curso nuestro ASP NET Core dot NVC dot Newton soft JSON. Por lo que quieres solo hacer clic en eso, que no se carguen. Bueno, verías instalar o ves que la flecha negra ya la tiene. Entonces por eso veo la X. roja Adelante e instala eso. Y luego una vez hecho eso, entonces quieres ir al archivo de inicio para el proyecto de servidor. Ir aunque todo el camino hasta esta línea servicios punto agregar controladores con vistas. Y luego vas a añadir el siguiente código. Punto agregar JSON suave de Newton. Y luego le vamos a dar algo de inicialización y opciones van a ver o p con nuestro error Lambda, lo siento, flecha Lambda. Pero, y ahí vemos o p dot Siria, Siria, sir configuración serializer. Y déjame sólo ir a los nueve próximos para que quede claro lo que está pasando. Está bien, compañero más herrero. Por lo que Sara Lazar, configuración punto referencia, manejo de bucle. Entonces eso es lo que está pasando. Está causando nuestro bucle de referencia. De acuerdo, así que el manejo del bucle de referencia es igual a y voy a ir a ver self.age de Newton JSON data reference loop handling dot ignore. Está bien, entonces en otras palabras estamos viendo que sí, podrías terminar con nuestro bucle de referencia sin embargo, hacer un gran problema al respecto. Haz lo que tengas que hacer y te compren los datos. Entonces eso es más o menos lo que esto va a estar diciendo la API que está en nuestros proyectos de servidor. Entonces vamos a Australia, eso es como un poco de navegación a las reservas. Y por supuesto, ya sabes, tenemos que iniciar sesión primero. Y luego después de que iniciamos sesión el momento de la verdad, así K vehículos lo siento, sí dije reservas y ahí vamos. No, estamos viendo nuestras reservas con los detalles apropiados en base a lo que pretendíamos enumerar en la página de índice. Entonces ese es en realidad un error muy común con las API. Es una buena manera. Propiedad de un buen trabajador. El soft de Newton realmente ha hecho bien para manejar ese error. Entonces aquí está el código. Una vez más, acabamos de agregar esto al piloto dicho agregar controlador con vistas. Si solo estás usando una API que probablemente solo tengas controladores AD. Como el método aquí, Servicios dot-dot-dot controladores. Es lo mismo. Simplemente se lo pone hasta el final de los paréntesis y debería funcionar. Por lo que en este punto hemos alcanzado un hito en el que configuramos nuestras formas de creación para todos nuestros diversos recursos. Por lo que ahora ya sabes cómo permitir que el usuario ingrese datos a través de tu blazer up y almacene en la base de datos. Partiendo de esto, veremos cómo les permitimos modificar los datos que han entrado. Porque cuando miramos la reserva, veríamos eso bien, hay una fecha en y actualizamos retinol viejo. Todo lo que estamos mostrando son los datos fuera. De hecho, en realidad había comentado sobre esta columna aquí que estaría muerta en menos 0, 2, lo cual sé que va a causar un problema porque cuando nos refresquemos lo cual sé que va a causar un problema porque cuando e intentemos recargar la página de reservas no. Mostrando la columna que falta, mira lo que estás viendo. Entonces ese no es un valor sensato ahí mismo porque el Dayton tiene un tiempo de coma Xia, sabemos que va a por defecto a la barra 0 1. Entonces cuando esté haciendo el cálculo, nos va a dar un negativo desde esa fecha hasta el día que tuvimos. Entonces eso va a ser un tema. De cualquier manera podemos arreglar ese cosmético porque fácilmente podemos poner una declaración if para ver si no hay fecha en venir del modelo, luego mostrar algo más. De lo contrario, mostrar la duración en días. Sin soportar eso sin embargo, necesitamos configurar el formulario de edición porque cuando alguien trae el auto, necesitan actualizar el registro de reservas existente con la devolución. De lo contrario, sí necesitamos la edición para todos los demás. Entonces veremos cómo funciona eso en unos pocos. 28. Formulario de actualización de configuración: parte 1: Oigan chicos, bienvenidos de nuevo. Por lo que en esta lección vamos a estar buscando configurar el formulario de edición o actualización para nuestra aplicación. Entonces en esta lección vamos a estar viendo algunas cosas. Una, cómo podemos crear componentes reutilizables, reales reutilizables, y a cómo podemos implementar parámetros y 3, cómo podemos implementar lo que llamamos devoluciones de llamada de eventos. Por lo que la génesis de todas estas cosas a mirar en tan solo una simple operación de edición sería el hecho de que un formulario de edición se parezca exactamente a un formulario Crear. Y yo no muchas veces vas a tener los mismos campos. Las operaciones sólo diferirán porque uno está creando datos en uno está cambiando los datos existentes. No obstante, en lo que respecta a la granja, en términos generales, vas a tener los mismos conjuntos de campos que usas para crear que quieres que el usuario pueda cambiar. Está bien, entonces vamos a empezar con uno simple y voy a usar los micrófonos crear forma, ¿verdad? Entonces lo que necesitamos hacer es crear un componente que tenga esta forma en él para empezar. Entonces voy a hacer clic derecho en mix y voy a seguir adelante y agregar un componente de maquinilla de afeitar. Voy a llamarlo componentes de granja, nada demasiado elegante. Está bien. Y entonces quiero decir, espero que eso sea autoexplicativo. Es un componente para la forma. Y lo que queremos en este componente de formulario es la forma de edición real. Entonces todo lo que entró en el, en la forma de edición que ponemos en nuestro componente Crear. Queremos que todo esto, al menos esa parte, las partes reutilizables sean en nuestros controladores de forma, componentes de granja, lo siento. Entonces voy a quitar este HTML y reemplazarlo por el formulario de edición. Y todo es más o menos sigue igual. Pero también queremos especificar ciertos parámetros para este componente. Significado que podemos configurar nuestros componentes de tal manera que cuando lo invocamos, pasemos en valores. Entonces de la misma manera que yo editaría foro, dijimos que modelo es igual a algo en enviar válido es igual a algo. Estos son realmente solo valores de parámetros que se hornean en el componente de forma de edición. Entonces mi componente, que es componente cultivado, necesita tener un parámetro. Por lo que las llaves cuadradas abiertas escriben el parámetro de palabra y luego voy a decir que debería tomar un parámetro de tipo mic con el nombre mic que se va a corresponder con ese modelo que se pasa. Muy bien, Siguiente parámetro, queremos algo para determinar el texto del botón porque esto es un granjas razonables, así que no quiero que diga crearme todo el tiempo por si realmente estoy editando. Está bien, así que queremos definir contextualmente lo que toma, se imprime botones abiertos. Tengo un parámetro llamado texto de botón, que es de tipo string. Y va a tener un valor predeterminado de guardar. Entonces eso significa que si no proporciono un valor para ese parámetro, entonces solo va a decir Guardar, lo contrario podemos anularlo. Para que pueda saber, reemplace este texto estático el texto dinámico que está siendo dicho por lo que sea que Valley sea pasado. Y una vez más. Esto es establecer un valor predeterminado de C si no se pasa ningún valor. El tercer parámetro que voy a tener es uno llamado a presentar válido. Y este va a ser de tipo evento llamado Bach. Entonces esto es como un delegado de manejador de eventos para ver, vale, qué método debo llamar en esto en el lugar de esto. Por lo que no válido presentar, eso es lo que estoy llamando el parámetro. Por lo que voy a decir no válido presentar es igual a al signo en envíos válidos. Entonces eso significa que cuando alguien llama a este componente de formulario , puede proporcionar un objeto de micrófono. Si está vacío, queremos suponer que están a punto de crear uno. Si se llena, entonces suponemos que están a punto de editar uno. ¿ Está bien? Si pasan, pueden ver, bueno, cuando estoy editando, quería decir Save Changes. Si estoy creando, quería decir crear, lo que sea. Si no evitan este, tenemos un valor por defecto de todos modos. Y entonces este parámetro es ver a qué método debo llamar. Entonces cualquiera que sea el nombre del método que se pase aquí, ese es el método al que no válido enviar llamaremos. Entonces ese es nuestro componente antebrazo. Ahora tenemos un poco de refactorización que hacer tanto a la edición, bueno a nuestra crea lo que me deja configurar primero la página de edición para que puedas ver exactamente cómo se vincula. Y entonces podemos volver atrás y modificar nuestras creaciones. Entonces en la misma mezcla, vamos a seguir adelante y agregar los RAS son componentes y lo vamos a llamar editar, editar punto, maquinilla de afeitar. De acuerdo, y luego seguimos adelante e inyectamos lo habitual así como definió nuestra página raíz dos. Por lo que pH es igual a slosh MC slash edit. Y entonces estamos especificando aquí que esperamos un parámetro. Por lo que este id colon en DC y necesito un parámetro que o bien se refería como ID. Y debe ser de tipo int. Muy bien, entonces hay un parámetro de palabra clave, así que necesito decirle a este componente una vez más, Eso es todo necesita un parámetro y lo voy a llamar parámetro public int id Así que este nombre de propiedad tiene que corresponderse con cualquier nombre que esté definiendo en la parte superior aquí. Y sólo pondría eso para ponerse y sentarse. Muy bien, a continuación, necesito definirme. Entonces MC o un objeto de mí más bien es igual a una nueva instancia. Y luego lo primero que tengo que hacer cuando mis componentes se cargan es buscar lo requerido Esa es su morada para ser editada. Entonces recuerda que cuando estás editando, significa que los datos existen. Entonces eso significa que necesito ir y obtener el registro con el DNI que se proporcionó porque la persona hubiera hecho clic en uno y dicho, quiero editar este registro. El ID es cinco, necesitamos esa tarjeta roja, así que voy a poner en protegido es ver anulación para la tarea sobre parámetro. Sentarse es decir, de acuerdo, tan protegido Async sobre una tarea. Conjunto de parámetros. Parece que eso significa una vez que los parámetros proporcionados, ¿qué debo hacer? Entonces note que en las anteriores probablemente teníamos en inicializado, por lo que no se está utilizando aquí. Está bien. Bueno entonces en esta situación, no lo quiero arriba en no inicializado, lo quiero arriba y cuando hay un parámetro sit, Muy bien, así que en los parámetros establecidos es hundir. ¿ Qué quiero hacer? Creo que me falta una S aquí. Los perímetros establecen una semilla. Ahí vamos, directo. Entonces ahí vamos, Sólo consigue la tarjeta giratoria en parámetros, siéntate asíncrona. Entonces una vez que quiero hacer ahora es llenar mi objeto de micrófono con una llamada a la lata me int dot, y luego llegar de JSON es hundir era quería conseguir el registro correcto y quiero que se serialice como un micrófono. Y luego voy a llamar puntos finales. Y este es MC, así que es el endpoint del micrófono hace endpoints, ¿verdad? Entonces ese es nuestro punto final al que estamos llamando. Pero entonces necesitaba pasar por encima de la identificación también, ¿verdad? Entonces eso significa que necesito tipo de formato o aplicar algo más de finura a este endpoint. Porque recuerda que nuestro endpoint GET, déjame simplemente ir a mezclar y mostrarte que se pone endpoint. Una vez más, estamos buscando conseguir este. Entonces, o bien podrían ser cinco, ¿verdad? Por lo que necesitamos poder llamar a este punto final en particular. Entonces para formatear, voy a usar la interpolación. Por lo que asignaré y envolveré estos en esta fiesta con tirantes rizados. Entonces estamos llamando al punto final. ¿ Todo bien? Y déjame escribir su objetivo y luego cortar, porque no tengo barras en los puntos finales. Ahí vamos. Recuerda que quitamos las barras, así que decimos barra. Y luego voy a pasar en el valor de identificación. Ahí vamos. Muy bien, tan similar a cómo modificamos nuestro micrófono y necesito cerrar mi comilla. Ahí vamos. Lo siguiente que quiero hacer es definir lo que debe pasar después de hacer clic en ese botón. Entonces recuerda que no hemos empezado a mirar el poder visual, solo codificando las cosas de los eventos. Y luego te mostraré cómo podemos apalancar este arte componente. Voy a llamar a esta una tarea asíncrona, editarme. Muy bien, entonces cuando, cuando, cuando hacemos clic en Enviar en el formulario de edición, quería llamar a edit make. ¿ Qué quiero hacer? Bueno, voy a decir, esperaré mi llamada de cliente para poner como JSON asíncrona, y sentarme. Por lo que el cliente tiene alguna vez verbo. ¿ Qué estoy poniendo? Bueno, en primer lugar, ¿cuál es la URL? Por lo que mi URL sería endpoints, dot mic hace endpoint. Y entonces los datos que estoy poniendo o serían el siguiente parámetro, que sería hacer. ¿ Está bien? Porque recuerda que estamos saliendo, así que tengo que proporcionar al objeto los datos. Acabamos de obtener el objeto. Habrías sido editado y saber que click Enviar, vamos a cumplir con esta convocatoria y digamos realizar un PUT usando estos datos en ese endpoint. ¿ Verdad? Después de eso, quiero navegar a alguien, sólo decir, lo siento suficiente manager, Dots, navega herramienta y luego simplemente navegar a casa. Al igual que lo que hicimos en el Create. Muy bien, un poco directo hacia adelante. Una vez más, estamos aceptando departamentos se llaman ID y este enlace, esta URL o adquiere ese parámetro. Definimos o objeto de micrófono y lo inicializamos. Y luego lo llenamos quiere que los medidores de potencia estén listos para su uso. Y luego seguimos adelante y hacemos nuestras ediciones. No obstante, ¿qué pasa con el material visual? Todavía no hemos hecho nada más que esta etiqueta h3, ¿verdad? Entonces para el formulario, puedo llamar a mis componentes de granja, ¿verdad? Entonces sí, al editar forma, pero como determinamos, editar forma es realmente solo el foro incorporado donde la validación de datos y anotaciones sobre tal, tenemos los campos y luego tenemos el botón. Todas esas cosas son comunes entre la edición y crean. Por lo que lo ponemos en este componente de forma y ahora podemos llamar a componentes formales y mirar a este nodo. Puedo proporcionar valores para nuestro texto de botón y enviar no válido. Recuerda esos son parámetros que dijimos queríamos texto de botón derecho y en válida enviar. Entonces vamos paso a paso. Entonces texto de botón, tal vez quiero que mi botón vea la derecha. Y luego para el envío no válido, necesito proporcionar la función que se debe llamar una vez que presionemos el botón. Por lo que no válido enviar, sabes que una vez que presionemos el botón va a ir a no válido enviar y llamar a cualquier función que pongamos aquí. Eso es lo que hace en el create. Si sólo volvemos a la Crear, eso es lo que hicieron esos rojos en el envío válido crea micrófono. Salta, no y va por aquí. Eso es de código duro. Necesitaba dinámica porque no sé si estoy creando edición RFM. Entonces desde el componente edit eraser, estoy llamando a este componente de forma dinámica y a este dinámico, a este parámetro. Voy a decirle que quería llamar a editar micrófono. Entonces ese es el método al que quiero que llame este componente de formulario cuando haya un envío válido. Y entonces el último parámetro que necesito proporcionar es make, porque sí vi eso. Déjame encontrarlo de nuevo. El modelo va a ser igual a en señal de micrófono, ¿verdad? Por lo que está esperando algún micrófono o algún valor ambiental de tipo mic. Entonces solo voy a pasar en lo muy manso que sentimos que no escuchamos, ¿verdad? Entonces. Este fue un MC igual a MC. Y entonces simplemente cerraré este parámetro, me desharé de todos esos errores que puedan poner en el exterior y tienen razón. Ahí vamos. Así que ponte nuestros anuncios. No obstante, hazme yo y nuestra actualización. Está bien. Déjame solo comprobar dos veces que tenía un enlace a la edición en. Sí, lo hice. Entonces mezcle slash, edite slash. Y por eso pasamos de nuevo el ID del micrófono porque lo definimos para tomar ese parámetro. Entonces vamos a pegarnos o editar para dar una vuelta. Muy bien, entonces donde está nuestra lista de mix. Y yo sólo voy a crear uno nuevo. Entonces éste se suponía que era Honda, pero cometimos un error o una rotonda sobre el iPhone. No. Eso está bien. Déjame pensar en algo es que aún no tenemos Jaguar. De acuerdo, así que es jaguar. Jaguar, así que necesito editarlo. Entonces voy a golpear mi edición y ver a dónde vamos. Por lo que esta forma idéntica a la forma de crear, no tiene sentido. Escribimos esta granja dos veces. ¿ Todo bien? O sea, quizá la situación lo requiera. Y si lo hace, entonces los mismos principios que acabas de usar en el formulario de creación, puedes volver a aplicarlos en el formulario de edición, la etiqueta de formulario de edición, y ya sabes, todos los campos que necesitas y todo bien en esta situación, No necesito, no quiero tener que escribirlas dos veces. Está bien. Entonces sólo voy a cambiar esa actualización y mirar eso. Está bien. No funcionó todo peaje ella lo estaba esperando. Demos un paso atrás y evaluemos. Entonces estoy mirando hacia atrás el código y creo que veo cuál es el tema. No formamos esta URL correctamente, así que mi error, déjame simplemente volver al archivo put, lo siento, incorrecto, pero al método put en el controlador mix. Y lo que debería tener es la URL con ese parámetro ID. Entonces eso es lo que hicimos incorrectamente. Entonces déjame solo retroceder. Y la URL realmente necesita verse así. Muy bien, así que solo voy a usar eso y reemplazar esto hace que las partes del endpoint de su ID de la slash porque tenemos que pasar el valor de ID ya que se usa para alguna validación lejana en el camino. Muy bien, entonces vamos a tener que hacer eso y luego pasamos los datos para que se actualicen también. Entonces intentémoslo una vez más. Entonces voy a entrar, editar Jaguar, ponerme el r, y luego hacemos clic en Actualizar, y ahí lo tenemos siendo actualizando. Por lo que fue solo un tema de URL. Pero vemos cómo podemos usar nuestros componentes reutilizables para instalar la edición. Ahora como es dolorida utilizable, el punto de ello es que puedo saber refactorizar nuestro crea PJ para usar estos componentes de forma. Y la ventaja de esto una vez más, es que tenemos menos sistema policial mantenido. Porque si mañana escuchamos que hay otro campo que necesita entrar a la base de datos. Y por supuesto, si está en la base de datos, entonces probablemente necesite estar en las pantallas de creación y edición. Entonces en lugar de tener dos formas para modificar, sólo tenemos el componente de formulario. Entonces para el Create, en realidad puedo simplemente eliminar todo esto y hacer referencia una vez más al componente de forma. Y solo llenando el resto de los parámetros tendría el botón toma el micrófono, siendo el micrófono igual a mí. Una vez más, este objeto que inicializamos, notamos que está vacío, no estamos arreglando nada. Entonces cuando se repasa, no tiene datos para precargar en nuestro componente. Y luego en válida presentar, llamamos al método de crear MC. Muy bien, Así que vamos a crear uno más manso y luego editarlo y podemos enviar fuera de este activo. Por lo que voy a ir a crear nuevo micrófono. Esta vez vamos a hacer lo alto del día crear, hacer. Nuestros anuncios son nuevos. El componente Formulario está funcionando para el create. Y bueno, debería haber puesto un error ortográfico para justificarlo. Entonces sólo voy a modificarlo. Haga clic en Actualizar. Ahí vamos. Y entonces dije: Oh, cometí un error. Permítanme modificarlo de nuevo. Y déjame hacer eso otra vez. Llévate todos estos extra y ahí vamos. Por lo que no hay componente reutilizable para nuestra granja. Entonces el reto aquí es seguir adelante y hacer estos componentes similares para todas las demás entidades o recursos que necesitaremos mantener. Y seguir adelante y refactorizar el Crear y crear también la edición para utilizar esos componentes de forma. Cuando volvamos, podemos comparar notas. 29. Formulario de actualización de configuración: parte 2: Oigan chicos, bienvenidos de nuevo. Entonces en esta lección sólo vamos a estar comparando notas. Yo solo te voy a guiar por el código que implementé y espero que también lo hicieras, pero te estaré dando, por supuesto, jardines en caso de que te enfrentes a dificultad y caminando por el código lo suficientemente despacio como para que puedas realmente copiado si es necesario. Entonces empecemos con los más fáciles, que serían colores y modelos, porque los colores en modelos básicamente tienen tan pocos datos como la mezcla. Entonces el mismo componente de forma, cosas que hicimos por mí X y luego lo reflejamos o, o creamos y nuestra edición para solo usar ese componente de forma es lo mismo para los modelos, ¿verdad? Para el componente de forma, lo único que teníamos que cambiar todo era una diversión. Ahora estamos lidiando con ellos modelo, ¿verdad? Todo lo demás prácticamente igual. Y luego otra vez en el Create, vemos que no cambié las actualizaciones de la firma de texto de botón. Necesito decir Crear modelo aquí. Está bien, es una buena, Estamos pasando por esta revisión, pero ese componente llamado es idéntico como lo es el para la Edición. De acuerdo, y entonces el código es prácticamente idéntico. Estamos esperando el mismo DNI. Nos aseguramos de que nuestro pH vaya a lo que sea, slash, edit slash con el id siendo int. Y eso lo hicimos como parámetro. Llamamos a la modelo para ser editada. Y luego seguimos adelante y llamamos a nuestro PUT con los modelos y apuntamos con slash ID con el modelo a editar. Y luego volvemos a navegar a nuestra página de módulos. Muy bien, así que más o menos entre modelos, mezcla y colores, la única diferencia en el código es la clase real y el nombre del objeto que se está utilizando. El resto es más o menos lo mismo. Y también los extremos, por supuesto, no hay vehículos. Todas las diferentes series que es una forma más compleja. Por lo que la forma de Crea, ponemos dentro de nuestro componente de forma. De lo que también notarías que estoy inyectando el cliente HTTP. Muy bien, ¿Por qué estoy inyectando esta tendencia? Porque en el formulario original lo necesitamos para cargar tres listas desplegables. Entonces todo ese código de la Create, ¿cómo no tomamos en esta ruta? En realidad tendríamos que repetirlos en la página de edición porque ambos necesitan esa lista de valores por adelantado. Entonces lo que hemos hecho es que hemos sacado ese código de la creatina, lo pondremos en los componentes de la granja. Y un componente de formulario se ocupa de preparar el formulario y todos los datos y necesidades por adelantado, aún tenemos nuestros parámetros para nuestros datos. El botón toma así como el método de devolución de llamada de evento, ¿verdad? Y en el crear, nuestros clientes brota en acción cuando tenemos que enviar los datos vía post como llamada JSON, así como en la página de edición cuando tenemos que precargar los datos uno y luego enviar los datos actualizados. Una vez más, nuestros puntos finales cambian en consecuencia. Entonces ya ves, lo estamos juntando todo, haciendo que la aplicación sea un poco más mantenible, menos puntos de contacto cuando hay cambios por realizar y donde aprovecharse de blazer completo nos permite ser muy modulares en nuestro enfoque en la construcción de cualquier aplicación. Clientes. Bastante simple. Se utilizó forma simple, no hay necesidades adicionales para ningún cliente por aquí para cualquier pre carga de datos. Por lo que el código de creación se ve de la misma manera justo con el componente antebrazo justo ahí. Y la forma de edición es más o menos lo mismo. ¿ Todo bien? No. Cuando se trata de reservas, teníamos que hacer un poco más. Bueno, más o menos reservas completas están haciendo lo mismo que hicimos por nuestros para nuestros vehículos, ¿verdad? Porque de igual forma tuvimos que precargar la lista de la lista de vehículos y la lista de clientes para poder hacer una reserva. Por lo que tuvimos que inyectar a nuestro cliente en el componente antebrazo y luego hacer nuestro no inicializado. Por lo que tomamos todo esto del componente Crear. Observe que no tiene que no inicializado. No tiene nada que ponerlo en el componente de forma. Y luego tenemos nuestro cordón crea que se ve así, y nuestro código de edición se ve así. Está bien, así que eso es una carrera rápida a través de él para aburrirte hasta la muerte explicando y sobreexplicando porque el concepto se habría explicado en la lección anterior. Esta es la implementación uno por supuesto, puedes pasar y hacer una pausa como necesites copiar lo que no estás tan seguro. Pero lo que quiero señalar es que creé otros componentes. Entonces en mi carpeta de componentes, recuerda cuando estamos engañando a nuestros propios componentes, inicialmente, crea una carpeta de componentes y creé esta muestra uno. Bueno, creé otro llamado el buck to list dot borrador. Entonces déjame mostrarte dónde se usa. En términos generales, si aterrizo en la página de crear o editar, hay una posibilidad en la que quizá no quiera crear nada, nuestro editar nada. Por lo que quería simplemente volver a la lista. Entonces habría tenido que replicar ese corredor de botones a través de cada formulario y cambiar la URL donde quería ir con ellos cuándo usar la etiqueta de anclaje y escribir manualmente la URL. O voy a ver que ni un click manager de navegación vaya a esa URL en particular, ¿verdad? Entonces, en lugar de repetir ese código justo en cada página, lo que hice fue crear un dinero para enumerar componentes. Y entonces esto toma un parámetro llamado target. Y entonces todo lo que estoy haciendo es poner en la página específica relativa a donde estoy. Entonces si estoy en el formulario de reservas, entonces mi buck to list sería para la lista de reservas. ¿ Verdad? Y entonces eso cambia por componentes. Entonces para los clientes es lo mismo que acaba de pulir para listar clientes. ¿ Para cuál es éste? Este es para los vehículos, es lo mismo pero listar vehículos. Por lo que veamos a Buck para enumerar. Sigue el mismo tipo de patrón que un componente que requiere un parámetro y todo uno, no estoy navegando por su no tengo afuera y pH como nada. Estoy inyectando a mi gestor de navegación. Todo lo que tengo aquí es un botón que he peinado. Es decir, este estilo puede no ser lo que quieres, pero verías tu aplicación, lo modificas o sientes. Pero estoy estilizando este botón para ser un botón oscuro en línea, block btn. Y he definido ese evento onclick para este botón. De acuerdo, así que cada vez que se haga clic en este botón, se va a ir, hombre, llamado a este método. Se toma el parámetro. Entonces ya pasamos por parámetros cuando dijimos A formar componente, ¿no? Entonces estoy tomando departamentos se llaman objetivos, razón por la cual podemos especificar objetivos y simplemente pasar en esa cadena. Entonces cuando se haga clic en ese botón, vamos a bajar a este método y ver gestor de navegación y navegar a. Está bien, hemos usado esos, que ese método ya sabemos navegar dos obras. Pero entonces voy a cargar dinámicamente el BaseURL de toda esta aplicaciones y nav gestionar sobre URI base me da el servidor básicamente. Y luego voy a poner en los objetivos. Se va a decir algo que localhost colon, sea cual sea el número de puerto que tengas, slash. Entonces note que no tengo que poner una slash aquí porque la slash está implícita a través de este valor. Y luego sólo voy al objetivo como se especifica a través del parámetro. Entonces, solo echemos un vistazo rápido a lo que se ve eso. Entonces voy a volver a crecer y 0, que es mix, bien, crea un vehículo nuevo y estoy como, oh snap, realmente no quiero crear una nueva visa. Yo quiero volver a esta lista, mira donde aterrizamos micros de respaldo. Si voy a modelos, lo mismo, volver a la lista, volver a modelos. Si termino en editar, realmente no quiero editar volver a la lista. Muy bien, así es como podemos, una vez más hacer que nuestras aplicaciones modulo y no difícil repetir demasiado código a través de Windows crea un componente. Dale parámetros suficientes para, ya sabes, hacerlo lo suficientemente dinámico. Y luego simplemente enchufamos esos parámetros y a los componentes donde nos parezca conveniente. De acuerdo, así que eso es realmente todo para esta revisión. Una vez más, si te perdiste alguna parte de ajuste o tuviste dificultad para atravesarlo, siéntete libre con Bach. Camión de Bach a través del video en pausa en las diferentes partes y revisar el código. Asegúrate de que la ortografía esté cuadrada y todas tus referencias sean correctas. Y cuando todo lo demás falla, siempre puedes pegarme si necesitas más orientación. 30. IMPORTANTE: corregir los campos del usuario: Oigan chicos, bienvenidos de nuevo. Entonces tengo una solución rápida para nosotros antes de seguir adelante. Y esto se refiere a esos campos de auditoría. Por lo que probablemente notaste que en la base de datos, todas las fechas están apareciendo cuando creamos. Déjame seguir adelante y ver los datos de una de las tablas que están apareciendo las fechas. No obstante, nuestros nombres de usuario no lo son. Por lo que estos probablemente se habrían hecho a través de la API. Eso está bien. Pero la razón por la que hemos creado por un actualizado por sería que el usuario conectado en la UP se registraría como la persona se tocaba el registro, ¿no? No, eso no está pasando. Entonces solo tenemos un arreglo rápido que hacer y lo voy a hacer en la unidad de trabajo segura otra vez, la escuela pero hueso a la unidad de trabajo en la carpeta del repositorio. Y el código original que tenemos es var usuario es igual a contextos HTTP usuario punto, identidad punto, nombre de punto. No, la realidad es que probablemente me puse un poco exagerado en implementar esto en blazer. Debido a que esto funciona en MVC, funciona en sus páginas Razor, donde los contextos HTTP suelen contener la información del usuario, si también se indica se pasaría en el contexto. Y es una manera fácil de obtener el nombre de inicio de sesión del usuario actual. No obstante, en la situación de blazer donde realmente no estamos haciendo trabajo en la API, poco estamos haciendo en el nivel del lado del cliente. O eso realmente se está pasando es un Tolkien con la inflamación sobre quién es. Por lo que este contexto HTTP no tiene r. No mantiene al usuario conectado porque realmente no sabe quién está conectado. No sabemos quién es el cliente. O más bien solo conoce al cliente arriba. Cuál es realmente la inflamación del Tolkien que realmente usa para decir que sí, vale, puedes acceder al punto final. Por lo que estos contextos HTTP no lo usan. Yo nombre de entidad no funciona en este contexto, así que vamos a modificarlo un poco. Entonces voy a entrar en el manto, el código original. Y ya tendré aquí la corrección de cotización, que solo te guiaré. Entonces la primera línea para la corrección es que no estamos consiguiendo al usuario directamente donde conseguir el ID de usuario, porque lo hace Constantino, siendo el token. Y el Tolkien, ya está analizado en el contexto HTTP. Por lo que podemos perforar en partes de la información del token a través de contextos HTTP, usuario de punto. Entonces usuario es realmente lo que llamaremos a principios de reclamos. Entonces los reclamos son básicamente pedazos de información que nos dicen quién eres, ¿verdad? Afirmo ser esto, aseguro ser que eso es lo que es el reclamo. Por lo que el objeto de usuario en lugar de los contextos HTTP es un principio de reclamos, que es una colección de las afirmaciones de venir del Tolkien siendo enviadas hacia abajo por nuestro blazer cliente dicha interfaz. Muy bien, Entonces contextos HTTP, usuario de punto obtener todas las afirmaciones y ahora vamos a encontrar la primera reclamación. Entonces si alguna vez pongo esto en modo de depuración y solo muevo, verías que soportables 15 reclamos. Y el que contiene información útil sobre quién es el usuario. Se va a encontrar en el identificador de nombre del tipo de reclamo. Entonces tenemos una constante aquí llamada tipos reclamados, ¿verdad? Por lo que si comienzas a escribir eso, es posible que tengas que incluir una biblioteca para las reclamaciones de puntos de seguridad System.Out , tipos de reclamos, son solo constantes y nombre identifica una de esas constantes. Está bien, así que eso nos va a dar el ID de usuario más o menos. Y entonces queremos el valor de ese reclamo. Por lo que esta crema o el ID de usuario se almacena junto a este tipo de reclamo. Entonces cuando encontramos el tipo de reclamo de este identificador de nombre de tipo, obtenemos el volumen, obtenemos el ID de usuario. Ahora que tenemos el ID de usuario, no quiero almacenar el ID de usuario porque usos podrían eliminarse en los diez años en el futuro. No se quiere que el histórico teléfono sepa qué usuario tuvo esta idea en este momento, probablemente sea más fácil almacenar el nombre de usuario, razón por la que lo subimos para nombre aquí arriba, ¿verdad? Por lo que necesito recuperar a ese usuario. Por lo que ahora tengo el DNI. Quiero decir var usuario es igual a nuestro peso user manager dot encontrar por ID un fregadero. Y luego simplemente pasamos ese ID de usuario y luego obtenemos ese objeto de usuario completo. ¿ Todo bien? Este objeto de usuario tiene todo sobre el usuario en este punto porque esto fue a la base de datos y recuperar esa tarjeta roja de nuestra velocidad que tabla de usuarios. Entonces FirstName, LastName, cualquier cosa que hubiéramos puesto en el usuario de la aplicación es conocer este objeto para que puedas almacenar lo que quieras. Sólo estoy haciendo sugerencias. Conoce si ya escribiste user manager y estás obteniendo flechas. Eso se debe a que necesitamos inyectar monitor de usuario también. Y bueno, ya sabes, si lo estamos inyectando, eso tendría que inicializarlo como de costumbre, ¿verdad? Pero entonces esto es en el contexto de usuario de la aplicación. Muy bien, Así User Manager en el contexto de usuario de la aplicación dar al objeto el nombre inyectado para inicializarlo, y entonces podemos usarlo libremente. Utilizar un gestor como variable para biblioteca la cual tiene una serie de características y funciones para encontrar usuarios sobre el uso de la inflamación a voluntad. Entonces después de que sabemos tener todo el objeto de usuario, no hace falta decir actualizado por Anne y puedo ver usuario dot. Y como dije, se puede obtener cualquier información sobre el usuario a través de este objeto. Entonces si quieres almacenar la dirección de correo electrónico, nombre, apellido, lo que sea que quieras almacenar, eso está bien para mí. Simplemente voy a almacenar nombre de usuario. El nombre de usuario es el mismo que la dirección de correo electrónico o no. Quería almacenar el nombre de usuario de la persona que en este momento hizo esta opción. Entonces en cualquier momento que eso suceda, sé quién es y luego se excreta NO2, quién es. Entonces, solo hagamos una prueba rápida para asegurarnos de que nuestro fijo funcione. Muy bien, Alguien se ha dado cuenta de esto con la creación un nuevo micrófono y ya ves que estoy registrado prueba de negocio en blazer.com. Entonces otro micrófono fuera de un vehículo sería, digamos fiat, tamiz. Está bien, el fuego está almacenado. Echemos un vistazo atrás en su solicitud. Ir a ver datos. Y ahora estás viendo esa inflamación de auditoría. Por lo que los que faltan para pruebas previas y no, en adelante, debería estar bien. Correcto. 31. IMPORTANTE:: Oigan chicos, bienvenidos de nuevo. En esta lección, vamos a estar llevando a cabo una corrección de errores esencial. Y ese bug está centrado alrededor de los vehículos y probablemente cualquier otra operación de edición que tenga una lista desplegable. Entonces la anomalía actual es que aunque modifiquemos este vehículo, si cambiamos algo que tengamos que teclear, será exitoso. Pero luego cuando cambiamos las listas desplegables, nada cambia. Entonces si quisiera cambiar esto de negro a azul, se guardaría todo pero entonces todavía rutina el origen de los valores. Entonces vamos a estar abordando ese saber que el fondo de este tema tiene ver con la forma en que estamos recuperando los datos cuando estamos a punto de editar. Entonces en ella, treses o componentes, el código detrás para ello, al menos cuando tenemos el componente cargando, obtenemos el vehículo ahora están entrando en operación. Nuestra API en realidad está equipada con todos los Incluidos. Por lo que en realidad estamos incluyendo todos los detalles sobre lo que está sucediendo es que estos detalles se incluyen mientras que los identificadores pueden cambiar los detalles no. Entonces en The put, realidad solo está recibiendo el nuevo objeto con todos los detalles originales incluidos. Entonces lo que voy a hacer en esta lección se introduce otro punto final. Por lo que estamos separando get de Obtener detalles. Entonces en la AI HTTP y solo voy a guiarte por los cambios que he hecho hasta ahora. Entonces en el repositorio HTTP, he introducido otro comportamiento aquí que es obtener detalles. Por lo que tuvimos los consigue introduciendo get details, que va a tomar los mismos dos parámetros que el get, la URL y la ID. Y entonces su implementación simplemente agregará detalles de barras al final. Por lo que es idéntico de conseguir, excepto que va a especificar que queremos los detalles en contraposición a solo Get. Está bien. Entonces una vez que hayas hecho eso en el componente, puedes seguir adelante y, y modificarías al menos los componentes de vista. Entonces el componente Edit no cambiaría porque ya está consiguiendo, eso está bien. Pero entonces el componente de vista, que es donde realmente necesitamos ver detalles de cualquier componente o cualquier objeto que sea. En realidad vamos a decir obtener detalles. Por lo que si bien esto es específico para vehículos, esto también puede aplicarlo a otros objetos con los que pueda estar trabajando. Nuestras otras relaciones con las que podrías estar trabajando. Si estás viendo los detalles de un objeto que tiene relaciones y necesitas obtener Buck propiedades de navegación incluidas se incluyen detalles de otras tablas. Entonces probablemente querrás dividirlos todo esto. Entonces ahora que hemos modificado eso en el cliente, así que veamos lo que necesitamos hacer en el controlador o controladores. Conoce he especificado un camino de disfraz, así que tenemos el get original. Y lo que he hecho es sacar todos los Incluidos. Entonces al parámetro incluye que vino cortesía de nuestra unidad de trabajo, lo he sacado por completo. Por lo que realmente es sólo ir y conseguir el vehículo y devolver justo ese objeto, sin detalles extras ni nada. No obstante, cuando veamos obtener detalles, va a llamar a ID slash la palabra detalles. De hecho, este punto final en realidad se vería algo así cuando se golpea. También sería api slash, slash 05 slash la palabra detalles. Entonces realmente no necesito las llaves porque eso representaría más como un parámetro de valle. Entonces es literalmente la palabra detalles que espero después de la identificación. Entonces para este, todavía sólo estamos tomando un parámetro. Yo le he dado un nombre diferente por supuesto, porque no podemos tener un choque dice Get me podria ser colas. Y entonces éste tiene esa consulta completa con eso incluye parámetro involucrado en la operación. Por lo que cuando este vehículo sea devuelto, es devuelto con todos los detalles incluidos. Entonces, expongamos eso para una prueba. Por lo que de nuestra lista de vehículos, voy a pasar a los componentes del Vue. Por lo que he puesto un punto de interrupción al final del espectador. Y si miras los datos que serán devueltos, sí tiene los incluidos, el make the model y cualquier otra cosa pudo haberse especificado, correcto, Así que eso está bien porque estoy a punto de verlo. Por lo que querré incluir todos los detalles de otras mesas para tenerlo listo para su presentación. Y si voy a Editar, ya ves que las tetas, las originales se ponen. Y entonces este get sólo es devolver el vehículo con los campos correspondientes, no con nada adicional. Entonces haz que IS sea nulo, el modelo es nulo y cualquier cosa que se hubiera incluido originalmente es no, no. Entonces voy a seguir adelante y cambiar todas estas listas desplegables por algo diferente. Entonces esto ahora va a ser X5 y es verde. Y voy a dar clic en Actualizar. Y luego cuando miro veo el día de gama alta X5 y fue exitoso. Entonces esa es la solución a ese problema de edición. Si lo tenías, si no lo tenías, entonces bien, lo detectas temprano y lo resolviste. Excelente trabajo. Pero haciendo el proceso en curso de desarrollo de software, vas a ver estas anomalías en alguna forma de pruebas. Y siempre es bueno cuando se puede averiguar cómo resolverlos. 32. Añade Validación a las formas: Oigan chicos, bienvenidos de nuevo. En esta lección, vamos a estar buscando la validación. La validación es muy importante. O la realidad en este punto es que no sabemos a qué está entrando el usuario. No sabemos si incluso están entrando los puntos de datos son realmente pensamos que son importantes. Porque por ejemplo, aquí estamos con crear nuevo cliente. Puedo ingresar tal vez sólo un poco de datos, nada más. Y luego haga clic en Crear Anna personalizada, obtenemos datos muy incompletos yendo a la base de datos que se muestra al usuario. Eso no tiene sentido. Necesitamos agregar validación para asegurarnos de que los datos cumplan ciertos requisitos antes de que puedan ser enviados o antes de que el usuario pueda proceder a ingresar estos datos incorrectos en nuestro sistema. Por supuesto, la validación con after ocurre en el formulario de creación así como en nuestro formulario de edición. Porque de la misma manera que pueden poner en datos incompletos, pueden acudir a un completo nuestro completado o adquirido y remoto, eliminar datos vitales y luego actualizarlos. Y entonces seguimos en la misma situación para que la validación tenga que ocurrir a través de cualquier cosa que esté recolectando datos. Entonces para este ejemplo, vamos a estar usando clientes. Por nuestro conejillo de indias. Lo que he hecho es que he agregado dos campos nuevos, FirstName y LastName. El cliente de clase de datos, eso fue todo el camino hacia abajo en compartido. Llamamos al cliente, agregamos estos dos campos. Y luego fuimos al gestor de paquetes, tuvimos una factura fallida, pero luego agregué la migración y luego seguí adelante y actualizamos una base de datos y luego sabemos que podemos recolectar FirstName y LastName. Y así el impulsor el punto a casa sobre cuando hacemos cambios a la base de datos, como en este ejemplo. Y tenemos que actualizar la interfaz para reflejar que cuando tenemos un contenido de componente con para la recolección de datos, hace la vida mucho más fácil. Por lo que sólo voy a encontrar a nuestros clientes componentes de forma. Y entonces puedo simplemente añadir literalmente los dos campos aquí. Y serán aplicables tanto para la edición como para la Crea. Entonces déjame apurarme y hacer esto. Entonces por un tiempo no se ha visto que podríamos agregar más puntos de datos a los clientes como FirstName, LastName si no lo hiciste antes y quieres hacerlo nauseas oportunidad de que puedan seguir adelante y hacer las cosas de migración agregadas a la interfaz como le parezca conveniente. Y yo sólo voy a modificar el índice también. Entonces no soy de los que exhiben el esmox. Creo que todo lo que realmente necesitamos mostrar es tal vez como nombre completo del cliente, ¿verdad? Y entonces aquí puedo ver el espacio de nombre del cliente al decir apellido del cliente. Entonces conseguimos que se imprima el nombre completo en una columna. Muy bien, Agradable y fácil. Y luego puedes ver literalmente la vista a donde vas y ver los detalles. Entonces ese es el cambio PICQUIC. Entonces déjame enfocarme en esta lección que es la validación cuando estamos llenando este formulario. Y te das cuenta de que cuando estamos creando el formulario, ahora podemos poner algunas cosas que pierdo la validación, pero no está funcionando. Entonces tenemos que dejar que la ley de forma, qué reglas debe vivir. Para poder realizar esta validación, veo estos datos de palabra clave en las notaciones. De acuerdo, entonces las anotaciones de datos son nuestra manera de especificar reglas para los diferentes campos. Muy bien, entonces lo que estamos poniendo en un nuevo cliente, necesitamos poner en FirstName y LastName. Tenemos que poner un número de identificación fiscal. Tenemos que tener una dirección de correo electrónico y una dirección de correo electrónico legítima en la que debe estar el número de contacto, pero tal vez ese vestido sea opcional. Entonces trabajemos con eso. Diferentes situaciones requieren reglas diferentes, pero una vez más, este es nuestro experimento para ello hoy. Entonces voy a los datos, hablo con nosotros de donde se deriva esta forma radicales, sabemos que está usando el objeto del cliente, que es de tipo clientes. Por lo que la clase de datos está definiendo los campos que se pueden recopilar. Entonces para agregar anotaciones de datos arriba de campo, solo abriré corchetes y luego comenzaré a escribir. Y hay ciertas palabras clave, no lo es, van a empezar a escribir. Entonces si quiero hacer algo requerido, yo, tipo II y requerido, pero luego después de esta biblioteca de anotaciones, y una vez que eso se agrega, se ve Nalgene. Por lo que cualquier campo que esté viendo es obligatorio puede obtener ese TOD requerido por encima de él. De acuerdo, eso requirió anotación de datos. Entonces dirección, dije que no es obligatorio. Entonces voy a poner un espacio ahí para que veas esa dirección esas o tener esa bandera requerida por encima de ella. Por lo que FirstName definitivamente se requiere. Otra cosa que podría decir del primer tema es que la longitud de la cuerda debe ser máxima, tal vez 100, ¿verdad? Y tal vez mínimo. Entonces solo puedo decir mini mamá, longitud es igual a la longitud mínima mientras que FirstName que se pone en tres, ya sabes, podría ser joya o pongámoslo a dos. Está bien. J. Oh, esa es la similitud de longitud mínima para el apellido. Longitud mínima de dos, ¿verdad? No necesariamente memorizar todas estas anotaciones. Hay momentos en los que realmente tengo que ir y ver lo que son. Pero el punto es que están ahí. Y esta es la forma más fácil de especificar las reglas que rigen cada campo. Y otra cosa al respecto es que a veces estas anotaciones realmente afectan a la base de datos. Entonces si hiciera esto antes de la migración, entonces realmente haría algunas demandas de retención las escrituras de estas tablas deberían ser diseñadas o generadas en base a lo siento, mantener estos campos en las tablas de base de datos deberían se generen y qué limitaciones las nuestras propias. Pero centrémonos en la validación del lado del cliente o en la ausencia de toxicidad. Deja eso en paz. Pero entonces de nuevo, podría decir una longitud mínima, longitud máxima tal vez 10, y longitud mínima de tal vez ocho, ¿verdad? Dependiendo de los identificadores de esmox que estaban apoyando. Está bien. Otra cosa que probablemente querrías hacer es con un número de contacto, puedes decir algo como tipo de datos. Dot cuatro números, por lo que datatype y luego estoy especificando que este tipo de datos es de tipo número telefónico. De acuerdo, esas son las dos cosas que informan nivelar los campos como para dirección de correo electrónico, solo voy a copiar y pegar, pero hay un tipo de datos que dice dirección de correo electrónico. Entonces se tratará de validar estos en general Rosie puede conseguir más específicos y escribir tus propias anotaciones y validaciones y atributos. Pero no voy a entrar en eso profundamente. Y bien, no, Esto se ve lo suficientemente bien. Hagamos una migración y veamos qué surge. Por lo que agregaron validaciones, donantes tan cercanos. A ver. Entonces en este archivo de migración se genera, verás que un montón de alter column commons de Gamal gris y cada uno está viendo, vale, y el tipo es int varchar 15, la máxima prestada es de 15, fototoxicidad. Muy bien, Entonces los atributos de validación en la propia clase Data afectarán la migración, ¿verdad? Esto podría no ser necesariamente lo que quieres. Es hora por esa razón. Cuando llegas a aplicaciones más grandes, estás empezando tanto a abstraer como a crear capas. Por lo que tienes la clase de datos y luego tienes otra capa para las aplicaciones obstruyan las clases de datos para estos fines de aplicación. Y ahí suele ser donde pones tus validaciones porque es posible que no necesariamente quieras ver invalidaciones entre la base de datos y el lado del cliente. No obstante, en esta situación, ya que solo estamos usando estas clases de dominio compartido, y en realidad no es tan dañino considerando que si voy a pantallas es a nivel de interfaz, probablemente quiero que la base de datos rechazarlo si lo consiguió de todos modos, ¿verdad? Entonces eso es lo que obtenemos cuando hacemos una migración en una mesa que tiene R en una cruz, lo siento, que tiene estas anotaciones de datos y reglas de validación. Ahora puedo seguir adelante y actualizar base de datos porque no hará ningún daño. Pero la verdadera prueba para esta lección es lo que sucede en la interfaz. Aquí estoy consiguiendo unas flechas. Estas flechas son porque dice que no puede insertar el valor null en una columna Touch ID, ¿verdad? Porque aquí dije que se requiere identificación fiscal como resultado, lo está modificando y viendo que no es nullable, enviar una base de datos NO nulo sería, lo siento, nulo, nullable estaría en ticked. Por lo que no puedo pasar en nulo. Pero antes sí eliminé algunos datos de la columna de identificación de documentos. Entonces por eso ese sentimiento migratorio solo te lo estoy explicando. Está bien. De todos modos, vamos a arreglarlo en el nivel de interfaz y luego podremos volver a esa migración más adelante. De acuerdo, así que nuestro número uno con una toalla que son validaciones están funcionando aunque así no es exactamente como quería demostrarlo. Pero mira que estás obteniendo un error aquí. Por lo que estamos recibiendo un error no manejado cuando somos tendencias y cargamos a los clientes, note que empezamos a buscar a los clientes, así que estaba funcionando. Pero cuando vamos a la consola de nuestro navegador, vemos aquí donde estamos obteniendo nuestra respuesta 500. Entonces así la lanza, ¿algún dolor de corazón? Lo que realmente está pasando aquí es que tenemos los datos inválidos. En la base de datos se está consultando la Beta no válida. Y entonces todo ese error, error, un dato completo, está goteando todo el camino hasta nuestra interfaz. El API es Tolkien porque la base de datos no sabe qué hacer porque ve un montón de reglas y está recibiendo datos inválidos, ¿verdad? Entonces lo que voy a hacer es limpiar los datos inválidos, es decir, los registros de los que eliminé los datos vitales. Entonces solo voy a saltar al explorador de objetos. Y lo que voy a hacer es solo eliminar cosa que las reservas están relacionadas, así que tengo que eliminar ¿cuál es el nombre de nuestra base de datos? Ahí vamos. Tendré que quitar las reservas así como los clientes, ¿no? Entonces déjame solo sentir los datos rápidamente. De acuerdo, solo tengo una reserva de todos modos. Esta vista datos aquí. Y así ven aquí tenemos nulo, nulo , nada en la dirección de correo electrónico y Touch ID no lineal. Eso es lo que está causando los problemas. Por lo tanto, permítanme quitarles estos dos. En reserva. Esto es para un cliente con ID 1. Está bien. Por lo que voy a quitar 23. Esos son los problemas de la herramienta. Está bien. Probemos esto. Todavía tengo el aerosol adjunto para hacer nombre y apellido olvidadizo. Por lo que acabo de agregar cliente de prueba. Y cuando volvemos vemos vemos que nuestro pH se está cargando correctamente. No. Por lo que se ve la validación. Si hay datos inválidos, entonces no podrá procesar lo que está trayendo de vuelta. Está bien, así que todo está bien acoplado. Entonces cuando creamos un nuevo usuario, si traté de crear cliente, lo siento, crea un nuevo cliente y trato de crear sin poner nada que veas aquí que estamos recibiendo este montón de errores. Entonces esto, déjame simplemente meter camión al código y tipo de correr el paralelo contigo en cuanto a lo que está pasando. En primer lugar, el validador de anotaciones de datos está viendo, estoy viendo cualquier dato anotaciones de datos válidos adjuntas al modelo para el que se genera esta forma. Está bien, ya pasamos por todas las anotaciones son, estas son anotaciones. Sabe que esto se requiere y esta es la calidad de los datos esperada y tal. Entonces ese validador que está en la cima de nuestra finca, ustedes viendo, yo estoy vigilando el campo, el valor y lo que los requisitos se basan en los datos, en las anotaciones al golpear Enviar. Está bien. Estás tratando de decir enviar el formulario a la base de datos. Nosotros sólo atendemos el envío no válido, lo que significa que el envío inválido es modos impares automáticos. Podemos poner en una presentación inválida, pero no vamos tan lejos. El punto es que, en la presentación, no va a decir, bueno, este es el resumen de validación. Si la página se recarga, entonces el resumen va a mostrar la única forma en que la página no se recargaría es si todo fuera válido y pudiera proceder. Entonces cuando la página lo recarga mostrando ese resumen de validación. Y entonces tenemos esos métodos de validación específicos al campo que aparece debajo de cada uno, ¿no? Entonces conseguimos esto debajo de cada campo, que ese mensaje en realidad puede ser personalizado. Porque en el requerido podríamos poner mensaje es 0, mensaje de error. Ahí vamos. Y pudimos ver algo así como TR, esmofón. Yo D, bien, así que eso es todo. Por lo que podemos ponerlo como un mensaje personalizado en lugar de ese predeterminado para ver se requiere el campo. Se puede poner en ese mensaje de error basado en el requisito. Y luego básicamente para cada uno de estos, puedes especificar el mensaje de error que quieras, ¿verdad? Por lo que podrías ver nombre, nuestras existencias ID, por lo que tucks ID no cumple con los requisitos de longitud. Está bien, Entonces con esos dos mensajes, voy a refrescarme y sólo voy a poner atención al campo de identificación fiscal. Muy bien, así que recargué la página. Lo intenté de nuevo y noto enterotoxina, eso es lo que está apareciendo. Por lo que se acerca nuestro mensaje personalizado porque es requerido y no se proporciona nada. Y si meto uno ahí dentro, recuerda que dijimos que tiene que ser mínimo caminarlo a lo que fuera la tierra la tierra, pero mírala. No, Touch ID no cumple con los requisitos de longitud. Por lo que el mensaje con casi mirar contextualmente basado en qué regla se está violando en ese momento. Actualmente, si se requiere y no hay nada ahí, entonces no necesito mencionar los requisitos de longitud y mirar el cambio automáticamente. Entonces si empiezo a llenar a estos niños y llamo a éste Archibald, y luego mira eso. Douglas. Está bien. Está bien. Y llenamos el tote. Enfriar. Si digo crear cliente, mira eso, pero entonces la dirección de correo electrónico aún no está cumpliendo del todo con nuestros requisitos. Si voy a Editar, entonces necesitamos asegurarnos de que la validación adecuada en nuestra EMEA esa bebida. Entonces para eso realmente necesitamos esta anotación que diga dirección de correo electrónico. Entonces sí, podemos ver tipo de datos. Creo que esto es más con fines informativos, ¿no? Pero entonces en este punto estamos viendo bits válidos y dirección de correo electrónico. Y creo que para el número de teléfono, también podríamos ver el teléfono. Ahí vamos. Por lo que tienes diferentes validaciones para diferentes tipos de datos. Probablemente no seré tan estricto en el número telefónico sin embargo, porque no estoy seguro de qué reglas está jugando la validación por un, pero definitivamente queríamos ser estrictos en la dirección de correo electrónico. Entonces intentémoslo otra vez. Por lo que soy Buck en la vista de edición para este cliente, si traté de actualizar, note que no va a rechazar esa dirección de correo electrónico, no una dirección de correo válida después de asegurarme de poner algo que se parece a una típica e- dirección de correo. Y luego está satisfecho, hago clic en Actualizar y estamos bien para ir. De acuerdo, ahora que tenemos datos válidos en estos campos en, en nuestra base de datos, déjame intentar volver a ejecutar esta migración. Entonces la migración es, están ahí en, solo necesito verlo actualizar base de datos. Y ahí vamos, ya está hecho. Entonces ahora todo lo que tenemos los nuevos campos y las nuevas restricciones son propiedad de todos estos campos, ¿no? Entonces en el, a nivel de base de datos, si lo estás, si sabes sobre el diseño y las restricciones de desarrollo de bases de datos son reglas que rigen la caminata se pueden almacenar. Entonces así es como se puede especificar usando el código. Primer acercamiento, las reglas en torno a lo que se puede almacenar en toda la sala. Es cuando decimos n varchar y el tamaño, así es como se puede determinar el tamaño. Pero entonces por supuesto, algunas de estas cosas son más del lado del cliente que del lado de la base de datos. ¿ Está bien? Entonces desde una, desde una perspectiva compartida, esto es bueno porque llegamos a especificar hold el cliente debe comportarse y mantener la base de datos debe comportarse. Pero una vez más, hay momentos las reglas pueden no necesariamente ir en ambos sentidos en ese punto, quiere introducir otro nivel de obstrucción o donde se vean modelos que gobiernan lo que el lado del cliente o la IU se separa de la base de datos y lo que hacen los objetos de dominio. Entonces ahora que tienes un agarre de agujero para poner validación en tus antebrazos, conoces el reto habitual, sigue adelante y agrega validaciones similares a las otras tablas como más te convenga. Entonces yo no necesariamente voy a revisar este contigo porque éste es más contextos. Es posible que necesiten validaciones que no necesariamente veo como importantes y viceversa. Por lo que sigue adelante y mira tus requisitos de datos. Tienes requisitos de negocio, sea lo que sea, ya sabes, sin embargo quieres que tus datos busquen y agreguen tus validaciones en consecuencia. 33. Datos de exhibición de Blazor: Oigan chicos, bienvenidos de nuevo. En esta lección, queremos configurar un componente que nos permita ver los detalles de un contexto de registro particular. Aquí está nuestro cliente. Ahora sabemos que cuando creamos al cliente, ingresamos más de solo 1234 bits de datos. También ingresamos DNI y domicilio fiscal. Y bueno, creo que ese es el punto. El punto es que queremos poder ver y por eso tenemos aquí este botón azul que es sería para ver. Por lo que necesitamos establecer ese componente. Ahora bien, hay dos formas de pensar en esto. Una, tiene que ser de sólo lectura porque no queremos ir al botón Ver y luego tenemos que hacer. No queremos que sea editable porque estamos viendo los detalles. Esa también es una. ¿Cómo exactamente nos laimos contados? Una forma común de exponerlo con un bonito detalle. Nuestro campo a la izquierda, detalle al tipo correcto de formato. Algunas personas realmente simplemente reutilizan la misma granja Leo que se utilizó en el crear y editar y exhibirlas, pero de una manera de solo lectura. Entonces creo que vamos a usar esa porque esa es realmente fácil de implementar. Siempre puedes cambiar tu diseño. Hola lo deseas, pero te voy a mostrar algunos trucos y cosas más que podemos hacer para extender o formar componente relativo a los diferentes propósitos ya tenemos los componentes del formulario creando, lo tenemos editando ahora lo vamos a usar para simplemente hacer vista se leen. Por lo que usando la sección de clientes como ejemplo, vamos a seguir adelante y agregar un nuevo componente. Se puede llamar vista o detalles alcohol en detalles. Y lo que sí creo que usamos la palabra vista. Hicimos la cabeza, así que déjame quitar detalles y volver a hacerlo. Déjame crear un nuevo componente y lo voy a llamar vista de acuerdo con la convención de nomenclatura con la que empezamos. Por lo que nuestro componente se llama vista. En nuestro componente, vamos a tener que hacer algo similar a la edición. Entonces definitivamente vamos a necesitar todos estos en la parte superior porque necesitamos navegar a la página, pero éste va a ser View. Y luego vamos a tener que tener nuestro cliente HTTP así como nuestra navegación. Bueno, probablemente no necesitemos necesariamente al gestor de navegación, pero ya veremos qué es lo que hacemos. También necesitamos asegurarnos de que carguemos nuestros pozos. Entonces permítanme simplemente copiar todo esto realmente poner en nuestra opinión porque vamos a estar reutilizando ese componente. ¿ Está bien? No, estoy reteniendo todo esto porque los parámetros entrando, ¿ qué cliente quiero ver? Aceptamos el DNI y luego vamos a buscar al cliente. Aunque no necesito esta edición, porque la edición ocurrirá en este componente. Centrémonos en esta sección de componentes de formulario uno, no necesito un botón toma porque realmente no quiero que se muestre un botón de todas formas, no necesito establecer eso. No necesito sentarme en presentación válida porque no hay presentación que vaya a suceder. Pero una cosa que me encantaría hacer es decirle al componente de formulario que cuando se está cargando desde esta página debería estar deshabilitado. Entonces voy a añadir un nuevo parámetro. Yo lo voy a llamar el sable. Y eso va a tener un booleano. Es cierto o falso. O va a ser inhabilitado o no. Está bien. Observe que es azul porque no hemos modificado el componente de forma para reconocer. Entonces vamos a pasar a formar componente y hacer nuestra modificación. Por lo que necesitamos ese nuevo parámetro llamado disabled. Pues yo lo llamo el discapacitado, así que eso significa corriente no aquí. Entonces voy a llamarlo deshabilitado. ¿ Dónde estoy? Ahí vamos. Y va a tener un valor predeterminado de false. Está bien, entonces eso significa que si no se especifica, igual que con nuestro botón toma, si no se especifica, entonces asuma que la granja no está desactivada. De acuerdo, rápido, podemos ver fácilmente si y después nuestro AdSense, lo siento. Y luego SI. Y luego dentro de aquí podemos ver si está desactivada o si no está desactivada. Entonces eso significa que si desactivado es falso, entonces muestra el botón. Muy bien, así que solo muestra este botón que dice Actualización se guardan cuando deshabilitada es falsa. Muy bien, ahora, ya que se relaciona con la forma y deshabilitar la granja, y buena manera fácil de desactivar un montón de campos. Suficiente forma sería envolverlos todos en un conjunto de campos y luego establecer el conjunto de campos para que se deshabilite. Entonces hagámoslo. Entonces voy a agregar simplemente colapsar todos ellos para que sea más fácil para que podamos ver exactamente dónde comienza y termina todo. Y luego voy a crear esta etiqueta llamada Fields se sientan abiertos y la cerraré. Pero entonces voy a especificar que deshabilitado es igual a y esto sería verdadero o falso. Entonces si dije verdad, entonces este feto, si se siente establecido, lo siento, está deshabilitado. Si digo caídas, entonces nada habría cambiado. obstante, no sé si es cierto o Fazio de todos modos, sé que es lo que entra a través del parámetro. Entonces voy a ver deshabilitado va a tomar el mismo valor que tiene este parámetro. Y entonces puedo poner todo esto dentro de este set de campo. El botón se muestra cuando se deshabilita es igual a false, por lo que C, y este es el CML viendo equivalente de false. Solo para explicar caso eres principiante y ese es el botón. Y entonces todavía tenemos el bacilo porque cuando vemos todavía queremos opción de volver a lista. Está bien, así que eso es más o menos lo que estamos haciendo aquí. Entonces retrocedamos y volvamos a Ver. Y luego ves, ya sabes, es reconocer es que los deshabilitados serán ciertos en los demás componentes que usan ese componente de forma. No tenemos que especificar nada con deshabilitado porque lo configuramos como predeterminado en false. Entonces tomemos esto para dar una vuelta. Está bien, así que cuando vaya y haga clic en ver, mira lo que pasa. Todos los datos están ahí. Para el tipo de icono de sólo lectura. Todos estos están desactivados. Aquí no hay ningún botón que sugiera guardar nuestros crea. Y sólo puedo volver a List. Y ahí vamos. Por lo que ahora puedo ver América. Es agradable y fácil. Y no costó mucho esfuerzo. Una vez más, todo lo que hicimos fue extender nuestros componentes de forma para tomar otro parámetro en forma de discapacitados, que es un booleano que mordimos en falso. Y luego ponemos esta declaración if o en la pantalla del botón. Si desactiva esto cae, entonces muestra el botón. Y ya tenemos la ductilidad. Entonces no pusimos eso en el comunicado, claro. Y lo siguiente que hicimos fue en el componente vista, vamos adelante y buscamos nuestro registro. Básicamente cuando la empresa obtiene el DNI. Y luego cargamos nuestro componente de formulario con esos datos del cliente y lo desactivamos en el camino. Muy bien, así que eso es realmente todo. Para que puedas seguir adelante y aplicar ese mismo patrón a los demás componentes de los componentes de vista que tienes. 34. Código y añadir cambios a GitHub: Muy bien chicos, entonces en esta lección sólo vamos a revisar lo que hemos hecho para toda esta sección y revisar nuestros cambios en GitHub, comprometerlos. mi manera de salir de recapitulación, lo que hicimos fue Explorer, cómo nos comunicamos con el resto API desde blazer. Por lo que la mayoría de nuestros componentes tendrían inyectado este cliente HTTP y luego código para dar seguimiento a dónde hicimos esa llamada. También miramos cómo podemos cumplir con los endpoints más fáciles de usar a través de los diferentes componentes y reducir el riesgo de error. Y miramos la creación de componentes reutilizables, es decir, en forma de este componente de formulario, donde lo usamos tanto para nuestra edición de creación y luego vimos cómo podríamos ampliarla para utilizarla también para escenarios de solo lectura. También hemos introducido algunos otros componentes como este encabezamiento componentes. Entonces no pasamos por éste juntos. Yo lo presenté, solo sé dónde uso Bootstrap, estilo jumbotron. ¿ Está bien? Y en, inyectar a este prestatario lo siento, estoy esperando un parámetro llamado texto, que sólo voy a mostrar. Por lo que esto viene muy bien como en nuestra página de índice donde teníamos que ser trans o recordar todo lo que queríamos envejecer tres años con esta hierba cada vez. Por lo que podemos reemplazar esos encabezamientos este componente de encabezamiento y simplemente pasamos el texto que queremos mostrar. Entonces componentes reutilizables, ¿verdad? Bueno también configura a la multitud para todos nuestros recursos. Por lo que ahora todos nuestros recursos pueden crear, actualizar, eliminar y simplemente ver los datos que hay ahí. En nuestra API. Lo escribimos más allá de mal donde despegamos la slash api del camino, mientras que eso estaba causando un conflicto en el enrutamiento. Por lo que en el poupon api slash. Y solo para mostrarte una vez más lo que hicimos con nuestro archivo endpoints, acabamos de crear una clase estática con cadenas estáticas que acaba de construir los diferentes endpoints por recurso. Entonces si obtienes otro recurso que necesitas en la API, solo puedes hacerla para Institute aquí y reutilizarla en consecuencia en cualquier otro lugar y aplicación. También miramos la validación de datos y el agujero. Agregar anotaciones de datos a nuestras clases de dominio no sólo afectará dicho a los tratos UA con validación a nivel de granja. También cómo la base de datos, estas restricciones cuando está creando intermedias, creando las tablas las están modificando a nivel de base de datos. Entonces vemos, una vez más, discutimos que hay momentos en los que quizá quieras separar a estos dos pero por no, como Oh, solo estamos aprendiendo no irá tan lejos. Simplemente significaré t en eso. Entonces, solo sigamos adelante y pasemos para conseguir cambios. Y ese es mi mensaje rápido. Y entonces solo seguiré adelante y comprometeré todo. Y una vez hecho eso, puedes tomarte un descanso y te veré de nuevo en la siguiente lección. 35. Uso de un enfoque de código: Hey chicos, En esta lección vamos a estar hablando de Bowl totalmente puede separar nuestro u codificador o cita de marcado de nuestra lógica o el código C-Sharp? No. El hecho del asunto es que lo que tenemos hasta ahora funciona, ¿no? Tenemos un poco de marcado C agudo arriba arriba arriba. Estas son más como directivas. Esta es una página. Incluso estas cosas y autorizar, estas son todas directivas. En la parte superior, tenemos nuestro marcado, que es un híbrido de la sintaxis de Ariza sobre la sintaxis HTML. Y entonces tenemos nuestra sección de código o lógica abajo abajo. No, todo funciona como es. Pero luego hay un enfoque que podemos tomar donde realmente tenemos dos archivos separados. Uno para sólo el marcado como vemos aquí. Y luego podemos migrar nuestras ciertas partes de nuestra lógica y el código C-Sharp a nuestro código detrás de archivo. Está bien, así que voy a empezar usando los colores index.js o componente. Creo que esto es lo suficientemente bonito y simple para que nos levantemos y corremos y pongamos el concepto bajo nuestros dedos antes de que sigamos adelante y hagamos el resto de nuestros componentes, si así lo deseas, se va, esto es completamente opcional. No hay nada que diga que debes hacerlo o si no lo estás haciendo, no estás haciendo algo apropiadamente. Depende de tus objetivos, depende de tu contexto, por supuesto, pero al menos sabes hacerlo en caso de que surja la necesidad. Entonces lo que vamos a hacer es agregar una nueva clase a la misma carpeta con nuestros componentes. Y en realidad vamos a darle el mismo nombre a esta clase. Por lo que es index.js, balas de afeitar y punto de extensión extra CSS. Entonces es el nombre del componente dot raise o dot cs. Muy bien, Vamos a seguir adelante y dar clic en Agregar. Y lo que podría notar en el explorador de soluciones es que su archivo de índice podría anidarse bajo el componente de maquinillas de afeitar de índice. Sucede a veces no lo hace, a veces no está pasando para mí. Pudo haber sido para ti, pero eso no es problema. Siempre y cuando veas aparecer el archivo y hayas hecho el nombre incorrectamente, entonces debería funcionar. Entonces abre ese expediente de clase y a tenemos parciales públicos. Por lo que parcial significa que esto es medio implementación son parte de implementación de otra clase, ¿no? Entonces hay un componente es una clase y estamos viendo, bueno, la clase C-Sharp que estamos haciendo es parcial de eso. Por lo que todos trabajarán juntos. Simplemente se atarán automáticamente para darles no, eso está bien. Estos dos tipos de se pertenecen el uno al otro, ¿verdad? Entonces eso es todo empieza por migrar algunas directivas de lujo, nulas. Teníamos inyecciones, alguien para tomar esas inyecciones, todo nuestro componente. Y los voy a colocar dentro de la clase derecha. Ahora en lugar de tener el exterior inyectado, lo que tendremos es corsé cuadrado abierto, capita inyecto cerradillo cuadrado. Y tendremos que incluir algunas bibliotecas, a saber, los componentes del núcleo de dotnet que vario su objetivo. Y luego en otras bibliotecas para estos, para los clientes y estas otras bibliotecas que necesitamos. Entonces vamos adelante e inyectamos y hacemos lo mismo para el JS Runtime. Entonces podemos establecer esto como Obtener y sentarnos en estas dos propiedades. Está bien. Se puede poner el inyectable por lo que querían al lado, Lo siento, quería arriba. Realmente no importa. Tiene Ozzie, tienes la sintaxis correcta y estás bien para ir. Ahora después de hacer eso, lo siguiente que quiero pasar es toda la lógica, ¿no? Entonces voy a tener que tomar todo esto y voy a cortarlo. Después de todo, es una migración. Ahora la cosa es que si duplicas el código y obtendrás un montón de barcos Arezzo. Ya existe. Entonces déjame, déjame solo mostrarte un ejemplo. Entonces si dejo el código aquí, lo copié y lo pego por aquí, entonces vas a empezar a ver errores. Bueno, en realidad, si no moví las directivas, así que si la inyecté aquí, así como lo inyecté en el código detrás y empezarás a ver cosas sobre lo ya existe. O tienes una doble inicialización de algo, que no es una errata muy mala aquí como ejemplo, ambigüedad entre esto, esta propiedad, ¿verdad? Es fácil aquí, y también lo ve ahí. Entonces una vez que hayas visto ese tipo de error, si copias y pegas eso y ya sabes, está funcionando. Entonces desde que he hecho ese punto, permítanme simplemente quitar eso una vez más y luego seguir adelante. Veo la mitad de esas áreas de desaparecidos, las bibliotecas faltantes para nuestro o trozos de código. Y después de hacer todo esto, donde libre de errores por ambos lados, si hago una compilación, está bien, así que nuestra compilación fue exitosa y ahora solo tomémoslo para dar una vuelta y asegurémonos de que funcione. Pero antes de hacer eso, lo que voy a hacer es introducir sólo una línea de escritura de punto de consola rápida justo aquí y la asincrona no inicializada, que sólo va a decir código de calefacción detrás. Entonces esto es, esto nos permitirá desde la consola en el propio navegador ver este mensaje. Y entonces sabremos que Definitivamente está golpeando el código detrás no componente mérito como ningún código y sin inyecciones. Está bien, así que sigamos adelante y tomemos eso por nosotros. Está bien, así que aquí le damos a nuestra página de colores y todo es clon buck como de costumbre. Déjame ir al elemento inspect en la consola y verás aquí la línea console.log que ponemos en código de golpear detrás de tu cabeza. Entonces si en algún momento quieres imprimir algo a la consola o ya sabes, algo va mal. Yo quiero saber si tendrías asientos en la esquina o lo que sea. Siempre puedes usar ese console.log esa línea y en realidad sólo va a escribir en la consola en el navegador. Está bien, así que sólo puedo quitar esa línea. Y ahí tienes. Eso es realmente todo lo que hay para mover tu código a un código detrás de archivo. Una vez más, esto en realidad es muy opcional. No tienes que hacer esto. No hay estipulación que debas hacer esto. Como ya han visto, hemos conseguido que todo funcione hasta este punto. Para que puedas seguir adelante y hacer eso por el resto de los componentes. Ya sabes, un reto en sí migra sobre el código, pero claro que lo haré. Y más adelante tendrás mi código para comparar por si acaso te encuentras con alguna dificultad. 36. Gestión de errores globales: Oigan chicos, bienvenidos de nuevo. Entonces en esta lección vamos a hablar sobre el manejo global de errores. No se hace realmente un manejo de errores en c-sharp a través de lo que llamaremos unas declaraciones try-catch. Entonces solo escribí bandeja, presioné Tab dos veces y luego conseguimos este bloque de código, ¿verdad? Intenta, haz algo, capta cualquier error que te venga. Tirar significa chocar el programa. Así que solo piénsalo si no estás tan familiarizado con lo que es el manejo de errores, fuera de lo que acabo de mostrarte, solo piensa en cada vez que usas una aplicación cuando algo sale mal, tiene algo de flecha. Hace una de dos cosas. Es o esto trae un mensaje de error que dice, oye, ya sabes lo que trataste de hacer, no funcionó del todo. Estos dragón, el programa sigue funcionando. O a veces en realidad solo arroja el viejo tipo de programa, Hey, querer garabatear no es válido y entonces el programa se bloquea y subs funcionando. Entonces ese es esencialmente el manejo de errores. Por lo que puedes o chocar el programa a través de la declaración de tiro que solo quiero enderezar. O puedes llevar a cabo alguna acción. Muestra un mensaje, deja saber al usuario, oye, ya sabes, algo salió mal, por favor inténtalo de nuevo y luego pueden intentarlo de nuevo. Habríamos visto eso en el pasado cuando estábamos hicimos algunas modificaciones y creo que estamos tratando de conseguir mis reservas ni la lista de reservas. Habrías visto esa barra amarilla subir y entrar a la consola y leer el error y luego Bogan de moda, arreglo de tendencia en fenol, ¿qué estaba mal? Obviamente, no necesariamente querrías ese tipo de experiencia de usuario para tu oído, usuario real, está bien para ti como desarrollador porque necesitas arreglarlo. Pero cuando el usuario está usando el programa, no quieres que vean recargar y nuestro amarillo por algo salió mal. Yo sólo es una flecha V. Lo que vamos a querer hacer en esta lección es configurar. Una forma de que realmente podamos manejar los errores sin importar dónde ocurran en nuestra aplicación mientras escribimos el menor código posible. Eso también es clave. Por supuesto, los contextos de ticketing porque, ya sabes, quote, no necesariamente es malo, pero no quieres tener que estar escribiendo estos bloques try-catch cada vez que vas a realizar una operación que tiene esa llamada API. Porque si la API se siente, entonces nuestra aplicación se sentirá como hemos visto. Pero entonces tendríamos que escribir este try catch en cada lugar que hubiéramos estado haciendo una llamada API. Y como puedes ver, escupo todo Es la lógica y el componente de afeitar phys y eso serían bastantes. Está bien. Por lo que probablemente no necesariamente quieras tomar ese enfoque. Funcionaría, pero vamos a probarlo de una manera diferente. Entonces lo que vamos a estar haciendo para implementar nuestro manejo global de errores es instalar este paquete llamado interceptor de cliente HTTP. Por lo que sólo vamos a pasar a nuevo get en nuestra aplicación cliente. Y estamos buscando interceptor de cliente HTTP. Por lo que vamos adelante e instalamos toolbelt, dot blazer, dot interceptor. Ahora después de que eso haya sido instalado, vamos a pasar a nuestro archivo program.cs, y luego vamos a hacer algunos ajustes, empezando por nuestros servicios de construcción que agregan cliente HTTP. Entonces voy a cambiar a este cliente aquí. Cuándo abrir y cerrar paréntesis, y sólo voy a poner para corto SP. Y bueno, podemos sacar la palabra cliente. Entonces porque hay tipos sordos trabajando. Por lo que cliente SVN. Y luego voy a abrir un corsé rizado abierto y cerrado, pero primero lo voy a abrir. Y luego después de la definición de la dirección base del cliente, voy a cerrar ese corsé rizado. ¿ Todo bien? O si conmigo aquí, y luego después de esto ponemos un punto y coma y luego traemos 29 de nuevo. Ahí vamos. Entonces tenemos, en lugar de solo cliente abrirá y cerrará paréntesis sosteniendo Sb, que representa al prestador de servicios, ¿verdad? Y luego las plantas que representa al cliente HTTP. Y luego abrimos el corsé rizado y luego definimos cuál es la dirección base para el cliente. No cambiamos esa línea, no vemos que lo hacemos es agregar un punto y coma. Después cerramos la llave rizada y cerramos que son paréntesis. Tampoco modificamos esto, pero dentro de estas llaves rizadas, también voy a puntos del cliente e interceptar mordisquear. Está bien, y entonces esto va a necesitar que incluya ese cinturón de herramientas de la biblioteca. Qué fue toolbelt, Dr. Blaser, extensiones, inyección de dependencia. Ahí vamos. Y luego dentro de eso, vamos a poner todo un proveedor de servicios, que es el objeto de velocidad u proveedor de servicios, que ahí definimos. Muy bien, entonces podemos fijar el punto y coma ahí. Y luego después de eso vamos a Dawn un poco más, sólo una bala aquí. Esto es bueno. Podemos registrar nuestros en nuestros servicios de interceptación. Por lo que van a decir constructor puntos servicios. Puntos agregan interceptor de cliente HTTP. Por lo que el propósito del interceptor es sentarse hueso y monitorear todas las llamadas API y sabrá si fue una respuesta exitosa no lo son antes de que regrese. Entonces ya hemos pasado por qué, lo que ya hemos pasado por qué es lo que parece el éxito y cómo se ve una llamada sin éxito en cuanto a los códigos de retorno, ¿verdad? Es, ya sabes que 500, 400, esos no son exitosos. 200 es generalmente exitoso, ciento trescientos, esos significan alguna cantidad de éxito o el éxito no se ha alcanzado el temido. Entonces lo que pasa es que cuando llegas a 500 y algo salió mal, la aplicación en sí, como hemos visto, solo usa una muy vaga, no te dice exactamente qué salió mal. arte no deja saber al usuario, oye, ya sabes, las dificultades técnicas se arrastran más tarde. Eso es lo que estamos tratando de lograr aquí. Pero el interceptor será un lindo. Forma limpia de tener ese código siendo monitoreado por todas partes sin que tengamos que escribir try catch en todas partes. Entonces después de esto, tenemos que crear un archivo de código para que el interceptor sepa cómo debe comportarse, bajo qué circunstancias. Entonces en lugar del proyecto del cliente, voy a asumir que eso crea una nueva carpeta. Yo sólo lo voy a llamar sus servicios. Y luego en servicios estamos agregando una nueva clase. Y lo voy a llamar servicio interceptor http. Se UDP interceptación de servicio. Y seguimos adelante y agregamos eso. Y vamos a empezar con un constructor. Por lo que necesitamos inyectar dos cosas para ser muy específicos. Necesitamos el interceptor http y necesitamos nuestro nav, Mónica. Por lo que podemos simplemente seguir adelante y poner esos en los parámetros para nuestro constructor. Adelante e incluye cualquier referencia que falte. Ahora nos metemos en una cosita genial aquí para conseguir realmente se inicialicen en los resultados fríos, ya sabes, dinero mientras lo estás escribiendo o hemos estado haciendo Windows, haz clic en la bombilla y luego decimos crear y asignar campo. Por lo que sólo va a seguir adelante automáticamente y crear un asignado el campo y hacer eso todo en eyección. Por lo que podemos hacer eso para ambos parámetros, tanto para el encargado como para el interceptor. Y nota que estoy usando campo no propiedad porque es codicia privada, o el derecho. Por defecto, no viene con el guión bajo. Por lo que sólo voy a poner puntajes para ser consistente con la convención de nomenclatura que he estado usando hasta este punto. Pero eso no es mucho de gran cosa. Fuera del Smith. Simplemente usas esto porque tienen los mismos nombres. Entonces eso está bien. Podemos avanzar, saber que hemos hecho nuestras inyecciones. Y lo primero que vamos a hacer es configurar algo así como un manejador de eventos en este. A esto se le llama un querido hacer continuamente otra llamada a algo. Entonces es como un evento, ¿verdad? Entonces voy a decir vacío público, Digamos monitorear evento, ¿verdad? Y yo sólo voy a hacer esa inicialización 19 y ver punto interceptor. Y luego ven aquí son nuestros eventos que podemos armar pan. Entonces voy a decir después de enviar y luego hacerlo es como un incremento. Entonces después de cin, lo que significa continuamente cada vez que estás haciendo esto, solo haz esta llamada de función. Entonces voy a ver inter respuesta. Una vez más, queremos esto, esto va a sentarse entre nuestro cliente y la llamada API. Por lo que necesita realmente ver cuando se hace una llamada, obtener las de Butler antes que el cliente y luego ponible para decirte qué debe hacer cuando intercepte la respuesta. Muy bien, Entonces al interceptar nuestra respuesta, qué césped hacer es evaluar qué tipo de respuesta es y tomar una acción. Por lo que solo estoy generando el método para la respuesta de intercepción, vacío privado, respuesta de interceptación y el remitente y los argumentos de evento. Si alguna vez has trabajado con WinForms o formularios web, sabrías todo sobre estos si nunca has tenido que construirlos fuera de ese contexto, claro, pero sigamos. Entonces lo que queremos hacer es un mensaje. Podemos simplemente encontrarnos con eso una cadena vacía para empezar. Y luego quería ver si E, Así E representa el evento o la respuesta del evento, el resultado de mí tratando de hacer algo. Por lo que E punto. Y si miras aquí, verás que tienes acceso a la respuesta bajo las solicitudes. Puedo mirar para ver lo que se solicitó y el reloj para ver qué respuestas. Entonces voy a decir si el punto de respuesta E dot es código de éxito, bien, es cita de éxito significa que son los 200 a 300, los 100 y algo que no significa un error, ¿verdad? Bueno, si lo miras por definición, realmente es al 100 al 99, de lo contrario es falso. Entonces eso es lo que es el éxito. Entonces realmente quería hacer manejo de errores, lo que significa que si quiero, realmente quiero ver, si no es un código de éxito, entonces hago algo. Está bien, porque entonces si se trata de un Cisco sal, entonces la aplicación puede ejecutarse como es normal. Pero si no fue un éxito de lo que quería poner en acción. Entonces quería decir que el código de respuesta var es igual a. Y entonces solo podemos decir e dot dot Stato anotó. Ahí vamos. Y entonces podemos tener como un switch nuestro if statement sólo para pasar por las diferentes opciones. Entonces, ¿qué si quisiera hacer algo si fuera un 40 para diferente a si fuera un 500 diferente a si fuera un 40, 1, lo que significa no autorizado y cosas así. Correcto. Entonces tienes diferente si quieres conocer diferentes caminos diferentes basados en, oh Dios mío, ¿quién consiguió eso? Eso fue un accidente en mi imperio. Pero ahí ya te está dando todos los códigos de estado los cuales probablemente realmente ni siquiera necesitarán, no necesitamos todos estos. Entonces sólo voy a deshacer eso. Y los que estaban realmente, realmente, realmente quieren enfocarse de todos modos serían el código de estado HTTP de caso. Déjame solo hacer esto fuera del código de estado HTTP y hacer cualquier incluye que tenga que hacer. Y entonces quiero ver tal vez por 500 o bien, empecemos con lo no encontrado, ¿verdad? Entonces si está encendido no telefoneado, entonces quiero tomar algún curso de acción. Déjenme simplemente poner eso ahí. Y digamos si fueron tal vez 40 Huan son un no autorizado, no autorizado y también tienen prohibido, ¿verdad? Entonces si es cualquiera de estos, entonces probablemente queríamos volver a mostrar lo mismo, un mensaje y luego los valores predeterminados, solo dejaré eso para decir que si no era alguno de estos, entonces solo por defecto. Entonces ese mensaje de error genérico playa que dice, ya sabes, algo salió mal estos dragones más tarde, que probablemente sería como un 500. Entonces solo te estoy mostrando que puedes conseguir específico. O simplemente puedes tener ese genérico. Entonces aunque no quisiéramos ver caminos diferentes, sólo podríamos decir, si no fue un mensaje de éxito, nuestro éxito marcó, entonces hazlo. De acuerdo, así que voy a poner estos buck. Y la razón por la que tenemos al gestor de navegación, el directivo inyectado es que quiero que tengamos páginas diferentes para los diferentes caminos que se podrían tomar. Está bien. Entonces solo se adelantó y llenó todo el resto de ella y solo te acompañaré por tierra. El caso para los no telefonados. Vamos a decir que un novedoso gestor dot navega a una página llamada fluoróforo, que por supuesto vamos a crear. Este mensaje es lo que se mostrará probablemente en el, la consola del navegador. Entonces vamos a tener que tirar algo a todo esto, pero eventualmente llegaremos. Entonces vamos adelante y navegamos a los 40 porque nos encantó esto a la consola. Si estás lejos a mediados de marzo, no autorizado navegará a no autorizado. También nos encantó esto en la consola y luego por defecto, lo que significa cualquier otra cosa que fuera un fracaso. Simplemente navegamos a la página 50, 100 y luego vemos que algo salió mal. Póngase en contacto con el administrador. Después de hacer todos esos cheques, vamos a tener que lanzar una excepción. Entonces solo podemos decir lanzar nueva excepción y sólo vamos a pasar ese mensaje. Está bien, así que eso activará un poco la obligación de saber que, oye, algo en realidad salió mal. Pero una vez más, en realidad podemos navegar a una página donde le mostramos al usuario un agradable, amigable nosotros, que manejamos la situación. Ahora después de hacer todo eso, tenemos una cosa más que tenemos que hacer donde necesitamos disponer del evento. Por lo que iniciamos el evento donde continuamente estamos llamando a este método a ver. Y luego tenemos que llamar a disponer evento, donde vamos a hacer lo contrario. Por lo que aquí estábamos agregando y acumulando. Aquí sólo hacemos menos igual arte. Entonces después de hacer todo eso, vamos a tener que registrarnos y nuestro program.cs, los hechos de que existe este servicio. Entonces vamos a hacer eso debajo. El anuncio es interceptor cliente HTTP donde acabamos de poner y esculpir y poner en el nombre del archivo, por supuesto, incluir cualquier referencia faltante. Y entonces estamos listos para seguir adelante e implementar todo este servicio. Entonces volvamos a nuestro archivo CSS de punto índice. Y lo que haremos es dejar que esta clase parcial herede de yo desechable. Por lo que esto realmente nos dará un método que nos permita disponer de cualquier objeto no queremos después de que su vida se haya ido. Por lo que generalmente lo que sucede es que la disposición se llama cuando el componente continúa son cuando el componente ya no es necesario por la aplicación. Pero lo que queremos hacer es poner en alguna lógica personalizada para desechar a nuestro interceptor. Entonces, bueno, antes de que podamos hacer eso, inyectemos el interceptor. Entonces solo voy a duplicar esa línea y voy a agregar HTTP inter cetro. Déjame simplemente copiar este servicio de interceptores. En lugar de tendencias son los isótopos. Adelante, incluye referencias faltantes. Muy bien, y luego déjame empezar con el disponer. Esa es probablemente la más fácil de hacer aquí. Simplemente decimos punto interceptor y ya tenemos el método que dice disponer evento. Entonces podemos seguir adelante y hacer eso, ¿verdad? No, fuera de eso, queremos monitorear realmente lo que va a suceder. Entonces justo antes de que realmente hagamos nuestra llamada, podemos ver eventos de monitor de punto interceptor. Y eso es todo. Entonces cuando decimos evento monetario, entonces va a iniciar este método que no es monitoreo para ver cuál es la respuesta y qué debe hacer después. Está bien, así que esa es una forma agradable y limpia de tener algo ahí para ver lo que va a pasar. Por lo que sólo podemos hacer eso en todas partes. Tenemos un servicio llamado barco para hacerse en tantos archivos. Veo que esto es mucho más fácil de poner. Entonces todo el try-catch, try-catch, try-catch, porque eso llevaría a mucha repetición. Entonces lo voy a hacer de nuevo en el create. Por lo que en realidad inadvertidamente puse el código ahí sin ninguna inyección y es de cero otra vez uno voy a poner en el ojo implementos desechables esa interfaz. Y luego voy a ver, y no quieres necesariamente después de escribir el código en esta arteria y estoy seguro de que lo sabes, pero sé que puedes escribirlo en cualquier orden si te sientes cómodo con el tiempo que seguir los pasos. Entonces tenemos el interceptor siendo desechado, tenemos la intercepción están monitoreando la función, lo siento, la llamada API aquí. Y entonces la última parte de este rompecabezas es sólo lo inyectado. Y yo sólo voy a las de nuevo, copia esta línea para no tener que escribirla todo desde cero y voila. Muy bien, entonces estamos llevando nota al completar esta actividad. Otra cosa que tenemos que hacer es crear las páginas de error porque sí vimos que quería una página llamada fluoróforo para ser navegada herramienta, una llamada al autor como no deseada llamada 500s. Así que acabo de morir y creé esos componentes. 40 para y no es nada fondos. Es sólo una página con una etiqueta H1. Ver nos lleva recurso de peligro que estás buscando, no se pudo encontrar. Es dirección de navegación como OLAP decir página barra inclinada la dirección. Entonces eso es 404. Tenemos una configuración similar para el 500 y tenemos no autorizado y ten en cuenta Azar ya que tus componentes tienen que empezar con mayúsculas o no autorizado es U mayúscula, pero la dirección de navegación está bien como un poco común. Eso depende de ti. No estoy poniendo nada demasiado elegante en estos componentes, pero claro que puedes mejorarlos como tú o tu contexto lo requieran. No, en el controlador de colores, voy a poner un no encontrado justo al inicio de este método donde nosotros, ya sabes, cuando la página de índice se llama causa obtener colores, ¿verdad? Entonces lo que llama el get y trata de conseguir los colores. Entonces sólo vamos a devolver nuestros 40 por adelantado y ver cómo reacciona esto. ¿ Verdad? Entonces sigamos adelante y miremos la página en busca de colores y estamos calentando los puntos de ruptura para que veamos, ya sabes, que solo debería devolver un 400 para que alguien quite los puntos de rotura y presione F5 para que continúe. Y voila, el recurso que buscas no podría ser el teléfono. Esa es nuestra página 404. Está bien. Por supuesto que estamos recibiendo este error no manejado porque lanzamos una excepción. Si miramos en la consola, vamos a ver que se lanza esa excepción con el mensaje, ¿verdad? Entonces te toca a ti si realmente quieres lanzar una excepción y sabes cómo se carga esta barra amarilla, porque eso no significa nada para el usuario, ¿verdad? No es que estemos usando. También entra en la consola y mira las flechas. Por lo que en realidad podríamos prescindir de esto, lanzar nuevas cartas de excepción al final del interceptor. Y el interceptor realmente lo maneja todo con gracia para nosotros. Está bien, así que podríamos decir, navega a esta página, ¿no? Podríamos incluso mejorar el, los componentes tal que acabamos de pasar en el mensaje como parámetro. Entonces no queremos duro escribir dicho que toma dinero. Bueno, es, una vez más, depende enteramente de ti, pero tienes el concepto y también puedes seguir adelante e implementar esto en tu aplicación. Y es una forma agradable y limpia de manejar flechas porque no sabemos qué podría pasar con la API. Algo podría verse interrumpido en nuestra calidad get bokeh 500. En lugar de escribir demasiado código personalizado por cada 500 potenciales, simplemente escribimos código genérico, código global para ver que algo salió mal. Por favor arrastre en nuestros administradores de disparos de p aunque. Depende enteramente de ti. 37. Agregar cambios a GitHub: Oigan chicos, bienvenidos de nuevo. Por lo que hemos llegado al final de otro puesto de control. Y en esta sección, todo lo que realmente hicimos fue mirar cómo podemos refactorizar parte del código en nuestros componentes al tener nuestra sección de componentes o UI en diferente del código detrás, correcto. Entonces lo hice para colores, clientes, modelos mixtos, vehículos. No lo hice por reservas. Por lo que dejé éste en su estado original para preservar lo que puede parecer. Y luego lo hice por todos los demás, ¿no? Tampoco lo hizo por los componentes foráneos porque realmente eso era todo lo que había a ello. Por lo que no me molesté en algunos sólo mostrarles que no es absolutamente necesario. Por supuesto, no es necesariamente ideal mezclarlo y emparejarlo de la forma en que estamos viendo que lo tengo en esta sección, es así y luego separado en otras secciones. Es bueno ser consistente justo en todo el tablero. No obstante, los dejo ahí como ejemplos de código para tu característica o amigos. Aparte de eso, también agregamos el manejo global de errores usando el interceptor HTTP, http, lo que nos permite usar una sola línea a tipo de monitor. Y eso lo hicimos específicamente en el índice una línea a tipo de monitor si va a ser exitoso o no. Por supuesto, con esta sola línea, tenemos el inyector, atención al cliente, así como asegurarnos de que nos deshacemos solo para asegurarnos de que nada permanezca en la memoria demasiado tiempo. Por lo que después de hacer todos estos cambios, queremos seguir adelante y facturar. Entonces como de costumbre leemos o mensaje útil y luego seguimos adelante y comprometemos todo y nos hundimos. 38. Personalizar la imagen y la lógica: Oigan chicos, bienvenidos de nuevo. Entonces lo que queremos hacer en esta lección es como explorar algunas de las partes más importantes de la biblioteca de identidades y ver qué necesitamos modificar. Qué es un lindo tener y solo tener una sensación general de ello. Por lo que no voy a caminar a través de él con gran detalle, al menos no en este curso. Si quieres entender la identidad y entender toda la funcionalidad, puedes barajar mi otro curso donde pasamos por la identidad, núcleo y todos los trabajos internos foráneos, aunque solo queremos una especie de brillo sobre ella porque en el fin del día, queremos brindar algunos básicos para protegerla. Y lo hemos estado haciendo. Implementamos o un login, implementamos nuestro registro. Y en nuestro proyecto teníamos manojo estropeado de páginas relacionadas con la identidad y las gestiones. Si tan solo ampliamos esto, si te has olvidado en el proyecto de servidor, en áreas páginas de identidad, si me hubieras seguido, entonces habrías andamiado todas estas páginas. ¿Ves eso? Y en lugar de menorragia, más páginas para que esas posiciones que en realidad proporcionaron mucho, tal vez no todo fuera, pero bastantes páginas orientadas a ayudarte a ti y tus usuarios a administrar tu propio usuario o conos dentro de la aplicación. Si no seguías los pasos, siempre pudiste ir a Pages, hacer clic, Agregar nuevo elemento de andamio, luego ves identidad, y luego puedes destrozar a los adultos. De lo contrario, siempre se puede volver a visitar el video anterior. Ahora en este video, solo quiero que pasemos un poco por lo que hay y cómo podemos ajustarlo para que tal vez tengamos una mejor experiencia para nosotros mismos. Por lo que hemos estado haciendo el login, sabemos sembrar usos y así sucesivamente. Veo que esta página es drásticamente diferente al resto de nuestra página web. Ahora probablemente quieras modificar esto. Y si realmente miras el contenido de la página, verás que no todo aquí es realmente relevante para nuestra aplicación. Entonces puedes, si no haces que se vea exactamente como esta piel con la parte triste, barra lateral y todo. Pero probablemente no necesites incluir el texto usando otro servicio para iniciar sesión, que por supuesto es contextual, porque si este es un up interno para tu empresa, entonces el único servicio que quieres facilitar es el usuario gestionado por la empresa o conos. Si se trata de una aplicación de cara pública para usuarios en general, público en general, entonces es posible que desee mirar ampliarla para apoyar el inicio de sesión de Facebook y así sucesivamente. Pero una vez más, no voy a cubrir todo eso en este curso en particular. Pero si quieres modificar esta página, verías que en la URL dice barra de identidad un inicio de sesión de barra de dos puntos. Entonces si volvemos a nuestro proyecto y buscamos en nuestras páginas andamios veríamos que la identidad son copropiedad. Y luego tenemos la página de inicio de sesión. Por lo que esta es la página que se nos está atendiendo cuando hacemos clic en iniciar sesión. Entonces eso significa cualquier cambio en mí si queremos quitar el enlace de contraseña olvidada. Entonces es un que estamos usando enlace de confirmación reciente. O empecemos con los inicios de sesión externos, los inicios de sesión externos. Por lo que no tenemos ningún inicio de sesión externo en quería que alguien eliminara toda esta sección. Yo sólo voy a colapsar que han borrado. Y entonces probablemente quiero que esta sección on con los cuadros de texto ocupe más espacio. Entonces lo que voy a hacer es ampliar esto a MD 12 para que se estire para los anuncios a través. Muy bien, también puedo decir Usa tus conos de empresa para iniciar sesión. Muy bien, entonces estas son todas las cosas que podemos hacer aquí mismo en la aplicación. Y puedes modificarlo como lo veas conveniente. Si querías cambiar el diseño general de la página porque notarás que tanto el inicio de sesión como el tipo de registro tienen un diseño similar. Una vez más, solo hay una página que nos está disponible para su modificación. Aquí tienes una página de registro. Entonces si quisiéramos hacer una modificación similar para eliminar esos inicios de sesión externos accionables, también puedo colapsar y eliminar eso, ampliar este formulario para ocupar toda la página. Y luego cualesquiera que sean todos los cambios que necesitamos hacer, podemos hacer. No, no estaba en el punto de que si quisiéramos cambiar el diseño general de toda esta páginas, entonces lo que podemos hacer es ir al explorador de soluciones y buscar y ver comienza, lo que indicará dónde se llama esa página de diseño . Y eso es páginas slash barras barras compartidas layout.css HTML. Y si miras en compartido, no lo verás. Pero luego si bajas a la carpeta Páginas, entonces encontrarás compartida. Y ahí está nuestra disposición. Entonces desde aquí, y si alguna vez has usado las páginas de dotnet Core MVC o caballete, estarás al menos familiarizado con este tipo de página de diseño donde es página estándar Bootstrap 4. Y luego puedes cambiar los elementos del menú. Por lo que puedes ver aquí aplicación de gestión actual, en lugar de solo el nombre del proyecto , ya sabes, puedes personalizar todas estas cosas. Está mostrando un montón de parciales y algunas condiciones. Probablemente no necesariamente quieras modificar cada cosa, pero sin duda puedes cambiar algunas cosas para que se sienta más como tu aplicación en lugar de solo una plantilla madre. Muy bien, así que aplicación de gestión de autos y Tom, pones los lugares clave. Si hay una declaración de privacidad, entonces seguro, adelante y haz eso. Y hace que el año y todas estas cosas maravillosas que conozco la mayor parte de esto una vez más, fue una especie de hecho para el apoyo de las páginas relacionadas con el servidor de identidades. Está bien, así que quieres tener mucho cuidado como haces las modificaciones. Pero para las etiquetas HTML generales, cualquier cosa que no sea para elevar orientado, entonces puedes seguir adelante y hacer tus cambios y arreglarlos como más te convenga. Ahora solo voy a reiniciar esta aplicación dados todos los cambios que acabo de hacer. Y luego cuando aparezca la aplicación y voy a iniciar sesión, sabes que vas a ver la página de inicio de sesión se ve diferente, ¿verdad? Acabo de modificar el diseño hasta cierto punto. El rancho ya no está preguntando a Theobald, es cualquier cosa que no sea relevante para la aplicación. Y el texto parece un poco más acogedor nulo. Está bien. ¿ Y justo lo mismo para la página de registro? No, en cuanto a agregar más campos a la página de registro. Y otra cosa común que probablemente quieras hacer no solo es pedida el e-mail, sino que tal vez e-mail o nombre de usuario o simplemente nombre de usuario porque Ryan No, lo que pasa es que este formulario está impidiendo una dirección de correo electrónico para el nombre de usuario y acaba de cerrar algunas pestañas que no son absolutamente irrelevantes, ¿verdad? No. Está bien. Entonces, empecemos con la página de registro. Está bien. Por lo que la página de registro está siendo Razor pages aplicación son matrices de páginas página. Entonces tiene el código detrás, ¿verdad? Entonces si solo miramos las páginas traseras por repetidas, verás el CSS, HTML. Css. Como que miramos algo así cuando ya no podemos son los componentes blazer y el código detrás de archivo, ¿verdad? Por lo que siempre la página aquí tiene un código detrás. Entonces, cualquiera que sea el archivo de punto CSS, HTML y CSS detrás de él, este es el CS5 detrás de él. Y lo que verás aquí es que tiene una propiedad clave llamada modelo de entrada de tipo modelo de entrada llamada entrada. Y entonces eso es realmente sólo una clase. Y este vidrio se utiliza para modelar la forma. Por lo que esta clase sólo tiene campo para dirección de correo electrónico, que se está mecanizando fuertemente como una dirección de correo electrónico. Analizamos la validación. Entonces por eso tenemos que usar una dirección de correo electrónico al momento de registrarnos y posteriormente tenemos que usarla para fines de inicio de sesión. Sepan que si quitamos esta restricción y dijimos, ya saben, cadena pública, usuario por el bien del argumento. Y dijimos que ingresa tu nombre de usuario o tu dirección de correo electrónico. No es tan estricto como requerir una dirección de correo electrónico en ese momento. No obstante, no voy a molestar eso. Creo que me gustaría dirección de correo electrónico es una buena manera de mantener todo lo que necesitas para la columna de nombre de usuario. Y sirve para un propósito de ir tanto en nombre de usuario como en dirección de correo electrónico. Entonces podemos dejar a ese extranjero en decepcionante todas estas cosas clave en caso de que quieras probablemente modificar. Conoce a nuestro usuario de aplicación. Déjame detenerme y saltar a nuestro modelo de usuario de aplicación. Aquí vemos que tenemos FirstName, LastName, y luego es, está heredando de identidad usuario. Entonces eso significa que tenemos la capacidad de almacenar nombre y apellidos en nuestra base de datos para cada usuario, lo cual no es una mala opción, ¿verdad? No. Y si lo queremos cuando la persona está registrando el nombre de entrada y apellido. Y por extensión, puedes agregar otros campos si quieres una fecha de nacimiento, género, etcétera, podrías agregar todo eso aquí. Pero entonces la parte clave para ello es que en el modelo de entrada, se necesita tener representantes encendidos para estos campos. Entonces si yo en el modelo de entrada pongo en intereses bien esos dos campos, y vamos a cumplirlos requeridos porque no tiene sentido para nosotros. O hacer uso de un IAM, lo siento, FirstName y LastName opcionales, pero el correo electrónico no es correcto. Entonces correo electrónico, nombre, apellido, contraseña, y confirme contraseña. Y ves que están usando los datos sobre notaciones que miramos cuando ya no se pueden validaciones, ¿verdad? Por lo que todas esas cosas se requieren no, on get. Todos esos son bajos. El pH. Incluso podemos eliminar esta partícula en inicios de sesión externos. No estamos usando un inicio de sesión externo. ¿ Qué es yo no soy código lineal todavía. En el puesto. Vemos que valida. Entonces esto es lo que validamos. Y luego construye el objeto de usuario antes de que siga adelante y lo crea. No, acabo de pedir FirstName y LastName además del correo electrónico y la contraseña. Entonces eso significa en la construcción de este objeto, puedo saber proporcionar valores para FirstName. Y ahora esos Brian Kernighan, nombre de pila ahora puede ser igual al nombre de punto de entrada. Una vez más, la entrada es solo el tipo de objeto que representa el modelo de entrada, que es lo que acabamos de modificar. Por lo que ahora puedo poner en el FirstName y ahora puedo poner en el apellido. Entonces eso significa que cuando alguien se registra, debe tener datos en los campos de nombre y apellido. Bueno, ese es el código detrás de la interfaz, sin embargo, todavía no refleja eso. Entonces lo que vamos a hacer es modificar la interfaz para saber que debe tener cuadros de texto para nombre y apellido. Y ahora esos lo hacen simplemente copiando y pegando el cuadro de texto para el correo electrónico. Y solo diré en la parte superior FirstName. Entonces esa es una etiqueta para entrada de primer nombre para nombre y una validación para FirstName. Y luego lo mismo para LastName. Y luego por correo electrónico cuando los copio vía dos veces. Por lo que Email permanece como correo electrónico. Entonces sepan que hemos cambiado este formulario cuando alguien se registre, podrán proporcionar sus datos completos y luego registrarse y tener ese registro. Entonces hagámoslo para una prueba rápida. Entonces solo me voy a registrar para que vea esquema para nombre, apellido, no se notó FirstName. Eso es algo así juntos. Es CamelCase pero no hay espacio en el medio, así que solo voy a arreglar eso antes incluso de ir más allá. Entonces de vuelta en entrada, lo que puedo hacer es decir display. Mi nombre es primero el nombre con un espacio en él. Muy bien, entonces eso es lo que renderizará la etiqueta. Está bien, así que estos no serán los apellidos, así que déjame reiniciar eso y mostrarte cómo es eso. Y aquí estamos. Nombre, apellido, para que vean que se ve mucho mejor. Entonces déjame solo poner algunos valores aleatorios y golpear Register y veamos qué pasa. Muy bien, entonces el registro, algún proceso fue exitoso y eso se debe a que con éxito en la publicación creó ese objeto, creó al usuario. Adelante y desde ese código ahora esta parte de Etruria, ese remitente de correo electrónico y así sucesivamente. Podemos verlo más tarde. Hold to realmente se configura en sistema de correo electrónico en nuestra aplicación blazer, lo cual es muy importante para la seguridad porque queremos verificar que la persona que se está registrando pueda recibir y validar Will son, correcto. Es solo otro nivel de seguridad que aporta comodidad tanto a la empresa como a sus potenciales clientes, ¿verdad? Entonces eso fue lo que pasó cuando nos registramos. ¿ Está bien? Ahora si tan sólo miras mi insuficiencia que eso podría necesitar un poco de arreglarse y eso está bien. Pero entonces si hago clic en la sección que dice Hola, GOP's va a abrir la página de perfil, que una vez más es sólo otro archivo que se encuentra dentro de esta carpeta. No, Este está dentro administrar, dice una tira de dos puntos manejar. Y creo que eso sería índice, ¿verdad? Por lo que un corte de colon manejar. Y luego buscamos el archivo índice, y esta es la página que estamos viendo donde está mostrando el nombre de usuario, el número completo, cualquier cosa que esté en el sistema para esta persona escribe podría fácilmente poner ese en, Guardar y se actualizaría el perfil con eso, hago click email, me está mostrando que ves que todas estas cosas están justo aquí. Por lo que puede darle a un usuario la capacidad de administrar su propia o copropiedad, restablecer su contraseña o cambiar su contraseña u otra, y configurar a un PHP si es necesario. No tenemos ningún tophi it, pero solo te estoy mostrando todo lo que nuestra biblioteca de identidades nos permite hacer. Una vez más, siempre puedes modificar el diseño si quieres que muestre más información aquí. Entonces bien, ningún modelo de índice es simplemente mostrar el número de teléfono. Pero entonces siempre se puede extender eso. Siempre puedes extenderlo para incluir el FirstName, LastName, y cualquier otro detalle que quieras que lo usen para poder ver y modificar cuando la R en eso. Ahora los bucking se levantan, solo voy a cerrar la sesión. Y luego verás que hay un registro de errores o no, cuando estábamos configurando la navegación o reescribiendo todo el componente de navegación, habría eliminado algunas citas vervet. Entonces, ¿voy a escribir eso mal o bien? No, no. Si saltamos al componente del menú de navegación, verías aunque teníamos pobres a los contenidos de visualización de inicio de sesión a esta zona. De acuerdo, ahora si pudiera comparar esta sección para la autorización en con la pantalla de inicio de sesión, verías bien, en primer lugar, la comparación de componentes. Hay algunas inyecciones en algunas bibliotecas que se utilizan en la pantalla de inicio de sesión. Y también hay código al final del componente de visualización de inicio de sesión. Ahora lo que pasa es que el procedimiento de logotipo es realmente como un envío de formulario en contraposición a solo link click. Por lo que habría sustituido el botón que habría presentado un formulario o al menos iniciado un proceso de envío de formularios para navegar al voto autenticado. Esta parte es muy vital. Yo habría pasado por alto eso y saltado directamente a la URL, razón por la que tenemos ese error. Estaba diciendo, bueno, si viene de una fuente desconocida. Entonces lo que necesito hacer o lo que tenemos que hacer es dejar que este Novalink onclick llame a este código. Pero luego una vez más, esto está todo en y pantalla de inicio de sesión. Entonces solo por el bien de la simplicidad, vamos a eliminar la pantalla de inicio de sesión. Y sólo vamos a poner todo el código en las escenas del menú de navegación. Ahí es donde todo está pasando con autorizados y los muchos artículos y todo, ¿no? Por lo que solo voy a copiar esta función desde la pantalla de inicio de sesión. Si lo has borrado, si lo tienes, entonces está bien. Siempre puedes simplemente pausar y reproducir ese bit de código. Y también me voy a llevar estas bibliotecas, por lo que inyecta y también Shan State Manager, gestor de navegación. Y estas dos bibliotecas, o superior o bien, las bibliotecas y las funciones o clases inyectadas, ¿no? Y entonces lo que podemos hacer es en el enlace de navegación que dice F es igual a autenticación y logotipos. Voy a poner eso como un hash lo promociona como parece que consigue un enlace activo. Pero por suerte, estamos usando un componente blazer y los componentes blazer pueden hacer al hacer clic. Entonces de la misma manera que el botón en la pantalla de inicio de sesión, eso era sólo un botón. Y eso habría hecho. Onclick comienza psi nada. Voy a decirle a este NoveLink que cuando se haga clic, debería llamar a esa función. Empieza a decir ALT, que está aquí. Una vez más, sientes que quería separar estos PFAS tienen el componente y el código detrás del archivo. Entonces ya pasamos por un ejercicio o lo hicimos. Tan pocos libres para seguir adelante y hacer eso. Pero para esta sencilla operación, sólo voy a mantenerlo sencillo. No me fui a hacer todo eso. Está bien. Entonces probemos este proceso de logotipo una vez. Entonces soy Buck como JPSM management.com, y luego hago clic en cerrar sesión y ves que es un proceso completamente diferente, sensación completamente diferente. Sé que en realidad está funcionando. Para que veas donde muchos puntos y puedes volver atrás y registrarte. No. Entonces ves que incluso esos procedimientos se pueden gestionar con nuestras páginas y cómo todo fluye desde la perspectiva del usuario a través de las diferentes partes de la aplicación. Por supuesto, autorizamos todos estos enlaces. Por lo que una vez que haces clic en un enlace, tienes que estar autorizado. Y el motivo más profundo de autorización, así como recapitulación, es que una vez que te autorices Valle automático, Es una cookie creada la cual tiene un Tolkien. Y este Tolkien es lo que se utiliza para autenticar a este usuario a través de la APA, el proyecto de servidor. De acuerdo, así que recuerda que lo que sea que esté haciendo el usuario cuando están agregando autos están haciendo una operación maravillosa. Están realmente en el cliente por partes. ¿ Todo bien? Y luego cuando tienen que golpear uno de estos endpoints API, tiene que haber un Tolkien adjunto a esta solicitud. Y eso es parte de lo que se envió aquí arriba cuando construimos este cliente HTTP. Y le dijimos que siempre debería enviar un manejador de mensajes de autorización. Ahora más adelante veremos cómo podemos enviar solicitudes de API autorizadas. Porque mientras aturde, una vez que estemos usando a este cliente, automáticamente va a intentar adjuntar un Tolkien. Diga si no hay ningún token presente, entonces siempre obtendrá copia de seguridad 40, 1 o 4 o 3, al ver que no puede acceder al recurso en el lado de la API. Entonces esa es su manera. Tener el inicio de sesión del usuario es tan vital. Pero entonces podría haber una situación en la que no quieras que el usuario o no quieras obligar al usuario a tener que iniciar sesión para acceder a una determinada página o poder interactuar con ciertos datos. Podría haber esa situación. Por lo que veremos cómo el fin de semana hacer eso más adelante. 39. JavaScript Interop con bibliotecas externas: Oigan chicos, bienvenidos de nuevo. En esta lección, queremos profundizar en JavaScript, interop, saber que tocamos Es un poco cuando hicimos una llamada. Y eso fue a nuestro propio pequeño método interno onclick. Cuando pinchamos en nuestro botón aquí, teníamos esa confirmación el. ¿ Estás seguro de que deseas eliminar bien? ¿ Ahora? La realidad es que probablemente querrás que esto se vea un poco mejor. No quieres que sea la tonelada de alerta vainilla de caja de confirmación que viene incorporada con un navegador. Probablemente quieras usar una biblioteca de terceros como tal vez para que aprendas hasta ahora, así sucesivamente para darle un poco más de carácter. Otra cosa que probablemente quieras hacer es modificar un todo, que los datos se están mostrando. Entonces bien, No, todo se está exhibiendo en mesa rúcula y solo está pasando y sigue y sigue y sigue. Entonces entre más guardias era lamda, el pH es no. Hoy lo que vamos a estar haciendo es enfocarnos en la visualización de los datos aquí en la cuadrícula. Entonces vamos a poner en una grilla más bien egresado y fui a enfocarme en la página de reservas porque creo que a ésta le iría bien la grilla más que a las otras, al menos dentro del contexto, pero no hay limitación . ¿ Está bien? Entonces lo que queremos hacer es transformar esta visualización tabular de datos en una cuadrícula. Y la cuadrícula que estaremos usando hoy son las mesas. Entonces si nunca has usado las dos tablas antes, puedes ir a Data tables.net y puedes usar esta recta URL slash, ejemplos slash styling slash Bootstrap 4 puntos HTML. Por lo que estamos usando Bootstrap 4 en nuestra aplicación blazer. Entonces quiero la piel para tablas de datos que se vean mejor con el diseño general que tenemos. Muy bien, entonces cuando estés en esta página, podrás experimentar con ella. Si estás familiarizado con las tablas de datos, alguien sabe de qué estamos todos hoy? Si no, entonces es una manera agradable, divertida, una manera fácil de tipo de tabular todos los datos que están entrando. Cuenta con paginación automática. supuesto, todo esto está sucediendo del lado del cliente. Entonces esto es como una victoria rápida. Más adelante a medida que la aplicación comienza a crecer, probablemente quieras implementar. paginación en el lado del servidor reducirá la carga. Pero para nulo para un pequeño arriba que simplemente parecen tener esta victoria rápida mediante la implementación de tablas de datos. Y nos dará un poco más de visión de cómo blazer interactúa con JavaScript y otras cosas que debemos considerar a la hora de hacer este tipo de operaciones. Por lo que debajo del show, todos los enlaces de acceso o CDN para todos los recursos necesarios para que funcionen las tablas de datos. Y deberían incluirse en ese orden particular. De acuerdo, y ese mínimo, se requiere ese código. Después de todo esto? No. Estos son enlaces y estos son enlaces a archivos que se alojan en Internet. Son buenos en cuanto a cuando se tiene acceso a Internet. Sí sostuvieron aplicación para cargar más rápido, sobre todo como usar en exceso el blazer dicho klan. Y sobre todo si alguien decide ir progresivo al descargar la app. Ya sabes, no tener el Fazlollah físico reduce la huella del AP en general. No obstante, en modo offline o alguien intenta abrir eso y va a entrar en acceso inmediato a Internet. Y estos enlaces no se pueden alcanzar en su momento. Entonces en esa situación es probablemente bits que tener los archivos físicos. Para que lo sepas, puedes dar y tomar y evaluar tu apetito de riesgo. Pero una vez más, por la victoria rápida y solo por la sensación general de cómo funciona JS interrupt, solo vamos a estar usando los enlaces CDN y vamos a estar incluyendo estas referencias en nuestro proyecto a medida que avancemos. Ahora empecemos. Y lo que vamos a hacer es crear algunas referencias escriturales a estos enlaces dentro de nuestra app blazer null, donde tenemos que incluirlos es muy específico en partícula. Entonces tenemos que ir a la página index.html y solo voy a dejar de correr ahí o para que podamos hacer nuestra edición en la página index.html que está en la carpeta raíz, y eso es index.html. Tendríamos que incluir o referencias de escrituras antes de nuestro archivo blazer dot WeBassembly ab.js. Entonces quiero decir, podemos incluirlo antes del servicio de autenticación, pero que uno es algo secundario al fanático más comúnmente para éste ahora esto es porque estamos usando el cliente blazer son proyecto Webassembly. Si estamos usando los proyectos de servidor blazer, entonces estaría en el archivo host y en realidad se aplicaría una restricción similar. Entonces sigamos en nuestro index.html y solo los pegaré ahí. Y entonces lo que tenemos que hacer es una especie de ella hasta dentro de guiones dot js. Entonces voy a decir script es igual a S, Script, SRC es igual a y luego el link. Y luego simplemente seguimos adelante y cerramos nuestras etiquetas de guión. Y entonces vamos a hacer eso por todos estos enlaces. Y una vez que hayas completado eso y tengas tus enlaces parecidos a esto, déjame simplemente quitar eso. Entonces podemos volver a la página de tablas de datos y lo siento, y podemos buscar los archivos CSS para que cualquier cosa que puedas usar y es casi las mismas reglas se aplican cuando se trata de la conjetura o lo siento, el CSS es lo que queremos. aplican las mismas reglas al tratar las aplicaciones web. Si vamos a estar usando en la biblioteca, tienes que asegurarte de que tengas todas las referencias relevantes a la biblioteca. Así que he ido adelante y he agregado los enlaces de herramientas al archivo CSS de la tabla de datos , por supuesto, swell en realidad solo necesito uno porque uno de ellos es Bootstrap, que ya tengo en mi proyecto. Entonces en realidad voy a tener sólo una referencia Esa es una pantalla que es, voy rápido antes de proceder. Entonces cuando tienen la referencia errante, y esa es la segunda sus amigas aquí. Las tablas de datos dot Bootstrap, 4 punto main.css. Entonces eso es lo que necesitamos. Conoce. Necesitamos escribir nuestro propio archivo de script, que en realidad haremos alguna inicialización dinámica porque si planeamos usar la tabla de datos en múltiples lugares que necesitamos poder llamar a una función específica desde las escrituras de tablas, pasando la mesa a la que queremos que se aplique. El nombre de la tabla o algún identificador para la tabla, ya sea una clase o es el ID, sabemos cómo funciona esta cosa, o si ya estás familiarizado con cómo funciona. Por eso necesitamos escribir este JavaScript personalizado sobre el que tenemos control. Muy bien, así que solo voy a ir en la carpeta raíz www, adelante y agregar una nueva carpeta y lo voy a llamar Scripts. Y luego dentro voy guiones, voy a añadir un nuevo elemento en forma de archivo JavaScript. Y solo lo voy a llamar data table dot js, data table dot js ahi lo sabremos en data.table ab.js, voy a tener una función que me llame mantenerlo simple. Tabla de datos o la tabla. ¿ Todo bien? Y esta función va a llevar la mesa a Calidad Ambiental. ¿ Todo bien? Y prácticamente todo esto va a hacer es inicializar los documentos y decimos document.ready. Ya sabes que esa es una parte estándar de jQuery. Función escuchada, abrir y cerrar corsé, abrir y cerrar corsé rizado. Y luego dentro de esto sólo vamos a buscar elementos o tabla de signos de dólar. Entonces como dije, el nombre del elemento o algo para identificar al elemento es lo que se pasará como parámetro. Entonces tabla punto y luego es tan simple como data.table. Por lo que eso es tablas de datos enteras requeriría que lo inicializaras. Muy bien, Sólo estamos pasando por esto porque necesitamos que sea accesible a través de la interrupción, interrupción de GS. Pero entonces de lo contrario, todos sabemos que eso es todo lo realmente necesitamos en una parte sentada HTML regular. El siguiente que voy a hacer es quitar nuestro disponer la cola porque lo que pasa es que cuando la página se mueve, no queremos que ese componente se esté quedando en el navegador, en la consola, y quedando en la memoria que todo lo estaba en la tabla de datos de tres páginas es nuestro objetivo que queríamos a través movido, ¿verdad? Entonces vamos a llamar a este método de disponer que sabemos que vamos a despejar esa tabla de cualquier referencia. Hace calor, ¿verdad? Todavía necesitamos el documento o cualquiera, así que sólo voy a copiar y pegar eso. Pero dentro de esta sección voy a decir tabla dot data, table dot destroy. Quieres o mueve a sus amigos. Y luego voy a encontrar los elementos. Y lo haré diciendo document.write, selector de consultas y buscar tabla plus. Y luego una palabra clave que suele seguir, es la que dice envoltorios de subrayado. Y luego diré elemento nodo padre eliminado elementos hijos, ¿verdad? Entonces solo estoy eliminando todos los rastros de este elemento una vez que hayamos terminado con el DataTable, Así que digamos están en la página, se cargará la tabla de datos, se navega lejos. Queremos matar la tabla de datos y eliminar el elemento de toda la ventana, de toda la aplicación hasta que vuelvas de todos modos después de reinicializar, es una subpartes del territorio. Es algo que hay que hacer para mantener limpia la obligación en tiempo de ejecución y una vez más, reducir esa huella de la aplicación. Muy bien, entonces ahora que tenemos este archivo de guión en el HTML, claro el Ultimaker para institutos, y lo haré referencia después de todo, ¿verdad? Por lo que puedo simplemente arrastrar y soltar eso desde el Explorador de soluciones y ahí está nuestro archivo de script personalizado. Ahora entrémonos en el componente donde pretendemos usar este JS Runtime. Y sí dije que vamos a empezar con las reservas, pasar al índice para las reservas. Y voy a empezar incluyendo up top fret en el inyecto, diciendo implementos desechables. Entonces yo desechable es C sharps nos fuera haciendo recolección de basura realmente habría interactuado con ella antes. No. Entonces cuando este componente está terminado, yo desechable entra y destruye el componente en la recolección de basura de memoria. Entonces esto va a funcionar de la mano con nuestro método de eliminación aquí, pero lo veremos en unos segundos. Coejecutivo, todo lo unirá. Ahora voy a dar nuestra mesa aquí e IBM cuándo llamarlo equipo de reservas, ¿verdad? O tablas de reservas. Esta tabla de reservas, ¿verdad? No, Todos sabemos eso. Por ahora deberíamos saber que en HTML y le damos a un elemento un ID, es un identificador único. Esto será útil cuando vamos a llamar a nuestro método asíncrono. Porque recuerda que vamos a estar llamando a este add al método de tabla de datos, cual va a tomar como parámetro el nombre del elemento debe aplicar la tabla de datos llamada 2M. Entonces lo que vamos a hacer aquí es llamar a otros métodos protegidos. Por lo que protegido está sumidero y queríamos anular la tarea. Y este que estamos anulando está encendido después de que el render está viendo, que toma un booleano llamado primer render para usar en las cargas arriba en el IntelliSense. Déjame intentarlo otra vez. Muy bien, tan protegido sobre él y luego espacio. Ahí vamos. Entonces nos subimos después de debajo de un canta creo porque escribí asíncrono antes, no lo hizo no le impulsó esa. Está bien. Déjame que me arregle eso así quiero que sea asíncrono. Por supuesto, ahí vamos. Entonces este método, y lo estoy haciendo justo en lo no inicializado. Por lo que se puede ver que aquí hay algunos métodos que se pueden exagerar para un propósito específico. Entonces el after render, un fregadero realmente es un método para ver después de que el componente se haya renderizado, ¿qué me harías hacer? Ahora recuerda, diré que es importante hacer ciertas cosas en ciertos puntos. Entonces la forma en que incluimos los expedientes, tal vez eso podría haber sido una exageración, tal vez podríamos haber mezclado en mucho el orden. Por supuesto. Es mejor simplemente cargarlos antes de que todo se separe aquí a la Maryland, déjame ponerlos de vuelta. Está bien. Eso está bien. Pero entonces en lo que a un componente se refiere, si vamos a estar llamando a funciones JavaScript desde nuestro propio corredor, desde código de terceros. Tenemos que hacer eso después de que el componente haya cargado todos sus activos. Entonces eso es lo que dice este método después de renderizador asincrónico, después de que el componente haya terminado de cargar todo lo que necesita hacer. ¿ Qué quieres hacer con ese extra? Entonces mientras queremos hacerlo, Eso es extra. Por lo que sólo eliminaré esa línea por defecto. Y voy a ver que no quiero esperar un, G, S, y sabemos este código, hicimos este trimestre, el derecho JS invoke es hundir y recuperar tanto un valor que solo voy a copiar esto, ¿verdad? Es el mismo código. Js es nuestro objeto, invocar un fregadero. La única diferencia es el tipo de retorno. Por lo que quería poner este tipo de retorno como objeto. O en realidad se puede ver un arte de vacío de fregadero, lo siento, invocar vacío asíncrono, que no devuelve nada, ¿verdad? Entonces probemos el vacío. Si el chico no funciona, sólo volvemos a la, a la invocación Async. Pero cuando hacemos esto, necesitamos pasar ese nombre de método. Entonces en el caso de nuestra confirmación, el nombre del método en JavaScript es confirmar, ¿verdad? En esta situación, el nombre del método al que estamos llamando es nuestra tabla de datos. Esa es nuestra metodología creada agregar tabla de datos. De acuerdo, ¿Cuáles son los parámetros? Entonces esto sí toma un parámetro, la confirmación, el mensaje que queremos que se muestre en esta situación, nuestro parámetro aquí es el valor ID para nuestra tabla. Muy bien, hashtag C o libra, y luego el valor ID, y eso es todo. Entonces cuando el componente se haya renderizado, queremos invocar el código JavaScript. ¿ Todo bien? No, yo hubiera mencionado que el desechable, por lo que necesitamos ver qué pasa cuando estás desechando. Entonces vamos a atar el código de eliminación jQuery a los códigos desechados de componentes casi predeterminados. Yo sólo voy a decir vacío yo punto desechable disponer cuando usted está desechando. Esto es lo que quiero que hagas por mí. Yo quiero llamar a g es invocar. Y solo te mostraré esto real Es esto, correcto, pero diferente método esta vez, mismo parámetro, mismo método de llamar excepto que estoy llamando tabla de datos está dispuesto y esto es un vacío, así que no estamos dispuestos a esperar esa llamada de método. De acuerdo, así que tomemos esto para dar una vuelta y veamos si nuestro discurso de reserva reflejará nuestras necesidades de que nadie vayamos a nuestra página de reservas. Ahí vamos. Contamos con nuestra tabla de datos mostrando nuestras opciones de paginación. Podemos buscar su instantáneo todo lo que pudimos hacer en el fin de semana sentado HTML regular, no do en nuestra aplicación blazer, esto solo va a mostrar lo fácil que es incorporar una biblioteca de terceros. Entonces creo que empecé con el ejemplo de que probablemente quieras cambiar viejo desconfirmar por algo así como una dulce alerta o algo que puedas seguir adelante y probarlo por tu cuenta, conseguir los activos, ponerlos en el apropiado lugares, y luego solo tienes que llamar a tu invocación en el momento apropiado. Ahora note que cuando navego a las otras páginas, todo está limpio. No he puesto las tablas de datos en las otras páginas, pero cuando vuelvo a las reservas, todo está bien. Ahora bien, si no fue de enajenar y sólo les mostraré la consecuencia del caso desposeedor. Estás pensando que tal vez son pasos innecesarios. Entonces solo voy a comentar que line out restart. Y luego miramos la página de reservas. Ahora mira la parte superior. Lo que hice fue ir a reservas, ir a otra página sobre las barritas combustibles. Ahora estoy en reservas. Mira lo que pasa cuando voy a los vehículos. Todavía se está abasteciendo, por lo que no se está deshaciendo de la tabla de datos del contenedor. Porque recuerda que este WebAsembly arriba una vez que está cargado, todo está frontal a la vez. Por lo que tenemos que mantenernos pequeña huella alejada ciertas cosas que no queremos generalizar a través de la aplicación en esta situación, esa tabla de datos de sólo la página de reservas está subiendo, comenzó a aparecer en los clientes. Y cada vez que voy a reservas y voy a otra evaluación de página para seguir apilando y apilando. Por eso es de suma importancia que ese código disponer. Por lo que Alice Goldbach sin comentarios a eso. Lo siento. No quise solo experimentar y me alegro de que estés aquí. De acuerdo, así que esa es una bonita y fácil introducción para interrumpir JavaScript interrupt, Lo sentimos, con blazer. Puedes extenderte a otra vez tra, otras bibliotecas de terceros, y entonces tal vez puedas empujar tus habilidades hasta pujas y desarrollar una biblioteca o componente personalizado que simplemente implemente una de estas bibliotecas para que puedas reducir la cantidad de trabajo y estás llamando a repetir código para GS invoke. Está bien. 40. Soporte de carga de archivos: Hey chicos, bienvenidos de nuevo. En esta lección queremos echar un vistazo al soporte de carga de archivos que tiene Blaser. Entonces lo que vamos a estar haciendo para esta lección es agregar un campo de imagen a la tabla de vehículos. subidas de archivos no se limitan a imágenes por supuesto, pero como ejemplo, vamos a utilizar el vehículo porque cuando estamos agregando un vehículo nuevo, probablemente quería tomar una foto del vehículo, lo pone en el sistema por cualquier motivo . Pero también se puede aplicar a tal vez cuando estamos incorporando cliente, probablemente querríamos algunos detalles sobre ellos. Ya sabes, sus pasaportes son alguna licencia de conducir válida son algunas formas de documentación. Por lo que el mismo concepto que estamos a punto aplicarlo a subir una imagen del vehículo podría aplicarse en múltiples escenarios a través de las reglas de negocio a los requisitos que pueda tener. Entonces empecemos. Entonces en la clase de dominio vehicular, queremos agregar dos nuevos campos, y solo voy a añadirlos aquí abajo. Y la primera va a ser pública por RE, así que es solo un presupuesto y voy a llamar a esta imagen, ahí está esta imagen en la nube, ¿de acuerdo? Y prepárate cuando estamos transportando nuestra imagen desde la aplicación cliente hacia la API. Vamos a tener que convertirlo en una matriz de bytes, una granja, y luego la vamos a desensamblar, enviarlo por el cable, y luego remontarlo para guardarlo del otro lado. Y eso es más o menos lo que férula fuera del tema. Pero lo que realmente queremos hacer es tomar nota del nombre, alguien que tenga este nuevo campo llamado nombre de imagen. Y esto es realmente lo que va a identificar la imagen. Entonces lo que vamos a hacer es cuando lo recreemos y lo guardemos el disco en la API dijo que vamos a ver el nombre que le dimos en la base de datos para que puedan recuperarse cuando lo necesitemos. No, uno de estos se requiere en la base de datos, y ésta no es la que se requiere. Entonces lo que podemos hacer es agregar una anotación por encima de ella para decir y no fregado. Está bien, así que no fregado básicamente va a ver un cuando estamos a punto de hacer una migración, ignoró este campo. Muy bien, así que esto es muy importante en cualquier momento que estés editando tus clases de dominio y probablemente pongas en campos que no quieres en la base de datos. Simplemente agrega esta anotación no mapeada y se saltará la base de datos. Está bien, así que veamos eso en la práctica. Entonces solo voy a agregar migración. Y esta va a ser la imagen al manto. Vehículos. Deja que se vaya eso. Y cuando eso se haga, podemos echar un vistazo y vemos que sólo tenemos uno de los dos campos que acabamos de agregar. Por lo que el nombre de la imagen no es añadido dos vehículos. Entonces solo podemos seguir adelante y obtener los datos, correcto. Entonces sepan que eso se hace. Vamos a saltar a la API y hacer algunos ajustes. Primer orden del día, por favor inyecte estas dos líneas o estas dos bibliotecas. Tenemos el host web y el entorno, y tenemos el accessor de contexto HTTP AI. Por lo que esto nos va a dar acceso a la carpeta de archivos estáticos. Por lo que dotnet core por defecto como una carpeta de archivos estáticos, que es nuestra raíz www de Tipo de pasado por eso antes. ¿ Qué se almacena en eso? Por lo que dentro de esa carpeta, queremos tener otra carpeta llamada Upload. Para que puedas seguir adelante y crear eso solo tienes que hacer clic derecho, ir a agregar y decir nueva carpeta y llamarlo sube. Y entonces nuestro ojo web host entorno objetos que estamos inyectando aquí en realidad nos darán fácil acceso a construir nuestra ruta a nuestra carpeta de cargas o contextos HTTP de acceso para que como usted sabe, nos da acceso a alguna Solicitud de detalles en uno- off solicitudes, detalles que queremos es al servidor actual o al valor de host actual, que realmente construyamos una URL, que es lo que vamos a estar almacenando en la base de datos. Por lo que vamos a saltar hacia abajo a los Crea. Está bien, y sólo quita mi punto de interrupción ahí. Y ya sabemos que estamos haciendo nuestro manejo global de errores en este lado de la API. Por lo que no tenemos que preocuparnos por intentar y atrapar si hay algún error en el camino, va a tirar los 500 y podemos seguir adelante. Pero lo que queremos lograr aquí es la construcción de la URL que la RI, digamos la reconstrucción del archivo. Porque recuerda que es una matriz de byte, ¿verdad? No, o va a ser un área mala cuando viene del cliente a través de la API, así sucesivamente reconstruirla desde una matriz de bytes en una imagen física en nuestra carpeta de cargas. Entonces entrémonos en ello. Entonces primero, entonces voy a tener es var URL, y esto va a ser igual contextos HTTP accessor no HGTV context dot request, dot host dot value. Entonces llamaré a esa URL, podría llamarla host actual, URL actual. Pero eventualmente sólo hablar de la, ya sabes, como cuando lo estamos ejecutando desde Visual Studio va a ser colon host local. Ese puerto cuando lo implementemos en internet, va a ser cualquier nombre de dominio. Entonces eso es todo lo que esto realmente va a estar recuperando. A continuación queremos construir nuestro camino. Y como dije, o la ruta vendrá del entorno de host web dot web root path, que simplemente nos da un camino directo a WW root. Y luego tenemos nuestra carpeta de subidas. Y luego sólo vamos a inyectar en el nombre de la imagen de punto del vehículo, que por supuesto debe pasarse con toda la información en el objeto VGG en un momento de creación. Ahora vamos a meternos en las cosas buenas donde realmente creamos el archivo. Por lo que estaremos usando nuestro flujo de archivos para hacer eso. Por lo que tenemos VAR archivo stream es igual al sistema dot o dot archivo dot create. Y entonces lo que estamos creando es cualquier imagen o cualquier camino que construimos aquí, sólo estamos pasando eso el final. Entonces nuestro flujo de archivos, vamos a decirle que escriba imagen de punto del vehículo. Ahora recuerda una vez más, la imagen es nuestra zona de mordida, así que esos son nuestros datos. Entonces estamos viendo bien, estos datos comenzando en 0 y De 0 a toda la longitud de la matriz. Tan conceptualmente, para ver un archivo de desescritura, este pico, bastante bien, si solo pasas el cursor sobre él, verás escribe un bloque de bytes al flujo de archivos. Entonces cualquier tipo de archivo es, correcto. No se limita a imágenes, solo estaban haciendo imágenes aquí, pero cualquier tipo de archivo, solo lo estamos escribiendo en el sistema de archivos. Y luego cerramos ese arroyo una vez que hayamos terminado. Y entonces lo que vamos a hacer es cambiar el nombre de la imagen a nivel de objeto. Entonces ya tenemos el nombre y lo estamos usando para el camino. Está bien, sin embargo, nuestro nuevo nombre, nombre de la imagen del punto del vehículo va a ser igual a https colon slash nuestra URL, ¿verdad? O podrías llamarlo valor host actual o host, como quieras llamarlo. Pero ahí es donde nuestra dirección prácticamente barra, sube barra y luego el origen en el IM que vino a través de la API. Entonces esto es lo que se almacenará en la base de datos. Y luego seguimos adelante y hacemos el inserto regular y Guardar. Está bien, así que solo voy a poner algo de espacio ahí que esté creando el archivo en el lado de la API o en el lado del servidor. De acuerdo, así que saltemos a nuestro componente de forma para nuestros vehículos. Entonces voy a poner en una nueva forma grupos tal probablemente sólo lo pone en la parte superior. Y diré que ésta es para una imagen opcional, ¿no? Por lo que etiqueta imagen opcional. Y entonces lo que vamos a hacer es tener un archivo de entrada, lengua. Está bien, así que ya has visto los diferentes tipos de insumos. Hicimos esto. Hicimos número, hicimos toma. Entonces en ninguna parte haciendo archivo de entrada. Y luego sin cambios vamos a hacer un manejador de archivos y Exxon de eventos. Está bien. También voy a poner una peta acetal ahí con un poco de advertencia, subir aviso de archivo. Para que sólo pueda seguir adelante y hacer eso. Y luego vamos a hacer las inicializaciones a continuación. Entonces la primera que es, voy a inicializar la advertencia. Ahora esto lo inicializa. No hace falta cambiar nada, ¿verdad? No. Sólo lo fijará si el si surge la necesidad de la advertencia justo debajo de este cisne, vamos a tener nuestro teléfono vacío privado Shun para manejar las subidas, lo siento, la selección de archivos. Por lo que tengo vacío privado manejar rápido y como Sean. Y luego tenemos como parámetro input file change event R, y luego R Tolkien, que solo estamos llamando e. bien, así sabríamos que todo o eventos funcionan hasta el momento sólo hemos hecho en vivo en el envío válido. Y así ahora estamos viendo un evento personalizado el cual es 45 de selección. Por lo que siempre que se seleccione un archivo, se activará esto automáticamente. Y este es el tipo de datos que estaremos almacenando todos los detalles necesarios sobre el evento que está ocurriendo, correcto. Un caso en punto van a tener una variable de archivo. Voy a decir que el archivo var es igual a E dot. Yo quería mirar a E. Vemos que tenemos archivo, conos de archivo. ¿ Vamos a conseguir múltiples archivos? Entonces si estuviéramos permitiendo que el usuario subiera múltiples archivos, solo podrías conseguirlos todos una vez como array o colección justo aquí estamos. Sólo estamos pidiendo uno. Entonces E dot archivo. Pero entonces necesitamos asegurarnos de que este archivo realmente tenga contenido, ¿verdad? Entonces o porque recuerden que si la clínica, aunque no seleccionen nada, ese evento habría sido despedido. Correcto. Entonces estamos tratando de meternos en el archivo, pero entonces aún necesitamos asegurarnos de que algo fue seleccionado y luego podemos iniciar nuestro proceso. Está bien. No auto-llenado sido abundancia de precaución. Desean consultar nuestra extensión en el archivo. Entonces voy a decir var EXT, que es abreviatura de extensión. Y entonces sólo voy a hacer un sistema.out.println. Llegar a la extensión en el archivo dot Nim. Muy bien, entonces este objeto de archivo tiene todo lo que necesitamos saber de EU ahora mismo con el tipo de contenido, tenemos la última modificación el nombre, el tamaño de todo lo que necesitamos. Muy bien, Por cierto, este tipo de datos de archivo se llama cejas nuestro archivo. Entonces eso es tipo de datos y que está disponible para subir archivos en blazer, cejas o archivo. A continuación, pondremos un comunicado if para verificar las extensiones de archivo que lo estamos atendiendo. Entonces en esta situación, solo queremos JPG, JPG y PNG. Por supuesto, en función de su situación, puede que desee más o puede que tenga diferentes restricciones. Pero una vez más, esto es todo conocimiento transferible y conceptos transferibles. Entonces aquí solo estoy revisando si la extensión que acabamos de extraer del nombre del archivo es si contiene uno de nuestros aceptados, pero lo estoy poniendo a bajar porque a veces los archivos se guardan con todos los gorras son mayúsculas mixtas como el extensión. Entonces ya sabes, solo para mantener todo en un solo nivel donde forzarlo a minúsculas y compararlo con el equivalente en minúsculas. Entonces en esta declaración if, si nos dan uno de los tipos de archivos que estamos buscando, entonces quiero crear un valor totalmente nuevo para el pico, lo que estoy llamando un ID de pico, pero es realmente que eso se va a dar al cuadro. No. Mi escenario o mi razón para hacer esto es, no sé qué nombre divertido podría tener este usuario para cualquiera de estos archivos, ¿verdad? Tampoco quiero arriesgarme a tener choque entre dos archivos con el mismo nombre de archivo. Entonces lo que estoy haciendo es generar usando la biblioteca de cuadrícula, buenos puntos, nuevo bien a una cadena. Y lo que pasa es que un bien te da como una cadena de 16 caracteres. Y algunos de estos bloques de personajes están separados por guiones. Simplemente estoy reemplazando todos los guiones por un texto en blanco. Entonces al final de la misma, solo obtienes una gran mancha de personajes aparentemente aleatorios. Si no estás familiarizado con lo que es su pegajoso, eso es lo que te contarán de esto. Y entonces estamos viendo vehículo punto imagen nombre es. Estaban fusionando ese volumen vacío con la extensión. Entonces esto es lo que queremos llamar al archivo en el sistema de archivos. Entonces voy a inicializar una imagen de punto de vehículo, que es nuestro militar a un nuevo por RE dado el tamaño file.js. Entonces tenemos el archivo ahora, así que solo inicializamos una batería, es el tamaño del lote de caída. Y luego vamos a esperar archivo no open stream, dot read a sink y luego a vehicle dot image, y esta es una escena, así que por eso hay una línea. Entonces sólo voy a hacer de esto un vacío de fregadero. Está bien, y eso debería cuidar de esa época. Ahí vamos. Muy bien, Así que esto básicamente sólo va a decir Archivo Abrir y copiar o contenidos en nuestra matriz de bytes, que es la imagen de punto del vehículo. Ahora bien, esto es si conseguimos las cosas que queremos. De lo contrario, solo voy a dar aviso de Subir Archivo. Por lo que algún contenido para ver. Por favor seleccione un archivo de imagen válido y hágales saber las extensiones. No voy a poner JPEG. Podrías si quisieras, pero creo que ya está bastante claro. De hecho, si obtenemos el archivo del carrito, solo quiero asegurarme de que si el error estaba ahí antes, que siempre fue. Entonces solo voy a inicializar esto o establecer el valor de subir archivo advertencia destruir no vacío si nos dan el carrito. Entonces si es MDRD y entonces todavía va a estar vacío. Si escribes contenido y tenemos el correcto, entonces va a estar vacío. No, así que está bien. Muy bien, Así que tomemos esta aplicación para un giro de carga artificial. Mayoría de la forma. Simplemente voy a seguir adelante y seleccionar una de mis imágenes aquí para luego crear el vehículo. Y luego vemos que estamos consiguiendo el nuevo vehículo, pero no tenemos forma de exhibir ese vehículo, ¿verdad? No. Por lo que sería bueno que viéramos la imagen aquí mismo en la página de la página de índice para mostrar qué vehículo es. Por lo que vamos a saltar a la página de índice e hicimos la siguiente modificación se van a vaciar nuevo encabezado en esta tabla. No, no tengo que poner imagen. No voy a poner ningún texto en el encabezado, pero vamos a tener esta nueva columna, esta nueva td que sólo va a tener IMG SRC siendo igual al nombre de imagen de punto del vehículo. Entonces recuerde nombre de imagen es la ruta en el servidor donde la imagen puede ser teléfono. Entonces solo estamos viendo tu fuente. Es esa URL más o menos que habríamos construido desde el lado de la API. Y luego solo estoy poniendo un estilo personalizado para decir alto y ancho son 150 píxeles. Entonces solo voy a guardar eso y tomar, y cuando recarguemos nuestra página, vemos que aparece nuestra imagen. Está bien, así que una vez más eso es sólo incrustar. Déjame hacer un elemento inspect y ves que esa es la URL https host local. Entonces eso es lo que conseguimos a través del contexto, acceda a ella lo siento, al valor del host, y luego a la carpeta de cargas y luego a ese nombre de archivo de imagen. Muy bien, Así que intentemos sumar uno sin la imagen. Por lo que Toyota visita, sólo voy a poner algunos valores ficticios para superar esto rápidamente. Y luego seguimos adelante y hacemos clic en Crear vehículo. Y está bien, Así que algo interesante acaba de pasar. Uno. No hay creación. Entonces claramente hubo un error también. En realidad vimos que 500 páginas al ras encendidas y luego al ras. Entonces algo es definitivamente 0. Entonces volvamos al controlador y vamos a tener que hacer algunas modificaciones aquí. Entonces el hecho es que nuestro código aquí asume que una imagen estará presente. Entonces creo que es, me está dando un error en este punto porque entonces está viendo, ¿verdad? Nada porque esto sería nulo en este punto si no se seleccionara ninguna imagen durante el proceso de subida de archivos. Muy bien, entonces lo que queremos hacer entonces es tal vez envolver esto en una declaración if que solo intentamos hacer todo esto cuando la imagen o la longitud de la matriz de bytes es mayor que Z. Muy bien, así que he hecho esa simple declaración. Si la longitud del punto de la imagen del punto del vehículo es mayor que 0, entonces adelante y consigue la URL, consigue el camino, y haz todo eso de fantasía todo antes de intentar guardar. Entonces eso significa que si no hay imagen GameOver, entonces solo funcionará como de costumbre. Por lo que este paso es importante porque también queremos tener eso en cuenta cuando alguien está actualizando el vehículo, puede que haya lanzado la operación de actualización y cambiado la imagen o no, ¿verdad? Entonces, ¿cuándo sabemos cuándo dos genes. Entonces esta declaración si en realidad podría ser reutilizada aquí mismo. Si esa matriz de byte tiene datos, entonces es una suposición segura de que está presente una nueva imagen. Tenemos que reconstruir la ruta del archivo en base al nuevo nombre que se le dio a este nuevo para subir ese archivo, seguir adelante y actualizar los campos de datos. Y luego en última instancia actualizamos el vehículo. Entonces te das cuenta de que todas estas líneas de código se están repitiendo. Por lo que sería bueno si creáramos alguna forma de función ese tipo de esos todo este levantamiento pesado y probablemente solo devuelva ese nombre de ruta de imagen. Entonces solo voy a tomar todas estas líneas y voy a crear otra función privada, no lo hagas. Entonces esta función, acabo de hacerlo para que siempre puedas solo pausar y replicar lo que te voy a guiar a través de ella de todos modos, cadena privada, lo estoy llamando crear ruta de archivo. Pude haberlo llamado crear archivo. Depende cosa probablemente crear archivo es un poco TR descripción hace es crear el archivo. Y entonces lo que vamos a hacer posible mientras que la matriz de byte de la imagen y el nombre de la cadena, ¿no? Por lo que acabo de copiar y pegar el código. Por eso tenemos estas flechas de referencia. Entonces sólo vamos a cambiar estos viejos. Entonces en lugar de vehículo, el nombre de la imagen, sólo voy a decir nombre. En lugar de imagen de punto vehículo, estoy pasando imagen. Y entonces esto también sería imagen. ¿ Está bien? Y luego al final de ello, solo voy a devolver esa URL construida https slash slash las URL subidas y luego estamos pasando buck name. Está bien. Entonces lo que podemos hacer entonces es ver si la longitud de la imagen es mayor que 0, entonces el nombre de la imagen va a ser una llamada a esa función. Por lo que lo llamamos Crear Archivo. Y estamos de paso en vehículo. Puntos. Y la primera es la matriz de byte, por lo que la imagen y luego el nombre de la imagen de punto del vehículo. De acuerdo, así que de esa manera no tenemos que repetir demasiadas líneas de código es solo una simple sentencia if y 19. Entonces creo que esto es mucho más, es mucho más limpio y es más reutilizable en este formato. Si conseguimos una imagen que función llame actualizar este campo para cuando vuelva a aquí, sabemos que el archivo ya se habría creado y luego seguir adelante y actualizar. Está bien. Entonces ese es un tema tratado, ¿verdad? Eso es lo que estaba lanzando la era cuando no había imagen proporcionada a través de un error? No. El otro tema es que tenemos nuestro interceptor que significa jumbo, qué es lo que crea plantean. Muy bien, así que esto es un create para vehículos. Y recuerda que teníamos configurados nuestros interceptores para monitorear todas las actividades. Entonces en realidad tener una respuesta aquí. Si tu código no se ve así, está bien. Eso no debería estar ahí. Pero tenemos este interceptor para monitorear la vieja columna de esta operación y luego tomar cierta acción. Entonces en realidad vimos el axón porque viste el texto rojo al ras en la pantalla, pero luego todavía navegaba a la página de índice. Y eso es lo que no necesariamente queremos, ¿verdad? Por lo que tenemos que hacer un pequeño coraje aquí, donde durante las pruebas, durante la implementación, habría arrojado una excepción al final de esta declaración de cambio que más tarde. Entonces vamos a tener que volver a ponerlo porque lo que pasó es que golpeó esta afirmación if. Por supuesto, si tienes una flecha, eso significa que tenemos probablemente FIFO 100 mucho. Una de las anteriores, sabemos que no es un 40 para porque fue al recurso. Sabemos que no es lo no autorizado. Entonces eso significa que debe haber sido un 500 y luego debería tener herramienta de huesos, la página 500, pero luego es huesos ahí y luego todavía navegó por aquí. Por lo que necesitamos una forma de detener la ejecución de la aplicación después de que esto suceda. Y esa forma segura sería lanzar la nueva excepción. Entonces voy a lanzar una excepción de solicitud HTTP. Entonces esta es la excepción de solicitud HTTP solo, solo va a tener el mensaje en ella. Sólo para ver que esto es probablemente lo que salió mal. Y así esto detendrá la ejecución después de que navegue a esa página. Entonces no llegaría tan lejos. Está bien. Intentemos eso otra vez. Está bien. Por lo que estamos de vuelta en los vehículos crear nueva página de vehículo. Y no voy a elegir una imagen y luego voy a seguir adelante y crear vehículo. Y así consiguió ese error. Disculpe, esto debería estar comprobando si no es igual a nulo. Está bien, así que no debería estar tomando la longitud porque si no se proporciona nada, entonces va a ser nulo. Entonces ese es mi error. Solo hagamos ese ajuste para que la imagen de punto del vehículo no sea igual a nula. Después sigue adelante y trata de hacer el vehículo de creación. De acuerdo, así que intentemos eso. Muy bien, entonces estamos de vuelta en la pantalla de crear nuevos vehículos. No estamos eligiendo una imagen. Y luego vamos a seguir adelante y crear vehículo. Entonces ahora que lo hemos hecho, vemos que entra en la cabeza, lo crea, con éxito, y no hay imagen. De acuerdo, lo que vamos a hacer es sólo para asegurarnos de que nuestra intercepción funcione porque hicimos esto arreglado. Yo sólo quiero verificarlo. Entonces al inicio de esto crea, ¿verdad? Creo que haríamos esta prueba donde tiré una excepción al inicio, pero entonces eso fue en conseguir una lista. Por lo que no había código real para navegar a cualquier lugar después. Entonces por eso habría dejado actividad sin ninguna bandera roja, pero normalmente solo arroja una excepción en la parte superior del post VBR. No necesariamente tienes que hacer este paso. Simplemente puedes seguir adelante. Solo quería verificar eso o modificación donde una vez más rellenando o formulario con datos ficticios y luego hago clic en Crear vehículo. Y luego vemos que estamos aterrizando en nuestros 500 sin ser navegados lejos. Entonces ese es el comportamiento esperado de este interceptor y cómo navega. Muy bien, así que hemos ajustado eso y esas son solo las partes del proceso. Y a veces te verás algo y después encuentras un error. Pero siempre es bueno coger estas cosas temprano. Es bueno que donde, ya sabes, pasando por esta actividad y luego veamos una grieta en la armadura y ajustada de acuerdo. De acuerdo, entonces una verificación más y eso es probar la función de actualización, ¿verdad? Por lo que ds1 para seguir adelante y actualizar la imagen para el Prius. Y yo sólo voy a elegir esos lindos caminos azules que son. Da click Actualizar y ahí vamos. Por lo que se ve creando obras, actualizando trabajos. No hubo imaginal hay. Déjame hacerlo una vez más. Porque ya sabes, las imágenes, el relleno para un sistema, no, Así que tenemos las cuatro imágenes siendo exhibidas. De acuerdo, así que puedes tomar ese concepto y seguir adelante y probablemente realzado por la pantalla de vista. Y una vez más, este concepto es algo que puedes aplicar a otras cosas a la hora de subir archivos. Otro buen ejemplo, una vez más, sería requerir alguna documentación legal de los clientes. Al crearse, necesitas DNI, cualesquiera que sean los números de identificación fiscal proporcionados, necesitas una identificación demasiado esa específica, ¿verdad? Todavía vuelan a eso. Para que puedas seguir adelante y experimentar con eso. Pero tienes el marco a seguir. 41. Repositorio HttpClient: Hey chicos, bienvenidos de nuevo. En esta lección, queríamos que este curso estableciera un repositorio de solicitudes HTTP. Y todo el contexto para esto es que hay algunas cosas que queremos hacer y tenemos que hacer continuamente cuando hacemos nuestro cliente HTTP. Porque quiero decir, esta línea es simplemente NADPH. Pesamos las publicaciones del cliente como JSON, JSON asincrónico, obtenemos los endpoints y pasamos el objeto, es bastante simple. Pero entonces como tus llamadas podrían complicarse un poco más. Y en esta situación, un nivel de complicación que tuvimos que poner este interceptor unidireccional a este interceptor directamente en cada componente, en el componente o en el código detrás. Y luego tuvimos que asegurarnos de que esta línea estuviera presente. Entonces estoy seguro de que eso fue un poco molesto. Y luego si tienes otro, si l otro componente o van a tener que tomar eso en consideración, tienen que salir de esto y luego usualmente a septa. Y luego si algo cambia, tienes un montón de cosas a los guepardos. Entonces por supuesto, siempre es bueno cuando ponemos nuestro código que sabemos que se está repitiendo de una forma más utilizable, ¿verdad? Por lo que además hasta que el interceptor golpea al cliente HTTP se está inyectando directamente en cada componente. Y luego tenemos estas llamadas de función. Y entonces si tenemos alguna información adicional o bateadores que necesitamos ponerlos tendrían todos estos componentes y modificarían una vez más. Entonces lo que vamos a hacer es configurar algunos repositorios genéricos. Por lo que habrías visto el poder de tener cosas genéricas ya de cuando hicimos nuestra unidad de fuerza para formar la API dijo, correcto, dijimos el pobre repositorio genérico y nuestras unidades de repositorio de trabajo. Por lo que en el lado del cliente vamos a estar configurando nuestro repositorio de clientes HTTP. Muy bien, alma. Lo que haré es crear una carpeta nueva en el proyecto del cliente. Y vamos a estar llamando a esta nueva carpeta, y voy a llamarla contratos, ¿verdad? Porque en términos generales tienes contratos y tienes servicios aquí abajo, lo llamamos convenciones de nomenclatura de repositorio de hierro y repositorio. Pero esencialmente ese es el mismo concepto el de la interfaz que dice que esto es lo que puedo hacer. Y entonces tenemos la implementación que lo hace. Entonces sabemos por saber que tratamos de inyectar el contrato en nuestras aplicaciones como lo hicimos con la unidad de trabajo I en contraposición a la unidad de trabajo. Muy bien, Entonces nuestro contrato aquí va a ser una nueva clase. De lo que solo estoy creando clase de arte. Por supuesto que quieres cambiar eso. Sólo lo estoy llamando I repositorio HTTP. Seguimos adelante y agregamos eso y luego lo cambiamos de interfaz de clase. ¿ Todo bien? Y entonces este repositorio va a tomar un parámetro genérico de t Sólo lo estamos llamando t, donde t es una clase. Esa regla segura o clase de colon T. Muy bien, entonces estamos acomodando a los diferentes tipos. Una vez más, genérico. Por lo que dentro de esta implementación, vamos a tener algunos métodos. Get, get que devuelve una lista de t. Así que t una vez más es el objeto que estamos solicitando o el tipo de datos que estamos solicitando. Por lo que pasa por turnos. Se consigue que devuelva una lista y probablemente podríamos calificar esto un poco más para decir get all are get list o algo así, solo lo dejaré consigo los cuatro son nulos. Pero tarea que va a crear, que toma la URL y el objeto a crear. Tenemos tarea las actualizaciones que días la URL, el objeto, y el ID. Y tenemos colmillos borrar, que sólo toma la URL y el ID. Muy bien, Eso es todo por nuestro contrato. Yo repositorio HTTP sé en nuestros servicios son esas razones la carpeta de servicios que voy a agregar en kras y lo vamos a llamar repositorio HTTP. Ahora, repositorio http, tendremos ese genérico o parámetro. Y heredará del repositorio HTTP, que también tiene ese parámetro genérico. Y luego lo calificamos donde t es una clase. Y luego simplemente seguimos adelante e incluimos los espacios de nombres que faltan. Y entonces necesitamos hacer esa implementación de la interfaz. Por lo que ahora tenemos nuestro método creado y estamos listos para, ya sabes, fundir. Por lo que necesitaré inyectar al menos el cliente HTTP. Y por supuesto sabemos que tenemos el interceptor que queremos presente en cada convocatoria. Está bien, así que voy a hacer un constructor. Y en este constructor voy a tener el servicio HTTP cliente y o http interceptor. Entonces solo voy a seguir adelante e incluir cualquier referencia que falte y luego simplemente inicializamos campos. Por lo que he copiado y pegado los nombres de campo con el en las partituras. Entonces déjame cambiar esas avena. Estamos listos para encarnar lo que sucede en un create. Entonces, solo echemos un vistazo atrás a lo que hicimos cuando creamos. Entonces cuando dijimos crear micrófono, sería Wanda interceptor, y luego haríamos esa llamada que toma ese endpoint, el endpoint apropiado y el objeto para la creación. Entonces sólo voy a copiar no me han ido a la corte. Bueno, sólo voy a copiar. Está bien. Y luego seguir adelante e incluir cualquier referencia que falte. Entonces MC método un fregadero. Y también necesitamos incluir, bueno, no necesitamos incluir puntos finales. Motivo significa que se espera que proporcionemos la URL. Entonces no sé cuál es el tipo de objeto. No sé cuál es la URL aquí. Estaba bien acoplado porque sabías que estabas en make. Entonces sabíamos pasar por encima de ese y ese objeto. Entonces aquí no sabemos cuál va a ser la URL. Entonces no puedo usar ese valor duro ya que viene de esos componentes específicos. Simplemente voy a tomar URL que se pasa cuando se llama a este método. Y no sé cuál es el objeto. Balas, solo pasaré en OBJ y eso es todo, ¿verdad? Para la eliminación. ¿ Qué pasa cuando lo hacemos? Sólo voy a saltar a uno de estos componentes del índice. Y entonces puedes ver aquí que ni siquiera usé el interceptor aquí. Muy bien, así que esa es una de esas cosas. Por lo que queremos interceptar están presentes todo el tiempo. Pero claro que fue tedioso estar repitiéndolo, pero sólo voy a pedir prestada esta línea de código que es relevante, así sucesivamente, el Delete, vamos a empezar con nuestro interceptor en el tercero este evento, ¿verdad? Y este método Async. Y luego sólo vamos a ver URL y la identificación. Una vez más, no es específico, por lo que hay que mantener el mismo formato sin embargo. Entonces URL slash ID, bien, para los gets, y estoy seguro que estás recibiendo la idea por no, este interceptor debe ser usado en cada método. Porque claro que queremos monitorear lo que está pasando, ¿verdad? Y entonces sólo vamos a poner las llamadas apropiadas en base a lo que hubiéramos hecho en el componente correspondiente. De acuerdo, así que solo seguí adelante y llené todos los métodos restantes. Entonces para el get, tenemos el término de interceptación y luego regresamos nuestro cliente de pesos de JSON async, podría necesitar incluir una biblioteca faltante, por ejemplo, esta. Pero incluimos eso y avanzamos. Tenemos el parámetro tipo del tipo T porque una vez más, no sabemos qué estamos recibiendo. Y luego estamos viendo URL slash el id 4 se pone todo concepto similar excepto que estamos devolviendo una lista y esto probablemente debería ser más como Alice porque sí vimos lista en la solicitud, correcto, así que solo volveré y eso está bien. Y la URL, bien. Y luego para la actualización de tareas, vamos a ver, ponnos JSON una política de sincronización, RL slush el ID y nuestro objeto. Algo más que probablemente debamos considerar o tendremos que hacer es el disponer, ¿verdad? Por lo que sólo queríamos asegurarnos de que retuviéramos esa fuerza. Por lo que hay una interfaz que podemos incluir desechables. Y entonces así podemos tener herencia múltiple desde múltiples interfaces en C agudo. Y entonces eso implementa el método de disponer aquí mismo. Otros más editan con nuestro código donde decimos en punto interceptor disponer eventos. Muy bien, entonces a continuación tenemos que ir a nuestro archivo program.cs y registrar nuestro repositorio HTTP. Entonces esto es todo lo que vamos a hacer. Los servicios de punto de constructor son transitorios y luego vamos a decir typeof y luego pasar en nombre de nuestro contrato, el repositorio HTTP eye, y luego los corchetes de tipo. Entonces debido a que es genérico, la implementación o el registro luce ligeramente diferente a lo que podríamos haber visto con la unidad de trabajo o distribución. Permítanme sólo llevar eso A rápidamente. Entonces cuando hicimos la unidad de trabajo, así se veía con eso yo transitorio, ¿no? Entonces tenemos los corchetes, este tipo de ese tipo en esta situación aunque. Vamos a ver corsé abierto, tipode I HTTP o póster con los corchetes tipo coma de repositorio HTTP con cohetes. Observe, una vez más, esto es genérico. Podríamos ponernos específicos y en realidad tener como implementaciones específicas de repositorios que específicos Collie, lo siento estoy girando. Ver en color específico, pero eso mapeado directamente a los tipos de datos que estamos usando. Por lo que podría tener el repositorio de reservas, el repositorio de colores. Y por supuesto eso nos da la oportunidad de extender la funcionalidad directamente para el tipo particular o diferentes operaciones. A lo mejor las reservas podrían necesitar algo más que los demás no. Por lo que el patrón genérico podría no funcionar necesariamente. Entonces en ese punto otra vez cosa de tener más repositorios, pero por ahora estamos haciendo multitudes simples de, así que sólo voy a tener el repositorio genérico sencillo que todos puedan usar y disfrutar y notar dónde lo estoy poniendo. Estoy tratando de ponerlo después del registro del cliente HTTP y del material del interceptor. Muy bien, entonces ahora que tenemos todo eso configurado, podemos volver a nuestros componentes. Y voy a empezar con, siempre empezamos con el simple. Entonces hagamos colores, ¿verdad? Por lo que en el crear loterías o archivo, habríamos inyectado el interceptor así como el cliente. Saber lo que voy a hacer es inyectar el repositorio HTTP. Y lo que tendremos que hacer aquí es o teníamos la declaración de uso directamente al componente o sabemos que podemos simplemente agregar una declaración de uso a las importaciones de vista para que todos lo tengan. De acuerdo, entonces eso es algo que un puede considerar. Pero sólo voy a empujar adelante con los colores y esta vieja. Entonces debido a que es genérico, necesitamos especificar la clase de datos, así que voy a tener que ver el color. ¿ Está bien? Y luego otros lo dejan como clientes. Entonces eso significa, vale, Así que esto se inyecta y luego cliente ya no ha posado como JSON punto un fregadero. No. El cliente tendrá una llamada de función para crear. Y los dos parámetros serán el endpoint y el color a crear. Puedo quitar el interceptor y déjame solo comentar el modo para un no. Y entonces tomemos a estos jinetes. Entonces vamos a intentar crear un nuevo color y luego ver cómo todo se une. Está bien, así que sigamos adelante. Trae colores a casa, crea nuevo color. Y luego voy a poner en lo que es otra Caracalla común? Sólo pongamos en verde. Y luego creamos color, y ahí vamos. Por lo que nuestro cliente HTTP sigue disparando a pesar de que no estamos dirigidos llamándolo. Y tenemos nuestro repositorio saber. Entonces tenemos menos inyecciones y menos puntos de contacto y menos mantenimiento en general si algo cambia, ¿verdad? Por lo que ahora sólo puedo quitar esas referencias deudores, quitar eso, disponer herencia y quitar esa inyección del interceptor. Y luego puedes ver que nuestro código de componentes se ve un poco más limpio. Entonces este es un bonito patrón en el que siempre se puede pensar. Ya sabes, cada vez que estás haciendo algo una y otra vez y repitiendo el código y luego estás empezando a agregarlo. Y luego tienes múltiples puntos de contacto, entonces puedes empezar a pensar en cómo puedes obstruir esos bits pesados lejos de cualquier componente o de cualquier método o de cualquier clase en general, y ponerlo en una clase para sí mismo y reutilizarla. Para que puedas seguir adelante e implementar esto. Entonces solo te desafiaría a pasar y refactorizar y actualizar todas tus referencias que hubieran estado apuntando directamente al cliente HTTP y al interceptor para saber sí apuntan al repositorio apropiado para eso componente. Entonces cuando dije el repositorio apropiado, bueno, este repositorio, pero por supuesto la clase Data necesita ser la correcta, ¿verdad? Por supuesto que ya tenemos los puntos finales siendo pasados y los objetos. Entonces si usas el equivocado, entonces obtendrías un error. Entonces, solo echemos un vistazo a los micras. Si hago que esto parezca ajuste a la mezcla, correcto, voy a reemplazar al cliente por ese repositorio. Incluir una referencia. Entonces digo color y luego aquí abajo veo que esto debe crearse. Entonces voy a terminar con una flecha porque estoy pasando en el tipo de datos equivocado de acuerdo a esto, ¿verdad? Entonces ya sabes que la Confederación, si solo para asegurarme de que agrego los tipos de datos siempre son correctos. Y entonces solo puedes seguir adelante y quitar las referencias al interceptor y a las referencias desechables. Y entonces sólo se puede hacer eso a todos los demás componentes en consecuencia. 42. ACTUALIZACIÓN: eliminar las cuerdas mágicas: Muy bien, bienvenidos de nuevo desarrolladores de ventisca. En esta lección vamos a estar buscando reducir nuestras cuerdas mágicas y toda esta operación no es única para incendiar un desarrollo. Es sólo una buena práctica en general. Y sólo estaremos discutiendo una, qué cuerdas mágicas están sobre por qué necesitamos reducirlas. Por lo que empezando con lo que es nuestra cuerda mágica, una cuerda mágica es cualquier cuerda que esté bastante codificada y empeora cuando se repite alrededor del lugar. lo que un ejemplo práctico de dónde habríamos usado cadenas mágicas sería como en nuestro controlador de reservas para nuestra API. No, estos son muchos extremos. El peligro de usar estas cuerdas mágicas sería que si cambio el nombre de la tabla de vehículo mañana, no va a haber ninguna indicación por parte del IDE que ambiente de desarrollo que algo cambió en este podría ya no ser relevante o carrito. Entonces cuando tengo esta cuerda mágica codificada y estoy viendo vehículo y cliente. Y entonces tal vez cambié el nombre de la tabla de cliente porque recuerden estos están encerrados que necesita ser incluidos con las reservas. Entonces eso significa que tiene que haber una tabla coincidente con este nombre, para que cambie el nombre, entonces el código no arrojará un error. Y no lo sabremos hasta que el cliente se queje de que Hey, hago clic en este botón y no funcionó en ese momento. Ya no es una buena impresión. Muy bien, entonces vamos a estar viendo cómo podemos cambiar estas cuerdas mágicas avena. Y vamos a estar empezando con nuestras unidades de trabajo. De acuerdo, así que la primera manera de conseguir nuestro propio esto coincidirá con cuestión extrema estaría en la lista de inclusiones en lugar de codificar duro, la palabra vehículo, codificación dura, la palabra cliente, en realidad podría ver nombre fuera y luego poner a nombre de la clase que deseo incluir cuál sería vehículo. Por lo que esto realmente representaría una representación de cadena de la palabra vehículo, que es perfectamente legal en forma de los Incluye, que está esperando una lista de cadenas. Entonces eso significa que si algo cambió en la clase vehicular, tal vez el nombre del mismo cambió o algo así, entonces esto definitivamente arrojaría un error porque ya no habría una clase por el nombre vehículo. No obstante, esta es una buena solución, pero no necesariamente arregla todo el escenario, al menos en relación con nuestra necesidad de incluir propiedades adicionales. Porque si en la clase de dominio de reservas, si realmente cambio el nombre de la propiedad de vehículo para salvar los golpes son auto o algo así, entonces todavía no habría indicación a este nivel de que no haya más larga una propiedad de navegación a ser incluida por el nombre del vehículo. Entonces lo que vamos a estar haciendo es cambiar viejos los mitos fuera incluyendo. Entonces, en lugar de usar una lista de cadenas, vamos a estar usando un tipo de datos diferente llamado IA consultable. Incluyo una consulta de todo bien, Eso es, eso es bastante bocado, pero va a parecer similar a nuestra ordenada, ordené queryable. En realidad es un tipo de datos de aspecto muy similar. Por lo que sólo voy a seguir adelante y reemplazar en nuestro repositorio genérico la lista de Inclusiones para saber ser. De acuerdo, llegaremos a ello. Va a tener la misma función de primera parte, nuestro soporte angular del teléfono I queryable t, es lo mismo excepto la segunda parte es incluyo objeto t coma consultable. ¿ Todo bien? Y entonces esa es realmente sólo la función. Entonces está devolviendo algo así como una función. Y tengo que incluir otra biblioteca de núcleo de dotnet. Entonces ese es todo el problema. Y entonces habríamos sustituido ese corazón barómetro. Entonces eso se pone también tienen que hacer eso de nuevo para el Git. Entonces solo voy a ir al get y en reemplazo eso también. Ahora eso está en la interfaz, claro, lo que sea que estemos haciendo, la interfaz que tenemos que hacer en la implementación. Por lo que nuestra implementación no es feliz ahora mismo porque cambiamos algo pero no nos preocuparemos, pronto nos pondremos al día hasta ahora nuestro GET, hacemos lo mismo. Voy a cambiar esto por nuestro increíble consultable, y voy a seguir adelante e incluir las referencias que faltan. Entonces lo mismo para los consigue todo. Sé que hemos hecho eso tenemos que refactorizar bastantes cosas. Uno, nuestro método está en todos los demás métodos que llamaban a esto. Estoy usando eso incluye parámetro. Muy bien, entonces no, dentro de nuestra implementación en el camino que el include funciona nulo, es un mito impar. Por lo que no necesitamos ir por cada uno a través de cada propiedad e intentar incluirlo. En cambio, lo que vamos a hacer es simplemente eliminar esto para cada uno. Y entonces decimos que la consulta no es igual a los Incluidos, que una vez más es un método. Y luego consulta. Muy bien, así que más o menos cuando pasamos en un objeto el cual va a verse similar a una expresión lambda, similar a sostener las miradas OrderBy y así sucesivamente. Pero cuando lleguemos ahí, llegamos. Lo que va a pasar es que si entra algo, en el manto superior, que ya estamos familiarizados con el concepto de. Entonces la consulta va a seguir adelante y ejecutar que incluye partes de la misma contra sí misma. Y entonces tenemos esa consulta con el permiso incluido. Esos son más bien datos, ¿verdad? Entonces tenemos que hacer algo similar en nuestros consigue todo donde solo decimos consultas iguales a ejecutar, eso incluye contra ti mismo, por favor. De la misma manera con el OR. Observe que la orden POR quien estaba haciendo lo mismo. Bueno, eso es lo que hace el inclusivo. Está bien, incluyo doble consultable. Entonces ahora que tenemos eso, voy a saltar de nuevo a mi controlador de reservas. Y ahora vemos que todo lo que era una especie de caos se ha desatado porque nuestros parámetros incluye ya no lista de cuerdas. Entonces en realidad puedo simplemente quitar esto, ¿verdad? Sabemos que necesitamos vehículo y clientes, así que lo haré con este que aún no hemos modificado. Por lo que para el incluye espirometro, vamos a estar pasando expresión. Entonces fui a ver Q y una startup que lambda, expresión lambda. Y ahora puedo ver incluir. Ahí vamos. Ahora incluir puede que surja, pero es lo que tengo ahí. Sólo tienes que seguir adelante. Y si se le ocurre un error que se puede seguir adelante e incluir las referencias faltantes son. Entonces cuando digo incluir aquí, puedo poner otra expresión lambda dentro que incluya expresión y luego empezar a incluir lo real, las propiedades de navegación reales de la clase de reserva para que nosotros, sepamos dónde hablando directamente con la clase a diferencia de Esperanza tercero, poner en una cuerda y esperar que coincida con algo de esa clase. Está bien, para que pueda conocer C, quiero incluir vehículo. ¿Y adivina qué? Necesito incluir más de una cosa para que solo pueda ci y esto a lo largo y decir punto incluir de nuevo. Por lo que note he incluido y luego incluyo. Correcto. Entonces si lo necesitas para incluir esta propiedad y un hijo de esa propiedad, entonces puedes ver incluir, dot luego incluir y seguir bajando para lograr. Pero por cada vez que dices incluir, estás mirando directamente a la clase en cuestión, al menos en este caso reserva. Por lo que solo estás mirando las propiedades de reserva a medida que avanza. Entonces necesito y necesito cliente. Está bien. Permítanme que lo descomponga un poco en líneas diferentes para que podamos ver exactamente lo que está pasando. Y ahí tienes. Por lo que todo está fuertemente tipado. Entonces si algo cambia en la tabla de reservas, definitivamente traerá el código solo para decir que cambiaríamos el repositorio y todo el código está roto. Es bueno cuando se rompe en esta etapa porque entonces lo arreglas. Y luego podrás seguir adelante y publicar tu solicitud con más confianza. Entonces solo voy a seguir adelante y replicar que incluyan declaración arriba aquí porque sabemos que eso es lo que necesita éste. Además, quita esa lista y déjame solo asegurarme de deshacerme de todas las flechas que escribí incluye colon dos veces. Está bien, así que ese es un problema arreglado. Está bien, así que solo voy a hacer una compilación y ver dónde más se puede romper y nuestra lista de errores, por suerte es corta, ¿verdad? No, pero podemos ver aquí sería otro lugar donde estas cuerdas mágicas podrían causar un problema. Está bien, así que ahora solo puedo ver puntos incluye, y mira esto. Estoy usando el mismo código que usé para reservas y estoy obteniendo errores. ¿ Por qué estoy recibiendo errores? Bueno, uno, propiedades de navegación no dentro de vehículos. Entonces eso está mal. Cliente es lo que vehículo no es de ninguna manera. Y bueno, yo no estaría incluyendo el consentimiento de igual. Entonces el problema con esto una vez más fue que si hubiera puesto en nombre aquí, ese es un vehículo y no habría indicio de que esto no pueda funcionar hasta que el programa se estrelle. Entonces esto en realidad ahorrará mucho tiempo en la depuración y Evitar que los libros ocurran alguna vez en esta etapa, ¿verdad? Por lo que ahora puedo ver incluir el micrófono. Y entonces puedo ver que incluir de nuevo. Y éste sería modelado de guardia. Está bien, así que ahora tenemos a los tres siendo incluidos, y solo voy a copiar la línea y usarla a continuación, también incluye colon y luego nuestra declaración y luego puedo deshacerme de estas listas. Está bien, entonces en última instancia, eso sí ayuda a limpiar mucho tu código, hazlo más a prueba de balas a medida que vas y crece. Ahora otra área que quiero abordar, un arroyo mágico que podría causar problemas sería dentro de nuestro objeto de reserva o maniquí un objeto donde tenemos esta validación que se está llevando a cabo. A pesar de que aquí, estoy viendo que este es nuestro mensaje y se debe aplicar en contra de esta propiedad. Una vez más, si este nombre de propiedad cambió, bueno, eso es demasiado de una flecha. Pero si este nombre de propiedad cambió y luego lo cambiamos aquí y lo cambiamos allá. Podríamos fácilmente olvidar cambiarlo ahí porque probablemente nos atraen más las líneas rojas que buscar cada contento que dijimos la palabra o las palabras fecha en. Entonces mi punto una vez más sería, y podemos en este caso utilizar el método original que he mostrado donde vemos nombre fuera y luego complacer el nombre de la propiedad en eso. Por lo que esto renderizará a una cadena. Entonces si algo cambia en el nombre del inmueble, esa línea roja también nos alertará. Entonces esos son pequeños consejos de desarrollo. Una vez más, esto no es específico del negocio, esto es más solo lineamientos generales de desarrollo para asegurarte de que estás construyendo a prueba de balas. Por lo que las aplicaciones y que sean más mantenibles para la ejecución más larga. 43. IMPORTANTE: arreglar el punto: Hey chicos, acabo de tener un rápido adenda a la lección anterior donde tendríamos refactorizar un poco nuestro código y eliminar las constantes cadenas mágicas como se llaman cuando estamos llamando a nuestros endpoints, sin embargo, esos pedacitos de refactorización y la forma en que yo lo escribió tipo de tema introducido con la eliminación. Entonces, ¿qué pasará si escribieras el código igual que yo lo hice, terminarías cuando elimines esto, este endpoint devolvería un 404. Y la razón de eso es que creé la cadena estática de endpoint de mezcla con esa barras tirantes. Y luego en la construcción de la URL, aún nos ponen slash. Entonces eso significaría que tendrías api slash, slash slash que el ID. Y entonces eso realmente haría que dejara de funcionar tan fácilmente. Podrías arreglar esto tal vez eliminando esa tira inclinada final en la API y en la cadena bajo estática más bien podrías simplemente eliminar esas barras finales. De esa manera cuando estás construyendo nueva URL, puedes poner esa baraja. O si quieres dejar el aguanieve en la cuerda estática y quitar la tira allí. Pero creo que es más difícil ver eso funcionando o sabes exactamente cómo funciona eso. Entonces voy a quitar los slushes de los endpoints de la API. Y luego al formar la propia URL, pondré esa baraja ahí. 44. Soporte progresivo: Oigan chicos, bienvenidos de nuevo. Entonces estamos aquí para hablar de aplicaciones web progresivas. No, las aplicaciones web progresivas son PWA para abreviar. Se trata de persona se refiere a aplicaciones web que hacen uso de modernas API de navegador y permiten crear web ups descargables. Entonces deja que eso se hunda un poco. Entonces cuando decimos aplicaciones web descargables, estas aplicaciones web, al igual que orbitando está aquí arriba. Recuerda cuando lo estábamos creando. Y me aseguré de señalar ciertas opciones. Y una de ellas fue aplicaciones web progresivas. Por lo que vino con ciertos archivos que soportan aplicaciones web progresivas, a saber, el servicio de trabajador y esos esos archivos JS como un manifiesto JSON. Todas esas son tipo de incluidas porque elegimos la aplicación web progresiva. Está bien, así que con el fin de descargar esta aplicación web y justo, solo el 0 que esta está disponible en navegador basado en cromo. Entonces como puedes ver aquí, estoy usando Microsoft Edge. He estado usando edge. ¿Qué? Microsoft Edge al menos al momento de esta grabación, se basa en el Chromium Engine de Google Chrome. Google Chrome es el pionero de esa tecnología. Opera también se basa en esa tecnología. No del todo seguro sobre el soporte de Firefox para aplicaciones web progresivas, al menos al momento de esta lección. Pero podemos usar edge y hacer una prueba de concepto. Por lo que para poder descargar esta APP, todo lo que necesitamos hacer es buscar ese pequeño bloque de construcción arriba aquí en la barra de direcciones y ver cuando paso por encima de ella, dice Instalado administración actual. Entonces ese es el nombre de nuestra app que hemos estado construyendo. Y solo puedo seguir adelante y hacer clic en eso. Entonces la cosa es que esto arriba es en realidad como una versión modificada de un parque eólico arriba que-que se hizo en el pasado. De acuerdo, así que esto en realidad está haciendo, está basado en la web, pero hay ciertas personas que al igual que tienen las aplicaciones en su computadora. Querían trabajar a veces en modo offline. Y todas esas cosas pueden ser posibles para las aplicaciones web a través de esta tecnología progresiva de aplicaciones web. Entonces cuando sigo adelante y hago clic Instalar en realidad solo toma unos segundos y pongo esta aplicación en mi máquina. Entonces aquí está la aplicación en mi máquina. Y puedes ver que ya no está ganando en el navegador. Siempre puedo hacer clic en esto. Ir a info. Puedo abrirlo en el navegador si quiero. Puedo desinstalar. Incluso puedo costar dispositivo multimedia, está en mi máquina. Está bien, y ahí está el icono en la barra de menús Inicio. Probablemente no lo puedas ver. Pero en realidad estoy flotando sobre el icono aquí abajo donde en realidad puedo simplemente fijarlo a la barra de tareas. Ahí está el icono. De acuerdo, así que todos esos archivos, el punto manifiesto JSON. Incluso cuando me detenga, déjame detenerme y déjame saltar a estos archivos. El manifiesto JSON aquí podría cambiar el nombre de la aplicación y el nombre corto, todas esas cosas, el buck crecido color de los iconos. Hay una serie de cosas que puedes hacer desde estos archivos que influyen en lo que se presenta cuando se descarga esto. Entonces ese es ese ícono, eso es ceniza que surgió en mi aplicación habiéndolo instalado en la computadora. Está bien. Entonces si cambiamos eso o a tal vez el logotipo de la empresa o así sucesivamente, justo fuera del bate, cuando se instale, esa es la imagen que se mostrará. Y una vez más, puede hacer todos los cambios en estos expedientes. Pero yo sólo quería 0 que sólo todo duro la caja con sólo seleccionar algunas opciones adicionales. Cuando estábamos creando este proyecto, habíamos indicado, y con tanta gracia nos otorgó la oportunidad de utilizar aplicaciones web progresivas con nuestro blazer up. Entonces ahora podemos tener una situación híbrida donde web una web arriba, se pueden instalar fácilmente en un dispositivo Windows, en un, en un Linux, en un MAC, en un iOS, en un Android, realmente no hace mucho a la vez. Estamos usando un navegador moderno que soporta esta tecnología. 45. Agregar cambios a GitHub: Oigan chicos, bienvenidos de nuevo. Y estamos en otro punto de control donde sólo vamos a estar revisando nuestra cuota GitHub. Pero antes de hacer eso, quiero revisar algunos de los principales puntos de discusión de las actividades que terminamos juntos y señalar algunas de las adversidades porque te mostré algunas cosas y luego como que te dejé para terminar lo arriba. Te animo a terminarlo sin embargo todo por supuesto, ten mi cool a referir, pero por si acaso te encuentras con alguna dificultad en el camino, solo quiero señalarte ciertas cosas todas a ti. Y eso es lo que vamos a hacer antes de que sigamos adelante y sigamos adelante. Entonces a modo de recapitular algunas cosas que habíamos hecho en esta Sección 1, empezamos con personalizar el, o al menos mirar cómo podemos ir a personalizar las páginas de identidad. Vimos que todos se generaron donde los andamiamos en el apartado de páginas de identidad. Y vimos que podemos modificar el inicio de sesión o registrarse. Podemos ampliarlos de acuerdo a nuestras reglas y requisitos de negocio. Entonces tienes una buena idea de cómo hacer todo eso. También miramos la implementación de JS interrupt con bibliotecas de terceros. Entonces solo voy a ir con la página de reservas donde hicimos eso en la página de índice. Está bien. Entonces otra cosa que habría hecho es asegurarme de que todos los componentes tengan código detrás de archivo. Entonces una vez más, esto en realidad es opcional, así que no estoy diciendo que debas o si no lo tienes, no has logrado nada porque si funciona, funciona y se ha trabajado está diseñado lo siento trabajar en cualquiera de los formatos. No obstante, he ido adelante e importado cada uno de los componentes puntajes al código detrás del archivo. Muy bien, entonces para la página de índice, tenemos que implementar la disposición de IA porque recuerden que tenemos ese método de disponer que implementamos. Por lo que en el componente en sí dijimos que desechable o me desecho punto. En esta situación, sólo lo vamos a heredar y luego usarlo, y eso ya lo hemos hecho antes, así que eso no es nada a extranjero. De lo contrario, no lo sabemos. Tenemos nuestras inyecciones a medida que avanzamos, hacemos nuestro JS Runtime y en después bajo un fregadero, seguimos adelante y renderizamos la tabla de datos. Ya hemos pasado por la escuela antes, pero justo como resumen, sabemos, sabemos, sabemos lo que se necesita para implementar o poner en una biblioteca JavaScript de terceros en nuestras aplicaciones blazer. Por lo que esta técnica va a través del tablero para básicamente cualquier biblioteca JS de terceros que quieras implementar aquí. Ahora otra cosa que habría hecho fuera de cámara es implementar algún nivel de seguridad. Entonces hay una política de seguridad llamada lo que Se llama política de seguridad de contenido, donde podemos seguir adelante y colocar restricciones a los scripts que queremos que se ejecuten en nuestra aplicación. Ahora esta política no es única de blazer, es una política web. Yo solo lo estoy implementando en blazer aquí, pero así es como debe verse esa política para que puedas pausar e intentar replicarla. Pero fui a pasearte a través de ella. Por lo que el metatag, HTTP dash equiv. Política de Seguridad de Contenidos. Entonces es solo un encabezado que estamos enviando al navegador para el navegador sepa qué archivos de script, qué archivos CSS queremos ejecutar en nuestra aplicación. Y esto se vuelve importante para ayudar en la lucha contra los ataques de scripting entre sitios. Por lo que esta política sólo sigue adelante y establece restricciones. Y le permite saber que cualquier cosa que no esté viniendo de la propia página web o incluyendo este código en particular o tenga una evaluación insegura y no lo ejecuten. También le hacemos saber que estamos confiando en scripts de estas fuentes. Y de igual manera para los estilos que dijimos: Vale, aceptaremos yo mismo. Podemos aceptar estilos en línea, y aceptaremos una hoja de estilos desde aquí. Entonces Nevada tercero, tanto si vamos a seguir adelante e incluir otras bibliotecas de terceros, y queremos proteger nuestro sitio web de la misma manera que sólo tendríamos que extender este metatag para incluir esas cosas. No, las políticas de seguridad de contenido son método muy popular para asegurar sitios web. Nuevamente, lee más al respecto desde el sitio web de Firefox, que acabo de mencionar en la pantalla CSB. Y puedes simplemente leer sobre él y ver exactamente qué tipo de protección puedes obtener y ver realmente estos valores significan en la construcción de esta política. Ahora pasando, también avanzamos y modificamos o en servicio septa cuando estábamos modificando la carga de archivos. Entonces estamos probando una cosa, desplegamos otra laguna. Pero seguimos adelante y agregamos esta excepción a la intercepción 0 porque la necesitábamos para detener la ejecución una vez que hubo un error, porque en realidad seguiría intentando ejecutarse. Por lo que necesitábamos detenerlo en sus camiones y dejar saber al usuario que algo salió mal. Y en esas mismas notas, habíamos implementado file uploader. Lo hicimos específicamente para los vehículos. Y el componente antebrazo para los vehículos es mucho más grande que los otros componentes de forma porque tiene un poco más de lógica sucediendo ahí dentro. Pero una vez más, así es como podemos aislar el código del componente en el archivo para que todo se mantenga compacto y fácil de encontrar, ¿verdad? En un intento por reducir la repetición y el hogar en las decenas o llamar al cliente y el mismo método una y otra vez, bueno, lo hicimos fue crear un repositorio HTTP, que solo lo llamo repositorios HTTP lo suficientemente genérico como para aceptar cualquier tipo de datos y realizar la acción requerida, conocer algunas cosas que quiero. Aquí se tomaron algunas decisiones que más tarde cuando yo era un refactorizado volvió a atormentar al hombre, probablemente ya sea has pasado por su R, lo están pasando. Entonces déjame señalar que dijiste al implementar un put esto como idealista, pero entonces, ya sabes, no puedo mezclarlos mucho. Enumero y enumero a través de todo el código. Por lo que eso habría provocado algunos conflictos. Entonces o lo cambias a lista y luego cambias todo lo demás a listar o cambias esto el idealista y todo como el analista. De cualquier manera, ese pequeño desajuste del tipo de datos podría haber causado algunos dolores de cabeza aquí y allá. Pero mi fácil arreglarme esos a mí en esta lista porque la mayoría de las demás cosas que estamos sólo listan en mi código de todos modos o en el resto del programa. Está bien, así que puedes seguir adelante y cuidar de eso. Y también verías que si hicieras el repositorio y la lista, entonces en realidad es más fácil para no tendrías ese desajuste del tipo de datos para los que están lista, ¿verdad? Entonces como dije, estoy mezclado y les iguala. Esa no es necesariamente una buena práctica. Cuándo limpiar eso, claro. Pero si estás usando una lista USA LLC, si estás usando lista inútil. Pero lo bueno de idealista es que es sólo una obstrucción de un tipo de lista o colección que es lista. Entonces debido a que estamos devolviendo una lista de nuestro repositorio genérico, no causó un choque de tipo de datos porque estamos asignando el L2. Es una abstracción, Es obstrucción de nivel superior. ¿ Está bien? Entonces eso es relativamente desconocido es sí, solo estoy señalando que viejo en caso de que te estés preguntando. Y luego finalmente exploramos lo que se necesita para tener aplicación web progresiva, cómo funciona exactamente. Hay mucho más en ello. Lo que no me voy a poner demasiado en profundidad, pero vimos lo fácil que es simplemente instalarlo en la máquina o en un dispositivo. Y podemos personalizar las imágenes y ciertos bits de información de estos archivos que se encuentran en la carpeta raíz www. Está bien. Entonces con todo eso dicho y hecho, y eso somos nosotros vamos adelante y hacemos un check-in. Este es un enorme check-in para mí por bastantes archivos que fueron modificados en el camino. Y tenemos las imágenes y todas estas cosas maravillosas. Entonces por supuesto, los disturbios o mensaje amistoso y útil que representa a ti mismo, a futuro tú y a tu equipo lo que exactamente se hizo. Y entonces sólo voy a hacer un commit y empujar. Entonces un empuje por supuesto un manda lo maravilla, Shauna fregadero significa que si hay cambios ahí arriba Eso está inactivo en la parte superior, entonces los jalará no también, ya que soy el único trabajando, realmente no importa cuál se utiliza. Entonces eso está bien. Y eso es todo para esta sección. Nos vemos. Y eso es todo para esta sección. Nos vemos pronto. 46. Deploy a Azure: Oigan chicos, bienvenidos de nuevo. Por lo que estamos en este módulo donde llegamos a implementar nuestra aplicación en Microsoft Azure. Y Microsoft hace su es el proveedor insignia de Cloud por Microsoft. Y lo que hacen es proporcionar la capacidad de desplegar sus aplicaciones prácticamente sin problemas en internet. Y proporcionan infraestructura administrada que no tengas que preocuparte por ir y configurar servidores y sentarte esto y seguridad que te dan todo eso de la caja. Y es relativamente asequible. Entonces vamos a estar implementando nuestra aplicación como la ven aquí, a Azure. Tengo en otra pestaña vinculada a Azuri. Se puede llegar hasta bluedot microsoft.com. Y lo que tienen, lo primero que vas a ver es que puedes empezar de forma gratuita. Por lo que es realmente fácil registrarse, sobre todo si ya tienes un live de conos, que probablemente usaste cuando instalaste Visual Studio al inicio de este curso están en el precio pasado de este curso. Pero es fácil para ti inscribirte, empezar de forma gratuita, obtienes 12 meses, así como créditos de 200 dólares para ir hacia servicios y experimentos que quieras. Ahora, personalmente, tengo una paga a medida que subes, lo que significa que solo pago por el uso de recursos. Entonces en este tutorial, algunos recursos no serán gratuitos, como en si estás en el plan gratuito, eso está bien. Pero si lo estás si ya estás agotado tu periodo de prueba y entonces estás haciendo este curso y estás desplegando que tal vez tengas que terminar pagando ciertos servicios, que yo los señalaré todos. Es a medida que avanzamos y tratamos de mantener todo al mínimo. Pero si no necesariamente se puede seguir y bullseye hacer al menos veremos cómo funciona implementar una aplicación en Microsoft Azure y es bastante fácil. Entonces, empecemos. No Buck en nuestro proyecto, tenemos algún trabajo de preparación que hacer en nuestras configuraciones antes de que podamos pensar en ambos desplegados en nuestro archivo AP settings.js JSON. Necesitamos configurar un camino. Bueno, necesitamos configurar un certificado SSL y configurarlo spot para nuestro servicio de identidad. Entonces lo que pasa es que en base la configuración que el servidor de identidades ha alterado los pernos, necesitamos configurar un certificado SSL para que la aplicación cliente pueda realmente hablar con la aplicación del servidor. Está bien, porque entonces va a fallar en la startup. Por lo que en realidad tenía un pequeño cubo con la suma sí saltando por delante de la hebilla. Y solo te estoy mostrando la solución a ese problema muy, muy prevalente que podrías terminar teniendo si no sigues estos pasos. Muy bien, por lo que la aplicación cliente necesita comunicarse con nuestro servidor con el servicio de identidad. Necesita básicamente hacer como detrás de bambalinas, iniciar sesión para que el cliente lo sepa o el, lo siento, el servicio de identidad sabe que el cliente está aquí, está listo para conectarse. Esto se hace a través de unas conexiones muy seguras. Por lo que es necesario un certificado SSL para facilitar esto. Entonces en el desarrollo, eso está bien porque en la configuración de la aplicación ese punto de desarrollo JSON. Ya verás aquí que dice los desarrollos de tipo clave. Entonces solo dice, vale, bueno, este es momento de desarrollo, no es problema sin embargo, en nuestro molesto. Por lo que no tienes ningún escenario como ese. Y sí tenemos el cliente donde dice que este es el cliente que está conectando el perfil es que es un servidor de identidad, SPA. Y si vas a los controladores y a todo el controlador de configuración IDC, entonces vas a ver dónde entra todo ese material del cliente. Por lo que este control y en el extranjero, no tenía mucho sentido al inicio de este curso. Y no pasé demasiado tiempo explicando lo que pasaba aquí. Pero luego basado en toda la interacción y todas las cosas que hemos hecho hasta este punto. Y ya ves cómo tenemos que autenticarnos contra el servidor obliga en nuestras ganancias. Tenía entidad para poder utilizar el cliente con éxito, el Tolkien necesita ser fácil en todas esas cosas. Por lo que este controlador básicamente solo tirando de esas cuerdas. Sabe dónde el cliente ID, una vez más, esta planta, ¿no? Sabe todo sobre todo eso y básicamente es sólo facilitar esa comunicación. Pero una vez más, los certificados SSL tienen que estar presentes. Por lo tanto, facilitar esto. Ahora en este despliegue, solo estamos desplegando una aplicación personal. Entonces el cert va a ser un autocensor que vamos a generar en la máquina y luego usar. Pero en un entorno de producción entonces por supuesto querrías usar una producción preparada y debidamente emitida certificados por una de las autoridades líderes. No obstante, los conceptos seguirán siendo los mismos. Entonces, solo empecemos. Entonces ahora para empezar, lo que queremos hacer es traer a PowerShell va a estar usando esta herramienta muy poderosa. Una vez más, si estás en una máquina Windows, pero es una herramienta muy poderosa y la vamos a estar usando para generar o scripts SQL. Por lo que quieres traerlo como administrador. Muy bien, Así que Ejecuta como administrador, puedes buscarlo en la barra de búsqueda o puedes encontrar el ícono en sí derecho derecho y luego ves que lo ejecutas como administrador para que puedas usar cualquiera de las opciones para obtener ese edificio. De acuerdo, entonces el primer comando, y lo que vamos a estar haciendo es construir algunos. Entonces si esta es la primera vez que usa Porsche consigue fácilmente un C, tipo de cómo funciona. Bueno, bueno, no sería la primera vez que utilizara tonterías porque el administrador de paquetes y el estudiante de visuales en realidad está usando comandos y mandlets de PowerShell, ¿verdad? Para que ese tipo de formato obtenga ayuda de dash o la base de datos dash y agregue migración de dash. Todos esos son los que llaman mandlets de PowerShell, ¿verdad? Por lo que aquí vamos a utilizar un comando llevado para crear una nueva búsqueda. Entonces esta es una variable. De acuerdo, si no lo haces PHP eso no debería parecer demasiado desconocido para ti. Y luego vamos a decir nuevo yo y luego puede presionar Tab y se va a completar automáticamente la línea, ¿verdad? Por lo que Newell certificados autofirmados, DNS, nombre. Y luego voy a llamarlo, vamos a llamarlo auto en tau era auto o una toalla Watson, ¿verdad? Eso es lo que me atrapan en el DNS. Por lo que en términos generales, eso quiere, quiere que represente la URL para el sitio web. Una vez más, esto se está desplegando o subiendo. Por lo que los conceptos están ahí, pesar de que la practicidad podría no aplicarse necesariamente en una situación de la vida real. Está bien, así que nombre DNS, solo lo llamaré auto hasta Watson o puedes llamarlo algo con lo que te sientes más cómodo. El cert ubicación de la tienda. Por lo que es un poco la ubicación predeterminada es cert colon Acerca de la máquina local slash, que simplemente contextualiza y esto está bien. Y entonces nosotros sólo, qué grande que acaba de ver los casos, van a ser demasiado pequeños. Ahí vamos. Eso se ve un poco mejor. Está bien. Por lo que se autocensurará el coche de nombre DNS hasta que no era CERT, cert, tienda, ubicación, búsqueda , máquina local, cert colon slash, maquina local slush. Y nota la dirección de esta barra, corta mi derecha. Entonces lo crea, y luego almacena cualquier detalle dentro de esta variable llamada CRT. Muy bien, entonces necesitamos fomentar protegidos. Entonces vamos a ver PWD y convertir herramienta, o lo siento, convertir herramienta, flujo seguro. Ahí vamos. Dash string, y luego sólo le daremos una cuerda. Entonces iba a usar al jefe por defecto o que conocemos y amamos. Por supuesto una vez más, usarías una contraseña mucho más fuerte en nuestra situación de la vida real. Y entonces tenemos decir una fuerza y como bonita y textos presionan Enter. Entonces estamos almacenando la contraseña como PWD. Entonces vamos a construir el camino. Entonces cinco es igual a, y luego decimos señor colon. Y luego si solo presiono Tab, termina la máquina local M tina, digamos Candace, usa la parte superior para tipo de velocidad esto a lo largo. Yo sólo estoy haciendo esto lentamente para que puedan seguir. Y dicen huellas digitales cert dot. Está bien. Y luego vamos a haber construido todo eso exportado a un archivo físico. Entonces voy a decir exportar dash b, fx, certificate, dash CERT, cert, y surf es caído dot py. Y entonces la ruta del archivo es donde queremos que llame, ¿verdad? Por lo que tengo una ruta de archivo en c colon slash slash sh. De acuerdo, déjame solo hacer certs de colon c. Entonces esa es mi carpeta en mi máquina. Para que puedas seguir adelante y crear tu propia carpeta en tu propia máquina. Y luego puedes usar esa ruta de archivo. No lo creará para ti, así que asegúrate de que exista. Pero quieres darle el nombre del archivo para que pueda ver blazer no era cert, entonces solo lo llamamos efectos punto, punto p. Está bien, así que ese es el archivo que quería generar. Y luego la contraseña es la Va a estar bien, adelante y pulsa Enter, y luego me va a mostrar que la búsqueda ha sido creada. Entonces para mayor facilidad, una vez voy a hacerlo porque hay dos razones por las que voy a hacerlo de esta manera. Uno, para facilitar en triunfos rápidos. Entonces sólo lo vamos a meter en el proyecto. ¿ Sabremos dónde está? Y también vamos a poner en la conexión o los detalles de viñetas en nuestra clínica, en nuestra configuración de aplicaciones, en nuestras configuraciones para que se pueda utilizar. Lo volveré a poste siempre. Y probablemente la forma en que probablemente realmente quieras hacerlo en nuestro entorno seguro de la vida real sería dos. Cuando se implementa, cuando se implementa como su cargado en Azure, vamos a administrar el certificado y luego configurar su configuración para ver el certificado tal como lo administra Azure. Ahora porque quería mantener todo tipo de bajo costo, no estaré girando hacia arriba la versión pagada de Uzziah que permite que todo eso suceda. Estaremos usando el nivel gratuito. Entonces por eso, voy a mantenerlo sencillo. Pero una vez más, el concepto está ahí. Muy bien, alma. Importar este certificado a nuestro proyecto. Y todo lo que hice fue ir y encontrarlo en el sistema de archivos y copiarlo y pegarlo en el proyecto. Y aquí está. Y lo que queremos hacer es cambiar las propiedades para asegurarnos que lo siento, copia siempre. No se puede decir copia si es más reciente, está bien. De acuerdo, entonces lo que pasa es que queremos cuando estamos desplegando que incluya eso en el despliegue. Entonces ahora todo lo que necesitamos para actualizar nuestra configuración para que el servidor de identidades sepa a dónde ir y encontrar ese certificado que debería intermediar esa conexión. Una vez más, esto es para que podamos atravesar esta actividad. Pero el prob, la forma más segura de hacer esto sería dejar que tu administre la clave y luego tener el punto de configuración a esa clave administrada. Está bien, así que de esa manera no hay una clave F0, F4 física para que cualquiera pueda acceder. Y por supuesto, quiero decir, de esta manera puede ser segura si solo tenemos mucho hueso para acceder a los derechos al servicio y nadie realmente puede acceder al archivo de clave física y a cualquier cosa que haga balas , ya sabes, probablemente mejor simplemente manejarlo porque Uzziah no lo sabría mejor. Entonces aquí vamos a poner algunas configuraciones para claves. Entonces dentro del objeto de configuración del servidor de identidad o del objeto JSON, tenemos clientes, y esos son nuestros clientes y así sucesivamente. Nuestros clientes van a poner una coma y luego clave. Y luego decimos dos puntos y luego abrimos un nuevo objeto de configuración. Y luego vamos a especificar el tipo, el nombre de la tienda, la ruta del archivo, y la ruta. Y eso es lo que parece, ¿verdad? Por lo que tenemos el tipo que es archivo. ¿ Todo bien? Si estuviera siendo administrado por un tipo 0 sería diferente. Por lo que tenemos tipo que es nombre de almacén de archivos. Simplemente lo llamaremos mi ruta de archivo, la ruta que aseveran. Por lo que acabo de ponerlo en una raíz del proyecto. Podría haberlo puesto en una carpeta, lo que sea, pero donde sea que lo ponga, Esa es la ruta del archivo y la contraseña es la postura que se utilizó. ¿ Está bien? Si alguien accede al patrocinado y puede acceder al archivo, entonces obviamente, ya sabes, alguien podría romperlo. Pero una vez más, este es un certificado autofirmado. Por lo que toda la idea detrás de esto es no ser el más seguro y ser más seguro cuesta más dinero. Entonces en esta situación, sólo lo estamos manteniendo bajo costo una vez más. Entonces después de que hayamos hecho todo eso, entonces podemos seguir adelante y desplegar. Por lo que voy a ir con el botón derecho en el proyecto de servidor, haga clic en Publicar. Y luego en la pantalla publicada vamos a decir inicio. Por lo que desde publicado siempre podemos simplemente enviar todo a una carpeta, ponerlo en nosotros, un servidor local y haberlo ejecutado. Podríamos implementar en Azure, que es lo que vamos a estar haciendo. Dependiendo de la institución es posible que desee elegir una de las anteriores. Bueno, una vez más, nos estamos centrando en la azurita y también en ella, solo flota en el próximo. Y luego queremos que un servicio de aplicaciones lo mantenga arriba ventanas, así sucesivamente, cambia eso Next, y luego confirmarán tu suscripción el. Por lo que en este punto podría que se te pida que inicies sesión. Puedes seguir adelante y hacer eso. Pero los puntos y coma que usan para Visual Studio es mi Microsoft.com y se usan en 0's Así que me conocen, saben qué subíndices, etc. Y tienes prueba de slash de dev pago-as-you-go donde solo pagas por lo que usas y obtienes los recursos a las diapositivas o menor costo. Pero claro que no las estás usando por razones empresariales, ¿verdad? Entonces esa es mi suscripción en la que estoy. Tengo más grupos de recursos, o grupo de recursos es como un contenedor, como un contenedor lógico que dice que todos estos recursos pertenecen a esto. Por lo que tienden a querer tener nuestro grupo de recursos por arriba. ¿ Está bien? Entonces voy a seguir adelante y crear un nuevo grupo de recursos. Bueno, en realidad estoy creando, así que estoy creando un nuevo servicio AP, que luego sugerirá ese grupo de recursos para ese App Service. Y App Service es un servidor administrado. Y sigo viendo administrado, administrado lo que significa que no tienes que preocuparte por la infraestructura e instalar Windows en la configuración de IIS. No tienes que preocuparte por nada de eso. Todo está preestablecido. El ambiente es que básicamente están diciendo que tengo el entorno, solo dame los archivos y yo haré el resto. Para que podamos darle un nombre. Por lo que probablemente podamos cambiar esto para decir como la corriente no era actual, blazer, algo, cualquiera que sea el nombre que te gustaría en base a lo que quiere tu empresa. Grupo de recursos. Puedes dejar eso por defecto o si quieres crear, entonces quieres tener un nombre específico, entonces puedes hacerlo. Todo el ruido del plan de vapor donde necesitamos cambiarlo. Por lo que puedo dar clic en Nuevo y podemos seleccionar una la ubicación. Entonces basado en donde yo Oriente US 2 es mi centro de datos más cercano. Pero luego ves que se quedaron allí por bastantes lugares geográficos. Yo quiero elegir el que está más cercano a ti para tener el más eficiente o a la derecha? Entonces después de elegir East US 2, elijo qué plan quiero. Y por supuesto la palabra mágica está en la parte superior, la libre. Entonces seguiré adelante y pincharé. Está bien. Y luego podemos dar click en Crear y luego darle a eso unos minutos. Dije minutos, pero realmente tardó menos de un minuto, al menos para mí. Pero al final de esta actividad tenemos lo absurdo se crea. Entonces solo puedo seguir adelante y dar clic en Finalizar. Por lo que el recurso está ahí en la carga de trabajo. Está sentado conocido esperando Web, despliéguelo hasta el momento. Bueno, tenemos otro suelto y que necesitamos atar, y esa es nuestra base de datos, ¿verdad? Por lo que necesito configurar las necesidades de las abejas. ¿ Estamos usando Azure SQL o estamos usando una base de datos local? Y toda la Base de datos SQL de Azure es otra versión de software de administración. El T cuidado de todo eso por ti. Sólo están viendo Dime ¿qué quieres que se llame a la base de datos creada para ti? Todo lo que tienes que hacer es crear una tabla es leer y escribir y dejar a Mary, no tienes que preocuparte por instalar entornos de cerco en todas estas cosas. Por lo que solo usaremos la base de datos SQL de Azure. Haga clic en Siguiente, nulo. La base de datos necesita un servidor, como sabemos, ¿verdad? Usa las escrituras de B ya que tenemos que tener un servidor y por favor, así que tenemos que crear realmente estos. Y entonces que este paso es donde entra el costo, justo en. Este paso no es necesariamente gratuito en absoluto. Muy bien, Así nombre de la base de datos, sólo dejaremos los valores predeterminados, puntos de administración actual DB del servidor, donde se están atendiendo las necesidades. Bueno, esta es una base de datos por lo que necesitamos crear el servidor. Entonces después de conseguirte de nuevo, así los servidores o a un costo y realmente entra porque molesto, tienes que pagar por ese espacio. Y sólo voy a llamar a ese servidor DB sólo el nombre genérico agradable. No quiero que sea demasiado específico como lo hace un servidor que va a tener muchas astillas viejas diferentes que no están disponibles. Gestión actual, Watson. Y esta es una ranura en el Watson por supuesto es afilada para WeBassEmbly para que suene como aceptado que uno East US 2. Por lo que querrás mantener todos ellos pocos recursos en la región geográfica CMD. Y sólo usaré verdadera guerra como nombre de usuario y p sin Dala signo de dólar arena W 0 RD para la contraseña, el mismo signo de dólar, signo dólar W 0 RD. Está bien. Eso es todo lo que se necesita para configurar un servicio totalmente nuevo. Fácilmente eso es no, si instalaras el servidor de Microsoft en tu máquina, Bravo tomaría un poco más de atención que la sencilla forma que arranca un botón Ok y luego haciendo clic en Crear. Y entonces éste podría tardar un rato. Y cuando esté hecho, tendremos nuestro servidor de base de datos y base de datos creado Android para ti. Por lo que sólo podemos seguir adelante y golpear Next. Y luego nos piden que confirmemos la cadena de conexión. Por lo que esta reutiliza la misma verdadera guerra y signo P, signo dólar, signo de dólar W RD. Está bien, entonces te dan ese valor de cadena de conexión, que siempre puedes solo echar un vistazo a cualquier puede copiarlo y guardarlo para tus propios propósitos. Pero esta fuente de datos es la dirección al servidor. Bueno, sí. Entonces el servidor de base de datos. Está bien. Y ese es el nombre de la base de datos. Ya sabes, un perno de conexión cadenas ya. Pero en realidad podrías simplemente abrir un SQL Server Management Studio, poner este valor y luego autenticarte y luego conectarte. Y lo bueno es que se asegure automáticamente así como tu Lo Tiene todo en lista negra. No hay nada solo. Entonces si trataste de conectarte desde tu máquina, dirá, bueno, veo tu dirección IP, pero él está autenticado y luego indica que quieres estar en lista blanca para que nosotros, ya sabes, los accesos no autorizados se capta no lo hagan de manera significativa debido a esa política de seguridad predeterminada en su base de datos. Solo estoy tratando de mostrarte lo genial que es cuando se trata de mantener el ahorro. Y luego pregunte, ¿dónde quieres almacenar tu valor de conexión? Simplemente lo dejaré en la configuración de la aplicación. Key Vault es un servicio de pago. Si no me equivoco, como tu configuración de aplicación que viene componentes, por supuesto, tienes uno que funciona y luego uno que es muy seguro, más seguro. Entonces nos quedaremos con el que de todos modos funciona. Está bien, así que sigamos adelante y pinchemos Next. Y luego sugerirán que necesitamos desplegar algunas dependencias en Acetil-CoA Secret Store para que podamos golpear a Finish, permitir que eso haga lo suyo. Y luego cuando se haga o se publique pitch saber no tiene advertencias de que todo está bien. Pero quiero hacer una modificación antes de golpear Publicar y eso es a las opciones de Publicar. Entonces voy a pegarle a Edit. Y luego trae a la luz este nuevo cuadro de diálogo que no vimos antes. Pero voy a bajar a ajustes y luego se va a descubrir las bases de datos terminaron por contextos. Lo que pasa es que en este punto va a crear los beats obesos, pero no habrá tablas y no datos de acuerdo a nuestro C, esos datos y demás, ¿verdad? Entonces voy a seguir adelante y hacerle saber que quiero que aplique esta migración en público, en publicado, lo siento. Y podemos elegir usar esta cadena de conexión en tiempo de ejecución, ¿verdad? Entonces sólo voy a llevar esos a los otros ajustes. Realmente no juguetear les debía. Podemos optar por instalar esta extensión. No estoy seguro si eso es un servicio de pago, para ser honesto. Y entonces podemos elegir que cada vez que publicamos 12, limpiamos una carpeta y republicamos. Probablemente no necesites hacer esa. Pero voy a dejar todo esto marcado y luego seguir adelante y ahorrar. Y luego el momento por el que hemos trabajado de cerca, vamos a darle a Publish. Y cuando todo eso esté hecho, estamos recibiendo este error 500. Ella al menos hay avances. Entonces lo que voy a hacer es iniciar sesión en el portal. Entonces este es mi portal. Esto es lo que parece. Hola, puedes personalizarlo, así que no te importa lo aburrido se vea mi panel de control o bien tener sin muchos recursos de todos modos, pero solo voy a ir directo al App Service. Y a partir de ahí voy a usar el menú lateral. Entonces puedes, quiero decir, si tienes esta área, pero para mirarla, puedes tomarte algún tiempo y apreciar que estás obteniendo diferentes métricas, los datos de logro. A menudo golpeas un error de 500. Entonces ya ves que acabamos de pegarle a uno. Es un tablero muy útil. Puedes reiniciar de nuevo, detenerlo, y eliminarlo varias cosas, ¿no? Entonces lo que quiero hacer sin embargo es llegar a alguna herramienta avanzada. Por lo que en desarrollo las herramientas bajan a herramientas avanzadas. Podemos dar click Ir. Y entonces esto nos llevará a un tablero que nos permita entrar al sistema de archivos real, ¿verdad? Para que pueda ir a una consola de depuración, cmd. Y entonces aquí en realidad puedo ver los archivos que se subieron. Puedo ir a sitios www root, y luego estos son los archivos que se publicaron. Está bien. Entonces ves que todo está justo ahí. Está bien. Entonces quiero saber por qué esto es sentir. Quería ver enamorado a alguien para modificar la configuración de punto web, que está en la parte inferior de esta lista. Y luego voy a decirle que STD logo enable es cierto. Guardar. Y entonces sólo voy a tratar de hacer madrigueras de nuevo por los sitios web. Entonces digamos que tengo algunas búsquedas abiertas desde otra actividad. Por lo que SS Refresca. Y cuando eso refresca hecho, eso significa que habría generado un nuevo log, alguien para ir a buck. Y el destino de log es este log files y ahí está nuestro logo, stdio dot, dot, dot, dot. Míralo. Dice que hubo un error al cargar los certificados, el archivo. Ver Holmes dijo WW root, blazer, Watson cert no era teléfono. Entonces por eso tan solo para conducir el punto a casa que necesitamos tener este certificado a correr porque habrías visto otra flecha si los círculos y presidente y sepan que dijimos que la búsqueda está presente, no lo puede encontrar, seguimos recibiendo un error, ¿verdad? Por lo que la búsqueda es absolutamente vital. Ahora, ¿qué necesitamos? Lo que necesito hacer es mirar hacia atrás y ver por qué no puede encontrar ese cert. Entonces está bien, así que voy a decir Copiar siempre. Está bien, así que parece que es una copia todo lo es. Y luego voy a hacer una publicación fresca. Y cuando termine eso publicó esa vez. Boom, ahí vamos. Por lo que hemos publicado nuestro blazer WeBassembly hasta internet. Ahí está nuestra URL actual en gestión no era websites.net. Por supuesto, puedes comprar tu dominio personalizado y cómo se configura correctamente. Pero tratemos de amar y en donde. De acuerdo, esto es lo que necesitamos para arreglar ese estilo, pero de pie a un lado, siempre puedes arreglarlo más adelante. Pero aquí estamos en Internet, así que tenemos nuestra mezcla, tenemos nuestros modelos, todo lo que habíamos sembrado en la base de datos cuando empezamos está ahí. Y entonces podemos seguir adelante y hacer nuestro trabajo como queramos. Muy bien, así que hemos desplegado con éxito nuestra aplicación a Internet cortesía de Microsoft como 0 y ya ves, no tomó a nuestra derecha. Así de fácil es implementar una aplicación en Internet usando Microsoft Azure. Entonces eso es todo para esta actividad. Gracias por acompañarme.