Table des matières
Combiné à un framework d'interface utilisateur, comme jQuery Mobile ou Dojo Mobile, cela permet une application sous forme native mais développée en HTML, CSS et Javascript. Cela implique que si nous avons une application Web, nous pouvons la convertir en une application native pour Android, car Apache Cordova fonctionnera comme un serveur Web intégré sur notre appareil mobile.Cette Api nous donne la possibilité de créer des applications mobiles qui s'exécuteront localement sur l'appareil mobile et seront basées sur la conception et le développement Web. Ainsi, avec Apache Cordova, nous pouvons accéder via Javascript aux fonctionnalités de l'appareil mobile telles que la caméra, les données, connexions wifi ou réseaux, clavier ou son, géolocalisation, notre propre base de données embarquée et toute autre fonctionnalité disponible.
Il faut avoir SDK Android, Gestionnaire de périphériques Android Oui Java jre installé, en pointant également les exécutables vers les variables système.
Pour commencer, nous devons installer node.js, Quoi est un framework qui vous permet de créer un serveur qui utilise javascript comme langage client et Cordova est installé à l'aide du gestionnaire de packages nommé NPM qui fait partie de Node.js.
L'installation se fera d'abord sous Linux, nous accéderons au terminal en mode root et téléchargerons le fichier node.js avec la commande suivante :
wget http://nodejs.org/dist/v0.10.34/node-v0.10.34-linux-x86.tar.gz
Décompressez et copiez dans un autre répertoire
sudo tar -C / usr / local --strip-components 1 -xzf node-v0.10.34-linux-x86.tar.gz
Nous installons les packages correspondants
ls -l/usr/local/bin/noeud ls -l/usr/local/bin/npm
Ensuite, nous passons au programme d'installation d'Apache Cordova
sudo npm install -g cordova
Pour vérifier qu'il a été correctement installé, nous pouvons écrire dans le terminal cordoue -v et il renverra la version d'Apache Cordova installée.
Après l'installation, nous pouvons créer des applications avec Cordova, pour créer une application, nous allons dans un répertoire de projet que nous avons, puis à partir du terminal, nous écrivons les commandes suggérées :
La structure de commandement sera :
cordova crée le répertoire du projet component.package.class
ainsi par exemple notre application sera :
cordova créer misapp com.tutoriales.misapp MiApp01
Cela créera la structure du projet et téléchargera tous les packages nécessaires et mis à jour que nous utiliserons dans notre application.
cordova émuler androidNous pouvons voir comment le répertoire a été créé mésapp, dans la structure de l'application et là nous pouvons trouver le contenu suivant.
Dans le dossier plates-formes Il contient les fichiers nécessaires pour que Cordova puisse interagir avec les différents appareils, ici nous allons ajouter les plates-formes que nous voulons tester notre application.
Exemple du terminal, nous exécuterons la commande suivante pour utiliser la plate-forme Android
plate-forme cordova ajouter android
Le résultat sera :
# / projects / misapp / www $ cordova platform add android Création d'un projet Android… Création d'un projet Cordova pour la plate-forme Android : Chemin : plates-formes / package android : com.tutoriales.misapp Nom : MiApp01 Cible Android : android-19 Copie des fichiers modèles… Projet créé avec succès.
Cela configurera un émulateur valide pour Android version 19 quel est le Version API 19 ou aussi Android 4.4 (KITKAT) c'est-à-dire que nous pouvons émuler n'importe quel appareil qui exécute cette version ou une version antérieure. Certaines plates-formes prises en charge sont Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, Dans ce tutoriel, nous allons nous concentrer sur Android.
Dans le carnet d'adresses www C'est là que l'application elle-même sera développée, là seront hébergés les fichiers HTML, CSS, images et Javascript ainsi que toutes les ressources nécessaires à notre application, rappelez-vous qu'il s'agit d'une page web qui s'exécutera nativement au sein d'un serveur et aussi un navigateur Web intégré qui fonctionnera comme une application native sur Android.
Lorsque nous créons notre projet dans le répertoire www, une structure de projet générique sera créée défini avec le code nécessaire pour exécuter une application simple de type "Salut monde"Nous avons donc un exemple ou un modèle d'application exécutable pour tester son fonctionnement avant de programmer, cependant, pour l'exécuter, nous devons d'abord ajouter la ou les plateformes, par exemple si nous voulons la tester sur des appareils Android et iOS, nous utilisez la commande suivante :
Pour Android
cordova construire AndroidPour iOS
cordova construire iOS
Chaque fois que nous exécutons la commande dans le répertoire de l'application, il saura qu'il s'agit de l'application à compiler. Une fois compilé dans le répertoire plates-formes / plates-formes / android / ant-build / il va générer des fichiers pour nous.
CordovaApp-debug.apk
Ce sera le fichier apk installable et exécutable sur n'importe quel appareil Android. Pour l'exécuter, le répertoire de l'application doit disposer de droits d'accès complets. Maintenant, nous allons l'exécuter pour la première fois avec l'émulateur pour cela que nous écrivons dans le terminal.
cordova émuler android
Nous pouvons maintenant commencer à créer notre application en éditant le fichier index.html qui se trouve dans le répertoire www. Le code est simple, la méta détecte le type d'appareil, les viewports vont adapter le contenu à la résolution et à la taille d'écran de l'appareil.
Le reste du code est HTML5, le fichier cordoba.js aura la configuration du serveur et le fichier index.js sera l'endroit où nous programmerons nos scripts pour donner de l'interactivité à l'application.
Miapp01Connexion au dispositif
L'appareil est prêt
Faisons quelques modifications avec Html5 et CSS3 pour tester et nous testerons également un autre appareil Créons un formulaire avec deux champs à l'intérieur de la couche d'applicationNom:
E-mail:
Nous recherchons le dossier css dans le fichier index.css et nous ajouterons le code suivant pour styliser le bouton .btn {background: # 3498db; image d'arrière-plan : -webkit-linear-gradient (en haut, # 3498db, # 2980b9); image d'arrière-plan : -moz-linear-gradient (en haut, # 3498db, # 2980b9); image d'arrière-plan : -ms-linear-gradient (en haut, # 3498db, # 2980b9); image d'arrière-plan : -o-linear-gradient (haut, # 3498db, # 2980b9); image de fond : dégradé linéaire (vers le bas, # 3498db, # 2980b9); -webkit-border-rayon : 28 ; -moz-border-rayon : 28 ; rayon de bordure : 28 px ; famille de polices : Arial ; couleur : #ffffff ; taille de la police : 20px ; rembourrage : 10px 20px 10px 20px ; texte-décoration : aucun; } .btn : survolez {arrière-plan : # 3cb0fd; image d'arrière-plan : -webkit-linear-gradient (en haut, # 3cb0fd, # 3498db); image d'arrière-plan : -moz-linear-gradient (en haut, # 3cb0fd, # 3498db); image d'arrière-plan : -ms-linear-gradient (en haut, # 3cb0fd, # 3498db); image d'arrière-plan : -o-linear-gradient (en haut, # 3cb0fd, # 3498db); image d'arrière-plan : gradient linéaire (vers le bas, # 3cb0fd, # 3498db); texte-décoration : aucun; }
Lorsque vous avez effectué les modifications, nous enregistrons les fichiers et exécutons à nouveau avec la commande cordova emulate android, auparavant nous avons configuré un autre appareil dans Android Device Manager.
AGRANDIR
Jusqu'à présent, nous avons vu comment créer une application avec HTML5, CSS3 et Javascript ou alors Jquery mobile pour différents appareils mobiles, qu'il s'agisse d'un téléphone mobile ou d'un téléviseur prenant en charge Android. Un aspect très important à garder à l'esprit est que la conception entière doit être considérée comme adaptable ou réactive.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
