Angluar でチャットアプリ制作#001
前書き
皆さんお久しぶりです
前回はAngularの基本的なことをまとめました。
なので今回はAngularでチャットアプリを作ってみましょう!(錯乱)
イメージ
最終的にはこんな感じの画面になります。
機能概要
- グーグルログインを使用する
- テキスト入力エリアからチャットに送信する
- ルーム選択機能
- チャットに送信者の名前とルーム名時間を表示する
- チャットテキストを削除できる
でいきます。そこまでガチガチのチャットアプリではないです。
準備
いざコーディング
いよいよコーディング開始です！
まずは作業環境の構築です
適当なファイルを作成してそこのアドレスをコピーします。
次にコマンドプロンプトを開いて㏅コマンドでディレクトリを移動
そして、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はまだ学びの途中で拙い部分があるかと思いますが
どうか暖かい目で見ていただけると幸いです。
次はチャット吹き出しを作成していきます。
それでは皆様またお会いしましょう
ノシ
