Posts

Showing posts with the label App Inventor

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 โดยปกติจะกำหนดไว้ที...

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 บทที่ 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 ที่แสด...

บทที่ 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 ต่างๆ ในเครื่องด้วย

บทที่ 8 – สร้างแอพบันทึกเสียง และเล่นไฟล์เสียง

Image
คุณสมบัติของแอพ ในบทนี้ สอนสร้างแอพสำหรับบันทึกเสียง และเล่นไฟล์เสียง ในการใช้งานแอพนี้ จะมีปุ่ม Record, Stop และ Play สำหรับควบคุมการทำงานของแอพ พร้อมกับใช้ label แสดงสถานะการทำงานว่ากำลังทำอะไร เช่น กำลังบันทึกเสียง กำลังเล่น เป็นต้น และเมื่อบันทึกเสียงแล้ว ก็จะแสดงชื่อไฟล์เสียง และตำแหน่งที่เก็บไฟล์บน label ด้วย ผู้ใช้สามารถเล่นไฟล์เสียงที่บันทึกได้ และเมื่อเล่นจบ แอพก็จะสั่งให้ สั่นอุปกรณ์ โมบาย ประมาณ 0.5 วินาที เพื่อเป็นการบอกให้ผู้ใช้ทราบ นอกจากนี้ ผู้ใช้ยังสามารถเลื่อน slider เพื่อปรับความดังของเสียง และคลิ้กปุ่ม Mute เพื่อปิดเสียงได้ทันที คอมโพเนนต์ที่กล่าวถึง Sound Recorder ใช้สำหรับบันทึกเสียง ไฟล์เสียงที่บันทึกได้จะเป็นไฟล์ 3gp Player ใช้สำหรับเล่นไฟล์เสียง ที่มีความยาว และใช้สั่นอุปกรณ์ (vibrate) Sound ใช้สำหรับเล่นไฟล์เสียงสั้นๆ และใช้สั่นอุปกรณ์ (vibrate) Slider เป็น User Interface มีลักษณะเป็นปุ่มเลื่อนซ้ายขวาบนราง เราใช้คอมโพเนนต์นี้เพื่อให้ผู้ใช้ปรับความดังของเสียง เนื่องจาก Slider เป็น User Interface ที่ยังไม่ได้กล่าวถึงในบทที่ 4 ดังนั้น ...

บทที่ 9 – สร้างแอพให้โทรออก และรับส่ง SMS

Image
คุณสมบัติของแอพ ในบทนี้ จะสอนสร้างแอพที่สามารถโทรออก รวมทั้งรับและส่ง SMS ได้ นอกจากนี้ ยังแนะนำให้รู้จักปุ่ม phoneNumberPicker ที่จะแสดงเบอร์โทรศัพท์ในเครื่องให้เราเลือกโทร พร้อมกับสาธิตการใช้งานร่วมกับนาฬิกา เพื่อบันทึกเวลาที่โทร และจำนวนวินาที แล้วแสดงผลออกมาทางไดอะล็อกบ๊อกซ์ คอมโพเนนต์ที่กล่าวถึง PhoneNumberPicker เป็นปุ่มที่เมื่อคลิ้ก จะแสดงเบอร์โทรศัพท์ที่มีในเครื่อง ให้ผู้ใช้เลือก PhoneCall ใช้สำหรับการโทรออก และรับสายที่โทรเข้า Texting ใช้สำหรับรับและส่งข้อความ SMS Notifier ใช้แสดงไดอะล็อกแบบต่างๆ เพื่อสื่อสารให้ผู้ใช้ทราบ โดยไดอะล็อกจะปรากฎอยู่เหนือหน้าจอหลักของแอพ และเมื่อปิด ก็จะหายไป Clock ในบทนี้จะใช้ทำหน้าที่หลายๆ อย่าง คือ ใช้บอกวันที่ และเวลาปัจจุบัน ใช้คำนวณระยะเวลา เมื่อกำหนดเวลาที่เริ่มโทร จนถึงเวลาที่วางสาย ในบทนี้จะแสดงตัวอย่างการประยุกต์ใช้ properties บางอย่างของ Texbox ได้แก่ Hint เป็นข้อความที่แสดงในช่อง Texbox ในขณะที่ยังว่างอยู่ เพื่อบอกผู้ใช้ว่า ควรจะต้องใส่อะไรลงในช่องนี้ เมื่อผู้ใช้เริ่มใส่ข้อความลงในช่อง ข้อความ Hint ก็จะหายไ...