AWS Amplify를 통한 손쉬운 모바일 애플리케이션 개발하기 - 김필중 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019

© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify를 통한 손쉬운
모바일 애플리케이션 개발하기
김필중
솔루션즈 아키텍트
Amazon Web Services

세션 목표
현대적 모바일 애플리케이션을
AWS가 제공하는 개발을 위한 서비스 및 도구를 활용하여
손 쉽게 개발, 빌드, 테스트, 배포

현대적 모바일 애플리케이션
• 기기와 플랫폼의 다양화
• 너무 많은 선택사항
• 급변하는 요구사항과 다양한 피드백

트렌드
앱 다운로드 예측:
지속적으로 증가
258억+45% by 2022
Source: AppAnnie
네이티브 및 웹앱에
투자할 것으로
기대되는
엔터프라이즈
80%+
Source: AWS
GraphQL
인기 증가
4배
Source: 2018.stateofjs.com
JavaScript
인기 증가
71.5%
Source: Stack Overflow

개발자들의 요구
프론트엔드, 백엔드
모두를 빌드, 테스트,
배포 및 호스팅하는
도구
안전하고
확장 가능한 앱
오프라인 데이터,
네트워크 최적화된
동기화, 실시간
업데이트
중앙화된 구성,
클라우드 프로비저닝,
팀 워크플로
똑같은 반복을 줄이기
위한 코드 생성
여러 플랫폼 및
프레임워크에 대한
프론트엔드 지원

AWS의 지원
신제품 및 다양한 기능 출시
AWS Amplify
AWS Amplify 출시
오픈 소스
JavaScript 라이브러리
AWS AppSync 출시
오프라인 및 실시간
데이터
Amplify에서 Ionic,
Angular, Vue 추가
지원
Amplify에 CLI 도구
체인 및 UI 구성 요소
추가
AWS AppSync에
코드없는, GraphQL
API 생성기, HTTP
데이터 소스, GraphQL
스칼라 유형 추가
iOS & Android SDKs –
인증을 위한 단순화된
프로그래밍 모델

OurStory
다들 사진 포스팅 한번씩은 해보셨죠?
이제 우리들만의 이야기를 추억으로
간직해보도록 하겠습니다!

OurStory: 요구사항
• 모바일 (iOS/안드로이드) 지원
• 인증
• 사진 포스팅
• 삭제 기능
• 좋아요 기능

OurStory: 디자인
• 어떤 뷰를 가지고 있지?
• 어떤 데이터가 필요하지?

OurStory: 디자인

OurStory: 디자인
o 싱글 뷰

OurStory: 디자인
o 싱글 뷰
o 카메라 버튼

OurStory: 디자인
o 싱글 뷰
o 카메라 버튼
o 풀 다운 새로고침

OurStory: 디자인
o 싱글 뷰
o 카메라 버튼
o 좋아요 버튼

OurStory: 디자인
o 싱글 뷰
o 카메라 버튼
o 좋아요 버튼
o 더보기 버튼으로 삭제

OurStory: 디자인

OurStory: 디자인
o 사용자 정보

OurStory: 디자인
o 사용자 정보
o 사진 정보

OurStory: 디자인
o 사용자 정보
o 사진 정보
o 좋아요 정보

단계적 개발 접근
1. 환경 설정
2. 인증 기능
3. 사진 목록 기능
4. 사진 포스팅 기능
5. 사진 삭제 기능
6. 좋아요 기능
이 모든걸 가능한 빠르게, 쉽게!!

빠르고 쉬운 개발을 위한 선택
• Node.js v8 (Lambda 호환)
• Amplify
• Expo
• React Native
• AppSync (GraphQL)

AWS Amplify: 빠른 개발과 지속적인 기능 향상
AWS를 사용하여 웹 및 모바일 앱을 위한 통합된
개발자 경험을 제공하는 프레임워크
• API, 인증, 저장소, 분석을 포함하는 다양한 기능을 제공
• React, Angular, Ionic, React Native, iOS, Android를
지원하는 First-class
• 모든 앱 개발자가 직면하는 문제의 솔루션을 제공
배포 및 협업을 지원하는 CLI
• 전체 애플리케이션 백엔드를 몇 번의 키 입력으로 배포
• 다중 사용자 팀 협업을 위한 다중 환경 지원

