Како се праве изворне апликације за радне површине помоћу ЈаваСцрипт-а (Протон Нативе)

Када сам писао овај чланак, Атвоодов закон ми је пао на памет:

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

Првобитно објављено на мом блогу!

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

За разлику од Елецтрон апликација, апликације изграђене са Протон Нативе су заправо изворне (отуда и назив) и нису засноване на хрому.

Протон Нативе је попут Реацт Нативе-а, али за радну површину. Компајлира се у изворни код платформе, тако да изгледа и изводи се као изворна апликација.

Па кренимо.

Виндовс

Инсталирајте алате за изградњу покретањем:

npm install --global --production windows-build-tools

Линук

Требаће вам следеће библиотеке:

• либгтк-3-дев
• битна за изградњу

Мац

Не треба ти ништа.

Сада покрените следеће:

npm install -g create-proton-app

и

create-proton-app my-app

да направи нови пројекат.

Отворите директоријум пројекта помоћу вашег омиљеног уређивача кода. Директоријум треба да изгледа овако:

 └───node_modules ├───.babelrc ├───index.js ├───package.json └───package-lock.json

index.js треба да изгледа овако:

Баш као и сваки Реацт или Реацт Нативе Пројецт, увозимо библиотеку реаговања и правимо компоненту класе.

AppЕлемент је само контејнер који држи у рукама Window и Menu, и Windowима три реквизите: title(прозор титле), size(заузима објекат који садржи ширину и висину прозора), и menuBar(подеси на Фалсе, јер не желе Мени бар).

Пре него што започнемо са кодирањем, инсталирајмо cryptoпомоћу npm:

npm i crypto

Користићемо cryptoза хеширање текста помоћу МД5 алгоритма.

индек.јс

Прво сам увезао Textи TextInputда бих их касније могао користити. Тада сам classнакон постављања textи md5празних низова у state објекту креирао функцију hashкоја узима textаргумент.

У hashфункцији постављамо стање на textи изјављујемо md5да чува шифровани текст (као у наставку)

this.setState({ text });let md5 = crypto.createHash("md5")  .update(text, "utf8").digest("hex");

и подесите државни објекат на ажурирани md5.

this.setState({ md5 });

renderМетод враћа неки jsxелемент. BoxЕлемент је као divу Реацт, или Viewу Реацт Нативе, који држи TextInputи Text. То је зато што родитељски елемент прозора не дозвољава рађање више од једног детета.

TextInputима onChangeреквизит који ће се позивати сваки пут када се текст промени. Стога га постављамо на функцију масне стрелице која узима textаргумент и враћа hashфункцију коју смо раније декларисали.

Дакле, сваки пут када се текст мења, textхешира и поставља на md5.

Сад ако покренемо са

npm run start

овај прозор би требао искочити:

А ако унесемо неки текст, он се хешира на мд5 овако:

Могли бисте рећи „Изгледа ружно - додајмо му неки стил.“ Па, у време писања овог чланка, Протон Нативе је још увек у повојима. Веома је грешка и не подржава стил (још увек), али забаван је пројекат за играње.

Ако желите да допринесете пројекту, погледајте репо.

Ако имате питања или сугестије, слободно коментаришите или ме контактирајте на Твиттер @ 4мсал4 и не заборавите да притиснете то дугме за пљескање :)

? Купи ми кафу?

? Погледајте моју претходну причу?

Како направити апликацију за вести помоћу Реацт Нативе-а.