Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a Complete Web App in 2 hours with AWS...

Building a Complete Web App in 2 hours with AWS Amplify

AWS Amplify is the fastest and easiest way to build web and mobile applications on AWS.

In this workshop, we will build a complete web application with,
1. Authentication and Authorization
2. GraphQL API
3. DynamoDB as the Database
4. ElasticSearch for Read-Queries
4. Continuous Delivery
5. UI Tests with Cypress

Tharaka Romesh

December 17, 2019
Tweet

Other Decks in Programming

Transcript

  1. What is AWS Amplify? AWS Amplify is a development platform

    for building secure, scalable mobile and web applications. 4
  2. 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
  3. 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
  4. 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
  5. Setting up Amplify First install and configure Amplify CLI npm

    install -g @aws-amplify/cli amplify configure 8
  6. Setup authentication and authorization with Amplify Add amplify auth 12

    Setup login component Configure routes with Auth guard Enjoy!
  7. User pool & Identity pool 13 ▸ User Pool ▹

    Identity Verification ▸ Identity Pool ▹ Access control
  8. 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
  9. 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.
  10. 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
  11. 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
  12. 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
  13. 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.
  14. 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.
  15. 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
  16. What is Cypress? Its Cypress, NOT Cyprus (Not the country!)

    JavaScript End to End Testing Framework Test anything that runs on a browser! 27
  17. Why Cypress? Easy to set-up Runs in the same run-loop

    as your application Controls the entire automation process 28
  18. 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.
  19. How to use Cypress? npm install cypress 31 Add “data-cy”

    attributes Write test scripts npx cypress run
  20. 33

  21. 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.
  22. 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