Báo cáo thực tập tốt nghiệp tìm hiểu về mern stack & xây dựng web tin tức Đơn giản

- MongoDB sử dụng một quá trình xử lý để xử lý các yêu cầu về dữ liệu.. Trong việc mở rộngtheo chiều ngang sử dụng mô hình mảnh lưu trữ, MongoDB cung cấp dịch vụ xử lý các truyvấn từ tần

TRƯỜNG ĐẠI HỌC XÂY DỰNG HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN HỆ CƠ SỞ DỮ LIỆU

🙠🙞🕮🙜🙢

BÁO CÁO THỰC TẬP TỐT NGHIỆP TÌM HIỂU VỀ MERN STACK & XÂY DỰNG WEB TIN TỨC ĐƠN GIẢN

Giảng viên hướng dẫn: Nguyễn Đình Quý

Sinh viên thực hiện: Nguyễn Hải Phong

Lớp: 65CS1

HÀ NỘI, THÁNG 1 NĂM 2024

Nhận xét của giảng viên

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

1

LỜI CẢM ƠN

Lời đầu tiên em xin gửi lời cảm ơn đến thầy Nguyễn Đình Quý đã tận tình hướng dẫn,giúp đỡ, chỉ bảo em trong thời gian thực tập tốt nghiệp cũng như chuẩn bị cho đồ án tốtnghiệp

Trong quá trình thực tập tìm hiểu, không thể tránh khỏi những sai xót, em rất mongnhận được sự chỉ bảo của thầy cô để em có điều kiện bổ sung và hoàn thành tốt đồ án tốtnghiệp của mình hơn

Em xin chân thành cảm ơn!

MỤC LỤC CHƯƠNG I TỔNG QUAN VỀ ĐƠN VỊ THỰC TẬP VÀ CÔNG NGHỆ

SỬ DỤNG 5

1 Tổng quan về đơn vị thực tập 5

2 Khái quát về Technical Stack 5

3 Khái quát về MERN Stack 5

CHƯƠNG II TÌM HIỂU CHI TIẾT VỀ MERN STACK 7

1 MongoDB 7

1.1 Khái quát về NoSql 7

1.2 Khái quát về MongoDB 7

1.2.1 MongoDB là gì? 7

1.2.2 Tính năng của MongoDB 8

1.2.3 Ưu điểm của MongoDB 8

1.2.4 Nhược điểm của MongoDB 9

1.2.5 Mongoose là gì? 9

2 ExpressJS 9

2.1 ExpressJS là gì? 9

2.2 Cấu trúc của ExpressJS 10

2.3 Tại sao nên sử dụng ExpressJS 11

2.4 Router trong ExpressJS 11

2.5 Router.all() 12

2.6 Router.Method() 12

2.7 RESTful API là gì? 13

2.8 RESTful API hoạt động như thế nào? 14

3 ReactJS 14

3.1 ReactJS là gì? 14

3.2 JSX 15

3.3 Component 16

3.4 Props và state 16

3.4.1 Props 16

3.4.2 State 16

3

3.5 Ưu điểm của ReactJS 17

3.6 Nhược điểm của ReactJS 17

4 NodeJS 18

4.1 NodeJS là gì? 18

4.2 Đặc điểm của NodeJS 18

4.3 Cấu trúc cơ bản của NodeJS 18

4.4 Ưu điểm của NodeJS 19

4.5 Nhược điểm của NodeJS 19

CHƯƠNG III CÁC PHẦN MỀM VÀ CÔNG CỤ 21

1 Postman 21

1.1 Postman là gì? 21

1.2 Chức năng của Postman 21

1.3 Các thành phần chính của Postman 23

1.4 Lợi ích của Postman 23

2 Git 23

2.1 Git là gì? 23

2.2 Lợi ích của Git 24

2.3 Quy trình xử lý công việc (workflow) trên Git 24

