Merhaba, bir önceki yazımda webpack ve electron kullanarak bir örnek yapmıştım. O örneği kullanıcılara nasıl dağıtırız ve nasıl güncelleme yaparız ondan bahsedeceğim.

Öncelikle bu senaryoları denememiz için bir electron uygulamasına ihtiyacımız var. Tabii ki bu uygulama önceki yazımda bahsettiğim uygulama olacak.

Uygulamayı şu şekilde kuruyoruz:

git clone https://github.com/abdurrahmanekr/electron-react-example.git
cd electron-react-example
npm i
npm start

Uygulamadan kısaca bahsedecek olursak uygulamanın, main, package ve webpack.config dosyaları sayesinde src dizinindeki dosyaları derleyerek dist dizinine çıkaran bir yapısı var. Bunun yanında dist dizinindeki dosyaları electron-packager kullanarak paketleme de yapabiliyor.

Yani bizim şu an uğraşmamız gereken sadece güncelleme senaryoları.

GitHub üzerinde keşfettiğim önemli kaynaklar şunlar:

github.com/ArekSredzki/electron-release-server

github.com/GitbookIO/nuts

Eğer projenizi github üzerinde barındırıyorsanız nuts kullanabilirsiniz. Github üzerindeki projenizde bir release çıkardığınızda nuts sayesinde kullanıcılara github üzerinden uygulamayı dağıtabiliyorsunuz (tabi yine kendi sunucunuz olması gerekiyor).

Eğer projeniz github üzerinde barınmıyor ise burada electron-release-server bize yardımcı oluyor. Bu paketi kendi sunucumuza kurarak kullanıcılara dağıtım yapabiliriz. 

Önemli olan bir nokta ise Mac OS için uygulamanızın Codesign (sertifikalanmış) olmasıdır. Eğer bir sertifikanız yok ise Mac OS için güncellemeler çalışmayacaktır. bkz:

İleride bu konu hakkında bir makale hazırlayabilirim. 

Electron-release-server kurulumu

Eğer test için bir sunucunuz var ise ona kurmanızı tavsiye ederim. Eğer yok ise kişisel bilgisayarınıza kurmanız gerekiyor.

İlk önce bağımlılıklarından bahsetmek istiyorum. Herhangi bir veritabanı sistemine ihtiyacımız var. PostgreSql olabilir. MySql'e kurmayı denedim fakat bir türlü veritabanına yapıyı aktarmadı. Şu an sadece PostgreSql kurulumunu anlatacağım. Diğer bağımlılıklar npm ise üzerinde. Npm için bower ve grunt-cli global olarak kurulu olması gerekiyor. Bağımlılıklar bu kadar.

Eğer npm veya nodejs ile ilgili sorunlarınız var ise yorumlarda belirtebilirsiniz. Kullandığım node ve npm versiyonları:

npm: 3.10.10
node: 6.11.5

Sisteminizin herhangi bir yerine bu projeyi git clone ile indirelim. Şimdi şu komutu çalıştıralım.

npm install && bower install

Şimdi veritabanı bağlantımızı yapmamız gerekiyor. Ben sadece PostgreSQL’den bahsedeceğim.

PostgreSQL Bağlantısını Kurma

Eğer PostgreSQL kullanıcınız yoksa sıfırdan kurmak istiyorsanız. Bu adresten bilgisayarınıza nasıl kurulacağını öğrenebilirsiniz. Kurulum Ubuntu için kısaca şöyle:

$ sudo apt-get update
$ sudo apt-get install postgresql postgresql-contrib
$ sudo -i -u postgres
$ psql

Bu şekilde bilgisayarınıza kurduğunuzda artık erişim sağlayabilirsiniz. PostgreSQL bilgisayarınızda kurulu hale geldi ise işlemlere devam edebiliriz:

// Giriş yapıyoruz
$ sudo -u postgres psql
// Rol oluşturuyoruz
postgres=# create role electron_release_server_user encrypted password ‘<şifreniz>’ login;
postgres=# create database electron_release_server;

Veritabanı bağlantıları bittiğine göre projemizin bağlantı ayarlarını ekleyelim. İlk önce hazır bir ayar dosyasını kopyalayalım.

$ cp config/local.template config/local.js

Sonra bu dosyayı düzenleyelim config/local.js

…
// yayınlayacağınız adres
appUrl: 'http://download.example.com',
auth: {
  // electron uygulamalarını yükleyeceğiniz admin paneli girişi için kullanıcı adı ve şifre
  static: {
    username: 'patron',
    password: 'şifre'
  },
  …
  // postgresql veritabanı bağlantı ayarları
  connections: {
    postgresql: {
      adapter: 'sails-postgresql',
      host: 'localhost',
      user: 'electron_release_server_user', // postgresql için hangi kullanıcınız varsa o
      password: '<şifreniz>',
      database: 'electron_release_server'
    }
  },
  …
};
…

Çalıştırmaya hazır mısınız?

