Electron.js ve Vue.js: İki Süper Güç İle Masaüstü Uygulaması
Electron.js Nedir?
Electron JS, var olan web teknolojileri ile masaüstü uygulamaları geliştirme imkanı sunmaktadır.
Peki hazırda yıllardır geliştirilmekte olan masaüstü uygulamalarını neden Electron JS ile yapmaya başlayalım ki diye sorabilirsiniz. Javascript bilen ve de web teknolojileri geliştiren birisiniz. Fakat bir gün ihtiyaç dahilinde masaüstü uygulama geliştirmeniz istendi, yapmak istediniz. Böyle bir anda yeni bir dil öğrenme ihtiyacınızı ortadan kaldırıyor ve de Javascript ile bunu gerçekleştiriyorsunuz.
Peki nasıl yapıyor bunu? Chromium ve de Node JS teknolojileri ile. Bu nedenle tarayıcı(chrome, mozilla, edge vs.) için uygulama geliştirmeye çok benzerdir. Bir developer için hayati önem taşıyan debug, inspect, dev-tools gibi özelliklerin yanında build, update gibi paketler de kullanımımızda! Genelde web geliştiriciler masaüstü uygulama geliştirmesi yapmazlar. Olmaz diye bir şey yok oldu profesyonel piyasa bu. Oldu da bir iş geldi ve masaüstü platform geliştirme isteniyor. Oturup Java, C#, C öğrenmek yerine burda da yardımımıza Electron koşuyor. Kısacası zaman, performans, geliştirme maliyeti gibi aktörleri ortaya koyup düşündüğümüzde gayet avantajlı ve geliştirmesi eğlenceli bir teknoloji ile karşı karşıyayız.
Daha fazla bilgi için lütfen Burak Bey’in Electron ile Cross-Platform Uygulama Geliştirmek adlı yazısını okuyun.
Vue.js ile ilgili medium hesabımda bir çok yazı bulabilirsiniz. Bu yazımda Electron.js ile Vue.js kullanarak bir uygulama nasıl yapılır onu anlatacağım.
Öncelikle hemen bir Vue projesi oluşturalım;
vue create electron-vue-example
Gelen seçenekler arasından router seçerseniz iyi olur çünkü yapacağımız uygulamada bir den fazla sayfa olacak.
Kurulum tamamlandıktan sonra npm run serve komutu ile projeyi ayağa kaldıralım.
Electron.js ve Vue.js’i birlikte kullanmak için kullanmış olduğum bir plugin var. Bu pluginimizin adı electron-builder, daha fazla detay için kendi sitesine veya GitHub hesabına göz atabilirsiniz.
Pluginimize değindikten sonra hadi projemize dahil edelim.
Komut satırına vue add electron-builder yazdıktan sonra çalıştıralım. Projemizin içerdiği dosyalara yeni bir dosya eklenmiş olması lazım adı background.js . Bu dosya bizim projeyi yönettiğimiz Vue.js ve Electron.js sağlıklı bir şekilde birlikte kullanmamızı ve yönetmemizi sağlar.
Komut satırına npm run serve:electron yazdıktan sonra çalıştıralım ve web de localhost:8080 ayağa kalkan projemiz artık masaüstü uygulaması olarak ayağa kalkacaktır. Buraya kadar sorunsuz geldiyseniz artık projemize geçebiliriz.
Projemizde aslında reddit de ki profil fotoğrafını ve yorumları göstereceğiz üstüne tıklandığında da tıkladığımız yorumu yazan kişinin profil fotoğrafını göstereceğiz.
Şimdi HelloWorld.vue dosyamızın içini biraz değiştirelim.
Hemen burada ki yapıyı açıklıyayım. Bura da created hook’unda Reddit’in API ‘na istek atıyoruz ve gelen cevabı posts içine atıyoruz. Posts array’ini ekranda göstermek için klasik ul li taglarını ve v-for’u kullanıyoruz. Bura da dikkat etmemiz gerek kısım ipcRenderer özelliği. Bu özellik aslında bildiğimiz emitter’dır. Bize frontend ve backend(background.js) arasında haberleşmeyi sağlar. openImage metodumuza bir göz atalım. Metodumuzun içinde ki kod ipcRenderer.send('toogle-image',image) bize tıklanan satırın fotoğraf bilgisini backend’e aktarmamızı sağlar.
Bu kısmı da yaptığımıza göre o zaman bu fotoğrafı gösterebileceğimiz sayfamızı yapalım.
Image.vue sayfamızda ki created hook’una göz atacak olursak ipcRenderer.on('image',(event, arg) => {this.imageUrl = arg}) emitter’ı backend’den gelen datayı yakalamamızı sağlar. Bu hazırlamış olduğumuz sayfayı Electron.js ile masaüstünde göstermek için background.js de bir kaç ayar yapmamız gerekecek.
Öncelikle hemen yeni bir window oluşturalım. imageWindow adın da global bir değişken tanımlıyoruz ve createWindow fonksiyonun içinde image adında yeni bir değişken tanımlıyoruz. image değişkenimizi new BrowserWindow({}) ile yeni bir window oluşturuyoruz.
Not: win değişkenimizde webPreferences objesi içinde webSecurity: false yapmamızın sebebi reddit API’sine istek atarken CORS almamak içindir.
image değişkeni ile window tanımlaması bittikten sonra global olarak tanımlamış olduğumuz imageWindow değişkenimize atıyoruz.
Yukarıda window tanımladıktan sonra Image sayfasını ekranda göstertmek için await image.loadURL(process.env.WEBPACK_DEV_SERVER_URL + “/#/image”); komut satırını ekliyoruz.
Gelelim şimdi en lezzetli yerine iki sayfayı bir biri ile haberleştirmeye. Yukarı da zaten HelloWorld.vue ve Image.vue dosyasında emitter’ları göstermiştim şimdi HelloWorld.vue dene gelen veriyi Image.vue dosyasına göndermeyi göstereceğim. Bu işlemi yapmak için ipcMain emitter’ından yararlanıyoruz. Bu emitter bize frontend’den gelen veriyi yakalamamızı sağlar. imageWindow.show() fonksiyonu ile sayfayı ekranda göstermeyi sağlıyoruz daha sonra imageWindow.webContents.send() ile de gelen veriyi Image.vue dosyasına gönderiyoruz. İşte tüm işlem bu kadar. Projeyi GitHub hesabımda bulabilirsiniz.
