nantcom

RFID with C#

นันคอม — Tue, 25 Aug 2009 05:03:00 GMT

พอดีว่า ผมได้มีโอกาสมาสัมนาเรื่อง RFID ที่ทาง SIPA จัดขึ้น และวิทยาการได้กล่าวถึงเรื่องการติดต่อกับตัว Reader ผ่านทาง Serial Port (ที่ Emulate ผ่าน USB อีกที) วิทยากรเขาแนะนำการเขียนด้วย VB6 และใช้ MSCOMM32 ระหว่างที่ท่านนั่งอธิบายอยู่ ผมเลยใช้เวลานี้ เขียนคลาส C# ที่จะนำมาใช้ในการติดต่อกับตัว RFID Reader ครับ

สำหรับตัว RFID นั้น ใช้ชิพ Silicon Labs CP210x ในการแปลง USB เป็น Serial ครับ ซึ่งปรากฏว่า เป็นชิพเดียวกันกับ GPS Receiver หลายยี่ห้อ ผมเลยสามารถหา Driver สำหรับ x64 ได้ไม่ยากเย็นนักครับ Download ของทั้ง 32-64 bit ได้จากหน้าไฟล์ครับ

สำหรับ Protocol การติดต่อกับตัว RFID ผมลองนั่งหาดู ปรากฏว่าไปเจอเข้าจนได้ ดาวน์โหลดได้จากที่หน้าไฟล์เลยครับ

ส่วนโค๊ดในการติดต่อ ผมทดลองทำง่ายๆ 2 คำสั่ง คือ คำสั่ง Beep และ LED ครับ โดยผมมีฟังก์ชั่นสำหรับส่งให้พร้อมแล้ว น่าจะสามารถเติมคำสั่งอื่นๆ ได้ไม่ยากเย็นนัก ขอให้สนุกครับ

