運用 Firebase, 實做一個會員管理的 iOS App-1, 建立帳號

說好的要介紹 iOS App, 現在又為什麼需要學習 Firebase 呢? 請看影像檔.

所有社群網站, 購物網站, 銀行網頁…, 只要是牽扯到個資的 App, 都會需要用戶登錄帳號, 掛上資料庫, 撰寫伺服器端(Backend, 後端)管理程式,管理註冊,登入,密碼,資料存取等動作.
學習運用這些後端工具, 像是 PHP,以及 MySql 資料庫等等, 那也是非常龐大的知識體系
. 假設我們的學習重點在撰寫 App, 勢必難以兼顧. 這時候, Firebase 橫空出世(2012.4), 打著 MBaaS(Mobile Backend as a Service)的旗號, 讓前端App工程師不需要煩惱後端的工作. 更酷的是, Google 在 2014.10 收購了 Firebase, 前後只經過了2年半!

前言: 在 Firebase 規劃帳號管理的初步認識

1. Firebase 作為一個第三方函式庫供應商,提供函式庫,程式設計師透過 CocoaPods 運作,把需要用的函式庫載入到指定 iOS Project 的實體資料夾, 及 Xcode 開發環境, 程式員改用這個新的開發環境來開發 App 應用程式.
2. 我們可以在業界看到類似這樣的產業分工. 以單晶片控制器來說, 意法半導體(ST)出產了 Cortex M4 單晶片, 而且提供了 API 給工程師設計應用程式. 工程師若要升級功能,給它加上一個 RTOS(Real-Time OS), 就從 FreeRTOS 抓來函式庫, 開發具有 RTOS 功能的應用程式. 再來, 工程師好 Compiler 取用 RTOS 函式庫的路徑, 落實 Compile 程序, 這個過程稱之為”移植“. 其實, 原理是相同的. 不過,在這個例子的移植過程中, 需要人為去搬動函式庫檔案資料夾; 但是,在 App 環境, 已經有 CocoaPods 工具讓過程可以程式化運作.
3. 依照上述程序,要實作一個帳號管理系統,估計花20分鐘吧, 同學就可以建立一個簡單的 App, 它可以上傳個人資料到 Firebase 的資料庫, 也可以在 Firebase 的後台做資料管理, 非常神奇! 如果不用 Firebase, 同學若要是在通盤暸解 PHP+MySql 的程式語言之後, 實作一個可以用的資料庫, 可得要先進修專門課程, 估計30Hrs跑不掉.還有,需要再找一個 Server 空間來建立資料庫,有夠頭大.
4.  如果同學的目的是學會實作一個練習用的App,而且需要雲端資料庫服務, Firebase 相信是首要選擇, 因為 Firebase 還提供雲端硬碟儲存空間, 一定用量以下免費. 有了它,App 設計師就不用傷腦筋哪裡去找人搞後端;
5. But, 假設要在商業上應用,而且顧慮到資訊安全, 那就另當別論了, 有可能選擇自己架設一個 Server. 試想, 當您的事業做到像 Facebook 一般大, 當然就需要自己的資料庫啦, 哈哈!

從這裡開始

A. 新建一個 App Project, 取得 Bundle identifier.

這個 Bundle identifier 有如這個 iOS Project 的身份證, 等一下要在 Firebase 開一個 Project, 填入這個 Bundle identifier, Firebase 就會綁定這個 iOS Project.

View post on imgur.com

View post on imgur.com

記下這個 Bundle identifier!

 

Configure the initial development environment

B. 建立 App 的 UI 介面

這個 UI 看起來是是不是很眼熟呢? 本篇的重點在於會員管理 App, 至於 UI 的實作少作著墨, 就請同學照圖描一個, 不要差太多就好! 呵呵!

Create an UI for Membership Management App

C. 切換到 Firebase. 把 Apple Project 關聯到 Firebase.

Firebase 已經被 Google 收購, 同學可以連上官方網站, 鍵入 gmail 帳號進入.

Login Firebase Website


Firebase 會引導同學新建一個 Project.

Create a Firebase Project to relate my App Project

Register a project in Firebase

Firebase 可以支援 iOS App, Android App, 還有 HTML 應用程式.  在這裡請點 iOS App.

Select iOS App service in Firebase

Correlated by “Bundle identifier”

需要把 GoogleService-info.plist 拖曳到 XcodeProject Navigator 欄位放好.

