En aquesta secció, aprendrem a crear el teu primer projecte amb Apache Cordova. Aquest procés inclou la instal·lació de les eines necessàries, la creació del projecte i l'execució de l'aplicació en un emulador o dispositiu real.

  1. Instal·lació de les eines necessàries

1.1. Instal·lació de Node.js i npm

Apache Cordova requereix Node.js i npm (Node Package Manager). Si no els tens instal·lats, segueix aquests passos:

  1. Visita la pàgina oficial de Node.js: https://nodejs.org/
  2. Descarrega i instal·la la versió recomanada per a la teva plataforma.
  3. Verifica la instal·lació obrint una terminal i executant:
    node -v
    npm -v
    

1.2. Instal·lació de Cordova

Un cop tinguis Node.js i npm instal·lats, pots instal·lar Cordova globalment:

npm install -g cordova

Verifica la instal·lació de Cordova:

cordova -v

  1. Creació del projecte Cordova

2.1. Crear un nou projecte

Per crear un nou projecte Cordova, utilitza el següent comandament a la terminal:

cordova create myApp com.example.myapp MyApp

Aquesta comanda crea un nou projecte amb:

  • myApp: Nom de la carpeta del projecte.
  • com.example.myapp: Identificador únic del paquet (normalment en format de domini invers).
  • MyApp: Nom de l'aplicació.

2.2. Afegir plataformes

Després de crear el projecte, has d'afegir les plataformes en les quals vols executar la teva aplicació. Per exemple, per afegir Android i iOS:

cd myApp
cordova platform add android
cordova platform add ios

2.3. Instal·lació de plugins necessaris

Els plugins permeten accedir a les funcionalitats natives del dispositiu. Per exemple, per afegir el plugin de la càmera:

cordova plugin add cordova-plugin-camera

  1. Executar el projecte

3.1. Executar en un emulador

Per executar l'aplicació en un emulador, assegura't que tens els emuladors configurats (per exemple, Android Studio per a Android). Després, executa:

cordova emulate android
cordova emulate ios

3.2. Executar en un dispositiu real

Per executar l'aplicació en un dispositiu real, connecta el dispositiu al teu ordinador i executa:

cordova run android
cordova run ios

  1. Comprensió de l'estructura del projecte

Un cop creat el projecte, és important comprendre l'estructura de les carpetes i fitxers. Aquí tens una visió general:

Carpeta/Fitxer Descripció
config.xml Fitxer de configuració principal del projecte.
www/ Conté els fitxers HTML, CSS i JavaScript de l'aplicació.
platforms/ Conté el codi específic de cada plataforma (Android, iOS, etc.).
plugins/ Conté els plugins instal·lats.
hooks/ Scripts que s'executen en diferents moments del cicle de vida del projecte.

Exercici pràctic

Objectiu

Crea un projecte Cordova, afegeix la plataforma Android i executa l'aplicació en un emulador.

Passos

  1. Instal·la Node.js i npm.
  2. Instal·la Cordova globalment.
  3. Crea un nou projecte Cordova.
  4. Afegeix la plataforma Android.
  5. Executa l'aplicació en un emulador Android.

Solució

# Instal·lació de Cordova
npm install -g cordova

# Creació del projecte
cordova create myApp com.example.myapp MyApp

# Navegar a la carpeta del projecte
cd myApp

# Afegir la plataforma Android
cordova platform add android

# Executar l'aplicació en un emulador Android
cordova emulate android

Conclusió

En aquesta secció, hem après a crear el nostre primer projecte Cordova, afegir plataformes i executar l'aplicació en un emulador o dispositiu real. També hem explorat l'estructura del projecte per comprendre millor com organitzar el nostre codi. Amb aquests coneixements, estàs preparat per començar a desenvolupar aplicacions mòbils amb Apache Cordova. En la següent secció, explorarem els conceptes bàsics i les APIs de Cordova per ampliar les funcionalitats de les nostres aplicacions.

© Copyright 2024. Tots els drets reservats