ユースケースからみた実装カタログ Developer meetup 20171207 amplify

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Professional Services Tsukagoshi Keisuke
2017/12/7
ユースケースから見た実装カタログ
〜AWS逆引きリファレンス〜

塚越啓介（Keisuke Tsukagoshi）
AWS Professional Services DevOps Consultant
経歴
Web企業にて海外向けサービスの立ち上げやミッションクリティカルな
システムの開発をリード。
アジャイル系イベントでの講演、iOS関係の寄稿などの活動を経て
2016年より現職
得意分野
• アプリケーションの開発最適化 (FRP / RX / e.t.c)
• アジャイルなど開発プロセス (Scrum / LeSS / SAFe / DDD / e.t.c)
• コーチング/ファシリテーション
• DevOps

対象とするお客様
AWSを利用してアプリケーションを作りたい
• 実際にどんな設定をしたらよいかわからない
• 実際にどんなコードをかいたらよいかわからない
よくあるユースケースから具体的な実装パターンを紹介

紹介するユースケース
• ユーザー動向を分析したい
• ユーザーを認証させたい
• 認認証付きのWeb APIを使いたい
SDK を使ってこれらの処理を実装する

ユーザ動向を分析したい
Amazon
Pinpoint運営者ユーザ

ユーザ認証をさせたい
認証付きAPIを叩きたい
ユーザ
cognito
Amazon API
Gateway
token
認証
Amazon
EC2
AWS
Lambda

SDKではなくAmplifyとMobile CLIを紹介

Amplifyの紹介
フロントエンドおよびモバイル開発者向けの
オープンソースのJavaScriptライブラリ
React.js / ReactNative に対応
よく利用されるタスクをアプリケーションに簡単に組み込める

Amplifyでできること
Auth
Analytics
API
Storage
Caching
e.t.c
https://aws.github.io/aws-amplify/packages/aws-amplify-react-
native/docs/index.html

Amplifyを使った開発の手順
AWSリソースの
設定
IAMの設定
Client SDK
の設定
Amplify
コーディング
MobileHub + Mobile CLIで設定可能

本日紹介するユースケース
• ユーザー動向を分析したい
• ユーザーを認証させたい
• 認認証付きのWeb APIを使いたい
SDK Amplify を使ってこれらの処理を実装する

Amplifyを使い始める

AWSリソースとIAMを設定する
AWSリソースの
設定
IAMの設定
Client SDK
の設定
Amplify
コーディング

AmplifyのProvisioningにMobile Hubを利用

Mobile-Hubでprojectを作成
• Create
• Project Nameを入力
• Regionの指定
• App platformをWebに設定
• 完了

Mobile Hubで自動で行われたこと

Mobile HubでProvisioningで何が起こっているか
• Cognito Idpoolの作成
• 未認証IAMロールの作成
• Pinpointのプロジェクト作成
• S3bucketの作成
• CloudFrontの設定

AmplifyのClientを設定
AWSリソースの
設定
IAMの設定
Client SDK
の設定
Amplify
コーディング

Amplifyのclientをinstall
$ npm install --save aws-amplify
$ npm install --save aws-amplify-react

App.jsにconfigure処理を追加
import Amplify from 'aws-amplify'
import aws_exports from './aws-exports’
Amplify.configure(aws_exports);
これでAmplifyを使う準備は完了

Clientの設定を自分で書くことも可能

mobile-cliを使って生成することも可能
$ npm install -g awsmobile-cli
$ awsmobile init de***2c*-***-46f4-***-44e**fbf

Amplifyを使ってコーディング
AWSリソースの
設定
IAMの設定
Client SDK
の設定
Amplify
コーディング

Amplifyを使ってコーディング

ユーザー動向を分析したい

PinpointでAnalytics
• Eventを記録
• AttributeをつけてEventを記録
• メトリクスをつけてEentを記録
• などなど
■reference
native/docs/AnalyticsClass.html

Analyticsの手順
Pinpointの設定 IAMの設定
aws-
exports.js
の更新
Analyticsの
コーディング
MobileHub で設定済

AWSリソースの設定
Mobile HubのProvisioningで
Analyticsは設定済

