MIT App Inventor ตอนที่ 3

MIT App Inventor ตอนที่ 3

การแชร์ไฟล์แอป

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

การเพิ่มรูปไอคอนให้เลือก Components เป็น Screen ที่คอลัมน์ Properties เลือก Icon ที่ปุ่ม Upload File และเลือกไฟล์จากคอมพิวเตอร์ที่ Choose File

ถ้าต้องการใส่ชื่อที่ Title ที่กรอบด้านบนจากเดิมที่ขึ้น Screen1 ให้กรอกข้อความที่ช่อง Title ว่า Text To Speech

จากนั้นสร้างไฟล์แอปซึ่งเป็นไฟล์ที่ลงท้ายด้วย .apk โดยคลิกที่เมนู Build เลือกคำสั่ง App for Google Play (save apk to my computer) จะได้ไฟล์ TextToSpeech.apk ซึ่งเป็นไฟล์แอปที่สามารถนำไปติดตั้งและใช้งานบนมือถือได้

การติดตั้งบนมือถืออาจใช้วิธี copy จากคอมพิวเตอร์ไปที่มือถือโดยตรง แต่บางครั้งโปรแกรมป้องกันไวรัสหรือมัลแวร์บนมือถืออาจเตือนและไม่ให้ติดตั้ง หากจำเป้นอาจต้องปิดโปรแกรมเหล่านี้ โดยไปที่การตั้งค่า หรือ Setup บนมือถือ เลือกระบบความปลอดภัย > Google Play Protect > สแกนอุปกรณ์เพื่อหาภัยคุกคาม ปิดแถบนี้ชั่วคราวจนติดตั้งแอปเสร็จจึงเปิดขึ้นใช้งาน

ไฟล์ apk ที่ copy ลงมือถืออาจใช้ App ประเภท File Explorer เปิดเพื่อติดตั้ง 

สำหรับการแชร์ไฟล์ apk โดยส่งทางอีเมล์บางครั้งอาจส่งไม่ผ่าน เช่น ถ้าใช้ gmail ระบบอาจแจ้งเตือนว่าไฟล์ที่แนบเป็นมัลแวร์และไม่ยินยอมให้ส่งไฟล์ ถ้าไม่ใช้การส่งด้วยอีเมล์ระบบอื่น อาจใช้วิธี upload ไฟล์ไปเก็บไว้ที่ Dropbox หรือ Google Drive เพื่อให้คนอื่นดาวน์โหลดไปใช้หรือเราดาวน์โหลดลงมาที่มือถือ โดยการติดตั้งยังคงต้องปิดระบบความปลอดภัยจึงจะติดตั้งได้  

ข้อมูลจาก http://appinventor.mit.edu/explore/

 

MIT App Inventor ตอนที่ 2

MIT App Inventor ตอนที่ 2

ทำแอปแรก Talk To Me

Talk to me เป็นการใช้คำสั่ง TextToSpeech ทำให้แอปออกเสียงตามข้อความที่พิมพ์

App Inventor ประกอบด้วย 2 ส่วน คือ Designer กับ Blocks

Designer ใช้จัดองค์ประกอบและหน้าตาของ App ส่วน Blocks ใช้กำหนดการทำงานของแต่ละองค์ประกอบ

เริ่มต้นลองทำ App ชื่อ Talk To Me ตามตัวอย่างของเว็บ MIT App Inventor โดยเลือกเมนู Start new project จะมีช่องให้กรอก Project name ใส่ชื่อ TalkToMe (เขียนติดกัน เพราะในการใช้งานจะไม่มีเว้นวรรคหรือ space อาจจะใช้ _ แทนได้) เมื่อกด OK จะได้หน้า screen เปล่าขึ้นมา

เริ่มต้นจากเลือกปุ่มที่ Button ใน Palette ของ User Interface และลากมาปล่อยที่ Viewer

