đồ án 1 se121 xây dựng ứng dụng webchat tích hợp ví điện tử

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

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

BÁO CÁO MÔN HỌCĐỒ ÁN 1 – SE121

Xây dựng ứng dụng Webchat tích hợp ví điện tử

Giảng viên hướng dẫn: Ths Huỳnh Tuấn AnhSinh viên thực hiện:

TP Hồ Chí Minh, tháng 05 năm 2023

1

LỜI CẢM ƠN

Em trân trọng cảm ơn thầy Huỳnh Tuấn Anh đã tạo điều kiện và hướng dẫn em đểem có cơ hội thử thách bản thân trong môn học này Trải qua 14 tuần tìm tòi, nghiêncứu và phát triển đã cho em cái nhìn rất nhiều kiến thức và kinh nghiệm bổ ích Em tinrằng những kiến thức và kinh nghiệm này sẽ hỗ trợ em rất nhiều trên con đường sựnghiệp sắp tới Một lần nữa, cảm ơn thầy đã đồng hành và hỗ trợ nhóm em trong mônhọc này.

NHẬN XÉT CỦA GIẢNG VIÊN

1.5.1 Yêu cầu chức năng 16

1.5.2 Yêu cầu phi chức năng 16

Chương 2 TỔNG QUAN CÔNG NGHỆ 18

Chương 3 THIẾT KẾ HỆ THỐNG 30

3.1 Công nghệ sử dụng 30

3.2 Kiến trúc hệ thống: Mô hình Client-Server 30

3.3 Kiến trúc Cache: Redis 30

3.4 Mô hình MVC 319

Chương 4 USE CASE 32

4.1 Use case diagram 32

4.1 Danh sách use case 33

4.2 Đặc tả use case 34

4.2.1 Use case “Đăng nhập” 34

4.2.2 Use case “Đăng kí” 34

4.2.3 Use case “Call” 35

4.2.4 Use case “Message” 36

4.2.5 Use case “ Add/Delete/Archive” 37

4.2.6 Use case “Edit profile” 38

4.2.7 Use case “Transfer” 38

Chương 5 THIẾT KẾ GIAO DIỆN 40

5.1 Giao diện “Login” 40

5.2 Giao diện “Trang chính” 40

5.3 Giao diện “Đoạn chat” 41

5.4 Giao diện “My profile” 41

5.5 Giao diện “Call” 42

5.6 Giao diện “Ví LWallet” 44

6.5.2 Cải thiện trải nghiệm đồ họa 46

Chương 7 TÀI LIỆU THAM KHẢO 47

DANH MỤC HÌNH ẢNH

Figure 1: Giao diện Shopee 11

Figure 2: Giao diện chat trên Shopee 12

Figure 3: Giao diện chat trên Zalo tích hợp ZaloPay 14

Figure 4: Logo ReactJS 17

Figure 5: Mô hình hoạt động của DOM 18

Figure 6: Đoạn code React sử dụng JSX 19

Figure 7: Nguyên lý vận hành của Redux 20

Figure 8: Cấu trúc của Components 21

Figure 9: Logo Python 21

Figure 10: Đặc trưng của Python 22

Figure 11: IDE trong Python 23

Figure 12: Ứng dụng của Python 24

Figure 13: Kiến trúc Monolithic (trái) và Microservices (phải) 25

Figure 14: Logo MongoDB 27

Figure 15: Ví dụ MongoDB 28

Figure 16: Kiến trúc client-server 29

Figure 17: Use case diagram 31

Figure 18: Giao diện Đăng nhập 39

Figure 19: Giao diện Đăng kí 39

Figure 20: Giao diện "Trang chính" 39

Figure 21: Giao diện "Đoạn chat” 40

Figure 22: Giao diện "My profile" 40

Figure 23: Giao diện "CALL” 41

Figure 24: Giao diện "CALL Video”" 42

Figure 25: Giao diện “ví LWallet” 43

Figure 26: Giao diện “nạp tiền LWallet” 43

Figure 27: Giao diện “chuyển tiền LWallet” 44

Figure 28: Giao diện “lịch sử giao dịch LWallet” 44

DANH MỤC BẢNG BIỂU

Table 1: Danh sách actor 32

