Đồ án ứng dụng hỗ trợ mua bán đa nền tảng

31 Khách hàng, là người dùng có thể đăng nhập vào ứng dụng và sử dụng các chức năng của ứng dụng .... Trần Anh Dũng Thời gian thực hiện: Từ ngày 9/3/2023 đến ngày kết thúc Đồ án 1 Sinh

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

VŨ ĐỨC MẠNH ĐINH QUANG MẠNH

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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

VŨ ĐỨC MẠNH ĐINH QUANG MẠNH

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Tp.HCM, ngày tháng năm 2023 Giảng Viên Hướng Dẫn

Ths Trần Anh Dũng

LỜI CẢM ƠN

Trước hết, nhóm chúng em xin gửi lời cảm ơn đến Trường Đại học Công nghệ thông tin – ĐHQGTPHCM và các thầy cô là giảng viên của khoa Công nghệ phần mềm đã tạo điều kiện để nhóm chúng em hoàn thành đồ án 1 – Chủ đề Tìm hiểu về React Native và xây dựng ứng dụng

Nhóm em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đến thầy Nguyễn Công Hoan là giảng viên hướng dẫn trực tiếp và trang bị cho chúng em những kiến thức căn bản vững chắc để thực hiện đồ án này

Trong khoảng thời gian thực hiện đồ án, chúng em đã học hỏi thêm được nhiều kiến thức, kinh nghiệm, biết được thêm về nhiều công nghệ mới Nhóm em đã vận dụng những kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiến thức mới Từ đó, vận dụng tối đa những gì đã học hỏi được

để hoàn thành báo cáo đồ án này

Mặc dù đã cố gắng hoàn thành báo cáo với tất cả nỗ lực song báo cáo của nhóm chúng em chắc chắn không tránh khỏi những thiếu sót, chúng em rất mong nhận được sự thông cảm và góp ý chân thành từ quý thầy, cô Nhóm em xin chân thành cảm ơn

Thành phố Hồ Chí Minh, 30 tháng 6 năm 2023

Sinh viên

Vũ Đức Mạnh

MỤC LỤC

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN 1

LỜI CẢM ƠN 1

MỤC LỤC 2

DANH MỤC HÌNH 6

DANH MỤC BẢNG 8

NỘI DUNG ĐỀ TÀI 16

CHƯƠNG 1: MỞ ĐẦU 16

1.1 Lý do chọn đề tài 16

1.2 Mục đích nghiên cứu 17

1.2.1 Khách quan 17

1.2.2 Chủ quan 17

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

1.3.1 Các công nghệ nghiên cứu: 18

1.3.2 Đối tượng sử dụng đề tài hướng đến: 19

1.4 Phạm vi nghiên cứu 20

1.4.1 Phạm vi môi trường: 20

1.4.2 Phạm vi chức năng: 20

CHƯƠNG 2: KIẾN THỨC NỀN TẢNG 21

2.1 React native 21

2.2 JavaScript 22

2.3 React Navigation 23

2.4 Expo Go 24

2.5 Firebase 25

CHƯƠNG 3: XÂY DỰNG HỆ THỐNG 26

3.1 Kiến trúc của React Native: 26

3.1.1 Kiến trúc cũ 26

3.1.2 Kiến trúc mới 28

3.2 Cách thức hoạt động của React Native 29

3.3 Sơ đồ Use case 30

3.3.1 Danh sách tác nhân 31

STT 31

Tác nhân 31

Mô tả/ Ghi chú 31

1 31

Người dùng 31

Người dùng, là người dùng khi không đăng nhập 31

2 31

Khách hàng 31

Khách hàng, là người dùng có thể đăng nhập vào ứng dụng và sử dụng các chức năng của ứng dụng 31

3.3.2 Danh sách Use case 31

3.3.3 Mô tả chi tiết Use case 33

3.4 Class Diagram 43

3.5 Sequence Diagram 44

3.5.1 Sequence Diagram Đăng nhập 44

3.5.2 Sequence Diagram Đăng ký 45

3.5.3 Sequence Diagram Cập nhật tài khoản 46

3.5.4 Sequence Diagram Đặt hàng 47

3.5.5 Sequence Diagram Đăng bán 48

CHƯƠNG 4: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 49

4.1 Sơ đồ liên kết màn hình 49

4.2 Danh sách các màn hình 50

4.3 Mô tả chi tiết các màn hình 52

4.3.1 Màn hình Onboarding 52

4.3.2 Màn hình Home 53

4.3.3 Màn hình Shopping 54

4.3.4 Màn hình Detail Product 55

4.3.5 Màn hình Favorite 56

4.3.6 Màn hình Cart 57

4.3.7 Màn hình Payment 58

4.3.8 Màn hình Login 59

4.3.9 Màn hình Register 60

4.3.10 Màn hình Profile 61

4.3.11 Màn hình Information Account 62

4.3.12 Màn hình Secondhand 63

4.3.13 Màn hình Add Post 64

4.3.14 Màn hình My Order 65

4.3.15 Màn hình Detail Order 66

4.3.16 Màn hình Address 67

4.3.17 Màn hình Add Address 68

4.3.18 Màn hình Card 69

4.3.19 Màn hình Add Card 70

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ 71

5.1 Môi trường cài đặt và kiểm thử: 71

5.2 Kết quả kiểm thử 71

CHƯƠNG 6: TỔNG KẾT 72

6.1 Kết quả đạt được 72

6.1.1 Thành quả 72

6.1.2 Hạn chế 72

6.2 Hướng phát triển 72

TÀI LIỆU THAM KHẢO 74

DANH MỤC HÌNH

Hình 2.1: React Native 21

Hình 2.2: JavaScript 22

Hình 2.3: React Navigation 23

Hình 2.4: Expo Go 24

Hình 2.5: Firebase 25

Hình 3.1: Kiến trúc cũ React Native 26

Hình 3.2: Kiến trúc mới React Native 28

Hình 3.3: Sơ đồ Use case 30

Bảng 3.4: Danh sách tác nhân 31

Bảng 3.5: Danh sách Use case 32

Hình 3.6: Sequence Diagram Đăng nhập 44

Hình 3.7: Sequence Diagram Đăng ký 45

Hình 3.8: Sequence Diagram Cập nhật tài khoản 46

Hình 3.9: Sequence Diagram Đặt hàng 47

Hình 3.10: Sequence Diagram Đăng bán 48

Hình 4.1: Sơ đồ liên kết các màn hình 49

Hình 4.2: Màn hình Onboarding 52

Hình 4.3: Màn hình Home 53

Hình 4.4: Màn hình Shopping 54

Hình 4.5: Màn hình Detail Product 55

Hình 4.6: Màn hình Favorite 56

Hình 4.7: Màn hình Cart 57

Hình 4.8: Màn hình Payment 58

Hình 4.9: Màn hình Login 59

Hình 4.10: Màn hình Register 60

Hình 4.11: Màn hình Profile 61

Hình 4.12: Màn hình Information Account 62

Hình 4.13: Màn hình Secondhand 63

Hình 4.14: Màn hình Add Post 64

Hình 4.15: Màn hình My Order 65

Hình 4.16: Màn hình Detail Order 66

Hình 4.17: Màn hình Address 67

Hình 4.18: Màn hình Add Address 68

Hình 4.19: Màn hình Card 69

Hình 4.20: Màn hình Add Card 70

DANH MỤC BẢNG

Bảng 3.1: Danh sách tác nhân 31

Bảng 3.2: Danh sách Use case 32

Bảng 3.3: Đặc tả use case dăng nhập 33

Bảng 3.4: Đặc tả use case đăng ký tài khoản 34

Bảng 3.5: Đặc tả use case quên mật khẩu 36

Bảng 3.6: Đặc tả use case cập nhật thông tin tài khoản 36

Bảng 3.7: Đặc tả use case tìm kiếm sản phẩm 37

Bảng 3.8: Đặc tả use case sản phẩm yêu thích 38

Bảng 3.9: Đặc tả use case thêm sản phẩm vào giỏ hàng 38

Bảng 3.10: Đặc tả use case xem thông tin chi tiết sản phẩm 39

Bảng 3.11: Đặc tả use case xóa sản phẩm trong giỏ hàng 40

Bảng 3.12: Đặc tả use case xóa sản phẩm trong danh sách yêu thích 40

Bảng 3.13: Đặc tả use case thêm sản phẩm muốn bán 41

Bảng 3.14: Đặc tả use case xóa sản phẩm muốn bán 42

Bảng 4.1: Danh sách các màn hình 52

Bảng 5.1: Kết quả kiểm thử 71

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI: Ứng dụng hỗ trợ mua bán đa nền tảng

Cán bộ hướng dẫn:

- ThS Trần Anh Dũng

Thời gian thực hiện: Từ ngày 9/3/2023 đến ngày kết thúc Đồ án 1

Sinh viên thực hiện:

để giúp người dùng tiếp cận với những sản phẩm mà họ cần một cách dễ dàng và thuận tiện trên nhiều nền tảng khác nhau như website, ứng dụng trên di động, hoặc trên các nền tảng mạng xã hội Vì vậy, nghiên cứu về Ứng dụng mua bán đa nền tảng là rất cần thiết và có tính ứng dụng cao trong thực tế Điều này đảm bảo cho người dùng sẽ tiếp cận đến nhiều khách hàng hơn và nâng cao khả năng bán hàng của họ Ngoài ra, ứng dụng mua bán đa nền tảng còn giúp cho người tiêu dùng dễ dàng tìm kiếm sản phẩm mà họ muốn mua trên nhiều nền tảng khác nhau, đồng thời giúp họ so sánh giá cả và chất lượng sản phẩm Để giải quyết vấn đề trên, nhóm em quyết định chọn đề tài Ứng dụng mua bán đa nền tảng, nhằm phát triển một ứng dụng cung cấp môi trường, cũng như một thị trường online để người dùng

có thể trao đổi, mua bán các loại mặt hàng sản phẩm trên nền tảng di động IOS và Android

2 Mục tiêu:

Tương tác giữa người mua và người bán

Cung cấp giao diện thân thiện, tiện dụng, phù hợp với mọi đối tượng khách hàng Cung cấp giao diện quản lý tài khoản nội bộ, đăng và chỉnh sửa tin tức, quản lý hỏi đáp, giải quyết thắc mắc dành cho nhân viên trung tâm, phân quyền theo từng vị trí

Cung cấp các thống kê, biểu đồ trực quan số liệu, từ đó đề xuất ra các mặt hàng đang được nhiều người quan tâm nhất

Cung cấp chat box tương tác giữa người mua và người bán

Cung cấp các chức năng hủy đơn, mua lại, hoặc hoàn trả cho người mua

Cung cấp các chức năng quản lí giảm giá, vận chuyển

Cung cấp chức năng quản lý tài khoản nội bộ trong trung tâm

Cung cấp biểu đồ và thống kê số liệu, từ đó đề xuất các mặt hàng đang được nhiều người quan tâm nhất

4 Đối tượng sử dụng:

Tất cả mọi người muốn trao đổi các sản phẩm, có nhu cầu mua hoặc bán những mặt hàng mà bản thân đang cần hoặc đang có

Nhà vận chuyển muốn trở thành đơn vị vận chuyển sản phẩm của ứng dụng

5 Phương pháp thực hiện:

Phương pháp làm việc:

Làm việc nhóm 2 thành viên thông qua cả 2 phương thức online và offline dưới sự hướng dẫn của giảng viên hướng dẫn

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

Phân tích nhu cầu sử dụng của đối tượng người dùng

Nghiên cứu tài liệu các công nghệ liên quan

Phương pháp công nghệ:

Xây dựng giao diện IOS và Android Mobile để người dùng có thể tương tác với ứng dụng

Tìm hiểu về React Native

Quản lý source code thông qua Github

Sử dụng Google doc, Office 365 Word… để quản lý tiến trình và tài liệu

7 Kết quả mong đợi:

Giao diện dễ nhìn, trải nghiệm người dùng tốt

Triển khai được trên nền tảng Android và IOS

Ứng dụng di động hoạt động ổn định, có thể xử lý thông tin nhanh chóng…

8 Hướng phát triển của đề tài:

Thêm tính năng chat để trao đổi giữa người mua và người bán

Nâng cấp giao diện, thêm bộ chuyển đổi sang nhiều ngôn ngữ khác

Nâng cấp source code, tăng tốc độ xử lý nhanh chóng, ổn định

9 Kế hoạch làm việc:

Thời gian thực hiện từ ngày 10/3/2023 đến ngày kết thúc Đồ án 1

Nhóm chia thành 2 giai đoạn cụ thể:

Giai đoạn 1: Gồm 4 sprint với thời gian từ 10/3/2023 đến 23/4/2023

Sprint 1: Tìm hiểu và định hình yêu cầu cho ứng dụng

Sprint 2: Thiết kế giao diện người dùng

Sprint 3: Thiết kế cơ sở dữ liệu

Sprint 4: Xác định và xây dựng các chức năng cơ bản của ứng dụng

Sprint 1 10/3/2023 – 19/3/2023 Tìm hiểu đề tài

Xác định phạm vi, hướng phát triển của đề tài

Tìm hiểu và phân tích các yêu cầu nghiệp vụ của đề tài

hình, layout, icon, font chữ, màu sắc, hình ảnh,… cho ứng dụng

Sử dụng công cụ thiết kế như Adobe XD hoặc Figma để tạo ra bản thiết kế mô phỏng cho ứng dụng

Thực hiện việc đánh giá và cải thiện bản thiết kế để đảm bảo tính thẩm

mỹ, trải nghiệm người dùng và đảm bảo tính thực tiễn cho ứng dụng Sprint 3 3/4/2023 – 9/4/2023 Xây dựng CSDL cho ứng dụng:

• Tạo bảng

• Cập nhật dữ liệu Liên kết CSDL vào ứng dụng Sprint 4 10/4/2023 – 31/4/2023 Xây dựng các chức năng cơ bản của

ứng dụng:

• Đăng nhập, đăng ký tài khoản

• Tìm kiếm sản phẩm và xem sản phẩm

• Đặt hàng, thanh toán

• Quản lí hóa đơn đã đặt

• Quản lý tài khoản

• Đăng bán sản phẩm

• Quản lý sản phẩm đã đăng bán

Giai đoạn 2: Gồm 5 sprint với thời gian từ 24/4/2023 đến kết thúc Đồ án 1

Sprint 5: Hoàn thiện tính năng của ứng dụng và kiểm thử

Sprint 6: Hoàn thiện tính năng của ứng dụng và kiểm thử

Sprint 7: Hoàn thiện tính năng của ứng dụng và kiểm thử

Sprint 8: Tổng kiểm thử và sửa lỗi, tối ưu hóa hiệu suất ứng dụng

Sprint 9: Triển khai ứng dụng và viết báo cáo

Sprint 5 1/5/2023 – 19/5/2022 Tiếp tục hoàn thiện các

tính năng của ứng dụng Kiểm thử ứng dụng Sprint 6 20/5/2023 – 6/6/2023 Tiếp tục hoàn thiện các

tính năng của ứng dụng Kiểm thử ứng dụng Sprint 7 7/6/2023 – 22/6/2023 Tiếp tục hoàn thiện các

tính năng của ứng dụng Kiểm thử ứng dụng Sprint 8 23/6/2023 – 30/6/2023 Thực hiện kiểm thử chức

năng, kiểm tra tính năng, khả năng tương thích trên các thiết bị khác nhau

Sửa lỗi và cải thiện tính

ổn định của ứng dụng Tối ưu hóa hiệu suất ứng dụng để đảm bảo tốc độ

và độ mượt của ứng dụng

Sprint 9 1/7/2023 – kết thúc Triển khai ứng dụng trên

nền tảng IOS và Android Viết báo cáo

10 Phân công công việc:

Công việc Mô tả công việc

Công việc chung Tìm hiểu công nghệ

Phân tích yêu cầu Kiểm thử ứng dụng Triển khai ứng dụng Chuẩn bị tài liệu, viết báo cáo

Công việc cá nhân

Thiết kế CSDL Lập trình Back-end

Thiết kế giao diện Lập trình Front-end Tp.Hồ Chí Minh, ngày tháng năm 2023

NỘI DUNG ĐỀ TÀI

CHƯƠNG 1: MỞ ĐẦU

1.1 Lý do chọn đề tài

Hiện nay, thương mại điện tử đang ngày càng phát triển, và người mua hàng ngày càng tìm kiếm các nền tảng mua bán trực tuyến để mua sản phẩm và dịch vụ Việc phát triển một ứng dụng mua bán đa nền tảng có thể giúp chúng ta tận dụng cơ hội thị trường

và thu hút một số lượng lớn khách hàng tiềm năng Ngoài ra, người dùng truy cập Internet chủ yếu thông qua các thiết bị di động như điện thoại thông minh và máy tính bảng Một ứng dụng mua bán đa nền tảng cho phép khách hàng truy cập và mua hàng từ bất kỳ thiết

bị di động nào, tạo ra trải nghiệm mua sắm thuận tiện và tiện ích Với một ứng dụng mua bán đa nền tảng, chúng ta có thể tiếp cận và phục vụ khách hàng trên nhiều nền tảng khác nhau, bao gồm các hệ điều hành di động (Android, iOS), trình duyệt web và có thể mở rộng thậm chí đến các nền tảng điện tử khác như smart TV hoặc thiết bị đeo

Mặc khác, ứng dụng giúp tạo ra một trải nghiệm mua sắm nhất quán cho khách hàng trên tất cả các nền tảng Điều này đảm bảo rằng khách hàng có thể truy cập vào các sản phẩm và dịch vụ của bạn một cách dễ dàng và thuận tiện, không phụ thuộc vào thiết bị hoặc nền tảng mà họ đang sử dụng

Sử dụng một ứng dụng mua bán đa nền tảng có thể giúp mở rộng phạm vi kinh doanh và tăng doanh số bán hàng Bằng cách tiếp cận các khách hàng trên nhiều nền tảng, bạn có thể thu hút đối tượng khách hàng mới và tạo ra một kênh bán hàng bổ sung để tăng doanh thu và lợi nhuận

1.2 Mục đích nghiên cứu

1.2.1 Khách quan

Ứng dụng mua bán đa nền tảng tạo ra một cộng đồng trực tuyến cho người mua và người bán giao dịch với nhau Nó cung cấp một phương tiện để người mua tìm kiếm và tương tác với người bán có hàng hóa hoặc dịch vụ phù hợp với nhu cầu của họ

Giúp tăng tính minh bạch và tin cậy trong quá trình mua bán trực tuyến Người dùng

có thể xem thông tin chi tiết về sản phẩm, đánh giá và nhận xét từ người dùng khác để có cái nhìn tổng quan về người bán và chất lượng sản phẩm

Người dùng không cần phải tìm kiếm qua nhiều nguồn thông tin khác nhau hoặc di chuyển đến các cửa hàng vật lý để mua hàng

1.2.2 Chủ quan

Nhóm muốn áp dụng kiến thức đã học được trong lĩnh vực lập trình và phát triển phần mềm để xây dựng một ứng dụng thực tế Việc tham gia vào việc phát triển một ứng dụng mua bán đa nền tảng giúp các thành viên trong nhóm rèn kỹ năng lập trình, phát triển phần mềm và quản lý dự án

Các thành viên có thể rèn kỹ năng làm việc nhóm, học cách phân công nhiệm vụ, tương tác với thành viên khác và giải quyết các vấn đề phát sinh trong quá trình phát triển

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

1.3.1 Các công nghệ nghiên cứu:

- React Native: React Native là framework phát triển ứng dụng di động đa nền tảng

sử dụng JavaScript Nó cho phép bạn xây dựng các thành phần giao diện người dùng tương tự như React, nhưng với khả năng hoạt động trên cả hai nền tảng iOS và Android

- Expo: Expo là một nền tảng phát triển ứng dụng React Native Nó cung cấp một bộ công cụ và dịch vụ hỗ trợ cho việc phát triển, xây dựng và triển khai ứng dụng React Native một cách nhanh chóng và dễ dàng

