PhoneGap, HTML5, JavaScript, jQuery Mobile – Introduction au framework PhoneGap

PhoneGap est un framework javascript qui permet de faire des applications Iphone, Ipad avec l’aide de HTML5. Ce framework présentait un tel intérêt qu’il est devenu la propriété de Adobe, qui renforce sa stratégie de pénétration au sein du marché des applications HTML5 pour tablettes, smartphones et autres nouvelles plate-formes ou Flash ne semble pas vraiment bienvenue. Le concept est franchement intéressant puisque à l’aide de CSS3, Javascript et HTML5, vous allez pouvoir visualiser et éventuellement compiler vos expériences HTML5, CSS3, Javascript afin d’en faire des applications. PhoneGap, comme son nom l’indique, PhoneGap réduit à la force de ces petits bras musclés l’hétérogénéité des plates-formes, ne cible pas seulement pour les produits Apple (iOS) mais aussi pour tous les autres OS ou plates-formes existantes : Android, Blackberry, Windows Phone, Palm WebOS, Bada et Symbian.
Bref, la rachat de PhoneGap, c’est la réponse d’Adobe qui a fait sienne la prédiction d’André Malraux, un peu modifié qui annonce que “Le XXIème siècle sera mobile ou ne sera pas” d’où notre intérêt pour ce framework.

L’ensemble des captures et des tests que nous avons mené ont été faits avec la version de PhoneGap phonegap-phonegap-1.9.0-0-g41e05fc.zip, qui donne accès à un fichier d’installation “Apple Disk Image” nommé Cordova-1.9.0.dmg. Il ne vous restera plus qu’à lancer l’installation.

Installer PhoneGap

La première chose à faire et de télécharger XCODE sur le site d’Apple. Nous avons dans notre cas, télécharger une version antérieure (xcode_3.2.6_and_ios_sdk_4.3.dmg) à celle actuelle, la version 4. Le fichier est lourd, plus de 4 Go et vous serez dans l’obligation de vous inscrire au site d’Apple pour accéder au lien de téléchargement, soyez donc patient.

Une fois, les deux installations faites, vous disposez de l’environnement nécessaire pour commencer à tester PhoneGap.

Créer son premier projet

Nous allons le nommer Projet Social Hecube. Pour cela il vous suffit de vous rendre dans File > New Project et de donner un nom à votre futur application.

Sélectionner dans Xcode un projet “Cordova”

Choisir le nom du projet, dans notre exemple Projet Social Hecube

Vous obtenez une arborescence de projet

Vous devez sélectionner un simulateur, iPhone ou Ipad

En choisissant le simulateur iPhone, vous obtenez la création du répertoire www qui vous affiche la page index.html par défaut

Les erreurs les plus fréquentes

Il existe deux erreurs assez fréquentes qui interdisent souvent le lancement de l’émulateur. Elles sont les suivantes :

Erreur : le message d’erreur est le suivant File XXX.app depends on itself. This target might include its own product.

Pour y remédier
- Ouvrez la rubrique du groupe “Products” dans les volets Groupes & Fichiers, cliquez sur le fichier .app
- Faites un clic droit -> “Get Info”
- Dans le “Targets”, assurez-vous que le fichier .app n’est pas cochée
Décocher le fichier .app

Décocher le fichier .app
Erreur : Bien choisir pour votre projet le dernier iOS

Détail 1

Détail 2

Créer un projet plus avancé

On va tenter d’injecter des données au format JSON issu directement d’un serveur web. Pour se faire, on va se servir d’un serveur en local qui tourne sur MAMP ne creant une base de données, en générant un flux json puis en la manipulant à l’aide de de jQuery Mobile

Pour compiler, il suffit de cliquer sur le bouton “Click abd Run”

Pour permettre l’appel à des données externes dans PhoneGap. Il suffit d’ajouter une entrée générique * (wildcard) à la liste blanche hôtes externe dans Cordova.plist / ExternalHosts. Cela autoriserq tous les serveurs à communiquer avec votre émulateur.

Détail du changement de Cordova.plist / ExternalHosts

Le code source du fichier getemployees.php appelé en local de puis http://127.0.0.1/employeedirectory/getemployees.php

 
	<?php
	header('Content-type: application/json');
 
	$server = "localhost";
	$username = "root";
	$password = "root";
	$database = "directory";
 
	$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());
	mysql_select_db($database, $con);
	$sql = "SELECT id, firstName AS firstname, lastName AS lastname, managerId, title AS title, department AS department FROM employee";		
	$result = mysql_query($sql) or die ("Query error: " . mysql_error());
 
	$records = array();
 
	while($row = mysql_fetch_assoc($result)) {
		$records[] = $row;
	}
 
	mysql_close($con);
 
	echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';
	?>

Le fichier index.html à placer dans le répertoire www de votre projet PhoneGap

	<!DOCTYPE HTML>
	<html lang="en">
	<head>
		<title>Employee Directory</title>
		<meta name="viewport" content="width=device-width,initial-scale=1"/>
		<link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" />
		<link rel="stylesheet" href="css/styles.css" />
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
 
		<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
		<script src="js/jquery-1.7.2.min.js"></script>
		<script src="js/load-json.js"></script>
 
 
	</head>
	<body>
		<div id="employeeListPage" data-role="page" >
 
			<div data-role="header" data-position="fixed">
				<h1>Employee Directory</h1>
			</div>
 
			<div data-role="content">
		         <ul id="employeeList" data-role="listview" data-filter="true"></ul>
		    </div>		
 
		</div>
 
		</body>
	</html>

Le code source du fichier load-json.js

 
	$(document).ready(function(){
		$(document).bind('deviceready', function(){
			//Phonegap ready
			onDeviceReady();
		});
 
		// var output = $('#output');
		var output = $('#employeeListPage');
 
 
		$.ajax({
			/* URL vers le fichier JSON */
			url: 'http://127.0.0.1/employeedirectory/getemployees.php',
			dataType: 'jsonp',
			jsonp: 'jsoncallback',
			timeout: 5000,
			success: function(data, status){
 
				$.each(data, function(i,item){
				var person = 
				'<li>' +
				'<h4>' + item.firstname + ' ' + item.lastname + '</h4>' +
				'<p>' + item.title + '</p>' +
				'<p>' + item.department + '</p>' +
				'</li>';
 
					output.append(person);
				});
 
			},
			error: function(){
			   output.text('There was an error loading the data.');
			}
		});
	});