통합된 개발자 경험
개발자 도구
라이브러리, CLI 도구 체인, UI
컴포넌트가 포함된 오픈 소스 Amplify
프레임워크
클라우드 서비스

AWS Amplify
$amplify init
$amplify add auth
$amplify add storage
$amplify add api
$amplify add function
$amplify add analytics
$amplify push
Amplify 프로젝트 초기화
Amazon Cognito User Pool 추가
Amazon S3 버킷 생성 및 보안 설정
AWS AppSync API 추가
AWS Lambda 함수 추가
Amazon Pinpoint를 통한 분석
AWS CloudFormation을 통한 배포

AWS AppSync
GraphQL은 API를 위한 쿼리 언어
관리되는 GraphQL 게이트웨이
GraphQL 스키마 정의 언어(SDL)를 사용하여 API의 모양을 정의
다른 AWS 리소스를 참조하는 데이터 소스 첨부
데이터 소스에서 데이터를 가져와 필드에 첨부하는 해석기(Resolver) 작성
실시간 데이터 브로커
곧바로 모든 변형(Mutation)을 구독
WebSocket MQTT를 통한 안정적인 메시지 전달

API를 위한 쿼리 언어
데이터를 읽는 쿼리
데이터를 작성하는 변형
실시간으로 데이터를 푸시하는 구독
query GetPost {
getPost(id: ”1”) {
id
title
}
}
mutation CreatePost {
createPost(title: “AWS Summit Seoul”) {
id
title
}
}
subscription OnCreatePost {
onCreatePost {
id
title
}
}

AWS AppSync 데이터 소스

AWS AppSync 해석기

Amplify의 GraphQL 변환
확장 가능한 데이터 기반 애플리케이션을 신속하게 구축
GraphQL SDL을 사용하여 선언적으로 앱의 데이터 모델을 정의하고
완전한 설명형 AWS CloudFormation 스택으로 변환
GraphQL 지시어(directive)로 구동
- @model, @auth, @connection, @versioned, @searchable

Amplify와 AppSync의 사용 예
$ amplify add api
$ amplify push
type Post @model {
id: ID!
title: String!
}

Amplify와 AppSync를 통해 구성된 리소스들
AWS
Customer Account
Post Table
type Mutation {
createPost(...): Post
updatePost(...): Post
deletePost(...): Post
}
type Query {
getPost(...): Post
listPosts(...): Post
}
type Subscription {
onCreatePost(...): Post
onUpdatePost(...): Post
onDeletePost(...): Post
}
type Post {
id: ID!
title: String
createdAt: String
updatedAt: String
}
Schema Resolvers DataSources
AWS AppSync
createPost
updatePost
deletePost
getPost
listPosts
Mutation
Query
Post Table
DataSource
Post Table
ARN
IAM Role
ARN

OurStory: 아키텍처 AWS Cloud
AWS
Amplify
CLI
개발자
AWS AppSync
Amazon Cognito
Amazon Simple
Storage Service (S3)
Amazon
DynamoDB
AWS Tools & SDKs

필요 도구 설치
nvm install v8
npm install -g expo-cli
npm install -g @aws-amplify/cli

Expo 프로젝트 설정
expo-cli init

Amplify 설정
amplify configure

Amplify 설정
amplify init

Amplify 설정
amplify status

필요 라이브러리 추가
yarn add aws-amplify aws-amplify-react-native
yarn add native-base

Expo 실행
yarn start

앱 주요 컴포넌트 및 GraphQL
App: 최상위 컴포넌트
Feed: 메인화면의 사진 피드 목록을 보여주는 컴포넌트
Header: 앱 이름, 사진 업로드 버튼을 보여주는 컴포넌트
PictureCard: 카드 형태의 사용자명, 사진, 좋아요를 보여주는 컴포넌트
graphql/schema.json, queries.js, mutations.js, subscriptions.js

