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

AWS Summit Stockholm - Amplify Studio

AWS Summit Stockholm - Amplify Studio

Muhammed Salih Güler

May 23, 2023
Tweet

More Decks by Muhammed Salih Güler

Other Decks in Programming

Transcript

  1. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. S T O C K H O L M | M A Y 1 1 , 2 0 2 3
  2. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Rapid prototyping your ideas with Amplify Studio Muhammed Salih Güler (he/him) F W M 2 0 1 Senior Developer Advocate AWS Olajide Enigbokan (he/him) Startup Solutions Architect AWS
  3. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Idea and Thought Process AWS Amplify Amplify Studio Creating the Data Layer Creating UI with Figma to Code Creating UI with Form Builder and Authenticator Agenda
  4. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Idea and Thought Process
  5. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Idea
  6. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Idea • How realistic is it?
  7. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Idea • How realistic is it? • Is there a similar idea?
  8. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Idea • How realistic is it? • Is there a similar idea? • If yes, what is the difference?
  9. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Idea • How realistic is it? • Is there a similar idea? • If yes, what is the difference? • How customers can benefit from it?
  10. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Idea • How realistic is it? • Is there a similar idea? • If yes, what is the difference? • How customers can benefit from it? • How to deliver it to the customers?
  11. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Delivering the Idea • Is it going to be an app?
  12. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Delivering the Idea • Is it going to be an app? • Is it going to be a mobile app?
  13. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Delivering the Idea • Is it going to be an app? • Is it going to be a mobile app? § Will it be a native or x-platform app?
  14. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Delivering the Idea • Is it going to be an app? • Is it going to be a mobile app? • Is it going to be a web app?
  15. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Delivering the Idea • Is it going to be an app? • Is it going to be a mobile app? • Is it going to be a web app? § Which framework is going to be used?
  16. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Delivering the Idea • Is it going to be an app? • Is it going to be a mobile app? • Is it going to be a web app? • Where to host the backend?
  17. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Delivering the Idea • Is it going to be an app? • Is it going to be a mobile app? • Is it going to be a web app? • Where to host the backend? § Do we have resources to create a backend?
  18. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Delivering the Idea • Is it going to be an app? • Is it going to be a mobile app? • Is it going to be a web app? • Where to host the backend? § Which framework is going to be used? 😃
  19. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Delivering the Idea • Is it going to be an app? • Is it going to be a mobile app? • Is it going to be a web app? • Where to host the backend? § Which framework is going to be used? 😶🌫
  20. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Developer Responsibilities Agility Time to market Rapid innovation No one-way doors Great experience Multidevice Modern look/feel Differentiated features Production-ready Low latency Secure Reliable and scalable Technical needs Fullstack development Features that use device + cloud Integrated development Less boilerplate Best practices built in Web Native-like experience Support for hybrid client/server rendering (e.g., Next.js) Cross-platform One codebase Support for Flutter, React Native, Apple cross-platform
  21. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify
  22. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. We built Amplify to make it easy for frontend developers to build full-stack apps
  23. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. AWS Amplify Build AWS backend Amplify Studio Amplify CLI Build app UI (web) Amplify Studio Host an app (web) Amplify Hosting FULLSTACK DEVELOPMENT WEB Connect to backend Amplify Libraries UI Components CROSS-PLATFORM & MOBILE
  24. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio
  25. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify Studio is a visual development environment for building fullstack web and mobile apps.
  26. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio’s Top Capabilities 1. Creating and Observing Data Visually 2. Figma to Code 3. Form builder
  27. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Idea - Rethought
  28. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Idea (Creating a Personal Website) 1. With personal information 2. With upcoming events 3. With current location 4. With latest news and content
  29. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Idea: State 1. Want a website 2. Want a popular framework (Next.js) 3. But don’t know much of web development
  30. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Creating the Project
  31. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Building – Creating the Next.js project
  32. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Building – Project Details
  33. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Setting up Amplify CLI
  34. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify CLI – Pre-requisities 1. AWS Account 2. CLI Tool Installation
  35. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify CLI – Installation - cURL
  36. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify CLI – Installation - npm
  37. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify CLI – Installation - Configuration
  38. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Let us take a step back....
  39. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Create Data Visually
  40. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Sandbox
  41. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Designing Data
  42. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Designing Data
  43. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Designing Data
  44. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Designing Data
  45. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Designing Data
  46. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Designing Data
  47. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Designing Data
  48. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Designing Data
  49. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Designing Data
  50. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Designing Data
  51. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Designing Data
  52. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Designing Data
  53. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  54. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  55. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  56. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  57. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  58. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  59. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  60. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  61. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  62. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  63. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  64. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  65. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  66. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  67. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding Amplify to Project
  68. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Figma to Code
  69. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Figma File
  70. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Figma Components
  71. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Syncing with Figma
  72. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Syncing with Figma
  73. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Syncing with Figma
  74. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Syncing with Figma
  75. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Binding Data to UI
  76. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Binding Data to UI
  77. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Binding Data to UI
  78. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Binding Data to UI
  79. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Binding Data to UI
  80. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Binding Data to UI
  81. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Binding Data to UI
  82. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Binding Data to UI
  83. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Using Components
  84. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Using Components
  85. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Using Components
  86. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Using Components
  87. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Using Components
  88. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Let us take a step back....
  89. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Content Management System
  90. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – CMS
  91. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – CMS
  92. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – CMS
  93. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – CMS
  94. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Form Builder
  95. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Creating Admin Website
  96. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Pulling the Backend
  97. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Checking Forms
  98. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Using Forms
  99. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Using Forms
  100. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Using Components
  101. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Using Forms
  102. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Using Forms
  103. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Using Forms
  104. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify UI Libraries – Authenticator
  105. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify UI Libraries
  106. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify UI Libraries – Connected Components
  107. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify UI Libraries – Connected Components
  108. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Updating the Code
  109. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Running Admin Website
  110. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Running Admin Website
  111. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Running Admin Website
  112. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Visualizing the Results
  113. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding other Forms
  114. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding other Forms
  115. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Amplify Studio – Adding other Forms
  116. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Does it Scale?
  117. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Does it Scale? – Amplify UI Libraries
  118. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Extend Functionality with Code
  119. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Extend the Code – Adding Fonts
  120. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Extend the Code – Positioning Items
  121. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Theming the app
  122. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Theming the App – Figma Plugin
  123. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Theming the App – Figma Plugin
  124. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Theming the App – Figma Plugin
  125. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Theming the App – Figma Plugin
  126. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Does it Scale? – Amplify Libraries
  127. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Scale with AWS Amplify Feature categories Full-stack developer experience across 12+ feature categories
  128. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Scale with AWS Amplify Frontend developer experience Extensibility Backend-as-a-service offerings Self-managed backend infrastructure AWS Amplify
  129. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Scale with AWS Amplify Modify Amplify-generated infrastructure Add any AWS resources using CDK or CloudFormation Export Amplify backends as CDK amplify override ... amplify add custom amplify export
  130. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Scale with AWS Amplify Modify Amplify- generated infrastructure Add any AWS resources using CDK or CloudFormation Export Amplify backends as CDK amplify override ... amplify add custom amplify export
  131. © 2023, Amazon Web Services, Inc. or its affiliates. ”

    “ “ Flare Safety Grows 860% in 1 Year with App Built Using AWS Amplify Flare Safety needed a simple tool to help build a high-quality minimum viable product (MVP) in a timely and cost-effective way and to enable the startup to grow at a rapid pace. Using AWS Amplify, Flare Safety was able to create an MVP quickly and cost-effectively in just 3 months and then adjust to exponential growth while maintaining reliability and performance. Saved over $150,000 using AWS instead of a software house Onboarded new developers quickly and simply Scaled with ease to meet user base growth of 860% in less than 1 year Solution Challenge Benefits There aren’t many solutions for startups that offer everything you need. AWS Amplify helped us build our MVP and has grown with us. —Kirk Ryan, chief technology officer and cofounder, Flare Safety Company: Flare Safety Industry: Software & Internet Country: United Kingdom Website: https://www.busby.io/ About Flare Safety Flare Safety is an outdoor activities safety app covering cycling, scootering, running, walking, and more. The app detects user incidents and sends out automatic alerts in cases of emergency.
  132. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Summary - Amplify Studio - Prototyping with Figma - Designing Data Visually - Figma to Code - Form Builder - Created a Personal Website and Admin Panel for it
  133. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Go Build! Amplify Studio Documentation Amplify Core Workshop (for Web) AWS Amplify Learn Front-End Web & Mobile Blog
  134. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Your time is now Build in-demand cloud skills your way skillbuilder.aws
  135. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Thank you! © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Please complete the session survey in the mobile app Muhammed Salih Güler @salihgueler linkedin.com/in/salihgueler Olajide Enigbokan linkedin.com/in/enigbokan-olajide-b7688532/
  136. © 2023, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Download the AWS Events mobile app P L E A S E C O M P L E T E T H E S E S S I O N S U R V E Y iOS Mobile App Android Mobile App