/* Copyright 2009 CoreSharp.NET * ========================= * THIS LIBRARY IS PROVIDED AS-IS WITHOUT ANY WARRANTY * * You may use this library for any legimate purposes, * only requirement is that this license block must * remains in the source file. */ using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.IO; using System.IO.Ports; using System.Threading; namespace RFIDTest { public delegate void OperationCompelted<T>( Exception ex, T result ); public class MifareRfid { public enum Command : ushort { Light = 0x0701, Beep = 0x0601 } ushort startCommand = (ushort)0xAABB; // 0xAABB; /// <summary> /// the Serial port object /// </summary> private SerialPort _Port; /// <summary> /// Connects to Reader with the specified port. /// </summary> /// <param name="port">The port.</param> /// <param name="baudRate">The baud rate.</param> /// <returns></returns> public bool Connect( string port, int baudRate ) { _Port = new SerialPort(); _Port.BaudRate = baudRate; _Port.PortName = port; _Port.Open(); _Port.DataReceived += new SerialDataReceivedEventHandler(_Port_DataReceived); return _Port.IsOpen; } /// <summary> /// Disconnects from the reader. /// </summary> public void Disconnect() { if (_Port.IsOpen && _Port != null) _Port.Close(); } private ManualResetEvent _WaitForResponse = new ManualResetEvent(false); /// <summary> /// Sends the Raw Command to Reader /// </summary> /// <param name="cmd">The CMD.</param> /// <param name="address">The address.</param> /// <param name="parameters">The parameters.</param> public byte[] SendCommand( Command cmd, ushort address, byte[] parameters ) { // length w/o parameter is 5 bytes ushort totalLength = (ushort)(5 + parameters.Length); byte[] buffer = new byte[32]; MemoryStream ms = new MemoryStream( buffer ); BinaryWriter bw = new BinaryWriter(ms); bw.Write(BitConverter.GetBytes(this.startCommand).Reverse().ToArray()); bw.Write(BitConverter.GetBytes(totalLength)); bw.Write(BitConverter.GetBytes(address).Reverse().ToArray()); bw.Write(BitConverter.GetBytes((ushort)cmd).Reverse().ToArray()); bw.Write(parameters); byte xor = 0; for (int i = 4; i < 4 + totalLength; i++) { xor ^= buffer; } bw.Write(xor); _WaitForResponse.Reset(); _Port.Write(buffer, 0, buffer.Length); if (_WaitForResponse.WaitOne(200)) { throw new Exception("Reader Failed to reply within 200ms"); } else { buffer = new byte[_Port.BytesToRead]; _Port.Read(buffer, 0, buffer.Length); return buffer; } } /// <summary> /// Sends the RAW command asynchronously /// </summary> /// <param name="cmd">The CMD.</param> /// <param name="address">The address.</param> /// <param name="parameters">The parameters.</param> /// <param name="response">The response.</param> public void SendCommandAsync(Command cmd, ushort address, byte[] parameters, OperationCompelted<byte[]> response) { if (response == null) throw new ArgumentNullException("response"); Action a = delegate { try { var data = this.SendCommand(cmd, address, parameters); response(null, data); } catch (Exception ex) { response(ex, null); } }; a.BeginInvoke(null, null); } private void _Port_DataReceived(object sender, SerialDataReceivedEventArgs e) { if ( e.EventType == SerialData.Eof ) _WaitForResponse.Set(); } } }

จุดน่าสนใจ

เหมือนว่า การส่ง จะต้องส่งเป็นแบบ Big-Endian คือ เอาไบต์น้อยขึ้นก่อน เช่น 0x0106 เวลาส่ง จะต้องส่ง 06 ไปก่อน 01 ผมก็เลยใช้วิธีเอา BitConverter แปลงค่าเป็น Byte ก่อน แล้วสั่ง Reverse แล้ว ToArray เอาครับ
เนื่องจากความยาวไม่มีทางเกิน 32 (แค่ไบต์เดียว) เลยไม่ต้องกลับ Little/Big Endian ครับ

เปลี่ยน Font Windows 7 ให้คมขึ้นด้วย Leelawadee

นันคอม — Wed, 12 Aug 2009 07:01:43 GMT

จากที่ผมได้เขียนแนะนำเกี่ยวกับการเปลี่ยน Font ใน Windows Vista ไปแล้ว ด้วยเทคนิคเดียวกัน ก็ยังสามารถนำมาใช้ได้ใน Windows 7 ครับ โดยคราวนี้ ผมได้ทำเป็นไฟล์ Registry เอาไว้ให้เลย เพื่อความสะดวกในการใช้งาน (แน่นอนว่า ถ้าเครื่องมีปัญหา ผมคงจะรับผิดชอบอะไรให้ไม่ได้นะ อิอิ)

สามารถดาวน์โหลดได้จากหน้าไฟล์ครับ ถ้าสงสัยว่า เปลี่ยนแล้วจะได้ผลยังไง ลองเปรียบเทียบ Screenshot ที่ผมเตรียมไว้ให้ กับเครื่องคุณได้ครับ สังเกตว่าตัวอักษรจะบางลง และข้อความภาษาไทยจะคมขึ้นครับ ยิ่งถ้าใช้ร่วมกับการปรับตัวอักษรจาก 8 เป็น 10 ก็จะอ่านสบายตาขึ้นมากทีเดียว

สำหรับท่านที่ห่ไม่เจอว่า หน้าต่างปรับ Font เปลี่ยนสี มันหายไปไหน มันอยู่ในหน้าจอ Personalize –> Window Color และ Advanced appearance settings.. ครับ

นอกจากนี้ Windows 7 ยังมีเครื่องมือใหม่ ชื่อว่า ClearType Text Tuner อยู่ใน Control Panel –> Display เพื่อปรับความคมชัดของตัวอักษรด้วยนะครับ ถ้าต้องการให้อ่านง่ายยิ่งขึ้น ก็สามารถปรับได้จากเครื่องมือนี้

อ้อ แล้วก็ยังมีเครื่องมือปรับสีจอ LCD ด้วยนะครับ อยู่ในเมนู Calibrate Color

เล่นแล้วเป็นอย่างไร มาเม้นบอกกันได้นะครับ

Setup SQL Server 2008 และ SP1 พร้อมกัน (Slipstream)

นันคอม — Sun, 02 Aug 2009 03:21:35 GMT

เนื่องจาก SQL Server 2008 ยังไม่รองรับ Windows 7 ทำให้เวลาเราลง SQL 2008 ก็จะพบหับหน้าจอแบบนี้ ให้เราลงไปก่อน แล้วไปหา SP1 มาติดตั้งอีกที ที่น่าน้อยใจคือ ถ้าคุณใช้ SQL Express เลย มันเหมือนจะมี SP1 มาในตัวอยู่แล้วเนี่ยสิ

ไม่เป็นเรา เราทำเองบ้างก็ได้ ผมไปพบบล็อกใน MSDN ที่สอนทำ Slipstream เข้าพอดี วิธีการไม่ยากครับ เราลองมาดูกัน

ขั้นแรก ไปดาวน์โหลด SQL Server 2008 SP1 มาก่อน จากเว็บ Microsoft เลือกโหลดเฉพาะ 32บิต หรือ 64บิต ก็ได้ หรือจะโหลดมาหมดเลยก็ได้ครับ ไม่ว่ากัน ผมถือว่า เซฟไว้ที่ C:\ ละกันนะครับ

SQLServer2008SP1-KB968369-x64-ENU.exe (64-bit - 323MB)
SQLServer2008SP1-KB968369-x86-ENU.exe (32-bit – 262MB)

ขั้นต่อมาเลย ถ้าไฟล์ของคุณเป็น ISO ก็ต้องแตกไฟล์ลงเครื่องก่อนครับ ผมถือว่า แตกไฟล์ไว้ที่ C:\SQL2008SP1 นะครับ เมื่อแตกแล้ว ให้สร้างโฟลเดอร์ ชื่อ PCU ขึ้นมา ดังรูปทางขวามือ เราจะเอาไว้เก็บตัว Update ครับ

จากนั้น เมื่อดาวน์โหลดมาแล้ว ให้เปิด Command Line โดยการกดปุ่มวินโดวส์ข้างๆ ปุ่ม ALT แล้วกด R

แล้วพิมพ์ว่า…

SQLServer2008SP1-KB968369-x64-ENU.exe /x:c:\SQL2008SP1\PCU [กด ENTER]
SQLServer2008SP1-KB968369-x86-ENU.exe /x:c:\SQL2008SP1\PCU [กด ENTER]

หมายเหตุ คุณสามารถกด Tab แล้ว Command Line มันจะ Auto Complete ชื่อให้ได้นะครับ ไม่ต้องพิมพ์เองทั้งหมด

จากนั้น Copy ไฟล์ Setup.exe, Setup.rll ในโฟลเดอร์ C:\SQL2008SP1\PCU ไปทับไฟล์เดียวกันนี้ ที่ Folder C:\SQL2008SP1 ด้านนอก

จากนั้น กลับมาที่ Command Line แล้วพิมพ์คำสั่ง ดังนี้

robocopy C:\SQL2008SP1\pcu\x86 C:\SQL2008SP1\x86 /XF Microsoft.SQL.Chainer.PackageData.dll [กด ENTER]
robocopy C:\SQL2008SP1\pcu\x64 C:\SQL2008SP1\x64 /XF Microsoft.SQL.Chainer.PackageData.dll [กด ENTER]

แล้วก็ เข้าไปหาไฟล์ DefaultSetup.ini ใน Folder C:\SQL2008SP1

ถ้ายังไม่มี ให้สร้างขึ้นมาด้วย Notepad แล้วเซฟไว้ที่ C:\SQL2008SP1\x86\DefaultSetup.ini และ C:\SQ:2008SP1\x64\DefaultSetup.ini ตามลำดับ ครับ

ภายในไฟล์ ให้เพิ่มบรรทัด PCUSOURCE="V:\PCU" ลงไปครับ ถ้าสร้างไฟล์ใหม่ขึ้นมา ก็ให้ในไฟล์ มีเนื้อไฟล์ตามนี้

;SQLSERVER2008 Configuration File
[SQLSERVER2008]
PCUSOURCE="V:\PCU"

ส่วนของผม เป็นแผ่น MSDN มันจะ Embed Key มาอยู่แล้วในไฟล์นี้ ก็เพิ่ม PCUSOURCE="V:\PCU" ต่อท้ายลงไปได้เลย

เรียบร้อยแล้ว ก็สร้างไฟล์ใหม่อีกไฟล์ครับ ชื่อว่า C:\SQL2008SP1\Setup.cmd ให้ภายในไฟล์ มีเนื้อหาดังนี้

ไฟล์นี้ จะทำการสร้าง Virtual Drive ว่า Drive V ให้มันชี้ไปที่โฟลเดอร์ปัจจุบันของเรา ซึ่งเมื่อมันทำงาน จะเห็นว่า ใน My Computer มี Drive V โผล่ขึ้นมา ซึ่งภายในมีข้อมูลเหมือนใน Folder C:\SQL2008SP1 เป๊ะ

เมื่อพร้อมแล้ว ก็รันไฟล์ Setup.cmd ได้เลยครับ!

จะรู้ได้อย่างไร ว่ามัน Slipstream?

ดูได้จาก 2 หน้าครับ คือ Installation Rules จะเห็นว่า บรรทัดสุดท้าย มีเขียนว่า “Update Setup Media…”

และในตอนก่อนที่จะ Install เลื่อนลงมาดู จะเห็นตรงที่เขียนว่า Slipstream ครับ

เอาละครับ ต่อไปถ้าจะลงเครื่องใหม่ ก็ไม่ต้องมานั่งลง SP1 กันแล้ว เจอกันใหม่โอกาสหน้าครับ

ทำไมโปรแกรม WPF ของเราช้า

นันคอม — Tue, 28 Jul 2009 14:40:03 GMT

พอดีว่าตอนที่ผมไปกระจายข่าวของโปรแกรมผมอยู่ บังเอิญไปอ่านเจอโพสในเว็บนาริสาเข้า เกี่ยวกับเรื่อง Performance ของ WPF ซึ่งเป็นปัญหาที่เคยเกิดขึ้นกับบริษัทที่ผมทำงานเหมือนกันครับ

อาการก็คือ เวลาที่สร้าง Animation ในโปรแกรม แล้วโปรแกรมทำงานได้ช้า บางทีก็เห็น CPU ขึ้น 100% เลยก็มี บางทีอยู่เฉยๆ CPU ก็ขึ้น เป็นต้น อีกอาการก็คือ หน้าโปรแกรมโหลดช้ามาก ใช้งานบางทีก้อกระตุก กินแรมเยอะอีกต่างหาก แต่ถ้าลองจูนดูดีๆ ก็ปรากฏว่า ความผิดมันอยู่ที่เราเนี่ยละครับ หลายๆ อย่างเลย เขาก็เขียนบอกไว้อยู่แล้ว แต่เราไม่ได้ไปอ่านมัน

เพื่อไม่ให้เกิดประวัติศาสตร์ซ้ำร้อย ผมเลยมีเทคนิคเล็กน้อย จากประสบการการใช้งานเทคโนโลยี XAML (ทั้ง WPF/Silverlight) มาฝากครับ

1. อย่าใช่ BitmapEffect เด็ดขาด

ก่อนที่ผมจะอธิบายอะไรต่อไป ลองดูนี่ก่อนครับ (จาก MSDN)

โดยสรุปก็คือ BitmapEffect นั้น เรนเดอร์ด้วย CPU ครับ (Software Rendering) ไม่ได้ใช้การ์ดจอวาด (Hardware Rendering) อย่างที่มันควรจะเป็น และพาลทำให้วัตถุนั้น เรนเดอร์ด้วย Software ไปด้วยอีกต่างหาก ควรหลีกเลี่ยงอย่างที่สุดครับ แต่ใน WPF 3.5 จะมีแบบใหม่ ที่ชื่อว่า Effect เฉยๆ ที่ทำงานโดยใช้ความสามารถ Pixel Shader 2.0 ของการ์ดจอ เหมือนกับเอฟเฟค์ภาพเบลอ แสงฟุ้งๆ ที่เราเห็นในเกมแบบนั้นเลยครับ (สังเกตประกายไฟ หรือการ Glow ของโลหะบนมอเตอร์ไซค์ในรูปด้านล่าง)

สำหรับการ์ดจอที่ใช้ PS2.0 ได้ คือรุ่น Intel GMA900, Nvidia GeForce 5XXX ขึ้นไป หรือ ATI Radeon X300 ขึ้นไป หรือจะแปลง่ายๆ ก็คือ หาเครื่องที่ใช้ไม่ได้ยากมากครับในยุคนี้ เพราะแค่การ์ดจอ OnBoard ก็มีแล้วครับ สังเกตง่ายๆ ว่า ถ้าเครื่องไหน เปิด Aero Glass ได้ ก็ใช้ PS2.0 ได้แน่นอนครับ

เนื่องจาก GPU ทำงานอะไรที่เป็น SIMD (Single Instruction Multiple Data - คำสั่งทำกับหลายๆ ข้อมูล เช่น เปลี่ยนสีทุกพิกเซลเป็นสีขาว) แบบนี้ได้เร็วมากๆ การทำเอฟเฟคบน GPU จึงแทบไม่มีผลอะไรเลยครับ เกือบจะมี Performance Hit เป็น 0 เลยก็ว่าได้ (ย้ำว่า เกือบ) แต่สำหรับเอฟเฟคเบลอ พยายามอย่าใช้ Radius เกิน 10 ครับ เพราะเอฟเฟคเบลอ คือการไปดูพิกเซลข้างๆ แล้วเอามาหาค่าเฉลี่ย ถ้าใส่ไป 20 หมายถึงว่า การจะเรนเดอร์ 1 พิกเซล ก็จะต้องดูพิกเซลรอบๆ อีก 1600 พิกเซลเพื่อเอามาบวกกันหาค่าเฉลี่ย (20 พิกเซลจากทุกด้าน = 40x40) ต่อให้ GT200 ก็ยังอาจจะลำบากอยู่เหมือนกัน เพราะว่า WPF ไม่ได้ทำงานแบบเกม (ดูข้อ 10 ครับ) และเกมก็ไม่มีเอฟเฟคที่เบลอกระจายขนาดนี้ครับ (เขาใช้เทคนิคหลายๆ อย่างผสมกันน่ะครับ)

2. อย่าสร้าง Animation ที่เกี่ยวข้องกับ Layout

แม้ว่าเดี๋ยวนี้ CPU จะเร็วมากแล้ว แต่การสร้าง Animation ที่เกี่ยวข้องกับ Layout นั้น ใช้ CPU ล้วนๆ ครับ (และไม่มีทางทำบน GPU ได้ด้วย) นั่นก็คือ ทุกเฟรมที่โปรแกรมทุกงาน จะต้องมีการคำนวณ Layout ใหม่หมด ทุกเฟรม ดังนั้น ไม่ควรอย่างยิ่งครับ

แล้วแบบไหนคือ Animation ที่ใช้ Layout? ตัวอย่างเช่น

ขยาย Listbox มาจนเต็มที่ว่างในจอพอดี
เปลี่ยนขนาด Grid โดยตั้งค่า Width, Height
ขยับวัตถุ โดยใช้ Canvas.Left, Canvas.Top (มีหลายคนบอกว่า มีผลไม่มากนะ)
นึกไม่ออกละ….เพราะผมไม่เคยใช้เลย :P

เอาเป็นว่า ถ้าคุณทำอะไร ที่มันทำให้ Layout ขยับ นั่นแปลว่า CPU ล้วนๆ ครับ ดั้งนั้น ถ้าจะทำ Animation ให้มองลงมาล่างๆ หน่อยครับ จะเจอ Category ชื่อ RenderTransform นั่นละครับ ถ้าจะใช้ Animation ให้เปลี่ยนค่าตรงนี้เท่านั้น ซึ่งคุณสามารถเล่นกับอนิเมชั่น ประมาณนี้ได้ครับ

ย่อ-ขยาย ขนาดของวัตถุ (ScaleTransform)
กลับด้านวัตถุ (ScaleTransform แล้วตั้งค่าเป็น –1 เช่น Y =-1 จะได้ภาพกลับหัว เหมือนเงาสะท้อน)
หมุนวัตถุ (RotateTransform) ไม่เหมือนกับการกลับด้านนะครับ ถ้าทำให้วัตถุหมุนไป จนกลับหัว มันจะกลับซ้ายเป็นขวา
ขยับวัตถุไปมา เป็นจำนวน Pixel คงที่ เช่น ขยับซ้าย 10 pixel (TranslateTransform) แต่ถ้า ขยับไปจนเต็มพื้นที่ แบบนี้จะทำไม่ได้ครับ
Opacity เปลี่ยนความโปร่งแสงได้
เปลี่ยนสี เนื่องจากการเปลี่ยนสีเป็นการเปลี่ยนสีบน Vertex ของวัตถุ

Animation เหล่านี้ จะไม่กิน CPU เลย เพราะมันทำงาน หลังจากที่ Layout ทำงานแล้ว มันจึงเป็นการย่อ ขยาย หมุน เลื่อน สิ่งที่ปรากฏบนจอเท่านั้นเองครับ ไม่มีการคำนวณอะไรใหม่ทั้งสิ้น

3. ทำ Background ให้มัน Simple!

อีกหลุมหนึ่งที่เป็นปัญหามาก คือ เรามักจะเผลอวาดคอนโทรลซ้อนทับกันไป ซ้อนทับกันมา แล้วใช้มันเป็นพื้นหลังครับ ซึ่งไม่ควรอย่างยิ่ง ถ้าเป็นไปได้ ให้สร้าง DrawingBrush แทน จะดีกว่า เพราะนอกจากจะไม่ทำให้ Visual Tree ของเราใน Blend ตีกันวุ่นแล้ว มันยังเร็วขึ้นด้วย หรือถ้าจะให้ดี ทำให้มันเป็นภาพนิ่งเลยครับ จะดีที่สุด

เช่นเดียวกัน ผมเคยเจอกรณีทีมีดีไซนเนอร์ท่านหนึ่ง ใส่เงาไว้ที่ตัวอักษรทุกตัวเลย นั่นเท่ากับว่า เราจะต้องสร้างเงาขึ้นมาสำหรับตัวอักษรแต่ละตัว ซึ่งผลลัพธ์ที่ได้ ก็มีค่าเท่ากับการใส่เงาที่ Canvas หรือ Grid ที่คลุมตัวอักษรนั้นอยู่

4. Reset Property ทุกครั้ง ถ้าจะไม่เปลี่ยนมัน

ลองดูโค๊ดของสี่เหลี่ยมนี้เทียบกันครับ

จะเห็นว่า ทั้งสองสี่เหลี่ยมนี่ แสดงผลเหมือนกันทุกประการ แต่ว่าอันที่ Hilight อยู่โค๊ด XAML ยาวกว่า นั่นก็เพราะเวลาคุณเซ็ทค่าบางอย่างด้วย Blend แม้ว่าค่านั้น จะเป็นค่า Default เจ้า Blend ก็่ยังจะเซ็ทค่าให้ครับ (เช่น Margin 0, HorizontalAlignment=Stretch

อย่าลืมว่า XAML นั้น มันโดนแปลงเป็นโค๊ดอีกทีหนึ่ง การที่มีการตั้งค่าต่างๆ ก็เหมือนกับการมีโค๊ดที่เซ็ทค่าเหล่านั้นทำงานอยู่ด้วยนั่นละครับ แถมเสียเวลาทำแล้ว ก็ยังไม่ได้ผลอะไร (เพราะมีคือค่า Default อยู่แล้ว) ดังนั้น ถ้าจะไม่ตั้งค่าอะไร ให้ Reset ค่าเสมอครับ ซึ่งเป็นเรื่องน่ายินดีที่ Blend 3 มันรีเซ็ทให้เอง ถ้าพบว่าการตั้งค่านั้นเป็นการตั้งค่าด้วยค่า Default

5. อย่าเปิดหลายฟอร์ม

เพราะว่าการเปิด Form ใหม่ คือการสร้าง Render Surface เพิ่มครับ เนื่องจาก WPF นั้น Render ด้วย DirectX ซึ่งปกติเขาจะ Render กันอยู่ในหน้าต่างเดียว (สังเกตง่ายๆ ว่า โปรแกรมเดโมของ Microsoft นั้น ทำงานด้วยหน้าต่างเดียวเกือบทั้งหมด)

6. อย่าเขียนโค๊ดแทนระบบ Layout

อย่าลืมว่า WPF มีระบบ Layout อยู่นะครับ ถ้าต้องเขียนโค๊ดใน อะไรซํกอย่าง_Resized เช่น ตั้งให้คอนโทรลอยู่ตรงกลาง Form เนี่ย แสดงว่าต้องมีอะไรผิดพลาดแน่ๆ ลองจัด Layout ใหม่ ดีๆ ครับ และที User Control กับ Window เราสามารถทดลองย่อขยายขนาดของมันได้ เพื่อดูว่า Layout ของเราขยับตามได้หรือไม่ (Fluid Layout) โดยลากที่มุมด้านล่างของคอนโทรล หรือ Form ครับ (อย่าลืมตั้ง Width/Height เป็น Auto)

8. อย่าตกหลุมเดียวกับ HTML

นอกจากนี้ อีกหลุมนึงที่ผมเจอก็คือ มีหลายคนพยายามใช้ Grid ทำเป็นเหมือน Table เพื่อวางคอนโทรลครับ ซึ่ง HTML ก็ได้ผ่านจุดนั้นมาแล้วจากการใช้ CSS ดังนั้น อย่าพยายามไปทำความผิดซ้ำอีก การวางคอนโทรลใน Grid ที่มี Row และ Column นั้น ลำบากมากๆ ครับ ลองใช้การจัดชิดเต็ม ร่วมกับการใส่ Margin ดู อาจได้ผลเหมือนกันก็ได้ (เช่นเดียวกับการสร้างตารางที่มี 2 คอลัมน์ ที่ได้ผลเหมือนกับการวาง div float left)

9. ใช้ DataBinding และ AttachedProperty ให้มากที่สุด

จุดเปลี่ยนของ WPF เลย คือเรื่องระบบ Data Binding ที่ทำได้วิจิตรพิสดารมาก จนผมไม่สามารถกลับไปทนใช้ Windows Form ได้อีกแล้ว และระบบ Dependency Property ที่ไม่รู้ว่าคิดได้ยังไง อย่างเช่นโปรแกรม WaiV2 ของผมนั้น ใน UI เกือบจะไม่มีโค๊ดเลย เป็นการ Binding ล้วนๆ และ ระบบ Localization ก็ใช้การสร้าง Attached Property ไปแปะไว้กับคอนโทรล แทนการทำให้คอนโทรล Localize ได้ แจ่มมากครับสำหรับฟีเจอร์ทั้งสองนี้

อ้อ สำหรับ Blend 3 จะมีฟีเจอร์ชื่อ Interactivity ด้วย มันคือการนำเอา AttachedProperty แปะเข้าไปนั่นเองครับ อย่างโค๊ดด้านล่างนี่ คือการแปะ Property Interaction.Triggers ลงไปบน Rectangle ทำให้ Rectangle เป็นลิงค์ เปิดหน้าเว็บได้

10. อย่าลืมว่า นี่ไม่ใช่ Windows Form

ทันทีที่คุณใช้ WPF คุณก็ได้ก้าวเข้าสู่อีกโลกหนึ่งแล้วครับ การเขียนโปรแกรมด้วย WPF นั้น ในความคิดของผม มันคือการเขียนเกมดีๆ นี่เองครับ เพราะคุณจะต้องคำนึงถึงเรื่อง Performance ตลอดเวลา เพราะการวาดภาพนั้น มีราคาค่างวดที่สูงมากครับ และต้องอย่าลืมว่า WPF ทำงานแบบ Retained Mode ซึ่งจะคงออบเจ็กต์ไว้ในแรมตลอดเวลา ต่างจากเวลาที่เราวาดภาพด้วย GDI บน Windows Form ซึ่งเป็นแบบ Immediate Mode ที่วาดภาพลงไปเลย โดยที่ไม่คงออบเจ็กต์ไว้ ถึงเวลาจบการวาดก็ล้างออบเจ็กต์ทิ้ง (เหมือนการสร้าง Visual Tree ใหม่ ทุกเฟรม)

ข้อดีของการทำงานแบบ Retained Mode คือ คุณจะมีอิสระมากกว่าในการเปลี่ยนแปลงรูปร่างหน้าตาของวัตถุ เพราะไม่ต้องคำนึงว่ามันจะวาดลงไปบนจอหรือยัง หรือวัตถุไหนจะวาดก่อน วัตถุไหนวาดทีหลัง เพียงแค่เปลี่ยนค่าตามใจชอบ แล้วเดี๋ยวระบบก็สามารถจัดการวาดภาพลงไปได้เลย เมื่อถึงเวลาที่ต้องอัพเดทหน้าจอ

และเมื่อคุณรู้แล้วว่า WPF ทำงานแบบ Retained Mode คุณก็ควรจะทำให้ Visual Tree ของคุณ ให้เป็น Tree น้อยที่สุด คืออย่าให้แขนงของมันเยอะมากจนเกินไป (เช่นทุกอย่างเป็นวัตถุหมด ไม่มี Path หรือ Drawing Brush เลย แม้แต่รูปก็ไม่ยอมใช้) และอย่าให้มันลึกจนเกินไป (มีคอนโทรลซ้อนกันอยู่มากมายก่ายกอง) เพราะมันจะช้าครับ

ผมมีโปรเจคที่ใช้กราฟฟิคเยอะมากๆ อยู่ โดยมี Canvas ซ้อนกันกว่า 500 ชั้น (ย้ำว่า ซ้อนกันนะครับ ไม่ใช้ Canvas อยู่ใน Canvas) และภายใน Canvas มีวัตถุอื่นๆ อยู่ภายใน แล้วทั้งหมดนี้ วาดอยู่บนพื้นผิวที่เป็นแผนที่อีกทอด จากการใช้งาน ก็สามารถทำงานได้เป็นที่น่าพอใจครับ ลูกค้าก็พอใจกับผลงานที่ออกมา

ตาคุณบ้าง

คุณมีข้อเสนอ หรือความเห็นอย่างไรบ้างครับ? มาคอมเม้นกันได้นะ มาแลกเปลี่ยนกันครับ

ใช้ SSD หรือเปล่า? มาเร่งความเร็ว SSD กันเถอะ

นันคอม — Wed, 29 Apr 2009 14:38:41 GMT

SSD มีข้อจำกัดอย่างหนึ่งคือ จะทำงานได้ช้ามากในความเร็วระดับ KB แทนที่จะเป็น MB (หรือช้าลงหลายพันเท่าเลยทีเดียว) เวลาเขียนไฟล์เล็กๆ โดยเฉพาะอย่างยิ่ง SSD แบบ MLC ที่พบได้ใน Netbook ทั่วไปอย่างเช่น AspireOne A110 หรือ Dell Mini แต่ปัญหาเหล่านั้นกำลังจะหมดไป เพราะมีโปรแกรมเมอร์สมองใส คิด Filter Driver มาลงแทน Driver “Disk Drive” ธรรมดา ที่ Windows ลงให้ พร้อมสร้าง Write Buffer ขนาด 32MB ให้เราแล้วครับ!!!

ผลที่ได้ ก็คือ…

Before

After

นอกจากนีั ยังมีเวอร์ชั่นสำหรับ SD Card ด้วยครับ ซึ่งถ้าคุณทำตาม ไกด์ที่ผมเขียนไว้ ก็จะเห็นว่าผมได้ย้าย Profile ไปที่ Drive D ซึ่งอยู่บน SD Card ที่จำลองเป็น Harddisk

อย่ารอช้าครับ ดาวน์โหลดได้เลย:

For SSD: http://zflashpoint.blogspot.com/2009/04/flashpoint-beta4-is-uploaded.html

For SDcard: http://zflashpoint.blogspot.com/2009/04/usbfp-fixed-disk-emulation-version-is.html

ลง Windows 7 (หรือ Vista) บน SSD + โปรแกรม แบบไม่ต้องรอข้ามคืน (เทคนิคการทำเครื่องต้นฉบับสำหรับ Ghost จาก Virtual Machine และ Ghost ผ่าน Network)

นันคอม — Wed, 22 Apr 2009 20:34:00 GMT

สวัสดีครับ จากบทความก่อนหน้านี้ที่ผมได้พูดคุยถึงเรื่องการ Tweak Windows 7 ให้ใช้งานบน SSD ของ Acer Aspire One ได้เป็นอย่างดี โดยไม่ช้ามาก และด้วยช่วงเวลาที่ Windows 7 จะออก RC (Release Candidate = เกือบขายได้แล้ว) เร็วๆ นี้ ผมเลยเอาเทคนิคการลง Windows 7 บน Aspire One 110L ที่ใช้ SSD สุดเต่าขนาด 8GB ซึ่งอาจจะใช้เวลาหลายวันกว่าจะลงโปรแกรมได้ครบ เทคนิคที่ผมเอามาฝากนี้ จะเอาไปประยุกต์เป็นเตรียมเครื่องที่จะเป็น Master สำหรับ Ghost ไปลงในบริษัทหรือห้องคอมก็ได้ ไม่ว่ากัน อ้อ ใช้ได้ทั้ง XP/Vista และ Windows 7 นะครับ

สิ่งที่ต้องใช้

แผ่น Windows XP SP2 หรือ SP3 เราจะใช้แผ่นนี้ในการทำแผ่นบูตเครื่องด้วย CD/USB Flash Drive ตอนหลังครับ
PE Builder ของนายเทพ Bart ครับ เอาไว้สร้างแผ่น Windows PE จาก Windows XP
ไฟล์ Ghost32.exe จาก Norton Ghost ครับ ลองพยายามหาดูนะ มีเยอะแยะ
สำหรับ Windows 7/Windows Vista ดาวน์โหลด vLite เวอร์ชั่นเก่า (1.1.1) และเวอร์ชั่นล่าสุด ใช้ทั้งสองอันครับ
สำหรับ Windows XP ดาวน์โหลด nLite แล้วประยุกต์วิธีการตามได้ครับ
ไฟล์ Setting ของ vLite
Driver ของ Aspire One สำหรับ Windows XP โดยเฉพาะ Wireless Lan และ Card Reader และ Driver อุปกรณ์อื่นๆ ที่อาจจะนำมาต่อกับเจ้า Aspire One
.NET Framework 2.0++ ถ้าลง MSN Messenger เวอร์ชั่นใหม่แล้ว มันมีในตัวแล้วครับ
Windows Addon Installer ถ้าไม่อยากลงโปรแกรมเอง หรือแผ่นโปรแกรมอื่นๆ
Sun VirtualBox โปรแกรมจำลองเครื่อง (VM) เร็ว + ฟีเจอร์ระดับ VMWare แต่ฟรี และถูกลิขสิทธิ์
IpsMigrationPlugin.dll หรือ จากนี่
Harddisk External หรือ Thumb Drive ขนาด > 4GB
สาย LAN แบบ Cross ถ้าเป็นไปได้ หรือ สายแลนธรรมดาเนี่ยแหละ เครื่องสมัยนี้มักจะมีระบบ Auto-Sensing ได้อยู่แล้ว
เวลาราว 1-2 ชั่วโมง

ขั้นแรก เตรียมแผ่น Windows

เนื่องจากน้องวรรณเรามีที่่ค่อนข้างจำกัด แค่ 8GB ในการจะกระเบียดกระเสียนลง Windows 7/Vista Ultimate ลงไปแบบเต็มๆ เลย ถึงแม้จะทำได้ ก็คงเหลือที่ลงโปรแกรมอีกไม่เท่าไหร่ เราจึงจำเป็นต้องทำการตัดฟีเจอร์บางส่วนออกไป ให้มันสามารถลงได้ ซึ่งบางทีซะ เทียบกับที่เราตัดไปนี่ เหมือนลง Windows Home Basic ที่ตีตราเป็น Ultimate เลยละ แต่เอาเถอะ ไม่งั้น ที่ไม่พอครับ!

ขั้นตอนแรกเลย ลง vLite เวอร์ชั่นเก่าก่อน ทำไมต้องใช้เวร์ชั่นเก่า? เพราะเวอร์ชั่นเก่ามี Driver ที่จำเป็นอยู่ครับ ซึ่ง Microsoft เรียกร้องให้คนทำเขาเอาออกไปในเวอร์ชั่นใหม่
ลง vLite เวอร์ชั่นใหม่ ทับไปเลยที่เดิม ไม่ต้องสนใจ
ทำการ Copy ไฟล์ Works.ini ไปไว้ในโฟลเดอร์ C:\Program Files\vLite\Presets หรือ C:\Program Files(x86)\vLite\Presets ครับ ถ้าใช้ Windows 64-bit
จากนั้น เปิดโปรแกรม vLite ขึ้นมา จะเป็นหน้าจอถามให้เราลง WIM Filter Driver ก็กดลงเลยครับ แล้วจะได้หน้าจอแบบนี้ ก็จัดการ Mount แผ่นจากไฟล์ ISO ด้วยโปรแกรม Daemon Tools หรือ จะเอาแผ่น Windows ใส่ไปเลยก็ได้ครับ ไม่ควรเป็น Windows ที่โมมาแล้ว อย่าง Dark Edition หรืออะไรแบบนี้เป็นอันขาด อาจจะใช้ไม่ได้นะ แล้ว Browse ไปที่ตัวแผ่นเลย

กด OK แล้วเลือกโฟลเดอร์ที่จะใช้ Copy File ไปเก็บไว้ ถ้ามี HDD External แนะนำให้ใส่ไว้ในนั้นเลยครับ
เมื่อ vLite Copy ไฟล์ให้เสร็จแล้ว จะมี Edition ให้เลือกครับ ถ้าเป็น Windows 7 ต้องเลือก Ultimate เท่านั้น เพราะ Key ฟรี เป็นของ Ultimate ครับ ส่วน Windows Vista แนะนำให้เลือก Home Premium ครับ
จากนั้นกด Next แล้ว vLite จะถามว่า เราจะทำอะไรบ้าง เลือกตามตัวอย่างครับ (ถ้าเป็น nLite สามารถ Integrate พวก Addonได้เลย ในขั้นตอน Integration นะครับ)
ทำการแตกไฟล์ Driver ไว้ใน Folder เดียวกัน ดังรูป แต่ ห้ามนำ Driver Touchpad Integrate ไปด้วยเด็ดขาดครับ!
ในหน้านี้ มาที่แถบ Driver กดปุ่ม Insert แล้วเลือก Multiple Driver Folder จากนั้น Browse ไปที่โฟลเดอร์ที่แตกไฟล์ไว้ จากนั้นก็เลือก Driver ที่จะ Integrate ครับ
จากนั้น ไปที่ขั้นตอน Components ได้เลย เมื่ออยู่ในหน้านั้นแล้ว กดโหลด Preset จากเมนูเลยครับ
อย่าไปเพิ่ม หรือลบอะไรมากนักนะครับ การทำเครื่องหมายถูกคือการ “เอาออก” ครับ โดยเฉพาะพวก System ทั้งหลาย แต่สิ่งที่ไปเอาเครื่องหมายถูกออกได้คือพวก ที่อยู่ใน Accessories ทั้งหลาย และ Media Center ครับ เช่น
- Games
- Media Center (โปรแกรมดูหนังฟังเพลง แบบเทพมากและไฮโซมาก ไม่ค่อยเจอคนรู้จักเล่นเท่าไหร่เลยนะ แต่ฮิตมากในบางประเทศ)
- Paint
ไปที่หน้า Tweak เลย โหลด Preset เลยเหมือนกัน ไม่ชอบอะไรตรงไหน เปลี่ยนได้ครับ ไม่ว่ากัน สิ่งที่อาจเปลี่ยนได้ คือ
- UAC ถ้าอยากปิดไว้แต่ต้น (แต่ผมจะปิดไว้ก่อน เวลาลงโปรแกรมจะได้ไม่ต้องถามให้รำคาญ)
- DEP จะเลือก Default ก็ได้ครับ จะเป็นการเปิดการกันรอยรั่ว แต่ส่วนมากแล้วจะทำให้เกมที่ ใช้ยาแก้ไอใช้ไม่ได้
- Paging Executive คือการบังคับให้ Kernel Memory อยู่ในแรมเท่านั้น ห้าม Page ลง Disk ช่วยให้เร็วขึ้นได้หน่อยนึง
จากนั้น กด Apply ได้เลย เลือก Save Changes Only เพื่อความรวดเร็ว และไม่ต้องไป Delete อะไรครับ มันช้า Continue ผ่านไปได้เลย จากนั้น รอไม่เกิน 3-5 นาที ก็เรียบร้อย Next ต่อได้
จากนั้น เราจะทำให้มันเป็น ISO เพื่อใช้ติดตั้งลงใน VirtualBox ครับ เริ่มนึกภาพออกหรือยังว่าเราจะทำอะไร ;) เลือก Mode เป็น Create Image นะครับ

(ถ้ามี HDD External แนะนำให้เซฟ ISO ไว้ในเครื่องครับ แล้วค่อยเล่น VM บน HDD External มันจะได้ไม่กวนเครื่องมากนักเวลามันทำงาน แล้วลงได้เร็วกว่าด้วย) หลังจากรอสักพัก ก็ได้แล้วครับ ผลงานของเรา

ติดตั้งใน VirtualBox

เมื่อพร้อมแล้ว ก็ลง VirtualBox ได้เลยครับ หน้าตา VirtualBox จะเป็นประมาณนี้

กด New เพื่อสร้าง VM ใหม่ได้เลยครับ เลือก OS ให้ตรงกับที่เราจะใช้ ให้แรมมันไปสัก 768MB – 1024MB ได้จะดีมากครับ

เมื่อถึงขั้นตอนการสร้าง Virtual Harddisk ก็กด New แล้วเลือก Dynamic ให้พืนที่ไป 7.51GB ก็จะเท่ากับ SSD น้องวรรณเราพอดี แต่จะให้ใหญ่กว่าก็ได้ครับ อย่างผมจะลง Visual Studio 2008+SP1 ด้วย ต้องใช้ที่เยอะกว่า 8GB เวลาลง ที่สำคัญคือ อย่าลืมเปลี่ยนที่เซฟไฟล์ ถ้าเป็นไปได้ ควรเซฟไว้ที่ HDD External ครับ

หลังจากจบ Wizard แล้ว มาเปลี่ยน Setting นิดหน่อยครับ

อย่างแรกเลย เราจะเปลี่ยนที่เซฟ Snapshot ครับ มันควรจะอยู่ใน HDD External ไม่งั้นมันจะเซฟรวมไว้ใน My Document ครับ ถ้าเครื่องสามารถกากบาท VT-X/AMD-V, Nested Paging ได้ ก็อย่าลืมกากบาทด้วย

ในหน้า CD-ROM ก็ทำการ Mount แผ่น Windows ที่ทำไว้ได้เลย

ในหน้า Network เปลี่ยนจาก NAT เป็น Adapter Type เป็น AMD PCNET Fast III ครับ

อย่าลืม Enable USB ด้วยละครับ

และตรงไหนที่เก็บไฟล์โปรแกรมไว้ ก็ Share ไว้เลยครับ

เรียบร้อยแล้วก็สั่ง Start ได้เลยครับ จากนั้น เครื่องก็จะบูตเข้า การ Setup Windows ก็ติดตั้งตามปกติเลยครับ ถ้าเอาเมาส์คลิ๊กเข้าไปในหน้าต่างแล้ว มันจะล็อคไว้ ให้กดปุ่มคอนโทรล (Ctrl) ทางขวามือ เพื่อปลดเมาส์ออกมาครับ

เตรียมแผ่น PE เพื่อบูต

ระหว่างที่ Windows ติดตั้งอยู่ เราก็จะทำอย่างอื่นไปด้วยระหว่างรอ นั่นก็คือ การทำแผ่น PE ครับ ถ้าเรามีแผ่น PE แล้ว เราก็สามารถเปิด Aspire One พร้อมกับเครื่อง VM แล้ว Ghost ข้าม Network ได้เลย หรือจะ Ghost ใส่ HDD External โดยการเสียบ USB กับ VM ก็ได้ แจ่มมั๊ยละครับ

หลังจากได้ PEBuilder มาแล้วให้แตกไฟล์ แล้วไปดูใน Folder Plugin ครับ จะมี Folder ชื่อ ghost8 อยู่ เอาไฟล์ Ghost32 ใส่ไปในนั้น

แล้วก็แตกไฟล์การ์ดแลนของ Aspire one ใส่ใน Folder Driver ด้วย

จากนั้น เปิดไฟล์ PE Builder แล้วกดดูที่ปุ่ม Plugins ดูให้แน่ใจว่า Ghost มัน Enable แล้ว ก็ไปต่อได้เลยครับ

โปรแกรม Bartpe ไม่มีอะไรมากมายครับ แค่ใส่ค่าแล้วกด Build เฉยๆ ก็จะได้ ISO มาแล้ว เอาไป Burn ลงแผ่นได้เลย เราก็จะได้แผ่น Boot PE แล้วครับ

สำหรับท่านที่ไม่มี External DVD Writer มันจะมีวีธีเอาลง USB อยู่ครับ แต่ว่าผมขอข้ามไปก่อนนะ เดี๋ยวกลับมา Update พอดีดึกมากแล้วตอนนี้ อยากเขียนให้เสร็จ

ติดตั้งเครื่อง

เมื่อ Setup เสร็จ จนเห็นปลากัดแล้ว ก็ทำการลง Virtual Machine Addition ครับ เพื่อให้การทำงานของเราง่ายขึ้น หรือถ้าอยากได้เครื่องแบบคลีนๆ เลย จะไม่ลงก็ได้ แต่เวลาใช้ก็จะลำบากขึ้นหน่อยนึง หรืออาจจะไม่มี Driver

จากนั้น หลังจากลงเสร็จแล้ว ก็เป็นเวลาที่ดีที่จะเก็บ Snapshot เครื่องไว้ครับ ถ้าเกิดว่าเราทำอะไรพังไป ก็สามารถใช้หน้า Snapshot เพื่อย้อนเวลากลับมาได้เสมอ เพราะฉะนั้น ลองเล่น ลองลงอะไรได้ตามใจชอบครับ

อ้อแนะนำว่า จะใช้อุปกร์อะไร ก็จับมาต่อให้หมดครับ อุปกรณ์ USB สามารถต่อไปที่ VM ได้เหมือนปกติเลยครับ

เตรียม Ghost

ขั้นแรก เอาไฟล์ IpsMigrationPlugin.dll ใส่ไว้ใน C:\Program Files\Common Files\Microsoft Shared\ink ก่อนครับ

จากนั้น ก็อย่าลืม Remove Guest Addition ออกก่อนละครับ เพราะเราจะพามันไปเครื่องจริงแล้ว

เสร็จ Snapshot อีกครั้ง ชื่อว่า Just Before Sysprep กันพลาด เพราะพลาดแล้ว เครื่องมักจะพังเลย ต้องทำใหม่หมด

Sysprep คือกระบวนการในการเตรียมเครื่อง เพื่อสร้าง Image ครับ ระบบนี้จะทำให้วินโดวส์กลับสู่สภาพ เหมือนลงใหม่อีกครั้ง ซึ่ง Windows จะทำการ Detect Hardware ใหม่ ถาม User/Password TimeZone อะไรพวกนั้นใหม่หมดเลย แล้วสามารถนำไปลงได้ทุกเครื่้องได้อย่างไม่มีปัญหา เพราะอันที่จริง Vista/7 ตอนที่ Microsoft เขาทำแผ่นให้เรา เขาก็ใช้ไอ้ Sysprep นี่ละครับ (ถ้า Windows XP จะต้องลง Driver IDE Controller ให้ครบ จึงจะบูตได้ครับ ลองดูจากโพสนี้ และ XP ก็มี Sysprep เหมือนกัน)

เข้าไปเช็คด้วยว่า เซอร์วิส Windows Media Sharing ไม่ได้รันอยู่ โดยการคลิ๊กขวาที่คำว่า Computer ใน Start Menu แล้วเลือก Manage ถ้ารันอยู่ กด Stop ก่อนครับ

เมื่อพร้อมแล้ว Start –> cmd แล้วรันแบบ Admin ครับ

พิมพ์ว่า

cd sysprep กด Enter

sysprep กด Enter

จะได้หน้าจอดังภาพ เลือกคำสั่งตามในรูป แล้วก็เริ่มได้เลยครับ

เมื่อเสร็จแล้ว โปรแกรมจะปิดไป เราก็ไปเปลี่ยนแผ่น CD เป็น pe.iso ที่เราสร้างรอไว้

แล้วสั่ง Restart เครื่องเลยครับ เราพร้อมเริ่มขั้นต่อไปแล้ว

เริ่ม Ghost กันเลย

หลังจาก VM Restart ก็ให้กด F12 แล้วเลือกบูตจาก CD ครับ พอเข้า VM ได้ ก็จะได้คำถามว่า จะ Start Network หรือเปล่า แน่นอนครับว่า Start แล้วเลือก Manual นะครับ

ทางฝั่ง Aspire One ก็ทำแบบเดียวกัน แล้วก็เสียบสายแลนกับเครื่องที่เราทำ VM อยู่ด้วยครับ

หลังจากทำงานสักพัก มันจะเสนอให้ใช้ IP 192.168.0.240 ครับ เครื่อง VM ให้ตั้งเป็น 192.168.0.240 ส่วน Aspire One ตั้งเป็น 192.168.0.241 แล้วกัน (มันอาจจะบอกว่า IP ชนกัน ไม่ต้องสนใจครับ)

เรียบร้อยแล้ว ใช้โปรแกรม A43 เข้าไปหาไฟล์ Ghost32 ในแผ่นแล้วเปิดมันขึ้นมา ทั้งใน VM และ AspireOne ครับ

จากนั้น ให้เครื่อง AspireOne เป็น Slave

ส่วน VM เป็น Master แล้วใส่ IP ของ AspireOne ลงไป

ทางฝั่ง AspireOne (Slave) จะเห็นแบบนี้

ส่วนทางฝั่ง VM จะเห็นเหมือน Ghost ปกติ ก็เลือก Disk To Disk เลยครับ จะเป็นการ Clone จาก VM ไปยัง AspireOne ผ่านสายแลน

จัดการแบ่ง Partition ให้ลงตัว

เรียบร้อยครับ ข้อมูลก็จะโดนถ่ายจาก VM ไปยัง Aspire One แล้ว

แน่นอนว่า จะใช้การทำ Image เก็บใน Shared Folder ก็ได้นะครับ เราต่อแลนได้แล้วนี่!

สงท้าย

เอาละครับ หวังว่าโพสนี้ น่าจะเป็นประโยชน์กับทุกๆ ท่าน ทั้งคนที่ใช้ AspireOne และไม่ได้ใช้ AspireOne ให้มีของเล่นเยอะขึ้น โดนเฉพาะคนทำงานห้องคอม (ผมเข้าใจดีมากๆ) คงจะมีอาวุธใหม่ในการทำงานให้เสร็จเร็วขึ้น สำหรับตอนนี้ ราตรีสวัสดิ์ก่อนครับ

เรื่องเล่าจากเดี่ยวโปรแกรมเมอร์ (ตอนที่ 2)

นันคอม — Tue, 24 Mar 2009 17:14:25 GMT

เมื่อเกือบปีหนึ่งมาแล้ว ผมได้แปลบทความชื่อว่า เรื่องเล่าจากเดี่ยวโปรแกรมเมอร์ไว้ ในสไตล์เล่าให้เพื่อนฟังกันขำๆ และผมได้แปลไว้จนถึงตอนที่ผู้เขียนเล่าถึงประสบการณ์และคำแนะนำต่างๆ ซึ่งยังเหลืออีกกว่าครึ่ง ที่ผมยังไม่ได้ขึ้นมาสานต่อ จนกระทั่งผมเอง ก็ลืมมันไปในที่สุด (แหะๆ) จนเมื่อตอนที่ผมแก้ Layout ให้ระบบมันแสดงบทความยาวขึ้นนี่ละครับ ปรากฏว่า บทความนี้ ถูกดึงขึ้นมาเป็นบทความท้ายสุดพอดี (ซึ่งตอนนี้ ก็โดนดันลงไปอีกแล้ว) ผมจึงได้ระลึกถึงมันขึ้นมาได้ เพราะผมเอง ก็ยังอ่านไม่จบเหมือนกัน (ใช้เวลาอ่านมากว่า 7 ปีแล้วเนี่ย!!!)

สำหรับบทความในตอนแรก อยู่ที่ http://coresharp.net/blogs/article/archive/2008/04/10/178.aspx ครับ ผมกะว่า จะแบ่งเป็นทั้งหมด 4 ตอน ตอนนี้ก็จะเป็นครึ่งหลัง ของ ”เรื่องเล่า” ในภาคไม่เกี่ยวกับเทคนิค ของผู้เขียนเขาครับ

---- ตอนที่ 2 ---

โปรแกรมเมอร์ที่ดี ต้องนอนแต่หัวค่ำ

ผู้เขียนทำงานล่วงเวลาอยู่บ่อยครั้ง บางครั้งก็ดึกมาก บางครั้งก็ยันสว่าง บางครั้ง สว่างไปสองครั้งแล้ว งานก็ยังไม่เสร็จ บางครั้ง มันก็เป็นเรื่องที่ช่วยไม่ได้จริงๆ แต่พอลองมองย้อนกลับมาดู ก็พบว่า จริงๆ แล้ว มันก็เป็นความผิดพลาดของผู้เขียนเองนั่นแหละ และถ้าผู้เขียนได้วางแผนดีๆ ตั้งแต่แรก งานล่วงเวลา(ฟรี) พวกนี้ ก็ไม่จำเป็นเลย

จากการวิเคราะห์อย่างเป็นกลางที่สุดเท่าที่ผู้เขียนจะกลางได้ ก็สรุปได้ว่า ปัญหาอาการนอนไม่หลับ (เพราะหลับไม่ได้) นี้ เกิดจาก:

ไม่ได้”สร้างความคาดหวัง” ที่ถูกต้องไว้กับลูกค้า
มัวแต่”เจิม”/”ปิดทอง” (ใส่อะไรที่ไม่จำเป็น/ลองนู่นลองนี่)
เทสงานไม่พอ

ปัญหาหนึ่งของการทำงานล่วงเวลาก็คือ มันจะกินเวลาชีวิตส่วนตัวคุณไป แถมยังทำให้เกิดนิสัยไม่ดีด้วย ไม่ดีที่ว่านี้ คือไม่ดีกับตัวเราเองนี่แหละ อย่างเช่นมีครั้งหนึ่งที่ผู้เขียนบอกกับตัวเองว่า จะต้องทำฟีเจอร์นี้ให้ทันวันจันทร์เช้า!…แล้วถ้าไม่ทำตอนกลางคืน มันจะไปเสร็จตอนเช้าได้ยังไงละ!

นอกจากนี้ ปัญหาสำคัญที่สุดของการทำงานดึกๆ ก็คือ ยิ่งดึก คุณภาพก็ยิ่งด้อยลง ทั้งสาเหตุจากจิตใต้สำนึกที่อยากจะนอนเต็มที และความรีบด้วยประกอบกัน และเมื่อผู้เขียนทราบถึงปัญญาเหล่านี้แล้ว ผู้เขียนก็ลงมือจัดการกับมันทันที โดยการเปลี่ยนแปลงเหล่านี้

ไม่พยายามตั้งเงื่อนเวลาเป็น “ตอนเช้า” โดยเฉพาะอย่างยิ่ง วันจันทร์ [ผู้แปล: ถ้าทำให้ทันวันจันทร์ ก็แสดงว่าต้องทำเสาร์-อาทิตย์ด้วยใช่ไหมละ]
ไม่เอาเวลาส่วนตัว หรือเวลาตอนกลางคืน รวมเข้าไปในการวางแผน คิดตามวันทำงานจริงๆ เท่านั้น
แบ่งเวลาให้ถูกต้อง ผู้เขียนจะคอยควบคุมเวลาการทานอาหารกลางวัน และเวลาเช็คเมล์ให้เหมาะสมในแต่ละวัน
ผู้เขียนจะใช้เวลาตอนเช้า ในการเขียนโปรแกรม และตอนบ่าย ในการเทส/ดีบัก

และที่สำคัญ อย่าลืมว่า เวลาส่วนตัวสำคัญเหมือนกัน แต่ก็ใช่ว่าจะเอาแต่เวลาส่วนตัวอย่างเดียว ถ้างานเร่งจริงๆ ก็พร้อมที่จะทำงานหามรุ่ง หามค่ำได้

[ผู้แปล: แม่ผมเองก็เคยบอกว่า ทำงานล่วงเวลามันมองได้สองด้าน ด้านที่ดีก็ดีไป ด้านที่ไม่ดีก็คือ เราทำงานไม่เสร็จหรือเปล่า ถึงต้องอยู่จนเย็น กลางวันมัวไปทำอะไรอยู่???]

สร้างความหวังที่เป็นไปได้…ด้วยการสื่อสารให้เข้าใจกัน

ผู้เขียนได้ร่วมงานกับคนที่มีเหตุผลมากๆ หลายคน แต่การที่คนเหล่านี้ เกิดไม่พอใจในผลงานของผู้เขียน ส่วนหนึ่งก็มาจากเรื่องความคาดหวังนี่เอง

มียู่ครั่งหนึ่งที่ผู้เขียนพยายามจะแสดงเดโมให้ลูกค้าดู ซึ่งยังเป็นโซลูชั่นที่ยังพัฒนาไม่เสร็จ การเดโมผ่านไปด้วยดี แต่ลูกค้าไม่ปลื้มด้วย เพราะเขาไม่เห็นฟีเจอร์ที่เขาสนใจอยากได้อยู่ในนั้น แถมยังเลยเถิดไปถึงการคิดไปถึงว่า เวลาที่ผู้เขียนใช้ไปกลับไม่ได้นำเอาไปสร้างฟีเจอร์ที่เขาต้องการ ซึ่งอันที่จริงแล้วมันก็ถูกต้อง เพราะลูกค้าเขาไม่ได้อยากเห็นโปรแกรม เขาอยากเห็นว่าเราเข้าใจปัญหาของเขา และเราสามารถแก้ปัญหาให้เขาได้มากกว่า การไปเดโมโปรแกรมให้เขาดูเร็วเกินไป ก็มีแต่จะทำให้ความคาดหวังที่เขาเคยมีในตัวเราเสียไปเท่านั้น

[ผู้แปล: ถึงตรงนี้ ผมก็นึกได้ว่า ตอนไปพบลูกค้ากับเจ้านาย แล้วผมบอกไปว่า ได้ทดลองทำเดโมมาแล้ว อยากจะโชว์หรือเปล่า เขาก็บอกผมมาว่า บางทีทำเร็วเกินไปก็ไม่ดีนะ เราจะไม่ได้ขายเอา….เพราะอะไรรู้ไหมครับ? หนึ่งในเทคนิคการขาย คือ การสร้างความคาดหวังไงครับ แล้วถ้าเรายังไม่รู้ว่าเขาต้องการอะไร แล้วไปโชว์เลย เขาก้ออาจจะเลยเถิดเข้าใจอะไรผิดไปได้]

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

ผมคือ Software Architect!

ในยุคที่เด็กๆ สามารถใส่โปรแกรม หุ่นยนต์เลโก้ได้อย่างทุกวันนี้ และ Source Code ก็มีให้ Copy อยู่ทั่วทุกหนแห่ง คำว่า “โปรแกรมเมอร์” แม้ว่ามันจะเข้าใจง่าย แ ต่คุณค่ามันก็ลดลงจากเมื่อก่อนแล้ว ผู้เขียนจึงพยายามเสาะแสวงหา ชื่อตำแหน่งที่สมศักดิ์ศรีเดี่ยวโปรแกรมเมอร์มาใช้ซักหน่อย และหนึ่งในนั้นคือ “Senior Software Architect” ซึ่งเป็นการดีด้วย เพราะมันคือการปูทางให้กับอนาคต ว่าที่สุดแล้ว คุณต้องการจะเป็นอะไร ในสายอาชีพ

และอีกนัยนึง ผมก็ไม่ใช่ “Computer Guy” ด้วย การมี title เริ่ดๆ แบบนี้ ก็สามารถกันคนที่จะเดินมาที่โต๊ะ เพื่อให้ช่วยฟอร์แมตเครื่อง หรือลงวินโดวส์ให้ เพราะนั่นจะทำให้ผู้เขียนไม่สามารถทำงานให้เสร็จลุล่วงได้ และยังทำให้เสียสมาธิอีกต่างหาก

[ผู้แปล: มีคนเคยบอกผมว่า อาชีพที่ตกต่ำที่สุดของเด็ก Com Sci คือ Programmer ครับ เพราะโดยเนื่องานแล้ว Programmer แค่ Code จริงๆ แทบไม่ได้คิดอะไรเลย…ในขณะที่เราเรียนกันมามากมาย ทั้งเรื่องการ Optimize Performance เรื่อง Data Structure อีกร้อยแปด…

การที่ผู้เขียนสามารถเรียกตัวเองแบบนั้นได้ ก็เพราะว่าเขาทำทุกอย่างครับ (จากที่เขาเล่านะ) ตั้งแต่ออกแบบ รวมไปถึงการคุยกับลูกค้า ซึ่งก็ไม่แปลกเลย เพราะนี่คืองาน Architect เลยละ]

------

สำหรับวันนี้ ขอพอแค่นี้ก่อนครับ ไว้โอกาสหน้า ผมจะมาแปลให้อ่านกันต่อ ในส่วนต่อไป ซึ่งจะเป็นเรื่อง Technical แล้วละ นอกจากนี้ ผู้เขียนเขายังมีบทความน่าอ่านอีกหลายร้อยหน้าเลย (เขาเขียนอยู่กี่ปีแล้วเนี่ย!) ถ้าสนใจ ลองตามไปอ่านได้ครับ

http://www.codeproject.com/script/Articles/MemberArticles.aspx?amid=8976

โหลดบิต ปิดเครื่อง ด้วย WiFi Router + ดูทีวี BuddyBB ได้ (ตอนที่ 1)

นันคอม — Tue, 24 Mar 2009 15:47:34 GMT

ผมว่าเรื่องที่ผมกำลังจะเขียนนี่คงจะเก่าแล้วละ เพราะเขาเล่นกันมานานแล้ว และผมเองก็เล่นมาเกินสองปีแล้วเหมือนกัน แต่ส่วนหนึ่งที่ผมตัดสินใจเขียน คือ เผื่อผมจะเก็บไว้ดูเองด้วยครับ เพราะเมื่อไม่นานนี้ ผมทดลอง Firmware ตัวใหม่ไป แล้วปรากฏว่ามันไม่ Work แล้วพอเอาตัวเก่ามาลง ก็ปรากฏว่าจำไม่ได้แล้วว่าทำอะไรไปบ้าง (เล่นนานจนลืม) ดังนั้น มาเริ่ม Set Router ใหม่ พร้อมกับผมเลยแล้วกัน :) สำหรับ Router ของผมคือ ASUS WL-500g Premium V แรก ครับ สำหรับผู้ที่ใช้รุ่นอื่น ลองดูได้ว่า Firmware ที่ผมใช้ รุ่นของคุณ สามารถลงได้หรือไม่ ได้จากใน WiKi เขาครับ

* Bittorrent เป็นโปรโตคอลสำหรับแลกเปลี่ยนไฟล์ แต่ไฟล์บางไฟล์ ก็มีลิขสิทธิ์ ดังนั้น ผมไม่สามารถรับผิดชอบต่อการละเมดลิขสิทธิ์ใดๆ ที่อาจเกิดขึ้นได้ จากการใช้ขั้นตอนเหล่านี้นะครับ

* การ Flash Router มีความเสี่ยงต่อการเสียหาย หรือการหมดการรับประกันได้ ถ้าทำพัง ก็ตัวใครตัวมันนะครับ อิอิ

สรุปความต้องการ

สำหรับสิ่งที่ผมต้องการให้ Router ทำได้ ก็มีตามนี้ครับ…สรุปเป็นตารางให้สวยงามซะเลย ซึ่งก็ต้องมีของที่ใช้คู่กันอยู่ด้วย ดาวน์โหลด และเตรียมโปรแกรมให้พร้อมเลยครับ

คุณสมบัติ	สิ่งที่ต้องใช้/ทำ
1) ลงโปรแกรมได้	X-Wrt OpenWRT Firmware สำหรับ ASUS WL-500gP แบบ xtra Thumb Drive เก่าๆ 1 ตัว สำหรับลงโปรแกรม มีที่ราวๆ 256MB กำลังดี สายแลน สำหรับต่อตรงกับ Router
2) Web Server, FTP	Web Server (มีในตัว) vsftpd สำหรับ FTP
3) ต่อ Harddisk USB และแชร์ไฟล์	Samba Server (มีในตัว) และ Harddisk ว่างๆ ซักลูก ที่ Format ด้วย Ext3 ต้องใช้แผนบูต Linux และ Virtual Machine ดีๆ สักตัวที่ต่อ USB ได้ อย่าง VirtualBox หรือ VMWare Player ในการเตรียม
4) โหลดบิต	MLDonkey ที่รัน บน Router และ Sancho สำหรับควบคุมจาก PC
5) ดูทีวี BuddyBB ได้	แบ่ง VLAN
6) SSH/Server	Putty.exe ใช้ในการต่อเข้าไป

