AI On The Cloud

Streamlit & n8n Chatbot Deployment Hands-On

Ilham Maulana

Data Connect 2025 - HIMASATA UNM

Villa Estria 3, 31 Mei 2025


🌩️ Apa sih Cloud itu?

Cloud itu kayak komputer orang lain yang bisa kamu pake lewat internet.


Kamu gak perlu beli server, gak perlu pasang alat di rumah — tinggal sewa, langsung bisa dipake buat apa aja.
Mau simpen data, jalanin aplikasi, atau deploy AI, semua bisa.

🏠 Web Hosting 

Kamu tinggal masuk, udah ada semuanya.
Ada kamar, kasur, wifi — tapi kamu gak bisa ubah-ubah seenaknya.
Pakai bareng orang lain juga.

🏢 VPS  

Kamu punya satu rumah virtual buat sendiri.
Mau ubah desain, pasang AC, ganti pintu, bahkan bongkar tembok — bebas!

Fitur Web Hosting VPS
Akses Root ❌ Gak bisa ✅ Bebas full kontrol
Bisa install bebas ❌ Terbatas ✅ Bisa install apa aja
Pemakaian resource Barengan orang lain Dedicated (punya sendiri)
Harga Murah Agak mahal, tapi sepadan
Cocok buat Website doang Project serius, deploy AI, dll

🔍 Perbedaan

Kalau kamu cuma mau “numpang tinggal” buat website, pakai Web Hosting cukup.


Tapi kalau kamu pengen punya kekuasaan penuh kayak developer sejati,
VPS jawabannya 💻🔥

🚀 Apa itu Deployment?

Deployment itu proses “ngewujudin” project kamu biar bisa diakses orang lain lewat internet.
Bayangin kamu udah bikin website atau app di laptop — nah, deployment itu proses mindahin semua itu ke server (misalnya VPS), biar orang lain juga bisa pakai.

Coding doang itu kayak nulis lagu di kamar.
Deployment itu manggung di depan banyak orang.

🧱 Apa itu Docker?

Docker itu kayak kardus ajaib buat nge-pack project kamu lengkap sama isinya:
kodenya, dependensinya, bahkan sistem operasinya!

Jadi kamu bisa ngejalanin project itu di mana aja tanpa takut “eh kok error sih di laptop kamu?” 😤

Docker itu wadah yang ngebungkus project kamu biar bisa dipindah-pindah tanpa drama.
Kayak kamu bawa mie instan — tinggal diseduh, langsung siap makan 🍜

🧭 Apa itu Portainer?

Portainer itu dashboard web buat ngatur Docker dan container-container kamu, tanpa ribet ketik-ketik perintah di terminal.

Portainer = Control panel buat Docker.
Tinggal klik-klik, langsung jalan!

🧠 Ibaratnya...

Docker itu mesin motor.
Portainer itu dashboard-nya yang ada speedometer, tombol, dan GPS.
Biar kamu bisa jalanin dan ngawasin semuanya dengan nyaman 👌

🎨 Apa itu Streamlit?

Streamlit itu tool Python super simpel buat bikin web app interaktif, langsung dari script Python kamu.

Gak perlu pusing mikirin HTML, CSS, atau JavaScript — cukup nulis Python, dan dalam hitungan detik:
boom! jadi website.

Streamlit tuh kayak lem ajaib yang nyambungin Python kamu ke tampilan web
— biar orang lain bisa interaksi langsung sama model atau data kamu.

🎨 Apa itu Streamlit?

Streamlit itu tool Python super simpel buat bikin web app interaktif, langsung dari script Python kamu.

Gak perlu pusing mikirin HTML, CSS, atau JavaScript — cukup nulis Python, dan dalam hitungan detik:
boom! jadi website.

Streamlit tuh kayak lem ajaib yang nyambungin Python kamu ke tampilan web
— biar orang lain bisa interaksi langsung sama model atau data kamu.

🤖 Apa itu Chatbot?

Chatbot itu kayak asisten virtual yang bisa jawab pertanyaan kamu otomatis lewat teks.
Bisa dipasang di web, aplikasi, atau bahkan Telegram & WhatsApp.

  • Jawabin pertanyaan pelanggan

  • Ngasih info 24 jam nonstop

  • Ngurangi kerjaan admin/manual

  • Bikin interaksi makin cepet dan simpel

🔥 Gunanya buat apa?

