Kangouroute [ALPHA] -> https://kangouroute.netlify.app/
Project started as a hackathon challenge to answer the following problematic.
Diminuez le trafic aux abords des écoles en développant une application recensant les alternatives à la voiture et les spots de stationnement Ville de Liège
Key mobility players : schools (parents associations), the parents, the children and a mobility actor (Ville de Liège).
The architecture of the solution is inspired by the JAM stack.
The backend is supported by GraphCMS, a headlessCMS. The platform hosts the data and expose it as graphQL endpoint. Webhooks can be set up for content events (so you can integrate it with Zapier, Integromat ...).
The GraphQL endpoint : https://api-eu-central-1.graphcms.com/v2/ckknkbsnpcmfu01xo3k092xgw/master (try the playground ;))
The front is a angular static site that solely relies on data provided by the previous API. It is hosted on netlify. Bootstrap, FontAwesome and LeafletJS are used. Check https://kangouroute.netlify.app/
- https://www.odwb.be/explore/dataset/signaletique-fase : schools in Brussels-Wallonia (Belgium)
- we filtered it on 4000, 4020, 4030, 4031, 4032 postcodes for Liège
- https://opendata.liege.be/explore/dataset/creches-communales : council child cares in Liège
- https://opendata.liege.be/explore/dataset/shop-and-drive-real-time : real time shop and drive parking spots in Liège
- https://opendata.liege.be/explore/dataset/parkings-voitures-hors-voirie : off-street car parking in Liège not machine readable
- (hack into the page
$('#geojson').data('geojson').features.map(e=> [e.id,e.properties.title,"Parking",e.geometry.coordinates[0],e.geometry.coordinates[1]].join(",")).join("\n"))
- (hack into the page
- https://www.transportdata.be/fr/dataset/tec-gtfs : GTFS for TEC buses [and trams -> not in Liège right now but soon] (Wallonia),
- not used so far (we might look for something more basic for our needs)
- https://opendata.bruxelles.be/explore/dataset/gares-sncb : SNCB train stops (Belgium)
- https://opendata.liege.be/explore/dataset/arceaux-velos : Bicycle hoops in Liège
The datasets are imported dynamically through into a google spreadsheet (ImportData("the comma separated csv url") function), look at the _raw sheets. Then the data is filtered and aggregated (the Query function is pretty cool) in concept sheets (format close to the GraphQL concepts). Those concept sheets are published as csv. Each time you open the sheet, the data import is refreshed.
DataViz google spreadsheet [A bit of work and cleaning left TODO]
The csv published concept sheets :
[TODO add stops for train and bus]
kind of a hack
Postman collection runner was used to make a request based on a csv data (the concept sheets data) fed one row at the time to graphQL mutation request towards our graphCMS endpoint (token required). [TODO share this postman import collection]
[TODO schema of objects]
This project was generated with Angular CLI version 11.1.2.
After installing all dependencies with npm install, run ng serve for a dev server (may take a few minutes). Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
- Run
ng generate component component-nameto generate a new component. You can also useng generate directive|pipe|service|class|guard|interface|enum|module. - Run
ng buildto build the project. The build artifacts will be stored in thedist/directory. Use the--prodflag for a production build. - Run
ng testto execute the unit tests via Karma. [not used so far] - Run
ng e2eto execute the end-to-end tests via Protractor. [not used so far]
- Github
- Fork
- Zoom (communicating with Oz)
- IntelliJ
- Visual Studio Code
- Angular
- Postman
- GraphCMS
- Netlify
- Leafletjs package for angular
- Apollo-angular [for sending graphQl requests from angular-cli to graphCMS]
- Node GTFS explorer for TEC GTFS [not used in the end]