CHƯƠNG IV PHÂN TÍCH THIẾT KẾ WEB TIN TỨC ĐƠN GIẢN 26

1 Mô tả hoạt động 26

2 Thiết kế database 26

3 Các chức năng chính 26

3.1 Đăng nhập 26

3.2 Thêm mới user 27

3.3 Thêm mới bài viết 27

3.4 Xóa và sửa bài viết 28

CHƯƠNG V KẾT QUẢ ĐẠT ĐƯỢC 29

CHƯƠNG I TỔNG QUAN VỀ ĐƠN VỊ THỰC TẬP VÀ CÔNG NGHỆ

SỬ DỤNG

1 Tổng quan về đơn vị thực tập

Hình 1: Logo công ty Uninext

Loại hình doanh nghiệp: Công ty cổ phần

Tên công ty: Công ty cổ phần giải pháp & công nghệ Uninext

Địa chỉ: Số 61 Đường Phương Liệt , Phường Phương Liệt, Quận Thanh Xuân, Thành phố HàNội, Việt Nam

Liên hệ: 0397985866

Mô tả công ty: Công ty cổ phần giải pháp & công nghệ Uninext được thành lập vào ngày2023-03-09, là một trong những công ty hàng đầu về cung cấp các giải pháp và công nghệcho ngành công nghiệp và hoạt động trong lĩnh vực lập trình máy vi tính

2 Khái quát về Technical Stack

Technical stack là sự kết hợp các công nghệ, framework, ngôn ngữ lập trình, để tạonên một phần mềm hoàn chỉnh Với các phần mềm hiện giờ thường có 2 phần là: client side

và server side hay người ta còn gọi là front end và backend Nên người ta cũng phân rabackend stack, frontend stack nữa

Ta thường dùng chữ cái đầu để đặt tên cho technical stack như: LAMP ( Linux,Apache, MySQL, PHP ), MERN ( MongoDB, ExpressJS, ReactJS, NodeJS )

3 Khái quát về MERN Stack

MERN là một thuật ngữ rút gọn của MongoDB, ExpressJS, ReactJS và NodeJS;Stack MERN là một stack Javascript được thiết kế để giúp phát triển ứng dụng web toàn ngănxếp dễ dàng hơn và nhanh hơn

- MongoDB sử dụng một quá trình xử lý để xử lý các yêu cầu về dữ liệu Quản lýđịnh dạng dữ liệu, thực hiện các hoạt động quản lý bên dưới là mongod Trong việc mở rộngtheo chiều ngang sử dụng mô hình mảnh lưu trữ, MongoDB cung cấp dịch vụ xử lý các truyvấn từ tầng ứng dụng, xác định vị trí dữ liệu trong cụm các node phân mảnh được gọi làmongos

- ExpressJS là một web application framework cho NodeJS, cung cấp các tính năngmạnh mẽ cho việc xây dựng một ứng dụng web đúng nghĩa hoặc ngược lại ExpressJS cũng

5

có thể sử dụng để xây dựng một API mạnh mẽ và thân thiện với người dùng, vì nó cung cấprất nhiều tiện ích HTTP và middleware cho việc kết nối

- ReactJS là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng(UI) Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng phương phápmới để render trang web

- NodeJS là một nền tảng được xây dựng trên “V8 Javascript engine” được viết bằngC++ và Javascript Nền tảng này được phát triển bởi Ryan Lienhart Dahl vào năm 2009

CHƯƠNG II TÌM HIỂU CHI TIẾT VỀ MERN STACK

1 MongoDB

1.1 Khái quát về NoSql

Cơ sở dữ liệu NoSQL (phi quan hệ) là Cơ sở dữ liệu được xây dựng dành riêng cho

mô hình dữ liệu và có sơ đồ linh hoạt để xây dựng các ứng dụng hiện đại Cơ sở dữ liệuNoSQL được công nhận rộng rãi vì khả năng dễ phát triển, chức năng cũng như hiêu năng ởquy mô lớn

