react native appsync s3

رد فعل Appsync S3

يتيح هذا التطبيق للمستخدم القيام بما يلي:

• التسجيل/في المنصة.
• مكتبة الجهاز الوصول باستخدام المعرض.
• تحميل الصور إلى AWS S3.
• قم بتخزين سجلات الصور في Amazon 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/react-native-appsync-s3.git

cd react-native-appsync-s3

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. تكوين مجموعة مستخدمين 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 وتجمع الهوية ، و Bucket Amazon S3 لتخزين كل صور للمستخدمين و AWS Appsync GraphQL API يستخدم Amazon DynamoDB لتخزين البيانات.

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

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

 yarn

# or

npm install

2. ستحتاج إلى بيانات اعتماد AWS الخاصة بك قبل تشغيل التطبيق.

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

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

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

3. قم بتشغيل تطبيق React Native في جهاز المحاكاة الخاص بك من المحطة تحت دليل المشروع الخاص بك.

 expo start --ios

# or

expo start --android

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

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

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

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

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

يساهم

• هذا المشروع يحتاج إلى الكثير من التحسن. ساعدني في النمو وتحسينه؟