Apache Cordova

Introduction

Apache Cordova était un framework open-source permettant de créer des applications mobiles multi-plateformes en HTML, CSS et Javascript. Ce framework était à l'origine Apache Callback ou plus connu sous le nom Adobe PhoneGap.

Pour plus de détails, vous pouvez consulter la documentation officielle: Documentation

Historique

Voir Adobe PhoneGap

Installer Cordova

A l'inverse de PhoneGap qui bénéficie d'un assistant de conception, Cordova nécessite de passer par des lignes de commande qui s'exécute dans Node.js. Il est donc nécessaire d'avoir certaine connaissance en Node.js.

Pour installer Cordova, il faut taper la commande NPM suivante:

npm install -g cordova

Créer un projet

Pour créer un projet vierge vous devez commencer par vous rendre dans le dossier où vous souhaitez créer votre projet. Pour cela, utilisé les commandes de navigation:

cd = pour vous déplacer ls = pour lister le contenu d'un dossier

Une fois dans le répertoire cible, utilisé la commande suivante:

cordova create AppName (AppName fait référence au nom de votre application)

Si vous désirez de l'aide vis à vis de la commande create, vous pouvez utiliser la commande:

cordova help create

Ajouter une plateforme

Une fois le projet créer, vous devez indiquer à votre applicaton la ou les plateformes cibles. Commencez par vous rendre dans le dossier de votre application. cd AppName. Puis, utilisez la commande suivante:

cordova platform add <plateformName>

Voici la liste des différentes plateformes disponibles:

• ios = Apple IOS
• amazon-fireos = Amazon Fire OS
• android = Google Android
• blackberry10 = Blackberry OS
• firefoxos = Firefox OS

Lancer l'application

Une fois que votre application est prête à être lancée, utilisez la ligne de commande suivante:

cordova run <nom plateform>

Ajouter des plugins

Cordova propose une grande liste de plugin pour permettre à votre application d'avoir accès aux fonctionnalités natives du téléphone. Ces plugins sont organisés dans différentes catégories:

• Battery Status
• Camera
• Device
• Dialogs
• File
• Geolocation
• Inappbrowser
• Media
• Media Capture
• Network Information
• Screen Orientation
• Splashscreen
• Statusbar
• Vibration
• Whitelist

Les plugins sont disponible via NPM et une simple commande de recherche va vous permettre de trouver le plugin que vous recherchez. Vous pouvez également aller directement chercher cette information dans la documentation technique.

Pour effectuer une recherche sur NPM, utilisez la commande suivante:

cordova plugin search nomPlugin

Il faudra ensuite ajouter les informations du plugin dans votre fichier config.xml ainsi que package.json. Voici un exemple avec le plugin de la camera:

cordova plugin add cordova-plugin-camera

Il est également possible d'installer un plugin depuis un dossier ou un espace Git.

Personnaliser les icones de l'application

Vous pouvez personnaliser l'icône de votre application. Si vous ne le faites pas, l'icône de Cordova sera affichée. Pour modifier l'icone, vous devez vous utiliser l’élément icône dans le fichier config.xml.

Voici la ligne de code à utilsier:

<icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />

Cette ligne de code modifiera l'icône uniquement pour IOS.

<icon src="res/icon.png" />

Voici une ligne de code plus généraliste qui fonctionnera de base pour toutes les plateformes. Utilisez la première version si vous désirez personnaliser l'icône plus en détails en fonction des plateformes.

Notez que seul le paramètre src="" est indispensable. Tout le reste est optionnel.

Configurer votre application

Pour modifier la configuration de votre application, vous devez modifier le document config.xml

Voici un exemple de document de configuration

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.helloworld" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>HelloWorld</name>
  <description>
      Application Hello World avec Cordova
  </description>
  <author email="dev@etu.unige.ch" href="http://tecfaetu.unige.ch">
      Team TECFA
  </author>
  <content src="index.html" />
  <access origin="*" />
  <allow-intent href="http://*/*" />
  <allow-intent href="https://*/*" />
  <allow-intent href="tel:*" />
  <allow-intent href="sms:*" />
  <allow-intent href="mailto:*" />
  <allow-intent href="geo:*" />
  <platform name="android">
      <allow-intent href="market:*" />
  </platform>
  <platform name="ios">
      <allow-intent href="itms:*" />
      <allow-intent href="itms-apps:*" />
  </platform>
</widget>

Widget

Comme vous pouvez le voir dans l'exemple ci-dessus, l'élément <widget> est l'élément racine du document de configuration. Cet élément va prendre plusieurs attributs. Seul 4 sont obligatoires.

• id(string) = l'identifiant au format reverse-domain
• version(string) = la version de l'application
• xmlns(string) = namespace pour le document config.xml
• xmlns:cdv(string) = représente le prefix du namespace

Name

Cela représente simplement le nom de l'application.

Description

Cela représente une brève description de ce que fait votre application.

Author

Cela représente l'auteur de l'application. Il est nécessaire de renseigner deux attributs pour cet élément:

• email(string) = l'e-mail de l'auteur
• href(string) = le site web de l'auteur