Pour commencer, voici un exemple qui ressemble à l'application que nous allons réaliser :

Application multiplateforme

Comme vous le savez, il y a de multiples plateformes mobiles sur le marché, Android, iOS, WP... et chacune nécessite un langage de programmation différent des autres ! De plus, les membres d'un seul foyer n'utilisent pas forcément tous la même plateforme !

Pour remédier à ces problèmes, nous allons utiliser un magnifique framework open-source appelé Phonegap (ou Cordova). Il va nous épargner l'apprentissage de plusieurs langages informatiques !

Nous allons concevoir notre application en HTML/CSS/JavaScript puis grâce à Phonegap, nous allons la compiler pour chaque plateforme que nous souhaitons utiliser !

Fonctionnement

Notre application va interroger notre serveur qui lui, va récupérer la page affichée par l'Arduino puis transmettre les données à notre application qui va alors les traiter.

Nous allons travailler en 3 étapes pour achever notre application : d'abord l'Arduino, ensuite le Raspberry Pi et en dernier, l'application elle-même.

Arduino

Pour récupérer une donnée quelconque, il faut que l'Arduino la délivre ou du moins, l'affiche en tant que page HTML. Pour cela, nous allons ajouter au code Arduino la commande suivante quand nous souhaitons l'afficher :

        		client.print("Le message affiché est : ");
        		client.println(variable);

Ces lignes seront à ajouter en lignes 53 et 54 dans ce tutoriel par exemple.

Au lieu de faire beaucoup de rêquetes, il serait judicieux d'ajouter à votre code Arduino une commande pour laquelle il affichera dans un ordre précis l'ensemble des états qui vous intéressent. A vous par la suite de traiter ces données !

Raspberry Pi

Maintenant nous allons attaquer notre serveur. Après avoir installer un serveur LAMP (le tutoriel ici), nous allons commencer par installer la librairie cURL puis redémarrer notre serveur :

        		sudo apt-get install php5-curl
        		sudo /etc/init.d/apache2 restart

Maintenant créez une page php sur votre serveur et copiez dedans le code suivant :

        		<?php 
					header("Access-Control-Allow-Origin: *");
					if(isset($_GET['api']) && ($_GET['api'] == "votre_cle_api")){
						if(isset($_GET['do'])){
							$ch = curl_init();
							curl_setopt($ch, CURLOPT_URL, "adresse_ip_arduino:port/?".$_GET['do']);
							curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
							$res = curl_exec($ch);
							curl_close($ch);
							echo $res;
						}else{
							echo "Pas de commandes a executer !";
						}	
					}else{
						echo "Authentification echouee !";
					} 
				?>

Le serveur va d'abord vérifier votre identité grâce à l'API que vous transmettez. Si c'est le bon, il va lire la commande transmise par la variable do puis, il va appeler l'Arduino pour récupérer l'information recherchée puis l'afficher. L'application pourra alors la récupérer via l'objet XMLHTTPRequest.

Application mobile

Voici la partie la plus intéressante (pour moi) ! L'application est basée principalement sur jQuery Mobile pour l'interface graphique. A laquelle, j'ai ajouté un plugin de phonegap qui permet de générer des messages dans la barre de notification.

La version pour Android est téléchargeable ici.

Si vous souhaitez adapter l'application pour d'autres plateformes (iOS, BlackBerry, Windows Phone, WebOS, Symbian, ou d'autres plateformes supportées par Phonegap), récupérez le code web dans le dossier asset/www de la version d'Android puis suivez les instructions sur le site de phonegap pour l'adapter aux autres plateformes.

Quelques liens utiles

• Phonegap
• Liste des plugins disponibles pour Phonegap

N'hésitez pas si vous avez des questions :)