Table 2: Danh sách use case 32

Table 3: Đặc tả use case "Đăng nhập" 33

Table 4: Đặc tả use case "Đăng kí " 34

Table 5: Đặc tả use case "Call” 34

Table 6: Đặc tả use case "Message" 35

Table 7: Đặc tả use case "Add" 36

Table 8: Đặc tả use case "Edit profile" 37

Table 9: Đặc tả use case "Transfer" 39

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

Chương 1 TỔNG QUAN1.1 Lý do chọn đề tài

Hiện nay, thế giới đang chứng kiến sự phát triển vượt bậc của Internet và các ứng dụng trên Internet Cùng với sự phát triển đó cộng với nhu cầu trao đổi và thông tin liên lạc một cách nhanh chóng và tiện lợi đã thúc đẩy sự phát triển các phần mềm để trao đổi thông tin một cách tức thì Điển hình cho các phần mềm đó là ứng dụng “chat” Các ứng dụng cho phép người dùng gửi và nhận các thông điệp nhanh chóng một cách trực tiếp với nhau Vì thế những ứng dụng như “Window Messeger”, “Yahoo Messeger”… ra đời

Song song với đó, trong thời đại số hóa, ví điện tử đang trở thành một phần quan trọng trong cuộc sống hàng ngày của mọi người Việc tích hợp ví điện tử vào các nền tảng chat như ứng dụng nhắn tin, chatbot mang lại sự thuận tiện cho người dùng trong việc thanh toán, chuyển tiền và gửi/nhận tiền một cách nhanh chóng.

Khi kết hợp chat và ví điện tử, người dùng có thể thực hiện thanh toán, truy vấn thông tin về tài khoản và thậm chí là thực hiện các giao dịch mua bán thông qua cuộc tròchuyện với chatbot, tạo ra trải nghiệm tương tác thú vị và tiện ích.

Nhưng vấn đề đặt ra là với các phần mềm “chat” như trên thì một yêu cầu gần như bắt buộc là việc phải cài đặt ứng dụng để có thể sự dụng chúng Từ đó nảy sinh ra ý tưởng đưa các ứng dụng chat lên Web Một câu hỏi đặt ra là tại sao lại là web và sự tiện lợi có được là gì khi đưa những ứng dụng “chat” lên web Câu trả lời rất đơn giản: Với “Web” bạn có thể thao tác bất cứ đâu có Internet mà không yêu cầu phải cài đặt ứng dụng Điều đó mang lại sự thuận tiện cho người dùng và đồng thời là sự tiết kiệm tài nguyên máy tính một cách đáng kể.

Vì tất cả những lý do nêu trên, đồ án sẽ tập trung để giải quyết vấn đề xây dựng

một ứng dụng webchat với đề tài “Ứng dụng Webchat tích hợp ví điện tử Leaf”.1.2 Khảo sát một số ứng dụng hiện có

1.2.1 Shopee

Shopee được thành lập vào năm 2015 tại Singapore và nhanh chóng trở thành một trong những nền tảng thương mại điện tử phổ biến nhất ở khu vực Đông Nam Á, bao gồm nhiều quốc gia như Việt Nam, Indonesia, Malaysia, và nhiều quốc gia khác.

Shopee có tích hợp một tính năng chat trong ứng dụng và trang web của họ để giúpngười mua và người bán có thể liên lạc với nhau một cách thuận tiện Điều này cung cấplợi ích cho cả hai bên:

Người mua: Người mua có thể sử dụng tính năng chat để hỏi về sản phẩm, yêu cầu thêm thông tin, đàm phán giá cả, và thậm chí là đặt hàng trực tiếp qua cuộc trò chuyện với người bán.

Người bán: Người bán có thể sử dụng tính năng chat để tương tác với khách hàng, cung cấp thông tin chi tiết về sản phẩm, giải quyết thắc mắc, và hỗ trợ quá trình mua sắm của khách hàng.

Chat trên Shopee thường được sắp xếp theo cuộc trò chuyện và có thể chứa lịch sử trò chuyện giữa người mua và người bán Điều này giúp dễ dàng theo dõi thông tin và giao dịch trên nền tảng

