Mit app inventor ทำให ป ม มาอย ตรงกลาง

เวลาที่เราสร้างแอพ โดยทั่วไป ก็จะเน้นฟังก์ชั่นการทำงานหลักก่อน แต่พอเสร็จแล้ว จึงจะคิดถึงเรื่องการ Branding ซึ่งวิธีหนึ่งที่ทำกันในแอพ ก็คือ การทำหน้า Splash screen ซึ่งเป็นหน้าแรกที่ผู้ใช้จะเห็นตั้งแต่ตอนเปิดแอพขึ้นมา โดยทั่วไป ก็จะแสดงโลโก้ไว้ตรงกลางจอ อาจมีสโลแกนบ้าง และส่วนใหญ่จะใช้พื้นหลังเป็นสีพื้น

การทำให้หน้า Splash Screen ค้างไว้สักครู่ เช่น ประมาณ 3 วินาที ก่อนจะเข้าสูหน้าหลักนั้น ก็ทำไม่ยากเลย และก็อาจมีคนแนะนำหลายวิธี เช่น แนะนำให้ใช้ Screen1 เป็น Splash Screen พอแสดงแล้ว ก็จะไปเปิด Screen อื่นที่เป็นหน้าหลัก วิธีนี้ง่ายดี แต่ก็เปลืองสกรีนไปหนึ่ง

วิธีที่ผมจะแนะนำก็คือ ให้รวม Splash Screen กับหน้าหลักไว้เป็นสกรีนเดียวกัน โดยใช้ Vertical Arrangement 2 อันทำหน้าที่เป็นสกรีนเสมือน

ในรูป คุณจะเห็น ช่อง 4 เหลี่ยม 2 อัน นั่นคือ Vertical Arrangement ขอเรียกย่อๆว่า VA โดยผมกำหนดให้ VA อันบนเป็นหน้า Splash ขอเรียกว่า VA_Splash ก็แล้วกัน ส่วน VA อันล่างเป็นหน้าหลัก ขอเรียกว่า VA_Main นอกจากนี้ เรายังต้องใช้คอมโพเนนต์ Clock เพื่อตั้งเวลาในการแสดงหน้า Splash ด้วย

หลักการทำงาน ก็คือ ในตอนเริ่มต้นการทำงาน เราจะกำหนดให้แสดง VA_Splash และซ่อน VA_Main เอาไว้ก่อน จากนั้น ก็ตั้ง Clock ให้ทำงาน พอครบเวลา 3 วินาที ก็จะเปลี่ยนไปแสดง VA_Main และซ่อน VA_Splash แทน ดูแล้วหลักการก็ง่ายๆ แต่มันมีอะไรดีๆ ซ่อนอยู่อีกหลายอย่าง ต้องอ่านต่อครับ

เริ่มแรกขอพูดถึงหน้า Splash ก่อน ผมก็จะกำหนด Properties ไว้ดังนี้

จะเห็นว่าใน Splash Screen นั้น ผมต้องการให้มีเพียงโลโก้อย่างเดียว ดังนั้นจึงนำคอมโพเนนต์ Image มาวางใน VA_Splash เพียงอย่างเดียว จะกำหนดให้จัดตำแหน่งของคอมโพเนนต์ใน VA_Splash ให้อยู่ตรงกลางทั้งตามแนวนอน และแนวตั้ง (Align Horizontal และ Align Vertical เป็น Center ทั้งคู่)

ส่วนความกว้างและความสูงก็กำหนดให้เป็น Fill Parent เพื่อขยายให้มากที่สุด ส่วนสีพื้นหลัง ก็กำหนดตามที่ออกแบบไว้ ที่สำคัญ คือ ตรง Visible ให้มีเครื่องหมายถูกไว้ เพราะตอนเริ่มต้น เราต้องการให้แสดง VA_Splash

ต่อไปก็มาดู Properties ของ Image ที่เราใช้ใส่ logo กันบ้าง

เริ่มแรก คุณจะต้องอัพโหลดไฟล์ Logo ไปไว้ใน project ก่อน จากนั้น ในช่อง Picture ก็เลือกว่าจะใช้ไฟล์ไหนเป็น logo จุดที่สำคัญอยู่ที่การกำหนดขนาด หาก logo เป็นรูปสี่เหลี่ยมจตุรัส ให้กำหนดความกว้างไว้ที่ 25% กำลังดี ส่วนความสูงให้เป็น Automatic วิธีการกำหนดขนาดแบบนี้ จะช่วยปรับขนาด logo ตามสัดส่วนของหน้าจอ คือ 25% ของความกว้างหน้าจอ เมื่อความกว้างกำหนดไว้อย่างนี้ ความสูงของ logo ก็จะปรับเองอัตโนมัติ เพราะเราตั้งไว้เป็น Auto อย่าไปเผลอตั้งความสูงเป็น 25% เพราะเดี๋ยวภาพจะผิดสัดส่วน

ถัดมา ก็ดู properties ของ VA_Main จะสังเกตุเห็นว่า ส่วนใหญ่จะกำหนดค่าเหมือนกัน VA_Splash จะมียกเว้นก็ตรงที่ช่อง Visible ที่ไม่มีเครื่องหมายถูก นั่นเพราะเราต้องซ่อนมันเอาไว้ก่อน

สุดท้ายมาดู properties ของ Clock ที่เราต้องกำหนด ก็คือ ตั้งเวลาในช่อง Timer Interval เป็น 3000 ms หรือ 3 วินาทีนั่นเอง

มาดูในส่วนของโค้ดกันบ้าง จะเห็นว่า มีเพียงอีเวนต์ Timer เท่านั้น เพราะตามหลักการทำงานที่เราออกแบบไว้ คือ เมื่อ Clock ทำงาน ครบ 3 วินาทีที่เรากำหนดไว้ ก็จะเกิดอีเวนต์ Timer นี้ขึ้น ก็แสดงว่า หมดเวลาแสดงหน้า Splash ดังนั้น ก็จะ set VA_Splash Visible ให้เป็น false หรือเป็นการซ่อน VA_Splash นั่นเอง ต่อมาก็สั่งให้แสดง VA_Main โดยการ set VA_Main Visible ให้เป็น true สุดท้ายก็หมดหน้าที่ของ Clock จึงสั่งให้หยุดจับเวลา โดย set Timer Enabled to false

ทั้งหมดก็มีเท่านี้ แต่มันยังไม่จบ มีเรื่องที่คุณต้องรู้ไว้ คือ เวลาที่คุณทดสอบการทำงานของแอพ โดยใช้ AI2 companion หรือ Thunkable live คุณจะพบว่า แอพก็ทำงานได้ดี เริ่มจากแสดงหน้า Splash 3 วินาที จากนั้นก็แสดงหน้าหลัก แต่หากในหน้าหลักคุณสั่งให้เปิดสกรีนอื่นๆ ต่อ เช่น เปิด Screen2 ทีนี้เมื่อเปิด Screen2 แล้วกลับมาที่ Screen1 ปรากฎว่ามันกลับมาแสดงหน้า Splash ใหม่ ซึ่งเราไม่ต้องการแบบนั้น แสดงว่า เราต้องแก้โค้ดไหม? คำตอบ คือ ไม่

เพราะหากคุณ build เป็นไฟล์ apk แล้วนำไปติดตั้ง จะพบว่า ไม่มีการแสดงหน้า Splash ซ้ำอีกเลย แม้จะปิด Screen2 กลับมาที่ Screen1 มันก็ยังแสดงหน้าหลักตามที่เราต้องการ

ทั้งนี้ในตอนทดสอบแอพด้วย companion นั้น การทำงานที่มีการเปลี่ยนสกรีนนั้น จะเป็นการเริ่มทำงานใหม่หมด ส่วนการทำงานของแอพจริงที่ build เป็น apk แล้วนั้น เมื่อสั่งเปิด Screen2 จาก Screen1 แต่ Screen1 จะยังคงเปิดค้างไว้อยู่ ดังนั้น เมื่อปิด Screen2 การทำงานก็มาที่ Screen1 ที่เปิดค้างรอไว้ Screen1 จึงไม่ต้องเริ่มตั้งแต่ต้นใหม่

การเขียนโปรแกรมแบบบล็อกสาหรับการ พัฒนาแอปพลิเคชันทางการประมงและ เพาะเล้ียงสัตว์น้าด้วย MIT App Inventor

รองศาสตราจารย์ ดร.วราห์ เทพาหุดี ภาควิชาเพาะเลี้ยงสัตว์นา้ คณะประมง

มหาวิทยาลัยเกษตรศาสตร์

คานา

