Aller au contenu

Exercices Node + Express + Mongo

Exercice - Node + Express + Mongo#

Le but de cet exercice est de créer une visualisation basique des restaurants de New-York.

  • Créez une application express à l’aide du générateur d’application Express
  • Créez un conteneur Docker pour cette base Docker mongoDB. Il faudra penser à exposer le port 27017 de ce conteneur pour que votre application node puisse y accéder.

docker run -d --name mongotsi -p 27017:27017 mongo

  • Installez le module mongodb pour Node : npm install mongodb --save

Première étape, la base de données :

  • Voici les données sources : restaurants.json

  • Copiez le fichier source dans le conteneur : docker cp restaurants.json mongotsi:/

  • Insérez les données : docker exec -ti mongotsi mongoimport --db test --collection restaurants --drop --file /restaurants.json

Pour pouvoir faire des requêtes spatiales, n'oubliez pas de créer un index spatial sur l'attribut location:

  • Connectez-vous à Mongo Shell: docker exec -ti mongotsi mongosh
  • Executez db.restaurants.createIndex({ location: '2dsphere' })

Seconde étape, création du serveur

  • Créez une route express nommée data
  • Connectez-vous à votre base de données Mongodb, (voir comment se connecter, puis comment chercher dans une collection), et retournez l’intégralité du résultat en JSON
  • Testez l’URL de votre service depuis votre navigateur (attention, le fichier est volumineux)
  • Pour limiter nos données, ajoutez à votre route un paramètre :bbox qui sera une chaine de caractères avec les latitudes/longitudes séparées par des virgules du rectangle de sélection respectant ce format : southwest_lng,southwest_lat,northeast_lng,northeast_lat
  • Traitez cette chaine puis modifiez votre requête pour sélectionner uniquement les restaurants inclus dans cette bbox. Voir https://docs.mongodb.com/manual/tutorial/geospatial-tutorial/index.html. Attention au type (String vs. Number) dans les spécifications du $box .

Ensuite, coté client (avec ou sans Vue)

  • Créez une nouvelle carte Leaflet, centrée sur New-York (lat/lng 40.7/-73.9, zoom 16) dans la vue index.pug. Pug)
  • Au chargement, récupérez la bbox actuelle de votre carte en chaine de caractères (bounds.toBBoxString())
  • Faites une requête vers /data/<bbox> et affichez les restaurants visibles (markers) (attention à l'ordre des coordonnées)

Enfin

  • Lorsque l’on déplace la carte, on charge les restaurants de la nouvelle bbox, mais
    • On n’affiche que les restaurants qui ne sont pas déjà présents (pour éviter les doublons)
    • On enlève les restaurants qui ne sont plus visibles dans la bbox actuelle
    • Pensez aux nouveautées ES6

Ressource supplémentaire : http://duspviz.mit.edu/web-map-workshop/leaflet_nodejs_postgis/