Download Firebase API key and insert to iOS App project

 

make a copy

到了這裡, 同學們已經設定好 iOS Project 連接上 Firebase 的工作環境, 接下來要載入 Firebase 提供的函式庫.

D. 使用 CocoaPods

需要在終端機模式底下執行指令, 把函式庫導入到 iOS Project 作業環境, .

Apply CocoaPods to get Firebase Service into iOS App

在進行下一步之前, 同學可以參考這裡, 載入 CocoaPods 管理程式. 檔案體積有點大(>3GB), 第一次下載會花一些時間. 成功之後, 在終端機模式, 切換到 App Project 所在的路徑. 可以用的方法是用滑鼠左鍵選中 “Finder“中的路徑然後拖曳到終端機畫面,如下圖.

Operations of Podfile-1

在終端機模式執行 CocoaPods 命令 “pod init“. 創建一個 Podfile, 然後用 nano 指令跳進編輯器.

Operations of Podfile-2

把指定資料庫’Firebase/Core‘載入到 iOS Project. 修改 PodFile 之後保存, 跳出編輯器.

Operations of Podfile-3

執行加載函式庫 by “pod install“. 在檔案管理員資料夾裡面新增加了函式庫(Pods)及已經關聯資料庫的 AgogoGram.xcworkspace. 從現在起, 必須轉而在這個環境下編輯及編譯程式碼.

5 Pods are installed

從 Finder 上可以看到資料庫和新的 Project 檔  AgogoGram.xcworkspace 實體檔案已經被新增到iOS Project 路徑底下.

Operations of Podfile-5


可以看到,在 Xcode 左側的 Project Navigator 裡頭, 原先創建 App 的環境有被保留,而且已經關聯上需要的 Firebase 程式庫. 以後如果要新增加功能, 也是以同樣的方式關聯需要的程式庫進來iOS Project.

Firebase Service has been included iOS App project

Compile 一次,驗證 Project 到目前為止是正常的.

View post on imgur.com

E. 編輯 App

從導入函示庫的最後步驟,同學可以看到接下來需要在iOS Project 程式碼裡面新增2條以啟用 Firebase 功能.

Edit codes in App to load the Firebase Service

新增程式碼檔案SignInViewController.swift 關聯到 UI 頁面, 並且新增元件變數關聯到 UI 元件.

 

Process the UI Components

同學可以參考 Firebase 網頁自帶的使用說明文件,看程式碼要怎麼寫.

Get guidance from Firebase Docs

需要比照導入 ‘Firebase/Core‘ 的程序, 導入 ‘Firebase/Auth‘ 函式庫, 再建立登錄帳號的程式碼.

View post on imgur.com

 

Firebase Docs: Sign in existing users

叫用 Firenase.Auth().signIn(), 可以查詢登入是不是成功. 請見以下程式碼.

FIRAuth.auth().signIn(withEmail:password:) works

F.  在 Firebase 的資料庫建立用戶, 讓 App 讀取

在後台資料庫建立用戶資料, 這裡要進入後台模式(Console).

Enter Firebase Console

 

Find the newly-built Project

 

Apply Authentication Tools

Firebase 支援從 Google, Facebook, Tweeter,GitHub ….帳號一鍵登錄的功能, 現在開通郵箱帳號登入.

 

To access Firebase database by registration of email address with password

 

Backend operation: To add an User

 

Registered user with email address and password


現在,資料庫有一筆用戶資料.

Registered on Backend Database in Firebase

在 Xcode 環境裡 Compile, 測試 App 可以抓到 Firebase 的用戶資料, 登入成功了!!

 

Successfully Login through iOS App

G. 待完成事項

1. 本篇說明管理者在後台註冊,用戶在前台查詢的過程. 用戶可以從前台註冊新用戶嗎….
2. 可以在登入 App 成功之後, 跳轉到歡迎頁面嗎?
3. 如何上傳資料到 Firebase? 需要哪些函式庫?
4. 在中國大陸,可以使用哪些和 Firebase 功能相當的工具開發 App?

H. 參考資料

1. Instogrom. iOSdev280 in NTU – 蔡智強 Denny Tsai
2. https://firebase.google.com/
3. https://cocoapods/org

本篇發表於 iOS App 並標籤為 , , , , , 。將永久鏈結加入書籤。

發表迴響