RSS

เขียนโปรแกรมง่ายๆ บน iPad ด้วย Codify

12 Nov

 

 

 

Codify (กำลังจะมีการเปลี่ยนชื่อเป็น Codea ซึ่งผสมกันระหว่างคำว่า Code กับ Idea) เป็น Application ที่ทำให้ผู้ใช้ไอแพดสามารถเขียนโปรแกรมและสร้างเกมได้

ตัวโปรแกรม Codify (หรือ Codea) ถูกสร้างขึ้นมาด้วยภาษา Lua (Lua Programming Language) ซึ่งภายในโปรแกรมจะมี function ต่างๆ มากมายให้ผู้ใช้ได้เลือกที่จะนำมาเขียนโปรแกรมของตัวเองได้ง่ายๆ เพียงแค่คลิกและลากเท่านั้น… หมดปันหากับการไล่หาค่าสี RGB ที่ต้องการ เพราะเพียงแค่คลิกเท่านั้นหน้าจอจะแสดงสีต่างๆ ให้ผู้ใช้งานเลือกและแปลงไปเป็นค่ารหัสสีในโปรแกรมทันที นอกจากนี้ Codify ยังมีฟังก์ชันรับค่าการสัมผัสหลายจุด (Multi-touch) แรงโน้มถ่วงโลก (Gravity) รวมไปถึง Accelerometer และอื่นๆ อีกมากมาย

Codify ถูกออกแบบมาเพื่อช่วยให้การเขียนโปรแกรมง่ายและรวดเร็วขึ้น พร้อมทั้งยังมีเอกสารอ้างอิงภายในโปรแกรม (in-line reference document) ให้ผู้ใช้ได้เปิดอ่านได้ตลอดเวลาขณะที่กำลังเขียนโปรแกรมอยู่ นอกจากนี้ตัว Application ยังมีระบบ Auto-Completion ที่แสนชาญฉลาดอีกด้วย

แอป Codify ได้รับการอนุญาตจาก Apple ให้เข้าสู่ Apple Store ในวันที่ 26 ตุลาคม 2554 ด้วยราคา $7.99

เรามาดูวิดีโอแนะนำ Codea กันก่อนดีกว่านะครับ เพื่อที่จะได้เห็นภาพรวมของ Codea มากยิ่งขึั้น

 

หลังจากอ่านเนื้อหาเกริ่นนำกันมาแล้ว… ต่อไปจะเป็นการรีวิวโปรแกรมจากประสบการณ์การใช้งานของผมนะครับ

หลังจากเปิด Application ขึ้นมา จะพบหน้าจอที่รวบรวมโปรเจคต่างๆ ไว้ แบ่งเป็น 2 ส่วนคือ ด้านบนเป็นโปรแกรมตัวอย่างของ Codify ส่วนด้านล่างเป็นโปรแกรมที่เราสร้างขึ้นมาเอง

เรามาดูกันที่โปรแกรมตัวอย่างกันก่อนนะครับ เพื่อเป็นแนวทางในการพัฒนาโปรแกรมของเราครับ
1. Getting Started : อธิบายถึงภาพรวมและฟีเจอร์ต่างๆ ของโปรแกรม Codify โดยจะเป็นการแนะนำให้ผู้ใช้งานได้รู้จักกับ Tools และการใช้งานในการสร้าง ลบ และแก้ไขโปรแกรม

2. Bit Invader : เกมยานอวกาศยิงข้าศึก ซึ่งจะเป็นการยกตัวอย่างของการเขียนโปรแกรมเพื่อรับค่าจากการสัมผัสหน้าจอ ทางซ้ายและทางขวาเพื่อบังคับยานอวกาศ รวมถึงการใช้ Class เพื่อสร้างวัตถุในหลายๆ รูปแบบ และการเข้าถึงวัตถุต่างๆ เหล่านั้น


3. Cloth : ตัวอย่างการเขียนโปรแกรมเพื่อรับค่าแรงดึงดูดโลก (Gravity) โดยภายในโปรแกรมจะมีตาข่ายที่เคลื่อนไหวตามแรงโน้มถ่วงโลกที่อ่านได้


4. Drum Machine : โปรแกรมที่ให้ผู้ใช้เลือกตำแหน่งต่างๆ และจะมีการสร้างเสียงขึ้นมา


5. Dungeon Roller : เกมที่ถูกสร้างขึ้นมาเพื่อเป็นตัวอย่างการใช้ sprite รวมถึง accelerometer และเสียงเอฟเฟคต่างๆ โดยในตัวเกมนั้นเราจะสามารถควบคุมการเคลื่อนที่ของตัวละครได้ด้วยการเอียงไอแพดไปมา และแตะสัมผัสหน้าเจอเพื่อโจมตีศัตรู เก็บเพชรเพื่อเพิ่มรัศมีการโจมตี


6. Ellipse Modes : โปรแกรมตัวอย่างการสร้างวงกลม วงรี ด้วยฟังก์ชัน ellipse รวมถึงการสร้าง iparameter ขึ้นมาเพื่อรับค่าต่างๆ จากผู้ใช้งานโปรแกรม


7. Graphics Styles : โปรแกรมตัวอย่างการปรับเปลี่ยนรูปแบบของกราฟฟิค โดยการใช้ฟังก์ชัน pushStyle และ popStyle (ลักษณะแบบ Stack FILO)


8. Grivity : โปรแกรมตัวอย่างการอ่านค่าจาก Gravity เพื่อแสดงลูกศรทิศทางการหมุนของไอแพด


9. Handling Touch : โปรแกรมตัวอย่างการใช้ฟังก์ชัน CurrentTouch เพื่อรับข้อมูลตำแหน่งปัจจุบันของการสัมผัสหน้าจอ (แบบจุดเดียว)


10. Lines : โปรแกรมตัวอย่างการใช้ iparameter เพื่อรับค่าจากผู้ใช้งานไปปรับเปลี่ยนรูปแบบของเส้นตรง


11. Lua Jump : เกมกระโดดเหยียบเมฆ เริ่มต้นผู้เล่นจะต้องสัมผัสหน้าจอเพื่อให้ตัวละครกระโดดไปเหยียบเมฆ จากนั้นเมื่อตัวละครเหยียบเมฆแล้วก็จะเด้งสูงขึ้นไป ผู้เล่นจะใช้การเอียงไอแพดเพื่อควบคุมทิศทางการเคลื่อนที่ของตัวละคร และทุกครั้งที่กระโดดจะมีเสียงเอฟเฟคดังขึ้น


12. Multi Touch : ตัวอย่างโปรแกรมรับค่าการสัมผัสหน้าจอพร้อมกันมากกว่า 1 จุด/ครั้ง


13. Noise : ตัวอย่างโปรแกรมที่ใช้ฟังก์ชัน Noise ในการสร้างภาพลักษณะคล้ายถูกคลื่นรบกวน โดยรับค่าจาก iparameter เพื่อปรับเปลี่ยนรูปแบบของสัญญาณคลื่นรบกวนได้


14. Parameters : ตัวอย่างโปรแกรมที่ใช้ฟังก์ชัน parameter เพื่อรับค่าจากผู้ใช้งานไปปรับเปลี่ยนรูปแบบของผลลัพธ์ที่ได้


15. Ping : เกมที่เป็นแบบ Multiplayer (เล่นได้มากกว่า 1 คน) การเล่นนั้นให้ทำการแตะหน้าจอจะเป็นการเริ่มปล่อยลูกบอล เมื่อลูกบอลถูกปล่อยแล้วผู้เล่นแต่ละฝั่งจะต้องใช้ไม้ของตัวเอง ป้องกันไม่ให้ลูกบอลตกพื้น โดยจะมีการนับแต้มด้วย ใครได้ 5 แต้มก่อนถือว่าชนะ


