Angular IO ve Electron JS ile Masaüstü Uygulaması Geliştirmek
Selamlar, bu yazıda Angular IO ve Electron JS kullanarak nasıl cross platform masaüstü uygulaması geliştirebileceğimizden bahsedeceğim.
Yazıya başlamadan önce bazı kavramları açıklayalım; bildiğiniz gibi Angular IO, web uygulamaları geliştirmek için tasarlanmış bir javascript frameworkü. HTML, CSS ve JS kullanarak kullanıcı deneyimi oldukça yüksek web uygulamaları geliştirmemizi sağlar. Peki nasıl oluyor da Web tarayıcılarında çalışması için kurgulanan bir framework ile masaüstü uygulaması yapacağız dediğinizi duyar gibiyim. İşte burada devreye Electron JS giriyor. Electron bizim HTML, CSS ve JS kullanarak geliştirdiğimiz web uygulamasının multi platform yani Windows, Mac OS ya da Linux işletim sisteminde çalışabilecek, native bir masaüstü uygulaması olmasını sağlıyor. Electron JS bunu Node JS ve Chromium’u kullanarak yapıyor. Chromium bize hızlı ve stabil bir tarayıcı sağlayan open source bir projedir.
Böylece bir web geliştiricisi mevcut bilgileriyle masaüstü uygulaması geliştirebilir hale geliyor. Electron JS ile masaüstü geliştirmenin temelde bir web uygulaması geliştirmekten hiçbir farkı olmadığını söylemeliyiz. Yalnızca uygulamada yeni pencere açtırılması ya da bilgisayardan bir takım bilgilerin okunması (saat, işletim sistemi adı vs.) gibi durumlarda electron API’ını kullanarak işletim sistemi ile iletişime geçiyoruz.
Electron ile geliştirilmiş bazı masasüstü uygulamalarını yukarıda görebilirsiniz. Benim bu uygulamayı geliştirirken kullanacağım text editor VS Code da electron ile geliştirilmiştir.
Angular Projesini Oluşturma
Şimdi gelelim uygulamayı nasıl geliştireceğimize; öncelikle uygulama geliştirmek için Angular IO gibi bir SPA Framework’u kullanacağız. Bunun için ilk iş bir Angular projesi ayağa kaldırmalıyız. Ama Angular’a geçmeden önce bilgisayarımıza Node JS ve onun paket yöneticisi NPM (Node Package Manager) kurmalıyız. Bunun iki sebebi var; bunlardan ilkiuygulama içinden bütün Node JS API’larını kullanabiliriz. Örneğin bir web projesinde kullanıcının bilgisayarındaki herhangi bir dosyayı okumak, mevcut bir dosyayı değiştirmek ya da yeni bir dosya oluşturmak mümkün değilken electron ile geliştirdiğimiz masaüstü uygulamasında bunu Node JS’in fs isimli modülünü kullanarak yapabilmekteyiz. Diğer sebebe gelecek olursak da istediğimiz Node JS modülünü uygulamaya entegre ederek kullanabiliriz. Hem de birazdan değineceğimiz Angular projesini ayağa kaldırmak için NPM’e ihtiyacımız var.
Bu adresten işletim sisteminize uygun Node JS versiyonunu yükledikten sonra NPM’de onunla beraber bilgisayarınıza kurulacaktır. Node JS’i bilgisayarımıza kurduktan sonra sıra geldi Angular projesi oluşturmaya bu aşamada Angular CLI kullanacağız. CLI, Command Line Interface’in kısaltması ne olduğu konusuna çok fazla girmeyeceğim ama kısaca bize proje oluşturma aşamasında yardımcı olacak bir Komut Satırı Arayüz’ü olarak tanımlayabiliriz.
Öncelikle bilgisayarımızda bir komut satırı açmalıyız. Bu işletim sistemizie bağlı olarak Terminal, Command Prompt ya da Powershell vs. olabilir. Ardından npm install -g @angular/cli komutunu kullanarak angular cli’ı bilgisayarımıza kuruyoruz. Burada biraz önce bilgisayarımıza yüklediğimiz npm yani node package manager’dan yararlanıyoruz. install komutundan sonra kullandığımız -g ise yükleyeceğimiz paketin bilgisayarımıza global olarak yüklenmesini sağlıyor böylece bu pakete her ihtiyacımız olduğunda bu paketi tekrar tekrar kurmak zorunda kalmayacağız. Ve daha sonra da yüklemek istediğimiz paketin adını yazarak gerekli Angular CLI paketini yüklüyoruz. Angular CLI’ın yüklendiğinden emin olmak için komut satırına ng --version yazacak olursak burada Angular CLI’ın versiyonunu görmemiz gerekiyor.
Angular CLI’ı kurduk şimdi ng new project-name komutu ile yeni bir Angular projesi oluşturalım. Burada project-name yerine istediğiniz proje adını kullanabilirsiniz.
Bu komutu çalıştırdıktan sonra Angular CLI bize Angular routing paketini kullanmak isteyip istemediğimizi ve Less, Sass gibi bir CSS Preprocessor kullanıp kullanmayacağımızı soruyor. Ben Angular Routing paketini kullanmak istediğim için ilk soruya y olarak cevap veriyorum. Bu aşamada herhangi bir CSS preprocessor kullanmayacağım dolayısıyla ikinci soruda CSS seçeneğini seçiyorum. Bu aşamadan sonra CLI bizim için bir Angular projesi oluşturacaktır.
Projemizi oluşturulduktan sonra bulunduğu dizine girerek ng serve komutu ile çalıştırabiliriz. Artık Angular CLI kullanılarak oluşturulan bir web uygulamasına sahibiz. localhost 4200 portunda Angular uygulamamız çalışıyor.
Projemiz webde bu şekilde gözükmekte, şimdi gelelim bunu nasıl masaüstü uygulamasına çevireceğimize.
Electron’u Projeye Dahil Etme
İşte burada devreye electron giriyor. Öncelikle aşağıdaki komutu kullanarak electron’u projemizin dependencyleri arasına ekliyoruz.
npm install --save-dev electronElectron’a masaüstü uygulamasını oluştururken kullanacağı bir JS dosyası göstermeliyiz. Bunu da projemizin package.json dosyasına aşağıdaki komutu ekleyerek yapıyoruz. Ben root dizinde bir main.js dosyası oluşturdum ve electron’a bunu kaynak olarak göstereceğim.
“main”: “main.js”,Eğer electron’a hangi dosyayı kullanacağını söylemezsek default olarak root dizindeki index.js dosyasını çalıştırmayı deneyecektir.
Electron paketi içinden bu dosyada kullanacağım app ve BrowserWindow isimli objeleri object destructuring kullanarak alıyorum.
İlk olarak uygulamamızın hazır olduğunda yapacağı işlemleri app objesinin ready eventi içine yukarıdaki gibi tanımlıyoruz. app.on(‘ready’, createWindow) Burada ben createWindow() isimli fonksiyonu çalıştırmasını istedim. Bu fonksiyon ise BrowserWindow objesini kullanarak anasayfa penceremizi oluşturacaktır ve bunu win isimli değişkene atayacaktır. BrowserWindow içerisinde oluşturacağımız pencerenin özelliklerini belirtebiliriz. Yukarıda pencerenin genişlik ve yükseklik ayarlarını yaptık. Arkasından win.loadFile(‘dist/angular-electron-app/index.html’)kodu ile penceremizin gösterilecek olan web sayfasını yüklemesini sağlıyoruz.
Burada açıklamamız gereken bir konu daha var uygulama klasörlerine bir göz gezdirirseniz dist isimli bir klasörün olmadığını göreceksiniz. Peki neden böyle bir tanımlama yaptı?. Çünkü geliştirdiğimiz uygulama bir Angular uygulaması yani aslında index.html dosyamızın içi çalışma zamanında oluşuyor. Bu client side bir Single Page Application olduğu için HTML dosyası runtime’da ilgili route ve componentlere göre Javascript (Typescript) yardımıyla sürekli olarak değşiklik gösteriyor. Dolayısıyla öncelikle Angular projemizi ng build — prod — base-href ./ komutunu kullanarak build almalıyız ardından root dizinde dist isimli bir klasör ve onun içinde de uygulama adına sahip bir klasör oluşacak. Kaynak olarak kullanabileceğimiz index.html dosyası oradadır. Bu dosyayı incelersiniz Javascript dosyalarının birleştirilerek tek bir dosya haline getirildiğini ve script’in buraya import edildiğini görebilirsiniz.
Yani win.loadFile('dist/angular-electron-app/index.html') yerine src klasörü içindeki index.html’i win.loadFile('src/index.html') şeklinde kaynak olarak gösterirsek uygulamamız doğru çalışmayacaktır.
Ek Olarak
- Uygulama her çalıştığında geliştirici konsolunu görmek istiyorsak aşağıdaki kodu kullanabiliriz.
win.webContents.openDevTools()İ- Uygulama penceresinde menü olmasın istiyorsak.
win.webContents.removeMenu();Daha bir çok metot bulunuyor electron uygulama görünümünü istediğimiz gibi customize edebilmemize izin veriyor.
main.js dosyamızı da bu şekilde tanımladıktan sonra gelelim uygulamamızı çalıştırmaya bildiğiniz üzere web tarafında uygulamamızı npm run start ya da ng serve komutları ile çalıştırıyorduk. Bu komutlar package.json dosyası içerisinde scripts bölümünde yer almaktadır. Ben de electron uygulamamızı çalıştırmak için package.json içerisinde scripts bölümüne aşağıdaki gibi bir script ekleyeceğim.
“electron”: “ng build — prod — base-href ./ && electron .”Artık npm run electron komutunu kullanarak projemizi çalıştırabilir ve hangi işletim sistemini kullanıyorsak kullanalım uygulamamızı görebiliriz. Bundan sonrasında Angular projemizde yaptığımız değişikliklerden sonra bu komutu tekrar çalıştırırsak masaüstü uygulamamızın da değiştiğini göreceğiz.
npm run electron komutu içerisinde 2 farklı komut bulundurmaktadır. İlk komut ng build — prod — base-href ./ uygulamamızın son halini build ederek dist isimli klasöre çıktı alır sonra ikinci komut olan electron . komutu çalışır. Bu komut çalıştığı dizindeki package.json dosyasındaki "main": "main.js",satırına bakarak electron uygulamasının çalışması için root dizinde bulunan main.js isimli dosyaya bakması gerektiğini anlar ve main.js’i çalıştırır. main.js de dist/project-name içerisindeki index.html dosyasını yükler ve masaüstü uygulamasına dönüştürür.
Eğer projemizde herhangi bir değişiklik yoksa, daha önceden build aldıysak ve tekrar tekrar build almadan projemizin masaüstü versiyonunu çalıştırmak istiyorsak komut satırında direkt olarak electron . komutunu yazdığımızda da projemiz çalışacaktır. Ancak bunun için Electron JS paketinin bilgisayarınızda global olarak kurulu olması gerektiğini unutmayınız. Aşağıdaki komut vasıtasıyla Electron JS’i bilgisayarınıza global olarak yükleyebilirsiniz.
npm install -g electron
Birkaç Küçük Öneri
Böyle hayatımızı kolaylaştıran bir teknoloji kullanıyorken bazı işlerin bize yeni işler çıkartarak iş yükümüzü arttırmasına izin vermemeliyiz. Bu yüzden;
- Masaüstü uygulamasında yeni pencere açtırmak gereken durumlarda bunun yerine web uygulaması içerisinde Modal Dialog açtırmak,
- Herhangi bir durumda kullanıcıya hata mesajı göstermemiz gerektiğinde yine masaüstü yeni bir pencerede göstermek yerine bir takım JS kütüphaneleri vasıtasıyla web uygulamasına bu işi yaptırmak,
vb. gibi yöntemleri kullanırsanız bu yöntemler hem web uygulamanızda hem de masaüstü uygulamanızda çalışacak ve aynı durum için farklı kodlar yazmanızı engelleyecektir.
NOT: Aslında bir web uygulaması geliştirdiğimizi söyledik ama electron, tarayıcılarda bulunan window objesinin bazı yeteneklerini makul sebeplerle kullanmamıza izin vermiyor. Bunlar; alert(), confirm() ve prompt() gibi metotlar. Hemen kullanamama sebebini de söyleyelim; bu metotlar kullanıcıdan bir etkileşim gelene kadar electron’un arkasındaki iş parçacıklarının çalışmasını engelliyor bu da uygulamanın o esnada durmasına sebep oluyor. Dolayısıyla electron bu metotları desteklemiyor ama bunlar yerine 3. parti kütüphaneleri kullanmamızı öneriyor.
Sonuç
Eğer HTML, CSS ve JS gibi web teknoljileriyle ilgili ve bunun yanında da hoş bir kullanıcı deneyimi sunan platform bağımsız bir masaüstü uygulaması geliştiren bir yazılım geliştirici iseniz Electron sizin için biçilmiş kaftan. Ayrıca geliştirdiğiniz uygulamanın tek bir codebase’den hem web’de hem masaüstünde çalışması, Electron’un, biz yazılım geliştiricilerin işini kolaylaştıran taraflarından birisidir.
Linkler
Projenin kaynak kodlarına aşağıdaki bağlantıdan erişebilirsiniz.
