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

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

お久しぶりです

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

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

1、テキストを入力

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

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

 

番外

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

★ルーム変更機能

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

 

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

テキストを入力

HTML

Tsファイル

HTMLからテキストを取得後

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

現在時刻の取得、

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

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

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

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

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

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

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

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

HTML

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

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

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

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

★その他機能

ルーム変更機能

HTML

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

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

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

チャット削除

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

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

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

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


あとがき

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

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

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

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

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

 

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

 

 

Angluar でチャットアプリ制作#001

前書き


皆さんお久しぶりです

前回はAngularの基本的なことをまとめました。

なので今回はAngularでチャットアプリを作ってみましょう!(錯乱)

イメージ

最終的にはこんな感じの画面になります。

機能概要

  1. グーグルログインを使用する
  2. テキスト入力エリアからチャットに送信する
  3. ルーム選択機能
  4. チャットに送信者の名前とルーム名時間を表示する
  5. チャットテキストを削除できる

でいきます。そこまでガチガチのチャットアプリではないです。

準備

angualr 14

ndoejs  16.15.1

npm  8.12.2

firebase

VScode 最新バージョン

です。firebaseはチャットテキストを保存するDBとして使用します。

いざコーディング

いよいよコーディング開始です!

まずは作業環境の構築です

適当なファイルを作成してそこのアドレスをコピーします。

次にコマンドプロンプトを開いてコマンドでディレクトリを移動

そして、ng new <アプリケーション名>

を入力してしばらく待ちます。紅茶でもコーヒーでも飲んで待ちます。

そこまでできたらVScodeでフォルダを開きましょうこれで環境構築は完了です。

 

では、componentを作成しましょう。

ng generate component <コンポーネント名>

コマンドプロンプトVScodeのターミナルから入力してcomponentを作成します。

このcomponentが今回使用する作業ファイルです。

(初期でcomponentが作成されているかと思いますが今回は新規に作成します。

単なる様式美ですのでそのまま書きたいという方は無視で結構です。)

 

ソースコード

HTMLのソースコードです。


これだけです。今回はそこまで画面を作りこんでいないのでHTML自体は短くて済みます。

firebaseの導入と初期設定は自分で調べてください。

本題

さて、やっと本題に入りましょうか。

始めは画面にテキストボックスとボタンを用意します

この画面でいうところの下の部分ですね。

そしてこのテキストエリアとボタンを画面下部に固定します。

下に固定するコードはCSSを使います。

.meintxt{
   
    width: 100%;
    // background-color: #89c7de;
    color: #fff;
    text-align: center;
    padding: 30px 0px;
    position: fixed;
    bottom: 0;
   
}

これで画面下部に固定します。


あとがき

ここまで読んでいただき誠にありがとうございます。

もし詰まっていたものがとれたなら幸いです。

Angularはまだ学びの途中で拙い部分があるかと思いますが

どうか暖かい目で見ていただけると幸いです。

次はチャット吹き出しを作成していきます。

それでは皆様またお会いしましょう

ノシ

 

新米プログラマーの備忘録#01Angular編


新米プログラマーの備忘録in Angular


新米プログラマーの備忘録へようこそ。

ここでは新米プログラマーの私が忘れないように、成長するために書き記していきます!

Angularてなんだろう?

AngularJSにはパフォーマンス面と機能の分かり易さについて多くの欠点があったため、AngularJSを構築した開発チームが1年かけて1からコードを書き直した[3]。一部の機能や名称は引き継がれているが、基本的に別のフレームワークである。

Angularはコンポーネントベースのアーキテクチャを採用している。すべてのAngularアプリケーションには、ルートコンポーネントと呼ばれる少なくとも1つのコンポーネントがある。各コンポーネントには、ビジネスロジックの処理を担当する関連クラスと、ビューレイヤを表すテンプレートがある。複数のコンポーネントを積み重ねてモジュールを作成することができ、各モジュールはそれ自体で機能単位を形成する。

https://ja.wikipedia.org/wiki/Angular

より

ん~わからん。

これで分かる人いたら教えてほしい。

さて、新米なりに頭を捻りに練って図に表してみた大体こんな感じらしい。

Angularの考え方

Angularはコンポーネントと呼ばれるHTMLテンプレートを組み合わせてページを作成できる!

ファイルを作成しよう!

開発環境構築は別の方の記事を見てくださいね。

さて、Angularの環境か構築できた前提で書きます。

まずはコマンドプロンプトを開いて構築のさいに作成したアンギュラのファイルに

cdコマンドで指定します。

例 cd C:\tmp 

*”tmp”の値は作成したファイル名に変更してください!

これで指定しました。

次は新規プロジェクトを作成しましょう!

今回は”angular-app”と名前を付けました。

なお、出ているコマンドを打ってもエラーを吐かれます。

こんな風に。(訳、newなんてコマンドは知らん)

しっかりと入力すると

こんなのが出てきます。

ここでは「y」と入力しましょう(Zは入力間違い)

エンターキーを押すと

こんな項目が出てきますキーボードの矢印キーで選択してエンターで決定です。

今回は"SCSS"を選択しましょう記述はCSSと同じなので安心してください。

すると…

めっちゃダウンロードして最後に"√"の文字が出れば完了です

指定したフォルダにAngularの開発ファイルができていますよ!

やっとコーディング

先程作成したフォルダをVScodeで開きましょう

おっと、VScode

”Angular Language Service”と"THML CSS Support"をダウンロードしましょう

これがないと大変ですよ!

フォルダを開くと

こうなっています。ファイルが多いですね

でも安心してください主に編集するのはsrcのappのcomponentとついたファイルだけです。

さて、まずはindex.htmlを開いてみましょう

headの所にいろいろ書いていますが今は置いておきましょう

さて、bodyの所に見慣れない文があります<app-root></app-root>

実はこれがAngularの書き方です。index.thmlを編集することはほぼなく、

componentファイルを編集してページを作っていくのです。

ではcomponentファイルはどうなっているのでしょうか

app.component.htmlを開くと

...何やら書いてありますね。

ですが、ここに書いてあるのは全部消してしまいましょう

消しても問題ないです。

もしプロジェクトフォルダが黄色になったり 「M」と表示される場合はgitのソース管理がNOになっているだけです放置しても大丈夫ですが不安な人はコミットしておきましょう。

消し後は写真のように入力します

見慣れない{{message}}がありますがAngularの書き方です

messageの中にある文字を表示するだけの簡単なものです

本体はtsファイルに書き込みます

implements OnInit

必ず必要ですこれがないと先程の{{message}}にHell-appが表示されません

message:string|undefined

messageという入れ物を作るものですstring|undefindは初期化子です

|undefind がないとコンパイルエラーになります

初期化なら何でもKOですがね

ngOnInit(): void {
      this.message='Hell-app';
  }

 これでmessageに”Hell-app”を格納します

これでapp.component.thmlに表示されるわけですね

もちろん{{}}の中には例えばcount()のような関数も入れ込めますよ

Angularの注意事項

Angularは非常に更新速度が速いです現在執筆中の2022/06/017日でも

ほんの9日前にアップデートによりAngular14になっています。

そのため参考書を使ってコードを書いてもエラーになることが、割と頻繁に起こります。なので現在私が見つけた書式を書き記します。

setInterval

AngularではsetIntrvalを止めるにはwindow.が必要になります

処理式は

window.setInterval(

() =>{任意の処理}

);

となり、停止させるにはclearIntrvalを使います。

なぜwindw.setIntrvalでしか止まらないのかというと

元々setIntrvalはsetIntrvalの文なのでAngularで使用すると返す値が変わってしまいます

なのでしっかりと期待する値を返すようにwindw.setIntrvalで指定して止めるのです。

10秒ピッタリゲームを作ってみよう!

先程のsetIntrvalを使ったミニゲーム簡単作れるので作ってみましょう

tsファイル


考え方としてはsetIntrvalを使って変数に1を100分の1秒ごとに加算して加算したものを100で割ると1秒が出てくるこれなら0以下の値も表現できる。

setIntrvalの中にif文があるのは5秒たったら非表示にするためこれがないとゲームとしては味気ない。

ファンクションをifで囲っているのはボタンを一つで制御するため

始めは”スタート!”と表示されてボタンが押されると”ストップ!”に..といった感じ

ストップボタンを押したときそれまで”0秒”と表示されていたカウンタに値を代入して正解を表示させる。

そのためだけにリセット機能とは別に書く。

thmlファイル

htmlは以外にもこれだけ単にtsファイルからの値を表示しているだけ。

SCSS

これを付けるとおしゃれになるdivのclassはなくてもいい。

そしてこれをこのまま書き写すとコンパイルエラーが起きる

何故?だって変数の定義書いてないから。

例えば

message: string | undefind;

とか

数字だったら

count: unmber =0 ;

とか

注意としては必ず初期化子を入れると。

これがないとコンパイルエラーになる。


あとがき

ここまで読んでいただき誠にありがとうございます。

新米プログラマーの備忘録#01いかがでしたでしょうか

もし詰まっていたものがとれたなら幸いです。

Angularはまだ学びの途中で拙い部分があるかと思いますが

どうか暖かい目で見ていただけると幸いです。

それでは、また会える日まで

さようなら

 

2022/06/17 金曜日。