CHƯƠNG 1: TỔNG QUAN - Vận dụng các kiến thức đã tìm hiểu để phân tích, xây dựng Website với các chức năng cần thiết đáp ứng đủ nhu cầu của hai bên client và admin. - Thiết kế giao diện thân thiện và đạt hiệu suất hoạt động ổn định.3 Cách tiếp cận và phương pháp nghiên cứu 1.1 Đối tượng “Website Vì đàn em” được nghiên cứu và xây dựng phục vụ cho tất cả các đối tượng người dùng quan tâm đến vấn đề giúp đỡ trẻ em ở Thành phố Hồ Chí Minh có thành tích tốt trong học tập, nhưng hoàn cảnh còn gặp nhiều khó khăn để thực hiện ước mơ đến với con chữ. Thêm vào đó Website còn hỗ trợ cho các cấp thành đoàn trong việc quản lý các hồ sơ, hoàn cảnh, tài trợ,… Mọi đối tượng người dùng không phân biệt tuổi tác, lĩnh vực ngành nghề đều có thể truy cập vào Website khi có Internet.2 Phương pháp nghiên cứu - Tìm hiểu các cơ sở lý thuyết và thực hành với những tài liệu về bộ công nghệ MERN trên các trang thông tin chính thức về từng công nghệ, trên Udemy và Youtube. - Xây dựng mô hình nghiệp vụ cho việc xây dựng hệ thống.
- Phân tích, khảo sát hiện trạng các Website tình nguyện khác trên Internet. - Xác định yêu cầu cho các đối tượng truy cập vào hệ thống. - Thiết kế sơ đồ, mô hình hóa chức năng. - Lập trình, kiểm tra chương trình.
- Cài đặt và kiểm thử. 2 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Ngôn ngữ JavaScript JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua. Nó cũng là một trong số 3 ngôn ngữ chính của lập trình Web, được phát triển bởi Brendan Eich tại hãng truyền thông Netscape. JavaScript là ngôn ngữ lập trình bậc cao, giống C/C++, Java hay Python, là ngôn ngữ lập trình kiểu động (dynamic programming language), được tối ưu hóa nhằm nâng cao hiệu suất làm việc cho lập trình viên.
Chữ script trong JavaScript đã nói rõ JavaScript là một ngôn ngữ lập trình kịch bản (scripting language), nghĩa là nó sẽ được dịch tại thời điểm chạy. JavaScript là ngôn ngữ dựa trên hướng đối tượng (object-based) và nguyên mẫu (prototype-based).2 Các công nghệ và dịch vụ sử dụng 2.1 Giới thiệu MongoDB là một cơ sở dữ liệu tài liệu mã nguồn mở và cơ sở dữ liệu NoSQL hàng đầu. Là một giải pháp thay thế cho cơ sở dữ liệu quan hệ. Cơ sở dữ liệu quan hệ lưu trữ dữ liệu trong bảng, hàng và cột với mối quan hệ giữa các thực thể.
Dữ liệu trong MongoDB được biểu diễn và tương tác bằng các tài liệu JSON.2 Tính năng nổi bật Quản lý cả dữ liệu có tổ chức và phi cấu trúc trong nhiều ứng dụng bằng cách tích hợp với các ngôn ngữ lập trình phổ biến khác. 3 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT - Hỗ trợ rất nhiều truy vấn, hỗ trợ các truy vấn đặc biệt, giúp truy vấn phạm vi, tìm kiếm trường và tìm kiếm cụm từ regex. - Chia và tách cơ sở dữ liệu của mình bằng chức năng tích hợp sẵn của MongoDB.Cho phép lập chỉ mục cho bất kỳ trường nào trong tài liệu nhằm nâng cao hiệu suất tìm kiếm chung của MongoDB.3 Ưu điểm - So với các cơ sở dữ liệu quan hệ khác, việc tối ưu hóa hiệu suất rất đơn giản. - Do cách nó sử dụng bộ nhớ trong để lưu trữ dữ liệu, nó cho phép truy cập dữ liệu nhanh chóng.
- Sử dụng sharding, MongoDB mở rộng theo chiều ngang (phân vùng dữ liệu trên các máy chủ khác nhau). Dữ liệu của bạn được phân tách và đặt đồng đều trên các phân đoạn. Điều này giúp người đọc dễ dàng tìm thấy dữ liệu của họ. - Dễ bảo trì hơn cơ sở dữ liệu thông thường - Sao chép dữ liệu và phân phối khối lượng công việc đã được sử dụng để tăng tính khả dụng của dữ liệu và mang lại hiệu suất cao.4 Nhược điểm - MongoDB lưu trữ tên khóa của từng cặp giá trị.
Ngoài ra, sự dư thừa dữ liệu xảy ra do các giới hạn của phép nối. Kết quả là, bộ nhớ được nhìn thấy thường xuyên hơn mức cần thiết. - 16 MB là giới hạn kích thước tối đa cho tài liệu.5 Áp dụng vào đề tài Sử dụng thư viện Mongoose của MongoDB để kết nối database hệ thống. 4 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu Node.js là một môi trường Runtime JavaScript.js ra đời là sự mở rộng của JavaScript, từ thứ chỉ có thể chạy trong trình duyệt, giờ có thể chạy trên máy tính như một ứng dụng độc lập.
Nhờ đó, JavaScript không còn chỉ là ngôn ngữ dành riêng cho việc tương tác với trang Web phía Front-end, mà JavaScript còn có thể dùng để xử lý ở phía Back-end.js đại diện cho mô hình “JavaScript ở mọi nơi”.2 Tính năng nổi bật - Node.js cung cấp cho nhà phát triển các API I/O hướng sự kiện và không đồng bộ. Nó cũng có thể diễn giải mã JavaScript thông qua công cụ JavaScript V8 của Google. - Hoạt động trên một vòng lặp dựa trên sự kiện theo luồng đơn để làm cho tất cả các lần thực thi không bị chặn.3 Ưu điểm - Hiệu suất cao cho các ứng dụng thời gian thực - Khả năng mở rộng dễ dàng cho các ứng dụng hiện đại - Tiết kiệm chi phí với Fullstack JS - Hỗ trợ cộng đồng để đơn giản hóa quá trình phát triển - Dễ học và thích ứng nhanh - Giúp xây dựng các Nhóm chức năng chéo - Cải thiện thời gian phản hồi của ứng dụng và tăng hiệu suất. - Giảm thời gian tải bằng bộ nhớ đệm nhanh - Giúp xây dựng các ứng dụng đa nền tảng.4 Nhược điểm 5 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT - MongoDB lưu trữ tên khóa của từng cặp giá trị.
Ngoài ra, sự dư thừa dữ liệu xảy ra do các giới hạn của phép nối. Kết quả là, bộ nhớ được nhìn thấy thường xuyên hơn mức cần thiết. - 16 MB là giới hạn kích thước tối đa cho tài liệu.5 Áp dụng vào đề tài Xây dựng các API 2.1 Giới thiệu Expressjs là một framework được xây dựng trên nền tảng của Nodejs. Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile.
Expressjs hỗ trợ các method HTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng.2 Tính năng nổi bật - Thiết lập các lớp trung gian để trả về các HTTP request. - Define router cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL. - Cho phép trả về các trang HTML dựa vào các tham số.3 Ưu điểm - Giúp phát triển ứng dụng web Node.js nhanh chóng và dễ dàng. - Dễ dàng cấu hình và tùy chỉnh.
- Cho phép bạn xác định các tuyến của ứng dụng dựa trên các phương thức HTTP và URL. - Bao gồm các mô-đun phần mềm trung gian khác nhau mà bạn có thể sử dụng để thực hiện các tác vụ bổ sung theo yêu cầu và phản hồi. - Dễ dàng tích hợp với các công cụ mẫu khác nhau như Jade, Vash, EJS, v. - Cho phép bạn xác định một phần mềm trung gian xử lý lỗi.
- Dễ dàng phục vụ các tệp tĩnh và tài nguyên của ứng dụng của bạn. 6 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT - Cho phép bạn tạo máy chủ API REST. - Dễ dàng kết nối với các cơ sở dữ liệu như MongoDB, Redis, MySQL 2.4 Nhược điểm - Express cũng không chỉ ra cách triển khai bảo mật. - Các thông báo lỗi không thật sự hữu ích cho quá trình gỡ lỗi.5 Áp dụng vào đề tài Tạo các routings để map giữa giao diện người dùng (UI) và hệ thống, quyết định xử lý các request.1 Giới thiệu - ReactJS là một thư viện JavaScript, hiệu quả và linh hoạt để xây dựng các thành phần giao diện người dùng có thể tái sử dụng.
ReactJS là một thư viện giao diện người dùng dựa trên thành phần mã nguồn mở chỉ chịu trách nhiệm cho lớp view của ứng dụng. - Một ứng dụng ReactJS được tạo thành từ nhiều component, mỗi component chịu trách nhiệm xuất ra một đoạn mã HTML nhỏ, có thể tái sử dụng. Các component này có thể được lồng với các component khác để cho phép các ứng dụng phức tạp được xây dựng từ các khối xây dựng đơn giản. ReactJS sử dụng cơ chế dựa trên Virtual DOM để điền dữ liệu vào HTML DOM.
React Virtual DOM hoạt động nhanh vì nó chỉ thay đổi các phần tử DOM riêng lẻ thay vì tải lại toàn bộ DOM mỗi lần.2 Tính năng nổi bật - Ta có thể sử dụng React để xây dựng ứng dụng di động, đồng thời có thể tái sử dụng mã rộng rãi. Hơn thế, ta cũng có thể làm app trên Android, IOS và Web cùng một lúc. 7 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT - Rất dễ dàng để có thể kiểm tra các ứng dụng của Reat, có thể thực hiện thao tác với trạng thái khi chuyển đến chế độ xem ReactJS và xem đầu ra, các hành động, sự kiện, chức năng,… - Có thể sử dụng ReactJS để viết ứng dụng trực tiếp bằng JavaScript. - Biến các thành phần UI phức tạp trở thành những component độc lập.
- Chuyển các dữ liệu đã được tùy biến đến một UI component cụ thể. - Giúp thay đổi trạng thái cho nhiều component con và không gây ảnh hưởng đến component gốc dù đang ở trong đang ở trạng thái Stateful. - Khả năng xác định chính xác khi nào cần render lại cũng như khi nào bỏ đi phần tử DOM.3 Ưu điểm - Thuận tiện, khá dễ để học và sử dụng. - Tạo các ứng dụng web động trở nên dễ dàng hơn.
- Có lượng tài liệu phong phú, dễ sử dụng hơn nếu có nền tảng về Javascript. - Các thành phần có thể tái sử dụng. - Nâng cao hiệu suất khi ReactJS quản lý một Virtual DOM. DOM xử lý HTML, XML hoặc XHTML.
Nó là một API lập trình và đa nền tảng. Với ReactJS, người dùng không viết trực tiếp vào DOM mà vào Virtual DOM, do đó dẫn đến hiệu suất mượt mà và nhanh hơn. - Hỗ trợ các công cụ tiện dụng, với sự hiện diện của một bộ công cụ tiện dụng trong ReactJS tạo sự thuận tiện và dễ dàng hơn cho các nhà phát triển.4 Nhược điểm - ReactJS sử dụng JSX. Đó là một phần mở rộng cú pháp cho phép trộn lẫn HTML với JavaScript với nhau tạo sự phức tạp trong quá trình học tập.
- Trường hợp nhược điểm của tốc độ phát triển cao vì môi trường liên tục thay đổi quá nhanh, đòi hỏi học những cách làm việc mới thường xuyên. 8 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.5 Áp dụng vào đề tài Xây dựng giao diện người dùng (UI) 2.