IoTitude 2023

• We are a virtual company operating under WIMMA Lab of Jyväskylä University of Applied Sciences.
• Tukko Core - Documentation

WIMMA Lab

• WIMMA Lab is a learning environment where students solve assignments in multidisciplinary project teams.
• Read more at wimmalab.org
• Is a part of Jyväskylä University of Applied Sciences jamk.fi

Team Members

Name	Description	Company / entity Task Responsibilities	LinkedIn
Reima Parviainen	Team Leader	IoTitude / Lead the project and handle test planning	LinkedIn
Justus Hänninen	Junior Developer	IoTitude / Backend, TypeScript, SKILL-db API	LinkedIn
Hai Nguyen	Junior Developer	IoTitude / Backend, API, Data visualization, Gitlab Pipeline	LinkedIn
Ilia Chichkanov	Junior Developer	IoTitude / Backend, SKILL-db API	LinkedIn
Olli Kainu	Junior Developer	IoTitude / Frontend	LinkedIn
Otto Nordling	Junior Developer / Tester	IoTitude / Testing	LinkedIn
Alan Ousi	Junior Developer / Tester	IoTitude / Testing	LinkedIn

Tukko

Tukko ("clog") is a traffic visualizer web application built with React

WIMMA Lab 2023 IoTitude created Tukko - Traffic Visualizer, an assigment given by Combitech. Tukko utilizes data from digitraffic API, and improves upon it by unifying the scattered info across multiple endpoints into our own much simpler API. We also gather data long term, which can later be shown to users to check for recent anomalies.

This data is then shown in a React based user interface, with mapping tools by Leaflet utilizing multiple plugins such as Geoman and Cluster markers. Utilizing custom icons, popups and tooltips, Tukko strives to convey information intuitively. For the more interested users, more in depth information is available. Development for Tukko followed best practices by utilizing a very strict ruleset maintained by Typescript and ESLint. Tukko is a complete product, but our team had many ideas left unfulfilled due to time constraints.

Installation

For development environment you will need:

• Your favorite code editor (vim, vscode, nano)
• Node.js (v18.16.0 or higher)
• Node Package Manager (npm)
  • Install:
    • Node Version Manager (Recommended)
    • Download for Windows, macOS, Linux
• Git
  • Download
• Tukko's backend (Github)
• Docker for production version (Docker)

Development

# Use SSH to pull from Github
git pull git@github.com:reimbo/tukko.git
git pull git@github.com:reimbo/tukko-backend.git

# Change working directory to tukkos folder
cd traffic-visualizer
cd traffic-visualizer-backend

# Install node dependencies with npm for both
npm install

# Run frontend development environment with vite
# For backend the same and it runs "npm-run-all -p compose:dev debug"
npm run dev

Production (Docker)

# For backend install npm-run-all
sudo npm install -g npm-run-all

# Build and run backend containers
# "npm-run-all -p build compose:prod"
npm run prod

# Does the build and makes a Docker image for the frontend and runs it
# localhost:5173
# "docker stop container_name 2>/dev/null || true && docker rm travis --force 2>/dev/null || true && docker build -t travis:latest . && docker run -d --name travis -p 5173:80 travis:latest"
npm run prod

Redis need initialization

• Open Redis UI http://localhost:8001

• Check "I have read and understood the Terms" and Submit

• Username: default
• Password: travis_is_the_best
• Click Apply changes (a couple of times)

Access token on the .env

If you want to connect your Github/Gitlab ticketing system to the feedback form, create an access token with api-rights and add the token to the .env of the backend folder.

# Redis variables
REDIS_OM_URL=redis://redis-stack:6379
REDIS_OM_PASSW=tukko_is_the_best

#mongoDB variables
MONGO_INITDB_ROOT_USERNAME=admin
MONGO_INITDB_ROOT_PASSWORD=admin
DB_NAME=tukko
COLLECTION_NAME=tms
DB_CONN_STRING=mongodb://admin:admin@mongo:27017

# Node variables
TUKKO_DOMAIN=http://localhost:3001
PORT=3001
TMS_API_URL=https://tie.digitraffic.fi/api/tms/v1
TM_API_URL=https://tie.digitraffic.fi/api/traffic-message/v1
TMS_STATIONS_DATA_URL=https://tie.digitraffic.fi/api/tms/v1/stations/data
TMS_STATION_LIST_URL=https://tie.digitraffic.fi/api/tms/v1/stations

# Access token is used by the feedback form to insert 'customer feedback' labeled tickets
# straight into GitLab. You will need to generate a new one.
ACCESS_TOKEN=your_github_or_gitlab_access_token_here

Usage

• http://localhost:5173/
• Frontend should be running on port 5173. Go and enjoy!
• Click around! Go crazy!

Contributing

Pull requests are welcome.

License

MIT