Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,036

HOME > Mobile > [iOS/iPhone] Tutorials - สอนเขียน iPhone App ฟรี เขียน iPad App เรียน iPhone เขียนโปรแกรม iPhone > เริ่มต้นการสร้าง Project ของ iPhone และ iPad บน Xcode การทดสอบ Run บน iOS Simulator



Clound SSD Virtual Server

เริ่มต้นการสร้าง Project ของ iPhone และ iPad บน Xcode การทดสอบ Run บน iOS Simulator

เริ่มต้นการสร้าง Project ของ iPhone และ iPad บน Xcode การทดสอบ Run บน iOS Simulator หลังจากที่เราได้เตรียมพร้อมทั้งการมีเครื่อง Mac และ ติดตั้งโปรแกรม Xcode เรียบร้อยแล้ว บทความนี้จะเริ่มต้นจริงกับ Xcode การเริ่มสร้าง Project ของ iOS ที่จะเขียนโปรแกรมบน iPhone และ iPad พร้อมทั้งการสร้าง Application แสดงข้อความง่าย ๆ และการทดสอบรันโปรแกรมที่เราเขียนบน iOS Simulator ซึ่งเป็นโปรแกรมจำลองสภาพแวดล้อมของเครื่อง iPhone หรือ iPad ที่มาพร้อมกับ Tools ของ Xcode

ก่อนการเขียน App บน iOS จะอธิบายเพิ่มเติมเกี่ยวกับ iPhone และ iPad ว่าในการสร้าง Project Xcode นั้นเราจะต้องทำการเลือกว่าจะพัฒนา App สำหรับ iPhone หรือสำหรับ iPad หรือจะสร้าง Project ที่ครอบคลุมการทำงานได้ทั้ง 2 อุปกรณ์ ซึ่งในการเขียน App ให้รองรับทั้ง 2 ตัวนั้นจะต้องเขียนหน้าจอ Interface ทั้ง 2 แยกกันและทำออกเป็น 2 หน้าจอ ดูตัวอย่างข้างล่างเพื่อความเข้าใจ

เปิดโปรแกรม Xcode จาก Dock หรือเรียกจาก Applications -> Xcode

Xcode Create Project iPhone iPad

เลือก "Create a new xcode project" เพื่อเริ่มต้นการสร้าง Project

Xcode Create Project iPhone iPad

ในหน้าจอนี้จะเห็นว่า Xcode สามารถเขียนได้ทั้ง iOS (iPhone, iPad) และ OS X (โปรแกรมบนเครื่อง Mac)

ให้เราเลือก iOS -> Application -> Single View Application

โดยเราจะทดสอบสร้าง App แบบง่าย ๆ ที่มีหน้าจอเดียว

Xcode Create Project iPhone iPad

ขั้นตอนนี้นี้จะเป็นการกำหนดชื่อ Project และรายละเอียดอื่น ๆ ของ Project








Xcode Create Project iPhone iPad

จุดที่สำคัญ ในขั้นตอนนี้เราจะเห็นว่ามีให้เลือก Devices เราสามารถเลือกสำหรับ iPhone หรือ iPad หรือจะกำหนดเป็น Universal (ได้ทั้ง 2 รูปแบบ)

Xcode Create Project iPhone iPad

ขั้นตอนนี้จะเป็นการกำหนด Path ของ Project โดยผมเลือกจัดเก็บไว้ที่ Desktop

หลังจาก Create Project เรียบร้อยแล้ว เราจะพบกับหน้าจอของ Tools Xcode ดังรูป ซึ่งจะประกอบด้วยหลัก ๆ อยู่ 3 ส่วนคือ

Xcode Create Project iPhone iPad

1. Navigator View เป็นส่วนโครงสร้างของ Project ซึ่งจะประกอบด้วยหลาย ๆ ไฟล์ที่เกี่ยวข้องกัน
2. UI User Interface View เป็นส่วนหน้าจอในการออกแบบ User Interface ต่าง ๆ สำหรับการแสดงผล
3. Utilities View เป็นส่วนของโปรแกรมและเครื่องมือที่จะใช้ออกแบบ ปรับแต่งคุณสมบัติต่าง ๆ User Interface

