iOS版BeacondoアプリをOnyx Beacon CMSに組み込む手順

iOS版Beacondo SDKとXcodeでビルドしたネイティブアプリにOnyx Beacon SDKを組み込み、ビーコン端末に近接した際、アプリにクーポンをプッシュ通知する手順の内容です。


第1章 サンプルアプリの概要

1-1 ビルド開発環境
・Xcode Version 7.2
  ※クーポン一覧画面とクーポン詳細(画像)画面はMaster-Detail Application
テンプレートを使用しています。
・Beacondo-sdk-v.2
・OnyxBeacon.iOS.SDK.2.1.8.2

1-2機能の概要
・トップ画面下のクーポンボタンをタップすると、クーポン一覧画面を表示します。
・クーポン一覧画面からクーポン名をタップすると、クーポン詳細(画像)画面を表示します。
・クーポン詳細(画像)画面をタップまたは右から左へスワイプするとWEBブラウザを起動し、クーポンに指定されたURLを表示します。
・クーポン画像画面(画像)を左から右へスワイプするとクーポン一覧画面を表示します。


第2章 Onyx Beacon SDKインテグレーション
2-1 Onyx Beacon SDKインテグレーション画面にバンドルID登録
https://connect.onyxbeacon.com/admin/にログイン後、画面右上のログインIDをクリックし、
ガイドを選択します。

図-01
図-01


2-2 SDKインテグレーション
SDKインテグレーションをクリックします。

図-02
図-02

2-3バンドルIDの入力
インテグレーション画面からアプリケーション名とXcodeプロジェクトに設定するバンドルIDを入力します。

図-03
図-03


*XCode画面

図-04
図-04


第3章 OnyxBeacon SDKとXCode
3-1 OnyxBeacon SDKライブラリをXCodeプロジェクトに追加
OnyxBeaconLib.frameworkをXcodeプロジェクトにドラッグ&ドロップします。

図-05
図-05


3-2 Xcodeの設定
設定を確認し、 [Finish]ボタンをクリックします。

図-06
図-06


第4章 CoreBluetoothと CoreLocation

4-1 CoreBluetoothと CoreLocation ライブラリをXCodeプロジェクトに追加
[+]ボタンをクリックし、CoreBluetooth.frameworkとCoreLocation.frameworkを追加します。

図-07
図-07


第5章 AFNetworkingとAFOAuth2Client

5-1 AFNetworkingとAFOAuth2ClientソースフォルダーをXcodeプロジェクトに追加
AFNetworkingフォルダをXcodeプロジェクトにドラッグ&ドロップします。

図-08
図-08


5-2 XCodeの設定
設定を確認し、 [Finish]ボタンをクリックします。

図-09
図-09


5-3 AFOAuth2Clientフォルダ
AFOAuth2ClientフォルダをXcodeプロジェクトにドラッグ&ドロップし、AFNetworking
フォルダと同様に追加します。

図-10
図-10


第6章 ソースファイル修正
Onxy Beacon SDKを使用する時にポイントとなる初期処理、受信済みのクーポンの取得、
ビーコンからクーポンを受信した時の処理、クーポンの削除について記載しています。Xcode
プロジェクトのソースにもコメントを記載していますので参考にしてください。

クーポン一覧画面とクーポン詳細(画像)画面はMaster-Detail Applicationテンプレートを使用して
います。


6-1 AppDelegate.h

@interface AppDelegate : UIResponder
  ↓ 変更
@interface AppDelegate : UIResponder



6-2 AppDelegate.m


#define SA_CLIENTID @"51090e1ce50215f09aeeaa2fce3c73a5ad397788"
#define SA_SECRET @"f8b606225e25da9e12dc6b549b73e0cfd05acc25"


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ・
  ・
  ・
[[OnyxBeacon sharedInstance] requestAlwaysAuthorization];
[[OnyxBeacon sharedInstance] startServiceWithClientID:SA_CLIENTID secret:SA_SECRET];
[[OnyxBeacon sharedInstance] setDelegate:self];
[[OnyxBeacon sharedInstance] setContentDelegate:self];
  ・
  ・
  ・
}

