آموزش AWS AppSync و تقویت با React و GraphQL - راهنمای کامل

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

معرفی Introduction

• معرفی مربی Instructor Introduction

• آنچه در این دوره خواهید ساخت What You Will Build in this Course

• آنچه در این دوره خواهید ساخت What You Will Build in this Course

• آنچه در این دوره خواهید آموخت What You'll Learn in this Course

• آنچه در این دوره خواهید آموخت What You'll Learn in this Course

• ساختار دوره Course Structure

معرفی Introduction

• معرفی مربی Instructor Introduction

• ساختار دوره Course Structure

کد منبع و منابع دوره را دانلود کنید Download Course Source Code and Resources

• کد منبع دوره را دانلود کنید Download Course Source Code

• کد منبع دوره را دانلود کنید Download Course Source Code

کد منبع و منابع دوره را دانلود کنید Download Course Source Code and Resources

AWS AppSync و Amplify چیست What's AWS AppSync and Amplify

• AppSync چیست What's AppSync

• AWS Amplify CLI چیست What's AWS Amplify CLI

AWS AppSync و Amplify چیست What's AWS AppSync and Amplify

• AppSync چیست What's AppSync

• AWS Amplify CLI چیست What's AWS Amplify CLI

راه اندازی محیط توسعه Development Environment Setup

• نصب ابزار توسعه Installing Development Tools

• نصب ابزار توسعه Installing Development Tools

• مبانی VSCode VSCode Basics

• مبانی VSCode VSCode Basics

• ایجاد حساب AWS شما Creating Your AWS Account

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

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

• منابع Resources

راه اندازی محیط توسعه Development Environment Setup

• ایجاد حساب AWS شما Creating Your AWS Account

[اختیاری] شروع به کار با GraphQL [OPTIONAL] Getting Started with GraphQL

• راه اندازی اولین پروژه GraphQL ما Setting up our First GraphQL Project

• وارد کردن Express و GraphQL Importing Express and GraphQL

• GraphQL و Express را نصب کنید Install GraphQL and Express

• GraphQL و Express را نصب کنید Install GraphQL and Express

• ایجاد و درک طرحواره ها Creating and Understanding Schemas

• ایجاد و درک طرحواره ها Creating and Understanding Schemas

• RoodQuery و اجرای پرس و جوها در گرافیک The RoodQuery and Running Queries on Graphical

• RoodQuery و اجرای پرس و جوها در گرافیک The RoodQuery and Running Queries on Graphical

• روش حل - برگرداندن داده ها The Resolve Method - Returning Data

• روش حل - برگرداندن داده ها The Resolve Method - Returning Data

• اضافه کردن یک نوع سرگرمی و RootQuery Adding a Hobby Type and RootQuery

• افزودن نوع پست Adding the Post Type

• افزودن روابط بین انواع Adding Relationships Between Types

• افزودن روابط بین انواع Adding Relationships Between Types

• نمایش روابط کاربران Showing Users Relationships

• نمایش روابط کاربران Showing Users Relationships

• نوع کاربر ارتباط با سرگرمی User Type Relationship to Hobby

• پرس و جو پست ها Posts Query

• پرس و جو پست ها Posts Query

• پرس و جو سرگرمی ها Hobbies Query

[اختیاری] شروع به کار با GraphQL [OPTIONAL] Getting Started with GraphQL

• راه اندازی اولین پروژه GraphQL ما Setting up our First GraphQL Project

• وارد کردن Express و GraphQL Importing Express and GraphQL

• اضافه کردن یک نوع سرگرمی و RootQuery Adding a Hobby Type and RootQuery

• افزودن نوع پست Adding the Post Type

• نوع کاربر ارتباط با سرگرمی User Type Relationship to Hobby

• پرس و جو سرگرمی ها Hobbies Query

[اختیاری: GraphQL] - مفاهیم اصلی - جهش [OPTIONAL: GraphQL] - Core Concepts - Mutations

• مقدمه ای بر جهش ها Introduction to Mutations

• ایجاد کاربر با جهش Creating a User with Mutations

• ایجاد یک پست با جهش Creating a Post with Mutations

• ایجاد یک پست با جهش Creating a Post with Mutations

• ایجاد یک سرگرمی با جهش Creating a Hobby with Mutations

• افزودن پرس و جوی پست Adding a Post Query

• افزودن پرس و جوی پست Adding a Post Query

• پرس و جوهای پست و سرگرمی Post and Hobby Queries

• پرس و جوهای پست و سرگرمی Post and Hobby Queries

[اختیاری: GraphQL] - مفاهیم اصلی - جهش [OPTIONAL: GraphQL] - Core Concepts - Mutations

• مقدمه ای بر جهش ها Introduction to Mutations

• ایجاد کاربر با جهش Creating a User with Mutations

• ایجاد یک سرگرمی با جهش Creating a Hobby with Mutations

[اختیاری: GraphQL] - انواع [OPTIONAL: GraphQL] - Types

• آشنایی با انواع اسکالر گرافیکی Understanding Graphical Scalar Types

• آشنایی با انواع اسکالر گرافیکی Understanding Graphical Scalar Types

• انواع Non Nullables Non Nullables Types

• انواع اسکالر و انواع شی Scalar Types and Object Types

[اختیاری: GraphQL] - انواع [OPTIONAL: GraphQL] - Types

• انواع Non Nullables Non Nullables Types

• انواع اسکالر و انواع شی Scalar Types and Object Types

[اختیاری: GraphQL] - اتصال به یک پایگاه داده خارجی - MongoDB- Atlas [OPTIONAL: GraphQL] - Connecting to an External Database - MongoDB- Atlas

• MongoDB در مقابل پایگاه های داده رابطه ای MongoDB vs Relational Databases

• MongoDB در مقابل پایگاه های داده رابطه ای MongoDB vs Relational Databases

• ایجاد یک حساب MongoDB Atlas Creating a MongoDB Atlas Account

• راه اندازی پروژه برای اتصال به MongoDB Atlas Setting up Project to Connect to MongoDB Atlas

• راه اندازی پروژه برای اتصال به MongoDB Atlas Setting up Project to Connect to MongoDB Atlas

• ایجاد یک مدل کاربر - مدل Mongoose Create a User Model - Mongoose Model

• ایجاد یک مدل کاربر - مدل Mongoose Create a User Model - Mongoose Model

• ایجاد یک سرگرمی و مدل های پست Create a Hobby and Post Models

• ایجاد یک سرگرمی و مدل های پست Create a Hobby and Post Models

• ذخیره یک کاربر و یک پست Save a User & a Post

• ذخیره یک کاربر و یک پست Save a User & a Post

• یک سرگرمی را ذخیره کنید Save a Hobby

• یک سرگرمی را ذخیره کنید Save a Hobby

• دریافت کاربران و سرگرمی ها و پست ها Getting Users and Hobbies and Posts

• دریافت کاربران و سرگرمی ها و پست ها Getting Users and Hobbies and Posts

• Cors و اضافه کردن NonNulls به فیلدهای مورد نیاز Cors and Adding NonNulls to Required Fields

• اضافه کردن NonNulls به فیلدهای دیگر را تمام کنید Finish Adding NonNulls to Other fields

[اختیاری: GraphQL] - اتصال به یک پایگاه داده خارجی - MongoDB- Atlas [OPTIONAL: GraphQL] - Connecting to an External Database - MongoDB- Atlas

• ایجاد یک حساب MongoDB Atlas Creating a MongoDB Atlas Account

• Cors و اضافه کردن NonNulls به فیلدهای مورد نیاز Cors and Adding NonNulls to Required Fields

• اضافه کردن NonNulls به فیلدهای دیگر را تمام کنید Finish Adding NonNulls to Other fields

[اختیاری: GraphQL] - جهش های بیشتر [OPTIONAL: GraphQL] - More Mutations

• به روز رسانی یک نوع کاربر Updating a User Type

• به روز رسانی یک پست Updating a Post

• به روز رسانی یک پست Updating a Post

• به روز رسانی یک سرگرمی Updating a Hobby

• حذف یک کاربر Remove a User

• حذف یک کاربر Remove a User

• پست و سرگرمی را حذف کنید Remove Post and Hobby

• پست و سرگرمی را حذف کنید Remove Post and Hobby

[اختیاری: GraphQL] - جهش های بیشتر [OPTIONAL: GraphQL] - More Mutations

• به روز رسانی یک نوع کاربر Updating a User Type

• به روز رسانی یک سرگرمی Updating a Hobby

[اختیاری] استقرار پروژه GraphQL در Heroku [OPTIONAL] Deploying the GraphQL Project to Heroku

• مقدمه - انتشار API برای Heroku Introduction - Publishing the API to Heroku

• استقرار API ما در سرور از راه دور Heroku Deploying our API to Heroku Remote Server

• زمین بازی GraphQL The GraphQL Playground

• زمین بازی GraphQL The GraphQL Playground

[اختیاری] استقرار پروژه GraphQL در Heroku [OPTIONAL] Deploying the GraphQL Project to Heroku

• مقدمه - انتشار API برای Heroku Introduction - Publishing the API to Heroku

• استقرار API ما در سرور از راه دور Heroku Deploying our API to Heroku Remote Server

کنسول AppSync API The AppSync API Console

• AWS AppSync API Console - ایجاد GraphQL API - Query and Mutations AWS AppSync API Console - Create a GraphQL API - Query and Mutations

• AppSync API Console - به روز رسانی و حذف AppSync API Console - Update and Delete

• AppSync API Console - به روز رسانی و حذف AppSync API Console - Update and Delete

• AWS AppSync API Console - Resolvers Overview AWS AppSync API Console - Resolvers Overview

• نمای کلی معماری سیستم - System Architecture Overview -

• نظرات نهایی در مورد AWS AppSync API Console Final thoughts on AWS AppSync API Console

کنسول AppSync API The AppSync API Console

• AWS AppSync API Console - ایجاد GraphQL API - Query and Mutations AWS AppSync API Console - Create a GraphQL API - Query and Mutations

• AWS AppSync API Console - Resolvers Overview AWS AppSync API Console - Resolvers Overview

• نمای کلی معماری سیستم - System Architecture Overview -

• نظرات نهایی در مورد AWS AppSync API Console Final thoughts on AWS AppSync API Console

ساختن یک برنامه بلاگ با Amplify CLI، AppSync و NextJS Building a Blog App with Amplify CLI, AppSync and NextJS

• نسخه نمایشی برنامه وبلاگ Blog App Demo

• ایجاد اپلیکیشن NextJS Creating the NextJS App

• NextJS Hot Reload NextJS Hot Reload

• NextJS Hot Reload NextJS Hot Reload

• راه اندازی Styling با TailwindCSS Setting up Styling with TailwindCSS

• راه اندازی Styling با TailwindCSS Setting up Styling with TailwindCSS

• راه اندازی Amplify در پروژه Setting up Amplify in Project

• راه اندازی API ما با Amplify CLI - Amplify init Setting up our API with Amplify CLI - Amplify init

• راه اندازی API ما با Amplify CLI - Amplify init Setting up our API with Amplify CLI - Amplify init

• تنظیم فایل پیکربندی AWS-Exports Setting up the AWS-Exports Config File

• تنظیم فایل پیکربندی AWS-Exports Setting up the AWS-Exports Config File

• تعامل با GraphQL AppSync API - بازیابی پست ها و نمایش آنها Interacting with the GraphQL AppSync API - Retrieve Posts and Showing them

