Tìm hiểu công nghệ mernstack và xây dựng ứng dụng website quản lý và báo cáo đồ án

ĐH SƯ PHẠM KỸ THUẬT TP.HCM KHOA CNTT ******* CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh Phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Ngành: Công nghệ Thông ti

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

THÀNH PHỐ HỒ CHÍ MINH

SKL 0 0 7 1 6 7

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

TÌM HIỂU CÔNG NGHỆ MERNSTACK VÀ XÂY DỰNG ỨNG DỤNG WEBSITE QUẢN LÝ VÀ BÁO CÁO ĐỒ ÁN

GVHD:T

MAI VĨNH THÀNH hS NGUYỄN MINH ĐẠO

SVTH:

MSSV:16110460 SVTH:HUỲNH THỊ TUYẾT NHI MSSV:16110409

-🙞🙞🙞🙞🙞 -TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

TÌM HIỂU CÔNG NGHỆ MERNSTACK VÀ XÂY DỰNG ỨNG DỤNG WEBSITE QUẢN LÝ VÀ BÁO CÁO ĐỒ ÁN

GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN MINH ĐẠO MAI VĨNH THÀNH - 16110460 HUỲNH THỊ TUYẾT NHI - 16110409

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN ThS NGUYỄN MINH ĐẠO

KHÓA 2016 – 2020

MAI VĨNH THÀNH - 16110460

ĐH SƯ PHẠM KỸ THUẬT

TP.HCM KHOA CNTT

*******

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA

VIỆT NAM Độc lập – Tự do – Hạnh Phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Ngành: Công nghệ Thông tin

Tên đề tài: TÌM HIỂU CÔNG NGHỆ MERNSTACK VÀ XÂY DỰNG ỨNG DỤNG WEBSITE QUẢN LÝ VÀ BÁO CÁO ĐỒ ÁN

Họ và tên giáo viên hướng dẫn: ThS NGUYỄN MINH ĐẠO

NHẬN XÉT

1 Về nội dung đề tài khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày tháng năm 20

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

ĐH SƯ PHẠM KỸ THUẬT

TP.HCM KHOA CNTT

*******

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA

VIỆT NAM Độc lập – Tự do – Hạnh Phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Ngành: Công nghệ Thông tin

Tên đề tài: TÌM HIỂU CÔNG NGHỆ MERNSTACK VÀ XÂY DỰNG ỨNG DỤNG WEBSITE QUẢN LÝ VÀ BÁO CÁO ĐỒ ÁN

Họ và tên giáo viên phản biện: ThS MAI TUẤN KHÔI

NHẬN XÉT

1 Về nội dung đề tài khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm:

Tp Hồ Chí Minh, ngày tháng năm 20

Giáo viên phản biện

(Ký & ghi rõ họ tên)

LỜI CẢM ƠN

Để hoàn thành Khóa luận tốt nghiệp chuyên ngành Công Nghệ Phần Mềm nói chung và quá trình tìm hiểu công nghệ để xây dựng được website quản lý và báo cáo đồ

án, nhóm chúng em xin gửi lời cảm ơn chân thành đến:

Ban giám hiệu trường Đại Học Sư Phạm Kỹ Thuật TP.HCM đã tạo điều kiện về

cơ sở vật chất tốt, đáp ứng được nhu cầu của sinh viên, giảng viên với phòng học sạch đẹp, máy chiếu, wifi để phục vụ cho việc học tập và tìm kiếm thông tin của sinh viên, giảng dạy của giảng viên

Quý Thầy Cô Khoa Công Nghệ Thông Tin Trường Đại Học Sư Phạm Kỹ Thuật Tp.HCM đã tạo điều kiện thuận lợi cho nhóm chúng em thực hiện đề tài khóa luận tốt nghiệp này

