CHƯƠNG 1 TỔNG QUAN HỆ THỐNG 3 1.2 Ý nghĩa học thuật Việc thực hiện xây dựng hệ thống quản lý dành cho một trung tâm ngoại ngữ giúp chúng tôi biết thêm được nhiều kiến thức hữu ích về ngành giáo dục. Trong quá trình xây dựng hệ thống này, chúng tôi cũng đã có cơ hội vận dụng và củng cố các kiến thức mà mình đã học được trong các năm học qua, ví dụ như kiến thức về kiến trúc hệ thống, cơ sở dữ liệu, công nghệ phần mềm, kỹ thuật lập trình web,. Ngoài ra, trong quá trình này chúng tôi cũng đã được tìm hiểu và làm việc thêm với các công nghệ mới và phổ biến hiện nay như framework NextJS dành cho Front-end, NodeJs (cùng ExpressJS) cùng với framework Express dành cho Back-end,. Đây cũng là cơ hội không thể tốt hơn để chúng tôi nâng cao khả năng tìm hiểu và nghiên cứu, rèn luyện cho mình những kỹ năng mềm cần thiết, đặc biệt là kỹ năng làm việc nhóm, kỹ năng trình bày ý tưởng cũng như khả năng phản biện của bản thân, giúp chúng tôi có thể dễ dàng hòa nhập vào những môi trường mới và thuận tiện hơn trong quá trình phát triển sự nghiệp sau này.3 Nội dung thực hiện Trong thời gian làm đề tài luận văn tốt nghiệp Xây dựng hệ thống quản lý cho một trung tâm ngoại ngữ này, chúng tôi đã làm các công việc sau: • Tìm hiểu, đánh giá một vài hệ thống có chức năng tương tự với đề tài.
• Đề xuất các chức năng cần thiết của hệ thống, vẽ và mô tả các biểu đồ usecase của hệ thống. • Thiết kế giao diện cho các trang web của hệ thống. • Thiết kế cơ sở dữ liệu cho hệ thống. • Tiến hành tìm hiểu các công nghệ cần thiết để hiện thực hệ thống, từ đó lựa chọn và hiện thực hệ thống.
• Kiểm thử, triển khai và đánh giá hệ thống.4 Giới hạn đề tài Đề tài không đi sâu vào việc quản lý nhân sự, việc dạy và học trực tuyến. Chúng tôi chỉ dừng lại ở mức cơ bản các chức năng phục vụ cho vấn để quản lý các thông tin cần thiết của một trung tâm ngoại ngữ như thông tin những người dùng (học viên, phụ huynh, giáo viên, trợ giảng, nhân viên, admin), các chi nhánh và phòng học của trung tâm, chương trình học, các khóa học, buổi học. Ngoài ra, trong các khóa học chúng tôi cũng chỉ cung cấp việc tạo tài liệu (dạng tệp) và các bài tập (không hỗ trợ giới hạn thời gian thực hiện, ngân hàng câu hỏi) ở mức thông thường. Bên cạnh đó, trong quá trình hiện thực hệ thống chúng tôi nhận thấy có nhiều thiếu sót về những chức năng vì giới hạn về mặt thời gian và nhân lực, chúng tôi sẽ tiếp CHƯƠNG 1 TỔNG QUAN HỆ THỐNG 4 tục phát triển những chức năng này trong tương lai.
Cụ thể, chúng tôi chưa thể hiện thực các chức năng của người dùng là admin. 2 Kiến thức nền tảng Ở chương này, chúng tôi giới thiệu các kiến thức nền tảng và các kiến thức về các công nghệ mà chúng tôi sẽ sử dụng để hiện thực hệ thống. 12 CHƯƠNG 2 KIẾN THỨC NỀN TẢNG 6 2.1 React JS [1] Trong quá trình phát triển một hệ thống hỗ trợ quản lý hoạt động của trung tâm ngoại ngữ, việc xây dựng giao diện giúp người dùng tương tác và sử dụng hệ thống là một yêu cầu quan trọng. Nhóm phát triển chúng tôi quyết định xây dựng ứng dụng trên nền tảng web, do những ưu điểm, sự tiện lợi và hỗ trợ đa nền tảng của ứng dụng web so với ứng dụng desktop.
Chúng tôi không sử dụng các template engine cùng với JQuery, thay vào đó hướng tới ứng dụng web một trang (Single page application) kết hợp với Json web token, giúp dễ dàng mở rộng hệ thống và xây dựng ứng dụng di động trong tương lai. Với sự phát triển mạnh mẽ và được hỗ trợ bởi một cộng đồng lớn, chúng tôi chọn ReactJS thay vì các công nghệ lớn khác như AngularJS, VueJS,. để xây dựng giao diện hệ thống. ReactJS là một thư viện JavaScript có tính hiệu quả và linh hoạt để xây dựng các thành phần giao diện người dùng (UI) có thể sử dụng lại.
ReactJS giúp phân chia các UI phức tạp thành các thành phần nhỏ (được gọi là component). Nó được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook. ReactJS ban đầu được phát triển và duy trì bởi Facebook và sau đó được sử dụng trong các sản phẩm của mình như WhatsApp và Instagram. React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thà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.2 JSX JSX (viết tắt của cụm từ JavaScript XML) là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript.
Đặc điểm của JSX: • Nhanh hơn: JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javascript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript. • An toàn hơn: Ngược với Javascript, JSX được biên dịch trước khi chạy, giống như Java, C++. Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch.
Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. Việc sử dụng JSX mang lại nhiều lợi ích là: CHƯƠNG 2 KIẾN THỨC NỀN TẢNG 7 • Giúp cho việc xây dựng ứng dụng React có thể được xây dựng nhanh chóng hơn, dễ tối ưu hơn trong việc biên dịch mã sang Javascript. • JSC giúp xem lỗi trong quá trình triển khai dễ hơn và những lỗi này sẽ được hiển thị trong quá trình biên dịch. • Các cú pháp khá giống với HTML nên sẽ dễ dàng hơn nhiều cho việc viết chuyển đổi.1 Components React được xây dựng xung quanh các component, chứ không dùng template như các framework khác.
React xây dựng trang web sử dụng những thành phần (com- ponent) nhỏ có thể tái sử dụng ở nhiều nơi với các thuộc tính khác nhau. Trong một component lại có thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ trong React đều là component và chúng giúp bảo trì mã code khi làm việc với các dự án lớn.
Trong ReactJS có hai loại component: • Stateful component: là component có thành phần dữ liệu độc lập với compo- nent cha và có thể thay đổi. • Stateless component: là component không có thành phần dữ liệu độc lập, component hoàn toàn phụ thuộc vào component cha.2 Props và State Các thành phần dữ liệu của component gồm có hai loại: • Props: là một đối tượng chứa các thuộc tính của thẻ JSX. Props giúp truyền dữ liệu từ component này sang component khác, và props là bất biến. • State: thể hiện trạng thái của component.
Khác với props, state của compo- nent không thể truyền được ra ngoài, component sẽ quản lý state của chính nó. State là một đối tượng mà lưu trữ giá trị của các thuộc tính bên trong components và chỉ tồn tại trong phạm vi của component đó. Mỗi khi bạn thay đổi giá trị của một state thì component đó sẽ được render lại.3 React Life-cycle React Life-cycle là một vòng đời của component. Khi tiến hành render một compo- nent thì ReactJS thực hiện nhiều tiến trình khác nhau, các tiến trình này được lặp đi lặp lại đối với các component.
Giả sử khi một component được gọi, trước tiên component sẽ cài đặt props và state, sau đó tiến hành mounting, update, unmounting,. Việc tham gia vào quá trình này cần sử dụng đến các hàm hỗ trợ của life-cycle mà ReactJS cung cấp. CHƯƠNG 2 KIẾN THỨC NỀN TẢNG 8 Hình 2.2: Vòng đời của component.4 Virtual DOM Khái niệm DOM và Virtual DOM: • DOM (Document Object Model) là giao diện lập trình cho văn bản HTML và XML. Nó xác định cấu trúc logic của văn bản HTML và XML, cũng như cách chúng được truy cập và thao tác.
Khi một trang web được load, trình duyệt sẽ tạo DOM cho trang web đó dưới dạng các nút có mô hình cơ bản như sau: Hình 2.3: Mô hình DOM cơ bản. • Do việc tạo và cập nhật DOM khá tốn thời gian, nên đội ngũ phát triển của facebook đã tạo ra Virtual DOM nhằm tăng tốc độ cập nhật DOM trong ứng dụng ReactJS của mình. Virtual DOM được thiết kế nhỏ gọn và bản chất của nó là một đối tượng sao chép lại DOM do trình duyệt tạo ra. Virtual DOM hoạt động theo 3 bước: CHƯƠNG 2 KIẾN THỨC NỀN TẢNG 9 • Khi state hoặc prop thay đổi, toàn bộ UI sẽ render lại tại Virtual DOM.
• Kiểm tra sự khác biệt giữa DOM và Virtual DOM theo thuật toán kiểm tra khác biệt. • Cập nhật DOM với những thay đổi đã tìm được bằng thuật toán ở bước 2.4: Cơ chế cập nhật Virtual DOM. Khi chúng ta thực hiện render một JSX element, mỗi Virtual DOM object sẽ được cập nhật, khi virtual DOM được cập nhật, ReactJS sẽ so sánh virtual DOM với virtual DOM trước đó để kiểm tra trước khi thực hiện cập nhật và sau đó sẽ cập nhật trên một phần của DOM thật. Thay đổi của DOM thật sẽ được hiển thị ra màn hình.
Việc chỉ cập nhật một phần của DOM giúp tiết kiệm tài nguyên và tốc độ xử lý nhanh hơn.3 NextJS [2] Client-side rendering (CSR) có những nhược điểm nhất định: • Vấn đề hiệu năng và trang trống khi tải web lần đầu. Client-side rendering có nghĩa rằng trình duyệt sẽ tải một trang HTML trống và gồm các tập tin javascript. Người dùng cần đợi các tập tin javascript thực thi xong để có thể bắt đầu tương tác với ứng dụng, việc mà có thể tốn thời gian tùy thuộc vào thiết bị của người dùng. Ngoài ra, trang web HTML trống không thể hỗ trợ SEO, trong khi động lực phát triển hệ thống của chúng tôi bao gồm truyền bá hình ảnh trung tâm ngoại ngữ và thu hút các giáo viên giỏi.
Chính vì thế, chúng tôi chọn CHƯƠNG 2 KIẾN THỨC NỀN TẢNG 10 NextJS, một React framework giúp dễ dàng để xây dựng ứng dụng React tích hợp cơ chế Server-side rendering (SSR). Nextjs bao gồm nhiều tính năng như: • Pre-rendering, cả static generation (SSG) và server-side rendering (SSR). • Tách mã tự động để tải trang nhanh hơn, mỗi page chỉ load những gì cần thiết cho page đó. • Hỗ trợ routing, SEO, tối ưu hóa các tập tin tĩnh như hình ảnh và css.4 Redux [3] Vấn đề quản lý trạng thái trở nên khó khăn hơn khi giao diện hệ thống ngày càng phức tạp.