Edited
Individuelle Berner-Stadtspaziergänge
(04) Klicke dir deinen Spaziergang zusammen!
Challenge
Was?
- User*in wählt ein oder mehrere Stationen aus verschiedenen POI-Kategorien aus.
- User*in wählt Mobiltitätsform(en), die für sie/ihn in Frage kommen (zu Fuss, Fahrrad, ÖV, Kombination).
- Die Anwendung schlägt ihr/ihm die geeignetste Route und Verkehrsmittel vor.
- Die Route wird auf einer Karte dargestellt.
Darfs noch ein bisschen herausfordernder sein?
- Route in einem Navigationsmodus darstellen ("nach 40 m rechts abbiegen, dann..." + user-zentrierte Kartenansicht)
- Mobilitätsform Fahrrad resp. Kombination berücksichtigt Veloverleihsystem (PubliBike)
Warum?
Gängige Navigationsapps erfordern eine aufwändige Eingabe von Start, Ziel, gewünschten Zwischenstationen und Mobilitätsformen. Faktisch bestimmt oft der/die User*in die Route durch die Reihenfolge der Stationen. Die gesuchte Anwendung nimmt dem/der User*in diese Schritte ab und schlägt die optimale Route und Verkehrsmittel direkt vor.
Wer hat etwas davon?
Sämtliche Besucher*innen der Stadt, die ein oder mehrere Stationen in der Stadt besuchen möchten, den optimalen Weg/Verkehrsmittel jedoch nicht kennen.
Erwartung?
Funktionierender Prototyp einer entsprechenden Web-Anwendung, der Eingabe der gewünschten Stationen und Verkehrsmittel zulässt und anschliessend einen Routenvorschlag vornimmt und ggf. einen Navigationsmodus beinhaltet.
und/oder:
Generierung entsprechender Files (.gpx, .geojson, ...) zur Integration in weitere Applikationen.
Wie könnte es nach den Hackdays weitergehen?
- Gemeinsame Weiterentwicklung / Ausbau (Details tbd)
- Integration in Internet-Stadtplan der Stadt Bern (www.bern.ch/stadtplan)
- Integration in Bern Welcome App (https://www.bern.com/de/bw-app)
Daten und Tools
- POI (Points of Interest) Bern Welcome und Stadt Bern: https://map.bern.ch/download/Hackdays_SampleData.zip (.csv, .fgdb, .gpkg)
- Routing Service: bspw. Open Source Routing Machine (OSRM): http://project-osrm.org/
- Haltestellen ÖV (https://opentransportdata.swiss/de/
- PubliBike Standorte (https://opendata.swiss/de/dataset/standorte-und-verfugbarkeit-von-shared-mobility-angeboten)
- Mapservices Hintergrundkarten: bspw. https://opendata.swiss/de/organization/geoinformation-der-stadt-bern/?keywords\_de=stadtplan (WMS / WMTS)
- Neue POI: 📎 POIStadtBernBernWelcomeSampleEPSG4326.csv
indiv-berner-rundgaenge
To install all the dependencies, run the script:
./setup.sh
Architecture
Frontend
The frontend is an angular single page application.
It needs a build step for two reasons:
- To turn the angular code into a bundle that can be served by a web server
- To turn typescript code into pure javascript code that runs in the browser
To start it, do the following:
cd frontend
npm run start
Backend
The backend is a nest node application.
It needs a build step to transpile typescript into javascript.
To start it, do the following:
cd backend
npm run start:dev # will also start a mongo database in a docker container
Database
The database is a mongo database accessed by the backend.
Distribution
The provided dockerfile builds the frontend and backend and generates one image which will run both.
The following environment variables can be provided at runtime:
PRODUCTION
: Can betrue
orfalse
. Sets some prod specific things and makes seeding impossible.SEED_MONGO
: Can betrue
orfalse
. Whether to seed the mongo database.MONGO_URL
: A string, should be a mongodb connection uri.MONGO_DB
: A string, should be the name of the database to use.PORT
: A number, the port to use instead of the default 3000.API_PREFIX
: An optional prefix for the backend api. Defaults to/api
.
Deployment
The provided docker compose file is an example for how to deploy the application.
Event finish
Launch
Deployment-Versuch ist im Gange, Plan B mit Folien ist in Arbeit
added seed (@mauriziopiu)
Unsere Seite verfügt nun auch über Bilder ;-)
Launch
updated endpoint to support findById for poi data (@mauriziopiu)
added intermediary findById backend (@mauriziopiu)
Launch
add frontend logic retrieve single poi for infobox (@mauriziopiu)
added poi-infobox component (@mauriziopiu)
Der zweite Tag hat gestartet, wir sind alle motiviert und schon wieder voll in der Arbeit drin.
Launch
Backend Call zu OSRM API mit Mapping zu Dto, welches im Frontend für die Darstellung auf der Karte verwendet werden kann.
Merge pull request #4 from kerriestauffer/backend-endpoints-alexis
Backend endpoints alexis (@alstr-a)
Merge branch 'main' of https://github.com/kerriestauffer/indiv-berner-rundgaenge into backend-endpoints-alexis (@AlexisSt)
refactor trips endpoint (@AlexisSt)
Merge pull request #3 from kerriestauffer/backend-endpoints-alexis
Backend endpoints alexis (@alstr-a)
custom dto für antwort von osrm api (@AlexisSt)
Die Logik bekommt immer wie mehr Funktionalität und auch die Gestaltung verändert sich immer wieder. Bald gibt es Feierabend :-)
Prototype
Merge branch 'main' of https://github.com/kerriestauffer/indiv-berner-rundgaenge into backend-endpoints-alexis (@AlexisSt)
app module (@AlexisSt)
Die Homepage ist nahezu ready :) Die POIs werden vom Backend erhalten, dargestellt und können von Usern ausgewählt werden.
Prototype
merge (@mauriziopiu)
Merge branch 'main' into basic-frontend-structure (@mauriziopiu)
Merge branch 'main' of github.com:kerriestauffer/indiv-berner-rundgaenge into main (@kerriestauffer)
feat: add POI list for map view (@kerriestauffer)
minor style update (@mauriziopiu)
added walk request button (@mauriziopiu)
Merge pull request #2 from kerriestauffer/backend-endpoints-alexis
Backend endpoints alexis (@dominiwe)
Merge branch 'main' of https://github.com/kerriestauffer/indiv-berner-rundgaenge into backend-endpoints-alexis (@AlexisSt)
minor style update (@mauriziopiu)
Call auf OSRM API (@AlexisSt)
added selection feedback to cards (@mauriziopiu)
change map size (@dominiwe)
display chosen POIs (@mauriziopiu)
added expansion panels for categorized data (@mauriziopiu)
Aktueller Stand der Hauptansicht.
Prototype
feat: make map markers work (@kerriestauffer)
Visualisierung eines erstellten Stadtrundgangs im Frontend mit POI funktioniert mit Dummy Daten :)
Prototype
minor style update (@mauriziopiu)
added categorized data to interface (@mauriziopiu)
added categorized data (@mauriziopiu)
updated grid styling (@mauriziopiu)
Merge branch 'basic-frontend-structure' of github.com:kerriestauffer/indiv-berner-rundgaenge into basic-frontend-structure (@mauriziopiu)
feat: display dummy route on map (@kerriestauffer)
Merge branch 'main' of github.com:kerriestauffer/indiv-berner-rundgaenge into main (@kerriestauffer)
deleted unused list (@mauriziopiu)
basic style update (@mauriziopiu)