Giảng viên hướng dẫn Thầy Nguyễn Minh Đạo, người đã giảng dạy, hướng dẫn và chỉ bảo tận tình, chi tiết, giải đáp thắc mắc kịp thời để chúng em có thể hoàn thành đề tài khóa luận tốt nghiêp này một cách tốt nhất

Xin chân thành cảm ơn các anh, chị khóa trên và bạn bè đã ủng hộ, giúp đỡ và động viên chúng em trong thời gian học tập và nghiên cứu khóa luận tốt nghiệp Do chưa

có nhiều kinh nghiệm nên không thể tránh khỏi những thiếu sót và hạn chế, rất mong nhận được ý kiến đóng góp từ phía thầy, cô để đề tài được hoàn thiện hơn nữa

TP Hồ Chí Minh, ngày … tháng 08 năm 2020

Nhóm sinh viên thực hiện

MAI VĨNH THÀNH

HUỲNH THỊ TUYẾT NHI

ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

⎯ ⎯ ⎯ ⎯ ⎯ ⎯ ⎯ ⎯ ⎯

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP

Thời gian làm khoá luận: từ: 30/03/2020 đến: 05/08/2020

Chuyên ngành: Công Nghệ Phần Mềm

Tên khóa luận: Tìm hiểu công nghệ MernStack và xây dựng ứng dụng website quản lý vào báo cáo đồ án

GV hướng dẫn: ThS Nguyễn Minh Đạo

Nhiệm vụ của khóa luận:

- Tìm hiểu công nghệ MernStack

- Xây dựng website quản lý vào báo cáo đồ án

Đề cương viết luận văn:

1 Phần 1: MỞ ĐẦU

1 Tính cấp thiết của đề tài

2 Mục đích của đề tài

3 Đối tượng và phạm vị nghiên cứu

4 Phương pháp nghiên cứu

2 Phần 2: NỘI DUNG

CHƯƠNG 1: CỞ SỞ LÝ THUYẾT

1.1 Giới thiệu tổng quan về MernStack:

1.2 Giới thiệu ReactJs:

1.3 Giới thiệu NodeJs:

1.4 Giới thiệu Express:

1.5 Giới thiệu MongoDb:

1.6 Kết Luận:

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

2.1 Khảo sát hiện trạng:

2.2 Xác định yêu cầu:

2.2.1 Yêu cầu chức năng:

2.2.2 Yêu cầu phi chức năng:

CHƯƠNG 3: THIẾT KẾ WEBSITE

3.1 Lược đồ Use Case:

3.2 Mô tả Use Case:

CHƯƠNG 4: THIẾT KẾ WEBSITE

4.1 Đặc tả Website:

4.2 Thiết kế cơ sở dữ liệu:

4.3 Thiết kế giao diện:

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ

STT Thời gian (Tuần mấy) Công việc đã làm

1 Tuần 1(Bắt đầu 30/03/2020) Khảo sát hiện trạng , xác định yêu cầu

2 Tuần 2 (06/04/2020) Vẽ use case , đặc tả usecase

3 Tuần 3(13/04/2020) Hoàn thiện đặc tả usecase , thiết kế cơ sở dữ liệu

4 Tuần 4(20/04/2020) Thiết kế giao diện người dùng

13 Tuần 13 (22/06/2020) Hoàn thiện chức năng giáo viên

14 Tuần 14(29/06/2020) Hoàn thiện chức năng thống kê , kiểm lỗi

15 Tuần 15(06/07/2020) Viết báo cáo

16 Tuần 16(13/07/2020) Viết báo cáo

17 Tuần 17(20/07/2020)

Ngày 20 tháng 07 năm 2020

Người viết đề cương

Mai Vĩnh Thành Huỳnh Thị Tuyết Nhi

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

………

………

………

………

………

………

………

………

………

………

………

………

………

……… (Ký và ghi rõ họ tên)

Mục lục

1.12 THIẾT KẾ CƠ SỞ DỮ LIỆU 44

1.13.17 Giao diện màn hình chỉnh sửa mô tả, để lại bình luận về công việc, lọc

