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.

Dev Days Nordics - How to build a Full-Stack Airline Ticketing Web App.pdf

190 visualizaciones

Publicado el

As serverless computing grows in popularity, finding how to start can be a challenge. In this talk, we picked a sample “airline ticketing" web app to demonstrate the process of building a full stack serverless application. We’ll share tips and tricks for building your idea, creating a prototype and deploying quickly and safely in production. You’ll also learn how Vue.js applications can integrate with AWS AppSync (for GraphQL backends), Amazon API Gateway (for REST APIs), AWS Lambda functions, Amazon DynamoDB tables, Amazon Cognito (for user management), using AWS Amplify to seamlessly provision and manage your cloud backend.

  • Sé el primero en comentar

Dev Days Nordics - How to build a Full-Stack Airline Ticketing Web App.pdf

  1. 1. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. How to build a full stack serverless airline booking application Heitor Lessa Specialist Solutions Architect B A R 5 S T O C K H O L M MARCH28TH @heitor_lessa lessa@amazon.co.uk
  2. 2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What we’re not going to cover
  3. 3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Just before we really start… Build on Serverless Season 2 starts on April 24th aws.amazon.com/twitch
  4. 4. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  5. 5. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Full-Stack Developer Full-Stack Builder Full-Stack Builder Builder Generate yours at dev.to/rly
  6. 6. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  7. 7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initial ideation & exploration Mood BoardInspiration Colour
  8. 8. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initial sketches
  9. 9. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initial prototype
  10. 10. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  11. 11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initial Tech Stack API
  12. 12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initial Tech Stack API
  13. 13. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initial Tech Stack API
  14. 14. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initial Tech Stack API
  15. 15. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  16. 16. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS operational responsibility models On-Premises Cloud Less More Compute Virtual Machine Amazon EC2 AWS Elastic Beanstalk AWS LambdaFargate Databases MySQL MySQL on EC2 Amazon RDS MySQL Amazon Aurora Amazon Aurora Serverless Amazon DynamoDB Storage Storage Amazon S3 Messaging ESBs Amazon MQ Amazon Kinesis Amazon SNS / SQS Analytics Hadoop Hadoop on EC2 Amazon EMR Amazon Elasticsearch Service Amazon Athena
  17. 17. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS AppSync – Data-driven APIs Schema Data Sources Resolvers
  18. 18. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS AppSync – Data-driven APIs GraphQL Schema Data Sources Resolvers
  19. 19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS AppSync – Data-driven APIs GraphQL Schema Data Sources Resolvers AWS Lambda Amazon Elasticsearch Service HTTP Endpoint
  20. 20. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS AppSync – Data-driven APIs GraphQL Schema Data Sources Resolvers AWS Lambda Amazon Elasticsearch Service HTTP Endpoint AWS IAM OpenID Connect
  21. 21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify – Toolchain CLI
  22. 22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify – Toolchain GraphQL Transformers
  23. 23. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify – Toolchain Console CI/CD for Front-end/Back-end and more
  24. 24. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Quiz What’s the number of airports available worldwide?
  25. 25. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Airline Web App – Front-end modularization Client Amazon S3 Website Quasar Vue.js Front-end Amazon CloudFront AWS AppSync API Vuex Modules Catalog STATE GETTERS MUTATIONS ACTIONS Booking STATE GETTERS MUTATIONS ACTIONS Loyalty STATE GETTERS MUTATIONS ACTIONS Profile STATE GETTERS MUTATIONS ACTIONS
  26. 26. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Airline Web App – Front-end: Catalog AWS AppSync API Vuex Modules Catalog fetchFlight Amazon DynamoDB VTL Catalog Resolver
  27. 27. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Airline Web App – Front-end: Catalog AWS AppSync API Vuex Modules Catalog fetchFlight Amazon DynamoDB VTL Catalog Resolver
  28. 28. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Airline Web App – Front-end: Booking AWS AppSync API Vuex Modules Booking createBooking AWS Lambda Booking Amazon DynamoDB AWS LambdaAmazon API Gateway API Payment Pipeline resolver 12
  29. 29. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Airline Web App – Front-end: Booking AWS AppSync API Vuex Modules Booking fetchBooking AWS Lambda Booking Amazon DynamoDB Resolver Amazon DynamoDB VTL Catalog Resolver
  30. 30. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Airline Web App – Front-end: Loyalty AWS AppSync API Vuex Modules Loyalty fetchLoyalty AWS Lambda Loyalty Amazon DynamoDB Resolver
  31. 31. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Airline Web App – Front-end: Loyalty AWS AppSync API Vuex Modules Loyalty fetchLoyalty AWS Lambda Loyalty Amazon DynamoDB Resolver Amazon DynamoDB Amazon SNS AWS Lambda Booking ASYNC Loyalty points upon Booking
  32. 32. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Airline Web App – High-level architecture Client Amazon S3 Website Amazon CloudFront AWS AppSync API Resolver Amazon DynamoDB Amazon SNS AWS Lambda Booking Quasar Vue.js Front-end Payment SYNC API Amazon API Gateway AWS Lambda ASYNC Amazon DynamoDB VTL Catalog Amazon DynamoDB VTL Preferences AWS Lambda Loyalty Amazon DynamoDB
  33. 33. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  34. 34. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What I didn’t tell you - CSS
  35. 35. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What I didn’t tell you - CSS
  36. 36. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What I didn’t tell you - CSS
  37. 37. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What I didn’t tell you - Testing Picture from: hackernoon.com/trust-your-pipeline-automatically-testing-an-end-to-end-java-application-4a33232180c3
  38. 38. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What I didn’t tell you – my own AWS learnings
  39. 39. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What I didn’t tell you – my own AWS learnings
  40. 40. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What I didn’t tell you – my own AWS learnings Multi-Auth Feature velocity Customization Deployment Pipeline resolver Custom resolvers Many:Many MOB401
  41. 41. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  42. 42. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What I didn’t tell you - Twitch Build on Serverless Season 2 starts on April 24th aws.amazon.com/twitch
  43. 43. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Takeaway Code is liability Focus on business Modularize Amplify Serverless
  44. 44. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
  45. 45. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Resources Ten Tips And Tricks for Improving Your GraphQL API with AWS AppSync (MOB401) Authentication & Authorization in GraphQL with AWS AppSync (MOB402) The Future of Enterprise Applications is Serverless (ENT314-R1) Serverless Architectural Patterns and Best Practices (ARC305-R2)
  46. 46. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Reviewing and Planning Serverless Architectures Design Principles Scenarios Well-Architected Pillars Serverless Applications Lens bit.ly/serverless_lens
  47. 47. Thank you! © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Heitor Lessa Specialist Solutions Architect @heitor_lessa

×