|
| 1 | +```diff |
| 2 | ++ Suchst du nach Pynecone? Dann bist du hier in der richtigen Repository. Pynecone wurde in Reflex umbenannt. + |
| 3 | +``` |
| 4 | + |
| 5 | +<div align="center"> |
| 6 | +<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px"> |
| 7 | +<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px"> |
| 8 | + |
| 9 | +<hr> |
| 10 | + |
| 11 | +### **✨ Performante, anpassbare Web-Apps in purem Python. Bereitstellung in Sekunden. ✨** |
| 12 | +[](https://badge.fury.io/py/reflex) |
| 13 | + |
| 14 | + |
| 15 | +[](https://reflex.dev/docs/getting-started/introduction) |
| 16 | +[](https://discord.gg/T5WSbC2YtQ) |
| 17 | +</div> |
| 18 | + |
| 19 | +--- |
| 20 | + |
| 21 | +[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) |
| 22 | + |
| 23 | +--- |
| 24 | + |
| 25 | +# Reflex |
| 26 | + |
| 27 | +Reflex ist eine Bibliothek, mit der man Full-Stack-Web-Applikationen in purem Python erstellen kann. |
| 28 | + |
| 29 | +Wesentliche Merkmale: |
| 30 | +* **Pures Python** - Schreibe dein Front- und Backend in Python, es gibt also keinen Grund, JavaScript zu lernen. |
| 31 | +* **Volle Flexibilität** - Reflex ist einfach zu handhaben, kann aber auch für komplexe Anwendungen skaliert werden. |
| 32 | +* **Sofortige Bereitstellung** - Nach dem Erstellen kannst du deine App mit einem [einzigen Befehl](https://reflex.dev/docs/hosting/deploy-quick-start/) bereitstellen oder auf deinem eigenen Server hosten. |
| 33 | + |
| 34 | +Auf unserer [Architektur-Seite](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) erfahren Sie, wie Reflex unter der Haube funktioniert. |
| 35 | + |
| 36 | +## ⚙️ Installation |
| 37 | + |
| 38 | +Öffne ein Terminal und führe den folgenden Befehl aus (benötigt Python 3.8+): |
| 39 | + |
| 40 | +```bash |
| 41 | +pip install reflex |
| 42 | +``` |
| 43 | + |
| 44 | +## 🥳 Erstelle deine erste App |
| 45 | + |
| 46 | +Die Installation von `reflex` installiert auch das `reflex`-Kommandozeilen-Tool. |
| 47 | + |
| 48 | +Teste, ob die Installation erfolgreich war, indem du ein neues Projekt erstellst. (Ersetze `my_app_name` durch deinen Projektnamen): |
| 49 | + |
| 50 | +```bash |
| 51 | +mkdir my_app_name |
| 52 | +cd my_app_name |
| 53 | +reflex init |
| 54 | +``` |
| 55 | + |
| 56 | +Dieser Befehl initialisiert eine Vorlage in deinem neuen Verzeichnis. |
| 57 | + |
| 58 | +Du kannst diese App im Entwicklungsmodus ausführen: |
| 59 | + |
| 60 | +```bash |
| 61 | +reflex run |
| 62 | +``` |
| 63 | + |
| 64 | +Du solltest deine App unter http://localhost:3000 laufen sehen. |
| 65 | + |
| 66 | +Nun kannst du den Quellcode in `my_app_name/my_app_name.py` ändern. Reflex hat schnelle Aktualisierungen, sodass du deine Änderungen sofort siehst, wenn du deinen Code speicherst. |
| 67 | + |
| 68 | + |
| 69 | +## 🫧 Beispiel-App |
| 70 | + |
| 71 | +Lass uns ein Beispiel durchgehen: die Erstellung einer Benutzeroberfläche für die Bildgenerierung mit [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Zur Vereinfachung rufen wir einfach die [OpenAI-API](https://platform.openai.com/docs/api-reference/authentication) auf, aber du könntest dies auch durch ein lokal ausgeführtes ML-Modell ersetzen. |
| 72 | + |
| 73 | + |
| 74 | + |
| 75 | +<div align="center"> |
| 76 | +<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/dalle.gif" alt="Eine Benutzeroberfläche für DALL·E, die im Prozess der Bildgenerierung gezeigt wird." width="550" /> |
| 77 | +</div> |
| 78 | + |
| 79 | + |
| 80 | + |
| 81 | +Hier ist der komplette Code, um dies zu erstellen. Das alles wird in einer Python-Datei gemacht! |
| 82 | + |
| 83 | + |
| 84 | + |
| 85 | +```python |
| 86 | +import reflex as rx |
| 87 | +import openai |
| 88 | + |
| 89 | +openai_client = openai.OpenAI() |
| 90 | + |
| 91 | + |
| 92 | +class State(rx.State): |
| 93 | + """Der Zustand der App.""" |
| 94 | + |
| 95 | + prompt = "" |
| 96 | + image_url = "" |
| 97 | + processing = False |
| 98 | + complete = False |
| 99 | + |
| 100 | + def get_image(self): |
| 101 | + """Hole das Bild aus dem Prompt.""" |
| 102 | + if self.prompt == "": |
| 103 | + return rx.window_alert("Prompt Empty") |
| 104 | + |
| 105 | + self.processing, self.complete = True, False |
| 106 | + yield |
| 107 | + response = openai_client.images.generate( |
| 108 | + prompt=self.prompt, n=1, size="1024x1024" |
| 109 | + ) |
| 110 | + self.image_url = response.data[0].url |
| 111 | + self.processing, self.complete = False, True |
| 112 | + |
| 113 | + |
| 114 | +def index(): |
| 115 | + return rx.center( |
| 116 | + rx.vstack( |
| 117 | + rx.heading("DALL-E", font_size="1.5em"), |
| 118 | + rx.input( |
| 119 | + placeholder="Enter a prompt..", |
| 120 | + on_blur=State.set_prompt, |
| 121 | + width="25em", |
| 122 | + ), |
| 123 | + rx.button( |
| 124 | + "Generate Image", |
| 125 | + on_click=State.get_image, |
| 126 | + width="25em", |
| 127 | + loading=State.processing |
| 128 | + ), |
| 129 | + rx.cond( |
| 130 | + State.complete, |
| 131 | + rx.image(src=State.image_url, width="20em"), |
| 132 | + ), |
| 133 | + align="center", |
| 134 | + ), |
| 135 | + width="100%", |
| 136 | + height="100vh", |
| 137 | + ) |
| 138 | + |
| 139 | +# Füge Zustand und Seite zur App hinzu. |
| 140 | +app = rx.App() |
| 141 | +app.add_page(index, title="Reflex:DALL-E") |
| 142 | +``` |
| 143 | + |
| 144 | + |
| 145 | + |
| 146 | + |
| 147 | + |
| 148 | +## Schauen wir uns das mal genauer an. |
| 149 | + |
| 150 | +<div align="center"> |
| 151 | +<img src="docs/images/dalle_colored_code_example.png" alt="Erläuterung der Unterschiede zwischen Backend- und Frontend-Teilen der DALL-E-App." width="900" /> |
| 152 | +</div> |
| 153 | + |
| 154 | + |
| 155 | +### **Reflex-UI** |
| 156 | + |
| 157 | +Fangen wir mit der Benutzeroberfläche an. |
| 158 | + |
| 159 | +```python |
| 160 | +def index(): |
| 161 | + return rx.center( |
| 162 | + ... |
| 163 | + ) |
| 164 | +``` |
| 165 | + |
| 166 | +Diese `index`-Funktion definiert das Frontend der App. |
| 167 | + |
| 168 | +Wir verwenden verschiedene Komponenten wie `center`, `vstack`, `input` und `button`, um das Frontend zu erstellen. Komponenten können ineinander verschachtelt werden, um komplexe Layouts zu erstellen. Und du kannst Schlüsselwortargumente verwenden, um sie mit der vollen Kraft von CSS zu stylen. |
| 169 | + |
| 170 | +Reflex wird mit [über 60 eingebauten Komponenten](https://reflex.dev/docs/library) geliefert, die dir den Einstieg erleichtern. Wir fügen aktiv weitere Komponenten hinzu, und es ist einfach, [eigene Komponenten zu erstellen](https://reflex.dev/docs/wrapping-react/overview/). |
| 171 | + |
| 172 | +### **State** |
| 173 | + |
| 174 | +Reflex stellt deine Benutzeroberfläche als Funktion deines Zustands dar. |
| 175 | + |
| 176 | +```python |
| 177 | +class State(rx.State): |
| 178 | + """Der Zustand der App.""" |
| 179 | + prompt = "" |
| 180 | + image_url = "" |
| 181 | + processing = False |
| 182 | + complete = False |
| 183 | + |
| 184 | +``` |
| 185 | + |
| 186 | +Der Zustand definiert alle Variablen (genannt Vars) in einer App, die sich ändern können, und die Funktionen, die sie ändern. |
| 187 | + |
| 188 | +Hier besteht der Zustand aus einem `prompt` und einer `image_url`. Es gibt auch die Booleans `processing` und `complete`, um anzuzeigen, wann der Button deaktiviert werden soll (während der Bildgenerierung) und wann das resultierende Bild angezeigt werden soll. |
| 189 | + |
| 190 | +### **Event-Handler** |
| 191 | + |
| 192 | +```python |
| 193 | +def get_image(self): |
| 194 | + """Hole das Bild aus dem Prompt.""" |
| 195 | + if self.prompt == "": |
| 196 | + return rx.window_alert("Prompt Empty") |
| 197 | + |
| 198 | + self.processing, self.complete = True, False |
| 199 | + yield |
| 200 | + response = openai_client.images.generate( |
| 201 | + prompt=self.prompt, n=1, size="1024x1024" |
| 202 | + ) |
| 203 | + self.image_url = response.data[0].url |
| 204 | + self.processing, self.complete = False, True |
| 205 | +``` |
| 206 | + |
| 207 | +Innerhalb des Zustands definieren wir Funktionen, die als Event-Handler bezeichnet werden und die Zustand-Variablen ändern. Event-Handler sind die Art und Weise, wie wir den Zustand in Reflex ändern können. Sie können als Reaktion auf Benutzeraktionen aufgerufen werden, z.B. beim Klicken auf eine Schaltfläche oder bei der Eingabe in ein Textfeld. Diese Aktionen werden als Ereignisse bezeichnet. |
| 208 | + |
| 209 | +Unsere DALL-E.-App hat einen Event-Handler, `get_image`, der dieses Bild von der OpenAI-API abruft. Die Verwendung von `yield` in der Mitte eines Event-Handlers führt zu einer Aktualisierung der Benutzeroberfläche. Andernfalls wird die Benutzeroberfläche am Ende des Ereignishandlers aktualisiert. |
| 210 | + |
| 211 | +### **Routing** |
| 212 | + |
| 213 | +Schließlich definieren wir unsere App. |
| 214 | + |
| 215 | +```python |
| 216 | +app = rx.App() |
| 217 | +``` |
| 218 | + |
| 219 | +Wir fügen der Indexkomponente eine Seite aus dem Stammverzeichnis der Anwendung hinzu. Wir fügen auch einen Titel hinzu, der in der Seitenvorschau/Browser-Registerkarte angezeigt wird. |
| 220 | + |
| 221 | +```python |
| 222 | +app.add_page(index, title="DALL-E") |
| 223 | +``` |
| 224 | + |
| 225 | +Du kannst eine mehrseitige App erstellen, indem du weitere Seiten hinzufügst. |
| 226 | + |
| 227 | +## 📑 Ressourcen |
| 228 | + |
| 229 | +<div align="center"> |
| 230 | + |
| 231 | +📑 [Docs](https://reflex.dev/docs/getting-started/introduction) | 🗞️ [Blog](https://reflex.dev/blog) | 📱 [Komponentenbibliothek](https://reflex.dev/docs/library) | 🖼️ [Galerie](https://reflex.dev/docs/gallery) | 🛸 [Bereitstellung](https://reflex.dev/docs/hosting/deploy-quick-start) |
| 232 | + |
| 233 | +</div> |
| 234 | + |
| 235 | + |
| 236 | +## ✅ Status |
| 237 | + |
| 238 | +Reflex wurde im Dezember 2022 unter dem Namen Pynecone gestartet. |
| 239 | + |
| 240 | +Ab Februar 2024 befindet sich unser Hosting-Service in der Alpha-Phase! In dieser Zeit kann jeder seine Apps kostenlos bereitstellen. Siehe unsere [Roadmap](https://github.com/reflex-dev/reflex/issues/2727), um zu sehen, was geplant ist. |
| 241 | + |
| 242 | +Reflex hat wöchentliche Veröffentlichungen und neue Features! Stelle sicher, dass du dieses Repository mit einem :star: Stern markierst und :eyes: beobachtest, um auf dem Laufenden zu bleiben. |
| 243 | + |
| 244 | +## Beitragende |
| 245 | + |
| 246 | +Wir begrüßen Beiträge jeder Größe! Hier sind einige gute Möglichkeiten, um in der Reflex-Community zu starten. |
| 247 | + |
| 248 | +- **Tritt unserem Discord bei**: Unser [Discord](https://discord.gg/T5WSbC2YtQ) ist der beste Ort, um Hilfe für dein Reflex-Projekt zu bekommen und zu besprechen, wie du beitragen kannst. |
| 249 | +- **GitHub-Diskussionen**: Eine großartige Möglichkeit, über Funktionen zu sprechen, die du hinzugefügt haben möchtest oder Dinge, die verwirrend sind/geklärt werden müssen. |
| 250 | +- **GitHub-Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) sind eine ausgezeichnete Möglichkeit, Bugs zu melden. Außerdem kannst du versuchen, ein bestehendes Problem zu lösen und eine PR einzureichen. |
| 251 | + |
| 252 | +Wir suchen aktiv nach Mitwirkenden, unabhängig von deinem Erfahrungslevel oder deiner Erfahrung. Um beizutragen, sieh dir [CONTRIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md) an. |
| 253 | + |
| 254 | + |
| 255 | +## Vielen Dank an unsere Mitwirkenden: |
| 256 | +<a href="https://github.com/reflex-dev/reflex/graphs/contributors"> |
| 257 | + <img src="https://contrib.rocks/image?repo=reflex-dev/reflex" /> |
| 258 | +</a> |
| 259 | + |
| 260 | +## Lizenz |
| 261 | + |
| 262 | +Reflex ist Open-Source und lizenziert unter der [Apache License 2.0](LICENSE). |
0 commit comments