หลังจากย้ายเว็บ ThaiOpenSource จาก Drupal มาเป็น WordPress นอกจากจะมีปัญหาเรื่องการย้ายข้อมูลจากเว็บเดิมเพราะไฟล์ import/export มี schema ไม่เหมือนกัน เรื่องที่น่าปวดหัวที่สุดคือเรื่อง URL เพราะ URL ของแต่ละหน้าเปลี่ยนไปทำให้การอ้างอิงหน้าเว็บเก่ามีปัญหา แต่ WordPress ก็ช่วยได้ระดับนึงเท่านั้น ไม่ได้ช่วยได้ 100% การกำหนด Redirect URL ใน htaccess ช่วยได้บ้าง หลังจากอัพเดทเว็บใหม่ทำให้ URL ที่เป็น Referer เกือบ 80% วิ่งไปที่หน้า 404 Not Found แต่ก็ใช้วิธีการให้ข้อมูลเพิ่มเติมในหน้า 404 นี้แทน กรณีที่ไม่รู้ว่าจะ Redirect ไปที่ไหนจริงๆ ซึ่งส่วนใหญ่คนที่เข้าเว็บมาจะเข้ามาดาวน์โหลดไฟล์หนังสือ Blender, GIMP ฟอนต์ไทย เป็นต้น

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

เรื่องถัดมาคงเป็นเรื่อง Theme และ Plugin เว็บ ThaiOpenSource เปลี่ยนแปลงตามกาลเวลา ตามสถานการณ์การเมืองและสถานการณ์การเงิน เนื้อหาที่ดูทันสมัยอาจจะไม่ค่อยมีแต่จะเป็นเรื่อง Blog และ How-To เป็นหลักซึ่งก็ได้ แรงบันดาลใจจากคำถามต่างๆ ที่อยู่ใน ask.thaiopensource.org นั่นเอง ในเรื่อง Theme ก็ยังคงอิง Bootstrap เช่นเคย เหมือนกับที่ใช้ใน Drupal ดังนั้นหน้าตาจะคล้ายๆ เว็บเดิม ส่วนที่เพิ่มลูกเล่นเข้ามาก็คงเป็น font face เพื่อให้ดูมีความแตกต่างเรื่องรูปแบบตัวอักษรบ้าง และเขียน Sub Theme เพิ่มขึ้นมาอีกนิดหน่อย

สำหรับเรื่อง Plugin ใน WordPress ใช้น้อยกว่าที่ใช้ใน Drupal มากๆ เพราะเว็บไม่มีอะไรมี Blog อย่างเดียว ตอนนี้ใช้ Akismet, Google Analytics Dashboard, Google XML Sitemaps, Related Posts via Taxonomies, Shareaholic, WP Super Cache, Youtube Channel Gallery มีเท่านี้ครับ

เผอิญมีปัญหาเกี่ยวกับเครื่อง Mac Book Air เกี่ยวกับ HDD ไม่พอใช้และใกล้จะเต็มแล้ว ก็เลยพยายามหาวิธีแก้ไขว่าจะทำยังไงดี ตอนแรกพยายามหา Mini Disk มาเสียบแต่ก็ได้แค่ 64GB เพราะ Mini SD Card มีขนาดความจุเท่านี้ และขนาด 128GB ยังไม่มีขายในราคาถูก ทางเลือกมีอยู่ไม่กี่ทางคือใช้ Time Capsule, NAS, External HDD ซึ่งก็ยังสงสัยในเรื่อง Time Capsule อยู่ว่าจะเล่นยังไง จะไปขอลองเล่นที่ iStudio เดี๋ยวจะโดนดุเอา ก็เลยหาวิธีลองทำ Time Capsule เล่นเอง หลักๆ ของ Time Capsule ไม่มีอะไรมาก แค่ใช้ afpd ผ่าน Nettatalk โดยทฤษฎี ถ้าเรามีเครื่องคอมพิวเตอร์ขนาดเล็กที่เสียบสาย LAN หรือต่อ Wireless ได้ เราก็น่าจะใช้ Time Machine สำรองข้อมูลและใช้เป็น File Server ได้ มาลองกันดีกว่า

