تصور کن توی دنیایی زندگی می‌کنی که برای توسعه یک وب‌سایت باید چندین زبان برنامه‌نویسی و تکنولوژی مختلف رو یاد می‌گرفتی. برای بک‌اند از یک زبان، برای فرانت‌اند از یک زبان دیگه و برای دیتابیس هم از یه چیز کاملاً متفاوت استفاده می‌کردی. این باعث می‌شد که فرآیند توسعه وب پیچیده و زمان‌بر بشه و هماهنگی بین اجزای مختلف خیلی سخت باشه. اینجا بود که نیاز به یک پشته تکنولوژی یکپارچه مثل MERN Stack به شدت احساس شد. با MERN Stack می‌تونی تمام قسمت‌های اپلیکیشن رو با استفاده از یک زبان برنامه‌نویسی (جاوااسکریپت) توسعه بدی و این کار رو خیلی راحت‌تر و سریع‌تر می‌کنه.

تاریخچه و نیاز به MERN Stack

سال‌های قبل، توسعه‌دهندگان با مشکلاتی مثل پیچیدگی مدیریت داده‌ها، نیاز به رندر سریع صفحات وب، و نیاز به ابزارهایی برای توسعه سریع و آسان وب‌سایت‌ها دست‌وپنجه نرم می‌کردند. این مشکلات باعث می‌شد که فرآیند توسعه وب به شدت پیچیده و زمان‌بر باشه و در نهایت باعث کاهش کیفیت و کارایی وب‌سایت‌ها بشه. از طرفی، هر تکنولوژی‌ای که پیشنهاد می‌شد، معایب خودش رو داشت و نمی‌تونست همه نیازها رو به خوبی برطرف کنه. اینجا بود که نیاز به یه تکنولوژی یکپارچه و موثر بیشتر از همیشه حس می‌شد.

اینجا بود که MERN Stack وارد میدون شد. این تکنولوژی، شامل MongoDB، Express.js، React، و Node.js است که هرکدوم به نحوی به بهبود و تسهیل فرآیند توسعه وب کمک می‌کنند. هر کدام از این تکنولوژی‌ها به صورت جداگانه قابلیت‌های زیادی دارند، اما وقتی با هم ترکیب می‌شوند، قدرت و کارایی فوق‌العاده‌ای به توسعه‌دهندگان می‌دهند.

چرا باید از MERN Stack استفاده کنید؟

دلایل زیادی برای استفاده از MERN Stack وجود داره. به عنوان مثال، این تکنولوژی به شما اجازه می‌ده که یه معماری سه لایه شامل فرانت‌اند، بک‌اند و دیتابیس با استفاده از جاوااسکریپت و JSON ایجاد کنید. این یکپارچگی و هماهنگی بین لایه‌ها باعث می‌شه که توسعه و نگهداری اپلیکیشن‌ها بسیار ساده‌تر و کارآمدتر بشه.

ساختار سه لایه

MongoDB که پایه MERN Stack هست، برای ذخیره‌سازی داده‌های JSON به صورت بومی طراحی شده. هر چیزی در این دیتابیس، از جمله CLI و زبان پرس‌وجو، با استفاده از JSON و جاوااسکریپت ساخته شده. این سیستم مدیریت پایگاه داده NoSQL به خوبی با Node.js کار می‌کنه و بنابراین اجازه می‌ده که داده‌های JSON رو در هر لایه از برنامه مدیریت، نمایش و ذخیره کنید. این یکپارچگی بین MongoDB و Node.js باعث می‌شه که کار با داده‌ها بسیار ساده‌تر و سریع‌تر باشه.

مدیریت آسان دیتابیس

