1. Trang chủ
  2. » Luận Văn - Báo Cáo

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

31 0 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Tìm Hiểu Về MERN Stack & Xây Dựng Web Tin Tức Đơn Giản
Tác giả Nguyễn Hải Phong
Người hướng dẫn Nguyễn Đình Quý
Trường học Trường Đại Học Xây Dựng Hà Nội
Chuyên ngành Công Nghệ Thông Tin
Thể loại báo cáo thực tập tốt nghiệp
Năm xuất bản 2024
Thành phố Hà Nội
Định dạng
Số trang 31
Dung lượng 2,63 MB

Cấu trúc

  • 1. Tổng quan về đơn vị thực tập (6)
  • 2. Khái quát về Technical Stack (6)
  • 3. Khái quát về MERN Stack (6)
  • CHƯƠNG II. TÌM HIỂU CHI TIẾT VỀ MERN STACK (8)
    • 1. MongoDB (8)
      • 1.1. Khái quát về NoSql (8)
      • 1.2. Khái quát về MongoDB (8)
        • 1.2.1. MongoDB là gì? (8)
        • 1.2.2. Tính năng của MongoDB (9)
        • 1.2.3. Ưu điểm của MongoDB (9)
        • 1.2.4. Nhược điểm của MongoDB (10)
        • 1.2.5. Mongoose là gì? (10)
    • 2. ExpressJS (10)
      • 2.1. ExpressJS là gì? (10)
      • 2.2. Cấu trúc của ExpressJS (11)
      • 2.3. Tại sao nên sử dụng ExpressJS (12)
      • 2.4. Router trong ExpressJS (12)
      • 2.5. Router.all() (13)
      • 2.6. Router.Method() (13)
      • 2.7. RESTful API là gì? (14)
      • 2.8. RESTful API hoạt động như thế nào? (15)
    • 3. ReactJS (15)
      • 3.1. ReactJS là gì? (15)
      • 3.2. JSX (16)
      • 3.3. Component (17)
      • 3.4. Props và state (17)
        • 3.4.1. Props (17)
        • 3.4.2. State (17)
      • 3.5. Ưu điểm của ReactJS (18)
      • 3.6. Nhược điểm của ReactJS (18)
    • 4. NodeJS (19)
      • 4.1. NodeJS là gì? (19)
      • 4.2. Đặc điểm của NodeJS (19)
      • 4.3. Cấu trúc cơ bản của NodeJS (20)
      • 4.4. Ưu điểm của NodeJS (21)
      • 4.5. Nhược điểm của NodeJS (21)
  • CHƯƠNG III. CÁC PHẦN MỀM VÀ CÔNG CỤ (22)
    • 1. Postman (22)
      • 1.1. Postman là gì? (22)
      • 1.2. Chức năng của Postman (22)
      • 1.3. Các thành phần chính của Postman (24)
      • 1.4. Lợi ích của Postman (24)
    • 2. Git (24)
      • 2.1. Git là gì? (24)
      • 2.2. Lợi ích của Git (25)
      • 2.3. Quy trình xử lý công việc (workflow) trên Git (25)
  • CHƯƠNG IV. PHÂN TÍCH THIẾT KẾ WEB TIN TỨC ĐƠN GIẢN (27)
    • 1. Mô tả hoạt động (27)
    • 2. Thiết kế database (27)
    • 3. Các chức năng chính (27)
      • 3.1. Đăng nhập (27)
      • 3.2. Thêm mới user (28)
      • 3.3. Thêm mới bài viết (28)
      • 3.4. Xóa và sửa bài viết (29)
  • CHƯƠNG V. KẾT QUẢ ĐẠT ĐƯỢC (30)

Nội dung

- 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

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

Công ty cổ phần giải pháp & công nghệ Uninext, có trụ sở tại 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, chuyên cung cấp các giải pháp công nghệ tiên tiến.

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

Khái quát về Technical Stack

Technical stack là sự kết hợp của các công nghệ, framework và ngôn ngữ lập trình để phát triển phần mềm hoàn chỉnh Phần mềm hiện đại thường bao gồm hai phần chính: client side (front end) và server side (backend), dẫn đến việc phân chia thành backend stack và frontend stack.

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 ).

Khái quát về MERN Stack

MERN là viết tắt của MongoDB, ExpressJS, ReactJS và NodeJS, tạo thành một stack Javascript hoàn chỉnh Stack MERN được thiết kế nhằm đơn giản hóa và tăng tốc quá trình phát triển ứng dụng web toàn ngăn xếp.

MongoDB sử dụng quy trình xử lý để quản lý yêu cầu dữ liệu, trong đó mongod thực hiện các hoạt động quản lý dữ liệu Để mở rộng theo chiều ngang, MongoDB áp dụng mô hình mảnh lưu trữ, cho phép xử lý truy vấn từ tầng ứng dụng và xác định vị trí dữ liệu trong cụm các node phân mảnh thông qua mongos.

