CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Tổng quan React 1.1 Giới thiệu React React là một thư viện javascript mã nguồn mở được phát triển bởi Facebook, mục đích là tạo ra những ứng dụng web nhanh hơn, hấp dẫn hơn và hiệu quả hơn với khối lượng mã nguồn tối thiểu. Sức mạnh của ReactJS đến từ việc chia web thành các thành phần riêng lẻ. thay vì làm việc trên toàn bộ ứng dụng web, ReactJS cho phép một developer có thể chia giao diện người dùng phức tạp thành các thành phần đơn giản hơn.
Ngoài ra, chúng cũng còn được sử dụng kết hợp với thư viện JavaScript hay framework khác như Angular hoặc MVC. Các khái niệm cơ bản trong React 1. Virtual dom Là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật. Component React được xây dựng bằng các component, các component nhỏ sẽ được sử dụng, kết hợp với nhau tạo ra một giao diện cụ thể.
Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khách nhau, trong một component có thể có các component nhỏ hơn. Trong các component của React thì hàm render là quan trọng nhất. Nó chính là hàm xử lý việc tạo thẻ HTML cũng như chứng tỏ cho khả năng xử lý qua Virtual- DOM. Mọi thay đổi của dữ liệu ở bất cứ thời điểm nào đều cũng sẽ được Virtual- DOM xử lý và update ngay tức thì.
Các dạng dữ liệu cơ bản của React React có hai dạng dữ liệu là Prop và State, hai dạng này tương đối khó phân biệt nên cần hiểu rõ mục đích sử dụng của từng dạng: State là dữ liệu cục bộ bị kiểm soát bởi component. State chính là dữ liệu chỉ có thể thay đổi trong component mà ta đã khai báo. Các component khác không thể dử dụng cũng như thay đổi được. Prop là thì không bị kiểm soát bởi component.
Ngược với State thì Prop lại có thể được sử dụng và thay đổi thông qua component khác. Vòng đời trong React Hình 1 Vòng đời React [1] constructor(props) Được gọi khi một thể hiện của component được tạo ra. o Có thể dùng để khởi tạo state cho component. o Cũng có thể dùng để "bind" các hàm của component.
o Nếu phải cài đặt hàm này thì phải khai báo 1 tham số props cho nó và o phải gọi super(props) đầu tiên. o Nếu không làm gì thì không phải cài đặt hàm này. o Dùng để đăng ký các sự kiện toàn cục. o Dựa vào các props để tính toán và set lại state render() o Hàm này bắt buộc phải có trong component().
3 do an o Trả về 1 đối tượng JSX (có thể lồng các đối tượng với nhau nhưng phải có 1 đối tượng gói tất cả các đối tượng lại) để hiển thị hoặc null / false nếu không muốn hiển thị gì. o Không được gọi setState() trong hàm này (cũng như trong các hàm mà hàm này gọi đến), bởi khi gọi setState() thì hàm render sẽ được gọi => gây ra lặp vô hạn. componentDidMount() o Ngay sau khi hàm render được gọi đến lần đầu tiên chạy xong thì hàm này sẽ được chạy. o Thường dùng để fetch dữ liệu từ server và sau đó setState để render dữ liệu ra.
o Đến đây thì các phần tử đã được sinh ra rồi, và có thể tương tác với DOM bằng JS trong hàm này. componentWillReceiveProps(nextProps) o Hàm này được chạy khi mà props của component đã được sinh ra có sự thay đổi. o Phải gọi setState() nếu muốn render lại. shouldComponentUpdate(nextProps, nextState) o Được gọi trước render.
o Trả về true / false. Nếu false thì sẽ không render lại. Mặc định là true. componentWillUpdate(nextProps, nextState) o Được gọi ngay sau shouldComponentUpdate() nếu hàm này trả về true.
o Không gọi setState() trong hàm này bởi hàm này là để chuẩn bị update cho đối tượng chứ không phải tạo ra 1 update mới, sẽ tạo ra lặp vô hạn. o Hàm render sẽ được gọi ngay sau hàm này. componentDidUpdate(prevProps, prevState) o Được gọi ngay sau render() từ lần render thứ 2 trở đi. o Đây cũng là 1 cơ hội để thao tác với các phần tử DOM bằng JS.
componentWillUnmount() o Được gọi khi 1 component được loại bỏ khỏi DOM. Thực hiện các thao tác dọn dẹp như huỷ các timer, loại bỏ các phần tử thừa,. Tổng quan NodeJS 2. Giới thiệu NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine, nó được sử dụng để xây dựng các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp.
NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ WIndow cho tới Linux, OS X nên đó cũng là một lợi thế. NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất. Các đặc tính của NodeJS Không đồng bộ: Tất cả các API của NodeJS đều không đồng bộ (none- blocking), nó chủ yếu dựa trên nền của NodeJS Server và chờ đợi Server trả dữ liệu về. Việc di chuyển máy chủ đến các API tiếp theo sau khi gọi và cơ chế thông báo các sự kiện của Node.js giúp máy chủ để có được một phản ứng từ các cuộc gọi API trước (Realtime).
Realtime: Nodejs xử lý các vấn đề realtime rất tốt Chạy rất nhanh: NodeJ được xây dựng dựa vào nền tảng V8 Javascript Engine nên việc thực thi chương trình rất nhanh. Đơn luồng nhưng khả năng mở rộng cao: Node.js sử dụng một mô hình luồng duy nhất với sự kiện lặp. cơ chế tổ chức sự kiện giúp các máy chủ để đáp ứng một cách không ngăn chặn và làm cho máy chủ cao khả năng mở rộng như trái ngược với các máy chủ truyền thống mà tạo đề hạn chế để xử lý yêu cầu.js sử dụng một chương trình đơn luồng và các chương trình tương tự có thể cung cấp dịch vụ cho một số lượng lớn hơn nhiều so với yêu cầu máy chủ truyền thống như Apache HTTP Server. Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu là đầu ra dữ liệu.
Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License. Tổng quan ExpessJS 3. Giới thiệu Express js là một Framework nhỏ, nhưng linh hoạt đượ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 5 do an Thiết lập các lớp trung gian để trả về các HTTP request, định nghĩa router cho phép sử dụng với hành động khác nhau dứa trên phương thực HTTP và URL Về các package hỗ trợ: Expressjs có vô số các package hỗ trợ Về performance: Express cung cấp thêm về các tính năng (feature) để dev lập trình tốt hơn.
Chứ không làm giảm tốc độ của NodeJS. Cấu trúc Hình 2 Cấu trúc Express[3] Các thành phần tương ứng: Root: o app.js chứa các thông tin về cấu hình, khai báo, các định nghĩa,. để ứng dụng của chúng ta chạy ok.json chứa các package cho ứng dụng chạy. Nếu bạn nào làm với PHP hoặc RoR rồi thì file này có chức năng tương tự như composer.json Folder routes: chứa các route có trong ứng dụng Folder view: chứa view/template cho ứng dụng Folder public chứa các file css, js, images,.cho ứng dụng 4.
Tổng quan MongoDB 4.1 Giới thiệu MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc nosql 6 do an Là một database hướng tài liệu (document), dữ liệu được lưu dưới dạng document kiểu JSON thay vì bảng như CSDL quan hệ nên truy vấn nhanh Với CSDL quan hệ chúng ta có khái niệm bảng, với MongoDB chúng ta sẽ dùng khái niệm collection thay vì bảng Các collection trong MongoDB được cấu trúc linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định MongoDB được phát triển bởi MongoDB Inc. và được cấp phép theo Server Side Public License (SSPL). Đặc điểm Kho lưu định hướng Document: Dữ liệu được lưu trong các tài liệu kiểu JSON. Lập chỉ mục trên bất kỳ thuộc tính nào.
Các truy vấn đa dạng. Cập nhật nhanh hơn. 7 do an CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 1. Trang https://www.jp/lesson/vietnamese/learn/list/.
Một vài hình ảnh của trang web [5] Hình 3 WEB khảo Sát 1 Header Hình 4 WEB khảo Sát 1 Body 8 do an Hình 5 WEB khảo Sát 1 Footer Bố cục trang web gồm có 3 phần chính: - Header: bao gồm tên trang web và thanh menu - Body: hiển thị danh sách các bài học, thanh bên phải hiển thị các option liên quan, hữu ích dành cho người dùng khi sử dụng web - Footer: Hiển thị các thông tin thêm về trang web như bài học, bảng chữ cái, liên hệ,. Các chức năng chính: - Khoá học theo các chủ đề - Học các bảng chữ cái - Forum thảo luận - Ôn tập, bài tập kiểm tra - Lọc, tìm kiếm theo chủ đề học Ưu điểm: - Các chức năng của trang web được thể hiện rõ ràng, phân theo cụm chức năng nên dễ dàng sử dụng, tìm kiếm 9 do an - Các bài học được hiển thị theo dạng danh sách card kèm hình ảnh, giúp bài học sinh động dễ hiểu - Trang web ít có quảng cáo, giúp trải nghiệm người dùng được tốt hơn - Có thể sử dụng trên điện thoại - Tốc độ load trang nhanh Nhược điểm: - Nội dung hiển thị nhiều - Không có chức năng đăng nhập/ đăng ký - Không lưu lại lịch sử kiểm tra khi người dùng làm các bài ôn tập/kiểm tra. Trang https://www.com/learn Một số hình ảnh [6] Hình 6 WEB khảo Sát 2 Header 10 do an Hình 7 WEB khảo Sát 2 Body Hình 8 WEB khảo Sát 2 Footer Bố cục trang web gồm có 3 phần chính: - Header: thanh menu. - Body: hiển thị danh sách các bài học, thanh bên phải hiển thị mục tiêu đã đạt được hàng ngày, đăng nhập/đăng ký nếu chưa có tài khoản.
- Footer: Hiển thị các thông tin thêm về trang web. Các chức năng chính: 11 do an - Khoá học theo các chủ đề dưới dạng trò chơi. - Học các bảng chữ cái. - Forum thảo luận.
- Ôn tập, bài tập kiểm tra. Ưu điểm: - Các chức năng của trang web được thể hiện rõ ràng, phân theo cụm chức năng nên dễ dàng sử dụng, tìm kiếm. - Các bài học được hiển thị theo dạng danh sách card kèm hình ảnh, giúp bài học sinh động dễ hiểu.