VDO บทที่ 28 – สร้างแอพ Flash Card ด้วย Extension และ Text-to-Speech

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

ในบทนี้ สอนสร้างแอพสำหรับช่วยในการท่องจำคำศัพท์ เรียกว่า Flash card โดยแอพนี้จะแสดงภาพ พร้อมคำศัพท์ภาษาไทย เพื่อให้ผู้เรียนสะกดคำศัพท์ภาษาอังกฤษ และยังมีปุ่ม เฉลย สำหรับแสดงคำศัพท์ภาษาอังกฤษ และสามารถอ่านออกเสียงคำศัพท์ภาษาอังกฤษได้ โดยใช้คอมโพเนนต์ Text-to-Speech

เราสามารถจะเพิ่มคำศัพท์ได้มากตามต้องการ โดยการจัดเตรียมไฟล์ข้อมูลคำศัพท์ไว้เป็นไฟล์ csv แล้วนำมาบีบอัดรวมกับไฟล์ภาพทั้งหมด กลายเป็นไฟล์ zip เพียงไฟล์เดียว จากนั้นอัพโหลดไปไว้ใน Dropbox พร้อมกับสร้างลิงก์เพื่อให้แอพสามารถดาวน์โหลดข้อมูลได้

ในตอนที่รันแอพนี้ครั้งแรก จะมีการดาวน์โหลดไฟล์ zip ที่เราเตรียมไว้ใน Dropbox มาไว้ที่เครื่อง ในโฟลเดอร์ /MyFlashCard/ จากนั้น ก็ใช้ TaifunZip extension มาทำหน้าที่แตกไฟล์ zip และบันทึกไฟล์ภาพกับไฟล์ข้อมูลคำศัพท์ไว้ในโฟลเดอร์ย่อย /MyFlashCard/01/

การดาวน์โหลดและ unzip ไฟล์ข้อมูลนี้ จะทำเพียงครั้งเดียว ในตอนที่เริ่มรันแอพเป็นครั้งแรก เมื่อรันแอพครั้งต่อไป ก็จะข้ามขั้นตอนนี้ไป แล้วเริ่มแสดงบัตรคำศัพท์ใบแรกเลย

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

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

ผมได้แนะนำเว็บ puravidaapps.com ซึ่งเป็นแหล่งข้อมูลที่มีประโยชน์มากๆ สำหรับคนที่ใช้ App Inventor และ Thunkable โดยมีทั้งบทเรียน, ตัวอย่าง code และ มี Extension มากมายให้เราสามารถนำไปใช้ได้ฟรี

คลิ้กที่นี่ เพื่อไปยังเว็บไซต์ puravidaapps.com

สำหรับ Extension ที่เราเลือกมาใช้งานในบทนี้ คือ TaifunZip extension เพื่อใช้ zip หรือ unzip ไฟล์ (แต่ไม่สามารถใช้กับไฟล์ rar ได้) เหตุที่ต้องใช้ Extension นี้ ก็เพราะในแอพ Flash card จะต้องมีภาพจำนวนมาก หากเราต้องมาอัพโหลดภาพเข้าโปรเจ็กต์ทีละภาพ นอกจากจะไม่สะดวกแล้ว ยังอาจเสี่ยงที่ขนาดแอพจะใหญ่เกิน 10MB ซึ่งจะทำให้ไม่สามารถ build app ได้

ในการใช้งาน Extension นั้น ก่อนอื่นเราจะต้องดาวน์โหลดมาจากเว็บมาไว้ที่เครื่องคอมพิวเตอร์ของเราก่อน จากนั้นให้ไปที่ Extension ตรงช่อง Palette แล้วคลิ้ก Import Extension เพื่อนำเข้ามาไว้ในโปรเจ็กต์ หากมีโปรเจ็กต์อื่นที่ต้องใช้ Extension ก็ต้องนำเข้าในโปรเจ็กต์นั้นๆ ต่างหาก ไม่เกี่ยวกัน
นอกจาก Extension แล้ว ยังต้องใช้คอมโพเนนต์อื่นๆ ที่สำคัญ ได้แก่

• Text-to-Speech สำหรับการอ่านออกเสียงคำศัพท์ภาษาอังกฤษ
• Web สำหรับการดาวน์โหลดไฟล์ zip ที่เราเตรียมไว้ จากเว็บ Dropbox
• File สำหรับอ่านไฟล์ข้อมูลคำศัพท์
• TinyDB ในบทนี้ เราใช้เก็บ path ของไฟล์ข้อมูลคำศัพท์ และไฟล์ภาพทัังหมด ที่ได้จากการ unzip

Properties ที่สำคัญ

Property สำคัญของ TaifunZip extension มีดังนี้

• SuppressWarnings หากคลิ้กถูกหน้าช่อง property นี้ จะระงับการแจ้งเตือนต่างๆ ที่เกิดจาก extension นี้

Properties สำคัญของ Text-to-Speech มีดังนี้

• Country และ Language คือรหัสประเทศ และรหัสภาษาที่เราต้องการให้อ่านข้อความ
• Pitch ใช้กำหนดโทนเสียงพูด โดยกำหนดเป็นตัวเลขตั้งแต่ 0-2 โดยปกติจะกำหนดไว้ที่ 1
• Speech Rate คืออัตราเร็วในการพูด กำหนดเป็นตัวเลขตั้งแต่ 0-2 โดยปกติจะกำหนดไว้ที่ 1 เช่นกัน แต่หากเราต้องการให้พูดช้าลง ก็ปรับอัตราเร็วให้เหลือ 0.5 ได้

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

แม้ว่าในบทนี้ เราจะใช้คอมโพเนนต์ Web เพื่อดาวน์โหลดไฟล์ zip จากเว็บ Dropbox เหมือนกับในบทที่ 19 อย่างไรก็ตาม มีจุดที่ต่างออกไป คือ

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

• set Save Response ให้เป็น true เพื่อกำหนดให้บันทึกไฟล์ที่ดาวน์โหลดมา
• set Response File Name ใช้กำหนดชื่อไฟล์ และโฟลเดอร์ที่จะบันทึกไฟล์
• set Url ใช้กำหนด URL ของเว็บที่จะติดต่อด้วย ซึ่งในที่นี้ เราก็จะกำหนดให้เป็นลิงก์ในเว็บ Dropbox
• Got File เป็นอีเวนต์ที่เกิดขึ้นเมื่อได้บันทึกไฟล์ที่ดาวน์โหลดมาไว้เรียบร้อยแล้ว ในอีเวนต์มีตัวแปร fileName ที่เก็บข้อมูลเกี่ยวกับ โฟลเดอร์ และไฟล์ที่บันทึกได้

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

สำหรับ TaifunZip extension ก็มีบล็อกที่สำคัญ ได้แก่

• Unzip เป็นคำสั่งสำหรับ unzip ไฟล์ โดยเราจะต้องระบุตำแหน่งโฟลเดอร์ และชื่อไฟล์ zip ให้ถูกต้อง และในกรณีที่ใช้ password ป้องกันการ unzip ก็ต้องระบุ password ให้ถูกต้องด้วย
• AfterUnzip เป็นอีเวนต์ที่เกิดขึ้นหลังจากที่ unzip ไฟล์เรียบร้อยแล้ว ในอีเวนต์นี้มีตัวแปร fileList ซึ่งจะเก็บชื่อไฟล์ทั้งหมดที่ unzip เรียบร้อยแล้ว ในรูปของ List

ส่วนคอมโพเนนต์ Text-to-Speech ก็มีบล็อกที่สำคัญ คือ

• Speak เป็นคำสั่งให้อ่านออกเสียงข้อความที่กำหนดไว้ในช่อง message ตามภาษาที่กำหนดไว้ด้วย properties Country และ Language

เนื่องจากเครื่องของผู้ใช้อาจมีการติดตั้งโมดูลภาษาไว้แตกต่างกัน จึงจำเป็นต้องมีการตรวจสอบ ตั้งค่าภาษา รวมทั้งอาจต้องมีการดาวน์โหลดโมดูลเสียง มาติดตั้งเพิ่มเติม ซึ่งสามารถดูรายละเอียดได้ในหัวข้อ "อ่านออกเสียงด้วย Text-to-Speech" ของ eBook เล่ม 2
นอกจากนี้ ยังมีการใช้บล็อกในกลุ่ม Text เพื่อแยกชื่อ path ออกมาจากชื่อไฟล์

• Segment สำหรับใช้แยกข้อความ โดยระบุตำแหน่งตัวอักษรที่จะเริ่มแยกในช่อง start และระบุความยาวของข้อความในช่อง length
• Start At ใช้ค้นหาข้อความตามที่ระบุไว้ในช่อง piece ว่ามีอยู่ในข้อความหลักในช่อง text หรือไม่ หากมี จะให้ตำแหน่งที่พบ

ดูรายละเอียดเพิ่มเติมเกี่ยวกับบล็อกเหล่านี้ ได้ใน eBook เล่ม 1 หัวข้อ "จัดการข้อมูลด้วยบล็อกในกลุ่ม Text"

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

• เทคนิคการเขียน code เพื่อให้ดาวน์โหลด และ unzip ไฟล์เพียงครั้งแรกที่รันแอพ
• เทคนิคการเขียน code โดยใช้ List มาช่วยในการแสดงภาพ และคำศัพท์ ซึ่งทำให้โปรแกรมสั้น และรองรับจำนวนคำศัพท์ได้มากตามต้องการ
• แนวคิดในการนำไฟล์ข้อมูลที่ต้องใช้ในแอพ ไปวางไว้นอกโปรเจ็กต์ เพื่อลดขนาดแอพ