1.13.19 Giao diện cho phép thêm tiến độ công việc vào dự án, cho phép kéo thả

1.14.5 Cấu trúc thư mục Reactjs 71

■ Ảnh 3 : Thiết kế giao diện

■ Ảnh 4: Giao diện đăng nhập của người dùng

■ Ảnh 5: Giao diện đăng ký

■ Ảnh 6: Giao diện quên mật khẩu

■ Ảnh 7: Trang chủ client

■ Ảnh 8: Giao diện thông tin người dùng

■ Ảnh 9: Giao diện thông tin người dùng

■ Ảnh 10: Giao diện hiển thị danh sách dự án

■ Ảnh 11: Giao diện tạo dự án mới

■ Ảnh 12: Giao diện tìm kiếm dự án

■ Ảnh 13: Giao diện thông tin chi tiết dự án

■ Ảnh 14: Giao diện tạo tiến trình

■ Ảnh 15: Giao diện tại mới công việc

■ Ảnh 16 : Màn hình chỉnh sửa tiến trình công việc

■ Ảnh 17 : Giao diện màn hình chỉnh sửa công việc

■ Ảnh 18 : Giao diện thông tin công việc

■ Ảnh 19 : Giao diện mô tả phân chia công việc

■ Ảnh 20: Giao diện chỉnh sửa mô tả, bình luận, lọc công việc và phân chia công việc

■ Ảnh 21 : Giao diện chỉnh sửa dự án

■ Ảnh 22 : Giao diện thêm công việc và kéo thả

■ Ảnh 23: Giao diện thêm thành viên vào dự án

■ Ảnh 24: Giao diện hiển thị thống kê tiến độ hoàn thành dự án

■ Ảnh 25 : Giao diện chỉnh sửa màn hình báo cáo

DANH MỤC BẢNG BIỂU

Bảng 4.1 Danh sách đối tượng trong giao diện đăng nhập của người dùng 44

Bảng 4.13 Danh sách các đối tượng trong màn hình chỉnh sửa tiến trình 56 Bảng 4.14 Danh sách các đối tượng trong màn hình chỉnh sửa công việc 57 Bảng 4.15 Danh sách các đối tượng trong màn hình thông tin công việc 58 Bảng 4.16 Danh sách đối tượng trong giao diện mô tả thông tin phân chia công việc 59 Bảng 4.17 Danh sách đối tượng trong giao diện sửa mô tả, để lại bình luận, lọc công việc

Bảng 4.19 Danh sách đối tượng trong giao diện thêm tiến độ công việc 63 Bảng 4.20 Danh sách đối tượng trong giao diện thêm thành viên vào dự án 63 Bảng 4.21 Danh sách đối tượng trong giao diện thống kê tiến độ hoàn thành công việc 64 Bảng 4.22 Danh sách đối tượng trong giao diện chỉnh sửa màn hình báo cáo 65

PHẦN MỞ ĐẦU 1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Hiện nay, nhu cầu phát triển và quản lý các dự án phần mềm ngày càng tăng cao, đặt biệt là trong môi trường đại học khi mà các sinh viên đang ngày càng nhiều đồ án cuối kỳ của các môn học nhưng lại không thể quản lý được thời gian cũng như công việc để hoàn thành đồ án đúng thời gian quy định và quy trình Nhu cầu cấp thiết hơn nữa đó là báo cáo

đồ án và viết báo cáo cũng là một trong những khó khăn lớn đối với sinh viên Các sinh viên không biết được cấu trúc một bài báo cáo gồm những phần nào, cũng như viết không đúng với yêu cầu giáo viên đưa ra

Với những vấn đề được nêu trên, nhóm chúng em quyết định thiết kế ra phần mềm

có thể giải quyết được các mục tiêu trên một cách khoa học nhất Giúp giảm tải được một khối lượng công việc lớn cho sinh viên, giúp tạo một lượng lớn thời gian để trau chuốt cho

