bluemix受賞アプリ bluecouponのその後

IBM XCITE AUTUMN 2014

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

1© 2014 IBM Corporation

猪谷貴姿子

- 2015.4.20 -


「Agenda」

• 自己紹介

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

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


– 概要・機能一覧

– 利⽤想定

– システム構成

– 各機能詳細

• デモ

• 「BLUECOUPON」のその後...


「Bluemix Challenge」

「Bluemix」とは

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

• テンプレート

「Bluemix Challenge」とは

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


• テンプレート

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

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

– Web・App

– Mobile

– DB

• その他連携

• 開発期間： 2週間程度

• 応募総数：約300作品

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



「BLUECOUPON」について


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

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

– iOS7〜標準搭載

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

リ間）


– iOS7〜標準搭載

• 事例

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

– アントワープの美術館

– クーポン作成

– グラフ表示

– チャット機能

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

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


利⽤想定

10%

iBeaconサーバ

（店舗側端末）

グラフ

クーポンGET!!

iBeacon


10%

OFF

iBeaconクライアント

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

10%OFF

QR

iBeacon受発信

チャット電話会議


SALESFORCE

顧客情報CHATTER

TWILIO

電話会議機能

NODE.js

Socket.ioNode-cron

IBM Rule Service JAVA

PHPFileUpload

MYSQL管理クライアント

MYSQL

BLUEMIXシステム構成


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

CHATTER電話会議機能

Node-cron管理クライアント

iPadアプリ

iBeacon 受発信iOS SDK

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

iPadアプリ



各機能詳細

アプリ「BLUECOUPON」


「BLUECOUPON」 - iBeacon受発信 -

• 利⽤技術

– iOS SDK他

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

NODE.js

IBMRule Service

Bluemix

クーポン情報

Salesforce

顧客情報


1. iBeaconサーバ起動

2. 数十M以内に接近

3. クーポン一覧取得

iBeaconClient

iBeaconServer

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

iBeacon(iOS7〜)

MYSQL Lead

Step.1

Step.2

Step.3


「BLUECOUPON」 - Salesforce連携 -

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


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

（クーポンカウントも）


「BLUECOUPON」 - クーポン作成 -

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

• 利⽤技術

– PHP

PHP

MYSQL

Bluemix

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


– PHP

– iOS SDK

MYSQL

iBeaconServer

（店舗端末）


「BLUECOUPON」 - グラフ表示 -

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

• 利⽤技術

– D3.js Node.js

MYSQL

Bluemix

トランザクション


MYSQL

iBeaconServer

（店舗端末）


「BLUECOUPON」 - チャット機能 -

• iBeacon ServerとClient間

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

• 利⽤技術

NODE.js

Socket.io

Bluemix Salesforce

Chatter (チャット機能）


• 利⽤技術

– Node.js (socket.io)

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

iBeaconサーバ複数台に対応 iBeaconClient

（お客様端末）

iBeaconServer

（店舗端末）

iBeaconサーバIDでルーム開設


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

• 利⽤技術

– iOS SDK

Node.js

Bluemix

MYSQL

トランザクション


MYSQL

iBeaconServer

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

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

て利⽤


「BLUECOUPON」 - 電話会議機能 -

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

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

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

Bluemix Twilio

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

機能）


• 利⽤技術

– Twilio

– PHPiBeaconServer

（店舗端末）

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



デモ

アプリ「BLUECOUPON」


iBeaconサーバ iBeaconクライアント



iBeacon


iBeacon



カメラでQRコード撮影

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


近距離のiBeacon間


SalesForce連携

Twilio連携



BLUECOUPONのその後…


BLUECOUPONのその後…

• iOS8への対応 (iOS)

• iPhoneにも対応 (iOS)

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


– チケットの期限設定

– ロケーションで通知

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


さいごに

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

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

• 参考にしたサイト


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

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

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

bluemix受賞アプリ bluecouponのその後

Technology