Développement d’applications avec l’interface de ligne de commande PhoneGap

REMARQUE

Adobe recommande d’utiliser l’éditeur d’application d’une seule page (SPA) pour les projets nécessitant un rendu côté client basé sur la structure SPA (par exemple, React). En savoir plus.

A tout moment, en tant que développeur, vous pouvez exécuter votre application sur un périphérique ou dans un émulateur, à condition d’avoir configuré votre environnement de développement.

Pour exécuter les exemples suivants, vous aurez besoin d’un système qui exécute OSx (Mac) avec Xcode, ou d’un système Mac/Win/Linux avec le SDK Android installé.

Bootstrap votre environnement de développement

Configuration de l’interface de ligne de commande PhoneGap

Pour iOS : Pour développer pour iPhone et iPad, vous avez besoin de l’IDE Xcode d’Apple.

Pour Android : Pour développer pour iPhone et iPad, vous avez besoin de l'IDE Android Stuido de Google.

Télécharger la source

Une fois votre environnement de développement démarré, téléchargez la source depuis AEM App Build Tile :

  • Cliquez sur le chevron de la liste déroulante PhoneGap Build.

chlimage_1-45

  • Cliquez sur Télécharger la source.
  • Sélectionnez la source souhaitée dans le modal Source de téléchargement.

chlimage_1-46

REMARQUE

La source de développement contient l’état le plus récent de votre application, tout en incluant des modifications non planifiées. Utilisez la source d’évaluation pour créer des candidats à la version à soumettre à des fournisseurs de boutique d’applications.

Si vous n’organisez jamais votre application, la sélection de l’évaluation déclenchera le processus d’évaluation (conseil : cette application s’affiche en tant qu’application intermédiaire dans l’application PhoneGap Enterprise Viewer disponible dans AppStore et Google PlayStore).

  • Cliquez sur Télécharger et enregistrez le fichier ZIP sur votre ordinateur.
  • Extrayez le fichier zip téléchargé dans votre espace de travail.

Création et chargement de l’application (à partir de la source)

PhoneGap CLI peut créer un projet de plateforme, compiler la source et déployer l’application en une seule commande.

REMARQUE

Vous pouvez effectuer toutes ces étapes séparément, voir Documentation sur l’interface de ligne de commande PhoneGap.

  1. Vérifiez que vous avez installé l’interface de ligne de commande PhoneGap, voir ci-dessus.
  2. Dans une fenêtre de console (ou de terminal), accédez au répertoire racine de la source extraite.
  3. Saisissez la commande suivante :
phonegap run android

// -- or -- //

phonegap run ios
REMARQUE

Si vous rencontrez des problèmes à ce stade, revenez à l'état de base pour résoudre les problèmes…

  1. Créer un dossier (test mkdir)
  2. Accédez à ce nouveau dossier (test cd)
  3. Exécutez "phonegap create helloWorld"
  4. Accédez à helloWorld (cd helloWorld).
  5. Exécutez "phonegap run android (ou remplacez android par ios comme ci-dessus).
  6. Emulator s'ouvre en exécutant votre application PhoneGap nouvellement créée, indiquant "Device Ready" (Prêt pour périphérique) si le pont JavaScript vers natif est opérationnel.

Ceci vérifiera que vous êtes l'environnement de développement de l'interface de ligne de commande PhoneGap est opérationnel correctement.

Débogage des scripts JavaScript avec le débogage Safari et IOS

Vous pouvez déboguer les scripts JavaScript de votre application à l’aide des outils de développement de Safari, comme vous le feriez avec une application Web.

Activer les outils de développement Safari

Pour activer les outils de développement :

  • Ouvrir les préférences de Safari

    • Cliquez sur Safari dans la barre de menus.
    • Cliquez sur Préférences

  • Cliquez sur Avancé dans la fenêtre Préférences.

chlimage_1-47

  • Cochez la case Afficher le menu Développer dans la barre de menus.
  • Fermer la fenêtre Préférences

Connectez Safari à iOS

Vous pouvez connecter Safari à un périphérique ou émulateur iOS.

  • Dans une fenêtre de console, accédez au répertoire racine de la source extraite.
  • Saisissez la commande suivante pour lancer votre application sur votre périphérique ou émulateur.
phonegap run <platform> --device

// -- or -- //

phonegap run <platform> --emulator
  • Ouvrir Safari
  • Cliquez sur Développer dans la barre de menus.
  • Sous-menu Sélectionner le simulateur iOS
  • Cliquez sur home.html

chlimage_1-48

Déboguer du code JavaScript avec l’Inspecteur Web de Safari

Vous pouvez définir des points d’arrêt n’importe où dans votre source. Lorsque vous interagissez avec votre émulateur ou périphérique, l’exécution de votre application s’arrête à ces points d’arrêt. Vous pouvez parcourir l’exécution et inspecter les valeurs des variables.

  • Cliquez sur Ressources dans la fenêtre Inspecteur Web.
  • Naviguez dans l'arborescence des sources et cliquez sur le fichier source de votre choix.
  • Cliquez sur le numéro de ligne adjacent pour ajouter un point d'arrêt.
  • Interagir avec le périphérique ou l’émulateur

chlimage_1-49

  • Utilisez les boutons de contrôle pour continuer l’exécution, passer à l’étape suivante, entrer dans les méthodes et sortir des méthodes :

REMARQUE

Pour afficher les valeurs des variables, dans la méthode actuelle, passez la souris dessus.

Étapes suivantes

Une fois que vous avez appris à propos du développement d'applications avec l'interface de ligne de commande PhoneGap, voir Accès aux fonctionnalités des périphériques.

Sur cette page