ทดลองสร้าง Web Assembly ด้วย Xamarin.Forms โดยใช้ Ooui Web Framework

Ooui Web Framework คือ A small cross-platform UI library that brings the simplicity of native UI development to the web สรุปง่ายๆก็คือมันเป็น Library ที่ใช้สำหรับแปลง Native UI ไปรันบนเวป หรือเรียกอีกอย่างนึงว่า Web Assembly นั่นเอง พัฒนาโดยนาย Frank A. Krueger ซึ่งผมได้อธิบายไว้คร่าวๆแล้วที่ “สร้าง Web Assembly ง่ายๆด้วย Ooui Web Framework

บทความนี้เราจะมาทดสอบการพัฒนา Xamarin.Forms แล้วแปลงไปเป็น Web Assembly ด้วย Ooui Web Framework กันนะครับ

1.New Console App (.NET Core) Project

  1. ติดตั้ง Nuget Package ดังนี้

  1. เพิ่ม Content Page ตั้งชื่อว่า MainPage.xaml เข้าไปในโปรเจ็ค

  1. แก้ไขไฟล์ MainPage.xaml ดังนี้
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CBFormsApp.MainPage">
    <StackLayout>
        <Label x:Name="myLabel"
           Text="Hello World"/>
        <Entry x:Name="myEntry"
           Placeholder="Input text here"/>
        <Button Text="Submit"
            BackgroundColor="Silver"
            x:Name="myButton"/>
    </StackLayout>
</ContentPage>
  1. แก้ไขไฟล์ MainPage.xaml.cs ดังนี้
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace CBFormsApp
{
	[XamlCompilation(XamlCompilationOptions.Compile)]
	public partial class MainPage : ContentPage
	{
        public MainPage()
        {
            InitializeComponent();
            myButton.Clicked += MyButton_Clicked;
        }
        void MyButton_Clicked(object sender, EventArgs e)
        {
            myLabel.Text = myEntry.Text;
        }
    }
}
  1. แก้ไขไฟล์ Program.cs โดยเริ่มจาก Using Namspace ดังนี้
  • using Ooui;
  • using Xamarin.Forms;

เริ่มคำสั่งด้วย Forms.Init(); แล้วตามด้วย UI.Publish("/", new MainPage().GetOouiElement());

using Ooui;
using Xamarin.Forms;

namespace CBFormsApp
{
    class Program
    {
        static void Main(string[] args)
        {
            Forms.Init();

            UI.Publish("/", new MainPage().GetOouiElement());
        }
    }
}
  1. Build Project
  2. เปิด File Explorer เข้าไปที่โปรเจ็ค \bin\Debug\netcoreapp2.0\dist

2018-04-04_03-44-39

  1. พิมพ์ cmd ที่ Address Bar แล้วกด Enter

2018-04-04_03-46-23

  1. พิมพ์คำสั่ง python server.py แล้วกด Enter (ต้องติดตั้ง Python 2* ก่อนนะ)

  1. เข้าไปที่ Web Browser แล้วพิมพ์ http://localhost:8000 (ใช้ Google Chrome ดีกว่านะ)
    12.ทดสอบด้วยการพิมพ์ข้อความลง Text Box แล้วกดปุ่ม Submit

2018-04-04_09-21-30

สรุปว่า นักพัฒนาที่เคย Xamarin มาก่อนแล้ว สามารถปรับโค้ดมาทำเป็น Web Assembly ได้ง่ายๆด้วยการใช้งาน Ooui Web Framework โดยท่านสามารถไปเช็คสถานะการพัฒนาได้ที่ https://github.com/praeclarum/Ooui/blob/master/Documentation/OouiFormsStatus.md

Demo: https://github.com/CodeBangkok/CBFormsApp
Source: https://github.com/praeclarum/Ooui/wiki/Xamarin.Forms-with-Web-Assembly

บริจาค (Donate) ให้กับ CodeBangkok ได้ที่
BTC = 3GDxhb84ho2jmAV9seAgAFJ7dy1XR3GCyc
ETH = 0x119fa8A618A0283D1834853325A8FF4fe1101230
LTC = ME2abSdDeQYuTmzZSAnHL7LGGeF836d1ut
ZEC = t1Y4NkK3Dx3yBbwCVdpXzKYrqUSJSHgaFXa

https://www.lazada.co.th/products/codebangkok-i219874509-s334754949.html

https://www.lazada.co.th/products/c-net-core-i221844611-s338593893.html?spm=a2o6z.10453683.17.2.77ba30028gg3mg&mp=3

https://www.lazada.co.th/products/xamarin-i223854543-s342195260.html?spm=a2o6z.10453683.17.3.77ba300223Ar27&mp=3

1 Like