Salle de classe SIG 2015 : Construire une application Web vec Web AppBuilder for ArcGIS

Transcription

1 Salle de classe SIG 2015 : Construire une application Web vec Web AppBuilder for ArcGIS

2

3 Table des matières Exercice : Web AppBuilder for ArcGIS : construire des applications JavaScript devient facile... 3 Etape 1: Créer une application de visualisation avec Web AppBuilder for ArcGIS... 4 Etape 2: Créer une application dédiée à l édition des données sur le web Etape 3: Déployer un widget personnalisé sur le Web AppBuilder for Developer Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 2

4 Exercice : Web AppBuilder for ArcGIS : construire des applications JavaScript devient facile Temps Estimé : 40 min Cet exercice a pour objectif de vous apprendre les bases de l utilisation du Web AppBuilder for ArcGIS. Vous allez apprendre à créer des applications facilement en JavaScript. Vous verrez comment mettre en place ces applications et comment les déployer. Vous utiliserez des comptes ArcGIS Online pour organisation afin d exploiter le Web AppBuilder. Dans une première partie vous allez créer une Webmap de consultation basée sur des données stockées dans un fichier CSV. Nous allons configurer cette dernière pour qu elle soit pertinente à afficher dans une application. Vous intégrerez ensuite cette Webmap dans une application web en Javascript grâce au Web AppBuilder for ArcGIS. L idée est de créer une application simple montrant au grand public la position des zones de dangers avec les limitations de vitesses associées sur le réseau routier français. Ces informations auraient vocation à être diffusées sur un site grand public. Nous verrons par la suite comment créer sans grande précision les emplacements des travaux, comme par exemple un ponctuel représentant l inspection d un radar, un linéaire représentant la future zone qui recevra un radar tronçon ou une zone représentant la future implantation de nouveau radar fixe. Des informations attributaires viennent compléter le graphisme comme la nature des travaux et leurs dates. Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 3

5 Etape 1: Créer une application de visualisation avec Web AppBuilder for ArcGIS Dans cette étape, vous allez créer une application simple qui cartographie l ensemble des zones de dangers avec limitation de vitesses. Vous allez partir d un fichier CSV pour construire une Webmap qui pourra être intégrée dans le Web AppBuilder for ArcGIS. Ouvrez le navigateur google chrome et accédez la page (tapez ArcGIS Online dans Google ce sont les premiers liens proposés) Sur la page d authentification inscrivez le login mot de passe comme cidessous (utilisez l ID associé à votre machine) : Une fois connecté, dirigez-vous vers l onglet Contenus. Cette partie permet de gérer les données que vous faites monter (uploader) sur la plateforme. Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 4

6 Nous allons ajouter les données au format CSV et convertir cette table en service hébergé ArcGIS Online afin de pouvoir accéder à toutes les fonctionnalités de la plateforme. Pour cela il suffit de cliquer sur Ajouter un élément puis A partir de mon ordinateur. Une fenêtre s ouvre cliquez sur Choisissez un fichier puis dirigez-vous sur le dossier C:/Student/WebApp et pointez sur le fichier ZonesDangerFr.csv. Respectez bien la capture d écran ci-dessous (mettez bien votre ID sur le titre de votre couche d entité) puis patientez le temps que le service soit créé : Concernant les données Zones de danger : Suite au décret du 04 janvier 2012 sur l'interdiction des avertisseurs de radars, l utilisation d une base radars dans son GPS est interdite. Les nouvelles réglementations obligent à utiliser des «Zones de Danger». Pour être conforme à la norme, ces «zones» doivent ne pas être un point précis mais bien une zone d'au moins : 300 mètres en agglomération, 4 kilomètres sur autoroute, 2 kilomètres sinon Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 5

