SlideShare ist ein Scribd-Unternehmen logo
1 von 18
IGO2 : 1er
atelier technique
de
développement
17 mai 2017
2
CITYN
Plan
●Qu’est-ce qu’IGO2 et pourquoi ?
●Décision de l’automne 2016 lors de l’atelier dev
●Projet de sécurité civile hiver 2017
●Nouveaux services et API
●Architecture, technologies et logiciels
●Angular, Angular-CLI et Angular Material
●Librairie versus Application
●Requis pour l’installation et développement
●Liens utiles
●Questions et commentaires
●Exercices de codage pour développeurs
3
Pourquoi IGO2 et besoins ?
●IGO1 : ne supporte pas le mobile et tablette : difficulté d’interaction
●IGO1 : technologies datant de 2010 (G.O.LOC, OpenLayers 2 et GeoExt 1.0)
●IGO1 : erreurs limitant le développement et devant être corrigées (langue, lourdeur
avec PHalcon, licence multiple $$ : ExtJS, procédure d’installation complexe: WAMP)
●IGO1 : sous-utilisé au MSP à cause de la complexité de certains outils et d’accéder
facilement à une information dans des contextes précis.
●Nouveaux besoins : simplification de l’interface, adapté au mobile, 3D, meilleure
efficacité avec vecteurs, nouvelles sources de données : CARTO, MapBox, Vector
Tile. etc.
●Aucune solution aussi intégrée sur le marché et pouvant répondre aux besoins
rapidement d’IGO1 et les nouveaux.
4
Retour sur l’atelier dev -
automne 2016
●Atelier IGO2 en novembre 2016 (tous les MO présents) :
 Décision : Migrer vers la nouvelle version d’OpenLayers 3 (maintenant 4)
 Décision : Tirer profit de l’expertise acquise au MSP avec Angular2 (4)
 Décision : internationalisation du code
 Laisser tomber des logiciels comme PHalcon et ExtJS
 Faciliter la documentation (Readthedocs)
 Simplifier l’installation
 Meilleure procédure de test et d’assurance qualité
 Décision : reprendre les éléments à succès d’IGO1 dans IGO2
 Décision : créer IGO2 à partir du besoin minimal de la sécurité civile (2017).
5
Projet IGO2 en sécurité civile (avril 2017)
●Projet sur les années fiscales 2016/2017 - 2017/2018
●Un des livrables est donc un navigateur carto autant mobile et poste de travail
●Simplifier la recherche d’information et d’opérations
●Livraison 1 : Mai 2017 (https://overv.io/infra-geo-ouverte/igo2/)
 Librairie fournissant ces fonctionnalités :
■ Afficher des couches WMS et à la volée (recherche par nom)
■ Obtenir de l’information (getInfo)
■ Se localiser sur le territoire (adresse, lieu) ou position
■ Sauvegarder un contexte de carte et le partager au besoin
■ Analyse temporelle WMS-Time
■ Impression PDF
■ Intégrer la carte dans une autre application (CMS, Débit niveau)
 Assembler ces fonctionnalités dans un navigateur léger et moderne (visuel,
outil)
6
Scénarios de maquette
Prémices des scénarios
 Minimiser les outils présents sur la carte
 Minimiser l’utilisation de l'arborescence de couches
 Maximiser les outils de recherche et service/API de données
(couches, localisation, API, JSON)
 Maximiser l’utilisation de contexte de cartes
 Reprendre le meilleur de Google Maps, navigateur du fédéral avec
ArcGIS et GeoAdmin des Suisses.
7
Services API
1.API / Service de recherche de couches : ElasticSearch à partir du
WMS GetCapabilities et contenu dans un catalogue (ex. CKAN)
a.Éventuellement, la recherche sera lié à l’API de contexte et aura une façade de
sécurité
b.Peut être centralisé et hébergé au MSP (au besoin)
c.Peut s’installer localement (NodeJS et ElasticSearch)
2.API / Service de gestion de contexte (NodeJS, doc : Swagger) : ajout,
modification, consultation, liste de couches d’un contexte, type de
couches, outils et type d’outils
a.Peut être centralisé et hébergé au MSP (au besoin)
b.Peut s’installer localement (Sequelize : SQLite ou PG ou à venir : Oracle) :
https://github.com/infra-geo-ouverte/igo2-api
c.Pas nécessaire si vous voulez utiliser les contextes fichiers JSON
3.Ces deux services API pourront s’intégrer dans d’autres applications
qu’IGO2.
8
Suivi des travaux
 Installation possible par l'entremise de conteneur Docker (multi-OS :
Linux, Windows, Mac) : https://infra-geo-ouverte.github.io/igo2/#docker
 Sources compilées disponibles pour installation rapide :
https://github.com/infra-geo-ouverte/igo2/releases
 Outil de test intégré avec Travis-CI : https://travis-ci.org/infra-geo-
ouverte/igo2
 Service de documentation supportés par Readthedocs en format
RestructuredText (.rst) : http://igo2.readthedocs.io/fr/latest/
9
Architecture, technologies
et logiciels (cas du MSP)
10
Angular, Angular-CLI et
Angular Material
Angular
 Framework de développement créé par Google
 Utilisation de TypeScript (développé par Microsoft) qui se compile en
JavaScript
Angular-CLI
 Intégration d’outils de tests, de compilation et de développement
Angular Material
 Librairie de composantes de base robustes
 Basé sur la spec “Material Design” https://material.io/guidelines/
11
Architecture d'un module
Angular
Module A
Component 1
Component 2
12
Schéma d’IgoFeatureModule
13
Librairie versus Application
 Segmentation en deux dépôts en cours de route : Librairie (lib) et
Application (assemblage)
 Pourquoi ?
 Permettre une configuration plus personnalisée par les
organisations
 Permettre d’intégrer certaines composantes et outils à leur guise
 Permettre le développement de la librairie indépendamment de
l’assemblage
 Permettre à plus de contributeurs externes de contribuer
 Permettre l’utilisation de la librairie dans un autre projet qu’IGO2
14
Requis pour l’installation et
développement
● Développement (local)
 NodeJS
 NPM
 Git
 Optionnel: Augury dans Chrome
 IGO2 (Librairie ou Application)
● Production
 Comme en mode développement avec possibilité de faire son
propre build;
Ou utiliser les sources compilées disponibles https://github.com/infra-
geo-ouverte/igo2/releases
15
Liens utiles
●Librairie IGO2
○https://github.com/infra-geo-ouverte/igo2-lib
●Application IGO2
○https://github.com/infra-geo-ouverte/igo2
●Liste igo-dev@
○Utiliser la liste igo-dev@ en spécifiant la version IGO2
●Tutoriel Angular
○https://angular.io/docs/ts/latest/tutorial/
●Guide de développement Rangle
○https://angular-2-training-book.rangle.io/
●Formation Académie Angular
○http://www.academieangular.ca/ (venu à Qc en avril 2017)
○http://www.technologia.com/fr/technologies-de-linformation/developpement-
web/concepts-de-base-et-avances-web/angular-2/
16
À venir (mai 2017)
1.Livraison 1 d’un navigateur IGO2 de base pour la production : juin 2017
1.Suite des développements (à discuter):
a.Amélioration des fonctions existantes (ex.: analyse temporelle) et correction de
bugs potentiels
b.Amélioration de la documentation
c.Meilleur support de IGO2 en mode “embedded”
d.Analyse spatiale simple
e.Édition simple en ligne
f.Itinéraire (OSRM)
g.Sécurité+proxy, amélioré le service de contexte, 3D (Cesium), ajout de SHP-KML
(ogrweb), application hybride (cordova)
h.Autres ateliers techniques avec IGO2 ?
17
Commentaires/questions ?
18
Exercices pour développeurs
1.Valider l’installation
1.Import d’un module
1.Ajout d’une table de résultats
1.Questions

Weitere ähnliche Inhalte

Ähnlich wie 1er atelier technique - IGO2 - 17 mai 2017

Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdf
boulonvert
 
Mobilité, géomatique et HTML5 : une lune de miel à trois?
Mobilité, géomatique et HTML5 : une lune de miel à trois?Mobilité, géomatique et HTML5 : une lune de miel à trois?
Mobilité, géomatique et HTML5 : une lune de miel à trois?
ACSG - Section Montréal
 

Ähnlich wie 1er atelier technique - IGO2 - 17 mai 2017 (20)

Lost in serverless AWS Lambda, Google Cloud Function, Azure Function quelle s...
Lost in serverless AWS Lambda, Google Cloud Function, Azure Function quelle s...Lost in serverless AWS Lambda, Google Cloud Function, Azure Function quelle s...
Lost in serverless AWS Lambda, Google Cloud Function, Azure Function quelle s...
 
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
 
De l'Open Source à l'Open API (in French)
De l'Open Source à l'Open API (in French)De l'Open Source à l'Open API (in French)
De l'Open Source à l'Open API (in French)
 
Saas Libre
Saas LibreSaas Libre
Saas Libre
 
Catalogue PFE 2019
Catalogue PFE 2019Catalogue PFE 2019
Catalogue PFE 2019
 
12-Factor
12-Factor12-Factor
12-Factor
 
Intro Android
Intro AndroidIntro Android
Intro Android
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
 
Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdf
 
Paris Container Day 2016 : Cloudunit v2 (Treeptik)
Paris Container Day 2016 : Cloudunit v2 (Treeptik)Paris Container Day 2016 : Cloudunit v2 (Treeptik)
Paris Container Day 2016 : Cloudunit v2 (Treeptik)
 
