Fluttercon 2023 - Flutter Talk

Transcript

1. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Building feature rich Flutter applications with AWS Amplify Muhammed Salih Güler (he/him) Senior Developer Advocate AWS F L U T T E R C O N 2 0 2 3
2. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. I am Salih Working for AWS focused on AWS Amplify Based in Berlin Flutter and Dart GDE Have been doing Flutter apps since 2017 2
3. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 3 What is Flutter?
4. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 4 Just kidding :D
5. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Agenda Ideas and Problems AWS Amplify AWS Amplify Flutter Libraries Seeing AWS Amplify with Flutter in Action 5
6. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 6
7. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 7
8. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 8
9. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 9 AWS Amplify
10. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 10 We built Amplify to make it easy for frontend developers to build full-stack apps
11. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 11 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
12. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 12 Supported Platforms This Photo by Unknown Author is licensed under CC BY-SA This Photo by Unknown Author is licensed under CC BY-SA This Photo by Unknown Author is licensed under CC BY-SA This Photo by Unknown Author is licensed under CC BY-SA This Photo by Unknown Author is licensed under CC BY-SA This Photo by Unknown Author is licensed under CC BY- NC-ND
13. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 13 Amplify Flutter
14. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 14
15. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Flutter Libraries 15 • Support all Flutter platforms • Written with Dart • Extend the capabilities of the previous libraries
16. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Flutter Libraries 16 • Authentication • GraphQL API • Rest API • Storage • Push Notifications • Analytics • Authenticator (UI)
17. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 17 Using AWS Amplify
18. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 18 The Amplify Command Line Interface (CLI) is a unified toolchain to create, integrate, and manage the AWS cloud services for your app.
19. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 19
20. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 20 The Project Overview
21. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 21
22. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 22
23. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initializing Project 23
24. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initializing Amplify Project 24 <project name> <project name>
25. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initializing Amplify Project 25
26. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initializing Amplify Project 26
27. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Initializing Amplify Project 27
28. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 28
29. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adding Authentication Library 29
30. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adding Authentication Library 30
31. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adding Authentication Library 31 <Cognito User Pool Name>
32. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 32
33. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adding Storage Library 33
34. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adding Storage Library 34
35. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adding Storage Library 35
36. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adding Storage Library 36
37. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adding Storage Library 37
38. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 38
39. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adding GraphQL API Library 39
40. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adding GraphQL API Library 40
41. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adding GraphQL API Library 41
42. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Adding GraphQL API Library 42
43. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Updating GraphQL Schema 43
44. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Generating Models from GraphQL Schema 44
45. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 45
46. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Pushing changes to cloud 46
47. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 47
48. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Libraries 48
49. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify Libraries Configuration 49
50. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Query Data 50
51. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Query Data 51
52. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Update/Create Data 52
53. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Uploading file to Storage 53
54. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Uploading file to Storage 54
55. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Signing Up User 55
56. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Signing Up User 56
57. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Signing in User 57
58. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Signing in User 58
59. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Getting User Information 59
60. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 60 Summing up • AWS Amplify • Amplify CLI usage • Amplify Flutter Library capabilities • Creating and using AWS Amplify libraries with Flutter
61. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. 61
62. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Resources 62 AWS Amplify Documentation Getting Started – Hands on Amplify Grocery List - Repository Salih Güler – YouTube Channel Mo Malaka – YouTube Channel Frontend Web and Mobile - Blog
63. FLUTTERCON 2023 | BUILDING FEATURE RICH FLUTTER APPLICATIONS WITH AWS AMPLIFY © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved. Thank you! Muhammed Salih Güler @salihgueler msalihg@amazon.de