fu marketplace capstone project

FU Marketplace

1

Nguyen Hoang Long

Hoang Thanh SonTrieu Cong Son

Tran Duc Hieu

Do Hai Dong

SupervisorMr. Nguyen Tat Trung

2

1 Introduction

2 Project Management Plan

3 Software Requirement Specification

4 Software Architectural Design

5 Testing

6 Deployment

7 Lesson Learned

Content

8 Demo – Q&A

3

Introduction

4

Background

5

Background

8001200

Number of lunch servings per day -‐ 9 May 2016

Group FU -‐ Hoà Lạc Cơm Canteen

6

Background

Search system

Order system

Report system

Review system

Shop management

Order management

7

Background

Can not filter shop:• By Dorm (e.g. Dom A, Dom B, Dom C)• By Product Category

Can not search with keyword:• Shop’s name• Seller’s name• Product’s Name• …

8

Background

Comment to buy

Like to confirm

9

Background

10

Background

11

Background

12

Background

13

Background

14

Our Idea

15

Our Idea

16

q Easy shop searching

q Intuitive order management

q Powerful notification system

q Production Ready!

Main Objectives

17

Scope

In scope

q Shop searching and filteringq Shop pageq Order managementq Report bad orderq Shop reviewq Notificationq Shop managementq Shop analyticsq Admin dashboardq Multiple languages support

Out of scope

q Suggestionq Fully functional layout for mobile browserq Native mobile appq Payment systemq Chat systemq Feedback for website systemq Looking-for-shipper systemq Inventory Managementq Optimal shop ranking

18

System Proposal

19

Project Management Plan

20

Iterative and Incremental Software Process Model

Software Process Model

21

• Time: 8 hours / day, 5 days / week

• Location: Room C203, FPT University Hoa Lac

• Communication:

• Supervisor meeting: Once a week

• Teambuilding: Once a month

Teamwork

22

Project Planning

23

Risk ManagementName Prevention Correction Status

Internet interruptions

All developers have to set up the isolated development environment and have an offline copy of the documentation. Using various online communication tools and creating face-to-face meeting at any possible time.

Always make sure that there are alternative ways to connect to the internet, such as: using VPN or 3G.

Closed

Illness or absence of team members

Member has to notice to the team about absence period and the plan of how to keep up with the work process.

Ensure that the absence of a member won’t affect others and always have plans to deal with this problem.

Closed

Business problemAny ideas are welcome but members have to discuss with others and always focus on the reality and possibility.

Make sure the business logic of any ideas is carefully analyzed. Closed

Requirement changedTeam members should carefully analyze and define requirements. Each new requirement has to be reviewed by all team members and supervisor.

If there is a “must be changed” requirement, all team members must join the meeting to decide whether it should be implemented or not.

Closed

MiscommunicationEverything has to be documented. Any team member has to attempt to express his/her opinion clearly and carefully.

Make sure any miscommunication has to be resolved. Closed

New technologyChoosing technology based on member’s qualification. All team members must nurture by self-study.

When someone chooses a new technology, he/she has to explain to all team members about the decision.

Closed

24

Project Tools

Docker Draw.io Pivotal Tracker WebStorm2016.2.2

GitLab Astah Prov7.0.0

Google Chromev52

Microsoft Office2016 Postman

Visual Studio Code v1.3.1

25

Technologies

NodeJS SequelizeJS v3 PostgreSQL v9.5Elasticsearchv2.3.4

MailgunReactJS v15.1.0

Redis v2.8.9

Docker Amazon S3Redux v3.5.2

26

RequirementSpecification

27

Use Case Diagram

User

Seller

Administrator

28

User

Sign in with Google account

View shop feed

Search shop

Filter shop

View shop

Place order

View orders

Cancel an order

View reject reason of an order

Review shop

29

User


View shop feed

Search shop

Filter shop

View shop

Place order

View orders

Cancel an order


Review shop

30

User


View shop feed

Search shop

Filter shop

View shop

Place order

View orders

Cancel an order


