Firebase 是一個(gè)后端服務(wù)，讓開發(fā)者能快速部署應(yīng)用程序。Firebase的一個(gè)最終要的功能是提供一個(gè)實(shí)時(shí)的數(shù)據(jù)庫。隨著現(xiàn)代web和移動(dòng)端的程序轉(zhuǎn)移到客戶端，后端服務(wù)器習(xí)慣提供Model, View, and Controller 功能。這次的博客就講解如何部署一個(gè)聊天應(yīng)用程序。

步驟一：創(chuàng)建一個(gè)Google Cloud Project

步驟二：在firebase的頁面加入剛剛創(chuàng)建好的Google Cloud Project
Firebase 的 console: 點(diǎn)擊這里


添加好Google Cloud Project 之后，點(diǎn)擊Continue:

步驟三：應(yīng)用程序的建立
許多網(wǎng)頁的應(yīng)用程序都需要后臺(tái)來支持。Firebase支持mobile platforms and web。但是，這次主要講解網(wǎng)頁的應(yīng)用程序。

步驟四：創(chuàng)建授權(quán)登錄：


出于安全考慮，Firebase將對(duì)其資源的訪問限制在特定的域。會(huì)在Cloud Shell 測(cè)試這次的應(yīng)用程序。為了能訪問，需要將它添加到授權(quán)域列表中。

步驟五：數(shù)據(jù)庫的建立

步驟六：storage 的建立
Firebase自動(dòng)創(chuàng)建好storage。

步驟七：CLI的建立

在Cloud Shell 里寫入以下的命令：

git clone https://github.com/firebase/codelab-friendlychat-web# 使用npm來安裝Firebase command-line interface npm -g install firebase-tools# 驗(yàn)證CLI是否安裝正確 firebase --version# 授權(quán)讓你installation以至可以deploy resource on your project # 重新授權(quán) firebase logout# 獲取OAuth token firebase login --no-localhostcd codelab-friendlychat-web/web-startfirebase use --add

步驟八：測(cè)試應(yīng)用程序

firebase serve --only hosting

步驟九：在代碼里添加authentication
在main.js文件里添加這幾段代碼：

# Sign into Firebase using popup auth & Google as the identity provider. var provider = new firebase.auth.GoogleAuthProvider(); firebase.auth().signInWithPopup(provider); // Sign out of Firebase. firebase.auth().signOut();

步驟十：更新UI
當(dāng)用戶改變authentication state，我們就得更新UI.

加上這段代碼

// Listen to auth state changes.firebase.auth().onAuthStateChanged(authStateObserver);

獲取用戶的頭像：

return firebase.auth().currentUser.photoURL || '/images/profile_placeholder.png';

獲取用戶的名字：

return firebase.auth().currentUser.displayName;

用戶沒有登錄就發(fā)送消息，程序返回錯(cuò)誤信息

return !!firebase.auth().currentUser;

步驟十一：測(cè)試程序授權(quán)
運(yùn)行命令：

firebase serve --only hosting

當(dāng)用戶沒有授權(quán)登錄，就發(fā)送消息，就會(huì)出現(xiàn)這個(gè)提示：

步驟十二：實(shí)現(xiàn)消息發(fā)送

// Add a new message entry to the database. return firebase.firestore().collection('messages').add({name: getUserName(),text: messageText,profilePicUrl: getProfilePicUrl(),timestamp: firebase.firestore.FieldValue.serverTimestamp()}).catch(function(error) {console.error('Error writing new message to database', error);}); // Create the query to load the last 12 messages and listen for new ones.var query = firebase.firestore().collection('messages').orderBy('timestamp', 'desc').limit(12);// Start listening to the query.query.onSnapshot(function(snapshot) {snapshot.docChanges().forEach(function(change) {if (change.type === 'removed') {deleteMessage(change.doc.id);} else {var message = change.doc.data();displayMessage(change.doc.id, message.timestamp, message.name,message.text, message.profilePicUrl, message.imageUrl);}});});

步驟十三：測(cè)試發(fā)送信息
運(yùn)行命令：

firebase serve --only hosting

回到Firebase, 就可以看到信息已經(jīng)存到數(shù)據(jù)庫里

步驟十四：手動(dòng)添加信息



應(yīng)用程序就能立即顯示最新的信息：

步驟十五：添加圖像信息

firebase.firestore().collection('messages').add({name: getUserName(),imageUrl: LOADING_IMAGE_URL,profilePicUrl: getProfilePicUrl(),timestamp: firebase.firestore.FieldValue.serverTimestamp()}).then(function(messageRef) {var filePath = firebase.auth().currentUser.uid + '/' + messageRef.id + '/' + file.name;return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {return fileSnapshot.ref.getDownloadURL().then((url) => {return messageRef.update({imageUrl: url,storageUri: fileSnapshot.metadata.fullPath});});});}).catch(function(error) {console.error('There was an error uploading a file to Cloud Storage:', error);});

步驟十六：測(cè)試圖片信息

數(shù)據(jù)庫里很快更新：

步驟十七：Deploy application

firebase deploy --except functions

點(diǎn)擊URL, 進(jìn)入程序：

步驟十八：刪除應(yīng)用程序
點(diǎn)擊“Project settings”



這樣連在Google Cloud Console里的Project也都刪除了。

---

既然已經(jīng)看到這了，就麻煩點(diǎn)個(gè)贊或者關(guān)注或者留言再走唄~~
謝謝~ ~

總結(jié)

以上是生活随笔為你收集整理的Google Cloud + Firebase 讲解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。