Web Push Notification Nedir? Nasıl Kullanılır? Service Worker Kullanımı | Netlify|Heroku|Vue|Node.js Bu dersimizde herhangi bir özel servis kullanmadan (yani OneSignal ya da Firebase gibi) kendimize ait Native bir web push notification nasıl geliştiririz onu görüyoruz. Bunu yaparken 2 farklı bölüm ile ilerleyeceğiz. Birinci bölümde Push Notification için gerekli olan temel bilgileri aldıktan sonra kategori bazlı nasıl bildirim gönderebiliriz? sorusuna cevap verecek bir uygulama geliştiriyoruz. Kaynaklar ve Daha Fazlası için; github.com/gkandemi/web-push-notifications TimeCodes: 00:00:00 Giriş 00:03:30 UI Kodlaması | Push Notification Üzerine Basit bir Uygulama 00:06:55 Backend Kodlaması | Push Notification Üzerine Basit bir Uygulama 00:15:18 Service Worker Kodlaması | Push Notification Üzerine Basit bir Uygulama 00:18:50 UI için Netlify Deployment 00:21:45 Notification Göndermek için Client Bilgilerinin Alınması 00:28:03 İlk Notification'ın Gönderilmesi 00:47:54 1.Bölümün Sonu | Neler Yaptık? 00:50:00 2.Bölüm Girişi | Kategori bazlı Notification Göndermek | Uygulama 2 00:53:03 Backend Kodlaması | Express, Body Parser, UID, Cors, Web-Push Kurulumları ve Rest API 01:10:58 UI Kodlaması | Vue Uygulaması Oluşturmak ve Temanın Giydirilmesi 01:14:56 Component'lerin oluşturulması 01:22:52 Service Worker Kodlaması 01:33:45 UI için Netlify Deployment 01:39:47 Backend için Heroku Deployment 01:49:25 Notification Göndermesi için Backend Kodlaması 01:55:15 Cloud üzerinden Testlerin Yapılması 01:58:28 2.Bölüm Sonu Ayrıcalıklardan yararlanmak için bu kanala katılın: ua-cam.com/channels/YT5QTr38bwp85Pka8YSVIg.htmljoin Kanal içerisinde bulabileceğiniz eğitimlerden bazıları; 1. PHP Programlama eğitimi 2. Codeigniter framework eğitimi 3. HTML ve CSS Eğitimi 4. JavaScript Eğitimi 5. JQuery Eğitimi 6. Vue js Eğitimi 7. Nuxt js Eğitimi 8. Node js Eğitimi 9. Express js Eğitimi 10. JavaScript Frameworkleri 11. MongoDB Eğitimi 12. MySQL Eğitimi 13. Docker Eğitimi 14. Go programlama Eğitimi 15. PHP ile proje Eğitimi 16. Codeigniter ile proje Eğitimi 17. Vue js ile proje Eğitimi 18. Nuxt js ile proje Eğitimi 19. Yeni web teknolojilerin tanıtımları 20. IDE kullanımları gibi daha birçok eğitime ücretsiz olarak ulaşabilirsiniz. Eğitimleri izlemek için Oynatma listelerine göz atmayı kesinlikle unutmayın!!! Proje Eğitimleri; ► Asp.Net ile Okul Projesi: ua-cam.com/play/PL_f2F0Oyaj49bsuq6iLrg1qyZtekSCgPW.html ► Firebase ToDo List Yapımı : ua-cam.com/play/PL_f2F0Oyaj48rnkNZaHqnXiZrs4q7ogex.html ► PHP Codeigniter ile Multi Session Yapımı : ua-cam.com/play/PL_f2F0Oyaj480n9rg6PEwk-6O4NJcneFh.html ► PHP Codeigniter Otel Rezervasyon Sistemi : ua-cam.com/play/PL_f2F0Oyaj49nS8eZW1qQie6Zr4yRqDMF.html ► Like Dislike Yapımı : ua-cam.com/play/PL_f2F0Oyaj4_yt6Hn5GfwL5L9U2wumlVs.html ► PHP Codeigniter ile Malzeme Uygulaması : ua-cam.com/play/PL_f2F0Oyaj4_-tbmkqsQy3g0IGLSsxj5I.html ► Codeigniter ile AutoComplete Kullanarak Arama Motoru Yapmak : ua-cam.com/play/PL_f2F0Oyaj48biHkjgecz0kpOVX_4TAUA.html ► PHP Çoklu Kategori Alt Kategori Yapımı : ua-cam.com/play/PL_f2F0Oyaj49BJclmJzAV0v1drrtyTI6o.html ► Codeigniter ile Çoklu dosya upload işlemi (Dropzone): ua-cam.com/play/PL_f2F0Oyaj49vg-z1L9O6vbs_tcuXToxp.html ► PHP Codeigniter ile Pagination Yapımı : ua-cam.com/play/PL_f2F0Oyaj49mGpi6ZTw1TrtyZn8NWXzk.html ► PHP ile Alışveriş Sepeti Yapımı : ua-cam.com/play/PL_f2F0Oyaj48lnRXG2U54imJsnZIuCUFy.html ► PHP Mailer Kullanımı : ua-cam.com/play/PL_f2F0Oyaj49RrSAH4H-B8nulrzexAqAg.html ► Vue js ile Codeigniter Rest API servisine bağlanmak eğitimi : ua-cam.com/play/PL_f2F0Oyaj48ufRtQ8EVo0spOEZPochfv.html ► Nasıl yapılır köşesi: ua-cam.com/play/PL_f2F0Oyaj49gbyMnUfvVTWnZrjLrAvGv.html ► Vue.js Soru Cevap : ua-cam.com/play/PL_f2F0Oyaj4880v6yGFFvO7LVRULRVpbw.html ► Kullandığım teknoloji ile ilgili bilgiler : ua-cam.com/play/PL_f2F0Oyaj49z_k0k1_mOIikcNz8zEpT4.html Sosyal medyadan takip edin : ● VideoSınıf : www.videosinif.com ● Yazılım Eğitim : www.yazilimegitim.net ● Kişisel Web Sayfam : www.gokhankandemir.com ● Facebook : facebook.com/kablosuzkedi ● Twitter : twitter.com/kablosuzkedi ● Instagram : instagram.com/kablosuzkedi/ ● Instagram : instagram.com/yazilimegitim/
Gökhan hocam Allah bozmasın maşAllah bu sıralar youtube platformu pek aktif. Hal böyle olunca edinecek bir sürü bilgi oluyor. Hepsi için ayrı ayrı teşekkürler. Her eğitimi sabırsızlıkla bekliyoruz :)
Azərbaycandan salamlar. Sizi cox sevirik Gökhan hocam. Hocam cok saolun sayenizde codignater frameworku ile framework nedir falan fıstık sizin sozunuz cox sevdim bu sozu) orendik. Beli vidoya ait bi yorum olmaya bilir ama. Sizi sevdiyimizdendir ki surda bildirmek istedim 👍👍👍👍👍👍👍
Evet evet evet, Şu gereksiz her şeye notification oluşturan siteler yüzünden hepsinden nefret ediyorum. Gereklilerden bile nefret ediyorum. Şirketimizde ihtiyaç var ve çok iş görür ama nefret ettiğim için yapmıyorum :)
Web Push Notification Nedir? Nasıl Kullanılır? Service Worker Kullanımı | Netlify|Heroku|Vue|Node.js
Bu dersimizde herhangi bir özel servis kullanmadan (yani OneSignal ya da Firebase gibi) kendimize ait Native bir web push notification nasıl geliştiririz onu görüyoruz. Bunu yaparken 2 farklı bölüm ile ilerleyeceğiz. Birinci bölümde Push Notification için gerekli olan temel bilgileri aldıktan sonra kategori bazlı nasıl bildirim gönderebiliriz? sorusuna cevap verecek bir uygulama geliştiriyoruz.
Kaynaklar ve Daha Fazlası için;
github.com/gkandemi/web-push-notifications
TimeCodes:
00:00:00 Giriş
00:03:30 UI Kodlaması | Push Notification Üzerine Basit bir Uygulama
00:06:55 Backend Kodlaması | Push Notification Üzerine Basit bir Uygulama
00:15:18 Service Worker Kodlaması | Push Notification Üzerine Basit bir Uygulama
00:18:50 UI için Netlify Deployment
00:21:45 Notification Göndermek için Client Bilgilerinin Alınması
00:28:03 İlk Notification'ın Gönderilmesi
00:47:54 1.Bölümün Sonu | Neler Yaptık?
00:50:00 2.Bölüm Girişi | Kategori bazlı Notification Göndermek | Uygulama 2
00:53:03 Backend Kodlaması | Express, Body Parser, UID, Cors, Web-Push Kurulumları ve Rest API
01:10:58 UI Kodlaması | Vue Uygulaması Oluşturmak ve Temanın Giydirilmesi
01:14:56 Component'lerin oluşturulması
01:22:52 Service Worker Kodlaması
01:33:45 UI için Netlify Deployment
01:39:47 Backend için Heroku Deployment
01:49:25 Notification Göndermesi için Backend Kodlaması
01:55:15 Cloud üzerinden Testlerin Yapılması
01:58:28 2.Bölüm Sonu
Ayrıcalıklardan yararlanmak için bu kanala katılın:
ua-cam.com/channels/YT5QTr38bwp85Pka8YSVIg.htmljoin
Kanal içerisinde bulabileceğiniz eğitimlerden bazıları;
1. PHP Programlama eğitimi
2. Codeigniter framework eğitimi
3. HTML ve CSS Eğitimi
4. JavaScript Eğitimi
5. JQuery Eğitimi
6. Vue js Eğitimi
7. Nuxt js Eğitimi
8. Node js Eğitimi
9. Express js Eğitimi
10. JavaScript Frameworkleri
11. MongoDB Eğitimi
12. MySQL Eğitimi
13. Docker Eğitimi
14. Go programlama Eğitimi
15. PHP ile proje Eğitimi
16. Codeigniter ile proje Eğitimi
17. Vue js ile proje Eğitimi
18. Nuxt js ile proje Eğitimi
19. Yeni web teknolojilerin tanıtımları
20. IDE kullanımları
gibi daha birçok eğitime ücretsiz olarak ulaşabilirsiniz.
Eğitimleri izlemek için Oynatma listelerine göz atmayı kesinlikle unutmayın!!!
Proje Eğitimleri;
► Asp.Net ile Okul Projesi: ua-cam.com/play/PL_f2F0Oyaj49bsuq6iLrg1qyZtekSCgPW.html
► Firebase ToDo List Yapımı : ua-cam.com/play/PL_f2F0Oyaj48rnkNZaHqnXiZrs4q7ogex.html
► PHP Codeigniter ile Multi Session Yapımı : ua-cam.com/play/PL_f2F0Oyaj480n9rg6PEwk-6O4NJcneFh.html
► PHP Codeigniter Otel Rezervasyon Sistemi : ua-cam.com/play/PL_f2F0Oyaj49nS8eZW1qQie6Zr4yRqDMF.html
► Like Dislike Yapımı : ua-cam.com/play/PL_f2F0Oyaj4_yt6Hn5GfwL5L9U2wumlVs.html
► PHP Codeigniter ile Malzeme Uygulaması : ua-cam.com/play/PL_f2F0Oyaj4_-tbmkqsQy3g0IGLSsxj5I.html
► Codeigniter ile AutoComplete Kullanarak Arama Motoru Yapmak : ua-cam.com/play/PL_f2F0Oyaj48biHkjgecz0kpOVX_4TAUA.html
► PHP Çoklu Kategori Alt Kategori Yapımı : ua-cam.com/play/PL_f2F0Oyaj49BJclmJzAV0v1drrtyTI6o.html
► Codeigniter ile Çoklu dosya upload işlemi (Dropzone): ua-cam.com/play/PL_f2F0Oyaj49vg-z1L9O6vbs_tcuXToxp.html
► PHP Codeigniter ile Pagination Yapımı : ua-cam.com/play/PL_f2F0Oyaj49mGpi6ZTw1TrtyZn8NWXzk.html
► PHP ile Alışveriş Sepeti Yapımı : ua-cam.com/play/PL_f2F0Oyaj48lnRXG2U54imJsnZIuCUFy.html
► PHP Mailer Kullanımı : ua-cam.com/play/PL_f2F0Oyaj49RrSAH4H-B8nulrzexAqAg.html
► Vue js ile Codeigniter Rest API servisine bağlanmak eğitimi : ua-cam.com/play/PL_f2F0Oyaj48ufRtQ8EVo0spOEZPochfv.html
► Nasıl yapılır köşesi: ua-cam.com/play/PL_f2F0Oyaj49gbyMnUfvVTWnZrjLrAvGv.html
► Vue.js Soru Cevap : ua-cam.com/play/PL_f2F0Oyaj4880v6yGFFvO7LVRULRVpbw.html
► Kullandığım teknoloji ile ilgili bilgiler : ua-cam.com/play/PL_f2F0Oyaj49z_k0k1_mOIikcNz8zEpT4.html
Sosyal medyadan takip edin :
● VideoSınıf : www.videosinif.com
● Yazılım Eğitim : www.yazilimegitim.net
● Kişisel Web Sayfam : www.gokhankandemir.com
● Facebook : facebook.com/kablosuzkedi
● Twitter : twitter.com/kablosuzkedi
● Instagram : instagram.com/kablosuzkedi/
● Instagram : instagram.com/yazilimegitim/
Orta doğu ve balkanların gelmiş geçmiş en kral adamı!!! Helal sana valla😁😁
ondan gelen notification olmadığı sürece bir anlamı yok hocam 🚬
Allah kahretmesin seni Enes skfjldkfjsdlkfjslkfj :D
Kaç aydır böyle bir video arıyordum ama bulamadım hep 2. bir kaynak kullanıyorlardı. Sonunda yapabileceğim
Ustat ellerine saglik aslinda bircok teknoloji ile entegre yaptin. Ama temel mantik cuuuk oturdu.
Gökhan hocam Allah bozmasın maşAllah bu sıralar youtube platformu pek aktif. Hal böyle olunca edinecek bir sürü bilgi oluyor. Hepsi için ayrı ayrı teşekkürler. Her eğitimi sabırsızlıkla bekliyoruz :)
Seviyorum be seni Gökhan abi. Keşke böyle kanallar daha fazla olsa. Hergün yeni şeyler öğreniyorum.
Şimdiden sağolasın... Beklediğim bir konuydu... Umarım yakın zamanda socket videosunun da sırası gelir...:)
Vay arkadaş içimi mi okudun :)))
Çok güzel, çok teşekkür ederim. Ellerinize sağlık. Yakın zamanda sizden Elastic/Kibana türünden bir video bekliyoruz.
guzel anlatim icin tesekkurler
Uzun süredir beklediğim konu 💪🏼
Süper bir ders süper bir anlatım daha
Yav senin Allahına kurban ya. Emeklerine ellerine sağlık abim
Sankide ne istediklerimizi seziyorsun gibi hocam.. :))
Ders için teşekkürler hocam :)
Bir kablosuz kedi klasiği :) Emeğinize sağlık :)
çok güzel konular teşekkürler
Ağzınıza Sağlık
ilk bölümden sonra başım döndü :S
Teşekkürler hocam
güzel konular
Azərbaycandan salamlar. Sizi cox sevirik Gökhan hocam. Hocam cok saolun sayenizde codignater frameworku ile framework nedir falan fıstık sizin sozunuz cox sevdim bu sozu) orendik.
Beli vidoya ait bi yorum olmaya bilir ama. Sizi sevdiyimizdendir ki surda bildirmek istedim 👍👍👍👍👍👍👍
hep gundemde olacak mir konu
Harikasınız. Çok güzel bir içerik olmuş. Elinize emeğinize sağlık. React Native içinde benzer bir yapı kurabiliyor muyuz ?
Sadece local push var mı hocam, 10 numara 5 yıldız teşekkürler
Dün bunun için beynimi Yakmıştım yapamamıştım güzel konu (push.js pişmanlıktır)
oyşş videoya bakkk 😘
Hocam Vue 3 ile birlikte sizce Vue Native'de bir gelişme olur mu?
Hocam bir siteden satışa cikan bir üründen aninda hsber almak istiyorum bunu nasil yapariz
Gökhan abi.
Tarayıcı yada sekme kapalı olsa dahi bildirim gelmeye devam eder mi hocam
Abi html siteme PHP siz yada Google girişi nasıl eklenir videosunu yaparmısın
Bunu beğenmeyip sonuna kadar aralıksız izlemeyenin npm run komutu çalışmasın
Hocam listeyi çektiğimizde eğer kullanıcı "subscribe" olmuşsa "unsubscribe" yapmak istiyorum. Bunun için nasıl bir yol izlemeleyebilirim?
Yani hangi bilgiye göre silme işlemi yapmam gerekir. Service worker'da bir işlem yapılmalı mı? Yoksa sadece DB'den silsem yeter mi?
DB den silmen yeterli :)
@@kablosuzkedi Kralsın
Grallllll
Evet evet evet, Şu gereksiz her şeye notification oluşturan siteler yüzünden hepsinden nefret ediyorum. Gereklilerden bile nefret ediyorum. Şirketimizde ihtiyaç var ve çok iş görür ama nefret ettiğim için yapmıyorum :)
Sevmiyoruz doğru ama gelmeyince de gözümüz yollarda
Bildirimlerden nefret ediyorum.