首先

现今，我们将使用最受关注的JavaScript框架之一Angular(9.xx)以及同样备受瞩目的BaaS（后端即服务）Firebase来进行聊天网页应用的实践。

如果您对「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

苹果操作系统：v10.15.5
Node：v12.18.0
np@m：v6.14.5
@angular/cli：v9.1.8
firebase-tools：v8.4.3

在项目中使用的库

Angular：v9.1.11
Firebase：v7.15.3
Bootstrap：v4.4.0
Moment.js：v2.26.0
ngrx：v9.2.0

代码库 (Có zì kù)

---

（截至2018年9月）https://github.com/Yamamoto0525/NgChat_bk2
（截至2017年6月）https://github.com/Yamamoto0525/NgChat_bk

---

创建应用的规格

• マルチデバイス対応

 

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

 

• 入力には認証が必要

 

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

 

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

话题

创建一个聊天输入界面

• Angularの環境構築（Angular CLIで構築）

 

• Angularでビュー（チャット画面）を作る

 

• AngularのngForでチャットコメントを実装する

 

• AngularのngIfとsubmitイベントでチャットコメントを実装する

 

AngularのPipeを使って、日付を変換する

Firebase的使用

• Firebaseの環境構築

 

• AngularのプロジェクトにFirebaseを導入する

 

Angular+Cloud FirestoreでCRUD(CREATE, READ, UPDATE, DELETE)を実装する

使用Angular构建层次结构

• AngularのNgModuleを使って、アプリの構成を管理する

 

• Angularのルーティング設定（基礎編）

 

AngularのRxJSを使ってデータの受け渡しをする

Angular+Firebase的认证设置

• Angular+Firebase Authenticationで認証機能を導入する

 

• Angularのルーティング設定（応用編）

 

Angular+Firebase ユーザー設計とデータの保護

使用Angular的ngrx进行状态管理

• Angularのngrxを使って状態管理を行う（理論編）

 

• Angularのngrxを使って状態管理を行う（実装編：初期設定～エフェクト設定）

 

Angularのngrxを使って状態管理を行う（実装編：エンティティ設定）

部署环境配置

• WEBアプリでFirebaseのデプロイ環境を構築する

 

AnglarのビルドとFirebaseのデプロイを連動させる

另外一个选项

Angular2の環境構築（Yoemanで構築）