ลองคิดดู หลังจากจบบทช่วยสอนนี้คุณสามารถบอกเพื่อนของคุณได้ว่าคุณสร้างแอพ เพียงแค่พูด

ในบทช่วยสอนนี้ฉันจะแนะนำคุณตลอดกระบวนการสร้างแอปพลิเคชั่น iOS ฉันจะสอนคุณเกี่ยวกับทฤษฎีและวิธีการที่อยู่เบื้องหลังแนวคิดบางอย่างที่เกี่ยวข้องกับการพัฒนาแอปพลิเคชันที่เราดำเนินการแทนที่จะบอกให้คุณทำอะไรและหวังว่าคุณจะเข้าใจ ก่อนอื่นเรามาเริ่มด้วยภูมิหลังกันบ้าง:

Swift เป็นภาษาการเขียนโปรแกรมล่าสุดและยิ่งใหญ่ที่สุดของ Apple ย้อนกลับไปในปี 1985 เมื่อสตีฟจ็อบส์ก่อตั้งคอมพิวเตอร์ NeXT หลังจากถูกกล้ามเนื้อจาก Apple (บางคนบอกว่า) เขาเริ่มพัฒนากรอบการทำงานบางอย่างสำหรับคอมพิวเตอร์ของเขาในภาษาที่เรียกว่า Objective-C วัตถุประสงค์ -C สร้างขึ้นในช่วงต้นทศวรรษ 1980 โดยแบรดค็อกซ์และทอมเลิฟ แต่ต่อมาได้รับใบอนุญาตจาก NeXT ในที่สุดเฟรมเวิร์กเหล่านี้ได้แปรสภาพเป็นชุดย่อยของ Objective-C ที่เรียกว่า Cocoa Cocoa ถูกนำมาใช้เป็นเวลานานในการพัฒนาแอปพลิเคชั่น Macintosh แต่เมื่อ Apple เปิด iOS ให้กับบุคคลที่สามที่ไม่ใช่เว็บแอพที่ใช้ iOS 2.0 พวกเขามีนักพัฒนาใช้ Objective-C และ Cocoa Touch รุ่น Cocoa แอพ iOS

Objective-C มีการใช้งานจนถึง iOS 8 ด้วยการเปิดตัว iOS 8 นั้น Apple ยังเปิดตัว Swift ใหม่ล่าสุดของพวกเขาตามที่คุณอาจจะรู้ อย่างไรก็ตาม Objective-C ยังคงสามารถใช้ในการพัฒนาแอพ iOS ได้ในขณะนี้ ในความเป็นจริงฉันยังคงใช้ Objective-C เป็นหลักเนื่องจากมีไลบรารีจำนวนมากที่เขียนอยู่ในนั้นและ Objective-C เข้ากันได้กับอุปกรณ์รุ่นเก่า Swift แนะนำคุณสมบัติใหม่และฟังก์ชั่นใหม่ที่ยอดเยี่ยม แต่สำหรับจุดประสงค์ของบทช่วยสอนนี้เราจะทำการ มาก ดำน้ำตื้นลงไป มาเริ่มกันเลย.

วัสดุ:

ขั้นตอนที่ 1: ดาวน์โหลด Xcode

Xcode เป็นชื่อของ Apple Integrated Development Environment (IDE) Xcode สามารถใช้ในการพัฒนาทั้งแอปพลิเคชัน iOS และ Macintosh Apple ให้ซอฟต์แวร์นี้ฟรี แต่ผู้พัฒนาต้องจ่าย $ 100 ต่อปีเพื่อทดสอบแอปของพวกเขาบนอุปกรณ์ทางกายภาพไม่ใช่เครื่องจำลองและเผยแพร่แอปไปยัง App Store นอกจากนี้ Apple ยังลดยอดขายแอพที่ต้องชำระทั้งหมดประมาณ 30% ฉันขอแนะนำให้อ่านเล็กน้อยเกี่ยวกับ Xcode ก่อนที่จะดาวน์โหลด: ลิงค์ Xcode

