آموزش ایجاد یک برنامه بدون سرور با استفاده از React در AWS

مقدمه Introduction

• React + API + AWS = وب جدید React + API + AWS = The new web

• با استفاده از پرونده های تمرینی Using the exercise files

1. به عنوان جلوی یک اکوسیستم واکنش نشان دهید 1. React as the Front-End of an Ecosystem

• React یک فناوری است نه یک محیط React is a technology, not an environment

• محیط React خود را تنظیم کنید Set up your React environment

• برنامه React خود را مستقر کنید Deploy your React app

• کد خود را به GitHub وصل کنید Connect your code to GitHub

• پشتیبانی AWS را با Amplify اضافه کنید Add AWS support with Amplify

• چالش: برنامه محلی خود را به روز کنید و در AWS استقرار دهید Challenge: Update your local application and deploy to AWS

• راه حل: برنامه محلی خود را به روز کنید و در AWS استقرار دهید Solution: Update your local application and deploy to AWS

• یک وب سایت اساسی راه اندازی کنید Get a basic website up and running

2. ساخت م Reلفه های واکنش پذیر برای رندر داده های ساخت یافته 2. Build React Components to Render Structured Data

• سایتی را بر اساس داده های ساخت یافته ایجاد کنید Build a site based on structured data

• برنامه خود را با اجزای سازگار تنظیم کنید Organize your app with components

• چالش: منویی را براساس داده های پویا ایجاد کنید Challenge: Build a menu based on dynamic data

• راه حل: یک منو بر اساس داده های پویا ایجاد کنید Solution: Build a menu based on dynamic data

• از JSON به عنوان تمسخر برای بارگذاری پویا داده استفاده کنید Use JSON as a Mock for Dynamically-Loaded Data

• JSON را به عنوان داده در م Reلفه React بارگیری کنید Load JSON as data in your React component

• چالش: اجزای خود را برای استفاده از داده های پویا تبدیل کنید Challenge: Convert your components to use dynamic data

• راه حل: اجزای خود را برای استفاده از داده های پویا تبدیل کنید Solution: Convert your components to use dynamic data

• همیشه در حال اعزام باشید Always be deploying

3. از DynamoDB برای ذخیره سازی اطلاعات ساده استفاده کنید 3. Use DynamoDB for Simple Data Storage

• رابط خط فرمان AWS را بارگیری و نصب کنید Download and install the AWS Command Line Interface

• کاربر AWS IAM را تنظیم کنید Set up an AWS IAM user

• AWS CLI را پیکربندی کنید Configure the AWS CLI

• AWS SDK را نصب کنید Install the AWS SDK

• یک جدول DynamoDB ایجاد کنید Create a DynamoDB table

• چالش: جداول DynamoDB را برای سایر ملفه ها اضافه کنید Challenge: Add DynamoDB tables for other components

• راه حل: جداول DynamoDB را برای سایر اجزا اضافه کنید Solution: Add DynamoDB tables for other components

• با استفاده از کنسول AWS داده ها را در DynamoDB بارگیری کنید Load data into DynamoDB using the AWS console

• داده های تک ارزش را به صورت برنامه نویسی در DynamoDB بارگیری کنید Load single-value data into DynamoDB programmatically

• داده های چند ارزشی را به صورت برنامه نویسی در DynamoDB بارگیری کنید Load multi-value data into DynamoDB programmatically

4. بارگذاری داده های پویا در اجزای واکنش دهنده 4. Load Dynamic Data into React Components

• برای دسترسی به Lambda و DynamoDB نقشی ایجاد کنید Create a role for Lambda and DynamoDB access

• داده های DynamoDB را از یک تابع Lambda بارگیری کنید Load DynamoDB data from a Lambda function

• Lambda خود را از AWS آزمایش کنید Test your Lambda from AWS

• چالش: توابع Lambda را برای همه جداول بنویسید Challenge: Write Lambda functions for all tables

• راه حل: توابع Lambda را برای همه جداول بنویسید Solution: Write Lambda functions for all tables

• API Gateway ایجاد کنید Create an API Gateway

• برای خدمات یک نقطه انتهایی GET ایجاد کنید Create a GET endpoint for services

• API Gateway خود را به مرحله جدیدی اعزام کنید Deploy your API Gateway to a new stage

• اعتبار سنجی نقطه پایانی شما پویاست Validate your endpoint is dynamic

• چالش: نقاط پایانی بیشتری به REST API خود اضافه کنید Challenge: Add more endpoints to your REST API

• راه حل: نقاط انتهایی بیشتری به REST API خود اضافه کنید Solution: Add more endpoints to your REST API

5. اتصال React به یک API 5. Connecting React to an API

• یک React Hook و یک متغیر حالت اضافه کنید Add a React Hook and a state variable

• با استفاده از قلاب useEffect یک اثر جانبی ایجاد کنید Create a side effect with the useEffect Hook

• درخواست داده از API Gateway Request data from an API Gateway

• هدرهای CORS را برای برنامه خود به روز کنید Update CORS headers for your application

• چالش: تماس های API هتل Landon را تمام کنید Challenge: Finish the Landon Hotel API calls

• راه حل: تماس های API هتل Landon را تمام کنید Solution: Finish the Landon Hotel API calls

نتیجه Conclusion

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