FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

BtoBtoCで使える利用企業向け管理画面を作る【ベース作成】

 

BtoBtoC(BtoBtoBでも可)向けのアプリの場合、そのアプリを提供している会社向けに管理画面を提供したいと考えることがあります。その管理画面では、利用企業が自分たちのデータについてだけメンテナンスできるようになります。

そのための管理画面を作成していきます。今回はまず基本になるベースを作成します。

言語はNode.js、SDKはJavaScript SDKを利用

他の企業向けに提供しますので、アプリケーションキーやクライアントキーが公開されてはいけません。そこで、サーバサイドのプログラミング言語を使って開発を行います。NCMBで公式にサポートしているSDKの中でサーバサイドの開発に対応しているのはJavaScript SDKのみになります。そこで今回はNode.js × JavaScript SDKという組み合わせで開発を進めます。コミュニティベースまで含めればRuby/PHP/Pythonといった選択肢もあります。

フレームワークはExpressを利用

今回はExpressを使って開発します。これは好みによります。

アプリケーションのベースを作成

ベースの生成はexpress-generatorを使います。インストールはNode.jsのパッケージ管理、npmを使います。

npm install express-generator -g

終わったらコマンドでベースになるコードを生成します。その後、必要なライブラリをインストールします。

express btobtoc_maintenance
cd btobtoc_maintenance/
npm i

JavaScript SDKをインストール

続いてJavaScript SDKをインストールします。これはnpmで行えます。

npm i ncmb -S

Bowerをインストール

次にWebのUI系パッケージ管理であるBowerをインストールします。npmで同じようなことはできますが、フロントとサーバサイドで分けておく方が使い勝手が良いでしょう。

npm install bower -g
bower init

インストールするのはBootstrapになります。BootstrapをインストールするとjQueryも一緒にインストールされます。

bower install bootstrap --save

設定ファイルを置く

ソフトウェアを開発していて設定ファイルを使いたくなることは多いので、予め配置しておきます。今回はアプリケーションキー、クライアントキーを書き込んでおきます。ファイル名はconfig.jsonとします。

{
  "application_key": "6b1...b3a",
  "client_key": "c14...9f8"
}

NCMBを初期化する

次にNCMBのJavaScript SDKを初期化しますが、何度も使うのでライブラリ化しておきます。 libsディレクトリを作り、libs/ncmb.jsを作成します。内容は次のようになります。先ほどの設定ファイルをrequireで読み込みます。

let NCMB = require('ncmb');
const config = require('../config');
let ncmb = new NCMB(config.application_key, config.client_key);
module.exports = ncmb;

このようにまとめることで、外部からこのファイルを読み込むだけでアプリケーションキー、クライアントキーが設定されたNCMBオブジェクトが取得できます。例えば次のように使います。

let ncmb = require('../libs/ncmb');
ncmb.User.login(req.body.userId, req.body.password)
  .then((data) => {
    res.send('hello');
  })
  .catch(error => {
    res.status(401).render('error', {error: error});
  })

今回はExpress/Node.js/NCMBを組み合わせたベースを作成するところまで説明しました。次回は認証処理について説明します。