Electron JS ile Masaüstü Uygulama Yapımı (Html,Css,Javascript)

Electron JS biz web geliştiricilerin html,css,js,bootstrap gibi kütüphanelerden yararlanarak yapmış olduğumuz statik sayfaları masaüstü uygulamaya çevirmektedir. Evet çok basit html,css,js bilmeniz yeterli ve bunun sonucunda tüm platformlara duyarlı uygulama üretmiş olacaksınız.

Düşünsenize C+,C++,Python,Java gibi programlama dillerine gerek duymadan işin içinden çıkıyorsunuz :d electron js’i sizlere fatura kesim uygulaması yaparak anlatacağım böylelikle daha somut bir anlatım makale olacağını düşünmekteyim.

Electron JS Nedir?

JavaScript, HTML ve CSS ile platformlar arası masaüstü uygulamaları yapmamızı sağlar. Yapmış olduğumuz uygulamaları multiple ortamlarda( MacOS, Windows , Linüx ) gibi işletim sistemlerinde çalışır halde sunan açık kaynak kütüphanedir. Elecrton js node.js ‘i ve chormium kullanmaktadır ondan dolayı node yüklü olması gerek.

Electron .js ile oluşturulmuş çok güzel uygulamalar bulunmaktadır ;

• Visual Studio Code
• Whatsapp Desktop
• Twitch
• Microcoft Terms
• Skype
• Figma
• Github Desktop
• WordPress Desktop

Electron JS Nasıl İndirilir ?

Resmi web sitesinde ne tür indereceğiniz hakkında komutlar bulunmakta. Ama ben fatura kesim uygulaması yapacağımdan dolayı şimdi analatacağım 🙂

1. npm init komutuyla main’i main.js olan bir package.json oluşturunuz.
2. package.json ‘da scripts’te "start": "electron ." bu kodu ekleyiniz.
3. Terminale npm install electron --save ile electron’u indiriniz.
4. Ana dizinde main.js dosyası oluşturmanız yeterlidir.
5. Ana dizinde basit bir main.html dosyası oluşturun ve birkaç satır kod yazın :d

Electron JS Uygulaması Nasıl Çalıştırılır ?

İndirme işlemi bittikten sonra main.js’te electronu ve yanındaki bağımlılıkları import ediyoruz. Dosyamız hazır olduğunda bir web penceresi açtırtacağız onun içinde url bağımlılığı ile html dosyamızın yolunu,protokolünü ayarlıyoruz. HTML kodlarımızıda yazdıktan sonra aşağıdaki kodu main.js dosyamıza yapıştırın.

const electron=require('electron');
const url=require('url');
const path=require('path');

const {app,BrowserWindow}=electron;

let mainWindow;

app.on('ready',()=>{
    console.log('start !');

    mainWindow=new BrowserWindow({});
    mainWindow.loadURL(url.format(
            {
            pathname:path.join(__dirname,"main.html"),
            protocol:"file:",
            slashes:true
            }
        )
    )
})

yapıştırdıktan sonra npm run start komutunu çalıştırınız.

Electron JS ile Uygulama Nasıl Build Edilir ?

Şimdi geldik işin son kısmına. Uygulamamızı 3 platform içinde build edebiliriz . Bunun için electron.js in packager’i bulunmaktadır onu indirmek için :

• npm install electron-packager –save-dev
• npm install electron-packager –g

bu kodları terminale yazınız. Yazdıktan Sonra kendinize özgü icon bulunuz .

Mac OS X için Uygulamayı Build Etme

Build ederken assets/icons/mac/app.icns icon dosyanızı atın

electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/app.icns --prune=true --out=release-builds

Windows için Uygulamayı Build Etme

Build ederken assets/icons/win/app.ico icon dosyanızı atın ve ProductName=”Uygulama İsminiz” inizi aşağıdaki kodta düzenleyin.

electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/app.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Uygulama İsminiz"

Linux Ubuntu için Uygulamayı Build Etme

Uygulama iconunuzu assets/icons/linux/app.png burada oluşturunuz.

electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/linux/app.png --prune=true --out=release-builds

Electron JS ile Fatura Kesim Uygulaması

Bu uygulamamızda önce html statik olarak giydireceğiz ardından javascript ile dinamik yapacağız. Oldukça Basit olacak kullanıcı ürün ismi , tutar , adet , kdv , indirim oranını kendi girecek ve sonuç olarak bize toplam fiyat gözükecek.

Her şey bu kadar basit frontendinte bootsrap kütüphanesinin css dosyasını ve javascript te ise düz vanilla js yazacağız 🙂 Javascript kodlarımızı script tagları arasında yazıyoruz.

Uygulamamızın Tasarımını Yapalım

Hatırlarsanız electron.js’i indirirken basit bir index.html dosyası yapmıştık . O dosya üzerinde bootsrapın css dosyasını harici olarak çalıştıracağız. Bootstrapı dahil ettikten sonra sizler için basit bir html formu hazırladım

<!doctype html>
<html lang="tr">

<head>
    <!--  Meta Etiketleri  -->
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
            initial-scale=1,maximum-scale=1" />
    <meta name="description" content="" />
    <meta property="og:site_name" content="" />
    <meta property="og:title" content="" />
    <meta property="og:description" content="" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="index.html" />
    <meta property="og:image" content="" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="" />
    <meta property="og:image:height" content="" />
    <link rel="icon" type="image/png" href="" />
    <link rel="apple-touch-icon" href="" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <title>Fatura Kesim </title>
    <style>
        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>
</head>

<body >
    <!--Menü Alanı Başlangıcı-->
    <!-- Image and text -->
    <nav class="navbar navbar-dark bg-danger">
        <a class="navbar-brand" href="/">
            Fatura Oluşturma
        </a>
    </nav>

    <div class="container my-2">
        <form name="form1" id="form1" action="" method="post">

            <!--Ürün Bilgileri Alanı-->
            <div class="card w-100">
                <div class="card-header">
                    <h5 class="card-title">Ürün Bilgileri</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md">
                            <label for="productname">Ürün İsmi</label>
                            <input type="text" name="name" id="productname" class="form-control" placeholder="Ürün
                                    ismini yazınız...">
                        </div>
                        <div class="col-md">
                            <label for="productcount">Ürün Adeti</label>
                            <select name="productcount" id="productcount" class="form-control">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                        </div>
                        <div class="col-md">
                            <label for="productprice">Ürün Tutarı</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="productprice" name="productprice"
                                    placeholder="Ürün Tutarı">
                                <div class="input-group-append">
                                    <span class="input-group-text" id="basic-addon2">₺</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Ürün Bilgileri Alanı Bitişi-->

            <div class="card my-4">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-borderless w-100">
                            <tr>
                                <td>İndirim Oranı</td>
                                <td>
                                    <div class="input-group">
                                        <input type="number" name="sale" id="sale" placeholder="İndirim
                                                Yüzdesi" class="form-control">
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="basic-addon2">%</span>
                                        </div>
                                        <input type="text" name="saletutar" id="saletutar" readonly
                                            class="form-control">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>KDV Oranı</td>
                                <td>

                                    <div class="input-group">
                                        <input type="number" name="kdv" id="kdv" value="18" class="form-control">
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="basic-addon2">%</span>
                                        </div>
                                        <input type="text" name="kdvtutar" id="kdvtutar" readonly
                                            class="form-control">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Toplam</td>
                                <td>

                                    <div class="input-group">
                                        <input type="number" name="total" id="total" readonly class="form-control">
                                        <div class="input-group-append">
                                            <span class="input-group-text" id="basic-addon2">₺</span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        
                    </div>
                </div>
            </div>

        </form>
    </div>


</body>

</html>

Uygulamamızı Javascript ile Dinamikleştirelim

Ben kodları anlaşılır bir şekilde yazmaya çalıştım . Varsayılan değer atamaları yaptım. Genel bir fonksiyon oluşturdum input’a keyup eventi geldiğinde fonksiyon tekrar çalıştılacak şekilde yaptım. Aranızda daha iyilerini yapacağımdan hiç şüphem yok 😉 .

window.addEventListener("load", () => {
    /********** DOM Element Seçicileri **********/
    let productCount = document.querySelector("#productcount");
    let productPrice = document.querySelector("#productprice");
    let productSale = document.querySelector("#sale");
    let productKdv = document.querySelector("#kdv");
    let productTotal = document.querySelector("#total");
    let saleTutar = document.querySelector("#saletutar");
    let kdvTutar = document.querySelector("#kdvtutar");

    // ürün işlemleri  & hesaplamalar
    var product = {
    count: 1,
    price: null,
    kdv: 18,
    sale: null,
    total: null,
    };

    // ürün işlemleri değer atamaları

    productCount.addEventListener("change", (e) => {
    product.count = e.target.value;
    //console.log(product.count);
    total();
    });

    productPrice.addEventListener("keyup", (e) => {
    product.price = e.target.value;
    //console.log(product.price);
    total();
    });

    productSale.addEventListener("keyup", (e) => {
    product.sale = e.target.value;
    //console.log(product.sale);
    total();
    });

    productKdv.addEventListener("keyup", (e) => {
    product.kdv = e.target.value;
    //console.log(product.kdv);
    total();
    });

    // Ürün Hesaplama

    function total() {
    if (product.price != null && product.sale != null) {
        // Ürün Toplam Fiyatı
        let productPrice = product.count * product.price;

        // Ürün Toplam Fiyatına İndirim Ekleme
        let productSale = (productPrice * product.sale) / 100;
        productPrice = productPrice - productSale;

        // Ürün KDV Oranı Hesaplama ve Ekleme
        let productKdv = (productPrice * product.kdv) / 100;
        productPrice = productPrice + productKdv;

        // DOM a Aktarım
        saleTutar.value = productSale+' TL';
        kdvTutar.value = productKdv +' TL';
        productTotal.value = productPrice;

        // console.log('İndirim Tutarı ==> -'+productSale)
        // console.log('KDV Tutarı ==> '+productKdv)
        // console.log('Toplam     ==> '+productPrice)
    }
    }

    total();
});

bu kodları main.html yazdıktan uygulamımız tamamlanmıştır. npm run start ile görebilirsiniz. Uygulamamızı aşağıdaki kod ile windows için build edebilirsiniz

electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/favicon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Fatura Kesim"

Yaptığım örnekleri sizler için github’ta paylaştım