Posted at

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

More than 3 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