firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ②

前置き

前回の続きです🙋‍♀️
【Nuxt.js】開発ブログ:firebaseでチャットアプリ①

ログイン機能をつけたり
ちょっとした
見た目の調整をしていきます♪

今回もあまり丁寧な解説はありません。
コードも綺麗ではないですが
参考になればと思います🎈🧸

参考:
スマホアプリ開発を加速する,Firebaseを使ってみよう 第10回[最終回] Firebaseの実践的なテクニックを使いこなそう
Firebase サーバ時間の取得


見た目の調整

前回はメッセージを配列で
横並びに表示しただけだったので
見た目の調整をしていきます✨👀

自分のメッセージがどれか
分かれば良いので
デザインは適当です🐥

変数の命名も分かりにくかったので
firebaseから取ってくるデータは
postsという変数にしました💡

自分(yossy)の投稿した物は
クラスバインディング
meというクラスをつけています🧸

基本的に
スタイリングをする要素は
全てクラス名をつけますが、
一旦タグで指定してます。


ログイン機能の実装

ベース作り

こちらもfirebaseで実装しています🍀
ログインフォームを追加して
Authenticationに予め登録した
自分のメールアドレスにログインします。
ログインしたメアドなら
メッセージにmeクラスをつけます。

今の段階だと
どのアカウントによる
メッセージか判別がつかないため

全てのメッセージに
meクラスがついています💡

⬇️ログインについては
 こちらを参考にしてください🌟
【Nuxt.js】firebase基礎編(Auth版):メールアドレスログインをできるようにしよう

ログイン情報保持のために
Vuexにしたいところですが
一旦index.vueで
全て行っています。


どのアカウントのメッセージか判別する

ログインした時に取得したメアドを
userIdというプロパティでsubmit📤
送信したuserId
現在ログイン中の
メールアドレス(user.email)が
一致すればOKですね⭕️🙆‍♀️

ログインしていない状態で
guestとして投稿した後、
ログインしてから再投稿してチェック✅

ゲストが複数いる場合でも
1人として扱われてしまいますが、
ログインして使う物なので
そこは深く追求しません。


タイムスタンプの追加

公式: TIMESTAMP

送信時に時刻保存

firebaseにpushした際に
時刻を保存してくれる仕組みがあります。
保存形式はUnixのミリ秒みたいですね。
ということでmethodssubmit
該当コードを追加✍️


表示はdayjs

⬇️インストールや
 基本的な使い方はこちら
【Nuxt.js】dayjs導入編:リアルタイムな日時を表示してみよう

Month,Dayと
Hour, minutesで表示。

ここまでの全体のコードはこちら。


まとめ

それらしくなってきました💫
次はstorageを使用して
スタンプ機能を入れたり、
Vuexに移行していきます。
見た目もチャット感を出したいです🤔💭

すっかり忘れていましたが
submitした後の
inputの中のテキストが邪魔なので
消しておきます😂笑

構成など何も考えず
とりあえず実装してきましたが、
今までの記事の組み合わせで
全て成り立っているので
意外とやりやすかったです😁💕

-firebase
-,

© 2021 aLiz Nuxt