เริ่มต้นเขียนโปรแกรมบน iPhone

ลองมาเขียนโปรแกรมบน iPhone ดูบ้างครับ สำหรับใครที่สนใจก็ลองติดตามกันเรื่อยๆนะครับ ผมจะเริ่มตั้งแต่ต้นเลยแล้วกัน ท่านใดมีข้อเสนอ หรือติชม จะยินดีมากเลยนะครับ

เตรียมเครื่องมือกันก่อน

1. เครื่อง Mac ไม่่ว่าจะเป็น MacBook MacAir iMac หรืิิอ ​​​Macเท่ ได้หมดครับ (บางคนเริ่มงงกับ Macเท่ ดูได้ที่ การติดตั้ง Mac OSX ลงบน Windows ด้วย VMware) โดยต้องใช้ OS X 10.5.3 ขึ้นไป
   
2. โปรแกรม iPhone Software Development Kit (SDK) โหลดกันแบบฟรีๆเลยครับ ตอนนี้ก็เป็นเวอร์ชั่น 3.1
3. และแน่นอน.....เครื่อง iPhone ครับ ฮิ ฮิ

ความรู้พื้นฐาน
อันนี้ขึ้นอยู่กับว่าคุุณต้องการเขียนโปรแกรมบน iPhone แบบไหน โดยแบ่งได้เป็นสองแบบคือ

1. Dashcode เป็นการเขียนโปรแกรมในรูปแบบ html เพื่อไปใช้ใน Safari โดยคุณควรมีพื้นฐานเกี่ยวกับ html และ script
   
2. Xcode เป็นการเขียนโปรแกรมที่เราโหลดผ่าน iTune นั่นแหล่ะครับ โดยแบบนี้จะยากสักหน่อย คุณควรมีความรู้พืนฐานเกี่ยวกับ Objective-C
   

นอกจากนั้นยังมีข้อจำกัดหลายๆอย่างบน iPhone อีกครับที่ควรจะทราบเช่น

1. ทำงานได้ครั้งละโปรแกรม ไม่เหมือนพวก window mobile ที่สามารถเปิดได้หลายๆโปรแกรมพร้อมๆกัน
2. การเข้าถึงข้อมูลใน iPhone ทำได้เฉพาะส่วนหนึ่งของ file system เท่านั้น (ที่เรียกว่า sandbox) ไม่เหมือนกับโปรแกรมในคอมพิวเตอร์ที่เราจะไปเขียนไฟล์ตรงไหนของฮารด์ดิสก็ได้
3. การตอบสนองต้องรวดเร็ว คือกดเปิดโปรแกรม ก็ต้องโหลดเร็ว แสดงผลเร็ว (ตามแบบฉบับของ ​iPhone) แล้วพอผู้ใช้กดปุ่ม Home โปรแกรมจะถูกบังคับให้ปิด ทีนี้เราก็ต้องจัดการ save ข้อมูลให้เสร็จภายในประมาณ 5 วินาที ไม่งั้นโปรแกรมเราจะถูกปิดโดยไม่ได้ save ไว้
4. ขนาดหน้าจอถูกจำกัดอยู่ที่ 480X320 pixel
5. ขนาดหน่วยความจำที่โปรแกรมใช้ได้อยู่ที่ประมาณครึ่งหนึ่งของเมมที่มีในเครื่อง
   

เริ่มต้นเขียน Hello World กันดีกว่า (Xcode)
เริ่มสร้าง Project ด้วย Xcode

หลังจากติดโหลดและติดตั้ง iPhone SDK กันแล้ว ก็เปิดมันขึ้นมาเลยครับ โดยไปที่ /Developer/Applications/Xcode แล้วจะเห็นหน้าจอนี้ครับ จากนั้นกด create new project

ต่อมาก็เลือก View-Based Applicaiton และตั้งชื่อ Project ว่า HelloWorld

ทำความรู้จักกับ Xcode สักหน่อยก่อน
หน้าจอ Xcode ประกอบด้วย 3 ส่วนสำคัญคือ

1. 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)
  
2. Detail View (ขวาบน) แสดงรายละเอียดของ resource ที่ถูกเลือก
   
