ความคิดที่เป็น OOP กรณีตัวอย่างที่ 1

สวัสดีครับเพื่อนๆ ผมไม่ได้เขียนบล็อกตั้งนาน ก็จะแชร์สิ่งที่ทราบมาอยู่ 2 เรื่องใหญ่ๆ ได้แก่การออกแบบ OOP กับ การออกแบบตารางในฐานข้อมูล มาดูเรื่อง OOP กันก่อน เข้าเรื่องเลยนะครับ
1) สมมติเรามีคลาสที่รับผิดชอบเกี่ยวกับการเคลื่อนไหวของราคา คือ
- ราคาเปิด (open price)
- ราคาปิด (close price)
- ราคาสูง (high price)
- ราคาต่ำ (low price)
ทำนองนี้ เราจะเรียกเขาว่า OCHLMovement

2) เรามีอีกคลาสรับผิดชอบเกี่ยวกับปริมาณ กล่าวคือ
- ปริมาณล่าสุด (last volume)
- ปริมาณสูงสุด (max volume)
- ปริมาณต่ำสุด (min volume)
ทำนองนี้ ซึ่งเราเรียกเขาว่า VolumeMovement
มันเป็นแค่การสมมตินะครับ เมื่อให้ทั้งสองคลาสนี้ทำงานในส่วนที่ตนรับผิดชอบ OCHLMovement จะไม่ยุ่งกับ VolumeMovement และ VolumeMovement ไม่มั่วกับ OCHLMovement ต่างก็ทำงานของตนอย่างผาสุก

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

วิธีที่ 1. โอ้ข้าเห็นแล้ว ข้ารู้ข้าเห็น โอ้ มันมีส่วนที่เป็นราคาและส่วนที่เป็นปริมาณ แสดงว่าแบบนี้คลาสอย่าง OCHLMovement กับ VolumeMovement ก็น่าจะใช้ได้ ออกแบบได้อย่างนี้
class Stock
- ochlMovement: OCHLMovement
- bidVolume: VolumeMovement
- offerVolume: VolumeMovement
- lastTradeDate: Date

หรือ วิธีที่ 2. อื่ม...คิดไม่ออก ไม่รู้ว่าระบบที่มีมีคลาสอะไรบ้าง เอ้~จะคิดแบบนั้นไปทำไม ก็สร้างมันขึ้นทื่อๆเลย จัดไปตามที่มันต้องมี class Stock
- openPrice: double
- closePrice : double
- highPrice: double
- lowPrice: double
- bidVolume: double
- offerVolume: double
- lastTradeDate: Date

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

ทำความเข้าใจ Package

ขอให้เพื่อนๆดูวีดีโอนี้เสียก่อน แล้วหลังจากนั้นเรามาคุยกันว่า package เป็นอย่างไรนะ

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

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

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

สองขา.ไก่
สองขา.นก
สองขา.กา

สี่ขา.หมู
สี่ขา.หมา

ไร้ขา.ปลา

แล้วที่ถูกต้องจัดอย่างไร? แบบนี้ครับ

สัตว์.ไก่
สัตว์.นก
สัตว์.กา
สัตว์.หมู
สัตว์.หมา
สัตว์.ปลา

2) ผิด เพราะลำดับขนาดไม่ถูกต้อง ขนาดงั้นเหรอ? ใช่ครับขนาดของ package ไม่ถูกต้อง มาดูตัวอย่างที่ผิดกันเลย

บ้านของฉัน.ประเทศของฉัน.โลกของฉัน
myhome, mycountry, myworld

อ่าว? แล้วที่ถูกเป็นอย่างไร เป็นอย่างนี้ครับ

โลกของฉัน.ประเทศของฉัน.บ้านของฉัน
myworld.mycountry.myhome

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

com.homework.ไก่
com.homework.ห่าน
com.homework.เป็ด

สรุปว่าควรเขียน package ด้วยทุกครั้งเพื่อเป็นวินัยที่ดีให้กับตัวเองและทีมคณะครับ

Jasper report by Jaspersoft Studio part 3

>> หลังจากระเบิด zip ออกมาแล้วก็คลิกที่ไอคอน Jaspersoft Sutio ได้เลย ไม่มีอะไรต้องกลัวนะ (อิอิ) เราก็จะพบกับจักรวาลของ Eclipse (หมายถึงหน้าตามันคล้ายกัน) กวาดสายตาไปทั่วๆก่อน อุ้ยนั่นอะไร อ๊ะมีนี่ด้วย (อิอิ) ... ผมขอกินยาหมอสั่งแปปครับ

>> เราจะสังเกตได้ว่าด้านซ้ายมือมีหน้าต่างที่เรียกว่า Project Explorer หากเผลอปิดไปก็สามารถเปิดมันได้ใหม่ที่เมนู
Window > Show View > Other > แล้วค้นคำว่า Project Explorer มันก็จะปรากฏออกมา > คลิกมันซะ

>> ที่หน้าต่างนี้เราจะเห็น 4 อย่างด้วยกัน ได้แก่

- MyReports ชื่อโปรเจ็กต์ของเรา
- JRE System Library ไลบรารี่ของ java run-time ที่ติดตั้่งอยู่ในเครื่องของเรา
- JasperReports Library ไลบรารี่หัวใจของเรื่อง ไม่มีมันก็ออกรายงานไม่ได้ แกะเข้าไปดูสิ
- Jaspersoft Server Library อันนี้ Jaspersoft โฆษณามาก (ตัวทำเงินของเขา) คือไลบรารี่เพื่อให้ Jaspersoft Studio นี้ติดต่อกับโปรแกรม JasperReports Server

>> คลิกขวาที่ MyReports แล้วเลือก
New > Jasper Report



ก็จะสร้างไฟล์ XML ที่มีนามสกุล .jrxml ซึ่งก็คือไฟล์รายงานที่เราต้องการ และตามเอกสารของเขานั้น เขาจะพาเราสร้างรายงานรายการกาแฟที่ถูกขนส่งทางเรือ ตามรูปไปเรื่อยๆเลยจ้า

>> หน้าต่างชื่อ New Report Wizard นี้จะให้เราเลือกว่าจะนำข้อมูลมาเติมลงในรายงานนี้ผ่าน data source ใด มีให้เลือกระหว่าง

