#1 Xcode

Xcode เป็นเครื่องมือฟรีที่ใช้เขียนแอพสำหรับผลิตภัณฑ์ Apple ไม่ว่าจะเป็น iPhone, iPad, Mac, Watch, ... โดยใช้ภาษา Objective-C และ Swift ในการพัฒนา

การติดตั้ง

เปิด App Store ในเครื่องแมคและค้นหา Xcode จากนั้นกดติดตั้ง

เมื่อติดตั้งเสร็จแล้วตัวโปรแกรมจะแสดงหน้าต่างให้ติดตั้ง Component เพิ่มเติม สามารถเลือกได้ว่าเราต้องการพัฒนาแอพลงใน Device ไหน แนะนำให้เลือก Platform Support สำหรับ iOS

Platform Support สำหรับ iOS ตัว Xcode จะดาวโหลด Simulator เพื่อจำลองแอพที่เราเขียนบน iPhone

Platform Support สำหรับ Predictive Code Completion Model เป็น AI คาดเดาโค้ดที่เราจะเขียนล่วงหน้า จะเลือกติดตั้งหรือไม่ก็ได้

จากนั้นกด Download & Install ตัว Xcode จะมีเด้งหน้าต่างเล็กๆ ว่ากำลังดาวโหลดเพื่อติดตั้ง Components ให้เรารอจนเสร็จ

สร้างโปรเจคใน Xcode

หน้าต่างแรกเมื่อเราเปิด Xcode ขึ้นมาทุกครั้ง ให้กดที่ปุ่ม Create New Project...

เราจะเลือก Platform iOS และเลือก App ในหัวข้อ Application และ Next

Xcode จะให้เราสร้างชื่อแอพที่เราต้องการ แนะนำว่าให้เป็นภาษาอังกฤษและขึ้นต้นด้วยตัวพิมพ์ใหญ่ไม่มีอักขระพิเศษและไม่เว้นวรรค

💡

ในวงเหล่านักพัฒนาหรือ Developer เราจะตั้งชื่อตามกฏเป็นส่วนใหญ่ กฏหลักที่นิยมใช้จะเป็น Camel case และ Snake case แต่หากใช้ภาษาโปรแกรม Swift ในการพัฒนาก็ควรใช้ Camel case

ตั้งชื่อรวมถึง options ตามข้างบนก่อนก็ได้นะ

Team ให้เราเลือกตัวเราเองที่ลงท้าย (Personal Team) หากไม่มีให้เลือก ลองปิด Xcode และไปลงชื่อเข้าใช้งานบัญชีที่แอพ Settings ของเครื่อง Mac ก่อน และเปิด Xcode จากนั้นเริ่มใหม่ตามข้างบนได้เลย

Organization Identifier เป็นชื่อทางการของแอพที่เราต้องใช้ติดต่อกับแอพอื่นๆ หรือเซอวิสอื่นๆ นิยมเอาชื่อเว็บไซต์ของเราแล้วนำมากลับหลังมาตั้ง เช่น www.google.com อาจเป็น com.google.app เป็นต้น

กด Next และเลือกที่เก็บโปรเจค และกดปุ่ม Create ได้เลย

ทำความรู้จัก

ตั้งแต่หมายเลข 1 - 4 เรียกว่า Navigator area เป็นส่วนแสดงโครงสร้างโปรเจครวมถึงแสดงกระบวนการทำงานของแอพและอื่นๆ
1 โครงสร้างไฟล์ในโปรเจค
2 ค้นหาโค้ดที่เราได้เขียนไว้ในโปรเจค
3 การทำงานของแอพขณะที่เรา Debug ไว้อยู่ ดีบัคเพื่อดูว่าเหตุการณ์ที่เกิดก่อนนั้นมีอะไรบ้าง รวมถึงดูข้อมูลของตัวแปรที่เราได้นิยามไว้เป็นต้น
4 แสดงข้อมูลของแอพที่เราได้ทำการ Build (เมื่อเรารันแอพเพื่อดูผลลัพธ์ที่เราได้เขียนโค้ดไปจะต้องบิวด์แอพก่อนเสมอ)

หมายเลย 5 - 9 เรียก Toolbar
5 หยุดการทำงานของแอพ
6 บิวด์แอพ หากบิวด์เสร็จให้รันหรือเริ่มการทำงานของแอพ
7 แอพหรือไลบรารี่เสริมหรือส่วนขยายที่เราต้องการจะรัน
8 เครื่องหรือ Device ที่ต้องการจะรัน
9 แสดงสถานะการบิวด์ของโปรเจค

10 Editor พื้นที่เขียนโค้ด เป็นหน้าต่างหลักของโปรเจค

11 Inspector area ใช้แสดงข้อมูลและแก้ไขข้อมูลสิ่งที่เราได้เลือกอยู่ไม่ว่าจะเป็นไฟล์หรือคลาสหรือ objects เป็นต้น

12 Debug area พื้นที่สำหรับจัดการแอพขณะที่แอพรันอยู่ หรือใช้ดูข้อมูลของออบเจ็คต่างๆขณะแอพทำการรันเป็นต้น

Assets

เป็นที่เก็บสื่อของโปรเจครองรับทั้งรูปภาพ, สี, Texture, ...

การเก็บภาพ

คลิกเมาส์ขวาเลือก New Image Set

Xcode จะให้เราใส่ภาพทั้งหมด 3 ขนาด หากเรามีภาพไฟล์เดียว ให้ทดลองเข้าเว็บที่ resize รูปให้เป็น 3 ขนาดสำหรับ iOS อาจจะเป็นเว็บ hotpot.ai ตามภาพด้านล่าง

ใส่รูปของเราเข้าไป และกด Convert เพื่อดาวโหลดรูปที่ถูกปรับขนาดมาให้แล้วมีทั้งหมด 3 รูป

แนะนำให้ตั้งชื่อไฟล์ทั้งสามภาพก่อนนำเข้าโปรเจค อาจเป็น
ic-cover-image@1x.png
ic-cover-image@2x.png
ic-cover-image@3x.png

การใช้งานภาพ

เข้าไปที่ไฟล์ Storyboard ที่ชื่อ Main และคลิกที่ปุ่มเพิ่ม Objects ตามภาพข้างล่าง และเพิ่มตัว Image View โดยการลากไปไว้ที่พื้นที่สีขาว

ที่ Inspector area ไปที่คอลัมน์ที่ชื่อ Attributes Inspector
ในส่วนของ Image ให้เลือกภาพที่เราได้เอามาใส่ในโปรเจค

การเก็บค่าสี

ใน Assets ให้เราคลิกเมาส์ขวาในพื้นที่และเลือก New Color Set
Xcode จะให้เราเซ็ทค่าสีได้แก่ Any Appearance ที่ถูกใช้ใน Light mode และ Dark ในมือถือที่ปรับเป็นโหมด Dark

ในพื้นที่ Inspector ให้ไปที่ Attributes Inspector ในส่วนของหัวข้อ Color ให้เราปรับค่าสีที่ต้องการ