Article

DataBinding with Silverlight 3 and Silverlight 2

Kreevut Assavakuptanon — Mon, 12 Oct 2009 16:04:00 GMT

การทำ binding ข้อมูลใน Silverlight 3 (หรือ Silverlight 2) นั้นสิ่งแรกเราจะต้องรู้ เกี่ยวกับคำสั่งในการ binding ก่อนดังนี้

{Binding} เป็นคำสั่ง default สำหรับโหมด Oneway (ข้อมูลจะมีการไหลจากแหล่งข้อมูลหรือ Data Source ไปที่

User Interface )

{Binding path} เป็นคำสั่งที่มีการกำหนด path สำหรับแหล่งข้อมูลที่ใช้

{Binding properties} เป็นคำสั่งที่ต้องมีการเรียกใช้ properties

{Binding path,properties} เป็นคำสั่งที่ต้องกำหนด path และ properties

ในบทความนี้จะแสดงออกมาสองตัวอย่างคือ การทำ DataBinding จาก Class และ การทำ DataBinding ผ่าน WCF

ตัวอย่างการ ทำ DataBinding Class

หลังจากที่สร้างโปรเจค Silverlight แล้วให้ทำการสร้าง class ขึ้นมาใน project silverlight โดยการคลิกขวาที่

โปรเจคเลือก Add->New Item จากนั้นให้ทำการเลือก class แล้วตั้งชื่อคลาสด้วย ดังรูปที่ 1

รูป 1 แสดงหน้าต่าง Add New Item

จากนั้นคลิกที่ปุ่ม Add แล้วเขียนโค้ดดังนี้

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace SilverlightApplication1

