Belajar NativePHP - Project Pertama

#Pendahuluan

Setelah di episode 2 kita memahami arsitektur intern NativePHP — embedded runtime, native shell, dan bridge — pada episode ini kita turun ke praktik langsung: membuat project pertama dan menjalankannya di simulator iOS dan emulator Android. Ini adalah momen "aha" pertama kalian: melihat kode Laravel berjalan di layar perangkat virtual.

Episode 3 adalah fondasi hands-on seluruh series. Semua konfigurasi, device APIs, dan build yang kita bahas di episode-episode berikutnya akan dimulai dari project yang kita buat di sini.

#Setup Project Laravel Baru

Mulai dengan membuat project Laravel baru menggunakan Composer:

composer create-project laravel/laravel nativephp-app
cd nativephp-app

Jika kalian sudah punya project Laravel existing, cukup masuk ke direktori project tersebut dan pastikan Laravel-nya minimal versi 11.

#Install NativePHP Mobile

Tambahkan package NativePHP ke project:

composer require nativephp/mobile

Setelah install, jalankan artisan command untuk setup otomatis:

php artisan native:install

Command ini akan:

1. Publish file konfigurasi config/nativephp.php.
2. Generate folder resources/native/ dengan proyek iOS dan Android.
3. Membuat file .env.nativephp untuk environment khusus build.
4. Menginstall dependensi Node.js untuk asset build.

#Generate Ikon dan Splash Screen

Sebelum menjalankan aplikasi, siapkan ikon dan splash screen agar tampilan awal aplikasi terlihat profesional:

php artisan native:assets

Command ini meminta kalian memasukkan path ke file ikon (minimal 1024x1024 px) dan akan otomatis generate:

• Ikon untuk semua ukuran iOS (App Store, Spotlight, Notification)
• Ikon untuk semua densities Android (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)
• Splash screen yang sesuai guidelines masing-masing platform

Jika belum punya ikon, gunakan ikon default Laravel — atau buat sederhana dulu di Canva/Figma.

#Struktur Folder NativePHP

Setelah install, lihat apa yang sudah di-generate:

tree resources/native/ -L 2
# resources/native/
# ├── ios/
# │   ├── NativePHPApp.xcodeproj
# │   ├── NativePHPApp/
# │   │   ├── AppDelegate.swift
# │   │   └── ...
# │   └── Pods/ atau Package.swift
# └── android/
#     ├── app/
#     │   ├── build.gradle.kts
#     │   └── src/main/
#     ├── build.gradle.kts
#     └── gradle/

Folder ios/ adalah proyek Xcode lengkap — kalian bisa membukanya langsung di Xcode untuk debugging dan signing. Folder android/ adalah proyek Gradle lengkap — buka di Android Studio untuk signing dan build.

Konfigurasi utama ada di:

<?php
 
return [
    'name' => env('NATIVEPHP_APP_NAME', 'NativePHP App'),
    'id' => env('NATIVEPHP_APP_ID', 'com.nativephp.app'),
    'version' => env('NATIVEPHP_APP_VERSION', '1.0.0'),
 
    'android' => [
        'package_name' => env('NATIVEPHP_ANDROID_PACKAGE', 'com.nativephp.app'),
        // ...
    ],
 
    'ios' => [
        'bundle_id' => env('NATIVEPHP_IOS_BUNDLE', 'com.nativephp.app'),
        // ...
    ],
];

#Jalankan di Simulator iOS

Pastikan simulator iOS sudah terinstall di Xcode, lalu jalankan:

php artisan native:run ios

Command ini akan:

1. Mengkompilasi aset (Blade + Livewire + Tailwind).
2. Build proyek Xcode untuk simulator.
3. Meluncurkan simulator dan menjalankan aplikasi.

Jika berhasil, kalian akan melihat tampilan default Laravel di simulator iOS. Selamat — Laravel kalian sekarang berjalan di iOS!

#Jalankan di Emulator Android

php artisan native:run android

Pastikan emulator Android sudah dibuat di Android Studio (minimal API 26 / Android 8.0). Command ini akan:

1. Mengkompilasi aset.
2. Build proyek Gradle untuk target emulator.
3. Install dan jalankan aplikasi di emulator.

#Ringkasan Project Pertama

Apa yang sudah kalian capai di episode 3:

• Project Laravel baru dengan nativephp/mobile terinstall.
• Struktur folder resources/native/ dengan proyek iOS dan Android siap.
• Konfigurasi config/nativephp.php untuk identitas aplikasi.
• Aplikasi berjalan di simulator iOS dan emulator Android.
• Artisan command native:run untuk menjalankan di kedua platform.

#Penutup

Inti yang harus dibawa pulang:

• composer require nativephp/mobile + php artisan native:install adalah titik awal.
• resources/native/ berisi proyek Xcode (iOS) dan Gradle (Android) yang bisa dimodifikasi.
• config/nativephp.php adalah pusat konfigurasi identitas dan build aplikasi.
• php artisan native:run menjalankan aplikasi di simulator/emulator.

Di episode 4 selanjutnya, kita akan membahas konfigurasi aplikasi secara mendalam — app identifier, nama, versi, API keys, environment variables yang ter-bundle, ikon, splash screen, orientasi, dan status bar style. Kita akan kustomisasi identitas aplikasi lengkap pada kedua platform. Sampai jumpa di episode 4!