BETA

Angular6+firebaseでチャットアプリを作ってみた

投稿日:2018-10-17
最終更新:2018-10-24

はじめに

Qrunch初投稿です。
Webエンジニアになっていながら、jQueryとほんの少しだけ趣味でAngularJSを使っただけという状態でした。
なので、知識のアップデートがてらAngular 6でこんなものを作ってみました。

レポジトリ

使用者を友達だけに限定したいので、サンプルはありません。ごめんなさい。
作成したプロジェクトのソース全文を、以下のレポジトリに展開しています。
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

使用したライブラリ

  • @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でチャットアプリを作る」に、チャットアプリ作成の手順が既に記載されています。
ですので、そこには載っていないけれども今回実装した以下の点に絞って書こうと思います。

参考文献

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@roottoolの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう