Як створювати власні настільні програми за допомогою JavaScript (Proton Native)

Коли я писав цю статтю, мені прийшов в голову Закон Етвуда:

Будь-яка програма, яка може бути написана на JavaScript, з часом буде написана на JavaScript. - Джефф Етвуд

Спочатку розміщено в моєму блозі!

Сьогодні ми збираємось поглянути на Proton Native і створити з ним просту програму.

На відміну від програм Electron, програми, побудовані за допомогою Proton Native , насправді є власними (звідси і назва), а не на основі хрому.

Proton Native - це як React Native, але для настільних ПК. Він компілюється у власному коді платформи, тому виглядає та працює як власний додаток.

Тож давайте почнемо.

Windows

Встановіть інструменти побудови, запустивши:

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

Linux

Вам знадобляться такі бібліотеки:

  • libgtk-3-dev
  • суттєво побудувати

Мак

Вам нічого не потрібно.

Тепер запустіть наступне:

npm install -g create-proton-app

і

create-proton-app my-app

зробити новий проект.

Відкрийте каталог проектів за допомогою улюбленого редактора коду. Каталог повинен виглядати так:

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

index.js має виглядати так:

Як і будь-який React або React Native Project, ми імпортуємо бібліотеку реакцій і створюємо компонент класу.

AppЕлемент просто контейнер , який тримає Window і Menu, і Windowмає три реквізиту: title(заголовок вікна), size(приймає об'єкт, що містить ширину і висоту вікна), і menuBar(значення БРЕХНЯ , бо ми не хочемо рядок меню).

Перш ніж розпочати кодування, давайте встановимо cryptoза допомогою npm:

npm i crypto

Ми будемо використовувати cryptoхеш тексту за допомогою алгоритму MD5.

index.js

Спочатку я імпортував 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в React, або Viewв React Native, який тримає TextInputі Text. Це тому, що батьківський елемент вікна не дозволяє мати більше одного дочірнього елемента.

TextInputмає onChangeпроп, який буде викликатися щоразу, коли текст змінюється. Тому ми встановлюємо для нього функцію жирної стрілки, яка приймає textаргумент і повертає hashфункцію, про яку ми заявили раніше.

Тож тепер кожен раз, коли текст змінюється, textхешується та встановлюється на md5.

Тепер, якщо ми запускаємо це за допомогою

npm run start

повинно спливати це вікно:

І якщо ми вводимо якийсь текст, він отримує хеш до md5 таким чином:

Ви можете сказати: "Це виглядає потворно - давайте додамо трохи стилю". Що ж, на момент написання цієї статті Proton Native ще перебуває у зародковому стані. Він дуже глючить і не підтримує стиль (поки), але це цікавий проект, з яким можна пограти.

Якщо ви хочете взяти участь у проекті, перегляньте репо.

Якщо у вас є які-небудь запитання чи пропозиції, сміливо коментуйте або зв'яжіться зі мною на Twitter @ 4msal4 і не забудьте натиснути цю кнопку хлопання :)

? Купи мені каву?

? Перевірте мою попередню історію?

Як створити додаток для новин за допомогою React Native.