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

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 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.

157

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 comp