Individuelle Berner-Stadtspaziergänge

(04) Klicke dir deinen Spaziergang zusammen!

⛶  Fullscreen ↓  Download
Demo

Challenge

Challenge Slides

Was?

  1. User*in wählt ein oder mehrere Stationen aus verschiedenen POI-Kategorien aus.
  2. User*in wählt Mobiltitätsform(en), die für sie/ihn in Frage kommen (zu Fuss, Fahrrad, ÖV, Kombination).
  3. Die Anwendung schlägt ihr/ihm die geeignetste Route und Verkehrsmittel vor.
  4. 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?

Daten und Tools

Wikidata / OSM
Resources Project

Resources for Bern Spaziergänge project

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 be true or false. Sets some prod specific things and makes seeding impossible.
  • SEED_MONGO: Can be true or false. 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.

This content is a preview from an external site.
 

Event finish

Edited

1 year ago ~ alexis_strhl

Launch

Deployment-Versuch ist im Gange, Plan B mit Folien ist in Arbeit

1 year ago ~ carole_leuenberger

added seed (@mauriziopiu)

Unsere Seite verfügt nun auch über Bilder ;-)

1 year ago ~ carole_leuenberger

Launch

updated endpoint to support findById for poi data (@mauriziopiu)

added intermediary findById backend (@mauriziopiu)

Edited

1 year ago ~ marcel_b

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.

1 year ago ~ carole_leuenberger

Launch

Backend Call zu OSRM API mit Mapping zu Dto, welches im Frontend für die Darstellung auf der Karte verwendet werden kann.

1 year ago ~ alexis_strhl

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 :-)

1 year ago ~ carole_leuenberger

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.

1 year ago ~ maurizio_piu

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.

1 year ago ~ carole_leuenberger

Prototype

feat: make map markers work (@kerriestauffer)

map_protorype Visualisierung eines erstellten Stadtrundgangs im Frontend mit POI funktioniert mit Dummy Daten :)

1 year ago ~ kerrie_stauffer

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)

Start

 
Alle Teilnehmer*innen, Sponsor, Partner, Freiwilligen und Mitarbeiter*innen unseres Hackathons sind verpflichtet, dem Hack Code of Conduct zuzustimmen. Die Organisatoren werden diesen Kodex während der gesamten Veranstaltung durchsetzen. Wir erwarten die Zusammenarbeit aller Teilnehmer*innen, um eine sichere Umgebung für alle zu gewährleisten.

Tous les participant-es, sponsors, partenaires, bénévoles et collaborateur-es de notre hackathon sont tenus d'accepter le Hack Code of Conduct. Les organisateurs feront appliquer ce code tout au long de l'événement. Nous comptons sur la coopération de tous les participants* afin de garantir un environnement sûr pour tous. Pour plus de détails sur le déroulement de l'événement, veuillez consulter les directives sur notre wiki.

Creative Commons LicenceDie Inhalte dieser Website stehen, sofern nicht anders angegeben, unter einer Creative Commons Attribution 4.0 International. / Sauf indication contraire, le contenu de ce site est placé sous Creative Commons Attribution 4.0 International.