โปรแกรมแมวเหมียว ตอน 4

ถ้าคุณมีมือถือ 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 อยู่ …

Advertisements

โปรแกรมแมวเหมียว ตอน 3

เมื่อเราได้ออกแบบโปรแกรม 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 …

โปรแกรมแมวเหมียว ตอน 2

เมื่อเรารู้องค์ประกอบหลักๆ ของ Designer กันแล้ว ขั้นตอนต่อไป คือ ออกแบบหน้าตาโปรแกรมบนมือถือ ซึ่งทำได้โดย ลากส่วนประกอบที่ต้องการไปยัง Viewer ตอนเริ่มต้นโปรเจกใหม่ จะมีส่วนโปรแกรมที่เป็นหน้าจอมือถือ (Screen1) ก่อนอยู่แล้ว ดังนั้นเราจึงเห็น หน้าจอมือถืออยู่ที่ Viewer ส่วนโปรแกรม Screen1 ใน Components และรายการคุณสมบัติของ Screen1 ใน Properties สังเกตเลข 1 ที่ตามหลังชื่อส่วนโปรแกรม Screen ใน Viewer หรือใน Components ตัวเลขนี้ถูกใส่เข้าไปในชื่อ เพราะในโปรแกรมหนึ่ง อาจมีส่วนโปรแกรมชนิดเดียวกันมากกว่า 1 ส่วน ถ้าเราลากส่วนโปรแกรมที่มีอยู่แล้วเพิ่มเข้าไปใน Viewer ตัวเลขในชื่อจะเพิ่มขึ้นเองโดยอัตโนมัติ เพื่อป้องกันชื่อซ้ำกัน ลำดับแรกในการออกแบบโปรแกรม Hello Purr เริ่มด้วยการลากส่วนประกอบปุ่ม (Button) ในหมวด Basic มายังหน้าจอมือถือ สังเกตว่าปุ่มใน Components จะถูกเลือกพร้อมทั้งแสดงคุณสมบัติของปุ่มใน Properties โดยอัตโนมัติ ณ ขณะนี้ ปุ่มที่อยู่ใน Viewer จะมีรูปร่างสี่เหลี่ยมพร้อมข้อความ Text for Button1 (ในกรอบสีส้ม) สิ่งที่เราต้องการแก้ไข …

โปรแกรมแมวเหมียว ตอน 1

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

โปรแกรมแรกบน Android

ก่อนจะเริ่มเขียนโปรแกรมด้วยตนเอง ลองมาดูภาพรวมในการเขียนโปรแกรมบนมือถือ Android จากวีดีโอนี้กันก่อน โปรแกรม  Hello Purr ในวีดีโอนี้ เป็นโปรแกรมง่ายๆ มีเพียงรูปภาพแมวบนหน้าจอมือถือ เมื่อผู้ใช้แตะที่รูป ก็จะมีเสียงแมวร้องออกมา การเขียนโปรแกรมบนมือถือ Android ด้วย MIT App Inventor ต้องใช้เครื่องมือสำคัญ 3 อย่าง ดังนี้ 1. โปรแกรมสำหรับออกแบบหน้าตาโปรแกรมบนมือถือ (Designer) โปรแกรมนี้ทำงานบนเบราว์เซอร์ ซึ่งต้องเชื่อมต่อไปยังเครื่องที่ให้บริการโปรแกรมนี้ (App Inventor server) โดยต้อง sing in ด้วย Google account ดังรูปล่างนี้ (คลิกที่รูป เพื่อไปยังเว็บไซต์นี้) ถ้ายังไม่มี Google account ก็ต้อง Sign Up ก่อน เมื่อได้ account มาก็ Sign in ได้เลย เพื่อใช้โปรแกรม designer นี้ MIT App Inventor จะขออนุญาตเข้าถึง Google …