قدرت وعده ها با Next.js: ساختن یک برنامه تحویل پیتزا 🍕

قدرت وعده ها با Next.js: ساختن یک برنامه تحویل پیتزا

در این پست وبلاگ، با ساختن یک برنامه تحویل پیتزا، قدرت وعده‌ها را در Next.js بررسی خواهیم کرد. وعده‌ها به ما امکان می‌دهند تا عملیات ناهمزمان را به روشی ظریف‌تر و ساختاریافته‌تر مدیریت کنیم و کد ما را خواناتر و قابل نگهداری‌تر می‌کند. ما به هر یک از عملکردهای کد می پردازیم و درک می کنیم که چگونه از وعده ها برای شبیه سازی فراخوان های API برای افزودن، ویرایش و حذف سفارش ها استفاده می شود.

کد کامل مولفه برنامه تحویل پیتزا ما را می توانید در GitHub پیدا کنید.

نسخه نمایشی زنده:
خودتان آن را در اینجا بررسی کنید: نسخه نمایشی برنامه سفارش پیتزا

جزء سفارش پیتزا

هسته اصلی برنامه تحویل پیتزا ما این است PizzaOrder جزء. این مؤلفه عملکرد سفارش پیتزا از جمله انتخاب پیتزا، ثبت سفارش، نمایش وضعیت سفارش و مدیریت تاریخچه سفارش را انجام می دهد. بیایید هر تابع را تجزیه کنیم و نحوه استفاده از وعده ها را درک کنیم.

تابع takeOrder

را takeOrder تابع اضافه کردن پیتزا به سبد خرید است. این هم کد:

const takeOrder = (pizza) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const isAvailable = checkAvailability(pizza);

      if (isAvailable) {
        const updatedCart = [...cart, pizza];
        setCart(updatedCart);
        resolve(pizza);
      } else {
        reject(new Error('Sorry, the pizza is not available.'));
      }
    }, 2000);
  });
};

در اینجا، ما یک وعده جدید ایجاد می کنیم که عملیات ناهمزمان اضافه کردن پیتزا به سبد خرید را در بر می گیرد. با استفاده از این عملیات شبیه سازی می کنیم setTimeout() برای تاخیر 2000 میلی ثانیه (2 ثانیه). در داخل تابع تایم اوت، ما با استفاده از در دسترس بودن پیتزا را بررسی می کنیم checkAvailability تابع. در صورت موجود بودن پیتزا، سبد خرید را به روز می کنیم و با پیتزای اضافه شده، قول را حل می کنیم. در غیر این صورت با پیغام خطا قول را رد می کنیم.

بررسی عملکرد در دسترس بودن

را checkAvailability عملکرد به سادگی بررسی می کند که آیا پیتزای انتخابی موجود است یا خیر. این هم کد:

const checkAvailability = (pizza) => {
  const availablePizzas = ['Margherita', 'Pepperoni', 'Vegetarian'];
  return availablePizzas.includes(pizza);
};

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

تابع processOrder

را processOrder تابع پردازش سفارش را انجام می دهد. خالی بودن سبد را بررسی می کند و در صورت خالی نبودن سبد، قول را با اقلام سبد حل می کند. این هم کد:

const processOrder = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (cart.length >= 0) {
        resolve(cart);
      } else {
        reject(new Error('Cart is empty. Please add pizzas to your order.'));
      }
    }, 1500);
  });
};

شبیه به takeOrder تابع، ما یک وعده ایجاد می کنیم و با استفاده از یک تماس API شبیه سازی می کنیم setTimeout(). در داخل تابع timeout، بررسی می کنیم که آیا سبد خرید کالایی دارد یا خیر. اگر چنین شد، ما قول را با اقلام سبد خرید حل می کنیم. در غیر این صورت با پیغام خطا قول را رد می کنیم.

تابع handleOrder

را handleOrder تابع کنترل کننده رویداد برای ثبت سفارش است. از آن استفاده می کند takeOrder و processOrder توابع اضافه کردن پیتزای انتخابی به سبد خرید و پردازش سفارش. این هم کد:

const handleOrder = async () => {
  try {
    setOrderStatus('Placing order...');

    const order = await takeOrder(selectedPizza);
    console.log(`Successfully added ${order} to the cart.`);

    const processedOrder = await processOrder();
    console.log('Your order is ready!');
    console.log('Ordered Pizzas:', processedOrder);

    setOrderStatus('Order placed successfully!');
  } catch (error) {
    console.error(error.message);
    setOrderStatus('Failed to place order.');
  }
};

در این تابع، وضعیت سفارش را روی “Placing order…” قرار می دهیم تا روند در حال انجام را نشان دهد. سپس استفاده می کنیم await برای تماس با takeOrder عملکرد و پیتزای انتخابی را به سبد خرید اضافه کنید. هنگامی که پیتزا اضافه شد، یک پیام موفقیت آمیز ثبت می کنیم و با آن تماس می گیریم processOrder عملکرد برای پردازش سفارش در نهایت، وضعیت سفارش را بر اساس نتیجه ثبت سفارش به روز می کنیم.

تابع handleEditOrder

را handleEditOrder عملکرد زمانی فعال می شود که کاربر روی دکمه “ویرایش” برای یک سفارش خاص کلیک کند. یک مدال برای ویرایش نام پیتزا باز می کند. این هم کد:

const handleEditOrder = (index) => {
  setEditIndex(index);
  setNewPizzaName(cart[index]);
  setEditModalOpen(true);
};

در این تابع مقدار را تنظیم می کنیم editIndex به فهرست سفارش در حال ویرایش حالت دهید. ما همچنین تنظیم کردیم newPizzaName به نام پیتزا فعلی حالت دهید و با تنظیم کردن حالت ویرایش را باز کنید editModalOpen حالت به true.

تابع handleDeleteOrder

را handleDeleteOrder عملکرد زمانی فعال می شود که کاربر روی دکمه “حذف” برای یک سفارش خاص کلیک کند. قبل از حذف سفارش، یک مدال تأیید را باز می کند. این هم کد:

const handleDeleteOrder = (index) => {
  setEditIndex(index);
  setDeleteModalOpen(true);
};

شبیه به handleEditOrder تابع، ما تنظیم می کنیم editIndex به فهرست سفارش در حال حذف حالت دهید و با تنظیم کردن، مدال حذف را باز کنید deleteModalOpen حالت به true.

تابع handleConfirmEdit

را handleConfirmEdit تابع زمانی فراخوانی می شود که کاربر ویرایش را در مدال ویرایش تایید کند. سبد خرید را با نام پیتزا جدید به روز می کند. این هم کد:

const handleConfirmEdit = () => {
  try {
    const updatedCart = [...cart];
    updatedCart[editIndex] = newPizzaName;
    setCart(updatedCart);
    setEditModalOpen(false);
    setOrderStatus('Order edited successfully!');
  } catch (error) {
    console.error(error.message);
    setOrderStatus('Failed to edit order.');
  }
};

در این تابع یک آرایه جدید ایجاد می کنیم updatedCart با استفاده از عملگر spread برای کپی کردن سبد خرید موجود. نام پیتزا را در نمایه مشخص شده با علامت به روز می کنیم newPizzaName حالت. در نهایت سبد خرید را به روز می کنیم، مدال ویرایش را می بندیم و وضعیت سفارش را بر اساس آن تنظیم می کنیم.

تابع handleConfirmDelete

را handleConfirmDelete تابع زمانی فراخوانی می شود که کاربر حذف را در مدال حذف تایید کند. این سفارش را از سبد خرید حذف می کند. این هم کد:

const handleConfirmDelete = () => {
  try {
    const updatedCart = [...cart];
    updatedCart.splice(editIndex, 1);
    setCart(updatedCart);
    setDeleteModalOpen(false);
    setOrderStatus('Order deleted successfully!');
  } catch (error) {
    console.error(error.message);
    setOrderStatus('Failed to delete order.');
  }
};

در این تابع یک آرایه جدید ایجاد می کنیم updatedCart با استفاده از عملگر spread برای کپی کردن سبد خرید موجود. ما استفاده می کنیم splice روش حذف سفارش در شاخص مشخص شده. در نهایت، سبد خرید را به روز می کنیم، مدال حذف را می بندیم و وضعیت سفارش را بر اساس آن تنظیم می کنیم.

نتیجه

در این پست وبلاگ، با ساختن یک اپلیکیشن تحویل پیتزا، قدرت وعده‌ها را در Next.js بررسی کردیم. ما یاد گرفتیم که چگونه می توان از وعده ها برای مدیریت عملیات ناهمزمان به شیوه ای ساختاریافته و خوانا استفاده کرد. با استفاده از وعده ها و شبیه سازی تماس های API با setTimeout()، توانستیم سفارشات را به صورت یکپارچه اضافه، ویرایش و حذف کنیم. استفاده از وعده‌ها به بهبود سازماندهی کد، قابلیت نگهداری و تجربه کلی توسعه‌دهنده کمک می‌کند.

کد کامل مولفه برنامه تحویل پیتزا ما را می توانید در GitHub پیدا کنید.

نسخه نمایشی زنده:
خودتان آن را در اینجا بررسی کنید: نسخه نمایشی برنامه سفارش پیتزا

در خبرنامه من مشترک شوید تا نکات، ترفندها و چالش هایی را برای حفظ مهارت های خود دریافت کنید. مشترک شدن در خبرنامه