iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

0

20191021

前言

今天的內容一樣是代辦清單App,在前面的文章中已經介紹過FB登入,今天,我們就要將前面文章的內容,整合到專案內。

Day28 第三方登入-臉書
https://ithelp.ithome.com.tw/articles/10227913

現在,我們馬上開始!

練習紀錄

前置作業

這邊列出幾個需要先實作的步驟,詳細的內容請參考Day28的文章(ref10)

  1. FB開發人員註冊與相關設定

  2. 安裝相關cocoapod套件

pod 'FBSDKCoreKit'
pod 'FBSDKLoginKit'
pod 'FBSDKShareKit'
pod 'Alamofire'
  1. 確定FB開發人員頁面,應用程式為『開啟』

  2. 修改info.plist

專案部分

  1. 首先我們加入一個UIViewController,並從首頁的選單按鈕連結過去,動作設定為『Present Modally』

  • 因為是登入頁面,所以我們設定為『Modally』

  • 原本此menu按鈕還有考慮設定頁面,不過還沒研究slide menu,所以先跳過

  1. 新增一個『LoginViewController』並指定給此UIViewController

  1. 加入一個UIImageView,用來確認我們確實下載FB的圖片,並與程式碼做連結

  1. 在LoginViewController.swift加入以下程式碼

viewDidLoad()事件

override func viewDidLoad() {
    super.viewDidLoad()
    
    let loginButton = FBLoginButton()
    loginButton.center = self.view.center
    self.view.addSubview(loginButton)
    
    GetFBUserInfo()
}

其他方法

private func GetFBUserInfo() {
    let params = ["fields":"name, email , picture.type(large), gender"]
    let request = GraphRequest(graphPath: "/me", parameters: params)
    let connection = GraphRequestConnection()
    
    connection.add(request, batchParameters: params) { (conn, result, error) in
        guard let fbResult = result as? Dictionary<String, Any>,
            let picture = fbResult["picture"] as? Dictionary<String, Any>,
            let pictureData = picture["data"] as? Dictionary<String, Any>,
            let url = pictureData["url"] as? String
            else { return }
        print(url)
        self.setUserImage(url)
    }
    connection.start()
}

private func setUserImage(_ url: String) {
    
    Alamofire.request(url).response { (response) in
        guard let data = response.data, let image = UIImage(data: data)
            else { return }
        
        self.fbImageView.image = image
        self.fbImageView.clipsToBounds = true
        self.fbImageView.layer.cornerRadius = (self.fbImageView.frame.size.width) / 2
        
    }
}
  1. 確認FB的照片已顯示在照片上

由於我們的目的是更改首頁的圖片,將照片傳遞到首頁上。
因此,我們透過protocol的方式來傳遞。(ref11)

  1. 加一個新的protocol在LoginViewController,並新增一個delegate屬性
protocol LoginViewControllerDelegate: class {
   func PassImageData(image: UIImage)
}

class LoginViewController: UIViewController {
    
    @IBOutlet weak var fbImageView: UIImageView!
    
    var delegate: LoginViewControllerDelegate?
    // ..以下略
}
  1. 在原本的setUserImage方法中,加入self.delegate的呼叫
private func setUserImage(_ url: String) {
    
    Alamofire.request(url).response { (response) in
        guard let data = response.data, let image = UIImage(data: data)
            else { return }
        
        self.fbImageView.image = image
        self.fbImageView.clipsToBounds = true
        self.fbImageView.layer.cornerRadius = (self.fbImageView.frame.size.width) / 2
        
        self.delegate?.PassImageData(image: image)
        
        self.dismiss(animated: true) {
            print("return OK")
        }
        
    }
}
  1. 接者我們回到首頁ListViewController內,加入以下程式碼
class ListViewController: UIViewController, LoginViewControllerDelegate {
    
    func PassImageData(image: UIImage) {
        userImageView.image = image
        userImageView.clipsToBounds = true
        userImageView.layer.cornerRadius = (userImageView.frame.size.width) / 2
    }
    // ... 以下略
}
  • 讓ListViewController實作LoginViewControllerDelegate方法

  • 並在方法內設定照片,並去邊成為圓角圖

  1. 接者一樣在ListViewController內,複寫prepare方法
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    let destinationViewController = segue.destination as? LoginViewController
    destinationViewController?.delegate = self
}
  • 將LoginViewController的delegate設定為自己

  • 到這邊已經初步完成,可以顯示自己FB的照片了

  • UI及流程還有很多細節需要調整

  • 另外也有朋友建議,可以將資料存在UserDefault內,就不用傳來傳去了,程式碼會簡單些

完成圖

尚未取得FB照片

登入後取得FB大頭照

總結

今天我們練習了整合FB登入功能到專案內,並將登入後取得的大頭照,設定給首頁的大頭貼圖片,過程中也學習了透過protocol來傳遞資料。此專案還有許多需要調整細節與完善的地方。

今天的內容就到這邊,感謝讀者們的閱讀。


Github:

https://github.com/chiron-wang/IT30_11

參考資料與延伸閱讀

  1. 深入淺出 iPhone 開發 (使用 Swift4) - WeiWei
    https://www.udemy.com/course/iphone-swift4/

  2. iOS 12 App 開發快速入門與實戰(繁體中文)
    https://www.udemy.com/course/ios-12-app/

  3. 心智圖軟體Xmind
    https://www.xmind.net/

[Realm]

  1. [Swift] Realm.io 資料庫介紹 - 其之一:初探CRUD
    https://ithelp.ithome.com.tw/articles/10183329

  2. Auto increment ID in Realm, Swift 3.0
    https://stackoverflow.com/questions/39579025/auto-increment-id-in-realm-swift-3-0

  3. Realm Studio
    https://realm.io/docs/swift/latest/#realm-studio

[Notificationcenter]

  1. 客製化 NotificationCenter 讓你使用起來更簡單
    https://www.appcoda.com.tw/notificationcenter/

  2. Apple Developer NotificationCenter
    https://developer.apple.com/documentation/foundation/notificationcenter

  3. UITextField如何讓鍵盤消失?
    https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E6%95%99%E5%AE%A4/uitextfield%E5%A6%82%E4%BD%95%E8%AE%93%E9%8D%B5%E7%9B%A4%E6%B6%88%E5%A4%B1-37565fdb6b2f

  4. Day28 第三方登入-臉書
    https://ithelp.ithome.com.tw/articles/10227913

  5. #78 利用 delegate 在 controller 間溝通 & 傳資料的步驟說明
    https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84%E8%A9%A6%E7%85%89-%E5%8B%87%E8%80%85%E7%9A%84-100-%E9%81%93-swift-ios-app-%E8%AC%8E%E9%A1%8C/%E5%88%A9%E7%94%A8-delegate-%E5%9C%A8-controller-%E9%96%93%E6%BA%9D%E9%80%9A-%E5%82%B3%E8%B3%87%E6%96%99%E7%9A%84%E6%AD%A5%E9%A9%9F%E8%AA%AA%E6%98%8E-b9bc608b5e45


上一篇
Day34 石虎的推播通知 (石虎有約)
下一篇
Day36 待辦清單終篇 (定時提醒)
系列文
iOS App 實作開發新手村36

尚未有邦友留言

立即登入留言