Ứng dụng công nghệ node JS và react JS để tối ưu hệ thống quản lý điểm tại trường cao đẳng giao thông vận tải II

BỘ GIÁO DỤC VÀ ĐÀO TẠO ĐẠI HỌC ĐÀ NẴNG LÊ THANH TÙNG ỨNG DỤNG CÔNG NGHỆ NODE.JS VÀ REACT.JS ĐỂ TỐI ƯU HỆ THỐNG QUẢN LÝ ĐIỂM TẠI TRƯỜNG CAO ĐẲNG GIAO THÔNG VẬN TẢI II LUẬN VĂN THẠC SĨ HỆ THỐNG THÔNG TIN Đà Nẵng - Năm 2017 BỘ GIÁO DỤC VÀ ĐÀO TẠO ĐẠI HỌC ĐÀ NẴNG LÊ THANH TÙNG ỨNG DỤNG CÔNG NGHỆ NODE.JS VÀ REACT.JS ĐỂ TỐI ƯU HỆ THỐNG QUẢN LÝ ĐIỂM TẠI TRƯỜNG CAO ĐẲNG GIAO THÔNG VẬN TẢI II Chuyên ngành: HỆ THỐNG THÔNG TIN Mã số: 60.48.01.04 LUẬN VĂN THẠC SĨ HỆ THỐNG THÔNG TIN Người hướng dẫn khoa học: PGS.TSKH Trần Quốc Chiến Đà Nẵng - Năm 2017 i LỜI CAM ĐOAN Tơi xin cam đoan cơng trình nghiên cứu riêng Các số liệu kết nghiên cứu nêu luận văn trung thực chưa công bố cơng trình khác Tác giả luận văn Lê Thanh Tùng ii LỜI CẢM ƠN Hoàn thành luận văn tốt nghiệp này, tơi xin bày tỏ lịng biết ơn sâu sắc đến thầy PGS.TSKH Trần Quốc Chiến tận tình hướng dẫn giúp đỡ tơi suốt q trình thực Qua đây, xin gửi lời cảm ơn chân thành đến quý Thầy, Cô giáo khoa Tin học, phòng Đào tạo Trường Đại học Sư phạm phòng Đào tạo Sau đại học, Đại học Đà Nẵng; bạn học viên Cao học Hệ thống thông tin khóa 29 gia đình, bạn bè động viên, góp ý, giúp đỡ, tạo điều kiện cho tơi q trình học tập thực luận văn Tơi xin ghi nhớ cơng ơn, tình cảm cao đẹp mà quý Thầy cô, bạn bè dành cho suốt thời gian qua Một lần nữa, xin chân thành cảm ơn! iii MỤC LỤC DANH MỤC CÁC BẢNG vi DANH MỤC CÁC TỪ VIẾT TẮT vii DANH MỤC CÁC HÌNH viii MỞ ĐẦU 1 Lý chọn đề tài Mục đích luận văn Đối tượng nghiên cứu Phạm vi nghiên cứu Phương pháp nghiên cứu Ý nghĩa khoa học, thực tiễn đề tài Bố cục luận văn CHƯƠNG NGHIÊN CỨU TỔNG QUAN 1.1 TỔNG QUAN VỀ NODE.JS 1.1.1 Khái niệm 1.1.2 Lịch sử phát triển 1.1.3 Ưu điểm Node.js 1.1.4 Kỹ thuật Node.js 1.1.5 Các đặc tính Node.js 1.1.6 Các thành phần Node.js 1.1.7 Cài đặt Node.js 1.2 TỔNG QUAN VỀ REACT.JS 12 1.2.1 Khái niệm 12 1.2.2 Lịch sử phát triển 12 1.2.3 Ưu, nhược điểm React.js 13 1.2.4 Tính 16 iv 1.2.5 Cấu trúc, thành phần React.js 16 1.3 TỔNG QUAN VỀ KIẾN TRÚC FLUX 18 1.3.1 Khái niệm 18 1.3.2 Cấu trúc Flux 19 1.3.3 Dòng liệu 21 1.3.4 Sự khác biệt Flux so với MVC 22 1.3.5 Implement Flux 22 1.4 TỔNG QUAN VỀ MONGODB 22 1.4.1 Tìm hiểu sở liệu NoSQL 23 1.4.2 Hệ quản trị sở liệu MongoDB 25 KẾT LUẬN CHƯƠNG 28 CHƯƠNG PHÂN TÍCH, THIẾT KẾ HỆ THỐNG 29 2.1 HIỆN TRẠNG CÔNG TÁC QUẢN LÝ ĐIỂM TẠI TRƯỜNG CAO ĐẲNG GIAO THÔNG VẬN TẢI II 29 2.1.1 Giới thiệu trường Cao đẳng Giao thông vận tải II 29 2.1.2 Công tác quản lý điểm 30 2.2 MÔ TẢ YÊU CẦU 30 2.2.1 Yêu cầu người sử dụng 30 2.2.2 Yêu cầu hệ thống 31 2.3 TỔNG QUAN CHỨC NĂNG CỦA HỆ THỐNG 31 2.3.1 Quản trị hệ thống 31 2.3.2 Sinh viên 32 2.3.3 Phòng Đào tạo 32 2.4 THIẾT KẾ HỆ THỐNG 32 2.4.1 Công cụ hỗ trợ 32 2.4.2 Thiết kế hệ thống 33 KẾT LUẬN CHƯƠNG 45 v CHƯƠNG GIẢI PHÁP TỐI ƯU HỆ THỐNG 46 3.1 PHÂN TÍCH NGUYÊN NHÂN LÀM CHẬM HỆ THỐNG 46 3.1.1 Truy vấn database: sử dụng SQL server 2008 46 3.1.2 Quá trình xử lý luồng liệu: Kiểu truyền thống (blocking) 50 3.2 GIẢI PHÁP TỐI ƯU HỆ THỐNG 51 3.2.1 Sử dụng MongoDB để tối ưu hoá truy vấn Database 51 3.2.2 Sử dụng công nghệ Node.js 52 KẾT LUẬN CHƯƠNG 54 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 55 TÀI LIỆU THAM KHẢO 56 KẾT LUẬN GIAO ĐỀ TÀI LUẬN VĂN (bản sao) vi DANH MỤC CÁC BẢNG Số hiệu bảng Tên bảng Trang 1.1 Một số đặc trưng MongoDB 27 2.1 Bảng ánh xạ thành phần SQL MongoDB 40 vii DANH MỤC CÁC CHỮ VIẾT TẮT Các chữ viết tắt Nghĩa chữ viết tắt API Application Programming Interface CRUD Create - Read - Update – Delete CSDL Cơ sở liệu DOM Document Object Model ĐA Đồ án HK Học kỳ HSSV Học sinh - sinh viên I/O Input/Output JSON Javascript Object Notation KLTN Khóa luận tốt nghiệp MVC Model - View - Controller NoSQL Not only Structured Query Languagee SQL Structured Query Languagee RDBMS Relational database management system NPM Node Package Manager OOP Object-Oriented Programming PHP Personal Home Page SPAs Single-Page Applications TBC Trung bình chung TBC TL Trung bình chung tích luỹ TKM Tổng kết môn XML eXtensible Markup Language UI User Interface ES6 ECMAScript viii DANH MỤC CÁC HÌNH Số hiệu Tên hình hình vẽ Trang 1.1 Phiên cài đặt hệ điều hành khuyên dùng 1.2 Cài đặt Node.js 10 1.3 Hồn tất cài đặt 12 1.4 Cơng nghệ Virtual DOM 17 1.5 Luồng liệu chiều 18 1.6 Sơ đồ chung quan hệ thành phần Flux 20 2.1 Sơ đồ quản lý điểm sinh viên 33 2.2 Thực thể SECTORS 36 2.3 Thực thể CLSS 37 2.4 Thực thể STUDENTS 37 2.5 Thực thể SUBJECTS 38 2.6 Thực thể MARKS 39 2.7 Mơ hình thực thể kết hợp 39 2.8 Mơ hình sở liệu quan hệ 40 2.9 Giao diện đăng nhập 41 2.10 Quản lý sinh viên 42 2.11 Quản lý môn học 42 2.12 Quản lý ngành đào tạo 43 2.13 Quản lý điểm lớp học phần 43 2.14 Quản lý lớp sinh hoạt 44 2.15 Quản lý lớp học phần 44 3.1 Mơ hình mẫu 46 43 Trong quản lý môn học chứa tất mơn học chương trình đào tạo, số tín kí hiệu mơn học Hình 2.12: Quản lý ngành đào tạo Có tất ngành đào tạo: + Công nghệ kỹ thuật Giao thông; + Công nghệ kỹ thuật cơng trình Xây dựng; + Kế tốn; + Cơng nghệ kỹ thuật Cơ khí Hình 2.13: Quản lý điểm lớp học phần Trong quản lý điểm thể điểm sinh viên theo lớp học phần 44 Hình 2.14: Quản lý lớp sinh hoạt Quản lý lớp sinh hoạt xếp theo ngành đào tạo Trong lớp sinh hoạt thể danh sách sinh viên chun ngành Hình 2.15: Quản lý lớp học phần Quản lý lớp học phần xếp theo học kỳ, lớp học phần thể số sinh viên đăng ký, số tín chỉ, cách tính điểm học phần (theo tỉ lệ điểm chuyên cần, điểm trung bình kiểm tra, điểm thi) 45 KẾT LUẬN CHƯƠNG Chương tập trung trình bày tổng quan chức hệ thống, đưa sơ đồ tổng thể hệ thống, mơ hình hoạt động; Trên sở phân tích, sử dụng cơng cụ hỗ trợ môi trường phát triển để tiến hành xây dựng thiết kế chương trình Bên cạnh cịn giới thiệu trường Cao đẳng Giao thông vận tải II trạng công tác quản lý điểm trường Luận văn tiến hành khảo sát phân tích nội dung liên quan đến cơng tác quản lý điểm trường Cao đẳng Giao thông vận tải II, qua cho thấy hạn chế cần phát triển hệ thống cũ 46 CHƯƠNG GIẢI PHÁP TỐI ƯU HỆ THỐNG Trong chương này, tiếp tục phân tích vấn đề mà điều dẫn đến hệ thống chưa đáp ứng yêu cầu sử dụng tường Cao đẳng Giao thông vận tải II, từ đề xuất giải pháp cải thiện đến hiệu hệ thống 3.1 PHÂN TÍCH NGUYÊN NHÂN LÀM CHẬM HỆ THỐNG 3.1.1 Truy vấn database: sử dụng SQL server 2008 Thực phiên kiểm tra laptop Lenovo T61, hệ điều hành Windows 64 bit với vi xử lý 2.8 GHz, sử dụng phiên 64 bit SQL Server 2008 Standard MongoDB 1.4.1, ta nhận thấy hệ quản trị sở liệu SQL server 2008 bộc lộ điểm yếu so sánh với MongoDB [6] - So sánh chức Insert: Đây điểm khác biệt rõ ràng SQL server MongoDB Quá trình thực cách chèn 50.000 đối tượng độc lập sử dụng NoRM MongoDB LINQ tới SQL SQL server 2008 với mơ hình mẫu hình 3.1 Hình 3.1: Mơ hình mẫu 47 Hình 3.2: So sánh chức Insert SQL MongoDB Dễ dàng nhận thấy, với 100 đối tượng 1.000 đối tượng thời gian insert hai CSDL tương đương nhau, với 5.000 đối tượng có chênh lệch hai CSDL Tuy nhiên, chèn 25.000 50.000 đối tượng thấy rõ với MongoBD thời gian insert nhiều lần so với SQL server Ngồi nhìn vào lược đồ so sánh, ta thấy thời gian xử lý MongoDB xử lý 5000 hay 50.000 đối tượng gần tương đương nhau, sai khác khoảng vài giây Trong đó, SQL lại bộc lộ khả xử lý chậm số lượng đối tượng tăng lên, cụ thể thời gian xử lý tăng lên gấp 16 lần so sánh việc insert 5.000 50.000 đối tượng Như vậy, hai CSDL MongoDB có tốc độ xử lý nhanh ổn định nhiều so với SQL - So sánh tốc độ truy vấn: + Khi có khóa 48 Hình 3.3: So sánh tốc độ truy vấn từ đối tượng khác trường ID ghi Nhìn vào hình 3.3, rõ ràng MongoDB tỏ vượt trội hẳn so với SQL hiệu suất Cụ thể, trường hợp xử lý với số lượng đối tượng nhỏ (khoảng 50 đối tượng), thời gian xử lý SQL MongoDB sai lệch vào khoảng 0,02 giây, tốc độ truy vấn chênh lệch nhỏ (khoảng 125 đối tượng /1s) Tuy nhiên, số lượng đối tượng tăng lên, SQL cần thời gian xử lý nhiều so với MongoDB Đặc biệt, số lượng đối tượng cần xử lý lớn vào khoảng từ 25.000 đến 50.000 đối tượng thời gian xử lý SQL gấp ba lần so với MongoDB Như xử lý 50.000 đối tượng, SQL 28 giây để xử lý MongoDB cần 10,4 giây Tốc độ truy vấn có khóa MongoDB trường hợp 4.808 đối tượng/1s, SQL 49 1.786 đối tượng/1s Như vậy, tốc độ truy vấn MongoDB nhanh gấp ba lần so với SQL + Khi có khóa ngoại, mơ hình mẫu lúc có dạng hình 3.4 Hình 3.4: Mơ hình mẫu Hình 3.5: So sánh tốc độ truy vấn sử dụng khóa ngoại 50 Khi sử dụng khóa ngoại, tốc độ truy vấn SQL MongoDB có khác biệt thể tính vượt trội mặt hiệu suất MongoDB so với SQL Tiến hành so sánh tương tự trường hợp có khóa chính, ta thấy thời gian xử lý số lượng đối tượng SQL lớn nhiều so với MongoDB Hay tốc độ truy vấn MongoDB nhanh so với SQL (khoảng 2,5 lần) Như vậy, việc sử dụng SQL server 2008 khơng cịn phù hợp với phát triển cơng nghệ thơng tin, bộc lộ yếu so với cơng nghệ Việc tìm kiếm công nghệ thay SQL server 2008 trở thành yêu cầu việc đại hóa quản lý thông tin Từ so sánh đạt được, ta thấy sử dụng MongoDB giải pháp hữu hiệu để giải vấn đề 3.1.2 Quá trình xử lý luồng liệu: Kiểu truyền thống (blocking) Nếu yêu cầu thao tác I/O blocking điều có nghĩa luồng điều khiển không trả cho ứng dụng thao tác I/O hoàn tất, khơng làm việc khác ngồi việc chờ đợi thao tác I/O thực xong Điều ngược lại yêu cầu thao tác I/O non-Blocking luồng điều khiển trả lại cho ứng dụng không cần chờ đợi thao tác I/O thực xong Chúng ta làm việc khác ví dụ nhận yêu cầu khác đồng CSDL CSDL tùy theo toán thực tế 51 Hình 3.6: Blocking Non-Blocking 3.2 GIẢI PHÁP TỐI ƯU HỆ THỐNG 3.2.1 Sử dụng MongoDB để tối ưu hoá truy vấn Database MongoDB sở liệu mã nguồn mở thuộc họ nhà NoSQL Với NoSQL mở rộng liệu mà khơng lo tới việc tạo khóa ngoại, khóa chính, kiểm tra ràng buộc, Vì NoSQL khơng hạn chế việc mở rộng liệu nên tồn nhiều nhược điểm như: phụ thuộc ghi, tính qn, tồn vẹn liệu,… Nhưng chấp nhận nhược điểm để khiến ứng dụng cải thiện hiệu suất cao giải tốn lớn hệ thống thơng tin, phân tán hay lưu trữ liệu MongoDB hoạt động hệ điều hành phổ biến như: Windows, Linux hỗ trợ đầy đủ driver cho ngơn ngữ lập trình để giao tiếp với chúng cách dễ dàng Hiểu cách nôm na MongoDB mã nguồn mở tập tài liệu dùng chế NoSQL để truy vấn, viết ngơn ngữ C++ Chính viết C++ nên có khả tính tốn với tốc độ cao không giống hệ quản trị 52 CSDL Như vậy, MongoDB có hiệu suất cao, tương tác nhanh khả mở rộng tốt Bên cạnh đó, phân tích có từ việc so sánh hiệu suất hệ quản trị sở liệu SQL Server 2008 mongoDB cho thấy hiệu suất mongoDB vượt trội so với SQL Server 2008 Chính vậy, MongoDB lựa chọn phù hợp để cải thiện hiệu hệ thống 3.2.2 Sử dụng công nghệ Node.js - Sử dụng Node.js thay cho PHP PHP không nặng nề có dự án tùy chọn làm cho nhanh Ngay nhà phát triển PHP đòi hỏi khắt khe lo lắng tốc độ, hiệu suất Node.js nói chung tốt Tất nhiên, hiệu suất phần lớn kết kinh nghiệm chăm sóc thực đội ngũ phát triển, Node.js có nhiều ưu điểm - Ít dependencies Tất request tới ứng dụng PHP phải định tuyến thông qua máy chủ web trình thơng dịch PHP bắt đầu chạy đoạn code Node.js khơng cần q nhiều dependencies, gần chắn sử dụng server framework Express, nhẹ phần ứng dụng - Trình thơng dịch nhỏ nhanh Node.js nhỏ nhanh so với trình thơng dịch PHP Nó bị cản trở di sản ngôn ngữ hỗ trợ Google đầu tư lớn để nâng cao hiệu suất engine V8 - Các ứng dụng Permanently On PHP tuân theo mơ hình client-server điển hình Mọi page request khởi tạo ứng dụng nạp thơng số cấu hình, kết nối với sở liệu, lấy 53 thông tin xuất dạng HTML Một ứng dụng Node.js chạy vĩnh viễn cần khởi tạo lần Khởi tao ứng dụng tiến hành kết nối đến database lắng nghe yêu cầu từ cổng 3008 Các API tạo để lắng nghe yêu cầu gửi tới - Một Event-driven, Non-Blocking I/O PHP ngơn ngữ phía máy chủ khác sử dụng mơ hình thực thi blocking rõ ràng Khi phát lệnh lấy thông tin từ sở liệu, lệnh thực hoàn thành trước, tiến hành câu lệnh Cịn Node.js khơng chờ đợi Thay vào đó, cung cấp callback function thực thi hành động hồn thành, ví dụ: Trong ví dụ này, cửa sổ console xuất dịng chữ 'finished' trước 'N records returned' function process gọi tất liệu 54 lấy Nói cách khác, trình thơng dịch tự làm việc khác tiến trình khác bận rộn - Áp dụng vào chương trình Đoạn lệnh dùng để lấy danh sách sinh viên, danh sách lớp học phần danh sách điểm Giả sử hàm xử lý hết giây Với dòng lệnh gọi hàm sử dụng Non-blocking để xử lý dịng lệnh đồng thời xử lý lúc, thời gian xử lý giây Cịn khơng sử dụng Non-blocking dịng lệnh gọi hàm xử lý Dòng (line 1) xử lý xong dòng (line 2) bắt đầu chạy dịng xử lý xong dòng (line 3) bắt đầu thực thi Như giây để xử lý xong hết tiến trình Như vậy, Node.js lựa chọn thích hợp sử dụng phía server để tối ưu việc xử lý luồng liệu KẾT LUẬN CHƯƠNG Như vậy, dựa ưu điểm Node.js mô tả chương đánh giá phân tích hệ thống chương 2, chương luận văn phần làm rõ hệ thống sử dụng trường Cao đẳng Giao thông vận tải II có vấn đề hạn chế, đặc biệt hạn chế hiệu năng, từ tìm lựa chọn giải pháp cai thiện hiệu hệ thống thích hợp 55 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Trong luận văn này, nghiên cứu Node.js React.js để thấy khả ưu điểm cơng nghệ Đây ngơn ngữ lập trình mới, khơng đồng với ngơn ngữ cũ hệ thống, để áp dụng vào hệ thống cũ làm tối ưu hệ thống cũ phức tạp tốn nhiều thời gian Chính giải pháp để tối ưu hệ thống quản lý điểm trường Cao đẳng Giao thông vận tải II, xây dựng hệ thống sử dụng Node.js React.js chuyển sở liệu từ SQL server sang sở liệu mongoDB Các công việc thực luận văn tóm tắt sau: Đã trình bày tổng quan Node.js, React.js, Flux MongoDB Đã trình bày trạng cơng tác quản lý điểm trường Cao đẳng Giao thông vận tải II; Tổng quan chức hệ thống, đưa sơ đồ tổng thể hệ thống, mơ hình hoạt động; Trên sở phân tích, chúng tơi sử dụng công cụ hỗ trợ môi trường phát triển để tiến hành xây dựng thiết kế chương trình Trên sở phân tích nguyên nhân làm chậm hệ thống sử dụng trường Cao đẳng Giao thơng vận tải II, luận văn tìm lựa chọn giải pháp cải thiện hiệu hệ thống thích hợp Trên kết mà luận văn đạt thời gian nghiên cứu, thực Nếu có điều kiện, đề tài mở rộng nghiên cứu xây dựng sở khoa học vấn đề cải thiện hiệu xử lý liệu hệ thống cũ 56 TÀI LIỆU THAM KHẢO Tiếng Việt [1] PGS.TSKH Trần Quốc Chiến (2002), Giáo trình Cơ sở liệu, Đại học Đà Nẵng Tiếng Anh [2] Kristina Chodorow, Michael Dirolf (2010), MongoDB: The Definitive Guide, O’reilly [3] Mike Cantelon, Marc Harter, T.J Holowaychuk, Nathan Rajlich (2014), Node.js in Action [4] Steve Francia (2012), MongoDB and PHP, United States of America Website [5] Bui Minh Hieu (2015), Hướng dẫn Flux qua ví dụ, https://viblo.asia/ hieubm/posts/57rVRq14R4bP [6] T.Anh (2015), So sánh hiệu suất hoạt động MongoDB SQL Server 2008,http://quantrimang.com/so-sanh-hieu-suat-hoat-dong-cuamongodb-va-sql-server-2008-84584 [7] Tran Thanh (2005), Tìm hiểu Node Js bản, https://viblo.asia/thanhsm/posts/ojaqG0dGEKwZ [8] Nguyễn Nhân (2015), React.js gì?, https://www.businesscard.vn/blog/react-js-la-gi/ [9] Tran Duc Thang (2015), Flux - Under the hood, https://viblo.asia/thangtd90/posts/NznmMd34Rr69 [10] Sơ lược React.js, http://blog.ows.vn/so-luoc-ve-reactjs/ [11] Nguyen Thanh Tung (2015), Xây dựng ứng dụng đơn giản với Flux, https://viblo.asia/tungshooter/posts/jdWrvwjzGw38 57 [12] http://nodejs.vn/ [13] http://vietjack.com/nodejs/nodejs_la_gi.jsp [14] http://freetuts.net/tong-quan-ve-mongodb-203.html [15] http://kipalog.com/posts/Gioi-thieu-MongoDB [16] http://expressmagazine.net/development/2330/dinh-nghia-mongodbnosql-la-gi [17] http://devpro.edu.vn/tim-hieu-ve-blocking-va-non-blocking/ [18] http://blog.ows.vn/so-luoc-ve-reactjs/ [19] https://nodejs.org/ [20] http://nodejs.org/documentation/ [21] https://facebook.github.io/react/index.html [22] http://blog.mimacom.com/introduction-to-react-and-flux/ [23] http://facebook.github.io/flux/docs/overview.html [24] http://www.mongodb.org [25] http:// log.andrewray.me/reactjs-for-stupid-people/ [26] https://bigsonata.wordpress.com/2014/06/05/mongodb/ ... GIÁO DỤC VÀ ĐÀO TẠO ĐẠI HỌC ĐÀ NẴNG LÊ THANH TÙNG ỨNG DỤNG CÔNG NGHỆ NODE. JS VÀ REACT .JS ĐỂ TỐI ƯU HỆ THỐNG QUẢN LÝ ĐIỂM TẠI TRƯỜNG CAO ĐẲNG GIAO THÔNG VẬN TẢI II Chuyên ngành: HỆ THỐNG THÔNG TIN... trình 2.1 HIỆN TRẠNG CÔNG TÁC QUẢN LÝ ĐIỂM TẠI TRƯỜNG CAO ĐẲNG GIAO THÔNG VẬN TẢI II 2.1.1 Giới thiệu trường Cao đẳng Giao thông vận tải II Trường Cao đẳng Giao thông vận tải II nằm cách trung tâm... điểm trường Cao đẳng Giao thơng vận tải II? ?? Mục đích luận văn - Ứng dụng cơng nghệ nhằm mục đích tối ưu hệ thống quản lý điểm; - Đề xuất giải pháp góp phần tối ưu hiệu hệ thống quản lý điểm, giải