หลังจากเตรียมโหลด/ลงโปรแกรมพร้อมแล้ว ขอบอกย้ำอีกครั้ง ว่าผมต่อ ADSL ในบ้านแบบนี้นะครับ (ภาพเดียวกัน กับในหน้า CaptureBuddy) เพราะผมจะอัดรายการทีวีด้วย เลยต้องเอาคอม ไปอยู่ VLAN เดียวกับ Set Top Box (วง WAN) ครับ

ก็ได้เวลาเริ่มกันละ

เตรียม Harddisk และ Thumb Drive

หลังจากเราได้ไฟล์ slax-6.0.9.iso มาแล้ว เราก็ตั้งให้ Virtual Machine บูตจากแผ่นนี้ เพื่อเข้า Linux ครับ อันนี้สุดแล้วแต่ว่าคุณจะใช้ VM ตัวไหน ถ้าใช้ VMWare Player สามารถไปที่เว็บไซต์ www.easy-vmx.com เพื่อสร้าง Virtual Machine ได้ครับ เนื่องจากตัว Player จะไม่สามารถสร้างให้เราได้ (ก็มันชื่อ Player นี่เนาะ)

เมื่อบูตได้ จะเจอกับหน้าจอประมาณนี้ครับ สามารถปล่อยให้มัน Auto เปิดให้เราเลยได้ หรือถ้าขี้เกียจรอ ก็เลือกอันแรกครับ

เมื่อบูตเสร็จ (สังเกตว่าเร็วมาก เหอๆ) ก็ต่อ Flash Drive และเข้ากับ VM ได้เลย อันนี้แล้วแต่ VM ที่คุณใช้ครับ แต่ยังไงซะ ก็ต้องเสียบกับเครืองเราจริงๆ เนี่ยแหละ

เมื่อ VM มองเห็นแล้ว KDE มันจะขึ้นหน้าต่างคล้ายๆ Windows มาถามครับ ให้ตอบ Cancel ไปเลย

แล้วไปกดที่ปุ่ม Terminal เพื่อเปิด Terminal ขึ้นมาครับ เมื่อเปิดได้แล้ว พิมพ์ fdisk –l เพื่อดูว่า Flash Drive เรา มันอยู่ที่ Path ไหน ใน Slax เพื่อที่เราจะได้ใช้ Fdisk เปิดดูได้ถูก (อย่าตกใจครับ ผมไม่ได้มี Flash Drive 32GB หรอก เหอๆ เพื่อนซื้อมาฝากจากเซินเจ้นครับ ใช้ได้จริงๆ ราว 512MB :P)

เมื่อรู้แล้ว ก็อย่ารอช้าครับ พิมพ์ว่า fdisk /dev/sdb ได้เลย

พอได้แล้ว เราจะลบทุกสิ่งอย่างในตัวมันครับ ให้พิมพ์ o (ตัว โอ) แล้วกด Enter โปรแกรมก็จะตอบมาแบบนี้

กด n เพื่อสร้าง Partition ใหม่

ตอบว่า p เพื่อเลือก Primary Partition

และตอบว่า 1 เพื่อสร้าง Primary Partition ที่ 1

และตอบ 1 อีกที เพื่อสร้าง Parition ตั้งแต่ Cylinder แรก

จากนั้นตอบ +128M เพื่อสร้าง Parition ขนาด 128MB สำหรับ Partition นี้ เราจะเอาไว้ทำ Swap ครับ เพราะการทำงานที่เราจะให้ Router ทำ มันกินแรมเยอะมาก มีแค่ 32MB คงจะไม่ไหว

จากนั้น ทำแบบนี้ซ้ำอีกครั้ง เพื่อสร้าง Partition ที่ 2 สำหรับลงโปรแกรม สำหรับครั้งนี้ เราสามารถกด Enter ผ่านไปหมดได้เลย และใช้ค่า Default ซึ่งจะทำให้เราได้ Parition 2 ที่เต็มพื้นที่ที่เหลือพอดี

จากนั้น กด w เพื่อเขียน Parition ลง Flash Drive ซึ่งก็จะได้คำตอบ ประมาณนี้ครับ

