🔗 Day 2 — Integrasi Lanjutan: OAuth2, Firecrawl & Structured Outputs

Week 3 · Day 2 · 6 Video Topik: Tiga Jenis Autentikasi Recap, Google OAuth2 Full Setup, Google Drive Trigger & PDF Extraction, Firecrawl Web Scraping, Structured Outputs, HTTP Request Node

---

📋 Daftar Isi

1. Ikhtisar Integrasi Lanjutan
2. Google OAuth2 Full Setup
3. Workflow Google Drive Trigger
4. Workflow PDF Extraction
5. Integrasi Firecrawl
6. Structured Outputs — Teknik Krusial
7. Demo Lengkap: Agent + Firecrawl + HTTP Request

---

🔍 Ikhtisar Integrasi Lanjutan

Day 2 membahas integrasi tingkat lanjut dengan fokus pada platform yang memerlukan konfigurasi autentikasi lebih kompleks. Sebelum menyelam ke detail, berikut rekap tiga jenis autentikasi:

Recap: Tiga Jenis Autentikasi

Jenis	Cara Kerja	Contoh
API Key	Copy-paste kunci rahasia	Firecrawl, OpenAI, Pushover
OAuth2 One-Click (Cloud)	n8n sudah siapkan OAuth app	Google Sheets, Gmail (di cloud)
OAuth2 Full (Self-Hosted)	Buat OAuth app sendiri di GCP	Google Drive, Gmail (self-hosted)

Fitur n8n yang Baru Diperkenalkan

Fitur	Shortcut	Fungsi
Projects	—	Mengorganisasi workflow dalam grup terpisah
Folders	—	Sub-organisasi di dalam project
Sticky Notes	Shift+S	Catatan visual di canvas untuk dokumentasi

💡 Fork in the Road: Pengguna cloud bisa kembali ke n8n cloud (OAuth sudah sederhana). Pengguna self-hosted harus ikuti setup OAuth2 full. Untuk webhook di self-hosted, gunakan ngrok sebagai tunnel.

---

🔐 Google OAuth2 Full Setup

Ini adalah proses yang harus dijalani pengguna self-hosted untuk mengakses Google APIs. Prosesnya terasa panjang, tapi hanya perlu dilakukan sekali.

Alur Lengkap Step-by-Step

┌──────────────────────────────────────────────────┐
│           Google Cloud Console (GCP)              │
│                                                   │
│  1. Buat Project Baru ("amplify")                │
│          │                                        │
│          ▼                                        │
│  2. APIs & Services → Library                    │
│     → Enable "Google Drive API"                  │
│          │                                        │
│          ▼                                        │
│  3. OAuth Consent Screen                         │
│     ├── Internal (Google Workspace user)         │
│     └── External + Testing (untuk Gmail biasa)   │
│          │                                        │
│          ▼                                        │
│  4. Credentials → Create OAuth Client ID         │
│     → Application Type: "Web Application"        │
│          │                                        │
│          ▼                                        │
│  5. KRITIS: Copy Redirect URI dari n8n           │
│     → Paste sebagai "Authorized Redirect URI"    │
│          │                                        │
│          ▼                                        │
│  6. Dapatkan Client ID + Client Secret           │
│     → Paste ke n8n credential                    │
│          │                                        │
│          ▼                                        │
│  7. Sign in with Google → Allow                  │
│     → "Connection Successful" ✅                 │
└──────────────────────────────────────────────────┘

Detail Setiap Langkah

Step	Lokasi	Aksi
1	GCP Console	Buat project baru bernama "amplify"
2	APIs & Services → Library	Cari dan enable "Google Drive API"
3	OAuth Consent Screen	Pilih External, tambahkan test users
4	Credentials → Create	Pilih "OAuth Client ID", tipe "Web Application"
5	n8n → Credential Google	Copy OAuth Redirect URI dari form n8n
6	GCP → Authorized Redirects	Paste URI, lalu copy Client ID + Secret
7	n8n → Credential	Paste ID + Secret, klik "Sign in with Google"

Mengapa OAuth2 Begitu Kompleks?

OAuth2 dirancang untuk keamanan akses pihak ketiga terhadap data pengguna. Kompleksitasnya adalah fitur, bukan bug:

