VDO บทที่ 27 – สร้างแอพเช็คชื่อด้วย Cloudstitch

คุณสมบัติของแอพ

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

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

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

สำหรับคอมโพเนนต์ Spreadsheet มีหลักการทำงาน ดังนี้

• เราสามารถใส่ข้อมูลใหม่ แก้ไข หรือลบข้อมูลได้โดยตรงที่ Google Sheet หรือคุณอาจใช้แอพ ส่งข้อมูลใหม่ขึ้นไปเก็บใน Google Sheet ผ่านบริการของ Cloudstitch
• แต่ในการอ่านข้อมูลจาก Google Sheet นั้น เราจะต้อง Sync ข้อมูลใน Google Sheet กับ Cloudstitch เสียก่อน แอพจึงสามารถอ่านข้อมูลที่อัพเดตกลับมาได้
• หากไม่ Sync ก็จะไม่ได้ข้อมูลที่อัพเดต ซึ่งสำหรับคนที่ใช้บริการแบบ Free package Cloudstitch จะไม่ Sync ให้โดยอัตโนมัติ คุณจะต้องกดปุ่ม Sync ที่เว็บ Cloudstitch เอง

Properties ที่สำคัญ

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

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

บล็อกที่สำคัญ

• set Sheet Name ใช้กำหนดชื่อชีตที่จะอ่านและบันทึกข้อมูล
• Get All Data ใช้อ่านข้อมูลทั้งหมดจาก Google Sheet มาไว้ในแอพ
• After Get All Data เป็นอีเวนต์ที่เกิดขึ้นหลังจากที่สั่ง Get All Data โดยข้อมูลที่อ่านมาได้จะอยู่ในตัวแปร responseContent
• Get Column List ใช้ดึงข้อมูลทั้งหมดจากคอลัมน์ที่กำหนด ซึ่งในบทนี้ ใช้ดึงรายชื่อของนักเรียนทั้งหมดในห้อง
• Upload Data ใช้สำหรับอัพโหลดข้อมูลไปเก็บใน Google Sheet
• After Upload เป็นอีเวนต์ที่เกิดขึ้นหลังจากที่สั่งให้อัพโหลดข้อมูล หากการอัพโหลดเรียบร้อย ค่าในตัวแปร responseContent จะมีค่าเป็น OK
• Uri Encode ใช้เข้ารหัสข้อความภาษาไทย และข้อความอื่นๆ เพื่อให้สามารถอัพโหลดขึ้นไปเก็บบนเว็บได้ โดยไม่เกิด error
• while do เป็นบล็อกสำหรับสั่งให้แอพทำงานซ้ำๆ จนกว่าเงื่อนไขที่ทดสอบจะเป็น false ซึ่งในทีนี้ เราใช้ลบเครื่องหมาย - ออกจากรายชื่อนักเรียน
• copy list ใช้สำหรับก็อปปี้ข้อมูลใน list หนึ่งมาไว้ในอีกตัวแปรหนึ่ง
• for each number เป็นบล็อกสำหรับสั่งให้แอพทำงานซ้ำตามจำนวนรอบที่กำหนด

นอกจากนี้ ยังมีบล็อกอื่นๆ ที่มากับคอมโพเนนต์ Spreadsheet แม้ไม่ได้ใช้ในแอพนี้ แต่ได้กล่าวถึงใน VDO ได้แก่

• Get Row List ใช้อ่านข้อมูลจากแถวที่กำหนด
• Get Value ใช้อ่านข้อมูลจากเซลล์ โดยระบุคอลัมน์ และหมายเลขแถว

ความรู้อื่นๆ

• รายละเอียดของบริการในเว็บ Cloudstitch และค่าบริการ
• ขั้นตอนการสมัครใช้บริการที่เว็บ Cloudstitch และการเซตอัพ project เพื่อใช้กับแอพ
• การเตรียมข้อมูล รายชื่อนักเรียน และตารางบันทึกการมาเรียนใน Google Sheet
• ข้อผิดพลาดที่ต้องระวังในการเตรียมข้อมูลสำหรับ Cloudstitch
• แนะนำเว็บในการสร้าง QR Code

---

เนื่องจากมีความผิดพลาดในการส่วนของ code ดังนี้ให้แก้ไขส่วนของ code ในอีเวนต์ Barcode_Scanner After Scan ตรงบล็อก replace list item ให้แก้ไขตามภาพข้างล่างนี้