103- آموزش جاوااسکریپت | پروژه عملی قسمت 4 از 8:راه‌اندازی JSON Server برای پروژه Micro Posts

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

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

نصب JSON Server

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

npm install json-server --save

اگر از نسخه 5 یا بالاتر npm استفاده می‌کنید، پارامتر --save دیگر ضروری نیست، اما برای سازگاری بیشتر می‌توان آن را نوشت.

بعد از نصب، بسته در فایل package.json ثبت می‌شود.

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

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

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

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

npm run json-server

این دستور فایل db.json را زیر نظر می‌گیرد و هر تغییری در آن به‌صورت خودکار اعمال می‌شود.

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

حالا یک پوشه به نام 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"
    }
  ]
}

نکته مهم

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

اجرای سرور

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

npm run json-server

اگر همه‌چیز درست باشد، سرور روی پورت 3000 اجرا می‌شود. سپس با باز کردن آدرس زیر در مرورگر می‌توانیم داده‌ها را ببینیم:

http://localhost:3000

در این صفحه، JSON Server منابع موجود را نمایش می‌دهد. چون ما فقط posts را تعریف کرده‌ایم، همان منبع در دسترس خواهد بود.

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

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

مزیت JSON Server

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

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

جمع‌بندی

در این بخش:

• JSON Server را نصب کردیم.
• یک اسکریپت برای اجرای آن ساختیم.
• فایل db.json را به‌عنوان دیتابیس اولیه ایجاد کردیم.
• چند پست نمونه اضافه کردیم.
• سرور را روی پورت 3000 اجرا کردیم.

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