วิธีที่ดีที่สุดในการรับ Xcode คือดาวน์โหลดจาก Mac app store นี่คือลิงค์ น่าเสียดายที่ Xcode เป็นโปรแกรมที่ค่อนข้างใหญ่ดังนั้นคุณควรเตรียมตัวให้พร้อมรอสักครู่! คุณสามารถอ่านบทช่วยสอนเพื่อให้แน่ใจว่าคุณเข้าใจทุกอย่างในขณะที่กำลังดาวน์โหลด

ขั้นตอนที่ 2: เริ่มกันเลย!

คลิกที่ไอคอน Xcode คุณจะได้รับการนำเสนอพร้อมหน้าต่างดังที่แสดงในภาพแรก เลือก "สร้างโครงการ Xcode ใหม่"

ตรวจสอบให้แน่ใจว่าได้เลือกแอปพลิเคชันมุมมองเดี่ยวภายใต้ iOS แล้วคลิกถัดไป (ภาพที่ 2)

สำหรับชื่อผลิตภัณฑ์ให้ป้อน "Swift iPhone App" (รูปภาพ 3)

สำหรับชื่อองค์กรเพียงเขียนชื่อของคุณ ไม่ต้องกังวลกับตัวระบุกลุ่ม สำหรับการส่งหรือแจกจ่ายแอพของคุณซึ่งเราไม่ต้องกังวล (ภาพที่ 3)

จากดรอปดาวน์ภาษาให้เลือก "Swift" อย่างที่คุณเห็น Objective-C ยังคงเป็นตัวเลือก (ภาพที่ 3)

ภายใต้อุปกรณ์แบบหล่นลงเลือก iPhone (ภาพที่ 4)

คลิกถัดไปและเลือกตำแหน่งที่ตั้งเพื่อบันทึกโฟลเดอร์โครงการ (ภาพที่ 5)

เมื่อทำสิ่งนี้ทั้งหมดแล้วคุณจะเห็นหน้าจอที่แสดงในรูปที่ 6

ในแถบเครื่องมือด้านบนทางซ้ายคุณจะเห็นคำว่า "แอพ Swift iPhone" ถัดจากนั้นควรมีข้อความเพิ่มเติมว่า "อุปกรณ์ iOS" หรืออุปกรณ์จริงเช่น iPhone 6, iPhone 5 ฯลฯ คลิกที่ดรอปดาวน์นี้แล้วเลือก iPhone 6 การเลือก "อุปกรณ์ iOS" จะไม่ทำงานสำหรับคุณ (นั่นคือวิธีที่คุณอัปโหลดแอปไปยังอุปกรณ์จริงสำหรับการทดสอบ) แต่ตัวจำลองจะ

คลิกปุ่มเล่นที่มุมบนซ้าย หากทุกอย่างเป็นไปด้วยดีตัวจำลอง iOS จะปรากฏขึ้นและแสดง ………….. หน้าจอว่างเปล่า ด้วยแถบสถานะ ชนิดต่อต้านภูมิอากาศ (ภาพที่ 7) แต่ไม่ต้องห่วงเราจะไปถึงที่นั่น ยินดีด้วย! คุณสร้างแอพ iOS แรกของคุณแล้ว!

ขั้นตอนที่ 3: การทำงานกับ UI

ในบานหน้าต่างด้านซ้ายคุณจะเห็นรายการไฟล์ เลือกหนึ่งที่ระบุว่า Main.Storyboard (ภาพที่ 1)

ย้อนกลับไปนานมากแล้วการสร้าง UI (ส่วนต่อประสานผู้ใช้) โดยใช้รหัสเป็นบรรทัดฐาน แต่ตอนนี้ Apple ทำให้การออกแบบทั้งสองเป็นเรื่องง่าย และ ตั้งโปรแกรมแอพของคุณจาก Xcode ไฟล์สตอรีบอร์ดประกอบด้วย UI ของแอพของคุณ คุณเพิ่มองค์ประกอบ UI เข้าไปในสิ่งที่เรียกว่า UIViews ซึ่งจัดการองค์ประกอบ UI เหล่านี้ จากนั้นคุณสามารถเชื่อมต่อองค์ประกอบ UI กับรหัส Swift ที่แท้จริงเพื่อให้สามารถโต้ตอบได้ ในขณะที่นักพัฒนาแอพส่วนใหญ่กังวลเกี่ยวกับคุณสมบัติของแอพก่อนออกแบบ UI ที่ใช้งานได้เพื่อประโยชน์ในการเรียนรู้เราจะทำในสิ่งที่ตรงกันข้าม ก่อนอื่นเราจะตั้งค่า UI

