react native appsync s3

ตอบสนอง AppSync S3 ดั้งเดิม

แอพนี้อนุญาตให้ผู้ใช้ทำสิ่งต่อไปนี้:

• ลงทะเบียน/ในแพลตฟอร์ม
• Access Device Library โดยใช้ Expo
• อัปโหลดรูปภาพไปยัง AWS S3
• เก็บบันทึกรูปภาพใน Amazon DynamoDB
• แสดงรูปภาพในแพลตฟอร์ม

ข้อกำหนดเบื้องต้น

• Expo CLI

  • npm install -g expo-cli

• บัญชี AWS

• โหนด JS กับ NPM

• AWS ขยาย CLI

  • npm install -g @aws-amplify/cli
  • amplify configure (ลิงก์สำหรับวิดีโอทีละขั้นตอน)

การกำหนดค่าโครงการ

1. โคลน repo นี้ไปยังเครื่องในพื้นที่ของคุณ

 git clone https://github.com/yhenni1989/react-native-appsync-s3.git

cd react-native-appsync-s3

2. เพิ่ม AWS ขยายการพึ่งพาโครงการของคุณ

 yarn add aws-amplify aws-amplify-react-native

# or

npm install aws-amplify aws-amplify-react-native

3. เริ่มต้นโครงการ AWS Amplify

 amplify init

ทำตามคำแนะนำเดียวกันด้านล่าง

4. กำหนดค่าพูลผู้ใช้ Amazon Cognito เพื่อจัดเก็บข้อมูลรับรองผู้ใช้

 amplify add auth

# When prompt, choose: Yes, use the default configuration.

5. เพิ่มถัง Amazon S3 เพื่อเก็บรูปภาพ

 amplify add storage

# Choose: Content (Images, audio, video, etc.)
# Give access to only authenticated users.
# Give users read/write acces.

6. เพิ่ม AWS AppSync API เพื่อใช้ GraphQL และจัดเก็บข้อมูลใน Dynammodb

 amplify add api

# Choose GraphQL as the API service. 
# Choose an authorization type for the API: Amazon Cognito User Pool
# Do you have an annotated GraphQL schema? Yes
# Provide your schema file path: src/graphQL/schema.graphql

7. ปรับใช้โครงการของคุณกับ AWS

 amplify push

 Do you want to generate code for your newly created GraphQL API: No.

AWS Amplify CLI จะสร้างกลุ่มผู้ใช้ Amazon Cognito และ Pool Identity Pool ซึ่งเป็นถัง Amazon S3 เพื่อจัดเก็บภาพถ่ายผู้ใช้แต่ละคนและ AWS AppSync GraphQL API ที่ใช้ Amazon DynamoDB เพื่อจัดเก็บข้อมูล

การรันแอปพลิเคชัน

1. ติดตั้งการพึ่งพาไคลเอนต์

 yarn

# or

npm install

2. คุณจะต้องมีข้อมูลประจำตัว AWS IAM ของคุณก่อนที่จะเรียกใช้แอปพลิเคชัน

• คัดลอกคีย์การเข้าถึงและความลับของคุณในไฟล์ src/myKeys.js ของโครงการของคุณ

 const keys = {
 accessKey : 'blablabla' ,
 secretKey : 'blablabla' ,
}
export default keys ;

• บันทึกการเปลี่ยนแปลง

3. เปิดใช้แอพ React Native ในเครื่องจำลองของคุณจากเทอร์มินัลภายใต้ไดเรกทอรีโครงการของคุณ

 expo start --ios

# or

expo start --android

3. สร้างผู้ใช้ใหม่

• แอพใช้ส่วนประกอบคำสั่งซื้อที่สูงขึ้น ด้วย AATHENTICATOR (HOC) จาก AWS AMPLIFY เพื่อดำเนินการโฟลว์การรับรองความถูกต้อง: ลงทะเบียนยืนยันการลงทะเบียนและลงชื่อเข้าใช้ผู้ใช้

4. เพิ่มและแสดงรูปภาพ

• หากแอปพลิเคชันทำงานสำเร็จคุณควรกดปุ่มเพิ่มอนุญาตให้เข้าถึงไลบรารีอุปกรณ์และเลือกรูปภาพจากอุปกรณ์ของคุณ สิ่งนี้จะอัปโหลดรูปภาพไปยัง S3 จากนั้นทำการเรียก graphQL เพื่อป้อนบันทึกลงใน DynamoDB

• จากนั้นคุณสามารถกดปุ่มรีเฟรชเพื่อแสดงภาพบนหน้าจอ

มีส่วนช่วย

• โครงการนี้ต้องการการปรับปรุงมากมาย ช่วยฉันเติบโตและปรับปรุงได้หรือไม่..