Las aplicaciones híbridas han sido la sensación en los últimos años y por una buena razón. Con su facilidad de desarrollo para desarrolladores web, su potente rendimiento y su posibilidad de uso versátil, las aplicaciones híbridas superan a las aplicaciones nativas en muchas fronteras. Ionic ha estado a la vanguardia del desarrollo de aplicaciones híbridas durante los últimos años, y está mejorando. Con el lanzamiento del último marco Ionic 5 , la estabilidad general de las aplicaciones ha aumentado nuevamente.
Llevamos un tiempo escribiendo sobre temas complejos en Ionic 5 . En esta publicación de blog, leeremos sobre los aspectos básicos de una aplicación Ionic 5 y cómo crear una. A medida que el ecosistema cambia y surgen nuevos comandos CLI, se han cambiado muchas cosas en Ionic.
Hay algunos marcos de front-end que se pueden usar en una aplicación Ionic.
- Angular : logre el máximo potencial posible en la plataforma web hoy y llévelo más allá, a través de Web Workers y la representación del lado del servidor Angular le permite controlar la escalabilidad. Satisface requerimientos enormes de data construyendo modelos de data en RxJS, Immutable.js o algún otro modelo-de-empuje.
- React : React facilita la creación de interfaces de usuario interactivas. Diseñe vistas simples para cada estado en su aplicación, y React actualizará y renderizará de manera eficiente los componentes correctos cuando cambien sus datos. Las vistas declarativas hacen que su código sea más predecible y más fácil de depurar.
- Vue - Vue es un marco progresivo para crear interfaces de usuario. A diferencia de otros marcos monolíticos, Vue está diseñado desde cero para ser adoptable de forma incremental.
Por ahora, Angular y React son bien estables en Ionic Community y se usan ampliamente en la industria, pero Ionic Vue todavía está en camino hacia el lanzamiento oficial.
Con respecto al entorno de construcción / tiempo de ejecución, Ionic ahora es compatible con Cordova y Capacitor. Si bien Cordova es el mayor, con una comunidad más grande y construcciones estables, Capacitor está subiendo rápidamente la escalera y también cuenta con el apoyo de una comunidad en crecimiento.
¿Qué es Ionic?
Ionic es un SDK completo de código abierto para el desarrollo de aplicaciones móviles híbridas creado por Max Lynch, Ben Sperry y Adam Bradley de Drifty Co. en 2013. Ionic proporciona herramientas y servicios para desarrollar aplicaciones móviles híbridas utilizando tecnologías web como CSS, HTML5 y Hablar con descaro a. Las aplicaciones pueden crearse con estas tecnologías web y luego distribuirse a través de tiendas de aplicaciones nativas para instalarlas en los dispositivos.
Podemos usar Cordova o Capacitor para crear estas increíbles aplicaciones y tener funcionalidades nativas. Con esto, obtenemos algunos complementos nativos increíbles para usar como Recortador de imágenes, Cámara y muchos más.
¿Qué es Córdoba?
Cordova (o Apache Cordova) permite a los programadores de software crear aplicaciones para dispositivos móviles utilizando CSS3, HTML5 y JavaScript en lugar de depender de API específicas de la plataforma como las de Android, iOS o Windows Phone. Amplía las funciones de HTML y JavaScript para que funcionen con el dispositivo. Córdoba ha existido durante mucho tiempo, incluso antes de que comenzara el Ionic.Ionic es en realidad otra envoltura encima de Cordova. Cordova tiene las capacidades básicas de HTML / CSS / JS → Native, mientras que Ionic potencia diseños más limpios y potentes y administración general de aplicaciones en la parte superior de Cordova
En otras palabras, si crea aplicaciones nativas en Android, codifica en Java. Si crea aplicaciones nativas en iOS, codifica en Obj-C o Swift. Ambos son lenguajes poderosos pero complejos. Con Cordova (e Ionic) puedes escribir una sola pieza de código para tu aplicación que se puede ejecutar tanto en iOS como en Android (¡y en Windows!), Eso también con la simplicidad de HTML, CSS y JS.
Ionic comenzó con AngularJS como marco subyacente, pero ahora se ha extendido a Angular e incluso a React .
¿Qué es el condensador?
Cordova ayuda a construir una aplicación web Ionic en una aplicación instalable en un dispositivo. Pero existen algunas limitaciones de Cordova, que Capacitor intenta superar con un nuevo flujo de trabajo de la aplicación.
Capacitor es un tiempo de ejecución de aplicaciones multiplataforma que facilita la creación de aplicaciones web que se ejecutan de forma nativa en iOS, Android, Electron y la web. La gente de Ionic llama a estas aplicaciones «aplicaciones web nativas progresivas» y representan la próxima evolución más allá de las aplicaciones híbridas.
Capacitor es muy similar a Cordova, pero con algunas diferencias clave en el flujo de trabajo de la aplicación
Aquí están las diferencias entre Cordova y Capacitor
- Capacitor considera que cada proyecto de plataforma es un activo de origen en lugar de un activo de tiempo de construcción . Eso significa que Capacitor quiere que mantenga el código fuente de la plataforma en el repositorio, a diferencia de Cordova, que siempre asume que generará el código de la plataforma en el momento de la compilación.
- Debido a lo anterior, Capacitor no usa
config.xmlO ninguna configuración personalizada similar para la configuración de la plataforma. En cambio, los cambios de configuración se realizan editandoAndroidManifest.xmlpara Android yInfo.plistpara Xcode - El capacitor no se «ejecuta en el dispositivo» ni se emula a través de la línea de comandos. En cambio, estas operaciones se producen a través del IDE específico de la plataforma. Por lo tanto, no puede ejecutar una aplicación de condensador iónico con un comando como
ionic run ios. Tendrá que ejecutar aplicaciones de iOS con Xcode y aplicaciones de Android con Android Studio - Dado que el código de la plataforma no es un activo de origen, puede cambiar directamente el código nativo utilizando Xcode o Android Studio. Esto da más flexibilidad a los desarrolladores.
En esencia, Capacitor es como una versión fresca y más flexible de Cordova, construida especialmente para el tipo de marco Ionic.
Configurar una aplicación Ionic 5
Entonces, ¿qué herramientas necesitas para el desarrollo de aplicaciones Ionic 5? Bueno, aqui esta la lista
- Una computadora (¡Duh!) 💻
- Marco NodeJS instalado: NodeJS es un marco de servidor en JS (v10.15.03 en el momento de esta publicación de blog, sin embargo, 12.x también es muy estable ahora)
- NPM : administrador de paquetes de nodos (v6.10.2 en el momento de esta publicación de blog)
- Ionic CLI : la herramienta de línea de comandos instalada en el sistema operativo para la aplicación (v6.10.2 en el momento de la publicación del blog)
También necesitará el navegador más reciente para el entorno de desarrollo. Para crear compilaciones de producción en Android e iOS, necesitaría Android Studio y XCode respectivamente.
Instale el nodo descargando el paquete compatible desde su sitio web . NPM se instala junto con node.js. NPM se utiliza para otras instalaciones. Asegúrese de instalar la versión LTS del nodo, no la última. (La versión LTS del nodo es ~ 12.13.0 en el momento de esta publicación)
Para verificar las instalaciones, ejecute estos comandos en su terminal
$ node --version
$ npm --versionInstale Ionic usando
npm install -g @ionic/cliY estás listo para irte. Verifique la información de su entorno usando
$ ionic info
Esto mostrará su entorno de ejecución, algo como lo siguiente (las herramientas del SDK de Android y XCode requerirán instalaciones por separado)
Puede instalar la última versión de Android Studio desde su sitio web. XCode solo se puede instalar en sistemas Apple.
Creación de una aplicación Ionic 5
Una vez que su entorno de desarrollo está configurado, crear una aplicación Ionic 5 es tan fácil como ejecutar un comando
$ ionic startAhora, después de ejecutar el comando anterior, tenemos dos opciones para elegir entre una es Angular y la otra es React.
No se preocupe por elegir cualquiera de ellos, los revisaremos individualmente. (Al principio, iremos con Angular)
Después de eso, le pedirá el Nombre del proyecto , puede dar el nombre que desee y después de eso, le pedirá el diseño que desea elegir para su aplicación y le dará tres opciones como en blanco, menú lateral y pestañas.
Después de eso, le pedirá que integre su aplicación con Capacitor o no.
Ahora puede elegir sí o no , repasaremos ambos en el siguiente tutorial. (Al principio, iremos con la opción No ya que la integrará con Cordova automáticamente)
En lugar del proceso paso a paso anterior, también puede escribir un comando para todo. Aquí hay algunos comandos para mostrar las posibles variaciones.
$ ionic init // comando de inicio interactivo simple $ ionic start --list // enumera las plantillas de inicio disponibles $ ionic start myApp // comando de inicio interactivo con el nombre de la aplicación $ ionic start myApp blank // inicio interactivo con nombre y tipo $ ionic start myApp tabs --cordova // comienza con angular cordova $ ionic start myApp tabs --capacitor // comienza con capacitor angular $ ionic start myApp super --type = ionic-angular // comienza con angular $ ionic start "Mi aplicación" en blanco --type = react --capacitor
Eso es todo lo que se necesita para crear una aplicación Ionic. Presione enter e instalará la plantilla básica de la aplicación directamente en su sistema
Para ejecutar la aplicación en el navegador, ejecútelo en el directorio raíz de su proyecto
$ ionic services
Esto ejecutará la aplicación en un entorno de desarrollo en su navegador predeterminado. la URL serálocalhost:8100El entorno de desarrollo en Ionic no (no puede) utilizar Cordova. Cordova solo se ejecuta en dispositivos. Por lo tanto, no puede usar los complementos nativos de Ionic en el entorno del navegador. El entorno de desarrollo iónico solo usa el Angular subyacente (o React) para ejecutar la aplicación en el navegador
Digamos que ejecutó ionic start myApp sidemenu, obtendrá una plantilla de menú lateral cargada en su Chrome. Para verlo en un formato móvil, haga clic con el botón derecho en el navegador y seleccione Inspect Element. Cambie el modo del dispositivo usando el icono del dispositivo.
Entonces, ahora que tiene su aplicación Ionic ejecutándose en el navegador, es hora de comprender la estructura del código y luego hacer algunos cambios.
Se utiliza la pila angular para crear una aplicación y enrutamiento, por lo que su aplicación puede estar en línea con el resto del gran ecosistema Angular.
Ionic proporciona @ionic/angular-toolkit, que se construye e integra con la CLI oficial de Angular y proporciona características que son específicas para@ionic/angular
1. Angular Córdoba 😎
El uso de Cordova con Angular es uno de los más comunes para crear aplicaciones del mundo real. Ahora repasaremos todos los comandos y el flujo de aplicaciones para usar angular con iónico.
Estructura de código
Ionic crea una estructura predeterminada cada vez que crea una aplicación con ionic start. Entendamos la estructura
Complementos
La carpeta de complementos contendrá las características / complementos nativos iónicos que nos ayudarán a usar características nativas móviles como la cámara, el recortador de imágenes y muchas más.
El complemento $ ionic cordova agrega <nombre del complemento>
Puede usar el comando anterior para agregar un complemento en particular en su proyecto.
Plataformas
La carpeta Platforms tendrá el código nativo / JAVA de Android e iOS que finalmente se compila durante la construcción de la aplicación móvil.
La plataforma $ ionic cordova agrega <platform-name>
Aquí podemos tener Android e iOS como el nombre de la plataforma en el comando anterior.
Código fuente
srcLa carpeta contiene la mayor parte del código de la aplicación. Todas las páginas, servicios, componentes y estilos se encuentran dentro de esto. Será similar a cualquier proyecto angular.
assetsLa carpeta contiene todos los archivos estáticos del proyecto: imágenes, fuentes, etc.
environmentsLa carpeta se puede utilizar para definir la configuración del entorno. por defecto, tiene dos archivos, uno para devy otro para prodentorno. Estas configuraciones pueden ser iguales o diferentes dependiendo de su configuración devvs. prodPor ejemplo, puede definir una configuración de servidor para el desarrollo mientras tiene otra configuración de servidor de producción para el prodentorno.
themeLa carpeta se puede utilizar para definir variables de estilo. Ionic 5 usa variables CSS para definir una variedad de parámetros de estilo como colores primarios, tamaños de fuente, familia de fuentes y mucho más. Puede utilizar esta carpeta para crear variables de estilo globales.
global.scss : Define el estilo global que debe aplicarse a toda la aplicación.
index.html - es el archivo HTML de inicio que inicia la aplicación. Después de todo, las aplicaciones Ionic se basan en vistas web.
Dentro de la srccarpeta, tiene los apparchivos predeterminados que contienen la configuración global de la aplicación
app.routing.module.ts - Contiene información relacionada con la navegación de la página.
app.component.html : Define el HTML principal de la aplicación. Esto contiene un menú lateral en nuestro ejemplo.
app.component.ts - es el archivo Javascript para app.component.html. Generalmente, cualquier código que deba ejecutarse inmediatamente después de la carga de la aplicación se escribe en este archivo.
app.module.ts - es el archivo de «módulo» para el módulo principal, o puede decir para toda la aplicación. Define qué módulos se incluyen en la aplicación. Es un archivo muy importante cuando se trata de construir una compilación de producción.
Puedes ver los módulos básicos importados en la imagen de arriba. Tratemos de entender un poco más las cosas aquí.
2. Condensador angular😎
El condensador se puede conectar cuando crea una nueva aplicación Ionic usando
$ ionic start AppName menú lateral --capacitor
El condensador también se puede conectar a una aplicación Ionic existente. Para conectar Capacitor a su aplicación Ionic existente, ejecute
PS ionic integrations enable capacitor
Esto conectará Capacitor a su aplicación Ionic. Después de esto, tienes que ir a initla aplicación Capacitor con
$ npx cap init
Le preguntará el nombre y la identificación de la aplicación. Dale el nombre a la aplicación que quieras. El ID de la aplicación es el identificador de dominio de su aplicación (por ejemplo:) com.example.app.
Debe crear el código y los activos de su aplicación para copiarlos en plataformas individuales (Android e iOS). Para compilar el código y los activos, ejecute
$ ionic construct
El uso de Capacitor no cambia mucho, solo el flujo de la aplicación y los comandos cambian, incluso podemos usar la mayoría de los complementos de Cordova en Capacitor usando el comando npm install .
Plataformas
Podemos agregar una plataforma o el código de compilación nativo / JAVA de Android e iOS usando el siguiente comando
// Agregar plataforma Android $ npx cap agregar <android o ios>
// Copiar todos los cambios a la plataforma AndroidSincronización de límite de $ npx
Agrega la plataforma de Android a su proyecto actual y copia cualquier activo web a su proyecto actual y si desea copiar solo activos web, que es más rápido, puede ejecutar el comando debajo
Copia de límite de $ npx
Importante : antes de cada comando
npx cap synco
npx cap copy, si ha habido algún cambio de código, debe asegurarse de ejecutar el
ionic buildcomando
Aquí en Capacitor, podemos agregar una plataforma androido iOSen nuestro proyecto.
Para crear la aplicación desde Android Studio, abra el editor usando
// Abra el proyecto en Android Studio o xcode en consecuencia $ npx cap abierto <android o ios>
Para construir la aplicación en iOS, primero deberá crear la plataforma, y luego cden la carpeta de la plataforma y ejecutar el siguiente comando para instalar todas las dependencias
$ pod install
Una vez instalados los Pods, puede abrir la aplicación en Xcode y ejecutarla en su dispositivo o simulador.
El resto de la estructura del código fuente sigue siendo la misma en Angular Cordova y Angular Capacitor. Incluso algunos complementos de Cordova se pueden usar en Capacitor porque Capacitor no tiene el suyo por ahora. Lea más sobre el uso de complementos de Cordova en Capacitor aquí .
Avanzado: comprensión de app.module.ts
declaraciones
En la sección de declaraciones , debemos incluir todos los componentes , directivas y canalizaciones que creamos como parte de nuestra aplicación. Si no los incluye aquí, obtendrá un error cuando intente usarlos en su aplicación porque Angular no podrá reconocerlos en su código.
importaciones
En la sección de importaciones , vemos que el IonicModule se importa y eso establece el componente de la aplicación raíz.
IonicModule contiene todos los componentes, directivas y servicios del marco Ionic y, al importar el módulo aquí, los ponemos a disposición de nuestra aplicación.
AppRoutingModule también se importa aquí. Puede importar otros módulos angulares aquí que quizás desee utilizar en su aplicación.
node
En la sección de arranque , configuramos qué componentes se crean al iniciar la aplicación.
Por lo general, solo encontrará un componente en esta matriz. En este caso, ese es el AppComponent , que es el componente raíz de Ionic, que es responsable de cargar nuestro componente MyApp .
Si echas un vistazo a index.html , verás que <app-root>el selector de IonicApp está incluido en el archivo<body> . Al inicio de la aplicación, Angular creará una instancia del componente raíz y la insertará en el lugar del <app-root>elemento.
<!-- Ionic's root component and where the app will load -->
entryComponents
En la sección entryComponents , definimos cualquier componente que deba cargarse junto con este módulo. Este es el caso de todos los componentes de la página, ya que todos se cargan a través del controlador de navegación.
Los componentes que se cargan declarativamente (es decir, se hace referencia en la plantilla de otro componente) no necesitan incluirse en la matriz entryComponents .
Puede haber alguna duplicación en la que tengamos que definir nuestros componentes de página tanto en las declaraciones como en las secciones entryComponents . La razón para tener esta sección de componentes de entrada separada es para que Angular pueda compilar un paquete para la aplicación que solo incluirá los componentes que realmente se utilizan dentro de la aplicación.
La carga de módulos dinámicamente es útil cuando desea un primer paquete de implementación más pequeño y lazy Load los módulos / páginas que vendrán más tarde. Puede leer más sobre la carga diferida aquí .
proveedores
En la sección de proveedores , podemos registrar servicios para inyección de dependencia. Cuando registra un servicio en el módulo de la aplicación, se puede utilizar en todos los componentes de su aplicación. Pero siempre puede definir un servicio localmente para una página si no se está utilizando globalmente.
Modificando la aplicación
Entonces tenemos una plantilla básica. Entendemos la estructura y ahora queremos modificar la aplicación según nuestro gusto. Asegúrese de que el ionic serveproceso se esté ejecutando en la terminal.
Modifiquemos la página de inicio de la aplicación, que se encuentra en la src/app/homecarpeta.
Vaya a home.page.htmly cambie el código a seguir
<ion-header> <barra de herramientas de iones> <ranura de botones de iones = "inicio"> <ion-menu-button> </ion-menu-button> </ion-buttons> <título-ión> Hola Mundo </ion-title> </ion-toolbar> </ion-header>
<contenido de iones> <ion-card class = "tarjeta de bienvenida"> <ion-img src = "/ assets / shapes.svg"> </ion-img> <ion-card-header> <ion-card-subtitle> Acabo de empezar </ion-card-subtitle> <ion-card-title> Bienvenido a Mi mundo </ion-card-title> </ion-card-header> <contenido de la tarjeta de iones> <p> ¡Puedo modificar mi aplicación como quiera, muhahahahaha! </p> </ion-card-content> </ion-card> </ion-content>
Guarde su archivo. Tan pronto como guarde el archivo, verá que la aplicación se vuelve a compilar en la terminal.
Has modificado correctamente una aplicación Ionic. Ahora puede continuar agregando más páginas, más lógicas, imágenes, textos, etc. ¡Conviértela en una aplicación destacada!
Agregar una nueva página / servicio / módulo / componente
Agregar una nueva página o componente es muy sistemático en Ionic. Puede utilizar el comando Ionic CLI
$ iónico generar
y te hará las preguntas para crear un nuevo código
O puede usar el comando CLI directo para hacerlo en un solo paso
$ ionic g página "Mi nueva página"
Con este comando, Ionic creará los archivos necesarios para el módulo. Por ejemplo, para una página, creará archivos HTML, SCSS, enrutamiento (ruta angular), especificaciones (prueba), módulo (módulo angular) y página (componente angular).
