Google Firebase

相關後台管理網址

Database

新增、修改

curl -X PUT -d '{"alanisawesome": {"name": "Alan Turing","birthday": "June 23, 1912"}}' https://fbtest-d047e.firebaseio.com/rest/securing-data/example.json

1	curl -X PUT -d '{"alanisawesome": {"name": "Alan Turing","birthday": "June 23, 1912"}}' https://fbtest-d047e.firebaseio.com/rest/securing-data/example.json

在 Firebase 的後台可以即時看到以下結果

使用相同的路徑給於不同的 value 就會直接更新值

使用 jQuery

How to send a PUT/DELETE request in jQuery?

    var Post = '{"alanisawesome": {"name": "Alan Turing","birthday": "June 23, 1912"}}';
    $.ajax({
        url: 'https://fbtest-d047e.firebaseio.com/rest/securing-data/example.json',
        type: 'PUT',
        data: Post,
        success: function(data) { }
    });

var Post = '{"alanisawesome": {"name": "Alan Turing","birthday": "June 23, 1912"}}';

$.ajax({

url: 'https://fbtest-d047e.firebaseio.com/rest/securing-data/example.json',

type: 'PUT',

data: Post,

success: function(data) { }

});

讀取

網頁前端

firebase.database().ref("/member/").limitToLast(3).on('child_added', function(data) {
    //console.log(data.val());
    var val = data.val();
    console.log(val.name);

    html = '<div class="message-container visible">' +
    '<div class="spacing"><div class="pic" style="background-image: url('+ val.ImageUrl +');"></div></div>' +
    '<div class="message">'+ val.message +'</div>' +
    '<div class="name">'+ val.name +'</div>' +
    '</div>';
    
    var MessageList = $('#message-filler');
    MessageList.append(html);
    $('#messages').scrollTop( MessageList.prop("scrollHeight") );
});

firebase.database().ref("/member/").limitToLast(3).on('child_added', function(data) {

//console.log(data.val());

var val = data.val();

console.log(val.name);

html = '<div class="message-container visible">' +

'<div class="spacing"><div class="pic" style="background-image: url('+ val.ImageUrl +');"></div></div>' +

'<div class="message">'+ val.message +'</div>' +

'<div class="name">'+ val.name +'</div>' +

'</div>';

var MessageList = $('#message-filler');

MessageList.append(html);

$('#messages').scrollTop( MessageList.prop("scrollHeight") );

});

使用 curl 指令

curl "https://fbtest-d047e.firebaseio.com/rest/securing-data/example.json"

1	curl "https://fbtest-d047e.firebaseio.com/rest/securing-data/example.json"

{"alanisawesome":{"birthday":"June 23, 1922","name":"Alan Turing"}}

1	{"alanisawesome":{"birthday":"June 23, 1922","name":"Alan Turing"}}

加上 ?print= 可以設定不同的輸出格式

curl 'https://fbtest-d047e.firebaseio.com/rest/securing-data/example.json?print=pretty'

1	curl 'https://fbtest-d047e.firebaseio.com/rest/securing-data/example.json?print=pretty'

{
  "alanisawesome" : {
    "birthday" : "June 23, 1922",
    "name" : "Alan Turing"
  }
}

