bluemix受賞アプリ bluecouponのその後

IBM XCITE AUTUMN 2014

受賞アプリ「BLUECOUPON」について

1© 2014 IBM Corporation

猪谷 貴姿子

- 2015.4.20 -

IBM XCITE AUTUMN 2014

「Agenda」

• 自己紹介

• 開発コンテスト「Bluemix Challenge」について

• アプリ「BLUECOUPON」について– 概要 ・ 機能一覧

2© 2014 IBM Corporation

– 概要 ・ 機能一覧

– 利⽤想定

– システム構成

– 各機能詳細

• デモ

• 「BLUECOUPON」のその後...

IBM XCITE AUTUMN 2014

「Bluemix Challenge」

「Bluemix」とは

� 「SoftLayer」を基盤としたクラウドプラットフォーム(PaaS)

• テンプレート

「Bluemix Challenge」とは

� IBM Bluemixを使用して開発されたアプリケーションやサービスを対象とした開発コンテスト

3© 2014 IBM Corporation

• テンプレート

• 実⾏環境： Java, Node.js, Rubyが標準

• サービス：バインドする形でアプリに追加

– Web・App

– Mobile

– DB

• その他連携

• 開発期間： 2週間程度

• 応募総数：約300作品

• 最終ノミネート3組IBM XCITE Autumn 2014にて結果発表 - 最優秀賞受賞

IBM XCITE AUTUMN 2014

4© 2014 IBM Corporation

「BLUECOUPON」 について

IBM XCITE AUTUMN 2014

「BLUECOUPON」とは- iBeaconを利⽤したクーポン発⾏システム

• iBeaconとは– 近距離無線通信の技術

– iOS7〜標準搭載

• 機能一覧– iBeacon受発信（iPadアプ

リ間）

5© 2014 IBM Corporation

– iOS7〜標準搭載

• 事例

– アップルストア全米２５４店舗に導入

– アントワープの美術館

– クーポン作成

– グラフ表示

– チャット機能

– QRコード発⾏・読み取り

– 電話会議（カンファレンス機能）

IBM XCITE AUTUMN 2014

利⽤想定

10%

iBeaconサーバ

（店舗側端末）

グラフ

クーポンGET!!

iBeacon

6© 2014 IBM Corporation

10%

OFF

iBeaconクライアント

（お客様端末）クーポン作成

10%OFF

QR

iBeacon受発信

チャット電話会議

IBM XCITE AUTUMN 2014

SALESFORCE

顧客情報CHATTER

TWILIO

電話会議機能

NODE.js

Socket.ioNode-cron

IBM Rule Service JAVA

PHPFileUpload

MYSQL管理クライアント

MYSQL

BLUEMIXシステム構成

7© 2014 IBM Corporation

iBeaconクライアント（お客様端末） iBeaconサーバ（店舗側）

CHATTER電話会議機能

Node-cron管理クライアント

iPadアプリ

iBeacon 受発信iOS SDK

クーポン取得 クーポン作成・アップロード

iPadアプリ

IBM XCITE AUTUMN 2014

8© 2014 IBM Corporation

各機能詳細

アプリ「BLUECOUPON」

IBM XCITE AUTUMN 2014

「BLUECOUPON」 - iBeacon受発信 -

• 利⽤技術

– iOS SDK他

• 基本フロー1. iBeaconサーバ起動

NODE.js

IBMRule Service

Bluemix

クーポン情報

Salesforce

顧客情報

9© 2014 IBM Corporation

1. iBeaconサーバ起動

2. 数十M以内に接近

3. クーポン一覧取得

iBeaconClient

iBeaconServer

（お客様端末） （店舗端末）

iBeacon(iOS7〜)

MYSQL Lead

Step.1

Step.2

Step.3

IBM XCITE AUTUMN 2014

「BLUECOUPON」 - Salesforce連携 -

• Salesforceとはクラウドベースの CRM/顧客管理や SFA/営業支援サービス

10© 2014 IBM Corporation

リード情報に顧客情報を保存

（クーポンカウントも）

IBM XCITE AUTUMN 2014

「BLUECOUPON」 - クーポン作成 -

• iPadアプリ内でクーポンを作成し、Bluemix上に保存

• 利⽤技術

– PHP

PHP

MYSQL

Bluemix

クーポン情報（ランク情報付）

11© 2014 IBM Corporation

– PHP

– iOS SDK

MYSQL

iBeaconServer

（店舗端末）

IBM XCITE AUTUMN 2014

「BLUECOUPON」 - グラフ表示 -

• 店舗端末でグラフ表示– iBeacon Serverごと

• 利⽤技術

– D3.js Node.js

MYSQL

Bluemix

トランザクション

12© 2014 IBM Corporation

MYSQL

iBeaconServer

（店舗端末）

IBM XCITE AUTUMN 2014

「BLUECOUPON」 - チャット機能 -

• iBeacon ServerとClient間

限定の近距離チャット機能

• 利⽤技術

NODE.js

Socket.io

Bluemix Salesforce

Chatter (チャット機能）

13© 2014 IBM Corporation

• 利⽤技術

– Node.js (socket.io)

• iBeaconサーバIDをルームとし

iBeaconサーバ複数台に対応 iBeaconClient

（お客様端末）

iBeaconServer

（店舗端末）

iBeaconサーバIDでルーム開設

IBM XCITE AUTUMN 2014

「BLUECOUPON」 - QRコード生成・読み取り -

• 利⽤技術

– iOS SDK

Node.js

Bluemix

MYSQL

トランザクション

14© 2014 IBM Corporation

MYSQL

iBeaconServer

（店舗端末）（店舗端末）（お客様端末）

店舗での実際のクーポン利⽤数とし

て利⽤

IBM XCITE AUTUMN 2014

「BLUECOUPON」 - 電話会議機能 -

• Twilioとは（KDDIウェブコミュニケーションズ）

電話や SMSとネットをつなぐこと

のできるクラウドAPIサービスPHP

Bluemix Twilio

電話会議(カンファレンス

機能）

15© 2014 IBM Corporation

• 利⽤技術

– Twilio

– PHPiBeaconServer

（店舗端末）

<Response><Dial><Conference>blueconference</Conference></Dial></Response>

IBM XCITE AUTUMN 2014

16© 2014 IBM Corporation

デモ

アプリ「BLUECOUPON」

IBM XCITE AUTUMN 2014

iBeaconサーバ iBeaconクライアント

17© 2014 IBM Corporation

IBM XCITE AUTUMN 2014

iBeacon

18© 2014 IBM Corporation

iBeacon

IBM XCITE AUTUMN 2014

19© 2014 IBM Corporation

カメラでQRコード撮影

サーバIDクーポンIDユーザーID

IBM XCITE AUTUMN 2014

20© 2014 IBM Corporation

IBM XCITE AUTUMN 2014

近距離のiBeacon間

21© 2014 IBM Corporation

SalesForce連携

Twilio連携

IBM XCITE AUTUMN 2014

22© 2014 IBM Corporation

BLUECOUPONのその後…

IBM XCITE AUTUMN 2014

BLUECOUPONのその後…

• iOS8への対応 (iOS)

• iPhoneにも対応 (iOS)

• Passbookに対応 (PHP)– チケットの期限設定

23© 2014 IBM Corporation

– チケットの期限設定

– ロケーションで通知

• Mobile Quality Assurance(MQA)サービス (Bluemixサービス)

IBM XCITE AUTUMN 2014

さいごに

• Bluemixを使ってみた感想– 環境構築がすばやく、簡単

– IBM製品からサードパーティ・オープンソースまで

• 参考にしたサイト

24© 2014 IBM Corporation

• 参考にしたサイト– IBM developerworks

• ⾏き詰ったとき…– Bluemix community

https://developer.ibm.com/answers/?community=bluemix