Membuat Aplikasi Laravel + React dengan AI

Pendahuluan

Aplikasi modern sering menggabungkan backend yang kuat (Laravel) dengan frontend interaktif (React). Menambahkan kemampuan AI (mis. ChatGPT, Claude, Gemini) memungkinkan fitur seperti chatbot, penulisan konten otomatis, atau analisis teks. Tutorial ini menunjukkan cara:

1. Menyiapkan proyek Laravel + React dengan Vite.
2. Mengintegrasikan layanan AI melalui API (contoh: ChatGPT Plus).
3. Mengamankan, mengoptimalkan, dan menyiapkan aplikasi untuk produksi.

Prasyarat & Persiapan

Akun AI yang direkomendasikan
- ChatGPT Plus (ai-chat) – gunakan endpoint OpenAI.
- Alternatif: Claude Pro (ai-chat), Gemini Advanced (ai-chat), Perplexity Pro (ai-chat).

Langkah Demi Langkah

Step 1 – Instalasi Dependensi Global

# PHP & Composer (Ubuntu contoh)
sudo apt-get update && sudo apt-get install -y php php-cli php-mbstring php-xml php-bcmath php-json unzip curl
curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer

# Node.js & Yarn
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
npm install -g yarn

Step 2 – Buat Proyek Laravel

composer create-project --prefer-dist laravel/laravel laravel-react-ai
cd laravel-react-ai

Step 3 – Konfigurasi React dengan Vite

Laravel 10 sudah menyertakan Vite. Aktifkan React preset:

# Install React & related deps
yarn add react react-dom @vitejs/plugin-react
# Tambahkan plugin ke vite.config.js
sed -i 's/plugins: \[/plugins: \[require("@vitejs\/plugin-react")(),/g' vite.config.js

Buat folder resources/js jika belum ada, lalu buat file App.jsx:

// resources/js/App.jsx
import React, { useState } from "react";

export default function App() {
  const [prompt, setPrompt] = useState("");
  const [response, setResponse] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await fetch("/api/ai", {
      method: "POST",
      headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content },
      body: JSON.stringify({ prompt })
    });
    const data = await res.json();
    setResponse(data.reply);
  };

  return (
    <div className="p-4">
      <h1 className="text-xl font-bold mb-4">Chat AI (Laravel + React)</h1>
      <form onSubmit={handleSubmit}>
        <textarea
          className="border w-full p-2 mb-2"
          rows="4"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="Tulis pertanyaan Anda..."
        />
        <button type="submit" className="bg-blue-600 text-white px-4 py-2">
          Kirim
        </button>
      </form>
      {response && (
        <div className="mt-4 p-4 border rounded bg-gray-100">
          <strong>Jawaban AI:</strong>
          <p>{response}</p>
        </div>
      )}
    </div>
  );
}

Update resources/views/welcome.blade.php untuk memuat Vite dan React:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @viteReactRefresh
    @vite(['resources/js/app.jsx'])
    <title>Laravel + React AI</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Buat entry point resources/js/app.jsx:

import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("app")).render(<App />);

Jalankan dev server:

php artisan serve   # Laravel (http://127.0.0.1:8000)
yarn dev            # Vite (proxy otomatis)

Step 4 – Integrasi API AI (ChatGPT Plus)

1. Pasang SDK OpenAI (atau gunakan guzzlehttp/guzzle untuk request manual).

composer require openai-php/client

1. Simpan API Key di .env:

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
AI_MODEL=gpt-4o-mini   # contoh model ChatGPT Plus

1. Buat Route & Controller:

// routes/api.php
use App\Http\Controllers\AIController;

Route::post('/ai', [AIController::class, 'handle'])->middleware('throttle:60,1');

// app/Http/Controllers/AIController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use OpenAI\Client as OpenAIClient;
use Illuminate\Support\Facades\Cache;

class AIController extends Controller
{
    protected $client;

    public function __construct()
    {
        $this->client = OpenAIClient::factory()
            ->withApiKey(config('services.openai.key'))
            ->make();
    }

    public function handle(Request $request)
    {
        $request->validate(['prompt' => 'required|string|max:2000']);

        // Cache untuk mengurangi biaya & latency
        $cacheKey = 'ai:' . md5($request->prompt);
        $reply = Cache::remember($cacheKey, now()->addMinutes(10), function () use ($request) {
            $response = $this->client->chat()->create([
                'model' => config('services.openai.model'),
                'messages' => [
                    ['role' => 'user', 'content' => $request->prompt],
                ],
                'temperature' => 0.7,
            ]);
            return $response->choices[0]->message->content ?? 'Tidak ada jawaban.';
        });

        return response()->json(['reply' => $reply]);
    }
}

1. Konfigurasi Service Provider (opsional, untuk kebersihan):

// config/services.php
'openai' => [
    'key'   => env('OPENAI_API_KEY'),
    'model' => env('AI_MODEL', 'gpt-4o-mini'),
],

Step 5 – Dockerisasi (Production Ready)

Buat Dockerfile untuk Laravel + PHP:

# Dockerfile
FROM php:8.2-fpm

# System deps
RUN apt-get update && apt-get install -y \
    git \
    unzip \
    libpng-dev \
    libonig-dev \
    libxml2-dev \
    zip \
    curl

# PHP extensions
RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd

# Composer
COPY --from=composer:2 /usr/bin/composer /usr/bin/composer

WORKDIR /var/www/html

COPY . .

RUN composer install --optimize-autoloader --no-dev
RUN php artisan key:generate
RUN php artisan config:cache
RUN php artisan route:cache
RUN php artisan view:cache

EXPOSE 9000
CMD ["php-fpm"]

docker-compose.yml:

version: "3.8"
services:
  app:
    build: .
    container_name: laravel_app
    restart: unless-stopped
    environment:
      - APP_ENV=production
      - APP_DEBUG=false
      - APP_KEY=${APP_KEY}
      - DB_HOST=db
      - DB_DATABASE=${DB_DATABASE}
      - DB_USERNAME=${DB_USERNAME}
      - DB_PASSWORD=${DB_PASSWORD}
      - OPENAI_API_KEY=${OPENAI_API_KEY}
    volumes:
      - ./:/var/www/html
    depends_on:
      - db
    networks:
      - laravel

  nginx:
    image: nginx:alpine
    container_name: nginx
    restart: unless-stopped
    ports:
      - "80:80"
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./:/var/www/html
    depends_on:
      - app
    networks:
      - laravel

  db:
    image: mysql:8.0
    container_name: mysql
    restart: unless-stopped
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_USER: ${DB_USERNAME}
      MYSQL_PASSWORD: ${DB_PASSWORD}
    volumes:
      - db_data:/var/lib/mysql
    networks:
      - laravel

networks:
  laravel:

volumes:
  db_data:

nginx/conf.d/app.conf (minimal):

server {
    listen 80;
    server_name _;
    root /var/www/html/public;

    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location /api/ {
        proxy_pass http://app:9000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Deploy:

docker compose up -d --build

Step 6 – Optimasi & Keamanan di Production

Step 7 – Tips Penggunaan AI Lainnya

• Claude Pro: Ganti SDK OpenAI dengan anthropic/anthropic-sdk-php. Ubah model menjadi claude-3-5-sonnet.
• Gemini Advanced: Gunakan paket google/cloud-aiplatform dan endpoint gemini-pro.
• Perplexity Pro: API serupa, cukup ubah URL endpoint dan header otorisasi.

Semua layanan di atas dapat diakses melalui [ChatGPT Plus], [Claude Pro], [Gemini Advanced], atau [Perplexity Pro] di direktori Jartekindo.

Tips Optimasi & Keamanan

1. Batching Prompt – Hindari panggilan berulang dalam satu sesi; gabungkan beberapa pertanyaan bila memungkinkan.
2. Sanitasi Input – Walaupun AI tidak mengeksekusi kode, tetap lakukan validasi panjang & karakter.
3. Penggunaan Token – Monitor penggunaan token via dashboard OpenAI; set alert bila mendekati limit.
4. Static Assets – Kompres CSS/JS dengan vite build --minify. Gunakan CDN (Cloudflare) untuk distribusi.
5. Database Migration – Jalankan `php artisan migrate --