Panduan Langkah demi Langkah Menggunakan Apiframe di n8n

Dalam panduan ini, Anda akan mempelajari cara menghubungkan Apiframe ke n8n sehingga Anda dapat menghasilkan gambar AI (atau video, musik, dan sebagainya) dari workflow apa pun.

Kita akan membahas:

1. Apa yang akan kita bangun
2. Prasyarat
3. Membuat kredensial Apiframe di n8n
4. Workflow 1 - Pembuatan gambar sederhana menggunakan /imagine
5. Workflow 2 - Mengambil hasil secara berkala dengan /fetch
6. Workflow 3 - Direkomendasikan: Menggunakan webhook untuk hasil real-time
7. Memperluas pola ini ke endpoint Apiframe lainnya

Semua contoh akan menggunakan endpoint Midjourney /imagine namun pola yang sama dapat digunakan untuk sebagian besar endpoint dan model lainnya.

I. Apa yang akan kita bangun

Kita akan membangun dua integrasi kecil di n8n:

1. Menghasilkan gambar secara on-demand
   • Pemicu: Manual, Webhook, Google Sheet, apa saja
   • HTTP Request: POST https://api.apiframe.pro/imagine
   • Menerima kembali sebuah task_id yang dapat Anda simpan atau catat
2. Mendapatkan gambar final secara otomatis
   • Dengan melakukan polling ke Apiframe menggunakan /fetch sampai tugas selesai
   • Atau (direkomendasikan) biarkan Apiframe memanggil Webhook n8n ketika tugas selesai

Setelah URL gambar masuk ke n8n, Anda bisa melakukan apa saja: mengirimkannya ke Slack, menyimpannya di Airtable, Google Drive, dll.

II. Prasyarat

Anda akan memerlukan:

• Sebuah akun Apiframe dan sebuah API key. Anda bisa mengambilnya dari dashboard Apiframe Anda (atau Klik di sini). API key ini akan digunakan untuk mengautentikasi request kita melalui header Authorization .

• Sebuah instance n8n (self-hosted atau cloud)
• Pemahaman dasar tentang node-node n8n (HTTP Request, Webhook, Set, IF, dll.). Node HTTP Request adalah cara umum untuk memanggil REST API apa pun di n8n.

III. Membuat kredensial Apiframe di n8n

Kita akan mengonfigurasi kredensial satu kali, lalu menggunakannya kembali di semua node HTTP Request.

• Langkah 1: Di n8n, pergi ke Credentials → Create credential.

• Langkah 2: Pilih Header Auth (atau "HTTP Header Auth", "API Key in Header" tergantung versi Anda)

• Langkah 3: Konfigurasikan:
  • Nama header: Authorization
  • Nilai: Apiframe API key Anda (persis seperti yang ditampilkan di dashboard Anda)

• Langkah 4: Beri nama seperti Apiframe Auth dan simpan

Apiframe mengharapkan:

Authorization: YOUR_API_KEY
Content-Type: application/json

IV. Workflow 1 - Pembuatan gambar dasar dengan /imagine

Kita akan membuat workflow sederhana:

1. Buat workflow

1. Di n8n, buat sebuah New workflow.
2. Tambahkan sebuah Manual Trigger node.

2. Tambahkan node "Set" untuk prompt

1. Tambahkan Set node setelah Manual Trigger.
2. Di Values → Add Field → String:
   • Name: prompt
   • Value: misalnya a cinematic photo of a cyberpunk city at night, ultra detailed, 4k
3. (Opsional) Tambahkan field string lainnya:
   • Name: aspect_ratio
   • Value: 3:2

Sekarang output JSON dari node Set kurang lebih terlihat seperti:

{
  "prompt": "a cinematic photo of a cyberpunk city at night, ultra detailed, 4k",
  "aspect_ratio": "3:2"
}

3. Tambahkan node HTTP Request untuk /imagine

