Electron+Express+Firebase Admin+BootStrap+BootStrapTemplateで管理アプリを作る

#はじめに
Firebase+iOS,Android,Webでアプリを作っているのですが、どうもユーザ管理がしづらく、Firebaseの管理画面ではdisplayNameや、電話番号、photoURLが確認できません。
では、Firebase Admin SDKを使って、管理画面を作成して、適当なサーバにあげるかCloud Functionsにデプロイするという方法もセキュリティ的に不安があるし....。
てことで、Electronに全部入れちゃって、アプリで色々操作できるようにしちゃえばいいじゃん！と思い立ち、やってみました。
Firebase Adminの使い方や実装などについては、省略して、取り急ぎ、ExpressGeneratorを使ってElectronアプリを起動できるまでを書いています

#更新履歴
2019.5.23 2-6,7の「index.js」を「index.ejs」に修正

#環境
・macOS Mojave
・Node：v10.10.0
・npm：v6.9.0

#1.Expressプロジェクト作成
1.Express導入

$ mkdir Electron_Sample
$ cd Electron_Sample
$ npm i --save express
$ npm i express-generator -g
$ express  --view=ejs
$ npm install
$ npm start

注)express --view=ejs はejsは他のview engineでもOK。
　yを押せば雛形を作成してくれる。
2.npm startをして、サーバーが立ち上がったら、ブラウザで以下URLにアクセス。

http://localhost:3000

こんな画面が表示されたらOK

3.一旦、コンソール画面でControl+cで止めます。

4.expressのソースを修正後毎回npm startするのは面倒なので、修正後自動起動させるようにします。
　nodemonをインストール

$ npm install nodemon -g

5.package.jsonの一部を変更

package.json

"scripts": {
    "start": "nodemon ./bin/www"
}

#2.BootStrapおよびTemplate導入

1.管理画面をHTMLで一から作ってもいいんですが、時間がかかるので、巷に溢れているテンプレートを使います。
　サクッと見つかった管理画面テンプレート「gentelella」を使ってみます。
GitHub:https://github.com/puikinsh/gentelella
Demo:https://colorlib.com/polygon/gentelella/index.html

　こんな感じの画面です。
　

2.一旦、コンソール画面でControl+cで止めます。

3.以下のコマンドでgentelellaをインストール

$npm install gentelella --save

4.gentelellaのindex.htmlを探す
　Electron_Sample>node_modules>gentelella>production内にあるindex.htmlを見つける。

5.普段使っているEditorでindex.htmlを開き、全部コピーする

6.viewsディレクトリ内のindex.ejsを開き、中身を先ほどコピーしたindex.htmlをまるまるペーストする

7.ペーストしたindex.ejs内の「../vendors」を全て「/vendors」に置き換える

8.「../build/css/」を「/stylesheet/」に、「../build/js/」を「/javascript/」に置き換える。

9.app.jsの「app.use(express.static(path.join(__dirname, 'public')));」の下に以下を追加する

app.use("/javascript", express.static(__dirname + "/node_modules/gentelella/build/js/"));
app.use("/stylesheet", express.static(__dirname + "/node_modules/gentelella/build/css/"));
app.use("/vendors", express.static(__dirname + "/node_modules/gentelella/vendors/"));

10.再度$npm startして、localhost:3000/にアクセスし、以下のように画面が表示されているか確認する。

　「John」さんの写真がリンク切れてて表示されていませんが、いらんし、どうせ他のディレクトリを使うと思うので、無視。

#4.Firebase Admin SDK導入

1.Firebase Admin SDKをインストール

$ npm install firebase-admin --save

2.認証情報の発行
　　Firebaseにログインして、コンソール画面を表示させ、プロジェクトを選択します。

　「Project Overview」 右の歯車　-> プロジェクトの設定 -> サービスアカウント -> 新しい秘密鍵の生成
　
　　ダウンロードされたファイルをプロジェクトフォルダ内の任意の場所に保存
　　私は、viewsフォルダと同じ階層にsettingsフォルダを作成してその中に、settings.jsonと名前を変えて保存しました。

3.ruetesフォルダ内のindex.jsを開いて、Firebase サービスアカウントページからスニペットをコピーして追加

var express = require('express');
var router = express.Router();
//この下に追加

/*firestore admin 設定*/
var admin = require("firebase-admin");

var serviceAccount = require("path/to/serviceAccountKey.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "<databaseURLを記入>"
});

　(参)https://qiita.com/YutoKoguchi/items/5de7f19768bea1885c99
　(参)https://firebase.google.com/docs/admin/setup

4.一旦$node startでexpress起動

#5.Electron導入

1.以下のコマンドでElectronをインストール

$ npm i electron --save
$ npm init -y

2.プロジェクトフォルダにあるpackage.jsonの “main” のapp.jsまたはindex.jsとなっているところを『main.js』に変更する。

{
  "name": "electronexpress",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "electron": "^5.0.1",
    "express": "~4.16.1",
    "gentelella": "^1.4.0",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  },
  "main": "main.js",//ここをindex.jsまたはapp.jsからmain.jsに変更
  "devDependencies": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

3.app.jsと同じ階層にmain.jsファイルを作成する。

4.main.jsに以下をコピペ

main.js

	'use strict';
 
	// Electronのモジュール
	const electron = require("electron");
	const appExpress = require("./app");
	 
	// アプリケーションをコントロールするモジュール
	const app = electron.app;
	 
	// ウィンドウを作成するモジュール
	const BrowserWindow = electron.BrowserWindow;
	 
	// メインウィンドウはGCされないようにグローバル宣言
	let mainWindow;
 
	// 全てのウィンドウが閉じたら終了
	app.on('window-all-closed', function() {
	 if (process.platform != 'darwin') {
	 app.quit();
	 }
	});
	 
	// Electronの初期化完了後に実行
	app.on('ready', function() {
	 // メイン画面の表示。ウィンドウの幅、高さを指定できる
	 mainWindow = new BrowserWindow({width: 1300, height: 800});
	 mainWindow.loadURL('http://127.0.0.1:3000');
 
	// ウィンドウが閉じられたらアプリも終了
	 mainWindow.on('closed', function() {
	 mainWindow = null;
	 });
	});

　5.app.jsのvar app = express();の下の行にapp.listen(3000, "127.0.0.1”);を追加

app.js

	var createError = require('http-errors');
	var express = require('express');
	var path = require('path');
	var cookieParser = require('cookie-parser');
	var logger = require('morgan');

	var indexRouter = require('./routes/index');
	var usersRouter = require('./routes/users');
	
	var app = express();
	
	app.listen(3000, "127.0.0.1");//これを追加

	// view engine setup
	app.set('views', path.join(__dirname, 'views'));
	app.set('view engine', 'ejs');

　6.npm startして、localhost:3000でgentelellaの画面が表示されるか確認

　7.control+cで止めて、下記コマンドでエレクトロンアプリが起動するか確認

 $electron .

　【備考】万が一、grpcが見つからないエラーが出る場合は以下を実行

$ npm rebuild --target=2.0.0 --runtime=electron --dist-url=https://atom.io/download/electron

(参)https://www.npmjs.com/package/grpc#about-electron

　8.但しこのままだと、JQueryが動かないぽい(以下の画面でグラフが表示されていない)ので、index.ejsにJQueryを読み込む前に追記する。

(略)
　 <script>
      window.nodeRequire = require;
      delete window.require;
      delete window.exports;
      delete window.module;
  </script>
    <!-- jQuery -->
    <script src="/vendors/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src="/vendors/fastclick/lib/fastclick.js"></script>
    <!-- NProgress -->
    <script src="/vendors/nprogress/nprogress.js"></script>
    <!-- Chart.js -->
    <script src="/vendors/Chart.js/dist/Chart.min.js"></script>

(以下略)

　9.再度$electron .で動作確認。

次は、ここで作成したElectronアプリをWindowsとMacにインストールできるようにします。
→ElectronアプリのWindoswインストーラーをMacで作成

以上