En aquest tema, aprendrem com executar i depurar la teva aplicació Ionic. Aquest procés és essencial per assegurar que la teva aplicació funcioni correctament i per identificar i corregir errors. A continuació, es detallen els passos i eines necessàries per aconseguir-ho.

El primer pas per veure la teva aplicació en acció és executar-la en un navegador web. Això és útil per a un desenvolupament ràpid i proves inicials.

Passos:

1. Obre el terminal i navega fins al directori del teu projecte.
2. Executa la comanda següent:

   ionic serve
   

3. Aquesta comanda compilarà la teva aplicació i l'obrirà en el teu navegador predeterminat. També habilitarà el re-carregament automàtic, de manera que qualsevol canvi que facis en el codi es reflectirà immediatament en el navegador.

Per provar la teva aplicació en un entorn més proper a un dispositiu real, pots utilitzar un emulador.

Passos:

1. Instal·la les plataformes que necessites (Android o iOS):

   ionic cordova platform add android
   ionic cordova platform add ios
   

2. Executa la teva aplicació en l'emulador:

   ionic cordova emulate android
   ionic cordova emulate ios
   

Provar la teva aplicació en un dispositiu real és crucial per assegurar-te que tot funcioni correctament en condicions reals.

Passos:

1. Connecta el teu dispositiu al teu ordinador.
2. Executa la teva aplicació en el dispositiu:

   ionic cordova run android
   ionic cordova run ios
   

Els navegadors moderns com Chrome i Firefox ofereixen eines de desenvolupament molt potents que pots utilitzar per depurar la teva aplicació.

Passos:

1. Obre les eines de desenvolupament del teu navegador (F12 o clic dret -> "Inspecciona").
2. Utilitza la consola per veure errors i missatges de depuració.
3. Utilitza el depurador per posar punts de ruptura (breakpoints) i inspeccionar l'estat de la teva aplicació.

Visual Studio Code (VS Code) és una eina molt popular entre els desenvolupadors i ofereix un depurador integrat que pots utilitzar per depurar la teva aplicació Ionic.

Passos:

1. Instal·la l'extensió "Debugger for Chrome" en VS Code.
2. Configura el depurador afegint un fitxer launch.json a la carpeta .vscode del teu projecte:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "chrome",
         "request": "launch",
         "name": "Launch Chrome against localhost",
         "url": "http://localhost:8100",
         "webRoot": "${workspaceFolder}"
       }
     ]
   }
   

3. Executa la teva aplicació amb ionic serve.
4. Inicia el depurador en VS Code (F5).

Depurar en dispositius reals pot ser més complicat, però és essencial per identificar problemes específics del dispositiu.

Passos:

1. Utilitza Chrome DevTools per depurar aplicacions Android:

   • Connecta el teu dispositiu Android al teu ordinador.
   • Obre Chrome i navega a chrome://inspect.
   • Hauries de veure el teu dispositiu llistat. Fes clic a "Inspect" per obrir les DevTools per la teva aplicació.

2. Utilitza Safari Web Inspector per depurar aplicacions iOS:

   • Connecta el teu dispositiu iOS al teu Mac.
   • Obre Safari i navega a Develop -> [El teu dispositiu] -> [La teva aplicació].

1. Obre el terminal i navega fins al directori del teu projecte.
2. Executa ionic serve.
3. Fes un canvi en el codi (per exemple, modifica el text d'una pàgina) i verifica que el canvi es reflecteix automàticament en el navegador.

1. Obre les eines de desenvolupament del navegador.
2. Introdueix un error intencionat en el codi (per exemple, una variable no definida).
3. Observa l'error en la consola i corregeix-lo.

1. Afegeix la plataforma Android al teu projecte amb ionic cordova platform add android.
2. Executa la teva aplicació en l'emulador amb ionic cordova emulate android.

En aquesta secció, hem après com executar i depurar la teva aplicació Ionic en diferents entorns, incloent navegadors, emuladors i dispositius reals. Aquestes habilitats són fonamentals per assegurar que la teva aplicació funcioni correctament i per identificar i corregir errors de manera eficient. En el següent mòdul, explorarem els components bàsics i la navegació en Ionic.