하이브리드 모바일 어플리케이션 개발을 위한 새로운 도구, AWS Amplify Javascript와 그를 통한 웹 및 하이브리드 모바일 애플리케이션 개발의 인기는 날로 높아지고 있습니다. AWS는 이러한 개발자들을 돕고자, AWS의 서비스에 익숙하지 않은 Javascript 개발자들도 손쉽게 '클라우드 연결' 애플리케이션 개발할 수 있도록 해주는 오픈 소스 라이브러리, AWS Amplify를 제공합니다. 본 세션에서는 React/React Native 등 인기있는 자바스크립트 프레임워크 기반 프로젝트에서 Amplify, MobileHub, CloudFormation을 활용하여 AWS 서비스를 손쉽게 프로비저닝하고 활용하는 방법을 데모와 함께 설명합니다.

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 해시 태그로 의견을 남겨주세요!