LINEみたいな一対一Webアプリ作成 〜2〜

ここからはソースコード関係!

ついに機能を実装。

 

ユーザーのサインイン機能

 

Filebaseの認証の初期化

scripts/main.jsの

FriendlyChat.prototype.initFirebase

 

GoogleによるFirebaseの認証

scripts/main.jsの

FrendlyChat.prototype.signIn

FrendlyChat.prototype.signOut

FrendlyChat.prototype.onAuthStateChanged

FrendlyChat.prototype.checkSignedInWithMessage 

 

メッセージを読む

FireBaseコンソールのDatabaseセッションをクリック

initial_messages.jsonをインポートする。

 

メッセージを同期

scripts/main.jsの

FriendlyChat.prototype.loadMessages

 

データベースセキュリティルール

 Firebaseコンソール画面で設定。

 

メッセージの送信

main.jsの

FriendlyChat.prototype.saveMessage

 

画像送信

 

Firebaseのストレージに画像を保存

 main.jsの

FriendlyChat.prototype.saveImageMessage

 

画像をFirebaseのストレージから表示する

main.jsの

FriendlyChat.prototype.setImageUrl

 

Firebaseのホスティングにアプリをデプロイする 

firebase.json

 

設定としてディレクトリ名がpublicとなっていることから

web-startディレクトリをコピーしてpublicディレクトリ生成する。

firebase deploy

 

 デプロイするときはキャッシュを毎回削除しないとダメです。