Review shop

31

User


View shop feed

Search shop

Filter shop

View shop

Place order

View orders

Cancel an order


Review shop

32

User


View shop feed

Search shop

Filter shop

View shop

Place order

View orders

Cancel an order


Review shop

33

User


View shop feed

Search shop

Filter shop

View shop

Place order

View orders

Cancel an order


Review shop

34

User


View shop feed

Search shop

Filter shop

View shop

Place order

View orders

Cancel an order


Review shop

35

User


View shop feed

Search shop

Filter shop

View shop

Place order

View orders

Cancel an order


Review shop

36

User


View shop feed

Search shop

Filter shop

View shop

Place order

View orders

Cancel an order


Review shop

37

User


View shop feed

Search shop

Filter shop

View shop

Place order

View orders

Cancel an order


Review shop

38

User


View shop feed

Search shop

Filter shop

View shop

Place order

View orders

Cancel an order

Review shop


39

User

Open a new ticket

View all submitted tickets

View a ticket’s detail

Close a ticket

Reopen a ticket

Update account information

Request to become seller

Change language interface

Sign out

View notification

40

User

Open a new ticket



Close a ticket

Reopen a ticket




Sign out

View notification

41

User

Open a new ticket



Close a ticket

Reopen a ticket




Sign out

View notification

42

User

Open a new ticket



Close a ticket

Reopen a ticket




Sign out

View notification

43

User

Open a new ticket



Close a ticket

Reopen a ticket




Sign out

View notification

44

User

Open a new ticket



Close a ticket

Reopen a ticket




Sign out

View notification

45

User

Open a new ticket



Close a ticket

Reopen a ticket




Sign out

View notification

46

User

Open a new ticket



Close a ticket

Reopen a ticket




Sign out

View notification

47

User

Open a new ticket



Close a ticket

Reopen a ticket




Sign out

View notification

48

Seller

View own shop dashboard

Update shop information

Update shop opening status

Update shop ship places

Change shop avatar

Change shop cover

Add item to shop

Delete an item

Update an item information

Update an item sale status

49

Seller





Change shop avatar

Change shop cover

Add item to shop

Delete an item



50

Seller





Change shop avatar

Change shop cover

Add item to shop


Delete an item


51

Seller





Change shop avatar

Change shop cover

Add item to shop


Delete an item


52

Seller





Change shop avatar

Change shop cover

Add item to shop


Delete an item


53

Seller

View active orders

View all orders

Accept an order

Start shipping an order

Finish an order

View shop statistics

Reject an order

Abort an order

54

Seller

View active orders

View all orders

Accept an order


Finish an order


Reject an order

Abort an order

55

Seller

View active orders

View all orders

Accept an order

Reject an order


Abort an order

Finish an order


56

Seller

View active orders

View all orders

Accept an order

Reject an order


Abort an order

Finish an order


57

Seller

View active orders

View all orders

Accept an order

Reject an order


Abort an order

Finish an order


58

Seller

View active orders

View all orders

Accept an order


Finish an order


Reject an order

Abort an order

59

Administrator

Sign in

Sign out

Change password


Update user information

Update user role

Ban a user

Remove ban from a user

View all users

60

Administrator

Sign in

Sign out

Change password



Update user role

Ban a user


View all users

61

Administrator

Sign in

Sign out

Change password



Update user role

Ban a user


View all users

62

Administrator

Sign in

Sign out

Change password



Update user role

Ban a user


View all users

63

Administrator

View all shops

Update shop contact information


Update shop public status

Create a new promotion campaign

Ban shop

Remove ban from shop


Update shop avatar

Update shop cover

64

Administrator

View all shops





Ban shop



Update shop avatar

Update shop cover

65

Administrator

View all shops





Ban shop



Update shop avatar

Update shop cover

66

Administrator

View all shop promotion campaigns

Update a shop promotion campaign

View all shop opening requests

Accept shop opening request

Reject shop opening request

Close a ticket

View all tickets

Start investigating a ticket

67

Administrator






