Lộ trình học MERN Stack – Cách tìm hiểu MERN và trở thành nhà phát triển Full-Stack

Khi đọc xong, bạn sẽ hiểu rõ về những gì Stack MERN đòi hỏi, các công nghệ thành phần của nó và các tài nguyên khác nhau để học tập. Bạn cũng sẽ có 10 ý tưởng dự án mà bạn có thể phát triển và giới thiệu trong danh mục đầu tư của mình.

Chúng ta hãy xem tổng quan ngắn gọn về từng phần của Stack MERN trông như thế nào:

Giao diện người dùng (Phản ứng)

Giao diện người dùng của một trang web giống như khu vực ăn uống của một nhà hàng. Đó là mọi thứ bạn nhìn thấy và tương tác trực tiếp trên trang web – bố cục, thiết kế, nút và văn bản.

Ví dụ : Khi bạn truy cập một trang web và thấy một trang chủ đẹp mắt, tương tác với các menu hoặc điền vào biểu mẫu, bạn đang trải nghiệm giao diện người dùng.

Phần cuối (Node.js)

Phần phụ trợ giống như nhà bếp trong một nhà hàng. Đó là nơi diễn ra tất cả các công việc hậu trường. Nó bao gồm máy chủ, ứng dụng và cơ sở dữ liệu hoạt động cùng nhau để xử lý thông tin bạn nhìn thấy trên giao diện người dùng.

Ví dụ : Khi bạn đặt món ăn (gửi biểu mẫu trên trang web), nhà bếp (phụ trợ) sẽ xử lý đơn đặt hàng (dữ liệu) và chuẩn bị bữa ăn cho bạn (thông tin hoặc dịch vụ bạn yêu cầu).

Cơ sở dữ liệu (MongoDB)

Cơ sở dữ liệu trong phát triển web tương tự như kho đựng thức ăn hoặc kho lưu trữ của nhà hàng, nơi lưu giữ tất cả các thành phần (dữ liệu). Nó lưu trữ và quản lý tất cả thông tin cần thiết cho trang web, như hồ sơ người dùng, nội dung và dữ liệu khác.

Ví dụ : Trong cửa hàng trực tuyến, cơ sở dữ liệu lưu trữ thông tin sản phẩm, giá cả, đánh giá của người dùng và thông tin chi tiết về khách hàng.

API REST (Express)

API REST giống như những người phục vụ trong nhà hàng. Họ là người đưa tin hoặc trung gian cho giao diện người dùng và phụ trợ. Họ nhận các yêu cầu (như đơn đặt hàng) từ giao diện người dùng (khách hàng), tìm nạp hoặc cập nhật dữ liệu trong phần phụ trợ (nhà bếp) và sau đó trả về phản hồi (đơn đặt hàng đã chuẩn bị).

Các thuật ngữ POST, PUT, DELETE và GET là các loại yêu cầu được sử dụng trong REST API:

• POST : Dùng để tạo dữ liệu mới. Giống như đặt một đơn hàng mới trong nhà hàng.
• PUT : Dùng để cập nhật dữ liệu hiện có. Tương tự như thay đổi đơn hàng bạn đã đặt.
• DELETE : Dùng để xóa dữ liệu. Giống như hủy đơn hàng.
• GET : Dùng để lấy dữ liệu. Có thể so sánh với việc hỏi về thực đơn hoặc kiểm tra trạng thái đơn hàng của bạn.

Lộ trình Stack MERN

BƯỚC 1: Tìm hiểu số lượng HTML, JavaScript và CSS phù hợp

Stack MERN sử dụng rất nhiều JavaScript, vì vậy đây là bước đầu tiên để tìm hiểu. Trong phần này, bạn sẽ xem xét những nội dung chính bạn sẽ sử dụng hàng ngày khi tạo các ứng dụng MERN đầy đủ.

Hiểu JavaScript cũng giống như biết đúng lượng nguyên liệu cần thiết cho một công thức nấu ăn. Bạn không cần phải nắm vững mọi thứ cùng một lúc, chỉ cần những nguyên liệu thiết yếu để làm cho món ăn cụ thể (hoặc dự án web của bạn) trở nên sống động.