le code de la BDD directory

	--
	-- BDD: `directory`
	--
 
	-- --------------------------------------------------------
 
	--
	-- Structure de la table `employee`
	--
 
	CREATE TABLE `employee` (
	  `id` INT(11) NOT NULL AUTO_INCREMENT,
	  `firstName` VARCHAR(30) NOT NULL,
	  `lastName` VARCHAR(30) NOT NULL,
	  `managerId` INT(11) NOT NULL,
	  `title` VARCHAR(45) NOT NULL,
	  `department` VARCHAR(45) NOT NULL,
	  `officePhone` VARCHAR(45) NOT NULL,
	  `cellPhone` VARCHAR(45) NOT NULL,
	  `email` VARCHAR(45) NOT NULL,
	  `city` VARCHAR(45) NOT NULL,
	  `picture` VARCHAR(250) NOT NULL,
	  PRIMARY KEY (`id`)
	) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=22 ;
 
	--
	-- Contenu de la table `employee`
	--
 
	INSERT INTO `employee` VALUES(12, 'Steven', 'Wells', 4, 'Software Architect', 'Engineering', '617-000-0012', '781-000-0012', 'swells@fakemail.com', 'Boston, MA', 'steven_wells.jpg');
	INSERT INTO `employee` VALUES(11, 'Amy', 'Jones', 5, 'Sales Representative', 'Sales', '617-000-0011', '781-000-0011', 'ajones@fakemail.com', 'Boston, MA', 'amy_jones.jpg');
	INSERT INTO `employee` VALUES(10, 'Kathleen', 'Byrne', 5, 'Sales Representative', 'Sales', '617-000-0010', '781-000-0010', 'kbyrne@fakemail.com', 'Boston, MA', 'kathleen_byrne.jpg');
	INSERT INTO `employee` VALUES(9, 'Gary', 'Donovan', 2, 'Marketing', 'Marketing', '617-000-0009', '781-000-0009', 'gdonovan@fakemail.com', 'Boston, MA', 'gary_donovan.jpg');
	INSERT INTO `employee` VALUES(8, 'Lisa', 'Wong', 2, 'Marketing Manager', 'Marketing', '617-000-0008', '781-000-0008', 'lwong@fakemail.com', 'Boston, MA', 'lisa_wong.jpg');
	INSERT INTO `employee` VALUES(7, 'Paula', 'Gates', 4, 'Software Architect', 'Engineering', '617-000-0007', '781-000-0007', 'pgates@fakemail.com', 'Boston, MA', 'paula_gates.jpg');
	INSERT INTO `employee` VALUES(5, 'Ray', 'Moore', 1, 'VP of Sales', 'Sales', '617-000-0005', '781-000-0005', 'rmoore@fakemail.com', 'Boston, MA', 'ray_moore.jpg');
	INSERT INTO `employee` VALUES(6, 'Paul', 'Jones', 4, 'QA Manager', 'Engineering', '617-000-0006', '781-000-0006', 'pjones@fakemail.com', 'Boston, MA', 'paul_jones.jpg');
	INSERT INTO `employee` VALUES(3, 'Eugene', 'Lee', 1, 'CFO', 'Accounting', '617-000-0003', '781-000-0003', 'elee@fakemail.com', 'Boston, MA', 'eugene_lee.jpg');
	INSERT INTO `employee` VALUES(4, 'John', 'Williams', 1, 'VP of Engineering', 'Engineering', '617-000-0004', '781-000-0004', 'jwilliams@fakemail.com', 'Boston, MA', 'john_williams.jpg');
	INSERT INTO `employee` VALUES(2, 'Julie', 'Taylor', 1, 'VP of Marketing', 'Marketing', '617-000-0002', '781-000-0002', 'jtaylor@fakemail.com', 'Boston, MA', 'julie_taylor.jpg');
	INSERT INTO `employee` VALUES(1, 'James', 'King', 0, 'President and CEO', 'Corporate', '617-000-0001', '781-000-0001', 'jking@fakemail.com', 'Boston, MA', 'james_king.jpg');

