แชร์ Mock-up ให้กับทีมแบบไม่มีค่าใช้จ่ายด้วย Pencil + Azure

ผมได้มีโอกาสหาวิธีในการ สรุป Requirements ที่ได้รับมาจากทางลูกค้า และเสนอไอเดียเบื้องต้นให้กับทางทีมงานของผม ทั้ง Designer และ Developer

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

• ใช้เวลาทำเอกสารไม่มากจนเกินไป
• เอกสารต้องอ่านง่าย และสะดวกในการทำความเข้าใจในเนื้อหา
• เอกสารต้องประกอบไปด้วย workflow คร่าวๆของการทำงาน + UI คร่าวๆ
• ทุกๆคนในทีมสามารถเข้าถึงได้ง่าย ไม่ว่าจะเป็น คอมพิวเตอร์ หรือ มือถือ

จากโจทย์ข้างต้น ผมจึงตัดสินใจใช้ Tools ซึ่งไม่มีค่าใช้จ่าย ดังต่อไปนี้

• Pencil เป็น GUI prototyping tool ที่ใช้งานง่ายมากๆ และ สามารถ Export design ออกมาเป็น HTML Files
• Azure-Free App Service Plan เป็นบริการของ Azure ที่เราสามารถวาง website ได้ฟรีใน Azure ครับ ไม่ว่าจะเป็น .NET, Node.js, PHP, Java, Python, static HTML site ซึ่งในกรณีนี้เราจะวาง static HTML site นะครับ
  (แต่ประสิทธิภาพก็จะไม่ดีเท่าแบบเสียเงินใน plan อื่นๆน่ะครับ)

ซึ่งไอเดียผมก็คือ จะ ใช้ Pencil เพื่อ สรุปไอเดียและ Export เป็น HTML และนำ files ไปวางไว้ใน Azure ครับ

เรามาเริ่มต้นกันด้วย Pencil Tool กันก่อนน่ะครับ

• ติดตั้งโปรแกรมจาก https://pencil.evolus.vn/
• เปิดโปรแกรมที่ติดตั้งแล้ว

Pencil Menu ที่ใช้งานบ่อยๆ

Shapes

• Template เตรียมไว้ให้หลายหลากรูปแบบครับ ทั้ง Flowchart, Sketchy UI, Desktop UI, Web UI, iOS UI, Andriod UI และ อื่นๆ
• รวมถึงเรายังสามารถ import ประเภท อื่นๆเข้าไปอีกได้น่ะครับ เช่น Bootstrap, Font Awesome

ตัวอย่าง Controls ที่มี

ตัวอย่าง Template ที่สามารถ Import เพิ่มได้จาก Repository ของ Pencil

Clip-art

• ในกรณีที่เราอยากได้ clip art เพิ่มเติมก็สามารถค้นหาจาก menu นี้ได้เลยครับ

ตัวอย่างการหารูปภาพจาก Clip-art

ตัวอย่าง Pencil Design ที่ผมสร้าง

• ข้อดีของ Pencil คือสามารถทำ Link เพื่อเชื่อมไปยัง UI หรือ flow ในหน้าอื่นๆ ได้สะดวกดีครับ

ทำการ Export HTML File จะได้หน้าตาประมาณนี้

• Download file ได้ที่นี้

ตอนนี้เราจะได้ HTML Files สำหรับ Mock-up แล้วน่ะครับ ในขั้นถัดไปจะเป็นการติดตั้ง ลงใน Azure ซึ่งจะมีขั้นตอนดังนี้

• เข้า https://portal.azure.com
• ไปที่ App Service >> + Add >> Web App

ทำการกรอก

• ชื่อเว็ป
• เลือก subscription (เราจำเป็นต้องสมัคร Subscription ซึ่งต้องการ บัตรเครดิต ก่อน ถึงจะสามารถใช้งาน Azure ได้ แต่เราจะไม่ถูกเรียกเก็บเงินเพราะเราจะใช้ free plan ในขั้นตอนถัดไป)
• เลือก สร้าง group ใหม่ หรือเลือก group ที่มีอยู่แล้วก็ได้ (เป็นการจัดหมวดหมู่ของบริการที่เราใช้ Azure ซึ่งการรวมหลายๆบริการไว้ใน group เดียวกัน จะช่วยให้การค้นหาและจัดการทำได้ง่ายในภายหลัง)
• เลือก Windows OS
• เลือก Free App Service Plan (Location = Southeast Asia)

• กดตกลงและ รอ Azure ดำเนินการสร้าง App Service Plan ให้เรา
• หลังจากติดตั้งเรียบร้อย ลองเข้าไปดูเว็ปที่เราสร้างที่ Resource Group

• App Service Plan จะเปรียบเสมือน Server ที่ web เราวางอยู่
• App Service คือ Web ที่เราเตรียมไว้เพือวาง Mock-up
• ลอง Click ที่ App Service demo-free-mockup
• ใน Blade Overview >> URL จะเป็น url ของเว็ปเรา http://demo-free-mockup.azurewebsites.net

ขั้นตอนการ Deploy HTML files ขึ้นสู่ Azure

มีทั้งหมอ 2 ขั้นตอน คือ 1. FTP, 2. Local Azure Git

Deploy ผ่าน FTP

• Click Get publish profile menu

• จะได้ file demo-free-mockup.PublishSettings
• เปิด File ผ่าน text editor tool และ copy credential สำหรับการต่อ FTP (Attributes: publishUrl, userName, userPWD)
• ทดลองต่อ FTP ผ่าน FireZilla และนำ HTML files ของเราไปติดตั้ง

• ทำการ copy & paste HTML files ของเราลงใน path /site/wwwroot

• หน้าตาหลังติดตั้งเสร็จ
• http://demo-free-mockup.azurewebsites.net/

Deploy ผ่าน Local Azure Git

• ติดตั้ง Azure Local Git โดย ไปที่ Deployment options >> Local Git Repository

• ทำการสร้าง user สำหรับ local git โดยไปที่ Deployment credentials

• เสร็จแล้วไปที่ Property >> Git URL

• Copy url แล้วนำไปเปิดใน Source Tree

• เปิด folder ใน local drive ของเรา และทดลองแก้ file index.html และ Push ขึ้น master branch

• ดู Changes ที่เกิดขึ้น

สรุป

• ใช้ Pencil เพื่อช่วยสร้างภาพ และ แชร์ให้กับคนอื่นผ่าน HTML files ซึ่งจะช่วยให้เข้าใจเนื้อหาในตัวเอกสารได้สะดวกขึ้น
• เหตุผลที่เลือก Pencil เพราะฟรี และใช้งานง่าย
• แต่ข้อเสียคือไม่สามารถแชร์เอกสารให้คนอื่นแบบ online ได้ เหมือนกับ tool อื่นๆในท้องตลาด จึงต้องใช้ Azure Free App Service Plan มาช่วยตรงจุดนี้
• เราสามารถ Deploy งานของเราขึ้น Azure ได้หลากหลายวิธี ซึ่งในบทความนี้ หยิบมาใช้สองแบบคือ 1. FTP, 2. Local Git

หวังว่าบทความนี้จะมีประโยชน์กับผู้อ่านที่ที่กำลังมองหา Tool และระบบ ในการสื่อสารภายในทีมน่ะครับผม

ขอบคุณมากๆครับ

นายป้องกัน