เมื่อสร้าง Partition แล้ว เราก็ต้อง Format ครับ สำหรับ Parition แรก คือ Swap ให้ใช้คำสั่ง mkswap /dev/sdb1 ก็ทำได้โดยการใช้คำสั่ง ส่วน Partition ที่ใช้เก็บไฟล์ เราจะใช้เป็น ext3 ซึ่งก็คือคำสั่ง mke2fs –j /dev/sdb2 (ถ้าไม่แน่ใจว่าคือ Parition อะไรบ้าง ลองใช้ fdisk-l ดูได้ครับ)

เมื่อเรียบร้อยแล้ว ก็ทำแบบเดียวกัน กับ Harddisk External ครับ แต่เราใช้แค่ Partition เดียวแบบ Ext3 ก็พอ

เตรียม Router

สำหรับตัว Router การที่จะ Flash Firmware ด้วยวิธีที่ปลอดภัยที่สุด ก็คือใช้โปรแกรม TFTP ครับ ถ้าใน Windows XP จะมีอยู่แล้ว แต่ถ้าใน Windows Vista/Windows 7 จะต้องไปเปิด Feature เพิ่ม ซึ่งผมว่า โหลดของฟรีมาใช้จะง่ายกว่า และเร็วด้วย :)

(สำหรับรุ่นอื่นๆ ลองดูใน Wiki นะครับ ว่าจะต้องทำยังไง หรือจะลอง Update โดยใช้ Web Interface ของตัว Router ก็ได้ครับ)

ก่อนอื่นเลย เราต้องเปลี่ยนโหมดให้ Router มันเข้า Safe Mode ก่อนครับ (ไม่รู้จะเรียกยังไงดี) ในโหมดนี้ Router จะไม่แจก IP แต่จะตั้ง IP ตัวเองเป็น 192.168.1.1 (หรือ IP ที่เคยตั้งไว้) และรอรับการเชื่อมต่อ TFTP เพื่อ Upload Firmware อย่างเดียว และ Ethernet Port เบอร์ 1 จะเป็น Port เดียวที่ใช้ได้ครับ

ในการเซ็ตให้ Router เข้าโหมดนี้ เราจะต้องถอดปลั๊ก Router ก่อน แล้วหาดินสอ/ปากกามาแท่งนึงครับ จิ้มไปตรงปุ่ม Reset แล้วจิ้มค้างไว้ ในขณะที่เสียบสายไว้เข้าเครื่องด้วย ถ้าทำถูกต้อง ไฟสัญญาณแสดงว่าเปิดเครื่อง จะกระกริบครับ

ดังนั้น เราก็ต้องไปตั้ง IP ของการ์ดแลน ใน Windows ให้เป็น 192.168.1.2/255.255.255.0 (หรือ IP เดิมที่เคยใช้ได้) อย่าลืมเสียบสายแลนเข้า Port 1ด้วยละครับ

เพื่อความง่าย ผมแนะนำให้ Copy ตัว Firmware ไปไว้ที่ Drive C: ก่อน (หรือ Drive อะไรก็ได้ที่มี) รวมไปถึงโปรแกรม tftp ด้วยครับ เอาไว้ที่เดียวกันเลย จากนั้นก็เข้า Command Prompt เลยครับ โดยการกดปุ่ม Windows พร้อมกับปุ่ม R แล้วพิมพ์ในช่องว่า cmd

ใน Command Prompt เราก็พิมพ์ว่า

c: (หรือ d:. e: ตามแต่ Drive ของคุณ)

tftp -i 192.168.1.1 put "openwrt.XXXX.trx"

หลังจากนั้น ทุกอย่างจะตกอยู่ในความสงบชัวครู่ แล้วก็จะมีข้อความว่า การส่งข้อมูลสำเร็จ ถึงตรงนี้ ไปให้ไกลๆ จาก Router เลยครับ อย่าไปมอง อย่าไปสนใจมัน อย่างน้อย 10 นาที เพื่อความชัวร์ พอกลับมาดู สัญญาณไฟที่เคยกระพริบ มันจะหยุดครับ นั่นคือ เราได้ทำการ Flash เรียบร้อยแล้ว

First Boot

เมื่อเปิด Router ขึ้นมาครั้งแรก แล้วเข้าไปที่ http://192.168.1.1 มันจะถามให้ใส่ Password ของ root ก็ใส่ได้ตามใจชอบเลยครับ

เรียบร้อยแล้ว ไปที่หน้า System/Settings ครับ ตั้งค่า Host name ได้ตามใจชอบ เปิด Boot Wait ไว้ และให้มัน Wait นานหน่อย 5-10 วินาที เราจะได้กดปุ่ม Reset ได้ดินสอทันเหมือนเดิม ถ้าต้องการจะ Flash Firmware ใหม่

ในส่วน Time Settings ก็ตั้งค่าตามปกติครับ และ NTP Server ช่องแรก ใส่เป็น time.navy.mi.th เพื่อให้ Router Sync เวลาได้

จากนั้น เราก็ต้องตั้งต่า ADSL ของเราก่อนครับ เพื่อให้ใช้เน็ตได้ ก็เลือกตามภาพด้านล่างนี้เลย สำหรับ MTU ที่เป็น 1454 นั้น เพราะว่าเหตุผลอะไรไม่รู้ยาวเหยียด สรุปว่า มันคือค่าขนาดของ Packet ที่เหมาะสมสำหรับเครือข่าย ADSL ครับ (Lan คือ 1500 และ Modem นี่ หลักร้อยครับ)

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

หลังจากตั้งค่า Network แล้ว ก็มาหน้าถัดไปเลยครับ ตั้ง Vlan ถ้าจะตั้งเผื่ออัดรายการด้วย ก็ใช้แบบตามภาพนี้ครับ ถ้าจะเอา Set Top Box ต่ออย่างเดียว ใช้แค่ Port 4 ก็พอ แล้วเอา Set Top Box ต่อเข้าช่อง 4 ครับ

ในหน้า Wireless โดย Default มันจะปิดอยู่ครับ อย่าลืมเปิดด้วย สำหรับ Encryption type เลือกเป็น WPA+WPA2 ครับ จะใช้ได้กับอุปกรณ์เยอะกว่า (ถ้าใช้ค่านี้ เวลาเอา PSP ต่อ เลือกเป็น WPA/AES ครับ) และก็ควรใส่ระยะ Wireless ด้วยครับ ช่วยในเรื่องสัญญาณได้นิดหน่อย และป้องกันไม่ให้คนมาแอบเล่นด้วย (WPA มัน Hack ได้นะ เห็นว่า) นอกจากนี้ เรายังเล่นได้อีก โดยการเพิ่ม Virtual Interface แล้วต่อมันเข้ากับ WAN (เลือกในช่อง Network) เราก็น่าจะสามารถอัดทีวี ผ่าน WiFi ได้ครับ หรืออาจจะดูทีวีผ่าน WiFi เลย ก็น่าจะได้ ผมมีโครงการจะทดลองทำเร็วๆ นี้ละครับ :)

(แต่บางทีเหมือนจะมี Bug นะครับ คือรหัส PSK มันจะไม่ยอมเปลี่ยน แล้วจะกลายไปเหมือนกับรหัสของ root ที่เราตั้งไว้ (ซะงั้น)

เมื่อเรียบร้อย Router เราก็กลับมาเป็น Router ละ คราวนี้ ก็เตรียมลงโปรแกรมได้

ลงโปรแกรม

ในการลงโปรแกรม พวก Linux เขาจะเรียกโปรแกรมพวกนี้ว่า Package ครับ (หรือเราควรจะเปลี่ยนใหม่ว่า ลง Package ดี) เอาเป็นว่า ไปที่หน้า System/Packagesแล้วกด Update Package Lists ทีนึงก่อน เมื่อมันไปดาวน์โหลดลิสต์มาแล้ว ก็เริ่มลง Package ตามนี้ครับ (ตามลำดับ)

kmod-usb2

kmod-usb-storage

kmod-nls-utf8

kmod-fs-ext3

swap-utils

samba-server

vsftpd

เมื่อลงเสร็จแล้ว Restart ซะที ก็จะเป็นการดีครับ ลิงค์ Reboot อยู่ด้านบนนี่เอง

เซ็ต Storage ให้ใช้งานได้

หลังจากนั้น เราก็ต้องมาตั้งค่านิดหน่อย เพื่อ Mount เจ้า Flash Drive กับ USB Harddisk นี้ บน Router ตรงนี้ ต้องใช้ SSH ช่วยครับ ก็เปิด Putty ขึ้นมาเลย โปรแกรมนี้เวลาใช้งานจะงงนิดนึงนะครับ แต่ก็คือ พิมพ์ IP ลงในช่อง พิมพ์ชื่อลงในช่อง Saved Session แล้วกด Save ครับ ครั้งต่อไป เปิดขึ้นมาก็ Double Click ที่ลิสต์ข้างล่างได้เลย

ตอนต่อ มันจะถามเรื่อง Certificate ก็กด Yes ไปครับ แล้วจากนั้น ใส่ Username ว่า root และพาสเวิร์ด ก็ตามที่ตั้งไว้ครับ

พิทม์ว่า mkdir /opt ก่อนเลย เพื่อสร้างโฟลเดอร์ /opt เอาไว้ Mount ตัว Flash Drive

พิมพ์ว่า dmesg แล้วย้อนไปดู จะเจอข้อความประมาณนี้

Attached scsi disk sda at scsi0, channel 0, id 0, lun 0
SCSI device sda: 117210240 512-byte hdwr sectors (60012 MB)
Partition check:
/dev/scsi/host0/bus0/target0/lun0: p1
WARNING: USB Mass Storage data integrity not assured
USB Mass Storage device found at 2
hub.c: new USB device 01:03.2-2, assigned address 3
scsi1 : SCSI emulation for USB Mass Storage devices
Vendor: Kingston Model: DataTravelerMini Rev: PMAP
Type: Direct-Access ANSI SCSI revision: 02
Attached scsi removable disk sdb at scsi1, channel 0, id 0, lun 0
device wl0 entered promiscuous mode
wl0: attempt to add interface with same source address.
br-lan: port 2(wl0) entering learning state
br-lan: port 2(wl0) entering forwarding state
br-lan: topology change detected, propagating
SCSI device sdb: 977664 512-byte hdwr sectors (501 MB)
sdb: Write Protect is off
/dev/scsi/host1/bus0/target0/lun0: p1 p2

นั้นคือ Path ของ Harddisk/Flash Drive ของเครื่องผมครับ ของคุณอาจจะต่างไปได้ ก็เปิดหน้านี้ไว้ แล้วกลับไปที่ System/Mountpoints บนเว็บครับ จัดการตั้งค่าตามนี้ สังเกตว่ามี /part1 /part2 ต่อท้าย ด้วยนะครับ โดยให้ Harddisk Mount ไปที่ /mnt และ Flash Drive ให้ Mount ไปที่ /opt

สำหรับ async หมายถึง ให้มันทำงานแบบ Asynchronous จะได้ไม่หน่วงมาก (แต่ระวังไฟตก ถ้าไฟตกตอนเขียน ข้อมูลอาจหายได้ แต่โครงสร้างยังโอเคอยู่ เพราะเราใช้ ext3) noatime คือ ไม่ต้องเก็บเวลา Access ไฟล์ล่าสุด และ nodiratime ก็เหมือนกัน แต่สำหรับไดเรกทอรี ทั้งสองอันนี้ จะทำให้ Flash Drive เราไม่พังเร็วเกินไป เพราะโดนเขียนซ้ำไปซ้ำมาบ่อยๆ และลดการใช้ Disk ด้วยครับ

เมื่อ Apply แล้ว ให้ไปที่หน้า System/Startup แล้วใส่คำสั่ง

/etc/init.d/fstab start &

ลงในบรรทัดสุดท้าย เพื่อให้ Router มัน Mount Disk ทั้งสองตัว ตอนเริ่มทำงาน เมื่อ Save changes แล้ว/Apply Changes แล้ว ก็ Reboot อีกครั้งครับ

ลองเปิด Putty ใหม่ (ถ้ามันค้างไป เพราะ Connection โดนตัด คลิ๊กขวาตรง Title Bar เลือก Restart Session ได้ครับ) แล้ว Login ถ้าพิมพ์ df –h และ free ดู ควรจะได้ผลประมาณนี้ครับ ก็คือ Partition ที่ 2 ของ Flash Drive ถูก Mount ไปที่ /opt และ Harddisk ถูก Mount ไปที่ /mnt ส่วน Free ก็บอกว่า เรามีที่ Swap เข้ามา 100MB

ลง MLDonkey

สำหรับการลง MLDonkey ต้องทำผ่าน Command line ครับ ยุ่งยากหน่อย แต่พิมพ์ไม่เยอะครับ ตามด้านล่างนี้เลย

mkdir /opt/tmp

opkg --tmp-dir /opt/tmp install http://ipkg.nslu2-linux.org/feeds/optware/oleg/cross/unstable/uclibc-opt_0.9.28-13_mipsel.ipk

opkg --tmp-dir /opt/tmp install http://ipkg.nslu2-linux.org/feeds/optware/oleg/cross/unstable/ipkg-opt_0.99.163-10_mipsel.ipk

opkg --tmp-dir /opt/tmp install http://ipkg.nslu2-linux.org/feeds/optware/oleg/cross/unstable/bzip2_1.0.5-1_mipsel.ipk

opkg --tmp-dir /opt/tmp install http://ipkg.nslu2-linux.org/feeds/optware/oleg/cross/unstable/ncurses_5.7-1_mipsel.ipk

mkdir /opt/config

touch /opt/config/mlnetstart

chmod +x /opt/config/mlnetstart

cd /opt/bin

wget http://oleg.wl500g.info/bin/mlnet/292/mlnet.lite.gz

gunzip mlnet.lite.gz

เมื่อทำครบทุกขั้นตอนแล้ว กลับไปที่หน้าเว็บ แล้วไปที่ System/File Editor แล้ว Browse เข้าไปดูใน /opt/config/ จะเห็นว่ามีไฟล์ชื่อ mlnetstart อยู่ กดปุ่มดินสอ Edit เลยครับ จากนั้น ใส่ Script นี้ลงไป

#!/bin/sh

set backuphome=$HOME
set backuptmp=$TMPDIR
export HOME=/mnt/
export TMPDIR=/mnt/.mldonkey/temp
export PATH=/opt/bin:/opt/sbin:/opt/usr/bin:/opt/usr/sbin:/bin:/sbin:/usr/bin:/usr/sbin
export LD_LIBRARY_PATH=/opt/usr/lib:/opt/lib:/lib:/usr/lib

rm -f /mnt/.mldonkey/*.tmp
nice -n 19 /opt/bin/mlnet.lite -allowed_ips '127.0.0.1/8 192.168.1.0/24' &

export HOME=$backuphome
export TMPDIR=$backuptmp
export PATH=/bin:/sbin:/usr/bin:/usr/sbin:/opt/bin:/opt/sbin:/opt/usr/bin:/opt/usr/sbin
export LD_LIBRARY_PATH=/lib:/usr/lib:/opt/usr/lib:/opt/lib

Script นี้ คือคำสั่งสำหรับเริ่มการทำงานของ MLDonkey ครับ (ถ้าอยากจะต่อเข้ามาดู Status ผ่านเน็ต เปลี่ยน ip เป็น 0.0.0.0/0 ครับ )

พร้อมแล้วใช่ไหมครับ ลองรันดูได้เลย พิมพ์ว่า

/opt/config/mlnetstart

จะได้ผลประมาณนี้ครับ

จากนั้น เราก็สามารถ เข้าไปยัง http://192.168.1.1:4080/ เพื่อดูหน้าตาเจ้า MLDonkey ได้แล้ว ซึ่งในครั้งแรก มันจะให้เราพิมพ์คำสั่ง useradd admin… เข้าไปในช่องที่มุมบนด้านขวามือ เพื่อตั้ง User ครับ password ก็ตามที่ต้องการครับ

เมื่อตั้งเรียบร้อยแล้ว ทีนี้ เราก็ใช้ Sancho ต่อกับ MLDonkey ได้แล้วครับ ตอนเปิดครั้งแรก มันจะให้เราใส่ค่าต่าง ก็ใส่ตามที่มันแนะนำครับ

เท่านี้ก็เรียบร้อย! โยนไฟล์ .torrent มาใส่ในหน้าโปรแกรมได้เลย Router ก็จะเริ่มดาวน์โหลดให้เองครับ

ขอพอก่อน!!!

ทำไปทำมา ตอนนี้ก็ปาเข้าไปห้าทุ่มแล้วครับ นั่งเขียนมาแล้ว 2 ชั่วโมงรวด ผมว่าผมไปพักผ่อนก่อนดีกว่า งานก็ยังคั่งค้างอยู่ เอาไว้มาเขียนต่อวันหลังละกันครับ

Source Control : ใช้งานพร้อมกัน และแก้ Conflict

นันคอม — Mon, 16 Mar 2009 07:23:19 GMT

สวัสดีครับ หายไปนานเลยจากภาคแรก ซึ่งผมทิ้งท้ายไว้ที่การตั้ง Source Control อย่างงายๆ สำหรับใช้เองในเครื่อง ด้วย SVN รวมไปถึงการใช้งาน SVN อย่างคร่าวๆ ไม่ว่าจะเป็นการสร้าง Repository ใหม่ การนำไฟล์เข้า Source Control, การ Update และ Commit แต่เรื่องที่ผมยังไม่ได้กล่าวถึง คือการทำให้ SVN สามารถใช้งานร่วมกันได้ ภายในทีม และการจัดการกับ Conflict ซึ่งจะเกิดขึ้นได้ เมื่อมีผู้พัฒนาหลายๆ คน ทำการแก้ไขไฟล์พร้อมๆ กัน ในส่วนเดียวกัน

อย่าใช้ Shared Folder!

สำหรับการทำให้ SVN ใช้งานได้พร้อมกันหลายๆ คน บางคนอาจจะนึกได้ว่า ทำไมเราไม่ทำการทำให้โฟลเดอร์ที่เป็น Repository นั้น ให้กลายเป็น Shared Folder แล้วให้ผู้พัฒนาทุกคน ต่อเข้ามาผ่านโปรแกรม Tortoise SVN ล่ะ? คำตอบคือ เป็นสิ่งที่สามารถทำได้ครับ แต่อย่าลืมว่า ในการแก้ไขข้อมูล SVN จะต้องทำการ Lock/Unlock ไฟล์ เหมือนกับการเขียนไฟล์ลงเครื่องทั่วๆ ไป แต่ปัญหาไม่ได้อยู่ที่การที่เราจะ Lock ไฟล์ ไม่ได้ครับ ปัญหามันอยู่ที่ การ Lock ไฟล์ผ่าน Shared Folder ยังเป็นเรื่องที่อันตรายมากๆ ในทางปฏิบัติ จึงเป็นสิ่งที่ไม่สมควรทำเป็นอย่างยิ่ง (ทีนี้รู้หรือยังว่า ไม่ควรเปิดไฟล์ Word/Excel จาก Shared Folder แล้วแก้ไขมันตรงๆ) โดยเฉพาะกับข้อมูลสำคัญอย่าง Source Code ของเรา และเป็นที่มาของส่วนหนึ่งของความไม่ค่อยจะน่าเชื่อถือของ Visual Source Safe นั่นเองครับ

แล้วทีนี้ จะทำยังไงดีละ?

Visual SVN Server

โดยปกติแล้ว เมื่อเราติดตั้ง SVN เราจะได้ SVN Server มาพร้อมกันด้วยครับ ตัวโปรแกรมมันชื่อว่า SVNServe ซึ่งเราสามารถเปิดโปรแกรมนี้ไว้ แล้วให้เครื่องอื่นๆ ใช้ Tortoise SVN ต่อเข้ามาได้เลย แต่ผมจะแนะนำโปรแกรมอีกตัวหนึ่ง ให้ใช้แทน SVNServe ที่ชื่อว่า Visual SVN Server ครับ

Visual SVN Server นี้เป็นผลิตภัณฑ์ของบริษัทแห่งหนึ่ง ซึ่งทำ Plug-in เพื่อให้ Visual Studio สามารถติดต่อกับ SVN ได้ ออกขายครับ แต่ว่าเขาใจดี เปิดให้เราใช้ตัว SVN Server ซึ่งเขาทำการโมมาให้เรียบร้อยแล้วได้ฟรี ถ้าจะใช้จริงๆ จังๆ ก็อย่าลืมอุดหนุนเขาบ้างนะครับ ที่ http://www.visualsvn.com

สาเหตุที่ผมคิดว่า Visual SVN Server นั้นดีกว่า SVN Serve ที่เราได้มาพร้อมกันกับการลง SVN นั่นก็คือ…

จัดการได้ง่าย เพราะว่า ทีมที่พัฒนา Visual SVN Server นั้น เขาได้ทำ GUI มาเป็น MMC ไว้เลยครับ การสร้าง Repository, จัดการ Permission หรือ จัดการ User ทำได้ง่ายกว่า SVNServe ซึ่งต้องใช้การแก้ Text File ด้วยมือ
รองรับ Active Directory/Windows Authentication ถ้าเรามีระบบ AD หรือ ที่เครื่อง Server มีการสร้าง User เพื่อจัดการการแชร์ไฟล์ หรืออะไรอื่นๆ อยู่แล้ว เราสามารถให้ Visual SVN ไป Authen กับ AD หรือ Windows Authentication ได้เลยครับ ไม่ต้องสร้าง User หลายๆ ที่ ให้วุ่นวาย
มี HTTP/HTTPS ให้เลย โดยปกติแล้ว ถ้าเราใช้ SVNServe ตัว Tortoise SVN จะต้องติดต่อผ่านโปรโตคอลของ SVN เอง ซึ่งมันมักจะโดน Firewall บล็อคครับ ทำให้การติดต่อกับ Server SVN ผ่านเน็ต จะต้องมีการคอนฟิก Firewall เพิ่มมาด้วย SVN จึงมีการพัฒนาให้รองรับการใช้ Apache เป็นหน้าด่าน เพื่อทำงานกับ Repository ผ่านโปรโตคอล HTTP ได้ด้วย ติดตรงที่ถ้าเราเอามาทำเอง มันจะวุ่นวายอยู่พอสมควร แต่ Visual SVN นี่ จะเป็น Server SVN แบบ HTTP/HTTPS โดยตัวมันเองอยู่แล้วครับ
รองรับการทำงานกับระบบอื่นๆ ได้อีก ถ้าหากเราจะเล่น SVN ให้มัน Advance ไปอีก ซึ่งขั้นต่อไป ก็คือทำงานร่วมกับระบบ Project Management อย่างเช่น Trac ที่โปรเจค Open Source ทั้งหลายนิยมใช้กัน Visual SVN เขาก็เปิดช่องไว้ให้เราแล้วด้วยเหมือนกันครับ โดยคุณสามารถตั้งค่าได้จากตัว GUI โดยตรงเลย แต่ผมยังไม่ขอพูดถึงเรื่องนี้นะครับ อาจจะเป็นในภาค 3 ของเรื่องนี้ ถ้าสนใจ ลอง Search หาเรื่อง Commit Hook ดูครับ

การติดตั้งนั้น ง่ายดายมากครับ เปิดตัว Setup ขึ้นมา กด Next ลูกเดียว ก็เสร็จแล้วครับ สำหรับการ Authentication ผมแนะนำให้ใช้ Windows Authentication ครับ เพื่อที่ Username/Password ทั้งหลาย จะได้ไม่ไปกระจายอยู่หลายที่ หลังจากติดตั้ง ตัว Visual SVN Server จะเป็น Windows Service ครับ มันจะทำงานโดนอัตโนมัติเมื่อเปิดเครื่อง

การใช้งานเบื้องต้น

สำหรับการใช้งาน Visual SVN Server นั้น สามารถใช้ GUI จัดการได้เลยครับ โดยหลักๆ แล้ว สิ่งที่เราต้องจัดการ ก็มีแค่สร้าง Repository กับการเปลี่ยน Permission เท่านั้นเองครับ

ปัญหาจากการทำงานร่วมกัน

อย่างที่ผมได้เกริ่นไปแล้ว ว่า SVN นั้น เป็นการทำงานแบบ Copy-Modify-Merge ซึ่งจะทำให้ทุกคนสามารถทำงานพร้อมๆ กันได้ อย่างสะดวก แต่อย่างไรก็ดี ปัญหาที่อาจเกิดขึ้นได้ คือขั้นตอนของการ Merge นี่เองครับ เพราะว่า…

ผู้พัฒนา อาจจะทำงานในบริเวณเดียวกันของไฟล์ ที่ผมใช้คำว่า บริเวณเดียวกัน นั่นก็เพราะว่า อัลกอริธึมในการ Merge ที่ SVN ใช้นั้น สามารถติดตามได้ว่า Source Code แต่ละบรรทัด ถูกย้ายไปยังตำแหน่งไหนบ้าง มีอะไรที่ต่างกันบ้าง แต่ว่า การเปลี่ยนแปลงที่เกิดขึ้นในบรรทัดเดียวกัน หรือการเปลี่ยนแปลงที่มากจนทำให้อัลกอริธึมสับสน ก็ไม่สามารถ Merge ได้ครับ แต่ข้อดีของ SVN ก็คือ Source Code ที่อยู่ใน Repository จะไม่มีทางอยู่ในสภาพที่เสียหายโดยเด็ดขาด เพราะว่า ก่อนการ Commit Code เข้าไปยัง Repository ตัว SVN จะตรวจว่า มีการเปลี่ยนแปลงที่ไฟล์เดียวกันหรือไม่ ถ้ามี ผู้พัฒนา จะต้องทำการ Update เพื่อดาวน์โหลด Source Code มาทำการ “ทดลอง Merge” ในเครื่องก่อน ถ้าเกิดว่า Merge ไม่ผ่าน ก็จะไม่สามารถ Commit ได้
การ Merge ไม่สามารถการันตีเรื่อง Semantic/Logic ได้ แต่ทีนี้ ถึงแม้การ Merge จะสำเร็จ เราก็ไม่สามารถการันตีได้ว่า Source Code ที่ Merge สำเร็จแล้ว จะคอมไพล์ผ่าน และทำงานได้ถูกต้อง (ซึ่งก็เป็นปัญหาเดียวกัน กับ Source Control ในทุกรูปแบบ รวมไปถึง แบบที่ไม่มี Source Control ด้วย) ดังนั้น ทีมพัฒนาบางแห่ง จึงจะมี Server อีกตัว เรียกว่า Continuous Integration Server ที่จะคอยดาวน์โหลด Source Code จาก Repository มาเป็นระยะๆ เพื่อคอมไพล์ และรัน Test (บางที อาจจะทั้ง Unit และ Integrated) เพื่อให้มั่นใจว่า Source Code ยังอยู่ในสภาพดีเสมอ และจะได้ชี้นิ้วถูก ว่า ใครคือคนสุดท้าย ที่ Commit Code เข้าไป แล้วทำพัง

สำหรับปัญหาแรก นักพัฒนาจะถูกบังคับให้แก้ไข โดยการ Merge Source Code ด้วยมือ เรียกอย่างเป็นทางการ ก็คือ Conflict Resolution หรือการแก้ Conflict ครับ ส่วนปัญหาที่สอง มีทางเดียวคือต้องใช้ CI ครับ

การแก้ Conflict

ก่อนอื่น ลองมาดูกันว่า Conflict จะเกิดขึ้นได้อย่างไรครับ เริ่มจาก ผมมี Repository ที่มีไฟล์อยู๋ไฟล์หนึ่ง

และผมมีนักพัฒนาอยู่สองคน ชื่อ Nant และ John นะครับ ซึ่งทั้งคู่ ต่างก็ Checkout Repo นี่ไว้ในโฟลเดอร์ของตัวเอง

จากนั้น Nant ก็ทำการแก้ไขไฟล์ โดยการเพิ่มฟังก์ชั่น ไปที่บรรทัดที่ 50

ส่วน John ก็ไปเพิ่มฟังก์ชั่น Test ไว้ที่ด้านล่างของไฟล์

จากนั้น John ก็ทำการ Commit ก่อน

แล้วถ้า Nant จะ Commit บ้าง ก็จะ Commit ไม่ได้ และ SVN ก็จะแนะนำว่า ให้ผมสั่ง Update ก่อน เพราะว่าไฟล์มัน Out-of-Date ไปแล้ว

จากนั้น เมื่อผมสั่ง Update แล้ว ผมก็จะได้ไฟล์ AutoCompleteBox.cs ที่ Merge สำเร็จ แต่มีฟังก์ชั่น Test สองครั้ง ทำให้คอมไพล์ไม่ผ่าน ก็จะเป็นหน้าที่ของผม ที่จะต้องไปสื่อสารกับคุณ John เขาว่า เราจะจัดการยังไง และก็สั่ง Lock ไฟล์นี้ไว้ก่อน เพื่อป้องกันใครมาแก้ไขเพิ่ม ระหว่างเราตกลงกันอยู่ เมื่อเรียบร้อย ผมจึงจะสั่ง Commit ครับ แล้วค่อยปลดล็อค แล้วคุณ John ก็สั่ง Update อีกครั้ง เพื่อให้ไฟล์ของเขา เป็นตัวล่าสุด ที่แก้ไขให้คอมไพล์ได้แล้ว

ทีนี้ ผมก็แก้ไขฟังก์ชั่น Test ต่อไป แล้วสั่ง Commit

แต่คุณ John ก็แก้ไขเหมือนกัน แล้วพอจะ Commit คุณ John ก็จะต้อง Update ก่อน

แต่เนื่องจากเป็นการแก้ไข ที่บริเวณเดียวกัน (บางครั้ง แก้ไขในบรรทัดเดียวกัน ก็ยังสามารถ Merge ได้นะครับ) คือ true กับ false ก็จะเกิดการ Conflict ครับ

สังเกตว่า จะมีไอคอนแสดงเลยว่า ไฟล์นี้ กำลัง Conflict พร้อมกับมีไฟล์ต้นฉบับ เพื่อใช้ในการแก้ Conflict มาให้เห็นด้วย

เนื่องจากว่าในการแก้ไข หรือ Commit แต่ละครั้ง SVN จะไม่ได้จำ Revision เฉพาะไฟล์ใด ไฟล์หนึ่ง แต่จะเป็นการจำการเปลี่ยนแปลงของทั้ง Repository ดังนั้น ถ้าเกิดเรา Commit หลายๆ ไฟล์พร้อมกัน ในการ Update ก็เป็นไปได้ที่จะเกิดการ Conflict หลายๆ ไฟล์พร้อมกัน ซึ่งเราก็ควรจะแก้ให้หมดก่อน แล้วค่อย Commit ครับ

ทีนี้ บางท่านอาจจะบอกว่า ถ้าอย่างนั้น ไล่ Commit ทีละไฟล์จะดีกว่าหรือเปล่า ผมขอแนะนำว่า อย่าครับ เพราะบางครั้ง การเปลี่ยนแปลงที่เราทำ อาจจะกระทบไปหลายๆ ไฟล์ และถ้าเราพบว่า การเปลี่ยนแปลงที่เราทำ มันไปทำให้เกิดปัญหา แล้วต้องการ Revert (ย้อนเวลา) กลับไป Revision ก่อน เราก็จะต้องจำให้ได้ ว่า Commit ไฟล์ไหนไปบ้าง แล้วไล่ Revert ให้ครบ แทนที่จะเป็น Revert การเปลี่ยนแปลงที่เกิดขึ้นทั้งหมด ซึ่งนี่คือจุดดีของ SVN ด้วยครับ

ทีนี้ การแก้ Conflict ก็ทำได้โดยการคลิ๊กขวาที่ไฟล์ แล้วเลือก Edit Conflict

จากนั้น เราก็จะพบหน้าต่างแบบนี้ครับ เรียกว่า TortoiseMerge

สิ่งที่เราต้องทำก็คือ กด Ctrl+ลูกศรขึ้น หรือ ลง เพื่อไล่ดูจุดที่มัน Conflict กันทั้งหมด ซึ่งบางครั้ง อาจจะไม่ได้เป็นแค่บรรทัดเดียว แต่เป็นทั้งบล็อค หลายๆ บรรทัด แล้วจัดการแก้ไขครับ โดยการดูจากหน้าต่างซ้ายมือ (ไฟล์นี้ ใน SVN) กับทางขวามือ (ไฟล์ในเครื่องเรา) แล้วเลือกว่า จะให้ผลลัพธ์การ Merge มาจากด้านไหน โดยการกด Use “Theirs” หรือ Use “Mine” บนทูลบาร์ ตรงนี้ เราก็คงต้องเอาคุณ John มานั่งคุยกับผมครับ ว่าจะ Merge กันอย่างไรดี

แล้วตรงที่ Conflict ในหน้าต่าง Merged ก็จะกลายเป็นสีเขียวครับ

หรือถ้าไม่สามารถเลือกข้างได้ จะพิมพ์ลงไปเลยก็ได้เหมือนกันครับ เมื่อเรียบร้อยแล้ว กด Save แล้วทำการ Flag บอก SVN ว่า ไฟล์นี้แก้ไขเรียบร้อยแล้ว ขั้นตอนนี้ขึ้นอยู่กับดุลยพินิจของเรานะครับ ว่าจะให้มันผ่านหรือเปล่า เพราะยังไง SVN ก็บังคับเราไมได้ จะให้มันผ่านเลย โดยทียังไม่แก้ Conflict ก็ยังได้ครับ

เมื่อถึงจุดนี้แล้ว ก็สามารถ Commit ได้ตามปกติครับ (ยกเว้น มีคน Commit ตัดหน้ามาก่อน ก็ต้อง Update อีกรอบ เพราะส่วนใหญ่ จะแก้ Conflict กันนานเหมือนกัน)

แต่ยังไง…VSTS ก็คือคำตอบ

จะเห็นว่า SVN นั้น ช่วยให้การทำงานเป็นทีมนั้น ราบรื่นขึ้นมากเลยทีเดียว เพราะตอนนี้ ทุกคนก็สามารถพร้อมกันได้ อย่างเป็นสุข โดยไม่ต้องมานั่งรอ Lock ไฟล์ หรือ Copy ไฟล์กันไปมาอีกแล้ว และอย่าลืมว่า โดยส่วนใหญ่ เรามักจะทำงานกันคนละไฟล์อยู่แล้ว ปัญหาด้าน Conflict นี้ จะเกิดขึ้นได้น้อยมาก

แต่ปัญหาที่จะเกิดขึ้นตามมาได้ ก็คือ Human Error ครับ นั่นก็เพราะว่า SVN ไม่ได้ทำงานร่วมกับ IDE อย่างสมบูรณ์ เหมือนกับ Visual Studio Team System เราจึงไม่สามารถควบคุมคุณภาพของ Source Code ใน Repository ได้ และการใช้ CI ก็เป็นการแก้ปัญหาที่ปลายเหตุ เนื่องจากเราจะพบปัญหาได้ ก็ต่อเมื่อ Source Code ใน Repository มันเสียหายไปแล้ว

มาดูกันว่า SVN ยังให้อะไรเราไม่ได้บ้าง

การควบคุม คุณภาพ Source Code ที่จะเข้าไปยัง Repository อย่างที่เกริ่นไปแล้วว่า SVN นั้น เป็นแค่ Source Control เฉยๆ ด้วยตัว SVN เอง จึงสามารถรับรู้ได้แค่การเปลี่ยนแปลงของ Source Code เท่านั้น แต่ VSTS เราสามารถคุมคุณภาพได้ ตั้งแต่ก่อนที่ผู้พัฒนา จะ Commit โค๊ดเข้าไปใน Repository

ใน VSTS นี่ Project Manager สามารถควบคุมคุณภาพได้จากส่วนกลางเลย โดยการตั้งเงื่อนไขการ Check-in ตั้งแต่เงื่อนไขง่ายที่สุดเช่น จะต้อง Compile ผ่าน ซึ่งผมเองก็พบอยู่หลายครั้งว่า หลายๆ คนก็ Commit โค๊ดไปเลย โดยที่ไม่ได้ทดลอง Compile ดูก่อน ซึ่งจะไปสร้างปัญหากับคนอื่นๆ ในทีม แทบจะในทันที โดยเฉพาะ ทีมใหญ่ๆ ที่ทำงานกันอยู่หลายๆ ออฟฟิศ คนที่เป็น Admin ก็ต้องคอย Monitor ว่า CI มีการรายงานมาหรือไม่ว่า Code คอมไพล์ไม่ผ่าน แล้วก็ต้องคอย Revert กลับให้

หรือถ้าต้องการเงื่อนไขซับซ้อนกว่านั้น ก็มีให้เลือกครับ เช่น จะต้องรัน Unit Test ผ่าน หรือ มี Performance ในระดับที่พอใจ หรือแม้กระทั่ง จะต้องทดสอบผ่าน Static Analysis Tool ก่อน (FxCop)
การทำงานจากภายใน Visual Studio แม้ว่า Tortoise SVN จะช่วยให้เรา Commit/Update ได้จากใน Explorer แต่ชีวิตประจำวันของผู้พัฒนาจริงๆ ก็ยังอยู่ใน Visual Studio ครับ แม้ว่า SVN จะมี Plugin ของ Visual Studio อยู่ แต่เท่าที่ผมทดลองใช้ดู ก็ยังทำงานได้ไม่สมบูรณ์เท่าที่ควร และผมก็ยังไม่อยากเสี่ยงครับ
ต้องอาศัยระบบอื่นช่วย เป็นเรื่องธรรมดามากอยู่แล้ว สำหรับโปรเจค Open Source ทั่วไป เพราะเหมือนว่าเขาจะมี Philosophy กันว่า จะไม่ทำอะไรที่มีคนเคยทำมาแล้ว อย่าง SVN ก็จะทำได้แค่ Source Control อย่างเดียว ถ้าอยากได้อะไรเพิ่ม ก็ต้องลงเพิ่มเอง อย่างเช่น Trac เพื่อใช้เป็น Portal, Apache เพื่อให้ติดต่อผ่าน HTTP ได้, NUnit ทำ Test, Cruise Control ทำ Continuous Integration, FxCop ไว้ทำ Static Analysis ซึ่งกว่าจะทำให้มันขึ้นมาได้ และใช้งานได้สมบูรณ์ ก็ซับซ้อนอยู่พอสมควร

สำหรับการใช้งานด้าน Source Control จริงๆ SVN ก็สามารถช่วยเราได้เยอะแล้วครับ แต่หลังจากใช้งานเขาจริงๆ จังๆ เราก็จะพบว่า มันยังไม่สามารถตอบความต้องการเราได้ซะทีเดียว โดยเฉพาะอย่างยิ่ง กับการทำงานเป็นทีม และความสามารถในการใช้งานด้าน Project Management เอาไว้เมื่อผมมีเวลาว่าง ผมจะหาโอกาสเขียนเรื่อง VSTS เพิ่มเติม หรืออาจจะชวนให้คุณมี่ เว็บ greatfriends ให้เขียนลง GreatFriends ก้อได้ครับ เพราะขานั้น เขาเทพ VSTS มาเลยทีเดียว :)

เจอกันคราวหน้าครับ

Source Control : เรื่องจำเป็นที่ไม่ควรมองข้าม

นันคอม — Mon, 16 Mar 2009 07:22:43 GMT

สำหรับโปรแกรมเมอร์ หรือทีมพัฒนาเล็กๆ แล้ว สิ่งสำคัญสิ่งหนึ่งที่เรามักจะมองข้ามไป คือการสำรองข้อมูล และการจัดการเรื่องการใช้งานไฟล์โปรเจคร่วมกัน เชื่อหรือไม่ว่า บางที ถ้าลองสังเกตดูแล้วว่า เวลาที่เสียไปกับการบริหารจัดการเรื่องจิปาถะเหล่านี้ อาจจะกินเวลาของโปรเจค มากกว่าที่คุณคิดก็ได้

ลองมาสังเกตดูกระบวนการแชร์ไฟล์โปรเจค ที่คนส่วนใหญ่มักจจะทำกันก่อนดีกว่าครับ

วิธี “ตัวใครตัวมัน”

ลองนึกย้อนไปตอนสมัยเรียนนนะครับ เมื่อเราจะต้องทำโปรเจคใหญ่ๆ อย่าง Senior Project หรือ โปรเจคจบของรายวิชาต่างๆ ที่ต้องร่วมมือกันหลายคน วิธีที่เราใช้ในตอนนั้น ก็มักจะเป็นตามภาพด้านล่างนี้ ก็คือ วางโครงโปรเจคกันก่อน จากนั้นต่างคนก็ต่างไปทำกันมา ส่วนของใครของมัน แล้วพอใกล้ๆ เวลาส่ง เราก็จะนำไฟล์ของทุกคนมารวมกัน ที่บ้านใครซักคน แล้วก็ภาวนาให้ทุกอย่างผ่านไปได้ด้วยดี

แต่เราก็รู้ดีอยู่แล้วว่า มันเป็นเรื่องที่เป็นไปไม่ได้ อย่างน้อย ถ้าเกิดใครเพิ่มไฟล์ใหม่เข้ามา ที่ชื่อดันเหมือนกัน ก็ยุ่งแล้วครับ แต่ปัญหาที่ยุ่งเหยิงกว่านั้นก็คือ เราไม่มีทางรู้ได้เลยว่า เมื่อทุกส่วนรวมกันแล้ว มันจะใช้งานได้ อย่างที่เราคิดไว้ จริงอยู่ที่ มันอาจจะคอมไพล์ผ่าน แต่ก็ไม่มีใครการันตีถึง ความถูกต้องได้ จริงไหมครับ?

แชร์ไฟล์ไว้ที่ File Server

วิธีหนึ่งที่ดู Advance ขึ้นมาหน่อย ก็คือเอาไฟล์ ใส่ไว้ใน Shared Folder แล้วทุกคนก็มารวมตัวกันที่บ้านใครซักคน เพื่อจะได้ทำงานไปพร้อมๆ กัน โดยการ Map Drive มา แล้วก็เปิดโปรเจคทำไปพร้อมกันเลย

วิธีนี้ แน่นอนว่า เราสามารถมั่นใจเรื่องความถูกต้องได้มากขึ้น เพราะเราทำงานกับไฟล์โปรเจคที่สมบูรณ์จริงๆ แต่ปัญหาก็อาจะเกิดขึ้นได้ ถ้าเกิดมีความจำเป็นที่ต้องใช้งานไฟล์เดียวกัน พร้อมๆ กัน ลองดูจากภาพด้านล่างนี้ครับ (ภาพจากคู่มือ TortoiseSVN)

นั่นก็คือ ถ้าต่างคนต่างลืมบอกกันว่า เฮ้ย เราจะใช้ไฟล์นี้นะ ก็จะเกิดเหตุการณ์ หัวเราะทีหลังดังกว่า เพราะใครเซฟท้ายสุด ก็จะเป็นคนที่สามารถบันทึกการเปลี่ยนแปลงของตัวเองลงในไฟล์ได้ โดยที่การเปลี่ยนแปลงของอีกคน ก็จะหายไปเลย

จึงเป็นที่มาของระบบ Source Control แบบแรก คือ

Lock-Modify-Unlock

ระบบนี้เป็นระบบง่ายๆ นั่นก็คือ ใครที่ต้องการจะแก้ไฟล์นี้ ก็จะต้องทำการ “จอง” ไฟล์ไว้ก่อน ถ้าใครจะเข้ามาแก้ไขไฟล์นี้ ก็จะแก้ไม่ได้ คล้ายกับระบบ Lock ไฟล์ที่มีใน OS ทั่วไปครับ อันที่จริงแล้ว ระบบนี้ก็ไม่ได้ต่างอะไรกับการแชร์ไฟล์โดยปกติ แตกต่างกันแค่ เราถูกบังคับให้ต้องสื่อสารกันว่า ใครจะใช้ไฟล์ นั่นเอง

แต่สมมุติว่า ถ้าเราไม่ได้นั่งทำงานที่เดียวกัน เพราะพอมีระบบแล้ว ต่างคนก็ต่างนั่งทำงานที่บ้านตัวเอง แล้วผมเกิดล็อคไฟล์ไว้เพื่อแก้ไข แล้วออกไปข้างนอกดูหนังคลายเครียด เพื่อนๆ คนอื่นที่อยู่ที่บ้าน ก็หมดสิทธ์ใช้ไฟล์ไปโดยปริยาย จนกว่าผมจะดูหนังจบ และกลับถึงบ้าน ไม่อย่างนั้น ก็อาจจะต้องให้คนที่เป็นแอดมิน ปลดล็อคให้ เพื่อจะได้ใช้ไฟล์ได้

จะเห็นว่า ระบบนี้ แม้จะช่วยเรื่องการแชร์ไฟล์ได้ แต่ก็ยังสร้างปัญหาอยู่ดี ซึ่งขอสรุปให้เป็นข้อๆ ดังนี้

ทำงานได้ช้าลง เพราะต้องแย่งไฟล์กัน
แน่นอนว่า โดยทั่วไปแล้วแม้เราจะสามารถแยกโปรเจคเป็นไฟล์ย่อยๆ ไม่เกี่ยวข้องกันเลยได้ แต่โอกาสที่จะมีการใช้ไฟล์ร่วมกัน ก็มีอยู่ อย่างเช่น ไฟล์ที่เป็น Web Service, ไฟล์ที่เก็บ Enum หรือ Constant เป็นต้น

นอกจากนี้ การแก้ไขส่วนใหญ่ มีโอกาสน้อยมาก ที่เราจะแก้ไขที่จุดเดียวกัน แต่ระบบนี้จะทำให้คนสองคน ซึ่งจำเป็นต้องแก้ใขไฟล์เดียวกัน แต่คนละส่วน ก็ไม่สามารถทำงานได้พร้อมกันอยู่ดี
แอดมินปวดหัว
เนื่องจากทุกคนสามารถ Lock ไฟล์กันได้อย่างอิสระเสรี จึงเกิดเหตุการข้างต้นที่ผมยกตัวอย่างไปแล้วได้ นั่นคือ ล็อคตาย คือ คนล็อค ล็อคเสร็จแล้ว มันก็ตายไปเลย ไม่ยอมมาปลดล็อคให้ ซึ่งจากที่ผมได้ทำงานร่วมกับระบบ Source Control แบบนี้ บ่อยครั้งมาก ที่เราจะต้องตะโกนบอกให้เพื่อนอีกคน คืนไฟล์ให้ หรือถามว่า ใช้เสร็จหรือยัง ถ้าเกิดวันนั้นเจ้าตัวคนล็อค ไม่ได้มาทำงาน ก็ต้องเสี่ยงให้แอดมิน ปลดล็อคให้ ซึ่งก็จะทำให้เกิดปัญหาที่อีกข้อ ตามมา นั่นก็คือ
เกิดปัญหางานหายได้ง่าย
ระบบ Source Control ลักษณะนี้ ก็ยังคงทำงานในแบบไฟล์อยู่ ไม่ได้ดูแลการแก้ไขตัวเนื้อไฟล์จริงๆ ซึ่งถ้าผู้ที่เคยใช้ระบบ Visual Source Safe มาก่อน น่าจะทราบดี ถ้าหากว่าเราทำการแก้ไขไฟล์ในเครื่อง แล้วสั่ง Get Latest Version ออกมา ระบบก็จะแค่ตรวจสอบว่า ไฟล์ในเครื่อง กับไฟล์บน Source Safe นั้น เหมือนกันหรือไม่ ถ้าไม่เหมือนกัน ก็มีแค่สองทางเลือกคือ Lock ไฟล์ เพื่อแก้ไข หรือ เอาไฟล์จากบน Source Safe ทับไฟล์ของเราเลย (โดยที่ไม่ได้บอกด้วยว่า ไฟล์ของเรา กับไฟล์บน Server ต่างกันอย่างไร) บางที ถ้าเราเผลอไปกดให้ทับไฟล์ของเราในเครื่อง ก็เท่ากับจบกัน

ถ้าลองมองดีๆ ปัญหาแบบเดียวกันนี้ ก็เกิดขึ้นกับระบบฐานข้อมูลครับ แต่ระบบ DBMS เขาจัดการด้วย Transaction นั่นคือ แต่ละคน ก็จะเห็นมุมมองของ Database ในชั่วขณะที่คนนั้น ติดต่อเข้ามา โดยที่การเปลี่ยนแปลงของอีกคน จะไม่ส่งผลกระทบข้ามมาเลย และถ้าต้องการบันทึกการเปลี่ยนแปลงที่เกิดขึ้น ก็ต้องสั่ง Commit Transaction เพื่อให้ระบบ DBMS ตรวจหา Conflict ว่ามีการพยายามแก้ไขข้อมูลจุดเดียวกันหรือไม่ และเกิดขั้นตอน Conflict Resolution ต่อไป

ด้วยแนวคิดเดียวกันนี้ ก็มี Source Control อีกแบบเกิดขึ้น นั่นก็คือ…

Copy-Modify-Merge

ระบบแบบนี้ จะทำงานคล้ายกัยฐานข้อมูลครับ นั่นคือ แต่ละคนสามารถติดต่อเข้ามา เพื่อดูข้อมูลล่าสุด แล้วแก้ไขเปลี่ยนแปลงได้ตามใจชอบ จนกว่าจะพอใจ แล้วสั่ง Commit เพื่อเซฟการเปลี่ยนแปลง เพื่อความเข้าใจ ผมจะอธิบายตามภาพด้านล่างนี้ครับ

แรกเริ่มเลย ทั้งแฮรี่ และแซลลี่ สามารถเปิดดูไฟล์ A พร้อมกันได้ แล้วจะทำการแก้ไขเปลี่ยนแปลงอย่างไรก็ได้ ตามใจชอบ ในเครื่องของตัวเอง โดยที่ไม่ต้องสั่ง Lock ก่อน

ทีนี้ แซลลี่แก้ไขจนเสร็จแล้ว ก็ทำการเซฟไฟล์ กลับเข้าไปยังระบบ และถ้าแฮรี่ ต้องการจะเซฟบ้าง ก็จะโดนปฏิเสธโดยระบบ เพราะว่าตอนนี้ ไฟล์ในระบบนั้น ไม่เหมือนกับไฟล์ที่แฮรี่เคยอ่านมาดูตั้งแต่ครั้งแรกแล้ว

ดังนั้น แฮรี่ก็จะต้องอ่านไฟล์ที่ถูกแก้ไขโดยเซลลี่ เข้ามาดูในเครื่องก่อน และระบบ ก็จะจัดการ “Merge” หรือ รวมการเปลี่ยนแปลง ที่แฮรี่ทำไว้ในเครื่อง (A’) เข้ากับไฟล์ที่ได้ออกมาจากระบบ (A”) โดยอัตโนมัติ ซึ่งในขั้นตอนนี้ ถ้าเกิดว่าแซลลี่ และแฮรี่ ไม่ได้แก้ไขไฟล์ที่จุดเดียวกันเลย ระบบก็จะสามารถรวมไฟล์ให้ได้โดยอัตโนมัติ

แต่ถ้าหากว่าแซลลี่ และแฮรี่ เกิดแก้ตรงจุดเดียวกันขึ้นมา ไฟล์ในเครื่องแฮรี่ ก็จะอยู่ในสถานะ “Conflict” ซึ่งแฮรี่ ก็จะต้องไปเรียกแซลลี่ มานั่ง Merge ด้วยกัน ว่าเธอแก้ตรงไหน ฉันแก้ตรงไหน ต้องเก็บอะไรไว้ เอาอะไรออก

จากนั้น เมื่อทั้งคู่ Merge กันได้แล้ว แฮรี่ก็จะสามารถเซฟไฟล์ กลับลงไปในระบบได้ และเมื่อแซลลี่ โดนกลับไปถึงโต๊ะ ก็สามารถอ่านไฟล์ที่ Merge กันได้แล้ว มาเก็บไว้ในเครื่อง เพื่อทำการแก้ไขต่อไป

แล้วประโยชน์สำหรับนักพัฒนาคนเดียวละ?

แน่นอนว่า สำหรับคนที่ฉายเดี่ยว เรื่องการแชร์ไฟล์นี่ไม่ใช่ปัญหาอยู่แล้ว แต่ปัญหาที่ผมเชื่อว่า ทุกคนน่าจะเคยพบเหมือนกัน ก็น่าจะหนีไม่พ้น…

เมื่อวานยังใช้ได้นี่นา ทำไมวันนี้ใช้ไม่ได้แล้ว
วันก่อนเราแก้อะไรไปบ้างวะเนี่ย???
ปัญหานี้ เวอร์ชั่นก่อน ไม่เคยเป็นนี่นา!?!?

แต่ถ้าคนที่มี Backup ปัญหาก็คงจะทุเลาไปได้บ้าง แต่อย่างไรก็ตาม เรามักจะ Backup กันแบบไม่จริงจัง เช่น Zip เอาไว้เฉยๆ บ้าง บางคนเป็นระเบียบหน่อย ก็จัดเป็นวันๆ ไว้ แต่ถึงอย่างไร Backup ก็ข่วยได้แค่เก็บไฟล์ก่อนหน้านี้ไว้ได้ แต่ไม่ได้ช่วยบอกเราอยู่ดีว่า เราแก้อะไรไปบ้าง

ขอแนะนำ Subversion

สำหรับระบบ Source Control ในท้องตลาดก็มีเยอะแยะมากมาย แต่ตัวหนึ่งที่มีความน่าสนใจเป็นพิเศษ เนื่องจากเป็น Free Software และมีการใช้งานอย่างแพร่หลาย ก็คงจะหนีไม่พ้นเจ้า Subversion นี่ละครับ เนื่องจากความที่มันเป็น Free Software จึงทำให้มีคนพัฒนาระบบและโปรแกรมต่างๆ มาติดต่อกับมันเป็นจำนวนมาก จนเมื่อเอาทั้งหมดมารวมกันเนี่ย สามารถทำระบบ Life Cycle Management อย่าง Team System ได้เลยทีเดียว

สำหรับ Subversion นั้น มีคุณสมบัติที่ดีกว่าระบบอื่นดังนี้ครับ

ทำงานได้ทั้งแบบ Copy-Modify-Merge และ Lock-Modify-Unlock
เพราะว่าไฟล์บางประเภท เราไม่สามารถทำการ Merge ได้ครับ อย่างเช่นไฟล์รูป หรือไฟล์ PDF เป็นต้น Subversion ก็เลยสนับสนุนทั้งสองแบบ
Subversion มอง Version แบบทั้งโปรเจค
ระบบของยี่ห้ออื่นบางทีจะมีมุมมองของโปรเจคที่เพี้ยนไป นั่นคือระบบจะมองเวอร์ชั่นเป็นตามไฟล์ แต่ว่าถ้าเราคิดดูจริงๆ แล้ว โปรเจคทั้งโปรเจค แค่มีไฟล์โดนแก้ไปเพียงไฟล์เดียว ก็ทำให้เวอร์ชั่นเปลี่ยนแล้ว จริงไหมครับ?
การกระทำหลายๆ อย่าง สามารถรวมกันได้ ในการบันทึก 1 ครั้ง (Atomicity)
ลองนึกดูว่า ในการทำงานจริงๆ เช่นการแก้บัก หรือเพิ่มฟีเจอร์ เราไม่ได้มีการแก้ไขไฟล์ แค่ไฟล์เดียว แต่อาจจะต้องมีการแก้ไขไฟล์หลายๆ ไฟล์ หรือแม้แต่การเพิ่มไฟล์ใหม่ เพิ่มโฟลเดอร์ใหม่เพื่อใส่รูป เป็นต้น การกระทำทั้งหมดนี้ เราสามารถ บันทึกได้ โดยการ Commit เพียงครั้งเดียว ซึ่งจะทำให้เวลาเราไปดูรายงานการเปลี่ยนแปลง ก็สามารถมองเห็นได้อย่างชัดเจนว่า การเพิ่มฟีเจอร์นั้นๆ หรือแก้บักตัวนี้ ได้เกิดการเปลี่ยนแปลงอะไรบ้างในภาพรวม
สามารถทำงานร่วมกับระบบ Bug Tracking หรือ Project Management ใดๆ ก็ได้
เนื่องจากตัว Subversion สามารถกำหนด Field เพิ่มเติม ตอน Commit ได้ เราจึงสามารถนำมันมาใช้ร่วมกับระบบ Project Management ได้ โดยไม่ต้องเปลี่ยนระบบใหม่ทั้งหมด ซึ่งเอาไว้ผมจะมาเล่าให้ฟังในโอกาสต่อไปครับ

ต้องลงอะไรบ้าง

สำหรับการสรรหา Subversion มาติดตั้งในเครื่องนั้น ง่าย และถูกลิขสิทธิ์ด้วยครับ โปรแกรมหลักๆ ที่เราจะใช้ ก็มีแค่TortoiseSVN เท่านั้นเอง ซึ่งเป็นทั้งระบบ Subversion ในตัว และ GUI สำหรับทำงานร่วมกับระบบ Subversion ด้วย (ถ้าใช้ Windows 64-bit ก็ต้องดาวน์โหลดแบบ 64-bit มาด้วยนะครับ)

แต่ถ้าในการทำงานเป็นทีม ก็จะต้องมีโปรแกรมเพิ่มเติมด้วยครับ ดังนี้

WinMerge จริงๆ แล้วตัว Subversion มันสามารถ Merge ให้เราเองได้อยู่แล้ว แต่ว่าโปรแกรมนี้ จะใช้ในกรณีที่เกิด Conflict ขึ้นครับ แน่นอนว่า ถ้าทำงานคนเดียว โปรแกรมนี้ไม่ต้องใช้เลย เพราะยังไงก็ไม่มีวันเกิด Conflict
Visual SVN Server ชื่อก็บอกอยู่แล้ว ว่าเป็นตัว Server ครับ ใช้สำหรับลงในเครื่อง Server เท่านั้นครับ ในเว็บจะมี Plugin ของ Subversion สำหรับ Visual Studio ด้วย แต่ว่ามีค่าใช้จ่ายครับ เราไม่ชอบ อิอิ

หรือถ้าคนที่อยากจะทำงานจาก Visual Studio อย่างเดียวเลย (ซึ่งผมเองไม่ค่อยชอบ) ก็มีครับ นั่นคือ AnkhSvn ซึ่งได้รับการพัฒนาอย่างต่อเนื่องมาน่าจะเกิน 5 ปีแล้ว

สำหรับโพสนี้ ผมขอแนะนำการใช้งานทั่วไป สำหรับทำงานคนเดียวก่อนนะครับ ซึ่งจะเป็นพื้นฐาน ก่อนจะต่อยอดไปเป็นการทำงานไปทีมในโพสต่อไป อ้อ ลงแล้วอย่าลืม Restart เครื่องก่อนนะครับ

การใช้งาน

หลังการติดตั้ง TortoiseSVN แล้ว จะไม่มีโปรแกรมอะไรใหม่ในเครื่องเลยครับ เพราะว่าการทำงานของ TortoiseSVN นั้น จะเป็นแบบ Shell Extension ซึ่งฝังลงไปในตัว Windows Explorer เลย

สมมุติว่า ตอนนี้เรามีโปรเจรอยู่แล้ว และต้องการเพิ่มโปรเจคนี้ เข้าไปยัง Subversion สามารถทำได้ตามนี้ครับ

อย่างแรกเลย เราจะต้องมีฐานข้อมูล ที่จะเก็บตัวโปรเจคของเรา เรียกว่า Repository ก่อน และเนื่องจาก Subversion มอง Version เป็นแบบภาพรวม เราจึงควรจะมี Repository แยกกันเป็นโปรเจคไปด้วย แต่ถ้าไม่สะดวก หรือไม่ได้ต้องการทราบเลขเวอร์ชั่นที่ละเอียดมาก ก็สามารถจับทุกโปรเจค มารวมกันได้ครับ แต่ต้องจำไว้ว่า การ Commit ครั้งหนึ่ง จะทำให้ Subversion มองว่าทั้ง Repository ได้ขยับเวอร์ชั่นไป เป็นเวอร์ชั่นใหม่ ซึ่งจะส่งผลกับทุกโปรเจคที่อยู่ใน Repository เดียวกันครับ

วิธีสร้าง Repository ในเครื่องก็ง่ายมากครับ แค่สร้างโฟลเดอร์ใหม่ แล้วก็เข้าไปใน Folder นั้น คลิ๊กขวา เลือก TortoiseSVN –> Create Repository Here…

ก็จะพบว่า ด้านในโฟลเดอร์ มีไฟล์กับโฟลเดอร์ขึ้นมาเยอะเลย
ทีนี้ ถ้าเราต้องการจะเข้าไปดู Repository (ต่อไปนี้ขอเรียกสั้นๆ ว่า Repo…จะเรียกมันว่าลิโพเลยดีมั๊ยนะ) ที่เราเพิ่งสร้างขึ้นมา ก็สามารถใช้คำสั่ง RepoBrowser ได้ โดยการคลิ๊กขวาที่ใดก็ได้ใน Windows Explorer หรือ Desktop

จากนั้น ก็กรอก URL ของ Repo ลงไปครับ เนื่องจากว่าเป็นการเข้าถึง Repo ในเครื่อง ก็ต้องใช้ว่า

file:///E:/Repositories/TestProject

สังเกตว่า เป็นเครื่องหมาย / ธรรมดา และมี 3 ตัวนะครับ ที่อยู่ด้านหลัง file:

ถ้าเกิดว่า อยากจะให้สามารถแชร์ Repo ข้ามเครื่องได้ด้วย ก็สามารถใช้เป็น Share Folder ได้ครับ แต่ด้วยระบบของ Subversion แล้ว เป็นสิ่งที่ไม่ควรทำอย่างยิ่ง ถ้าต้องการจะใช้ร่วมกันจริงๆ ควรจะลง Server SVN จะดีที่สุดครับ
จากนั้น ตามหลักสากล เราควรจะมีโฟลเดอร์ด้วยกัน 3 โฟลเดอร์ครับ คือ trunk branches tags ซึ่งเราสามารถใช้ RepoBrowser สร้างขึ้นมาได้เลย

สำหรับทั้งสามโฟลเดอร์นั้น มีจุดประสงค์ดังนี้ครับ

trunk เอาไว้เก็บตัวโปรเจค ที่เรากำลังพัฒนาอยู่ในปัจจุบัน

branches เอาไว้เก็บ Branch ในกรณีที่เราต้องการจะลองเล่นอะไรใหม่ๆ แต่ไม่อยากจะให้กระทบกับตัวหลักใ trunk

tags สำหรับเอาไว้เก็บ Build หรือจะเอาไว้ Backup เมื่อเราทำงานเสร็จเป็นระยะๆ ก็ได้ครับ เช่น Beta 1, RC1, V1.1 เป็นต้น

อันที่จริงแล้ว เราไม่มีกฏตายตัวนะครับ ว่าจะต้องมีโฟลเดอร์เหล่านี้ เราสามารถจะจัดมันยังไงก็ได้ ตามใจชอบ แต่โฟลเดอร์ที่ผมแนะนำนี้ คือรูปแบบทั่วไป ที่ใช้กันอยู่ครับ
เมื่อเรามี Repo พร้อมแล้ว ก็เหลือแค่การเอาไฟล์ ใส่มาใน Repo ของเรา ซึ่งทำได้ง่ายมากครับ จากใน Windows Explorer อีกแล้ว

สมมุติว่า ตอนนี้ผมมีโปรเจคอยู่แล้ว และต้องการนำมันไปไว้ใน SVN ที่ผมจะต้องทำก็คือ ไปที่โฟลเดอร์ที่เก็บไฟล์โปรเจค แล้วคลิ๊กขวา เลือก SVN Checkout ครับ

จากนั้น URL ก็ใส่เป็น URL ของ Repo เรา พร้อมกับโฟลเดร์ trunk เช่น file:///E:/Repositories/TestProject/trunk และโฟลเดอร์ที่จะ Checkout ก็ตรวจให้แน่ใจว่าเป็นโฟลเดอร์ของโปรเจค เพราะตัว Tortoise SVN มันอาจจะเติมชื่อ Folder ใน SVN ให้ครับ

เรียบร้อยแล้ว ก็กด OK เราจะถูกถามว่า โฟลเดอร์มันมีไฟล์อยู่แล้วนะ แน่ใจหรือเปล่า ก็ตอบ Yes ครับ

จากนั้น จะมีอีกหน้าต่างเปิดขึ้นมา เพื่อรายงานสถานะ ทุกอย่างควรจะเรียบร้อยดีครับ

ถ้าเราเปิดดูโฟลเดอร์ ก็จะพบว่า มีเครื่องหมายถูกในวงกลมสีเขียวอยู่ด้วย แปลว่า โฟลดอร์ของเรา ได้กลายเป็น Working Copy ของ โฟลเดอร์ trunk ใน Repo ของเราแล้วครับ นั่นก็คือ โฟลเดอร์นี้ จะเป็นโฟลเดร์ที่เราใช้ทำงาน ซึ่งมันจะลิงค์กับโฟลเดร์ trunk ในลิโพ เอ้ย repo ของเราครับ

จากนั้นสำหรับครั้งแรก เราก็จะต้องเพิ่มไฟล์ให้เข้าไปอยู่ในลิโพซะก่อน โดยการใช้คำสั่ง Commit ครับ ซึ่งก็จะมีหน้าต่างใหม่เปิดขึ้นมา

แต่ก่อนจะเลือก Select All แล้วกด OK ผ่านไปเฉยๆ ขอให้ลองดูซักนิดครับ ว่ามีไฟล์อะไรที่ไม่เกี่ยวข้องกับโปรเจคของเราหรือเปล่า อย่างเช่น

- โฟลเดอร์ bin/obj ซึ่งเปลี่ยนทุกครั้งเมื่อ Compile โปรแกรม
- ไฟล์ .suo ซึ่งเป็นไฟล์ Setting ของ Solution
- ไฟล์ .user ซึ่งเป็นไฟล์ Setting ของ Project

ถ้าพบ ก็เอาออกซะก่อน ไฟล์/โฟลเดอร์เหล่านี้ จะได้ไม่มากวนเลขเวอร์ชั่น (Revision) ของเรา เมื่อเสร็จเรียบร้อย SVN ก็จะรายงานว่า ตอนนี้ Revision เราอยู่ที่หมายเลข 6 นั่นคือ ตั้งแต่สร้างลิโพนี้มา เราได้คอมมิทไปแล้ว 6 ครั้งครับ ถ้าในขั้นตอนที่ผ่านมา ใครสร้างโฟลเดอร์แล้วลบหลายๆ ครั้ง ก็จะได้เลขที่เยอะกว่านี้ ส่วนผมเอง ก็สร้างแล้วลบไปครั้งนึงครับ

เท่านี้ก็เรียบร้อยครับลิโพเราพร้อมใช้งานแล้ว

การใช้งานประจำวัน

ทีเรา ต่อไปพอเราทำงานไปเรื่อยๆ เราก็สามารถบันทึกการเปลี่ยนแปลงเอาไว้ช่วยเตือนตัวเอง และช่วยให้เราคืนชีพโปรเจคได้ ถ้าเราเกิดไปทำมันพังขึ้นมา สิ่งที่เราจะต้องทำเป็นประจำ กับตัว SVN ก็มีลักษณะการทำงาน ตามนี้ครับ

ทำงาน เซฟ แล้ว Commit
หลังจากทำงานไปซักพัก และรู้สึกว่า ทุกอย่างดูดี วันนี้จะพักนอนเล่นแล้ว คุณก็ควรจะสั่ง Commit สักครั้งครับ เพื่อบันทึกข้อมูลลง SVN และจะได้มีโอกาสเขียน Log ไว้เตือนตัวเองด้วย คำสั่งและหน้าจอ Commit ผมได้แสดงให้ดูไปแล้วในหัวข้อก่อนหน้านี้
Update ดู Log แล้วทำงานต่อ
เมื่อเริ่มงานใหม่ในแต่ละวัน เราก็อาจจะกด Update สักครั้งหนึ่ง เพื่อให้แน่ใจว่า ข้อมูลใน Working Folder เรา ตรงกับใน SVN แล้วอาจจะเปิด Log มาดู เพื่อเช็คว่า คราวก่อนๆ เราได้ทำอะไรไปบ้าง ซึ่งวิธีดู Log นั้นง่ายมากครับ คลิ๊กขวา แล้วเลือก Show Log เท่านั้น

แต่ Log ของ SVN จะต่างกับของ VSS ตรงที่เราจะเห็น Log ของการ Commit ไม่ได้เป็น Log แยกตามไฟล์ เพราะอย่างที่ผมได้บอกไปแล้วว่า SVN มองการ Commit เป็นแบบ Atomic หรือมองเป็นการแก้ไขในภาพรวม ถ้าอยากจะดู Log เป็นแต่ละไฟล์ ก็สามารถทำได้ โดยการไล่ Commit ทีละไฟล์ครับ แต่ว่าการทำแบบนั้น จะเป็นการทำลายจุดเด่นเรื่องนี้ของ SVN ที่ช่วยให้เราติดตามการเปลี่ยนแปลงแบบภาพรวมไป

นอกจากนี้ เรายังเอา SVN มาใช้คำนวณ Man Hour ได้ด้วย โดยดูจากอายุของตัวลิโพ และปริมาณการคอมมิทที่เกิดขึ้น โดยการกดปุ่ม Statistics
ลบ/เปลี่ยนชื่อโฟลเดอร์
การลบหรือเปลี่ยนชื่อโฟลเดอร์ ผมแนะนำว่า ควรจะใช้ RepoBrowser เพราะว่าเชื่อถือได้มากกว่า การทำจากใน Explorer ครับ หลังจากทำเสร็จแล้ว ก็แค่สั่ง Update เพื่อปรับให้ตรงกับใน SVN
เปลี่ยนใจ
บางที เราแก้อะไรไปแล้ว แล้วเกิดเปลี่ยนใจ ไม่อยากจะเก็บไว้แล้ว ก็สามารถทำได้ โดยใช้คำสั่ง Revert ครับ
Tag
เมื่องานสำเร็จลุล่วงตามเป้าหมายที่วางไว้ อย่างพวก Milestone หรือ Build เราก็สามารถ Backup เก็บไว้ได้ครับ เกิดวันหน้าวันหลัง ทำอะไรพังขึ้นมา อย่างน้อย ก็ยัง ย้อนเวลากลับมาเอาของเดิมได้ เราเรียกการ Backup นี้ว่า Tag ครับ

การ Tag สามารถทำได้จากหน้า RepoBrowser ครับ (หรือจะเลือก Click ขวาแล้ว Branch/Tag ก็ได้ แต่ผมไม่แนะนำ) ซึ่งจริงๆ แล้วก็ไม่ได้มีขึ้นตอนยุ่งยากอะไร มันคือการ Copy Trunk ไปเก็บไว้นั่นเอง ซึ่งทำได้โดยการ Click ขวาที่ trunk เลือก Copy To.. แล้วใส่ URL ว่า file:///E:/Repositories/TestProject/tags/M1 โดย M1 จะเป็นอะไรก็ได้ครับ มันก็คือ Folder ธรรมดานั่นเอง อย่าลืมใส่ Log ไว้ด้วยละว่า เรา Tag เพราะอะไร

ส่งท้าย

สำหรับการใช้งาน SVN ในขั้นต้น คงจะมีเท่านี้ครับ แต่ยังมีอีกหลายเรื่องมากมาย ที่ผมไม่ได้พูดถึงในโพสนี้ เช่น

แก้ Conflict เวลาคนใช้พร้อมกันหลายคน
Branch
Merge Revision, Branch
การ Backup ลิโพ

อ่านต่อได้จากภาคสอง ที่ http://coresharp.net/blogs/article/archive/2009/03/08/source-control-2.aspx

MapOnMobile 2/x : เรื่องของการวาดแผนที่…

นันคอม — Mon, 16 Mar 2009 07:20:39 GMT

หลังจากใน MapOnMobile ภาคแรก ผมได้แนะนำถึงหลักการต่างๆ รวมไปถึงสูตรคำนวณแล้ว ผมเชื่อว่าด้วยข้อมูลพวกนั้น หลายๆ คน อาจจะไปทำ Map มาสำเร็จแล้วก็ได้ แต่ไม่เป็นไรครับ ในตอนที่สองนี้ ผมจะมาแนะนำถึงเรื่องการวาดแผนที่ก็แล้วกันครับ :)

การวาดแผนที่

ผมขออ้างอิงจากภาพเก่าในภาคแรกมานิดนึงนะครับ สมมุติว่า เราต้องการจะวาดภาพของแผนที่ ในระดับ 2 ซึ่งมีแผนที่ทั้งหมด 16 แผ่น (4 แถว 4 คอลัมน์) ถ้าลองมองข้ามตัวเลขไป มันก็คือการไล่สร้างตาราง จากซ้ายไปขวา บนลงล่างธรรมดานั่นเอง ซึ่งโค๊ด ก็คงหนีไม่พ้น For ซ้อนกัน 2 For แบบนี้

for (int row = 0; row < 4; row++)

{

for (int column = 0; column < 4; column++)

{

// Draw

}

แต่ปัญหาก็คือ จะวาดยังไง และเอาแผนที่มาจากไหน มากกว่า จริงไหมครับ :)

ถ้าเราลืมเรื่องการคำนวณไปก่อน วาดแผนที่มันทั้งโลกเลย ที่ Level 1 (ซึ่งจะมีแค่ 4 แผ่น) URL ของแผนที่ทั้ง 4 ก็คือ

http://a2.ortho.tiles.virtualearth.net/tiles/a0.jpeg?g=45
http://a2.ortho.tiles.virtualearth.net/tiles/a1.jpeg?g=45
http://a2.ortho.tiles.virtualearth.net/tiles/a2.jpeg?g=45
http://a2.ortho.tiles.virtualearth.net/tiles/a3.jpeg?g=45

(a2 ด้านหน้าคือ Server นะครับ)

อย่างแรกเลย คือ การวาดภาพนั้น มีเรื่องของ Performance เข้ามีเกี่ยวข้อง ถ้าเราวาดภาพไป อ่านไฟล์ไป คงไม่ดีแน่ ดังนั้นแล้ว เราควรจะมี Cache เพื่อเก็บภาพไว้ในแรมก่อนครับ และสำหรับการแสดงภาพแผนที่ เราก็ต้องดาวน์โหลดมาด้วย ซึ่งเน็ต 2.5G บ้านเราก็ใช่ว่าจะเร็ว ยังไงซะ ก้อต้องมีที่เซฟภาพไว้ก่อนจะเอาขึ้นมาวาด ดังนั้น ปัญหาแรกเลย คือ เซฟภาพที่ไหน…

โค๊ดด้านล่างนี้ ใช้หาว่า โฟลเดอร์ปัจจุบัน ที่โปรแกรมเรากำลังรันอยู่เนี่ย มันโฟลเดอร์อะไร (ซึ่งเป็นหนึ่งในคำถามยอดฮิตที่พบบ่อยมาก) และผมต่อท้ายให้เป็น Folder ชื่อ Cache ด้วย จะได้เป็นระเบียบ (จริงๆ ควรจะใส่ SD Card นะ…) อ้อ โค๊ดนี้ของ Compact Framework นะครับ ของ Full Framework ใช้ AppDomain.CurrentDomain.BaseDirectory ได้เลย

// Cache Folder

private string _CachePath = Path.GetDirectoryName(

Assembly.GetExecutingAssembly().GetName().CodeBase) + @"\Cache\";

จากนั้น ก็ต้องมีฟังก์ชั่นสำหรับให้เราดึงภาพได้ แต่ว่าภาพจะโดนอ่านจากไฟล์ในครั้งแรก และเราจะเก็บในแรมไว้ สำหรับครั้งต่อไป

สำหรับผู้อ่านตาดี คงจะสังเกตเห็นแล้วว่า เอ๊ะ ทำไม Dictionary มันถึงเป็น WeakReference แทนที่จะเป็น Bitmap…

นั่นก็เพราะว่า ถ้าเราใส่ Bitmap ไปใน Dictionary เลย จะเป็นการสร้าง Strong Reference (ซึ่งตรงข้ามกับ Weak Reference) เข้ากับ Bitmap ครับ ซึ่งถ้านึกภาพของการใช้งาน เวลาเราซูมเข้า ซูมออก ก็จะมีแผ่นแผนที่จำนวนมาก ที่เราไม่ต้องการใช้แล้ว ถ้าเราใช้ Weak Reference ก็จะมีค่าเท่ากับการที่เรา ไม่ได้ถือ Reference ไปยัง Object นั้นไว้จริงๆ ทำให้ CLR สามารถนับ Bitmap ที่ถูกทิ้งพวกนั้นเป็นขยะได้เอง โดยที่เราไม่ต้องจัดการ Remove ออกจาก Dictionary เองครับ

ส่วนการวาด เราจะใช้การ Override ฟังก์ชั่น OnPaintBackground ของคอนโทรลครับ

จะเห็นว่า โค๊ดในการวาด ก็คือวาดตามแถว ตามหลักกันดื้อๆ เลยนั่นละครับ แต่ที่ Advance กว่าหน่อย ก็คือ เราทำการแปลแถว และหลัก มาเป็น Quad Key สำหรับ Virtual Earth แล้วก็ขอภาพจาก Cache เอาออกมาวาดนั่นเองครับ ผลลัพทธ์ที่ได้ ก็ตามภาพครับ :)

เจาะช่อง มองแผนที่ (ViewPort)

แน่นอนว่า นี่แค่ Level 1 แผนที่มันเองก็ทะลุจอไปไกลแล้ว (ยกเว้นคนใช้ Touch HD) นั่นก็เพราะว่า แผนที่ 1 แผ่น ก็มีขนาด 256x256 Pixel ต่อกัน 4 แผ่น ก็เข้าไป 512x512 แล้ว ทั้งที่จอเราเองก็มีกันแค่ 240 Pixel เป็นอย่างมาก เราจึงต้องอาศัยแนวคิดของ Viewport มาช่วยครับ

ลองนึกภาพถึง เรามีหน้าต่างกรอบสีส้มอยู่บนผนัง (ที่ขยับได้) ที่เราใช้มองไปยังวิวภายนอกที่เป็นแผ่นสีฟ้า ถ้าเราอยากเปลี่ยนวิว ไปมองส่วนอื่นบ้าง โดยที่เรายืนมองจากตำแหน่งเดิม ไม่ก้าวไปข้างหน้า หรือถอยหลัง (มองแบบ 2 มิตินั่นเอง) เราก็สามารถทำได้โดยการ ขยับหน้าต่างไปมาตามที่เราต้องการ เพื่อจะมองส่วนอื่นๆ บ้าง

แล้วเราขยับหน้าต่างไม่ได้ละ?…เราก็ขยับวิวภายนอกสิครับ :)

ปกติแล้ว เวลาเราวาดภาพด้วยการเขียนโปรแกรม จุด Origin (0.0) ก็จะอยู่ที่มุมบนซ้ายเสมอ ถ้าเราเริ่มวาดแผนที่แผ่นแรกที่ตำแหน่ง (0, 0) ซึ่งได้จากสูตร column x 256, row x 256 วิวของเราก็จะเริ่มที่ Origin ในเมื่อเราอยากจะ ขยับวิว เราก็แค่เปลี่ยนจุด Origin เท่านั้นเองครับ ซึ่งการทำแบบนี้ เรียกว่า Translation (หรือ Translate Transform ใน WPF/Silverlight นั่นเอง) และตามการใช้งานส่วนมาก เรามักจะให้จุดสนใจอยู่ที่กลาง Viewport ครับ ดังนั้น Translation ของเราก็ควรจะทำตามหลักการนี้ด้วย ดังโค๊ดดัานล่างนี้ครับ

จากโค๊ด จะเห็นว่า ผมทำการ ย้ายแกน โดยย้ายจุดสนใจไปในทางลบ ให้มันชิดมุมซ้ายบนเลย จากนั้น ก็ค่อยขยับมันกลับมาตรงกลางมุมมองอีกที จากการทดสอบกับจุดกรุงเทพ ที่ผมคำนวณให้ดูไว้ในตอนแรก ก็ได้ผลดังภาพครับ

นอกจากนี้ ไม่ว่าจะเป็นการวาดจุดต่างๆ บนแผนที่ ก็สามารถใช้หลักการเดียวกันได้ครับ เช่น ถ้าผมต้องการวาดจุดสีแดง แสดงตำแหน่งของกรุงเทพ ผมก็ทำการคำนวณตำแหน่งของกรุงเทพ ออกมาเป็น Pixel ก่อน แล้วค่อยย้ายแกน เพื่อขยับมันมาอยู่ตรงกลาง

ที้นี้ ก็ใกล้ความจริงมากแล้วละครับ จะวาดแผนที่ก็ได้แล้ว วาดจุดก็ได้แล้ว ยังจะขาดก็แต่ ทำให้แผนที่มันลากได้เนี่ยละ ซึ่งเดี๋ยวผมขออุบไว้ก่อน ว่าจะทำยังไง อีกแป๊บผมจะมา Update เฉลยให้ครับ

ขั้นต่อไป?

สำหรับตอนต่อไป ก็จะต้องเป็นการทำให้โปรแกรม สามารถดาวน์โหลดภาพ ในระหว่างที่เรากำลังเล่นโปรแกรมอยู่ ได้โดยที่โปรแกรมไม่ค้าง ซึ่งต้องใช้เทคนิคเรื่อง Threading เข้ามาช่วย รวมไปถึงการคำนวณแผนที่ใหม่ ซึ่งจะเปลี่ยนไปเวลาที่เราขยับดูแผนที่ ทั้งสองหัวข้อนี้ผมจะมาแนะนำในตอนหน้าครับ และหลังจากเราสร้างให้มันใช้งานได้แล้ว ค่อยเข้าเรื่องการ Refactor มันให้มีโครงร่างสวยๆ ใช้งานง่ายๆ กันต่อครับ

MapOnMobile : รู้จักกับแนวคิด

นันคอม — Fri, 13 Mar 2009 07:21:00 GMT

สวัสดีครับ และยินดีต้อนรับสู่บทความแรกในชุดของ MapOnMobile ซึ่งไอเดียของซีรี่ส์นี้ มาจากการที่เมื่อเร็วๆ นี้ ผมได้พัฒนา Application ให้กับบริษัท ซึ่งต้องการแสดงผลแผนที่บน WPF โดยที่ไม่ใช้ Browser เพื่อที่จะแสดงผลข้อมูลต่างๆ ตามใจชอบอย่างเต็มที่โดยไม่ต้องพึ่ง API และข้อจำกัดของตัว Browser ซึ่งผมคิดว่า แนวคิดนี้ น่าจะเอามาใช้กับการแสดงผลแผนที่บน Windows Mobile ได้เป็นอย่างดีเลยทีเดียว เพราะเรามีข้อจำกัดในการแสดงผลอย่างมาก และแน่นอนว่าการพึ่งพาให้ Browser บน Windows Mobile ทำการแสดงผลแผนที่ให้เรานั้น คงอาจจะเป็นไปไม่ได้เลย

สำหรับบทความในชุดนี้ผมจะพยายามเขียนให้ครอบคลุมตั้งแต่แนวคิดของแผนที่ การออกแบบโปรแกรม และการใช้ Thread และการจัดการบริหารแรม ซึ่งมีเพียงน้อยนิดบน WM ซึ่งหวังว่าจะเป้นประโยชน์กับทั้งผู้เริ่มต้น และผู้ที่เขียนเป็นแล้วครับ

แต่ก่อนที่เราจะไปกันต่อถึงการเขียนโค๊ด ในบทความแรกนี้ มีเรื่องที่เราจะต้องเข้าใจให้ตรงกันก่อนครับ นั่นคือหลักการต่างๆ ที่เกี่ยวของกับโปรเจคของเรา นั่นคือแนวคิดและหลักการการนำแผนที่มาแสดงผลบนโปรแกรมครับ

รู้จักกับ Mecrator Projection

ภาพจาก WikiPedia

เราทราบกันดีว่าโลกเรานั้นกลม แต่ว่าหน้าจอเรามันแบน จะทำอย่างไรจึงจะสามารถแสดงผลโลกกลม บนหน้าจอแบน หรือแผ่นกระดาษได้? ก็คงหนีไม่พ้นกระบวนการที่เรียกว่า Projection นั่นเองครับ หลักการของ Mecrator Projection นั้น มีการใช้กันมาตั้งแต่ปี 1569 เพื่อประโยชน์ในการเดินเรือ เพราะว่ามันสามารถแสดงเส้นทางการเดินเรือที่สำคัญ เป็นเส้นตรงได้ ต่างจากวิธีอื่นๆ โดยแนวคิดของ Mecrator Projection นั้น คือ การเอาแผนที่ ซึ่งเป็นกระดาษแผ่นใหญ่ๆ ม้วนรอบโลกเอาไว้ โดยให้กึ่งกลางของแผนที่แผ่นนี้ แตะกับเส้นศุนย์สูตรพอดี และดึงเอาภาพจากบนโลก มาแสดงผลบนแผนที่แผ่นนี้ครับ

ลองนึกถึงการพยายามพิมพ์ภาพแผนที่โลกบนแผนพลาสติกที่มันยืดๆ ได้และมีความสูงเท่ากับลูกโลกในห้องสมุด เพื่อเอาไปแปะลงบนลูกโลกที่ว่า แน่นอนว่า เราไม่สามารถพิมพ์ภาพด้วยสัดส่วนที่ถูกต้องได้ครับ เพราะตอนที่เราเอาแผนพลาสติกนาบลงไป โดยเริ่มจากบริเวณเส้นศุนย์สูตร เราก็ต้องยืดแผ่นพลาสติกทั้งด้านบนและด้านล่าง เพื่อให้ขอบด้านบน และขอบด้านล่าง สามารถไปปิดขั้วโลกเหนือ และขั้วโลกใต้ได้มิด

การใช้ Mecrator Projection จึงทำให้เกิดความผิดเพี้ยนไปบ้างในเรื่องของขนาดของวัตถุต่างๆ วงกลมสีแดงในภาพด้านข้างนี้ แสดงให้เห็นถึงอัตราความยืด ของวัตถุโดยเฉลี่ลยครับ

ข้อจำกัดอีกอย่างหนึ่ง คือแผนที่แบบ Mecrator นี้ ไม่สามารถแสดงผลบริเวณขั้วโลกได้ครบครับ เนื่องจากความยืดของวัตถในบริเวณดังกล่าวจะเพิ่มเข้าใกล้ค่าอนันต์ (มีลิมิตเป็นอินฟินิตี้) ทำให้เราไม่สามารถวาดแผนที่ออกมาได้ จึงไม่เหมาะกับการใช้งานด้านการบินครับ เพราะว่าไม่ครอบคลุมทั้งโลก และมีหลายสายการบินที่มีเส้นทางบินผ่านขั่วโลกเหนือครับ

ระบบแกนของแผนที่โลก

ผมขอสรุปเป็นข้อๆ ตามนี้ครับ จะได้ไม่เยิ่นเย้อ ดูภาพประกอบได้นะครับ

หมายเหตุ: โลกไม่ได้กลมดิก แต่ผมจะขอเรียกว่า โลกกลมนะครับ
Longtitude คือ แกนนอน หรือแกน X ครับ ถ้าผมบอกว่าโลกกลม แน่นอนว่าทุกคนคงจำได้ว่า วงกลมมี 360 องศา แต่ว่าค่าของ Lon. นั้น จะไม่ได้อิงค่าเป็นวงกลมแบบนั้น เนื่องจากเราจะแบ่งโลกเป้นวองซีกตามที่เราชอบเรียกกันว่า ตะวันออก กับ ตะวันตกครับ โดย –180 องศา คือ ตะวันตกสุด ของโลก (เลยอเมริกาไปหน่อย) และ 180 คือตะวันออกสุดของโลก (ซึ่งก็จะไปชนกับฝั่งตะวันตกสุดของโลกพอดี) โดยจุดกึ่งกลางของโลกคือ 0 องศาครับ

ในภาษาพูด เราจะพูดว่า องศาตะวันตก หรือ องศาตะวันออกครับ ถ้าผมบอกว่า 64 องศาตะวันตก ก็คือ –64 และ 86 องศาตะวันออก ก็คือ 86 องศานั่นเองครับ
Latitude คือแกนตั้ง หรือแกน Y ครับ ถ้าลองนึงภาพโลกในมุมตัดขวาง โลกก็จะกลมเหมือนกัน แต่ว่าผิวของโลกในแนวตั้ง จะมีแค่ครึ่งเดียวเท่านั้น นั่นคือ 180 องศา ต้องลองนึกภาพตอนเราเอาแผนที่พลาสติกห่อโลกครับ แผนที่ที่เราพิมพ์มา มันสามารถหุ้มโลกได้รอบแล้วในแนวนอน พอเราห่อโลกไปแล้ว ตัวแผนที่ก็จะคลุมโลกได้มิดพอดี เหมือนเอากระดาษไปห่อกระป๋องน้ำอัดลมนั่นเอง

เช่นเดียวกับ Latitude ครับ เราได้แบ่งโลกเป็นซีกโลกเหนือ ซีกโลกใต้เหมือนกัน นั่นก็คือ –90 ถึง 90 และภาษาพูดก็จะเรียกว่า องศาเหนือ องศาใต้เช่นเดียวกัน แต่ด้วยระบบ Mecrator Projection เราจะสามารถแสดงผลได้แค่ ±85.05113 องศาเท่านั้น หรือถ้าต้องการคำนวณ สามารถใช้สูตรนี้ได้ครับ
การเขียนพิกัดในภาษาเขียน เรามักจะเขียนในรูปของ DMS หรือ องศา นาที วินาที แทนที่จะเขียนเป็นจุดทศนิยมตามปกติ พร้อมกับมี NSWE กำกับเพื่อบอกซีกโลกครับ เช่น 10”10’10N 10”12’19E หมายถึง 10”10’10 องศาเหนือ 10”12’19 องศาตะวันออก

แน่นอนว่าผู้ใช้ทั่วไป มักจะได้พิกัดมาในรูปนี้ ดังนั้น ในการคำนวณ เราจะต้องแปลงเลขพวกนี้ให้อยู่ในรูปทศนิยมเสียก่อน ซึ่งมีสูตรการแปลงดังนี้ครับ

public double ToDecimal()

{

return this.Degree + (this.Minute / 60d) + (this.Second / 3600);

}

ระบบ Tile System (อ้างอิงจาก Virtual Earth)

เนื่องจากว่า ขนาดของแผนที่โลกนั้น มีขนาดใหญ่มาาาากกก จนไม่น่าจะมีคอมพิวเตอร์เครื่องไหนในโลก สามารถแสดงผลแผนที่โลกทั้งแผ่นที่ความละเอียดสูงสุด ได้ในการอ่านข้อมูลครั้งเดียว เราจึงต้องทำการซอยแผนที่เป็นแผ่นย่อยๆ เรียกว่า Tile ครับ โดย Tile แต่ละแผ่นนั้น จะมี 256x256px ซึ่งจริงๆ จะมีขนาดเท่าใดก็ได้ แต่ทั้งสามระบบ (Virtual Earth/GoogleMap/Yahoo Map) นั้นใช้ 256px เท่านั้นหมดครับ ยกเว้น GoogleMap Mobile ที่จะใช้ 64px เพื่อให้ดาวน์โหลดได้เร็ว ซึ่งจริงๆ แล้วเทคโนโลยี DeepZoom ของ Silverlight นั้นก็ใช้วิธีการซอยแบบนี้เช่นเดียวกันครับ

สำหรับไอเดียของ Tile โดยแริ่มแรกเลย แผนที่โลกทั้งแผ่น จะถูกย่อให้เหลือขนาด 1 Tile ก่อน จากนั้น เมื่อเราทำการซูมเข้าไป 1 ระดับ Tile 1 แผ่นนั้น ก็จะโดนแยกเป็น 4 ส่วน (4 Tile) ดังภาพ โดยแต่ละระบบ ก็จะมีระดับต่างกันไป ซึ่งของ Virtial Earth อยู่ในช่วง 1-23 ครับ

และนอกจากนี้ การคำนวณหา Tile ที่เราต้องการนั้น เพียงแค่ใช้การยกกำลังเท่านั้นเอง จึงทำให้การประมวลผล สามารถทำได้อย่างรวดเร็วมาก และการจัดเก็บ Tile ที่ต้องการ ก็ง่ายอีกด้วย

ขนาดของแผนที่ในแต่ละระดับการซูม

เพื่อให้การคำนวณหาพิกัด โดยอ้างอิงจากพิกัดของพิกเซลบนจอภาพสามารถทำได้ เราจำเป็นจะต้องรู้ขนาดของแผนที่ของแต่ละระดับการซูมด้วยครับ ซึ่งสามารถคำนวณได้ตามสูตรนี้ ต้องระวังด้วยว่า GoogleMap แบบ Street View นั้น ใช้ zoomLevel แบบผกผันนะครับ นั่นคือ เลขมาก ซูมน้อย ส่วนของเจ้าอื่น เป็นค่าตามปกติครับ

public long MapSize(int zoomLevel)
{
 
    return (long)Math.Pow(2, zoomLevel) * TileSize;
}

ลองดูจากตารางด้านล่างนี้นะครับ ว่าในแต่ละระดับการซูม แผนที่จะมีขนาดเปลี่ยนแปลงไปอย่างไรบ้าง

ซูม	ขนาดแผนที่	จำนวน Tile
0	256x256	1
1	512x512	4
10	262144 x 262144	1048576
23	2,147,483,648 x 2,147,483,648	16777216

จะเห็นได้ว่า เรากำลังจะต้องต่อกรกับข้อมูล (ภาพ) ปริมาณมากมายมหาศาลขนาดไหน เพราะฉะนั้น เราจะต้องมีระบบจัดการแรมที่ดีด้วยนะครับ

การหาพิกัดของโลก บนแผนที่

สมมุติว่า ถ้าเรารู้แล้วว่า เราต้องการดูแผนที่ ที่พิกัด 13° 45′ 8″ N, 100° 29′ 38″ E (พิกัดของกรุงเทพ) เราจะทราบได้อย่างไรว่า พิกัดดังกล่าว คือพิกเซลไหนบนแผนที่? การคำนวณดังกล่าว ก็คือการแปลงแกนนั่นเองครับ

ในการแปลงแกนแบบนี้ โดยมาก เราจะทำการ Normalize ค่าที่เราจะแปลง ให้อยู่ในช่วง 0 ถึง 1 ก่อน (คล้ายกับการเทียบบัญญัตไตรยางค์ [rule of three in arithmetic] เขียนถูกมั๊ยเนี่ย) เพื่อที่เราจะได้รู้ว่า ค่าที่เราต้องการ อยู่ในช่วงไหน ของแกนเก่า จากนั้นถึงเอาไปเทียบกับแกนใหม่อีกทีหนึ่ง

สำหรับค่า Longtitude นั้น ง่ายมากครับ เนื่องจากเป็นค่า Linear และเรารู้อยู่แล้วว่า โลกกลม นั่นก็คือมี 360 องศาถ้าต้องการจะหาว่า องศาที่ต้องการ อยู่ในช่วงไหน ก็ใช้ว่า

double x = (longtitude + 180) / 360;

ซึ่งจะเห็นว่า ผมได้แปลงค่า longtitude ให้กลับมาในช่วง 0-360 ก่อน (จากเดิมอยู่ที่ –180 ถึง 180) แล้วหาค่า x ออกมาครับ ส่วนค่า lontitude นั้น ยากหน่อย ตรงที่เราต้องใช้สูตรของ Mercator Projection มาช่วยครับ

ซึ่งสูตรที่สามารถแปลงเป็นโค๊ดได้ง่ายที่สุด ก็คือสูตรที่สองครับ เนื่องจากใช้เพียงฟังก์ชั่น Sin กับ Log เท่านั้น โดยสามารถแปลงเป็นโค๊ดได้ว่า

double sinLatitude = Math.Sin(coord.Latitude * Math.PI / 180);       
double y = 0.5 - Math.Log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * Math.PI);

แต่ผมขอยอมรับตามตรงว่า ผมจำไม่ได้แล้วว่าทำไมถึงแปลงได้แบบนี้ เคยพยายามทำความเข้าใจอยู่พักใหญ่ๆ แต่ตอนนี้ลืมไปแล้วละ ถ้าใครคล่อง Math มาบอกกันบ้างก็ดีนะครับ ส่วนที่ใช้ฟังก์ชั่น Math.Log เฉยๆ เพราะว่า Math.Log จะใช้ฐานเป็น e ถ้าไม่ได้กำหนดฐานครับ ซึ่งก็คือ ln นั่นเอง จากสุตรนี้ ค่าของ x, y ก็จะโดน Normalize ให้อยู่ในช่วงขอพิกัดของแผนที่แบบ Mecrator Projection เรียบร้อยแล้ว

จากนั้น เราก็นำค่าที่ได้ มาหาพิกัดเป็น Pixel โดยเทียบกับจนาดของแผนที่ปัจจุบัน ซึ่งในส่วนที่แล้ว เราได้สร้างฟังก์ชั่น MapSize ขึ้นมาเรียบร้อยแล้ว ก็เพียงแต่นำฟังก์ชั่นนั้นมาใช้ครับ เช่น พิกัดของกรุงเทพ ก็จะคำนวณได้เป็น

x=0.779149691666667, y=0.461427218750532

จากนั้น เราก็ดูว่า ขนาดของแผนที่ในระดับที่เราต้องการ มีขนาดเท่าไหร่ เช่น ถ้าเรากำลังดูแผนที่โลกที่ระดับไกลที่สุด (ระดับ 1) ของ VE แผนที่โลกก็จะมีขนาด 512x512 pixel (2^1 * 256) ซึ่งก็คือ

x=0.779149691666667*512 = 398.924642133333504
y=0.461427218750532*512 = 236.250736000272384

เห็นแล้วใช่มั๊ยครับ ว่าทำไม double จึงจำเป็น ถ้าเราลองพลอตจุดนี้ลงในแผนที่โลก ขนาด 512x512px (แผนที่จาก Virtual Earth) ก็จะพบว่า จุดที่เราได้นั้น อยู่บริเวณกรุงเทพพอดีเลยครับ

หา Tile ที่พิกัดนั้น ตั้งอยู่

หลังจากที่เราทราบพิกัดบนแผนที่่เรียบร้อยแล้ว ปัญหาต่อไปก็คือการหา Tile ที่พิกัดนั้นตั้งอยู่ เพื่อที่เราจะได้สามารถโหลด Tile ที่ถูกต้องออกมาได้ ซึ่งการหา Tile นั้น ทำได้ง่ายมาก เนื่องจากขนาดของแผนที่นั้น จะมีขนาดตายตัว และเป็นภาพสี่เหลี่ยมจัตุรัส การหา tile นั้น ก็เพียงแค่นำเอาพิกัด หารด้วยขนาดของ Tile แบบไม่เอาเศษนั่นเอง เช่น

x=398.924642133333504 / 256 = 1
y=236.250736000272384 / 256 = 0

เมื่อเราทราบแล้วว่า เราจะต้องใช้ Tile ชิ้นไหน เหลือก็เพียงแค่ การหา URL ที่จะโหลด Tile เหล่านี้มาใช่ นั่นเองครับ

URL ของ Tile

สำหรับ URL ของผู้ให้บริการแต่ละแห่ง ในการดาวน์โหลดแผนที่ ก็จะแตกต่างกันไป ซึ่งผมขอยกตัวอย่างเจ้าใหญ่ๆ สองที่ คือ Microsoft และ Google ครับ แต่ก่อนจะนำ URL เหล่านี้ไปใช้ ผมอยากจะให้ท่านที่สนใจจะนำไอเดียเหล่านี้ไปใช้ เช็คกับ License ของผู้ให้บริการแผนที่เสียก่อนว่า เราสามารถนำแผนที่เขามาใช้ได้อย่างไรบ้างนะครับ

Virtual Earth

รูปแบบ URL:
http://[type][server].ortho.tiles.virtualearth.net/tiles/[type][location].[format]?g=45

Server: เลข Server ที่จะดาวน์โหลด มี 4 Server คือ 0, 1, 2, 3.
Type: r = แผนที่ธรรมดา, a = แผนที่ดาวเทียม, h = แผนที่ดาวเทียมแบบมีเส้นทาง.
Formats: png สำหรับ r และ jpeg สำหรับที่เหลือ
Location: จากฟังก์ชั่น TileXYToQuadKey ซึ่ง Microsoft มีโค๊ดให้ครับ

/// <summary>
/// Converts tile XY coordinates into a QuadKey at a specified level of detail.
/// </summary>
/// <param name="tileX">Tile X coordinate.</param>
/// <param name="tileY">Tile Y coordinate.</param>
/// <param name="levelOfDetail">Level of detail, from 1 (lowest detail)
/// to 23 (highest detail).</param>
/// <returns>A string containing the QuadKey.</returns>
public static string TileXYToQuadKey(int tileX, int tileY, int levelOfDetail)
{
    StringBuilder quadKey = new StringBuilder();
    for (int i = levelOfDetail; i > 0; i--)
    {
        char digit = '0';
        int mask = 1 << (i - 1);
        if ((tileX & mask) != 0)
        {
            digit++;
        }
        if ((tileY & mask) != 0)
        {
            digit++;
            digit++;
        }
        quadKey.Append(digit);
    }
    return quadKey.ToString();
}

GoogleMap

ของ GoogleMap นั้นจะง่ายกว่า ตรงที่เราสามารถใส่เลข Tile ที่เราคำนวณได้ทันที โดยไม่ต้องแปลงค่าเพิ่มครับ โปรดสังเกตว่า Zoom ของ GoogleMap นั้น เริ่มที่ 17 นั่นคือมุมกว้างที่สุด ไปหา 1 ซึ่งคือมุมแคบที่สุด (ซูมมากที่สุด) สำหรับ Url นี้เป็น URL ของ Street Map ครับ

รูปแบบ URL:
http://[server].google.com/mt?v=[version]&x=[column]&y=[row]&z=[zoom]

Servers: mt0, mt1, mt2, mt3
Version: w2.89 แต่ผมแนะนำให้ลองใช้ Fiddler เช็คดูว่า ตอนเราเล่น GoogleMap ตัว Browser นั้นไปโหลดแผนที่จากไหนมา แล้วใช้เลขเวอร์ชั่นตามนั้นครับ
Row, Column: tile ที่ได้จากการคำนวณ
Zoom: 1-17

สำหรับ Tile ที่มีพิกัดของกรุงเทพอยู่ ก็คือ
http://r3.ortho.tiles.virtualearth.net/tiles/r1.png?g=45 ดังภาพครับ

ส่วนของ GoogleMap จะเป็นภาพนี้ครับ
http://mt1.google.com/mt?v=w2.89&hl=th&x=1&y=0&z=1&s=zz
(จะเห็นว่า Url มีพารามิเตอร์ s ด้วย ซึ่งเอาไว้ใช้หลอกไม่ให้ Browser Cache ภาพไว้)

สรุป

ในบทความนี้ ผมได้ครอบคลุมถึงหลักการแสดงผลแผนที่ ตลอดจนการคำนวณต่างๆ ที่เกี่ยวข้องไว้ ซึ่งผมเชื่อว่า น่าจะเป็นจุดเริ่มต้น ให้คุณสามารถทดลองเขียนโค๊ด เพื่อดาวน์โหลดแผนที่จากผู้ให้บริการต่างๆ ได้แล้ว และในบทความต่อไป ผมจะแนะนำถึงการออกแบบตัวโปรเจคนี้ เพื่อให้สามารถทำงานได้กับระบบแผนที่หลายๆ เจ้าได้ครับ

สำหรับการวาดแผนที่ ดูต่อได้ภาคสองเลยครับ
http://coresharp.net/blogs/article/archive/2009/03/15/maponmobile2.aspx

แก้ปฏิทินภาษาไทยบน Silverlight

นันคอม — Sun, 08 Mar 2009 17:32:50 GMT

หลังจากเล่นๆ Silverlight อีกสักพัก ผมก็พบว่า ปฏิทินของ Silverlight ก็ไม่สามารถแสดงวันที่ภาษาไทยได้ถูกต้องครับ ผมได้พยายามจะ Feedback เรื่องนี้ไปที่ทีม Silverlight แล้ว ในงาน MVP Summit ก้อไม่ได้รับคำตอบที่น่าพอใจเท่าที่ควรครับ

จะเห็นว่า ปฏิทินทางขวา ของ Silverlight จะแสดงปี เป็นปี 2009 แทนที่จะเป็นปี 2552 อย่างที่มันควรจะเป็น ซึ่งตามที่ผมเข้าใจ ปฏิทินไทย เริ่มใช้วันที่ตามแบบสากล ตั้งแต่ปี 1 มกราคม ปี 1941 (พ.ศ. 2484) โดยจอมพลแปลก พิบูลย์สงคราม (อ้างอิงจาก: http://en.wikipedia.org/wiki/Thai_solar_calendar) ซึ่งทำให้ปฏิทินไทย กับปีสากล (Gregorian Calendar) ตรงกัน ตั้งแต่วันนั้น ยกเว้นแต่ว่า เราเลือกใช้ พุทธศักราช แทน คริสต์ศักราช ซึ่งมันขัดกับประเทศเราโดยธรรมชาติอยู่แล้ว จากการเปลี่ยนแปลงครั้งนั้น ทำให้เราสามารถใช้ พ.ศ. ลบ 543 เปลี่ยนเป็น ค.ศ. ได้ทันที และวันที่ก็ตรงกันหมด ตามหลักสากล

แต่ จากความพยายามอธิบายของผมอยู่นาน http://silverlight.net/forums/p/76896/182957.aspx ก็เหมือนว่าจะไม่เป็นผลเท่าไหร่ และก็คงได้รับการยืนยันว่า ปฏิทินไทย ไม่ใช่ Gregorian Calendar อยู่อย่างนั้น ผมก็คงต้องทำใจ และทำปฏิทินของผมเอาเองครับ

เรื่องน่าแปลกก็คือ ผมได้ลองกับ Culture อื่นๆ เช่น จีน (ซึ่งมีปีที่มี 13 เดือนได้) ไต้หวัน ญี่ปุ่น ก็พบว่า ปฏิทินเขาเป็น Gregorian ทั้งหมด แต่ของเราดันมีอัลกอริธึมแปลกๆ ออกมาแทน

และที่น่าสังเกต คือ อย่างไต้หวัน จะใช้ Gregorian เป็นหลัก และมี Optional Calendar เป็นปฏิทินไต้หวันอยู่ด้วย (สังเกตว่ามันมี Min/Max Supported Date Time)

แต่ของไทย กลับใช้ปฏิทินหลัก เป็น ปฏิทินไทย แล้วมี Gregorian เป็น Optional แทน

ผมก็ต้องขอบอกว่า ผมเองก็ไม่ได้ดู BCL (Base Class Library) ของ .NET อย่างชัดแจ้ง ขนาดที่จะรู้ว่า เวลามัน Format Date/Time มันทำงานอย่างไรนะครับ แต่ถ้าเอาตามความคิด จากที่เห็น th.DateTimeFormat ควรจะเป็นคนที่จัดการ Format วันที่ให้ ซึ่งถ้าเป็นตามนั้น การสร้าง CultureInfo ของประเทศไทยจริงๆ ก็น่าจะสามารถสร้างคลาส ThaiGregorianCalendar ที่ Inherit จาก Gregorian Calendar แต่มี Min Supported Date/Time เป็น 1/1/1941 และจัดการแปลง 2009->2552 ให้ ตอน Format จากนั้นก็มี ThaiBuddhistCalendar เป็น Optional Calendar สำหรับ Format วันที่ก่อนวันที่ 1/1/1941 ถึงจะถูกต้องมากกว่า และทำให้ Cultureinfo ของไทย เป็นสากลไปด้วยในตัว

และปฏิทิน Silverlight ก็จะ Support ปฏิทินไทย ไปโดยปริยาย…รวมไปถึงอีกหลายๆ คอนโทรล ในอนาคต ซึ่งผมคิดว่า จะต้องมีปัญหาอีกแน่นอน

บ่นพอละ

สำหรับ Calendar ที่ผมทำขึ้นนะครับ ผมลองกับ Culture หลายๆ อันแล้ว ก็ใช้ได้ดี (แต่ไม่รู้ว่ามีปัญหาหรือเปล่านะ) เพราะอย่างที่เห็นว่า Culture อื่นๆ เขากำหนดเป็น Gregorian Calendar ไว้หมดแล้ว แล้วผมก็ทำให้ Calendar ผม Resize ได้ ตามใจชอบ และรูปแบบเหล่านี้เป็นเทมเพลตทั้งหมดนะครับ สามารถใช้ Blend ไปแก้ Control Template ได้ ซึ่งก็ไม่มีอะไรมากครับ มี Grid ด้านล่าง และปุ่ม 3 ปุ่มเท่านั้น

ส่วน Style ของปุ่ม ก็สามารถเซ็ตได้ด้วย Property ต่างๆ ตามด้านล่างนี้ครับ แต่ถ้าเทมเพลตของผมเลย ผมใช้ใส่เอาไว้ใน Resource ของ Grid ครับ ลองแก้ Control Template ดูน่าจะมองเห็น

การทำงานก็จะคล้ายกับปฏิทินใน Vista นะครับ แต่ผมยังไม่ได้เพิ่ม Animation เข้าไป สามารถแสดงมุมมองแบบ เดือน แบบปี แบบทศวรรษ ได้ เพื่อให้เลือกได้สะดวก

ถ้าพบบัก ก็มาโพสรายงานได้ในฟอรั่ม หรือในคอมเมนต์นี้นะครับ

Download: http://coresharp.net/files/folders/projects/entry654.aspx

Textbox บน Silverlight รองรับภาษาไทยได้แล้ว!

นันคอม — Sun, 01 Mar 2009 09:49:33 GMT

ถ้าใครเคยลองใช้ Silverlight จะพบว่า Silverlight มีข้อจำกัดนิดหน่อย นั่นก็คือ มันไม่สามารถพิมพ์ภาษาไทยได้ครับ ไม่ใช่เพราะเรื่องฟอนต์นะครับ แต่ว่า เป็นเพราะว่า หลังจากเราตั้งฟอนต์ให้เป็นภาษาไทยแล้ว และทำการพิพม์ข้อความลงไป มันจะ Crash หลังจากเราพิมพ์สระครับ หน้าจอตอน Crash ก็เป็นแบบนี้

หลังจากนั่งงมหาวิธีอยู่นาน ผมก็พบกับทางที่จะให้ Silverlight สามารถรองรับการพิมพ์ภาษาไทยใน TextBox ได้ครับ

ตอนนี้ ผมได้เริ่มแก้ไข ให้มันสามารถป้องกันสระลอย และเพิ่มอื่นๆ อีกหลายอย่างเข้าไป อย่าง แสดงธงภาษาไทย ภาษาอังกฤษ (เพราะไม่ได้ใช้ Setting จากเครื่อง) ไว้เมื่อมันพร้อมกว่านี้ ผมจะแวะมาอัพเดทครับ

เปลี่ยน Font ของ UI บนวินโดวส์

นันคอม — Sun, 31 Aug 2008 01:25:17 GMT

ตอนนี้ ผมใช้ Windows Vita Ultimate อยู่ครับ ซึ่งทุกคนก้อน่าจะยอมรับว่า มันก้อดูสวยดี แต่ที่ยังไม่ถูกใจผมก็คือ เรื่อง Font ครับ

บน Vista จะใช้ Font Segoe UI เป็นหลัก ซึ่งภาษาอังกฤษมันก้อสวยดีหรอก แต่ว่าภาษาไทยนี่ ตัวอักษรมันจะแบนๆ แล้วก้อไม่คมด้วย ผมเลยอยากจะเปลี่ยนให้ทุกที่ มันใช้ Font โปรดของผม ที่ชื่อว่า Leelawadee ให้หมด (ถ้าคุณเข้าเว็บนี้ด้วย Vista มันก้อจะเป็นฟอนต์นี้ละครับ) แน่นอนว่า ความพยายามแรกของผมคือ การใช้หน้าจอของวินโดวส์เปลี่ยนมันดูครับ

แต่หลังจากลองเปลี่ยนแล้ว ก้อพบว่า บางที่มันก้อเปลี่ยน บางที่มันก้อไม่เปลี่ยน อย่างเช่นขอความในหน้า Personalize เนี่ยแหละ มันก้อยังไม่ยอมเปลี่ยนอยู่ดี ผมจึงเริ่มเข้าใจว่า ที่คนบอกว่า OSX มี UI ที่มัน Consistent มันเป็นอย่างนี้นี่เอง ขนาดฟอนต์บนวินโดวส์นี่ คนละที่ยังใช้ไม่เหมือนกันเลย เหอๆ

เอาละ ไม่เป็นไร ผมใช้ท่ายากก็ได้ครับ! ถ้าลองเปิด Registry ขึ้นมาดู จะพบว่า Font ในเครื่อง มันจะมี Registry เก็บอยู่ว่า ฟอนต์นี้ ชื่อไฟล์อะไร แต่ผมเกลียด Segoe UI แล้ว ผมก้อจัดการไปลบชื่อไฟล์มันทิ้งซะเลย (อย่าลืม Export ไว้ก่อนทำละครับ)

และด้วยกลไกของวินโดวส์ ถ้ามันหาฟอนต์ไม่เจอ มันจะตามมาดูที่นี่ครับ FontSubstitutes

ผมก้อแค่เพิ่ม String Value อันใหม่เข้าไป 3 อัน ตั้งชื่อว่า "Segoe UI", "Segoe UI,0", "Segoe UI,222" อย่าถามนะครับว่า 0 กะ 222 คืออะไร ผมก้อไม่รู้เหมือนกัน ผมทำตามอันอื่นๆ ในนี้ครับ เหอๆๆ แต่ดูเหมือนว่า 0 หมายถึง Charset มาตรฐานของตัวฟอนต์ และ 222 คือภาษาไทยครับ อย่าลืม Export ไว้ด้วยละครับ

หลังจากแก้เรียบแล้ว (อาจจะดู Font อื่นๆ ด้วยก็ได้ เช่น MS Dialog, MS Sans) ก็ Restart เครื่องครับ จะพบว่า Font ในวินโดวส์สวยสมใจละ ตัวอักษรของ Leelawadee เขาจะคมกว่า Segoe มากครับ

ลองเทียบของผม กะของเครื่องคุณด็ได้เลย อิอิ

ถ้ายังคมไม่พอ ผมมีอีกโปรแกรม ที่จะช่วยให้มันตักษระยิ่งคมเข้มกว่าเดิมได้ครับ คือ ClearTweak เอาไว้ปรับ Contrast ของระบบ ClearType ในวินโดวส์

ตอนนี้ผมใช้ที่ 1000 เลยครับ คือเข้มสุดๆ ซึ่งค่าปกติจะอยู่ที่ 1400 ที่ผมคิดว่ามันบางเกินไป ลองเทียบกันดูครับ (ต้องจอ LCD นะครับ ถึงจะเห็นผลชัดเจน)

1400:

1200:

1000:

ขอให้สนุกกับการ Tweak ครับ ! ตอนนี้ผมยังติดนิดนึงที่ ตักษรเวลากรอกรหัสผ่านมันเป็นสี่เหลี่ยม แต่ยังไม่มีเวลานั่งลองแก้ครับ เพราะแก้ที ต้อง Restart ที ถึงจะเห็นผล