Un fois le plugin WPML, des jolies drapeaux seront à cette endroit pour proposer d'autres langues.

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 »
honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

Choisir le nom du projet, dans notre exemple Projet Social Hecube
honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

Vous obtenez une arborescence de projet
honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

Vous devez sélectionner un simulateur, iPhone ou Ipad
honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

En choisissant le simulateur iPhone, vous obtenez la création du répertoire www qui vous affiche la page index.html par défaut
honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

En choisissant le simulateur iPhone, vous obtenez la création du répertoire www qui vous affiche la page index.html par défaut
honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

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 :

  1. Erreur : le message d’erreur est le suivant File XXX.app depends on itself. This target might include its own product.
  2. honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

  3. 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
    honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

    Décocher le fichier .app
    honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

  4. Erreur : Bien choisir pour votre projet le dernier iOS
  5. Détail 1
    honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

    Détail 2
    honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

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 »

honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

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.
honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

Détail du changement de Cordova.plist / ExternalHosts
honeGap, HTML5, JavaScript - Introudction au framework PhoneGap


honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

honeGap, HTML5, JavaScript - Introudction au framework PhoneGap

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');

En savoir plus