連結 Firebase

完成這個教學後，你會做出一個網站和後台。

• 準備開始
• 啟用 Anonymous login
• 新增資料架構
• 上傳資料架構
• 串連 Firebase API
• 上傳網站

首先先到 Canner 註冊一個帳號並且建立一個新的專案。接著到 Firebase 創造一個新的 Firebase 專案。

接著到 Github clone firebase-demo 或是 下載 Canner firebase-demo 模板，這個模板裡面包涵在之後的教學會用到的檔案。

1. 安裝 Firebase tool

firebase-tools 是一個 Firebase 的 CLI 工具，可以讓您操控 Firebase 專案上的檔案、設定等等。

npm install -g firebase-tools

了解更多：https://github.com/firebase/firebase-tools

2. 安裝 @canner/cli

@canner/cli 可以用終端機去操作在 Canner 上服務的指令，包含登入、創建網站、上傳資料、上傳資料架構等功能。

@canner/cli 是一個 npm 的 package，請打開你的終端機並輸入以下指令即可安裝

npm install -g @canner/cli@1.1.1

這個指令會安裝 @canner/cli 到電腦，並新增一個全域的終端機指令 canner

3. 初始化專案

首先先登入 Canner，輸入以下指令：

canner login

依照指示輸入你的帳號密碼即可登入。

接著移動到 firebase-demo 的資料夾位置，然後輸入：

canner init

輸入完這個指令後，將會顯示你的帳號所擁有的所有專案名稱，接著選擇一個你此次的專案名稱。

需要啟用 anonymous login 讓您的網站可以直接讀取你的資料。

Canner 上的 schema 佔有很重要的地位，您的網站後台都是透過 schema 去宣告製作的，不論是 UI、編輯器架構、UI 設定都是透過 schema 去完成。

首先到 Firebase 專案的右上角 Project Overview 然後點擊 "Add Firebase to your web app" 並複製整個設定檔。

打開剛剛下載好的 firebase-demo 資料夾，接著你可以看到以下的程式碼在canner.schema.js裡，將設定檔貼到 Firebase configuration 的部分。

開啟 canner.schema.js，找到 Firebase 的設定檔改成你的 Firebase 設定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// setup the default firebase configuration
CannerTypes.endpoint('firebase', {
  // Firebase configuration, these data can be found in project overview in firebase
  apiKey: "API KEY",
  authDomain: "AUTH DOMAIN",
  databaseURL: "DATABASE URL",
  projectId: "PROJECT ID",
  storageBucket: "STORAGE BUCKET",
  messagingSenderId: "MESSAGING SENDER ID"
})

// declares type is string and the title is Title
var title = CannerTypes
              .string()
              .title('Title');

// declares the plugin type is string and the title is Content, display as a editor
var content = CannerTypes
              .string()
              .title('Content')
              .ui('editor');

// posts is an array, each post in it contains title and content
var posts = CannerTypes
              .array({title, content})
              .title('Posts');

module.exports = {posts};

Canner 是一個彈性度很高的資料後台應用，因此你可以依照當時的開發需求設定資料架構 - schema， Canner 就會依據你的設定產出相對應的編輯器。

因此這段程式碼就是在描述部落格後台的結構，在此簡單解說一下這四行程式碼的用處。

首先我們分別建立了部落格的標題（ title ）及內容（ content ）的資料。

• 第 2 行，設定預設的 Firebase database，用 CannerTypes.endpoint()。

• 第 13 行，新增了一個型別是string，欄位標題為 "標題" 的資料

• 第 18 行，新增了一個型別是string，欄位標題為 "內容" ，且編輯器外觀為editor的資料

• 第 24 行，我們將title和content放進一個陣列（ array ），表示這兩筆資料是可以不斷新增

• 第 28 行將這些設定輸出，module.exports是node.js中用來匯出模組的寫法， 以這個例子來說最後我們輸出的就是一個包含了posts的object。

看到這你可能還是會對canner.schema.js感到陌生，不過沒關係，你只要記得canner.schema.js是一個能幫助你快速產出資料結構以及編輯器的語法即可。

你可以在 CannerTypes 介紹看到詳細的解說。

要讓網頁上的資料跟儲存在 Firebase 上的資料是同步的，我們必須串接 Firebase 的 API 來達到取得和修改資料的動作。

現在請你用編輯器打開 firebase-demo 裡面的public/index.html 檔案

index.html

1
2
3
4
5
6
7
8
var config = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN",
  databaseURL: "DATABASE_URL",
  projectId: "PROJECT_ID",
  storageBucket: "STORAGE_BUCKET",
  messagingSenderId: "MESSAGING_SENDER_ID"
};

把這些 configure 的 key 換成剛剛在 Firebase 所複製的 key。

接著可以試著在自己的電腦打開這個網站，輸入：

firebase serve

接著在瀏覽器打開 http://localhost:5000 網址就可以看到我們的文章列表囉！

恭喜你！完成了簡易的部落格網站，這個部落格有完整的新增、修改、刪除部落格的功能。我們將用 Firebase 所提供的存放網站的功能，讓你的網站可以馬上上線！

設定好 canner.schema.js 後，下載 firebase 所提供的私密金鑰並將檔名更改成 [firebase-projectID].json 放置在 cert 資料夾中 （如果沒有自己創一個名叫 cert 的資料夾）。

接下來要做的就是利用 @canner/cli 將 schema 上傳到 Canner。

打開終端機，並輸入以下指令：

canner schema:deploy

查看 Canner CMS

上傳完成後，到 Canner 上去看此專案的專案總覽，就可以看到此專案的後台了！

你可以玩玩這個你剛完成的部落格編輯器，試著新增、修改資料，但別忘記每次更改完要記得儲存哦！

上傳初始資料

通常我們會希望我們的 CMS 有一些初始資料。這時候可以在資料夾中新增 canner.data.js，此範例中我們會新增一個文章。了解更多如何處理資料結構.

1
2
3
4
5
6
  module.exports = {
    "posts": [{
      "title": "Post 1",
      "content": "Canner CMS is <b>amazing</b>. You will love it!"
    }]
  };

輸入

  canner data:import

即可把此資料上傳至 Firebase 中。

用 Firebase CLI tools 選擇您的專案

  firebase init

把網站上傳到 Firebase

  firebase deploy

您的網站且擁有一個後台的網站已上線！