Help us understand the problem. What is going on with this article?

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

はじめに

今、最も注目されている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

レポジトリ

https://github.com/Yamamoto0525/NgChat


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


作成するアプリの仕様

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

トピック

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

Firebaseの導入

Angularの階層構造構築

Angular+Firebaseの認証設定

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

デプロイ環境設定

番外

Yamamoto0525
6年間出版社でWEBディレクターとして経験を積んだのち、フリーランスとして活動していました。2017年に株式会社ShareDanを立ち上げ、自社サービスの開発、WEB制作、WEBコンサルティングを行っています。
https://www.sharedan.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away