【ハンズオン資料】BluemixとAdBrixのコラボでモバイルアプリの効率的な広告運用を実現

![スクリーンショット 2016-04-19 12.00.58.png](https://qiita-image-store.s3.amazonaws.com/0/29452/9bf57652-302a-facf-07d3-7cf8bc17b167.png)

本ブログは、2016年4月19日、IGAWorks社と共同で開催した「[【AdTech特集！】BluemixとAdBrixのコラボでモバイルアプリの効率的な広告運用を実現](https://bmxug.doorkeeper.jp/events/42251)」の手順になります。

# 前提条件
・IBM Bluemix アカウント - 30日間無料
　http://ibm.biz/bluemixfree
・IGAWorks アカウント - 無料で使える
　https://partners.igaworks.com/Account/Register
・IGAWorks手順
　[adbrix：導入手順のまとめ](http://help.igaworks.com/hc/ja/3_3/Content/Article/f714ffb1-2c77-4af2-b63c-021b4b3f7567?share=true)

・Android Studioバージョン：[Android Studio 2.0](http://developer.android.com/intl/ja/sdk/index.html)
・サンプルコード（Android）：[bms-samples-android-hellotodo](https://github.com/ibm-bluemix-mobile-services/bms-samples-android-hellotodo)
・サンプルコード（iOS）：[bms-samples-ios-hellotodo](https://github.com/ibm-bluemix-mobile-services/bms-samples-ios-hellotodo)

※ 下記のCLIは、今回のハンズオンでは不要ですが、Bluemixアプリを開発する際に便利です。
・CF（Cloud Foundry） CLI Install
　https://github.com/cloudfoundry/cli/releases
・Bluemix CLI Install
　http://clis.ng.bluemix.net/ui/home.html

# Bluemix MobileFirst Services Starter
MobileFirst Services Starterを使うと、モバイルアプリ開発に必要な機能が実装された形で、バックグラウンドを簡単に構築することができます。
![スクリーンショット 2016-04-19 0.47.58.png](https://qiita-image-store.s3.amazonaws.com/0/29452/da542370-9b9a-e899-60dc-0622c0ffa388.png)


・Bluemixにログイン → カタログ → 「mobile」で検索 → 「MobileFirst Services Starter」選択
![スクリーンショット 2016-04-19 0.24.30.png](https://qiita-image-store.s3.amazonaws.com/0/29452/3dc521f7-e1e5-2c58-ea26-f865d9c87ce5.png)

① アプリを作成します。必要な情報を正しく入力し、「②：作成」をクリックします。
③ 遷移された画面の概要をクリックし、アプリの概要に移動します。
![スクリーンショット 2016-04-19 0.30.22.png](https://qiita-image-store.s3.amazonaws.com/0/29452/60a31b76-d222-eff2-c962-342f0ca401fc.png)

## 作成されたアプリの構成を確認
① アプリが起動していることを確認します。
② このアプリのルーターとアプリGUIDを確認してください。この後、モバイルアプリにこの値を設定することで連動されます。
③ アプリの構成を確認できます。（Node.js, Mobile Client Access, Cloudant NoSQL DB, IBM Push Notifications）
④ ここまで確認できたら、アプリのURLをクリックしてみましょう。
![スクリーンショット 2016-04-19 0.35.42.png](https://qiita-image-store.s3.amazonaws.com/0/29452/8709c97d-c302-bcf6-6a37-0672dd96dc8f.png)

## 作成されたアプリを確認（Hello Todo）
① Todo Listにテキストを入力し「Add」をクリックします。
② Todo Listに入力されたテキストが追加されることが確認できます。
![スクリーンショット 2016-04-19 0.44.35.png](https://qiita-image-store.s3.amazonaws.com/0/29452/41c517a5-221f-8d50-e4be-b3caad517ce7.png)

※ Tips
Hello Todoアプリは、StrongLoopをバックグラウンドにしてあるため、データーをAPIで運営することができます。
StrogLoopの詳細は、下記のブログをご覧ください。
[【ハンズオン資料】StrongLoopのLoopBackを使ってBluemix上のdatabaseをAPIで操作（CRUD) ](http://qiita.com/joohounsong/items/476bf95016a2266d0da8)
![スクリーンショット 2016-04-19 0.55.56.png](https://qiita-image-store.s3.amazonaws.com/0/29452/14942120-a22e-5280-c8eb-15c93204057f.png)

# Android Studioでアプリを起動
ここからは、モバイルアプリを開発し、先ほど作業したBluemixと連動させる手順をご紹介いたします。

手順はこちらのサンプルコード（github）を参考にしてください。（英文）
[bms-samples-android-hellotodo](https://github.com/ibm-bluemix-mobile-services/bms-samples-android-hellotodo#configure-the-mobile-backend-for-your-hellotodo-application)

まず、今回使うAndroidアプリをダウンロードします。
githubのcloneでも上記のサンプルリンクからzipのダウンロードでも問題ございません。

・githug clone
`git clone https://github.com/ibm-bluemix-mobile-services/bms-samples-android-hellotodo`

## ダウンロードされたサンプルファイルをAndroid Studioにてプロジェクト生成
・みなさんのローカルにダウンロードされたサンプルアプリを「Android Studio」で開きます。
![スクリーンショット 2016-04-19 1.28.25.png](https://qiita-image-store.s3.amazonaws.com/0/29452/906bbf03-4a52-833f-3587-0173dc9a5bde.png)

・build.gradle の内容を確認します。
![スクリーンショット 2016-04-19 1.31.11.png](https://qiita-image-store.s3.amazonaws.com/0/29452/467851ff-7cc0-a9a4-5e61-b84fc3335a4d.png)

・MainActivity.javaの「APPLICATION_ROUTE, APPLICATION_ID」を修正します。
![スクリーンショット 2016-04-19 1.33.34.png](https://qiita-image-store.s3.amazonaws.com/0/29452/17979076-8643-de5d-e68b-aeec0a142874.png)

・Bluemixの値を設定
![スクリーンショット 2016-04-19 1.39.37.png](https://qiita-image-store.s3.amazonaws.com/0/29452/c8a1cb42-6a75-7f46-6b7c-378bb104b227.png)

## アプリの確認
![スクリーンショット 2016-04-19 1.49.43.png](https://qiita-image-store.s3.amazonaws.com/0/29452/9e528df1-1600-2d82-a51c-019078192083.png)

# BMXUG（Bluemix User Group）コミュニティ
「Bluemix」の「今」をフォローしましょう！

・Facebook ： [Bluemixユーザーグループ](https://facebook.com/groups/bmxug)
・Qiita ： [Bluemix Qiitaページ](http://qiita.com/tags/Bluemix)
・Doorkeeper：[Doorkeeperコミュニティ](https://bmxug.doorkeeper.jp/)
・Slack ： [Bluemix User Group(BMXUG)の交流用](http://bit.ly/1QzOgiC)
・stackoverflow ： [stackoverflow（コミュニティQ&A）](http://ja.stackoverflow.com/questions/tagged/bluemix)
・Twitter ： #bmxug