Playground

Playground adalah lingkungan interaktif tempat Anda dapat bereksperimen dengan kode function dan mengujinya secara instan tanpa membuat function. Sempurna untuk belajar, prototyping, dan iterasi cepat.

Apa itu Playground? link

Playground adalah sandbox kode yang memungkinkan Anda:

• ✅ Tulis dan uji kode function secara instan
• ✅ Bereksperimen dengan berbagai runtime (Python, JavaScript, TypeScript)
• ✅ Tes dengan payload JSON kustom
• ✅ Lihat hasil secara langsung
• ✅ Simpan kode yang berfungsi untuk membuat function nanti

Keuntungan:

• 🚀 Tidak perlu deployment - Tes kode tanpa membuat function
• ⚡ Umpan balik instan - Lihat hasil dalam hitungan detik
• 🔄 Iterasi cepat - Ubah kode dan uji kembali secara langsung
• 💡 Belajar sambil melakukan - Bereksperimen dengan contoh
• 💾 Simpan saat siap - Konversi ke function dengan satu klik

Mengakses Playground link

Dari Halaman Functions link

Klik tombol Playground di halaman Functions:

Lokasi: Header halaman Functions, di sebelah tombol “New Function”

Antarmuka Playground link

Playground memiliki tiga bagian utama:

1. Configuration - Pilih runtime
2. Code Editor - Tulis kode function
3. Test Panel - Input event dan lihat hasil

Langkah 1: Pilih Runtime link

Pilih bahasa pemrograman:

Runtime yang tersedia:

• Python (Python 3.11)
• JavaScript (Bun)
• TypeScript (Bun) - Default

Yang terjadi saat Anda mengganti runtime:

• Editor kode diperbarui dengan template default untuk bahasa yang dipilih
• Kode sebelumnya diganti (tidak disimpan otomatis)
• Event tes tetap sama

Tips: Mulai dengan TypeScript untuk type safety, atau Python untuk kesederhanaan.

Langkah 2: Tulis Kode Function link

Gunakan editor kode Monaco untuk menulis function Anda:

Fitur Editor link

Editor menyediakan:

• ✅ Syntax highlighting - Kode berwarna-warni
• ✅ Auto-completion - Saran IntelliSense
• ✅ Deteksi error - Pengecekan sintaks real-time
• ✅ Pengeditan multi-kursor - Edit beberapa baris sekaligus
• ✅ Code folding - Perluas/ciutkan blok kode

Template Default link

Setiap runtime memiliki function kalkulator default:

Python:

  # index.py  (Python 3.11)
def handler(event):
    try:
        a = float(event.get("key1"))
        b = float(event.get("key2"))
    except Exception:
        return {
            "statusCode": 400,
            "headers": {"content-type": "application/json"},
            "body": '{"error":"key1 and key2 must be numbers"}',
        }

    return {
        "statusCode": 200,
        "headers": {"content-type": "application/json"},
        "body": '{"result": %s}' % (a + b),
    }
  

TypeScript:

  // index.ts (TypeScript)
interface Event {
  key1?: number | string;
  key2?: number | string;
}

export async function handler(event: Event) {
  const a = Number(event?.key1);
  const b = Number(event?.key2);

  if (!Number.isFinite(a) || !Number.isFinite(b)) {
    return {
      statusCode: 400,
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ error: "key1 and key2 must be numbers" }),
    };
  }

  return {
    statusCode: 200,
    headers: { "content-type": "application/json" },
    body: JSON.stringify({ result: a + b }),
  };
}
  

Persyaratan Function link

Function Anda harus:

• Ekspor atau definisikan function handler
• Menerima satu parameter: event (dict/objek)
• Mengembalikan objek dengan statusCode dan body

Struktur yang valid:

  export async function handler(event) {
  // Logika Anda di sini
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Success" }),
  };
}
  

Langkah 3: Konfigurasi Event Tes link