Cơ sở dữ liệu NoSQL sử dụng nhiều mô hình dữ liệu để truy cập và quản lý dữ liệu.Các loại cơ sở dữ liệu này được tối ưu hóa dành riêng cho các ứng dụng yêu cầu mô hình dữliệu linh hoạt có lượng dữ liệu lớn và độ trễ thấp, có thể đạt được bằng cách giảm bớt một sốhạn chế về tính nhất quán của dữ liệu của các cơ sở dữ liệu khác

Cơ sở dữ liệu NoSQL là lựa chọn cực kỳ thích hợp cho nhiều ứng dụng hiện đại, ví dụnhư di động, web và trò chơi đòi hỏi phải sử dụng cơ sở dữ liệu cực kỳ thiết thực, linh hoạt,

có khả năng thay đổi quy mô và hiệu năng cao để đem đến cho người dùng trải nghiệm tuyệtvời

1.2 Khái quát về MongoDB

1.2.1 MongoDB là gì?

MongoDB là cơ sở dữ liệu hướng tài liệu No-SQL, được sử dụng để lưu trữ dữ liệu cókhối lượng lớn Thay vì lưu trữ dữ liệu dưới dạng các bảng có mối quan hệ với nhau,MongoDB quy định dữ liệu thành một tập các collection riêng biệt, mỗi collection sẽ baogồm các đơn vị dữ liệu nhỏ hơn được gọi là document Document lưu trữ dữ liệu dưới dạngdanh sách các cặp key - value Các cặp này được xem như là đơn vị dữ liệu nhỏ nhất củadatabase và phản ánh thuộc tính của một document

Hình 2: Cấu trúc MongoDB

7

1.2.2 Tính năng của MongoDB

- Cơ sở dữ liệu Schema - less: là cơ sở dữ liệu không quy định bắt buộc các documenttrong cùng một collection phải có kiểu dữ liệu giống nhau Nói cách khác, trong MongoDB,một collection có thể lưu trữ các document có sự khác nhau về kích thước, nội dung và sốlượng thuộc tính Với MongoDB, ta được phép lưu trữ dữ liệu lồng nhau Việc lồng dữ liệunày cho phép người dùng tạo ra các mối quan hệ phức tạp giữa dữ liệu và lưu trữ chúng trongcùng một document Cách lưu trữ này hỗ trợ việc truy xuất dữ liệu nhanh hơn thay vì phải tạocác bảng riêng biệt rồi JOIN chúng lại với nhau như trong trong cơ sở dữ liệu quan hệ

- Hướng dữ liệu (Document - Oriented): Dữ liệu trong MongoDB được lưu trữ dướidạng các document thay vì bảng như trong các cơ sở dữ liệu quan hệ Việc lưu trữ thuộc tínhcủa các document thành các cặp key - value sẽ có thể khiến dữ liệu linh hoạt hơn Mỗidocument chứa id đối tượng duy nhất của nó

- Chỉ mục (Indexing): Trong cơ sở dữ liệu MongoDB, mọi trường trong documentđược lập chỉ mục với các chỉ số chính và phụ, điều này giúp việc tìm kiếm dữ liệu dễ dàng vàtiết kiệm thời gian Nếu dữ liệu không được lập chỉ mục thì cơ sở dữ liệu sẽ phải thực hiệntruy vấn để tìm kiếm từng tài liệu riêng biệt, tiêu tốn thời gian nhưng không đem lại hiệu quả

- Khả năng mở rộng (Scalability): MongoDB cung cấp khả năng mở rộng theo chiềungang với sự trợ giúp của Sharding Sharding thực hiện phân phối dữ liệu trên nhiều máychủ, một lượng lớn dữ liệu sẽ được phân vùng thành các khối dữ liệu bằng cách sử dụng khóaphân đoạn Các khối dữ liệu này sau đó lại được phân phối đồng đều trên các Shard nằm trêncác máy chủ vật lý

