Web Push Notification Nedir? Nasıl Kullanılır? Service Worker Kullanımı | Netlify|Heroku|Vue|Node.js
HTML-код
- Опубликовано: 1 июн 2024
- 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-...
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:
/ @kablosuzkedi
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: • Asp.Net ile Okul Projesi
► Firebase ToDo List Yapımı : • Firebase ToDo List Yapımı
► PHP Codeigniter ile Multi Session Yapımı : • PHP Codeigniter ile Mu...
► PHP Codeigniter Otel Rezervasyon Sistemi : • PHP Codeigniter Otel R...
► Like Dislike Yapımı : • Like Dislike Yapımı
► PHP Codeigniter ile Malzeme Uygulaması : • PHP Codeigniter ile Ma...
► Codeigniter ile AutoComplete Kullanarak Arama Motoru Yapmak : • Codeigniter ile AutoCo...
► PHP Çoklu Kategori Alt Kategori Yapımı : • PHP-PDO ile Sınırsız K...
► Codeigniter ile Çoklu dosya upload işlemi (Dropzone): • Codeigniter ile Çoklu ...
► PHP Codeigniter ile Pagination Yapımı : • PHP Codeigniter ile Pa...
► PHP ile Alışveriş Sepeti Yapımı : • PHP ile Alışveriş Sepe...
► PHP Mailer Kullanımı : • PHP Mailer Kullanımı
► Vue js ile Codeigniter Rest API servisine bağlanmak eğitimi : • Vue.js ile Codeigniter...
► Nasıl yapılır köşesi: • Nasıl Yapılır?
► Vue.js Soru Cevap : • Vue.js Soru Cevap
► Kullandığım teknoloji ile ilgili bilgiler : • Kullandığım Web Yazılı...
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 : / kablosuzkedi
● Twitter : / kablosuzkedi
● Instagram : / kablosuzkedi
● Instagram : / yazilimegitim
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:
ruclips.net/channel/UCYT5QTr38bwp85Pka8YSVIgjoin
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: ruclips.net/p/PL_f2F0Oyaj49bsuq6iLrg1qyZtekSCgPW
► Firebase ToDo List Yapımı : ruclips.net/p/PL_f2F0Oyaj48rnkNZaHqnXiZrs4q7ogex
► PHP Codeigniter ile Multi Session Yapımı : ruclips.net/p/PL_f2F0Oyaj480n9rg6PEwk-6O4NJcneFh
► PHP Codeigniter Otel Rezervasyon Sistemi : ruclips.net/p/PL_f2F0Oyaj49nS8eZW1qQie6Zr4yRqDMF
► Like Dislike Yapımı : ruclips.net/p/PL_f2F0Oyaj4_yt6Hn5GfwL5L9U2wumlVs
► PHP Codeigniter ile Malzeme Uygulaması : ruclips.net/p/PL_f2F0Oyaj4_-tbmkqsQy3g0IGLSsxj5I
► Codeigniter ile AutoComplete Kullanarak Arama Motoru Yapmak : ruclips.net/p/PL_f2F0Oyaj48biHkjgecz0kpOVX_4TAUA
► PHP Çoklu Kategori Alt Kategori Yapımı : ruclips.net/p/PL_f2F0Oyaj49BJclmJzAV0v1drrtyTI6o
► Codeigniter ile Çoklu dosya upload işlemi (Dropzone): ruclips.net/p/PL_f2F0Oyaj49vg-z1L9O6vbs_tcuXToxp
► PHP Codeigniter ile Pagination Yapımı : ruclips.net/p/PL_f2F0Oyaj49mGpi6ZTw1TrtyZn8NWXzk
► PHP ile Alışveriş Sepeti Yapımı : ruclips.net/p/PL_f2F0Oyaj48lnRXG2U54imJsnZIuCUFy
► PHP Mailer Kullanımı : ruclips.net/p/PL_f2F0Oyaj49RrSAH4H-B8nulrzexAqAg
► Vue js ile Codeigniter Rest API servisine bağlanmak eğitimi : ruclips.net/p/PL_f2F0Oyaj48ufRtQ8EVo0spOEZPochfv
► Nasıl yapılır köşesi: ruclips.net/p/PL_f2F0Oyaj49gbyMnUfvVTWnZrjLrAvGv
► Vue.js Soru Cevap : ruclips.net/p/PL_f2F0Oyaj4880v6yGFFvO7LVRULRVpbw
► Kullandığım teknoloji ile ilgili bilgiler : ruclips.net/p/PL_f2F0Oyaj49z_k0k1_mOIikcNz8zEpT4
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/
ondan gelen notification olmadığı sürece bir anlamı yok hocam 🚬
Allah kahretmesin seni Enes skfjldkfjsdlkfjslkfj :D
Orta doğu ve balkanların gelmiş geçmiş en kral adamı!!! Helal sana valla😁😁
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 :)
Ç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
Seviyorum be seni Gökhan abi. Keşke böyle kanallar daha fazla olsa. Hergün yeni şeyler öğreniyorum.
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.
Ş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 :)))
Sankide ne istediklerimizi seziyorsun gibi hocam.. :))
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 👍👍👍👍👍👍👍
Uzun süredir beklediğim konu 💪🏼
Ders için teşekkürler hocam :)
Yav senin Allahına kurban ya. Emeklerine ellerine sağlık abim
Süper bir ders süper bir anlatım daha
Bir kablosuz kedi klasiği :) Emeğinize sağlık :)
çok güzel konular teşekkürler
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 ?
güzel konular
Teşekkürler hocam
Ağzınıza Sağlık
Hocam Vue 3 ile birlikte sizce Vue Native'de bir gelişme olur mu?
ilk bölümden sonra başım döndü :S
Sadece local push var mı hocam, 10 numara 5 yıldız teşekkürler
Tarayıcı yada sekme kapalı olsa dahi bildirim gelmeye devam eder mi hocam
Dün bunun için beynimi Yakmıştım yapamamıştım güzel konu (push.js pişmanlıktır)
Hocam bir siteden satışa cikan bir üründen aninda hsber almak istiyorum bunu nasil yapariz
hep gundemde olacak mir konu
oyşş videoya bakkk 😘
Abi html siteme PHP siz yada Google girişi nasıl eklenir videosunu yaparmısın
Gökhan abi.
Grallllll
Bunu beğenmeyip sonuna kadar aralıksız izlemeyenin npm run komutu çalışmasın
Sevmiyoruz doğru ama gelmeyince de gözümüz yollarda
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
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 :)
push.js?
tabi ki hayir :) aciklamaya bakabilirsin :)
nefreeet ediyoruum
Bildirimlerden nefret ediyorum.