1. Genel Bakış
Dostça 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ı izleyeceksiniz.
Ne öğreneceksin
- Kullanıcıların oturum açmasına izin verin.
- Firebase Gerçek Zamanlı Veritabanını kullanarak verileri senkronize edin.
- İkili dosyaları Firebase Storage'da saklayın.
İhtiyacınız olan şey
- Xcode
- CocoaPod'lar
- iOS 8.0+ veya simülatör içeren bir test cihazı
Bu öğreticiyi nasıl kullanacaksınız?
iOS uygulamaları geliştirme deneyiminizi nasıl değerlendirirsiniz?
2. Örnek kodu alın
GitHub deposunu komut satırından kopyalayın.
$ git clone https://github.com/firebase/codelab-friendlychat-ios
3. Başlangıç uygulamasını oluşturun
Başlangıç uygulamasını oluşturmak için:
- Bir terminal penceresinde şuraya gidin:
Örnek kod indirmenizden ios-starter/swift-starterdizini -
pod install --repo-update - Projeyi Xcode'da açmak için FriendlyChatSwift.xcworkspace dosyasını açın.
- Tıkla
Çalıştır düğmesi.
Birkaç saniye sonra Dostça Sohbet ana ekranının göründüğünü görmelisiniz. Kullanıcı arayüzü görünmelidir. Ancak bu noktada oturum açamaz, mesaj gönderemez veya alamazsınız. Bir sonraki adımı tamamlayana kadar uygulama bir istisna dışında iptal edilecektir.
4. Firebase konsolu Projesi oluşturun
Proje oluştur
Firebase konsolundan Proje Ekle'yi seçin.
Projeyi FriendlyChat olarak adlandırın ve ardından Proje Oluştur'a tıklayın.
iOS uygulamanızı bağlayın
- Yeni projenizin Projeye Genel Bakış ekranından, Firebase'i iOS uygulamanıza ekleyin 'i 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.
GoogleService-Info.plist dosyasını uygulamanıza ekleyin
Uygulamanız için gerekli tüm Firebase meta verilerini içeren bir yapılandırma dosyasını indirmek için ikinci ekranda GoogleService-Info.plist'i İndir'i tıklayın. Bu dosyayı uygulamanıza kopyalayın ve FriendlyChatSwift hedefine ekleyin.
Artık açılır pencerenin sağ üst köşesindeki "x" işaretini tıklayarak 3. ve 4. adımları atlayarak kapatabilirsiniz; çünkü bu adımları burada gerçekleştireceksiniz.
Firebase modülünü içe aktar
Firebase modülünün içe aktarıldığından emin olarak başlayın.
AppDelegate.swift , FCViewController.swift
import Firebase
Firebase'i AppDelegate'te yapılandırma
Temel Firebase hizmetlerini .plist dosyanızdan yapılandırmak için uygulama içindeki FirebaseApp içindeki "configure" yöntemini kullanın:didFinishLaunchingWithOptions işlevi.
AppDelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions
launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
FirebaseApp.configure()
GIDSignIn.sharedInstance().delegate = self
return true
}
5. Kullanıcıları Tanımlayın
Kimliği Doğrulanmış Kullanıcılarla Kısıtlamak İçin Kuralları Kullanın
Artık herhangi bir mesajı okumadan veya yazmadan önce kimlik doğrulama gerektirecek bir kural ekleyeceğiz. Bunu yapmak için mesaj veri nesnemize aşağıdaki kuralları ekliyoruz. Firebase konsolunun Veritabanı bölümünden Gerçek Zamanlı Veritabanı'nı seçin ve ardından Kurallar sekmesine tıklayın. Daha sonra kuralları şu şekilde görünecek şekilde güncelleyin:
{
"rules": {
"messages": {
".read": "auth != null",
".write": "auth != null"
}
}
}
Bunun nasıl çalıştığı hakkında daha fazla bilgi için ("auth" değişkenine ilişkin belgeler dahil) Firebase güvenlik belgelerine bakın.
Kimlik Doğrulama API'lerini Yapılandırma
Uygulamanızın, kullanıcılarınız adına Firebase Kimlik Doğrulama API'lerine erişebilmesi için önce onu etkinleştirmeniz gerekir.
- Firebase konsoluna gidin ve projenizi seçin
- Kimlik Doğrulamayı Seçin
- Oturum Açma Yöntemi sekmesini seçin
- Google anahtarını etkin (mavi) konumuna getirin
- Ortaya çıkan iletişim kutusunda Kaydet'e basın
Bu codelab'de daha sonra "CONFIGURATION_NOT_FOUND" mesajını içeren hatalar alırsanız bu adıma geri dönün ve çalışmanızı bir kez daha kontrol edin.
Firebase Auth bağımlılığını onaylayın
Podfile dosyasında Firebase Auth bağımlılıklarının mevcut olduğunu doğrulayın.
Pod dosyası
pod 'Firebase/Auth'
Google Oturum Açma için Info.plist'inizi kurun.
XCode projenize özel bir URL şeması eklemeniz gerekecek.
- Proje konfigürasyonunuzu açın: sol ağaç görünümünde proje adına ç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 tersine çevrilen 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ı arayın. 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 şekilde görünmelidir (ancak uygulamaya özel değerlerinizle):
Google Oturum Açma için clientID'yi ayarlayın
Firebase yapılandırıldıktan sonra, "didFinishLaunchingWithOptions:" yönteminin içinde Google Oturum Açma işlemini ayarlamak için clientID'yi kullanabiliriz.
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 ekleyin
Google ile Oturum Açma işleminin sonucu başarılı olduktan sonra, Firebase ile kimlik doğrulaması yapmak 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 dinleyici ekleyin. Ve dinleyiciyi deinit'te kaldırın.
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 ekleyin
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)")
}
}
Oturum Açmış Kullanıcı Olarak Mesaj Okuma Testi
- Tıkla Çalıştır düğmesi.
- Hemen oturum açma ekranına gönderilmelisiniz. Google ile Oturum Açma düğmesine dokunun.
- Her şey yolunda giderse mesajlaşma ekranına gönderilmelisiniz.
6. Gerçek Zamanlı Veritabanını Etkinleştirin
Mesajları İçe Aktar
Firebase konsolundaki projenizde sol gezinme çubuğundaki Veritabanı öğesini seçin. Veritabanının taşma menüsünde JSON'u İçe Aktar'ı seçin. Friendlychat dizinindeki initial_messages.json dosyasına göz atın, dosyayı seçin ve İçe Aktar düğmesini tıklayın. Bu, şu anda veritabanınızda bulunan tüm verilerin yerini alacaktır. Öğeleri eklemek ve kaldırmak için yeşil + ve kırmızı x işaretlerini kullanarak veritabanını doğrudan da düzenleyebilirsiniz.
Veritabanınızı içe aktardıktan sonra şöyle görünmelidir:
Firebase Veritabanı Bağımlılığını Doğrulayın
Podfile dosyasının bağımlılıklar bloğunda Firebase/Database dahil edildiğini doğrulayın.
Pod dosyası
pod 'Firebase/Database'
Mevcut Mesajları Senkronize Et
Yeni eklenen mesajları uygulama kullanıcı arayüzüne senkronize eden kodu ekleyin.
Bu bölüme ekleyeceğiniz kod şunları sağlayacaktır:
- Firebase veritabanını başlatın ve veritabanında yapılan değişiklikleri işlemek için bir dinleyici ekleyin.
- Yeni mesajların gösterilmesi için
DataSnapshotgüncelleyin.
FCViewController'ınızın "deinit", "configureDatabase" ve "tableView:cellForRow indexPath:" yöntemlerini değiştirin; aşağıda tanımlanan 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
}
Test Mesajı Senkronizasyonu
- Tıkla Çalıştır düğmesi.
- Mesajlar penceresine gitmek için Başlamak için oturum aç düğmesine tıklayın.
- "Mesajlar" girişinin yanındaki yeşil + sembolüne tıklayarak ve aşağıdakine benzer bir nesne ekleyerek doğrudan Firebase konsoluna yeni mesajlar ekleyin:
- Dostça Sohbet Arayüzü'nde göründüklerini doğrulayın.
7. Mesaj Gönder
Mesaj Göndermeyi Uygulayın
Değerleri veritabanına aktarın. Firebase Realtime Database'e veri eklemek için push yöntemini kullandığınızda otomatik bir kimlik eklenecektir. Otomatik olarak oluşturulan bu kimlikler sıralıdır, bu da yeni mesajların doğru sırayla eklenmesini sağlar.
FCViewController'ınızın "sendMessage:" yöntemini değiştirin; aşağıda tanımlanan 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 Edin
- Tıkla Çalıştır düğmesi.
- Mesajlar penceresine gitmek için Oturum Aç'ı tıklayın.
- Bir mesaj yazın ve gönder tuşuna basın. Yeni mesajın uygulama arayüzünde ve Firebase konsolunda görünmesi gerekir.
8. Görüntüleri Saklayın ve Alın
Firebase Depolama Bağımlılığını Doğrulayın
Podfile bağımlılıklar bloğunda Firebase/Storage dahil edildiğini onaylayın.
Pod dosyası
pod 'Firebase/Storage'
Kontrol panelinde Firebase Storage'ı etkinleştirin
Firebase konsoluna gidin ve Depolamanın "gs://PROJECTID.appspot.com" alanıyla etkinleştirildiğini doğrulayın.
Bunun yerine etkinleştirme penceresini görüyorsanız, varsayılan kurallarla etkinleştirmek için "BAŞLAYIN" seçeneğini tıklayın.
FirebaseStorage'ı yapılandırma
FCViewController.swift
func configureStorage() {
storageRef = Storage.storage().reference()
}
Mevcut mesajlardaki resimleri alın
Firebase Storage'dan görselleri indiren kodu ekleyin.
FCViewController'ınızın "tableView: cellForRowAt indexPath:" yöntemini değiştirin; aşağıda tanımlanan 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. Resimli Mesajlar Gönderin
Görselleri Saklayın ve Gönderin
Kullanıcıdan bir resim yükleyin, ardından bu resmin depolama URL'sini veritabanıyla senkronize ederek bu resmin mesajın içinde gönderilmesini sağlayın.
FCViewController'ınızın "imagePickerController: didFinishPickingMediaWithInfo:" yöntemini değiştirin; aşağıda tanımlanan 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])
}
}
}
Görüntülü Mesaj Gönderme ve Alma Testi
- Tıkla Çalıştır düğmesi.
- Mesajlar penceresine gitmek için Oturum Aç'ı tıklayın.
- Bir fotoğraf seçmek için "fotoğraf ekle" simgesini tıklayın. 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.
Neleri ele aldık?
- Gerçek Zamanlı Veritabanı
- Federe Oturum Açma
- Depolamak