tvOS: Pengembangan Apple TV dengan Focus Engine

Apa itu tvOS?

tvOS — sistem operasi Apple untuk kotak Apple TV, didasarkan pada kernel Darwin XNU yang sama dengan iOS. Pertama kali dirilis pada 30 Oktober 2015 dengan Apple TV generasi ke-4. tvOS menggantikan Apple TV Software lama (berbasis iOS, tanpa App Store dan SDK). Sistem dioptimalkan untuk operasi di TV dengan resolusi hingga 4K HDR (Dolby Vision) dan suara Dolby Atmos.

Menurut Apple (WWDC 2025), tvOS terinstal di Apple TV HD (2015), Apple TV 4K (2017, 2021, 2022) dan tertanam di beberapa model Smart TV melalui AirPlay. Apple TV menggunakan chip A8 (HD), A10X Fusion (gen 1 4K), A12 Bionic (gen 2 4K) dan A15 Bionic (gen 3 4K). Semua model mendukung tvOS 17. tvOS tidak memiliki kamera, mikrofon (kecuali remote), layar sentuh, atau GPS.

Fitur utama tvOS adalah Focus Engine, yang menggantikan kontrol sentuh dengan navigasi fokus. Pengguna memindahkan pilihan antar elemen UI menggunakan Siri Remote. Pengembang membuat aplikasi dalam Swift/SwiftUI (native) atau JavaScript/TVML (aplikasi media seperti Netflix, Hulu).

Riwayat versi tvOS

tvOS 9 (2015) — versi pertama dengan SDK dan App Store. tvOS 10 (2016) — Masuk Tunggal (SSO) untuk langganan kabel. tvOS 11 (2017) — dukungan Amazon Prime Video dan mode otomatis. tvOS 12 (2018) — Dolby Atmos. tvOS 13 (2019) — mode multi-pengguna. tvOS 17 (2023) — FaceTime, VPN, profil audio melalui HDMI.

Arsitektur tvOS dan perbedaan dari iOS

Arsitektur tvOS didasarkan pada tumpukan yang sama dengan iOS: kernel XNU, layanan sistem Core Services, lapisan Media, dan lapisan pengguna Cocoa Touch. Namun, ada perbedaan signifikan terkait kekhususan platform TV.

Keterbatasan perangkat keras

Apple TV 4K generasi ke-3 menggunakan A15 Bionic dengan 6 inti CPU (2 kinerja, 4 efisiensi) dan GPU 5-inti. RAM — 4 GB (penyimpanan SSD internal dari 64 GB). Sistem tidak memiliki penyimpanan lokal permanen dalam arti klasik: semua data aplikasi dapat dihapus oleh tvOS saat ruang terbatas (purgeable). Pengembang harus menggunakan iCloud Key-Value Storage atau CloudKit untuk pelestarian status.

TVMLKit dan TVJS

TVMLKit — framework unik untuk tvOS yang memungkinkan pembuatan antarmuka dalam JavaScript dan TVML (bahasa mirip XML khusus Apple). TVMLKit memuat JSON/XML dari server dan merender komponen UI native. Ini adalah teknologi utama untuk layanan streaming: Netflix, Hulu, Amazon Prime Video menggunakan TVMLKit. TVJS — lingkungan JavaScript yang berjalan dalam konteks terisolasi.

Tidak adanya penyimpanan permanen

tvOS mengelola ruang disk secara otomatis: saat ruang terbatas, sistem dapat menghapus cache, sumber daya yang diunduh, dan bahkan aplikasi itu sendiri (menyimpan ikon). Saat dibuka kembali, aplikasi harus memulihkan statusnya. iCloud NSUbiquitousKeyValueStore adalah satu-satunya penyimpanan permanen yang dijamin untuk pengaturan (hingga 1 MB per aplikasi).

import Foundation

// // Pelestarian dan pemulihan status di tvOS
final class StateManager {

