Details

Going into some detail how the KostNixApp was developed. The project is developed in cooperation with the ecoenergy GmbH. A server with an already existing database model and a part of the back-end were provided. Included are part of the database model and scripts for the background logic of the web application.

Contents

General Web application Map Stock management

General

The diagram above illustrates the functions and components of the KostNixApp. Users can interact with the web application to perform searches, order products and more. The request will be handled by the KostNixApp server and sends a response in JSON format. In addition to handling requests, the server is also used to communicate with local stock management systems.

Web application

The KostNixApp web application should be responsive, user friendly and intuitive. Following is a list of technologies which were used to realize this.

• CSS
• HTML5
• JavaScript/JQuery
• MySQL
• PHP

Modern frameworks are used to deliver a responsive and appealing Single Page App (SPA). Angular Material is one of the frameworks. It is developed by Google and extends the HTML syntax with custom directives. Additionally, it uses two-way data binding and the MVC design pattern. Libraries are maintained with a package manager to make further development easier.

• Angular Material
• Bower package manager

Following is a list of software tools which were used to develop the web application and helped improving the workflow.

• Brackets.io

  Developed by Adobe, this editor is aimed for web developers and provides a live preview of the web page.

• Sublime Text

  A text editor with advanced features like a minimap of the code, multi-line editing and more.

• Gitlab

  A software version control system that is crucial for maintaining code and good teamwork.

Map

There were many maps available, but we had some criteria which had to be fulfilled:

• Open source
• Good documentation
• Self hosted content
• Nice looks

In the pool of available Maps were:

• OpenStreetMaps (OSM)
• Google Maps

We came to the conclusion that OSM was the best way to go. That is because we were able to self host any content needed. Even the routing algorithm which did not require any third party server is performed by our server. The map consists of JavaScript, CSS and some map data, therefore it was easy to embedd it into the web application. The routing algorithm is performed by a PHP script stored on our server.

Stock management

The stock management system plays a huge part in the KostNixApp because it connects the store to the internet, and finally to the people. Because Kost-Nix-Shops are mainly financed by donations, the system must be affordable and easy to use. The best solution was to use a Raspberry Pi and a webcam. Attached QR-Codes on the shelfes define the store and what content is placed. After reading the QR-Code with the Raspberry Pi, the shopkeeper has to enter an estimated amount. Finally the data is saved in the MySQL database which is also connected to the KostNixApp web application.

Requirements for the stock management were:

• Affordable
• Easy handling

Background

This project is a diploma thesis of the students of the 5AHEL, enrolled at the HTL-Mössingerstraße.

Commercial parnter

The KostNixApp is developed in cooperation with ecoenergy GmbH.

Impressum

This website uses the Material Design Lite framework which is licensed under the Apache License Version 2.0. The creator takes no liability for the content or actuallity of provided links.
Created by Peter Werner Pfaffeneder.

• Material Design Lite
• Material Design Lite license