Flutter’a Firebase Entegrasyonu ve Temel İşlemler 3: Cloud Storage
Merhaba, bu makale serisinde Firebase servislerinden bahsediyoruz ve serinin üçüncü konuğu Cloud Storage servisi.
Cloud Storage nedir, neden kullanılıyor?
Firebase Cloud Storage; fotoğraf, video, pdf vb. dosya türlerini hızlı ve kolay bir şekilde bulutta depolamanıza yardımcı olmak için tasarlanmıştır. Uygulamalarımızda kullanıcılar tarafından oluşturulan, yüklenen medya dosyalarını Storage’da saklarız.
Cloud Storage çalışma biçimi?
Storage’un çalışma şekli aslında dosya yükleme sitelerinden farksız. Bir örnek üzerinden devam edelim, diyelim ki bir pdf dosyanız var ve bunu diğer insanlarla paylaşmak istiyorsunuz. Bunun için önce Mediafire, Google Drive veya Yandex Disk gibi bir dosya yükleme platformuna dosyanızı yükler ve indirme linkini alır diğer kişilerle paylaşırsınız.
Storage da tam olarak bu şekilde çalışıyor, uygulamamızda kullanıcıdan aldığımız dosya veya dosyaları(örneğin profil fotoğrafı gibi) Storage’a yükleyip depolayabilirsiniz. Kısaca Cloud Storage için uygulamamızdaki dosya ve medyaları sakladığımız bir bulut depolama alanı diyebiliriz, alametifarikası ise hızlı, Flutter ile uyumlu çalışması, ağ kalitesinden bağımsız olarak yüklemeler ve indirmeler gerçekleştirmesi. Yüklemeler ve indirmeler sağlamdır, yani durdukları yerden yeniden başlarlar, bu da kullanıcılarınıza zamandan ve bant genişliğinden tasarruf sağlar.
Daha detaylı incelemek için şu videoyu izleyebilirsiniz:
Cloud Storage hangi dosya türlerini destekliyor?
Hepsi! 😸 Yukarıda Storage’ın File Upload siteleri mantığında çalıştığını belirtmiştik, dolayısıyla Storage sizin neyi depoladığınızla ilgilenmiyor; sadece depoluyor. Burada kilit nokta sizin ilgili dosyayı uygulamanıza çekip Flutter’a entegre edip doğru bir şekilde dosyayı göstermesi.
3, 2, 1 action!
Öncelikle Cloud Storage’ın arayüzüne bakalım daha sonra ise nasıl bağlanıyoruz, referans sistemi ve dosyalara erişimden bahsedelim. Daha da sonrasında ise örnek bir uygulama geliştireceğiz.
Firebase Cloud Storage arayüzü
Görüldüğü üzere bir klasör var, bu klasörün adını Authentication servisinden o anki kullanıcının UID bilgisini alıp atadım karışıklılık olmaması için. (IUD bilgisi uniquedir.) Buna ek olarak manuel dosya yüklemek için “Upload File” butonu da var.
Kullanıcı klasörün içine girelim;
arayüz kısmı basitçe bu kadar.
Storage ile bağlantı kuralım
Referans yapısı
Firestore’da olduğu gibi Storage servisinde de dosyalara erişmek, üzerinde işlem yapmak için referans yapısı bulunuyor. Örnekler üzerinden dosyalara erişelim;
Dikkat ettiyseniz .ref() ile başlayıp daha sonra istediğim dosyaya ulaşmak için .child() kullandım. Storage’da alt klasörlere/dosyalara ulaşmak veya oluşturmak için dilediğiniz kadar .child() metodunu kullanabilirsiniz. Bunun anlamı genelde “bir alt klasöre in”dir. Birazdan örneklerle daha iyi kavrayacağız bu konuyu.
Şu an elimizde sadece ilgili dosyanın referansı var. Listeleme, yükleme, indirme ve silme işlemlerine bakalım;
Listeleme (Listing)
Yükleme (Upload)
upload işlemlerini genelde .putFile() metodu ile yaparız.
İndirme (Download)
Bunun için öncelikle dosya dizin standartlarını destekleyen ek bir pakete ihtiyacımız olacak, pub.dev adresinden path_provider paketini projemize ekleyip import edelim.
Daha sonrasında fonksiyonumuzu yazalım.
Silme (Delete)
Dosya yüklerken/indirirken duraklatma, devam ettirme, iptal etme
Yukarıda Cloud Storage yüklemelerinin sağlam olduğundan, yükleme ve indirme yaparken; kaldığı yerden duraklatma, devam ettirme, iptal etme seçeneklerini bize sunduğundan bahsetmiştik.
Ayrıca burada oluşturduğumuz UploadTask tipindeki task nesnesi üzerinden transfer edilen byte vs gibi verileri alıp bir progress nesnesi ile yükleme durumunu gösterebilirsiniz. Örnek: %74 yüklendi gibi.
Bilinmesi gerekenler
Cloud Storage’ı kulanırken genelde Firestore ile entegre kullanıyoruz. Yukarıdaki örnek kod kullanımlarına baktığınızda hep ismi belirli dosyalarla işlemler yaptık fakat eğer kullanıcı etkileşimli bir app yazarsanız kullanıcının yüklediği dosyanın adını, yolunu vs. statik olarak çekemezsiniz, sürdürülebilir bir yöntem değildir. Sürdürülebilir olması için kullanıcının Firestore’da ki tablosuna bu dosyayı yazmanız daha doğru bir yöntemdir.
Cloud Storage’a bir dosya yüklendikten sonra yaygın yöntem olarak o dosyanın indirme linkini alırız ve ardından bu indirme linkini Firestore’a yazarız. Firestore’dan veriyi çekerken bu indirme linkini de alırız ve uygulamamızda gösteririz.
Nerelerde statik kullanılır?
Uygulamanızda eğer sabit dosyalar varsa statik olarak uygulama içerisine doğrudan çekebilirsiniz. Örneğin uygulamanızın bir gizlilik sözleşmesi var diyelim, bunu doğrudan Storage ana dizininde “GizlilikSozlesmesi.txt” adında bir dosyada tutup app içerisine çekebilirsiniz.
Örnek bir app yazalım. 🚀
Boş zamanlarımda programmerhumor.io ‘da “programmer memes” içeriklerine bakmaktan hoşlandığım için bu makalede böyle bir örnek app geliştirelim diye düşündüm. 🤓
Görüldüğü üzere uygulamamıza kullanıcı giriş yapıp anasayfada tıpkı programmerhumor.io’da olduğu gibi memeleri görüyor, isterse kendisi de paylaşım yapabiliyor.
Artık kod kısmına geçebiliriz. ⚡️
Öncelikle kullanıcı girişi için Authentication makalemizde kurduğumuz altyapıyı kullanacağım ve kullanıcı doğrulandıysa FSCMemes sayfasına yönlendireceğim.
daha sonrasında, fsc_memes.dart sayfamda bir StatefulWidget oluşturup FSCMemes sayfamı tasarlıyorum
şimdilik anasayfamı bu şekilde bırakıp yeni gönderi ekle sayfamı oluşturacağım. Daha sonra bu sayfaya dönüp eklenen verileri çekip göstereceğiz.
fsc_memes_new.dart dosyamı oluşturup NewMeme adında bir StatefulWidget oluşturuyorum. Daha sonra ise kullanıcıdan bir imaj dosyayı isteyeceğimiz için kolaylık açısından image_picker paketini projeme dahil edip import ediyorum.
Ardından body parametresine geliyorum ve resim ekleme ile metin ekleme widgetlarımı yazıyorum.
Ekle butonumuzu yazalım
Test edelim.
Başarılı bir şekilde dosyamız eklendi.
Anasayfayı tasarlayalım.
Yukarıda anasayfanın AppBar kısmını tasarlamıştık, şimdi body kısmını tasarlayalım ve verileri çekelim.
Test edelim.
Şu an başarılı bir şekilde programmerhumor.io’nun mobil bir klonunu yapmış olduk. Uygulamamız veritabanında olan 3 kaydın hepsini anasayfada gösteriyor.
Son söz ve kapanış
Sizin de farkettiğiniz üzere Cloud Storage servisinde kilit nokta dosyayı yükleme veya indirme değil, dosyayı kullanıcıdan alma ve servisten geldiğinde uygulama içerisinde düzgün bir şekilde göstermek. Bunun için de genelde paketleri kullanıyoruz, bu makalede resim dosyalarıyla işimiz olduğu için image_picker paketini kullandık. Başka projelerde farklı dosya türleri için farklı paketler kullanmamız gerekecek çünkü kilit nokta paketler. 🤓🔥
Bu makalede Cloud Storage ile ilgili bilmeniz gereken şeyleri elimden geldiğince anlattım ve anlattıklarımı kapsayan örnek bir uygulama geliştirdim, umarım faydalı olmuştur.
Proje GitHub Linki: https://github.com/bariskodas/FSC_FirebaseStorageExample
