「React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発」を写経してみる（２）「第5章 フロントエンドJavaScript開発のためのサーバ構築」
前回は、第3章について写経して、Javascriptのフロントエンド用フレームワークReactの環境構築を行った。
http://twosquirrel.mints.ne.jp/?p=22642
引き続き、以下の本の第5章の写経にtryしてみる。
この本を買った理由は、
（１）チャットアプリのサーバを、Firebaseで作成し、
（２）フロントエンドを、React, Vue, Angularで作る
とうたっているからである。このうち、サーバを作成するのが第5章である。
がんばってやってみたい。
React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発
原 一浩 (著), taisa (著), 小松 大輔 (著), 永井 孝 (著), & 4 その他
技術評論社 (2018/5/9)
紙の本の価格： ￥ 2,462
Kindle 価格: ￥ 2,280
ソースコードは、以下に記載されているので大変ありがたい。
https://github.com/okachijs/jsframeworkbook/tree/master/2_5_server
（開発環境）
Windows 8.1 Pro
VisualStudioCode
（構築した環境）
firebase-tools 3.18.0
express 4.16.3
cors 2.8.4
（１）チャットアプリケーションの概要
目指すアプリの絵を手書きでかいてみるのが一番よいと思われる。そういうソフトもあるらしいが。
Slackの簡単Versionのようなチャットアプリ作成を目指す。
１．チャンネルの切り替え
２．チャンネル内のメッセージ表示
３．チャンネルへのメッセージ送信
（２）チャットサーバの機能
１．チャンネルの作成
２．チャンネル名一覧の取得
３．チャンネル内メッセージ一覧の取得
４．指定チャンネルへのメッセージ追加
５．初期状態に戻す
チャットサーバのRESTful API
JSONデータの送受信のみとする。
JSONは、データフォーマットの一種ですが、詳しいことはこちらを参考に。。。
チャンネル内メッセージ一覧の取得
/channels/チャンネル名/messages GET
（３）Firebaseによるチャットサーバの構築
●Firebase Realtime Database
NoSQLデータベースであり、JSONデータを保存、オフラインにも対応。
●Firebase Cloud Functions
●Firebase Hosting
●Firebase Authentication
（４）Firebaseプロジェクトの作成
自分のgmailアカウント（なければ作成する）で以下のfirebase console画面にログイン。
https://console.firebase.google.com
新しいプロジェクトを作成。名前は demoapp とした。
（５）Firebase CLIのインストール
VisualStudioCodeのcmd.exeで以下を入力
npm i -g firebase-tools@3.18.0
firebase login
自分のgmailアカウントでログインする。
（４）Firebaseプロジェクトの初期化
今回は、
C:/js/chat-server/ フォルダ を作成し、その中で、VisualStudioCodeを開く。
さらに、VisualStudioCodeの画面でCtrl + @ で、cmd.exeの画面を出す。
●Hostingの設定
cmd.exeの画面で、以下を入力
firebase init hosting
Proceed? にはY
次に、以下のような画面になるので、上記で作成したdemo-app を選択。
あとは、Enterを2回押せばOK。
すると、上図のように、public/ フォルダと、４つのファイルが作成される。
●Functionsの設定
firebase init functions
一度、なんかエラーが出たので、言われた通りに、
firebase login –reauth
して、いろいろ許可してから、再度、
firebase init functions
選択肢は以下の通り
最後のdependenciesのインストールに数分かかるが、終了時は以下のような画面になり、functions/ フォルダや、いくつかのファイルが作成される。
（５）以下、チャットサーバのRESTful API作成を行っていく。
関連モジュールのインストール。
cd functions
npm i express cors
Express : APIのエンドポイントを実装
cors : クロスドメイン通信の許可
（６）FunctionsおよびAdmin SDKモジュールのインポート
functions/index.js
(変更前)
(変更後)
以下、同様に、functions/index.js に追記していく。
（７）Expressモジュールのインポートとインスタンス化
CORSモジュールのインポートとロード
functions/index.js
（８）ユーザ情報を取得
functions/index.js
打ち込み間違いをしていないだろうか、、、
（９）チャンネルを作成するAPI
functions/index.js
（１０）チャンネル一覧の取得
functions/index.js
（１１）指定チャンネルへメッセージを追加
functions/index.js
（１２）チャンネル内メッセージ一覧の取得
functions/index.js
（１３）初期状態に戻す
functions/index.js
（１４）RESTful APIを利用可能にする
functions/index.js
（１５）RESTful APIのテスト
firebase serve --only functions
curlをWindowsに頑張って入れた。
curl -X POST http://localhost:5000/demoapp-xxxxxxxx/us-central1/v1/reset
http://localhost:5000/demoapp-bc57f/us-central1/v1/channels
Ctrl + C => Enter でサーバ停止。
（１６）Functionsの公開
firebase deploy --only functions
うまくいかず、、、
その後、本家サイトの
https://github.com/okachijs/jsframeworkbook/tree/master/2_5_server
のコードをコピペしたつもりだが、うまくいかず。。。
余計なindex2.jsファイルを削除して、再度上記コマンド
数分かかった。
curl -X POST https://us-central1-demoapp-ｘｘｘｘｘｘf.cloudfunctions.net/v1/reset
{“result”:”ok”} というレスポンスが返って来ればOK.
面白かったが、だいぶ疲れた。
次は、第6章 React入門＆徹底活用を写経してみたい。
React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発
原 一浩 (著), taisa (著), 小松 大輔 (著), 永井 孝 (著), & 4 その他
技術評論社 (2018/5/9)
紙の本の価格： ￥ 2,462
Kindle 価格: ￥ 2,280
ソースコード
https://github.com/okachijs/jsframeworkbook/tree/master/2_5_server