Building the pos application for coffee shop

Final product: A application and a Web API has the management modules such like: Table, Food/Drink, Order, Merge/Split table, Payment, Material, Statistics.. - Help the manager to operat

INTRODUCTION

The reason for choosing topic

In the retail and service sectors, utilizing payment and management POS machines streamlines the sales process by enabling quick transaction processing, efficient revenue reporting, and enhanced customer experience tracking These systems not only optimize storage space but also contribute to a professional and convenient shopping experience, ultimately strengthening the store's brand and customer satisfaction.

The implementation team has selected the research topic of "Building a Coffee Shop Management Application" to aid shop owners in digitizing their business operations This application aims to streamline daily management tasks, including inventory and product catalog management, order processing, invoice handling, and payment support via cash and e-wallets Additionally, it will facilitate employee and customer management, while the team utilizes the Spring Boot Framework to enhance their learning and application of new technologies in this thesis project.

The project focuses on researching business processes to develop a coffee shop management application designed for employees and administrators This application will feature a point-of-sale (POS) system for employees and a management POS system for administrators, enhancing operational efficiency and user experience.

Research purposes

- Research and use Spring Boot Framework, Docker Engine to develop management applications

- Research POS application to manage cafe

- Develop a POS application for a cafe using Spring Boot Framework including a manager interface and an employee interface

- Help the manager to operate and manage the cafe: employee management, customer management, material management, menu management, invoice management, revenue tracking

- Help employees quickly manipulate sales activities: search, create and track orders, invoicing, payment, input materials, customer management

- Research and develop practical functions of the coffee shop management system:

The system records the operation history and offers flexible purchasing options for in-store or takeaway services It also tracks customer preferences and supports various payment methods, including both cash and non-cash transactions.

Technology

- IDE and compiler: Visual Studio

- Server-side processing: Docker Engine, Spring Boot, Google Computer Engine

- Client-side processing: ASP.NET, NET Framework, Caliburn Micro

- Database management system: My SQL, Postgres

Scope

+ Create orders in the form: use at the shop, take away

+ See the preferences of customers who have bought at the shop

+ Update dishes in the order

+ Change table (change the order for another table)

+ Add discount code for orders

+ Pay for orders by cash or non-cash

- Customer management: search, create, update information, view lists, track customer preferences

- Manage invoices: search, view list, view invoice details

- Manage ingredients: search, update information about ingredients (quantity), view the list of ingredients

- Manage accounts: search, create, update, view list of accounts

- Menu management: search, create, update dish information (unit price, ingredients, quantity of ingredients), view the list of dishes

- Customer management: search, create, update, view list, view detailed customer information

- Manage orders: search, view list, view order details

- Manage invoices: search, view list, view invoice details

- Manage raw materials: search, create, update, view list, view detailed information of ingredients (name, quantity, unit price)

- Manage discount codes: create, view list, update discount code information (quantity, application date)

+ View sales statistics by day/month/year

+ View the ingredient list report

+ View monthly reports of customers in the form of charts

+ View the report of the number of orders by month in the form of a chart

LITERATURE REVIEW

Introduction Spring Boot

- Spring Boot is a Java framework developed by Pivotal Team based on the open- source Java framework, providing RAD (Rapid Application Development) feature – Rapid application development [1]

- Spring Boot is used to create standalone applications based on Spring

- Absolutely no code generation and no requirement for XML configuration.

Spring is flexible and supportive

- Spring Boot has features of Spring Framework

- Create standalone applications that can be run in java-jar

- Can develop Web Application, Caching, Email, Validation, work with SQL technology.

Spring is fast

- Automatically configure Spring and 3rd party libraries whenever possible

- Embed Tomcat, Jetty or Undertow directly (no need to deploy WAR files).

Features

- SpringApplication: Allows launching the application from main() by calling the run() method

- Externalized Configuration: Spring Boot allows users to use external configuration to run on many different environments

- Profiles: Used to divide configuration types for different environments

- Loggin: Use cater for all log functions internally These logging will be managed by default.

Spring Boot Framework Architecture

Each layer depends only on the adjacent layers, responsible for communicating with the edge layers on both sides [2]

- Presentation Layer: This is the top layer of a Spring Boot application, this layer is used to handle HTTP requests, authenticate, convert JSON to Java Object and vice versa

- Business Layer: This layer is responsible for handling the project's operations, and performing test commands to ensure the correctness of data, and logic

- Persistence Layer: Includes all handling of database operations such as storing, updating, querying or deleting data

