Báo cáo Đồ án a ên Đề tài flag quiz app

Bằng lý thuyết về Lập trình Hướng đối tượng đã được chúng tôi tích lũy từ năm nhất, chúng tôi còn áp dụng một số kiến thức về thiết kế giao điện đề tạo ra một ứng dụng mobile vừa đây đủ

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC HOA SEN KHOA CÔNG NGHỆ THÔNG TIN

Giảng viên hướng dẫn : Nguyễn Văn Sơn

Thời gian thực hiện : Từ 11/09/2023 đến 23/12/2023

Nhóm sinh viên thực hiện : Trần Minh Quân MSSV:

: Lê Quốc Duy MSSV:

: Phạm Ích Chuyên MSSV:

Số nhóm 24

THANG 12/NAM 2023

ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _

NHÓM 4

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC HOA SEN KHOA CÔNG NGHỆ THÔNG TIN

Giảng viên hướng dẫn : Nguyễn Văn Sơn

Thời gian thực hiện : Từ 11/09/2023 đến 23/12/2023

Nhóm sinh viên thực hiện : Trần Minh Quân MSSV:

: Lê Quốc Duy MSSV:

: Phạm Ích Chuyên MSSV:

Số nhóm 24

THANG 12/NAM 2023

TRÍCH YÊU

Trường Đại học Hoa Sen luôn vận hành theo tôn chỉ “Cam kết chất lượng hàng đầu”, việc học luôn đi đôi với thực hành vào thực tế, vì vậy mà trường học luôn tạo điều kiện cho sinh viên có thê vừa tiếp thu kiến thức lý thuyết mả còn mang đến cho sinh viên cơ hội được vận dụng những kiến thức đó Chính vì vậy mà môn Đề án Thực tập Lập trình A có vai trò vô củng quan trọng trong quá trình học của sinh viên khoa Công Nghệ Thông Tin Trong suốt quá trình học chúng tôi được trau đồi thêm rất nhiều kiến thức mới, cũng như đã vận dụng được những kiến thức đã học trước đây mà chưa có dịp sử dụng đồng thời có thêm được nhiều định hướng cho ngành nghề sau này

Bài báo cáo đề án này là kết quả trong 8 tuần quá làm việc của nhóm chúng tôi học và thực hành làm một ứng dụng mobile trắc nghiệm Flags Quiz App Trong suốt khoảng thời gian học và làm đồ án, chúng tôi học hỏi và áp dụng được nhiều điều đã được học nhằm tạo ra được sản phâm để án hoàn thiện một cách chỉnh chu nhất

Bằng lý thuyết về Lập trình Hướng đối tượng đã được chúng tôi tích lũy từ năm nhất, chúng tôi còn áp dụng một số kiến thức về thiết kế giao điện đề tạo ra một ứng dụng mobile vừa đây đủ tính năng vừa phù hợp với việc sử đụng cũng như tính thâm mỹ

Dựa trên tiến độ làm việc và sản phâm đã hoàn thiện, chúng tôi trình bày bài báo cáo sau thông qua 5 phần:

— Chương 1: Giới thiệu chung

— Chương 2: Tìm hiểu về các công nghệ cần dùng

— Chương 3: Xây dựng ứng dụng

- Chương 4: Thiết kế cơ sở dữ liệu

— Chương 5: Kiêm thử và sửa lỗi

NHOM 4

LOI CAM ON

Lời nói đầu, cho nhóm chúng tôi gửi lời cảm ơn sâu sắc đến thầy Nguyễn Văn Sơn đã hướng dẫn tận tỉnh và tạo điều kiện cho nhóm chúng tôi làm đồ án xây dựng một ứng dụng mobile trac nghiém Flags Quiz App Nhóm chúng tôi đã cỗ gắng vận dụng những kiến thức đã học được và tìm tòi thêm nhiều thông tin để hoàn thành bài tiểu luận này

Bên cạnh những kiến thức đã được học và tìm hiểu thì do kiến thức còn hạn chế và không có nhiều kính nghiệm thực tiễn nên chúng tôi khó tránh khỏi những thiếu sót trong khi thực hiện đồ án

Rất kính mong giảng viên cho chúng tôi thêm những đóng góp ý dé bài báo cáo của nhóm chúng tôi được hoản thiện hơn

Chúng tôi xin chân thành cảm ơn!

ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _

NHÓM 4

MỤC LỤC

3:9 :82-0 0 2

DANH MỤC HÌNH ẢNH 222 22222221222211112211112211112211111111111.211.crree 6 NỘI DUNG CHÍNH 552222222222112222112212111222111221111221111221122121 1e |

1 _ Giới thiệu công nghệ (Tlo0ϧ) 2 2: 22112112211 121 1151 115312115111 155111518111 1 ke Ợ 1 1.2 EXPO GO ceccccccccceeeecceneeceneceseeeenecceseeceeceeneeeseeceeeeeeeeeneeeeteeenieeeteeeeniaes 1 1.3 co nh aa- 2

¬¬° cece cece csettecnercscteeessteecietsecrecseciecsessssteeeisisesieesesiesessssteesssteessiees 4

IR “r*dẢỒŨŨỖŨỖŨẦẮẦẮẦẲẦẦẮAẰAẰẮ 6

I¬ , 4 7 n<=ÉUáaaaẳẳẳẳầẳầặầặẶẶ ồ 7

"na n6 hs 9 IlN Hoa cho 7n 9

2 Đặc tả yêu cầu ứng dụng (Requirement Specification) - se se sec sc 10 2.1 Giới thiệu ứng dụng (OV€TVI€W) n T21 12121 111111221 10121812011 kg 10

“x0 ăn 10 2.4 Các yêu cầu chức năng 2s SEE11211211 1.1121 11 2tr 10 2.5 Các yêu cầu phi chức năng 2-2 St 111 1127111212121 010 1 tru 16 2.6 Mô hình ứng dụng (software model) : c2 1222 112221122 16

3 Phân tích ứng dụng - L2: 2212122211211 1211111 111111111011 1 1101 11g này 16 3.1 Xác định các đối 5.077 cccecccceneccneenscenseetseeseceseeseeseeeseseeeeneaeensaes 16 3.2 Mô tả các thuộc tính và phương thức của đối tượng :-5csss¿ 17 3.3 Mô tả Các aCẨO c Qn HH1 HH HH 111111111111 11115111 1k1 H 1kg khe 17 hi ae 21

“c7 21 4.1 _ Thiết kế chỉ tiết các cÏass - 52-121 121211111211 11Ẹ11 12.1111 11rrrdg 21

(0 1‹(4‹4ẼÊÊẼ3ỶẢẢÝÝ 22

4.4 Thiết kế 2077 ccccccceseceseenseeneccnscessenseessesseeeseeeetsescsseeeeteeeeeses 25 Sau khi việc nghiên cứu và phân tích các yêu cầu được đưa ra, thêm vào đó là giải quyết các yêu câu đưa ra thì những thành phâm thu được trên ứng dụng như sau 25 4.5 _ Thiết kế thuậttoán 2c:22222221222112211122 2110.111 4I

DANH MỤC HINH ANH

Hình 1: Visual Studio Code c2 121111211211 12111211111 11111 1110111111011 11 11g nha 1 Hinh 2: Expo GO n - 1 Hinh 3: Minh hoa ma QR quét Expo o L1 01200221111 1111 122212011 18111111111111 11 xe 1 Hình 4: Android Studlo - - L1 022211211121 1111 15111 211011 11111111111 111111111 TH HH Hy 2 si) 11177 3

Hit 6: Gites cece cccccceececcneeeceseecaeeeceecsesaeeecseceeeeceeececeneeeseaecaeeeseeseqeueeseseeseeeeesas 4 Hinh 7: GitHube a ăẽăẽă 6

Hinh 8: Firebase 0 7 Hình 9: Minh hoa ludng di cia Firebase c ccccccccccscscecseseeseesessessessessessesesseseesessesneeees 7 Hình 10: React Native - L0 201211 121112112 11101 101110112111 1111111111111 111111121111 7 Ipii):'REERLx.:vụiWSẲH 9 si) VAO3I:.)ivi 0 (CC 9 Iạ0i8fEh a0 -3 10 Hinh 14: Đăng nhập 2 2 22 122122211211 121 11211111 111122112 1111110111 1111111 111111111 xkg 11 Hình 15: Đăng xuẤt 55 + 1 1221121121112 12112111121 11111 12 si) 08 09 {.i 0 nHiiÁccc 13 Hình 17: Thực hiện qu1z ¬ 14 Hinh 18: Xem điểm và xếp hạng tông L0 2222112112211 1 1121111821 11211 1181 ro 15 Hình 19: Xem thông tin G2 22222211211 12112 211211191111 11111211 1111111111111 118g key 15 Hình 20: Mô hình ứng dụng - 2 220122112211 221 12211211521 1111 1111211111118 1 01101 d2 16 si] 8/200)/ i0 n5 21 Hình 22: Class diapram L0 2002111211211 121 112211011 11111011111 11111 11 11H HH 1 kg 22 Hình 23: Mô tả database Ì L Q2 1211211211111 11 1110111111011 2111111 1111112111112 11kg 23 Hinh 2, l3) [oár-Nai.ìr.› :./X“aaiadadđiaadđaii 23 Hình 25: Mô tả database 3 - Q TT n2 12111211111 11211101 101110112111 111 1111112111112 11kg 24 Hinh O0) cár Nai v.v hẼ“ađadđdđdidaai 24 Ipi0i)02/48)//(oár-Nai.ir.v chgãiađaẳđiaẳađiiiẢŨẮŨ 25 Hình 28: Thiết kế giao diện - 1 2111 1221211111111 121111211011 211111 rg te 26 si) 092 6000 nnn ccỔỔẢ.d 27

Hinh 38: Trang chon sai dap an nhìn tên đoán quôc kỷ - c2: 22222 2czcses 36 Hình 39: Trang kết quả + 2 2 1 121211211211 11111 1112121111121 1111211 ca 37 Hình 40: Trang bảng xếp hạng nhìn quốc gia đoán quốc kỳ 72 ccccccszszsea 38

ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _

NHÓM 4

Hình 41: Trang bảng xếp hạng nhìn quốc kỳ đoán quốc gia - 5: 2+2+z+2z+: 39 Hinh 42: Trang thông tin và thành tựu cá nhân - c2 112122 1112212111212 mg 40

Hình 43: Hàm shuffle mảng 2 2 22 2212212121121 1121 1121111112 118211011 1111115 101 x6 41

Hình 44: Shuffle câu hỏi và câu trả ÏỜI - ác 2.121 11121111111 2112111111111 1121 ng ưu 41 Hình 45: Bảng màu được thông qua ý tướng vả lên thiết kế trên Fipma 45 Hình 46: Trang thiết kế login - -© 2 222S2192512322215212211211271111211211211211 211cc 45 Hinh 47: Trang thiết kế hoime - 22-2221 S9EE12E22E15212214211271271221711111111 21.2 .eeg 46 Hình 48: Trang thiết kế chọn chế độ và chọn chế WO eerie 47

Hình 49: Trang thiết kế chơi game chế độ nhìn quốc kỷ đoán quốc gia 48

Hinh 50: Trang thiết kế chơi same nhìn tên đoán quôc kỷ -. cccccce: 49

Hình 51: Trang thiết kế bảng xếp hạng 2-5 St 1E 1E 1211211211112111111221 2 1c 10 50

si 0n/280ii, TỶ 51 lì: Big uốn 51

ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _

NHÓM 4

1 Giới thiệu công nghệ (Tools)

Zl Visual Studio Code

Visual Studio Code la trinh bién dich, soan thao ma nguồn code miễn phí được

Visual Studio Code

Hình I: Visual Studio Code

trinh như Java, C#, Python,

12 Expo Go

phat trién boi Microsoft danh cho

Window, macOS va Linux Voi kha năng cho phép người dùng cải đặt nhtmg Extensions, nham hé tro thém

bớt những chức năng hay tinh năng

cần thiết để có thê tối ưu hóa việc phát triển code Cùng với đó là khả năng thích ứng với đa ngôn ngữ lập

Expo Go là ứng dụng miễn phí với mã nguồn mở hỗ trợ cho các nhà phát

triển phần mềm ứng dụng trên di động, dành cho cả Android và IOS Với một giao diện đơn giản và dễ tiếp cận, cũng như cách thức vận hành trơn tru chỉ với việc scan mã QR sau khi nhập lệnh npx expo start

đó là giao diện và trình soan thao théng minh cua IntelliJ IDEA, cho phép

ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _

xây dựng phần mềm theo Gradle hay Kotlin Android Studio mang lại nhiều

tính năng giúp bạn nâng cao năng suất khi xây dựng ứng dụng Android, ví dụ như:

@ Mot hé thong hé tro chạy máy ảo

® Một trình mô phóng nhanh vả nhiều tính năng

@® Niột môi trường hợp nhất nơi bạn có thể phát triển cho mọi thiết bị

Hinh 4: Android Studio

tich hop Google Messaging va App Engine

dựng prototypes, phát triển và chia sẻ các thiết kế của họ với các thành viên

