LoginSignup
197

More than 3 years have passed since last update.

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

Last updated at Posted at 2016-09-24

はじめに

今、最も注目されているJavaScriptフレームワークの1つであるAngular(9.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月)での最新の内容に書き換えています。
(追記:2020/6)現時点(2020年6月)での最新の内容に書き換えています。
(追記:2020/8)最後の記事を投稿しました。本連載は以上で終了です。


対象読者

  • nodeについてある程度知識がある
  • Angularに興味がある
  • Firebaseに興味がある
  • サクサク動くチャットアプリを作りたい

開発環境

Mac OSX: v10.15.5
Node: v12.18.0
np@m: v6.14.5
@angular/cli: v9.1.8
firebase-tools: v8.4.3

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

Angiular: v9.1.11
firebase: v7.15.3
Bootstrap: v4.4.0
Moment.js: v2.26.0
ngrx: v9.2.0

レポジトリ


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


作成するアプリの仕様

  • マルチデバイス対応
  • 自分と第三者とでチャットを行う
  • 入力には認証が必要
  • チャット内容をリアルタイム(更新などを行わず)に、他の端末に反映
  • ユーザーはコメントの作成、読み込み、更新、削除(CRUD)ができる

トピック

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

Firebaseの導入

Angularの階層構造構築

Angular+Firebaseの認証設定

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

デプロイ環境設定

番外

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
197