JavaScript
angular
Firebase
ハンズオン

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を使って状態管理を行う

デプロイ環境設定

番外