آموزش React & AWS Amplify یک برنامه کامل بدون سرور با CI/CD می‌سازد

سرفصل ها و درس ها

نصب و پیکربندی Amplify Installing and Configuring Amplify

• نصب Amplify CLI Installing the Amplify CLI

• پیکربندی Amplify CLI Configuring the Amplify CLI

ایجاد برنامه React ما Creating our React app

• ایجاد برنامه React ما Creating our React app

• راه اندازی AWS Amplify Initialising AWS Amplify

• راه اندازی وب سایت React ما با استفاده از AWS Amplify Console Deploying our React website using AWS Amplify Console

• ایجاد یک CI/CD برای React App با استفاده از Amplify Creating a CI/CD to our React App using Amplify

• آزمایش خط لوله CI/CD ما برای React Testing our CI/CD pipeline for React

ایجاد احراز هویت در AWS و اجرای آن در برنامه React ما Creating Authentication on AWS and enforcing it on our React app

• ایجاد یک باطن احراز هویت در AWS با استفاده از Coginito Creating a deploying a Authentication backend in AWS using Coginito

• نصب ماژول های React و پیکربندی AWS Amplify در React Installing React modules and configuring AWS Amplify in React

• ایجاد صفحات SignUp، SignIn، SignOut و Reset Password Creating the SignUp, SignIn, SignOut and Reset Password pages

ایجاد یک API Graphql با استفاده از Amplify Creating a Graphql API using Amplify

• ایجاد Graphql API در backend با استفاده از Amplify Creating the Graphql API in the backend using Amplify

• ایجاد مدل Graphql ما Creating our Graphql Model

• ایجاد اولین پرس و جو و اولین جهش Creating our first Query and First Mutation

• جستجوی Graphql ما در AppSync از برنامه React ما Querying our Graphql in AppSync from our React app

با Semantic-UI شگفت‌انگیز جلوه دادن برنامه Amplify ما Making our Amplify App look amazing with Semantic-UI

• افزودن Semantic UI React به پروژه ما و ایجاد یک سربرگ اصلی جدید Adding Semantic UI React to our project and creating a new Main Header

• یک جزء Lists برای گروه بندی لیست های ما ایجاد کنید Create a Lists component to group our lists

• ایجاد آیتم ها و گروه های آیتم ها با Semantic-UI React Creating Items and Items groups with Semantic-UI React

• اضافه کردن صفحه به یک کانتینر و افزودن تصویر و تاریخ به لیست ما Adding out page into a Container and adding Image and date to our list

ایجاد یک دکمه شناور مانند Material UI Creating a floating button like on Material UI

• ایجاد یک دکمه اکشن شناور در React Creating a floating action button in React

ایجاد یک Modal با استفاده از Semantic-UI Creating a Modal using Semantic-UI

• ایجاد یک مدال جدید با استفاده از Semantic-UI Creating a new modal using Semantic-UI

• افزودن تمام فیلدها در حالت ما Adding all the fields on our modal

مدیریت حالت Modal با استفاده از React Hooks Managing the Modal State using React Hooks

• با استفاده از useReducer وضعیت را مدیریت کنید Manage the state using useReducer

ایجاد یک جهش Graphql Creating a Graphql Mutations

• جهش Graphql، یک مورد جدید به AppSync اضافه کنید Graphql mutation, add a new item to AppSync

ایجاد اشتراک Grahql Creating a Grahql Subscription

• اشتراک Graphql، اشتراک به‌روزرسانی‌های بلادرنگ در graphql Graphql subscription, subscribing to real time updates in graphql

چند کد Refactoring قبل از ادامه Some code Refactoring before continue

• بازسازی کد، انتقال وضعیت مدال به کاهنده Refactoring the code, moving the modal status to the reducer

• پاک کردن اشتراک در useEffect Cleaning up the subscription in useEffect

ایجاد حذف و اشتراک Graphql Creating a Graphql deletion and subscription

• حذف یک مورد هنگام فراخوانی ارسال از یک مؤلفه دیگر Deleting an item while calling dispatch from another component

• حذف لیست از Graphql Deleting a list from Graphql

• اشتراک در جهش onDelete در AppSync Subscribing to onDelete mutation in AppSync

ایجاد مدال ویرایش قابل استفاده مجدد Creating the reusable editing modal

• دکمه ویرایش، ارسال و کاهش دهنده را ایجاد کنید Create the Edit button, dispatch and reducer

• باز کردن مدال ویرایش Opening the edit modal

• ایجاد یک مدال قابل استفاده مجدد Creating a reusable modal

به روز رسانی لیست ها و ایجاد اشتراک برای به روز رسانی آن Updating the lists and creating a Subscription to update it

• به روز رسانی لیست Updating the list

• اشتراک در اشتراک onUpdate Subscribing to onUpdate subscription

• به روز رسانی مقادیر دریافت شده در اشتراک Updating the values received on the subscription

به روز رسانی زمان واقعی در حال حاضر اینجا است Real Time Update is already here

• تعجب، این برنامه در حال حاضر به روز رسانی در زمان واقعی است Surprise, this app is already updating in real time

ایجاد سطل S3 برای ذخیره تصاویر ما Creating our S3 bucket to store our images

• ایجاد یک سطل S3 برای نگهداری فایل های ما Creating a S3 Bucket to keep our files

• ایجاد یک کامپوننت تصویر آپلود برای آپلود تصاویر در S3 Bucket Creating an Upload Image Component to upload images to S3 Bucket

روتوش UI و Refactoring کد Retouching the UI and Refactoring the code

• با استفاده از useRef برای پنهان کردن ورودی، کامپوننت جدیدمان خوب به نظر برسد Making our new component look good using useRef to hide the input

ایجاد پیش نمایش تصویر و آپلود آن در S3 Creating a Image Preview and uploading it to S3

• نمایش پیش نمایش تصویر قبل از به روز رسانی تصویر Showing an image preview before update the image

• یک تصویر را در سطل S3 آپلود کنید Uploadind a Image to the S3 Bucket

در حال به روز رسانی مدل Graphql ما Updating our Graphql model

• در حال به روز رسانی پایگاه داده Graphql برای داشتن imagekey Updating our Graphql database to have the imagekey

ایجاد یک React Custom Hook برای کمک به S3 Creating a React Custom Hook to help with S3

• ایجاد یک هوک سفارشی برای آپلود در S3 Bucket Creating a custom Hook to upload to S3 Bucket

• با استفاده از React Custom Hook در Modal خود Using our React Custom Hook in our Modal

• بررسی مقادیر موجود در DynamoDB و S3 Bucket Checking the values in our DynamoDB and S3 Bucket

بارگیری تصاویر ما از S3 در AWS Loading our images from S3 on AWS

• در حال بارگیری تصویر ما از S3 Loading our Image from S3

بهبود برنامه ما با یک لودر چرخشی Enhancing our App with a Spinning loader

• در حالی که تصاویر خود را بارگذاری می کنیم، یک لودر چرخشی اضافه می کنیم Adding a Spinning Loader while we load our Images

• پس از بارگذاری تصویر، لودرهای اسپینر را متوقف کنید Stopping the spinner loaders once the image has loaded

مدل های قابل جستجو با جستجوی الاستیک Searchable models with Elastic Search

• درک کنید که چرا باید مدل خود را قابل جستجو کنیم Understand why do we need to make our model searchable

• ساخت مدل قابل جستجو Making the model searchable

به روز رسانی Amplify (در صورت نیاز) Updating Amplify (if you need it)

• در حال به روز رسانی Amplify به آخرین نسخه Updating Amplify to the latest version

اطلاعات بیشتر درباره پرس و جوهای قابل جستجو و جستجوی الاستیک More about searchable queries and elastic search

• پرس و جو قابل جستجو و به روز رسانی لیست های ما را درک کنید Understand the searchable query and updating our lists

ایجاد مسیرهای جدید برای برنامه ما با استفاده از react-router و react-router-dom Creating new routes for our app using react-router and react-router-dom

• نصب React Router Dom و ایجاد یک Root Route جدید Installing React Router Dom and creating a new Root Route

• افزودن یک مسیر جدید در React Router Dom Adding a new Route on the React Router Dom

• ایجاد مسیریاب های پویا و ارسال مقادیر به اجزای جدید Creating Dynamic Routers and passing values to the new components

• افزودن پیوند از React Router Dom به لیست های خود Adding Link from React Router Dom on your lists

هدر جدید برای مسیر جدید New Header for the new route

• ایجاد هدر برای صفحه فهرست Creating a Header for the List Page

ایجاد آیتم های لیست جدید با استفاده از رابط GraphQl در کنسول AWS Amplify Creating new list items using the GraphQl interface in AWS Amplify console

• گنجاندن برخی از موارد فهرست و پرس و جو جستجوی ما Crating some list items and our search query

سفره خانه کوچک Small Refectory

• دوباره سازی کد برای گنجاندن همه روترهای داخل main Refactoring the code to include all the routers inside main

یکپارچه سازی لیست ما و جزء لیست خارج Integrating our List and out List Component

• ارسال جزئیات لیست ما به جزء آیتم لیست Passing our list details to the list item component

• درخواست همگام‌سازی برنامه برای موارد فهرست با استفاده از قابلیت جستجو Querying the app-sync for the list items using searchable

قابل جستجو در مقابل بدون جستجو Searchable vs No Searchable

• درک تفاوت بین مدل های قابل جستجو و غیرقابل جستجو Understanding the difference between a searchable and a not searchable models

• ایجاد پرس و جو قابل جستجوی ما Creating our searchable query

ایجاد یک پرس و جو سفارشی با استفاده از GraphQl در App-Sync Creating a custom query using GraphQl in App-Sync

• ایجاد یک درخواست سفارشی همگام سازی برنامه Creating a app-sync custom query

• نمایش موارد لیست ما Displaying our list items

افزودن احراز هویت و مجوز نقطه پایانی مختلف Adding authentication and authorisation the the different end point

• افزودن اعتبار به نقاط پایانی GraphQl ما Adding auth to our GraphQl endpoints