Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

0 to 100kmh with GraphQL. Rapid API Prototyping usingserverless backend in the cloud.pdf

158 visualizaciones

Publicado el

You will discover how your mobile and web applications can leverage data-driven API and cloud-based backends, from rapid prototyping, to a confident deployment in a scalable serverless infrastructure. We will show how to use advanced features such as notifications and support for offline devices. This session will demonstrate how to build a cloud-based, serverless solution to manage access to your data sources and existing API and how to integrate GraphQL API inside your web or mobile applications written in Swift or Kotlin.

  • Sé el primero en comentar

0 to 100kmh with GraphQL. Rapid API Prototyping usingserverless backend in the cloud.pdf

  1. 1. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 03.04.2019 O S L O
  2. 2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 0 to 100 with GraphQL: Rapid Development Techniques for APIs { "name": "Sébastien Stormacq", "role": ”Technical Evangelist", "company": "Amazon Web Services”, "twitter": ”@sebsto”, ”github": ”sebsto” } B A R 4 O S L O 03.04.2019
  3. 3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. This talk is for developers
  4. 4. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. This talk is for developers < frontend | backend >
  5. 5. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. How to you prototype API ?
  6. 6. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Congratulations ! You’ve just been hired.
  7. 7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  8. 8. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Today’s mobile experience is lacking Mobile website, no native apps Slow to book, low conversion rates Backend built for high-speed desktops !
  9. 9. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Your job is to define tomorrow’s experience Digital agencies hired for design First prototype in 4 weeks Must use real data, no mockup !
  10. 10. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Our Goal Enable backend services for prototype Allow design to evolve Keeping up with day-to-day job !
  11. 11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. { "_id": 3, "name": "ElastiLodge South Zanetown", "image": "https://placehold.it/300x300.png", "description": "Sint nostrum vel quibusdam quia reprehenderit cum exercitationem quia ea.", "location": "South Zanetown", "manager": { "name": "Florentino Jacobi", "email": "florentino.jacobi@elastilodge.com" }, "timeZone": "US/Central", "phoneNumber": "802-918-3262", "category": 5, Legacy REST API "address": { "street": "410 Simonis Forest", "zip": "07545-2308", "city": "South Zanetown", "country": "Virgin Islands, British" }, "deskHours": "24 hours", "amenities": [ ... ], "restaurants": [ ... ] }
  12. 12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What are the challenges of REST API
  13. 13. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. /posts /comments /authors REST API Chatty & Over fetching { "posts" : [ { "id" : 1, "content" : "the quick brown fox jumps over the…", "author" : "/authors/123", "created" : 1550486509, "comments" : "/posts/1/comments", ... }, { "id" : 2, "content" : "the quick brown fox jumps over…", "author" : "/authors/123" "created" : 1550486509, "comments" : "/posts/2/comments", ... } ] }
  14. 14. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Introducing GraphQL
  15. 15. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. https://graphql.org
  16. 16. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Why GraphQL ? posts comments authors GraphQL API
  17. 17. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. How does GraphQL work? type Query { getTodos: [Todo] } type Todo { id: ID! name: String description: String priority: Int duedate: String } Model data with application schema query { getTodos { id name priority } } Client requests what it needs { "id": "1", "name": "Get Milk", "priority": "1" }, { "id": "2", "name": "Go to gym", "priority": "5" },… Only that data is returned
  18. 18. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. GraphQL Operations Queries Read data Mutations Write data Subscriptions Listen for data query { search(q: “harry potter”) { title } } mutation { create(title: “new book”) { id } } subscription { onCreate { id title } }
  19. 19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Is REST dead then? When data drives UI Structured data Query-driven Client-driven development Use GraphQL When you leverage HTTP Caching, Content types Hypermedia (HATEOAS) For resources (eg Amazon S3) Use REST Pick the appropriate protocol for your use case
  20. 20. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. How to deploy GraphQL API ?
  21. 21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS App Sync Managed serverless GraphQL service Connect to data sources in your account Add data sync, real-time, and offline capabilities for any data source or API GraphQL facade for any AWS service Conflict detection and resolution in the cloud Enterprise security features: IAM, Amazon Cognito, OIDC, API keys
  22. 22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AppSync Data Sources
  23. 23. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AppSync Resolvers
  24. 24. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Hello AWS AppSync KEEP CALM and WATCH the DEMO
  25. 25. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Prototype : Phase #1 Hotel Detail
  26. 26. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Hotel Detail: Design What data is required? Can we use existing data sources? How can we enable via AppSync? Challenges? Missing data?
  27. 27. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Mapping to Legacy API { "_id": 3, "image": "https://placehold.it/300x300.png", "name": "EL Resort & Spa", "description": "...", "location": "Fiji", "manager": { "name": "Florentino Jacobi", "email": "florentino.jacobi@elastilodge.com" }, "timeZone": "US/Central", "address": { "street": "123 Main St", ”postalcode": "07545", "city": "Momi Bay", "country": "Fiji" }, "phoneNumber": "1-888-123-4567", "category": 5, "deskHours": "24 hours", "amenities": [ ... ], "restaurants": [ ... ] }
  28. 28. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Mapping to Legacy API { "_id": 3, "image": "https://placehold.it/300x300.png", "name": "EL Resort & Spa", "description": "...", "location": "Fiji", "manager": { "name": "Florentino Jacobi", "email": "florentino.jacobi@elastilodge.com" }, "timeZone": "US/Central", "address": { "street": "123 Main St", ”postalcode": "07545", "city": "Momi Bay", "country": "Fiji" }, "phoneNumber": "1-888-123-4567", "category": 5, "deskHours": "24 hours", "amenities": [ ... ], "restaurants": [ ... ] }
  29. 29. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Hotel Detail: GraphQL Schema type Hotel { hotelId: ID! name: String! image: String location: String! phoneNumber: AWSPhone! address: Address! ... } type Query { listHotels(offset: String, limit: Int) getHotel(hotelId: ID!) }
  30. 30. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Hotel Detail: Resolvers ## Resolver: Request Mapping ## { "version": "2018-05-29", "method": "GET", "resourcePath": "/hotels/${ctx.args.hotelId}", "params": { "headers": { "Content-Type": "application/json" } }, } ## Resolver: Response Mapping ## #if($ctx.result.statusCode == 200) ## If response is 200, return the body. ## Could also filter result... $ctx.result.body #else ## If not 200, append response to error $utils.appendError($ctx.result.body) #end
  31. 31. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Hotel Detail: Result query { getHotel(hotelId: 3) { name location image phoneNumber address { street city } amenities } } { "name": "ElastiLodge North Rodgerstad", "location": "North Rodgerstad", "image": "/300x300.png", "phoneNumber": "(214) 210-4674", "address": { "street": "123 Main St", "city": "North Rodgerstad" }, "amenities": [ ... ] }
  32. 32. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Mobile Code – Initialize App Sync Client do { // create app sync configuration (cache, service config etc) let config = … // client initialization let appSyncClient = try AWSAppSyncClient(appSyncConfig: config) } catch { fatalError("Error initializing appsync client. (error)") }
  33. 33. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Mobile Code – Run a Query // call a GraphQL Query appSyncClient?.fetch(query: GetHotelQuery(hotelId: hotelId), cachePolicy: .fetchIgnoringCacheData) {(result, error) in guard let r = result, error == nil else { print(error?.localizedDescription ?? "") return } // use the data in the GUI self.hotelDetails = r.data?.getHotel … }
  34. 34. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Mobile App – Phase 1 KEEP CALM and WATCH the DEMO
  35. 35. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Reservations
  36. 36. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Reservations: Design What data is required? Can we use existing data sources? How can we enable via AppSync? Challenges?
  37. 37. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Reservations: GraphQL Schema type Reservation { confirmationNumber: ID! hotel: Hotel! guest: User! startDate: AWSDate! endDate: AWSDate! rate: Int! } type Query { ... reservations(guestId : ID!):[Reservation] } type Mutation { createReservation(input:ReservationInput) deleteReservation(confNum: ID!) }
  38. 38. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Reservations: Query Resolver - Input #set( $todayString = $util.time.nowISO8601().substring(0, 10) ) { "version": "2017-02-28", "operation": "Query", "query": { "expression": "guestId = :gId AND startDate > :startDate", "expressionValues": { ":gId": $util.dynamodb.toDynamoDBJson($ctx.identity.sub), ":startDate": $util.dynamodb.toDynamoDBJson($todayString) } } } Note: assumes user is logged in via AWS Cognito User Pool. Details are outside our scope.
  39. 39. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Reservations: Query Resolver - Output $util.toJson($ctx.result.items) Note: assumes user is logged in via AWS Cognito User Pool. Details are outside our scope.
  40. 40. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Reservations: Result query { guestReservations { confirmationNumber hotel { hotelId name image phoneNumber } startDate endDate } }
  41. 41. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Extending Reservation Workflow
  42. 42. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Subscription Query subscription ReservationSubscription { createReservationEvent(guestId:1) { confirmationNumber } }
  43. 43. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Mobile Code – Subscribe to changes let sub = CreateReservationEventSubscription(guestId: userId) newReservationSubscription = try appSyncClient?.subscribe(subscription: sub, resultHandler: { (result, transaction, error) in // check for error // store a reference to the new booking into our cache transaction?.update(query: GuestReservationsQuery(guestId: userId)) { (data: inout GuestReservationsQuery.Data) in data.guestReservations?.append(bookingToAdd) // consume the data in the UI self.bookingDetails?.append(bookingToAdd) } }
  44. 44. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Reservation Subscriptions KEEP CALM and WATCH the DEMO
  45. 45. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adaptive Rates
  46. 46. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adaptive Rates: Design R&D is building an adaptive rate capability Delivered via Amazon SageMaker API How do we add today’s rate to our existing API?
  47. 47. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adaptive Rates: Evolving our GraphQL API GraphQL supports multiple data sources per query: 1. Add new field 2. Configure new Data Source and Resolvers
  48. 48. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adaptive Rates: GraphQL Types and Resolvers type Hotel { hotelId: ID! name: String! location: String! ... rate: Rate } type Rate { hotelId: ID! rate: Int! currency: String! date: AWSDate! } ## rate Field Resolver: Request Mapping ## { "version": "2018-05-29", "method": "GET", "resourcePath": "/rd/rates/${ctx.source.hotelId}", "params": { "headers": { "Content-Type": "application/json" } } }
  49. 49. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adaptive Rates: Result query { getHotel(hotelId: 3) { name location image phoneNumber address { street city } amenities rate { currency rate } } } { "name": "ElastiLodge North Rodgerstad", "location": "North Rodgerstad", "image": "https://placehold.it/300x300.png", "phoneNumber": "(214) 210-4674", "address": { "street": "", "city": "" }, "amenities": [ ... ], "rate": { "currency": "USD", "rate": 312 } }
  50. 50. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Field-level resolution KEEP CALM and WATCH the DEMO
  51. 51. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What did we just did ?
  52. 52. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What did we accomplish today? Built a rich, flexible, mobile-ready API Incorporated legacy, new, and prototype features in a single endpoint Evolved API as requirements changed No coding required! Well, there were a few Velocity Templates AWS Console includes starter / boilerplate templates
  53. 53. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify CLI Toolchain for developers Enables you to prototype and build quickly Built-in GraphQL Transformer Converts schema to CloudFormation templates and builds cloud resources $ amplify api add # create GraphQL schema # for example: type Hotel @model @searchable { name: String! location: String! ... } https://github.com/aws-amplify/amplify-cli
  54. 54. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Backend Engineer: Hmm. So you’re saying this “GraphQL” will allow any web or native engineer to arbitrarily query basically any field in any backend service, recursively, however they want, without any backend engineers involved? Frontend Engineer: Yeah, right? It’s amazing! […silence…] Backend Engineer: Guards, seize this person.
  55. 55. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Real world pitfalls
  56. 56. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Code presented today https://github.com/sebsto/reinvent2018-mob320
  57. 57. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Great GraphQL Podcasts
  58. 58. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Thank you! © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. { "name": "Sébastien Stormacq", "role": ”Technical Evangelist", "company": "Amazon Web Services”, "twitter": ”@sebsto”, ”github": ”sebsto” }
  59. 59. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Please complete the session survey in the mobile app. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.

×