소개

데스크톱 응용 프로그램을 구축하는 것은 과거에 매우 어려웠다. 우선, 자바나 C++ 같은 언어를 많이 알고 많은 설정에 적응해야 한다.고맙게도 기술의 발전에 따라 ElectronJS와 같은 프레임워크가 등장하여 과정을 간소화시켰다.
본고에서 Tauri를 소개합니다. 이것은 HTML과 JavaScript를 기반으로 하는 모든 전단 프레임워크(예를 들어 React, Vue)를 사용하여 본 컴퓨터 데스크톱 응용 프로그램을 구축하는 도구 체인입니다.js 또는 Angular
이 문서는 다음과 같은 경우에 유용합니다.

웹이나 모바일 응용 프로그램을 구축하고 있습니다. React를 사용하여 데스크톱 응용 프로그램을 만드는 방법을 보고 싶습니다.Js.

HTML, CSS, JavaScript를 사용하여 웹에서 응용 프로그램을 구축하고 있으며, 같은 기술로 Windows, macOS 또는 Linux 플랫폼에 대한 응용 프로그램을 만들고 싶습니다.

Electron 같은 기술로 크로스플랫폼 데스크톱 응용 프로그램을 구축하고 있으며 다른 응용 프로그램을 보려고 합니다.

당신은 녹 애호가이므로 이를 본 기기의 크로스플랫폼 응용 프로그램 구축에 응용하고자 합니다.

우리는 기존의 웹 프로젝트에서 어떻게 본 컴퓨터의 크로스플랫폼 응용 프로그램을 구축하는지 연구할 것이다.시작합시다!
참고: 본고는 HTML, CSS 및 React에 익숙하다고 가정합니다.Js.

황소자리라니요?js？

황소자리 공식 사이트는 이를 다음과 같이 묘사한다.

모든 주요 데스크톱 플랫폼에 작고 빠른 바이너리 파일을 구축하는 프레임워크입니다.

프런트엔드에서 상호 작용할 수 있는 API의 녹슨 바이너리 파일을 사용할 수 있습니다.

Rust 구축, CLI 는 노드를 사용합니다.따라서 황소자리는 위대한 응용 프로그램을 만들고 유지하는 진정한 다국어 방법이다.이런 상황에서 Polyglot은 Tauri가 Rust, JavaScript, TypeScript 등 다양한 프로그래밍 언어를 사용하는 것을 의미한다.

작은 바이너리 파일(파일 크기)과 매우 빠른(즉 RAM 사용량이 가장 적은) 고도로 안전한 네이티브 응용 프로그램을 구축하는 데 사용되는 프레임워크와 무관한 도구 체인입니다.

간단하게 말하자면, Tauri는 네트워크 기술을 이용하여 더욱 작고 안전한 원본 데스크톱 응용 프로그램을 만들 수 있습니다.

전자와 황소자리: 그것들의 차이

Electron Js는 개발자와 위대한 회사(예를 들어 Atom, VScode 등)에서 이미 한동안 존재해 왔다.이 절에서, 우리는 황소자리를 전자 Js와 다르게 하는 특징을 비교할 것이다.
이 테이블은 Github 페이지에서 가져옵니다.
특징
황소자리
전자
바이너리 크기의 MacOS
0.6 MB
47.7 MB
메모리 소모 MacOS
13 MB
34.1 MB
인터페이스 서비스 공급자
변화
크롬
백엔드 바인딩
녹슬다
노드js(ECMAScript)
기본 엔진
C/C++
V8(C/C++)
치실
맞다
아니오
다중 스레드
맞다
아니오
바이트 코드 전달
맞다
아니오
PDF 표시 가능
맞다
아니오
여러 창
금세
맞다
자동 업데이트 프로그램
금세
맞다
플랫폼 간
맞다
맞다
응용 프로그램 아이콘 사용자 정의
맞다
맞다
Windows 바이너리 파일
맞다
맞다
MacOS 바이너리
맞다
맞다
Linux 바이너리 파일
맞다
맞다
iOS 바이너리
금세
아니오
Android 2진
금세
아니오
로컬 호스트 서버
맞다
맞다
로컬 호스트 옵션 없음
맞다
아니오
데스크톱 트레이
금세
맞다
플라잉 스크린
맞다
맞다
사이드카 바이너리 파일
맞다
아니오
우리는 위의 표에서 보았는데, 비록 황소자리는 매우 새로운 사실이지만, 그것은 놀라운 기능을 가지고 있으며, 심지어는 더 많고, 다른 사람들은 파이프 안에 있다.