Evet şu an’a kadar yapmamız gereken ayarları yaptığımıza göre başlatmanın zamanı geldi. Şu an geliştirici modunda açalım:
Not: ‘split’ of undefined hatası ile karşılaşırsanız buraya göz atın

npm start

Sunucumuz çalışıyor. Yayınlayacağınız adres üzerinden giriş yaptığınızda sizi bu ekran karşılıyor olacak:

Sağ üstteki Admin butonuna tıklayıp Username: patron, Password: şifre girdiğimizde bizi Versiyon Yönetim ekranına yönlendirecek.

Burada Add New Version butonuna tıklayım.

Karşımıza çıkan bu ekrandan versiyon ismini 1.1.0 seçelim. Channel değerini ise stable verelim. Change Notes’e de İlk yayınlama yazalım.

Sonra Add Version Diyerek Versiyonu kaydedelim.

Ardından yapmamız gereken uygulamamızı dağıtılabilir hale getirmek. Os X için .dmg ve .zip, Windows için .exe, .msi ve .nupkg, Linux için .deb, .rpm, .tar.gz ve .AppImage uzantılı dosyalara ihtiyacımız olacak. Bu konuyu daha da uzatmamak için bunların oluşturulduğunu kabul ediyorum. Eğer bu dosyaların nasıl oluşturacağını öğrenmek istiyorsanız bu adrese göz atın.

Bu dosyaların oluşturulma işlemleri hakkında da bir makale hazırlayabilirim.

Dikkat etmemiz gereken başka bir nokta ise ilk güncellemede bazı uzantılı dosyaları yüklememize gerek kalmaması. Çünkü ilk uygulamayı indiren kişi update için hazırlanan uzantılara ihtiyaç duymayacak.

OS X için BNet.dmg uzantılı dosyayı yükledik.

Versiyon 1.1.0 için OS X kullanıcıları uygulamamızı indirebilecek. Aynı şekilde .exe uzantılı dosyayı yükleyerek Windows için kullanıcılara dağıtabilirsiniz.

Require Assets başlığının altında bizlere Windows için yeni yüklemelerin .exe, güncellemelerin ise .nupkg uzantılı dosyalar ile yapıldığını söylüyor. Diğerleri de aynı şekilde… (Linux üzerinde güncellenme desteklenmiyor)

Dikkat edilmesi gereken başka bir nokta, Upload edilecek dosya isminin her versiyonda farklı olması. 1.1.0 için App-1.1.0.dmg, 2.0.0 için App-2.0.0.dmg şeklinde isimlendirebilirsiniz.

Windows için çok önemli olan nokta, güncelleme için atacağınız dosyanın isminin sonunda -full geçmesi gerekiyor. bkz:

Size tavsiye olarak söylemek istediğim en az 3 versiyon yüklemeniz. Bunun bir sebebi yok, fakat test etmek ve karşılaştırmaları kontrol etmek için ideal bir sayı. 

Güncellemeleri uygulama üzerinde deneme

Sunucumuzu hazırladığımıza göre, artık uygulamada bunu deneyebiliriz. Auto-updater’ın dokümanından kullanımı hakkında bilgi edinebilirsiniz. Uygulamamızda bu özellik hazır durumda. Tek yapılması gereken electron.main.js dosyasında değişiklik yapmak:

…
// güncelleme indiğinde tetikleniyor
autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
  const dialogOpts = {
      type: 'info',
      buttons: ["Sistem Ne'yi Yeniden Başlat", "Sonra"],
      title: 'Sistem Ne için Yeni Güncelleme Mevcut!',
      message: process.platform === 'win32' ? releaseNotes : releaseName,
      detail: 'Yeni güncelleme indirildi. Güncellemeleri kurmak için yeniden başlatmanız gerekiyor.'
  }

  // kullanıcıya güncellemeyi kabul etmesi için bir pencere açıyoruz
  dialog.showMessageBox(dialogOpts, (response) => {
    if (response === 0) {
      autoUpdater.quitAndInstall();
    }
  })
})

// güncelleme oluşan herhangi bir hata oluştunda tetikleniyor
autoUpdater.on('error', message => {
  console.error('Güncellemede hata oluştu!');
  console.error(message);
})

// uygulamamızın güncellemeleri takip ettiği adresi belirliyoruz
const server = 'http://download.example.com'
const feed = `${server}/update/${process.platform}/${app.getVersion()}`

autoUpdater.setFeedURL(feed);

// Güncellemeleri kontrol ediyoruz
autoUpdater.checkForUpdates();

setInterval(function() {
  // saatte bir güncellemeleri kontrol ediyor.
  autoUpdater.checkForUpdates();
}, 1000 * 60 * 60);
…

Bugün anlatacaklarım bu kadardı aklınıza takılan bir soru olursa çekinmeyin. Eğer bu konu hakkında veya konu dışı olarak bana soru sormak istiyorsanız https://github.com/abdurrahmanekr/bana-istedigini-sor repository’sinde bir issue açabilirsiniz. Youtube kanalıma abone olarak ve yayınladığım bu makaleyi paylaşarak bana destek olabilirsiniz. Diğer makalelerde görüşmek üzere :)