디자인
Amazon Cognito

인증 관련 리소스 구성
amplify add auth

amplify/backend/auth/cognito#####/
- cognito#####-cloudformation-template.yml
- parameters.json

amplify push

aws-exports.js
Amplify CLI에 의해 생성되어 CLI로 생성하는 서버리스 자원에 대한 정보를
포함
const awsmobile = {
"aws_project_region": "ap-northeast-2"
};
export default awsmobile;

aws-exports.js
Amplify CLI에 의해 생성되어 CLI로 생성하는 서버리스 자원에 대한 정보를
포함
const awsmobile = {
"aws_project_region": "ap-northeast-2",
"aws_cognito_identity_pool_id": "ap-northeast-2:xxxxxxxxxxxxxxxxxxx",
"aws_cognito_region": "ap-northeast-2",
"aws_user_pools_id": "ap-northeast-2_xxxxxxxx",
"aws_user_pools_web_client_id": ”xxxxxxxxxxxxxxxxxxxx",
"oauth": {},
};
export default awsmobile;

Cognito 콘솔

인증 코드 추가
import Amplify, { Auth } from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react-native';
import AWSCONFIG from './src/aws-exports';
Amplify.configure(AWSCONFIG);
export default withAuthenticator(App, false);
...

인증 화면

Amazon Cognito 사용자 풀

디자인
Amazon S3
public 버킷

UI 작업
• Feed, Header, PictureCard 컴포넌트 추가
• App 컴포넌트에서 Feed 컴포넌트 추가

API 추가
amplify add api

스키마 수정
schema.graphql
type Todo @model {
id: ID!
name: String!
description: String
}
type Picture @model {
id: ID!
userId: String!
username: String!
file: S3Object
}
type S3Object {
bucket: String!
region: String!
key: String!
uri: String!
}

API 추가 적용
amplify push

AWS AppSync 콘솔 확인

사진 객체 분석
id: ID!
userId: String!
username: String!
file: S3Object
}
type S3Object {
bucket: String!
region: String!
key: String!
uri: String!
}
사진 객체
• 고유 ID
• 업로드한 사용자 ID
• 업로드한 사용자명
• 사진 파일 위치 (S3 활용)
S3 객체
• 버킷명
• 리전
• 키
• 접근 URI

사진 저장을 위한 저장소 생성
amplify add storage

저장소 리소스 생성
amplify push
저장소 생성 확인
aws s3 ls | grep ourstory-assets
=> ourstory-assets-dev
테스트를 위한 이미지 업로드
aws s3 cp ./aws-title.jpg s3://ourstory-assets-dev/ --acl public-read

AppSync를 통한 쿼리 수행
Cognito 사용자 정보로 로그인

AppSync를 통한 쿼리 수행

API 호출
Feed.js
listPictures = async () => {
try {
const data = await API.graphql(graphqlOperation(Queries.listPictures))
const pictures = await data.data.listPictures.items;
this.setState({ pictures: pictures });
} catch (err) {
console.log('error: ', err);
}
}

쿼리 확인
graphql/queries.js
export const listPictures = `query ListPictures(
$limit: Int
$nextToken: String
) {
listPictures(imit: $limit, nextToken: $nextToken) {
items {
id userId username
file {
bucket region key uri
}
}
nextToken
}
}`;

사진 목록 확인

디자인

UI 작업
• Header에서 카메라 아이콘 추가

