# ออกแบบพาสใน pass builder

**pass builder** ของ Apple Wallet เป็นเครื่องมือออกแบบภาพใน Control Panel คุณสามารถเลือกสไตล์พาส, กรอกข้อมูลแบรนด์, ฟิลด์, และบาร์โค้ด, ดูตัวอย่างสด, และสร้างไฟล์ `.pkpass` ที่ลงนามแล้ว—โดยไม่จำเป็นต้องเขียน `pass.json` ด้วยตนเอง

## สร้างพาส

ใน Control Panel ไปที่ **Campaigns → Apple Wallet** และคลิก **Create pass**

<img src="/apple-wallet-passes-pass-builder-1.webp" alt="หน้าพาสทั้งหมดพร้อมปุ่ม Create pass และคอลัมน์ตารางสำหรับชื่อพาส, สไตล์, ผู้ใช้, และการอัปเดตล่าสุด"/>

## กำหนดค่าพาส

   * **ตั้งแต่เริ่มต้น:** เริ่มต้นด้วยพาสเปล่า เลือกสไตล์พาส จากนั้นตั้งค่าสี, รูปภาพ, ฟิลด์, บาร์โค้ด, และตัวเลือกอื่นๆ ด้วยตนเองในส่วนด้านล่าง

   * **จากเทมเพลต:** คลิก **Load template** เลือกพาสที่สร้างไว้แล้วใน **Select Template** (boarding pass, coupon, event ticket, generic, หรือ store card) และยืนยัน แบบฟอร์มจะเติมสไตล์พาส, สี, รูปภาพ, ฟิลด์ของพาส, บาร์โค้ด, และข้อมูลพื้นฐานให้โดยอัตโนมัติ แก้ไขค่าใดๆ หรือเปลี่ยนสไตล์ตามต้องการ Pushwoosh จะแทนที่ team และ Pass Type IDs ของเทมเพลตด้วยค่าของแอปพลิเคชันของคุณ

### เลือกสไตล์พาส

ใต้ **PASS STYLE** เลือกหนึ่งในห้าสไตล์พาสของ Apple Wallet สไตล์จะควบคุมเลย์เอาต์และพื้นที่ฟิลด์และรูปภาพที่สามารถใช้ได้:

* **Boarding Pass**
* **Coupon**
* **Event Ticket**
* **Store Card**
* **Generic**


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

### เพิ่มชื่อและคำอธิบายพาส

ใต้ **BASIC INFORMATION** กรอกข้อมูล:

| |  |
| :---- | :---- |
| **Pass Name** | ชื่อของพาส และชื่อแหล่งที่มาที่แสดงในการแจ้งเตือนการอัปเดต |
| **Description** | คำอธิบายสั้นๆ ของพาส |
| **Logo Text** | ข้อความที่แสดงถัดจากโลโก้ (ใช้เมื่อไม่มีการอัปโหลดรูปภาพโลโก้) |

<img src="/apple-wallet-passes-pass-builder-2.webp" alt="ส่วนข้อมูลพื้นฐานพร้อมฟิลด์ Pass Name, Description, และ Logo Text"/>

### ตั้งค่าสีและรูปภาพ

#### สี

ใต้ **COLORS** ตั้งค่า:

* **Background Color:** พื้นหลังของพาส
* **Foreground Color:** ข้อความหลักและไอคอนบนพาส
* **Label Color:** สีของป้ายกำกับฟิลด์ (เช่น `FROM`, `GATE`)

ในการตั้งค่าหรือเปลี่ยนสี ให้คลิกที่ฟิลด์และเลือกสีในตัวเลือกสี

<Aside type="note">
สีจะถูกเก็บในรูปแบบ `rgb(r, g, b)`
</Aside>

<img src="/apple-wallet-passes-pass-builder-3.webp" alt="ส่วนสีพร้อมฟิลด์ Background Color, Foreground Color, และ Label Color"/>

#### รูปภาพ

ใต้ **IMAGES** อัปโหลด **Icon** และ **Logo** (ทั้งสองอย่างจำเป็น) รูปภาพเสริมจะขึ้นอยู่กับสไตล์ของพาส

