Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Mobile Apps with AWS Amplify - Nader Dabit

144 views

Published on

In this session we'll learn the basics of React including lifecycle methods, state, & props. We'll also look at how to build React Native components using both classes & functions.

Speaker: Nader Dabit

  • Be the first to comment

Building Mobile Apps with AWS Amplify - Nader Dabit

  1. 1. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Building Mobile Apps with AWS Amplify Nader Dabit Developer Advocate, AWS Mobile Pop-up Loft
  2. 2. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify A JavaScript library for application development using cloud services.
  3. 3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify • Secure Authentication & Authorization • APIs & serverless logic • GraphQL Client • Realtime Data access • Analytics & targeted messaging • Streaming over lossy networks • Push Notifications • Storage / S3 • Internationalization
  4. 4. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify Authentication & Authorization Federation Amazon Cognito
  5. 5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify Fully managed APIs ”Front Door” for many apps Amazon API Gateway
  6. 6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify Business Logic Run code on demand & in response to events Easily spin up microservices AWS Lambda
  7. 7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify • Analytics • Engagement • SMS, Email, Push Amazon Pinpoint
  8. 8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify • Managed GraphQL • Real-time data • Offline & synchronization AWS AppSync
  9. 9. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Front-end Support – Framework integrations React React Native Angular
  10. 10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile CLI Command line interface for developers to seamlessly create, enable, & configure AWS services.
  11. 11. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile CLI AWS Mobile CLI + AWS Amplify
  12. 12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify Getting Started with AWS Amplify 1. Add AWS Amplify to project npm install aws-amplify
  13. 13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify Getting Started with AWS Amplify 2. Configure project with AWS resources import Amplify from 'aws-amplify’ import config from './aws-exports’ Amplify.configure(config)
  14. 14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify API Deep Dive
  15. 15. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive Authentication / User Identity • Declarative APIs for Sign-Up, Sign-In, MFA, & Credential status • React Higher Order Components • Angular Services & View Components • Pre-built UI or build a custom UI
  16. 16. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive Auth class import { Auth } from 'aws-amplify' Auth.signUp({ …credentials }) Auth.signIn(username, password) Base API
  17. 17. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive Auth class methods confirmSignIn confirmSignUp currentAuthenticatedUser enableSMS disableSMS resendSignUp forgotPassword forgotPasswordSubmit 34 available methods
  18. 18. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive Authentication React / React Native support import { withAuthenticator } from 'aws-amplify-react-native’ export default withAuthenticator(App)
  19. 19. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive Analytics • Automatic session metrics from configuration • Capture custom tracking events • Capture custom tracking events with attributes • Capture custom tracking events with metrics • Record authentication events
  20. 20. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive Analytics Base API import { Analytics } from 'aws-amplify-react-native’ Analytics.record(‘Button Pressed')
  21. 21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive Analytics class methods record enable disable startSession stopSession
  22. 22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive Storage • Store application content • Public: all users of an app can access • Private: individual user content • Automatically track storage events through Pinpoint • React / React Native Components
  23. 23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive Storage Base API import { Storage } from 'aws-amplify-react-native’ Storage.get(‘welcome.png')
  24. 24. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive Storage class methods get put remove list configure
  25. 25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive Storage React Components import { S3Image, S3Album } from 'aws-amplify-react- native’ render() { return <S3Image imgKey={'myImage.png'} /> }
  26. 26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive API Module • Automatically sign requests using AWS Signature 4 • Very useful with Amazon API Gateway • HTTP verbs & options • Use multiple endpoints • GraphQL Support
  27. 27. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive API Base API import { API } from 'aws-amplify’ let apiName = 'MyApiName' let path = '/mypath' API.get(apiName, path) .then(response => // do something with response)
  28. 28. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive API GraphQL setup import { API } from 'aws-amplify’ Amplify.configure( graphql_endpoint: 'https:/www.examplegqlendpoint.com/' )
  29. 29. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive API GraphQL usage const ListEvents = `query ListEvents { listEvents { items { id where description } } }`
  30. 30. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive API GraphQL usage const allEvents = await API.graphql({ ListEvents }); Basic usage
  31. 31. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive API GraphQL usage With a parameter using the graphqlOperation helper import { API, graphqlOperation} from 'aws-amplify’ const oneEvent = await API.graphql(graphqlOperation(GetEvent, { id: 22 }));
  32. 32. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive API React renderProps component With a parameter using the graphqlOperation helper import { API, graphqlOperation} from 'aws-amplify-react-native’ const oneEvent = await API.graphql(graphqlOperation(GetEvent, { id: 22 }));
  33. 33. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API Deep Dive API React Connect component import { Connect } from 'aws-amplify-react’ <Connect query={graphqlOperation(ListEvents)}> {({ data: { listEvents } }) => ( <ListView events={listEvents.items} /> )} </Connect>
  34. 34. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile CLI
  35. 35. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile CLI Getting Started with the CLI 1. Install the CLI npm i -g awsmobile-cli
  36. 36. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile CLI Getting Started with the CLI 2. Configure CLI with AWS Credentials awsmobile configure
  37. 37. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile CLI Getting Started with the CLI 3. Initialize a new or existing project awsmobile init
  38. 38. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile CLI Getting Started with the CLI New project now available in mobile hub
  39. 39. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile CLI Getting Started with the CLI awsmobile enable user-signin awsmobile push Adding a new service
  40. 40. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Thank you Building Mobile Apps with AWS Amplify aws.amazon.com/mobile @AWSforMobile

×