Oğuzhan ÇAKAR
0541 471 21 94
0541 471 21 94
0541 471 21 94
Merhaba arkadaşlar. Sizlere çok hoşuma giden bir sistemden bahsetmek istiyorum :) Bugün bir çok farklı websitelerde Abone Ol şeklinde bir sistem var. Mantık gayet basit abone olmak için mail adresi girilir ve gerekli kodlamalar ile dinamik olarak mail gönderimi yapar. Çok işe yarıyor ama bence Tarayıcı Bildirim Sistemi olaya daha farklı bir renk katıyor :) Tarayıcı Bildirim Sistemini sıfırdan nasıl yazabiliriz açıkcası bunu araştırmadan birşey diyemem bakmak lazım .) ki zaten bir çok yazılımcıdan da duyduğum bir söz bu cümleye tam uyacaktır :) Amerikayı tekrar keşfetmeye gerek yok :)
Böyle bir sistem için bize yardımcı olacak şey OneSignal. Bildirim gönderimi manuel olarak çok basit zaten ama tabi ki bunu otomatik bir sisteme çevirmemiz işimizi çok kolaştıracaktır. Bu konuda da bize tabi ki api sistemi yardımcı olacak.
Vakit kaybetmeden başlayalım. İlk olarak OneSignal adresine girip bir üyelik oluşturalım.Üye olup giriş yaptıktan sonra karşımıza ilk çıkan sayfa oluşturduğumuz tüm uygulamaları gösteren bir sayfa (All Applications). Add a new app diyerek uygulama oluşturmaya başlıyoruz ve karşımıza bir popup penceresi geliyor. Uygulamaya bir isim vereceğiz. Buraya gireceğimiz isim bize özel bir isim olacağından tanımlayıcı bir isim girmenizde bir sakınca yok. İsimi girdikten sonra bize 7 farklı bir seçenek sunuyor. Bunlar : İos , Android , Windows Phone , Amazon Fire , WebSite Push , Chrome Apps , Mac Os X. Gördüğünüz gibi Seçenek çok :) Bir çok farklı yazılım dalın da bize yardımcı olabileceğini bence kanıtladı bu seçenekler ile :) WebSite Push seçeneği ile yolumuza devam ediyoruz. Google Chrome & Mozilla Firefox ve Apple Safari olarak bize 2 ayrı seçenek sunuyor. "Ya siteme giren kişi Safari kullanıyorsa ama uygulamada Chrome seçeceğim ne yapmalıyım" Şeklinde hiç düşünmenize gerek yok. Böyle bir durumda 2 farklı şekilde uygulamayı oluşturmamızda hiç bir sorun olmaz. Api Sdk kullanımında bu hesaba katılmış birşey :) Google Chrome & Mozilla Firefox seçerek ben devam ediyorum siz Apple Safariyi de seçebilirsiniz tercih sizin. Daha sonra uygulamayı kullanacağımız site adresini giriyoruz ve sitenizde SSL desteği yok ise My site is not fully HTTPS kısmını seçili hale getiriyoruz. Bu seçeneği seçikten sonra aşağı kısımlarda Choose Subdomain seçeneği bulunmaktadır. OneSignal üzerinde bir subdomain oluşturacağız. Burada oluşturduğumuz adres bildirimin geleceği adres olacaktır. Yani bu adres abone olan herkese gözükecektir. Ayrıyeten URL Yazdığımız kısımın altında Icon desteğide mevcut bulunmaktadır. 192x192 şeklinde icon adresini girerseniz uygulamanızda belirlediğiniz icon gözükecektir. Next diyerek devam ettikten sonra WebSite Push , Wordpress ve Server Api seçeneklerini bize sunuyor. WebSite Push diyerek devam edelim. Son sayfadayız aslında uygulama oluşturuldu fakat bize uygulamayı test edip abone olmamızı istiyor. Şimdi bu sayfada bulunan Your App ID olduğunu görelim ve sayfayı kenara koyup uygulama test ortamımızı hazırlayalım ki uygulamayı test ettikten sonra Check Subscribed Users butonunu tıklayalım.
Şimdi uygulama oluştururken yazdığımız sitede html veya php dosyası oluşturalım.
Uygulama oluştururken ilk olarak localhost denedim ben fakat localde çalışmadı. Sizde ilk olarak localde deneyebilirsiniz ama çalışmazsa şaşırmayın :)
Oluşturduğumuz html veya php dosyasının head tagına aşağıdaki kodları yazalım.
Kodlar içerisinde Api id ve Sub domain bilgilerini doğru girdiğinizde ve yazdığınız URL de dosyayı yayınladığınızda Sağ Altta kırmızı topun olduğunu görmüş olacaksınız :) Tıklayın ve abone olun daha sonra ise Api id aldığımız popup penceresine geri dönelim ve Check Subscribed Users butonunu tıklayalım. İşte bu kadar artık uygulamamızı oluşturduk.
Farkettiğiniz gibi jQuery kodlarında bazı tasarım farklılıkları yapabiliyoruz ve "Abone ol" gibi bazı mesajları kendimiz ayarlayabiliyoruz.
Manuel olarak bir bildirim gönderelim. Bunun için solda bulunan menüde New Message tıklayalım. Gördüğünüz gibi Title ve Content bulunmakta ve Default dil olarak English seçili. Buradan da anlayacağınız üzere aynı uygulama içerisinde birden fazla dil seçeneği oluşturabiliyoruz. Şuan bu bize lazım değil English seçili olmasıda önemli değil. Title ve Content değerlerini girelim Daha sonra aşağı da Options seçeneği bulunuyor ona tıklayalım. Diğer ayarlara bakmadan Launch URL kısmını aktif edelim. Bunu aktif etmemizin sebebi bildirime tıklandığında gideceği adresi seçmemiz bu bizim işe yarayacak önemli kısımlardan biri. Buraya url girdikten sonra aşağıda bulunan Preview butonuna tıklayalım. Göndereceğimiz bildirimin son halini bize gösteriyor buna göz attıktan sonra aşağıda bulunan Send butonuna tıklayalım. Herşey doğru yaptıysanız bildirim geldi :)
Manuel bildirim sistemini gerçekleştirmiş olduk. Farkettiğiniz gibi sistemde çok fazla özellik bulunmakta soldak menüyü incelerseniz abone olan kullanıcılar falan bir çok bilgi bize sunuyor. Bunu siz inceleyebilirsiniz zaten.
Şimdi ise manuel bildirimi yanında sistemin sunduğu api sistemiyle curl yardımı ile uzaktan bildirim göndereceğiz. Hazırladığım proje aslında çok basit birşey OOP ile yapmaya gerek bile yoktu ama bu projeyide bilerek OOP ile yaptım. Çünkü hiç OOP bilmeyen kişi bu proje ile OOP yapısına başlangıç olarak giriş yapmış olacaksınız. Anlayacağınız gerek olmadığı halde basitliği sayesinde yararlı olacağını düşünerek OOP ile hazırladım :)
Proje içerisinde Bildirim mesajını ve Mesaja tıklandığında gideceği linki belirleyerek curl ile post gönderiyoruz. Proje Github linkini ve Demo Linkini makalenin en altında bulabilirsiniz. Proje içerisinde oneSignal.php ve index.php 2 php dosyası bulunmakta. oneSignal.php classımızın bulunacağı php dosyası olacak. oneSignal.php içerisinde $apiKey ve $restApiKey olmak üzere 2 değişkenimiz bulunmakta. $apiKey değerini zaten aldık. $restApiKey değerini alabilmek için yine sol menüde bulunan App Setting tıklıyoruz. Çıkan sayfada planform sayfası bulunmaktadır. Burada planform seçeneklerimizi arttırabiliriz ama bizim şuanki işimiz yukarıdaki tab menüde bulunan Keys & IDs kısmına geçiyoruz. Gördüğünüz gibi Rest Api Key değerimizde burada bulunmakta. Bu değerleri oneSignal.php içerisine yerleştirdikten sonra geri kalan kodları inceleyerek OOP mantığını anlayacağınızı düşünüyorum. __construct ile bu sınıf her çağırıldığında api keyi return etmesini yani çağırılan sayfaya gönderilmesini istiyoruz. sendMessage fonksiyonu ile de curl ile post edip bildirimi göndermeyi sağlıyoruz.
index.php de ise sınıf dosyasını require ile çağırıyoruz ve sınıfımızı $oneSignal değişkenine atıyoruz. index içerisinde basit bir form yapısı bulunmakta. Bu Form ile Bildirim mesajını ve Bildirime tıklandığında gideceği adresi giriyoruz. butona tıklandığını kontrol etmek için $_POST değerini kontrol ediyoruz ve bir post var ise sınıf içerisinde ki sendMessage fonksiyonunu çalıştırıyoruz. Bu kadar :) Projeyi indirip kontrol ederseniz veya github üzerinden kodlara bakarsanız ne kadar basit olduğunu zaten görmüş olacaksınız. Kolaylık olduğundan dolayı sadece yazılı anlatım yaptım kod paylaşma gereği duymadım ama siz yinede herhangi birşeyi anlamazsanız bana sormaktan çekinmeyin lütfen.
Ben projeyi hazırlarken sadece bildirim göndermeyi ele aldım onun haricinde olsan fonksiyonlara pek gerek duymadım. Belki vaktim olursa örnek olması açısından daha sonra github üzerinden projeyi güncelleyebilirim. İsterseniz Dökümantasyon sayfasını inceleyip işinize yarayacak olanı kullanabilirsiniz ve hazırladığınız eklentiyi github üzerinden de projeme ekleyebilirsiniz tabi ki. Zaten dökümantasyon sayfasında bir çok fonksiyonun bir çok yazılım dilinde ki kulanımını görebilirsiniz. Bildirim butonunu daha özelleştirmek isterseniz ise dökümanda bulunan Customizing Notifications sayfasını inceleyebilirsiniz.
Bildirimlerde bazen gecikme olabiliyor haberiniz olsun.
Bu arada zaman bulup da bu bildirim sistemini bloğumada kurdum Abone olarak yayınladığım her dersten rahatlıkla haberdar olabilirsiniz :) Bir daha ki derse görüşmek üzere :)
Github & Demo
Proje İndirme & İnceleme : Github
Projenin Demosu : OneSignal Api
Yorumlar