ที่มุมล่างขวาของหน้าจอคุณจะเห็นกล่องข้อความ ด้านบนนี้จะเป็นองค์ประกอบ UI ที่เรียกว่าวัตถุ ป้อนคำค้นหา "ป้ายกำกับ" แล้วกด Enter คุณควรเห็นวัตถุ UILabel ปรากฏขึ้น UILabels ใช้เพื่อแสดงข้อความ (ภาพที่ 2)

ลากฉลากจากช่องค้นหาไปที่มุมซ้ายบนของกล่องสีขาวที่แสดงบนหน้าจอ (ภาพที่ 3)

ดึงขอบเขตด้านขวาของฉลากโดยใช้จุดสีขาวเล็ก ๆ ล้อมรอบฉลากไปทางด้านขวาของหน้าจอ (ภาพที่ 4)

ตอนนี้ค้นหา "ปุ่ม" แบบเดียวกับที่คุณทำป้ายกำกับ ลากผลลัพธ์แรกที่ระบุว่า "ปุ่ม" เพื่ออยู่ใต้ป้ายกำกับ ไม่จำเป็นต้องยืดขอบเขตของปุ่ม (ภาพ 5 + 6)

สุดท้ายสำหรับขั้นตอนนี้ให้ดูที่ภาพ 7. ดูว่าโน้ตอยู่ที่ไหนและคลิกที่ หากคุณมองไม่เห็นให้อ่านสิ่งนี้: ในแถบเครื่องมือด้านบนใกล้มุมขวาคุณควรเห็นบางสิ่งที่ดูเหมือนบรรทัดข้อความที่เลือก ถัดไปเป็นปุ่มที่มีวงกลมสองวงซ้อนทับกัน คลิกที่วงกลมที่ทับซ้อนกัน

ด้วยการทำเช่นนี้อีกหน้าต่างที่อยู่ติดกันกับกระดานเรื่องราวควรจะปรากฏขึ้น เมื่อคลิกปุ่มดังกล่าวจะเป็นการแสดงตัวช่วยแก้ไข ตัวแก้ไขผู้ช่วยถูกใช้เพื่อเปิดสองไฟล์ในคราวเดียวและเด็กชายใช้ประโยชน์ได้โดยเฉพาะเมื่อเชื่อมโยงองค์ประกอบของ UI เข้ากับโค้ด ผู้ช่วยบรรณาธิการของคุณจะมีพื้นหลังสีขาว แต่ฉันเปลี่ยนของฉันเป็นโทนสีที่เย็นกว่าเพียงเพื่อให้เป็นไปตามนั้น

ไฟล์ที่เปิดในตัวแก้ไขผู้ช่วยเรียกว่าตัวควบคุมมุมมอง ตัวควบคุมมุมมองเป็นไฟล์ที่ควบคุมมุมมองในแอปของคุณได้เป็นอย่างดี แต่ละมุมมองเป็นหน้าต่างแยกต่างหากในแอพ ตัวอย่างเช่นในแอปข้อความหน้าจอเริ่มต้นพร้อมการแชททั้งหมดของคุณคือมุมมองเดียวจากนั้นเมื่อคุณคลิกที่ชื่อระบบจะพาคุณไปยังมุมมองอื่นที่แสดงข้อความทั้งหมดของคุณกับบุคคลนั้น

ขั้นตอนที่ 4: ขอมัน!

