israelhikingmap/website repository overview

⁠Intro

This repository holds all the files that the site needs in order to run.

⁠Contents

• Technology stack⁠
• Architecture and folder stucture of UI⁠
• Architecture of Server⁠
• Setting Up the Project for Development⁠
• Starting a debug session⁠
• Setup the server⁠

⁠Technology stack

The technology stack of this site is base on the following frameworks:

• Typescript⁠
• Angular⁠
• Angular-Material⁠
• Mapbox-gl-js⁠
• ngx-mapbox-gl⁠
• Jasmine⁠ + Karma⁠ - for unit testing.
• Asp.Net core⁠
• NSubstitute⁠
• GraphHopper⁠
• Elastic Search and NEST⁠
• Net Topology Suite⁠
• OsmSharp⁠
• Wikipedia using Wiki client library⁠ Wikipedia and upload images to Wikimedia common
• Imgur⁠ - Used for uploadling anonymous images
• Cordova⁠ - Used to wrap the site as a mobile application and add some native capabilities
• Redux using angular-redux⁠
• Dexie⁠ - Used for client side storage
• Docker⁠

⁠Architecture and folder stucture of UI

The architecture is based heavily on Angular:

• application - where all the 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 hold 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 orchastrating 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⁠ (14.17+).
• Run from command line dotnet restore and after that dotnet build
• Go to IsraelHiking.Web and run from command line:
  • npm install to install all npm packages for the client side code
  • npm run build to generate the Angular UI client. It should create wwwroot 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 --launch_profile 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 the secrets.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 clinet ID"
  }
  

  Copy

⁠Starting a debug session

See the relevant page in our wiki⁠