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 AEM de développement d'applications mobiles reconnaît que des utilisateurs de différentes compétences contribuent au développement d'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 effectuent des tâches.
Cette page contient des informations sur la façon d’exécuter les tâches du marketeur. Pour plus d'informations sur les tâches de développement, consultez Création d'applications PhoneGap.
AEM Mobile fournit le plan directeur de l'application PhoneGap pour la création d'applications mobiles. Le plan définit la structure des applications que vous créez. Les applications se composent des éléments suivants :
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 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
.
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 pour qu'il puisse créer plus de variations de langue.
La page Langue a deux objectifs :
La page Page d'accueil, ou 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.
Les applications mobiles sont basées sur un modèle qui définit une structure de page et des propriétés. Vous pouvez configurer les propriétés d’application suivantes :
Vous pouvez également fournir un fichier image à utiliser comme miniature de l’application, sélectionner la configuration de 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 en 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.
Les développeurs peuvent utiliser l'AEM PhoneGap Starter Kit 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.
Dans le rail, cliquez sur Applications.
Cliquez ou appuyez sur l’icône Créer.
(Facultatif) Dans l’onglet Avancé, fournissez une description de l’application et modifiez l’URL du serveur si nécessaire.
(Facultatif) Si vous utilisez le PhoneGap Build pour compiler l’application, sélectionnez la configuration à utiliser dans l’onglet Créer.
Pour créer une configuration de build PhoneGap, cliquez sur Gérer les configurations.
(Facultatif) Si vous utilisez le SiteCatalyst pour effectuer le suivi de l’activité de l’application, dans l’onglet Analytics, sélectionnez la configuration à utiliser.
Pour créer une configuration d’application mobile, cliquez sur Gérer les configurations.
(Facultatif) Pour fournir 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.
Cliquez sur Créer.
Après avoir créé une application mobile, vous pouvez modifier ses propriétés.
Dans le rail, cliquez ou appuyez sur Applications.
Sélectionnez l’application à configurer, puis cliquez sur l’icône Propriétés de la page de Vue.
Pour modifier les valeurs de propriété, cliquez ou appuyez sur l’icône Modifier.
Configurez les propriétés de base et avancées, puis cliquez ou appuyez sur l’icône Terminé.
Dans le rail, cliquez ou appuyez sur Applications.
Cliquez sur pour explorer 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 Propriétés de l’application de la Vue.
Pour modifier les valeurs de propriété, cliquez ou appuyez sur l’icône Modifier.
Configurez les propriétés dans les onglets Simple, Avancé, Créer et Analytics, puis cliquez ou appuyez sur l’icône Terminé.
Après avoir créé l’application mobile, ajoutez le contenu utilisé comme interface utilisateur de l’application.
Le cache de synchronisation de contenu sur l’instance de publication AEM est utilisé comme référentiel de contenu pour les applications mobiles :
Les applications mobiles comportent une commande Mises à jour qui télécharge et installe le contenu mis à jour de l’application. 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, vous devez mettre à 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 assure également le suivi des mises à jour. Grâce à ces informations, Content Sync peut déterminer la mise à jour du cache à envoyer à une application mobile.
Exécutez la procédure suivante 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.
Dans le rail, cliquez ou appuyez sur Applications, puis cliquez ou appuyez sur votre application.
Sélectionnez la page de démarrage, puis cliquez ou appuyez sur l’icône Mettre à jour le cache.
Il s’agit d’une fonctionnalité disponible avec Apps 6.1 Feature Pack 2 et qui permet d’exploiter facilement les modèles d’applications 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 fonction.
Le dernier exemple de package d’applications AEM 6.1 inclut 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 à partir d’un modèle d’application :
Cliquez sur Next (Suivant).
Indiquez un ID d’application et un titre, mais vous pouvez également inclure un nom et une description.
Si vous désinstallez le package d’application de référence Geometrixx Outdoors d’AEM et si une application est créée à partir de son modèle, cette application ne fonctionnera plus. 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.
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 les exemples de composants mobiles.
Pour ouvrir l'application, dans le rail, cliquez sur Applications mobiles, puis sélectionnez Application Geometrixx Outdoors.
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 offre un menu de commandes et de liens :
Système de paragraphe permettant d’ajouter des composants et de créer du contenu.
Le contenu de la Page d'accueil comprend les outils de navigation suivants :
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 Encre. Les pages enfants sont des catégories de produits du site Web.
Chaque page de catégorie utilise la même structure de contenu que la page d’engrenage. Le carrousel permet d’accéder 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.
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 permet d'accéder à chaque page de produit.
Contient un bouton Précédent. 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 Anglais.
Contient un bouton Précédent. Le système de paragraphe vous permet d’ajouter des composants.
Lors de l’utilisation de l’application, la page Actualités est disponible à partir du carrousel sur la page Anglais.
La page Qui sommes-nous contient plusieurs composants de ligne à deux colonnes. Chaque colonne contient un composant Image ou 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 Anglais.
La page Emplacements contient un composant Emplacements.
Lors de l’utilisation de l’application, la page Emplacements est disponible à partir de la liste de menus sur la page Anglais.
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.
Le composant Glissement de carrousel est un outil permettant de présenter et de parcourir les pages du site. Le composant comprend un carrousel qui passe en revue les images des pages au-dessus d’une liste de liens de page. Modifiez le composant pour spécifier les pages à exposer et le comportement du carrousel.
Notez que les images s’affichent dans le carrousel pour les pages associées à une image d’une manière spécifique. Lorsque les pages ne sont pas associées aux images, seule la liste des liens s’affiche.
Onglet Propriétés du carrousel
Configurez le comportement du carrousel :
Onglet Propriétés de la liste
Spécifiez comment la liste de page est générée :
Le composant Glissement de carrousel fournit les valeurs suivantes pour la propriété Build Liste Using. La boîte de dialogue Modifier change en fonction de la valeur que vous sélectionnez :
Pages enfants
Le composant liste toutes les pages enfants d’une page spécifique. Après avoir sélectionné cette valeur, sélectionnez la page dans l’onglet Pages enfants ou n’indiquez aucune valeur pour liste des enfants de la page active.
Liste fixe
Spécifiez une liste de pages d’inclusion. Après avoir sélectionné cette valeur, configurez la liste sur l’onglet Liste fixe qui s’affiche lorsque vous sélectionnez Liste fixe :
La propriété Ordre par n’affecte pas l’ordre des listes fixes.
Rechercher
Renseignez la liste à l’aide des résultats d’une recherche de mots-clés. La recherche est effectuée dans les enfants d’une page que vous spécifiez :
Recherche avancée
Renseignez la liste à l’aide d’une requête Querybuilder.
Ajoutez une image dans le contenu de votre application.
Ajoutez du texte enrichi au contenu de votre application.
Le composant Emplacements de la boutique fournit aux utilisateurs des outils pour trouver des points de vente :
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.
Permet d’ajouter des composants côte à côte à une page.