Desarrollo de aplicaciones móviles con Ionic y React - Idea para App Store

1. Introducción : comienza aquí: Hola, este es mi Callahan. Llevo usando Ionic para el desarrollo de aplicaciones móviles desde 2014 antes de que incluso fuera lanzado oficialmente. Desde entonces, Ionic ha sido mi ir a la tecnología para construir Mobile APS. Con el lanzamiento de la Versión cuatro en 2019 Ionic creció más allá de sus humildes orígenes como un marco de base angular para hacer APS móviles. actualidad, Ionic trabaja con una variedad de tecnologías Web. Se ha convertido en un ciudadano de primera clase para construir todo tipo de aplicaciones Web. En este curso, nos vamos a centrar en reaccionar, pasando de código cero todo el camino a las puertas APP in place. A lo largo de este curso, vamos a cubrir los aspectos importantes del desarrollo con Ionic y reaccionar. Esta lección abarcará los conceptos básicos absolutos, configurando su entorno de desarrollo para que sea lo más efectivo posible. Terminaremos con una sencilla aplicación hola Iónica saltará a la derecha en la estructura de la aplicación , explicando cómo se dispuso una aplicaciones iónicas. Presentaremos algunos de los simples componentes tú I y crearemos un menú lateral básico para la aplicación demo. La siguiente lección es todo sobre el almacenamiento de aplicaciones. Ionic proporciona un mecanismo de almacenamiento simple que funciona a través de navegadores web y dispositivos. Usaremos esto para mantener datos persistentes de aplicaciones que sobrevivirán reinicios de dispositivos Si no necesita capacidades específicas de hardware distintas de las disponibles a través del navegador Web , puede optar por liberar su aplicación es una Web progresiva o PW A. Si bien la Web se está volviendo cada vez más capaz cada día, algunas funciones aún requieren acceso al dispositivo subyacente en el que se está ejecutando su APP. Esta lección será una introducción a la integración de dispositivos con Capacitor en la lección final se unirá la aplicación que se lanzará a la Apple App store y a la Google Play Store. Voy a hacer algunas suposiciones sobre algunas cosas con las que ya deberías estar familiarizado. Espero que sepas escribir programas y al menos un solo lenguaje de programación. Debe comprender al menos los conceptos básicos del diseño de páginas Web con HTML. Si sabes lo que hizo, es cómo crear un botón HTML. Deberías estar bien. Haremos un uso pesado de JavaScript y mecanografiado, y te ayudará si tienes al menos conocimientos de nivel principiante. También vas a querer un editor de texto o un entorno de desarrollo integrado. Utilizo y recomiendo visual studio Code B s code es un entorno de desarrollo libre y de código abierto y multiplataforma de Microsoft, diseñado desde cero el trabajo con todas las tecnologías se estarán utilizando. Por supuesto, eres libre de usar cualquier herramienta con la que estés cómodo. Una cosa más. Debo dejar claro que esto no es un curso sobre reaccionar. Si bien señalaré aspecto básico de reaccionar ya que corresponden a Ionic, no voy a ir más profundo de lo que tengo que hacer que la aplicación demo funcione Next instalará las herramientas necesarias para que completes la aplicación demo sobre proporcionar instrucciones de Mac OS en este momento estoy ejecutando Catalina, pero el proceso debe ser idéntico en cualquier versión reciente de Mac OS Windows 10. Estas instrucciones también deberían funcionar si estás en Windows Server o incluso ganas a siete u ocho y finalmente, Omán a Lennox. Pero deberías poder seguir junto con cualquier distribución de límites. No sientas que necesitas ver las tres lecciones. Elige el más cercano a tu sistema y mira ese 2. Introducción a la herramienta: macOS: Ionic es compatible con una variedad de plataformas de escritorio. En esta lección, me voy a centrar en Mac OS. Te mostraré cómo instalar las herramientas que uso y poner los conceptos básicos en funcionamiento lo más rápido posible . Querrá asegurarse de tener instaladas todas las herramientas de línea de comandos y compilación antes de escribir cualquier código. Eso es lo que cuidará aquí. Ionic hace mucho uso de know J S, un entorno de tiempo de ejecución basado en script Java que necesitarás obtener y sus herramientas de factura relacionadas en un Mac . Probablemente ya lo tengas, pero nos aseguraremos. Y por supuesto, también necesitarás que Ionic instale estos artículos bastante sencillo. Deberías poder seguir a la derecha en un Mac. La mayoría de las herramientas que necesitas si aún no las tienes, podrían instalarse ahí. Homebrew Homebrew se factura como el gerente de paquetes Max Missing. Hay muchas herramientas y paquetes de tiempo de ejecución disponibles a través de homebrew, por lo que recomiendo instalarlo. Si aún no lo tienes, puedes instalarlo copiando y pegando el comando que se muestra en una página de tonos en cualquier ventana de terminal. Una vez que tengamos cerveza casera, podemos buscar en instalar git, asumiendo que realmente no lo tienes. Entonces primero, veamos si lo tienes, lo cual puedes hacer con el comando git Dash dash version. Si está instalado, verás un número de versión probablemente dos puntos algo. Si tienes una versión que dice Apple, conseguirla probablemente significa que la instalaste a través de códigos X. Herramientas de línea de comandos y esto debería estar bien. Si no tienes get o te gustaría actualizarlo, puedes instalarlo a través de Homebrew. Simplemente emite el brew instalado. Obtener el comando. Esto te dará la última versión apropiada para tu sistema Cuando se trata de anotar y nodo paquete Manager o NPM, mi recomendación es instalar una herramienta llamada Node version Manager o envidia. M. Es un poco más involucrado, pero mucho más flexible a la larga. N V M es una elegancia en una concha. Funciones de script para habilitar el uso más flexible de la nota. Te puedes imaginar que su propósito principal es permitirte instalar y cambiar entre múltiples versiones de nota en NPM al instante. Entonces si sucede que tienes un proyecto que no requiere fecha sino otro que requiere No 12 por ejemplo, es fácil mantenerlos a ambos instalados, sin embargo aún independientes el uno del otro. Las características más importantes de la nota giran en torno a ruta o acceso de administrador o súper usuario. Una vez que te comprometes a envidiar a M, nunca hay razón para usar Sudo. De hecho, ni siquiera necesitas acceso root para instalar en V M. Este es el método recomendado para Mac OS ya que no requiere comandos, no ya en un sistema Mac de stock. Una vez que tienes en piedra, envidia em. Puedes usarlo para instalar cualquier versión de No quieres, en este caso instalará la última versión estable. Simplemente ejecute el comando que se muestra aquí para descargar e instalar el último soporte a largo plazo , o la versión LTs de nota. Porque estoy usando el shell Z en Catalina, tengo que poner esto entre comillas. De lo contrario, piensa que es un nombre de archivo. Hay otros comandos de envidia M disponibles para ti, lo que te permite instalar y usar diferentes versiones de note. Aquí se muestran los más comunes, y los describo con más detalle en la página de lecciones del curso justo debajo de este video. Eso es todo lo que hay a ello. En este punto, tienes todas estas herramientas instaladas y disponibles para ti. A continuación instalará Ionic y creará nuestra primera aplicación. Espero que estés tan emocionado como yo. 3. Introducción a la herramienta: Windows: Ionic es compatible con una variedad de plataformas de escritorio. En esta lección, me voy a centrar en Windows. Te mostraré cómo instalar las herramientas que uso y poner los conceptos básicos en funcionamiento lo más rápido posible . Querrá asegurarse de tener instaladas todas las herramientas de línea de comandos y compilación antes de escribir cualquier código. Eso es lo que se encargará aquí. Ionic hace un uso pesado del nodo Js, un entorno de tiempo de ejecución basado en script Java que necesitarás obtener y sus herramientas de factura relacionadas. Y por supuesto, también necesitarás que Ionic instale estos artículos bastante sencillo. Deberías poder seguir a la derecha en ventanas, si no lo tienes ya. Nota, recomiendo dirigirse a node.js dot org. Cuando llegues, haz clic en el botón verde grande para descargar las últimas LTs o versión de soporte a largo plazo para mí en este momento. Esa versión es 12 alrededor de 16.1, pero puede ser diferente a ti, lo cual está bien. Una vez descargado, deberías poder instalarlo, aceptando todos los valores predeterminados. Siguiente arriba es conseguir. No estaremos haciendo mucho con get al menos no enseguida, pero Ionic lo usa así que debes tenerlo de cabeza para conseguir dash SCM dot com. Busca el botón de descarga y haz clic en él. Una vez descargado, igual que con nota, deberías poder aceptar los valores predeterminados una vez que hayas instalado. Consigue una nota que tienes una opción que hacer. Durante este curso, ocasionalmente haremos uso de la línea de comando. Prepárate una versión del popular shell de Lennix Bash llamado Git Bash. También puedes usar el símbolo del sistema normal de Windows o el uso del show de Windows Power , con lo que te sientas más cómodo. Te prometo que intentaré no usar ningún comando que sea único de cualquiera de ellos. Usando tu comando preferido show, ingresa el comando note con el interruptor de versión dash dash y el comando gift. También con el interruptor de versión dash dash, deberías ver algo parecido a lo que estoy mostrando aquí. Si no, entonces algo salió mal y tendrás que probar de nuevo a los instaladores. Y realmente, eso es todo lo que hay en ello. En este punto, debe tener instaladas y disponibles todas estas herramientas. Siguiente arriba instalará Ionic y creará nuestra primera aplicación 4. Introducción a la herramienta: Linux: Ionic es compatible con una variedad de plataformas de escritorio. En esta sección, me voy a centrar en un bollo para limitar, pero deberías poder seguir junto con cualquier distribución moderna de Linux. Te mostraremos cómo instalar las herramientas que uso y poner los conceptos básicos en funcionamiento lo más rápido posible . Deseará asegurarse de tener instaladas todas las herramientas de línea de comandos y compilación antes de escribir cualquier código. Eso es lo que cuidará aquí. Ionic hace un uso pesado del nodo Js, un entorno de tiempo de ejecución basado en script Java que necesitarás obtener y sus herramientas de factura relacionadas. Y por supuesto, también necesitarás que Ionic instale estos artículos bastante sencillo. Deberías poder seguir a la derecha a lo largo de los límites. Los usuarios tienden a ser todo sobre opciones, así que voy a proporcionar tres opciones diferentes para instalar estas herramientas que puedes elegir , y así todo directamente desde los sitios web de proveedores puedes usar tus distribuciones gestor de paquetes para no. Hay 1/3 opción que discutirá el gestor de versiones de notas. La mayoría, si no todas, estas opciones deberían funcionar para ti, independientemente de la distribución de Lennox que utilices antes de decidir qué método es el adecuado para ti. Veamos si ya tienes instalado o no. Es posible que sí abras una terminal e ingresas al comando conoció la versión dash dash. Si ya lo tienes, tu sistema responderá con un número de versión. Si no como es mi caso lo instalaré en un momento. El tubo de bollo proporciona de manera útil el comando que necesitamos para instalarlo. Veamos qué pasa cuando intentamos eso con. Entra en el comando, vuelve a obtener la versión dash dash. No lo tengo. Pero si lo haces, verás una versión listada aquí y otra vez. Usted quiere amabilidad me dice cómo ir sobre la instalación a través del gestor de paquetes. Te voy a mostrar las otras dos formas, pero ahora mismo vamos a hacer el método de gestor de paquetes. Entonces todo lo que necesito hacer es entrar al comando que se me proporcionó porque estoy usando pseudo . Tengo que usar mi contraseña, y eso es realmente todo lo que hay para ello. Echemos un vistazo a ese comando. Olvídate de nuevo. Ahora que el proceso se completa, debería poder volver a hacer esos comandos y ya verás que me refería a la versión ocho del nodo . No es ahí donde quiero estar así que hay una mejor manera de hacer esto. Comprobemos la versión get, obtenemos versiones un poco viejas también, pero le va a ir bien. La versión de nota me preocupa, sin embargo, así que veamos los métodos alternativos Los usuarios de Lennox pueden instalar no directamente desde el sitio no Js. Si no puedes o no quieres usar tu gestor de paquetes de distribuciones dirígete a conocer J. S no funciona Cuando llegues, haz clic en el gran botón verde para descargar los LTs o versión de soporte a largo plazo para mí en este momento. Esa versión es 12 alrededor de 16.1, pero puede ser diferente para ti, lo cual está bien. Una vez descargado, deberías poder instalarlo, aceptando los valores predeterminados la misma información aplica para obtener. No vamos a estar haciendo mucho con get al menos no enseguida. Pero Ionic lo usa, así que deberías tenerlo de cabeza para conseguir dash SCM dot com. Busca el botón de descarga y haz clic en él una vez descargado, al igual que con nota, deberías poder aceptar los valores predeterminados. Déjame mostrarte una opción más para una nota. Mi recomendación es instalar una herramienta llamada el nodo version manager o envidia em. Está un poco más involucrado, pero mucho más flexible a la larga. N V M es un elegante conjunto de funciones de script shell para permitir el uso más flexible de nota imaginable. El propósito principal de N B. M es permitirle instalar y cambiar entre múltiples versiones de note y NPM al instante. Entonces si sucede que tienes un proyecto que no requiere fecha sino otro que requiere No. 12 es fácil mantenerlos a ambos instalados, sin embargo aún independientes el uno del otro. Para mí, las características más importantes de NPM giran en torno al acceso raíz. Muchas instrucciones de instalación de paquetes NPM que encontrarás en la Web instruidas para usar el pseudo comando para instalar paquetes globalmente porque la ubicación predeterminada para esos paquetes globales son directorios protegidos por el sistema. Aunque poco probable, es posible que hayas arruinado el acceso en tu máquina Lennox, haciendo que esas instrucciones no tengan valor. Una vez que te comprometes a envidiar a M, no hay razón alguna para usar para hacer. De hecho, ni siquiera necesitas acceso root para instalar en B M. Todo se instala bajo propia cuenta de usuario, así que veamos cómo funciona eso. Este es el método recomendado para instalar en VM en Lennox simplemente ingrese cualquiera de estos dos comandos dependiendo de si su sistema tiene curl o w get ya instalado. Quiero seguir adelante y ritmo el comando w get a mi terminal. Ya desinstalé la versión de otro nodo, así que voy a dejar que envidia m se encargue de todo de aquí en adelante. Como puedes ver, fue realmente rápido. Hay una advertencia que me dice que necesito reabrir mi terminal. Eso se debe a que agregó caminos y funciones a mi basho. Déjame hacer eso ahora mismo. Ahora, no tengo nota porque solo instalé y VM Pero si quiero ahora puedo instalar usando envidia m cualquier versión de saber que quiero. Voy a instalar la última versión de LTs, que de nuevo es 12 16.1. Y eso es todo lo que hay a eso. Hay otras envidia, um, comandos disponibles para ti que te permiten instalar y usar diferentes versiones de note. Aquí se muestran los más comunes, y me los describen con más detalle en la página de lecciones del curso justo debajo de este video, y eso es todo lo que hay para ello. En este punto, debes tener todas estas herramientas instaladas en disponibles Next up instalará Ionic y creará nuestra primera aplicación 5. Tu primera aplicación iónica: Lo último que tenemos que hacer es instalar la última versión de la CLI Ionic, y eso haremos con NPM. Una vez que terminemos podremos utilizar este Eli para crear nuestra primera app. Voy a ejecutar estos comandos en mi Mac, pero deberías poder seguir adelante en cualquier sistema operativo que hayamos discutido hasta ahora . Una de las cosas que me gusta hacer en mi directorio de inicio es que tengo una carpeta llamada Get You Ccan It Anything You Want Proyectos Mis proyectos Ionic. Realmente no importa, pero ahora voy a entrar a mi carpeta git y voy a ejecutar NPM install dash G for Global at ionic slash cli a más tardar. No es de extrañar, esto asegurará que obtenemos la última versión absoluta que hay para nosotros y se instaló la versión 6.3, y eso va a ser importante en un momento a través del resto de este curso, voy a se adhieren a la línea de comando. Pero Ionic tiene una herramienta gráfica basada en web herramienta para construir proyectos biónicos rápidamente llamado el asistente de aplicaciones Ionic. Entonces voy a darle una oportunidad a eso ahora mismo y ver qué tipo de proyecto darnos. Entonces aquí está en iónico framework dot com slash start. Me va a pedir un nombre. Vamos a intentarlo. Hola, Ionic. Soy parcial a morado, así que voy a escoger morado. Quiero una plantilla de menú lateral Se ve bastante sencillo y por defecto reacciona. Entonces sigamos. Entonces debido a que ya tenía una cuenta, pude iniciar sesión rápidamente. Yo lo agregué esa parte para ti. Entonces ahora lo que hace es que nos da un comando de instalación personalizado para los Ionics, Eli, y nos advierte que necesitamos tener Ionics Eli 6.3 o superior, Por eso dije que sería importante más adelante. Por lo que de vuelta en mi terminal, he pegado el comando que las manzanas iónicas o nos dieron. Entonces ahora lo voy a ejecutar y ver qué hace por nosotros. Se quiere saber si quiero integrar la app con condensador. Yo sí. Pero aún no quiero hacerlo, así que voy a tomar el defecto de no. Y ahora va a ejecutar una instalación de NPM para mí No debería tardar demasiado, pero voy a editar la parte más larga para nosotros, para que no tengas que sentarte a través de ella. ¿ No te encanta la magia de la edición a estas alturas? Quiere saber si quiero crear una cuenta iónica gratuita. Ya tengo una cuenta iónica, pero no voy a ir de pie conectado a esta vez. Entonces sólo voy a decir que no. Entonces se hace todo lo que necesito bastante sencillo, y lo siguiente que quiere que haga es CD en ese directorio. Se podía ver que ya se creó un repositorio git, y estamos en la Sucursal Maestra. Bueno, sin más preámbulos, vamos a encenderlo y ver cómo se ve. Nosotros hacemos eso con un servicio iónico, y usted debe estar al tanto de eso. La mayoría de las cosas que Ionics Eli sí forza es simplemente delegarlo al aliado marino de la tecnología que estamos utilizando en este caso. Reacciona para que pudieras ver ahí. Está haciendo reaccionar. Los scripts de Dash se inician, y se abre automáticamente una ventana del navegador usando mi navegador predeterminado al host local Puerto 8100 . El uso de fuerza construida se parece a un buzón de correo electrónico. De hecho, eso es lo que dice. Se trata de una bandeja de entrada que abre las herramientas de desarrollador chrome. Te puedo mostrar algo genial sobre la plantilla de menú lateral por defecto de Ionic. En realidad está usando algo llamado una vista dividida de iones, lo que nos da un menú lateral fijo en pantallas más anchas. Pero a medida que la pantalla se vuelve más estrecha, como en los dispositivos móviles, se derrumba a un menú estándar de hamburguesas. Bastante guay, ¿ no crees? Entonces eso lo hará por esto. Acabamos de crear una app a partir de casi nada. Instalamos el Ionic Seelye y utilizamos el nuevo asistente de aplicaciones Ionic para conseguir que esa app se construya en el siguiente segmento. Vamos a echar un vistazo al código detrás de esto y ver cómo está todo unido. 6. Introducción suave a TSX: antes de abrir el código. Yo quiero hablar de TSX por un momento. Los componentes de React están escritos en TSX. Al menos los componentes Ionic React T s X es como JSX, pero con mecanografiado en este momento, eso probablemente no te diga mucho cuando lo veas. Espero que esto intacto no sea demasiado molesto. Si nunca habías visto JSX o TSX antes, puede tomar algo acostumbrarse a JSX Y por extensión, TSX es una extensión a JavaScript que te permite incluir marcado HTML directamente dentro tu código para mostrarte de lo que estoy hablando. Considera este fragmento de código. Empezamos con una matriz de frutas que deberían parecer bastante normales para cualquiera familiarizado con JavaScript. Pero luego mira lo que hace y regresa de inmediato. HTML. Por lo que tenemos un div que contiene una H un párrafo, y cada dos y una lista nórdica dentro. Esa molesta lista ordenada de cosas se pone un poco más interesante. Hacíamos referencia a la matriz de frutas y llamamos a la función de mapa de matriz. La función de mapa toma una función de flecha que acepta cada elemento ya que itera sobre la matriz. Aquí estoy asignando ese elemento de matriz. El letra F Normalmente no recomiendo nombrar variables de esta manera. Pero cuando tengo una sola función de flecha con una sola línea de código como lo hago aquí, creo que es bastante obvio lo que está pasando. Por lo que cada elemento de la matriz frutal se mapea a un aliado con el fruto de cada elemento de la lluvia. Observe las llaves, sin embargo, sin embargo, rodeando la llamada al mapa de puntos frutales. Eso es una indicación para TSX de que vamos a ejecutar algún código aquí. Piense en ello esencialmente como una función de reemplazo. En este punto, dentro del pozo, este bloque va a ser reemplazado con la ejecución de lo que hay dentro de él. Sucede lo mismo dentro del aliado. En lugar de mostrar un valor constante, vamos a evaluar el valor de F y reemplazar esa expresión de ortodoncia actualmente por el valor. En ese punto, prometo que esto se hará mucho más claro a medida que avancemos. No quería que vieras el código del reactor iónico por primera vez y no por lo menos han tenido esta breve explicación. Ahora activemos el código V s y echemos un vistazo a lo que estamos tratando en la app de rial. Se generó fuerza la app iónica 7. Visita guiada a la aplicación: Ahora quiero pasar algún tiempo revisando el código que se generó para nosotros. Considera esto una visita guiada del código Ionic React que las manzanas o simplemente nos dieron de vuelta en mi terminal. Hay un par de comandos a los que voy a entrar ahora que tal vez quieras tomar nota . 1er 1 abre código de estudio visual en el directorio actual, y lo haré con el código punto DOT siendo el directorio actual, y el siguiente es una opción al servicio iónico. Eso no provoca que el navegador se abra automáticamente. Y ese es el interruptor Dash B. Si bien eso se está configurando en rooming, sigamos adelante y miremos algo del código que se generó para nosotros. First Stop va a ser el Ionic Config. Archivo Jason. Aquí no hay mucho. Tenemos el nombre de la aplicación y objeto vacío de integraciones e integraciones es como Cordova o condensador, y se podría ver el tipo de reaccionar a continuación. Echemos un vistazo al archivo index dot ts X. Este es el punto de entrada programático de aplicación. Se puede ver que importamos reaccionar Dom, y lo que reacciona Dom es una biblioteca de alto nivel que proporciona métodos para el modelo de objetos de documento HTML . Y esto se llama desde arriba. Nivel más de la aplicación. Lo único que estamos haciendo con él es llamar a la función render. La función render toma dos parámetros. Se necesita un objeto para ser renderizado. En este caso, es la APP etiquetada el componente APP. El segundo parámetro es un elemento en la página cuya ruta de ideas Así que aquí solo estamos pasando un JavaScript normal get element by I d function. Entonces ahora dónde está ese elemento raíz para encontrar que está por aquí en el índice público html punto en la parte superior, dentro de la etiqueta de cabeza. Ahí hay un montón de metaetiquetas que el equipo iónico ha dedicado mucho tiempo poniéndose bien. No te recomiendo que te metas con ellos. Entonces aquí abajo en el cuerpo, aquí está la pieza importante. Aquí está la ruta I D que estábamos buscando. Es lo único que hay en el cuerpo. Entonces si piensas un momento atrás, vamos a conseguir ese desarrollo y reemplazarlo por el componente APP. Ahora probablemente estés preguntando, ¿Dónde está el AB Caponi? El componente APP está en app dot tsx app dot ts X está importando muchas cosas. Nos saltaremos todas las importaciones y simplemente desplázate hacia abajo hasta donde se define el componente en sí. Y aquí es donde realmente comienza la aplicación. APP se define como una función de flecha constante del tipo react dot fc. Entonces, ¿de qué se trata todo eso? FC es la abreviatura de componente de función. Básicamente, esta es una función que devolverá algún HTML. Caminemos por este archivo en esta función para ver qué significa. El primero que vemos es una llamada a la función de estado de uso. Esto es un gancho. Si has oído hablar de que los ganchos reaccionan siendo toda la rabia, esto es lo que son. You state le permite agregar sorpresa de estado a los componentes de función sin estado de otra manera . Toma el estado por defecto como su parámetro. En este caso, estamos pasando una fuerza vacía. Devuelve una matriz que contiene dos elementos. El primer elemento es el objeto que contiene nuestro estado. En este caso, es la página actualmente seleccionada, por defecto a una fuerza vacía. El segundo elemento de la matriz es una función que podemos utilizar desde dentro del dedo del pie del componente. Alterar este estado al usar ganchos para administrar tu estado, se aconseja. Nunca cambie directamente la variable de estado. Entonces, al mirar a través de este código, no verá ninguna tarea a la variable de página seleccionada. Considéralo de sólo lectura, aunque técnicamente no lo es. Entonces, ¿qué está siendo devuelto por esta función? Y para esto quiero superponer el código encima del navegador para que podamos ver qué se está renderizando con cada pieza. Bueno, primero, tenemos una app de iones. aplicación Ion es el componente iónico raíz que todas las aplicaciones deben usar. Dentro de eso, no tenemos router de reacción de iones. Esta es la envoltura delgada de Ionics alrededor del router React estándar. Los routers React. ¿ Qué te permite crear aplicaciones multipaginadas con transiciones de páginas ricas en lo que realmente es una aplicación de una sola página dentro del ojo en el router React? No tenemos dolor de división iónica, creo. En el último video clip, me referí a una vista dividida de diseño. Nombre técnico del componente es poseo dolor split. Este es el diseño que te da ese menú de barra lateral que colapsa automáticamente ahora dentro del propio dolor dividido. Tenemos ese menú y puedes ver que el menú tiene un atributo llamado Página Seleccionada y lo estamos configurando al valor de nuestra página seleccionada. La variable de estado es un hermano inmediato al componente de menú. Contamos con una salida de enrutador iónico. Por lo que aquí es donde aparece el contenido de tu página. El menú está apagado a la izquierda, y la salida del router iónico contiene el resto de su aplicación de su contenido. Y justo dentro de eso, definimos algunas rutas. Piensa en una ruta como un euro. Entonces dado un camino que comienza con página de barra, seguido de otro identificar aire y el colon significa que vamos a llamar a eso identificar su nombre, sea cual sea realmente ahí. Por lo que podría ser la bandeja de entrada página slash hacia fuera libros. Papelera, etcétera también pasaban a la función Route Orender y la función Orender simplemente significa ¿qué queremos pasar cuando se empareja esta ruta e intenta renderizar? Por lo que esa también es una función estrecha. Se necesita un conjunto de propiedades dentro de esa función que llamamos conjunto de página seleccionada. Recuerda, no queremos establecer directamente la página seleccionada escribiendo a la variable, Así que llamamos a la función de estado que nos fue devuelta. Por lo que fijamos página seleccionada al parámetro U. R L, cual fue pasado a través de apoyos esa segunda parte de la ruta, que se llama nombre. Y entonces lo que hacemos es devolver un objeto de página o el componente de página pasando en las propiedades que nos fueron dadas usando ese operador de spread. Lo que eso significa es que sean las propiedades que se pasaron a nuestra ruta, vamos a pasar y renderizar ese componente de página con las mismas propiedades y luego finalmente exactamente igual. Es cierto, simplemente significa que sólo coincidimos con esta ruta si realmente es barra barra barra barra barra alguna otra palabra . Esto tendrá más sentido si empezamos a modificar estas cosas. Por último, tenemos una ruta llamada slash. Esta es la ruta predeterminada. Si nada más ha entrado, simplemente iban a renderizar un redireccionamiento para barra inclinada página bandeja de entrada. Entonces, ¿qué es exactamente una página? Como se podría adivinar, es otro componente. Echemos un vistazo al archivo de página dot ts X. Consiste en un componente de función que devuelve un montón de Marco Iónico. La principal diferencia aquí es que el componente de función es un genérico de tipo route componente props, que es en sí mismo un genérico. Esos airean esos soportes angulares. Si no estás familiarizado con ese estilo en particular, Esto es lo que permite que el router pase esos parámetros de ruta. En este caso, se espera que los apoyos de ruta contengan solo un nombre que pasa a la función de flecha como la coincidencia de valor. Mirar hacia abajo un poco casi escondido en esa selva de Componentes Iónicos es un contenedor explorar . Voy a dar click derecho sobre él y elegir Ir a definición, y seleccionaré éste un doble clic. También podría haber presionado F 12 en mi teclado. El contenedor explore es otro componente de función personalizada, que también acepta algunos accesorios de contenedor. Este es mucho más sencillo, sin embargo, y que sólo contiene algún HTML simple con sólo una sola expansión variable dentro de esa fuerte tecnología. Por último, echemos un vistazo al menú cerca de la parte superior. El menú define una interfaz de página APP utilizada para contener algunas propiedades comunes sobre una página como sus iconos U R L dan derecho debajo de eso, es una matriz de páginas, por lo que ahora se ve de dónde vienen. A continuación tenemos esa lista de etiquetas que podemos ver en el menú, y justo debajo de eso está el mercado. El menú en sí está construido con un ojo en la lista un componente diseñado para dar formato a los elementos en, Bueno, lo adivinaste una lista. En la nota de iones se proporciona lo que parece ser un encabezado. Después llegamos a algún interesante abrigo. A la función de mapa de matriz se le llama en la matriz de páginas APP para transformarla en un Siris de componentes de alternancia de menú ion , que se utilizan para alternar un menú abierto o cerrado dentro del ojo en el menú. Toggle no es ítem de ion, que es otro componente de iones, que se utiliza para agrupar otros componentes juntos en este caso, y yo en icono y una etiqueta de ion, ambos de los cuales deberían ser bastante autoexplicativos. El elemento ion tiene un enlace de enrutador atributos establecidos en el valor de las páginas actuales. Estás fuera. Esto le dice al router Ionics que cambie a esa página cuando se haga clic. Otra cosa que quiero señalar en el ítem de iones es un atributo llamado Nombre de clase que se establece en el valor de algún código que se ejecuta. Entonces recuerda página seleccionada de app dot ts x Bueno, esto es lo que hacemos con ella. Lo que está diciendo este código es, si las páginas seleccionadas son iguales al título de la página, entonces vamos a establecer el nombre de la clase a la palabra seleccionada. De lo contrario, lo vamos a poner en una cadena vacía. Y esa clase de lo que se encarga de resaltar los elementos del menú debajo del menú es otra lista generada de la misma manera es el menú. las diferencias. Utiliza la matriz de etiquetas y no contiene enlaces de router. Ahora, antes de que terminemos por completo, quiero hacer un par de cosas divertidas que harán en el siguiente video. 8. Una cosa más reciente: Ahora, antes de dejar esta app hola Ionic, hagamos un par de cosas divertidas. ¿ Cómo crees que podrías personalizar esa lista de páginas? Si dijo, modifique las páginas de la APP alrededor, dése una palmadita en la espalda. Noté que no hay página de correo enviado, así que vamos a crear uno realmente rápido y ver qué pasa. Pongámoslo justo entre la bandeja de salida y los favoritos. Entonces vamos a seleccionar el objeto de la bandeja de salida, Copiar y pegar una nueva versión justo después. Ahora cambia la segunda incidencia de los elementos de descenso de la palabra outbox y cambia la o l dos barra barra barra barra inclinada enviada. Dejemos solos los dos iconos. Microsoft Outlook utiliza ese icono de avión de papel para los elementos enviados. Entonces, en cambio, sigamos adelante y guardemos el archivo. Ahora mismo, aquí es donde se pone divertido. Tan pronto como hayas guardado estos cambios, la aplicación se reconstruirá automáticamente, y el navegador se volverá a cargar para reflejar esos cambios. Pero ahora tenemos un problema. Tenemos dos páginas con el mismo ícono. Vamos a seguir adelante y cambiar el icono para la caja de salida dos álbumes esquema para IOS y álbumes Sharp para MD y para tu uso de código de estudio visual, lo que verás es que automáticamente reconoce a aquellos identifican IRS y ofrece importarlos para ti. Y eso es parte de la insinuación de código fuertemente tipada que obtienes de Ionic React y de nuevo a medida que guardamos la página, el icono cambia apropiadamente. ¿ Qué crees que pasará si ahora haces clic en el nuevo menú enviado? No creamos una nueva página ni una nueva ruta. Entonces, ¿conseguiremos un 404? No. El componente de página se renderizará con su nombre establecido en la parte de nombre de la ruta, cual se envía. Esto se debe a que el componente de página en sí es un objeto bastante genérico. No todas las páginas estarán tan limpias y te permitirán reutilizarla así. Pero haremos uso de este patrón en capítulos posteriores del curso. Si quieres ver de dónde salieron esos iconos, visita I am icons dot com para obtener más información sobre los componentes, puedes hacer clic en el enlace de componentes justo en medio de la propia app hello Ionic, y eso es un envoltorio para esta lección y este capítulo, deberías tener un entorno de desarrollo iónico completamente instalado saber crear una nueva aplicación Ionic reaccionar e incluso hacer algunas pequeñas custom is ations. Así que adelante, regocijense en su nuevo poder. Juega un poco entre ahora y la siguiente lección espero verte allí pronto. 9. @10Dance : la aplicación de Demostración: Hola, soy Mike Callahan. En este capítulo, vamos a construir una U I. Usando HTML y el marco iónico. Empezaré mostrándote una demo de la aplicación terminada y luego gradualmente la construiré desde cero en las próximas lecciones que la aplicación estará construyendo en todo. El curso se llama un baile 10. Se trata de una aplicación de asistencia diseñada originalmente para ayudar a los maestros de escuela dominical a realizar un seguimiento de los alumnos en sus clases. En un principio, la Apple se compone de la página principal de tres páginas, una página de lista de clases y un detalle de estudiante. Página a un lado, Menu permitirá a los usuarios navegar fácilmente entre el hogar en las páginas de roster de clase. Revisaremos cómo se construye el menú y cómo se configura la navegación para pasar de página a página. Naturalmente, las páginas de inicio donde comenzará la aplicación. Aquí no hay mucho más que un componente de tarjeta iónica. Revisaremos los conceptos básicos de este componente para mostrar una imagen y alguna información de texto sobre la aplicación. En la página del roster se muestra el estudiante registrado a la clase y se contiene la mayoría de los opositores iónicos que usarán. A los estudiantes se les muestra colectivamente usando una lista de iones, con cada ítem de la lista que consta de ítems de ion i n botones, soy iconos y más. Pasaremos la mayor parte de nuestro tiempo en el capítulo que cubre esta página ya que llenamos su funcionalidad con hojas de acción, alertas y notificaciones de tostadas. Por último, la página de detalles del estudiante es donde podemos ver y editar diversos detalles sobre un solo estudiante eventualmente usará esta página para discutir formas iónicas. En este capítulo, Todo lo que haremos es diseñar los componentes y comprarles algunos datos a ellos. En cada paso del camino, explicaré los componentes que he seleccionado y luego proporcionaré el código que los implementa . Espero que estés tan ansioso como yo, así que empecemos. 10. Crea la nueva aplicación: De acuerdo, ahora que ya has visto lo que vamos a construir, zambullémonos y pongamos en marcha el proyecto antes de que empiece cualquier nuevo proyecto Ionic . A mí me gusta asegurarme de que estoy en las últimas dinámicas, Eli. Entonces hagámoslo Primero. En la terminal de su elección, ingrese al Command y PM Instale Dash G for Global at ionic slash eli A más tardar. Si ya estás en la última versión, no se instalará nada. Siguiente ejecuta el Comando de Inicio Iónico cuando se le pregunte. Seleccione el marco que se utilizará a continuación. Proporcionar el nombre del proyecto. Yo lo llamo 10 Danza. Es un juego de palabras que conozco, y es horrible. Selecciona la plantilla en blanco para este estará implementando un menú lateral, pero prefiero que lo construyamos desde cero. Además, esta manera se estará eliminando mucho menos código de calderilla. No estaré trabajando con ese flujo, así que todos los internodos conectándolo con Maionica cuentan. Una vez creado el proyecto, podemos abrirlo en el I D para echar un vistazo a su alrededor. No hay mucho aquí porque usamos la plantilla en blanco. realidad solo hay una página de inicio que está bien, porque la vamos a construir bastante rápido. También podemos volver a la terminal y encender un comando de servicio Iónico rápido y echar un vistazo a cómo se renderizará. Aquí tengo cromo que me muestra cómo podría parecer volver a correr en un iPhone. No hay mucho contenido para hablar, así que sigamos adelante y cuidemos eso de inmediato. 11. Modificación de la página de inicio: Lo primero que quiero hacer es exprimir la página principal ya que es la página de aterrizaje del ábside. No habrá mucho contenido, sólo algunos textos y una imagen dentro de una tarjeta iónica. Y I on Card es un componente diseñado para envolver piezas básicas de información por defecto. Una tarjeta tiene un borde gris, bordes redondeados y una sutil sombra de gota. Al igual que con todos los componentes iónicos, su estilo visual cambiará ligeramente cuando se renderiza en un Android frente a un dispositivo IOS. Las tarjetas pueden ser tan simples o tan complejas como quieras que sean. La tarjeta que imagino para la página de inicio bien se ve similar a ésta, consistente en una imagen seguida de un encabezado de tarjeta que contiene tanto de subtítulo como de un título. Y por último, un breve párrafo intra. Vamos a construir esa página ahora mismo junto a esta lección es una imagen que estaré usando en la página principal. Descarga esa imagen ahora y déjala caer en una nueva carpeta. Bienes Públicos Imágenes. Llámalo aula dot J pic open home dot tsx y borra todo dentro del ojo en etiqueta de contenido. Cambia el valor dentro de la etiqueta de título de ion de dedo en blanco a casa. A continuación, elimine la importación de componentes de contenedor de exploración en la parte superior del archivo mientras estamos en ello. Eliminemos el componente en sí, que se puede encontrar en la carpeta de componentes de origen. Eliminar ambos archivos TSX y CSS en el contenido iónico ahora vacío en un componente de tarjeta iónica. Si estás usando código V s, debería ofrecer importar los componentes para ti automáticamente. De no ser así, tendrás que asegurarte de hacerlo tú mismo importando cada componente que utilices desde en slash iónico reaccionar dentro de la tarjeta iónica en una etiqueta de imagen HTML estándar con la fuente establecida ese archivo que acabas de descargar, que deben ser imágenes de activos, Aula Dodge, APEC. Para ser un buen ciudadano, también se debe proporcionar un altar atributos. Estoy usando la palabra aula. Al parecer no importó tarjeta iónica, así que voy a hacer eso. Ahora hagamos una pausa aquí y veamos cómo se ve. Entonces aprovecharemos la recarga en vivo mientras terminamos la página. Quiero mostrarte una característica realmente genial del código S, asumiendo que lo estás usando. De lo contrario, ingresa los comandos en cualquier terminal que prefieras. El código V s tiene un terminal incorporado al cual se puede acceder presionando control Volver tick. Esa debería ser la llave al lado del uno, mantendré abierta esta terminal la mayor parte del curso, para que no tengamos que rebotar tanto dentro de la terminal. Ingresa el comando NPM. Arranque. Entonces ahora hemos estado usando Ionics sirven, pero quiero que empieces a acostumbrarte a usar NPM es tu script runner. No importa tanto en este momento, pero eventualmente confiaremos en PM para hacer tareas más complejas. En cuarto lugar, por conveniencia, también voy a tratar de mantener abierto el navegador y tener todo girando en pantalla completa juntos, vuelta en el código y un componente de cabecera de tarjeta iónica por sí mismo. Esto no hará mucho así de inmediato dentro que en un subtítulo de tarjeta de iones con el texto Gestor de asistencia de aula e inmediatamente después de eso y yo en título de tarjeta con el texto a las 10 Danza. No tienes que deletrearlo de la manera tonta que he hecho. Si no desea guardar el archivo y asegurarse de que renderiza si no se aseguró de que el encabezado de la tarjeta iónica envuelva el subtítulo titulado Elementos y busque unclos html tax. En mi caso, dejo que el NPM comience a morir, por lo que necesito ponerlo en marcha de nuevo después de que los encabezados de la tarjeta ion etiqueta de cierre en una etiqueta de contenido de tarjeta ion . Y dentro de eso, una etiqueta de párrafo HTML normal. Puedes poner todo lo que quieras dentro de eso, guardar el archivo y comprobar los resultados. Debería parecerse mayormente a lo que tengo aquí. Hagamos una cosa más ahora antes de salir de la página principal. Pongamos en un enlace a la página de roster, que construirá poco después de la etiqueta de párrafo en un ataque vinculado de enrutador iónico con dos atributos y atributos H ref establecidos para slash roster y un redondeo atributos de dirección establecidos para avanzar dentro de esa etiqueta. Asegúrate de poner algo de texto. De lo contrario no verás un enlace. Esto creará un hipervínculo dentro de la tarjeta que, al hacer clic, nos llevará a la página de roster. Y es animación será una animación hacia adelante, siendo definida por la propia plataforma, ya sea Android o IOS. Al guardar la página, se puede ver el enlace renderizado. No obstante, hacer clic en él te llevará a una página en blanco. Todavía no hemos construido la página del roster, así que lo haremos a continuación 12. Añadir la página de la lista de listón: Por ahora, deberías estar cómodo agregando etiquetas iónicas a una página, pero no hemos creado una página nueva desde cero la misma. Afrontaremos eso ahora, pero creando lo que posiblemente será la página más complicada de la aplicación de vuelta en el editor de código o en la terminal. Tu elección. Crea un nuevo archivo en la carpeta Páginas llamado roster dot tsx. Dentro de este archivo empezará creando la página más simple que podríamos imaginar en cualquier página que creemos. Primero tenemos que importar el espacio de nombre de reaccionar desde la Biblioteca React. A continuación, necesitamos un nuevo componente funcional. Reacciona a FC por corto llamado roster para representar la página. Un componente funcional debe devolver alguna marca hacia arriba, Así que por ahora, sólo devolveremos un párrafo. Entonces, para poder reaccionar, para poder renderizar la página, necesita ser exportada, lo que hacemos con la línea de roster por defecto de exportación. Ahora cualquier otro módulo puede importar el componente de la lista. Si estás pensando que esto permitirá que la página de roster se renderice al hacer clic en el enlace de la página de inicio, no necesitaremos importarla a la app y proporcionar una ruta abierta apt out TSX. Esto lo vimos en nuestra visita guiada en el último capítulo. El enrutamiento en esta aplicación es mucho más sencillo de lo que vimos antes. Y para mí, más simple es mejor. Añadamos una nueva ruta agregando otra etiqueta de ruta después de la ronda de inicio de la slash. El camino debe ser listón de corte. El componente debe ser de lista. Asegúrese de que el componente de la lista se importe en la parte superior del inserto del archivo. Exacto a verdadero. Ahora, En cualquier momento que solicitemos la ruta del roster, se renderizará la página del roster. Guarda el archivo y pruébalo. El enlace ahora funciona. No es mucha pagina, pero lo arreglaremos en un poquito. 13. Gancho para estudiantes personalizados: antes de fundar la página del roster necesitamos conseguir que algunos estudiantes muestren más adelante querrán atar la lista en un día para almacenar de algún tipo, pero no necesitamos hacer eso solo para que se muestren algunos datos en la página. Para eso, voy a usar un gancho de reacción personalizado, como vimos en la visita guiada. React Take es una sencilla función de JavaScript que devuelve dos valores dentro de una matriz lugar de perforar en cómo funciona Hook. Simplemente podemos envolver uno normal con una matriz de datos y exponerlo a nuestra página de roster. Tendrá más sentido es que lo construimos, creamos un nuevo archivo en fuente llamado Student dash hook dot ts. Dentro de este archivo se creará cualquier newme, una constante de interfaz y una función. Este e newme es una conveniencia que usará para marcar a un estudiante está ausente o presente. A continuación, crearemos un objeto de estudiante como interfaz. Recuerda, las interfaces no existen en JavaScript y desaparecen por completo al construir. Su único propósito es que nosotros habilitemos la finalización del código de comprobación de tipo de parámetro e intel un sentido dentro del código. Introduce esos signos de interrogación en la mayoría de los campos indican que esos tacones son opcionales. Por lo que para crear un objeto de estudiante válido, necesito proporcionar al menos un I. D. D.Un nombre y un apellido. En este punto, no sé todo lo que debe contener un objeto estudiantil, pero esos campos deberían ser suficientes para nuestros propósitos. Ahora vamos a crear una matriz de estudiantes que podemos utilizar en lugar de una base de datos. Por ahora, lo llamo Mark Students. Ahora por el gancho personalizado. A la función que estoy exportando se le llamará use students. Por convención, todos los ganchos comienzan con la palabra uso dentro de la función. Simplemente estoy llamando reacciona tu función estatal, pasando la matriz de estudiantes simulados como su valor predeterminado, devolviendo indirectamente lo que tú declaras nos proporciona. Es engañosamente simple, pero eso es sólo porque no hace mucho. Ahora volvamos a la página de roster y hagamos uso de ella 14. Estador de estudiantes: vuelta en la página de roster. Tenemos que conseguir una referencia al gancho. Acabamos de crear justo dentro de su función de roster en una línea para llamarlo Recordarte Los estudiantes es esencialmente un pase a través para reaccionar. Usa la función de estado, pero envuelve y oculta esa matriz simulada. nuestra página de roster no le importa de dónde vienen esos estudiantes, así que no se lo diremos. Ahora que tenemos algunos alumnos, vamos a enumerarlos en la pantalla. Elimina esa etiqueta de párrafo y en un ojo en la etiqueta de página. Recuerda, todas las páginas de Ionic React necesitan un ojo en la etiqueta de página como su componente raíz. Como siempre que ingresamos estas próximas etiquetas de componentes en la página, debes asegurarte de que se estén importando de Ionic React. A continuación, crearemos el encabezado de página en cierta etiqueta de encabezado ion. Ha sido una etiqueta de barra de herramientas de iones dentro de eso en una etiqueta de título de ion. Dentro de ese conjunto los títulos de iones texto a roster. Espero que encuentres que el encabezado Ion es familiar, como lo hemos visto en la página principal y también durante la visita guiada inmediatamente después del encabezado ion . Necesitamos un contenido de iones dentro del contenido de hierro. Introduzcamos un nuevo componente. El listado de iones y I Am List es otro componente de contenedor diseñado para envolver múltiples tipos de artículos de una manera visualmente consistente. Yo en las listas contienen cosas llamadas ojo en los ítems, que a su vez, rabino en las etiquetas altas en los botones, iconos de iones, campos de entrada de forma y así sucesivamente. Usaremos todos esos y mawr durante este curso. Yo en las listas también se puede utilizar para implementar elementos deslizantes, que probablemente has visto antes. Estas son opciones que solo aparecen cuando desliza hacia la izquierda o hacia la derecha sobre un elemento que revela una opción menos utilizada o potencialmente peligrosa, como eliminar de nuevo en el código. Inmediatamente dentro de la lista de iones, debilitar iterado sobre la matriz de estudiantes utilizando la función de mapa de matriz. Necesitamos proporcionar una función estrecha para mapear que describa lo que queremos hacer con cada alumno en la matriz. Entonces piénsalo así. Estamos mostrando una lista de longitud desconocida, pero cada elemento de la matriz se mostrará usando la misma plantilla dentro de los mapas. Función Aero devolverá alguna marca para arriba. Empezaremos con el elemento de ion deslizante componente ion ítem deslizante nos proporcionará una nueva artículo, opción de artículo, deslizar o diapositiva. Dentro de eso habrá una etiqueta de ítem de ion. Este componente encapsulará todo el elemento de la lista, cual implementamos con un ojo en el componente del ítem dentro del ítem de ion en un ícono de ion y una etiqueta de iones como hermanos, dijo la ranura de icono. Atributo a iniciar y el atributo de icono a contorno de persona y de nuevo, no olvides importar tus iconos o no funcionarán dentro de la etiqueta de iones. Enlazar algún texto a los alumnos últimos en nombres separados por una coma junto a ellos. Creemos dos contactos más de ion I, que renderizaremos condicionalmente con base en la condición del estudiante de ausente o presente. El 1er 1 es para presidente, y lo pondremos en el ícono I. El segundo es exhibirse cuando el alumno está ausente. Entonces para ese, usemos el contorno ojo fuera, que es un contorno de un ojo con una línea a través de él. El modo en que renderizamos los iconos condicionalmente es envolver toda la etiqueta de icono de ion y un script Java . Expresión lógica. Comparar el estatus de los estudiantes con el valor de presente o ausente, seguido de la lógica y el propio operador, seguido del icono iónico. Las reglas de cortocircuito de JavaScript evitarán que se evalúe la segunda mitad de la expresión si la primera mitad evalúa a falsa nota que es totalmente posible el estatus de los estudiantes no sea ni valor porque el campo de status es opcional. En ese caso, ni yo vengo se renderizará, que es lo que queremos. Guarda el archivo ahora y ve cómo se ve. Si todo salió bien, espera que todos nuestros alumnos se muestren. Terminemos esta lección terminando ese elemento deslizante inmediatamente antes de la etiqueta de cierre deslizante ítem iónico . Añadamos una etiqueta de opciones de ítem de iones con los atributos laterales establecidos para terminar. Esto significa que queremos que la opción aparezca al final del ítem, es decir, cuando lo deslizamos hacia el principio del ítem, poco aparecen dentro de esa etiqueta en una opción de ítem de ion único Tech. Asegúrate de que te importa el singular plural aquí. El plural tag es el conjunto tecnológico externo, color de éste al peligro, que por defecto es un color rojo anaranjado de aspecto aterrador. Nos ocuparemos del manejador de clics más adelante, así que por ahora simplemente dijo el valor de las etiquetas a la palabra eliminar, guardar el archivo y refrescar la página. En este punto, la única interactividad es un propio deslizador. Por lo tanto, haz clic y arrastra un elemento hacia el principio del elemento. Debería ver el botón de borrar. Puedes hacer clic en él. Se comporta visualmente, como cabría esperar, pero aún no hará nada. En la siguiente lección, vamos a cablear algunos nuevos comandos a esta página para que podamos gestionar nuestro roster de estudiantes. 15. Añadir funcionalidad a el rango de estudiantes: si fueras profesor y esta fuera una verdadera clase de alumnos, hay una serie de cosas que te gustaría poder hacer con tu app. Algunas de esas cosas están marcadas ausentes o presentes. Acceda a una página de detalles para ver o editar información que no está presente en la lista. Acceda a una página de detalles para ver o editar información que no es visible de la lista. Sacar a un alumno de la clase con las advertencias correspondientes. Por supuesto, en esta lección, vamos a realzar la U Y de la página de roster para hacer todas esas cosas. Lo primero que quiero hacer es agregar un menú a cada alumno en la lista de ojos. Podemos o bien crear primero el menú o el botón para iniciar el menú. Primero, vamos a crear primero el menú. Para eso, vamos a usar una hoja de acción iónica. En Hoja de Acción es un menú que muestra algo así como un diálogo. A menudo contiene al menos dos botones de acción pero generalmente mawr que están relacionados contextualmente de alguna manera. En nuestro caso, el contexto es el del estudiante actualmente seleccionado y yo en hoja de acción es Ionics implementación específica renderización hoja de inacción que automáticamente mira en casa en un iPhone o un android. Los botones y la hoja de inacción pueden contener un rol que puede ser destructivo o cancelar. Destructivo se utiliza para indicar que algo permanente está a punto de suceder y a menudo se utiliza para la operación de eliminación en dispositivos IOS. Botones con el rodillo destructivo renderizado de manera diferente al resto, generalmente en rojo. Un botón cuyo rol es cancelar siempre se renderizará último en la parte inferior de la hoja. Este botón no debe tener otro propósito que desechar la hoja. Sin ninguna acción tomada. El botón y la inacción que puede tener texto e iconos, pero la forma en que los definas es diferente a un componente normal I unbutton, nuestra hoja de acciones incluirá botones para marcar a un estudiante está presente o ausente, eliminar a un estudiante o cancelar el acción y no hacer nada. Para ello, necesitamos hacer un poco de configurar Primero en roster dot tsx. Vamos a necesitar un nuevo gancho y un objeto para representar a una estudiante vacía para controlar cómo acción aparecerá en la parte superior del componente funcional. Crea un nuevo objeto de estudiante llamado Empty Student, pero dijo que son tres campos obligatorios para vaciar cadena. A continuación, haga un llamado al reaccionar. Usar la función de estado. Pasando el objeto de estudiante vacío como su nombre predeterminado. The Return Values Estudiante seleccionado y establece estudiante electo Este es un gancho que nos permitirá seguimiento de qué alumno está seleccionado y ayudarnos a mostrar y ocultar la hoja de acción que ha necesitado. Siguiente. Crear dos funciones para manejar el evento click Ingresó la licencia Un estudiante de una lista. El 1er 1 es Eliminar Estudiante y el 2do 1 Llamemos Click Student Delete Student filtrará al alumno seleccionado de la matriz actual de estudiantes y luego pasó eso para establecer a los estudiantes. El funcion. Click student llamará sets estudiante electo pasando a este estudiante seleccionado. Ahora por fin es hora de que agreguemos el marcado de hoja de acción. Coloque una etiqueta de hoja de acción de iones justo debajo del ojo en la etiqueta de cierre de listas. Esto lo convertirá en un hermano de la lista de iones. Esta etiqueta tendrá un montón de actriz pero sin componentes infantiles. El primer atributo a establecer es el es Abierto después dijo su valor a la expresión vinculante de bang bang selected student dot i d Los dobles puntos de exclamación coacciona el valor de cadena en un verdadero lingote. Si el I D tiene un valor, será cierto. De no ser así, será falso porque su alumno predeterminado en el gancho estatal es el objeto de estudiante vacío . Podemos estar seguros de dos cosas su valor nunca será no, y el I D será o bien un valor real o una cadena vacía. A continuación, crear un encabezado después con su valor establecido en el Cantón Rey de los alumnos seleccionados . Nombres y apellidos. No olvides los tirantes rizados hombre. Queremos precisar la acción a emprender cuando se desestime la hoja de acción. Para esto, usamos el on hizo despido Después de ti. Este es un evento en la propia hoja de acción. Establezca este atributo para que sea una función estrecha que simplemente llame al conjunto de la función de estudiante seleccionado pasando estudiante vacío. Esto hará que la hoja de acción se oculte porque el valor de es abierto se volverá falso. Por último, necesitamos crear la matriz de botones. Se trata de una matriz de objetos de botón. Cada botón necesitaremos un campo de texto en un campo de icono, una función de manejador que se llama cuando el usuario hace clic en él y opcionalmente un valor de rol para esta hoja de acciones. Quiero que cuatro botones eliminen con un rollo de destructivo el icono de la basura. Y si te gustaría ah, función de manejador que llama borrar estudiante, no me voy a molestar ahora mismo porque voy a cablearlo de manera diferente. En la siguiente lección. Mark Present tendrá el icono I y una función de manejador, que establece el estado de los alumnos seleccionados para presentar. Mark, ausente con el icono de contorno ojo fuera y su función de manejador, establecerá el estatus de alumnos seleccionados en ausente y finalmente, un botón de cancelación con el ícono de ropa y el rol de Cancelar. Dije que necesitaríamos cuatro manejadores, pero éste realmente no necesita uno. Y esa es la totalidad de la acción. Ahora vamos a crear un botón para lanzar la acción y una etiqueta de botones de iones inmediatamente después de los dos ícono existentes y justo antes del impuesto de cierre de ítem de ion, dale a la etiqueta de botones de ion una ranura después y dijo su final, lo que significa que lo hará aparecen al final del ítem. A continuación, añadir a las etiquetas de botón de ion como Niños de la etiqueta de botones nuevamente ver esos singulares y plural dentro de cada botón a un ojo en mi calma con la ranura, atributos dijeron Toe Icon on Lee, Especifique el icono de la primero como esquema horizontal de puntos suspensivos y establecer el segundo 1 en el contorno hacia adelante Chevron en un manejador de clics al botón con los puntos suspensivos. Al hacer clic, queremos llamar a la función click student, pasando al alumno actual de la matriz. Por ahora, dejaremos el botón con el Chevron solo. Eso lo terminaremos más tarde. Guarda el archivo y echa un vistazo a los resultados. Haga clic en los botones y vea que se ven y se comportan como esperaríamos que el delantero Chevron no haga nada. Si usted cableó arriba, eliminar al estudiante debe ser eliminado inmediatamente. No lo hice para que no haga nada. Guardaremos el resto de la funcionalidad para Ah, futura lección. Por ahora, sin embargo, si quieres, siéntete libre de jugar 16. Confirmación y notificación de usuario: la forma en que se escribe actualmente el código. Eliminar a un estudiante de la lista podría hacerse accidentalmente. Si el usuario hace clic o toca en el botón incorrecto, no se solicita ninguna advertencia o confirmación. Tenemos que pedirle al usuario que confirme la operación de eliminación antes de que ocurra. De igual forma, después de que un estudiante está por dejarlo, no hay indicio de que se haya producido la acción. Aparte del nombre que desaparece de la lista abordará en breve ambas deficiencias No lo consideró para una siesta para tomar una acción destructiva sin al menos advertir al usuario . . Es mejor pedir confirmación al usuario, y eso es lo que haremos aquí. En la lección anterior, manejan para el botón Eliminar simplemente llama a la función delete student. Sería mejor obtener la confirmación primero. Podemos hacer eso usando un ojo en alerta, y yo en alerta es un componente móvil tú I que proporciona una simple advertencia al usuario de que algo importante está a punto de suceder, y opcionalmente proporciona un medio para cancelarlo. Esto es lo que tengo en mente para implementar la confirmación. Al igual que con todos los componentes iónicos, se renderiza con el aspecto y la sensación apropiados tanto en Android como en iPhone en la parte superior de la página de roster, crea un nuevo gancho para controlar la visibilidad de la alerta dentro de la hoja de acción. Si llamaste, el alumno principal reemplazó esa llamada por una llamada al conjunto de ganchos show Eliminar función de alerta . Pasando cierto si lo omitiste como lo hice, simplemente agrega el manejador para llamar. Set mostró alerta elite pasando verdadera. De cualquier manera, la definición de botones de eliminación ahora debería verse así. Ahora, cuando el usuario seleccione el botón de eliminación en lugar de que el alumno sea eliminado inmediatamente, aparecerá el ojo en alerta. Si recuerdas, hay otro botón de borrar en la página con uno dentro de la opción de ítem de ion que deseas colocar. El mismo llamado a establecer mostró alerta elite aquí ya que está en el manejador de clic para implementar la alerta en sí a un ojo en el componente de alerta inmediatamente después de la acción de iones, ella su etiqueta de cierre para mostrar la alerta que necesitará y es atributos abiertos que a la valor del espectáculo. Eliminar variable de alerta. Para eso fue ese gancho siguiente. A un on sí descartó atributos set toe. Una función estrecha al conjunto de llamadas mostró alerta de plomo esta vez pasando falso. Esto hará que la alerta desaparezca. Son tres atributos que controlan el texto dentro y yo una alerta. El encabezado atributos como una cadena. Aparece en la parte superior de la alerta. Te algo así como borrar a este estudiante. El atributo mensaje es el cuerpo principal de la alerta. Usa una cadena como esta operación y no se puede deshacer. El atributo sub header aparece justo dentro del cuerpo de alerta. Establezca este atributo en una contaminación de los nombres y apellidos de los estudiantes, para que el usuario sepa con certeza qué estudiante está a punto de ser eliminado. Por último, la alerta necesita una matriz de botones. Defines estos botones exactamente de la misma manera que lo hiciste para la hoja de acciones. El primer botón es el botón de borrar. Necesita un manejador que elimine a un estudiante así que proporcione una función estrecha que simplemente llame a la función de borrar estudiante. Desde antes podemos hacer esto, porque ahora hemos confirmado que eso es lo que el usuario quiere hacer. El segundo botón debe ser un botón de cancelación con el rol de cancel, y no necesita un manejador. Y ahora no te olvides de cerrar el ojo en la etiqueta de alerta o tendrás algunos problemas de compilación. Guarda y revisa tu trabajo. Si todo salió bien, he perdido el ratón. Si todo salió bien, intentar eliminar a un estudiante ya no debería hacerlo automáticamente. En cambio, obtendrás la alerta pidiéndote que elimines o, en mi caso, no importa hacer click. Eso debería desestimar la alerta sin acción alguna. Sólo pocos borran y luego le dicen de nuevo que se borre bien, el estudiante en realidad se elimine. A continuación, crearemos un pequeño reconocimiento para que el usuario sepa que realmente el estudiante fue borrado . Muchas veces, una aplicación necesita proporcionar una notificación al usuario de que algo ha sucedido. Pero no es tan crítico que se quiera interrumpir completamente el flujo de la aplicación . Las notificaciones de tostadas llenan ese rol perfectamente. Un brindis es un pequeño, discreto banner informativo pop up. Por convención, debe impartir un breve mensaje que aparecerá por un breve periodo de tiempo antes desaparecer automáticamente. Algunas notificaciones de tostadas también contienen una forma para que el usuario lo descarte temprano, decidiendo si usa o no un brindis. La notificación es simple. ¿ El mensaje requiere que el usuario realice acciones no es importante si el usuario lo pierde Si la respuesta a ambas preguntas es no, entonces la notificación de tostadas es perfecta. El cumplimiento iónico de una notificación de tostadas es el componente ojo en el tostado. Es probablemente el más básico de todos los Iónicos. Tú yo componentes. Se puede construir uno con muy poco esfuerzo. Su forma más básica consiste en un mensaje y una duración, y yo en brindis podría estar posicionado verticalmente en la parte superior, media o inferior de la pantalla. Siempre está centrado horizontalmente. Puedes colorearlos con el atributo color, proporcionando cualquiera de la confianza de color iónico o tu propio color personalizado. Se pueden agregar botones e iconos. No estaremos haciendo nada de eso si quieres personalizar tu ojo en brindis después de terminar la lección, siéntete libre en la parte superior de la página del roster. Crea otro gancho para usar para controlar la visibilidad del tostado, así como controlamos la invisibilidad de la hoja de acción y la alerta. A continuación, modifique la función de borrar estudiante para llamar al gancho Establecer función inmediatamente después de que el plomo suceda a un ojo en la etiqueta tostada inmediatamente después de la etiqueta I alert. Exactamente como con el ojo en alerta, necesita un es atributos abiertos que al valor del show, delete toast, delete toast, hook variable y in on sí descartan atributos dicho para llamar a la función de conjunto de gancho. Sus atributos de mensaje deben contener un mensaje corto que indique que el alumno ha sido borrado. Sé un más simple tan detallado como quieras, pero recuerda que por lo general Shorter es mejor para un brindis. El atributo de duración controla cuánto tiempo esperará el ojo en el brindis antes de que se descarte automáticamente . El tiempo es un entero y en milisegundos, así que ten cuidado de no especificar una duración que sea demasiado corta y definitivamente no pase una fuerza Si olvidas y omites la duración. Atributo. El brindis permanecerá en la pantalla indefinidamente, requiriendo la intervención del usuario para descartarlo. Una posición por defecto de tostadas está centrada verticalmente. Decidí moverlo a la cima, pero te dejaremos la decisión final. Se puede proporcionar una matriz de botones a un I am brindis, tal como lo hizo con la hoja de acción I N y yo una alerta. Si te sientes tan inclinado a seguir adelante y agregar uno, elijo no guardar el archivo y me fui del navegador. Refrescar. Ahora, cuando eliminas a un estudiante además de que el nombre del alumno desapareciera del roster. Después de haber hecho la confirmación, también recibirás el brindis de notificación. Si quieres algunas ideas sobre cómo puedes mejorar esta experiencia, ofrezco algunos retos más adelante, justo después del video final. 17. Navegación básica: Antes de terminar este capítulo, quiero agregar un menú para que sea más fácil navegar entre la página principal de la página de roster , el menú se verá mayormente y actuará como el de la visita guiada y el Capítulo uno, pero será un un poco más simple. En Ionic, se crea un menú con el componente de menú ion. El menú ion es un componente iónico que implementa menú aparte. Al igual que con la mayoría de los demás componentes de contenedor iónico, puede contener un encabezado con una barra de herramientas en el título, junto con algún contenido de iones. El típico menú lateral consiste en una lista de páginas hechas a partir de una lista de ítems de iones. El menú se puede personalizar con una variedad de comportamientos. Si quieres que el menú oscurezca el contenido de la página principal que consientes. Es la superposición de atributos de tipo. Otras opciones son push, lo que provocó que el contenido de la página se deslizara con el menú o puedes elegir reveal para lograr un efecto similar pero repentinamente diferente con revelar el menú. contenido en sí es estacionario, mientras que con push el contenido del menú se mueve con el contenido de la página. Puede especificar de qué lado está el menú configurando el lado tras vista para iniciar o finalizar. Si eliges final, asegúrate de que tu icono de menú esté en el mismo lado de la barra de herramientas de contenido principal, o se verá raro. Puedes desactivar el deslizamiento del menú configurando el gesto de deslizamiento en falso. Si desea que un elemento de su menú cierre el menú cuando lo seleccione, sea más corto. Envuélvala con un ojo en el componente de alternancia de menú. De lo contrario, el menú permanecerá abierto. El toggle de menú iónico también se puede utilizar para abrir un menú. De ahí el nombre toggle. Por defecto, se ocultará automáticamente cada vez que detecte que su menú está deshabilitado o se está presentando en un dolor dividido, como lo estamos haciendo aquí. Debido a eso, si quieres que sea visible todo el tiempo, asegúrate de configurar su auto hide realmente en falso. No me preguntes cuánto tiempo me llevó depurar eso la primera vez que lo olvidé. Hay más en un menú, pero esos son lo básico, así que construyamos uno. Ahora crea un nuevo archivo en la carpeta Componentes. Llámalo menú dot tsx. Aquí es donde definirá el menú, replicando lo que vimos durante el recorrido crear una interfaz de página APP cerca de la parte superior que definirá cómo se ve una página. Dale un título, tu l y un icono. A continuación, cree una matriz de estos objetos dentro de la matriz. Proporcionar a objetar liberales uno para la página principal con el You Earl e Icon apropiado y luego uno para la página de roster con su roster Tu L Slash. Y usemos el icono llamado gente. Si el editor no reconoce los iconos, puede importarlos desde iconos de barra inclinada de iconos iónicos. A continuación viene el menú en sí, al igual que la página de roster. Es un componente de función reaccionar. Llámalo menú y lo dijo a una función estrecha que devolverá algún contenido iónico para construir el contenido del menú. Crea un elemento de menú ion con su contenido i d establecido en Maine. Este valor debe coincidir con el elemento HTML i. D. De la salida del router iónico, que era principal. Confía en mí en eso, pero lo comprobaremos de nuevo me añadiré el menú al marcado para el tipo. Soy parcial a superponer, pero siéntete libre de intentar, empujar o revelar dentro en un encabezado de iones con un ojo en la barra de herramientas y un ojo en el título dentro del título proporcionar un título como Menú justo después del encabezado de iones en una etiqueta de contenido de iones. Y justo dentro de eso y yo en la lista. Aquí es donde se construirá el menú hará esto Iterando sobre el array at pages . La estrategia es similar a la que acabamos de ver con los estudiantes. Para ello, abra un corsé rizado para ejecutar algún código, llame al at pages una función de mapa de subida. Esta función obtendrá una función estrecha para ser ejecutada para cada elemento de la matriz. Esa función recibirá dos parámetros. El objeto de página y el índice de matriz de ese objeto. 0123 así sucesivamente. La función de flecha necesita devolver el marcado para cada objeto. El primer elemento es un toggle de menú ion, con su clave establecida a la variable índice. Si no proporcionamos este índice, reaccionar se quejará de que cada niño de una lista debe tener una clave. Todavía renderizará, pero le encanta una fea advertencia. Y no necesitamos eso, como mencioné antes, establecer la propiedad de auto hide en falsa a menos que disfrutes viendo desaparecer las cosas sin razón aparente . Dentro del toggle coloca un ítem de ion con un enlace más redondeado establecido al punto en la página tu L. Haciendo esto automáticamente convierte el elemento en un hipervínculo, lo cual es bastante cool. Asegúrese de obtener la sintaxis de enlace correcta, como lo estoy mostrando aquí. De lo contrario, podrías terminar enviando a tus usuarios a una ruta literalmente llamada en la página dot euro. Establezca la dirección del router en ninguna o raíz su elección. Esto afecta la animación. Es sutil, así que te dejaré jugar con él y decidir qué prefieres si quieres unas líneas visibles separen tus ítems de menú que las líneas atribuyen a lleno para un mithi después del todo . No soy fan de la forma en que se ve, así que estoy eligiendo ninguno dentro del ítem en un ícono de ion con su ranura configurada para iniciar y es ícono configurado en el ícono de punto de página AP otra vez. Preste atención a esa sintaxis de enlace. Asegúrate de cerrar todas tus etiquetas correctamente, y luego todos tus llaves rizadas, aire cerrado y emparejado y alineado. Sólo queda una línea. Necesitamos exportar la función de menú, lo contrario no podremos importarla a la app para hacerlos visibles y a ti. Abre la página de la app dot ts X inmediatamente dentro del router Ion React como su primer hijo en un componente de dolor de división iónica con su contenido I d configuré en Maine asegúrate de que el dolor dividido envuelve completamente la toma del router iónico. Eso lo estoy haciendo aquí con la macro. Una opción de acceso directo Flecha abajo en Windows y Lennox. Se debe alterar flecha abajo. Agrega la etiqueta de menú del primer hijo del dolor de división iónica inmediatamente antes de la salida del router iónico . Ya agregamos la ruta a la página de roster, pero por si no lo necesitabas aquí dentro de la salida del router iónico. Por último, para este archivo, es necesario configurar las salidas del router iónico I d a Maine. Pensé que ya se había hecho, pero al parecer no. Siguiente. Tenemos que añadir un icono de menú a ambas páginas. No, no es automático. Abre la página principal en home dot tsx. Dentro de la barra de herramientas de ion justo antes del título de ion, es necesario agregar un componente de botones de ion con ranura igual a start been y I en el componente de botón de menú . Dentro de eso, no es necesario agregar ningún icono de textura. Esos se gestionarán para ti automáticamente, entonces necesitas hacer exactamente el mismo código dentro de la página de roster. Basta con copiar y pegar el mismo bloque. Guarda el archivo. Dale una oportunidad. Ahora deberías poder navegar entre las páginas de inicio y de roster con estas y eso prácticamente lo hace para este capítulo. Entonces, recapitulemos lo que acabamos de hacer. Si quieres agregar una página, estas son cosas que debes hacer. Crear la página. Componente mismo con el marcado y código que desee en una ruta con la U. R L para que los usuarios puedan llegar a la página. Si desea que la página en su menú lateral de aplicaciones se añada al array de páginas APP con el título de la URL y una Nikon y repita según sea necesario. Agregaremos más páginas a medida que avancemos. Pero por ahora has visto lo básico. Si quieres un reto extra, echa un vistazo a los retos de capítulo que he proporcionado al lado de estos videos de lección. Si te encuentras en problemas, asegúrate de dejar algunos comentarios 18. Aplica lo que has aprendido: Ahora que has completado este video, tómate unos momentos para aplicar lo que has aprendido a la aplicación demo. Acabas de construir la notificación de tostadas que agregaste para indicar que un estudiante fue borrado de las posiciones del roster mismo en la parte superior de la pantalla, permanece visible durante 3000 milisegundos o tres segundos y luego desaparece. No puede ser despedido manualmente por el usuario, y a veces puede ser un poco difícil de ver en su color predeterminado en posición. Tu reto aquí es arreglar que cambien la duración del brindis de cinco segundos con un botón cerrado para que el usuario pueda cerrar el brindis antes. Los botones Toast se configuran de la misma manera que los botones de hoja de acción. Insinuación. Rol de usuario en lugar de un manejador. Mueve el brindis de la parte inferior o media de la pantalla, utilizando sus atributos de posición y elige el que prefieras. Por último, puedes cambiar su color. No me gustan mis iconos, dirígete a los iconos iónicos dot com y encuentra algo que te guste más. Aquí te dejamos algunas ideas podrías cambiar el icono ausente y presente a otra cosa. El ícono que usamos el roster es bastante genérico. Podrías agregar un género a la interfaz del estudiante y luego ajustar el icono en función de ese valor en tiempo de ejecución. También podría cambiar el color de cualquier icono de la aplicación. Aquí tienes uno de avance. En lugar de un botón de cierre en la notificación de tostadas, ¿por qué no agregar un botón de deshacer rápido junto con algún código que realizará la acción mecanografiada indebida a plantear? ¿ Tener una función de clasificación? Proporcionar un botón en la barra de herramientas de la lista para ordenar a los estudiantes por apellido en lugar del predeterminado actual? Espero que estos te den alguna idea de lo que puedes hacer para que tu experiencia con Ionic sea un poco más rica hasta la próxima vez. Gracias por ver. 19. Crea un proyecto Xcode con Capacitor: Hola, soy Mike Callahan en esta sección. Vamos a preparar y desplegar la app demo en la tienda Apple App. Hay mucho que hacer, así que lleguemos a ello. Hay algunos prerrequisitos que tienes que tener antes de empezar. Necesitas un Mac, que supongo que tienes si estás viendo esto. Si no, siéntete libre de seguir adelante, pero no podrás desplegar nada. Necesitas ser un desarrollador registrado de Apple. No voy a repasar todo lo necesario para configurarme como desarrollador de apple, pero puedes inscribirte en desarrollador dot apple dot com y finalmente necesitas X Code, que puedes descargar desde la tienda Mac App. El primero que tenemos que hacer es crear un proyecto que podamos abrir en código X a partir de nuestros activos que fueron creados a partir del Proyecto Iónico, y esto se convertirá en la base de la aplicación que eventualmente implementamos Apple. El mejor modo de crear ya sea en proyecto IOS o Android para una aplicación Ionic o para cualquier aplicación Web , para el caso, es agregando condensador a tu proyecto. Claro, podrías usar Cordova, pero así es la década pasada. Si quieres la mejor experiencia con la menor cantidad de fricción, confía en mí. Tendrás que usar condensador con el fin de que mi aplicación llegue a la tienda Apple App. Tiene que ser un proyecto de código ex. Mi aplicación iónica no es un próximo podría proyectar. En el pasado, realmente solo había una forma de hacerlo, y eso era usando Cordova. Pero hoy voy a usar condensador. Un condensador es un nuevo marco o en tecnología de Ionic, que, curiosamente, no requiere de Ionic. De hecho, con una excepción que estoy a punto de mostrar, todo lo que hago después de eso no es específico iónico en absoluto. Entonces para poder usar condensador, hay que tener algunos construidos ya. Entonces voy a hacer eso con Ionic build, y voy a crear una construcción de producción. Técnicamente hablando, aquí no se requiere la opción dash dash prod. No es realmente necesario para una app de reaccionar. Lo que encuentro, sin embargo, es que usar Ionic Bill dash prod, no duele nada, y me impide tener que recordar a diferentes comandos. De hecho, en un poquito, convertiré esto en un guión de NPM y luego podré olvidarlo para siempre. En este punto, tengo un sitio web construido, una aplicación Web completa dentro de la carpeta build. Creo que tengo condensador, pero no soy positivo. La mayoría de los AP iónicos incluidos ahora por defecto. Pero si no escuchas, así lo haces. Si no tuviera condensador, este es el comando que tendría que ejecutar. Pero como puedes ver, ya está habilitado a partir de este punto en adelante, no importa si estoy usando una app iónica, la app no iónica. No importa si estoy acostumbrado a reaccionar. Vista angular Jake Weary Mobile. A partir de este punto, todo lo que hago aplicaría exactamente igual a todos esos. Lo siguiente ahora que tenemos condensador, es instalar la plataforma del Iowa, que creará un próximo proyecto de código para nosotros de forma automática. Y eso lo hacemos con gorra MPX. Agrega sobre nosotros. Y recuerda, MPX es forma de nodos de ejecutar un comando que no está en tu directorio de sistemas sino que está instalado algún lugar dentro de tus modelos de nodos. Y debido a que el condensador está instalado localmente. No está en mi camino de mando normal. Aquí hay un error, pero no creo que sea relevante para lo que estoy haciendo en este momento, así que lo buscaré más tarde. Pero por ahora, sigamos adelante y ábrela. Por lo que es tapa MPX abierta IOS. Esto lanzará código X con el proyecto. Voy a seguir adelante y construirlo con mando. Ser. Tengo curiosidad por ver si el error X Code select que estamos viendo su línea de comandos es algo que tengo que preocuparme por ella. Si es sólo un blip con el que podría lidiar más tarde, el Construido lo logró. Entonces ahora veamos si podemos ejecutarlo. Y si lo hacemos, seleccionaremos. Puedes seleccionar un dispositivo real o similar el dispositivo al que voy. Soy bueno con el iPhone S C. Así que sigamos adelante y veamos si podemos ejecutar la aplicación ahí, y parece que funciona muy bien. Si miras hacia abajo en X Code aquí, podrías ver a nuestro cónsul por lo que cualquier consejo dot log mensajes que estén sucediendo o cualquier error que esté ejecutando algún error que nos encontremos mientras estamos ejecutando aparecerá aquí, así que debería poder usar esto tal como lo hicimos normalmente. Al parecer, la aplicación funciona como se esperaba. Eso es hasta donde necesitamos cavar en condensador, buscaré ese selector de exclusión. Pero no parece estar afectando lo que necesitamos en este momento. 20. Ejecución de la aplicación de Demostración en un dispositivo real de iOS: Ahora que tenemos un proyecto IOS para la app demo, son un par de cosas que quiero hacer. Un verdadero rapido uno de ellos es abrir el archivo paquete dot Jason y en un guión que hará algo de lo civil más fácil. Y de nuevo, quiero señalar que todo lo que hago aquí aplica para todos los diferentes tipos de aplicaciones. Este en el que estoy trabajando específicamente es una reacción iónica hacia arriba. Pero todo lo que estoy haciendo será lo mismo para y aplicación angular iónica o incluso una gorra no Diana que solo una aplicación Web que quieres poner en un iPhone. Entonces lo que voy a hacer aquí es que voy a crear un guión que me ayude con lo construido. Si realizo algún cambio en la app Ionic, tengo que reconstruir la APP. Y luego tengo que sincronizar los cambios con el proyecto del condensador. Entonces para hacer eso, voy a hacer uso de algo que el NPM proporciona. Y eso se llama post. Siempre que tengas un guión que comience con la palabra post, seguido de otra palabra, NPM ejecutará ese guión justo después del primer guión y déjame mostrarte lo que quiero decir. Es más fácil si solo te muestro. Entonces voy a crear un guión llamado Post Build On que se sincronizará con el proyecto del condensador IOS. Así que acabo de nombrar a ese script post build y se ejecutará justo después del script de compilación. Así que simplemente estoy llamando a los condensadores comando sink y eso sincronizará automáticamente los artefactos construidos con cualquier proyecto de condensador que tenga. cuales sean las plataformas que se instalen, vamos a darle a eso un intento real rapido. Si ahora solo ejecuto NPM run build, verás que construirá la aplicación. Entonces se sincronizará de inmediato con condensador, y se pudo ver que ocurrió la sincronización. Incluso actualizó algunas dependencias nativas del IOS. Ahora lo que quiero hacer en este video es conseguir que la aplicación se ejecute en un dispositivo real. En el último video, lo conseguimos corriendo en el simulador. Pienso en un iPhone SC, pero no es ahí donde necesitamos estar para poder llevar esto a la tienda APP. Entonces voy a abrir el proyecto X Code ahora diciéndole a capacitor que abra el proyecto de Iowa Lo que puedes ver aquí es X Code no está realmente contento conmigo en este momento, porque antes de que entráramos en esto, eliminé mi cuenta de desarrollador de X Code. También le he dicho que no administre automáticamente la firma, pero queremos hacerlo. Entonces un par de cosas muy rápido. Por lo que quiero seguir adelante y decirle administrar automáticamente la firma. Pero eso no le va a gustar, verdad, porque no tengo cuenta. También quiero cambiar el identificador del paquete porque han usado éste en el pasado y tiene que ser único en tu cuenta. En realidad, podría tener que ser globalmente único, así que creo que uno es único. Pero si intento construirlo ahora, todavía no va a ir a trabajar. Por lo que la compilación falló. ¿ Por qué? Porque necesito al equipo de desarrollo. Entonces voy a agregar una cuenta, y voy a editar esto para ti, pero los voy a encontrar con mi escritura desarrollada de manzana. Y una vez que estoy dentro, ¿es suficiente? A ver. Dice que tenemos un perfil administrado por código ex aquí. Entonces, ¿qué pasa si intento instalarlo en mi iPhone? Déjame desbloquear mi iPhone mientras esto está sucediendo. También voy a lanzar el jugador de tiempo rápido porque hay una característica realmente genial. Pero puedes dio puedes habilitar una grabación de película y eso te permitirá espejear tu iPhone. Entonces sí me dejó mostrarles cómo lo hizo de nuevo. Fui a archivar nueva grabación de película y luego puedo seleccionar mi iPhone. No tengo ningún control sobre el iPhone desde mi computadora, pero puedo simplemente podría desplazarse como normalmente lo haría. De acuerdo, el código X dice que eso construido, Pero aún no lo ejecuté. Entonces déjame seguir adelante y hacer algunos cambios aquí a mis diseños de escritorio. Debilitar. Haz todo esto juntos para que puedas ver lo que estoy haciendo como lo hago. Voy a volver a entrar aquí. He seleccionado el iPhone de Michael del desplegable, y tengo un conectado vía USB y solo voy a presionar play. Construido, logrado, siempre una buena señal y ahora dice que está funcionando. Entonces deberíamos ver es el condensador por defecto pantalla splash un icono. Ahí está el ícono en la parte inferior y se puede ver el registro del cónsul sucediendo aquí abajo. Ahora esto se está ejecutando directamente en mi iPhone, y es, como puedes ver, la misma aplicación exacta que vimos antes. ¿ Qué tan guay es eso? Lo siguiente que voy a hacer es intentar que esto se suba a la tienda APP para que puedas seguir junto con eso. 21. Crea la aplicación de AppStore: El siguiente paso importante es conseguir la aplicación construida a la tienda APP, pero primero necesitamos un lugar para ponerla. Necesito ir a APP store Connect para crear la aplicación antes de poder subirla. Entonces voy a iniciar sesión en APP store connect dot apple dot com. Y una vez que estoy conectado, vamos a ver, dice que necesito revisar un acuerdo, lo que significa que tengo que hacer eso antes de hacer algo más ¿bien? Una vez que he iniciado sesión en APP Store Connect, inmediatamente me muestran todas las aplicaciones que tengo actualmente en la tienda APP. Verás algunas de ellas con pequeñas insignias rojas y la palabra rechazada junto a ellas. Son muchas las razones para ello. No voy a entrar aquí. Tan solo ten en cuenta que Apple es conocido por rechazar aplicaciones a veces por el bizarro ist de razones para crear una nueva aplicación. Simplemente haga clic en la aplicación más y nueva. Y lo primero que quiere saber es ¿qué es este cuatro? ¿ Es para IOS? MacAllister TVO s? Es de Iowa. Voy a llamarlo a las 10 de baile. A ver si me deja usar el signo at no parece importarle. Yo soy nosotros inglés. Mi paquete i d no existe. Entonces necesito crear un nuevo paquete i d que voy a hacer aquí específicamente dice que no puedo usar el exterior aquí, pero un 10 baile y el identificador del paquete, como pueden recordar, es com dot walking river dot un 10 baile ahora abajo a continuación. Quiere que le diga qué características de IOS que estoy buscando. En este caso, no estoy buscando ninguno de estos, así que simplemente voy a dejarlos todos cobija continuar. Y ahora, registrar el paquete I identificador debería poder volver aquí como nueva aplicación. Ahí está mi identificador de paquete. Se trata de una app IOS y será a las 10 de baile. Es nosotros el inglés en el sesgo es interno. Puede ser realmente cualquier cosa que quieras que sea. Voy a seguir adelante y aún así llamarlo al 10 de acceso de usuarios de baile. No voy a vivir en mis usuarios. Eso está más allá de esto. Por lo que todos los que quieran condenar lo dejen aparentemente no es como esta cola. Entonces, sólo volvamos a un baile 10. Y en este punto, podemos parar. Aquí hay mucho más por hacer, pero el propósito de hacer esto era simplemente conseguirlo para que podamos subir la aplicación. 22. Suba a la App Store: en este video. Mi objetivo es ir subiendo la aplicación a Apple. Todavía no vamos a hacer nada con él, pero sólo quiero mostrarles cómo llegar. Uno de los primeros errores que cometí y te llevaré por eso ahora es si no tienes cuidado. Digamos que aún estábamos usando el iPhone S e para ejecutarlo y qué vas a encontrar. No es obvio a primera vista cómo hacer esto. El primer error que cometí es no saber que archivo era el comando a usar. El segundo error fue no poder averiguar por qué casi siempre estaba inhabilitado. El motivo es el dispositivo que has especificado aquí, el esquema activo, como se llama así antes cuando por primera vez mostré esto ejecutando un siguiente código, utilicé el simulador de iPhone s E, y en este momento no tengo mi iPhone conectado a mi Mac. Puede conectar un dispositivo real o simplemente puede configurarlo demasiado genérico. Y ese acto por sí solo permitirá el archivo. Adelante y hagamos eso ahora. Por lo que tomé la aplicación de condensador, construí y la ejecuté en mi iPhone. Ingresé a mi cuenta de apple y todo se está gestionando automáticamente todo el fichaje. Entonces, en teoría, esto sólo debería funcionar. Esto puede llevar bastante tiempo construir todo. Yo lo he acelerado aquí para tu comodidad, así que no tienes que sentarte a través de todo esto, Pero tendrás que sentarte a través de ello cuando sea tu propio proyecto. De acuerdo, la construcción tuvo éxito. Y ahora ex Dios quiere saber qué quiero hacer con mi archivo. Observe que el nombre de la aplicación sigue siendo app, Probablemente no donde queremos dejarlo. Tampoco queremos la versión 1.0, y creo que eso es construir uno. Nunca voy a distribuir esto, pero trataré de mostrar el proceso exactamente como lo harías si lo vas a distribuir. Por lo que el siguiente paso es distribuir la aplicación. Aquí hay cuatro opciones. Voy a tomar el valor predeterminado porque, francamente, nunca usaría ad hoc para instalar en dispositivos arbitrarios o dice aquí dispositivos designados. No tengo una empresa en la que distribuir la aplicación, ni tampoco tengo un equipo de desarrollo. Voy directamente a ir a la tienda de aplicaciones. Puedes firmar tu app y crear el paquete sin subirlo a la tienda APP. O simplemente puedes ir directamente a la tienda APP. Esto puede causarnos algunos problemas. Espero que no lo haga. Parece que superó mi miedo. Mi preocupación era que no volvía a tener ningún certificado de firma válido. Yo voy a tomar los incumplimientos. Todas estas opciones tienen sentido para algo que vas a distribuir. Podía ver. A la izquierda de esta ventana están todas las aplicaciones que he subido previamente a la tienda APP y parece una de ellas. Dos de ellos se llaman APP. Curiosamente, sin embargo, no aparecen de esa manera en la tienda de aplicaciones otra vez. Voy a dejar que Apple el siguiente podría hacer todo el trabajo arduo. No veo el punto en manejar manualmente estas cosas. A lo mejor temen parte de una gran organización. Es posible que tengas un conjunto específico de certificados que debes usar y perfiles de dispositivos. Este proceso ya es bastante duro como es. Yo quiero que sea lo más fácil posible. Está bien, todo está hecho. Todo ha sido construido. Parece que ha sido firmado. Entonces ahora lo único que queda es subir a la APP store connect y fue exitoso en el video. Te mostraré lo que tenemos que hacer para dar el siguiente paso. 23. Detalles de AppStore Connect: De acuerdo, ¿qué tenemos que hacer para conseguir esta cosa en la App Store? Por lo que voy a iniciar sesión en App Store connect dot apple.com. Entonces como puedes ver, ni siquiera tiene un ícono todavía. Entonces sigamos adelante y pinchemos sobre él y veamos lo que tenemos que hacer. Parece que lo que tenemos que hacer es proporcionar un montón de imágenes. A mí. Las imágenes son algunas de las cosas más difíciles de hacer porque es un proceso tan manual. Hay formas de acelerarlo en obtener las capturas de pantalla de la inacción de tu aplicación puede saltarse las imágenes por ahora y solo mirar para el resto de esto, tienes que proporcionar hasta un 170 caracteres de texto promocional. Este es el primer blurb de textos que tu potencial desactor, como veremos en la App Store, también puedes proporcionar hasta 100 caracteres de palabras clave. Hay todo un arte para seleccionar palabras clave, y hay sitios web dedicados al tema. Apple va a requerir URL de soporte, ¿a dónde puede ir la gente si tiene dudas sobre el soporte de la aplicación? También puedes proporcionar una URL de marketing que es un poco diferente. Esta será una URL que está disponible en la App Store que la gente pueda hacer clic para encontrar más información. Tienes que proporcionar al menos una URL de soporte. No tienes que suministrar las descripciones de URL de marketing donde puedes divertirte mucho. Aquí es donde quieres contar la historia de tu aplicación. Tienes hasta 4 mil personajes para hacerlo. Mi recomendación aquí es que pases mucho tiempo construyendo esta descripción. Yo lo pienso como la página de aterrizaje para su aplicación. Necesitas venderlo. ¿ Por qué la gente quiere usar tu aplicación? Esta aplicación que estamos construyendo ahora no trata con la app iMessage ni con el Apple watch, así que voy a saltarme esas. No digo que no sea importante, pero aquí no es relevante. A medida que te desplazas hacia abajo y llegas a la sección de compilación. Entonces lo que tenemos aquí es que tenemos que ir y seleccionar una compilación de nuestra aplicación. Y al parecer le falta algo. Y voy a mirar en eso y ver si le va a dejar permitirnos seleccionarlo. Quiere saber si estoy entrando en nosotros las leyes de exportación de encriptación. Y por lo que yo sé, tomar asistencia no. Entonces voy a seguir adelante y dar clic en No, no estamos haciendo ninguna llamada HTTPS, así que voy a seguir adelante y dar clic en el icono de la aplicación, como pueden ver, es el predeterminado de condensador. Entonces para poder arreglar eso tendrá que volver a Xcode y agregar los iconos correctos que queremos ahí, luego subir un nuevo construido. Hará eso más tarde. Yo solo quiero pasar por todo en App Store connect. En primer lugar, la versión creo que sacó justo del paquete de aplicaciones. Aquí es necesario explicar quién es el propietario del copyright, quién es el dueño de los derechos de la solicitud, y debería hacerte, necesitamos proporcionar una calificación de edad. Y lo haces entrando en editar y contestando una lista masiva de preguntas. Entonces creo que esto va a ser bastante sencillo para mí donde no es una aplicación violenta de ningún tipo. No hay humor, no es tema maduro, no es horror. No hay médico, ni alcohol, ni azar, desde luego no hay desnudez. No accede a la web en absoluto, al menos no actualmente, ni proporciona al usuario acceso irrestricto a la web. Y no hay concursos ni juegos de azar. No está hecho para niños, así que no voy a revisar esa casilla. Una vez que respondas esas preguntas, Apple aplica entonces una calificación. No es un juego, así que no lo voy a incluir en Game Center. Esta siguiente sección es si el revisor, el humano que va a revisar tu solicitud una vez enviada, ¿necesitan iniciar sesión para usar la app? Y algo importante a lo que hay que prestar atención, porque es posible que tengas cuentas protegidas por contraseña en tu app. Nosotros no. Entonces simplemente me saltaré este. La información de contacto es bastante sencilla. Si tu aplicación es lo suficientemente complicada, podrías adjuntar documentación o videos u otro tipo de ayuda para que sea más fácil para la persona que la está revisando entender cómo usar tu aplicación. Y estos dos últimos, ¿ cuándo quieres que liberen la aplicación al público? Puedes hacerlo manualmente. Se puede hacer automáticamente cuál es el valor predeterminado. O bien puede especificar una fecha no liberar antes de esta fecha y hora en particular. Y luego finalmente, la publicidad. ¿ Su aplicación utiliza anuncios a medida que muestra anuncios? Y descubrí de la manera difícil hace mucho tiempo que si usas Google AdSense, eso cuenta como un sí. Y si le dices No, y tu solicitud realmente lo hace, será rechazada. Es decir, la asistencia no. Pero solo quería hacer clic en sí, solo para mostrar cuáles son las otras opciones y requisitos. Entonces digamos que vamos a servir anuncios, pero no vamos a vincular aplicaciones juntas para que los anuncios puedan estar relacionados. Creo que esto con el segundo es nunca he hecho otra cosa que simplemente servirlo, así que nunca he comprobado estas son las dos casillas y debes hacer clic en esta o no puedes continuar. Y de nuevo, asegúrate de mirar ese texto rojo. Si respondes correctamente las preguntas y ellos se enteran de ello, rechazarán tu aplicación, quitarán de la tienda de aplicaciones, emitirán una advertencia y si lo vuelves a hacer, pueden prohibir tu cuenta por completo. Entonces déjame desplazarme de nuevo hasta la parte superior. No voy a hacer que me veas llenando todas estas cosas. Pero en el siguiente video lo tendré completamente lleno. Y luego nos preocuparemos por las capturas de pantalla. Y al anterior. 24. Icono de aplicación y Splash pantalla: adelante y hagamos que el ícono de la aplicación y la pantalla de bienvenida se encarguen, no es realmente difícil de hacer. Y te voy a mostrar una manera bastante sencilla de manejarlo. De vuelta en los días pre condensadores cuando todos usaban Cordova. Cordova tenía una opción de línea de comandos para generar pantallas de icono y splash a partir de una imagen fuente. Estoy tratando de mantenerme alejado de cualquiera de las herramientas de Cordova. Ahora curiosamente, la herramienta que voy a utilizar se llama rayos Cordova, que puedes ver aquí. Y tengo la sensación de que van a renombrarlo pronto. Se trata de una herramienta del equipo iónico que un poco tira en la funcionalidad que proporciona la línea de comandos de Cordova Pascua. Y lo hace todo localmente en lugar de enviar el archivo a la web. De acuerdo, vamos a construir estas imágenes. Lo que tengo a la izquierda es una carpeta de recurso que está justo dentro de la raíz de mi proyecto. Aquí es donde van a vivir las imágenes de origen. A la derecha se puede ver que el simulador del iPhone SE se está ejecutando con el icono del condensador predeterminado visible. Y si lanzo la aplicación, se puede ver rápidamente la pantalla de bienvenida. Y en realidad es solo una imagen en blanco con el logotipo del condensador en el medio. Ese parece ser el caso de mucha aplicación de iOS. Entonces me voy a apegar a eso. Lo que he hecho es que he descargado un archivo PNG de un sitio llamado pixabay.com. Es simplemente un portapapeles con una lista de comprobación y lápiz. Apple recomienda encarecidamente no usar transparencia en tus iconos. Y si miras los iconos que son visibles en el simulador, puedes ver qué pasa. Por lo que el icono de los archivos, el icono de asistencia en el icono de Safari todos tienen fondos blancos, pero la mayoría de los iconos en iOS parecen no hacer eso. Pero en su mayor parte quieres que tu icono sea el color que esperas que sea. Entonces lo que pasará es porque estoy usando un archivo PNG con transparencia. Esas áreas transparentes se volverán blancas y eso me parece bien. Déjame cerrar esa y la pantalla de bienvenida es similar. Es la misma imagen exacta centrada en una imagen mucho más grande. El tamaño de la imagen es 2732 por 2732, que es el tamaño recomendado o requerido en realidad. Está bien. ahora me voy a quedar en la línea de comando. Ahora que lo he hecho, seguiré adelante e instalaré el paquete como dependencia de desarrollo para este proyecto. Siguiente Voy a decirle a Cordova raise que construya las imágenes que busco. Podemos ejecutarlo con un simple y Px cuadrado sobre subir iOS para decirle a qué plataforma apuntar. Omitir config porque no tengo un archivo config que sea parte de una aplicación Cordova, y para copiar los archivos generados en mi carpeta iOS, mi proyecto iOS Xcode. Entonces sigamos adelante y hagamos eso. Vamos a ver algunas advertencias. Pero de lo contrario, va a suceder bastante rápido. Ya está hecho. Yo no hablé nada de eso. Entonces si entramos en la carpeta iOS y veamos qué se construyó. Creó el ícono para nosotros y múltiples tamaños y un montón de diferentes pantallas de salpicaduras. Y puedes ver si miras con cuidado que no me centré del todo, pero no creo que a nadie le vaya a importar. Algo importante a tener en cuenta es que la utilidad Cordova raise asumió que lo estaba ejecutando desde la carpeta raíz de mi proyecto. Además asumió que el icono y la pantalla de presentación, o en una carpeta llamada recursos en ese nivel raíz, que el icono se llama icono en la pantalla de bienvenida se llama splash y ambos son archivos PNG. El aviso que aquí se ve es porque había un canal alfa, lo que significa que había transparencia. Pero toda la transparencia como se mencionó, lo llenará de blanco. Yo estoy bien con eso. Entonces ahora veamos cómo se ve y los cambios que se hicieron. Simplemente necesitamos abrir el proyecto Xcode, que nuevamente podemos hacer con NP x cap, abrir iOS, y que lanzará Xcode para nosotros en este punto, todo lo que necesitamos hacer es ejecutar la aplicación y dejar que se despliegue en el simulador. Xcode ya debería haber recogido todos los activos para nosotros. Así que presta mucha atención a la pantalla del simulador mientras presiono play, deberías ver el icono cambiar y luego debería aparecer la última pantalla. Y realmente eso es todo lo que hay en ello. Todavía necesito subir esta versión del código a la App Store, pero ese es exactamente el mismo proceso que vimos hace unos videos. Entonces no voy a pasar por eso otra vez. 25. Material extra: Pero antes de irnos, por favor permítanme unos minutos más cada vez. Sé que tu tiempo es precioso y trataré de que valga la pena. Yo mantengo un blog en walking river.com. Aquí es donde pujo muchos de los problemas y soluciones que encuentro como desarrollador profesional de software, siempre puedes llegar a mí, seguirme y compartir tus comentarios en Twitter. Mi mango está al caminar río. Si desea ver en qué libros estoy trabajando, por favor visite mi página de autor en Amazon.com slash author slash m Callahan. También puedes encontrar mi libro electrónico y catálogo de cursos en goma de carretera. ¿ Debería preferir un formato de archivo diferente al proporcionado por Amazon? Y por último, la mayoría de mis cursos también están disponibles en Udemy. Vuelve a consultar con frecuencia para conocer las últimas ofertas de cursos. Una vez más, este es mi Callahan. Gracias por ver.