Summary

Jarak Self Service is a website that allows customers to order and pay for their food and beverages without having to make queues. This website is built using NextJS and TailwindCSS for the frontend, and Laravel for the backend. The website is deployed on Vercel and can be accessed on here..

Design Process

The design process of the system consist of the following steps:

1. Bussiness Process Identification The first step is to identify the bussiness process of the system. This step is done by interviewing the client and asking them about their bussiness process. The bussiness process of the system is shown in the following diagram:

Conventional Method

Within the conventional method, the customer will order their food and beverages by queuing in front of the cashier. After the order is made, the cashier will give the customer a confirmation that contains the order details and the total price. The customer will then pay the order to the cashier. After the payment is made, the cashier will give the customer a receipt that contains the order details and the change. The customer will then give the receipt to the barista and wait for their order to be made. After the order is made, the barista will give the order to the customer.

The conventional method has several problems.

• First, the customer has to queue in front of the cashier to order their food and beverages.
• Second, non-cashless payment require longer time to process to count the ammount of order and giving change.

To solve these problems, the system will be designed to allow the customer to order and pay for their food and beverages without having to make queues. The system will also be designed to allow the customer to order and pay for their food and beverages using cashless payment method using payment gateway provided by TriPay.

Self Service Method

Within the self service method, the customer will order their food and beverages using the website. After the order is made, the customer will pay the order using cashless payment method. After the payment is made, the customer will give the receipt to the barista and wait for their order to be made. After the order is made, the barista will give the order to the customer.

The self service method has several advantages compared to the conventional method, such as :

• The Menu can be accessed by the customer using their own device, giving more visually pleasing experience.
• Customer does not have to queue in front of the cashier to order their food and beverages.
• Payment process is faster because the customer can pay using cashless payment method.

2. System Design

After the bussiness process is identified, the next step is to design the system. The system is designed using UML Diagrams. The UML Diagrams that are used to design the system are Use Case Diagram, Activity Diagram, and Class Diagram. The following diagram shows the architecture design of the system:

On above diagram, the system is divided into 3 layers, which are :

1. E-Commerce Website
   The E-Commerce Website layer is the layer that is used by the customer to order and pay for their food and beverages. This layer is built using NextJS and TailwindCSS.

2. Dashboard
   The Dashboard layer is the layer that is used by the cashier to manage the order and payment. This layer is built using Laravel. This layer is also used as an API Gateway delivering several services such as connecting the E-Commerce Website layer and the Payment Gateway layer, and delivering menu data to the E-Commerce Website layer.

3. Payment Gateway
   The Payment Gateway layer is the layer that is used to process the payment. This layer is an external service provided by TriPay.

Result

E-Commerce UI

Dashboard UI

The staging website for e-commerce website is deployed on Vercel and can be accessed on here.