Progetta, crea e gestisci Modern Application per web e mobile su AWS

2. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Modern Web & Mobile Applications • Traditional client-server web architectures led to poor experiences Every button click generates a re-render of the page • Modern Web Applications are created as Single Page Applications (SPA) Package all application’s components into static files • Native app-like experience Frontend served as HTML and JS files , invoke backend asynchronously • Functionality spread across multiple places and resources Static frontend and assets, backend business logic, database, authentication services

3. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T End-user requirements Performant and Responsive UX Fast Data access Offline Data accessData Security Personalization

6. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Approach to designing, building and managing applications. Increase agility of teams and reliability, security, scalability of applications

7. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Best practices for modern application development • Enable experimentation by creating a culture of ownership • Componentize applications using microservices • Update applications and infrastructure quickly by automating the release pipeline • Model and provision application resources using infrastructure as code • Simplify infrastructure management with serverless technologies • Improve application performance by increasing observability • Secure the entire application lifecycle by automating security

8. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T What Developers Ask ? Tools for building, testing, deploying, and hosting the entire app – frontend and backend Secure and scalable apps Offline data, network-optimized sync, and real-time updates Centralized config, cloud provisioning, and team workflow Code generation to eliminate boilerplate Frontend support for multiple platforms and frameworks

9. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T An Integrated Developer Experience Developer Tools Amplify Framework, an open source client framework, includes libraries, Cloud Services

11. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amplify Framework: Library, UI Components, & CLI Libraries focused on frontend developers Support for native apps with iOS and Android SDKs Support for JavaScript incl. React, React Native, Angular, Ionic, and Vue Category-based opinionated implementations: Auth, Analytics, API, Storage, Interactions, XR, PubSub ‘Escape’ hatches for all AWS services UI components for React, React Native, Angular, and Ionic Support for drop-in auth, photo pickers, and chatbots CLI toolchain for rapidly integrating AWS services to projects Iterative code & type generation for GraphQL APIs throughout the development cycle

12. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amplify Framework: UI Components <amplify-photo-picker framework="Ionic” (picked)="onImagePicked($event)" (loaded)="onImageLoaded($event)"> </amplify-photo-picker> <amplify-s3-album framework="Ionic" path="pics”(selected)="onAlbumImageSelected($event)"> </amplify-s3-album> onAlbumImageSelected( event ) { window.open( event, '_blank' ); } Photo Picker S3 Album

13. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amplify Framework: CLI $ amplify init $ amplify add <category> $ amplify push Effortlessly configure backends $ amplify add hosting $ amplify publish Hosting for static assets and websites $ amplify codegen add $ amplify codegen generate Easily create APIs & client code Category support for authentication, analytics, functions, REST/GraphQL APIs, storage, notifications, interactions Distribute content to end users with low latency and high data transfer speeds via a secure, durable, and scalable object storage infrastructure Define your API using the GraphQL Schema Definition Language (SDL). The toolchain will expand and transform a full CloudFormation template that implements your data model.

14. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify CLI: Multi-environments and team workflow - Git-style interaction & project switching - Share backends between team members or clone for isolated development User Users

16. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Breadth of Cloud Services for Mobile and Web Apps Auth Analytics Core Experiences Storage Interactions AR & VR PubSub API

17. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Managed Serverless GraphQL service Connect to data sources in your account Add data sync, real-time and offline capabilities GraphQL façade for any AWS service Conflict detection and resolution in the cloud Enterprise security features (IAM, Cognito, API keys) AWS AppSync: Realtime and offline data with GraphQL

18. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Why GraphQL with AppSync? Data Aggregation Bandwidth Optimization Rapid Prototyping Easily evolve APIs Client-defined Data Selection

21. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amplify CLI and AppSync : $amplify add api type Post @model @auth( rules: [ {allow: owner, ownerField: "owner", mutations: [create, update, delete], queries: [get, list]}, ]) { id: ID! title: String! content: String! rating: Int owner: String } appSyncClient?.fetch(query: ListPostsQuery()) { (result, error) in if error != nil { print(error?.localizedDescription ?? "") return } result?.data?.listTodos?.items!.forEach { print(($0?.title)! + " " + ($0?.content)!) } } Step 1 - Edit & push schema Step 2 – Write app code GraphQL backend and client types auto-generated

22. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amazon Cognito: Secure user directory that scales Managed user directory Sign in with existing identities (federation) Customizable, hosted UI, or SDK AWS credentials and access control OpenID Connect and OAuth 2.0-based

23. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amplify CLI and Amazon Cognito : $amplify add auth • Customize sign-in/registration flow • Customize email and SMS messages for Multi-Factor Authentication • Customize attributes for your users, e.g. name, email • Enable 3rd party authentication providers, e.g. Facebook, Twitter, Google and Amazon

24. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Amplify CLI and Amazon Cognito : $amplify add auth import { Auth } from 'aws-amplify’; Auth.signUp({ username, password, attributes: { email, // optional phone_number, // optional }, validationData: [] //optional }) .then(data => console.log(data)) .catch(err => console.log(err)); Auth.confirmSignUp(username, code, { forceAliasCreation: true }).then(data => console.log(data)) .catch(err => console.log(err)); Auth.resendSignUp(username).then(() => { console.log('code resent successfully'); }).catch(e => { console.log(e); }); Step 1 – Create a new user Step 2 – Confirm with code

26. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T AWS Amplify Console Globally available Your app is served via AWS’s reliable content delivery network with 144 points of presence globally. Easy custom domain setup Set up custom domains managed in Amazon Route 53 with a single click plus get a free HTTPS certificate. Simplified Continuous Workflow Connect your repository to 'git push' changes to your frontend and backend in a single workflow. Feature Branch Deployments Work on new features without impacting production. Create branch deployments linked to each feature branch. Atomic Deployments All deployments either rollout successfully or fail without requiring maintenance windows. Password Protection Share yet-to-be released features with internal stakeholders by setting a username and password

28. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Summary • Developing Mobile and Web Apps on AWS An Integrated Developer Experience • Amplify Framework An open source client framework, libraries, CLI, and UI components • Cloud Services Integrated via CLI toolchain with services such as AppSync, Cognito • Developer Tools Amplify Console for CI/CD and atomic deployments of your apps

29. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.S U M M I T Thank you! S U M M I T © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. Stefano Sandrini Solutions Architect @AWS

Progetta, crea e gestisci Modern Application per web e mobile su AWS

Esté a ler uma amostra.

Confira estes a seguir

Progetta, crea e gestisci Modern Application per web e mobile su AWS

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Progetta, crea e gestisci Modern Application per web e mobile su AWS (20)

Mais de Amazon Web Services (20)