Amplify Hands-on

2019.05.25

http://photo-albums-20190525101638-hostingbucket-master.s3-website.ap-northeast-2.amazonaws.com/

https://awskrug.github.io/amplify-photo-gallery-workshop/

[ 사전준비 ] 내용을 미리 해주세요

- AWS account 생성하기

- Cloud9 Workspace 생성하기 (또는 vscode)

- 설치 & 설정

​

​

​

​

https://github.com/Lana-Banana/amplify-photo-gallery-code.git

https://github.com/Lana-Banana/amplify-photo-gallery-code

Code

Amplify deploy

S3

Cloud-front

(CDN)

Development

mode

Product

mode

Amplify development

How to install :

npm install -g @aws-amplify/cli

​

How to Use :

터미널에서 명령어 사용

# amplify init

# amplify add auth

# amplify push

​

​

백엔드 리소스 담당

​

Amplify CLI

How to install :

npm install —save aws-amplify

​

npm install —save aws-amplify-react

npm install —save aws-amplify-angular

npm install —save aws-amplify-vue

npm install —save aws-amplify-react-native

​

How to Use :

javascript 파일 안에서

​

​

프론트엔드 구성 담당

(UI 및 클라이언트에서 백엔드 api 호출)

​

​

​

​

Amplify Javascript

ampify/cli

amplify add auth

AppSync

Cognito

ampify/cli

amplify add api

DynamoDB

AlbumTable

PhotoTable

ampify/cli

amplify add function

Lambda

SaveAlbumInfo

ElasticSearch

Service

Detect Labels

ampify/cli

amplify add storage

Trigger

Creating Thumbnail

aws-amplify(javascript)

Storage.put(photo)

S3

Recognition

Save Thumbnail Info

Get photo from label info

Get photo

SavePhotoInfo

@Searchable

1. 인증 추가하기

Backend

• amplify init
• amplify add auth

Frontend

• app.js : 로그인 화면 추가

export default withAuthenticator(App, {includeGreetings: true});

2. Graphql API 생성

Backend

• amplify add api
• schema.graphql : 스키마 정의

3. Album 관리

Frontend

• graphql 쿼리 정의: ListAlbums , SubscribeToNewAlbums, GetAlbum
• 앨범목록 정렬 함수 정의: makeComparator
• UI Component 정의: NewAlbum, AlbumsListLoader, AlbumsList, AlbumDetailsLoader, AlbumDetails
• UI Component 수정 : App

4. 사진 관리

Backend

Frontend

• graphql 쿼리 수정: GetAlbum
• UI Component 정의: S3ImageUpload, PhotosList
• UI Component 수정: AlbumDetailsLoader, AlbumDetails

• amplify add storage

5. Thumbnail 만들기

Backend

• amplify add function : (workshopphotoprocessor)
• index.js (lambda 수행 코드 작성)
• lambda 의존모듈 빌드
• lambda cloudformation-template parameter 정의
• s3 cloudformation-template에 람다 트리거 설정
• lambda function name 설정 (aws console 확인필요)
• workshopphotoprocessor
• workshopphotoprocesser-master

6. AI 추가하기

Backend

Frontend

• graphql 쿼리 추가: SearchPhotos
• UI Component 정의: Search
• UI Component 수정: App

• 람다 수행 코드 수정 (Rekognition 추가)
• graphql 스키마 수정 (@searchable, labels 추가)

workshopphotoprocessor/src/index.js

7. 배포

Backend

• amplify hosting add
• amplify push
• amplify publish

보너스 - Light Box

Frontend

• graphql 쿼리 수정: GetAlbum
• UI Component 정의: Lightbox
• UI Component 수정: PhotosList

보너스 - 다른 유저와 앨범 공유하기

Backend

Frontend

• graphql 쿼리 추가: SubscribeToUpdatedAlbums
• graphql 쿼리 수정: GetAlbum
• UI Component 정의: AddUsernameToAlbum, AlbumMembers
• UI Component 수정: AlbumDetailsLoader, AlbumDetails

​

• graphql 스키마 수정 (Album 스키마 @auth)