Posts

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 เป็นเอกสารความรู้ที่เน้นการใช้ภาพ และกราฟิกในการสื่อสารเป็นหลัก ไม่เน้นข้อความเกินจำเป็น ทำให้มีความสวยงาม ดูแล้วเข้าใจได้ง่าย สามารถเรียนรู้ได้ภายในเวลาทีรวดเร็วมาก จึงเหมาะกับการเรียนของน