IONIC 7 – Guía sobre como crear tu primera aplicación

19/06/20230 comentarios

Hola a todos, hoy os voy a explicar como crear vuestra primera aplicación en Ionic 7.

Ionic 7 es la nueva versión de este framework para desarrollo de aplicaciones móviles híbridas con la que podemos crear nuestros proyectos para diferentes plataformas como android, ios, etc.

Puedes ver las novedades en su blog.

Instalación Ionic 7

Lo primero es instalar el cliente de comandos de ionic, te dejo un tutorial aqui:

Como instalar Ionic cli

Si ya lo tienes instalado, actualízalo con el siguiente comando:

$ npm update @ionic/cli

Creando nuestro proyecto con Ionic 7

Cuando ya tengamos ionic instalado, podremos ejecutar el siguiente comando:

$ ionic start [options] name

Donde el name será el nombre de nuestra aplicación, por ejemplo:

$ ionic start test-app

Nos pedirá que framework usar (Angular, React, Vue).

Sino indicamos el template, nos lo pedirá por teclado:

Las plantillas son las siguientes:

tabs: aplicación con un sistema de tabs como navegación.

sidemenu: aplicación con un menú incluido.

blank: aplicación vacia.

list: aplicación con una lista.

my-first-app: Ejemplo de aplicación de una galería de fotos, con cámara incluida.

Los más comunes son blank y tabs.

Una novedad que tenemos en ionic 7 en Angular, es elegir el modo de construir nuestra aplicación, teniendo dos opciones:

NgModules: se usan modulos, como se ha hecho hasta ahora.
Standalone: no se necesitan modulos, se importan componentes sueltos.

También tenemos las siguientes opciones:

–list: Muestra la lista de templates disponibles. Alias -l.
–type=<type>: framework a utilizar.
–cordova: Indica si incluir cordova (obsoleto).
–capacitor: Indica si incluir capacitor.
–id=<id>: Especifica el id de la aplicación.
–no-deps: No instala dependencias.
–no-git: No inicializa el repositorio de git.
–project-id=<slug>: especifica el slug de la aplicación.

Modificando nuestro proyecto

En el fichero home.page.html en la ruta src\app\home, cambiaremos el HTML que hay por el siguiente:

  
    
      Mi primera app</pre>
<div id="container">Hola mundo</div>
<pre>

Arrancando nuestro proyecto

Para arrancar nuestro proyecto, ejecutamos el siguiente comando:

$ ionic serve --watch

Cuando se inicie, se abrirá en una pestaña en el navegador.

Recomendación: abre las herramientas de desarrollador con botón secundario – inspeccionar y pulsa en el modo móvil.

Recuerda que si quieres saber más de Ionic, tengo un curso en udemy muy completo donde te enseño paso a paso todo sobre Ionic realizando aplicaciones.