من یک API هری پاتر ایجاد کردم، بنابراین شما مجبور نیستید

سلام دنیا!

حالا قبل از اینکه مسخره کنید و بگویید: “برای چه چیزی به API هری پاتر نیاز دارید؟” به من گوش کن. ما پاترهدها نقاشی های پیچیده طلسم ها، شخصیت ها، خانه ها، کتاب ها و فیلم ها را دوست داریم. بنابراین، طبیعتاً، من را به این فکر واداشت که “آیا داشتن یک API که این همه داده دلربا را ارائه می دهد شگفت انگیز نیست؟!”

3 روز و تقریبا 10 قهوه بعد همه چیز آماده است.

چیزی که ما می سازیم 🤔

بیایید یک API ایجاد کنیم که اطلاعات مربوط به موارد زیر را از فرنچایز ارسال کند:

• شخصیت ها
• طلسم
• خانه ها
• کتاب ها
• فیلم ها

در پایان همچنین به شما می گویم که چرا مجبور شدم برای یک اشتباه سرم را به دیوار بکوبم 🤏 به این بزرگی که باعث ایجاد اشکال در تولید شد.

راه اندازی پروژه

من از NextJS برای این کار استفاده کردم زیرا این موضوع برای هر پروژه توسعه وب است.

تقریباً همه می‌دانند که چگونه یک پروژه Nextjs را راه‌اندازی کنند، بنابراین در مورد آن توضیح نمی‌دهم، اما اگر نمی‌دانید چگونه می‌توانید این را دنبال کنید.

بعدی منم دزدید منبع باز داده های KostaSav و Daniel. و آنها را در پوشه ای به نام قرار دهید db داخل ریشه پروژه

ایجاد مسیرهای API

در NextJS 13 نحوه عملکرد API کاملاً تغییر کرده است. برای اینکه API ها کار کنند مراحل زیر را دنبال کنید:

1. درون app dir یک پوشه به نام ایجاد کنید api. لازم نیست api شما همچنین می توانید از نام خود برای پوشه استفاده کنید و برخلاف Next 12 همچنان کار می کند. اما برای سادگی ما از آن استفاده خواهیم کرد. api.
2. یک پوشه به نام ایجاد کنید characters و در نهایت داخل آن فایلی به نام ایجاد کنید route.ts. را route.ts ورودی به /api/characters مسیر. شبیه به چه چیزی است index.html (نقطه ورود) است.
3. داخل characters پوشه ایجاد یک پوشه دیگر به نام [characters] به دنبال دیگری route.ts. این همه مسیرهای پویا را می گیرد. به عنوان مثال /api/characters/harry%20potter
4. مراحل بالا را برای houses، spells، books، movies.

13 API بعدی (مهم)

برای اینکه یک API در Next 13 کار کند، باید این دستور را دنبال کنیم:

// For GET requests
export async function GET() {
  return new Response("Hello");
}

// For POST requests
export async function POST() {
  return new Response("World");
}

// To get slug follow this
export async function GET(
    { params }: { params: { character: string } }
) {
  const { character } = params;
  return new Response(character);
}

اسناد آنها را اینجا بررسی کنید.

راه اندازی API ها

این مسیر json حاوی داده‌های مربوط به کاراکترهای Franchise را ارسال می‌کند. بنابراین باید داده ها را از آن بخوانیم db/characters.jsonرا به یک رشته JSON تبدیل کرده و ارسال کنید.

import characters from "@/db/characters.json";

export async function GET() {
  return new Response(JSON.stringify(characters), {
    headers: { "content-type": "application/json" },
  });
}

• /api/characters/[character]

این کمی پیچیده است.

مسیر پویا که داده های مربوط به یک شخصیت را ارسال می کند.
برای این کار باید Slug را از URL دریافت کنیم.

بنابراین اگر پوشه شما نام دارد [character]، درون GET روش شما باید پارامتر زیر را پاس کنید:

import characters from "@/db/characters.json";

export async function GET(
  { params }: { params: { character: string } }
  // I totally understand this line I swear

  const { character } = params; // Ah finally the slug
)

بعد باید کاراکتر را از اسلاگ در فایل JOSN خود پیدا کنیم.

if (character) {
    const characterString = characters.find(
      (c) => c.name.toLowerCase() === character.toLowerCase()
    );
    
    if (characterString) {
      return new Response(JSON.stringify(characterString), {
        headers: { "content-type": "application/json" },
      });
    }
  }

در نهایت اگر چنین کاراکتری در پایگاه داده وجود ندارد، یک پیغام با همین موضوع برگردانید.

return new Response(`No character with name ${character}`);

بنابراین در پایان کد شما تا حدودی شبیه به این خواهد بود:

import characters from "@/db/characters.json";

export async function GET(
  request: Request,
  { params }: { params: { character: string } }
) {
  const { character } = params;

  if (character) {
    const characterString = characters.find(
      (c) => c.name.toLowerCase() === character.toLowerCase()
    );

    if (characterString) {
      return new Response(JSON.stringify(characterString), {
        headers: { "content-type": "application/json" },
      });
    }
  }
  return new Response(`No character with name ${character}`);
}

• مراحل بالا را برای houses، spells، books، movies.

خطا

و در مورد خطایی که در قسمت اول صحبت کردم …

بنابراین من از TailwindCSS برای قسمت جلویی استفاده کردم و به دلایلی وقتی روی Vercel فشار داده شد کار نمی کرد. بنابراین مجبور شدم بخش زیادی از روزم را صرف کنم تا بفهمم که پیکربندی tailwind من پیکربندی اشتباهی دارد. بنابراین اساساً من نوشتم components بجای Components 😑
فقط 1 نامه خیلی برای من دردسر ایجاد کرد

سرانجام…

این فقط خلاصه ای از یک سفر 4 روزه و حدود 10 فنجان قهوه است.

لطفا نسخه ی نمایشی زنده را بررسی کنید و اینجا Repo Github است

اگر از API لذت بردید، لطفاً یک مخزن 💖 و 🌟 Github بدهید.