Close a ticket

View all tickets


68

Administrator






Close a ticket

View all tickets


69

Administrator






Close a ticket

View all tickets


70

Administrator






Close a ticket

View all tickets


71

Administrator






Close a ticket

View all tickets


72

Usability

Performance

• Fully request restricted by token

• All requests are encrypted by HTTPS

Non-functional Requirement

Scalability

Extensibility

Security

73

• Strictly follow coding principles and use ESLint to verify code convention

• Automation test including Unit Tests and Integration Tests

Non-functional RequirementSecurity

Usability

Performance

Scalability

ExtensibilityExtensibility

74

• Apply Microservices architecture• Using HAProxy for load balancer and proxy server• Using ELK Stack to monitor and alert service


Usability

Performance

Scalability

Extensibility

Scalability

75

• Implement Redis to cache frequently use requests

• Implement background job for external requests, heavy processing requests

• Create indexes for PostgreSQL


Usability

Performance

Scalability

Extensibility

Performance

76

• Most of actions can be accomplished within 3 clicks.

• Provide notification-pushing system to help buyer/seller aware about his order’s status changes even he/she close web application

• The shops feed should always be updated by using real-time update over WebSocket


Usability

Performance

Scalability

Extensibility

Usability

77

Architectural Design

78

Overall system

FUM Web Frontend FUM Backend System

RESTApi

Socket.IO

79

FUM Frontend DesignToken based authentication

POST /loginusername=…&password=…

HTTP 200Token: JWT (Bearer Token)

GET /api/v1/users/meX-Access-Token: Bearer JWT (Bearer Token)

HTTP 200{ id: 2, fullName: “Tran DucHieu” }

80

FUM Frontend DesignSingle page application

A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience similar to a desktop application.

Technical approaches

81

FUM Frontend DesignRedux architecture

o Redux architecture revolves around a strict

unidirectional data flow.

o All data in an application follows the same

lifecycle pattern, making app logic more

predictable and easier to understand.

o Three fundamental principles:o Single source of trutho State is read-onlyo Changes are made with pure functions

Store

View Action

82

FUM Frontend Design

Use Case

83

FUM Backend Design

Use Case

Microservices architecture• Redis for caching• Background jobs service• Elasticsearch for searching, filtering• Socket.IO for real-time message

transporting• Amazon S3 for storing images• OneSignal for Website Push• Mailgun for sending email

84

Use Case

Database Design – RDB Diagram

85

Use Case

Database Design – Elasticsearchanalyzer:

folding:

tokenizer: "standard",

filter:["lowercase", "asciifolding"]

: Auto created field

86

Database Design – Elasticsearch

Now this shop can be search by:

-‐ bún chả

-‐ bun cha

-‐ bún cha

-‐ bun chả

87

Database Synchronization

88

Use Case

Why two databases?

Shop Feed data modeling on SQL Database

89

Use Case

Why two databases?• Join 6 tables to get summary information of a

shop.• Do full-text search across many fields of

different tables:• Shop’s name• Shop’s description• Items’ name• Items’ description• Seller’s name

• Filter shop by at least 2 fields of 2 tables: ShipPlace and Items’ Category

• Sort shops by some fields: opening status, average rating,…

è Difficult to accomplish and very low efficiency to do on Relational Database System Shop Feed data modeling on SQL Database

90

Shop search query• Easily to search across multiple fields with

multi_match

• Rank the result with individual field boost

• Auto correction with fuzziness query

• Calculate aggregation (count the number of shops in each category)

name: 2name.folded: 1description: 2description.foldedseller.fullName: 2seller.fullName.folded: 1items.name: 10items.name.folded: 5items.description: 10items.description.folded: 5

91

Background Job Processing

With Background JobWithout Background Job

92

Class diagram

Use case User Place Order 93

Sequence diagram

Use case User Place Order 94

Testing

95

Identify Requirements

Test Planning

Design Test Case

Test Excuting

Test Result Report

Bug Fixing

Regression Testing

Acceptance Testing