คลิก **Choose file** ถัดจากช่องรูปภาพแต่ละช่อง อัปโหลดไฟล์ PNG หรือ JPEG Pushwoosh จะประมวลผลแต่ละภาพให้เป็นความละเอียดที่ Apple ต้องการ (@1x, @2x, @3x) เมื่อสร้างพาส

### กรอกฟิลด์ของพาส

ใต้ **PASS FIELDS** เพิ่มข้อความและค่าที่ปรากฏบนพาส กลุ่มที่คุณเห็นจะขึ้นอยู่กับสไตล์ของพาส:

* **Header fields (ด้านบนของพาส):** Boarding Pass, Event Ticket
* **Primary fields (เนื้อหาหลัก):** ทุกสไตล์
* **Secondary fields (ข้อมูลสนับสนุน):** ทุกสไตล์
* **Auxiliary fields (รายละเอียดเพิ่มเติม):** ทุกสไตล์
* **Back fields (ด้านหลังของพาส):** ทุกสไตล์

คลิก **+ Add Field** ในแต่ละกลุ่มที่คุณต้องการ

สำหรับแต่ละฟิลด์ ตั้งค่า:

|  |  |
| :---- | :---- |
| Key (ID) | ตัวระบุฟิลด์ที่ไม่ซ้ำกัน (สร้างขึ้นโดยอัตโนมัติ) |
| Label | ป้ายกำกับสั้นๆ บนพาส (เช่น `FROM`) |
| Value | ค่าที่แสดงบนพาส (เช่น `SFO`) |
| Change message | ข้อความในการแจ้งเตือนการอัปเดตเมื่อค่านี้เปลี่ยนแปลง แสดงเฉพาะเมื่อค่าเปลี่ยนแปลง ใช้ `%@` สำหรับค่าใหม่ (เช่น `Gate changed to %@`) |

<img src="/apple-wallet-passes-pass-builder-8.webp" alt="ฟิลด์ของพาสพร้อมปุ่ม Format และตัวเลือกการจัดรูปแบบที่ขยายสำหรับรูปแบบค่าและการจัดตำแหน่งข้อความ"/>

บนการ์ดฟิลด์ คลิก **Format** เพื่อแสดงตัวเลือกการจัดรูปแบบ คลิก **X** เพื่อลบฟิลด์


#### ตัวเลือกการจัดรูปแบบ

* **Value format:** Text, Date & time, หรือ Number/currency
* **Text alignment:** Default (Natural), left, center, หรือ right
* **Data detectors** *(เฉพาะ back fields):* เปลี่ยนหมายเลขโทรศัพท์, ลิงก์, ที่อยู่, และกิจกรรมในปฏิทินให้เป็นเนื้อหาที่สามารถแตะได้บน back fields


### เพิ่มบาร์โค้ด

ใต้ **BARCODE** เลือกรูปแบบและป้อนข้อมูลที่จะเข้ารหัส:

1. **Barcode Format:** เลือกลักษณะของบาร์โค้ดและประเภทของเครื่องสแกนที่สามารถอ่านได้
   * **QR Code (แนะนำ):** โค้ดสี่เหลี่ยมที่โทรศัพท์และเครื่องสแกนส่วนใหญ่อ่านได้ง่าย เหมาะสำหรับคูปอง, บัตรสะสมคะแนน, และพาสส่วนใหญ่
   * **PDF417:** บาร์โค้ดแบบกว้างที่ประกอบด้วยแถวของเส้นหลายแถว มักจำเป็นสำหรับบัตรโดยสารของสายการบินหรือการขนส่ง
   * **Aztec:** โค้ดสี่เหลี่ยมขนาดกะทัดรัด คล้ายกับ QR Code พบได้บ่อยในตั๋วกิจกรรมและการขนส่ง
   * **Code 128:** บาร์โค้ดแบบเส้นแนวตั้งคลาสสิก เลือกตัวเลือกนี้เฉพาะเมื่อเครื่องสแกนหรือระบบ POS ของคุณต้องการบาร์โค้ด 1D
