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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.92 MB, 47 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍMINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG</b>

<b>BÁO CÁO MÔN HỌC</b>

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

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

<i>TP. Hồ Chí Minh, tháng 05 năm 2023</i>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>LỜI CẢM ƠN</b>

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.

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>NHẬN XÉT CỦA GIẢNG VIÊN</b>

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

<b>Chương 2. TỔNG QUAN CÔNG NGHỆ...18</b>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>Chương 3. THIẾT KẾ HỆ THỐNG...30</b>

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

<b>Chương 4. USE CASE...32</b>

4.1. Use case diagram...32

4.1. Danh sách use case...33

4.2. Đặc tả use case...34

<i>4.2.4. Use case “Message”...36</i>

<i>4.2.5. Use case “ Add/Delete/Archive”...37</i>

<i>4.2.6. Use case “Edit profile”...38</i>

<i>4.2.7. Use case “Transfer”...38</i>

<b>Chương 5. THIẾT KẾ GIAO DIỆN...40</b>

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

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

<b>Chương 7. TÀI LIỆU THAM KHẢO...47</b>

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b>DANH MỤC HÌNH ẢNH</b>

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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>DANH MỤC BẢNG BIỂU</b>

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

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b> DANH MỤC TỪ VIẾT TẮT</b>

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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

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 tố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

<b>một ứng dụng webchat với đề tài “Ứng dụng Webchat tích hợp ví điện tử Leaf”.</b>

<b>1.2. Khảo sát một số ứng dụng hiện có</b>

<b>1.2.1 Shopee </b>

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.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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.

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<i>Figure 1: Giao diện Shopee</i>

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<i>Figure 2: Giao diện chat trên Shopee</i>

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

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. Ngồ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 tồ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 tốn ngay trong q trình trị chuyện.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>1.4. Đối tượng sử dụng </b>

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

<b>1.5. Yêu cầu</b>

 Đố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)

 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 hồn tồn, có thể khơi phục  Yêu cầu về độ tưởng thích

o IE11/Edgeo Firefoxo Chrome

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>Chương 2. TỔNG QUAN CÔNG NGHỆ2.1. ReactJs</b>

<i>2.1.1. Định nghĩa</i>

<i>Figure 4: Logo ReactJS</i>

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 tồ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.

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<i>2.1.2 Cách thức hoạt động</i>

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.

<i>Figure 5: Mơ hình hoạt động của DOM </i>

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.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<i>2.1.3 JSX</i>

<i>Figure 6: Đoạn code React sử dụng JSX</i>

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.

<i>2.1.4 Redux</i>

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.

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

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

<i>2.1.5 Components </i>

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 .

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<i>Figure 8: Cấu trúc của Components</i>

<b>2.2. Python</b>

<i>2.2.1. Định nghĩa</i>

<i>Figure 9: Logo Python</i>

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.

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

<i>2.2.2. Đặc trưng</i>

<i>Figure 10: Đặc trưng của Python</i>

 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.

 Hồn tồ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 ngồi bao qt 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.

<i>2.2.3 IDE trong Python</i>

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<i>Figure 11: IDE trong Python</i>

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 chunnghiệ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

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<i>2.2.4 Ứng dụng của Python</i>

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

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

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.

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

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ó.

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

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, …

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

đồ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

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

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

<i>Figure 12: Ứng dụng của Python</i>

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>2.3. Microservices</b>

<i>Figure 13:Kiến trúc Monolithic (trái) và Microservices (phải)</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.

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

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.

</div>