Web Application Development Workflow

ราชศักดิ์ บูรณะพาณิชย์กิจ - นักวิชาการคอมพิวเตอร์

bratchasak@eng.psu.ac.th

พัฒนาวดี ศิวติณฑุโก - นักวิชาการคอมพิวเตอร์ชำนาญการ

spattana@eng.psu.ac.th

กำหนดการ

• 09:00 - 10:30 : Web Application Development Workflow คืออะไร & Chrome Browser & Sublime Text

• 10:45 - 12:00 : สร้างระบบ Version control สำหรับการพัฒนาด้วย Git

• 13:00 - 14:30 : GitHub

• 14:45 - 16:00 : Workshop สร้าง Web Application

Web Application Development Workflow

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

Development Workflow คือ ลำดับขั้นตอนหรือกระบวนการในการพัฒนา

Chrome Browser

Chrome Browser - Features

• Fast to run web applications

• multi-process architecture

• Auto-updates

• Chrome Web Store

• Developer Tools - Ctrl + Shift + i

• Open Source (The Chromium Projects)

Sublime Text

Sublime Text - Features

• Goto Anything - Ctrl + p

• Command Palette - Ctrl + Shift + p

• Split Editing

• Customize Anything

• Multiple Selections - Ctrl + d

• Plugin API

Package Control - the Sublime Text package manager

Show Console - Ctrl + `

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

• Emmet

• SideBarEnhancements

• SublimeLinter

Software configuration management

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

• Local data model - Revision Control System (RCS)

• Client-server model - Concurrent Versions System (CVS), Subversion (svn)

• Distributed model - Git, Mercurial

Git

ข้อแตกต่างระหว่าง Subversion และ Git

• Subversion เป็น Centralized Source Control ส่วน Git เป็น Distributed Source Control

• Subversion เวลาสั่ง Checkout ออกมาจะเอามาเฉพาะ Source Code version ล่าสุด แต่ Git จะ Clone ลงมาทั้ง Repository เลย (ดูที่คำสั่งจะเห็นว่าใช้ชื่อว่า clone ไม่ใช่ checkout) โดย code จะมาทั้ง repository เรียกว่าเป็น local repository

• Git ก่อนจะ commit จะต้องทำ staging ก่อน เหมือนเป็นการเลือกว่าจะ commit file ไหนบ้าง ในการแก้ 1 ครั้งเราอาจจะแก้ 3-4 file ซึ่งเป็น 2 bug เวลา commit ก็แยก commit ผ่านการ stage file เพื่อแยกเป็น 2 commit

• ข้อแตกต่างอีกอย่างก็คือ Git จะไม่มีเลข revision กำกับการ commit ในแต่ละครั้ง แต่จะเป็น hash checksum แบบนี้ d39b7814441168a63e02677a320a3e73aace0139 แทน

Git - File Status Lifecycle

Git Basics

• git init

• git status

• git add <file>

• git commit -m "<message>"

• git branch <branch_name>

• git checkout <branch_name>

• git merge <branch_name>

GitHub

GitHub Windows

GitHub - Features

• Clone

• Push

• Pull

• Collaborators

• Fork & Pull Request

• GitHub Pages

Workshop

• slide

• fullPage.js

• jquery

• jquery-ui