Quasar&Electron İle Masaüstü Uygulama Geliştirme

Kadriye Aksakal
3 min readSep 6, 2021
electron icon

Daha önceki yazımda sizlere Vue-Quasar ile electron uygulaması oluşturulabileceğinden kısaca bahsetmiştim. Şimdi daha detaylı olarak inceleyelim quasar&electron ile masaüstü uygulamalar nasıl geliştirilir.

Öncelikle Electron nedir kısaca buna değinelim. Electron (eski adıyla Atom Shell) açık kaynak kodlu bir framework’tür. Öncelikle web uygulamalar için geliştirilmiş daha sonra front end ve back end kullanılarak masaüstü GUI uygulamalar geliştirilmeye başlanmıştır. Back end için Node.js, front end için ise Chromium kullanılır. Aslında günümüzde kullandığımız bazı masaüstü uygulamalarının da electron ile geliştirilmiş olduğunu görebilirsiniz. Örneğin Discord, Github’ın Atom ve Microsoft’un Visual Studio Code gibi örneği daha da çok artılabilecek uygulamalar electron ile geliştirilmiştir. O halde bizde electron ile geliştirme yapmak için vakit kaybetmeden başlayalım..

Önceden oluşturmuş olduğumuz quasar projemize;

electron mod ekleme

şeklinde electron modumuzu projemize ekleyelim ve electron yardımı ile masaüstü uygulamalarımızı geliştirmeye başlayalım. Daha detaylı bilgi almak için;

bu adresten de yararlanabilirsiniz. Geliştirme yaparken uygulamalarımızı nasıl derleyeceğimize bakalım

electron uygulamasının derlenmesi

yukarıdaki komutta gördüğünüz şekilde electron uygulamamızı kolaylıkla derleyebiliriz. Buradaki -m modu belirtmek için kullanıyoruz electron modunda olduğumuz için -m electron yazıyoruz, capacitor uygulamalarında -T vardı farklı platformlarda derlemek için kullanmıştık fakat electron modunda böyle bir komuta ihtiyacımız yok. Uygulamalarımızı development ortamında çalıştırıp test etmek bu kadar kolay..:)

Son olarak da masaüstü uygulamalarımızı bitirdikten sonra nasıl build aldığımıza bakalım.

electron uygulaması build komutu

komutu ile uygulamalarımızı kolaylıkla build edebiliriz.

Development ortamından tek farkı dev komutu yerine build komutunu kullanıyoruz.

Electron uygulamalarımızda önemli olan bir husus var ona da değinmek istiyorum. Diyelim ki bir kayıt olma işlemi gerektiren uygulama geliştirdiniz ve uygulamaya kayıt oldunuz. Electron’un şöyle bir özelliği var kayıt olduğunuz anda bilgisayarınızda kayıt olduğu bilgileri tutuyor ve o dosyayı silmeden veya uygulama içerisinde herhangi bir reset butonu koymadıysanız bir daha kayıt olma sayfasına geri dönemiyorsunuz. Ben linux kullanıyorum benim bilgisayarımda

electron dosya dizini

ekte bulunan dizinde bulunmaktadır. Windowslarda da aynı Electron dosyası içerisinde bulunur. Fakat tam olarak hangi dizinde olduğunu bilmiyorum sizler bakarsınız. :) Buradaki settings.json dosyanız bilgilerinizi tutan dosyadır. İster silin isterseniz adını değiştirin uygulamanız tuttuğu bilgileri sıfırlayacaktır ya da localStorage’dan silmeniz gerekmektedir. Aksi halde uygulama bilgileriniz her daim burada tutulacaktır.

Electron ile başlangıç seviyesinde uygulama geliştirip yayınlanabilir hale getirebilmeniz için kısaca adımları paylaştım sizlerle. Electron ile uygulama geliştirmek için daha detaylı bilgiye;

adresinden ulaşabilirsiniz.

Görüş, öneri ve sorularınız için mail atabilirsiniz. Umarım faydalı bir yazı olmuştur, keyifli okumalar..

--

--