Android
Mobile
iOS
Bluemix

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

More than 2 years have passed since last update.

スクリーンショット 2016-04-19 12.00.58.png

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

前提条件

・IBM Bluemix アカウント - 30日間無料
 http://ibm.biz/bluemixfree
・IGAWorks アカウント - 無料で使える
 https://partners.igaworks.com/Account/Register
・IGAWorks手順
 adbrix:導入手順のまとめ

・Android Studioバージョン:Android Studio 2.0
・サンプルコード(Android):bms-samples-android-hellotodo
・サンプルコード(iOS):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

・Bluemixにログイン → カタログ → 「mobile」で検索 → 「MobileFirst Services Starter」選択
スクリーンショット 2016-04-19 0.24.30.png

① アプリを作成します。必要な情報を正しく入力し、「②:作成」をクリックします。
③ 遷移された画面の概要をクリックし、アプリの概要に移動します。
スクリーンショット 2016-04-19 0.30.22.png

作成されたアプリの構成を確認

① アプリが起動していることを確認します。
② このアプリのルーターとアプリGUIDを確認してください。この後、モバイルアプリにこの値を設定することで連動されます。
③ アプリの構成を確認できます。(Node.js, Mobile Client Access, Cloudant NoSQL DB, IBM Push Notifications)
④ ここまで確認できたら、アプリのURLをクリックしてみましょう。
スクリーンショット 2016-04-19 0.35.42.png

作成されたアプリを確認(Hello Todo)

① Todo Listにテキストを入力し「Add」をクリックします。
② Todo Listに入力されたテキストが追加されることが確認できます。
スクリーンショット 2016-04-19 0.44.35.png

※ Tips
Hello Todoアプリは、StrongLoopをバックグラウンドにしてあるため、データーをAPIで運営することができます。
StrogLoopの詳細は、下記のブログをご覧ください。
【ハンズオン資料】StrongLoopのLoopBackを使ってBluemix上のdatabaseをAPIで操作(CRUD)
スクリーンショット 2016-04-19 0.55.56.png

Android Studioでアプリを起動

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

手順はこちらのサンプルコード(github)を参考にしてください。(英文)
bms-samples-android-hellotodo

まず、今回使う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

・build.gradle の内容を確認します。
スクリーンショット 2016-04-19 1.31.11.png

・MainActivity.javaの「APPLICATION_ROUTE, APPLICATION_ID」を修正します。
スクリーンショット 2016-04-19 1.33.34.png

・Bluemixの値を設定
スクリーンショット 2016-04-19 1.39.37.png

アプリの確認

スクリーンショット 2016-04-19 1.49.43.png

BMXUG(Bluemix User Group)コミュニティ

「Bluemix」の「今」をフォローしましょう!

・Facebook : Bluemixユーザーグループ
・Qiita : Bluemix Qiitaページ
・Doorkeeper:Doorkeeperコミュニティ
・Slack : Bluemix User Group(BMXUG)の交流用
・stackoverflow : stackoverflow(コミュニティQ&A)
・Twitter : #bmxug