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.
   

   View Slide

2. © ZOZO Technologies, Inc.
   自己紹介

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

   View Slide

3. © ZOZO Technologies, Inc.
   https://zozo.jp/

   ・ 日本最大級のファッションショッピングサイト / アプリ

   ・ 1,200以上のショップ、7,000以上のブランドの取り扱い

   　 （2019年3月末時点）

   ・ 常時73万点以上の商品アイテム数と毎日平均3,200点以上の新着　 商
   品を掲載

   ・ 即日配送サービス

   ・ ギフトラッピングサービス

   ・ ツケ払い など

   3
   

   View Slide

4. © ZOZO Technologies, Inc.
   https://wear.jp/

   ・ 日本最大級のファッションコーディネートアプリ

   ・ 1,300万ダウンロード突破、コーディネート投稿総数は800万件 

   以上（ともに2019年3月末時点）

   ・ 全世界（App Store / Google Playが利用可能な全ての国）で

   ダウンロードが可能

   ・ 10万人以上のフォロワーを持つユーザー（WEARISTA）も誕生

   4
   

   View Slide

5. © ZOZO Technologies, Inc.
   今日の発表の流れ

   5
   ● Bitrise APIでつくるGoogle Assistantアプリ

   ○ モチベーション

   ○ どんな機能をつくるか

   ○ どうつくるか

   ■ 全体の流れ

   ■ Bitrise APIの概要

   ■ 実装例

   ○ デモ

   

   View Slide

6. © ZOZO Technologies, Inc.
   モチベーション

   6
   ● 音声とタッチスクリーンで開発に必要な作業を行えると便利では？

   

   View Slide

7. © ZOZO Technologies, Inc.
   モチベーション

   7
   ● 音声とタッチスクリーンで開発に必要な作業を行えると便利では？

   ● AIに開発をサポートされたいと思いませんか？

   

   View Slide

8. © ZOZO Technologies, Inc.
   モチベーション

   8
   ● 音声とタッチスクリーンで開発に必要な作業を行えると便利では？

   ● AIに開発をサポートされたいと思いませんか？

   ● 作ってみよう！

   

   View Slide

9. © ZOZO Technologies, Inc.
   モチベーション

   9
   ● 音声とタッチスクリーンで開発に必要な作業を行えると便利では？

   ● AIに開発をサポートされたいと思いませんか？

   ● 作ってみよう！

   ○ 会社の開発合宿で作ってみました

   https://techcorp.zozo.com/entry/20190711__Development_camp 

   

   View Slide

10. © ZOZO Technologies, Inc.
    どんな機能をつくるか

    10
    ● 次の2機能を実現したい

    ○ ビルドの状態把握と詳細の表示

    ○ ブランチを指定してのDeployGateでのアプリ配布

    

    View Slide

11. © ZOZO Technologies, Inc.
    どうつくるか

    11
    ● Bitrise APIとGoogle Assistantの連携

    ○ ① 音声認識と対応するFunctionの呼び出し

    Actions on Google
 Dialogflow
 Firebase Functions
 Bitrise

    ①
    

    View Slide

12. © ZOZO Technologies, Inc.
    どうつくるか

    12
    ● Bitrise APIとGoogle Assistantの連携

    ○ ① 音声認識と対応するFunctionの呼び出し

    ○ ② Firebase FunctionsからBitrise APIの実行と結果の受け取り

    Actions on Google
 Dialogflow
 Firebase Functions
 Bitrise

    ②
    

    View Slide

13. © ZOZO Technologies, Inc.
    どうつくるか

    13
    ● Bitrise APIとGoogle Assistantの連携

    ○ ① 音声認識と対応するFunctionの呼び出し

    ○ ② Firebase FunctionsからBitrise APIの実行と結果の受け取り

    ○ ③ Dialogflow APIでの結果の描画

    Actions on Google
 Dialogflow
 Firebase Functions
 Bitrise

    ③
    

    View Slide

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
    

    View Slide

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を指定した新しいビルドのトリガー

    

    View Slide

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

    16
    ● Actions on Googleで呼び出し名「ビットライズ」でアプリを作成 (テスト版アプリ)

    ● DialogflowでフレーズとFirebase Functionsを紐付け

    ○ 特定の音声入力に対応したintentで特定のFunctionsを起動

    

    View Slide

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);
    }
    

    View Slide

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));
    });
    });
    }
    ｝
    

    View Slide

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()}`
    }));
    

    View Slide

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

    20
    

    View Slide

21. © ZOZO Technologies, Inc.
    どうつくるか: ブランチを指定してのDeployGateでのアプリ配布

    21
    ● 基本的な流れは同じ

    ○ Dialogflowで反応させたいフレーズを定義し対応するFirebase Functionsを実装

    ○ FunctionsからBitrise APIを呼び出す

    ○ 結果を描画する

    

    View Slide

22. © ZOZO Technologies, Inc.
    どうつくるか: ブランチを指定してのDeployGateでのアプリ配布

    22
    ● 具体的には

    ○ 「ブランチのリストを表示」でビルド可能なブランチをリストを表示

    ○ ブランチをタップで選択し、選択したブランチについてビルドをトリガー

    ○ 予め用意したWorkflowでビルドを実行しDeployGateへアップロード

    

    View Slide

23. © ZOZO Technologies, Inc.
    23
    デモ

    

    View Slide

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

    

    View Slide

25. © ZOZO Technologies, Inc.
    まとめ

    25
    ● Bitrise APIはとても使いやすい

    ○ Swagger UIでドキュメントが提供されているため簡単に試せる

    ● APIを使用することでBitriseの機能を他のシステムと統合が可能

    ● Google Assistantと組み合わせることでBitriseに関するアシスタントが作れる

    

    View Slide

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

    

    View Slide

27. View Slide