Fredric LesomarMembuat aplikasi web biasanya membutuhkan dua hal, yaitu backend seperti Python dan frontend seperti HTML, CSS, atau bahkan JavaScript. Tapi, bagaimana jika semua itu bisa dikerjakan hanya dengan satu bahasa saja? Inilah keunggulan dari Framework Reflex, sebuah framework modern yang dirancang untuk membangun aplikasi web fullstack hanya dengan Python.
Jika Anda baru akan belajar membuat aplikasi sederhana hingga kompleks tanpa harus belajar JavaScript, Reflex bisa menjadi pilihan terbaik. Dalam artikel ini, kami akan membahas apa itu Framework Reflex, fungsinya, kelebihannya dibanding framework lain, hingga cara menginstalnya di localhost dengan aplikasi Laragon.
Apa itu Framework Reflex?
Reflex adalah sebuah framework open-source untuk membangun aplikasi web fullstack sepenuhnya dalam Python, tanpa perlu menulis JavaScript untuk frontend.
Menggunakan Lisensi Apache 2.0, alias gratis selamanya, framework Reflex memiliki fitur dan dukungan canggih untuk perusahaan dalam mengembangkan aplikasi Python fullstack melalui prompting.
Framework Reflex mengompilasi kode Python menjadi sebuah aplikasi web berbasis Fullstack (Next.js + React sebagai frontend dan FastAPI sebagai Backend). Framework ini menerapkan konsep pendekatan satu bahasa, dimana semua interaktivitas dan manajemen status tetap menggunakan Python sebagai bahasa program utama.
Fungsi
Fungsi utama dari framework Reflex adalah menyederhanakan proses pembuatan aplikasi web. Berikut beberapa hal yang bisa dilakukan dengan Reflex:
- Membuat aplikasi web interaktif tanpa JavaScript.
- Menyusun frontend dan backend dalam satu bahasa.
- Membangun UI secara deklaratif, seperti menulis fungsi Python.
- Menyediakan built-in server dan hot reload untuk pengembangan lokal.
- Mendukung deployment ke Cloud atau server lokal dengan mudah.
Dengan Reflex, pengembang tidak perlu memisahkan antara kode frontend dan backend, sehingga pengembangan aplikasi menjadi lebih cepat dan efisien.
Kelebihan Reflex dibandingkan dengan framework lain
Berikut beberapa kelebihan Reflex dibandingkan dengan framework lain seperti Flask, Django, atau framework JavaScript:
| Fitur | Reflex (Python) | Framework Lain (Flask, Django, React) |
|---|---|---|
| Bahasa | Python | Python (Flask/Django), JS (React/Next.js) |
| Frontend dan Backend | Ya | Tidak (perlu integrasi manual) |
| Butuh JavaScript | Tidak | Ya (untuk interaktivitas) |
| Cocok untuk Pemula | Ya | Butuh pembagian frontend & backend |
| Deployment Mudah | Ya | Ya, tapi perlu lebih banyak konfigurasi |
Reflex sangat cocok untuk developer Python yang ingin membuat aplikasi web tanpa harus berurusan dengan banyak teknologi tambahan.
System Requirement Framework Reflex
Sebelum menginstal Framework Reflex di localhost, pastikan sistem Anda sudah memenuhi persyaratan berikut:
- Python 3.10 atau lebih baru: Reflex membutuhkan Python versi 3.10+ karena fitur sintaks terbaru digunakan secara aktif.
- Node.js (opsional, untuk optimasi frontend):Reflex sudah menyertakan build frontend, namun Node.js bisa membantu saat pengembangan.
- Git: Dibutuhkan untuk meng-clone template proyek Reflex dari GitHub.
- Pip dan Virtual Environment: Untuk manajemen paket dan lingkungan pengembangan yang terisolasi.
Instalasi bisa dilakukan lewat command line, dan Reflex menyediakan perintah reflex init dan reflex run untuk memulai proyek secara cepat.
Cara Install Reflex di Laragon
Laragon menjadi salah satu aplikasi web server yang cukup lengkap dalam menyediakan environment website seperti PHP, NodeJS, Python. Sebelum melakukan instalasi, pastikan bahwa Anda telah menginstall Laragon di laptop atau komputer Anda.
Berikut cara install Reflex di Localhost dengan Laragon web server.
- Jalankan program Laragon > kemudian masuk ke menu Terminal.
- Jalankan baris perintah berikut dan tunggu hingga prosesnya selesai!
# pip install reflex
# reflex init --name nama_projekSetelah Framework Reflex berhasil running, silahkan memulai mengembangkan webnya.
Cara Menjalankan Reflex Framework
Apabila proses instal Reflex telah selesai, silahkan Anda menjalankannya melalui terminal dengan perintah:
cd nama_projek && reflex runReflex juga menyediakan platform Cloud yang memungkinkan Anda mendeploy langsung dan bisa diakses secara publik.
Jalankan perintah berikut untuk mempublishnya ke internet: reflex deploy
Apabila proses run reflex di localhost berhasil, Anda dapat mengaksesnya melalui port 3000 (frontend) dan 8000 (backend).
Anda juga bisa ekplorasi framework ini dengan bebas dan sudah cukup banyak artikel yang membahasnya.
Buat Form Login Sederhana
Sebagai salah satu contoh sederhana, kami membuat form login seperti gambar dibawah:
Berikut contoh kodenya:
import reflex as rx
import mysql.connector
import bcrypt
from datetime import datetime
DB_CONFIG = {
'host': 'localhost',
'user': 'root',
'password': '',
'database': 'nama_dbmu'
}
class State(rx.State):
username: str = ""
password: str = ""
confirm_password: str = ""
logged_in_user: str = ""
message: str = ""
@rx.var
def is_logged_in(self) -> bool:
return self.logged_in_user != ""
def handle_registration(self):
"""Menangani pendaftaran pengguna baru."""
if not self.username or not self.password:
self.message = "Username dan password tidak boleh kosong."
return
if self.password != self.confirm_password:
self.message = "Password tidak cocok!"
return
salt = bcrypt.gensalt()
hashed_password = bcrypt.hashpw(self.password.encode('utf-8'), salt)
try:
conn = mysql.connector.connect(**DB_CONFIG)
cursor = conn.cursor()
query = "INSERT INTO users (username, password_hash) VALUES (%s, %s)"
cursor.execute(query, (self.username, hashed_password))
conn.commit()
self.message = f"Pengguna '{self.username}' berhasil didaftarkan! Silakan login."
cursor.close()
conn.close()
except mysql.connector.Error as err:
if err.errno == 1062:
self.message = f"Username '{self.username}' sudah ada."
else:
self.message = f"Terjadi kesalahan: {err}"
# Reset form
self.username = ""
self.password = ""
self.confirm_password = ""
def handle_login(self):
"""Menangani proses login pengguna."""
if not self.username or not self.password:
self.message = "Username dan password tidak boleh kosong."
return
try:
conn = mysql.connector.connect(**DB_CONFIG)
cursor = conn.cursor()
query = "SELECT username, password_hash FROM users WHERE username = %s"
cursor.execute(query, (self.username,))
result = cursor.fetchone()
cursor.close()
conn.close()
if result:
db_username, db_password_hash = result
if bcrypt.checkpw(self.password.encode('utf-8'), db_password_hash.encode('utf-8')):
self.logged_in_user = db_username
self.message = ""
else:
self.message = "Username atau password salah."
else:
self.message = "Username atau password salah."
except mysql.connector.Error as err:
self.message = f"Terjadi kesalahan database: {err}"
self.username = ""
self.password = ""
def logout(self):
"""Logout pengguna."""
self.logged_in_user = ""
self.message = "Anda telah logout."
def form_field(label: str, placeholder: str, field_type: str, state_var):
"""Komponen bantuan untuk membuat input field."""
return rx.vstack(
rx.text(label, width="100%", text_align="left"),
rx.input(
placeholder=placeholder,
type=field_type,
on_change=state_var,
width="100%"
),
align_items="flex-start",
width="100%"
)
def auth_card(title: str, *children):
"""Komponen bantuan untuk membuat card form."""
return rx.card(
rx.vstack(
rx.heading(title, size="6"),
*children,
rx.cond(
State.message,
rx.text(State.message, color_scheme="red", padding_top="1em")
),
spacing="4",
width="100%"
),
max_width="25em",
)
@rx.page(route="/register")
def register_page():
"""Halaman Registrasi."""
return rx.center(
auth_card(
"Buat Akun",
form_field("Username", "Masukkan username...", "text", State.set_username),
form_field("Password", "Masukkan password...", "password", State.set_password),
form_field("Confirm Password", "Ulangi password...", "password", State.set_confirm_password),
rx.button("Daftar", on_click=State.handle_registration, width="100%"),
rx.text(
"Sudah punya akun? ",
rx.link("Login di sini", href="/"),
text_align="center"
),
),
height="100vh",
background="radial-gradient(circle at 22% 11%,rgba(62, 180, 137,.20),hsla(0,0%,100%,0) 19%)"
)
@rx.page(route="/", title="Login")
def login_page():
"""Halaman Login, juga sebagai halaman utama."""
return rx.center(
rx.cond(
State.is_logged_in,
rx.vstack(
rx.heading(f"Selamat Datang, {State.logged_in_user}!", size="7"),
rx.text("Anda berhasil login ke aplikasi Reflex."),
rx.button("Logout", on_click=State.logout)
),
auth_card(
"Login",
form_field("Username", "Masukkan username...", "text", State.set_username),
form_field("Password", "Masukkan password...", "password", State.set_password),
rx.button("Login", on_click=State.handle_login, width="100%"),
rx.text(
"Belum punya akun? ",
rx.link("Daftar di sini", href="/register"),
text_align="center"
),
)
),
height="100vh",
background="radial-gradient(circle at 22% 11%,rgba(62, 180, 137,.20),hsla(0,0%,100%,0) 19%)"
)
app = rx.App()Penutup
Reflex adalah solusi modern bagi Anda yang ingin membangun aplikasi web fullstack hanya dengan Python. Tidak perlu lagi belajar banyak bahasa atau memisahkan frontend dan backend, semua bisa dikerjakan dalam satu alur kerja.
Jika aplikasi Anda sudah siap, Anda bisa langsung mendeploy aplikasi tersebut ke internet. Cukup dengan membeli domain dan hosting di Rumahweb, Anda sudah bisa mempublikasikan aplikasi Python Anda agar dapat diakses secara online.
Itu dia panduan kami tentang apa itu Framework Reflex, fungsi, hingga cara install Reflex Python di localhost, semoga dapat membantu.
