آموزش ساخت و کدنویسی یک فروشگاه اینترنتی در 90 دقیقه با React, GraphQL

در این دوره آموزشی یاد می گیرید که چطور با استفاده از React و دیتابیس GraphQL فقط در 90 دقیقه یک فروشگاه اینترنتی بسازید. 

عنوان اصلی : Build an Online Store with React and GraphQL in 90 Minutes

سرفصل ها :

شروع شدن :
ابزارهای مورد استفاده / مورد نیاز برای برنامه ما
راه اندازی برنامه React (مسیریابی، ناوبری):
Git Clone Repo، Install Dependencies، Scaffold React App
ایجاد کامپوننت، مسیریابی برای پروژه
راه اندازی گشتالت و مؤلفه نوار ناوبری
قوانین پایه CSS را اضافه کنید و کلاس را به Active NavLink اعمال کنید (اختیاری)
با Strapi سرور ایجاد کنید، GraphQL را به API خود اضافه کنید:
پیکربندی MongoDB Atlas با Strapi
نگاهی کوتاه به Strapi CLI (اختیاری)
سرور Strapi را راه اندازی کنید، Root Admin را برای CMS ایجاد کنید
نمای کلی پنل مدیریت Strapi (اختیاری)
نوع محتوای برند را با Content Type Builder اضافه کنید، First Brand را اضافه کنید
پلاگین GraphQL را نصب کنید، از GraphQL Playground دیدن کنید
اجرای کوئری ها در GraphQL Playground:
پرس و جو نام تجاری با شناسه در GraphQL Playground، به همه کاربران اجازه دهید (اختیاری)
چندین مارک را با GraphQL جستجو کنید، دوباره مجوزها را تغییر دهید
پرس و جو مارک ها با GraphQL در React App، نمایش مارک ها در UI:
اسکریپت مشتری را با سرور اجرا کنید، بخش علامت گذاری را برای برندها اضافه کنید
اتصال React با GraphQL با استفاده از Strapi SDK، واکشی داده از کلاینت
عدم همگام سازی / انتظار خطاها را با try/catch بگیرید، داده های برند را در حالت محلی قرار دهید
نمایش مارک ها در صفحه اصلی، ایجاد جزء کارت برند
ویژگی های اضافی - طراحی پاسخگو، جستجو، بارگیری اسپینرها:
برای طراحی واکنش‌گرا، سبک‌های بیشتر (اختیاری) به کارت‌های برند Flex Wrap اضافه کنید
افزودن مولفه SearchField به مارک های جستجو (اختیاری)
جستجوی سمت مشتری با .filter() (اختیاری)
اضافه کردن حالت بارگیری برای داده های برند، ایجاد مؤلفه بارگذار (اختیاری)
ایجاد داده Brews / Brews Component:
نوع محتوای Brew را اضافه کنید
داده های دم کردن بذر
Query Brew / Brews، تغییر مجوز برای کاربران عمومی / Auth
پرس و جو نام تجاری بر اساس شناسه برای دریافت محصولات مرتبط
درخواست Brews بر اساس شناسه برند در Brews Component
علامت گذاری را به Display Brews اضافه کنید
ایجاد سبد کاربر:
علامت گذاری سبد خرید را در کامپوننت Brews اضافه کنید
ایجاد تابع برای افزودن اقلام به سبد خرید
ایجاد تابع برای حذف مورد از سبد خرید، محاسبه کل سبد خرید
ادامه سبد خرید به LocalStorage
افزودن اجزای ورود / ثبت نام، احراز هویت کاربر با JWT:
ایجاد فرم ثبت نام
افزودن اعتبار سنجی فرم به ثبت نام (اختیاری)
ایجاد مؤلفه پیام نان تست برای نشان دادن خطای اعتبارسنجی (اختیاری)
ثبت نام کاربر، ذخیره JWT در LocalStorage
پس از ثبت نام، نوار ناوبری را تغییر دهید
خروج از سیستم کاربر
ایجاد نشانه گذاری / عملکرد ورود به سیستم
مؤلفه پرداخت، پردازش پرداخت با Stripe:
پرداخت را به یک مسیر خصوصی تبدیل کنید (اختیاری)
علامت گذاری را برای فرم پرداخت اضافه کنید
سبد خرید را به تسویه حساب اضافه کنید، در صورت خالی بودن سبد، متن پیش فرض را نشان دهید
اضافه کردن Confirmation Modal به سفارش در ارسال
برای Stripe ثبت نام کنید و کلیدهای API را دریافت کنید
Stripe را به صفحه پرداخت اضافه کنید
نوع محتوای سفارشات را ایجاد کنید، تابع ایجاد را در کنترلرها اضافه کنید
ارسال سفارش به پایگاه داده، ارسال / پردازش پرداخت با Stripe
پاداش: ارسال ایمیل با SendGrid:
SendGrid را راه اندازی کنید، کلید API را به Strapi بدهید (اختیاری)
ارسال ایمیل تأیید هنگام پرداخت (اختیاری)
جایزه شماره 2: جستجو با GraphQL، طراحی موبایل، ویژگی های رابط کاربری:
جستجو با GraphQL و Where / field_contains (اختیاری)
برنامه را کاملاً با موبایل سازگار کنید (اختیاری)