Masukkan payload JSON untuk menguji function Anda:

Editor Event Tes link

Panel event tes memiliki:

• Editor JSON dengan syntax highlighting
• Validasi real-time (menampilkan apakah JSON valid)
• Payload default yang sesuai dengan template function

Event tes default:

  {
  "key1": 10,
  "key2": 5
}
  

Event Tes Kustom link

Ganti default dengan JSON Anda sendiri:

Contoh 1 - Registrasi pengguna:

  {
  "username": "alice",
  "email": "alice@example.com",
  "age": 30
}
  

Contoh 2 - Pemrosesan gambar:

  {
  "imageUrl": "https://example.com/photo.jpg",
  "width": 800,
  "height": 600,
  "format": "jpeg"
}
  

Contoh 3 - Transformasi data:

  {
  "data": [
    {"name": "Alice", "score": 95},
    {"name": "Bob", "score": 87}
  ],
  "sortBy": "score"
}
  

Tips: Tes dengan beberapa payload untuk memverifikasi berbagai skenario.

Langkah 4: Jalankan Tes link

Klik tombol Run untuk mengeksekusi function Anda:

Yang Terjadi link

Saat Anda klik Run:

1. Kode dikirim ke lingkungan tes backend
2. Function mengeksekusi dengan event tes Anda
3. Hasil ditampilkan di panel Output
4. Log ditampilkan di bawah output

Waktu: Biasanya selesai dalam 1-2 detik

Langkah 5: Lihat Hasil link

Setelah eksekusi, hasil muncul di panel Output:

Panel Output link

Menampilkan nilai kembalian function:

Respons berhasil:

  {
  "statusCode": 200,
  "headers": {
    "content-type": "application/json"
  },
  "body": "{\"result\": 15}"
}
  

Respons error:

  {
  "statusCode": 400,
  "body": "{\"error\": \"key1 and key2 must be numbers\"}"
}
  

Langkah 6: Iterasi dan Tingkatkan link

Playground sempurna untuk iterasi cepat:

Alur Kerja Iterasi link

1. Ubah kode di editor
2. Klik Run untuk tes
3. Lihat hasil dan log
4. Ulangi hingga berfungsi

Contoh iterasi:

Iterasi 1 - Function dasar:

  export async function handler(event) {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello" }),
  };
}
  

Tes: ✅ Berfungsi

Iterasi 2 - Tambah parameter:

  export async function handler(event) {
  const name = event?.name || "World";
  return {
    statusCode: 200,
    body: JSON.stringify({ message: `Hello, ${name}` }),
  };
}
  

Tes: ✅ Berfungsi

Iterasi 3 - Tambah validasi:

  export async function handler(event) {
  if (!event?.name) {
    return {
      statusCode: 400,
      body: JSON.stringify({ error: "name is required" }),
    };
  }

  return {
    statusCode: 200,
    body: JSON.stringify({ message: `Hello, ${event.name}` }),
  };
}
  

Tes: ✅ Berfungsi dengan validasi

Simpan ke Functions link

Saat kode Anda berfungsi dengan sempurna, simpan sebagai function:

Klik “Save to Functions” link

Lokasi: Sudut kanan atas Playground

Yang Terjadi link

1. Kode, runtime, dan event tes saat ini disimpan
2. Anda diarahkan ke halaman New Function
3. Formulir terisi otomatis dengan kode Playground Anda
4. Selesaikan setup (nama, resource, dll.)
5. Klik Save untuk deploy

Manfaat: Lewati penulisan kode ulang - cukup konfigurasi dan deploy!

Navigasi link

Kembali ke Functions link

Klik panah Back untuk kembali ke daftar Functions:

Catatan: Kode Playground Anda tidak disimpan saat Anda berpindah halaman (kecuali Anda klik “Save to Functions”).

Kasus Penggunaan link

1. Belajar Serverless Functions link

