Application for Check Office Equipment

ซาลาเปา หมั่นโถว
6 มิ.ย. 2561
ยาว 2 นาที

ที่มาและปัญหา

หลังจากทีมได้ทำการสร้างแอพพลิเคชั่นเช็คอุปกรณ์ต่างๆ ใน HCI Lab จำนวน 10 ชิ้น เกิดปัญหาในส่วนการรันแอพพลิเคชั่นบนมือถือ จึงลองหาแนวทางอื่นๆ ในการทำแอพพลิเคชั่นตรวจเช็ค จากการหาข้อมูลก็ได้พบว่าทาง Google มีการพัฒนาเครื่องมือที่ช่วยในการเขียนแอพพลิเคชั่นบนมือถือ ชื่อว่า Thunkable การเขียน code จะใช้ block ทำให้เข้าใจและดู code ที่เขียนได้ง่าย ประกอบกับสามารถสร้างใช้กับมือถือในระบบ iOS และ Android ได้ จึงสะดวกต่อการสร้างแอพพลิเคชั่นได้ง่าย เหมาะกับมือใหม่ที่ไม่ค่อยถนัดเขียน code ให้เข้าใจได้

ทางทีมเห็นว่า การใช้เครื่องมือนี้สร้างแอพพลิเคชั่นน่าจะเป็นอีกช่องทางที่จะสามารถใช้งานได้จริง สะดวก และลดเวลาการทำงานมากกว่าการนำเอกสารเดินตรวจเช็คแบบเดิมๆ

จากการศึกษาการสร้างแอพพลิเคชั่นของ Thunkable เขียนในระบบของ Android จะง่ายกว่าด้วยฟังก์ชั่นที่ครบกว่าระบบ iOS และ code ของ iOS ค่อนข้างจะใหม่มีการรวมคำสั่งหลายๆอย่างไว้ด้วยกัน ทำให้ผู้ที่เคยเขียนใน App Inventorสับสนได้ ทางทีมจึงเลือกใช้ระบบ Android

วัตถุประสงค์

1.เพื่อศึกษาการสร้างแอพพลิเคชั่นจาก Thukable

2.เพื่อศึกษาการประยุกต์ใช้ cloudstitch และ Thukable ในการเช็คเครื่องใช้สำนักงาน

สมมุติฐาน

ใช้ QR Code เช็คเครื่องใช้สำนักงานจะช่วยลดภาระการเช็คเครื่องใช้สำนักงานได้

ขอบเขตการศึกษา

1. ด้าน Software

Thunkable
Cloudstith
Google Sheet และ Google Drive
QR Code Generator

2. ด้าน Hardware

2.1 เครื่องใช้สำนักงาน จำนวน 20 ชิ้น

1. Common room จำนวน 10 ชิ้น

โต๊ะกลม จำนวน 1 ตัว
โต๊ะกระจก จำนวน 1 ตัว
โซฟา จำนวน 2 ตัว
ตู้สีส้ม จำนวน 2 ตัว
โทรศัพท์ จำนวน 1 ตัว
โทรทัศน์ LG จำนวน 1 ตัว
เก้าอี้ จำนวน 2 ตัว

2. ห้องเรียน 512 จำนวน 10 ชิ้น

โต๊ะขาว จำนวน 7 ตัว
Dobot Magician Multifunction Robotic Arm จำนวน 2 เครื่อง
ลำโพงบลูธูท จำนวน 1 เครื่อง

3. HCI LAB จำนวน 10 ชิ้น

MBot Grid II+ Desktop 3D Printer จำนวน 1 เครื่อง
Ultimaker 2 Extended+ จำนวน 1 เครื่อง
Ultimaker 3 จำนวน 1 เครื่อง
Formlabs Form 2 จำนวน 1 เครื่อง
Mebo 2.0 Interactive Robot จำนวน 1 ตัว
ลำโพงบลูธูท จำนวน 1 เครื่อง
Touchjet WAVE จำนวน 1 เครื่อง
Epson LCD Projector : EB-1760W จำนวน 1 เครื่อง
Epson Projector : EB-535W จำนวน 1 เครื่อง
LG TV LCD 32" : 32LK311 จำนวน 1 เครื่อง

2.2 คอมพิวเตอร์ จำนวน 1 ตัว

2.3 มือถือ ระบบ Android จำนวน 1 ตัว

ประโยชน์ที่คาดว่าจะได้รับ

1.การเช็คเครื่องใช้สำนักงานสะดวกมากขึ้น

2.ช่วยลดเวลาในการทำข้อมูลเครื่องใช้สำนักงานต่างๆ

ผลงานวิจัยและทฤษฎีที่เกี่ยวข้อง

จาการศึกษาเว็บ ai2thunk.wordpress.com ได้ข้อมูลในการจัดทำแอพพลิเคชั่นค่อนข้างมากและหลากหลาย จะยกตัวอย่างและข้อมูลบางอย่างที่ใช้ทำแอพพลิเคชั่น

1. Thunkable

Thunkable พื้นฐานมาจาก App Inventor เป็นส่วนหนึ่งของงานวิจัย Google ต่อมาได้พัฒนาร่วมกับสถาบัน MIT (Massachusetts Institute of Technology) ความสำคัญของ App Inventor หรือ Thunkable คือ การผลักดันข้อจำกัดของการเรียนรู้เกี่ยวกับมือถือสำหรับนักเรียนและนักศึกษาทั่วโลก
Thunkable มีหลักการทำงานเหมือนกับ MIT App Inventor โดยใช้หลักการเขียนโปรแกรมแบบ Visual Programming Language ซึ่งเป็นแนวทางการเขียนโปรแกรมมิ่งทุกอย่าง ซึ่งเหมาะสำหรับมือใหม่ที่สนใจทางด้านการเขียนโปรแกรมอย่างยิ่ง
Thunkable มีการพัฒนาอย่างต่อเนื่องซึ่งพัฒนามาจากการ MIT App Inventor Version 2 มีเครื่องมือต่างๆ ให้ใช้ได้อย่างครบครันมากขึ้น เหมาะสำหรับนักพัฒนาแอพพลิเคชั่นบนโทรศัพท์มือถือแอนดรอยด์อย่างยิ่ง

2. รู้จักกับ Thunkable

แอพที่สร้างจาก Thunkable จะมีหน้าตาเหมือนกับแอพรุ่นใหม่ๆ ที่ใช้ Material Design
GoogleMap เป็นคอมโพเนนต์ที่ใช้แสดงแผนที่ Google Maps บนแอพ พร้อมกับมีฟีเจอร์ที่น่าสนใจหลายอย่าง เช่น แสดงพิกัดตำแหน่งปัจจุบันบนแผนที่ มีปุ่มควบคุมต่างๆ เหมือนใน Google Maps สามารถจะเลื่อน หมุน และซูมได้โดยใช้นิ้ว และสามารถปักหมุดตามพิกัดที่กำหนดได้ เป็นต้น
Emotion Recognizer เป็นคอมโพเนนต์ที่สามารถวิเคราะห์ภาพคน โดยอาศัยบริการบนเว็บไมโครซอฟท์ แล้วส่งผลกลับมาว่า คนในภาพ น่าจะอยู่ในอารมณ์ไหน พร้อมกับค่า Score หรือ คะแนน ยิ่งค่า Score สูง ก็แสดงว่า มีความน่าจะเป็นสูง
Image Recognizer เป็นคอมโพเนนต์ที่สามารถวิเคราะห์ภาพที่เราส่งขึ้นเว็บไมโครซอฟท์ ว่าเป็นภาพอะไร ในภาพนั้น มีองค์ประกอบอะไรบ้าง พร้อมกับคะแนน confidence
สามารถอัพโหลดฟอนต์ ttf หรือ otf เพื่อใช้กับ User Interface ต่างๆ เช่น Label, Textbox เป็นต้น
User Interface ต่างๆ มีหน้าตาที่ดูทันสมัยกว่าใน App Inventor เช่น Checkbox, DatePicker ที่แสดงเป็นปฎิทิน,TimePicker แสดงผลเป็นนาฬิกา เป็นต้น

3. สร้างแอพเช็คชื่อด้วย Cloudstitch

คุณณรงค์พร เหล่าศรีสิน ทำวิดีโอสอนสร้างแอพพลิเคชั่นเพื่อใช้เช็คนักเรียน นักศึกษา โดยใช้คอมโพเนนต์ Spreadsheet มาเชื่อมต่อกับเว็บ Cloudstitch และ Google Sheet เพื่ออ่านข้อมูลรายชื่อนักเรียน และบันทึกข้อมูลการมาเรียนไว้ใน Google Sheet ในการเก็บค่านักเรียนที่เข้าเรียนจะสแกน QR Code ประจำตัวของนักเรียน นักศึกษา

คอมโพเนนต์ที่กล่าวถึง

Spreadsheet ใช้เชื่อมต่อกับเว็บ Cloudstitch เพื่ออ่านและบันทึกข้อมูลใน Google Sheet
Barcode Scanner ในบทนี้ ใช้สแกน QR Code ที่เป็นชื่อของนักเรียนแต่ละคน
Clock ในบทนี้ ใช้เพื่ออ่านค่าวันที่ และเวลาปัจจุบัน
Web ในบทนี้ ใช้เพียงบล็อก Uri Encode เพื่อเข้ารหัสข้อความภาษาไทย และข้อความอื่นๆ เพื่อให้สามารถอัพโหลดขึ้นไปเก็บบนเว็บได้ โดยไม่เกิด error

Properties ที่สำคัญ

Properties สำคัญของคอมโพเนนต์ Spreadsheet มีดังนี้

API Endpoint เป็น URL สำหรับติดต่อกับเว็บ Cloudstitch
Sheet Name เป็นชื่อชีตสำหรับอ่าน และบันทึกข้อมูล

ภาพรวมของระบบ

รายละเอียดโดยรวมของระบบ

1. การนำเสนอผลการออกแบบ

1. สร้าง cloudstitch สำหรับลิงค์ข้อมูลกับ Google Sheet

sign up สร้าง Account เพื่อ log in ระบบเว็บเสียก่อน
กด New Project เพื่อเริ่มสร้าง Project ไว้ซิงค์ข้อมูลใน Google Sheet
สร้าง Project ตั้งชื่อ (ทีมจะตั้งไว้ว่า Test)
กด Open Project จะได้หน้าต่างที่ 4 ขึ้นมา สำหรับ Edit in Google จะลิงค์ไปยัง Google Sheet เพื่อใส่ข้อมูล, Sync with your template สำหรับอัพเดทข้อมูลใน Sheet เมื่อมีการแก้ไข
API endpoint คือ ลิงค์ที่จะต้องนำไปใส่ใน thunkable จะใช้เพียงแค่ https://api.cloudstitch.com/bumbim/test ( /datasources/sheet ไม่ใช้)

2. Google Sheet สำหรับเก็บข้อมูล

Sheet ที่ได้มาจะมี 2 Sheet คือ Sheet1 และ Sheet2
Sheet2 สำหรับเก็บข้อมูลดังหน้าต่าง 1
Sheet1 สำหรับเก็บข้อมูลเมื่อสแกน QR code ดังหน้าต่าง 2 (Time:เก็บเวลาที่สแกน Room:ห้องที่เข้าไปสแกน OE1-OE10: ลำดับของอุปกรณ์จะลิงค์กับ Sheet2
หาสร้าง Google Sheet มาจาก cloudstitch อย่าลืมบันทึก Google Sheet ไว้ใน Google Drive ด้วย

3. Thunkable เว็บเขียนแอพพลิเคชั่น

หน้าต่างแรกคือ design ไว้ออกแบบหน้าแอพพลิเคชั่นตามที่เราต้องการ ซึ่งทีมสร้างหน้าตาแบบนี้

หน้าต่างสองคือ Blocks เอาไว้เขียน code

สำหรับ Code ที่ใช้เขียนแอพพลิเคชั่นครั้งนี้

2. การนำเสนอผลการลงมือทำ/ทดลอง

เอกสารอ้างอิง

https://ai2thunk.wordpress.com/2017/09/30/vdo-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-27-%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B9%80%E0%B8%8A%E0%B9%87%E0%B8%84%E0%B8%8A%E0%B8%B7%E0%B9%88/
https://ai2thunk.wordpress.com/2017/09/30/vdo-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-21-%E0%B8%A1%E0%B8%B2%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A-thunkable/
https://www.slideshare.net/TomKhunakorn/thunkable
https://ai2thunk.wordpress.com/2017/11/30/preview-compare-code-between-platform/
https://ai2thunk.wordpress.com/2017/11/29/preview-thunkable-new-component2/