đồ án 1 xây dựng ứng dụng giải trí luyện ngôn ngữ

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

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

<b>KHOA CƠNG NGHỆ PHẦN MỀM </b>

<b>ĐỒ ÁN 1</b>

<b>XÂY DỰNG ỨNG DỤNG GIẢI TRÍ LUYỆN NGƠN NGỮ </b>

<b>GV HƯỚNG DẪN: ThS. Trần Thị Hồng Yến </b>

<b>SV THỰC HIỆN: </b>

<b>Nguyễn Quốc Khánh -21520982 </b>

<b>TP. HỒ CHÍ MINH, 2023</b>

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

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

<b>Ths. Trần Thị Hồng Yến </b>

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

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

Lời đầu tiên, em xin gửi lời tri ân sâu sắc đến Cơ Trần Thị Hồng Yến vì đã đồng hành cùng em trong suốt chặng đường thực hiện môn Đồ án 1. Qua thời gian đó, em đã gặp khơng ít trở ngại, nhưng nhờ sự hướng dẫn tận tình của Cơ mà em đã vượt qua được những khó khăn đó. Sự nhiệt huyết và tận tâm của Cơ Yến khơng chỉ là nguồn động viên lớn mà cịn là nguồn động lực mạnh mẽ, giúp em vượt qua được những thách thức và hoàn thành được đồ án này.

Em cũng xin được gửi lời cảm ơn chân thành đến Ban Giám Hiệu trường Đại Học Công Nghệ Thông Tin vì sự quan tâm và hỗ trợ liên tục của Trường. Chính vì Trường đã tạo ra mơi trường học tập tích cực và đầy đủ điều kiện cho chúng em phát triển, em mới được trang bị đầy đủ kiến thức, qua đó vận dụng tốt các kiến thức và kỹ năng đã được họp trong môn Nhập môn công nghệ phần mềm, cũng như kiến thức về lập trình và tổ chức cơ sở dữ liệu.

Tuy trong q trình nghiên cứu đề tài, em vẫn cịn rất nhiều thiếu sót khi tìm hiểu, đánh giá, trình bày về đề tài, em rất mong nhận được sự quan tâm, góp ý của cơ và Ban Giám Hiệu nhà trường để em có thể phát triển đề tài của mình hơn.

Một lần nữa, em xin chân thành cảm ơn Cô và Ban Giám Hiệu Nhà trường.

Trân trọng,

Nguyễn Quốc Khánh

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

1.3. Mục tiêu của đề tài ... 12

1.4. Phương pháp nghiên cứu ... 12

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

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

Chương 3. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ... 21

3.1. Sơ đồ use case ... 21

3.2. Sơ đồ lớp ... 30

Chương 4. CÀI ĐẶT VÀ TRIỂN KHAI HỆ THỐNG ... 32

4.1. Môi trường cài đặt ... 32

4.1.1. Phía server ... 32

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

4.1.2. Phía client ... 32

4.1.3. Mơi trường phát triển ... 32

4.2. Thiết kế giao diện ... 33

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

7

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

Hình 2.1: Ngơn ngữ lập trình Dart ... 14

Hình 2.2: Framework Flutter... 15

Hình 2.3: Mơi trường NodeJS ... 16

Hình 2.4: Cơ sở dữ liệu MongoDB ... 17

Hình 2.5: Firebase ... 18

Hình 2.6: Cơng cụ kiểm thử Postman ... 19

Hình 3.1: Sơ đồ use case đăng nhập ... 21

Hình 3.2: Sơ đồ use case màn hình Journey ... 22

Hình 3.3: Sơ đồ use case màn hình Practice ... 22

Hình 3.4: Sơ đồ use case màn hình Leaderboard và Profile ... 23

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

8

Hình 4.19: Màn hình game Connect string ... 42

Hình 4.20: Màn hình kết quả game Connect string ... 42

Hình 4.21-22: Màn hình đáp án của game Connect string... 43

Hình 4.23: Màn hình game Fill answer ... 44

Hình 4.24: Màn hình game Reorder sentence ... 45

Hình 4.25-26: Màn hình game Word categorize ... 46

Hình 4.27: Màn hình kết quả... 47

Hình 4.28-29: Màn hình Reading Test ... 48

Hình 4.30: Màn hình bảng xếp hạng ... 49

Hình 4.31: Màn hình hồ sơ người dùng ... 50

Hình 4.32: Màn hình chỉnh sửa hồ sơ người dùng ... 50

Hình 4.33: Màn hình đổi giao diện người dùng ... 51

Hình 4.34: Màn hình xác nhận chỉnh sửa hồ sơ người dùng ... 51

Hình 4.35-36: Màn hình biểu đồ thống kê điểm của người dùng ... 52

Hình 4.37-38: Màn hình practice screen của Administrator ... 53

Hình 4.39: Màn hình danh sách các câu hỏi reading ... 54

Hình 4.40: Màn hình tạo mới bài reading ... 54

Hình 4.41-42: Màn hình mẫu câu hỏi Reading ... 55

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

9

<b>DANH MỤC BẢNG </b>

Bảng 3.1: Bảng dach sách các actor ... 23

Bảng 3.2: Bảng mô tả use case... 23

Bảng 3.3: Bảng đặc tả use case đăng ký ... 24

Bảng 3.4: Bảng đặc tả use case đăng nhập ... 25

Bảng 3.5: Bảng đặc tả use case màn hình set up ... 25

Bảng 3.6: Bảng đặc tả use case màn hình Journey ... 26

Bảng 3.7: Bảng đặc tả use case màn hình pratice ... 27

Bảng 3.8: Bảng đặc tả use case màn hình Leaderboard ... 27

Bảng 3.9: Bảng đặc tả use case màn hình User Profile... 28

Bảng 3.10: Bảng đặc tả use case màn hình admin ... 28

Bảng 3.11: Bảng mô tả các trường dữ liệu ... 30

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

10

<b>TÓM TẮT ĐỒ ÁN </b>

Trong đồ án "Xây dựng ứng dụng giải trí luyện ngơn ngữ", em tập trung vào phát triển một ứng dụng di động với tên gọi là “AtoZ - Ứng dụng giải trí luyện ngơn ngữ”, với mục đích cung cấp trải nghiệm học tập ngôn ngữ đa dạng và thú vị cho người dùng. Ứng dụng này bao gồm các chức năng chính như bài kiểm tra từ vựng, trị chơi giáo dục, và thống kê tiến độ học tập. Sử dụng các cơng nghệ lập trình phù hợp và cơ sở dữ liệu, đồ án nhằm tạo ra một môi trường học tập linh hoạt, tích cực, và đồng thời đảm bảo tính hấp dẫn và giải trí cho người sử dụng. Mục tiêu cuối cùng là đạt được phản hồi tích cực từ người dùng và tạo ra một ứng dụng hữu ích trong lĩnh vực giáo dục và giải trí luyện ngơn ngữ.

Nội dung đồ án được trình bày trong 5 chương, như sau:

• Chương 01 – Mở đầu: Giới thiệu sơ lược về đề tài đã chọn, lý do chọn đề tài này, mục tiêu, phương pháp nghiên cứu, đối tượng và phạm vi nghiên cứu. • Chương 02 – Kiến thức và công nghệ nền tảng: Giới thiệu về các công nghệ

được sử dụng, cách thức hoạt động, ưu điểm của các cơng nghệ đó.

• Chương 03 – Xây dựng ứng dụng: Mô tả các sơ đồ đặc tả Use Case, quy trình sử dụng, trình tự hệ thống, thiết kế dữ liệu.

• Chương 04 – Cài đặt và triển khai hệ thống: Mô tả môi trường cài đặt và thiết kế giao diện người dùng.

• Chương 05 – Tổng kết: Trình bày ngắn gọn kết quả đạt được trong quá trình thực hiện đồ án, các hạn chế và định hướng phát triển trong tương lai.

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

11

<b>Chương 1. MỞ ĐẦU </b>

<b>1.1. Giới thiệu về đề tài </b>

Trong bối cảnh thế giới ngày càng hội nhập, việc biết nhiều ngôn ngữ là điều

