با Appwrite Cloud و NextJS یک برنامه مدیریت اطلاعات محصول بسازید

برنامه های مدیریت اطلاعات محصول (PIM) هستند که به کسب و کارها در مدیریت اطلاعات محصول خود کمک می کنند. این اطلاعات می تواند شامل توضیحات محصول، تصاویر، مشخصات و قیمت باشد. همچنین، برنامه‌های PIM می‌توانند با ارائه اطلاعات دقیق و به‌روز به کسب‌وکارها در بهبود فهرست محصولات خود کمک کنند. این می تواند منجر به افزایش فروش و بهبود رضایت مشتری شود.

این پست درباره ساخت یک سیستم PIM بحث می‌کند که به ما اجازه می‌دهد اطلاعات محصول خود را در یک برنامه Next.js اضافه، به‌روزرسانی و حذف کنیم و یک سیستم طراحی منبع باز، Appwrite Pink Design، برای استایل دادن به برنامه. یک سرور باطن سفارشی مورد نیاز نیست.

GitHub

مخزن GitHub پروژه را می توانید در اینجا بیابید.

پیش نیازها

برای دنبال کردن این آموزش، دانش کاری در مورد موارد زیر مورد نیاز است:

همچنین به یک حساب Appwrite Cloud نیاز دارید. دسترسی به Appwrite Cloud را از اینجا درخواست کنید.

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

برای شروع، اجازه دهید با رفتن به دایرکتوری مورد نظر و اجرای دستور زیر در ترمینال، یک پروژه شروع Next.js ایجاد کنیم.

npx create-next-app@latest product-info

این ما را از طریق چندین دستور برای راه اندازی پروژه راهنمایی می کند، از جمله انتخاب مدیر بسته، چارچوب UI و ویژگی های اضافی.

پس از راه اندازی پروژه، اجازه دهید به دایرکتوری پروژه رفته و سرور توسعه را با استفاده از دستورات زیر راه اندازی کنیم:

cd product-info
npm run dev

نصب وابستگی ها

نصب طرح صورتی
Pink Design یک سیستم منبع باز از Appwrite است که برای ایجاد رابط های کاربری سازگار و قابل استفاده مجدد استفاده می شود. همکاری، تجربه توسعه و دسترسی را افزایش می دهد.

برای نصب Pink Design، ترمینال را در پوشه پروژه باز می کنیم و دستور زیر را اجرا می کنیم.

npm install @appwrite.io/pink

برای استفاده از طرح صورتی در پروژه خود، آن را به فایل های پروژه خود وارد می کنیم مانند:

import '@appwrite.io/pink';
import '@appwrite.io/pink-icons';

در حال نصب Appwrite
Appwrite یک پلتفرم توسعه است که یک API و کنسول مدیریتی قدرتمند برای ساخت سرورهای بک‌اند برای برنامه‌های وب و موبایل ارائه می‌کند. برای نصب آن دستور زیر را اجرا کنید:

npm install appwrite

ایجاد یک پروژه Appwrite Cloud

برای شروع، باید به Appwrite cloud خود وارد شویم، روی آن کلیک کنید پروژه ایجاد کنید دکمه، ورودی product-info به عنوان نام، و سپس کلیک کنید ايجاد كردن.

ایجاد یک پایگاه داده، مجموعه و افزودن ویژگی ها
با ایجاد پروژه ما، می توانیم پایگاه داده برنامه خود را راه اندازی کنیم. ابتدا به مسیر بروید پایگاه داده برگه را کلیک کنید ایجاد پایگاه داده دکمه، ورودی product-info-management به عنوان نام، و سپس کلیک کنید ايجاد كردن.

دوم اینکه باید مجموعه ای برای نگهداری محصولات خود ایجاد کنیم. برای انجام این کار، روی مجموعه ایجاد کنید دکمه، ورودی productInfo_collection به عنوان نام، و سپس کلیک کنید ايجاد كردن.

ثالثاً، ما نیاز به ایجاد ویژگی هایی برای نمایش فیلدهای پایگاه داده خود داریم. برای انجام این کار، باید به مسیر بروید ویژگی های برگه را انتخاب کنید و برای هر یک از مقادیر نشان داده شده در زیر ویژگی ایجاد کنید:

در نهایت، ما باید مجوز پایگاه داده خود را به روز کنیم تا آنها را مطابق با آن مدیریت کنیم. حرکت به تنظیمات برگه، به به روز رسانی مجوزها بخش، انتخاب کنید Anyرا علامت بزنید و سپس کلیک کنید به روز رسانی.

ادغام Appwrite Cloud در پروژه Next.js

برای ادغام Appwrite در UI، a ایجاد کنید utils/web-init.js فایل. فایل باید به این شکل باشد.

import { Client, Account } from "appwrite";
export const client = new Client();
export const account = new Account(client);
client
  .setEndpoint("https://cloud.appwrite.io/v1")
  .setProject("643fee63b2b5b506495c");

کد بالا:

• ماژول را وارد می کند Client و Account از Appwrite
• را نمونه می کند Client و Account اشیاء
• از شی مشتری برای تنظیم نقطه پایانی و پروژه استفاده می کند

ساخت رابط کاربری

رابط کاربری برنامه مدیریت اطلاعات محصول، تمام محصولات ایجاد شده با استفاده از یک فیلد ورودی را به نمایش می گذارد و همه آنها را با یک ویرایش و یک نماد حذف فهرست می کند.

برای شروع، ابتدا باید به مسیر بروید src دایرکتوری و ایجاد یک components پوشه، و در این پوشه، a ایجاد کنید AddProduct.js فایل و قطعه زیر را اضافه کنید:

در اصل بالا، کد موارد زیر را انجام می دهد:

• بسته های مورد نیاز و Appwrite Pink Design را وارد می کند
• متغیرهای حالت را برای ذخیره محصول پیاده سازی می کند نام، توضیحات، تصویر، قیمت، و اندازه
• یک متغیر حالت برای Modal پنجره بازشو

بعد، ما وارد می کنیم src/components/AddProduct.js به درون src/app/page.js، مانند:

import AddProduct from "@/components/AddProduct";

export default function Home() {
  return (
    <main className="u-main-center">
      <div>
        <h1 className="u-text-center heading-level-4">
          Product Information Management
        </h1>
      </div>
      <AddProduct/>
    </main>
  );
}

در این مرحله، برنامه ما باید به شکل زیر باشد:

توجه: ما می توانیم از هر پیوند تصویری برای تصاویر سیستم اطلاعات محصول استفاده کنیم. با این حال، در این آموزش، ما از تصاویر Cloudinary استفاده می کنیم، زیرا اعمال تبدیل ها و بهینه سازی تحویل آسان تر است.
برای یادگیری نحوه آپلود تصاویر در Cloudinary، مستندات Cloudinary را بررسی کنید.

ایجاد اسناد پایگاه داده
در مرحله بعد، باید اسناد جدیدی را به مجموعه پایگاه داده اضافه کنیم. در src/components/AddProduct.js فایل، نوشتن الف createProduct() عملکرد ایجاد سند

const createProduct = async (e) => {
    e.preventDefault();
    await databases.createDocument(
      "[DATABASE_ID]",
      "[COLECTION_ID]",
      ID.unique(),
      {
        productName: productName,
        productDesc: productDesc,
        productImage: productImage,
        productPrice: productPrice,
        productSize: productSize
      }
    )
      .then((response) => {
        console.log(response);
        alert("product saved successfully")
      }, function (error) {
        console.log(error);
        alert("product not saved")
      });
}

در بلوک کد بالا، createProduct() تابع موارد زیر را انجام می دهد:

• یک سند جدید با استفاده از Appwrite ایجاد می کند createDocument() عملکرد در حالی که شناسه مجموعه و مقادیر ویژگی را به عنوان پارامتر ارسال می کند

مطمئن شوید که یک رویداد کلیک را به آن اضافه کنید صرفه جویی دکمه مانند این:

<div className="u-flex u-main-end u-gap-16">
      <button className="button" type="submit" onClick={createProduct}>
          <span className="text">Save</span>
      </button>
</div>

فرم را پر کنید و به بخش Documents پایگاه داده ما بروید تا اسناد ذخیره شده ما را ببینید.

نمایش اطلاعات محصول ما

صفحه ما اطلاعات محصولی را که در فرم خود وارد کرده ایم نمایش می دهد. با این منطق ما خودمان را می خواهیم createProduct() عملکرد ایجاد اسناد برای نمایش محصول ما.

در مرحله بعد، باید به مسیر بروید src دایرکتوری و ایجاد یک components پوشه، و در این پوشه، a را ایجاد می کنیم ListProduct.js فایل و قطعه زیر را اضافه کنید:

<div className="u-flex u-main-end u-gap-16">
      <button className="button" type="submit" onClick={createProduct}>
          <span className="text">Save</span>
      </button>
</div>

را getProducts() تابع از Appwrite استفاده می کند listDocuments API که پارامتر مجموعه ID را دریافت می کند. را getProducts() تابع مجموعه را با آن شناسه پیدا می کند.

حذف محصولات از پایگاه داده ما
بعد، در src/components/ListProduct.js فایل، ایجاد یک deleteProduct() عملکردی برای مدیریت حذف محصولاتی که دیگر در مجموعه یا پایگاه داده خود به آنها نیاز نداریم.

const deleteProduct = async (document_id) => {
    console.log(document_id)
    try {
      await databases.deleteDocument(
        "[DATABASE_ID]",
        "[COLECTION_ID]",
        document_id
      );
      alert("Item has been deleted successfully");
      await getProduct();
    } catch (error) {
      console.log("Error deleting product:", error.message);
      alert("Item was not deleted");
    }
  };

را deleteProduct() تابع موارد زیر را انجام می دهد:

• یک سند را با استفاده از آن پیدا می کند DATABASE_ID، COLECTION_ID، و DOCUMENT_ID
• آن سند را با استفاده از Appwrite حذف می کند deleteDocument() تابع
• اگر مورد با موفقیت حذف شد به ما هشدار می دهد
• را اجرا می کند getProduct() عملکرد برای نمایش لیست محصولات به روز شده ما

ایجاد رابط فهرست اطلاعات محصول

در مرحله بعد، محصولات را در صفحه اطلاعات محصول خود نمایش می دهیم. این کد را در src/components/ListProduct.js برای انجام این کار فایل کنید.

<div className="container">
      <table className="table is-selected-columns-mobile">
        <thead className="table-thead">
          <tr className="table-row">
            <th className="table-thead-col" style={{ "--p-col-width": 100 }}>
              <span className="eyebrow-heading-3">Product Name</span>
            </th>
            <th
              className="table-thead-col is-only-desktop"
              style={{ "--p-col-width": 100 }}
            >
              <span className="eyebrow-heading-3">Image</span>
            </th>
            <th
              className="table-thead-col is-only-desktop"
              style={{ "--p-col-width": 200 }}
            >
              <span className="eyebrow-heading-3">Description</span>
            </th>
            <th
              className="table-thead-col is-only-desktop"
              style={{ "--p-col-width": 100 }}
            >
              <span className="eyebrow-heading-3">Price</span>
            </th>
            <th
              className="table-thead-col is-only-desktop"
              style={{ "--p-col-width": 120 }}
            >
              <span className="eyebrow-heading-3">Size</span>
            </th>
            <th
              className="table-thead-col"
              style={{ "--p-col-width": 40 }}
            ></th>
          </tr>
        </thead>
        <tbody className="table-tbody">
          {products.map((product) => (
            <tr key={product.$id} className="table-row">
              <td className="table-col" data-title="Name">
                <div className="u-inline-flex u-cross-center u-gap-12">
                  <span className="text u-break-word u-line-height-1-5">
                    {product.productName}
                  </span>
                </div>
              </td>
              <td className="table-col is-only-desktop" data-title="Type">
                <div className="text">
                  <span className="image">
                    <img
                      className="avatar"
                      width="32"
                      height="32"
                      src={product.productImage}
                      alt=""
                    />
                  </span>
                </div>
              </td>
              <td className="table-col is-only-desktop" data-title="Type">
                <div className="text">
                  <span className="text">{product.productDesc}</span>
                </div>
              </td>
              <td className="table-col is-only-desktop" data-title="Size">
                <span className="tag">{product.productPrice}</span>
              </td>
              <td className="table-col is-only-desktop" data-title="Created">
                <time className="text">{product.productSize}</time>
              </td>
              <td className="table-col u-overflow-visible">
                <button
                  className="button is-text is-only-icon"
                  type="button"
                  aria-label="more options"
                  onClick={() => deleteProduct(product.$id)}
                >
                  <span className="icon-trash" aria-hidden="true"></span>
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
</div>

در بلوک کد بالا، ما:

• حلقه را از طریق products برای ارائه هر محصول
• تخریب و عبور در ما productName، productDesc، productImage، productPrice، و productSize
• عبور کنید deleteProduct() تابعی که برای onClick() شنونده رویداد ما button

به روز رسانی اطلاعات محصول ما
بعد، در src/components/ListProduct.js فایل، a ایجاد می کنیم updateProduct() عملکرد به روز رسانی و اصلاح محصولات ایجاد شده ما در مجموعه یا پایگاه داده ما.

در اصل بالا، موارد زیر اتفاق افتاد:

• متغیر showModal مدال را با کلیک بر روی نماد مداد پر می کند.
• را editMode با یک شی حاوی یک ویژگی واحد مقداردهی اولیه شد index، در ابتدا تنظیم شده است null
• را editProduct تابع حالت ویرایش را برای یک محصول خاص آغاز می کند. طول می کشد a productId به عنوان پارامتر آن در داخل تابع، محصول را با تطابق جستجو می کند productId در products آرایه
• را updateProduct() تابع محصول را با productId ارائه شده در آرایه محصولات قرار می دهد، یک کپی با مقادیر به روز شده ایجاد می کند و محصول قدیمی را با محصول به روز شده جایگزین می کند.
• گذشت updateProduct() تابعی که برای onClick() شنونده رویداد از به روز رسانی button

فرم را پر کنید تا ببینید اطلاعات محصول چگونه است.

نتیجه

در این مقاله ایجاد یک سیستم مدیریت اطلاعات محصول با استفاده از ویژگی Appwrite Cloud’s Database برای ایجاد، بازیابی، به روز رسانی و حذف داده ها در پایگاه داده ما بحث شده است. می تواند ویژگی های احراز هویت را برای ایمن تر کردن آن پیاده سازی کند. این PIM می تواند به عنوان مبنایی برای یک سیستم ایجاد موجودی کامل برای یک فروشگاه باشد.

منابع