{

"alanisawesome" : {

"birthday" : "June 23, 1922",

"name" : "Alan Turing"

}

刪除

API Reference

想要刪除 birthday 資料時，可以使用以下指令

curl -X DELETE https://fbtest-d047e.firebaseio.com/rest/securing-data/example/alanisawesome/birthday.json

1	curl -X DELETE https://fbtest-d047e.firebaseio.com/rest/securing-data/example/alanisawesome/birthday.json

Storage - 檔案儲存

開放全部使用者可

service firebase.storage {
  match /b/fbtest-d047e.appspot.com/o {
    match /{allPaths=**} {
      allow read, write: if true == true;
    }
  }
}

service firebase.storage {

match /b/fbtest-d047e.appspot.com/o {

match /{allPaths=**} {

allow read, write: if true == true;

}

最簡單的上傳範例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Learn how to use the Firebase platform on the Web">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Firebase</title>
</head>
<body>

<form id="image-form" action="#">
    <input id="mediaCapture" type="file" accept="image/*">

    <button type="button" onclick="ss()">aaa</button>
</form>

<!-- Firebase -->
<script src="js/firebase.js"></script>
<script>
    // Initialize Firebase
    var config = {
        apiKey: "AIzaSyCfV0A1Q-Ln-evzUScnnq_kLedOB0BAl7Q",
        authDomain: "fbtest-d047e.firebaseapp.com",
        databaseURL: "https://fbtest-d047e.firebaseio.com",
        storageBucket: "fbtest-d047e.appspot.com",
    };
    firebase.initializeApp(config);

    // Get a reference to the storage service, which is used to create references in your storage bucket
    function ss() {

        var storage = firebase.storage();

        var storageRef = firebase.storage().ref();

        var metadata = {
            contentType: 'image/jpeg',
        };

        var file = document.getElementById('mediaCapture').files[0];

        // Upload the file and metadata
        var uploadTask = storageRef.child('mountains.jpg').put(file, metadata);

        uploadTask.on('state_changed', function(snapshot){
            // Observe state change events such as progress, pause, and resume
            // See below for more detail
        }, function(error) {
            // Handle unsuccessful uploads
        }, function() {
            // Handle successful uploads on complete
            // For instance, get the download URL: https://firebasestorage.googleapis.com/...
            var downloadURL = uploadTask.snapshot.downloadURL;

            console.log(downloadURL);
        });
    }
</script>

</body>
</html>

<!doctype html>

<head>

<title>Firebase</title>

</head>

<body>

</form>

// Initialize Firebase

var config = {

apiKey: "AIzaSyCfV0A1Q-Ln-evzUScnnq_kLedOB0BAl7Q",

authDomain: "fbtest-d047e.firebaseapp.com",

databaseURL: "https://fbtest-d047e.firebaseio.com",

storageBucket: "fbtest-d047e.appspot.com",

};

firebase.initializeApp(config);

// Get a reference to the storage service, which is used to create references in your storage bucket

function ss() {

var storage = firebase.storage();

var storageRef = firebase.storage().ref();

var metadata = {

contentType: 'image/jpeg',

};

var file = document.getElementById('mediaCapture').files[0];

// Upload the file and metadata

var uploadTask = storageRef.child('mountains.jpg').put(file, metadata);

uploadTask.on('state_changed', function(snapshot){

// Observe state change events such as progress, pause, and resume

// See below for more detail

}, function(error) {

// Handle unsuccessful uploads

}, function() {

// Handle successful uploads on complete

// For instance, get the download URL: https://firebasestorage.googleapis.com/...

var downloadURL = uploadTask.snapshot.downloadURL;

console.log(downloadURL);

});

}

</script>

</body>

</html>

Google 使用者認證

function Login() {
    var provider = new firebase.auth.GoogleAuthProvider();
    //provider.addScope('https://www.googleapis.com/auth/plus.login');
    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.
        user = result.user;
        //console.log(user);

        if ( user['uid'] ) {
            $('#message-form').removeAttr('hidden');
            $('#image-form').removeAttr('hidden');
            $('#sign-out').removeAttr('hidden');
            $('#sign-in').attr('hidden', '');
        }

        // ... 
    });
}

function Login() {

var provider = new firebase.auth.GoogleAuthProvider();

//provider.addScope('https://www.googleapis.com/auth/plus.login');

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.

user = result.user;

//console.log(user);

if ( user['uid'] ) {

$('#message-form').removeAttr('hidden');

$('#image-form').removeAttr('hidden');

$('#sign-out').removeAttr('hidden');

$('#sign-in').attr('hidden', '');

}

// ...

});

}

Google Firebase 後端支援

Pricing

檔案存儲

Google Bucket

在範例的設定內，有一個 storageBucket 儲存空間的選項，並不是讓你輸入 Firebase 的路徑或資料夾名稱的，必須要到 Google Cloud Platform 的 Storge 內取得 Bucket 完整路徑後填入，例如

storageBucket: "test-chat-f15dd.appspot.com",

1	storageBucket: "test-chat-f15dd.appspot.com",

1,511 total views, 1 views today

Database

使用 jQuery

刪除

Storage - 檔案儲存

Google 使用者認證

Google Firebase 後端支援

檔案存儲

Related Post

發佈留言

Google Firebase

Database

使用 jQuery

刪除

Storage - 檔案儲存

Google 使用者認證

Google Firebase 後端支援

檔案存儲

Related Post

網頁的前、後端如何區分

PWA 漸進式網路應用程式 - 3. 桌面版瀏覽網頁通知

網頁前端 - 滑鼠點擊特效

發佈留言