Outils pour utilisateurs

Outils du site


wiki:projets:smartphone-geiger:installation-cordova

Choix de Cordova

Ayant choisi le RFduino comme plateforme de prototypage, il nous a fallu ensuite choisir l'environnement de développement côté smartphone.

Natif ou multiplateforme ? Notre équipe est petite, on a pas envie de refaire 10x le travail. On s'oriente donc vers les framework combinant HTML5-CSS-javascript. Multiplateforme : certes, mais on doit accéder au BT4.0 et au GPS. On souhaite également coller le plus possible aux interfaces utilisateur “natives”. L'application a en effet une visée grand public, et l'utilisateur doit se concentrer sur la mesure et le sens de ce qu'il fait : toute fioriture ou écart côté interface est donc à éviter.

Le site web RFduino.com a été refondu récemment, mais il était signalé avant un plug-in Cordova/Phonegap développé par un contributeur, sous licence Apache, qui permet d'utiliser les RFduino tant avec iPhone qu'Android : merci à “Don”, son auteur !

Nous avons donc jeté notre dévolu sur Cordova.

Par ailleurs, l'Intel AppFramework colle bien à la nécessité de restituer les interfaces “natives” des différents smartphones. Il ressemble beaucoup à JQueryMobile.

1 Création d'un espace de travail en local (Mac OS X)

Cordova est un framework permettant à partir d'un même code javascript de générer des applications natives pour iOS et Android. Nous utilisons aussi le plugin cordova-rfduino pour faciliter la communication bluetooth. Nous allons voir comment installer tout ça sur un Mac. Pour pouvoir compiler les applications il vous faudra la dernière version d'Xcode et le SDK iOS. Un compte développeur Apple est aussi requis pour signer l'application.

Cordova est basé sur le framework node.js, qu'il faut donc installer : node.js. Node.js s'installe simplement à partir d'un installeur. Une fois installé, tout se passe dans le terminal.

Pour vérifier que node.js est bien installé, exécutez la commande:

node -v

ou

npm -v

npm est le gestionnaire de paquets de node.js, il va nous servir a installer phonegap.

npm install phonegap

Cette étape est un peu longue car il doit télécharger toutes les dépendances.

Ça y est, Cordova est installé, nous allons pouvoir créer notre application. Pour cela il faut se placer dans un répertoire de travail :

cd repertoire/

Puis executer les commandes suivantes:

phonegap create opengeiger fr.pmclab.opengeiger "OpenGeiger"
cd opengeiger
phonegap install ios
phonegap build ios

Il faut ensuite ajouter le plugin rfduino qui nous sert à communiquer avec le compteur :

phonegap plugin add https://github.com/don/cordova-plugin-rfduino.git
phonegap build ios

L'application est prête, rendez-vous en section 3 pour télécharger le code.

2 Création d'un espace de travail en ligne

Afin de pouvoir travailler à plusieurs où que nous soyons, nous avons décidé d'utiliser un IDE en ligne : Cloud9

Il s'agit en fait d'une session Linux à laquelle nous avons accès directement dans notre navigateur internet. Cela nous permet de coder à tout moment et même de coder à plusieurs.

L'installation s'est faite assez simplement. Node.js est déjà installé. Pour installer Phonegap et créer l'application nous avons suivis la même procédure que dans la section 1.

3 Compilation automatique (iOS)

Maintenant que nous avons notre code source hébergé sur Cloud9, nous devons le tester. Il n'était pas envisageable de télécharger manuellement le code à chaque fois que nous souhaitons le compiler, malheureusement l'IDE ne nous offrait pas d'alternative. Nous avons donc développé un script de téléchargement.

Coté serveur (Cloud9) nous exécutons le script php (download.php) suivant :

<html><body>
<?php
// Cloud9 IDE - Workaround to download single files or directories
// WARNING: exclude this page before deploying to production
 
$project = 'opengeiger';
$dir = 'www';
 
$dlfile = "www.zip";
exec('cd '.$project.' ; zip -r ../'.$dlfile.' '.$dir.'/*');
header("Content-Type: archive/zip");
header("Content-Disposition: attachment; filename=www.zip");
 
if (file_exists($dlfile)) {
  header('Content-Length: ' . filesize($dlfile));
  ob_clean();
  flush();
  readfile($dlfile);
  unlink($dlfile);
  exit;
}
 
?>
</body></html>

Il créé un fichier zip du dossier qui nous intéresse (le dossier www du projet qui contiens les sources javascript) et le met à disposition pour le téléchargement.

Côté client nous avons un script bash (download.sh) de téléchargement:

#! /bin/bash
 
project="opengeiger"
 
cd "$project"
 
echo "Recuperation des donnees depuis cloud9..."
rm -r "www/"
# Enlever le commentaire de cette ligne et commentez celle d'après pour utiliser le proxy du lab
#curl --proxy wwwcache.jussieu.fr:3128 https://open_geiger-c9-chsimon.c9.io/download.php > "www.zip"
curl https://open_geiger-c9-chsimon.c9.io/download.php > "www.zip"
unzip "www.zip"
rm "www.zip"
 
echo "Recompilation du projet..."
phonegap build ios

A mettre dans notre espace de travail. Avant de pouvoir l’exécuter il faut lui en donner la permission:

chmod +x download.sh

Ensuite lorsque l'on veut compiler, il suffit de faire :

./download.sh
wiki/projets/smartphone-geiger/installation-cordova.txt · Dernière modification: 2016/09/11 13:15 (modification externe)