nên bắt đầu ngay từ khi ta cịn trẻ, vì khi đó chúng ta sẽ tiếp thu kiến thức mới nhanh hơn so với khi chúng ta già đi. Tuy nhiên, không phải người trẻ nào cũng có điều kiện để đầu tư cho bản thân học thêm ngôn ngữ mới, và cũng không đủ kiên nhẫn để theo học ngơn ngữ đó tới cùng, nên dễ xảy ra tâm trạng chán nản, từ bỏ.

Với thực trạng trên, việc phát triển một công cụ để hỗ trợ cho các bạn trẻ có thể dễ dàng tiếp cận với việc học ngôn ngữ là rất cần thiết. Nó khơng chỉ giúp cho các bạn có những bài học bổ ích, mà cịn giúp tiết kiếm thời gian, công sức mà quan trọng nhất là tiền bạc – thứ mà phần lớn những người trẻ như học sinh, sinh viên khơng có – để đi học ngơn ngữ ở các trung tâm.

<i><b>Chính vì thế, em quyết định đăng ký đề tài “Xây dựng ứng dụng giải trí học ngơn ngữ” để giúp cho các bạn học sinh, sinh viên hay thậm chí là người lớn có thể tự học </b></i>

bất kỳ ngôn ngữ nào mà không cần phải ra trung tâm hoặc mua sách về học. Ứng dụng này khơng chỉ tạo ra với mục đích học tập mà cịn là để giải trí bằng nhiều trị chơi khác nhau, giúp cho người dùng có thể vừa học vừa chơi sau những giờ học tập và làm việc căng thẳng. Em tin rằng ứng dụng Giải trí luyện ngơn ngữ AtoZ sẽ là cơng cụ hữu ích cũng như là người bạn đồng hành tốt nhất cho mọi người.

<b>1.2. Lý do chọn đề tài </b>

Lý do mà em chọn đề tài này là vì:

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

12

<b>- Tầm quan trọng của học ngôn ngữ: Việc học ngôn ngữ không chỉ là một kỹ </b>

năng hữu ích mà cịn là một cánh cửa mở ra nhiều cơ hội trong cuộc sống nói riêng và trong sự nghiệp nói chung.

<b>- Cơ hội tiếp cận thị trường lớn: Ứng dụng AtoZ có khả năng tiếp cận đến đa </b>

dạng đối tượng người dùng không chỉ vì AtoZ có giao diện ưa nhìn, bắt mắt mà cịn mang đến cho người dùng những game giải trí giải tỏa căng thẳng. Việc kết hợp giải trí và học tập là một cách mạnh mẽ để khích lệ người học, tạo động lực và giữ cho họ cam kết với quá trình học.

<b>- Học tập và nghiên cứu ngôn ngữ mới: Em chọn đề tài này là để cho bản thân </b>

cơ hội nghiên cứu và xây dựng, phát triển một ứng dụng trên nền tảng di động, sử dụng công nghệ Flutter.

<b>1.3. Mục tiêu của đề tài </b>

Mục tiêu của đề tài này là xây dựng phần mềm ứng dụng giải trí luyện ngơn ngữ để giúp cho những người có nhu cầu (nhất là các bạn học sinh, sinh viên) có thể dễ dàng tự học ngôn ngữ, cũng như là giải tỏa căng thẳng sau những giờ học và làm việc mệt mỏi.

<b>1.4. Phương pháp nghiên cứu </b>

- Trải nghiệm và quan sát các ứng dụng luyện ngơn ngữ hiện có trên thị trường như “Duolingo”, “Memrise”, “Cake”,… Từ đó, đề ra các yêu cầu chức năng và phi chức năng.

- Phân tích ưu và nhược điểm của các ứng dụng nêu trên, từ đó rút kinh nghiệm và áp dụng để phát triển đề tài.

- Khảo sát ý kiến của các bạn sinh viên cùng tuổi và các bạn học sinh về giao diện và nhu cầu chức năng mong muốn của từng đối tượng.

- Nghiên cứu tài liệu các công nghệ liên quan, cập nhật phiên bản mới và ứng dụng chúng.

- Hoàn thiện sản phẩm.

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

<b>1.5.2. Phạm vi nghiên cứu </b>

