เริ่มต้นเขียนโปรแกรมบน iPhone
ลองมาเขียนโปรแกรมบน 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 ที่จะไม่ซ้ำกัน
15 Responses 
Leave a Reply บทความกลุ่มเดียวกัน
Copyright 2009 Naraphol Deechuay
พอดีเลยคับ กำลังศึกษาอยู่พอดี แล้วตอนอัพโหลดขึ้น iPhone ทำไงเหรอคับ พอดีอยากจะเขียนเกมส์ดูอะคับ ถ้าไงเขียนไปเลื่อยๆนะคับ เป็นกำลังใจให้
บอกได้เลยว่า เยี่ยมยุทธ์
ถ้าจะทำเป็น app ลิ้งค์ไปดูทีวีช่องต่างๆ ต้องเขียนประมาณไหนครับ
ประกาศหาคนเขียนโปรเจค นักศึกษา
บนระบบ ซิมเบี้ยน หรือ แอนดรอย์
หัวข้อคือ บาร์โค้ด 2 มิติ บนมือถือ
ให้ค่าจ้าง 5000 บาท
ขอคนเขียนโปรแกรมได้จริง
และสามารถสอนให้เข้าใจได้
กรุณาติดต่อ e-mail : myproject_2000@hotmail.com
อยากจะรุ้ว่า ต้องใช้ xcode จะรันใช้บน xp / 7 ได้ป่าวคับ
xcode ต้องใช้เครื่อง Mac ครับ
มีภาคต่ออีกไหมครับ พอดีผมมีไอเดีย แต่ทำไม่เป็น อยากจะได้โค๊ดเบสิกเพื่อไปฝึกๆอะครับ อยากให้อกบทความแบบนี้อีกเยอะ คือให้มีแบบทำตามแล้วเห็นภาพ เห็นผลออกมาเลย มันดีใจงัยไม่รู้ ขอบคุณครับ
>>>> คุณ fan
ขอบคุณครับที่ให้ความสนใจ
สำหรับภาคต่อ มีแน่ครับ แต่ตอนนี้ต้องรอสักครู่นะครับ พอดีติด project อื่นที่ต้องรีบทำอยู่นะครับ
ขอบคุณมากครับ กำลังจะหาวิธีเริ่มพอดีเลย แต่ปัญหา ลง mac ไม่เป็น อิอิ ไม่อยากใช้ vm มันช้า อืม ถ้าขอข้อมูลไปไว้ในบร๊อกเค้ามั้ง(เดียวลงเครติด ให้อยู่ครับ)คงไม่ว่าอะไร นะ แต่คงยังไม่ได้ทำอ่า
@toping เอาไปไว้ได้เลยครับ ยินดีครับ
กำลังเริ่มศึกษา อยู่พอดี เป็นกำลังใจให้นะครับ
ต้องการผู้พัฒนาโปรแกรมเพื่อการฝึกอบรมทาง Android / Iphone
กรุณาโทรมาคุยที่ 085 8308899
เพื่อปรึกษาหารือครับ
บัญชา
ว๊าวๆๆ เพิ่งถอย macbook มา กำลังจะต้องใช้ xcode อยู่พอดี search ไป serch มา เจอเวปพี่ยอด เปิดเวปตั้งแต่เมื่อไหร่ ไม่รู้เลยอ่ะ ทำไม่ได้จะโทรไปถามนะ
ผมสาวกแอนดรอยด์ครับ
หนูกำลังเรียนเลยคะ xCode และก็ปวดตับกับมันจริงๆ
โปรเจค หนูก้ต้องทำ เกมส์บนไอโฟนนี่แระคะ แต่จะบอกว่า
แงงง เอ่อเร่อ