Belajar NativePHP - Development Loop: Hot Reload & Debugging

#Pendahuluan

Setelah di episode 15 kita mengintegrasikan backend Laravel dengan sync patterns, pada episode ini kita optimalkan development loop: bagaimana mengedit kode dan melihat perubahan secara instan tanpa rebuild penuh setiap kali. Hot reload dan debugging tools yang baik adalah produktivitas multiplier — dari edit-ke-view dalam detik, bukan menit.

#Hot Reload

#Konfigurasi Hot Reload

NativePHP mendukung hot reload — saat kalian mengubah kode PHP/Blade, perubahan tercermin di perangkat secara real-time tanpa restart:

<?php
 
return [
    'development' => [
        'hot_reload' => true,
        'hot_reload_port' => 8080, // port untuk file watching
        'auto_refresh' => true,
    ],
];

#Real-Device Hot Reload (iOS)

Di iOS, hot reload bekerja via WebSocket. Pastikan komputer development dan perangkat berada di jaringan yang sama:

php artisan native:run ios --hot

Command ini memulai file watcher dan WebSocket server. Saat kalian mengedit file PHP/Blade, perubahan dikirim ke perangkat dan WebView/native view di-refresh.

#Workflow Development

# Terminal 1: Jalankan aplikasi dengan hot reload
php artisan native:run ios --hot
 
# Terminal 2: Edit kode
# Buka editor, edit resources/views/livewire/task-list.blade.php
# Perubahan muncul di simulator dalam 1-2 detik
 
# Terminal 3: Jalankan queue worker (opsional)
php artisan queue:work

Dengan hot reload, kalian tidak perlu menunggu build penuh setiap kali mengubah Blade template atau Livewire component. Perubahan PHP dan Blade di-apply secara instan.

#native:debug Command

Untuk debugging yang lebih mendalam, gunakan native:debug:

php artisan native:debug

Debug mode:

1. Menjalankan aplikasi dengan verbose logging.
2. Membuka log streaming dari PHP runtime ke terminal.
3. Mengaktifkan remote debugging port untuk Xdebug atau PHPStorm.
4. Menampilkan error detail yang disembunyikan di production.

#Log Streaming

<?php
 
use Illuminate\Support\Facades\Log;
 
// Semua Log::info/error/warning akan muncul di terminal
Log::info('Application started');
Log::error('Something failed', ['context' => $data]);
Log::warning('Memory usage high', ['bytes' => memory_get_usage(true)]);

Di terminal debug, log muncul secara real-time:

[2026-08-16 10:30:01] local.INFO: Application started
[2026-08-16 10:30:05] local.ERROR: Something failed {"context": {...}}

#PHP Remote Debugging

Untuk breakpoint debugging, konfigurasikan Xdebug di NativePHP:

<?php
 
return [
    'xdebug' => [
        'enabled' => true,
        'host' => env('XDEBUG_HOST', 'host.docker.internal'),
        'port' => env('XDEBUG_PORT', 9003),
    ],
];

#Integrasi Xcode (iOS)

Buka proyek iOS di Xcode untuk debugging native shell:

open resources/native/ios/NativePHPApp.xcodeproj

Di Xcode, kalian bisa:

1. Set breakpoint di Swift code (AppDelegate, plugin native).
2. View console dari native shell.
3. Profile performa dengan Instruments.
4. Debug memory leaks dan allocation.

#Debugging Swift-PHP Bridge

@objc func handleMessage(_ message: [String: Any]) {
    print("[Bridge] Received: \(message)")  // Muncul di Xcode console
 
    guard let action = message["action"] as? String else {
        print("[Bridge] Invalid message format")
        return
    }
 
    // Set breakpoint di sini untuk debug bridge
    switch action {
    case "camera.capture":
        handleCameraCapture(message)
    case "biometric.authenticate":
        handleBiometricAuth(message)
    default:
        print("[Bridge] Unknown action: \(action)")
    }
}

#Integrasi Android Studio

open resources/native/android/

Di Android Studio, kalian bisa:

1. Debug Kotlin code dengan breakpoint dan variable inspection.
2. View Logcat untuk melihat log dari Android shell.
3. Profile performa dengan Android Profiler.
4. Monitor memory dan CPU usage.

#Logcat untuk Debugging

class NativeBridge {
    companion object {
        private const val TAG = "NativePHP"
    }
 
    fun handleMessage(message: Map<String, Any>) {
        Log.d(TAG, "Received: $message")  // Muncul di Logcat
 
        when (message["action"]) {
            "camera.capture" -> handleCameraCapture(message)
            "biometric.authenticate" -> handleBiometricAuth(message)
            else -> Log.w(TAG, "Unknown action: ${message["action"]}")
        }
    }
}

#Debugging di Perangkat Fisik

Hot reload dan debug juga bekerja di perangkat fisik. Pastikan:

1. iOS: perangkat terdaftar di Developer Account dan dipercaya oleh Xcode.
2. Android: USB debugging aktif (Developer Options → USB Debugging).
3. Jaringan: komputer dan perangkat di WiFi yang sama (untuk hot reload wireless).

php artisan native:run android --device=YOUR_DEVICE_SERIAL --debug

#Penutup

Inti yang harus dibawa pulang:

• Hot reload mempercepat development: edit kode → perubahan muncul di perangkat dalam 1-2 detik.
• native:debug mengaktifkan verbose logging, log streaming, dan remote debugging.
• Xcode untuk debugging Swift code dan bridge di iOS.
• Android Studio untuk debugging Kotlin code dan Logcat di Android.
• Perangkat fisik: hot reload dan debug juga bekerja di device nyata.

Di episode 17 selanjutnya, kita akan membahas Desktop Apps dengan Electron — NativePHP Electron untuk macOS/Windows/Linux, menu & tray, window management, serta strategi satu repo untuk web + desktop + mobile. Sampai jumpa di episode 17!