• Pengguna memberikan izin eksplisit (consent screen)
• Aplikasi pihak ketiga tidak pernah melihat password
• Izin bisa dicabut kapan saja
• Scope bisa dibatasi (hanya Drive, hanya read, dll.)

⚠️ Kesalahan Umum: Lupa paste redirect URI dari n8n ke GCP. Tanpa ini, OAuth flow akan gagal total. Selalu copy URI dari n8n terlebih dahulu!

---

📁 Workflow Google Drive Trigger

Workflow pertama yang dibangun: monitor folder di Google Drive dan kirim notifikasi saat ada file baru.

Arsitektur Workflow

┌─────────────────┐     ┌──────────────────┐
│  Google Drive    │     │    Pushover      │
│  Trigger         │────▶│    Notification   │
│                  │     │                  │
│  📁 Monitor:    │     │  📱 "File baru   │
│  "Amplify File  │     │   terdeteksi!"   │
│   Drop" folder  │     │                  │
│  ⏱️ Every 1 min │     │                  │
│  🔔 File Created│     │                  │
└─────────────────┘     └──────────────────┘

Konfigurasi

Parameter	Nilai
Trigger	Google Drive Trigger
Event	File Created
Folder	"Amplify File Drop"
Poll Interval	Every 1 minute
Action	Pushover notification
Deploy	Production

---

📄 Workflow PDF Extraction

Workflow kedua lebih kompleks — mengunduh file dari Drive, mengekstrak teks dari PDF, dan mengirim kontennya via notifikasi.

Arsitektur Workflow

┌──────────────┐    ┌──────────────┐    ┌──────────────┐    ┌──────────┐
│ Google Drive  │    │ Google Drive  │    │ Extract from │    │ Pushover │
│ Trigger       │───▶│ Download File │───▶│ File (PDF)   │───▶│ Notify   │
│               │    │              │    │              │    │          │
│ File Created  │    │ ID: $json.id │    │ Auto-parse   │    │ Extracted│
│               │    │              │    │ PDF content  │    │ text     │
└──────────────┘    └──────────────┘    └──────────────┘    └──────────┘

Detail Teknis

Node	Konfigurasi
Drive Trigger	Monitor folder, event: file created
Download File	Expression: $json.id (ID dari trigger)
Extract from File	Tipe: PDF, auto-extract text
Pushover	Kirim extracted text sebagai notifikasi

Pengujian

Sebuah PDF test dengan isi "This is a very important message" berhasil:

1. Diupload ke Google Drive
2. Terdeteksi oleh trigger
3. Didownload
4. Diekstrak teksnya
5. Dikirim via Pushover — teks muncul di notifikasi ✅

💡 Tips Lanjutan: Untuk menangani berbagai tipe file, gunakan if/else routing berdasarkan MIME type. PDF, DOCX, dan tipe file lain bisa diarahkan ke extractor yang berbeda.

---

🔥 Integrasi Firecrawl

Firecrawl adalah platform web scraping, crawling, dan searching yang bisa digunakan oleh AI Agent untuk mengambil informasi dari internet.

Fitur Firecrawl

Fitur	Fungsi
Search	Mencari informasi di internet
Scrape	Mengambil konten dari halaman web tertentu
Crawl	Menjelajahi seluruh situs secara rekursif
Free Tier	500 halaman gratis

Instalasi di n8n

Firecrawl tersedia sebagai community node (bukan built-in):

1. Buka n8n → Settings → Community Nodes
2. Install "Firecrawl" node
3. Setup credential: masukkan API Key dari firecrawl.dev

⚠️ Firecrawl memiliki core node di n8n, tapi bukan tool node untuk AI Agent. Ini menjadi relevan di Day 3 ketika kita menggunakan MCP sebagai solusi.

---

⭐ Structured Outputs — Teknik Krusial

Ini adalah salah satu teknik PALING PENTING dalam seluruh kursus. Instruktur menekankan berulang kali bahwa Structured Outputs adalah "senjata rahasia" yang tidak cukup mendapat sorotan.

Apa itu Structured Outputs?

Structured Outputs memaksa LLM untuk menghasilkan output dalam format JSON yang sesuai dengan schema tertentu — bukan teks bebas, tapi data terstruktur yang bisa langsung diproses oleh workflow.

Cara Mengaktifkan di n8n

AI Agent Node
  └── "Require specific output format" → ON ✅
        └── Sub-node: Structured Output Parser
              └── Definisi JSON schema

