Construire une application Web vec Web AppBuilder for

Transcription

Salle de classe SIG 2015 :
Construire une application Web vec
Web AppBuilder for ArcGIS
WebAppBuilder
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
Copyright © 2015 – ESRI France – SIG 2015 Itérations dans ModelBuilder
2
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.
3
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 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.
4
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
5
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
6
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
7
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.
8
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.
9
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
10
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
11
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.
12
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).
13
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)
14
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.
15
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
16
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) :
17
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.
18
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 !
19
WebAppBuilder
Listes des couches :
Analyse (Extraction de données) :
20
WebAppBuilder
Itinéraires :
Sur notre itinéraire nous risquons de croiser 1 zone de danger (dans le sens VersaillesMeudon) !
21
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
22
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)
23
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.
24
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
25
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 :
26
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-appbuilder1.2 qui permet de lancer le Web AppBuilder en version développeur.
Lancez le Web AppBuilder pour developper, une page Web s’ouvre
automatiquement
27
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
28
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 :
29
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
30
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)
31
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
32
WebAppBuilder
33
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
34
WebAppBuilder
Donnez un nom à votre application
Dirigez-vous directement dans la partie Widget
Ajoutez un widget
35
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
36
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
37

Construire une application Web vec Web AppBuilder for

Transcription

Similar documents

Dossier de compÃ©tences

mode d`emploi - Trust Bank Algeria

Septembre 2011 - Club informatique Mont

Régler les problèmes de son (Seven/XP)

Voir les publicités

htc titan

Guide de référence de Kcast (Beta) pour les utilisateurs de

Section 3: Data Model Considerations

delta-gesfor 2.0

Samsung Galaxy SIII mini

CLA-VAL - CleanTuesday

Guide de référence rapide

Téléphone mobile GSM / GPRS bi-bande

Notice d`Utilisation

NOTICE DE EOBD-Facile Pour Android

MapCreate 6.3 Owner`s Manual - French

Utiliser l`affichage dynamique Neotess

SDL Trados Studio 2011 Traduction et relecture de documents

Table des matières - CATIADOC - La documentation et le manuel de

SolidWorks Simulation Student Guide.book

Assistant de configuration sans fil - D-Link

RapidWeaver Manuel PDF - X