Tazaf / heig-mdt-gio1

Master Développement Territorial | Géoinformatique opérationnelle : Développement avancé d’outils (GIO1)

• Prerequisite
• Evaluation
• Plan
• Documentation
• Additional Subjects

The goal of this course is to discover concepts and tools to organize the front-end side of a web application and enrich the user interface/experience according to current good practices.

You will:

• learn the basics concepts of code architecture for front-end application
• use modern web development tools (git, VS Code, ...)
• develop a web application using a JavaScript framework (VueJS)
• integrate third-party cartographical libraries (leaflet, openlayers, cesium,...)

This course uses subjects from or based on COMEM+ architecture & deployment, web-oriented architecture and mobile development courses taught to students of Media Engineering at HEIG-VD, as well as advanced frontend development course taught to students of MAS-RAD CAS-DAR at HE-ARC.

Prerequisite

Knowledge:

• Basics of HTML, CSS and JavaScript
• Basics of Object Oriented Programming OOP
• Utilization of geodata
• Use of command line

Tools:

• Latest LTS version of NodeJS (14.X.X)
• Latest version of Git (2.33.X)
• Latest version of VS Code (1.60.X)

Evaluation

Project requirements - Developing a small geo-portal web application:

• Developed with VueJS framework
• Add internal navigation with vue-router
• Integrate and use one UI Componants library
• A (home)page with geocoding feature ; the use should be able to display the results in 2D or 3D, and your app should use the GeoAdmin Search REST API
• A page displaying geographical data in 2D (using either leaflet or openlayers)
• A page displaying geographical data in 3D (using cesium)
• A static page that describe the project, the tool and the team behind it (yourselves)
• Project must be version controlled with Git and stored on GitHub

Plan

• Introduction

• Code Architecture & Design Patterns

  • Code and architectural principles

  • Modular JavaScript

  • Node Package Manager (npm)

  • Additional resources (a.k.a. "You Should Read That"):

    • Writing Good Functions (article)
    • Design Patterns (article)

• Git

  • Git Introduction
  • Git Branching
  • Collaborating with Git

• Advanced JavaScript

  • JavaScript ES6 Classes
  • Basic Promises

• Practice

• Understanding Web Frameworks

• Web Framework Hands-On

  • Starting with vueJS
  • Geographical Libraries
  • Vuejs External Libraries
  • RESTful APIs

• Vue JS Project Seed

Documentation

• VueJS Introduction
• Leaflet
• OpenLayers
• Cesium

Additional Subjects

• JavaScript CheatSheet
• JavaScript Closures
• JavaScript Prototypes
• Advanced Promises

2022 - Jens Ingensand, Mathias Oberson & (Thibaud Chassin)