1. Tambahkan HTTP Request node setelah node Set.
2. Konfigurasikan:
   • Method: POST
   • URL: https://api.apiframe.pro/imagine
   • Untuk autentikasi, pilih "Generic Credential type", lalu "Header Auth", kemudian kredensial “Apiframe Auth” yang Anda buat sebelumnya.
   • Untuk body, aktifkan "Send body", dan mari kita tambahkan field: prompt, aspect_ratio, dan opsional webhook_url untuk nanti.

Saat Anda mengeksekusi node ini, Apiframe akan mengembalikan sesuatu seperti:

{
  "task_id": "29e983ca-7e86-4017-a9e3-ef6fe9cd5f2a"
}

Ini berarti task tersebut sedang queued/processing. Gambar dibuat secara asinkron; Anda tidak mendapatkan URL final dari /imagine itu sendiri.

Sekarang Anda dapat:

• Mencatat (log) task_id
• Simpan di database / Google Sheet
• Teruskan ke workflow “Fetch”

V. Workflow 2 - Melakukan polling ke Apiframe dengan /fetch

Sekarang mari kita ambil URL gambar sebenarnya menggunakan endpoint /fetch.

Apiframe menyediakan endpoint POST https://api.apiframe.pro/fetch yang menerima task_id dan mengembalikan enten hasil akhir atau respons status: "processing".

Kita akan membuat flow sederhana “Tunggu lalu Fetch”.

1. Tambahkan node Wait

Setelah node HTTP Request /imagine:

1. Tambahkan node Wait.
2. Atur agar menunggu, misalnya, 2–3 detik.

Ini memberi Apiframe waktu untuk menyelesaikan proses generasi. Waktu generasi bergantung pada kompleksitas task dan beban sistem.

2. Tambahkan node HTTP Request /fetch

Tambahkan satu lagi node HTTP Request setelah node Wait:

• Method: POST
• URL: https://api.apiframe.pro/fetch
• Untuk autentikasi, pilih "Generic Credential type", lalu "Header Auth", kemudian “Apiframe Auth”, sama seperti sebelumnya.
• Untuk body, aktifkan "Send body", dan mari kita tambahkan task_id field

Processing (pekerjaan masih berjalan):

{
  "task_id": "29e983ca-7e86-4017-a9e3-ef6fe9cd5f2a",
  "task_type": "imagine",
  "status": "processing",
  "percentage": "40"
}

Completed (pekerjaan selesai, URL gambar sudah siap):

{
  "task_id": "29e983ca-7e86-4017-a9e3-ef6fe9cd5f2a",
  "task_type": "imagine",
  "original_image_url": "https://.../grid.png",
  "image_urls": [
    "https://.../image1.png",
    "https://.../image2.png",
    "https://.../image3.png",
    "https://.../image4.png"
  ]
}

3. Menangani “still processing”

Untuk setup pengembangan yang cepat, Anda bisa:

• Cukup tunggu lebih lama dan fetch sekali saja.
• Atau tambahkan sebuah IF node sederhana setelah Fetch:
  • Kondisi: status sama dengan "processing"
  • Jika “true”: bercabang ke Wait + Fetch lain
  • Jika “false”: lanjutkan ke logika akhir Anda (Slack, Airtable, dll.)

Di lingkungan produksi, Apiframe menyarankan untuk menggunakan webhook alih-alih polling untuk menghindari request yang tidak perlu dan mendapatkan pembaruan instan.

Mari kita lakukan itu selanjutnya.

VI. Workflow 3 - Hasil berbasis webhook (direkomendasikan)

Ini adalah arsitektur yang rapi dan “real-time”:

• Workflow A: Kirim permintaan pembuatan (dengan webhook_url dan webhook_secret)
• Workflow B: Terima webhook dari Apiframe ketika proses pembuatan selesai

1. Buat Workflow B - Penerima webhook

1. Buat sebuah New workflow di n8n dan beri nama Apiframe – Gambar Selesai.
2. Tambahkan sebuah Webhook node. Konfigurasikan node Webhook:
   • Metode HTTP: POST
   • Path: misalnya apiframe/midjourney-completed
   • Mode respons:
     • Sebagai contoh, When Last Node Finishes (agar Anda bisa mengembalikan data jika diperlukan).

