2013年5月28日火曜日

Android : Mobile Backend Starter のサンプルを試す

Mobile backend starter はすぐにデプロイして使うことができるサンプル。
これを使うと、Android クライアント用のクラウドバックエンドを簡単に構築することができる。
また、バックエンドとやり取りする Android クライアント用のフレームワークと、それを利用したサンプルアプリも提供されているので、バックエンドとのやりとりをすぐ試すことができるし、フレームワークをどう使えばいいかもわかるので、自分の Android アプリに組み込む方法もわかる。

バックエンド側のコードはいっさい書かなくていいし、バックエンドのアクセス部分のコードはフレームワークとして提供されているので、アプリの機能や UI に集中できるというのが利点。

クライアント側のサンプルアプリとして GuestBook と SocialTalk というのがある。
このサンプルでは、Google Cloud Messaging を使用して、同じアプリをインストールしている他のデバイスにメッセージを送信することができる。複数人チャットみたいなことができる。

Mobile Backend Starter - Google Cloud Platform — Google Developers に沿ってサンプルを試してみたのでそのメモ。





Getting Started

警告:Prospective Search 機能はこのサンプルであっても実験的であり、自身の責任で使用すること。

必要なもの
  • Google Account
  • Eclipse 3.8 or 4.2 で Android アプリを開発できる環境
  • 4.0.3 (API Level 15)以上の Android SDK と Google APIs
ドキュメントには以下の項目も必要とあるが無くても動いた
  • Google Plugin for Eclipse (GPE) 3.8/4.2 を Eclipse のリンク先の指示通りに、以下の項目をインストールする
    • Developer Tools > Android Developer Tools
    • Google App Engine Tools for Android
    • Google Plugin for Eclipse
    • SDKs > Google App Engine Java SDK
  • Extras の中の Google Cloud Messaging for Android




デプロイ・ダウンロード・サンプルの実行

やること
・サンプルのためのプロジェクトを作成する
・プロジェクトにバックエンドをデプロイする
・Android クライアントアプリのサンプルをダウンロードし、必要な ID をコードに記入しビルドして実行する


サンプルのためのプロジェクトを作成する

1. Google Account にサインインする

2. https://cloud.google.com/solutions/mobile に行く

3. Try it now をクリックする



はじめて Google App Engine を使う場合は認証コードによる確認が入ります

New Project のフォームが開かない場合は Create Project ボタンを押す

4. プロジェクト名とプロジェクトIDを指定してプロジェクトを作成する

プロジェクトIDは全世界で一意である必要がある。プロジェクトIDのテキストボックス内の更新ボタンを押すと利用できるプロジェクトIDを適当に生成してくれる。
このプロジェクトIDは Google App Engine のコンソールGoogle APIs のコンソールでプロジェクトを識別するのに使われる。


プロジェクトにバックエンドをデプロイする

1. プロジェクトの Cloud Console 画面に行く

プロジェクトを新規作成したあとに遷移する画面 Google Cloud コンソール で作成したプロジェクトを選択しても行ける

2. 上側の2つのドットの2番目をクリックして Mobile Backend App を表示する



3. Deploy ボタンを押す



Deploy 中はポップアップが出るので、Details を押せばどこまで進んでいるのか見れる



Deploy が終わったら、Deploy ボタンの表示が "Deployed on [日付]" になる

4. 2の Settings ボタンを押す



5. Mobile Backend settings の Authentication/Authorization を Open にして Save をクリックする(この時点では他の値はいじらない)



保存できたら Done というポップアップが表示される

重要: Open 設定は開発時向けであり、プロジェクトIDを知っている人であればだれでもアクセスできる。アプリ開発時でもアクティブに使用しないときは Locked Down に変更すること!


Android クライアントアプリのサンプルをダウンロードし、必要な ID をコードに記入しビルドして実行する

1. zip ファイルをダウンロードする

2. zip ファイルを解凍する

3. Android プロジェクトを Eclipse に Import する

Eclipse を立ち上げて File > Import > Android > Existing Android Code Into Workspace を選択



Root Directory に展開したプロジェクトのディレクトリ(solutions-mobile-backend-starter-android-client-master)を指定して Finish をクリック



4. プロジェクトのプロパティの Android でビルドターゲットが API Level 15 以上の Google APIs になっていることを確認する



5. src/com.google.cloud.backend.android の Consts.java を開く



Google APIs Console に行って、Project ID を調べ Consts.java にセットする。(Project Number は GCM を利用する場合に必要になる、あとで説明する)



6. Android アプリをビルドし、Android 4.0.3 以上の実機、もしくはエミュレータで実行する

