Firebase ハンズオン

  • Web チャット -

the 27st

MarkingCloud 2019-09-24

Profile

  • 荒井 泰貴
  • MarkingCloud のカメラ係
  • 普段は
    • iOS developer
  • 最近の出来事
    • Cloud Architect の認定資格を
      無事に更新できました!

2

これ

今日のゴール

  • Firebase で web チャットアプリを作る

  • Firebase ってどう使うの?
  • Firebase で何ができるの?

3

もくじ

  • Firebase とは?
  • ハンズオン
  • まとめ

4

Firebase とは?

5

Firebase とは

  • アプリ開発のためのクラウドサービス
  • mBaas (mobile Backend as a Service)
    • アプリ開発に必要な機能(DB, Storage, etc.)
    • サーバ側のプログラミングが不要
  • 2014年に Google が買収し、GCP の一部に
  • 無料枠が大きい

6

今回つかうのは

  • Firebase Hosting
    • 静的ホスティングサービス
  • Cloud Firestore
    • Realtime DB に代わる新しい DB。NoSQL
  • Firebase Authentication
    • カスタムユーザ認証

7

今回の構成の概要

8

Cloud Shell

ユーザ認証

デプロイ!

・コマンドを実行したり

・コードを書いたり

・ローカルで動作確認したり

Cloud Firestore

Firebase Hosting

データ保存

リアルタイム更新

Webアプリに

アクセス

Firebase

Authentication

操作

ハンズオン

さっそくやってみましょう!

9

01. 準備

  • 今日つかうソースコード一式のリポジトリを開きます。
  • “OPEN IN GOOGLE CLOUD SHELL” から Cloud Shell を開きます。

10

Cloud Shell と Code Editor

11

以降は、

コードエディタ

Cloud Shell

と呼びます。

他のファイルがあっても無視してOK!

02. Firebase プロジェクトの作成

  • Firebase コンソールを開き、「プロジェクトを追加」

12

02. Firebase プロジェクトの作成

  • 好きなプロジェクト名を入力して「続行」

13

プロジェクト ID

(あとで使うのでメモしておきます)

02. Firebase プロジェクトの作成

  • Google アナリティクスは無効にして作成

14

02. Firebase プロジェクトの作成

  • できました!

15

03. Firebase プロジェクトを紐付け

  • Cloud Shell で以下のコマンドを実行します。

16

cd ~/easy-chat

firebase login --no-localhost

03. Firebase プロジェクトを紐付け

  • プロジェクトを作成した Google アカウントと
    違うアカウントですでにログインされているときは、
    一度ログアウトしてから再度ログイン

17

firebase logout

firebase login --no-localhost

03. Firebase プロジェクトを紐付け

  • 次のコマンドで作成したプロジェクトを設定します。

18

firebase use <PROJECT_ID>

さっきメモしたプロジェクト ID

04. config を追加

  • プロジェクトの config を表示します。

19

04. config を追加

  • アプリ名を入力して「アプリを登録」

20

3, 4 は無視

04. config を追加

  • Firebase 初期化のコードだけコピーします。

21

③、④は何もせず

「次へ」

3, 4 は無視

https://firebase.google.com/docs/hosting/reserved-urls?hl=ja

04. config を追加

  • config を index.html にコピペします。
    • index.html: L97 ~ 102 の script タグ部分を置き換え

22

04. config を追加

  • config を login.html にコピペします。
    • login.html: L53 ~ 58 の script タグ部分を置き換え

23

05. Cloud Shell ローカルで動作確認

  • Cloud Shell で以下のコマンドを実行します。

24

firebase serve

05. Cloud Shell ローカルで動作確認

  • こんな画面が表示されます。

25

06. メッセージの送信処理

  • Cloud Shell 上での動きの確認をします。
    • まだ DB には接続していません。
  • コードエディタで、送信処理のコメントアウトを
    外します。
    • scripts/main.js: L87 ~ 90
  • 保存して画面をリロードすると反映されます。

