En aquest tema, aprendrem a crear la nostra primera aplicació amb Ionic. Aquest procés inclou la instal·lació de les eines necessàries, la creació d'un nou projecte, l'exploració de l'estructura del projecte i l'execució de l'aplicació en un emulador o dispositiu real.

Abans de començar, assegura't de tenir instal·lats els següents programes al teu ordinador:

• Node.js (versió 12.x o superior)
• npm (Node Package Manager, que ve amb Node.js)
• Git

L'Ionic CLI (Command Line Interface) és una eina que ens permet crear i gestionar projectes Ionic des de la línia de comandes.

Un cop instal·lat l'Ionic CLI, podem crear un nou projecte. Utilitzarem la plantilla "tabs" per a aquest exemple, que ens proporciona una aplicació amb pestanyes predefinides.

• myFirstApp: Nom del projecte.
• tabs: Tipus de plantilla (altres opcions inclouen blank, sidemenu, etc.).

Després de crear el projecte, naveguem al directori del projecte i explorem la seva estructura.

• src/: Conté el codi font de l'aplicació.
  • app/: Conté els fitxers principals de configuració de l'aplicació.
  • assets/: Conté recursos estàtics com imatges i icones.
  • environments/: Conté configuracions específiques per a diferents entorns (producció, desenvolupament).
  • pages/: Conté les pàgines de l'aplicació.
• www/: Conté els fitxers generats per a la distribució.
• node_modules/: Conté les dependències del projecte.
• package.json: Conté la configuració del projecte i les dependències.

Podem executar l'aplicació en un navegador per veure com es veu i funciona.

Això obrirà una nova pestanya en el teu navegador predeterminat amb l'aplicació en execució. Qualsevol canvi que facis en el codi es reflectirà automàticament gràcies a la funcionalitat de re-carrega en calent.

Per executar l'aplicació en un emulador o dispositiu real, necessitem tenir instal·lats Android Studio o Xcode (per a iOS).

Android

iOS

Crea una aplicació Ionic amb la plantilla "tabs" i executa-la en el teu navegador.

1. Instal·la l'Ionic CLI si no ho has fet ja.
2. Crea un nou projecte amb el nom myFirstApp utilitzant la plantilla tabs.
3. Navega al directori del projecte.
4. Executa l'aplicació en el teu navegador.

En aquest tema, hem après a crear la nostra primera aplicació Ionic, explorar l'estructura del projecte i executar l'aplicació en un navegador o dispositiu real. Aquestes habilitats són fonamentals per a qualsevol desenvolupador que vulgui treballar amb Ionic. En el proper tema, aprofundirem en l'estructura del projecte per entendre millor com funciona una aplicació Ionic.