SwiftUI Async GET REST API Call: คู่มือสำหรับผู้เริ่มต้น

ในบทช่วยสอนนี้สำหรับผู้เริ่มต้น คุณจะเรียนรู้พื้นฐานการใช้ SwiftUI ทำ API Calls โดยใช้ Internet Chuck Norris DataBase (ICNDB) ยกตัวอย่าง จะแสดง Joke อย่างรวดเร็วและง่ายด้วย Swift และ SwiftUI

คุณจะเห็นว่า Cross-platform Framework SwiftUI ให้เราใช้โค้ดเดียวกันทั่ว iOS, iPadOS, macOS, watchOS, App Clips และ tvOS ซึ่งมิฉะนั้นเป็นไปไม่ได้

นอกจากนี้คุณจะใช้ Async-Await ที่มาด้วย Swift 5.5 ซึ่งทำงานบน OS ใหม่ๆ รวมถึง iPhone ที่รัน iOS > v15.0 นี่ทำให้การเรียก Network Data แบบ Asynchronous เมื่อกดปุ่มง่ายขึ้นมากโดยไม่ Freeze UI Thread

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

วิธีทำ API Calls ใน Swift และ SwiftUI

ก่อนอื่นคุณต้องมี Mac เพื่อติดตั้ง Xcode ติดตั้งเสร็จ เปิด Xcode สร้างโปรเจกต์ใหม่ เลือก "App" สำหรับ iOS, macOS, tvOS, หรือ watchOS

ContentView

เพียงแค่อัปเดต ContentView SwiftUI ที่มีอยู่ ให้เพิ่ม Button และใช้ตัวแปร State เพื่อ Refresh ข้อความที่แสดงเมื่อ Joke กลับมาจาก ICNDB API:

import Foundation
import SwiftUI

struct ContentView: View {
    @State private var joke: String = ""
    var body: some View {
        Text(joke)
        Button {
            Task {
                let (data, _) = try await URLSession.shared.data(from: URL(string:"https://api.chucknorris.io/jokes/random")!)
                let decodedResponse = try? JSONDecoder().decode(Joke.self, from: data)
                joke = decodedResponse?.value ?? ""
            }
        } label: {
            Text("Fetch Joke")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct Joke: Codable {
    let value: String
}

Fetch a joke!

ถ้าคุณกด Build/Play แอปจะ Build ในแพลตฟอร์มที่คุณเลือกข้างต้น:

การวิเคราะห์โค้ด

ถ้าไปที่ Random Joke URL คุณจะสังเกตว่า Data อยู่ในรูปแบบ JSON คุณสามารถ Copy ไปใช้ JSON Linter ดูโครงสร้างเพื่อ 알아ว่า Property ไหนของ Joke Object ที่ต้องการ

จากนั้นคุณกำหนดโค้ดด้านบน คุณใช้ Codable Protocol (หรือ Interfaces) เพื่อแปลงจาก JSON Data Object เป็น Swift Class หรือ Struct จริง และสร้าง Properties สำหรับ Data ที่ต้องการเก็บ (value ในกรณีนี้)

JSONDecoder ช่วย Parse JSON String ด้วย Codable Object นี่ทำงานได้ทุกแพลตฟอร์มเพราะหน้าที่โหลดตอนเปิดแอปมีชื่อเดียวกันคือ ContentView ไม่ว่าจะเป็นแพลตฟอร์มไหน

App Clips

App Clips เป็นวิธีล่าสุดของ Apple ใช้ฟังก์ชัน Native App ด้วย "App Clip Code" โดยไม่ต้องดาวน์โหลดแอปทั้งหมดจาก App Store

App Clips ทำงานคล้าย iOS App — แตกต่างกันตรงที่คุณไม่สร้างโปรเจกต์ App Clip ใหม่ คุณเพียงเพิ่ม App Clip เป็น Target ใน iOS App ที่มีอยู่ โดยไปที่ File -> New -> Target -> iOS -> App Clip เมื่อ iOS App เปิดอยู่ใน Xcode

ถ้าคุณสงสัยเกี่ยวกับ iPhone/iPad Widgets พวกมันไม่ทำ Animation ดังนั้นการกดปุ่มจะแค่เปิดแอปที่สอดคล้อง และไม่สามารถอัปเดตข้อความผ่าน External API โดยอิสระได้

สรุป

ในบทความนี้ คุณเรียนรู้วิธีทำ RESTful GET API Calls จาก SwiftUI อย่างง่ายที่สุด!

อย่าลังเลติดต่อผมถ้ามีคำถาม ผมคิดค้นเรื่องนี้จากบทความอีกอันและคิดว่าจะลดความซับซ้อนเพิ่มเติม ดังนั้นสำหรับรายละเอียดเพิ่มเติมและวิธีทำให้โค้ดซับซ้อนขึ้น โปรดดูบทความนั้น:

async/await in SwiftUI
Convert a SwiftUI app to use the new Swift concurrency and find out what’s going on beneath the shiny surface.
Audrey Tam
raywenderlich.com