Tag: MIT

ถ้าคุณมีมือถือ Android ที่สามารถติดต่อกับ App Inventor ได้ ให้ต่อสาย USB เข้ากับเครื่องคอมพิวเตอร์ โปรแกรม Hello Purr จะปรากฎบนมือถือให้ทดสอบ (live testing) ได้ทันที

แต่ถ้าดึงสาย USB ออก โปรแกรมก็จะหายไป ไม่มีอยู่ในมือถืออีกต่อไป ทั้งนี้เพราะโปรเจกได้ถูกเก็บไว้ในระบบคลาวด์ (Cloud system) ถ้าเสียบสาย USB กลับไปขณะที่ยังอยู่ในระบบอยู่ โปรแกรม Hello Purr ก็จะกลับมาอีกครั้ง

ถ้าต้องการทดสอบโปรแกรมที่เราสร้างขึ้นมา โดยไม่ต้องใช้สาย USB เราต้องดาวน์โหลดโปรเจกจากระบบมาเก็บไว้ที่มือถือเราเอง เรียกวิธีนี้ว่า Package for Phone เหมือนกับการจัดเก็บของ (ในที่นี้คือโปรเจก) แล้วส่งของผ่านพัสดุ จากระบบคลาวด์มาที่มือถือของเรานั้นเอง วิธีการทำ คือ คลิกปุ่ม Package for Phone บนโปรแกรม Designer คลิกเลือก Download to Connected Phone โปรแกรมจะสร้างไฟล์นามสกุล apk ส่งมาและติดตั้งเข้าไปยังมือถือ ซึ่งต้องต่อสาย USB อยู่

หรือถ้าต้องการเก็บไฟล์ (.apk) ไว้ที่เครื่องคอมพิวเตอร์ก่อน ก็ทำได้โดยคลิกปุ่ม Package for Phone คลิกเลือก Download to this Computer วิธีนี้ เราสามารถต่อมือถือกับคอมพิวเตอร์เพื่อติดตั้งโปรแกรมในภายหลัง หรือจะแชร์ไฟล์นี้ให้คนอื่น นำไปลงโปรแกรมบนมือถือของคนๆ นั้นก็ได้

ทั้งสองวิธีที่ผ่านมา มือถือที่จะใช้ต้องตั้งค่า Unknown sources ก่อน ซึ่งทำได้จาก เมนูในมือถือ Setting -> Applications ทั้งนี้เพราะ วิธีนี้เป็นการลงโปรแกรมที่ไม่ผ่าน Google Play (ก่อนหน้านี้คือ Android Market) ดังนั้น มือถือต้องตั้งค่าอนุญาตให้ลงโปรแกรมที่ไม่รู้จัก (และไม่น่าเชื่อถือ) ก่อน

อีกวิธีหนึ่งในการลงโปรแกรมบนมือถือของเรา คือ การใช้บาร์โค้ด ซึ่งทำได้โดย คลิกปุ่ม Package for Phone คลิกเลือก Show Barcode

วิธีนี้ต้องมีโปรแกรมบาร์โค้ดแสกนเนอร์ (ดาวน์โหลดได้จาก Google Play) และใช้ได้เฉพาะมือถือของเราเองเท่านั้น แชร์ไม่ได้

สำหรับคนที่ต้องการพัฒนาโปรแกรมร่วมกัน หรือต้องการแชร์ซอร์สโค้ดให้คนอื่น ทำได้โดยคลิก My Projects ในโปรแกรม Designer เพื่อไปยังรายการโปรเจกที่สร้างไว้ คลิกเลือกโปรเจกที่ต้องการ จากนั้นคลิกปุ่ม More Actions คลิกเลือก Download Source

ก็จะได้ซอร์สโค้ดของโปรเจกที่ดาวน์โหลดมา (ไฟล์ zip) อยู่ที่เครื่องคอมพิวเตอร์ของเรา จากนั้นสามารถส่งไฟล์นี้ให้คนอื่นนำซอร์สโค้ดไปพัฒนาต่อได้ เมื่อคนที่ได้ไฟล์ zip นี้ไปแล้ว สามารถสร้างโปรเจกนี้ได้โดย คลิกปุ่ม More Actions คลิกเลือก Upload Source เพื่อสร้างโปรเจก Hello_purr ของคนๆ นั้น ในระบบคลาวด์ต่อไป 

โปรเจก Hello_purr เป็นโปรเจกง่ายๆ แต่ก็แสดงขั้นตอนหลักๆ ของการพัฒนาโปรแกรมบนมือถือได้อย่างครอบคลุม ความสามารถของ App Inventor ยังมีอีกมากมาย ติดตามกันต่อในภายหลังนะครับ

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

