ASP.NET Core [웨비나] Electron.NET으로 크로스 플랫폼 데스크톱 응용 프로그램 빌드하기
페이지 정보
작성자 GrapeCity
작성일 2020-11-10 16:03 조회 2,256회
댓글 0건
본문
관련링크
이 문서에서는 Electron.NET으로 응용 프로그램을 개발 및 배포하는 과정을 안내합니다.
여기서 다루는 주제는 다음과 같습니다.
Electron.NET을 사용하도록 기본 ASP. NET Core 응용 프로그램 수정
Visual Studio Code를 사용하여 ASP. NET Razor 페이지 디버그
메시지 상자, 시스템 파일 대화 상자, 사용자 정의 응용 프로그램 메뉴 등의 기본 UI 요소 구현
타사 MVC 컨트롤 추가
기타 플랫폼용 배포 미디어 빌드
최근에 온라인 이벤트에서 이 주제에 관한 프레젠테이션을 선보였습니다. 다음은 블로그 형식의 제 프레젠테이션입니다. 문서 끝에 소스 코드 링크가 있습니다.
Electron이란?
은 Chromium 렌더링 엔진 및 Node.js 런타임 등의 웹 기술을 사용하는 데스크톱 응용 프로그램 개발을 지원하는 프레임워크입니다. 지원되는 운영 체제는 Windows, macOS, Linux 등입니다. 사용자가 다음 응용 프로그램 중 하나 이상을 사용해 봤을 수 있습니다. 모두 Electron을 사용하여 개발된 것입니다.
Visual Studio Code
Slack
Discord
Skype
GitHub Desktop
Twitch
Electron은 HTML, CSS, JavaScript 등 익숙한 표준을 활용합니다. 그렇다면 C#로 작업하는 데 익숙한 .NET 개발자는 어떨까요? 그래서 도입된 것이 Electron.NET입니다.
Electron.NET이란?
은 ASP. NET Core 응용 프로그램으로 “일반” Electron 응용 프로그램을 둘러싸는 래퍼입니다. 이는 .NET 개발자가 C#을 사용하여 기본 Electron API를 호출하도록 하는 오픈 소스 프로젝트입니다. Electron.NET은 두 가지 컴포넌트로 이루어져 있습니다.
Electron API를 ASP. NET Core 프로젝트에 추가하는 NuGet 패키지
Windows, macOS 및 Linux 플랫폼용 응용 프로그램을 빌드 및 실행하는 .NET Core 명령줄 확장.
Electron.NET을 사용하려면 다음 소프트웨어를 미리 설치해야 합니다.
저는 Electron.NET을 사용하여 .NET Standard용 DataEngine 라이브러리에 의해 관리되는 데이터 분석 작업 영역의 생성 및 시각화를 지원하는 교차 플랫폼 도구인 를 개발했습니다. 처음에는 이것을 .NET Core 전역 도구에 내리는 셸 명령을 통해 라이브러리와 통신하는 표준 Electron 응용 프로그램으로 만들 계획이었습니다. 하지만 Electron.NET을 발견한 후 셸 명령을 없애고 라이브러리를 직접 호출할 수 있었습니다.
ASP. NET Core 웹 응용 프로그램 만들기
이 연습에서는 Mac에서 실행 중인 Visual Studio Code를 사용합니다. 먼저 터미널 창을 열고 다음 명령을 실행하여 Processes라는 새 프로젝트를 만듭니다.
mkdir Processes cd Processes dotnet new webapp code .
Visual Studio Code에서 메시지가 표시되면 예라고 하여 프로젝트의 필수 자산을 로드합니다. F5를 눌러 응용 프로그램을 빌드 및 실행하고 localhost:5001에 호스팅된 ASP. NET Core 시작 페이지에서 브라우저를 엽니다. 페이지를 닫고 VS Code로 돌아간 후 디버그를 중지합니다.
Electron 활용!
이제 표준 ASP. NET Core 프로젝트를 Electron 응용 프로그램으로 전환해 보겠습니다. 이 단계에는 NuGet 패키지를 프로젝트 파일에 추가, 몇 가지 초기화 코드 삽입, 빌드 수행을 위한 명령줄 도구 설치 등이 포함됩니다. 먼저 Processes.csproj 파일을 열고 에 호스팅된 Electron.NET API용 패키지 참조를 삽입합니다.
<ItemGroup> <PackageReference Include="ElectronNET.API" Version="9.31.2" /> </ItemGroup>
파일을 저장한 후, VS Code에서 메시지가 표시되면 패키지를 복원합니다. 이 작업을 수행하면 Intellisense에 즉시 액세스하여 코드를 이어서 수정할 수 있습니다.
그다음으로 Program.cs를 수정하고 새로 추가된 패키지에 대한 문을 사용하여 다음을 삽입합니다.
using ElectronNET.API;
정적 메서드 CreateHostBuilder를 찾아 UseStartup을 호출하기 전에 다음과 같은 2개 행을 삽입합니다.
webBuilder.UseElectron(args);
webBuilder.UseEnvironment("Development"); 첫 번째 행은 필수입니다. 두 번째 행은 세부 오류 메시지를 표시할 수 있으므로 개발 과정에서 편리합니다.
Startup.cs를 편집한 후 문을 사용하여 다음을 삽입합니다.
using ElectronNET.API; using ElectronNET.API.Entities; using System.Runtime.InteropServices;
Configure 메서드를 찾아 본문 끝에 다음 행을 추가합니다.
if (HybridSupport.IsElectronActive)
{
CreateWindow();
} 마지막으로 Startup 클래스에 다음 메서드를 추가하여 기본 Electron 창을 만듭니다.
private async void CreateWindow()
{
var window = await Electron.WindowManager.CreateWindowAsync();
window.OnClosed += () => {
Electron.App.Quit();
};
}응용 프로그램이 단일 창으로 이루어져 있으므로, 사용자가 창을 닫으면(기본 메뉴에서 종료 또는 나가기를 선택하는 대신) 응용 프로그램이 종료되도록 OnClosed 이벤트를 처리합니다.
명령줄 도구 설치
이전에 프로젝트 파일에서 참조했던 런타임 패키지 외에도 Electron.NET은 빌드 및 배포 작업을 수행하기 위한 명령줄 도구를 제공합니다. VS Code에서 새 터미널 창 및 유형을 만듭니다.
dotnet tool install ElectronNET.CLI -g
이 일회성 단계는 electronize라는 명령을 구현하는 .NET Core 전역 도구를 설치합니다. 시스템에 설치된 도구/명령 목록을 보려면 다음을 입력합니다.
dotnet tool list -g
Electronized 응용 프로그램 실행
명령줄 도구를 설치한 후 VS Code 터미널 창에서 다음 행을 입력합니다.
electronize init electronize start
첫 번째 행은 electron.manifest.json이라는 매니페스트 파일을 만들고 이를 프로젝트에 추가하는 일회성 단계입니다. 두 번째 행은 Electron 응용 프로그램을 실행하는 데 사용됩니다(F5를 사용하면 ASP. NET Core 응용 프로그램이 브라우저에서 열리므로 사용하지 말 것). 이제 브라우저가 아닌 응용 프로그램 창에 콘텐츠가 표시됩니다.
기본 Electron 응용 프로그램 메뉴도 살펴봅니다. Mac에서는 이 메뉴가 창의 일부가 아니고 화면 상단에 고정되어 있습니다.
이 문서를 작성하는 시점에는 프로젝트를 생성했을 때 설치한 부트스트랩 모듈에 스크립트 오류가 있습니다.
오류를 확인하려면 보기 메뉴를 열고 토글 개발자 도구를 클릭합니다.
Uncaught TypeError: Cannot read property 'fn' of undefined at util.js:55 at bootstrap.bundle.min.js:6 at bootstrap.bundle.min.js:6
다행히 쉬운 해결 방법이 있습니다. 먼저 Electron 메뉴를 열고 Electron 종료를 클릭하여 개발자 도구와 응용 프로그램 창을 닫습니다. VS Code에서 Pages/Shared/_Layout.cshtml을 열고 부트스트랩 스크립트 태그 앞에 다음 행을 삽입합니다.
<script>window.$ = window.jquery = module.exports;</script>
변경 내용을 저장한 다음 터미널 창에 electronize start를 입력하여 응용 프로그램을 다시 실행합니다. 개발자 도구를 열고 오류 메시지가 사라졌는지 확인합니다. 다음 단계를 위해 응용 프로그램 창을 열어둡니다.
ASP. NET Code 디버그
F5가 아닌 외부 명령을 사용하여 응용 프로그램을 실행했으므로 실행 중인 ASP. NET 프로세스에 디버거를 연결해야 합니다. 응용 프로그램 창이 열린 상태에서 VS Code로 이동한 후 Pages/Index.cshtml.cs를 열고 OnGet 처리기에서 중단점을 설정합니다. 작업 막대에서 실행을 클릭하고 드롭다운 컨트롤에서 .NET Core 연결을 선택한 다음 옆에 있는 아이콘을 클릭하여 프로세스 목록이 나타나게 합니다. 응용 프로그램 이름(Processes)을 목록에 입력한 후 남은 한 가지 항목을 선택합니다. (아직도 여러 프로세스가 표시되면 electronWebPort 값이 가장 큰 프로세스를 선택합니다.)
응용 프로그램 창의 보기 메뉴에서 다시 로드를 클릭하면 중단점이 선택됩니다. 실행을 계속하고 응용 프로그램 창을 닫은 후 디버거가 자동으로 연결 해제되는지 확인합니다.
홈페이지 사용자 정의
Electron.NET의 교차 플랫폼 기능을 보여주기 위해 기본 홈페이지 콘텐츠를 활성 시스템 프로세스 목록으로 교체합니다. 이어서 Linux 버전을 빌드하고 해당 플랫폼에서는 어떤 차이가 있는지 확인합니다.
먼저 Pages/Index.cshtml.cs를 열고 프로세스 API에 대한 문을 사용하여 다음을 추가합니다.
using System.Diagnostics;
다음 속성 선언을 IndexModel 클래스에 추가합니다.
public List<Process> Processes { get; set; }이제 다음 행을 (처음에는 비어 있던) OnGet 처리기의 본문에 추가합니다.
var items = Process.GetProcesses().Where(p => !String.IsNullOrEmpty(p.ProcessName)); Processes = items.ToList();
이제는 해당 Razor 페이지 태그를 수정하여 프로세스 목록을 표시해 보겠습니다.
Pages/Index.cshtml을 열고 전체 원본 <div> 태그를 다음 행으로 바꿉니다.
<div>
<table id="myTable" class="table table-sm table-striped">
<thead class="thead-dark">
<tr class="d-flex">
<th scope="col" class="col-sm-2">Id</th>
<th scope="col" class="col-sm-6">Process Name</th>
<th scope="col" class="col-sm-4 text-right">Physical Memory</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Processes)
{
<tr class="d-flex">
<td class="col-sm-2" scope="row">@item.Id</td>
<td class="col-sm-6">@try{@item.MainModule.ModuleName}catch{@item.ProcessName}</td>
<td class="col-sm-4 text-right">@item.WorkingSet64</td>
</tr>
}
</tbody>
</table>
</div>이렇게 수정하면 ID 번호, 프로세스 이름 그리고 프로세스에 할당된 실제 메모리 양에 해당하는 열이 있는 명명된 프로세스 표가 표시됩니다. 인라인 try/catch 블록의 사용에 대해 알아봅니다. 일부 플랫폼에서는 프로세스 이름이 잘릴 수 있으므로, 프로세스 이름이 대체 값으로 사용되는 모듈 이름이 선호됩니다.
Electron.NET은 변경 내용을 모니터링하고 응용 프로그램을 자동으로 다시 빌드 및 다시 실행하는 관찰 모드를 지원합니다. 관찰 모드를 호출하려면 다음 명령을 실행합니다.
electronize start /watch
이제 모든 변경 내용을 프로젝트에 저장합니다. 응용 프로그램이 다시 시작되면 수정된 홈페이지는 다음과 같은 모양이 됩니다.
세부 정보 보기 추가
일반적인 ASP. NET Core 응용 프로그램에서 목록의 항목에는 사용자가 항목을 더 자세히 보거나 수정하는 세부 페이지로의 이동 링크가 포함되어 있습니다. 개별 프로세스에 대한 간단한 보기를 만들어 보겠습니다. 먼저 View.cshtml이라는 Pages 폴더에 새 파일을 추가한 후 다음 태그를 삽입합니다.
@page
@model ViewModel
@{
ViewData["Title"] = "Process view";
}
<div>
<dl class="row">
@foreach (var property in @Model.PropertyList.Select(name => typeof(System.Diagnostics.Process).GetProperty(name)))
{
<dt class="col-sm-4">
@property.Name
</dt>
<dd class="col-sm-8">
@property.GetValue(Model.Process)
</dd>
}
</dl>
</div>
<div>
<hr />
<form method="post">
<input type="submit" value="Kill Process" class="btn btn-danger" />
<a class="btn btn-light" asp-page="./Index">Back to List</a>
</form>
</div> 다음으로 View.cshtml.cs라는 해당 코드 숨김 파일을 추가하고 다음 코드를 삽입합니다.
using System.Diagnostics;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;
using ElectronNET.API;
using ElectronNET.API.Entities;
namespace Processes.Pages
{
public class ViewModel : PageModel
{
private readonly ILogger<ViewModel> _logger;
public ViewModel(ILogger<ViewModel> logger)
{
_logger = logger;
PropertyList = new string[] {
"Id",
"ProcessName",
"PriorityClass",
"WorkingSet64"
};
}
public Process Process { get; set; }
public string[] PropertyList { get; set; }
public void OnGet(int? id)
{
if (id.HasValue)
{
Process = Process.GetProcessById(id.Value);
}
if (Process == null)
{
NotFound();
}
}
}
}문자열 배열 PropertyList는 세부 정보 보기에 표시될 Process 개체 속성 목록을 정의합니다. 페이지 태그에서 해당 문자열을 하드코딩하는 대신, 여기서는 리플렉션을 사용하여 속성 이름 및 값을 런타임으로 파생합니다.
세부 정보 보기를 홈페이지의 개별 항목에 링크하기 위해 Pages/Index.cshtml을 편집하고
@item.Id
식을 다음 앵커 태그로 바꿉니다.
<a asp-page="./View" asp-route-id="@item.Id">@item.Id</a>
전처럼 응용 프로그램을 실행하고, Id 열에 다음과 유사한 페이지로 이동하는 하이퍼링크가 포함되어 있는지 확인합니다.
HTTP POST 요청용 제출 버튼이 태그에 포함된 것을 확인했을 수 있습니다. 다음 메서드를 ViewModel 클래스에 추가하여 세부 페이지 구현을 마무리합니다.
public async Task<IActionResult> OnPostAsync(int? id)
{
if (id.HasValue)
{
Process = Process.GetProcessById(id.Value);
}
if (Process == null)
{
return NotFound();
}
Process.Kill();
return RedirectToPage("Index");
} 물론 이 방법도 효과가 있지만, 사용자에게 다시 생각해 보고 작업을 취소할 기회를 주는 것이 더 나을 것입니다. 마지막 2개 행을 다음 코드로 바꿔 보겠습니다. 이 코드는 Electron.NET의 ShowMessageBoxAsync API를 사용하여 플랫폼 고유의 확인 대화 상자를 사용자에게 표시합니다.
const string msg = "Are you sure you want to kill this process?";
MessageBoxOptions options = new MessageBoxOptions(msg);
options.Type = MessageBoxType.question;
options.Buttons = new string[] {"No", "Yes"};
options.DefaultId = 1;
options.CancelId = 0;
MessageBoxResult result = await Electron.Dialog.ShowMessageBoxAsync(options);
if (result.Response == 1)
{
Process.Kill();
return RedirectToPage("Index");
}
return Page(); 이처럼 사용자가 취소하는 경우 세부 페이지는 현재 상태를 유지합니다. 그러지 않으면 프로세스를 취소한 후 응용 프로그램이 홈페이지로 리디렉션합니다.
응용 프로그램 메뉴 사용자 정의
Electron.NET은 앞에서 설명한 것처럼 기본 응용 프로그램 메뉴를 제공합니다. 이 메뉴는 Electron 프레임워크에서 제공하는 것과 동일한 기본 메뉴입니다. 기본 메뉴를 수정할 방법은 아직 없습니다(Electron의 제한). 새 명령을 추가하거나 필요 없는 하위 메뉴를 제거하려는 경우, 처음부터 전체 메뉴 구조를 지정하는 것 외에는 선택의 여지가 없습니다. 이 작업은 macOS와 다른 플랫폼 간의 차이로 인해 더욱 복잡합니다. macOS에서는 응용 프로그램의 표준 파일/편집/보기 메뉴 왼쪽에 자체 메뉴가 있습니다.
private void CreateMenu()
{
bool isMac = RuntimeInformation.IsOSPlatform(OSPlatform.OSX);
MenuItem[] menu = null;
MenuItem[] appMenu = new MenuItem[]
{
new MenuItem { Role = MenuRole.about },
new MenuItem { Type = MenuType.separator },
new MenuItem { Role = MenuRole.services },
new MenuItem { Type = MenuType.separator },
new MenuItem { Role = MenuRole.hide },
new MenuItem { Role = MenuRole.hideothers },
new MenuItem { Role = MenuRole.unhide },
new MenuItem { Type = MenuType.separator },
new MenuItem { Role = MenuRole.quit }
};
MenuItem[] fileMenu = new MenuItem[]
{
new MenuItem { Role = isMac ? MenuRole.close : MenuRole.quit }
};
MenuItem[] viewMenu = new MenuItem[]
{
new MenuItem { Role = MenuRole.reload },
new MenuItem { Role = MenuRole.forcereload },
new MenuItem { Role = MenuRole.toggledevtools },
new MenuItem { Type = MenuType.separator },
new MenuItem { Role = MenuRole.resetzoom },
new MenuItem { Role = MenuRole.zoomin },
new MenuItem { Role = MenuRole.zoomout },
new MenuItem { Type = MenuType.separator },
new MenuItem { Role = MenuRole.togglefullscreen }
};
if (isMac)
{
menu = new MenuItem[]
{
new MenuItem { Label = "Electron", Type = MenuType.submenu, Submenu = appMenu },
new MenuItem { Label = "File", Type = MenuType.submenu, Submenu = fileMenu },
new MenuItem { Label = "View", Type = MenuType.submenu, Submenu = viewMenu }
};
}
else
{
menu = new MenuItem[]
{
new MenuItem { Label = "File", Type = MenuType.submenu, Submenu = fileMenu },
new MenuItem { Label = "View", Type = MenuType.submenu, Submenu = viewMenu }
};
}
Electron.Menu.SetApplicationMenu(menu);
}
private async void CreateWindow()
{
CreateMenu(); // add this line
var window = await Electron.WindowManager.CreateWindowAsync();
window.OnClosed += () => {
Electron.App.Quit();
};
}대상 플랫폼에 적합한 작업 및 바로 가기 키를 지정하려면 미리 정의된 메뉴 역할을 사용합니다. 또한 Electron.NET이 SetApplicationMenu에 전달된 인수를 직렬화하는 방식 때문에, 배열 이니셜라이저를 사용하여 전체 메뉴 구조를 빌드해야 합니다. 빈 배열에 MenuItem 인스턴스를 추가한 다음 메뉴 API에 전달할 수는 없습니다.
이제 Mac에서 응용 프로그램을 실행하면 메뉴 모음에 Electron, 파일, 보기 등 3개의 하위 메뉴가 나타납니다.
또한 Electron.NET은 기본 시스템 파일 대화 상자를 지원합니다. 사용자에게 파일 이름을 묻는 메시지를 표시하고 쉼표로 구분된 형식으로 해당 파일에 현재 프로세스 목록을 출력하는 다른 이름으로 저장 명령을 추가하기 위해 파일 메뉴 정의를 수정하겠습니다.
MenuItem[] fileMenu = new MenuItem[]
{
new MenuItem { Label = "Save As...", Type = MenuType.normal, Click = async () => {
var mainWindow = Electron.WindowManager.BrowserWindows.First();
var options = new SaveDialogOptions() {
Filters = new FileFilter[] { new FileFilter{ Name = "CSV Files", Extensions = new string[] { "csv" } }
}};
string result = await Electron.Dialog.ShowSaveDialogAsync(mainWindow, options);
if (!string.IsNullOrEmpty(result))
{
string url = $"http://localhost:{BridgeSettings.WebPort}/SaveAs?path={result}";
mainWindow.LoadURL(url);
}
}},
new MenuItem { Type = MenuType.separator },
new MenuItem { Role = isMac ? MenuRole.close : MenuRole.quit }
}; 미리 정의된 메뉴 역할 중 하나를 지정하는 대신 메뉴 유형을 일반으로 설정하고 비동기 클릭 처리기를 제공합니다. ShowSaveDialogAsync API는 지정된 옵션을 사용하여 기본 파일 대화 상자를 엽니다. 이 경우에는 확장자가 .csv인 파일의 필터입니다. 사용자가 대화 상자를 취소하지 않는 경우 API는 선택한 파일에 대한 전체 경로를 반환합니다. 이 경로는 다음 쉼표로 구분된 텍스트를 출력하는 OnGetAsync 처리기를 포함한 SaveAs Razor 페이지에 대한 인수로 사용됩니다.
public async Task<IActionResult> OnGetAsync(string path)
{
System.IO.StringWriter writer = new System.IO.StringWriter();
writer.WriteLine("Id,Process Name,Physical Memory");
var items = Process.GetProcesses().Where(p => !String.IsNullOrEmpty(p.ProcessName)).ToList();
items.ForEach(p => {
writer.Write(p.Id);
writer.Write(",");
writer.Write(p.MainModule.ModuleName);
writer.Write(",");
writer.WriteLine(p.WorkingSet64);
});
await System.IO.File.WriteAllTextAsync(path, writer.ToString());
return RedirectToPage("Index");
}
타사 컨트롤 추가
일반 ASP. NET Core 웹 사이트에서와 마찬가지로 타사 컨트롤을 Electron.NET 응용 프로그램에 추가할 수 있습니다. 기본 개인 정보 페이지를 실제 사용된 메모리의 내림차순으로 상위 10개 프로세스를 그리는 ComponentOne FlexChart 컨트롤로 교체합니다.
먼저 다음 패키지 참조를 .csproj 파일에 추가합니다.
<PackageReference Include="C1.AspNetCore.Mvc" Version="3.0.20202.*" />
Pages/_ViewImports.cshtml을 편집하여 해당 태그 도우미에 추가합니다.
@addTagHelper *, C1.AspNetCore.Mvc
Pages/Shared/_Layout.cshtml을 편집하고 다음 행을 닫는 </head> 태그 앞에 삽입합니다.
<c1-styles /> <c1-scripts> <c1-basic-scripts /> </c1-scripts>
그런 다음 동일한 파일에서 처음 2개의 Privacy 발생을 Chart와 바꿉니다.
Startup.cs를 편집하고 UseEndpoints 호출을 다음으로 바꿉니다.
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
endpoints.MapRazorPages();
}); MVC 컨트롤이 해당 리소스를 적절히 로드하려면 MapControllerRoute에 대한 호출이 필요합니다.
마지막으로 Pages 폴더에 Chart.cshtml이라는 파일을 만들고 다음 태그를 추가합니다.
@page
@model ChartModel
@{
ViewData["Title"] = "Chart view";
}
<div>
<c1-flex-chart binding-x="Name" chart-type="Bar" legend-position="None">
<c1-items-source source-collection="@Model.Processes"></c1-items-source>
<c1-flex-chart-series binding="Memory" name="Physical Memory" />
<c1-flex-chart-axis c1-property="AxisX" position="None" />
<c1-flex-chart-axis c1-property="AxisY" reversed="true" />
</c1-flex-chart>
</div> 그런 다음 해당 코드 숨김 파일 Chart.cshtml.cs를 추가합니다.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;
using System.Diagnostics;
namespace Processes.Pages
{
public class ChartModel : PageModel
{
public List<object> Processes { get; set; }
private readonly ILogger<ChartModel> _logger;
public ChartModel(ILogger<ChartModel> logger)
{
_logger = logger;
}
public void OnGet()
{
var items = Process.GetProcesses()
.Where(p => !String.IsNullOrEmpty(p.ProcessName))
.OrderByDescending(p => p.WorkingSet64)
.Take(10);
Processes = items.Select(p => new {
Id = p.Id,
Name = p.ProcessName,
Memory = p.WorkingSet64
}).ToList<object>();
}
}
}모든 변경 내용을 저장합니다. 빌드 프로세스는 ComponentOne Studio Enterprise 30일 평가판 라이선스를 생성합니다. 메뉴 모음에서 차트 링크를 클릭하면 다음과 비슷한 막대형 차트가 나타납니다.
다른 플랫폼용 빌드
다른 플랫폼용 설치 미디어를 빌드하려면 터미널 창에서 다음 명령을 실행합니다.
electronize build /target xxx /PublishReadyToRun false
여기서 xxx는 win, linux, osx 중 하나입니다. 출력은 bin/Desktop 폴더로 이동합니다. 예:
Processes Setup 1.0.0.exe(Windows)
Processes-1.0.0.AppImage(Linux)
Processes-1.0.0.dmg(OSX)
Windows 실행 파일은 응용 프로그램 자체가 아닌 설치 프로그램입니다. 또한 OSX 대상은 Mac에서만 빌드할 수 있지만 Windows/Linux 대상은 어느 플랫폼에서나 빌드할 수 있습니다. 버전 번호, 저작권 고지 및 기타 특성을 변경하려면 설치 미디어를 만들기 전에 electron.manifest.json을 편집합니다.
Linux에서 실행되는 응용 프로그램이 다음과 같이 표시됩니다.
결론 및 샘플 코드
Electron.NET은 ASP에 값을 추가하는 오픈 소스 도구입니다. C# 개발자에게 Windows, Linux 및 macOS용 교차 플랫폼 데스크톱 응용 프로그램을 전달하기 위한 수단을 제공하는 NET Core. ComponentOne Studio Enterprise의 MVC 컨트롤과 같은 타사 컴포넌트와도 호환 가능합니다.
이 문서에서 설명한 완료된 프로젝트의 소스 코드는 에서 사용 가능합니다.
댓글목록
등록된 댓글이 없습니다.
