Belajar NativePHP - Desktop Apps dengan Electron

#Pendahuluan

Setelah di episode 16 kita mengoptimalkan development loop dengan hot reload dan debugging, pada episode ini kita melihat NativePHP dari sisi desktop: bagaimana kode Laravel yang sama bisa dijalankan sebagai aplikasi desktop di macOS, Windows, dan Linux menggunakan Electron. Ini adalah fitur asli NativePHP sejak 2023 — sebelum mobile.

Jika kalian punya aplikasi web Laravel yang ingin dijadikan desktop tanpa rewrite, NativePHP Electron adalah jawabannya. Kode Laravel berjalan di embedded PHP runtime, dan Electron menyediakan shell Chromium + Node.js untuk rendering.

#NativePHP Electron

#Install

Install NativePHP Electron

composer require nativephp/electron
php artisan native:install --platform=desktop

#Jalankan di Desktop

Jalankan aplikasi desktop

php artisan native:serve

Aplikasi akan terbuka sebagai window desktop — Laravel berjalan di embedded PHP, dan Electron menampilkan UI di dalam Chromium window.

Menu bar adalah fitur desktop yang tidak ada di mobile. NativePHP menyediakan facade untuk mengelola menu:

Konfigurasi menu bar

<?php
 
use Native\Laravel\Facades\MenuBar;
 
MenuBar::create()
    ->label('My App')
    ->icon(public_path('images/tray-icon.png'))
    ->show()
    ->options([
        ['label' => 'Dashboard', 'action' => 'dashboard', 'shortcut' => 'CmdOrCtrl+D'],
        ['label' => 'Tasks', 'action' => 'tasks', 'shortcut' => 'CmdOrCtrl+T'],
        ['separator'],
        ['label' => 'Quit', 'action' => 'quit', 'shortcut' => 'CmdOrCtrl+Q'],
    ]);

#System Tray

System tray memungkinkan aplikasi berjalan di background tanpa window yang terlihat:

System tray untuk background app

<?php
 
use Native\Laravel\Facades\Tray;
 
Tray::create()
    ->icon(public_path('images/tray-icon.png'))
    ->tooltip('My App - Running')
    ->menu([
        ['label' => 'Show Window', 'action' => 'show'],
        ['label' => 'Hide Window', 'action' => 'hide'],
        ['separator'],
        ['label' => 'Quit', 'action' => 'quit'],
    ]);

#Window Management

Mengelola window

<?php
 
use Native\Laravel\Facades\Window;
 
// Buat window baru
Window::new()
    ->title('Settings')
    ->size(800, 600)
    ->resizable(false)
    ->show();
 
// Kontrol window utama
Window::getMain()
    ->minimize()
    ->maximize()
    ->close();

Strategi untuk share kode antara web, desktop, dan mobile:

plaintext

app/
├── Http/Controllers/     ← Shared logic
├── Models/              ← Shared Eloquent
├── Livewire/            ← Shared components
├── Services/            ← Shared business logic
resources/
├── views/               ← Shared Blade templates
├── native/
│   ├── ios/             ← iOS-specific shell
│   ├── android/         ← Android-specific shell
│   └── desktop/         ← Electron-specific config
config/
├── nativephp.php        ← Platform-specific config

Kode di app/ dan resources/views/ dipakai oleh semua platform. Perbedaan hanya ada di:

Native shell: Swift (iOS), Kotlin (Android), Electron (desktop).
Config: nativephp.php dikonfigurasi per platform.
Assets: splash screen, ikon, tray icon sesuai platform.

#Konfigurasi Multi-Platform

config/nativephp.php — multi-platform

<?php
 
return [
    'name' => env('APP_NAME', 'My App'),
    'id' => env('NATIVEPHP_APP_ID', 'com.myapp'),
 
    // Desktop-specific
    'electron' => [
        'width' => 1200,
        'height' => 800,
        'resizable' => true,
        'min_width' => 400,
        'min_height' => 300,
    ],
 
    // Mobile-specific
    'ios' => [
        'bundle_id' => env('NATIVEPHP_IOS_BUNDLE'),
        'minimum_os_version' => '18.0',
    ],
 
    'android' => [
        'package_name' => env('NATIVEPHP_ANDROID_PACKAGE'),
        'min_sdk_version' => '26',
    ],
];

#Build Desktop

#macOS

Build untuk macOS

php artisan native:build mac

Menghasilkan .dmg atau .app bundle. Untuk distribusi di luar Mac App Store, gunakan code signing dengan Apple Developer ID.

#Windows

Build untuk Windows

php artisan native:build win

Menghasilkan .exe installer. Untuk distribusi, pertimbangkan code signing untuk mencegah warning SmartScreen.

#Linux

Build untuk Linux

php artisan native:build linux

Menghasilkan .deb, .rpm, atau .AppImage. Distribusi lewat package manager atau direct download.

Note

Build desktop hanya bisa dilakukan di OS target: build macOS di macOS, build Windows di Windows. Untuk cross-platform CI/CD, gunakan GitHub Actions dengan runner berbeda per OS.

#Penutup

Inti yang harus dibawa pulang:

NativePHP Electron memungkinkan Laravel berjalan sebagai desktop app macOS/Windows/Linux.
Menu bar & system tray untuk UX desktop yang sesuai platform.
Window management mengontrol ukuran, posisi, dan lifecycle window.
Code sharing: satu repo Laravel untuk web + desktop + mobile — perbedaan hanya di native shell.
Build per platform: native:build mac/win/linux.

Di episode 18 selanjutnya, kita akan membahas Build & Distribusi iOS — native:build ios, signing certificates, provisioning profiles di Xcode, dan distribusi ke TestFlight untuk testing. Sampai jumpa di episode 18!