phonegap-phonegap-1.9.0-0-g41e05fc.zip<\/code>, qui donne acc\u00e8s \u00e0 un fichier d’installation “Apple Disk Image” nomm\u00e9 Cordova-1.9.0.dmg. Il ne vous restera plus qu’\u00e0 lancer l’installation.<\/i><\/p>\nInstaller PhoneGap<\/h4>\n
La premi\u00e8re chose \u00e0 faire et de t\u00e9l\u00e9charger XCODE sur le site d’Apple. Nous avons dans notre cas, t\u00e9l\u00e9charger une version ant\u00e9rieure (xcode_3.2.6_and_ios_sdk_4.3.dmg<\/code>) \u00e0 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\u00e9der au lien de t\u00e9l\u00e9chargement, soyez donc patient.<\/p>\nUne fois, les deux installations faites, vous disposez de l’environnement n\u00e9cessaire pour commencer \u00e0 tester PhoneGap.<\/p>\n
Cr\u00e9er son premier projet<\/h2>\n
Nous allons le nommer Projet Social Hecube<\/code>. Pour cela il vous suffit de vous rendre dans File > New Project<\/code> et de donner un nom \u00e0 votre futur application.<\/p>\nS\u00e9lectionner dans Xcode un projet “Cordova”<\/b>
\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_1.jpg\")
<\/p>\n
Choisir le nom du projet, dans notre exemple Projet Social Hecube<\/code><\/b>
\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_2.jpg\")
<\/p>\nVous obtenez une arborescence de projet<\/b>
\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_3.jpg\")
<\/p>\n
Vous devez s\u00e9lectionner un simulateur, iPhone ou Ipad<\/b>
\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_4.jpg\")
<\/p>\n
En choisissant le simulateur iPhone, vous obtenez la cr\u00e9ation du r\u00e9pertoire www<\/code> qui vous affiche la page index.html<\/code> par d\u00e9faut<\/b>
\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_5.jpg\")
<\/p>\nEn choisissant le simulateur iPhone, vous obtenez la cr\u00e9ation du r\u00e9pertoire www<\/code> qui vous affiche la page index.html<\/code> par d\u00e9faut<\/b>
\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_6.jpg\")
<\/p>\nLes erreurs les plus fr\u00e9quentes<\/h4>\n
Il existe deux erreurs assez fr\u00e9quentes qui interdisent souvent le lancement de l’\u00e9mulateur. Elles sont les suivantes :<\/p>\n
\n- Erreur :<\/b> le message d’erreur est le suivant
File XXX.app depends on itself. This target might include its own product.<\/code><\/li>\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_error_1_1.jpg\")
<\/p>\n
- Pour y rem\u00e9dier<\/b>\n
\n- Ouvrez la rubrique du groupe “Products” dans les volets Groupes & Fichiers, cliquez sur le fichier
.app<\/code><\/li>\n- Faites un clic droit -> “Get Info”<\/li>\n
- Dans le “Targets”, assurez-vous que le fichier
.app<\/code> n’est pas coch\u00e9e<\/li>\n<\/ul>\nD\u00e9cocher le fichier .app<\/code><\/b>
\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_error_1_2.jpg\")
<\/p>\nD\u00e9cocher le fichier .app<\/code><\/b>
\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_error_1_3.jpg\")
<\/p>\n<\/li>\n- Erreur : Bien choisir pour votre projet le dernier iOS<\/b> <\/li>\n
D\u00e9tail 1<\/b>
\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_error_2_1.jpg\")
<\/p>\n
D\u00e9tail 2<\/b>
\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_error_2_2.jpg\")
\n\n<\/ol>\nCr\u00e9er un projet plus avanc\u00e9<\/h2>\n
On va tenter d’injecter des donn\u00e9es au format JSON<\/code> issu directement d’un serveur web. Pour se faire, on va se servir d’un serveur en local qui tourne sur MAMP<\/code> ne creant une base de donn\u00e9es, en g\u00e9n\u00e9rant un flux json<\/code> puis en la manipulant \u00e0 l’aide de de jQuery Mobile<\/code><\/p>\nPour compiler, il suffit de cliquer sur le bouton “Click abd Run”<\/code><\/b><\/p>\n
![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_simulator_1.jpg\")
<\/p>\n
![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_simulator_2.jpg\")
<\/p>\n
Pour permettre l’appel \u00e0 des donn\u00e9es externes dans PhoneGap<\/code>. Il suffit d’ajouter une entr\u00e9e g\u00e9n\u00e9rique *<\/code> (wildcard) \u00e0 la liste blanche h\u00f4tes externe dans Cordova.plist \/ ExternalHosts<\/code>. Cela autoriserq tous les serveurs \u00e0 communiquer avec votre \u00e9mulateur.<\/b>
\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_simulator_3.jpg\")
<\/p>\nD\u00e9tail du changement de Cordova.plist \/ ExternalHosts<\/code><\/b>
\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_simulator_3_a.jpg\")
<\/p>\n<\/b>
\n![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_simulator_4.jpg\")
<\/p>\n
![\"honeGap,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/09\/introduction_to_phonegap_simulator_5.jpg\")
<\/p>\n
Le code source du fichier getemployees.php<\/code> appel\u00e9 en local de puis http:\/\/127.0.0.1\/employeedirectory\/getemployees.php<\/code><\/b><\/p>\n\r\n\t\r\n\t<?php\r\n\theader('Content-type: application\/json');\r\n\r\n\t$server = \"localhost\";\r\n\t$username = \"root\";\r\n\t$password = \"root\";\r\n\t$database = \"directory\";\r\n\r\n\t$con = mysql_connect($server, $username, $password) or die (\"Could not connect: \" . mysql_error());\r\n\tmysql_select_db($database, $con);\r\n\t$sql = \"SELECT id, firstName AS firstname, lastName AS lastname, managerId, title AS title, department AS department FROM employee\";\t\t\r\n\t$result = mysql_query($sql) or die (\"Query error: \" . mysql_error());\r\n\r\n\t$records = array();\r\n\r\n\twhile($row = mysql_fetch_assoc($result)) {\r\n\t\t$records[] = $row;\r\n\t}\r\n\r\n\tmysql_close($con);\r\n\r\n\techo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';\r\n\t?>\r\n\t\r\n<\/pre>\nLe fichier index.html<\/code> \u00e0 placer dans le r\u00e9pertoire www<\/code> de votre projet PhoneGap<\/code> <\/b><\/p>\n\r\n\t<!DOCTYPE HTML>\r\n\t<html lang="en">\r\n\t<head>\r\n\t\t<title>Employee Directory<\/title>\r\n\t\t<meta name="viewport" content="width=device-width,initial-scale=1"\/>\r\n\t\t<link rel="stylesheet" href="css\/jquery.mobile-1.0rc1.min.css" \/>\r\n\t\t<link rel="stylesheet" href="css\/styles.css" \/>\r\n\t\t<meta charset="UTF-8">\r\n\t\t<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" \/>\r\n\r\n\t\t<script type="text\/javascript" charset="utf-8" src="cordova-1.9.0.js"><\/script>\r\n\t\t<script src="js\/jquery-1.7.2.min.js"><\/script>\r\n\t\t<script src="js\/load-json.js"><\/script>\r\n\r\n\r\n\t<\/head>\r\n\t<body>\r\n\t\t<div id="employeeListPage" data-role="page" >\r\n\r\n\t\t\t<div data-role="header" data-position="fixed">\r\n\t\t\t\t<h1>Employee Directory<\/h1>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<div data-role="content">\r\n\t\t <ul id="employeeList" data-role="listview" data-filter="true"><\/ul>\r\n\t\t <\/div>\t\t\r\n\r\n\t\t<\/div>\r\n\r\n\t\t<\/body>\r\n\t<\/html>\r\n\t\r\n<\/pre>\nLe code source du fichier load-json.js<\/code><\/b><\/p>\n\r\n\t\r\n\t$(document).ready(function(){\r\n\t\t$(document).bind('deviceready', function(){\r\n\t\t\t\/\/Phonegap ready\r\n\t\t\tonDeviceReady();\r\n\t\t});\r\n\r\n\t\t\/\/ var output = $('#output');\r\n\t\tvar output = $('#employeeListPage');\r\n\r\n\r\n\t\t$.ajax({\r\n\t\t\t\/* URL vers le fichier JSON *\/\r\n\t\t\turl: 'http:\/\/127.0.0.1\/employeedirectory\/getemployees.php',\r\n\t\t\tdataType: 'jsonp',\r\n\t\t\tjsonp: 'jsoncallback',\r\n\t\t\ttimeout: 5000,\r\n\t\t\tsuccess: function(data, status){\r\n\r\n\t\t\t\t$.each(data, function(i,item){\r\n\t\t\t\tvar person = \r\n\t\t\t\t'- ' +\r\n\t\t\t\t'
' + item.firstname + ' ' + item.lastname + '<\/h4>' +\r\n\t\t\t\t'
' + item.title + '<\/p>' +\r\n\t\t\t\t'
' + item.department + '<\/p>' +\r\n\t\t\t\t'<\/li>';\r\n\r\n\t\t\t\t\toutput.append(person);\r\n\t\t\t\t});\r\n\r\n\t\t\t},\r\n\t\t\terror: function(){\r\n\t\t\t output.text('There was an error loading the data.');\r\n\t\t\t}\r\n\t\t});\r\n\t});\r\n\t\r\n<\/pre>\n
le code de la BDD directory<\/code><\/b><\/p>\n\r\n\t--\r\n\t-- BDD: `directory`\r\n\t--\r\n\r\n\t-- --------------------------------------------------------\r\n\r\n\t--\r\n\t-- Structure de la table `employee`\r\n\t--\r\n\r\n\tCREATE TABLE `employee` (\r\n\t `id` int(11) NOT NULL AUTO_INCREMENT,\r\n\t `firstName` varchar(30) NOT NULL,\r\n\t `lastName` varchar(30) NOT NULL,\r\n\t `managerId` int(11) NOT NULL,\r\n\t `title` varchar(45) NOT NULL,\r\n\t `department` varchar(45) NOT NULL,\r\n\t `officePhone` varchar(45) NOT NULL,\r\n\t `cellPhone` varchar(45) NOT NULL,\r\n\t `email` varchar(45) NOT NULL,\r\n\t `city` varchar(45) NOT NULL,\r\n\t `picture` varchar(250) NOT NULL,\r\n\t PRIMARY KEY (`id`)\r\n\t) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=22 ;\r\n\r\n\t--\r\n\t-- Contenu de la table `employee`\r\n\t--\r\n\r\n\tINSERT INTO `employee` VALUES(12, 'Steven', 'Wells', 4, 'Software Architect', 'Engineering', '617-000-0012', '781-000-0012', 'swells@fakemail.com', 'Boston, MA', 'steven_wells.jpg');\r\n\tINSERT INTO `employee` VALUES(11, 'Amy', 'Jones', 5, 'Sales Representative', 'Sales', '617-000-0011', '781-000-0011', 'ajones@fakemail.com', 'Boston, MA', 'amy_jones.jpg');\r\n\tINSERT INTO `employee` VALUES(10, 'Kathleen', 'Byrne', 5, 'Sales Representative', 'Sales', '617-000-0010', '781-000-0010', 'kbyrne@fakemail.com', 'Boston, MA', 'kathleen_byrne.jpg');\r\n\tINSERT INTO `employee` VALUES(9, 'Gary', 'Donovan', 2, 'Marketing', 'Marketing', '617-000-0009', '781-000-0009', 'gdonovan@fakemail.com', 'Boston, MA', 'gary_donovan.jpg');\r\n\tINSERT INTO `employee` VALUES(8, 'Lisa', 'Wong', 2, 'Marketing Manager', 'Marketing', '617-000-0008', '781-000-0008', 'lwong@fakemail.com', 'Boston, MA', 'lisa_wong.jpg');\r\n\tINSERT INTO `employee` VALUES(7, 'Paula', 'Gates', 4, 'Software Architect', 'Engineering', '617-000-0007', '781-000-0007', 'pgates@fakemail.com', 'Boston, MA', 'paula_gates.jpg');\r\n\tINSERT 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');\r\n\tINSERT INTO `employee` VALUES(6, 'Paul', 'Jones', 4, 'QA Manager', 'Engineering', '617-000-0006', '781-000-0006', 'pjones@fakemail.com', 'Boston, MA', 'paul_jones.jpg');\r\n\tINSERT INTO `employee` VALUES(3, 'Eugene', 'Lee', 1, 'CFO', 'Accounting', '617-000-0003', '781-000-0003', 'elee@fakemail.com', 'Boston, MA', 'eugene_lee.jpg');\r\n\tINSERT 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');\r\n\tINSERT 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');\r\n\tINSERT 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');\r\n\t\r\n\t\r\n<\/pre>\nEn savoir plus<\/h2>\n\n- PhoneGap and iOS quick setup video
http:\/\/www.youtube.com\/watch?v=W5hzwxxUCqE<\/a><\/li>\n- Xcode – Apple Developer
https:\/\/developer.apple.com\/xcode\/<\/a><\/li>\n- 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\/<\/a><\/li>\n- 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\/<\/a><\/li>\n- Sample Application using jQuery Mobile and PhoneGap
http:\/\/coenraets.org\/blog\/2011\/10\/sample-application-with-jquery-mobile-and-phonegap\/<\/a><\/li>\n- Getting started with PhoneGap
http:\/\/www.netmagazine.com\/tutorials\/getting-started-phonegap<\/a><\/li>\n- The PhoneGap Wiki
https:\/\/github.com\/phonegap\/phonegap\/wiki<\/a><\/li>\n- Adobe\u00ae PhoneGap\u2122 Build
https:\/\/build.phonegap.com\/<\/a><\/li>\n- Creating an Android “Hello World” Application with PhoneGap (PC)
http:\/\/mobile.tutsplus.com\/tutorials\/phonegap\/creating-an-android-hello-world-application-with-phonegap\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"PhoneGap est un framework javascript qui permet de faire des applications Iphone, Ipad avec l’aide de HTML5. Ce framework pr\u00e9sentait un tel int\u00e9r\u00eat qu’il est… <\/p>\n