Blazor คือ Single-Page Web App Framework (SPA) พัฒนาด้วย .NET (C#) แล้วเอาไปรันบน Browser ด้วย WebAssembly. (อ่านข้อมูลเพิ่มเติม)
เมื่อวันที่ 2 พฤษภาคม 2018 Blazor ประกาศออกเวอร์ชั่น 0.3.0 ออกมาแก้บั๊คและเพิ่มฟีเจอร์ใหม่ๆดังนี้
- Project templates เปลี่ยนไปใช้ Bootstrap 4 แล้ว
- ซัพพอร์ต Async event handlers
- เพิ่มอีเว้นใหม่ 2 ตัวคือ OnAfterRender กับ OnAfterRenderAsync
- Component and element refs
- Better encapsulation of component parameters
- Simplified layouts
ดูข้อมูลเพิ่มเติมได้ที่ https://github.com/aspnet/Blazor/releases
Get started with Blazor
ติดตั้งโปรแกรมเพื่อทดสอบการพัฒนา Blazor 0.3.0 ดังนี้
- ติดตั้ง docker อิมเมจ microsoft/dotnet เวอร์ชั่น 2.1.300-preview2-sdk ขนาด 582 MB
docker pull microsoft/dotnet:2.1.300-preview2-sdk
- สร้าง Directory สำหรับโปรเจ็ค
mkdir CBBlazor01
cd CBBlazor01/เช็ค Path ของ Directory ด้วยคำสั่ง แล้ว copy ที่อยู่เก็บเอาไว้ (ตัวอย่างของผมคือ /Users/bond/CBBlazor01)
pwd
- เปิดโปรแกรม Visual Studio Code (ดาวน์โหลดและติดตั้งโปรแกรมได้ที่นี่ https://code.visualstudio.com) แล้ว Open Folder ไปที่ CBBlazor01 แล้วเปิด Terminal ด้วยการกดไปที่ View => Integrated Terminal แล้วพิมพ์คำสั่ง (แก้ Path ที่ Copy มาแทนที่ /Users/bond/CBBlazor01 ด้วยนะ)
docker run --rm -it -p 5000:5000 -v /Users/bond/CBBlazor01:/CBBlazor01 microsoft/dotnet:2.1.300-preview2-sdk
- ติดตั้ง Blazor Template ด้วยคำสั่งนี้ จะได้ Template ใหม่ 3 ตัวคือ
- Blazor (hosted in ASP .NET server)
- Blazor Library
- Blazor (standalone)
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
- สร้างโปรเจ็ค Blazor ใหม่ด้วยคำสั่ง แล้วสังเกตุที่ VS Code จะเห็น Project Template ปรากฏ
dotnet new blazor -o CBBlazor01
- เปิดไฟล์ launchSettings.json ใน Properties Directory แก้ไข applicationUrl แล้ว Save
"applicationUrl": "http://*:5000/"
- ที่ Terminal พิมพ์คำสั่ง สังเกตุ Port ที่รันจะต้องเป็น 5000
cd CBBlazor01/
dotnet run
- เปิด Browser แล้วไปที่ http://localhost:5000
- คลิ๊กขวา View Source ดูจะเห็นว่ามันคือ Web Assembly นี่เอง
ติดตามบทความเกี่ยวกับ Blazor ต่อไปได้ที่ CodeBangkok นะครับ
- Blazor - Full-stack web development with C# and WebAssembly
- Blazor - Build your first app
- Blazor และ WebAssembly คืออะไร?
บริจาค (Donate) ให้กับ CodeBangkok ได้ที่
BTC = 3GDxhb84ho2jmAV9seAgAFJ7dy1XR3GCyc
ETH = 0x119fa8A618A0283D1834853325A8FF4fe1101230
LTC = ME2abSdDeQYuTmzZSAnHL7LGGeF836d1ut
ZEC = t1Y4NkK3Dx3yBbwCVdpXzKYrqUSJSHgaFXa
https://www.lazada.co.th/products/codebangkok-i219874509-s334754949.html