RandomBook Angular 7 ve Firebase Örnek Proje
Bu seferki projemizde angular ile firebase (firestore) kullanarak basit bir random kitap öneren bir uygulama yapacağız. İlk olarak senaryomuza bakacak olursak. Kullanıcı sayfaya girer ve kategorilerden birini seçer ekranda bulunan get butonuna basarak o kategoriye sahip kitaplardan birini rastgele getirir. Dilerse kullanıcı kategori ve kitap ekleyebilir.
İlk olarak firebase üzerinde proje olutşuruyoruz. Daha sonra database altında koleksiyon ekle diyerek Categories ve Books isminde iki koleksiyon ekliyoruz.
ng g class Book --type=modeule ve ng g class Category --type=module ile projemizde Book ve Category modelleri oluşturuyoruz.
class Book{id:string;Name:string;Author:string;CoverPhoto:string;Categories:string[];}class Category{id:string;Name:string;}
ng g s category ve ng g s book ile firebase üzerinde crud işlemlerini yapabilmemizi sağlayacak servisleri oluşturuyoruz.
Yukarıda da görüldüğü gibi CategoryService’in constructor’un da AngularFirestore ile dipendency injection uyguluyoruz. getCategories() methodu altında firebase’den Categories koleksiyonunda ki verileri getiriyoruz. addCategory(category:Category) ile yeni oluşturduğumuz category dökümanını Categories koleksiyonuna ekliyoruz.
BookService’te ise addBook(book:Book) methodu ile parametre olarak gelen book’u Books koleksiyonuna ekliyoruz. getBook(category:string) ile Books koleksiyonunda ilgili parametriyi Categories arrayinde içeren book dökümanlarını getiriyoruz.
Gelelim app.component.ts dosyasına burada kullanıcı sayfaya giriş yaptığında categorservice üzerinden kategoriler çekilecek ve çekilen kategoriler angular materila’ın ToggleButtonGroup ile ekranda listelenecekler. Kullanıcı kategorilerden birini seçip get butonuna tıkladığında ilgili kategoriyi içeren kitaplardan birini random seçecek ve AngularMaterial’ın DialogCompenenti ile gösterilecek.
İlk olarak AppComponent’in constructor’ın dipendency injection ile categoryservice ve bookservice’i appcomponentimize ekliyoruz.Bu sayede yazığımız servislerin methodlarına erişebileceğiz. AppComponent’i OnInit interface’inde implement ediyoruz. ngOnInit()metodu ekleniyor ve içerisinde getCategories() metodu ile categoryservice üzerinde kategorileri çekiyrouz. Gelen kategorileri categories:Category[] olarak tanımladığımız diziye aktarıyoruz.
app.component.html dosyası içerisinde mat-button-toggle-group elemnti oluşturuyouz içerisine mat-button-toggle elementiningFor ile categories dizisine bağlıyoruz. Bu sayede catgories nesnesine verilerimiz geldiğinde otomatik olarak toggle butonlarımız listelenecek.
Get butonumuz catgory butonlarımızdan biri seçilmediğinde disable olarak belirtiyoruz. Click eventi tetiklendiğinde getBook(categoryGroup.value) ile seçili kategory’yi paramtre olarak getBook metoduna gönderiyoruz.
getBook metodu ise bookservice üzerinden ilgili kategoriyi içeren kitapları bize getiriyor. gelen dizide eğer kitap sayısı 0'dan büyük ise diziden rastgele bir kitap seçip bookdeğişkenine aktarıyoruz ve open dialog metodunu çağırıyoruz değilse sweetAlert ile ilgili kategori de kitap bulunmadığın bildiriyoruz.
openDialog metodu ile constructor’da eklediğimiz dialog:MatDailog değişkeninin open metoduna BookDialogComponent ve book’u parametre olarak gönderiyoruz.
Add Catgory butonuna tıkladığımızda openAddCategory() metodunu çağırıyoruz ve kullanıcının kategori ekleyebileceği bir dialog nesnesi gösteriyoruz.
Add Book butonuna tıkladığımızda openAddBook() metodunu çağırıyoruz. Kullanıcının kitabı ekleyebileceği dinamik bir form ekranı gösteriyoruz.
Sonraki yazıda görüşmek üzere.
Yararlanılan Kaynaklar: https://www.techiediaries.com/angular-firestore-tutorial/
Projenin github linki
Demo için linki