1) One Empty Record - Empty rows หมายถึง เรายังไม่มีข้อมูล ให้เราผูก data source แบบว่างเปล่านี้ไปก่อน
2) Sample DB - Database JDBC Connection หมายถึง ใช้ฐานข้อมูลที่เขาเตรียมไว้ให้แล้วผ่าน JDBC (ตัวเชื่อมต่อฐานข้อมูล)
เราก็เลือกข้อ 2) ตามเขาไป

>> จะปรากฏหน้าต่างถามว่าเรายังไม่ได้กำหนด Query นะ เราก็ตอบ ok แล้วพิมพ์ Query ลงไปตามนี้
select * from orders



>> แล้วเลือกคอลัมน์ที่ต้องการจากตาราง orders

>> มันจะถามให้ว่าอยาก group by ไหม (คำสั่งของภาษา SQL) ตอนนี้ไม่ต้อง ผ่านไป

>> Congratulations! ก็กดปุ่ม Finish

>> ว้าย! รายงานรายการขนส่งกาแฟก็มาแล้ว เย้ๆ ดูดี

>> ขอดูหน่อยว่า มันได้สร้างโปรเจ็กต์ MyReports นี้ไว้ที่ไหนในเครื่องเรา คลิกขวาที่
MyReports > Properties
ให้ copy แถบที่ป้ายสีน้ำเงินนั่นไปวางที่ address bar ใน Windows แล้วกด enter


>> ทดสอบกดปุ่ม Preview

>> สุดท้ายก็ export มันออกเป็นไฟล์ที่เราต้องการ ในที่นี้ผมเลือก PDF ครับ



part นี้จบเท่านี้ครับ ไม่ได้ลงรายละเอียดอะไรมาก ฝันดีครับผม

Jasper report by Jaspersoft Studio part 2

ดาวน์โหลด Jaspersoft Studio และเอกสาร

เพื่อให้ Jaspersoft Studio ทำงานได้ นี่คือสิ่งจำเป็นสำหรับมันครับ
1) Java Runtime Environment (JRE) ของผมติดตั้งแล้วคือเวอร์ชัน jre1.8.0_91
2) ระบบปฏิบัติการ
- Windows 7/8 จะเป็น 32 หรือ 64 bit ก็ได้ ของผมคือ windows 10 Home 64 bit ครับ
- Linux จะเป็น 32 หรือ 64 bit ก็ได้
- MacOS X 64 bit
3) พื้นที่ว่างในเครื่องอย่างน้อย 500 MB ขอแรม 2 GB

เลือก package ที่เข้ากันได้กับระบบปฏิบัติการของเพื่อนๆ
ผมใช้ Windows แต่ส่วนตัวไม่เลือก .exe เลือกที่เป็น .zip ครับ (โหลดแล้วแตก zip ใช้ได้เลย)
http://community.jaspersoft.com/project/jaspersoft-studio/releases

Note.
มายเหตุ มันถามการ Log in or Register ให้กดลิงค์ No Thanks ตรงมุมขวาล่างผ่านไป (ยังไม่อยากลงทะเบียนตอนนี้)

โหลดเอกสาร
ใครที่ชอบอ่านเอกสารประกอบการใช้งานหรือที่เรียกว่า API แบบออนไลน์ก็ผ่านไป แต่ผมขอโหลดมาเก็บไว้อ่านที่เครื่องนะ
- เปิดไปที่หน้าของโปรแกรม JasperReports Server (มันคืออะไรนั้นตอนนี้เรายังไม่ต้องสนใจครับ เราแค่แอบมาขอเอกสาร Jaspersoft Studio เฉยๆ)
http://community.jaspersoft.com/project/jasperreports-server/releases

- เลือก Jaspersoft-Studio-User-Guide.pdf ตามรูป มันจะปรากฏหน้าต่าง Log in or Register ขึ้นมา ไม่ต้องสนใจ กดลิงค์ No Thanks ตรงมุมขวาล่างผ่านไปเลย (ยังไม่อยากลงทะเบียนตอนนี้)

เป็นว่าตอนนี้เราก็มีโปรแกรม Jaspersoft Studio พร้อมทำงานกับเอกสารพร้อมอ่านประกอบควบคู่กันแล้ว ทดลองเปิดขึ้นมาเลยเป็นไง สวัสดีครับ

Jasper report by Jaspersoft Studio part 1

สวัสดีครับเพื่อนๆ นานหนักนานแล้วที่ผมได้เขียนบทความเกี่ยวกับ jasper report กับ iReport ก็ตั้งใจว่าจะเขียนต่อแต่ก็หยุดไปเฉยๆ (มีเรื่องอื่นต้องรีบศึกษาก่อนครับ) และเมื่อได้กลับมาเขียนก็ได้ความรู้มาว่า แท้จริงแล้ว jasper report ถูกจัดการด้วยอีกเครื่องมือหนึ่งที่ทันสมัยกว่า iReport เสียอีก (วัดจากความสามารถที่มากกว่า iReport) มันมีชื่อว่า Jaspersoft Studio ครับ

ถามว่า Jasper report คืออะไร?
ตอบ มันคือไลบรารี่ของจาวา (จาร์ไฟล์) ที่ว่าด้วยเรื่องของการสร้างรายงานครับ ตัวตนคือ XML และท้ายที่สุดมันสามารถกลายร่างไปเป็น PDF, RTF, XML, XLS, CSV, HTML, XHTML, text, DOCX, OpenOffice เป็นต้น

ต้องเขียน XML เหรอถึงจะสร้างรายงานได้?
ตอบ ถูกต้องครับ

ยากไปไหมถ้าจะให้เขียน XML?
ตอบ ยากเมื่อเราไม่ทราบความหมายของ tag ครับ แต่ก็มีเครื่องมือช่วยเขียน XML ให้ มีอยู่สองตัวที่ผมแนะนำ
- iReport
- Jaspersoft Studio

เครื่องมือสร้างรายงานด้วย Jasper report library ทั้งสองที่กล่าวมาต่างกันอย่างไรเหรอ?
ตอบ ขอตอบแบบง่ายที่สุดดังนี้ครับ
- iReport มีสภาพแวดล้อม (หน้าตาโปรแกรม) ที่เกิดจากการ design ในแบบของ Netbeans (netbeans-based)
- Jaspersoft Studio มีสภาพแวดล้อมที่เกิดจากการ design ในแบบของ Eclipse (eclipse-based) และยังถูกพัฒนามาอย่างต่อเนื่อง มีความสามารถในการทำงานกับรายงานมากกว่า iReport

