Pengembangan SmartTV menyapu bawah air

Halo, Habr!

Sudah lama ada ide untuk menulis artikel tentang masalah pengembangan SmartTV, tetapi ketika kami menyelam ke daerah ini, kami menemukan sepeda kami sendiri, yang membantu kami memecahkan masalah ini. Oleh karena itu, dalam artikel ini, kami tidak hanya akan menyoroti beberapa aspek bermasalah dari pengembangan SmartTV, tetapi juga berbicara tentang bagaimana menyelesaikannya menggunakan kerangka kerja PureQML baru berikutnya .

Setiap orang yang tertarik dengan topik ini atau hanya ingin melihat kerangka baru, yang juga bisa di SmartTV, kami meminta kucing.

Kebun binatang

Untuk memulainya, di alam ada banyak platform SmartTV dan banyak dari mereka diarahkan untuk meluncurkan aplikasi web. Ini mungkin memberikan ilusi bahwa cukup untuk menulis kode sekali dan menggunakannya pada semua platform. Namun pada kenyataannya, semua platform memiliki beberapa perbedaan yang harus diperhitungkan. Di antara fitur-fitur ini, berikut ini dapat dibedakan:

• Menangani tombol remote control ditekan . Tidak semua produsen menggunakan kode kunci yang sama untuk tombol remote control yang sama. Sebagai contoh, Anda dapat membandingkan kode kunci untuk platform orsay dan webos . Untuk tizen, perlu mendaftarkan beberapa tombol secara eksplisit untuk penggunaan di masa mendatang.
• Pemutar video Banyak platform mendukung pemutar video html5, tetapi, misalnya, tizen menggunakan AVPlay , dan untuk orsay menggunakan API sendiri untuk bekerja dengan pemutar asli.
• Informasi tentang perangkat . Mendapatkan informasi tentang perangkat di setiap platform juga diimplementasikan secara berbeda, di NetCast objek khusus dibuat dengan id-shnik khusus, dalam kasus lain, metode khusus untuk setiap platform digunakan.
• Fokus Aplikasi SmartTV terutama difokuskan pada remote control, dan oleh karena itu UI / UX harus diimplementasikan dengan mempertimbangkan penggunaan tombol navigasi: atas, bawah, kanan, kiri, OK dan kembali, penting untuk tidak kehilangan fokus dan dengan jelas menunjukkan di mana sekarang .

Dokumentasi

Selain variasi platform dan dokumentasi untuk platform ini, masalahnya adalah beberapa produsen merilis versi baru yang, kadang-kadang, kehilangan kompatibilitas di beberapa tempat, atau bahkan beralih ke platform baru, yang pada dasarnya tidak kompatibel dengan yang sebelumnya (seperti transisi LG dengan NetCast di WebOS). Pada saat yang sama, platform baru sedang dipromosikan secara intensif, yang membuatnya sulit untuk menemukan informasi di platform lama, karena beberapa bagian dokumentasi dihapus atau ditransfer, yang kadang-kadang dapat menyebabkan tautan mati dalam tips tentang formulir.

Instalasi

Sekali lagi, karena beragamnya platform, proses pemasangan aplikasi pada perangkat debugging itu sendiri juga berbeda. Misalnya, untuk AndroidTV Anda dapat menggunakan adb, tizen memiliki analognya sendiri - sdb , untuk skrip CLI WebOS khusus, dll. Masing-masing alat ini perlu diinstal dan dikonfigurasi. Di sini Anda dapat menambahkan masalah pembaruan platform intensif, dengan pembaruan SDK dan IDE yang menyertainya. Contoh dari masalah seperti itu adalah kasus dengan Tizen Studio. Setelah mengunduh versi terbaru, Anda dapat menginstal aplikasi hanya di TV-samsung TV4 TV, sementara tidak ada cara mudah untuk menginstal aplikasi pada versi TV yang lebih lama, yang sifatnya jauh lebih besar (jika Anda tiba-tiba menghadapi masalah ini, lihat tautannya ) dan bahkan setelah tarian yang sukses dengan rebana, IDE kehilangan kemampuan untuk menginstal aplikasi di TV TV-samsung tv4 ¯ \ _ (ツ) _ / ¯

