Aplikasi mini DevTools

Setelah membahas aplikasi mini per se, saya ingin berfokus pada pengalaman developer untuk berbagai platform aplikasi super. Pengembangan aplikasi mini di semua platform terjadi di IDE yang disediakan secara gratis oleh platform aplikasi super. Masih banyak lagi, saya ingin fokus pada empat yang paling populer, dan yang kelima untuk perbandingan {i>Quick App<i}.

Seperti aplikasi super, sebagian besar IDE hanya tersedia dalam bahasa China. Sebaiknya pastikan bahwa Anda menginstal versi bahasa China, dan bukan versi bahasa Inggris (atau luar negeri) yang terkadang tersedia, karena versi tersebut mungkin bukan versi terbaru. Jika Anda adalah developer macOS, perhatikan bahwa tidak semua IDE ditandatangani, yang berarti macOS menolak untuk menjalankan penginstal. Anda dapat, dengan risiko Anda sendiri, mengabaikan ini sebagaimana yang dijelaskan oleh bantuan Apple.

Project awal aplikasi mini

Untuk memulai pengembangan aplikasi mini dengan cepat, semua penyedia aplikasi super menawarkan aplikasi demo yang dapat langsung didownload dan diuji, dan terkadang juga terintegrasi 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 telah login) yang dihasilkan oleh IDE. Anda sangat jarang perlu memasukkan sandi. Setelah login, IDE akan mengetahui identitas Anda dan memungkinkan Anda memulai pemrograman, proses debug, pengujian, dan pengiriman aplikasi untuk ditinjau. Di bawah ini, Anda dapat melihat screenshot dari lima IDE yang disebutkan dalam paragraf di atas.

Jendela aplikasi WeChat DevTools menampilkan simulator, editor kode, dan debugger.
WeChat DevTools dengan simulator, editor kode, dan debugger.
Jendela aplikasi Alipay DevTools menampilkan editor kode, simulator, dan debugger.
Alipay DevTools dengan editor kode, simulator, dan debugger.
Jendela aplikasi Baidu DevTools menampilkan simulator, editor kode, dan debugger.
Baidu DevTools dengan simulator, editor kode, dan debugger.
Jendela aplikasi ByteDance DevTools menampilkan simulator, editor kode, dan debugger.
ByteDance DevTools dengan simulator, editor kode, dan debugger.
Jendela aplikasi Quick App DevTools menampilkan editor kode, simulator, dan debugger.
Quick App DevTools dengan editor kode, simulator, dan debugger.

Seperti yang Anda lihat, komponen dasar dari semua IDE sangat mirip. Anda selalu memiliki editor kode berdasarkan Monaco Editor, project yang sama yang juga mendukung VS Code. Di semua IDE, terdapat debugger berdasarkan frontend Chrome DevTools dengan beberapa modifikasi, dan lebih banyak lagi nanti (lihat Debugger). IDE per se diimplementasikan sebagai aplikasi NW.js atau Electron, simulator dalam IDE diwujudkan sebagai tag NW.js <webview> atau tag Electron <webview>, yang kemudian didasarkan pada tag Chromium <webview>. Jika tertarik dengan internal IDE, sering kali Anda dapat memeriksanya dengan Chrome DevTools dengan pintasan keyboard Control+Alt+I (atau Command+Option+I di Mac).

Chrome DevTools digunakan untuk memeriksa DevTools milik Baidu yang menampilkan tag webview simulator di panel Elements pada Chrome DevTools.
Memeriksa Baidu DevTools dengan Chrome DevTools menunjukkan bahwa simulator diwujudkan sebagai tag Electron <webview>.

Simulator dan pengujian serta proses debug 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, serta menyimulasikan berbagai status jaringan, tekanan memori, peristiwa pembacaan kode batang, penghentian yang tidak terduga, dan mode gelap.

Meskipun simulator bawaan sudah cukup untuk memahami perilaku aplikasi, pengujian di perangkat, seperti aplikasi web biasa tidak akan tergantikan. Cukup dengan memindai kode QR saja untuk menguji aplikasi mini dalam pengembangan. Misalnya, di ByteDance DevTools, memindai kode QR yang dihasilkan secara dinamis oleh IDE dengan perangkat sungguhan akan mengarah ke versi aplikasi mini yang dihosting di cloud yang kemudian dapat segera diuji di perangkat. Cara kerjanya untuk ByteDance adalah URL di balik kode QR (contoh) mengalihkan ke halaman yang dihosting (contoh), yang berisi link dengan skema URI khusus seperti, misalnya, snssdk1128://, untuk melihat pratinjau aplikasi mini di berbagai aplikasi super ByteDance seperti Douyin atau Toutiao (ini adalah contoh). Penyedia aplikasi super lainnya tidak melewati halaman perantara, tetapi membuka pratinjau secara langsung.

ByteDance DevTools menampilkan kode QR yang dapat dipindai pengguna dengan aplikasi Douyin untuk melihat aplikasi mini saat ini di perangkat mereka.
ByteDance DevTools menampilkan kode QR yang dapat dipindai pengguna dengan aplikasi Douyin untuk pengujian langsung di perangkat.
Halaman landing menengah untuk melihat pratinjau aplikasi mini ByteDance di berbagai aplikasi super perusahaan, dibuka di browser desktop biasa untuk merekayasa balik prosesnya.
Halaman landing ByteDance menengah untuk melihat pratinjau aplikasi mini (dibuka di browser desktop untuk menampilkan alur).

Fitur yang lebih menarik adalah proses debug jarak jauh pratinjau berbasis cloud. Setelah hanya memindai kode QR khusus yang dibuat IDE, aplikasi mini akan terbuka di perangkat fisik, dengan jendela Chrome DevTools berjalan di komputer untuk proses debug jarak jauh.

Ponsel yang menjalankan aplikasi mini dengan bagian UI yang ditandai oleh debugger ByteDance DevTools yang berjalan di laptop yang memeriksanya.
Men-debug aplikasi mini secara nirkabel di perangkat sungguhan dengan ByteDance DevTools.

Debugger

Proses debug elemen

Pengalaman proses debug aplikasi mini sangat tidak asing bagi siapa saja yang pernah menggunakan Chrome DevTools. Namun, ada beberapa perbedaan penting yang membuat alur kerja disesuaikan dengan aplikasi mini. Sebagai ganti panel Elemen Chrome DevTools, IDE aplikasi mini memiliki panel yang disesuaikan yang disesuaikan dengan dialek HTML tertentu. Misalnya, dalam kasus WeChat, panelnya disebut Wxml, yang merupakan singkatan dari WeiXin Markup Language. Di Baidu DevTools, disebut Swan Element. ByteDance DevTools menyebutnya Bxml. Alipay menamainya AXML, dan Quick App merujuk panel sebagai UX. Saya akan membahas bahasa markup ini nanti.

Memeriksa gambar dengan panel &#39;Wxml&#39; WeChat DevTools. Ini menunjukkan bahwa tag yang digunakan adalah tag `image`.
Memeriksa elemen <image> dengan WeChat DevTools.

Elemen khusus di balik layar

Memeriksa WebView pada perangkat sungguhan melalui about://inspect/#devices menunjukkan bahwa WeChat DevTools sengaja menyembunyikan kebenaran. Saat WeChat DevTools menampilkan <image>, hal sebenarnya yang saya lihat adalah elemen kustom yang disebut <wx-image> dengan <div> sebagai satu-satunya turunannya. Sangat menarik untuk diperhatikan bahwa elemen kustom ini tidak menggunakan Shadow DOM. Selengkapnya tentang komponen ini nanti.

Memeriksa aplikasi mini WeChat yang berjalan di perangkat sungguhan dengan Chrome DevTools. Di mana WeChat DevTools melaporkan bahwa saya melihat tag `image`, Chrome DevTools menunjukkan bahwa saya benar-benar menangani elemen kustom `wx-image`.
Pemeriksaan elemen <image> dengan WeChat DevTools menunjukkan bahwa elemen tersebut sebenarnya adalah elemen kustom <wx-image>.

Proses debug CSS

Perbedaan lainnya adalah unit panjang baru rpx untuk piksel responsif dalam berbagai dialek CSS (selengkapnya tentang unit ini nanti). WeChat DevTools menggunakan unit panjang CSS yang tidak bergantung perangkat, agar pengembangan untuk berbagai ukuran perangkat menjadi lebih intuitif.

Memeriksa tampilan dengan padding atas dan bawah yang ditentukan sebesar `200rpx` di WeChat DevTools.
Memeriksa padding yang ditentukan dalam piksel responsif (200rpx 0) pada tampilan dengan WeChat DevTools.

Audit performa

Performa menjadi prioritas utama untuk aplikasi mini, jadi tidak mengherankan jika WeChat DevTools dan beberapa DevTools lainnya memiliki alat audit terintegrasi yang terinspirasi Lighthouse. Area fokus audit ini 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.

Menjalankan audit kinerja dengan alat audit bawaan. Skor menunjukkan Total, Performa, Pengalaman, dan Praktik Terbaik, masing-masing 100 dari 100 poin.
Alat Audit bawaan di WeChat DevTools yang menampilkan Total, Performa, Pengalaman, dan Praktik Terbaik.

Tiruan API

Daripada mengharuskan developer menyiapkan layanan terpisah, meniru respons API adalah bagian langsung dari WeChat DevTools. Melalui antarmuka yang mudah digunakan, developer dapat menyiapkan endpoint API dan respons tiruan yang diinginkan.

Menyiapkan respons tiruan untuk endpoint API di WeChat DevTools.
Fitur tiruan respons API terintegrasi WeChat DevTools.

Ucapan terima kasih

Artikel ini ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.