Note.
ดูรายละเอียดของ Jaspersoft Studio ได้จาก http://community.jaspersoft.com/wiki/jaspersoft-studio-features

แล้วจะดาวน์โหลด Jaspersoft Studio ได้ที่ไหน?
ตอบ สามารถดาวน์โหลดได้ในหน้ารวมนี้
http://community.jaspersoft.com/download

แล้วฟรีหรือเปล่า?
ตอบ Jaspersoft Studio มีสองรุ่นครับ คือ
- community ฟรี
- commercial จ่ายเงิน
ผมเลือกแบบฟรีครับ
http://community.jaspersoft.com/project/jaspersoft-studio

แล้วสร้าง report อย่างไร?
ตอบ สามารถอ่านได้จากเอกสารนี้ครับ (ผมเลือกเวอร์ชัน 6.3.0)
http://community.jaspersoft.com/documentation/tibco-jaspersoft-studio-user-guide/v630/getting-started-jaspersoft-studio

part นี้ไว้เท่านี้ก่อนนะครับ ไว้โอกาสต่อไปเรามาสร้างรายงานตามเอกสารของ Jaspersoft ข้างต้นกัน สวัสดีครับ

Spring 4 Restful web services with Hibernate 4 example using Maven

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

Note
ตัวอย่างนี้นำมาจากเว็บ http://www.beingjavaguys.com/2014/08/spring-restful-web-services.html ขอขอบคุณยิ่งครับ

เตรียมเครื่องมือให้พร้อมก่อนลุย

• Spring tool suite ของผมเวอร์ชัน 3.7.3.RELEASE
• jdk ของผมเวอร์ชัน 1.8.0_65

ขั้นตอนที่ควรทราบก่อนโค้ด

• เตรียม database ให้พร้อม
• สร้างโปรเจ้กต์ด้วย Maven
• configuration ไฟล์ web.xml สำหรับ DispatcherServlet ที่ Spring MVC จำเป็นต้องใช้
• เตรียม java beans
• เตรียม dao layer
• เตรียม service layer
• เดรียม web services layer
• และทดสอบ web services ด้วย jersey client (ถ้าทำได้นะ)

Note
นี่เป็นการโค้ดสดซึ่งผมเองก็ไม่ได้เตรียมโปรเจ็กต์ไว้ก่อน ผิดพลาดประการใดขออภัยมา ณ ที่นี้ด้วยนะครับ สำหรับ jersey client ขออ้างอิงไปที่ https://jersey.java.net/documentation/latest/client.html

เตรียม database

ผมใช้ฐานข้อมูล MySQL ซึ่งมีมาให้เมื่อติดตั้ง XAMPP (ของผมเวอร์ชัน 3.2.2) ดังนั้นผมจึงใช้ http://localhost/phpmyadmin/ เป็นเครื่องมือบริหารจัดการฐานข้อมูลครับ และต่อไปนี้คือ MySQL script ที่ใช้สร้างฐานข้อมูลชื่อ employee_db

CREATE DATABASE IF NOT EXISTS `employee_db` 
DEFAULT CHARACTER SET utf8 DEFAULT COLLATE utf8_general_ci

Note
ในกรณีที่เพื่อนๆใช้ phpmyadmin เหมือนกับผม หากมองไม่เห็นฐานข้อมูลที่เพิ่งสร้างนี้ ให้กดปุ่ม F5 หรือ reload page สักครั้งครับ

ให้เลือกฐานข้อมูล employee_db นี้ไว้ก่อนนะครับ ต่อไปก็สร้าง table ชื่อ employee ไว้ภายใน

CREATE TABLE IF NOT EXISTS `employee` ( 
`id` bigint(20) NOT NULL AUTO_INCREMENT, 
`first_name` varchar(45) DEFAULT NULL, 
`last_name` varchar(45) DEFAULT NULL, 
`email` varchar(45) DEFAULT NULL, 
`phone` varchar(45) DEFAULT NULL, 
PRIMARY KEY (`id`) 
) ENGINE=InnoDB CHARACTER SET utf8 COLLATE utf8_unicode_ci

Note
ในกรณีที่เพื่อนๆใช้ phpmyadmin เหมือนกับผม หากมองไม่เห็นตารางที่เพิ่งสร้างนี้ ให้กดปุ่ม F5 หรือ reload page สักครั้งครับ

สุดท้ายของการเตรียมฐานข้อมูล ก็ใส่ข้อมูลของ employee สักหนึ่งคนลงไป

INSERT INTO `employee` (`id`, `first_name`, `last_name`, `email`, `phone`) 
VALUES (2, 'Hoston', 'lindey', 'hl@gmail.com', '90908989899')

สร้างโปรเจ็กต์ด้วย Maven

อุ้ย!ดึกแล้ว ไว้โอกาสหน้าผมจะมาเขียนต่อนะครับ

Welcome to StackEdit!

>> ได้ทดลองใช้เครื่องมือช่วยสร้าง content ที่มีชื่อว่า StackEdit
เท่าที่ทดลองใช้ก็พอใจมาก เพื่อนๆที่สนใจสามารถเยี่ยมชมได้ที่ https://stackedit.io/
ลอง publish มันทั้งหน้ามาที่บล็อกก็ได้ตามนี้แหละ แจ๋วๆ

Hey! I’m your first Markdown document in StackEdit1. Don’t delete me, I’m very helpful! I can be recovered anyway in the Utils tab of the Settings dialog.

---

Documents

StackEdit stores your documents in your browser, which means all your documents are automatically saved locally and are accessible offline!

Note:

• StackEdit is accessible offline after the application has been loaded for the first time.
• Your local documents are not shared between different browsers or computers.
• Clearing your browser’s data may delete all your local documents! Make sure your documents are synchronized with Google Drive or Dropbox (check out the Synchronization section).

Create a document

The document panel is accessible using the button in the navigation bar. You can create a new document by clicking New document in the document panel.

Switch to another document

All your local documents are listed in the document panel. You can switch from one to another by clicking a document in the list or you can toggle documents using Ctrl+[ and Ctrl+].

Rename a document

You can rename the current document by clicking the document title in the navigation bar.

Delete a document

You can delete the current document by clicking Delete document in the document panel.

Export a document

You can save the current document to a file by clicking Export to disk from the menu panel.

Tip: Check out the Publish a document section for a description of the different output formats.

---

Synchronization

StackEdit can be combined with Google Drive and Dropbox to have your documents saved in the Cloud. The synchronization mechanism takes care of uploading your modifications or downloading the latest version of your documents.

Note:

• Full access to Google Drive or Dropbox is required to be able to import any document in StackEdit. Permission restrictions can be configured in the settings.
• Imported documents are downloaded in your browser and are not transmitted to a server.
• If you experience problems saving your documents on Google Drive, check and optionally disable browser extensions, such as Disconnect.

Open a document

You can open a document from Google Drive or the Dropbox by opening the Synchronize sub-menu and by clicking Open from…. Once opened, any modification in your document will be automatically synchronized with the file in your Google Drive / Dropbox account.

Save a document

You can save any document by opening the Synchronize sub-menu and by clicking Save on…. Even if your document is already synchronized with Google Drive or Dropbox, you can export it to a another location. StackEdit can synchronize one document with multiple locations and accounts.

Synchronize a document

Once your document is linked to a Google Drive or a Dropbox file, StackEdit will periodically (every 3 minutes) synchronize it by downloading/uploading any modification. A merge will be performed if necessary and conflicts will be detected.

If you just have modified your document and you want to force the synchronization, click the button in the navigation bar.

Note: The button is disabled when you have no document to synchronize.

Manage document synchronization

Since one document can be synchronized with multiple locations, you can list and manage synchronized locations by clicking Manage synchronization in the Synchronize sub-menu. This will let you remove synchronization locations that are associated to your document.

Note: If you delete the file from Google Drive or from Dropbox, the document will no longer be synchronized with that location.

---

Publication

Once you are happy with your document, you can publish it on different websites directly from StackEdit. As for now, StackEdit can publish on Blogger, Dropbox, Gist, GitHub, Google Drive, Tumblr, WordPress and on any SSH server.

Publish a document

You can publish your document by opening the Publish sub-menu and by choosing a website. In the dialog box, you can choose the publication format:

• Markdown, to publish the Markdown text on a website that can interpret it (GitHub for instance),
• HTML, to publish the document converted into HTML (on a blog for example),
• Template, to have a full control of the output.

Note: The default template is a simple webpage wrapping your document in HTML format. You can customize it in the Advanced tab of the Settings dialog.

Update a publication

After publishing, StackEdit will keep your document linked to that publication which makes it easy for you to update it. Once you have modified your document and you want to update your publication, click on the button in the navigation bar.

Note: The button is disabled when your document has not been published yet.

Manage document publication

Since one document can be published on multiple locations, you can list and manage publish locations by clicking Manage publication in the menu panel. This will let you remove publication locations that are associated to your document.

Note: If the file has been removed from the website or the blog, the document will no longer be published on that location.

---

Markdown Extra

StackEdit supports Markdown Extra, which extends Markdown syntax with some nice features.

Tip: You can disable any Markdown Extra feature in the Extensions tab of the Settings dialog.

Note: You can find more information about Markdown syntax here and Markdown Extra extension here.

Tables

Markdown Extra has a special syntax for tables:

Item	Value
Computer	$1600
Phone	$12
Pipe	$1

You can specify column alignment with one or two colons:

Item	Value	Qty
Computer	$1600	5
Phone	$12	12
Pipe	$1	234

Definition Lists

Markdown Extra has a special syntax for definition lists too:

Term 1

Term 2

Definition A

Definition B

Term 3

Definition C

Definition D

part of definition D

Fenced code blocks

GitHub’s fenced code blocks are also supported with Highlight.js syntax highlighting:

// Foo
var bar = 0;

Tip: To use Prettify instead of Highlight.js, just configure the Markdown Extra extension in the Settings dialog.

Note: You can find more information:

• about Prettify syntax highlighting here,
• about Highlight.js syntax highlighting here.

Footnotes

You can create footnotes like this2.

SmartyPants

SmartyPants converts ASCII punctuation characters into “smart” typographic punctuation HTML entities. For example:

	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

Table of contents

You can insert a table of contents using the marker [TOC]:

• Welcome to StackEdit!
  • Documents
    • • Create a document
      • Switch to another document
      • Rename a document
      • Delete a document
      • Export a document
  • Synchronization
    • • Open a document
      • Save a document
      • Synchronize a document
      • Manage document synchronization
  • Publication
    • • Publish a document
      • Update a publication
      • Manage document publication
  • Markdown Extra
    • Tables
    • Definition Lists
    • Fenced code blocks
    • Footnotes
    • SmartyPants
    • Table of contents
    • MathJax
    • UML diagrams
    • Support StackEdit

MathJax

You can render LaTeX mathematical expressions using MathJax, as on math.stackexchange.com:

The Gamma function satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral

$$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$$

Tip: To make sure mathematical expressions are rendered properly on your website, include MathJax into your template:

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>

Note: You can find more information about LaTeX mathematical expressions here.

UML diagrams

You can also render sequence diagrams like this:

And flow charts like this:

Note: You can find more information:

• about Sequence diagrams syntax here,
• about Flow charts syntax here.

Support StackEdit

---

1. StackEdit is a full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites. ↩
2. Here is the text of the footnote. ↩

แกะกล่อง Sony Headphone MDR-1A BT

>> เมื่อมีครั้งแรกก็ต้องมีครั้งที่สอง กับ Sony Headphone MDR-1A BT หูฟัง Bluetooth เพื่อเล่น Hi-Res ด้วยเสียงแบบ...เทพประทาน! [to web site]
ไม่คิดไม่ฝันว่าจะได้จับเจ้าตัวนี้ เพิ่งไปถอยมาเลยครับ ดีใจเลยอยากเอามาเล่า (หัวเราะดัง) เพราะปกติแล้วเป็นคนไม่มากเรื่อง (เท่าเรื่องหู) ปกติก็ฟังตามมีตามเกิด ใครเขาว่าหูฟังที่ดีให้เสียงที่ดีนี่ไม่เชื่อ บอกเลยว่าเหมือนกันหมดแหละ ฟังๆไปเถอะรู้เรื่องก็พอแล้ว... ทุกวันนี้จำต้องกลืนคำพูดเมื่อครั้งแรกนั้นได้ลอง Sony Headphone MDR-XB950BT Extra Bass แม่เจ้า! ถึงกับเปลี่ยนโลก โลกของหูนี่อัศจรรย์มากบอกตง เล่นเกมก็คนละมิติกันเลยครับ

>> พูดเวอร์ไปเดี๋ยวจะหาว่าผมอวย Sony แต่ผมก็พูดไปตามความรู้สึกจากที่เคยสัมผัสหูฟังราคา 299, 450, 6,990 และตัวนี้ 12,990 บาท (ลด 2,600 บาท คงเหลือ 10,390) ได้มาก็เอามาแกะกล่อง ทำตามพี่ๆน้องๆที่เขา review ให้ดูกัน









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

ครั้งแรกกับ Sony Headphone MDR-XB950BT Extra Bass

>> Sony wireless stereo headset MDR-XB950BT extra bass [to web site]
ปกติ headphone ราคา 299 ถึง 500 บาทสำหรับผมนี่ก็หรูแล้วนะครับ แต่ผมเพิ่งไปจัดตัวนี้มาจาก Power Buy กับราคาเต็มๆ 5990 บาท (สิบสองเท่าเทียบกับราคาห้าร้อยบาทอันเก่า) เงิบไปพักกับราคา (คนเงินน้อย) แต่สิ่งที่ได้กลับมานี่... คุ้มหูจริงๆ! (หัวเราะดัง)

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

เพราะวันหยุดเล่นเกมเป็นหลัก วันทำงานนี่ฟังเพลงเป็นหลัก ก็เสาะหาจนไปเจอยี่ห้อ Sennheiser กับระบบ 7.1 surround sound เป็น gaming headset รหัส PC 363D เห็นว่า review กันเยอะ เป็นที่ถูกใจทั้งไทยทั้งเทศ พูดเป็นเสียงเดียวกันว่าซื้อตัวนี้แหละ ครบ จบ คุ้มเงินสุด ผมทั้งดูทั้งฟังมาก็อยากได้ สะสมเงินได้ก็จะหาซื้อ (หมื่นกว่าบาท) แต่เป็นคนชอบดูของ สัมผัสของก่อนค่อยตัดสินใจซื้อจริงๆ ... บระเจ้า เดินห้างดังสามสี่ที่ไม่มีของ :< เศร้า~ ครั้นจะให้สั่งออนไลน์ก็ไม่ได้เห็นของไม่ได้จับต้องก่อน แหม~คันใจ

งั้นหาหูฟังเพลงเฉยๆก็พอ อิทธิพลมาจากคุณแฟนเธอชอบโทรศัพท์ของ Sony ก็เลยไปหาหูฟังเพลงเน้นเบสของ Sony เป็นเหตุให้เราสองพบกันในที่สุด...

>> Sony wireless stereo headset MDR-XB950BT extra bass
แม้ไม่ได้ซื้อในราคาลดหรือตามโปรโมชัน ประกอบกับความอยากได้จัด ก็เลยไปลองตัวโชว์ ฟังแล้วเคลิ้มเสียเหลือเกิน ยิ่งตอนกดปุ่ม bass boost นี้สวรรค์ของผมมาแล้ว (หัวเราะดัง) ซื้อๆๆๆ เอาอันนี้แหละ

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

>> ต่อ Sony wireless stereo headset กับคอมฯผ่าน Bluetooth ทำได้อย่างไร
1) ก่อนอื่นเปิด Bluetooth ที่เครื่องคอมก่อน


2) กดปุ่ม power ที่หูค้างไว้นานราว 7 วินาที หรือกระทั่งเห็นว่าไฟสีน้ำเงินกับแดงสว่างดับสลับกันอย่างไวรัวๆ ก็ปล่อยจากปุ่ม power

3) คลิกขวาที่ไอคอน bluetooth ที่คอมฯเรา เลือก Show Bluetooth Devices จากนั้นคอย...กระทั่งมันทั้งสองเจอกัน



4) เปลี่ยน sound device ของเครื่องคอมฯเราด้วยนะ ถ้าเกิดว่าเสียงยังไม่ออกที่หูฟัง ดังนี้
4.1) คลิกขวาที่ไอคอนรูปลำโพง จากนั้นเลือก Playback devices

4.2) จะปรากฏรายการ sound devices มากมาย (ตามที่เครื่องคอมฯเรารู้จักแหละ) ก็เลือก Headphones แล้วกดปุ่ม Set Default


>> แนวที่ผมฟังครับ


>> ลองเบสหนักๆ

ชวนคุยจาวา part 3 : Hello World

>> เนื่องจากผมเพิ่งมาปรับปรุงหน้าสารบัญของ Java & OOP นี้ให้ไปในทิศทางเดียวกัน จึงวางหัวข้อเอาไว้ก่อน ก่อนจะเริ่มเขียนรายละเอียดของแต่ละหัวข้อทีละน้อยในแต่ละวัน ดังนั้นต้องขออภัยเพื่อนๆด้วยหากว่ามันยังไม่เรียบร้อยดี เอาล่ะ คราวนี้ผมก็จะชวนมาสวัสดีชาวโลก (Hello World) ตามธรรมเนียมปฏิบัตินะครับ

>> โหลดและติดตั้ง JDK
- เพื่อนมือใหม่ควรทราบว่า จาวา สามารถรันด้วย console ได้ สำหรับระบบปฏิบัติการวินโดว์ก็คือ cmd หรือ Command Prompt นั่นแหละจ้า หน้าตาประมาณนี้

- และเพื่อนๆก็ทราบว่าก่อนจะเขียนจาวาได้ ก็ต้องลงจาวาในเครื่องก่อน จริงครับ จาวาที่จำเป็นต้องติดตั้งก่อนนี้เรียกว่า Java SE Development Kit ย่อว่า JDK ซึ่งเวอร์ชันที่แนะนำก็คือ 1.7 หรือไม่ก็ 1.8 (ส่วนตัวผมใช้ 1.8) ตามไปที่ลิงค์นี้ Java SE Development Kit 8 Downloads
- จาวา 1.7 จะเรียกกันว่า จาวา 7 ส่วนจาวา 1.8 จะเรียกกันว่า จาวา 8
- ผมโหลดมาติดตั้งเรียบร้อย เพราะเครื่องผมใช้ระบบปฏิบัติการวินโดว์ 64 bits ผมจึงเลือก Windows x64 แต่ถ้าเครื่องของเพื่อนๆใช้ระบบปฏิบัติการวินโดว์ 32 bits เพื่อนๆก็ต้องเลือก Windows x86 นะครับ