ساختن یک برنامه بلاگ با Amplify CLI، AppSync و NextJS Building a Blog App with Amplify CLI, AppSync and NextJS

• نسخه نمایشی برنامه وبلاگ Blog App Demo

• ایجاد اپلیکیشن NextJS Creating the NextJS App

• راه اندازی Amplify در پروژه Setting up Amplify in Project

• تعامل با GraphQL AppSync API - بازیابی پست ها و نمایش آنها Interacting with the GraphQL AppSync API - Retrieve Posts and Showing them

NavBar و Amazon Cognito Authentication NavBar and Amazon Cognito Authentication

• راه اندازی NavBar Setting up the NavBar

• افزودن احراز هویت و بررسی کاربران Signedin Adding Authentication and Check for Signedin Users

• راه اندازی نمایه و صفحات ورود به سیستم Setting up the Profile and Signin Pages

• اضافه کردن دکمه خروج Adding the SignOut Button

• اضافه کردن دکمه خروج Adding the SignOut Button

• افزودن رنگ های Root CSS Adding the Root CSS colors

• افزودن دسترسی به API عمومی و خصوصی - Cognito Adding Public and Private API Access - Cognito

• افزودن دسترسی به API عمومی و خصوصی - Cognito Adding Public and Private API Access - Cognito

NavBar و Amazon Cognito Authentication NavBar and Amazon Cognito Authentication

• راه اندازی NavBar Setting up the NavBar

• افزودن احراز هویت و بررسی کاربران Signedin Adding Authentication and Check for Signedin Users

• راه اندازی نمایه و صفحات ورود به سیستم Setting up the Profile and Signin Pages

• افزودن رنگ های Root CSS Adding the Root CSS colors

ارسال و نمایش داده ها Posting and Showing Data

• راه اندازی ایجاد صفحه پست - قسمت 1 Setting up Create Post Page - Part 1

• ارسال داده ها از برنامه - قسمت 2 Posting data from the App - Part 2

• شناسه دینامیک و نشان دادن پست جدید ایجاد شده Dynamic ID and showing the Newly Created Post

• افزودن مقداری نشانه گذاری و استایل به مسیر فهرست Adding some Markup and Styling to Index Route

• ایجاد صفحه پست های من Creating My Posts Page

• اضافه کردن استایل به صفحه MyPosts Adding Styling to MyPosts Page

• اضافه کردن استایل به صفحه MyPosts Adding Styling to MyPosts Page

ارسال و نمایش داده ها Posting and Showing Data

• راه اندازی ایجاد صفحه پست - قسمت 1 Setting up Create Post Page - Part 1

• ارسال داده ها از برنامه - قسمت 2 Posting data from the App - Part 2

• شناسه دینامیک و نشان دادن پست جدید ایجاد شده Dynamic ID and showing the Newly Created Post

• افزودن مقداری نشانه گذاری و استایل به مسیر فهرست Adding some Markup and Styling to Index Route

• ایجاد صفحه پست های من Creating My Posts Page

ویرایش و حذف کاربران و پست ها Editing and Deleting Users and Posts

• حذف پست Delete Post

• به روز رسانی پست - قسمت 1 Update Post - Part 1

• به روز رسانی پست - قسمت 1 Update Post - Part 1

• ویرایش یک پست Editing a Post

• ویرایش یک پست Editing a Post

• کاری که ما تاکنون انجام داده ایم What We've Done so Far

ویرایش و حذف کاربران و پست ها Editing and Deleting Users and Posts

• حذف پست Delete Post

• کاری که ما تاکنون انجام داده ایم What We've Done so Far

افزودن یک تصویر پست به آمازون S3 Adding a Post Image to Amazon S3

• تنظیم پست تصویر در S3 - قسمت 1 Setting up POst Image to S3 - Part 1

• ذخیره تصویر در S3 Saving Image to S3

• نمایش تصویر در نمای جزئیات Showing Image when In the Detail View

