# วิธีแสดงความคืบหน้าการจัดส่งบนหน้าจอล็อก

ให้ลูกค้าติดตามคนขับบนหน้าจอล็อกตั้งแต่การสั่งซื้อจนถึงการจัดส่ง คู่มือนี้จะสร้าง Journey ดังกล่าวด้วย [องค์ประกอบ Live Activity](/th/product/customer-journey/journey-elements/channels/live-activity/)

## ข้อกำหนดเบื้องต้น

* แอป iOS ของคุณรองรับ Live Activities ดู [คู่มือ iOS SDK Live Activities](/th/developer/pushwoosh-sdk/ios-sdk/ios-live-activities/)
* มีการเผยแพร่สคีมาวิดเจ็ตการจัดส่งสำหรับแอปนี้แล้ว ดู [การกำหนดค่าสคีมา iOS Live Activity](/th/developer/first-steps/connect-messaging-services/ios-configuration/ios-live-activity-schemas-configuration/)

## สร้าง Event

นี่คือชื่อ Event ตัวอย่างสำหรับคู่มือนี้ เมื่อแอปหรือแบ็กเอนด์ของคุณส่งชื่อเป็นครั้งแรก Pushwoosh จะ [สร้าง Event นั้นโดยอัตโนมัติ](/th/product/audience-data-and-segmentation/events/#implementation) สร้าง Event ใน Control Panel ก่อนเฉพาะในกรณีที่คุณต้องการตั้งค่าประเภทแอตทริบิวต์ด้วยตนเองก่อนการส่งครั้งแรก

สร้าง (หรือใช้ซ้ำ) Event `OrderPlaced`, `CourierStatusChanged` และ `OrderDelivered`

[เรียนรู้เพิ่มเติมเกี่ยวกับการสร้าง Event](/th/product/audience-data-and-segmentation/events/#implementation)

## สร้าง Journey

เปิด [Customer Journey Builder](/th/product/customer-journey/pushwoosh-journey-overview/) สร้างแคมเปญ และสร้างทุกอย่างด้านล่างบน canvas เดียวกัน

1. ไปที่ **Campaigns → Customer Journey Builder**
2. คลิก **Create campaign**
3. คลิก **Build a journey from scratch**

### ตั้งค่าการเข้า

1. เพิ่มองค์ประกอบ **Trigger-based entry** ไปยัง canvas
2. ตั้งค่าเป็น `OrderPlaced`

![แผง Trigger-based entry ที่ตั้งค่า EVENT เป็น OrderPlaced](/live-activity-how-to-track-deliveries-with-live-activity-3.webp)

### เริ่มการ์ดคำสั่งซื้อ

1. เพิ่มองค์ประกอบ **Live Activity** หลังจากการเข้า
2. ตั้งชื่อว่า `Order card start`
3. ตั้งค่า **Action** เป็น **Start**
4. เลือก **Widget** การจัดส่งและ **Schema version**

![Order card start ที่ตั้งค่า Action เป็น Start และเลือก Widget การจัดส่งและ Schema version แล้ว](/live-activity-how-to-track-deliveries-with-live-activity-1.webp)

5. ตั้งค่า **Card key: event** เป็น `OrderPlaced`

![Card key: event ตั้งค่าเป็น OrderPlaced](/live-activity-how-to-track-deliveries-with-live-activity-4.webp)

6. กรอก **Card content** (`courierName`, `eta`, `distanceMeters`) และช่องการแจ้งเตือน

![ช่อง Card content courierName, eta และ distanceMeters ถูกกรอกแล้ว พร้อมช่องการแจ้งเตือนด้านล่าง](/live-activity-how-to-track-deliveries-with-live-activity-5.webp)

7. คลิก **Apply**


### รอและอัปเดตการ์ด

ดำเนินการต่อบน canvas เดียวกันหลังจากองค์ประกอบ Start

1. เพิ่มองค์ประกอบ **Wait for Trigger**
2. รอ `CourierStatusChanged`
3. ตั้งค่าระยะเวลารอที่เหมาะสมกับการอัปเดตการจัดส่งของคุณ

![Wait for Trigger ตั้งค่าเป็น CourierStatusChanged พร้อมระยะเวลารอ](/live-activity-how-to-track-deliveries-with-live-activity-6.webp)

4. บนสาขาที่ทำงานเมื่อ Event เกิดขึ้น ให้เพิ่มองค์ประกอบ **Live Activity**
5. ตั้งชื่อว่า `Order card update`
6. ตั้งค่า **Action** เป็น **Update**
7. เลือก **Widget** และ **Schema version** เดียวกัน

![Order card update ที่ตั้งค่า Action เป็น Update และเลือก Widget และ Schema version เดียวกัน](/live-activity-how-to-track-deliveries-with-live-activity-7.webp)

8. เลือก `Order card start` ใน **Card created by**

![Card created by ตั้งค่าเป็น Order card start บนองค์ประกอบ Update](/live-activity-how-to-track-deliveries-with-live-activity-8.webp)

9. อัปเดต **Card content**

![ช่อง Card content ได้รับการอัปเดตบนองค์ประกอบ Order card update](/live-activity-how-to-track-deliveries-with-live-activity-9.webp)

10. คลิก **Apply**

### รอและสิ้นสุดการ์ด

ดำเนินการต่อบน canvas เดียวกันหลังจากองค์ประกอบ Update

1. เพิ่มองค์ประกอบ **Wait for Trigger** อีกอัน
2. รอ `OrderDelivered`

![Wait for Trigger ตั้งค่าเป็น OrderDelivered](/live-activity-how-to-track-deliveries-with-live-activity-10.webp)

3. บนสาขาที่ทำงานเมื่อ Event เกิดขึ้น ให้เพิ่มองค์ประกอบ **Live Activity**
4. ตั้งชื่อว่า `Order card end`
5. ตั้งค่า **Action** เป็น **End**
6. เลือก **Widget** และ **Schema version** เดียวกัน
7. เลือก `Order card start` ใน **Card created by**

![Order card end ที่ตั้งค่า Action เป็น End, เลือก Widget และ Schema version เดียวกัน, และ Card created by ตั้งค่าเป็น Order card start](/live-activity-how-to-track-deliveries-with-live-activity-11.webp)

8. ตั้งค่าการแจ้งเตือนและ **Dismiss after, min** หากจำเป็น

![ช่องการแจ้งเตือนและ Dismiss after, min บนองค์ประกอบ Order card end](/live-activity-how-to-track-deliveries-with-live-activity-12.webp)

9. คลิก **Apply**

![Journey การจัดส่งเต็มรูปแบบบน canvas พร้อมด้วย entry, Start, Wait for Trigger, Update, Wait for Trigger และ End](/live-activity-how-to-track-deliveries-with-live-activity-13.webp)

## สิ่งที่ลูกค้าเห็น

บนหน้าจอล็อก ลูกค้าจะได้รับการ์ด Live Activity หนึ่งใบที่เปลี่ยนแปลงไปตามความคืบหน้าของการจัดส่ง ตัวอย่างเช่น:

<Tabs>
<TabItem label="หลังจากสั่งซื้อแล้ว">
คนขับ `Alex M.`, เวลาที่คาดว่าจะถึง `18:30`, ระยะทาง `1200` เมตร

![การ์ด Live Activity บนหน้าจอล็อกหลังจากสั่งซื้อแล้ว แสดงคนขับ Alex M., เวลาที่คาดว่าจะถึง 18:30 และระยะทาง 1200 เมตร](/live-activity-how-to-track-deliveries-with-live-activity-14.webp)
</TabItem>
<TabItem label="เมื่อสถานะคนขับเปลี่ยนแปลง">
การ์ดใบเดียวกันจะอัปเดต ตัวอย่างเช่น คนขับ `Alex M.`, เวลาที่คาดว่าจะถึง `18:15`, ระยะทาง `400` เมตร

![การ์ด Live Activity บนหน้าจอล็อกหลังจากการอัปเดตของคนขับ แสดงเวลาที่คาดว่าจะถึง 18:15 และระยะทาง 400 เมตร](/live-activity-how-to-track-deliveries-with-live-activity-15.webp)
</TabItem>
<TabItem label="เมื่อจัดส่งแล้ว">
การ์ดจะปิดและหายไปจากหน้าจอล็อก
</TabItem>
</Tabs>