Cara Membuat Aplikasi Desktop dengan Mudah dengan HTML, CSS dan Javascript

Bolehkah HTML, CSS dan Javascript digunakan untuk membina Aplikasi Desktop?

Jawapannya adalah ya.

Dalam Artikel ini kita akan memfokuskan terutama pada bagaimana Elektron dapat digunakan untuk membuat aplikasi desktop dengan Teknologi Web seperti HTML, CSS dan Javascript.

Elektron

Elektron boleh digunakan untuk membuat Aplikasi Desktop dengan HTML, CSS dan Javascript. Aplikasi ini juga berfungsi untuk pelbagai platform seperti Windows, Mac, Linux dan sebagainya.

Elektron menggabungkan Chromium dan NodeJS menjadi satu masa berjalan. Ini membolehkan kita menjalankan kod HTML, CSS dan Javascript sebagai aplikasi desktop.

Elektron Forge

Sekiranya Electron digunakan secara langsung, maka diperlukan beberapa penyediaan manual sebelum membina aplikasi anda. Sekiranya anda mahu menggunakan Angular, React, Vue atau kerangka kerja atau pustaka lain, anda perlu mengkonfigurasinya secara manual.

Electron Forge menjadikan perkara di atas menjadi lebih mudah.

Ia menyediakan aplikasi templat dengan kerangka Angular, React, Vue dan lain-lain yang mengelakkan persediaan manual tambahan.

Juga menyediakan cara mudah untuk membina dan mengemas aplikasi. Ini juga menyediakan banyak ciri lain yang terdapat dalam dokumentasi mereka.

Pra-syarat

Pastikan NodeJS dipasang. Ia boleh dipasang dari sini.

Pasang Electron Forge secara global menggunakan arahan berikut:

npm install -g electron-forge

Mari mulakan dengan aplikasi

Gunakan arahan berikut untuk membuat aplikasi anda:

electron-forge init simple-desktop-app-electronjs

simple-desktop-app-electronjs adalah nama aplikasi.

Perintah di atas akan memakan masa untuk dijalankan.

Setelah selesai berjalan, mulailah aplikasi menggunakan perintah berikut:

cd simple-desktop-app-electronjsnpm start

Ini akan membuka tetingkap seperti yang ditunjukkan di bawah:

Memahami Struktur dan Kod Folder Yang Ada

Aplikasi ini mempunyai struktur folder tertentu. Di sini saya akan menyebutkan beberapa perkara penting dalam struktur folder ini.

pakej.json

Ini memiliki informasi tentang aplikasi yang Anda buat, semua ketergantungan yang diperlukan untuk aplikasi, dan beberapa skrip. Sebilangan skrip sudah dikonfigurasi sebelumnya, dan anda juga dapat menambahkan skrip baru.

The config.forge jalan mempunyai semua konfigurasi yang lebih spesifik kepada ElectronJS. Sebagai contoh make-target digunakan untuk menentukan target membuat fail untuk pelbagai platform seperti Windows, Mac atau Linux.

Package.json juga mempunyai "main": "src/index.js"yang menunjukkan bahawa src / index.js adalah titik permulaan aplikasi

src / index.js

Menurut package.json, index.js adalah skrip utama. Proses yang menjalankan skrip utama dikenali sebagai proses utama . Jadi proses utama menjalankan skrip index.js.

Proses utama digunakan untuk memaparkan elemen GUI. Ia melakukannya dengan membuat laman web.

Setiap halaman web yang dibuat berjalan dalam proses yang disebut proses renderer.

Proses utama dan proses renderer

Tujuan proses utama adalah membuat laman web menggunakan BrowserWindowInstance.

The BrowserWindowinstance menggunakan proses pemapar untuk menjalankan setiap laman web.

Setiap aplikasi hanya dapat memiliki satu proses utama tetapi dapat memiliki banyak proses penyaji.

Adalah mungkin untuk berkomunikasi antara proses utama dan proses penyaji juga. Perkara ini, bagaimanapun, tidak akan dibahas dalam artikel ini.

abcd.html ditunjukkan sebagai laman web kedua dalam seni bina di atas. Tetapi dalam kod kami, kami tidak akan mempunyai laman web kedua.

src / index.html

index.js memuat fail index.html ke dalam BrowerWindow Instance yang baru.

Yang pada dasarnya ini bermaksud bahawa index.js membuat Window GUI baru, dan memuatkannya dengan halaman web index.html. Halaman web index.html berjalan dalam proses penyajiannya sendiri.

