Tutorial semplificato per SEO: come creare un’interfaccia utente per la tua app Python

In questo tutorial imparerai come creare un’interfaccia utente straordinaria con Python puro utilizzando la libreria Streamlit.

Python è uno dei linguaggi di programmazione comuni per automatizzare i processi SEO.

Una delle più grandi librerie per la creazione di un front-end per le nostre app senza alcuna conoscenza di HTML, CSS o codifica con un framework basato su JavaScript è il pacchetto Streamlit.

In questo tutorial su Streamlit, approfondiremo come creare una bellissima app con Python e il Dockerfile per distribuire la tua app Streamlit.

Cos’è Streamlit?

Streamlit è un framework di app open source (un pacchetto Python) che ci dà la possibilità di creare app di bell’aspetto senza alcuna conoscenza di sviluppo front-end.

Questo ci rende liberi dal coinvolgimento in qualsiasi framework front-end o codifica in HTML, CSS e JavaScript.

Usi Python puro per sviluppare il tuo front-end.

Quando diventerà utile la libreria Streamlit?

Prima di tutto, se stai codificando script Python che vengono eseguiti regolarmente su una macchina con un programmatore di lavori come cron, Streamlit non è utile per te.

Ma se stai sviluppando uno strumento che desideri condividere con i membri del tuo team, ad esempio un’app per la ricerca di parole chiave, puoi utilizzare Streamlit.

Inoltre, se hai bisogno di un metodo di autenticazione utente, la comunità Streamlit ha sviluppato un pacchetto in grado di gestirlo per te.

Crea un’app Streamlit: come iniziare

Creiamo una semplice app che riceva query di completamento automatico per una parola chiave seed dall’API pubblica di Google.

Prima di iniziare, crea una cartella sulla tua macchina e chiamala come vuoi.

Inoltre, presumo che tu abbia già installato Python e conosca le basi della programmazione Python.

Per l’intero processo, dobbiamo usare queste librerie Python:

  • Richieste.
  • Illuminato.
  • Streamlit-Authenticator.
  • PyYAML.

Inoltre, importeremo una libreria standard Python:

  • JSON.

Il codice del tutorial può essere trovato in my Repository di modelli di avviamento semplificato su Github.

Installazione del pacchetto Streamlit

Prima di tutto, preferisco creare un ambiente virtuale eseguendo python3 -m venv .env, quindi installando il pacchetto Streamlit eseguendo pip3 install streamlit.

Ora crea uno script Python. Chiamiamolo streamlit_app.py.

In progetti complessi che hanno troppe funzioni, preferisco avere file di script Python separati per le mie diverse funzioni e quindi importarli in streamlit_app.py o creare un’app separata con Flask o FastAPI.

Ad esempio, in un’app di ricerca di parole chiave, ho uno script Python per diverse funzioni che ottengono dati da Semrush, uno script per ottenere i primi 10 o 20 risultati da Google, uno script per ottenere il completamento automatico di Google e le ricerche relative a Google, ecc. .

Ottieni le query di completamento automatico di Google

Per fare richieste, dobbiamo usare il pacchetto Requests. Per ottenere questo pacchetto, è necessario eseguire le richieste di installazione pip3.

Inoltre, per analizzare la risposta API di completamento automatico, dobbiamo importare la libreria JSON standard di Python.

Prima di tutto, importiamo la libreria standard JSON, il pacchetto Requests per effettuare le richieste e Streamlit per creare la nostra app.

Quindi, ho definito una funzione per ottenere le query di completamento automatico di Google come un elenco di stringhe.

Ho usato la funzione di sostituzione due volte per mantenere tutto semplice, ma puoi usare re library per usare regex.

"""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

L’app Streamlit

Fino ad ora, abbiamo installato il pacchetto Streamlit e definito la nostra funzione per ottenere le query di completamento automatico di Google. Ora, creiamo l’app vera e propria.

Per visualizzare l’app Streamlit, dobbiamo eseguire Streamlit con il comando run streamlit_app.py nel terminale per eseguire la nostra app in locale. Dopo aver eseguito questo comando, accedendo all’URL http://localhost:8501/ è possibile visualizzare il file app.

Sì, è vuoto perché non abbiamo aggiunto alcuna intestazione, ecc.

Screenshot dell’autore, ottobre 2022

Aggiungi un’intestazione all’app Streamlit

Aggiungiamo un’intestazione alla nostra app. Come vedi sopra, ho importato lo Streamlit come st.

Ora chiamando la funzione st.title(), possiamo aggiungere un’intestazione alla pagina con uno stile di titolo. Diciamo st.title (“Questa è un’app SEO di livello superiore”).

Ricorda che dopo aver modificato il tuo file streamlit_app.py e averlo salvato, viene visualizzata un’icona nell’angolo in alto a destra della pagina e devi premere Torna sempre per visualizzare le modifiche all’app senza alcun aggiornamento della pagina.

Pulsante di ritorno sempre nell'app StreamlitScreenshot dell’autore, ottobre 2022

Ora la nostra app assomiglia all’immagine qui sotto. Se il tema del tuo sistema è scuro, la tua app ha un tema scuro.

Uno sguardo a un'app Streamlit con intestazioneScreenshot dell’autore, ottobre 2022

Aggiungi testo all’app Streamlit

Per aggiungere un paragrafo di testo all’app, devi utilizzare la funzione st.write(). Ad esempio, st.write(“Rendi reali le tue idee”).

App illuminata a vaporeScreenshot dell’autore, ottobre 2022

Aggiungi un input di testo all’app Streamlit

Come hai visto nella funzione di completamento automatico di Google, c’era un argomento chiamato “parola chiave”.

Questo argomento deve provenire dall’input dell’utente.

Per ottenere l’input dell’utente, possiamo utilizzare un campo di input di testo in Streamlit. Con st.text_input() possiamo aggiungere un input di testo. Ad esempio, st.text_input(“Qual è la tua parola chiave seed?”).

Inoltre, per utilizzare successivamente la parola chiave input per passare alla nostra funzione, dobbiamo assegnarla a una variabile.

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

Ora vogliamo eseguire la nostra app quando c’è una parola chiave di input. Qui, usiamo un’istruzione if per verificare se la variabile è vuota o meno.

if input_google_autocomplete_keyword:
    output_list_google_autocomplete: list[str] = google_autocomplete(
        input_google_autocomplete_keyword)
Uno sguardo a un'app Streamlit con intestazione, testo e input di testoScreenshot dell’autore, ottobre 2022

Scarica dall’app Streamlit

Quindi, abbiamo aggiunto un’intestazione, una riga di testo e un campo di testo di input per ottenere la parola chiave seme dell’utente.

Ora dobbiamo eseguire la nostra funzione scritta e creare un pulsante di download per consentire all’utente di ottenere i risultati in un file di testo.

if output_list_google_autocomplete:
        st.download_button("Download the output",
                           ("\n").join(output_list_google_autocomplete))
Uno sguardo a un'app Streamlit con intestazione, testo, input di testo e pulsante di downloadScreenshot dell’autore, ottobre 2022

Abbiamo creato la nostra semplice app! Cambiamo il titolo e la favicon dell’app.

Prima di ciò, vediamo il codice della sezione dell’app Streamlit fino ad ora.

Il codice della sezione dell'app StreamlitScreenshot dell’autore, ottobre 2022

Cambia il titolo e la favicon dell’app

Il titolo predefinito dell’app è streamlit_app · Streamlit e la favicon dell’app è l’icona Streamlit.

Per modificare il titolo e la favicon, dobbiamo usare st.set_page_config().

Inoltre, preferisco che il layout dell’app sia ampio (puoi provarlo).

st.set_page_config(
    page_title="Oh My App!",
    page_icon="😎",
    layout="wide"
)
L'app Streamlit nel browserScreenshot dell’autore, ottobre 2022

Imposta il tema predefinito dell’app

Il tema dell’app si basa sulle impostazioni di sistema dell’utente, ma personalmente, la maggior parte delle volte, scopro che il tema chiaro ha un contrasto migliore e non voglio che il mio team dedichi il proprio tempo a scoprire come modificare il tema dell’app.

Per impostare un tema predefinito per l’app Streamlit, devi innanzitutto creare una cartella e denominarla .streamlit. All’interno di questa cartella crea un file e chiamalo config.toml.

All’interno del file config.toml devi inserire le seguenti righe per impostare il tema predefinito della tua app.

[theme]
base = "light"
Il codice del file confing.toml per personalizzare il tema dell'app StreamlitScreenshot dell’autore, ottobre 2022

Autenticazione degli utenti in Streamlit

Immagina che dopo aver distribuito la tua app, qualcuno scopra l’URL dell’app e vi acceda.

Per proteggere la tua app, devi autorizzare gli utenti prima che possano utilizzare l’app, come la maggior parte dei SASS che utilizziamo ogni giorno.

Per un’app Streamlit, possiamo utilizzare il pacchetto Streamlit-Authenticator. Per installarlo, nel terminale situato nella cartella dell’app, digita il comando pip3 install streamlit-authenticator e importa il pacchetto nella tua app.

Ti consiglio di leggere il Documentazione semplificata del pacchetto di autenticazione per capire meglio cosa sta succedendo.

importa streamlit_authenticator come stauth

Ora crea un file config.yaml per inserire le credenziali dei nostri utenti.

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]

Come nel documento del pacchetto che puoi vedere, ora dobbiamo eseguire l’hashing delle password con i moduli Hasher. Preferisco aprire un IPython ed eseguire la seguente riga di codice.

hash_password = stauth.Hasher([‘12345’, ‘111213’]).creare()

Creazione di un widget di accesso

Ora dobbiamo creare un widget di accesso in cui gli utenti possono inserire nome utente, password e quindi accedere all’app.

Innanzitutto, devi installare il pacchetto PyYAML con il comando pip3 install pyyaml ​​e importarlo con import yaml.

Quindi crea un oggetto autenticatore e visualizza il modulo di accesso.

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")
Il widget di accesso StreamlitScreenshot dell’autore, ottobre 2022

Mostra l’app agli utenti che hanno effettuato correttamente l’accesso

Ora possiamo usare la variabile authentication_status per vedere l’app per i nostri utenti che hanno effettuato correttamente l’accesso.

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')

Distribuisci l’app Streamlit con Docker

Ora siamo nella fase finale dello sviluppo della nostra app.

Puoi utilizzare diversi servizi per distribuire la tua app, come AWS, Google Cloud, Azure, Heroku, DigitalOcean, ecc.

Prima del Dockerfile, creiamo il file requirements.txt. Per fare ciò, possiamo usare il comando pip3 freeze > requirements.txt.

Dockerfile semplificato

Per distribuire la nostra app, utilizzo 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

Incartare

In questo tutorial, abbiamo visto come creare un’incredibile interfaccia utente con Python puro e distribuirla con Docker.

Per saperne di più sui diversi widget Streamlit, vedere i loro ben documentati Riferimento API.

Altre risorse:

  • Utilizzo di Python + Streamlit per trovare opportunità di parole chiave a distanza notevole
  • Costruisci la tua casella di risposta SEO con GPT-3 Codex e Streamlit
  • SEO tecnico avanzato: una guida completa

Immagine di presentazione: Yaran/Shutterstock

Leave a Comment