-- -- BDD: `directory` -- -- -------------------------------------------------------- -- -- Structure de la table `employee` -- CREATE TABLE `employee` ( `id` int(11) NOT NULL AUTO_INCREMENT, `firstName` varchar(30) NOT NULL, `lastName` varchar(30) NOT NULL, `managerId` int(11) NOT NULL, `title` varchar(45) NOT NULL, `department` varchar(45) NOT NULL, `officePhone` varchar(45) NOT NULL, `cellPhone` varchar(45) NOT NULL, `email` varchar(45) NOT NULL, `city` varchar(45) NOT NULL, `picture` varchar(250) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=22 ; -- -- Contenu de la table `employee` -- INSERT INTO `employee` VALUES(12, 'Steven', 'Wells', 4, 'Software Architect', 'Engineering', '617-000-0012', '781-000-0012', 'swells@fakemail.com', 'Boston, MA', 'steven_wells.jpg'); INSERT INTO `employee` VALUES(11, 'Amy', 'Jones', 5, 'Sales Representative', 'Sales', '617-000-0011', '781-000-0011', 'ajones@fakemail.com', 'Boston, MA', 'amy_jones.jpg'); INSERT INTO `employee` VALUES(10, 'Kathleen', 'Byrne', 5, 'Sales Representative', 'Sales', '617-000-0010', '781-000-0010', 'kbyrne@fakemail.com', 'Boston, MA', 'kathleen_byrne.jpg'); INSERT INTO `employee` VALUES(9, 'Gary', 'Donovan', 2, 'Marketing', 'Marketing', '617-000-0009', '781-000-0009', 'gdonovan@fakemail.com', 'Boston, MA', 'gary_donovan.jpg'); INSERT INTO `employee` VALUES(8, 'Lisa', 'Wong', 2, 'Marketing Manager', 'Marketing', '617-000-0008', '781-000-0008', 'lwong@fakemail.com', 'Boston, MA', 'lisa_wong.jpg'); INSERT INTO `employee` VALUES(7, 'Paula', 'Gates', 4, 'Software Architect', 'Engineering', '617-000-0007', '781-000-0007', 'pgates@fakemail.com', 'Boston, MA', 'paula_gates.jpg'); INSERT INTO `employee` VALUES(5, 'Ray', 'Moore', 1, 'VP of Sales', 'Sales', '617-000-0005', '781-000-0005', 'rmoore@fakemail.com', 'Boston, MA', 'ray_moore.jpg'); INSERT INTO `employee` VALUES(6, 'Paul', 'Jones', 4, 'QA Manager', 'Engineering', '617-000-0006', '781-000-0006', 'pjones@fakemail.com', 'Boston, MA', 'paul_jones.jpg'); INSERT INTO `employee` VALUES(3, 'Eugene', 'Lee', 1, 'CFO', 'Accounting', '617-000-0003', '781-000-0003', 'elee@fakemail.com', 'Boston, MA', 'eugene_lee.jpg'); INSERT INTO `employee` VALUES(4, 'John', 'Williams', 1, 'VP of Engineering', 'Engineering', '617-000-0004', '781-000-0004', 'jwilliams@fakemail.com', 'Boston, MA', 'john_williams.jpg'); INSERT INTO `employee` VALUES(2, 'Julie', 'Taylor', 1, 'VP of Marketing', 'Marketing', '617-000-0002', '781-000-0002', 'jtaylor@fakemail.com', 'Boston, MA', 'julie_taylor.jpg'); INSERT INTO `employee` VALUES(1, 'James', 'King', 0, 'President and CEO', 'Corporate', '617-000-0001', '781-000-0001', 'jking@fakemail.com', 'Boston, MA', 'james_king.jpg');

En savoir plus

PhoneGap and iOS quick setup video
http://www.youtube.com/watch?v=W5hzwxxUCqE
Xcode – Apple Developer
https://developer.apple.com/xcode/
Updated: loading external data into an iOS PhoneGap app using jQuery 1.5
http://samcroft.co.uk/2011/updated-loading-data-in-phonegap-using-jquery-1-5/
How to elegantly handle errors in a PhoneGap / Cordova app by using device API native notifications
http://samcroft.co.uk/2012/native-notifications-for-phonegap-cordova-apps/
Sample Application using jQuery Mobile and PhoneGap
http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/
Getting started with PhoneGap
http://www.netmagazine.com/tutorials/getting-started-phonegap
The PhoneGap Wiki
https://github.com/phonegap/phonegap/wiki
Adobe® PhoneGap™ Build
https://build.phonegap.com/
Creating an Android “Hello World” Application with PhoneGap (PC)
http://mobile.tutsplus.com/tutorials/phonegap/creating-an-android-hello-world-application-with-phonegap/

Installer PhoneGap

Créer son premier projet

Les erreurs les plus fréquentes

Créer un projet plus avancé

En savoir plus

Partager :

Published by Bruno Flaven

Related Posts