2. **Barcode Message:** ค่าที่เข้ารหัสในบาร์โค้ด (เช่น หมายเลขตั๋วหรือสมาชิก)
3. **Alt Text (ไม่บังคับ):** ข้อความที่แสดงใต้บาร์โค้ดบนพาส

<img src="/apple-wallet-passes-pass-builder-6.webp" alt="ส่วน BARCODE พร้อมดรอปดาวน์รูปแบบ, ฟิลด์ข้อความบาร์โค้ด, และฟิลด์ข้อความ alt ที่ไม่บังคับ"/>

### ตั้งค่าการหมดอายุและสถานะ

ใต้ **EXPIRATION & STATUS** ควบคุมเวลาที่พาสจะแสดง, เวลาที่หมดอายุ, และว่ายังคงใช้งานได้หรือไม่:

* **Relevant Date (เวลาที่จะแสดงพาส):** วันที่และเวลาที่พาสอาจปรากฏบนหน้าจอล็อก
* **Expiration Date (เวลาที่พาสหมดอายุ):** วันที่และเวลาหลังจากที่พาสจะกลายเป็นสีเทาใน Wallet
* **Mark as Voided (ทำให้พาสนี้เป็นโมฆะ):** ช่องทำเครื่องหมายเพื่อทำให้พาสเป็นโมฆะเพื่อไม่ให้ใช้งานได้อีกต่อไป

<img src="/apple-wallet-passes-pass-builder-7.webp" alt="ส่วนการหมดอายุและสถานะพร้อมวันที่เกี่ยวข้อง, วันที่หมดอายุ, และช่องทำเครื่องหมายเป็นโมฆะ"/>

### ตัวเลือกเฉพาะสไตล์และขั้นสูง

* **Transit type** *(เฉพาะ Boarding Pass):* Air, Train, Bus, Boat, หรือ Generic
* **Grouping identifier:** จัดกลุ่มพาสที่เกี่ยวข้องกันใน Wallet

### ความเกี่ยวข้องตามตำแหน่ง *(ไม่บังคับ)*

ใต้ **LOCATION-BASED RELEVANCE** พาสจะปรากฏขึ้นเมื่อผู้ใช้อยู่ใกล้ตำแหน่งที่คุณเพิ่ม สำหรับแต่ละตำแหน่ง ให้ตั้งค่าข้อความที่จะแสดงบนหน้าจอล็อกเมื่อผู้ใช้อยู่ใกล้เคียง คุณสามารถเพิ่มได้สูงสุด 10 ตำแหน่ง

คลิกบนแผนที่, ค้นหาที่อยู่, วางพิกัด, หรือนำเข้า geozone เพื่อเพิ่มจุด ลากเครื่องหมายเพื่อปรับตำแหน่งให้ละเอียด

**max distance** (ในหน่วยเมตร) จะควบคุมว่าผู้ใช้ต้องอยู่ใกล้แค่ไหนเพื่อให้พาสยังคงมีความเกี่ยวข้อง

<img src="/apple-wallet-passes-pass-builder-5.webp" alt="ส่วนความเกี่ยวข้องตามตำแหน่งพร้อมแผนที่, รายการตำแหน่ง, ข้อความหน้าจอล็อก, และฟิลด์ระยะทางสูงสุด" width="600"/>

<Aside type="note" title="ตำแหน่งเทียบกับบีคอน">
ส่วน **LOCATION-BASED RELEVANCE** จะกำหนดค่าเฉพาะตำแหน่งตามแผนที่เท่านั้น คุณกำหนดสถานที่และ **max distance** เป็นเมตร อุปกรณ์จะใช้บริการตำแหน่งเพื่อตัดสินใจว่าผู้ใช้อยู่ใกล้พอหรือไม่ จากนั้น Wallet จะสามารถแสดงข้อความบนหน้าจอล็อกของคุณสำหรับตำแหน่งนั้นได้

