API moderne real-time per applicazioni mobili e web

API moderne real-time per
applicazioni mobili e web
Stefano Sandrini, AWS Sr. EMEA Mobile Specialist SA
Daniel De Gaspari, Solution Architect – Sky Italia

© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Confidential
Agenda
GraphQL
AWS AppSync
Use Cases
Customer Use Case: Sky Italia
Offline

GraphQL is a query language for APIs and
a runtime for fulfilling those queries
with your existing data.

Queries MutationsTypes
Subscriptions
GraphQL schema and operations
A query language for APIs . . . and a runtime!
type User {
id: ID!
username: String!
firstName: String
lastName: String
daysActive: Int
}

Queries
A query language for APIs . . .
Mutations Subscriptions
query GetPost {
getPost(id: ”1”) {
id
title
author
date
}
}
mutation CreatePost {
createPost(input: {…}) {
id
title
author
date
}
}
subscription OnCreatePost {
onCreatePost {
id
title
author
date
}
}

AWS AppSync
Build scalable applications
on a range of data sources,
including those requiring
real-time updates and
offline data access

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 facade for any
AWS service
Conflict detection and
resolution in the cloud
Enterprise security features:
IAM, Amazon Cognito, OIDC,
API keys

How does AWS AppSync work?
,
,

,
,
How does AWS AppSync work?

AppSync &
Amplify

Amplify Framework
Amplify Framework (open source)
Command-line interface (CLI)
Client libraries (iOS, Android, JavaScript)
Platform-specific UI components
Managed developer services
AWS Amplify Console: Hosting/Continuous
deployment
AWS Device Farm: Testing on real iOS/Android
devices and desktop browser testing

$ amplify add api
Amplify CLI: GraphQL Transform – @model transformer
# schema.graphql
type Post @model {
id: ID!
title: String!
}

Amplify CLI: GraphQL Transform
Quickly create backends for your
web and mobile applications on
AWS
Define application’s data model
using the GraphQL Schema
Convert your definition into
descriptive AWS CloudFormation
templates that implement your data
model
@model - Top-level entity; creates DynamoDB table, and
resolvers for base type
@connection - Adds relationships between @model
types
@auth - Enables set of authorization rules
@searchable - Handles streaming the data of an @model
object type to Amazon Elasticsearch Service and configures
search resolvers
@versioned - Enables versioning
@function – Adds a Lambda function as a data source
@key – Configures custom indexes for @model types
@predictions - Access an orchestration of AI/ML services
such as Amazon Rekognition, Amazon Translate, and/or
Amazon Polly

GraphQL Transform: Mix and match data sources
type Post {
id: ID!
content: String
description: String
ups: Int
downs: Int
}

GraphQL Transform: Mix and match data sources
searchPosts
Mutations
Queries
type Post
@model
@auth(rules: [{allow: owner}])
@searchable{
id: ID!
content: String
description: String
ups: Int
downs: Int
}
createPost
readPost
updatePost
deletePost
listPost
Amazon
Cognito
AWS AppSync
Amazon
DynamoDB
Amazon Elasticsearch
Service
Lambda
function

$ amplify add codegen [--apiId <api-id>]
// Will generate GraphQL statements
// (queries, mutations, subscriptions)
CLI: GraphQL codegen
import { API } from 'aws-amplify';
import * as queries from './graphql/queries';
const todos = await API.graphql({
query: queries.listTodos,
authMode: 'AWS_IAM'
});

Use cases

Real-time GraphQL subscriptions
subscription onCreateMessage {
createMessage {…}
}
Secure WebSocket connection (wss://)
AppSync Data Sources
AWS AppSync
Amazon
DynamoDB
Amazon Elasticsearch
Service
AWS Lambda
Amazon Aurora
Local (Pub/Sub)
HTTP

Real-time data broadcasting

AWS AppSync Real-Time Reference Architecture
https://github.com/aws-samples/appsync-refarch-realtime

AWS AppSync Real-Time Reference Architecture

Real-time GraphQL subscriptions

• Media & Entertainment
• E-commerce
• Retail
• Healthcare
• Airlines
• Transport
• Security
• Payment Services
• Education
And more…

Use Case
Sky Italia

LIVE DATA ARCHITECTURE
DANIEL DE GASPARI - SOLUTION ARCHITECT
DIGITAL SOLUTION ARCHITECTURE TEAM

38
Scope & High Level Requirements
Logical View: Engine and Plugin
Logical View: Capabilities
System Engineering View: component by component
Monitoring
AWS AppSync & GraphQL
Amplify Framework
Next Planned Evolution

39
• Real time and near real time data available
• High Horizontal Scalability
• Source and consumer agnostic Data ingestion, Data
feeding and rendering engine
• SEO optimization with SSR
• Data rendering using microfrontend and
webcomponent approach
• Full monitoring
• Easy onboarding for developers with same language
FE and BE
• Query language(AppSync for GraphQL) instead of
REST in order to optimize data transfer between BE
and Webcomponent.
• Pushing intstead of Polling to get data update
• Different level of caching to reduce db interaction

40
Data Feeding and Data rendering (Engine) Data Ingestion (Engine)
Data sources (plugin components) Consumers for Web Components or Data (plugin components)

41
• Receives data from data sources
• Stores data into Sports Data Repository
• Notifies HTML Component Generator
• Retrieves sports data
• Sends updates to clients
• Generates widgets’ HTML
• Stores generated widget
• Notifies HTML Page Generator
• Generates web pages
• Stores generated widget into
HTML Component Repository
A
B C D E
A
B
C
D
E

42
Data Ingestion Queue
• receives message from data providers
• triggers Data Ingestion Lambda
Data Ingestion Lambda
• parses received messages
• updates DB tables
• inserts messages on SNS’s topics
• 1:1 topics-tables mapping

43
AWS System Manager
• parameter store
• contains parameters necessary to the lambda
execution
Database
• entity-relationship model

44
Data Ingestion Notifier
• entry point for data feeding
• receives requests by the Ingestion Lambda
• 1 topic for each DB table
Web Component Generator Queue
• receives messages from Data Ingestion Notifier
• triggers the associated lambda dedicated to the
generation of a specific web component

45
Web Component Generator Lambda (for each web component)
• reads messages received by SQS
• contains all information necessary in order to identify
the specific widget of that type
• retrieves widget’s configurations from S3 bucket
• performs a GraphQL interaction (query-mutation)
• generates the web component and notify creation
(notifier)
• stores web component in an S3 bucket

46
Web Component Notifier
• one topic for each BE system
AppSync (managed graphQL)
• Query: retrieves data in a data source
• Mutation: modifies data in a data source
• Subscription: pushes data to clients via websocket
• invokes the Lambda Data API
• solves the “fake mutation”, sending updates to all
clients subscribed

47
Data API Lambda
• implements queries to extract data from the
database
• each data API Lambda represents a microservice
Secrets Manager
• contains credentials used to access and reads data
from Sports Data Database

48
Widget Writer Queue
• receives messages from the Web Component Notifier
• triggers Widget Writer Lambda
Widget Writer Lambda
• acts as an adapter for our CMS
• makes a request to the API Gateway, obtaining the
HTML of the new widget
• store widget into EFS

49
EFS
• repository for web components generated
• used by Adobe Experience Manager for pages'
generation that include the these web components
Configuration Writer Queue
• receives message from AEM’s Author instance
• triggers the associated lambda dedicated to
propagates the widget configurations to Sports Data
infrastructure

50
Configuration Writer Lambda
• updates the new rules relating to the configuration
of the web components on the S3 bucket

51
• Infrastructure level
– evaluate services’ health
• Application level
– custom metrics based on logs in our applications
• Involved services
– instances with CloudWatch Agent
– CloudWatch Logs
– metric filters based on logs’ patterns
– thresholds based on our metrics and associated alarms
– email notifications

52
• Managed service with GraphQL
– Serverless
• Hierarchical data structure
– MatchCompetition > MatchSeason > MatchDay > …
• Queries structured with a channel logic
– getTeamCalendarDesktop()
– getTeamCalendarMobile()
• Resolver
– Apache Velocity for a simple/remapping logic
– lambda for complex logic

53
• Resolvers’ reuse & pipeline resolvers
• Local Resolver
– Invoke mutation with data as request payload
– Avoid useless invocation for already calculated fields
– Push data passed as mutation’s payload via
subscription
getMatchDay(params: InputGetMatchDay): [MatchDay]
#@function(name:"getCurrentCompetitionStatus-${env}")
#@function(name: "getMatchDay-${env}")
type BaseFields{
field1: Int
field2: String
calculatedField: Int @function….
}
type BaseFields{
field1: Int
field2: String
}
type UsedByQuery{
baseFields: BaseFields
calculated: Int @function…..
}
Type UsedByMutation{
baseFields: BaseFields
calculated: Int
}

54
• Shared IAM Role between lambda functions
– custom resolvers for each lambda function
• Custom languages for lambda functions
– Custom tasks (run tests, compile, etc…)
• GraphQL schema splitting
• Multiple environments

55
• Multiple clients
• RDS Proxy
• AppSync Cache
• AWS EventBridge
– serverless event bus
– replace SNS & SQS
• DynamoDB
– replace MySQL with NoSQL
– streams
- push events directly from our data source
• Custom protection in AppSync
– AWS Amplify: open source framework
– AWS Cognito
– custom rules for GraphQL operations

Caching
Managed server-side caching
Full API Caching
Per Resolver Caching
Encryption

Log insights

X-Ray

Offline

Amplify DataStore
Multi-platform (iOS/Android/React Native/Web) on-device
persistent storage engine that automatically synchronizes data
between mobile/web apps and the cloud using GraphQL.

AWS Cloud

ds_pk ds_sk Name Title … _lastChangedAt _TTL
Post-xxx2019 02:12:07.123:1 Nadia Hello World 1541884315162 1541884320
Post-yyy2019 24:11:07.2:1 Pancho I’m Sleepy 1541884359527 1541884364
Post-zzz2019 24:11:07.3:3 Shaggy Running in the
park
1541884404015 1541884409
ID Name Title …
123 Nadia Hello World
2 Pancho I’m Sleepy
3 Shaggy Running in
the park
Sync-enabled resolver createPost(input: CreatePostInput!): Post
GraphQL Schema
DataStore.save(
new Post(Name:”Nadia” Title:“Hello World” )
);

Amplify DataStore
Before After

• Start effortlessly
• Scale with your business
• Real-Time & Offline
• Unify and secure access to your distributed
data and services
• Amplify integrations: DataStore, GraphQL
Transform, Local Mocking and CodeGen
https://aws.amazon.com/appsync/resources/#Videos

AWS Europe (Milan) Region
On April, 28th AWS expanded its global footprint with the opening of the AWS Infrastructure Region in Italy. The new
Region AWS Europe (Milano) brings advanced cloud technologies that enable opportunities for innovation,
entrepreneurship, and digital transformation. For additional information about services and characteristics of an AWS
Region, you can check the website: aws.amazon.com/local/italy/milan/

67
AWS Training & Certification
https://www.aws.training: Free on-demand courses to help you build new cloud skills
Introduction to Amazon API Gateway
https://www.aws.training/Details/Video?id=16452
e-Learning: Amazon API Gateway for Serverless Applications
https://www.aws.training/Details/eLearning?id=27199
e-Learning: Architecting Serverless Solutions
https://www.aws.training/Details/eLearning?id=42594
For more info on AWS T&C visit: https://aws.amazon.com/it/training/

Thanks!
Stefano Sandrini, AWS Sr. EMEA Mobile Specialist SA
Daniel De Gaspari, Solution Architect – Sky Italia

API moderne real-time per applicazioni mobili e web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a API moderne real-time per applicazioni mobili e web

Similar a API moderne real-time per applicazioni mobili e web (20)

Más de Amazon Web Services

Más de Amazon Web Services (20)

API moderne real-time per applicazioni mobili e web