- Bản sao (Replicate): MongoDB đảm bảo tính khả dụng và dự phòng cho dữ liệuthông qua việc nhân bản cơ sở dữ liệu Thông thường, MongoDB sẽ luôn duy trì mô hình baogồm một cơ sở dữ liệu chính và nhiều cơ sở dữ liệu phụ sao chép dữ liệu từ cơ sở chính Khi

cơ sở dữ liệu chính gặp phải sự cố, một cơ sở dữ liệu phụ sẽ được chọn ra thay thế vai trò, từ

đó đảm bảo tính sẵn có của dữ liệu Aggregation: Aggregation cho phép người dùng thựchiện thao tác trên các nhóm dữ liệu Về mặt chức năng, Aggregation có vài sự tương đồng vớiSQL GROUP BY Aggregation cung cấp 3 chức năng chính: aggregation pipeline, cácfunction map - reduce và cũng như các method aggregation đơn mục đích

- Hiệu suất cao: So với các cơ sở dữ liệu quan hệ, MongoDB có ưu thế hơn về mặthiệu suất cũng như tính ổn định của dữ liệu

1.2.3 Ưu điểm của MongoDB

- Document oriented

- Hiệu suất cao

- Tính sẵn sàng cao – Nhân rộng

- Khả năng mở rộng cao – Sharding

- Năng động – Không có lược đồ cứng nhắc

- Linh hoạt – thêm / xóa trường có ít hoặc không ảnh hưởng đến ứng dụng

- Dữ liệu không đồng nhất

- Phân phối được

- Biểu diễn dữ liệu trong JSON hoặc BSON

- Hỗ trợ không gian địa lý (Geospatial)

- Tích hợp dễ dàng với BigData Hadoop

- Ngôn ngữ truy vấn dựa trên tài liệu mạnh mẽ như SQL

- Các bản phân phối cloud như AWS, Microsoft, RedHat, dotCloud và SoftLayer, v.v … Trênthực tế, MongoDB được xây dựng cho cloud Kiến trúc mở rộng quy mô tự nhiên của nó,được kích hoạt bởi sharding, liên kết tốt với quy mô và sự nhanh nhẹn có được nhờ điện toánđám mây

1.2.4 Nhược điểm của MongoDB

- Kích thước của mỗi document bị giới hạn 16 MB

- MongoDB không hỗ trợ JOIN như cơ sở dữ liệu quan hệ Tuy nhiên, người ta có thể sửdụng chức năng nối bằng cách thêm bằng cách mã hóa nó theo cách thủ công Nhưng nó cóthể làm chậm quá trình thực hiện và ảnh hưởng đến hiệu suất

- Do không hỗ trợ JOIN nên dữ liệu của MongoDB thường xảy ra tình trạng dư thừa và sửdụng bộ nhớ không cần thiết

1.2.5 Mongoose là gì?

- Mongoose là một Object Document Mapper (ODM) Điều này có nghĩa làMongoose cho phép định nghĩa các object (đối tượng) với một được định nghĩa rõ ràng, đượcánh xạ tới một MongoDB document

- Mongoose là một thư viện JavaScript cho phép định nghĩa các schema với dữ liệuđược định kiểu rõ ràng Khi một schema được định nghĩa, Mongoose cho phép tạo mộtModel dựa trên một schema cụ thể Model của Mongoose sau đó được ánh xạ tới mộtMongoDB document thông qua định nghĩa schema của Model Khi đã xác định các schema

và model của mình, Mongoose chứa nhiều hàm khác nhau cho phép xác thực tính hợp lệ, lưu,xóa và truy vấn dữ liệu bằng các hàm MongoDB phổ biến

- Mongoose hiện có 8 SchemaTypes Đó là: String, Number, Date, Buffer, Boolean,Mixed, ObjectId, Array

- Vì ExpressJS chỉ yêu cầu ngôn ngữ lập trình Javascript nên việc xây dựng các ứngdụng web và API trở nên đơn giản hơn với các lập trình viên và nhà phát triển ExpressJScũng là một khuôn khổ của NodeJS do đó hầu hết các mã code đã được viết sẵn cho các lậptrình viên có thể làm việc

- Nhờ có ExpressJS mà các nhà lập trình có thể dễ dàng tạo các ứng dụng 1 web,nhiều web hoặc kết hợp Do có dung lượng khá nhẹ, ExpressJS giúp cho việc tổ chức các ứngdụng web thành một kiến trúc MVC có tổ chức hơn Để có thể sử dụng được mã nguồn này,chúng ta cần phải biết về Javascript và HTML ExpressJS cũng là một phần của công nghệgiúp quản lý các ứng dụng web một cách dễ dàng hơn hay còn được gọi là ngăn xếp phầnmềm MEAN Nhờ có thư viện Javascript của ExpressJS đã giúp cho các nhà lập trình xâydựng nên các ứng dụng web hiệu quả và nhanh chóng hơn ExpressJS cũng được sử dụng đểnâng cao các chức năng của NodeJS

- Trên thực tế, nếu không sử dụng ExpressJS, chúng ta sẽ phải thực hiện rất nhiềubước lập trình phức tạp để xây dựng nên một API hiệu quả ExpressJS đã giúp cho việc lậptrình trong NodeJS trở nên dễ dàng hơn và có nhiều tính năng mới bổ sung

Hình 3: Mô hình ExpressJS

2.2 Cấu trúc của ExpressJS

Cấu trúc của ExpressJS vô cùng đơn giản

- Folder routes: chứa các route có trong ứng dụng

- Folder view: chứa view/template cho ứng dụng

- Folder public chứa các file css, js, images, cho ứng dụng

2.3 Tại sao nên sử dụng ExpressJS

- Tài sản quý giá nhất trong bất kỳ doanh nghiệp nào chính là thời gian Nhiều lậptrình viên chịu áp lực phải xây dựng các ứng dụng web hiệu quả trong một khoảng thời gianngắn Nhưng quá trình để làm điều này lại không đơn giản như vậy Đây là lúc ExpressJS trởthành cứu cho họ

- ExpressJS có thể giảm một nửa thời gian viết mã mà vẫn giúp nhà phát triển xâydựng các ứng dụng web hiệu quả ExpressJS còn cung cấp các tính năng khác nhau giúp tiếtkiệm công sức rất nhiều

- ExpressJS được sử dụng tương đối dễ dàng vì có hỗ trợ JavaScript Javascript rất dễhọc đối với bất kỳ ai Do đó, ExpressJS là một công cụ tuyệt vời cho những người mới bắtđầu tham gia vào lĩnh vực phát triển ứng dụng web và gặt hái được thành công

- Bên cạnh đó, ExpressJS được phát triển dựa trên nền tảng Node.js Đây là một kiếntrúc hướng sự kiện và có khả năng xử lý hàng nghìn yêu cầu của khách hàng cùng một lúc,điều mà PHP không thể thực hiện được Node.js được thiết kế dành riêng để hỗ trợ các ứngdụng web thực

- Điều quan trọng kế tiếp của doanh nghiệp là việc sử dụng tiền sao cho hiệu quả đểtối đa hóa lợi nhuận ExpressJS lại là một ứng dụng web miễn phí và mã nguồn mở, do đókhông có lý do gì để không sử dụng framework này

2.4 Router trong ExpressJS

- Router là một Object, là một instance riêng của middleware và routes Chính vì nó làmột instance của middleware và route nên nó có các chức năng của cả hai

- Chúng ta có thể gọi nó là một mini-application Các Application dùng ExpressJS làmcore đều có phần Router được tích hợp sẵn trong đó

- Router hoạt động như một middleware nên chúng ta có thể dùng nó như mộtarguments Hoặc dùng nó như một arguments cho route khác

