Transcripciones
1. Comienzo: 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 angular, pasando de código cero todo el camino a las tiendas APP y play. A lo largo de este curso, vamos a cubrir los aspectos importantes del desarrollo con Jónico y angular. 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. Saltaremos a la derecha en la estructura de la aplicación, explicando cómo se presenta una aplicación iónica. 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 en los navegadores web y los dispositivos
utilizarán esto para mantener los datos persistentes de las aplicaciones que sobrevivirán a los reinicios del dispositivo Si no necesita capacidades específicas de hardware distintas de las disponibles a través del navegador Web, puedes optar por liberar tu aplicación es una aplicación Web progresiva o P w. A. Si bien la Web se está volviendo cada vez más capaz cada día, algunas funciones aún requieren acceso al subyacente dispositivo en el que se está ejecutando la 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 que uso y recomiendo código de estudio visual. El código B s es un entorno de desarrollo libre y de código abierto y multiplataforma de Microsoft, diseñado desde cero hasta el dedo del pie trabajar con todas las tecnologías que estará utilizando, Por
supuesto, eres libre de usar cualquier herramienta con las que te sientes cómodo. Una cosa más debo dejar en claro esto no es un rumbo sobre angular. Si bien voy a cubrir algunos de los conceptos básicos de angular en cuanto pertenece a Ionic, no
voy a ir más profundo de lo que tengo que Para hacer que la aplicación demo funcione Next instalará las herramientas necesarias para que complete 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 terminados 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. Entonces me va a pedir un nombre. Vamos a intentarlo. Hola, Ionic. Yo soy parcial Purple. Entonces voy a escoger morado. Deseo seleccionar angular y el menú lateral. Entonces sigamos. Entonces debido a que ya tenía una cuenta, pude iniciar sesión rápidamente. Yo terminé 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 Maestro. 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 a la angular Seelye detrás de las escenas. Como puedes ver aquí, está ejecutando N G run,
app, serve, serve, y abre automáticamente una ventana del navegador usando mi navegador predeterminado para 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 Ionic AF 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. Una introducción ágil a Angular: como mencioné antes. Esto no es un curso sobre angular, sin embargo. Hay algunos patrones y modismos de sintaxis que quiero introducir temprano. Antes de entrar en el código. A mí me gusta pensar en ellos como ISM angulares. Sí, acabo de inventar esa palabra. Hay algunos conceptos clave peculiar dedo angular, pero quiero mostrarte antes de que necesitemos usarlos. Una de las cosas de angular es que fomenta una estricta separación de preocupaciones. Tu estilo HTML, un código excusable se mantienen separados unos de otros. Estas preocupaciones pueden comunicarse entre sí, para compartir datos y eventos a través de expresiones vinculantes y a directivas angulares, N g four y MGF, que permiten renderizar múltiples copias de un elemento o decidir si renderizarlo en todos. Para trabajar a través de los ejemplos de esta sección, es posible que desee abrir un navegador para apilar blitz dot com slash fork slash angular. Esto te proporcionará una caja de arena inmediata, para que puedas seguir. Empecemos por. Hablar de angular es concepto de separación de preocupaciones en angular tú. I funcionalidad está encapsulada y componentes un componente puede representar cualquier cosa desde pieza de texto, una forma de botón ah o incluso una página completa. Los componentes pueden contener otros componentes, y pueden comunicarse entre sí a través de interfaces muy bien definidas. Para especificar que una clase mecanografiada es componente, utilice el decorador de componentes. Esa es la palabra componente. Con eso a la señal, los decoradores proporcionan información adicional anotando o modificando clases o
miembros de la clase . En este caso, el decorador de componentes especifica metadatos adicionales toe angular sobre cómo se
comportará la clase . El selector le dice angular que exponga este componente usando la etiqueta HTML. Mi plantilla APP u R l indica que el marcado HTML se puede encontrar en el archivo especificado. De igual manera con el estilo tus males. Observe que este valor es una matriz, lo que significa que puede proporcionar más de un archivo CSS. La porción herbal de ejecución del código componente se encuentra dentro de la definición de clase. Esta contiene una sola línea de código, lo que
significa que realmente no está haciendo mucho. Pero a esto nos referimos por separación de preocupaciones. El código, el marcado en los estilos están todos separados uno del otro. Echemos un vistazo al marcado. Esto se encuentra en el archivo de plantilla. Este archivo es html puro que contiene el contenido visual. El primer renglón es una etiqueta que hace referencia a un componente personalizado llamado Hello. puede ver en la salida que muestra el valor de la variable name desde el
componente APP , que es la palabra angular. El poder de usar componentes es que puedes reutilizarlos, extrayendo los elementos comunes y variándolos en función de lo que cambie. En este caso, el nombre que se pasa en esas llaves son un ejemplo de una expresión angular, vinculante en tiempo de renderizado. El valor dentro de las llaves se recupera del nombre de la variable dentro del
vidrio del componente y pasa al componente hello a través de su nombre. Atributos. Usar la palabra nombre tanto para la variable como para los atributos es desafortunado y puede llevar a un poco de confusión innecesaria. Puedo cambiar la variable de componente a otra cosa como persona nombrada, y eso podría hacerlo menos confuso. Si lo cambio en el marcado, tengo que cambiarlo en el componente, volver al código del componente y cambié la variable de nombre a nombre de persona y luego cambiar su valor de angular a otra cosa y mirar el resultado. Angular observa cambios a estas variables. Volverá a renderizar el componente cada vez que se produzcan estos cambios. Para ver un ejemplo de inacción de re uso de componentes simplemente hacer múltiples copias de la helo tech . No obstante, ahora tenemos un problema. Sólo tenemos una variable llamada persona A. Podemos codificar duro, los otros nombres que van a funcionar, pero no es muy útil. ¿ Y si tuviéramos un montón de nombres? Cambiemos la persona llamada Variable en el componente y lo hagamos una matriz llamada People agregará algunas personas. El genial de la razón, los componentes de esta manera. No tenemos que cambiar ese bajo componente en absoluto. Simplemente necesitamos cambiar la etiqueta donde la usamos para incluir N G four, una directiva angular utilizada para crear múltiples instancias del componente hello. función del número de elementos en la matriz Reference, se utiliza un N G four proporcionándolo como un atributo al elemento que desea replicar. El valor dentro de la cita es la expresión de looping. Consiste en la palabra clave, let seguido por el nombre de la variable a utilizar dentro del elemento y cualquiera de sus Hijos . La palabra clave off y el nombre de la matriz en el bucle toe del componente sobre el asterisco, que se requiere, es una indicación a angular de que esta directiva manipulará el dom donde las páginas
documentan el modelo de objetos de alguna manera. Existe una alternativa de encuadernaciones en impuestos que funciona con atributos HTML. Si desea establecer el valor de un atributo en un valor en su componente en lugar de las llaves
actualmente, puede rodear el nombre del atributo entre corchetes y proporcionar el nombre de la variable comillas. Aquí, los primeros incidentes de nombre entre corchetes se refieren a los atributos HTML de la costumbre . Hola componente. El segundo, la palabra persona entre comillas es el nombre de la variable en la energía para la expresión. personal, prefiero este método. Me resulta un poco más fácil leer el siguiente tipo de a estas alturas. ¿ Quieres discutir su encuadernación de evento? Cualquier evento HTML puede convertirse en un disparador para ejecutar una función en el componente. La forma más sencilla de ilustrar eso es crear un botón y proporcionar un manejador de clics. Después, dentro de las cotizaciones, llame a la función de componente que desea ejecutar. En este caso, llamemos a toggle de nuevo dentro del componente. Tenemos que implementar la función taco. Adam es variable conmutada en la parte superior del componente APP y establece su valor inicial en falso
crear la función de toggle, que simplemente anulará el valor de lo que sea que se conmute pasa a ser. Ahora, al hacer clic en el botón de encendido, el valor de la variable se conmuta se volteará entre verdadero y falso. Theis variable toggled es inútil para nosotros hasta que hagamos algo con ella. Añadamos una nueva etiqueta de párrafo dentro. El archivo de plantilla en este caso agregará una directiva N G if y dijo que valor a es toggled Engy. Si se renderizará condicionalmente la etiqueta HTML. Si el valor dentro de las comillas de violetas a una verdad e valor así como activamos se activa y desactiva la etiqueta de párrafo aparecerá y desaparecerá. Por último, abramos ese componente hola. Es bastante genial que no hayamos tenido que hacer esto hasta este punto. Se trata de una gran ilustración de un método alternativo de creación de un componente. El decorador de componentes todavía define un selector, que de nuevo es el nombre de la tecnología HTML. Pero en lugar de referirse a la plantilla y estilos dentro de archivos externos, este componente los dividió directamente en este propio archivo con las
propiedades de plantilla y estilos . No recomiendo este patrón excepto el más trivial de componentes. Como esto se advierte, sin embargo, que incluso en este ejemplo todavía hay una separación general de preocupaciones. El plantilla, los estilos y todo el código ejecutado están todos en partes separadas del archivo. Bueno, con eso fuera del camino, sigamos adelante y construyamos nuestra primera aplicación 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 Jónico podría que la APP era o simplemente nos dio de vuelta en mi terminal. Hay un par de comandos a los que voy a entrar ahora que quizá 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 puede ver el tipo es angular. Echemos un vistazo al archivo html de punto índice. En la parte superior, tenemos un montón de ataques Met. La mayoría de estos ataques de hombres tienen que ver con cómo aparecerá la aplicación en dispositivos móviles . El equipo iónico ha pasado años consiguiendo esto bien. No te recomiendo que te metas con él abajo en la etiqueta de cuerpo HTML, hay un solo elemento html personalizado af route. Así fue como se creó la APP. Entonces echemos un vistazo a dónde se define el desarraigo. Está aquí bajo app source en un archivo llamado app dot component que ts. El primero que hay que notar es ese decorador de componentes cerca de la parte superior. Definía cierta información sobre el componente y cómo debería renderizarse. Selector le dice angular cuál debe ser el nombre de la etiqueta, así que de ahí viene el desarraigo. Es HTML Markup está en un archivo llamado app dot component ese HTML, que veremos en un momento. Y es estilos personalizados o un componente de punto de aplicación que s CSS en la parte superior de las
variables persona de clase . Hay una matriz de páginas. Entonces ahora ya sabes de dónde vienen esos junto a las etiquetas que podemos ver en el menú de abajo la lista de páginas. Es tradicional en una aplicación angular definir todas las variables de nivel de clase y campos cercanos a la parte superior, seguido del constructor de clase, que es lo que vemos aquí en la lista de parámetros al constructor es donde podemos inyectar diversos servicios que requerirá el componente. El servicio Platform y Ionic brinda diversas piezas de información sobre el dispositivo o plataforma. El APP se está ejecutando en la siguiente pantalla de presentación y la barra de estado son retenidos de Ionic native y es específico para ejecutarse en dispositivos físicos, que no vamos a cubrir en este momento. Inicializar aplicación es un poco de boilerplate que voy a ignorar por ahora. Nd on en ella es lo que se conoce como un gancho angular del ciclo de vida. Hay un montón de ellos, pero éste es bastante a menudo angular llamará a ONG en un it una vez que se haya inicializado el componente y todos sus Niños. Se está revisando el oral de la página actual para tratar de determinar qué página de las páginas de Ray se está renderizando actualmente. A continuación, hablemos de esas páginas y cómo navegar entre ellas. Todo el router de aplicación principal a encontrar aquí, piensa en una ruta es un euro. El módulo de enrutamiento define una matriz de rutas y describe el patrón de su L para que coincida y describe qué módulos de página se deshacen para cada uno. El primer round tiene una cadena vacía para una ruta con un redireccionamiento al campo. Esto significa que si no hay ninguna ruta especificada en la aplicación, por defecto
será la bandeja de entrada de barra de carpetas siguiente. cualquier momento que la ruta comience con la palabra carpeta Slash, seguida de un i. D o un nombre de página, la aplicación importará el módulo de carpeta y siguió las propias reglas de enrutamiento de ese modelo. A partir de ahí, te
prometo que esto empezará a tener sentido a medida que construyamos nuestra propia mitad. Ahora es carpeta abierta dot page dot ts y mira algo un poco más interesante. El componente de la página de carpeta no tiene mucho código en él. Cuenta con un constructor en el que se inyecta y se activa el servicio de ruta. Se trata de un servicio angular que permite obtener información sobre la ruta que provocó que la página apareciera dentro de la N G en una función de TI. En la página se utiliza ese servicio para obtener el I. D o el nombre de esa parte de la ruta. Esa idea va a mapear a la bandeja de entrada, etcétera. Ahora vamos a abrir doblado hacia arriba hiedra paginada html. Esta es la marca para arriba, y aquí es donde ocurre la verdadera magia para esta página. La mayoría de las páginas iónicas contendrán una etiqueta de encabezado ion. Esto define ese encabezado fijo en la parte superior de la página. Dentro de eso hay una barra de herramientas de iones, un contenedor para botones, menús, títulos, etcétera para agregar botones a una barra de herramientas. Podemos usarlo. I on buttons tag the slot atributos indica donde en el encabezado, los botones irán tradicionalmente iniciados a la izquierda y el final está a la derecha. Esto se invierte en sistemas operativos de derecha a izquierda. El botón de menú de iones es ese menú de hamburguesas que vimos cuando hicimos la aplicación. Más estrecho por defecto, se muestra y se esconde según sea necesario. Junto a los botones no está el título de ion con la carpeta de palabras rodeada por dos llaves. Esta es una expresión angular, vinculante, y le dice angular que reemplace esa expresión con el valor real de la
variable de carpeta . A continuación se presenta el contenido de iones. Aquí es donde vivirá la mayor parte del contenido de tus páginas. Contiene otro encabezado y barra de herramientas que contiene solo título. Por último, podemos ver una etiqueta def HTML con otra expresión de enlace y un párrafo con un hipervínculo en. Lo creas o no, eso es realmente un buen trozo de la funcionalidad. Claro, hay un montón de otros archivos, pero los que te he mostrado son los que realmente necesitas estar familiarizado en esta etapa . El resto se describirá como necesario. Ahora, antes de salir de este pequeño tour, quiero hacer un par de cosas divertidas, pero lo dejaré para la siguiente lección.
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 dijiste modificar el array at pages, date 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. Lo que haré es copiar y pegar el objeto de la bandeja de salida. Ahora tenemos dos de ellos ahora, la segunda instancia de la palabra outbox. Vamos a cambiarlo a artículos enviados y cambiar la o l dos carpetas Vida enviada. Dejemos el ícono solo por un momento. Microsoft Outlook utiliza ese avión de papel para los elementos enviados. Adelante y guardemos la página, porque aquí es donde se pone divertido. Tan pronto como guardes estos cambios, la aplicación se reconstruirá automáticamente y el navegador se volverá a cargar para reflejar estos cambios. Entonces ahora cambiemos el icono de la caja de salida y lo pondremos en álbumes. Deja que se reconstruya y vea el cambio de icono. ¿ Qué crees que pasará ahora si haces click en el nuevo menú enviado? No creamos una nueva página ni una ruta, por lo que conseguiremos un 404 No, el componente de carpeta seguirá renderizando con su nombre dicho a la I. D o porción de nombre de la ruta, cual se envía. Esto se debe a que el componente de carpeta es un objeto bastante genérico. No todas las páginas serán tan limpias, 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 iónica e incluso hacer algunas pequeñas custom is ations. Así que adelante, regocijense en su nuevo poder, jueguen 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 el nuevo proyecto: 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 debes perseguir sobre condensador. Pero si lo haces, adelante y contesta. Sí, no
estaré trabajando con ese flujo, así que todos los internodos que lo conectan 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. Fuente. Activos Imágenes, coma, aula dot jp G o J Peg. Abra la página principal, que es el archivo HTML en origen. App. Inicio. Elimina todo dentro de la etiqueta ojo en contenido. Cambia el valor dentro de la etiqueta de título de ion desde el dedo del pie en blanco en el contenido de ion ahora vacío en un componente de tarjeta de iones dentro de la tarjeta de iones en una etiqueta de imagen HTML estándar con la fuente establecida en ese archivo que acabas de descargar, que debería ser activos imágenes, aula Dodge, APEC. Para ser un buen ciudadano, también se
debe proporcionar un altar atributos. Estoy usando la palabra aula. 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 clave al lado de la. Mantendré abierta esta terminal la mayor parte del curso, para que no tengamos que rebotar tanto dentro de la terminal. Ingresa el comando NPM. Empieza hasta 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. Cuarto, por conveniencia. También voy a tratar de mantener abierto el navegador y tener todo girando en pantalla completa . Juntos se puede ver la página principal renderizada con su nuevo título, la Tarjeta Ion y la imagen Volver en el código y un componente de cabecera de tarjeta iónica por sí mismo. Esto no hará mucho tan inmediatamente dentro de eso en una tarjeta iónica. Subtítulo con el texto Gestor de asistencia en 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 de iones envuelva el subtítulo titulado Elementos y busque unclos impuestos html Después de que los encabezados de la
tarjeta de iones cierre etiqueta en una etiqueta de contenido de la tarjeta de iones. 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 un enlace a la página de roster, que construirá poco después de la etiqueta de párrafo en una etiqueta de anclaje HTML con dos atributos . Un enlace de enrutador establecido en roster y dirección alrededor establecida para avanzar. Dentro de la etiqueta le proporciona textos como Go to Roster. Esto creará un botón con declarado de navegación para que podamos ir a la página de roster una vez que exista. El motivo por el que usamos link router en lugar del típico a tree de atributos es para que Ionic potencie la animación de navegación. Para nosotros, la dirección del router significa utilizar las plataformas dirección de animación hacia adelante típica. Podríamos también haber especificado de nuevo una ruta que nos hubiera dado una
animación ligeramente diferente . Guardar la página. Se puede ver el enlace renderizado. No obstante hacer clic en él no hará nada. 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. Afrontaremos eso ahora, pero creando lo que podría decirse que será la página más complicada de la aplicación para crear una nueva página iónica. Podemos usar los Iónicos, Eli o el Ojo de Mar Angular. Una de las cosas que más me gusta de usar angular con Ionic es la rica plantilla ing que angular trae a la mesa. Como ya hemos visto, Ionic delega gran parte de sus operaciones de línea de comando al cli angular subyacente aumentándolo en su caso, crear páginas es uno de estos tiempos apropiados en la terminal. Voy a detener el comando de inicio de NPM y voy a estar bajo el comando Ionic Generate page roster, la opción Death Stash Dry Dash Run. Me gusta usar la opción de carrera seca ya que tengo la oportunidad de ver qué va a pasar en las cosas de retocar si no me gusta lo que veo. El superior que obtienen me muestra dos cosas aquí, una que creará una nueva carpeta de roster, una página, un módulo separado para esa página, algunas pruebas unitarias y estilos. Además agrega automáticamente la página al sistema de enrutamiento de ábside para que puedas ver gran parte del trabajo
gruñido que ha hecho por ti. También tengo un mensaje de que la CLI Iónica está lista para ser actualizada por sí misma y voy a seguir adelante y hacer eso. Pero no te voy a hacer mirar. Voy a seguir adelante y volver a ejecutar ese mismo comando esta vez sin la opción de carrera en seco, porque estoy contento con lo que me va a conseguir. Porque paré el servidor. Voy a seguir adelante y volver a ejecutarlo con inicio de NPM. Ahora que está terminado de construir, puedo volver a renderizar la página principal. Una vez que haga clic en ese enlace de
la lista, se mostrará la página de la lista predeterminada simplemente grand. No hay mucho ahí, pero podemos ocuparnos de eso en breve.
13. Servicio de estudiantes: antes de que rellenemos la página de la lista. Tenemos que conseguir que algunos estudiantes muestren más adelante querrán atar la lista a un día para almacenar algún tipo, pero no necesitamos hacer eso solo para que el David se muestre en la página. Para eso, voy a utilizar un sencillo servicio de estudiantes que podemos inyectar en las páginas que lo necesitan. Una vez más, usemos la CLI para crear el servicio. En este caso, no
importa si usamos la CLI angular o los Ionics Eli. Entonces para sacudir un poco las cosas, usemos la CLI angular. Ingresa el comando N g G para generar estudiantes de servicio, que es el nombre del servicio y nuevamente, usa el comando dry run. Este comando no funcionó y aquí está el porqué. Cuando instalamos el paquete Ionic CLI, lo
instalamos globalmente. No obstante, el inicio Iónico commit cuando crea un proyecto iónico instalado. El aliado de NGC localmente es la dependencia local del proyecto, por lo que no está en mi camino. Mi sistema no sabe dónde encontrarlo. Hay dos formas de evitar que podemos instalar el NGC por igual globalmente o
podemos usar un pequeño comando de utilidad proporcionado por note y en PM llamado MPX. Si pre escribimos el mismo comando con N P X, esa herramienta sabe buscar dentro de mi carpeta Módulos de nodo para el comando que especificó. Entonces, solo volvamos a ejecutar eso dentro de P X, y ahora lo verás funcionar. Y de nuevo, estamos usando dry run para ver qué va a dio. Por defecto, el servicio se creará en la carpeta APP, pero no dentro de una carpeta propia, y se creará con la prueba unitaria. Ahora sigamos adelante y lo corremos de nuevo sin el conductor y bandera cuando esté terminado. Alumnos abiertos punto de servicio ts. Dentro de este archivo se creará una constante de interfaz y una función. Creará un objeto estudiantil como interfaz. Recuerde, las interfaces no existen en el script Java y desaparecen por completo al compilar. Su único propósito es que nosotros habilitemos el tipo de parámetro, comprobando la finalización del código e intel un sentido dentro del código Entrar. 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 esos interrogantes 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 de nombre y un apellido. No, señalaría ese campo de estado porque podría parecer un poco extraño al principio, pero esta línea dice que el status es una cadena opcional, pero solo se puede establecer uno de dos valores específicos ya sea presente o ausente. Este es un tiempo compilado mecanografiado sobre la restricción y no tendrá ninguna incidencia en el
script de trabajo que se genera. Lo que hará es evitar que compilemos el código. Si alguna vez tratamos de usar cualquier otro valor para este campo, también proporcionará esta finalización de código al establecer o comparar valores con el campo, lo cual es una buena conveniencia. Vamos a crear una matriz de estudiantes que podamos utilizar en lugar de una base de datos. Por ahora, lo estoy llamando estudiantes Mark. Ahora para la función dentro del cuerpo de la clase, vamos a crear una función llamada get all students. Esto devolverá una copia de la matriz de estudiantes simulados, y lo estoy haciendo con el operador de spread, que esencialmente una taquigrafía por solo hacer una copia poco profunda del Iraq más adelante
encarnará este servicio con más funcionalidad. Pero por ahora, esto nos llevará donde necesitamos estar. 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. Página de rango de estudiantes: Ahora necesitamos poner a esos estudiantes que acabamos de crear en la página del roster. Abrir roster duda page dot ts Justo antes del constructor, necesitamos crear un dedo del pie variable, sostener el array de estudiantes que necesita ser importado del servicio estudiantil. A continuación, vamos a necesitar inyectar una referencia al servicio estudiantil en las páginas. Constructor. Hacemos eso insertando un nuevo parámetro privado llamado Servicio de Estudiantes de Tipo
Servicio de Estudiantes . Sé que es confuso. Asegúrate de obtener la carcasa derecha o angular, y mecanografiado no estará contento contigo. Marcar el parámetro es privado expone automáticamente el parámetro como miembro de la clase de
componente. Es un atajo práctico. Tipos nos proporciona dentro del constructor lo que se llama una función get all students
del servicio estudiantil y una señal de que los resultados de los componentes students array ahora abren el archivo html de la página de
roster para que podamos crear algún mercado para renderizar el estudiantes los encabezados ya fijaron y su título ya fijó el roster. Entonces no hay nada que tengamos que hacer ahí mismo. Espero que el encabezado ion te sea familiar como lo hemos visto en la página principal y también durante la visita guiada. Ya tenemos algo de contenido iónico, pero está en blanco. Entonces dentro de eso, 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 artículos, que a su vez, etiquetas de
rap ion alto en botones, iconos de
iones, capataz ponen campos 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 dentro del ojo en la lista. Debilitar iteró sobre la matriz de estudiantes con una directiva N G cuatro sobre el elemento más externo dentro de la lista. En este caso, será un componente deslizante de ítem ion en el lado de la asignación de la N G cuatro proporcionan let's student de estudiantes. Esto creará un ojo en los artículos forrando oponente y todo lo que hay dentro de él para cada estudiante en la matriz de estudiantes I en el elemento deslizante nos proporcionará una opción de artículo nuevo, deslizar o diapositiva. Dentro de eso habrá una etiqueta de ítem de ion. Este componente encapsulará todo el elemento de la lista que 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 el atributo de ranura de icono para iniciar y establecer el nombre atributos de dos personas contorno de la etiqueta de iones. Enlaza algún texto a los nombres y apellidos de los alumnos 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 icono I. El segundo es exhibirse cuando el alumno está ausente. Entonces para esa izquierda usó 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 agregar la directiva NGF a cada icono. Se evaluará a la verdad. El estatus de los estudiantes está presente. El otro renderizará si el estatus estudiantil está ausente. Tenga en cuenta que es totalmente posible que el estatus de los estudiantes no sea ni valor porque el campo de
estatus 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 inicio del ítem, poco aparece dentro de esa etiqueta en una opción de ítem de iones ú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. Guarda el archivo y actualiza la página. En este punto, la única interactividad es un propio deslizador. Entonces haz clic y arrastra un elemento hacia el inicio del ítem deberías ver el
botón de eliminar , 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 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 iones. 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 cancelado . 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 los botones de dispositivos IOS con el rodillo destructivo renderizado 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 yo desabotonado, nuestra hoja de acciones incluirá botones para marcar a un estudiante está presente o ausente el lead un alumno o cancelar el acción y no hacer nada. Para ello, necesitamos hacer un poco de configurar primero en el archivo roster dot pe dot ts. Tenemos que inyectar el controlador de ovejas de acción en los componentes Constructor. Esto nos permitirá construir una hoja de acciones en respuesta a un clic de botón. A continuación, tenemos que seguir adelante y hacer uso de la hoja real. Entonces voy a poner una función aquí abajo llamada Presentar hoja de acción. Voy a esperar algunas llamadas le devuelvan una promesa. Por lo que la función necesita ser un fregadero. Se aceptará al alumno para que podamos mostrar la hoja de acción adecuada para el alumno se hizo clic. Lo primero que quiero hacer es crear la propia hoja de acción, que hacemos llamando a las hojas de acción. Controladores crean función, crean retornos de promesa. Por lo que queremos esperarlo. Crear toma un único parámetro de opciones, el cual explicaré a medida que avancemos. El primero son los atributos de encabezado, que serán el título de la hoja de acción. Y voy a poner eso a la concatenación de los estudiantes Notificación de nombres y apellidos Estamos recibiendo bastante buena inteligencia aquí. El motivo por el que el código V s se está quejando es porque sabe que necesito agregar unos botones alrededor y aún no lo he hecho, Así que ese es el mínimo desnudo para una hoja de acciones. Pero como estoy seguro de que estarán de acuerdo, eso no sería muy útil. Por lo que el primer botón va a ser la marca presente. Pero así cuando dijiste que es texto para marcar presente, bien dicho es icono para yo y luego proporcionará una función de flecha como su manejador para establecer el estado de los estudiantes
seleccionados para presentar. Y como prometí, notaste que había un sentido de Intel. Muéstrame con el valor legal de los estados. El siguiente botón será el mercado opuesto, ausente y usará el icono I off. O más bien, el icono de contorno ojo fuera. Y su función de manejador también será una función estrecha para establecer el estatus de los estudiantes a ausente. El siguiente botón es el botón de borrar, que usará delete es su etiqueta de texto, el icono de la papelera, y esto es opcional. Entonces si quieres configurar el manejador para que llame a la función delete student, no
me voy a molestar en este momento. En la siguiente lección. Voy a manejar esto de un poco diferente, así que no me voy a molestar en llamar nada. Y recuerda, estos iconos y sus nombres provienen de iconos iónicos dot com y finalmente, el botón de cancelar. Este va a tener un texto de cancel y tipo de cierre, y podemos establecer el rol para cancelar y no molestar con la función de manejador en absoluto, y eso completa la creación de la hoja de acciones. Tener la hoja del actor en realidad no hará nada, sin embargo, hasta que llamemos presente. Entonces, como dije, los controladores de hoja reales crean función volver a la promesa. Por lo que esperamos esa tienda de promesas, resultado de la promesa en la hoja de acción constante. Y sólo entonces podemos llamar presente, que también va a devolver una promesa. Por lo que esperamos hoja de acción punto presente. Siguiente. Vamos a crear una función para eliminar a un estudiante. A pesar de que no estoy llamando en esta lección, quiero configurarla en caso de que quieras jugar y llamarte a ti mismo. El código simplemente filtrará la matriz de estudiantes que obtuvimos del servicio estudiantil siguiente izquierda en un botón para lanzar la hoja de acción. Y eso lo hacemos en el marcado de página de roster y una etiqueta de botones de iones inmediatamente después de los dos ícono
existentes y justo antes del impuesto de cierre de ítem iónico. Dale a la etiqueta de botones de ion una ranura después y dijo su final, lo que
significa que aparecerá al final del artículo. A continuación, añadir a las etiquetas de botón de ion como Hijos de los botones etiquetan de nuevo. Observa esos singulares y plural dentro de cada botón a un ojo en mi calma con
los atributos de la ranura , dicho icono del dedo del pie en Lee, especifica el icono del primero como elipsis contorno horizontal y establece el 2do 1 a Chevron reenviar el contorno en un manejador de clics al botón con los puntos suspensivos cuando se hace clic. Queremos llamar a la presente función de hoja de acción, pasando al alumno actual de su camino. 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. Acabo de notar algo que olvidamos. Antes mencioné que típicamente en un dispositivo IOS, cualquier cosa con el papel de destructivo como eliminar estaría en rojo. Entonces hay un par de cosas que quiero señalar aquí. El modo de visualización predeterminado para Ionic no es el de Iowa. De hecho, es el diseño de materiales de la forma en que puedes forzarlo a cambiar. Basta con abrir las herramientas de desarrollador y chrome. Déjame sólo arreglar esto. Poner las herramientas de desarrollador en la parte inferior, y entonces, ¿qué pasa si seleccionamos el modo de barra de herramientas del dispositivo? Entonces podemos decirle cómo queríamos actuar. Entonces déjame bajar esto por ti. Ahora es simplemente en respuesta del motor. Pero específicamente puedo decirle que entre en lo que esencialmente es una versión para iPhone, e incluso llegamos con el modelo apropiado, incluso consiguiendo el marco adecuado del dispositivo. Pero lo que verás aquí es, si hago clic en
él, sigue en el diseño de materiales. Entonces la forma de arreglar eso es refrescar la página, que voy a hacer con Command son ahora. Se puede ver que los iconos se ponen azules. El texto en la barra de título se centró y la fuente cambió. Entonces ahora es un modo IOS. Chrome ahora está informando a Ionic que se trata de un dispositivo IOS, que es realmente esbelto, pero ahora nota lo que sucede cuando traigo la hoja de acción. El plomo aún no se lee, y probablemente viste por qué me acordé de hacerlo con esto. El botón de borrar. Aquí se puede ver el color es peligro. Por lo que si vuelves a roster dot page dot ts, donde se define la hoja de acción, puedes ver al lead le falta algo. Le falta su papel. Todo lo que necesitamos hacer es darle un rollo de destructivo. Una vez que le damos ese rol, guardamos el archivo, los enders traseros de página. Y ahora se lee como esperábamos. Por lo que me alegra recordar hacer eso antes de terminar esta lección. Guardaremos el resto de la funcionalidad para una 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 del roster 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 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 delete 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 Dentro del código de componentes de
las páginas de roster necesitas inyectar dialectos. Controlador de alerta en el constructor. Asegúrate de que se importe en la parte superior del archivo. A continuación, cree una nueva función llamada presente Eliminar alerta. Necesita aceptar un objeto de estudiante al igual que presentar estrategia de hoja de acción entre crear la hoja de acciones y la alerta de eliminación. Casi idéntico. El crear función toma y opciones objeto tal como los controladores de agitación de acción crean función y devuelve una promesa que resulta a la alerta. Son tres atributos que controlaban el texto dentro y yo una alerta. El atributo de cabecera es una cadena que aparece en la parte superior de la obra. Te algo así como borrar a este estudiante. El sub encabezado atributos aparece justo dentro del cuerpo de alerta establecido esto después de ser para despertar Capitán Nación de los estudiantes nombres y apellidos. Por lo que el usuario sabe con certeza exactamente qué estudiante está a punto de ser borrado. El atributo de mensaje es el cuerpo principal de la alerta usar la cadena como esta operación no se puede deshacer. Por último, la alerta necesita una matriz de botones. Defines estos botones exactamente de la misma manera que lo hiciste para la hoja real. El primer botón es el botón de borrar. Necesita un manejador que elimine al alumno. El segundo botón debe ser un botón de cancelación con el rol de cancel. Voy a usar el texto. No importa que no necesita un manejador. Ahora. Alambre de remolque todo esto juntos. Desplácese hasta la presente función de hoja de acciones. Encuentra el botón de borrar si llamaste. Eliminar estudiante. Se reemplazó eso por una llamada para presentar Eliminar alerta. Si lo omitiste como lo hice, simplemente agrega una función estrecha, como los atributos del manejador, que llamará alerta elite presente. No olvides pasar al estudiante,
si recuerdas, si recuerdas, es otro botón de borrar en la página con uno dentro de la opción de ítem ion, sin embargo, eso sucede no en el archivo componente, sino en el marcado. Así que abre el archivo html de la página de la lista y encuentra el componente de opción de ítem ion llamado delete en un manejador de
clic y coloca la misma llamada en él que hicimos antes. Presentar la alerta de plomo con el alumno en este caso, la variable estudiante proviene de la n G cuatro expresión de nueve en línea. Guarda el archivo y el extremo posterior del navegador Si eres muy águila de ojos, notarás que me olvidé algo. Entonces si seleccionamos eliminar de la hoja de acción, no pasa nada. De igual manera, si dragamos selectivamente, no pasa nada. ¿ Sabes dónde el falso que creamos la alerta? Pero en realidad no lo usamos. Ese fue todo el punto y esperar en primer lugar. Entonces la forma en que lo haces ahora, como llamas a alert dot present exactamente como lo hicimos con la presente función de hoja de acción , también vuelve a prometer, por lo que no es mala idea esperarlo, aunque en realidad no es súper necesario. Entonces intentemos eso de verdad rápido. Guarda el archivo. Fuimos a la página y ahora eliminar nos preguntará. Podemos decir, No importa o podríamos seguir adelante y dejarlo y se ha ido 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 tome medidas? No es importante si el usuario lo echa de menos. 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 vamos a estar haciendo nada de eso. Si quieres personalizar tu ojo en tostadas después de terminar la lección, siéntete libre en el archivo de componentes de roster pages. Necesitamos agregar nuevamente el controlador de tostadas Ionics al constructor. Asegúrate de que se importe en la parte superior. Siguiente modificar eliminar estudiante para crear y presentar inmediatamente notificación de tostadas. Sus atributos de mensaje deben contener una breve declaración en la que se muestre que el estudiante ha sido borrado. Sé lo más detallado que quieras, pero recuerda, el más corto suele ser mejor. La posición de tostada predeterminada está centrada verticalmente en la pantalla. Decidí moverlo a la parte superior, pero francamente, puedes ponerlo donde quieras. Puedes elegir entre arriba, media o inferior. El atributo de duración controla cuánto tiempo esperará el ojo en el brindis antes de que se
descarte automáticamente . El tiempo de duración es un entero en milisegundos. Ten cuidado de no especificar una duración que sea demasiado corta, y definitivamente no pases una fuerza si omites la duración. Atributo. El brindis permanecerá en la pantalla indefinidamente, requiriendo la intervención del usuario para descartarlo, lo que requeriría un botón si notarás que la espera está subrayada. Y eso es porque no he marcado a estudiante del pueblo como un fregadero que lo hará pasar. Se puede proporcionar una matriz de botones a un ojo en tostadas. Just es con la hoja de acción y el yo una alerta. Si te sientes tan inclinado a seguir adelante y sumar uno y finalmente no olvidemos llamar. Presente en el brindis, y eso es todo lo que hay a ello. Guarda el archivo y abandona el navegador. Refrescar. Ahora, cuando elimines 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 tipo tras superposición butto. 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 quieres que un elemento de tu menú cierre el menú cuando lo selecciones, asegúrate de envolverlo con un ojo en el componente de toggle 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. Encuentra una falla. 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 exacto. Tan falso. No me preguntes cuánto tiempo me llevó depurar eso la primera vez que me olvidé de ello. Hay más a un menú, pero esos son lo básico. Así que vamos a construir uno ahora abrir app dot componente que ts Aquí es donde definirá el menú. Dentro de la clase componente creado array de a objeto liberales uno para la página principal con el Ural apropiado y el Icon uno para la página de roster con su roster Tu L Slash y para el ícono, Vamos a usar personas. A continuación viene el menú en sí, dentro de app dot componente dot html a un ion split pain y dijo que su contenido d a significar todo lo demás en la página debe estar dentro del dolor split justo dentro del dolor split y antes de la salida del router en un menú de iones con su contenido i d Después de que me lo dijeran también y dijo Es tipo toe overlay Pushor revelar. Personalmente, soy parcial para superponer, pero usa el valor que prefieras. Esos contenidos que devalúa le dicen a los componentes qué router a lo que van a estar controlando así antes de que nos olvidemos de hacerlo, dijo los componentes de salida del router iónico I. D. 10 Principal. Esto los unirá a todos inmediatamente, dentro del ojo en el menú en un encabezado de iones que contiene una barra de herramientas de iones, y dentro de eso y yo en título, establecí el valor del título al menú justo después del encabezado de ion en un contenido de iones en justo dentro eso y yo en la lista. Aquí es donde se construirá el menú y lo hará Iterando sobre el
array at pages . Crea una etiqueta de toggle de menú iónico con una directiva N G cuatro. Especifique las páginas de APP, la variable de loop y que las páginas tengan el objeto a generar sobre. Como mencioné antes, dijo el auto hide propiedad a false 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. Es que la dirección del router a ninguno, 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. Separando tus elementos de menú es que las líneas se atribuyen a full o a mithi después de él por completo . No soy fan de la forma en que se ve, así que estoy eligiendo ninguno dentro del ítem y un icono de ion con su lote configurado para comenzar y es icono configurado en el icono de punto de página AP nuevamente prestar atención a esa sintaxis de enlace. A continuación se encuentra el propio título del menú, que implementará con un ojo en la etiqueta con el texto enlazado al título de las páginas. A continuación, necesitamos agregar un botón de menú a ambas páginas. Y no, no
es automático. Así que primero abra la página principal que Kim il dentro de la barra de herramientas de iones justo antes del título de ion, es necesario
agregar un componente de botones de ion con ranura equivale a inicio, luego un componente de botón de menú de iones. 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. 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. Crea la página, componente mismo con el marcado y el código que quieras 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 tienda APP? Entonces voy a iniciar sesión en la tienda de aplicaciones connect dot apple dot com. Entonces como puedes ver, ni siquiera
tiene una Nikon todavía, Así que sigamos adelante y pinchemos sobre ella y miremos lo que tenemos que hacer. Parece que lo que tenemos que hacer es proporcionarme muchas imágenes, las imágenes o algunas de las cosas más difíciles de hacer. Debido a que es un proceso tan manual, hay formas de acelerarlo y de conseguir las capturas de pantalla de su aplicación en acción, Señorita, salte las imágenes por ahora y solo busca el resto de esto, tienes que proporcionar hasta a 170 caracteres de texto promocional. Este es el primer blurb de textos que tus potenciales descargadores verán en la tienda APP . También puedes proporcionar hasta 100 caracteres de palabras clave. Hay todo un arte para seleccionar palabras clave y sus sitios web dedicados al tema. Apple va a requerir apoyo. ¿ A dónde puede ir la gente? Si tienen preguntas sobre apoyar la aplicación, también
puedes brindarte un marketing tú, Earl, que es un poco diferente. Esta será una chica que está disponible en la tienda APP en la que la gente puede hacer clic para encontrar más información que tienes que proporcionar al menos para apoyar. Estás enfermo. No tienes que suplir la mercadotecnia Te Earl descripciones donde puedes
divertirte mucho . Aquí es donde quieres contar la historia de tu aplicación. Tienes hasta 4000 personajes para hacerlo. Mi recomendación aquí es que pases mucho tiempo construyendo esta descripción. Piénsalo. Es 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 aplicación de mensajes EI para el Apple Watch. Entonces voy a saltarme esos. No digo que no sea importante, pero aquí no es relevante. A medida que te desplazas hacia abajo, llegas a la sección de compilación. Entonces lo que tenemos aquí es que tenemos que entrar, seleccionar una compilación de nuestra aplicación, y al parecer le falta algo y voy a buscar en eso, ver si incluso nos permitirá seleccionarlo. Quiere saber si estoy rompiendo alguna ley de exportación encriptada de Estados Unidos y por lo que sé, tomar asistencia no. Entonces voy a seguir adelante y dar click. No, no
estamos haciendo ninguna llamada https, así que voy a seguir adelante y hacer click. El icono de la aplicación, como se puede ver, es el predeterminado del condensador. Entonces para poder arreglar eso, tendremos que volver a entrar en X coat y a los iconos correctos que queremos ahí y luego subir un nuevo construido. Eso lo haremos más tarde. Yo solo quiero pasar por todo en APP Store Connect primero. El versión. Creo que sacó derecho del paquete de aplicación. Aquí. Es necesario explicar quién es el propietario de los derechos de autor, quién es el dueño de los derechos de la solicitud y debe ser usted. Necesitamos proporcionar una calificación de edad, y eso 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édicos,
ni alcohol, ni juegos de azar. Ciertamente ninguna desnudez no accede a la Web en
absoluto, al menos no actualmente. Tampoco 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 es algo importante a que prestar atención, porque es posible que tengas cuentas protegidas por contraseña en tu aplicación. No tan simplemente saltamos 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. Para entender cómo usar tu aplicación y estas dos últimas, ¿
cuándo quieres que liberen la aplicación al público? Puedes hacerlo manualmente. Se puede masa automáticamente, que es la culpa, o se puede especificar una fecha. No sueltes antes de esta fecha en particular en el tiempo. Y luego finalmente, publicidad ¿Utiliza tu aplicación? Agrega, ¿Muestra anuncios y ofende que de la manera difícil hace mucho tiempo que si utilizas Google AdSense que condesa, di que sí, y si le dices que no y tu aplicación realmente
lo hace, se pondrá rechazado. La asistencia media no lo hace. Pero solo quería hacer clic en invitados solo para mostrar cuáles son las otras opciones y requisitos . Entonces digamos que vamos a servir anuncios, pero no vamos a vincular APS juntos para que los anuncios puedan estar relacionados. Creo que eso es lo que es el 2do 1. Nunca he hecho otra cosa que simplemente servir en, así que nunca he comprobado ni las jukeboxes y debes hacer clic en esta o no puedes continuar. Y luego de nuevo, asegúrate de mirar ese texto leído. Si respondes las preguntas incorrectamente y ellos se
enteran, rechazarán tu aplicación, quitarán de la tienda APP, emitirán una advertencia y si lo vuelves a hacer, pueden prohibir tu cuenta enteramente. Déjame rodar Desplazamiento 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 Capas de Pantalla y en los preestrenos
24. 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.
25. 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.
26. Materiales adicionales: 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. 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.