Electron Uygulamasının, Dağıtma ve Güncelleme Senaryoları

reactelectronwebpackbabel

1 yıl önce 3 yorum

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:

Karşılama ekranı

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 :)

Yorumlar ({{totalCommentCount}})

  • Gorkem

    {{commentLike123Count}} beğenme 2 ay önce

    Merhaba, Yazı için teşekkürler çok yardımcı oldu fakat sonunda yapamadığım bir kısım var ve yardımcı olabilirseniz sevinirim. Electron-Forge ile uygulamamı .exe şekline getirebiliyorum. Bunun yanında electron release server i de ayağa kaldırabildim kendi bilgisayarımda. Fakat güncelleme kısmında sorularım bulunuyor. 1) İlk .exe mizi oluşturduk ve electron release server a1.0.0 version ismi ile birlikte koyacağız diyelim aynı 1.0.0 klasörüne .nupkg dosyasını da atacak mıyız ? 2) İlk exemizi electron release server a upload ettik diyelim ki. Başka birinin veya kendimizin, electron release server üzerinden 1.0.0 yükünü kurması mı gerekiyor ? 3) Update için1.0.1 yükünü ayrı bir version olarak mı çıkacağız ? Ve bu version için ayrı bir .exe dosyası çıkarıp yine ayrı bir .nupkg oluşturup version 1.0.1 içine atmak mı gerekiyor ? Bu sayede 1.0.0 versionunu kuran kullanıcılar update isteği mi alacak ? 4) Son olarak kendi bilgisayarımda bazı denediğim durumlar oldu. 1.0.0 ı electron release server üzerinden kurdum. Daha sonra bilgisayarımda görev yöneticisini başlattım uygulamamın çalıştığını görüyordum ben güncellemeleri 1dk da kontrol edilmesi için ayarlamıştım test olsun diye. Görev yöneticisinden 1dk sonra update(win32) diye bir şeyin çalıştığını gördüm benim uygulamam için fakat uygulamam hiç bir şekilde update olmadı. Yardımcı olabilirseniz çok mutlu olurum. İyi günler...
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike126Count}} beğenme 2 ay önce

    Electron release sunucusundan ilk yüklenen uygulamayı kuran bir kullanıcınız olsun. Bu kullanıcı siz checkForUpdates çalıştırdığınız anda sunucuya istek atar. Bu istekte kendi versiyonunu gönderir, sunucuda yüklü olan son sürüm ile karşılaştırılır. Karşılaştırmada eğer kullanıcının versiyonu sunucudakine eşitse bir şey olmaz. Eğer sunucudaki büyükse o zaman uygulamanız arkaplanda güncellemeyi indirmeye başlar. Mesela kullanıcınız 1.0.0 olsun siz kullanıcınızın uygulamasını güncellemesini istiyorsanız versiyonu 1.0.1 olarak derleyip bunu sunucuya atmalısınız. Sunucuya attıktan sonra bir şey yapmanıza gerek yok. Kullanıcınızı yapması gerekir. Yani 'checkForUpdates' methodunu çalıştırması lazım. Bunu da her 12dk da bir veya 12 saatte bir şekilde çağırırsanız güncellemeleri iyi bir oranda kullanıcılara dağıtabilirsiniz.
    Beğen Beğendin
  • mehmet

    {{commentLike134Count}} beğenme 18 gün önce

    Merhabalar. Öncelikle böyle bir yazı için teşekkür ederim. Localhostta test etmeye çalışırken dosya yükleme anında 403 hatasıyla karşılaşıyorum. Anladığım kadarıyla jwt'nin token_secret'i yanlış. Ben localhost'dan bu bilgileri nasıl bulabilirim bilginiz var mı ? İyi çalışmalar kolay gelsin.
    Beğen Beğendin
  • Düşündüklerin nedir ?

    Abdurrahman Eker

    (1010 Eylül 11111001100)

  • Full Stack Developer at Detaysoft Turkey/Sivas
  • İnternette Avare Kodcu
  • github
  • linkedin
  • youtube
  • Yeni içeriklerden haberdar olmak ister misin ?