Flutter’da Şifremi Unuttum Özelliği || Node.js - MongoDB

Kadir Bekar
Flutter Türkiye
Published in
3 min readNov 8, 2020

Merhabalar. Bir projemde “Şifremi Unuttum” konusunu uygulamam gerekmişti. Bugün de fırsatını bulduğum için uyguladığım yöntemi sizlere aktarmak istiyorum, umarım faydalı bir içerik olur.

Öncelikle projelerde kullandığımız paketleri ve klasör yapısını görmek için bir resim ekleyerek başlayalım.

Paketlerimiz:

Klasör yapılarımız — Flutter | Node.js

MongoDB veritabanına kayıt edeceğimiz kullanıcının modelini oluşturalım ve diğer sayfalarda kullanabilmek için export edelim.

user_model.js

Şimdi sırası ile bize lazım olan metotlar neler bir göz atalım ve metotlarımızı yazalım.

1- Yeni bir kullanıcı kayıt etme

2- Veri tabanında kullanıcı sorgulama

3- Rastgele şifre üreten bir metot

4- Şifremi unuttum talebi geldiğinde parametre olarak gelen mailin veri tabanında sorgulanması, mail kayıtlı ise yeni üretilen şifreyi eskisi ile güncelleyen metot

5- Rastgele üretilen şifreyi parametre olarak gelen maile gönderen metot

Yeni bir kullanıcı kayıt etmek için kullandığımız metot
Parametre olarak gönderilen bilgiler veritabanında var mı yok mu diye kontrol eden metot
Rastgele şifre üreten metot, döngü uzunluğunu üretmek istediğim şifre kadar belirliyorum
Şifremi unuttum isteği yapıldığında eski şifreyi güncelleyen metot
Yeni üretilen şifreyi parametre olarak gelen maile gönderen metot

Mobil uygulamamızdan istek atacağımız metotları yazdık. Şimdi ise Flutter tarafında kullanacağımız modelleri tanımlayalım.

Yeni bir kullanıcı oluştururken veya back-end tarafından gelen kullanıcının bilgilerini parse ederken kullanacağımız model.
Back-end tarafına yapılan istekten sonra gelen responsu parse etmek için kullanacağımız model.

Back-end ile iletişim kuracağımız metotları tanımlamadan önce get_it paketi ile kullanacağımız bazı servisleri Singleton olarak tanımlayalım.

Singleton pattern sayesinde oluşturmak istediğimiz nesnenin bellekte kapladığı erişim kodu(instance) aynı olur yani uygulama genelinde birden fazla aynı nesneyi oluşturmak istediğimiz zaman hep aynı instance üzerinden erişim sağlamış oluruz. Bu işlem sayesinde performans olarak oluşacak problemi minimize etmiş oluruz. Tabi ki bu işlemin etkisini büyük uygulamalarda daha kolay anlayabiliriz.

Lazy singleton => Nesne oluşturma isteği atılana kadar hafızada yer ayırmaz.

Şimdi ise back-end ile iletişim kuracağımız metotları Flutter tarafında tanımlayalım.

Back-end tarafına bir istek yapıldığında cevap gelene kadar ekranı meşgul gösterebilmek için provider paketi ile yapılan isteği dinleyebiliriz. Bu işlem için ayrı bir dosya açalım ve metotlarımızı yazalım.

notifyListeners() => Bir değişiklik olduğunda, dinleme yapan yerleri uyarmak için kullanıyoruz.

Provider paketi ile yapılan değişikliği dinlemek için birçok yöntemimiz var, biz bunlardan Consumer olan çözümü kullanacağız. Kısaca API’ye bir istek yapıldığında ekranda CircularProgressIndicator widgeti gösteriyoruz cevap geldiğinde ise göstermek istediğimiz tasarımı ekrana basıyoruz.

Bu tür işlemler için daha sağlıklı yapılar kurmalıyız. Örneğin apiye bir istek yapıldığında ekranda CircularProgressIndicator gösterildiği zaman geri butonunun pasif bırakılması ve ekrandaki widgetlerin tıklanamaz olması gibi. Bunun içinde kendi kullandığım yöntemi başka bir yazıda aktarmaya çalışacağım.

Tabi ki provider nesnelerine uygulama genelinde erişebilmek ve kullanabilmek için MaterialApp widgetimizi MultiProvider (birden fazla provider’i tanımlamak için kullanılan bir widget, tekli olan yapı da kullanılabilir) ile sarmalıyoruz, hazırladığımız sınıfları entegre ediyoruz.

Son olarak ise UI tarafından API’ye yapılan isteklere bir göz atalım.

Uygulamayı ilk açtığınız zaman sizi karşılayacak olan ekranı ekleyip yazıyı sonlandırıyorum.

Projenin tamamına aşağıdaki linkten ulaşabilirsiniz. Umarım faydalı bir içerik olmuştur. Herhangi bir geri bildirimde bulunursanız çok memnun olurum. Mutlu, umutlu günler dilerim.

--

--