Giter VIP home page Giter VIP logo

moviesapp's Introduction

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

screenflow

Screenshots

iOS

simulator screen shot - iphone x - 2018-06-18 at 16 00 02 simulator screen shot - iphone x - 2018-06-18 at 16 00 44 simulator screen shot - iphone x - 2018-06-18 at 16 05 25 simulator screen shot - iphone x - 2018-06-18 at 16 06 02 simulator screen shot - iphone x - 2018-06-18 at 16 06 09 simulator screen shot - iphone x - 2018-06-18 at 16 07 04 simulator screen shot - iphone x - 2018-06-18 at 16 07 19 simulator screen shot - iphone x - 2018-06-18 at 16 07 24 simulator screen shot - iphone x - 2018-06-18 at 16 08 09 simulator screen shot - iphone x - 2018-06-18 at 16 08 47 simulator screen shot - iphone x - 2018-06-18 at 16 09 44 simulator screen shot - iphone x - 2018-06-18 at 16 09 47

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)

awsmobile2

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

appsync-starter

  • enter API name AWS Movies App and select authorization type to Amazon Cognito User Pool

appsync-settings appsync-settings-userpool

  • 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.

create resources

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:

resolver-reviews

Back again in the AppSync console, find the Data Type Query and modify resolver for the listReviews field, it should look like this:

resolver-query

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

create-index

index-table

Add AppSync configuration

Download the React Native AppSync.js file:

appsync-config

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.

cognito-page

Launch

Run on ios: react-native run-ios
Run on android: react-native run-android

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.