Amplify your web and mobile apps development. Full stack, cloud-powered.

Amplify your web and mobile apps development. Full stack, cloud-powered.

As web and mobile have become the primary channel for engaging users, it’s critical that developers deliver applications with uncompromising user experience, performance, and scale. I will show you how to develop, release, and operate cloud-powered applications, at scale. We will navigate use cases like authentication, fine-grained access control, offline and real-time data, APIs (REST and GraphQL), AI/ML. We’ll dive into JavaScript, Kotlin, and Swift code to show how your applications can easily integrate with cloud-powered services.

Transcript

  1. © 2019, Amazon Web Services, Inc. or its Affiliates. Simplify

    your Web & Mobile apps with cloud-based serverless backends Sébastien Stormacq Technical Evangelist, AWS EMEA @sebsto
  2. A typical day in developer life

  3. We need an app to let our customers update preference

    settings – our competitors just launched the same thing, so I need it fast. I don’t want to pay a lot for it, especially when no one is using it. But remember that we’re growing, so make sure it scales great and is easy to manage and operate. And you’re on your own – sorry! A typical day in developer life
  4. We need an app to let our customers update preference

    settings – our competitors just launched the same thing, so I need it fast. I don’t want to pay a lot for it, especially when no one is using it. But remember that we’re growing, so make sure it scales great and is easy to manage and operate. And you’re on your own – sorry! A typical day in developer life No problem, I will use a cloud-based & serverless backend.
  5. None
  6. Serverless means

  7. Serverless means No Server to Provision or Manage Scale with

    Usage Availability and Fault Tolerance Built-in Pay for value
  8. Serverless across the stack Database Access Compute Developer Workflow

  9. None
  10. 165+ services TECHNICAL & BUSINESS SUPPORT Support Professional Services Optimization

    Guidance Partner Ecosystem Training & Certification Solutions Management Account Management Security & Billing Reports Personalized Dashboard MARKETPLACE Business Apps Business Intelligence DevOps Tools Security Networking Storage Databases IoT Rules Engine Device Shadows Device SDKs Device Gateway Registry Local Compute MIGRATION Schema Conversion Exabyte-Scale Data Migration Application Migration Database Migration Server Migration HYBRID Integrated Networking Data Integration Integrated Identity & Access Integrated Resource & Deployment Management Integrated Devices & Edge Systems ML / IA Custom Model Training & Hosting Conversational Chatbots Image & Scene Recognition Facial Recognition & Analysis Deep Learning (Apache MXNet, TensorFlow, & others) Text to Speech Facial Search ENTERPRISE Virtual Desktops App Streaming Sharing & Collaboration Corporate Email Communications Contact Center MOBILE API Gateway Single Integrated Console Identity Sync Mobile Analytics Mobile App Testing Targeted Push Notifications DEV/OPS One-click App Deployment DevOps Resource Management Application Lifecycle Management Containers Triggers Resource Templates Build and Test Analyze and Debug Patching ANALYTICS Data Warehousing Business Intelligence Elasticsearch Hadoop/Spark Data Pipelines Streaming Data Collection ETL Streaming Data Analysis Interactive SQL Queries APP SERVICES Queuing & Notifications Workflow Email Transcoding Search INFRA Regions Availability Zones Points of Presence CORE SERVICES Compute VMs, Auto-scaling, Load Balancing, Containers, Virtual Private Servers, Batch Computing, Cloud Functions, Elastic GPUs, Edge Computing Storage Object, Blocks, File, Archivals, Import/Export, Exabyte-scale data transfer CDN Databases Relational, NoSQL, Caching, Migration, PostgreSQL compatible Networking VPC, DX, DNS SECURITY & COMPLIANCE Identity Management Key Management & Storage Monitoring & Logs Configuration Compliance Web Application Firewall Assessment & Reporting Resource & Usage Auditing Access Control Account Grouping DDOS Protection MANAGEMENT TOOLS Monitoring Manage Resources Resource Templates Configuration Tracking Server Management Service Catalogue
  11. Many lines of boiler plate code

  12. Amplify Framework • Open source • Opiniated • Categories based

    high level abstractions • Declarative • Best practices built-in • Escape hatches
  13. Amplify – a CLI to Provision Services $ amplify add

    auth $ amplify add storage $ amplify add api $ amplify push Add an Amazon Cognito User Pool Create and secure an Amazon S3 bucket Add an AWS AppSync or API Gateway Deploy via AWS CloudFormation
  14. Amplify – A Set of Open-Source Libraries

  15. Let’s enrich an iOS App

  16. Initialise amplify $ amplify init $ amplify push

  17. None
  18. Provision the service $ amplify add auth $ amplify push

  19. Modify our App : initialise Amplify.Logging.logLevel = .info try Amplify.add(plugin:

    AWSCognitoAuthPlugin()) try Amplify.configure() print("Amplify initialized")
  20. Modify our App : add auth code _ = Amplify.Auth.signIn(username:

    username, password: password) { result in switch result { case .success(_): print("Sign in succeeded") case .failure(let error): print("Sign in failed \(error)") } }
  21. None
  22. $ amplify add auth && amplify push AWS Cloud Clients

    AWS Cognito User Pool Accounts Multi Factor Authentication Signup & Signin
  23. Hosted UI & Federated Authentication AWS Cloud Clients AWS Cognito

    User Pool Accounts Multi Factor Authentication Signup & Signin
  24. Zero line of code

  25. None
  26. https://2018.stateofjs.com/data-layer/overview

  27. query GetNote { getNote(id: ”1”) { id value } }

    mutation CreateNote { createNote(value: “My first note”) { id value } } subscription OnCreateNote { onCreateNote { id value } } GraphQL, a query language for APIs type Note { id: ID! value: String! }
  28. AppSync, a runtime to execute the query query GetPost {

    getPosts(id: ”1”) { id title comments { content } author { name } } } query GetPost { getPosts(id: ”1”) { id title comments { content } author { name } } } Amazon EC2 { "data" : { "posts" : [ { "id" : 1, "title" : "Introduction to GraphQL", "comments" : [ { "content" : "I want GraphQL for my next App!" } ], "author" : { "name" : "Sébastien Stormacq" } } ] } } Amazon DynamoDB AWS Lambda
  29. Provision the API $ amplify add api $ amplify push

  30. $ amplify add api $ amplify add api ? Please

    select from one of the below mentioned services GraphQL ? Provide API name: amplifynotes ? Choose an authorization type for the API Amazon Cognito User Pool Using service: Cognito, provided by: awscloudformation The current configured provider is Amazon Cognito. ? Do you want to use the default authentication and security configuration? Yes, use the default configuration. Successfully added auth resource ? Do you have an annotated GraphQL schema? No ? Do you want a guided schema creation? true ? What best describes your project: Objects with fine-grained access control (e.g., a project management app with owner-based authorization) ? Do you want to edit the schema now? Yes Please edit the file in your editor: /<path>/amplify/backend/api/amplifynotes/schema.graphql ? Press enter to continue
  31. A basic schema type LandmarkData { id: ID! name: String!

    category: String city: String state: String isFeatured: Boolean isFavorite: Boolean park: String coordinates: CoordinateData imageName: String }
  32. Transformers (aka annotations) type LandmarkData @model @auth(rules: [ {allow: private,

    provider: userPools, operations: [ read ] } ]) { id: ID! name: String! … park: String coordinates: CoordinateData imageName: String }
  33. Generate the client side code $ amplify codegen models

  34. Modify our App : add query code _ = Amplify.API.query(request:.list(LandmarkData.self))

    { event in switch event { case .success(let result): switch result { case .success(let landmarksData): DispatchQueue.main.async() { // do something with the data } …
  35. None
  36. $ amplify add api & @model AWS Cloud Clients AWS

    AppSync Amazon DynamoDB Table Schemas Resolvers Data Sources type Query { getLandmark(...): Landmark listLandmark(...): Landmark } type Mutation { createLandmark (...): Land updateLandmark (...): Land deleteLandmark (...): Land } type Subscription { onCreateLandmark (...): onUpdateLandmark (...): onDeleteLandmark (...): } type Landmark { id: ID! name: String } queries mutations getLandmark listLandmark updateLand deleteLand createLand Landmark Table IAM Role ARN Note Role ARN
  37. None
  38. Provision the service $ amplify add storage $ amplify publish

  39. Modify our App : add storage code Amplify.Storage.downloadData(key: "\(name).jpg", progressListener:

    { progress in // in case you want to monitor progress }, resultListener: { (event) in switch event { case let .success(data): // do something with the data case let .failure(storageError): } })
  40. None
  41. storage AWS Cloud Clients Amazon S3 Bucket

  42. None
  43. Provision the service $ amplify add hosting $ amplify publish

  44. amplify add hosting $ amplify add hosting ? Select the

    environment setup: DEV (S3 only with HTTP) ? hosting bucket name my_hosting_bucket ? index doc for the website index.html ? error doc for the website index.html
  45. amplify publish (dev) AWS Cloud Clients Amazon Cloudfront Amazon S3

    Bucket serving static web content Edge Locations
  46. amplify publish (prod) AWS Cloud Clients Amazon Cloudfront Amazon S3

    Bucket serving static web content Edge Locations
  47. Amplify DataStore Multi-platform on-device persistent storage engine that automatically synchronizes

    data between mobile/web apps and the cloud using GraphQL.
  48. © 2020, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. B a s e T a b l e D e l t a T a b l e
  49. Amplify black belt tips $ amplify checkout ENV $ amplify

    add ENV
  50. Amplify black belt tips

  51. Amplify black belt tips

  52. None
  53. What did we just do ? We created a front

    end ios app backed by cloud services • User Sign-in, Sign-up, Identity Federation (Amazon Cognito) • CRUD GraphQL API (AWS AppSync + Amazon DynamoDB) • Storage API (Amazon S3) https://amplify-ios-workshop.go-aws.com
  54. Amazon Simple Storage Service (Amazon S3) Access serverless backend AWS

    AppSync Amazon DynamoDB Amazon Cognito Cognito token AWS Cloud Temporary access key and secret key
  55. Take Away

  56. @sebsto /sebsto /sebsto /sebAWS

  57. © 2019, Amazon Web Services, Inc. or its Affiliates. Thank

    you ! Sébastien Stormacq Technical Evangelist, AWS EMEA @sebsto