20171122 01 - REX : Intégration et déploiement continu chez Engie
20171122 01 - REX : Intégration et déploiement continu chez Engie20171122 01 - REX : Intégration et déploiement continu chez Engie
20171122 01 - REX : Intégration et déploiement continu chez Engie
 
Introduction webextensions
Introduction webextensionsIntroduction webextensions
Introduction webextensions
 
Mobilité, géomatique et HTML5 : une lune de miel à trois?
Mobilité, géomatique et HTML5 : une lune de miel à trois?Mobilité, géomatique et HTML5 : une lune de miel à trois?
Mobilité, géomatique et HTML5 : une lune de miel à trois?
 
Titanium, write in java script, run native everywhere
Titanium, write in java script, run native everywhereTitanium, write in java script, run native everywhere
Titanium, write in java script, run native everywhere
 
8 Rex : Mise en place de DevOps sur Azure
8   Rex : Mise en place de DevOps sur Azure8   Rex : Mise en place de DevOps sur Azure
8 Rex : Mise en place de DevOps sur Azure
 
GDG Rennes - Bootcamp Initiation Android - Théorie
GDG Rennes - Bootcamp Initiation Android -  ThéorieGDG Rennes - Bootcamp Initiation Android -  Théorie
GDG Rennes - Bootcamp Initiation Android - Théorie
 
Python et son intégration avec Odoo
Python et son intégration avec OdooPython et son intégration avec Odoo
Python et son intégration avec Odoo
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 