- Firebase: Firebase là một nền tảng phát triển ứng dụng di động của Google Nó cung cấp các dịch vụ như cơ sở dữ liệu thời gian thực, xác thực người dùng, lưu trữ đám mây và thông báo đẩy Firebase rất phổ biến trong việc phát triển ứng dụng mua bán

đa nền tảng để quản lý dữ liệu người dùng, danh mục sản phẩm, đăng nhập và đăng

ký người dùng, v.v

- React Navigation: Đây là một thư viện điều hướng (navigation) phổ biến trong ứng dụng React Native React Navigation cung cấp các thành phần và công cụ giúp bạn xây dựng các luồng điều hướng trong ứng dụng của mình, chẳng hạn như màn hình chuyển đổi, thanh điều hướng, tab navigation, stack navigation, v.v

1.3.2 Đối tượng sử dụng đề tài hướng đến:

Người mua: Đây là nhóm người sử dụng chính của ứng dụng Người mua muốn tìm kiếm và mua các sản phẩm hoặc dịch vụ trực tuyến một cách thuận tiện và dễ dàng Họ muốn có trải nghiệm mua sắm trực tuyến tốt, tìm kiếm sản phẩm dễ dàng, so sánh giá cả, đánh giá và đánh giá sản phẩm, và thực hiện thanh toán an toàn

Người bán: Đối tượng này bao gồm các doanh nghiệp, cửa hàng, người bán lẻ hoặc

cá nhân muốn tiếp cận thị trường trực tuyến và bán hàng qua ứng dụng Họ muốn có một nền tảng để quảng bá, quản lý và bán sản phẩm hoặc dịch vụ của mình Người bán muốn

có cơ hội tiếp cận đến một số lượng lớn khách hàng tiềm năng, quản lý đơn hàng, cung cấp

hỗ trợ sau bán hàng và tăng doanh thu

Người quản lý hệ thống: Đối tượng này là nhóm người quản lý và điều hành ứng dụng mua bán đa nền tảng Họ có nhiệm vụ quản lý cơ sở dữ liệu, quản lý tài khoản người dùng, theo dõi hoạt động giao dịch, đảm bảo an ninh và bảo mật dữ liệu, cung cấp hỗ trợ

kỹ thuật và đảm bảo sự ổn định và hiệu suất của hệ thống

Tìm kiếm và Lọc sản phẩm: Người dùng cần có khả năng tìm kiếm và lọc sản phẩm theo các tiêu chí như tên, loại, giá, v.v Điều này giúp người dùng dễ dàng tìm thấy sản phẩm mà họ quan tâm

Xem chi tiết sản phẩm: Người dùng có thể xem thông tin chi tiết, hình ảnh và mô tả sản phẩm để có cái nhìn rõ ràng trước khi quyết định mua hàng

Giỏ hàng: Chức năng giỏ hàng cho phép người dùng thêm sản phẩm vào giỏ hàng, quản lý số lượng sản phẩm và tiến hành thanh toán

Thanh toán: Ứng dụng cần tích hợp các phương thức thanh toán trực tuyến an toàn

để người dùng có thể thanh toán cho đơn hàng của mình

Đơn hàng và Vận chuyển: Người dùng cần có khả năng xem và quản lý đơn hàng của mình, bao gồm thông tin vận chuyển và trạng thái giao hàng

Sự ra đời của React Native đã giải quyết được bài toán về hiệu năng và sự phức tạp khi trước đó người ta phải dùng nhiều loại ngôn ngữ native cho mỗi nền tảng di động Chính vì thế lập trình React Native sẽ giúp tiết kiệm được phần lớn thời gian và công sức khi thiết kế và xây dựng nên một ứng dụng đa nền tảng Javascript phù hợp với rất nhiều nền tảng khác nhau

2.2 JavaScript

Hình 2.2: JavaScript

JavaScript là một ngôn ngữ lập trình thông dịch phía client (thông thường chạy trong trình duyệt web) hoặc phía server (với Node.js) Nó được sử dụng rộng rãi để tạo ra các ứng dụng web động, tương tác và đáp ứng

Ban đầu, JavaScript được phát triển để thực hiện các tính toán đơn giản trên trang web và cung cấp các hiệu ứng động Tuy nhiên, với sự phát triển của web, JavaScript đã trở thành một ngôn ngữ mạnh mẽ cho phép viết ứng dụng web phức tạp hơn

JavaScript có cú pháp dễ học và linh hoạt, cho phép lập trình viên tương tác với các phần tử trong trang web, thay đổi nội dung, xử lý sự kiện và giao tiếp với máy chủ để trao đổi dữ liệu

Với JavaScript, bạn có thể thực hiện các tác vụ như kiểm tra dữ liệu đầu vào, xử lý

sự kiện người dùng, thay đổi nội dung trang web động, tạo hiệu ứng đồ họa, giao tiếp với máy chủ và nhiều hơn nữa

JavaScript cũng có nhiều thư viện và frameworks phổ biến như React, Angular và Vue.js, giúp phát triển ứng dụng web phức tạp một cách dễ dàng và hiệu quả

2.3 React Navigation

