آموزش AWS Amplify Studio Masterclass - Visual Build UI & Backend

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

معرفی Introduction

• معرفی دوره Course Introduction

• درباره مربی About Instructor

• پیش نیازهای دوره Course Prerequisites

معرفی Introduction

کد منبع و منابع را دانلود کنید Download Source code and Resources

• کد منبع را دانلود کنید Download source code

• لینک های تصویر Image Links

کد منبع و منابع را دانلود کنید Download Source code and Resources

Amplify Studio و Amplify CLI - مقدمه Amplify Studio and Amplify CLI - Introduction

• Amplify and Amplify Studio و And Amplify CLI چیست What's Amplify and Amplify Studio and And Amplify CLI

• مزایا و قابلیت های استودیو را تقویت کنید Amplify Studio Advantages and Capabilities

• قیمت گذاری استودیو را تقویت کنید Amplify Studio Pricing

Amplify Studio و Amplify CLI - مقدمه Amplify Studio and Amplify CLI - Introduction

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

• مهم - این را بخوانید! IMPORTANT - Read This!

• راه اندازی محیط توسعه - بررسی اجمالی Setup Development Environment - Overview

• راه اندازی ابزار توسعه Development Tools Setup

• راه اندازی Amplify CLI Setting up Amplify CLI

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

راه اندازی Sandbox برای Amplify Studio The Launch Sandbox for Amplify Studio

• راه اندازی Sandbox - راه اندازی یک مدل Sandbox Data و React App Launch Sandbox - Setting up a Sandbox Data model and React App

• Setup React - ایجاد Todo Setup React - Create Todo

• پرس و جو و نمایش کارها Querying and Showing Todos

• یک Todo را به روز کنید Update a Todo

• یک Todo را حذف کنید Delete a Todo

راه اندازی Sandbox برای Amplify Studio The Launch Sandbox for Amplify Studio

AWS Amplify Studio - یک برنامه Fullstack React بسازید AWS Amplify Studio - Build a Fullstack React App

• شروع به کار با برنامه Fullstack - Petstore Getting Started with the Fullstack App - Petstore

• راه اندازی Git Repo Setup Git Repo

• [اختیاری] مبانی Git [Optional] Git Basics

• ایجاد برنامه Fullstack ما با Amplify Studio - Creating and Seeding Data Model Creating our Fullstack app with Amplify Studio - Creating and Seeding Data Model

• اجزای Figma و React Figma and React Components

• راه اندازی Figma و ویرایش کامپوننت و همگام سازی Setting up Figma and Editing a Component and Syncing

• اتصال UI به مدل داده Binding UI to Data Model

• راه اندازی React App و Pull Components Setup React App and Pull Components

• نمایش مجموعه حیوانات خانگی و به‌روزرسانی مؤلفه Showing our Pet Collection and Updating the Component

AWS Amplify Studio - یک برنامه Fullstack React بسازید AWS Amplify Studio - Build a Fullstack React App

ویژگی‌های مؤلفه رابط کاربری و کنترل‌کننده‌های رویداد UI Component Properties & Event Handlers

• ویژگی های مؤلفه - نمای کلی Component Properties - Overview

• ویرایش و افزودن خواص به کامپوننت ها Editing and Adding Properties to the Components

• کامپوننت PetProfile را سفارشی کنید Customize PetProfile Component

• اضافه کردن onClick Delete Event از طریق Studio - Delete Item Adding onClick Delete Event via Studio - Delete Item

ویژگی‌های مؤلفه رابط کاربری و کنترل‌کننده‌های رویداد UI Component Properties & Event Handlers

نوار نوار و پاورقی - Hands-On The Navbar and Footer - Hands-On

• افزودن نوار ناوبری و پاورقی Adding a Navbar and Footer

• افزودن Props - Width - به Navbar و Footer Components Adding Props - Width - to Navbar and Footer Components

• گسترش کد مولفه تولید شده Extending Generated Component Code

• ارسال React Props به کامپوننت ها Passing React Props to Components

• Props را لغو کنید Override Props

• گسترش اجزای تولید شده از طریق Overrides Prop - افزودن رویداد onClick در کد Extending Generated Components via Overrides Prop - Adding onClick Event In Code

