Simplifiez vos applications web & mobiles à l'aide d'architectures serverless dans le cloud.

Concevoir, déployer et maintenir une API pour vos applications mobiles sont des challenges. Entre l'authentification, l'authorisation, les bases de données, les notifications, le support des appareils déconnectés et toutes les exigences de disponibilité, de montée en charge (scalability), le tout avec un budget digne d'un pull en cashemire passé à 90 degrés à la machine. Lors de cette session, je vais montrer comment intégrer et déployer une API GraphQL, sans besoin d'être expert en API et comment intégrer un mur d'authentification et d'authorisation dans vos applications web et mobiles, le tout avec juste quelques lignes de code. Accélérez le développement de vos applications mobiles en simplifiant l'architecture de vos backends.

Transcript

1. S U M M I T P a r i s
2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. S U M M I T Simplifier vos frontends à l’aide de backends serverless dans le cloud M A P 3 0 2 Sébastien Stormacq Technical Evangelist, AWS EMEA @sebsto Aurélien Capdecomme CTO, 20 Minutes @menthefraiche
3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Une nouvelle journée dans la vie d’un développeur
4. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Nous avons besoin d’une app pour que nos clients puissent mettre à jour leurs préférences. Notre concurrent vient de lancer la sienne. Nous en avons besoin rapidement. Je n’ai pas de budget, surtout qu’on ne sait pas si on aura du succès ou pas. Je ne veux pas payer si ca ne marche pas. Elle doit pouvoir s’accomoder de millions d’utilisateurs, être facile à maintenir et gérer au quotidien. Et tu es tout seul sur ce projet, désolé. Une nouvelle journée dans la vie d’un développeur
5. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Une nouvelle journée dans la vie d’un développeur Nous avons besoin d’une app pour que nos clients puissent mettre à jour leurs preferences. Notre concurrent vient de lancer la sienne. Nous en avons besoin rapidement. Je n’ai pas de budget, surtout qu’on ne sait pas si on aura du succès ou pas. Je ne veux pas payer si ca ne marche pas. Elle doit pouvoir s’accomoder de millions d’utilisateurs, être facile à maintenir et gérer au quotidien. Et tu es tout seul sur ce projet, désolé. Pas de souçis. Je vais utiliser un backend serverless dans le cloud.
6. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Vous avez dit sans serveur ?
8. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Serverless, une définition Pas de serveur à installer ou gérer Grandit avec vos besoins Haute-disponibilité par design Payer pour la valeur ajoutée
9. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Serverless, pas uniquement votre code Base de données API Code Outils de développement
10. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 2002 2006 Lancement du quotidien à Paris 1er quotidien de France pour la 1ère fois et de façon continue jusqu’à aujourd’hui Premier site web 2007 Présent sur iOS dès les débuts de l’iPhone 2010 11 rédactions locales dans les principales agglomérations françaises Un bureau aux USA 2013 Un bureau en Asie Fusion des rédactions print et numérique 2014 2015 Le numérique : 50% de l’audience Twitter : 1 million de followers Le trafic mobile dépasse le desktop 2016 Facebook : 2 millions de fans 2017 1er média français à développer une skill pour Alexa, l’Assistant vocal d’Amazon Membre de l’International Fact Checking Network 2018 Utilisation de l’IA par la rédaction 20Bot : 1er robot conversationnel d’un média d’info Etre là où sont les gens
12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Mass media sur tous les supports 22,1 millions de lecteurs par mois 5,2 millions par jour* 10,6 M. 5 M. 10,7 M. 2,6 M. Source : ACPM One Global V3 2018 – Audiences Print, Internet fixe, Internet mobile et Internet tablette One Global 30 J - * Couverture jour cross media
13. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. De l’importance du each 2013 2018
14. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. De l’importance du each
15. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Frontend
16. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Aurora Table Table Table API Frontend
17. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Aurora AWS Simple Queue Storage Message Table Table Table API Frontend
18. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Aurora AWS Step Functions AWS Simple Queue Storage Message Amazon ElastiCache ElastiCache for Redis Amazon Elasticsearch Service Search documents Table Table Table API Frontend SaaS CRM
19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amazon Aurora AWS Step Functions AWS Simple Queue Storage Message Amazon ElastiCache ElastiCache for Redis Amazon Elasticsearch Service Search documents Table Table Table API Amazon Simple Email Service (SES) Frontend SaaS CRM
20. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Le reach n’est rien sans l’engagement # participatif +13% d’inscrits par jour +87% de commentaires par jour +432% d’interactions entre les membres par jour
21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 20 Minutes en Serverless # scalable 40+ Lambdas 10+ Step Functions 84.6 millions d’invocations par mois 56.6 ms de temps de réponse
22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 20 Minutes en Serverless # flexible pensé microservices, ajustable au niveau de la fonction # économique facturé à l’utilisation, moins de tâches ops # innovant nouveau paradigme de développement
23. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
24. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 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
25. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Beaucoup de plomberie
26. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Je vous présente AWS Amplify
27. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify – une CLI pour créer vos services $ amplify add auth $ amplify add storage $ amplify add api $ amplify push Ajouter un Amazon Cognito User Pool Créer un bucket Amazon S3 sécurisé Ajouter une API REST ou GraphQL Deployer le tout via AWS CloudFormation
28. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify – une ensemble de librairies open-source
29. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Construisons une App avec React
30. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Démarrer avec Amplify $ amplify init $ amplify push
31. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
32. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Créer le service $ amplify add auth $ amplify push
33. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Modifier notre app import Amplify from 'aws-amplify’; import { withAuthenticator } from 'aws-amplify-react’; // 'aws-amplify-react-native'; import awsmobile from './aws-exports’; Amplify.configure(awsmobile); … export default withAuthenticator(App);
34. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
35. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify add auth && amplify push AWS Cloud Clients AWS Cognito User Pool Accounts Multi Factor Authentication Signup & Signin
36. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
37. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. https://2018.stateofjs.com/data-layer/overview
38. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. query GetNote { getNote(id: ”1”) { id value } } mutation CreateNote { createNote(value: “My first note”) { id value } } subscription OnCreateNote { onCreateNote { id value } } GraphQL, un language pour les APIs type Note { id: ID! value: String! }
39. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AppSync, un moteur d’exécution des requêtes 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
40. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Créer votre API $ amplify add api $ amplify push
41. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ 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
42. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Un schéma de base type Note { id: ID! note: String! }
43. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Transformers (aka Annotations) type Note @model @auth(rules: [{allow: owner}]){ id: ID! note: String! }
44. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
45. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. $ amplify add api & @model AWS Cloud Clients AWS AppSync Amazon DynamoDB Table Schemas Resolvers Data Sources type Query { getNote(...): Note listNotes(...): Note } type Mutation { createNote(...): Note updateNote(...): Note deleteNote(...): Note } type Subscription { onCreateNote (...): Note onUpdateNote (...): Note onDeleteNotet(...): Note } type Note { id: ID! value: String } queries mutations getNote listNotes updateNote deleteNote createNote Note Table Datasource IAM Role ARN Note Role ARN
46. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
47. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Changer votre modèle GraphQL type Note @model @auth(rules: [{allow: owner}]) @searchable { id: ID! note: String! }
48. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Créer le service $ amplify push
49. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
50. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. @searchable AWS Cloud Clients AWS AppSync Amazon DynamoDB Table Schemas Resolvers Data Sources queries mutations getNote listNotes updateNote deleteNote createNote Note Table Datasource IAM Role ARN Note Role ARN type Query { getNote(...): Note listNotes(...): Note } type Mutation { createNote(...): Note updateNote(...): Note deleteNote(...): Note } type Subscription { onCreateNote (...): Note onUpdateNote (...): Note onDeleteNotet(...): Note } type Note { id: ID! value: String }
51. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. @searchable AWS Cloud Clients AWS AppSync Document Index Amazon ElasticSearch Schemas Resolvers Data Sources type Query { getNote(...): Note listNotes(...): Note searchNotes(...): [Note] } type Mutation { createNote(...): Note updateNote(...): Note deleteNote(...): Note } type Subscription { onCreateNote (...): Note onUpdateNote (...): Note onDeleteNotet(...): Note } type Note { id: ID! value: String } queries mutations getNote listNotes updateNote deleteNote createNote ElasticSearch Datasource IAM Role ARN ES Domain ARN Streaming Lambda Note Table Datasource IAM Role ARN Note Role ARN searchNotes Amazon DynamoDB Table
52. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
53. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Créer le service $ amplify add hosting $ amplify publish
54. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 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
55. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
56. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. amplify publish (dev) AWS Cloud Clients Amazon Cloudfront Amazon S3 Bucket serving static web content Edge Locations
57. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. amplify publish (prod) AWS Cloud Clients Amazon Cloudfront Amazon S3 Bucket serving static web content Edge Locations
58. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
59. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify – Ceinture noire ! $ amplify checkout ENV $ amplify add ENV
60. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify – Ceinture noire !
61. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify – Ceinture noire !
62. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Récapitulons Une web app et des services cloud serverless • Avec authentification et enregistrement (Amazon Cognito) • API GraphQL (AWS AppSync + Amazon DynamoDB) • API de recherche full-text (Amazon ElasticSearch) • Déploiement et hébergement (Amazon S3, Amazon CloudFront) https://github.com/sebsto/amplify-react-workshop
63. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Mot d’ordre
64. Merci ! S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Sébastien Stormacq Technical Evangelist, AWS EMEA @sebsto Aurélien Capdecomme CTO, 20 Minutes @menthefraiche
65. S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.