Firebaseでチャットアプリをつくってみた

技術ネタ
この記事は約3分で読めます。

こんばんわ、hisayukiです。

先日のブログで書きましたが、実際にGoogle Codelabを試してみました。
今日は実際にFirebaseのサンプルを作ってみたのでそちらの内容を書いていきたいと思います。

スポンサーリンク

なぜFirebase?

最近よく聞くのですが、実際どういうものなのか分かってない。
そもそもBaaSってなに?って感じだったので、気にはなってました。

決めてはQiitaのこの記事ですね、ここ見てFirestoreが面白そうって思ったからです。

404 Not Found - Qiita - Qiita

手順とかはQiita

これ悩みどころなんですが、手順や環境はQiitaに書くことにしました。
記事のボリュームは減るんですが、Qiitaのが見やすいかなと。

あと、画像を大量に使ったのでQiitaさんに画像の容量を持っておいてもらおうと・・・w

【Firebase】Firebaseのチュートリアルでチャットアプリを作ってみた【ホスティング編】 - Qiita
Google Codelabs チュートリアル 個人的にAngularでやりたかったので、こちらのチュートリアルを選定しました。 Cloud Functions for Firebase (Angular) Git cl...

なので、ブログではフィードバック的な感じにします。

感想

結構大変でした/(^o^)\

問題点としては・・・・

Githubのソースはありがたい・・・・
チュートリアルに手順があるのもありがたい・・・・

だが、古い!!!

チュートリアルと実際のコンソールのギャップで結構つまづきました(;´∀`)

この辺AWSにも言えるんですが、コンソール画面からの操作手順は画像だと何年か経つとUIが変わっちゃってたりするんですよね💦
なのでCLIはやっぱ正義だなって感じます・・・w

Angularも6だし、Typescriptも2.x系。
これサンプル作り直したら、使えるようになってる仕組みとか増えるんだろうなーって思って触ってました。

詰まったところ

Storageの作成

今回のチュートリアルではStorageのrulesを読み込ませるところがあるのですが、読み込みタイミングでリージョンが指定されていないとエラーになります。

  • コンソール画面からのFirebaseのプロジェクト作成をするとリージョン指定する項目はない。
  • CLIからやっても指定できるタイミングがない。
  • firebase initでrulesファイル作るタイミングで既に指定されてないとコケる

現状は新規プロジェクトを作成したタイミングで、コンソール画面からやるしかなさそう・・・💦
なんか、ここはちょっと惜しいなぁって思いました。

まぁ、他の部分が優れてるとちょっとしたところが目立ちますね・・・・w

未解決部分

https://YOUR_PROJECT_ID.web.comはうまくいくのに、
https://YOUR_PROJECT_ID.firebaseapp.comはうまくいかない問題・・・w

正確にはアクセスは出来る、Authenticationもうまくいく、だけどメッセージ送信がうまく行かない。
おそらくDBへのアクセスがうまく行ってない。

ここはまた別途検証ですね。

まとめ

結果的には学べたのはよかったです。
まぁ、無料分で出来るところまでしか検証はしてないですが・・・

特にAuthenticationRealtimeDatabaseがこんな簡単に使えるってところは感動しました。
作るものによりますが、これは本当にバックエンドを全部任せても小規模アプリはいけるんじゃね?って思いましたね。

全体通して詰まったなぁって感じたのは1箇所。
時間はかかりましたが、一度設定してしまえば大丈夫なのでもう詰まることはないです。

最後に

このサンプルはRealtimeDatabaseだったので、本来やりたかったFirestoreができてないw
今度はFirestoreのあるサンプルやりますw

コメント