Assemblage d’applications web sous forme d’applications mobiles natives avec PhoneGap Build

Rechercher

Dernière mise à jour le 1 mai 2021 | S’applique également à Adobe Dreamweaver CS6

PhoneGap Build est un service dématérialisé (dans le cloud) qui permet d’assembler vos applications web sous la forme d’applications mobiles natives. PhoneGap Build prend en charge l’assemblage d’applications natives pour les systèmes d’exploitation de périphériques mobiles suivants :

iOS
Android
BlackBerry
webOS
Symbian
Windows Phone 8

Pour plus d’informations sur le service PhoneGap Build, voir le site web de PhoneGap.

Pour obtenir de l’aide sur l’utilisation du service PhoneGap Build, voir la documentation de PhoneGap Build.

L’intégration directe de Dreamweaver avec PhoneGap Build pour l’assemblage d’applications n’est pas prise en charge dans la dernière mise à jour de la version 2014 de Dreamweaver CC (octobre 2014), et versions ultérieures. Cependant, vous pouvez accéder directement au service PhoneGap Build en ligne et utiliser les dernières mises à jour des fonctionnalités pour assembler vos applications web.

Utilisation du service PhoneGap Build sous Dreamweaver CC (octobre 2014 et versions ultérieures)

Connectez-vous au service PhoneGap Build. Vous pouvez continuer à utiliser votre Adobe ID existant.
Une fois connecté, vous êtes redirigé vers la section « Apps » du site. Téléchargez vos actifs web en tant que fichier ZIP comportant des fichiers HTML, CSS et JavaScript ou pointez sur un référentiel Git ou SVN.

Section Apps du service PhoneGap Build
Le service PhoneGap Build compile et assemble le contenu en quelques minutes et vous recevrez les liens de téléchargement pour toutes les plates-formes mobiles.

Pour toute assistance sur le service PhoneGap Build service, accédez à la page de support ou au forum de la communauté.

Utilisation du service PhoneGap Build sous Dreamweaver CC (juin 2014)

Création d’un compte dans le service PhoneGap Build

Vous ne pouvez pas utiliser PhoneGap Build et Dreamweaver sans compte dans le service PhoneGap Build. De tels comptes sont gratuits et se configurent aisément. Pour créer un compte, accédez au site web de PhoneGap Build.

Vous devrez valider le compte à l’aide d’un courrier de confirmation avant que le compte ne soit rendu actif.

Configuration de l’environnement de développement

Selon les types d’applications que vous souhaitez assembler et les périphériques sur lesquels vous souhaitez effectuer des tests, diverses tâches de configuration doivent être réalisées avant l’assemblage de votre application. Il peut être utile de configurer certaines des options suivantes, toutes ou aucune d’elles :

SDK Android Si vous souhaitez tester des applications Android sur votre ordinateur local à l’aide d’un émulateur Android, vous devez télécharger et installer le SDK Android. Pour plus d’informations, voir la documentation d’Android.

Lorsque vous avez installé le SDK Android, vous devez démarrer le SDK Android et AVD Managers, puis sélectionner les outils d’Android que vous utiliser en local sur votre ordinateur. Dreamweaver utilise les informations que vous sélectionnez lors de cette configuration initiale pour compléter les paramètres de l’émulateur Android dans le panneau Service PhoneGap Build. Pour plus d’informations sur ces paramètres, voir la documentation d’Android.

IMPORTANT : si vous souhaitez utiliser un émulateur Android pour tester votre application sur un ordinateur local, assurez-vous que l’émulateur fonctionne de la façon désirée indépendamment de Dreamweaver avant d’effectuer le test.

SDK/PDK webOS Si vous souhaitez tester des applications webOS sur votre ordinateur local à l’aide d’un émulateur webOS, vous devez télécharger et installer le SDK/PDK webOS.

Lecteurs de codes QR (Quick Response) Si vous souhaitez transférer aisément votre appli assemblée sur votre appareil, vous avez besoin d’un lecteur de codes QR. (Lorsque vous assemblez une application à l’aide de Dreamweaver, vous recevez un code QR pour cette appli, qui s’affichera dans le panneau PhoneGap Build lorsque l’appli aura été assemblée.) Divers lecteurs de codes sont disponibles gratuitement sur différents marchés en ligne. Pour plus d’informations, recherchez « lecteur de code QR » dans Google.

Installation du module complémentaire PhoneGap Build

Avant d’utiliser le service PhoneGap Build sous Dreamweaver, vous devez installer le module complémentaire PhoneGap Build.

Pour installer le module complémentaire, accédez à Fenêtre > Parcourir les modules complémentaires. La page Modules complémentaires d’Adobe Creative Cloud s’affiche. Recherchez le module complémentaire PhoneGap Build et suivez les instructions à l’écran pour l’installer.

Important : avant d’installer les modules complémentaires, assurez-vous d’avoir activé la synchronisation de fichiers pour votre compte Adobe Creative Cloud. Pour plus de détails, consultez la section Activation de la synchronisation de fichiers sur Adobe Creative Cloud.

Assemblage d’applications mobiles avec PhoneGap Build

Assurez-vous que vous avez créé un site Dreamweaver comportant une page index.html (généralement la page de démarrage de votre application).

Remarque : PhoneGap Build ne prend en charge que les fichiers HTML, CSS et JavaScript. Votre site ne peut pas contenir de pages serveur (pages PHP, CFM ou autres types de pages basées sur un serveur).
Choisissez Site > Service PhoneGap Build > Service PhoneGap Build.
Saisissez vos informations de connexion et connectez-vous à PhoneGap Build. Si vous n’avez pas créé de compte PhoneGap Build, voir Création d’un compte dans le service PhoneGap Build.
Laissez l’option Créer comme nouveau projet activée, puis cliquez sur Continuer.
Pour les systèmes d’exploitation que vous ciblez, saisissez la clé et le mot de passe requis. Les informations de clé de signature sont requises uniquement pour Android, iOS et BlackBerry.