Tauri의 장점

다음은 다음 데스크톱 프로그램에서 Tauri를 사용할 것을 고려하는 이유입니다.

모든 JavaScript 프레임워크와 호환되므로 스택을 변경할 필요가 없습니다.

다양한 디자인 모델로 우리는 간단한 설정으로 기능을 실현할 수 있다.

위의 표에서 보듯이 황소자리 응용 프로그램의 크기는 0.60MB(600KB)에 불과하다.

그 밖에 황소자리 응용 프로그램의 메모리 소모는 전자 기반 응용 프로그램의 절반도 안 된다.표에서 알 수 있듯이 그것은 보통 약 13MB이다.

Electron과 달리 황소자리는 재인증을 할 수 있다.Tauri로 구축된 응용 프로그램은 PureOS에 정식으로 출시될 수 있습니다.

Tauri의 유연성과 프레임워크와 무관한 능력은 웹 기반의 코드 라이브러리를 본 데스크톱 응용 프로그램으로 바꿀 수 있고 변경할 필요가 없다.

황소자리가 움직인다!

황소자리는 Node를 사용합니다.js는 사용자 인터페이스(UI)로 HTML, CSS, JavaScript 구현 창을 구축했는데 주로 Rust가 안내합니다.
결과는 단일 바이너리 파일로 macOS(app/dmg), Windows(exe/MSI), Linux(deb/app-image)의 흔한 파일 형식으로 나누어질 수 있다.

황소자리 응용 프로그램은 어떻게 만들어졌는가

다음 절차를 통해 Tauri 응용 프로그램을 만듭니다.

먼저 GUI 프레임워크에 인터페이스를 만들고 HTML, CSS 및 JavaScript를 준비합니다.

Tauri CLI가 이를 받아들이고 구성에 따라 기본 기본 코드(Rust runner)를 어셈블합니다.

개발 모드에서 WebView 창을 만들고 디버깅과 열 모듈을 다시 불러옵니다.

구축 모드에서는 설정에 따라 번들을 어셈블하고 최종 응용 프로그램 (본체 설치 프로그램) 을 만듭니다.

그 사이트에서 더 많은 조작을 볼 수 있다.

환경 설정

지금 당신은 황소자리가 무엇인지, 그것이 어떻게 작동하는지, 우리가 설정한 것을 알고 있습니다.
이 강좌에서는 운영 체제의 환경 설정을 설명하지 않지만 Windows, macOS, Linus 설정을 확인할 수 있습니다.
Windows Linux 서브시스템(WSL)을 사용하는 사용자의 경우 해당 Linux 관련 지침을 참조하십시오.
React로 Tauri를 구현합니다.JS 회사
현재 우리는 이미 Tauri를 설치해서 기존의 웹 프로젝트를 묶을 수 있습니다.
이 응용 프로그램에 대해, 우리는 내가 React와 Typescript로 구축한 금전 절도 사건 선택기를 사용할 것이다.내가 여기 어떻게 만들었는지 봐.
https://codesandbox.io/s/money-heist-episode-picker-react-and-typescript-web-app-px1qe
계속해서 저장소를 갈라놓으면 셸이 됩니다.분리된 후 다음 명령을 실행하여 분리를 복제해야 합니다.

git clone https://github.com/[yourUserName]/React-Desktop-App.git

Tauri를 로컬과 전역 의존 항목으로 설치할 수 있지만, 이 강좌에서는 로컬에 설치할 것입니다.
항목을 복제한 후 다음 작업을 실행하여 종속 항목을 설치합니다.

#Using npm
npm install

#using yarn
yarn

의존 항목을 성공적으로 설치한 후 npm start 를 사용하여 서버를 시작하고 응용 프로그램은 http://localhost:3000 에서 시작해야 합니다.

황소자리 정의

만약 Tauri를 npm가 있는 로컬 패키지로 사용하기로 결정한다면, 패키지에 사용자 정의 스크립트를 정의해야 합니다.json:

    {
      // Add Tauri to the script object
      "scripts": {
        "tauri": "tauri",
        "dev": "npm run tauri dev",
        "bundle": "tauri build",
    }

Tauri 명령 - Tauri를 정의하고 운영체제에 Tauri 기반 응용 프로그램을 만들어야 한다고 알려 줍니다.

dev - 로컬 시스템에서 응용 프로그램을 시작할 수 있습니다.

bundle - 이 명령을 실행하면 생산에 사용할 응용 프로그램을 구축합니다.
초기화 Tauri

응용 프로그램 디렉터리의 루트에 src-Tauri 디렉터리를 추가해야 합니다.이 디렉터리에는 데스크톱 프로그램을 설정하는 데 사용되는 파일과 폴더가 있습니다.
다른 폴더에 Tauri를 초기화하여 실행하기;

`npm run Tauri init`

초기화할 때 몇 가지 질문을 드리겠습니다. 프로젝트 범위에 따라 대답해 주십시오.
내 모습이야

초기화가 완료되면 src-tauri 디렉터리가 만들어집니다. 내용을 확인해 보겠습니다.

└── src-tauri
    ├── .gitignore
    ├── Cargo.toml
    ├── rustfmt.toml
    ├── tauri.conf.json
    ├── icons
    │   ├── 128x128.png
    │   ├── [email protected]
    │   ├── 32x32.png
    │   ├── icon.icns
    │   ├── icon.ico
    │   └── icon.png
    └── src
        ├── build.rs
        ├── cmd.rs
        └── main.rs

Cargo.toml 내부src-tauri/Cargo.toml는 package.json 녹줄과 유사하다.
그것은 우리 응용 프로그램의 설정을 포함한다.이 문서의 내용은 본 강좌의 범위를 넘어섰다.
## 어플리케이션 번들
현재 플랫폼에 대해 번들 Money-Heist 하려면 다음 명령을 실행하십시오.

#builds our react app
npm run build

#builds the Tauri crates
npm run bundle

주의: 이 프로그램을 처음 실행할 때 녹슨 판자 상자를 수집하고 모든 내용을 구축하는 데 시간이 좀 걸리지만 후속 실행 중에는 Tauri 판자 상자를 재건하기만 하면 훨씬 빠릅니다.
그러니까 아직 짓고 있을 때 초콜릿을 가져가세요.😎
위의 작업을 완료하면 현재 운영 체제에 바이너리 파일money-heist이 있어야 합니다.
Cargo가 목표를 구축하는 방식으로 인해 최종 응용 프로그램은 다음 폴더에 배치됩니다.src-Tauri/target/release/money-heist .
이 가능하다, ~할 수 있다,...

결론

이 글에서 우리는 이미 Tauri로 데스크톱 응용 프로그램을 구축하는 것이 얼마나 멋있는지 보았다. 나는 네가 평론 부분에서 어떤 생각을 가지고 있는지 보고 싶다.
황소자리에 대한 당신의 견해를 알려주세요.
만약 네가 이 문장을 좋아한다면, 우리를 계속 하게 해라

리소스

Why You as a Developer Should be Using a CMS
Headless Commerce Explained: Definitions, Use Cases, and Roadblocks | Agility CMS
APIs vs. SDKs: What's the Difference? | Agility CMS
TOP Static Site Generators to Watch in 2021
Difference between Headless CMS and static site generator
What is Netlify and Why Should You Care as an Editor? | Agility CMS
What is a Headless CMS? | Agility CMS
Benefits of Headless CMS vs a Traditional CMS | Agility CMS
Content Architecture: The Key to Organizing and Managing Your Content and Team
WordPress And Its Alternatives: Headless CMS | Agility CMS
Open Source CMS vs. Proprietary CMS: Can You Have the Best of Both? | Agility CMS
Choosing a React CMS: What to Look For? | Agility CMS
Take control of your Content Architecture: Content Modelling
DXP vs Headless CMS: Modern DXP Architecture
Jamstack Development: 10 JAMstack Pioneers You Need To Know About in 2021