En aquest tema, aprendrem a configurar l'entorn necessari per començar a desenvolupar aplicacions amb Ionic. Aquest procés inclou la instal·lació de Node.js, l'Angular CLI, i l'Ionic CLI, així com la creació d'un projecte bàsic per assegurar-nos que tot està funcionant correctament.

Ionic requereix Node.js per funcionar. Node.js és un entorn d'execució per a JavaScript que ens permet utilitzar JavaScript fora del navegador.

1. Descarregar Node.js:

   • Visita la pàgina oficial de Node.js: https://nodejs.org/
   • Descarrega la versió recomanada per a la majoria d'usuaris (LTS).

2. Instal·lar Node.js:

   • Executa l'instal·lador descarregat i segueix les instruccions de la pantalla.
   • Assegura't que l'opció per instal·lar npm (Node Package Manager) estigui seleccionada.

3. Verificar la instal·lació:

   • Obre una terminal o línia de comandes.
   • Executa les següents comandes per verificar que Node.js i npm s'han instal·lat correctament:

     node -v
     npm -v
     

   • Hauries de veure les versions instal·lades de Node.js i npm.

Ionic es basa en Angular, així que necessitem instal·lar l'Angular CLI (Command Line Interface) per gestionar els nostres projectes Angular.

1. Instal·lar l'Angular CLI globalment:

   • Executa la següent comanda a la terminal:

     npm install -g @angular/cli
     

2. Verificar la instal·lació:

   • Executa la següent comanda per assegurar-te que l'Angular CLI s'ha instal·lat correctament:

     ng --version
     

L'Ionic CLI és una eina de línia de comandes que ens permet crear, construir, executar i desplegar aplicacions Ionic.

1. Instal·lar l'Ionic CLI globalment:

   • Executa la següent comanda a la terminal:

     npm install -g @ionic/cli
     

2. Verificar la instal·lació:

   • Executa la següent comanda per assegurar-te que l'Ionic CLI s'ha instal·lat correctament:

     ionic --version
     

Ara que tenim tot l'entorn configurat, crearem un nou projecte Ionic per assegurar-nos que tot funciona correctament.

1. Crear un nou projecte:

   • Executa la següent comanda a la terminal:

     ionic start myApp blank
     

   • Aquesta comanda crearà un nou projecte Ionic anomenat myApp utilitzant la plantilla blank.

2. Navegar al directori del projecte:

   • Després de crear el projecte, navega al directori del projecte:

     cd myApp
     

3. Executar l'aplicació:

   • Per veure l'aplicació en acció, executa la següent comanda:

     ionic serve
     

   • Aquesta comanda iniciarà un servidor de desenvolupament i obrirà l'aplicació en el teu navegador per defecte.

En aquesta secció, hem configurat l'entorn de desenvolupament necessari per treballar amb Ionic. Hem instal·lat Node.js, l'Angular CLI i l'Ionic CLI, i hem creat un projecte bàsic per assegurar-nos que tot funciona correctament. Ara estem preparats per començar a desenvolupar aplicacions amb Ionic.

En el següent tema, aprendrem a crear la nostra primera aplicació Ionic i explorarem l'estructura del projecte en detall.