Si vous ne parvenez pas à créer plus d’une application, il est possible que vous ne soyez pas abonné au service PhoneGap.

Remarque :

si vous saisissez des informations incorrectes, la création échoue et un message d’erreur indiquant que vous avez saisi une clé ou un mot de passe incorrect s’affiche. Si vous ne saisissez aucune information, la création sous iOS échoue et une erreur de type « Clé de signature requise » est renvoyée. Les applications Android et BlackBerry sont créées à l’aide des certificats de débogage.

Entrez la clé et le mot de passe requis pour le système d’exploitation ciblé.
Notez que Dreamweaver ajoute un fichier ProjectSettings à la racine de votre site (il peut être nécessaire d’actualiser le panneau Fichiers pour le voir). Ce fichier est très important, car le service PhoneGap Build l’utilise pour assurer le suivi votre application.

Dreamweaver ajoute également un fichier config.xml à la racine du site. Double-cliquez sur ce fichier XML simple pour l’ouvrir.

Fichier config.xml

Personnalisez l’identité de votre application en modifiant le contenu de ce fichier. Si vous ne le faites pas, toutes vos applications posséderont le même nom par défaut.

Pour plus d’informations sur l’utilisation du fichier config.xml, voir la documentation de PhoneGap Build.
Enregistrez le fichier config.xml modifié, fermez-le, puis cliquez sur Régénérer dans le panneau Service PhoneGap. Lorsque PhoneGap termine d’assembler votre application pour chaque plate-forme, vous verrez des messages indiquant que la compilation est terminée.

Le panneau du service PhoneGap indique si la génération est terminée.

Remarque :

pour créer un assemblage pour Windows 8, vous devez vous connecter directement sur https://build.phonegap.com, charger les fichiers demandés, puis générer la compilation.
Dreamweaver utilise la version 2.9.0 de PhoneGap Build par défaut. Si vous souhaitez utiliser la dernière version de PhoneGap Build, effectuez la procédure suivante :
1. Supprimez la ligne suivante du fichier config.xml se trouvant dans le dossier racine du site :
2. Enregistrez le fichier.
3. Générez à nouveau le projet.
Une fois toutes vos versions terminées, plusieurs options s’offrent à vous. Vous pouvez télécharger les fichiers d’application sur votre ordinateur, numériser le code QR d’une version afin de transférer l’application sur votre appareil, ou émuler l’application à l’aide d’un émulateur (Android et webOS uniquement).

Téléchargement des fichiers de l’application

Pour télécharger une application depuis PhoneGap Build, cliquez sur le bouton Télécharger l’application (flèche vers le bas) dans le panneau Service PhoneGap Build.

Remarque : le téléchargement n’est pas disponible pour les applications iOS sans clé de signature. Pour plus d’informations, voir la documentation de PhoneGap Build.

Les fichiers d’application téléchargés portent les noms suivants :

iOS - app.ipa
Android - app.apk
BlackBerry - app.jad
webOS - app.ipk
Symbian- app.wgz

Numérisation d’un code QR afin de transférer une application vers un périphérique

Pour procéder, un lecteur de codes QR doit être installé sur votre appareil. Pour plus d’informations, voir Configuration de l’environnement de développement.

Remarque : les codes QR ne sont pas disponibles pour les applications iOS sans clé de signature. Pour plus d’informations, voir la documentation de PhoneGap Build.

Dans le panneau Service PhoneGap Build, cliquez sur le code QR correspondant à l’application que vous voulez télécharger.
Démarrez le lecteur de code QR sur votre périphérique mobile et numérisez le code QR.
Lorsque le téléchargement de l’application est terminé, vous pouvez la démarrer directement sur votre appareil.
Revenez à la liste en cliquant sur le bouton Retour au panneau Build.

Remarque : les codes QR ne sont pas disponibles pour les applications iOS sans clé de signature.

Emulation d’une application (Android et webOS uniquement)

IMPORTANT : vous devez installer le SDK Android et/ou le SDK/PDK webOS avant de continuer. Vous devez également préciser les éventuelles informations SDK/AVD qui doivent être accessibles localement à partir des applications de SDK. Pour plus d’informations, voir Configuration de l’environnement de développement.

Ouvrez le panneau Paramètres de PhoneGap Build en choisissant Site > Service PhoneGap Build > Paramètres de PhoneGap Build.
Définissez les emplacements des SDK Android et/ou webOS puis cliquez sur Enregistrer. Ces emplacements indiquent à Dreamweaver où trouver les informations dont il a besoin pour envoyer l’application aux émulateurs.
Dans le panneau Service PhoneGap Build (Site > Service PhoneGap Build > Service PhoneGap Build), cliquez sur le bouton Emuler (tourné vers le côté) pour l’application que vous souhaitez émuler.
Si vous avez déjà défini vos informations SDK/AVD depuis les applications SDK, une fenêtre contenant déjà des données doit s’afficher.
Choisissez le SDK/AVD à utiliser pour l’émulation puis cliquez sur Lancer.

Remarque : il est bien connu que les émulateurs peuvent être très lents. Un certain temps peut s’écouler avant que votre émulateur ne démarre et charge l’application.

Création et déploiement d’une application Android avec PhoneGap et Dreamweaver

Kevin Hoyt - Expert en développement Adobe

Création et déploiement d’une application iOS avec PhoneGap