Pembuatan Addon pada AlurKerja

addon-integrasi-api-chatgpt/
├── index.json                              ← Manifest utama addon
├── README.md                               ← Dokumentasi addon
├── HOW-TO.md                               ← Panduan pembuatan
├── scripts/                                ← Action scripts (Python)
│   ├── README.MD                           ← Panduan penulisan script
│   ├── requirements.txt                    ← Dependensi Python
│   ├── test_integration.py                 ← Script test integrasi
│   └── send_completion_request/
│       ├── send_completion_request.py      ← Script utama ChatGPT
│       └── request.example.json            ← Contoh request payload
└── views/                                  ← Micro Frontend (React)
    ├── package.json
    ├── webpack.config.js                   ← Konfigurasi MFE + Module Federation
    ├── tailwind.config.js
    ├── tsconfig.json
    ├── postcss.config.js
    ├── public/
    │   └── index.html
    ├── dist/                               ← Hasil build (jangan hapus)
    │   ├── bundle.js
    │   └── remoteEntry.js                  ← Diload oleh Alurkerja
    └── src/
        ├── index.js                        ← Entry point
        ├── bootstrap.js                    ← Export semua komponen
        ├── App.tsx
        ├── ChatGPTConfigForm.tsx            ← Form konfigurasi API
        ├── AskChatGPTView.tsx               ← Form input action
        └── type/
            └── AlurkerjaType.ts            ← TypeScript types

name → Nama addon yang akan di tampilkan di UI alurkerja
addon_key → identifier unik
view_type → di gunakan untuk MFE 
view_path → Path untuk build webpack
components_scope → Harus sama dengan name di webpack.confi.js → ModuleFederationPlugin
scripts → Deklarasi script Phyton yang bisa di panggil
actions → Action yang akan muncul sebagai pilihan di BPMN service Task

npm install -g alurkerja-cli

cd views
npm install 

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');

