NativePHP เป็นแนวทางสำหรับนักพัฒนา PHP/Laravel ที่ต้องการนำทักษะเดิมไปสร้าง Native Application โดยไม่ต้องย้ายโค้ดทั้งหมดไปเขียนด้วย Swift, Kotlin หรือภาษาเฉพาะแพลตฟอร์มตั้งแต่ต้น

ในปี 2026 NativePHP แบ่งงานหลักออกเป็น 2 กลุ่ม

  • NativePHP for Mobile — สร้างแอป iOS และ Android
  • NativePHP for Desktop — สร้างแอป macOS, Windows และ Linux

จุดที่น่าสนใจมากของ NativePHP Mobile v4 คือสถาปัตยกรรม SuperNative ซึ่งทำให้ Blade สามารถสร้าง UI แบบ native จริง โดยฝั่ง iOS ใช้ SwiftUI และฝั่ง Android ใช้ Jetpack Compose เป็นตัวแสดงผล ไม่ได้จำกัดอยู่แค่ WebView แบบเดิม

บทความนี้เน้น Mobile v4 เป็นหลัก และปิดท้ายด้วยภาพรวม Desktop

#1. NativePHP คืออะไร

NativePHP ทำให้ Laravel application สามารถทำงานภายใน native application ได้โดยตรง

แนวคิดสำคัญคือ

Laravel / PHP
      |
      v
NativePHP
      |
      +------ Native UI
      |
      +------ Native APIs
      |
      +------ Local Database / Files
      |
      +------ iOS / Android / Desktop

สำหรับ Mobile ตัว PHP runtime ถูกฝังเข้าไปใน native application ดังนั้นโค้ด Laravel สามารถทำงานบนอุปกรณ์ได้โดยไม่จำเป็นต้องมี web server แยกต่างหาก

NativePHP Mobile v4 ใช้แนวคิด

Laravel + PHP
     |
     v
NativeComponent
     |
     v
Blade + EDGE Components
     |
     v
SuperNative Renderer
     |
     +-------------------+
     |                   |
     v                   v
 SwiftUI           Jetpack Compose
  (iOS)               (Android)

#2. NativePHP เหมาะกับใคร

NativePHP เหมาะมากเมื่อทีมมีพื้นฐาน Laravel/PHP อยู่แล้ว เช่น

  • ระบบภายในองค์กร
  • Mobile App สำหรับงานภาคสนาม
  • Inventory / POS / Checklist
  • แอป Offline-first
  • แอปที่ต้องใช้ Camera, Scanner, Biometrics หรือ Geolocation
  • Utility App
  • Desktop Tool
  • Admin/Backoffice Client
  • Prototype ที่ต้องการขึ้น iOS/Android จาก Laravel codebase

ข้อได้เปรียบสำคัญคือทีมสามารถ reuse ความรู้เดิม เช่น

  • Routing
  • Validation
  • Eloquent ORM
  • Service Container
  • Events
  • Queues
  • Blade
  • Testing ecosystem ของ Laravel

#3. NativePHP Mobile v4 ต่างจาก WebView อย่างไร

NativePHP รุ่นก่อนเน้นแนวทาง WebView มากกว่า แต่ใน v4 มี SuperNative เป็นค่าเริ่มต้น

Blade component เช่น

<native:button label="Save" @press="save" />

ไม่ได้ถูกแปลงเป็น HTML <button> แล้วเปิดใน browser engine แต่ถูกแปลงเป็น native component บนแต่ละแพลตฟอร์ม

แนวคิดคือ

Blade
  |
  v
EDGE Element Tree
  |
  v
Shared Runtime / Native Rendering
  |
  +--> SwiftUI
  |
  +--> Jetpack Compose

ผลคือสามารถได้พฤติกรรมที่ใกล้ native platform โดยตรง เช่น

  • navigation
  • gestures
  • accessibility
  • dynamic type
  • dark mode
  • native list
  • native form controls
  • native animations

WebView ยังใช้งานได้ และสามารถผสม native screen กับ web screen ในแอปเดียวกันได้

#4. EDGE คืออะไร

EDGE — Element Definition and Generation Engine เป็น component system ของ NativePHP Mobile

ตัวอย่าง

<native:column class="p-4 gap-4">
    <native:text class="text-2xl font-bold">
        NativePHP
    </native:text>

    <native:button
        label="Start"
        @press="start"
    />
</native:column>

แนวคิดคล้าย declarative UI

Blade Template
      |
      v
EDGE Components
      |
      v
Native UI Elements

NativePHP มี component เช่น

  • Button
  • Text
  • Text Input
  • List
  • Column
  • Row
  • Stack
  • Bottom Navigation
  • Top Bar
  • Carousel
  • Modal
  • Bottom Sheet
  • Slider
  • Toggle
  • Checkbox
  • WebView

#5. สิ่งที่ต้องเตรียม

โดยทั่วไปควรมี

  • PHP
  • Composer
  • Laravel
  • Git
  • Android Studio สำหรับ Android build
  • Xcode สำหรับ iOS build บน macOS
  • Android Emulator หรือ Android Device
  • iPhone/iOS Simulator สำหรับ iOS

สำหรับ NativePHP Mobile รุ่นปัจจุบัน PHP runtime ที่ bundle ไปกับแอปเป็น PHP 8.4 ดังนั้น application ควรเข้ากันได้กับ PHP เวอร์ชันดังกล่าว

#Windows

NativePHP Mobile ต้องรันบน Windows โดยตรง และไม่รองรับการรันผ่าน WSL สำหรับ build environment ของ NativePHP

#6. วิธีเริ่มโปรเจกต์แบบเร็วด้วย Jump

NativePHP มี Jump สำหรับ preview แอปบนอุปกรณ์จริงได้รวดเร็ว โดยไม่ต้อง build native project ทุกครั้ง

สร้าง Laravel project จาก starter

laravel new my-app --using=nativephp/mobile-starter --no-node
cd my-app
php artisan native:jump

จากนั้นใช้แอป Jump บน iOS หรือ Android สแกน QR Code

แนวคิดคือ

Laravel App บนเครื่อง Developer
              |
              | Bridge
              v
        Jump Application
              |
              v
        Native APIs บนมือถือ

เหมาะมากสำหรับ development loop

#7. ติดตั้ง NativePHP Mobile แบบปกติ

หากมี Laravel project อยู่แล้ว

composer require nativephp/mobile

กำหนด Application ID ใน .env

NATIVEPHP_APP_ID=com.example.nativephpdemo

จากนั้นติดตั้ง native project

php artisan native:install

ระบบจะสร้างส่วนประกอบสำคัญ เช่น

project/
├── app/
├── config/
│   └── nativephp.php
├── nativephp/
├── resources/
├── routes/
└── ...

โฟลเดอร์ nativephp/ เป็น generated native project และโดยทั่วไปควรมองเป็น ephemeral directory

#8. รันแอป

ใช้

php artisan native:run

หรือระบุ platform

php artisan native:run android

php artisan native:run ios

หลังติดตั้ง NativePHP แล้ว สามารถใช้ helper ได้ด้วย

php native run

#9. คำสั่งที่ควรรู้

สร้าง Native Component

php artisan native:make Home

ตรวจสอบ environment

php artisan native:debug

ดูเวอร์ชัน

php artisan native:version

เปิด native project

php artisan native:open android

หรือ

php artisan native:open ios

เปิด emulator

php artisan native:emulator android

ตรวจสอบ EDGE components

php artisan native:validate

สร้าง test

php artisan native:make-test Home

#10. สร้าง Native Screen แรก

สร้าง component

php artisan native:make Counter

แนวคิดของ NativeComponent คล้าย stateful UI component

ตัวอย่าง component

<?php

namespace App\NativeComponents;

use Native\Mobile\Edge\Components\NativeComponent;

class Counter extends NativeComponent
{
    public int $count = 0;

    public function increment(): void
    {
        $this->count++;
    }

    public function render()
    {
        return view('native.counter');
    }
}

Blade

<native:column class="p-6 gap-4">
    <native:text class="text-2xl font-bold">
        Counter
    </native:text>

    <native:text>
        Count: {{ $count }}
    </native:text>

    <native:button
        label="เพิ่มค่า"
        @press="increment"
    />
</native:column>

#11. การทำ Native Routing

NativePHP ใช้

Route::native()

ตัวอย่าง

use App\NativeComponents\Counter;

Route::native('/', Counter::class);

อีกตัวอย่าง

use App\NativeComponents\Home;
use App\NativeComponents\ProductDetail;

Route::native('/', Home::class);
Route::native('/products/{id}', ProductDetail::class);

จาก component สามารถเปลี่ยนหน้าได้

$this->navigate('/products/10');

ย้อนกลับ

$this->back();

#12. Workshop: แอป Task List ขนาดเล็ก

โครงสร้าง

Task App
├── TaskList
├── AddTask
└── SQLite Database

สร้าง model

php artisan make:model Task -m

Migration

Schema::create('tasks', function ($table) {
    $table->id();
    $table->string('title');
    $table->boolean('completed')->default(false);
    $table->timestamps();
});

รัน migration

php artisan migrate

สร้าง Native Component

php artisan native:make TaskList

ตัวอย่าง logic

<?php

namespace App\NativeComponents;

use App\Models\Task;
use Native\Mobile\Edge\Components\NativeComponent;

class TaskList extends NativeComponent
{
    public string $title = '';

    public function addTask(): void
    {
        $title = trim($this->title);

        if ($title === '') {
            return;
        }

        Task::create([
            'title' => $title,
        ]);

        $this->title = '';
    }

    public function complete(int $id): void
    {
        $task = Task::findOrFail($id);
        $task->update([
            'completed' => true,
        ]);
    }

    public function render()
    {
        return view('native.task-list', [
            'tasks' => Task::latest()->get(),
        ]);
    }
}

อย่าลืม Model

class Task extends Model
{
    protected $fillable = [
        'title',
        'completed',
    ];
}

UI concept

<native:column class="p-4 gap-3">
    <native:text class="text-2xl font-bold">
        My Tasks
    </native:text>

    <native:text-input
        value="{{ $title }}"
        placeholder="New task"
    />

    <native:button
        label="Add Task"
        @press="addTask"
    />

    <native:list separator>
        @foreach ($tasks as $task)
            <native:list-item
                headline="{{ $task->title }}"
                @press="complete({{ $task->id }})"
            />
        @endforeach
    </native:list>
</native:column>

ชื่อ props/event ของ UI component อาจแตกต่างเล็กน้อยตาม component และ NativePHP version ควรตรวจสอบเอกสาร component ปัจจุบันเมื่อ implement จริง

#13. Native APIs

NativePHP สามารถเชื่อมต่อ device capabilities ผ่าน plugin architecture

ตัวอย่างกลุ่มความสามารถที่ NativePHP Mobile v4 มีเอกสารรองรับ ได้แก่

  • Camera
  • Biometrics
  • Geolocation
  • Push Notifications
  • Microphone
  • Scanner
  • Secure Storage
  • Share
  • Network
  • Browser
  • Media Player
  • Device Information
  • Files
  • System APIs

โครงสร้างแนวคิด

Laravel Code
     |
     v
PHP Facade / Native Function
     |
     v
NativePHP Plugin
     |
     +----------+
     |          |
     v          v
   Swift      Kotlin

ดังนั้นกรณีที่ต้องเขียน native integration เพิ่มเอง ก็สามารถสร้าง plugin ที่มี PHP + Swift + Kotlin ได้

#14. Plugin Architecture

NativePHP plugin สามารถมี

  • PHP Facade
  • Laravel Service Provider
  • Native Events
  • Swift implementation
  • Kotlin implementation
  • Permissions
  • Native dependencies
  • Native UI elements

สร้าง plugin scaffold ได้ด้วย

php artisan native:plugin:create

เหมาะกับกรณี เช่น

  • Bluetooth
  • NFC
  • Payment SDK
  • Vendor-specific SDK
  • On-device Machine Learning
  • Barcode hardware
  • Enterprise device integration

#15. Offline-first

NativePHP เหมาะกับ Offline-first เพราะ Laravel/PHP runtime และ application code ทำงานบนอุปกรณ์

ตัวอย่าง architecture

             ┌─────────────────┐
             │   Native UI     │
             └────────┬────────┘
                      |
             ┌────────v────────┐
             │ Laravel / PHP   │
             └────────┬────────┘
                      |
             ┌────────v────────┐
             │ SQLite / Local  │
             └────────┬────────┘
                      |
            Online ?  |
          ┌───────────┴──────────┐
          |                      |
         No                     Yes
          |                      |
          v                      v
    Work Offline          Sync with API

ตัวอย่างที่เหมาะ

  • Survey App
  • Field Inspection
  • Warehouse App
  • Check-in App
  • Inventory
  • Maintenance Checklist

#16. Security ที่ต้องระวัง

สิ่งสำคัญคือ source code และ assets ของ Laravel จะถูก bundle ไปกับ mobile app

ดังนั้นไม่ควรฝัง secret สำคัญลงใน application เช่น