ขั้นแรกติดตั้ง netatalk กันก่อน

sudo apt-get install netatalk

แก้ไข /etc/netatalk/afpd.conf ลบ comment บรรทัดสุดท้ายออกตรง

- -tcp -noddp -uamlist uams_dhx.so,uams_dhx2_passwd.so -nosavepassword

สร้าง backup ไดเรคทอรีที่เราต้องการ

sudo mkdir /backup/tm_backup

เพิ่ม group tmusers และเพิ่ม กลุ่มให้ผู้ใช้ของคุณ

sudo groupadd tmusers

sudo usermod -a -G tmusers username

กำหนดสิทธิ์ให้ กลุ่ม tmusers เขียนไฟล์ลงไปในไดเรคทอรีนี้ได้ กรณีที่ต้องการแยก directory ให้สร้าง directory tm_backup ลงใน home ของแต่ละ user

sudo chown -R username:tmusers /backup/tm_backup

sudo chmod 770 -R /backup/tm_backup

แก้ไขไฟล์ /etc/netatalk/AppleVolumes.default เพื่อกำหนดสิทธิ์ในการเข้าถึงของ apfd

:DEFAULT: cnidscheme:dbd options:upriv,usedots

เพิ่ม share directory ในส่วนท้ายไฟล์

/backup/tm_backup "Backup for username" allow:username cnidscheme:dbd volsizelimit:200000 options:usedots,upriv,tm

กลับมาที่เครื่อง Mac ของเรา บังคับให้ Time Machine เรียกใช้ Network Volume เปิด terminal แล้วใช้คำสั่งดังนี้

defaults write com.apple.systempreferences TMShowUnsupportedNetworkVolumes 1

จากนั้นเปิด Finder ขึ้นมากด Cmd+K พิมพ์ afp://ip-address ของเครื่อง Time Capsule หลอกๆ ของเรา

ใส่ชื่อ username/password ของเครื่องลงไป

เลือก volumes ที่เราต้องการ

เปิด Time Machine ขึ้นมา กด Select Disk… แล้วเลือก Volume ที่ต้องการใช้ รอสัก 2 นาที Time Machine จะทะยอยสำรองข้อมูลให้เรา และเราก็ใช้ Time Machine ได้แล้ว :)

มีหลายท่านถามเรื่อง Data Encryption บน OwnCloud ว่าทำยังไง ผมก็มักจะตอบว่าทำ FileSystem Encryption ครับ แบบประมาณว่าครั้งเดียวจบ ไม่ต้องมาหาวิธีว่าทำ Data Encrytion ยังไง แต่ก็มีคนถามเข้ามาเยอะ ก็แนะนำวิธีง่ายๆ ให้ก็แล้วกันครับ ใน OwnCloud มี Application เสริมตัวนึงชื่อ Encryption กด Enable ได้ที่หน้า Application ได้เลย ดังนี้

ลอง ​Sync ไฟล์ขึ้นไปดูครับว่าเป็นยังไง

ไฟล์จะเก็บใน server แบบนี้

ถ้าเราดูจากหน้าเว็บ

ถ้าเรา cat ไฟล์ตรงๆ จะได้แบบนี้

จะพบว่าเนื้อไฟล์ถูก encrypt ไปแล้ว วิธีแบบนี้ก็ดูสนุกดีครับ สนใจอ่านข้อมูลเพิ่มเติมที่ ownCloud Administrators Manual

