JavaScript로 기본 데스크탑 앱을 빌드하는 방법

Atwood’s Law: any application that can be written in JavaScript, will eventually be written in JavaScript. -Jeff Atwood

양성자 네이티브 프로젝트 - index.js

오늘 우리는 Proton Native을 살펴보고 그것으로 간단한 해싱 앱을 만들 것입니다.

Electron 앱과 달리 Proton Native로 구축된 앱은 실제로 네이티브(따라서 이름)이며 크롬 기반 웹이 아닙니다.

Proton Native는 React Native와 비슷하지만 데스크톱의 경우 네이티브 플랫폼 코드로 컴파일되어 네이티브 앱처럼 보이고 작동합니다.

윈도우

다음을 실행하여 빌드 도구를 설치하십시오.npm install --global --production windows-build-tools

리눅스

다음 라이브러리가 필요합니다.

libgtk-3-dev

빌드 필수

맥

당신은 아무것도 필요하지 않습니다.

이제 npm i -g create-proton-app 및 create-proton-app my-app를 실행하여 새 프로젝트를 만듭니다.

즐겨 사용하는 코드 편집기로 프로젝트 디렉토리를 엽니다. 디렉토리는 다음과 같아야 합니다.

└───node\_modules
├───.babelrc
├───index.js
├───package.json
└───package-lock.json

index.js는 다음과 같아야 합니다.

보시다시피 React/React Native File처럼 보입니다.

React 또는 React Native 프로젝트와 마찬가지로 반응 라이브러리를 가져오고 클래스 구성 요소를 만듭니다.
App 요소는 창과 메뉴를 포함하는 컨테이너일 뿐이며 Window에는 세 개의 소품이 있습니다. title (창 제목), size (창의 너비와 높이를 포함하는 객체를 취함), menuBar (메뉴 모음을 원하지 않기 때문에 false로 설정).

코딩을 시작하기 전에 crypto를 사용하여 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 (
    <App>
        <Window
        title="Proton Native Rocks!"
        size=
        menuBar={false}
        >
        <Box>
            <TextInput onChange={text => this.hash(text)} />
            <Text>{this.state.md5}</Text>
        </Box>
        </Window>
    </App>
    );
}
}

render(<Example />);

나중에 사용할 수 있도록 Text와 TextInput를 먼저 가져온 다음 class와 text를 상태 개체의 빈 문자열로 설정한 후 md5에서 함수hash를 만들었습니다. 텍스트 인수를 취합니다.

해시 함수에서 state를 text로 설정하고 md5를 선언하여 해시된 텍스트를 저장합니다.

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

상태 개체를 업데이트된 md5로 설정합니다.

this.setState({ md5 });

render 메서드는 일부 jsx 요소를 반환합니다. Box 요소는 React의 div 또는 React Native의 View와 같습니다. 한 아이보다 (이 도자기는 무엇입니까 ... 죄송합니다).
TextInput에는 텍스트가 변경될 때마다 호출되는 Text 소품이 있으므로 TextInput 인수를 사용하여 이전에 생성한 onChange 함수를 반환하는 뚱뚱한 화살표 함수로 설정했습니다.

이제 텍스트가 변경될 때마다 text가 hash를 사용하여 해시됩니다.

이제 우리가 그것을 실행하면
text
이 창이 뜨셔야 합니다



텍스트를 입력하면 md5로 해시됩니다.



"못생겼는데 스타일을 추가해 봅시다"라고 말할 수도 있습니다. 이 기사를 쓰는 시점에서 Proton Native는 아직 초기 단계이고 버그가 많으며 스타일을 지원하지 않습니다(아직). 하지만 재미있는 프로젝트입니다. 플레이.

프로젝트에 기여하고 싶다면 repo을 확인하세요.

질문이나 제안 사항이 있으면 언제든지 댓글을 달거나 저에게 연락하고 박수 버튼을 누르는 것을 잊지 마세요 :)

이전 기사를 확인하세요.