วิธีสร้าง App Clips สำหรับ iOS 14

ด้วยการถือกำเนิดของ iOS 14 เรามีโอกาสสร้างประสบการณ์ใหม่สำหรับผู้ใช้แอปพลิเคชันของเรา ฉันกำลังพูดถึง App Clips ซึ่งเป็นข้อความที่ตัดตอนมาจากเวอร์ชันเต็มของแอป ในฐานะหนึ่งในนักพัฒนาซอฟต์แวร์ใน Miquido ฉันต้องการแบ่งปันประสบการณ์ของฉันในการสร้างพวกเขา

เราจะครอบคลุมสามหัวข้อ – ประการแรก การเตรียมโครงการ ประการที่สอง – วิธีสร้าง App Clip และสุดท้าย ฉันจะพูดถึงบางสิ่งเกี่ยวกับการทดสอบและการแจกจ่าย

การจัดเตรียมโครงการ

เมื่อคิดถึงการเพิ่ม App Clip ลงในแอปพลิเคชันของเรา เราต้องจำกฎพื้นฐานหนึ่งข้อ – เราจำเป็นต้องใช้รหัสปัจจุบันจาก codebase ของเรา App Clip เป็นเพียงตัวอย่างส่วนหนึ่งของแอปพลิเคชันของเรา มันใช้โมเดลและมุมมองเดียวกัน ดังนั้นเมื่อเราคิดเกี่ยวกับการสร้าง App Clips เราจำเป็นต้องออกแบบสถาปัตยกรรมของเราให้สอดคล้องกัน

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

แนวทางการเชื่อมต่อของมนุษย์

ก่อนที่เราจะเปิด Xcode และเจาะลึกในรายละเอียดของการใช้งาน App Clip ฉันต้องการพูดถึงแนวทางสำหรับ Human Interface Guidelines ของ Apple แนวทางปฏิบัติที่ดีคือการปฏิบัติตามคำแนะนำเหล่านี้ เนื่องจาก Apple มีเคล็ดลับประสบการณ์ผู้ใช้ที่ดีที่สุด

ประเด็นที่สำคัญที่สุดบางประการที่ควรคำนึงถึง:

• เน้นคุณสมบัติที่จำเป็น
• ออกแบบส่วนต่อประสานผู้ใช้แบบเชิงเส้น ใช้งานง่าย และเน้น
• หลีกเลี่ยงการกำหนดให้ผู้ใช้สร้างบัญชีก่อนจึงจะได้รับประโยชน์จาก App Clip ของคุณ

การสร้าง App Clip สำหรับ iOS 14

ตอนนี้ มาเปิด Xcode แล้วโหลดโปรเจ็กต์ของคุณกัน สร้างเป้าหมาย App Clip ใหม่โดยเลือก File> New> Target> App Clip คุณจะสามารถใช้ Swift UI หรือ Storyboard สำหรับอินเทอร์เฟซและตัวแทนแอป Swift UI หรือ UIKit สำหรับวงจรชีวิต App Clip เลือกโครงการและแอปพลิเคชันที่ถูกต้อง จากนั้นคลิก สร้าง

ก่อนที่เราจะกำหนดค่า URL ของเราภายใน Xcode เราจะต้องสร้างไฟล์โดเมนที่เกี่ยวข้องบนเว็บเซิร์ฟเวอร์ของเรา ในการทำเช่นนั้น เราจะต้องสร้างไฟล์ชื่อ apple-app-site-association โดยมีโครงสร้าง JSON:

ค่าสำหรับแอปควรเป็นตัวระบุแอปของ App Clip – <Application Identifier Prefix>.<Bundle ID>

หลังจากที่เรากำหนดค่าไฟล์ apple-app-site-association แล้ว เราจำเป็นต้องเพิ่ม Associated Domains Entitlement ให้ กับทั้งเป้าหมายแอปโฮสต์และเป้าหมายของ App Clip ด้วยเหตุนี้ iOS จึงสามารถจัดการลิงก์ที่นำไปสู่แอปพลิเคชันได้ หากผู้ใช้ไม่ได้ติดตั้งแอปเวอร์ชันเต็ม แอปคลิปจะเปิดขึ้น หากเวอร์ชันเต็มสามารถเข้าถึงได้ โดยจะเปิดให้บริการตามปกติ

URL ใดๆ ที่รัน App Clip ควรแสดงรายการในคุณสมบัติ Associated Domains ด้วยคำนำหน้า appclips (เช่น appclips: test.example) ควรแสดงรายการภายใต้โดเมนที่เกี่ยวข้องในแอปพลิเคชันโฮสต์

