Topics we'll be covering:

Getting Started - Creating the React Native Application

If you're using the React Native CLI (you're not using Expo)

$ npx react-native init RNAmplify$cd RNAmplify$ npm install --save aws-amplify aws-amplify-react-native uuid amazon-cognito-identity-js @react-native-community/netinfo# or$ yarn add aws-amplify aws-amplify-react-native uuid amazon-cognito-identity-js @react-native-community/netinfo

$cd ios$ pod install --repo-update$cd ..

If you are using Expo

$ npx expo init RNAmplify> Choose a template: blank$cd RNAmplify$ npm install --save aws-amplify aws-amplify-react-native uuid @react-native-community/netinfo# or$ yarn add aws-amplify aws-amplify-react-native uuid

Running the app

$ npx react-native run-ios# or if running android$ npx react-native run-android# or, if using expo$ expo start

Installing the CLI & Initializing a new AWS Amplify Project

Installing the CLI

$ npm install -g @aws-amplify/cli

$amplifyconfigure

Initializing A New AWS Amplify Project

$ amplify init

Configuring the React Native application

If you are using the React Native CLI (not using Expo)

// index.jsimportAmplifyfrom'aws-amplify'importconfigfrom'./aws-exports'Amplify.configure(config)

If you are using the Expo (not using the React Native CLI)

// App.jsimportAmplifyfrom'aws-amplify'importconfigfrom'./aws-exports'Amplify.configure(config)

Adding Authentication

$ amplify add auth

$ amplify push

$ amplify console

Using the withAuthenticator component

// App.jsimport{withAuthenticator}from'aws-amplify-react-native'

exportdefaultwithAuthenticator(App,{includeGreetings:true})

# iOS SimulatorCMD + d# Opens debug menuCMD + r# Reloads the app# Android EmulatorCTRL + m# Opens debug menurr# Reloads the app

Accessing User Data

// App.jsimportReactfrom'react';import{SafeAreaView,StyleSheet,Text,}from'react-native';import{withAuthenticator}from'aws-amplify-react-native'import{Auth}from'aws-amplify'classAppextendsReact.Component{asynccomponentDidMount(){constuser=awaitAuth.currentAuthenticatedUser()console.log('user:',user)}render(){return(<SafeAreaViewstyle={styles.container}><Textstyle={styles.title}>Hello World</Text></SafeAreaView>)}}conststyles=StyleSheet.create({container:{flex:1,justifyContent:'center',alignItems:'center'},title:{fontSize:28}})exportdefaultwithAuthenticator(App,{includeGreetings:true})

Signing out with a custom Sign Out button

// App.jsimportReactfrom'react';import{SafeAreaView,StyleSheet,Text,}from'react-native';import{withAuthenticator}from'aws-amplify-react-native'import{Auth}from'aws-amplify'classAppextendsReact.Component{asynccomponentDidMount(){constuser=awaitAuth.currentAuthenticatedUser()console.log('user:',user)}signOut=()=>{Auth.signOut().then(()=>this.props.onStateChange('signedOut')).catch(err=>console.log('err: ',err))}render(){return(<SafeAreaViewstyle={styles.container}><Textstyle={styles.title}>Hello World</Text><TextonPress={this.signOut}>Sign Out</Text></SafeAreaView>)}}conststyles=StyleSheet.create({container:{flex:1,justifyContent:'center',alignItems:'center'},title:{fontSize:28}})exportdefaultwithAuthenticator(App);

Custom authentication strategies

// initial statestate={username:'',password:'',email:''}// event handleronChangeText=(key,value)=>{this.setState({[key]:value})}// example of usage with TextInput<TextInputplaceholder='username'value={this.state.username}style={{width:300,height:50,margin:5,backgroundColor:"#ddd"}}onChangeText={v=>this.onChange('username',v)}/>

// import the Auth componentimport{Auth}from'aws-amplify'// Class method to sign up a usersignUp=async()=>{const{ username, password, email}=this.statetry{awaitAuth.signUp({ username, password,attributes:{ email}})}catch(err){console.log('error signing up user...',err)}}

Adding a GraphQL API with AWS AppSync

$ amplify add api

