salle de classe sig 2015 : construire une application web ... · pdf filesalle de classe sig...

Salle de classe SIG 2015 :

Construire une application Web vec Web AppBuilder for ArcGIS

WebAppBuilder

Copyright © 2015 – ESRI France – SIG 2015 Itérations dans ModelBuilder 2

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

Etape 3: Déployer un widget personnalisé sur le Web AppBuilder for Developer ........................... 34

WebAppBuilder


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.

WebAppBuilder


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

https://www.arcgis.com/home/signin.html (tapez ArcGIS Online dans

Google ce sont les premiers liens proposés)

Sur la page d’authentification inscrivez le login mot de passe comme ci-

dessous (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.

https://www.arcgis.com/home/signin.html

WebAppBuilder


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

WebAppBuilder


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

WebAppBuilder


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

WebAppBuilder


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.

WebAppBuilder


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.

WebAppBuilder


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

WebAppBuilder


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

WebAppBuilder


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.

WebAppBuilder


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

WebAppBuilder


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 2 000 000ème environ lorsque

vous dé-zoomez (petite échelle)

WebAppBuilder


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

WebAppBuilder


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

WebAppBuilder


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

WebAppBuilder


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.

WebAppBuilder


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 !

WebAppBuilder


Listes des couches :

Analyse (Extraction de données) :

WebAppBuilder


Itinéraires :

Sur notre itinéraire nous risquons de croiser 1 zone de danger (dans le sens Versailles-

Meudon) !

WebAppBuilder


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

WebAppBuilder


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

WebAppBuilder


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.

WebAppBuilder


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

WebAppBuilder


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 :

WebAppBuilder


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

WebAppBuilder


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

WebAppBuilder


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 :

WebAppBuilder


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

WebAppBuilder


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)

WebAppBuilder


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

WebAppBuilder


WebAppBuilder


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 : https://developers.arcgis.com/web-appbuilder/

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

https://developers.arcgis.com/web-appbuilder/

WebAppBuilder


Donnez un nom à votre application

Dirigez-vous directement dans la partie Widget

Ajoutez un widget

WebAppBuilder


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

WebAppBuilder


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 :

https://geonet.esri.com/groups/web-app-builder-custom-widgets

Bravo et merci de votre attention !

©IGN – 2011 ou 2012 BD Topo® IGN

© OpenStreetMap (and) contributors, CC-BY-SA

https://geonet.esri.com/groups/web-app-builder-custom-widgets

salle de classe sig 2015 : construire une application web ... · pdf filesalle de classe sig...

Documents