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
<img width="1187" alt="スクリーンショット 2019-01-24 10.31.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/9961/8497fb23-e35d-5eab-e537-de5143e659ed.png">

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

　こんな感じの画面です。
　<img width="1188" alt="スクリーンショット 2019-01-24 10.40.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/9961/70e75638-1cd3-6b4d-fc94-4b3bd57e0ba2.png">

 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/にアクセスし、以下のように画面が表示されているか確認する。

<img width="1187" alt="スクリーンショット 2019-01-24 11.19.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/9961/b1895dbe-3bad-4381-2753-140cce471193.png">

　「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に以下をコピペ

```node: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”);を追加

```node: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を読み込む前に追記する。

<img width="1392" alt="スクリーンショット 2019-05-14 13.47.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/7fe09cfc-4718-ff7a-2aa1-3ed64d40245a.png">

```
(略)
　 <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で作成](https://qiita.com/yoshikoba/items/509dcb44f6b3d49e4f49)

以上