Как построить собственные приложения для рабочего стола с JavaScript (родной Proton)

Автор оригинала: FreeCodeCamp Community Member.

Mohammed Salman.

Когда я писал эту статью, закон Atwood пришел в голову:

Первоначально опубликовано в моем блоге!

Сегодня мы посмотрим на Протон родной И сделайте простое приложение с ним.

В отличие от Электрон Приложения, приложения, построенные с Протон родной на самом деле родной (Отсюда и название), а не на основе Chromium.

Протон родной это как Реагировать родной Но для рабочего стола. Он компилируется на родной код платформы, поэтому он выглядит и выполняет как нативное приложение.

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

Окна

Установите инструменты сборки на работу:

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

Linux.

Вам понадобится эти библиотеки:

• libgtk-3-dev
• Создание необходимое

Mac

Вам ничего не нужно.

Теперь запустите следующее:

npm install -g create-proton-app

а также

create-proton-app my-app

сделать новый проект.

Откройте каталог проекта с вашим любимым редактором кода. Каталог должен выглядеть так:

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

index.js должен выглядеть так:

Как и любой реактивный или реагирующий нативный проект, мы импортируем библиотеку RACT и составляем классную компонент.

Приложение Элемент – это просто контейнер, который удерживает Окно и Меню и Окно имеет три реквизита: Название (название окна), Размер (принимает объект, который содержит ширину и высоту окна), а Менубар (Установите false, потому что мы не хотим строки меню).

Прежде чем начать кодирование, давайте установим Крипто Использование NPM :

npm i crypto

Мы будем использовать Крипто Чтобы хвост текст с алгоритмом MD5.

index.js.

import React, { Component } from "react";
import { render, Window, App, Box, Text, TextInput } from "proton-native";
import crypto from "crypto";

class Example extends Component {
  state = { text: "", md5: "" };

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

    this.setState({ md5 });
  };
  render() {
    return (
      
        
          
             this.hash(text)} />
            {this.state.md5}
          
        
      
    );
  }
}

render();

Я впервые импортировал Текст и TextInput Так что я мог бы использовать их позже. Тогда в Класс После установки текст и MD5 Пустые строки в Государство объект, я создал функцию хеш это занимает текст аргумент

В хеш Функция, мы устанавливаем состояние на текст и объявить MD5 хранить зашифрованный текст (как показано ниже)

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

и установить объект штата к обновленному MD5 Отказ

this.setState({ md5 });

оказывать Метод возвращает некоторые jsx элемент. Коробка Элемент так же, как Div в реакции или Вид в реактивном родном, который держит TextInput и Текст Отказ Это связано с тем, что элемент родительского окна не позволяет иметь более одного ребенка.

TextInput имеет Onchange опоры, которые будут называться каждый раз, когда текст меняется. Следовательно, мы устанавливаем его в функцию со стрелкой жира, которая занимает текст Аргумент и возвращает хеш Функция, которую мы объявили ранее.

Так что теперь каждый раз, когда текстовые изменения, текст хешируется и установлен на MD5 Отказ

Теперь, если мы запустим это с

npm run start

Это окно должно появиться:

И если мы введем какой-нибудь текст, он хешируется на MD5, как это:

Вы можете сказать: «Это выглядит некрасиво – давайте добавим немного стили». Ну, на момент написания этой статьи, родной Proton по-прежнему у него в младенчестве. Это очень багги, и он не поддерживает стиль (пока), но это веселый проект для игры.

Если вы хотите внести свой вклад в проект, проверьте репо Отказ

Если у вас есть какие-либо вопросы или предложения, не стесняйтесь комментировать или добраться до меня в Twitter @ 4msal4 И не забудьте ударить эту кнопку Clap:)

👇Получите мою предыдущую историю👇

Как построить новостное приложение с реактивным нарезом Отказ