Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Dreamweaver CS6 : Les nouveautés

Compacter une application avec PhoneGap

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Le nouveau processus de compactage d'applications permet de compiler l'application directement vers différents systèmes natifs, Symbian, iOS, Android, Windows Phone 7 et BlackBerry et ce, que l'on soit sous Mac Os ou Windows. Seules les applications à destination d'iOS nécessitent une clé d'enregistrement pour développeur.
09:09

Transcription

Afin de mettre en pratique cette nouvelle fonctionnalité, cette nouvelle manière d'utiliser la fonction PhoneGap Dreamweaver CS6, je vous propose de télécharger l'application d'exemple de démarrage, qui est disponible sur: https://github.com/phonegap/phonegap-start Ici, depuis cette page, simplement en cliquant sur le fichier zip, on va pouvoir télécharger un certain nombre de fichiers, qui, une fois décompilés, vont être copiés sur votre disque dur, dans un emplacement que vous allez créer ainsi. L'ensemble des fichiers n'est pas nécessaire, vous pouvez laisser le fichier .gitignore et le fichier ReadMe qui ne sont pas nécessaires, vous allez récupérer l'ensemble de ces fichiers et les placer dans un site Dreamweaver Bien entendu, pour générer une application native en utilisant le cadre Phonegap, un site de Dreamweaver est nécessaire à cet effet. Alors, il n'y a pas que ça de nécessaire, il y a également de nécessaire le fait que le premier fichier à la source doit impérativement s'appeler: index.html et ce fichier index.html, si on l'ouvre, va pointer vers un certain nombre de fichiers script, ici, par défaut. Si vous regardez, de manière plus particulière, le fichier phonegap.js, celui-ci n'est pas présent sur la version locale. Donc, il n'est pas accessible ici. Mais ça c'est pas grave, on n'a pas besoin d'avoir un fichier phonegap.js en local, on a simplement besoin d'avoir un fichier code source ici qui pointe vers ce fichier parce que PhoneGap Build va en avoir besoin pour pouvoir compiler l'application native. Il va rechercher ce fichier-là. Donc, c'est impératif d'avoir un fichier index.html qui contient lui-même une balise script qui va pointer vers le fichier phonegap.js qui n'est pas nécessaire en local. Un deuxième fichier nécessaire va être le fichier config.xml, qui va permettre de configurer l'application. Si je regarde ce fichier XML, il est très simple, il est composé d'une seule balise externe widget, ici, qui contient le même certain nombre d'attributs et d'autres balises. Le premier attribut que vais devoir modifier va être l'attribut ID qui correspond au nom d'identification de l'applicatif que je vais réaliser. Généralement, on utilise une adresse URL à l'envers. Mais ici, je vais utiliser le nom de mon propre site: com.puce-et-média Et ici, le nom de l'application que je vais utiliser, je vais l'appeler Starter, par exemple, pour le nom de cette application-là. La version 1.0 me va très bien, je vais pouvoir donner le nom de l'application... ...voilà, une description éventuellement qui va permettre de définir la nature de cette application. Le nom de l'auteur, je ne le touche pas, puisque c'est André Luni qui a développé cette application. Donc, je le laisse en tant que propriétaire de l'application. Ici, je vais pouvoir régler un certain nombre de préférences et de fonctionnalités utilisées au sein de l'application. Si vous voulez en savoir plus sur ce fichier config.xml, je vous invite à vous rapprocher du site: build.phonegap.com/docs, ici, vous avez toute la documentation sur l'utilisation et notamment, sur l'utilisation de config.xml, ici, où l'intégralité des balises et attributs vont être détaillés et explicités. Les propriétés obligatoires: widget, le nom et la description, et puis, le reste va être optionnel, facultatif. Je vous invite à venir parcourir l'ensemble de ces informations. Une fois que toutes les balises sont modifiées ou renseignées, nous allons nous assurer d'enregistrer tout pour bien mettre à jour le document. Il suffit de se rapprocher du menu Site Service Phonegap Build, et encore Service PhoneGap Build et moyennant son email et mot de passe, il est dorénavant possible de se connecter au système en ligne sur le cloud. Une fois connecté, le système s'aperçoit qu'aucun fichier projet n'a été défini, il suffit donc d'utiliser ce projet-là ou, depuis ce menu déroulant, venir chercher un projet ancien si j'aurais déjà utilisé PhoneGap Build pour pouvoir générer ce projet par le passé. Donc, pour l'instant, simplement, créer un nouveau projet, on continue, et là, dès l'instant où PhoneGap Build va détecter l'intégralité des fichiers, c'est-à-dire, le fichier phonegap.js, le fichier de configuration, PhoneGap Build va commencer à analyser l'intégralité des systèmes disponibles, donc, iOS, Android, BlackBerry, WebOS, Symbian, il va commencer à compiler les applications pour les fabriquer. On s'aperçoit que Android est mis en queue et BlackBerry également, WebOS et Symbian, c'est-à-dire qu'ils sont en cours de fabrication. Par contre, on s'aperçoit que iOS nous donne un signal d'alerte rouge, comme quoi il ne saura pas compiler. Cela ne vient pas du fait que je sois sous Windows, là, et qu'il y ait une incompatibilité avec le système. Rappelons que tout se passe sur le cloud, donc en ligne, pas besoin d'avoir un Mac pour générer. J'ai simplement besoin d'une signature, une clé que je vais obtenir sur le site de développeur tools de Apple, pour pouvoir développer pour iOS. Dès l'instant où l'intégralité des autres applications sont disponibles, je vais pouvoir instantanément les télécharger, les récupérer pour pouvoir les utiliser. Il y a une autre possibilité, c'est d'utiliser le code QR. Le code QR va me permettre, si j'ai activé sur ma plateforme Android, la lecture du code barre, je vais pouvoir venir lire ce code barre et récupérer directement, depuis mon appareil mobile, l'application. C'est beaucoup plus rapide que de passer par un téléchargement USB. Quoi qu'il en soit, faites attention, dans les deux cas, on ne passera pas par Android Market ou par le App Store, donc, il faut demander à la plateforme Android, en l'occurrence ici, de pouvoir accepter des applications qui ne viendraient pas du magasin et de pouvoir être donc installées sur la plateforme. Revenons au panneau de base, j'ai une autre petite fonctionnalité pour Android ou WebOS qui va me permettre de lancer l'émulateur. Pour lancer l'émulateur, il faudrait que je l'aie déjà installé. Pour cela, je vais venir dans le deuxième menu du service PhoneGap Build, Paramètres de PhoneGap Build, et je vais pouvoir définir, maintenant, pour Android et WebOS, l'emplacement ces SDK. Il suffit que j'aie téléchargé les SDK d'Android, que je pointe vers le SDK d'Android, que je pointe vers le SDK de WebOS, et de pouvoir les enregistrer, afin de pouvoir lancer l'émulateur qui va me permettre de tester l'application sans avoir la plateforme de manière physique pour tester. Ces émulateurs ne vont pas remplacer un véritable test sur un appareil, mais ils vont permettre, déjà, de tester le bon fonctionnement. L'émulateur Android reste quand même réellement lent et énormément gourmand en ressources, donc, il faut quelques minutes pour le lancer et le mettre en application, mais une fois ces ressources consommées, le test peut se faire en grandeur nature, depuis l'émulateur pour Android et pour WebOS. Si on apporte des modifications à l'application, donc on vient modifier certains contenus de fichiers HTML, CSS ou Java Script, on va pouvoir reconstruire l'application directement depuis cette icône et donc, régénérer l'intégralité des applications natives. On peut également accéder, depuis le site de PhoneGap Build, donc ici, build.phonegap.com, en https, on va pouvoir se connecter à la plateforme en utilisant son login et mot de passe, à l'intégralité des applications que l'on aura générées depuis Dreamweaver. Ici, on a ma première application PhoneGap qu'on vient de générer ensemble, et une première que j'avais réalisée: PhoneGap Getting Started. En cliquant sur cette application, on a accès à l'intégralité des codes natifs, que cela soit pour Symbian, WebOS, BlackBerry, etc, et ici on peut accéder, également, à la manière de recompiler l'application, depuis la plateforme en ligne, ou la télécharger, la récupérer, ou en utilisant le QR pour pouvoir l'installer directement sur l'appareil mobile. Il est très simple de pouvoir compacter des applications en code natif depuis Dreamweaver, sans oublier que, par défaut, le fichier index doit être présent, doit pointer vers un java script, ici, phonegap.js, bien que celui-ci soit non présent dans le local, et ensuite d'avoir un fichier de configuration .xml qui soit renseigné aux propriétés de l'application que nous sommes en train de développer, et enfin, invoquer le service PhoneGap Build depuis la nouvelle palette présente dans le menu Site Service PhoneGap Build, qui nous permet de générer l'intégralité des codes natifs pour les appareils Android, BlackBerry, WebOS, Symbian et iPhone, si vous possédez la clé de signature.

Dreamweaver CS6 : Les nouveautés

Allez à la découverte des nouveautés de Dreamweaver CS6, qui gravitent autour du développement d’applications mobiles, de la pluri-distribution et de sites Internet réactifs.

3h16 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :23 avr. 2012
Mis à jour le:5 avr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !