ลองมาเขียนโปรแกรมบน iPhone ดูบ้างครับ สำหรับใครที่สนใจก็ลองติดตามกันเรื่อยๆนะครับ ผมจะเริ่มตั้งแต่ต้นเลยแล้วกัน ท่านใดมีข้อเสนอ หรือติชม จะยินดีมากเลยนะครับ
เตรียมเครื่องมือกันก่อน
- เครื่อง Mac ไม่่ว่าจะเป็น MacBook MacAir iMac หรืิิอ Macเท่ ได้หมดครับ (บางคนเริ่มงงกับ Macเท่ ดูได้ที่ การติดตั้ง Mac OSX ลงบน Windows ด้วย VMware) โดยต้องใช้ OS X 10.5.3 ขึ้นไป
- โปรแกรม iPhone Software Development Kit (SDK) โหลดกันแบบฟรีๆเลยครับ ตอนนี้ก็เป็นเวอร์ชั่น 3.1
- และแน่นอน.....เครื่อง iPhone ครับ ฮิ ฮิ
ความรู้พื้นฐาน
อันนี้ขึ้นอยู่กับว่าคุุณต้องการเขียนโปรแกรมบน iPhone แบบไหน โดยแบ่งได้เป็นสองแบบคือ
- Dashcode เป็นการเขียนโปรแกรมในรูปแบบ html เพื่อไปใช้ใน Safari โดยคุณควรมีพื้นฐานเกี่ยวกับ html และ script
- Xcode เป็นการเขียนโปรแกรมที่เราโหลดผ่าน iTune นั่นแหล่ะครับ โดยแบบนี้จะยากสักหน่อย คุณควรมีความรู้พืนฐานเกี่ยวกับ Objective-C
นอกจากนั้นยังมีข้อจำกัดหลายๆอย่างบน iPhone อีกครับที่ควรจะทราบเช่น
- ทำงานได้ครั้งละโปรแกรม ไม่เหมือนพวก window mobile ที่สามารถเปิดได้หลายๆโปรแกรมพร้อมๆกัน
- การเข้าถึงข้อมูลใน iPhone ทำได้เฉพาะส่วนหนึ่งของ file system เท่านั้น (ที่เรียกว่า sandbox) ไม่เหมือนกับโปรแกรมในคอมพิวเตอร์ที่เราจะไปเขียนไฟล์ตรงไหนของฮารด์ดิสก็ได้
- การตอบสนองต้องรวดเร็ว คือกดเปิดโปรแกรม ก็ต้องโหลดเร็ว แสดงผลเร็ว (ตามแบบฉบับของ iPhone) แล้วพอผู้ใช้กดปุ่ม Home โปรแกรมจะถูกบังคับให้ปิด ทีนี้เราก็ต้องจัดการ save ข้อมูลให้เสร็จภายในประมาณ 5 วินาที ไม่งั้นโปรแกรมเราจะถูกปิดโดยไม่ได้ save ไว้
- ขนาดหน้าจอถูกจำกัดอยู่ที่ 480X320 pixel
- ขนาดหน่วยความจำที่โปรแกรมใช้ได้อยู่ที่ประมาณครึ่งหนึ่งของเมมที่มีในเครื่อง
เริ่มต้นเขียน Hello World กันดีกว่า (Xcode)
เริ่มสร้าง Project ด้วย Xcode
หลังจากติดโหลดและติดตั้ง iPhone SDK กันแล้ว ก็เปิดมันขึ้นมาเลยครับ โดยไปที่ /Developer/Applications/Xcode แล้วจะเห็นหน้าจอนี้ครับ จากนั้นกด create new project
ต่อมาก็เลือก
View-Based Applicaiton และตั้งชื่อ Project ว่า HelloWorld
ทำความรู้จักกับ Xcode สักหน่อยก่อน
หน้าจอ Xcode ประกอบด้วย 3 ส่วนสำคัญคือ
- Group & File Panel (ด้านซ้าย) แสดง resource ทั้งหมด (โฟลเดอร์ที่อยู่ในนี้อาจมี path ไม่ตรงกับโฟลเดอร์ หรือไฟล์ที่เก็บของมูลจริงในเครื่อง เนื่องจาก Xcode มีการจัดเอาไฟล์มาไว้ใน project ด้วยกันเพื่อให้ทำงานได้ง่าย)
- Classes เป็นที่เก็บ code ที่เขียนด้วย Objective-c ทั้งหมด โดยที่เราสามารถสร้างโฟลเดอร์ย่อยเพื่อเก็บ code ได้
- Other Sources เป็นที่เก็บ code ที่ไม่ได้เขียนด้วย Objective-c โดยโปรแกรมที่เขียนสำหรับ iPhone จะประกอบไปด้วย
- Hello World_Prefix.pch (pch = precompiled header) ใช้สำหรับเก็บ header file ที่ถูกนำมาใช้ใน project นี้ โดย Xcode จะทำการ complie ไฟล์เหล่านี้ไว้ก่อนเพื่อลดเวลาในการ complile project เมื่อเราใช้คำสั่ง build หรือ build and go
- main.m เป็นที่เก็บ main() ซึ่งโดยปกติเราไม่จำเป็นต้องเปลี่ยนแปลง
- Resource เป็นที่เก็บไฟล์ที่ไม่ใช่ code เช่นรูปภาพ และวีดีโอ ที่เราต้องการใช้ใน project ทัั้งหมด นอกจากนั้นยังมีโฟลเดอร์ย่อยไปอีกคือ
- Hello_WorldViewController.xib เก็บข้อมูลสำหรับ Interface Builder
- Info.plist เก็บข้อมูลรายละเอียดของ Application ที่เราสร้างขึ้น
- MainWindow.xip เป็นส่วนที่เก็บ main ของ Interface Builder (nib)
- Frameworks เป็นที่เก็บ library (code, image, sound) ที่เราสามารเรียกใช้จากโปรแกรมเราได้
- Product เก็บ Application ที่ได้หลังจากเราได้ compile project ของเรา โดยถ้าเราลองดูตอนนี้จะเห็นว่ามี ไฟล์ชื่อ Hello World.app ซึ่งก็คือ application ของเรานั่นเอง (ตอนนี้ยังเป็นสีแดง เนื่องจากเรายังไมไ่ด้สั่ง complile --- ไฟล์ที่เป็นสีแดงใน Xcode คือไฟล์ที่ไม่พบใน disk)
- Detail View (ขวาบน) แสดงรายละเอียดของ resource ที่ถูกเลือก
- Editor (ขวาล่าง) แสดงข้อมูลของ resource ที่ถูกเลือก เพื่อแก้ไข (ตรงนี้แหล่ะครับที่เราจะต้องมาเขียน code กัน)
ทำความรู้จักกับ Interface builder (IB)
เอาไว้ออกแบบหน้าจอครับ ลองเปิดไฟล์ Hello_WorldViewController.xip จะได้หน้าตาแบบนี้
มาดูส่วนประกอบกันบ้างครับ
- หน้าต่างด้านซ้ายสุดเป็น nib ไฟล์ของ main window ซึ่งก็คือ Hello_WorldViewContrller.xib โดยในแต่ละ nib file ประกอบไปด้วย 2 icon คือ
- File's Owner เป็น object ของ nib file ที่ถูกสร้างขึ้นเมื่อเรียกใช้
- First Responder เป็น object ที่ user กำลังใช้งานอยู่ เช่นถ้า user กำลังกรอกข้อมูล text field ก็คือ first responder และเมื่อ user เลือกไปที่ส่วนอื่นของหน้าจอ first responder ก็จะเปลี่ยนตามไปด้วย โดยจะเห็นได้ว่าเราสามารถรู้ได้ทันทีว่า user กำลังทำอะไรที่หน้าจออยู่ก็ด้วยการดูที่ first responder
- ไฟล์อื่นๆ จะเป็น object instant ที่ถูกสร้างเมื่อ nib file ถูกโหลดขึ้นมา ดังจะเห็นได้จาก icon ที่ชื่อ view ซึ่งเป็น instant ของ UIView class (พื้นที่หน้าจอที่แสดงให้ user ใช้งาน)
- หน้าต่างตรงกลางคือส่วนที่ไว้ออกแบบหน้าจอ เราสามารถเปิดหน้าต่างนี้ขึ้นมาได้โดยการกด icon view จากหน้าต่างซ้าย
- หน้าต่างซ้ายคือ library เป็นทีึ่เก็บ Cocoa Touch object ทั้งหลาย ที่เราสามารถลากเข้ามาเป็นส่วนหนึ่งในหน้าจอ view ได้
เริ่มเขียน Hello World สักที
เตรียมตัวกันพอประมาณแล้ว คราวนี้ได้เวลาเขียนโปรแกรมเล้วครับ
- ลองหา label จากหน้าต่าง library พอเจอแล้วก็ลากมาไว้ในหน้าต่าง view
- แก้ label ให้เป็นว่า Hello World!!!
- save file คับโดยกด File > Save
- compile และสั่งให้โปรแกรมทำงาน โดยกลับไปที่ Xcode แล้วกด Build > Build and Run
- Xcode จะเปิด iPhone simulator ขึ้นมา ก็จะเห็น Hello World!!!
- เสร็จแล้ว ???? คับ เสร็จแล้วคับ ยังไม่ได้เขียน code อะไรเลยคับ แต่เสร็จแล้วจิงๆ ;-)
ปรับแต่ง Hello World นิดหน่อย
ลองปรับสีสรรให้สวยอีกนิดดีกว่าครับ
- เปิด Inspector ขึ้นมาจากเมนู Tool
- แล้วเลือกที่ HelloWorld ที่เราพิมพ์ลงไปในหน้าต่าง view จะเห็นว่า Inspector จะแสดงคุณสมบัติของ label จากนั้นก็ลองปรับสีหรืออื่นๆ ให้สวยงานเลยครับ
- Save และ Build and Run เพื่อดูผลงานได้เลยครับ
เปลี่ยนรูป icon ให้กับโปรแกรมที่สร้างขึ้น
ลองกดปุ่ม home ที่หน้าจอ iPhone simulator ดูครับ เราจะเห็น icon โปรแกรมเราเป็นสีขวา พร้อมคำว่า HelloWorld อยู่ด้านล่าง
ทีนี้เราลองมาเปลี่ยน icon เป็นรูปอื่นดูบ้าง
- เตรียมรูปขนาด 57X57 pixel แบบ PNG (เป็นสีเหลียมได้เลยคับ ไม่ต้องโค้ง ไม่ต้องมีแอฟเฟ็คอะไร เดี๋ยว iPhone จัดให้ครับ)
- ไปที่ Xcode แล้วเลือกโฟลเดอร์ Resource จากนั้นไปที่เมนู Add to Project > เลือกรูปทีเตรียมไว้
- จะมีหน้าจอขึ้นมาถามว่าเราต้องการ copy รูปไปยัง project หรือไม่ ตอบตกลงโดยการติ๊กที่คำว่า Copy items into desetination.... แล้วกดปุ่ม Add
- เปิดไฟล์ Info.plist จากโฟลเดอร์ Resource จากนั้นแก้ double click ในช่อง icon file ที่ว่างอยู่ แล้วพิมพ์ชื่อไฟล์ icon ลงไป
- save แล้ว build and run กันเลย จะได้ icon ตามแบบเราแล้ว
- ถ้าลองดูที่ไฟล์ Info.plist จะเห็นว่ามีขัอมูลอีกหลายอย่างที่เราสามารถกำหนดได้ให้กับ Project เช่น Bundle indentifier ที่เปรียบเหมือน id ของ project ที่จะไม่ซ้ำกัน