เนื่องจากทดลอง Android Wear มาสักระยะผ่านทาง Emulator โดยการเชื่อมต่อกับโทรศัพท์มือถือผ่าน Debug Mode ทำให้รู้สึกถึงความรำคาญของ Notification ของ App แทบทุกตัวที่ยิงเข้าไปที่ Emulator สำหรับนักพัฒนาที่พัฒนา Wear App หรือส่ง Notification ไปที่ Android Wear โดยส่วยตัวผมไม่ชอบ Notification เยอะๆ สักเท่าไร ลองนึกถึง GMail Notification ที่เป็น Stack ซ้อนๆ กันสัก 5 อันก็สยองแล้ว นี่ยังไม่รวม Facebook, Line ฯลฯ ทำให้คิดว่าน่าจะต้องหาทางปิด Notification ที่ไม่อยากให้ไปโผล่ใน Android Wear วิธีแก้ไขก็ง่ายมาก ตั้งค่าใน Android Wear App ดังนี้ครับ

เปิด Android Wear App ขึ้นมาก่อน

กดไปที่ Setting รูปเฟือง

เลือก Mute app notifications แล้วเลือก App ที่ต้องการไม่ให้แสดง Notification ไปยัง Android Wear ง่ายๆ แค่นี้ครับ

 

ช่วงนี้ใน Google Play Store เริ่มมี App Watch Face มาให้ดาวน์โหลดกันเยอะขึ้น มี Watch Face ใหม่ๆ แทบจะทุกสัปดาห์ มีทั้งแบบฟรีและเสียเงิน ก็เลยคิดว่าถ้าจะเขียน Watch Face ในแบบที่ต้องการบ้างจะทำอย่างไร ซึ่งเท่าที่ลองค้นหาข้อมูลก็พบว่า Watch Face เขียนคล้ายกับ Launcher บน Android คือเขียน Wear App ปกติแต่ไปกำหนดใน AndroidManifest ว่าให้ทำหน้าที่เป็นอะไร ซึ่งถือว่าง่ายมากๆ ลองมาทำเล่นกันครับ

สิ่งที่ต้องมี

  • Android Studio รุ่นล่าสุด
  • Android SDK Rev 20
  • Android Wear System Image

อันดับแรกสร้าง AVD ขึ้นมาก่อนตามนี้

จากนั้น Start AVD เอาไว้ สำหรับท่านที่ใช้ Intel HAXM การทำงานของ Emulator ก็จะเร็วขึ้นมาบ้างนิดหน่อย T_T

สร้าง Project ขึ้นมาใหม่ เลือกเป็น Mobile และ Wear App เลือก Blank Activity ทั้งคู่

จากนั้น แก้ไข Android Manifest ที่ Wear Module เพิ่ม user permission ดังนี้

<uses-permission android:name="com.google.android.permission.PROVIDE_BACKGROUND" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

จากนั้นกำหนดให้ Activity ฝังเป็น background ดังนี้

android:allowEmbedded="true"

เพิ่ม meta-data ลงไป เพื่อให้แสดง preview ตอนเลือกเปลี่ยน watch face ทำภาพขนาด 320×320 ใส่ลงใน res/drawable-hdpi

<meta-data
android:name="com.google.android.clockwork.home.preview"
android:resource="@drawable/ic_preview" />

ในส่วน intent-filter เพิ่ม category เพื่อกำหนดให้แสดงผลเป็น Background

<category android:name="com.google.android.clockwork.home.category.HOME_BACKGROUND" />

ตัวอย่าง Android Manifest

ทีนี้มาทำ Watch Face กัน แบบง่ายๆ แก้ไข layout ในไฟล์ rect_activity_wear.xml และ round_activity_wear.xml เพิ่ม ImageView และ TextClock ลงไปดังนี้

ใครอยากได้ภาพ Background ก็ทำภาพสวยๆ ขนาด 320x320px ใส่ลงไปได้ใน ImageView จากนั้นมาลองทดสอบ Wear App กัน วิธีการทดสอบทำได้ง่ายๆ สั่ง Run App บน AVD ที่เราสร้างขึ้น App จะ Run ขึ้นมาปกติ ให้เลื่อนขวา แล้วกดค้างที่หน้าจอ เพื่อเปลี่ยน watch face คุณก็จะเห็น watch face ของคุณขึ้นมา

