AWS Summit Stockholm - Amplify Studio

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: Mockup
30. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Idea: Design
31. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Idea: Data
32. © 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
33. © 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
34. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Building – Creating the Next.js project
35. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Building – Project Details
36. © 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
37. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify CLI – Pre-requisities 1. AWS Account 2. CLI Tool Installation
38. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify CLI – Installation - cURL
39. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify CLI – Installation - npm
40. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify CLI – Installation - Configuration
41. © 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....
42. © 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
43. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Sandbox
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 – Designing Data
54. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Designing Data
55. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Designing Data
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. Amplify Studio – Adding Amplify to Project
69. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Adding Amplify to Project
70. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Adding Amplify to Project
71. © 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
72. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Figma File
73. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Figma Components
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 – Syncing with Figma
76. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Syncing with Figma
77. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Syncing with Figma
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 – Binding Data to UI
84. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Binding Data to UI
85. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Binding Data to UI
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. Amplify Studio – Using Components
89. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Using Components
90. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Using Components
91. © 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....
92. © 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
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. Amplify Studio – CMS
95. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – CMS
96. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – CMS
97. © 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
98. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Creating Admin Website
99. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Pulling the Backend
100. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Checking Forms
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 Components
104. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Using Forms
105. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Using Forms
106. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Using Forms
107. © 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
108. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify UI Libraries
109. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify UI Libraries – Connected Components
110. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify UI Libraries – Connected Components
111. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Updating the Code
112. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Running Admin Website
113. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Running Admin Website
114. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Running Admin Website
115. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Visualizing the Results
116. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Adding other Forms
117. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Adding other Forms
118. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Studio – Adding other Forms
119. © 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?
120. © 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
121. © 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
122. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Extend the Code – Adding Fonts
123. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Extend the Code – Positioning Items
124. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Extend the Code
125. © 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
126. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Theming the App – Figma Plugin
127. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Theming the App – Figma Plugin
128. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Theming the App – Figma Plugin
129. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Theming the App – Figma Plugin
130. © 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
131. © 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
132. © 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
133. © 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
134. © 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
135. © 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.
136. © 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
137. © 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
138. © 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
139. © 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/
140. © 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