// 受信済みクーポン取得
- (void)loadContent {
// 受信済みクーポン取得
self.coupons = [[OnyxBeacon sharedInstance] getContent];
// 受信済みクーポンから詳細情報を表示していない件数をカウント
int i = 0;
for (OBContent *content in self.coupons) {
if (content.contentState == ContentStateUnread) {
i++;
}
}
// 受信済みクーポンから詳細情報を表示していない件数をバッチ表示
if(SYSTEM_VERSION_LESS_THAN(@"8.0")) {
[UIApplication sharedApplication].applicationIconBadgeNumber = i;
} else {
UIUserNotificationSettings *settings =
[[UIApplication sharedApplication] currentUserNotificationSettings];
if (settings.types & UIUserNotificationTypeBadge) {
[UIApplication sharedApplication].applicationIconBadgeNumber = i;
}
}
}

// ビーコンからクーポンを受信した時にコールされるメソッド
- (void)didReceiveContent:(NSArray *)coupons {
// 通知表示
for (OBContent *coupon in coupons) {
UILocalNotification *notification = [[UILocalNotification alloc] init];
notification.alertBody = coupon.message;
notification.userInfo = @{@"uuid": coupon.uuid};
notification.soundName = UILocalNotificationDefaultSoundName;
[[UIApplication sharedApplication] presentLocalNotificationNow:notification];
}
// 受信済みクーポン取得
[self loadContent];
// 効果音を鳴らす
AudioServicesPlaySystemSound(1000);
// アラート表示
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:nil message:@"クーポンを受け取りました。" delegate:self cancelButtonTitle:nil otherButtonTitles:@"OK", nil];
[alert show];
}


6-3 MasterViewController.m

- (void)tableView:(UITableView *)tableView commitEditingStyle:
(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {

// 一覧から削除されたクーポンを削除
if (editingStyle == UITableViewCellEditingStyleDelete) {
int i = 0;
for (OBContent *content in self.coupons) {
if (i == indexPath.row) {
[[OnyxBeacon sharedInstance]deleteContent:content];
break;
}
i++;
}
self.coupons = [[OnyxBeacon sharedInstance] getContent];
[self.tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:
UITableViewRowAnimationFade];
if ([self.coupons count] == 0) {
[[NSNotificationCenter defaultCenter] postNotification:
[NSNotification notificationWithName:@"dismissCouponList" object:self]];
}
}
}

以上です。












スポンサーサイト

BeaconDroid SDK【Android版Beacondo】のOnyx Beacon CMS組み込み手順

BeaconDroid SDK(Android版Beacondo)のOnyx Beacon CMS組み込み手順の説明をします。管理ネイティブアプリツール - Beacondoを利用して、Onyx Beacon CMSのミドルウェアをiBeaconアプリに組み込んでビーコン端末にスマホが近接すると適切なクーポンが配信される仕組みです。Android環境のBeaconDroid v2.0をバージョンアップしましたのでお知らせいたします。


1.サンプルアプリ概要
1-1.Buildした開発環境:

・OS X El Capitan バージョン10.11.6
・Android Studio 2.1.2
・jdk1.8.0_102
・BeacondoDroid-b5
・OnyxBeacon.Android.SDK.2.3.1
  ||||
 ダウンロード先

http://www.ibeacondo.com/download/



1-2.機能概要
・通知バーの「JapanTourismタップすると、クーポンを表示します。」をタップすると、クーポン一覧画面を表示します。
・クーポン一覧画面からクーポン名をタップすると、クーポン詳細(画像)画面を表示します。
・クーポン詳細(画像)画面をタップすると、クーポンに指定されたURLを表示します。
・クーポン一覧画面から「削除」ボタンをタップすると、クーポンを削除します。

2.OnyxBeacon SDKインテグレーション画面にパッケージ名登録
2-1.https://connect.onyxbeacon.com/admin/にログイン後、画面右上のログインIDをクリックし、ガイドを選択します。
図①




2-2.SDKインテグレーションをクリックします。
図②




2-3.インテグレーション画面からアプリケーション名とAndroid Studioプロジェクトに設定するパッケージ名を入力します。
図③



Android Studio
図④



3.Onyx Beacon SDKライブラリをAndroid Studioプロジェクトに追加
3-1.OnyxBeaconLibrary-release.aarをBeacondoのAndroid Studioプロジェクト内BeacondoApp/app/libsフォルダにコピーします。
図⑤



4.ソースファイル(設定ファイル及びjavaファイル)修正
OnxyBeaconSDKを使用するための設定、および初期処理、ビーコンからクーポン受信時の処理等をBeacondoのプロジェクトファイルに追加しています。追加部分については「OnyxBeacon SDK対応」のコメントを記載しています。追加内容についてはOnxyBeaconSDKに付属のSampleアプリからの流用ですので、Sampleアプリのプロジェクトも参考にしてください。
図⑥



4-1.AndroidManifest.xml
 Beacondoの設定ファイルにOnyxBeaconSDKを使用するための設定を追加しています。
以下の部分については https://connect.onyxbeacon.com/admin/ からアプリIdとパスワードを取得して、設定してください。
android:name="clientid"
android:value="bff4028061729fb1d50fe39fed76f229221aaa04" />
android:name="secret"
android:value="77a069ab1f033e43d2b56f73575c57d94e7d98a9" />

4-2.build.gradle
 Beacondoの設定ファイルにOnyxBeaconSDKを使用するための設定を追加しています。

4-3.RootActivity.java
 BeacondoのソースファイルにOnyxBeaconSDKを使用するための初期処理を追加しています。

4-4.ContentReceiver.java
 クーポンを受信するためのクラスです。

4-6.CouponListActivity.java
 クーポン一覧を表示するためのクラスです。

4-5.CouponAdaper.java
 クーポン一覧の一行を表示するためのクラスです。

4-7.activity_coupon_list.xml
 クーポン一覧を表示するための画面レイアウトです。

4-8.item_coupon.xml
 クーポン一覧の一行を表示するための画面レイアウトです。


5.Androidプロジェクトについて
 Android Studio を使用してBeacondoのプロジェクトを開くと、以下のダイアログが表示される場合があります。その時は「Don’t remind me again for this project」または「Remind me later」をクリックしてください。

図⑦












Beacondo Android SDKでiBeacon観光アプリをつくる!

BeacondoデザイナーMac版で制作した観光アプリのコンテンツをそのままBeacondo Android SDKとAndroid Studioを導入したWindowsパソコンでAndroidアプリにしました。 もちろん、iBeacon端末で設定したアクションもiPhoneやiPadと同じようにAndroidタブレットで再現できました。

Sony Xperia Z2 Tabletに観光アプリを起動した画面です




地図表示もBeacondoで作成したKML(Key Markup Language)ファイルがそのままGoogle Map上座標軸に反映されています


iBeaconを認識してiPhoneやiPadで利用している同じアクション内容がAndroidで再現可能


今回はiBeaconのアクション設定を外部WEBリンクに設定しました



■Beacondo Android SDK(BeaconDroid)最終ベータ版

http://www.ibeacondo.com/BeacondoDroid-b4.zip



同じ観光アプリのコンテンツソースをそのまま再利用することができますのでとても便利です。

ぜひ、一度お試しください!とても簡単です。

Beacondoデザイナー v2.1日本語最終ベータのリリース

ようやくBeacondoデザイナーの日本語版をリリースできそうです。 一部、メインメニューはまだ英語のままですが、至急修正いたします。





■Beacondoデザイナー v2.1日本語ベータ4のダウンロード先は下記より、ダウンロードできます。

http://www.ibeacondo.com/download/beacondo-designer-2.1.zip



ぜひ、一度お試しください。

iBeaconで教育用アプリデモ【Beacondoでコンテンツ制作】



オーストラリアのIT&教育コンサルタントが、iPadをつかいながら、教育現場でアプリをiBeaconに反応して表示するというデモ動画。 この教育用アプリのコンテンツは「Beacondo」で制作したとのことです。 興味深い! 詳細は下記よりご参照いただけます。

http://luisperezonline.com/2014/10/15/ibeacons-experiment-with-beacondo/


http://www.appsbypaulhamilton.com/


カレンダー
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
プロフィール

吉田秀利

Author:吉田秀利
はじめまして!友人から教えてもらったオープンソースを仕事にいかしています。Tips&Tricksをご紹介します。

「世界最大のLoRaWANコミュニティ
 The Things Network Japan」

詳細はこちらから...

「iBeaconアプリ開発ガイド」

詳細はこちらから...

crijapan

http://www.crijapan.jp

最新記事
月別アーカイブ
カテゴリ
ネイティブスマホアプリが簡単にできる!
クラウドPBX Voipditto.com
オープンソース執筆本

 オープンソースツール執筆本: 

Trixbox実績ガイドブック