ExpressJS là một framework ứng dụng web cho NodeJS, mang đến nhiều tính năng mạnh mẽ để phát triển ứng dụng web thực sự hoặc API thân thiện với người dùng Với sự hỗ trợ của các tiện ích HTTP và middleware, ExpressJS giúp đơn giản hóa quá trình kết nối và xây dựng ứng dụng.

ReactJS là thư viện JavaScript hàng đầu cho việc phát triển giao diện người dùng (UI), nổi bật với khả năng phản hồi nhanh chóng khi người dùng tương tác Thư viện này áp dụng phương pháp hiện đại để tối ưu hóa quá trình render trang web, mang lại trải nghiệm mượt mà và hiệu quả.

- 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.

TÌM HIỂU CHI TIẾT VỀ MERN STACK

MongoDB

Cơ sở dữ liệu NoSQL (phi quan hệ) được thiết kế đặc biệt cho mô hình dữ liệu với sơ đồ linh hoạt, phù hợp cho việc phát triển các ứng dụng hiện đại Nó được công nhận rộng rãi nhờ khả năng mở rộng dễ dàng, tính năng phong phú và hiệu suất cao khi xử lý dữ liệu ở quy mô lớn.

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

Cơ sở dữ liệu NoSQL là lựa chọn lý tưởng cho nhiều ứng dụng hiện đại như di động, web và trò chơi, nhờ vào tính linh hoạt, khả năng mở rộng và hiệu suất cao, giúp mang lại trải nghiệm tuyệt vời cho người dùng.

MongoDB là một cơ sở dữ liệu No-SQL hướng tài liệu, lý tưởng cho việc lưu trữ dữ liệu lớn Thay vì sử dụng các bảng có mối quan hệ, MongoDB tổ chức dữ liệu thành các collection riêng biệt Mỗi collection bao gồm các document, là các đơn vị dữ liệu nhỏ hơn, lưu trữ thông tin dưới dạng danh sách các cặp key-value Những cặp key-value này được coi là đơn vị dữ liệu nhỏ nhất trong cơ sở dữ liệu và phản ánh các thuộc tính của document.

Cơ sở dữ liệu Schema-less, như MongoDB, cho phép các document trong cùng một collection có kiểu dữ liệu khác nhau, nghĩa là kích thước, nội dung và số lượng thuộc tính có thể không đồng nhất Điều này cho phép lưu trữ dữ liệu lồng nhau, tạo ra các mối quan hệ phức tạp giữa dữ liệu và giữ chúng trong cùng một document Phương pháp lưu trữ này hỗ trợ truy xuất dữ liệu nhanh hơn, so với việc tạo các bảng riêng biệt và thực hiện JOIN như trong cơ sở dữ liệu quan hệ.

Dữ liệu trong MongoDB được lưu trữ dưới dạng document, khác với các cơ sở dữ liệu quan hệ sử dụng bảng Cách lưu trữ này cho phép các thuộc tính của document được tổ chức thành các cặp key-value, mang lại tính linh hoạt cao hơn cho dữ liệu Mỗi document trong MongoDB đều có một id duy nhất, giúp phân biệt và truy xuất dễ dàng.

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

MongoDB hỗ trợ khả năng mở rộng theo chiều ngang thông qua công nghệ Sharding, cho phép phân phối dữ liệu trên nhiều máy chủ Quá trình Sharding chia nhỏ lượng dữ liệu lớn thành các khối dữ liệu sử dụng khóa phân đoạn, sau đó phân phối đồng đều các khối này trên các Shard nằm trên các máy chủ vật lý.

MongoDB đảm bảo tính khả dụng và dự phòng cho dữ liệu thông qua việc nhân bản cơ sở dữ liệu, duy trì một cơ sở dữ liệu chính và nhiều cơ sở dữ liệu phụ Khi cơ sở dữ liệu chính gặp sự cố, một cơ sở dữ liệu phụ sẽ thay thế, đảm bảo tính sẵn có của dữ liệu Ngoài ra, tính năng Aggregation cho phép người dùng thao tác trên các nhóm dữ liệu, tương tự như SQL GROUP BY, với ba chức năng chính: aggregation pipeline, các function map - reduce và 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ặt hiệu suất cũng như tính ổn định của dữ liệu.

- 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

- 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 dịch vụ đám mây như AWS, Microsoft, RedHat, dotCloud và SoftLayer cung cấp nền tảng lý tưởng cho MongoDB, vốn được thiết kế đặc biệt cho môi trường đám mây Kiến trúc mở rộng quy mô tự nhiên của MongoDB, được hỗ trợ bởi sharding, giúp nó tương thích tốt với khả năng mở rộng và tính linh hoạt mà điện toán đám mây mang lại.

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

