Firebase Web Push Kurulumu (2. Ders)
Google firebase web push sistemi aracılığıyla sitenize web push bildirimleri eklemek için yazımızın detaylarına göz atabilirsiniz.
Günümüz web sitelerinin çoğunda karşılaştığımız bildirim sistemini bu yazımızda sizlerinde kolay bir şekilde nasıl yapacağınızı anlatacağım. Öncelikle bildirim sistemimizin alt yapısını google firebase oluşturuyor. Google firebase tarafında oluşturacağınız uygulama, jquery ve php&mysql aracılığıyla basit bir şekilde bu sistemi oluşturmanız mümkün. Lafı fazla uzatmadan serimizin ikinci yazısına başlayalım.
Bir önceki yazımızda google firebase sistemi için gerekli olan keylerimizi nasıl edineceğimizi anlatmıştık. Henüz o yazımıza göz atmadıysanız buraya tıklayarak o yazımızı okuyabilirsiniz.
Serimizin ikinci yazısına tekrardan hoşgeldiniz. Bu yazımızın içeriği almış olduğumuz keyler ile google firebase altyapılı bildirim sistemini web sitemize entegre etme aşamaları olacaktır. Entegrasyon aşamasında ilk olarak google firebase sdk kütüphanelerini sitemize ekleyerek başlamamız gerekiyor. Kütüphaneler için web sitemizin </ body> tagından önceki kısmında;
<*script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js">
<*script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-messaging.js">
<*script>
var firebaseConfig = {
apiKey: "api-key",
authDomain: "project-id.firebaseapp.com",
databaseURL: "https://project-id.firebaseio.com",
projectId: "project-id",
storageBucket: "project-id.appspot.com",
messagingSenderId: "sender-id",
appId: "app-id",
};
<*/script>
Not: * işaretini siliniz.
javascript kodlarını ekleyerek sayfamıza kütüphaneleri dahil ediyoruz. FirebaseConfig kısmında girmemiz gereken değerleri en kolay yöntemle https://console.firebase.google.com/ adresine gidip oluşturduğumuz uygulamayı seçtikten sonra açılan sayfada uygulama isminin altında bulunan (x Uygulama yazan bölüm) kısma tıklayıp bu bölümde uygulama isminin yanında bulunan ayarlar iconuna tıkladıktan sonra yeni açılacak sayfanın alt kısmında bulunan ve başında firebase sdk snippets yazan bölümde bulabilirsiniz. Yinede açıklarsak;
- api-key: bir önceki yazımızda elde etmiş olduğumuz key
- authDomain: uygulamaya_verdiğiniz_ad.firebaseapp.com
- databaseURL: https://uygulamaya_verdiğiniz_ad.firebaseio.com
- projectId: Uygulamayı oluştururken vermiş olduğunuz ad
- storageBucket: uygulamaya_verdiğiniz_ad.appspot.com
- messagingSenderId: Uygulama kimliği içerisinde bulabilirsiniz. (Örn: 1:17780938712:web:878edf7447aec6582244ad uygulama kimliğinde koyu yazılan kısım)
- appId: Uygulama kimliğiniz.
Bu ayarlarlamaları yaptıktan sonra sitemizin header kısmına ise;