{

public class EmployeeClass

{

public int EmployeeID { get; set; }

public string EmployeeName { get; set; }

public int EmployeeAge { get; set; }

public EmployeeClass(int EmployeeID, string EmployeeName, int EmployeeAge)

{

this.EmployeeID = EmployeeID;

this.EmployeeName = EmployeeName;

this.EmployeeAge = EmployeeAge;

}

ขั้นตอนต่อไปหลังจากสร้างคลาส EmployeeClass แล้วคือกำหนด ListBox และ TextBlock เพื่อที่จะนำข้อมูลมาใส่ โดยให้ไปที่ไฟล์ Page.xaml เขียนโค้ดดังนี้

<UserControl x:Class="SilverlightApplication1.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400">

<ListBox.ItemTemplate>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Canvas>

</UserControl>

คำอธิบาย Page.xaml

ใน TextBlock สังเกตว่ามีการเรียกใช้คำสั่ง {Binding properties} ซึ่งเป็นการนำข้อมูลมาใส่ให้กับ TextBlock โดย หลังชื่อ Binding จะเป็น properties ของคลาส EmployeeClass ซึ่งถ้ามี properties อื่นก็สามารถใส่ได้แต่เราต้องกำหนด properties ใน EmployeeClass ด้วย

จากนั้นก็ไปที่ Page.xaml.cs แล้วเขียนโค้ดดังนี้

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace SilverlightApplication1

{

public partial class Page : UserControl

{

private List<EmployeeClass> empList;

public Page()

{

InitializeComponent();

empList = new List<EmployeeClass>();

empList.Add(new EmployeeClass(100, "John", 23));

empList.Add(new EmployeeClass(101, "Jame", 34));

empList.Add(new EmployeeClass(102, "Paula", 27));

empListBox.ItemsSource = empList;

}

คำอธิบาย Page.xaml.cs

ในหน้านี้จะมีการสร้างอาเรย์เพื่อกำหนดข้อมูลให้กับตัวแปร empList โดยตัวแปรนี้จะเก็บข้อมูลที่เป็นอาเรย์ไว้หลังจากกำหนดข้อมูลแล้วก็นำข้อมูลที่ได้มากำหนดให้

กับ ListBox ที่ชื่อ empListBox โดยใช้คำสั่ง ItemSource อีกที

ผลลัพธ์ แสดงดังรูป 2

รูป 2 แสดงผลลัพธ์ใน ListBox

การ Binding โดยใช้ LINQ ผ่าน WCF Service

ใน binding ข้อมูลใน Silverlight โดยใช้ LINQ เราจะต้องสร้าง WCF Service ขึ้นมาก่อนเพราะในโปรเจค Silverlight นั้นเราไม่สามารถที่จะสร้าง LINQ class ได้โดยตรงแต่จะต้องสร้างผ่านโปรเจค Web Application อีกทีนึงแล้วทำการเรียกผ่าน WCF Service ซึ่งการสร้าง LINQ รวมถึง WCF นั้นอย่างแรกเราต้องเตรียมฐานข้อมูลก่อนโดยในตัวอย่างจะใช้ ฐานข้อมูลที่ชื่อ Northwind ซึ่งวิธีการติดตั้ง ฐานข้อมูล Northwind ใน Microsoft SQL Server 2008 มีดังนี้(ถ้าใคร ใช้Microsoft SQL Server 2005 เวอร์ชั้นเต็มหรือ Express ก็ใช้วิธีเดียวกัน) โดยให้ไป Download Northwind จาก

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=06616212-0356-46a0-8da2-eebc53a68034

หลังจาก Download แล้วก็ให้ทำการติดตั้งพอติดตั้งเสร็จแล้ว ไฟล์ที่ติดตั้งจะอยู่ที่ c:\SQL Server 2000 Sample Database (ในกรณีที่ไม่มีการเปลี่ยน path ในการติดตั้ง) หลังจากนั้นก็เปิด Command prompt ขึ้นมาแล้วให้เปลี่ยน path ใน Command Prompt ไปที่ C:\SQL Server 2000 Sample Database(ถ้าติดตั้งที่ path อื่นนอกเหนือจากตัวอย่างก็ให้ย้าย path ให้ถูกต้อง) หลังจากนั้นก็ให้พิมพ์คำสั่ง sqlcmd –S . –i instnwnd.sql ในกรณีที่ใช้เวอร์ชั่นเต็ม(ไม่ใช่เวอร์ชั่น Express) แต่ถ้าเป็นเวอร์ชั่น Express ก็ให้พิมพ์ sqlcmd –S .\sqlexpress -i instnwnd.sql

***ตรง –S ให้พิมพ์ S ตัวใหญ่***

หลังจากพิมพ์คำสั่งแล้วก็กด Enter ฐานข้อมูลก็ได้ถูกติดตั้งลงไปใน Microsoft SQL Server แล้วจากนั้นก็ให้ทดสอบ โดยการใช้คำสั่ง sqlcmd –S . หรือ sqlcmd –S .\sqlExpress แล้วกด Enter ผลลัพธ์จะได้ดังรูป 3

รูป 3 แสดงหน้าต่างของ SQLCMD

จากนั้นก็ให้พิมพ์ คำสั่งดังนี้

USE Northwind (กด Enter)

SELECT * FROM Customers (กด Enter)

GO (กด Enter)

ผลลัพธ์จะได้ข้อมูลที่อยู่ใน Table ที่ชื่อ Customers แสดงใน หน้าต่างๆ SQLCMD

หลังที่ได้ทดสอบกับการติดตั้งฐานข้อมูลเสร็จแล้วต่อไปก็เริ่มทำในส่วน Databinding โดย

ในตัวอย่างนี้จะใช้โค้ดของเดิมแต่ให้ทำการเพิ่ม LINQ และ WCF เข้ามาโดยคลิกขวาเลือก โปรเจค Web Application (โปรเจคที่ถูกสร้างมาพร้อมกับ Silverlight) แล้วเลือก Add ->

New Item จะมีหน้าต่าง Add New Item แสดงขึ้นมาให้เลือกที่ LINQ to SQL Class ดังรูปที่ 4

รูป 4 แสดงหน้าต่าง Add New Item เพื่อเลือก LINQ to SQL Classes

จากนั้นคลิกที่ปุ่ม Add ตรง Solution Explorer จะมีไฟล์ DataClasses1.dbml ถูกสร้างขึ้นมาดังรูปที่ 5

รูป 5 แสดงไฟล์ DataClasses1.dbml

นอกจากไฟล์ DataClasses1.dbml ถูกสร้างใน Solution Explorer แล้วก็จะมี หน้า designer ของ DataClasses1.dbml ถูกสร้างขึ้นมาเพื่อที่สามารถลาก Table ต่างๆมาวางในนี้ได้ดังรูป 6

รูป 6 แสดงหน้าของ DataClasses1.dbml

หลังจากนั้นให้คลิกที่ไฟล์ DataClasses1.dbml แล้วดูใน panel Properties ตรง Serialization Mode เลือกเป็น Unidirectional ในการ เพิ่ม Table ลงไปในหน้า DataClasses1.dbml นี้ก็ให้ทำการเปิด panel ที่ชื่อServer Explorer มาก่อน โดยเลือก menu bar ที่ชื่อ View -> Server Explorer ซึ่งจะได้ panel ดังรูป 7

รูป 7 แสดงหน้า panel ของ Server Explorer

ใน Server Explorer นี้ให้คลิกที่ Connect to Database… ดังรูป 8

รูป 8 แสดง icon Connect to Database

จากนั้นจะมีหน้าต่าง Choose Data Source ขึ้นมาให้เลือก Data Souce ที่ต้องการจะติดต่อในตัวอย่างนี้จะเลือก Microsoft SQL Server แล้วคลิกที่ปุ่ม Continue เพื่อเข้าสู่หน้า Add Connection ในหน้านี้ให้กำหนด Server name , ชนิดของการ Log on ในช่อง Log on to the server และเลือกฐานข้อมูลที่ต้องการติดต่อในช่อง Select or enter a database name(จะต้องมีการติดตั้งฐานข้อมูลใน Microsoft SQL Server ไว้ก่อนในตัวอย่างจะใช้ฐานข้อมูลที่ชื่อ Northwind) ดังรูป 9

รูป 9 แสดงตัวอย่างการใส่ค่าในหน้าต่าง Add Connection

หลังจากใส่รายละเอียดแล้วก็ให้คลิกที่ปุ่ม Test Connection ดูเพื่อทดสอบว่าสามารถติดต่อกับฐานข้อมูลได้หรือไม่ซึ่งถ้าติดต่อไม่ได้ก็ให้ไปตรวจสอบ Data Source ว่าเรากำหนดถูกหรือป่าวและในส่วนของช่องการ Log on to the server ก็ให้ตรวจสอบว่าเราได้ทำการใช้แบบ Window Authentication หรือ SQL Server Authentication และสุดท้ายก็ตรวจสอบชื่อฐานข้อมูลว่ามีใน Microsoft SQL Server หรือเปล่า(ในกรณีที่ใช้ Data Source เป็น Microsoft SQL Server) ถ้าถูกต้องหมดหลังจากคลิกปุ่ม Test Connection จะต้องขึ้น ดังรูปที่ 10

รูป 10 แสดงหน้าต่างว่าสามารถติดต่อกับฐานข้อมูลได้

จากนั้นคลิกที่ปุ่ม OK เพื่อออกจากหน้าต่าง Add Connection ใน Server Explorer ก็จะมีฐานข้อมูลที่ชื่อ Northwind ขึ้นมา ให้ ไปเลือก Table ที่ต้องการในตัวอย่างจะเลือก Table ที่
ชื่อ Employees ดังรูป 11

รูป 11 แสดง Table Employees

หลังจากที่ได้ทำการเลือกแล้วก็ให้ลากมาวางในหน้า DataClasses1.dbml ดังรูป 12

รูป 12 แสดงคลาส Employee

ซึ่งตอนนี้เราก็ได้ Table ที่ต้องการจะทำการ binding แล้วต่อไปก็คือสร้าง Service เพื่อเป็นตัวกลางติดต่อระหว่าง Silverlight กับ LINQ (คลาส Employee) เพื่อที่จะให้ทางฝั่ง Silverlight สามารถที่จะ binding ข้อมูลจาก ฟิลด์ต่างๆในคลาส Employee ได้โดยคลิกขวาที่โปรเจค Web Application แล้วเลือก Add -> New Item แล้วให้เลือก Silverlight-enabled WCF Service ดังรูป 13

รูป 13 แสดงหน้าต่างการ Add New Item เพื่อเลือก WCF Service

จากนั้นคลิกที่ปุ่ม Add โปรแกรมก็จะทำการสร้างไฟล์ Service1.svc.cs ดังรูป 14

รูป 14 แสดงไฟล์ Service1.svc.cs

ในไฟล์ นี้ให้เขียนโค้ดดังนี้

using System;

using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.ServiceModel.Activation;

using System.Collections.Generic;

namespace SilverlightApplication1.Web

{

[ServiceContract(Namespace = "")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class Service1

{

[OperationContract]

public List<Employee> GetEmployees()

{

DataClasses1DataContext dContext = new DataClasses1DataContext();

var empVar = from p in dContext.Employees select p;

return empVar.ToList();

}

คำอธิบาย ไฟล์ Service1.svc.cs

ในไฟล์นี้จะมีการใช้คำสั่งของ LINQ เพื่อที่จะส่งค่า ฟิลด์ต่างๆออกไปในตำแหน่งที่เรียกใช้โดยส่งออกเป็น List

แล้วไปที่ไฟล์ Service1.svc.cs ให้รันที่ไฟล์นี้ (ถ้ารันไม่ได้ก็ให้คลิกขวาที่ไฟล์นี้แล้วเลือก View in Browser ก่อน) พอรันแล้วจะได้ไฟล์ Service1 ดังรูป 15

รูป 15 แสดง Service1

ให้เรา copy url ที่อยู่ในรูป 15 (http://127.0.0.1:2469/Service1.svc ) ไว้แล้วไปที่โปรเจค Silverlight ให้คลิกขวาที่ โปรเจคนี้แล้วเลือก Add Service Reference แล้วจะมีหน้าต่าง Add Service Reference ขึ้นมา ให้เอา url ที่ได้ copy ไว้มาวางในช่อง Address แล้วคลิกที่ปุ่ม Go ผลลัพธ์มีการ add Service ไปที่โปรเจค Silverlight ดังรูป 16

รูป 16 แสดงหน้าต่าง Add Service Reference

จากนั้นคลิกที่ปุ่ม OK แล้วให้ไปที่ไฟล์ Page.xaml ทำการแก้ไขข้อมูลสำหรับ binding ใหม่โดยใช้ใส่ชื่อฟิลด์ลงไปเช่น

จากนั้นที่ไฟล์ Page.xaml.cs เขียนโค้ดดังนี้

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace SilverlightApplication1

{

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

ServiceReference1.Service1Client wcf = new SilverlightApplication1.ServiceReference1.Service1Client();

wcf.GetEmployeesCompleted += new EventHandler<SilverlightApplication1.ServiceReference1.GetEmployeesCompletedEventArgs>(wcf_GetEmployeesCompleted);

wcf.GetEmployeesAsync();

}

void wcf_GetEmployeesCompleted(object sender, SilverlightApplication1.ServiceReference1.GetEmployeesCompletedEventArgs e)

{

empListBox.ItemsSource = e.Result;

}

คำอธิบาย Page.xaml.cs

ในไฟล์นี้จะเป็นการเรียก Service ที่เราได้ทำการสร้างขึ้นซึ่งหลังจากที่มีการเรียก event wcf_GetEmployeeCompleted แล้วก็จะทำการ กำหนด ItemsSource ให้กับ Listbox ที่ชื่อ empListBox ผ่านคำสั่ง e.Result;

ให้ทดสอบรันดูโดยกด F5 ผลลัพธ์จะได้ดังรูป 17

รูป 17 แสดงผลลัพธ์ใน ListBox

***ในกรณีที่รันแล้วเกิด Error ดังรูปที่ 18 ก็ให้ไปศึกษาวิธีแก้ได้จาก web

http://msdn.microsoft.com/en-us/library/dd470115(VS.95).asp

รูป 18 แสดง Error

สรุป

บทความนี้ได้กล่าวถึงการ binding แล้วแสดงข้อมูลใน Silverlight ซึ่งในบทความนี้ได้แสดงตัวอย่างออกเป็น 2 รูปแบบคือ binding ข้อมูลโดยมีการสร้างคลาสขึ้นมาแล้วกำหนดข้อมูลผ่าน constructor และ binding โดยมีการดึงข้อมูลจากฐานข้อมูล และใช้ WCF เป็นตัวกลางในการติดต่อระหว่าง Silverlight Application และ Web Application จากตัวอย่างทั้งสองนี้สามารถใช้เป็นแนวทางในการศึกษาเรื่องของ DataBinding และนำไปประยุกต์ใช้กับ Application จริงที่ต้องมีการทำ DataBinding ได้

เนื้อหาที่เกี่ยวข้อง

Microsoft Expression Blend3 + SketchFlow

Microsoft Expression Blend 3 SketchFlow

Kreevut Assavakuptanon — Wed, 07 Oct 2009 18:52:00 GMT

Microsoft Expression Blend คืออะไร

Microsoft Expression Blend คือเครื่องมือที่ใช้ในการออกแบบ (Design Tool) Graphic รวมถึง Multimedia ต่างๆเช่นภาพเคลื่อนไหว ทางด้านของ Window Presentation Foundation (WPF) และ Web (Microsoft Silverlight) ซึ่งเวอร์ชั่นล่าสุดตอนนี้จะเป็นเวอร์ชั่น Microsoft Expression Blend 3 SketchFlow

มีอะไรใหม่ใน Microsoft Expression Blend 3 SketchFlow

· Prototyping

จะมี SketchFlow ที่ช่วยให้ออกแบบต้นแบบ(prototype) ของ application โดยสามารถที่ออกแบบโครงร่างหน้าตาของ application เพื่อให้เห็นรายละเอียดก่อนที่จะนำมาใช้งานจริงได้และนอกจากนี้ยังสามารถให้ผู้อื่นสามารถ Feedback ได้

· Design

สามารถที่จะนำไฟล์จากโปรแกรม Adobe PhotoShop (.psd) และ Adobe Illustrator (.ai) เข้ามาใช้ในโปรเจค และนอกจากนี้ยังสามารถใส่ Effects โดย Panel ที่ชื่อ Assets ซึ่งสามารถที่จะลาก Effects ที่ต้องการเช่น BlurEffect มาวางไว้ที่ Object ที่ต้องการ

· Styling controls

สามารถที่จะสร้าง user control อันใหม่จาก Object ทีได้เลือกไว้ที่มีอยู่แล้วเพื่อทำเป็น Template ไว้ได้ผ่านทาง Panel ที่ชื่อ Object and Timeline โดยใช้คำสั่ง Make Into Control สำหรับ WPF หรือถ้าเป็น Silverlight ก็ใช้คำสั่ง Make Info Part

· States

ใช้จัดการกับ State ต่างๆ เช่นการเปลี่ยน State จาก State หนึ่งไปอีก State หนึ่ง(State Transition)

· Interactivity

สามารถที่จะใช้ Behaviors ในการใส่ interactivity เข้าไปใน application โดยการลากวาง ( ไม่ต้องเขียนโค้ด )

· Data

สามารถที่จะใช้ Data Panel เพื่อสร้างตัวอย่างข้อมูลสำหรับการทดสอบหรือจะนำข้อมูลจาก xml เข้ามาใช้ รวมถึงสามารถที่จะใช้ Data binding ได้

· Silverlight

ถ้ามีการเปิดโปรเจค Silverlight 2 ใน Expression Blend 3 จะมี Dialog box ขึ้นมาถามว่าต้องการที่จะ update ไฟล์โปรเจคนี้เป็น Silverlight 3 หรือไม่ นอกจากนี้ยังสามารถที่จะ run Silverlight Application โดยไม่ต้องใช้ Browser ได้ รวมถึงการทำ cache library extensions เพื่อเพิ่มความเร็วให้กับ Silverlight Application

· Source file version control

สามารถแชร์โค้ดรวมถึงจัดการกับโค้ดต่างๆเช่น checking in , checking out, merging โดยใช้ Microsoft Visual Studio 2008 Team Foundation Server

· Animation

มีคุณสมบัติใหม่ๆให้เลือกใช้มากขึ้น เช่นการบันทึก keyframes

· Text

สามารถใช้ Font Manager เลือก Font ต่างๆ

· Workflow

มีการพัฒนาในส่วนของการใช้งานให้สะดวกขึ้น เช่น การใช้ Direct Selection , Auto-scroll and zoom , Keyboard shortcuts , การคัดลอกและวางภาพใน clipboard เป็นต้น

· Code editing

สามารถที่จะเขียนและแก้ไข code behind ของ C# และ Visual Basic ใน Expression Blend 3 , สามารถที่จะเพิ่มตัวจัดการ event ใน Visual Studio

· Extensibility

มี extensible project templates เพื่อใช้ในการจัดการกับโปรเจคเทมเพลตต่างๆ รวมถึงมี APIs ต่างๆที่สำหรับ Silverlight และ WPF ที่สามารถใช้ได้กับ Visual Studio designer

การติดตั้งโปรแกรม

Download โปรแกรมที่

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=e82db5e2-7106-419e-80b0-65cce89f06bb

วิธีการติดตั้ง

1. หลังจาก download มาแล้วให้คลิกที่ไฟล์ .exe แล้วจะได้ดังรูปในข้อ 1

2. จากนั้นรอสักพักจะได้ดังรูปในข้อ 2

3. ในรูปข้อที่ 2 นี้เป็น License agreement ซึ่งเป็นข้อตกลงเกี่ยวกับลิขสิทธ์ต่างๆพออ่านเสร็จแล้วก็ให้คลิกที่ Accept

4. ในรูปข้อที่ 4 นี้เป็นหน้าเกี่ยวกับการติดตั้งซึ่งสามารถที่จะเปลี่ยน path ที่จะติดตั้งได้โดยคลิกที่ปุ่ม browse (ในตัวอย่างจะใช้ path ที่ทางโปรแกรมกำหนดมาเริ่มต้น)

5. หลังจากนั้นคลิกที่ปุ่ม Install โปรแกรมก็จะทำการติดตั้งให้ดังรูปในข้อ 5

6. พอติดตั้งเสร็จเรียบร้อยก็จะมีหน้าต่างขึ้นมาด้งรูปในข้อ 6 ซึ่งถ้า download โปรแกรมมา โปรแกรมนี้จะเป็นเวอร์ชั่นทดลองใช้ซึ่งปกติจะมีอายุการใช้งานในช่วงทดลองอยู่ที่ 60 วัน

SketchFlow

SketchFlow ก็เหมือนกับการออกแบบโครงร่างหรือลักษณะของ application โดยนักออกแบบจะทำหน้าที่ออกแบบภาพรวมของ Application ว่าจะให้มีลักษณะอย่างไร เช่นในหน้าแรกจะวาง component อะไรบ้าง หน้าที่สองจะมีรูปร่างหน้าตาอย่างไร หลังจากที่ได้มีการออกแบบแล้วก็สามารถนำผลงานที่ได้ออกมานี้ไปให้ทางทีมงานคนอื่นๆดูได้และถ้ามีข้อคิดเห็นอะไรหรือต้องการให้เพิ่ม component อะไรลงไปก็สามารถที่จะ feedback กลับมาได้ และสามารถปรับเปลี่ยน Flow ได้ในทันที

ทำไมต้อง SketchFlow

· นักออกแบบโปรแกรมสามารถออกแบบรูปร่างหน้าตาคร่าวๆของ application ได้

· คนอื่นๆสามารถที่จะ feedback หรือเสนอไอเดียใหม่ๆเพิ่มเติมจากของเดิมที่ได้มีการออกแบบไว้ได้

· สามารถแบบโครงร่างที่ได้ออกแบบไว้เป็น component และนำไปใช้ได้จริง (Prototype to Real Application)

· ใช้ได้ทั้ง Silverlight และ WPF

· สามารถที่จะ import ไฟล์ จาก Photoshop เข้ามาใช้ได้

ตัวอย่างการสร้าง SketchFlow

ในตัวอย่างนี้จะแสดงรูปร่างหน้าตาของ application ในการขายสินค้า ซึ่งมีหน้า แรกคือหน้า login จากหน้า login พอผู้ใช้คลิกที่ปุ่ม login ก็จะมีการลิงค์ไปยังหน้าหลัก(Detail) ในหน้าหลักก็จะแสดง สิ่งต่างๆคร่าวๆที่ต้องมีเช่น กล่องข้อความแสดงรายชื่อของสินค้า,กล่องข้อความแสดงรายละเอียดของสินค้าและมีปุ่ม Confirm เพื่อยืนยันการเลือกสินค้าที่ต้องการ จากนั้นก็จะมีการลิงค์เข้าสู่หน้าถัดไปซึ่งเป็นหน้าแสดงรายละเอียดเพื่อให้ผู้ใช้ตรวจสอบความถูกต้องก่อนทำการสั่งซื้อสินค้าซึ่งถ้าต้องการกลับไปหน้าก่อนหน้านี้ก็จะมีปุ่ม back กลับไป เป็นต้น ซึ่งถ้านับ screen หรือจำนวนหน้าแล้วก็จะมีทั้งหมด 3 screen ด้วยกัน

1. เปิดโปรแกรม Microsoft Expression Blend 3 SketchFlow ขึ้นมาเลือก New Project แล้วเลือกเป็น WPF SketchFlow Application และให้ตั้งชื่อโปรเจคและเลือกภาษาที่ต้องการ ดังรูปในข้อ 1

2. หลังจากที่คลิกที่ปุ่ม OK แล้วก็จะเข้าสู่หน้าหลักในการสร้าง SketchFlow ซึ่งในการสร้าง SketchFlow ให้มาดูตรง SketchFlow Map กันก่อน ถ้าไม่เห็นหน้าต่างนี้ก็ให้ไปที่ menu bar ที่ชื่อ Window แล้ว เลือก SketchFlow Map (หลังจากคลิกแล้วจะมีเครื่องหมายถูกด้านหน้า) ซึ่งหน้าตาของ SketchFlow Map จะมีลักษณะดังรูปในข้อ 2

3. จากรูปด้านบน จะเห็นได้ว่าตอนที่เราสร้าง project sketch flow ขึ้นมาใหม่จะมี Sceen 1 เพียงแค่ อันเดียวซึ่ง Screen นี้ก็คือฉาก หรือ หน้า ของ application นั่นเองถ้าใน application มี 3 หน้าก็ให้คลิกตรง Create a Connected Screen ดังรูปในข้อ 3

4. ผลลัพธ์ที่ได้จะมี Screen 2 เพิ่มเข้ามา ให้ทำการเพิ่มไป Screen 3 ด้วย โดยหลังจากเพิ่ม Screen แล้วจะมีลูกศรเกิดขึ้นมาด้วยเพื่อแสดงการ link กันระหว่าง Screen ดังรูปในข้อ 4

5. หลังจากที่ได้เพิ่ม Screen เข้ามาให้โปรแกรมจะทำการสร้างไฟล์ชื่อ Screen2 และ Screen3 ให้ด้วย ซึ่งเราสามารถที่จะออกแบบรูปร่างหน้าตาในแต่ละ Screen ได้ในนี้ Screen ต่างๆใน SketchFlow Map เราสามารถเปลี่ยนชื่อเรียกได้โดยที่คลิกขวาที่ Screen 1 แล้วเลือก Rename จากนั้นเปลี่ยนชื่อเป็น Login ใน Screen 2 ก็ให้เปลี่ยนชื่อเป็น Detail และ Screen 3 เปลี่ยนชื่อเป็น Confirm ดังรูปในข้อ 5

6. จากนั้นไปที่ Screen ที่ชื่อ Login ในหน้า (Login)Screen1.xaml แล้วให้ไปคลิกตรง Assets Panel ถ้าไม่เห็น panel นี้ก็ให้คลิกตรง menu bar ที่ชื่อ Window แล้วเลือก Assets โดย panel นี้จะมีรูปร่างหน้าตาดังรูปในข้อ 6

7. ให้คลิกตรงลูกศรที่ Styles แล้วจะมีเมนูย่อยๆแสดงขึ้นมาให้เลือก SketchStyle จากนั้นจะมีอุปกรณ์ต่างๆในการวาด Sketch เกิดขึ้นมาดังรูปในข้อ 7

8. ใน หน้า Login นี้จะมี textbox 2 อันและมี ปุ่ม 1 ปุ่ม ก็ให้ทำการลาก BasicTextBox-Sketch , Button-Sketch มาวางในหน้า Art Board (หน้าที่อยู่ตรงกลางมีพื้นหลังสีขาวสำหรับการวางเครื่องมือหรือ tools ต่างๆ) ดังรูปในข้อ 8

9. ในการกำหนด properties เช่นการปรับความกว้างของ Textbox ก็ให้คลิกที่ Textbox ก่อน แล้วไปดูที่หน้าต่าง Properties (ถ้าไม่เห็น ก็ไปเลือก Window -> Properties) ตรงหัวข้อ Layout ให้ใส่ตัวเลขหรือให้เมาส์เลื่อนขนาดเพื่อกำหนดขนาดในช่อง Widthให้กับ Textbox ดังรูปในข้อ 9

10. จากนั้นไปลาก BasicTextBlock-Sketch มาวางใน หน้า TextBox ทั้งสองอันเพื่อที่จะกำหนดข้อความ หรือจะใช้ toolsที่ชื่อ pencil เขียนข้อความก็ได้ ในตัวอย่างขอใช้เป็น BasicTextBlock-Sketch แล้วไปที่ตรง Properties ในหัวข้อ Common Properties ให้ใส่ข้อความว่า Username , Password ใน Text ลงไปผลลัพธ์จะได้ดังรูปในข้อ 10

11. ตอนนี้ก็สร้างหน้า Login เสร็จแล้ว ให้ทดสอบรันดูโดยกดปุ่ม F5 ผลลัพธ์จะมีหน้าต่าง SketchFlow Prototypeเกิดขึ้นมาดังรูปในข้อ 11

12. ในหน้าต่างดังรูปข้อที่ 11 นี้เป็นหน้าต่างที่สำคัญในการที่ให้คนอื่นๆนอกจากผู้ออกแบบ ได้มีส่วนการแสดงความคิดเห็นว่าสิ่งที่ผู้ออกแบบมาดีหรือยัง ควรเพิ่มสิ่งอื่นๆเข้าไปหรือป่าวซึ่งผู้ที่ต้องการนำเสนอสามารถที่จะ Feedback ได้โดยสังเกตุ panel ที่ชื่อ FEEDBACK ด้านล่างซ้ายมือจะมีปากกา , ปากกา highlight และยางลบเพื่อใช้ในการแสดงข้อคิดเห็นหรือสิ่งที่ควรเพิ่มเข้ามาเช่นในตัวอย่างนี้สมมุติว่าถ้ามีข้อเสนอให้เพิ่มปุ่มเข้าไปปุ่มนึงสำหรับการ reset ข้อมูลที่ใส่เข้ามาในช่อง username, password ก็ไปคลิกทีคำสั่ง Enable ink feedback (รูปพู่กันอันแรก) แล้วเลือกสีที่ต้องการแล้ววาดลงไปดังรูปในข้อ 12

13. หลังจากที่แสดงข้อคิดเห็นลงไปแล้วเราสามารถที่จะลบได้ในกรณีที่ต้องการเปลี่ยนข้อคิดเห็นโดยคลิกเลือกคำสั่ง Erase ink feedback (รูปคล้ายๆดินสอ) หรือถ้าต้องการซ่อนข้อคิดเห็นหรือแสดงข้อคิดเห็น(ในกรณีที่ข้อคิดเห็นถูกซ่อนอยู่) ก็ให้คลิกที่รูปหลอดไฟ ถ้าต้องการ export ไฟล์นี้ก็ให้คลิกรูป folder (รูปที่อยู่ด้านขวาสุด) แล้วเลือก export feedback ถ้าต้องการปิดหน้านี้ก็คลิกเครื่องหมายกากบาทด้านบนขวา

14. หลังจากที่สร้างหน้า Login เสร็จแล้วต่อไปก็สร้างหน้า Detail และ หน้า Confirm ซึ่งหลักการการสร้างจะเหมือนกับ หน้า Login ซึ่งในตัวอย่างผมสร้างเสร็จแล้วหน้า Detail และ Confirm คร่าวๆจะมีลักษณะดังรูปในข้อ 14

หน้า Detail

หน้า Confirm

15. การสร้าง Link ในแต่ละหน้า ถ้าในหน้า Login เมื่อคลิกที่ปุ่ม Login แล้วต้องการ Link ไปยังหน้า Detail ก็ให้ไปที่ Screen ที่ชื่อ Login (Screen1.xaml) คลิกที่ปุ่ม Login (ปุ่มที่เราได้ Sketch ไว้) แล้วคลิกขวา เลือก Navigate to -> Detail (ชื่อ Screen ที่ต้องการ link ไป) แล้วคลิกที่ปุ่ม F5 ทดสอบ กดปุ่ม Login ดูผลลัพธ์จะมีการ link ไปที่ Detail

16. หลังจากที่ได้มีการออกแบบแล้วถ้าต้องการนำไปใช้จริงเราสามารถแปลงสิ่งที่ได้ Sketch ไว้ไปเป็น tools จริงๆได้เพื่อนำไปใช้ต่อไปเช่นในหน้า Login ให้คลิกที่ TextBox แล้วไปใน panel Properties ตรงหัวข้อที่ชื่อ Miscellaneous ในหัวข้อนี้ให้คลิกตรงรูปสีเหลียมเล็กๆหลังคำว่า Style ดังรูปในข้อ 16

17. หลังจากที่คลิกรูปสีเหลี่ยมแล้วจะมี Dialog Style ขึ้นมาให้เลือก Reset ผลลัพธ์โปรแกรมจะเปลี่ยน TextBox รวมถึงสิ่งอื่นๆ ที่ได้มีการ Sketch ไว้ไปเป็นสิ่งที่สามารถนำไปใช้งานได้ดังรูปในข้อ 17

18. ในทางกลับกันถ้าต้องการเปลี่ยนสิ่งต่างๆให้เป็นรูปแบบ Sketch เช่น button ก็ให้คลิกที่ปุ่ม แล้วคลิกที่รูปสี่เหลี่ยมเล็กๆหลัง Style จากนั้นเลือก Local Resource -> Button-Sketch

สรุป

ในบทความนี้ก็ได้กล่าวถึงเรื่องของ Microsoft Expression Blend 3 + SketchFlow ซึ่งสิ่งต่างๆที่เพิ่มเข้ามาใหม่ในเวอร์ชั่นนี้ล้วนเป็นสิ่งที่น่าสนใจทั้งสิ้น โดยสิ่งใหม่ๆเหล่านี้ได้เพิ่มการอำนวยความสะดวก , ความยืดหยุ่น และช่วยลดขั้นตอนในการทำงานเพื่อที่จะได้ประหยัดเวลาในการพัฒนา Application ซึ่งสิ่งต่างๆนี้ถูกสร้างขึ้นเพื่อเหมาะกับการนำไปใช้ในการสร้าง Application ที่จำเป็นต้องใช้ Microsoft Expression Blend เป็นอย่างยิ่ง

เนื้อหาที่เกี่ยวข้อง

DataBinding with Silverlight 3 and Silverlight 2

Microsoft Multipoint คือ อะไร

Pongsakorn Poosankam — Wed, 20 May 2009 11:01:00 GMT

Multipoint เป็น Technology ที่ทาง Microsoft พัฒนาขึ้นมาเพื่อให้คอมพิวเตอร์ 1 เครื่องสามารถต่อเชื่อมกับ mouse ได้มากกว่า 1 ตัว จนถึง 250 ตัว

โดยทั่วไปถ้าเรานำ mouse 1 ตัวไปเชื่อมต่อกับคอมพิวเตอร์ จะปรากฏ pointer (ลูกศรตัวชี้) เพียง 1 ตัวเท่านั้น ทำให้ไม่สามารถแยกการใช้งานได้ ถ้าต้องการให้ mouse แต่ละตัวมี pointer ของตัวเองแล้วละก็ ต้องใช้ Technology Microsoft Multipoint นั่นเอง

ตัวอย่าง เกมส์ที่มี mouse 2 ตัว และ 2 pointer รูปช้างน้อยกับเจ้าไทเก้อ

แล้วจะนำ Microsoft Multipoint มาใช้ได้อย่างไร ?

Multipoint ไม่ใช่ Feature ที่ติดมากับ Microsoft Windows XP,Windows Vista หรือ Windows 7 การจะใช้ Multipoint ได้นั้นจะต้องมีโปรแกรมที่สนับสนุน Multipoint โดยโปรแกรมที่สนับสนุน Multipoint ก็จะพัฒนาขึ้นมาโดยอาศัยเครื่องมือที่ชื่อว่า Microsoft Multipoint SDK โดยเวอร์ชั่นปัจจุบัน ณ เวลาที่เขียน คือ 1.1 Multipoint SDK สามารถ Download ได้จากลิงค์ http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=f851122a-4925-4788-bc39-409644ce0f9b ในหน้า Download จะพบไฟล์ต่างๆ ดังรูป

ที่น่าสนใจ คือ การนำ Multipoint ไปใช้กับ Flash ซึ่ง Application ของ Flash ส่วนใหญ่แล้วจะเป็นเกมส์ แบบเล่นคนเดียวและเล่นหลายคน (Client & Server) ถ้าได้เกมส์ที่สามารถเล่นได้พร้อมกันสองคนด้วย mouse 2 ตัว และ คอมพิวเตอร์ 1 เครื่อง คงสนุกไม่น้อยเลยทีเดียว ยกตัวอย่างเกมส์ Photo Hunt

ดูๆ แล้วก็เหมาะให้น้องนักศึกษาเอาไปทำเป็น Project จบเหมือนกันนะครับ

ภายใน Multipoint SDK จะประกอบด้วย 3 ส่วนหลัก คือ

ตัวอย่างโค้ดและโปรแกรม (Multipoint Quiz Game, Multipoint Tic-Tac-Toe, Multipoint Map เป็นต้น)
ชุด .dll ไฟล์ หรือ libraly
Document API

แน่นอนว่าต้องพัฒนาผ่านทาง Microsoft Visual Studio .NET โดย Version ที่สนับสนุนคือ Microsoft Visual Studio 2005 และ Microsoft Visual Studio 2008 ภาษาที่สามารถใช้พัฒนาด้วยเทคโนโลยี Microsoft Multipoint คือ C#.NET, VB.NET และ VB

System Requirement

Windows XP SP2+, Windows Vista+, Windows 7
Visual Studio 2005/2008
Resolution 800x600

Microsoft Multipoint SDK ทำอะไรได้บ้าง (Can do)

โชว์ pointer ของ mouse แต่ละตัวได้
ใส่รูปให้กับ pointer และ เปลี่ยนสี pointer ได้
สามารถตรวจจับการ click จาก mouse หลายๆ ตัวได้จาก deligate,event
ซ่อน pointer ได้
ใช้งานร่วมกับ WPF และ Flash ได้
สนับสนุน Plug & Play (เสียบเมาส์แล้วใช้ได้เลย)

Microsoft Multipoint SDK ไม่สนับสนุนอะไรบ้าง (Can not)

การทำ extended desktop จะทำให้ไม่สามารถใช้ Multipoint ได้
ไม่สามารถนำไปแสดงพร้อมกัน 2 monitor ได้
ไม่สนับสนุนการแสดงบน remote desktop
ไม่สามารถรันคำสั่ง MessageBox.show()
เนื่องจากเป็นการแสดงผลผ่าน DirectX เหตุนี้จึงไม่สามารถใช้ Menu จาก Windows Form ได้ เช่น Minimize, Maximize, Close

ตัวอย่างโปรแกรมที่ใช้ Multipoint และประสบความสำเร็จอย่างสูง คือ MithyMice โปรแกรมนี้จะใช้สำหรับเป็นสื่อการเรียนการสอนสำหรับสถานศึกษาที่มีจำนวนคอมพิวเตอร์ต่อนักเรียนน้อย เช่น Computer 1 ตัว ต่อ นักเรียน 40 คน เมื่อนำ Multipoint เข้ามาใช้จึงทำให้ Computer 1 เครื่อง สามารถถูกใช้งานได้พร้อมกันจากนักเรียน 40 คน

การสร้างเนื้อหาสำหรับสื่อการเรียนการสอนโดย MithyMice สามารถทำได้โดยการใช้ Microsoft Office PowerPoint 2003/2007 สามารถ Download โปรแกรมได้จาก http://www.pil.in.th มีประวัติและวิธีการใช้งานโปรแกรมอย่างละเอียด

Azure คือ อะไร ? (Azure New OS in Cloud from Microsoft)

Pongsakorn Poosankam — Wed, 22 Apr 2009 10:59:00 GMT

Azure คือ อะไร ?

บ้างก็ว่าเป็น OS ตัวใหม่ของ Microsoft
บ้างก็ว่าเป็น Cloud Services (บริการแบบกลุ่มเมฆ) คล้ายกับ Google App Engine (Google Cloud), Amazon Cloud
บ้างก็ว่าเป็น Microsoft Hosting
บ้างก็ว่าเป็น Microsoft Data Center
บ้างก็ว่าเป็น Interoperable Environment (.NET,Java,Ruby,Python,Eclipse ทำงานร่วมกันได้บน Azure)
บ้างก็ว่าออกมาเพื่อช่วยตอบโจทย์ Software Plus Services (ไม่ใช่ Software as Services ละ)
- เช่น อะไรบ้าง Microsoft Office มีบริการ Office Live มาเสริมให้
- เช่น ผู้ใช้ VS.NET สามารถใช้ Hosting จาก Microsoft Data Center (Azure OS, Hosting) โดยการคลิก Publish เพียงคลิกเดียว
SOA Runtime Environment – Web Services SOAP,REST,HTTP,Work Flow

Azure ออกเสียง อย่างไร ?

อะ-ซัว

Azure แปลว่า อะไร ?

สีฟ้า ซึ่งเป็นสีของท้องฟ้า ในวันที่ฟ้าโปร่ง ฟ้าใส สังเกตได้จากท้องฟ้าช่วงเดือนตุลาคม (เริ่มหนาว)
Icon หรือว่า Logo ต่างๆ ที่เกี่ยวกับ Azure ก็จะเป็นสีฟ้า

มีอะไรใน Azure ให้ใช้บ้าง ?

Azure Services
- Compute - ประมวลผลโปรแกรมต่างๆ ที่เรา upload ไปที่ Azure
- Storage ส่วนจัดเก็บข้อมูลมีอยู่ 3 ชนิดให้เลือกใช้งาน
  - Queue (First in Fist out) ในระดับพันล้านคิว ถ้าใครนึกไม่ออกก็ให้นึกถึง Task ที่เรา Create ขึ้นมา เพื่อให้รู้ว่าจะต้องทำอะไรบ้างในลำดับถัดไป
  - Blob เก็บไฟล์ เช่น เพลง, รูป, เอกสาร word,excel
  - Table เก็บข้อมูลแบบ Row/Column ในระดับพันล้าน Records

.NET Services (อยู่ในกลุ่มเดียวกันกับ SQL Services ด้านล่าง)

Work Flow Runtime - ประมวลผล Work Flow ที่พัฒนาด้วย .NET
Access Control – CasrdSpace (ตรวจสอบผู้ใช้โดยอาศัย Electronic Card ที่ถูกติดตั้งลงบน Computer)
Services Bus - เรียกใช้ Resources ทุกอย่างผ่าน Services Bus ด้วย Web Services เช่น Method ของ Third Party ที่ Publish Web Services ไว้ที่ Azure Hosting

SQL Services (อยู่ในกลุ่มเดียวกันกับ .NET Services ด้านบน)

Query ข้อมูลโดยใช้ Web Services ความสามารถในการ Query ก็จะคล้ายๆ กับ MS SQL Server
Distributed RDBMS รองรับข้อมูลมหาศาลระดับพันล้าน records และสามารถกระจาย Load

Office Live ตระกูล Microsoft Office ต่างๆ

Live Services (เรียกใช้ผ่านเว็บเซอร์วิสหรือ API)

Live ID
- Active ID ในประเทศไทย 13,053,832 และ 400 ล้าน ID ทั่วโลก
SkyDrive Services– 25Gb. ต่อ Live ID (ถ้าสมัคร 100 ID ก็จะได้ drive ขนาด 1 Tb. แบบฟรีๆ)
Live Mesh
Live Gallary
Live ...

Microsoft SharePoint Services & Microsoft Dynamic CRM Services อันนี้ยังไม่เปิดให้บริการ แต่เร็วๆ นี้ครับ (น่าจะออกมาเป็น Runtime Services)

SharePoint ช่วยจัดการในเรื่องของ Collaboration ขององค์กร หรือ มองว่าเป็น CMS ก็ได้
Dynamic CRM ช่วยจัดการความสัมพันธ์ระหว่างลูกค้า เพื่อให้สามารถตอบสนองได้เกินความคาดหวังของลูกค้า

ทำไมต้องใช้ Azure ?

รับประกันว่า application จะสามารถทำงานได้ แม้ปริมาณข้อมูลจะมากขึ้นทุกวัน (Scalable)
รับประกันว่า application จะยังสามารถทำงานได้แม้จะเกิดแผ่นดินไหวที่ Data Center หลัก (Availability) เพราะว่ามี Data Center สำรอง
ค่าใช้จ่ายสำหรับ Infrastructure ต่ำมาก เมื่อเทียบกับการสร้าง Data Center เอง
Pay per Use ใช้เท่าไหร่จ่ายเท่านั้น
ใช้ร่วมกับ VS.NET,Windows Desktop,Windows Mobile ได้อย่างดี เช่น Live Mesh, File Backup, Mobile Backup

ทำไม Azure ถึงเจ๋ง ?

การ update หรือ migration ใดๆ จะมี downtime = zero (อ่านไม่ผิดครับ)
มี Add-On สำหรับ VS.NET 2008 ทำให้เขียนง่าย และ publish เพียงแค่ 1 คลิก
SOA Every-Where การเชื่อมต่อหรือสื่อสารกับ Azure ส่วนใหญ่จะเป็น Web Services แบบ SOAP และ REST
สามารถใช้แพลตฟอร์มอื่นๆ ในการพัฒนาบน Azure ได้ เช่น Eclipse, Java, Ruby, Python
มี Document และ Example ที่สมบูรณ์ สามารถตอบโจทย์ลูกค้าระดับองค์กรได้ง่าย

ตัวอย่าง Application ที่ทำงานบน Azure ?

Bing Search: 2.16 พันล้าน queries/ month, ด้วย 41 ภาษา
MSN Web Site: 550 ล้าน unique visitors, 10 พันล้าน page views per month และสามารถรองรับการเพิ่มขึ้นของผู้ใช้ได้อย่างไม่มีปัญหา
Windows Live ID: 1 พันล้าน Authentications/day
Windows Messenger: 8.2 พันล้าน messages/day

อยากจะเริ่มใช้ Azure ต้องทำอย่างไรบ้าง ?

*** Azure CTP เปิดตัวในงาน PDC 2008 ช่วงปลายปี

Sign In ด้วย Live ID ที่ http://www.microsoft.com/azure/register.mspx ระบบจะให้ตอบแบบสอบถามนิดหน่อย จากนั้นก็ขอเข้าไป join ใน Azure Services Platform และจะได้รับ Email Invitetation Code
นำ Code ที่ได้ไปยืนยันขอใช้ Azure CTP http://lx.azure.microsoft.com/fs
เมื่อLogin เข้า Azure Developer Portal ได้สำเร็จ ก็จะสามารถสร้าง domain และ host ต่างๆ ของตัวเองได้
Download http://msdn.microsoft.com/th-th/azure/default(en-us).aspx
- 1. Windows Azure SDK
  2. Windows Azure Tools for Microsoft Visual Studio
  3. Microsoft .NET Services SDK
  4. Microsoft Data Services SDK
  5. Traning Kit : AzureServicesKit-Feb

จากนั้นก็ทำตาม Hand-on Lab ต่อได้เลยครับ