PassKit ยังสามารถผูกพาสกับฮาร์ดแวร์ iBeacon ภายในอาคารได้อีกด้วย ตัวเลือกนั้นไม่มีใน pass builder กำหนดค่าบีคอนใน [PassKit API](/th/developer/api-reference/apple-wallet-passkit-api/) เมื่อทีมของคุณใช้เครื่องส่งสัญญาณบีคอน
</Aside>

**ตัวอย่างกรณีการใช้งาน**

* **ค้าปลีก:** บัตรสะสมคะแนนหรือคูปองจะปรากฏขึ้นเมื่อลูกค้าอยู่ใกล้ร้านค้าของคุณ ข้อความบนหน้าจอล็อกอาจบอกว่าคุณอยู่ใกล้ร้านและเตือนให้ใช้พาส
* **กิจกรรม:** ตั๋วกิจกรรมจะปรากฏขึ้นเมื่อผู้ใช้อยู่ใกล้สถานที่จัดงาน (สนามกีฬา, โรงละคร, หรือพื้นที่เทศกาล) เพื่อให้พวกเขาสามารถหาพาสได้อย่างรวดเร็วที่ประตู
* **การเดินทาง:** บัตรโดยสารจะปรากฏเด่นชัดเมื่ออยู่ใกล้สนามบินหรืออาคารผู้โดยสารขาออก เพื่อให้ผู้โดยสารเห็นรายละเอียดประตูหรือเที่ยวบินบนหน้าจอล็อกก่อนเปิด Wallet
* **การบริการ:** คูปองหรือบัตรสมาชิกสามารถแสดงขึ้นเมื่ออยู่ใกล้ร้านกาแฟหรือโรงแรมที่คุณกำหนด

### ป้อน User ID

ป้อน [User ID](/th/product/pushwoosh-knowledge-hub/users-userids/#how-are-users-and-devices-related) ของ Pushwoosh สำหรับบุคคลที่จะได้รับพาสนี้ Pushwoosh จะออกพาสให้กับผู้ใช้นั้นและแสดงรายการไว้ใต้ **USER** ใน **All passes**

### ดูตัวอย่างและตรวจสอบความถูกต้อง

**live preview** จะอัปเดตขณะที่คุณแก้ไข เพื่อให้คุณสามารถเห็นภาพคร่าวๆ ว่าพาสจะมีลักษณะอย่างไรใน Wallet

<Aside type="note" title="ตัวอย่างอาจแตกต่างกันบนอุปกรณ์">
ตัวอย่างเป็นเพียงการประมาณการ พาสอาจดูแตกต่างไปบนอุปกรณ์จริง บาร์โค้ดที่แสดงเป็นตัวยึดตำแหน่ง บาร์โค้ดจริงจะถูกสร้างขึ้นในไฟล์ `.pkpass` สุดท้าย
</Aside>

หากต้องการตรวจสอบพาสกับข้อกำหนดของ Apple โดยไม่ต้องสร้าง ให้คลิก **Validate pass** ตัวสร้างจะแจ้งเตือนรูปภาพที่จำเป็นที่ขาดหายไปและปัญหาอื่นๆ

## สร้างพาส

เลือก **Generate** Pushwoosh จะตรวจสอบความถูกต้องของพาส, ประมวลผลรูปภาพ, และลงนามในแพ็คเกจ การสร้างใช้เวลาไม่กี่วินาที หลังจากนั้นพาสจะปรากฏในรายการพาสของคุณ

สำหรับการแก้ไข (รวมถึงการอัปเดตตามหมายเลขซีเรียล), การดาวน์โหลด, การแชร์, และการลบพาสหลังจากการสร้าง โปรดดู [จัดการพาสที่มีอยู่](/th/product/messaging-channels/apple-wallet-passes/#view-and-manage-existing-passes)


## จัดการพาสผ่าน API

ทุกสิ่งที่ pass builder ทำได้ยังมีให้ใช้งานผ่าน [PassKit Designer API](/th/developer/api-reference/apple-wallet-passkit-api/) ด้วย: สร้าง, อัปเดต, แสดงรายการ, ดาวน์โหลด, และลบพาส

<LinkCard title="Apple Wallet PassKit API" href="/developer/api-reference/apple-wallet-passkit-api/" />