đồ án của mình tốt hơn

1.2 MỤC TIÊU CỦA ĐỀ TÀI

- Tìm hiểu về công nghệ MernStack

- Ứng dụng công nghệ xây dựng dựng website quản lý và báo cáo đồ án

- Viết báo cáo khoa học

1.3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU

1.3.1 Đối tượng nghiên cứu

- Công nghệ MernStack

- Các công nghệ và thư viện phía front-end như: lodash, moment, material UI

- Lĩnh vực phát triển website: website quản lý và báo cáo đồ án

1.3.2 Phạm vi nghiên cứu

- Tìm hiểu các công nghệ được sử dụng trong đề tài: MernStack

- Tìm hiểu nghiệp vụ quản lý dự án, SCRUM

- Tìm hiểu các nghiệp vụ liên quan đến phát triển 1 website hoàn chỉnh, có tính khả thi cao

1.4 PHƯƠNG PHÁP NGHIÊN CỨU

Để thực hiện mục tiêu và nhiệm vụ nghiên cứu, nhóm đã sử dụng các phương pháp nghiên cứu sau:

- Phương pháp nghiên cứu tài liệu: đọc ebook, các tài liệu tham khảo, và các bài viết liên quan đến MernStack

- Phương pháp chuyên gia: nhờ sự góp ý, giúp đỡ, tư vấn từ giáo viên hướng dẫn và các thầy cô trong khoa Công nghệ thông tin trường Đại học Sư phạm kỹ thuật TP.HCM

PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 GIỚI THIỆU MERN STACK

1.1.1 Khái niệm [1]

MERN stack là nguyên bộ combo open source các công nghệ đều liên quan đến Javascript là cũng hot nhất hiện nay: MongoDB, ExpressJS, React/React Native, NodeJS Người ta dùng MERN stack để xây dựng React Universal App

Trong đó:

- MongoDB: là một noSQL database hot nhất hiện nay MongoDB thường

đi với Mongoose – một library để giao tiếp với MongoDB dễ dàng hơn

- Node.js: là một Javascript runtime

- Express: là web framework được xây dựng bằng Javascript chạy trên nền Node.js Nó hỗ trợ thêm nhiều tính năng cần có của một web framework như: routing, middlewares, template engines, vv

- React/React Native: là thư viện frontend được viết bằng Javascript, nó là hàng của Facebook đang rất hot hiện nay

1.1.2 Đặc điểm nổi bật của Mern Stack

- Hot Reloading cho các React Components

- Các đoạn mã được phân chia bởi React Router

- Hỗ trợ đa ngôn ngữ

- Hỗ trợ generate code

- Cấu trúc kiểu mô-đun

- Ava Test Runner

- Hỗ trợ Docker

- Có thể tùy biến phiên bản MERN cho riêng bạn

1.2 GIỚI THIỆU REACT [2]

Khái niệm:

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

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên

phía client, mà còn được render trên server và có thể kết nối với nhau React

so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM

Virtual DOM

Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốc mới có

trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ

xử lý React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề

này.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

React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều Dữ liệu được

truyền từ parent đến child thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện

Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi Khi đó React sẽ rất hữu ích để sử dụng

Giới thiệu về JSX

JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript Đặc điểm:

Faster: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biên dịch sang mã

Javacsript 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 Safer: an toàn hơn Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó đượ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 Easier: Dễ dàng hơn JSX kế thừa dựa trên Javascript, vì vậy rất