วิธีการทำ Package สำหรับเผยแพร่ใน Play Store เนื่องจาก Wear Device ไม่สามารถเชื่อมต่อกับ Play Store ได้โดยตรง จำเป็นต้องใช้ Mobile App เป็น Payload ถ้าสั่งติดตั้ง Mobile App ที่มี Wear App อยู่ด้วย ตัวมือถือจะ Sync App ไปยังนาฬิกาให้อัตโนมัติ วิธีเพิ่ม wear apk ลงไปใน Mobile App ซึ่งก็มีอยู่ 2 วิธี คือ

  • Sign Package ของ Wear App แล้วเพิ่มเข้าไปใน Mobile App เอง
  • Sign Package ของ Wear App แล้วเพิ่มเข้าไปใน Mobile App แบบอัตโนมัติ

ก็เลือกอย่างหลังจะง่ายที่สุดครับ ให้ดู build.gradle ใน Mobile Module ว่าตั้งค่า WearApp เป็น dependencies แล้วหรือยัง (ถ้าเราสร้าง project มาพร้อมกัน Android Studio จะเพิ่ม WearApp เป็น dependency ให้อยู่แล้ว) จากนั้นสั่ง Generated Sign APK ที่ Mobile Module ได้เลย คุณก็จะได้ APK ที่เป็น Mobile App และมี Wear App อยู่ข้างใน ทีนี้ก็เอา Apk ที่ได้ เอาไปทดสอบกัน

วิธีการสร้าง Custom Watch Face นี้อาจไม่ถูกต้องนัก ทำสอบจาก Emulator มีผลข้างเคียงในเรื่องของการแสดงผล Notification และอาการ Screen Flick ซึ่งบนนาฬิกาจริงๆ ไม่รู้ว่ามีอาการแบบเดียวกันหรือไม่ ถ้าใครมี LG G Watch หรือ Gear Live ก็ฝากลองด้วย :P เอาไว้ถ้ามีวิธีการที่ดีกว่านี้ หรือ Google ปล่อย Watch Face API ออกมาแล้ว เดี๋ยวจะมาอัพเดทกันอีกรอบ :)

ThaiOpenSource เปลี่ยนมาใช้ WordPress เรียบร้อยแล้ว แต่เนื้อหาบางส่วนจะทะยอย import เข้าไปเรื่อยๆ มาใช้ WordPress เขียน Blog เรื่อง WordPress CLI สักหน่อย เมื่อปีที่แล้วงาน WordCamp San Francisco 2013 Mike Schroder เปิดตัว WP-CLI หรือ WordPress Command Line ซึ่งน่าสนใจดี สามารถทำงานได้หลายอย่าง เช่น

  • ดาวน์โหลดและติดตั้ง WordPress เวอร์ชั่นล่าสุด
  • อัพเดท WordPress
  • ติดตั้ง, อัพเดท Theme, Plugin
  • จัดการเนื้อหา Blog, Page และอื่นๆ

เรียกได้ว่ามากความสามารถเลยทีเดียว การติดตั้ง WP-CLI ทำได้ง่ายๆ ดังนี้

ก่อนติดตั้งควรมี PHP Cli ก่อนนะครับ ดาวน์โหลดและติดตั้ง PHP ให้เรียบร้อย จากนั้นดาวน์โหลด WP-CLI มาดังนี้

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

ตรวจสอบว่าไฟล์ที่ได้มาทำงานได้ถูกต้อง โดยใช้คำสั่ง

php wp-cli.phar --info

ถ้าไม่มี Error อะไร ก็สั่ง chmod และย้ายไฟล์ไปยัง /usr/local/bin ดังนี้

chmod +x wp-cli.phar

sudo mv wp-cli.phar /usr/local/bin/wp

จากนั้นลองใช้คำสั่ง wp –info ดูว่าทำงานหรือเปล่า

เมื่อติดตั้งได้แล้วมาลองใช้งานกัน เริ่มจากติดตั้งและตั้งค่า WordPress ผ่าน WP-CLI

cd /var/www

wp core download

wp core config --dbname=wordpress_db --dbuser=db-username --dbpass=db-password