26

07. Firestore の設定修正

  • メッセージを保存するため、Firestore の設定を修正します。

27

07. Firestore の設定修正

  • セキュリティルールは今日はとりあえずテストモード。

28

07. Firestore の設定修正

  • ロケーションを指定します。

29

07. Firestore の設定修正

  • 仮で表示するためのメッセージを Firestore に作成します。

30

07. Firestore の設定修正

  • 仮で表示するためのメッセージを Firestore に作成します。

31

07. Firestore の設定修正

  • こんな感じになります。

32

08. Firestore からメッセージ表示

  • Firestore から読み込み処理を追加します。
    • main.js: L35, L41, L63 ~ 70 のコメントアウトを外す

33

08. Firestore からメッセージ表示

  • 画面をリロードすると…

34

さっき Firestore に保存したメッセージが

表示されます!

09. Firestore へのメッセージ書き込み

  • Firestore への書き込み処理のため、
    • main.js: L93 ~ 106 のコメントアウトを外す
    • main.js: L87 ~ 90 をコメントアウトする

35

09. Firestore へのメッセージ書き込み

  • メッセージを書き込んでからリロードすると、書き込んだメッセージが表示されます。
  • コンソールで確認すると、Firestore にも書き込まれています。
  • 書き込みもリアルタイムで Firestore に反映されます。

36

10. 書き込みをリアルタイムに反映

  • リスナーの処理のコメントアウトを外します。
    • main.js: L44 ~ 53 のコメントアウトを外す

  • 不要になった処理をコメントアウトします。
    • main.js: L35 をコメントアウトする

37

10. 書き込みをリアルタイムに反映

  • メッセージを書き込むと画面に反映されます。
    • リロードは不要
    • change.type === “added” のときのみ表示
    • 設定次第で “deleted” とかも取れます

38

11. サイトを公開

  • Firebase Hosting にデプロイします。
  • 自動的に URL が振られ、どこからでもアクセス可能!

39

firebase deploy --only hosting

11. サイトを公開

  • Hosting URL: に表示されている URL にアクセスすると、チャットアプリが表示されます。
  • インターネットに公開されているので、他の端末からもアクセスできます!

40

時間があれば

オプション

41

12. ユーザ認証を追加

  • Firebase Authentication を有効化します。

42

12. ユーザ認証を追加

  • プロバイダから Google を有効化します。

43

12. ユーザ認証を追加

  • 認証を使うための設定をします。
    • main.js: L56 ~ 57 のコメントアウトを外す

44

12. ユーザ認証を追加

  • ユーザ画像をプロフィール画像に変更します。
    • main.js: L73 ~ 80 のコメントアウトを外す

45

12. ユーザ認証を追加

  • メッセージ送信時の認証チェックを追加します。
    • main.js: L109 ~ 122

46

12. ユーザ認証を追加

  • 不要になった処理をコメントアウトします。
    • main.js: L63 ~ 70 をコメントアウト
    • main.js: L93 ~ 106 をコメントアウト

47

12. ユーザ認証を追加

  • Cloud Shell で、もう一度 Firebase Hosting に
    デプロイします。

48

firebase deploy --only hosting

12. ユーザ認証を追加

  • ログイン画面が表示できるようになりました!

49

13. Progressive Web App に対応(オプション)

  • さらに時間に余裕のある人向けオプション
  • GitHub の develop/service-worker ブランチは PWA に対応しています。ぜひざっくり眺めてみてください。

50

まとめ

51

まとめ

  • Firebase を使うとこんな短時間でかんたんにサービスを公開することができます!
    • 普通に作ると環境構築込みで1週間くらいかかる
  • この他にも Cloud Functions や Cloud Storage など、便利な機能がたくさんあります。
  • ほかにも興味があったらぜひ聞いてください。

52

Firebase ハンズオン - Web チャット - - Google Slides