dễ dàng để cho các lập trình viên Javascripts có thể sử dụng (tham khảo tại https://jsx.github.io/)

Giới thiệu về Components

React được xây dựng xung quanh các component, chứ không dùng template như các

framework khác Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ 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á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ứ React đều là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo

Props và State

- Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến

- State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI

1.3 GIỚI THIỆU NODEJS [3]

1.3.1 Khái niệm về NodeJs

Node.js là một nền tảng dựa vào javascript được xây dụng trên Chrome Javascript runtime để xây dựng các ứng dụng nhanh, có độ lớn Node.js sử dụng các

phần phát sinh các sự kiện (event-driven), mô hình non-blocking I/O để tạo ra các ứng dụng nhẹ và hiệu quả cho các ứng dụng về dữ liệu thời gian thực chạy trên các thiết bị phân tán

NodeJs là một mã nguồn mở, đa nền tảng cho phát triển các ứng dụng phía Server và các ứng dụng liên quan đến mạng Ứng dụng Node.js được viết bằng Javascript và có thể chạy trong môi trường Node.js trên hệ điều hành Window, Linux

Node.js cung cấp các module Javascript đa dạng từ đó đơn giản hóa sự phát triển của các ứng dụng web sử dụng Node.js với các phần mở rộng

1.3.2 Đặc điểm NodeJs

- Không đồng bộ và hướng sự kiện : Tất cả các API của thư viện Node.js đều không đồng bộ Về cơ bản, điều đó có nghĩa là máy chủ dựa trên Node.js không bao giờ chờ API trả về dữ liệu Máy chủ chuyển sang API tiếp theo sau khi gọi nó

và trong Node.js có sẵn một cơ chế thông báo để giúp máy chủ nhận được phản hồi

từ lệnh gọi API trước đó

- Tốc độ rất nhanh : Được xây dựng trên Công cụ JavaScript V8 của Google Chrome, thư viện Node.js rất nhanh trong việc thực thi mã

- Single Threaded nhưng có khả năng mở rộng cao : Node.js sử dụng một mô hình luồng đơn với vòng lặp sự kiện Cơ chế sự kiện giúp máy chủ phản hồi theo cách không chặn và làm cho máy chủ có khả năng mở rộng cao so với các máy chủ truyền thống tạo ra các luồng hạn chế để xử lý các yêu cầu Node.js sử dụng một chương trình luồng đơn và cùng một chương trình có thể cung cấp dịch vụ cho số lượng yêu cầu lớn hơn nhiều so với các máy chủ truyền thống như Máy chủ HTTP Apache

- Ít tốn bộ nhớ đệm : Các ứng dụng Node.js tiêu tốn bộ nhớ đệm rất ít Các ứng dụng này chỉ đơn giản là xuất dữ liệu trong khối

Khởi tạo web-server với NodeJs:

Node.js cung cấp một modules http có thể được sử dụng để tạo HTTP client-server Sau đây là cấu trúc tối thiểu của máy chủ HTTP lắng nghe tại cổng

Để có một web server ta cần :

● Import modules http có sẵn trong NodeJs

● Qui định hostname và port để truy cập web server

● Tạo một web server http thông qua phương thức createServer của http

● Cho server lắng nghe ở hostname và port đã được qui định

Kết quả :

Khi ta truy cập vào địa chỉ 127.0.0.1:3000 , mở console chúng ta sẽ thấy được nội dung trả về :”Server running at http://127.0.0.1:3000

1.3.3 Khái niệm về RESTFUL Api [4]

RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web

(thiết kế Web services) để tiện cho việc quản lý các resource Nó chú trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu động…), bao gồm các trạng thái tài nguyên được định dạng và được truyền tải qua HTTP

Ảnh 1: Cấu trúc hoạt động của RESTful web service

REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động cơ bản nêu trên

sẽ sử dụng những phương thức HTTP riêng

GET (SELECT): Trả về một Resource hoặc một danh sách Resource

POST (CREATE): Tạo mới một Resource

PUT (UPDATE): Cập nhật thông tin cho Resource

DELETE (DELETE): Xoá một Resource

Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với

Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa

Hiện tại đa số lập trình viên viết RESTful API giờ đây đều chọn JSON là format

chính thức nhưng cũng có nhiều người chọn XML làm format, nói chung dùng thế nào cũng được miễn tiện và nhanh

