Pengalaman developer
Setelah membahas aplikasi mini itu sendiri, saya ingin berfokus pada pengalaman developer untuk berbagai platform aplikasi super. Pengembangan aplikasi mini di semua platform dilakukan di IDE yang disediakan secara gratis oleh platform aplikasi super. Meskipun ada lebih banyak, saya ingin berfokus pada empat yang paling populer, dan yang kelima untuk Aplikasi Cepat sebagai perbandingan.
IDE aplikasi mini
Seperti aplikasi super, sebagian besar IDE hanya tersedia dalam bahasa China. Sebenarnya, Anda ingin memastikan bahwa Anda menginstal versi China, bukan versi Inggris (atau luar negeri) yang terkadang tersedia, karena mungkin sudah tidak terbaru. Jika Anda adalah developer macOS, perlu diketahui bahwa tidak semua IDE ditandatangani, yang berarti macOS menolak menjalankan penginstal. Anda dapat, dengan risiko yang Anda tanggung sendiri, melewati tindakan ini seperti yang dijelaskan oleh bantuan Apple.
Project permulaan aplikasi mini
Untuk mulai mengembangkan aplikasi mini dengan cepat, semua penyedia aplikasi super menawarkan aplikasi demo yang dapat didownload dan diuji secara langsung, dan terkadang juga diintegrasikan dalam wizard "Project Baru" dari berbagai IDE.
Alur pengembangan
Setelah meluncurkan IDE dan memuat atau membuat aplikasi mini (demo), langkah pertama adalah selalu login. Biasanya, Anda hanya perlu memindai kode QR dengan aplikasi super (tempat Anda sudah login) yang dibuat oleh IDE. Anda sangat jarang harus memasukkan sandi. Setelah Anda login, IDE akan mengetahui identitas Anda dan memungkinkan Anda memulai pemrograman, men-debug, menguji, dan mengirimkan aplikasi untuk ditinjau. Di bawah ini, Anda dapat melihat screenshot lima IDE yang disebutkan dalam paragraf di atas.
Seperti yang dapat Anda lihat, komponen dasar semua IDE sangat mirip. Anda selalu memiliki editor
kode berdasarkan Monaco Editor, project yang sama
yang juga mendukung VS Code. Di semua IDE, ada debugger
berdasarkan frontend Chrome DevTools dengan
beberapa modifikasi, yang akan dibahas nanti (lihat Debugger). IDE per se diimplementasikan sebagai aplikasi NW.js atau Electron, dan simulator di IDE diwujudkan sebagai tag NW.js <webview> atau Electron <webview>, yang pada gilirannya didasarkan pada tag Chromium <webview>. Jika Anda tertarik dengan
internal IDE, Anda sering kali dapat memeriksanya dengan Chrome DevTools menggunakan pintasan
keyboard Control+Alt+I (atau
Command+Option+I di Mac).
<webview> Electron.
Pengujian dan proses debug simulator dan perangkat sungguhan
Simulator ini sebanding dengan apa yang mungkin Anda ketahui dari mode perangkat Chrome DevTools. Anda dapat melakukan simulasi berbagai perangkat Android dan iOS, mengubah skala dan orientasi perangkat, tetapi juga melakukan simulasi berbagai status jaringan, tekanan memori, peristiwa pembacaan kode batang, penghentian yang tidak terduga, dan mode gelap.
Meskipun simulator bawaan sudah cukup untuk mendapatkan gambaran kasar tentang perilaku aplikasi, pengujian di perangkat, seperti pada aplikasi web biasa, tidak dapat digantikan. Pengujian aplikasi mini dalam pengembangan hanya memerlukan pemindaian kode QR. Misalnya, di ByteDance DevTools, memindai kode QR yang dibuat secara dinamis oleh IDE dengan perangkat sungguhan akan mengarah ke versi aplikasi mini yang dihosting di cloud yang kemudian dapat langsung diuji di perangkat. Cara kerjanya untuk ByteDance adalah URL di balik kode QR
(example) dialihkan ke halaman yang dihosting
(example),
yang berisi link dengan skema URI khusus seperti, misalnya, snssdk1128://, untuk melihat pratinjau aplikasi mini di berbagai aplikasi super ByteDance seperti Douyin atau Toutiao
(berikut contohnya).
Penyedia aplikasi super lainnya tidak melalui halaman perantara, tetapi membuka pratinjau secara langsung.
Fitur yang lebih menarik adalah pen-debugan jarak jauh pratinjau berbasis cloud. Setelah memindai kode QR khusus yang dibuat IDE, aplikasi mini akan terbuka di perangkat fisik, dengan jendela Chrome DevTools yang berjalan di komputer untuk proses debug jarak jauh.
Debugger
Proses debug elemen
Pengalaman men-debug aplikasi mini sangat mirip dengan pengalaman men-debug di Chrome DevTools. Namun, ada beberapa perbedaan penting yang membuat alur kerja disesuaikan dengan aplikasi mini. Alih-alih panel Elemen Chrome DevTools, IDE aplikasi mini memiliki panel yang disesuaikan dan dibuat khusus untuk dialek HTML tertentu. Misalnya, dalam kasus WeChat, panelnya disebut Wxml, yang merupakan singkatan dari WeiXin Markup Language. Di Baidu DevTools, fitur ini disebut Swan Element. ByteDance DevTools menyebutnya Bxml. Alipay menyebutnya AXML, dan Aplikasi Cepat merujuk panel hanya sebagai UX. Saya akan mempelajari bahasa markup ini nanti.
<image> dengan WeChat DevTools.
Elemen kustom di balik layar
Memeriksa WebView di perangkat sungguhan melalui about://inspect/#devices
mengungkapkan bahwa WeChat DevTools dengan sengaja menyembunyikan kebenaran. Jika WeChat DevTools menampilkan
<image>, sebenarnya yang saya lihat adalah elemen kustom bernama <wx-image> dengan <div>
sebagai satu-satunya turunannya. Perlu diperhatikan bahwa elemen kustom ini tidak menggunakan
DOM Bayangan. Informasi selengkapnya tentang komponen ini akan diberikan nanti.
<image> dengan WeChat DevTools mengungkapkan bahwa elemen tersebut sebenarnya adalah elemen kustom <wx-image>.
Proses debug CSS
Perbedaan lainnya adalah unit panjang rpx baru untuk piksel responsif dalam berbagai dialek CSS
(selengkapnya tentang unit ini nanti). WeChat DevTools menggunakan unit panjang CSS yang independen dengan perangkat untuk
membuat pengembangan untuk berbagai ukuran perangkat menjadi lebih intuitif.
200rpx 0) tampilan dengan WeChat DevTools.
Audit performa
Performa adalah hal yang paling penting untuk aplikasi mini, jadi tidak mengherankan jika WeChat DevTools dan beberapa DevTools lainnya memiliki alat audit terintegrasi yang terinspirasi dari Lighthouse. Area fokus audit adalah Total, Performa, Pengalaman, dan Praktik Terbaik. Tampilan IDE dapat disesuaikan. Pada screenshot di bawah, saya telah menyembunyikan editor kode untuk sementara agar memiliki ruang layar yang lebih luas untuk alat audit.
Peniruan API
Daripada mengharuskan developer menyiapkan layanan terpisah, peniruan respons API secara langsung merupakan bagian dari WeChat DevTools. Melalui antarmuka yang mudah digunakan, developer dapat menyiapkan endpoint API dan respons tiruan yang diinginkan.
Ucapan terima kasih
Artikel ini ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.