Do you want to be the next Silicon Valley startup worth billions? Come to this workshop session and learn how to build a real-time trivia application where everyone is a participant! Using AWS AppSync and AWS Amplify, participants will implement a trivia system. Additionally, by using a webcam with AWS MediaLive and AWS MediaStore, everyone will be able to host their own show. Don't miss your chance to learn these services while building something fun you can host your own family and friends trivia nights on AWS. The goal of the workshop is to build out a question and answer trivia pub/sub model and convert your laptop into a live stream platform to push your video into the app. Please note that participants will need Android Studio or Xcode as a prerequisite to build the mobile app.

2. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Building a Live Trivia Mobile App
Using AWS AppSync, AWS Amplify,
and AWS Media Services
Shawn Przybilla
M&E Solution Architect
M A E 3 1 0
Sam Patzer
Mobile Solution Architect
Ashwin Raghuraman
M&E Solution Architect
Miguel Cervantes
Mobile Solution Architect

3. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Introducing Unicorn Trivia
“What if anyone in the world could be a
gameshow contestant and compete to win
prizes?”

4. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Business objectives
Speed to launch
Keep costs low
User growth
Captivating content
& engagement

5. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Trivia for everyone!
Players App Trivia host
Entertaining
questions &
live video
Answers &
prizes
Real-time interaction

6. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What do we need?
Trivia service &
administrator
portal
Multi-platform
clients
Live streaming
Service

7. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Approach
AWS AppSync
& serverless
Client
implementation
AWS Elemental
MediaServices
AWS Amplify

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

9. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Broadcast quality streaming in minutesLive streaming is complex
C A P T U R E INGEST D I S P L AYDELIVERYF i l e & r e a l - t i m e
t r a n s c o d e
C o n t e n t
o r i g i n
A d
i n s e r t i o n

10. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Elemental MediaLive
Broadcast live
with the push of
a button
Scale to
deliver
any number of
live channels
Encode
broadcast-
quality live
video
Encode live video for delivery to televisions or connected devices

11. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Cloud
How it works
Input A
Input B
Output Group
Output 1
Output 2
Output 3
Output 4
Output A
Output B
Source Content AWS Elemental MediaLive
An AWS Elemental MediaLive channel
converts redundant live inputs into two
streams of multiple compressed outputs.
Origination and Packaging
- AWS Elemental MediaStore
- AWS Elemental MediaPackage
CDN
Amazon CloudFront
and/or other CDNs
deliver video to output
devices
Live Source
devices
AWS Elemental MediaLive

12. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Working with channels
RTMP
HLS
Channel
Global settings
Output group
Output group
Input
AWS Elemental MediaLive
Archive
Save to S3 bucket
HLS
Apple HTTP Live Streaming, stream to AWS
Elemental MediaStore, AWS Elemental
MediaPackage, or other origin service
Send to origin or CDN
Smooth
UDP
RTMP
Broadcast live stream via RTP/UDP
RTMP destination such as Twitch
Live source
Media server
Input security
group
RTP

13. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Elemental MediaStore
Scale with your
audience
High
performance,
optimized for
video
Familiar
management
tools for
access
control
High-performing live video origination and storage service

14. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
• Object storage and content origination service
• Low and predictable latencies for objects’ PUTs & GETs
• Storage scales automatically
• Handles high volumes of concurrent requests
• Backed by Amazon Simple Storage Service (Amazon S3) for durability
• Integration with AWS services like Amazon CloudWatch, AWS CloudTrail,
AWS Identity and Access Management (IAM), etc.
AWS Elemental MediaStore overview

15. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Container
• Namespace for folders & objects
• Writing and retrieving objects
• Attaching access policies
• Managed via control-plane API
Folders
• A division of a container
• Hold objects and other folders
Objects
• An asset (similar to an S3 object)
• Fundamental entities that are stored
• Includes all file types
• Managed through data-plane API
AWS Elemental MediaStore overview
Container policy
• IAM policy
• Resource-based policy
• Governs rights to all folders/objects in container
CORS policy
• Method for client applications in one domain to interact
with resources in a different domain
• CORS policy does not impact the container policy

16. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Trivia service

17. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What is GraphQL?
Describe what’s possible
with a type system
Uniform API across data
stores and APIs
Network optimized requests
and responses
Powerful developer
tools
Integrated
documentation and
introspection
Query language for API and a
runtime for fulfilling queries with
existing data

18. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GraphQL operations
subscription {
onCreateComment{
id
}
}
mutation {
createEvent(name:”Test”){
id
}
}
query {
getEvent(id: 1){
id
name
}
}
Mutations
Write data
Subscriptions
Receive data in real-time
Queries
Read data

19. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
type Query {
listEvents: [Event]
}
type Event {
id: ID!
name: String!
when: String!
where: String!
}
query {
listEvents {
id
name
}
}
{
"id": "1",
"name": "React Meet Up"
},
{
"id": "2",
"name": "GraphQL Party"
},
{
“id”: “3”,
“name”: “Angular Sesh”
}
...
Define your data
(schema)
Invoke operation Get EXACTLY what
you asked for
How to use GraphQL

20. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
type Query {
listEvents: [Event]
}
type Event {
id: ID!
name: String!
when: String!
where: String!
}
{
"id": "1”,
"name": "React Meet Up”,
“when”: “Tomorrow”
},
{
"id": "2",
"name": "GraphQL Party",
“when”: “Saturday”
},
{
“id”: “3”,
“name”: “Angular Sesh”,
“when”: “Next Friday”
}
query {
listEvents {
id
name
when
}
}
Define your data
(schema)
Invoke operation Get EXACTLY what
you asked for
How to use GraphQL

21. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GraphQL sounds legit!
I want to run my own GraphQL server!

22. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Focus on apps―
Not infrastructure

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

24. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS AppSync
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 façade for any
AWS service
Conflict detection and
resolution in the cloud
Enterprise security features:
IAM, Amazon Cognito, OIDC, API keys

25. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
UnicornTrivia service architecture
Admin panel Mobile app

26. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
So how do you get
started?

27. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Introducing AWS Amplify

28. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify Command Line Interface
CLI to effortlessly create and
maintain sophisticated
serverless backends for your
apps.
Automatically creates cloud
formation templates
Open-source to work with the
community to drive the
roadmap

29. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Getting started―AWS Amplify CLI

30. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Mobile apps
iOS Native
• Written in Swift 4.2 with Xcode
10
• Supports iOS 11-12
• Uses native built HLS streaming
library AVKit
• Uses AWS AppSync iOS SDK for
GraphQL queries
React & React-Native
• Written in JavaScript
• Supports web browsers and the
latest versions of Android and
iOS
• Uses a react plugin to support
live video
• Uses Amplify JS SDK for
GraphQL queries

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

32. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Workshop preparation

33. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Let’s get started!
https://amzn.to/unicorntrivia

34. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Let’s play together!

35. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Let’s play together!
https://amzn.to/letsplaytrivia

36. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Summary
Trivia service &
administrator
portal
Multi-platform
clients
Live streaming
service

37. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Wrap-up
1. DELETE your amplify project and AWS resources!
2. Submit feedback in the re:Invent app
3. Come get a sticker :]

38. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Thanks!

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