我用Angular6+Firebase尝试创建了一个聊天应用

2 年 ago
宇, 华
1 minute

首先

这是我的Qiita首次投稿。
尽管我是一名Web工程师，但我只是在业余时间稍微使用了一点点AngularJS。
所以，为了更新知识，我用Angular 6做了这个东西。

我想用Angular6 + Bootstrap4 + Firebase创建一个聊天应用程序，并沉浸其中，所以这是我的首次投稿。

仓库

由于我只想限制使用者为朋友，所以没有提供样例。抱歉。
我已经将所创建项目的完整源代码转移到以下仓库中：
https://github.com/roottool/OrgaSound

所制作应用的规格

    • レスポンシブデザインによるマルチデバイス対応

 

    • チャットルームへの入室は認証を必要とする

 

    • ユーザーはメッセージの発信のみを可能とする

 

    • チャットメッセージはリアルタイムで他の端末に反映される

 

    音声ファイル名をメッセージとして発信すると、チャットルーム内にいる全員に対してファイルを再生する

这个Web应用是在Angular 4的基础上创建的BaseChat，现在被重新制作为Angular 6版本。
请参考参考文献中作者解说的Youtube视频链接，希望您能观看（注意视频是用英语讲解的）。

开发环境

    • Windows10 Pro 64bit

 

    • Visual Studio Code

 

    • Node.js：v8.12.0

 

    • @angular/cli：v6.2.2

 

    firebase-tools：v5.0.1

使用过的库（ guò de kù）

    • @angular/material：v6.4.7

 

    • @angular/cdk：v6.4.7

 

    • @angular/animations：v6.1.9

 

    • bootstrap：v4.1.3

 

    • firebase：v5.5.0

 

    angularfire2：v5.0.1

话题

在参考文献中提到的”使用Angular+Firebase创建聊天应用程序”已经包含了创建聊天应用程序的步骤。
因此，在这里我会专注于本次实现中未包含在其中但我想要介绍的以下内容。

    • Angular Materialのsidenavを実装

 

    firebase storageから音声ファイルをダウンロードして再生

参考资料

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

 

    • Angular Firebase Chat Tutorial – Part 1

 

    Angular Material – Get started
bannerAds