اپلیکیشن FullStack تحویل غذا - پرداخت Stripe و داشبورد ادمین
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- چگونه با React Js رابط کاربری (UI) مدرن ایجاد کنید؟
- یاد بگیرید چگونه درگاه پرداخت Stripe را یکپارچه کنید.
- یاد بگیرید چگونه با Nodejs Express و Firebase Cloud Functions اندپوینت های سفارشی API بسازید.
- یاد بگیرید چگونه از انیمیشنهای Framer Motion در وبسایتهای خود استفاده کنید.
- یاد بگیرید چگونه یک رابط کاربری مدرن بسازید و آن را به صورت رایگان در Firebase مستقر کنید.
- یاد بگیرید چگونه با استفاده از Tailwind CSS و Material UI رابط کاربری متریال بسازید.
توضیحات دوره
مدرس به شما نشان خواهد داد که ساخت یک اپلیکیشن فول استک تحویل غذا با استفاده از Firebase ،React.js و Tailwind CSS چقدر ساده است.
تکنولوژیهایی که در این دوره مورد بحث قرار میگیرند، در زیر فهرست و توضیح داده شدهاند.
Firebase چیست؟
Firebase پلتفرمی است که توسط گوگل برای ایجاد اپلیکیشنهای موبایل و وب توسعه یافته است. این در اصل یک شرکت مستقل بود که در سال 2011 تأسیس شد. در سال 2014، گوگل این پلتفرم را خریداری کرد و اکنون محصول پرچمدار آنها برای توسعه اپلیکیشن است.
React چیست؟
React یک کتابخانه جاوا اسکریپت front-end، رایگان و متنباز برای ساخت رابطهای کاربری مبتنی بر کامپوننتهای UI است. این کتابخانه توسط Meta و جامعهای از توسعهدهندگان و شرکتها نگهداری میشود. React میتواند به عنوان پایهای در توسعه اپلیکیشنهای تکصفحهای یا موبایل استفاده شود.
Firebase Cloud Functions چیست؟
Cloud Functions برای Firebase یک فریمورک بدون سرور است که به شما امکان میدهد کدهای بکاند را به طور خودکار در پاسخ به رویدادهای ناشی از ویژگیهای Firebase و درخواستهای HTTPS اجرا کنید. کدهای JavaScript یا TypeScript شما در ابر گوگل ذخیره شده و در یک محیط مدیریتشده اجرا میشوند.
Framer Motion چیست؟
Framer Motion یک کتابخانه انیمیشن جدید، متنباز و آماده استفاده برای React در وب است.
Framer برای چه کاری استفاده میشود؟
Framer عمدتاً یک ابزار طراحی و نمونهسازی است. این ابزار به شما اجازه میدهد تا نمونههای اولیه تعاملی از وبسایتها و اپلیکیشنها را با استفاده از کامپوننتهای واقعی و دادههای واقعی طراحی کنید.
درگاه پرداخت Stripe
این درگاه هر آنچه را که برای ساخت وبسایتها و اپلیکیشنهایی که پرداختها را میپذیرند و پرداختهای جهانی را ارسال میکنند، گرد هم میآورد. محصولات Stripe پرداختها را برای خردهفروشان آنلاین و حضوری، کسبوکارهای مبتنی بر اشتراک، پلتفرمهای نرمافزاری و مارکت پلیس ها و هر چیز دیگری در این میان، امکانپذیر میسازد.
وبهوکهای Stripe
وبهوک یک اندپوینت HTTP است که رویدادها را از Stripe دریافت میکند. وبهوکها به شما این امکان را میدهند که از رویدادهای پرداختی که در دنیای واقعی خارج از جریان پرداخت شما اتفاق میافتد مطلع شوید، مانند: پرداختهای موفق (payment_intent.succeeded) یا پرداختهای مورد مناقشه (charge)
این دوره برای چه کسانی مناسب است؟
- دانشجویانی که میخواهند مسیر شغلی خود را به عنوان توسعهدهنده فول استک وب آغاز کنند.
اپلیکیشن FullStack تحویل غذا - پرداخت Stripe و داشبورد ادمین
-
مقدمه 10:50
-
راهاندازی Node.js و Yarn 02:58
-
افزونههای توسعهدهنده Visual Studio Code 05:24
-
ساختار پروژه 01:46
-
راهاندازی و پیکربندی GitHub 06:39
-
سفارشیسازی فایل README مخزن 08:04
-
ایجاد اپلیکیشن React 05:09
-
ایجاد پروژه Firebase 06:09
-
راهاندازی و پیکربندی Firebase Cloud Functions گوگل 04:53
-
راهاندازی و پیکربندی TailwindCSS با اپلیکیشن React 10:20
-
اپلیکیشن React - راهاندازی و پیکربندی مسیریابی اصلی 06:54
-
ساخت رابط کاربری (UI) کانتینر اصلی ورود - قسمت 1 14:32
-
ساخت رابط کاربری (UI) کانتینر اصلی ورود - قسمت 2 14:35
-
ساخت رابط کاربری (UI) کانتینر اصلی ورود - قسمت 3 16:55
-
ساخت رابط کاربری (UI) کانتینر اصلی ورود - قسمت 4 04:13
-
راهاندازی اولیه Firebase 09:09
-
احراز هویت گوگل در Firebase 02:37
-
آغاز فرآیند احراز هویت گوگل 09:16
-
پیکربندی Cloud Function سمت سرور 12:09
-
اندپوینت API برای اعتبارسنجی توکن 13:43
-
اعتبارسنجی JSON Web Token (JWT) 07:20
-
ثبتنام با ایمیل و رمز عبور 09:09
-
ورود با ایمیل و رمز عبور 06:17
-
پیکربندی React Redux 10:47
-
Dispatching اکشن کاربر به Store سراسری 16:05
-
کامپوننت UI انیمیشن لودر صفحه اصلی 03:17
-
راهاندازی - اعلانهای هشدار (Alert) 17:53
-
رابط کاربری (UI) هدر اصلی - قسمت 1 11:10
-
رابط کاربری (UI) هدر اصلی - قسمت 2 20:27
-
پیادهسازی خروج از حساب 06:58
-
بخش اصلی چپ - نوار کناری سمت چپ 10:23
-
هدر داشبورد 15:34
-
مسیریاب ناوبری اصلی داشبورد 06:01
-
یکپارچهسازی Material UI - Datatable 26:43
-
داشبورد - آیتم جدید 09:13
-
داشبورد - آیتم جدید قسمت 2 13:06
-
آپلود تصاویر در Cloud Storage 12:58
-
رابط کاربری (UI) نوار پیشرفت آپلود و حذف تصویر 05:42
-
ذخیره محصول جدید در کالکشن Firestore 23:19
-
دریافت محصولات از کالکشنها و ارسال به Redux Store 18:07
-
آیتمهای داشبورد - یکپارچهسازی دادهها با Datatable 09:36
-
حذف محصول از کالکشن از طریق Datatable 09:20
-
بهروزرسانی جزئیات کاربر 06:14
-
اضافه کردن ChartUI - کامپوننت اصلی UI 11:32
-
ساخت رابط کاربری (UI) صفحه اصلی 17:09
-
اسلایدر صفحه اصلی با استفاده از Swiper Slider 12:43
-
کامپوننت کارت اسلایدر - قابل استفاده مجدد کردن آن 07:10
-
اضافه کردن بخش فیلتر داده 11:12
-
درج داده در سبد خرید 13:40
-
ذخیره اقلام سبد خرید در Redux Store 06:57
-
رابط کاربری (UI) اصلی سبد خرید - طرحبندی 19:17
-
افزایش و کاهش تعداد سبد خرید 12:32
-
یکپارچهسازی درگاه پرداخت Stripe 18:25
-
ایجاد Line Items سفارشی خودمان 10:41
-
پیادهسازی - رویدادهای وبهوک Stripe 13:55
-
ایجاد مشتری جدید با استفاده از وبهوک Stripe 08:54
-
ارسال جزئیات سفارش به پایگاه داده 09:36
-
دریافت سفارشها از کالکشن و ارسال آن به Redux Store 07:39
-
دیتاکارت سفارشها - طراحی وایرفریم طرحبندی 04:54
-
دیتاکارت سفارش - سفارشیسازی رابط کاربری 17:17
-
بروزرسانی وضعیت سفارش 04:51
-
نمایش سفارشهای ثبت شده توسط کاربر خاص 10:34
-
رفع باگهای جزئی 06:53
مشخصات آموزش
اپلیکیشن FullStack تحویل غذا - پرداخت Stripe و داشبورد ادمین
- تاریخ به روز رسانی: 1404/10/04
- سطح دوره:مقدماتی
- تعداد درس:63
- مدت زمان :11:07:45
- حجم :6.73GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy