Tìm hiểu về react express framework

Trường Đại học Công nghệ Thông tin Khoa Công nghệ phần mềm Đồ án Tìm hiểu React-Express Framework Students: Phùng Thanh Tú 19522455 Nguyễn Tiến Đạt 19521344 Lecturer: Nguyễn Công Hoan ——— Contents Lời cảm ơn Lời mở đầu Giới thiệu tổng quan 1.1 Nhóm 1.2 Tổng quan đề tài 1.2.1 Giới thiệu đề tài 1.2.2 Phạm vi nghiên cứu 1.2.3 Nội dung nghiên cứu 1.2.4 Kết hướng tới 1.3 Công cụ sử dụng 3 3 5 7 7 9 10 10 10 11 12 12 12 12 12 12 13 13 13 React 2.1 Giới thiệu 2.1.0.1 2.1.0.2 2.1.0.3 2.1.0.4 2.1.0.5 2.1.0.6 2.1.0.7 2.2 Life Cycle 2.2.0.1 2.2.0.2 2.2.0.3 React gì? React đời nào? Tính React Ưu điểm React Nhược điểm React Các thư viện viện thay React Các Website lớn có sử dụng React React Component Prop State? Các trạng thái Life Cycle Initialization ExpressJS 3.1 Giới thiệu 3.1.1 ExpressJS ? 3.1.2 Lịch sử ExpressJS 3.1.3 Tính 3.1.4 Ưu điểm ExpressJS 3.1.5 Nhược điểm ExpressJS 3.1.6 Các thư viện có chức tương tự 3.1.7 Công ty sử dụng ExpressJS Kiến trúc ứng dụng ExpressJS Các thư viện liên quan 3.3.1 Mongoose 3.3.2 Bcrypt 3.3.3 JWT Ứng dụng ExpressJS vào xây dựng hệ thống 14 14 16 16 16 16 16 ỨNG DỤNG MINH HỌA 4.1 Giới thiệu ứng dụng minh họa 4.1.1 Bài toán thực tế 4.1.1.1 Hướng giải 4.1.2 Tổng quan ứng dụng phát triển 4.1.3 Source code 4.2 Mục tiêu 4.3 Phân tích yêu cầu 4.3.1 Use Case Diagram 4.3.2 Phân thích Use Case 4.4 Thiết kế hệ thống 4.4.0.1 Backend Package Diagram 4.4.0.2 Frontend Package Diagram 17 17 17 17 17 18 18 18 18 19 19 19 19 3.2 3.3 3.4 Lời cảm ơn Chúng em xin chân thành cảm ơn thầy Nguyễn Công Hoan giảng dạy, hỗ trợ nhóm em hồn thành đồ án Bên cạnh đó, q trình thực đồ án, chúng em khó tránh khỏi thiếu sót Kính mong q thầy/cơ chân thành bỏ qua Bên cạnh đó, chúng em trân trọng đóng góp ý kiến q báu q thầy/cơ để có thêm nhiều kinh nghiệm cho đồ án sau cho cơng việc Em xin chân thành cảm ơn Nhóm nghiên cứu, Lời mở đầu Trong năm gần lập trình web xu hướng phổ biến lĩnh vực cơng nghệ thơng tin nói chung cơng nghệ phần mềm nói riêng Với ứng dụng hay phần mềm bình thường chạy tảng định (Window app, Android app, iOS app), ứng dụng web lại chạy hầu hết tất thiết bị điện tử gia dụng miễn thiết bị hỗ trợ trình duyệt web (web browser) Điều đem đến tiện lợi phổ biến ứng dụng web Kéo theo cơng cụ hỗ trợ lập trình web phát triển cập nhật thường xuyên Bên cạnh phổ biến ngơn ngữ lập trình JavaScript Kết hợp chúng lại, nhiều web framework dựng nên phát triển Ở đồ án tìm hiểu framework frontend backend phổ biến ReactJS (Frontend) vằ ExpressJS (Backend) qua phát triển ứng dụng web đơn giản dựa theo chúng Giới thiệu tổng quan 1.1 Nhóm Nhóm nghiên cứu chúng em gồm thành viên : • Phùng Thanh Tú - 19522455 • Nguyễn Tiến Đạt - 19521344 1.2 1.2.1 Tổng quan đề tài Giới thiệu đề tài Nhu cầu xây dựng trang web ngày tăng cao có xu hướng phát triển hết Với đời loạt cơng nghệ quy trình phát triển phần mềm, kéo theo chuyên biệt phân hóa thành phần ứng dụng web Ngày ứng dụng web gồm có phần : • Phần máy khách - Client: Hay gọi Frontend Đây thành phần hiển thị thực thi thiết bị người dùng cuối Thành phần chịu trách nhiệm xử lí giao diện tương tác với người dùng • Phần máy chủ - Server : Hay gọi Backend Đây thành phần xử lí bên phía máy chủ Thành phần chịu trách nhiệm xử lí logic phía máy chủ, gửi, nhận tương tác liệu với tất người dùng Đây thành phần tối quan trọng khơng có frontend khơng thể hoạt động Một ngơn ngữ lập trình phổ biến JavaScript Theo thống kê từ Statista, năm 2021, JavaScript giữ vị trí số số lượng người dùng toàn giới Figure 1: Bảng xếp hạn ngơn ngữ lập trình dựa số lượng người dùng Trong đề tài tìm hiểu thư viện frontend backend sử dụng ngơn ngữ lập trình JavaScript nhiều lập trình viên ưa chuộng • Ở phía frontend, tìm hiểu ReactJS, thư viện frontend phổ biến mà gần tìm hiểu frontend biết • Tương tự trên, thư viện vô phổ biến khác sử dụng cho việc lập trình Backend, ExpressJS 1.2.2 Phạm vi nghiên cứu Đề tài bao gồm trình tìm hiểu thư viện ExpressJS ReactJS việc phát triển ứng dụng web Bên cạnh số kiến thức liên quan hay sử dụng với thư viện JWT, Bcrypt, Bootstrap, CSDL NoSQL MongoDB Ngồi nhóm nghiên cứu ứng dụng kiến thức vào việc xây dựng ứng dụng thực tế sử dùng thư viện trên, cụ thể trang web viết, bình luận react blog 1.2.3 Nội dung nghiên cứu Nhóm tiền hành nghiên cứu tìm hiểu ReactJS, ExpressJS thư viện liên quan JWT, Bcrypt 1.2.4 Kết hướng tới Quá trình làm nghiên cứu nhóm hướng tới kết sau : • Đối với nhóm nghiên cứu : Biết thêm kiến thức ReactJS ExpressJS ứng dụng kiến thức vào việc xây dựng triển khai ứng dụng thực tế Đồng thời sau đề tài nhóm vận dụng kiến thức để tham gia vào dự án liên quan có sử dụng thư viện trện • Đối với Thầy/Cô Giảng viên đánh giá : Thầy cô qua đề tài đánh giá trình học tập nghiên cứu sinh viên, đánh giá điểm mạnh cần phát huy, điểm yêu cần khắc phục Từ góp phần thuận lợi cho trình làm việc sau • Đối với lập trình viên sử dụng tài liệu : Có cách nhìn tổng quan React Express, qua đánh giá kiểu kiến trúc, phương pháp lập trình, khái niệm bản, qua biết nên không nên chọn thư viện cho dự án mình, chọn vận dụng 1.3 Công cụ sử dụng Trong trình nghiên cứu, nhóm sử dụng cơng cụ sau : • Visual Studio Code : Là trình soạn thảo dùng để soạn thảo code, đồng thời tích hợp extension giúp cải thiện hiệu code • Node.js : Runtime dùng để thực thi JavaScript Ngồi tích hợp npm - node package manager hỗ trợ cài đặt gói thư viện cách nhanh thuận tiện • MongoDB Compass : cung cấp giao diện thân thiện cho việc truy vấn sở liệu MongoDB • Postman : Dùng để kiểm thử API lấy từ server • Heroku : Dùng để deploy ứng dụng, giúp ứng dụng chạy mà khơng cần source code • MongoDB Atlas : Dùng để deploy sở liệu mongodb React 2.1 Giới thiệu 2.1.0.1 React gì? React thư viện Javascript mã nguồn mở chuyên dùng cho việc thiết kế giao diện người dùng(UI) xử lý vấn đề tương tác người dùng với phần giao diện ấy(UX) React xây dựng để đơn giản hóa khắc phụ khó khăn mà lập trình viên gặp phải sử dụng Javascript, html css để xây dựng UI Với khả chia nhỏ component React phần giảm thiểu rủi ro bug trình phát triển 2.1.0.2 React đời nào? React viết Jordan Walke-một lập trình viên Facebook vào năm 2011 với tên ban đầu FaxJS Năm 2013, Facebook nhận giới hạn html5 tảng mobile định thay đổi, dẫn đến việc React công bố khởi động thư viện mã nguồn mở Tuy có nhiều ý kiến trái chiều mắt nhờ vào cởi mở thích nghi mạnh mẽ đội ngũ dev, React phát triển mạnh mẽ liên tục lên, chí nhắm đến đối tượng thương mại lớn Netflix Tuy chững lạitrong năm gần đây, React thư viện xây dựng UI tốt mà lập trình viên nên nắm rõ kiến thức 2.1.0.3 Tính React • JSX: JSX phần mở rộng cú pháp cho Javascript sử dụng React Nó có cú pháp tương đồng với html xml Việc sử dụng JSX khơng bắt buộc khuyến khích React Lí JSX giúp đoạn code gần giống Html/Xml tồn với code Js React GIúp cho việc nhìn đọc hiểu cấu trúc ý nghĩa component trở nên đơn giản dễ dàng • Component: React tạo component Mỗi component lại có logic, data cách vận hành riêng chúng Các component sử dụng lại project, giúp việc vận hành project lớn đơn giản hơn.Component Functional Component Class Component – Functional Component: functional component hàm Javascript (hoặc ES6) trả phần tử/1 element React Functional components gọi với tên khác stateless components khơng thể làm nhiều thứ phức tạp quản lý React State (data) phương thức life-cycle functional components – Class Component: Các Class components class ES6 Chúng phức tạp functional components chỗ chúng bao hàm các: phương thức khởi tạo, life-cycle, hàm render() quản lý state (data) Vì chúng cịn gọi với tên Stateful Component • Virtual DOM: Virtual DOM xem DOM gốc Để hiểu rõ, nhìn qua cách mà DOM hoạt động ứng dụng web Bất ứng dụng web có thay đổi dù nhỏ nhất, phải cập nhật lại toàn UI web Với việc web SPA ngày phức tạp, việc dẫn đến chậm cháp đình trệ xử lý Tuy nhiên Virtual DOM giúp xử lý vấn đề cách chạy thử thay đổi UI DOM ảo, sau chả thành phần thật thay đổi cập nhật chúng ứng dụng web • React Hook Hooks thức giới thiệu phiên React 16.8 Nó cho phép sử dụng state tính khác React mà khơng phải dùng đến Class Điều có nghĩa từ phiên 16.8 trở đi, sử dụng state stateless (functional) component, việc mà từ trước tới ta bắt buộc phải khai báo Class 2.1.0.4 Ưu điểm React • Tính hiệu quả: React tạo Virtual DOM để xử lý xem xét thay đổi cần phải cập nhật Điều dẫn đến việc giảm thiểu hao phí tài nguyên tốc độ cập nhật ứng dụng web • Reactjs giúp việc viết đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt JSX (Javascript mở rộng) cho phép ta trộn code HTML Javascript Ta them vào đoạn HTML vào hàm render mà không cần phải nối chuỗi Đây đặc tính thú vị Reactjs Nó chuyển đổi đoạn HTML thành hàm khởi tạo đối tượng HTML biến đổi JSX • Tính tái sử dụng cao, component dùng lại nhiều lần Giảm thiểu tối đa thời gian code • Hiệu cao với ứng dụng cập nhật thay đổi liên tục Dễ dàng bảo trì sửa lỗi component hoạt động độc lập • Độ phổ biến rộng rãi.Dễ dàng để tiếp cận học tập có nguồn tài liệu dồi tiếng anh tiếng việt Kèm theo tool hữu ích bổ trợ tính cho React • Tối ưu hóa cơng cụ tìm kiếm tốt: Các ứng dụng ReactJS chạy máy chủ giúp việc điều hướng cơng cụ tìm kiếm khác trở nên dễ dàng Điều DOM ảo render return trình duyệt webpage thơng thường • Các tính liên tục phát triển cập nhật 2.1.0.5 Nhược điểm React • Tốc độ phát triển nhanh vừa ưu lại nhược điểm React Các lập trình viên phải cập nhật kiến thức liên tục không muôn chúng bị lỗi thời Cùng với document cần bổ sung sửa đổi • React hỗ trợ phần Front-end app cần phải kèm với cơng nghệ khác để hồn thành dự án Rất may mắn React hỗ trợ tốt khoản • Rào cản JSX: Các lập trình viên dùng react sớm hay muộn phải dùng đến JSX Tuy có kết hợp yếu tố HTML, JSX có phức tạp định cần đầu tư thời gian để hiểu rõ 2.1.0.6 Các thư viện viện thay React • Angular • Vue • Svelte 2.1.0.7 Các Website lớn có sử dụng React • Facebook • Netflix • Uber • Flipboard • Dropbox • more and more 2.2 Life Cycle React Component Tất khái niệm từ đơn giản đến phức tạp React xoay quanh component Sau đây, ta tìm hiểu kĩ Component qua phân tích Life Cycle React Component 2.2.0.1 Prop State? Prop State hai object thiếu React Component, đảm nhận nhiệm vụ khác Component • Prop viết tắt Propertie, chúng đảm nhận nhiệm vụ chuyền liệu qua lại Component với Data Flow Prop đường đơn hướng từ component cha sang component Có nghĩa có component cha thay đổi chuyền liệu cho component Việc để đảm bảo tính quán liệu component cha thường thừa kế nhiều component • State object build-in React, cho phép Component chủ tạo quản lý data Khơng prop, bạn khơng thể chuyển data với state Tuy nhiên, việc quản lý data bên component với state khả thi.State không nên chỉnh sửa trực tiếp mà nên chỉnh sửa thông qua phương thức setState() 10 – Tại cần phương thức setState()? Thay đổi đến state xảy dựa cách mà người dùng tương tác với UI.Bất thay đổi đến UI => React thông báo lặp tức render lại Ui trạng thái Nhờ có Virtual DOM nói nên React khơng phải cập nhật lại tồn component Đó lí React lại xử lý nhanh đến Và setState() hàm thơng báo cho React thay đổi – Trước state sử dụng class Component Tuy nhiên với đời React Hooks 16.8, functional component sử dụng state 2.2.0.2 Các trạng thái Life Cycle Figure 2: Life Cycle React Component Như hình ảnh trên, Vịng đời component phân loại thành bốn phần: • Initialization 11 • Mounting • Updation • Unmounting 2.2.0.3 Initialization Đây giai đoạn mà thành phần bắt đầu hành trình cách thiết lập state prop Điều thường thực bên constructor 2.2.0.3 ExpressJS 3.1 3.1.1 Giới thiệu ExpressJS ? ExpressJS framework dùng để phát triển ứng dụng backend web di động Express xây dựng phía NodeJS - giúp đơn giản hóa việc xử lí API Request từ phía người dùng cấu trúc đơn giản, dễ sử dụng Express viết dạng mã nguồn mở dùng giấy phép MIT 3.1.2 Lịch sử ExpressJS ExpressJS lập lập trình viên tên TJ Holowaychuk vào tháng năm 2010 Phiên phát hành thức 0.12 Vào tháng năm 2014, quyền quản lí dự án trao cho StrongLoop Sau StrongLoop mua lại IBM vào tháng năm 2015 Trong tháng năm 2016, IBM thông báo ExpressJS chịu trách nhiệm quản lí NodeJS 3.1.3 Tính • Phát triển ứng dụng server-side cách nhanh chóng : So với viết code NodeJS, ExpressJS giảm thiểu tối đa việc viết lại code cách sử dụng syntax code đơn giản thay phải xử lí liệu, payload, dùng module HTTP NodeJS Nhờ 12 giảm thời gian viết code nhiều (thậm chí lên đến 5-10 lần) • Middleware : ExpressJS cho phép thiết đặt cài đặt Middleware - thiết đặt tiền xử lí Request • Routing : ExpressJS cung cấp tính cho phép lập trình viên lập trình việc phản hồi request từ phía người dùng thơng qua URL endpoints • Templating : Express cung cấp template engine cho phép tạo nội dung HTML động dựng nên dựa Mẫu (template) có sẵn, đề tài nhóm nghiên cứu sử dụng JADE để tìm hiểu chức template 3.1.4 Ưu điểm ExpressJS • Mạnh mẽ, nhanh chóng, đơn giản Ngay kiến trúc mã nguồn vơ đơn giản • Kết nối với CSDL khác thơng qua driver vơ nhanh (và tốn thời gian config) • Thiết đặt xử lí Request thơng qua middleware cách đơn giản 3.1.5 Nhược điểm ExpressJS • Khơng có kiến trúc dự án cụ thể, viết kiểu được, code khó đọc khó hiểu • Error message Express khó hiểu, khó debug 3.1.6 Các thư viện có chức tương tự • Python Flask • PHP Symforny • Java Express 13 3.1.7 Cơng ty sử dụng ExpressJS • Netflix • IBM • eBay • Uber • more and more 3.2 Kiến trúc ứng dụng ExpressJS Một ứng dụng express (được tạo lệnh npx express-generator) có cấu trúc giống sơ đồ sau: Figure 3: Cấu trúc ứng dụng expressjs Để dễ hình dung hơn, ta tham khảo cấu trúc file : 14 Figure 4: Cấu trúc file ứng dụng expressjs Theo sơ đồ trên, kiến trúc gồm : • Root folder : thư mục root tồn ứng dụng • bin : chứa config environment ứng dụng, tốt hết ta khơng nên đụng vào làm • public : chứa file tài nguyên tĩnh (hình ảnh, css, javascript) ứng dụng • views : chứa template giao diện cho ứng dụng • app.js : Chứa thơng tin ứng dụng, cấu hình, khai báo, định nghĩa ứng dụng • package.json : chứa dependency mà ứng dụng ta sử dụng • routes : chứa cài đặt xử lí request từ người dùng ứng dụng Hiện thực hóa chức routing express Ngoài ra, viết ứng dụng thực tế, ta cịn khởi tạo thêm folder có tên Model để chứa câu lệnh xử lí liên quan đến CSDL, folder config chứa biến global ứng dụng 15 3.3 3.3.1 Các thư viện liên quan Mongoose Đây driver cho phép kết nối với CSDL mongodb (đã tạo mongodb atlas) 3.3.2 Bcrypt Bcrypt thư viện cung cấp tính mã hóa chiều Dữ liệu mã hóa bị phá hủy khơng thể giải mã, kiểm tra liệu chiều Thư viện để mã hóa mật nhằm tăng cường khả bảo mật cho hệ thống 3.3.3 JWT JWT cung cấp tính bảo mật dựa Token 3.4 Ứng dụng ExpressJS vào xây dựng hệ thống Các tính Express sử dụng đồ án ; • Middleware: sử dụng built-in json middleware để trả liệu dạng JSON cho client • Routing: Config REST API cho webserver • Templating : Xây dựng vài giao diện mẫu phục vụ cho mục đích kiểm thử Các tính hệ thống xây dựng dùng ExpressJS : • Chức đăng ký/đăng nhập sử dụng phương thức xác thực JWT, lưu trữ liệu mã hóa Bcrypt • Tính lưu trữ hình ảnh • Chức lưu trữ blog database • Chức cho người viết viết sửa đổi viết • Chức cho phép người đọc người viết bình luận 16 • Chức cho phép người đọc react post • Chức gợi ý viết nên đọc dựa theo tiêu đề ỨNG DỤNG MINH HỌA 4.1 Giới thiệu ứng dụng minh họa 4.1.1 Bài toán thực tế Từ internet xuất hiện, trang Blogspot phát triển nhanh chóng phổ biến Tuy nhiên, việc Internet trỗi dậy khiến trang blogspot viết Worldpress trở nên lỗi thời dần biến 4.1.1.1 Hướng giải Dựa vào kiến thức từ trình tìm hiểu ReactJS ExpressJS, nhóm định tạo trang Blogspot với giao diện đại hơn, dễ dàng tiếp cận với người dùng mạng xã hội thời điểm 4.1.2 Tổng quan ứng dụng phát triển Lí khiến trang Blogspot cũ kĩ lượng lớn người dùng lỗi thời UI Sau nghiên cứu ReactJS, nhóm nhận thấy thư viện có tiềm lớn nhiều việc thiết kế UI Bởi vì: • ReactJS hỗ trợ khả thiết kế giao diên đẹp mắt tinh gọn, giúp trang web có tiềm vượt trội so với trang web Blogspot truyền thống • React load tồn data web lần đầu truy cập web Việc khiến web khơng phải load lại tồn thành phần bạn đổi sang trang khác phạn vi web Với trang Blogspot, việc chuyển đổi viết liên tục thục mượt mà nhiều • React có nhiều thư viện hỗ trợ nguồn tài liệu phong phú, dễ dàng việc tiếp cận phát triển web ExpressJS 17 4.1.3 Source code https://github.com/PhungThanhTu/Doa n1 4.2 Mục tiêu Vận dụng kiến thức nhóm nghiên cứu ReactJS ExpressJS Xây dựng ứng dụng web có chức đặc trưng BlogSpot website 4.3 4.3.1 Phân tích yêu cầu Use Case Diagram Figure 5: UseCase Diagram 18 4.3.2 Phân thích Use Case 4.4 Thiết kế hệ thống 4.4.0.1 Backend Package Diagram Figure 6: Backend Package Diagram 4.4.0.2 Frontend Package Diagram 19 ... đề tài tìm hiểu thư viện frontend backend sử dụng ngôn ngữ lập trình JavaScript nhiều lập trình viên ưa chuộng • Ở phía frontend, tìm hiểu ReactJS, thư viện frontend phổ biến mà gần tìm hiểu frontend... cạnh phổ biến ngơn ngữ lập trình JavaScript Kết hợp chúng lại, nhiều web framework dựng nên phát triển Ở đồ án tìm hiểu framework frontend backend phổ biến ReactJS (Frontend) vằ ExpressJS (Backend)... khác sử dụng cho việc lập trình Backend, ExpressJS 1.2.2 Phạm vi nghiên cứu Đề tài bao gồm trình tìm hiểu thư viện ExpressJS ReactJS việc phát triển ứng dụng web Bên cạnh số kiến thức liên quan hay