مطالب پیشنهادی از سراسر وب

ساخت یک فروشگاه آنلاین با ری اکت و GraphQL در 90 دقیقه

دسته بندی ها: آموزش گرف کیوال (GraphQL) ، آموزش جاوا اسکریپت (Javascript) ، آموزش طراحی وب ، آموزش ری اکت (React) ، آموزش های Packtpub

به دوره ساخت یک فروشگاه آنلاین با React و GraphQL در 90 دقیقه خوش آمدید! در طول این دوره، ما یک فروشگاه آنلاین به نام BrewHaha، یک اپلیکیشن تجارت الکترونیکی ایجاد خواهیم کرد که به کاربران امکان می دهد نوشیدنی های مورد نیاز خود را سفارش دهند. این یک اپلیکیشن full-stack از ابتدا، ساخته شده با React و GraphQL روی Node API توسط ابزار Strapi ایجاد شده است. ما یک پایگاه داده MongoDB ایجاد خواهیم کرد، که توسط MLab میزبانی می شود. این ابزار از ابزارهای مشهور صنعت مانند Stripe (برای پردازش پرداخت های کارت اعتباری ساخته شده در اپلیکیشن React ما) و سرویس گیرنده ایمیل SendGrid برای ارسال نامه های الکترونیکی به کاربران هنگام انجام اقدامات خاص (مانند پرداخت) استفاده خواهد کرد. در اینجا مواردی را ذکر خواهیم کرد:

  • ایجاد یک اپلیکیشن تجارت الکترونیکی کامل با React ،GraphQL ،Stripe و CMS بدون سر و صدا، Strapi، از ابتدا
  • نوشتن و اجرای کوئری های GraphQL روی کلاینت و سرور
  • انجام کوئری های دقیق و عملیات جستجو با GraphQL
  • پردازش پرداخت های کارت اعتباری و ایجاد سفارشات با Stripe
  • یکپارچه سازی Stripe با React با استفاده از كتابخانه کامپوننت های React-Stripe
  • استفاده از CMS بی دردسر، Strapi، برای ایجاد سریع پروژه و نمونه سازی سریع
  • احراز هویت JWT برای کاربران با ورود به سیستم/ثبت نام
  • ارسال ایمیل به کاربران با سرویس ایمیل/API SendGrid
  • ساخت یک UI منحصر به فرد، جذاب و سازگار با موبایل با استفاده از کتابخانه جدید کامپوننت ری اکت Gestalt
  • ایجاد روت های خصوصی در React برای کاربران تصدیق شده
  • کار گسترده با API LocalStorage برای نگهداری داده ها در سمت کلاینت
  • اعلان های Toast برای کاربران ما در مورد بازخورد عملیات موفق آمیز و همچنین خطاها
  • انیمیشن های Loading سفارشی با کتابخانه React Spinners
  • طراحی واکنش گرا با استفاده از CSS Flexbox
  • استقرار اپلیکیشن در وب با استفاده از Heroku و NowIn 

این موارد ساخت اپلیکیشن های full-stack با React (و همه کتابخانه های JavaScript) را بسیار ساده تر می کند. ما در ایجاد اپلیکیشن خود هیچ میانبری نخواهیم داشت. واقعاً یک اپلیکیشن کامل خواهیم داشت که قادر به استقرار آن در وب خواهیم بود. بازدیدکنندگان می توانند ثبت نام کنند، محصولات را به سبد خرید خود اضافه کنند، اقلام خود را چک کنند و از طریق کارت اعتباری خود پرداخت کنند! آیا علاقه مند به ساختن اپلیکیشن های full-stack چشمگیر با React و GraphQL در زمان رکورد هستید؟ این دوره برای شماست!

تمام فایل های کد دوره از این لینک در دسترس هستند.

بخش اضافی 2: جستجو با GraphQL، طراحی موبایل، ویژگی های UI

فایل های تمرین exercise_files.zip
آیا این نوشته را دوست داشتید؟
Packt Build an Online Store with React and GraphQL in 90 Minutes Duration:3 hours 40 minutes

Welcome to Build an Online Store with React and GraphQL in 90 Minutes!Throughout this course, we'll be building an online store called BrewHaha, an e-commerce app that will allow users to order drinks on demand.This will be a full-stack application from scratch, made with React and GraphQL on top of a Node API created by the Strapi tool. We will create and use a MongoDB database, hosted by MLab. It will utilize industry-renowned tools such as Stripe (to process credit card payments made within our React app) and the SendGrid email client to send our users emails when they perform certain actions (such as making a payment).Here's what we will cover:• Creating a complete e-commerce app with React, GraphQL, Stripe, and the headless CMS, Strapi, from scratch• Writing and executing GraphQL queries on the client and server• Performing precise queries and searching operations with GraphQL• Processing credit-card payments and creating orders with Stripe• Integrating Stripe with React using the React-Stripe components library• Using the headless CMS, Strapi, for lightning-fast project creation and prototyping• JWT authentication for users with Sign in/Sign up• Sending emails to users with the SendGrid email service/API • Building a unique, attractive, mobile-first UIs using the new React component library: Gestalt• Creating private routes in React for authenticated users• Extensive work with the LocalStorage API to persist data on the client• Toast notifications for our users to give them feedback about successful actions as well as errors• Custom-loading animations with the React Spinners library • Responsive design using CSS Flexbox• Deploy your application to the web using Heroku and NowIn the end, this will make building full-stack apps with React (and all JavaScript libraries) much easier. We won't be taking any shortcuts in creating our app; we will truly have a complete app which we'll be able to deploy to the web. Visitors will be able to register, add products to their user cart, check-out their items, and pay via their credit card!Interested in building impressive full-stack apps with React and GraphQL in record time? This is the course for you!All the code files are placed at https://github.com/PacktPublishing/Build-an-Online-Store-with-React-and-GraphQL-in-90-Minutes

پیشنهاد آموزش مرتبط در فرادرس