Mẫu báo cáo đồ án chuyên ngành, khóa luận tốt nghiệp công nghệ thông tin

Đồ án chuyên ngành với đề tài Xây dựng website thương mại điện tử sử dụng công nghệ Docker - Implements Ecommerce system in Docker (IESD) được thực hiện dựa trên các công nghệ và framework trong việc thiết kế các ứng dụng web Single page Application (SPA) giúp nâng cao trải nghiệm người dùng. Thương mại điện tử đang ngày càng phát triển, nhu cầu mua sắm online của người dùng cũng tăng cao. Bên cạnh đó, việc mua sắm online cũng đặt ra nhiều vấn đề cho cả người bán lẫn người mua. Đối với bên bán hàng, việc quản lí và phân chia đơn hàng để giao rất tốn thời gian và công sức. Còn người mua thì có thể phải chờ đợi đơn hàng của mình được giao quá lâu dẫn đến trải nghiệm người dùng không tốt. Chính điều này là lí do để nhóm chúng tôi đưa ra ý tưởng xây dựng một website thương mại điện tử có tích hợp việc gom nhóm đơn hàng để hỗ trợ việc vận chuyển được nhanh hơn trên nền tảng Docker. Giải pháp mà nhóm đưa ra là sử dụng các thuật toán K-mean để gom nhóm các đơn hàng nằm trong một cụm lại với nhau và đưa ra đường đi ngắn nhất. Các công nghệ, kĩ thuật và thư viện được áp dụng trong web là Sails.js, MongoDB, Angular, Docker, REST, Firebase và Google API vào xây dựng và phát triển. Website có thiết kế là một trang web bán điện thoại có các chức năng như quản lý tài khoản, quản lý đơn hàng, danh mục sản phẩm, thanh toán trực tuyến, quản lý admin, …. Và đặc biệt là tính năng gom nhóm đơn hàng.

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA MẠNG MÁY TÍNH VÀ TRUYỀN THÔNG

Sinh viên thực hiện:

Trần Trung Tiến - 15520891 Nguyễn Hoài Thanh Ngọc - 15520915 Nghiêm Quang Trung - 15520943 Phạm Nhật Trường - 15520953

Thành phố Hồ Chí Minh, Tháng 6/2019

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA MẠNG MÁY TÍNH VÀ TRUYỀN THÔNG

Giảng viên hướng dẫn: ThS.Thái Huy Tân

Sinh viên thực hiện:

Trần Trung Tiến - 15520891

Nguyễn Hoài Thanh Ngọc - 15520915 Nghiêm Quang Trung - 15520943 Phạm Nhật Trường - 15520953

Thành phố Hồ Chí Minh, Tháng 6/2019

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Lập - Tự Do - Hạnh Phúc

Nghiêm Quang Trung - 15520943

Nguyễn Hoài Thanh Ngọc - 15520915

4 Về thái độ làm việc của sinh viên :

Đánh giá chung:

Trần Trung Tiến : /10 (Ký tên và ghi rõ họ tên) Nguyễn Hoài Thanh Ngọc : /10

Phạm Nhật Trường : /10

Nghiêm Quang Trung : /10

LỜI CẢM ƠN

Đầu tiên, với tất cả lòng biết ơn và sự kính trọng, chúng tôi xin trân trọng cảm ơn

quý thầy, cô khoa Mạng máy tính và Truyền thông, cũng như các thầy, cô đang công tác

tại trường Đại học Công nghệ Thông tin – ĐHQG-HCM đã dùng tất cả tri thức và tâm

huyết để truyền đạt những kiến thức, kinh nghiệm quý báu cho chúng tôi trong suốt quá

trình học tập và rèn luyện tại ngôi trường này

Đặc biệt, chúng tôi xin gửi lời tri ân chân thành và sâu sắc đến Ths Thái Huy

Tân – người thầy hướng dẫn đã hết sức tận tâm, nhiệt tình hỗ trợ và hết lòng giúp đỡ

cho nhóm chúng tôi trong suốt quá trình thực hiện khóa luận tốt nghiệp Những định

hướng, bổ sung, góp ý của thầy là nguồn cảm hứng và nền tảng cơ sở góp phần giúp

chúng tôi có những nghiên cứu đúng đắn, đạt được kết quả tốt nhất trong việc xây

dựng, phát triển ứng dụng và hoàn thiện đồ án chuyên ngành

Tiếp theo, chúng tôi xin được phép gửi lời cảm ơn đặc biệt đến gia đình và người

thân Gia đình luôn là chỗ dựa tinh thần vững chắc, là nguồn động lực lớn giúp chúng tôi

vượt qua mọi khó khăn, phấn đấu hoàn thành tốt đồ án chuyên ngành này

Cuối cùng, nhóm chúng tôi xin gửi lời cảm ơn đến các anh, chị và các bạn sinh

viên trường Đại học Công nghệ Thông tin đã nhiệt tình hỗ trợ, chia sẻ ý kiến, góp ý giúp

chúng tôi trong suốt thời gian thực hiện khóa luận

Một lần nữa, chúng tôi xin chân thành cảm ơn và xin gửi lời chúc sức khỏe đến

quý thầy, cô Kính chúc khoa Mạng máy tính và Truyền thông ngày càng phát triển và

thành công trong sự nghiệp “chèo đò” cao quý

TP Hồ Chí Minh, ngày 10 tháng 6 năm 2019 Nhóm tác giả

TÓM TẮT ĐỒ ÁN

Đồ án chuyên ngành với đề tài Xây dựng website thương mại điện tử sử dụng công nghệ Docker - Implements Ecommerce system in Docker (IESD) được thực hiện dựa trên các công nghệ và framework trong việc thiết kế các ứng dụng web Single page Application (SPA) giúp nâng cao trải nghiệm người dùng

Thương mại điện tử đang ngày càng phát triển, nhu cầu mua sắm online của người dùng cũng tăng cao Bên cạnh đó, việc mua sắm online cũng đặt ra nhiều vấn đề cho cả người bán lẫn người mua Đối với bên bán hàng, việc quản lí và phân chia đơn hàng để giao rất tốn thời gian và công sức Còn người mua thì có thể phải chờ đợi đơn hàng của mình được giao quá lâu dẫn đến trải nghiệm người dùng không tốt Chính điều này là lí do để nhóm chúng tôi đưa ra ý tưởng xây dựng một website thương mại điện tử có tích hợp việc gom nhóm đơn hàng để hỗ trợ việc vận chuyển được nhanh hơn trên nền tảng Docker

Giải pháp mà nhóm đưa ra là sử dụng các thuật toán K-mean để gom nhóm các đơn hàng nằm trong một cụm lại với nhau và đưa ra đường đi ngắn nhất Các công nghệ, kĩ thuật và thư viện được áp dụng trong web là Sails.js, MongoDB, Angular, Docker, REST, Firebase và Google API vào xây dựng và phát triển

Website có thiết kế là một trang web bán điện thoại có các chức năng như quản

lý tài khoản, quản lý đơn hàng, danh mục sản phẩm, thanh toán trực tuyến, quản lý admin, … Và đặc biệt là tính năng gom nhóm đơn hàng

TP Hồ Chí Minh, ngày 10 tháng 6 năm 2019

Nhóm tác giả

MỤC LỤC

1.3 Tìm hiểu các ứng dụng hiện nay 16

1.4 Mục tiêu của đề tài 17

1.5 Đối tượng và phạm vi nghiên cứu 18

1.5.1 Đối tượng nghiên cứu 18

2.1.1 Giới thiệu về Sails.js [1] 20

2.1.2 Tại sao nên sử dụng Sails.js 21

2.1.3 Áp dụng Sails.js vào xây dựng trang web TWEML 22

2.2.1 Giới thiệu về MongoDB 23

2.2.2 Tại sao nên sử dụng mongoDB [3] 24

2.2.3 Áp dụng mongoDB vào xây dựng trang web TWEML 24

2.3.1 Giới thiệu về Angular 25

2.3.2 Tại sao nên sử dụng Angular 26

2.3.3 Áp dụng Angular vào xây dựng trang web TWEML 27

2.4.1 Giới thiệu về Docker 27

2.4.2 Tại sao nên sử dụng Docker 28

2.4.3 Áp dụng Docker vào xây dựng trang web TWEML 29

2.5.1 Giới thiệu về Google API 29

2.5.2 Tại sao nên sử dụng Google Api 30

2.6.1 Giới thiệu về Firebase Storage 31

2.6.2 Tại sao nên sử dụng Firebase Storage 32

2.6.3 Áp dụng Firebase vào xây dựng trang web TWEML 33

2.7.1 Giới thiệu về REST 33

2.7.2 Tại sao nên sử dụng REST 34

2.7.3 Áp dụng REST vào xây dựng web TWEML 35

3.3.2.1.Chức năng Đăng ký, đăng nhập, quên mật khẩu, đăng xuất 45

3.3.2.2 Các chức năng trong trang cá nhân 47

3.3.2.3 Các chức năng xem thông tin sản phẩm 49

3.3.2.4 Chức năng đặt hàng và thanh toán sản phẩm 50

3.3.2.5 Chức năng tìm kiếm sản phẩm 52

3.3.2.6 Chức năng quản lý sản phẩm 53

3.3.2.7 Chức năng quản lý người dùng 55

3.3.2.8 Chức năng quản lý danh mục sản phẩm 58

3.3.2.9.Chức năng quản lý đơn hàng 60

3.4 Mô hình luồng dữ liệu 62

3.5 Biểu đồ sequence diagram 64

3.5.7 Đăng ký, đăng nhập, reset mật khẩu, đăng xuất 72

3.6 Thiết kế cơ sở dữ liệu 74

4.1 Tổng quan về trang web 86

4.2 Đặc tả giao diện người dùng 86

4.2.1 Giao diện đăng nhập 86

4.2.2 Giao diện đăng ký 90

4.2.3 Giao diện chính của trang web 92

4.2.4 Nội dung trang chủ 93

4.2.5 Nội dung trang hiển thị sản phẩm theo từng loại 94

4.2.6 Thông tin tóm tắt của từng sản phẩm 97

4.2.7 Thông tin chi tiết của sản phẩm 98

4.2.8 Giao diện giỏ hàng 99

4.2.9 Quá trình đặt mua sản phẩm 100

4.2.10 Thông tin tài khoản: 104

4.3 Đặc tả giao diện quản lý hệ thống của admin 108

4.3.1 Thanh thông tin 108

4.3.2 Giao diện dashboard 108

4.3.3 Giao diện quản lý người dùng 110

4.3.3.1 Giao diện danh sách người dùng 110

4.3.3.2 Giao diện thêm người dùng 111

4.3.3.3 Giao diện sửa thông tin người dùng 111

4.3.4 Giao diện quản lý sản phẩm 112

4.3.4.1 Giao diện xem sản phẩm 113

4.3.4.2 Giao diện thêm sản phẩm mới 114

4.3.4.3 Giao diện sửa thông tin sản phẩm 115

4.3.5 Giao diện quản lý đơn hàng 116

4.3.6 Giao diện quản lý loại sản phẩm 119

4.3.7 Giao diện quản lý giao hàng 120

DANH MỤC HÌNH VẼ

Hình 1.1 Ảnh chụp màn hình giao diện trang web Shopee 16 Hình 1.2 Giao diện quản lí đơn hàng của bên vận chuyển nhanh.vn 17 Hình 2.1 Tính năng của Sails.js 21 Hình 2.2 Tính năng của MongoDB 23 Hình 2.3 Tính năng của Angular 26 Hình 2.4 Tính năng của Docker 28 Hình 2.5 Chức năng Google Maps Api 30 Hình 2.6 Lợi ích khi sử dụng Firebase 32 Hình 2.7 Thiết kế của RESTful API 35 Hình 4.1 Giao diện đăng nhập 87 Hình 4.2 Giao diện form đăng nhập 87 Hình 4.3 Thông báo yêu cầu kích hoạt tài khoản 89 Hình 4.4 Giao diện form Forgot Password 90 Hình 4.5 Giao diện Đăng ký 91 Hình 4.6 Giao diện header trái (1) và phải (2) 92 Hình 4.7 Giao diện Footer của trang web 93 Hình 4.8 Sản phẩm được hiển theo từng loại (Điện thoại) 94 Hình 4.9 Danh sách sản phẩm theo loại sản phẩm (Điện thoại) 95 Hình 4.10 Thông tin tóm tắt của sản phẩm 97 Hình 4.11 Thông tin chi tiết sản phẩm 98 Hình 4.12 Đánh giá sản phẩm 98 Hình 4.13 Nội dung giỏ hàng 99 Hình 4.14 Thông tin đơn hàng 101 Hình 4.15 Hình thức giao hàng và thanh toán 102 Hình 4.16 Thông tin khách hàng cần giao hàng 103

Hình 4.17 Thông tin hóa đơn 104

Hình 4.18 Các nút thao tác thay đổi nội dung hiển thị của trang cá nhân 105 Hình 4.19 Thông tin tài khoản 106 Hình 4.20 Danh sách các đơn đặt hàng 107 Hình 4.21 Thanh thông tin 108 Hình 4.22 Các thống kê của hệ thống 109 Hình 4.23 Danh sách hóa đơn mới nhất, top sản phẩm bán chạy 109 Hình 4.24 Giao diện danh sách người dùng 110 Hình 4.25 Giao diện thêm người dùng 111 Hình 4.26 Giao diện sửa đổi thông tin người dùng 112 Hình 4.27 Giao diện xem sản phẩm 113 Hình 4.28 Giao diện thêm sản phẩm 114 Hình 4.29 Giao diện sửa sản phẩm 115 Hình 4.30 Giao diện danh sách ảnh sản phẩm 115 Hình 4.31.a, 4.31.b Bảng thông tin đơn hàng 117 Hình 4.32 Nút thao tác đơn hàng 118 Hình 4.33.a, 4.33.b Thay đổi trạng thái đơn hàng 119 Hình 4.34 Thông tin loại sản phẩm 119 Hình 4.35 Form sửa thông tin loại sản phẩm 120 Hình 4.36 Tuyến đường giao hàng 120

DANH MỤC SƠ ĐỒ

Sơ đồ 3.1 Sơ đồ kiến trúc hệ thống 36

Sơ đồ 3.2.1 phân rã chức năng web bán hàng 37

Sơ đồ 3.2.2 phân rã chức năng web admin 38

Sơ đồ 3.3.1 Mô hình Usecase cho client 39

Sơ đồ 3.3.2 Mô hình Usecase cho ADMIN 40

Sơ đồ 3.4.1 Sơ đồ luồng dữ liệu client 62

Sơ đồ 3.4.2 Sơ đồ luồng dữ liệu admin 63

Sơ đồ 3.5.1 Sơ đồ sequence diagram - chức năng quản lý user 64

Sơ đồ 3.5.2 Sơ đồ sequence diagram - chức năng thanh toán đơn hàng 66

Sơ đồ 3.5.3 Sơ đồ sequence diagram - chức năng quản lý đơn hàng 67

Sơ đồ 3.5.4 Sơ đồ sequence diagram - chức năng quản lý sản phẩm 68

Sơ đồ 3.5.5 Sơ đồ sequence diagram - chức năng thống kê 70

Sơ đồ 3.5.6 Sơ đồ sequence diagram - chức năng tìm kiếm sản phẩm 71

Sơ đồ 3.5.7 Sơ đồ sequence diagram - chức năng đăng ký, đăng nhập, reset mật khẩu, đăng xuất 72

DANH MỤC BẢNG BIỂU

Bảng 3.1 Hiện thực hóa sơ đồ Usecase cho client 40 Bảng 3.2 Hiện thực hóa sơ đồ Usecase cho admin 42 Bảng 3.3 Mô tả chức năng Đăng ký, đăng nhập, quên mật khẩu, đăng xuất 45 Bảng 3.4 Mô tả chức năng trang cá nhân 47 Bảng 3.5 Mô tả chức năng xem thông tin sản phẩm 49 Bảng 3.6 Mô tả chức năng đặt hàng và thanh toán sản phẩm 50 Bảng 3.7 Mô tả chức năng tìm kiếm sản phẩm 52 Bảng 3.8 Mô tả chức năng quản lý sản phẩm của admin 53 Bảng 3.9 Mô tả chức năng quản lý người dùng 55 Bảng 3.10 Mô tả chức năng quản lý danh mục sản phẩm 58 Bảng 3.11 Mô tả chức năng quản lý đơn hàng 60 Bảng 3.12 Cơ sở dữ liệu trong hệ thống 78

DANH MỤC TỪ VIẾT TẮT

STT Từ Viết tắt của

1 TWEML Tien’s Web Machine Learning

2 IESD Implements Ecommerce system in Docker

3 API Application Programming Interface

4 REST Representation State Stranfer

5 SPA Single page Application

MỞ ĐẦU

Trong thời đại công nghệ 4.0, số lượng các ứng dụng, các sản phẩm công nghệ phục vụ con người bùng nổ mạnh mẽ hơn bao giờ hết Đi kèm với đó, nhu cầu của khách hàng về việc mua sắm hàng hóa, vật dụng hay thậm chí là đồ ăn thức uống dù đang ở bất kì đâu ngày một tăng cao Những ngành thuộc lĩnh vực thương mại điện tử đang càng ngày càng mở rộng để cung cấp dịch vụ cho khách hàng một cách hiệu quả nhất

Để cửa hàng của mình được biết đến rộng rãi và được khách hàng tin dùng, một yếu tố cực kì quan trọng đó là nắm bắt ấn tượng ban đầu của khách hàng Tốc độ lan truyền tin tức trên Internet bây giờ có thể ví như tốc độ của một cái chớp mắt, chỉ với một bình luận trong bài viết, hoặc 5 giây quảng cáo khi chúng ta đang xem Youtube, hay chỉ là một cú click chuột đều đã đủ để đưa tên tuổi của cửa hàng vào mắt người dùng Do đó, một trang web chứa đầy đủ thông tin về cửa hàng và thông tin về tất cả các mặt hàng trong kho, là vô cùng cần thiết Nhưng vấn đề đối với đại đa số chủ cửa hàng hiện nay chính là việc quản lý đơn hàng và tạo sản phẩm rất khó khăn

TWEML (Tien’s web machine learning) với giao diện chính là một website bán hàng đơn giản và có đầy đủ các chức năng cơ bản của một website thương mại điện tử hiện nay sẽ cung cấp cái giải pháp cho người bán hàng quản lí hiệu quả hơn và người mua sẽ có trải nghiệm tốt nhất

Với mục tiêu đó, đối tượng TWEML hướng đến không chỉ là các doanh nghiệp lớn, mà còn là những chủ cửa hàng nhỏ lẻ Sự tiện dụng và đơn giản mà TWEML mang lại có thể giúp chủ cửa hàng có thể quản lý và giảm thiểu chi phí giao hàng của mình với quãng đường ngắn nhất

Chương 1 Tổng quan đề tài

1.1 Tên đề tài

TRIỂN KHAI WEBSITE THƯƠNG MẠI ĐIỆN TỬ SỬ DỤNG CÔNG NGHỆ

DOCKER IMPLEMENT ECOMMERCE IN DOCKER

1.2 Đặt vấn đề

Nhu cầu mua sắm là một nhu cầu cấp thiết hàng ngày của con người Tuy nhiên, khi xã hội ngày càng tiến bộ, đời sống vật chất được cải thiện Đồng nghĩa với việc nhu cầu ấy sẽ được nâng lên một mức cao hơn Con người dần quan tâm nhiều hơn vào việc “Mình sẽ mua gì ? “, “Thời gian giao hàng có lâu không”, “Hàng hóa có được đảm bảo không ? “ Đa phần các các trang web bán hàng hiện nay sau khi người dùng lựa chọn sản phẩm, tiến hành đặt hàng, người bán sẽ quản lý được đơn hàng đó và

chuyển hàng cho bên vận chuyển tiếp nhận và sắp xếp lộ trình giao hàng Như vậy vấn

đề ở chỗ chủ cửa hàng phải phụ thuộc quá nhiều vào bên thứ ba, làm tăng chi phí vận chuyển, giảm đi lợi nhuận Khách hàng có thể phải chờ đợi lâu hơn dẫn đến trải nghiệm

và đánh giá không tốt về cửa hàng

Hãy cùng lướt qua các trang thương mại điện tử lớn ở nước ta như Tiki, Lazada, Shopee, Đây đều là những ông lớn đã quá quen thuộc với mọi người, tuy nhiên đây đều là những công ty, tập đoàn lớn họ có vốn và công nghệ lớn mạnh để quản lí mọi giai đoạn từ đơn hàng, sản phẩm cho đến vận chuyển Còn đối với những trang web bán hàng cho các cá nhân và công ty nhỏ, việc phải quản lí đơn hàng ,chăm sóc khách hàng và quản lí việc vận chuyển sao cho nhanh nhất và tiết kiệm nhất là một điều rất khó khăn

Những yêu cầu đó đã đưa nhóm chúng tôi đến ý tưởng xây dựng một trang web bán hàng dựa trên các nền tảng công nghệ mới tiện lợi nhất, giúp giải quyết các vấn đề

phát sinh trong việc quản lí và hỗ trợ người bán lẫn người mua những trải nghiệm tiện

lợi nhất Việc cho người quản lí có thể xây dựng lộ trình đường đi vận chuyển cho các

đơn hàng là một ý tưởng mới và chưa có nhiều ứng dụng tích hợp cả hai phương diện

này với nhau Nên đây có thể xem như một trang web thử nghiệm để cho người quản

trị có thể chủ động trong việc kinh doanh, tự chủ các quy trình bán hàng mà không cần

phụ thuộc quá nhiều vào bên vận chuyển giúp tăng cao lãi suất, tiết kiệm chi phí

1.3 Tìm hiểu các ứng dụng hiện nay

Trong thực tế, các trang web thương mại điện tử đang được khai thác rất mạnh

mẽ và hiệu quả Trong số đó, các trang web nổi tiếng như Tiki, Shopee, Lazada được

biết đến như những ứng dụng phổ biến hàng đầu cho phép người dùng có thể tìm

kiếm, mua sắm, và hợp tác với trang thương mại để bán các sản phẩm của mình Tuy

nhiên việc sử dụng Shopee, Lazada hay hầu hết các trang thương mại điện tử hiện có

trên thị trường thường rất phức tạp, người bán phải đáp ứng các quy định và điều

khoản của trang, phải chuyển đơn hàng cho trang chủ trước xuất hóa đơn, kiểm duyệt

trước khi chuyển đến khách hàng Người mua cũng sẽ rất khó lựa chọn sản phẩm trên

các trang này vì có quá nhiều sản phẩm giống nhau nhưng giá cả, chất lượng lại khác

nhau do đến từ nhiều người bán khác nhau

Hình 1.1 Ảnh chụp màn hình giao diện trang web Shopee

Bên cạnh các trang web thương mại điện tử thì việc quản lí đơn hàng và sản

phẩm người bán còn phải theo dõi trang web của đối tác vận chuyển Hầu hết các nhà

cung cấp phương thức vận chuyển hiện nay như Giao hàng nhanh, VnPost, … đều

cung cấp giao diện cho người gửi theo dõi đơn hàng của họ Tuy nhiên việc vừa phải

theo dõi bên kênh bán hàng, vừa phải xem bên dịch vụ vận chuyển như thế nào gây ra khá nhiều rắc rối và phức tạp, chưa kể đến tính tự chủ của người bán lẫn người mua

đều bị động

Hình 1.2 Giao diện quản lí đơn hàng của bên vận chuyển nhanh.vn

1.4 Mục tiêu của đề tài

Xây dựng trang web thương mại điện tử sử dụng framework Angular và công

nghệ Docker với những mục tiêu cụ thể như sau:

● Tạo ra trang web thương mại điện tử với đầy đủ các tính năng cơ bản cho

người bán lẫn người mua Là một trang web chuyên bán về điện thoại với

nhiều loại sản phẩm khác nhau của nhiều hãng

● Trang web cung cấp đầy đủ các tính năng như đăng ký, đăng nhập, quên mật khẩu, xác thực qua mail, đặt hàng, quản lý profile và trang admin

● Trang web cung cấp tính năng đặc biệt như biểu đồ thống kê sản phẩm, đơn hàng đã bán Cho phép tạo lộ trình đi ngắn nhất cho shipper để rút ngắn thời gian giao hàng và tiết kiệm chi phí

● Trang web có server riêng để đáp ứng các nhu cầu của nhiều user, admin Database được đặt trên cloud tách biệt với các phần khác

● Giao diện được thiết kế theo kiểu client side giúp giảm thiểu gánh nặng trên server

1.5 Đối tượng và phạm vi nghiên cứu

1.5.1 Đối tượng nghiên cứu

Đồ án chuyên ngành này hướng đến việc nghiên cứu các đối tượng sau :

● Nghiên cứu và tìm hiểu về các trang thương mại điện tử hiện nay như Lazada, Tiki, Shoppe,

● Nghiên cứu về yêu cầu và kỹ thuật để xây dựng nên một trang web Angular

● Nghiên cứu về Sailsjs để xây dựng nên backend cho trang web

● Tìm hiểu về REST API để hỗ trợ việc giao tiếp giữa Back-End và Front-End

● Nghiên cứu về công nghệ, cơ chế hoạt động và ứng dụng của Node.js, hệ quản trị cở sở dữ liệu MongoDb, Google Firebase Storage trong việc xây dựng server và quản lý, lưu trữ cơ sở dữ liệu cho ứng dụng

● Nghiên cứu ứng dụng các kỹ thuật, thư viện hỗ trợ thiết kế giao diện ứng dụng phù hợp với xu hướng thiết kế hiện tại trên thị trường

1.5.2 Phạm vi nghiên cứu

Đồ án được nghiên cứu và xây dựng trên nền tảng Framework Angular 7.2, Bootstrap 4, Sailsjs 1.1 Đồ án được nghiên cứu và chạy thử ở quy mô nhỏ

và định hướng sẽ phát triển lên thành đồ án tốt nghiệp

1.5.3 Phương pháp nghiên cứu

Đồ án sử dụng các phương pháp nghiên cứu hướng đến thực tiễn để phát triển và hoàn thiện ứng dụng:

● Phân tích, tham khảo các trang web thương mại điện tử lớn, tập trung vào các điểm chung giữa các trang web để dựa vào đó phát triển ý tưởng

● Thu thập thông tin, tìm hiểu và nghiên cứu về các kỹ thuật, công nghệ, thư viện cần thiết sẽ hỗ trợ xây dựng và phát triển đề tài

● Xây dựng ứng dụng, kiểm thử nhiều lần với các trường hợp giả định

và quy mô khác nhau

● Tự đánh giá và so sánh kết quả đạt được với các mục tiêu đề ra ban đầu Điều chỉnh, khắc phục các khuyết điểm và phát huy các ưu điểm

● Hoàn thiện ứng dụng và đưa vào kiểm thử trong thực tế, tiến hành khảo sát, thu thập ý kiến, đánh giá của người dùng

1.5.4 Cấu trúc đồ án

Trong bài báo cáo này, chúng tôi xin được trình bày về những kiến thức,

cơ sở lý thuyết mà chúng tôi đã nghiên cứu và áp dụng Cũng như những phân tích, đánh giá của nhóm trong quá trình làm việc, xây dựng và phát triển trang web TWEML Báo cáo đồ án này được trình bày với cấu trúc như sau:

● Chương 1 : Giới thiệu tổng quan về đề tài nghiên cứu, các vấn đề cần giải quyết, mục đích nghiên cứu, phạm vi nghiên cứu và phương pháp nghiên cứu

● Chương 2 : Giới thiệu các kỹ thuật, công nghệ, các thư viện cần thiết

đã nghiên cứu, tìm hiểu và áp dụng vào việc xây dựng và phát triển

đề tài

● Chương 3 : Đề ra các đặc tả yêu cầu phân tích thiết kế hệ thống, thiết

kế kiến trúc và các mô hình cần thiết cho toàn bộ hệ thống

● Chương 4 : Trình bày việc hiện thực các thiết kế được xây dựng từ chương 3, hiện thực và giới thiệu giao diện ứng dụng, minh họa cách thức hoạt động thực tế của ứng dụng

● Chương 5 : Tổng kết đồ án, nêu lên ý nghĩa đồ án, trình bày những mặt tích cực đã đạt được cũng như nhìn nhận, đánh giá về những hạn chế còn tồn đọng Từ đó đưa ra cách giải quyết, hướng phát triển tiếp theo cho trang web TWEML

Chương 2 Cơ sở lý thuyết

2.1 Sails.js

2.1.1 Giới thiệu về Sails.js [1]

Sails (hay Sails.js) là một web framework được viết trên nền Node.js cho phép lập trình viên dễ dàng tạo các ứng dụng web backend chạy trên server (dựa trên Node.js)

Sails không thay thế Node.js, trên thực tế ứng dụng web tạo bởi Sails được chạy dựa trên nền tảng Node.js Máy tính (hoặc máy chủ) cần phải có Node.js để có thể chạy ứng dụng tạo bởi Sails.js

Sails.js hỗ trợ việc tạo các ứng dụng web theo thiết kế RESTful API một cách nhanh chóng và đơn giản Giống với các web framework khác Sails cũng

hỗ trợ mô hình MVC và với tính năng Object Mapper giúp việc quản lý dữ liệu (Sails hỗ trợ cả NoSQL và SQL) dễ dàng hơn bao giờ hết Việc xử lý cookie và

Ngoài ra, Sails còn cung cấp rất nhiều tính năng hữu dụng khác giúp bạn

có thể xây dựng một ứng dụng web từ đơn giản tới phức tạp một cách nhanh

chóng Bạn sẽ thấy được điều này khi thao tác trên cửa sổ dòng lệnh sử dụng

Sails.js ở các bài học tiếp theo

Phiên bản đầu tiên của Sails.js được cho ra mắt công chúng vào năm

2012 và là phần mềm mã nguồn mở miễn phí được phát hành dưới giấy phép

MIT

Hình 2.1 Tính năng của Sails.js

2.1.2 Tại sao nên sử dụng Sails.js

Một số đặc điểm quan trọng giúp Sails.js trở nên rất đáng để nghiên cứu

sử dụng đó là:

● Sails.js kế thừa mô hình MVC (Model-View-Controller), cơ chế hoạt

động khá giống các Framework của PHP như Laravel,…

● Sails.js được tích hợp Socket.io, cực kỳ thích hợp cho ứng dụng chat hoặc trò chơi trực tuyến

● Sails.js được viết hoàn toàn bằng javascript Xây dựng trên Sails có nghĩa là ứng dụng của bạn được viết hoàn toàn bằng JavaScript, ngôn ngữ mà bạn và nhóm của bạn đã sử dụng trong trình duyệt

● Sails bundles là một ORM mạnh mẽ, cung cấp lớp truy cập dữ liệu đơn giản để làm việc, bất kể bạn đang sử dụng cơ sở dữ liệu nào

● Sails đi kèm với bản thiết kế giúp khởi động phần phụ trợ của ứng dụng mà không cần viết bất kỳ mã nào.(Auto-generated REST APIs)

● Sails tương thích với mọi front-end: Angular, React, iOS, Android, Windows Phone, phần cứng tùy chỉnh hoặc những thứ khác hoàn toàn

● Sails dịch các socket messages đến cho bạn, chúng tự động tương thích với mọi tuyến đường trong ứng dụng Sails của bạn

● Sails cung cấp hỗ trợ thương mại để tăng tốc phát triển và đảm bảo thực hành tốt nhất trong code của bạn

2.1.3 Áp dụng Sails.js vào xây dựng trang web TWEML

Nhóm chúng tôi sử dụng Sails.js vào việc xây dựng server cho ứng dụng, tạo các phương thức Get/Post/Patch nhận và gửi kết quả cho client bởi những lợi ích to lớn mà Sails.js mang lại Khả năng xử lý dữ liệu thời gian thực, tốc độ

xử lý nhanh chóng, thực hiện được nhiều yêu cầu cùng lúc và dễ dàng sử dụng rất phù hợp để xây dựng server cho ứng dụng di động Bên cạnh đó, việc sử dụng Sails.js để xây dựng server cho phép dễ dàng can thiệp sâu vào việc xử lý, lưu trữ dữ liệu và khả năng mở rộng lớn

2.2 MongoDB cloud [2]

2.2.1 Giới thiệu về MongoDB

MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở NoSQL phổ biến được viết bằng C++ Được phát triển bởi MongoDB Inc Tính đến tháng 2/2015,

MongoDB được xếp thứ 4 trong số các hệ thống cơ sở dữ liệu phổ biến nhất

Hình 2.2 Tính năng của MongoDB MongoDB là cơ sở dữ liệu hướng tài liệu, nó lưu trữ dữ liệu trong các document dạng JSON với schema động rất linh hoạt Nghĩa là những nhà

phát triển ứng dụng có thể lưu các bản ghi mà không cần lo lắng về cấu trúc dữ

liệu như là số trường, kiểu của trường lưu trữ Tài liệu MongoDB tương tự như

các đối tượng JSON

MongoDB là một cơ sở dữ liệu NoSQL hỗ trợ đa nền tảng, nó có thể chạy trên Windows, Linux và Mac và hỗ trợ hầu hết các ngôn ngữ lập trình

phổ biến như C#, Java, PHP, Javascript trong các môi trường phát triển khác

nhau

2.2.2 Tại sao nên sử dụng mongoDB [3]

Dựa trên những lợi ích của MongoDB mang lại và nhu cầu xây dựng ứng dụng thời gian thực đặt ra ban đầu MongoDB thật sự là một trong những lựa chọn thích hợp bởi vì:

● MongoDB là phần mềm mã nguồn mở miễn phí, có cộng đồng phát triển rất lớn

● Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ

● MongoDB là document database, dữ liệu lưu dưới dạng JSON, không

bị bó buộc về số lượng field, kiểu dữ liệu… do đó ta có thể insert thoải mái dữ liệu mà mình muốn

● MongoDB là một rich query language tức là nó có sẵn các method để thực hiện create, read, update, delete dữ liệu (CRUD)

● MongoDB hỗ trợ replica set nhằm đảm bảo việc sao lưu và khôi phục

dữ liệu

● Trong MongoDB có một khái niệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ thống ta chỉ cần thêm một node với vào cluster:

● Phù hợp với việc phát triển server Sails.js

2.2.3 Áp dụng mongoDB vào xây dựng trang web TWEML

Trong ứng dụng, MongoDB đơn giản là hệ quản trị cơ sở Nosql Ứng dụng sẽ tương tác lấy dữ liệu MongoDB thông qua server được viết trên nền tảng Node js

Với việc lưu dữ liệu mà không cần định nghĩa sẵn và không cần thiết lập mối quan hệ giữa các cơ sở dữ liệu giúp cho việc lưu trữ cũng như lấy dữ liệu được thực hiện nhanh chóng

Nhờ việc lưu trữ dưới dạng JSON, đối tượng lồng đối tượng, việc quản lý

hơn Và việc lưu trữ nhiều cấu trúc cơ sở dữ liệu trong ứng dụng thì việc sử dụng MongoDB là một lợi thế

2.3 Angular [3]

2.3.1 Giới thiệu về Angular

Angular là một framework được ra đời dựa trên JavaScript có hai phiên bản: AngularJS ( hay Angular 1.0) và Angular 2 ( bao gồm nhiều version từ 2-7

và còn nhiều hơn trong tương lai- mỗi phiên bản được hứa hẹn sẽ nâng cấp vào mỗi 6 tháng )

Angular 2 nói chung và Angular 7 nói riêng nhanh hơn Angular 1 và liên tục được nâng cao hiệu năng Angular 7 hiện đại, nó sử dụng những tính năng của Javascript mới nhất (es6, es7,es8) và hơn thế nữa các Class, Module,

Decorators hỗ trợ nhiều trình duyệt hiện tại Edge, Chrome, Firefox và cả IE thần thánh

Angular 7 đơn giản hoá các API,nó có ít directive hơn nên dễ nhớ dễ học hơn, binding data đơn giản, khái niệm tổng thể cũng đơn giản hơn Phát triển ứng dụng bằng Angular 7 bạn cũng sẽ nhận ra những cải tiến về năng xuất, điều này cũng nhờ sự nhất quán của mô hình xây dựng các khối để hình thành ứng dụng

Hình 2.3 Tính năng của Angular

2.3.2 Tại sao nên sử dụng Angular

Angular, một Frameworks Javascript giúp chúng ta xây dựng ứng dụng Web đầy đủ tính năng từ phía Client

● Angular giúp nâng cao năng suất của các lập trình viên.Với việc ứng dụng Typescript - một ngôn ngữ - hay là một bản nâng cấp đáng giá của Javascript, Angular kết hợp với Typescript, chúng ta có một công

cụ tuyệt vời giúp xử lý các vấn đề hạn chế của JS như kiểm tra kiểu

dữ liệu, refactor code an toàn hơn, từ đó cũng hỗ trợ tốt hơn cho việc Debug cũng như giúp các Dev thực sự hiểu rõ mã nguồn hơn

● Cấu trúc phát triển rõ ràng Angular mang đến một kiến trúc rất rõ ràng, dựa trên ba yếu tố chính: class, các dependency được thêm vào và mô hình MVVM (model-view-view/model)

● Data Binding trong Angular giúp ta thực thi tiến trình trên rất dễ dàng Đơn thuần từ việc ràng buộc thành phần HTML trong template với các thuộc tính trong class và dữ liệu sẽ tự động xuất hiện trên màn hình Với các tương tác của người dùng đòi hỏi thay đổi dữ liệu, Angular sử dụng phương pháp two-way binding Bất kì thay đổi dữ liệu đến từ view sẽ tự động cập nhật thuộc tính "model" bên trong class

● Thêm vào đó, Angular cũng hỗ trợ property binding - cho phép chúng

ta điều khiển DOM bằng cách ràng buộc thuộc tính HTML với thuộc tính của component class, data sẽ tự động xuất hiện bên trong view

Ví dụ, chúng ta ràng buộc thuộc tính hidden đối với một thẻ img với thuộc tính hideImg bên trong class Khi thuộc tính hideImg nhận giá trụ true, img sẽ tự động hidden và ngược lại khi hideImg nhận giá trị

● Cuối cùng, Angular hỗ trợ event binding, có nghĩa là chúng ta có thể

xử lí bất kì event nào từ phía view, như HTML event Về cơ bản chúng ta sẽ gắt event với một method bên trong class Mỗi khi event xuất hiện, method tương ứng sẽ được thực thi

● Extensive binding giúp quá trình hiển thị dữ liệu, điều khiển DOM, thực thi các event một cách trơn tru và dễ dàng

● Hỗ trợ đầy đủ tính năng điều hướng (routing)

● Angular giúp giảm tối đa kích thước và tăng tối đa hiệu suất của ứng dụng

2.3.3 Áp dụng Angular vào xây dựng trang web TWEML

Từ những ưu điểm của Angular, nhóm đã áp dụng framework này để xây dựng một trang thương mại điện tử single-page

Angular hỗ trợ routing và có Angular CLI giúp việc tạo và quản lý các component được diễn ra thuận lợi hơn.Việc giao tiếp giữa web Angular và server được viết bằng Sails.js là rất dễ dàng, framework hỗ trợ việc gọi các API trong các services

2.4 Docker [4]

2.4.1 Giới thiệu về Docker

Docker là một nền tảng mở dành cho các lập trình viên, quản trị hệ thống dùng để xây dựng, vận chuyển và chạy các ứng dụng phân tán Ban đầu viết bằng Python, hiện tại đã chuyển sang Go-lang

Nó là một công cụ tạo môi trường được “đóng gói” (còn gọi là Container) trên máy tính mà không làm tác động tới môi trường hiện tại của máy, môi

trường trong Docker sẽ chạy độc lập

Hình 2.4 Tính năng của Docker

2.4.2 Tại sao nên sử dụng Docker

Đây một nền tảng mở dành cho các lập trình viên, quản trị hệ thống dùng

để xây dựng, chuyển giao và chạy các ứng dụng dễ dàng hơn

● Linh động: Triển khai ở bất kỳ nơi đâu do sự phụ thuộc của ứng dụng

vào tầng OS cũng như cơ sở hạ tầng được loại bỏ

● Nhanh: Do chia sẻ host OS nên container có thể được tạo gần như

một cách tức thì Điều này khác với vagrant - tạo môi trường ảo ở

level phần cứng, nên khi khởi động mất nhiều thời gian hơn

● Nhẹ: Container cũng sử dụng chung các images nên cũng không tốn

nhiều disks

● Đồng nhất :Khi nhiều người cùng phát triển trong cùng một dự án sẽ

không bị sự sai khác về mặt môi trường

● Đóng gói: Có thể ẩn môi trường bao gồm cả app vào trong một gói

được gọi là container Có thể test được các container Việc bỏ hay

tạo lại container rất dễ dàng

