Hallo allerseits!
Heute schlage ich vor, in Verbindung mit Python in eines der bequemsten Web-Frameworks namens
Dash einzutauchen . Es erschien vor nicht allzu langer Zeit, vor ein paar Jahren dank der Entwickler des Plot-Frameworks. Dash selbst besteht aus einer Reihe von Flask, React.Js, HTML und CSS.
Chris Parmers Auftritt auf der PLOTCON 2016
Lassen Sie uns das Framework sofort installieren. Geben Sie hier aktualisierte Versionen
an .
pip install dash==0.31.1
Freunde, wenn Sie dieses Framework wirklich verstehen möchten, lesen Sie die Veröffentlichungen bis zum Ende, da häufig Beispiele zuerst folgen, und nach einer detaillierten Überprüfung des Codes. Wenn Sie immer noch nicht verstehen, empfehle ich Ihnen, die Dash-Dokumentation in englischer Sprache im Original zu lesen. Auch in RuNet gibt es mehrere Artikel, die die Konzepte erklären, die ich in diesem Tutorial übersprungen habe.
Fangen wir an.
Dash-Anwendungen bestehen aus zwei Teilen. Der erste Teil, "Layout", beschreibt, wie unsere Anwendung aussieht. Der zweite Teil beschreibt die Interaktivität der Anwendung. Wir werden im nächsten Artikel darüber sprechen.
Dash bietet Python-Klassen für alle visuellen Komponenten der Anwendung. Entwickler stellen eine Reihe von Komponenten in den sogenannten
dash_core_components und
dash_html_components . Sie können
Ihre Komponente aber auch mit JavaScript und React.js erstellen.
Ist wichtigdash_core_components enthält verschiedene dynamische Formulare, z. B. Dropdown-Listen, Diagramme und Kontrollkästchen.
dash_html_components enthält HTML-Konstrukte, mit denen unsere Formulare umbrochen werden können. Zum Beispiel Div-Blöcke oder Header-Tags H1, H2 usw. Die Entwickler stellen uns mithilfe von Python-Wörterbüchern eine Art Abstraktion von HTML zur Verfügung.
Erstellen Sie zunächst die Datei
app.py , die Folgendes enthält:
Führen Sie es mit dem folgenden Befehl aus dem aktuellen Verzeichnis aus:
$ python app.py...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)Wir sehen, dass der Server gestartet wurde und bereit ist, Anforderungen für Port 8050 anzunehmen (möglicherweise haben Sie einen anderen Port).
Gehen Sie zur Adresse
http://127.0.0.1:8050/und sehen:
Hinweis
- Die
dash_html_components besteht aus einem Baum von „Komponenten“, die in dash_html_components enthalten dash_html_components . Zum Beispiel div Blöcke.
dash_html_components hat eine Komponente für jedes HTML-Tag. html.H1(children='Hello Dash') generiert ein HTML-Element <h1>Hello Dash</h1>
in Ihrer Bewerbung.
- Nicht alle Komponenten des Frameworks sind HTML-Komponenten.
dash_core_components generiert übergeordnete Elemente und interaktive Elemente mithilfe einer Reihe von JS-, HTML-, CSS- und React.Js.
- Jede Komponente wird vollständig durch die Attribute von Schlüsselwörtern beschrieben. Dash ist deklarativ: Zunächst beschreiben Sie Ihre Anwendung anhand dieser Attribute.
- Das Attribut
children ist etwas Besonderes. Konventionell geht es immer zuerst, was bedeutet, dass Sie html.H1(children='Hello Dash') durch html.H1('Hello Dash') ersetzen können.
Hinweis
Dash enthält eine bekannte Webentwicklerfunktion:
hot-reloading . Es wird aktiviert, sobald die Funktion
app.run_server(debug=True) gestartet wird. Diese Funktion aktualisiert Ihren Browser, wenn Sie Änderungen am Code vornehmen und das Ergebnis speichern. Daher muss der Server nicht jedes Mal neu gestartet werden.
Wie wir uns erinnern, enthält Dash für jedes HTML-Tag eine Komponente. Es können aber auch alle Schlüsselwortargumente sowie HTML-Elemente akzeptiert werden.
Lassen Sie uns unseren Code ein wenig ändern:
Wir aktualisieren die Seite und sehen:
In diesem Beispiel haben wir die Stile
html.Div und
html.H1 mithilfe der
style Eigenschaft geändert.
html.H1('Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'}) in der Dash-Anwendung wie
html.H1('Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'}) :
<h1 style="text-align: center; color: #7FDBFF">Hello Dash</h1>
Es gibt jedoch einige wichtige Punkte:
- Die HTML-Stileigenschaften sind eine durch Semikolons getrennte Zeichenfolge. In Dash können Sie einfach das Wörterbuch übergeben.
- Die Schlüssel in einem Stilwörterbuch unterscheiden sich geringfügig in der Schrift im Vergleich zu HTML. Anstelle von
textAlign schreiben wir textAlign .
- Die untergeordneten Klassen jedes Tag-Elements im Dash (Klasse) werden in einem Array über das
children Argument übergeben.
Wiederverwendbare Komponenten
Stellen Sie sich vor, wir benötigen einige Elemente, die sich beispielsweise abhängig von den Benutzereingaben unserer Anwendung ändern. Hierzu
reusable components in Dash die sogenannten
reusable components bereitgestellt. Betrachten Sie sie anhand einer Beispieltabelle, deren Daten aus dem Pandas-Datenrahmen geladen werden.
import dash import dash_core_components as dcc import dash_html_components as html import pandas as pd df = pd.read_csv( 'https://gist.githubusercontent.com/chriddyp/' 'c78bf172206ce24f77d6363a2d754b59/raw/' 'c353e8ef842413cae56ae3920b8fd78468aa4cb2/' 'usa-agricultural-exports-2011.csv') def generate_table(dataframe, max_rows=10): return html.Table(
Ein bisschen über Tische
Erinnern wir uns, was eine Tabelle in HTML ist.
Eine HTML-Tabelle wird durch das
Tabellen- Tag definiert.
Jede Zeile der Tabelle wird durch das
tr- Tag gekennzeichnet. Der Header der Tabelle wird durch das
th- Tag bestimmt. Eine Tabellenzelle wird mit dem Tag
td gefüllt.
Es stellt sich folgende Struktur heraus:
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table>
Und es sieht so aus:
| Vorname | Nachname | Alter |
|---|
| Jill | Smith | 50 |
| Eva | Jackson | 94 |
| John | Doe | 80 |
Kernelkomponenten (Kernkomponenten)
Wie bereits erwähnt, enthält
dash_core_components Elemente. Zum Beispiel: Dropdown-Menü, Grafiken und mehr.
Sie können sich hier mit der visuellen Seite dieser Elemente vertraut machen, die jeweils von einem Code begleitet werden (sehr praktischer, universeller Respekt gegenüber den Entwicklern von Plot.ly).
Damit der Entwickler, nämlich Sie, alle Elemente im Code unterscheiden kann, ist es üblich, für jede Kernelkomponente eine Bezeichnung zu schreiben. Dies ist so etwas wie der Name unseres Elements. Dies ist nicht erforderlich, erleichtert jedoch das Debuggen. Und der Benutzer erhält die Möglichkeit, Ihre Benutzeroberfläche schnell zu verstehen. Weiter wirst du verstehen, was ich meine.
Schauen wir uns den folgenden Code an:
import dash import dash_core_components as dcc import dash_html_components as html external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) app.layout = html.Div([ html.Label('Dropdown'), dcc.Dropdown( options=[ {'label': 'New York City', 'value': 'NYC'}, {'label': u'Montréal', 'value': 'MTL'}, {'label': 'San Francisco', 'value': 'SF'} ], value='MTL' ), html.Label('Multi-Select Dropdown'), dcc.Dropdown( options=[ {'label': 'New York City', 'value': 'NYC'}, {'label': u'Montréal', 'value': 'MTL'}, {'label': 'San Francisco', 'value': 'SF'} ], value=['MTL', 'SF'], multi=True ), html.Label('Radio Items'), dcc.RadioItems( options=[ {'label': 'New York City', 'value': 'NYC'}, {'label': u'Montréal', 'value': 'MTL'}, {'label': 'San Francisco', 'value': 'SF'} ], value='MTL' ), html.Label('Checkboxes'), dcc.Checklist( options=[ {'label': 'New York City', 'value': 'NYC'}, {'label': u'Montréal', 'value': 'MTL'}, {'label': 'San Francisco', 'value': 'SF'} ], values=['MTL', 'SF'] ), html.Label('Text Input'), dcc.Input(value='MTL', type='text'), html.Label('Slider'), dcc.Slider( min=0, max=9, marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)}, value=5, ), ], style={'columnCount': 2}) if __name__ == '__main__': app.run_server(debug=True)
Hier sehen wir, dass wir wie gewohnt einen gemeinsamen Div-Block erstellt haben, der unsere verschiedenen Kernkomponenten enthält. Es sieht ungefähr so aus:
Haben Sie noch Fragen?
Die Entwickler haben eine sehr detaillierte Dokumentation vorbereitet, die Sie mit einem typischen Python-Befehl für jede Klasse lesen können:
>>> help(dcc.Dropdown)
Zusammenfassung
Das zuvor untersuchte
layout beschreibt, wie unsere Anwendung aussieht. Im Wesentlichen enthält es eine baumartige Hierarchie von HTML-Tags und
dash_core_components Elementen des Dash-Kerns, die in
dash_core_components enthalten
dash_core_components .
Im nächsten Teil erfahren Sie, wie Sie unsere Seite interaktiv gestalten. Wenn Ihnen dieses Tutorial gefallen hat, setzen Sie ein Pluszeichen und abonnieren Sie mich.
* Es wird bald einen Link zum nächsten Teil geben *