Merih Forum Android / IOS yazılım Firebase ile Login Olma (Swift)

  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Firebase ile Login Olma (Swift)

 
#1

Bu yazımızda Firebase yardımıyla Swift Programlama dilini kullanarak küçük bir login olma uygulamasını adım adım nasıl yapabileceğimizi öğreneceğiz.
Neler öğreneceğiz, başlıklar halinde özetlemek gerekirse;
  1. Uygulama kimliği oluşturma
  2. CocoaPods kullanarak firebase kütüphanesini projemize entegre etme
  3. Login uygulamasının dizaynı ve programlanması

Firebase, uygulama yönetim, kullanım takip, veri depolama, bildirim gönderme gibi işlemleri, extra bir sunucuya ve sunucu taraflı kod yazmaya gerek kalmadan gerçekleştirmektedir. Firebase'in genel yapısını buradaki blog yazımızda incelemiştik.
Birçoğumuzun bildiği gibi CocoaPods Xcode için önceden yazılan kütüphanelerin ortak kullanıma açıldığı bir platformdur. İki platformu kullanarak Swift'te login uygulaması yapabilecek miyiz, isterseniz lafı uzatmadan başlayalım.
 
1-İlk adımda https://firebase.google.com adresine giriyoruz. Aşağıdaki gibi bir sayfa ile karşılaşmanız gerekmektedir. "GET STARTED FOR FREE" butonuna tıklayın.
 Dikkat etmeniz gereken bir google hesabıyla giriş yapmanız gerektiğidir.
screen_shot_2016-05-31_at_10.27.48.png
2- Sıradaki işlem uygulama ismini belirlemek ve Firebase'de tanımlamak.
Aşağıdaki ekranda "CREATE A NEW PROJECT" 'e tıklayın.
screen_shot_2016-05-31_at_10.33.03.png
3-Uygulama için ismimizi ve ülkemizi belirliyoruz, aşağıdaki gibi,"CREATE PROJECT"'e basıp devam ediyoruz.
screen_shot_2016-05-31_at_10.35.17.png
4-Aşağıdaki gibi gelen ekrandan 'ADD FIREBASE TO YOUR iOS app' 'a tıklayın.
screen_shot_2016-05-31_at_10.43.07.png
5-Artık uygulamızı firebase'e tanıtmaya başlıyoruz. Aşağıdaki ekranla karşılaştığınız zaman xcode'a geçiş yapınız.
screen_shot_2016-05-31_at_14.02.35.png
6- Xcode 'da yeni bir proje oluşturuyoruz. "Single View Application" seçili olarak gelicektir. Daha sonra next 'e tıklayın.
screen_shot_2016-05-31_at_10.44.59.png
 
7-Aşağıda ok ile belirtiğim kısım önemli, 5. adımdaki görselde yarım bıraktığımız iOS bundle ID kısmına bundle identifier'i yazmamız gerekecek, buna diğer adımlarda değineceğiz.
screen_shot_2016-05-31_at_14.12.18.png
8-Xcode projenizi kaydettikten sonra aşağıdaki adımları takip ederek "Bundle identifier" içindeki text'i kopyalayın.
screen_shot_2016-05-31_at_14.30.01.png
9-Aşağıdaki ekranı tarayıcınızdan tekrar açınız ve bir üst madde kopyaladığınız bundle identifier'ı aşağıdaki ekranda ok ile gösterdiğim yere yapıştırın. ADD APP' e tıklayın.
screen_shot_2016-05-31_at_14.39.30.png
10- GoogleService-info.plist dosyasıni indiriniz ve aşağıdaki ekrana geçiniz. Daha sonra "CONTINUE" butonuna basın.
screen_shot_2016-05-31_at_11.31.11.png
CONTINUE butonuna bastıktan sonra aşağıdaki gibi bir ekran ile karşılaşmanız gerekmektedir.
screen_shot_2016-05-31_at_12.23.27.png
Uyarı : Bu adımdan sonra xcode'a geçmeniz gerekmektedir.
 
11-GoogleService-info.plist dosyasını projenize sürükleyip bırakın. Aşağıdaki görsellerde gösterdiğim şekilde yapınız.
screen_shot_2016-05-31_at_15.28.15.png
screen_shot_2016-05-31_at_15.17.39.png
 
CocoaPods kullanarak firebase kütüphanesini projemize entegre etme
 
CocoaPods'lar ile ilgili her adımı önemli olan yazımızın bu bölümünde biraz daha titiz olmanızı öneriyorum. Aşağıdaki resimde gözüken CocoaPods websitesine giriyoruz.
Resimde gösterdiğim alandaki text'i kopyalayın. Uyarı : text'in solundaki dolar işaretini kopyalamayın.
screen_shot_2016-05-31_at_11.37.10.png
1- Terminal'ı açın. Arama çubuğuna terminal yazmanız yeterli. Terminal'e root izni ve şifre girişi yaptığınızı varsayıyorum. Daha sonra aşağıdaki ekrandaki gibi sırasıyla komutları girin.Burada önemli olan pod dosyasını proje dosyanıza yükleyebilmenizdir.
  1."ls" yazın enter'a basın,ben firebaseLogin xcode proje dosyasını masaüstüne kayıt ettim.Siz de böyle yaparsanız bu adımlarda fazla zorlanmazsınız.
  2."cd  Desktop" yazın ve enter'a basın
  3."cd firebaseLogin" yazın ve enter'a basın. Bu adımda xcode projenizin dosyasını açıcaksınız o yüzden ismine dikkat edin. Hatalı girildiğinde Terminal uyarı vericektir.
  4.Bu adıma kadar gelebildiyseniz artık proje dosyasının içindesiniz demektir. Şimdi tekrar "ls" yazın. Proje dosyalarını terminalde görmeniz gerekmektedir.
  5.Aşağıdaki resimde doğru adımları yaptığınız takdirde nasıl bir Terminal ekranı görüceğinizi gösteriyorum. Son adımda "pod init" yazın ve enter'a basın. Biraz bekleyin.
 
screen_shot_2016-05-31_at_13.04.08.png
2- Bu adımda proje dosyanızı hemen kontrol edin. Eğer podfile dosyasını bulamazsanız olmadı demektir.
podfile dosyasını düzenlememiz gerekiyor. Podfile dosyasını açtığınızda aşağıdaki gibi gözükmesi gerekiyor.
screen_shot_2016-05-31_at_13.05.32.png
Uyarı:Terminali kapatmayın.
 
3-Aşağıdaki resimde silmeniz gereken yeri görebilirsiniz. Ok içinde olan kısmı silin.
screen_shot_2016-05-31_at_13.10.53.png
Sildiğiniz kısıma aşağıdaki kodu ekleyin.

Kod:
'pod Firebase'
'Firebase/Auth'

Bu kodu nereden biliyoruz diye soranlar olacaktır. Sebebi,yukarıdaki 10. maddede Firebase bize "Open your podfile and add" kısmında bu kodu yazmamız gerektiği söylemektedir.
screen_shot_2016-05-31_at_13.05.47.png
4- pod dosyamızı kaydettikten sonra Terminal ekranına geri dönüyoruz.Terminal ekranına "pod install" yazıp enter'a basın. İşlem tamamlanınca alttaki gibi bir ekran görmeniz gerekiyor.
screen_shot_2016-05-31_at_17.37.16.png
Terminal ile işlemlerimiz bitti. Artık swift'e geçebiliriz.
 
Login uygulamasını Dizayn etme ve Programlama
1-firebaseLogin dosyasını açınız. Bu adımda dikkat edilmesi gereken projeyi .xcworkspace dosyasına çift tıklayarak açmanız gerekmektedir.
screen_shot_2016-05-31_at_17.39.09.png
Tarayıcınızı tekrar açın ve aşağıdaki ekranda "CONTINUE" butonuna basın
screen_shot_2016-05-31_at_12.23.27.png
Aşağıdaki ekranda swift'i seçiniz ve gerekli konfigürasyonu altta görmeniz mümkün, aşağıdaki ekranda FINISH butonuna basarak firebase entegrasyon işlemini bitirebiliriz..
screen_shot_2016-06-01_at_10.07.57.png
Xcode'a geri dönün ve Appdelegate.swift dosyasına tıklayın. (Appdelegate'i Xcode proje hiyerarşisinde sol tarafta görebilirsiniz.)
Aşağıdaki ekranda gösterdiğim gibi kodları ekleyin.
screen_shot_2016-06-01_at_10.07.06.png
 
Firebase kontrol paneline geri dönün ve aşağıda oklarla belirttiğim sıralamaya göre işlemleri takip edin. Firebase E-mail kayıtlarını tutabilmek için E-mail kullanımını aktif etmemiz gerekmektedir.
screen_shot_2016-06-01_at_10.22.56.png
 
Bu işlemleri bitirdikten sonra Xcode'a dönüyoruz ve Main.storyboard'a tıklıyoruz.
Aşağıdaki ekranlarda Storyboard'a iki tane textfield, iki tane button ekledim. Sizde bu şekilde uygulayın. Login ekranının her Apple cihazında çalışmasını istiyorsanız aşağıdaki görselleri takip ederek nesneleri storyboard'a her cihaza adapte edebilirsiniz.
Aşağıdaki ekranlarda seçilmesi gerekenleri belirttiğim gibi yapın daha sonra add constraints butonlarına basın.
screen_shot_2016-06-01_at_10.55.01.png 
screen_shot_2016-06-01_at_10.55.25.png
screen_shot_2016-06-01_at_10.56.45.png
 