typeRestaurant@model {id:ID!clientId:Stringname:String!description:String!city:String!}

amplify push? Are you sure you want to continue? Yes? Do you want to generate codefor your newly created GraphQL API: Yes? Choose the code generation language target: javascript? Enter the file name pattern of graphql queries, mutations and subscriptions: ./graphql/**/*.js? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions: Yes? Enter maximum statement depth [increase from defaultif your schema is deeply nested] (2)

Optional - To mock and test the API locally, you can run the mock command:

$ amplify mock api

AppSync Mock endpoint is running at http://10.219.99.136:20002

Adding mutations from within the GraphiQL Editor.

mutationcreateRestaurant {createRestaurant(input: {name:"Nobu"description:"Great Sushi"city:"New York"  }) {idnamedescriptioncity  }}

querylistRestaurants {listRestaurants {items {idnamedescriptioncity    }  }}

querysearchRestaurants {listRestaurants(filter: {city: {contains:"New York"    }  }) {items {idnamedescriptioncity    }  }}

querygetRestaurant {getRestaurant(id:"RESTAURANT_ID") {namedescriptioncity  }}

Interacting with the GraphQL API from our client application - Querying for data

importReactfrom'react';import{SafeAreaView,View,StyleSheet,Text,}from'react-native';// imports from Amplify libraryimport{withAuthenticator}from'aws-amplify-react-native'import{API,graphqlOperation}from'aws-amplify'// import the GraphQL queryimport{listRestaurants}from'./graphql/queries'classAppextendsReact.Component{// define some state to hold the data returned from the APIstate={restaurants:[]}// execute the query in componentDidMountasynccomponentDidMount(){try{constrestaurantData=awaitAPI.graphql(graphqlOperation(listRestaurants))console.log('restaurantData:',restaurantData)this.setState({restaurants:restaurantData.data.listRestaurants.items})}catch(err){console.log('error fetching restaurants...',err)}}render(){return(<SafeAreaViewstyle={styles.container}>{this.state.restaurants.map((restaurant,index)=>(<Viewkey={index}style={styles.item}><Textstyle={styles.name}>{restaurant.name}</Text><Textstyle={styles.description}>{restaurant.description}</Text><Textstyle={styles.city}>{restaurant.city}</Text></View>))}</SafeAreaView>)}}conststyles=StyleSheet.create({container:{flex:1,justifyContent:'center',},item:{padding:10},name:{fontSize:20},description:{fontWeight:'600',marginTop:4,color:'rgba(0, 0, 0, .5)'},city:{marginTop:4}})exportdefaultwithAuthenticator(App,{includeGreetings:true});

Performing mutations

// App.jsimportReactfrom'react';import{SafeAreaView,View,StyleSheet,Text,TextInput,Button}from'react-native';// imports from Amplify libraryimport{withAuthenticator}from'aws-amplify-react-native'import{API,graphqlOperation}from'aws-amplify'// import the GraphQL queryimport{listRestaurants}from'./graphql/queries'// import the GraphQL mutationimport{createRestaurant}from'./graphql/mutations'// create client IDimport{v4asuuid}from'uuid'constCLIENTID=uuid()classAppextendsReact.Component{// add additional state to hold form state as well as restaurant data returned from the APIstate={name:'',description:'',city:'',restaurants:[]}// execute the query in componentDidMountasynccomponentDidMount(){try{constrestaurantData=awaitAPI.graphql(graphqlOperation(listRestaurants))console.log('restaurantData:',restaurantData)this.setState({restaurants:restaurantData.data.listRestaurants.items})}catch(err){console.log('error fetching restaurants...',err)}}// this method calls the API and creates the mutationcreateRestaurant=async()=>{const{ name, description, city}=this.state// store the restaurant data in a variableconstrestaurant={      name, description, city,clientId:CLIENTID}// perform an optimistic response to update the UI immediatelyconstrestaurants=[...this.state.restaurants,restaurant]this.setState({      restaurants,name:'',description:'',city:''})try{// make the API callawaitAPI.graphql(graphqlOperation(createRestaurant,{input:restaurant}))console.log('item created!')}catch(err){console.log('error creating restaurant...',err)}}// change form state then user types into inputonChange=(key,value)=>{this.setState({[key]:value})}render(){return(<SafeAreaViewstyle={styles.container}><TextInputstyle={{height:50,margin:5,backgroundColor:"#ddd"}}onChangeText={v=>this.onChange('name',v)}value={this.state.name}placeholder='name'/><TextInputstyle={{height:50,margin:5,backgroundColor:"#ddd"}}onChangeText={v=>this.onChange('description',v)}value={this.state.description}placeholder='description'/><TextInputstyle={{height:50,margin:5,backgroundColor:"#ddd"}}onChangeText={v=>this.onChange('city',v)}value={this.state.city}placeholder='city'/><ButtononPress={this.createRestaurant}title='Create Restaurant'/>{this.state.restaurants.map((restaurant,index)=>(<Viewkey={index}style={styles.item}><Textstyle={styles.name}>{restaurant.name}</Text><Textstyle={styles.description}>{restaurant.description}</Text><Textstyle={styles.city}>{restaurant.city}</Text></View>))}</SafeAreaView>)}}conststyles=StyleSheet.create({container:{flex:1,justifyContent:'center',},item:{padding:10},name:{fontSize:20},description:{fontWeight:'600',marginTop:4,color:'rgba(0, 0, 0, .5)'},city:{marginTop:4}})exportdefaultwithAuthenticator(App,{includeGreetings:true});

Challenge

Adding a Serverless Function

Adding a basic Lambda Function

$ amplify add function? Select which capability you want to add: Lambda function? Provide an AWS Lambdafunctionnam: basiclambda? Choose the runtime that you want to use: NodeJS? Choose thefunctiontemplate that you want to use: Hello World? Do you want to configure advanced settings? N? Do you want to edit thelocal lambdafunctionnow? Y

exports.handler=async(event,contex)=>{console.log('event: ',event)constbody={message:"Hello world!"}constresponse={statusCode:200,    body}returnresponse}

$ amplify mockfunctionbasiclambda? Provide the path to the event JSON object: src/event.json

Ensuring latestfunctionchanges are built...Starting execution...event:  { key1:'value1', key2:'value2', key3:'value3' }Result:{"statusCode": 200,"body": {"message":"Hello world!"  }}Finished execution.

Adding a function running an express server and invoking it from an API call (http)

$ amplify add function? Select which capability you want to add: Lambda function? Provide an AWS Lambdafunctionname: cryptofunction? Choose the runtime that you want to use: NodeJS? Choose thefunctiontemplate that you want to use: Serverless ExpressJS? Do you want to configure advanced settings? No? Do you want to edit thelocal lambdafunctionnow? Y

exports.handler=(event,context)=>{console.log(`EVENT:${JSON.stringify(event)}`);awsServerlessExpress.proxy(server,event,context);};

// amplify/backend/function/cryptofunction/src/app.js// you should see this code already there 👇:app.use(function(req,res,next){res.header("Access-Control-Allow-Origin","*")res.header("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept")next()});// below the above code, add the following code 👇 (be sure not to delete any other code from this file)constaxios=require('axios')app.get('/coins',function(req,res){letapiUrl=`https://api.coinlore.com/api/tickers?start=0&limit=10`if(req&&req.query){// here we are checking to see if there are any query parameters, and if so appending them to the requestconst{ start=0, limit=10}=req.queryapiUrl=`https://api.coinlore.com/api/tickers/?start=${start}&limit=${limit}`}axios.get(apiUrl).then(response=>{res.json({coins:response.data.data})}).catch(err=>res.json({error:err}))})

$cd amplify/backend/function/cryptofunction/src$ npm install axios$cd ../../../../../

Adding a REST API

$ amplify add api? Pleaseselectfrom one of the above mentioned services: REST? Provide a friendly nameforyour resource that will be used to label this categoryin the project: cryptoapi? Provide a path (e.g., /items): /coins? Choose lambda source: Use a Lambdafunctionalready addedin the current Amplify project? Choose the Lambdafunctionto invoke by this path: cryptofunction? Restrict API access: Y? Who should have access? Authenticated users only? What kind of accessdo you wantfor Authenticated users: read/create/update/delete? Do you want to add another path? (y/N) N