Sempurna untuk pemula:

• Coba template default
• Ubah kode dan lihat apa yang terjadi
• Bereksperimen dengan runtime berbeda
• Pelajari struktur function

Contoh: Ubah kalkulator untuk melakukan perkalian alih-alih penjumlahan.

2. Prototyping Ide Baru link

Pengembangan cepat:

• Tes algoritma sebelum deploy
• Validasi transformasi data
• Bereksperimen dengan API eksternal
• Prototype logika bisnis

Contoh: Tes logika transformasi JSON sebelum membuat function produksi.

3. Pengujian Cuplikan Kode link

Validasi cepat:

• Tes pola regex
• Validasi parsing data
• Cek penanganan error
• Verifikasi edge case

Contoh: Tes apakah parsing tanggal Anda berfungsi dengan berbagai format.

4. Membandingkan Runtime link

Perbandingan performa:

• Tulis logika yang sama di Python dan TypeScript
• Tes waktu eksekusi
• Bandingkan kompleksitas kode
• Pilih runtime terbaik untuk kasus penggunaan Anda

Contoh: Bandingkan performa parsing JSON antar runtime.

5. Debug Function yang Ada link

Isolasi masalah:

• Salin kode function ke Playground
• Tes dengan payload tertentu
• Tambahkan log debug
• Perbaiki masalah, lalu perbarui function

Contoh: Debug mengapa function gagal dengan input tertentu.

Contoh Alur Kerja link

Contoh 1: Buat API Sapaan link

Tujuan: Function yang menyapa pengguna dalam berbagai bahasa

Langkah 1: Buka Playground, pilih TypeScript

Langkah 2: Tulis kode:

  interface Event {
  name?: string;
  language?: string;
}

export async function handler(event: Event) {
  const name = event?.name || "Friend";
  const lang = event?.language || "en";

  const greetings: Record<string, string> = {
    en: "Hello",
    es: "Hola",
    fr: "Bonjour",
    de: "Hallo",
    ja: "こんにちは",
  };

  const greeting = greetings[lang] || greetings.en;

  return {
    statusCode: 200,
    headers: { "content-type": "application/json" },
    body: JSON.stringify({
      message: `${greeting}, ${name}!`,
      language: lang,
    }),
  };
}
  

Langkah 3: Tes dengan event berbeda:

  {"name": "Alice", "language": "es"}
  

→ Respons: "Hola, Alice!"

  {"name": "Bob", "language": "ja"}
  

→ Respons: "こんにちは, Bob!"

Langkah 4: Klik “Save to Functions”, deploy sebagai greeting-api

Contoh 2: Validator Data JSON link

Tujuan: Validasi struktur data yang masuk

Langkah 1: Buka Playground, pilih Python

Langkah 2: Tulis kode:

  def handler(event):
    required_fields = ["email", "age", "name"]

    # Cek field yang diperlukan
    missing = [f for f in required_fields if f not in event]
    if missing:
        return {
            "statusCode": 400,
            "body": f'{{"error": "Missing fields: {", ".join(missing)}"}}',
        }

    # Validasi email
    email = event["email"]
    if "@" not in email:
        return {
            "statusCode": 400,
            "body": '{"error": "Invalid email format"}',
        }

    # Validasi usia
    try:
        age = int(event["age"])
        if age < 0 or age > 150:
            raise ValueError()
    except:
        return {
            "statusCode": 400,
            "body": '{"error": "Age must be between 0 and 150"}',
        }

    return {
        "statusCode": 200,
        "body": '{"message": "Validation passed"}',
    }
  

Langkah 3: Tes dengan data tidak valid:

  {"name": "Alice", "email": "invalid", "age": -5}
  

→ Respons: "Invalid email format"

Langkah 4: Tes dengan data valid:

  {"name": "Alice", "email": "alice@example.com", "age": 30}
  

→ Respons: "Validation passed"

Tips dan Trik link