코드 수정
Feed에서 createPicture 변형 호출
API.graphql(graphqlOperation(Mutations.createPicture, { input: {
id: uuid(),
userId: this.state.userId,
username: this.state.username,
file: {
bucket: ‘bucket_name’,
region: ‘region_name’,
key: ‘picture_key’,
uri: ‘picture_uri’
}}));

업로드 확인

UI 작업
• PictureCard에서 More 아이콘 추가
• More 아이콘 클릭 시 옵션 표시

사진 삭제 GraphQL 호출
apiDeletePicture = async (pic) => {
const result = await API.graphql(graphqlOperation(
Mutations.deletePicture, { input: pic })
);
console.log(result);
}
export const deletePicture = `mutation DeletePicture($input: DeletePictureInput!) {
deletePicture(input: $input) {
id userId username
file {
}
}
}
`;

스키마 추가 및 변경
type Like @model {
id: ID!
userId: String!
username: String!
picture: Picture @connection(name: "PictureLikes")
}
id: ID!
userId: String!
username: String!
file: S3Object
likes: [Like] @connection(name: "PictureLikes")
}

API 변경사항 확인 및 적용
amplify status
amplify push

쿼리 수정
listPictures(filter: $filter, limit: $limit, nextToken: $nextToken) {
items {
id userId username
file {
}
likes {
items {
id
userId
username
}
nextToken
}
}
nextToken
}

UI 작업
• 좋아요 버튼 및 개수 출력 (PictureCard 수정)
let likeIcon = <Ionicons name="ios-heart" size={30} style={styles.heartIcon} />;
<TouchableOpacity onPress={this.props.onLikePressed}>
{likeIcon}
</TouchableOpacity>
this.hasLikes() &&
<View style={styles.bottomLikeMessage}>
<Text>좋아요 {this.getNumberOfLikes()}개</Text>
</View>

단계적 개발 접근
1. 환경 설정
2. 인증 기능
3. 사진 목록 기능
4. 사진 포스팅 기능
5. 사진 삭제 기능
6. 좋아요 기능
이 모든걸 가능한 빠르게, 쉽게!!
했습니다!!!

현대에는 지속적이고 빠른 개발, 배포, 피드백
수용이 중요하죠!
앱을 배포하여 사용자들의 피드백을
관찰해봅니다!

사용자 피드백
첫 화면에 사진 목록 불러오는게 왜 이렇게 느리죠?
전 5G 쓰는데도 말이죠!
내가 누구게?
썸남이 제 사진 좋아요할 때 알림 받고 싶어요!
너밖에없어

추가 요구사항 분석
사진 목록 속도 개선
대부분의 모바일 기기의 카메라 성능이 너무 좋아 용량이 큰 사진을
다운로드하고 보여주는데 꽤나 많은 시간이 필요
- 해결책: 업로드한 사진의 크기를 조절
à 사진이 포스팅되면 AWS Lambda를 통해 사진 크기 조절!
좋아요 알림
자신이 포스팅한 사진에 누군가 ＇좋아요’를 하면 알림
- 해결책: 자신이 포스팅한 사진에 누군가 ‘좋아요’를하면 인-앱 알람을
생성
à AWS AppSync로 변형에 대한 응답으로 호출되는 구독을 활용!

OurStory: 추가 요구사항 반영
• 모바일 (iOS/안드로이드) 지원
• 인증
• 사진 포스팅
• 삭제 기능
• 좋아요 기능
• 좋아요 알림 기능
• 사진 목록 로딩 속도 개선

변형에 대한 구독을 위한 코드 작성
import * as Subscriptions from './graphql/subscriptions’;
componentDidMount() { await this.subscribe(); }
this.createLikeListener = API.graphql(graphqlOperation(Subscriptions.onCreateLike))
.subscribe({
next: likeData => {
const newLike = likeData.value.data.onCreateLike;
if (newLike.picture.userId === this.state.userId && newLike.userId !==
this.state.userId) {
this.props.showInAppNotification({...});
}
}
});
componentWillUnmount() { this.createLikeListener.unsubscribe(); }
yarn add react-native-in-app-notification

기능 작동 확인

디자인
Amazon S3
resized 버킷
AWS LambdaAmazon DynamoDB
Amazon S3
public 버킷

AWS Lambda 함수 추가
amplify add function

생성된 Hello world 함수
exports.handler = function (event, context) { //eslint-disable-line
console.log(`value1 = ${event.key1}`);
context.done(null, 'Hello World'); // SUCCESS with message
};

