Plush

أفخم

Plush هو تطبيق محمول كامل المكاسب لمشاركة الصور. يستخدم Expo و React Native للواجهة الأمامية ، AWS Amplify كخدمة خلفية ، وتم تصميم خدمة API باستخدام GraphQL.

العرض التوضيحي

فيديو تجريبي لوظائف التطبيق هنا.

ملخص

بعد التسجيل/تسجيل الدخول ، يمكن للمستخدمين تنفيذ ما يلي:

• تتيح الوصول إلى مكتبة الأجهزة المحمولة الخاصة بهم عن طريق الضغط على أيقونة الكاميرا في الرأس.
• تحميل الصور على الخلاصة.
• مثل الصور (من المستخدمين الآخرين وذاتها).
• قم بتحديث الخلاصة عن طريق السحب إلى الحفر أو عن طريق الضغط على زر إعادة التحميل في الرأس.
• علم المحتوى غير المناسب عن طريق الضغط على أيقونة الخيارات في تذييل بطاقة الصورة.
• إزالة صورهم الخاصة من الخلاصة. متوفر أيضًا في أيقونة الخيارات.

تدفق التطبيق

• يتم مصادقة المستخدمين باستخدام Out Out of the Box AWS Amplify Audlify Flow.

• تم إعادة توجيه المستخدمين إلى الشاشة الوحيدة للتطبيق: الخلاصة.

• عندما يقوم المستخدم بتحميل صورة:

  • سيقوم طلب وضع مع RNS3 بتخزين الملف في دلو AWS-S3.
  • ستخزن طفرة Apollo GraphQL سجلًا في جدول صورة DynamoDB.

• عندما يقوم المستخدم بإعلام محتوى غير مناسب:

  • ستخزن طفرة AppSync Client GraphQL سجلًا في جدول علامة DynamoDB.
  • سوف يخفي الواجهة الأمامية تلك الصورة من خلاصة المستخدم.

• عندما يحب المستخدم/يحتمل أن يكون صورة:

  • ستنشئ طفرة AppSync Client GraphQL مثيلًا مثل DynamoDB مثل الجدول.
  • ستدمر طفرة عميل AppSync GraphQL ذلك مثل المثيل من جدول DynamoDB.

• عندما يحذف المستخدم صورة:

  • سيقوم طلب إزالة باستخدام AMPLIFY Storage API حذف الملف المرتبط من دلو AWS-S3.
  • ستدمر طفرة Apollo GraphQL السجل من جدول صور DynamoDB.
  • تم تحديث التغذية لعرض الصور الحالية.

• عندما يقوم المستخدم بتحديث الخلاصة:

  • سيطلب استعلام AppSync Client GraphQL جميع الصور الحالية المخزنة في جدول صور DynamoDB.

المتطلبات الأساسية

لتشغيل هذا التطبيق على جهازك المحلي ، تحتاج إلى الأدوات التالية:

• معرض CLI

  • npm install -g expo-cli

• حساب AWS

• العقدة JS مع NPM

• AWS تضخيم CLI

  • npm install -g @aws-amplify/cli
  • amplify configure (رابط لخطوة بخطوة الفيديو).

تكوين النهاية الخلفية

1. استنساخ هذا الريبو إلى جهازك المحلي.

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

cd plush

2. أضف AWS Amplify التبعيات إلى مشروعك.

 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. أضف API GraphQL إلى مشروعك.

 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
}

• الصورة ، مثل ، والعلم كلها جداول DynamoDB المستخدمة لتخزين البيانات من إدخال المستخدمين.

8. حان الوقت لنشر مشروعك على السحابة؟

 amplify push

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

ستقوم AWS Amplify CLI بإنشاء مجموعة من مستخدمي Amazon Cognito وتجمع الهوية ، و Bucket Amazon S3 لتخزين كل صور المستخدمين و AWS Appsync GraphQL API التي تستخدم Amazon DynamoDB لتخزين البيانات الوصفية حول الصور (أي اسم دلو ، أمثال ، أعلام ، مالك ، تاريخ الإنشاء ... إلخ).

تشغيل التطبيق

1. تثبيت تبعيات العميل.

 yarn

# or

npm install

2. ستحتاج إلى بيانات اعتماد AWS الخاصة بك للوصول إلى دلو S3.

• انسخ مفاتيح وصولك السرية في ملف src/myKeys.js لمشروعك.

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

• حفظ التغييرات.

3. أنت الآن مستعد لإطلاق التطبيق واختباره.

 expo start --ios

# or

expo start --android

4. إنشاء مستخدم جديد.

• يستخدم التطبيق مكون الترتيب العالي withAuthenticator (HOC) من AWS Amplify لأداء تدفق المصادقة: التسجيل ، وتأكيد التسجيل وتسجيل المستخدمين.

5. إضافة وعرض الصور.

• إذا تم تشغيل التطبيق بنجاح ، فيجب أن تكون قادرًا على الضغط على أيقونة الكاميرا ، والسماح بالوصول إلى مكتبة الجهاز ، وحدد صورة من جهازك. سيؤدي ذلك إلى تحميل الصورة إلى S3 ثم قم بإجراء مكالمة GraphQL لإدخال السجل في DynamoDB.

• يمكنك بعد ذلك الضغط على زر التحديث لعرض الصورة على الشاشة.

• يمكنك أن تحب/على عكس صور المستخدمين الآخرين وإعلامهم ، وحذف صورك الخاصة.

تريد المساهمة؟

• إذا أعجبك هذا المشروع ، ساعدني في النمو وتحسينه عن طريق إرسال طلبات السحب؟