ที่หน้า Designer คลิกที่ Button ตรงคอลัมน์ Components (ซึ่งทำให้คอลัมน์ Properties แสดงคุณสมบัติของ Button) จากนั้นพิมพ์ข้อความ Talk To Me ลงในช่อง Text ตรงด้านล่างของ Properties ข้อความที่พิมพ์จะไปปรากฏที่ปุ่ม Button ที่หน้าจอ Viewer

ต่อไปนำ Components ที่ 2 คือ TextToSpeech จาก Media ในคอลัมน์ Palette มาวางที่ Viewer โดย Component นี้จะไม่แสดงที่ Viewer แต่จะแสดงอยู่ในช่อง Components และ Properties

เมื่อวาง Components เรียบร้อยแล้ว ต่อไปเป็นการกำหนดการทำงานแต่ละ Components โดยคลิกที่ Blocks 

หน้า Blocks ประกอบด้วย Blocks ทางด้านซ้าย ตรงกลางเป็น Viewer สำหรับวาง Blocks และถังสำหรับใส่ Blocks ที่ต้องการลบ โดยลากลงไปปล่อยหรือใช้คีย์ Delete ก็ได้ 

เครื่องมือของ Blocks ประกอบด้วย Built-in ซึ่งเป็นคำสั่งมาตรฐาน ถัดลงมาเป็นส่วนของ Screen ซึ่งมี Components  ที่ถูกนำมาวางไว้ในหน้า Designer  ได้แก่ Button กับ TextToSpeech

เมื่อคลิกที่ Button จะปรากฏคำสั่งในการดำเนินการกับ Button ให้เลือก ในกรณีนี้ให้เลือก when Button Click do ลากมาวางที่ Viewer ซึ่งเป็นการเริ่มคำสั่งเมื่อปุ่มถูกคลิก

จากนั้นคลิกที่ TextToSpeech และเลือก Blocks call TextToSpeech Speak message มาต่อกับคำสั่ง when Button Click do เป็นการสั่งให้โปรแกรมเปลี่ยนข้อความเป็นเสียงพูดพร้อมกับขึ้นข้อความตามมา

การพิมพ์ข้อความลงไป ให้ไปที่ Blocks ของ Text ที่อยู่ใน Built-in เลือก Block เครื่องหมายคำพูดมาวางต่อท้าย 

จะได้คำสั่งในการใช้งานได้เรียบร้อย

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

____________________________________

จากตัวอย่างของ MIT AppInventor ถ้าปรับข้อมูลอีกเล็กน้อยโดยกรอกข้อความที่ต้องการออกเสียงได้ที่หน้าจอของแอป ไม่ต้องกลับไปกรอกที่ Blocks  

ไปที่หน้า designer คลิกที่ Label ในคอลัมน์ User Interface ลากมาปล่อยที่ Viewer และพิมพ์ข้อความ "กรอกข้อความในช่องว่าง" ที่ช่อง Text ตรงด้านล่างของ Properties

ลาก TextBox จากช่อง User Interface มาวางที่ Viewer และลบข้อความ Hint ออก และอาจะคลิกที่ช่อง MultiLine ถ้าต้องการกรอกข้อความหลายบรรทัด

ไปที่หน้า Blocks ลากข้อความใน Text Block สีแดงออก ลากไปปล่อยในถังด้านขวา 

ดูที่ Palette ด้านซ้าย จะเห็นว่าที่ Blocks ส่วน Screen มี Button, Label1, TextBox1 ตามที่ใส่ไว้ในหน้า Designer 

คลิกที่ TextBox1 และเลือก TextBox1.Text ที่ช่อง Viewer ต่อกับ call.TextToSpeech.Speak ตรงส่วนของ message

ที่หน้าจอมือถือจะมีช่องให้กรอกข้อความ เพื่อให้แอปอ่านออกเสียงตามข้อความได้

ข้อมูลจาก http://appinventor.mit.edu/explore/

MIT App Inventor ตอนที่ 1

MIT App Inventor ตอนที่ 1

การติดตั้งและใช้งาน

MIT App Inventor เป็นเครื่องมือทำ App สำหรับมือถือหรือแท็บเล็ตระบบ Android สามารถดูข้อมูลได้ที่หน้าเว็บ http://appinventor.mit.edu/explore/