생성된 함수 로컬 테스트
amplify function invoke ourstory

이미지 크기 변경 함수 작성
https://docs.aws.amazon.com/ko_kr/lambda/latest/dg/with-s3-example.html
자습서: Amazon S3과 함께 AWS Lambda 사용

권한 설정
DynamoDB, S3를 활용할 수 있도록 Lambda 실행 권한 설정
amplify/backend/function/ourstory/ourstory/ourstory-cloudformation-template.json
{
"Effect": "Allow",
"Action": ["s3:Put*"],
"Resource": "arn:aws:s3:::ourstory-assets-dev/resized/*”
},
{
"Effect": "Allow",
"Action": ["dynamodb:*"],
"Resource": {
"Fn::Sub": [
"arn:aws:dynamodb:${region}:${account}:table/*", {
”region": {"Ref": "AWS::Region”},
"account": {"Ref": "AWS::AccountId"}
}
]
}
}

추가한 Lambda 함수 리소스 생성
amplify push

함수 실행 관련 설정

작동 확인

현대의 애플리케이션의 데브옵스 어려움
움직이는 부분이 많으면 복잡한 사항들이 발생:

배포
다양한 방법을 지원
Amplify CLI
$ amplify hosting add
$ amplify hosting configure
$ amplify publish
AWS Amplify Console
Amazon CloudFrontAmazon Simple
Storage Service (S3)

AWS Amplify Console
클라우드 기반의 현대의 웹 앱 구축, 배포 및 호스팅
백엔드 리소스의 선택적 배포 + 완전 관리 프론트엔드 호스팅

AWS Amplify Console
앱은 전 세계에 수백 개의 PoP(Point of
Presence)를 보유한 Amazon의 안정적인
콘텐츠 전송 네트워크를 통해 제공됩니다.
클릭 한 번으로 Amazon Route 53에서
관리하는 사용자 지정 도메인을 설정하고 무료
HTTPS 인증서를 받을 수 있습니다.
리포지토리에 연결하면 'git push' 변경 사항이
프런트엔드와 백엔드에 단일 워크플로로
배포됩니다.
프로덕션에 영향을 미치지 않고 새로운 기능을
사용할 수 있습니다. 각 기능 브랜치에 연결된
브랜치 배포를 생성할 수 있습니다.
업데이트한 후 바로 모든 성공적인 배포를
사용할 수 있습니다. 배포가 실패하더라도
프로덕션 트래픽에 영향을 미치지 않습니다.
사용자 이름과 암호를 설정하여 내부 이해
관계자와 아직 릴리스되지 않은 기능을 공유할
수 있습니다.

정리
• 모바일 애플리케이션 개발, 작게 시작하고 지속적으로 반복하여 발전
시켜보세요
• Amplify, AppSync, GraphQL API는 빠른 프로토타입 개발에 좋습니다
• 뷰, 데이터 관점에서 애플리케이션을 디자인해보세요
• Input 타입과 Query 조각을 사용하여 유연한 스키마를 디자인해보세요
• 복잡한 로직은 Lambda 등의 백엔드에서 처리하시고, 클라이언트 로직은
가볍게 유지해보세요
• 가능한 많은 도구와 새로운 도구를 활용해보세요
• AWS와 함께하여 혁신해보세요

https://github.com/kpiljoong/
aws-amplify-ourstory-workshop
OurStory

감사합니다!

AWS Amplify를 통한 손쉬운 모바일 애플리케이션 개발하기 - 김필중 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie AWS Amplify를 통한 손쉬운 모바일 애플리케이션 개발하기 - 김필중 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019

Ähnlich wie AWS Amplify를 통한 손쉬운 모바일 애플리케이션 개발하기 - 김필중 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019 (20)

Mehr von Amazon Web Services Korea

Mehr von Amazon Web Services Korea (20)

AWS Amplify를 통한 손쉬운 모바일 애플리케이션 개발하기 - 김필중 솔루션즈 아키텍트, AWS :: AWS Summit Seoul 2019