- Ứng dụng sẽ bao gồm một màn hình chứa các màn chơi, qua đó người dùng sẽ được chọn vịng bất kỳ mà mình muốn chơi. Ngồi ra sẽ có một màn hình khác giúp cho người sử dụng luyện hai kỹ năng đọc và viết, màn hình theo dõi xếp hạng của người dùng và màn hình hồ sơ cá nhân của người dùng.

- Đề tài này sẽ tập trung vào phát triển tính năng cụ thể của người dùng, bao gồm nhiều loại trị chơi đa dạng, tính năng gợi ý bài học phù hợp vào trình độ mà người dùng đã chọn, thuật toán tự động nâng cấp trình độ người dùng sau khi đã hồn thành đủ số màn chơi tương ứng, và một biểu đồ phân tích q trình học của người dùng.

- Nghiên cứu các công nghệ và framework được sử dụng trong việc phát triển ứng dụng như Flutter và Dart, môi trường xây dựng backend server như NodeJS, hệ quản trị cơ sở dữ liệu MongoDB, công cụ kiểm thử API Postman, và các dịch vụ khác như Firebase, Github, Figma,…

- Áp dụng các thư viện khác của Flutter để xây dựng và hoàn thiện giao diện người dùng đẹp, dễ sử dụng, bắt mắt cho người dùng.

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

14

<b>Chương 2. TỔNG QUAN VỀ CÔNG NGHỆ SỬ DỤNG </b>

<b>2.1. Dart </b>

<i>Hình 2.1: Ngơn ngữ lập trình Dart </i>

Khái niệm: Dart, là một ngơn ngữ lập trình đa mục đích mã nguồn mở, đã được đặt nền móng bởi Google. Đây là một khía cạnh của ngơn ngữ lập trình hướng đối tượng, đặc trưng bởi cú pháp kiểu C. Tinh thần lập trình hướng đối tượng thể hiện qua việc hỗ trợ giao diện và lớp, mở ra khả năng sáng tạo không giới hạn khi đặt lên bàn cân với những ngôn ngữ khác. Sự đa dạng của Dart thể hiện thông qua khả năng phát triển ứng dụng web, di động, máy chủ và máy tính để bàn.

Ưu điểm nổi bật:

• Là ngơn ngữ mở rộng, linh hoạt, tạo điều kiện tích cực cho việc biên dịch trở nên nhanh chóng hơn.

• Có tính ổn định tốt, được sử dụng để xây dựng các ứng dụng về thời gian thực với hiệu suất cao.

• Hỗ trợ cả biên dịch Vừa đúng lúc (JIT) và biên dịch Trước thời hạn (AOT). • Có thể thích ứng nhanh chóng với các quy trình cơng việc có sự thay đổi.

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

15

<b>2.2. Flutter </b>

<i>Hình 2.2: Framework Flutter </i>

Khái niệm: Flutter là một framework phát triển ứng dụng di động open-source được phát triển bởi Google. Nó cho phép lập trình viên xây dựng ứng dụng di động chất lượng cao từ một mã nguồn duy nhất và triển khai chúng trên nhiều nền tảng khác nhau như Android, iOS, web và desktop.

Đặc điểm nổi bật:

• Ngơn ngữ lập trình Dart: Flutter sử dụng Dart, một ngơn ngữ lập trình được phát triển bởi Google, cho cả lớp logic ứng dụng và giao diện người dùng. • Widget-based UI: Flutter sử dụng mơ hình lập trình dựa trên widget, là các

thành phần xây dựng giao diện người dùng. Các widget có thể được kết hợp để tạo thành giao diện người dùng phức tạp.

• Đa nền tảng: Với Flutter, bạn có thể xây dựng một ứng dụng và triển khai nó trên nhiều nền tảng khác nhau mà không cần viết lại mã nguồn nhiều lần. Điều này giúp giảm chi phí phát triển và duy trì ứng dụng.

• Expressive and Flexible UI: Có rất nhiều các thành phần để xây dựng giao diện của Flutter vô cùng đẹp mắt theo phong cách Material Design và Cupertino, hỗ trợ nhiều các APIs chuyển động, smooth scrolling

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

