Google Assistant with Bitrise API

- Bitrise API
https://api-docs.bitrise.io/

- Dialogflowと連携するFirebase Functionsのサンプルコード
https://github.com/dialogflow/fulfillment-webhook-nodejs

- ビルドの状態確認のデモ
https://twitter.com/Horie1024/status/1156140240551084033

- ZOZOテクノロジーズ開発合宿
https://techcorp.zozo.com/entry/20190711__Development_camp

Transcript

1. Bitrise APIでつくる
 Google Assistantアプリ
 Bitrise User Group Meetup #1
 株式会社ZOZOテクノロジーズ
 開発部
 堀江 亮介 Copyright © ZOZO Technologies, Inc.
2. © ZOZO Technologies, Inc. 自己紹介
 2 ZOZOテクノロジーズ 開発部 Androidエンジニア Tech Lead 堀江 亮介 Ryosuke Horie ・自動化とビールが好き ・Androidテスト全書という本を書きました ・ @Horie1024
3. © ZOZO Technologies, Inc. https://zozo.jp/
 ・ 日本最大級のファッションショッピングサイト / アプリ
 ・ 1,200以上のショップ、7,000以上のブランドの取り扱い
 　 （2019年3月末時点）
 ・ 常時73万点以上の商品アイテム数と毎日平均3,200点以上の新着　 商 品を掲載
 ・ 即日配送サービス
 ・ ギフトラッピングサービス
 ・ ツケ払い など
 3
4. © ZOZO Technologies, Inc. https://wear.jp/
 ・ 日本最大級のファッションコーディネートアプリ
 ・ 1,300万ダウンロード突破、コーディネート投稿総数は800万件 
 以上（ともに2019年3月末時点）
 ・ 全世界（App Store / Google Playが利用可能な全ての国）で
 ダウンロードが可能
 ・ 10万人以上のフォロワーを持つユーザー（WEARISTA）も誕生
 4
5. © ZOZO Technologies, Inc. 今日の発表の流れ
 5 • Bitrise APIでつくるGoogle Assistantアプリ
 ◦ モチベーション
 ◦ どんな機能をつくるか
 ◦ どうつくるか
 ▪ 全体の流れ
 ▪ Bitrise APIの概要
 ▪ 実装例
 ◦ デモ

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

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

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

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

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

11. © ZOZO Technologies, Inc. どうつくるか
 11 • Bitrise APIとGoogle Assistantの連携
 ◦ ① 音声認識と対応するFunctionの呼び出し
 Actions on Google
 Dialogflow
 Firebase Functions
 Bitrise
 ①
12. © ZOZO Technologies, Inc. どうつくるか
 12 • Bitrise APIとGoogle Assistantの連携
 ◦ ① 音声認識と対応するFunctionの呼び出し
 ◦ ② Firebase FunctionsからBitrise APIの実行と結果の受け取り
 Actions on Google
 Dialogflow
 Firebase Functions
 Bitrise
 ②
13. © ZOZO Technologies, Inc. どうつくるか
 13 • Bitrise APIとGoogle Assistantの連携
 ◦ ① 音声認識と対応するFunctionの呼び出し
 ◦ ② Firebase FunctionsからBitrise APIの実行と結果の受け取り
 ◦ ③ Dialogflow APIでの結果の描画
 Actions on Google
 Dialogflow
 Firebase Functions
 Bitrise
 ③
14. © 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
15. © 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を指定した新しいビルドのトリガー

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

17. © 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); }
18. © 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)); }); }); } ｝
19. © 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()}` }));
20. © ZOZO Technologies, Inc. 実装例: アプリケーションの情報取得と表示 
 20
21. © ZOZO Technologies, Inc. どうつくるか: ブランチを指定してのDeployGateでのアプリ配布
 21 • 基本的な流れは同じ
 ◦ Dialogflowで反応させたいフレーズを定義し対応するFirebase Functionsを実装
 ◦ FunctionsからBitrise APIを呼び出す
 ◦ 結果を描画する

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

23. © ZOZO Technologies, Inc. 23 デモ

24. © ZOZO Technologies, Inc. 24 まとめ

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

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