โปรแกรมแมวเหมียว ตอน 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 (ในกรอบสีส้ม) สิ่งที่เราต้องการแก้ไข …

Advertisements

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

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

After-school program ที่ไม่ใช่การติว

After-school program ในอเมริกาเป็นหลักสูตรสำหรับเด็กหลังเลิกเรียน ไม่ได้บังคับ ขึ้นกับความสมัครใจ และความสนใจของตัวเด็กเอง ผิดจากบ้านเรา ที่เลิกเรียนในโรงเรียนแล้ว เด็กจำนวนมากเลย ไปติวพิเศษต่อในโรงเรียนกวดวิชา ทำไม? หรือบ้านเราไม่มีหลักสูตรดีๆ นำเสนอให้กับเด็กๆ ลองมาดูตัวอย่างหลักสูตรหลังโรงเรียนเลิก เรียกความสนใจเด็กๆ ได้อย่างไร หลายๆ โรงเรียนในอเมริกา ร่วมกับหลายองค์กรที่ให้การสนับสนุนการศึกษาอย่างจริงจัง (บ้านเราไม่ค่อยมี) เช่น บริษัทท้องถิ่นแห่งหนึ่ง (Lenovo) สนับสนุนอุปกรณ์คอมพิวเตอร์และอื่นๆ ให้กับโรงเรียนแห่งหนึ่งเพื่อใช้ในหลักสูตรเขียนโปรแกรมคอมพิวเตอร์ สำหรับเด็กๆ ตั้งแต่ ม.ต้น จนถึงม.ปลาย เด็กจะถูกแบ่งเป็นกลุ่มๆ แต่ละกลุ่มจะมีคนคละกันทั้งที่มีและไม่มีประสบการณ์การเขียนโปรแกรมมาก่อน แม้เด็กบางคนจะมีประสบการณ์การเขียนโปรแกรมมาแล้ว พวกเขาก็ยังได้เรียนรู้ โดยเฉพาะการทำงานร่วมกันอย่างไรให้ประสบความสำเร็จ การเขียนโปรแกรมดูจะเป็นเรื่องยาก ต้องใช้ความคิดขั้นสูงมาก แต่ก็ท้าทายเด็กๆ ไม่ใช่น้อย โดยเฉพาะหลักสูตรการเขียนโปรแกรมบนมือถือ ได้รับความสนใจอย่างมาก เพราะพวกเขามีมือถือกันแทบจะทุกคน แน่นอนว่า ถ้าพวกเขาเข้าใจว่ามือถือทำงานอย่างไร และพวกเขาเองก็สามารถเขียนโปรแกรมเจ๋งๆ ไว้ใช้งานเองได้ พวกเขาคงทุ่มเวลาไปกับการสร้างโปรแกรมบนมือถือมาอวดกัน และมันคงดีกว่าไปนั่งกวดวิชาเยอะเลย โดยสรุปเราต้องการหลักสูตรดีๆ ที่ดึงความสนใจเด็กได้ เราต้องการการสนับสนุนจากหลายภาคส่วน ช่วยสนับสนุนการศึกษาไทยให้ดียิ่งๆ ขึ้นไป ฝากด้วยนะครับ

โปรแกรมแรกบน 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 …

เตรียมพร้อมก่อนใช้ App Inventor

โดยสรุป สิ่งที่ต้องเตรียมความพร้อมก่อนใช้งาน App Inventor คือ เครื่องคอมพิวเตอร์ และ ระบบปฏิบัติการ เบราว์เซอร์ ที่ติดตั้ง Java โปรแกรม App Inventor Setup ไดรเวอร์ของโทรศัพท์ Android (เฉพาะ Windows) รายละเอียด ระบบปฏิบัติการใช้ได้ทั้ง Windows, Mac OS, Linux ส่วนเบราว์เซอร์ (Browser) มีอยู่หลายโปรแกรมดังนี้ (ควรใช้เวอร์ชั่นล่าสุด) Mozilla Firefox 3.6 or higher ถ้าใช้ NoScript extension ต้องปิดการใช้งานตัวนี้ก่อน Apple Safari 5.0 or higher Google Chrome 4.0 or high Microsoft Internet Explorer 7 or higher App Inventor ต้องใช้ Java 6 (Java 1.6) …