メッセージを送ると、タイムスタンプとともに戻ってきて表示される

7. バックエンドに保存されているデータを見る

Google Cloud Console のプロジェクトから App Engine をクリックして、Cloud Datastore をクリックする



左側の Query を選択し、Kind で GuestBook を選択して RunQuery ボタンを押すと、保存されているデータが表示される



チェックボックスでチェックしたデータを削除することもできる





サンプルで Google Cloud Messaging を使うようにする

1. Google API Console に行く

2. 左側の Services を選択する



Google Cloud Messaging for Android を ON にする。必要に応じて利用規約確認する。



3. 左側の API Access を選択する



Create new Server key... ボタンをクリックする



Create ボタンを押す



IP アドレスは空で OK(server key が IP アドレスのホワイトリストを使えるようにする場合に利用する機能)

Key for server apps という項目が追加される



4. Cloud Console の Mobile Backend App の Settings ボタンを押す



Google Cloud Messaging を Enable にする



Google Cloud Messaging API key の部分にさっきの Key for server apps の API key を入れて Save ボタンを押す

保存できたら Done というポップアップが表示される

5. src/com.google.cloud.backend.android の Consts.java を開く



Google APIs Console に行って、Project Number を調べ Consts.java にセットする。



6. Android アプリをビルドし、Android 4.0.3 以上の実機、もしくはエミュレータで実行する

エミュレータの場合は Target: を Google APIs にする



メッセージを送ると、タイムスタンプとともに戻ってきて表示され、別のデバイスの同じアプリにも自動でプッシュされる

7. Mobile Backend settings の Send Cloud Message で topicId を _breadcast のまま send ボタンを押すと、message= で指定したメッセージが Android アプリ側にトーストで表示される







サンプルに認証を追加する

ドキュメントには「認証を追加したサンプルはエミュレーターでは実行できず、実際のデバイスを使う必要がある」とあるが、Target に Google APIs を指定したエミュレータなら実行できます

モバイルバックエンドサンプルに認証を追加するには以下の手順が必要
  • 1. web client ID を作成する
  • 2. Android client ID を作成する
  • 3. web client ID と Android client ID をモバイルバックエンドの設定画面でセットする
  • 4. web client ID を Android クライアントアプリの Consts.java に記入する


Web Client ID を作る

1. Google API Console にアクセスし、左側の API Access を選択する



2. Create an OAuth 2.0 client ID ボタンもしくは Create another client ID ボタンをクリックする



3. Create Client ID ダイアログで
・Application type を web application にする
・Your site or hostname のスキーマ部分を http:// にする
・Your site or hostname のアドレス部分を www.[プロジェクト名].appspot.com にする



Create client ID ボタンをクリックする

Client ID for web applications という項目が作成される




Android client ID を作成する

Android Client ID を作成するには、署名キーの SHA1 fingerprint が必要
アプリをリリースするときはリリース用の署名キーで Android Client ID を作成する!
ここでは debug.keystore を使う

1. 署名キー の SHA1 fingerprint を取得する

$ keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1
パスワードは android

fingerprint が表示されるのでメモしておく

2. Google API Console にアクセスし、左側の API Access を選択する



3. Create an OAuth 2.0 client ID ボタンもしくは Create another client ID ボタンをクリックする



4. Create Client ID ダイアログで
・Application type を Installed application にする
・Installed application type を Android にする
・Package name: にアプリのパッケージ名(サンプルだと com.google.cloud.backend.android)を入力する
・Signing certificate fingerprint (SHA1): に 1. の fingerprint を入力する



Create client ID ボタンをクリックする

Client ID for installed applications という項目が作成される




web client ID と Android client ID をモバイルバックエンドの設定画面でセットする

1. Google Cloud Console でモバイルバックエンドプロジェクトを開く

2. Cloud Console の Mobile Backend App の Settings ボタンを押す



3. Authentication/Authorization を Secured by Client IDs に変更し、Web Client ID を Android Client ID を入力し、Save を押す




web client ID を Android クライアントアプリの Consts.java に記入する

1. src/com.google.cloud.backend.android の Consts.java を開く

Web Client ID を WEB_CLIENT_ID 定数にセットし、IS_AUTH_ENABLED 定数を true にする



アプリを実行すると、最初に使用する Google アカウントを聞かれるようになる
メッセージを送ると <anonymous> だった部分が Goole アカウント名になる





# おおお、チャットできるぞい!いやー、サーバー側のコード全く書いてないのにすごいねぇ!



0 件のコメント:

コメントを投稿