راه‌اندازی یک بک‌اند ساده با JSON Server

در این بخش، برای پروژه یک بک‌اند ساده و شبیه‌سازی‌شده راه‌اندازی می‌کنیم. چون این برنامه در عمل به یک API نیاز دارد، از JSON Server استفاده می‌کنیم تا بدون ساختن بک‌اند واقعی، یک REST API کامل در اختیار داشته باشیم.

JSON Server به ما اجازه می‌دهد یک فایل JSON را به‌عنوان منبع داده استفاده کنیم و با آن درخواست‌های مختلفی مثل دریافت، افزودن، ویرایش و حذف اطلاعات را انجام دهیم.

نکته: برای اجرای JSON Server به Node.js نیاز دارید. این ابزار فقط برای اجرای بک‌اند شبیه‌سازی‌شده در محیط توسعه استفاده می‌شود و ربطی به روش اجرای فرانت‌اند (که مستقیم در مرورگر اجرا می‌شود) ندارد.

نصب JSON Server

ابتدا یک ترمینال جدید باز می‌کنیم و داخل پوشه پروژه دستور زیر را اجرا می‌کنیم:

npm install json-server

ساخت فایل دیتابیس

حالا یک پوشه به نام api در ریشه پروژه می‌سازیم و داخل آن فایلی با نام db.json قرار می‌دهیم.

ساختار اولیه فایل به این شکل است:

{
  "posts": [
    {
      "id": "1",
      "title": "Post One",
      "body": "This is post one"
    },
    {
      "id": "2",
      "title": "Post Two",
      "body": "This is post two"
    },
    {
      "id": "3",
      "title": "Post Three",
      "body": "This is post three"
    }
  ]
}

نکته مهم دربارهٔ id

در نسخهٔ فعلی JSON Server، مقدار id باید به‌صورت رشته (string) نوشته شود، یعنی داخل دابل‌کوتیشن (مثلاً "1" و نه 1). اگر مقدار id را مشخص نکنید، به‌صورت خودکار برای شما تولید می‌شود.

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

ساخت اسکریپت اجرا

برای اینکه اجرای سرور ساده‌تر شود، یک اسکریپت در package.json اضافه می‌کنیم:

{
  "scripts": {
    "json-server": "json-server api/db.json"
  }
}

نیازی به پرچم --watch نیست؛ JSON Server به‌صورت پیش‌فرض تغییرات فایل db.json را زیر نظر می‌گیرد و آن‌ها را به‌صورت خودکار اعمال می‌کند.

با این کار، می‌توانیم سرور را با دستور زیر اجرا کنیم:

npm run json-server

اگر نخواهید اسکریپت جداگانه بسازید، می‌توانید سرور را مستقیم هم با دستور زیر اجرا کنید:

npx json-server api/db.json

اجرای سرور

بعد از اجرای دستور، پیامی مشابه زیر در ترمینال نمایش داده می‌شود:

JSON Server started on PORT :3000
http://localhost:3000

یعنی سرور روی پورت 3000 در حال اجراست.

مشاهده داده‌ها

برای دیدن داده‌ها، آدرس زیر را در مرورگر باز کنید:

http://localhost:3000/posts

خروجی، آرایه‌ای از پست‌هایی خواهد بود که در db.json تعریف کرده‌ایم. برای دیدن یک پست خاص هم می‌توانید از آدرسی مانند این استفاده کنید:

http://localhost:3000/posts/1

این سرور می‌تواند به‌عنوان API پروژه عمل کند و فرانت‌اند ما با همین آدرس‌ها کار خواهد کرد.

مسیرهای (Routes) پیش‌فرض

بر اساس منبع posts که در db.json تعریف کردیم، مسیرهای زیر به‌صورت خودکار در دسترس هستند:

GET    /posts
GET    /posts/:id
POST   /posts
PUT    /posts/:id
PATCH  /posts/:id
DELETE /posts/:id

مزیت JSON Server

مزیت اصلی این ابزار این است که بدون نیاز به ساخت یک بک‌اند واقعی، می‌توانیم یک API کامل و قابل استفاده داشته باشیم. این موضوع برای توسعه فرانت‌اند و تمرین با REST API بسیار مفید است.

فرقی نمی‌کند بک‌اند واقعی شما با چه تکنولوژی‌ای ساخته شده باشد؛ از دید فرانت‌اند، نحوه ارسال درخواست‌ها تقریباً مشابه خواهد بود.

جمع‌بندی

در این بخش:

• JSON Server را نصب کردیم.
• یک اسکریپت برای اجرای آن ساختیم (بدون نیاز به پرچم --watch).
• فایل db.json را به‌عنوان دیتابیس اولیه ایجاد کردیم، با idهای رشته‌ای.
• چند پست نمونه اضافه کردیم.
• سرور را روی پورت 3000 اجرا کردیم و مسیرهای پیش‌فرض آن را بررسی کردیم.

در بخش بعدی، کار با JavaScript پروژه را شروع می‌کنیم و درخواست‌ها را به این API متصل می‌کنیم.