$ amplify push? Are you sure you want to continue? Y

Interacting with the new API

// App.jsimportReactfrom'react'import{View,Text,StyleSheet}from'react-native'import{API}from'aws-amplify'import{withAuthenticator}from'aws-amplify-react-native'classAppextendsReact.Component{state={coins:[]}asynccomponentDidMount(){try{// to get all coins, do not send in a query parameter// const data = await API.get('cryptoapi', '/coins')constdata=awaitAPI.get('cryptoapi','/coins?limit=5&start=100')console.log('data from Lambda REST API: ',data)this.setState({coins:data.coins})}catch(err){console.log('error fetching data..',err)}}render(){return(<View>{this.state.coins.map((c,i)=>(<Viewkey={i}style={styles.row}><Textstyle={styles.name}>{c.name}</Text><Text>{c.price_usd}</Text></View>))}</View>)}}conststyles=StyleSheet.create({row:{padding:10},name:{fontSize:20,marginBottom:4},})exportdefaultwithAuthenticator(App,{includeGreetings:true})

Adding Analytics

$ amplify add analytics

$ amplify push

Recording events

import{Analytics}from'aws-amplify'state={username:''}asynccomponentDidMount(){try{constuser=awaitAuth.currentAuthenticatedUser()this.setState({username:user.username})}catch(err){console.log('error getting user: ',err)}}recordEvent=()=>{Analytics.record({name:'My test event',attributes:{username:this.state.username}})}<ButtononPress={this.recordEvent}title='Record Event'/>

$ amplify console

Working with Storage

amplify add storage

❯◉ create/update ◉read ◉ delete

amplify push

import{Storage}from'aws-amplify'// create function to work with StorageaddToStorage=()=>{Storage.put('textfiles/mytext.txt',`Hello World`).then(result=>{console.log('result: ',result)}).catch(err=>console.log('error: ',err));}// add click handler<ButtononPress={this.addToStorage}title='Add to Storage'/>

readFromStorage=()=>{Storage.list('textfiles/').then(data=>console.log('data from S3: ',data)).catch(err=>console.log('error fetching from S3',err))}

readFromStorage=()=>{Storage.get('textfiles/mytext.txt').then(data=>{console.log('data from S3: ',data)fetch(data).then(r=>r.text()).then(text=>{console.log('text: ',text)}).catch(e=>console.log('error fetching text: ',e))}).catch(err=>console.log('error fetching from S3',err))}

readFromStorage=()=>{Storage.list('').then(data=>console.log('data from S3: ',data)).catch(err=>console.log('error fetching from S3',err))}

Multiple Serverless Environments

Creating a new environment

$ amplify env add> Do you want to use an existing environment? No> Enter a namefor the environment: apiupdate> Do you want to use an AWS profile? Yes> Please choose the profile you want to use: appsync-workshop-profile

$ amplify push

$ amplify env list

typeRestaurant@model {id:ID!clientId:Stringname:String!type:Stringdescription:String!city:String!}typeModelRestaurantConnection {items: [Restaurant]nextToken:String}typeQuery {listAllRestaurants(limit:Int,nextToken:String):ModelRestaurantConnection}

type:String

$ amplify push

mutationcreateRestaurant {createRestaurant(input: {name:"Nobu"description:"Great Sushi"city:"New York"type:"sushi"  }) {idnamedescriptioncitytype  }}querylistRestaurants {listAllRestaurants {items {namedescriptioncitytype    }  }}

Merging the new environment changes into the main environment.

$ amplify env checkoutlocal

$ amplify status

Current Environment: local| Category | Resource name   | Operation | Provider plugin   || -------- | --------------- | --------- | ----------------- || Api      | RestaurantAPI   | Update    | awscloudformation || Auth     | cognito75a8ccb4 | No Change | awscloudformation |

$ amplify push

$ amplify env remove apiupdateDo you also want to remove all the resources of the environment from the cloud? Y

$ amplify env list

Removing Services

$ amplify remove auth$ amplify push

$ amplify status

Deleting the project

$ amplify delete