Plush

ตุ๊กตา

Plush เป็นแอปพลิเคชั่นมือถือเต็มรูปแบบสำหรับการแชร์รูปภาพ มันใช้ Expo และ React Native สำหรับส่วนหน้า AWS ขยายเป็นบริการแบ็คเอนด์และบริการ API ถูกสร้างขึ้นด้วย GraphQL

การสาธิต

วิดีโอสาธิตของฟังก์ชันแอพที่นี่

ภาพรวม

หลังจากลงทะเบียน/ลงชื่อเข้าใช้ผู้ใช้สามารถดำเนินการดังต่อไปนี้:

• ให้การเข้าถึงไลบรารีอุปกรณ์มือถือของพวกเขาโดยกดไอคอนกล้องในส่วนหัว
• อัปโหลดรูปภาพไปยังฟีด
• ชอบและไม่เหมือนรูปภาพ (จากผู้ใช้รายอื่นและของพวกเขาเอง)
• รีเฟรชฟีดโดย pull-to-refresh หรือโดยการกดปุ่มโหลดซ้ำในส่วนหัว
• ตั้งค่าสถานะเนื้อหาที่ไม่เหมาะสมโดยการกดไอคอนตัวเลือกในส่วนท้ายของการ์ดภาพ
• ลบรูปภาพของตัวเองออกจากฟีด ยังมีอยู่ในไอคอนตัวเลือก

โฟลว์แอพพลิเคชั่น

• ผู้ใช้จะได้รับการรับรองความถูกต้องโดยใช้ Out of the Box AWS ขยายโฟลว์การรับรองความถูกต้อง

• ผู้ใช้เปลี่ยนเส้นทางไปยังหน้าจอเดียวของแอพ: ฟีด

• เมื่อผู้ใช้อัปโหลดรูปภาพ:

  • คำขอใส่ด้วย RNS3 จะเก็บไฟล์ไว้ในถัง AWS-S3
  • การกลายพันธุ์ของ Apollo GraphQL จะเก็บบันทึกไว้ในตารางรูปภาพ DynamoDB

• เมื่อผู้ใช้ตั้งค่าสถานะเนื้อหาที่ไม่เหมาะสม:

  • การกลายพันธุ์ของไคลเอนต์ AppSync GraphQL จะจัดเก็บบันทึกในตารางการตั้งค่าสถานะ DynamoDB
  • ส่วนหน้าจะซ่อนภาพนั้นจากฟีดของผู้ใช้

• เมื่อผู้ใช้ชอบ/ไม่เหมือนรูปภาพ:

  • การกลายพันธุ์ของไคลเอนต์ AppSync GraphQL จะสร้างอินสแตนซ์ที่คล้ายกันในตาราง DynamoDB เช่นตาราง
  • การกลายพันธุ์ของไคลเอนต์ AppSync GraphQL จะทำลายตัวอย่างเช่นอินสแตนซ์จาก DynamoDB เช่นตาราง

• เมื่อผู้ใช้ลบรูปภาพ:

  • คำขอลบด้วย APPLIFY Storage API จะลบไฟล์ที่เกี่ยวข้องออกจาก Bucket AWS-S3
  • การกลายพันธุ์ของ Apollo GraphQL จะทำลายระเบียนจากตารางรูปภาพ DynamoDB
  • ฟีดจะรีเฟรชเพื่อแสดงภาพปัจจุบัน

• เมื่อผู้ใช้รีเฟรชฟีด:

  • คิวรี graphql ไคลเอ็นต์ AppSync จะขอรูปภาพปัจจุบันทั้งหมดที่เก็บไว้ในตารางรูปภาพ DynamoDB

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

ในการเรียกใช้แอพนี้บนเครื่องในพื้นที่ของคุณคุณต้องใช้เครื่องมือต่อไปนี้:

• Expo CLI

  • npm install -g expo-cli

• บัญชี AWS

• โหนด JS กับ NPM

• AWS ขยาย CLI

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

การกำหนดค่า back-end

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

 git clone https://github.com/yhenni1989/plush

cd plush

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. ทำตามคำแนะนำเดียวกันด้านล่าง

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

 amplify add auth

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

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

 amplify add storage

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

7. เพิ่ม GraphQL API ในโครงการของคุณ

 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

• สคีมาสำหรับโครงการนี้ตั้งอยู่ที่ SRC/GraphQl/schema.graPhql ดูเหมือนว่า:

 type Picture @model {
  id : ID !
  pictureOwnerId : String !
  pictureOwnerUsername : String !
  visibility : Visibility
  file : S3Object
  likes : [ Like ] @connection ( name : " PictureLikes " )
  flags : [ Flag ] @connection ( name : " PictureFlags " )
}

type Like @model {
  id : ID !
  likeOwnerId : String !
  likeOwnerUsername : String !
  picture : Picture @connection ( name : " PictureLikes " )
}

type Flag @model {
  id : ID !
  flagOwnerId : String !
  flagOwnerUsername : String !
  picture : Picture @connection ( name : " PictureFlags " )
}

type S3Object {
  bucket : String !
  region : String !
  key : String !
  uri : String !
}

enum Visibility {
  public
  private
}

• รูปภาพ, Like และ Flag เป็นตาราง DynamoDB ทั้งหมดที่ใช้ในการจัดเก็บข้อมูลจากผู้ใช้อินพุต

8. ถึงเวลาปรับใช้โครงการของคุณไปยังคลาวด์หรือไม่

 amplify push

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

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

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

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

 yarn

# or

npm install

2. คุณจะต้องใช้ข้อมูลรับรอง AWS IAM ของคุณเพื่อเข้าถึงถัง S3 ของคุณ

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

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

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

3. ตอนนี้คุณพร้อมที่จะเปิดตัวและทดสอบแอพ

 expo start --ios

# or

expo start --android

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

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

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

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

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

• คุณสามารถชอบ/แตกต่างจากและตั้งค่าสถานะรูปภาพผู้ใช้รายอื่นและลบรูปภาพของคุณเอง

ต้องการมีส่วนร่วม?

• หากคุณชอบโครงการนี้ช่วยให้ฉันเติบโตและปรับปรุงโดยการส่งคำขอดึง?