OneSignal Api Kullanımı

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 SSH 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.

    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
    <script>
        var OneSignal = window.OneSignal || [];
        OneSignal.push(["init", {
            appId: 'Api Key',
            autoRegister: false, /* Set to true to automatically prompt visitors */
            subdomainName: 'Oluşturduğumuz Sub Domain',
            notifyButton:
            {
                enable: true, /* Required to use the notify button */
                size: 'large', /* One of 'small', 'medium', or 'large' */
                theme: 'default', /* One of 'default' (red-white) or 'inverse" (white-red) */
                position: 'bottom-right', /* Either 'bottom-left' or 'bottom-right' */
                offset: {
                    bottom: '0px',
                    left: '0px', /* Only applied if bottom-left */
                    right: '0px' /* Only applied if bottom-right */
                },
                prenotify: true, /* Show an icon with 1 unread message for first-time site visitors */
                showCredit: false, /* Hide the OneSignal logo */
                text: {
                    'tip.state.unsubscribed': 'Abone ol',
                    'tip.state.subscribed': "Aramıza Hoş Geldin :)",
                   
                    'message.prenotify': 'Bildirimlere Abone Olmak İçin Tıklayın.',
                    'message.action.subscribed': "Aramıza Hoş Geldin :)",
                    'message.action.resubscribed': "Abone oldun. Hoşgeldin :)",
                    'message.action.unsubscribed': "Abonelikten Ayrıldın.",

                    'dialog.main.title': 'OneSignal Api',
                    'dialog.main.button.subscribe': 'Abone Ol',
                    'dialog.main.button.unsubscribe': 'Abonelikten 
                }
            },
			
            welcomeNotification: {
				"title": 'Başlık',
				"message": 'Hoşgeldin Bildirim Mesajı',
				'url': 'http://www.ogzcakar.net',
			},
			
			promptOptions: {
				siteName: 'Site İsmi',
				actionMessage: "Bildirim Kabul Etme Panel Mesajı",
				acceptButtonText: "Kabul Et",
				cancelButtonText: "Vazgeç",
				
				exampleNotificationTitle: 'Örnek Bildirim',
				exampleNotificationMessage: 'Bildirim Mesajı',
				exampleNotificationCaption: 'Bildirim Kabul Etme Paneli Alt Kısım',
			},
			
        }]);
    </script>

 

 

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

Avatar
Oğuzhan ÇAKAR  - 3 Yıl Önce
Merhabalar @Serkan GüR konu ile ilgili detaylı bir araştırma yapmadım açıkcası makaleyi yenileyecek kadar vaktim olmuyor ne yazık ki falat @Burak POLAT için yazdığım cevap "Segment" olayı işinize yarayacağını düşünüyorum. Bir kaç link bırakmışım lütfen onları biraz inceleyin yardımcı olacağını düşünüyorum
Avatar
Serkan GüR  - 3 Yıl Önce
Merhabalar @Burak POLAT dediğin aynı problemi bende yaşıyorum ve hala çözemedim. Sorununu hallettiysen çözümünü paylaşabilir misin?
Avatar
Oğuzhan ÇAKAR  - 3 Yıl Önce
Merhabalar @Burak POLAT makalenin işe yaramasına sevindim :) Onesignal api dökümantasyonuna bir göz attım ve Segment oluşturma olduğunu gördüm incelemeni tavsiye ederim işine yarayabilir belki Segment oluşturabilmek için OneSignal giriş yapıp "Users" menüsünde "New Segment" bulunuyor. Api Kullanımı => https://documentation.onesignal.com/reference#section-segments-usage Api Kod Örnekleri => https://documentation.onesignal.com/reference#section-send-to-a-specific-segment-create-notification
Avatar
Burak POLAT  - 3 Yıl Önce
Merhabalar uzun sürece buna benzer bir döküman aradım ve sonunda sizde buldum.Bir android programı geliştiriyorum sizin kodlarınız sıkıntısız çalışıyor merak ettiğim ve bulamadığım birşey var bu bildirimi gönderdiğimizde uygulamadaki herkese gönderim yapıyor,ben sadece onesignal deki USERS > ALLUSERS Altındaki Kullanıcı ID'sine özel göndermek istiyorum bununla ilgili onesignal'in api dökümanlarını inceledim sizin kodlarınıza ekleme vs. yaptım fakat yapamadım bana yardımcı olabilirseniz çok sevinirim. Döküman için tekrar teşekkürler.
Avatar
Oğuzhan ÇAKAR   - 4 Yıl Önce
Merhabalar @Alp Kılıç Öncelikle ben Teşekkür ederim. Elimden geldiğince yardımcı olmak isterim tabi ki. Yorum yaparken bıraktığınız mail adresi ile iletişime geçiyorum ordan konuşabiliriz detayları :)
Avatar
Alp Kılıç  - 4 Yıl Önce
Yaklaşık 6 aydır anlatımınızdan yola çıkarak onesinali kullandım. Teşekkürler. Ama sitemiz HTTPS sertifikası aldığı için yeniden düzenleme yapmak zorunda kaldık. Ama bir türlü bildirim ve izin ve onay kutucuklarını gösteremedik. Yardımcı olurmusunuz...
Avatar
Oğuzhan ÇAKAR  - 4 Yıl Önce
@Alp Bıraktığınız link Android Uygulama için benim anlattığım ise tarayıcı bildirimi için belki makaleyi okurken sizin bıraktığınız link de birilerinin işine yarar tabi :) Teşekkür ederim
Avatar
alp aslan   - 4 Yıl Önce
http://www.aattk.net/2017/05/onesignal-ile-android-bildirim-gonderme.html burayada bakabilirsiniz.android için anlatım yapılmış. En yeni versiyonu olan Onesignal 3 için anlatılmış.

Düşünceni Bizimle Paylaş