monacaとmbaasでo2oクーポンアプリを作りましょう！【gps x 会員 x クーポン】

Copyright © NIFTY Corporation All Rights Reserved.

【ハンズオン】MonacaとｍBaaSで

O2Oクーポンアプリを作りましょう！【GPS x 会員 x クーポン】

2015/12

ニフティ株式会社

1

Copyright © NIFTY Corporation All Rights Reserved. 2

事前準備

Monaca

ニフティクラウドmobile backend

https://ja.monaca.io/

http://mb.cloud.nifty.com/

※利用登録

※利用登録

※動作確認するため、monacaのデバッグツールをダウンロードし、インストールしてください


みなさん、ご存知でしょうか？

画像:ランチパスポート渋谷・新宿版に続いて赤坂版にもVol.2登場http://banq.jp/11562 (2015年1月31日 )

ランチパスポート！

http://banq.jp/11562 (2015


本日体験していただく内容

ランチパスポートアプリ！画像:ランチパスポート渋谷・新宿版に続いて赤坂版にもVol.2登場

http://banq.jp/11562 (2015年1月31日 )

http://banq.jp/11562 (2015


本日体験していただく内容

アプリをダウンロードし、登録する

お店を探す（GPS）

お店でクーポンを提示

アプリでできること

クーポン利用状況登録

画像:ランチパスポート渋谷・新宿版に続いて赤坂版にもVol.2登場http://banq.jp/11562 (2015年1月31日 )

http://banq.jp/11562 (2015


本日、体験して頂く内容

ユーザーログイン

クーポンがあるお店を地図上に表示

カレーショップ距離：100m

お店を見る

【利用する】ボタンで登録する


手順

① Monacaを利用し、テンプレートアプリ準備

② mobile backendを利用し、アプリ準備

③ステップ1. ログイン機能を追加

④ステップ2. 地図にお店を表示

⑤ステップ3. 利用登録機能を追加


ソースコピー用ページを開いておく

https://goo.gl/10POk7

こちらのページにハンズオンで使うソースコードコピペ用スニペットをご用意しています


①Monacaを利用し、テンプレートアプリ準備

Githubに用意しているテンプレートからMonacaでアプリ作成


https://ja.monaca.io/

※登録済みの方は不要です


Monacaデバッガーのインストール

https://ja.monaca.io/debugger.html


Monacaの新しいプロジェクトを作ります

「開発をスタート」をクリック


「Monaca.ioで開発」を選択してください


「Import Project」を選択してください


「インポート」をクリック

アプリの名前を入力

コピー用ページから：https://github.com/ncmbadmin/lunch_passport/archive/master.zip


ダッシュボードの左側に作成したプロジェクトが追加されています

「開く」をクリック


プロジェクトの開発環境が開きます


インポートしたプロジェクトの構成

アプリのデザイン調整

アプリの主な実装コード・app.jsアプリコントロール実装・index.html アプリビュー実装


動作確認しましょう！※まだサーバー機能がありません

①ブラウザーでのプレビュー方法


動作確認しましょう！※まだサーバー機能がありません

②デバッグアプリでのプレビュー方法


ログインユーザ登録

当然ですが、ユーザーデーターを用意するところがないので動作しませんね！


②mobile backendを利用し、アプリ準備mobile backendサーバーにてアプリ作成、monacaアプリと連携を準備する


ユーザーログイン情報店舗情報

クーポン情報

SDK

今ここ！


http://mb.cloud.nifty.com/

@nifty会員登録とmobile backendの利用登録を行います。


利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。

「CouponApp」と入力してください


アプリが作成されました。

２つのキーは後で使います

※後でキーを確認する方法をご案内いたします。

OKをクリックすると管理画面が表示されます


サーバーの管理画面が出てきます！


「会員管理」タブをクリック

する

アプリのユーザー情報がこちらで管理されています。次は、アプリからユーザー登録して、ログインする処理を実装！


Ｍonacaで作成したアプリを連携するために、Javascript SDKをインポート（済み）


index.htmlにて宣言（済み）


③ステップ1. ログイン機能を追加ユーザー登録、ユーザーログイン機能を実装、コード解説






お店を見る


今ここ！


www/js/app.jsを開く


1行目にアプリケーションキーとクライアントキーを設定


キーを確認するには…【その１】

アプリ設定


キーを確認するには…【その２】

ここにあります


app.jsの３行目：アプリIDの設定をする

管理画面URLにあるapplications/***/settingsの16文字の文字列をコピー

最後にapp.jsを保存を忘れずに！（Ctrl+S）


app.jsの会員管理コード追加

ユーザー登録：コピー用ページから20行目にコピー


ユーザーログイン：コピー用ページからコピー



ユーザー登録：コピー用ページからコピー

保存（Ctrl+S）を忘れずに！



新規登録成功

