TỔNG QUAN
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”.
Khảo sát một số ứng dụng hiện có
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úp ngườ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ấp lợ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 2: Giao diện chat trên Shopee
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ội như 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ử, đặt vé 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
Mục tiêu
Người dùng có thể thao tác cơ bản như tạo tài khoản, đăng nhập, trò chuyện, thực hiện cuộc gọi, gửi tài liệu.
Chủ hệ thống có thể phát triển dễ dàng, tối ưu
Hệ thống gọn nhẹ, có thể mở rộng dễ dàng
Giao diện thân thiện, dễ sử dụng
Đố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
Yêu cầu
Đối với người dùng o Quản lý tài khoản o Gửi và nhận tin nhắn o Gọi thoại, gọi video o Gửi tệp tin, nhận tệp tin o Tạo nhóm, ghim tin nhắn nhóm o 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ụng o 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ùng o Dữ liệu tài khoản người dùng được bảo mật o Dữ liệu ví điện tử của người dùng được bảo mật o 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/Edge o Firefox o Chrome o Safari o Opera
Yêu cầu về khả năng phát triển o 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 logic o 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
TỔNG QUAN CÔNG NGHỆ
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.
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 đổi các DOM node cần thay đổi.
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 trang web thì sẽ dùng JSX JSX được đánh giá là sử dụng đơn giản hơn JavaScript và cho phép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML để render các subcomponent JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so với code JavaScript tương đương.
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ới React, nhưng nó có thể được sử dụng với bất kỳ khung hoặc thư viện JavaScript nào khá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ành phầ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 React trả về React elements từ đó hiển thị ra cho UI (giao diện người dùng) Components giú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
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.
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.
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ên nghiệ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ợ cho shell Python.3
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
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ằng cách tăng số instance cho mỗi service rồi phân tải bằng load balancer.
MongoDB
MongoDB là một chương trình cơ sở dữ liệu mã nguồn mở được thiết kế theo kiểu hướng đối tượng trong đó các bảng được cấu trúc một cách linh hoạt cho phép các dữ liệu lưu trên bảng không cần phải tuân theo một dạng cấu trúc nhất định nào Chính do cấu trúc linh hoạt này nên MongoDB có thể được dùng để lưu trữ các dữ liệu có cấu trúc phức tạp và đa dạng và không cố định
Các ad hoc query: hỗ trợ search bằng field, các phép search thông thường, regular expression searches, và range queries.
Indexing: bất kì field nào trong BSON document cũng có thể được index.
Replication: có ý nghĩa là “nhân bản”, là có một phiên bản giống hệt phiên bản đang tồn tại, đang sử dụng Với cơ sở dữ liệu, nhu cầu lưu trữ lớn, đòi hỏi cơ sở dữ liệu toàn vẹn, không bị mất mát trước những sự cố ngoài dự đoán là rất cao Vì vậy, người ta nghĩ ra khái niệm “nhân bản”, tạo một phiên bản cơ sở dữ liệu giống hệt cơ sở dữ liệu đang tồn tại, và lưu trữ ở một nơi khác, đề phòng có sự cố.
Aggregation: Các Aggregation operation xử lý các bản ghi dữ liệu và trả về kết quả đã được tính toán Các phép toán tập hợp nhóm các giá trị từ nhiều Document lại với nhau, và có thể thực hiện nhiều phép toán đa dạng trên dữ liệu đã được nhóm đó để trả về một kết quả duy nhất Trong SQL, count(*) và GROUP BY là tương đương với Aggregation trong MongoDB.
Lưu trữ file: MongoDB được dùng như một hệ thống file tận dụng những function trên và hoạt động như một cách phân phối qua sharding.
1 _id field được MongoDB thêm vào để xác định duy nhất document trong collection.
2 Những gì bạn có thể lưu ý là Order Data (OrderID, Product và Quanity) trong
RDBMS thường sẽ được lưu trữ trong một table riêng biệt, trong khi trong MongoDB, nó thực sự được lưu trữ dưới dạng document nhúng trong chính collection Đây là một trong những điểm khác biệt chính về cách dữ liệu được mô hình hóa trong MongoDB.
THIẾT KẾ HỆ THỐNG
Công nghệ sử dụng
● Ngôn ngữ: TypeScript, React, Python
● Kiến trúc ứng dụng: Client-Server
Kiến trúc hệ thống: Mô hình Client-Server
- Lớp Client: Hiển thị giao diện người dùng, thông qua kết nối Internet để kết nối đến cơ sở dữ liệu quản lý thư viện Là nơi diễn ra các tương tác của người dùng với chương trình như nhập, các thao tác truy xuất dữ liệu.
- Lớp Server: Quản lý và chứa toàn bộ dữ liệu của phần mềm Đồng thời xử lý các yêu cầu nhập/xuất được gửi xuống từ lớp Client Ứng dụng được dùng làm lớp Server là Nodejs và Database là PosgreSql.
Figure 16: Kiến trúc client-server
Kiến trúc Cache: Redis
● Khi ứng dụng cần đọc dữ liệu từ database, nó sẽ kiểm tra trước xem cache có chứa dữ liệu mình cần không.
● Nếu có (cache hit) thì trả về dữ liệu cần truy vấn.
● Nếu dữ liệu không có sẵn trong cache (cache miss) thì ứng dụng sẽ lấy dữ liệu từ database.
Figure 19: Cache Aside 3.3.2 Cache invalidation
Khi dữ liệu trong database bị thay đổi thì dữ liệu trong cache đã bị cũ và không còn chính xác Lúc này, cần thực hiện update hoặc gỡ bỏ những dữ liệu đã hết hạn trong cache, quá trình này gọi là cache invalidation.
● Có thể cài thời gian sống (TTL) cho mỗi dữ liệu cache, tùy theo tần số thay đổi của dữ liệu, tần suất được truy vấn của dữ liệu, độ quan trọng của dữ liệu,
● Để tránh tình huống nhiều người dùng đang sử dụng ứng dụng, đúng lúc cache hết hạn đồng loạt khiến server đột ngột chịu tải lớn thì có thể đặt thời gian sống của mỗi dữ liệu khác nhau bằng cách đặt TTL là một giá trị ngẫu nhiên trong một khoảng nào đó.
Mô hình MVC
Mô hình MVC (Model – View – Controller) là một kiến trúc phần mềm hay mô hình thiết kế được sử dụng trong kỹ thuật phần mềm Nó giúp tách ứng dụng thành 3 phần khác nhau: Model (Xử lý dữ liệu), View (Hiển thị) và Controller (Điều khiển) Mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với nhau.
Dùng để cung cấp dữ liệu, thực hiện kết nối, các thao tác với dữ liệu như: thêm, sửa, xóa, lọc ,… truy vấn dữ liệu trong database, tương tác với dữ liệu hay hệ quản trị cơ sở dữ liệu.
● View Đảm nhận việc hiển thị thông tin, giúp người dùng tương tác với hệ thống Hiểu một cách đơn giản, nó là tập hợp các file HTML.
Giữ nhiệm vụ tiếp nhận điều hướng các yêu cầu từ người dùng, giúp lấy dữ liệu đúng với những thông tin cần thiết nhờ vào các nghiệp vụ lớp Model cung cấp và hiển thị các dữ liệu đó ra cho người dùng.
Với express-generator, chúng ta đã có sẵn 2 thư mục views chứa các file template (ví dụ ejs), các file này được dùng để hiển thị dữ liệu, tương tự với phần Views trong MVC, thư mục routes dùng để chuyển hướng các URL đến các hàm xử lý tương ứng, tương tự thành phần controller trong MVC.
USE CASE
Use case diagram
1 User Người dùng bình thườngtả
Danh sách use case
Table 2: Danh sách use case
1 Login Người dùng kết nối vào apptả
2 Register Người dùng đăng kí app
3 Call Người dùng gọi thoại cho người dùng khác
4 Message Người dùng gửi tin nhắn cho người dùng khác
5 Add friends Người dùng kết bạn với người dùng khác
6 Edit profile Người dùng chỉnh sửa profile của mình
7 LWallet Người dùng nhận và chuyển tiền qua LWallet
Đặc tả use case
Table 3: Đặc tả use case "Đăng nhập"
Mô tả Người dùng đăng nhập vào app
3 Nhấn Login Luồng thay thế Nếu textbox “Password” bị bỏ trống, hiển thị thông báo yêu cầu người dùng nhập password Điều kiện kích hoạt Người dùng phải duyệt Điều kiện cần Phải có tài khoản trong database
Kết quả Mở giao diện chính của web
Table 4: Đặc tả use case "Đăng kí "
Mô tả Đăng kí tài khoản cho người dùng
Luồng chính 1 App yêu cầu nhập gmail và pass word
2 App gửi gmail xác nhận
Luồng thay thế Không. Điều kiện kích hoạt Người dùng xác nhận Điều kiện cần Gmail đúng định dạng
Kết quả UI cập nhật thông tin trạng thái đăng kí
Table 5: Đặc tả use case "Call”
Mô tả Người dùng gọi điện cho 1 người dùng khác
Luồng chính 1 Chọn người dùng khác cần gọi
Luồng thay thế Không Điều kiện kích hoạt Không. Điều kiện cần Không
Kết quả Kết nối thoại với người dùng khác
Table 6: Đặc tả use case "Message"
Mô tả Người dùng gửi tin nhắn, file, voice cho người dùng khác
Luồng chính 1 Người dùng chọn người dùng khác
2 Người dùng gửi cho người dùng khác nội dung muốn gửi, text, pdf file, image
Luồng thay thế Không Điều kiện kích hoạt Người dùng đồng ý gửi Điều kiện cần không
4.2.5 Use case “ Add/Delete/Archive”
Table 7: Đặc tả use case "Add "
Mô tả Người dùng thêm người dùng khác thành các trạng thái khác nhau
Luồng chính 1 Người dùng tìm tên hoặc id của người dùng khác
2 Bấm button “Add/Lưu trữ/Delete” để thay đổi trạng thái người dùng
Luồng thay thế Không Điều kiện kích hoạt Người dùng đồng ý Điều kiện cần Không.
Kết quả Đoạn chat được thay đổi trạng thái
Table 8: Đặc tả use case " Edit profile "
Mô tả Người dùng thay đổi thông tin
Luồng chính 1 Người dùng chọn thông tin cần thay đổi
Luồng thay thế Không Điều kiện kích hoạt Người dùng đồng ý Điều kiện cần Không.
Kết quả Thông tin được thay đổi
Table 9: Đặc tả use case "Transfer "
Mô tả Người dùng chuyển tiền cho người dùng khác từ ví LWallet
Luồng chính 1 Chọn người dùng cần chuyển
2 Chọn số tiền muốn chuyển
3 Bấm đồng ý Luồng thay thế Người dùng không đồng ý, giao dịch thất bại Điều kiện kích hoạt Người dùng đồng ý Điều kiện cần Người dùng phải sở hữu đủ số dư
Kết quả Tiền được chuyển
THIẾT KẾ GIAO DIỆN
Giao diện “Login”
Figure 18: Giao diện Đăng nhập
Figure 19: Giao diện Đăng kí
Giao diện “Trang chính”
Figure 20: Giao diện "trang chính"
Giao diện “Đoạn chat”
Figure 21: Giao diện "Đoạn chat”
Giao diện “My profile”
Figure 22: Giao diện "My profile"
Giao diện “Call”
Figure 24: Giao diện "CALL Video”
Giao diện “Ví LWallet”
Figure 25: Giao diện ví LWallet
Figure 26: Giao diện “nạp tiền LWallet”
Figure 27: Giao diện “chuyển tiền LWallet”
Figure 28: Giao diện “lịch sử giao dịch LWallet”
TỔNG KẾT
Kết quả
Web có đầy đủ tính năng của một ứng dụng chat thông thường
Không xảy ra hiện tượng lỗi, rò rỉ bảo mật
Tương thích với mọi người dùng
Hạn chế
Xử lý socket còn chậm
Giao diện ví còn đơn giản
Source Code
https://github.com/mrsaidia/LeafChat
Cài đặt
Dùng các câu lệnh sau để chạy FE:
NODE_OPTIONS= openssl-legacy-provider npm start
Dùng các câu lệnh sau để run BE: python3 run
Hướng phát triển
Phát triển thêm NFT vào LWallet
6.5.2 Cải thiện trải nghiệm đồ họa
Về UI: o Chau chuốt hơn về hình ảnh o Cải thiện giao diện dễ sử dụng hơn