1 of 54

ADES CA2 Presentation

​

Group Members:

​

Titus, Hagen, Lincoln, Yee Chen, Bryan Yang

2 of 54

Table of Contents

01

02

03

Introduction

Objective

04

Method and execution

Demo

05

Analysis of result

3 of 54

Introduction

4 of 54

Come up with a POS system which not only having good user interface but also has the relevant functionalities to operate the whole system, bringing satisfaction for both customers and staffs.

​

Objective of Project

5 of 54

Database Design

6 of 54

Objective

7 of 54

Implemented Changes

Browsing Feature for POP System

Discount Feature for POS System

Cart Feature for POP System

Redemption feature for Membership System

Fuzzy Search Feature for POP System (FuseJS)

Advertisement Feature for Membership System

Order List Feature for POS System

Profile Feature for Membership System

QR Code Payment for POS System

Tiers Feature for Membership System

Stripe Payment Method for POS System

Games Feature for POP System

8 of 54

  • In terms of whether it will affect the overall system

​

  • Amount of work required to do

​

  • What was nice to have but not that important

Choosing & Priority of features

9 of 54

  • QR Code (Hagen)
  • StripeJS (Hagen)
  • Fuzzy Search (Bryan Yang)
  • Jump Game (Yee Chen)
  • Progress Bar (Lincoln)
  • Regular Expression Validation (Lincoln)
  • Refresh Token (Titus)
  • Advertisement Algorithm (Titus)

Advanced Features

10 of 54

Stripe is one of the leading payment gateways, and it allows businesses and individuals to accept payment through the use of their robust APIs and tools.

What is Stripejs?

11 of 54

A . env file or dotenv file is a simple text configuration file for controlling your Applications environment constants.

​

This allows different users to use different Stripe accounts without changing the code.

Configuring Stripejs

12 of 54

13 of 54

Configuring Stripejs

14 of 54

API Keys

​

Configuring Stripejs

15 of 54

Integrating Stripejs

1. Import StripeCheckout package

​

​

​

​

2. Creating a function to interact with stripe API

​

​

​

​

3. Clear localstorage after response is received

16 of 54

17 of 54

Configuring Stripejs

18 of 54

Payment Flow

19 of 54

  • Provides lightweight/fuzzy search capabilities

​

  • Has built in functions to allow tweaking of returned data

What is Fuse.JS

20 of 54

Implementing Fuse.JS

  • Import the library after installing (npm i fuse.js)
  • Call the api and set results to a state property

21 of 54

Implementing Fuse.JS

  • Now using the state property, we will announce the keys which will be used as the search parameters

​

  • ‘includeScore’ is a built in function that calculates the likeness of the searched parameter to the returned results.

​

  • On a scale of 0-1 with 0 being exactly the same and 1 being completely different

22 of 54

Implementing Fuse.JS

  • Utilising includeScore to restrict the data returned

​

  • Comparing returned results when we typed “burger”

23 of 54

Jump Game

24 of 54

How User Navigate?

25 of 54

Code Structure

Allow user to click on the page

26 of 54

Code Structure

“Game Over” Position

Game Continues

27 of 54

Progress Bar

28 of 54

Validation

29 of 54

  • A special token that is saved within client application

​

  • Doesn’t require user to re-login every time the page refreshes

​

Refresh Token

30 of 54

31 of 54

Using in-memory to secure access token

    • Stored in the client’s device
    • Does not persist data
    • Most secure

32 of 54

httpOnly is set to true to secure refresh token

​

    • Prevent XSS exploit by gaining access to the session cookie

33 of 54

Advertisement Algorithm

  • Displays a specific advertisement every time the member login

​

  • Algorithm is calculated by the number of times a particular category product is bought

34 of 54

35 of 54

Product_Order Table

Category Table

36 of 54

Retrieving quantity of products bought by the member based on Category

37 of 54

Retrieving the Category with the most products bought

38 of 54

  • Market Research (Lincoln, Titus, Hagen)
  • Refresh Token (Titus)
  • SweetAlert (Titus)
  • StripeJS (Hagen)
  • Rendering Props in React (Hagen)
  • FuseJS (Bryan)
  • IdleTimer (Bryan)
  • In-App Game (Yee Chen)
  • ESLint (Everyone)

Self-directed learning

39 of 54

Market Research

Strengths

​

Orderlist

Qr Code Ordering

Table Management System

Food Delivery Integration

Reservation

Customer Management

Discount System

Dashboard

Weaknesses

​

The service is expensive as compared to other POS systems

Opportunities

Discount System

Threats

High cost of the acquiring system may hurt potential sales

​

Strengths

​

Inventory Management

Table Management System

Food Delivery Integration

Business Dashboard

Various Payment Integration

Loyalty System

Ordering System

Online Ordering System

Weaknesses

​

Does not have a system to manage the employees

Opportunities

Ordering System

Loyalty System

Various Payment Integration

Threats

Lose out to competitors that offer loyalty programmes that help with customer retention

​

40 of 54

SweetAlert

npm install sweetalert 2 and set the relevant configurations

41 of 54

import Toast and call Toast.fire

42 of 54

Rendering props in React

43 of 54

Method & Execution

44 of 54

Integration of Code

45 of 54

Eslint

Ensure Code Quality

46 of 54

Ensure Correctness

47 of 54

Demo

48 of 54

Analysis of results

49 of 54

GitHub - Create multiple branches before merging after completion -> 1 branch for 1 feature

Improvement from CA1

50 of 54

Using SweetAlert message instead of just regular alert

51 of 54

POS ordering page displaying of items in rows of 4 instead of a single column

52 of 54

The main challenge I encountered during CA2 was that when writing functions in React and JavaScript I realized that they were not very reusable and efficient hence I had to keep rewriting code and it made my codebase very long and redundant in CA1, with the help of my teammates and some self-directed learning on YouTube I manage to make my code more reusable and efficient and discover the power of React in CA2, hence with that new knowledge I am able to apply this by passing data into child components and using that data to dynamically query the database through props. I also learnt different payment systems such as stripejs and how the web server interacts with the backend using stripe’s API.

Lessons learnt during CA2 (Individual)

53 of 54

Lessons learnt during CA2 (Team)

54 of 54

Things to do differently for FYP