Intro
This repository holds the main server side module the web and mobile clients interact with, it also hold the web and mobile related code.
Architecture Diagram
Technology stack
The technology stack of this site is based on the following frameworks:
- Typescript - for sanity
- Angular and Angular-Material - for UI framework and components
- MapLibre using ngx-maplibre-gl - for map presentation and interaction
- Jasmine and Karma - for unit testing.
- Asp.Net core - for server side
- NSubstitute - for mocking server side tests
- GraphHopper - for routing between points
- Elastic Search and NEST - for database and search capabilities
- Net Topology Suite - for server side spatial mathmatics
- Turf - for client side spatial mathematics
- OsmSharp - for OSM capabilities
- Wikipedia using Wiki client library - for Wikipedia data and upload images to Wikimedia common
- Imgur - for uploading anonymous images
- Cordova - for wrapping the site as a mobile application and add some native capabilities
- Redux and angular-redux2 - for state management in the client
- Dexie - for client side storage
- Docker - for image creation and micro-server architecture
- D3 and ngx-d3 - for advanced client side chart capablilities
- Lottie and ngx-lottie - for image animations
Architecture and folder stucture of UI
The architecture is based heavily on Angular:
- application - where all the application code is, topmost folder.
- components - this layer handles the UI calls and bindings along with the relevant css and html files.
- directives - folder for all the directives.
- models - used to store data types that are common to the entire app.
- reducers - used for redux reducers, actions and payloads.
- services - this layer holds the lower level data handling.
- layers - where the layers logic is - POI, route, wiki, nakeb, relevant services, etc...
- content - used for images and static content.
- environments - used for angular-cli to define production and dev variables.
- fonts - icomoon generated font for icons instead of images.
- scss - used for global style files
- translations - all relevant data related to i18n.
Architecture of Server
The architecture is based on layers:
- Contollers - the topmost layer to catch all the requests
- Services - responsible for orchestrating executors
- Converters - converters logic between types of geo structures
- Executers - basic logical building blocks
- DataAccessInterfaces - a slim layer to decouple business logic from data access
- DataAccess - database, file system and network request are processed in this layer
- Common - Mainly for POCOs
Setting Up the Project for site Development (To setup iOS and Android follow the cordova guide)
In order to be able to build this site you'll need some tools:
- Install Docker
- Install .Net core SDK 5.0
- Install node.js (16.13+).
- Run from command line
dotnet restore
and after thatdotnet build
- Go to
IsraelHiking.Web
and run from command line:npm install
to install all npm packages for the client side codenpm run build
to generate the Angular UI client. It should createwwwroot
folder on a successful run
- Run
docker compose up graphhopper
- it should fail for the first time - Run
gh-update.ps1
(set chmod +x if needed) to generate the graphhopper routing data - Run
docker compose up
to load the rest of the sercives - Run
dotnet run --project IsraelHiking.Web
- If you want to update the translations or upload images from your debug environment, you'll need to add the following secrets to
IsraelHiking.Web
. Otherwise, skip this step.
In thesecrets.json
at the end there should be these fields.{ "wikiMediaUserName": "your wikimedia user", "wikiMediaPassword": "your wikimedia password" "zanataUserName": "your zanata user", "zanataApiKey": "your zanata api key", "imgurClientId": "your imgur client ID" }