Biến

Các biến trong JavaScript giống như những chiếc lọ được dán nhãn trong nhà bếp của bạn. Bạn có thể lưu trữ mọi thứ trong đó (như số, văn bản) và sử dụng những chiếc lọ này sau này khi nấu ăn (hoặc viết mã).

Ví dụ : Một biến lưu trữ tên người dùng, để sau này bạn có thể sử dụng nó để nói "Xin chào, [Tên]!"

Chức năng

Các chức năng giống như công thức nấu ăn trong một cuốn sách dạy nấu ăn. Chúng là những bộ hướng dẫn thực hiện một nhiệm vụ cụ thể. Bạn có thể sử dụng lại các công thức này bất cứ khi nào bạn cần thực hiện lại tác vụ đó.

Ví dụ : Hàm tính tổng giá của các mặt hàng trong giỏ hàng.

Đối tượng & Mảng

Các đối tượng giống như thẻ thông tin chứa thông tin chi tiết về một thứ gì đó (như thẻ liên hệ) và mảng giống như danh sách.

Ví dụ về Đối tượng : Thẻ chứa thông tin của người dùng (tên, tuổi, email).
Ví dụ về một mảng : Danh sách tất cả các đầu sách yêu thích của người dùng.

Câu lệnh if/else, Câu lệnh chuyển đổi

Đây giống như quá trình ra quyết định. Câu lệnh if/else giống như việc chọn mặc gì dựa trên thời tiết và câu lệnh chuyển đổi giống như một quyết định phức tạp hơn, như chọn món để nấu dựa trên nhiều nguyên liệu bạn có.

Ví dụ : Trời mưa (nếu) thì mang ô (nếu không), mang kính râm.

Lệnh gọi lại/Lời hứa/Đang chờ không đồng bộ

Đây là những cách để xử lý các công việc mất thời gian, chẳng hạn như gọi đồ ăn và chờ đợi. Cuộc gọi lại giống như việc gọi điện cho một người bạn để làm điều gì đó khi họ rảnh. Lời hứa giống như người bạn của bạn hứa sẽ thực hiện điều đó. Async-await giống như lập kế hoạch thực hiện lần lượt các nhiệm vụ một cách có tổ chức.

Ví dụ : Gọi cà phê (một nhiệm vụ) và đợi lấy trước khi rời khỏi quán cà phê (đảm bảo trật tự hành động).

ECMAScript (Chuỗi mẫu, Phân công hủy, Toán tử trải rộng, Tham số mặc định, v.v.)

Đây là những công cụ và phím tắt nâng cao trong JavaScript giúp việc viết mã dễ dàng và rõ ràng hơn. Nó giống như việc bạn có một chiếc máy xay thực phẩm trong nhà bếp giúp việc cắt và trộn nhanh hơn và hiệu quả hơn.

Ví dụ : Tự động tạo tin nhắn chào mừng như "Xin chào, [Tên]!" mà không cần nối các từ và biến theo cách thủ công.

TypeScript

TypeScript giống như JavaScript nhưng có nhiều quy tắc hơn để tổ chức mã của bạn (như một cuốn sách công thức chi tiết hơn). Nó giúp quản lý các dự án lớn hơn bằng cách thêm các loại vào mã của bạn, đảm bảo bạn không trộn lẫn các thành phần không tương thích. Hướng dẫn này dạy cho bạn những điều cơ bản về TypeScript.

Ví dụ : Chỉ định rằng một hàm chỉ được lấy một số làm đầu vào, không phải văn bản hay bất cứ thứ gì khác.

BƯỚC 2: Làm quen với React

Khi bạn đã cảm nhận được về JavaScript, đã đến lúc dấn thân vào thế giới phát triển giao diện người dùng tuyệt vời.

React.js là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng, đặc biệt được biết đến với tính hiệu quả trong việc hiển thị các trang web tương tác, động. Nó cho phép các nhà phát triển tạo các ứng dụng web lớn có thể thay đổi dữ liệu mà không cần tải lại trang, mang lại trải nghiệm mượt mà hơn cho người dùng.

Dưới đây là danh sách những điều phổ biến bạn muốn biết khi làm việc với React.

Các thành phần

Hãy coi các thành phần như các khối LEGO riêng lẻ trong một mô hình LEGO lớn. Mỗi khối là một phần nhỏ, có thể tái sử dụng mà bạn có thể sử dụng để xây dựng các phần khác nhau của ứng dụng web của mình.

Ví dụ : Thành phần 'nút' trong trang web có thể được sử dụng ở nhiều nơi, chẳng hạn như để gửi biểu mẫu hoặc đóng cửa sổ bật lên.

JSX (JavaScript XML)

JSX cho phép bạn viết mã thiết kế trang web (như HTML) bên trong mã JavaScript của mình. Nó giống như việc viết công thức và hướng dẫn nấu ăn vào một nơi để tham khảo dễ dàng hơn.

Ví dụ : Viết một đoạn mã JSX bao gồm cả các thẻ giống JavaScript và HTML để tạo biểu mẫu đăng nhập cho người dùng.

Đạo cụ (Thuộc tính)

Đạo cụ giống như những hướng dẫn hoặc cài đặt mà bạn chuyển đến các khối (thành phần) LEGO của mình để cho chúng biết chúng trông như thế nào hoặc hoạt động như thế nào.

Ví dụ : Truyền prop 'color' cho thành phần 'button' để làm cho nó có màu đỏ hoặc xanh tùy theo tình huống.

Tình trạng

Trạng thái giống như một cuốn sổ ghi chép cá nhân cho từng thành phần, nơi nó theo dõi thông tin của chính nó, chẳng hạn như liệu một nút có được nhấp vào hay không. Đây là khóa học về quản lý trạng thái trong React .

Ví dụ : Nút 'thích' để theo dõi xem nó đã được nhấp (thích) hay chưa.

móc

Hook là công cụ đặc biệt trong React cho phép bạn thêm các tính năng như trạng thái vào các thành phần của mình mà không cần sử dụng các cấu trúc mã phức tạp.

Ví dụ : Sử dụng hook useState để theo dõi bộ đếm trong một thành phần.

Xử lý sự kiện

Đây là cách bạn yêu cầu một thành phần thực hiện điều gì đó khi người dùng tương tác với nó, như nhấp vào nút hoặc nhập văn bản vào biểu mẫu.

Ví dụ : Thiết lập trình xử lý sự kiện để khi người dùng nhấp vào nút 'gửi', nó sẽ gửi thông tin của họ đến máy chủ.

Hiển thị có điều kiện

Điều này giống như có một bức tranh thần kỳ có thể thay đổi hình ảnh dựa trên những điều kiện nhất định. Trong React, bạn có thể hiển thị các thành phần khác nhau dựa trên các điều kiện khác nhau .

Ví dụ : Hiển thị nút 'đăng nhập' nếu người dùng chưa đăng nhập và nút 'đăng xuất' nếu có.

Danh sách và Chìa khóa

Khóa giống như thẻ tên cho các mục trong danh sách. Chúng giúp React theo dõi những mục nào mới, đã thay đổi hoặc bị xóa.

Ví dụ : Hiển thị danh sách tin nhắn trong ứng dụng trò chuyện, trong đó mỗi tin nhắn có một khóa duy nhất.

API ngữ cảnh

API ngữ cảnh là một cách để chia sẻ thông tin (như cài đặt chủ đề hoặc dữ liệu người dùng) trên nhiều thành phần mà không cần chuyển thông tin qua từng cấp độ một cách thủ công.

Ví dụ : Sử dụng API ngữ cảnh để chia sẻ thông tin của người dùng đã đăng nhập hiện tại trên các thành phần khác nhau trong ứng dụng web.

Fragment

Phân đoạn cho phép bạn nhóm một số thành phần hoặc thành phần lại với nhau mà không cần thêm lớp bổ sung vào trang web. Nó giống như đặt nhiều mảnh LEGO lên một tấm đế mà tấm đế không phải là một phần của mô hình cuối cùng.