• افزودن تصویر لوگو در Amplify Studio Adding Logo Image in Amplify Studio

• اضافه کردن تصویر لوگو در کد Adding Logo Image in Code

• Style و Onclick Action را به AddPet اضافه کنید Add Style and Onclick Action to AddPet

نوار نوار و پاورقی - Hands-On The Navbar and Footer - Hands-On

فرم حیوان خانگی را اضافه کنید Add Pet Form

• افزودن فرم حیوان خانگی - نمای کلی Add Pet Form - Overview

• ایجاد فرم Add Pet در Figma Creating the Add Pet Form in Figma

• استایل دادن به فرم Styling the Form

• پنهان کردن و نمایش فرم Hiding and Showing Form

• فیلدها را با داده تنظیم کنید و یک حیوان خانگی را ذخیره کنید Setup Fields with Data and Save a Pet

• بستن فرم AddPet Closing the AddPet Form

فرم حیوان خانگی را اضافه کنید Add Pet Form

جزئیات حیوان خانگی Pet Details

• جزئیات حیوان خانگی - بررسی اجمالی Pet Details - Overview

• تنظیم جزئیات حیوان خانگی ارائه آن در برنامه Setup Pet Details Rendering it in the App

• نمایش داده های حیوان خانگی در کارت جزئیات Show Pet Data on the Details Card

• تنظیم دکمه بستن جزئیات Setting up the Details Close Button

جزئیات حیوان خانگی Pet Details

پت را به روز کنید Update Pet

• به روز رسانی حیوان خانگی - بررسی اجمالی Update Pet - Overview

• راه اندازی به روز رسانی UI Setting up Update UI

• به روز رسانی حیوان خانگی Updating the Pet

پت را به روز کنید Update Pet

احراز هویت با AWS Amplify Studio Authentication with AWS Amplify Studio

• احراز هویت - نمای کلی Authentication - Overview

• دکمه Signout را در نوار ناوبری تنظیم کنید Setup the Signout Button in the Navbar

• افزودن احراز هویت به برنامه ما Adding Authentication to our App

• افزودن Signout و نمایش تصویر نمایه کاربر Adding Signout and Showing User Profile Image

• اضافه کردن نام کاربری به نوار نوار - تمرین Add Username to Navbar - Exercise

• راه حل: اضافه کردن نام کاربری به نوار ناوبری Solution: Adding Username to Navbar

احراز هویت با AWS Amplify Studio Authentication with AWS Amplify Studio

مجوز در AWS Amplify Studio Authorization in AWS Amplify Studio

• بررسی اجمالی مجوز Authorization Overview

• قوانین مجوز مالک را تنظیم کنید Set Owner Authorization Rules

• حالت مجوز را روی Cognito User Pool تنظیم کنید و DynamoDB را برای فیلد مالک بررسی کنید Set Authorization Mode to Cognito User Pool and Check DynamoDB for Owner Field

• یک قانون مجوز خصوصی تنظیم کنید Set a Private Authorization Rule

• گروه ایجاد کنید و یک قانون مجوز گروه تنظیم کنید Create Group and set a Group Authorization Rule

• تنظیم قانون مجوز عمومی Set Public Authorization Rule

مجوز در AWS Amplify Studio Authorization in AWS Amplify Studio

ذخیره سازی با AWS Amplify Studio Storage with AWS Amplify Studio

• ذخیره سازی فایل با AWS Amplify Studio File Storage with AWS Amplify Studio

ذخیره سازی با AWS Amplify Studio Storage with AWS Amplify Studio

AWS Amplify Studio Content Management AWS Amplify Studio Content Management

• مدیریت محتوا - بررسی اجمالی Content Management - Overview

• مدیریت محتوا Content Management

AWS Amplify Studio Content Management AWS Amplify Studio Content Management

Amplify Hosting - میزبانی برنامه ما Amplify Hosting - Hosting our App

• میزبانی برنامه ما با Amplify Hosting Hosting our App with Amplify Hosting

Amplify Hosting - میزبانی برنامه ما Amplify Hosting - Hosting our App

پاک کردن Clean up

• پاک کردن Clean up

پاک کردن Clean up

مراحل بعدی Next Steps

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

مراحل بعدی Next Steps