「React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発」を写経してみる(2)「第5章 フロントエンドJavaScript開発のためのサーバ構築」

前回は、第3章について写経して、Javascriptのフロントエンド用フレームワークReactの環境構築を行った。

「React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発」を写経してみる(1)「第3章 フロントエンドJavaScript開発のための環境構築」
久しぶりにJavascriptで遊んでみたくて、以下の本を衝動買い! 本当は、GraphQLというものに興味がある(ページの読み込みが...

引き続き、以下の本の第5章の写経にtryしてみる。

この本を買った理由は、

(1)チャットアプリのサーバを、Firebaseで作成し、

(2)フロントエンドを、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
image

(開発環境)
Windows 8.1 Pro
VisualStudioCode

(構築した環境)
firebase-tools 3.18.0

express 4.16.3
cors 2.8.4

(1)チャットアプリケーションの概要

目指すアプリの絵を手書きでかいてみるのが一番よいと思われる。そういうソフトもあるらしいが。

Slackの簡単Versionのようなチャットアプリ作成を目指す。

1.チャンネルの切り替え

2.チャンネル内のメッセージ表示

3.チャンネルへのメッセージ送信

(2)チャットサーバの機能

1.チャンネルの作成

2.チャンネル名一覧の取得

3.チャンネル内メッセージ一覧の取得

4.指定チャンネルへのメッセージ追加

5.初期状態に戻す

チャットサーバのRESTful API

JSONデータの送受信のみとする。

JSONは、データフォーマットの一種ですが、詳しいことはこちらを参考に。。。

image

チャンネル内メッセージ一覧の取得

/channels/チャンネル名/messages GET

image

(3)Firebaseによるチャットサーバの構築

●Firebase Realtime Database

NoSQLデータベースであり、JSONデータを保存、オフラインにも対応。

●Firebase Cloud Functions

●Firebase Hosting

●Firebase Authentication

(4)Firebaseプロジェクトの作成

自分のgmailアカウント(なければ作成する)で以下のfirebase console画面にログイン。

https://console.firebase.google.com
image

新しいプロジェクトを作成。名前は demoapp とした。

image

image

image

(5)Firebase CLIのインストール

VisualStudioCodeのcmd.exeで以下を入力

npm i -g firebase-tools@3.18.0

image

firebase login

自分のgmailアカウントでログインする。

(4)Firebaseプロジェクトの初期化

今回は、

C:/js/chat-server/ フォルダ を作成し、その中で、VisualStudioCodeを開く。

さらに、VisualStudioCodeの画面でCtrl + @ で、cmd.exeの画面を出す。

image

image

●Hostingの設定

cmd.exeの画面で、以下を入力

firebase init hosting

image

Proceed? にはY

次に、以下のような画面になるので、上記で作成したdemo-app を選択。

image

あとは、Enterを2回押せばOK。

image

すると、上図のように、public/ フォルダと、4つのファイルが作成される。

●Functionsの設定

firebase init functions

image

一度、なんかエラーが出たので、言われた通りに、

firebase login –reauth

して、いろいろ許可してから、再度、

firebase init functions

選択肢は以下の通り

image

最後のdependenciesのインストールに数分かかるが、終了時は以下のような画面になり、functions/ フォルダや、いくつかのファイルが作成される。

image

(5)以下、チャットサーバのRESTful API作成を行っていく。

関連モジュールのインストール。

cd functions

npm i express cors

Express : APIのエンドポイントを実装

cors : クロスドメイン通信の許可

image

(6)FunctionsおよびAdmin SDKモジュールのインポート

functions/index.js

(変更前)
image

(変更後)
image

以下、同様に、functions/index.js に追記していく。

(7)Expressモジュールのインポートとインスタンス化

CORSモジュールのインポートとロード

functions/index.js
image

(8)ユーザ情報を取得

functions/index.js

image

打ち込み間違いをしていないだろうか、、、

(9)チャンネルを作成するAPI

functions/index.js

image

image

(10)チャンネル一覧の取得

functions/index.js

image

(11)指定チャンネルへメッセージを追加

functions/index.js

image

(12)チャンネル内メッセージ一覧の取得

functions/index.js

image

(13)初期状態に戻す

functions/index.js

image

(14)RESTful APIを利用可能にする

functions/index.js

image

(15)RESTful APIのテスト

image

curlをWindowsに頑張って入れた。

curl -X POST http://localhost:5000/demoapp-xxxxxxxx/us-central1/v1/reset

image

http://localhost:5000/demoapp-bc57f/us-central1/v1/channels

image

Ctrl + C => Enter でサーバ停止。

(16)Functionsの公開

image

うまくいかず、、、

その後、本家サイトの

https://github.com/okachijs/jsframeworkbook/tree/master/2_5_server

のコードをコピペしたつもりだが、うまくいかず。。。

余計なindex2.jsファイルを削除して、再度上記コマンド

image

数分かかった。

image

curl -X POST https://us-central1-demoapp-xxxxxxf.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

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする