[Xcode] การทำ File pattern สำหรับการใช้ในโปรเจคและองค์กรบน Xcode

โดยปกติแล้วเวลาเราทำโปรเจคหรืองานเรามักจะมี pattern ของ file ต่าง ๆ เป็นพื้นฐานเพื่อช่วยทำให้ code เป็นสัดส่วน ระเบียบ รวมถึงทำให้เพื่อนในทีมอ่านเข้าใจได้ง่ายขึ้น ซึ่งในแต่ละทีมหรือโปรเจคอาจมี pattern ไม่เหมือนกัน แต่เมื่อเราทำเป็น pattern แล้วนั้นหมายความว่า ในแต่ละหน้าหรือแต่ละไฟล์เราอาจต้องเขียน function ซ้ำ ๆ เดิม ๆ หรือ สร้างตัวแปรเดิม ๆ หรือแม้กระทั่ง UI ที่อาจจะมี Styleguide อยู่แล้ว ซึ่งก็คงจะดีกว่าถ้ามีอะไรสักอย่างที่ช่วยให้ชีวิตดีขึ้น ช่วยในการ generate code บางส่วน ซึ่ง ผมจะขอแบ่งเป็น 2 part นะครับ โดย part แรก จะเป็นการสร้าง category และ part ที่สองจะเป็นการสร้าง source code นะครับ

ขั้นตอนแรก เปิด terminal ขึ้นมาแล้วเข้าไปยัง path นี้ Library/Developer/Xcode โดยใช้คำสั่ง

cd Library/Developer/Xcode

ขั้นตอนที่สอง สร้าง folder ที่ชื่อว่า Templates โดยใช้คำสั่ง

mkdir Templates

ขั้นตอนที่สาม เข้าไปยัง folder Templates ที่สร้างไว้เมื่อสักครู่นี้ โดยใช้คำสั่ง

cd Templates

แล้วสร้าง folder ที่ชื่อว่า File Templates โดยใช้คำสั่ง

mkdir File\ Templates

ขั้นตอนที่สี่ เข้าไปยัง folder File Templates ที่สร้างไว้เมื่อครู่นี้ โดยใช้คำสั่ง

cd File\ Templates

แล้วทำการสร้าง folder โดยชื่อนี้สามารถต้องได้เองเลย โดยจะเป็นชื่อที่ขึ้นตาม category กรอบสีแดงในรูปด้านล่างโดยใช้คำสั่ง

mkdir <file_category_name>

ผลลัพท์ของการสร้าง folder <file_category_name>

ขั้นตอนที่ 5 เข้าไปยัง folder ที่สร้างไว้เมื่อสักครู่นี้ โดยใช้คำสั่ง

cd <file_category_name>

และสร้าง folder สำหรับ file pattern โดยสามารถตั้งชื่อได้เองเลย และจะต้องลงท้ายด้วย .xctemplate โดยชื่อนี้จะแยกตาม type ของ file pattern ตามกรอบสีแดงในรูปด้านล่างโดยใช้คำสั่ง

mkdir <file_pattern_name>.xctemplate

จากนั้นเข้าไปใน folder ที่สร้างไว้เมื่อสักครู่ โดยใช้คำสั่ง

cd <file_pattern_name>.xctemplate

และทำการเปิดใน finder รอได้เลยโดยใช้คำสั่ง

open .

ผลลัพท์ของการสร้าง folder <file_pattern_name>.xctemplate

ผมขออธิบาย use case ของผมซึ่งก็คือต้องการสร้าง View controller ที่มีชื่อ class ตามที่ผมตั้งไว้ และมี pragma mark User Interaction และ Helpers และมี function ที่ชื่อว่า setup เพราะผมเบื่อที่ต้องมาพิมพ์แบบนี้ทุกรอบ ถ้านี่คือ pattern ที่ผมใช้ประจำ 😂 ต่อมาจะเป็นการ Set input field สำหรับการนำไปใช้ต่อ

ขั้นตอนที่ 6 ไปหา icon สำหรับ file pattern ของเรามา เอามา 2 ขนาดนะครับ ไปเลือกมาแบบหล่อเท่ได้เลย และตั้งชื่อว่า TemplateIcon.png และ TemplateIcon@2x.png และลากไปใส่ในโฟล์เดอร์ที่เปิดทิ้งไว้ได้เลย

ขั้นตอนที่ 7 สร้างไฟล์ config สำหรับ pattern โดยทำการสร้างไฟล์ที่ชื่อว่า TemplateInfo.plist และเปิดขึ้นมา โดยเบื้องต้นสามารถ copy code ด้านล่างไปแปะก่อนได้เลยครับ

โดยเราจะมา focus ในส่วนของ dictionary ที่อยู่ใน array ซึ่งในส่วนนี้จะเป็นการ config เกี่ยวกับรายละเอียดของ pattern เช่น อาจจะเป็นชื่อของ file นั้น โดย dictionary แต่ละตัวแทนแต่ละ field ในรูปด้านล่าง

ผลลัพธ์ของการ config ไฟล์ TemplateInfo.plist

โดยตามรูปด้านบนจะสังเกตว่าจะรับ field เดียวซึ่งก็จะตรงกับตัว TemplateInfo.plist ซึ่งมี dictionary 1 ตัวเช่นกัน โดย dictionary แต่ละตัวจะบอกถึงคุณสมบัติในแต่ละ field โดยผมจะอธิบายทีละบรรทัดเลย

ซึ่งตอนนี้ลองบันทึกไฟล์ TemplateInfo.plist แล้วเปิด xcode กด command+n และลองหาดูครับ จะพบกับ pattern category ที่สร้างไว้ขึ้นมาแล้ว แต่เรายังสร้างไม่ได้นะครับ เพราะเรายังไม่มี source ให้สร้างเลย

และนี่คือทั้งหมดของ part แรกครับ 🥳 เป็นอย่างไรกันบ้างครับสำหรับ part แรก ไม่ยากเลยใช่ไหมครับ มั่นใจเลยว่าถ้าทำครบทุกขึ้นตอนจริงๆ ต้องได้กรอบสีแดง ๆ ตามรูปข้างบนอย่างแน่นอน

โดย folder hierarchy ทั้งหมดที่ทำมาจะต้องเป็นแบบนี้นะครับ

- Templates
    |
    |- File Templates
            |
            |- <file_category_name>
                    |
                    |- <file_pattern_name>.xctemplate
                           |
                           |- TemplateIcon.png
                           |- TemplateIcon@2x.png
                           |- TemplateInfo.plist

ส่วน part ที่สอง เราจะเป็นในส่วนของการเขียน code เพื่อที่จะทำเป็น pattern ในการนำไปใช้ต่อไป โดยจะทำให้เห็นภาพว่าสรุปแล้วเราจะใช้งาน file pattern ให้มีประโยชน์สูงสุดได้อย่างไรบ้าง

แล้วเจอกันใน blog ต่อไปนะครับ ซึ่งจะเป็น Part สอง ส่วนจะออกตอนไหนนั้น คนเขียนก็ยังไม่รู้เลยครับ แต่ไม่นานเกินรอแน่นอนครับ เอาไปเป็นว่าแล้วเจอกันครับ Happy coding… 😉

Part 1 Example: https://github.com/intersignature/FilePatternTutorial

Part 2: Coming soon… 🤣