Ví dụ : Nhóm một danh sách các mục lại với nhau trong một menu mà không cần thêm các trình bao bọc hoặc div bổ sung xung quanh chúng.

BƯỚC 3: Hiểu API REST và cách máy chủ phụ trợ hoạt động bằng Express/Node

Mỗi giao diện người dùng cần một cách để lưu trữ và truy xuất dữ liệu cần thiết để làm cho giao diện người dùng hoạt động. Đây là nơi phụ trợ của chúng tôi xuất hiện.

Trong Stack MERN, phần phụ trợ bao gồm 3 bit chính: Express, máy chủ Node.js và cơ sở dữ liệu. Chúng tôi sẽ sớm đề cập đến cơ sở dữ liệu, hiện tại chúng tôi sẽ tập trung vào các phần Express/Node của Stack MERN vì chúng có liên quan chặt chẽ với nhau.

Express.js là một khung nhẹ, linh hoạt dành cho Node.js, được thiết kế để xây dựng các ứng dụng web và API REST một cách dễ dàng và hiệu quả. Node.js là thời gian chạy JavaScript mạnh mẽ cho phép phát triển các ứng dụng phía máy chủ có thể mở rộng, khiến bộ đôi này trở thành lựa chọn phổ biến để phát triển phụ trợ.

Node.js: Nền tảng để xây dựng ứng dụng web

Hãy coi Node.js như nền tảng để xây dựng một tòa nhà hiện đại. Đó là một nền tảng cho phép bạn xây dựng các ứng dụng web, tương tự như cách bạn sử dụng một bộ công cụ và vật liệu cơ bản để bắt đầu xây một ngôi nhà. Bạn có thể nghe thấy điều này được gọi là "phụ trợ".  

Ví dụ : Xây dựng ứng dụng trò chuyện trong đó nhiều người dùng có thể gửi tin nhắn theo thời gian thực.

Express: Hợp lý hóa quá trình phát triển API REST

Express là một công cụ trợ giúp cho Node.js. Nó giống như việc có một bộ công cụ dựng sẵn giúp việc xây dựng một số phần nhất định trong ngôi nhà của bạn trở nên dễ dàng và nhanh chóng hơn, cung cấp các mẫu và lối tắt để bạn không phải bắt đầu lại từ đầu.

Ví dụ : Sử dụng Express để thiết lập nhanh các tuyến đường cho trang web, như tuyến đường đến trang liên hệ hoặc danh mục sản phẩm.

Mô-đun và gói: Thành phần làm sẵn

Trong Node.js, mô-đun giống như các thành phần hoặc phần được tạo sẵn của một ngôi nhà (như phòng tắm hoặc bộ bếp) mà bạn có thể chỉ cần chọn và thêm vào dự án xây dựng của mình.

Ví dụ : Thêm mô-đun 'ngày-giờ' để hiển thị ngày và giờ hiện tại trên ứng dụng web của bạn.

Trình quản lý gói nút (NPM): Kho công cụ và vật liệu

NPM hoạt động giống như một nhà kho rộng lớn, nơi bạn có thể tìm thấy tất cả các loại công cụ và vật liệu (mô-đun) mà bạn có thể cần. Đây là nơi tập trung để có được các tài nguyên bổ sung nhằm xây dựng các ứng dụng web của bạn.

Ví dụ : Cài đặt 'body-parser' từ npm để xử lý dữ liệu JSON trong ứng dụng web của bạn.

Định tuyến: Chỉ đạo lưu lượng truy cập web

Định tuyến trong Express giống như việc thiết lập các con đường và lối đi trong một khu nhà ở. Đó là việc hướng luồng lưu lượng truy cập (dữ liệu và yêu cầu của người dùng) đến các phần khác nhau trong ứng dụng web của bạn.

Ví dụ : Tạo lộ trình trong cửa hàng trực tuyến, như /productsdanh sách sản phẩm và /products/:idchi tiết từng sản phẩm.

Middleware: Các lớp chức năng bổ sung

Middleware trong Express có thể được coi là các lớp hoặc dịch vụ bổ sung trong tòa nhà của bạn, như hệ thống an ninh, hệ thống ống nước hoặc điện. Họ thêm các chức năng cụ thể vào ứng dụng web của bạn.