MongoDB không hỗ trợ chức năng JOIN giống như các cơ sở dữ liệu quan hệ, nhưng người dùng có thể thực hiện nối dữ liệu bằng cách mã hóa thủ công Tuy nhiên, phương pháp này có thể làm giảm hiệu suất và tốc độ thực hiện của ứng dụng.

- 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.

Mongoose là một Object Document Mapper (ODM) giúp định nghĩa các đối tượng một cách rõ ràng, cho phép ánh xạ chúng tới các tài liệu trong MongoDB.

Mongoose là thư viện JavaScript giúp định nghĩa các schema với dữ liệu có kiểu rõ ràng, cho phép tạo Model dựa trên schema cụ thể Model của Mongoose được ánh xạ tới MongoDB document thông qua định nghĩa schema Sau khi xác định schema và model, Mongoose cung cấp nhiều hàm để xác thực tính hợp lệ, lưu trữ, 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.

ExpressJS

ExpressJS là một framework mã nguồn mở miễn phí dành cho NodeJS, giúp thiết kế và xây dựng ứng dụng web một cách đơn giản và nhanh chóng.

ExpressJS, với yêu cầu duy nhất là ngôn ngữ lập trình Javascript, giúp đơn giản hóa quá trình xây dựng ứng dụng web và API cho lập trình viên Là một khuôn khổ của NodeJS, ExpressJS cung cấp nhiều mã code đã được viết sẵn, tạo điều kiện thuận lợi cho các nhà phát triển trong công việc của họ.

ExpressJS giúp lập trình viên dễ dàng tạo ra các ứng dụng web đơn lẻ hoặc nhiều trang, nhờ vào dung lượng nhẹ và khả năng tổ chức ứng dụng theo kiến trúc MVC Để sử dụng ExpressJS, người dùng cần có kiến thức về Javascript và HTML Nó là một phần quan trọng trong ngăn xếp phần mềm MEAN, giúp quản lý ứng dụng web hiệu quả hơn Thư viện Javascript của ExpressJS hỗ trợ lập trình viên xây dựng ứng dụng nhanh chóng và hiệu quả, đồng thời nâng cao chức năng của NodeJS.

ExpressJS giúp đơn giản hóa quá trình lập trình API trong NodeJS, loại bỏ nhiều bước phức tạp Nhờ vào ExpressJS, việc phát triển ứng dụng trở nên dễ dàng hơn với nhiều tính năng mới hữu ích.

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

- app.js chứa các thông tin về cấu hình, khai báo, các định nghĩa, để ứng dụng của chúng ta chạy ok

File package.json chứa các gói cần thiết để ứng dụng hoạt động, tương tự như composer.json trong PHP hoặc Gemfile trong Ruby on Rails.

- 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

Thời gian là tài sản quý giá nhất của bất kỳ doanh nghiệp nào, và nhiều lập trình viên đang phải đối mặt với áp lực xây dựng ứng dụng web hiệu quả trong thời gian ngắn Tuy nhiên, quá trình này không hề đơn giản Chính vì vậy, ExpressJS đã trở thành giải pháp cứu cánh cho họ.

ExpressJS giúp giảm 50% thời gian viết mã, đồng thời hỗ trợ các nhà phát triển xây dựng ứng dụng web hiệu quả Với nhiều tính năng đa dạng, ExpressJS tiết kiệm đáng kể công sức cho quá trình phát triển.

ExpressJS là một công cụ phát triển ứng dụng web dễ sử dụng nhờ vào sự hỗ trợ của JavaScript, ngôn ngữ lập trình dễ học cho người mới Điều này làm cho ExpressJS trở thành lựa chọn lý tưởng cho những ai bắt đầu sự nghiệp trong lĩnh vực phát triển web và đạt được thành công.

ExpressJS được xây dựng trên nền tảng Node.js, một kiến trúc hướng sự kiện cho phép xử lý hàng nghìn yêu cầu đồng thời, điều mà PHP không thể làm Node.js được tối ưu hóa để hỗ trợ các ứng dụng web thực, mang lại hiệu suất cao và khả năng mở rộng tốt.

Việc sử dụng tiền một cách hiệu quả để tối đa hóa lợi nhuận là điều quan trọng hàng đầu của doanh nghiệp ExpressJS, một ứng dụng web miễn phí và mã nguồn mở, là một lựa chọn tuyệt vời mà doanh nghiệp không nên bỏ qua.

A router is an object that serves as a distinct instance of both middleware and routes, enabling it to perform the functions of both.

- Chúng ta có thể gọi nó là một mini-application Các Application dùng ExpressJS làm core đề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ột arguments 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

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

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

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

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ác prefix

Ví dụ thứ nhất: router.all('*', requireAuthentication, loadUser);

Placing this route at the top requires all subsequent routes to undergo authentication, meaning users must be verified before performing any actions or tasks, such as loading user data The code snippet demonstrates this with `router.all('*', requireAuthentication)` followed by `router.all('*', loadUser )`.

Ví dụ thứ hai: router.all('/api/*', requireAuthentication)