Contoh Schema

{
  "search_query": "internet search query to answer the user's question"
}

Ketika LLM menerima schema ini, output-nya dijamin menghasilkan JSON yang conform:

{
  "search_query": "best accounting software for consulting firms 2025"
}

Mengapa Ini Sangat Powerful?

Tanpa Structured Outputs          Dengan Structured Outputs
─────────────────────             ─────────────────────────
"I think you should              { "search_query":
search for accounting              "accounting software
software..."                       consulting firms" }
     │                                  │
     ▼                                  ▼
  ❌ Teks bebas,                  ✅ JSON presisi,
  sulit diproses                  langsung bisa dipakai
  oleh node berikutnya            oleh node berikutnya

🔑 Key Insight: Structured Outputs memungkinkan Anda membangun pipeline yang bulletproof — setiap langkah menghasilkan data yang bisa diprediksi, meminimalkan error akibat output LLM yang berubah-ubah.

---

🔄 Demo Lengkap: Agent + Firecrawl + HTTP Request

Video terakhir mendemonstrasikan workflow end-to-end yang menggabungkan semua konsep hari ini.

Arsitektur Workflow

┌────────┐   ┌───────────────────────────┐   ┌──────────────┐   ┌──────────────┐
│  Chat  │──▶│  AI Agent (DeepSeek)      │──▶│  Firecrawl   │──▶│ HTTP Request │
│Trigger │   │                           │   │  Search      │   │ POST to      │
│        │   │  + Structured Output:     │   │              │   │ webhook.site │
│        │   │  {"search_query": "..."}  │   │  Query from  │   │              │
│        │   │                           │   │  JSON output │   │ Send results │
└────────┘   └───────────────────────────┘   └──────────────┘   └──────────────┘

Alur Data

1. User mengirim pertanyaan via chat
2. AI Agent (DeepSeek + Structured Output Parser) menghasilkan search query dalam format JSON
3. Firecrawl Search menggunakan $json.output.search_query untuk mencari di internet
4. HTTP Request (POST) mengirim hasil ke webhook.site sebagai JSON

HTTP Request Node — Generic Node

Aspek	Detail
Tipe	Generic HTTP Request
Method	POST
URL	webhook.site (untuk testing)
Body	JSON dengan hasil pencarian
Fungsi	Mengirim data ke endpoint external apapun

HTTP Request node adalah "Swiss Army Knife" n8n — bisa berkomunikasi dengan API manapun yang belum memiliki node khusus.

---

📊 Ringkasan Tiga Integrasi Hari Ini

Integrasi	Autentikasi	Kategori
Google Drive	OAuth2 Full	File monitoring & extraction
Firecrawl	API Key	Web scraping & searching
HTTP Request	Varies	Generic API communication

Ditambah dua teknik core:

• Structured Outputs — constraint output LLM ke JSON schema
• PDF Extraction — mengambil teks dari file PDF

---

📊 Tabel Terminologi

Istilah	Definisi
OAuth2	Protokol autentikasi untuk akses aman ke data pihak ketiga
Redirect URI	URL callback yang dikirim GCP ke n8n setelah user approve
Client ID	Identifier publik untuk OAuth application
Client Secret	Kunci rahasia untuk OAuth application
Consent Screen	Halaman izin yang ditampilkan ke pengguna saat OAuth
Structured Output Parser	Sub-node yang memaksa LLM output JSON sesuai schema
Firecrawl	Platform web scraping/searching untuk AI
webhook.site	Layanan testing untuk menerima HTTP request
MIME Type	Identifier tipe file (application/pdf, text/html, dll.)
Community Node	Node n8n yang dibuat oleh komunitas, bukan tim resmi

---

🏆 Pencapaian Day 2

✅ Menguasai Google OAuth2 full setup di GCP Console
✅ Membangun Google Drive trigger workflow
✅ Mengekstrak teks dari PDF secara otomatis
✅ Mengintegrasikan Firecrawl untuk web scraping
✅ Menguasai Structured Outputs — teknik paling penting
✅ Menggunakan HTTP Request node untuk komunikasi API generik
✅ Membangun pipeline end-to-end: Chat → Agent → Search → POST

🎯 Progres: 80% melalui kursus selesai! Structured Outputs adalah game-changer yang akan terus digunakan di hari-hari berikutnya.