ArmadaJS - how to build a full-stack airline ticketing web app
0 likes441 views
The document presents a comprehensive guide on building a full-stack serverless airline booking application using AWS services. It covers various components such as the tech stack, data modeling, API integration, and payment processing, along with operations for CI/CD and monitoring. It emphasizes modular architecture and includes resources for further learning.
ArmadaJS - how to build a full-stack airline ticketing web app
- 1. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. How to build a full stack serverless airline booking application Heitor Lessa Principal Specialist Solutions Architect SEPT19TH @heitor_lessa lessa@amazon.co.uk
- 2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. armadajs SEPT 19th @heitor_lessa
- 3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What we’re not going to cover
- 4. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 5. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 6. © 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
- 7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 8. © 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
- 9. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 10. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Ideation & exploration Mood BoardInspiration Colour
- 11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Ideation & exploration Design System Sketch Material Design Plugin
- 12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initial sketches
- 13. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 14. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initial tech stack API
- 15. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initial prototype
- 16. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 17. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Data modelling & assumptions flight data booking data loyalty data
- 18. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 19. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 20. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Remembering things (state) Vuex to the rescue
- 21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Client Amazon S3 Website Quasar Vue.js Front-end Amazon CloudFront API Vuex Modules Catalog STATE GETTERS MUTATIONS ACTIONS Booking STATE GETTERS MUTATIONS ACTIONS Loyalty STATE GETTERS MUTATIONS ACTIONS Profile STATE GETTERS MUTATIONS ACTIONS Remembering things (state) APIAPIAPI
- 22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 23. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Authentication OpenID provider
- 24. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Authentication Auth HOC
- 25. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Tech stack - updated API
- 26. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 27. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. API – GraphQL Types Flight type Booking type Loyalty type
- 28. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. API – GraphQL Transformer GraphQL Transformers
- 29. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. API – GraphQL Transformer GraphQL Transformers
- 30. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. API – GraphQL Transformer GraphQL Transformers
- 31. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. API – GraphQL Server AWS AppSync Amazon DynamoDB Resolver CRUD, put simply Compute Data source
- 32. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 33. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Payment integration front-end Elements via iframe
- 34. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Payment integration front-end JS card tokenization
- 35. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Payment integration – back-end Amazon API Gateway AWS Lambda API JS create charge
- 36. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Tech stack - updated API
- 37. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 38. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Operations – CI/CD Console CI/CD for full stack Serverless apps and more
- 39. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Operations – Tracing Distributed tracing AWS X-Ray
- 40. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Operations – Structured logging Structured logging logging
- 41. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 42. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Catalog – Fetching flights AWS AppSync API Vuex Modules Catalog fetchFlight Amazon DynamoDB VTL Catalog Resolver
- 43. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Payment – Charges and refunds API Amazon API Gateway AWS Lambda
- 44. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Booking – Processing new bookings AWS AppSync API Vuex Modules Booking processBooking Process Booking State Machine AWS Step Functions
- 45. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Booking – State Machine Process Booking State Machine AWS Step Functions
- 46. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Airline Web App – Front-end: Booking AWS AppSync API Vuex Modules Booking listBookings Booking Amazon DynamoDB Resolver Amazon DynamoDB VTL Catalog Resolver VTL
- 47. © 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 Amazon API Gateway Resolver
- 48. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Airline Web App – Front-end: Loyalty AWS AppSync API Vuex Modules Loyalty fetchLoyalty Resolver Amazon DynamoDB Amazon SNS AWS Lambda Booking Calculate Loyalty points AWS Lambda Loyalty Amazon DynamoDB Amazon API Gateway BOOKING CONFIRMED
- 49. © 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 Step Functions Booking Quasar Vue.js Front-end Payment SYNC API Amazon API Gateway AWS Lambda Amazon DynamoDB VTL Catalog AWS Lambda Loyalty Amazon DynamoDB Amazon API Gateway AWS LambdaAutomation & Monitoring Amazon CloudWatch AWS CloudFormation AWS X-RayAWS CDKAWS Amplify
- 50. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 51. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 52. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What I didn’t tell you - CSS
- 53. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What I didn’t tell you - CSS
- 54. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What I didn’t tell you - CSS
- 55. © 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
- 56. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. What I didn’t tell you - Repository aws-samples aws-serverless-airline-booking
- 57. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Takeaway Code is liability Focus on business Modularize Amplify Serverless
- 58. Thank you! © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Heitor Lessa Principal Specialist Solutions Architect @heitor_lessa
- 59. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
- 60. © 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)