- Database Layer: Can include multiple databases, which means that a single data operation can be synchronized with many different database servers.

Introduction Docker Engine

- Docker is an open-source project that automates the deployment of Linux and Windows applications into virtualized containers

- Docker is a platform that allows users to quickly package, deploy, and run applications

Docker offers a powerful layer of abstraction and automatic virtualization built on Linux, utilizing isolated Linux resources like groups, kernel, and file managers This enables containers to operate independently within a single Linux environment.

- Docker Engine is a Client-Server engine that powers container technology to handle the tasks and workflows involved in building container-based applications (container)

- Engine: is the main component, as a tool for animating the application package

- Hub: is a cloud service for sharing applications and automating continuous workflows, can pull/push images

Images are essential for packaging applications along with their dependent components required for operation These images can be stored either locally or in a Registry, which serves as a repository for easy access and management of application images.

+ Containers: is an instance of an image, acting as a directory, containing all the things needed to run an application

+ Network: Provides a private network that exists only between the container and the host

+ Volume: Volume in Docker is used to share data for containers.

What is Google Computer Engine?

Google Compute Engine provides virtual machines hosted in Google's data centers, linked to a global fiber network Its robust tools and workflows facilitate seamless scaling from individual instances to comprehensive, load-balanced cloud computing solutions.

These virtual machines (VMs) offer rapid boot times and feature persistent disk storage for reliable performance Available in various configurations, they include predefined sizes and the option to create Custom Machine Types tailored to your specific requirements.

+ Stability: SLA 99,95% (single instance) vs 99,99% (LB instances multi zones) + Live migration

+ Storage efficiency: persistent disks support up to 257TB of storage with high- performance

+ Cost: committed and sustained use discounts gain infinite value

+ Custom and predefined machine types

+ Preemptible VMs, BYOL and sole tenants

+ Easy integration: with product service like AI/ML data analytic

+ Friendly console web interface: support UI vs cloud shell

What is POS?

A point of sale (POS) system encompasses the locations where retail goods, including groceries, fashion items, and restaurant services, are sold Additionally, POS refers to the software utilized by traditional retailers, which includes cash registers, computers, and tablets These systems enable cashiers to scan products, calculate totals, and process financial transactions efficiently.

Each type of POS system will have features that cater to different types of business

This project focuses on a POS system designed for coffee shops, integrating essential modules such as table management, menu options for food and drinks, and ingredient tracking Key functionalities include creating and merging or splitting tables, processing payments, and managing staff and client interactions.

The team’s cloud-based POS system allows managers to conveniently log in and monitor store activities remotely, eliminating the need for physical presence at the store With data securely stored on the internet server, users can easily access the system from any computer browser, enhancing operational efficiency and flexibility.

Survey

The implementation team has drawn on various practical POS applications during their learning process, which offer professional functionality and robust support features, particularly for stores requiring digital management Common features of these POS systems include table and area management, order placement, and diverse payment methods such as credit cards, cash, and e-wallets Additionally, the systems incorporate notification features that enhance communication, allowing bartenders to alert waitstaff when orders are ready, waitstaff to inform bartenders about customer wait times, and cashiers to be notified when customers request payment.

REQUIREMENT SPECIFICATION

Description

The cafe has the following general structure:

- The administrator is responsible for managing users, is granted the right to log in to the system, can lock accounts, reset passwords, edit information, track orders, and statistics…

- Employees are responsible for monitoring the table, food and drink status, order status, creating new, updating orders, merging/splitting tables, and taking care of customers

+ Each employee has common information such as: ID, name, permission, birthday, phone number, address, username, password

+ Each customer has common information such as: phone number, name, previous point, point

+ Each order has common information such as: table, food, size, price, voucher, note, discount

+ Each food and drink have common information such as: ID, name, price, image, type

+ Each material has common information such as: ID, name, type, amount total, quantity

+ Each topping has common information such as: ID, name, price, image

+ Each voucher code has common information such as: ID, name, ID food/cake, value (percent), isValid

+ Each recipe has common information such as: ID material, ID food, the amount for one, size

+ Each receipt has common information such as: ID, ID employee, ID customer, total price, discount price, customer pay, type payment, type service, table, voucher

+ Each action has common information such as: ID, ID employee, table effect, action type, occur time

Functional requirements

2.1.1 Users can login with several roles and logout

- For POS Application: User can log in as employee, log out

- For POS Website: User can login as administrator, logout

2.1.2 Employees can manage tables, make orders, and pay customers

Staff users in the POS application have the ability to create customer orders, merge or split orders based on table arrangements, and manage pooled tables When it's time for payment, staff can efficiently process the transaction and print an invoice for the customer.

2.1.3 Administrators use POS Website to manage

Admin can access the management POS to check and monitor all employee activities

In addition, the administrator can manage the store's statistics, view the sales rate chart

System Functions Main Use Cases Use Case #

User is not logged in

User logged in as Admin

User is not logged in

User logged in as Employee

Table 2 Use case description Login

Use Case No UC_1.1 Use Case Version 1.0

Author Nguyễn Lê Nguyên Anh

 User that wants to access the system

 Allow user to login to the system

 User can login to the system in one defined role

 UI changes for each role accessed to the system

 User must fill the username and password

 Success: Users will be redirected to their work screen

 Fail: User can’t login to the system

Step Actor Action System Response

1 Type username and password to the text field

The system set password to private char

2 Click on “Login” button The system will redirect user to main working screen, depends on user role Exceptions:

No Actor Action System Response

1 User types wrong password or username

The system will pop-up an error

Table 3 Use case description logout

 Employee, Admin that wants to logout of the system

 Allow user to logout of the system

 Employee, Admin can logout after they have finished their work

 Redirect to main login screen

 Employee, Admin must login the system

 Success: Employee, Admin will be redirected to login screen

1 Click on “Logout” button The system will redirect user to login screen

Figure 5 Use case View employee

Table 4 Use case description View employee

Use Case Name View employee

 Allow admin view list employees

 List employees show in the screen

 User must login the system as role admin

 User enter the Employee management screen

 Success: Admin view a list of employees in the screen

The system will navigate to manage screen and show list employees

Figure 6 Use case Create employee

Table 5 Use case description Create employee

Use Case Name Create employee

 Allow admin add employee into database

 The employee insert in database is successfully.

 User enter the Employee management screen

 Success: System show alert “Create successfully”

The system shows list employees

2 Click on “Create” button The system shows the form to add employee

3 Type information: name, gender, birthday, address, phone number…

The system shows the text, which admin is typing

4 Click on “Add” button The system shows alert “Create successfully”

Figure 7 Use case View menu

Table 6 Use case description View menu

Use Case Name View menu

 Allow Admin view list menu

 List menu show in the screen

 User enter the Menu management screen

 Success: Admin view a list of all food and drinks in the screen

The system shows list food and drinks

Figure 8 Use case Create menu

Table 7 Use case description Create menu

Use Case Name Create menu

 Allow Admin add a new food or drink into database

 Admin can create a new food or drink.

The system shows list menu

2 Click on “Create” button The system shows the form to add a new food and drink

3 Type information: name, price, image, material, quantity…

4 Click on “Add” button The system shows alert “Create successfully”

Figure 9 Use case Update menu

Table 8 Use case description Update menu

Use Case Name Update menu

 Allow admin update food and drink information

 The dish information update in database

 Success: System show alert “Updated is successfully”

The system shows a form to change information

2 Click on “Update” button, which need to change information

3 Fill any field of information in the text field

4 Click on “Save” button The system will call an API update information and show alert the result

Figure 10 Use case Create voucher

Table 9 Use case description Create voucher

Use Case Name Create voucher

 Allow admin create voucher code into voucher list

 The voucher insert in database is successfully

 User enter the voucher management screen

The system shows list vouchers code

2 Click on “Create” button The system shows the form to add voucher code

3 Type information: name, day, code, quantity

4 Click on “Add” button The system show alert the result “Create successfully”

Figure 11 Use case Tracking history

Table 10 Use case description Tracking History

Use Case Name Tracking History

 Allows admin to view employee activity history

 Admin can view employee activity history

 User enter the tracking history screen

The system shows list activity history

Figure 12 Use case Create material

Table 11 Use case description Create material

Use Case Name Create material

 Allow admin create a new material into material list

 The material insert in database is successfully

 User enter the Material management screen

The system shows list materials

2 Click on “Create” button The system shows the form to add a new material

3 Type information: name, price, image, size, quantity

4 Click on “Add” button The system show alert the result “Create successfully”

Figure 13 Use case Update material

Table 12 Use case description Update material

Use Case Name Update material

 Allows admin to update material information into the materials list

 The material update in database is successfully

 User enter the Material management screen

 Success: System show alert “Updated successfully”

The system shows a form to change information

2 Click on “Update” button, which need to change information

3 Fill any field of information in the text field

Click on “Save” button The system will call an API update information and show alert the result

Figure 14 Use case View statistic

Table 13 Use case description View statistic

