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.
- 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:
- Visita la pàgina oficial de Node.js: https://nodejs.org/
- Descarrega i instal·la la versió recomanada per a la teva plataforma.
- 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:
Verifica la instal·lació de Cordova:
- Creació del projecte Cordova
2.1. Crear un nou projecte
Per crear un nou projecte Cordova, utilitza el següent comandament a la terminal:
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:
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:
- 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:
3.2. Executar en un dispositiu real
Per executar l'aplicació en un dispositiu real, connecta el dispositiu al teu ordinador i executa:
- 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
- Instal·la Node.js i npm.
- Instal·la Cordova globalment.
- Crea un nou projecte Cordova.
- Afegeix la plataforma Android.
- 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.
Curs d'Apache Cordova
Mòdul 1: Introducció a Apache Cordova
- Què és Apache Cordova?
- Configuració del teu entorn de desenvolupament
- Creació del teu primer projecte Cordova
- Comprensió de l'estructura del projecte
Mòdul 2: Conceptes bàsics i APIs
- Plugins de Cordova
- Ús de l'API del dispositiu
- Accés a l'emmagatzematge del dispositiu
- Gestió de la informació de la xarxa
- Interacció amb la càmera
Mòdul 3: Interfície d'usuari i experiència d'usuari
- Construcció d'una interfície d'usuari responsiva
- Ús de Cordova amb frameworks (per exemple, Angular, React)
- Gestió de l'entrada de l'usuari
- Implementació de la navegació
Mòdul 4: Funcions avançades de Cordova
- Desenvolupament de plugins personalitzats
- Ús de codi natiu
- Optimització del rendiment
- Depuració i proves
Mòdul 5: Desplegament i distribució
- Construcció per a diferents plataformes
- Signatura i publicació d'aplicacions
- Directrius i millors pràctiques de l'App Store
- Integració i desplegament continus
Mòdul 6: Estudis de cas i aplicacions del món real
- Estudi de cas: Construcció d'una aplicació de llista de tasques
- Estudi de cas: Construcció d'una aplicació del temps
- Estudi de cas: Construcció d'una aplicació de xarxes socials
- Lliçons apreses i millors pràctiques