This is a product development project, purposed to assist Tour guides with Augmented Reality. The system was developed in two phases. It started in October 2019 as an internship project for KøbenhavnerTure, and in a second phase (November-December 2019) it was further developed as a final exam project for KEA's Datamatiker AP.
In a multidisciplinary team of 2 multimedia designers and 2 developers, we developed an AR solution for this local guided-tours company. Our goal was to "Bring Stories Alive" as well as to add a competitive advantage to the company's SoMe presence.
We went through a 4-day course on Unity 3D and 1 day on Ideation. We worked with Scrum. An experienced tutor guided us while practising design methods from the Amsterdam MediaLab's Toolkit.
We researched about the target group of the company, and through ideation tecniques we developed a series of prototypes.
After iterative user testing we ended up with a working AR mobile application prototype that we pitched to the client during an open event.
.
Recomendation letter available. Team: Charlène Marteyn, Modestas Šekštela, Stefanos Agelastos.
Together with two colleagues we developed an augmented reality android tourist guide and a supporting administration system. The user harvests GPS and AR technologies through their phone and consumes content relevant to their location. The system administrator can add new locations and feed the application with new content.
We combined Scrum and Design thinking. Both methodologies are iterative and incremental by nature, so they combine well:
Exam evaluation: excellent. Team: Alexander Kellberg, Kristian Skovlund Rasmussen, Stefanos Agelastos.
- Android APK by Unity3D and Vuforia
- React isomorphic front end application
- Node.js express API and server side rendering
- MongoDB for semi-structured data model persistence
- Heroku PaaS staging environment
The admin webapp allows you to add Locations to a database, and provide them as a REST resource to the android APK. The admin webapp is based on MERN, a scaffolding tool which makes it easy to build isomorphic apps using Mongo, Express, React and NodeJS. Read the Documentation. The android app was made on the Unity real-time 3d development platform and Vuforia library, which provided web, gps and augmented reality capabilitities. Currently the solution has the following architecture:
These instructions will get you a copy of the administration and running on your local machine for development and testing purposes.
Note : Please make sure your MongoDB is running. For MongoDB installation guide see this. Also npm6 is required to install dependencies properly.
-
npm run start- starts the development server with hot reloading enabled -
npm run bs- bundles the code and starts the production server -
npm run test- start the test runner -
npm run watch:test- start the test runner with watch mode -
npm run cover- generates test coverage report -
npm run lint- runs linter to check for lint errors
This is the data structure of the location objects.
location: {
author,
title,
lon,
lat,
images: [
{ id, image_title, image_url }
]
},
MERN uses Webpack for bundling modules. There are four types of Webpack configs provided webpack.config.dev.js (for development), webpack.config.prod.js (for production), webpack.config.server.js (for bundling server in production) and webpack.config.babel.js (for babel-plugin-webpack-loaders for server rendering of assets included through webpack).
The Webpack configuration is minimal and beginner-friendly. You can customise and add more features to it for production build.
MERN uses express web framework. Our app sits in server.js where we check for NODE_ENV.
If NODE_ENV is development, we apply Webpack middlewares for bundling and Hot Module Replacement.
We use React Router's match function for handling all page requests so that browser history works.
All the routes are defined in client/routes.js. React Router renders components according to route requested.
Client directory contains all the shared components, routes, modules.
This folder contains all the common components which are used throughout the project.
Index.js simply does client side rendering using the data provided from window.__INITIAL_STATE__.
Modules are the way of organising different domain-specific modules in the project. A typical module contains the following
.
└── Location
├── __tests__ // all the tests for this module goes here
| ├── components // Sub components of this module
| | ├── Location.spec.js
| | ├── LocationList.spec.js
| | ├── LocationItem.spec.js
| | └── LocationImage.spec.js
| ├── pages
| | ├── LocationPage.spec.js
| | └── LocationViewPage.spec.js
| ├── LocationReducer.spec.js
| └── LocationActions.spec.js
├── components // Sub components of this module
| ├── Location.js
| ├── LocationList.js
| ├── LocationItem.js
| └── LocationImage.js
├── pages // React Router Pages from this module
| ├── LocationPage
| | ├── LocationPage.js
| | └── LocationPage.css
| └── LocationViewPage
| ├── LocationViewPage.js
| └── LocationViewPage.css
├── LocationReducer.js
└── LocationActions.js
Assets can be kept where you want and can be imported into your js files or css files. Those fill be served by webpack in development mode and copied to the dist folder during production.
We use babel to transpile code in both server and client with stage-0 plugin. So, you can use both ES6 and experimental ES7 features.
There are docker configurations for both development and production.
To run docker for development:
docker-compose build # re-run after changing dependencies
docker-compose upor, if you want to override the web port:
WEB_PORT=<your_custom_port> docker-compose upTo run docker for production:
docker-compose -f docker-compose-production.yml up --buildTo reset the database:
docker-compose down --volumesMERN is released under the MIT License.