1. Genel Bakış
Samimi Sohbet codelab'ine hoş geldiniz. Bu codelab'de iOS uygulamaları oluşturmak için Firebase platformunu nasıl kullanacağınızı öğreneceksiniz. Firebase'i kullanarak bir sohbet istemcisi uygulayacak ve performansını izleyebilirsiniz.
Neler öğreneceksiniz?
- Kullanıcıların oturum açmasına izin verin.
- Firebase Realtime Database'i kullanarak verileri senkronize edin.
- İkili program dosyalarını Firebase Storage'da depolayın.
Gerekenler
- Xcode
- CocoaPods
- iOS 8.0+ veya simülatör yüklü bir test cihazı
Bu eğiticiden nasıl yararlanacaksınız?
iOS uygulaması geliştirme deneyiminizi nasıl değerlendirirsiniz?
2. Örnek kodu alın
GitHub deposunu komut satırından klonlayın.
$ git clone https://github.com/firebase/codelab-friendlychat-ios
3. Başlangıç uygulamasını oluşturma
Başlangıç uygulamasını oluşturmak için:
- Terminal penceresinde, indirdiğiniz örnek koddan
ios-starter/swift-starterdizinine gidin. pod install --repo-updateçalıştırma- Projeyi Xcode'da açmak için FriendlyChatSwift.xcworkspace dosyasını açın.
Çalıştır düğmesini tıklayın.
Birkaç saniye sonra Samimi Sohbet ana ekranı görünecektir. Kullanıcı arayüzü görünecektir. Ancak bu noktada oturum açamaz, mesaj gönderemez veya alamazsınız. Uygulama, siz sonraki adımı tamamlayana kadar bir istisnayla iptal edilir.
4. Firebase konsol projesi oluşturma
Proje oluştur
Firebase konsolunda Proje Ekle'yi seçin.
FriendlyChat projesini çağırın, ardından Proje Oluştur'u tıklayın.
iOS uygulamanızı bağlama
- Yeni projenizin Project Overview (Projeye Genel Bakış) ekranında Add Firebase to your iOS app'i (Firebase'i iOS uygulamanıza ekleyin) tıklayın.
- Paket kimliğini "
com.google.firebase.codelab.FriendlyChatSwift" olarak girin. - App Store kimliğini "
123456" olarak girin. - Uygulamayı Kaydet'i tıklayın.
Uygulamanıza GoogleService-Info.plist dosyası ekleme
İkinci ekranda, uygulamanız için gerekli tüm Firebase meta verilerini içeren bir yapılandırma dosyasını indirmek üzere GoogleService-Info.plist dosyasını indir'i tıklayın. Dosyayı uygulamanıza kopyalayın ve FriendlyChatSwift hedefine ekleyin.
Şimdi "x" simgesini tıklayabilirsiniz tıklayın.
Firebase modülünü içe aktarma
İlk olarak Firebase modülünün içe aktarıldığından emin olun.
AppDelegate.swift, FCViewController.swift
import Firebase
AppDelegate'de Firebase'i yapılandırma
"Yapılandır"ı kullanın yöntemini kullanarak .plist dosyanızdan temel Firebase hizmetlerini yapılandırın.
AppDelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions
launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
FirebaseApp.configure()
GIDSignIn.sharedInstance().delegate = self
return true
}
5. Kullanıcıları Tanımlama
Kimliği Doğrulanmış Kullanıcılarla Kısıtlamak İçin Kuralları Kullanma
Artık ileti okumadan veya yazmadan önce kimlik doğrulaması yapılmasını gerektirecek bir kural ekleyeceğiz. Bunun için iletiler veri nesnemize aşağıdaki kuralları ekleriz. Firebase konsolunun Veritabanı bölümünde Realtime Database'i seçip Kurallar sekmesini tıklayın. Ardından, kuralları aşağıdaki gibi görünecek şekilde güncelleyin:
{
"rules": {
"messages": {
".read": "auth != null",
".write": "auth != null"
}
}
}
Bu sürecin işleyiş şekli hakkında daha fazla bilgi edinmek için ("kimlik doğrulama" değişkeniyle ilgili belgeler dahil), Firebase güvenlik belgelerini inceleyin.
Kimlik Doğrulama API'lerini yapılandırma
Uygulamanızın, kullanıcılarınız adına Firebase Authentication API'lerine erişebilmesi için önce bu API'yi etkinleştirmeniz gerekir
- Firebase konsoluna gidin ve projenizi seçin
- Authentication'ı (Kimlik Doğrulama) seçin
- Oturum Açma Yöntemi sekmesini seçin
- Google anahtarını etkin (mavi) duruma getirin.
- Açılan iletişim kutusunda Kaydet'e basın
Bu codelab'de daha sonra "CONFIGURATION_NOT_FOUND" mesajıyla hata mesajı alırsanız bu adıma dönüp çalışmanızı tekrar kontrol edin.
Firebase Auth bağımlılığını onaylama
Podfile dosyasında Firebase Auth bağımlılıklarının olduğunu doğrulayın.
Pod dosyası
pod 'Firebase/Auth'
Google ile Oturum Açma için Info.plist dosyanızı ayarlayın.
XCode projenize özel bir URL şeması eklemeniz gerekir.
- Proje yapılandırmanızı açın: Sol ağaç görünümünde proje adını çift tıklayın. HEDEFLER bölümünden uygulamanızı seçin, ardından Bilgi sekmesini seçin ve URL Türleri bölümünü genişletin.
- + düğmesini tıklayın ve ters çevrilmiş istemci kimliğiniz için bir URL şeması ekleyin. Bu değeri bulmak için GoogleService-Info.plist yapılandırma dosyasını açın ve REVERSED_CLIENT_ID anahtarını bulun. Bu anahtarın değerini kopyalayın ve yapılandırma sayfasındaki URL Şemaları kutusuna yapıştırın. Diğer alanları boş bırakın.
- Tamamlandığında, yapılandırmanız aşağıdakine benzer bir görünümde olacaktır (ancak uygulamaya özel değerlerinizle):
Google ile Oturum Açma için clientID'yi ayarlama
Firebase yapılandırıldıktan sonra "didFinishLaunchingWithOptions:" alanının içinde Google ile Oturum Açma'yı ayarlamak için clientID'yi kullanabiliriz: yöntemidir.
AppDelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions
launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
FirebaseApp.configure()
GIDSignIn.sharedInstance().clientID = FirebaseApp.app()?.options.clientID
GIDSignIn.sharedInstance().delegate = self
return true
}
Oturum açma işleyicisini ekleme
Google ile Oturum Açma işleminin sonucu başarılı olduğunda Firebase ile kimlik doğrulamak için hesabı kullanın.
AppDelegate.swift
func sign(_ signIn: GIDSignIn!, didSignInFor user: GIDGoogleUser!, withError error: Error?) {
if let error = error {
print("Error \(error)")
return
}
guard let authentication = user.authentication else { return }
let credential = GoogleAuthProvider.credential(withIDToken: authentication.idToken,
accessToken: authentication.accessToken)
Auth.auth().signIn(with: credential) { (user, error) in
if let error = error {
print("Error \(error)")
return
}
}
}
Kullanıcının otomatik olarak oturum açmasını sağlayın. Ardından, başarılı bir şekilde oturum açtıktan sonra kullanıcının uygulamaya girmesine izin vermek için Firebase Auth'a bir işleyici ekleyin. Son olarak, dinleyiciyi YouTube'da devre dışı bırakabilirsiniz.
SignInViewController.swift
override func viewDidLoad() {
super.viewDidLoad()
GIDSignIn.sharedInstance().uiDelegate = self
GIDSignIn.sharedInstance().signInSilently()
handle = Auth.auth().addStateDidChangeListener() { (auth, user) in
if user != nil {
MeasurementHelper.sendLoginEvent()
self.performSegue(withIdentifier: Constants.Segues.SignInToFp, sender: nil)
}
}
}
deinit {
if let handle = handle {
Auth.auth().removeStateDidChangeListener(handle)
}
}
Oturumu Kapat
Oturumu kapatma yöntemini ekleme
FCViewController.swift
@IBAction func signOut(_ sender: UIButton) {
let firebaseAuth = Auth.auth()
do {
try firebaseAuth.signOut()
dismiss(animated: true, completion: nil)
} catch let signOutError as NSError {
print ("Error signing out: \(signOutError.localizedDescription)")
}
}
İletileri Oturum Açmış Kullanıcı Olarak Okumayı Test Etme
- Çalıştır düğmesini tıklayın.
- Hemen oturum açma ekranına yönlendirilirsiniz. Google ile Oturum Açma düğmesine dokunun.
- Her şey yolundaysa mesajlaşma ekranına yönlendirilirsiniz.
6. Realtime Database'i etkinleştir
İletileri içe aktarma
Firebase konsolundaki projenizde, sol gezinme çubuğundan Veritabanı öğesini seçin. Veritabanının taşma menüsünde Import JSON'u (JSON'u İçe Aktar) seçin. Friendlychat dizinindeki initial_messages.json dosyasına göz atın, dosyayı seçin ve ardından Import (İçe aktar) düğmesini tıklayın. Bu işlemle, şu anda veritabanınızda olan tüm veriler değiştirilir. Ayrıca, öğe ekleyip kaldırmak için yeşil + ve kırmızı x işaretlerini kullanarak veritabanını doğrudan düzenleyebilirsiniz.
Veritabanınızı içe aktardıktan sonra şu şekilde görünmelidir:
Firebase Veritabanı Bağımlılığını Onaylayın
Podfile dosyasının bağımlılıklar bloğunda Firebase/Database öğesinin dahil olduğunu onaylayın.
Pod dosyası
pod 'Firebase/Database'
Mevcut İletileri Senkronize Etme
Yeni eklenen mesajları uygulamanın kullanıcı arayüzüne senkronize eden bir kod ekleyin.
Bu bölüme ekleyeceğiniz kod:
- Firebase veritabanını başlatın ve veritabanında yapılan değişiklikleri işlemek için bir işleyici ekleyin.
- Yeni mesajların gösterilebilmesi için
DataSnapshotuygulamasını güncelleyin.
FCViewController'ınızın "deinit", "configureDatabase" ve "tableView:cellForRow indexPath:" değerlerini değiştirin. yöntemler; aşağıdaki kodla değiştirin:
FCViewController.swift
deinit {
if let refHandle = _refHandle {
self.ref.child("messages").removeObserver(withHandle: _refHandle)
}
}
func configureDatabase() {
ref = Database.database().reference()
// Listen for new messages in the Firebase database
_refHandle = self.ref.child("messages").observe(.childAdded, with: { [weak self] (snapshot) -> Void in
guard let strongSelf = self else { return }
strongSelf.messages.append(snapshot)
strongSelf.clientTable.insertRows(at: [IndexPath(row: strongSelf.messages.count-1, section: 0)], with: .automatic)
})
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// Dequeue cell
let cell = self.clientTable.dequeueReusableCell(withIdentifier: "tableViewCell", for: indexPath)
// Unpack message from Firebase DataSnapshot
let messageSnapshot = self.messages[indexPath.row]
guard let message = messageSnapshot.value as? [String: String] else { return cell }
let name = message[Constants.MessageFields.name] ?? ""
let text = message[Constants.MessageFields.text] ?? ""
cell.textLabel?.text = name + ": " + text
cell.imageView?.image = UIImage(named: "ic_account_circle")
if let photoURL = message[Constants.MessageFields.photoURL], let URL = URL(string: photoURL),
let data = try? Data(contentsOf: URL) {
cell.imageView?.image = UIImage(data: data)
}
return cell
}
Mesaj Senkronizasyonunu Test Etme
- Çalıştır düğmesini tıklayın.
- Mesajlar penceresine gitmek için Başlamak için oturum açın düğmesini tıklayın.
- "Mesajlar"ın yanındaki yeşil + simgesini tıklayarak yeni mesajları doğrudan Firebase konsolunda ekleyin. şuna benzer bir nesne ekleyerek:
- Dost Canlısı Sohbet Kullanıcı Arayüzünde göründüğünü doğrulayın.
7. Mesajlar Gönderme
Mesaj Gönderme özelliğini uygulama
Değerleri veritabanına aktarın. Firebase Realtime Database'e veri eklemek için aktarma yöntemini kullandığınızda otomatik kimlik eklenir. Otomatik olarak oluşturulan bu kimlikler sıralı olduğundan yeni iletilerin doğru sırada eklenmesini sağlar.
FCViewController'ınızın "sendMessage" öğesini değiştirin: yöntemini kullanarak aşağıdaki kodla değiştirin:
FCViewController.swift
func sendMessage(withData data: [String: String]) {
var mdata = data
mdata[Constants.MessageFields.name] = Auth.auth().currentUser?.displayName
if let photoURL = Auth.auth().currentUser?.photoURL {
mdata[Constants.MessageFields.photoURL] = photoURL.absoluteString
}
// Push data to Firebase Database
self.ref.child("messages").childByAutoId().setValue(mdata)
}
Mesaj Göndermeyi Test Etme
- Çalıştır düğmesini tıklayın.
- Mesajlar penceresine gitmek için Oturum Aç'ı tıklayın.
- Mesajınızı yazın ve Gönder'e basın. Yeni mesaj, uygulamanın kullanıcı arayüzünde ve Firebase konsolunda görünür.
8. Resimleri Depola ve Al
Firebase Depolama Alanı Bağımlılığını Onaylayın
Podfile öğesinin bağımlılıklar bloğunda Firebase/Storage öğesinin dahil edildiğini onaylayın.
Pod dosyası
pod 'Firebase/Storage'
Kontrol panelinde Firebase Storage'ı etkinleştirme
Firebase konsoluna gidin ve Depolama alanının "gs://PROJECTID.appspot.com" ile etkinleştirildiğini onaylayın alan
Bunun yerine etkinleştirme penceresini görüyorsanız "BAŞLAYIN"ı tıklayın. varsayılan kurallarla etkinleştirin.
FirebaseStorage'ı yapılandırma
FCViewController.swift
func configureStorage() {
storageRef = Storage.storage().reference()
}
Mevcut mesajlarda resim alma
Firebase Storage'dan resim indiren bir kod ekleyin.
FCViewController uygulamanızın "tableView: CellForRowAt indexPath:" değerini değiştirin. yöntemini kullanarak aşağıdaki kodla değiştirin:
FCViewController.swift
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// Dequeue cell
let cell = self.clientTable .dequeueReusableCell(withIdentifier: "tableViewCell", for: indexPath)
// Unpack message from Firebase DataSnapshot
let messageSnapshot: DataSnapshot! = self.messages[indexPath.row]
guard let message = messageSnapshot.value as? [String:String] else { return cell }
let name = message[Constants.MessageFields.name] ?? ""
if let imageURL = message[Constants.MessageFields.imageURL] {
if imageURL.hasPrefix("gs://") {
Storage.storage().reference(forURL: imageURL).getData(maxSize: INT64_MAX) {(data, error) in
if let error = error {
print("Error downloading: \(error)")
return
}
DispatchQueue.main.async {
cell.imageView?.image = UIImage.init(data: data!)
cell.setNeedsLayout()
}
}
} else if let URL = URL(string: imageURL), let data = try? Data(contentsOf: URL) {
cell.imageView?.image = UIImage.init(data: data)
}
cell.textLabel?.text = "sent by: \(name)"
} else {
let text = message[Constants.MessageFields.text] ?? ""
cell.textLabel?.text = name + ": " + text
cell.imageView?.image = UIImage(named: "ic_account_circle")
if let photoURL = message[Constants.MessageFields.photoURL], let URL = URL(string: photoURL),
let data = try? Data(contentsOf: URL) {
cell.imageView?.image = UIImage(data: data)
}
}
return cell
}
9. Resim Mesajları Gönderme
Mağazayı Uygulama ve Resimleri Gönderme
Kullanıcıdan bir resim yükleyin, ardından bu resmin iletinin içinde gönderilmesi için resmin depolama URL'sini veritabanıyla senkronize edin.
FCViewController'ınızın "image PickerController: didFinish PickingMediaWithInfo:" değerini değiştirin: yöntemini kullanarak aşağıdaki kodla değiştirin:
FCViewController.swift
func imagePickerController(_ picker: UIImagePickerController,
didFinishPickingMediaWithInfo info: [String : Any]) {
picker.dismiss(animated: true, completion:nil)
guard let uid = Auth.auth().currentUser?.uid else { return }
// if it's a photo from the library, not an image from the camera
if #available(iOS 8.0, *), let referenceURL = info[UIImagePickerControllerReferenceURL] as? URL {
let assets = PHAsset.fetchAssets(withALAssetURLs: [referenceURL], options: nil)
let asset = assets.firstObject
asset?.requestContentEditingInput(with: nil, completionHandler: { [weak self] (contentEditingInput, info) in
let imageFile = contentEditingInput?.fullSizeImageURL
let filePath = "\(uid)/\(Int(Date.timeIntervalSinceReferenceDate * 1000))/\((referenceURL as AnyObject).lastPathComponent!)"
guard let strongSelf = self else { return }
strongSelf.storageRef.child(filePath)
.putFile(from: imageFile!, metadata: nil) { (metadata, error) in
if let error = error {
let nsError = error as NSError
print("Error uploading: \(nsError.localizedDescription)")
return
}
strongSelf.sendMessage(withData: [Constants.MessageFields.imageURL: strongSelf.storageRef.child((metadata?.path)!).description])
}
})
} else {
guard let image = info[UIImagePickerControllerOriginalImage] as? UIImage else { return }
let imageData = UIImageJPEGRepresentation(image, 0.8)
let imagePath = "\(uid)/\(Int(Date.timeIntervalSinceReferenceDate * 1000)).jpg"
let metadata = StorageMetadata()
metadata.contentType = "image/jpeg"
self.storageRef.child(imagePath)
.putData(imageData!, metadata: metadata) { [weak self] (metadata, error) in
if let error = error {
print("Error uploading: \(error)")
return
}
guard let strongSelf = self else { return }
strongSelf.sendMessage(withData: [Constants.MessageFields.imageURL: strongSelf.storageRef.child((metadata?.path)!).description])
}
}
}
Resim Mesajları Gönderme ve Alma Testi
- Çalıştır düğmesini tıklayın.
- Mesajlar penceresine gitmek için Oturum Aç'ı tıklayın.
- "Fotoğraf ekle"yi tıklayın simgesine dokunun. Fotoğraflı yeni mesaj, uygulamanın kullanıcı arayüzünde ve Firebase konsolunda görünür olmalıdır.
10. Tebrikler!
Kolayca gerçek zamanlı bir sohbet uygulaması oluşturmak için Firebase'i kullandınız.
İşlediklerimiz
- Realtime Database
- Birleşik Oturum Açma
- Depolama