การเพาะเลี้ยงสัตว์น้ามีความส้าคัญอย่างมากต่อการผลิต อาหารโปรตีนเพื่อรองรับความต้องการอาหารโปรตีนของมนุษย์ท่ี เพิ่มขึ้นทุกปี ทั้งนี้การเพาะเลี้ยงสัตว์น้าให้ส้าเร็จต้องมีองค์ความรู้ ในหลายๆด้านที่เกี่ยวข้อง เช่น การเพาะผสมพันธุ์ อาหารและการ จัดการอาหาร การจัดการคุณภาพน้า การป้องกันและรักษาโรค เป็นต้น ซึ่งที่ผ่านมาองค์ความรู้เหล่านี้จะถูกถ่ายทอดโดยผ่านทาง หนังสือหรือต้าราเป็นส่วนใหญ่ แต่ในปัจจุบันมีเทคโนโลยีที่ถูก พัฒนาขึ้นมาอย่างรวดเร็วเป็นจ้านวนมาก โดยเฉพาะการใช้งาน ระบบเครือข่ายแบบไร้สาย (Internet) ท้าให้การติดต่อส่ือสารและ การรับส่งข้อมูลมีความรวดเร็วมากขึ้นผ่านทางคอมพิวเตอร์หรือ โทรศัพท์มือถือ ดังนั้นเพื่อให้องค์ความรู้ทางด้านการประมงและ เพาะเลี้ยงสัตว์น้าได้ถูกพัฒนาและน้าไปใช้อย่างถูกต้อง จึงมีความ จ้าเป็นที่จะต้องพัฒนาแอปพลิเคชันในส่วนนี้ให้เพิ่มมากขึ้นและ ตอบสนองต่อความต้องการที่เพ่ิมมากขึ้นเช่นกัน ซึ่งโปรแกรมที่ใช้ ในการพัฒนาแอปพลิเคชันมีมากมายทั้งในระบบปฏิบัติการแอน ดรอยด์ (Android) และไอโอเอส (iOS) โดยส่วนใหญ่การใช้งาน จะต้องมีความรู้ด้านการเขียนภาษาคอมพิวเตอร์ ซึ่งอาจจะเป็น การยากส้าหรับผู้เริ่มต้นใหม่ MIT App Inventor เป็นหนึ่งใน ซอฟต์แวร์ (Software) ที่ถูกพัฒนาขึ้นเพื่อให้ผู้ใช้งานสามารถใช้

งานได้ง่ายโดยไม่ต้องมีการเขียนค้าสั่ง (Code) แต่ใช้การเชื่อมต่อ ระหว่างบล็อกค้าสั่งโดยวิธีการลาก -วาง (Drag-Drop) และ สามารถท้างานได้ในหลายๆด้าน ทั้งงานด้านข้อมูล การค้านวณ การเชื่อมต่ออุปกรณ์อื่น การท้าฐานข้อมูล การท้ากราฟ การ จัดการรูปภาพ การเชื่อมต่อกับสื่อต่างๆและการควบคุมหุ่นยนต์ เป็นต้น

ทั้งนี้ MIT App Inventor สามารถท้างานได้ในทั้งสอง ระบบปฏิบัติการ แต่ผู้เขียนท้างานบนระบบปฏิบัติการแอนดรอยด์ เท่านั้น ดังนั้นตัวอย่างและรูปภาพในหนังสือเล่มนี้จะมาจาก ระบบปฏิบัติการนี้อย่างเดียว ส้าหรับผู้ใช้งานระบบปฏิบัติการไอ โ อ เอ ส ค ว ร อ ่า น ร า ย ล ะ เอ ีย ด บ า ง อ ย ่า ง เพิ ่ม เต ิม ไ ด ้ที ่ เว ็บ ไ ซ ต์ https://appinventor.mit.edu ต่อไป

รองศาสตราจารย์ ดร. วราห์ เทพาหุดี ตุลาคม 2565

สารบัญ

บทที่ 1 แนะนา้ MIT App Inventor 1 การเข้าใช้งานคร้ังแรก 2 เมนูหลักของโปรแกรม 4 9 บทที่ 2 การเริ่มต้นการใช้งาน MIT App Inventor 11 องค์ประกอบของ Designer 11 ส่วน Palette 17 ส่วน Viewer 19 ส่วน Components 19 ส่วน Properties 23 สว่ น Media 23 องค์ประกอบของ Blocks 24 ส่วน Blocks 31 ส่วน Viewer 33 บทที่ 3 ตัวอย่างการใช้งานองค์ประกอบหรือเคร่ืองมือที่ 33 สา้ คัญภายใน MIT App Inventor 35 36 Math (การค้านวณ) Clock (นาฬิกา) 37 WebViewer (การเปิดเว็บไซต์แบบอัตโนมัติ) ActivityStarter (การเปิดเว็บไซต์ภายใต้ปุ่ม

ควบคุม)

Draw (การลากเส้น) 39 Camera (การใช้กล้องถ่ายภาพ) 41 PasswordTextbox (การใช้งานรหัสผ่าน) 43 Zoom (การใช้งานย่อหรือขยายขนาดภาพ) 45 Translation (การแปลภาษา) 47 TextToSpeech (การใช้งานการแปลงข้อความ 49

เป็นเสียง) 51 Animation (การทา้ ภาพเคลื่อนไหว) 52 VideoPlayer (การเปิดวิดีโอ) บทที่ 4 ตัวอย่างการพัฒนาแอปพลิเคชันเพ่ือการประมง 54

และเพาะเล้ียงสัตว์นา้ 54 ข้อแนะน้าคุณภาพน้าเบื้องต้นส้าหรับการเลย้ี ง 57 61 สัตว์นา้ 63 การประเมินประสิทธิภาพการเลี้ยงสัตว์นา้ 66 ปริมาณการให้อาหารเม็ดส้าหรับเลี้ยงกุ้งขาว 72 การท้าแบบทดสอบด้านการประมง 72 การจ้าแนกรูปภาพด้านการประมง บทสรุป เอกสารอ้างอิง

1

บทท่ี 1 แนะนา MIT App Inventor

App Inventor เป็นเครื่องมือที่ใช้ในการสร้างแอปพลิเค ชันบนสมาร์ทโฟน (Smart Phone) และแท็บเล็ต (Tablet) ท่ี ท้างานด้วยระบบปฏิบัติการแอนดรอยด์ (Android) และไอโอเอส (iOS) โดยเริ่มจากการร่วมกันพัฒนาระหว่างบริษัท Google และ Massachusetts Institute of Technology (MIT) แ ต ่ต ่อ ม า ภายหลังได้ถูกพัฒนาโดย MIT เท่านั้น จนเป็นชื่อ MIT App Inventor และปัจจุบันพัฒ นาเป็นรุ่นที่ 2 (Version 2) หรือ เรียกว่า App Inventor 2 ซึ่งมีจุดประสงค์หลักเพื่อการศึกษา จุดเด่นของซอฟต์แวร์นี้คือสามารถน้าไปใช้ได้โดยไม่เสียค่าใช้จ่าย แ ล ะ ม ีก า ร เป ิด เ ผ ย ห ล ัก ก า ร ห ร ือ แ ห ล ่ง ที ่ม า ให ้บ ุค ค ล ภ า ย น อ ก สามารถท้าการแก้ไข ดัดแปลงและเผยแพร่ต้นฉบับ (Source Code) ได้ โดยด้าเนินการภายใต้เงื่อนไขข้อตกลงด้านกฎหมาย เช่น General Public License (GPL License) หรือ Berkeley Software Distribution License (BSD License) น อ ก จ าก นี้ ผู้พัฒนาสามารถทดสอบการใช้งานแอปพลิเคชันผ่านทางเว็บเบรา เซอร์ บนโทรศัพท์มือถือที่เชื่อมต่อกับคอมพิวเตอร์ หรือบน โทรศัพท์ที่ถูกจ้าลองไว้บนเครื่องคอมพิวเตอร์ ทั้งนี้โพรเจกต์ ท้ังหมดจะถูกเก็บไว้ในเซร์ฟเวอร์ของ App Inventor

2

การเข้าใช้งานคร้ังแรก เข้าไปท่ีเว็บไซต์ https://appinventor.mit.edu/,

http://ai2.appinventor.mit.edu/ หรือ https://appinventor.mit.edu/explore/ai2 ท้าการ ลงทะเบียนและ log in ให้เรียบร้อย

เม่ือกดท่ี Create Apps! จะปรากฏข้อความต้อนรับ

3

กด Continue หรือเลือก Do Not Show Again โปรแกรมจะแสดงหน้าจอหลักออกมา

4

เมนูหลักของโปรแกรม เมนูด้านบนประกอบด้วย Projects, Connect, Build,

Settings และ Help

Project เป็นการด้าเนินการเก่ียวกับโพรเจกต์ จะเป็นเมนูท่ีเกี่ยวกับการ เปิดไฟล์ท่ีสร้างไว้แล้ว การสร้างไฟล์ใหม่ การ น้าเข้าโพรเจกต์ไฟล์ (*.aia)มาท้าการแก้ไข การบันทึก การส่งออก โพรเจกต์ไฟล์(*.aia) เพ่ือ ส่งต่อให้ผู้ใช้งานต่อไป

5

Connect เป็นการเช่ือมต่อเพ่ือทดสอบแอปพลิเคชัน AI Companion เป็นแอปพลิเคชันที่ นา้ มาทดสอบการใช้งานแอปพลิเคชัน บนอุปกรณ์ ซ่ึงต้องไปดาวน์โหลดแอป พลิเคชัน MIT AI2 Companion จาก Play Store หรือ App Store มาเก็บ ไว้ในอุปกรณ์โทรศัพท์มือถือหรือแท็บ เล็ตก่อน

เมื่อกดเลือก AI Companion โปรแกรมจะสร้าง QR Code และมี รหัสออกมา

ให้เปิดแอปพลิเคชัน MIT AI2 Companion อ่าน QR Code หรือ กรอกรหัส

6

หลังจากน้ันโปรแกรมจะปรากฏบน โทรศัพท์ Emulator เป็นการจา้ ลองการใช้งาน แอปพลิเคชันบนเคร่ืองคอมพิวเตอร์

การใช้งาน Emulator ต้องดาวน์โหลด โปรแกรม Ai2 Starter ที่ https://appinventor.mit.edu/expl ore/ai2/setup-emulator.html มา เก็บไว้ในคอมพิวเตอร์และเปิดการใช้ งานก่อนการใช้ Emulator

7

USB เป็นการทดสอบการใช้งานแอป พลิเคชันบนโทรศัพท์มือถือโดยผ่าน สาย USB Refresh Companion Screen เปิด Companion ใหม่ Reset Connection คือการเริ่มต้น การเชื่อมต่อใหม่ Hard Reset เร่ิมต้นการเช่ือมต่อใหม่ ท้ังหมด ใช้ในกรณีท่ี Reset Connection แล้วไม่ได้ผล

Build เป็นการสร้างไฟล์เพ่ือติดตั้งบนอุปกรณ์ต่างๆ การสร้างแอปพลิเคชันเพื่อการน้าไปใช้ บันทึกหรือการส่งต่อไฟล์นามสกุล apk หรือ aab apk คือ Android application package aab คือAndroid App Bundle ท้าให้ ขนาดแอปพลิเคชันเล็กลง และ สามารถน้าไปใช้ในอุปกรณ์ท่ีแตกต่าง กันได้มากข้ึน

8

การส่งต่อไฟล์แนะนา้ ให้ส่งผ่าน Gmail เพราะอีเมล์ระบบอ่ืนอาจจะทา้ การ ป้องกันเน่ืองจากคิดว่าเป็นส่ิง แปลกปลอมหรือไวรัส

Setting เป็นการต้ังค่าโพรเจกต์ -

Help เป็นส่วนการช่วยเหลือต่าง ๆ -

9

บทท่ี 2 การเริ่มต้นการใช้งาน MIT App Inventor

การเริ่มสร้างโพรเจกต์ใหม่ เมนู Project เลือก Start new project

ตั้งชื่อโพรเจกต์ กด OK จะได้หน้าตาของโพรเจกต์ใหม่ ออกมา

10

ด้านบนจะแสดงช่ือโพรเจกต์ ลา้ ดับ Screen ที่แสดงอยู่ การเพิ่มและการลบ Screen การส่งต่อไป Gallery ส่วน Design และ Blocks จะอยู่ด้านมุมบนขวา

การจัดการ Screen สามารถเพิ่มจ้านวน Screen โดยกด ปุ่ม Add Screen จะปรากฏ Screen ใหม่ภายใต้ช่อง Screen1 ส่วนการลบ Screen สามารถท้าได้โดยการเลือก Screen ที่ ต้องการจะลบ แล้วกดปุ่ม Remove Screen ส้าหรับการเก็บไว้ใน Gallery ให้กดปุ่ม Publish to Gallery

ในส่วนนี้สามารถน้าไปประยุกต์ใช้ในกรณีที่แอปพลิเคชัน มีขนาดใหญ่และมีหลายกระบวนการ โดยจะแยกเป็นส่วนๆ ในแต่ ละ Screen

ส่วน ต่อมาเป็น องค์ป ระกอบ ที่ส้าคัญ คือส่วน ของ Designer แ ล ะ Blocks ซึ ่งใน ส ่ว น ข อ ง Designer เป ็น ก า ร ออกแบบการแสดงผลบนแอปพลิเคชัน จะประกอบด้วย

Palette คือที่รวบรวมคา้ ส่ังตา่ งๆ Viewer ส่วนแสดงหน้าตาของแอปพลิเคชัน Components คือส่วนขององค์ประกอบต่างๆท่ีถูก น้ามาใช้ในแอปพลิเคชัน Media คือส่วนของไฟล์ที่ถูกน้ามาใช้ในแอปพลิเคชัน

11

Properties คือส่วนที่สามารถปรับค่าของส่วนต่างๆที่ น้ามาใช้บนแอปพลิเคชันได้

ส่วน Blocks เป็นส่วนการเขียนค้าสั่งโดยการเชื่อมต่อ บล็อกค้าสั่งเพื่อให้แสดงผลตามที่ได้ออกแบบไว้ จะประกอบด้วย ส่วน Blocks และ Viewer

Blocks จะแสดงเครื่องมือพื้นฐานและส่วนที่ถูกใส่ไว้ใน Viewer ของ Designer

Viewer จะแสดงการเชื่อมต่อของบล็อกค้าสั่งเพื่อให้ ทา้ งานได้ตามท่ีออกแบบไว้

องค์ประกอบของ Designer ส่วน Palette

12

User Interface Button คือปุ่มควบคุมหรือกดเพื่อให้ แอปพลิเคชันแสดงผลท่ีกา้ หนดไว้ CheckBox คือกล่องตัวเลือกแบบ หลายตัวเลือกสามารถเลือกได้มากกว่า 1 ตัวเลือก DatePicker คือการสร้างปฏิทิน ก้าหนดเดือน-ปี Image คือการทา้ งานเกี่ยวกับรูปภาพ Label คือการพิมพ์ข้อความเพื่อ บรรยาย ListPicker คือปุ่มที่เมื่อคลิกจะมี รายการตัวเลือกต่างๆ ให้ผู้ใช้เลือก ListView คือมุมมองของรายการ Notifier คือการแสดงการเตือน PasswordTexBox คือการสร้างรหัส เพ่ือเข้าใช้งาน Slider คือการสร้างตัวเล่ือนซา้ ยขวา Spinner คือการสร้างรายการตัวเลือก ต่างๆ ให้ผู้ใช้เลือก Switch คือการสร้างปุ่มเล่ือนปิด-เปิด

13

TextBox คือกล่องข้อความหรือ ตัวอักษร TimePicker คือการเลือกเวลา WebViewer คือการเปิดเว็บไซต์หรือ ลิงค์ต่างๆ Layout การจัดโครงร่างของแอป พลิเคชัน Media ส่วนนี้เป็นการใช้อุปกรณ์ เก่ียวกับการท้าสื่อ Drawing and Animation การวาด และการท้าภาพเคล่ือนไหว Maps การท้างานเกี่ยวกับแผนท่ี Charts การท้างานเกี่ยวกับกราฟ Sensors การใช้อุปกรณ์ตรวจวัดต่างๆ ซ่ึงข้ึนกับว่าอุปกรณ์น้ันมีเซ็นเซอร์อะไร อยู่บ้าง Social การจัดการเกี่ยวกับอีเมล์ โทรศัพท์และ Twitter เป็นต้น Storage การจัดการเกี่ยวกับการ จัดเก็บข้อมูล Connectivity การเช่ือมต่อไปยัง

14

ข้อมูลหรืออุปกรณ์อื่น LEGO®MINDSTORMS® การใช้งาน ร่วมกับ LEGO Experimental ส่วนท่ีอยู่ในระหว่าง การพัฒนา ซ่ึงสามารถน้ามาทดลอง ใช้ได้ Extension คือส่วนเสริม ท่ีถูกดาวน์ โหลดมาใช้

รายละเอียดเพ่ิมเติมในส่วนของ Palette ส่วน Layout HorizontalArrangement การจัดวาง ตามแนวนอน HorizontalScrollArrangement การ จัดวางตามแนวนอนและสามารถเลื่อน ซ้าย-ขวาได้ TableArrangement การจดั วางเป็น ตาราง VerticalArrangement การจัดวางตาม แนวตั้ง VerticalScrollArrangement การจัด วางตามแนวต้ังและเล่ือนขึ้น-ลงได้

15

ส่วน Media Camcorder กล้องวิดีโอ Camera กล้องถ่ายรูป ImagePicker การเลือกรูปภาพ Player การเล่นส่ือ Sound การก้าหนดเสียง SoundRecorder การบันทึกเสียง SpeechRecognizer การจดจา้ เสียง TextToSpeech การแปลงข้อความ เป็นเสียง Translator การแปลภาษา VideoPlayer การเล่นไฟล์วดิ ีโอ

ส่วน Drawing and Animation Ball เป็นจุดสีที่เคลื่อนที่บน Canvas Canvas คือพ้ืนที่ที่สามารถวาดหรือ เคล่ือนที่วัตถุได้ ImageSprite คุณสมบัติเหมือน Ball เพียงแต่สามารถใส่รูปแทนท่ีรูปทรงกลม (Ball) ได้

16

ส่วน Sensors Accelerometer = เซ็นเซอร์จับ ลักษณะการเคลื่อนไหวของสมาร์ทโฟน การเอียงเคร่ือง BarcodeScanner = เซ็นเซอร์ที่ใช้ สา้ หรับการอ่านบาร์โค้ด Barometer เคร่ืองวัดความดัน บรรยากาศ Clock นาฬิกา GyroscopeSensor = เซ็นเซอร์ใช้ ตรวจจับลักษณะการหมุนของสมาร์ท โฟน Hygrometer = เซ็นเซอร์ที่ใช้ในการวัด ปริมาณของไอน้าที่อยู่ในอากาศ LightSensor = เซ็นเซอร์วัดสภาพแสง เพื่อปรับการแสดงผลหน้าจอ LocationSensor = เซ็นเซอร์ตรวจ พิกัดตา้ แหน่ง MagneticFieldSensor = เซ็นเซอร์ ตรวจจับคล่นื แม่เหล็กไฟฟ้า (เข็มทิศ ดิจิตอล)

17

NearField = เซ็นเซอร์ท่ีใช้ในการ สื่อสารระยะสั้นระหว่างอุปกรณ์ท่ี รองรับท่ีอนุญาตการสื่อสารไร้สาย ระหว่างอุปกรณ์สองเครื่องท่ีใช้ สนามแม่เหล็กไฟฟ้า OrientationSensor = เซ็นเซอร์ปรับ มุมมองหน้าจอ (คล้ายตัววัดระดับนา้ ) Pedometer =เซ็นเซอร์ใช้สา้ หรับการ นับจ้านวนก้าวเดิน Proximity Sensor = เซ็นเซอร์ ตรวจจับระยะห่างระหว่างผู้ใช้กับเครื่อง สมาร์ทโฟน Thermometer = เซ็นเซอร์ตรวจวดั อุณหภูมิ ส่วน Viewer การเริ่มต้นการท้างานควรออกแบบหน้าของแอปพลิเคชัน บนกระดาษก่อน ว่าต้องการแบบใด จากนั้นจึงเริ่มน้าเอา องค์ป ระกอบ ต่างๆ จาก Palette มาวางใน Screen แต่มี อ ง ค ์ป ร ะ ก อ บ จ า ก Sensors, Social, Storage แ ล ะ Connectivity จะไม่แสดงในหน้า Screen แต่จะแสดงด้านล่าง เป็น Non-visible components

18

กรณีเลือก Display hidden component in Viewer คือการอนุญาตให้มีการแสดงองค์ประกอบท่ีซ่อนอยู่

นอกจากน้ันสามารถปรับขนาดแอปพลิเคชันให้เหมาะสม กับหน้าจอโทรศัพท์มือถือหรือแท็บเล็ตได้

19

ส่วน Components จะแสดงองค์ประกอบทั้งหมดภายในแอปพลิเคชัน ซึ่งใน แต่ละองค์ประกอบสามารถท้าการเปลี่ยนชื่อ (Rename) หรือลบ (Delete) ออกได้

ส่วน Properties ตัวอย่าง Properties ของ Screen

20

AboutScreen คือการอธิบาย Screen AccentColor การเน้นสี AppName ช่ือของแอปพลิเคชัน BackgroundImage ภาพเบอื้ งหลัง ChooseScreenAnimation วิธีการ แสดงหน้าจอ Icon รูปท่ีจะใช้เป็นสัญลักษณ์ของ แอปพลิเคชัน ScreenOrientation การกา้ หนดทิศ ทางการแสดงหน้าของแอปพลิเคชัน เป็นแนวตั้ง แนวนอน ผู้ใช้กา้ หนด หรือตามเซ็นเซอร์ Scrollable สามารถเลื่อนลงหรือข้ึน ได้ Title ช่ือของหน้าจอนี้ VersionCode, VersionName การ กา้ หนดรุ่นการพัฒนาของแอปพลิเค ชัน Visible ปรากฎหรือไม่

21

ตัวอย่าง Properties ของ TextBox

22

Properties BackgroundColor สีของพ้ืนหลัง Enabled สามารถทา้ งานได้ FontBold ตัวอักษรแบบหนา FontItalic ตัวอักษรแบบเอียง FonSize ขนาดตัวอักษร FontTypeface แบบตัวอักษร Height ความสูง

Automation แบบอัตโนมัติ Fill parent จัดเต็มหน้าจอ Pixels ขนาดตามจุดภาพที่ ก้าหนด Percent ขนาดตาม เปอร์เซ็นต์ที่ก้าหนด Width ความกว้าง มีตัวเลือก เช่นเดียวกับ Height Hint ข้อแนะนา้ ถ้าไม่ใช้สามารถลบ

23

ออกได้ MutiLine สามารถเขียนได้หลาย บรรทัด NumberOnly ใส่ได้เฉพาะตัวเลข เท่าน้ัน ReadOnly อ่านได้เท่านั้น แก้ไขไม่ได้ Text ตัวอักษรหรือตัวเลข TextAlignment การจัดตา้ แหน่ง ตัวอักษรหรือตัวเลข TextColor สีของตัวอักษร Visible การปรากฏในแอปพลิเคชัน ส่วน Media การดาวน์โหลดไฟล์มาใช้ในแอปพลิเคชัน

องค์ประกอบของ Blocks ด้านซ้ายจะแสดง Blocks ซึ่งมีมาให้แล้วเป็น Built-in ซึ่ง

จะประกอบด้วย Control Logic Math Text Lists Dictionaries Colors Variables และ Procedures ส่วนด้านล่างลงไปจะเป็น

24

องค์ประกอบที่ใส่ไปใน Screen ในส่วนของ Viewer จะเป็นส่วนท่ี วางการเชื่อมต่อบล็อก มุมบนด้านขวาจะมีกระเป๋า (Backpack) และด้านมุมขวาล่างจะแสดงการย่อ ขยายและการลบบล็อค

ส่วน Blocks Control คือการทา้ งานที่ใช้เงื่อนไข

25

Logic คือการดา้ เนินการเกี่ยวกับตรรกศาสตร์

Math คือการด้าเนินการเก่ียวกับการคา้ นวณ

26

Text คือการจัดการเก่ียวกับตัวอักษร

List คือรายการข้อมูลที่มีการเรียงล้าดับใน ลักษณะใดลักษณะหนึ่ง

27

Dictionaries การทา้ พจนานุกรม

Colors การจัดการเร่ืองสี

28

Variables คือการกา้ หนดหรือสร้างตัวแปร

Procedures คือการก้าหนดขั้นตอนการทา้ งาน

29

ตัวอย่างคุณสมบัติของเครื่องมือบางอย่างที่ถูกใส่ไว้ใน Designer

ส่วนน้ีจะมาปรากฏในส่วนของ Blocks ด้วย เช่น การใส่ TextBox1, Image1 และ Button1 ไว้

TextBoX1 คือการจัดการกล่องข้อความ

