Slide 1

Slide 1 text

Bitrise APIでつくる
 Google Assistantアプリ
 Bitrise User Group Meetup #1
 株式会社ZOZOテクノロジーズ
 開発部
 堀江 亮介 Copyright © ZOZO Technologies, Inc.

Slide 2

Slide 2 text

© ZOZO Technologies, Inc. 自己紹介
 2 ZOZOテクノロジーズ 開発部 Androidエンジニア Tech Lead 堀江 亮介 Ryosuke Horie ・自動化とビールが好き ・Androidテスト全書という本を書きました ・ @Horie1024

Slide 3

Slide 3 text

© ZOZO Technologies, Inc. https://zozo.jp/
 ・ 日本最大級のファッションショッピングサイト / アプリ
 ・ 1,200以上のショップ、7,000以上のブランドの取り扱い
   (2019年3月末時点)
 ・ 常時73万点以上の商品アイテム数と毎日平均3,200点以上の新着  商 品を掲載
 ・ 即日配送サービス
 ・ ギフトラッピングサービス
 ・ ツケ払い など
 3

Slide 4

Slide 4 text

© ZOZO Technologies, Inc. https://wear.jp/
 ・ 日本最大級のファッションコーディネートアプリ
 ・ 1,300万ダウンロード突破、コーディネート投稿総数は800万件 
 以上(ともに2019年3月末時点)
 ・ 全世界(App Store / Google Playが利用可能な全ての国)で
 ダウンロードが可能
 ・ 10万人以上のフォロワーを持つユーザー(WEARISTA)も誕生
 4

Slide 5

Slide 5 text

© ZOZO Technologies, Inc. 今日の発表の流れ
 5 ● Bitrise APIでつくるGoogle Assistantアプリ
 ○ モチベーション
 ○ どんな機能をつくるか
 ○ どうつくるか
 ■ 全体の流れ
 ■ Bitrise APIの概要
 ■ 実装例
 ○ デモ


Slide 6

Slide 6 text

© ZOZO Technologies, Inc. モチベーション
 6 ● 音声とタッチスクリーンで開発に必要な作業を行えると便利では?


Slide 7

Slide 7 text

© ZOZO Technologies, Inc. モチベーション
 7 ● 音声とタッチスクリーンで開発に必要な作業を行えると便利では?
 ● AIに開発をサポートされたいと思いませんか?


Slide 8

Slide 8 text

© ZOZO Technologies, Inc. モチベーション
 8 ● 音声とタッチスクリーンで開発に必要な作業を行えると便利では?
 ● AIに開発をサポートされたいと思いませんか?
 ● 作ってみよう!


Slide 9

Slide 9 text

© ZOZO Technologies, Inc. モチベーション
 9 ● 音声とタッチスクリーンで開発に必要な作業を行えると便利では?
 ● AIに開発をサポートされたいと思いませんか?
 ● 作ってみよう!
 ○ 会社の開発合宿で作ってみました
 https://techcorp.zozo.com/entry/20190711__Development_camp 


Slide 10

Slide 10 text

© ZOZO Technologies, Inc. どんな機能をつくるか
 10 ● 次の2機能を実現したい
 ○ ビルドの状態把握と詳細の表示
 ○ ブランチを指定してのDeployGateでのアプリ配布


Slide 11

Slide 11 text

© ZOZO Technologies, Inc. どうつくるか
 11 ● Bitrise APIとGoogle Assistantの連携
 ○ ① 音声認識と対応するFunctionの呼び出し
 Actions on Google
 Dialogflow
 Firebase Functions
 Bitrise
 ①

Slide 12

Slide 12 text

© ZOZO Technologies, Inc. どうつくるか
 12 ● Bitrise APIとGoogle Assistantの連携
 ○ ① 音声認識と対応するFunctionの呼び出し
 ○ ② Firebase FunctionsからBitrise APIの実行と結果の受け取り
 Actions on Google
 Dialogflow
 Firebase Functions
 Bitrise
 ②

Slide 13

Slide 13 text

© ZOZO Technologies, Inc. どうつくるか
 13 ● Bitrise APIとGoogle Assistantの連携
 ○ ① 音声認識と対応するFunctionの呼び出し
 ○ ② Firebase FunctionsからBitrise APIの実行と結果の受け取り
 ○ ③ Dialogflow APIでの結果の描画
 Actions on Google
 Dialogflow
 Firebase Functions
 Bitrise
 ③

Slide 14

Slide 14 text

© ZOZO Technologies, Inc. どうつくるか: Bitrise APIの概要
 14 ● APIを介してBitriseと他のシステムの統合が可能
 ○ https://devcenter.bitrise.io/api/api-index/
 ● Swagger UI形式でドキュメントが公開
 ○ https://api-docs.bitrise.io/
 ○ ドキュメント上で実際に試しながらAPIを学べる
 ■ 「Authorize」でTokenの入力が必要な場合有
 ■ Account settings -> SecurityでTokenを入手
 
 例. builds API