1.4 GIỚI THIỆU EXPRESSJS [5]

ExpressJs là gì :

Express là một framework nhỏ và tiện ích để xây dựng các ứng dụng web, cung cấp một lượng lớn của tính năng mạnh mẽ để phát triển các ứng dụng web và mobile Nó rất dễ dàng để phát triển các ứng dụng nhanh dựa trên Node.js cho các ứng dụng Web

Dưới đây là các tính năng cơ bản của Express framework:

● Cho phép thiết lập các lớp trung gian để trả về các HTTP request

● Định nghĩa bảng routing có thể được 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ố truyền vào đến template

Khởi tao Web Server NodeJs bằng Express Framework:

Cài đặt Express Framework thông qua bộ thư viện npm :

$ npm install express –save

Khởi tạo Web Server :

var express = require('express');

var app = express();

app.get('/', function (req, res) {

res.send('Hello World');

})

var server = app.listen(3000, function () {

var host = server.address().address;

var port = server.address().port;

console.log("Server running at: http://%s:%s", host, port);

1.5 GIỚI THIỆU VỀ MONGODB [6]

Giới thiệu về MongoDB:

● MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql được hàng triệu người sử dụng

● MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh

● Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server ) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là collection thay vì bảng

● Các collection trong MongoDB được cấu trúc rất 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

● Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS Kết nối MongoDB trong ứng dụng NodeJs :

Để kết nối với MongoDB chúng ta cần import package mongodb có trong bộ thư viện npm

> npm install mongodb

Sau khi import package chúng ta sẽ kết nói với mongodb thông qua câu lệnh kết nối

var MongoClient = require('mongodb').MongoClient;

// Kết nối database

MongoClient.connect("mongodb://localhost:27017/exampleDb",

function(err, db) {

ưu việt và sự hỗ trợ mạnh mẽ của mình MernStack có thể rút ngắn thời gian phát triển và tối ưu ứng dụng

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 1.7 KHẢO SÁT CÁC WEBSITE LIÊN QUAN:

1.7.1 Trang web jira

- Chưa có chức năng viết báo cáo mà cần qua phần mềm khác hỗ trợ là confluence

1.7.2 Trang web trello

1.8.1 Yêu cầu chức năng

▪ Đăng ký tài khoản

▪ Đăng nhập bằng tài khoản được tạo trên website

▪ Đổi mật khẩu

▪ Lưu trữ :

- Tài khoản người dùng

- Thông tin người dùng

- Thông tin đồ án

- Thông tin công việc

- Thông tin tiến trình

- Thông tin báo cáo

▪ Truy xuất :

- Danh sách đồ án

- Danh sách thành viên trong đồ án

- Danh sách công việc trong đồ án

- Danh sách tiến trình trong đồ án

- Cho phép chỉnh sửa thông tin cá nhân và tài khoản đăng nhập

- Xem công việc của mình

- Quản lý lịch sử hoạt động

▪ Nghiệp vụ :

▪ Lập trình viên:

- Xem danh sách công việc

- Xem thông tin cá nhân

- Chỉnh sửa thông tin cá nhân

- Di chuyển công việc trong backlog

- Di chuyển công việc trong tiến trình

- Bắt đầu tiến trình

- Xóa tiến trình ra khỏi tiến trình công việc

- Chỉnh sửa tiến trình

- Xem chi tiết, ghi chú lại công việc

- Phân chia công việc lại cho thành viên khác

▪ Quản lý :

- Xem thông tin cá nhân

- Chỉnh sửa thông tin cá nhân

- Xem danh sách công việc của thành viên khác trong dự

án

- Phân chia công việc cho từng thành viên

- Thêm thành viên vào dự án

- Chỉnh sửa chi tiết công việc

- Thêm thành viên trong hệ thống vào dự án

- Phân chia quyền của thành viên trong dự án

▪ Giáo viên:

- Xem bảng báo cáo

1.8.2 Yêu cầu phi chức năng

▪ Có khả năng lưu trữ lớn, có thể lưu được thông tin, hình

ảnh,…

▪ Đáp ứng lượt truy cập lớn

▪ Khả năng tìm kiếm , truy xuất dữ liệu lớn và nhanh

▪ Giao diện đẹp mắt , dễ sử dụng và phù hợp với mọi người dùng

▪ Thao tác nghiệp vụ dễ sử dụng trơn tru , chính xác

CHƯƠNG 2: MÔ HÌNH HÓA YÊU CẦU 1.9 LƯỢC ĐỒ DIAGRAM

Ảnh 2: Lược đồ diagram

1.10 MÔ TẢ YÊU CẦU

1.10.1 Đăng ký

Bảng 3.1 Mô tả Use Case Đăng ký

Use Case đăng ký

Tóm tắt mô tả Cho phép người dùng đăng ký tài khoản

Tiền điều kiện Chưa có tài khoản

Hậu điều kiện Tạo 1 tài khoản trên hệ thống

Luồng

1 Vào trang sign up của hệ thống

1.1 Hiện trang sign up

2 Nhập thông tin gmail, mật khẩu

2.1 Kiểm tra các input có

trống

3.2 Chuyển hướng về trang

chủ

Điều kiện ngoại lệ

2.1 Kiểm tra các input có trống 2.1.1 Nếu email trống hiện thông

báo chưa có email 2.1.2 Nếu mật khẩu và mật khẩu xác thực khác nhau hiện thông báo mật khẩu không trùng khớp

nếu đã tồn tại thông báo email đã tồn tại

1.10.2 Đăng nhập

Bảng 3.2 Mô tả Use Case đăng nhập

Use Case đăng nhập

Tóm tắt mô tả Cho phép người dùng đăng nhập tài khoản

Tiền điều kiện Đã có tài khoản

Luồng

1 Vào trang login của hệ thống

1.1 Hiện trang login

2 Nhập thông tin gmail, mật khẩu

2.1 Kiểm tra các input có

trống

3 Nhấn nút đăng nhập 3.1 Kiểm tra tài khoản

3.2 Chuyển hướng về trang

chủ

Điều kiện ngoại lệ

2.1 Kiểm tra các input có trống 2.1.1 Nếu email trống hiện thông

báo chưa có email

3.1 Kiểm tra tài khoản 3.1.1 Kiểm tra email và mật khẩu

trên hệ thống có trùng khớp, nếu không thông báo đăng nhập lỗi

1.10.3 Quên mật khẩu

Bảng 3.3 Mô tả Use Case quên mật khẩu

Use Case quên mật khẩu

Tóm tắt mô tả Cho phép người dùng đổi lại mật khẩu khi quên

Tiền điều kiện Đã có tài khoản

Hậu điều kiện Vào được trang đổi mật khẩu mới

Luồng

1 Vào trang forgot pass của

hệ thống

1.1 Hiện trang forgot pass

2 Nhập thông tin gmail 2.1 Kiểm tra các input có

trống

3 Nhấn nút gửi email 3.1 Kiểm tra tài khoản

3.2 Gửi về email đường dẫn

đến trang đổi mật khẩu

Điều kiện ngoại lệ

2.1 Kiểm tra các input có trống 2.1.1 Nếu email trống hiện thông

báo chưa có email 3.1 Kiểm tra tài khoản 3.1.1 Kiểm tra email có trên hệ

thống, nếu chưa thông báo email chưa có trên hệ thống

1.10.4 Đổi mật khẩu

Bảng 3.4 Mô tả Use Case đổi mật khẩu

Use Case đổi mật khẩu

Tóm tắt mô tả Cho phép người dùng đổi lại mật khẩu khi quên

Tiền điều kiện Đã có tài khoản, vào được trang đổi mật khẩu

Luồng

1 Vào trang change pass của

hệ thống

1.1 Hiện trang change pass

trống