Show Menu
SUJETS×

Création et modification d’applications à l’aide de la console d’applications

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 .
Le processus de développement des applications mobiles AEM reconnaît que les utilisateurs de différentes compétences contribuent au développement des applications mobiles. Le mappage de processus suivant illustre l’ordre général dans lequel les auteurs de contenu et les développeurs d’applications exécutent les tâches.
Des informations sur la manière d’exécuter les tâches du marketeur apparaissent sur cette page. Pour plus d’informations sur les tâches des développeurs, voir Création d’applications PhoneGap.

La structure des applications mobiles

AEM Mobile fournit le plan directeur de l'application PhoneGap pour la création d'applications mobiles. Le plan directeur définit la structure des applications que vous créez. Les applications se composent des éléments suivants :
  • Page racine.
  • Variations de langue de l’application.
  • Page d’accueil de la variation de langue.

La racine d'une application PhoneGap

La page racine des applications mobiles que vous créez dans AEM s’affiche dans la console Applications.
La page racine est stockée sous la propriété Chemin de destination de l’application spécifiée lors de la création de l’application (le chemin par défaut est /content/phonegap/apps). Le nom de la page est la propriété Name de l’application. Par exemple, l’URL par défaut de la page racine du site nommé myphonegapapp est http://localhost:4502/content/phonegap/apps/myphonegapapp.html .

Variation de langue d’une application PhoneGap

Les premières pages enfants de la page racine sont les variations de langue de l’application. Le nom de chaque page correspond à la langue de création de l’application. Par exemple, l’anglais est le nom de la variante anglaise de l’application.
​Remarque : Le modèle PhoneGap par défaut crée uniquement une application en anglais. Votre développeur peut modifier le plan directeur afin de créer plus de variations de langage.
La page de langue a deux objectifs :
  • Le contenu de la page correspond à la page de la variation linguistique de l’application.
  • Les propriétés de la page contrôlent plusieurs aspects de la conception de l’application, tels que l’URL à utiliser pour demander des mises à jour de contenu, ainsi que des informations sur la connexion à la version cloud et à l’intégration d’Adobe Analytics Services.

Page d’accueil

La page d'accueil, ou page index.html d'une variante de langue d'une application, s'affiche à l'ouverture de l'application. La page d'accueil fournit aux utilisateurs un menu de liens vers diverses pages de l'application. Le système de paragraphe vous permet d’ajouter des composants à la page pour la création de contenu.

Création d’une application mobile

Les applications mobiles reposent sur un plan directeur qui définit une structure de page et des propriétés. Vous pouvez configurer les propriétés d’application suivantes :
  • ​Titre : Titre de l’application.
  • ​Chemin de destination : Emplacement dans le référentiel où l’application est stockée. Conservez la valeur par défaut pour créer un chemin d’accès basé sur le nom de l’application.
  • ​Nom : La valeur par défaut est la valeur de la propriété Title avec suppression des espaces. Le nom est utilisé dans CQ pour faire référence à l’application, par exemple pour le noeud de référentiel qui représente l’application.
  • ​Description : Description de l’application.
  • ​URL du serveur : L’URL qui fournit du contenu en direct (OTA) est mise à jour vers l’application. La valeur par défaut est l’URL du serveur de publication de l’instance utilisée pour créer une application (provenant du service externalizer). Remarque : il doit s’agir d’une instance de serveur de publication plutôt que d’un auteur, ce qui nécessite une authentification.
Vous pouvez également fournir un fichier image à utiliser comme miniature de l’application, sélectionner la configuration PhoneGap Build à utiliser et sélectionner la configuration d’analyse des applications mobiles à utiliser. Cette image est uniquement utilisée comme miniature pour représenter votre application mobile dans la console des applications mobiles dans Experience Manager.
Il existe d’autres onglets (et facultatifs) pour créer un service cloud et intégrer le module Adobe Mobile Services SDK dans votre application.
  • Créer : Cliquez sur Gérer les configurations et configurez votre service de génération build.phonegap.com ici. Ensuite, à partir de la liste déroulante, vous pourrez sélectionner le nouveau service PhoneGap Build Cloud.
  • Analytics : Cliquez sur Gérer les configurations et configurez votre service cloud SDK c-measuring-mobile-applications Adobe Mobile Services. Ensuite, à partir de la liste déroulante, vous pourrez sélectionner le nouveau service mobile à intégrer dans votre application mobile.
Les développeurs peuvent utiliser le kit de démarrage AEM PhoneGap pour créer des applications et les ajouter à la console.
La procédure suivante utilise l’interface utilisateur tactile pour créer une application mobile.
  1. Dans le rail, cliquez sur Applications.
  2. Cliquez ou appuyez sur l’icône Créer.
  3. (Facultatif) Dans l’onglet Avancé, fournissez une description de l’application et modifiez l’URL du serveur si nécessaire.
  4. (Facultatif) Si vous utilisez PhoneGap Build pour compiler l’application, sélectionnez Configuration à utiliser dans l’onglet Créer.
    Pour créer une configuration de génération PhoneGap, cliquez sur Gérer les configurations.
  5. (Facultatif) Si vous utilisez SiteCatalyst pour suivre l’activité de l’application, sélectionnez la configuration à utiliser dans l’onglet Analytics.
    Pour créer une configuration d’application mobile, cliquez sur Gérer les configurations.
  6. (Facultatif) Pour afficher une icône d’application, cliquez sur le bouton Parcourir, sélectionnez le fichier image dans votre système de fichiers, puis cliquez sur Ouvrir.
  7. Cliquez sur Créer.

Modification des propriétés d’une application mobile

Après avoir créé une application mobile, vous pouvez modifier ses propriétés.

Modification du titre, de la description et de l’icône

  1. Dans le rail, cliquez ou appuyez sur Applications.
  2. Sélectionnez l’application à configurer, puis cliquez sur l’icône Afficher les propriétés de la page.
  3. Pour modifier les valeurs de propriété, cliquez ou appuyez sur l’icône Modifier.
  4. Configurez les propriétés de base et avancées, puis cliquez ou appuyez sur l’icône Terminé.

Configuration d’une variante de langue de l’application

  1. Dans le rail, cliquez ou appuyez sur Applications.
  2. Cliquez sur pour accéder à l’application mobile que vous souhaitez modifier dans la console d’administration des applications. Sélectionnez la version linguistique de l’application à configurer, puis cliquez sur l’icône Afficher les propriétés de l’application.
  3. Pour modifier les valeurs de propriété, cliquez ou appuyez sur l’icône Modifier.
  4. Configurez les propriétés dans les onglets Simple, Avancé, Créer et Analytics, puis cliquez ou appuyez sur l’icône Terminé.

Création du contenu d’une application mobile

Après avoir créé l’application mobile, ajoutez le contenu utilisé comme interface utilisateur de l’application.
  1. Dans le rail, cliquez ou appuyez sur Applications.
  2. Cliquez ou appuyez sur l’application, puis cliquez ou appuyez sur Anglais.
  3. Modifiez la page d’accueil ou ajoutez des pages enfants selon vos besoins.

Déplacement de contenu vers des applications mobiles

Le cache de synchronisation de contenu sur l’instance de publication AEM est utilisé comme référentiel de contenu pour les applications mobiles :
  • Le contenu du cache Content Sync est inclus dans l’application lorsque les développeurs compilent l’application.
  • Le contenu du cache est disponible pour les applications mobiles installées pour la mise à jour du contenu de l’application.
Les applications mobiles comprennent une commande Mises à jour qui télécharge et installe le contenu de l’application mis à jour. Lorsqu’une instance d’application envoie une demande de mise à jour, Content Sync détermine le contenu qui a changé depuis la dernière mise à jour ou installation de l’application et fournit le nouveau contenu.
Pour rendre le contenu mis à jour disponible pour les applications, mettez à jour le cache de synchronisation de contenu. Lors de la première mise à jour du cache, tout le contenu publié est ajouté. Les mises à jour suivantes ajoutent uniquement le contenu publié qui a changé depuis la mise à jour précédente.
Content Sync effectue également le suivi des mises à jour. Grâce à ces informations, Content Sync peut déterminer la mise à jour du cache à envoyer à une application mobile.
Procédez comme suit sur l’instance où vous souhaitez mettre à jour le cache. Par exemple, si votre application demande des mises à jour à partir de l’instance de publication, effectuez la procédure sur l’instance de publication.
  1. Dans le rail, cliquez ou appuyez sur Applications, puis cliquez ou appuyez sur votre application.
  2. Sélectionnez la page de démarrage, puis cliquez ou appuyez sur l’icône Mettre à jour le cache.

Utilisation de modèles d’application

Cette fonctionnalité est disponible avec les applications 6.1 Feature Pack 2 et offre un moyen facile d’exploiter les modèles d’application existants pour créer de nouvelles applications dans AEM.
Qu’est-ce qu’un modèle d’application ? Considérez-le comme un ensemble de modèles de page et de composants qui représentent une base ou une base d’application. Lors de la création d’une application basée sur le modèle d’une autre application, vous obtenez une application dont le point de départ est représentatif de l’application à partir de laquelle elle a été créée.
Vous devez disposer d’un modèle d’application mobile existant (ou d’une application installée avec un modèle d’application) pour pouvoir utiliser cette fonctionnalité.
Le dernier package d’exemples d’applications AEM 6.1 comprend une version mise à jour de l’application Geometrixx avec un modèle d’application. Vous pouvez également installer le StarterKit qui fournit également un modèle.
Procédure de création d’une application basée sur un modèle d’application :
  1. Assurez-vous que le dernier pack de fonctionnalités et les exemples de packages de référence des applications AEM 6.1 sont installés
  2. Cliquez sur Applications dans le rail de gauche.
  1. Cliquez sur le bouton + Créer dans la partie supérieure et sélectionnez Créer une application.
  2. Une fois que vous avez reçu la liste des modèles d’application, sélectionnez-en un :
  1. Cliquez sur Suivant.
  2. Indiquez un ID d’application et un titre, mais vous pouvez également inclure un nom et une description.
    1. De plus, vous pouvez fournir un fichier PNG (format d’icône PhoneGap pris en charge) en tant qu’icône en parcourant les ressources AEM.
    2. Rappelez-vous que vous pouvez modifier tous ces champs une fois l’application créée dans le volet Gérer l’application. A l’exception de l’ID d’application, une fois l’ID d’application défini, vous ne pouvez plus le modifier.
  1. Cliquez sur le bouton Créer, vous obtiendrez 2 options, Terminé (revenir à la vue catalogue des applications) ou Gérer l’application (ouvre le tableau de bord de l’application).
  2. Une fois créée, la nouvelle application doit apparaître dans le catalogue de l’application :
  1. Cliquez sur l’application pour l’ouvrir. Vous avez créé une nouvelle application à partir du modèle d’une application existante.
Si vous désinstallez le package d’application de référence Geometrixx Outdoors d’AEM et si vous avez créé une application basée sur son modèle, cette application ne sera plus fonctionnelle. L’application Geometrixx Outdoors peut être supprimée, mais le modèle d’application doit rester s’il est utilisé par d’autres applications mobiles.

Exploration de l’application Geometrixx Outdoors

L’application Geometrixx Outdoors est un exemple d’application PhoneGap qui présente les fonctionnalités du modèle d’application PhoneGap par défaut et des exemples de composants mobiles.
Pour ouvrir l’application, cliquez sur Applications mobiles dans le rail, puis sélectionnez Application Geometrixx Outdoors.

Fonctionnalités courantes de la page - Application mobile Geometrixx

Chaque page de l’application mobile comprend les fonctionnalités suivantes :
  • Bouton Retour permettant de revenir à la page parente. Notez que le bouton Précédent n’apparaît pas sur la page d’accueil.
  • Un rail extensible qui propose un menu de commandes et de liens :
    • Ouvrez la page Emplacements.
    • Ouvrez le panier.
    • Connectez-vous.
    • Mettez à jour l’application.
  • Système de paragraphe, permettant d’ajouter des composants et de créer du contenu.

Page d’accueil - Application mobile Geometrixx

Le contenu de la page d’accueil comprend les outils de navigation suivants :
  • Composant de liste de menus qui fournit des liens vers les pages enfants Gear, Reviews, News et About Us.
  • Composant du carrousel de glissement qui présente les pages enfants.

Page d'engrenage - Application mobile Geometrixx

La page Engrenage permet aux utilisateurs d’accéder aux pages de produits. Un composant de liste de menus permet d’accéder aux pages enfants de la page d’engrenage. Les pages enfants sont des catégories de produits que le site Web propose.
  • Saison
  • Vêtements
  • Sexe
  • Activité
Chaque page de catégorie utilise la même structure de contenu que la page d’engrenage. Le carrousel donne accès aux pages enfants qui sont des sous-catégories de produits. Les pages de sous-catégorie contiennent des listes de produits qui fournissent des liens vers les pages de produits.

Page Produits - Application mobile Geometrixx

La page Produits et son héritage de pages enfants implémentent un système de classification pour les pages de produits. Les pages les plus basses de chaque branche de l'hiérarchie sont une page de produit qui contient un composant Produit ng.
La page Produits n’est pas disponible pour les utilisateurs de l’application. La page Engrenage donne accès à chaque page de produit.

Page d’avis - Application mobile Geometrixx

Contient un bouton Retour. Le système de paragraphe vous permet d’ajouter des composants.
Lors de l’utilisation de l’application, la page Révisions est disponible à partir du carrousel sur la page en anglais.

Page d'actualités - Application mobile Geometrixx

Contient un bouton Retour. Le système de paragraphe vous permet d’ajouter des composants.
Lors de l’utilisation de l’application, la page Actualités est accessible à partir du carrousel sur la page en anglais.

Page À notre sujet - Application mobile Geometrixx

La page Qui sommes-nous contient plusieurs composants de ligne à deux colonnes. Chaque colonne contient une image ou un composant Texte. Les composants sont modifiables et le système de paragraphe vous permet d’ajouter des composants.
Lors de l’utilisation de l’application, la page Qui sommes-nous est disponible à partir du carrousel sur la page en anglais.

Page Emplacements - Application mobile Geometrixx

La page Emplacements contient un composant Emplacements.
Lors de l’utilisation de l’application, la page Emplacements est disponible dans la liste des menus de la page en anglais.

Exemples de composants mobiles

Plusieurs composants sont immédiatement disponibles dans Sidekick lors de la création des pages d’une application mobile. Les composants appartiennent au groupe de composants PhoneGap.

Image

Ajoutez une image au contenu de votre application.

Texte

Ajoutez du texte enrichi au contenu de votre application.

Emplacements de magasin

Le composant Emplacements de la boutique fournit aux utilisateurs des outils pour rechercher des points de vente :
  • Recherche
  • Liste des emplacements proches ou éloignés des coordonnées GPS du dispositif.
Le composant nécessite que le référentiel contienne des informations d’emplacement pour chaque magasin. Les exemples d’emplacement sont installés sur le noeud /etc/commerce/locations/adobe.

Ligne à deux colonnes

Permet d’ajouter des composants côte à côte à une page.