하이브리드 모바일 어플리케이션 개발을 위한 새로운 도구, AWS Amplify (강정희, AWS 솔루션즈 아키텍트) :: AWS DevDay2018
1 like2,302 views
하이브리드 모바일 어플리케이션 개발을 위한 새로운 도구, AWS Amplify Javascript와 그를 통한 웹 및 하이브리드 모바일 애플리케이션 개발의 인기는 날로 높아지고 있습니다. AWS는 이러한 개발자들을 돕고자, AWS의 서비스에 익숙하지 않은 Javascript 개발자들도 손쉽게 '클라우드 연결' 애플리케이션 개발할 수 있도록 해주는 오픈 소스 라이브러리, AWS Amplify를 제공합니다. 본 세션에서는 React/React Native 등 인기있는 자바스크립트 프레임워크 기반 프로젝트에서 Amplify, MobileHub, CloudFormation을 활용하여 AWS 서비스를 손쉽게 프로비저닝하고 활용하는 방법을 데모와 함께 설명합니다.
하이브리드 모바일 어플리케이션 개발을 위한 새로운 도구, AWS Amplify (강정희, AWS 솔루션즈 아키텍트) :: AWS DevDay2018
- 1. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 하이브리드 모바일 어플리케이션 개발을 위한 새로운 도구, AWS Amplify 강정희 솔루션즈 아키텍트 AWS
- 2. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 모바일 산업 트렌드 지속적으로 증가하는 App을 이용하는 시간 1.6조 시간 Source: AppAnnie 웹 기술을 이용하여 제작된 신규 엔터프라이즈 App 수 50%+ Source: AWS JavaScript 가장 대중적으로 사용되는 개발언어 66.7%▲ Source: Stack Overflow
- 3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 고품질의, 클라우드를 활용한 App 개발하기
- 4. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile Development Lifecycle AWS상 상 App상 상 상 상 Device Farm: 상 상 상 상 상 상 상 상 상 상 상 상 상 상 Android, iOS, Web App상 상 상 상 상 상 상 Pinpoint: App 상 상 상 상 상 상 상 상 상 상 Mobile SDK: SDK상 상 상 상 상 iOS, Android, Unity 상 상 상 상 상 상 상 App 상 상 상 상 Pinpoint, SNS & SES: Push, SMS, Email 상 상 상 상 상 상 상 상 측정
- 5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 간단한 3단계 과정 1. 플랫폼 선택 Mobile Hub 2. 클라우드 서비스 구성 Native SDKs 3. App에 연결 Mobile CLI AWS AmplifyCloudFormation Amplify CLI CLI 도구리소스 생성 클라이언트 라이브러리
- 6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS MOBILE CLI: 클라우드 서비스 구성 AWS Mobile Hub Console AWS Mobile CLI awsmobile init awsmobile user-signin enable awsmobile pull awsmobile push
- 7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS MOBILE CLI: 클라우드 서비스 구성 > awsmobile init > awsmobile user-signin enable app 상 상 상 상 상 상 상 상 상 상 상 (User Sign-in) 상 상 상 상 상 상 상 상 상 : • User-signin (Amazon Cognito) • analytics (Amazon Pinpoint) • database (Amazon DynamoDB) • user-files (Amazon S3) • cloud-api (API GW & AWS Lambda) Web app 상 상 상 상 : • hosting (Amazon S3, Amazon CloudFront)
- 8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify Library JavaScript Library - Declarative interfaces - Convention over configuration Categories for application programming with Cloud services - Auth, Analytics, Storage, API - Caching, i18n, logging, message bus React/React Native extensions - Higher-order components - Native bridging for mathematical operations (Amazon Cognito User Pools) - Open sourced – Apache 2.0 - Implemented with AWS services, open for external contribution
- 9. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify Library 인증, 인가, OIDC JWT, MFA 상 상 상 상 상 상 상 상 Amazon Pinpoint상 상 상 상 상 Amazon API Gateway상 상 상 RESTful API 상 상 상 상 상 API S3상 상 상 상 상 상 상 상 상 상 web app 상 상 React Native상 상 상 상 상 상 상 상 상 상 상 상 상 상 상 상 상 상 Amazon Pinpoint 상 상 상 상 상 상 상 상 상 상 상 상 상 상 상 상 Push 상 상
- 10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amplify 를 이용하여 App에 연결 React상 HOC(Higher-order component) 상 상 상 상 상 두줄상 상 상 상 로그인 UI와 기능상 상 상 상 상 상 상 상 상 .
- 11. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Update - Amplify new features • AWS Mobile CLI를 대체하는 Amplify CLI • Mobile Hub Project를 생성하지 않음 • CloudFormation 활용 • AppSync 이용을 돕는 GraphQL Transformer 내장 • 손쉽게 API 생성가능 • AWS Resource를 위한 UI Component 제공
- 12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. UI Components for AWS Resources Cognito상 상 상 로그인 UI S3상 상 상 상 상 Photo Picker Lex Chatbot UI
- 13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify를 활용한 하이브리드 개발 시작하기
- 14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify: Getting Started 예제 $ awsmobile start my-project react-native Amazon S3 Amazon Cognito Amazon API Gateway Amazon DynamoDBAmazon Lambda Amazon Mobile Hub
- 15. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Getting Started 구성 $ awsmobile start pet-tracker react-native $ cd pet-tracker $ npm run ios Starter app 상 상 $ npm install -g react-native-cli $ npm install -g create-react-native-app $ npm install -g awsmobile-cli 사전 설치
- 16. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Demo : getting started 예제 Pet Tracker
- 17. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
- 18. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify를 활용한 인증/인가
- 19. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile Hub – Amazon Cognito User Pools
- 20. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify: 인증(AuthN), 인가(AuthZ) 구성 $ awsmobile init $ awsmobile user-signin enable $ awsmobile push AWS Mobile CLI 상 상 상 상 상 상 상 $ awsmobile pull Mobile Hub Console에서 구성한 리소스 사용 시 AWS Amplify CLI 상 상 상AWS Mobile CLI 상 상 상 $ amplify init $ amplify add auth $ amplify push
- 21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Login – React Higher Order Component
- 22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Login – React Higher Order Component
- 23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 로그인(Sign In)
- 24. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 회원가입(Sign Up)
- 25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 로그아웃(Sign Out)
- 26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify를 활용한 API 활용
- 27. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile Hub: Cloud Logic
- 28. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify: 클라우드 API 구성 AWS Mobile CLI 상 상 상 상 상 상 상 $ awsmobile pull Mobile Hub Console에서 구성한 리소스 사용 시 AWS Amplify CLI 상 상 상AWS Mobile CLI 상 상 상 $ amplify init $ amplify add api $ amplify push $ awsmobile init $ awsmobile cloud-api enable $ awsmobile push
- 29. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. API 활용하기
- 30. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify를 활용한 분석
- 31. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify: Amazon Pinpoint Analytics
- 32. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify: Amazon Pinpoint Events
- 33. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Amplify: Amazon Pinpoint Analytics
- 34. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Demo : Amplify - React demo
- 35. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Demo : Architecture Amazon S3 Amazon Cognito Amazon API Gateway Amazon Lambda AWS CloudFormation Amazon Pinpoint Amazon S3 React AWS Amplify Library 상 상 상 상 상 상 상 상 상 REST API 상 상 상 상 상 AWS Amplify CLI 상 상 상 상 상 상 Web App Developer
- 36. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Demo : URL https://github.com/junghee-kang/amplify-react-handson Source Code (github) http://bit.ly/amplify-react Demo URL
- 37. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Mobile Development Lifecycle AWS상 상 App상 상 상 상 Device Farm: 상 상 상 상 상 상 상 상 상 상 상 상 상 상 Android, iOS, Web App상 상 상 상 상 상 상 Pinpoint: App 상 상 상 상 상 상 상 상 상 상 Mobile SDK: SDK상 상 상 상 상 iOS, Android, Unity 상 상 상 상 상 상 상 App 상 상 상 상 Pinpoint, SNS & SES: Push, SMS, Email 상 상 상 상 상 상 상 상 측정
- 38. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Q&A • 세션 후, 설문에 참여해 주시면 행사 후 소정의 선물을 드립니다. • #AWSDevDay 해시 태그로 의견을 남겨주세요!