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

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

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

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

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

โปรแกรม designer

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

สร้างโปรเจก App Inventor

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

โปรแกรม Hello Purr

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

โปรเจก 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 เราจะเห็นรายการคุณสมบัติของส่วนโปรแกรมนั้น โดยแต่ละส่วนโปรแกรมจะมีคุณสมบัติ ที่อาจจะเหมือนกันหรือแตกต่างกันออกไปก็ได้ ซึ่งเราสามารถแก้ไข เพิ่มเติม ข้อมูลลงไปในคุณสมบัติต่างๆ ที่มีได้

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s