ลองเล่น Live Activities กันน

ฟีเจอร์ที่ร้อนแรง ที่เรียกว่า Live Activities❤️‍🔥

Image from Apple

Live Activities คืออะไร

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

โดยจะมาพร้อมกับ iOS 16 และ iPadOS 17 เป็นต้นไป ซึ่ง Live Activities จะมีการอัพเดทข้อมูลแสดงให้เห็นในตำแหน่งที่มองเห็นได้ง่าย เช่น หน้าจอล็อค บน iPhone ในโหมดสแตนด์บาย และใน Dynamic Island สำหรับแอพที่มีการอัพเดทเนื้อหาและสถานะบ่อยครั้งซึ่งนอกเหนือไปจากระบบแจ้งเตือนแบบพุชที่มีอยู่ Live Activities อาจเป็นวิธีที่ยืดหยุ่นมากขึ้นในการให้ผู้คนอัพเดทเกี่ยวกับกิจกรรมสด กิจกรรม หรืองานต่างๆ ในเวลาสองสามชั่วโมง

อาจจะยังนึกภาพกันไม่ออกบ้าง ผมมีตัวอย่าง อย่างเช่น กิจกรรมสดของแอพส่งอาหารอาจแสดงเวลาที่เหลือจนกว่าคำสั่งซื้อของคุณจะมาถึงซึ่งในส่วนนี้ประเทศไทยของเราก็มีแอพ Line man ที่เป็นเจ้าแรกๆ ที่แสดงให้เห็น และก็อย่างเช่นแอพกีฬาก็สามารถให้ดูผลการแข่งขันแบบสดๆ และแอพออกกำลังกายสามารถแสดงการวัดการออกกำลังกายแบบเรียลไทม์

Image from Apple

แล้ว Live Activities ที่ว่ามันทำงานยังไงหละ
Live Activities จะแสดงเนื้อหาแบบเรียลไทม์จากแอพไปยังที่หน้าจอล็อคของ iPhone นอกจากนี้ iPhone รุ่นใหม่ยังใช้ Live Activities พร้อม Always-On Display และสิ่งที่ Apple เรียกว่า Dynamic Island เมื่อโทรศัพท์ถูกปลดล็อค แอพต่างๆ สามารถใช้กิจกรรมสดเพื่อให้แน่ใจว่าลูกค้าจะไม่พลาดข้อมูลสำคัญในช่วงเวลาสำคัญ แม้ว่าจะไม่ได้อยู่ในแอปก็ตาม

ซึ่งจะมีตำแหน่งต่อไปนี้ ที่จะแสดงตัว Live Activities นอกเหนือจากการแสดงที่หน้าจอล็อค

• บนอุปกรณ์ที่รองรับ Dynamic Island ระบบจะแสดงกิจกรรมสดในตำแหน่งคงที่รอบๆ กล้อง TrueDepth
• บนอุปกรณ์ที่ไม่รองรับ Dynamic Island ระบบสามารถแสดงการอัปเดตกิจกรรมสดในแบนเนอร์ที่ปรากฏเป็นเวลาสั้นๆ ที่ด้านบนของหน้าจอ
• บน iPhone ในโหมดสแตนด์บาย กิจกรรมสดจะเต็มทั้งหน้าจอเพื่อให้ข้อมูลที่มองเห็นได้ในระยะไกล หรือใช้พื้นที่ที่ด้านบนของหน้าจอเพียงเล็กน้อยเพื่อให้เหลือพื้นที่สำหรับวิดเจ็ต

เกริ่นกันมาพอสมควรแล้ว เราลองทำกันเลยดีกว่าา

Stap 1 — Create project

ให้เรา create project swift UI ขึ้นมา ซึ่ง Live Activities จะสามารถ Implement ได้ใน Swift UI

Step 2 — Set Supports Live Activities

โดยให้เรานั้นไป Supports Live Activities เป็น Yes ที่ info.plist Values ดังรูปเพื่อให้แอพของเรารองรับการใช้งาน Live Activities

Step 3 — Define our Live Activity content

เราต้องกำหนดข้อมูลที่เราต้องการแสดงใน Live Activity ของเรา เนื่องจากมีพื้นที่จำกัด เราจึงต้องมุ่งเน้นไปที่ข้อมูลที่สำคัญที่สุดสำหรับผู้ใช้ของเรา ด้วยเหตุนี้ สิ่งต่อไปที่เราต้องทำคือสร้างไฟล์ใช้โปรโตคอล ActivityAttributes

import ActivityKit

struct ActivityAttributesSample: ActivityAttributes {
  let teamA: String
  let teamB: String
  public typealias Status = ContentState
  public struct ContentState: Codable, Hashable {
    var scoreA: Int
    var scoreB: Int
  }
}

จาก code เราสามารถแบ่งข้อมูลของเราออกเป็นสองประเภท:

Static : คุณสมบัติของโมเดลที่ใช้ ActivityAttributes → จะเป็นประเภทค่าคงที่ อย่างเช่น เลข order หรือ จำนวนของที่สั่ง
Dynamic : เก็บไว้ในประเภท ContentState → ก็จะเป็นประเภทค่าที่มีการเปลี่ยนแปลง อย่างเช่น สถานะการจัดส่ง

Step 4 — Add Live Activities to the widget extension

ขั้นตอนต่อไปเราจะทำการเพิ่ม widget extension โดยเลือก File > New > target > iOS > widget extension ดังรูป

เมื่อเราทำการเพิ่ม widget แล้ว และกำหนดข้อมูลที่ปรากฏใน Live Activity ด้วยโครงสร้าง ActivityAttributes เรียบรอยแล้ว จากนั้นเราจะเพิ่มโค้ดเพื่อ return ActivityConfiguration ภายใน widget โค้ดเราก็จะมีโครงสร้างประมาณนี้

import WidgetKit
import SwiftUI

struct AdventureActivityConfiguration: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: AdventureAttributes.self) { context in
            // Create the presentation that appears on the Lock Screen and as a
            // banner on the Home Screen of devices that don't support the
            // Dynamic Island.
            // ...
        } dynamicIsland: { context in
            // Create the presentations that appear in the Dynamic Island.
            // ...
        }
    }
}

step 5 — Create the Lock Screen presentation

ซึ่งที่เราจะลองทำกันในบทความนี้จะเป็นแสดง Live Activities แบบ Lock Screen ซึ่งเราจะต้องสร้าง view ขึ้นมาและ Implemet ในส่วน ActivityConfiguration เพื่อที่จะแสดง UI Live Activities ในหน้า Lock Screen

มาดูตัวอย่าง Code แบบง่ายๆกันเลยย

import WidgetKit
import SwiftUI

struct LiveActivitySampleEntryView : View {
    var attributes: ActivityAttributesSample
    var state: ActivityAttributesSample.ContentState
    var body: some View {
        VStack {
            HStack {
                Text(attributes.teamA)
                    .bold()
                    .foregroundColor(.white)
                Text("VS")
                    .bold()
                    .foregroundColor(.white)
                Text(attributes.teamB)
                    .bold()
                    .foregroundColor(.white)
            }
            Text(String(state.scoreA) + " - " + String(state.scoreB))
                .bold()
                .font(.system(size: 24))
                .foregroundColor(.white)
       }
      .activityBackgroundTint(.red)
    }
}

struct LiveActivitySample: Widget {
    var body: some WidgetConfiguration {
    ActivityConfiguration(for: ActivityAttributesSample.self) { context in
        LiveActivitySampleEntryView(attributes: context.attributes, state: context.state)
    } dynamicIsland: { context in
       // Create the presentations that appear in the Dynamic Island.
       // ...
    }
}

Note: ในส่วนของ dynamicIsland เราจะมาลองทำด้วยกันในบทความหน้า

Step 6 — Request Activity

แล้วจะเริ่มใช้ Live Activities ยังไงหละ มาหาคำตอบกันในส่วนนี้ได้เลย

ขั้นแรก เราต้องสร้างฟังก์ชันเริ่มต้นสำหรับ Live Activity ของเราโดยใช้ Constructor ของ ActivityContent: init(state:staleDate:relevanceScore:)

• state: เป็น ActivityAttributes.ContentState เริ่มต้นสำหรับกิจกรรมสด
• staleDate: วันที่เพื่อระบุระบบปฏิบัติการเมื่อกิจกรรมสดจะล้าสมัย หากไม่ผ่านวันที่เก่า หลังจากผ่านไป 8 ชั่วโมง ระบบปฏิบัติการจะสิ้นสุดกิจกรรมสด
• relevanceScore: หากเรามีกิจกรรมสดมากกว่าหนึ่งรายการ relevanceScore จะระบุลำดับความสำคัญที่จะแสดงบนเกาะไดนามิกและลำดับในหน้าจอล็อค
  จากนั้นเราสามารถขอเริ่ม Live Activity ใหม่ได้โดยการเรียก Activity method request(attributes:content:pushType:)

ตัวอย่างตามโค้ดด้านล่างเลย

import SwiftUI
import ActivityKit

struct LiveActivitySampleEntryView : View {
    var attributes: ActivityAttributesSample
    var state: ActivityAttributesSample.ContentState
    var body: some View {
        VStack {
            HStack {
                Text(attributes.teamA)
                    .bold()
                    .foregroundColor(.white)
                Text("VS")
                    .bold()
                    .foregroundColor(.white)
                Text(attributes.teamB)
                    .bold()
                    .foregroundColor(.white)
            }
            Text(String(state.scoreA) + " - " + String(state.scoreB))
                .bold()
                .font(.system(size: 24))
                .foregroundColor(.white)
       }
      .activityBackgroundTint(.red)
    }
}
struct LiveActivitySample: Widget {
    var body: some WidgetConfiguration {
    ActivityConfiguration(for: ActivityAttributesSample.self) { context in
        LiveActivitySampleEntryView(attributes: context.attributes, state: context.state)
    } dynamicIsland: { context in
       // Create the presentations that appear in the Dynamic Island.
       // ...
    }
}

เสร็จแล้ว🤟😍 มารันดูผลกันเลยย

ครับผมก็เสร็จกันไปแล้วน่ะครับสำหรับการแสดง Live Activities แบบ Lock Screen ซึ่งเราก็ได้ลองทำแบบง่ายๆกันไปแล้วทั้งนี้ยังมีเนื้อหาเพิ่มเติมอีก ก็สามารถติดตามได้ที่ https://developer.apple.com ทั้งนี้ในส่วนของบทความนี้ยังเป็นส่วนเริ่มต้นของตัวที่น่าสนใจก็คือ ตัว Dynamic Island ที่ผมจะมาต่อในบทความหน้า จะมีความน่าสนใจยังไงสามารถติดตามได้เลยครับบ

ก็สำหรับบทความนี้อาจจะมีอะไรถูกผิดไปบ้าง ก็สามารถที่จะแนะนำขึ้นมาได้เลยน่ะครับ เจอกันบทความหน้าครับบ👋👋

บทความต่อไป Dynamic Island 🏝️

Dynamic Island เกาะ แน่นๆน่ะน้องงๆ

Github: https://github.com/Ruchikon-M/ShowLiveActivities.git