16

• Fast Development: Tíng năng Hot Reload hoạt động trong milliseconds để hiện thị giao diện tới bạn. Sử dụng tập hợp các widget có thể customizable để xây dựng giao diện trong vài phút. Ngoài ra Hot Reload cịn giúp bạn thêm các tính năng, fix bug tiết kiệm thời gian hơn mà không cần phải thông qua máy ảo, máy android hoặc iOS.

<b>2.3. Node JS </b>

<i>Hình 2.3: Môi trường NodeJS </i>

Khái niệm: Node.js là một môi trường chạy mã nguồn mở dựa trên JavaScript, được xây dựng trên V8, động cơ JavaScript của Google Chrome. Nó cho phép phát triển các ứng dụng mạng nhanh chóng và mở rộng quy mơ dễ dàng. Node.js được phát triển bởi Ryan Dahl vào năm 2009 và đã trở thành một công cụ phổ biến trong việc phát triển phần mềm, đặc biệt là về phía server-side trong các ứng dụng web..

Ưu điểm nổi bật:

• Node.js sử dụng mơ hình I/O khơng chặn (non-blocking I/O), giúp xử lý nhiều kết nối cùng lúc một cách hiệu quả. Điều này làm cho Node.js rất phù hợp cho việc xây dựng các ứng dụng mạng có hiệu suất cao, như chơi game trực tuyến, chat, hoặc các ứng dụng cần xử lý một lượng lớn dữ liệu thời gian thực.

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

17

• Node.js mở rộng khả năng của JavaScript từ client-side đến server-side, giúp các nhà phát triển có thể sử dụng một ngôn ngữ duy nhất cho cả frontend và backend, đơn giản hóa q trình phát triển.

• Với cộng đồng lập trình viên lớn và sơi động, Node.js có một hệ sinh thái thư viện mạnh mẽ, được quản lý thông qua npm (Node Package Manager), giúp dễ dàng tìm và sử dụng hàng ngàn module và công cụ.

<b>2.4. Mongo DB </b>

<i>Hình 2.4: Cơ sở dữ liệu MongoDB </i>

Khái niệm: MongoDB là một hệ thống quản lý cơ sở dữ liệu NoSQL mã nguồn mở, sử dụng mơ hình dữ liệu dạng tài liệu (document-oriented). Được ra mắt vào năm 2009, MongoDB được thiết kế để cung cấp một cách lưu trữ dữ liệu linh hoạt, mở rộng quy mô dễ dàng, và dễ dàng tích hợp với ứng dụng hiện đại. Nó lưu trữ dữ liệu dưới dạng tài liệu BSON (một định dạng giống JSON), giúp nó trở thành một lựa chọn phổ biến cho các ứng dụng web và mobile.

Ưu điểm nổi bật:

• MongoDB khơng u cầu một cấu trúc dữ liệu cố định, cho phép lưu trữ tài liệu có cấu trúc đa dạng. Điều này giúp dễ dàng thích nghi với thay đổi yêu cầu và dữ liệu.

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

18

• MongoDB cung cấp hiệu suất truy vấn cao, đặc biệt là với các hoạt động đọc và ghi dữ liệu. Các chỉ mục được hỗ trợ tốt giúp tăng cường hiệu suất truy vấn. • Hỗ trợ mở rộng quy mô theo chiều ngang thông qua sharding, cho phép quản

lý hiệu quả lượng lớn dữ liệu và giao dịch.

<b>2.5. Firebase </b>

<i>Hình 2.5: Firebase </i>

Khái niệm: Firebase là một nền tảng của Google cung cấp nhiều dịch vụ và công cụ để phát triển và quản lý ứng dụng di động và web. Firebase được thiết kế để giảm bớt gánh nặng cho các nhà phát triển bằng cách cung cấp các tính năng quản lý cơ sở dữ liệu, xác thực người dùng, lưu trữ tệp, và nhiều tính năng khác.

Ưu điểm nổi bật:

• Cơ sở Dữ liệu Firestore và Realtime: Firebase cung cấp cơ sở dữ liệu Firestore, một cơ sở dữ liệu NoSQL dựa trên tài liệu, và Realtime Database, một cơ sở dữ liệu JSON thời gian thực. Cả hai đều giúp lưu trữ và đồng bộ dữ liệu giữa các ứng dụng di động và web.

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

19

• Xác thực người dùng : Firebase cung cấp dịch vụ xác thực người dùng, giúp quản lý đăng ký, đăng nhập và xác thực người dùng thông qua nhiều phương tiện đăng nhập như email, Google, Facebook, Twitter, và nhiều hơn nữa. • Lưu Trữ Tệp: Dịch vụ lưu trữ của Firebase cho phép bạn lưu trữ và quản lý

tệp như hình ảnh, video, và tệp tin khác trên đám mây.

• Cloud Functions: Firebase Cloud Functions cho phép bạn triển khai mã nguồn và chạy các chức năng (functions) trên đám mây một cách tự động khi có sự kiện kích hoạt, chẳng hạn như khi có sự thay đổi trong cơ sở dữ liệu.

• Hosting và CDN: Firebase Hosting cung cấp một nền tảng để triển khai và chạy ứng dụng web của bạn trên các máy chủ toàn cầu với hỗ trợ CDN, giúp tối ưu hóa hiệu suất của ứng dụng.

<b>2.6. Postman </b>

<i>Hình 2.6: Công cụ kiểm thử Postman </i>

Khái niệm: Postman hiện là một trong những công cụ phổ biến nhất được sử dụng trong kiểm thử API. Nó bắt đầu vào năm 2012 như một dự án phụ của Abhinav Asthana để đơn giản hóa quy trình làm việc API trong kiểm thử và phát triển. API là viết tắt của giao diện lập trình ứng dụng cho phép các ứng dụng phần mềm giao tiếp với nhau thông qua các lệnh gọi API.

Ưu điểm nổi bật:

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

20

• Khả năng truy cập: Để sử dụng Postman, người ta chỉ cần đăng nhập vào tài khoản của chính họ để dễ dàng truy cập các tệp mọi lúc, mọi nơi miễn là ứng dụng Postman được cài đặt trên máy tính.

• Sử dụng Collection: Postman cho phép người dùng tạo collection cho các lệnh gọi API của họ. Mỗi collection có thể tạo các thư mục con và nhiều yêu cầu. Điều này giúp tổ chức lại các bộ kiểm thử của bạn.

• Cộng tác: Collection và mơi trường có thể được nhập hoặc xuất để dễ dàng chia sẻ tệp. Một liên kết trực tiếp cũng có thể được sử dụng để chia sẻ collection.

• Tích hợp nhiều phương thức HTTP: Postman hỗ trợ nhiều phương thức HTTP như GET, POST, PUT, DELETE, và nhiều phương thức khác, giúp người dùng kiểm thử và thực hiện các yêu cầu API đa dạng.

• Quản lý biến mơi trường: Người dùng có thể định nghĩa và quản lý các biến môi trường, giúp tái sử dụng giá trị và giảm thiểu lỗi khi thực hiện các yêu cầu API khác nhau.

• Kiểm thử tự động: Postman cung cấp khả năng kiểm thử tự động cho các API, giúp tiết kiệm thời gian và tăng tính ổn định của ứng dụng.

• Dễ dàng mở rộng: Postman có thể mở rộng thơng qua các add-on và tích hợp với nhiều dịch vụ khác nhau, giúp nó trở thành một công cụ linh hoạt cho quản lý API.

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

21

<b>Chương 3. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG </b>

<b>3.1. Sơ đồ use case </b>

<b>3.1.1. Sơ đồ use case đăng nhập </b>

<i>Hình 3.1: Sơ đồ use case đăng nhập </i>

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

22

<b>3.1.2. Sơ đồ use case màn hình “journey” </b>

<i>Hình 3.2: Sơ đồ use case màn hình Journey </i>

<b>3.1.3. Sơ đồ use case màn hình “practice” </b>

<i>Hình 3.3: Sơ đồ use case màn hình Practice </i>

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

23

<b>3.1.4. Sơ đồ use case màn hình “leaderboard” và “profile” </b>

<i>Hình 3.4: Sơ đồ use case màn hình Leaderboard và Profile </i>

<b>3.1.5. Danh sách các Actors </b>

<i>Bảng 3.1: Bảng dach sách các actor </i>

dụng (đã đăng ký hoặc chưa đăng ký tài khoản) có quyền truy cập vào tài nguyên dùng chung và những tài khoản đã đăng ký có thể sử dụng tài nguyên tốt hơn. Người quản lý (admin) Là người nắm quyền toàn bộ hoạt động

trên ứng dụng và quản lý các tài nguyên.

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

24

<b>3.1.6. Mô tả Use case </b>

<i>Bảng 3.2: Bảng mô tả use case </i>

<b>Vai trị ID Tên Use case Mơ tả Use case </b>

User UC01 Sign up Use case Người dùng có thể điền email và password để đăng ký mới một tài khoản.

UC02 Sign in Use case Người dùng có thể điền email và password để đăng nhập một tài khoản đã được đăng ký trước.

UC03 Set up Use case Người dùng chọn ngôn ngữ và mức độ khó mà mình muốn học, sau đó một bài test ngắn sẽ được thực hiện để kiểm tra trình độ của người dùng.

Use case

Người dùng chọn màn (stage) của mình và tiến hành trả lời các câu hỏi đề qua màn. Sau khi trả lời xong, câu hỏi sẽ lưu lại và người dùng sẽ được đi tới những câu hỏi tiếp theo.

UC05 Practice Screen Use case

Người dùng có thể từ Practice Screen và navigate tới những Screen: Reading, Writing, Listening, Speaking.

Screen Use case

Người dùng có thể xem thứ hạng hiện tại của mình và thứ hạng của những người chơi khác. Người dùng có thể bấm vào một người chơi bất kỳ để xem thông tin cá nhân (có thể xem

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

25

được) của người dùng đó.

UC07 Profile Screen Người dùng có thể xem và chỉnh sửa hồ sơ của mình, xem biểu đồ thống kê về thời gian học tập vừa qua của mình và đăng xuất.

Question

Người dùng admin có thể xem các câu hỏi đã được lưu trong cơ sở dữ liệu, sửa chữa hoặc xóa nó.

Question

Ngưởi dùng admin có thể tạo mới câu hỏi cho bộ câu hỏi trong Reading và Writing thêm đa dạng.

<b>3.1.7. Đặc tả Use case </b>

<b>3.1.7.1. Sign up Use case </b>

<i>Bảng 3.3: Bảng đặc tả use case đăng ký </i>

Use case’s name Sign up Use case

Pre-condition Người dùng phải Navigate tới trang Sign up

Basic flow ^{1. Người dùng truy cập vào ứng dụng giải trí luyện ngơn}ngữ AtoZ

2. Người dùng được redirect tới trang Sign In

3. Người dùng bấm vào mục “Does not have an account? Create a new account now”

4. Người dùng sẽ được redirect tới trang Sign Up 5. Người dùng điền hết tất cả thông tin

6. Bấm vào nút “Sign Up”

Alternative flow Người dùng bấm vào nút “Sign in with Google” để đăng ký và đăng nhập bằng tài khoản google của mình.

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

26

Post-condition Hệ thống sẵn sàng cho hoạt động tiếp theo

<b>3.1.7.2. Sign in Use case </b>

<i>Bảng 3.4: Bảng đặc tả use case đăng nhập </i>

Use case’s name Sign in Use case

Pre-condition Người dùng mở ứng dụng AtoZ

Basic flow ^{1. Người dùng truy cập vào ứng dụng giải trí luyện ngơn}ngữ AtoZ

2. Người dùng được redirect tới trang Sign In 3. Người dùng điền hết tất cả thông tin

4. Bấm vào nút “Sign In”

5. Nếu email và password mà người dùng nhập khớp với một tài khoản đã tồn tại, người dùng sẽ được di chuyển tới bàn hình home của ứng dụng, nếu không sẽ báo lỗi “The email or password you’ve just entered is

incorrect”. Alternative flow Không

Post-condition Hệ thống sẵn sàng cho hoạt động tiếp theo Extend point Không

<b>3.1.7.3. Set up Use case </b>

<i>Bảng 3.5: Bảng đặc tả use case màn hình set up </i>

Use case’s name Set up Use case

Pre-condition Người dùng phải được xác thực tài khoản từ trước

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

3. Người dùng bấm vào nút “Finalize” để kết thúc q trình set up của mình

Alternative flow Khơng

Post-condition Hệ thống sẵn sàng cho hoạt động tiếp theo

<b>3.1.7.4. Journey Mode Use case </b>

<i>Bảng 3.6: Bảng đặc tả use case màn hình Journey </i>

Use case’s name Journey Mode Use case

Pre-condition Người dùng phải được xác thực tài khoản từ trước

Basic flow ^{1. Người dùng navigate tới trang Journey Screen}2. Người dùng select vòng (stage) mà mình muốn chơi 3. Người dùng bấm vào vịng đó sẽ được đưa tới level

tương ứng và tiến hành chơi

4. Sau khi đã chơi xong hệ thống sẽ chấm điểm dựa trên số câu trả lời đúng của người dùng và đưa người dùng đến màn chơi tiếp theo

Alternative flow Không

Post-condition Hệ thống sẵn sàng cho hoạt động tiếp theo

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

28

<b>3.1.7.5. Practice Mode Use case </b>

<i>Bảng 3.7: Bảng đặc tả use case màn hình pratice </i>

Use case’s name Practice mode Use case

Pre-condition Người dùng phải được xác thực tài khoản từ trước

Basic flow ^{1. Người dùng navigate tới trang Practice Screen}2. Người dùng chọn kỹ năng mà mình muốn rèn luyện 3. Người dùng bấm vào nút “Start” để tiến hành trả lời các

bộ câu hỏi dành riêng cho các kỹ nẵng đó Alternative flow Không

Post-condition Hệ thống sẵn sàng cho hoạt động tiếp theo

<b>3.1.7.6. Leaderboard Use case </b>

<i>Bảng 3.8: Bảng đặc tả use case màn hình Leaderboard </i>

Use case’s name Leaderboard screen Use case

Pre-condition Người dùng phải được xác thực tài khoản từ trước

Basic flow ^{1. Người dùng navigate tới trang Leaderboard screen}2. Người dùng có thể xem thứ hạng hiện tại của mình và

của những người chơi khác

3. Người dùng có thể bấm vào một người chơi bất kỳ để xem thông tin chi tiết về người chơi đó

Alternative flow Không

Post-condition Hệ thống sẵn sàng cho hoạt động tiếp theo

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

29

<b>3.1.7.7. Profile Use case </b>

<i>Bảng 3.9: Bảng đặc tả use case màn hình User Profile </i>

Use case’s name Profile Use case

Pre-condition Người dùng phải được xác thực tài khoản từ trước

Basic flow ^{1. Người dùng navigate tới trang Profile Screen}

2. Người dùng có thể xem thơng tin cá nhân của mình, biểu đồ thống kê quá trình học tập của mình

3. Người dùng có thể bấm vào icon button hình “cây bút” để navigate tới trang Edit user profile

4. Người dùng có thể xem lại và sửa chữa thơng tin cá nhân của mình ở màn hình này, sau khi sửa chữa thì bấm “Confirm” để hồn tất

Alternative flow Không

Post-condition Hệ thống sẵn sàng cho hoạt động tiếp theo

<b>3.1.7.8. Admin Use case </b>

<i>Bảng 3.10: Bảng đặc tả use case màn hình admin </i>

Use case’s name Admin Use case

Pre-condition Người dùng phải được xác thực là “admin”

Basic flow ^{1. Người dùng truy cập đến tên miền của backend website}của app

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

30

2. Người dùng có thể xem danh sách các bộ câu hỏi đã được lưu, hoặc tạo mới một câu hỏi để thêm vào trong bộ câu hỏi của ứng dụng

Alternative flow Không

Post-condition Hệ thống sẵn sàng cho hoạt động tiếp theo

<b>3.2. Sơ đồ lớp </b>

<i>Hình 3.5: Sơ đồ lớp của ứng dụng </i>

</div>