Monacaとmobile backendで簡単モバイルアプリ開発

Copyright © NIFTY Corporation All Rights Reserved. Confidential
Monaca × mobile backend
で簡単モバイルアプリ開発
2014年11月1 6日
ニフティ株式会社

mobile backendの無料アカウント作成
mb.cloud.nifty.comにアクセスして、
右上の申し込みを行ってください。

Monacaの無料アカウント作成
monaca.mobi/jaにアクセスして、
右上のサインアップを行ってください。

Monacaデバッガーのインストール
スマホのGoogle Playストア / App Storeアプリで
「Monaca」と検索してください

位置情報を使ってみよう
4
1. プロジェクトインポート
2. 位置情報をmobile backendに保存

プロジェクトをダウンロード
5
プロジェクトをダウンロードしましょう！
• http://goo.gl/ fcJKLS

Monacaでプロジェクトインポート
6
ダウンロードしたzipファイルをもとに、
Monacaでのインポートを行います
ここから
インポートできます左上のロゴをクリック
→プロジェクトの作成をクリック
→Import Projectをクリック

mobile backendのアプリを作成する
7
mobile backendでアプリの新規作成画面を開き、
アプリ名を入力してアプリを作成しましょう

mobile backendのAPIキーを設定する
8
アプリの作成完了画面から、2つのキーをコピーして
Monacaに戻ってapp.jsに貼付けます。
NCMB.initialize( "YOUR_APP_KEY","YOUR_CLIENT_KEY" ) ;
Monacaの画面にて
jsフォルダを開くと
app.jsがあります

mobile backendにデータを登録
9
ダウンロードしたzipファイルのwwwフォルダにある
yokoteyakisoba.jsonをアップロードします。
クラス名は「Yokote」にしてください。

アプリをうごかしてみましょう！
10
「店舗を検索」をタップすると
横手やきそばのお店が検索されます
（横手やきそば暖簾会のページで調べました）
Google Mapを使えば
横手やきそばMapが作成できるはず！！

位置情報を使ってみよう
11
1. プロジェクトインポート
2. 位置情報をmobile backendに保存

位置情報をmobile backendに保存する
12
app.jsに★マークのコメントがついている部分があります。
以下のようにコードを書いてください。
//Postクラスのインスタンスを作成★
var Post = NCMB. Object.extend ("Yokote");
var post = new Post();
//値を設定★
post.set("name ",title);
post.set( "location" , geoPoint);
//保存を実行★
post.save();

アプリをうごかしてみましょう！
13
「店舗を登録」をタップすると
お店の名前を入力して
今いる場所の位置でお店を登録します。
foursquareのような
チェックインアプリっぽくなりました

まとめ
14
Monacaのおかげでやらずに済んだこと
・Android/iOSそれぞれでの位置情報処理を作ること
・開発環境の用意

まとめ
15
mobile backendのおかげでやらずに済んだこと
・サーバーの用意
・データベースの用意
mobile backendのおかげで簡単になること
・データベースの設計変更
→例えば、名前と位置情報に加えて、営業時間も追加したいとき

ハンズオンは以上で終了です！
おつかれさまでした！

Monacaとmobile backendで簡単モバイルアプリ開発

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Andere mochten auch

Andere mochten auch (16)

Ähnlich wie Monacaとmobile backendで簡単モバイルアプリ開発

Ähnlich wie Monacaとmobile backendで簡単モバイルアプリ開発 (18)

Monacaとmobile backendで簡単モバイルアプリ開発