Testing Life – Cycle

96

Testing Type

59Use Case API Testing

Integration Testing

Acceptance Testing

Performance Benchmark

Unit Testing

97

FUM - Backend FUM-Front-end and whole project

§ Lack of UI § UI

§ Unit testing and API testing § Integration testing

§ Business logic§ Database constraint

§ User Experience§ User Interface

§ Backend Development team § Tester

§ Automation testing § Manual testing

Test Strategy

98

Testing Tools

Chrome and Chrome Developer Tools: Used for testsize of web page, size of component on page andview log or inspect element

Pivotal Tracker: Manage bug and task (www.pivotaltracker.com).

Microsoft Excel: Manage test case

99

Testing Environment

59Use Case

Software: Google Chrome 52.0

Hardware:

- Windows 7 Professional 32-bit, Service Pack 1

- Intel® Core™ i3

- Install memory (RAM) : 4.00GB

100

Testing Tools - Backend

Mocha: JavaScript test framework running on Node.js andin the browser

Sinon.js: standalone test spies, stubs and mocks forJavaScript, to assert result at variable level.

Chaijs: Chai is a BDD / TDD assertion library for node, to help assertion result in a test

Artillery: a modern load-testing framework, support HTTPS,WebSockets, Scriptable, HTML reports.

101

Testing Environment - Backend

59Use Case

Software: Chaijs v3.5.0 Mocha v2.4.5

Sinon v1.17.4 Artillery v1.5.0

Hardware:

- Ubuntu 14.04 64-bit

- Inter® Core™ i3

- Install memory (RAM) : 8.00GB

102

Testing Model

59Use Case

103

Testing Model – Backend

BDD: Behavior-Driven developmentTDD: Test-Driven development

104

Test Case Guideline

59Use Case

105

Test Case Sample

59Use Case

Normal Flow1. Login to FUM System.2. Click to “Account”.3. Change phone number4. Click to “Save” button

Alternative Flow1. Login to FUM System.2. Click to “Account”.3. Click to button

106

Test Case Guideline - Backend

59Use Case

107

Test Case Sample - Backend

59Use Case

108

Benchmark Scenario

59Use Case

109

Log bugs process

59Use Case

1. Tester or developer detects defect

à Log bug on PivotalTracker à assign to related developer.

2. Developer START fix bug

àChange status of bug to DELIVERED and assign to tester again

3. Tester check bug again

• If bug fixed, requester ACCEPT bug

• If bug didn’t fixed, REJECT bug and re-assign to developer, developer RESTART fix bug and flow

to step 2

110

Log bugs process

59Use Case

111

Test Report

59Use Case

Test Case Stage 1 Stage 2-1 Stage 2-2

Final Pass Fail Pass Fail Pass Fail

Client

User 70 16 158 6 164 0 164

Seller 65 7 90 21 111 0 111

Admin 140 8 149 10 159 0 159

GUI Test Case 12 2 12 0 12 0 12

Total all Test Case 287 129 409 41 446 0 446

112

Test Report - Automation test

59Use Case

Test casePhase 1 Phase 2

FinalPass Fail Pass Fail

API Test - User 46 0 93 0 93API Test - Admin 52 0 67 0 67API Test - Seller 58 0 91 0 91Unit test - Library 0 0 8 0 8Unit test - Middleware 6 0 6 0 6Unit test - Model 43 0 87 0 97Total all test case 205 0 352 0 352

Coverage

Statements 85.32% 86.99% 86.99%Branches 73.12% 74.38% 74.38%Functions 96.13% 94.32% 94.32%Lines 90.34% 87.55% 87.55%

113

Automation Test Coverage Report

59Use Case

114

Benchmark Report

59Use Case

115

Deployment

116

Deployment

Use Case

Continuous Integration (CI) + Continuous Delivery (CD)

117

Deployment

59Use Case

118

Lesson Learned

119

Teamwork Management Skill

Requirements Analysis New Technology

120

DEMO & QA

121

fu marketplace capstone project

Engineering