Use Case Name View statistic

 Allow admin to view a certain income one month (month can be chosen)

 Admin can see the store's sales for the month

 User enter the statistics screen

 Success: Admin can view a chart that showing total income of one month

1 Choose menu “Statistics” The system navigates to statistical screen

2 Click on “calendar” button Choose one day or month to watch income

The system shows monthly income of month

Figure 15 Use case Create order

Table 14 Use case description Create order

Use Case Name Create order

 Allow employee to make order based on the table

 Employee can make orders for customers who already have their table.

 Display the food selection screen

 User must login the system as role employee

 Success: Order will be created, and the table will have people

The system shows the list tables

2 Choose the table where the customers have chosen

The system redirects the employee to home screen

3 Click on the dish users have ordered

The system will show food details screen

4 Choose type, quantity, note… Click on “add” button

5 Click on “Order” button The system will save the dishes on that table and change state of that table from empty to full

1 Click on the dish users have ordered

The system will show food details screen

3 Click on “Table” button The system shows the list tables

5 Click on “Order” button The system will save the dishes on that table and change state of that table from empty to full

Figure 16 Use case Update order

Table 15 Use case description Update order

Use Case Name Update order

 Allow employee to update dishes (add or remove) in the order

 Employee can update the number of dishes in the order

 Success: System show alert “Updated successfully”

2 Select the table that employee want to update customer’s order

3 Click on “Update” button The system redirects the employee to home screen

4 Employee update (quantity or extra item) in the order

5 Click on “Save” button The system will update the order in the database

Figure 17 Use case View order

Table 16 Use case description View order

Use Case Name View order

 Allow employee to view list of orders and order details

 Employee can see customer orders.

1 Click on "Table" button on the menu bar in the upper right corner

The system will navigate to list tables screen

2 Choose the number of tables The system displays food details at the selected table

1 Click on "List Order" button on the menu bar in the upper right corner

The system will navigate to list orders screen

2 Choose the number of tables Click on “Order details” button

The system displays food details at the selected table

Figure 18 Use case Change Table

Table 17 Use case description Change Table

Use Case Name Change Table

 Allow employee to change tables

 Employee update the table selected by the customer.

1 Click on "Table" button on the menu bar in the upper right corner

The system will navigate to list tables screen

2 Choose the number of tables The system displays food details at the selected table

3 Choose the "switch" icon The system closes the order details

41 screen and returns to the table list screen as in step 1

4 Choose new table The system displays the message "Do you want to change tables?"

5 Click on “Yes” The system re-updates the order to the selected table

Table 18 Use case description Payment

 Allow employees to make payments for customers' orders

 Customer successfully paid for the order.

 User must select the order to pay

 Success: System show alert “Payment successfully”

1 Click on "List Orders" button on the menu bar in the upper right corner

The system will navigate to list orders screen

2 Choose the number of tables Click on “Payment” button

The system navigates to payment screen

3 Type the amount paid by the customer

5 Click on “Payment” button The system will confirm the payment successfully

1 Click on “Zalo pay” button

2 Click on “Payment” button The system displays the QR code on the screen

3 Customers scan the QR code on the screen

The system displays a message that the customer has successfully paid

1 The payment amount is less than the total amount of the order

The system displays the message

Figure 20 Use case Add voucher

Table 19 Use case description Add voucher

Use Case Name Add voucher

 Allow employee to make a payment for custom order with voucher

 Add the voucher to an order that being paid.

 User enter the payment screen

 Success: Employee successfully add voucher to the order

2 Choose the table where the customers have chosen

3 Click on “Voucher” button on the menu bar in the upper right

The system displays a box to enter a discount code

4 Type a voucher code Click on

The system displays a message that the discount code has been applied successfully

1 At the payment screen, press the

The system displays a box to enter a discount code

2 Type a voucher code Click on

The system displays a message that the discount code has been applied successfully

1 Invalid value voucher code The system displays a message that the application of the discount code has failed

Figure 21 Use case View receipt

Table 20 Use case description View receipt

Use Case Name View receipt

 Allow Admin view list invoices

 List invoices show in the screen

 Success: Admin view a list of invoices in the screen

The system shows list invoices

Figure 22 Use case Search customer

Table 21 Use case description Search customer

Use Case Name Search customer

 Allow employee to search customer’s phone number

 Searched customer’s information show in screen

1 Click on “search” button at home screen

The system shows a text field to typing

2 Type phone number Click on

The system will show searched customer’s informations

Figure 23 Use case Create customer

