Pas de code, pas de problème : introduction au travail avec ArcGIS Experience Builder

Vous voulez créer une application web, mais vous ne savez pas par où commencer? Vous êtes au bon endroit! ArcGIS Experience Builder offre une méthode simplifiée et structurée pour créer l’application web de vos rêves, sans avoir besoin de coder. Lors de notre récent webinaire, nous vous avons guidé à travers six étapes pour créer votre première application web. Ce billet détaillera chaque étape en profondeur.

Introduction

ArcGIS Experience Builder permet aux utilisateurs de créer des applications web personnalisées à l’aide d’une interface intuitive de type glisser-déposer, sans avoir besoin d’écrire du code. Avant de commencer à créer, il faut d’abord réfléchir à l’objectif de notre application. Quelles fonctionnalités souhaitons-nous que notre application offre? Et quelle apparence voulons-nous lui donner? S’agira-t-il d’une application simple pour le public ou d’une application plus complexe pour un usage interne?

Conseil : Planifiez les fonctionnalités que vous souhaitez intégrer à votre expérience avant de vous lancer dans sa création!

Prendre le temps de planifier les fonctionnalités dont votre expérience aura besoin vous permet de choisir si vous souhaitez créer votre expérience en mode Express ou en mode Full (complet). Esri a créé le mode Express pour offrir une solution simple, fondée sur des modèles, permettant de créer des applications web hautement configurables. Pour vous aider à décider quel mode choisir pour votre expérience, consultez l’article Au-delà de Web AppBuilder : une nouvelle expérience de création d’application.

Dans le reste de ce billet, je vous guiderai à travers les six étapes faciles pour créer votre expérience en mode Express :

1. Choisir un modèle

2. Choisir un thème

3. Sélectionnez les données sources

4. Ajouter ou connecter des widgets

5. Affiner les mises en page pour tous les appareils

6. Enregistrer, prévisualiser et publier

Pour accéder au mode Express dans ArcGIS Experience Builder, vous devez vous assurer de basculer le sélecteur de mode en haut à droite vers le mode Express. Ensuite, vous pouvez cliquer sur Create New (créer nouveau), ce qui nous amènera à la première étape de la création de notre expérience.

Étape 1 : Choisir un modèle

Le mode Express offre actuellement neuf modèles différents parmi lesquels vous pouvez choisir. À partir de cette page, vous pouvez basculer entre chacun des modèles pour interagir avec toutes les fonctionnalités qu’ils offrent. Cette page vous permet également de prévisualiser l’apparence de chaque modèle sur des appareils à grand, moyen et petit écran.

Choisir votre modèle devrait être un jeu d’enfant maintenant que vous avez bien planifié les fonctionnalités que vous voulez intégrer à votre expérience. Chacun des neuf modèles combine différentes fonctionnalités qui vous aideront à répondre à vos besoins. Voici les fonctionnalités que vous pouvez retrouver dans les modèles du mode Express :

• En-tête/logo – Vous permet d’ajouter l’image de marque de votre organisation à votre application.
• Table – Tables d’attributs interactives pour les données de votre application.
• Boutons – Fournissent des liens pour ouvrir des pages, des fenêtres et des vues de section dans votre application, faire défiler jusqu’à un bloc particulier ou en haut de la page, ou accéder à une adresse web.
• Conteneurs – Espaces réservés aux widgets qui sont toujours ouverts dans votre application.
• Contrôleur de widgets – Permet d’ajouter des widgets à une barre d’outils. Les utilisateurs peuvent ouvrir et fermer les widgets au besoin.
• Widget de recherche – Outil de recherche permettant aux utilisateurs de trouver des éléments, des enregistrements ou des lieux.

Conseil : Une fois que vous avez choisi un modèle pour votre expérience, vous ne pouvez plus le changer!

Étape 2 : Choisir un thème

Pour choisir un thème pour votre expérience, vous devrez ouvrir la Galerie de thèmes. Vous pouvez choisir l’un des thèmes prédéfinis qui viennent avec Experience Builder, utiliser le thème partagé de votre organisation ou même personnaliser les couleurs et les polices vous-même!

Conseil : Changer la taille de la police du thème ne modifie PAS la taille de la police de l’en-tête. Cela doit être modifié manuellement en sélectionnant la zone de texte de l’en-tête.

Étape 3 : Sélectionner les données sources

Vous pouvez ajouter des données sources en utilisant le volet de configuration du widget Map (carte). Le volet de configuration se trouve à droite de l’interface de création lorsque vous sélectionnez un widget. Pour faire apparaître ce volet, il vous suffit de sélectionner le widget Map (carte) dans votre expérience. Pour ajouter vos données sources, cliquez sur « Select map » (sélectionner la carte).

Emplacement du bouton « Select map » (sélectionner la carte) dans le volet de configuration de la carte

À partir de là, le volet Select data (sélectionner les données) apparaîtra. En bas de ce volet, cliquez sur « Add new map or scene » (ajouter une nouvelle carte ou scène).