khác trone nhóm làm việc

Điểm đặc biệt nhất của Flema chính là khả năng hoạt động trực tuyến, tương tự như Google Docs hay Sheet Tại đây, nhiều người dùng có thê thao tác

trực tiếp trong cùng một file ở cùng một thời điểm Như vậy, người dùng có thé

chỉnh sửa, theo đõi chỉnh sửa một cách dễ đàng và nhanh chóng, tiết kiệm thời

gian gửi đi qua lại rườm ra

Bên cạnh đó, Fipema còn có tính năng tương tự như các công cụ thiết kế đồ họa khác, tương thích với cả Window và Mac OS đồng thời tích hợp nhiều chức

năng cộng tác và quản lý dự án Figma được đánh giá cao vì tính đơn giản, dễ

sử dụng và khả năng làm việc nhóm hay xử lý công việc từ xa cực hiệu quả

Điều đó nó đã tiết kiệm rất nhiều thời gian và có thê hợp thức hóa quy trình làm

việc của nhóm Điều đó giúp chúng tôi tương tác với nhau qua online mà không

cần phải gặp mặt bên ngoài và tiết kiệm được nhiều thời gian hơn trong quá

trinh làm việc (Flpma là gì? Khám phá những tính năng tuyệt vời của Flema,

Git la hệ thống quản lý phiên bản

phân tán Đây là hệ thông quản lý phô

biến nhất hiện nay Git là một phiên bản Đ 1

của DVCS hay còn gọi là VCS Sử dụng

Git sẽ đem tới cho các lập trình viên tình 6-Cn

một kho lưu trữ, trone đó chứa đầy đủ

các lịch sử thay đổi của hệ thống (Gít là gi? Cac lénh git co ban ma moi lap

trình viên nên biết, n.d.)

Cách hoạt động của Git Giống như các VCS khác, Git hoạt động bằng cách ghi nhận lại mọi thay đổi trong hệ thống file theo thoi sian Sự khác biệt cua Git la mỗi khi một thay

đổi được người dùng xác nhận, Git sẽ giúp lại trạng thái của toàn bộ hệ thống

file tại thời điểm đó, nghĩa là lưu lại phiên bản đã thay đổi của các file

Mỗi Version của hệ thống file đều chứa đầy đủ các file kế cả có thay đổi hay không Ví dụ Version 2 có sự thay đổi tại file A va file C so véi Version 1,

các file đã thay đổi là A1 và C1 sẽ được lưu vào chỗ tương ứng Git cũng rất

thông minh khi không copy lại file B không bị thay đổi mà chỉ tham chiếu đến

vi tri cua file B trong version trước đó, p1úp eiảm lãng phí bộ nhớ do trùng lặp

Mặt khác, cac VCS khac nhu CVS, Subversion, Perforce, déu itr lai các file ban đầu như một phiên bản gốc và chỉ lưu những phần bị thay đổi

(delta) tương ứng với từng file mỗi lần cập nhật thay đôi

Ta đã nói về chức năng của git như một VCS thông thường, nhưng định

nghia vé git là DVCS, nghĩa là còn một chữ D quan trọng chưa được nhắc tới,

do 1a tinh phan tan — Distributed

Neguoc lai voi hé thong kiém soat phién ban tap trung (CVCS), ban chat phân tán của Git cho phép bạn linh hoạt hơn nhiều trong cách các nhà phát triển

cộng tác trone các dự án Trong các hệ thống tập trung, mỗi nhà phát triển là

một nút hoạt động ngang bằng với với trung tâm

Tuy nhiên, trong Git, mọi nhà phát triển đều có khả năng vừa là nút vừa

là trung tâm; nghĩa là, mọi nhà phát triển đều có thế đóng góp mã nguồn cho

các kho lưu trữ (repository) khác và duy trì một kho lưu trữ công khai mà

những người khác có thê làm cơ sở cho công việc của họ và họ có thê đóng góp

ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _

vào đó Điêu này đưa ra nhiều lựa chọn về quy trình làm việc cho dự án, sau

đây là một ví dụ

Loi ich cua Git

- Quan ly phién ban: Git cho phép theo dõi và lưu trữ lịch sử thay đổi của

Khoi tao mot dw an (project) hoac repository moi

Khoi tao va bat dau mét repository thì ta phải bật cửa số command prompt 6 thu muc hiện thành và thực hiện

Lénh: git mit

Thêm và quản lý các tập tin (rong thư mục

Sau khi khởi tạo một repository, ta muốn thêm và quản lý các tập tin có trong thư mục thì ta thực hiện cặp lệnh sau theo thứ tự

Lệnh: - git add “file-name” hoặc git add (đề thêm tất cả các file)

- git commit -m "N6i dung commit" (dé lưu lại nội dung lời nhắn

của thay đồi)

Dua repository lên Github

Muốn lưu trữ repository lên Github thì đầu tiên ta cần thêm đường dẫn

đến repository của mình (link-repository) và rồi đưa lên bằng lệnh push

Lénh: - git remote add origin link-repository

- git push ongin main

ĐỒ ÁN THỰC TAP LAP TRINH A _

1Ø Github

GitHub là một dịch vụ nồi tiếng cung cấp kho lưu trữ mã nguồn Git cho các dự án phan

mềm GitHub có đầy đủ những tính chất của Git,

ngoài ra nó còn bổ sung những tính năng về social Gi H

để các developer tương tác với nhau it u b

Hinh 7; GitHub

Vai théng tin vé Git:

+ Là công vụ giúp quản lý source code tô chức theo dạng dữ liệu phân tán

+ Giúp đồng bộ source code của team lên 1 server

+ Hỗ trợ các thao tac kiém tra source code trong qua trình làm việc (diff, check, modifications, show history, merge source )

GitHub có 2 phiên bản: miễn phí và trả phí Với phiên bản có phí thường được các doanh nghiệp sử dụng đề tăng khả năng quản lý team cũng như phần

quyền bảo mật dự án Còn lại thi phần lớn chúng ta đề sử dụng GitHub với tài

khoản miễn phí để lưu trit source code

GitHub cung cấp các tính năng social network như feeds, followers, và network graph để các developer học hỏi kinh nghiệm của nhau thông qua lịch

su commit

Nếu một comment để mô tả và giải thích một đoạn code Thị với Github, commit message chính là phan mô tả hành động mà bạn thực hiện trên

source code

Github trở thành một yếu tố có sức ảnh hướng lớn trong cộng động

nguồn mở Cùng với Linkedin, Github được coi là một sự thay thế cho CV của

bạn Các nhà tuyên dụng cũng rất hay tham khảo Github profile dé hiéu về năng

lực coding của ứng viên

Giờ đây, kỹ năng sử dụng git và Github từ chỗ ưu thích sang bắt buộc

phải có đối với các ứng viên đi xin việc (GitHub là gì? Những lợi ích GitHub

mang lại cho lập trình viên, n.đ.)

17 Firebase

Firebase là một nền tảng phát triển ứng dụng được Google hỗ trợ, giúp các nhà phát triên xây dựng và phát triển các ứng dụng và trò chơi mà người dùng yêu thích Nó cung cấp các tính năng và dịch vụ để giúp các lập trình viên triển khai nhanh hơn và mở rộng quy mô của ứng dụng một cách dễ dàng, an toàn Firebase cung cấp lưu trữ Cloud và sử dụng cơ sở đữ liệu NoSQL đề lưu trữ dữ liệu Nó hỗ trợ cho các nền tang Android, 10S, Web va Unity Voi Firebase, cac nha phat trién co thê tập trung vào việc phát triển ứng dụng của mình mà không cần phải lo lắng về việc triển khai và quản lý

tạo ra các ứng dụng kiểu gốc cho ¡iOS

trong nhimg framework phé bién nhat trong ngành

React Native hoạt động trên ba chủ đề:

+ Chuỗi giao diện người dùng (UI Thread): Chuỗi ứng dụng chính

có quyên truy cập vào giao diện người dùng của ứng dụng

+ Shadow Thread: Thread nén str dung thu vién React để tính toán

bô cục của ứng dụng

ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _

+ Chuỗi JavaScript (JavaScript Thread): Chuỗi thực thí có chứa mã React (JavaScript)

React Native sẽ hoạt động bằng cách tích hợp Main Thread và JavaScript Thread cho mét ting dung mobile Main Thread sẽ có vai trò cập

nhật giao diện người dùng JavaScript Thread là nơi thực thị và xử lý mã

JavaScript

Main Thread và JavaScript Thread hoạt động độc lập vì vậy cần sử dụng một cầu nối (Bridge) để giúp 2 thread nảy tương tác với nhau Cầu nối cho phép

chúng chuyên đổi dữ liệu giữa thread này và thread kia, giúp chúng giao tiếp

mà không phải phụ thuộc vào nhau

Ban đầu thì Facebook chỉ phát triển nó đề hỗ trợ cho iOS nhưng với sự

hỗ trợ gần đây của hệ điều hành Android thì thư viện hiện đã có thê hiến thị

giao diện người dùng di động cho cả hai nền tảng này

Với việc chuẩn bị để bước vào công đoạn lập trình nên khung g1ao diện của ứng dụng, chúng tôi đã tiến hành tham khảo sơ qua các framework với mã

nguồn mở để có thê tiến hành bắt tay vảo tìm hiểu và sau đó là áp dụng vào

thực tiễn Trong đó, chúng tôi đều đồng ý thông qua và chọn React Native trở

framework chính cho dự án lần này

Chúng tôi đã thống nhất với nhau cùng chọn React Native vì trường hợp

một vải thiết bị của các thành viên trong nhóm không có đủ khả năng để thích

ứng với những framework khác như Flutter, Đồng thời là vi React Native là

mot framework kha la dé tiép cận và tiếp thu Cùng với đó là một thư viện đầy

trình duyệt vẫn sử dụng được Nó có thê được sử dụng để phát triển cả phía máy khách và phía máy chủ bằng ngôn ngữ tự động JavaScript là một ngôn

Hinh 11: Javascript ngữ được biên dịch da nền tảng và được biết đến với tính linh hoạt và khả năng tương tác với các thành phần khác

nhau của trang web

Nó cũng có một thư viện chuẩn với các đối tượng như Array, Date và Math,

và thành phần ngôn ngữ cơ bản như operators (toán tử), control structures ( cấu trúc điều khiến), va structures ( câu lệnh) Đề giúp các nhà phát triển xây dựng các ứng dụng web phức tạp

1.10 Flation va Storyset Flaticon là kho anh icon phong phu va

inh 12: Flatieon trang web tải ảnh Icon miên phí, cung

cấp hàng chục nghìn hình biểu tượng vector có độ phân giải cao ở định dạng

5 VG, PSD, PNG, hoặc dưới dang Font Icon

Storyset là trang web cung cấp hình ảnh minh

họa hoàn toàn miễn phí, chủ đề nội bật của

“storyset, website nay la hinh minh họa về các hoạt

động của con người được thiết kế sinh động, linh hoạt Đặc biệt, Storyset cho phép người

Hinh 13: Storyset dùng tạo video hoặc gửi ảnh gIf từ chính

những hình ảnh đó và tải xuống nhanh chóng

2 Dac ta yéu cau teng dung (Requirement Specification)

ĐỒ ÁN THỰC TAP LAP TRINH A _

2.1 Gidi thiéu ung dung (Overview)

Đổ án của chúng tôi là một ứng dụng mobile trac nghiém Flags Quiz App được xây dựng trên nền tảng Android Ứng dụng của chúng tôi là một

same đoán quốc kỳ của các nước cho phép người dùng trả lời các câu hoi va

cung cấp các chức tính năng bổ sung cho người dùng như âm thanh nền, bảng

xếp hạng Chúng tôi sử dụng framework React Native và ngôn ngữ JavaScript

đề xử lý logic va figma dé thiét ké giao điện cho ứng dụng

2.2

2.3

2.4

Muc dich

; Ung dung mobile trac nghiệm Flag Quiz App là một ứng dụng hữu ích

đề giúp người dùng cải thiện kiên thức và kỹ năng của mình về các quôc gia trên thế giới Với những câu hỏi đa dạng và phong phú, người dùng có thê rèn luyện khả năng phán đoán và trí nhớ của mình Với tính năng đánh giá điểm số và thời gian, người dùng có thé do lường được sự tiến bộ của mình và thách thức bản thân để đạt được điểm số cao nhất Vì vậy, ứng

dụng trò chơi trắc nghiệm là một công cụ hữu ích để giúp người dùng cải

thiện kiến thức và kỹ năng của mình một cách thú vị và hiệu quả

Pham vi

Khi làm ra ứng dụng mobile trắc nghiệm Flag Quiz App thi chung tôi hướng đến tất cả mọi người không giới hạn độ tudi co thé dung va trai nghiệm Mọi người có thể dùng ứng dụng xem như một cách bô sung và tìm hiểu những kiến thức mới

Các yêu cầu chức năng Với một ứng dụng trò chơi mang tính giải trí, đơn giản, đồng thời mang lại kiến thức bố ích cho người dùng Các chức năng của ứng dụng phải được tối ưu hóa và đạt được hiệu quả nhất định, không tạo cảm giác rườm rà hay khó sử dụng Và dựa trên những tiêu chí của một trò chơi cơ bản, chúng tôi

đã mang lại được sự ổn định và mượt mà của ứng dụng sau những lần kiểm thử chất lượng Dưới đây là các chức năng chính có trong ứng dụng

- Đăng nhập

ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _

5 Chuyén sang trang chu 7

Thông báo đăng nhập thất bại

ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _

- Xem quiz

1 1 1 Người chơi Ứng dụng Service

2 Bấm nút xem và chọn chế độ chơi Load dữ liệu quiz

Hinh 16: Xem quiz

ĐỒ ÁN THỰC TAP LAP TRINH A _

Load dữ liệu quiz

{Render eft mo va ft ron 4

Hiện thông báo điểm

Hinh 17: Thee hién quiz

ĐỒ ÁN THỰC TAP LAP TRINH A _

- Xem diém va xép hang tong

3 Load dữ liệu cá nhân

Chuyến sang màn hình cá nhân

Hinh 19: Xem thông tín

2.5 Các yêu cầu phi chức năng

Hiệu suất:

- Do dung Firebase để chứa dữ liệu, nên chúng ta cần có Internet đề có thể truy cập và load được dữ liệu Do đó, ứng dụng đã xử ly bất đồng bộ cũng như thời gian chờ cho ứng dụng có thể load hết được dữ liệu Vì vậy, ứng dụng đã có thể load được đữ liệu 1 cách mượt mà và trơn tru Khả năng mở rộng

- Ứng dụng được xây dựng theo hướng đơn giản, dễ tiếp cận, và dễ sử dụng Do đó, chương trình được viết ra theo login căn bản và không có quá nhiều thuật toán nâng cao cũng như các chức năng đòi hỏi tác vụ phức tạp Vì vậy, có thể dựa trên căn bản mà phát triển thêm các chức năng khác cho ứng dụng, như là tự tạo bộ qu1z riêng, chỉnh sửa nội dung, chỉnh sửa thông tin user,

Khả năng sử dụng

- _ Ứng dụng được xây dựng với tiêu chí đơn giản, đễ sử dụng, dễ tiếp cận

Do đó, mọi lứa tuôi đều có thê sử dụng một cách dễ đàng và hiệu quả Vi dụ: Màu đơn sắc, không quá nhiều màu, cỡ chữ to, font chữ đễ đọc, giúp

người dùng không cảm thấy khó chịu khi sử dụng

2.6 M6 hinh ung dung (software

model) Incremental Model

- Déi voi du an lan nay, chung

em xây dựng ứng dụng với

mô hình “Incremental”

Chúng em phát triển ứng dụng từng bước một, bổ sung

các tính năng mới vảo phiên

bản cũ cho đến khi đạt được

phiên bản hoàn chỉnh Tình 20: Mô hình ứng dụng

Do không có nhiều thời gian và nhân lực, nên chúng em đã quyết định

chọn mô hình ứng dụng nào phù hợp và tiện dụng nhất

3 Phan tich wng dung

3.7, Xác định các đổi tong

Hệ thông ứng dụng bao gồm 3 đối tượng

- User ( Nguoi choi )

- Quiz

- QNA(B6 cau hor )

ĐỒ ÁN THỰC TAP LAP TRINH A _

3.2 M6 ta cdc thuộc tính và phương thức của đối tượng

- Thuéc tinh: Tén quiz, Mé ta

- Phương thức: Duyệt tất cả quiz, Duyét quiz theo ID

- QNA:

- Thu6c tinh: Cau hoi, Dap an dung, Dap an sai

- Phương thức: Duyệt bộ câu hỏi theo ID của qu1z,

Chọn đáp án đúng sai 3.3 M6 ta cac actor

Ung dung chi cé 1 actor duy nhat dé là “Người dùng" (Người chơi)

Người dùng sẽ có các use case như sau:

Tên use case Dang nhap

Mô tả Đăng nhập vào ứng dụng

Use case liên quan Đăng nhập

Điều kiện kích hoạt Người chơi bấm vào nút đăng nhập

Luông sự kiện chính 1 Người dùng bám vào nút đăng

nhập

2 Đăng nhập thành công

3 Chuyên sang màn hình trang chủ

Luồng sự kiện phụ 1 Thông báo đăng nhập không

thành công

ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _

Mô tả Đăng xuất khỏi ứng dụng

Use case liên quan Đăng nhập

2 Đăng xuất thành công

3 Chuyên sang màn hình đăng nhập

Tên use case Xem quiz

Mô tả Xem và chọn chế độ chơi

Use case liên quan Đăng nhập

Luéng sw kién chinh

1 Người ding bam vao nut chơi

ngay 0 man hinh chính

Néu người chơi chọn đúng, hệ thong hién thị đáp án đúng và

chuyên qua câu hỏi kế tiếp

6 Nếu chọn sai thi hệ thống sẽ hiện lên đáp án đúng và đáp án sai, rồi sau đó chuyến qua câu hỏi kế tiếp

Tén use case Xem théng tin ca nhan

Mô tả Xem thông tin cá nhân ( Điểm, xếp hạng,

họ tên, email)

Actor Người chơi

Use case lién quan Dang nhap

Điều kiện kích hoạt Người chơi bắm vào nút setting

Tiền điều kiện Người chơi phải đăng nhập vào ứng dụng

Luông sự kiện chính 1 Người dùng bấm vảo nút settinp

2 Chuyên sang màn hình trang cá nhân

Luéng sự kiện phụ Không

- _ Xem điểm và xếp hạng tổng

Tén use case Xem điểm và xếp hạng tông

Mô tả Xem diém ca nhân và điểm trên bảng

xếp hạng tông

Use case liên quan Đăng nhập

Điều kiện kích hoạt Người chơi chọn nút Bảng xếp hạng

Tiền điều kiện Người chơi phải đăng nhập vào ứng

dụng

Luông sự kiện chính 1 Người chơi nhấp chọn vào nút

đoán tên qu6c gia 2.1 Chọn chế độ nhìn quốc kỳ 2.2 Chọn chế độ nhìn tên quốc gia

Thuộc tính: Câu hỏi, Đáp an đúng, Đáp án sai Phương thức: Duyệt bộ câu hỏi theo ID của quiz, Chọn đáp án đúng sai

ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _

+Anh dai dién

+Điếm cao nhất +Xếp hạng

+Dang nhap()

+Dang xuat() +Xem quiz() +Thuc hién quiz() +Xem BXH() +Xem thông tin ca nhan()

QNA

+Duyét tat ca quiz() +Duyét quiz theo ID()

Hinh 22: Class diagram

+Tên câu hỏi +Đáp án đúng +Đáp án sai

+Duyét QNA theo quiz ID()

Sau khi thông qua vấn đề về framework, ching tôi đã tìm đến giải pháp lưu trữ

cho các loại thông tin, đữ liệu về trò chơi cũng như là thông tin của người dùng

Sau vài lần thảo luận cũng như là đưa ra ý kiến về các database, chúng tôi quyết

định sử dụng hệ thống dịch vụ điện toán đám mây FIrebase, là một dịch vụ

được cung cấp bởi Google

Với một trò chơi trả lời câu hỏi , chúng tôi muôn đưa ra các thử thách cho

người chơi theo từng cập bậc, từ cấp độ đề đên cập độ khó Theo câu trúc câu

hỏi sôm các thuộc tính sau:

e_ Với chế độ nhìn cờ đoán tên nước:

© correct_answer: la phan tr dang String chira cau trả lời đúng với một giá trị Input là tên nước

© img: cing la mét phan tr dang String, va input 1a duong link dan đến hình ảnh của lá cờ

© incorrect answer: là thuộc tính mảng Array gồm 3 phần tử dạng Strine, chứa các input về các tên nước không phải là câu trả lời đúng

®_ Với chê độ đọc tên nước đoản cờ:

© correct_answer: la phan tr dang String chia cau tra loi dung voi

m6t gia tri input la đường link của lá cờ

© question: cing la mét phan tir dang String, va input la tén cua nước thuộc lá cờ ở trên

© incorrect answer: là thuộc tính mảng Array gồm 3 phần tử dạng Strine, chứa các input về các đường link hình ảnh lá cờ không

phải là câu trả lời đúng

E———————————————————————————————_———¬]

ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _

NHÓM 4 28

Và mục tiêu của các chê độ là như sau:

® Dê: Ở cập độ này, chúng tôi sẽ đưa ra các lá cờ quen thuộc với người chơi nhất, những lá cờ được đại đa số biết đến như là cờ Việt Nam, Mỹ hay Hàn Quốc,

er: "Việt Nam”

"https://cdn.pixabay.com/photo/2013/07/13/14/18/vietnam- 162460_1280.png”