En esta sección, aprenderás a configurar tu entorno de desarrollo para comenzar a trabajar con Ionic. Este proceso incluye la instalación de Node.js, Ionic CLI y otros requisitos necesarios para crear y ejecutar aplicaciones Ionic.

Antes de comenzar, asegúrate de tener lo siguiente:

• Un sistema operativo compatible (Windows, macOS o Linux).
• Conexión a Internet para descargar las herramientas necesarias.

Ionic se basa en Node.js, por lo que es necesario instalarlo primero. Node.js incluye npm (Node Package Manager), que se utilizará para instalar Ionic CLI y otras dependencias.

1. Descargar Node.js:

   • Visita la página oficial de Node.js: https://nodejs.org/
   • Descarga la versión LTS (Long Term Support) recomendada para tu sistema operativo.

2. Instalar Node.js:

   • Sigue las instrucciones del instalador para completar la instalación.

3. Verificar la instalación:

   • Abre una terminal o línea de comandos.
   • Ejecuta los siguientes comandos para verificar que Node.js y npm se han instalado correctamente:

     node -v
     npm -v
     

   • Deberías ver los números de versión de Node.js y npm.

Ionic CLI (Command Line Interface) es una herramienta que facilita la creación, desarrollo y despliegue de aplicaciones Ionic.

1. Instalar Ionic CLI:

   • En la terminal, ejecuta el siguiente comando:

     npm install -g @ionic/cli
     

   • El parámetro -g indica que la instalación es global, lo que significa que Ionic CLI estará disponible en todo el sistema.

2. Verificar la instalación:

   • Ejecuta el siguiente comando para asegurarte de que Ionic CLI se ha instalado correctamente:

     ionic -v
     

   • Deberías ver el número de versión de Ionic CLI.

Git es un sistema de control de versiones que te permitirá gestionar el código de tu proyecto y colaborar con otros desarrolladores.

1. Descargar Git:

   • Visita la página oficial de Git: https://git-scm.com/
   • Descarga el instalador adecuado para tu sistema operativo.

2. Instalar Git:

   • Sigue las instrucciones del instalador para completar la instalación.

3. Verificar la instalación:

   • En la terminal, ejecuta el siguiente comando:

     git --version
     

   • Deberías ver el número de versión de Git.

Para desarrollar aplicaciones Ionic, necesitarás un editor de código. Visual Studio Code (VS Code) es una excelente opción debido a su integración con herramientas de desarrollo web y su amplia gama de extensiones.

1. Descargar Visual Studio Code:

   • Visita la página oficial de Visual Studio Code: https://code.visualstudio.com/
   • Descarga el instalador adecuado para tu sistema operativo.

2. Instalar Visual Studio Code:

   • Sigue las instrucciones del instalador para completar la instalación.

3. Instalar Extensiones Recomendadas:

   • Abre Visual Studio Code.
   • Ve a la sección de extensiones (icono de cuadrado en la barra lateral izquierda).
   • Busca e instala las siguientes extensiones:
     • Ionic: Proporciona soporte para el desarrollo de aplicaciones Ionic.
     • Angular Language Service: Mejora la experiencia de desarrollo con Angular, que es el framework subyacente de Ionic.
     • Prettier - Code formatter: Ayuda a mantener un código limpio y bien formateado.

Para asegurarte de que todo está configurado correctamente, vamos a crear un proyecto de prueba.

1. Crear un nuevo proyecto Ionic:

   • En la terminal, navega a la carpeta donde deseas crear tu proyecto.
   • Ejecuta el siguiente comando:

     ionic start myFirstApp blank
     

   • Este comando crea un nuevo proyecto llamado myFirstApp utilizando la plantilla blank.

2. Navegar al directorio del proyecto:

   • Ejecuta el siguiente comando:

     cd myFirstApp
     

3. Ejecutar la aplicación:

   • Ejecuta el siguiente comando para iniciar la aplicación en el navegador:

     ionic serve
     

   • Deberías ver tu aplicación Ionic ejecutándose en el navegador.

¡Felicidades! Has configurado con éxito tu entorno de desarrollo para Ionic. Ahora estás listo para comenzar a crear aplicaciones móviles y web con Ionic. En el próximo módulo, aprenderás sobre los componentes básicos de Ionic y cómo utilizarlos en tus proyectos.