Building a Complete Web App in 2 hours with AWS Amplify

AWS User Group Colombo : December Meetup - Slide Deck

The following topics are covered in this slide deck,
1. Authentication and Authorization
2. GraphQL API, AppSync
3. DynamoDB as the Database
4. ElasticSearch for Read-Queries
5. Continuous Delivery
6. UI Tests with Cypress

Speakers:
Uthpala Pitawela
Mahesh Samarasinghe
Andrew Joeshanth
Keshav Kumaresan
Omal Vindula
Tharaka Hewavitharana

Transcript

1. BUILDING A COMPLETE WEB APP WITH AWS AMPLIFY
2. Github Repo for todays project 2 https://github.com/99xt/awsugcmb
3. 1. AWS AMPLIFY 3
4. What is AWS Amplify? AWS Amplify is a development platform for building secure, scalable mobile and web applications. 4
5. Goal of Amplify To help people who work closer to UI front the stack Mobile or web developers take advantage of all the AWS services without having an in depth knowledge of AWS services and DevOps. 5
6. Advantages of AWS Amplify • An easier and faster way to build cloud-connected, full-stack mobile and web applications • Pay-for-what-you-use model • No need to manage infrastructure and hosting – leverage services like AWS Lambda and AppSync • Modern, UI-driven approach to build scalable apps • Better user engagement through AR/VR, 3D scenes and appealing text/voice interfaces • Faster due to in-built support for backend management and deployment • Native-like experiences at lower costs • Automated mobile apps test to rapidly release features and updates 6
7. Costing for Amplify • Pay as you go model • Free tier ➢ Build and deploy - 1000 build minutes per month ➢ Hosting - 15 GB served per month and 5 GB stored per month • Price for 2 features ▸ Build and deploy - the price per build minute is $0.01. ▸ Hosting - Price per GB served and price per GB stored 7
8. Setting up Amplify First install and configure Amplify CLI npm install -g @aws-amplify/cli amplify configure 8
9. Setting up Amplify Set up the project Set up backend services amplify init 9
10. 2. Authentication & Authorization with Amplify 10
11. Authentication & Authorization 11 ▸ Authentication ▹ Who you are ▸ Authorization ▹ What you can access
12. Setup authentication and authorization with Amplify Add amplify auth 12 Setup login component Configure routes with Auth guard Enjoy!
13. User pool & Identity pool 13 ▸ User Pool ▹ Identity Verification ▸ Identity Pool ▹ Access control
14. Tokens 14 ▸ ID Tokens ▹ Claims about the identity of the authenticated user such as name, email, and phone_number ▸ Refresh Tokens ▹ Information necessary to obtain a new ID or access token ▸ Access Tokens ▹ Grants access to authorized resources
15. 3. GraphQL 15
16. GraphQL 16 GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
17. 4. AppSync 17
18. AppSync 18 AWS AppSync enables developers to interact with their data by using a managed GraphQL service. • GraphQL Proxy • Operation • Action • Data Source • Resolver ◦ Unit resolver ◦ Pipeline resolver • Function
19. 5. GraphQL Transform 19
20. GraphQL Transform 20 The GraphQL Transform provides a simple to use abstraction that helps you quickly create backends for your web and mobile applications on AWS. Directives ➢ @model ➢ @key ➢ @auth ➢ @function ➢ @connection ➢ @versioned ➢ @searchable
21. 6. Elasticsearch 21
22. What is Elasticsearch? 22 Elasticsearch is a distributed, open source search and analytics engine for all types of data, including textual, numerical, geospatial, structured, and unstructured. The speed and scalability of Elasticsearch and its ability to index many types of content mean that it can be used for a number of use cases: • Application search • Website search • Enterprise search • Logging and log analytics • Infrastructure metrics and container monitoring • Application performance monitoring • Security / Business analytics
23. How does Elasticsearch work? 23 • An Elasticsearch index is a collection of documents that are related to each other. Elasticsearch stores data as JSON documents. • Elasticsearch uses a data structure called an inverted index, which is designed to allow very fast full-text searches. An inverted index lists every unique word that appears in any document and identifies all of the documents each word occurs in. • During the indexing process, Elasticsearch stores documents and builds an inverted index to make the document data searchable in near real-time.
24. Amazon ElasticSearch 24 Amazon Elasticsearch Service is a fully managed service that makes it easy for you to deploy, secure, and run Elasticsearch cost effectively at scale. You can build, monitor, and troubleshoot your applications using the tools you love, at the scale you need.
25. Elasticsearch using amplify 25 @searchable The @searchable directive handles streaming the data of an @model object type to Amazon Elasticsearch Service and configures search resolvers that search that information. https://aws-amplify.github.io/docs/cli-toolchain/graphql#searchable
26. 7. Cypress 26
27. What is Cypress? Its Cypress, NOT Cyprus (Not the country!) JavaScript End to End Testing Framework Test anything that runs on a browser! 27
28. Why Cypress? Easy to set-up Runs in the same run-loop as your application Controls the entire automation process 28
29. Cypress Features Time Travel Cypress takes snapshots as your tests run, allowing you to see what exactly happens at each stage of you tests. Automatic Waiting Cypress will automatically wait for commands, API calls and assertions to complete. No need to add timeouts or delays! Consistent Results Cypress doesn't use WebDriver or Selenium. Cypress runs in the same run-loop as your app which gives you fast, reliable and consistent test results. 29 Screenshots & Videos Cypress can record tests of your entire test process and take screenshots whenever a test fails.
30. Demo Time! 30
31. How to use Cypress? npm install cypress 31 Add “data-cy” attributes Write test scripts npx cypress run
32. 8. CI/CD WITH AWS AMPLIFY 32
34. 34 ▸ First select Git repository.
35. 35 ▸ Select a environment and a user role for building the backend.
36. What Happens in the underground 36 ▸ The amplify will automatically identify the the framework that has been used. ▸ It will generate the the amplify.yml with specific commands needed to build the application.
37. 37 ▸ The default amplify.yml configuration.
38. 38 Demo Time!
39. What Happens in the underground ▸ Spins up a Docker Container ▸ Pulls down the Code from GitHub ▸ Install the dependencies ▸ Compile the code ▸ Build the application (Frontend/backend) 39
40. Build progress view 40 ▸ Build flow. Success Fail
41. 41 THANKS! Any questions?