Table 22 Use case description Create customer

Use Case Name Create customer

 Allow employee add customer into database

 The customer insert in database is successfully

1 Click on "Register" button on the menu bar in the upper right corner

The system shows the form to add a new customer

2 Type information: name, gender, phone number, note

3 Click on “Register” button The system displays a successful registration message and returns to the home screen

Figure 24 Use case View material

Table 23 Use case description View material

Use Case Name View material

 Allow admin view list materials

 List materials show in the screen

The system shows list materials

Non-functional requirements

- The employee can use essay the system

- The system design, which have a little bit defect

- Security: Each employee just has one account to access into the system

+ If the system has any heavy problem, will be maintain immediately

+ If system have error, which must be the small error

- Password of user will be hash before adding to database

- Time for payment with an order must be maximum 5s and minimum 0.5s

- Maintain easily: When I develop a new feature, others feature won’t be affected

- Software wrote in IDE Visual Studio 2019 Community or any IDE Supporting NET Framework and Spring Boot Framework

User interfaces useful with icons, button, label is explicit It helps the user can use easily the system

The software must be use with:

SYSTEM DESIGN

System Architecture

This application features a fundamental design structure aimed at streamlining the payment process between employees and customers It serves as a comprehensive management tool for coffee stores, overseeing various aspects such as employee management, inventory control, customer interactions, and voucher systems Additionally, it includes a robust backend that supports API functionality, enabling efficient data storage and retrieval as needed.

+ Application: built base on WPF NET framework, supporting maximize performance for application on Window OS, also helping programming to become simpler in designing interface, data processing

+ Website: built base on MVC ASP.NET framework, a common framework for small and medium project, makes the website smoothly and stable

- Backend: using spring boost to minimize code development time, increase overall development efficiency of the whole project, and using MySQL for storing data, entities with relationship

- Both application and website using REST API for connection to server for getting all needed data

- POS application is built base on MVVM model for helping create two-way binding between view and handle view class, it’s convenient with application has multiples screen

- With less screen than application, management website is developed with MVC model

- At backend layer, using docker engine for each component to easy maintenance software Deploying to an online server for availability accessing

ER Diagram

Sequence Diagram

3.1 Add customer sequence diagram (POS Application)

Figure 29 Add customer sequence diagram

3.2 Complete items sequence diagram (POS Application)

Figure 30 Complete items sequence diagram

3.3 Choose table sequence diagram (POS Application)

Figure 31 Choose table sequence diagram

3.4 Choose voucher sequence diagram (POS Application)

Figure 32 Choose voucher sequence diagram

3.5 Create order sequence diagram (POS Application)

Figure 33 Create order sequence diagram

3.6 Edit food order sequence diagram (POS Application)

Figure 34 Edit food order sequence diagram

3.7 Order food sequence diagram (POS Application)

Figure 35 Order food sequence diagram

3.8 Delete order sequence diagram (POS Application)

Figure 36 Delete order sequence diagram

3.9 Edit order sequence diagram (POS Application)

Figure 37 Edit order sequence diagram

3.10 Payment order sequence diagram (POS Application)

Figure 38 Payment order sequence diagram

3.11 Login sequence diagram (POS Application)

3.12 Get favorite food sequence diagram (POS Application)

Figure 40 Get favorite food sequence diagram

3.13 Add employee sequence diagram (Management Website)

Figure 41 Add employee sequence diagram

3.14 Edit employee sequence diagram (Management Website)

Figure 42 Edit employee sequence diagram

3.15 Add food sequence diagram (Management Website)

Figure 43 Add food order sequence diagram

3.16 Edit food sequence diagram (Management Website)

Figure 44 Edit food sequence diagram

3.17 Get food recipe sequence diagram (Management Website)

Figure 45 Get food recipe sequence diagram

3.18 Get all history sequence diagram (Management Website)

Figure 46 Get all history sequence diagram

3.19 Get details history sequence diagram (Management Website)

Figure 47 Get details history sequence diagram

3.20 Add material sequence diagram (Management Website)

Figure 48 Add material sequence diagram

3.21 Add recipe sequence diagram (Management Website)

Figure 49 Add recipe sequence diagram

3.22 Get all statistic sequence diagram (Management Website)

Figure 50 Get all statistic sequence diagram

3.23 Get statistic by type sequence diagram (Management Website)

Figure 51 Get statistic by type sequence diagram

3.24 Add voucher sequence diagram (Management Website)

Figure 52 Add voucher sequence diagram

Class Diagram

Figure 53 Class diagram for Provider Models (Website)