Moderasi

Untuk mempublikasikan aplikasi, perlu lulus moderasi dari masing-masing produsen, dan masing-masing memiliki aturan dan fitur sendiri. Dalam hal ini, Anda harus bersabar, karena aplikasi dapat diperiksa lebih dari satu minggu dan ini harus diperhitungkan ketika merencanakan tenggat waktu, mis. aplikasi harus dipublikasikan dengan baik sebelum rilis (jika Anda tiba-tiba khawatir aplikasi akan muncul sebelum acara pemasaran - jangan takut, ketika mengirim untuk moderasi ada titik di mana Anda dapat menentukan tanggal sebelum aplikasi tidak akan dipublikasikan).

Anda juga harus siap dengan fakta bahwa penyebab penolakan dapat menjadi hal sepele, misalnya, jawaban yang salah dalam daftar periksa diri (daftar pertanyaan yang harus dijawab pengembang sebelum mengirim aplikasi, misalnya: "Apakah aplikasi Anda mengandung virus", dll.) atau karena kesalahpahaman dalam deskripsi aplikasi UX. Mungkin ada situasi lucu, misalnya, ada kasus ketika mereka membungkus aplikasi dengan streaming saluran televisi, karena mereka mengambil garis merayap di udara salah satu saluran sebagai artefak grafis, menjadikannya sebagai bagian dari OSD .

AndroidTV & tvOS

Kami juga harus menyebutkan AndroidTV dan tvOS, sebagai platform ini tidak mendukung peluncuran aplikasi web secara eksplisit. Untuk tvOS, bahasa seperti xml sendiri digunakan: TVML, dan apa yang sangat menarik, Anda dapat mengeset bahasa ini, tetapi hanya dalam satu set templat tertentu, cukup sulit untuk melakukan sesuatu yang sepenuhnya sewenang-wenang. Dengan bantuan pembatasan semacam itu, semua aplikasi untuk tvOS dipaksa untuk mematuhi panduan gaya tunggal, dan jika Anda tidak melangkah jauh darinya, maka proses penulisan aplikasi akan menjadi sederhana.

Di android, situasinya lebih baik, karena Ada beberapa cara untuk menjalankan aplikasi web, kami akan membicarakannya sebentar lagi.

Bagaimana kita melakukannya?

Menghadapi kenyataan, kami pertama-tama mempelajari solusi yang ada, tetapi sayangnya saya tidak menyukai hal yang universal dan nyaman: smartbox tidak nyaman, reaksi tidak menyelesaikan masalah TV tertentu, seperti, pada kenyataannya, kerangka kerja lain yang lebih berorientasi web.

Sekarang mari kita lihat bagaimana PureQML menangani ini (yang sudah kami tulis di sini dan di sini ). Singkatnya, ini adalah kerangka kerja js yang memungkinkan mendeskripsikan deklaratif UI dalam bahasa seperti qml, yang membantu untuk dengan cepat membuat aplikasi abstrak dari html, css dan hal-hal lainnya. Untuk memecahkan masalah SmartTV secara khusus, modul qmlcore-tv terpisah ditulis di bawah lisensi CC-BY-4.0, yang mendukung platform berikut:

• LG webOS
• LG NetCast
• Samsung Tizen
• Samsung Orsay
• TV Opera
• Hisense
• AndroidTV

Dan inilah cara dia memecahkan masalah di atas:

• Memproses tombol kendali jarak jauh . Untuk platform yang didukung, pemetaan kode kunci diterapkan dan dalam kode klien cukup dengan hanya menulis penangan yang diinginkan, misalnya, untuk tombol fungsi merah pada kendali jarak jauh, Anda dapat menulis penangan:
  

  onRedPressed { /*   */ } 

• Pemutar video Untuk bekerja dengan pemain, ada komponen VideoPlayer khusus yang menggambarkan antarmuka untuk bekerja dengan video, dan implementasi platform dipilih untuk platform target pada tahap pembuatan. Berikut ini adalah contoh penggunaan: memutar video berulang menggunakan tautan layar penuh:
  
  

   VideoPlayer { width: 100%; height: 100%; autoPlay: true; source: "http://media.w3.org/2010/05/bunny/movie.mp4"; } 

• Informasi tentang perangkat . Untuk mendapatkan informasi tentang perangkat, cukup menggunakan kontrol Perangkat, dengan analogi dengan pemain, itu menggambarkan antarmuka, dan implementasinya diambil untuk platform yang dirakit. Berikut ini adalah contoh kode untuk menampilkan teks dengan ID perangkat di layar:
  
  

   Device { id: device; } Text { text: “DeviceID: ” + device.deviceId; } 

• Fokus Fitur dasar dari kerangka itu sendiri sudah membantu di sini, bahwa pada satu saat dalam waktu hanya ada satu fokus tunggal, yang ada dan tidak hilang di mana pun. Untuk bekerja dengan fokus, Anda dapat menggunakan properti deklaratif:
  fokus - bendera boolean yang menunjukkan bahwa elemen ini dapat difokus atau tidak
  activeFocus - flag boolean yang benar ketika elemen ini mengandung fokus, dan false jika tidak
• Instalasi Untuk pemasangan aplikasi PureQML yang nyaman di TV, Anda dapat menggunakan skrip smart-tv-deployer, cukup tekuk ke akar proyek PureQML. Untuk membangun sebuah proyek, katakanlah, untuk TV webos dengan nama "myTV" (tepat sebelum Anda perlu mengatur TV, untuk rincian lebih lanjut tentang pengaturan TV WebOS lihat di sini ), Anda perlu memanggil perintah:
  
  

   ./smart-tv-deployer/build -p webos -t myTV 

• AndroidTV . Di sini, seperti untuk android, bahasa asli adalah java, dan untuk port aplikasi web di sana kami menggunakan proyek cordova . Kerangka kerja ini memungkinkan Anda untuk menghasilkan aplikasi android dengan WebView, di mana aplikasi web itu sendiri diluncurkan. Juga, pekerjaan aktif sedang berlangsung untuk menerjemahkan kode PureQML ke dalam bahasa asli.

Contoh

Sebagai contoh, kami menunjukkan cara port aplikasi dari artikel sebelumnya ke SmartTV.

Seperti yang kami sebutkan di atas, UX di TV berbeda dari browser desktop, dan Anda harus menambahkan beberapa perubahan pada kode untuk mendukung bekerja dengan tombol remote:

 onSelectPressed: { osd.toggleActive() } onBackPressed: { if (osd.active) osd.toggleActive() else _globals.closeApp() } 

Dalam kode ini, kami menambahkan pemrosesan untuk menekan tombol "Pilih" dan "Kembali", ketika Anda menekan yang pertama menghidupkan / mematikan OSD (yang dengan peta dan titik lokasi stasiun) ketika Anda menekan "Kembali", jika OSD terbuka, tutup, jika ditutup, lalu tutup aplikasi itu sendiri.
Hasil akhir dapat dilihat dalam video:

Kesimpulan

Hasilnya, PureQML berkinerja baik sebagai alat untuk mengembangkan aplikasi SmartTV, dan kami sendiri menggunakannya secara intensif untuk tujuan ini.
Jika Anda memiliki pertanyaan atau ingin lebih banyak artikel tentang pengembangan SmartTV atau PureQML - tulis di komentar atau di saluran telegram , kami akan mencoba menjawab semuanya.

Terima kasih atas perhatian anda! =)

Referensi

Situs proyek
Halaman github
Sumber earth-online
Saluran dukungan Telegram