Како лако градити радне површине помоћу ХТМЛ-а, ЦСС-а и Јавасцрипта

Да ли се ХТМЛ, ЦСС и Јавасцрипт заиста могу користити за изградњу десктоп апликација?

Одговор је да.

У овом чланку фокусираћемо се углавном на то како се Елецтрон може користити за креирање апликација за рачунаре са Веб технологијама попут ХТМЛ-а, ЦСС-а и Јавасцрипта.

Елецтрон

Елецтрон се може користити за изградњу десктоп апликација са ХТМЛ-ом, ЦСС-ом и Јавасцрипт-ом. Такође ове апликације раде за више платформи попут Виндовс, Мац, Линук и тако даље.

Елецтрон комбинује Цхромиум и НодеЈС у једно време рада. То нам омогућава покретање ХТМЛ, ЦСС и Јавасцрипт кода као радне површине.

Елецтрон Форге

Ако се Елецтрон користи директно, потребно је ручно подешавање пре израде апликације. Такође, ако желите да користите Ангулар, Реацт, Вуе или било који други оквир или библиотеку, мораћете да то ручно конфигуришете.

Елецтрон Форге чини горе наведене ствари много лакшим.

Пружа шаблон апликације са Ангулар, Реацт, Вуе и другим оквирима што избегава додатна ручна подешавања.

Такође пружа једноставан начин за израду и паковање апликације. Такође пружа многе друге карактеристике које се могу наћи у њиховој документацији.

Предуслови

Обавезно инсталирајте НодеЈС. Може се инсталирати одавде.

Инсталирајте Елецтрон Форге глобално користећи следећу команду:

npm install -g electron-forge

Почнимо са апликацијом

Користите следећу наредбу за креирање апликације:

electron-forge init simple-desktop-app-electronjs

симпле-десктоп-апп-елецтроњс је назив апликације.

Покретању горње наредбе требаће неко време.

Када се заврши, покрените апликацију помоћу следећих наредби:

cd simple-desktop-app-electronjsnpm start

Ово би требало да отвори прозор попут приказаног доле:

Разумевање постојеће структуре и кода мапе

Апликација има одређену структуру директоријума. Овде ћу споменути неке од важних ствари у овој структури директоријума.

пацкаге.јсон

Садржи информације о апликацији коју креирате, свим зависностима потребним за апликацију и неким скриптама. Неке скрипте су већ унапред конфигурисане, а можете додати и нове скрипте.

Цонфиг.форге пут је све конфигурације које су специфичне за ЕлецтронЈС. На пример, маке- таргет се користи за одређивање циљних датотека за различите платформе као што су Виндовс, Мац или Линук.

Такође пакет.јсон има "main": "src/index.js"што указује да је срц / индек.јс почетна тачка апликације

срц / индек.јс

Према пацкаге.јсон, индек.јс је главна скрипта. Процес који покреће главну скрипту познат је као главни процес . Дакле, главни процес покреће скрипту индек.јс.

Главни процес се користи за приказ ГУИ елемената. То чини стварањем веб страница.

Свака креирана веб страница покреће се у процесу који се назива процес приказивања.

Главни процес и поступак приказивања

Сврха главног процеса је стварање веб страница помоћу BrowserWindowИнстанце.

BrowserWindowОсновни користи процес приказивача за покретање сваку веб страницу.

Свака апликација може имати само један главни процес, али може имати много процеса приказивања.

Такође је могуће комуницирати између главног и процеса приказивања. Ово, међутим, неће бити покривено у овом чланку.

абцд.хтмл је приказан као друга веб страница у горњој архитектури. Али у нашем коду нећемо имати другу веб страницу.

срц / индек.хтмл

индек.јс учитава датотеку индек.хтмл у нову инстанцу БроверВиндов.

То у основи значи да индек.јс креира нови ГУИ прозор и учита га са индек.хтмл веб страницом. Веб страница индек.хтмл ради у свом процесу приказивања.

Објашњен код у индек.јс.

Већина кода створеног у индек.јс има добре коментаре који објашњавају шта ради. Овде ћу споменути неколико кључних тачака које треба напоменути у индек.јс:

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

Наведени код фрагмент основи ствара БровсерВиндов Основни и оптерећења индек.хтмл у БровсерВиндов.

У коду ћете видети апликацију која се често користи. На пример, узмите доњи исечак кода:

app.on('ready', createWindow);

апликација се користи за контролу животног циклуса догађаја апликације.

Горњи исечак кода каже да када је апликација спремна, учитајте први прозор.

Слично томе, апликација се може користити за обављање других радњи на различитим догађајима. На пример, може се користити за извођење неке акције непосредно пре затварања апликације и тако даље.

Створимо радну апликацију „Претварач температуре“

Искористимо исту апликацију коју смо користили раније и мало је модификујмо да бисмо креирали апликацију претварача температуре.

Прво инсталирајмо Боотстрап следећом командом:

npm install bootstrap --save

Копирајте следећи код у срц / индек.хтмл:

    Temperature Converter    

Temperature Converter

Celcius: Fahrenheit:

Горњи код чини следеће:

  1. Ствара оквир за текст са ИД-ом Целциус . Кад год се нешто упише у ово поље за текст, позива се функција целциусТоФахренхеит () .
  2. Ствара оквир за текст са ид Фахренхеит-а . Кад год се нешто упише у ово поље за текст, позива се функција фахренхеитТоЦелциус () .
  3. Кад год се у поље за Целциус укуца нова вредност, вредност у оквиру Фахренхеит приказује исту температуру у Фахренхеит-у
  4. Кад год се у поље за текст Фахренхеита укуца нова вредност, вредност у пољу Целциус приказује исту температуру у Целзијусу

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/

Прочитајте више мојих чланака на мом блогу на адитиасридхар.цом.