Build a PhotoSharing web app with AWS Amplify and AWS Appsynch - 26 September - 13:00

Build a PhotoSharing web app with AWS Amplify and AWS Appsynch - 26 September - 13:00

• 1. WORKSHOP:BUILD A PHOTO-SHARING WEB APPWITH AWS AMPLIFY AND AWS APPSYNC © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. WORKSHOP: BUILD A PHOTO-SHARING WEB APP WITH AWS AMPLIFY AND AWS APPSYNC Serdar Nevruzoglu Solutions Architect Amazon Web Services
• 2. Agenda © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Agenda What will we build? How will we build it? Introducing AWS AppSync & AWS Amplify Let’s build!
• 3. What/How will we build? © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What/How will we build?
• 4. What will we build? © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What will we build? Create account & sign in Create albums & upload photos Automatically create thumbnails Automatically tag photos using AI Search photos by tag
• 5. How will we build it? © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. How will we build it? AWS Amplify AWS AppSync Amazon Cognito Amazon Rekognition Image Amazon DynamoDB
• 6. What is AWS Amplify? © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What is AWS Amplify?
• 7. What does it do? © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What does it do? Command line interface Creates & configures AWS services
• 8. What does it do? © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What does it do? Client library Connects your front-end application to cloud services
• 9. JavaScript framework support © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. JavaScript framework support Vue React / React Native Angular Ionic Vue, React, Angular, and Ionic logos used with permission, CC By 4.0
• 10. What kind of services? © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What kind of services? üDatabase üAPI üLambda / Serverless functions üAuthentication üAnalytics üHosting üStorage
• 11. Authentication © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Authentication Amazon Cognito üCreate & configure new Amazon Cognito resources for user authentication üInteract with Amazon Cognito using Auth class from client Library üPre-configured components available for React, React Native, Angular, & Ionic
• 12. GraphQL API © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. GraphQL API AWS AppSync üCreate new AWS AppSyncGraphQL API üConfigure AppSync üPerform queries, mutations, & register subscriptions from client application üGraphQL code generation üReact & React Native Components for render props
• 13. Storage © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Storage üCreate & configure Amazon S3 bucket üManage user content for your app in public, protected, or private storage buckets Amazon S3
• 14. Hosting © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Hosting üCreates & configure S3 bucket for hosting üConfigure Amazon CloudFront üPublishes assets to S3 üPush updates when necessary directly from AWS Command Line Interface (AWS CLI) Amazon S3
• 15. GraphQL schema transformations, too! © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. GraphQL schema transformations, too! GraphQL API Toolchain Automatically generate code for GraphQL queries, mutations, subscriptions, & typed schemas
• 16. What is AWS AppSync? © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What is AWS AppSync?
• 17. Slide1247 © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Managed service for application data using GraphQL with real-time capabilities and an offline programming model •Connect to resources in your account •Make your data services in real time or offline •Use AWS services with GraphQL •Automatic sync, conflict resolution in the cloud •Enterprise-level security features What does it do?
• 18. What does it do? © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What does it do? Real-time collaboration Offline programming model with sync Get only the data you need Own your data Fine-grained access control
• 19. Let’s build!https://amplify-workshop.go-aws.com © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Let’s build! https://amplify-workshop.go-aws.com https://dashboard.eventengine.run AWS Console: Region: Ireland (eu-west-1) !! Create/use admin IAM User first !!
• 20. Slide1317 © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
• 21. Slide1312 Thank you! © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Serdar Nevruzoglu serdarn@amazon.com