Posts

Showing posts from September, 2017

VDO บทที่ 24 - สร้างแอพวิเคราะห์อารมณ์ ความรู้สึก (Emotion Recognizer Application)

Image
คุณสมบัติของแอพ ในบทนี้ จะสอนสร้างแอพวิเคราะห์อารมณ์ ความรู้สึก ด้วยคอมโพเนนต์ Emotion Recognizer โดยเราจะต้องอัพโหลดภาพจากกล้อง หรือจากในเครื่อง ส่งไปยังเว็บไซต์บริการของไมโครซอฟท์ เพื่อวิเคราะห์ จากนั้นทางเว็บก็จะส่งผลลัพธ์กลับมา เป็นค่าอารมณ์ทั้ง 8 และค่าคะแนน (0-1) ดังนี้ Fear (กลัว) Anger (โกรธ) Digust (ขยะแขยง รังเกียจ) Happiness (มีความสุข) Sadness (เศร้า) Contempt (ดูถูก ดูหมิ่น ขายหน้า) Surprise (ประหลาดใจ) Neutral (กลางๆ เฉยๆ ไม่ได้มีอารมณ์อะไร) จากนั้น จึงนำผลลัพธ์มาจัดแยกเป็น list แล้วแสดงผลเป็นกราฟแท่งที่สร้างจาก slider คอมโพเนนต์ที่กล่าวถึง Vertical Scroll Arrangement ในบทนี้ ใช้แสดงภาพถ่าย และกราฟผลวิเคราะห์ ดังนั้น เราจึงต้องให้ส่วนนี้ สามารถ scroll ขึ้นลงได้ เผื่อในกรณีที่ข้อมูลยาวเกินหน้าจอ Emotion Recognizer เป็นคอมโพเนนต์ที่ทำหน้าที่เชื่อมต่อแอพของเรา กับเว็บบริการของไมโครซอฟท์ เพื่อวิเคราะห์อารมณ์ ความรู้สึกของคนในภาพ Image ใช้สำหรับแสดงภาพที่ถ่าย หรือภาพที่เลือกจากเครื่องด้วย ImagePicker Camera ใช้สำหรับถ่ายภาพ ImagePicker ใช้

VDO บทที่ 25 – สร้างแอพวิเคราะห์รูปภาพ (Image Recognizer Application)

Image
คุณสมบัติของแอพ ในบทนี้ สอนสร้างแอพวิเคราะห์ภาพ ด้วยคอมโพเนนต์ Image Recognizer โดยเราจะต้องอัพโหลดภาพจากกล้อง หรือจากในเครื่อง ส่งไปยังเว็บไซต์บริการของไมโครซอฟท์ เพื่อวิเคราะห์ จากนั้นทางเว็บก็จะส่งผลลัพธ์กลับมา เป็นคำอธิบายภาพ พร้อมกับระดับความมั่นใจ หรือ confidence ยิ่งมีค่ามาก ก็แสดงว่า มั่นใจในผลการวิเคราะห์ได้มาก นอกจากนี้ ยังให้ list ของ tag ต่างๆ ที่น่าจะเกี่ยวข้องกับภาพมาให้ด้วย คอมโพเนนต์ที่กล่าวถึง Image Recognizer เป็นคอมโพเนนต์ที่ทำหน้าที่เชื่อมต่อแอพของเรา กับเว็บบริการของไมโครซอฟท์ เพื่อวิเคราะห์ภาพ บล็อกที่สำคัญ Post Image ใช้สำหรับส่งภาพไปยังเว็บไซต์ไมโครซอฟท์ เพื่อวิเคราะห์ Get Response เป็นอีเวนต์ที่เกิดขึ้นเมื่อได้ผลลัพธ์จากวิเคราะห์กลับมา โดยในอีเวนต์ จะให้ค่าตัวแปร 5 ค่า คือ responseCode คือ สถานะของรีเควสที่ส่งไป หากรหัสที่ตอบกลับมา คือ 200 แสดงว่า OK หรือ ได้ผลวิเคราะห์กลับมาแล้ว responseContent คือ ข้อมูลการวิเคราะห์ภาพที่ทางไมโครซอฟท์ ส่งกลับมาให้ ซึ่งอยู่ในรูปแบบ JSON tags คือ list ของ tag ต่างๆ ที่น่าจะเกี่ยวข้องกับภาพ ซึ่งดึงออ

VDO บทที่ 26 - อัพโหลดภาพไปเก็บที่เว็บ Cloudinary

Image
คุณสมบัติของแอพ ในบทนี้ จะสอนวิธีใช้คอมโพเนนต์ CloudinaryDB ในการอัพโหลดภาพขึ้นไปเก็บไว้บนเว็บ Cloudinary และดาวน์โหลดภาพจากเว็บกลับมาใช้ได้ คอมโพเนนต์ที่กล่าวถึง CloudinaryDB เป็นคอมโพเนนต์ที่เชื่อมต่อแอพของเรากับเว็บ Cloudinary เพื่อให้สามารถอัพโหลดภาพขึ้นเว็บได้ Properties ที่สำคัญ สำหรับคอมโพเนนต์ CloudinaryDB มี properties สำคัญ ดังนี้ cloud name subscription key subscription secret ในตอนเริ่มต้น ทั้ง 3 ค่าจะเป็น default เพื่อให้เราสามารถเริ่มใช้คอมโพเนนต์นี้ได้ง่าย โดยใช้โควต้าของ Thunkable ไปก่อน แต่หากคุณเปิดแอ็กเคานต์กับทาง Cloudinary ไว้แล้ว ก็สามารถนำค่าทั้ง 3 จากแอ็กเคานต์ของคุณมาใส่ได้เลย บล็อกที่สำคัญ Post Image ใช้สำหรับส่งภาพไปเก็บไว้ที่เว็บไซต์ Cloudinary Get Response เป็นอีเวนต์ที่เกิดขึ้นหลังจากที่สั่ง Post Image แล้ว โดยในอีเวนต์ จะให้ค่าตัวแปร 2 ค่า คือ responseContent คือ สถานะของรีเควส ในกรณีที่อัพโหลดเรียบร้อย ก็จะได้ข้อความ successful กลับมา แต่หากมี error เกิดขึ้น ก็จะให้คำอธิบาย error กลับมา imageUrl คือ URL ของไฟล์ภาพท

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

Image
คุณสมบัติของแอพ ในบทนี้ สอนสร้างแอพสำหรับเช็คชื่อนักเรียน นักศึกษา โดยใช้คอมโพเนนต์ 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 มีหลักการทำงาน ด

VDO บทที่ 29 – สร้างแอพ "วุ้นแปลภาษา"

Image
คุณสมบัติของแอพ ในบทนี้ สอนสร้างแอพที่สามารถฟังข้อความที่เราพูดเป็นภาษาไทย จากนั้นแปลเป็นภาษาอื่นๆ เช่น อังกฤษ ญี่ปุ่น หรือเกาหลี แล้วพูดข้อความที่แปลนั้นออกมา คอมโพเนนต์ที่กล่าวถึง แอพนี้ใช้ความสามารถของคอมโพเนนต์ 3 อย่างในกลุ่ม Media รวมกัน คือ Speech Recognizer ใช้จับความที่เราพูด จะได้ผลลัพธ์เป็นข้อความ (Text) Yandex Translate ใช้ติดต่อกับเว็บ Yandex.com เพื่อขอใช้บริการแปลภาษา เมื่อแปลเสร็จแล้ว ทางเว็บไซต์ก็จะส่งผลลัพธ์กลับมา ดังนั้นแอพนี้จึงต่ออินเตอร์เน็ต เพื่อใช้บริการนี้ Text-to-Speech ใช้อ่านออกเสียงข้อความเป็นภาษาต่างๆ ตามที่เรากำหนดรหัสประเทศ และรหัสภาษาไว้ Properties ที่สำคัญ Text-to-Speech มี properties สำคัญที่ต้องกำหนด คือ Country และ Language คือรหัสประเทศ และรหัสภาษาที่เราต้องการให้อ่านข้อความ ประเทศ รหัสประเทศ รหัสภาษา ไทย THA th อเมริกา USA en ญี่ปุ่น JPN ja เกาหลี KOR ko Pitch ใช้กำหนดโทนเสียงพูด โดยกำหนดเป็นตัวเลขตั้งแต่ 0-2 โดยปกติจะกำหนดไว้ที่ 1 Speech Rate คืออัตราเร็วในการพูด กำหนดเป็นตัวเลขตั้งแต่ 0-2 โดยปกติจะกำหนดไว้ที

อบรม "การสร้างแอพแผนที่ด้วยคอมโพเนนต์ Google Map" ครั้งที่ 2

Image
เปิดรับสมัครแล้ว! คอร์สออนไลน์ "การสร้างแอพแผนที่ด้วยคอมโพเนนต์ Google Map" ครั้งที่ 2 (สอนสด) เริ่ม 9 - 12 ตุลาคม นี้ เวลาที่เรียน 20:00-21:30 วันละ 1.5 ชั่วโมง ค่าอบรม 1,800 บาท โอนเงินเข้าบัญชีธนาคารไทยพาณิชย์ บัญชีเลขที่ 407-060173-3 ชื่อบัญชี ณรงค์พร เหล่าศรีสิน แล้วส่งหลักฐานการโอนเงินมาที่  m.me/narongporn.lao เหมาะสำหรับ คนที่กำลังต้องการสร้างแอพที่มีแผนที่ Google maps มาเกี่ยวข้อง เช่น มีข้อมูลสถานที่ต่างๆ อยู่มากมาย ไม่ว่าจะเป็นร้านอาหาร สถานที่ท่องเที่ยว  อยากจะปักหมุดบนแผนที่ให้ user รู้ว่าสถานที่ใดอยู่ตรงไหน อยากให้เวลาที่ผู้ใช้คลิ้กหมุดแล้วเปิดหน้ารายละเอียดของสถานที่ขึ้นมา มีเส้นทางท่องเที่ยว เส้นทางวิ่ง เส้นทางเดินป่า ที่อยากจะแสดงบนแผนที่ เพื่อเป็นไกด์ให้นักท่องเที่ยว มียานหานะที่อยากจะเห็นความเคลื่อนไหวว่าไปยังจุดไหนแล้ว เช่น รถฉุกเฉินของโรงพยาบาล รถบรรทุก เป็นต้น หัวข้อที่อบรม Thunkable มีคอมโพเนนต์ Google Maps ที่สามารถทำอะไรแบบนี้ได้ง่ายๆ แต่หากคุณยังไม่รู้ว่าต้องทำอย่างไร ก็ลงคอร์สนี้เลยซิ ในคอร์สนี้ ผมจะสอนตั้งแต่ การเตรีย

Visual Guide - micro:bit

Image
UPDATE 23 กันยายน 2560 - เนื้อหาบทที่ 1 และ 2 ของ Visiual Guide เรื่อง micro:bit สามารถดาวน์โหลดไฟล์ PDF ได้ที่ http://ge.tt/49qGjhm2 ผมจะทยอยทำออกมาเรื่อยๆ สามารถมาไปใช้เรียน ใช้สอนกันได้เลย คงต้องขอแรงพวกเรา ช่วยแชร์ให้ถึงมือนักเรียน ครู และผปค  ด้วยนะครับ แล้วอย่าลืม ให้เด็กๆ ส่งผลงานมาให้ดูกันบ้างนะครับ การสนับสนุนโครงการนี้ เนื่องจากโครงการนี้ทำเพื่อเผยแพร่ความรู้ให้กับเยาวชนไทย โดยนักเรียน ผู้ปกครอง ครู อาจารย์ไม่ต้องเสียค่าใช้จ่ายใดๆ ทั้งสิ้น อย่างไรก็ตาม ในการจัดทำ Visual Guide นี้มีค่าใช้จ่ายในการจัดทำ จึงขอความสนับสนุนค่าใช้จ่ายในการจัดทำ โดยสามารถร่วมสนับสนุนผ่าน บัญชีธนาคารไทยพาณิชย์ บัญชีเลขที่ 407-060173-3 ชื่อบัญชี ณรงค์พร เหล่าศรีสิน ขอขอบคุณทุกท่านที่สนับสนุนครับ เรายังเปิดรับการสนับสนุนอยู่เรื่อยๆ ครับ micro:bit Visual Guide คืออะไร? Visual Guide เป็นเอกสารความรู้ที่เน้นการใช้ภาพ และกราฟิกในการสื่อสารเป็นหลัก ไม่เน้นข้อความเกินจำเป็น ทำให้มีความสวยงาม ดูแล้วเข้าใจได้ง่าย สามารถเรียนรู้ได้ภายในเวลาทีรวดเร็วมาก จึงเหมาะกับการเรียนของน

ซูชิการ์ด - Scratch

Image
*** ฝากช่วยกันแชร์ให้ถึงครู นักเรียน และใครที่อยากเริ่มเขียนโปรแกรม *** ซูชิการ์ด เป็นเอกสารความรู้ของทาง CoderDojo ซึ่งมีแนวคิดที่จะให้ความรู้ในปริมาณพอดีๆ เหมือนซูชิที่ปั้นเป็นชิ้นพอดีคำ โดยซูชิการ์ดต้นฉบับนั้น จะเป็นภาษาอังกฤษ และมีหลากหลายเรื่อง เช่น HTML CSS, Javascript, Python, Scratch, Raspberry Pi ทางทีมงาน CoderDojo Thailand  ก็คิดจะจัดทำเอกสาร ซูชิการ์ดเป็นภาษาไทย แต่ก็ยังไม่มีใครลงมือทำออกมา ผมในฐานะเคยเป็นบรรณาธิการนิตยสาร Eworld ก็เลยใช้ความชำนาญในสายงาน และชักชวนลูกชาย (Chitrapon Laosrisin) ให้มาช่วยกันแปล เรียบเรียง ซูชิการ์ดเป็นภาษาไทย สำหรับซูชิการ์ดที่เรา 2 คนเริ่มจัดทำ คือ ชุด Scratch for Beginner หรือมีชื่อที่เราตั้งเป็นไทยไว้ว่า " Scratch สำหรับผู้เริ่มต้น " โดยเริ่มดำเนินการแปลเมื่อวันที่ 20 สิงหาคม 2560 จากนั้นก็เรียบเรียงใหม่ จับภาพหน้าจอใหญ่ จัดเลย์เอาต์จนสำเร็จเมื่อวันที่ 26 สิงหาคม 2560 ที่ผ่านมา และนำออกเผยแพร่ผ่านทาง Facebook ( https://www.facebook.com/narongporn.lao/posts/1713132825648911 ) พอเห็นว่ามี Feedback ดี เพราะงานนี้เป็นประโ

Tutorial: กดปุ่ม Back ที่เครื่อง 2 ครั้งเพื่อปิดแอพ

Image
มีหลายคนที่ติดการใช้ปุ่ม Back บนโทรศัพท์ (หรือแท็บเล็ต) เพื่อย้อนกลับ และออกจากแอพ แม้ว่าบางที ก็ไม่ได้ตั้งใจจะออกจากแอพ แต่ก็เผลอไปกดปุ่ม Back เข้า แอพก็ปิดเลย ใน Thunkable Community มี โพสต์เรื่องนี้ ไว้ ผมเห็นว่าน่าจะมีประโยชน์ เลยถือโอกาสดัดแปลงโค้ด แล้วนำมาเล่าให้ฟังถึงหลักการทำงานเป็นภาษาไทย จะได้เข้าใจกันง่ายๆ ครับ เริ่มแรก เราต้องใช้คอมโพเนนต์ 2 อย่าง คือ Clock สำหรับจับเวลา Notifier สำหรับแสดงข้อความแจ้งเตือน ส่วนของ Code จะเป็นดังนี้ ในตอนเริ่มต้น อีเวนต์ Screen Initialize จะทำงาน แล้วจะสั่งให้ Clock ยังไม่ต้องจับเวลา แต่ก็ตั้งเวลาเอาไว้ 5 วินาที นอกจากนี้ ยังมีการสร้างตัวแปร Global ไว้หนึ่งตัว เพื่อบันทึกสถานะว่ามีการกด Back หรือยัง ดังนั้น จึงตั้งค่าเริ่มต้นให้เป็น False คือ ยังไม่มีการกด Back เลย ทีนี้ เมื่อผู้ใช้กดปุ่ม Back บนเครื่อง ก็จะเกิดอีเวนต์ BackPressed ขึ้นมา ที่นี้เราก็จะสั่งให้ Clock เริ่มจับเวลา ที่เราต้องมีการจับเวลา ก็เพื่อให้แน่ใจว่า หากผู้ใช้กด Back ติดกัน 2 ครั้งภายในเวลา 5 วินาที นั่นหมายถึง ผู้ใช้ต้องการปิดแอพจริงๆ พอ Clock เร

VDO บทที่ 12 - สร้างแอพวาดเขียนรูป

Image
คุณสมบัติของแอพ ในบทนี้ จะสอนสร้างแอพวาดรูปด้วยการใช้นิ้วแทนพู่กัน โดยใช้คอมโพเนนต์ Canvas และในส่วนของ User Interface ก็จะมีปุ่มต่างๆ สำหรับ กำหนดสีของพู่กัน โดยเมื่อคลิ้กปุ่มนี้ แอพก็จะแสดงแถบซึ่งมี slider อีก 3 อันในการผสมสี RGB หรือ แดง เขียว น้ำเงิน เพื่อให้ได้สีที่ตามต้องการ ปรับขนาดเส้นของพู่กัน โดยตัวเลขที่อยู่ข้างๆ ปุ่มนั้น คือขนาดของพู่กัน หน่วยเป็นพิกเซล เมื่อคลิ้กปุ่มนี้ ขนาดของพู่กัน ก็จะใหญ่ขึ้น แต่เมื่อถึงขนาด 5 พิกเซล ก็จะกลับมาเป็นขนาด 1 พิกเซล ลบรูปที่วาด โดยจะแสดงไดอะล็อก เพื่อยืนยันว่าจะลบหรือไม่ บันทึกภาพวาดลงในเครื่อง เมื่อคลิ้กปุ่มนี้ ก็จะมีไดอะล็อกปรากฏขึ้นมา เพื่อแจ้งว่า ไฟล์ภาพที่ save ไว้อยู่ที่ไหน ชื่อไฟล์อะไร ที่สำคัญ บทนี้มีการสอนใช้งาน Procedure เพื่อลดความซ้ำซ้อนของ code และทำให้การเขียน code มีประสิทธิภาพมากขึ้น ซึ่งเป็นวิธีปฎิบัติที่ดีในการเขียน code คอมโพเนนต์ที่กล่าวถึง Canvas เป็นคอมโพเนนต์สำหรับการวาดเส้น และทำภาพเคลื่อนไหว โดยเฉพาะ แต่ในบทนี้ เราจะเน้นไปที่การวาดเส้นก่อน Slider ในบทนี้ ใช้ Slider มากำหนดค่าสี RGB เพื่อผสมสีใ

VDO บทที่ 22 – สร้างแอพแผนที่ด้วย Google Maps

Image
(VDO นี้ไม่อัพเดตแล้ว กรุณาอ่านจาก eBook) คุณสมบัติของแอพ ในบทนี้ สอนใช้คอมโพเนนต์ GoogleMap และบล็อกคำสั่งที่มากับคอมโพเนนต์นี้เพื่อทำงานต่างๆ เช่น แสดงพิกัดตำแหน่งปัจจุบัน เลื่อนแผนที่ไปมา ซูมย่อ-ขยาย ปักหมุด หรือ marker บนแผนที่พร้อมใส่ชื่อและรายละเอียดของสถานที่ ลาก marker ไปยังตำแหน่งใหม่ ลบ marker สร้างวงกลมบนแผนที่ ลบวงกลม เป็นต้น คอมโพเนนต์ที่กล่าวถึง GoogleMap เป็นคอมโพเนนต์ที่ใช้แสดงแผนที่ Google Maps บนแอพ พร้อมกับมีฟีเจอร์ที่น่าสนใจหลายอย่าง เช่น แสดงพิกัดตำแหน่งปัจจุบันบนแผนที่ มีปุ่มควบคุมต่างๆ เหมือนใน Google Maps สามารถจะเลื่อน หมุน และซูมได้โดยใช้นิ้ว และสามารถปักหมุดตามพิกัดที่กำหนดได้ เป็นต้น บล็อกที่สำคัญ Enable MapClickListener หากกำหนดให้เป็น true เมื่อคลิ้กแผนที่ ก็จะเกิดอีเวนต์ OnMap Click ขึ้น Enable MapLongClickListener หากกำหนดให้เป็น true เมื่อคลิ้กค้างที่แผนที่ ก็จะเกิดอีเวนต์ OnMap LongClick ขึ้น Enable MyLocation หากกำหนดให้เป็น true จะทำให้ Google maps สามารถแสดงพิกัดปัจจุบันของเครื่องได้ Enable ZoomControl

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

Image
คุณสมบัติของแอพ ในบทนี้ สอนสร้างแอพสำหรับช่วยในการท่องจำคำศัพท์ เรียกว่า Flash card โดยแอพนี้จะแสดงภาพ พร้อมคำศัพท์ภาษาไทย เพื่อให้ผู้เรียนสะกดคำศัพท์ภาษาอังกฤษ และยังมีปุ่ม เฉลย สำหรับแสดงคำศัพท์ภาษาอังกฤษ และสามารถอ่านออกเสียงคำศัพท์ภาษาอังกฤษได้ โดยใช้คอมโพเนนต์ Text-to-Speech เราสามารถจะเพิ่มคำศัพท์ได้มากตามต้องการ โดยการจัดเตรียมไฟล์ข้อมูลคำศัพท์ไว้เป็นไฟล์ csv แล้วนำมาบีบอัดรวมกับไฟล์ภาพทั้งหมด กลายเป็นไฟล์ zip เพียงไฟล์เดียว จากนั้นอัพโหลดไปไว้ใน Dropbox พร้อมกับสร้างลิงก์เพื่อให้แอพสามารถดาวน์โหลดข้อมูลได้ ในตอนที่รันแอพนี้ครั้งแรก จะมีการดาวน์โหลดไฟล์ zip ที่เราเตรียมไว้ใน Dropbox มาไว้ที่เครื่อง ในโฟลเดอร์ /MyFlashCard/ จากนั้น ก็ใช้ TaifunZip extension มาทำหน้าที่แตกไฟล์ zip และบันทึกไฟล์ภาพกับไฟล์ข้อมูลคำศัพท์ไว้ในโฟลเดอร์ย่อย /MyFlashCard/01/ การดาวน์โหลดและ unzip ไฟล์ข้อมูลนี้ จะทำเพียงครั้งเดียว ในตอนที่เริ่มรันแอพเป็นครั้งแรก เมื่อรันแอพครั้งต่อไป ก็จะข้ามขั้นตอนนี้ไป แล้วเริ่มแสดงบัตรคำศัพท์ใบแรกเลย คอมโพเนนต์ที่กล่าวถึง ในบทนี้ คุณจะได้เรียนรู้ เกี่

VDO บทที่ 18 – สร้างแอพแบบทดสอบ

Image
คุณสมบัติของแอพ ในบทนี้ สอนสร้างแอพแบบทดสอบ โดยนักเรียนต้องป้อนชื่อในตอนเริ่มต้น จากนั้นแอพก็จะแสดงโจทย์ พร้อม 5 ตัวเลือก (multiple choice) เมื่อนักเรียนเลือกคำตอบ แอพก็จะแสดงคำตอบที่ถูกด้วยสีเขียว และหากนักเรียนเลือกผิด ตัวเลือกนั้นก็จะเป็นสีแดง ที่ด้านบนของแอพ จะแสดงคะแนนที่ได้จากการตอบคำถามถูก หมายเลขข้อของโจทย์ที่กำลังทำ และมีปุ่ม Next เพื่อไปยังโจทย์ข้อต่อไป แอพนี้มีหลักการทำงาน ดังนี้ เราจะต้องเตรียมโจทย์ พร้อมตัวเลือก และเฉลย เป็นไฟล์ csv (comma separated value) ตามรูปแบบที่กำหนด จากนั้น อัพโหลดขึ้นไปไว้ใน project แอพจะใช้คอมโพเนนต์ File เพื่ออ่านแบบทดสอบจากไฟล์ csv นั้น แล้วแปลงเป็น list แบบ 2 มิติ จากนั้นก็แสดงไดอะล็อก ShowTextDialog เพื่อให้นักเรียนกรอกชื่อ นามสกุล เมื่อกรอกชื่อเรียบร้อยแล้ว ก็จะแสดงโจทย์ และตัวเลือกทั้ง 5 ข้อ พร้อมกับกำหนดสีของปุ่มตัวเลือกให้เป็นสีเทา จากนั้นรอให้นักเรียนเลือกคำตอบ เมื่อมีการคลิ้กปุ่มตัวเลือกใด ก็จะตรวจว่านักเรียนเลือกคำตอบถูกหรือไม่ โดยเทียบกับเฉลย หากตอบ ถูก ก็จะบวกคะแนนเพิ่มอีก 1 และกำหนดสีปุ่มที่เลือกเป็นสีเขียว หากต

บทที่ 23 – สร้างแอพติดตามรถประจำทาง

Image
VDO นี้ไม่อัพเดตแล้ว กรุณาอ่านจาก eBook คุณสมบัติของแอพ ในบทนี้ สอนสร้างแอพติดตามตำแหน่งของรถประจำทาง ว่าขณะนี้อยู่ที่ไหน ซึ่งเป็นการประยุกต์ใช้คอมโพเนนต์ GoogleMap และ FirebaseDB แอพชุดนี้ จะประกอบด้วยแอพ 2 ฝั่ง คือ ฝั่งของคนขับรถประจำทาง จะใช้ชื่อแอพ BusDriver คนขับรถประจำทาง จะใช้แอพนี้ ขณะขับรถ และเปิด GPS ด้วย หน้าที่ของแอพนี้ ก็คือ อัพเดตพิกัดตำแหน่งปัจจุบันของรถประจำทาง ผ่านทาง FirebaseDB ทุกครั้งที่มีการเปลี่ยนแปลงตำแหน่ง ทางฝั่งคนที่ยืนรอรถประจำทาง ก็จะใช้แอพอีกอันหนึ่ง ชื่อ WhereTheBus แอพนี้ ก็จะอาศัยข้อมูลพิกัดที่อัพเดตมาทาง FirebaseDB มาปักหมุดบนแผนที่ เพื่อแสดงตำแหน่งของรถประจำทางที่กำลังเคลื่อนที่ รวมทั้งแสดงตำแหน่งของตนเองบนแผนที่ เพื่อให้เห็นว่า รถประจำทางอยู่ห่างแค่ไหน คอมโพเนนต์ที่กล่าวถึง GoogleMap FirebaseDB Properties ที่สำคัญ เนื่องจากแอพทั้ง 2 ฝั่ง คือ BusDriver และ WhereTheBus จะต้องส่งข้อมูลพิกัดตำแหน่งของรถประจำทางถึงกัน ดังนั้น properties สำคัญใน FirebaseDB ที่ต้องกำหนดให้เหมือนกัน ก็คือ Firebase Token Project Bucket โดยกา

บทที่ 21 – มารู้จักกับ Thunkable

Image
ในบทนี้ จะแนะนำให้รู้จักกับเว็บ Thunkable และชี้ให้เห็นจุดที่แตกต่างไปจาก App Inventor เช่น แอพที่สร้างจาก 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 ที่แสด

บทที่ 20 – สร้างแอพแชทด้วย FireBase

Image
คุณสมบัติของแอพ ในบทนี้ จะสอนสร้างแอพแชท โดยใช้คอมโพเนนต์ FirebaseDB ผู้ใช้สามารถส่งข้อความหากันได้ โดยใส่ชื่อ และข้อความ เสร็จแล้วคลิ้กปุ่ม Send ข้อความก็จะถูกส่งไปที่เซิร์ฟเวอร์ของ FireBase แล้วส่งต่อไปยังผู้ใช้คนอื่นที่ใช้แอพนี้ นอกจากนี้ ยังมีปุ่ม Clear สำหรับลบข้อความที่แชทกันด้วย คอมโพเนนต์ที่กล่าวถึง FirebaseDB เป็นคอมโพเนนต์ที่เชื่อมต่อกับเว็บไซต์ FireBase ซึ่งใช้บริการเก็บข้อมูลไว้บนคลาวด์ และอ่านข้อมูลกลับมา จุดที่แตกต่างจากบริการจัดเก็บข้อมูลทั่วไป ก็คือ เมื่อข้อมูลที่จัดเก็บมีการเปลี่ยนแปลง จะมีการอัพเดตให้รู้ได้ทันที โดยจะเกิดอีเวนต์ dataChanged ขึ้น เราจึงสามารถใช้อีเวนต์นี้ เพื่ออัพเดตข้อมูลใหม่ที่เปลี่ยนแปลงได้ในทันทีที่ออนไลน์ Textbox ในบทนี้ ใช้เพื่อแสดงข้อความหลายๆ บรรทัด แต่ไม่จำเป็นต้องมีการแก้ไขข้อความใน Textbox ดังนั้น จึงต้องลบเครื่องหมายถูกหน้าช่อง Enabled ด้วย Notifier ในบทนี้ ใช้ ShowMessageDialog เพื่อแสดงข้อความ error จาก FirebaseDB Properties ที่สำคัญ สำหรับ properties สำคัญของ FirebaseDB ได้แก่ FirebaseToken เป็นรหัส token ที

บทที่ 19 – การเชื่อมต่อแอพกับคลาวด์

Image
คุณสมบัติของแอพ ในบทนี้ สอนวิธีการเชื่อมต่อแอพของเรากับคลาวด์ โดยการต่อยอดจากแอพแบบทดสอบในบทที่ 18 ให้สามารถดาวน์โหลดไฟล์แบบทดสอบจากเว็บ Dropbox ซึ่งทำให้การอัพเดตแบบทดสอบทำได้ทุกเมื่อที่ต้องการ แล้วแอพก็จะดาวน์โหลดไปเอง โดยที่เราไม่ต้องแก้ไขที่แอพอีก นอกจากนี้ เมื่อนักเรียนทำแบบทดสอบเสร็จแล้ว ชื่อและคะแนน ก็จะถูกส่งไปเก็บรวบรวมไว้ใน Google Sheet โดยส่งผ่านทาง Google Form ในการสร้างแอพนี้ จะต้องมีการเตรียมตัวเพิ่มเติม ดังนี้ เปิดแอ็กเคานต์กับทาง Dropbox นำไฟล์ exam.txt ไปใส่ในโฟลเดอร์ใน Dropbox ล็อกอินที่เว็บ Dropbox แชร์ไฟล์ exam.txt แล้วก็อปปี้ลิงก์ในการดาวน์โหลดไฟล์นี้ แก้ไขลิงก์จาก dl=0 เป็น dl=1 ไปที่ Google Drive แล้วสร้างแบบฟอร์มใหม่ นำ Get Prefilled Link มาสร้างเป็นลิงก์ในการเก็บข้อมูลคะแนน แก้ไข code ในแอพแบบทดสอบ คอมโพเนนต์ที่กล่าวถึง Web เป็นคอมโพเนนต์สำหรับติดต่อกับเว็บเพื่ออ่านข้อมูล หรือส่งข้อมูลไปเก็บ Notifier ในบทนี้ จะใช้ ShowProgressDialog และ DismissProgressDialog เพื่อแสดงไดอะล็อกให้รอการทำงาน ระหว่างที่มีการติดต่อกับเว็บ เช่น ดาวน์โหลด

บทที่ 17 – สร้างแอพ Pomodoro

Image
คุณสมบัติของแอพ ในบทนี้ จะสอนสร้างแอพ Pomodoro ซึ่งเป็นเครื่องตั้งเวลาเพื่อช่วยให้โฟกัสกับงานตามหลักการ Pomodoro โดยแอพนี้จะใช้คอมโพเนนต์ Clock ในการจับเวลาการทำงาน และการพัก พร้อมกับสาธิตการสร้างแอพที่มีหลายสกรีน รวมทั้งสอนเทคนิคในการใช้ VerticalArrangement มาสร้างให้แอพเหมือนมีหลายสกรีน ทั้งๆ ที่อยู่ใน Screen1 นอกจากนี้ ยังสอนใช้ TinyDB ซึ่งเป็นคอมโพเนนต์ในการจัดเก็บข้อมูลไว้ในแอพ มาใช้เก็บค่าเซตติ้งต่างๆ ของแอพเอาไว้ด้วย คอมโพเนนต์ที่กล่าวถึง Clock ในบทนี้ ใช้เป็น Timer เพื่อจับเวลาการทำงาน 25 นาที และการพัก 5 นาที เมื่อหมดเวลาที่ตั้งไว้ ก็จะเกิดอีเวนต์ Timer ขึ้น VerticalArrangement ในบทนี้ จะสอนเทคนิคที่ใช้ VA ทำหน้าที่เหมือนเป็นสกรีนหนึ่ง แล้วใช้บล็อก set Visible เพื่อแสดงหรือซ่อนแต่ละ VA เหมือนเป็นการเปิด-ปิดสกรีนนั่นเอง TinyDB เป็นพื้นที่เก็บข้อมูลต่างๆ ซึ่งจะอยู่ในแอพ ไม่สามารถเปิดดูข้อมูลจากแอพอื่น ในบทนี้ จะใช้ TinyDB ในการเก็บค่าเวลาต่างๆ จากสกรีน Settings Sound ในบทนี้ ใช้สั่นเครื่องเมื่อหมดเวลาแต่ละช่วงทำงาน และช่วงพัก บล็อกที่สำคัญ set Tim

บทที่ 16 - สร้างแอพนับจำนวนก้าว (Pedometer)

Image
คุณสมบัติของแอพ ในบทนี้ จะสอนใช้คอมโพเนนต์ Pedometer มาสร้างแอพนับจำนวนก้าวเดิน, ระยะทาง (เมตร), ระยะเวลาตั้งแต่เริ่มเดิน โดยมีปุ่ม Start, Stop, Pause และ Resume สำหรับควบคุมการทำงานของแอพ มีปุ่ม Settings เพื่อกำหนดระยะทางต่อก้าว ( Stride Length ) และที่พิเศษ คือ แอพนี้มีการบันทึกข้อมูลเก็บไว้ในแอพด้วย ดังนั้น แม้ปิดแอพไปแล้ว เมื่อเปิดแอพขึ้นมาใหม่ ข้อมูลเดิมที่บันทึกไว้ ก็จะปรากฎขึ้นมา หากเราต้องการเริ่มใหม่ ก็สามารถรีเซตได้ คอมโพเนนต์ที่กล่าวถึง Pedometer เป็นเซ็นเซอร์สำหรับนับจำนวนก้าวเดิน ระยะทาง และระยะเวลาที่ก้าวเดิน Clock ในบทนี้ ใช้เป็นทั้งนาฬิกาที่บอกเวลา และวันที่ปัจจุบัน และใช้เป็นนาฬิกาจับเวลา หรือ timer ด้วย ซึ่งหมายความว่า เราสามารถตั้งคาบเวลาไว้ใน property TimeInterval เมื่อเวลาผ่านไปจนครบคาบเวลาที่กำหนด ก็จะเกิดอีเวนต์ Timer ขึ้น Properties ที่สำคัญ คอมโพเนนต์ Pedometer มี properties ที่ต้องกำหนดในหน้า Designer ดังนี้ StopDetectionTimeout ใช้กำหนดระยะเวลา (หน่วยเป็น millisecond) หากผู้ใช้อยู่นิ่งเกินกว่าเวลาที่กำหนดนี้ ก็จะถือว่า หยุดเคลื่อนที

บทที่ 15 – สร้างแอพเพื่ออ่านและแก้ไขไฟล์ Text

Image
คุณสมบัติของแอพ ในบทนี้ จะสอนสร้างแอพสำหรับการอ่าน และแก้ไขข้อมูลในไฟล์ text โดยในแอพตัวอย่าง จะมีช่องใส่ชื่อไฟล์ กับช่องใส่ข้อความ และปุ่มสั่งงาน ดังนี้ ปุ่ม Clear ใช้ลบข้อความใน Textbox ปุ่ม Save ใช้บันทึกข้อความลงในไฟล์ตามชื่อไฟล์ที่กำหนดไว้ เมื่อบันทึกแล้ว ก็จะแสดง Alert เพื่อแจ้งว่า การบันทึกไฟล์สำเร็จเรียบร้อยดี ปุ่ม Open ใช้เปิดไฟล์ขึ้นมา แล้วนำข้อความมาใส่ใน Textbox ปุ่ม Append ใช้สั่งให้นำข้อความใน Textbox ไปต่อท้ายข้อความที่อยู่ในไฟล์ ปุ่ม Delete ใช้ลบไฟล์ที่กำหนด นอกจากนี้ ยังสอนวิธีในการดักจับ Error ที่อาจเกิดขึ้น แล้วแสดงไดอะล็อกแจ้งให้ผู้ใช้ทราบ คอมโพเนนต์ที่กล่าวถึง File เป็นคอมโพเนนต์สำหรับจัดการกับไฟล์ text บล็อกที่สำคัญ SaveFile ใช้สำหรับบันทึกไฟล์ โดยจะต้องระบุชื่อไฟล์ และข้อความที่จะบันทึกลงในไฟล์ AfterFileSaved เป็นอีเวนต์ที่เกิดขึ้นหลังจากบันทึกไฟล์แล้ว โดยมีตัวแปร fileName เก็บชื่อไฟล์ที่บันทึก ReadFrom ใช้อ่านข้อมูลจากไฟล์ที่กำหนด GotText เป็นอีเวนต์ที่เกิดขึ้นหลังจากที่อ่านข้อมูลจากในไฟล์แล้ว โดยข้อความที่อ่านมาได้ จะอยู่ในต

บทที่ 14 – สร้างเกม Pong

Image
คุณสมบัติของแอพ ในบทนี้ จะสาธิตการใช้ Canvas ทำภาพเคลื่อนไหว เป็นเกมส์ตีปิงปอง ซึ่งสามารถใช้นิ้วควบคุมการเล่นเกมส์บนหน้าจอได้ บนหน้าจอเริ่มต้น จะมีปุ่มวงกลม เมื่อผู้ใช้แตะปุ่มนี้ เกมก็จะเริ่ม โดยจะมีลูกบอลกลิ้งออกมา ทั้งตำแหน่งเริ่มต้นของบอล รวมทั้งมุมที่ลูกบอลวิ่ง ล้วนถูกสุ่ม หรือ Random ขึ้นมา เพื่อไม่ให้ซ้ำเดิม ผู้เล่นต้องใช้นิ้วควบคุมไม้ ไปรับลูกบอลให้ทัน รับได้ ก็จะได้คะแนน โดยคะแนนจะอยู่ตรงด้านบน และทุกครั้งที่รับบอลได้ ความเร็วของบอลก็จะเพิ่มขึ้นอีก หากรับไม่ทัน ก็จะเริ่มใหม่ รับพลาด 3 ครั้ง ก็จบเกม ที่ด้านบน มีรูปไม้ปิงปอง เพื่อบอกให้รู้ว่า พลาดได้อีกกี่ครั้ง ส่วนทางด้านล่าง จะกันพื้นที่ไว้ให้ผู้เล่นลากนิ้วไปมา เพื่อควบคุมไม้ตี ไม้ตีอยู่เหนือพื้นที่บังคับนี้ เพื่อว่าเวลาเราใช้นิ้วลากไปมาบนหน้าจอ จะได้ไม่ไปบังไม้ตี คอมโพเนนต์ที่กล่าวถึง Canvas เป็นคอมโพเนนต์สำหรับการวาดเส้น และทำภาพเคลื่อนไหว ImageSprite ในบทนี้จะใช้ในหลายจุด เช่น ใช้เป็นปุ่มเริ่มเกม, ลูกปิงปอง, ไม้ตี และส่วนควบคุมไม้ตี Properties ที่สำคัญ ในแอพนี้ จะมีการกำหนด properties ของ Screen1 เพื่อให

บทที่ 13 – รู้จักกับ Orientation sensor

Image
บทนี้มี 2 ตอน ตอนที่ 1 คุณสมบัติของแอพ สำหรับในบทนี้ จะสอนเกี่ยวกับ Orientation Sensor ซึ่งเป็นเซ็นเซอร์ที่จะคอยตรวจจับว่า เราถืออุปกรณ์อย่างไร เช่น ถือตามแนวตั้ง หรือตามแนวนอน หรือเอียงกี่องศา โดยแอพนี้ใช้ Slider 3 อัน เพื่อแสดงค่าที่เซ็นเซอร์วัดได้ออกมาเป็นกราฟแท่ง เพื่อให้ดูค่าได้ง่ายๆ และมี label แสดงค่าเป็นตัวเลขอยู่ข้างๆ ด้วย สำหรับค่ามุมที่ Orientation Sensor วัดได้ มี 3 ค่า คือ Roll เป็นค่ามุมเมื่อเราถืออุปกรณ์ให้เอียงเอาด้านซ้าย หรือด้านขวาขึ้น โดยหากวางราบกับพื้น ค่ามุมจะเป็นศูนย์ หากถือเอียงให้ด้านซ้าย หรือด้านขวาขึ้น ค่ามุมก็จะเปลี่ยน จนเมื่อถือตั้งฉาก ค่ามุมก็จะเป็น 90 หรือ -90 องศา ขึ้นกับว่าเอียงด้านไหนขึ้น Pitch เป็นค่ามุมเมื่อเราถือเครื่องให้ยกด้านบนขึ้น หรือกดด้านบนลง ตอนวางราบกับพื้น มุมนี้ก็จะเป็นศูนย์ เมื่อยกเครื่องตั้งขึ้น หรือคว่ำหัวลง ค่ามุมก็จะเป็น 90 หรือ -90 องศา Azimuth เป็นค่ามุมเหมือนเข็มทิศ คือ เมื่อหันเครื่องไปทางทิศเหนือ มุมก็จะเป็น 0 และเมื่อหมุนเครื่องตามเข็มนาฬิกา ค่ามุมนี้ก็จะเพิ่มขึ้น จนเมื่อหมุนครบรอบ ค่ามุมสูงสุดก็จะไม่เกิน 36

บทที่ 11 – สร้างแอพ GPS และแสดงพิกัดบน Google Maps

Image
คุณสมบัติของแอพ ในบทนี้ เราจะมาเรียนรู้การใช้ GPS ในเครื่อง เพื่อบอกพิกัดตำแหน่งว่าอยู่ที่ latitude และ longitude กี่องศา จากนั้นก็แสดงตำแหน่งพิกัดนั้นบนแอพ Google Maps หริอแสดงผลเป็นภาพแผนที่บนแอพ คอมโพเนนต์ที่กล่าวถึง LocationSensor คือเซ็นเซอร์ตรวจจับพิกัดตำแหน่ง หรือ GPS นั่นเอง Clock ใช้สำหรับบอกค่าวันที่ และเวลา ActivityStarter ในที่นี้ ใช้สำหรับเปิดแอพ Google Maps ขึ้นมา Image ใช้สำหรับแสดงภาพแผนที่ static map Spinner ใช้สำหรับกำหนด properties ของ LocationSensor Properties ที่สำคัญ LocationSensor มี properties สำคัญหลายอย่าง แต่ที่กำหนดในหน้า Designer คือ Enabled ทำเครื่องหมายถูกหน้าช่องนี้ เพื่อเปิดการเชื่อมต่อระหว่างแอพของเรากับ GPS ในเครื่อง แต่ไม่ได้เป็นการสั่งเปิด GPS ให้ทำงาน เพราะผู้ใช้จะต้องเป็นคนเปิดเอง บล็อกที่สำคัญ set DistanceInterval ใช้กำหนดค่าระยะทาง (เมตร) เมื่อ GPS ตรวจจับได้ว่า มีการเคลื่อนที่จากตำแหน่งเดิมเป็นระยะทาง มากกว่าค่า DistanceInterval ก็จะเกิดอีเวนต์ LocationChanged ขึ้น set TimeInterval เป็นเหมือนการตั้งเว

บทที่ 10 – สร้างแอพให้ส่งอีเมล

Image
คุณสมบัติของแอพ ในบทนี้ จะสอนเทคนิคในการใช้คอมโพเนนต์ ActivityStarter เพื่อสั่งเปิดแอพอีเมลที่อยู่ในเครื่องขึ้นมาสำหรับใช้ส่งอีเมล เนื่องจากไม่มีคอมโพเนนต์สำหรับส่งอีเมลโดยเฉพาะ และยังจะได้เรียนรู้การใช้ EmailPicker และ ContactPicker ในการช่วยป้อนอีเมล์แอดเดรสด้วย คอมโพเนนต์ที่กล่าวถึง EmailPicker เป็นช่องคล้าย Texbox แต่ต่างกันตรงที่ เมื่อเริ่มใส่ชื่อเพียงบางส่วน ก็จะมีรายชื่อคนที่ขึ้นต้นตามนั้น ขึ้นมาให้เราเลือก และเมื่อคุณเลือกชื่อคนไหน อีเมลของคนนั้น ก็จะมาอยู่ในช่อง ContactPicker คล้ายกับ PhoneNumberPicker ต่างกันตรงที่ PhoneNumberPicker จะแสดงเฉพาะคนที่มีเบอร์โทรศัพท์เท่านั้น แต่ ContactPicker จะแสดงทั้งหมด และเมื่อคลิ้กปุ่ม ContactPicker ก็จะเปิดสมุดโทรศัพท์ในเครื่องขึ้นมาให้ผู้ใช้เลือกชื่อคนที่ต้องการ ActivityStarter เป็นคอมโพเนนต์เอนกประสงค์ ที่สามารถใช้ทำอะไรได้หลายๆ อย่าง โดยเฉพาะอะไรที่เกี่ยวกับแอพข้างนอก Web เป็นคอมโพเนนต์สำหรับติดต่อกับเว็บต่างๆ ซึ่งจะต่างจาก WebViewer ซึ่งทำหน้าที่เป็นบราวเซอร์สำหรับเปิดหน้าเว็บต่างๆ บล็อกที่สำคัญ ContactPick

บทที่ 5 - เรียนรู้การใช้กล้องถ่ายรูป และจัดการไฟล์ภาพ

Image
คุณสมบัติของแอพ ในบทนี้ จะสอนสร้างแอพที่สามารถถ่ายภาพได้ด้วยกล้องบนอุปกรณ์แอนดรอยด์ เมื่อผู้ใช้ถ่ายภาพแล้ว แอพก็จะแสดงภาพนั้น และยังมีปุ่มสำหรับเลือกภาพที่มีในเครื่องเพื่อนำมาแสดงผลด้วยเช่นกัน นอกจากนี้ ยังมีปุ่มสำหรับการมุมภาพทีละ 90 องศา คอมโพเนนต์ที่กล่าวถึง Camera เป็นคอมโพเนนต์สำหรับถ่ายภาพด้วยกล้องบนอุปกรณ์แอนดรอยด์ Image เป็นคอมโพเนนต์สำหรับแสดงภาพบนหน้าจอ ImagePicker ใช้สำหรับเลือกภาพที่มีอยู่ในเครื่อง บล็อกที่สำคัญ สำหรับคอมโพเนนต์ Camera นั้น มีบล็อกสำคัญ คือ TakePicture สำหรับสั่งให้กล้องเริ่มทำงาน AfterPicture เป็นอีเวนต์ที่เกิดขึ้นเมื่อผู้ใช้กดปุ่มชัตเตอร์เพื่อถ่ายภาพ ข้อมูล image ที่มากับอีเวนต์นี้ จะเก็บชื่อไฟล์ภาพถ่าย และตำแหน่งที่เก็บไฟล์ภาพ เมื่อได้ภาพถ่ายมาแล้ว ก็จะนำภาพนั้นมาแสดงด้วยคอมโพเนนต์ Image พร้อมกับแสดงชื่อไฟล์ภาพและตำแหน่งที่เก็บไฟล์ภาพด้วยคอมโพเนนต์ Label set Picture สำหรับกำหนดภาพที่จะแสดงบนคอมโพเนนต์ Image set Text สำหรับกำหนดข้อความที่จะแสดงบนคอมโพเนนต์ Label นอกจากนี้ ยังสอนใช้คอมโพเนนต์ ImagePicker สำหรับให้ผู้

บทที่ 6 - เรียนรู้การใช้กล้องเพื่อสแกนบาร์โค้ด

Image
คุณสมบัติของแอพ สำหรับบทนี้ จะสอนการสร้างแอพสแกนบาร์โค้ด โดยเมื่อสแกนได้แล้ว ก็จะบันทึกวันที่ เวลา และข้อมูลที่สแกนได้ลงใน Textbox ทำให้ผู้ใช้สามารถสแกนบาร์โค้ดได้เรื่อยๆ และเมื่อต้องการส่งข้อมูลสู่ภายนอก ก็จะใช้การ Share คอมโพเนนต์ที่กล่าวถึง BarcodeScanner สำหรับใช้สแกนบาร์โค้ด โดยสามารถกำหนดได้ว่าจะใช้เอนจิ้นในการสแกนของ App inventor (หรือ Thunkable) เอง หรือจะใช้แอพสแกนบาร์โค้ดภายนอกที่ติดตั้งไว้ในเครื่องอยู่แล้ว Clock เพื่อให้ทราบวันที่ และเวลาที่สแกนบาร์โค้ด Sharing สำหรับแชร์ข้อมูลการสแกนบาร์โค้ดออกไปภายนอกแอพ บล็อกที่สำคัญ DoScan เป็นบล็อกคำสั่งให้เปิดกล้องเพื่อเริ่มสแกนบาร์โค้ด AfterScan เป็นอีเวนต์ที่เกิดขึ้นเมื่อสแกนบาร์โค้ดได้แล้ว ผลลัพธ์จากการสแกนจะอยู่ในตัวแปร result ที่มากับอีเวนต์นี้ Now เป็นบล็อกที่ให้ค่าวันที่ และเวลา ณ ปัจจุบัน FormatDateTime เป็นบล็อกสำหรับจัดรูปแบบการแสดงวันที่ และเวลา ตามรูปแบบ หรือ pattern ที่เรากำหนด ซึ่งใน VDO ก็จะแนะนำวิธีการกำหนด pattern ไว้ด้วย ShareMessage เป็นบล็อกสำหรับแชร์ข้อความ

บทที่ 7 – เรียนรู้การใช้กล้องบันทึก และเล่น VDO

Image
คุณสมบัติของแอพ ในบทนี้ สอนสร้างแอพสำหรับบันทึกและเล่นไฟล์ VDO แบบเต็มจอ คอมโพเนนต์ที่กล่าวถึง Camcorder สำหรับการบันทึก VDO VideoPlayer สำหรับการเล่นไฟล์ VDO บล็อกที่สำคัญ RecordVideo เป็นบล็อกสำหรับบันทึก VDO AfterRecording เป็นอีเวนต์ที่เกิดขึ้นเมื่อบันทึก VDO เรียบร้อยแล้ว ซึ่งในอีเวนต์นี้จะมีตัวแปร clip ที่เก็บชื่อไฟล์ VDO ที่ถ่ายไว้ และตำแหน่งที่เก็บไฟล์ VideoPlayer Source เป็นบล็อกสำหรับกำหนดชื่อไฟล์ VDO ที่จะเล่น โดยจะต้องระบุชัดเจนด้วยว่า ไฟล์นั้นอยู่ในโฟลเดอร์ไหน VideoPlayer Start เป็นบล็อกคำสั่งให้เริ่มเล่นไฟล์ VDO VideoPlayer FullScreen หากกำหนดให้เป็น true แอพของเราก็จะเล่นไฟล์ VDO แบบเต็มจอ VideoPlayer Completed เป็นอีเวนต์ที่เกิดขึ้นเมื่อการเล่นไฟล์ VDO จบลง ความรู้อื่นๆ ในตอนท้าย จะแนะนำให้รู้จักกับ ContentURL ซึ่งเป็นวิธีที่ระบบปฎิบัติการ Android อ้างถึงไฟล์ Content ต่างๆ ในเครื่องด้วย