    private let store = NSUbiquitousKeyValueStore.default
    private let coder = JSONEncoder()
    private let decoder = JSONDecoder()

    // Menyimpan progres menonton
    func saveProgress<T: Codable>(_ value: T, for key: String) {
        if let data = try? coder.encode(value) {
            store.set(data, for: key)
            store.synchronize()
        }
    }

    // Memulihkan status setelah penghapusan cache
    func restoreProgress<T: Codable>(_ type: T.Type, for key: String) -> T? {
        guard let data = store.data(for: key) else { return nil }
        return try? decoder.decode(type, from: data)
    }

    // Menangani notifikasi perubahan di perangkat lain
    init() {
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(ubiquitousKeyValueStoreDidChange),
            name: NSUbiquitousKeyValueStore.didChangeExternallyNotification,
            object: store
        )
    }

    @objc
    private func ubiquitousKeyValueStoreDidChange(_ notification: Notification) {
        print("Data diubah di perangkat lain")
    }
}

StateManager menggunakan NSUbiquitousKeyValueStore untuk menyimpan status aplikasi di tvOS. Karena penyimpanan lokal dapat dibersihkan oleh sistem, hanya iCloud yang menjamin persistensi data. store.synchronize() segera mengirim data ke server, sementara didChangeExternallyNotification memberi tahu aplikasi tentang perubahan dari perangkat pengguna lain.

Focus Engine: navigasi dan fokus

Focus Engine — mekanisme kunci tvOS yang menggantikan peristiwa sentuh dengan navigasi fokus. Pengguna memindahkan pilihan antar elemen UI menggunakan Siri Remote (permukaan sentuh atau tombol). Sistem secara otomatis menghitung elemen fokus berikutnya berdasarkan jarak dan arah gerakan.

UIFocusEnvironment dan hierarki fokus

Setiap elemen UI yang mampu menerima fokus mengimplementasikan protokol UIFocusEnvironment. UIKit secara otomatis menentukan urutan navigasi berdasarkan geometri elemen. Pengembang dapat mengganti fokus yang diinginkan melalui preferredFocusEnvironments, menentukan larik focusEnvironment anak, dan mengontrol pergerakan melalui UIFocusHeading (up, down, left, right). UIFocusGuide memungkinkan pengaturan rute khusus untuk tata letak yang tidak trivial.

UIFocusEffect dan paralaks

tvOS secara otomatis menambahkan UIFocusEffect ke elemen yang difokuskan: bayangan, penyorotan, dan efek paralaks (perpindahan saat memiringkan remote). Pengembang dapat menonaktifkan efek melalui focusedValue atau menyesuaikannya melalui UIFocusEffect.transform. Di SwiftUI, paralaks ditambahkan dengan pengubah .hoverEffect(.highlight).

import SwiftUI

// // Komponen tvOS dengan fokus khusus
struct MovieCardView: View {
    let movie: Movie
    @State private var isFocused = false
    @Environment(\.isFocused) var envFocused

    var body: some View {
        VStack(spacing: 8) {
            AsyncImage(url: movie.posterURL) { phase in
                if let image = phase.image {
                    image
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 320, height: 180)
                        .cornerRadius(8)
                        .overlay(
                            RoundedRectangle(cornerRadius: 8)
                                .stroke(isFocused ? Color.blue : Color.clear, lineWidth: 3)
                        )
                        .scaleEffect(isFocused ? 1.08 : 1.0)
                }
            }

            Text(movie.title)
                .font(.caption)
                .lineLimit(2)
                .foregroundStyle(isFocused ? .white : .gray)
        }
        .onHover { hovering in
            withAnimation(.spring(response: 0.35)) {
                isFocused = hovering
            }
        }
        .onPlayPauseCommand {
            // Menangani tombol Play/Pause di remote
            startPlayback()
        }
        .focusable()
        .focusEffect { phase in
            // Efek fokus khusus
            phase == .active ?
                AnyView(self.scaleEffect(1.08)) :
                AnyView(self.scaleEffect(1.0))
        }
    }

    private func startPlayback() {
        print("Memutar: \(movie.title)")
    }
}