ログアウトボタンをクリックするとログアウトになる


ログイン成功


管理画面で会員が登録されたことを確認しましょう！

「更新」をクリックする

testというユーザーが追加されました！


コード解説: ビューを制御する実装流れ

index.html

app.js

onRegister(), onLogout()は同様


コードの解決：ユーザー登録

ユーザー情報を操作するuser変数を宣言

username, passwordをuser変数にて設定

signUpByAccount()を利用し、登録を行う

登録成功の後処理はpromiseのthenで実装


コードの解決：ユーザーログイン・ログアウト

username,passwordをlogInメソッドを利用し、ログインを行う

ログイン成功の後処理はthenに実装

logoutメソッドを利用ログアウト実施


④ステップ2. 地図にお店を表示mobilebackendにてお店データをインポートし、monacaにてサーバで検索実装、地図を利用するために、Google Map API Keyを設定、コード解説






お店を見る


今ここ！


店舗場所のデータを準備する

「データストア」をクリックする


Shopクラスを新しく作成（データインポート）

以下のファイルをDLするhttps://gist.github.com/ncmbadmin/c2bef258d2a63c40b0b1/archive/e9a844ed6b43d64cfc166b1788975890ff50280a.zip

https://gist.github.com/ncmbadmin/c2bef258d2a63c40b0b1/archive/e9a844ed6b43d64cfc166b1788975890ff50280a.zip


「Shop」を入力する

「Shop.json」ファイルを選択する


Shopクラスにはname, capacity, geolocation, image店舗の名前、席数、位置情報が追加されています。次に、アプリからこちらの情報を地図で表示させましょう！


app.jsの地図でお店表示コード追加（済み）

現在地を取得成功後の地図表示する実装


GoogleMapの地図を表示するために、GoogleのAPIコンソールにアクセスします。

https://code.google.com/apis/console


初めて入る場合、プロジェクト作成が必要


APIを有効にします

APIが有効になっている状態

「APIを有効にする」をクリックする


「認証情報」をクリックする

「認証情報を追加」をクリックする


「APIkey」をコピーする


index.htmlを開きます、google map apiのキーを設定します


index.htmlの12行目に*****に設定します

「APIkey」をここに追加

保存（Ctrl+S）を忘れずに！


デバッグツールで動作確認しましょう！（更新を忘れないでね！位置情報もONに）

ボタンをクリックします


コードの解説：地図表示

onSuccessに現在地情報取得成功した後のコールバック

ボタンをクリックするとshowMap()メソッドを実装

index.html

app.js


コード解説

var onSuccess = function(position) {

};

① 現在地を基準に～Shopクラスにお店検索

検索条件：現在地から5km範囲内

② 検索結果から、Shopの詳細情報からマーカーを生成、地図にて表示


ShopClassからストアデータを取得する実装

現在地から～5km以内のデータを取得条件設定

検索を実施、結果がshopsに格納されている

shops配列を利用し、地図に表示するマーカーを作成


④ステップ３.利用管理機能を追加お店の詳細情報を表示する実装と利用登録の実装、コード解説






お店を見る


今ここ！


Shop画像ファイルを追加

コピー用ページからhttps://github.com/ncmbadmin/Shops/archive/master.zipからShops-master.zipダウンロード

全ファイルを選択し、アップロード、名前はそのままにする


Shop画像ファイルを追加


Shop画像ファイルが公開できるように設定


app.jsの利用状況の表示コード追加（済み）


app.jsの利用状況の登録コード追加（済み）


動作確認しましょう！（更新を忘れないでね！位置情報もONに）

ボタンをクリックします


ShopClassからお店データ取得する実装

ShopId指定し、お店の詳細を取得する

検索を実施、callbackに渡されるshopに結果が格納されている

shop詳細情報を表示

コード解説

同様にUsedクラスを検索し、ログイン中ユーザーとお店の利用があるかどうか検索


コード解説

Usedクラスを操作するusedオブジェクト作成

選択中のお店、ユーザーIDをusedオブジェクトにセットし、保存実施


デバッグツール動作確認しましょう！（更新を忘れないでね！位置情報もONに）

「利用する」ボタンを

クリックする！

利用回数更新


まとめ

ユーザー認証機能を作りました

地図に店舗を表示させました

お店詳細表示、利用登録しました


まとめ

。。。

ゲーミフィケーション

様々な機能を簡単に実装できます！プッシュ通知も！Android, iOSアプリも両方対応！

ポイント利用登録


http://mb.cloud.nifty.com/doc/

まとめ

http://mb.cloud.nifty.com/doc/


https://github.com/NIFTYCloud-mbaas/UserCommunity

まとめ

質問、作ったアプリの共有TIPSがあったらぜひ活用してください！

monacaとmbaasでo2oクーポンアプリを作りましょう！【gps x 会員 x クーポン】

Technology