Ví dụ : Thêm phần mềm trung gian 'cookie-parser' để xử lý cookie trong ứng dụng web của bạn.

Yêu cầu và phản hồi: Kênh liên lạc

Yêu cầu và phản hồi trong Express giống như gửi và nhận thư hoặc tin nhắn. Chúng là cách ứng dụng web của bạn giao tiếp với người dùng, gửi dữ liệu cho họ hoặc nhận thông tin đầu vào của họ.

Ví dụ : Ứng dụng của bạn nhận được yêu cầu đăng nhập (yêu cầu) của người dùng và sau đó gửi lại thông báo xác nhận (phản hồi).

Biến môi trường: Không gian lưu trữ an toàn

Hãy coi các biến môi trường như không gian lưu trữ an toàn hoặc két an toàn trong tòa nhà của bạn. Chúng được sử dụng để lưu trữ thông tin nhạy cảm như mật khẩu hoặc cài đặt cá nhân, giữ chúng an toàn và tách biệt khỏi cấu trúc chính.

Ví dụ : Lưu trữ chuỗi kết nối cơ sở dữ liệu trong một biến môi trường để giữ an toàn.

An ninh: Các biện pháp bảo vệ tòa nhà

Trong bối cảnh ứng dụng web, bảo mật là xây dựng các biện pháp bảo vệ cho dự án của bạn. Nó giống như lắp đặt ổ khóa, hệ thống an ninh và các biện pháp an toàn phòng cháy chữa cháy trong một tòa nhà để bảo vệ nó khỏi các mối đe dọa khác nhau.

Ví dụ : Triển khai HTTPS để bảo mật việc truyền dữ liệu và sử dụng JWT (JSON Web Tokens) để xác thực người dùng nhằm bảo vệ dữ liệu người dùng.

BƯỚC 4: Lưu trữ dữ liệu với MongoDB và Mongoose

MongoDB là cơ sở dữ liệu NoSQL cung cấp tính linh hoạt và khả năng mở rộng cao để lưu trữ và quản lý dữ liệu, khiến nó trở nên lý tưởng để xử lý khối lượng lớn và các loại dữ liệu đa dạng.

Mongoose là thư viện Mô hình hóa dữ liệu đối tượng (ODM) cho MongoDB, cung cấp giải pháp dựa trên lược đồ đơn giản để mô hình hóa dữ liệu ứng dụng, tăng cường tương tác cơ sở dữ liệu với các tính năng và xác thực hữu ích.

MongoDB: Cơ sở dữ liệu NoSQL

MongoDB là một loại cơ sở dữ liệu lưu trữ dữ liệu ở định dạng linh hoạt, giống JSON. Điều này làm cho nó khác với cơ sở dữ liệu truyền thống sử dụng bảng và hàng. Thật tuyệt vời khi xử lý khối lượng dữ liệu lớn và có khả năng mở rộng rất cao.

Ví dụ : Sử dụng MongoDB để lưu trữ hồ sơ người dùng trong đó mỗi hồ sơ có thể có các trường khác nhau.

Bộ sưu tập và tài liệu

Trong MongoDB, dữ liệu được lưu trữ trong các 'bộ sưu tập', tương tự như các bảng trong cơ sở dữ liệu quan hệ. Bên trong những bộ sưu tập này, dữ liệu được lưu trữ trong 'tài liệu'. Hãy coi tài liệu như một bản ghi duy nhất trong bộ sưu tập của bạn, giống như một mục trong nhật ký hoặc một liên hệ trong sổ địa chỉ.

Ví dụ : Bộ sưu tập 'người dùng' với mỗi tài liệu đại diện cho một người dùng với các chi tiết như tên và email.

Mongoose: Công cụ mô hình hóa đối tượng MongoDB

Mongoose là một thư viện dành cho Node.js giúp tương tác với MongoDB dễ dàng hơn. Nó cung cấp giải pháp đơn giản, dựa trên lược đồ để lập mô hình dữ liệu ứng dụng của bạn. Nó giống như có một trợ lý cá nhân giúp quản lý hoạt động giao tiếp giữa ứng dụng của bạn và MongoDB.

Ví dụ : Sử dụng Mongoose để dễ dàng thêm, truy xuất và quản lý dữ liệu người dùng trong cơ sở dữ liệu MongoDB.

Lược đồ

Trong Mongoose, lược đồ là một cấu trúc xác định định dạng của dữ liệu sẽ được lưu trữ trong MongoDB (như xác định các trường và kiểu dữ liệu). Hãy coi nó như một bản thiết kế chi tiết về cách dữ liệu của bạn sẽ trông như thế nào.

Ví dụ : Tạo lược đồ Mongoose cho một bài đăng trên blog với các trường như tiêu đề, tác giả và nội dung.

Model

Một mô hình trong Mongoose hoạt động như một hàm tạo, được biên dịch từ các định nghĩa Lược đồ. Nó đại diện cho các tài liệu trong cơ sở dữ liệu MongoDB. Các mô hình chịu trách nhiệm tạo và đọc tài liệu từ cơ sở dữ liệu MongoDB cơ bản.

Ví dụ : Xác định mô hình 'Người dùng' dựa trên lược đồ người dùng để tương tác với bộ sưu tập 'người dùng' trong cơ sở dữ liệu.

Hoạt động CRUD

CRUD là viết tắt của Tạo, Đọc, Cập nhật, Xóa. Đây là những thao tác cơ bản bạn có thể thực hiện trên cơ sở dữ liệu. Mongoose cung cấp các phương pháp dễ dàng để thực hiện các thao tác này trên dữ liệu của bạn.

Ví dụ : Sử dụng phương pháp Mongoose để thêm người dùng mới, tìm người dùng theo tên, cập nhật thông tin người dùng hoặc xóa người dùng.

Đang kết nối với MongoDB

Bạn có thể sử dụng Mongoose để kết nối ứng dụng Node.js của mình với cơ sở dữ liệu MongoDB. Điều này giống như thiết lập đường dây điện thoại giữa ứng dụng của bạn và cơ sở dữ liệu để chúng có thể nói chuyện với nhau.

Ví dụ : Viết hàm kết nối Mongoose để liên kết ứng dụng Node.js của bạn với cơ sở dữ liệu MongoDB được lưu trữ trên Atlas.

Truy vấn dữ liệu

Mongoose cho phép bạn truy vấn cơ sở dữ liệu MongoDB của mình. Điều này có nghĩa là bạn có thể tìm kiếm dữ liệu cụ thể, lọc dữ liệu của mình dựa trên các tiêu chí nhất định và hơn thế nữa.

Ví dụ : Sử dụng truy vấn Mongoose để tìm tất cả các bài đăng trên blog được viết bởi một tác giả cụ thể.

Xác nhận dữ liệu

Mongoose cung cấp xác nhận tích hợp. Đây là cách để đảm bảo dữ liệu được lưu vào cơ sở dữ liệu của bạn ở đúng định dạng, chẳng hạn như kiểm tra xem địa chỉ email có giống địa chỉ email hay không.

Ví dụ : Xác định lược đồ trong Mongoose trong đó trường email phải khớp với định dạng của địa chỉ email.

Middleware (Móc trước và sau)

Phần mềm trung gian Mongoose là các chức năng có thể được thực thi tự động trước hoặc sau một số thao tác nhất định, như lưu tài liệu. Chúng hữu ích cho logic phức tạp như băm mật khẩu trước khi lưu chúng vào cơ sở dữ liệu.

Ví dụ : Sử dụng phần mềm trung gian lưu trước trong Mongoose để băm mật khẩu người dùng trước khi lưu vào cơ sở dữ liệu.

Chỉ mục

Các chỉ mục trong MongoDB được sử dụng để cải thiện hiệu suất tìm kiếm. Chúng tương tự như các chỉ mục trong sách, giúp cơ sở dữ liệu tìm kiếm dữ liệu nhanh hơn.

Ví dụ : Tạo chỉ mục trên trường 'email' trong bộ sưu tập người dùng để tăng tốc độ tìm kiếm người dùng qua email.