بارگیری داده های داشبورد فروشنده – جامعه dev

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

• داده های نمای کلی بارگذاری شده به جلو جلو

• طرح ایجاد شده برای معاملات ، محصولات و پیش نویس محصولات

• محصولات بارگذاری شده و داده های جزئیات محصول از پس زمینه تا انتهای جلو با استفاده از توابع Firebase

بارگیری داده های نمای کلی

پس از اتمام عملکرد برگه اطلاعات پرداخت برای مشخصات کاربر ، من شروع به کار بر روی اتصال داده های Schema Backend برای برگه نمای کلی به پایگاه داده Firebase کردم که تمام اطلاعات کاربر من را در اختیار دارد. من UI را تقریباً تنظیم کردم که می خواستم. من فقط نیاز به اتصال باطن داشتم.

من با دسترسی به داده های کاربر ، که هنگام ورود کاربر بارگیری می شود ، شروع کردم checkUserStatus تابعی که در auth.js پرونده این همه روش های بررسی احراز هویت را در خود نگه می دارد. پس از اتمام این کار ، من داده هایی را نشان می دهم که اطلاعات کاربر را نشان می دهد.

پس از انجام این کار ، تمام کاری که من باید انجام دهم دسترسی به هر شیء است که حاوی اطلاعات مورد نیاز من بود. می توانید با استفاده از نماد DOT به اطلاعاتی از شیء مشابه نحوه انجام JavaScript دسترسی پیدا کنید. بنابراین برای دسترسی به اطلاعات نمای کلی فروشنده که از آنها استفاده خواهیم کرد userData.sellerOverview، که به ما امکان دسترسی به داده های کلی را می دهد. پس از آن داده ها را در متغیری به نام ذخیره کردم data، سپس UI را با داده های مربوطه که از باطن (پایگاه داده Firebase) گرفته شده است ، به روز کرد.

async function loadOverviewTabInfo(userData) {
  if (!userData) return null;

  // create reference
  const data = userData.sellerOverview;

  // update UI display
  document.getElementById("total-revenue-value").textContent =
    data.totalRevenue;
  document.getElementById("active-listing-value").textContent =
    data.activeListing;
  document.getElementById("product-sold-value").textContent = data.productsSold;
  document.getElementById("active-listing-value").textContent =
    data.activeListing;
  document.getElementById("product-sold-value").textContent = data.productsSold;
  document.getElementById("selling-rate-value").textContent =
    userData.sellerOverview.sellerRating;

  loadProducts(userData);
}

ایجاد طرح های معاملات ، محصولات و محصولات Products در پایگاه داده Firebase

پس از بارگیری داده های نمای کلی ، ما نیاز به بارگذاری محصولات در هر یک از جداول مربوطه در UI داشتیم. هر جدول با هدرهای زیر مطابقت دارد: همه ، فعال ، برای تجارت ، معاملات در انتظار و غیره.

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

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

معاملات

• LastUpdated: وقتی آخرین مورد به روز شد

• درخواست: چه مواردی را که کاربر برای تجارت درخواست کرده است (در یک آرایه ذخیره شده است)

• درخواست USERID: شناسه کاربر درخواست تجارت

• وضعیت: وضعیت فعلی مورد برای تجارت (در انتظار ، رزرو شده ، منقضی شده ، تحت بررسی و غیره)

• StoreCredit: مقدار اعتبار فروشگاهی که می تواند برای تجارت داده شود

• ارسال شده: تاریخ ارسال یا درخواست تجارت

• TradeBalance: تعادل فعلی کاربر پس از هر تجارت

• TradingItems: مواردی که کاربر فعلی در تلاش است برای موارد درخواست کننده تجارت کند

• TradingUserid: شناسه مالک که تجارت را آغاز کرده است

محصولات

• تجزیه و تحلیل: داده های تحلیلی مربوط به دیدگاه ها ، نرخ تبدیل ، زمان بندی و غیره.

• BasicInfo: اطلاعات کلی مورد

• تقاضا: سطح اولویت این مورد ، تغییر درصد و اینکه آیا مورد روند است

• تصاویر: تصاویر مربوط به موارد ، برچسب alt ، src مورد

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

• قیمت گذاری: کلیه اطلاعات مربوط به هزینه محصول ، قیمت خرده فروشی و غیره

• فروش: اطلاعات مربوط به ارزش مورد اگر به ما فروخته شود

• سئو: اطلاعاتی که برای پارامترهای جستجو برای کمک به شناسایی از طریق کلمات کلیدی استفاده می شود

• حمل و نقل: کلیه اطلاعات حمل و نقل برای محصول و هزینه های مرتبط

• مشخصات: ابعاد مورد استفاده برای حمل و نقل و تعیین اندازه شی

• تأمین کننده: فروشنده ای که در ابتدا این مورد را قبل از فروش مجدد تهیه کرده بود

• انواع: رنگ ها و سبک های مختلف محصول

• لیست انتظار: تعداد افرادی که منتظر بازگرداندن یا رزرو کالا هستند

• وضعیت: آیا این مورد در حال حاضر موجود است ، در انتظار ، خارج از سهام و غیره.

برداشت محصولات

• BasicInfo: کلیه اطلاعات اساسی برای مورد (همان محصولات)

• تکمیل: بخش های کامل پیش نویس تاکنون

• تکمیل برنامه: درصد درصد اطلاعات محصول تکمیل شده است

• Createat: Timestamp هنگام ایجاد و تهیه آن

• پیش نویس: شناسه منحصر به فرد پیش نویس مورد برای شناسایی آسان

• تصاویر: تصاویر مربوط به مورد پیش نویس

• isCompleted: آیا پیش نویس تکمیل شده است

• ماندگار: Timestamp هنگامی که کاربر آخرین پیش نویس را ویرایش کرد

• MissionInfo: اطلاعات از دست رفته لازم برای تکمیل لیست

• OriginalProductid: شناسه محصول اصلی

• قیمت: قیمت پیش نویس مورد

• Publishblockers: موارد یا بخش های مورد نیاز برای لیست

• مورد نیاز: بخش های لازم برای تکمیل لیست

• وضعیت: وضعیت مورد

• UserID: شناسه مالک در حال ایجاد تغییرات فعلی است

خلاصه

این تغییرات و تنظیماتی است که من تاکنون در سفر به ساخت یک سکوی تجارت الکترونیکی همه در یک انجام داده ام. من چیزهای زیادی آموخته ام ، مانند نمایه سازی داده ها ، داده های پرس و جو ، اتصال داده های پس زمینه با ساختار جلوی و نمایش اطلاعات به مشتری. لطفاً هفته آینده با ما در ارتباط باشید زیرا من به کار خود در تکمیل اجرای پروفایل و ساخت جلوی/پس زمینه ادامه می دهم.