// // Layar utama dengan kisi film
struct MovieGridScreen: View {
    let movies: [Movie]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 320, maximum: 400))], spacing: 24) {
                ForEach(movies) { movie in
                    MovieCardView(movie: movie)
                }
            }
            .padding(60)
        }
        .focusSection() // Pengelompokan untuk navigasi
    }
}

MovieCardView mendemonstrasikan Focus Engine di SwiftUI: pengubah .focusable() membuat elemen dapat difokuskan, .onHover melacak perubahan status, .focusEffect memungkinkan animasi fokus khusus. .onPlayPauseCommand menangani penekanan tombol Play/Pause di Siri Remote. focusSection mengelompokkan kisi untuk navigasi siklik.

Siri Remote: gerakan dan tombol

Siri Remote generasi kedua (2021) memiliki permukaan sentuh, 5 tombol, dan mikrofon. tvOS mendukung gerakan: gesek (navigasi), ketuk (pilih), ketuk ganda (pusatkan), cubit-zoom (gambar), tekan lama (menu konteks). UIPress dengan tipe .select, .playPause, .menu, .upArrow, .downArrow, .leftArrow, .rightArrow — tipe tekan yang telah ditentukan. Mikrofon remote digunakan untuk Siri dan pencarian suara.

Top Shelf dan layar aplikasi

Top Shelf adalah area di layar utama Apple TV yang menampilkan konten dinamis aplikasi saat berada di baris atas. Di tvOS 17, Top Shelf mendukung hingga 8 widget dengan latar belakang khusus dan elemen interaktif. Pengembang mengimplementasikan TVTopShelfProvider untuk menyediakan konten.

Gaya Top Shelf

Tiga gaya Top Shelf tersedia: Sectioned — daftar terkategori (serial berdasarkan genre), Inset — elemen pusat dengan deskripsi detail (film yang direkomendasikan), Photo — kisi gambar (album foto). Sistem memperbarui Top Shelf di latar belakang melalui BGTaskScheduler, mirip dengan watchOS. Penyedia harus mengembalikan konten dengan cepat — tvOS menyimpan data dalam cache selama 24 jam.

Layar aplikasi

Layar utama tvOS terdiri dari baris Top Shelf dan kisi aplikasi. Pengguna dapat mengatur ulang ikon dan membuat folder. tvOS secara otomatis membongkar aplikasi dari memori saat sumber daya terbatas, oleh karena itu pengembang harus menangani UISceneDidDisconnectNotification dengan benar dan memulihkan status saat memulai ulang.

SwiftUI untuk Apple TV

SwiftUI didukung penuh di tvOS mulai tvOS 13. Apple merekomendasikan SwiftUI untuk semua proyek baru. Kode SwiftUI yang sama berfungsi di iOS, iPadOS, macOS, dan tvOS dengan penyesuaian minimal untuk Focus Engine. SwiftUI untuk tvOS menyediakan pengubah .focusable(), .focusSection(), .onPlayPauseCommand, dan .onExitCommand.

Adaptasi ke tvOS

Saat memindahkan aplikasi iOS ke tvOS, Anda perlu: mengganti TabView dengan NavigationView dengan navigasi fokus, memperbesar ukuran font (minimal 30pt untuk judul, 22pt untuk teks), menambahkan margin (minimal 40pt dari tepi — area aman di TV). tvOS tidak mendukung UIAlertController dengan kolom teks, UIWebView, dan MFMailComposeViewController.

Rekomendasi desain

Apple HIG untuk tvOS: ukuran minimum area sentuh 60×60 titik, teks terbaca dari jarak 3 meter (ukuran font tidak kurang dari 22pt untuk body), kontras teks 4.5:1, latar belakang gelap (latar belakang terang menyebabkan silau di TV OLED), semua elemen dapat diakses tanpa gerakan kompleks. Resolusi: Apple TV 4K menghasilkan 3840×2160 (4K) atau 1920×1080 (HD) pada 60 FPS. Semua gambar harus @2x (untuk 1080p) dan @4x (untuk 4K).

TVMLKit dan aplikasi media

TVMLKit — framework untuk membuat aplikasi media di tvOS menggunakan teknologi web: JavaScript (TVJS) dan TVML (XML khusus Apple). Aplikasi TVMLKit tidak memerlukan kompilasi — antarmuka dimuat dari server, memungkinkan pembaruan konten tanpa melalui App Review. Ini digunakan oleh layanan streaming utama untuk korsel konten.

TVML: struktur template

TVML menyediakan template siap pakai: CatalogTemplate (katalog dengan bagian), ProductTemplate (halaman detail konten), FormTemplate (formulir masuk), LoadingTemplate (indikator pemuatan). Template dijelaskan dalam XML dan diberi gaya melalui atribut mirip CSS. Kode TVJS menangani penekanan dan memanggil API native.

<!-- CatalogTemplate — katalog film di TVML -->
<document>
  <catalogTemplate>
    <banner>
      <title>Film baru</title>
      <description>Pemutaran perdana baru dan eksklusif</description>
    </banner>
    <section>
      <header>
        <title>Populer</title>
      </header>
      <items>
        <lockup>
          <img src="https://cdn.example.com/movie1.jpg" width=300 height=450/>
          <title>Interstellar</title>
        </lockup>
        <lockup>
          <img src="https://cdn.example.com/movie2.jpg" width=300 height=450/>
          <title>Nachalo</title>
        </lockup>
      </items>
    </section>
  </catalogTemplate>
</document>

Template TVML CatalogTemplate berisi spanduk dengan judul dan bagian dengan elemen lockup. Setiap lockup adalah kartu film dengan gambar dan judul. Focus Engine secara otomatis mengelola navigasi antar elemen lockup. Saat ditekan, penangan TVJS menerima peristiwa select dan dapat menampilkan halaman detail melalui ProductTemplate.

TVJS: penanganan peristiwa

TVJS adalah lingkungan JavaScript yang terisolasi dari aplikasi utama. Kode TVJS dipanggil saat memuat template TVML dan menangani peristiwa. TVJS memiliki akses ke API native melalui Appliance dan Player untuk kontrol pemutaran video. Apple merekomendasikan penggunaan TVMLKit hanya untuk aplikasi media dengan pembaruan konten yang sering. Untuk game dan aplikasi interaktif, SwiftUI lebih disukai.

Mempublikasikan aplikasi tvOS

Mempublikasikan aplikasi tvOS memerlukan langganan Apple Developer Program ($99/tahun). Aplikasi diunggah melalui App Store Connect sebagai produk terpisah atau sebagai bagian dari biner universal (iOS + tvOS). App Review memeriksa stabilitas, kepatuhan HIG, dan batas ukuran 4 GB.

Membangun dan mendistribusikan

Xcode membuat target tvOS dengan ekstensi .app (paket .ipa). Arsitektur — arm64 (Apple TV menggunakan chip ARM Apple Silicon). tvOS tidak mendukung framework dengan i386 atau x86_64. Aplikasi ditandatangani dengan sertifikat Apple Development (pengujian) atau Apple Distribution (publikasi). Distribusi melalui Volume Purchase Program untuk klien bisnis dimungkinkan.

Persyaratan App Review

Persyaratan khusus tvOS: semua elemen antarmuka harus dapat diakses melalui Focus Engine tanpa menggunakan layar sentuh atau keyboard. Aplikasi yang memerlukan otorisasi harus mendukung Masuk Tunggal (SSO) melalui iTunes Store. Konten iklan tidak boleh mengganggu pemutaran tanpa persetujuan pengguna. Ukuran biner yang diunggah tidak boleh melebihi 4 GB.