Bild vom AutorWenn wir über Python sprechen, denken wir oft darüber nach, es zur Durchführung von Datenanalysen oder zum Aufbau eines Modells für maschinelles Lernen zu verwenden. Es ist weniger üblich, die Erstellung vollständiger Webanwendungen mit Python außerhalb einfacher Prototypen unter Verwendung von Bibliotheken wie zu diskutieren Streamlit oder Taipy.
Allerdings rief eine Bibliothek an Reflex bietet Webanwendungsentwicklungsfunktionen, die mit denen anderer Programmiersprachen konkurrieren. Diese vollständig in Python erstellte Open-Supply-Bibliothek hilft Benutzern beim Erstellen von kleinen Information-Science-Apps bis hin zu großen, mehrseitigen Web sites. Mit großer Flexibilität und dennoch intuitivem Python-Code können wir die Webentwicklung mit Reflex ganz einfach an unsere Bedürfnisse anpassen.
In diesem Artikel lernen wir die Grundlagen zum Erstellen einer reinen Python-Webanwendung mit Reflex kennen.
Erstellen von Internet-Apps mit Reflex
In diesem Tutorial besprechen wir die Requirements zum Erstellen einer Webanwendung mit Reflex. Als Greatest Observe empfiehlt es sich, eine virtuelle Umgebung zu nutzen, um Störungen der Gesamtumgebung zu vermeiden.
Vor diesem Hintergrund beginnen wir mit der Entwicklung unserer Reflex-Webanwendung, indem wir die Reflex-Bibliothek mit dem folgenden Code installieren:
Anschließend testen wir Reflex, indem wir ein neues Projekt erstellen und eine neue Anwendung starten. Verwenden Sie den folgenden Code, ändern Sie jedoch den test_app Geben Sie Ihren Ordnernamen selbst ein.
mkdir test_app
cd test_app
reflex initDer obige Code stellt Ihnen Fragen dazu, ob Sie das Projekt mit einer vorgefertigten Vorlage erstellen möchten oder nicht.
Wählen Sie für dieses Tutorial die leere Reflex-App aus und Sie sehen die erstellte neue Projektstruktur, wie die folgende.
Führen Sie den folgenden Befehl aus, um zu prüfen, ob Ihre Reflex-Anwendung ordnungsgemäß ausgeführt wird:
Besuchen Sie die lokale URL, die die Anwendung bereitstellt. Wenn es intestine funktioniert, sehen Sie etwa das Bild unten:
Dies ist das grundlegende Webanwendungsgerüst, das von Reflex generiert wird. Wir werden später etwas Anspruchsvolleres bauen, aber wir beginnen mit den Grundlagen.
Beginnen wir damit, die Komponenten zu verstehen, die zum Erstellen der Webanwendung in der Reflex-Bibliothek verwendet werden. Zuerst öffnen
test_app.py und ersetzen Sie den Inhalt durch den folgenden Code:
import reflex as rx
class State(rx.State):
rely: int = 0
def increment(self):
self.rely += 1
def decrement(self):
self.rely -= 1
def index():
return rx.hstack(
rx.button(
"Decrement",
color_scheme="ruby",
on_click=State.decrement,
),
rx.heading(State.rely, font_size="2em"),
rx.button(
"Increment",
color_scheme="grass",
on_click=State.increment,
),
spacing="4",
)
app = rx.App()
app.add_page(index)Dadurch wird eine Web site wie die folgende angezeigt.
Lassen Sie uns aufschlüsseln, was im obigen Code passiert.
Zuerst definieren wir den Zustand, der Variablen enthält (genannt vars) und Funktionen (genannt occasion handlers), die den Standing der Anwendung ändern können.
Beispielsweise definieren wir eine einzelne Variable namens rely das eine Ganzzahl mit einem Anfangswert von 0 enthält.
class State(rx.State):
rely: int = 0Dann haben wir Occasion-Handler – Funktionen innerhalb des Standing, die Variablen als Reaktion auf Benutzeraktionen ändern. Im obigen Code definieren wir die Occasion-Handler wie folgt:
def increment(self):
self.rely += 1
def decrement(self):
self.rely -= 1Als Nächstes definieren wir die Benutzeroberfläche der Webanwendung wie folgt:
def index():
return rx.hstack(
rx.button(
"Decrement",
color_scheme="ruby",
on_click=State.decrement,
),
rx.heading(State.rely, font_size="2em"),
rx.button(
"Increment",
color_scheme="grass",
on_click=State.increment,
),
spacing="4",
)Die oben genannten Funktionen definieren die Webanwendungsschnittstelle und verwenden die folgenden Komponenten zum Erstellen der Benutzeroberfläche:
rx.hstack: Wird zum horizontalen Stapeln von Elementen verwendetrx.button: Wird verwendet, um eine Schaltfläche anzuzeigen, die beim Klicken ein Ereignis auslöstrx.heading: Wird verwendet, um Textual content in verschiedenen Größen anzuzeigen
Wie Sie im obigen Code sehen können, verweist die Überschriftenkomponente auf die rely Variable im Standing, und jede Schaltfläche löst beim Klicken eine Funktion im Standing aus.
Es gibt viele weitere Komponenten, die Sie zum Erstellen der Webanwendung verwenden können. siehe den Reflex Komponentendokumentation.
Zuletzt definieren wir die Anwendung und fügen die Komponenten mit dem folgenden Code zur Basisroute hinzu:
app = rx.App()
app.add_page(index)Das ist eine einfache Erklärung der wichtigen Komponenten, die Reflex zum Erstellen einer Webanwendung verwendet.
Nachdem die obige Erklärung abgeschlossen ist, erstellen wir mit Reflex eine etwas fortgeschrittenere Webanwendung. Im folgenden Beispiel entwickeln wir eine To-Do-Hear-Anwendung, aus der wir Elemente ausfüllen und entfernen können.
import uuid
import reflex as rx
from typing import Any, Dict, Listing
class TodoState(rx.State):
todos: Listing(Dict(str, Any)) = ()
new_text: str = ""
current_filter: str = "all" # Choose between "all", "lively", "finished"
# Derived values (computed from state)
@rx.var
def items_left(self) -> int:
return sum(1 for t in self.todos if not t("finished"))
@rx.var
def items_left_label(self) -> str:
return "1 merchandise left" if self.items_left == 1 else f"{self.items_left} objects left"
@rx.var
def filtered_todos(self) -> Listing(Dict(str, Any)):
if self.current_filter == "lively":
return (t for t in self.todos if not t("finished"))
if self.current_filter == "finished":
return (t for t in self.todos if t("finished"))
return self.todos
# Occasions (mutate state)
@rx.occasion
def set_new_text(self, worth: str):
self.new_text = (worth or "").strip()
@rx.occasion
def add_todo(self):
textual content = (self.new_text or "").strip()
if not textual content:
return
self.todos.append({"id": str(uuid.uuid4()), "textual content": textual content, "finished": False})
self.new_text = ""
@rx.occasion
def toggle(self, todo_id: str):
for t in self.todos:
if t("id") == todo_id:
t("finished") = not t("finished")
break
@rx.occasion
def take away(self, todo_id: str):
self.todos = (t for t in self.todos if t("id") != todo_id)
@rx.occasion
def clear_completed(self):
self.todos = (t for t in self.todos if not t("finished"))
@rx.occasion
def set_filter(self, identify: str):
if identify in {"all", "lively", "finished"}:
self.current_filter = identify
def filter_button(identify: str, label: str) -> rx.Element:
return rx.button(
label,
measurement="2",
variant=rx.cond(TodoState.current_filter == identify, "strong", "delicate"),
background_color=rx.cond(
TodoState.current_filter == identify, "blue.600", "grey.700"
),
shade="white",
_hover={"background_color": "blue.500"},
on_click=lambda: TodoState.set_filter(identify),
)
def render_todo_item(todo: rx.Var(dict)) -> rx.Element:
return rx.hstack(
rx.checkbox(
is_checked=todo("finished"),
on_change=lambda _: TodoState.toggle(todo("id")),
measurement="2",
color_scheme="blue",
),
rx.textual content(
todo("textual content"),
flex="1",
shade=rx.cond(todo("finished"), "grey.500", "white"),
text_decoration=rx.cond(todo("finished"), "line-through", "none"),
),
rx.icon_button(
"trash",
color_scheme="crimson",
variant="delicate",
on_click=lambda: TodoState.take away(todo("id")),
),
align="heart",
spacing="3",
width="100%",
)
def todo_input_bar() -> rx.Element:
return rx.hstack(
rx.enter(
placeholder="What must be finished?",
worth=TodoState.new_text,
on_change=TodoState.set_new_text,
flex="1",
measurement="3",
background_color="grey.800",
shade="white",
border_color="grey.600",
_placeholder={"shade": "grey.400"},
),
rx.button(
"Add",
measurement="3",
background_color="blue.600",
shade="white",
_hover={"background_color": "blue.500"},
on_click=TodoState.add_todo,
),
spacing="3",
width="100%",
)
def todo_list_panel() -> rx.Element:
return rx.vstack(
rx.foreach(TodoState.filtered_todos, render_todo_item),
spacing="2",
width="100%",
)
def footer_bar() -> rx.Element:
return rx.hstack(
rx.textual content(TodoState.items_left_label, measurement="2", shade="grey.300"),
rx.hstack(
filter_button("all", "All"),
filter_button("lively", "Lively"),
filter_button("finished", "Achieved"),
spacing="2",
),
rx.button(
"Clear Accomplished",
variant="delicate",
background_color="grey.700",
shade="white",
_hover={"background_color": "grey.600"},
on_click=TodoState.clear_completed,
),
justify="between",
align="heart",
width="100%",
)
def index() -> rx.Element:
return rx.heart(
rx.card(
rx.vstack(
rx.heading("Reflex To-Do", measurement="6", shade="white"),
todo_input_bar(),
rx.separator(border_color="grey.700"),
todo_list_panel(),
rx.separator(margin_y="2", border_color="grey.700"),
footer_bar(),
width="min(720px, 92vw)",
spacing="4",
),
measurement="4",
width="min(760px, 96vw)",
shadow="lg",
background_color="grey.900",
),
min_h="100vh",
padding_y="8",
background_color="black",
)
app = rx.App()
app.add_page(index, route="https://www.kdnuggets.com/", title="Reflex To-Do")Das Ergebnis der Anwendung sieht wie im Bild unten aus.
Im obigen Code funktioniert der Ablauf im Wesentlichen wie folgt:
- Die App speichert einen kleinen Speicher: Ihre Aufgaben, was Sie eingeben und welcher Filter ausgewählt ist.
- Sie geben etwas in das Feld ein und der Textual content wird während der Eingabe gespeichert.
- Sie drücken „Hinzufügen“ und die Aufgabe wird gespeichert (mit einer ID) und das Feld wird gelöscht.
- Die Liste wird sofort aktualisiert und zeigt an, was sich im Speicher befindet.
- Jede Aufgabenzeile verfügt über ein Kontrollkästchen und ein Papierkorbsymbol. Die Überprüfung schaltet den Abschluss um; Der Papierkorb entfernt die Aufgabe.
- Die drei Filterschaltflächen (Alle / Aktiv / Erledigt) ändern, welche Aufgaben sichtbar sind.
- In der Fußzeile wird angezeigt, wie viele Aufgaben noch nicht erledigt sind, und Sie können „Abgeschlossen“ löschen.
Einige wichtige Unterscheidungen – über die zuvor behandelten Grundkomponenten hinaus – umfassen:
- Mit dekorieren
@rx.occasionEreignisse innerhalb des Staates anzukündigen. - Mit dekorieren
@rx.varum abgeleitete Variablen im Zustand zu erstellen. - Verwenden
rx.ElementSignaturen beim Erstellen wiederverwendbarer UI-Helfer für Ihre Reflex-Anwendung.
Das ist die grundlegende Erklärung und das Beispiel dafür, wie Reflex funktioniert. Probieren Sie es selbst aus und erstellen Sie die Webanwendung, die Sie benötigen, mit reinem Python.
Abschluss
Reflex ist eine Open-Supply-Bibliothek, die es uns ermöglicht, Webanwendungen in reinem Python mit einem einfachen, aber intuitiven Codemuster zu erstellen. Dank der unkomplizierten Einrichtung und des leicht verständlichen Codes können Benutzer die Logik und die Benutzeroberfläche an einem Ort aufbewahren. Es handelt sich um eine nützliche Bibliothek sowohl für Neueinsteiger als auch für professionelle Entwickler, die eine Anwendung mit Python erstellen möchten.
Ich hoffe, das hat geholfen!
Cornellius Yudha Wijaya ist stellvertretender Supervisor und Datenautor im Bereich Information Science. Während er Vollzeit bei Allianz Indonesia arbeitet, teilt er gerne Python- und Datentipps über soziale Medien und Schreibmedien. Cornellius schreibt über eine Vielzahl von Themen zu KI und maschinellem Lernen.