Zopher

ตอบสนองแอพ Twitter ดั้งเดิมด้วย AWS AMPLIFY และ EXPO

โครงการนี้รวมการตอบโต้แบบดั้งเดิมกับ AWS ขยายส่วนหลังที่มีการรับรองความถูกต้องของผู้ใช้ (AWS Cognito) และ GraphQL API (AWS APPSYNC) สำหรับการดำเนินการ CRUD ระหว่างไคลเอนต์และฐานข้อมูล (Amazon DynamoDB)

ภาพรวมแอป

• ผู้ใช้สามารถลงทะเบียน/ในแอพได้

• ผู้ใช้สามารถสร้างโพสต์ได้โดยกดปุ่มเพิ่มการเขียนภายใน Modal และกดส่ง

• ผู้ใช้สามารถชอบ/ไม่เหมือนโพสต์

• ผู้ใช้สามารถลบโพสต์ของตนเอง

• ผู้ใช้สามารถอัปเดตฟีดโพสต์โดย:

  • กดปุ่มโหลดซ้ำ
  • การแสดงผลแบบดึงกลับ

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

• 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/Zopher.git

cd Zopher

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. เพิ่มบริการ API เพื่อใช้ GraphQL และจัดเก็บข้อมูลใน Amazon Dynammodb

 amplify add api

ทำตามการกำหนดค่าด้านล่าง

6. ถึงเวลาปรับใช้โครงการของคุณกับ AWS

 amplify push

หลังจากดำเนินการอัตโนมัติไม่กี่นาทีแอมพลิฟายเออร์ CLI จะสร้างกลุ่มผู้ใช้ Amazon Cognito และกลุ่มข้อมูลประจำตัวเพื่อจัดเก็บผู้ใช้ crendentials และ AWS AppSync GraphQL API เพื่อให้สามารถดำเนินการ CRUD ระหว่างไคลเอนต์และเซิร์ฟเวอร์ได้

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

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

 yarn

# or

npm install

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

 expo start --ios

# or

expo start --android

ทีละขั้นตอนการสอน

• ตรวจสอบกระบวนการตั้งค่าเต็มรูปแบบใน Medium Story
• ลิงค์วิดีโอสำหรับการสาธิตที่นี่