จากนั้น browse ไปที่เว็บและเริ่มตั้งค่า wordpress ต่อได้เลย ทีนี้มาลองติดตั้ง theme กันบ้าง

wp theme install the-bootstrap

จัดการ activate theme เพื่อเรียกใช้งาน

wp theme activate the-bootstrap

ประมาณนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับ WP-CLI ได้ที่ wp-cli.org

สำหรับท่านที่มี Smartwatch ที่ใช้ Android Wear สามารถเปิด ADB Debuging  บนนาฬิกาได้และสามารถสั่งงานผ่าน ADB ได้ สามารถ Debug Application ได้ และสามารถแสดงหน้าจอนาฬิกาผ่านโดยโปรแกรม Droid@Screen หรือใช้ Android Screen Monitor ได้ วิธีการเปิด ADB Debugging มีขั้นตอนดังนี้

  • เปิดหน้าจอนาฬิกา
  • เลือก Settings
  • เลือก About
  • กด Build Number ไป 7 ครั้ง
  • เลือนขวากลับไปหน้า Setting เลือก Developer Options
  • เลือก ADB Debugging
  • เลือกเปิด ADB Debugging

ตัวอย่างหน้าจอ เปิดหน้าจอหลักตัวนาฬิกา

แตะไปที่นาฬิกาเพื่อเลือกเมนู มันจะขึ้นเป็น Google Voice ไม่ต้องพูดอะไรครับ :P เลื่อนขึ้นเลือกเมนู Setting

เลื่อนขึ้นเลือกเมนู About

เลื่อนขึ้นเลือกตรง Build Number แตะไป 7 ครั้ง ตัวนาฬิกาจะบอกว่าเปิด Developer Option แล้ว

เลื่อนขวากลับไปหน้า Setting จะพบว่ามีเมนู Developer Options ขึ้นมาแล้ว

แตะเลือก Developer Options เลื่อนไปเลือกตรงเมนู ADB Debugging

จะขึ้นหน้าจอถามว่าจะต้องการเปิด ADB Debugging มั๊ย กดปุ่มสีเขียวได้เลย

ปล. ท่านที่ใช้ Emulator ไม่ต้องกดตามนะครับ :P

Android Wear เป็น Platform SmartWatch ที่เพิ่งเปิดตัวไปเมื่อไม่นานมานี้ จากงาน Google I/O 2014 ในเบื้องต้น Android Wear เน้นการเชื่อมต่อกับ Smartwatch และ tablet สามารถ share notification ได้อัตโนมัติ โดย notification ที่แสดงผลบน Smartphone จะแสดงผลบน Smartwatch ด้วยเช่นกัน โดยแสดงผลเป็น card ในรูปแบบของ context stream การใช้ notification ที่เชื่อมระหว่าง Smartphone และ Smartwatch สามารถช่วยสร้างประสบการณ์การใช้งานที่ดีให้กับผู้ใช้ได้ หากคุณเพิ่มฟังก์ชั่นการใช้งานเข้าไปให้กับ notification ที่คุณสร้างด้วย

มาลองสร้าง Notification บน Android Wear กัน สำหรับท่านที่เคยเขียน Notification บน Android มาแล้ว อาจจะคุ้นเคยกับ Notification Builder สำหรับ Smartphone กันอยู่แล้ว แต่ถ้าคุณต้องการสร้าง Notification เพื่อให้แสดงผลทั้งบน Smartphone และ Smartwatch ด้วยจะต้องใช้ NotificationCompat Builder สำหรับการใช้งาน NotificationCompat คุณจะต้องเรียกใช้ library จาก Android Support Library มาทดลองเขียนกันครับ

ขั้นแรกสิ่งที่คุณต้องมี

  • Android Studio 0.8.x รุ่นล่าสุด
  • Android Wear System Image ใช้ Atom ได้จะเร็วมาก อย่าลืมติดตั้ง HAXM ด้วย
  • Android Support Library
  • Android Wear App ดาวน์โหลดได้ที่ Google Play Store

