آموزش کدنویسی Serverless در زبان React و بر روی AWS

با مشاهده این کورس آموزشی از طریق انجام پروژه های واقعی و به زبانی بسیار ساده مطالب فراوانی را در رابطه با آمازون وب سرویسز یاد می گیرید.

عنوان اصلی : React & AWS Amplify build a complete serverless app w/ CI/CD

سرفصل ها :

نصب و پیکربندی Amplify:
نصب Amplify CLI
پیکربندی Amplify CLI
ایجاد برنامه React ما:
ایجاد برنامه React ما
راه اندازی AWS Amplify
راه اندازی وب سایت React ما با استفاده از AWS Amplify Console
ایجاد یک CI/CD برای React App با استفاده از Amplify
آزمایش خط لوله CI/CD ما برای React
ایجاد احراز هویت در AWS و اجرای آن در برنامه React ما:
ایجاد یک باطن احراز هویت در AWS با استفاده از Coginito
نصب ماژول های React و پیکربندی AWS Amplify در React
ایجاد صفحات SignUp، SignIn، SignOut و Reset Password
ایجاد یک API Graphql با استفاده از Amplify:
ایجاد Graphql API در backend با استفاده از Amplify
ایجاد مدل Graphql ما
ایجاد اولین پرس و جو و اولین جهش
جستجوی Graphql ما در AppSync از برنامه React ما
با Semantic-UI شگفت‌انگیز جلوه دادن برنامه Amplify ما:
افزودن Semantic UI React به پروژه ما و ایجاد یک سربرگ اصلی جدید
یک جزء Lists برای گروه بندی لیست های ما ایجاد کنید
ایجاد آیتم ها و گروه های آیتم ها با Semantic-UI React
اضافه کردن صفحه به یک کانتینر و افزودن تصویر و تاریخ به لیست ما
ایجاد یک دکمه شناور مانند Material UI:
ایجاد یک دکمه اکشن شناور در React
ایجاد یک Modal با استفاده از Semantic-UI:
ایجاد یک مدال جدید با استفاده از Semantic-UI
افزودن تمام فیلدها در مدال ما
مدیریت حالت Modal با استفاده از React Hooks
با استفاده از useReducer وضعیت را مدیریت کنید
ایجاد یک جهش Graphql:
جهش Graphql، یک مورد جدید به AppSync اضافه کنید
ایجاد اشتراک Grahql
اشتراک Graphql، اشتراک به‌روزرسانی‌های بلادرنگ در graphql
چند کد Refactoring قبل از ادامه
بازسازی کد، انتقال وضعیت مدال به کاهنده
پاک کردن اشتراک در useEffect
ایجاد حذف و اشتراک Graphql:
حذف یک مورد هنگام فراخوانی ارسال از یک مؤلفه دیگر
حذف لیست از Graphql
اشتراک در جهش onDelete در AppSync
ایجاد مدال ویرایش قابل استفاده مجدد
دکمه ویرایش، ارسال و کاهش دهنده را ایجاد کنید
باز کردن مدال ویرایش
ایجاد یک مدال قابل استفاده مجدد
به روز رسانی لیست ها و ایجاد اشتراک برای به روز رسانی آن:
به روز رسانی لیست
اشتراک در اشتراک onUpdate
به روز رسانی مقادیر دریافتی در اشتراک
به روز رسانی زمان واقعی در حال حاضر اینجا است:
با کمال تعجب، این برنامه در حال به روز رسانی در زمان واقعی است
ایجاد سطل S3 برای ذخیره تصاویر:
ایجاد یک سطل S3 برای نگهداری فایل های ما
ایجاد یک کامپوننت تصویر آپلود برای آپلود تصاویر در S3 Bucket
روتوش UI و تغییر کد:
با استفاده از useRef برای پنهان کردن ورودی، کامپوننت جدیدمان خوب به نظر برسد
نمایش پیش نمایش تصویر قبل از به روز رسانی تصویر
یک تصویر را در سطل S3 آپلود کنید
در حال به روز رسانی مدل Graphql ما
در حال به روز رسانی پایگاه داده Graphql برای داشتن imagekey
ایجاد یک React Custom Hook برای کمک به S3:
ایجاد یک هوک سفارشی برای آپلود در S3 Bucket
با استفاده از React Custom Hook در Modal خود
بررسی مقادیر موجود در سطل DynamoDB و S3 ما
بارگیری تصاویر ما از S3 در AWS
در حال بارگیری تصویر ما از S3
بهبود برنامه ما با یک بارگذار چرخشی:
در حالی که تصاویر خود را بارگذاری می کنیم، یک لودر چرخشی اضافه می کنیم
پس از بارگذاری تصویر، لودرهای اسپینر را متوقف کنید
مدل های قابل جستجو با جستجوی الاستیک:
درک کنید که چرا باید مدل خود را قابل جستجو کنیم
ساخت مدل قابل جستجو
به روز رسانی Amplify (در صورت نیاز)
در حال به روز رسانی Amplify به آخرین نسخه
اطلاعات بیشتر درباره پرس و جوهای قابل جستجو و جستجوی الاستیک:
پرس و جوی قابل جستجو و به روز رسانی لیست های ما را درک کنید
ایجاد مسیرهای جدید برای برنامه ما با استفاده از react-router و react-router-dom:
نصب React Router Dom و ایجاد Root Route جدید
اضافه کردن یک مسیر جدید در React Router Dom
ایجاد مسیریاب های پویا و ارسال مقادیر به اجزای جدید
افزودن پیوند از React Router Dom به لیست های خود
سربرگ جدید برای مسیر جدید
ایجاد هدر برای صفحه فهرست
ایجاد آیتم های لیست جدید با استفاده از رابط GraphQl در کنسول AWS Amplify
گنجاندن برخی از موارد فهرست و پرس و جو جستجوی ما
سفره خانه کوچک
دوباره سازی کد برای گنجاندن همه روترهای داخل main
ادغام جزء لیست و خارج از لیست ما:
ارسال جزئیات لیست ما به جزء آیتم لیست
درخواست همگام‌سازی برنامه برای موارد فهرست با استفاده از قابلیت جستجو
قابل جستجو در مقابل بدون جستجو
درک تفاوت بین مدل های قابل جستجو و غیرقابل جستجو
ایجاد پرس و جو قابل جستجوی ما
ایجاد یک کوئری سفارشی با استفاده از GraphQl در App-Sync:
ایجاد یک درخواست سفارشی همگام سازی برنامه
نمایش موارد لیست ما
افزودن احراز هویت و مجوز نقطه پایانی مختلف
افزودن اعتبار به نقاط پایانی GraphQl