Khác với ví dụ trước, trong trường hợp này, chúng ta sử dụng một prefix đã được xác định là /api/ thay vì sử dụng ký tự đại diện * Điều này có nghĩa là trước khi thực hiện các yêu cầu đến các route bên trong API, người dùng cần thực hiện thao tác xác thực requireAuthentication.

Router.METHOD() trong ExpressJS cung cấp chức năng Routing, cho phép chúng ta sử dụng các phương thức HTTP như GET, POST, PUT, và nhiều phương thức khác để xử lý yêu cầu từ phía người dùng.

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

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

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

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

/////////////////////////////////////////////////////// Để 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 to req.params[ ] = 1 ||'HEAD';

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

RESTful API là tiêu chuẩn thiết kế API cho ứng dụng web, giúp quản lý tài nguyên hiệu quả Tiêu chuẩn này tập trung vào các tài nguyên hệ thống như tệp văn bản, hình ảnh, âm thanh, video và dữ liệu động, với các trạng thái tài nguyên được định dạng và truyền tải qua giao thức HTTP.

ReactJS

React.js là một thư viện JavaScript đang phát triển mạnh mẽ trong xu hướng ứng dụng một trang (Single Page Application) Khác với các framework khác tập trung vào mô hình MVC hoàn chỉnh, React nổi bật với sự đơn giản và khả năng tích hợp dễ dàng với các thư viện JavaScript khác Trong khi AngularJS cho phép nhúng mã JavaScript vào mã HTML qua các thuộc tính như ng-model hay ng-repeat, React sử dụng JSX để nhúng mã HTML vào mã JavaScript, giúp việc lồng ghép các đoạn HTML trở nên dễ dàng và trực quan hơn Sự tích hợp giữa JavaScript và HTML trong JSX làm cho các component trở nên dễ hiểu hơn.

React là một thư viện UI mạnh mẽ với các thành phần tương tác cao và khả năng tái sử dụng vượt trội Được sử dụng trong sản xuất tại Facebook và Instagram, React cho phép render cả trên server và client, tạo ra sự kết nối linh hoạt Thư viện này so sánh sự thay đổi giữa các lần render, cập nhật DOM một cách tối ưu Với cơ chế one-way data binding, dữ liệu được truyền từ parent đến child qua props, giúp dễ dàng kiểm soát và sửa lỗi.

JSX là một ngôn ngữ cho phép viết mã HTML trong Javascript, mang lại nhiều lợi ích Đầu tiên, JSX nhanh hơn vì nó thực hiện tối ưu hóa khi biên dịch sang mã Javascript, giúp thời gian thực hiện nhanh hơn so với mã viết trực tiếp bằng Javascript Thứ hai, JSX an toàn hơn nhờ vào việc sử dụng kiểu statically-typed, nghĩa là mã được biên dịch trước khi chạy, tương tự như Java và C++.

Các lỗi sẽ được phát hiện ngay trong quá trình biên dịch, đồng thời tính năng gỡ lỗi cũng rất hiệu quả JSX kế thừa từ Javascript, giúp lập trình viên Javascript dễ dàng sử dụng.

Thẻ mở tag:

Thẻ đóng tag: Ở đây lưu ý tên của thẻ mở tag và đống tag phải giống nhau ví dụ :

Ngoài ra JSX cũng có SelfClosingElement:

Ví dụ:

Ví dụ trong một div element, ta định nghĩa một Class container thì viết là:

(vì class là keyword của Javascript) Hoặc for trong label element thì phải viết thành htmlfor,

React được xây dựng dựa trên các component thay vì sử dụng template như những framework khác Mỗi trang web trong React được tạo thành từ những thành phần nhỏ có thể tái sử dụng ở nhiều vị trí với các trạng thái hoặc thuộc tính khác nhau Các component có thể chứa lẫn nhau và mỗi component đều có trạng thái riêng, cho phép React tự động cập nhật khi có sự thay đổi Tất cả mọi thứ trong React đều là component, giúp dễ dàng bảo trì mã nguồn trong các dự án lớn Một component đơn giản chỉ cần một phương thức render, mặc dù còn nhiều phương thức khác nhưng render là phương thức chính.

Hình 5: Ví dụ về component

Props thực chất là viết tắt của Properties Props giống như các attribute của thẻ HTML

Props là cách để có thể truyền dữ liệu từ component cha xuống component con

Khi truyền dữ liệu qua props, component con chỉ có khả năng đọc mà không thể thay đổi dữ liệu, giúp đảm bảo rằng component luôn hiển thị cùng một đầu ra khi nhận cùng một giá trị đầu vào Điều này tạo điều kiện cho việc kiểm soát component trở nên dễ dàng hơn.

State là một đối tượng tích hợp trong React, dùng để lưu trữ dữ liệu hoặc thông tin liên quan đến Component Khi state trong một component thay đổi, component đó sẽ được render lại tự động.

Hình 6: Ví dụ về props và state

ReactJS là một thư viện JavaScript mạnh mẽ, sử dụng DOM ảo để tối ưu hóa hiệu suất Bằng cách chỉ cập nhật những thay đổi cần thiết trên DOM, ReactJS giúp giảm thiểu chi phí thao tác và cải thiện tốc độ ứng dụng Dưới đây là một ví dụ đơn giản về cách hoạt động của ReactJS.

ReactJS đơn giản hóa việc viết mã JavaScript với cú pháp JSX (Javascript mở rộng), cho phép kết hợp mã HTML và JavaScript một cách dễ dàng Người dùng có thể chèn các đoạn HTML trực tiếp vào hàm render mà không cần phải nối chuỗi Tính năng này của ReactJS giúp chuyển đổi HTML thành các hàm khởi tạo đối tượng HTML thông qua bộ biến đổi JSX, mang lại trải nghiệm lập trình thuận tiện và hiệu quả hơn.

ReactJS cung cấp nhiều công cụ phát triển hữu ích, trong đó ứng dụng mở rộng của Chrome dành cho ReactJS là một công cụ không thể thiếu Ứng dụng này giúp người dùng dễ dàng debug code và quan sát trực tiếp virtual DOM giống như khi xem cây DOM thông thường.

Render tầng server là một giải pháp quan trọng cho các ứng dụng đơn trang, giúp tối ưu hóa SEO và thời gian tải trang Khi toàn bộ quá trình xây dựng và hiển thị trang diễn ra ở client, người dùng sẽ phải chờ đợi lâu để trang được khởi tạo và hiển thị, điều này gây ra trải nghiệm chậm chạp Hơn nữa, nếu người dùng vô hiệu hóa Javascript, trang sẽ không hoạt động ReactJS, với khả năng render cả ở trình duyệt và thông qua các chuỗi HTML do server cung cấp, giúp giải quyết những vấn đề này một cách hiệu quả.

Làm việc với kiểm thử giao diện trở nên đơn giản nhờ vào việc virtual DOM được triển khai hoàn toàn bằng JavaScript, giúp việc viết các test case trở nên dễ dàng hơn.

 Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi.

Mặc dù ReactJS là một thư viện rất mạnh mẽ và được sử dụng rộng rãi, nhưng cũng có những nhược điểm cần xem xét:

Khả năng học React có thể gặp khó khăn đối với người mới, vì họ cần thời gian để nắm vững các khái niệm cơ bản như component, state, props, JSX và Redux Điều này tạo ra một đường cong học tập đáng kể cho những ai bắt đầu với React.

Khi ứng dụng phát triển và trở nên phức tạp, việc quản lý trạng thái trở nên khó khăn hơn Mặc dù React cung cấp local state, nhưng việc duy trì và quản lý trạng thái giữa nhiều component vẫn là một thách thức lớn.

Mã boilerplate, hay còn gọi là mã thiết lập cấu hình cơ bản, thường bị chỉ trích vì làm tăng độ phức tạp của mã nguồn mà không mang lại nhiều giá trị thay đổi.

NodeJS

NodeJS là môi trường chạy mã nguồn mở, đa nền tảng, lý tưởng cho việc phát triển ứng dụng web bên ngoài trình duyệt Được Ryan Dahl phát triển vào năm 2009, NodeJS nổi bật với mô hình hướng sự kiện, khả năng Non-blocking IO và xử lý bất đồng bộ, mang lại hiệu suất cao cho các ứng dụng sử dụng nhiều dữ liệu.

NodeJS cung cấp cho lập trình viên khả năng phát triển web một cách độc lập và nhanh chóng, nhờ vào việc nó là một nền tảng (platform) chứ không phải chỉ là một framework.

Một số nền tảng hệ điều hành máy tính hỗ trợ NodeJS đó là Windows, Linux hay là macOS

Tốc độ vượt trội: Được phát triển dựa trên engine JavaScript V8 của Google Chrome, các thư viện của nó có khả năng thực thi mã nhanh chóng.

NPM: Với hơn 50,000 package khác nhau, các developer có thể dễ dàng lựa chọn bất kỳ tính năng nào để xây dựng cho ứng dụng của mình

Lập trình không đồng bộ trong Node.JS cho phép các API hoạt động theo cơ chế không chặn, giúp server không cần chờ đợi dữ liệu trả về từ API.

Node.JS giúp tiết kiệm thời gian xử lý file khi upload âm thanh hoặc video nhờ vào việc không có buffering, mà chỉ xuất dữ liệu theo từng phần (chunk) Với mô hình đơn luồng và vòng lặp sự kiện, Node.JS cho phép các ứng dụng xử lý số lượng request lớn hơn nhiều so với các server truyền thống như Apache HTTP Server.

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

Module trong Node.js là bộ thư viện JavaScript tích hợp sẵn, cung cấp các chức năng cơ bản cho ứng dụng web Một số module cốt lõi quan trọng bao gồm http, util, fs, url, querystring, stream và zlib Để sử dụng các module này, bạn cần gọi chúng thông qua hàm require().

Bảng điều khiển (console) là công cụ cho phép bạn xuất thông tin ra stdout và stderr, hoạt động tương tự như bảng điều khiển cơ bản của JavaScript trên các trình duyệt web.

Cluster là một module hỗ trợ lập trình viên thực hiện đa luồng bằng cách tạo ra các quy trình con, cho phép chúng chạy đồng thời trên cùng một cổng máy chủ.

Global variables in Node.js, also known as global variables, are accessible across all modules Common examples include dirname, filename, exports, module, and require.

Error handling in Node.js involves a robust mechanism for reporting issues during command execution Common types of errors encountered include Standard JavaScript errors, System errors, User-specific errors, and Assertion errors.

Streaming là công cụ cho phép đọc và viết dữ liệu liên tục, được chia thành bốn loại: Readable (dữ liệu có thể đọc), Writable (dữ liệu có thể viết), Duplex (dữ liệu có thể đọc và viết) và Transform (dữ liệu có thể thao tác trong quá trình đọc hoặc viết) Thông thường, Buffer được sử dụng để xử lý các stream chứa dữ liệu nhị phân.

Domain là một module giúp ngăn chặn các lỗi chưa được xử lý trong quá trình vận hành, với hai phương thức chính là Internal Binding (thực thi lệnh trong phương thức run) và External Binding (được thêm trực tiếp vào domain qua phương thức add).

DNS là một module giúp kết nối đến máy chủ DNS thông qua phương thức dns.resolve() và cho phép phân giải tên miền mà không cần kết nối mạng nhờ vào phương thức dns.lookup().

Debugger là công cụ gỡ lỗi cơ bản, tích hợp sẵn trong Node.js Để sử dụng, bạn chỉ cần thêm từ khóa 'inspect' trước tên file JavaScript.

4.4 Ưu điểm của NodeJS Ưu điểm đầu tiên của việc sử dụng NodeJS đó là bạn sẽ đạt được tốc độ cực kỳ nhanh và IO hướng sự kiện không đồng bộ giúp xử lý nhiều yêu cầu cùng một thời điểm, nhờ vậy mà website của bạn có thể đáp ứng được số lượng khách truy cập khổng lồ theo thời gian thực Tiếp theo, NodeJS có cộng đồng lập trình viên sử dụng lớn mạnh, và có nhiều mã nguồn được chia sẻ trên GitHub Nhờ vậy mà số lượng module hiện tại hỗ trợ với NodeJS là tương đối dồi dào Cuối cùng, bạn có thể chia sẻ một đoạn mã với cả máy chủ lẫn máy khách, và NodeJS cũng tương thích được với rất nhiều hệ điều hành máy tính phổ biến hiện nay.

CÁC PHẦN MỀM VÀ CÔNG CỤ

Postman

Postman là công cụ hỗ trợ người dùng thao tác với API, đặc biệt là REST, và được ưa chuộng trong thử nghiệm API Nhờ vào Postman, lập trình viên có thể thực hiện các cuộc gọi đến Rest API mà không cần viết mã, giúp tiết kiệm thời gian và công sức trong quá trình phát triển ứng dụng.

Postman hỗ trợ tất cả các phương thức HTTP như POST, PUT, DELETE, PATCH và GET Bên cạnh đó, công cụ này cho phép lập trình viên lưu lại lịch sử các yêu cầu, mang lại sự tiện lợi cho việc sử dụng lại sau này.

Hình 7: Giao diện của Postman

Các chức năng cơ bản:

 Cho phép gửi HTTP Request với các method GET, POST, PUT, DELETE

 Cho phép post dữ liệu dưới dạng form (key-value), text, json

 Hiện kết quả trả về dạng text, hình ảnh, XML, JSON

 Cho phép thay đổi header của các request.

- New – tạo request, collection hoặc enviroment mới

- Import – import collection hoặc environment Có các tuỳ chọn để import từ file, folder, link hoặc paste từ text thuần

- Runner – Kiểm tra tự động hóa có thể được thực hiện thông qua Runner cả collection

- Open New – Mở một tab mới, cửa sổ Postman hoặc cửa sổ Runner My Workspace – Tạo khu vực làm việc riêng hoặc cho một nhóm

- Invite – Cộng tác với nhiều thành viên bằng việc mời các thành viên

- History – Các request đã thực hiện mà bạn đã thực hiện sẽ được hiển thị trong History Giúp bạn có thể lần theo các hành động bạn đã làm

Tổ chức bộ thử nghiệm của bạn dễ dàng hơn với việc tạo các collection Mỗi collection có thể bao gồm nhiều thư mục con và yêu cầu khác nhau, cho phép bạn quản lý một cách linh hoạt Ngoài ra, các request hoặc thư mục có thể được trùng lặp, giúp tối ưu hóa quy trình làm việc của bạn.

- Tab Request – Hiển thị tiêu đề của request mà bạn đang làm việc Mặc định

“Untitled Request” sẽ được hiển thị cho các request không có tiêu đề

HTTP Request là một phần quan trọng trong giao tiếp giữa client và server, cho phép gửi và nhận dữ liệu Khi bạn nhấp vào, danh sách thả xuống sẽ hiển thị các loại yêu cầu khác nhau như GET, POST, COPY, DELETE, v.v Trong thực tế, GET và POST là hai yêu cầu phổ biến nhất được sử dụng trong các ứng dụng web.

- Request URL – Còn được gọi là điểm cuối (endpoint), đây là nơi bạn sẽ xác định liên kết đến nơi API sẽ giao tiếp

- Save – Nếu có thay đổi đối với request, nhấp vào Save là bắt buộc để những thay đổi mới sẽ không bị mất hoặc bị ghi đè

- Params – Đây là nơi bạn sẽ viết các tham số cần thiết cho một request, ví dụ như các cặp key – value

- Authorization – Để truy cập API, cần được cấp quyền Nó có thể ở dạng tên người dùng và mật khẩu, bearer token, v.v

- Headers – Bạn có thể thiết lập các header như nội dung kiểu JSON tùy theo cách tổ chức của bạn

- Body – Đây là nơi chúng ta có thể tùy chỉnh chi tiết trong request thường được sử dụng trong request POST

Script tiền yêu cầu (pre-request script) là các đoạn mã được thực thi trước khi gửi yêu cầu Chúng thường được sử dụng để thiết lập môi trường, đảm bảo rằng các kiểm tra được thực hiện trong điều kiện chính xác.

Các bài kiểm tra là các script được thực hiện trong quá trình xử lý yêu cầu Việc thiết lập các điểm kiểm tra để xác minh trạng thái và đảm bảo dữ liệu nhận được đúng như mong đợi là rất quan trọng Những thử nghiệm này giúp đảm bảo tính chính xác và độ tin cậy của hệ thống.

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

Postman có 3 thành phần chính như sau:

- Settings (bao gồm các thông tin về cài đặt chung):

 Các thông tin về Account có mục đích để login, logout và sync data

 Settings tùy chỉnh như: shortcut, format, themes,

 Import data từ ngoài vào

- Collections: Có vai trò lưu trữ thông tin của các API dựa theo folder hoặc theo thời gian

API content hỗ trợ hiển thị chi tiết về API và các phần hỗ trợ cần thiết để thực hiện việc kiểm thử API Đây là một trong những nhiệm vụ quan trọng mà tester thường xuyên phải thực hiện Trong API content, có ba thành phần chính cần lưu ý.

Môi trường lập trình thường chứa thông tin liên quan đến các yếu tố môi trường Khi có các thành phần này, lập trình viên có thể dễ dàng chuyển đổi sang môi trường cần thử nghiệm mà không cần phải thay đổi URL cho từng yêu cầu.

Request: Đây là phần có chứa các thông tin chính của API

Response: Bao gồm những thông tin trả về sau thực hiện Send Request.

Postman cho phép người dùng tạo bộ sưu tập cho các lệnh gọi API, giúp tổ chức các bộ thử nghiệm hiệu quả Mỗi bộ sưu tập có thể chứa các thư mục con và nhiều yêu cầu, tạo điều kiện thuận lợi cho việc quản lý và truy cập.

Collaboration – Collections và environment có thể được import hoặc export giúp chia sẻ tệp dễ dàng

API Testing – Test trạng thái phản hồi HTTP

Gỡ lỗi – Bảng điều khiển Postman giúp kiểm tra dữ liệu nào đã được truy xuất giúp dễ dàng gỡ lỗi kiểm tra.

Git

Git là một hệ thống quản lý phiên bản phân tán (DVCS) ra đời vào năm 2005 và hiện nay rất phổ biến Khác với các hệ thống quản lý phiên bản tập trung, nơi mã nguồn và lịch sử thay đổi chỉ lưu trữ trên một máy chủ, Git cho phép các máy khách sao chép toàn bộ kho mã nguồn Điều này có nghĩa là nếu máy chủ ngừng hoạt động, bạn có thể khôi phục hệ thống từ bất kỳ máy khách nào, vì mỗi lần checkout là một bản sao đầy đủ của dữ liệu kho chứa.

Hình 8: Cách thức hoạt động của Git

 Dễ dàng sử dụng, thao tác nhanh gọn và an toàn

Trong các dự án phát triển phần mềm, sự hợp tác của nhiều lập trình viên diễn ra song song, vì vậy việc sử dụng hệ thống quản lý phiên bản mã nguồn như Git là rất quan trọng để ngăn chặn xung đột mã.

