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.

En tant que développeur, vous pouvez à tout moment exécuter votre application sur un appareil 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 exécutant OSx (Mac) avec Xcode ou d’un système Mac/Win/Linux avec le SDK Android installé.

Bootstrap de 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 d’Apple Xcode IDE.

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

Téléchargement de la source

Une fois que vous avez correctement redémarré votre environnement de développement, téléchargez la source à partir de la mosaïque AEM App Build :

  • 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 évaluées. Utilisez la source d’évaluation pour créer des candidats de version à envoyer aux fournisseurs de la boutique d’applications.

Si vous n’effectuez jamais l’évaluation de votre application, la sélection de l’évaluation déclenche le processus d’évaluation (indice : cela s’affichera 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)

L’interface de ligne de commande de PhoneGap peut créer un projet de plateforme, compiler la source et déployer l’application dans une seule commande.

REMARQUE

Vous pouvez effectuer toutes ces étapes séparément, voir Documentation de 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 aux concepts de base pour la résolution de problèmes.

  1. Création d’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. L’émulateur ouvre l’exécution de votre application PhoneGap nouvellement créée, indiquant "Prêt pour l’appareil" si le pont JavaScript vers natif est opérationnel.

Cela vous permet de vérifier que votre environnement de développement de l’interface de ligne de commande PhoneGap est opérationnel correctement.

Débogage des scripts JavaScript avec Safari et débogage 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.

Activation des outils de développement Safari

Pour activer les outils de développement :

  • Ouvrez 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érence .

chlimage_1-47

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

Connexion de Safari à iOS

Vous pouvez connecter Safari à un appareil iOS ou à un émulateur.

  • 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 appareil ou émulateur.
phonegap run <platform> --device

// -- or -- //

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

chlimage_1-48

Débogage de 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 appareil, 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 .
  • Parcourez l’arborescence source et cliquez sur le fichier source souhaité.
  • Cliquez sur le numéro de ligne adjacent pour ajouter un point d’arrêt.
  • Interaction avec l’appareil ou l’émulateur

chlimage_1-49

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

REMARQUE

Pour afficher les valeurs des variables, dans la méthode actuelle, pointez avec la souris.

Les étapes suivantes

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

Sur cette page