MIT App Inventor Firebase Authentication Kullanımı
Herkese Merhaba,
MIT App Inventor’a yeni başlayanlar için bu projemizde Firebase Authentication kullanarak “E-posta ve şifre” ile kullanıcı kaydetme işlemini anlatacağım.
İlk olarak bir Firebase Projesi oluşturalım.
https://www.youtube.com/watch?v=FWTlu2j5QUA yararlanarak yeni bir Firebase projesi oluşturma adımlarını izleyebilirsiniz.
Projemizi oluşturduktan sonra

Authentication kısmından Oturum Açma yöntemini seçerek E-posta/şifre ile oturum açma kısmını aktif hale getiriyoruz.

Firebase projemiz hazır şimdi App Inventor projemiz ile Firebase Authentication arasındaki bağlantıyı kuralım.
İlk olarak Design kısmından projemize aşağıdaki gibi componentlerimizi ekliyoruz.

Kullanıcının mail girebilmesi için EmailTextBox, şifre girebilmesi için PasswordTextBox, bu bilgilerle kayıt ol diyebilmesi içinde ButtonRegister adında bir Buton ekledik.
Kullanıcı yanlış formatta mail girdiğinde Kullanıcıya “Yanlış E-mail” Girdiniz diyebilmek için “LabelError” adında bir label ekledik. Aynı şekilde başarılı giriş yaptığında “Başarılı Giriş yaptınız” diyebilmek için de “LabelSuccess” adında bir label ekledik. Başlangıçta gözükmemek için içindeki text sildik.
Design kısmımız da hazır.
Şimdi Extension olarak FirebaseAuth projemize ekleme sırası.
Bunun için ilk olarak buradan ilgili dosyayı indirmelisiniz.
Daha sonra projemizde Design/Palette kısmında

Import Extension tıklayarak indirdiğimiz dosyayı eklediğimizde yukarıdaki gibi “FirebaseAuth” adındaki component eklendiğini görmelisiniz.
Eklenen bu componenti Design kısmındaki projemizin üzerine tıklayarak projemize ekliyoruz.
Son adım olarak API KEY eklemeliyiz.
Bunun için Firebase’de Proje Ayarlarına tıklıyoruz.

Daha sonra Web API Anahtarını kopyalıyoruz.

Kopyaladığımız API KEY, Components kısmında FirebaseAuth1 tıkladığımızda açılan Properties kısmından ApiKey alanına yapıştırıyoruz.

Artık App Inventor projemiz ile Firebase projemizin bağlantısını sağlamış olduk. Projemizi kodlamaya başlayabiliriz.
Kullanıcı Kayıt Ol butonuna tıkladığında
Kullanıcı Kayıt Ol butonuna tıkladığında Email ve Parola alanına girdiği bilgileri alarak FirebaseAuth componentinin “createUserWithEmailAndPassword” metoduna göndermemiz gerekiyor. Bunun için gerekli kodumuz şu şekilde.

Eğer Kayıt İşlemi Başarısız ise;
Kayıt işleminin başarısız olmasının sebeplerinden birkaçı şöyle;
Kullanıcının yanlış formatta mail girmesi
Kullanıcının 6 karakterden az uzunlukta parola girmesi
Bizler bu hataları yakalayıp kullanıcıyı uyarmalıyız. Bunun için LabelError adında oluşturduğumuz Label ve FirebaseAuth componentinin “FirebaseAuthError” kullanacağız.
Kullanıcının Yanlış Formatta Mail Girmesine Uyarı Mesajı Göstermek
Kullanıcı yanlış formatta mail girdiğinde Firebase “INVALID_EMAIL” adında bir hata mesajı gönderir. Biz bu mesajı yakalayarak kullanıcıya “Yanlış e-mail Girdiniz” diyelim.
Kullanıcının 6 Karakterden Kısa Bir Parola Girdiğinde Uyarı Mesajı Göstermek
Kullanıcı 6 karakterden kısa bir parola girdiğinde Firebase “WEAK_PASSWORD : Password should be at least 6 characters” adında bir hata mesajı gönderir. Biz bu mesajı yakalayarak kullanıcıya “Parola en az 6 karakter olmalı! ” diyelim.
Kullanıcı Aynı Mail İle Kayıt Olmaya Çalıştığında Uyarı Mesajı Göstermek
Kullanıcı aynı mail ile kayıt olmak istediğinde Firebase “EMAIL_EXISTS” adında bir hata mesajı gönderir. Biz bu mesajı yakalayarak kullanıcıya “Girdiğiniz mail zaten kayıtlı! ” diyelim.
Evet tüm bunları yaptığımız kodumuz şu şekilde:

Eğer Kayıt İşlemi Başarılı ise;
Bu durumda LabelSucces label’ını ve Firebase’in “FirebaseAuthUserData” kullanacağız. Kullanıcının localId LabelSuccess’de göstereceğiz.

Kayıtlı Mail Bilgilerini Firebase’de Görmek:
Her şey yolunda gittiyse :)
Kayıtlı olan maili Firebase üzerinde şu şekilde görebiliriz.

Son olarak:
Design ve Blocks kısmının tamamını aşağıda görebilirsiniz.


Umarım işinize yarar. Bol kodlu günler. :)