Slide 15

Slide 15 text

© ZOZO Technologies, Inc. どうつくるか: 使用するAPI
 15 ● application API
 ○ GET /apps/{app-slug}
 ● アプリケーションの詳細情報の取得
 ○ GET /apps/{app-slug}/branches
 ● ビルド実行済みブランチの一覧取得
 ● builds API
 ○ GET /apps/{app-slug}/builds
 ● アプリケーションに紐づくビルドの一覧を取得
 ○ GET /apps/{app-slug}/builds/{build-slug}
 ● ビルドの詳細を取得
 ○ POST /apps/{app-slug}/builds
 ● Workflow、Branchを指定した新しいビルドのトリガー


Slide 16

Slide 16 text

© ZOZO Technologies, Inc. 実装例: アプリケーションの情報取得と表示
 16 ● Actions on Googleで呼び出し名「ビットライズ」でアプリを作成 (テスト版アプリ)
 ● DialogflowでフレーズとFirebase Functionsを紐付け
 ○ 特定の音声入力に対応したintentで特定のFunctionsを起動


Slide 17

Slide 17 text

© ZOZO Technologies, Inc. 実装例: アプリケーションの情報取得と表示 Firebase Functionsの実装
 17 ● dialogflowFirebaseFulfillmentを定義
 ● Dialogflowで定義したIntent名と関数を対応付けhandleRequest関数に登録
 ● https://github.com/dialogflow/fulfillment-webhook-nodejs が参考になる
 
 exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => { function showAppStatus (agent) { return bitrise.getAppStatus().then(body => { /** 結果の処理 **/ }); } // Intent名「Voice OPS for Bitrise Show App Status Intent」 // 対応する関数「showAppStatus」 intent.set('Voice OPS for Bitrise Show App Status Intent', showAppStatus); agent.handleRequest(intent); }

Slide 18

Slide 18 text

© ZOZO Technologies, Inc. 実装例: アプリケーションの情報取得と表示 Firebase Functionsの実装
 18 ● GET /apps/{app-slug} へリクエスト
 ● app-slug
 ○ Appの「code」タブから取得
 class Bitrise { getAppStatus() { return new Promise(resolve => { request({ method:'get', url: `${baseUrl}/apps/${appSlug}`, headers: this.header, }, (error, response, body) => { resolve(JSON.parse(body)); }); }); } }

Slide 19

Slide 19 text

© ZOZO Technologies, Inc. 実装例: アプリケーションの情報取得と表示 Firebase Functionsの実装 
 19 ● Dialogflow APIで結果を描画
 ○ この例ではCard UIとして結果を表示
 ■ https://developers.google.com/actions/assistant/responses#basic_card
 agent.add(new Card({ title: `Build status is ${status}.`, imageUrl: imageUrl, text: "", buttonText: 'Go to App Dashboard', buttonUrl: `https://app.bitrise.io/app/${apapSlug()}` }));

Slide 20

Slide 20 text

© ZOZO Technologies, Inc. 実装例: アプリケーションの情報取得と表示 
 20

Slide 21

Slide 21 text

© ZOZO Technologies, Inc. どうつくるか: ブランチを指定してのDeployGateでのアプリ配布
 21 ● 基本的な流れは同じ
 ○ Dialogflowで反応させたいフレーズを定義し対応するFirebase Functionsを実装
 ○ FunctionsからBitrise APIを呼び出す
 ○ 結果を描画する


Slide 22

Slide 22 text

© ZOZO Technologies, Inc. どうつくるか: ブランチを指定してのDeployGateでのアプリ配布
 22 ● 具体的には
 ○ 「ブランチのリストを表示」でビルド可能なブランチをリストを表示
 ○ ブランチをタップで選択し、選択したブランチについてビルドをトリガー
 ○ 予め用意したWorkflowでビルドを実行しDeployGateへアップロード


Slide 23

Slide 23 text

© ZOZO Technologies, Inc. 23 デモ


Slide 24

Slide 24 text

© ZOZO Technologies, Inc. 24 まとめ


Slide 25

Slide 25 text

© ZOZO Technologies, Inc. まとめ
 25 ● Bitrise APIはとても使いやすい
 ○ Swagger UIでドキュメントが提供されているため簡単に試せる
 ● APIを使用することでBitriseの機能を他のシステムと統合が可能
 ● Google Assistantと組み合わせることでBitriseに関するアシスタントが作れる


Slide 26

Slide 26 text

© ZOZO Technologies, Inc. 26 iOS/Androidエンジニアを募集しています!


Slide 27

Slide 27 text

No content