ดังที่ได้กล่าวไว้ในตอนต้น App Clip จะแชร์ฟังก์ชันการทำงานกับแอปพลิเคชันทั้งหมดของเรา นั่นคือเหตุผลที่เราต้องตัดสินใจว่าส่วนใดของโค้ดที่เราต้องการแชร์ระหว่างสองเป้าหมาย เมื่อเพิ่มฟังก์ชันการทำงานลงใน App Clip อาจมีบางกรณีที่โค้ดบางส่วนจากเวอร์ชันเต็มของแอปพลิเคชันไม่จำเป็น หรือเราจะต้องเพิ่มโค้ดเฉพาะสำหรับความต้องการเท่านั้น เพื่อให้บรรลุสิ่งนั้น เราสามารถใช้ Active Compilation Conditions เราสามารถตัดสินใจได้ว่าส่วนใดของโค้ดที่จะคอมไพล์ให้เป็นเวอร์ชันเต็มของแอปพลิเคชัน และส่วนใดสำหรับความต้องการของ App Clip เท่านั้น คุณสามารถจัดการได้อย่างง่ายดายในเป้าหมาย App Clip โดยเลือกแท็บ การตั้งค่าบิล ด์ จากนั้นเลือก Swift Compilers – Custom Flags -> Active Compilation Conditions

หลังจากเพิ่มเป้าหมายและกำหนดฟังก์ชันการทำงานที่เหมาะสมแล้ว เราสามารถดำเนินการทดสอบได้ คุณสามารถเรียกใช้ App Clip บนเครื่องจำลองหรืออุปกรณ์จริงได้ ในการดำเนินการนี้ คุณต้องระบุ URL การเรียกใช้เป็นตัวแปรสภาพแวดล้อม ด้วยวิธีนี้ คุณสามารถตรวจสอบว่า App Clip ของคุณทำงานอย่างไรกับการเรียกใช้ URL ต่างๆ และด้วยพารามิเตอร์การค้นหาต่างๆ

ในการเข้าถึงตัวแปรสภาพแวดล้อม ให้เลือกเป้าหมายของคลิปแอปจากรายการแบบเลื่อนลงของสคีมและคลิก แก้ไข แบบแผน เลือกแท็บ เรียกใช้ การดำเนินการ และ อาร์กิวเมนต์ ภายใต้หัวข้อ Environment Variables ให้แก้ไขค่าสำหรับ _XCAppClipURL หากไม่มี ให้เพิ่มเป็นคีย์และตั้งค่าเป็น URL คำขอ ตรวจสอบให้แน่ใจว่าได้เลือกช่องทำเครื่องหมายแล้ว Apple แนะนำให้สร้าง URL ทั่วไปที่ครอบคลุมกรณีการใช้งานส่วนใหญ่สำหรับประสบการณ์ App Clip ของเรา หากเราต้องระบุเส้นทางหนึ่งเส้นทางที่ต้องแตกต่างจากค่าเริ่มต้น ให้เพิ่มเป็นประสบการณ์ที่แตกต่างด้วยรูปภาพ ชื่อ และพารามิเตอร์อื่นๆ ใหม่

การ์ดคลิปแอปทดสอบ

มีสิ่งสำคัญอย่างหนึ่งที่ต้องจำไว้ นั่นคือ เมื่อคุณสร้างเป้าหมาย App Clip แล้ว คุณจะไม่เห็นการ์ดของเป้าหมายนั้นบนอุปกรณ์ของคุณ ในการทดสอบ คุณต้องเพิ่ม Local Experience ที่เรียกว่า สภาพแวดล้อมภายในเครื่องบนอุปกรณ์จริง สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อทำการทดสอบรหัส QR หรือการเรียกแท็ก NFC ในขณะที่เขียนบทความนี้ Apple ยังไม่ได้เปิดตัวเครื่องมือที่จำเป็นในการสร้าง App Clip Codes ซึ่งเป็นรหัส QR ที่เป็นกรรมสิทธิ์ของ Apple สำหรับความต้องการของเรา เราสามารถแทนที่ด้วยรหัส QR แบบคลาสสิกได้อย่างง่ายดาย

หลังจากติดตั้ง App Clip บนอุปกรณ์จริงของคุณแล้ว ให้ไปที่ Local Environments ใน Settings -> Developer -> Local Experiences แล้วเลือก Register Local Experience คุณจะได้รับแจ้งให้:

• คำนำหน้า URL ที่เรียกใช้ App Clip
• คัดลอกชื่อและคำบรรยายของการ์ด App Clip
• กริยากระตุ้นการตัดสินใจ
• รูปภาพส่วนหัว
• ตัวระบุบันเดิลของคลิปแอป

สร้างหรือสแกนแท็ก NFC หรือรหัส QR เพื่อเรียกใช้สภาพแวดล้อมในพื้นที่ด้วย App Clip เฉพาะ

เตรียมแอพ Clip สำหรับทดสอบและแจกจ่าย

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

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

รอบปฐมทัศน์

หลังจากการทดสอบโดยนักพัฒนา iOS ของเราเสร็จสิ้น ก็ถึงเวลาปล่อย App Clip ของเรา งานนี้ง่ายมาก – หากเราวางแผนที่จะเปิดตัวแอปพลิเคชันโฮสต์ App Clip จะถูกเปิดเผยต่อผู้ใช้ทุกคนพร้อมกับมัน App Clip แรกของเราเปิดตัวแล้วและพร้อมให้ผู้ใช้ค้นพบ!

คุณต้องการใช้คลิปแอปสำหรับธุรกิจของคุณหรือไม่? ติดต่อผู้เชี่ยวชาญของเราและดูว่าเราจะช่วยได้อย่างไร!