Taller de desarrollo de aplicaciones móviles con Ionic y Angular

1. CoursePromo: ¿Quieres construir aplicaciones móviles? ¿Quieres apuntar a androides o iPhones? Si quieres crear tu propia aplicación móvil, pero no quieres tomarte el tiempo para aprender múltiples tecnologías. Entonces este curso es para ti. Con tecnología caliente como la iónica, no es necesario ignorar las tecnologías web estándar como HTML, Javascript y mecanografiado Te voy a mostrar no sólo lo fácil que es construir tu propia app, sino también lo divertido que puede ser. Además, podrás escribir una sola aplicación que funcione tanto en Android como en iPhones Echa un vistazo a estas aplicaciones. Todos ellos fueron desarrollados con iones. Y estos son solo algunos que yo mismo construí. Hay miles más. De hecho, casi el 20% de cada aplicación es una aplicación iónica. ¿Qué tan increíble es eso? Algunos de los temas principales que cubrirán en el curso incluyen construir la interfaz de usuario con el framework iónico, resaltar el trabajo que ionic hace por ti, crear una app demo que se vea perfectamente como en casa cuando se ejecuta en iPhones, androides o incluso navegadores de escritorio Te mostraré cómo crear una experiencia de aspecto nativo con componentes iónicos como menús, tarjetas, hojas de acción, alertas y notificaciones de tostadas. Usaremos un diseño de panel dividido que funciona tan bien en un escritorio o tableta grande como en un teléfono pequeño. Al final de este curso, verás lo sencillo que puede ser construir una aplicación móvil que funcione en el mundo real con ionic. Ahora, antes de comenzar este curso, te ayudará a familiarizarte con los conceptos básicos del desarrollo web usando HTML. No espero que seas un experto, y voy a cubrir los temas más complicados a medida que avanzamos. Si sabes cómo crear un botón HTML o agregar un manejador de clics, deberías estar bien Así que prepara tus ideas de aplicaciones y únete a mí en este rápido viaje para aprender cómo puedes convertirte en un experto en desarrollo de aplicaciones móviles con el framework Ionic 2. Sesión1: Todo bien. Así que bienvenidos a todos a lo que espero sea el primero de muchos talleres iónicos de desarrollo móvil Angular. Como he mencionado, soy Mike Callahan y estoy deseando pasar por esto y construir algo con todos En el chat, te he dado estas URLs. El primero es el enlace hub al proyecto que construiremos a lo largo del taller. Entonces todo está funcionando completamente, así puedes usarlo como referencia. La segunda URL es un get ub gist con algunos archivos convenientes para que no tengas que escribir todo si no quieres Los dos siguientes son mis datos de contacto. Ya deberías tener ese Michael en Walking River, y mi identificador de Twitter está en Walking River. Bien. Asumo que tienes programación general, HTML, y un poco de javascript. Voy a estar usando el código de Visual Studio. No tienes que hacerlo, pero ahí es donde estarán mis capturas de pantalla. También soy un gran fan de lo esencial angular de John Papa. Se trata de una colección de extensiones que facilitan el desarrollo angular. También hay un par de extensiones para fragmentos iónicos. No los he encontrado tan útiles como espero que sean. Pero me parece que este es absolutamente esencial. Bien. ¿Necesitas conocer angular? No es necesariamente que no vamos a pasar mucho tiempo en angular. Los conceptos, si necesitas algo, si no tiene sentido o oye, Mike, ¿qué es eso? Deténganme y lo repasaremos. Como regla general, vamos a estar usando los siguientes ismos angulares Entonces haremos uso de las directivas G cuatro y G. Haremos uso de la separación angular de preocupaciones. Sé que últimamente se habla mucho de suavizar todo junto en un solo archivo Y está el nuevo soporte experimental Angular 14 para componentes libres de módulos. Voy con la vieja escuela aquí. Es angular. Entonces tendré archivo JS, diferente archivo CSS, diferente archivo HTML. Si estás tan inclinado, eres libre de combinarlos por tu cuenta. Estas son las expresiones vinculantes que probablemente usaremos, y no creo que nos compliquemos más que eso. La primera es una expresión textual. Entonces, si tienes una variable llamada en este caso, EXPR en tu componente, y quieres que su valor esté en tu HTML, simplemente la rodeas con dos llaves Si no es texto o simplemente prefieres el segundo estilo. Puedes poner las comillas de nombre de variable sin las llaves Carla, pero pones el nombre de la cosa que estás vinculando al atributo del elemento HTML entre corchetes La única vez que esto es importante es si la variable a la que estás enlazando no es una picadura Por ejemplo, si estuvieras vinculando a digamos el atributo disabled, y quieres deshabilitar para igualar false y usas la primera expresión con las llaves, realidad estarías enlazando a la cadena false y eso puede o no evaluarse como falso en tiempo de ejecución porque la cadena falsa es una verdad evaluar o puede ser. Por último, el evento click ahí. Así que cada vez que queremos vincular una función en nuestro componente a un evento HTML. Pones el nombre del evento entre paréntesis y la función a la que quieres llamar entre comillas Eso es tanto angular, creo que como necesitamos. Bien, entonces vamos a pasar por todo esto. Esta es mi intro angular. Bien. Todo el mundo tiene instalada la CLI iónica, ¿verdad? Eso significa que ya tienes instalada la CLI del nodo también Probablemente no sea crítico excepto que creo que la CLI Iónica requiere Git o al menos asume que lo tienes Digamos que ya no tienes G. Todos están instalados en. Sí. Si no, NPM instala G en CLI Aquellos de ustedes que se presentaron temprano o antes me vieron hacerlo hace poco tiempo porque estaba en una versión más antigua. Todo bien. Entonces vamos a construir una interfaz de usuario muy básica y en. Va a consistir en una página de inicio, una página de lista de estudiantes, una página de información del estudiante y un menú lateral Esto es esencialmente lo que va a parecer. Disculpe. Entonces esta es la página de inicio. Aquí es donde comenzará la aplicación. La página de Roster cuando termine se verá así. Será una lista de alumnos de nuestra clase. La página del gallo está construida con una lista, que es un componente iónico, y tiene en iconos, botones y todo tipo de características iónicas geniales que implementaremos a medida que avanzamos La página de información del estudiante es donde se puede hacerlo un estudiante individual. Esto será formas iónicas, un poco más en almacenamiento iónico. Como puedes ver, llegaremos ahí eventualmente, integración a través de condensador para acceder a la cámara del dispositivo. Todo bien. Entonces, vayamos directamente a construir la aplicación. Donde sea que necesitemos eso es atajo. Pongo el link ist en el chat. También estará aquí en cualquier diapositiva donde la vamos a necesitar o donde pueda ser útil. Lo primero que queremos hacer para crear una aplicación on es escribir el comando al inicio. Sigamos adelante. Vamos a hacer eso. No voy a usar el asistente de creación de aplicaciones. Es genial, pero no es realmente necesario. Si quieres jugar con él, eres bienvenido a hacerlo. Voy a usar angular. Mi nombre va a ser. Voy a llamar a tiempo de asistencia. Voy a tener un menú lateral eventualmente. Pero la plantilla de menú lateral te da mucho repetitivo que no me importa Entonces mi preferencia es comenzar con una app iónica en blanco. Parece que estamos obteniendo condensador por defecto. Eso está bien. Y va a ir a instalar todas estas cosas por mí. Mueve eso fuera del camino ahí. No hace falta ver. Todo el mundo está siguiendo, ¿de acuerdo? Sí. Sí. Gracias. Bueno, ahí tienes. Ahora bien, para poder seguir adelante y ver esto, simplemente necesitas escribir servicio iónico. Tengo que estar primero en esa aplicación , tengo que estar en la carpeta. CD en eso? Entonces puedo servir iónico. Y como puedes ver aquí, servicio iónico es realmente solo delegar gran parte de su funcionalidad a la CLI angular Entonces escribí servicio iónico y el servicio iónico siguió adelante y generó este comando para mí. G run, y automáticamente inicia mi navegador predeterminado, que en mi caso es Safari y me da exactamente lo que pedí. Una aplicación en blanco con mucho contenido. Bien. Ahora bien, ¿todos están siguiendo y has llegado a este punto? Sí. Sí. Todo bien. Casi ahí. Casi ahí. Todo bien. Voy a pasar a la siguiente diapositiva. Lo que quería discutir muy rápido son las del desarrollador o las herramientas del desarrollador del navegador. Si estás en Windows, simplemente necesitas escribir F 12. Si estás en una Mac, es Opción de Comando Y obviamente, no parece. Sí. Yo estoy ahí. Todo bien. ¿Con las herramientas del desarrollador abiertas? Deberías ser capaz de hacerlo. Nunca puedo recordar cómo hacerlo en Safari. Ahí vamos. Entrar en el modo de diseño responsivo. Así que ahora puedo emular diferentes dispositivos apple. Si no estás en Safari, no, aunque estés en Savi, si estás en algún dispositivo supongo Recomiendo usar Chrome o edge para la experiencia de las herramientas del desarrollador. Lo realmente genial y no lo verás aquí. Lo verás en un poquito. Pero déjeme sacar esto a colación de borde. En realidad, déjeme traerlo aquí arriba. Ya lo tengo aquí, así puedo mostrarte lo que quiero mostrarte. En edge si lo digo, quiero un dispositivo como un iPhone 12 Pro. Me da lo que busco. Me da la resolución correcta. Para que pueda elegir un iPhone. Puedo elegir un androide. Observe que no cambia mucho, pero aquí es donde se pone realmente genial. Déjame entrar. Déjame refrescar la página. Una vez que las herramientas del desarrollador estén abiertas y hayas configurado tu dispositivo, y actualices la página, ionic reconocerá esto y dirá: Oh, estás corriendo en un androide. Voy a cambiar la forma en que se ve esto. Entonces tus íconos serán Androidificados. Tus botones serán android, tus desplegables serán Android Entonces todo debería verse Android. Entonces fíjate cómo se ven estos. Y luego cuando hago clic en el botón de inicio, este es un modelo de Android. Así que déjame cambiar de nuevo a un iPhone. Aún no cambiará hasta que refresque la página. Ver la diferencia. Así será una manzana. Puedo volver a la configuración, el botón un poco más redondeado. El menú desplegable se ve diferente. Los iconos un poco diferentes, menús laterales son un poco diferentes. Todo es un poco diferente. Verás en un dispositivo apple, tu centro de títulos justificado, donde queda alguno de los Androides, queda Entonces vas a obtener toda esta funcionalidad, este cambio visual fuera de la caja con iónico. Y esa es una de las principales razones por las que lo uso. Bien. Entonces esto es lo que vamos a estar construyendo. Así que tengo aquí. Como dije, F 12 para abrir tus herramientas de desarrollo y ventanas o opción de comando en una Mac. Acabo de mostrarte el diseño diferente. Ese es el botón para ingresar al modo de diseño responsive en Safari. Bien. Vamos arriba nueve. Bien. Y ya te hablé de esto. Si cambias de una a otra, tienes que volver a cargar las páginas para ver cómo cambia la interfaz Bien. Ahora construyamos nuestra primera página iónica. O en este caso, vamos a construir una interfaz. Me voy a ir, voy a renunciar. Bien. Entonces voy a usar el comando on generate. También puedo hacer con interfaz G. Entonces voy a pedirle a la CLI iónica que genere un archivo de interfaz mecanografiado para que yo tenga la definición de estudiante Y fue así de rápido. También voy a abrir Sd a mi proyecto, ¿correcto? Bien. ¿Hay alguna manera que puedas hacer tu frente un poco más grande cuando tienes eso? Absolutamente puedo. ¿Cómo es eso? Eso es increíble. Gracias. Yo haré lo mismo aquí. Comando plus, por cierto. Derecha. La interfaz está en mi carpeta de origen app student. No hay mucho ahí dentro. Mueve eso fuera del camino por ti. Bien. Bien. Entonces ese es uno de los lugares donde esa esencia va a ser útil Y eso es Student TS aquí mismo. Voy a agarrar el archivo sin procesar. De nuevo, no hace falta que veas esto, pero soy perezoso y no quiero volver a escribir todo esto. Entonces esta es la definición de estudiante. ¿Alguien sabe por qué estoy haciendo mi alumno una interfaz y no una clase? ¿Algún tipo de asistentes de script que quieras ponderar? ¿Alguien sabe a qué se compila una interfaz de script de tipo cuando se compila en Javascript No. Bien. Déjame ver si puedo mostrarte. ¿Alguna vez has ido a escribir guión o tengo un patio de juegos de guión de pipa Y por un lado está el mecanografiado, el otro lado está el javascript Si ingresas a la interfaz Avian, eso es lo que construye. Absolutamente nada. Las interfaces no existen. Por lo que son puramente para conveniencia del desarrollador. Si por otro lado, creé una clase, No es una clase válida. ¿Por qué esa no es una clase válida? Bien. Oh, ya veo. Necesito cosas como esta. Así que no mucho más código, pero es más código código. Y francamente, no necesito una clase. Yo no mi objeto alumno no tiene que tener métodos en él. Entonces, si es solo un objeto de transferencia de datos, siempre optaré por una interfaz. Bien. Bien. Entonces echemos un vistazo rápido a esa interfaz. Cada alumno tiene identificación, nombre y apellido. ¿Alguien sabe lo que significa el signo de interrogación para el resto de los campos? Opción. Son opcionales. Entonces la fecha de nacimiento padre nombra a un padre correo electrónico teléfono, etcétera Estos son todos opcionales. No voy a dejar esto aquí. Esto significa que puedo crear esto no será válido, aunque. Para que pueda crear un pozo, copiloto Hub lo hace el trabajo por mí. Entonces puedo usar un inicializador literal de objeto. ¡Uy! Eso es correcto. Todo bien. Ahora la pila se está poniendo un poco exagerada. Bien. Si el estudiante fuera una clase, no podría hacer esto. No pude usar un inicializador de objetos como este. Bien. No sería válido. Tendría que usar nuevo alumno y luego pasar los valores al constructor o hacer los campos individualmente. Pero debido a que tengo una interfaz, escriba script y Java script me permitirá inicializar un nuevo objeto de ese tipo simplemente usando un objeto literal Además, debido a que es una interfaz, obtengo errores si no proporciono todos los campos que se requieren. Por último, ¿quién puede decirme qué significa estatus? ¿Por qué no establecí el estado a lo que es la línea diez ahí? Esta es más una pregunta de guión de otro tipo, no una pregunta angular ónica. Aunque angular es parte de la razón por la que lo hice. No estoy seguro si es como algún tipo de tipo personalizado. Está limitando el El valor a estar presente o ausente? Correcto. Definido en este caso como opcional. Correcto. Así que la mayoría de la gente especialmente si vienes del mundo.net, probablemente estés acostumbrado a hacer esto con un nome Entonces tendrías una enumeración donde presente es igual a cero y ausente es igual a uno o viceversa. Y entonces el compilador se aseguraría de que estuviera fuertemente escrito El problema de hacer eso en angular es que tus plantillas no pueden ver esos enumes. A menos que luego cree una variable local para contener el num y se ponga raro. Pero si lo hago de esta manera, esencialmente le estoy diciendo a mecanografiado que el valor de status es una cadena, pero solo puede ser una cadena de uno de dos valores, como dijiste, y voy a obtener inteligencia Entonces me está diciendo automáticamente cuáles son mis valores . Bonito resbalón eh. Bien. Michael, podrías agregar un entero en esa lista, ¿no? Quieres decir. Así. Sí. Me gusta lo que sugirió el Co Pilot. ¿Alguien ha usado copiloto? Quise apagarlo. A mí me pareció útil. Descubrí que Co Pilot es bastante bueno para saber lo que quiero que haga. Y es muy bueno para construir pruebas unitarias para mí. Bien. ¿Alguna duda sobre la interfaz? Todo bien. Tenía una pregunta. Mi inter se queja. Creo que es porque el archivo de conflicto TS para iónica? Eso no es Es usar TS y no ES en. ¿Te diste cuenta? No lo he hecho. ¿Eso es lo que hace? Estamos todavía por defecto en todavía morosidad es S n. Min es dos, entonces. No sé por qué se queja de ello. Sí. No veo ningún TSN en la fila No. Bien. Algo se queja de esto, pero yo no. Microsoft Dad se está quejando de ello. Entonces, ¿puedes mostrarnos el plug in para un copiloto que estabas usando Parece ser dos de ellos. Esa es una buena pregunta. Bien. Actualmente no estoy pagando por ello. Entonces tengo este. 3131. No sé qué es esta. Oh, todas las noches. Sí. Seguí adelante y no lo estoy usando. Estoy usando el oficial de G Hub. Y como dije, todavía no voy a pagar por ello. Creo que lo tengo gratis por un par de semanas más. O tal vez voy a empezar a mantener un repositorio de código abierto. Todo bien. Lo siguiente que tenemos que hacer. Estoy tratando de hacer las cosas aburridas sacando todo eso temprano es que necesitamos generar un servicio estudiantil. Esto es lo que manejará todos los, la interacción de datos para tratar con los estudiantes, y ese fue el archivo realmente grande que tengo para ti en la esencia Lo que quiero hacer aquí eso. Trae de vuelta mi línea de comando A aquí. Y ahí vamos. Sácalo del camino. Bien. Entonces aquí, no estoy usando el CLI. Y la razón por la que no estoy usando el en CL es para mostrarte que en realidad son lo mismo. Entonces la CLI iónica simplemente delegará a la CL angular. La razón por la que lo antepongo con PX es porque no quiero usar la CLI angular instalada globalmente Quiero usar el que está integrado en mi proyecto iónico. Todos están familiarizados con PX, ¿qué hace eso? Sí. Quiero decir, hace muchas cosas. Pero lo principal es que va a usar la versión de NG que está en mi carpeta de módulos de nodo a diferencia de mi carpeta global. Bien. Entonces voy a generar un servicio llamado estudiantes. Una cosa me gusta mucho hacer. Me gusta usar el comando dry run solo para ver qué va a hacer antes de que lo haga. Va a generar dos archivos para mí. Va a generar un archivo de prueba y mi archivo mecanografiado de servicio, y los va a poner directamente en la carpeta de la app. Eso está bien. En un proyecto más grande, no me gustaría hacer eso. Quiero mantener muchas de las cosas un poco más organizadas. Entonces le diría para ponerlo en algún otro lugar endeudado podría ponerlo en estudiantes de servicio, por ejemplo. Ahora puedes ver que lo va a poner en una carpeta llamada servicios. Bueno, adelante y déjalo así. Me quitaré la bandera de dry run y dejaré que la construya. El servicio estudiantil nos va a dar alumnos que podamos exhibir. Sin una lista de alumnos, no hay mucho que podamos hacer. De nuevo, podemos volver a mi ist, que estaba aquí. Bajar al servicio estudiantil. Agarra la versión. Seleccione una copia. Encuentra mi servicio estudiantil y solo pégalo. Y eso no le gusta. ¿Por qué no es así? Bien. Eso es justo. ¿Alguien ve aquí los problemas inmediatos? Éste es obvio. Es porque puse los servicios en una carpeta. Entonces déjame mostrarte si no estás acostumbrado a esto en código BS, solo voy a quitar esta línea. Y entonces voy a ver que el error está aquí. Haga clic en él y haga clic en la bombilla azul y la va a encontrar por mí y reconstruir esa declaración de importación para mí. Bien. Este es un poco más difícil de superar. Entonces, lo que sucede es que este servicio utiliza almacenamiento de capacitores a partir de iones. Pero no lo sé. Bien. Nosotros sí lo usamos. Lo estoy usando. Por lo que necesitamos necesitamos instalar almacenamiento de condensadores. Entonces voy a abrir los códigos S construidos en terminal, que es control back tick. Y luego simplemente puedo instalar almacenamiento de capacitores. Bien. Y entonces ese problema debería desaparecer. Así. Preguntas, comentarios, inquietudes. ¿Todos siguen atrapados? Sí. Atrapado a eso. Todavía hay un montón de otras cosas en eso. Si sientes que estás empezando a retrasarte demasiado , detenme, avísame. Bien. Bien. Entonces deberías tener un servicio estudiantil ahora. Ahora, lo que quiero hacer. El servicio estudiantil tiene en él un método de inicialización Nuevamente, solo para que sea fácil llegar a la interfaz de usuario. Entonces lo que tengo que hacer en app componente T. Voy a presionar Comando P o Windows Control P para abrir este menú rápido y voy a escribir app component. Me gusta mantener las manos en el teclado. Dame un segundo aquí. Entonces tengo el constructor. Y esto es en realidad un errata porque esto no llama a initialize app ¿Necesitamos el componente de aplicación para implementarlo? Y ahora, dejaré que piloto haga algún otro trabajo por mí. No es una mala suposición. Pero tenemos que pasar en el servicio estudiantil. Bien. Y fíjate que siguió adelante y encontró toda esa información para nosotros. Se averiguó dónde importar el servicio estudiantil. Entonces ahora. Otra vez, no está mal, pero no es lo que busco. Necesitamos comercializar una sincronización porque queremos esperar. Sí. ¿Debería ser dentro de la clase o afuera? Debería estar dentro. Gracias. Bien. Ahora bien, ¿ cómo no es? Lo siento. Aquí vamos. Yo no lo importé. No sé del resto de ustedes, pero una de las de mis debilidades, si se quiere, con angular. Olvidé importar cosas. Por eso me gusta mucho ese código VS lo hará por mí. Y cualquiera que sea la configuración de ES que tengo no es un archivo fuente que no tenga una línea en blanco al final, así que se va a quejar mucho de eso. ¿Alguna duda aquí? Queremos ver qué está haciendo esto o ¿entendemos lo que está haciendo esto? Cuando se inicie el componente de la aplicación, va a llamar a nuestro servicio estudiantil y le dirá que se inicialice La inicialización del servicio estudiantil, Hace un par de cosas Va al almacenamiento iónico para tratar de sacar a todos los alumnos del almacenamiento. Pero la primera vez que lo atraviese , no habrá ninguna. Por lo que la longitud de esa matriz de estudiantes será cero. Entonces en ese punto, llamo datos, y veo datos solo toma estos esta variedad de estudiantes simulados y los pone en almacenamiento para mí. Entonces nos da algo para exhibir. ¿Eso tiene sentido? Por cierto, todas estas son personas reales que aceptaron dejarme usar sus nombres Todo bien. Estamos bien. Avanzando. Bien. Mencioné las importaciones. El código VS me mantendrá honesto. Pero si no es así, eres bienvenido a sonar y mantenerme honesto La mayoría de las muestras de código que muestro en mis diapositivas no tienen las importaciones. Era más fácil ahorrar espacio. Bien. Ahora vamos a generar la página de roster. Bien. Aquí es donde las cosas parten un poco del andamio CLI angular estándar Cuando construyes un proyecto iónico con iniciador iónico, cuando instalas el CLI iónico, Ionic te da algunos andamios angulares que angular no Angular no tiene el concepto de página. No sé si alguna vez lo has pensado, pero cuando quieres crear una página y angular, creas un componente. Pero iónico tiene el concepto de una página iónica. Entonces te dan este andamiaje. Entonces puedo escribir cualquiera de estos dos comandos porque son funcionalmente idénticos Entonces puedo hacer una página de generación iónica y llamarla roster. Todo lo que hace es que llama G generar página. Gallo Pero debido a que Ionic creó ese andamiaje para el andamio de página realmente existe, así podemos generar una página con iónica que no podríamos hacer con angular Así que de nuevo, voy a secarlo. Y lo ves literalmente simplemente bastante bien, no exactamente, sino el comando NG generate. La mayor diferencia entre construir un componente angular para nosotros como una página y en realidad andamiar una página iónica es que las páginas iónicas se construyen con su propio módulo por defecto y están cargadas perezosas Entonces una página iónica no se cargará hasta en tiempo de ejecución, cuando en realidad la llames. Eso ayuda a que las aplicaciones iónicas , giren, se pongan en marcha muy rápido. ¿Todo eso tiene sentido? Sí. Todo bien. Voy a deshacer mi comando de ejecución en seco y simplemente dejarlo ir. Bien. Yo sí necesito hacer. No, no necesito hacer el cambio. InCars ya hizo este cambio para mí. Entonces, si nos fijamos en el módulo de enrutamiento de aplicaciones, La CLI iónica o el CI angular agregaron esta formación y esa es la carga perezosa del módulo de roster para cargar esa página Entonces eso significa que cuando vamos a nuestra aplicación y usamos como nuestra ruta al final de nuestra URL, instanciará ese módulo de página de roster, lo que luego hará que la página luego hará que enrutamiento de roster cargue la página Entonces obtenemos todo esto gratis. Se puede hacer con la CLI angular, pero nunca puedo recordar cómo no se crea un componente, se crea un módulo Creo que es como funciona. Pero preferiría mucho incluso si no estuviera usando un proyecto iónico, aún podría tener la tentación de usar la CLI iónica para construir mis páginas porque vas a sacar esa carga perezosa de la caja Así que solo lo demostré. Ahora vamos a generar nuestra página final, que es nuestra página de información del estudiante. Usa cualquiera de esos dos comandos con los que te sientes cómodo. Nuevamente, va a construir casi exactamente el mismo andamio Voy a dejarlo ir. De vuelta en mi app, puedes ver que tengo mi página de roster y mi página de información de estudiante Ahora, hay un cambio que necesito hacer. Si alguna vez has construido algún tipo de vista de detalle maestra, sabes que cuando llegas a la vista de detalle, normalmente tienes que pasar el ID de lo que quieres ver. Y así esto no es diferente. Todavía hizo un cambio al módulo apparalti para mí, pero no tengo que tocar ese Pero en la ruta para la página de Información del estudiante, tengo que agregar este ID de dos puntos al camino. Así que abre la ruta de información del estudiante, encuentra la ruta y agrega dos puntos ID. Lo que esto significa es que está en nuestra aplicación, vamos a tener una ruta que se ve así. Bien. Entonces solo tendremos un impuesto de identificación al final de la ruta. Y eso se pasará como el parámetro ID route. Tengo una pregunta. ¿Hay alguna diferencia de hacerlo de esta manera que hacer el parámetro de ruta en el enrutamiento cargado de encajes Te refieres a ponerlo en el módulo de enrutamiento a. Poniendo aquí, ¿quieres decir? Sí. ¿Hay alguna diferencia decir el estudiante Info cool ID? Podrías hacer eso, pero entonces no podrías entrar en la ruta de información del estudiante y hacer ninguna modificación aquí. A lo mejor eso está bien. Entonces tal vez eso esté bien. Entonces tal vez tengas un camino llamado Editar. ¿Eso tiene sentido? Bien. Sí. Entiendo. Entonces, al ponerlo aquí, dirías, bien, Información del estudiante recorta la identificación del estudiante Y ahora, en tu módulo de Info del estudiante, tal vez tengas una edición. Pero entonces tal vez también tengas un Delete. Y esos son y lo que terminas teniendo son diferentes componentes. Entonces tal vez tengas una página de información del estudiante y tengas una página de eliminación de estudiantes. Pero esas dos páginas compartirían el mismo módulo. No había pensado en eso. Eso en realidad es bastante inteligente. Entonces sí, podrías hacer eso. Sin embargo, lo que no puedes hacer ahora, ¿cómo agregarías a un nuevo alumno? Porque no tendrías una identificación. Entonces me gusta mantenerlos me gustaría mantenerlos limpios a este nivel. Bien. Y luego poner todo aquí porque ahora podrías hacer cosas como Si quisieras, ahora podrías hacer Podrías tener estudiante Info slash e. bien. Sí. Y luego puedo reutilizar el mismo componente. Derecha. Y creo que así es como lo hago después. Gracias. ¿Todo el mundo claro aquí hasta ahora? Si no, creo que este va a tener más sentido a medida que empecemos a dar cuerpo a las páginas. Sigo mirando hacia abajo a Andrew y él está como, Bien. Normalmente, en este momento, quiero decir, llevo sentada aquí una hora y media. Cuando estoy haciendo este taller en persona. En este punto, todo el mundo está prácticamente listo para tomar un descanso. ¿Quieres tomar cinco o quieres presionar hacia adelante? Estamos programados para ir hasta las diez, otra hora. Romper o seguir adelante. Estoy bien de cualquier manera. Sí. Estoy bien si seguimos adelante, está bien. Bien. Sigamos adelante. Todo bien. Menú lateral. Así que ahora vamos a entrar en alguna interfaz de usuario. El menú lateral, en este caso, utiliza el pan en split. Y el split pan es un poco complicado. Probablemente todos lo hayan visto. Cuando la pantalla es estrecha, se derrumba a un menú de hamburguesas Pero cuando es ancho, como vemos aquí, siempre es visible. Entonces es una pieza de interfaz de usuario muy receptiva. Lo importante que debes saber a la hora de tratar con un pin partido. R, el ID de contenido. Entonces, en el atributo content ID del panel dividido está el ID del elemento en tu página que va a contener tu contenido principal. Esto quedará claro en un momento. Por lo general, esta es su toma de corriente en el enrutador. Entonces, en la salida del enrutador es uno de los componentes principales en toda su página. El atributo disabled, hace lo que crees que hace. Cuando está deshabilitado, el pin dividido, el menú no se mostrará. No te puedo decir lo frustrante que es tener un menú deshabilitado que por extraña razón, no puedes entender por qué no aparece Y cuando le dice al panel dividido bajo qué circunstancias debería ser visible. Puede ser un Bolan. Entonces podrías configurarlo programáticamente en true o false, o podría ser una consulta de medios CSS completa Entonces podría ser una media query que diga pantalla ancho máximo de 500, por ejemplo, ancho mínimo de 500. Tiendo a tomar los valores por defecto para cosas como esta. Así que no tiendo a meterse con ellos. También tenemos el ID del menú. Entonces, cuando estás usando una sartén dividida, la sartén dividida normalmente tendrá un menú adjunto a ella. Por lo que también va a necesitar el ID HTML del menú al que está adjunto. También tenemos que decirle de qué lado de la pantalla queremos. Las versiones anteriores de Ionic usaban izquierda y derecha, pero Ionic ahora admite cultivos y diseños de derecha a izquierda. Entonces es principio y fin. En la mayoría de las culturas occidentales, el inicio sería a la izquierda y el final es correcto. Y luego, por último, hay que decirle cómo debería ser. Este es el tipo de menú. Y aquí tengo una animación. Espero que se encuentre. Tuve que construir esta animación solo para demostrarme a mí mismo que estos tres tipos de menú son diferentes. Míralos por unos segundos. Dime si puedes averiguar cuál es la diferencia entre Push y Reveal. Superponer es bastante sencillo. Pero, ¿cuál es la diferencia entre Push y Reveal? ¿Alguien? Los fondos moviéndose en Push. No se está moviendo en revelar. ¿Qué antecedentes? El menú el menú de atrás que dice hogar en Roster? Correcto. Sí. Me tomó mucho tiempo darme cuenta de esto. De hecho, puse esta animación en Twitter y todavía tenía un montón de gente preguntándose, ¿cuál es la diferencia entre Push y Reveal? Entonces tienes razón. El menú no se mueve en revelar. Bien. ¿Por qué pelearon con estos en ese iónico? No estoy muy segura. Ese nunca se me hubiera ocurrido. Parece que es más como drag y creo que las especificaciones del material es lo que está considerando el eje Z. Entonces hay capas encima de las cosas. ¿El diseño de materiales suele usar revelador? Es una de las especificaciones. Se supone que la biblioteca de materiales debe construirse de manera similar a esas especificaciones. Pero sí, el diseño de materiales dice que debería haber un eje Z. Te tengo. Y empujan están juntos y solo están empujando uno de ellos fuera del camino, ¿verdad? Sí. Supongo que ese sería su razonamiento. Muy chulo. Solo he usado overlay personalmente. Bien. Así que panel dividido, vamos a tener un menú, y el menú iba a tener dos páginas, la página de inicio y la página de roster Y la forma en que hacemos la forma en que implementamos eso es una matriz de páginas de aplicación en el componente de la aplicación. Si no me equivoco. Ese también está aquí. Sí. Los componentes de la aplicación ya están hechos, así que solo podemos tomar ese de la esencia Abra el componente de la aplicación. Y creo que solo pega. No, eso no me gustó. Oh, ya veo. Porque trasladé el servicio estudiantil. Entonces otra vez, quiero eliminarlo. Vuelve aquí y deja que VS Code lo encuentre por mí. Ahí vamos. Y luego quiere mi línea vacía. Entonces ahora tengo una variedad de páginas, home y Roster. Entonces, lo que estamos haciendo aquí, vamos a tener una etiqueta para el título del menú, Home y Roster. Cuál es la URL. Entonces, ¿a dónde irá esta cosa? ¿Cuál ruta? ¿Ibas a usar la ruta de inicio o la ruta del roster? ¿Y entonces qué icono usar? Claro hasta el momento. Lo siguiente que hacemos es que vamos a iterar sobre esta matriz y construir el menú Entonces, en caso de que nuestra aplicación haya cambiado en el navegador en absoluto, entonces sigue distribuyendo el plan. Si dejaste el servicio iónico funcionando, entonces no verás ningún cambio porque aún no hemos realizado cambios en la página de inicio. Bien. Bien. Así que hemos creado un montón de otros archivos, y hemos realizado cambios en la aplicación, y debería estar continuamente reconstruyendo y volviendo a y debería estar continuamente renderizar Pero como aún no hemos hecho cambios en la página de inicio, no la verás. Bien. Y la razón por la que lo estoy haciendo en este orden, esencialmente es que la revelacion final será un poco más impresionante. Hicimos todo bien. Sólo tengo curiosidad. Todo bien. Entonces siguiente, Esto es lo que vamos a hacer para hacer Bueno, para iniciar nuestro pin partido. Esto va en el componente HTML de la aplicación. Entonces en este momento, lo único en el componente de aplicación HTML debería ser el on app y el on router outlet. Así que el mínimo absoluto para mostrar cualquier cosa en una aplicación iónica. Bien. Y éste, no le di copia y pastabilidad. Entonces voy a sacar eso del camino. Y parece que me quedé atascado en mi otro monitor. Bien. Voy a hacer una pausa un poco mientras todos escribes esto en tu interior tu on app. Así que se puede ver en la parte inferior aquí, tengo el tomacorriente en el router. Entonces, todo el panel dividido en envuelve el tomacorriente del enrutador y todo este código va dentro de la etiqueta de la aplicación. ¿Eso tiene sentido? Sí. Voy a teclearlo también. Bien. Bueno, ¿quieres verme teclearlo o quieres que me escriba fuera de pantalla para que puedas copiar esto Puedes hacerlo fuera de la pantalla, eso te lo hará más fácil. Bien. Curiosamente, el copiloto hizo un trabajo bastante bueno. Entonces, dentro de la sartén dividida, tenemos el menú on, y eso es lo que va a estar en ese componente de menú de la izquierda. Entonces comenzamos con un encabezado on, que es esa pequeña área gris en la parte superior, y el encabezado consiste en una barra de herramientas, y eso consiste en el título con el menú de palabras en ella. Ese es un patrón que verás repetido una y otra vez en iónico. Un encabezado o pie de página contiene una barra de herramientas, que contiene una colección de botones de título, que contiene botones. Es muy jerárquico, pero muy consistente. Entonces aquí, sólo vamos a tener una barra de herramientas con el menú de palabras dentro de la cabecera. Debajo del encabezado, tenemos sobre el contenido. Casi cualquier cosa que quieras renderizar en iónico necesita estar en un contenido de iones. Y en la siguiente diapositiva, creo, pondremos ahí el contenido del menú. Para que no tengas que escribir menú. Vamos a ir aquí. Qué es el ID de contenido en este ejemplo. Es eso una cosa dirigida o alguna otra cosa ular. Disculpe. Bien. Entonces, ¿estás hablando con este ID de contenido en la parte superior? Sí. Lo que esto nos está diciendo es que el panel dividido y el menú están controlando cosas que están en otro elemento HTM cuyo ID es el contenido principal. Entonces verás eso aquí abajo, tu tomacorriente en el router. Necesitamos que se le agregue el contenido principal de ID. Bien. ¿Eso tiene sentido? Sí. ¿Cómo se logra eso a través de una vista infantil o normalmente cómo alguien hace eso si estás haciendo el tuyo? Ya no tenemos que entrar en ello. Seria. No estoy seguro de haber seguido la pregunta. Si quisieras crear tu propio componente eso hizo algo similar. ¿Usarías niño o algún otro. ¿Podrías? Sí. Te vendría bien un niño. Yo hago uso de niño un par de lugares. No recuerdo si lo hago aquí. Pero sí. Si querías tu propio componente personalizado, ¿quieres decir que actuó en la toma del router o algo más que tuviera una identificación? Si entiendo tu pregunta correctamente, entonces sí, podrías hacerlo con vista juicio. Genial. Sí. ¿Estamos listos para pasar al menú? Bien. Yo soy. Bien. Entonces otra vez, desde el contenido. Dentro del contenido, vamos a tener una lista. Un en la lista es más o menos lo que esperarías. Es una lista de cosas. Es una colección de es un componente contenedor que puede contener otras cosas. ¿A dónde va el contenido? ¿En qué archivos ahora? Esto está en el componente HTML de la aplicación. Entonces, si miras lo que vamos a hacer está dentro de la lista on, vamos a agregar un toggle en el menú. Este va a ser un componente on que sabe interactuar con ese menú. Bien. Así que vamos a tener un 3. Sesión2: Bien. Bien. Todos. Bienvenidos a la Sesión Dos. En este punto, todos deberíamos tener una lista de clases que se vea algo así, y esta noche vamos a tratar de desarrollarlo con alguna funcionalidad y algunos componentes más de la interfaz Y igual que antes, si resulta que voy demasiado rápido o si me estoy saltando un concepto importante que no es obvio para todos, adelante, detente y vamos a ir un poco más despacio De nuevo, igual que la última vez que terminamos, puedo quedarme un poco y visitar cualquier cosa cuando te necesitemos. Suena bien? Sí. Todo bien. Entonces a partir de aquí, creo que tenemos la imagen del individuo y el nombre, ¿correcto? No tenemos ninguna de estas otras cosas aquí arriba, y no tenemos el botón fabuloso aquí abajo. Correcto. Y por alguna razón, realmente no le gusta avanzar. Bien. Ya hablamos sobre íconos. Entonces no creo que tengamos que volver a visitarlo de nuevo. Pero solo como un resumen, si hay íconos que quieres buscar, necesitas saber dónde encontrarlos, solo los obtienes de en íconos Bien. Así que vamos a saltar de inmediato. Y esto es lo que vamos a agregar a la página del roster. Y mirando este código muy rápido. Esto va a crear los dos botones en el lado derecho del nombre de cada alumno. Así que vamos a crear y en los botones contenedor dentro de cada elemento ion, y cada uno en el contenedor de botones contendrá dos botones, y esos botones estarán compuestos de icono solo los puntos suspensivos para darnos un menú detallado y luego el chevron adelante que nos llevará a la página de Rofter. Bien. ¿Tiene sentido? Sí. Todo bien. A ver. Si puedo hacer esto a tu lado, pero aún así tenerlo. Esto va a ser difícil de hacer simultáneamente, ¿no? Hagámoslo de esta manera. Si voy a mi página de gallo, yo mi página HTML de Roster Y tenemos el on list y el on om con el ícono de esquema de persona y luego etiquetar para el nombre de la persona. Entonces justo después de eso, queremos algunos en botones y dentro de él en botones puestos iguales al final en un minuto aquí en manejador de botones Esta función aún no existe, pero vamos a escribir una función llamada presente hoja de acción, y vamos a aprobar en el alumno actual, así que cada fila tiene su propio alumno por el NG cuatro. Bien. Y luego dentro del botón. Sí, vamos a usar un icono on con solo icono de ranura, así que no habrá texto en este botón. Y quiero el contorno horizontal de los puntos suspensivos. Si no hago otra cosa, déjame ponerme en marcha. Texto absoluto. Oh. Bien. Estás silenciado. Estás silenciado. Bien. Bien. ¿Cuánto tiempo llevo silenciado? Desde que te alejaste. Todo bien. ¿Necesito ir hacia atrás? Creo que no nos enteramos cuando estabas haciendo el deslizamiento. Sí. Así que llegamos aquí, ¿verdad? ¿Todo el mundo es bueno con éste? Quiero decir, al menos mi lista de resultados se parece a la que estás presentando. ¿Todo el mundo tiene algo como esto? Bien. Sí. Bien. Sí me disculpo. Entonces, ¿todos crearon una función vacía para presentar una hoja de acciones? No hace nada. ¿Simplemente nos impide tener un error en la consola? Sí. Bien. Entonces iremos por esa. Bien. Entonces ahora, volvamos aquí. Bien. Ahora vamos a desarrollar la interfaz de usuario solo un poco más con el control deslizante. Creo que todos hemos visto esta interfaz de usuario antes. Lo que hacemos aquí es que tenemos que agregar un componente de opciones de elementos iónicos. Y con eso, podemos agregar un botón cada lado del ítem. Por lo que permanecerá oculto hasta que el usuario deslice el dedo hacia la izquierda o hacia la derecha. En este caso, lo que quiero hacer es crear un botón de borrar en el lado derecho. Entonces, si el usuario se desliza hacia la izquierda, verá el botón de borrar. Este es el marcado que necesitamos para que eso suceda, y viene justo después de que los elementos iónicos cerraron la etiqueta Hazlo aquí. Encuentro la etiqueta cerrada del artículo iónico, y agrego el extremo lateral on options, lo que significa que va a estar a la derecha para la mayoría de nosotros. Aquí, voy a usar el color peligro, que es rojo por defecto cuatro iónicos, y voy a darle un borrado al botón. Entonces un par de cosas. Creo que lo mencioné la última vez. Siempre que tengas un contenedor, un iónico que pueda manejar múltiples cosas como botón o en este caso, en opción de artículo. Normalmente lo colocarás en una versión plural de ese mismo nombre de etiqueta. Así que en los botones envolventes contienen en los objetos de botón. En este caso una opción contiene opción. ¿ Eso tiene sentido? Bien. Y luego para aquí, vamos a tener un click eventos a los que voy a llamar. Confirmar estudiante superando al alumno actual. Todavía estamos dentro del NG cuatro, así que todavía tenemos estudiante. Bien. Bien. Y nuevamente , aún no existe. Ahora, una cosa realmente genial de esto. Déjame mostrarte esto muy rápido. Ir a la página renderizada. Entonces ahora debería poder deslizarlo y obtener el botón de borrar. Y porque no hay función, no va a hacer nada, me damos un error en la consola. Pero para sonríes, no estás limitado porque no estás limitado a uno y eso debería ser un hecho porque tiene el contenedor de componentes plurales Entonces para sonríe si le doy dos, hay dos. Y así me estaba preguntando un día, me pregunto cuántos pueden manejar. Y curiosamente, prácticamente maneja tantos como puedas arrojarle. Y hace lo correcto. El marcado quiero decir, se ve tonto, pero el marcado funciona. Entonces me pareció ese tipo de chulo pero sí lo apoyan. ¿Cuántos tengo que quitar? Bien. Bastantes. Bien. Y estoy asumiendo que también puedes usar como icono en lugar de las palabras de Kevin también. Curiosamente, no. Porque notas que esto no es un botón de encendido. Es una opción de artículo iónico. Pero sí sacas a colación un buen punto. Déjame levantarme nunca lo había hecho antes. Entonces veamos si lo que digo tenemos que hacer ahí. Entonces esa era la opción. ¿Se le puede poner un icono? No parece que sea compatible con un icono. Está en la parte deslizante del artículo de la documentación. Todo bien. Entonces, ¿esto es lo que estamos haciendo ahora? No, ahí tienes. Sí. Bien. Estoy feliz de equivocarme aquí. Eso sí tiene mucho sentido. Entonces, en este caso, podríamos tener en lugar de la opción de ítem ion. Bueno, vamos a probarlo. Podríamos haberlo hecho creo que es válido. Y entonces, ¿dónde hace el click de la misma? ¿En la factura de Offman? ¿Eso? No. Necesito una ranura. Todo bien. Nunca he querido rehuir hacer codificación en vivo y experimentación sobre la marcha. Esa es la muerte por demo Dios, ¿verdad? Derecha. Ahora la pregunta es, ¿dónde está mi app? Aquí está mi app. Mira eso. No está del todo bien. Tipos Todavía tenía uno extra. Bien. Entonces supongo que podríamos haber hecho lo mismo aquí. Rodillo es igual al peligro. No. Entonces eso se pondría ese en la opción. Ahí vas. ¿Cómo es eso? Honestamente, creo que eso me gusta más. Entonces me voy a deshacer de éste. Yo sólo tengo una opción con el icono. Y renderiza. Bien. No está mal. Buena llamada. Honestamente, nunca se me ocurrió poner un ícono ahí. Nunca lo había visto hecho. Siempre es un botón de texto. Todo bien. ¿Todos están atrapados aquí? Sí. Déjame obtener el código muy rápido. Oh, claro. ¿O quieres el código de icono? Oh, el código del icono. Sí. Código de icono que tengo aquí. ¿Puedes leer eso? Sí. Sí. Bien. Todo bien. Avísame cuando lo tengas. Y probablemente puedas adivinar qué viene después. Lo siguiente que tenemos que hacer es simplemente desarrollar esa función faltante. Bien, lo tengo. Y entonces vamos a hacer eso. Bien. No, al menos por ahora. Bien. Lo siguiente que quiero hacer. Mantengan eso fuera del camino otra vez. Esto aquí abajo en la parte inferior es un botón de acción flotante. Es un fantástico, y creo que se utiliza principalmente en el diseño de materiales. No creo que lo haya visto mucho en iosAsthh las aplicaciones de Google lo usan Gmail y Bien. Entonces para poder usar esto, y tengo aquí es que es solo un menú emergente rápido para casi con fines de depuración Entonces este es un botón add student, y esto es un reinicio la aplicación a su estado original, y creo que este iba a ser eliminar todo y luego ver la base de datos. Para poder hacer eso. Sólo un par de cosas que debes saber sobre un fabuloso. Cuando está abierto, se activa. Puede establecer el atributo de borde en true o false. Si es cierto, a ver si hago esto bien, el fab se mostrará en el borde de la cabecera si es vertical. Tan horizontal y vertical para determinar dónde se posiciona el fab en la pantalla. Bien. Sólo lo he visto en la esquina, pero también puedes ponerlos en el medio. Creo que cuando edge es cierto, en realidad se superpondrá un poco el encabezado. Y si es falso, se sentará debajo del encabezado en el contenido. Y tengo otra nota aquí. Si la vertical se establece en la parte inferior, se debe usar con la ranura fija. Esa es una nota que tengo para mí mismo, y honestamente no recuerdo lo que eso significa. Bien. Entonces. Este es el marcado para que ese menú fab sea funcional Entonces vamos a crear una mirada al contenedor en el extremo horizontal inferior derecho, así que es la parte inferior derecha. Y aquí sí uso ranura fija. Y consistirá en un botón fab. Ahí es donde se ve cuando no se expande el menú. Sólo será un icono con puntos suspensivos verticales. Cuando se expanda, tendremos la lista en fab. Y se expandirá hacia la izquierda hasta el inicio de la página. Y tendrá algunos botones. Y recuerden cómo estaba diciendo que iónico es realmente consistente sobre cómo sus nombres las cosas. Esto parece ser una excepción porque la lista contiene los botones. No es una colección on fab buttons. Es una colección en la lista fab. Hagámoslo muy rápido. ver si puedo hacer esto. Eso es mucho texto en la pantalla. Déjame hacerlo en pedazos. Este será el elemento left dentro del contenido on. Así que en fab. No tengo idea de cómo sabe que quería hacer eso. Bien, creo que obtienes una copil Se está poniendo un poco aterrador. Bien. Ustedes usan copiloto y ¿me pueden dar el enlace para eso Sí. Estábamos hablando de eso la última vez. Tengo la carga de extensión aquí. No, no importa, lo siento. Estaba pensando que estás usando los fragmentos. Sí. Tengo algunos fragmentos. Todo bien. Yo sólo voy a escribir. Yo soy ya no lo veo. Yo sí tengo algunos que es el iónico. Tengo algunos en fragmentos. Es este en recién llamado en fragmentos. Quiero volver aquí. Probablemente podría simplemente apagar el copiloto. Todo bien. Entonces aquí adentro, nosotros en botón fab. Las elipses verticales. Y luego después del botón. Bien. Oh, bastante bien. Voy a tener sólo unos cuantos más. Bien. El ícono es un huevo, pero para mí, se veía lo suficientemente cerca de una semilla que decidí usar eso para sembrar la base de datos. Pero por ahora, ni siquiera vamos a llegar a agregar ninguna funcionalidad a esto. Si está funcionando, así que trabajamos menú. ¿Eso es lo que todos tienen? Bien. Si quieres puedes jugar con el del lado faul igual inicio Si lo prefieres para crecer, entonces deberíamos poder cambiarlo a lado igual arriba. Entonces crezca. Bien. Eso es limpio. Es una pequeña característica genial. Lo uso mucho para depurar. Voy a crear un pequeño fab de depuración que solo está habilitado cuando el modo de producción es falso o el modo de desarrollo es verdadero o lo que use un angular Voy a poner cosas como base de datos, limpiar la base de datos, borrar los registros, mostrarme la información del dispositivo, cosas así. O si estoy escribiendo un juego, tendré uno que jugará todo el juego hasta el último movimiento poder probar el escenario de fin de juego. Bien. Bien. También puedes meterte con estos programáticamente. Todos tienen una API, pero trato de hacer tanto en el marcado como pueda Todo el mundo bien listo para seguir adelante. ¿Todos tienen un fab? Sí. Sí. Todo bien. Entonces ahora es el momento de poner alguna funcionalidad detrás de estas UI Así que recuerda, mencioné que había algunos controladores imperativos que vamos a necesitar. Entonces hagámoslo ahora. ¿Todos están familiarizados con la hoja de acciones? ¿Ese es el pequeño menú que aparece de abajo? Creo que tanto IOS como Android tienen una versión de esto. Y como cabría esperar, Monic te va a dar el que se vea negativo para tu dispositivo Sin embargo, los construyes programáticamente. No los construyes en HTML. Los construyes en mecanografiado. Bien. Pero tenemos esta función ahí sentados vacíos. Vamos a necesitar marcarlo como una sincronización porque todos los controladores iónicos son todos asíncronos, así que vamos a querer esperar las funciones que llamamos Entonces lo primero que quiero hacer Vamos a crear algunos botones. Normalmente, haría todo esto en una gran función gigante, pero eso es muy difícil de presentar. Entonces lo que voy a hacer es que voy a crear primero los botones y luego los combinaré todos y los mostraré. ¿Eso tiene sentido? Entonces con mi código aquí. No. Ahí vamos. B en el rosters mecanografiado Antes de presentar la hoja de acciones, No, perdón. Dentro de la hoja de acción. Entonces vamos a crear un botón. Es un botón de hoja de acción tipo. Lo que le da a esta linda inteligencia. Bien. Bien. Y qué queremos que haga esta función o qué queremos que haga el botón cuando el usuario haga clic en él. Entonces lo primero es la etiqueta de texto para el elemento del menú, el icono que queremos presentar, que es solo el nombre de los iconos desde los iconos. Y entonces la función que queremos ejecutar, podría ser una función de nombre, pero en este caso, sólo voy a usar una función de flecha. Y la función ya existe en el servicio estudiantil. Por lo que este servicio estudiantil Marcar presente. Necesito una coma. Y luego un punto y coma Y luego como lo hago a menudo, olvidé importar el botón de hoja de acción desde angular iónico. ¿Todo esto está claro? Bien. ¿Todo el mundo tiene éste? Sí. Entonces, ¿realmente son las garrapatas traseras así o son comillas simples? Puede ser cualquiera. Bien. Creo que en un solo lugar, en realidad estaba recuerdo por qué hice esto. Si escribes comillas simples en PowerPoint, automáticamente las convierte Curly, lo que significa que no puedes copiar y pegar. Entonces comencé a usar diapositivas de backticks. C. Bien. Buena pregunta. Bien. Entonces Mark ausente va a ser casi exactamente lo mismo. Así que me perezoso. Voy a destacarlo. Y luego cambiar las opciones flecha hacia abajo. Hacer una copia del bloque. Algunos de los se interponen en el camino. Bien. Marcar botón ausente. Marcar ausente. Y ese es el esquema. Y éste, voy a llamar al servicio estudiantil a Mark Ausente. Avísame cuando pueda seguir adelante. Y en el mío, es todo cuando los puse ahí, todo estaba rojo. Entonces debo tenerlos en el lugar equivocado. ¿Quieres compartir tu pantalla muy rápido? Yo no puedo porque no es Estoy en mi tablet en esto. Bien. Asegúrese de que las constantes están dentro que presentan una función de hoja de acciones Esa sería la razón por la que hice lo mismo. Cuando estaba recién comencé a escribir en ellos afuera. Y entonces me acordé de que no puedes tener una constante en tu clase. Bien. Bien. Eso lo hizo. Yo lo hice. Bien. Así que solo tenemos un par de botones más para crear, pero todos se van a crear de manera muy similar. De nuevo, sólo voy a hacer un nuevo bloque. Y esto es borrar botón texto etiquetas borrar. Usa el icono de trach. Y éste, fíjate que le estoy agregando otra propiedad. Estoy agregando un rol, y ese papel es destructivo. Bien. Destructivo solo marca la diferencia en IOS. Android, no va a marcar la diferencia en absoluto. Pero en IOS, mostrará ese elemento particular del menú en rojo. Y luego para el manejador, voy a llamar a este alumno de borrado confirmado ¿Todo el mundo tiene eso? 1 segundo. Claro. Michael, ¿ tenemos dos botones en el confirmado Eliminar alumno? ¿Tenemos dos botones en Confirmado Eliminar alumno? Bueno, ¿puedes simplemente mostrar el código de calificador ahí por un segundo ¿La mina? Sí. Eso está bien. Bien. Entonces todas estas son acciones presentes. Bien. Ese es mi problema. Correcto. Fijar fácilmente. Derecha. Y confirma, vamos a terminar poniendo, ya sabes, un diálogo de confirmación y decir: ¿ Estás seguro de que quieres eliminar a esta persona? Por eso nunca voy a llamar a Delete en el servicio estudiantil todavía. Te tengo. Tiene sentido. Bien. Déjame volver a poner eso aquí por ahora. Bien. Y este es yo creo nuestro último botón, y ese es el botón de cancelar. Entonces aparece la hoja de acciones. No quieres hacer nada. Sólo quieres cancelarlo. Eso es un botón de cancelar. Observe que este no tiene manejador. Entonces porque no necesita de uno. Así que sólo voy a tomar. Lo mismo, duplicarlo, deshacerse del manejador. Llámalo botón cancelar, Texas cancela contras ropa y el rol es cancelar. Entonces hay algunos roles incorporados al botón de la hoja de acciones cancelar como uno de ellos, y eso solo significa no hacer nada. Y como viste, también hay destructivo. Bien. Entonces ahora deberíamos tener cuatro botones que no hagan nada, ¿verdad? Aún no existen. En realidad no están siendo referenciados por nada. Entonces lo siguiente es crear la hoja de acciones a partir de esos botones. Déjame mover esto hacia abajo. Aquí fuera de tu camino. Entonces ahora queremos crear la hoja de acciones. Para poder hacer eso. Perdón, adelante lo mismo. Lo siento, eso está en la misma hoja de acción presente. Todavía estamos en la presente hoja de acción. Función. Pero esa primera línea no va a funcionar porque Mike nunca recuerda inyectar cosas a su constructor Entonces, antes de hacer eso, venga encima de su constructor y agregue un controlador de hoja de acciones de controlador de acción de tubería. ¿Por qué no le gusta eso? Porque no lo he importado. Entonces voy a importar el controlador de hoja de acción desde angular iónico. Una vez que hayas hecho eso, ahora podemos volver a bajar a la presente hoja de acción y escribir el resto de esta. Entonces vamos a crear una hoja de acciones y vamos a esperar este controlador de hoja de acciones. Ya lo he mencionado antes. Todas estas funciones son asíncronas y devuelven promesas Para crear la hoja de acciones, le damos un único objeto de opciones. Aquí es donde le decimos lo que queremos dentro de él. Queremos un encabezado aquí las garrapatas traseras en realidad son útiles. Queremos el nombre y apellido del alumno. Y luego vamos a crear. Eso también es bastante bueno. Y vamos a crear el botón creando una matriz de esos botones constantes que ya hemos creado. ¿Eso tiene sentido? ¿Tenemos algún tipo script o gurú angular aquí? Siempre hice esta pregunta, y nunca he recibido una respuesta consistente. Bien. ¿Tiene sentido esperar la última declaración de una función asíncrona Bien. Si nos fijamos ahora en el presente un botón de hoja de acciones, Typescript piensa que devuelve un vacío de promesa porque marcamos en una sincronización y no estamos devolviendo nada Pero también podría presentar, lo que devuelve una promesa. Y luego Typescript piensa que devuelve un vacío de promesa. ¿Cuál es la diferencia entre devolver la promesa que nos ha dado por acción presente o simplemente esperarla? Hay una diferencia y es muy sutil. Y honestamente no recuerdo qué es. Tiene algo que ver, creo, con la pila de llamadas y con errores. Creo que es si no devuelves la acción ver precent el resultado de la promesa es indefinido Pero si devuelves el precent de acción entonces estás devolviendo el valor de la promesa presente está regresando Lo cual también es promesa nula. Sí. Entonces la diferencia tal y como la veo, decidimos regresar indefinido. Entonces este método prácticamente se convierte en un fuego y se olvida, ¿correcto? Supongo que sí. ¿Ves algún valor en devolver la promesa? Ni siquiera sé por qué regresan promesa porque si regresan es nulo, y tal vez quieras ver si falla, no lo sé. Honestamente, en todas las aplicaciones iónicas que he escrito, nunca he encontrado una razón para hacer esto. Incluso puedes hacer esto. Ni siquiera tienes que esperarlo. Y creo que aun así sigue pensando. Es promesa nula. Aunque he visto a otras personas hacer cosas así. Harán algo después del presente. Pero si vas a hacer eso, ya te has ido con el patrón de espera asíncrono, podrías simplemente hacerlo de esta manera Algo así. Llena eso. Bien. Bien. Bien. Entonces si tienes esto ahora, entonces cuando se renderiza, deberíamos obtener una hoja de acciones. Entonces, ¿qué le vamos a hacer a Casey McBry? Vamos a marcar presente, marcar ausente, etcétera. Vamos a eliminar, eliminar no va a hacer nada, y podríamos cancelar. También puede descartar una hoja de acciones simplemente haciendo clic en cualquier lugar fuera de ella. Y la tecla de escape en tu teclado. Sí. ¿Todos tienen una hoja de acción que funcione? Sí. Sí. Todo bien. Entonces vamos a hacer mucho de lo similar otra vez. Al implementar la alerta para eliminar. Para ello, vamos a necesitar el controlador de alertas. La API es casi idéntica al controlador de la hoja de acciones. Así que de nuevo, lo que quiero hacer por simplicidad o bien de bienes raíces en pantalla es crear un par de botones, y esto tiene que ser una sincronización. Este botón de borrar. Eliminar selecciones Manejador. Sí, claro. Eliminar alumno. Se. Bien. Entonces errata en la diapositiva. Creo que Eliminar alumno está buscando la identificación del alumno. Así que solo pasamos la identificación del estudiante en lugar de todo el estudiante. Y luego el botón de cancelar. Bien. Bien. Y al igual que antes el papel de cancelar automáticamente hace de la manera que esperarías que lo hiciera. Automáticamente descarta la alerta. Sólo me falta aquí. ¿Hemos hecho un método de eliminar alumno? Debe ser un método de eliminar alumno en el servicio al estudiante. Sí, veo uno. Y luego igual que antes. ¿Cuál era el papel? Perdón, ¿se canceló? Cancelación de rol. Sí. Bien. Y así no se necesita manejador. Aún puedes agregar Handler a todas estas cosas con rol cancel Y me imagino que tal vez quieras iniciar sesión. Ya sabes, oye, acaban de borrar a un estudiante, ese tipo de cosas. Al igual que antes, en controlador de alerta. ¿Todos tienen sus dos botones? ¿Y el controlador de alertas? No. Entonces, supongo que estoy donde estás. Mi controlador de alertas es de grado y nunca se usa. Derecha. Porque aún no lo hemos usado. Bien. Entonces para hacer eso ahora. Bien. Estoy bien. Y nuevamente, es muy similar al controlador de hoja de acción. En este caso, también vamos a tener un sub encabezado y un mensaje. Tenemos los dos botones. Ahora necesitamos al igual que el otro controlador, se necesita tiene una función de creación que toma un objeto options. Bien. Y esto está dentro de la eliminación confirmada? Todavía estamos dentro de la eliminación confirmada, sí. Bien. Bien. Entonces lo que quiero hacer aquí es mostrar hey, quieres eliminar al alumno, mostrar a los alumnos el nombre y apellido para que el usuario sepa lo que están borrando. Ya sabes, nada peor que hacer clic en la persona equivocada. Y luego mensaje. Realmente se puede hacer. Pero otra vez. Y luego agregamos los dos botones. Y luego finalmente, si tomas todo correctamente. Bien. Un par de cosas. Uno, es que esto debería funcionar. Y esto debería funcionar. Y el botón de borrar simplemente llama al servicio. Si elimino seride es. Puedo deshacerme de Greg. Deshazte de Neil y así sucesivamente. Porque están en almacenamiento local, sé aunque refresque un montón de tiempo. Todo bien. Creo que nos vamos. ¿Están todos liderando estudiantes con abandonados? No. Yo No. No voy a recibir la alerta. Bien. Así que vamos a avivar un poco esto. Tu eliminación confirmada debería verse así. Alumno confirmado. Botón Eliminar, eliminar manejador, eliminar alumno, sí. Botón de cancelación, cancelar cerrar, no importa la ropa. Y luego alerta constante. Oh, bien. Ahí está mi problema. Y eso Bien. Sí. Bien, funciona. Me faltaba la línea 70. Bien. Todo bien. Entonces ahora. Dame un segundo aquí. Bien. Todo bien. Vamos a hacer un pequeño cambio. Y te ayudaría a ver las diapositivas. Bien. Quiero agregar una función delete student al componente. Y te voy a mostrar por qué. Entremos en el código y agreguemos otra función. Recuerda que tenía eso. Esto es lo que quiero ver. Lo que significa que aquí en el Eliminar confirmado, llamaremos a esto Eliminar estudiante en su lugar. Este punto, nada en absoluto debería cambiar. Llamando cambié el manejador para el botón de borrar de llamar al servicio de estudiantes a llamar a este eliminar estudiante Bien. Es una API un poco más consistente, ya sabes, pasamos al alumno en el componente. Y luego esto oculta el hecho de que el servicio estudiantil solo quiere hacerlo por identificación. Así pasando el alumno de pleno A éste. Bueno, dentro y en la llamada. Bien. Tengo. Bien. Entonces lo que quiero hacer aquí es usar el último de los controladores iónicos que usaremos aquí, y ese es el controlador de tostadas. Así que muchas veces quieres darle al usuario algún mensaje de que algo pasó. Pero no es lo suficientemente crítico como para detener al usuario en su camino. Y si el usuario pierde el mensaje, tal vez no sea un problema tan grande, ¿verdad? Entonces ese es el caso de uso perfecto para un brindis. Bien. Entonces y se puede ver la imagen arriba aquí del brindis. Entonces lo que quiero hacer ahora es implementar el resto de la función delete student. Bien. Entonces verás que la API para el controlador de tostadas es casi exactamente la misma que la del controlador de alertas. Pero en este caso, no tengo ningún botón, así que es una función mucho más sencilla. Déjame sacar esto de tu camino. Entra en mi función de eliminar estudiante y configurar esa. Eliminar estudiante devuelve una promesa para que podamos esperarla. Entonces vamos a crear un brindis. Y probablemente ya veas el error que tengo? Y eso es que todavía no tengo un controlador de brindis. Así que haz una copia de seguridad al constructor, post controlador, y luego importarlo desde angular iónico. Entonces puedo bajar aquí y terminar. Mi brindis tiene un mensaje. Y una buena. Se ha eliminado. Bien. Y ahora, entonces el mensaje es bastante sencillo. Qué quieres decirle al usuario. El resto de ellos son las otras opciones son, ¿cuánto tiempo quieres mostrar esta información? ¿Y dónde quieres mostrar esta información? Y en mi caso, quiero seguir adelante y vamos a mostrar 3 segundos. Entonces eso es en milisegundos. Y lo voy a poner en la parte superior de la pantalla. Hay otras cosas que podemos hacer. Podemos hacer peligro de color para mostrarlo en rojo. Bien. Creo que lo genial es que si controlas el espacio, realidad puedes conseguir que todos te pongas en decir sentido te dice cuáles son las otras opciones aquí. Entonces puedes agregar botones a un brindis al igual que agregamos la matriz de botones a los demás. Y es literalmente la misma API. Entonces podrías crear un botón en el que el usuario pueda hacer clic para cerrarlo antes de que hayan transcurrido los 3 segundos . Eso ha transcurrido. Se le podría dar un icono para el lado izquierdo, un icono en casi un encabezado junto al mensaje. Entonces podemos hacer, podemos hacer tracto icono, para luego presentar el brindis. Ahora, cuando vaya a borrar. El usuario. Recibo la confirmación, y entonces debería hacer un brindis en la parte superior. Y se puede ver el pequeño icono de basura y se ha eliminado. Bien. Y también lo puedo poner en el medio. Debo creerlo, Bobby. Ahí vas. O en la parte inferior. Preguntas. ¿Todo el mundo tiene ese trabajo? Bien. Ordinariamente en este punto, estaríamos a tiempo por descanso Nos queda aproximadamente media hora. Y lo siguiente a lo que vamos a saltar es la página de información del estudiante. Entonces lo que creo que quiero hacer, eso suele ser hacer eso después del almuerzo. Entonces hay algo que nos perdimos en la página de información del estudiante. ¿Alguien sabe qué es? ¿Alguien lo nota? Volvamos a la app. En realidad, hay un par de cosas que nos perdimos. Podemos encarnarnos en los próximos 20 minutos. No hay código detrás de ninguno de estos excepto nuevo. Ninguno de estos hace nada. Y no pasa nada si marcamos Como presente. Entonces voy a pedir un consenso grupal. ¿En qué te gustaría trabajar a continuación? ¿Quieres marcarlos ausentes y presentes o quieres vaciarlos, sentar la base de datos y eliminar a sentar la base de datos y todos en la base de datos? Bueno, vamos por el presente y ausente. Todo bien. Bien. Así que presente y ausente, ¿traes de vuelta el código S? Bien. Entonces la UI que había imaginado por presente y ausente sería otro ícono en algún lugar de la lista, o tal vez reemplazando el ícono con un regalo o un ausente. ¿Tienes alguna preferencia? ¿ Alguno de esos le suena mejor o peor a alguien? Imaginando esto podría terminar siendo una interfaz de usuario muy pequeña. Creo que probemos esto. Justo después del icono de contorno de la persona. Vamos a agregar otro en el icono. Creo que todavía queremos ranura igual a inicio. Y esta es un par de formas en las que podríamos hacer esto. Voy a hacerlo el verboso Este va a ser igual Usaremos los mismos iconos que usamos para marcar presente y eliminar. Entonces el presente y el off outline para ausentes. Si hacemos esto, tenemos un ícono para el presente, y luego tenemos uno ausente, lo que significa que tenemos que decidir cuál mostrar. Podemos hacer eso de dos maneras. Esto lo podemos hacer. Vamos a NGF este icono solo se renderizará si estado de estudiante es igual al presente. Bien. Y entonces podemos hacer esto un estado de estudiante es igual a. Ausente. Entonces, antes de que guarde esto y lo haga renderizar, ¿qué nos va a mostrar ahora? ¿Qué va a hacer? Va a mostrar uno de los dos botones. ¿Estás seguro? Lo siento. Uno de los dos. I ¿Y si es? Porque recuerdas que es un campo opcional, por lo que puede ser nulo. Entonces, mirando eso. No súper satisfecho con esa interfaz de usuario. ¿Qué opinas? Bien. Y supongo que funciona. Agrega un tercer icono. ¿Un icono de la nada? Que pasa si tu. Sin duda podrías. Entonces podemos agregar para que podamos tener otro. Y en realidad puedes hacer esto creo que si le das un nombre que no existe. Entonces voy a llamarlo Mike. Y solo se puede decir NG Not status estudiantil. Entonces, si no tiene ningún valor, entonces pienso lo que va a pasar. Sí. ¿Eso es lo que tenías en mente? Ahora no tengo nada, renderizando. Impresionante. ¿Qué cambiaste? Agregué un. Pongo una Tilda en vez de una Bien. Estoy bien. Bien. Entonces eso no está mal. Pero entonces empecé a preguntarme, ¿cuál es el propósito del ícono de la persona? Pero a lo mejor lo que hay que hacer es poner el icono de la persona, si no el estatus de estudiante, y luego deshacerse de éste por completo. ¿Cómo funciona eso? Te lo advertí hace un par de días. No soy diseñadora. Por eso uso iónico porque normalmente puedo copiar sus patrones bastante bien. ¿Puedes volver a mirar el código? Claro. Parece que necesitamos dos nuevos sabores del ícono de la persona. Bueno, con un plus al lado y algo con un corte a través de él. Todo bien. Entonces echemos un vistazo a Mirar en los íconos. Y echemos un vistazo a toda nuestra Persona. Ahí vas. Plus y Mus. Estamos usando eso para agregar una persona. Sí. Bien. Pero hemos llenado y sin llenar Entonces tienes contorno y lleno. Bien. En lugar del globo ocular Y entonces tienes agudo, pero no creo que eso realmente nos ayude aquí. Quiero decir, otra vez, es una especie de. había otro, ¿no? ¿Cuál es este? No hubiera adivinado que era accesibilidad, pero bien. Entonces podríamos usar esa porque no lo sé, o podríamos usar esta para. Este órgano. Y entonces podrías usar Bien. ¿Esquema de persona y persona? ¿Se puede cambiar el color de ellos? Sí, ella podría. ¿Qué estás pensando? No lo sé. Contorno negro sólido negro o gris o desconocido. Bueno, quiero decir, es un problema de diseño contigo que no soy diseñador, así que realmente no me importa. Pero como puedes ver, todo lo que tendrías que hacer aquí es cambiar esta parte. Pero tenías un buen punto ahí, así que podrías tener este ellos tienen un gris. De que color es ese Bien. Déjame volver a sus colores en los botones tienen lista de colores. El color de vuelo es igual a la luz. W trabajo. Y entonces podrías hacerlo si están ausentes Bien. Esquema de persona. Y si están aquí, persona e incluso puedes hacer color igual éxito. No, esa no. Bien. ¿Cómo es eso? Claro. Bueno, esa es casi invisible, ¿no? Entonces supongo que cambiaría eso a iguales de color. ¿Era medio? Mediano. Sí. Sí, eso tampoco me ayuda. ¿Hay un relleno medio? Podríamos hacer eso. Entonces eso solo sería persona. Sí. Podría vivir con eso. Así esbozan, están ausentes, verdes, están presentes y medianos que aún no conocemos. Y ese era el punto del botón de reinicio era restablecerlos todos para ser no sabemos lo que son. No puedo conseguir que aparezca ninguno de los iconos sea el contorno. Bien. ¿Eres capaz de compartir tu pantalla? No. mirar el código una vez más solo para que pueda Bien. Bien. Preste atención a la el nombre debe ser sensible a mayúsculas y minúsculas. Asegúrese de que el NGF y las ranuras sean correctas. Se ve bien. Sí. Bien. ¿Su GFS tiene las comillas correctas? Sí. Todo se ve igual, pero por alguna razón, simplemente no es no hacerlo. No lo sé. Rara. ¿Puedes copiar y pegar tu icono? No, supongo que no se puede dar la mano a la charla? Supongo que tampoco puedes hacer eso. Sí. No. Yo bien. Bueno, ¿todos los demás tienen funcionando los iconos? Sí. Entonces me disculpo. No tenía abierta la ventana de los participantes. ¿Quién tiene actualmente el problema? D. Bien. Entonces, si quieres, podemos quedarnos un poco después. Bueno, podemos seguir adelante. No quiero sostener a todos arriba. Bueno, sigamos adelante y conectemos estos botones aquí porque creo que el servicio estudiantil tiene todas las funciones para estos. Entonces si volvemos a R aquí está, si volvemos a los botones fab, entonces esto es más codificación en vivo, así que hay que tener cuidado. Este debería llamarlo reset, y eso no existe. Y luego para contorno de círculo, creo que uno era el deshierbe. Déjame volver a esa y ésta es click. Semilla. Ahora si vuelvo al componente, necesito reiniciar. Creo que eso es correcto. No. Restablecer asistencia. Y creo que eso devuelve una promesa. Pero en este caso, no necesito esperarlo alguien va a devolverlo. Y entonces necesito una semill 4. Sesión3: Bien. ¿ Antes habilité la transcripción en vivo? ¿Acaba de pasar? Bueno, ahí tienes. Bien. Entonces la transcripción está encendida. Si quieres verlo, puedes creo que está bajo el menú más. Se puede ver, cambiar el tamaño, etcétera. Todos. Todo bien. Sin más preámbulos. Entonces, en este punto, deberíamos tener una página de roster prácticamente completamente funcional Y no sé si todos lo vieron, pero dejé un reto tanto en el correo electrónico como en Slack para ver cómo podríamos deshacernos de los tres en los íconos. ¿Alguien tiene alguna idea o alguna idea sobre cómo hacer eso? Si es así sólo vamos, sí. Lo conseguí para que funcionara. ¿Qué hiciste? Así que podría compartirlo si quieres. Claro. Déjame asegurarme de que eso es lo que voy a compartir pantalla, pero creo que tengo que dejar de compartir. Bien. Veamos cómo comparto la pantalla? No sé si ustedes pueden ver eso. Entonces digo que lo puse. Así que comenté todas estas cosas. No, está justo aquí. Así línea 28. Sí. Entonces nombre ligado al nombre del icono, pasándolo a estudiante, e hice color también. Perfecto. El color se basa en esperar ¿qué hiciste? Acabo de pasar así que sólo estoy pasando en el expediente estudiantil. El color equivale a estudiante en paréntesis. ¿Qué me falta? ¿Qué sabías con lo que me metía con esto? Lo siento. Lo siento. Sí. Yo estaba como, ya he visto esa sintaxis antes. No. Y entonces las funciones son sólo dos declaraciones H aquí empezando por ahí. Bien. ¿Notaste la falla en hacer esto porque tienes razón? Esta es una manera fácil de hacerlo y mucha gente lo hace de esta manera. Pero hay un defecto en hacerlo de esta manera y angular. Quiero saber si lo notaste? Yo no lo creo. Bien. escribiendo cosas a la consola y no lo sé. Es un poco difícil de seguir. Bien. Entonces dime. Así que pon una instrucción de registro de consola dentro de cada función con el nombre de la función. Y si me equivoco, estaré muy feliz de equivocarme. Bien. Perfecto. Y luego otro para el color. ¿Alguien sabe lo que va a pasar? Bien. Así que abre tus herramientas de muerte. Ahí vas. Eso es lo que va a pasar. Sí. Entonces estos están siendo llamados todo el tiempo. Sí. Cada vez que ese angular tiene que verificar para ver si algo ha cambiado, así que para el enlace de datos, tiene que llamar a esas funciones porque no tiene forma de saber que no tiene que volver a pintar En una aplicación como esta, no es gran cosa, nunca la verás. Pero si puedes imaginar algo con cientos de componentes enlazados a datos en él, sería realmente desagradable. Especialmente si estas funciones hicieron algo más que lo que hacen ahí, ¿verdad? Estas funciones no hacen mucho. Entonces no es tan gran cosa. Yo estaba en un proyecto donde tenían un mouseover que hacía una llamada de descanso Bien. Como se puede imaginar, eso no fue bonito. Entonces creo que estás en el buen camino. Pero la forma en que he visto esto hecho para evitar esto es convertir el nombre del icono y color del icono en una tubería angular. Bien. Y con una tubería angular, es literalmente las mismas funciones. Pero porque la entrada a la tubería no ha cambiado. Angular sabe que no tiene que recordar la función. ¿Eso es algo que se hace fácilmente? Oh, sí. Claro. ¿ Quieres que te hable a través de ello o quieres que lo haga? Claro. Bien. Entonces veamos dónde estamos paramos que la aplicación se ejecute. Y sigue adelante y pregunta angular. Si quieres, solo podemos hacerlo en uno, el nombre o el color. No importa cuales fueran al nombre. Bien. Así que tienen CLI angular generar una tubería ser PXG generar Y luego el nombre de la pipa, así que tal vez nombre de icono. Capital o no podría importar. A lo mejor tal vez tú Bien. Esto está bien. Entonces ahora abre el nombre del icono pipe. Eso va a ser Puedes comandar o controlar pincha sobre él. En la terminal. Donde dice crear nombre de icono de aplicación de origen? ¿El control da clic en el nombre del archivo en la salida? Este tipo, ¿verdad? No. El que está al lado de ese. Te tengo. Ese es el archivo de prueba. Sí. Vamos a hacer clic en el otro. El archivo no de prueba. Ese es el módulo de la aplicación. Bien, vamos a conseguir el del medio. Ahí vas. Bien. Bien. Entonces, cuando usa una tubería, lo que pase para el valor de enlace de datos se pasará a valor. Entonces esencialmente lo que quieres aquí es el nombre del alumno. Los alumnos. Estado de asistencia, ¿verdad? Sí. Probablemente no querrás pasar todo el valor del estudiante a esto porque solo te importa ese valor. Bien. Así que adelante. Entonces el valor va a ser una cadena. No creo que necesites el resto de esos parámetros. No es una cuerda aunque lo es. Estás en lo cierto. No es una cuerda. ¿Es el estado de estudiante? Correcto. Entonces quiero decir, una vez que llegues a refactorizar este punto, probablemente tenga sentido hacer que ese sea su propio tipo Bien. Pero por ahora, puedes lograrlo. Debería estar bien ser una cuerda. Y si me va bien. Bien. Podrías hacerlo exactamente igual. Podrías hacerlo ausente o presente. Vayamos ahora mismo con estudiante y yo lo haré. Se puede refacturar más adelante. Entonces sí, ahora solo es cuestión de copiar y pegar ese mismo código Bien. Y esto es valor. Bien. Bien. Entonces eso se ve bastante bien. Así que ahora de vuelta en tu HTML, donde estás pasando en llamar icono nombre estudiante, simplemente pasar estudiante en estudiante. Sólo estudiante, y luego la pipa al nombre de la pipa. Nombre del icono. Y luego deshazte de ese Pen Bien. Y creo que probablemente haya algo más puedas dejar esa sola si quieres porque deberías verla en la consola. Verás que a uno de ellos no le llaman una y otra vez. Lo que no recuerdo fue si hay algo que ya no puedes usar. Sí, deshazte de eso. Bien. Y pondría un registro de consola similar en la tubería. De esa manera, puedes demostrarle a todos que solo se le está llamando cuando tiene que serlo. Y hay algo más que todavía tienes que hacer aquí. Estoy olvidando lo que es por ahora, así que tendremos que descubrirlo juntos. Adelante y ejecutarlo. El hecho de que esté encendido en el módulo, eso puede ser todo lo que necesitabas hacer Porque eso se agregó automáticamente. No, hay consejo. Bien. Todo bien. Eso es lo que tenía miedo. Se puede encontrar. Esto es peor que el recubrimiento de vida. Esto es tratar de decirle a alguien más cómo darle un abrigo salvavidas. Lo sé. Todo bien. Entonces la pipa está ahí. ¿Necesito estar? Necesito estar en el módulo de roster. Vuelva al módulo A. Creo que tal vez tengamos que declararlo. No, señor. Y me refería a hacer esto, ya sabes, esta tarde para asegurarme de estar listo. Oh, Dios. No, me siento mal. ¿Es esto? ¿Cuál era el nombre de la pipa? En el archivo TS de punto de tubería. Ahí vas. A lo mejor no. No. Abre de nuevo tu archivo TS de pipe. Es la tercera pestaña de tu editor. No, está aquí. Bien. Sí. Entonces, ¿cómo debería llamarlo Sí, mi cerebro está teniendo dificultades recordar esto y los uso todo el tiempo. Es una de esas cosas que una vez que la escribes, simplemente no tienes que volver a pensarlo nunca más. Quiere asegurarse de que sea declarada o importada en el módulo de página Roster Oh, a lo mejor no va en el módulo A. A lo mejor tienes razón. A lo mejor va en el módulo de página de roster Bien. Así que declararlo aquí. Bajo importación o No tiene módulo propio. Así que solo declararlo. Si escribe el nombre del icono, debería encontrarlo por usted. Ahí vas. Y es posible que tengas que sacarlo del módulo App. Aquí, eso es correcto. Bien. Ahí vas. Todo bien. todavía se llama ¿cuántas veces? Una vez por cada persona, ¿verdad? Sí. Y mira cuántas veces más el color del icono tipo nueve. Así que ahora si haces clic alrededor, simplemente haz clic en cualquier lugar. Bien. Sí. Todo bien. Bueno se ha puesto un poco mejor, así que no sigue llamando mis botones se fueron. No estoy seguro de lo que hice ahí. Sí. Ahí vas. Sí, nueve veces. Curiosamente, el nombre del icono pipa sí consiguió ¿qué hiciste? ¿Reiniciaste algo? Yo no lo creo. Creo que lo hiciste. Creo que presionaste reiniciar en tu botón fabuloso. Porque todo el yo hal el agua. Sí, probablemente. ¿Todos tus estados de asistencia se fueron? Sí. Bien. Bien. Entonces todo el punto de ese ejercicio. No iba a perder 15 minutos de tu tiempo. Fue para impresionarte que llamar a funciones desde tus plantillas angulares nunca es realmente una buena idea. ¿Ese fue el mensaje que sacaste de esto? Sí. Totalmente. No tenía idea. Es decir, ya he visto ese comportamiento antes. ¿Nunca supiste por qué? Nunca supe que nunca entendí. Es decir, no sé mucho de angular. ¿Todos aquí van a estar volcando angulares y van a reaccionar la semana que viene? No. Una de las cosas que sí tengo es algo de este curso en un libro y un formato de video para reaccionar. Simplemente tiendo a usar angular mucho más a menudo, así que ahí es donde me siento cómodo. Todo bien. Entonces volvamos a compartir. Y llegaremos a la página de detalles del alumno. Andrew, ¿ vas a necesitar recuperar esos botones para que puedas llegar al detalle del alumno? Voy a trabajar. Voy a trabajar en ello. Lo voy a averiguar. Todo bien. Bien. Bien. Entonces la página de información del estudiante, esta es la página de detalles, y esta va a ser principalmente construcción de formularios en la validación. Y como te imaginas, ionic tiene muchos componentes, mucha funcionalidad para que esto sea lo más fácil posible. Pero irónicamente, también es muy complicado. Entonces, en nuestra página de información del estudiante, vamos a querer implementar un botón de retroceso para que puedas volver a la Rosa. Vamos a reutilizar en las etiquetas. has visto, pero los vamos a usar en un contexto de una forma. Vamos a usar una entrada on, y on input es esencialmente la misma que la entrada HTML. Es cualquier cosa que quieras para obtener datos del usuario. Uno de esos insumos es el nuevo en la versión seis, que es el nuevo on date time. Bien. Entonces, abramos una lista de estudiantes e implementemos un backlog Entonces deberíamos ir a la derecha a mover algo de esto por ti otra vez. Deshazte de eso. Vamos a abrir la página de información del estudiante. Obtener la otra página de información del estudiante, así que este es el HTML. Bien. Entonces ya tenemos un encabezado con una barra de herramientas y tenemos un título. Lo siento. ¿Se suponía que íbamos a hacer una página de información para estudiantes? Ya deberías tener una página de información del estudiante. B desde el primer día. Hicimos todas esas páginas y el enrutamiento a ellas. Bien. No creo que tenga uno. Tú no. Entonces podemos si quieres volver a compartir, podemos volver atrás y hacerlo por ti muy rápido. ¿Eso es iónico? Ionic genera la página de información del estudiante. Y si haces la info del alumno de esta manera a tus órdenes? Sí. Bien. Lo encajará y hará los nombres de archivo correctamente. Bien. Yo tengo eso. Bien. Entonces, ¿tienes la página de información del estudiante? Sí. Bien. Entonces, ¿tu página de información del estudiante debería tener una barra de título o encabezado aunque con una barra de herramientas que se vea así? Sí. Entonces quiero cambiarlo solo un poquito. Para que muestre el nombre y apellido del alumno. Y lo haremos con el enlace de datos de cadena regular angular . Estudiante primero significa un espacio entre ahí. Es quejarse porque aún no tengo estudiante. Entonces, para obtener un botón de retroceso ahí, ya tenemos la barra de herramientas, y ahora necesitamos un contenedor para nuestro botón, que va a ser un botón on, y luego un botón específico en back. Y lo que vamos a tener aquí es ese HRF predeterminado. Y lo que eso dice es en el caso de que vengamos directamente a la página del roster, y no hay nada en la historia Y de todos modos presionan el botón Atrás. Tenemos que darles un lugar a donde ir. Entonces, aunque no haya ningún lugar para que vaya el botón Atrás, estamos definiendo que sea la página del roster No tiendes a ver demasiado ese problema en una aplicación móvil porque puedes controlar como desarrollador cómo llega el usuario de un lugar a otro. Pero en un navegador web, podrían simplemente poner la URL que quieran e ir directo ahí. ¿Eso tiene sentido? Y luego también vamos a querer un botón de menú. Aunque podríamos argumentar que un botón de menú no tiene sentido en la página de detalles. Va a ser una decisión que te quede a ti, de verdad. Así que déjeme volver a correr a mi señor. Bien. Se está compilando. ¿Alguien tenía alguna duda sobre este código en particular? La sintaxis? Todo menos el botón Atrás debería ser familiar en este punto. Bien. Así que déjame volver por aquí. Y aquí está el mío. Entonces si voy Déjame abrir ¿Sabes qué? No lo voy a hacer de esa manera. Vamos a usar bordes. Bien. Entonces mi roster, esto en realidad podría fallar porque no tengo un nombre de estudiante o apellido de estudiante Entonces, si estás siguiendo, esto es lo que deberías estar viendo también, aún no tienes estudiante. Bien. Cuál debería traer a colación la pregunta, ¿cómo conseguimos que un estudiante aparezca en la página? Si miras la URL, bueno, supongo que no puedes mirar el RL porque falló. La URL para la información de un estudiante. Si recuerdas que la itinerante fue la información del estudiante recorta la identificación del estudiante, este momento, eso no está funcionando en absoluto por el error de sintaxis o el error de enlace Así que puedo arreglarlo rápidamente viniendo aquí y diciendo: Bien. Yo solo puedo darle un estudiante vacío en mi componente y luego al menos no debería fallar, ¿verdad? Pero el título, aquí no hay nada. Entonces de la misma manera, si entré aquí y dijera. Nombre John, apellido Do Deja que reconstruya. Y ahora vemos a John Doe. Y aún tenemos nuestro botón de menú y nuestro backbon. Pero eso no nos ayuda a que el alumno entre en la página. Sí. El mío no va para nada a la página del estudiante. ¿Qué está haciendo? Simplemente nada. Bien. ¿Quieres compartir y diagnosticar? Quiero decir, para mí, ¿aquí es donde ocurre el verdadero aprendizaje cuando realmente nos sentamos y resolvemos los problemas? Sí. Déjame unirme a la cosa otra vez. Bien. Zoom de nuevo. Bien. Voy a matar el compartir aquí. Definitivamente quiero asegurarme de que hagamos bien esta parte porque crear el formulario en realidad no es tan difícil. Entonces creo que tenemos tiempo extra en el horario esta noche. La primera pieza de la forma va a ser molesta. El resto es sencillo. Mucha duplicación de HTML. Bien. ¿Qué estamos viendo? Entonces creo que es esta línea de aquí, ¿verdad? Se llama información del estudiante? Sí. Así que tienes enlace de tu enrutador y estás pasando la matriz, la información del estudiante y la identificación del estudiante. ¿Y qué pasa cuando haces clic en ese enlace? Sí. Creo que sé cuál es el problema, pero quiero verificarlo primero. Así que aquí solo estoy bien. Tienes errores en tu consola. Haga clic en el número cinco allá arriba con el icono de error. Bien. El mismo problema que tenía antes, ¿verdad? Porque yo nombre y apellido. Bien. Entonces fue en el mío ni siquiera se renderizó a la página. Bien. Bien. Lo siento. Sí, tampoco lo hice por mí. Entonces, si quieres arreglarlo por ahora, solo para asegurarte de que estás llegando allí, sigue adelante y solo agrega el objeto estudiante ficticio en tu archivo TS de información del estudiante Sí, eso debería funcionar. Adelante y añádele un nombre y apellido. Debería ser un Colón. El nombre y apellido deben tener dos puntos en lugar de un signo igual. Porque estás creando un objeto de script de tipo literal. Sí, ahí tienes. Sí. Ese es el Java en mí. No te puedo decir cuántas veces he hecho eso. Gracias. Bien. Entonces así renderizar. ¿Aún no renderizado? No. Estudiante token inesperado en la columna 19. Abra su archivo HTML. Parece que ahí tienes un error tipográfico. Cómo veo cuál es el problema. El alumno en página. ¿Qué hice? Página de información del estudiante dot HTML es la que quieres abrir. E incluso puedes ver que el código VS te dice que tienes dos errores en él. Ver el hecho a la izquierda. El archivo aparece en rojo. Bien. Entonces haga clic en el archivo rojo o naranja de la izquierda. Sí. Tienes dos errores. Entonces lo que tienes aquí es que solo necesitas poner los tirantes Curly alrededor de cada uno de forma independiente Entonces es estudiante primer nombre cerrar corsé. Bolígrafo espacial vas. Ahora debería estar bien. Bien. Ahí vas. Supongo. Voy a hacer ese solo un poquito demasiado rápido. No. Yo lo hice. No, lo hice. Bien. Te tengo. Todo bien. Voy a dejar de compartir. Ya. No, voy a volver a compartir. Bien. Entonces necesitamos que un estudiante entre en una página. Y bien. Creo que toqué esto el otro día. Soy un gran fan de nuestro X JS, y uso X JS tal vez más de lo que es saludable, pero me parece que una vez que te sientes realmente cómodo con él, escribes mejor código. Entonces este código de aquí. Bueno, primero, déjame preguntar, ¿alguien ya se siente cómodo con nuestro XJS o sabemos si sabes cuál es nuestro HKS He oído hablar de ello. Bien. Entonces esto podría tomar un poco, ciertamente toma un poco acostumbrarse. Entonces lo que estamos haciendo aquí e intentaré ir despacio es que tengo un observable en mi página de información estudiantil que llamo signo de dólar estudiantil Y lo que está pasando es que tengo la ruta de la página, que contiene un mapa de parámetros. Ese es el mapa par. Y Angular lo pone a disposición como observable, para que puedas escribir código que cuando cambie la ruta Entonces, si la página de información del estudiante es Información del estudiante uno, y es la primera vez que has estado en esa página. Tu componente renderiza, se llama al constructor, el G encendido y se ejecuta, y todo eso sucede en el ciclo de vida de la página angular, de la manera en que se supone que debe hacerlo. Si la ruta entonces cambia, pero la página no tiene que hacerlo. Entonces, de info de estudiante uno a estudiante Info dos. Angular sabe que no tiene que reconstruir toda la página desde cero porque solo una parte del mapa de parámetros ha cambiado. Para que puedas prestar atención. Puedes suscribirte a estos cambios. El componente no se renderizará, la página no se renderizará. Pero puedes responderle prestando atención suscribiéndote al mapa de parámetros Entonces lo que estoy haciendo aquí es que estoy configurando un nuevo observable que se basa en los cambios a la p hyping esos cambios a otra función RX JS llamada switch Map Switch Map dice, Este observable acaba de disparar el nuevo valor Toma ese valor y cámbialo a otro observable que vamos a obtener llamando a esta función Así que vamos a tomar el parámetro, el parámetro ID de params obtener ID Y vamos a pasar ese valor al servicio estudiantil obtener estudiante. Entonces vamos a pedir servicio estudiantil para darnos Estudiante un estudiante dos, estudiante tres. Vamos a tomar ese valor, y vamos a ejecutar un operador R XJS llamado TAP, lo que significa que solo vamos a echar un vistazo al No vamos a hacer nada especial con ello. Sólo vamos a echarle un vistazo. Entonces el estudiante nos va a devolver a un estudiante, o no nos va a dar nada si no podemos encontrar uno. Entonces, si no hay ningún estudiante con esa identificación, vamos a decirle al, el router angular para volver a la página de Roster ¿Eso está claro hasta ahora? Es genial si no lo es. De hecho, hay una manera secundaria en la que podemos implementar esto, y podría ser más fácil de entender. Pero primero quería pasar por el camino difícil. Bien. El estudiante se convierte esencialmente en un observable de estudiantes Cuando el parámetro, cuando cambia la ruta, el alumno observable obtiene al nuevo alumno Eso es lo importante que hay que recordar fuera de estas líneas. El estudiante VM observable está construyendo sobre el estudiante observable y simplemente canaliza ese valor a través un mapeador que clona a ese estudiante para darnos una copia exacta y profunda Y Clone student solo hace una cadena de parte JS. Es un clon de Forman que tal vez hayas visto antes. Todo eso para decir, cuando obtenemos un objeto estudiantil del servicio estudiantil, obtenemos una copia del mismo cada vez que cambia la ruta. ¿A dónde va esta pieza de código? Eso es lo que te voy a mostrar a continuación. Bien. Bien. Y voy a tratar de hacer este tipo de vivir. La última vez que hice este taller, Mike Cartington de Ionic pasó por aquí justo cuando estaba repasando este código Y una de las cosas que me dijo fue con una app Ionic, no tienes que hacer esto. Entonces, qué vamos a hacer esta vez. Entonces veamos. La página de información del estudiante. Todavía quiero un estudiante. Pero esta vez, voy a predefinirlo como un Déjame pensar en éste por un segundo Porque quiero hacer esto de la manera que Mike me dijo. Bueno, déjame preguntarte. ¿Quieres que lo haga de esta manera y luego lo simplifique o primero quieres hacerlo de la manera simple? Vamos en ambos sentidos para ver qué cambia. Bien. Bastante justo. Entonces quiero a los estudiantes y bien. Bien. Así que dejémoslo ahí por un segundo porque todavía no tengo el router. Recuerda lo que dije el otro día sobre no hacer mis importaciones o no mostrar mis importaciones en las diapositivas. Entonces necesitamos el necesitamos la ruta, que es un intento de hacer esto de memoria aquí. Es el No eso tampoco. Es el correcto. ¿Alguna vez tuviste uno de esos días en los que no recuerdas tu nombre? ¿No es el router angular? No. No, no, no. Pero también necesitamos eso. Entonces ese es el router. Eso nos hace falta. Y así es como navegamos por la ruta. Es el grito en voz alta. Dame un segundo. Una de esas cosas que no puedo recordar mi nombre. Activado t. Así que recuerda eso. La ruta activada tiene información sobre la ruta utilizada para renderizar tu página. Bien. Entonces ya tenemos eso y el mapa de param está en la ruta activada Como puedes ver, es un observable de tipo. Cada vez que eso cambie, vamos a canalizar su valor. Este servicio al estudiante, lo que significa que necesitamos obtener el servicio estudiantil. Cualquier cosa que se esté preguntando ¿ Mike realmente codifica así? Sí, lo hace. Servicio a estudiantes estudiantes de servicio estudiantil. Bien. Bien. Si no estudiantes. También estoy cerca, pero volveremos a Roster. Y claro, ahora tenemos que averiguar todos los encantadores ps que fueron que están en mal estado. Para que me guste eso. Eso debería no está contento conmigo. Así Router o Mapa. Oh. más bienes raíces. Este mapa de interruptores canalizado Obtener servicio. Eso no es un problema. Bien. Todo bien. Entonces no hay alumnos. Creo que lo que está pasando aquí nos faltan algunas importaciones. Importar mapas de cambio de hechizo importación perfo. Ahí vas. S Bien. Ahí vamos. Así que cambia el mapa y la forma cónica de los operadores X JS. Bien. Entonces en cuanto la identificación cambia la ruta cambia, lamentamos la identificación, llamamos para conseguir estudiante. Si no conseguimos un estudiante, navegamos de regreso al roster. Eso es correcto. ¿Puedes dejar eso tal como es por 1 segundo? La diapositiva o código. Ellos son lo mismo. ¿ Cuál puedes leer mejor? La cosa en rojo. Bien. Obtener. Yo cambio hombre. Bien. Switch map esencialmente toma el valor de un observable y crea un nuevo observable y cambia a ese nuevo En definitiva, si terminamos con un estudiante es un estudiante observable Y siempre que estés trabajando con RXJS así, llénalos lentamente y compóntelos. No trates de convertir todo en un solo observable. Incluso esto podría ser demasiado. Pero ahora, voy a crear un modelo de vista de estudiante para mover esto hacia arriba. MP también viene de nuestros operadores JS, y Clone student aún no existe. ¿Ves si el copiloto sabe qué hacer aquí? No del todo. Ahora lo hace. Y luego lloraron estudiantes. Bien. Bien. Bien. Esto fue suficiente para llevar al alumno de la ruta en la página al componente. Entonces en nuestra plantilla, trabajaremos sólo con esta. Mike, lo siento, es todo este código, ¿en qué consiste esto? ¿Está en un it? ¿Está en el constructor? No está en el constructor. Es es solo es parte del componente. Estos son en realidad componentes. El mío está bastante mal. No estoy seguro de lo que pasa. Bien. Quieres que ponga esto en el canal de holgura para que puedas copiarlo y pegarlo. Es útil, pero no es necesario entender la porción iónica. No. Yo solo es que tengo garabatos rojos por todas partes. Sí. Yo también. Sobre todo porque si no tienes todas estas cosas. Sí. Esto adelante, voy a conectarme contigo después. Bien. Sí. Me estoy poniendo squiggly en mi constructor. Dice Member constructor shod ser declarado antes de todas las definiciones de métodos de instancia pública Correcto. Sí, yo tengo esto, tú tienes eso. Sí. Y eso es porque no puse a estudiante por debajo de él. Eso debería hacerlo feliz. Dependiendo de lo que esté usando para prestar, la forma en que se supone que las aplicaciones angulares deben diseñarse aquí es que tiene sus variables de instancia, sus campos justo en la parte superior de la clase, luego su constructor, luego sus eventos de ciclo y luego sus funciones Bien. Todo bien. Así es como conseguimos que el alumno entre en la página. Bien. Esencialmente, toda la página de información del estudiante, todo el HTML se envuelve con una etiqueta de contenedor G usando una directiva NG para que solo se renderice si hay un estudiante. lo voy a decir otra vez. Vamos a envolver todo el HTML de la página con un contenedor. Y el contenedor G solo se renderizará si tenemos un estudiante válido. Esto evita errores de referencia nulos esencialmente indefinidos. Bien. Un par de cosas si ya debes saber sobre NGF, entonces no se renderizará a menos que el NGF sea cierto Pero lo que es más es que el contenedor NG es una etiqueta angular especial que no renderiza ninguna salida en absoluto. No afecta el marcado. Entonces, esencialmente, esto es decir que todo dentro del contenedor G no existirá si no tenemos un estudiante válido. El resto de esa línea es una tubería angular, y estamos llamando a la pipa. Entonces la pipa Ainc se va a encargar de la suscripción y cancelación de suscripción por nosotros, no tenemos que lidiar con Cada vez que el estudiante VM dispara una propiedad, un nuevo valor. Todo dentro de ese contenedor de energía se le dirá tout repintar. Lo último que hacemos es decirle a la pipa de An que sea cual sea el valor que estamos obteniendo de esta observable internamente a mi plantilla Voy a referirme a ello como el nombre invariable estudiante. Por eso puedo decir primer nombre estudiante dallast nombre. Eso lo pongo en práctica. Si entro aquí ahora y colapso todo mi contenido. Simplemente puedo hacer contenedor GF No VM dólar. Como estudiante. Y luego cerrar contenedor de energía no sé de dónde vino eso. Y es quejarse porque ¿todavía tengo un estudiante? No conseguí película. Me deshice de estudiante, ¿no? ¿Por qué se queja? Porque yo no estoy cerrando. Gracias. Formato. Bien. Bien. Ahora, volvemos al borde. Todavía estoy recibiendo mi mi minería de datos. La minería de datos está funcionando. Bien. Entonces quiero asegurarme de que todo el mundo llegue al menos a este punto. Y luego te mostraré la forma más sencilla que nos dio Mike. No es mucho más sencillo. Un más sencillo. ¿ Ves el poder aquí? No me estoy suscribiendo a observables. No estoy esperando promesas para resolver. No soy No estoy haciendo una llamada HTTP directamente desde mi componente. No estoy lidiando con el manejo de errores. Todo eso se puede hacer dentro de mi servicio, y el componente puede escribirse de tal manera que solo se renderice cuando tenga datos válidos. Así que realmente puedes concentrarte en lo que necesita hacer el componente. ¿Eso tiene sentido? Debería ser, este es todo el código que necesitas en el componente. ¿Todos los tienen? Está trabajando de mi lado. Impresionante. Cualquier otra persona. Alguien lo tiene no funcionando que quiera. Yo estoy ahí. Bien. Bien. ¿Estás bien yendo un poco largo esta noche? Estoy bien con eso si tú lo estás. Depende de cuánto tiempo hagamos esto bien. Bien. Y los comentarios del taller, vuelo espero que ustedes vayan. Bien. No pases una hora en nuestra J. Ya voy a tomarme un rápido descanso en la naturaleza. Todo bien. ¿A quién seguimos esperando? Entonces me deben faltar las importaciones para cambiar Mapa, tap y map. A ver. Sí. PS es bastante bueno de adivinar, pero sólo una vez que tienes uno de ellos. Bien. ¿Listo para seguir adelante? Hemos llegado al punto en que podamos hacer esto. Bien. Entonces a partir de aquí, lo que vamos a querer hacer es crear una forma. Probablemente hecho esto antes en HTML. Entonces vamos a necesitar una forma para todos los valores que sean editables en un estudiante Podemos usar una etiqueta on con una entrada on juntos, veamos. Cosas que debe conocer en las etiquetas. Los importantes probablemente no color casi todo se puede cambiar de color. Pero la posición de la etiqueta relativa a su elemento de entrada. Entonces se ve así Así que si tienes un valor predeterminado, obtienes la etiqueta junto al marcador de posición X se ve igual. Tiendo a usar stack o flotando. ¿Qué hace eso? Bien. Bien. Cargar es algo genial porque parece una etiqueta fija. Y luego al hacer clic en él, se convierte en una etiqueta de pila. Así que anima arriba y fuera del camino para que puedas escribir. Cuál uses realmente va a ser tu decisión. Cualesquiera que sean tus opciones de diseño. Entonces, en la entrada es un tema enorme. Piensa en todo lo que puedas hacer con una etiqueta de entrada HTML y una sobrealimentación. On han hecho mucho trabajo para hacerlo realmente, realmente poderoso, así que puede parecer un poco abrumador. Realmente no tiene que ser todo lo demás con angular e iónico. Si empiezas con lo básico y luego vas de ahí, no está tan mal. Aquí hay algunas otras cosas importantes para la entrada. Así que imagina que tienes una entrada de texto. De nuevo, puedes crear el color. Puede darle un valor de eliminación de rebote cada entrada N activará un evento de cambio a medida que el usuario lo está cambiando Pero si haces un valor de debounce mayor que cero, no obtendrás ese evento de cambio hasta que hayan transcurrido tantos milisegundos después de que el usuario haya realizado Entonces, por ejemplo, pones un debounce de 500 y la escritura del usuario No vas a recibir ese mensaje de cambio hasta haya pasado medio segundo sin que ellos hagan ningún cambio. Si has visto en un dispositivo móvil donde puedes introducir una cadena de búsqueda y en lugar de una tecla return o enter en el teclado en pantalla, dice, buscar o Esa es la pista de la tecla enter. También puede darle al dispositivo móvil una pista sobre qué tipo de teclado mostrar en función del modo de entrada. Y por último, el tipo es igual que un tipo de entrada HTML. ¿Qué tipo de datos buscas? Se va a poner por defecto al texto. Así que puedes usar todos estos atributos diferentes para personalizar, personalizar la experiencia para tu usuario. También podemos validar nuestros insumos. Estas son las validaciones incorporadas que están disponibles para usted Máximo mínimo de longitud de cadena, valores numéricos mínimos máximos, patrón reg x y si se requiere o no un campo. El siguiente, te voy a mostrar. No trates de tomarlo todo. Estas son todas las pistas autocompletas que permiten las entradas. Entonces, si alguna vez has ido a una página web y tu navegador ha dicho, oye, déjame ingresar esto por ti. Es por cosas como esta. Entonces tu nombre, tu dirección, tu ciudad estado. Y si tu navegador conoce esa información, la ingresará por ti. ¿Tiene sentido? Bien. Vamos. Todo bien. Yo solo quería presionar para tocar eso muy rápido. Entonces, lo que tenemos que hacer para obtener la entrada del usuario para el alumno es crear un formulario, solo un formulario HTML regular. Con una forma angular, queremos proporcionar un controlador de eventos para N G submit Esto es lo que se llama a la función cuando el usuario envía el formulario La forma de estudiante libra es igual a la forma N G. Ese es otro angularsmo. Lo que esto está diciendo es que cuando tenemos una forma en angular, vamos a ella nos expondrá una forma G que representa toda la forma renderizada. Y vamos a asignar ese formulario a la plantilla local variable formulario estudiante. Y cuando hagamos eso, podremos dentro de nuestro HTML, podremos hacer referencia a ese formulario, preguntar angular si es válido, pedirle errores, y así sucesivamente. Lo que quiero hacer aquí, volver aquí adentro sobre contenido actualmente vacío. Quiero crear un formulario. Vaciar enviar es igual a enviar. Vamos a enviar el objeto estudiante cuando se envíe el formulario y vamos a tener un formulario de estudiante variable de plantilla local, y ese es el formulario NG que se construye para nosotros. On submit aún no existe. Para mantenerlo feliz, solo entra aquí y crea uno. Sí. Aunque no haga nada. Ahora, al menos es feliz. Siguiente. Vamos a crear un solo campo de entrada porque todos los campos de entrada van a verse así. Y creo que sí quiero una lista. Queremos un artículo en. No, no quiero que el copiloto haga el trabajo por mí. En el artículo on, quiero una etiqueta en. Y voy a establecer su color. Nombre válido. Te lo explicaré en un segundo. Estoy muy bien. Bien. Quiero parar ahí mismo por un segundo. Estoy creando una lista para todas las entradas. Entonces solo necesito uno de estos. Uy. Bien. Y entonces cada uno de mis elementos de entrada de formulario va a estar dentro de un elemento ion. El en la etiqueta simplemente me dice lo que vamos a poner ahí. Establecer el color ya sea a nada, que será el color predeterminado por defecto para la forma o el color iónico llamado peligro en caso que el campo de nombre no sea válido. Pero fíjate que no le gusta el nombre porque no existe, ¿verdad? Entonces necesito una entrada y voy a ponerla en nombre de pila. Voy a configurarlo a requerido. Sí, voy a usar la mente de datos de dos vías para el nombre del modelo NG También necesito. Eso es lo que me faltaba ahí. La entrada también necesita una variable de plantilla? Quiero decir, me he perdido algo de la diapositiva, pero está bien. Todo bien. ¿Ves lo que va a pasar aquí? Entra en el navegador. Bien. Entonces el primer nombre es Casey Para que pueda notar que el primer nombre se volvió rojo. Pasó a ese estado de peligro, ese color de peligro porque se requiere nombre de pila, pero ya no lo estoy proporcionando. ¿Eso tiene sentido? Por otra cosa que puedo hacer. A ver. Bien. Cambié la posición a flotar. Sí, lo moví hacia arriba, moví la etiqueta hacia arriba. Bien. Bien. Y entonces cuando no estás cuando no tienes el campo no tiene foco. Anima B 5. Sesión4: Muy bien, chicos. Bienvenidos al cuarto y último taller. Quiero comenzar esta noche hablando sobre el almacenamiento de aplicaciones y cómo funciona todo eso. Con iónico, hay un montón de diferentes opciones de almacenamiento. Y porque suelo trabajar principalmente con dispositivos. Hago mucho en el almacenamiento del dispositivo. Así que no voy a entrar en los diferentes tipos de almacenamiento en la nube y Ionic tiene una oferta empresarial que hace almacenamiento seguro en la nube. Esto es literalmente cómo se ponen datos simples en el dispositivo. Y eso es lo que estoy haciendo aquí. Entonces lo que uso como almacenamiento de capacitores. Quizás recuerdes desde la primera sesión que tuvimos que salir e instalar en el almacenamiento de barra de condensadores para obtener la puerta de servicio de almacenamiento o la puerta de servicio a los estudiantes Y como puedes ver aquí, es una API bastante simplista Tienes métodos get set, un método remove, borrar el método de base de datos y un método para obtener la matriz de todas las claves en tu base de datos. Y digo base de datos. Yo uso el término libremente porque en realidad es solo una tienda de valor clave adjunta a su aplicación Y lo que quiero decir con eso es que está unido a tu esquema You HTTP. Entonces, si tuvieras que usar NPM start, que lanza NG sirven con el default de Port four tan 200 Juega con la aplicación, configuraste tu tienda, creaste algunos estudiantes nuevos y los editó. Y luego cerrar la app hacia abajo, inicié de nuevo con el servicio iónico, que creo que nos Puerto 8,100 No tendría la misma base de datos. Entonces, de igual manera, si era HTTP versus HTTPS, creo que incluso obtienen diferentes bases de datos. En realidad, solo está vinculado a tus aplicaciones que ejecutan incidentes. En un navegador de escritorio, va a usar almacenamiento local, que significa que es volátil. Podría ser destruida en cualquier momento. En un dispositivo real, indexó DB o ¿cuál es el otro ¿Luz SQL? No. Se le puede decir que use SQL Light. Entonces hay una opción para eso, y en bastante bien con eso. Para que puedas usar SQL Light. Pero ese no es el Index TV de uno y algún otro. Se me está escapando ahora, pero no importa. Utilizará el adecuado para el dispositivo adecuado. Y esa es una de las cosas que obtienes al usar el almacenamiento de capacitores. No tienes que preocuparte por ello. Entonces, si eres PWA, si eres Android, IOS, no le importa Entonces, para configurar el servicio estudiantil con solo estas cinco llamadas API, esencialmente creé un montón de métodos públicos. El servicio de almacenamiento de condensadores está todo basado en promesas, así que verás que todo lo que hago aquí también está basado en promesas. Excepto por que parece el segundo. Todos los estudiantes es el observable en el que se basa nuestro componente de lista de componentes Entonces la forma en que esto funciona es cuando algo le sucede a un estudiante, ya sea que los marques ausentes, los presentes , los borres, guardes recuperarlo , conseguir uno nuevo, que tienes. Lo que hace el servicio de almacenamiento es que toma la información que le acabas de dar. Así que aquí hay un estudiante completamente nuevo. Aquí hay un nuevo objeto estudiantil completamente hidratado. Lo guarda en el almacenamiento o almacenamiento local, y luego inmediatamente dice que todos los estudiantes observables, que se ha creado para usted una matriz completamente regenerada completamente completamente, y eso hace que el componente se actualice Como probablemente puedas imaginar. Si tienes una decena de alumnos, esto no es un problema. Si tienes 1,000 estudiantes o 10,000 estudiantes, esto podría ser un problema. La forma en que se escribe el servicio estudiantil es que podrías extenderlo proporcionando paginación, clasificación, todo tipo de cosas Y entonces sólo tendrías que seguir prestando atención a ese observable Voy a dejar eso como un ejercicio para el espectador. También dentro del servicio estudiantil, hay algunas piezas privadas que repasarán en breve, y es decir, la propia matriz estudiantil se implementa como una asignatura de comportamiento RHS Y lo que eso hace es que mantenga un efectivo local dentro del servicio estudiantil que actualiza cada vez que tiene un cambio. Y entonces eso es lo que se envía al componente a los suscriptores. Y lo hace a través de la función llamada push A. Push A simplemente va y dice: Oye, tenemos un nuevo sujeto de comportamiento. Tenemos una nueva matriz, vaya a procesarla. Las otras tres funciones aquí son simplemente instumentaciones internas que veremos en breve, y son básicamente Entonces, dentro del servicio estudiantil, creé un objeto genérico llamado una nueva interfaz de estudiante de estudiante, y como puedes ver, simplemente deja en blanco todos los campos, los convierte en flujos vacíos. Así que aún no lo hemos probado. Pero si vas a Si vas a la página de información del estudiante. Hay código en el servicio estudiantil que devolverá a este alumno, el alumno vacío en lugar del uno, el alumno por identificación que pediste. Aquí está el sujeto de comportamiento. Nuevamente, tiene una variedad de estudiantes internamente. Y cuando se inicia la aplicación, el componente de lista de estudiantes simplemente pide todos los alumnos funcionen y eso hace que esa asignatura de comportamiento sea inobservable Como regla general, si estás tratando con un tema de comportamiento con múltiples suscriptores, no quieres exponer el tema real a el tema real a tus suscriptores porque entonces todos podrían comenzar a poner nuevos valores incontrolablemente Entonces el patrón general es devolver a tus suscriptores el comportamiento sujeto como inobservable, y eso es lo que hacen estas pocas líneas Siéntete libre de detenerme si voy demasiado rápido, o si necesitas que algo se aclare. Usted ha visto esto, creo, al inicio del servicio estudiantil. Tenemos una función inicializada, y todo lo que hace es que llama push toda la primera vez Y así dice Push A, consígueme a todos mis alumnos y luego decirle a la asignatura de comportamiento que emita otro valor con esos alumnos en ella. Así que de nuevo, es solo que no es una semilla de base de datos, es una semilla de aplicación. Entonces aquí está el valor inicial. Haz que todos los alumnos pidan al sistema de almacenamiento, al sistema de almacenamiento de condensadores, que me den todas mis llaves de la base de datos. Lo siguiente que hago es filtrar esa matriz solo por aquellas claves que comienzan con la constante clave de los estudiantes, que creo que es solo la palabra subrayado estudiante No tienes No tienes mucho que decir en cómo se almacena, cómo se almacenan los datos aquí. Para que puedas almacenar cualquier cosa. Entonces, si quiero almacenar alumnos o quiero almacenar cosas que no sean estudiantes, lo cual podría en algún momento, podría querer almacenar profesores en algún momento o clases. Necesito diferenciarlos ya que hay una sola tienda de valor clave. Entonces creé la clave de un estudiante, que es solo la palabra estudiante. Entonces tengo filtrado todas las claves de la base de datos en base a esa clave de estudiante. Y luego la siguiente línea aquí, tengo que esperar una promesa a todos y conseguir que cada estudiante por su clave. ¿Eso tiene sentido? Entonces, cuando toda esa promesa se resuelve, tengo una variedad de estudiantes. Y el astuto entre ustedes se dará cuenta de que aquí no tengo ningún error manejando , y probablemente debería Bien. Y aquí está el conseguir un solo estudiante y aquí está ese caso especial para nuevo. Entonces, si pasas la identificación de estudiante de nuevo, simplemente resolveré la promesa con ese estudiante vacío. De lo contrario, entro en la base de datos y busco al alumno por esa clave guion su ID Entonces los estudiantes clave uno, los estudiantes clave dos, etcétera Y consigue estudiante por clave. Notarás que se ve un poco raro. Entonces tengo que ir y llamar la función de almacenamiento, es método get. Y necesito pasar un objeto. No estoy muy segura de por qué no pasas la llave, pero hay que pasarla como objeto. Entonces es por eso que están las llaves dentro del parámetro Así que en realidad estoy pasando un objeto con la clave de key y el valor de ese parámetro de clave student que se está pasando. Es un poco extraño. El almacenamiento de capacitores solo almacenará cadenas. No hace análisis JSON ni serialización para ti, razón por la cual tengo al resultado Y no sólo el resultado sino el valor del resultado. De nuevo, lo que DG de almacenamiento me está devolviendo como promesa de un objeto. Y en ese objeto, hay un valor. ¿Eso tiene sentido? Es un poco raro. Y creo que hay librerías de almacenamiento más simples por ahí, pero quería seguir con las cosas iónicas para esto Del mismo modo, eliminar estudiante, nuevamente, llamas a storage remove y tienes que pasar esa clave. Para salvar a un estudiante, tengo una biblioteca UUID Entonces, si creas un estudiante nuevo, me pasas un estudiante para guardar estudiante sin identificación. En lugar de solo tratar de encontrar uno, dos, tres, cuatro, voy a crear un UUID y guardar esa ID de activos Es lo suficientemente único como para no pensar que alguna vez te encontrarías con una colisión localmente. Probablemente tampoco a nivel global, pero nunca se sabe. ¿Qué significa el doble signo de interrogación? Eso es lo que equivale a decir identificación de estudiante igual a identificación de estudiante. A menos que sea nulo, entonces asigne UUID cuatro. Eso es relativamente nuevo en el tipo de script. Creo que es inteligente. Ahorra alrededor de diez pulsaciones de teclas, pero no sé que esté más claro ¿Estarías de acuerdo? Sí. Es decir, es la primera vez que lo veo, así que por eso me preguntaba. Sí, creo que a veces soy A veces soy demasiado inteligente para mí mismo porque cuando lo vi por primera vez el otro día, tuve que recordarme a mí mismo lo que hace. Entonces sí, creo que uno probablemente debería ser solo punto de estudiante igual a ID de punto de estudiante. Y luego signo de interrogación signo de interrogación, lo que significa, ya sabes, no en. Entonces eso podría ser un poco más fácil. A ver. Entonces después de una eliminación o un estudiante, llamamos push All y eso envía de nuevo la matriz a todos los suscriptores. Guardar estudiante es la implementación interna de guardar estudiante. Entonces asume que ya tienes una identificación de estudiante o una clave, y simplemente llama a la función de conjunto de almacenamiento pasando la clave en el valor. Observe de nuevo, tengo que ensanchar el resultado porque no lo va a hacer por Marcar presente es muy sencillo. Yo establecí el estado de estudiante para presentar. Lo mismo con ausente y luego llamo a hacer Guardar estudiante. Guardar estudiante actualiza el almacenamiento, llama a Push All nuevamente. Reiniciar asistencia pasa por cada alumno Y luego desactiva el estado Y otra vez, ahí estoy siendo inteligente porque se puede ver que la declaración del mapa tiene un atajo. Entonces estoy sacando la propiedad status del objeto estudiante y luego pasando el resto del objeto estudiante con el operador resto. Eso sería el equivalente a pasar por y simplemente llamar a la condición de estudiante sin establecer Pero de nuevo, tenía que ser inteligente, entonces. Si sientes que me pondrías en una revisión de solicitud de extracción por astucia, no vas a obtener ningún argumento de ¿Ese está claro o es que uno simplemente extraño? Bueno, he estado haciendo la, ya sabes, la locura de los flujos de Java, también. Entonces, quiero decir, tiene sentido. Ya sabes, de nuevo, ya sabes, estas palabras son sólo para que los humanos las entiendan. Ya sabes, todo está traducido a lo que sea que vayan a usar las computadoras. Derecha. Ya sabes, se trata de lo que necesitamos para comprender lo que estamos haciendo. Sí. Y francamente, lo que hicimos la última sesión con el deshacernos de todos los observables para que el alumno entrara en la página de información del estudiante, ahora es mucho más legible Creo que HGS tiene su lugar y ese lugar en particular no era su lugar Bien. Entonces estas son un par de cosas más que teníamos. Creo que lo vimos. Tenemos datos temáticos, lo siento, datos de semillas. Y esto fue justo al principio, si no tenemos nada en la base de datos, podemos verlo y conseguir un par de creo que tenemos diez estudiantes falsos, y entonces los datos claros son lo contrario Y esa es fácil. Simplemente llamamos almacenamiento claro. Bien. Y eso es todo para el almacenamiento. Tienes alguna duda antes de ir a la cámara. Oh, quiero decir, eso es literalmente todo lo que tienes que hacer para usar el almacenamiento local. Guau. Sí. Y los códigos todos ahí. Todo está en el servicio estudiantil. Sí. Bien. Entonces, ¿qué voy a hacer ahora? Dame un segundo aquí. Bueno, supongo que puedo editarlo más tarde. Voy a regresar. Todo esto era material suplementario antes Bien. Todo bien. Entonces hablemos de la cámara. Bien. Entonces miramos a Pixabay una vez antes. Y lo que hice aquí es que fui y encontré una foto de una cámara. Lo que quería era una imagen de marcador de posición. Entonces, si no había foto del alumno, yo quería algo para exhibir en su lugar. Entonces, si quieres seguir adelante, ve a Pixabay y encuentra una linda foto de una cámara Ni siquiera importa cuál. Este es genial. Bien. Entonces eso en realidad, no lo he hecho aquí, así que tengo que hacerlo aquí. Sí, no lo tengo aquí. Así que vamos con. ¿Cuál te gusta? Tengo muchos de ellos. Uno, quiero ir con el poloide Entonces quiero descargar la versión SVG. Y luego lo hago con. ¿Por qué no lo hizo con? Inténtalo de nuevo. Bien. Ahí está. ¿Voy a nombrarlo? Cámara. Y voy a arrastrarlo a mis imágenes. No necesito verlo ahí. Bien. Entonces está en imágenes. Bien. Bien. Aquí digo guardar a cámara punto PNG, pero quieres guardarlo a lo que sea que lo descargues. Si descargas un PNG, entonces obviamente, usa la extensión correcta. Bien. Ahora necesitamos estos dos paquetes de NPM. Tenemos que decirle a capacitor que vamos a usar la cámara. Y entonces porque creo que todos ahora mismo estamos en un navegador, necesitamos los elementos iónicos PWA para que funcione en un navegador Entonces voy a hacer eso. Bien. Bien. E instalo. Ambos de esos. Todo bien. Y eso está hecho. ¿Alguien está siguiendo a lo largo y hay que esperar a que termine el NPM? Sí. Lo siento. Estaba tratando de conseguir la imagen todavía, así que déjame hacerlo muy rápido. Bien. Entonces, ¿querrás eso? Muy bien, D. Muy bien. Todos tienen una cámara y el puesto de NPM está terminado. Bien. A continuación, vas a abrir. La mayor parte de esto ya debería estar ahí. Pero recuerdo que tenía que tenerte a alguien el primer día comentando algunas de estas cosas como esta importación aquí. Y esto definió elementos personalizados. O lo borraste o lo comentaste. No recuerdo cuál. Así que abre T. Si. No tengo esto para nada. Hay un par de cosas que tenemos que hacer aquí. Saca esto del camino. Cierro esto. Bien. Entonces necesitamos plataforma, necesitamos arrancar la plataforma. Sea lo que sea que esté ahí. Bien. Entonces ya tenemos eso en la captura. Entonces tenemos que llamarlo Bien. Eso no funcionó. Entonces vamos a necesitar definir o importar elementos personalizados y hacerlo mientras escribimos correctamente. Ahí vamos. Cargador de elementos B. Todo bien. ¿Todos están de acuerdo en que eso se ve igual? Uy. Todo bien. ¿Todo el mundo tiene esto? Todavía no. Todo bien. Uy. No puedo imaginar cuántas veces tengo operaciones seguidas de la flecha izquierda. ¿Cuántos de esos voy a tener que editar? El reposabrazos de mi silla sigue sentado mi teclado. Todo bien. Bien. En la página de información del estudiante, necesitamos importar estas cosas en la parte superior del archivo. Así que el tipo de resultado de la cámara de la cámara y la fuente de la cámara desde la cámara del condensador. Déjame ver si puedo hacer eso. Ahí vamos. Así que de vuelta en la página de información del estudiante. Bueno. Y entonces así es como tomamos una foto. Notarás que el objeto o clase de condensador iónico también está muy basado en promesas. Así que vamos a hacer una función A sync llamada take picture que llamará a las cámaras get photo function y toma un solo objeto de configuración. Hay un montón de cosas diferentes que puedes pasar por aquí. Esto debería conseguirnos una imagen JPEG de calidad razonable que luego podamos asignar a la imagen de datos real al. Los datos de las imágenes U. Debido a que lo estamos asignando en la última línea a la imagen del alumno, será una cadena Será una cadena codificada base 64 de la imagen. Adjunto al objeto estudiante para que cuando lo guardemos, eso solo se guarde en el almacenamiento local también. Todo automáticamente. Déjame traer mi código VS, ver si puedo hacer este tipo de fuera del camino aquí. Entonces esto va en el componente de información del estudiante. Eso es bastante bueno. Pero no lo voy a hacer de esa manera. Alguien tiene que recordarme que apague el copiloto. Todo bien. Eso no está mal. No queremos base 64 como tipo de resultado. Queremos URL de datos. Si hasta ahí conseguimos la inteligencia. La calidad 90 probablemente esté bien. Siéntete libre de jugar con él. Permitir la edición es cierto, lo que dice, darle al usuario la oportunidad de o jugar un poco con él antes de aceptarlo. Eso también es opcional. Y la fuente va a ser cámara. Creo que también puedes hacer si no estás en una máquina con cámara, solo puedes ir a fotos fuente. Creo que eso podría funcionar para un Mac o Windows, si no tienes una cámara. Tengo una cámara web, así que la voy a dejar como cámara. Así que eso va a conseguir nuestra imagen. Necesito una etiqueta de tela. Y luego No estoy seguro de por qué tengo dos líneas ahí. ¿Por qué no solo lo dijo? Oh, ya veo. Pero quiero obtener la URL de datos de la imagen. Y entonces quiero establecer esto. Y eso es un error tipográfico, tiene que ser esto, no importa. Lo siento. Estamos pasando al estudiante adentro, ¿verdad Entonces será la imagen del estudiante igual a la URL de la imagen. ¿Eso está claro? Sí. Pero me pongo un poco chiflado dice que la imagen no es una propiedad en estudiante No sé por qué es eso, pero bueno, la razón por la no lo estoy es porque no lo di no le dije qué es el estudiante. Entonces, tienes razón. Entonces si le decimos que es estudiante, me sale el mismo problema, ¿no? Sí. Entonces voy a mandar clic en alumno. Y voy a añadir Esa es una pieza instructiva de tipo guión. Si lo piensas bien. Porque en la línea 39, no le había dicho a la función que estaba tomando un estudiante. Por lo que por defecto es cualquiera. Entonces la imagen del estudiante está bien. Te dieron los garabatos porque obtuviste el error porque le habías dicho que era estudiante Entonces, ¿qué habría pasado si hubiera dejado mi objeto estudiantil, de la manera en que lo tenía Y no tenía una imagen. ¿Puedes adivinar? Bueno, o va a funcionar o no lo es. Funcionará bien porque la información de tipo realmente solo existe en tiempo de compilación. Una vez que se haya ido toda la seguridad de tu tipo que sacas del mecanografiado Una vez que estés transficado a Javascript y lo estés ejecutando. Es solo Javascript. Va a decir, Oh, pones un campo de tu me diste una cuerda y dijiste que lo hicieras imagen de estudiante. Fresco. Voy a hacer eso por ti. Debido a que funcionaría en Javascript, funcionará bien. Bien. Pero aquí nos gusta jugar bien, entonces. Entonces vamos a hacerlo de esa manera. Entonces, ¿actualizaste a tu alumno con una cadena opcional llamada image? Sí. Todo bien. Entonces ahora necesitamos cablear algo a la función take picture. Y eso lo haremos en el HTML. Entonces lo que quiero hacer aquí al estudiante info HTML. Déjame sacar todo esto de tu camino otra vez. Entonces tenemos nuestro formulario de estudiante, y tenemos el en la lista. Entonces lo que quiero hacer aquí es simplemente agregar otro en el ítem con un manejador de clics Y le voy a pasar al alumno. Ahí dentro, vendo mal estudiante. Aquí, tengo dos imágenes. La primera imagen sólo aparece si la imagen del estudiante existe, y voy a configurarla clase, actualizaremos el CSS en un minuto. Foto del alumno. Bien. Es la edad del estudiante. Si tenemos una foto del alumno en el objeto estudiante, vamos a crear una etiqueta de imagen con esa imagen de estudiante como fuente. Y mi etiqueta de imagen se queja porque no tengo Altex Así podemos configurar alt text igual a's hacerlo de esta manera. Toda la primera vez. Un nombre LQufst. Estudiante último. Así son todos texto al nombre del alumno. Si por otro lado, no tenemos una imagen de estudiante. No una fuerza equivale a Activos, imágenes, M era un SVG. A es igual a k una imagen. ¿Cómo se ve eso? Voy a encender mi servidor NG o inicio de NPM. Y antes de echarle un vistazo, sigamos adelante y arreglemos el CSS. No hablamos mucho de CSS en esto en este taller. No me considero un experto en CSS, pero para esto, no es demasiado difícil de hacer por ellos. Ahí vamos. ¿Entonces esa clase de fotografía de estudiante que puse en la imagen? Voy a darle una altura máxima del 25% del espacio vertical. Entonces no más que eso. Y voy a poner su objeto apto para cubrir. Entonces recortará la imagen, pero aún así ocupará todo el rectángulo. Nosotros hacemos eso. Entonces volvemos a entrar y refrescar la página aquí. No veo ningún error, así que vamos a entrar aquí. Ahí está mi polid el texto así que no veo que haga nada. Pero si hago clic en él, y se puede ver mi cámara. Eso es genial. Usando la otra cámara. Si quiero tomarme una foto. Bueno, no he trabajado muy bien. Vamos a intentarlo de nuevo. Ahí vamos. Y entonces puedo salvarla. Y ahí está mi foto. Entonces si salvo a Jonathan Bennett. Vuelva a entrar. La imagen sigue ahí. ¿Qué tan genial es eso? Bien. Sin aplausos, no nada. Todo bien. ¿Cómo van los demás? Lo siento, estaba en silencio, pero no, eso es genial. ¿Funciona para ti? Sí. Yo tenía la imagen. Fue entonces dice que no se encontró ninguna cámara. Bien. Me da la opción de elegir una imagen. Entonces déjame probar eso y ver. Entonces ahora, si lo digo puedes regresar. W. Muy fresco. Sí. Eso es genial. Eso me gusta. Entonces eso es condensador, esencialmente en pocas palabras Capacitor le va a dar una API consistente. En todos los dispositivos y páginas web. Ahora, no todos los condensadores se conectan, trabajaremos con el navegador de escritorio. Muchos lo harán. Si vas a los enchufes oficiales y luego ellos también tienen enchufes comunitarios, te dirán con qué trabajan. Hay cosas como Face ID que obviamente solo funciona con un producto Apple, y creo que funciona con iPhones o IOS Pero se puede acceder al GPS a través de cualquier cosa. Voy a usar la API del navegador. Yo usaré si estás en un escritorio pop, irá más profundo y usará tu WiFi y si estás en un iPhone, ellos usarán ese GPS. En Android, usará ese GPS. Pero te da una API consistente para que la desarrolles, así no tienes que recordarte bien, Android, tengo que hacer esto o IOS, tengo que hacer eso. ¿Eso tiene sentido? Entonces ahora, Ahora tenemos que hacer. Bueno, antes de seguir adelante, ¿hay alguien que quiera que funcione la cámara, pero aún no lo ha hecho? Toma eso como un no. Entonces ahora llegamos a la parte probablemente de mayor peligro del taller. Porque no tengo diapositivas sobre estas cosas. Este simplemente vivo completamente sobre la marcha. Entonces, como puedes imaginar, es bastante emocionante. Entonces en este punto, tenemos una aplicación en funcionamiento. Y creo que es lo suficientemente bueno para ser puesto en la tienda de aplicaciones o en la tienda de juegos. Así que déjame asegurarme de que tengo la extensión iónica funcionando cargada y ejecutándose. No. Asegúrate de que todo esté bien. Eso está bien. Bien. ¿Dónde está? Ahí está el iónico. Ahí está. Bien. ¿Ya han visto la extensión iónica? Realmente no lo hemos usado porque no me gusta confiar en él necesariamente. Pero hay algunas cosas geniales que puede hacer. ¿Qué quiere que hagamos? Quiere migrar Quiere que agreguemos estas características. Estas son recomendaciones que nos va a dar el plug in iónico. Lo primero que quiero hacer ahora es que quiero agregar un proyecto IOS, debería ser cuestión de simplemente dar clic ahí mismo. Sí, me gustaría agregar soporte IOS a mi proyecto de capacitores. Y me está mostrando en la terminal aquí comandos que se está ejecutando. Bien. Bien. Así que no pudo. No se pudo hundir faltaba WWW. Y sí, siempre me olvido de esto yo mismo. Para hacer una sincronización con condensador, al menos debes construir una versión de producción de tu aplicación una vez. Así que solo ejecuté NPM run build. Entonces, ¿qué son las vainas de Coco? ¿En qué estás acostumbrado a desarrollar? ¿A qué aplicación de escritorio nativa estás acostumbrado? Yo Mac pensé que tal vez eras un desarrollador punto. Oh, bueno, no, soy desarrollador java, así que entonces creo que es equivalente a Maven Es un gestor de paquetes. Bien. O al menos esa es una de las cosas que Maven puede hacer, ¿verdad? Sé que puede hacer mucho. Sí. Bien. Es un CocoaPods, creo que es solo un encargado de dependencias Lo genial es que, a menos que vayas a construir tus propios enchufes de condensador, realmente no tienes que importarte tanto. Pero ahora que hemos construido la aplicación, deberíamos poder sincronizar con condensador. Bien. Y déjame abrirme. Paquete, Jason. Oh, no lo tienen aquí. Bien. esperando algún guión. Así que los scripts de NPM. Bien. Entonces parecía haber terminado. Vuelve aquí. Veamos lo que hizo. Así que la compilación de ejecución de NPM construyó mi aplicación angular iónica y puso todos los activos en la WWW. Entonces esta es toda la aplicación construida. sincronización de capacitores copió toda esa aplicación iónica angular en este proyecto IOS. Entonces este es un proyecto de código X. Técnicamente no tenemos que preocuparnos mucho por esto porque Ionic ha hecho mucho del trabajo por nosotros. Y seré el primero en admitir, no soy un tipo de código X o un tipo C objetivo o un tipo veloz. Simplemente no es algo que alguna vez me haya tenido mucho atractivo. Pero ahora que he construido y sincronizado, puedo abrir este proyecto en Xcode Y tenía miedo de eso. Bien. Entonces mi O F se ha actualizado desde la última vez que ejecuté XCode, lo que significa que tengo que actualizar EXCO, o al menos parte de Ahora, veamos qué hace. ¿Alguno de ustedes está siguiendo en su mac? Sí. Todo bien. Quiero volver a hacer clic en esto. Eso se ve mejor. Bien. Entonces ahí está el código X. ¿Eres desarrollador de Apple? No. No. Estoy registrado como desarrollador de Apple, pero no pago la cuota de suscripción, así que no puedo empujar nada a la App Store. Pero al menos debería poder hacer esto si lo encuentro. Bien. Entonces tengo un identificador de paquete. El fichaje es automático, pero no tengo equipo, así que necesito ir a mi equipo personal. Y eso debería fallar al registrarse porque no se puede el identificador de paquete tiene que ser globalmente único. Bueno, el mío porque uso caminar como mi dominio. Y mi reloj quiere que confíe en mi computadora. Sí, puede. Ven caminando. Llamémoslo Julio 2022. Inténtalo de nuevo. Bien. Por lo que se ha creado un certificado de señalización y un perfil de aprovisionamiento para mí. Entonces en este punto, debería poder Pick un simulador o si quiero, en realidad enchufar mi iPhone real si tuviera un cable Lightning. En algún lugar por aquí. Si tenemos tiempo, voy a seguir adelante y hacer eso. Tomemos Vamos con un iPhone ocho uno de los más pequeños más antiguos. Debería poder hacer clic en Reproducir. Está construyendo. Te dije que el Macbook era rápido, ¿no? Bien. Sí. No vi el código X abierto debajo de mi condensador en el iónico. ¿No lo hiciste? Sí. Yo no tenía eso. ¿Habías hecho la construcción en el fregadero? Sí. Bueno, ¿y ya hiciste el proyecto ad IOS? Sí. Sí. Porque es por eso que tenía esas vainas de coca. Bien. Derecha. Bueno, déjame intentar construirlo una vez más para verlo. Todo bien. Los simuladores se están encendiendo ahora Entonces en el iPhone ocho con IOS 1155. Se puede ver en la parte superior. Si lo puedes ver, eso es pequeño, dice, ejecutando apple en el iPhone ocho. Ahí vas. Con los tres botones. Ahora, te puedo decir que esto va a fallar. No es la aplicación va a funcionar, ¿verdad? Puedo entrar aquí. Puedo marcar presente. Puedo marcar ausente. Puedo irme, puedo cambiar el nombre de Jennifer por Jen. Bien. Y se está comportando como un iPhone Y vamos a decir que Jen nació en marzo del 95 el día 10. Y vamos a salvar a Jen. Entonces ahora es Jen y aún así cumplió el mismo cumpleaños. Puedo eliminar a Troy. Y todo lo que hemos construido en las últimas sesiones de 3.5 se está ejecutando completamente como si se tratara de una aplicación nativa para iPhone. Todavía tenemos que hacer un par de cosas para mejorarlo, pero está funcionando. Entonces, si vengo aquí a Casey, ¿alguien sabe lo que va a pasar cuando haga clic en la foto de la cámara No hay un simulador de cámara, así que no va a hacerlo va a fallar por eso. Probablemente te voy a pedir que elijas una imagen o simplemente mueras. No, simplemente muere. No. Pero creo que la razón por la que murió no es porque no haya cámara. Está justo aquí. Entonces aquí es donde empieza a llegar. Ya no estamos realmente en el reino de los iónicos. Y si vas a la cámara del condensador enchufa documentación, te avisará sobre esto. La cámara no funcionará a menos que le digas código X que quieres pedir permiso para usar la cámara y. Todos lo han visto, ¿verdad? La aplicación X quiere usar tu cámara y luego hay una pequeña frase o dos debajo que eso te dice qué van a hacer con la imagen, o cómo van a usar esos datos. Derecha. Eso es aquí dentro. Eso está en el código X. No se puede hacer esto con ionic y es diferente para Android que para IOS. Es lo mismo. Aún tienes que pedir permiso, pero la forma en que pediste permiso es diferente con Android. Entonces, según recuerdo, déjame matar a la app. Bien. Según recuerdo, está aquí en alguna parte. Estoy en info. Y qué me dicen que estoy buscando. Te falta la descripción del uso del anuncio de Anna Photo Library. Capacidades requeridas del dispositivo. Siempre me olvido de éste. Entonces voy a tomar esto. Voy a volver a las interwebs. Bien. Y dice Apple, un mensaje que le dice al usuario por qué la App está solicitando este anuncio ¿a dónde va? Ahí vamos. Cómo agregar eso en el código x. Así que estamos en info, objetivos IOS personalizados. Eso no lo veo. ¿ Ves eso? No. Por supuesto, cambiaron las cosas con casi todos, aquí está la costumbre siempre comencé. Eso es por aquí a la izquierda. Haga clic derecho en cualquier fila clave y haga clic en Agregar fila. Agregar. Eso se siente. Veo mal, ¿no? No creo que eso pertenezca. Bien. ¿Qué tal los valores de R s? No, me gusta ese e. Bien, ¿qué es eso en la lista? Ly. Ese es el que quiero. Ahí vamos. Eso es lo que quiero. Esa no. Entonces ahora que tengo eso ahí, creo que esto es justo por lo que queremos usarlo. Escriba el valor describiendo por qué su aplicación lo necesita. Aquí, podemos tomarte una foto. Bien. ¿Eso tiene sentido? Bueno, vuelve a ejecutarlo. El simulador sigue funcionando. Y ahora voy al roster. Haga clic aquí, ojalá. Todavía no me gustó. Es por ello que usamos iónicos y nott's faltantes. Vamos a verificar aquí. Se ha ido, ¿ no? No. Aquí en la parte inferior. Aquí tienes. Se suponía que eso estaba dentro de las capacidades requeridas del dispositivo? No. Lo hicieron en el bulto ex el manojo. Lo hicieron aquí en alguna parte. Sí. Entonces, ¿cuál era su valor que tenían? A lo mejor esa es la diferencia. El valor de la clave se mostrará como una descripción del pop up mostrado al usuario, así que escribe el valor describiendo por qué tu aplicación necesita acceder a la fototeca? Eso se ve bien. Vamos a intentarlo. Vuelve a la app. ¿Tienes que construirlo de nuevo? Eso es lo que estaba pensando. Simplemente limpiemos la carpeta de compilación. Y luego vuelve a construir el run it. Oh. Guau. Sí. Todavía está feliz por eso, ¿verdad? Es posible. Oh, también está aquí, ¿no? Es así que está en la lista Info P. Incluso está ahí mismo. Estoy bastante seguro de que no está en la vaina. Supongo que es sólo por aquí. Siempre es divertido lidiar con IOS. Entonces vayamos al condensador. Veamos qué dicen. Mera enchufar. Requiere algo más que eso. Así que hicimos esta, ¿verdad? No. Hicimos este muro. Todo bien. Entonces tenemos esa. Estos son todos iguales, ¿no? Bien. Bien. hacerlos un poco diferentes así sé cuál es cuál. Bien. Vamos a probar eso. Asador dice que necesitamos tres, entonces tenemos tres ahora. Eso no se sentía como si estuviera construido, ¿verdad? ¿Dijías que lo hizo? No. Vamos a probarlo. Ahí vas. Pero eso era lo que necesitábamos. Necesitábamos los tres. Todo bien. Así que intentemos buscar para ver si tengo un sí tengo un cable aquí. Lo que significa que tengo que desenchufar. Ese es el problema con el error de Macbook. Sólo tiene dos puertos. Entonces voy a desenchufar mi alimentación ya que la cosa va a funcionar seis o 7 horas con una batería Estoy en mi iPhone 11. Bien. Ahora que tenemos eso funcional. Ver Tengo mi iPhone 11 aquí para desbloquear para usar los accesorios. Ahora el iPhone de Michael. Sigo compartiendo la pantalla, ¿ verdad? Sí. Sí. Bien. Bien. Así que he seleccionado mi iPhone. Y ahora lo voy a poner en marcha de nuevo. Y creo que Bill lo logró. Michael, está bien. Voy a dejar de compartir por un momento. Quiero probar algo. No. No lo hace ahí está. ¿Qué ves ahora? Ves el iPhone, ¿verdad? Sí. EXCO sigue esperando. Todo bien. Entonces, ¿mientras XCoda sigue esperando? Volvamos aquí. Y quiero hacer pantallas de splash e icono. Bien. Solo he hecho esto desde la línea de comandos con la biblioteca de otra persona. ¿Qué pasa si hacemos clic en eso? No va a funcionar, ¿verdad? Necesitamos seleccionar el archivo, un archivo PNG cuadrado de 10204 que no contenga transparencia Lo que voy a hacer aquí entonces es que voy a volver a Pixabay voy a buscar un icono de la gente Esa no es mascota. Sin embargo, ese probablemente tenga transparencia, ¿verdad? Sí. Todo bien. ¿ Qué más podemos encontrar? Creo que en el pasado, solía portapapeles imagen Eso también tiene transparencia, pero tal vez pueda arreglarlo. Entonces 10204 por 10204. Esa es una extraña. A ver. ¿Qué más sería una buena? Perdón, esa. Bien. 12 80 por 12 80 P y G. Lo descargaré. Ábrelo en vista previa. En realidad a la baja. Vamos con no, no, no. Ve con eso va a funcionar.