Figure 54 Class diagram for Provider Models (POS)

User interfaces design

Text One place to enter user accounts

3 password Text One place to enter user password

Checkbox To check remember password

Text Navigate to the Forgot password screen

Text Navigate to the Create account screen

5.2 Create Account screen (Management Website)

Table 26 Create Account UI description

1 Text Name Text A place to input username

Text Where to enter password to register

4 Confirm Button Confirm new account creation

5.3 Invoice statistics screen (Management Website)

Table 27 Invoice statistics screen UI description

No Object name Format Reference Action Note

68 information and account picture of the manager

4 Statistic Button Default page should show no more page

Date Filter all invoices on selected date

6 Logout Button Navigate to the Login screen

Button Navigate to the History tracking management screen

Button Navigate to the Employee management screen

Button Navigate to the Material management screen

Button Navigate to the Food management screen

Button Navigate to the Voucher management screen

13 Day Date Table time to start ordering

14 ToDate Date Bill payment date

15 TotalPrice Number Total bill payment

16 DiscountPrice Number Total discount is deducted from bill

5.4 History Tracking Management screen (Management Website)

Figure 58 History Tracking Management screen

Table 28 History Tracking Management screen UI description

1 Number Text Historical sequence number change

2 Occur Time Date Time of change of management

3 Table Effect Text Table affected by change

4 Staff's name Text Replacement staff perform the change operation

5 Action type Text Edit, Delete,

6 Detail Details of change history

7 Next Page Button Go to next page

5.5 Employee Management screen (Management Website)

Table 29 Employee Management screen UI description

1 Search box Text Used to enter search information

2 Search Button Click to search for information

9 Username Text Employee account name

Button Navigate to the Add employee management screen

Button Navigate to the Edit Employee management screen

Button Delete employee from system

5.6 Add Employee Management screen (Management Website)

Figure 60 Add Employee Management screen

Table 30 Add Employee Management screen UI description

2 Permission Combobox Select employee rights

3 Birthday Date Select the employee's date of birth

4 Phone Number Employee phone number

6 Username Text Enter login account

8 Send Button Sent to the system for registration

9 Cancel Button Navigate to the Employee Management screen

5.7 Edit Employee Management screen (Management Website)

Figure 61 Edit Employee Management screen

Table 31 Edit Employee Management screen UI description

2 Permission Combobox Select employee rights

3 Birthday Date Select the employee's date of birth

4 Phone Number Employee phone number

5 Username Text Enter login account

7 Cancel Button Navigate to the Employee Management screen

5.8 Material Management screen (Management Website)

Table 32 Material Management screen UI description

4 Name Text Name of materials

8 Add Material Button Navigate to the Add Material management screen

9 Edit Material Button Navigate to the Edit Material management screen

5.9 Add Material screen (Management Website)

Table 33 Add Material screen UI description

3 Amount Number Quantity in stock

4 Quantity Number Employee phone number

7 Cancel Button Navigate to the Material Management screen

5.10 Update Material screen (Management Website)

Table 34 Update Material screen UI description

3 Amount Number Quantity in stock

5 Cancel Button Navigate to the Material Management screen

5.11 Food Management screen (Management Website)

Table 35 Food Management screen UI description

3 Name Text Name of Food

4 Price Number price of food

5 Type Text Kind of food

6 Detail Icon Navigate to the Detail food management screen

9 Edit Food Button Navigate to the Edit Food management screen

10 Add Food Button Navigate to the Add Food management screen

5.12 Voucher Management screen (Management Website)

Table 36 Voucher Management screen UI description

4 Valid Text status of voucher

6 Value Number Number of vouchers

7 IdFood Number Type of food associated with a separate voucher

8 Add Voucher Button Navigate to the Add Voucher management screen

9 Edit Voucher Button Navigate to the Edit Voucher management screen

Button Delete voucher from system

Figure 67 Login screen (POS Application)

Table 37 Login screen UI description (POS Application)

1 Username Text Where to enter user account

2 Password Text Where to enter user password

3 Login Button Authenticate to access the system screen

4 Close Button Close the app

5 Language Combobox The user selects the language when using the app

Figure 68 Menu screen (POS Application)

Table 38 Menu screen UI description (POS Application)

1 Exit Button User clicks to exit the menu selection screen and return to the login screen

2 Table Button Go to the table status view screen

3 Bill Button Go to invoice screen

4 Voucher Button Navigate to the Voucher screen

5 Sign up Button Navigate to the Signup screen

Text Used to search for food

