Zopher

React Native Twitter приложение с помощью AWS Amplify и Expo

Этот проект интегрирует нативный фронт-энд React с AWS Amplify Back-End, который имеет аутентификацию пользователя (AWS Cognito) и API GraphQL (AWS Appsync) для операций CRUD между клиентом и базой данных (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/Zopher.git

cd Zopher

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. Добавьте сервис API, чтобы использовать GraphQL и сохранить данные в Amazon Dynammodb.

 amplify add api

Следуйте приведенной ниже конфигурации.

6. Время развернуть ваш проект в AWS.

 amplify push

Через несколько минут автоматических операций Amplify CLI создаст пул пользователей и идентификации Amazon Cognito для хранения пользователей Crendentials и API APS APS Appsync GraphQL для обеспечения операций CRUD между клиентом и серверами.

Запуск приложения

1. Установить клиентские зависимости.

 yarn

# or

npm install

2. Запустите приложение React Native в вашем симуляторе под вашим каталогом проекта.

 expo start --ios

# or

expo start --android

Пошаговый учебник

• Проверьте полный процесс настройки в средней истории
• Ссылка на видео для демонстрации здесь.