เริ่มต้นการเขียนโปรแกรมด้วยการเปิดโปรแกรม Blocks Editor ด้วยการคลิกปุ่ม Open the Blocks Editor บนโปรแกรม Designer รอสักครู่ ไฟล์ AppInventorForAndroidCodeblocks.jnlp จะถูกดาวน์โหลดและรันโดยอัตโนมัติ แต่ถ้าโปรแกรมไม่เปิดทำงานเอง (เบราว์เซอร์อาจไม่ได้ตั้งค่าให้รันโปรแกรมจาวาโดยอัตโนมัติ) ก็สามารถดับเบิลคลิกไฟล์ที่ดาวน์โหลดมาได้เอง

Blocks Editor มี 3 แทป (Built-in, My Blocks, Advanced) Built-in รวบรวมบล็อกคำสั่งที่สามารถใช้ได้กับทุกโปรเจก ส่วน My Blocks เป็นบล็อกคำสั่งของส่วนโปรแกรมที่ออกแบบไว้ในโปรเจกนี้เท่านั้น (Advanced ยังไม่กล่าวถึงในที่นี่) พื้นที่ว่างด้านขวาเป็นพื้นที่สำหรับวางบล็อก เพื่อสร้างโปรแกรม ถ้าไม่ต้องการบล็อกใดแล้ว ให้ลากบล็อกนั้นไปลงถังขยะที่อยู่มุมล่างขวา ส่วนอื่นๆ ของโปรแกรมจะกล่าวต่อไปภายหลัง

เมื่อคลิกที่ส่วนโปรแกรมใด (ในรูปเป็น Button1) จะปรากฎหน้าต่างแสดงบล็อกที่เกี่ยวข้องกับส่วนโปรแกรมนั้น

วิธีการเขียนโปรแกรม ทำได้โดยลากบล็อกที่ต้องการไปยังพื้นที่ว่างถัดไป การต่อบล็อกจะคล้ายกับ Scratch (แต่บล็อกจะมีความซับซ้อนของมากกว่า) ข้อความที่อยู่บนบล็อกจะสื่อถึงหน้าที่ของมัน

สิ่งที่เราต้องการในโปรแกรมนี้ คือเมื่อผู้ใช้โทรศัพท์แตะที่รูปแมว (Button1) ก็จะมีเสียงร้องของแมว (Sound1) ดังออกมา ดังนั้น คลิกแทป My Blocks คลิกเลือก Button1 ลากบล็อก when Button1.Click do ไปยังพื้นที่เขียนโปรแกรม สังเกตบล็อกที่ถูกเลือกอยู่จะมีกรอบสีส้มล้อมเอาไว้

จากนั้นคลิกเลือก Sound1 ลากบล็อก call Sound1.Play ไปวางด้านในของบล็อก when Button1.Click do สังเกตรูปร่างของบล็อกจะต่อกันพอดี และจะมีเสียงดังคลิกถ้าบล็อกต่อกันได้

โค้ดของ Hello Purr มีเท่านี้ สั้นและเข้าใจได้ง่าย ถ้าจะแปลความหมายของบล็อกคำสั่งนี้ เป็นภาษาที่คนทั่วไปพอจะเข้าใจได้ ก็คือ เมื่อปุ่มนี้ (Button1) ถูกคลิกหรือแตะบนหน้าจอมือถือ ให้เปิดเสียงแมว (Sound1)

ต่อไปจะทดสอบโปรแกรมกับโปรแกรมมือถือจำลอง (ตอน 4 จะทดสอบกับมือถือจริง) โดยคลิกปุ่ม New emulator บนโปรแกรม Blocks Editor เพื่อเปิดโปรแกรมมือถือจำลอง รอสักครู่ขณะโปรแกรมติดตั้งค่าเริ่มต้นก่อนใช้งาน

จากรูปด้านบน เริ่มต้นรูปหนึ่งเมื่อโปรแกรมมือถือจำลองพร้อมใช้งาน ใช้เมาส์ลากกุญแจไปด้านขวามือเพื่อปลดล็อกมือถือ จะได้รูปที่สอง จากนั้นคลิกปุ่ม Connect to device…  บนโปรแกรม Blocks Editor เลือกมือถือจำลอง ในที่นี่คือ emulator-5554 สังเกตตัวเลขเดียวกับเครื่องจำลอง (มุมซ้ายบน) ตัวเลขนี้ระบุเครื่องที่ต้องการติดต่อกับโปรแกรม App Inventor เนื่องจากเราสามารถเปิดโปรแกรมมือถือจำลองพร้อมกันได้มากกว่าหนึ่งเครื่อง (ทดลองดูก็ได้)

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

เมื่อเรารู้องค์ประกอบหลักๆ ของ Designer กันแล้ว ขั้นตอนต่อไป คือ ออกแบบหน้าตาโปรแกรมบนมือถือ ซึ่งทำได้โดย ลากส่วนประกอบที่ต้องการไปยัง Viewer

ตอนเริ่มต้นโปรเจกใหม่ จะมีส่วนโปรแกรมที่เป็นหน้าจอมือถือ (Screen1) ก่อนอยู่แล้ว ดังนั้นเราจึงเห็น หน้าจอมือถืออยู่ที่ Viewer ส่วนโปรแกรม Screen1 ใน Components และรายการคุณสมบัติของ Screen1 ใน Properties

สังเกตเลข 1 ที่ตามหลังชื่อส่วนโปรแกรม Screen ใน Viewer หรือใน Components ตัวเลขนี้ถูกใส่เข้าไปในชื่อ เพราะในโปรแกรมหนึ่ง อาจมีส่วนโปรแกรมชนิดเดียวกันมากกว่า 1 ส่วน ถ้าเราลากส่วนโปรแกรมที่มีอยู่แล้วเพิ่มเข้าไปใน Viewer ตัวเลขในชื่อจะเพิ่มขึ้นเองโดยอัตโนมัติ เพื่อป้องกันชื่อซ้ำกัน

ลำดับแรกในการออกแบบโปรแกรม Hello Purr เริ่มด้วยการลากส่วนประกอบปุ่ม (Button) ในหมวด Basic มายังหน้าจอมือถือ สังเกตว่าปุ่มใน Components จะถูกเลือกพร้อมทั้งแสดงคุณสมบัติของปุ่มใน Properties โดยอัตโนมัติ

ณ ขณะนี้ ปุ่มที่อยู่ใน Viewer จะมีรูปร่างสี่เหลี่ยมพร้อมข้อความ Text for Button1 (ในกรอบสีส้ม) สิ่งที่เราต้องการแก้ไข คือ ลบข้อความนั้นทิ้ง แล้วใส่รูปแมวบนปุ่มแทน โดยไปที่คุณสมบัติ Text ของปุ่ม แล้วลบข้อความ Text for Button1 ออกไป

จากนั้นไปยังคุณสมบัติ Image คลิก None… (ในกรอบสีฟ้า) จะเห็นหน้าต่างให้เพิ่มไฟล์สื่อต่างๆ ได้ (หรืออีกทางหนึ่ง คลิกปุ่ม Add ในส่วนของ Media ที่อยู่ด้านล่างติดกับ Components) จากนั้นเลือกไฟล์รูปแมวที่ดาวน์โหลดมาแล้วในคอมพิวเตอร์ของตัวเอง

รอสักครู่ ไฟล์กำลังถูกส่งไปยัง App Inventor Server เพื่อรอการใช้งานในโปรเจกนี้ หลังจากนั้นจะเห็นรูปแมวบนปุ่มแทนข้อความที่ถูกลบทิ้งไป

ต่อไปต้องเพิ่มเสียงให้แมว โดยเลือกส่วนโปรแกรมในหมวด Media ลากส่วนโปรแกรมเสียง (Sound) ไปยัง Viewer จากนั้นไปที่คุณสมบัติ Source เพื่อเพิ่มไฟล์เสียงแมวที่ดาวน์โหลดมาก่อนหน้านี้ โดยจะใส่ที่ Source หรือตรง Media ก็ได้ (คล้ายกับตอนใส่ไฟล์รูปแมว) 

ต่อไปเพิ่มส่วนโปรแกรม Label (อยู่ในหมวด Basic) เพื่อเขียนข้อความลงไปบนหน้าจอมือถือ โดยแก้ไขข้อความในคุณสมบัติ Text นอกจากนั้นยังสามารถเพิ่มสีสันให้กับข้อความได้ โดยแก้ไขคุณสมบัติต่างๆ เช่น ขนาด สี รูปแบบ ของตัวอักษร คล้ายๆ ในโปรแกรมเวิร์ด

ถ้าทำตามบทเรียนจาก MIT จะได้หน้าตาโปรแกรมมือถือตามรูปใน Viewer ดังนี้

สังเกตว่า Sound1 ไม่ได้อยู่บนจอมือถือ เนื่องจากเป็นส่วนโปรแกรมที่ไม่สามารถมองเห็นได้ ตอนหน้ามาลงมือเขียนโปรแกรมให้แต่ละส่วนโปรแกรมทำงานร่วมกัน

การเขียนโปรแกรมบนมือถือ Android ไม่ได้ยุ่งยากอย่างที่คิด โดยภาพรวม เราต้องออกแบบหน้าตาโปรแกรมบนคอมพิวเตอร์ก่อน ด้วยโปรแกรม Designer เมื่อได้หน้าตาโปรแกรมมาแล้ว ก็ต้องเขียนโค้ดหรือเขียนโปรแกรมให้แต่ละส่วนโปรแกรมที่เราออกแบบไว้ ด้วยโปรแกรม Blocks Editor

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

มาลองทำตาม โปรแกรมแมวเหมียว ในเว็บไซต์ของ MIT กัน โดยโปรแกรมนี้ จะมีรูปแมวบนหน้าจอมือถือ เมื่อแตะที่รูปก็จะได้ยินเสียงร้องของเจ้าแมวเหมียว ดังนั้นเราต้องมีไฟล์ รูปภาพแมว และเสียงร้องของเจ้าแมวเหมียว เพิ่มเติมเท่านั้นเอง (คลิกขวาที่ลิงค์แล้ว Save link as โหลดไฟล์เก็บเอาไว้ที่เครื่องคอมพิวเตอร์ก่อน)

เมื่อมีไฟล์รูปแมวและเสียงร้องแล้ว ก็ไปยังโปรแกรม Designer กันเลย ถ้ายังไม่เคยสร้างโปรเจกมาก่อน จะได้หน้าต่างตามนี้

โปรเจกใน App Inventor ก็คล้ายกับโปรเจกในโปรแกรม Scratch คือจะเก็บไฟล์โปรแกรมหรือโค้ด กับไฟล์ต่างๆที่ใช้ในโปรเจก เช่น รูปภาพ เสียง ข้อมูล เป็นต้น วิธีสร้างโปรเจกใหม่ ทำได้โดยคลิกปุ่ม New ก็จะเห็นหน้าต่างนี้

ใส่ชื่อโปรเจกที่ต้องการ (ห้ามมีช่องว่าง) เช่น Hello_purr หรือ HelloPurr ก็ได้ คลิกปุ่ม OK จะได้หน้าต่างต่อไป

โปรเจกที่เราสร้างขึ้นมาจะเก็บไว้ที่ App Inventor Server คลิกที่ My Projects จะเห็นรายการโปรเจกที่เคยถูกสร้างไว้ (ในที่นี่มี Hello_purr โปรเจกเดียว) คลิกที่ชื่อโปรเจก (Hello_purr) จะเปิดโปรเจกใน Designer

ในโปรแกรม Designer มีส่วนประกอบหลักอยู่ 4 ส่วน คือ

1. Palette เป็นแหล่งรวบรวมส่วนโปรแกรม (Component) เอาไว้เป็นหมวดหมู่ (Basic, Media, Animation, …) คลิกหมวดที่ต้องการ จะเห็นรายการส่วนโปรแกรม ที่เราสามารถใส่เข้าไปบนโปรแกรมมือถือ ที่กำลังออกแบบนี้ได้ เช่น ในหมวด Basic จะเห็นส่วนโปรแกรมปุ่ม (Button) นาฬิกา (Clock) รูปภาพ (Image) เป็นต้น

2. Viewer เป็นพื้นที่บนหน้าจอมือถือ (Screen1) ทำให้เห็นภาพตอนออกแบบโปรแกรม เมื่อเราลากส่วนโปรแกรมมาใส่ในพื้นที่นี้

3. Components คือส่วนโปรแกรมที่ถูกใส่เข้าไปใน Viewer เป็นส่วนโปรแกรมที่เราต้องการให้มีอยู่ในโปรแกรมมือถือ และสามารถเขียนโค้ดเข้าไปในส่วนโปรแกรมเหล่านี้ได้ เพื่อให้โปรแกรมทำงานตามที่ต้องการ

ด้านล่างติดกันเป็นส่วนของ Media เราสามารถเพิ่มไฟล์สื่อชนิดต่างๆ เช่น ไฟล์รูปภาพ ไฟล์เสียง เข้าไปในโปรเจกเพื่อนำไปใช้ในโปรแกรมได้

4. Properties คือคุณสมบัติต่างๆ ของส่วนโปรแกรม เมื่อเราคลิกเลือกส่วนโปรแกรมใด ที่อยู่ใน Viewer หรือใน Components เราจะเห็นรายการคุณสมบัติของส่วนโปรแกรมนั้น โดยแต่ละส่วนโปรแกรมจะมีคุณสมบัติ ที่อาจจะเหมือนกันหรือแตกต่างกันออกไปก็ได้ ซึ่งเราสามารถแก้ไข เพิ่มเติม ข้อมูลลงไปในคุณสมบัติต่างๆ ที่มีได้