w w w . i t s c i . m j u . a c . t h / s a y a n

INTRODUCTION TO MIT APP INVENTOR

SAYAN UNANKARD1/2562

5

WHY LEARN APP INVENTOR?

Software เปนสวนหนึ่งของชีวิตประจําวัน และ การเขียนโปรแกรมเปนสวนหนึ่งของทุกอาชีพใน

ปจจุบัน

• การใชงาน App บนอุปกรณบนมือถือเปนที่นิยมมาก

• เปนการฝกฝนทักษะ ทางคณิตศาสตร การออกแบบ และ ส่ือประสม

• เปนพ้ืนฐานของการเรียนภาษา JAVA, Python, JavaScript และ อ่ืน ๆ

• พัฒนาความคิดสรางสรรค (Creativity)

• ฝกทักษะการแกไขปญหา (Problem-solving skills)

• You can change the WORLD!

2

WHAT IS MIT APP INVENTOR?

เปนเคร่ืองมือที่ใชสําหรับสรางแอพพลิเคชันสําหรับสมารทโฟนและแท็บเล็ตที่เปนระบบปฏิบัติการ

Android

เริ่มตนจาก Google รวมมือกับ MIT พัฒนาโปรแกรม App inventor สําหรับเขียนโปรแกรมบน

อุปกรณเคล่ือนท่ีของระบบปฏิบัติการ Android เพ่ือสงเสริมการใชงานมือถือ Android ใหมาก

ยิ่งขึ้น ตอมา Google ไดให MIT พัฒนาตอในนามของ MIT App inventor

A visual "blocks" language for programming mobile apps.

3

WHAT IS MIT APP INVENTOR?

MIT App Inventor เปน Cloud-based tool ดังนั้นสามารถสราง App ผานทาง Browser ไดเลย

(แนะนําใหใช Chrome หรือ Firefox)

http://appinventor.mit.edu

การเตรียมความพรอม

• Google Chrome หรือ Firefox

• High speed Intenet

• Gmail account

• Android Mobile (ถามี)

4

SETTING UP APP INVENTOR

วิธีที่ 1 กรณีที่มีมือถือหรือแทปเล็ต Android และ wireless internet connection (แนะนํา)

• ติดต้ัง MIT AI2 Companion App บนมือถือ

• เชื่อมตอ computer และ มือถือ ดวย WiFi Network เดียวกัน

5

SETTING UP APP INVENTOR

• เปด App Inventor project และเลือกเชื่อมตอไปยังมือถือของเรา

• จากนั้นพิมพรหัส 6 ตัวหรือใช QR Code อานจากมือถือใน MIT AI2 Companion App

6

SETTING UP APP INVENTOR

วิธีที่ 2 กรณีที่ไมมีมือถือหรือแทปเล็ต Android

• ติดต้ังโปรแกรมบนเคร่ืองคอมพิวเตอร เพ่ือใชเปนการจําลองมือถือบนเคร่ืองของเราเอง

http://appinventor.mit.edu/explore/ai2/setup-emulator.html

• เปดโปรแกรม aiStarter เพ่ือรัน App บนมือถือจําลอง

7

SETTING UP APP INVENTOR

• เปด App Inventor project และเลือกเชื่อมตอไปยังมือถือของเรา

• จากนั้นโปรแกรมจะจําลองมือถือ และแสดงผลที่หนาจอคอมพิวเตอร

8

SETTING UP APP INVENTOR

วิธีที่ 3 กรณีที่มีมือถือหรือแทปเล็ต Android แตไมมี WIFI

• ติดต้ังโปรแกรมบนเคร่ืองคอมพิวเตอร เพ่ือใชในการเชื่อมตอดวย USB

http://appinventor.mit.edu/explore/ai2/setup-device-usb.html

• ติดต้ัง MIT AI2 Companion App บนมือถือ

• เปดโปรแกรม aiStarter เพ่ือรัน App บนมือถือจําลอง

9

SETTING UP APP INVENTOR

• กําหนดคาในมือถือ สําหรับใหสามารถใชงาน USB (USB Debugging ON)

• Android 3.2 หรือตํ่ากวา Settings > Applications > Development.