// invoked for any requests passed to this router

router.use(function(req, res, next) {

  // some logic here like any other middleware

  next();

  });

  // will handle any request that ends in /events

  // depends on where the router is "use()'d"

  router.get('/events', function(req, res, next) {

});

11

2.5 Router.all()

router.all() Method này phù hợp với việc định nghĩa mang tính chất toàn cục cho cácprefix

Ví dụ thứ nhất:

router.all('*', requireAuthentication, loadUser);

Nếu ta đặt route này trên cùng (top) thì nó yêu cầu tất cả các route bên dưới phải đượcrequireAuthentication Có nghĩa là xác thực trước khi thực hiện một hành động hay một tasknào đó tiếp theo Ví dụ là loadUser chẳng hạn

router.all('*', requireAuthentication)

router.all('*', loadUser);

Ví dụ thứ hai:

router.all('/api/*', requireAuthentication)

Khác với ví dụ trên Ở ví dụ này ta có một prefix đã được xác định là /api/ thay vìdùng * Nghĩa là trước khi request vào các route bên trong API thì phải qua một thao tác xácthực requireAuthentication

2.6 Router.Method()

Router.METHOD() cung cấp cho chúng ta chức năng Routing trong ExpressJS Cụthể METHOD() ở đây là các HTTP method mà chúng ta thường xuyên sử dụng Chẳng hạnGET, POST, PUT,

Tên method phải được viết thường (lowercase)

///////////////////////////////////////////////////////

router.get('/user/profile', function(req, res, next) {

  res.send('user profile');

});

///////////////////////////////////////////////////////

router.post('/update/user/:id', function (res, req, next) {

  res.send('Update user');

});

///////////////////////////////////////////////////////

router.put('/update/posts/:id', function (req, res, next) {

  res.send('Update post');

});

///////////////////////////////////////////////////////

Để bảo mật hơn thì có thể sử dụng Regex để bắt các Endpoint

router.get(^\/commits\/(\w+)(?:\.\.(\w+ ?$/)) , function(req, res){

  var from req.params[= 0];

  var to req.params[ ] = 1 ||'HEAD';

  res.send('commit range ' from + +' ' to);+

});

2.7 RESTful API là gì?

- 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

- API (Application Programming Interface) là một tập các quy tắc và cơ chế mà theo đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành phần khác API có thể trả về dữ liệu mà bạn cần cho ứng dụng của mình ở những kiểu dữ liệu phổ biến như JSON hay XML

- REST (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để viết API Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp giữa các máy Vì vậy, thay vì sử dụng một URL cho việc xử lý một số thông tin người dùng, REST gửi một yêu cầu HTTP như GET, POST, DELETE, vv đến một URL để xử lý dữ liệu

- RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dụng web để quản lý các resource RESTful là một trong những kiểu thiết

kế API được sử dụng phổ biến ngày nay để cho các ứng dụng (web, mobile…) khác nhau giao tiếp với nhau

- Chức năng quan trọng nhất của REST là quy định cách sử dụng các HTTP method (như GET, POST, PUT, DELETE…) và cách định dạng các URL cho ứng dụng web để quản các resource RESTful không quy định logic code ứng dụng và không giới hạn bởi ngôn ngữ lập trình ứng dụng, bất kỳ ngôn ngữ hoặc framework nào cũng có thể sử dụng để thiết kế một RESTful API.

13

2.8 RESTful API hoạt động như thế nào?

Hình 4: Mô hình hoạt động của RESTful

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àythường được gọi là CRUD tương ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa,Xóa

React gồm những thành phần (components) UI có tính tương tác cao, khả năng tái sửdụng vô cùng cao React được sử dụng tại Facebook trong production, và instagram là mộtmạng xã hội lớn được viết hoàn toàn trên React 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 rendertrước và cập nhật ít thay đổi nhất trên DOM 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