En aquest tema, explorarem l'estructura d'un projecte Apache Cordova. Entendre com està organitzat un projecte és fonamental per treballar de manera eficient i efectiva. A continuació, desglossarem les carpetes i fitxers clau que trobaràs en un projecte Cordova típic.

Quan crees un nou projecte Cordova, es genera una estructura de directoris específica. A continuació, es mostra una vista general de l'estructura del projecte:

1. hooks/:

   • Aquesta carpeta conté scripts que es poden executar en diferents moments del cicle de vida del projecte (per exemple, abans de construir, després d'instal·lar un plugin, etc.).
   • Els scripts es poden escriure en qualsevol llenguatge que el sistema operatiu pugui executar (per exemple, Bash, Node.js).

2. platforms/:

   • Aquesta carpeta conté el codi específic de cada plataforma (Android, iOS, etc.) que es genera quan afegeixes una plataforma al teu projecte.
   • No és recomanable modificar directament els fitxers dins d'aquesta carpeta, ja que es regeneren cada vegada que es construeix el projecte.

3. plugins/:

   • Aquí es troben els plugins instal·lats al teu projecte. Els plugins són components que permeten accedir a funcionalitats natives del dispositiu (per exemple, càmera, GPS).
   • Cada plugin té la seva pròpia carpeta dins d'aquest directori.

4. www/:

   • Aquesta és la carpeta principal on es troba el codi de la teva aplicació web (HTML, CSS, JavaScript).
   • El contingut d'aquesta carpeta es copia a les carpetes específiques de cada plataforma durant el procés de construcció.

5. config.xml:

   • Aquest fitxer és el cor del teu projecte Cordova. Conté la configuració global del projecte, com ara el nom de l'aplicació, l'identificador del paquet, les preferències de la plataforma, i els plugins que s'utilitzen.
   • És important mantenir aquest fitxer ben organitzat i actualitzat.

6. package.json:

   • Aquest fitxer conté informació sobre el projecte i les seves dependències. És especialment útil si utilitzes Node.js i npm per gestionar les dependències del teu projecte.
   • També pot contenir scripts que pots executar amb npm.

A continuació, es mostra un exemple de com es veu un fitxer config.xml bàsic:

• <widget>: L'element arrel que conté tota la configuració del projecte.
• id: L'identificador únic del paquet de l'aplicació.
• version: La versió actual de l'aplicació.
• <name>: El nom de l'aplicació.
• <description>: Una breu descripció de l'aplicació.
• <author>: Informació sobre l'autor de l'aplicació.
• <content>: El fitxer HTML principal que es carrega quan s'inicia l'aplicació.
• <plugin>: Els plugins que s'utilitzen en el projecte.
• <access>: Les polítiques de seguretat per accedir a recursos externs.

1. Crea un nou projecte Cordova amb el següent comandament:

   cordova create my-cordova-app
   

2. Navega a la carpeta del projecte:

   cd my-cordova-app
   

3. Afegeix una plataforma (per exemple, Android):

   cordova platform add android
   

4. Explora les carpetes i fitxers generats. Identifica les carpetes hooks, platforms, plugins, www, config.xml i package.json.

Després de completar els passos anteriors, hauries de veure una estructura de carpetes similar a la descrita anteriorment. Pren-te el temps per explorar cada carpeta i fitxer per familiaritzar-te amb la seva funció.

Entendre l'estructura d'un projecte Cordova és essencial per gestionar i desenvolupar aplicacions de manera eficient. En aquest tema, hem desglossat les carpetes i fitxers clau que trobaràs en un projecte Cordova típic. Ara estàs preparat per avançar al següent tema, on explorarem els conceptes bàsics i les APIs de Cordova.