đồ án 2 xây dựng website quản lý viết báo cáo và minh chứng trong kiểm định chất lượng
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.17 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Í MINHTRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN</b>
---- ---- -
</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2"><b>LỜI CẢM ƠN</b>
Xin chân thành cảm ơn trường Đại học Công nghệ Thông tin ĐHQG TP.HCM,quý Thầy (Cô) bộ môn đã tạo điều kiện và hỗ trợ chúng em trong q trình học tậpmơn đồ án 2 vừa qua. Nhờ sự đồng lòng và sự quan tâm của q Thầy (Cơ), chúng emđã có một mơi trường học tập thuận lợi và được trao dồi kiến thức một cách hiệu quả.
Chúng em xin chân thành cảm ơn Cô Huỳnh Thị Mộng Trinh, người đã dànhthời gian và tâm huyết để giảng dạy, giải đáp thắc mắc và hỗ trợ chúng em trong suốtthời gian qua. Sự tận tâm và sự chỉ dẫn tận tình của Cô đã giúp chúng em hiểu rõ hơnvề nội dung đồ án và phát triển đồ án một cách tốt nhất.
Chúng em nhận thức rằng kiến thức mà nhóm tìm hiểu vẫn cịn hạn chế và dựán của chúng em vẫn cịn thiếu sót. Vì vậy chúng em rất mong nhận được sự góp ýchân thành từ Cơ để chúng em có thể rút kinh nghiệm, nâng cao kiến thức và hồnthiện đề tài nghiên cứu của nhóm.
Một lần nữa, chúng em xin chân thành cảm ơn sâu sắc. Chúng em rất biết ơn vàtự hào vì đã có cơ hội được học tập và làm việc dưới sự hướng dẫn của cô Huỳnh ThịMộng Trinh. Mong rằng chúng em sẽ tiếp tục nhận được sự hỗ trợ và định hướng từcô trong tương lai.
<i>Thành phố Hồ Chí Minh, ngày 29 tháng 12 năm 2023</i>
<b>Nhóm sinh viên thực hiện</b>
Phạm Nhật MinhHuỳnh Trung Thảo
</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3"><b>ĐỀ CƯƠNG CHI TIẾT</b>
<b>Tên đề tài: Xây dựng website quản lý viết báo cáo và minh chứng trong kiểm định </b>
chất lượng
<b>Cán bộ hướng dẫn: CÔ HUỲNH HỒ THỊ MỘNG TRINHThời gian thực hiện: Từ ngày 05/09/2023 đến ngày 28/12/2023Sinh viên thực hiện:</b>
1. PHẠM NHẬT MINH 205210032. HUỲNH TRUNG THẢO - 20521932
<i><b>Nội dung đề tài:(Mô tả chi tiết mục tiêu, phạm vi, đối tượng, phương pháp thực </b></i>
<i>hiện, kết quả mong đợi của đề tài)</i>
<b>Mục tiêu:</b>
Nghiên cứu và ứng dụng công nghệ mới:
● Nghiên cứu và áp dụng các công nghệ lập trình hiện đại như ReactJS chophần front-end và ExpressJS cho phần back-end.
● Xây dựng hệ thống backend linh hoạt và mở rộng với sự hỗ trợ củaExpressJS.
● Áp dụng các ngun lý và mơ hình phát triển phần mềm mới nhất.Phát triển ứng dụng thực tế và hiệu quả:
● Tạo ứng dụng web quản lý bất động sản có tính thực tiễn cao, triển khai đượcvào môi trường thực tế.
● Hỗ trợ các công ty quản lý dự án động sản với giao diện thân thiện, bố cụchợp lý và đầy đủ chức năng.
● Xây dựng trang quản trị với các chức năng quản lý thông tin đa dạng và tiệndụng.
</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4"><b>Phương pháp thực hiện: </b>
● Thực hiện công việc dựa trên kế hoạch đã được lập trước đó, tận dụng nănglực và kinh nghiệm có sẵn.
● Phân chia công việc thành các giai đoạn cụ thể để quản lý dễ dàng hơn.
● Làm việc theo các công nghệ đã chọn, sử dụng ReactJS cho phần front-endvà ExpressJS cho phần back-end.
<b>Công nghệ sử dụng:</b>
<b>-</b> Front-end: ReactJS.
<b>-</b> Back-end: ExpressJS (Node.js).
<b>-</b> Database: MongoDB.
<b>-</b> Source Control: Github.
<b>-</b> Swagger UI - REST API.
<b>Kết quả mong đợi: </b>
Sau quá trình nghiên cứu, phát triển và triển khai, đề tài "Xây dựng website quản lý viết báo cáo và minh chứng trong kiểm định chất lượng" sẽ đạt được những thành tựu sau:
Quản lý Báo cáo hiệu quả: Tính năng quản lý báo cáo sẽ giúp người dùng dễ dàng viết, chỉnh sửa và lưu trữ các báo cáo kiểm định chất lượng một cách hiệu quả.
Minh chứng Đính kèm: Hệ thống sẽ hỗ trợ việc đính kèm và quản lý minh chứng liên quan đến từng báo cáo, giúp người dùng dễ dàng xemvà kiểm tra thông tin chi tiết.
Giao diện Thân thiện và Dễ sử dụng: Website sẽ có giao diện thân thiện, bố cục hợp lý, thuận tiện cho người dùng trong quá trình viết
</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">báo cáo và quản lý minh chứng.
<b>●</b> Chức năng Quản trị Linh hoạt: Trang quản trị sẽ cung cấp các chức năng quản lý thông tin đa dạng và tiện ích, giúp người quản trị dễ dàng theo dõi và
<b>điều chỉnh nội dung. </b>
<b>Nội dung</b>
05/09/2023 – 19/09/2023Chuẩn bị kiến thức về cơng nghệ
- Tìm hiểu đề tài, xác định các chức năng của hệ thống.
- Tìm hiểu về Angular để xây dựng Frontend.- Tìm hiểu về Web API C# để xây dựng Backend.
- Tìm hiểu về SQL Server để xây dựng
</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">Database.20/09/2023 – 10/10/2023
Phân tích thiết kế hệ thống
- Phân tích, xác định, đặc tả chức năng.- Xác định các luồng xử lí.
- Thiết kế base source hệ thống.- Xây dựng CSDL.
- Thiết kế UI.11/10/2023 – 19/11/2023
Xây dựng ứng dụng
- Xây dựng Frontend bằng ReactJS.- Xây dựng Backend bằng Web API ExpressJS.
- Tích hợp API vào ứng dụng web.20/11/2023 – 20/12/2023
Kiểm thử và sửa lỗi
- Thực hiện kiểm thử các luồng chức năng.- Sửa lỗi, cải thiện giao diện, hoàn thiện ứng dụng.
26/12/2023 – 29/12/2023Hoàn thiện báo cáo
- Hoàn thiện báo cáo.
</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">Chương 1. TỔNG QUAN VỀ ĐỀ TÀI...12
1.1. Giới thiệu về đề tài...12
1.2. Khảo sát hiện trạng...12
Dưới đây là một số phần mềm “Quản lý viết báo cáo và minh chứng trong kiểm định chất lượng đào tạo” hiện có, nó khơng phải là website chun dụng cho từngtổ chức và được sinh ra cho nhu cầu chung của các cơ sở đào tạo nên vẫn còn nhiều hạn chế:...13
1.3. Đối tượng nghiên cứu...14
Đồ án này hướng đến nghiên cứu các đối tượng sau:...14
1.4. Phạm vi nghiên cứu...14
1.5. Phương pháp nghiên cứu...15
1.6. Nhiệm vụ của đề tài...15
Chương 2. CƠ SỞ LÝ THUYẾT...16
2.1. Tổng quan về ReactJS...16
2.1.1. Giới thiệu về Reactjs...16
ĐẶC TRƯNG CỦA REACTJS...17
2.1.2. Tại sao nên sử dụng Reactjs...18
2.2. Firebase...20
2.2.1. Giới thiệu về Firebase...20
2.2.2. Tại sao nên sử dụng Firebase...20
Chương 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG...22
3.1. Mơ tả yêu cầu...22
3.1.1. Yêu cầu chức năng...22
3.1.2. Yêu cầu phi chức năng...22
3.2. Kiến trúc hệ thống...23
3.2.1. Sơ đồ kiến trúc tổng quát...23
</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">3.2.2. Mô tả kiến trúc Front-End...24
3.2.3. Mô tả kiến trúc Back-End...25
Chương 4. USE CASE...27
4.1. Use case diagram...27
4.2. Danh sách Actor...27
4.3. Danh sách Use case...27
4.4. Đặc tả Use case...29
4.4.1. Use case “Đăng nhập.”...29
4.4.2. Use case “Quản lý báo cáo.”...29
4.4.3. Use case “Upload minh chứng từ local.”...29
4.4.4. Use case “Xóa báo cáo.”...30
4.4.5. Use case “Xem báo cáo và minh chứng.”...30
4.4.6. Use case “Chỉnh sửa nội dung báo cáo có sẵn.”...30
4.4.7. Use case “Mở file báo cáo.”...31
4.4.8. Use case “Tải lên báo cáo từ local.”...31
4.4.9. Use case “Load nội dung báo cáo từ Google Drive.”...31
4.4.10. Use case “Load nội dung báo cáo từ URL.”...31
4.4.11. Use case “Lưu file báo cáo.”...32
4.4.12. Use case “Link file minh chứng cho từng mục.”...32
4.4.13. Use case “Upload minh chứng.”...32
4.4.14. Use case “Link minh chứng từ Drive.”...33
4.4.15. Use case “Xem song song hai màn hình.”...33
4.4.16. Use case “Chọn chuẩn và custom nội dung.”...33
4.4.17. Use case “Tạo báo cáo mới.”...34
Chương 5. THIẾT KẾ CLASS...35
</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">6.1.2. Đối tượng user...38
6.1.3. Đối tượng document...38
6.2. Thiết kế giao diện...39
</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10"><b>DANH MỤC BẢNG</b>
Bảng 3-1 Mô tả chức năng ứng dụng...22
Bảng 3-2 Mô tả thành phần kiến trúc front-end...25
Bảng 3-3 Mô tả thành phần kiến trúc back-end...26
Bảng 4-1 Danh sách actor...27
Bảng 4-2 Danh sách use case...28
Bảng 4-3 Use case đăng nhập...29
Bảng 4-4 Use case quản lý báo cáo...29
Bảng 4-5 Use case upload minh chứng từ local...29
Bảng 4-6 Use case xóa báo cáo...30
Bảng 4-7 Use case xem báo cáo và minh chứng...30
Bảng 4-8 Use case chỉnh sửa nội dung báo cáo có sẵn...30
Bảng 4-9 Use case mở file báo cáo...31
Bảng 4-10 Use case tải lên báo cáo từ local...31
Bảng 4-11 Use case load nội dung báo cáo từ Google Drive...31
Bảng 4-12 Use case Load nội dung báo cáo từ URL...32
Bảng 4-13 Use case lưu file báo cáo...32
Bảng 4-14 Use case link flie minh chứng cho từng mục...32
Bảng 4-15 Use case upload minh chứng...33
Bảng 4-16 Use case link minh chứng từ drive...33
Bảng 4-17 Use case xem song song hai màn hình...33
Bảng 4-18 Use case chọn chuẩn và custom nội dung...34
Bảng 4-19 Use case tạo báo cáo mới...34
Bảng 5-1 Danh sách class backend...36
Bảng 6-1 Danh sách các đối tượng trong hệ thống (chức năng)...37
Bảng 6-2 . Mô tả dữ liệu user...38
Bảng 6-3 . Mô tả dữ liệu document...39
</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">Hình 3-2 Sơ đồ kiến trúc front-end...24
Hình 3-3 Sơ đồ kiến trúc back-end...25
Hình 4-1 Use case diagram...27
Hình 5-1 Class diagram...35
Hình 6-1 Danh sách các đối tượng trong hệ thống (thuộc tính)...37
Hình 6-2 Đối tượng user...38
Hình 6-3 Đối tượng document...38
Hình 6-4 Giao diện màn hình đăng nhập...39
Hình 6-5 Giao diện màn hình đăng ký...40
Hình 6-6 Giao diện màn hình chính...40
Hình 6-7 Giao diện màn hình file báo cáo...41
Hình 6-8 Giao diện màn hình up minh chứng...41
Hình 6-9 Giao diện màn hình upload local...42
Hình 6-10 Giao diện màn hình soạn thảo...42
Hình 6-11 Giao diện màn hình thay đổi tài khoản...43
Hình 6-12 Giao diện màn hình thùng rác...43
Hình 6-13 Giao diện màn hình upload từ drive...44
</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12"><b>Chương 1. TỔNG QUAN VỀ ĐỀ TÀI</b>
<b>1.1.Giới thiệu về đề tài</b>
Việc quản lý và đảm bảo chất lượng đào tạo là một khía cạnh quan trọng của hệthống giáo dục. Kiểm định chất lượng đào tạo là một hoạt động quan trọng nhằm đánhgiá chất lượng của q trình đào tạo, góp phần nâng cao chất lượng đào tạo. Trong quátrình kiểm định chất lượng, minh chứng là một yếu tố quan trọng, giúp các cơ quan, tổchức đánh giá một cách khách quan, toàn diện chất lượng đào tạo. Chuẩn ASIIN đượcbiết đến như một tổ chức độc lập hàng đầu trong lĩnh vực đánh giá và đảm bảo chấtlượng của các chương trình đào tạo kỹ thuật tại Đức và quốc tế. Điều này tạo ra mộtcơ hội lý tưởng để nghiên cứu và phát triển một hệ thống quản lý trực tuyến giúp kiểmđịnh chất lượng đào tạo theo chuẩn ASIIN.
Đề tài “Xây dựng website quản lý viết báo cáo và minh chứng trong kiểm địnhchất lượng đào tạo” nhằm xây dựng một hệ thống web cho phép quản lý các báo cáovà minh chứng liên quan tới quá trình kiểm định chất lượng ở các cơ sở đào tạo. Hệthống sẽ cho phép người dùng có thể đăng nhập, xem thơng tin chuẩn đầu ra của từngchương trình đào tạo, yêu cầu minh chứng cần thiết, viết và nộp các báo cáo liên quantới tiến trình kiểm định. Đề tài này không chỉ đặt ra một thách thức hấp dẫn trong việckết hợp kỹ thuật phần mềm mà còn mang lại giá trị thực tế bằng cách giúp các trườngđại học và các cơ sở đào tạo có thể theo dõi và cải thiện chất lượng của các chươngtrình đào tạo.
Đề tài áp dụng cơng nghệ web, cơ sở dữ liệu và các kỹ thuật phát triển phầnmềm để xây dựng một hệ thống hữu ích, đáp ứng nhu cầu quản lý thơng tin hiệu quảtrong q trình kiểm định chất lượng đào tạo với mục tiêu là xây dựng một websitequản lý dễ dàng lưu trữ, tìm kiếm minh chứng mà phải đảm bảo tính bảo mật, giúp cáctổ chức đào tạo tiết kiệm thời gian và công sức trong khâu quản lý.
<b>1.2.Khảo sát hiện trạng</b>
Trong thời đại ngày nay, chất lượng đào tạo đã trở thành một ưu tiên hàng đầutrong hệ thống giáo dục. Sự tăng cao của chất lượng đào tạo được thúc đẩy bởi nhucầu ngày càng cao từ phía doanh nghiệp và xã hội. Để đáp ứng những tiêu chuẩn chất
</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">lượng ngày càng cao, nhiều cơ sở giáo dục trên thế giới, như được đánh giá bởi các tổchức như ASIIN, đã áp dụng các quy trình và tiêu chuẩn khắt khe trong việc phát triểnvà duy trì chương trình đào tạo.
Theo đó, u cầu về quản lý báo cáo và minh chứng trong quá trình đào tạocũng đồng loạt tăng lên. Các tổ chức giáo dục cần chứng minh rằng chương trình họccủa họ đáp ứng hoặc vượt qua các tiêu chuẩn chất lượng quốc tế. Điều này yêu cầu họphải xây dựng và duy trì hệ thống báo cáo chi tiết và minh chứng đầy đủ. Ngoài ra,giảng viên và người quản lý báo cáo đều cần có một nền tảng thuận tiện để theo dõitiến độ và chất lượng của quá trình đào tạo. Thêm vào đó, sự đồng bộ và minh bạchtrong q trình kiểm định chất lượng là điều quan trọng để đảm bảo rằng các chuẩn vàtiêu chí của ASIIN được tuân thủ một cách đúng đắn và hiệu quả.
Hiện nay, hầu hết các trường đại học và cơ sở đào tạo vẫn đang sử dụngphương pháp truyền thống trong việc quản lý và đánh giá chất lượng đào tạo. Các hệthống quản lý báo cáo và minh chứng đang có hiện nay thường phức tạp, thiếu tínhtương tác và khả năng đồng bộ hóa, dẫn đến việc gặp nhiều khó khăn trong việc theodõi, đánh giá và nâng cao chất lượng.
Nắm bắt xu hướng này, yêu cầu về việc có một website kiểm định, nơi cungcấp thông tin đầy đủ về chất lượng đào tạo, đã trở thành điều không thể thiếu. Nhữngtrang web này không chỉ là công cụ quan trọng để cung cấp thông tin cho việc đánhgiá, mà còn giúp cơ sở giáo dục thể hiện cam kết của họ đối với chất lượng và sự minhbạch trong quá trình đào tạo.
Dưới đây là một số phần mềm “Quản lý viết báo cáo và minh chứng trong kiểmđịnh chất lượng đào tạo” hiện có, nó khơng phải là website chuyên dụng cho từng tổ chức và được sinh ra cho nhu cầu chung của các cơ sở đào tạo nên vẫn còn nhiều hạn chế:
<b>QLCL (Bộ GD)</b>
<b>Phần mềm</b>
</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">Lập kế hoạch kiểm định Có Có Không
Hỗ trợ nhiều thiết bị Web, mobile Chủ yếu web Web, mobile
Nền tảng Đa nền tảng Chủ yếu web Đa nền tảng
<i>Hình 1-1 Một số phần mềm hỗ trợ quản lý kiểm định chất lượng đào tạo</i>
<b>1.3.Đối tượng nghiên cứu</b>
Đồ án này hướng đến nghiên cứu các đối tượng sau:❖ Các công nghệ:
o ReactJSo Reduxo Node.jso Express.js
o Firebase Authenticationo MongoDB
o Google Drive API
❖ Đối tượng trong phạm vi đề tài hướng đến:o Giảng viên trường đại học.
o Người quản lý báo cáo.
</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">❖ Phạm vi về đối tượng: Nghiên cứu các cơ sở đào tạo đại học, cao đẳng, trung cấpchuyên nghiệp, các tổ chức, cá nhân có liên quan đến kiểm định chất lượng đàotạo.
Đề tài tập trung vào việc xây dựng website quản lý báo cáo và minh chứngphục vụ công tác kiểm định chất lượng đào tạo, bao gồm các chức năng chính:
o Quản lý thông tin người dùng, phân quyền.
o Quản lý các chương trình đào tạo và chuẩn đầu ra.o Thu thập, lưu trữ minh chứng đào tạo.
o Quản lý tiến độ và lịch trình kiểm định.
o Hỗ trợ viết, nộp và phê duyệt các báo cáo trong quá trình kiểm định.
<b>1.5.Phương pháp nghiên cứu</b>
Nghiên cứu lí luận: nghiên cứu cơ sở lí luận về kiểm định chất lượng đào tạo. Khảo sát thực tế: Khảo sát nhu cầu quản lí thông tin và yêu cầu về chức năng
của hệ thống.
Phân tích, thiết kế và xây dựng hệ thống. Triển khai, thử nghiệm và đánh giá hệ thống.
<b>1.6.Nhiệm vụ của đề tài</b>
Nghiên cứu cơ sở lý thuyết và các yêu cầu đối với hệ thống quản lý viết báo cáo và minh chứng trong kiểm định chất lượng đào tạo.
Khảo sát thực trạng và phân tích yêu cầu, cũng như các cơng nghệ liên quan có thể áp dụng.
Thiết kế giao diện và chức năng của website.
Xây dựng các mơ hình, thuật tốn xử lý dữ liệu phục vụ cho việc lưu trữ, tìm kiếm, phân tích minh chứng.
Triển khai xây dựng, kiểm thử và hoàn thiện hệ thống website.
Hướng dẫn và đánh giá việc vận hành, sử dụng hệ thống sau khi triển khai.</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16"><b>Chương 2. CƠ SỞ LÝ THUYẾT</b>
<b>2.1. Tổng quan về ReactJS</b>
<b>1.</b>
</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17"><b>2.1.1. Giới thiệu về Reactjs</b>
React.js là một thư viện Javascript đang nổi lên trong những năm gần đây vớixu hướng Single Page Application. Trong khi những framework khác cố gắng hướngđến một mô hình MVC hồn thiện thì React nổi bật với sự đơn giản và dễ dàng phốihợp với những thư viện Javascript khác. Nếu như AngularJS là một Framework chophép nhúng code javascript trong code html thông qua các attribute như ng-model, ng-repeat...thì với react là một library cho phép nhúng code html trong code javascriptnhờ vào JSX, có thể dễ dàng lồng các đoạn HTML vào trong JS. Tích hợp giữajavascript và HTML vào trong JSX làm cho các component dễ hiểu hơn.
React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng nhữngthành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lạiđược. React được sử dụng tại Facebook trong production, và Instagram được viết hoàntoàn trên React.
Một trong những điểm hấp dẫn của React là thư viện này khơng chỉ hoạt độngtrên phía client, mà cịn được render trên server và có thể kết nối với nhau. React so
<i>Hình 2-2 ReactJS</i>
</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ítthay đổi nhất trên DOM.
<b>ĐẶC TRƯNG CỦA REACTJSJSX</b>
Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trang web thì sẽ dùng JSX. JSX được đánh giá là sử dụng đơn giản hơn JavaScript vàcho phép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML để render các subcomponent. JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so với code JavaScript tương đương.
<i>Một thành phần cực kỳ quan trọng, khơng một react developer nào mà khơng biết. Vì vậy hãy tìm hiểu ngay Redux là gì?</i>
<i>Hình 2-3 Single-way data flow (Luồng dữ liệu một chiều)</i>
ReactJS khơng có những module chuyên dụng để xử lý data, vì vậy ReactJS chia nhỏ view thành các component nhỏ có mỗi quan hệ chặt chẽ với nhau. Tại
</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">sao chúng ta phải quan tâm tới cấu trúc và mối quan hệ giữa các component trong ReactJS? Câu trả lời chính là luồng truyền dữ liệu trong ReactJS: Luồng dữ liệu một chiều từ cha xuống con. Việc ReactJS sử dụng one-way data flow có thể gây ra một chút khó khăn cho những người muốn tìm hiểu và ứng dụng vào trong các dự án. Tuy nhiên, cơ chế này sẽ phát huy được ưu điểm của mìnhkhi cấu trúc cũng như chức năng của view trở nên phức tạp thì ReactJS sẽ phát huy được vai trị của mình.
<b>Virtual DOM</b>
Những Framework sử dụng Virtual-DOM như ReactJS khi Virtual-DOM thay đổi, chúng ta không cần thao tác trực tiếp với DOM trên View mà vẫn phản ánh được sự thay đổi đó. Do Virtual-DOM vừa đóng vai trị là Model, vừa đóng vai trị là View nên mọi sự thay đổi trên Model đã kéo theo sự thay đổi trên View và ngược lại. Có nghĩa là mặc dù chúng ta không tác động trực tiếp vào các phần tử DOM ở View nhưng vẫn thực hiện được cơ chế Data-binding. Điều này làm cho tốc độ ứng dụng tăng lên đáng kể – môt lợi thế không thể tuyệt vời hơn khi sử dụng Virtula-DOM.
<b>2.1.2. Tại sao nên sử dụng Reactjs</b>
Dễ sử dụng:
● React là một thư viện GUI nguồn mở JavaScript tập trung vào một điều cụ thể;hồn thành nhiệm vụ UI hiệu quả. Nó được phân loại thành kiểu “V” trong mơhình MVC (Model-View-Controller).
● Là lập trình viên JavaScript, bạn sẽ dễ dàng hiểu được những điều cơ bản vềReact. Bạn thậm chí có thể bắt đầu phát triển các ứng dụng dựa trên web bằngcách sử dụng react chỉ trong vài ngày.
</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">● Để củng cố hiểu biết của mình, bạn hãy thử khám phá thêm nhiều hướng dẫnvề React. Chúng mang đến nhiều thông tin về cách sử dụng công cụ: videos,hướng dẫn và dữ liệu làm phong phú góc nhìn của bạn.
Hỗ trợ Reusable Component trong Java:
● React cho phép bạn sử dụng lại components đã được phát triển thành các ứngdụng khác có cùng chức năng. Tính năng tái sử dụng component là một lợi thếkhác biệt cho các lập trình viên.
Viết component dễ dàng hơn:
● React component dễ viết hơn vì nó sử dụng JSX, mở rộng cú pháp tùy chọncho JavaScript cho phép kết hợp HTML với JavaScript.
● JSX là một sự pha trộn tuyệt vời của JavaScript và HTML. Nó làm rõ tồn bộq trình viết cấu trúc trang web. Ngoài ra, phần mở rộng cũng giúp rendernhiều lựa chọn dễ dàng hơn.
● JSX có thể không là phần mở rộng cú pháp phổ biến nhất, nhưng nó đượcchứng minh là hiệu quả trong việc phát triển components đặc biệt hoặc các ứngdụng có khối lượng lớn.
Hiệu suất tốt hơn với Virtual DOM:
● React sẽ cập nhật hiệu quả quá trình DOM (Document Object Model – Mơhình đối tượng tài liệu). Như đã biết, q trình này có thể gây ra nhiều thấtvọng trong các dự án ứng dụng dựa trên web. May mắn là React sử dụngvirtual DOMs, vì vậy có thể tránh được vấn đề này.
● Công cụ cho phép xây dựng các virtual DOMs và host chúng trong bộ nhớ.Nhờ vậy, mỗi khi có sự thay đổi trong DOM thực tế, thì virtual sẽ thay đổingay lập tức.
</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">● Hệ thống này sẽ ngăn DOM thực tế để buộc các bản cập nhật được liên tục. Dođó, tốc độ của ứng dụng sẽ không bị gián đoạn.
Thân thiện với SEO:
● React cho phép tạo giao diện người dùng có thể được truy cập trên các cơng cụtìm kiếm khác nhau. Tính năng này là một lợi thế rất lớn vì không phải tất cảcác khung JavaScript đều thân thiện với SEO.
<i>●</i> Ngồi ra, vì React có thể tăng tốc q trình của ứng dụng nên có thể cải thiệnkết quả SEO. Cuối cùng tốc độ web đóng một vai trị quan trọng trong tối ưuhóa SEO.
<b>2.2. Firebase</b>
<b>2.2.1. Giới thiệu về Firebase</b>
Firebase là một nền tảng sở hữu bởi google giúp chúng ta phát triển các ứng dụng di động và web. Họ cung cấp rất nhiều công cụ và dịch vụ tiện ích để phát triển ứng dụng nên một ứng dụng chất lượng. Điều đó rút ngắn thời gian phát triển và giúp ứng dụng sớm ra mắt với người dùng.
Firebase cung cấp cho người dùng các dịch vụ cơ sở dữ liệu hoạt động trên nềntảng đám mây với hệ thống máy chủ cực kỳ mạnh mẽ của Google. Chức năng chính của firebase là giúp người dùng lập trình ứng dụng, phần mềm trên các nền tảng web, di động bằng cách đơn giản hóa các thao tác với cơ sở dữ liệu.
Với firebase, bạn có thể tạo ra những ứng dụng real-time như app chat, cùng nhiều tính năng như xác thực người dùng, Cloud Messaging... Bạn có thể dùng firebase giống như phần backend của app.
Các dịch vụ của firebase hồn tồn miễn phí, tuy nhiên bạn cần phải trả thêm tiền nếu muốn nâng cấp lên. Điều này bạn nên cân nhắc nếu muốn xây dựng một ứng
</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">dụng lớn sử dụng phần backend là firebase, vì cái giá khi muốn nâng cấp còn khá đắt đỏ so với việc xây dựng backend truyền thống
<b>2.2.2. Tại sao nên sử dụng Firebase</b>
Firebase realtime database là một cơ sở dữ liệu thời gian thực, NoSQL được lưu trữ đám mây cho phép lưu trữ và đồng bộ dữ liệu. Dữ liệu được lưu trữ dưới dạng cây Json, và được đồng bộ theo thời gian thực đối với mọi kết nối.
Khi xây dựng những ứng dụng đa nền tảng như android, IOS và Web App, tất cả các client của bạn sẽ kết nối trên cùng một cơ sở dữ liệu Firebase và tự động cập nhật dữ liệu mới nhất khi có sự thay đổi
Cả một cơ sở dữ liệu là một cây json lớn, với độ trễ thấp, Firebase realtime database cho phép bạn xây dựng các ứng dụng cần độ realtime như app chat, hay game online…
<b>Firebase có các tính năng bảo mật hàng đầu</b>
Tất cả dữ liệu được truyền qua một kết nối an toàn SSL, việc truy vấn cơ sở dữ liệu truy vấn và việc xác nhận thông tin được điều khiển theo một số các quy
tắc security rules language. Các logic bảo mật dữ liệu của bạn được tập trung ở một nơi để dễ dàng cho việc sửa đổi, cập nhật và kiểm thử.
Firebase Authentication là chức năng xác thực người dùng. Hiểu một cách đơn giản, app của bạn cần phải đăng nhập/ đăng ký tài khoản để sử dụng, Firebase cung cấp cho chúng ta chức năng xác thực người dùng bằng email, số điện thoại, hay tài khoản Facebook, Google, ...
Firebase Cloud Storage là một không gian lưu trữ dữ liệu, nó giống như một chiếc ổ cứng. Bạn có thể upload và download các loại file bạn muốn. Đó có thể là mộtfile ảnh, hay file văn bản, .zip,
</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">Firebase là một nền tảng cung cấp rất nhiều những dịch vụ tiện ích để phát triểnứng dụng app, web, mobile...
</div>