MongoDB Atlas یکی از نسخه‌های MongoDB هست که مدیریت دیتابیس رو با ارائه یه کلاستر MongoDB خودکار بر روی هر ارائه‌دهنده ابری و با چند کلیک آسان‌تر می‌کنه. این ویژگی به توسعه‌دهندگان اجازه می‌ده که بدون نگرانی از مشکلات مدیریتی دیتابیس، روی توسعه و بهبود اپلیکیشن‌ها تمرکز کنن. MongoDB Atlas با ارائه قابلیت‌های پیشرفته‌ای مثل پشتیبان‌گیری خودکار، مقیاس‌پذیری دینامیک و امنیت بالا، کار با دیتابیس‌ها رو بسیار راحت و ایمن می‌کنه.

فریمورک Express.js

Express.js یه فریمورک سمت سرور هست که درخواست‌ها و پاسخ‌های HTTP رو بسته‌بندی می‌کنه و نقشه‌برداری URLها به توابع سمت سرور رو آسون می‌کنه. این فریمورک به خوبی با React.js که یه فریمورک فرانت‌اند برای توسعه رابط‌های کاربری تعاملی در HTML هست، همکاری می‌کنه. با استفاده از Express.js می‌تونید به سادگی سرورهایی قدرتمند و کارآمد ایجاد کنید که به درخواست‌های کاربر پاسخ بدن و داده‌ها رو به صورت بهینه مدیریت کنن.

هماهنگی کامل با JSON

از اونجا که این دو تکنولوژی با JSON کار می‌کنن، داده‌ها به صورت بی‌درنگ جریان می‌یابن و توسعه سریع و رفع اشکال آسان‌تر می‌شه. برای درک کل سیستم، فقط باید یه زبان یعنی جاوااسکریپت و ساختار سند JSON رو بفهمید. این یکپارچگی بین جاوااسکریپت و JSON باعث می‌شه که کار با داده‌ها و ساختارهای پیچیده بسیار ساده و سریع باشه و نیاز به یادگیری زبان‌ها و ابزارهای مختلف رو کاهش بده.

نحوه کار MERN Stack

MERN Stack به توسعه‌دهندگان اجازه می‌ده که از یه زبان برنامه‌نویسی واحد (جاوااسکریپت) برای تمام قسمت‌های اپلیکیشن استفاده کنن. این امر فرآیند توسعه رو ساده‌تر و کارآمدتر می‌کنه. در ادامه، نحوه کار هر یک از اجزای MERN Stack رو بررسی می‌کنیم.

اتصال MongoDB با Node.js و Express.js

برای اتصال MongoDB به Node.js و Express.js، ابتدا باید از کتابخانه Mongoose استفاده کنیم. این کتابخانه به ما اجازه می‌ده که با پایگاه داده MongoDB به راحتی تعامل کنیم.

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/my_database', { useNewUrlParser: true, useUnifiedTopology: true });
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
  console.log('Connected to MongoDB');
});

در کد بالا، ابتدا کتابخانه Mongoose رو وارد کرده و سپس به پایگاه داده MongoDB متصل می‌شیم. اگه اتصال موفقیت‌آمیز باشه، پیامی در کنسول نمایش داده می‌شه. استفاده از Mongoose باعث می‌شه که کار با داده‌ها و مدل‌سازی آن‌ها بسیار ساده و سریع باشه.

استفاده از Express.js برای ایجاد سرور

Express.js به ما اجازه می‌ده که به راحتی یه سرور HTTP ایجاد کنیم و درخواست‌ها رو مدیریت کنیم.

const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.send('Hello World!');
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

در کد بالا، یه سرور ساده با استفاده از Express.js ایجاد کرده‌ایم که به درخواست‌های HTTP پاسخ می‌ده و پیامی در کنسول نمایش می‌ده. Express.js با امکانات گسترده‌ای که داره، به توسعه‌دهندگان اجازه می‌ده که به سادگی مسیرها رو مدیریت کنن و درخواست‌ها رو به درستی به توابع مناسب هدایت کنن.

استفاده از React برای ایجاد رابط کاربری