สำหรับโครงสร้างของไฟล์ต่าง ๆ ผมจะขออธิบายในหัวข้อถัดไป แต่สิ่งที่เราจะเห็นและสังเกตุคือในโครงสร้างของไฟล์จะมีไฟล์ที่ชื่อว่า ViewController_iPhone.xib ซึ่งไฟล์นี้จะเป็น UI Interface สำหรับแสดงผลบน iPhone เราสามารถออกแบบ Desugn UI ได้จากไฟล์นี้

Xcode Create Project iPhone iPad

ภายใต้ ViewController_iPhone.xib เราจะได้หน้าจอว่าง ๆ ดังภาพ ภายใต้ Object ให้เราลาก Label ไปวางไว้ในหน้าจอ Design ของ iPhone

Xcode Create Project iPhone iPad

หลังจากได้ Label ให้คลิกที่ Label และปรับแต่งคุณสมบัติโดยคลิกที่ตำแหน่ง (Show Attribute inspector) เหมือนในรุปภาพประกอบ

Xcode Create Project iPhone iPad

จะเห็นว่าเราสามารถแก้ไขข้อความใน Label และปรับแต่งคุณสมบัติอื่น ๆ เช่น Size และ Color ของ Label








หลังจากที่เราลองสร้างข้อความบน Label แบบง่าย ๆ แล้ว เราจะมาทดสอบการรันโปรแกรมบน iPhone Simulator

Xcode Create Project iPhone iPad

จะเห็นว่าในส่วนของการรันโปรแกรมจะมีให้เลือก iOS Devices ว่าจะทดสอบบน Simulator สำหรับ iPhone หรือว่า iPad (ส่วน Version ของ iOS เราสามารถอัพเดดได้จาก App Store)

Xcode Create Project iPhone iPad

คลิกเลือก iPhone 6.0 Simulator สำหรับทดสอบ App บน iPhone

Xcode Create Project iPhone iPad

จากนั้นคลิกที่ปุ่ม Run หรือ Start

Xcode Create Project iPhone iPad

ในครั้งแรกโปรแกรมจะใช้การโหลดประมาณ 30-60 วินาที และจะแสดงผลลัพธ์ที่เราได้ออกแบบไว้ในหน้าจอ Design

ถ้าผลลัพธ์สามารถแสดงผลบน Simulator ได้ ก็แสดงว่าการติดตั้ง Xcode และการเขียนโปรแกรมบน iOS นั้นสมบูรณ์ เราสามารถที่จะเริ่มเขียนโปรแกรมอื่น ๆ ที่มีความซับซ้อนยิ่งขึ้นได้

เพิ่มเติม

Xcode Create Project iPhone iPad

การย่อโปรแกรม Xcode และ Simulator สามารถเรียกได้จากมุมล่างขวาของหน้าจอ

Xcode Create Project iPhone iPad

ใน Desktop จะเห็นชื่อโฟเดอร์ของ Project ของเรา

Xcode Create Project iPhone iPad

เมื่อคลิกเข้าไปก็จะพบกับไฟล์ของ Project และในการนำโปรเจคไปยังเครื่องอื่น ๆ ก็สามารถทำการ Copy ทั้งโฟเดอร์นี้ได้ในทันที

Xcode Create Project iPhone iPad

การเปิดโปรเจคเดิมสามารถเรียกจาก Recent ที่เราเคยเปิดไว้แล้ว หรือดับเบิ้ลคลิกที่ไฟล์ในโฟเดอร์ที่จัดเก็บไว้ได้เช่นเดียวกัน


.

   
Share


ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท


ลองใช้ค้นหาข้อมูล


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2012-10-07 19:12:52 / 2017-03-25 23:25:03
  Download : No files
 Sponsored Links / Related

 
รู้จักกับ Project แต่ล่ะตัวของ Xcode ที่ใช้ในการเขียน iOS บน iPhone และ iPad
Rating :


ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่