สวัสดีครับคุณผู้อ่าน วันนี้จขกท. จะมาเล่า กว่าจะมาเป็นหน้าโปรแกรม 1โปรแกรม เราผ่านอะไรมาบ้าง บางคนอาจจะคิดว่า ใช้ง่าย เวลาออกแบบก็คงง่าย แต่เปล่าเลย ทุกการออกแบบล้วนมีกระบวนการของมัน โดย ในการเล่าการออกแบบนั้น ผมขอยกตัวอย่างจากโปรแกรมที่ผมกับทีมได้ลงไม้ลงมือร่วมกันสร้างขึ้นมานะครับ
โปรแกรมของเราชื่อ MakerPlayground (link makerplayground.io) (ตอนนี้ยังเป็นตัวเบต้า ทำให้ยังไม่สามารถทำให้บอร์ดต่อ internet ได้ครับ) เป็นโปรแกรมที่ช่วยให้ใครๆก็สร้าง IoT ได้ง่ายๆ โดยไม่ต้องรู้การเขียนโปรแกรมและการต่อวงจรอิเลคทรอนิกส์ โดยปกติแล้ว การสร้าง IoT หรือ smart device ขึ้นมาชิ้นหนึ่งนั้น เราจำเป็นต้องศึกษา ถึงรุ่นสเปคของอุปกรณ์ที่ใช้ และวิธีการเขียนโปรแกรม ซึ่งเป็นหนึ่งในปัญหาหลักสำหรับหลายๆคนที่มีไอเดีย อยากจะสร้างสิ่งประดิษฐ์จากไอเดียของตนเอง ดังนั้นเราจึงสร้างโปรแกรมนี้ขึ้นมาเพื่อตัดปัญหาเหล่านั้นครับ โดยหลักการของเรา มี 3 ขั้นตอนหลักๆ ครับ
[ ขอแจ้งให้ทราบว่า ตอนนี้โปรแกรมของเราอยู่ในระหว่างการจดลิขสิทธิ์ และ ยื่นคำขอจดแจ้งอนุสิทธิบัตร อยู่ครับ
หากรับทราบแล้ว กดอ่านที่ spoil ได้เลยครับ ]
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้
1. เลือกชนิดของอุปกรณ์ที่เราใช้
INPUT คือ พวก sensor ต่างๆ
OUTPUT คือ พวกอุปกรณ์ต่างๆ ที่เราสามารถสั่งการควบคุมมันได้ครับ
2. ต่อไดอาแกรม ตัวอย่างนี้คือ เมื่อกดปุ่ม ไฟจะติดค้าง 2วินาที แล้วก็ดับครับ
Scene จะเก็บการทำงานของอุปกรณ์ต่างๆที่ทำงานพร้อมกันไว้ครับ
Condition จะเก็บเงื่อนไข ถ้าเงื่อนไขนั้นเป็นจริง ระบบก็จะทำสิ่งต่างๆที่อยู่หลัง condition นั้นๆครับ
เราสามารถเลือกอุปกรณ์อื่นๆที่สามารถใช้ได้กับไอเดียของเราได้ด้วยครับ
3. ต่อวงจรตามที่ระบบสร้างขึ้นมา แล้วทำการอัพโหลดโค้ดไปยังแผงวงจรครับ เท่านี้ก็เสร็จแล้วครับ EASY มากๆเลย
โดยตอนแรกโปรแกรมของเราเว็บแอพพลิเคชั่น แต่หลังจากพบปัญหาและข้อจำกัดบางอย่าง จึงทำให้เราเปลี่ยนเป็น เดสท้อปแอพพลิเคชั่นแทน
โดยเบื้องต้นเราเริ่มคิดจากไอเดีย แล้วนำมาเขียนเป็น bullet คุยกันประมาณ สอง สาม รอบ จนตกผลึก จากนั้นเราก็เริ่มขึ้น wireframe แต่ wireframe ของเรามันต่างจากปกตินิดหน่อย เราเรียกมันว่า paper customizable wireframe
เป็น โครงร่างคร่าวๆ ของแต่ละหน้าโปรแกรม ที่เราทำลงบนกระดาษ และสามารถปรับแต่ง จัดเรียงได้ แล้วเราก็นำสิ่งนี้เข้าที่ประชุมในทีม จากนั้น ในทีมก็ช่วยกันคิด ช่วยกันร่าง นอกจากนี้แล้ว ทุกส่วนของ wireframe สามารถ ที่จะดึงออกมาแล้วจัดเรียงตำแหน่งใหม่ได้(แปะเทปกาวไว้)
โดยสิ่งนี้จะทำให้เราเห็นภาพรวมของโปรเจค สไตล์ การออกแบบ นอกจากนี้ยังช่วยลดปัญหา “ต้องทำอีกแล้วหรอ เมื่อไหร่จะเสร็จๆสักที” ด้วย
ทั้งนี้ในกรณีผมเดินทางบ่อยก็เลยเอามันมาแปะ ฟิวเจอร์บอร์ด แต่สำหรับใครที่มีห้องทำงานทำกันในห้อง การแปะกำแพงก็เป็นอีกอย่างนึงที่แนะนำครับ
เราทำกระบวนการนี้อยู่ประมาณ 2-3 รอบ จน เริ่มเป็นหน้าเป็นตากันบ้างแล้ว
วิธีใช้งาน หยิบมาแล้วก็คุยๆ จะแก้อะไรก็เอาปากกา ดินสอ มาวาดๆลงไป เพิ่มเติม หลังๆนี่องค์ประกอบมันเยอะ เลย ขี้เกียจตัด 555555
EASYYY ง่าย ขนย้าย สะดวก
แต่ด้วยปัญหาและข้อจำกัดบางอย่าง เลยทำให้เราต้องเปลี่ยนจากเว็บเป็นโปรแกรมแทน นอกจากนี้ เราก็ยังนำ ไปทดสอบกับผู้ใช้ของเรา เพื่อให้ตรงตามความต้องการของผู้ใช้ แต่ทั้งนี้การปรึกษากับ domain expert ก็เป็นสิ่งสำคัญเหมือนกัน
เมื่อได้ฟีดแบค เราก็นำมาปรับปรุงให้ดีขึ้น เราทำกระบวนการนี้ประมาณ 2-3 รอบ เช่นกัน จนตกผลึกออกมาเป็นแพลนโปรแกรม
ส่วนตัวเว็บของเราก็เปลี่ยนเป็นแค่เว็บไซต์แนะนำโปรแกรมเฉยๆ
ในบางครั้งถ้าเราเจอปัญหา เราก็นำปัญหามานั่งคุยกัน ส่วนใหญ่เราก็จะใช้ post it ในการแสดงไอเดียต่างๆ
บางครั้งท้อปปิกใหญ่ หรือไปออกอีเว้นมาหรือไปแข่งประกวดซอฟต์แวร์ เราก็ขึ้นกระดานกัน
และนี่ก็คือเทสต์ใหญ่ที่สุดที่เราเคยทำมา โดยเราทำไปทดสอบกับ นักเรียนโรงเรียนเซนต์ฟรังซีสซาเวียร์คอนแวนต์ ให้น้องๆลองใช้โปรแกรมแล้วถามฟีดแบค จนนำมาพัฒนาเป็นเวอร์ชั่นสุดท้าย
เย้ๆ ได้แล้ว final version
จะเห็นได้ว่า กว่าจะมาเป็นซอฟต์แวร์ตัวหนึ่ง ต้องใช้แรงพัฒนาอย่างมาก เพื่อออกแบบโปรดักส์ออกมา ให้ใช้ง่ายที่สุด และผมเชื่อว่าโปรดักส์อื่นๆ ก็ทุ่มเทและมากกว่าสิ่งที่เราทำ และ หวังว่า บางกระบวนการที่เราได้ทำ อาจจะเป็นประโยชน์สำหรับผู้อ่านในการนำไปปรับใช้กับงานของตนเอง
ขอบคุณครับ
กว่าจะออกแบบมาเป็นหนึ่งโปรแกรม
โปรแกรมของเราชื่อ MakerPlayground (link makerplayground.io) (ตอนนี้ยังเป็นตัวเบต้า ทำให้ยังไม่สามารถทำให้บอร์ดต่อ internet ได้ครับ) เป็นโปรแกรมที่ช่วยให้ใครๆก็สร้าง IoT ได้ง่ายๆ โดยไม่ต้องรู้การเขียนโปรแกรมและการต่อวงจรอิเลคทรอนิกส์ โดยปกติแล้ว การสร้าง IoT หรือ smart device ขึ้นมาชิ้นหนึ่งนั้น เราจำเป็นต้องศึกษา ถึงรุ่นสเปคของอุปกรณ์ที่ใช้ และวิธีการเขียนโปรแกรม ซึ่งเป็นหนึ่งในปัญหาหลักสำหรับหลายๆคนที่มีไอเดีย อยากจะสร้างสิ่งประดิษฐ์จากไอเดียของตนเอง ดังนั้นเราจึงสร้างโปรแกรมนี้ขึ้นมาเพื่อตัดปัญหาเหล่านั้นครับ โดยหลักการของเรา มี 3 ขั้นตอนหลักๆ ครับ
หากรับทราบแล้ว กดอ่านที่ spoil ได้เลยครับ ]
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้
โดยตอนแรกโปรแกรมของเราเว็บแอพพลิเคชั่น แต่หลังจากพบปัญหาและข้อจำกัดบางอย่าง จึงทำให้เราเปลี่ยนเป็น เดสท้อปแอพพลิเคชั่นแทน
โดยเบื้องต้นเราเริ่มคิดจากไอเดีย แล้วนำมาเขียนเป็น bullet คุยกันประมาณ สอง สาม รอบ จนตกผลึก จากนั้นเราก็เริ่มขึ้น wireframe แต่ wireframe ของเรามันต่างจากปกตินิดหน่อย เราเรียกมันว่า paper customizable wireframe
เป็น โครงร่างคร่าวๆ ของแต่ละหน้าโปรแกรม ที่เราทำลงบนกระดาษ และสามารถปรับแต่ง จัดเรียงได้ แล้วเราก็นำสิ่งนี้เข้าที่ประชุมในทีม จากนั้น ในทีมก็ช่วยกันคิด ช่วยกันร่าง นอกจากนี้แล้ว ทุกส่วนของ wireframe สามารถ ที่จะดึงออกมาแล้วจัดเรียงตำแหน่งใหม่ได้(แปะเทปกาวไว้)
โดยสิ่งนี้จะทำให้เราเห็นภาพรวมของโปรเจค สไตล์ การออกแบบ นอกจากนี้ยังช่วยลดปัญหา “ต้องทำอีกแล้วหรอ เมื่อไหร่จะเสร็จๆสักที” ด้วย
ทั้งนี้ในกรณีผมเดินทางบ่อยก็เลยเอามันมาแปะ ฟิวเจอร์บอร์ด แต่สำหรับใครที่มีห้องทำงานทำกันในห้อง การแปะกำแพงก็เป็นอีกอย่างนึงที่แนะนำครับ
เราทำกระบวนการนี้อยู่ประมาณ 2-3 รอบ จน เริ่มเป็นหน้าเป็นตากันบ้างแล้ว
วิธีใช้งาน หยิบมาแล้วก็คุยๆ จะแก้อะไรก็เอาปากกา ดินสอ มาวาดๆลงไป เพิ่มเติม หลังๆนี่องค์ประกอบมันเยอะ เลย ขี้เกียจตัด 555555
EASYYY ง่าย ขนย้าย สะดวก
แต่ด้วยปัญหาและข้อจำกัดบางอย่าง เลยทำให้เราต้องเปลี่ยนจากเว็บเป็นโปรแกรมแทน นอกจากนี้ เราก็ยังนำ ไปทดสอบกับผู้ใช้ของเรา เพื่อให้ตรงตามความต้องการของผู้ใช้ แต่ทั้งนี้การปรึกษากับ domain expert ก็เป็นสิ่งสำคัญเหมือนกัน
เมื่อได้ฟีดแบค เราก็นำมาปรับปรุงให้ดีขึ้น เราทำกระบวนการนี้ประมาณ 2-3 รอบ เช่นกัน จนตกผลึกออกมาเป็นแพลนโปรแกรม
ส่วนตัวเว็บของเราก็เปลี่ยนเป็นแค่เว็บไซต์แนะนำโปรแกรมเฉยๆ
ในบางครั้งถ้าเราเจอปัญหา เราก็นำปัญหามานั่งคุยกัน ส่วนใหญ่เราก็จะใช้ post it ในการแสดงไอเดียต่างๆ
บางครั้งท้อปปิกใหญ่ หรือไปออกอีเว้นมาหรือไปแข่งประกวดซอฟต์แวร์ เราก็ขึ้นกระดานกัน
และนี่ก็คือเทสต์ใหญ่ที่สุดที่เราเคยทำมา โดยเราทำไปทดสอบกับ นักเรียนโรงเรียนเซนต์ฟรังซีสซาเวียร์คอนแวนต์ ให้น้องๆลองใช้โปรแกรมแล้วถามฟีดแบค จนนำมาพัฒนาเป็นเวอร์ชั่นสุดท้าย
เย้ๆ ได้แล้ว final version
จะเห็นได้ว่า กว่าจะมาเป็นซอฟต์แวร์ตัวหนึ่ง ต้องใช้แรงพัฒนาอย่างมาก เพื่อออกแบบโปรดักส์ออกมา ให้ใช้ง่ายที่สุด และผมเชื่อว่าโปรดักส์อื่นๆ ก็ทุ่มเทและมากกว่าสิ่งที่เราทำ และ หวังว่า บางกระบวนการที่เราได้ทำ อาจจะเป็นประโยชน์สำหรับผู้อ่านในการนำไปปรับใช้กับงานของตนเอง
ขอบคุณครับ