1er atelier technique - IGO2 - 17 mai 2017

  • 1. IGO2 : 1er atelier technique de développement 17 mai 2017
  • 2. 2 CITYN Plan ●Qu’est-ce qu’IGO2 et pourquoi ? ●Décision de l’automne 2016 lors de l’atelier dev ●Projet de sécurité civile hiver 2017 ●Nouveaux services et API ●Architecture, technologies et logiciels ●Angular, Angular-CLI et Angular Material ●Librairie versus Application ●Requis pour l’installation et développement ●Liens utiles ●Questions et commentaires ●Exercices de codage pour développeurs
  • 3. 3 Pourquoi IGO2 et besoins ? ●IGO1 : ne supporte pas le mobile et tablette : difficulté d’interaction ●IGO1 : technologies datant de 2010 (G.O.LOC, OpenLayers 2 et GeoExt 1.0) ●IGO1 : erreurs limitant le développement et devant être corrigées (langue, lourdeur avec PHalcon, licence multiple $$ : ExtJS, procédure d’installation complexe: WAMP) ●IGO1 : sous-utilisé au MSP à cause de la complexité de certains outils et d’accéder facilement à une information dans des contextes précis. ●Nouveaux besoins : simplification de l’interface, adapté au mobile, 3D, meilleure efficacité avec vecteurs, nouvelles sources de données : CARTO, MapBox, Vector Tile. etc. ●Aucune solution aussi intégrée sur le marché et pouvant répondre aux besoins rapidement d’IGO1 et les nouveaux.
  • 4. 4 Retour sur l’atelier dev - automne 2016 ●Atelier IGO2 en novembre 2016 (tous les MO présents) :  Décision : Migrer vers la nouvelle version d’OpenLayers 3 (maintenant 4)  Décision : Tirer profit de l’expertise acquise au MSP avec Angular2 (4)  Décision : internationalisation du code  Laisser tomber des logiciels comme PHalcon et ExtJS  Faciliter la documentation (Readthedocs)  Simplifier l’installation  Meilleure procédure de test et d’assurance qualité  Décision : reprendre les éléments à succès d’IGO1 dans IGO2  Décision : créer IGO2 à partir du besoin minimal de la sécurité civile (2017).
  • 5. 5 Projet IGO2 en sécurité civile (avril 2017) ●Projet sur les années fiscales 2016/2017 - 2017/2018 ●Un des livrables est donc un navigateur carto autant mobile et poste de travail ●Simplifier la recherche d’information et d’opérations ●Livraison 1 : Mai 2017 (https://overv.io/infra-geo-ouverte/igo2/)  Librairie fournissant ces fonctionnalités : ■ Afficher des couches WMS et à la volée (recherche par nom) ■ Obtenir de l’information (getInfo) ■ Se localiser sur le territoire (adresse, lieu) ou position ■ Sauvegarder un contexte de carte et le partager au besoin ■ Analyse temporelle WMS-Time ■ Impression PDF ■ Intégrer la carte dans une autre application (CMS, Débit niveau)  Assembler ces fonctionnalités dans un navigateur léger et moderne (visuel, outil)
  • 6. 6 Scénarios de maquette Prémices des scénarios  Minimiser les outils présents sur la carte  Minimiser l’utilisation de l'arborescence de couches  Maximiser les outils de recherche et service/API de données (couches, localisation, API, JSON)  Maximiser l’utilisation de contexte de cartes  Reprendre le meilleur de Google Maps, navigateur du fédéral avec ArcGIS et GeoAdmin des Suisses.
  • 7. 7 Services API 1.API / Service de recherche de couches : ElasticSearch à partir du WMS GetCapabilities et contenu dans un catalogue (ex. CKAN) a.Éventuellement, la recherche sera lié à l’API de contexte et aura une façade de sécurité b.Peut être centralisé et hébergé au MSP (au besoin) c.Peut s’installer localement (NodeJS et ElasticSearch) 2.API / Service de gestion de contexte (NodeJS, doc : Swagger) : ajout, modification, consultation, liste de couches d’un contexte, type de couches, outils et type d’outils a.Peut être centralisé et hébergé au MSP (au besoin) b.Peut s’installer localement (Sequelize : SQLite ou PG ou à venir : Oracle) : https://github.com/infra-geo-ouverte/igo2-api c.Pas nécessaire si vous voulez utiliser les contextes fichiers JSON 3.Ces deux services API pourront s’intégrer dans d’autres applications qu’IGO2.
  • 8. 8 Suivi des travaux  Installation possible par l'entremise de conteneur Docker (multi-OS : Linux, Windows, Mac) : https://infra-geo-ouverte.github.io/igo2/#docker  Sources compilées disponibles pour installation rapide : https://github.com/infra-geo-ouverte/igo2/releases  Outil de test intégré avec Travis-CI : https://travis-ci.org/infra-geo- ouverte/igo2  Service de documentation supportés par Readthedocs en format RestructuredText (.rst) : http://igo2.readthedocs.io/fr/latest/
  • 10. 10 Angular, Angular-CLI et Angular Material Angular  Framework de développement créé par Google  Utilisation de TypeScript (développé par Microsoft) qui se compile en JavaScript Angular-CLI  Intégration d’outils de tests, de compilation et de développement Angular Material  Librairie de composantes de base robustes  Basé sur la spec “Material Design” https://material.io/guidelines/
  • 11. 11 Architecture d'un module Angular Module A Component 1 Component 2
  • 13. 13 Librairie versus Application  Segmentation en deux dépôts en cours de route : Librairie (lib) et Application (assemblage)  Pourquoi ?  Permettre une configuration plus personnalisée par les organisations  Permettre d’intégrer certaines composantes et outils à leur guise  Permettre le développement de la librairie indépendamment de l’assemblage  Permettre à plus de contributeurs externes de contribuer  Permettre l’utilisation de la librairie dans un autre projet qu’IGO2
  • 14. 14 Requis pour l’installation et développement ● Développement (local)  NodeJS  NPM  Git  Optionnel: Augury dans Chrome  IGO2 (Librairie ou Application) ● Production  Comme en mode développement avec possibilité de faire son propre build; Ou utiliser les sources compilées disponibles https://github.com/infra- geo-ouverte/igo2/releases
  • 15. 15 Liens utiles ●Librairie IGO2 ○https://github.com/infra-geo-ouverte/igo2-lib ●Application IGO2 ○https://github.com/infra-geo-ouverte/igo2 ●Liste igo-dev@ ○Utiliser la liste igo-dev@ en spécifiant la version IGO2 ●Tutoriel Angular ○https://angular.io/docs/ts/latest/tutorial/ ●Guide de développement Rangle ○https://angular-2-training-book.rangle.io/ ●Formation Académie Angular ○http://www.academieangular.ca/ (venu à Qc en avril 2017) ○http://www.technologia.com/fr/technologies-de-linformation/developpement- web/concepts-de-base-et-avances-web/angular-2/
  • 16. 16 À venir (mai 2017) 1.Livraison 1 d’un navigateur IGO2 de base pour la production : juin 2017 1.Suite des développements (à discuter): a.Amélioration des fonctions existantes (ex.: analyse temporelle) et correction de bugs potentiels b.Amélioration de la documentation c.Meilleur support de IGO2 en mode “embedded” d.Analyse spatiale simple e.Édition simple en ligne f.Itinéraire (OSRM) g.Sécurité+proxy, amélioré le service de contexte, 3D (Cesium), ajout de SHP-KML (ogrweb), application hybride (cordova) h.Autres ateliers techniques avec IGO2 ?
  • 18. 18 Exercices pour développeurs 1.Valider l’installation 1.Import d’un module 1.Ajout d’une table de résultats 1.Questions

Hinweis der Redaktion

  1. 3
  2. 4
  3. 5
  4. 6
  5. 7
  6. 8
  7. 9
  8. 10
  9. 11
  10. 12
  11. 13
  12. 14
  13. 15
  14. 16
  15. 17
  16. 18