FindZ - Web3D-Project

• Vision
• Description
• Setup & Deployment
  • Cloudflare Tunnel
  • Flask
  • Angular
  • Docker Compose
• Lessons learned

Vision

Spotlight yourself so your friends find you easily. Dont lose your friend in a crowd.

Description

Augumented-Reality marker, which displays your friends current position through the camera, lets you add locations of intereset and join groups for restricted visibility.

Setup & Deployment

Cloudflare Tunnel

To make the app accessible over the internet Cloudflares Tunnel option is used. Setting up a local cloudflare-daemon cloudflared is required.

Follow the instructions on Cloudflare Dashboard

The tunnels IP address has to be added inside the google oauth console for the google login to work properly.

Flask

# Install venv
python3 -m venv venv

# Select `venv` as environment & python interpreter
source venv/bin/activate

# Install requirements
pip3 install -r requirements.txt

# Run flask server
python app.py

Angular

# Install angular cli (ng)
npm install -g @angular/cli

# Set baseHref to static folder in angular.json
"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "baseHref": "/static/",
          }
}

# Install node packages
npm install

# Build project
ng build --configuration production --build-optimizer

# Move files move created files from dist/ into static/ & index.html into templates/

Docker Compose

Deploy method requires only a Docker & Docker-compose installation. Cloudflare tunnel & token is required for this to work. .env file.

1. Pull repository

cd Scripts/

# Build frontend scripts
bash build_frontend.sh

# Build docker image
bash build_docker_image.sh

# Deploy containers
bash compose_docker_containers.sh

---

Lessons learned

• New Technologies

  • Flask: Python Web-Framework (Server-Side)
  • Angular: Typescript Web-Framework (Client-Side)
  • A-Frame: 3D & WebXR Scence visualization

• Security

  • SQL injections ¹
  • Secrets in git ²

• Save development time:

  • Logging libraries. ³
  • API-endpoints documented ⁴. Information flow between independently developed components should be documented.

Footnotes

1. Prevent sql injections by not allowing strings to be passed on as queries. ↩

2. Dont commit secrets into version control ↩

3. Logging statements clearly defined for easier debugigng. Use ↩

4. Information flow between independently developed components should be documented.(Small type can cost several hours..) ↩