16. Recursive Circles : ตัวอย่างการเขียนโปรแกรมแบบฟังก์ชันเวียนบังเกิด (Recursive Function) วาดรูปวงกลมเพิ่มขึ้นเรื่อยๆ ตามจำนวนค่าที่ได้รับจาก parameter


17. Shapes and Smooth : ตัวอย่างโปรแกรมในการใช้ฟังก์ชัน smooth, noSmooth และ noStroke เพื่อผลลัพธ์ที่แตกต่างกัน


18. Snake : เกมงูที่เราคุ้นเคย เมื่อกินหัวใจแล้วตัวงูจะยาวขึ้น การควบคุมทำได้โดยการแตะสัมผัสหน้าจอในทิศทางที่ต้องการจะให้งูเคลื่อนที่ไป


19. Sounds : โปรแกรมตัวอย่างการเล่นไฟล์เสียงหลายๆ ไฟล์แตกต่างกันไป

เมื่อศึกษาตัวอย่างกันพอสมควรแล้ว ผมคิดว่าเพียงพอสำหรับมือใหม่หัดใช้โปรแกรมนะครับ เพราะมีตัวอย่างครบถ้วน อธิบายการใช้งานในตัวโปรแกรม และเห็นผลลัพธ์ในการใช้งานจริงครับ ต่อไปผมจะลองสร้างไฟล์ขึ้นมาดูบ้างนะครับ เป็นโปรแกรมเพื่อข้อความ Hello World! ครับ


จะเห็นว่าเมื่อสร้างโปรเจคใหม่ตัวโปรแกรมจะมีโค๊ดตัวอย่างมาให้ ซึ่งประกอบไปด้วย 2 ฟังก์ชัน คือ 1.setup() เป็นฟังก์ชันที่ถูกเรียกใช้งานครั้งเดียวเท่านั้นคือ ตอนเริ่มต้นรันโปรแกรม (เป็นการ Initalize ค่านั้นเอง) 2.draw() เป็นฟังก์ชันสำหรับวาดสิ่งต่างๆ ลงบนหน้าจอแสดงผลซึ่งเรียกตัวเองทุกครั้งตลอดเวลา

เมื่อผมทดลองรันโปรแกรม HelloWorld ก็จะปรากฏข้อความ Hello World! แสดงอยู่ในส่วนของ Output

ก่อนจะไปโปรแกรมถัดไป ผมจะพาคุณผู้อ่านไปดูฟังก์ชันต่างๆ ของตัว Editor กันนะครับ

เมื่อต้องการจะพิทพ์หรือแก้ไข Code ให้ทำการสัมผัสหน้าจอเช่นเดียวกับการพิมพ์ข้อความทั่วๆ ไป แอปจะเรียก Virtual Keyboard ขึ้นมาพร้อมกับมีฟังก์ชันต่างๆ ช่วยในการ Coding ของคุณผู้อ่านให้ง่ายขึ้น ซึ่งแต่ลปุ่มมีความสามารถดังนี้ครับ

1. ทำงานคล้ายกับ Tab ช่วยในการเลื่อน Cursor ทั้งยังช่วย Auto-Complete คำสั่งของโปรแกรมอีกด้วย (คล้ายๆ ใน Unix)

2. In-line reference document คู่มืออธิบายการใช้งานฟังก์ชันต่างๆ

3. ช่วยพิมพ์วงเล็บ แล้วนำ cursor เข้าไปอยู่ในระหว่างวงเล็บให้ทันที เพื่อความสะดวกในการพิมพ์

4. ช่วยพิมพ์ Quotation (“ข้อความ”) แล้วนำ cursor เข้าไปอยู่ในหว่าง Quotation ทันที เพื่อความสะดวกในการพิมพ์

5. เลือกเครื่องหมายการกระทำการทางคณิตศาสตร์

6. ทำหน้าที่คล้ายปุ่มลูกศรซ้ายบนคีย์บอร์ด (เลื่อน cursor ไปทางซ้าย 1 ตำแหน่ง)

7. ทำหน้าที่คล้ายปุ่มลูกศรขวาบนคีย์บอร์ด (เลื่อน cursor ไปทางขวา 1 ตำแหน่ง)

8. ทางลัดในการเรียกดูฟังก์ชัน หรือคลาสต่างๆ ที่ได้มีการสร้างไว้

9. ตัวช่วยเพิ่มค่าให้กับตัวแปร เช่น เมื่อพิมพ์ a แล้วคลิกปุ่มนี้ ตัวแอปจะทำการพิมพ์ a = a + ให้อัตโนมัติ

10. ใส่เครื่องหมาย =

11. Run Program เพื่อดูผลลัพธ์จากการเขียนโปรแกรม

ต่อไปผมขอลองโปรแกรมที่ซับซ้อนขึ้นมาอีกนิด โดยเป็นโปรแกรมที่รับจากสีจาก iparameter ซึ่งจะแบ่งเป็น 3 กลุ่ม สำหรับ RGB โดยแต่ละกลุ่มจะมีค่าต่ำสุดคือ 0 และสู่งสุดคือ 255

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

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

Application นี้เหมาะกับใคร ?
จากการใช้งานในเบื้องต้นผมมองว่าแอปตัวนี้เหมาะกับนักเรียน นักศึกษา และผู้สนใจในการเริ่มต้นพัฒนาโปรแกรม (โดยเฉพาะเกม) ในเขั้นเบื้องต้น เพราะด้วยตัวแอปที่ถูกออกแบบมาให้ใช้งานง่าย ไม่ซับซ้อน รวมถึงมีเครื่องมืออำนวยความสะดวกในการช่วยพัฒนาโปรแกรมมากมาย

ถ้าเขียนโปรแกรมไม่เป็นเลยจะใช้ Application นี้ได้หรือไม่ ?
คำตอบของผมคือ ได้ครับ แต่ต้องฝึกฝน พยายามดูและทำความเข้าใจตัวอย่างต่างๆ ที่มีอยู่ในแอป และหาความรู้พื้นฐานในการเขียนโปรแกรมเชิงวัตถุ (Object-Oriented Programming) เพราะจะต้องปรับวิธีคิดให้เป็นเชิงโปรแกรมเมอร์ครับ

Application นี้เขียนโปรแกรมซับซ้อนได้หรือไม่ ?
ได้ในระดับหนึ่งครับ เนื่องจาก Codify ในเวอร์ชันปัจจุบันนี้ (1.1.1) ยังไม่มี Data Storage (ตัวเก็บข้อมูล) ดังนั้นโปรแกรมในระดับสูงที่ซับซ้อนและต้องใช้การเก็บข้อมูลจะยังไม่สามารถเขียนได้ในขณะนี้ครับ (แต่เวอร์ชันหน้าจะสามารถทำได้ครับ)

บทสรุป
Codify เป็นแอปชั้นดีตัวหนึ่งสำหรับการเขียนโปรแกรม การเขียนเกม ทั้งยังสามารถใช้เป็นสื่อการสอนในการเขียนโปรแกรม (เชิงวัตถุ) ในเบื้องต้นได้อีกด้วย และเมื่อเทียบความสามารถของแอปกับราคา $7.99 แล้วนั้น ถือว่าคุ้มค่าสมราคาครับ หากคุณผู้อ่านชอบเขียนโปรแกรม อยากจะลองหัดเขียนโปรแกรม หรือทบทวนความรู้ในการเขียนโปรแกรม ไม่ควรพลาดแอปตัวนี้ครับ

ผมขอทิ้งท้ายไว้สั้นๆ ว่า สำหรับคนรักดนตรี..เรามี GarageBand สำหรับคนรักการตัดต่อภาพยนต์…เรามี iMovie สำหรับคนรักการนำเสนอ..เรามี Keynote และสำหรับคนรักการเขียนโปรแกรม..เรามี Codify (Codea) ครับ

 
Leave a comment

Posted by on November 12, 2011 in iApp

 

Tags: , , , , , , , , , , ,

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

 
%d bloggers like this: