En esta sección, aprenderás a crear tu primera aplicación con Ionic. Este proceso incluye la instalación de las herramientas necesarias, la creación de un nuevo proyecto y la ejecución de la aplicación en tu entorno de desarrollo. Vamos a desglosar cada paso para que puedas seguirlo fácilmente.

Para comenzar, necesitas instalar Ionic CLI (Command Line Interface), que es una herramienta que te permitirá crear y gestionar proyectos de Ionic. Asegúrate de tener Node.js y npm (Node Package Manager) instalados en tu sistema.

Abre tu terminal y ejecuta los siguientes comandos para verificar que Node.js y npm están instalados:

Deberías ver las versiones instaladas de Node.js y npm. Si no están instalados, puedes descargarlos e instalarlos desde nodejs.org.

Una vez que tengas Node.js y npm instalados, puedes instalar Ionic CLI globalmente ejecutando el siguiente comando:

Este comando instalará Ionic CLI en tu sistema, permitiéndote usar el comando ionic desde cualquier lugar en tu terminal.

Con Ionic CLI instalado, ahora puedes crear un nuevo proyecto Ionic.

Ejecuta el siguiente comando en tu terminal para crear un nuevo proyecto:

Este comando hará lo siguiente:

• ionic start: Inicia un nuevo proyecto.
• myFirstApp: El nombre de tu proyecto.
• blank: La plantilla que deseas usar. En este caso, estamos usando una plantilla en blanco.

Ionic CLI te pedirá que selecciones el framework que deseas usar (Angular, React o Vue). Para este curso, selecciona Angular.

Después de que el proyecto se haya creado, navega al directorio del proyecto:

Ahora que tienes tu proyecto creado, es hora de ejecutarlo y ver tu aplicación en acción.

Para ejecutar tu aplicación en el navegador, usa el siguiente comando:

Este comando iniciará un servidor de desarrollo y abrirá tu aplicación en el navegador. Deberías ver una página en blanco con el texto "Ionic App".

Para ejecutar tu aplicación en un emulador o dispositivo, necesitas tener configurado Android Studio o Xcode (para iOS). Aquí te mostramos cómo hacerlo para Android:

1. Instalar Android Studio: Descarga e instala Android Studio desde developer.android.com.

2. Configurar Variables de Entorno: Asegúrate de que las variables de entorno ANDROID_HOME y PATH estén configuradas correctamente.

3. Agregar la Plataforma Android: En tu terminal, navega al directorio de tu proyecto y ejecuta:

   ionic capacitor add android
   

4. Abrir el Proyecto en Android Studio: Ejecuta el siguiente comando para abrir tu proyecto en Android Studio:

   ionic capacitor open android
   

5. Ejecutar en un Emulador o Dispositivo: Desde Android Studio, puedes ejecutar tu aplicación en un emulador o dispositivo conectado.

Antes de finalizar, es importante que te familiarices con la estructura del proyecto. Aquí tienes una visión general de los directorios y archivos más importantes:

• src/: Contiene el código fuente de tu aplicación.
  • app/: Contiene los módulos y componentes de tu aplicación.
  • assets/: Contiene recursos estáticos como imágenes y fuentes.
  • environments/: Contiene archivos de configuración para diferentes entornos (desarrollo, producción).
  • index.html: El archivo HTML principal de tu aplicación.
  • main.ts: El punto de entrada principal de tu aplicación.
• capacitor.config.ts: Archivo de configuración de Capacitor.
• package.json: Archivo de configuración de npm que lista las dependencias de tu proyecto.

1. Abre el archivo src/app/home/home.page.html.

2. Modifica el contenido para que muestre un mensaje personalizado, por ejemplo:

   <ion-header>
     <ion-toolbar>
       <ion-title>
         Bienvenido a Mi Primera Aplicación Ionic
       </ion-title>
     </ion-toolbar>
   </ion-header>
   
   <ion-content>
     <ion-card>
       <ion-card-header>
         <ion-card-title>¡Hola Mundo!</ion-card-title>
       </ion-card-header>
       <ion-card-content>
         Esta es tu primera aplicación Ionic.
       </ion-card-content>
     </ion-card>
   </ion-content>
   

3. Guarda los cambios y observa cómo se actualiza la aplicación en el navegador.

El archivo home.page.html debería verse así:

¡Felicidades! Has creado y ejecutado tu primera aplicación Ionic. En esta sección, aprendiste a instalar Ionic CLI, crear un nuevo proyecto, ejecutar la aplicación en el navegador y personalizar la página de inicio. En el próximo módulo, exploraremos los componentes básicos de Ionic y cómo usarlos para construir interfaces de usuario atractivas y funcionales.