คลิกเมาส์ซ้ายแล้วลากหรือควบคุมคลิกและลากบนฉลากไปยังตำแหน่งที่แสดงในภาพ 1. ตรวจสอบให้แน่ใจว่าเส้นสีน้ำเงินอยู่ในตำแหน่งที่ถูกต้องก่อนปล่อย ใช่ไหม? ถ้าเป็นเช่นนั้นปล่อยให้ไป

ตอนนี้คุณควรได้รับการนำเสนอพร้อมกล่องโต้ตอบ พิมพ์ "ป้ายกำกับ" ตรงที่ระบุชื่อและคลิกเชื่อมต่อ (ภาพที่ 2)

สิ่งที่คุณทำที่นี่คือการสร้าง IBOutlet สิ่งนี้จะบอกคอมไพเลอร์ว่าคุณต้องการเข้าถึงองค์ประกอบ UI นี้และคุณจะอ้างอิงว่าเป็น "ป้ายกำกับ" จากนั้นคุณใช้คำว่า "label" เพื่ออ้างอิงในภายหลังเมื่อเขียนโปรแกรมจริง

ทำรูทีนการคลิกและลากเดียวกันด้วยปุ่มยกเว้นเวลานี้ให้สังเกตตำแหน่งที่แตกต่างเพื่อลากไปยังตำแหน่งดังที่แสดงในภาพ 3. ตำแหน่งไม่ได้ จริงๆ มีความสำคัญมาก แต่มันก็ดูดีกว่าถ้าคุณทำแบบนี้ ปล่อยให้ไปและกล่องโต้ตอบอื่นควรปรากฏขึ้น

ก่อนที่จะเพิ่มชื่อภายใต้แอ็คชันดร็อปดาวน์เลือกแอ็คชัน ในขณะที่ช่องให้คุณเข้าถึงองค์ประกอบ UI (เปลี่ยนสีข้อความ, ข้อความ, พื้นหลังและอื่น ๆ) การดำเนินการเป็นวิธีการที่คุณติดต่อกับองค์ประกอบแบบโต้ตอบเช่นปุ่มในรหัส โดยพื้นฐานแล้วจะมีบริดจ์แบบอินเตอร์แอคทีฟจากส่วนต่อประสานผู้ใช้ไปยังโปรแกรม การกระทำภายในคุณสามารถบอกคอมไพเลอร์ว่าคุณต้องการทำบางสิ่ง ตัวอย่างเช่นเมื่อกดปุ่มคุณสามารถบอกให้คอมไพเลอร์เปลี่ยนสีพื้นหลังเป็นสีน้ำเงิน แต่เมื่อแตะปุ่มที่แตกต่างเปลี่ยนเป็นสีแดง สำหรับชื่อกดปุ่มกดแล้วคลิกเชื่อมต่อ (รูปภาพ 4 + 5)

สังเกตว่าฉันใช้อักษรตัวใหญ่ตัวใหญ่ในปุ่มกดเป็นตัวอักษรและคำที่สองเป็นตัวพิมพ์ใหญ่ได้อย่างไร สิ่งนี้เรียกว่ากรณีอูฐกรณี Camel ถูกใช้เนื่องจาก white space (อักขระ space) ไม่ได้รับอนุญาตในหลาย ๆ ด้านของการเขียนโปรแกรม กรณี Camel เป็นวิธีหนึ่งในการแยกความแตกต่างระหว่างคำต่าง ๆ ได้อย่างง่ายดายเมื่อคุณไม่สามารถใช้ช่องว่างได้ อักษรตัวแรกไม่ได้เป็นตัวพิมพ์ใหญ่เสมอและคำที่ตามมาจะเป็นตัวพิมพ์ใหญ่ ตัวอย่างเช่น thisIsCamelCase อย่าสับสนกับคลาส การเรียนการสอน เสมอ ใช้อักษรตัวแรกและตัวอักษรใด ๆ ที่ตามมาเป็นตัวพิมพ์ใหญ่ ตัวอย่างเช่น ViewController เป็นชื่อคลาสเช่นเดียวกับ UILabel และ IBOutlet

ตกลง. ให้เราเดินหน้าต่อไปเรื่อย ๆ การคลิกการเชื่อมต่อควรแทรกรหัสต่อไปนี้ลงในโปรแกรมของคุณ:

@IBAction ปุ่ม func กด (ผู้ส่ง: AnyObject) {

}

ขั้นตอนที่ 5: เริ่มการเข้ารหัส!

ภายในวงเล็บปีกกาเหล่านั้นคือที่ที่คุณจะวางรหัสของคุณ ทุกครั้งที่มีการคลิกปุ่มรหัสภายในวงเล็บปีกกาเหล่านั้นจะถูกดำเนินการ

กดปุ่มย้อนกลับสองสามครั้งหลังจากวงเล็บปีกกาแรกใน IBAction เพื่อให้คุณมีที่ว่าง จากนั้นพิมพ์หรือคัดลอกและวางรหัสต่อไปนี้:

self.label.text = "Swift is Awesome!"

หากคุณพิมพ์คุณอาจสังเกตเห็นว่าคุณไปตามหน้าต่างที่โผล่ขึ้นมาใต้ข้อความพร้อมคำแนะนำ สิ่งนี้เรียกว่าการเติมข้อความอัตโนมัติและช่วยประหยัดเวลาในการโหลดเรือเมื่อตั้งโปรแกรม กดสี่เหลี่ยมที่มุมบนซ้ายถัดจากปุ่มเล่นเพื่อหยุดการสร้างแอพปัจจุบัน (อันที่ว่างเปล่า) ที่เราใช้งานอยู่ จากนั้นกดปุ่มเล่นเพื่อสร้างและเรียกใช้แอปใหม่ของคุณ เมื่อเครื่องมือจำลอง iOS ปรากฏขึ้นและโหลดแล้วให้ลองแตะปุ่ม ข้อความควรเปลี่ยนจาก "ป้ายกำกับ" เก่าที่น่าเบื่อเป็น "Swift is Awesome!" ที่นั่นคุณมีมัน! ทีนี้ลองดูว่ารหัสกำลังทำอะไรอยู่

สิ่งที่เรียกว่าวัตถุเป็นพื้นฐานของภาษาโปรแกรมคอมพิวเตอร์ส่วนใหญ่ ดังนั้นภาษาเหล่านี้จึงขนานนามภาษาการเขียนโปรแกรมเชิงวัตถุ C #, C ++ Swift, Objective-C และ Python เป็นภาษาเชิงวัตถุทั้งหมดรวมถึงภาษาอื่น ๆ อีกหลายร้อยภาษา วัตถุมีสิ่งที่เรียกว่าคุณสมบัติ คุณสมบัตินั้นเป็นตัวแปรที่เก็บข้อมูล ตัวอย่างเช่นคุณสมบัติข้อความของป้ายกำกับของคุณจะเก็บข้อความไว้ วัตถุฉลากมีคุณสมบัติอื่น ๆ อีกมากมายเช่น backgroundColor และเฟรม คุณสามารถดูบางส่วนได้โดยพิมพ์ self.label จากนั้นใช้ปุ่มลูกศรเพื่อเลื่อนดูรายการเติมข้อความอัตโนมัติ คุณสมบัติถูกเข้าถึงโดยใช้เครื่องหมายจุด วัตถุตัวเองมีฉลากคุณสมบัติซึ่งมีคุณสมบัติย่อยอื่น ๆ อีกมากมายซึ่งจะมีคุณสมบัติย่อยบางส่วนและอื่น ๆ ตัวอย่างเช่นคุณสมบัติเฟรมของวัตถุฉลากควบคุมขนาดของฉลาก คุณสามารถรับหรือตั้งค่าความสูงของฉลากได้โดยพิมพ์ self.label.frame.size.height เห็นได้ชัดว่ามันคือ ดังนั้นดังนั้นดังนั้น ซับซ้อนกว่านี้มาก แต่นั่นเป็นบทสรุปพื้นฐาน

เมื่อคุณพิมพ์: self.label.text = "Swift is Awesome!" คุณกำลังอัพเดตคุณสมบัติข้อความเป็นสตริง ลำดับ "" นั้นย่อมาจากการสร้างวัตถุสตริงซึ่งคุณกำหนดเป็นคุณสมบัติข้อความของป้ายกำกับของคุณ คุณสามารถใส่ข้อความอะไรก็ได้ที่คุณต้องการในเครื่องหมายคำพูด