Lịch sử ghi chép là rất quan trọng trong quản lý dự án, vì các yêu cầu thường xuyên thay đổi và cập nhật Hệ thống kiểm soát phiên bản giúp lập trình viên có khả năng khôi phục và quay lại các phiên bản cũ hơn của mã nguồn, đảm bảo tính ổn định và hiệu quả trong quá trình phát triển.

Phân nhánh trong quản lý mã nguồn trở nên đơn giản hơn khi nhiều dự án chạy song song với cùng một cơ sở code Việc kết hợp các phân nhánh giúp quy trình lập trình nhóm trở nên dễ dàng và hiệu quả hơn.

Mã nguồn mở cho phép phát triển phi tập trung, cho phép người dùng dễ dàng sao chép mã nguồn và tạo ra các phiên bản hoặc nhánh khác từ kho lưu trữ, giúp họ làm việc linh hoạt ở bất kỳ đâu và vào bất kỳ thời điểm nào.

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

Workflow của Git được chia thành ba trạng thái (status):

– Thư mục làm việc (Working directory) – Thay đổi các tệp trong thư mục làm việc hiện tại của bạn

– Khu vực tổ chức (Index) – Sắp xếp các tệp và thêm snapshot (ảnh chụp nhanh) các thay đổi vào index của bạn

Thư mục Git là kho lưu trữ (repository) nơi lưu trữ các snapshot vĩnh viễn Bạn có thể thực hiện các thay đổi trên bất kỳ phiên bản hiện có nào, sau đó tiến hành stage thư mục và commit để lưu lại các thay đổi.

Hình 9: Quy trình làm việc trên Git

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

Mô tả hoạt động

Trang web cho phép người dùng đăng nhập và đăng ký tài khoản, từ đó họ có thể tạo bài viết với tiêu đề và nội dung Ngoài ra, trang web còn cung cấp các chức năng như chỉnh sửa, xóa bài viết, phân quyền người dùng, theo dõi thời gian đã đăng và đăng xuất, cũng như hiển thị danh sách bài viết theo người đăng.

Thiết kế database

- Users gồm các trường: _id, username, password, fullname, role.

- News gồm các trường: _id, title, content, date_submited, author.

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

Khi mở trang web lên ta sẽ có màn hình chính để hiển thị các bài báo hoặc login để tiến hành đăng bài

Upon logging in, the form sends an API request to the server with the username and password to verify against the database The server then returns a token associated with the user's ID, which is subsequently stored in local storage for future server verification.

Hình 10: Giao diện đăng nhập Đăng nhập thành công, server sẽ trả lại thông tin người đăng nhập và web hiển thị ở màn hình chính

Hình 11: Màn hình chính sau khi đăng nhập

3.2 Thêm mới user Đăng nhập bằng tài khoản có role admin sẽ có thêm chức năng tạo mới user Khi tạo mới sẽ gọi đến API tạo mới user, validate dữ liệu bên server và lưu lại vào collection Users

Hình 12: Modal thêm mới user

Người dùng sẽ soạn thảo bài viết bao gồm tiêu đề và nội dung, sau đó khi nhấn nút đăng, hệ thống sẽ gọi API từ server để xử lý dữ liệu Cuối cùng, thông tin bài viết sẽ được lưu trữ vào collection News.

Hình 13: Màn hình thêm mới bài viết

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

Khi nhấn vào nút, hệ thống sẽ thực hiện chức năng tương ứng, lấy _id của bài viết và cho phép sửa hoặc xóa bài viết đó trong cơ sở dữ liệu Trước khi thực hiện, server sẽ kiểm tra xem người thực hiện có phải là người đã đăng bài hay không.

KẾT QUẢ ĐẠT ĐƯỢC

Trong quá trình nghiên cứu và xây dựng website trong một tuần, dưới sự hướng dẫn tận tình của các mentor trong công ty, tôi đã hoàn thành trang web tin tức cơ bản Qua đó, tôi đã đáp ứng đầy đủ các yêu cầu của đồ án tốt nghiệp mà mình đã chọn.

- Hiểu về các khái niệm của MongoDB, ExpressJS, ReactJS và NodeJS

- Biết cách cài đặt và triển khai bộ công cụ MERN Stack

- Tận dụng các thế mạnh của bộ công cụ MERN Stack mang lại

- Xây dựng được một trang web bán hàng với những chức năng cơ bản và quản lý trang web giúp tối ưu hoá lợi nhuận cho doanh nghiệp

- Biết cách sử dụng framework Express

- Viết được các API cơ bản - Hiểu và biết cách ứng dụng của thư viện JWT (json web token) trong việc bảo mật trang web

- Biết cách sử dụng các thư viện như gửi mail, gửi mã OTP qua số điện thoại - Biết cách lưu trữ dữ liệu trên MongoDB

- Biết cách sử dụng Framework React và cài đặt các thư viện, tích hợp API, sử dụngHook trong React.

Ngày đăng: 14/12/2024, 15:53

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w