Firebase.com是還算小有名氣的即時線上資料庫網路服務,它成立於2011年9月,強調提供使用者可以透過簡單程式介面,以前端的程式碼就可以存取到原本屬於後端的即時資料庫,等於是讓前端網頁設計師可以在網頁中只使用Javascript就可以完成幾乎所有的網站工作。意思是說,只要設定好firebase的帳號和介接介面,網頁設計者就可以不用擔心後端資料庫的問題,通通透過Javascript API存到Firebase.com中就行。

因為對於想要快速開發網站原型的前端工程師來說非常地方便,也因此該公司成立沒有久就吸引了非常多的使用者註冊,在2014年年底終於被Google買下,成為Google Cloud的一份子。

不過,在此篇文章中我們主要介紹的,仍然是當我們獨立申請此網站的服務時(不是在Google Cloud中),利用它所提供的Hosting主機代管服務(也是免費),我們可以在完全不需要額外申請遠端主機的情況下,直接利用Firebase的服務,快速開發HTML+Firebase資料庫的服務。先來看看操作的流程。

此這裡以Windows作業系統為例,如果是MacOS的話,其實方便很多,因為省去了一個安裝Git Bash的動作。假設是Windows作業系統的話,第一步是到git for windows去下載Git的安裝程式:

fb01

然後執行剛下載的程式開始安裝如下:

fb02

務必要確定有安裝Git Bash,如下所示:

fb03

依照以下的選項進行安裝:

fb04

還有以下的設定:

fb05

建議還是使用比較像Linux的第一個選項來得好:

fb06

安裝完Git Bash之後,再去安裝NodeJS:

fb07

下載之後,也是開始進行安裝:

fb08

一切依照預設值安裝即可,安裝完畢之後別忘了要重新啟動Windows,然後就進入Git Bash,安裝Firebase的Command Tools(npm install -g firebase-tools):

fb09

這時會看到被安裝了一大堆程式庫進去:

fb10

此時,還沒有Firebase帳號的人,當然要先去http://firebase.com申請一個:

fb11

由於firebase已是Google的一員,所以直接選擇透過Google帳號註冊即可,以下是在Google帳號中的授權畫面:

fb12

登入之後會幫我們產生一個範例應用程式,我們也可以透過CREATE NEW APP按鈕產生新的應用:

fb13

假設我們建立了兩個,如下:

fb14

回到剛剛的Git Bash介面中,使用firebase login來登入命令列功能:

fb15

這時候firebase會再一開啟瀏覽器要求登入授權:

fb16

在授權之後,我們就可以建立一個叫做firebase_apps的目錄(目錄名稱可任選),然後在該目錄中以firebase init為此目錄做部署到遠端主機空間的準備:

fb17

因為我們目前有兩個 App,所以在執行firebase init之後會詢問我們這個目錄是要使用哪一個App,假設我們選了hticket這個App,然後預設root在public底下,基本上本地端的部份就算是完成了。

fb18

接下來,要放在網站中的檔案只要放在public資料夾之下就可以了。在此例,我們在public底下建立一個index.html檔案:

fb19

index.html的檔案內容如上所示,先放一個基本的測試用HTML檔案。存檔之後,再鍵入firebase deploy部置指令,過一小段時間就可以看到上傳完成的訊息:

fb20

部署完成之後,就可以看到下方有提示網站的URL(在此例為https://hticket.firebaseapp.com),而資料庫的位置是https://hticket.firebaseio.com,我們只要在瀏覽器檢視該網址,就可以看到網頁執行的成果了:

fb21

此時,我們只要透過如Sublime Text, PSPad或是任何的文字編輯器編輯在public之下的檔案,然後再以firebase deploy指令上傳,就可以看到網站的更新了。

以上所有的操作通通免費,對於想要快速開發網站原型來測試HTML5+CSS3或是AngularJS連接資料庫的朋友,是非常方便的選擇。

(3269)

%d 位部落客按了讚: