تصور کن توی دنیایی زندگی می‌کنی که برای توسعه یک وب سایت باید چندین زبان برنامه نویسی و تکنولوژی مختلف رو یاد می‌گرفتی. برای بک اند از یک زبان، برای فرانت اند از یک زبان دیگه و برای دیتابیس هم از یه چیز کاملاً متفاوت استفاده می‌کردی. این باعث می‌شد که فرآیند توسعه وب پیچیده و زمان بر بشه و هماهنگی بین اجزای مختلف خیلی سخت باشه. اینجا بود که نیاز به یک پشته تکنولوژی یکپارچه مثل 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 می‌تونید اپلیکیشن‌های وب سریع، مقیاس پذیر، و واکنش گرا ایجاد کنید. این به شما اجازه می‌ده که با استفاده از ابزارهای مدرن و کارآمد، اپلیکیشن هایی با کیفیت و کارایی بالا ایجاد کنید که تجربه کاربری بهتری رو ارائه می‌ده. امیدواریم این مقاله به شما کمک کرده باشه تا با این تکنولوژی بیشتر آشنا شید و بتونید از اون در پروژه‌های خود استفاده کنید.