Continue reading

เนื่องจากมีเรื่องจุกจิกกับการจัดการ Thai OpenSource ทั้งเรื่องอัพเดท Drupal และ Module เว็บ Thai OpenSource ใช้ Drupal มาตั้งแต่เวอร์ชัน 5 อัพเดทเวอร์ชั่นมาเรื่อยๆ จนถึงเวอร์ชัน 7 ใช้ Module ประหลาดเยอะแยะ ไม่ว่าจะเป็น CCK, View, Panel รวมไปถึงการเขียน module เพิ่มเติม หลังจากผ่านกาลเวลาการอัพเดทมาจนถึงเวอร์ชัน 7 ทำให้เกิดอาการขี้เกียจประกอบกับฐานข้อมูลของ Drupal เริ่มเละเกิดอาการ error ในบาง module ก็เลยพยายามหาทางพอร์ทไปยัง CMS อื่นๆ ทั้งเป็นแบบใช้บริการและแบบโฮสเอง

มหากาพย์การพอร์ท Drupal ที่ได้ทดลองทำ ได้แก่

  • พอร์ทเนื้อหาเดิมไปยัง Drupal ตัวใหม่แบบสะอาดๆ
  • พอร์ทเนื้อหาเดิมไปยัง Blogger เพราะไม่อยากดูแลเรื่อง CMS เอง แต่ Blogger ก็พัง เพิ่ม Static Page ไม่ได้อีกเลย
  • พอร์ทเนื้อหาเดิมไปยัง WordPress

อย่างหลังสุดดูจะเป็นมิตรและไม่พัง แต่สุดท้ายก็ต้องโฮสเว็บเอง คิดว่าการอัพเดทจะทำได้ง่ายกว่า :) สำหรับท่านที่สนใจอยากย้าย Drupal ไป Blogger หรือ WordPress ก็ตามไปดู script ใน GitHub ได้ดังนี้

 

Atom Text Editor เป็น Editor น้องใหม่จากค่าย GitHub ซึ่งออกมาให้ใช้ได้ระยะหนึ่งแล้ว โดยตัวโปรแกรมออกมารองรับเฉพาะผู้ใช้ OSX เท่านั้น แต่ก็มีนักพัฒนาได้พอร์ทไปยังระบบปฏิบัติการอื่นๆ ด้วย เช่น Linux และ Windows เป็นต้น Atom ในแนวคิดการออกแบบมาคล้ายกับ Emac และ Sublime Text คือเป็น Editor ครอบจักรวาล ซึ่งตั้งต้นด้วย Edit ความสามารถเบื้องต้นธรรมดาๆ แต่เปิดให้เขียน plugin เพิ่มเติมได้ ซึ่งทำให้เราเพิ่มความสามารถของ Atom ได้ตามที่เราต้องการและที่สำคัญ Atom ใช้งานฟรีครับ :)

สำหรับท่านที่ใช้งาน OSX ไม่มีปัญหาสักเท่าไรกับการติดตั้ง Atom สามารถดาวน์โหลดมาติดตั้งกันได้เลย แต่สำหรับท่านที่ใช้ Ubuntu ต้องติดตั้งจาก PPA ดังนี้

sudo add-apt-repository ppa:webupd8team/atom

sudo apt-get update

sudo apt-get install atom

จากนั้นก็เริ่มใช้งานกันได้เลย สำหรับหน้าตาก็จะคล้ายๆ กับ Sublime Text และปุ่มคีย์ลัดจะคล้ายๆ กัน เดี๋ยวเรามาลองติดตั้ง package เพิ่มความสามารถให้กับ Atom กันดีกว่า เปิด Atom ขึ้นมาแล้วคลิกไปที่เมนู File > Preferences… เลือกเมนู Packages ด้านข้าง

แล้วพิมพ์ Atom Bootstrap แล้วติดตั้ง Package ที่ชื่อ Atom Bootstrap3 ลงไปครับ ง่ายๆ แค่นี้เอง

จากนั้นมาลองเล่น Plugin นี้กันครับ สำหรับท่านที่เล่น Bootstrap คงทราบดีว่า Bootstrap ช่วยให้คุณพัฒนาเว็บไซต์ได้เร็วมากแค่ไหน และที่สำคัญสิ่งที่ Bootstrap มีให้ย่นระยะเวลาทำงานของคุณไปเยอะ ทั้ง 12 Grids System, CSS และ JQuery Plugin ที่มีให้สามารถเรียกใช้ได้เลย แต่ปัญหาคือ จำไม่ได้ว่า Bootstap ใช้ class css อะไรบ้างในการเรียกใช้ และที่สำคัญคือจำไม่ได้ทั้งหมดเพราะมันเยอะมาก ทำให้เราต้องคอยเปิดคัมภีร์ Bootstrap กันอยู่เรื่อยๆ :) ทีนี้เรามาลองใช้ Atom กันว่าจะง่ายขนาดไหน

ให้คุณเปิดไฟล์ใหม่ขึ้นมาดังนี้ File > New File หรือกด Ctrl+N จากนั้นบันทึกไฟล์นี้เป็นไฟล์ html ชื่อ test.html จากนั้นเราจะใช้ความสามารถของ Plugin Atom Bootstrap ที่เราเพิ่งติดตั้งไปดังนี้ ให้พิมพ์ คำว่า html- แล้วกดปุ่ม tab คุณจะพบว่า Atom เอา code snipet มาวางให้อัตโนมัติ

ถ้าสังเกตดูจะพบว่า url ของ css และ bootstrap ขาดอะไรไปบางอย่าง คุณสามารถใช้ความสามารถของ multi cursor เพื่อแก้ไขจุดเดียวแต่แก้ไขข้อความได้ทุกจุดที่เหมือนกัน ให้เอา cursor เลือกคำว่า //netdna แล้วกด Ctrl+D ไปเรื่อยๆ

คุณจะพบว่า Atom เลือกคำว่า //netdna ในจุดที่เหมือนกันในเอกสาร ให้เลือน corsor กลับมาก็จะพบว่าคุณมี corsor กระพริบอยู่ 3 จุด คุณสามารถพิมพ์คำว่า http: เพิ่มเข้าไปได้เลยง่ายๆ ดังนี้

มาลองอย่างอื่นกันบ้างครับ คนใช้ Bootstrap ชอบ Narvigation Bar สวยๆ เรามาลองสร้างกันดูครับ เลือน corsor มาอยู่ในส่วน body แล้วพิมพ์ navbar แล้วกด tab

เราจะพบว่า Atom เพิ่ม code snipet ส่วน Navigation Bar ให้เราเต็มไปหมดเลย ทั้ง Navigation Bar logo, Menu, Search Form และ Right Navigation Bar คุณสามารถเลือกได้ว่าจะลบจะเพิ่มอะไรได้หลังจากนี้

มาลองอย่างอื่นบ้างครับ เลื่อน corsor ไปท้าย tag nav จากนั้น

  • พิมพ์ con แล้วกด tab
  • พิมพ์ row แล้วกด tab
  • พิมพ์ col-lg แล้วกด tab แก้ตัวเลข 1-12 เป็น 6 เลือน corsor ไป 1 บรรทัด
  • พิมพ์ well แล้วกด tab เลือน corsor ไป 1 บรรทัด
  • พิมพ์ lorem แล้วกด tab
  • เลือกตั้งแต่ div col-lg-6 แล้วกด Ctrl+Shift+D เพื่อคัดลอกและวาง

จะได้โค้ด html ดังภาพ

ลองเปิดไฟล์นี้ด้วย Browser ดูครับ เราจะได้ผลลัพท์ดังนี้

เล่นพอสนุกสนานในเวลาอันรวดเร็วครับ สำหรับ snipet อื่นๆ ของ Atom Bootstrap สามารถอ่านเพิ่มเติมได้ที่เว็บไซต์ Atom Bootstrap3 เอาไปลองเล่นกันดูนะครับ