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