3. Editor (ขวาล่าง) แสดงข้อมูลของ resource ที่ถูกเลือก เพื่อแก้ไข (ตรงนี้แหล่ะครับที่เราจะต้องมาเขียน code กัน)
   

ทำความรู้จักกับ Interface builder (IB)
เอาไว้ออกแบบหน้าจอครับ ลองเปิดไฟล์ Hello_WorldViewController.xip จะได้หน้าตาแบบนี้

มาดูส่วนประกอบกันบ้างครับ

1. หน้าต่างด้านซ้ายสุดเป็น 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 ใช้งาน) 
  
2. หน้าต่างตรงกลางคือส่วนที่ไว้ออกแบบหน้าจอ เราสามารถเปิดหน้าต่างนี้ขึ้นมาได้โดยการกด icon view จากหน้าต่างซ้าย
3. หน้าต่างซ้ายคือ library เป็นทีึ่เก็บ Cocoa Touch object ทั้งหลาย ที่เราสามารถลากเข้ามาเป็นส่วนหนึ่งในหน้าจอ view ได้

เริ่มเขียน Hello World สักที
เตรียมตัวกันพอประมาณแล้ว คราวนี้ได้เวลาเขียนโปรแกรมเล้วครับ

1. ลองหา label จากหน้าต่าง library พอเจอแล้วก็ลากมาไว้ในหน้าต่าง view
2. แก้ label ให้เป็นว่า Hello World!!!
   

3. save file คับโดยกด File > Save
4. compile และสั่งให้โปรแกรมทำงาน โดยกลับไปที่ Xcode แล้วกด Build > Build and Run
5. Xcode จะเปิด iPhone simulator ขึ้นมา ก็จะเห็น Hello World!!!
   

6. เสร็จแล้ว ???? คับ เสร็จแล้วคับ ยังไม่ได้เขียน code อะไรเลยคับ แต่เสร็จแล้วจิงๆ ;-)

ปรับแต่ง Hello World นิดหน่อย
ลองปรับสีสรรให้สวยอีกนิดดีกว่าครับ

1. เปิด Inspector ขึ้นมาจากเมนู Tool
2. แล้วเลือกที่ HelloWorld ที่เราพิมพ์ลงไปในหน้าต่าง view จะเห็นว่า Inspector จะแสดงคุณสมบัติของ label จากนั้นก็ลองปรับสีหรืออื่นๆ ให้สวยงานเลยครับ

3. Save และ Build and Run เพื่อดูผลงานได้เลยครับ

เปลี่ยนรูป icon ให้กับโปรแกรมที่สร้างขึ้น
ลองกดปุ่ม home ที่หน้าจอ iPhone simulator ดูครับ เราจะเห็น icon โปรแกรมเราเป็นสีขวา พร้อมคำว่า HelloWorld อยู่ด้านล่าง

ทีนี้เราลองมาเปลี่ยน icon เป็นรูปอื่นดูบ้าง

1. เตรียมรูปขนาด 57X57 pixel แบบ PNG (เป็นสีเหลียมได้เลยคับ ไม่ต้องโค้ง ไม่ต้องมีแอฟเฟ็คอะไร เดี๋ยว iPhone จัดให้ครับ)
   
2. ไปที่ Xcode แล้วเลือกโฟลเดอร์ Resource จากนั้นไปที่เมนู Add to Project > เลือกรูปทีเตรียมไว้
3. จะมีหน้าจอขึ้นมาถามว่าเราต้องการ copy รูปไปยัง project หรือไม่ ตอบตกลงโดยการติ๊กที่คำว่า Copy items into desetination.... แล้วกดปุ่ม Add
4. เปิดไฟล์  Info.plist จากโฟลเดอร์ Resource จากนั้นแก้ double click ในช่อง icon file ที่ว่างอยู่ แล้วพิมพ์ชื่อไฟล์ icon ลงไป
5. save แล้ว build and run กันเลย จะได้ icon ตามแบบเราแล้ว
6. ถ้าลองดูที่ไฟล์ Info.plist จะเห็นว่ามีขัอมูลอีกหลายอย่างที่เราสามารถกำหนดได้ให้กับ Project เช่น Bundle indentifier ที่เปรียบเหมือน id ของ project ที่จะไม่ซ้ำกัน