Ứng dụng Flags Quiz App | Báo cáo Đồ án Thực tập Lập trình A

lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC HOA SEN
KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A
Tên đề tài: Flag Quiz App
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:
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 lOMoAR cPSD| 47206417 lOMoAR cPSD| 47206417
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC HOA SEN
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
KHOA CÔNG NGHỆ THÔNG TIN 2 BÁO CÁO
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A
Tên đề tài: Flag Quiz App
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 : 4 THÁNG 12 / NĂM 2023
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 lOMoAR cPSD| 47206417 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 dồ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 diệ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ử dụ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 I lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM LỜI CẢM ƠN
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 trắc 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 kinh 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 ý để 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 ii lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM MỤC LỤC
TRÍCH YẾU..................................................................................................................2
LỜI CẢM ƠN................................................................................................................3
DANH MỤC HÌNH ẢNH.............................................................................................6
NỘI DUNG CHÍNH......................................................................................................1
1. Giới thiệu công nghệ (Tools).............................................................................1 1.1.
Visual Studio Code....................................................................................1 1.2.
Expo Go.....................................................................................................1 1.3.
Android Studio..........................................................................................2 1.4.
Figma.........................................................................................................3 1.5.
Git..............................................................................................................4 1.6.
Github........................................................................................................6 1.7.
Firebase.....................................................................................................7 1.8.
Framework React Native...........................................................................7 1.9.
Ngôn ngữ Javascript..................................................................................9
1.10. Flation và Storyset.....................................................................................9
2. Đặc tả yêu cầu ứng dụng (Requirement Specification)....................................10 2.1.
Giới thiệu ứng dụng (Overview)..............................................................10 2.2.
Mục đích..................................................................................................10 2.3.
Phạm vi....................................................................................................10 2.4.
Các yêu cầu chức năng............................................................................10 2.5.
Các yêu cầu phi chức năng......................................................................16 2.6.
Mô hình ứng dụng (software model).......................................................16
3. Phân tích ứng dụng..........................................................................................16 3.1.
Xác định các đối tượng............................................................................16 3.2.
Mô tả các thuộc tính và phương thức của đối tượng................................17 3.3.
Mô tả các actor........................................................................................17 3.4.
Mô hình Use-case....................................................................................21
4. Thiết kế ứng dụng............................................................................................21 4.1.
Thiết kế chi tiết các class.........................................................................21 4.2.
Class diagram..........................................................................................22 4.3.
Thiết kế database.....................................................................................22
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 iii lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM 4.4.
Thiết kế giao diện....................................................................................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ật toán...................................................................................41
5. Phát triển ứng dụng..........................................................................................42
6. Kiểm thử (testing)............................................................................................52
KẾT LUẬN.................................................................................................................55
TÀI LIỆU THAM KHẢO...........................................................................................56
PHỤ LỤC....................................................................................................................57
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 iv lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM DANH MỤC HÌNH ẢNH
Hình 1: Visual Studio Code..........................................................................................1
Hình 2: Expo Go...........................................................................................................1
Hình 3: Minh họa mã QR quét Expo Go.......................................................................1
Hình 4: Android Studio.................................................................................................2
Hình 5: Figma...............................................................................................................3
Hình 6: Git....................................................................................................................4
Hình 7: GitHub.............................................................................................................6
Hình 8: Firebase............................................................................................................7
Hình 9: Minh họa luồng đi của Firebase.......................................................................7
Hình 10: React Native..................................................................................................7
Hình 11: Javascript.......................................................................................................9
Hình 12: Flaticon..........................................................................................................9
Hình 13: Storyset........................................................................................................10
Hình 14: Đăng nhập....................................................................................................11
Hình 15: Đăng xuất.....................................................................................................12
Hình 16: Xem quiz......................................................................................................13
Hình 17: Thực hiện quiz.............................................................................................14
Hình 18: Xem điểm và xếp hạng tổng........................................................................15
Hình 19: Xem thông tin..............................................................................................15
Hình 20: Mô hình ứng dụng........................................................................................16
Hình 21: Mô tả các actor.............................................................................................21
Hình 22: Class diagram...............................................................................................22
Hình 23: Mô tả database 1..........................................................................................23
Hình 24: Mô tả database 2..........................................................................................23
Hình 25: Mô tả database 3..........................................................................................24
Hình 26: Mô tả database 4..........................................................................................24
Hình 27: Mô tả database 5..........................................................................................25
Hình 28: Thiết kế giao diện........................................................................................26
Hình 29: Trang Login.................................................................................................27
Hình 30: Trang home..................................................................................................28
Hình 31: Trang chọn chế độ chơi................................................................................29
Hình 32: Trang chọn độ khó.......................................................................................30
Hình 33: Trang ingame nhìn cờ đoán chữ...................................................................31
Hình 34: Trang chọn đúng đáp án nhìn cờ đoán chữ..................................................32
Hình 35: Trang chọn sai đáp án nhìn cờ đoán chữ......................................................33
Hình 36: Trang ingame nhìn tên đoán quốc kỳ...........................................................34
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
Hình 37: Trang chọn đúng đáp án nhìn tên đoán quốc kỳ...........................................35
Hình 38: Trang chọn sai đáp án nhìn tên đoán quốc kỳ..............................................36
Hình 39: Trang kết quả...............................................................................................37
Hình 40: Trang bảng xếp hạng nhìn quốc gia đoán quốc kỳ.......................................38
Hình 41: Trang bảng xếp hạng nhìn quốc kỳ đoán quốc gia.......................................39
Hình 42: Trang thông tin và thành tựu cá nhân...........................................................40
Hình 43: Hàm shuffle mảng........................................................................................41
Hình 44: Shuffle câu hỏi và câu trả lời.......................................................................41
Hình 45: Bảng màu được thông qua ý tưởng và lên thiết kế trên Figma.....................45
Hình 46: Trang thiết kế login......................................................................................45
Hình 47: Trang thiết kế home.....................................................................................46
Hình 48: Trang thiết kế chọn chế độ và chọn chế độ..................................................47
Hình 49: Trang thiết kế chơi game chế độ nhìn quốc kỳ đoán quốc gia.....................48
Hình 50: Trang thiết kế chơi game nhìn tên đoán quốc kỳ..........................................49
Hình 51: Trang thiết kế bảng xếp hạng.......................................................................50
Hình 52: Firebase........................................................................................................51
Hình 53: React Native.................................................................................................51
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
1. Giới thiệu công nghệ (Tools) 1.1. Visual Studio Code
Visual Studio Code là trình biên dịch, soạn thảo mã nguồn code miễn phí được
phát triển bởi Microsoft dành cho
Window, macOS và Linux. Với khả
năng cho phép người dùng cài đặt
những Extensions, nhằm hỗ trợ thêm
bớt những chức năng hay tính 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ả
Hình 1: Visual Studio Code
năng thích ứng với đa ngôn ngữ lập
trình như Java, C#, Python,.... 1.2. Expo Go
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. 1.3. A n d r Hình 2: Expo Go oid Studio
Android Studio là môi trường phát triển Hình 3: Minh họa mã QR quét Expo Go tích hợp
(IDE) chính thức để phát triển ứng dụng Android. Với việc tích hợp tất cả các
phiên bản Android từ cũ nhất đến bản cập nhật gần nhất. Cùng với đó là giao
diện và trình soạn thảo thông minh của IntelliJ IDEA, cho phép
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
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ư:
● Một hệ thống hỗ trợ chạy máy ảo.
● Một trình mô phỏng nhanh và nhiều tính năng.
● Mộ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ị Android.
● Tính năng Live Edit – Chỉnh sửa trực tiếp, để cập nhật các thành phần
kết hợp trong mô phỏng và thiết bị thực theo thời gian thực. ● Hỗ trợ C++ và NDK.
● Tích hợp sẵn tính năng hỗ trợ Google Cloud Platform, giúp dễ dàng
Hình 4: Android Studio
tích hợp Google Messaging và App Engine. 1.4. Figma
Figma là một công cụ thiết kế đồ họa vector có giao diện người dùng trực
tuyến dựa trên nền tảng đám mây, cho phép người dùng thiết kế UX/UI, dựng
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 8 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
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 trong nhóm làm việc.
Điểm đặc biệt nhất của Figma 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 dõi chỉnh sửa một cách dễ dàng và nhanh chóng, tiết kiệm thời
gian gửi đi qua lại rườm rà.
Bên cạnh đó, Figma 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á trình làm việc.
(Figma là gì? Khám phá những tính năng tuyệt vời của Figma, Hình 5: Figma n.d.) 1.5. Git Git là gì?
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 9 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
Git là 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
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
Hình 6: Git một kho lưu
trữ, trong đó chứa đầy đủ các lịch sử thay đổi của hệ thống. (Git là gì? Các lệnh
git cơ bản mà mọi lập 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 thời gian. Sự khác biệt của Git là 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 và 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 vị
trí của file B trong version trước đó, giúp giảm lãng phí bộ nhớ do trùng lặp.
Mặt khác, các VCS khác như CVS, Subversion, Perforce,… đều giữ lại
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
nghĩa về git là DVCS, nghĩa là còn một chữ D quan trọng chưa được nhắc tới, đó
là tính phân tán – Distributed.
Ngược lại với hệ thống kiểm soát phiên bản tập trung (CVCS), bản chất
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 trong 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 vào đó.
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 10 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
Đ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ụ. Lợi ích của Git
- Quản lý phiên bản: Git cho phép theo dõi và lưu trữ lịch sử thay đổi của mã nguồn. - Làm việc đồng thời.
- Quản lý nhánh (branching) và hợp nhất (merging): Git cho phép tạo và
quản lý các nhánh độc lập của dự án.
- Hồi phục dự án: Nếu xảy ra sự cố hoặc lỗi trong mã nguồn, Git cho phép
bạn dễ dàng khôi phục lại dự án từ các phiên bản trước đó.
- Cộng tác và đánh giá: Git cung cấp khả năng cộng tác và đánh giá cho các nhóm phát triển.
Khởi tạo một dự án (project) hoặc repository mới.
Khởi tạo và bắt đầu một repository thì ta phải bật cửa sổ command prompt
ở thư mục hiện thành và thực hiện. Lệnh: git init
Thêm và quản lý các tập tin trong 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 "Nội dung commit" (để lưu lại nội dung lời nhắncủa thay đổi)
Đưa 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 origin main
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 11 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM 1.6. 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 phần 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 để các
developer tương tác với nhau. Hình 7: GitHub Vài 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 tác kiểm tra source code trong quá 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 thì phần lớn chúng ta đề sử dụng GitHub với tài
khoản miễn phí để lưu trữ 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 sử 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à phần 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 để 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.d.)
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM 12 Hình 8: Firebase 1.7. 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ở dữ liệu NoSQL để lưu trữ
dữ liệu. Nó hỗ trợ cho các nền tảng Android, iOS, Web và Unity. Với Firebase,
các nhà phát triển có 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ý cơ sở hạ tầng.
Hình 9: Minh họa luồng đi củ
a 1.8.Framework React Native Firebase React Native là một
framework do Facebook phát triển để
tạo ra các ứng dụng kiểu gốc cho iOS
và Android bằng một ngôn ngữ Hình 10:
React Native chung là JavaScript.
Tính năng này giúp các lập trình viên tiết kiệm rất nhiều thời gian, công
sức khi phát triển ứng dụng di động. Và đó là lí do React Native trở thành một
trong những framework phổ biến nhất trong ngành.
React Native hoạt động trên ba chủ đề:
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 13 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
+ 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 sử dụng thư viện React để tính toán bố cục của ứng dụng.
+ Chuỗi JavaScript (JavaScript Thread): Chuỗi thực thi 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 ứng dụng 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 thi 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 giao 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à vì React Native là
một framework khá là dễ tiếp cận và tiếp thu. Cùng với đó là một thư viện đầy
đủ các chức năng của nó. 1.9. Ngôn ngữ Javascript
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 14 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
JavaScript là một ngôn ngữ lập trình được sử dụng rộng rãi trong việc phát
triển các trang web, ứng dụng web và làm việc ở trong môi trường không có
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
Hình 11: Javascript ngữ được biên dịch đa 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), và 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 và Storyset
Flaticon là kho ảnh icon phong phú và miễn phí.
Có tính năng tương tự IconFinder và IconArchive,
Flaticon là 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ó độ Hình 12: Flaticon
phân giải cao ở định dạng SVG, PSD, PNG,.. hoặc dưới dạng 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 website này là hình
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
Hình 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. Đặc tả yêu cầu ứng dụng (Requirement Specification) 2.1.
Giới thiệu ứng dụng (Overview)
Đồ án của chúng tôi là một ứng dụng mobile trắc 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 game
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A _ NHÓM 4 15 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
đ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 hỏi và 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 và figma để thiết kế giao diện cho ứng dụng. 2.2. Mục đích
Ứng dụng mobile trắc 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ể đo 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ả. 2.3. Phạm vi
Khi làm ra ứng dụng mobile trắc nghiệm Flag Quiz App thì chúng tôi hướng
đến tất cả mọi người không giới hạn độ tuổi có thể dùng và trải 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. 2.4.
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 _ NHÓM 4 16