Arayüz tasarımı bittikten sonra nesneleri ViewController'a sürükleyin ve kodlamaya başlayalım. Kodlama bittikten sonra ViewController.swift dosyasının bu projede yapılan örneğini aşağıda paylaşıyorum. Siz isterseniz farklı metodlar veya arayüzler ile projenizi değiştirebilirsiniz.

Kod:
import UIKit
import Firebase

class ViewController: UIViewController {
   @IBOutlet weak var logintext: UITextField!
   @IBOutlet weak var passtext: UITextField!
   var alert = UIAlertController()
   func hata(mesaj : String,err : Int?){

      if err == nil {  alert = UIAlertController(title: "Hoşgeldiniz", message: "\(mesaj)", preferredStyle: .Alert) }
      else { alert = UIAlertController(title: "Hata kodu : \((err)!)", message: "\(mesaj)", preferredStyle: .Alert) }
      let temizle = UIAlertAction(title: "Temizle", style: .Cancel) { (action:UIAlertAction!) in
       
           self.logintext.text! = ""
           self.passtext.text! = ""
       
       }
       alert.addAction(temizle)
       let tamam = UIAlertAction(title: "Tekrar dene", style: .Default) { (action:UIAlertAction!) in  }

       alert.addAction(tamam)
       
       self.presentViewController(alert, animated: true, completion:nil)

   }

        @IBAction func hesapOlustur(sender: AnyObject) {

        FIRAuth.auth()?.createUserWithEmail(logintext.text!, password: passtext.text!, completion: {

           user ,error in
           
           if error != nil
           
           {
               if error?.code == 17007{
                   
                  self.hata("Tekrar kayıt oluşturamazsınız",err: error?.code)

                  }else if error?.code == 17026 {

                   self.hata("Şifrenizin 6 karakterli olması gerekiyor.",err: error?.code)
 
                  }else if  self.logintext.text! == "" || self.passtext.text! == "" || error?.code == 17999 {
 
                   self.hata("Lütfen geçerli bir mail veya şifre giriniz",err: error?.code)

                 }

               }
               
           else
           {

               self.hata("Kullanıcı başarıyla oluşturuldu",err: error?.code)

           }

           })
   }

   @IBAction func login(sender: AnyObject) {
       
       
       FIRAuth.auth()?.signInWithEmail(logintext.text!, password: passtext.text!, completion:
           
           {
           
           user,error in
               
               
            if error != nil {

               
               self.hata("Kullanıcı adınızı ve şifrenizi doğru girdiğinizden emin olunuz",err: (error?.code)!)

               }
               
            else {
               
               print(error?.code)
 
               self.hata("Giriş yapıldı",err: error?.code)
               }
       })
   }
   override func viewDidLoad() {
       super.viewDidLoad()
       // Do any additional setup after loading the view, typically from a nib.
   }

   
   override func didReceiveMemoryWarning() {
       super.didReceiveMemoryWarning()
       // Dispose of any resources that can be recreated.
       

   }


}

 
Kodlama tamamlandıktan sonra;
 
  • Kullanıcı tekrar giriş yapabilmesi için temizle butonu yaptık.
  • Daha önceden girilen kayıt için login özelliği ekledik.
  • Login sonucunda veya Yeni kullanıcının kaydı sonrasında dönen bütün hata ve başarılı sonuçları kullanıcıya gösterdik.
  • Firebase kontrol panelinden kullanıcın oluştuğunu teyit ettik.

 
Proje tamamlandıktan sonra simülatörde ekran görüntüleri aşağıdaki gibi gözükmektedir.
screen_shot_2016-06-01_at_15.18.12.png
Firebase kontrol panelinde login olmak için telefondan girmiş olduğumuz test@gmail.com adlı kullanıcıyı görebilirsiniz.
screen_shot_2016-06-01_at_15.09.31.png




Ara
Cevapla


[-]
Hızlı Cevap

İnsan Doğrulama:
Aşağıda görünen onay kutusunu işaretleyiniz. Bu işlem otomatik spam kayıtları önlemek için kullanılır.

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Firebase ile Bildirim Gönderme (Android) comrate 0 2,280 17-09-2017, Saat: 16:20
Son Yorum: comrate

Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


Konuyu Okuyanlar:
1 Ziyaretçi

   
Türkçe Çeviri: MCTR, Forum Yazılımı: MyBB, © 2002-2020 MyBB Group.  



Merih Forum® bilgi paylaşım platformu. 2015-2020 Tüm hakları saklıdır.