Webアプリ作って見たい。簡単に。爆速で。
３ヶ月とかじゃなくて、週末だけでサクッとWebアプリを作って見たいなぁ、なにかいい方法ないかなぁと思って調べていたらこんな素敵な記事を見つけました。
1時間。 え、1時間！？ 爆速じゃないですか！
Firebase is 何と思って調べると、Googleが提供しているアプリ開発者向けサービスなのですね。
BaaS(Backend as a Service）という、モバイルアプリのバックエンド機能を提供するクラウドサービスです。
FirebaseでWebチャットを作ろう チュートリアルをやってみよう
もしかしたらチュートリアルとは違うのかもしれませんが、Firebaseの入門としてよく紹介されているようなのでチュートリアルと呼ぶ事にします。
英語の勉強にもなるかなと思い、上記チュートリアルを頑張って読みながらやって見ました。
いくつかハマった点もありますが、完全初心者の私でも合計2、3時間程度でWebチャットのデプロイまでできました。
今回使用したソースのリビジョンは以下です。
commit 376f1635caea29be91140fed3efd00e9cc956ded (HEAD -> master, origin/master, origin/HEAD)
Merge: 847e117 c38721e
Author: Nicolas Garnier <nivco.las@gmail.com>
Date: Fri Aug 17 11:58:52 2018 +0200
Merge pull request #305 from firebase/dpebot-repositorygardener
Auto-update dependencies.
初回コミット時から現在ではprototype記載がなくなっていたりと結構変更が入っているようですので、解説サイトはあくまで参考としつつ本家のチュートリアルを見ながら試すのが変にハマらなくて良いと思います。
ハマったところのメモ
基本的にチュートリアル通りで問題ないです。
10分以上ハマった箇所については以下にメモを残しております。
Firebaseに興味を持たれて、ちょっとチュートリアルをやってみるかという人の参考になれば嬉しいです。
Node.jsのバージョンがサポートされていない？
mba-no-MacBook-Air:web-start mba$ firebase serve
=== Serving from '/Users/mba/firebase_chat_sample/friendlychat-web/web-start'...
i functions: Preparing to emulate functions.
Warning: You're using Node.js v8.1.2 but Google Cloud Functions only supports v6.11.5.
おや、なんかNode.ｊｓのバージョンが気にくわないと言われていますね。
こちらを参考にダウングレードさせていただきました。
8. Read messages
Import JSONはどこにあるの？
In your project's Firebase console visit the Database section on the left navigation bar. On this page you will see the data that is currently stored in your Firebase Realtime Database.
In the overflow menu of the Database select Import JSON. Browse to the initial_messages.json file at the root of the repository, select it then click the Import button. This will replace any data currently in your database.
「Import JSON」をしたいのですがそのメニューが見つかりません。ググってみると「：」のところにあるよって記載されているのに、それが見つかりません。
あぁ！ Databeseで選択されているのが Cloud Firestore でした。チュートリアルでは Realtime Database を使うように記載されています。選択し直しましょう。
Importしたのにチャットログが表示されないんだけど
- Read messagesで記載されているコードをそのままコピーしてもDBの情報が画面に表示されません。 調べて見るとissueが出てました。
なるほど、DBのルール設定を変更すればいいのか。.readと.writeをtrueに変更してあげたら無事表示されました。
11. Show Notifications
チャットを更新しても通知が来ないんだけど？
書いてある実装を進めればチャットを更新するたびにNotificationが出ると思っていましたが、curlでPOSTリクエストが発行されるときにNotificationが出ました。
よくよく読んで見るとこのチュートリアルではそこの実装はしていないので、curlコマンドを投入したときに通知がでれば問題なく設定できていると思えば良いと思います。