monacaとmbaasでo2oクーポンアプリを作りましょう!【gps x 会員 x クーポン】
TRANSCRIPT
![Page 1: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/1.jpg)
Copyright © NIFTY Corporation All Rights Reserved.
【ハンズオン】MonacaとmBaaSで
O2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】
2015/12
ニフティ株式会社
1
![Page 2: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/2.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 2
事前準備
Monaca
ニフティクラウドmobile backend
https://ja.monaca.io/
http://mb.cloud.nifty.com/
※利用登録
※利用登録
※動作確認するため、monacaのデバッグツールをダウンロードし、インストールしてください
![Page 3: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/3.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 3
みなさん、ご存知でしょうか?
画像:ランチパスポート渋谷・新宿版に続いて赤坂版にもVol.2登場http://banq.jp/11562 (2015年1月31日 )
ランチパスポート!
![Page 4: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/4.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 4
本日体験していただく内容
ランチパスポートアプリ!画像:ランチパスポート渋谷・新宿版に続いて赤坂版にもVol.2登場
http://banq.jp/11562 (2015年1月31日 )
![Page 5: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/5.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 5
本日体験していただく内容
アプリをダウンロードし、登録する
お店を探す(GPS)
お店でクーポンを提示
アプリでできること
クーポン利用状況登録
画像:ランチパスポート渋谷・新宿版に続いて赤坂版にもVol.2登場http://banq.jp/11562 (2015年1月31日 )
![Page 6: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/6.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 6
本日、体験して頂く内容
ユーザーログイン
クーポンがあるお店を地図上に表示
カレーショップ距離:100m
お店を見る
【利用する】ボタンで登録する
![Page 7: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/7.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 7
手順
① Monacaを利用し、テンプレートアプリ準備
② mobile backendを利用し、アプリ準備
③ステップ1. ログイン機能を追加
④ステップ2. 地図にお店を表示
⑤ステップ3. 利用登録機能を追加
![Page 8: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/8.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 8
ソースコピー用ページを開いておく
https://goo.gl/10POk7
こちらのページにハンズオンで使うソースコードコピペ用スニペットをご用意しています
![Page 9: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/9.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 9
①Monacaを利用し、テンプレートアプリ準備
Githubに用意しているテンプレートからMonacaでアプリ作成
![Page 10: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/10.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 10
https://ja.monaca.io/
※登録済みの方は不要です
![Page 11: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/11.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 11
Monacaデバッガーのインストール
https://ja.monaca.io/debugger.html
![Page 12: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/12.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 12
Monacaの新しいプロジェクトを作ります
「開発をスタート」をクリック
![Page 13: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/13.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 13
「Monaca.ioで開発」を選択してください
![Page 14: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/14.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 14
「Import Project」を選択してください
![Page 15: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/15.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 15
「インポート」をクリック
アプリの名前を入力
コピー用ページから:https://github.com/ncmbadmin/lunch_passport/archive/master.zip
![Page 16: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/16.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 16
ダッシュボードの左側に作成したプロジェクトが追加されています
「開く」をクリック
![Page 17: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/17.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 17
プロジェクトの開発環境が開きます
![Page 18: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/18.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 18
インポートしたプロジェクトの構成
アプリのデザイン調整
アプリの主な実装コード・app.jsアプリコントロール実装・index.html アプリビュー実装
![Page 19: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/19.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 19
動作確認しましょう!※まだサーバー機能がありません
①ブラウザーでのプレビュー方法
![Page 20: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/20.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 20
動作確認しましょう!※まだサーバー機能がありません
②デバッグアプリでのプレビュー方法
![Page 21: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/21.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 21
ログイン ユーザ登録
当然ですが、ユーザーデーターを用意するところがないので動作しませんね!
![Page 22: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/22.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 22
②mobile backendを利用し、アプリ準備mobile backendサーバーにてアプリ作成、monacaアプリと連携を準備する
![Page 23: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/23.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 23
ユーザーログイン情報店舗情報
クーポン情報
SDK
今ここ!
![Page 24: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/24.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 24
http://mb.cloud.nifty.com/
@nifty会員登録とmobile backendの利用登録を行います。
![Page 25: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/25.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 25
利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。
「CouponApp」と入力してください
![Page 26: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/26.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 26
アプリが作成されました。
2つのキーは後で使います
※後でキーを確認する方法をご案内いたします。
OKをクリックすると管理画面が表示されます
![Page 27: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/27.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 27
サーバーの管理画面が出てきます!
![Page 28: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/28.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 28
「会員管理」タブをクリック
する
アプリのユーザー情報がこちらで管理されています。次は、アプリからユーザー登録して、ログインする処理を実装!
![Page 29: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/29.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 29
Monacaで作成したアプリを連携するために、Javascript SDKをインポート(済み)
![Page 30: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/30.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 30
index.htmlにて宣言(済み)
![Page 31: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/31.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 31
③ステップ1. ログイン機能を追加ユーザー登録、ユーザーログイン機能を実装、コード解説
![Page 32: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/32.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 32
本日、体験して頂く内容
ユーザーログイン
クーポンがあるお店を地図上に表示
カレーショップ距離:100m
お店を見る
【利用する】ボタンで登録する
今ここ!
![Page 33: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/33.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 33
www/js/app.jsを開く
![Page 34: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/34.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 34
1行目にアプリケーションキーとクライアントキーを設定
![Page 35: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/35.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 35
キーを確認するには…【その1】
アプリ設定
![Page 36: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/36.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 36
キーを確認するには…【その2】
ここにあります
![Page 37: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/37.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 37
app.jsの3行目:アプリIDの設定をする
管理画面URLにあるapplications/***/settingsの16文字の文字列をコピー
最後にapp.jsを保存を忘れずに!(Ctrl+S)
![Page 38: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/38.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 38
app.jsの会員管理コード追加
ユーザー登録:コピー用ページから20行目にコピー
![Page 39: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/39.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 39
ユーザーログイン:コピー用ページからコピー
app.jsの会員管理コード追加
![Page 40: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/40.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 40
ユーザー登録:コピー用ページからコピー
保存(Ctrl+S)を忘れずに!
app.jsの会員管理コード追加
![Page 41: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/41.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 41
新規登録成功
ログアウトボタンをクリックするとログアウトになる
![Page 42: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/42.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 42
ログイン成功
![Page 43: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/43.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 43
管理画面で会員が登録されたことを確認しましょう!
「更新」をクリックする
testというユーザーが追加されました!
![Page 44: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/44.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 44
コード解説: ビューを制御する実装流れ
index.html
app.js
onRegister(), onLogout()は同様
![Page 45: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/45.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 45
コードの解決:ユーザー登録
ユーザー情報を操作するuser変数を宣言
username, passwordをuser変数にて設定
signUpByAccount()を利用し、登録を行う
登録成功の後処理はpromiseのthenで実装
![Page 46: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/46.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 46
コードの解決:ユーザーログイン・ログアウト
username,passwordをlogInメソッドを利用し、ログインを行う
ログイン成功の後処理はthenに実装
logoutメソッドを利用ログアウト実施
![Page 47: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/47.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 47
④ステップ2. 地図にお店を表示mobilebackendにてお店データをインポートし、monacaにてサーバで検索実装、地図を利用するために、Google Map API Keyを設定、コード解説
![Page 48: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/48.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 48
本日、体験して頂く内容
ユーザーログイン
クーポンがあるお店を地図上に表示
カレーショップ距離:100m
お店を見る
【利用する】ボタンで登録する
今ここ!
![Page 49: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/49.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 49
店舗場所のデータを準備する
「データストア」をクリックする
![Page 50: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/50.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 50
Shopクラスを新しく作成(データインポート)
以下のファイルをDLするhttps://gist.github.com/ncmbadmin/c2bef258d2a63c40b0b1/archive/e9a844ed6b43d64cfc166b1788975890ff50280a.zip
![Page 51: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/51.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 51
「Shop」を入力する
「Shop.json」ファイルを選択する
![Page 52: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/52.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 52
Shopクラスにはname, capacity, geolocation, image店舗の名前、席数、位置情報が追加されています。次に、アプリからこちらの情報を地図で表示させましょう!
![Page 53: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/53.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 53
www/js/app.jsを開く
![Page 54: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/54.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 54
app.jsの地図でお店表示コード追加(済み)
現在地を取得成功後の地図表示する実装
![Page 55: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/55.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 55
GoogleMapの地図を表示するために、GoogleのAPIコンソールにアクセスします。
https://code.google.com/apis/console
![Page 56: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/56.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 56
初めて入る場合、プロジェクト作成が必要
![Page 57: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/57.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 57
APIを有効にします
APIが有効になっている状態
「APIを有効にする」をクリックする
![Page 58: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/58.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 58
「認証情報」をクリックする
「認証情報を追加」をクリックする
![Page 59: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/59.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 59
![Page 60: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/60.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 60
「APIkey」をコピーする
![Page 61: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/61.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 61
index.htmlを開きます、google map apiのキーを設定します
![Page 62: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/62.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 62
index.htmlの12行目に*****に設定します
「APIkey」をここに追加
保存(Ctrl+S)を忘れずに!
![Page 63: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/63.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 63
デバッグツールで動作確認しましょう!(更新を忘れないでね!位置情報もONに)
ボタンをクリックします
![Page 64: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/64.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 64
コードの解説:地図表示
onSuccessに現在地情報取得成功した後のコールバック
ボタンをクリックするとshowMap()メソッドを実装
index.html
app.js
![Page 65: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/65.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 65
コード解説
var onSuccess = function(position) {
};
① 現在地を基準に~Shopクラスにお店検索
検索条件:現在地から5km範囲内
② 検索結果から、Shopの詳細情報からマーカーを生成、地図にて表示
![Page 66: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/66.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 66
ShopClassからストアデータを取得する実装
現在地から~5km以内のデータを取得条件設定
検索を実施、結果がshopsに格納されている
shops配列を利用し、地図に表示するマーカーを作成
![Page 67: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/67.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 67
④ステップ3.利用管理機能を追加お店の詳細情報を表示する実装と利用登録の実装、コード解説
![Page 68: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/68.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 68
本日、体験して頂く内容
ユーザーログイン
クーポンがあるお店を地図上に表示
カレーショップ距離:100m
お店を見る
【利用する】ボタンで登録する
今ここ!
![Page 69: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/69.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 69
Shop画像ファイルを追加
コピー用ページからhttps://github.com/ncmbadmin/Shops/archive/master.zipからShops-master.zipダウンロード
全ファイルを選択し、アップロード、名前はそのままにする
![Page 70: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/70.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 70
Shop画像ファイルを追加
![Page 71: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/71.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 71
Shop画像ファイルが公開できるように設定
![Page 72: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/72.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 72
www/js/app.jsを開く
![Page 73: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/73.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 73
app.jsの利用状況の表示コード追加(済み)
![Page 74: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/74.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 74
app.jsの利用状況の登録コード追加(済み)
![Page 75: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/75.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 75
動作確認しましょう!(更新を忘れないでね!位置情報もONに)
ボタンをクリックします
![Page 76: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/76.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 76
ShopClassからお店データ取得する実装
ShopId指定し、お店の詳細を取得する
検索を実施、callbackに渡されるshopに結果が格納されている
shop詳細情報を表示
コード解説
同様にUsedクラスを検索し、ログイン中ユーザーとお店の利用があるかどうか検索
![Page 77: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/77.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 77
コード解説
Usedクラスを操作するusedオブジェクト作成
選択中のお店、ユーザーIDをusedオブジェクトにセットし、保存実施
![Page 78: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/78.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 78
デバッグツール動作確認しましょう!(更新を忘れないでね!位置情報もONに)
「利用する」ボタンを
クリックする!
利用回数更新
![Page 79: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/79.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 79
まとめ
ユーザー認証機能を作りました
地図に店舗を表示させました
お店詳細表示、利用登録しました
![Page 80: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/80.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 80
まとめ
。。。
ゲーミフィケーション
様々な機能を簡単に実装できます!プッシュ通知も!Android, iOSアプリも両方対応!
ポイント利用登録
![Page 81: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/81.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 81
http://mb.cloud.nifty.com/doc/
まとめ
![Page 82: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/82.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 82
https://github.com/NIFTYCloud-mbaas/UserCommunity
まとめ
質問、作ったアプリの共有TIPSがあったらぜひ活用してください!
![Page 83: MonacaとmBaaSでO2Oクーポンアプリを作りましょう!【GPS x 会員 x クーポン】](https://reader031.vdocuments.net/reader031/viewer/2022031915/586f71891a28ab10258b4fdf/html5/thumbnails/83.jpg)
Copyright © NIFTY Corporation All Rights Reserved. 83