Edited at

Angular+Firebaseでチャットアプリを作る


はじめに

今、最も注目されているJavaScriptフレームワークの1つであるAngular(6.xx)と、同様に注目度の高いBaaS(Backend as a service)であるFirebaseを使って、チャット用WEBアプリをハンズオン形式で書いていきます。

「Angular+Firebase」のリアルタイム更新に興味がある方はご一読ください。


(追記:2017/6)本記事は元々「Angular2+Rails5でチャットアプリを作る」と題していましたが、ここ半年ほどひたすら「Angular+Firebase」を触ってきたので、「Angular+Firebaseでチャットアプリを作る」として、現時点(2017年6月)での最新の内容に書き換えています。

(追記:2018/1)現時点(2018年1月)での最新の内容に書き換えています。

(追記:2018/9)現時点(2018年9月)での最新の内容に書き換えています。



対象読者


  • nodeについてある程度知識がある

  • Angularに興味がある

  • Firebaseに興味がある

  • サクサク動くチャットアプリを作りたい


開発環境

Mac OSX: v10.13.4

Node: v10.10.0

@angular/cli: v6.2.1

firebase-tools: v4.2.1


プロジェクトで使用するライブラリ

Angiular: v6.1.0

firebase: v5.5.0

Bootstrap: v4.0.0

Moment.js: v2.22.2

ngrx: v6.1.0


レポジトリ

https://github.com/Yamamoto0525/NgChat


(2017/6時点)https://github.com/Yamamoto0525/NgChat_bk



作成するアプリの仕様


  • マルチデバイス対応

  • 自分と第三者とでチャットを行う

  • 入力には認証が必要

  • チャット内容をリアルタイム(更新などを行わず)に、他の端末に反映

  • ユーザーはコメントの作成、読み込み、更新、削除(CRUD)ができる


トピック


チャットの入力画面を作成


Firebaseの導入


Angularの階層構造構築


Angular+Firebaseの認証設定


Angularのngrxを使って状態管理を行う


デプロイ環境設定


番外