การใช้งานปกติจะเป็นแบบ online ผู้ใช้ต้องเปิด Browser เข้าไป Log in เพื่อใช้งานที่หน้าเว็บของ MIT  หรือจะดาวน์โหลดและติดตั้งโปรแกรมมาใช้งานแบบ Offline ก็ได้ แต่ใช้แบบ Online จะสะดวกกว่า โดยไฟล์ของ App ที่ทำไว้จะเก็บอยู่ที่ Server ของ MIT

เมื่อจะเริ่มสร้างแอป ก่อนอื่นผู้ใช้ต้องสมัครใช้ Account Google หรือ gmail ที่ http://accounts.google.com/signup จากนั้นติดตั้ง App ชื่อ MIT AI2 Companion บนมือถือเพื่อดูผลจากแอปที่ทำขึ้นมา โดยดาวน์โหลดได้ที่ Google Play store https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3 หรือจะดูจากตัวจำลองมือถือในโปรแกรมชื่อ Emulator แทนก็ได้

 

icon ของ App Inventor และ Emulator 

เมื่อมี Account ของ google แล้ว เปิด Browser เข้าไปที่หน้าเว็บ MIT ที่  http://appinventor.mit.edu/explore/index-2.html# และคลิกที่ Create app ด้านบนขวา

จากนั้นกรอก Account ของ Google ที่หน้า Log in คลิกชื่อบัญชี

หน้าเว็บจะเข้าที่ MIT App Inventor เพื่อเริ่มการทำ App โดยมีหน้าตาตามรูป 

หน้า Screen ประกอบด้วย 4 คอลัมน์ เริ่มจากฝั่งซ้าย คอลัมน์ที่ 1 เป็น Palette ใช้เลือกส่วนประกอบในการใช้งาน คอลัมน์ 2 เป็น Viewer สำหรับจัดเรียงแต่ละองค์ประกอบ คอมลัมน์ 3 เป็น Components แสดงลำดับรายชื่อของส่วนประกอบของแอปที่ถูกนำมาใช้ และคอมลัมน์ 4 แสดงคุณสมบัติของส่วนประกอบหรือ Components ที่ถูกคลิกเลือก

การเชื่อมต่อกับมือถือทำได้หลายทาง ถ้าเลือก Connect เป็น AI Companion จะเชื่อมต่อกับมือถือหรือแท็บเล็ตที่ติดตั้งแอป AI Companion โดยดาวน์โหลดได้ที่ Google Play Store https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=th เมื่อติดตั้งและเปิดใช้งานแล้ว การเชื่อมต่อกับ App Inventor ใช้การสแกน QR code หรือกรอกรหัส 6 ตัว ด้านขวาของ QR code 

ถ้าการเชื่อมต่อสำเร็จ บนมือถือจะมีลักษณะคล้ายกับบน Viewer ดังรูป

ถ้าไม่เปิดจากมือถือ อาจะใช้ Emulator ซึ่งเป็นตัวจำลองมือถือ โดยต้องติดตั้งโปรแกรม Ai2 Starter ที่ https://softfamous.com/ai2-starter/  หรือ https://en.freedownloadmanager.org/Windows-PC/Ai2-Starter-FREE.html  เมื่อติดตั้งเสร็จแล้ว ต้องเปิดใช้งานโปรแกรม Ai2 Starter ตัว Emulator จึงจะใช้งานได้ 
(link สำหรับติดตั้งของ MIT_Appinventor_Tools_2.3.0 ที่หน้าเว็บ  http://appinventor.mit.edu/explore/ai2/windows.html ติดตั้งแล้วมักใช้งานไม่ได้ เนื่องจากเป็น link ของเวอร์ชั่นเก่า)

เมื่อเลือกใช้วิธีเปิดดูผลงานด้วย Emulator จะมีข้อความให้รอ 1-2 นาที และมีรูปมือถือปรากฏอยู่ด้านข้าง

ข้อมูลจาก http://appinventor.mit.edu/explore/