آموزش طراحی بصری UI و بک‌اند با AWS Amplify Studio - آخرین آپدیت

مقدمه Introduction

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

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

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

معرفی Amplify Studio و Amplify CLI Amplify Studio and Amplify CLI - Introduction

• Amplify، Amplify Studio و Amplify CLI چیستند؟ What's Amplify and Amplify Studio and And Amplify CLI

• مزایا و قابلیت‌های Amplify Studio Amplify Studio Advantages and Capabilities

• قیمت‌گذاری Amplify Studio Amplify Studio Pricing

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

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

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

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

باکس محیط تست (Sandbox) برای Amplify Studio The Launch Sandbox for Amplify Studio

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

• راه‌اندازی React و ایجاد Todo Setup React - Create Todo

• پرس‌وجو و نمایش لیست Todoها Querying and Showing Todos

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

• حذف یک Todo Delete a Todo

ساخت یک اپلیکیشن فول‌استک React با AWS Amplify Studio AWS Amplify Studio - Build a Fullstack React App

• شروع کار با اپلیکیشن فول‌استک Petstore Getting Started with the Fullstack App - Petstore

• راه‌اندازی مخزن Git Setup Git Repo

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

• ساخت اپلیکیشن فول‌استک با Amplify Studio و ایجاد مدل داده 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 به مدل داده (Data Binding) Binding UI to Data Model

• راه‌اندازی اپلیکیشن React و دریافت کامپوننت‌ها Setup React App and Pull Components

• نمایش مجموعه‌ی حیوانات و به‌روزرسانی کامپوننت Showing our Pet Collection and Updating the Component

ویژگی‌های کامپوننت UI و مدیریت‌کننده‌های رویداد UI Component Properties & Event Handlers

• مروری بر ویژگی‌های کامپوننت (Properties) Component Properties - Overview

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

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

• افزودن رویداد حذف از طریق Studio Adding Delete Event via Studio - Delete Item

طراحی نوار ناوبری و فوتر (عملی) The Navbar and Footer - Hands-On

• افزودن نوار ناوبری (Navbar) و فوتر Adding a Navbar and Footer

• افزودن ویژگی عرض (Width) به نوار ناوبری و فوتر Adding Props - Width - to Navbar and Footer Components

• گسترش کدهای تولید شده برای کامپوننت Extending Generated Component Code

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

• بازنویسی ویژگی‌ها (Override Props) Override Props

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

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

• افزودن تصویر لوگو از طریق کد Adding Logo Image in Code

• افزودن استایل و اکشن به AddPet Add Style and Action to AddPet

فرم افزودن حیوان خانگی Add Pet Form

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

• ایجاد فرم افزودن حیوان خانگی Creating the Add Pet Form

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

• مخفی و نمایان کردن فرم Hiding and Showing Form

• راه‌اندازی فیلدها با داده‌ها و ذخیره حیوان خانگی Setup Fields with Data and Save a Pet

• بستن فرم AddPet Closing the AddPet 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

ویرایش اطلاعات حیوان خانگی Update Pet

• مروری بر ویرایش حیوان خانگی Update Pet - Overview

• راه‌اندازی رابط کاربری ویرایش Setting up Update UI

• به‌روزرسانی اطلاعات حیوان Updating the Pet

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

• مروری بر احراز هویت (Authentication) Authentication - Overview

• راه‌اندازی دکمه خروج در نوار ناوبری Setup the Signout Button in the Navbar

• افزودن احراز هویت به اپلیکیشن Adding Authentication to our App

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

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

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

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

• مروری بر مجوزدهی (Authorization) Authorization Overview

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

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

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

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

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

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

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

مدیریت محتوا در AWS Amplify Studio AWS Amplify Studio Content Management

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

• پیاده‌سازی مدیریت محتوا Content Management

میزبانی اپلیکیشن با Amplify Hosting Amplify Hosting - Hosting our App

• میزبانی اپلیکیشن با Amplify Hosting Hosting our App with Amplify Hosting

پاک‌سازی پروژه Clean up

• پاک‌سازی Clean up

گام‌های بعدی Next Steps

• گام‌های بعدی Next Steps