Cómo crear una aplicación Ionic 5

Hay algunos frameworks front-end que se pueden usar en una aplicación Ionic los cuales son:

Angular : le permite controlar la escalabilidad. Satisface requerimientos enormes de data construyendo modelos de data en RxJS, Immutable.js o algún otro push-model. 

React:  facilita la creación de interfaces de usuario interactivas. Permite el diseño de vistas simples para cada estado de aplicación, y React actualiza y renderiza 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: 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 gradualmente. 

Con respecto al entorno de construcción / tiempo de ejecución, Ionic ahora es compatible con Cordova y Capacitor. 

¿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. Extiende las características de HTML y JavaScript para trabajar con el dispositivo. Córdoba ha existido durante mucho tiempo, incluso antes de que comenzara el Ionic.

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.
Entonces, 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) puede escribir una sola pieza de código para su 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.

¿Qué es el Capacitor ?

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. Diferencias entre Cordova y Capacitor

1. 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.
2. 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 editando AndroidManifest.xmlpara Android y Info.plistpara Xcode
3. 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 realizan 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
4. 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 brinda más flexibilidad a los desarrolladores

En esencia, Capacitor es como una versión más flexible de Cordova, construida especialmente para el tipo de marco Ionic.

Configuración de una aplicación Ionic 5

Herramientas que necesitaremos: 

• Framework  NodeJS instalado: NodeJS es un framework  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 nodo (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:

Instale Ionic Usando el siguiente comando:

Verifique la información de su entorno usando el comando:

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, comenzar a crear una aplicación Ionic 5 es tan fácil como ejecutar un comando:

Ahora, después de ejecutar el comando anterior, tenemos dos opciones para elegir entre una es Angular y la otra es React.

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.

Eso es todo lo que se necesita para crear una aplicación Ionic. Presione enter e instalará la plantilla de aplicación básica directamente en su sistema

Para ejecutar la aplicación en el navegador, ejecútelo en el directorio raíz de su proyecto.

Esto ejecutará la aplicación en un entorno de desarrollo en su navegador predeterminado. la URL serálocalhost:8100

El entorno de desarrollo en Ionic 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 Sidemenu 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.

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 compila 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  de Ionic que nos ayudarán a usar características nativas móviles como la cámara, el recortador de imágenes y muchas más.

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 compilación de la aplicación móvil.

Aquí podemos tener Android  e iOS  como el nombre de la plataforma en el comando anterior.

Código fuente:

La carpeta src 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.

La carpeta assets contiene todos los archivos estáticos del proyecto: imágenes, fuentes, etc.

La carpeta environments se puede utilizar para definir la configuración del entorno. de forma predeterminada, tiene dos archivos, uno para dev y otro para prod entorno. Estas configuraciones pueden ser iguales o diferentes dependiendo de su configuración dev vs. prod Por ejemplo, puede definir una configuración de servidor para el desarrollo mientras tiene otra configuración de servidor de producción para el prodentorno.

La carpeta theme 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 se debe aplicar 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 carpeta SRC, tiene los archivos  APP 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 crear una versión de producción.

2. Capacitor angular

El capacitor se puede conectar cuando crea una nueva aplicación Ionic usando el siguiente comando:

El capacitor también se puede conectar a una aplicación Ionic existente. Para conectar Capacitor a su aplicación Ionic existente, ejecute

Esto conectará Capacitor a su aplicación Ionic. Después de esto, tienes que ir a iniciar la aplicación:

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:

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

Agrega la plataforma 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:

Aquí en Capacitor, podemos agregar una plataforma android o iOS en nuestro proyecto.

Para crear la aplicación desde Android Studio, abra el editor usando:

Para construir la aplicación en iOS, primero tendrá que crear la plataforma, y ​​luego cd en la carpeta de la plataforma y ejecutar el siguiente comando para instalar todas las dependencias

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 permanece igual 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.

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 proceso ionic serve  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.html y cambie el siguiente código:

Guarde su archivo. Tan pronto como guarde el archivo, verá que la aplicación se vuelve a compilar en la terminal. Su aplicación en el navegador se actualizará automáticamente.

Has modificado correctamente una aplicación Ionic. Ahora puede continuar agregando más páginas,  imágenes, textos, etc.

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

O puede usar el comando CLI directo para hacerlo en un solo paso

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). Fin.