● Đồng bộ giữa các môi trường: dev, staging, production

● Chi phí overhead nhỏ khi dùng Docker so với việc cài đặt trực tiếp trên máy

2.4.3 Áp dụng Docker vào xây dựng trang web TWEML

Trong ứng dụng này, Docker được lựa chọn triển khai cho tất cả các mã nguồn bao gồm front-end và back-end Do hệ thống chia ra nhiều server với từng chức năng riêng biệt, để triển khai từng phần sẽ tốn nhiều thời gian, công sức và đòi hỏi phải hiểu rõ kỹ thuật của từng bộ mã nguồn, Docker giúp cho việc cài đặt và kiểm tra trở nên đơn giản, nhanh chóng hơn và người triển khai cũng không cần hiểu chi tiết về các mã nguồn, framework bên trong Môi trường tạo ra bên trong Docker có thể di chuyển từ nơi này sang nơi khác mà không làm thay đổi cấu hình Ngoài ra Docker cũng mang lại lợi ích về tối ưu vùng nhớ và bảo mật

2.5 Google API [5]

2.5.1 Giới thiệu về Google API

API được viết đầy đủ trong tiếng Anh là “application programming interface” và được hiểu trong tiếng Việt là “giao diện lập trình ứng dụng” Tuy nhiên “giao diện ở đây không được hiểu theo nghĩa thông thường mà API được hiểu là một “giao diện” giữa phần mềm với phần mềm API là cách để các phần mềm (hệ điều hành, ứng dụng, các module trong hệ thống doanh nghiệp) giao tiếp với nhau và tận dụng năng lực của nhau Có thể hiểu đơn giản, API là khớp nối giữa các thành phần phần mềm Các phần mềm muốn tương tác với nhau thì phải “gọi” API của nhau

Hình 2.5 Chức năng Google Maps Api

Google API là các API được công ty Google phát triển và cung cấp cho

các lập trình viên Khi chúng ta muốn tương tác với các phần mềm, thư viện của

Google, bắt buộc chúng ta phải cài đặt Google API

2.5.2 Tại sao nên sử dụng Google Api

Các phần mềm, ứng dụng liên kết, làm việc với nhau thông qua API vì vậy

việc sử dụng API là điều nhất thiết khi xây dựng và phát triển ứng dụng Trong

khi đó, Google được xem như là “gã khổng lồ” trong công nghệ, nên việc “đứng

trên vai” của Google sẽ mang lại nhiều lợi ích khi thực hiện đề tài Cụ thể như:

● Chức năng được cung cấp rất đa dạng và phong phú

● Dễ dàng cài đặt và sử dụng

● Các API được Google cung cấp miễn phí với số lượng người dùng

lớn

● Các API được cập nhật thường xuyên

● Nhận được sự hỗ trợ rất tốt từ Google cũng như cộng đồng lập trình

viên

2.5.3 Áp dụng Google Api vào trang web TWEML

Google API được áp dụng trong trang web nhằm giúp cho người dùng dễ dàng lấy được địa chỉ của đơn hàng

Nhờ Google Maps Api chúng ta có thể lấy được tọa độ của người đặt hàng, từ đó giúp cho admin có thể gom nhóm các đơn hàng dựa trên Google Maps Điều này sẽ tạo được sự dễ chịu cho người dùng, đồng thời giúp ứng dụng dễ dàng hơn trong việc xác định địa chỉ người dùng và lấy được tọa độ cụ thể, phục vụ cho các thao tác tính toán khoảng cách trong ứng dụng

2.6 Firebase Storage [6]

2.6.1 Giới thiệu về Firebase Storage

Google Firebase là một dịch vụ cơ sở dữ liệu thời gian thực hoạt động trên nền tảng đám mây được cung cấp bởi Google nhằm giúp các lập trình viên phát triển nhanh các ứng dụng bằng cách đơn giản hóa các thao tác với cơ sở

dữ liệu Firebase là sự kết hợp giữa nền tảng cloud với hệ thống máy chủ cực kì mạnh mẽ tới từ Google, để cung cấp cho chúng ta những API đơn giản, mạnh

mẽ và đa nền tảng trong việc quản lý, sử dụng database

Firebase Storage là dịch vụ được xây dựng cho mục đích lưu trữ và quản

lý các nội dung mà người dùng ứng dụng tạo ra như ảnh, videos hay dữ liệu dạng file Firebase Storage cung cấp các API cho việc uploads và download các file từ ứng dụng một cách bảo mật và không cần quan tâm đến chất lượng

đường truyền mạng

Firebase Storage là một giải pháp tuyệt vời cho việc lưu trữ file tạo ra từ ứng dụng hoặc là nơi lưu trữ file dữ liệu online cho ứng dụng Những nhà phát triển ứng dụng không cần quan tâm đến đến các dòng code xử lý ở server hay

hạ tầng phức 20 tạp của ứng dụng mà vẫn có thể xây dựng và phát triển được ứng dụng phục vụ hàng triệu người dùng

2.6.2 Tại sao nên sử dụng Firebase Storage

Firebase Storage được xây dựng trên nền tảng Google Cloud Platform

nên sở hữu nhiều lợi thế mà các nhà phát triển ứng dụng hiện nay rất cần thiết

Cụ thể như:

● Robust: Firebase Storage thực hiện việc upload và download không

phụ thuộc vào chất lượng đường truyền mạng, hơn nữa các quá trình

đó có thể bắt đầu lại khi bị tạm dừng Chính điều này giúp người dùng

tiết kiệm thời gian và băng thông

● Secure: Được tích hợp Firebase Authentication cho việc bảo mật nên

dễ dàng quản lý quyền truy cập vào các files

● Scalable: Firebase Storage được xây dựng trên nền tảng Google

Cloud Platform nên khả năng mở rộng có thể lên đến hàng Petabyte

dữ liệu

Hình 2.6 Lợi ích khi sử dụng Firebase

2.6.3 Áp dụng Firebase vào xây dựng trang web TWEML

Nhóm đã sử firebase storage như một kho dữ liệu hình ảnh, giúp ứng dụng lưu lại những hình ảnh trên storage đồng thời trả về đường dẫn hình ảnh, ứng dụng chỉ cần yêu cầu lưu trữ những đường dẫn hình ảnh này lên cơ sở dữ liệu, và dễ dàng lấy được hình ảnh thông qua đường dẫn trên ứng dụng Điều này không những giúp tiết kiệm được kích thước kho dữ liệu của hệ thống mà còn giúp tối ưu dữ liệu trên đường truyền

2.7 REST [7]

2.7.1 Giới thiệu về REST

REST là viết tắt của Representational State Transfer và được giới thiệu lần đầu tiên bởi Roy Thomas Fielding -nhà khoa học, nhà đồng sáng lập giao thức HTTP - vào năm 2000 REST là một chuẩn kiến trúc trong việc thiết kế hệ thống phân tán (distributed system) mà sử dụng các ràng buộc, quy ước chặt chẽ REST là một phương thức nhỏ gọn nên rất được ưa chuộng cho dữ liệu dạng HTTP request Chính vì thế REST dần phổ biến và được xem là lựa chọn

