View
13
Download
0
Category
Preview:
Citation preview
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
Recommended