React به ما اجازه می‌ده که رابط‌های کاربری پویا و واکنش‌گرا ایجاد کنیم. این کتابخانه با استفاده از کامپوننت‌های قابل‌استفاده مجدد و مدیریت وضعیت قوی، به توسعه‌دهندگان کمک می‌کنه که رابط‌های کاربری پیچیده و مدرن رو به سادگی ایجاد و مدیریت کنن.

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
  return (
    <div>
      <h1>Hello, 7Learn!</h1>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

در کد بالا، یه کامپوننت ساده React ایجاد کرده‌ایم که پیامی رو نمایش می‌ده. این کامپوننت‌ها به توسعه‌دهندگان اجازه می‌ده که بخش‌های مختلف رابط کاربری رو به صورت جداگانه ایجاد و مدیریت کنن و به این ترتیب توسعه و نگهداری اپلیکیشن‌ها بسیار ساده‌تر و سریع‌تر می‌شه.

شرکت‌ها و پروژه‌های معروف استفاده‌کننده از MERN Stack

بسیاری از شرکت‌ها و پروژه‌های معروف از MERN Stack استفاده می‌کنن. به عنوان مثال، نتفلیکس، Airbnb، و Uber از این پشته تکنولوژی برای توسعه اپلیکیشن‌های خودشون استفاده می‌کنن. این شرکت‌ها با استفاده از MERN Stack تونستن اپلیکیشن‌هایی سریع، کارآمد و مقیاس‌پذیر ایجاد کنن که تجربه کاربری عالی‌ای رو ارائه می‌ده.

ایجاد یک تودو لیست با MERN Stack

یکی از پروژه‌های کاربردی که می‌تونید با MERN Stack ایجاد کنید، اپلیکیشن لیست کارهاست. این پروژه ساده به شما اجازه می‌ده که تمام اجزای MERN رو به کار بگیرید و به خوبی با این تکنولوژی‌ها آشنا بشید.

ایجاد Backend با Node.js و Express.js

ابتدا یه سرور ساده با استفاده از Express.js ایجاد می‌کنیم که به درخواست‌های HTTP پاسخ می‌ده.

const express = require('express');
const app = express();
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/todo_app', { useNewUrlParser: true, useUnifiedTopology: true });
const TodoSchema = new mongoose.Schema({
  title: String,
  completed: Boolean
});
const Todo = mongoose.model('Todo', TodoSchema);
app.use(express.json());
app.get('/todos', async (req, res) => {
  const todos = await Todo.find();
  res.json(todos);
});
app.post('/todos', async (req, res) => {
  const todo = new Todo({
    title: req.body.title,
    completed: false
  });
  await todo.save();
  res.json(todo);
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

• وارد کردن کتابخانه‌ها و ایجاد اپلیکیشن Express: ابتدا کتابخانه‌های مورد نیاز رو وارد می‌کنیم. express برای ساخت و مدیریت سرور HTTP، و mongoose برای اتصال به MongoDB استفاده می‌شه. سپس یک اپلیکیشن Express جدید ایجاد می‌کنیم.
• اتصال به MongoDB: با استفاده از mongoose.connect به پایگاه داده محلی MongoDB به نام todo_app متصل می‌شیم. useNewUrlParser و useUnifiedTopology پارامترهایی هستند که برای بهینه‌سازی اتصال استفاده می‌شن.
• تعریف مدل داده‌ها: یک مدل برای داده‌های لیست کارها تعریف می‌کنیم که شامل دو فیلد title (عنوان) و completed (وضعیت تکمیل بودن) است. این مدل به ما اجازه می‌ده که ساختار داده‌ها رو به صورت مشخص تعریف کنیم.
• ایجاد مدل Todo: مدل Todo رو بر اساس اسکیمای تعریف شده ایجاد می‌کنیم. این مدل به ما اجازه می‌ده که به راحتی با داده‌های لیست کارها تعامل کنیم.
• استفاده از middleware express.json: از middleware express.json برای تجزیه JSON استفاده می‌کنیم. این کار به ما اجازه می‌ده که داده‌های JSON رو از درخواست‌های HTTP دریافت کنیم.
• ایجاد endpoint برای دریافت کارها: یک endpoint با متد GET برای دریافت تمام کارها ایجاد می‌کنیم. این endpoint به درخواست‌های HTTP GET پاسخ می‌ده و تمام کارها رو از پایگاه داده می‌گیره و به صورت JSON برمی‌گردونه.
• ایجاد endpoint برای اضافه کردن کار جدید: یک endpoint با متد POST برای اضافه کردن کار جدید ایجاد می‌کنیم. این endpoint به درخواست‌های HTTP POST پاسخ می‌ده، عنوان کار جدید رو از درخواست دریافت می‌کنه، یک کار جدید ایجاد و در پایگاه داده ذخیره می‌کنه و سپس کار ذخیره شده رو به صورت JSON برمی‌گردونه.
• راه‌اندازی سرور: سرور رو روی پورت 3000 راه‌اندازی می‌کنیم و پیام موفقیت‌آمیز بودن راه‌اندازی سرور رو در کنسول نمایش می‌دیم.

ایجاد Frontend با React

حالا یه رابط کاربری با استفاده از React ایجاد می‌کنیم که به کاربران اجازه می‌ده لیست کارهای خودشون رو مدیریت کنن. این رابط کاربری شامل یک فیلد ورودی برای اضافه کردن کارهای جدید، یک دکمه برای اضافه کردن کارها به لیست، و یک لیست نمایش‌دهنده کارهای موجود است. همچنین از axios برای ارسال و دریافت داده‌ها به سرور استفاده می‌کنیم تا تغییرات به‌صورت همزمان در رابط کاربری و پایگاه داده اعمال بشه. به این ترتیب کاربران می‌تونن به راحتی کارهای خودشون رو مدیریت کنن و وضعیت اون‌ها رو به‌روزرسانی کنن.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
  const [todos, setTodos] = useState([]);
  const 

 = useState('');
  useEffect(() => {
    async function fetchTodos() {
      const response = await axios.get('/todos');
      setTodos(response.data);
    }
    fetchTodos();
  }, []);
  const addTodo = async () => {
    const response = await axios.post('/todos', { title });
    setTodos([...todos, response.data]);
    setTitle('');
  };
  return (
    <div>
      <h1>To-Do List</h1>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo._id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

• وارد کردن کتابخانه‌ها: ابتدا کتابخانه‌های React و axios رو وارد می‌کنیم. React برای ساخت رابط کاربری و axios برای ارسال درخواست‌های HTTP استفاده می‌شه.
• تعریف state‌ها: دو state به نام‌های todos و title تعریف می‌کنیم. todos برای نگهداری لیست کارها و title برای نگهداری عنوان کار جدید استفاده می‌شه.
• استفاده از useEffect: از هوک useEffect برای دریافت لیست کارها از سرور استفاده می‌کنیم. این هوک زمانی که کامپوننت بارگذاری می‌شه اجرا می‌شه و تابع fetchTodos رو فراخوانی می‌کنه. تابع fetchTodos با استفاده از axios درخواست GET به سرور ارسال می‌کنه و داده‌های دریافت شده رو در state todos نگهداری می‌کنه.
• تابع addTodo: تابع addTodo با استفاده از axios درخواست POST برای اضافه کردن کار جدید به سرور ارسال می‌کنه. پس از دریافت پاسخ از سرور، کار جدید رو به لیست todos اضافه می‌کنیم و عنوان کار جدید رو خالی می‌کنیم.
• رابط کاربری: در رابط کاربری، ابتدا یک عنوان To-Do List نمایش داده می‌شه. یک input برای وارد کردن عنوان کار جدید داریم که وقتی مقدار اون تغییر می‌کنه، state title به‌روزرسانی می‌شه. یک دکمه Add داریم که وقتی کلیک می‌شه، تابع addTodo فراخوانی می‌شه. در نهایت، لیست کارها رو با استفاده از المان <ul> و <li> نمایش می‌دیم.
• برگشت کامپوننت App: کامپوننت App رو به عنوان خروجی ماژول صادر می‌کنیم تا بتونیم از اون در جاهای دیگه استفاده کنیم.

سوالات متداول

اینجا می‌خوایم به چندتا از سوالات پرتکراری که ممکنه درباره MERN Stack داشته باشی، جواب بدیم. هدفمون اینه که کمکت کنیم بهتر این پشته تکنولوژی رو بشناسی و راحت‌تر بتونی ازش توی پروژه‌هات استفاده کنی. با خوندن این سوالات و جواب‌ها، می‌تونی ایده‌های بهتری برای استفاده از MERN Stack پیدا کنی.

۱. آیا MERN Stack برای پروژه‌های بزرگ مناسب است؟

بله، MERN Stack به خاطر مقیاس‌پذیری و کارایی بالاش، برای پروژه‌های بزرگ خیلی مناسبه. این پشته به توسعه‌دهندگان اجازه می‌ده اپلیکیشن‌های پیچیده و مقیاس‌پذیری بسازن که می‌تونن حجم زیادی از داده‌ها و ترافیک رو به خوبی مدیریت کنن.

۲. آیا یادگیری MERN Stack سخت است؟

یادگیری MERN Stack ممکنه برای مبتدی‌ها چالش‌برانگیز باشه، اما با تمرین و استفاده از منابع آموزشی مناسب می‌شه اون رو یاد گرفت. منابع زیادی برای یادگیری MERN Stack وجود داره، از جمله کتاب‌ها، دوره‌های آنلاین و مقالات آموزشی که می‌تونن تو این مسیر کمکت کنن.

۳. چه تفاوتی بین MERN Stack و MEAN Stack وجود دارد؟

تفاوت اصلی بین MERN Stack و MEAN Stack تو استفاده از React در MERN و Angular در MEAN هست. هر دو مزایا و معایب خودشون رو دارن و انتخاب بین اون‌ها بستگی به نیازهای پروژه داره. React به خاطر سادگی و انعطاف‌پذیری بیشترش در مقایسه با Angular، تو بعضی پروژه‌ها ترجیح داده می‌شه، در حالی که Angular به خاطر امکانات و ویژگی‌های گسترده‌ترش تو پروژه‌های دیگه ممکنه مفیدتر باشه.

۴. آیا می‌توان از MERN Stack برای توسعه اپلیکیشن‌های موبایل استفاده کرد؟

بله، با استفاده از React Native می‌تونی اپلیکیشن‌های موبایل رو با MERN Stack توسعه بدی. React Native بهت اجازه می‌ده با همون اصول و تکنیک‌هایی که توی React.js استفاده می‌کنی، اپلیکیشن‌های موبایل برای اندروید و iOS بسازی.

۵. چه منابعی برای یادگیری MERN Stack پیشنهاد می‌شود؟

منابع آموزشی آنلاین، کتاب‌ها و دوره‌های مختلفی برای یادگیری MERN Stack وجود داره. سایت‌هایی مثل Coursera و Udemy منابع خوبی برای شروع هستن. همچنین می‌تونی از مستندات رسمی هر یک از تکنولوژی‌های MERN Stack استفاده کنی که به طور کامل و دقیق توضیح داده شده‌اند.

جمع‌بندی

MERN Stack یکی از تکنولوژی محبوب و قدرتمند برای توسعه اپلیکیشن‌های وب هست. این تکنولوژی با استفاده از یک زبان واحد (جاوااسکریپت) فرآیند توسعه رو ساده و کارآمد می‌کنه. با استفاده از MERN Stack می‌تونید اپلیکیشن‌های وب سریع، مقیاس‌پذیر، و واکنش‌گرا ایجاد کنید. این به شما اجازه می‌ده که با استفاده از ابزارهای مدرن و کارآمد، اپلیکیشن‌هایی با کیفیت و کارایی بالا ایجاد کنید که تجربه کاربری بهتری رو ارائه می‌ده. امیدواریم این مقاله به شما کمک کرده باشه تا با این تکنولوژی بیشتر آشنا شید و بتونید از اون در پروژه‌های خود استفاده کنید.