April 24, 2019

firebase 作為後端的運用

例會分享主題


文 / 西打藍 Siddharam

前言


firebase 可以說是造福前端工程師的好工具。

它讓你可以匯入 json 格式的資料,並透過 get API 拿取,甚至能在 javascript 進行 query 的動作,firebase 也提供封裝好的程式讓工程師使用。

另外它也和 GitHub Page 一樣,提供定量的免費 hosting 服務,也跟 AWS S3 一樣提供靜態資源的儲存空間;其他還有帳號的權限管理、機械學習的嵌入應用、後端程式碼執行空間等,為後端服務提供相對容易的接口。

建立


首先進入到 firebase 頁面,點選「新增專案」,在進入畫面後,在選擇「新增應用程式」。它目前提供 iOS、Android、Web 三種應用程式的服務,點選後會看到一段 javascript 程式碼,將它複製貼在你的程式碼中,接著就可以使用它們的服務了。
firebase console

功能


從最容易使用的 storage 開始,點選「上傳檔案」完成後,就能看見檔案資料。storage 也提供網址使用,只需點選圖片,在點擊「檔案位置」,就能看到下載網址。

接著是 hosting,它共有兩步操作說明:安裝、佈署。

安裝:npm install -g firebase-tools
佈署-
   登入:firebase login
   啟動專案:firebase init
   佈署網站:firebase deploy

完成以後,就能看見你的程式碼已經上傳到「發布紀錄」中,當你上傳新的程式碼時,會看見不同時期上傳的不同版本紀錄,你可以手動將歷史紀錄刪除。

接著是 Database ,一開始以測試模式啟動,接著要手動更改使用 Realtime Database。完成後,你可以在資料中任意新增資料,如下圖:
Realtime Database

然後點選進「article」,複製上方網址如「https://xxx.firebaseio.com/article」,最後面再加上「.json」,就可以在瀏覽器上讀到檔案。如果發現讀不到檔案,就要去「規則」裡,將「read」改成「true」,就可以了。

這些規則都是可以自由設定,並以 json 格式撰寫。在「write」部分,可以透過 javascript 的方式在前端寫入。下方有 auth.uid 的設置,那是下一段要說明 authentication,它可以限制只有某些帳號才能進行讀寫動作。


{
  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
  "rules": {
     "member": {
        ".read": true,
        ".write": true
      },
     "feedback": {
        ".read": true,
        ".write": true
      },
     "counter": {
        ".read": true,
        ".write": true
      },
     "list": {
        ".read": true,
        ".write": true
      },
     "article": {
        ".read": true,
        ".write": "auth.uid == 'hl2J8rF6WRhNF3R73gVoWfJwgQe2' || auth.uid == '8KZPB9hnGXf9FW5Dk97Ac4EY1jB2'",
      }

  }
}



authentication,讓你的網站可以進行會員註冊、登入。

首先進入到登入方式,將常用的登入選項啟用,如電子郵件/密碼、Google、Facebook,如果正確啟用後,它會顯示為綠色的「已啟用」。

接著點選「使用者」,你除了可以手動新增使用者外,也能透過內建 function 建立新帳戶,新增後,你就能看見新使用者的登入方式,以及 UID 等資料。UID 就是上述規則中限制讀寫的 auth.uid。

另外,在範本中,也有電子郵件驗證、密碼重設、電子郵件變更、簡訊驗證可以使用,這是我製作的 範例網站,當中使用了 database、authentication、storage 的服務,有興趣可以參考。

應用方法


database:


// query

database.ref('article').orderByChild('skill').on('child_added', (snapshot) => {
    console.log(snapshot.val().rectangleUrl);
    // 取出 article 中,有 skill 的資料,並回傳 rectangleUrl 資料。
});



// query

  database.ref('article').orderByChild('city').equalTo('台北').on('child_added', (snapshot) => {
      console.log(snapshot.val());
      // 抓取 aticle 中,city value 為「台北」的全部資料。
  });   


// 資料寫入

firebase.database().ref('member/'+ uid).set({
    name: app.get('#inputName').value,
    mail : userLogin.email,
    phone : app.get('#inputPhone').value,
    photoUrl : userLogin.photoURL,
    creatTime: new Date().getTime(),
    uid : uid
});



authentication:


//建立帳戶

firebase.auth().createUserWithEmailAndPassword(userMail, userCode).then(detectLogin()).catch(function(error) {
    let errorCode = error.code; 
    let errorMsg = error.message; 
    // 錯訊
  });     


//登入帳戶

firebase.auth().signInWithEmailAndPassword(userLoginMail, userLoginCode).catch(function(error) {
    let errorCode = error.code;
    let errorMessage = error.message;
     // 錯訊
})


// 檢測用戶狀態

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // 有此用戶

    if(userLogin.emailVerified == true){
      // 用戶已經收到信件並確認

    }else{

        user.sendEmailVerification().then(function() {
          // 寄送確認信件
        })

        firebase.auth().signOut().then(function() {
          // 將用戶登出

        })
    }
  } else {
  }
});


// 更改密碼

firebase.auth().sendPasswordResetEmail(userLoginMail).then(function() {
    // 更改密碼確認信已寄送

  }, function(error) {
    // 錯訊

  });


// Google 登入

let provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().languageCode = 'pt';
app.log.letGmailLogin = function(){
    firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...

    }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
    });
}

storage:


// 上傳圖片至 storage,並取得 URL

    app.get('#mainUploadPic').addEventListener('change', function(){
        // 圖片儲存
        let getFile = this.files[0]
    },false);

    // 上傳圖片
    let storageRef = firebase.storage().ref();
    let uploadTask = storageRef.child('images/'+getFile.name).put(getFile);

    uploadTask.on('state_changed', (snapshot) => {
        // observe status:progress, pause, and resume
        // get upload status and display by number
        let progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        switch (snapshot.state) {
          case firebase.storage.TaskState.PAUSED: // or 'paused'
            break;
          case firebase.storage.TaskState.RUNNING: // or 'running'
            break;
        }
    }, function(error) {
    // 錯訊

    }, function() {
        // 上傳圖片到 storage 成功
        // 取得 URL: https://firebasestorage.googleapis.com/...

        let downloadURL = uploadTask.snapshot.downloadURL;
        let pathReference = storageRef.child('images/'+getFile.name);
        pathReference.getDownloadURL().then(function(url) {
          // 取得圖片 URL
          squareUrl = url;
        })
    });




閱讀量




聯絡與合作


訂閱電子報,領「我當前 10+ 以上收入源有哪些」一文。

有文字採訪、網站開發,或是諮詢需求,皆可至個人網站參考作品,並聯繫 IG

或是想分享心情、聊聊天、交朋友,可以來秘密通道找我唷。

Email: frank@siddharam.com