MEE 231 Computer Programming สัปดาห์ที่ 1 MIT App Inventor เรียนรู้การใช้งานเบื้องต้น ทดสอบการเชื่อมต่อโปรแกรมกับโทรศัพท์มือถือ

งานนำเสนอเรื่อง: "MEE 231 Computer Programming สัปดาห์ที่ 1 MIT App Inventor เรียนรู้การใช้งานเบื้องต้น ทดสอบการเชื่อมต่อโปรแกรมกับโทรศัพท์มือถือ"— ใบสำเนางานนำเสนอ:

1 MEE 231 Computer Programming สัปดาห์ที่ 1 MIT App Inventor เรียนรู้การใช้งานเบื้องต้น ทดสอบการเชื่อมต่อโปรแกรมกับโทรศัพท์มือถือ http://webstaff.kmutt.ac.th/~ianniset >> MEE231 link >> week 1

2 ตัวอย่างที่ 1 การทดลองใช้งาน Designer 2 Button drag & drop 1 click ที่ปุ่ม Designer 3 click ที่ปุ่ม หรือ ที่คำว่า Button1 4 Properties เลื่อนลงไปที่ Text แก้เป็น test

3 ถ้าใช้ WiFi ได้ http://appinventor.mit.edu/explore/ Resources >> Get Started 1. Setup Instructions Option One Instructions

4 ถ้าใช้ WiFi ไม่ได้ install app ด้วย QR code โทรศัพท์มือถือ Settings >> Security >> click ให้ใช้ Unknown sources ได้ MIT App Inventor click ที่ Build >> App (provide QR code for.apk) ใช้โทรศัพท์มือถือ อ่าน QR code

5 ถ้าใช้ WiFi ไม่ได้ install app ด้วย QR code Open URL แล้วจะเริ่มการ download เอง เมื่อ download เสร็จแล้ว เปิด File Manager เช่น ES Explorer เลือกไฟล์.apk ชื่อเดียวกับที่กำลังเขียนโปรแกรม Complete action using >> Package Installer >> Install จะเริ่มการ install โปรแกรมที่เขียน เสร็จแล้ว open โปรแกรม

6 ถ้าใช้ WiFi ไม่ได้ save ผ่าน คอมพิวเตอร์ โทรศัพท์มือถือ Settings >> Security >> click ให้ใช้ Unknown sources ได้ MIT App Inventor click ที่ Build >> App (save.apk to my computer) Save file มาที่คอมพิวเตอร์

7 ถ้าใช้ WiFi ไม่ได้ save ผ่าน คอมพิวเตอร์ copy ไฟล์.apk ที่สร้างขึ้นไปที่โทรศัพท์มือถือ เปิด File Manager เช่น ES Explorer เลือกไฟล์.apk นั้น ทำการ install ในมือถือ

8 ตัวอย่างที่ 2 จงสร้างโปรแกรมบวก เลข ลำดับความคิด จะบวกเลขกี่ตัว รับค่าตัวเลขจากไหน ได้ค่าตัวเลขแล้วนำมาบวกกัน นำผลลัพธ์มาแสดง

9 ตัวอย่างที่ 2 จงสร้างโปรแกรมบวก เลข ลำดับความคิด จะบวกเลขกี่ตัว รับค่าตัวเลขจากไหน ได้ค่าตัวเลขแล้วนำมาบวกกัน นำผลลัพธ์มาแสดง 2 ตัว จากช่องรับค่า การดำเนินการ ( การคำนวณ ) ช่องแสดงผลลัพธ์ เหตุการณ์เกิดขึ้นเมื่อไร เมื่อกดปุ่ม

10 ตัวอย่างที่ 2 Designer โปรแกรม บวกเลข TextBox1 TextBox2 Button1 Label2 Label1 Properties Label1 Text แก้เป็น + Button1 Text แก้เป็น = FontSize แก้ เป็น 30 Label2 Text แก้เป็น 0000

11 ตัวอย่างที่ 2 Blocks โปรแกรม บวกเลข 1 click ที่ปุ่ม Blocks 2 click ที่ Button1 จะมีส่วนนี้เปิดออกมา 3 when [Button1].Click drag & drop

12 ตัวอย่างที่ 2 Blocks โปรแกรม บวกเลข

13 4 click ที่ Label2 5 Set [Label2].Text to ลากมาต่อที่ด้านในของ when [Button1].Click

14 ตัวอย่างที่ 2 Blocks โปรแกรม บวกเลข

15 5 click ที่ Math >> เลือกการบวก >> ลากมาต่อท้าย

16 ตัวอย่างที่ 2 Blocks โปรแกรม บวกเลข 6 click ที่ TextBox1 >> เลือก [TextBox1].[Height] >> ลากมาใส่ในช่องว่างแรก 7 ทำแบบเดียวกันที่ TextBox2 8 click ที่รูปสามเหลี่ยม เปลี่ยนจาก Height เป็น Text

17 ตัวอย่างที่ 2 Blocks โปรแกรม บวกเลข เมื่อ กด Button1 ทำการตั้งค่า ข้อความ Label2 เป็น ข้อความ TextBox1 + ข้อความ TextBox2

18 ตัวอย่างที่ 3 Designer โปรแกรม แสดงค่าความเร่งแกน x 1 Display hidden components in Viewer 2 Label1 3 Sensors 4 AccelerometerSensor1

19 ตัวอย่างที่ 3 Blocks โปรแกรม แสดงค่าความเร่งแกน x เมื่อ AccelerometerSensor1 เปลี่ยนค่าความเร่ง ทำการตั้งค่า ข้อความ Label1 เป็น ความเร่งแกน x ของ AccelerometerSensor1 1 2 3

20 เมื่อเลิกเรียนแต่ละครั้ง - ถ้าใช้คอมพิวเตอร์ของห้องคอมพ์ฯ ลบไฟล์ที่สร้างขึ้นในการเรียนให้หมด เพื่อประหยัดพื้นที่ของคอมพ์ฯ - โทรศัพท์มือถือ ถ้าต้องการประหยัดพื้นที่ ให้ uninstall app ที่สร้างขึ้นในการเรียน ปิดการใช้ Unknown source - ห้องคอมพ์ฯ ปิดคอมพ์ฯ หน้าจอ แอร์ และไฟแสงสว่าง เก็บขยะต่างๆ ไปทิ้งในที่ทิ้ง

21 แบบฝึกหัด http://webstaff.kmutt.ac.th/~ianniset/MEE231/Presentation1.pdf