Hình 2.3: React Navigation

React Navigation là một thư viện điều hướng được phát triển cho ứng dụng React Native Nó cung cấp các công cụ và thành phần để quản lý việc điều hướng và chuyển đổi giữa các màn hình trong ứng dụng

React Navigation hỗ trợ các loại điều hướng phổ biến như điều hướng xếp chồng (stack navigation), điều hướng tab (tab navigation), và điều hướng ngăn xếp (drawer navigation) Nó cung cấp một cách đơn giản và linh hoạt để xác định các tuyến đường (routes) và quản lý trạng thái điều hướng trong ứng dụng

Thư viện này cho phép bạn tạo các màn hình (screens) và khung (containers) để chứa chúng Bạn có thể định nghĩa các tuyến đường, đăng ký màn hình với tên duy nhất,

và sử dụng các hàm điều hướng để chuyển đổi giữa các màn hình

React Navigation cung cấp cách điều hướng và chuyển đổi màn hình một cách trơn tru và linh hoạt Nó cũng cho phép bạn tùy chỉnh giao diện và hiệu ứng điều hướng của ứng dụng Thư viện này đã trở thành một lựa chọn phổ biến trong việc xây dựng ứng dụng React Native và được cộng đồng hỗ trợ rộng rãi

Expo Go giúp rút ngắn thời gian phát triển và thử nghiệm ứng dụng di động, và cung cấp một trải nghiệm tương tự như khi chạy ứng dụng trực tiếp trên điện thoại di động

2.5 Firebase

Hình 2.5: Firebase

Firebase là một nền tảng phát triển ứng dụng di động và web do Google cung cấp

Nó cung cấp một loạt các dịch vụ đám mây để giúp phát triển và quản lý ứng dụng, bao gồm cơ sở dữ liệu thời gian thực, xác thực người dùng, lưu trữ tệp, phân tích, thông báo đẩy, và nhiều hơn nữa

Trong mối quan hệ với React Native, Firebase cũng cung cấp một bộ công cụ và thư viện hỗ trợ cho việc phát triển ứng dụng React Native Firebase SDK cho React Native giúp bạn tương tác với các dịch vụ của Firebase từ ứng dụng React Native của mình

Với Firebase và React Native, bạn có thể sử dụng các tính năng như lưu trữ dữ liệu trong cơ sở dữ liệu thời gian thực (Realtime Database hoặc Firestore), xác thực người dùng (Firebase Authentication), lưu trữ và quản lý tệp tin (Firebase Storage), gửi thông báo đẩy (Firebase Cloud Messaging), phân tích ứng dụng (Firebase Analytics), và nhiều dịch vụ khác

Firebase cung cấp một cách dễ dàng để tích hợp các tính năng mạnh mẽ và quản lý các khía cạnh cơ sở hạ tầng của ứng dụng của bạn mà không cần lo lắng về việc triển khai

và vận hành hạ tầng phức tạp Điều này giúp bạn tập trung vào phát triển chức năng và trải nghiệm người dùng của ứng dụng của mình

CHƯƠNG 3: XÂY DỰNG HỆ THỐNG

3.1 Kiến trúc của React Native:

3.1.1 Kiến trúc cũ

Hình 3.1: Kiến trúc cũ React Native

Có 3 luồng chạy song song và riêng biệt trong mỗi ứng dụng React Native:

- JS thread: là nơi tất cả code Javascript được đọc và biên dịch, nơi xử lí hầu hết các logic nghiệp vụ của ứng dụng Metro sẽ đóng gói tất cả code Javascript thành một file duy nhất Phần code này sẽ được chuyển tới công cụ JavascriptCore (JSC) để có thể chạy được

- UI thread: là nơi xử lý code native Nó giao tiếp với JS Thread bất cứ khi nào có nhu cầu cần thay đổi UI hoặc truy cập các hàm native Chúng ta có thể chia UI thread thành Native UI và Native Modules Tất cả các Native Modules đều được khởi động khi chúng ta sử dụng ứng dụng

- Shadow thread: là nơi các layout sẽ được tính toán Nó sử dụng Layout Engine riêng của Facebook được gọi là Yoga nhằm tính toán flexbox layout, sau đó gửi kết quả về phía Native UI

Hạn chế:

- Bridge-overhead: Kiến trúc cũ sử dụng bridge để giao tiếp giữa JavaScript thread

và Native thread, dẫn đến chi phí chuyển đổi dữ liệu giữa hai thread là rất cao

Vì vậy, hiệu suất ứng dụng có thể bị ảnh hưởng, đặc biệt là khi ứng dụng yêu cầu xử lý tốc độ cao hoặc sử dụng nhiều thành phần UI

- Có thể gây khó khăn trong việc triển khai và bảo trì: Vì kiến trúc cũ sử dụng cơ chế bridge để giao tiếp giữa JavaScript thread và UI thread, nó có thể gây khó khăn trong việc triển khai và bảo trì ứng dụng Việc tìm và sửa lỗi trong mã native có thể khó khăn hơn so với việc tìm và sửa lỗi trong mã JavaScript

- Khả năng mở rộng hạn chế: Kiến trúc cũ của React Native có khả năng mở rộng hạn chế hơn so với các kiến trúc khác như Flutter hoặc React Native mới nhất

Vì vậy, nếu bạn đang xây dựng một ứng dụng lớn hoặc cần tính linh hoạt trong việc mở rộng, thì có thể kiến trúc cũ sẽ không phù hợp

- Bị giới hạn bởi hệ điều hành: Kiến trúc cũ của React Native sử dụng các API native của hệ điều hành để thực hiện các tính năng, điều này có nghĩa là ứng dụng có thể bị giới hạn bởi tính năng và hỗ trợ của hệ điều hành Vì vậy, nếu ứng dụng của bạn cần tính năng đặc biệt hoặc hỗ trợ các thiết bị không được hỗ trợ bởi hệ điều hành thì sẽ gặp khó khăn

3.1.2 Kiến trúc mới

Hình 3.2: Kiến trúc mới React Native

Kiến trúc mới của React Native là một sự cải tiến lớn so với kiến trúc cũ, nhằm giải quyết các vấn đề về hiệu suất, tính linh hoạt và khả năng mở rộng của nền tảng này Kiến trúc mới bao gồm bốn thành phần chính là:

- JSI (JavaScript Interface): Là một lớp trừu tượng hóa giữa mã JavaScript và mã native, cho phép gọi các hàm native một cách trực tiếp từ JavaScript mà không cần thông qua bridge JSI cũng cho phép sử dụng các công cụ JavaScript khác nhau như Hermes, V8 hay JSC

- Fabric: Là tên mới của UIManager, có trách nhiệm quản lý các thành phần giao diện người dùng (UI component) bên native Fabric sử dụng JSI để giao tiếp với JavaScript và cải thiện hiệu suất render UI bằng cách sử dụng nhiều luồng và hỗ trợ các tính năng mới như concurrent mode hay suspense

- Turbo Module: Là tên mới của Native Module, là các module native được viết bằng Java, Objective-C hay Swift để cung cấp các chức năng không có sẵn trong JavaScript Turbo Module sử dụng JSI để giao tiếp với JavaScript và được tải lười (lazy load) khi cần thiết thay vì được khởi tạo ngay từ đầu

- CodeGen: Là một công cụ để sinh ra các định nghĩa kiểu (type definition) cho các UI component và Native Module, giúp cho việc kiểm tra kiểu và tối ưu hóa

mã nguồn dễ dàng hơn

3.2 Cách thức hoạt động của React Native

React Native hoạt động bằng cách sử dụng các thành phần (components) và các module Native để tạo giao diện người dùng và truy cập đến các tính năng của hệ điều hành

Khi một ứng dụng React Native được khởi động, nó sẽ thực hiện các bước sau:

- JavaScript thread thực thi mã nguồn JavaScript: Mã nguồn JavaScript của ứng dụng được thực thi trên JavaScript thread JavaScript thread sẽ tạo ra các thành phần (components) và tương tác với các module Native để truy cập đến các tính năng của hệ điều hành

- UI thread vẽ giao diện người dùng: UI thread là một luồng riêng biệt được sử dụng để vẽ giao diện người dùng UI thread sử dụng các thành phần được định nghĩa trong mã nguồn JavaScript để tạo và hiển thị giao diện người dùng

- Native modules truy cập tính năng của hệ điều hành: Khi cần truy cập đến các tính năng của hệ điều hành như camera, định vị, và thông báo, JavaScript thread

sẽ gọi các module Native để thực hiện các thao tác này

- Thay đổi trên giao diện được cập nhật: Khi người dùng tương tác với giao diện, các sự kiện sẽ được gửi đến UI thread để xử lý và cập nhật lại giao diện người dùng

3.3 Sơ đồ Use case

Hình 3.3: Sơ đồ Use case

3.3.1 Danh sách tác nhân

1 Người dùng Người dùng, là người dùng khi không đăng nhập

2 Khách hàng Khách hàng, là người dùng có thể đăng nhập vào ứng dụng và sử dụng các chức năng của ứng dụng

Bảng 3.1: Danh sách tác nhân

3.3.2 Danh sách Use case

1 Đăng nhập Dành cho Người dùng sở hữu tài

khoản, đăng nhập vào ứng dụng

ký tài khoản mới

3 Quên mật khẩu Dành cho Người dùng sở hữu tài

khoản, đặt lại mật khẩu mới thông qua email

4 Đăng xuất Dành cho Người dùng sở hữu tài

khoản, đăng xuất khỏi ứng dụng

5 Cập nhật thông tin tài

7 Xem danh sách sản

phẩm

Xem danh sách các sản phẩm có trong cửa hàng

8 Tìm kiếm sản phẩm Tìm kiếm sản phẩm có trong danh

sách theo tên

9 Xem thông tin chi tiết

20 Xóa sản phẩm muốn

bán

Xóa các sản phẩm người dùng đã đăng

3.3.3 Mô tả chi tiết Use case

3.3.3.1 Use case Đăng nhập

Tóm tắt Khi muốn hoạt động trong hệ thống, người dùng cần phải