Kod dalam index.js dijelaskan

Sebilangan besar kod yang dibuat di index.js mempunyai komen yang baik yang menjelaskan apa yang dilakukannya. Di sini saya akan menyebutkan beberapa perkara penting yang perlu diberi perhatian di index.js:

mainWindow = new BrowserWindow({ width: 800, height: 600, }); // and load the index.html of the app. mainWindow.loadURL(`file://${__dirname}/index.html`);

The above code snippet basically creates a BrowserWindow Instance and loads index.html into the BrowserWindow.

You will see app used often in the code. For example take the below code snippet:

app.on('ready', createWindow);

app is used to control the application’s event life cycle.

The above code snippet says that when the application is ready, load the first window.

Similarly, app can be used to perform other actions on various events. For example it can be used to perform some action right before the application closes and so on.

Let’s create a Temperature Converter Desktop Application

Let us use the same application we used before and modify it slightly to create a temperature converter application.

First let us install Bootstrap with the following command:

npm install bootstrap --save

Copy the following code into src/index.html:

    Temperature Converter    

Temperature Converter

Celcius: Fahrenheit:

The above code does the following:

  1. Creates a text box with id Celcius. Whenever anything is typed in this textbox, the celciusToFahrenheit() function is called.
  2. Creates a text box with id Fahrenheit. Whenever anything is typed in this textbox, the fahrenheitToCelcius() function is called.
  3. Whenever a new value is typed in the Celcius text box, the value in the Fahrenheit text box displays the same temperature in Fahrenheit
  4. Whenever a new value is typed in the Fahrenheit text box, the value in the Celcius text box displays the same temperature in Celcius

The 2 functions which do the temperature conversion are present in renderer.js.

Create a file called renderer.js inside src. Copy the following code into it:

function celciusToFahrenheit(){ let celcius = document.getElementById('celcius').value; let fahrenheit = (celcius* 9/5) + 32; document.getElementById('fahrenheit').value = fahrenheit; } function fahrenheitToCelcius(){ let fahrenheit = document.getElementById('fahrenheit').value; let celcius = (fahrenheit - 32) * 5/9 document.getElementById('celcius').value = celcius; }

The celciusToFahrenheit() function reads the value in the Celcius text box, converts it to Fahrenheit, and writes the new temperature into the Fahrenheit text box.

The fahrenheitToCelcius() function does the exact opposite of this.

Running the application

Run the application using the following command:

npm start

This should display the following window. Try it out with different values.

Packaging the application

The command to package the application is:

npm run package

This command will take some time to run. Once it finishes check the out folder within the project folder.

I tested this in a Windows machine. This creates a folder called simple-desktop-app-electronjs-win32-x64 inside the out folder

So in the out/simple-desktop-app-electronjs-win32-x64 folder, the command creates an .exe file for this application. Clicking on the exe file automatically starts the desktop application.

The folder name simple-desktop-app-electronjs-win32-x64 can be broken down as appname-platform-architecture where

  • appname = simple-desktop-app-electronjs
  • platform = win32
  • architecture = x64

When you run this command without any parameters, by default it packages for the platform which you are using for development.

Let’s say you want to package for a different platform and architecture. Then you can use the following syntax:

npm run package -- --platform= arch=

For example, in order to package for linux you can use the following command:

npm run package -- --platform=linux --arch=x64

This will create a folder called simple-desktop-app-electronjs-linux-x64 inside the out folder.

Creating a make File

In order to create a make file or an installer for the application, use the following command:

npm run make

This command will take some time to run. Once it finishes check the out folder within the project folder.

The out/make folder will have a Windows installer for the desktop application.

When you run this command without any parameters, by default it creates the installer for the platform which you are using for development.

Code

The code for this desktop application is available in my GitHub repo:

//github.com/aditya-sridhar/simple-desktop-app-electronjs

Congrats ?

You now know how to create desktop applications using HTML, CSS and Javascript.

This article covered very basic concepts of Electron and Electron-Forge.

To know more about them, you can check out their documentation.

About the author

I love technology and follow the advancements in the field. I also like helping others with my technology knowledge.

Feel free to connect with me on my LinkedIn account //www.linkedin.com/in/aditya1811/

You can also follow me on twitter //twitter.com/adityasridhar18

My Website: //adityasridhar.com/

Read more of my articles on my blog at adityasridhar.com.