Applied Research Project A, SS2019

Mensa Online

By

Francisco Susana (26574) 

Sowmya Ranjan Nayak (26441)

S M Asif  A (26590)

Marjahan Akter (26569)

Herdilia Sunu (26589)

Deepak Kumar (26571)

​

Prof. Dr. Timo Kahl

Agenda

Introduction

• The old style of food ordering tends to have high human mistakes which increasing unnecessary operational cost.

Wrong order processing due to the human mistake also causes food wastage and increases the operating cost

Keeping that in mind, Mensa online is specially designed for a restaurant in Hochschule Rhein-Waal

​

• Mensa Online was designed to help the restaurant to make better-informed decisions for the food they provide.

​

• The web application of this system is used to maintain restaurant data, manage a reservation, perform food ordering, payment, and 

reporting.

​

• The Mensa Online is a web-based service which is created with mobile users as its first priority as target audience. Mensa Online was

created for a large number of audience mind.

​

• The current system is capable of accommodating machine learning attributes which could automate the complete process in the near

future, which will further reduce the cost of operation.

Market Research

After a quick analysis of the researched data, it was concluded that “Canteen” was the highest downloaded platform

among the five, and Mensa balance was the second highest downloaded platform followed by Mensa card. Mesa plan had the highest rating

followed by Mensaar

It was concluded that the Canteen app includes over 500 menus from refectories and cafeterias in over 180 cities.

Continued……..

• Whereas Mensa Balance was highly rated for the ease of use, and did not have any international language support and did not have

HSRW in their list.

​

• Mensa Card is Dedicated Balance Checking app for Mensa Card with no international language and it is not integrated with their primary

canteen application.

​

• Mensa Balance had multiple dedicated apps for every region in Germany, but it is not available for NRW/HSRW with no international

language support.

​

• Saarland University Mensa Cafes had dedicated web page and app for all the cafes and canteens in Saarland University. It also had an

Integrated Blue Code Payment System.

​

• It is not available for NRW/HSRW and no International Language, It has very low downloads and the Link to the mobile application was broken.

​

Existing System vs Proposed System

Existing System

The existing system is mostly app-based. Most of the systems are not focused on HSRW. Most systems have

only one method of payment, with German only as UI language. These systems are not very widely used due to their lack of efficiency and user friendliness. Few of these systems having a certain mobile operating system will lack the ability to support other diverse systems.

Proposed System

The goal of our proposed system is to address the drawbacks of the existing system and deliver an efficient system which could support all

the diverse devices independent of the nature of the operating system being used. The proposed system aims to address international language support, calories for the food as well as a new system of transaction which the existing systems lack.

​

Requirement Analysis

​

• User needs menu with calories and price
• User needs to recharge and check the balance online
• User needs to select the meal(s) online
• User needs to checkout
• User needs to check the order state

​

​

​

​

​

​

​

System Architecture

Front-End Framework

​

​

​

​

​

​

​

​

​

​

• Vue is a progressive framework for building user interface.
• The core library of Vue focused on the view layer
• Vue.js is easy to pick up and integrate with other libraries or existing projects.
• Vue.js would be better for small-size projects and other applications which prefer faster speed over greater functionality.

​

​

Vue.js

Front-End Framework

​

​

​

​

​

​

​

​

​

​

Front-End Framework

​

​

​

​

​

​

​

​

​

​

Application Programming Interface

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

Axios

​

• Axios is a promise-based modern http client library that runs on the browser and the server through Node.js.

• Axios to send API or HTTP calls from a Vue.js interface to a RESTful API back-end built with Django.

​

Application Programming Interface

MVC Framework

Model-View-Controller (MVC) is an architectural pattern that separates an application into three main logical components.

​

Each of these components are built to handle specific development aspects of an application.

Functionality of MVC

Object-Relational Mapping (ORM)

ORM provides a bridge between relational

database tables, and python objects.

​

Django

Django is a high-level Python Web framework that encourages rapid

development and clean pragmatic design.

​

MTV vs. MVC

Django uses MTV

Model(M) is a model of the data access layer. It defines;

- How to access data

– How to validate data

– What are the relationships between the data

Template (T) is the presentation layer. It defines;

- How something should be displayed on a Web page

View (V) is the business logic layer. It defines the logic that;

- Accesses the model and references the appropriate template(s).

​

​

​

​

​

​

Django

ORM

MVC

Vue Life Cycle

​

​

​

Vue Life Cycle

​

​

​

Vue App

​

​

​

Vue Routing

​

​

​

Vue Routing & Components

​

​

​

​

​

​

about.vue component

Applayout.vue

Vue Routing & Components

API – Fetching

​

​

​

Index.js

Menu.vue

API – Fetching

​

​

​

1

2

3

Vuex – Saving Orders

​

​

​

Vuex – Saving Orders

​

​

​

Vuex – Saving Orders

​

​

​

Menu.vue

cart.vue

Vuex – Saving Orders

​

​

​

1

2

Vuex – Saving Orders

​

​

​

3

API – Submitting

​

​

​

Index.js

Cart.vue

API – Submitting

​

​

​

API – Submitting

​

​

​

Workflow

Database Schema

Workflow

BACKEND

• Models

Workflow

• Django REST Framework

Django REST framework is a powerful and flexible toolkit for building Web APIs.

​

API

Workflow

• URLs

Workflow

• Views

Workflow

• Serializers

Challenges

​

- Put both frameworks to work together

- Develop the proper staging for Vuex

- API for making payments

MENSA ONLINE

​

EVALUATION

Project Demonstration : User Portal

Project Demonstration : Admin Portal

Project Demonstration : Order Foods

1)Select Menus :

Project Demonstration : Order Foods

2)Checkout Order :

Project Demonstration : Order Foods

3)Mensa Admin Confirmation(Approve/Cancel) :

Project Demonstration : Recharge Wallet

Project Demonstration : Admin Food Management

References

https://vuex.vuejs.org/

​

https://blog.bitsrc.io/how-to-build-vue-components-like-a-pro-fd89fd4d524d

​

https://codingthesmartway.com/getting-started-with-axios/

​

https://realpython.com/tutorials/django/

​

https://www.tutorialspoint.com/mvc_framework/mvc_framework_introduction.htm

​

https://hackernoon.com/thinking-in-redux-when-all-youve-known-is-mvc-c78a74d35133

Thank you