30

Image1 คือการจัดการเกี่ยวกับรูปภาพ

Button1 คือการจัดการเก่ียวกับปุ่มควบคุม

31

ส่วน Viewer จะเป็นส่วนท่ีวางการเช่ือมต่อบล็อก มี Backpack การ จัดการมุมมองและถังขยะ

การใช้งาน Backpack สามารถบันทึกบล็อกค้าสั่งเพื่อไปใช้งานในโพรเจกต์หรือ หน้าจออื่นๆได้ โดยการเลื่อนบล็อกค้าสั่งไปวางใน Backpack หรือคลิกขวาท่ีบล็อกที่ต้องการเก็บและเลือก Add to Backpack

เมื่อต้องการน้าบล็อกที่เก็บมาใช้ก็คลิกที่ Backpack และ เลื่อนบล็อกค้าสั่งนั้นออกมา และถ้าไม่ต้องการใช้สามารถลบออก ได้ โดยการ Empty the Backpack

32

การย่อ ขยายและลบบล็อก สามารถกดปุ๋มให้แสดงบล็อกทั้งหมดอยู่ตรงกลาง การ ขยายและการย่อมุมมอง การลบคือการลากบล็อกท่ีต้องการลบมา ใส่ในถังขยะ

การกลับมาในมุมมองปกติ การขยายมุมมอง การลดขนาดมุมมอง ถังขยะ

33

บทท่ี 3 ตัวอย่างการใช้งานองค์ประกอบ หรือเครื่องมือที่สาคัญภายใน MIT App Inventor

Math (การคานวณ) ส่วนนี้จะแสดงวิธีการสร้างต้นแบบการคา้ นวณ หน้า Designer

34

หน้า Blocks

ผลลัพธ์ท่ีได้

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

35

Clock (นาฬิกา) เป็นการแสดงวัน เดือน ปีและเวลา หรือสามารถท้าเป็น

นาฬิกาจับเวลาได้ หน้า Designer

หน้า Blocks

36

ผลลัพธ์ท่ีได้

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

WebViewer (การเปิดเว็บไซต์แบบอัตโนมัติ) เป็นการเปิดเว็บไซต์ ตัวอย่างเช่นการเปิดเว็บไซต์ของ

มหาวิทยาลัยเกษตรศาสตร์ โดยในส่วน Properties ส่วนของ HomeUrl พิมพ์ https://www.ku.ac.th/th

37

หน้า Blocks ในส่วนน้ีไม่ต้องใช้บล็อกค้าส่ังใดๆ

ผลลัพธ์ท่ีได้

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

ActivityStarter (การเปิดเว็บไซต์ภายใต้ปุ่มควบคุม) ส่วนนี้จะช่วยให้ก ารเข้าถึงเว็บไซต์ที่ก้าหน ด ไว้ได้อย่าง

รวดเร็ว วิธีการนี้จะแตกต่างจาก WebViewer คือวิธีการนี้ จะต้องมีการกดปุ่มก่อนจึงจะท้าการเปิดเว็บไซต์ได้ ส่วนส้าคัญ คือ Properties ของ ActvityStarter ส่วน Action ต้องใส่ android.intent.action.VIEW

38

หน้า Designer

หน้า Blocks ท่ี ActivityStarter.DataUri ใส่ช่ือเว็บไซต์ท่ีต้องการเปิด

39

ผลลัพธ์ที่ได้

ส่วนน้ีก็สามารถเข้าถึงเว็บไซต์ท่ีมีประโยชน์ต่าง ๆได้

Draw (การลากเส้น) หน้า Designer

40

หน้า Blocks

ผลลัพธ์ที่ได้

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

41

Camera (การใช้กล้องถ่ายภาพ) ส ่ว น นี ้เป ็น ก า ร เรีย ก ค ุณ ส ม บ ัต ิข อ งก ล ้อ งใน ต ัว

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

หน้า Designer

42

หน้า Blocks ผลลัพธ์ที่ได้

ส่วนนี้จะมีประโยชน์ในการถ่ายภาพหรือดึงภาพที่เคย บันทึกไว้ใน Gallery มาเขียนบันทึกบางอย่างหรือพัฒนาไปสู่การ วัดความยาวและประเมินนา้ หนักสัตว์น้าได้

43

PasswordTextbox (การใช้งานรหัสผ่าน) ส่วนน้ีจะเป็นการสร้างรหสั ผ่านเพ่ือเข้าไปใช้แอปพลิเคชัน

หรือคุณสมบัติบางอย่าง หน้า Designer

44

หน้า Blocks Screen1

Screen2

ผลลัพธ์ที่ได้

ส่วนนส้ี ามารถน้าไปประยุกต์ใช้กับระบบความปลอดภัย ของการใช้งานโดยเจ้าของสามารถกา้ หนดรหัสผ่านได้ด้วยตนเอง เพื่อป้องกันผู้อ่ืนเข้าใช้งาน