PHẦN MỞ ĐẦU 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. 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.
ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 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.
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. 1 - 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. 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. 2 PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. GIỚI THIỆU MERN STACK 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.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.
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. Đặ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 3 1. 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ã 4 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.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. GIỚI THIỆU NODEJS[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.js sử dụng các 5 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.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. Đặ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.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: 6 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 3000. Cấu trúc của một file server.js như sau : const http = require('http'); const hostname = '127.1'; const port = 3000; const server = http.log(`Server running at http://${hostname}:${port}/`);}); Để 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.1:3000 , mở console chúng ta sẽ thấy được nội dung trả về :”Server running at http://127. 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.