• نمایش تصویر در نمای جزئیات Showing Image when In the Detail View

• نمایش پست ها با تصاویر در صفحه اصلی Showing Posts with Images in Main Page

• خلاصه بخش Section Summary

• چالش: نمایش تصاویر در صفحه MyPosts CHALLENGE: Show Images in MyPosts Page

• چالش: نمایش تصاویر در صفحه MyPosts CHALLENGE: Show Images in MyPosts Page

• راه حل: نمایش تصاویر در صفحه MyPosts SOLUTION: Show Images in MyPosts Page

• راه حل: نمایش تصاویر در صفحه MyPosts SOLUTION: Show Images in MyPosts Page

• به روز رسانی یک پست با تصویر Updating a Post with Image

• خلاصه بخش Section Summary

افزودن یک تصویر پست به آمازون S3 Adding a Post Image to Amazon S3

• تنظیم پست تصویر در S3 - قسمت 1 Setting up POst Image to S3 - Part 1

• ذخیره تصویر در S3 Saving Image to S3

• نمایش پست ها با تصاویر در صفحه اصلی Showing Posts with Images in Main Page

• به روز رسانی یک پست با تصویر Updating a Post with Image

• خلاصه بخش Section Summary

ایجاد نظرات - روابط جدول Creating Comments - Table Relationships

• ارتباط جدول و تنظیم و ایجاد نظرات در کنسول Table Relationship & Setting up and Creating Comments in Console

• ارتباط جدول و تنظیم و ایجاد نظرات در کنسول Table Relationship & Setting up and Creating Comments in Console

• تنظیم نظر در جزئیات پست ها Setup Comment in Posts Details

• ایجاد نظر در نمای پست و ذخیره در پایگاه داده Creating a Comment in the Post View and Saving to Database

• نمایش نظرات در صفحه اصلی Showing Comments in Main Page

• نمایش نظرات در صفحه اصلی Showing Comments in Main Page

• خلاصه بخش Section Summary

• خلاصه بخش Section Summary

• منابع Resources

• منابع Resources

ایجاد نظرات - روابط جدول Creating Comments - Table Relationships

• تنظیم نظر در جزئیات پست ها Setup Comment in Posts Details

• ایجاد نظر در نمای پست و ذخیره در پایگاه داده Creating a Comment in the Post View and Saving to Database

• خلاصه بخش Section Summary

• منابع Resources

تقویت دستورات مهم Amplify Important Commands

• تقویت دستورات مفید Amplify Useful Commands

• تقویت دستورات (CLI) Amplify Commands (CLI)

• تقویت دستورات (CLI) Amplify Commands (CLI)

تقویت دستورات مهم Amplify Important Commands

• تقویت دستورات مفید Amplify Useful Commands

میزبانی AWS - میزبانی برنامه ما در میزبانی AWS AWS Hosting - Hosting our App in AWS Hosting

• آماده سازی برنامه و استقرار در هاست آمازون Preparing the App and Deploying to Amazon Hosting

• آماده سازی برنامه و استقرار در هاست آمازون Preparing the App and Deploying to Amazon Hosting

• رفع مشکل ایجاد نظر Fixing the Create Comment Issue

• رفع مشکل ایجاد نظر Fixing the Create Comment Issue

• رفع مشکلات استقرار Fixing Deployment Issues

میزبانی AWS - میزبانی برنامه ما در میزبانی AWS AWS Hosting - Hosting our App in AWS Hosting

• رفع مشکلات استقرار Fixing Deployment Issues

اشتراک های AppSync AppSync Subscriptions

• اجرای اشتراک ها Implementing Subscriptions

اشتراک های AppSync AppSync Subscriptions

• اجرای اشتراک ها Implementing Subscriptions

مراحل بعدی Next Steps

• مراحل بعدی Next Steps

• مراحل بعدی Next Steps

مراحل بعدی Next Steps