7 Une fois le service généré cliquez sur puis descendez pour cocher la case Autoriser les exportations vers différents formats Enregistrez puis cliquez sur OUVRIR puis ajouter à la nouvelle carte Cochez la case si une fenêtre vous indique qu il y a trop de point à afficher dans la carte Les points d intérêts (POI) viennent de s ajouter dans la carte. Naviguez dans la carte pour visualiser les données. Remarquez que la symbologie vient de se mettre à jour automatiquement (nouveauté d ArcGIS Online : Smart Mapping). Nous allons un peu modifier cette symbologie. Accédez au menu d accès rapide de votre couche et sélectionnez Modifier le style Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 6

8 Dans Choisir un attribut à afficher sélectionnez ZD_Entree_Sortie Dans la fenêtre de gauche cliquez sur OPTIONS Nous allons changer les symboles. Cliquez sur le Symbole ZonesDangerE. Nous allons utiliser un symbole image déjà créé pour l exercice. Cliquez sur Utiliser une image Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 7

9 Ici nous devons coller l url d une imagette. Le lien de l image se trouve dans un fichier texte sur votre ordinateur. Ouvrez le fichier TXT qui se trouve sur "C:\Student\WebApp\Symbo.txt" et copier le premier lien. Collez le ensuite dans le paramètre prévu pour sur ArcGIS Online. Cliquez ensuite sur le petit + qui se trouve à côté, changez la taille du symbole à 15px. Répétez le processus pour ZoneDangerO en copiant dans le fichier TXT le 2 ème lien. Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 8

10 Une fois paramétré cliquez sur OK en bas de la page puis sur TERMINE Nous allons configurer la fenêtre contextuelle. Dans la partie gauche de la fenêtre au niveau de votre couche ZonesDangerFr cliquez sur les puis sur Configurer la fenêtre contextuelle. Dans la fenêtre de configuration au niveau de Titre renseignez le champ ZD_Entree_Sortie ainsi que le champ ID_Troncon. Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 9

11 Cliquez ensuite sur configurer les attributs. Dans la nouvelle fenêtre désactivez les 2 champs déjà cochés puis cliquez sur OK puis cliquez ENREGISTRER LA FENETRE CONTEXTUELLE Par le menu du sélecteur de fond de carte passez le fond de carte sur Topographie ou un autre fond de carte qui vous convient et faite un zoom sur la région parisienne ou votre région de prédilection. Notre Webmap est maintenant configurée. Nous allons pouvoir l utiliser pour construire notre première application avec le WebApp Builder for ArcGIS. Mais avant cela vous devez l enregistrer. Cliquez sur la disquette Enregistrez sous Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 10

12 Pour fonctionner la Web AppBuilder a besoin d une Webmap impérativement (soir une Webmap créée sur ArcGIS Online soit une Webmap créée sur Portal for ArcGIS) Renseignez les valeurs comme suit, puis enregistrez la carte : Vous allez utiliser le WebAppBuilder hébergé par ArcGIS Online. Pour pouvoir l utiliser vous devez disposer d un compte d organisation ArcGIS Online. L autre solution est de disposer d un Portal for ArcGIS en version 10.3 (Arcgis Online sur vos serveurs d entreprise) Cliquez sur Partager Cliquez sur CREER UNE APPLICATION WEB Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 11

13 Dans la nouvelle fenêtre qui apparait cliquez sur l onglet Web AppBuilder Pour le titre de votre application renseignez WebappZonesDanger(VOTRE ID) puis cliquez sur Patientez quelques secondes, le Web AppBuilder s ouvre dans la même fenêtre. Cette page va vous permettre de configurer les futures applications que vous créerez. C est donc toujours via cette page que l on peut générer les applications JavaScript de manière automatique et configurable. Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 12

14 Dans la partie Thème explorer les thèmes (pour tester les thèmes choisissez en un, enregistrer votre application puis cliquez sur lancer. Repassez sur la fenêtre de configuration de votre navigateur pour revenir sur la page de configuration) Nous prendrons le thème Launchpad pour la suite de l exercice). Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 13

15 Dans le 2 ème onglet Carte vous retrouvez la Webmap que vous avez configuré (ici vous pouvez retrouver toutes les Webmap de votre portail ArcGIS Online afin d utiliser toutes vos données dans vos applications). Vous pouvez aussi redéfinir la vue initiale de la carte. Nous allons rester sur votre région de prédilection ou sur l ile de France. Vous pouvez également modifier les plages d échelles pour l affichage de vos données dans l application. Cliquez sur. Dans la nouvelle fenêtre qui vient de s ouvrir supprimez les échelles comme indiqué dans la capture ci-dessous : Remarquez que l affichage des données est bloqué au ème environ lorsque vous dé-zoomez (petite échelle) Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 14

16 Cliquez sur Dans le 3 ème onglet Widget vous allez pouvoir configurer tous les outils qui seront à disposition des utilisateurs finaux. C est un onglet clé de la configuration. Les équipes d Esri vous propose des widgets déjà développés qui correspondront à vos attentes dans bien des cas. Sachez que cette partie du Web AppBuilder est extensible. Vous pouvez rajouter vos propres widgets métier. Nous allons configurer l Anchor bar Controller. Elle correspond aux widgets d accès rapide de l application. Cliquez sur Définir les widgets sur ce controlleur (Nous allons configurer cette barre d accès rapide pour quelle propose tous les widgets primordiaux que nous voulons mettre à disposition des utilisateurs) Cliquez sur le plus pour accéder à la liste des widgets disponibles. Analysez tous les widgets disponibles. Nous sommes en version 1.2 du Web AppBuilder. Des nouveaux widgets sont apparus comme : Le Widget "Rechercher" remplace le Widget "Géocodeur". Il intègre les capacités de géocodage et de recherche multiple dans les couches d'entités de la carte. Il implémente le mécanisme de suggestion introduit dans les services de géocodage d'arcgis Server Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 15

17 Le Widget "Mode continu" permet la visualisation et le contrôle des flux de données temps-réel issus des Stream Services d'arcgis Server. Un nouveau Widget "Summary" permet de récapituler des attributs numériques des entités se trouvant dans l'étendue courante de la carte. Un nouveau Widget "GeoLookup" (en version beta) permet d'enrichir les attributs d'entités ponctuelles issues d'un fichier CSL (lat/long) à partir des attributs d'une ou plusieurs couches de polygones de la carte. Une nouvelle option permet de définir les Widget devant être automatiquement ouverts lors de l'ouverture de l'application. Le Widget "Géotraitement" supporte désormais le téléchargement de données pour pouvoir exploiter les services de géotraitement ArcGIS Server nécessitant ce type de paramètre en entrée. Le Widget "Liste des couches" propose dorénavant des menus contextuels configurables. Cliquez sur le widget Analyse et cliquez sur OK Ce widget vous permet de disposer dans vos applications JavaScript de tous les outils d analyses disponible sur ArcGIS Online par default (Attention consomme aussi des crédits!) Dans la configuration choisissez Extraire les données vous pouvez cliquer aussi sur les paramètres pour analyser les paramètres par défaut. Cliquez sur OK (Nous testerons tous nos widgets une fois les avoir tous ajouté) Ajoutez le widget Calculer un itinéraire. Pour les paramètres du widget laissez les paramètres par défaut. Il nous permettra de calculer des d un point A vers un point B Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 16

18 Ajoutez le widget Résumé. De la même façon pour les paramètres du widget laissez les paramètres par défaut. Ce widget va agréger les points entre eux. Nous n allons pas rajouter d autres widgets, le but n est pas de surcharger l application en fonctionnalités mais bien de cibler le sujet sur lequel porte l application. (les autres widgets intéressants mais non pertinents dans notre cas : Requêtes / Mise à jour / Géotraitement (ArcGIS Server Requis)) Enregistrez vos modifications. Pour revenir sur la configuration des widgets cliquez sur Dans la 2 ème partie de la configuration des widgets vous pouvez modifier les paramètres des outils de base de l application. Regardez un peu tous les widgets basic proposé puis cliquez sur Coordinate (sur le stylo qui s affiche lorsque vous passez la souris dessus) En France le système de coordonnées légal est le RGF93_Lambert93 (WKID 2154). Cliquez sur ajouter un système de coordonnées en sortie et remplissez la fenêtre comme la capture ci-dessous (Laissez-le WGS) : Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 17

19 Si vous souhaitez modifier d autres paramètres pour ces widgets de base. Regardez et testez les options proposées. Dans la 3 ème partie de configuration des widgets nous allons ajouter 3 outils d aide à la navigation. Remarquez que le widget table attributaire est activé (permet d accéder aux enregistrements pour visualiser les attributs) Ajouter les uns à la suite des autres le widget Fond de carte (laissez les paramètres pas défaut), le widget Geosignet (créez 2 géosignets, sur votre région de prédilection ainsi que sur la France entière) et enfin le widget Mesures. Une fois terminé cliquez sur Enregistrer Votre application est prête à être utilisée. Cliquez sur Aperçu pour voir le look de votre application sur différentes taille d appareils mobile. On appel cette adaptation à la résolution le responsive design. Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 18

20 Si vous disposez d un smartphone capable de lire les QR codes alors testez votre application en scannant le QR code et en vous connectant sur la plateforme avec vos identifiants. Pour revenir en arrière cliquez sur Configurer Vous allez pouvoir lancez votre application comme si un utilisateur testait votre application. Cliquez sur Lancer. Lancez et testez tous les widgets ajoutés! Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 19

21 Listes des couches : Analyse (Extraction de données) : Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 20

22 Itinéraires : Sur notre itinéraire nous risquons de croiser 1 zone de danger (dans le sens Versailles- Meudon)! Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 21

23 Summary (faire un zoom sur la France entière) : Une fois testée votre application est prête à être déployée. Fermez l onglet et repassez sur la page de configuration du Web AppBuilder. Puis dans le menu accueil sélectionnez Mon Contenu. Sélectionnez votre application dans vos contenus Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 22

24 Cliquez sur Partager. Et partagez votre application avec tout le monde (public) Mettez à jour le partage Si vous cliquez sur votre application, vous tombez sur la page de description. Ici vous pouvez trouver l Url public de votre application (à mettre sur un page web ou à envoyer dans un ) Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 23

25 Pour les développeurs, vous pouvez aussi télécharger le code source de l application afin de la déployer en interne sur votre propre server web. Vous pouvez aussi faire des modifications dans le code source de l application en JavaScript. Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 24

26 Etape 2: Créer une application dédiée à l édition des données sur le web Dans cette étape nous allons créer une application permettant d éditer les données sur le web. Pour pouvoir éditer les données stockées sur la plateforme il faudra utiliser les services d entités. Nous allons publier un service d entité à partir d ArcGIS Pro. Lancez ArcGIS Pro (Connectez-vous avec les identifiants donnés en début d exercice) Dans la page de démarrage cliquez sur Ouvrir un projet existant. Dans la nouvelle fenêtre cliquez sur Parcourir Naviguez jusqu à : C:\Student\WebApp\EditionWebApp.ppkx. Votre projet va s ouvrir Les stations d Autolib et de Velib vont s afficher dans l application Nous allons partager cette carte en tant que Webmap directement dans ArcGIS Online. Cliquez sur le ruban SHARE Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 25

27 Cliquez ensuite sur Carte Web, une fenêtre s active sur la droite Renseignez les paramètres (renseignez bien VOTRE ID) comme sur la capture ci-dessous, cliquez sur Share lorsque vous êtes près : Merci de patientez 2 à 5min le temps que le service soit publié. Une fois que le service est publié vous devez obtenir ce message : Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 26

28 Vous pouvez repassez par ArcGIS Online dans votre navigateur et vous dirigez vers vos contenus. Retrouvez un service d entité (feature Layer) nommé EditionVOTRE ID_WFL. Cliquez dessus pour afficher les détails Cliquez sur Modifier, puis descendez en bas de la page Activez la mise à jour sur les couches puis cliquez sur enregistrer Sur le bureau de l ordinateur trouvez le raccourci arcgis-web-appbuilder- 1.2 qui permet de lancer le Web AppBuilder en version développeur. Lancez le Web AppBuilder pour developper, une page Web s ouvre automatiquement Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 27