Emplacement du bouton « Add new map or scene » (ajouter une nouvelle carte ou scène) dans le volet Select Data (sélectionner les données)

Cela ouvrira la page Add data (ajouter des données) où vous pourrez choisir les cartes web et les scènes web que vous souhaitez inclure dans votre expérience. Vous pourrez sélectionner du contenu provenant de vos groupes, de votre organisation, d’ArcGIS Online, du Living Atlas et de votre contenu personnel.

Une fois que vous avez sélectionné vos données, elles apparaîtront dans le volet Select data (sélectionner les données). Si vos données n’apparaissent pas automatiquement dans votre widget de carte, vous pouvez les sélectionner à partir du volet.

Emplacement où vos données apparaîtront dans le volet Select data (sélectionner les données)

Si vous souhaitez définir une vue initiale pour votre carte ou ajouter des outils comme une boussole ou une barre d’échelle, vous pouvez le faire dans le volet de configuration du widget Map (carte). À partir de ce volet, vous pouvez même choisir d’activer les fenêtres contextuelles et le zoom par défilement!

Options de personnalisation dans le volet de configuration du widget Map (carte)

Étape 4 : Ajouter ou connecter des widgets

Le mode Express vous permet d’ajouter des widgets de deux manières différentes, selon le modèle que vous avez choisi. Les widgets peuvent être ajoutés aux contrôleurs de widgets ou aux conteneurs de widgets. Dans les deux cas, le processus est similaire : sélectionnez le contrôleur ou le conteneur de widgets, et le bouton Add widget (+) (ajouter un widget) apparaîtra dans la barre d’outils de l’interface de création.

Ajouter un widget à un contrôleur de widgets

Ajouter un widget à un conteneur de widgets

Une fois que vous avez sélectionné le bouton « Add widget » (ajouter un widget), la galerie Add widget (ajouter un widget apparaîtra). Vous pourrez faire défiler la galerie pour sélectionner un widget ou rechercher le widget que vous souhaitez.

Emplacement de la galerie Add widget (ajouter un widget)

Après avoir sélectionné un widget, il apparaîtra dans le contrôleur ou le conteneur de widgets que vous aviez sélectionné au départ. Une fois que vous avez placé un widget, vous aurez accès à la gestion et à la suppression des widgets. La gestion des widgets vous permet de modifier l’ordre dans lequel ils apparaissent dans votre contrôleur de widgets. Pour supprimer un widget, assurez-vous de l’avoir sélectionné, puis cliquez sur le bouton Delete (suppression).

Emplacement du bouton Delete (suppression)

Étape 5 : Affiner les mises en page pour tous les appareils

Maintenant que nous avons connecté et configuré tous nos widgets, nous sommes presque prêts à terminer la création de notre expérience! L’avant-dernière étape consiste à s’assurer que notre application fonctionne comme prévu sur toutes les tailles d’écran. Cela est facilité dans Experience Builder, car vous pouvez basculer entre différentes tailles d’écran. Pour accéder à un aperçu de votre application sur différentes tailles d’écran, il vous suffit de sélectionner la taille d’écran souhaitée dans la barre d’outils de l’interface de création.

Modifier la mise en page de la vue de votre application pour une taille d’écran différente

En mode Express, vous ne pouvez pas apporter de modifications aux tailles d’écran moyennes et petites, seulement à la grande. Heureusement, Experience Builder ajustera automatiquement votre application pour qu’elle s’adapte aux dimensions des tailles d’écran moyennes et petites. Si vous souhaitez apporter des modifications aux versions moyenne et petite de votre application, vous devrez faire passer votre application au mode Full (Complet).

Conseil : Vous pouvez passer votre application au mode Full (complet) en cliquant sur le bouton « More » (plus) dans la barre d’outils de l’interface de création. Vous pouvez ensuite sélectionner « Switch to full mode » (passer au mode complet). Une fois que vous avez fait passé votre application au mode Full (complet), vous ne pourrez plus revenir en arrière! Il est recommandé de déplacer une copie de votre application au mode complet afin de conserver votre version d’origine en mode Express au cas où vous en auriez besoin.

Emplacement du bouton « More » (plus) dans la barre d’outils de l’interface de création, qui vous permet de faire passer votre application au mode Full (complet)

Étape 6 : Enregistrer, prévisualiser et publier

Une fois que vous êtes satisfait de votre application, vous pouvez l’enregistrer, la prévisualiser et la publier à partir de la barre d’outils de l’interface de création.

Une fois que vous avez terminé ces six étapes simples, vous êtes prêt à proposer votre expérience!

À venir

Dans ce billet, nous avons couvert les bases. Si vous souhaitez approfondir vos connaissances sur Experience Builder, consultez la partie 2 de cette série de billets : Pas de code, pas de problème : configurations avancées dans Experience Builder.

Ce billet a été écrit en anglais par Catherine-Anne Currie et peut être consulté ici.