webassemblyの導入NET開発者: UNOプラットフォーム、XAML、およびC

前にpost , 私たちは簡単にwebassemblyの概念を導入し、WebBassemblyアプリケーションを構築するために必要なフレームワーク/ライブラリ.ネットこのポストは、より実用的です.WebBassemblyを使用してWebアプリケーションを構築する方法を紹介します.NET、XAML、およびC.いくつかのフォームコントロールを使用してデータを収集し、そのビューを表示する単純なXAMLアプリを構築します.以下にどのようにビルドするかを示します.

最後に学びます.

webassemblyを作成する方法.NETプロジェクト.

どのようにアプリケーションを展開する.

webassemblyアプリケーション開発のためのコンピュータを設定します.NETコアとUNOプラットフォーム.

ために沿って簡単に従うには、Cの角といくつかの知識を持っている必要がありますXAML、Windowsフォーム、またはWebフォームが、私はいくつかのコンテキストで、私はXAMLで動作したことがない場合でも、簡単に従うことができますので、チミングされます.

プロジェクト設定

あなたはWebassembly、Windows、Linux、MacOS、および異なるモバイルOSのためのUNOプラットフォームアプリケーションを構築することができます.セットアップは各プラットフォームで異なりますが、Visual StudioとVSコードを使用してUNOプロジェクトを作成する手順を詳しく説明します.必要です.NETコアSDKがインストールされています.NETコア3.1 SDKこの出版の時点でversion 3.1.402 .

Visual Studioの使用

Visual Studio IDEを使用する場合は、ダウンロードしてインストールする必要がありますVisual Studio 2019 version 16.3 or later ユニバーサルWindowsプラットフォームとASPを選択してください.NETとWeb開発の作業負荷をインストールします.


UNOプラットフォームソリューションVisual Studio marketplace . テンプレートをダウンロードしてインストールできますlink またはVisual Studioを開き、拡張マネージャーに移動し、オンラインノードを展開し、UNOプラットフォームを検索します.UNOプラットフォームソリューションテンプレートの拡張子を選択してインストールします.

次に、Visual Studioのスタートページから、クロスプラットフォームアプリケーション(UNOプラットフォーム)テンプレートを使用して新しいC Chorseソリューションを作成します.

VSコードの使用

あなたがMacまたはLinuxコンピュータにいるならば、あなたはVSコードを使うことができます.ダウンロードしてインストールし、VSコードをインストールしてからダウンロードしインストールしますmono runtime . 次に、実行してDOTNET CLIを使用してUNOプラットフォームソリューションテンプレートをインストールしますdotnet new -i Uno.ProjectTemplates.Dotnet コマンドラインから.
これで、実行してインストールしたテンプレートを使用してプロジェクトを作成できますdotnet new unoapp -o MyWasmApp -ios=false -android=false -macos=false -uwp=false --vscodeWasm . あなたが実行することによってVSコードのソリューションを開くことができますcode ./MyWasmApp . VSコードはNuGetパッケージを復元するよう頼みます.

ページへのコントロールの追加

UNOプロジェクトが作成されたので、コントロールをページに追加し、イベントを配線します.MySQLアプリケーションを開きます.WASM/メインページ.xamlと下のコードで内容を置き換えます.

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <TextBox x:Name="Name" Header= "Customer Name" Margin="0,24,0,0" Width="500" HorizontalAlignment="Left" />
        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Width="500" Margin="0,24,0,0" HorizontalAlignment="Left" />
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Customer">
        <Button Click="SaveButton_Click" Content="Save" Margin="24" />
    </StackPanel>
</RelativePanel>

<ListView ItemsSource="{x:Bind Customers}" HorizontalAlignment="Center" VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <Grid>
                <StackPanel x:Name="Customer" Margin="5">
                    <TextBlock Text="{x:Bind Name, Mode=OneWay}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{x:Bind Address, Mode=OneWay}" TextWrapping="NoWrap"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

あなたがちょうど追加したマークアップは、名前とアドレスを集めるために入力でフォームをレンダリングして、それからListView コントロール.ボタンはメソッドと呼ばれるSaveButton_Click とListViewはCustomer したがって、このクラスとメソッドを作成する必要があります.
新しいファイル顧客を加えてください.以下のクラス宣言をCとペーストします.

public class Customer
{
    public string Name { get; set; }
    public string Address { get; set; }
}

次に、ボタンのイベントハンドラーメソッドを追加します.MySQLアプリケーションを開きます.WASM/メインページ.XAMLこのメソッドをクラスに追加します.

private void SaveButton_Click(object sender, RoutedEventArgs e)
{
    this.Customers.Add(new Customer() { Name = Name.Text, Address = Address.Text });
    Name.Text = "";
    Address.Text = "";
}

このメソッドは、Name and Address 入力コントロールをCustomer オブジェクトをCustomers コレクション.
の宣言を追加するCustomers クラスへの変数.

public ObservableCollection<Customer> Customers { get; } = new ObservableCollection<Customer>();

いくつかのデータを追加しますCustomers コレクションがアプリの負荷.これを達成するには、次の文をMainPage() コンストラクタ

this.Customers.Add(new Customer() { Name = "James Rodriguez", Address = "12, Kelheimer Str." });
this.Customers.Add(new Customer() { Name = "Filipe Nzazi", Address = "32, Landsberger Str." });

我々は使用しているのでObservableCollection , 適切な名前空間を参照する必要があります.ファイルの先頭に次のusing文を追加します.

using System.Collections.ObjectModel;

アプリケーションの実行

今、あなたは基本的なアプリケーションを準備している.Visual Studioで実行するには、WebBassemblyプロジェクトを起動プロジェクトとして選択し、IIS Expressを選択し、デバッグなしで起動を選択します(またはCtrl + F 5 *を押してください).Visual Studioを使用したアプリケーションのデバッグの詳細については、「UNOプラットフォーム」をチェックしますdocumentation .
VSコードを使用している場合、アプリケーションのデバッグは2段階のプロセスであり、JavaScript Debugger extension . 1.46.0以降のVSコードバージョンを使用している場合、この拡張モジュールはデフォルトでインストールされますが、有効にする必要があります.「debug . javascript . usePreview」を追加することで有効にできます.
アプリケーションをデバッグするには、まず、アプリを起動します.

その後、アプリケーションが起動した後、ブラウザを起動します.

アプリケーションの配備

最後に私がカバーしたいのは、アプリケーションをビルドして発行する方法です.ビルド結果を公開する最も簡単な方法は、Visual Studio発行メニューをプロジェクトに使用することです.これは、標準的な経験によって提供されるすべての機能を使用することができますDeploy to Azure App Service .
VSコードを使用している場合は、bin/Debug/netstandard2.0/publish ディレクトリをどこにでもホストしたい.Pushタスクを実行するには、コマンド+ Shift + PをMacで押すことができます.「発行」を選択し、Enterキーを押します.ビルド後はフォルダをコピーして公開できます.私はNetlifyコンソールを使用して私のアプリケーションをホストするので、ドラッグしてNetLifyコンソール上のフォルダを削除する簡単なプロセスだった.発行ディレクトリ内のすべてのファイルをコピーする必要はありません.INXEXをコピーできます.HTML、PackageCard [ RandonHelp ]フォルダー、サービスワーカー.空のフォルダにJSファイルをアップロードしてアップロードします.
ここではURL あなたがそれをチェックアウトするならば、私の配備の.

結論

今では、webassemblyをよく理解していて、Cのどれかを使ってwebassembly Appsを構築することを願っています.このポストでは、私はどのようにUNOとWebbassMagicアプリを開発するための環境を設定する方法を示した.我々は、DotNetプロジェクトテンプレートをインストールし、インストールされたテンプレートを使用してプロジェクトを作成し、その後、アプリケーションを展開した.今後のポストでは、私はあなたがあなたのGITリポジトリに変更をプッシュするときにあなたのアプリケーションが自動的に展開されるので、どのようにgithubに連続的な統合を設定することができますを示します.
滞在は、より素晴らしいコンテンツ🚀