- ติดตั้งไปตามปกติ มันถามอะไรก็ให้อ่านก่อนนิดหน่อย ส่วนตัวผมก็ next ยาวๆไป
- เมื่อติดตั้งเสร็จแล้ว ให้เพื่อนๆที่ใช้วินโดว์ 64 bits เข้าไปตรวจสอบได้ที่ C:\Program Files\Java
- ส่วนเพื่อนๆที่ใช้วินโดว์ 32 bits ก็สามารถตรวจสอบได้ที่ C:\Program Files (x86)\Java
- ใครไม่เข้าใจผมไปหาวิดีโอมาให้ดู (ขอบคุณที่ถ่ายทอดครับผม)

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

>> โหลดและติดตั้ง IDE
- แรกเริ่มก็ควรทดลองเขียนและรันจาวาผ่าน Command Prompt แต่พอเป็นแล้วผมก็แนะนำให้ใช้เครื่องมือดีกว่าครับ เครื่องมือที่ว่านี้เรียกันว่า IDE ย่อมาจาก Integrated Development Environment มีหลายค่ายให้เลือก มีทั้งฟรีและต้องจ่ายเงิน ได้แก่ NetBeans (แนะนำ), Eclipse, IntelliJ IDEA เป็นต้น ผมขอแนะนำ NetBeans เพราะง่ายสำหรับผู้เริ่มต้นมากๆ (ความคิดส่วนตัวนะครับ) แต่ปัจจุบันผมทำงานกับ Eclipse มาโดยตลอด และกำลังสนใจ IntelliJ IDEA ครับผม
- IDE เหล่านี้ให้อะไรเรา? เอาง่ายๆเลยนะ มันช่วยตรวจสอบโค้ดว่าเราเขียนผิดไวยากรณ์หรือไม่ ทั้งยังคอมไพล์โค้ดให้เรา (ไม่ต้องพิมพ์ใส่ Command Prompt) และรันโค้ดให้เราอย่างสะดวกใจแฮ
- ลองเลือกหนึ่งจากสามตัวเลือกด้านล่างนี้

- โหลด NetBeans เลือกที่เป็น Java EE นะ (ที่เขียนแปะเป็นหัวคอลัมน์น่ะ)

- โหลด Eclipse


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


>> เมื่อผมได้ลอง ผมจึงได้รู้ว่า IntelliJ IDEA นี้ก็น่าสนใจใช่เล่น
- เพื่อนๆคนไหนที่ยัง Hello World ไม่ได้ ก็สู้ๆนะครับ ฝันดีจ้า

ชวนคุยจาวา part 2 : เส้นทางเดิน

เฮ้เพื่อนๆ ผมเป็นนักศึกษาปีสามที่รู้ตัวว่าชอบเขียนโปรแกรม ผมตั้งใจว่าจะเป็นเกมโปรแกรมเมอร์ที่เดินตามฝันของตัวเองในวัยเยาว์ ในตอนเด็กผมมักสร้างเกมกระดานมอนสเตอร์ขึ้นมา จากนั้นก็เอาไปเล่นกับเพื่อนๆร่วมชั้นของผม ซึ่งไม่สามารถปฏิเสธได้ว่าเด็กๆชอบเล่นเกมกันขนาดไหน โดยเฉพาะเกมมอนสเตอร์ของผมก็เป็นที่นิยมในกลุ่มเด็กผู้ชายมาก ยังมีเกมการ์ดที่ได้แรงบันดาลใจจาก Yu-Gi-Oh ด้วยนะเออ แต่นั่นก็เป็นเพียงฝันที่จวบจนบัดนี้ยังไม่สามารถเอามาสร้างเป็นเกมคอมพิวเตอร์จริงๆได้เลยสักเกมเดียว (เศร้างะ)

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

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

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

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

คำถาม ทำไมต้องใช้จาวาเรียนโครงสร้างข้อมูลและอัลกอริทึม?
คำตอบ ก็อาจารย์เลือกจาวามาสอนงิ

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

คำถาม แนะนำหน่อย มือใหม่จะหัดเขียนโปรแกรม เรียนวิทยาการคอมพิวเตอร์เนี่ย ต้องรู้จักภาษาอะไรบ้าง ภาษาซีไม่ดีเหรอ หรือ C# ได้ไหม?
คำตอบ จากประสบการณ์ของผมนะ (เรื่องนี้ผมคิดว่าผมอยากเล่าตอนผมเรียนปีสามครับ ปัจจุบันนี้ผมเรียนจบไปนานแล้วและเป็นนักพัฒนาโปรแกรมด้วยภาษาจาวา) นักศึกษาไม่ค่อยรู้ทิศทางของตัวเองกันหรอก ส่วนใหญ่ที่เจอก็เรียนสายคอมฯเพราะบอกว่า หางานง่าย ได้เงินเยอะ พี่อยากให้มาเรียน พ่อแม่ลุงป้าน้าอาฟังมาจากคนอื่นแล้วก็เอามาบอกลูก หรือไม่ก็ชอบคอมฯ (ชอบอะไรคอม?) แล้วก็ตามอาจารย์ที่สอน อาจารย์สอน C ก็เขียน C, อาจารย์สอน C# ก็หัด C# คืออาจารย์สอนอะไรก็ทำก็อยากรู้จักอันนั้นแหละ เพราะว่าอะไรน่ะหรือ เพราะต้องใช้ทำโปรเจ็กต์ เพราะต้องเอาไปสอบ เท่านั้นเอง จริงๆแล้วผมคิดว่านั่นก็เป็นการแนะนำแนวทางที่ดี แต่ดีที่สุดไหม คำตอบของผมคือไม่ครับ ยังไม่ดีพอสำหรับทุกๆคน แม้แต่ผมเองก็ถูกจูงไปทางนั้นทีทางนี้ที ทั้งๆที่ตัวผมเองเพียงทำมันได้ เพียงเข้าใจมันบ้าง แต่ผมได้เลือกมันจากใจไหม ไม่เลยครับ ผมไม่รู้ตัวด้วยซ้ำว่าจริงๆแล้วผมต้องการอะไร (ในตอนที่เรียนน่ะนะ)

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

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

