導入

デスクトップのアプリを構築するのは難しいことを最初に使用すると、JavaやC +のような言語のかなりの数を知っている必要がありますし、着ることができるセットアップのかなりの数に埋葬されます.テクノロジーが進歩したので感謝して、ElectroOnjsのようなフレームワークは絵に入って、プロセスを単純化しました.
この記事では、私はTURI、どのようなHTMLとJavaScriptベースのフロントエンドのフレームワークを使用してネイティブのデスクトップアプリケーションを構築するためのツールチェーン、例えば、Vueなどを紹介します.または角度.
この記事はあなたに役立つでしょう.

は、Webやモバイルアプリケーションを構築しているとどのように反応してデスクトップアプリケーションを作成できるかを確認します.js

は、HTML、CSS、およびJavaScriptを使用してWeb上でアプリケーションを構築しており、Windows、MacOS、またはLinuxプラットフォームを対象としたアプリケーションを作成するために同じテクノロジを使用します.

あなたはすでに電子のような技術を持つクロスプラットフォームのデスクトップアプリケーションを構築しており、選択肢をチェックアウトする.

あなたは錆愛好家であり、ネイティブのクロスプラットフォームアプリケーションを構築するためにそれを適用したいと思います.

既存のWebプロジェクトからネイティブクロスプラットフォームアプリケーションを構築する方法について説明します.それを始めましょう!
注:この記事では、HTML、CSS、および反応を快適に仮定します.js

田里とはJS ?

太里の公式サイトでは

すべての主要なデスクトッププラットフォームのための小さな、燃える高速バイナリを構築するためのフレームワーク.

それは、フロントエンドが相互作用することができるAPIを持つさびをバイナリ化することを許します.

RevelとCLIレバレッジノードで構成されている

.ゆえに、JURIは、それを作成して、偉大なアプリを維持するために、純粋に多面的なアプローチを作ります.この文脈におけるポリグロットは、TURIが複数のプログラミング言語を使用することを意味します.

小さなバイナリー(すなわちファイルサイズ)を持つ非常に安全なネイティブアプリを構築するためのフレームワークの不可知論的なツールチェーンであり、それは非常に高速です(すなわち、最小限のRAM使用).

簡単に言えば、太里は、小さくて安全なネイティブデスクトップアプリケーションを作成するWeb技術を利用することができます.

電子対太里：それらの違い

電子JSはしばらくの間、そして、原子力、VSCodeとより多くのような開発者と大企業の間でさえ大量養子縁組をしていました.このセクションでは、私たちはtauriを電子JSから区別するいくつかの特徴を比較するでしょう.
このテーブルはGithubページです.
機能
太里
電子
バイナリサイズ
0.6 MB
47.7 MB
メモリ消費量
13 MB
34.1 MB
インタフェース
変化する
クロム
バックエンド
錆
ノード.JS ( ECMAXcript )
基礎エンジン
C +/C++
V 8 ( C/C++)
フロス
はい
なし
マルチスレッド
はい
なし
バイトコード配送
はい
なし
PDFレンダリング
はい
なし
複数の窓
間もなく
はい
オートアップ
間もなく
はい
クロスプラットホーム
はい
はい
カスタムアプリアイコン
はい
はい
Windowsバイナリ
はい
はい
MacOSバイナリ
はい
はい
リナックスバイナリ
はい
はい
IOSバイナリ
間もなく
なし
アンドロイド
間もなく
なし
localhostサーバ
はい
はい
localhostオプション
はい
なし
デスクトップトレイ
間もなく
はい
スプラッシュスクリーン
はい
はい
サイドカーバイナリ
はい
なし
上記の表から、太里がかなり新しいという事実にもかかわらず、他のものがパイプラインにある間、若干の驚くべき特徴とより多くがあります.

太里の利益

あなたの次のデスクトップアプリケーションで太里を使用して検討する理由は以下です.

JavaScriptフレームワークと互換性がありますので、スタックを変更する必要はありません.

設計パターンのその多様性は、簡単な構成で機能を実装することから始めることを可能にします.

は、上記のテーブルから見たように、タウリのアプリのサイズはわずか0.60 MB(600 KB)です.

も、Tauriアプリのメモリ消費量は、電子ベースのアプリの半分未満です.テーブルからは通常13 MB程度です.

電子とは異なり、5656年(安永3年)の5656年(安永3年)には、太里との関係が成り立つ.TAURIで構築されたアプリは、正式にPureOSに出荷することができます.

柔軟さとタウのフレームワークのagnostic能力は、何かを変更せずにネイティブベースのデスクトップアプリケーションにWebベースのコードベースを有効にすることができます.

行動の太里！

太里はノードを使います.JSは、ユーザーインターフェイス(UI)として、HTML、CSS、およびJavaScriptのレンダリングウィンドウを足場に足場の下にJSTは、錆でブートストラップ.
結果はMacOS(APP/DMG)、Windows(EXE/MSI)、およびLinux(DEB/APPイメージ)の共通のファイルタイプとして配布することができますモノリシックバイナリです.

どのように太里アプリを作る

テーリアプリケーションは、次の手順を使用して作成されます

最初に、GUIフレームワークのインターフェイスを作成し、HTML、CSS、JavaScriptを準備します.

太里CLIはそれを取り、あなたの設定に従ってネイティブのネイティブコード(錆ランナー)をリグします.

開発モードでは、WebViewウィンドウを作成します.ビルドモードで

、それはバンドルをリグし、最終的なアプリケーションを作成します.

そのサイトでその操作の詳細をチェックしてください.

環境設定

あなたがtauriが何であるか、そして、それがどのように働くかについてわかっている今、セットアップをしましょう.
我々は、このチュートリアルでは任意のOSのための環境設定をカバーされませんが、Windows、MacOS、およびLinusのセットアップをチェックすることもできます.
Linux用のWindowsサブシステム( WSL )を使用する場合には、Linux固有の指示を参照してください.
反応によるTauriの実施js
Turiがインストールされたので、既存のWebプロジェクトをまとめましょう.
このアプリケーションのために、我々は、私は反応と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

Dependenciesの成功したインストールの後、npm startでサーバーを起動してください、あなたのアプリはhttp://localhost:3000で出発しなければなりません.

田里の定義

あなたがNPMでローカルパッケージとしてTAURIを使用すると決めるならば、あなたはあなたのパッケージにカスタムスクリプトを定義しなければなりません.JSON :

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

tauriコマンド-太字を定義し、あなたのOSに指示すると、Tauriベースのアプリケーションを作成しようとしている.

dev -それは私たちのローカルマシン上でアプリケーションを起動することができます.

バンドル-このコマンドを実行する生産のための私達のアプリケーションを構築します.
tauri

を初期化します
アプリケーションディレクトリのルートにsrc-Tauriディレクトリを追加する必要があります.このディレクトリの中には、あなたのデスクトップアプリケーションを構成するために、ファイルとフォルダTauriによって使用されます.
このフォルダを持つために、他のTURIを初期化するには、

`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

注:あなたがこれを実行する最初の時間は、錆箱を収集し、すべてを構築するいくつかの時間がかかりますが、その後の実行では、それははるかに速く太鼓の木枠を再構築する必要があります.
だから建物の中にいくつかのチョコレートをつかむ😎
上記が完了すると、現在のOSのmoney-heistのバイナリを持つ必要があります.
貨物がその目標を構築する方法のため、最終的なアプリケーションは、次のフォルダに配置されますsrc-Tauri/target/release/money-heist .
あなたのものはsrc-tauri/target/release/bundle/[your-app]であるかもしれません.

結論

この記事では、Tauriを利用した反応でデスクトップアプリを構築することがいかにクールかを見てきました.
Lemmeはあなたが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