Pintasan Editor link

Pintasan keyboard (sama seperti VS Code):

Tips Debugging link

✅ Tambahkan logging:

  # Python
print(f"Event received: {event}")
print(f"Processing key1: {event.get('key1')}")
  

  // TypeScript
console.log("Event received:", event);
console.log("Processing key1:", event?.key1);
  

✅ Tes edge case:

• Payload kosong: {}
• Field yang hilang: {"key1": 10} (tanpa key2)
• Tipe tidak valid: {"key1": "abc", "key2": "def"}
• Nilai besar: {"key1": 999999, "key2": 888888}

Pengujian Performa link

✅ Cek waktu eksekusi di log:

• Tipikal: 50-200ms
• Lambat: >500ms (optimalkan kode)

✅ Tes dengan payload besar:

  {
  "data": [
    {"id": 1, "value": "..."},
    {"id": 2, "value": "..."},
    ... // 100 item
  ]
}
  

Keterbatasan link

Batasan Playground:

• ⚠️ Tidak ada deployment - Kode berjalan dalam mode tes saja
• ⚠️ Tidak ada persistensi - Kode hilang saat refresh halaman (kecuali disimpan)
• ⚠️ Tidak ada paket kustom - Hanya library bawaan yang tersedia
• ⚠️ Eksekusi tunggal - Bukan untuk load testing

Untuk deploy: Gunakan “Save to Functions” untuk membuat function yang sesungguhnya.

Praktik Terbaik link

✅ Bereksperimen dengan bebas:

• Coba berbagai pendekatan
• Rusak hal-hal dan belajar
• Tes input yang tidak biasa
• Jangan khawatir tentang kesalahan

✅ Tes secara menyeluruh sebelum menyimpan:

• Tes happy path
• Tes kasus error
• Tes edge case
• Verifikasi semua skenario berfungsi

✅ Gunakan Playground untuk belajar:

• Coba fitur khusus runtime
• Pelajari pola async
• Latih penanganan error
• Jelajahi API

✅ Simpan saat siap:

• Hanya simpan kode yang berfungsi
• Verifikasi tes lulus
• Tambahkan komentar untuk kejelasan
• Kemudian deploy sebagai function

Pemecahan Masalah link

Masalah: Kode tidak berjalan link

Gejala:

• Klik Run tetapi tidak ada yang terjadi
• Atau error langsung muncul

Solusi:

1. Periksa syntax error (garis bergelombang merah)
2. Pastikan function handler ada
3. Periksa tanda tangan function sudah benar
4. Verifikasi event tes JSON valid

Masalah: Hasil yang tidak terduga link

Gejala:

• Output tidak sesuai harapan
• Logika tampak salah

Solusi:

1. Tambahkan pernyataan console.log / print
2. Cek panel log untuk output
3. Verifikasi event tes memiliki data yang benar
4. Telusuri logika secara mental

Masalah: Tidak dapat menyimpan ke Functions link

Gejala:

• Tombol tidak berfungsi
• Atau error terjadi

Solusi:

1. Pastikan kode memiliki sintaks yang valid
2. Cek konsol browser untuk error
3. Coba refresh halaman dan tulis ulang kode
4. Hubungi administrator jika berlanjut

Referensi Cepat link

Alur Kerja Playground link

1. Pilih runtime → Pilih bahasa
2. Tulis kode → Buat function handler
3. Masukkan event tes → Payload JSON
4. Klik Run → Eksekusi function
5. Lihat hasil → Cek output dan log
6. Iterasi → Ubah dan uji kembali
7. Simpan → Deploy sebagai function

Template Function link

Function minimal yang dapat berjalan:

  export async function handler(event) {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello" }),
  };
}
  

Langkah Selanjutnya link

• Buat Function - Deploy kode Playground Anda
• Kelola Functions - Pelajari operasi function
• Lihat Log - Debug eksekusi function