• Android 4.0 เปนตนไป Settings > Developer options.

• เชื่อมตอมือถือกับเคร่ืองคอมพิวเตอรผาน USB

10

START YOUR FIRST APP

http://ai2.appinventor.mit.edu

START YOUR FIRST APP

เมื่อเขาใชงานครั้งแรก จะแสดงหนา Welcome และ กดปุม Start new project

12

START YOUR FIRST APP

ขั้นตอนที่ 1 ต้ังชื่อโปรเจ็คของ App ในตัวอยางจะต้ังชื่อวา MyFirstApp

13

DESIGNER AND BLOCKS EDITOR

App Inventor Designer สําหรับออกแบบหนาจอสวนของการติดตอกับผูใช

Palette: สวนประกอบตาง ๆ ของ

หนา App

ปุม สลับหนาจอการทํางานระหวาง

Designer และ Block

Properties: สวนกําหนดคุณสมบัติของ

สวนประกอบแตละตัว เชน กําหนดสี

ขนาด และ อื่น ๆ

Viewer: สวนแสดงผลหนาจอ App

14

DESIGNER AND BLOCKS EDITOR

App Inventor Blocks Editor ใชสําหรับจัดการควบคุมการทํางานของโปรแกรมBuild-in drawers: ชุดคําสั่ง

blocks ทั่วไป

Component specific drawers:

ชุดคําสั่ง blocks เฉพาะที่ผูใช

กําหนดViewer: สวนจัดการ blocks ของ

โปรแกรม

Blocks: ชุดคําสั่งควบคุมการทํางาน

15

BUILD-IN BLOCKS

Build-in blocks เปนสวนโปรแกรมพ้ืนฐานสําหรับทุก ๆ Application

ประกอบดวย 8 สวนหลัก ๆ ไดแก

• Control สําหรับควบคุมการทํางานทั้งหมด

• Logic สําหรับตรรกะทางคณิตศาสตร เชน and/or เปนตน

• Math สําหรับการคํานวณทางคณิตศาสตร เชน + - x และ /

• Text สําหรับจัดการเก่ียวกับขอความตัวอักษร เชน การเชื่อมตอ

ชอความ การตัดคํา เปนตน

• Lists สําหรับจัดการชุดขอมูล

• Colors สําหรับจัดการสี

• Variables สําหรับการจัดการตัวแปรทั้งแบบ Global และ Local

• Procedures สําหรับจัดการโปรแกรมใหเปนฟงกชันตาง ๆ

16

CONTROL

คําสั่ง if… then เปนคําส่ังเปรียบเทียบเงือ่นไขเปนจริงจะทํางานใน

then

คําสั่ง if… then… else เปนคําส่ังเปรียบเทียบเงือ่นไขเปนจริงจะทํางาน

ใน then หากเงื่อนไขเปนเท็จ จะทํางานใน else

คําสั่ง for each เปนคําส่ังใหทําซ้ํา ตามจํานวนรอบที่ตองการ เชน

• เร่ิมทําซ้ําต้ังแต 1 ไปถึง 5 โดยเพ่ิมคาทีละ 1

• เร่ิมทําซ้ําตามจํานวนชุดขอมูลที่อยูใน list

คําสั่ง while เปนคําส่ังใหทําซ้ําโดยไมรูจํานวนรอบที่แนนอน โดยจะ

ทําซ้ําไปเร่ือย ๆ จนกวาเงื่อนไขเปน เท็จ จะหยุดทํางาน

17

CONTROL

Open another screen screenName เปน

คําส่ังใหเปดหนาจอถัดไป โดยระบุชื่อหนาจอที่

ตองการ

Close screen คําส่ังปดหนาจอ

Close application คําส่ังปด App

18

LOGIC

เงื่อนไขเปนจริง หรือ เท็จ

not

= หรือ ≠

and หรือ or

19

MATH

ชุดคําส่ังทางคณิตศาสตร

• การคํานวณ + - x / ^

• การสุมตัวเลข

• การจัดการทศนิยม

• การคํานวณ sin cos tan

• อ่ืน ๆ

20

TEXT

ชุดคําสั่งในการจัดการขอความ เชน

