react native appsync s3

React Native Appsync S3

Это приложение позволяет пользователю выполнять следующее:

• Зарегистрируйтесь/в платформе.
• Доступ к библиотеке устройств с помощью Expo.
• Загрузите изображения в AWS S3.
• Храните записи Pictures в Amazon Dynamodb.
• Покажите изображения на платформе.

Предварительные условия

• Expo Cli

  • npm install -g expo-cli

• Учетная запись AWS

• Узел JS с NPM

• AWS Amplify 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. Добавьте API APS APS APS для использования 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, ведро Amazon S3 для хранения фотографий каждого пользователя и APS APS AppSync GraphQL, который использует 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. Создайте нового пользователя.

• Приложение использует компонент более высокого порядка withauthenticator (hoc) из AWS Amplify для выполнения потока аутентификации: зарегистрируйтесь, подтвердите регистрацию и подпишите пользователей.

4. Добавить и отображать изображения.

• Если приложение работает успешно, вы сможете нажать кнопку «Добавить», разрешить доступ к библиотеке устройств и выбирать изображение с вашего устройства. Это загрузит изображение в S3, а затем сделает вызов GraphQL, чтобы ввести запись в DynamoDB.

• Затем вы можете нажать кнопку обновления, чтобы отобразить изображение на экране.

Способствовать

• Этот проект нуждается в большом улучшении. Помогите мне расти и улучшить это?