PAYMENT_SECRET_KEY=...
AWS_SECRET_ACCESS_KEY=...
PRIVATE_API_ADMIN_KEY=...

สิ่งที่ไม่ควรอยู่ใน mobile bundle

  • private API secret
  • database root password
  • cloud secret
  • signing secret
  • privileged admin token

ควรออกแบบเป็น

Mobile App
    |
    | user access token
    v
Backend API
    |
    | secret credentials
    v
Cloud / Payment / Internal Services

สำหรับ credential ที่ต้องเก็บในอุปกรณ์ ให้ใช้ secure storage API แทน plain text storage

#17. การทดสอบ

NativePHP v4 มีแนวทางทดสอบ NativeComponent

สร้าง test

php artisan native:make-test Counter

แนวทางแบ่ง test ได้เป็น

Unit Test
   |
   +--> Domain Logic
   |
Component Test
   |
   +--> NativeComponent state
   +--> interaction
   +--> rendering
   |
Integration Test
   |
   +--> SQLite
   +--> service
   +--> API
   |
Device Test
   |
   +--> Camera
   +--> Biometric
   +--> Scanner

หลักการสำคัญคือ business logic ไม่ควรถูกผูกไว้กับ device API ทั้งหมด เพื่อให้ test ได้ง่าย

#18. การ Build และ Package Android

NativePHP มีคำสั่ง

php artisan native:package android

หากต้องการ Android App Bundle

php artisan native:package android \
  --build-type=bundle \
  --keystore=/path/to/app.keystore \
  --keystore-password=secret \
  --key-alias=my-app-key \
  --key-password=secret

ผลลัพธ์คือ .aab สำหรับนำไปเผยแพร่ผ่าน Google Play

ไม่ควร commit keystore password หรือ signing secret ลง Git repository

#19. การ Build iOS

ใช้

php artisan native:package ios

การเผยแพร่ iOS ยังต้องอาศัยองค์ประกอบของ Apple เช่น

  • Apple Developer Account
  • Bundle ID
  • Certificates
  • Provisioning Profile
  • Code Signing
  • App Store Connect

#20. Environment สำหรับ Release

ก่อน package production ควรตั้ง

APP_ENV=production

ควรแยก environment อย่างน้อย

local
staging
production

ตัวอย่าง

Development
    |
    v
APP_ENV=local
    |
    v
Internal Testing
    |
    v
APP_ENV=staging
    |
    v
Store Release
    |
    v
APP_ENV=production

#21. NativePHP Desktop

หากต้องการสร้าง Desktop App ใช้ package คนละชุดกับ mobile

NativePHP Desktop รองรับ

  • macOS
  • Windows
  • Linux

ความสามารถสำคัญ เช่น

  • Window Management
  • Menu Management
  • File Management
  • SQLite
  • System Notifications
  • Menu Bar App

ติดตั้งใน Laravel project

composer require nativephp/electron

จากนั้น

php artisan native:install

และรัน

php artisan native:run

Desktop architecture โดยสรุป

Laravel
   |
   v
NativePHP Desktop
   |
   v
Electron Host
   |
   +--> Window
   +--> Menu
   +--> Files
   +--> SQLite
   +--> Notifications

#22. Mobile กับ Desktop ควรเลือกอะไร

งาน NativePHP Mobile NativePHP Desktop
Android ✅ ❌
iOS ✅ ❌
Windows ❌ ✅
macOS ❌ ✅
Linux ❌ ✅
Camera / Biometrics ✅ ขึ้นกับ Desktop API/Integration
App Store / Play Store ✅ ❌
Native Mobile UI ✅ ❌
Window / Menu Bar ❌ ✅

#23. NativePHP vs Flutter vs React Native

ประเด็น NativePHP Flutter React Native
ภาษาหลัก PHP Dart JavaScript/TypeScript
เหมาะกับ Laravel Team สูงมาก ปานกลาง ปานกลาง
Native APIs ผ่าน NativePHP Plugins Plugins Native Modules
Native UI SuperNative / EDGE Flutter Engine Native Components
Shared Backend Knowledge Laravel โดยตรง ต้องแยก stack ต้องแยก stack
Offline-first ทำได้ ทำได้ ทำได้
Ecosystem อายุการใช้งาน ใหม่กว่า Mature Mature

NativePHP ไม่ได้หมายความว่าจะเหมาะกว่า Flutter หรือ React Native ทุกกรณี

ควรเลือก NativePHP เมื่อ

  • ทีมเก่ง PHP/Laravel
  • ต้องการ reuse Laravel ecosystem
  • ต้องการ prototype หรือ business app เร็ว
  • offline-first มีความสำคัญ
  • native capabilities ที่ต้องใช้มี plugin รองรับ

Flutter หรือ React Native อาจเหมาะกว่าเมื่อ

  • ทีม mobile มี skill เดิมอยู่แล้ว
  • ecosystem/package เฉพาะทางมีความสำคัญ
  • ต้องการ library third-party จำนวนมาก
  • product มี mobile engineering team แยกโดยเฉพาะ

#24. Architecture ที่แนะนำสำหรับ Production

flowchart TD
    UI[SuperNative / EDGE UI]
    APP[NativeComponent / Laravel]
    DOMAIN[Domain Services]
    DB[(SQLite)]
    DEVICE[Native APIs / Plugins]
    API[Backend API]
    CLOUD[Cloud Services]

    UI --> APP
    APP --> DOMAIN
    DOMAIN --> DB
    DOMAIN --> DEVICE
    DOMAIN --> API
    API --> CLOUD

หลักการคือ

  • UI ไม่ควรผูก business logic มากเกินไป
  • Native API ควรถูก wrap เป็น service
  • sync logic ควรแยกจาก UI
  • secrets อยู่ฝั่ง backend
  • local database รองรับ offline
  • tests เน้น domain + component

#25. Workflow สำหรับการสอนหรือ Workshop

ลำดับที่เหมาะสำหรับห้องเรียน

1. Laravel Basics
      ↓
2. Install NativePHP
      ↓
3. Run App
      ↓
4. NativeComponent
      ↓
5. EDGE UI
      ↓
6. Routing
      ↓
7. SQLite
      ↓
8. Camera / Device API
      ↓
9. Testing
      ↓
10. Package Android

Workshop ที่แนะนำ

  1. Counter App
  2. Todo App + SQLite
  3. QR/Barcode Scanner App
  4. Camera Note App
  5. Offline Survey App
  6. Inventory App
  7. API Sync App

#26. จุดเด่น

  • ใช้ PHP/Laravel เดิม
  • Mobile v4 มี native UI จริงผ่าน SuperNative
  • รองรับ iOS และ Android จาก codebase หลักเดียว
  • ทำ offline-first ได้ดี
  • ใช้ Laravel ecosystem ได้
  • มี plugin architecture สำหรับ Native APIs
  • รองรับ component testing
  • เหมาะกับ Laravel team ที่ต้องการเข้าสู่ mobile development

#27. ข้อจำกัดที่ควรพิจารณา

  • ecosystem ยังใหม่กว่า Flutter และ React Native
  • plugin บางอย่างอาจยังไม่มีสำเร็จรูป
  • custom native integration อาจต้องแตะ Swift/Kotlin
  • iOS build ยังต้องใช้ macOS/Xcode ใน workflow แบบ local
  • การ debug ปัญหา native บางกรณียังต้องเข้าใจ toolchain ของ mobile platform
  • source PHP ถูก bundle ไปกับ app จึงต้องออกแบบ security อย่างเหมาะสม
  • ต้องตรวจสอบ compatibility ของ package Laravel/PHP ที่นำมาใช้ใน mobile runtime

#28. สรุป

NativePHP ทำให้เส้นแบ่งระหว่าง Laravel developer กับ native application developer แคบลงอย่างมาก

โดยเฉพาะ NativePHP Mobile v4 ที่เปลี่ยนจากแนวคิด WebView-centric ไปสู่ SuperNative architecture ซึ่ง Blade/EDGE สามารถสร้าง SwiftUI และ Jetpack Compose UI ได้โดยตรง

สำหรับทีมที่มี Laravel เป็นเทคโนโลยีหลัก แนวทางที่น่าสนใจคือ

Laravel Skills
      +
NativePHP
      +
SuperNative / EDGE
      +
Native APIs
      +
SQLite / Offline-first
      =
Cross-platform Native Application

ถ้าต้องการเริ่มทดลอง แนะนำเริ่มจาก Todo App + SQLite แล้วค่อยเพิ่ม Camera, Scanner, Secure Storage และ API Sync เพื่อเห็นภาพ NativePHP ครบทั้ง UI, local data, device API และ backend integration

#เอกสารอ้างอิง

ตรวจสอบข้อมูลล่าสุด: 25 กันยายน 2026