firebaseを触ってみる - プログラム上達したいな blog

herokuばっか触ってると

違うのないんかなーと

ふと思って

探してると

見つけました

firebaseというものが

ありまして

すごいらしい

firebase.google.com

早速使ってみたい

ってなったので

qiita.com

こちらを参考に

作っていきます

アプリの認証

「WebアプリにFirebaseを追加」を選択
すると以下のようなjavascriptのスニペットを得るので、
「コピー」ボタンを押して、index.htmlのTODOのところに貼り付ける

index.html の TODOって

どこ？

f:id:gjjjjcdssvgg:20180802221939p:plain

とりあえず

ここに入れてみた

f:id:gjjjjcdssvgg:20180802222300p:plain

f:id:gjjjjcdssvgg:20180802222316p:plain

f:id:gjjjjcdssvgg:20180802222341p:plain

111~123が加えたところ

Firebaseのコンソールで
Auth > 「ログイン方法を設定」＞Goole ＞「有効にする」をスライドする＞「保存」

をクリック

Authって何？

f:id:gjjjjcdssvgg:20180802223140p:plain

f:id:gjjjjcdssvgg:20180802223158p:plain

Auth = Authenticationかな？

続けます

f:id:gjjjjcdssvgg:20180802223642p:plain

こんな感じ？

5 Firebaseコマンドラインのインストール（残り51分）

Firebase Command Line Interface (CLI) はローカルで作っているアプリをFirebaseのホスティングサービスにUpするために必要
まずFirebaseのコンソールでHostingを選択

f:id:gjjjjcdssvgg:20180802223949p:plain

Hostingはここ

f:id:gjjjjcdssvgg:20180802224056p:plain

使ってみる

数秒

f:id:gjjjjcdssvgg:20180802224325p:plain

f:id:gjjjjcdssvgg:20180802224407p:plain

確かに

数秒

f:id:gjjjjcdssvgg:20180802224616p:plain

f:id:gjjjjcdssvgg:20180802224632p:plain

許可したら

Woohoo!

f:id:gjjjjcdssvgg:20180802224803p:plain

燃えてる

f:id:gjjjjcdssvgg:20180802225442p:plain

firebase initすると

結構質問をしてくる

hostingなんとかを選択
create a new projectを選択
後はEnterキー

f:id:gjjjjcdssvgg:20180802230007p:plain

error出たんで

firebase use --add

をしておいた

f:id:gjjjjcdssvgg:20180802230203p:plain

deploy完了

firebase server すると

f:id:gjjjjcdssvgg:20180802230811p:plain

がっつり

しかし、

node.jsのバージョンが

よくないっぽいんで

変更

f:id:gjjjjcdssvgg:20180802231227p:plain

qiita.com

f:id:gjjjjcdssvgg:20180802231252p:plain

f:id:gjjjjcdssvgg:20180803001646p:plain

sampleにアップロードできました

f:id:gjjjjcdssvgg:20180803001813p:plain

firebase.jsonに

publicがあると？

f:id:gjjjjcdssvgg:20180803002102p:plain

publicフォルダの

index.htmlが

firebaseに

アップロードされることに

なる

web-startフォルダに

もともとindex.htmlが

あったんですが

全然呼び出して

くれなかったんで

web-startフォルダの

index.htmlを

publicに移動しました

じゃあ、うまいこと

いきました

7 ユーザーのサインイン機能（残り48分）

Firebaseの認証の初期化

scripts/main.jsのFriendlyChat.prototype.initFirebase関数のところを修正する必要がある
FriendlyChat.prototype.initFirebase = function() {
  // Shortcuts to Firebase SDK features.
  this.auth = firebase.auth();
  this.database = firebase.database();
  this.storage = firebase.storage();
  // Initiates Firebase auth and listen to auth state changes.
  this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
};
GoogleによるFirebaseの認証

main.jsのscripts/main.jsのFriendlyChat.prototype.signIn関数のとこも
// Signs-in Friendly Chat.
FriendlyChat.prototype.signIn = function() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  this.auth.signInWithPopup(provider);
};
FriendlyChat.prototype.signOutも
    // Sign out of Fire