เอาล่ะนี่คือคำตอบจากใจผมในขณะนี้ เมื่อเลือกงานใดๆหนึ่งในสามลักษณะข้างต้นแล้วล่ะก็
เลือกงานแบบที่ 1) น้องต้องเก่งครับ ควรจะเก่งรอบด้านเข้าไว้ อ่านหนังสือเยอะๆ ติดตามเทคโนโลยีใหม่ๆอยู่เสมอ ฝึกซ้อมให้บ่อย มีเวลาให้งานมากกว่าเวลาอื่นๆ ต้องนำเสนอตัวเองในรูปแบบที่ใครๆก็สามารถเข้าใจและเข้าถึงได้ อาจจะทำสอนออนไลน์ควบคู่ไป เป็นที่ยอมรับและรู้จักในวงการไอทีก็จะยิ่งดี ควรมีเครือข่าย (ไม่ใช่ขายตรงนะ) ที่จะชักนำลูกค้าให้มาหาและเชื่อมั่นในตัวเรา
เลือกงานแบบที่ 2) น้องต้องสอบสัมภาษณ์ให้เป็น มีทัศนคติเชิงบวก ทำงานกับทีมและผู้คนได้ดี ไม่ต้องขยันมาก (จะแอบขี้เกียจใครล่ะจะว่าน้องได้) ขยันบ้างหากต้องแตะเทคโนโลยีใหม่ๆ จงยอมรับว่าความต้องการของ user ไม่มีที่สิ้นสุด และจะต้องทำความต้องการนี้ให้เป็นจริงให้จงได้ อยู่ไปยาวๆครับ เดี๋ยวดอกผลจะเบ่งบานเอง
เลือกงานแบบที่ 3) งานลักษณะนี้ไม่ต่างจากขุนนางที่รู้ตัวเองว่าต้องทำงานใหญ่ รับศึกหนักเหนือใต้ ควรจะเก่งรอบทิศทางแต่เน้นเฉพาะมากๆกับสิ่งที่ต้องรับผิดชอบเป็นหลัก น้องจะมีทั้งชื่อเสียงที่ดี (หรือแย่มาก) ได้รับค่าตอบแทนสูง (เมื่ออายุงานเพิ่มขึ้น) เท่าที่ผมเข้าใจ นักเขียนโปรแกรมลักษณะนี้จะอยู่บริษัทใดบริษัทหนึ่งไม่นานนัก มักจะกระโดดจากบริษัท A ไปบริษัท B เพื่อค่าตัวที่เพิ่มมากขึ้น ก็เพราะพวกเขามีทักษะมีประสบการณ์กับงานชิ้นใหญ่ๆรวมไปถึงมีความรับผิดชอบต่องานไม่ต่างจากแบบที่ 1) เลยอย่างไรล่ะ แต่ก็ใช่ว่าทุกคนจะประสบความสำเร็จ บางคนกระโดดจากที่เก่าไปที่ใหม่ก็ไม่ได้เรียนรู้อะไรเลย

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

สรุป ส่วนตัวผมยังทำงานบริษัท บริษัทส่วนมากไม่ใช้ .NET ก็ Java เฉพาะทางจริงๆจึงจะเห็นว่าใช้ภาษา C ซึ่งผมขอผ่าน (มักจะยุ่งกับฮาร์ดแวร์) ถ้าเป็นบริษัทหรือกลุ่มขนาดเล็กถึงกลางก็ใช้ PHP พวกขายของแต่ไม่พัฒนาโปรแกรมใช้เองก็มักซื้อโปรแกรม (ที่เขียนและทดสอบเสร็จแล้ว) จำพวก Content Management System มาใช้ โอเค ให้ผมเลือก ผมก็ยังอยากเป็นพนักงานบริษัท ทำงานกับบริษัทที่มีเงินทุนเยอะ มีทีมที่ช่วยกันพัฒนา ผมจึงเลือก จาวา ครับ

>> กว่าจะจริงจังกับจาวา...
ผมเองแรกเริ่มก็เขียนปาสคาล (จำเวอร์ชันไม่ได้) ถัดมาก็ภาษาซี เฮ้ผมอยากบอกว่าภาษาซีนี่สนุกครับ มีไวยากรณ์และรูปแบบที่เข้าใจได้ไม่ยาก int x = 0; นี่เป็นอะไรที่ผมงงมากเมื่อนำมาประกอบกับ x++; ซึ่งบรรจุอยู่ภายใน loop ผมใช้เวลาทำความเข้าใจกับ for loop นานมากว่าค่าของมันเพิ่มขึ้น 1 ได้อย่างไร อย่างไรก็ตามเมื่อผมศึกษาเรื่องคลาสของภาษาซี ผมกลับรู้สึกว่ามันตรวจสอบยากและซับซ้อน ทั้งยังมีอะไรให้จำเยอะแยะ แต่มันก็เป็นครูคนแรกในฐานะที่ทำให้ผมรู้จักกับ OOP แบบผิวเผิน

ผมไม่เคยรู้จักจาวาเลยจนกระทั่งได้เรียนวิชาโครงสร้างข้อมูลและอัลกอริทึม ความงงกลายเป็นขี้ไก่ไปแล้วเพราะในตอนนั้นผมโครตมึน อะไรคือ collection อะไรคือ list อะไรคือ queue ฯลฯ และจบด้วยการสอบตก

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

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

>> แล้วรูปด้านล่างนี้ก็คือหนังสือที่ผมใช้เรียนด้วยตัวเองประกอบกับความรู้ที่อาจารย์สอนผม ซึ่งผมเลือกใช้ไลบรารี JOGL เป็นตัวหลักในการวาดครับ


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


>> ไว้ผมจะมาเล่าให้ฟังใหม่นะ

Vaadin: How to listen to animation end part 3 (end)

>> เข้าประเด็นกันเลย
- ผมไม่ต้องการคลาส EndAnimatorWidget เพราะคลาส EndAnimator ไม่จำเป็นต้องมีหน้าตาใดๆ
- ผมไม่ต้องการอินเตอร์เฟส EndAnimatorClientRpc เพราะไม่มีงานของหน้าบ้านที่ต้องคุยกับหลังบ้านด้วย rpc ของหน้าบ้าน (ขอโทษครับเรื่องศัพท์แปลกๆของผม)
- ผมไม่ต้องการคลาส EndAnimatorState เพราะจะไม่มีการรับส่งค่าใดๆผ่านตัวแปร
- ผมต้องการ ให้คลาส EndAnimator ลงทะเบียนอินเตอร์เฟส EndAnimatorServerRpc เพื่อคอยรับสัญญาณจากคลาส EndAnimatorConnector แค่นั้น
- ผมต้องการ ให้อินเตอร์เฟส EndAnimatorServerRpc ใช้ rpc คอยรับการทำงานจาก EndAnimatorConnector เมื่อจาวาสคริปต์ทำงาน 'animationend' ของ animation ใดๆ
- ผมต้องการ ให้คลาส EndAnimatorConnector มีบริการลงทะเบียน 'animationend' สำหรับ component ใดๆที่ต้องการให้เล่น animation
- และเมื่อ 'animationend' ปรากฏ นั่นหมายความว่า EndAnimatorServerRpc จะต้องทำงานและส่งการทำงานนี้ให้กับอินเตอร์เฟสที่ทำหน้าที่เสมือนรับฟังเหตุการณ์เล่น animation เสร็จสิ้น
- ผมขอตั้งชื่ออินเตอร์เฟสที่ทำหน้าที่เสมือนรับฟังเหตุการณ์เล่น animation เสร็จสิ้นนี้ว่า AnimationEndListener ซึ่งมีบริการ onAnimationEnd สำหรับทุก component ที่เรียกใช้คลาส EndAnimator ครับ

>> ดังนั้นคลาส EndAnimator หรือก็คือหัวใจของเรื่องนี้จึงต้องมี AnimationEndListener บังคับให้ใช้อยู่ภายใน, สำหรับทุก component ที่มันรับฟัง (listen) การเล่น animation จนเสร็จสิ้นจะถูกบังคับทำ onAnimationEnd จาก EndAnimatorServerRpc อีกทอดหนึ่ง รายละเอียดทั้งหมดดังรูป

- เพื่อที่จะให้คลาสนี้ส่ง component ใดๆไปให้คลาส EndAnimatorConnector จึงต้องให้สืบทอด com.vaadin.server.AbstractExtension, เช่นเดียวกับคลาส EndAnimatorConnector ที่ต้องเป็นลูกของ com.vaadin.client.extensions.AbstractExtensionConnector มิเช่นนั้นมันจะคุยกันไม่รู้เรื่อง

>> คลาส EndAnimatorConnector เมื่อเป็นลูกของ com.vaadin.client.extensions.AbstractExtensionConnector จึงถูก override เมธอด extend เพื่อที่จะนำ component ที่รับมาจากคลาส EndAnimator มาเพิ่มการฟัง 'animationend' (ชื่อมาตราฐาน) ด้วยการเรียก registerCssCallback ที่ทำงาน native javascript code จับเหตุการณ์การเล่น animation เสร็จสิ้นของแต่ละ browser, เมื่อ callback function ถูกเรียกก็จะส่งผลให้ onAnimationEnd ของอินเตอร์เฟส AnimationEndEventHandler ทำงาน มันจะส่งสัญญาณไปบอกต่อ EndAnimatorServerRpc ซึ่งจะกลับไปที่คลาส EndAnimator เพื่อทำงาน onAnimationEnd ของอินเตอร์เฟส AnimationEndListener นั่นเอง



>> ทีนี้มาดูกันว่าใช้งานอย่างไร และเหตุใดผมจึงต้องหาวิธีการอย่างนี้มาจัดการกับเหตุการณ์ end animation
- ปรับปรุงคลาส MyUI ให้สร้างสี่เหลี่ยมขนาด 300 x 300 px ออกมา ให้ชื่อมันว่า animateLayout
- ใส่ style sheet พื้นหลังสีเหลือง ให้เล่น animation ของไลบรารีตัวนี้ http://daneden.github.io/animate.css/ มันก็จะหมุนติ้วๆ
- และเมื่อ animation เล่นจบลง ผมก็ให้เปลี่ยนพื้นหลังเป็นสีเขียว (อย่างที่เพื่อนๆชาว css ทราบกันดีอยู่แล้วว่าจะเกิดการ override สีพื้นหลัง) พร้อมกับลบ animation หมุนติ้วๆนี้ออก




- เพื่อนๆจะเห็นว่า css class names ที่ถูกเพิ่มเข้าไปเมื่อไม่ลบออกก็จะฝังอยู่ในแท็ก html (ได้แก่ .background-yellow และ .background-green) ซึ่งงานของผมไม่ต้องการให้ css class names ของ animation ฝังอยู่จึงสั่งให้ลบออกไปหลังจาก animation เล่นจบลง ทีนี้เวลาผมกดปุ่ม F5 หรือเคลื่อนย้าย dom ก็จะไม่เกิดการเล่น animation เหล่านี้อีก เป็นว่าบรรลุเป้าหมายครับผม (ยิ้ม)

>> และนี่คือโครงสร้างทั้งหมดของโปรเจ็กต์และการ include css animation ดังข้างต้นเข้าไป


*** ผมสังเกตว่า
- หากแก้ไข (รวมถึง เพิ่มไฟล์ ลบไฟล์) widgetset ก็ต้อง compile มันใหม่ ผมจะคลิกขวาที่โปรเจ็กต์แล้วเลือกคำสั่ง Build
- หากแก้ไข vaadin หลังบ้าน (ในที่นี้ได้แก่คลาส EndAnimator และ MyUI) ให้คลิกขวาที่โปรเจ็กต์แล้วเลือกคำสั่ง Run ได้เลย (มันจะ compile กับ deploy ให้อัตโนมัติ)

>> ใครที่สนใจ gwt อยากลองมาเขียน vaadin ผมขอบอกว่ามันแจ่มมาก! เป็น open source เพื่อทำงานกับ JEE เหมือนกันแต่ compile ไวกว่า ลองไปเยี่ยมชมพวกเขาสิครับ
https://vaadin.com/home
คืนนี้ฝันดีจ้า