Firebase プロジェクト作成 Windows10にNode.js・Firebase-tools インストール・ログイン

住まいIot最終段階、物理スイッチをスマホから操作するためにFirebaseを使ってブラウザから操作するのでまずはFirebaseをWindows10で開発できるようにしてみます。

この記事は複数のページに別れています
  1. Firebase プロジェクト作成 Windows10にNode.js・Firebase-tools インストール・ログイン (今このページを見ています)
  2. Firebase Authenticationでユーザー認証(Arduino IDE+ESP8266)

照明などの物理ボタンは賃貸マンションなので工事することもできず、スイッチを物理的にBluetoothやWifiで操作できるようにする必要があります。

Naran マイクロボットやSwitch Linkなどの製品がありますが、イマイチ使い勝手が悪そうでWifiで操作できる製品がなかったので自分で作ることにします。

参考にしたページは以下。

WebアプリからWi-Fi物理スイッチを操作してみる - Qiita
はじめに前回記事で作成したお手軽Wi-Fi物理スイッチをFirebase経由で操作することでGoogle Homeからだけでなく、Webアプリからも簡単に操作できるようにしてみます。前回はESP…

これをそのままサルマネすれば実現できそうです汗

Firebase自体初めて使ったので一から順に設定していきます。

Firebase利用で必要なもの

  • Googleアカウント
  • Node.js

Googleアカウントはほとんどの方は1つは持っていると思うので、Windows10にNode.jsをインストールすることから始めてみます。

Windows10にNode.jsをインストール

Node.js ダウンロード

Download | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Windows Insstalleの64bitをダウンロードしました。

Download the Node.js source code or a pre-built installer for your platform, and start developing today.

Node.js インストール

ダウンロードしたらnode-v8.11.2-x64.msiインストーラを起動してインストールします。

Node.js インストール

特に問題なければNextを押していけば「C:\Program Files\nodejs」こちらにインストールされました。

コマンドプロンプトでNode.jsをテスト

以下のようにバージョンを表示させてみます。nmpはJavascriptのパッケージ郡、PHPのPearと同じような誰かが開発してくればスクリプトを再利用できる仕組みのようなもの。

node --version
npm --version
npm --version

これでNode.jsが使えるようになりました。

Firebase-toolsのインストール・Firebaseログイン

Firebase-tools インストール

つづいてFirebase-toolsをインストールします。

npm install -g firebase-tools

Firebase ログイン

Googleアカウント(Gmail)を使ってログインします。

firebase login

コマンドプロンプトで上記を入力するとブラウザが起動して、Googleログイン画面が表示されます。

Firebase login2

ログインすると以下のような画面になるので「許可」を押す。

Firebase login

Successfulが出てログイン完了。

Firebase login successfull

コマンドプロンプトの画面↓でもSuccess!が表示される。

Firebase login successfull2

Firebase プロジェクト作成

ここからは、Wifi物理スイッチを動かすためのプロジェクトを作成していきます。

プロジェクト作成

ログイン - Google アカウント

こちらのページにアクセスして、「プロジェクトを追加」を押す。

Firebase プロジェクト作成2

Realtime Database 作成

ちょい下のほうに「Database」があるので押す。

Firebase プロジェクト作成

Realtime Databaseを押す↓

Firebase プロジェクト作成 DB

セキュリティルール

セキュリティルールはまずは動くかどうかを確認するためにテストモードで誰でも・・・動かせる仕様にしてみます。(うまく動作確認できたら後ほどロックモードの設定をしてみます。)

Firebase プロジェクト作成 セキュリティ

プロジェクト名

適当に「物理スイッチIot Physical-switch-IOT」にしてみました。

Firebase プロジェクト作成 名前

Realtime Database 構造

このような↓構造にするようです。

Physical-switch-IOT
 └ googlehome
   └ word: ""
Firebase プロジェクト作成 作成

Wordの値部分にダブルクォーテーション2つ「””」を入れて以下のようになる。

Firebase プロジェクト作成 作成2

プロジェクト確認

コマンドプロンプトで「firebase list」を打つと以下のようにプロジェクト一覧が表示されました。(まだ1つしかプロジェクトがありません。)

ローカルにFirebaseプロジェクト作成

プロジェクトを作成した居場所にPowerShell起動

コマンドプロンプトかPowerShellで作成したプロジェクトのフォルダに行き、右クリックで「PowerShellウィンドウをここに開く」を選択してPowerShellを起動。

PowerShell

いつのまにか?コマンドプロンプトからPowerShellに変わった。どっちでも同じようですね。

今回はDropboxのAppsにプロジェクトを置きたいので[C:\Users\go\Dropbox\Apps]にdirで移動してもOK。

ローカルにプロジェクト作成

firebase init hosting

上記を入力すると以下の画面になります。

Firebase PowerShell

この部分↓だけ先ほど作ったFirebaseのプロジェクト名を↑↓ボタンで選んでリターン。

Firebase PowerShell2

その他は適当にReturnを押せばよさそう。

ファイル生成

publicと2つのファイルが生成された。publicの中にはindex.html,404.html作成される。

デプロイ

最後は以下のようにしてデプロイするとURLが表示されます。

firebase deploy

このURL・・・今のところ、誰でもアクセスできるので汗やばい気がする。セキュリティ変更してみます。

https://physical-switch-iot.firebaseapp.com

セキュリティルール変更

現状だと誰でも読み書きできてしまうので、やはりセキュリティ変更してみました。

Sign in - Google Accounts

Database > ルールで両方falseにしてひとまず終了。

コメント

タイトルとURLをコピーしました