Live Dev - lihat setiap penyimpanan di ponsel Anda

1Apa itu Live Dev#

Live Dev membuat APLIKASI DEV untuk ponsel Anda sendiri. Alih-alih mengemas file Anda di dalam APK, aplikasi memuatnya dari dev server yang berjalan di PC Anda - jadi setiap kali Anda menyimpan file, perubahannya tampil di ponsel. Tanpa build ulang, tanpa instal ulang, tanpa menyalin ZIP.

Ini adalah shell AppMint yang asli, bukan tab browser: kamera, lokasi, notifikasi, iklan, tombol kembali, menu samping, dan setiap bridge AppMint berperilaku persis seperti di aplikasi jadi Anda.

Anda membuatnya sekali. Setelah itu Anda hanya kembali ke AppMint saat mengubah sesuatu yang native - izin, ikon, splash, ID iklan.

2Build aplikasi dev (sekali)#

1. Di layar beranda ketuk 'Live Dev' (atau Create APK → ubin 'Live Dev').
2. Pilih port server dev Anda. Satu ketukan untuk alat yang umum: Vite 5173, React / Next 3000, Angular 4200, Vue CLI 8080, Live Server 5500, Python 8000, Astro 4321. Port apa pun mulai dari 1024 bisa dipakai.
3. Opsional: halaman awal seperti /admin/index.html, dan alamat PC Anda. Biarkan alamat kosong - aplikasi menemukan PC Anda sendiri.
4. Beri nama paket yang diakhiri .dev (misalnya com.myshop.dev) agar bisa berdampingan dengan aplikasi asli Anda nanti.
5. Di langkah Access centang izin yang ingin Anda uji (kamera, lokasi, notifikasi…). Ini bersifat native, jadi ditetapkan saat Anda membuat build.
6. Build dan pasang APK di ponsel Anda.

Build Live Dev tidak pernah menghasilkan bundel Play (AAB): ia hanya berfungsi di dekat PC Anda, jadi tidak boleh diterbitkan.

3Jalankan server dev Anda agar ponsel dapat menjangkaunya#

Secara default kebanyakan dev server hanya mendengarkan PC itu sendiri. Tambahkan switch 'host' agar perangkat lain di Wi-Fi Anda bisa terhubung:

• Vite (React, Vue, Svelte, Astro): npm run dev -- --host
• Next.js: npx next dev -H 0.0.0.0
• Angular: ng serve --host 0.0.0.0
• Create React App / Vue CLI: sudah mendengarkan di jaringan

Hanya punya folder berisi file HTML? Salah satu ini mengubahnya menjadi server - jalankan di dalam folder:

• npx serve -l 5500
• python -m http.server 8000
• VS Code: pasang 'Live Server', lalu klik 'Go Live'

Windows menanyakan sekali apakah mengizinkan server melewati firewall - centang 'Private networks' dan izinkan. Jika Anda mengeklik Cancel, ponsel tidak bisa terhubung sampai Anda mengizinkan Node (atau Python) di Windows Security → Firewall → Allow an app.

npm run dev -- --host

4Sambungkan lewat Wi-Fi - tanpa kabel, tanpa perlu instal apa pun#

1. Hubungkan ponsel ke Wi-Fi yang sama dengan PC.
2. Buka aplikasi Live Dev Anda.

Hanya itu. Aplikasi mencari server dev Anda di port yang Anda pilih, menemukan PC Anda, lalu memuat halamannya. Aplikasi mengingat PC itu untuk lain kali. Jika server Anda memakai port berbeda, atau beberapa PC menjawab, aplikasi menampilkannya dan Anda tinggal mengetuk milik Anda.

Tidak ditemukan? Layar koneksi terus mencoba setiap dua detik dan membuka halaman dengan sendirinya begitu server Anda terjangkau - nyalakan server dan lihat. 'Find my PC' juga memeriksa port umum lainnya. Anda selalu bisa mengetik alamat yang dicetak Vite di bawah 'Network:' ke 'Enter it yourself'.

Mengapa ini lebih baik daripada mengetik http://192.168.1.5:5173 ke aplikasi situs web: halaman tetap berjalan sebagai http://localhost:PORT di ponsel (aplikasi menerowongnya ke PC Anda). localhost adalah SECURE CONTEXT, sehingga kamera, mikrofon, lokasi, clipboard, service worker, dan passkey berfungsi. Pada alamat 192.168… biasa, mesin browser memblokir semuanya.

5Sambungkan lewat USB - berfungsi tanpa Wi-Fi sama sekali#

Gunakan ini saat PC dan ponsel berada di jaringan berbeda, di Wi-Fi tamu yang mencegah perangkat saling terlihat, atau tanpa jaringan sama sekali.

1. Di ponsel: Pengaturan → Tentang ponsel → ketuk 'Nomor build' tujuh kali, lalu Opsi pengembang → aktifkan 'Debugging USB'.
2. Colokkan ponsel ke PC dan terima prompt 'Allow USB debugging'.
3. Di PC jalankan perintah di bawah (gunakan port Anda). adb ada di Android Studio, atau unduh 'SDK Platform-Tools' dari Google - berupa ZIP kecil.
4. Buka aplikasi Live Dev Anda. Ia mendeteksi koneksi USB dan memakainya sebelum mencoba Wi-Fi.

Jalankan perintah lagi setelah Anda mencabut kabel atau memulai ulang ponsel. Dengan USB Anda TIDAK memerlukan opsi 'host' dari langkah 3.

Jika layar sambungan menampilkan 'USB link is up, but nothing answers on your PC's port' - bagian kabel sudah berfungsi dan server dev Anda memang belum berjalan.

adb reverse tcp:5173 tcp:5173

Unduh SDK Platform-Tools (adb) →

6Tombol DEV#

Tombol DEV kecil melayang di tepi aplikasi - seret ke mana saja. Tombol ini berubah merah dengan angka saat halaman Anda mencatat kesalahan. Ketuk untuk:

• Muat ulang - selalu mengambil salinan baru setiap file, tidak pernah dari cache.
• Console - semua yang dicatat halaman Anda, error dan peringatan berwarna, dengan file dan baris (src/App.tsx:42). 'Errors' memfilter, 'Copy' menaruh seluruh log di clipboard - tempel ke chat atau laporan bug.
• Run JavaScript - satu baris di bagian bawah konsol. Ketik ekspresi apa pun dan lihat hasilnya, langsung di ponsel. Promise ditunggu dan dicatat.
• Refresh saat simpan - lihat langkah berikutnya.
• Ganti server - PC lain atau port lain, tanpa build ulang.
• Hapus data situs dan muat ulang - menghapus cookie, localStorage, dan IndexedDB untuk uji coba pertama yang bersih.
• Info sambungan - alamat, USB atau Wi-Fi, dan IP ponsel ini.

Untuk DevTools lengkap (elemen, jaringan, breakpoint) colokkan kabel, buka chrome://inspect di Chrome pada PC dan pilih aplikasi Anda.

7Refresh saat simpan - bahkan untuk HTML biasa#

Vite, Next, Angular, dan webpack memasukkan perubahan Anda ke halaman secara otomatis (hot reload). Aplikasi mendeteksinya dan tidak ikut campur.

Folder biasa yang dilayani python, 'npx serve', atau server statis lain tidak punya hot reload - biasanya Anda menyimpan, lalu tarik untuk refresh, setiap kali. Live Dev melakukannya untuk Anda: ia mengingat file mana yang dimuat halaman, menanyakan server Anda sekali per detik apakah ada yang berubah, dan me-refresh saat ada. File .css yang berubah diganti di tempat tanpa memuat ulang, sehingga posisi gulir dan input formulir Anda tetap saat Anda menata gaya.

Tidak ada yang perlu diinstal di PC. Matikan dari tombol DEV jika Anda ingin kontrol manual. Layar juga tetap menyala selama aplikasi Live Dev terbuka.

8Jika sudah selesai: buat aplikasi sungguhan#

Aplikasi Live Dev hanya berfungsi di dekat PC Anda - jangan pernah berikan kepada pengguna. Saat proyek siap:

• Proyek framework (Vite, React, Vue…): jalankan 'npm run build', ZIP folder dist (atau ZIP seluruh proyek sumber), dan build di Create APK → Offline ZIP.
• Folder HTML biasa: ZIP dengan index.html di bagian atas → Offline ZIP. Hanya satu file? Gunakan kotak HTML.
• Sudah dideploy ke alamat https:// sungguhan: Create APK → Website.

Gunakan nama paket asli Anda untuk build itu. Karena paket aplikasi dev berakhir .dev, keduanya bisa terpasang berdampingan.

9Jika tidak terhubung#

• Wi-Fi: 'Waiting for your dev server' terus-menerus → server hanya mendengarkan PC. Mulai ulang dengan switch host dari langkah 3 (Vite mencetak baris 'Network:' saat sudah benar).

• Wi-Fi: masih belum ada → firewall Windows memblokirnya (langkah 3), atau router mengisolasi perangkat (umum di Wi-Fi tamu, kantor, dan hotel). Gunakan USB, atau nyalakan hotspot ponsel dan hubungkan PC ke sana.

• USB: 'adb' tidak dikenali → instal Platform-Tools dan jalankan perintah dari folder tersebut. 'no devices' → terima permintaan debugging USB di ponsel, atau coba kabel lain (banyak kabel hanya untuk mengisi daya).

• 'Port … is busy on this phone' → aplikasi lain di ponsel memakai port itu. Jalankan dev server Anda di port lain dan masukkan di 'Enter it yourself'.

• Vite menampilkan 'Blocked request. This host is not allowed' → Anda membuka alamat PC di browser biasa atau aplikasi situs web. Aplikasi Live Dev tidak pernah memicu ini, karena selalu meminta localhost.

• Halaman berhasil dimuat tetapi panggilan API gagal → daftar CORS backend Anda harus mengizinkan http://localhost:PORT (kebanyakan pengaturan dev sudah begitu), dan URL API yang ditulis sebagai http://localhost:4000 berarti PONSEL. Teruskan port itu juga (adb reverse tcp:4000 tcp:4000) atau gunakan alamat PC untuk API.

• Halaman kosong setelah berganti proyek di port yang sama → DEV → Hapus data situs dan muat ulang (service worker lama yang menjawab).