Créer une application Experience Builder et y ajouter des widgets
Vous créez une application d’expérience Web à l’aide de ArcGIS Experience Builder. Vous commencez par un modèle vierge, puis ajoutez et configurez vos widgets pour configurer l’application.
Créer une expérience Web vierge
Vous commencez par créer une application d’expérience Web vierge.
- Connectez-vous à votre compte d’organisation ArcGIS.
Remarque :
Si vous ne disposez pas d’un compte d’organisation, consultez les options disponibles pour accéder aux logiciels.
- Sur le ruban, cliquez sur Content (Contenu).
- Cliquez sur Create app (Créer une application).
- Choisissez Experience Builder.
- Dans la page d’accueil ArcGIS Experience Builder, cliquez sur Create new (Créer).
La page Template (Modèle) apparaît et affiche une bibliothèque d’options de modèle. Les modèles sont des mises en page et thèmes prédéfinis pour les applications que vous créez. Pour cette application, vous utilisez le modèle Blank (Vierge).
- Dans l’onglet Default (Par défaut), recherchez le modèle Blank fullscreen (Plein écran vide) et cliquez sur Create (Créer).
L’application s’ouvre dans le générateur et affiche une zone d’affichage vierge. Vous renommez votre application en lui attribuant un titre plus significatif.
- Sur le ruban, cliquez sur Untitled experience (Expérience sans titre) et saisissez State health demographics.
L’expérience Web est maintenant prête pour que vous ajoutiez des widgets. Les widgets sont classés en fonction de leur fonctionnalité (par exemple, Map centric (Cartographique), Data centric (Données) ou Page elements (Éléments de page)).
Ajouter des widgets à l’application
Vous ajoutez ensuite le widget Business Analyst, un widget cartographique et un widget Text (Texte) à l’application.
- Dans la fenêtre Insert widget (Insérer un widget), sous Map centric (Cartographique), faites glisser le widget Business Analyst (Business Analyst) sur la zone d’affichage.
La fenêtre Business Analyst (Business Analyst) s’ouvre à droite avec le mode Workflow (Processus) sélectionné par défaut. Ce mode fournit à l’utilisateur de l’application les étapes permettant de sélectionner un emplacement, puis d’exécuter une infographie. Toutefois, comme vous connaissez l’infographie spécifique dont vous avez besoin et les emplacements spécifiques (comtés de votre État) à afficher, vous utilisez le mode Preset (Prédéfini) à la place.
- Dans la fenêtre Business Analyst (Business Analyst), sous Mode (Mode), cliquez sur Preset (Prédéfini).
Vous allez maintenant compléter le widget Business Analyst avec les widgets Map (Carte) et Text (Texte).
- Dans la fenêtre Insert widget (Insérer un widget), dans la section Map centric (Cartographique), faites glisser le widget Map (Carte) sur la zone d’affichage.
- Dans la section Page elements (Éléments de page), faites glisser le widget Text (Texte) vers la zone d’affichage.
Conseil :
Si vous avez des difficultés à localiser un widget, vous pouvez le rechercher en haut de la fenêtre Insert widget (Insérer un widget).
- Cliquez sur le widget Text (Texte) pour le sélectionner. Faites glisser sa poignée droite jusqu’à ce que le widget ait la même largeur que le widget Map (Carte).
- Positionnez le widget Text (Texte) dans le coin supérieur gauche de la zone d’affichage. Placez le widget Map (Carte) immédiatement au-dessous et redimensionnez-le de sorte que sa hauteur atteigne le bas de la zone d’affichage.
- Redimensionnez le widget Business Analyst (Business Analyst) de sorte qu’il utilise l’espace restant sur la zone d’affichage.
L’apparence de l’application est maintenant équilibrée : les widgets Text (Texte) et Map (Carte) forment une colonne qui occupent environ un tiers de la zone d’affichage et le widget Business Analyst occupe l’espace restant. Vous pouvez toujours modifier le positionnement des widgets, mais il semble correct pour le moment.
Vous avez créé une application dans Experience Builder, y avez ajouté trois widgets, puis avez conçu l’apparence de votre application et le positionnement des widgets. La fonctionnalité par défaut est actuellement affectée aux widgets. Vous allez à présent personnaliser la configuration des widgets en fonction des besoins de votre entreprise.
Configurer le widget Business Analyst et publier l’application
Le widget Business Analyst (Business Analyst) permet d’afficher des infographies dans une application. Vous avez ajouté le widget Business Analyst (Business Analyst) et l’avez défini de sorte qu’il utilise le mode Preset (Prédéfini), ce qui vous permet d’imbriquer une infographie et de prédéfinir la localisation par défaut, ainsi que le type de zone tampon et les unités des localisations ponctuelles. Vous allez maintenant configurer les widgets que vous avez ajoutés. Vous publierez ensuite l’application.
Remarque :
À tout moment, vous pouvez prévisualiser votre application et interagir avec elle en cliquant sur Live view (Vue dynamique).
Configurer les widgets
Vous allez configurer le widget Business Analyst pour votre projet du Département de la santé en définissant une localisation prédéfinie sur la carte. Choisissez l’infographie affichée dans votre application et définissez un titre.
- Dans la zone d’affichage, cliquez sur le widget Business Analyst (Business Analyst) pour le sélectionner.
La fenêtre Business Analyst (Business Analyst) apparaît. Dans cette fenêtre, vous pouvez configurer le widget en fonction de vos préférences. Par défaut, le widget Business Analyst est associé au widget Map (Carte). Vous allez définir une localisation par défaut pour la carte.
- Dans la fenêtre Business Analyst, sous Location settings (Paramètres de localisation), assurez-vous que l’option United States (États-Unis) est sélectionnée. Cliquez sur Set a location (Définir une localisation).
Remarque :
Le paramètre Data source (Source de données) recense la source et le millésime des données utilisées par votre widget. Les infographies que vous créez dépendent de ce paramètre. Par défaut, le paramètre est défini sur les données Esri les plus récentes, ce qui convient à vos besoins actuels.
La fenêtre Set a location (Définir une localisation) apparaît. Dans cette fenêtre, vous pouvez définir la zone géographique de vos infographies. Pour cet exemple, utilisez l’hôpital University of Kansas Health System comme localisation.
- Dans le champ de recherche, saisissez 1700 SW 7th St. et cliquez sur le résultat de recherche, à savoir, Topeka, au Kansas.
La localisation est ajoutée à la carte et sert de localisation par défaut lorsque les utilisateurs accèdent à votre application. Configurez maintenant les zones tampon qui permettront de déterminer les informations démographiques pour les infographies.
- Dans la fenêtre du widget Business Analyst, sous Buffers (Zones tampons), cliquez sur Rings (Anneaux).
La fenêtre Set buffers (Définir des zones tampon) apparaît.
- Dans la fenêtre Set buffers (Définir des zones tampons), cliquez sur Drive time (Temps de trajet).
Les zones tampons des temps de trajet disposent de paramètres supplémentaires qui vous permettent de calculer le temps de trajet lorsque vous vous éloignez d’une ressource ou que vous vous dirigez vers elle. Vous avez également la possibilité d’utiliser les données de trafic. Vous allez laisser ces paramètres inchangés.
- Cliquez sur Apply (Appliquer).
La carte est mise à jour pour représenter les zones isochrones de 5, 10 et 15 minutes autour de la ressource. L’infographie de votre application s’appuie sur ces zones et présente les informations démographiques les concernant.
Choisissez à présent l’infographie par défaut affichée dans votre application. L’objectif de l’application étant d’afficher les informations démographiques et de santé, sélectionnez une infographie avec ces variables.
- Dans la fenêtre Business Analyst, sous Infographics (Infographies), cliquez sur Select an infographic (Sélectionner une infographie).
La fenêtre Select an infographic (Sélectionner une infographie) apparaît.
- Développez la catégorie Esri Infographics (Infographies Esri) et sélectionnez Health Care and Insurance Statistics (Statistiques liées à la santé et aux assurances).
L’infographie apparaît dans le widget.
- Fermez la fenêtre Select an infographic (Sélectionner une infographie).
Comme vous configurez cette application en mode Prédéfini, vous avez accès à des options relatives aux infographies qui ne sont pas disponibles en mode Processus. Vous allez activer l’une de ces options qui permet aux utilisateurs de cliquer sur la carte pour déposer une punaise et calculer une infographie. Cette option aide les utilisateurs désireux d’afficher des infographies pour des zones qui ne sont pas centrées sur la ressource.
- Dans la fenêtre Business Analyst (Business Analyst), développez Infographic settings (Paramètres de l’infographie). Activez l’option Run on map click (Exécuter lors d’un clic sur la carte).
Attribuez à présent un titre et une description à l’application pour fournir un contexte à ses utilisateurs.
- Double-cliquez sur le widget Text (Texte) et saisissez Health Care and Insurance Report (Rapport sur la santé et les assurances).
- Mettez en surbrillance le texte que vous venez de saisir. Dans la fenêtre Text (Texte), définissez la taille de police sur 24 px.
- Cliquez sur le bouton Bold (Gras) et sur le bouton Center (Centre).
Sur la zone d’affichage, le texte est mis à jour.
- Sur le ruban, cliquez sur le bouton Save (Enregistrer).
Vous avez configuré l’application comme vous le souhaitez et êtes maintenant prêt à l’examiner en mode Live view (Vue dynamique) et à la publier.
Publier et partager l’application
Vous allez à présent afficher l’application tel qu’un utilisateur la verrait avec Live mode (Mode actif). Ensuite, vous publierez, testerez et partagerez l’application.
- Sur le ruban supérieur, cliquez sur Live view (Vue dynamique).
L’application passe à la vue dynamique et le bouton change de couleur pour indiquer que l’application est en vue dynamique.
La vue dynamique vous permet d’utiliser l’application comme l’utilisateur de l’application.
- Dans le widget cartographique, dans la barre de recherche, saisissez Maison de santé Wesley et sélectionnez le résultat 550 N Hillside Street, à Wichita, au Kansas.
La carte effectue un zoom avant sur la Maison de santé Wesley et applique des zones tampon autour de la localisation pour représenter des temps de trajet de 5, 10 et 15 minutes. L’infographie affiche les variables de santé et d’assurance d’un temps de trajet en voiture de cinq minutes à partir de la localisation.
- Dans la barre de titre de l’infographie, cliquez sur le menu déroulant 5 minute drive (Trajet de 5 minutes) et sélectionnez 10 minute drive (Trajet de 10 minutes).
L’infographie est mise à jour pour afficher les données démographiques à l’intérieur de la zone tampon de 10 minutes.
Par ailleurs, vous allez tester l’option Run on map click (Exécuter lors d’un clic sur la carte) que vous avez activée.
- Cliquez sur n’importe quel endroit de la carte.
Une punaise est insérée à l’endroit où vous avez cliqué. Les temps de trajet sont calculés à partir de la punaise et l’infographie est mise à jour pour afficher les informations démographiques de la zone.
Maintenant que vous avez testé votre application et qu’elle fonctionne correctement, publiez-la pour pouvoir la partager.
- Si nécessaire, enregistrez l’application.
- Sur le ruban, cliquez sur le bouton Publish (Publier).
Votre application est publiée.
- Dans le ruban, cliquez sur le bouton More (Plus) et sélectionnez View published item (Afficher l’élément publié).
Un nouvel onglet du navigateur Web s’ouvre et l’application apparaît.
- Testez l’application en cliquant sur une localisation de la carte et en vous assurant d’une part qu’elle crée des zones de temps de trajet pour la localisation considérée et, d’autre part, qu’elle met à jour l’infographie.
- Retournez à l’onglet de navigateur dans lequel votre application est en mode de mise à jour.
- Dans le ruban, cliquez sur le bouton More (Plus), puis sélectionnez Copy published item link (Copier le lien de l’élément publié).
Vous avez copié le lien vers votre application publiée et pouvez la partager. Toutefois, le paramètre de partage par défaut étant destiné au propriétaire, personne d’autre ne peut accéder à l’application à moins que vous ne modifiez les paramètres. Vous pouvez accéder à la page des détails des éléments de l’application dans ArcGIS Online à partir de l’application.
- Dans le ruban, cliquez sur le bouton More (Plus) et choisissez Change share settings (Modifier les paramètres de partage).
La page des détails des éléments de votre application s’affiche.
- Cliquez sur le bouton Partager.
La fenêtre Share (Partager) s’affiche avec différentes options de partage. Pour l’heure, seul le propriétaire de l’application peut y accéder, mais vous pouvez modifier un paramètre de façon à la partager avec votre organisation ou avec tout le monde (le public).
- Dans la fenêtre Share (Partager), cliquez sur Organization (Organisation), puis sur Save (Enregistrer).
À présent, l’application est partagée et peut être utilisée par les autres membres de votre organisation.
Dans ce didacticiel, vous avez créé une application Web pour afficher les infographies d’une localisation spécifique saisie par l’utilisateur. Vous avez ajouté le widget Business Analyst et d’autres widgets, vous les avez configurés, puis avez testé l’application avant de la publier et la partager. Les autres utilisateurs peuvent maintenant utiliser votre application pour découvrir les informations sur la santé et les assurances relatives à un établissement médical de leur choix.
Vous trouverez d’autres didacticiels dans la bibliothèque des didacticiels.