ưu tiên cho lập trình API Thông thường, REST được dùng cho ứng dụng web

và dùng để giao tiếp giữa các ứng dụng di động Các ứng dụng sử dụng kiến trúc REST thì được gọi là ứng dụng phát triển theo kiểu RESTFul

REST tuân thủ theo 4 nguyên tắc thiết kế cơ bản sau:

● Sử dụng các phương thức HTTP một cách rõ ràng: REST đặt ra một quy tắc yêu cầu các nhà phát triển sử dụng một cách rõ ràng các phương thức HTTP và nhất quán với cách mà chúng được định nghĩa Quy tắc này của REST giúp thiết lập ánh xạ một một giữa các hành động tạo, đọc, cập nhật, xóa với các phương thức HTTP Theo

đó sẽ có:

○ Để tạo một tài nguyên trên server ta dùng phương thức POST

○ Để lấy (đọc) một tài nguyên trên server ta dùng phương thức GET

○ Để cập nhật tài nguyên trên server ta dùng phương thức PUT

○ Để xóa tài nguyên trên server ta dùng phương thức DELETE

● Phi trạng thái (Stateless interation): Trong thiết kế của REST, server

sẽ không lưu giữ bất cứ trạng thái trong giao tiếp REST không quản

lý phiên làm việc, session được lưu ở phía client Điều này nghĩa là nếu server nhận được 2 request khác nhau từ cùng 1 client, nó sẽ không ghi nhớ bất cứ thông tin gì về request thứ nhất khi mà phục vụ request thứ 2 Do vậy mỗi client nên mang toàn bộ thông tin cần thiết cho một hành động mà client muốn server thực hiện Trong mạng RESTful, server chịu trách nhiệm đưa ra các phản hồi và cung cấp cách thức cho phép client duy trì trạng thái của chính nó

● Hiển thị cấu trúc thư mục như các URL: REST đưa ra một cấu trúc để người dùng có thể truy cập vào tài nguyên của nó thông qua các URL.Loại URL này có phân cấp, có gốc là một đường dẫn đơn, các nhánh từ gốc là các đường dẫn phụ dẫn đến các vùng service chính

● Truyền tải JSON, XML hoặc cả hai: REST cung cấp nhiều đại diện biểu diễn tài nguyên cho các request khác nhau Một vài dạng MIME thông dụng của REST như JSON, XML, XHTML

2.7.2 Tại sao nên sử dụng REST

Hiện nay REST đang dần được sử dụng rộng rãi vì sự đơn giản và dễ sử dụng hơn rất nhiều của REST Nhìn vào các nguyên tắc của REST đã nói ở trên chúng ta có thể dễ dàng nhận thấy được những lợi ích khi sử dụng REST:

● Mặc dù các quy tắc sử dụng các phương thức HTTP là không bắt buộc nhung khi tuân thủ sẽ giúp mọi thứ trở nên rõ ràng, dễ hiểu, tạo

sự thống nhất trong công việc giữa các lập trình viên

● Phi trạng thái giúp hệ thống dễ phát triển, bảo trì, mở rộng vì không cần tốn công CRUD trạng thái của client và quan trọng hơn là tách

gian để kiểm tra toàn bộ các client giao tiếp với nó Vì vậy phi trạng thái là cần thiết để đảm bảo hiệu suất hoạt động cho toàn bộ hệ thống

● Với URL có cấu trúc như thư mục cho phép nhà phát triển dễ dàng trong việc cài đặt service của mình hướng vào một loại tài nguyên cụ thể

● REST cho phép nhiều định dạng dữ liệu khác nhau Chính điều này cho phép REST hỗ trợ tốt hơn, các service sử dụng bởi các client viết bởi các ngôn ngữ khác nhau, chạy trên nhiều nền tảng và thiết bị khác nhau

Hình 2.7 Thiết kế của RESTful API

2.7.3 Áp dụng REST vào xây dựng web TWEML

Nhóm đã sử dụng REST trong server backend để xây dựng nên các API cung cấp cho Front-end gọi để sử dụng Nhờ các API này mà việc giao tiếp giữa trang web, server và database trở nên dễ dàng và tiện lợi

Chương 3 Phân tích và thiết kế hệ thống

3.1 Kiến trúc hệ thống

Tổng quan về hoạt động của trang web được mô tả trong hình sau :

Sơ đồ 3.1 Sơ đồ kiến trúc hệ thống

Sơ đồ thể hiện ba phần chính của trang web :

● Frontend : ở đây sẽ có hai giao diện chính là trang cửa hàng - dành cho

client và trang admin - dành cho người quản lý Hai trang frontend này sẽ kết nối với server thông qua các API được cung cấp để load dữ liệu và thực hiện các request khác API đóng vai trò là trung gian cung cấp các phương thức để giao tiếp với server

● Backend : Hệ thống sẽ có ba server độc lập để cung cấp các chức năng

riêng biệt Các server này đều được viết trên nền tảng Sails.js và triển khai trên Docker

○ Server sản phẩm : đóng vai trò xử lý các request liên quan đến sản

○ Server người dùng : quản lý tất cả thông tin về user và admin Cho phép quản lý tài khoản người dùng và thông tin về người dùng tương ứng

○ Server Socket : sử dụng thư viện socket.io để đếm số lượng người dùng truy cập vào trang web

● Database : Tất cả thông tin người dùng và sản phẩm đều được lưu trên

cơ sở dữ liệu mongoDB Atlas Server chỉ cần truyền script và password vào datastores được Sails.js hỗ trợ sẵn để lấy data về cho FrontEnd

Nhóm sử dụng Firebase để lưu file hình ảnh của sản phẩm và avatar user, sau đó nhận đường dẫn của các hình ảnh này thông qua API được cung cấp bởi firebase, kết quả này được lưu trữ vào cơ sở dữ liệu

mongoDB

3.2 Mô hình phân rã chức năng

Mô hình phân rã chức năng cho phép xác định phạm vi các chức năng được xây dựng và phát triển trong ứng dụng, cho phép người sử dụng có một cái nhìn tổng thể

về các chức năng có trong ứng dụng thông qua việc biểu diễn phân rã có thứ bậc đơn giản các chức năng của ứng dụng

Sơ đồ 3.2.1 phân rã chức năng web bán hàng

Sơ đồ 3.2.2 phân rã chức năng web admin

3.3 Mô hình Usecase

3.3.1 Mô hình

Use case mô tả sự tương tác đặc trưng giữa người dùng và hệ thống Nó thể hiện ứng xử của hệ thống đối với bên ngoài, trong một hoàn cảnh nhất định, xét từ quan điểm của người sử dụng

Sơ đồ 3.3.1 Mô hình Usecase cho client Người dùng: Chính là người đã có tài khoản được đăng ký tại ứng dụng và đăng nhập vào hệ thống