đăng nhập Tính năng đăng nhập hỗ trợ xác thực người dùng thông qua tài khoản và mật khẩu

Pre-Condition 1 Đã được cung cấp sẵn tài khoản

2 Hệ thống đang vận hành ổn định Post-Condition 1 Hệ thống hiển thị màn hình làm việc chính

2 Hệ thống ghi nhận hoạt động của người dùng Main Flow 1 Người dùng khởi động ứng dụng

2 Người dùng nhập email

3 Người dùng nhập mật khẩu

4 Người dùng Click Button Đăng nhập trên màn hình

5 Hệ thống xác nhận thông tin đăng nhập cho người dùng

6 Hệ thống ghi nhận thông tin đăng nhập người dùng

7 Kết thúc Use-case Alternative Flow 5a Hệ thống kiểm tra tài khoản người dùng nhập có tồn

tại trong hệ thống hay không

5a1 Hệ thống thông báo “Người dùng không tồn tại” 5a2 Kết thúc Use-case

5b Hệ thống kiểm tra tài khoản người dùng có mật khẩu không chính xác

5b1 Hệ thống hiển thị thông báo “Sai mật khẩu”

5b2 Kết thúc Use-case

Bảng 3.3: Đặc tả use case dăng nhập

3.3.3.2 Use case Đăng ký tài khoản

Tên Use-case Đăng ký tài khoản

Tóm tắt Cho phép người dùng tạo tài khoản mới

Pre-Condition Hệ thống đang ở trạng thái hoạt động

Post-Condition Không có

Main Flow 1 Người dùng nhấn vào tuỳ chọn “Đăng ký”

2 Hệ thống hiển thị giao diện đăng ký tài khoản

3 Người dùng nhập tài khoản email và mật khẩu

4 Nếu tài khoản hợp lệ thì hệ thống tiến hành gửi mã xác thực và chuyển sang giao diện nhập mã

5 Người dùng nhập mã xác thực được gửi tới mail trước đó và nhấn “Xác thực”

6 Nếu mã hợp lệ thì hệ thống chuyển sang màn hình Trang chủ

7 Kết thúc Usecase

Alternative Flow 3a1 Hệ thống kiểm tra email vừa nhập Nếu đã tồn tại

email thì báo lỗi và kết thúc Usecase

3a2 Hệ thống kiểm tra mật khẩu, nếu không khớp hoặc ngắn hơn 6 ký tự thì báo lỗi và kết thúc Usecase

5a Hệ thống kiểm tra mã vừa nhập Nếu không hợp lệ thì báo lỗi và kết thúc Usecase

Bảng 3.4: Đặc tả use case đăng ký tài khoản

3.3.3.3 Use case Quên mật khẩu

Tên Use-case Khôi phục mật khẩu

Tóm tắt Cho phép người dùng truy cập lại tài khoản khi quên mật

khẩu đăng nhập

Pre-Condition Hệ thống đang ở trạng thái hoạt động

Post-Condition Không có

Main Flow 1 Người dùng nhấn vào tuỳ chọn “Quên mật khẩu”

2 Hệ thống hiển thị giao diện khôi phục mật khẩu

3 Người dùng nhập tài khoản mail liên kết với tài khoản cần khôi phục

4 Nếu tài khoản hợp lệ thì hệ thống tiến hành gửi mã xác thực và chuyển sang giao diện nhập mã

5 Người dùng nhập mã xác thực được gửi tới mail trước đó và nhấn “Xác thực”

6 Nếu mã hợp lệ thì hệ thống chuyển sang màn hình nhập mật khẩu

7 Người dùng nhập mật khẩu mới và sau đó nhấn “Xác nhận”

8 Nếu mật khẩu hợp lệ thì hệ thống chuyển sang màn hình Trang chủ

9 Kết thúc Usecase

Alternative Flow 3a Hệ thống kiểm tra email vừa nhập Nếu không tồn tại

email thì báo lỗi và kết thúc Usecase

5a Hệ thống kiểm tra mã vừa nhập Nếu không hợp lệ thì báo lỗi và kết thúc Usecase

6a Hệ thống kiểm tra mật khẩu vừa nhập Nếu xảy ra các trường hợp sau đây thì kết thúc Usecase

6a1 Mật khẩu mới (New password) và nhập lại mật khẩu mới (Re-enter new password) không khớp thì báo lỗi

6a2 Mật khẩu mới ngắn hơn 6 ký tự thì báo lỗi

Bảng 3.5: Đặc tả use case quên mật khẩu

3.3.3.4 Use case Cập nhật thông tin tài khoản

Tên Use-case Cập nhật thông tin tài khoản

Tóm tắt Cho phép người dùng đổi thông tin tài khoản

2 Hệ thống hiển thị các hộp thoại thông tin tài khoản

3 Người dùng nhập thông tin muốn thay đổi

4 Người dùng nhấn xác nhận

5 Hệ thống cập nhật dữ liệu mới

6 Kết thúc Use case Alternative Flow 5a Hệ thống kiểm tra tính hợp lệ của thông tin, nếu không

hợp lệ thì báo lỗi và kết thúc use case

Bảng 3.6: Đặc tả use case cập nhật thông tin tài khoản