29 Cliquez sur continuer Connectez-vous avec vos identifiants de début de formation Vous devez tomber sur cette page : Cliquez sur Créer, puis choisissez le modèle Default Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 28

30 Renseignez le titre et la description comme dans la capture, puis cliquez sur OK : Choisissez le thème multi-fenetres : Pour la mise en page choisissez la 3eme option : Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 29

31 Passez sur l onglet Carte et choisissez la carte que vous avez publié avec ArcGIS Pro : Passez dans l onglet Widget, dans le menu inférieur sélectionnez l ajout de widget : Sélectionnez le widget de mise à jour : Désactivez la modification des Velib puis cliquez sur OK Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 30

32 Cliquez sur Enregistrer, votre application est prête à être déployée (elle n est pas sauvegardé dans vos contenus mais en local sur votre machine, ici : C:\arcgis-web-appbuilder-1.2\server\apps\(numéro auto de votre app) Si vous le souhaitez-vous pouvez ajouter d autres widgets et les tester. Sinon cliquez sur lancer, nous allons faire quelques éditions Votre application s ouvre. Pour faire une édition cliquez sur un des modèles d entités (Ils correspondent aux nombres maximum d Autolib par stations) Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 31

33 Allez dans la carte pour ajouter manuellement une station (sans trop de précision) en cliquant gauche sur les emplacements indiqués ci-dessous. Pensez à renseigner l adresse de la station. Fermez l onglet qui affiche votre application puis fermez l onglet qui affiche la configuration du Web AppBuilder Fermez ensuite la fenêtre DOS qui fait permet de lancer le Web AppBuilder Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 32

34 Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 33

35 Etape 3: Déployer un widget personnalisé sur le Web AppBuilder for Developer Avec le Web AppBuilder il est possible de déployer vos propres widgets ou des widgets qui auraient été développés par d autres utilisateurs. Pour déployer votre widget personnalisé, il suffit de mettre votre widget dans le répertoire d installation du web appbuilder developer edition ( ici : \ client \ stemapp \ widgets). Pour comprendre comment développer un widget dédié au Web AppBuilder n hésitez pas à vous aider de la ressource en ligne : Vous trouverez toutes les méthodes et les exemples pour bien développer avec le Web AppBuilder. Ouvrez un explorateur windows et naviguez jusqu à C:\Student\WebApp Copiez le dossier AddShapefile Naviguez jusqu à C:\arcgis-web-appbuilder-1.2\client\stemapp\widgets puis coller votre dossier AddShapefile dans le dossier widgets Fermez l explorateur Windows Relancez le raccourci arcgis-web-appbuilder-1.2 qui permet de relancer le Web AppBuilder developper edition Cliquez sur Créer Choisissez le modèle Default puis cliquez sur Suivant Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 34

36 Donnez un nom à votre application Dirigez-vous directement dans la partie Widget Ajoutez un widget Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 35

37 Dans la liste des widgets vous retrouvez votre widget Add Shapefile, sélectionnez-le puis OK Pour l instant aucune configuration n est possible avec ce widget, cliquez sur OK Enregistrez puis lancez votre application Dans le coin supérieur gauche vous devez visualiser votre nouveau widget, testez-le Cliquez sur Add File Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 36

38 Naviguez jusqu à C:\Student\WebApp et chargez le fichier IrisLyon.zip Le shapefile se charge et s affiche au bout de quelques secondes Ce widget étant récent il ne dispose pas encore de beaucoup de fonctionnalités, mais il ne tient qu à vous de partir sur cette première base pour étendre les fonctionnalités infinies du Web AppBuilder! Ce widget a été trouvé sur le site : Bravo et merci de votre attention! IGN 2011 ou 2012 BD Topo IGN OpenStreetMap (and) contributors, CC-BY-SA Copyright 2015 ESRI France SIG 2015 Itérations dans ModelBuilder 37