電子と角度を使用してデスクトップアプリケーションを構築します

クロスプラットフォームのデスクトップアプリケーションをビルド：電子と角度の完璧な組み合わせ

このチュートリアルでは、電子と角度を使用してクロスプラットフォームのデスクトップアプリケーションを構築する方法を示しています。 Electron.jsは、JavaScript、HTML、およびCSSを使用して、Windows、Linux、およびMacOS用のデスクトップアプリケーションを作成するための人気のあるプラットフォームです。 Google ChromiumやNode.jsなどの強力なプラットフォームを活用し、オペレーティングシステムと対話するための独自のAPIセットを提供します。

Angular CLIをインストールし、新しいAngularプロジェクトを作成し、開発依存関係としてNPMから最新バージョンの電子をインストールする方法を学びます。チュートリアルには、GUIウィンドウの作成とindex.htmlファイルの読み込み、main.jsファイルのメインエントリポイントとして設定、角度プロジェクトの構築後に電子アプリケーションを開始するスクリプトを追加することも含まれます。

さらに、IPC（インタープロセス通信）を使用してAngularから電子APIを呼び出す方法を学びます。これにより、異なるプロセス間の通信が可能になります。 AngularアプリケーションからBrowserWindow APIを呼び出す方法と、URLがロードされているサブモーダルウィンドウを作成し、準備ができたら表示する方法を示します。

電子の利点

Electronは、Google ChromiumやNode.jsなどの強力なプラットフォームを使用し、基礎となるオペレーティングシステムと対話するためのリッチAPIを提供します。 Webアプリケーションをカプセル化するためのネイティブコンテナを提供し、デスクトップアプリケーションのように見えるようにし、オペレーティングシステム機能（モバイルアプリケーションのCordovaに似ています）にアクセスできます。これは、JavaScriptライブラリまたはフレームワークを使用してアプリケーションを構築できることを意味します。このチュートリアルでは、Angularを使用します。

予防策

このチュートリアルは、次の前提条件を満たす必要があります

TypeScriptとAngularに精通しています。

開発マシンにnode.jsとnpmをインストールします。
• 角度cli

のインストール 最初に、Angular Projectsを作成および使用するための公式ツールであるAngular CLIをインストールします。新しい端末を開き、次のコマンドを実行します。

角CLIをグローバルにインストールします。 EACCESSエラーのためにコマンドが故障した場合、LinuxまたはMacOSのコマンドの前にSudoを追加するか、Windowsの管理者としてコマンドプロンプトを実行します。

CLIが正常にインストールされている場合は、ワーキングディレクトリに移動し、次のコマンドを使用して新しいAngularプロジェクトを作成します。

npm install -g @angular/cli

プロジェクトファイルの生成と依存関係がNPMからインストールされるのを待っています。次に、プロジェクトのルートディレクトリに移動し、次のコマンドを実行して、開発依存関係としてNPMから電子の最新バージョンをインストールします。

この記述の時点で、このコマンドは電子v4.1.4をインストールします。

cd ~
ng new electron-angular-demo

main.jsファイルを作成

npm install --save-dev electron@latest

次に、main.jsファイルを作成し、次のコードを追加します。

npm install -g @angular/cli

このコードは、GUIウィンドウを作成し、index.htmlファイルをロードするだけです（Angularアプリケーションが構築された後、DISTフォルダーで使用できるはずです）。このサンプルコードは、公式の入門リポジトリから採用されています。

Configuration Package.JSON 次に、プロジェクトのpackage.jsonファイルを開き、メインキーを追加してmain.jsファイルをメインエントリポイントとして設定します。

スタートアップスクリプトを追加

cd ~
ng new electron-angular-demo

次に、Angularプロジェクトを構築した後、電子アプリケーションを簡単に開始するためにスクリプトを追加する必要があります。

start：vase-href ./ && commandを実行するStart：Electron Scriptを追加しました

ngビルド-base-href ./

コマンドの一部は、角度アプリケーションをビルドし、ベースhrefを./に設定します。

npm install --save-dev electron@latest

コマンドのセクションは、現在のディレクトリから電子アプリケーションを開始します。

• さて、端末で、次のコマンドを実行します。
電子GUIウィンドウを開きますが、空白になります。コンソールには、「ローカルリソースのロード：/electron-angular-demo/dist/index.html」エラーが表示されます。

電子は、distフォルダーからまったく存在しないため、ファイルをロードできません。プロジェクトのフォルダーを見ると、Angular CLIがDISTフォルダーではなく、DIST/電子角DEMOフォルダーにアプリケーションを構築することがわかります。

const {app, BrowserWindow} = require('electron')
const url = require("url");
const path = require("path");

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );
  // 打开开发者工具
  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

main.jsファイルでは、サブフォルダーなしでdistフォルダー内のindex.htmlファイルを見つけるように電子に指示します：

は、電子を実行する現在のフォルダーを指します。

path.join（）メソッドを使用して、現在のフォルダーのパスを/dist/index.htmlパスに接続します。

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  // [...]
}

/dist/electron-angular-demo/index.htmlへのパスの第2部を変更するか、さらに良いことに、サブフォルダーを使用せずに角度構成をdistフォルダーの出力ファイルに変更することができます。 __dirname

Angular.jsonファイルを開き、プロジェクトを見つけて→Architect→Build→Options→OutputPathキーを見つけて、その値をDist/Electron-Angular-DemoからDIST：

に変更します

端末に戻り、次のコマンドをもう一度実行します。

スクリプトは、ngビルドコマンドを呼び出してdistフォルダーに角度アプリケーションを構築し、電子ウィンドウを起動して角度アプリケーションをロードして電子を呼び出します。

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:electron": "ng build --base-href ./ && electron ."
  },
  // [...]
}

これは、Angularを実行しているデスクトップアプリケーションのスクリーンショットです：

npm run start:electron

（以下は元のテキストと一致していますが、段落とタイトルは読みやすくなりやすくするように調整されています。）

angular

から電子APIを呼び出します

次に、Angularから電子APIを呼び出す方法を見てみましょう。

電子アプリケーションは、node.jsを実行しているメインプロセスを使用し、クロムブラウザーを実行しているレンダラープロセスを使用します。 Angularアプリケーションから直接すべての電子APIにアクセスすることはできません。

IPCまたはインタープロセス通信を使用する必要があります。これは、異なるプロセス間の通信を可能にするためにオペレーティングシステムによって提供されるメカニズムです。

すべての電子APIにメインプロセスからアクセスする必要はありません。一部のAPIはレンダラープロセスからアクセスでき、一部のAPIはメインプロセスとレンダラープロセスからアクセスできます。

browserwindow（ブラウザウィンドウの作成と制御に使用）は、メインプロセスでのみ使用できます。 desktopcapturer API（navigator.mediadevices.getusermedia APIを使用してデスクトップからオーディオとビデオをキャプチャするため）は、レンダラープロセスでのみ利用できます。一方、クリップボードAPI（システムクリップボードでコピー操作と貼り付け操作を実行するため）は、メインプロセスとレンダラープロセスの両方で使用できます。

公式ドキュメントからAPIの完全なリストを表示できます。

Angularアプリケーション（メインプロセスでのみ利用可能）からBrowserWindow APIを呼び出す例を見てみましょう。

main.jsファイルを開き、ipcmain：

をインポートします

npm install -g @angular/cli

次に、openModal（）関数を定義します：

cd ~
ng new electron-angular-demo

このメソッドは、

https://www.php.cn/link/aeda4e5a3a222f1e1b0cfe7a8191fb21aのサブモーダルウィンドウを作成します。 次に、レンダラープロセスから送信されたOpenModalメッセージを聞いて、メッセージを受信したらOpenModal（）関数を呼び出します。

さて、src/app/app.component.tsファイルを開き、次のインポートを追加します。

次に、IPC変数を定義し、呼び出し要求（ 'Electron'）を呼び出します。IPCRENDERは、AngularコンポーネントにIPCrendererをインポートします。

npm install --save-dev electron@latest

require（）メソッドは、実行時に電子によってレンダラープロセスに注入されるため、電子でWebアプリケーションを実行するときにのみ使用できます。

const {app, BrowserWindow} = require('electron')
const url = require("url");
const path = require("path");

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );
  // 打开开发者工具
  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

最後に、次のopenModal（）メソッドを追加します：

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  // [...]
}

ipcrendererのsend（）メソッドを使用して、メインプロセスにopenmodalメッセージを送信します。

src/app/app.component.htmlファイルを開き、ボタンを追加し、openmodal（）メソッドにバインドします：

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:electron": "ng build --base-href ./ && electron ."
  },
  // [...]
}

次のコマンドでデスクトップアプリケーションを実行してください。

これは、ボタンを備えたメインウィンドウのスクリーンショットです：

npm run start:electron

[モーダルを開く]ボタンをクリックすると、SitePoint Webサイトを備えたモーダルウィンドウが開きます。

mainWindow.loadURL(
  url.format({
    pathname: path.join(__dirname, `/dist/index.html`),
    protocol: "file:",
    slashes: true
  })
);

このGitHubリポジトリからこのデモのソースコードを見つけることができます。

結論

このチュートリアルでは、Angularを使用してElectronを使用してデスクトップアプリケーションとして構築されたWebアプリケーションを実行する方法を検討しました。 Web開発キットでデスクトップアプリケーションの構築を開始することがどれほど簡単かを学んだことを願っています！

（次のコンテンツは元のFAQの部分であり、中国の表現習慣に沿ってそれをより順調にするためにわずかに調整されています。） FAQ（FAQ）

電子および角度のアプリケーションをデバッグする方法は？

デバッグは、開発プロセスの重要な部分です。電子および角度のアプリケーションには、Chrome開発者ツールを使用できます。開発者ツールを開くには、ショートカットキーCTRL Shift Iを使用するか、main.jsファイルにコードの行を追加することができます。これにより、アプリケーションが開始されると開発者ツールが開きます。その後、Webアプリケーションと同じように、要素を確認したり、コンソールログを表示したり、デバッグコードをデバッグしたりできます。

分布のために電子および角度のアプリケーションをパッケージ化する方法は？

mainWindow.webContents.openDevTools()電子および角度のアプリケーションは、電子パッカーまたは電子ビルダーを使用して分布するためにパッケージ化できます。これらのツールは、さまざまなオペレーティングシステムの実行可能ファイルにアプリケーションをパッケージ化するのに役立ちます。名前、説明、バージョン、およびアプリケーションの詳細をカスタマイズできます。これらのパッケージを開発者としてインストールし、package.jsonファイルにスクリプトを追加してパッケージコマンドを実行する必要があります。

電子に角度材料を使用できますか？

はい。 Angular Materialは、Angularの材料設計を実装するUIコンポーネントライブラリです。ユーザーフレンドリーで応答性の高いアプリケーションを作成するために使用できるさまざまな事前に構築されたコンポーネントを提供しています。 Angular材料を使用するには、NPMまたはYARNを使用してインストールし、アプリケーションに必要なモジュールをインポートする必要があります。

電子と角度のファイルシステム操作を処理する方法は？

Electronは、FS（ファイルシステム）と呼ばれる組み込みモジュールを提供し、ファイルの読み取りや書き込みなどのファイルシステム操作を処理するために使用できます。電子アプリケーションの主なプロセスで使用できます。ただし、レンダラープロセス（Angular）で使用する場合は、メインプロセスとレンダラープロセスの間で通信するためにElectronのIPC（プロセス間通信）を使用する必要があります。

電子アプリケーションおよび角度アプリケーションでnode.jsモジュールを使用する方法は？

電子を使用すると、アプリケーションでnode.jsモジュールを使用できます。メインプロセスで直接使用できます。ただし、レンダラープロセス（Angular）でそれらを使用する場合は、電子構成でノード統合を有効にする必要があります。 NodeIntegrationを有効にすると、アプリケーションがリモートコンテンツをロードするとセキュリティリスクが発生するため、コンテキストソル化やプリロードスクリプトなどのより安全なオプションを使用することをお勧めします。

電子アプリケーションと角度アプリケーションを更新するにはどうすればよいですか？

電子および角度アプリケーションは、電子のAutoupDaterモジュールを使用して更新できます。このモジュールを使用すると、バックグラウンドで更新を自動的にダウンロードしてインストールできます。また、ユーザーがアップデートを手動でチェックするためのユーザーインターフェイスを提供することもできます。

角CLIを電子で使用できますか？

はい。 Angular CLIは、Angularのコマンドラインインターフェイスであり、Angularアプリケーションの作成、開発、維持に役立ちます。これを使用して、コンポーネント、サービス、モジュールなどを生成できます。また、電子で実行する前に、角度アプリケーションを構築するために使用することもできます。

電子アプリケーションと角度アプリケーションのセキュリティを保護する方法は？

電子アプリケーションと角度アプリケーションのセキュリティを保護することは、ユーザーデータを保護するために不可欠です。電子は、コンテキストの有効化、ノード統合の無効化、サンドボックスモードを使用するなど、いくつかのセキュリティの提案を提供します。また、ユーザー入力のクリーンアップ、HTTPSプロトコルなどのAngular Security Best Practiceなどに従う必要があります。

電子アプリケーションと角度アプリケーションをテストする方法は？

ジャスミンやカルマ（角度）やスペクトロン（電子用）などのテストフレームワークを使用して、電子および角度のアプリケーションをテストできます。これらのフレームワークを使用すると、ユニットテストとエンドツーエンドのテストを作成して、アプリケーションが期待どおりに機能するようにします。

電子は他のフレームワークまたはライブラリで使用できますか？

はい。 Electronはフレームワークに関するものではありません。つまり、JavaScriptフレームワークまたはライブラリで使用できます。 Angularに加えて、React、Vue.js、Svelteなどで使用することもできます。必要に応じて、ネイティブJavaScriptで使用することもできます。

以上が電子と角度を使用してデスクトップアプリケーションを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。