Building a working prototype can help you quickly gather feedback from users, but mock data can be limiting, and backend services might not exist in the state you need. In this chalk talk, we explore how you can use AWS AppSync to build a mobile API with little to no coding and manage existing APIs to empower small development teams or bring your prototypes to life.

2. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
0 to 60 with AWS AppSync:
Rapid Development Techniques for
Mobile APIs
Josh Kahn
Solutions Architect
AWS
M O B 3 2 0

3. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What is AWS AppSync?
Managed Serverless
GraphQL service
Connect to data sources in
your account
Add data sync, real-time and
offline capabilities
GraphQL façade for
any AWS service
Conflict detection and
resolution in the
cloud
Enterprise security
features (IAM,
Cognito, API keys)

4. © 2018, 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

5. © 2018, 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
}
}

6. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS AppSync Data Sources

7. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS AppSync Resolvers

8. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

9. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

10. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
ElastiLodge – Boutique Hotels
• Today’s mobile experience is lacking:
• Mobile website, no native apps
• Slow, cumbersome to book reservations leading to low conversion rates
• Backend was built for high-speed desktop connectivity
• Building tomorrow’s mobile experience:
• Management has hired a digital agency to design all-new mobile experience
• Agency contracted to deliver functional prototype in four weeks
• To be most impactful, must use real data and allow reservation booking

11. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Our Goals
• Enable backend services for prototype experience
• Keep up with our day job:
• Services operations
• Monolithic reservation application
• Allow design to evolve

12. © 2018, 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,
"address": {
"street": "410 Simonis Forest",
"zip": "07545-2308",
"city": "South Zanetown",
"country": "Virgin Islands, British"
},
"deskHours": "24 hours",
"amenities": [ ... ],
"restaurants": [ ... ]
}
Legacy API: Sample Response

13. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

14. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

15. © 2018, 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
AWS AppSync?
• Challenges? Missing
data?

16. © 2018, 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": [ ... ]
}

17. © 2018, 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": [ ... ]
}

18. © 2018, 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!)
}

19. © 2018, 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

20. © 2018, 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": "https://placehold.it/300x300.png",
"phoneNumber": "(214) 210-4674",
"address": {
"street": "123 Main St",
"city": "North Rodgerstad"
},
"amenities": [ ... ]
}

21. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

22. © 2018, 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
AWS AppSync?
• Challenges?

23. © 2018, 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 {
...
guestReservations:[Reservation]
}
type Mutation {
createReservation(input: ReservationInput)
deleteReservation(confNum: ID!)
}

24. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Reservations: Query Resolver
#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.

25. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Reservations: Mutation Resolvers

26. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Reservations: Result
query {
guestReservations {
confirmationNumber
hotel {
hotelId
name
image
phoneNumber
}
startDate
endDate
}
}

27. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Extending Reservation Workflow

28. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

29. © 2018, 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?

30. © 2018, 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

31. © 2018, 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"
}
}
}

32. © 2018, 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
}
}

33. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

34. © 2018, 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

35. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Extra Credit
• Other design ideas?
• A few of mine:
• Add today’s weather in hotel
location
• Search for hotel by location,
date, or rate
• Search by geolocation
• Allow users to upload photos

36. © 2018, 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 AWS
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

37. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Finished Solution
https://github.com/jkahn117/reinvent2018-mob320

38. Thank you!
© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Josh Kahn
jkahn@amazon.com

39. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.