Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile Backend Starterを使ってサクサクアプリ開発

3,125 views

Published on

DevFest Japan 2014 Springの前日に急遽、登壇の機会を頂いたので慌てて用意したバージョンです。
https://sites.google.com/site/devfestjapan/

後日、修正版をアップしまする。

Published in: Technology
  • Be the first to comment

Mobile Backend Starterを使ってサクサクアプリ開発

  1. 1. Mobile Backend Starterを使って サクサクアプリ開発 GDG九州 本田 克己
  2. 2. Mobile Backend Starterって? IaaS BaaS(Backend as a Service) SaaS PaaS クラウドの何か。 https://developers.google.com/cloud/samples/mbs/
  3. 3. 去年のGoogle I/Oで発表されました https://developers.google.com/events/io/sessions/333508149
  4. 4. システム構成 クライアントライブラリはAndroidとiOS向けに提供
  5. 5. Google App Engine Google App Engineを使っているので ・サーバのメンテとか考えなくていい ・無料で初められる ・お金を払えば自動的にスケールしてくれる
  6. 6. できること ● データの保存と認証認可 ● 継続的クエリ ● Pub/Subメッセージング
  7. 7. データの保存と認証認可 データはGoogle App EngineのDatastoreに保存 Googleアカウントでの認証・認可 JSON形式のREST API
  8. 8. 継続的クエリ データの変更があったことを検知できる ポーリングやリロードボタンを排除 無駄な通信を減らせる   → バッテリーにやさしい   → お財布にもやさしい ポーリングを無くして世界に平和を!
  9. 9. Pub/Subメッセージング パブリッシャが送信したメッセージを、 サブスクライバが受信 複数のサブスクライバに、同時にメッセージを送れる subpub Mobile Backend Starter subsubsub
  10. 10. プッシュ通知 継続的クエリもPub/Subメッセージングも、プッシュ通 知を使ってサーバからクライアントに通知 Google Cloud Messaging (GCM) Apple Push Notification Service (APNS)
  11. 11. 動かしてみる ・GAEにMBSをデプロイ(簡単) ・Android用クライアントライブラリ設定 ・GCMの設定(面倒) ・iOS用クライアントライブラリ設定 ・APNSの設定(すごく面倒)
  12. 12. GAEにデプロイ Google Developers Consoleから[プロジェクトを作成] プロジェクトを作成すると、「よう こそ。・・・」って表示される。 おもむろに「Mobile Backend Starter」を開いて [展開] をク リック
  13. 13. GAEにデプロイ しばらく待ちます
  14. 14. Androidで動かす Androidの開発環境を準備(Eclipse + ADT+GPE) サンプルプロジェクトをダウンロード、展開 (http://developers.google.com/cloud/samples/repo sitory/mbs/android) Eclipseにインポート サポートライブラリの参照が切れてるので、適当 に設定しときます
  15. 15. GCMの設定 com.google.cloud.backend.cor e.Consts.javaを変更する /** * Set Project ID of your Google APIs Console Project. */ public static final String PROJECT_ID = "*** ENTER YOUR PROJECT ID ***"; /** * Set Project Number of your Google APIs Console Project. */ public static final String PROJECT_NUMBER = "*** ENTER YOUR PROJECT NUMBER ***";
  16. 16. GCMの設定 /** * Set Project ID of your Google APIs Console Project. */ public static final String PROJECT_ID = "sinuous-client-541"; /** * Set Project Number of your Google APIs Console Project. */ public static final String PROJECT_NUMBER = "260486999232";
  17. 17. GCMの設定 Developers Consoleから Google Cloud Messaging for Androidを有効に切り替える
  18. 18. GCMの設定
  19. 19. ● プッシュ通知はシミュレータだと動かないの で、Appleにお布施して実機で動かしてください iOSで動かす
  20. 20. ● iOS Developer Programのサインアップ ● App IDの設定 ● プッシュ通知用証明書の作成 APNSの設定
  21. 21. APNSの設定
  22. 22. APNSの設定
  23. 23. プッシュ通知用証明書の作成
  24. 24. プッシュ通知用証明書の作成
  25. 25. プッシュ通知用証明書の作成 ダウンロードしたファイルを開いてキーチェーンアクセ スに取り込む キーチェーンアクセスから証明書を選択して.p12ファイ ルに書き出す
  26. 26. プロビジョニングプロファイルを作る App IDを選択
  27. 27. プロビジョニングプロファイルを作る
  28. 28. iOSクライアントIDを作成
  29. 29. MBSに証明書を登録
  30. 30. 課金を有効にする iOS向けのプッシュ通知は、1日4時間を超えると1時 間あたり$0.16費用がかかるそうです。 Android向けのプッシュ通知は、コストがかからなくて 素敵。
  31. 31. 課金を有効にする
  32. 32. プッシュ通知の設定 めんどくさい
  33. 33. 設定できてしまえば、ものすごく簡単に サーバとのデータのやりとりが実現できます コードは簡単
  34. 34. データの追加(Android) // create a CloudEntity with the new post CloudEntity newPost = new CloudEntity("Guestbook"); newPost.put("message", mMessageTxt.getText().toString()); // create a response handler that will receive the result or an error CloudCallbackHandler<CloudEntity> handler = new CloudCallbackHandler<CloudEntity>() { @Override public void onComplete(final CloudEntity result) { mPosts.add(0, result); updateGuestbookView(); mMessageTxt.setText(""); mMessageTxt.setEnabled(true); mSendBtn.setEnabled(true); } @Override public void onError(final IOException exception) { handleEndpointException(exception); } };
  35. 35. 継続的クエリ(Android) // create a response handler that will receive the result or an error CloudCallbackHandler<List<CloudEntity>> handler = new CloudCallbackHandler<List<CloudEntity>>() { @Override public void onComplete(List<CloudEntity> results) { mAnnounceTxt.setText(R.string.announce_success); mPosts = results; animateArrival(); updateGuestbookView(); } @Override public void onError(IOException exception) { mAnnounceTxt.setText(R.string.announce_fail); animateArrival(); handleEndpointException(exception); } }; // execute the query with the handler mProcessingFragment.getCloudBackend().listByKind( "Guestbook", CloudEntity.PROP_CREATED_AT, Order.DESC, 50, Scope.FUTURE_AND_PAST, handler);
  36. 36. データの追加(iOS) NSDictionary *dict = @{kGuestbookPropMessage:textView.text}; CloudEntity *record = [CloudEntity entityWithKind:kGuestbookEntityName properties:dict]; [record insertInstanceWithCallback:^(CloudEntity *entity, NSError *error) { [self insertCompletedWithObject:entity error:error]; }]; - (void)insertCompletedWithObject:(CloudEntity *)returnedObject error:(NSError *)error { if (error) { [self showPopupMessageWithVerb:@"inserting"]; [self resetToolBarWithAddButton]; } }
  37. 37. 継続的クエリ(iOS) [_controllerHelper listCollectionWithKind:kGuestbookEntityName pastScope:manually completionHandle:^(NSArray *array, NSError *error) { [self listCollectionCompletedWithArray:array error:error]; }];
  38. 38. サーバサイドはノータッチでできちゃいます。 お気楽にアプリ作ってみるのもいいと思います。

×