7 Search Food Button Press the button to search

Button Press the button to search member

11 Picked food to take away

Button Picked food to take away

12 Avatar Food and food information

13 Add Food Button Click to add dishes

14 All Food Button Show all the dishes on the screen

Text Display the number of selected dishes

Text Display the selected table number

24 Chose table Button Go to the reservation screen

Go to order information confirmation screen

5.15 Order table screen (POS Application)

Figure 69 Order table screen (POS Application)

Table 39 Order table screen UI description (POS Application)

1 Exit Button Go to the menu view screen

2 Empty table Text Show the total number of empty tables

Text Show the total number of tables already occupied

4 Confirm Button Confirm table selection

6 Table Image Blue empty table red manned table

Figure 70 Voucher screen (POS Application)

Table 40 Voucher screen UI description (POS Application)

1 Exit Button Return to the screen menu

Figure 71 Register screen (POS Application)

Table 41 Register screen UI description (POS Application)

1 Name Text User enters his name

Number Enter your phone number

4 Note Text Write the content to note

5 Register Button Verify account registration

5.18 Details food screen (POS Application)

Figure 72 Details food screen (POS Application)

Table 42 Details food screen UI description (POS Application)

7 Note Text Write the content to note

8 Add Food Button Confirm more dishes

Figure 73 Order screen (POS Application)

Table 43 Order screen UI description (POS Application)

1 Field name Text The name of the dish

2 Field price Number Food prices

5 Total Bill Number Price food

5.20 Order review screen (POS Application)

Figure 74 Order review screen (POS Application)

Table 44 Order review screen UI description (POS Application)

4 Voucher Number Selected discount code

7 Confirm Button Confirm table selection

5.21 List orders screen (POS Application)

Figure 75 List orders screen (POS Application)

Table 45 List orders screen UI description (POS Application)

1 Back button Button About the menu screen

3 Time Time That time to book the table

5 Pay Button Go to the payment screen

Button Go to invoice details interface

7 Paid Button Go to the paid screen

5.22 Order details screen (POS Application)

Figure 76 Order details screen (POS Application)

Table 46 Order details screen UI description (POS Application)

1 Move table Button Switching tables

5 Voucher Number Selected discount code

7 Edit food Button Return to the menu screen

8 Complete Button Check completed to pay

10 Add Food Button Go to menu screen to choose dish

Figure 77 Payment screen (POS Application)

Table 47 Payment screen UI description (POS Application)

1 Enter money Input Enter the amount to be paid by the customer

2 Money pick Button Choose the available money denomination

Button Choose cash payment method

Button Choose payment method Zalo pay

Button Click to search for customer tags

10 Payments Number The amount the customer needs to pay

Number Amount paid by customer

14 Close Button Return to the menu screen

15 Pay the bill Button Payment is successful and returns to the menu screen

SYSTEM IMPLEMENTATION

Software development environment

+ Run with Eclipse server background

+ Using Swagger to check APIs

+ Hosting using Google Computer Engine

Source code management

- Any source code is managed by Github

- Github management tool is sourcetree and github desktop

- Link: https://github.com/lehongdanh99/POS-Coffee

TESTING AND EVALUATION

Availability backend

- Check API: “http://34.126.139.165:8080/swagger-ui.html#/drink-cake-controller” to get all table:

Test Case

Created By NT-Đức Reviewed By LH-

NT-Đức Date Tested June 15,

Test Case (Pass/Fail/No t Executed)

1 Open web admin 1 User name: employee01

Actual Results Pass / Fail / Not executed / Suspended

1 Click on username text form field and type username: employee01

2 Click on password text form field and type password:

“123456” show in the screen, but invisible

Table 49 Test case login Website

Test Case ID POS_02 Test Case

1 Open Website admin 1 User name: employee01

1 Click on user name text form field and type username: employee01

System shows an alert “user name or password is incorrect”

4.2.3 Test case find food Website

Table 50 Test case find food Website

Created By NT-Đức Reviewed

1 Open select Food management on the website

1 Enter the search box: Cà phê sữa

1 Click on search box form field and type product name: cà phê sữa

“cà phê sữa” show in the screen

The system displays the results of the dish on the screen

4.2.4 Test case find food Website

Table 51 Test case find food Website

Created By NT-Đức Reviewed

1 Open select Food management on the website

1 Click on search box form field and type product name:111

Do not display search results on the screen

4.2.5 Test case Add Employee Website

Table 52 Test case Add Employee Website

1 Open the employee add page

1 Click on name text form field and type name: ngo tri duc