Salin Production URL – ini yang akan kita set sebagai webhook_url di Apiframe.

2. Amankan webhook dengan "webhook_secret"

Apiframe memungkinkan Anda mengirimkan sebuah webhook_secret di permintaan /imagine; nilai ini akan dikirim kembali sebagai header x-webhook-secret pada panggilan webhook.

1. Tambahkan sebuah IF node setelah node Webhook.
2. Di node IF, periksa:
   • Sisi kiri: Ekspresi seperti ={{ $json["headers"]["x-webhook-secret"] }}
   • Kondisi: equals
   • Sisi kanan: secret Anda, misalnya my-super-secret
3. Jika secret tidak cocok, arahkan ke cabang yang hanya berakhir begitu saja (atau mencatat percobaannya).

Ini memastikan hanya webhook dari Apiframe yang diproses.

3. Mengakses URL gambar di payload webhook

Body webhook akan terlihat sama seperti payload “completed” yang ditunjukkan sebelumnya:

{
  "task_id": "29e983ca-7e86-4017-a9e3-ef6fe9cd5f2a",
  "task_type": "imagine",
  "original_image_url": "https://.../grid.png",
  "image_urls": [
    "https://.../image1.png",
    "https://.../image2.png",
    "https://.../image3.png",
    "https://.../image4.png"
  ]
}

Anda bisa mengakses URL gambar tersebut, lalu meneruskannya ke:

• Node Slack (kirim pesan dengan URL tersebut)
• Airtable / Notion (simpan URL tersebut)
• HTTP Request (push ke backend aplikasi Anda)

4. Perbarui Workflow A untuk menggunakan webhook

Kembali ke Workflow A (yang memanggil /imagine) dan edit body node HTTP Request untuk menyertakan:

• webhook_url
• webhook_secret

Contoh body JSON di node HTTP Request:

{
  "prompt": "a cinematic photo of a cyberpunk city at night, ultra detailed, 4k",
  "aspect_ratio": "3:2",
  "webhook_url": "https://your-n8n-domain.com/webhook/apiframe/midjourney-completed",
  "webhook_secret": "my-super-secret"
}

Sekarang alurnya adalah:

1. Workflow A → /imagine dengan webhook_url + webhook_secret
2. Apiframe membuat gambar di background
3. Setelah selesai, Apiframe memanggil Webhook Anda (Workflow B) dengan URL final
4. Workflow B memprosesnya dan mengirimkannya ke mana pun Anda inginkan

Tanpa polling, tanpa request HTTP tambahan – sepenuhnya berbasis event.

VII. Memperluas pola ini ke endpoint Apiframe lainnya

Bagian terbaiknya: begitu Anda pernah menghubungkan n8n → Apiframe sekali, Anda dapat menggunakan kembali pola yang sama untuk semuanya.

Beberapa ide:

• Variations: ganti URL menjadi https://api.apiframe.pro/variations dan kirimkan task_id + prompt baru.
• Upscales: otentikasi sama, endpoint/body berbeda.
• Faceswap: kirim dua URL gambar (source & target) ke endpoint faceswap.
• Describe: bangun workflow n8n di mana kamu memasukkan sebuah URL gambar dan Apiframe mengembalikan prompt untuk gambar tersebut.
• Media lain: Flux, Ideogram, Luma, Suno, dll. semuanya mengikuti pola REST yang sama: POST dengan JSON, sertakan webhook_url + webhook_secret jika kamu ingin menggunakan webhook.

Masing-masing dari ini hanya menjadi node HTTP Request lain (atau dua node, jika kamu juga menggunakan /fetch) dengan menggunakan kredensial “Apiframe Auth” yang sama.

VIII. Penutup

Sekarang kamu sudah memiliki:

• Sebuah workflow dasar /imagine untuk memicu Midjourney melalui Apiframe di n8n
• Sebuah setup polling menggunakan /fetch untuk eksperimen cepat
• Sebuah arsitektur berbasis webhook untuk pipeline real-time yang siap produksi