ผมชวนเพื่อนๆ CoP PSU IT ซึ่งเป็นรุ่นน้องชื่อคุณราชศักดิ์ บูรณะพาณิชย์กิจ และพัฒนาวดี ศิวติณฑุโก อยู่ที่คณะวิศวกรรมศาสตร์ มาจัด Workshop ใช้เวลา 1 วัน เรื่อง Web Application Development Workflow
วิทยากรเตรียม slide ที่นี้ครับ http://bratchasak.github.io/slide/
คร่าวๆ คือ แนะว่า Web Application Development Workflow คืออะไร อธิบายว่าขั้นตอนของการพัฒนาและเครื่องมือที่ใช้ในการทำงาน ก็คือ Chrome Browser และ Sublime Text และติดตั้งโปรแกรม Git ใช้งานแบบ command line และ github for Windows แบบ GUI และสมัครบริการที่จำเป็นต้องใช้ก็คือ GitHub web เครื่องมือทั้งหมดนี้ก็จะสร้างระบบ Version control สำหรับการพัฒนาด้วย Git ได้แล้ว
การเตรียมเครื่องมือสำหรับทำงาน
1.เกี่ยวกับ Chrome Browser (google chrome)
ต้องลงชื่อเข้าใช้ google เพื่อทำงานได้ครบทุก Feature
เข้าเว็บหน้านี้ https://www.google.com/intl/th/chrome/browser/ จะเห็นตัวอย่างชัดๆในการตรวจสอบด้วย Developper Tools
เปิดหน้าต่าง Developper Tool ด้วย Ctrl+Shift+i
คลิกเลือกไอคอน แว่นขยาย เพื่อส่องดูโค้ดได้
นอกจากนี้ก็มีแท็บน่าสนใจคือ แท็บ Console สำหรับ debug และ แท็บ Network สำหรับดู latency load time
เปิดดูการทำงาน เมนูที่ใช้ใน workshop คือ คลิกปุ่มกำหนดค่าและควบคุม (มุมบนขวา) > เครื่องมือ > ตัวจัดการงาน
ติดตั้งส่วนขยาย LiveReload
www.google.com > search คำว่า livereload > เลือก Chrome Web Store – LiveReload
คลิกปุ่มกำหนดค่าและควบคุม (มุมบนขวา) > เครื่องมือ > ส่วนขยาย > เลือกตัวเลือก อนุญาตให้เข้าถึงไฟล์ URL
2. ติดตั้งโปรแกรม Sublime Text 3 for Windows
www.google.com > search คำว่า sublime
เลือกเวอร์ชั่นให้ตรงกับ Windows OS ที่ใช้
ตาม slide หน้านี้ http://bratchasak.github.io/slide/#sublimetext_package
ติดตั้ง package เพิ่มลงใน Sublime
กดแป้น Ctrl+Shift+p > search คำว่า package > เลือก Package Control: Install Package
> search คำว่า emmet > คลิกเลือก emmet
> search คำว่า livereload > คลิกเลือก LiveReload
> search คำว่า syntax คลิกเลือก Syntax Manager
ต่อมา วิทยากรอธิบาย Software configuration management ว่ามี 3 model คือ Local data model, Client-server model และ Distributed model เช่น Git
“Git is a free and open source distributed version control system.”
3. ติดตั้ง Git
เข้าไปเว็บไซต์ http://git-scm.com/ และดาวน์โหลดเวอร์ชั่นสำหรับวินโดวส์ จะได้ไฟล์ Git-1.9.0-preview20140217.exe
คลิก Run เพื่อติดตั้ง แต่ไม่คลิก Next ทั้งหมด
ในหน้า Select Components เลือก Simple context menu
ในหน้า Adjusting your PATH environment เลือก Run Git from the Windows Command Prompt
ในหน้า Configuring the line ending conversions เลือก Checkout Windows-style,commit Unix-style line endings
ต่อจากนั้น วิทยากรอธิบายเกี่ยวกับ Git – File Status Lifecycle
ดูที่ http://bratchasak.github.io/slide/#gitstatus
เริ่มต้นเข้าสู่การใช้งาน Git
แบบที่ 1 เรียนรู้การทำงานในแบบ command line
สร้างโฟลเดอร์ที่จะเป็น Repository (ก็คือ project)
คลิกปุ่ม Start > พิมพ์ cmd
cd \
mkdir test
cd test
git init
จะเกิดโฟลเดอร์ชื่อ .git
ตรวจสอบสถานะ
git status
เริ่มต้นด้วยการกำหนดชื่อ identity เจ้าของ repository
git config –global user.name “Wiboon Warasittichai”
git config –global user.email “wiboon080808@gmail.com”
ตรวจสอบรายการในไฟล์ config
git config –list
นำไฟล์ index.html เข้าใน project หรือเรียกว่า repository
git add index.html
เปลี่ยนเข้าสู่สถานะ staged
git commit -m “initial commit”
ตรวจดูรายการแก้ไข
git log
หรือ
แสดงผลแบบ 1 บรรทัดพร้อมด้วยตัวชี้(pointer)
git log –graph –decorate –all –pretty –oneline
การแตก branch เพื่อใช้ทำงานเขียนโปรแกรม แทนการแก้ไขที่ master
git branch feat_test
เข้าแก้ไขใน branch
git checkout feat_test
เปิดหน้า sublime แล้วลองเพิ่ม 1 บรรทัดลงใน index.html
ต่อไปทำซ้ำรอบในการทำงาน คือนำไฟล์ index.html เข้าใน project (จะเรียกว่า repository)
git add index.html
เปลี่ยนเข้าสู่สถานะ staged อีกครั้งแต่รอบนี้เป็นการแก้ไขที่ branch
git commit -m “1st edit – add 1 line”
แสดงผลแบบ 1 บรรทัดพร้อมด้วยตัวชี้(pointer)จะเห็นว่า pointer อยู่ที่ branch ชื่อ feat_test
git log –graph –decorate –all –pretty –oneline
กลับไปที่ master
git checkout master
ดูที่ sublime text editor จะเห็นว่าเป็น index.html ก่อนการเพิ่มอีก 1 บรรทัด
(แสดงผลที่แตกต่างทันทีจากที่เพิ่ม package ชื่อ LiveReload ลงใน sublime text)
ต้องการ merge ไฟล์ index.html ของ branch ชื่อ feat_test เข้ากับ branch ชื่อ master
git merge feat_test
ตรวจสอบสถานะ
git status
สมัครสมาชิก GitHub web เพื่อใช้เป็นที่เก็บ repository ของเราเพื่อเผยแพร่สาธารณะ
เข้าไปที่ https://github.com/
แบบที่ 2 เรียนรู้การใช้งาน Git แบบ GUI
ต่อไปจะเป็นการใช้ GitHub for Windows (เรียกว่า Client) ให้ดาวน์โหลดที่นี่ http://windows.github.com
ติดตั้งใช้เวลานิดนึง เพราะไฟล์ขนาด 41.8MB เมื่อเสร็จจะมีหน้าต่าง Welcome เพื่อให้ login
ก็ใส่ e-mail และ password ที่สมัคร
ต่อไปจะอยู่ที่ขั้นตอน configure ให้คลิก Next
อยู่ที่ขั้นตอน repositories ให้คลิก dashboard
จะเปิดหน้าต่าง ให้เราลาก โฟลเดอร์ชื่อ test มาใส่ที่ local – repositories
แล้วคลิกลูกศรชี้ขวาที่บรรทัด test จะเป็นคำว่า Open this repo
คลิก publish
เมื่อมีการแก้ไข branch master หรือ branch feat_test ก็คลิก Sync
ในทางกลับกัน หากสร้าง repository จากหน้า GitHub web ก็สามารถ clone ลงไปที่ Windows ได้เช่นกัน
กลับไปที่ GitHub web โดยเข้าไปที่ https://github.com/
คลิก New repository
ตั้งชื่อ Repository name ตั้งว่า ztest แล้วคลิก Create repository
คลิกปุ่ม Set up in Desktop มันจะมาสร้างไดเรกทอรีที่ c:\My Documents\GitHub\ztest
Google chrome จะถามอะไรสักอย่าง ก็ให้ตอบ “เปิดใช้งานแอปพลิเคชัน”
เราก็เริ่มทดสอบสร้างไฟล์ my.html ไว้ที่นี่ แล้ว publish กลับไปที่ GitHub web ได้เมื่อต้องการ
เรื่องสุดท้าย GitHub – Features อันแรก Collaborators คือ การอนุญาต user บน GitHub ให้ร่วมแก้ไขไฟล์ด้วยกันได้ และอีกอัน Fork & Pull Request คือ เอาไปทั้งหมดแยกกันไปทำแล้วค่อยมารวม และ GitHub Pages คือ การสร้าง web page บน GitHub
การสร้าง web page บน GitHub ทำดังนี้
หากเราสร้าง repository ด้วยการตั้งชื่อด้วยข้อความ username.github.io ก็จะได้ web page ไว้ใช้งานด้วย
ซึ่งสร้างอย่างง่ายๆด้วย Automatic Page Generator (https://help.github.com/articles/creating-pages-with-the-automatic-generator) หลังจากสร้างเสร็จต้องรอ 10 นาที web page ก็จะใช้งานได้
ทดสอบด้วยการพิมพ์ว่า http://username.github.io ตัวอย่างเช่น http://wiboon.github.io/
ทั้งหมดนี้ผมก็ฟังไปจดไปในกระดาษ แล้วก็กลับมาลองทำเองดูในวันนี้ แล้วก็เขียนลง sysadmin blog ที่นี้ไว้เผื่อเพื่อนๆด้วยครับ