Angular でチャットアプリ制作#002

Angularでチャットアプリ制作＃002

お久しぶりです

Angularでチャットアプリ制作内部構造について詳しく書いていきます。

チャットアプリの流れから

１、テキストを入力

２、テキストをファイアベースに送信

３、ファイアベースからテキストと書き込んだユーザ、時刻を取得
４、３で取得した内容をルームチャット内に表示

番外

★タイムラインに表示されたチャットを削除できる機能

★ルーム変更機能

★１で入力されたテキストが空白文字や１文字未満でないかのチェック

では番号順にソースコード見ていきます。

テキストを入力

HTML

Tsファイル

HTMLからテキストを取得後

１文字未満でないかの確認を挟んで

現在時刻の取得、

取得した時刻を正規表現を使って「/」を「x」に変換

（「/」が入っているとファイヤーベースで階層扱いになるみたいです。）

ログインユーザをグーグルのAPIを使って取得

今回はコメントアウトしていますが、ユーザ名以外にもいろいろなデータを取得できるようですね。

テキストをファイアベースに送信

取得したデータを組み立ててファイアベースへ送信

idを自動採番にしていると入力順ではなく、データベースに入っている順に表示されてしまいます。
そのため送信時にidを指定してあげます。

ファイアベースからテキストと書き込んだユーザ、時刻を取得

HTML

リストにngForを指定して取得したレコード文表示する。
TSファイル

ルーム機能の初期設定、THMLのroomsに入る。

後のitem.userなどはファイアベースと同じカラム名にして表示する。

存在しないカラム名を指定すると何も表示されない。

★その他機能

ルーム変更機能

ＨＴＭＬ

ルームを変更するときに使う。

内部処理としてはファイアベース内で参照しているデータベースを変更している。

今回はルーム作成機能は見送りました。

チャット削除

間違って送信してしまったときのチャットを削除する機能。

これだけ、フロントエンドからファイアベースに削除命令を送っているだけ。

チャットを削除したとき、ポップアウトで”コメントを削除しました”と表示される。

今回はチャット編集機能は見送りました。

---

あとがき

以上が制作したチャットアプリの概要です。

制作期間は２週間とちょっとでした。

初めての制作と言こともあり、実装したかった機能を実装できなかったりしましたが

angualrとファイヤーベースの基礎なにより、開発の基礎を学べたことが一番の収穫です。

次に個人で制作するときは今回のことを活かした成果物を作りたいです。

2022年10月3日　新米プログラマーの備忘録