Plush

Плюш

Plush-это мобильное приложение для полного стека для обмена фотографиями. Он использует Expo и реагирует на себя для передней части, AWS Amplify в качестве среднего обслуживания, а служба API построена с GraphQL.

Демо

Демо -видео функциональности приложения здесь.

Обзор

После регистрации/войны пользователи могут выполнить следующее:

• Дайте доступ к их библиотеке мобильных устройств, нажав значок камеры в заголовке.
• Загрузите картинки в канал.
• Как и в отличие от картин (от других пользователей и их собственных).
• Обновите подачу путем перевозки на рефреш или нажав кнопку перезагрузки в заголовке.
• Флаг неподходящего контента, нажимая значок «Параметры» в нижнем колонтитуле карты изображения.
• Удалите их собственные картинки из корма. Также доступен в значке «Опции».

Приложение поток

• Пользователи аутентифицируются, используя поток AWS AMPLIFY Authentication Flow.

• Пользователи перенаправлены на единственный экран приложения: канал.

• Когда пользователь загружает изображение:

  • Запрос на PUT с RNS3 хранит файл в ведре AWS-S3.
  • Мутация Apollo GraphQL будет хранить запись в таблице изображений DynamoDB.

• Когда пользовательские флаги неподходящего контента:

  • Мутация AppSync Client GraphQL будет хранить запись в таблице DynamoDB.
  • Фронт-энд скрыт эту картинку от канала пользователя.

• Когда пользователю нравится/не снимается на картинке:

  • Мутация AppSync Client GraphQL создаст аналогичный экземпляр в таблице динамического такого.
  • Мутация AppSync Client GraphQL разрушит этот экземпляр из таблицы DynamoDB.

• Когда пользователь удаляет изображение:

  • Запрос на удаление с AMPLIFY API хранилища удалит соответствующий файл из ведра AWS-S3.
  • Мутация Apollo GraphQL разрушит запись из таблицы изображений DynamoDB.
  • Средство обновляется, чтобы отобразить текущие изображения.

• Когда пользователь обновляет канал:

  • Запрос AppSync Client GraphQL запросит все текущие изображения, хранящиеся в таблице изображений 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/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. Добавьте 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
}

• Изображение, как и флаг - все это таблицы DynamoDB, используемые для хранения данных от ввода пользователей.

8. Время развернуть свой проект в облаке?

 amplify push

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

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

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

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

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

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

• Вы можете любить/в отличие от фотографий других пользователей и удалить свои собственные фотографии.

Хотите внести свой вклад?

• Если вам нравится этот проект, помогите мне расти и улучшить его, отправив запросы на притяжение?