https://github.com/pjay79/MoviesApp
React Native Movies App: AWS Amplify, AWS AppSync, AWS Cognito, GraphQL, DynamoDB
https://github.com/pjay79/MoviesApp
appsync aws aws-amplify-react-native aws-appsync dynamodb graphql offline-capable react-native subscriptions
Last synced: 13 days ago
JSON representation
React Native Movies App: AWS Amplify, AWS AppSync, AWS Cognito, GraphQL, DynamoDB
- Host: GitHub
- URL: https://github.com/pjay79/MoviesApp
- Owner: pjay79
- Created: 2018-05-06T01:36:25.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-24T08:28:10.000Z (over 6 years ago)
- Last Synced: 2024-11-02T19:34:16.872Z (5 months ago)
- Topics: appsync, aws, aws-amplify-react-native, aws-appsync, dynamodb, graphql, offline-capable, react-native, subscriptions
- Language: JavaScript
- Homepage:
- Size: 1.24 MB
- Stars: 83
- Watchers: 4
- Forks: 16
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-aws-appsync - React Native Movies App: AWS AppSync, AWS Amplify, AWS Cognito, GraphQL, DynamoDB
- awesome-aws-amplify - React Native Movies App: AWS AppSync, AWS Amplify, AWS Cognito, GraphQL, DynamoDB
README
# MoviesApp
React Native, AWS AppSync, AWS Amplify, AWS Cognito, GraphQL, DynamoDB.
Please note: this is a work still in progress, and many features are not fully developed yet.
**Update 24th July:**
AWS Amplify library can be modularized:
https://github.com/aws-amplify/amplify-js/wiki/Amplify-Modularization
There are some new helpers also available to reduce boilerplate code, see this article for details:
https://medium.com/open-graphql/save-hundreds-of-lines-of-code-in-your-next-graphql-app-with-this-one-weird-trick-3bef9ef0d45a
## Screenshots
### iOS
## Technology stack:
- aws-amplify
- aws-amplify-react-native
- aws-appsync
- aws-appsync-react
- aws-sdk
- graphql-tag
- lodash
- moment
- prop-types
- react-apollo
- react-native-app-intro-slider
- react-native-elements
- react-native-modal
- react-native-splash-screen
- react-native-vector-icons
- react-navigation
- react-navigation-material-bottom-tabs
- react-navigation-tabs
- uuid
## Installation
### React Native setup:
`brew install node`
`brew install watchman`
`npm install -g react-native-cli`
And also install Xcode for iOS simulator + Android Studio / Genymotion for Android simulator. Alternatively connect up a hardware device.
### Project setup:
Clone the repo:
`git clone https://github.com/pjay79/MoviesApp.git`
Change to the project folder:
`cd MoviesApp`
Add dependencies:
`npm install` or `yarn`
### Amazon
Sign up to AWS Free Tier:
https://aws.amazon.com/free/
### AWS Mobile CLI setup
(note: you will be directed to create a new **IAM** user and prompted to enter the **accessKeyId** and **secretAccessKey**, store these in a safe place):
`npm install -g awsmobile-cli`
`awsmobile configure`
`awsmobile init` (in the project folder)
`awsmobile user-signin enable`
`awsmobile push`
`awsmobile console` (opens the aws console in browser)
This project's source directory is 'app'.
### AWS AppSync setup:
In the aws console **Services** section locate **AWS AppSync** and then do the following:
- select **Create API**
- enter API name **AWS Movies App** and select authorization type to **Amazon Cognito User Pool**
- select **Custom Schema**
Paste the following into the Custom Schema box:
```
type Movie {
id: ID!
title: String!
genre: String!
director: String!
reviews: [Review]
likes: Int!
author: String!
createdAt: String!
}
type Review {
id: ID!
movieID: ID!
rating: Int!
content: String!
author: String!
createdAt: String!
}
type Query {
fetchMovie(id: ID!): Movie
}
schema {
query: Query
}
```
Select **Save** and then **Create Resources**, then select type **Movie** with table name **MovieTable**. Repeat the same process for type **Review** with table name **ReviewTable**.
### Update resolvers
Back in the AppSync console, find the Data Type **Movie** and **attach** a resolver to the **reviews** field, it should look like this:
Back again in the AppSync console, find the Data Type **Query** and modify resolver for the **listReviews** field, it should look like this:
### DynamoDB table index:
From your AppSync console:
- select **DataSources**
- select **ReviewTable**
- select **Create index** in DynamoDB
- select primary key **movieID**, and index name **movieID-index**
- set read and write capacity to 1 unit each
### Add AppSync configuration
Download the React Native AppSync.js file:
Add the contents of this file to **app/aws-appsync.js** as follows:
```
export default {
graphqlEndpoint: 'ENTER_ENDPOINT',
region: 'ENTER_REGION',
authenticationType: 'AMAZON_COGNITO_USER_POOLS',
apiKey: 'null',
};
```
### AWS Cognito
In the aws console **Services** section locate **Cognito** and select **Manage User Pools**. Here you can customise the user and authorisation settings. For this project **MFA** has been set to **OPTIONAL**.
### Launch
Run on ios:
`react-native run-ios`
Run on android:
`react-native run-android`