• การกําหนดคาขอความ

• การหาความยาวของขอความ

• การเปรียบเทียบ

• การตัดคํา

• อ่ืนๆ

21

LIST

เปนการจัดการชุดขอมูล เชน

• ชุดขอมูล Array ของตัวเลข หรือ ขอความ

• การเพ่ิมขอมูลเขาไปใน list

• การหาขนาดของ list

• การอานขอมูลใน list

• อ่ืน ๆ

22

COLOR

การกําหนดสีของตัวอักษร หรือ เครื่องมือตาง ๆ บนหนาจอ

23

VARIABLESตัวแปรสําหรับเก็บขอมูลตาง ๆ

• ตัวแปรประเภท global ที่สามารถใชงานไดทั้งหนาจอใน App

• ตัวแปร local สามารถใชไดเฉพาะสวนนั้น ๆ

24

PROCEDURES

สําหรับจัดการแบงโปรแกรมเปนสวนยอย ๆ เพื่อใหสามารถเรียกใชงานไดหลาย ๆ ครั้ง

25

EXERCISE

โปรแกรม เพ่ือคํานวณหาคาจอดรถ โดยอัตราการจอดรถ มีดังนี้ถาเปนรถยนต

• ชั่วโมงแรก 20 บาท

• ชั่วโมงที่สอง – ส่ี คิดชั่วโมงละ 30 บาท

• ชั่วโมงที่เกินจากส่ีชั่วโมงแรก คิดรวม 50 บาท

ถาเปนรถบรรทุก

• ชั่วโมงแรก 30 บาท

• ชั่วโมงที่สอง – ส่ี คิดชั่วโมงละ 40 บาท

• ชั่วโมงที่เกินจากส่ีชั่วโมงแรก คิดรวม 100 บาท

26

KEY

27

START YOUR FIRST APP

28

เกมทายตัวเลข : SCREEN1

เมื่อกดปุม เริ่มเลนเกม จะสั่งใหโปรแกรมเปดหนา Screen2 ขึ้นมา

29

เกมทายตัวเลข : SCREEN2

30

เกมทายตัวเลข : SCREEN2

เริ่มตนจากการสุมตัวเลขที่จะทาย และ กําหนดคาเริ่มตนการนับจํานวนครั้งในการทายเปน ศูนย

เมื่อหนาจอ Screen2 ถูกเรียกใชงานในแตละคร้ังจะทําการกําหนดคาเร่ิมตน

เมื่อกดปุมเลิกเลนเกม โปรแกรมจะถูกสั่งใหกลับไปเริ่มตนที่หนา Screen1

31

เกมทายตัวเลข : SCREEN2

เมื่อกดปุมทายตัวเลข โปรแกรมจะตองเช็คเงื่อนไขดังนี้

• หากไมไดกรอกตัวเลขโปรแกรมจะแจงเตือนผูใชใหกรอกตัวเลขกอนทายผล และจะไมนับ

จํานวนคร้ังที่ทาย

• ถาตัวเลขที่ทายมีคาเทากันกับตัวเลขที่สุม จะแสดงขอความวา “คุณทายถูกตองแลว” จากนั้น

ใหกลับไปยังหนา Screen1

• ถาตัวเลขที่ทายมีคาสูงกวาตัวเลขที่สุมไว จะแสดงขอความ “ตัวเลขที่ทายสูงไป”

• ถาตัวเลขที่ทายมีคาตํ่ากวาตัวเลขที่สุมไว จะแสดงขอความ “ตัวเลขที่ทายตํ่าไป”

• ถาคร้ังที่ทายเปนคร้ังที่ 5 กําหนดใหปุมทายตัวเลข เปน ไมสามารถกดไดอีก (disable) และ

หากทายไมถูกตองจะตองแสดงขอความวา “คุณทายไมถูกตอง 5 คร้ังแลว” จากนั้นใหกลับไป

ยังหนา Screen1

32

เกมทายตัวเลข : SCREEN2

33

การติดต้ัง APP บนมือถือ

เลือกที่เมนู Build --> App (provide QR code for apk)

34

การติดต้ัง APP บนมือถือ

35

การติดต้ัง APP บนมือถือ

36