So erstellen Sie eine Benutzeroberfläche für Ihre Python-App

Python ist eine der gängigen Programmiersprachen zur Automatisierung von SEO-Prozessen.

Eine der besten Bibliotheken zum Erstellen eines Frontends für unsere Apps ohne HTML-, CSS-Kenntnisse oder Codierung mit einem JavaScript-basierten Framework ist das Streamlit-Paket.

In diesem Streamlit-Tutorial werden wir uns damit befassen, wie Sie mit Python und dem Dockerfile für die Bereitstellung Ihrer Streamlit-App eine schöne App erstellen können.

Was ist Streamlit?

Streamlit ist ein Open-Source-App-Framework (ein Python-Paket), das uns die Möglichkeit gibt, gut aussehende Apps ohne Front-End-Entwicklungskenntnisse zu erstellen.

Dies macht uns frei von der Beteiligung an Front-End-Frameworks oder Codierungen in HTML, CSS und JavaScript.

Sie verwenden reines Python, um Ihr Frontend zu entwickeln.

Wann wird die Streamlit-Bibliothek nützlich?

Zunächst einmal, wenn Sie Python-Skripte codieren, die regelmäßig auf einem Computer mit einem Job-Scheduler wie Cron ausgeführt werden, ist Streamlit für Sie nicht nützlich.

Wenn Sie jedoch ein Tool entwickeln, das Sie mit Ihren Teammitgliedern teilen möchten, beispielsweise eine Keyword-Recherche-App, können Sie Streamlit verwenden.

Wenn Sie außerdem eine Benutzerauthentifizierungsmethode benötigen, hat die Streamlit-Community ein Paket entwickelt, das dies für Sie handhaben kann.

Erstellen Sie eine Streamlit-App: Erste Schritte

Lassen Sie uns eine einfache App erstellen, die automatisch vervollständigte Abfragen für ein Seed-Keyword von der öffentlichen Google-API erhält.

Bevor Sie beginnen, erstellen Sie einen Ordner auf Ihrem Computer und benennen Sie ihn wie gewünscht.

Außerdem gehe ich davon aus, dass Sie Python bereits installiert haben und die Grundlagen der Python-Programmierung kennen.

Für den gesamten Prozess müssen wir diese Python-Bibliotheken verwenden:

• Anfragen.
• Strombeleuchtet.
• Streamlit-Authenticator.
• PyYAML.

Außerdem importieren wir eine Python-Standardbibliothek:

Den Tutorial-Code finden Sie in meinem Streamlit-Startvorlagen-Repository auf Github.

Installieren des Streamlit-Pakets

Zunächst ziehe ich es vor, eine virtuelle Umgebung zu erstellen, indem ich python3 -m venv .env ausführe und dann das Streamlit-Paket installiere, indem ich pip3 install streamlit ausführe.

Erstellen Sie nun ein Python-Skript. Nennen wir es streamlit_app.py.

In komplexen Projekten mit zu vielen Funktionen bevorzuge ich separate Python-Skriptdateien für meine verschiedenen Funktionen und importiere diese dann in die streamlit_app.py oder erstelle eine separate App mit Flask oder FastAPI.

Zum Beispiel habe ich in einer Keyword-Recherche-App ein Python-Skript für verschiedene Funktionen, die Daten von Semrush abrufen, ein Skript zum Abrufen der Top-10- oder 20-Ergebnisse von Google, ein Skript zum Abrufen der Google-Autovervollständigung und von Google-bezogenen Suchanfragen usw .

Holen Sie sich die Google Autocomplete-Abfragen

Um Anfragen zu stellen, müssen wir das Requests-Paket verwenden. Um dieses Paket zu erhalten, müssen Sie Pip3-Installationsanforderungen ausführen.

Um die API-Antwort für die automatische Vervollständigung zu analysieren, müssen wir außerdem die Python-Standard-JSON-Bibliothek importieren.

Zunächst importieren wir die JSON-Standardbibliothek, das Requests-Paket zum Stellen von Anfragen und Streamlit zum Erstellen unserer App.

Dann habe ich eine Funktion zum Abrufen der Google-Abfragen zur automatischen Vervollständigung als Liste von Zeichenfolgen definiert.

Ich habe die Ersetzungsfunktion zweimal verwendet, um alles einfach zu halten, aber Sie können die Re-Bibliothek für die Verwendung von Regex verwenden.

"""A Streamlit app for getting the Google autocomplete queries
"""
import json

import requests
import streamlit as st

def google_autocomplete(keyword: str) -> list[str]:
    """Get Google autocomplete queries for a seed keyword

    Args:
        keyword (str): The seed keyword

    Returns:
        list[str]: A list of the autocomplete queries
    """
    google_autocomplete_api: str = "https://www.google.com/complete/search"
    google_autocomplete_params: dict = 
        "q": keyword,
        "cp": 8,
        "client": "gws-wiz",
        "xssi": "t",
        "hl": "en-US"
    

    response = requests.get(google_autocomplete_api, params=google_autocomplete_params)

    list_google_autocomplete_uncleaned: list[list] = json.loads((response.content).decode("UTF-8")[5:])[0]
    list_google_autocomplete_cleaned: list[str] = [
        element[0].replace('<b>', '').replace('</b>', '')
        for element in list_google_autocomplete_uncleaned
        ]

    return list_google_autocomplete_cleaned

Die Streamlit-App

Bis jetzt haben wir das Streamlit-Paket installiert und unsere Funktion definiert, um die Google-Autocomplete-Abfragen zu erhalten. Lassen Sie uns nun die eigentliche App erstellen.

Um die Streamlit-App anzuzeigen, müssen wir Streamlit mit dem Befehl run streamlit_app.py im Terminal ausführen, um unsere App lokal auszuführen. Nachdem Sie diesen Befehl ausgeführt haben, können Sie die App anzeigen, indem Sie zur URL http://localhost:8501/ wechseln.

Ja, es ist leer, weil wir ihm keine Überschrift usw. hinzugefügt haben.

Fügen Sie der Streamlit-App eine Überschrift hinzu

Fügen wir unserer App eine Überschrift hinzu. Wie Sie oben sehen, habe ich das Streamlit als st importiert.

Durch Aufrufen der Funktion st.title() können wir nun der Seite eine Überschrift mit einem Titelstil hinzufügen. Sagen wir st.title („Dies ist eine SEO-App der nächsten Stufe“).

Denken Sie daran, dass nach dem Bearbeiten und Speichern Ihrer streamlit_app.py-Datei ein Symbol in der oberen rechten Ecke der Seite angezeigt wird und Sie drücken müssen Immer zurück um die App-Änderungen ohne Seitenaktualisierung anzuzeigen.

Jetzt sieht unsere App wie im Bild unten aus. Wenn Ihr Systemdesign dunkel ist, hat Ihre App ein dunkles Design.

Fügen Sie der Streamlit-App Text hinzu

Um der App einen Textabsatz hinzuzufügen, müssen Sie die Funktion st.write() verwenden. Zum Beispiel st.write („Machen Sie Ihre Ideen wahr“).

Fügen Sie der Streamlit-App eine Texteingabe hinzu

Wie Sie in der Google-Autocomplete-Funktion gesehen haben, gab es ein Argument namens „Keyword“.

Dieses Argument muss aus der Benutzereingabe stammen.

Um die Benutzereingabe zu erhalten, können wir ein Texteingabefeld in Streamlit verwenden. Mit st.text_input() können wir eine Texteingabe hinzufügen. Zum Beispiel st.text_input („Was ist Ihr Seed-Keyword?“).

Um das Schlüsselwort input später zur Übergabe an unsere Funktion zu verwenden, müssen wir es einer Variablen zuweisen.

input_google_autocomplete_keyword: str = st.text_input(
    "What is your seed keyword?")

Jetzt wollen wir unsere App ausführen, wenn ein Eingabeschlüsselwort vorhanden ist. Hier verwenden wir eine if-Anweisung, um zu prüfen, ob die Variable leer ist oder nicht.

if input_google_autocomplete_keyword:
    output_list_google_autocomplete: list[str] = google_autocomplete(
        input_google_autocomplete_keyword)

Von der Streamlit-App herunterladen

Wir haben also eine Überschrift, eine Textzeile und ein Eingabetextfeld hinzugefügt, um das Seed-Keyword des Benutzers zu erhalten.

Jetzt müssen wir unsere geschriebene Funktion ausführen und einen Download-Button erstellen, damit der Benutzer die Ergebnisse in einer Textdatei erhält.

if output_list_google_autocomplete:
        st.download_button("Download the output",
                           ("\n").join(output_list_google_autocomplete))

Wir haben unsere einfache App gebaut! Lassen Sie uns den App-Titel und das Favicon ändern.

Sehen wir uns vorher den Streamlit-App-Abschnittscode bis jetzt an.

Ändern Sie den App-Titel und das Favicon

Der Standardtitel der App ist streamlit_app · Streamlit, und das Favicon der App ist das Streamlit-Symbol.

Um den Titel und das Favicon zu ändern, müssen wir die st.set_page_config() verwenden.

Außerdem bevorzuge ich ein breites App-Layout (Sie können es testen).

st.set_page_config(
    page_title="Oh My App!",
    page_icon="?",
    layout="wide"
)

Legen Sie das Standarddesign der App fest

Das App-Design basiert auf den Systemeinstellungen des Benutzers, aber ich persönlich finde meistens heraus, dass das helle Design einen besseren Kontrast hat – und ich möchte nicht, dass mein Team seine Zeit darauf verwendet, herauszufinden, wie das App-Design geändert werden kann.

Um ein Standarddesign für die Streamlit-App festzulegen, müssen Sie zunächst einen Ordner erstellen und ihn .streamlit nennen. Erstellen Sie in diesem Ordner eine Datei und nennen Sie sie config.toml.

Innerhalb der config.toml müssen Sie die folgenden Zeilen einfügen, um das Standarddesign Ihrer App festzulegen.

[theme]
base = "light"

Authentifizieren von Benutzern in Streamlit

Stellen Sie sich vor, dass nach der Bereitstellung Ihrer App jemand die App-URL herausfindet und darauf zugreift.

Um Ihre App zu schützen, müssen Sie die Benutzer autorisieren, bevor sie die App verwenden können – wie die meisten SASSs, die wir täglich verwenden.

Für eine Streamlit-App können wir das Streamlit-Authenticator-Paket verwenden. Um es zu installieren, geben Sie im Terminal in Ihrem App-Ordner den Befehl pip3 install streamlit-authenticator ein und importieren Sie das Paket in Ihre App.

Ich empfehle Ihnen, die Dokumentation des Streamlit Authenticator-Pakets zu lesen, um besser zu verstehen, was vor sich geht.

import streamlit_authenticator als stauth

Erstellen Sie nun eine config.yaml-Datei zum Einfügen der Anmeldeinformationen unserer Benutzer.

credentials:
  usernames:
    firstUser:
      email: [email protected]
      name: The first username
      password: 12345 # Must be replaced with the hashed password
    secondUser:
      email: [email protected]
      name: The second username
      password: 111213 # Must be replaced with the hashed password
cookie:
  expiry_days: 30
  key: some_signature_key
  name: some_cookie_name
preauthorized:
  emails:
    - [email protected]

Wie Sie im Paketdokument sehen können, müssen wir jetzt die Passwörter mit den Hasher-Modulen hashen. Ich öffne lieber ein IPython und führe die folgende Codezeile aus.

hasched_passwords = stauth.Hasher([‘12345’, ‘111213’]).generieren()

Erstellen eines Anmelde-Widgets

Jetzt müssen wir ein Login-Widget erstellen, in dem Benutzer ihren Benutzernamen und ihr Passwort eingeben und sich dann bei der App anmelden können.

Zuerst müssen Sie das PyYAML-Paket mit dem Befehl pip3 install pyyaml ​​installieren und es mit import yaml importieren.

Erstellen Sie dann ein Authenticator-Objekt und rendern Sie das Anmeldemodul.

with open("./config.yaml") as file:
    config = yaml.load(file, Loader=yaml.SafeLoader)

authenticator = stauth.Authenticate(
    config["credentials"],
    config["cookie"]["name"],
    config["cookie"]["key"],
    config["cookie"]["expiry_days"],
    config["preauthorized"]
)

name, authentication_status, username = authenticator.login("Login", "main")

Zeigen Sie die App erfolgreich angemeldeten Benutzern

Jetzt können wir die Variable authentication_status verwenden, um die App für unsere erfolgreich angemeldeten Benutzer anzuzeigen.

if authentication_status:
    authenticator.logout('Logout', 'main')
    # OUR APP CODE COMES HERE
elif authentication_status == False:
    st.error('Username/password is incorrect')
elif authentication_status == None:
    st.warning('Please enter your username and password')

Stellen Sie die Streamlit-App mit Docker bereit

Jetzt befinden wir uns im letzten Schritt der Entwicklung unserer App.

Sie können verschiedene Dienste für die Bereitstellung Ihrer App verwenden, wie AWS, Google Cloud, Azure, Heroku, DigitalOcean usw.

Lassen Sie uns vor dem Dockerfile die Datei requirements.txt erstellen. Dazu können wir den Befehl pip3 freeze > requirements.txt verwenden.

Streamlit-Dockerfile

Für die Bereitstellung unserer App verwende ich Python 3.9.10.

FROM python:3.9.10
WORKDIR /app
COPY . .
RUN pip3 install -r requirements.txt
CMD ["streamlit", "run", "streamlit_app.py"]
EXPOSE 8501

Einpacken

In diesem Tutorial haben wir gesehen, wie wir mit reinem Python eine beeindruckende Benutzeroberfläche erstellen und mit Docker bereitstellen können.

Weitere Informationen zu verschiedenen Streamlit-Widgets finden Sie in der gut dokumentierten API-Referenz.

Mehr Ressourcen:

---

Beitragsbild: Yaran/Shutterstock