AnalyticsのメソッドでEventを記録
import { Analytics } from 'aws-amplify';
…
//Eventの記録
Analytics.record(’todoAppVisit');
//Attribute付きEventの記録
Analytics.record(’todoAppVisit', { age: ''});
//メトリクス付きのEvent記録
Analytics.record('albumVisit', {}, { minutesListened: 30 });

PinpointのAnalyticsに反映

認証させたい

Cognito User PoolでAuth
• APIでAuth
• withAuthenticator HOC
• React componentでauth
• 独自UIの作成
• e.t.c
native/docs/AuthClass.html

認証の手順
UserPoolの設定 IAMの設定
aws-
exports.js
の更新
Authのコー
ディング
MobileHub & mobile-cliで自動で実施

Mobile Hubから User Sign-inを選択

UserPoolを選択

aws-exports.jsを更新
$ awsmobile pull

user_poolsの設定が自動で生成
aws_sign_in_enabled : 'enable',
aws_user_pools : 'enable',
aws_user_pools_id : 'us-east-1_Ru****iFm',
aws_user_pools_mfa_type : 'OFF',
aws_user_pools_web_client_id : '1mk0****sci9emo8li****u5c',

Sign In
import { Auth } from 'aws-amplify';
Auth.signIn(username, password)
.then(user => console.log(user))
.catch(err => console.log(err));
Auth.confirmSignIn(user, code)
.then(data => console.log(data))

Sign Up
Auth.signUp(username, password, email, phone)
Auth.confirmSignUp(username, code)

Sign Out
Auth.signOut()

Forgot Password
Auth.forgotPassword(username)
Auth.forgotPasswordSubmit(username, code, new_password)

Authenticator React Component
import { Authenticator } from 'aws-amplify-react';
class App extends Component {
render() {
if (this.props.authState !== 'signedIn') { return null; }
・・・
}
}
class AppWithAuth extends Component {
render(){
return (
<div>
<Authenticator>
<App />
</Authenticator>
</div>
);
}
}
export default AppWithAuth;

Authenticator React Component

Authenticator React ComponentにThemeを設定
$ npm install --save a-theme-react
ただのCSSセットなので、Themeを作ることも簡単にできる

Authenticator React ComponentにThemeを設定
import { Authenticator } from 'aws-amplify-react';
import { Bootstrap } from 'a-theme-react';
class AppWithAuth extends Component {
render(){
return (
<div>
<Authenticator theme={Bootstrap}>
<App />
</Authenticator>
</div>
);
}
}
export default AppWithAuth;

認証コンポーネントのカスタマイズ
https://github.com/aws/aws-
amplify/blob/master/media/authentication_guide.md#ui-theme

認証付きのWeb APIを叩きたい

API
• GET
• POST
• PUT
• DELETE
• HEAD
認証後にSigV4でAPIを簡単に叩く
native/docs/API.html

APIを作る＆叩く手順
API Gatewayの設
定
IAMの設定
aws-
exports.js
の更新
Analyticsの
コーディング
MobileHub & mobile-cliで自動で実施

AWS_IAM認証有のAPIを作成
CORSの設定も

Cloud Logicを追加

今作成したMock APIをimport

Cloud_logicの設定が自動で生成
aws_cloud_logic : 'enable',
aws_cloud_logic_custom : '[{
"id":"mplolrkgmj",
"name":"todo",
"description":"",
"endpoint":"https://mpl***.execute-api.us-east-1.amazonaws.com/Dev",
"region":"us-east-1",
"paths":["/todo"]
}]',

APIを叩く
import {API } from 'aws-amplify';
let apiName = 'todo';
let path = '/todo';
API.get(apiName, path).then(response => {
console.log(response);
}).catch( err => {
console.log(err);
});

認証済のレスポンス
未認証時のレスポンス
認証時のレスポンス

Demo

まとめ
今回、３つのユースケースの実装方法を紹介した
• Analyticsにデータを送信
• ユーザー認証 DEMO
• 認証APIを叩く
Amplify + Mobile CLIによってAWSを使った開発を簡単にはじ
められるようになりました

Happy coding with Amplify!

ユースケースからみた実装カタログ Developer meetup 20171207 amplify

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to ユースケースからみた実装カタログ Developer meetup 20171207 amplify

Similar to ユースケースからみた実装カタログ Developer meetup 20171207 amplify (20)

Recently uploaded

Recently uploaded (20)

ユースケースからみた実装カタログ Developer meetup 20171207 amplify