สิ่งสำคัญอีกอย่างในไฟล์มุมมองคอนโทรลเลอร์คือ:

แทนที่ func viewDidLoad () {

super.viewDidLoad ()

// ทำการตั้งค่าเพิ่มเติมหลังจากโหลดมุมมองโดยทั่วไปจากปลายปากกา

}

ภายในวงเล็บปีกกาเหล่านี้คุณสามารถเพิ่มรหัสที่เรียกใช้งานทันทีที่มุมมองโหลดดังนั้น viewDidLoad ตอนนี้ฉันคิดว่าเพียงพอแล้ว

ขั้นตอนที่ 6: คุณทำเสร็จแล้ว!

ที่นั่นคุณมีมัน แอปพลิเคชั่น iOS แรกของคุณ ตอนนี้ไปข้างหน้าและคุยโวเกี่ยวกับมัน!

จากที่นี่ฉันขอแนะนำให้คุณเล่นใน Xcode และรับรู้ถึงสถานที่ ลองอัปเดตข้อความของฉลากด้านใน viewDidLoad และดูว่าเกิดอะไรขึ้น ดูว่าคุณสามารถหาวิธีเปลี่ยนสีข้อความโดยทางโปรแกรมได้หรือไม่

ขอบคุณที่อ่าน! ฉันหวังว่าคุณจะสนุกกับคำแนะนำนี้และเรียนรู้บางสิ่งในกระบวนการ กรุณาโปรดกรุณาชอบและแสดงความคิดเห็นเพื่อแสดงการสนับสนุนของคุณ หากคุณมีคำถามใด ๆ โพสต์ไว้ในความคิดเห็นและฉันจะพยายามอย่างดีที่สุดเพื่อตอบคำถามเหล่านี้ หากต้องการตรวจสอบบางส่วนของโครงการที่ฉันทำงานอยู่คุณสามารถเยี่ยมชมเว็บไซต์ของฉัน โอ้และยังไงก็ตามฉันแค่ 15. ข้อแก้ตัวของคุณคืออะไร?

แม้ว่าบทช่วยสอนนี้อยู่ใน Swift ฉันขอแนะนำให้คุณเรียนรู้ Objective-C ก่อนถ้าคุณต้องการเข้าโปรแกรม ในความเป็นจริงคุณจำเป็นต้องรู้วัตถุประสงค์ - C หากคุณกำลังพัฒนา iOS Swift ยังคงเป็นภาษาใหม่ดังนั้นที่เก็บที่ดีที่สุดใน GitHub และที่อื่น ๆ ไม่ได้เขียนใน Swift Swift กำหนดเป้าหมายเฉพาะ iOS 8 เท่านั้นซึ่งไม่รวมอุปกรณ์ iOS ส่วนสำคัญในการดาวน์โหลดหรือเรียกใช้แอพของคุณ ในขณะที่เราทำสิ่งเล็ก ๆ น้อย ๆ จริง ๆ เราไม่ได้ขีดข่วนแม้แต่พื้นผิวของการพัฒนาแอพ iOS ในขณะที่ไม่จำเป็นว่า ซับซ้อน มีอะไรมากมายเหลือเกิน สิ่งต่าง ๆ มากมายและมากมาย

สำหรับสิ่งอื่น ๆ Youtube มีโปรแกรมเมอร์ที่มีความสามารถอย่างไม่น่าเชื่อจำนวนมากที่เผยแพร่แบบฝึกหัดที่ยอดเยี่ยมฟรีดังนั้นจึงอาจคุ้มค่ากับเวลาที่คุณจะลองอ่าน ทรัพยากรที่ยอดเยี่ยมอีกอย่างคือ www.raywenderlich.com ซึ่งมีแบบฝึกหัดที่ยอดเยี่ยมสำหรับผู้เริ่มต้นและโปรแกรมเมอร์ขั้นสูง