Chat cũng thường được sử dụng để xác nhận các chi tiết về đơn hàng, địa chỉ giao hàng, và thời gian nhận hàng.

Xu là đơn vị tiền tệ ảo được sử dụng trên Shopee, một trong những trang thương mại điện tử lớn và phổ biến tại Đông Nam Á và một số quốc gia khác Xu được sử dụng trong hệ thống Shopee để thực hiện các giao dịch, thanh toán cho đơn hàng, và nhận được các ưu đãi và khuyến mãi từ Shopee.

Figure 1: Giao diện Shopee

Figure 2: Giao diện chat trên Shopee

1.2.2 Zalo

Zalo là một ứng dụng nhắn tin và gọi điện miễn phí phổ biến ở Việt Nam, được phát triển bởi VNG Corporation Ứng dụng này cho phép người dùng gửi tin nhắn, hình ảnh, video, ghi âm, và thực hiện cuộc gọi video Zalo cũng tích hợp các tính năng xã hộinhư tạo nhóm, kết bạn, theo dõi và chia sẻ thông tin trên diễn đàn cá nhân Ngoài ra, Zalo còn cung cấp các dịch vụ giá trị gia tăng như gửi tin nhắn quảng cáo, ví điện tử, đặtvé máy bay và dịch vụ công cộng Zalo liên tục cập nhật và cải tiến để đáp ứng nhu cầu người dùng với giao diện thân thiện và tính năng an toàn thông tin.

Zalo Pay là một dịch vụ ví điện tử được tích hợp trực tiếp vào ứng dụng Zalo, cho phép người dùng thực hiện các giao dịch tài chính một cách nhanh chóng và tiện lợi Là một phần của ứng dụng Zalo, Zalo Pay mang đến trải nghiệm liền mạch khi người dùng muốn chuyển tiền hoặc thanh toán ngay trong quá trình trò chuyện.

Figure 3: Giao diện chat trên Zalo tích hợp ZaloPay

1.4 Đối tượng sử dụng

Người dùng có nhu cầu nhắn tin, gọi điện, sử dụng ví điện tử một cách linh hoạt

1.5 Yêu cầu

1.5.1 Yêu cầu chức năng

 Đối với người dùngo Quản lý tài khoảno Gửi và nhận tin nhắno Gọi thoại, gọi videoo Gửi tệp tin, nhận tệp tin

o Tạo nhóm, ghim tin nhắn nhómo Thêm danh bạ, thêm liên hệ

o Thao tác trên ví điện tử (gửi tiền, nhận tiền)

1.5.2 Yêu cầu phi chức năng

 Yêu cầu về giao diện

o Giao diện thân thiện, bố cục hợp lý, dễ sử dụngo Giao diện thống nhất đồng bộ

 Yêu cầu về bảo mật

o Có sử dụng phân quyền cho từng loại người dùngo Dữ liệu tài khoản người dùng được bảo mậto Dữ liệu ví điện tử của người dùng được bảo mậto Dữ liệu không bị xóa hoàn toàn, có thể khôi phục  Yêu cầu về độ tưởng thích

o IE11/Edgeo Firefoxo Chrome

o Safario Opera

 Yêu cầu về khả năng phát triểno Dễ dàng năng cấp tính năng đã có

o Dễ dàng mở rộng tính năng khi có nhu cầu phát triển Yêu cầu về tính hiệu quả

o Hệ thống quản lý dữ liệu một cách logico Hiệu năng ổn định

o Có khả năng chịu tải tốt

o Sử dụng tài nguyên một cách tối ưu

Chương 2 TỔNG QUAN CÔNG NGHỆ2.1 ReactJs

2.1.1 Định nghĩa

Figure 4: Logo ReactJS

ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa.

Mục đích cốt lõi của ReactJS không chỉ khiến cho trang web phải thật mượt mà còn phải nhanh, khả năng mở rộng cao và đơn giản.

Sức mạnh của nó xuất phát từ việc tập trung vào các thành phần riêng lẻ Chính vì vậy, thay vì làm việc trên toàn bộ ứng dụng web, ReactJS cho phép một developer có thể phá vỡ giao diện người dùng phức tạp thành các thành phần đơn giản hơn.

2.1.2 Cách thức hoạt động

React lưu trữ thông tin của DOM bằng cách tạo một DOM ảo (virtual DOM) trong bộ nhớ của nó Trước khi render các DOM trên trình duyệt, nó sẽ kiểm tra các thay đổi giữa DOM ảo trong quá khứ và hiện tại Nếu có thay đổi, nó sẽ cập nhật DOM ảo và sauđó hiển thị thành DOM thực trên trình duyệt

Figure 5: Mô hình hoạt động của DOM

Vì các thao tác DOM có thể mất rất nhiều thời gian để load, React chỉ thay đổicác DOM node cần thay đổi.

2.1.3 JSX

Figure 6: Đoạn code React sử dụng JSX

Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trangweb thì sẽ dùng JSX JSX được đánh giá là sử dụng đơn giản hơn JavaScript và chophép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML để render cácsubcomponent JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so vớicode JavaScript tương đương.

2.1.4 Redux

Redux là một công cụ quản lý trạng thái Mặc dù nó được sử dụng chủ yếu vớiReact, nhưng nó có thể được sử dụng với bất kỳ khung hoặc thư viện JavaScript nàokhác Nó rất nhẹ ở mức 2KB (bao gồm cả phụ thuộc), vì vậy bạn không phải lo lắng vềviệc nó làm cho ứng dụng của bạn có kích thước lớn.

Với Redux, trạng thái ứng dụng của bạn được giữ trong một "store" và mỗi thànhphần có thể truy cập bất kỳ trạng thái nào mà nó cần từ "store"này Sâu hơn một chútđể xem tại sao bạn có thể cần một công cụ quản lý trạng thái.

Figure 7: Nguyên lý vận hành của Redux

2.1.5 Components

Components là một khái niệm của React App Về cơ bản chúng là các hàm Reacttrả về React elements từ đó hiển thị ra cho UI (giao diện người dùng) Componentsgiúp phân chia các UI thành các phân nhỏ để dễ dàng quản lý và tái sử dụng.

Trong React, tất cả các component này được cấu trúc như các node trong VirtualDOM Sau đó, chúng sẽ hiển thị trên trình duyệt theo cách chúng ta chỉ định

Figure 8: Cấu trúc của Components

2.2 Python

2.2.1 Định nghĩa

Figure 9: Logo Python

Python là một ngôn ngữ lập trình phổ biến được dùng trong web development(server-side), software development, mathematics, system scripting.

Do tính phổ biến và khả năng chạy trên gần như mọi kiến trúc hệ thống, Python là một ngôn ngữ phổ quát được tìm thấy trong nhiều ứng dụng khác nhau.

Python hỗ trợ các mô-đun và packages khác nhau, cho phép sử dụng mô đun chương trình và tái sử dụng mã.

Nhờ vào tính linh hoạt cùng với sự thân thiện dành cho người mới bắt đầu, đãkhiến Python trở thành một trong những ngôn ngữ lập trình được sử dụng nhiều nhất hiện nay.

2.2.2 Đặc trưng

Figure 10: Đặc trưng của Python

 Cú pháp rất tường minh, dễ đọc. Các khả năng tự xét mạnh mẽ. Hướng đối tượng trực giác.

 Cách thể hiện tự nhiên mã thủ tục.

 Hoàn toàn mô-đun hóa, hỗ trợ các gói theo cấp bậc. Xử lý lỗi dựa theo ngoại lệ.

 Kiểu dữ liệu động ở mức rất cao.

 Các thư viện chuẩn và các mô-đun ngoài bao quát hầu như mọi việc. Phần mở rộng và mô-đun dễ dàng viết trong C, C++.

 Có thể nhúng trong ứng dụng như một giao diện kịch bản (scripting interface).

 Python mạnh mẽ và thực hiện rất nhanh.

2.2.3 IDE trong Python

Figure 11: IDE trong Python

IDE (Integrated Development Environment) trong Python là một phần mềm hỗ trợ lập trình Python, cung cấp cho người dùng các công cụ và tính năng để phát triển ứng dụng một cách dễ dàng và hiệu quả.

Một số IDE phổ biến trong Python bao gồm:

 PyCharm: Được phát triển bởi JetBrains, PyCharm là một IDE chuyênnghiệp có nhiều tính năng như phân tích mã nguồn, gỡ lỗi, refactoring,hỗ trợ Git và nhiều loại dữ liệu khác.

 Visual Studio Code: Được phát triển bởi Microsoft, Visual Studio Code là một IDE nhỏ gọn và có khả năng mở rộng, được hỗ trợ bởi cộng đồng lớn của các nhà phát triển.

 Spyder: Spyder là một IDE mã nguồn mở, được phát triển cho khoa học dữ liệu và phân tích Nó có tính năng gỡ lỗi, đánh giá mã nguồn vàhỗ trợ cho IPython.

 IDLE: IDLE là một IDE cơ bản được cung cấp sẵn với Python và hỗ trợ cho các tính năng như gỡ lỗi, trình biên tập mã nguồn và hỗ trợ choshell Python.3

2.2.4 Ứng dụng của Python

Python là ngôn ngữ được ứng dụng đa dạng trong các lĩnh vực.

Làm Web với các Framework của Python: Django và Flask là 2

framework phổ biến hiện nay dành cho các lập trình viên Python để tạo ra các website

Tool tự động hóa: các ứng dụng như từ điển, crawl dữ liệu từ website,

tool giúp tự động hóa công việc được các lập trình viên ưu tiên lựa chọn Python để viết nhờ tốc độ code nhanh của nó.

Khoa học máy tính: Trong Python có rất nhiều thư viện quan trọng phục

vụ cho ngành khoa học máy tính như: OpenCV cho xử lý ảnh và machine learning, Scipy và Numpys cho lĩnh vực toán học, đại số tuyến tính, Pandas cho việc phân tích dữ liệu, …

Lĩnh vực IoT: Python có thể viết được các ứng dụng cho nền tảng nhúng,

đồng thời cũng được lựa chọn cho việc xử lý dữ liệu lớn Vì thế Python là một ngôn ngữ quen thuộc trong lĩnh vực Internet kết nối vạn vật

Làm game: Pygame là một bộ module Python cross-platform được thiết kế

để viết game cho cả máy tính và các thiết bị di động

Figure 12: Ứng dụng của Python

2.3 Microservices

Figure 13:Kiến trúc Monolithic (trái) và Microservices (phải)

Microservices là một kỹ thuật phát triển phần mềm, một biến thể thuộc kiến trúc hướng dịch vụ, cấu trúc một ứng dụng như một tập hợp các dịch vụ được ghép lỏng lẻo Microservices là một thiết kế kiến trúc dùng để xây dựng một ứng dụng phân tán thông qua các container Mỗi chức năng của ứng dụng hoạt động như một dịch vụ độc lập, do đó kiến trúc này được đặt tên mà micro-service Thông qua kiến trúc này, mỗi dịch vụ có thể dễ dàng mở rộng quy mô vàcập nhật mà không làm gián đoạn hay ảnh hưởng bất kỳ dịch vụ nào khác trong ứng dụng.

Kiến trúc microservices xem mỗi chức năng của ứng dụng như một dịch vụđộc lập, có thể được thay đổi, cập nhật hay gỡ bỏ mà không ảnh hưởng gì đến những phần còn lại của ứng dụng.

Một số đặc điểm chính của kiến trúc microservices: Ứng dụng được chia thành nhiều module.

 Ứng dụng có thể được phân phối trên nhiều cloud và data center khác nhau.

 Việc bổ sung tính năng mới chỉ yêu cầu cập nhật từng microservices tương ứng.

Kiến trúc Microservices giúp đơn giản hóa hệ thống, chia nhỏ hệ thống ra làm nhiều service nhỏ lẽ dể dàng quản lý và triển khai từng phần so với kiến trúc nguyên khối Phân tách rõ ràng giữa các service nhỏ Cho phép việc mỗi service được phát triển độc lập Cũng như cho phép lập trình viên có thể tự do chọn lựa technology stack cho mỗi service mình phát triển mỗi service có thể được triển khai một cách độc lập Nó cũng cho phép mỗi service có thể được scale một cách độc lập với nhau Việc scale có thể được thực hiện dễ dàng bằngcách tăng số instance cho mỗi service rồi phân tải bằng load balancer.