tìm hiểu về MEAN stack và xây dựng ứng dụng minh họa

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN MÔN HỌC ĐỒ ÁN Đề tài: tìm hiểu MEAN Stack xây dựng ứng dụng minh họa  Giảng viên hướng dẫn  Thái Thụy Hàn Uyển  Lớp  SE122.L11.PMCL  Sinh viên thực  Nguyễn Trí Trường – 17521187 Lương Việt Anh – 17520238 Tp Hồ Chí Minh, tháng 01 năm 2021 Trang NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN , ngày tháng ……… năm 2021 Người nhận xét (Ký tên ghi rõ họ tên) Trang LỜI CẢM ƠN Trong trình làm báo cáo, em nhận giúp đỡ, đóng góp ý kiến bảo nhiệt tình thầy cơ, gia đình bạn bè Em xin gửi lời cảm ơn chân thành đến cô Thái Thị Hàn Uyển - giảng viên khoa Công nghệ phần mềm - Trường ĐH CNTT- ĐHQG Tp HCM người tận tình hướng dẫn, góp ý bảo em suốt trình làm báo cáo Ngoài ra, em xin gửi lời cảm ơn đến thầy cô giáo trường ĐH CNTT- ĐHQG Tp HCM nói chung, thầy Khoa Cơng nghệ phần mềm nói riêng dạy dỗ cho em kiến thức lập trình, qua em có sở lý thuyết vững vàng từ hoàn thành tốt đồ án Cuối cùng, em xin chân thành cảm ơn gia đình bạn bè, ln tạo điều kiện, quan tâm, giúp đỡ, động viên em suốt q trình hồn thành đồ án Thành phố Hồ Chí Minh, ngày 16 tháng 01 năm 2021 Trang MỤC LỤC I TỔNG QUAN 1.1 Lí chọn đề tài Trong thời đại công nghệ, internet phát triển bùng nổ ngày mở hội lớn cho doanh nghiệp tiếp cận khách hàng Có thể giới thiệu sản phẩm dịch vụ cách sinh động mang tính tương tác cao với thị trường nước quốc tế, Giải đáp thắc mắc, yêu cầu khách hàng cách nhanh chóng, hiệu quả.Kinh doanh mà không bị giới hạn phạm vi địa lý Truyền tải nhiều thông tin, thời lượng.Dễ dàng theo dõi hiệu nhận phản hồi khách hàng Từ ta thấy tầm quan trọng ứng dụng web đời sống Tuy nhiên để làm ứng dụng hoàn chỉnh, viết code không không đủ Khi cần lưu trữ thông tin, ta phải đưa chúng vào sở liệu Sau hoàn thành phần code, ta phải tìm cách deploy nó, tức đưa code lên chỗ để chạy code Một chương trình hồn thiện khơng có code, mà cịn phải có tảng hệ điều hành phần mềm kèm (web server, sở liệu) Người ta gom thứ lại với nhau, tạo thành technical stack (còn gọi solution stack - tập hợp phần mềm/công nghệ phối hợp chung với nhau, tạo thành tảng để ứng dụng hoạt động Cùng với phát triển học tập online việc giáo dục, học tập, người dạy có hội lớn để trình bày cung cấp khóa học, giảng họ cho học viên; người dùng có nhu cầu tìm kiếm, giải đáp thắc mắc tìm phương án giải cách nhanh chóng; tiết kiệm thời gian, chi phí,… Từ việc học tập online, tìm kiếm vấn đề cần giải đáp mạng ngày phổ biến Trang Với yếu tố nhóm chúng em định ứng dụng MEAN Stack – technical stack thông dụng để tiến hành xây dựng ứng dụng website forum giải đáp thắc mắc hỗ trợ học tập II GIỚI THIỆU CHUNG 2.1 Đặt vấn đề Trang web hỗ trợ học tập ứng dụng web chuyên giải đáp thắc mắc cách nhanh chóng, cung cấp khóa học kiến thức bổ ích Cơ cấu trang web gồm: Admin, quản lí, người dùng Người dùng trang web gồm hai loại chính: Người dùng có tài khoản người dùng khơng có tài khoản Đối với người dùng có tài khoản có ưu điểm riêng Với nhu cầu cung cấp khóa học, giảng online tìm kiếm, giải đáp vấn đề toán,… vấn đề đáng quan tâm trang web Vì ban quản lý mong muốn website phục vụ cho việc hỏi, đáp vấn đề, cung cấp khóa học, hỗ trợ quản lí thông tin cần thiết người dùng 2.2 Mục đích website Xây dựng hệ thống hỗ trợ học tập trực tuyến với MEAN Stack đơn giản, thân thiện, dễ sử dụng, cho phép người dùng xem thông tin đặt câu hỏi, viết qua mạng, người quản trị quản lý thông tin viết người dùng Website thiết kế với • Giao diện hài hoà, thân thiện, giúp người dùng dễ dàng sử dụng Trang • Trang chủ hiển thị danh sách viết giúp cho người dùng dễ dàng việc tìm kiếm • Người dùng dễ dàng tìm thấy thông tin chi tiết viết mà họ quan tâm • Người dùng đăng trả lời câu hỏi, viết viết mà họ cần • Có chức đăng ký, đăng nhập Người dùng gửi ý kiến phản hồi, góp ý đến Website để góp phần làm Website thêm phong phú phát triển Xây dựng hệ thống cung cấp khóa học trực tuyến, forum cung cấp vấn đề cần giải đáp,… đơn giản, thân thiện, dễ sử dụng, cho phép người dùng xem thông tin đặt hàng qua mạng, người quản trị quản lý thông tin viết, khóa học người dùng 2.3 Đối tượng nghiên cứu Đối tượng nghiên cứu:  Cấu trúc, cách thức hoạt động MEAN Stack  Lập trình trang web với MEAN Stack  Các chức cần có website forum hỗ trợ học tập Khách thể nghiên cứu: Các website hỗ trợ học tập như: wiki, forum, kteam,… 2.4 Phạm vi nghiên cứu Khu vực: TP.HCM Thời gian: 7/9/2020 – 20/1/2020 Lĩnh vực nghiên cứu: Cấu trúc MEAN Stack, loại ứng dụng học tập wedsite hỗ trợ học tập Giới hạn nghiên cứu: MEAN Stack (MongoDB, Express, AngularJS, NodeJS.) Trang III CƠNG NGHỆ 3.1 MEAN Stack gì? 3.1.1 Khái niệm: MEAN (MongoDB, Express.js, AngularJS (hoặc Angular) Node.js) phần mềm mã nguồn mở JavaScript để xây dựng trang web động ứng dụng web Vì tất thành phần chương trình hỗ trợ MEAN stack viết JavaScript, ứng dụng MEAN viết ngôn ngữ cho môi trường thực thi phía máy chủ phía máy khách Mặc dù thường so sánh trực tiếp với stack phát triển web phổ biến khác LAMP stack, thành phần MEAN stack cấp cao bao gồm lớp trình bày ứng dụng web khơng bao gồm lớp hệ điều hành Trang 3.1.2 Vì nên sử dụng MEAN Stack? • Hồn tồn miễn phí (người dùng download cài đặt sử dụng ngay) • Các ứng dụng MEAN viết ngơn ngữ cho mơi trường thực thi phía máy chủ phía máy khách giúp giảm thiểu thời gian, tiền bạc 3.1.3 Ứng dụng thực tiễn • Xây dựng websocket server (Chat server) Trang • Hệ thống Notification (Giống facebook hayTwitter) • Ứng dụng upload file client • Các ứng dụng liệu thời gian thực (Realtime) như: chứng khoán, bitcoin, sàn giao dịch,… 3.2 MongoDB 3.2.1 Khái niệm: MongoDB sử dụng trình xử lý để xử lý yêu cầu liệu Quản lý định dạng liệu, thực hoạt động quản lý bên mongod Trong việc mở rộng theo chiều ngang sử dụng mơ hình mảnh lưu trữ, MongoDB cung cấp dịch vụ xử lý truy vấn từ tầng ứng dụng, xác định vị trí liệu cụm node phân mảnh gọi mongos 3.2.2 Tính MongoDB chương trình sở liệu mã nguồn mở thiết kế theo kiểu hướng đối tượng bảng cấu trúc cách linh hoạt cho phép liệu lưu bảng không cần phải tuân theo dạng cấu trúc định 3.3 ExpressJS 3.3.1 Khái niệm ExpressJS web application framework cho NodeJS, cung cấp tính mạnh mẽ cho việc xây dựng ứng dụng web nghĩa ngược lại Express sử dụng để xây dựng API mạnh mẽ thân thiện với người dùng, cung cấp nhiều tiện ích HTTP middleware cho việc kết nối 3.3.2 Tính • • • • • 3.4 ExpressJS Framework nhỏ, linh hoạt xây dựng tảng NodeJS Nó cung cấp tính mạnh mẽ để phát triển web mobile ExpressJS có vô số package hỗ trợ Mang lại hiệu tốt cho ứng dụng NodeJS Các Framework tiếng NodeJS sử dụng ExpressJS core function Angular 3.4.1 Khái niệm Trang Angular Javascript Framework mạnh thường sử dụng để xây dựng project Single Page Application (SPA) Nó hoạt động dựa thuộc tính mở rộng HTML (các atributes theo quy tắc Angular) Đây Framework mã nguồn mở hồn tồn miễn phí hàng ngàn lập trình viên giới ưa chuộng sử dụng 3.4.2 Tính • Angular Front-End Framework để xây dựng ứng dụng web desktop mobile • Được xây dựng dựa Javascript Chúng ta dùng để xây dựng ứng dụng web dùng HTML, CSS Javascript • Angular có nhiều cải tiến so với AngularJS để dễ dàng học phát triển ứng dụng quy mơ doanh nghiệp • Với Angular dễ dàng xây dựng ứng dụng dễ dàng mở rộng, bảo trì, kiểm nghiệm chuẩn hóa ứng dụng 3.5 NodeJS 3.5.1 Khái niệm NodeJS tảng xây dựng “V8 Javascript engine” viết c++ Javasccript Nền tảng phát triển Ryan Lienhart Dahl vào năm 2009 3.5.2 Tính • • • • • Node.js mã nguồn mở, môi trường cho máy chủ ứng dụng mạng Node.js sử dụng Google V8 JavaScript engine để thực thi mã, tỷ lệ lớn mô-đun viết JavaScript Các ứng dụng node.js viết bằn JavaScript Node.js chứa thư viện built-in cho phép ứng dụng hoạt động Webserver mà không cần phần mềm Nginx, Apache HTTP Server IIS Node.js cung cấp kiến trúc hướng kiện (event-driven) non-blocking I/O API, tối ưu hóa thơng lượng ứng dụng có khả mở rộng cao Mọi hàm Node.js không đồng (asynchronous) Do đó, tác vụ xử lý thực thi chế độ (background processing) Trang 10 4.5.19 Màn hình Thêm Mới Tag 4.5.20 Màn hình Cập Nhật Tag Trang 36 4.5.21 Màn hình Quản Lý Danh Hiệu 4.5.22 Màn hình Thêm Danh Hiệu Trang 37 4.5.23 Màn hình Cập Nhật Danh Hiệu 4.5.24 Màn hình Quản Lý Thành Viên Trang 38 4.5.25 Màn hình Thơng tin Thành viên Trang 39 4.5.26 Màn hình Phân Quyền 4.5.27 Màn hình Báo Cáo Vi Phạm Trang 40 4.5.28 Màn hình Đăng Nhập Trang 41 4.5.29 Màn hình Đăng Ký 4.5.30 Màn hình Quên Mật Khẩu Trang 42 4.6 Kết dự kiến đạt Trang 43 4.6.1 Phân tích sơ bộ, chọn xây dựng đề tài MEAN Stack dựa tính sau: Quản lý trang chủ • Bảng thơng tin Quản lý khách hàng • Quản lý khách hàng cá nhân • Quản lý tương tác • Quản lý phản hồi Quản lý hệ thống • Người dùng • Phân quyền Quản lý chăm sóc khách hàng (CS) • Quản lý vụ việc • Quản lý khảo sát khách hàng Quản lý tiện ích • Tùy chọn giao diện • Tìm kiếm tồn cục • Tìm kiếm cục • Quản lý hoạt động nội nhân viên (user feed) Trang 44 4.6.1.1 Xây dựng tài liệu sơ cho tính MEAN Stack • Nghiên cứu tính MEAN Stack muốn đưa đến cho người dùng, liệt kê nội dung tính MEAN Stack • Xây dựng tài liệu sở đồng thời phân tích, đánh giá tính giới thiệu hệ thống thực tiễn sử dụng tính 4.6.1.2 • Xây dựng hệ thống sở thử nghiệm, áp dụng tài liệu nghiên cứu từ tìm ưu điểm, tính ứng dụng vấn đề gặp phải sử dụng MEAN Stack 4.6.1.3 • Phân tích chuyên sâu xây dựng hệ thống thử nghiệm Báo cáo tính ứng dụng lợi ích việc sử dụng MEAN Stack Xây dựng đề tài báo cáo điều đạt được, áp dụng, triển khai gợi ý ý tưởng cải tiến đồng thời nêu khó gặp phải áp dụng MEAN Stack vào thực tế 4.6.2 Kế hoạch thực Khóa luận thực 14 – 15 tuần, với nội dung thời gian thực bảng đây: STT Nội dung thực Nghiên cứu Mean Stack: Thời gian Tìm kiếm thơng tin Từ 07/09/2020 – Chọn đề tài để xây dựng ứng dụng minh họa 13/09/2020 cho đồ án Tìm hiểu Mean Stack Từ 13/09/2020 – 19/09/2020 Tìm hiểu Angular Từ 13/09/2020 – 19/09/2020 Tìm hiểu NodeJS Từ 13/09/2020 – 19/09/2020 Tìm hiểu MongoDB Từ 13/09/2020 – 19/09/2020 Trang 45 Tìm hiểu ExpressJS Từ 13/09/2020 – 19/09/2020 Cài đặt môi trường Từ 13/09/2020 – 19/09/2020 Tạo sở liệu Từ 20/09/2020 – 23/09/2020 Chức thêm video Từ 24/09/2020 – 29/09/2020 10 Chức tạo list video Từ 30/09/2020 – 03/10/2020 11 Chức xóa video Từ 04/10/2020 – 09/10/2020 12 Chức xem video Từ 10/10/2020 – 14/10/2020 13 Chức phân loại video Từ 15/10/2020 – 19/10/2020 14 Tìm kiếm/Bộ lọc video dành cho tên video Từ 20/10/2020 – 24/10/2020 15 Tìm kiếm/Bộ lọc video dành cho loại video Từ 25/10/2020 – 28/10/2020 Chức đăng nhập tài khoản Từ 29/10/2020 – 31/10/2020 17 Chức đăng xuất tài khoản Từ 01/11/2020 – 04/11/2020 18 Thiết lập phân quyền (sơ cho tài khoản) Từ 05/11/2020 – 08/11/2020 19 Chức đăng kí tài khoản Từ 09/11/2020 – 11/11/2020 20 Xét duyệt người đăng kí từ tài khoản adminitrator Từ 12/11/2020 – 13/11/2020 Hiển thị thông tin người dùng Từ 14/11/2020 – 15/11/2020 Thiết lập phân quyền cho người dùng Từ 16/11/2020 – 18/11/2020 Chức 16 21 22 Chức video Chức tài khoản Hiển thị người dùng Trang 46 23 Tạo lịch sử sử dụng Từ 19/11/2020 – 21/11/2020 Hiển thị danh sách tài khoản chờ xét duyệt Từ 22/11/2020 – 24/11/2020 25 Chức ban/ unban tài khoản Từ 25/11/2020 – 27/11/2020 26 Tạo thống kê doanh thu Từ 28/11/2020 – 01/12/2020 27 Hiển thị lọc Từ 02/12/2020 – 03/12/2020 24 28 Hiển thị trang quản lý Tìm kiếm/ lọc Thao tác tìm kiếm/ lọc phim dựa loại Từ 04/12/2020 – phim 05/12/2020 29 Tìm kiếm/ lọc phim dựa tên phim Từ 6/12/2020 – 08/12/2020 30 Tìm kiếm/ lọc người dùng dựa thơng tin cá nhân Tìm kiếm/ lọc phim dựa thời gian đăng Từ 09/12/2020 – 11/12/2020 31 32 33 Từ 12/12/2020 – 13/12/2020 Tìm kiếm/ lọc phim dựa lượt người Từ 14/12/2020 – xem 15/12/2020 Thiết lập quản lý hệ thống Thiết lập quản lý số lượng biết, video Từ 15/12/2020 – chưa xét duyệt/đang tiến hành/đã hoàn 19/12/2020 thành 34 Thiết lập quản lý doanh thu, thống kê Từ 19/12/2020 – 23/12/2020 35 Thiết lập quản lý tài khoản (admin) Từ 23/12/2020 – 25/12/2020 36 Thiết lập quản lý hợp comment xóa từ Từ 25/12/2020 – người dùng/ admin 28/12/2020 37 38 Kiểm thử/ hoàn thiện Kiểm thử phần mềm đồng thời sau Từ 28/12/2020 – chuyển sang triển khai hệ thống ngồi thực 05/01/2020 tế Hồn thiện tài liệu phân tích thiết kế hệ Từ 05/01/2020 – thống 10/01/2020 Trang 47 39 Hoàn thiện sản phẩm dựa yếu tố Từ 10/12/2020 – thực tế triễn khai thực tiễn 15/01/2020 40 Tổng hợp kết đạt dự án Từ 15/01/2020 – báo cáo thành tựu đạt 20/01/2020 V TRÌNH BÀY, ĐÁNH GIÁ, BÀN LUẬN VÀ KẾT QUẢ 5.1 Môi trường thử nghiệm  Hệ điều hành: Microsoft Windows 10  Hệ quản trị sở liệu: MongoDB  Cơng cụ phân tích thiết kế: visio 2017  Công cụ xây dựng ứng dụng: Visual Studio Code  Angular  ExpressJS  NodeJS 5.2 Kết thử nghiệm Các chức quản lí thơng tin manager, admin hồn thiện Cung cấp đủ chức trang web học tập Làm quen với cách lập trình thơng qua MEAN Stack Cải thiện nâng cao khả làm việc nhóm Người dùng thao tác dễ dàng cho việc tìm kiếm thơng tin Trang 48 VI KẾT LUẬN 6.1 Kết đạt  Tìm hiểu nội dung bản, qui trình phát triển ứng dụng với MEAN Stack:  Nắm nội dung khái niệm cách thức hoạt động MEAN Stack  Nắm mặt khó khăn, hạn chế cách khắc phục việc xây dựng ứng dụng website học tập Tối ưu hố qui trình thực  Hoàn thành chức theo kế hoạch đề  Nâng cao kĩ lập trình, làm việc nhóm 6.2 Hạn chế hướng phát triển 6.2.1 Hạn chế Các khung làm việc chưa thực tối ưu Chưa đưa video vào trực tiếp thơng qua việc soạn thảo viết Vẫn cịn số lỗi tiềm ẩn 6.2.2 Hướng phát triển Tích hợp file, video vào post Tính khóa học trả phí Tạo nhóm học tập Tạo lớp học tập trực tuyến Tạo mơi trường quản lí tài ngun giảng dạy Trang 49 TÀI LIỆU THAM KHẢO  Academind (2018, 06 08) Được truy lục từ https://www.youtube.com/watch? v=1tRLveSyNz8  Acosta, D (2017, 01 23) Được truy lục từ https://www.youtube.com/watch?v=- gd73iczlS8&list=PL3vQyqzqjZ637sWpKvniMCxdqZhnMJC1d  angular angular.io Được truy lục từ https://angular.io/guide/  Devstackr (2019, 04 10) Được truy lục từ https://www.youtube.com/watch?v=V- CeWkz1MNQ&list=PLIjdNHWULhPSZFDzQU6AnbVQNNo1NTRpd  mongodb.com (n.d.) developer.mongodb.com Được truy lục từ https://developer.mongodb.com/learn  Pandey, B (2016, 05 19) Được truy lục từ https://www.youtube.com/watch? v=BZNzRIF7i4s&list=PL-ZirmjR00RTxLt5TC9CW8gcg4AnYU4ET  topdev topdev.vn Được truy lục từ https://topdev.vn/blog/mean-stack-la-gi/  Vý, Đ N https://smartjob.vn/ Được truy lục từ https://smartjob.vn/huong-dan- cai-dat-mongodb/ Trang 50 ... Nghiên cứu Mean Stack: Thời gian Tìm kiếm thơng tin Từ 07/09/2020 – Chọn đề tài để xây dựng ứng dụng minh họa 13/09/2020 cho đồ án Tìm hiểu Mean Stack Từ 13/09/2020 – 19/09/2020 Tìm hiểu Angular... tìm ưu điểm, tính ứng dụng vấn đề gặp phải sử dụng MEAN Stack 4.6.1.3 • Phân tích chun sâu xây dựng hệ thống thử nghiệm Báo cáo tính ứng dụng lợi ích việc sử dụng MEAN Stack Xây dựng đề tài báo... định ứng dụng MEAN Stack – technical stack thông dụng để tiến hành xây dựng ứng dụng website forum giải đáp thắc mắc hỗ trợ học tập II GIỚI THIỆU CHUNG 2.1 Đặt vấn đề Trang web hỗ trợ học tập ứng