“ngo tri duc” show in the screen

2 Select the combobox select: Admin

“Admin” show in the screen

3 Click on the calendar to choose the date: April 3,

“April 3, 1999” show in the screen

4 Click on phone text form field and type

5 Click on picture form field and chose picture

Show picture in the screen

6 Click on user name text form field and type username: employee3

“employee3” show in the screen

The system added successfully and returned screen employee

4.2.6 Test case login POS Application

Table 53 Test case login POS Application

Test Case (Pass/Fail/Not Executed)

1 Click username text form field and type username: employee01

2 Tap on password text form field and type password:

Vietnamese language appears on the screen

Table 54 Test case Order Food

Test case add food/drink to the order

NT-Đức Reviewed By LH-Danh Version 1.0

1 Search for food on the screen

Food is displayed on the screen

2 Click to add food with the plus sign

3 Choose the size of the comment ice line for the food

Display your choice of size, sweetness, coldness, and quantity of food on the screen

4 Click the button to add food

Display the selected dish on the initial menu order screen

Display the list of tables on the floors

6 Select an available table and confirm

Successful table reservation returns to the menu screen

7 Click to book a table in the menu screen

Move screen to order information

Success and return to the menu screen

Table 55 Test case Payment Invoice (use voucher code)

Test case make a payment (use voucher code)

2 Click to complete the invoice

The Payment selection button is displayed

Go to the cash payment page

Display the selected discount code on the screen

A successful payment dialog will appear and return to the menu screen

Table 56 Test case Payment Invoice scenario (don't use voucher code)

Test case make a payment (don't use voucher code)

Test Case (Pass/Fail/Not Executed)

2 Click to complete the invoice

The Payment selection button is displayed

3 Click to pay bill Go to the cash payment page

Evaluation

- Providing APIs enough to use for any features, which have in use case

- Providing some APIs for future planning

- Request and response with the fastest speed

- Frontend have beautiful UI with buttons, icons using the material design

- The main features such as: login/logout, create order, merge/split orders, manage state order/order details with kitchen feature, payment, statistical work stable

- Some features are not completed such as: mange employees, manage products Then, the security is not fucus, it’s vulnerable

CONCLUSION

Conclusion

+ Created database using code first, deploy database on Google Computer Engine, and then connect to backend

+ Built a backend with Controller-Service-Repository architecture

+ Created APIs need to use in project

+ Deployed backend on Google Computer Engine to connect anytime

+ Using WPF to build a POS application

+ Completed main features for a POS application:

+ Deeply understand about the major of POS application

+ Understand about how to build a real application

+ Understand workflow from front-end to backend, from backend to database and vice versa

+ Build a details architecture, which can scalability

+ Understand how MVVM and MVC work.

Advantage

- System architecture is designed reasonably, so request/response between backend and frontend is stable and fast

- Backend is deployed in Google Computer Engine under production service, it helps the backend always in available state

- The application has a management website, which can support users to manage multiple stores/branches.

Disadvantage

- Have not completed enough APIs according to the set goals

- POS Application has not completed, some incomplete features such as: statistics with specific requirement, get favorite food, Zalo pay Sandbox, authorize user…

- Some feature in frontend is not separate Business logic from UI, because we are not use the state management for some features

Our upcoming development strategy focuses on enabling offline functionality for the app, allowing it to sync all data once an internet connection is available Additionally, we will implement a services broker to manage data during offline periods We are also committed to enhancing the app's user interface and incorporating new features to improve overall user experience.

- Expanding more stores/branches management

[1] Spring Introduction Spring Boot [online] Available at: https://spring.io/projects

[2] Spring Boot Architecture [online] Available at: https://www.javatpoint.com/spring-boot-architecture

[3] Wikipedia Docker (software) [online] Available at: https://en.wikipedia.org/wiki/Docker_(software)

[4] Docker Introduction Docker Engine [online] Available at: https://docs.docker.com/engine

[5] Google Cloud Virtual machine instances [online] Available at: https://cloud.google.com/compute/docs/instances

Tiêu đề	Building The Pos Application For Coffee Shop
Tác giả	Lê Hồng Danh, Nguyễn Lê Nguyên Anh, Ngô Trí Đức
Người hướng dẫn	Ph.D Nguyễn Thiên Bảo
Trường học	Ho Chi Minh City University of Technology and Education
Chuyên ngành	Information Technology
Thể loại	Project
Năm xuất bản	2022
Thành phố	Ho Chi Minh City

Định dạng
Số trang	114
Dung lượng	6,93 MB