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.

  1. 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.

  2. Cliquez sur l’onglet Content (Contenu), puis sur Create app (Créer une application).

    Bouton Create app (Créer une application)

  3. Choisissez Experience Builder.

    Option Experience Builder

  4. Dans la page d’accueil, cliquez sur Create new (Créer).

    Bouton 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).

  5. Dans l’onglet Default (Par défaut), recherchez le modèle Blank fullscreen (Plein écran vide) et cliquez sur Create (Créer).

    Modèle Blank fullscreen (Plein écran vide)

    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.

  6. Sur le ruban, cliquez sur Untitled experience 1 (Expérience sans titre 1) et saisissez Données démographiques sur la santé.
    Remarque :

    Le titre par défaut peut varier.

    Application renommée

    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.

  1. 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.

    Widget déplacé 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. Le mode Workflow (Processus) 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.

  2. Dans la fenêtre Business Analyst (Business Analyst), sous Mode (Mode), cliquez sur Preset (Prédéfini).

    Mode Preset (Prédéfini)

    Vous allez maintenant compléter le widget Business Analyst avec les widgets Map (Carte) et Text (Texte).

  3. Dans la fenêtre Insert widget (Insérer un widget), dans la section Map centric (Cartographique), faites glisser le widget Map (Carte) vers la zone d’affichage.

    Widget cartographique déplacé sur la zone d’affichage

  4. Dans la section Page elements (Éléments de page), faites glisser le widget Text (Texte) vers la zone d’affichage.
  5. Organisez les widgets Text (Texte) et Map (Carte) de sorte qu’ils aient la même largeur et qu’ils occupent environ un tiers de la zone d’affichage de gauche. Redimensionnez le widget Business Analyst (Business Analyst) de sorte qu’il utilise l’espace restant sur la zone d’affichage.

    Mise en page de l’application

    L’apparence de l’application est maintenant équilibrée. 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.

Remarque :

À tout moment, vous pouvez prévisualiser votre application et intergir avec elle en cliquant sur Live view (Vue dynamique).

Configurer les widgets

Configurez le widget Business Analyst (Business Analyst) pour votre projet du Département de la santé en l’associant à la carte et en définissant la localisation prédéfinie. Choisissez l’infographie affichée dans votre application et définissez un titre.

  1. 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.

  2. Dans le menu déroulant Select a Map widget (Sélectionner un widget cartographique), sélectionnez Map (Carte).

    Option Carte

  3. Sous Location settings (Paramètres de localisation), assurez-vous que l’option United States (États-Unis) est sélectionnée, puis cliquez sur Set a location (Définir une localisation).

    Bouton Set a location (Définir une localisation)

    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.

  4. Dans le champ de recherche, saisissez 1700 SW 7th St. et cliquez sur le résultat de recherche, à savoir, Topeka, au Kansas.

    Résultats de la recherche d’adresse

    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.

  5. Dans la fenêtre Business Analyst (Business Analyst), cliquez sur Set buffers (Définir des zones tampon).

    Option Set buffers (Définir des zones tampon)

    La fenêtre Set buffers (Définir des zones tampon) apparaît.

  6. Dans la fenêtre Set buffers (Définir des zones tampon), cliquez sur Drive time (Temps de trajet), puis sur Apply (Appliquer).

    Options de la zone tampon Drive time (Temps de trajet)

    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.

  7. Dans la fenêtre Business Analyst (Business Analyst), cliquez sur Select an infographic (Sélectionner une infographie).

    Option Select an infographic (Sélectionner une infographie)

    La fenêtre Select an infographic (Sélectionner une infographie) apparaît.

  8. 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).

    Liste déroulante des infographies

    L’infographie apparaît dans le widget.

    Exemple d’infographie

    Attribuez à présent un titre et une description à l’application pour fournir un contexte à ses utilisateurs.

  9. Double-cliquez sur le widget Text (Texte) et saisissez Health Care and Insurance Report (Rapport sur la santé et les assurances).

    Widget Text (Texte) avec nouveau texte

  10. Dans le widget Text (Texte), mettez en surbrillance le texte. Dans la fenêtre Text (Texte), remplacez la taille de police par 28 px, cliquez sur le bouton Bold (Gras), puis sur le bouton Center (Centre) pour aligner le texte au centre.

    Paramètres de texte

    Sur la zone d’affichage, le texte est mis à jour.

    Texte mis à jour dans le widget

  11. Sur le ruban, cliquez sur le bouton Save (Enregistrer).

    Bouton 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.

  1. Sur le ruban supérieur, cliquez sur Live view (Vue dynamique).

    Option 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.

    Mode Live view (Vue dynamique) actif

    La vue dynamique vous permet d’utiliser l’application comme l’utilisateur de l’application.

  2. 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.

    Résultats de recherche de la Maison de santé

    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.

    Prévisualiser l’application

  3. 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).

    Option 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.

    Infographie d’un temps de trajet de 10 minutes

    Maintenant que vous avez testé votre application et qu’elle fonctionne correctement, publiez-la pour pouvoir la partager.

  4. Sur le ruban, cliquez sur le bouton Save (Enregistrer), puis sur le bouton Publish (Publier) pour publier votre application.

    Bouton Publier

  5. Dans le ruban, cliquez sur le bouton More (Plus) et sélectionnez View published item (Afficher l’élément publié).

    Option View published item (Afficher l’élément publié)

    Un nouvel onglet du navigateur Web s’ouvre et l’application apparaît.

  6. Testez l’application en recherchant un établissement médical.
  7. Retournez à l’onglet de navigateur dans lequel votre application est en mode de mise à jour.
  8. Dans le ruban, cliquez sur le bouton More (Plus), puis sélectionnez Copy published item link (Copier le lien de l’élément publié).

    Option 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.

  9. Dans le ruban, cliquez sur le bouton More (Plus) et choisissez Change share settings (Modifier les paramètres de partage).

    Option Modifier les paramètres de partage

    La page des détails des éléments de votre application s’affiche.

  10. Cliquez sur le bouton Partager.

    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).

  11. Dans la fenêtre Share (Partager), cliquez sur Organization (Organisation), puis sur Save (Enregistrer).

    Partager avec l’organisation

    À 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.