Electron.js ile Masaüstü Bildirim Kullanımı

1 yıl önce - 112 kişi tarafından okundu

Electron.js, Node.js çalışma ortamını kullanarak masaüstü uygulaması geliştirmemize yarayan açık kaynaklı bir yazılımdır. Windows, MacOS, Linux ve farklı işletim sistemleri üzerinde çalışır ve son derece kullanışlıdır.

Electron.js üzerinde html olan sayfaları kullanıcıya gösterip ipcRenderer yardımı ile front-end üzerinden verileri back-end'e alıp işlem döndürüp tekrardan front-end'e yansıtabiliyoruz. Yani html üzerinde eklediğiniz script içerisinden form üzerinden aldığınız verileri ipcRenderer yardımı ile back-end alanına iletebiliyorsunuz. Bunun hakkında ileride daha detaylı bilgi paylaşırım.

Bugün anlatacağım konu electron.js ile masaüstü bildirimi nasıl kullanılıyor ve örnekleri olacak.

Electron.js üzerinde Notification'ı electron'a ekleyip uygulamamızı başlatmamız gerekiyor:

const { app, BrowserWindow, Notification } = electron;
// Yukarıda app, BrowserWindow ve Notification belirtilmiştir.

Ardından bildirim fonksiyonunun -notification- kullanımı çok basit olacak. new Notification(ayarlar); şeklinde belirtip fonksiyonu kolay şekilde kullanacağız. Örnek:

let baslik = "Bildirim Başlığı";
let icerik = "Bildirim içeriği";

// Bildirim ayarlamaları
const notification = {
 title: baslik,
 body: icerik,
 hasReply: true // Cevaplama ayarı
}

// Bildirimi oluştur
const bildirimolustur = new Notification(notification);

// Bildirimi göster
bildirimolustur.show();

Yukarıda belirttiğim şekilde uyguladığınızda bildiriminiz bilgisayarınızda gözükecektir, bu bildirime ikon veya ses ekleyebilirsiniz örneğin:

let baslik = "Bildirim Başlığı";
let icerik = "Bildirim içeriği";
let bildirim_icon = yol.join(__dirname, "/favicon.ico"); // const yol = require("path");

// Bildirim ayarlamaları
const notification = {
 title: baslik,
 body: icerik,
 icon: bildirim_icon, // ikonun bulunduğu yolu belirtiyoruz
 hasReply: true // Cevaplama ayarı
}

// Bildirimi oluştur
const bildirimolustur = new Notification(notification);

// Bildirimi göster
bildirimolustur.show();

Yukarıda belirttiğim ayarlamalarda ise bulunduğumuz dizin içerisinde olan "favicon.ico" dosyasını bildirim ikonu olarak belirledik. "Electron.js Notification Settings" şeklinde arama yaparsanız diğer ayarlamaları öğrenebilirsiniz: ses ekleme, cevaplamayı ayarlama, bekleme vb.

Sizin için deneme bir uygulama üzerinde bildirim sistemini denedim, Github üzerinden açık kaynak kodlara bakabilirsiniz. Örnek video:

Github üzerinde kurulum bilgisi ve kullanımı hakkında bilgi verdim.
https://github.com/v4r1able/electron-js-bildirim-sistemi