module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/index.js'),
devServer: {
    port: 3001,                    // Port dev server lokal
    historyApiFallback: true,
},
output: {
    publicPath: 'auto'             // Penting untuk Module Federation
},
resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
},
module: {
    rules: [
    { test: /\.(ts|tsx|js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/ },
    { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
    { test: /\.(png|jpe?g|gif|svg)$/i, type: 'asset/resource' }
    ]
},
plugins: [
    new ModuleFederationPlugin({
    name: 'chatgpt_view',           // ← HARUS SAMA dengan component_scope di index.json
    filename: 'remoteEntry.js',     // ← File ini yang di-load Alurkerja
    exposes: {
        // Key: nama modul yang di-expose
        // Value: path file komponen
        './chat_gpt_config': './src/ChatGPTConfigForm.tsx',
        './ask_chatgpt_view': './src/AskChatGPTView.tsx',
    },
    shared: {
        react: { singleton: true },           // Hanya satu instance React
        'react-dom': { singleton: true },
        'react-hook-form': { singleton: true },
        leaflet: { singleton: true },
    }
    }),
    new HtmlWebpackPlugin({ template: './public/index.html' })
]
};

import { UseFormReturn } from 'react-hook-form';

export interface AlurkerjaMfeProps {
    form: UseFormReturn<any>;           // React Hook Form instance
    alurkerjaParams?: {
        [key: string]: any;             // Parameter dari platform
    };
}

    import React from 'react';
import { AlurkerjaMfeProps } from './type/AlurkerjaType';

const ChatGPTConfigForm: React.FC<AlurkerjaMfeProps> = ({ form, alurkerjaParams }) => {
    const { register } = form;
    
    return (
        <div className="space-y-4 p-4">
            <h3 className="text-lg font-semibold">Konfigurasi ChatGPT</h3>
            
            {/* API Key */}
            <div>
                <label className="block text-sm font-medium mb-1">
                    API Key <span className="text-red-500">*</span>
                </label>
                <input
                    {...register('api_key')}
                    type="password"
                    placeholder="sk-xxxxxxxxxxxx"
                    className="w-full border rounded px-3 py-2"
                />
                <p className="text-xs text-gray-500 mt-1">
                    Dapatkan API Key dari <a href="https://platform.openai.com/api-keys" target="_blank" rel="noreferrer">platform.openai.com</a>
                </p>
            </div>

            {/* Model Selection */}
            <div>
                <label className="block text-sm font-medium mb-1">Model</label>
                <select {...register('model')} className="w-full border rounded px-3 py-2">
                    <option value="gpt-3.5-turbo">GPT-3.5 Turbo (Hemat)</option>
                    <option value="gpt-4">GPT-4 (Lebih Pintar)</option>
                    <option value="gpt-4-turbo">GPT-4 Turbo</option>
                    <option value="gpt-4o">GPT-4o (Terbaru)</option>
                </select>
            </div>

            {/* System Prompt */}
            <div>
                <label className="block text-sm font-medium mb-1">System Prompt</label>
                <textarea
                    {...register('system_prompt')}
                    rows={3}
                    placeholder="You are a helpful assistant..."
                    className="w-full border rounded px-3 py-2"
                    defaultValue="You are a helpful assistant."
                />
            </div>
        </div>
    );
};

export default ChatGPTConfigForm;

    import React from 'react';
import { AlurkerjaMfeProps } from './type/AlurkerjaType';

const AskChatGPTView: React.FC<AlurkerjaMfeProps> = ({ form, alurkerjaParams }) => {
    const { register } = form;
    
    return (
        <div className="space-y-4 p-4">
            <h3 className="text-lg font-semibold">Ask ChatGPT</h3>

            {/* Prompt Input */}
            <div>
                <label className="block text-sm font-medium mb-1">
                    Prompt / Pertanyaan <span className="text-red-500">*</span>
                </label>
                <textarea
                    {...register('prompt')}
                    rows={4}
                    placeholder="Contoh: Rangkum dokumen berikut: ${variables.document}"
                    className="w-full border rounded px-3 py-2"
                />
                <p className="text-xs text-gray-500 mt-1">
                    Gunakan <code>{'${variables.namaVariable}'}</code> untuk menyisipkan data dari workflow
                </p>
            </div>

            {/* Temperature */}
            <div>
                <label className="block text-sm font-medium mb-1">
                    Temperature (0 – 2)
                </label>
                <input
                    {...register('temperature')}
                    type="number"
                    step="0.1"
                    min="0"
                    max="2"
                    defaultValue="0.7"
                    className="w-full border rounded px-3 py-2"
                />
                <p className="text-xs text-gray-500 mt-1">
                    0 = deterministic (konsisten), 2 = kreatif/acak
                </p>
            </div>

            {/* Max Tokens */}
            <div>
                <label className="block text-sm font-medium mb-1">Max Tokens</label>
                <input
                    {...register('max_tokens')}
                    type="number"
                    defaultValue="1000"
                    min="1"
                    max="4096"
                    className="w-full border rounded px-3 py-2"
                />
                <p className="text-xs text-gray-500 mt-1">
                    Batas panjang response AI. 1000 token ≈ 750 kata
                </p>
            </div>
        </div>
    );
};

export default AskChatGPTView;

import json
import argparse
import requests


def run(ctx):
"""
Mengirim request ke OpenAI ChatGPT API.

Execution Context (ctx):
- ctx["parameters"]   : Input dari user di BPMN (prompt, temperature, max_tokens)
- ctx["configuration"]: Konfigurasi addon (api_key, model, system_prompt)
- ctx["variables"]    : Data runtime dari workflow
- ctx["runkey"]       : Unique identifier untuk logging/tracing
"""

# ── 1. Ambil konfigurasi addon ──────────────────────────────────────────
config = ctx.get("configuration", {})
api_key = config.get("api_key")
model = config.get("model", "gpt-3.5-turbo")
system_prompt = config.get("system_prompt", "You are a helpful assistant.")

# ── 2. Ambil parameter dari user (input di BPMN) ─────────────────────────
params = ctx.get("parameters", {})
prompt = params.get("prompt", "")
temperature = float(params.get("temperature", 0.7))
max_tokens = int(params.get("max_tokens", 1000))

# ── 3. Validasi input ────────────────────────────────────────────────────
if not api_key:
    raise ValueError("API Key tidak ditemukan dalam konfigurasi addon")
if not prompt:
    raise ValueError("Prompt tidak boleh kosong")

# ── 4. Siapkan request ke OpenAI ─────────────────────────────────────────
headers = {
    "Content-Type": "application/json",
    "Authorization": f"Bearer {api_key}"
}

payload = {
    "model": model,
    "messages": [
        {"role": "system", "content": system_prompt},
        {"role": "user",   "content": prompt}
    ],
    "temperature": temperature,
    "max_tokens": max_tokens
}

# ── 5. Kirim request & proses response ───────────────────────────────────
try:
    response = requests.post(
        "https://api.openai.com/v1/chat/completions",
        headers=headers,
        json=payload,
        timeout=60  # 60 detik timeout
    )
    response.raise_for_status()  # Raise exception jika status 4xx/5xx
    
    result = response.json()
    ai_response = result["choices"][0]["message"]["content"]
    tokens_used = result.get("usage", {})
    
    # ── 6. Return output sesuai contract ─────────────────────────────────
    return {
        "status": "ok",
        "message": "ChatGPT response received successfully",
        "data": {
            "ai_output": ai_response,
            "model_used": model,
            "tokens_used": tokens_used
        },
        "runkey": ctx.get("runkey")
    }
    
except requests.exceptions.Timeout:
    raise Exception("Request ke ChatGPT API timeout (>60 detik)")
except requests.exceptions.HTTPError as e:
    raise Exception(f"HTTP Error dari OpenAI: {str(e)}")
except requests.exceptions.RequestException as e:
    raise Exception(f"Gagal menghubungi ChatGPT API: {str(e)}")
except (KeyError, IndexError) as e:
    raise Exception(f"Format response OpenAI tidak terduga: {str(e)}")


# ── Entry point: dipanggil oleh platform Alurkerja ───────────────────────────
if __name__ == "__main__":
parser = argparse.ArgumentParser(description="ChatGPT API Integration Script")
parser.add_argument(
    "--run",
    required=True,
    help="Execution context: path ke file JSON atau JSON string langsung"
)
args = parser.parse_args()

# Load execution context
if args.run.endswith(".json"):
    with open(args.run, 'r') as f:
        ctx = json.load(f)
else:
    ctx = json.loads(args.run)

# Eksekusi dan output ke STDOUT
try:
    result = run(ctx)
    print(json.dumps(result))
    exit(0)  # Success
except Exception as e:
    error_output = {
        "status": "error",
        "message": str(e),
        "runkey": ctx.get("runkey")
    }
    print(json.dumps(error_output))
    exit(1)  # Business error

{
    "name": "ChatGPT-API-Integration",
    "addon_key": "chatgpt-api-integration",
    "version": "1.0.0",
    "description": "ChatGPT API integration addon untuk Alurkerja platform.",
    "author": "NamaAnda",
    "license": "MIT",
    "type": "REST",
    "view_type": "MFE",
    "view_path": "views/dist",
    "component_scope": "chatgpt_view",
    "custom_views": {
        "CONFIGS": {
            "CREATE": "chat_gpt_config",
            "EDIT":   "chat_gpt_config"
        },
        "ACTIONS": {
            "sendCompletionRequest": "ask_chatgpt_view"
        }
    },
    "config": {},
    "scripts": {
        "sendCompletionRequest": {
            "description": "Script untuk mengirim request ke ChatGPT API dan mendapat response AI.",
            "scripts": {
                "type": "python",
                "executable": "scripts/send_completion_request/send_completion_request.py"
            }
        }
    },
    "actions": {
        "sendCompletionRequest": {
            "name": "Ask ChatGPT",
            "description": "Mengirim pertanyaan ke ChatGPT dan mendapat response AI.",
            "type": "SCRIPT",
            "endpoint": "sendCompletionRequest"
        }
    }
}

→ npm run build 
→ cd ..

→ npx alurkerja-cli addon publish

User Task A ──► variables Camunda ──► Service Task (Python) ──► variables Camunda ──► User Task B
   (form)         (form.setValue)          (return dict)           (alurkerjaParams)

import React from "react";
import { AlurkerjaMfeProps } from "./type/AlurkerjaType";

export default function TopTasksCard({ form, alurkerjaParams }: AlurkerjaMfeProps) {
    // 3-source fallback — coba berurutan
    const raw =
        alurkerjaParams?.top_tasks                        // 1. inject langsung di top-level
        ?? alurkerjaParams?.processVariables?.top_tasks   // 2. di bawah processVariables
        ?? form?.getValues?.("top_tasks");                // 3. dari form state lokal

    const topTasks = typeof raw === "string" ? JSON.parse(raw) : raw ?? [];

    return <ul>{topTasks.map((t: any) => <li key={t.id}>{t.name}</li>)}</ul>;
}

import React from "react";
import { AlurkerjaMfeProps } from "./type/AlurkerjaType";

export default function ApprovalButton({ form, alurkerjaParams }: AlurkerjaMfeProps) {
    const handleApprove = () => {
        // ⬇️ Set process variable yang akan masuk ke Camunda saat Complete Task
        form?.setValue?.("approval_status", "approved");
        form?.setValue?.("approval_timestamp", new Date().toISOString());
        // Tombol Complete Task sendiri ditangani oleh platform
    };

    return (
        <button type="button" onClick={handleApprove}>
            Approve
        </button>
    );
}

import React from "react";
import { AlurkerjaMfeProps } from "./type/AlurkerjaType";

export default function RefreshButton({ form, alurkerjaParams }: AlurkerjaMfeProps) {
    const handleRefresh = async () => {
        const baseUrl = alurkerjaParams?.apiBaseUrl ?? "";
        const token   = alurkerjaParams?.token ?? "";
        const tenant  = alurkerjaParams?.activeTenant ?? "";

        const res = await fetch(
            `${baseUrl}/api/v1/integration/addons/<addon-key>/<addon-id>/api/<action>`,
            {
                method: "POST",
                headers: {
                    "Content-Type":    "application/json",
                    "Authorization":   `Bearer ${token}`,
                    "x-active-tenant": tenant,
                },
                body: JSON.stringify({ variables: { /* input untuk action */ } }),
            }
        );
        const { data } = await res.json();

        // Update field di form → akan tersimpan saat task complete
        form?.setValue?.("progress_summary", JSON.stringify(data.progress_summary));
    };

    return (
        <button type="button" onClick={handleRefresh}>
            ↻ Refresh Progress
        </button>
    );
}

#!/usr/bin/env python3
import json
import argparse

def run(ctx):
    # Baca variabel input dari Camunda
    variables     = ctx.get("variables", {})       # dapat dimodifikasi via return
    parameters    = ctx.get("parameters", {})      # read-only
    configuration = ctx.get("configuration", {})   # read-only
    runkey        = ctx.get("runkey", "")

    top_tasks = variables.get("top_tasks", [])

    # ... lakukan logika bisnis ...
    progress_summary      = compute_progress(top_tasks)
    tasks_completed_today = sum(1 for t in progress_summary if t["completed_today"])

    # ⬇️ Set process variables lewat return value
    return {
        "status":  "ok",
        "message": f"{tasks_completed_today} task selesai hari ini",
        "runkey":  runkey,
        # ↓ field di bawah ini akan di-merge ke variables Camunda
        "progress_summary":      progress_summary,
        "tasks_completed_today": tasks_completed_today,
        "last_check_at":         "2025-01-15T16:00:00Z",
    }


if __name__ == "__main__":
    parser = argparse.ArgumentParser()
    parser.add_argument("--run", required=True)
    args = parser.parse_args()
    ctx = json.loads(args.run) if args.run.startswith("{") else json.load(open(args.run))
    print(json.dumps(run(ctx)))

return {
    "status":  "ok",
    "message": "ChatGPT response received",
    "data": {
        "ai_output":   ai_response,
        "tokens_used": result["usage"]["total_tokens"],
    },
    "runkey": runkey,
}

// ConfigView.tsx (React) — register di namespace value.*
<input {...form.register("value.api_token")} type="password" />
<input {...form.register("value.ac_base_url")} />

# script Python — akses tanpa prefix value.
token = ctx["configuration"]["api_token"]
url   = ctx["configuration"]["ac_base_url"]