📚 Apa itu RAG?

RAG itu teknik cerdas buat bikin chatbot lebih pinter dan fakta-akurat, terutama pas jawab hal-hal berbasis data atau dokumen.

💥 Cara kerja RAG

  • Retrieval
    Cari dokumen/konten yang relevan dari database atau knowledge base

  • Augmentation
    Gabungkan hasil pencarian itu ke prompt

  • Generation
    Model LLM (kayak ChatGPT, Gemini, Claude) buat jawabannya dari gabungan data itu

Chatbot = robot ngobrol.
RAG = chatbot yang baca dulu sebelum jawab.

🧠 Apa itu LLM?

LLM (Large Language Model) itu mesin otak buatan yang dilatih buat ngerti, ngerespon, dan ngehasilin teks kayak manusia.
Model kayak ini bisa bantuin kamu nulis, jawab pertanyaan, bikin kode, bahkan curhat juga diladenin 😅

LLM itu kayak robot yang jago banget baca dan nulis,
karena dia dilatih dari miliaran kata di internet, buku, artikel, chat, kode, dll.

🧪 Contoh LLM terkenal:

  • GPT-4, GPT-3.5 → OpenAI

  • Claude → Anthropic

  • Gemini → Google

  • LLaMA → Meta

  • Mistral, Mixtral → model open-source

🔄 Apa itu n8n?

n8n itu tool otomatisasi alur kerja (workflow automation) yang bisa kamu pake buat ngubungin berbagai aplikasi, API, dan layanan jadi satu alur otomatis — tanpa harus ngoding ribet!

n8n tuh kayak “otak otomatis” yang bisa ngejalanin perintah berurutan, misal:

"Kalau ada pesan masuk di Telegram → ambil info dari GPT → kirim balik jawabannya ke user."

🛒 Sewa VPS

https://console.idcloudhost.com

🐳 Install Docker

# Masuk dulu ke VPS kamu via SSH:
ssh root@IP_ADDRESS

# Lalu jalankan ini:
apt update && apt upgrade -y
apt install -y ca-certificates curl gnupg lsb-release

# Tambahkan Docker GPG key:
mkdir -m 0755 -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | \
gpg --dearmor -o /etc/apt/keyrings/docker.gpg

# Tambahkan repo Docker:
echo \
  "deb [arch=$(dpkg --print-architecture) \
  signed-by=/etc/apt/keyrings/docker.gpg] \
  https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | \
  tee /etc/apt/sources.list.d/docker.list > /dev/null
  
# Install Docker:
apt update
apt install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

# Cek apakah Docker jalan:
docker --version





⚙️ Install Portainer

# Jalankan container Portainer:

docker volume create portainer_data

docker run -d -p 9000:9000 -p 8000:8000 \
  --name=portainer \
  --restart=always \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v portainer_data:/data \
  portainer/portainer-ce
  
 # Tunggu beberapa detik, lalu buka di browser:
 
 http://IP_VPS_KAMU:9000

⚙️ Setup Domain dan SSL

# Pointing DNS
Login ke tempat kamu beli domain
Tambahkan record A

| Tipe | Nama               | IP VPS Kamu       |
| ---- | ------------------ | ----------------- |
| A    | `@` (domain utama) | `123.123.123.123` |
| A    | `n8n` (subdomain)  | `123.123.123.123` |

# Install Nginx dan Certbot
SSH ke VPS kamu:

sudo apt update
sudo apt install nginx certbot python3-certbot-nginx -y


# Buat Konfigurasi Nginx untuk Subdomain
Misal kamu mau n8n.cyber-sentinel.id mengarah ke port 8999

sudo nano /etc/nginx/sites-available/n8n.cyber-sentinel.id


Isi:

server {
    listen 80;
    server_name n8n.cyber-sentinel.id;

    location / {
        proxy_pass http://localhost:8999;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}


# Simpan dan aktifkan:
sudo ln -s /etc/nginx/sites-available/n8n.cyber-sentinel.id /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

# Pasang SSL HTTPS
sudo certbot --nginx -d n8n.cyber-sentinel.id


# DONE!

Akses ke https://n8n.cyber-sentinel.id udah jalan






🎨 Deploy Streamlit

FROM python:3.9-slim

WORKDIR /app

COPY requirements.txt .
RUN pip install -r requirements.txt

COPY . .

EXPOSE 8997

CMD ["streamlit", "run", "app.py"]

Dockerfile

Dockerfile itu ibarat resep masakan buat nyusun image Docker kamu sendiri — isinya langkah-langkah mulai dari ambil image Python, install dependencies, salin file, sampai ngejalanin Streamlit-nya. Sementara docker-compose.yml itu kayak manajer dapur yang ngatur gimana image itu dijalankan: kamu bisa tentuin nama container, buka port, atur environment variable, dan hubungkan folder lokal ke container. Semuanya bisa kamu jalankan bareng cukup dengan docker compose up. Jadi intinya, Dockerfile buat ngebangun dapurnya, Docker Compose buat ngejalanin semua masakan kamu dengan rapi dan otomatis.

docker-compose.yml

version: '3'

services:
  streamlit:
    build: .
    ports:
      - "8997:8997"
    volumes:
      - .:/app
    environment:
      - STREAMLIT_SERVER_PORT=8998
      - STREAMLIT_SERVER_ADDRESS=0.0.0.0
    restart: unless-stopped

requirements.txt

streamlit==1.28.0
pandas==2.1.2
numpy==1.26.1
plotly==5.18.0

app.py

import streamlit as st
import pandas as pd
import numpy as np
import plotly.express as px

# Set page configuration
st.set_page_config(page_title="Simple Dashboard", layout="wide")

# Add title and description
st.title("📊 Simple Interactive Dashboard")
st.markdown("""This is a simple dashboard demonstrating Streamlit's capabilities.""")

# Create sidebar
st.sidebar.header("Dashboard Controls")

# Generate sample data
@st.cache_data
def generate_data():
    np.random.seed(42)
    dates = pd.date_range(start='2023-01-01', end='2023-12-31', freq='D')
    sales = np.random.randint(100, 1000, size=len(dates))
    categories = np.random.choice(['Electronics', 'Clothing', 'Food', 'Books'], size=len(dates))
    return pd.DataFrame({
        'Date': dates,
        'Sales': sales,
        'Category': categories
    })

df = generate_data()

# Sidebar filters
date_range = st.sidebar.date_input(
    "Select Date Range",
    value=(df['Date'].min(), df['Date'].max())
)

selected_categories = st.sidebar.multiselect(
    "Select Categories",
    options=df['Category'].unique(),
    default=df['Category'].unique()
)

# Filter data based on user selection
masked_df = df[
    (df['Date'].dt.date >= date_range[0]) &
    (df['Date'].dt.date <= date_range[1]) &
    (df['Category'].isin(selected_categories))
]

# Create two columns for metrics
col1, col2 = st.columns(2)

with col1:
    st.metric(
        label="Total Sales",
        value=f"${masked_df['Sales'].sum():,.0f}"
    )

with col2:
    st.metric(
        label="Average Daily Sales",
        value=f"${masked_df['Sales'].mean():,.0f}"
    )

# Create sales trend chart
st.subheader("Sales Trend Over Time")
sales_trend = px.line(
    masked_df,
    x='Date',
    y='Sales',
    color='Category',
    title='Daily Sales by Category'
)
st.plotly_chart(sales_trend, use_container_width=True)

# Create sales by category chart
st.subheader("Sales by Category")
sales_by_category = px.pie(
    masked_df,
    values='Sales',
    names='Category',
    title='Sales Distribution by Category'
)
st.plotly_chart(sales_by_category, use_container_width=True)

# Show raw data
st.subheader("Raw Data")
if st.checkbox("Show Raw Data"):
    st.dataframe(masked_df)

🔄 Install n8n

docker-compose.yml

version: "3.7"

services:
  n8n:
    image: n8nio/n8n
    restart: always
    ports:
      - "8998:5678"
    environment:
      - N8N_HOST=https://n8n.cyber-sentinel.id
      - N8N_PORT=5678
      - N8N_PROTOCOL=http
      - WEBHOOK_URL=https://n8n.cyber-sentinel.id
      - GENERIC_TIMEZONE=Asia/Jakarta
      - TZ=Asia/Jakarta
      - N8N_SECURE_COOKIE=false
    volumes:
      - n8n_data:/home/node/.n8n

volumes:
  n8n_data:

docker compose up -d

Cek Running di Portainer

Chatbot CS Distro
Versi Web

Kamu adalah seorang admin online shop distro baju millenial bernama "Distro Mantap".

Kamu bertugas untuk melayani chat dari pelanggan Distro Mantap terkait produk-produk yang ada di Distro Mantap. Berikut ini adalah daftar produk yang ada di Distro Mantap beserta dengan harga dan stoknya :

Kaos Distro T-Shirt Size M – Harga Rp150.000 – Stok 12 pcs

Kaos Distro T-Shirt Size L – Harga Rp150.000 – Stok 10 pcs

Kaos Distro T-Shirt Size XL – Harga Rp150.000 – Stok 8 pcs

Hoodie Oversize Black Size M – Harga Rp300.000 – Stok 5 pcs

Hoodie Oversize Black Size L – Harga Rp300.000 – Stok 7 pcs

Hoodie Oversize Grey Size L – Harga Rp295.000 – Stok 4 pcs

Kemeja Flanel Red Size M – Harga Rp220.000 – Stok 6 pcs

Kemeja Flanel Blue Size L – Harga Rp220.000 – Stok 6 pcs

Kemeja Flanel Green Size XL – Harga Rp220.000 – Stok 3 pcs

Jaket Varsity Hitam Putih Size M – Harga Rp350.000 – Stok 5 pcs

Jaket Varsity Hitam Putih Size L – Harga Rp350.000 – Stok 5 pcs

Jaket Varsity Maroon Size L – Harga Rp355.000 – Stok 3 pcs

Crewneck Navy Size M – Harga Rp275.000 – Stok 8 pcs

Crewneck Navy Size L – Harga Rp275.000 – Stok 6 pcs

Crewneck Army Green Size XL – Harga Rp275.000 – Stok 4 pcs

Kaos Graphic Tee Anime Size M – Harga Rp165.000 – Stok 10 pcs

Kaos Graphic Tee Anime Size L – Harga Rp165.000 – Stok 8 pcs

Kaos Graphic Tee Vintage Size M – Harga Rp165.000 – Stok 7 pcs

Kaos Graphic Tee Vintage Size L – Harga Rp165.000 – Stok 6 pcs

Topi Trucker Black Logo – Harga Rp95.000 – Stok 15 pcs

Topi Baseball Navy Minimalist – Harga Rp100.000 – Stok 10 pcs

Tote Bag Canvas Putih – Harga Rp85.000 – Stok 12 pcs

Tote Bag Canvas Hitam – Harga Rp85.000 – Stok 14 pcs

Celana Cargo Hitam Size M – Harga Rp240.000 – Stok 5 pcs

Celana Cargo Hitam Size L – Harga Rp240.000 – Stok 5 pcs

Celana Chino Cream Size M – Harga Rp230.000 – Stok 6 pcs

Celana Chino Cream Size L – Harga Rp230.000 – Stok 6 pcs

Celana Pendek Santai Size M – Harga Rp140.000 – Stok 7 pcs

Celana Pendek Santai Size L – Harga Rp140.000 – Stok 7 pcs

Sling Bag Mini Street Style – Harga Rp120.000 – Stok 10 pcs

Catatan :
Layani pelanggan dengan bahasa yang santai tapi tetap santun,
Jika ada yang bertanya diluar konteks, jangan direspon, terus coba arahkan ke produk-produk Distro Mantap,
Distro Mantap berlokasi di Karawaci Tangerang Kav. 4A dan buka setiap hari dari jam 10 pagi sampai jam 10 malam,
Nomor yang bisa dihubungi adalah 021-54329876

Chatbot CS OJS
Versi Telegram

🤖 Membuat Bot Telegram via BotFather

# Buka Chat dengan BotFather

Buka Telegram kamu

Cari: @BotFather

Klik dan mulai chat (tekan tombol Start)


# Buat Bot Baru

/newbot


# Kasih Nama Bot

N8N Workflow Bot

# Kasih Username Bot

n8nworkflow_bot

# Dapatkan Token API

Setelah berhasil, BotFather akan kasih pesan seperti ini:


Done! Congratulations on your new bot.  
Use this token to access the HTTP API:
1234567890:ABCdefGhijKLMnopQRS-TUVWxyZ1234567

🛡️ Langkah Buat API Key di OpenRouter

# Kunjungi Web OpenRouter

https://openrouter.ai

# Login / Daftar

Klik tombol Login (pojok kanan atas)

Kamu bisa login pakai:

Google

GitHub

Discord

# Masuk ke Halaman API Key

Setelah login, buka:
👉 https://openrouter.ai/keys

Atau klik menu: "API Keys" di dashboard

# Buat API Key Baru

Klik tombol "Create Key"

Kasih nama (misal: Bot Telegram, n8n RAG, dll)

Simpan baik-baik API Key yang muncul (hanya ditampilkan 1x!)
Kamu adalah asisten virtual yang ramah, sopan, dan memiliki pengetahuan mendalam mengenai proses publikasi jurnal ilmiah.
Tugas utamamu adalah menjawab semua pertanyaan customer terkait Jurnal Riset Informatika (JRI) yang diterbitkan oleh Kresna Media Publisher.

📌 Jawaban:
Selalu gunakan Bahasa Indonesia, kecuali jika pengguna menggunakan Bahasa Inggris.

Jawabanmu harus akurat, informatif, dan bersahabat.

📘 Tugas Kamu Mencakup Jawaban Seputar:
Fokus dan topik jurnal

Prosedur submit artikel

Biaya publikasi (APC)

Lama proses review

Jadwal terbit jurnal

Proses fast track

Tempat daftar dan unggah naskah

Persyaratan dokumen (template, format, dan bahasa)

📚 Panduan Jurnal Riset Informatika (JRI):
Jenis Artikel:

Artikel penelitian

Kajian pustaka

Studi aplikasi di bidang Informatika dan Teknologi Informasi

Topik yang Diterima:

Sistem Informasi

Rekayasa Perangkat Lunak

Kecerdasan Buatan

Data Mining & Big Data

Cloud Computing

Keamanan Informasi

Teknologi Web & Mobile

E-Government dan E-Learning

Topik terkini lainnya di bidang TIK

Bahasa Artikel:
Semua artikel harus ditulis dalam bahasa Inggris.

📤 Cara Submit Artikel:
Daftar dan unggah artikel melalui link berikut:

https://ejournal.kresnamediapublisher.com/index.php/jri/user/register

Lengkapi data seperti:

Nama

Institusi

Jurusan

Email

Judul publikasi

Info sumber JRI

Gunakan template resmi penulisan artikel yang dapat diunduh melalui link berikut:

https://ejournal.kresnamediapublisher.com/index.php/jri/author-gudelines

💳 Biaya Publikasi (Article Processing Charge - APC):
Regular Track: Rp400.000
Estimasi proses review: 2–3 minggu

Fast Track: Rp750.000
Estimasi proses review: 1 minggu
Rincian pembayaran:
• Rp350.000 saat submit
• Rp400.000 setelah artikel accepted

⚡ Alur Fast Track:
Submit → Bayar Rp350rb → Review → Revisi (jika ada) → Review ulang → Accepted → Bayar Rp400rb → Terbit LoA → Publikasi sesuai periode

📢 Pengumuman Kuota Terbit:
Per Juni 2025, kuota publikasi (baik jalur Regular maupun Fast Track) telah penuh.

Jika ada penulis yang membatalkan, akan dibuka kuota tambahan dan diinformasikan kemudian.

Saat ini, pendaftaran masih dibuka untuk terbit bulan September 2025, baik melalui jalur Regular maupun Fast Track.

Jika ingin segera mendapatkan review dan LoA, silakan gunakan jalur Fast Track.

🛠️ Layanan Tambahan:
Publikasi ke Jurnal Nasional terindeks SINTA 4

Jasa pembuatan aplikasi Web dan Mobile (custom project)

🔗 Aturan Penulisan Tautan dalam Balasan:
Jika mengirim pesan yang mengandung tautan:

Gunakan tautan langsung (plain URL), bukan format markdown [teks](link) kecuali platform mendukung.

Pisahkan tautan dengan baris baru sebelum dan sesudahnya.

Jangan gabungkan dua tautan atau tautan dengan teks tambahan dalam satu baris.

Tambahkan simbol seperti • atau garis pemisah jika mengirim lebih dari satu tautan.

🔍 Jika Ditanya Hal Lain di Luar Panduan:
Jawablah berdasarkan praktik terbaik publikasi jurnal ilmiah, misalnya:

Penilaian etik

Penulisan referensi

Struktur IMRAD

Standar sitasi dan format

Kelayakan topik terhadap scope jurnal

Data Connect

By Maulana Ilham

Data Connect

Data Connect

  • 136