Python — один из распространенных языков программирования для автоматизации процессов SEO.

Одна из лучших библиотек для создания внешнего интерфейса для наших приложений без каких-либо знаний HTML, CSS или кодирования с помощью платформы на основе JavaScript — это пакет Streamlit.

В этом руководстве по Streamlit мы подробно рассмотрим, как создать красивое приложение с помощью Python и Dockerfile для развертывания вашего приложения Streamlit.

Что такое стримлит?

Streamlit — это платформа приложений с открытым исходным кодом (пакет Python), которая дает нам возможность создавать привлекательные приложения без каких-либо знаний о фронтенд-разработке.

Это освобождает нас от участия в какой-либо внешней среде или кодировании в HTML, CSS и JavaScript.

Вы используете чистый Python для разработки интерфейса.

Когда станет полезной библиотека Streamlit?

Прежде всего, если вы пишете сценарии Python, которые регулярно выполняются на машине с планировщиком заданий, таким как cron, Streamlit вам бесполезен.

Но если вы разрабатываете инструмент, которым хотите поделиться с членами своей команды, например, приложение для исследования ключевых слов, вы можете использовать Streamlit.

Кроме того, если вам нужен метод аутентификации пользователя, сообщество Streamlit разработало пакет, который может справиться с этим за вас.

Создание приложения Streamlit: начало работы

Давайте создадим простое приложение, которое получает запросы автозаполнения для начального ключевого слова из общедоступного API Google.

Прежде чем начать, создайте папку на своем компьютере и назовите ее, как хотите.

Кроме того, я предполагаю, что вы уже устанавливали Python и знаете основы программирования на Python.

Для всего процесса нам нужно использовать эти библиотеки Python:

• Запросы.
• стримлит.
• Streamlit-Аутентификатор.
• ПиЯМЛ.

Также мы импортируем стандартную библиотеку Python:

Учебный код можно найти в моем Репозиторий начальных шаблонов Streamlit на Гитхабе.

Установка пакета Streamlit

Прежде всего, я предпочитаю создать виртуальную среду, запустив python3 -m venv .env, а затем установив пакет Streamlit, запустив pip3 install streamlit.

Теперь создайте скрипт Python. Назовем его streamlit_app.py.

В сложных проектах со слишком большим количеством функций я предпочитаю иметь отдельные файлы сценариев Python для разных функций, а затем импортировать их в streamlit_app.py или создавать отдельное приложение с помощью Flask или FastAPI.

Например, в приложении для исследования ключевых слов у меня есть скрипт Python для различных функций, которые получают данные от Semrush, скрипт для получения первых 10 или 20 результатов от Google, скрипт для автозаполнения Google и поисковых запросов, связанных с Google, и т. д. .

Получите запросы автозаполнения Google

Для выполнения запросов нам нужно использовать пакет Requests. Чтобы получить этот пакет, вам нужно запустить запросы на установку pip3.

Кроме того, для анализа ответа API автозаполнения нам нужно импортировать стандартную библиотеку Python JSON.

Прежде всего, мы импортируем стандартную библиотеку JSON, пакет Requests для выполнения запросов и Streamlit для создания нашего приложения.

Затем я определил функцию для получения запросов автозаполнения Google в виде списка строк.

Я использовал функцию замены дважды, чтобы все было просто, но вы можете использовать библиотеку re для использования регулярных выражений.

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

Приложение Streamlit

До сих пор мы устанавливали пакет Streamlit и определяли нашу функцию для получения запросов автозаполнения Google. Теперь давайте создадим настоящее приложение.

Чтобы просмотреть приложение Streamlit, нам нужно запустить Streamlit с помощью команды run streamlit_app.py в терминале для локального запуска нашего приложения. После выполнения этой команды, перейдя по URL-адресу, вы сможете просмотреть приложение.

Да, оно пустое, потому что мы не добавили к нему никаких заголовков и т. д.

Добавьте заголовок в приложение Streamlit

Давайте добавим заголовок в наше приложение. Как вы видите выше, я импортировал Streamlit как st.

Теперь, вызвав функцию st.title(), мы можем добавить заголовок на страницу со стилем заголовка. Скажем, st.title («Это SEO-приложение следующего уровня»).

Помните, что после редактирования файла streamlit_app.py и его сохранения в правом верхнем углу страницы появляется значок, и вы должны нажать Всегда возвращайся для просмотра изменений приложения без обновления страницы.

Теперь наше приложение выглядит как на изображении ниже. Если ваша системная тема темная, ваше приложение имеет темную тему.

Добавьте текст в приложение Streamlit

Чтобы добавить текстовый абзац в приложение, вам нужно использовать функцию st.write(). Например, st.write(«Воплотите свои идеи в реальность»).

Добавьте текстовый ввод в приложение Streamlit

Как вы видели, в функции автозаполнения Google был аргумент под названием «ключевое слово».

Этот аргумент должен исходить от пользовательского ввода.

Чтобы получить пользовательский ввод, мы можем использовать поле ввода текста в Streamlit. С помощью st.text_input() мы можем добавить ввод текста. Например, st.text_input(«Какое у вас начальное ключевое слово?»).

Кроме того, чтобы позже использовать ключевое слово input для перехода к нашей функции, мы должны присвоить его переменной.

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

Теперь мы хотим запустить наше приложение, когда есть входное ключевое слово. Здесь мы используем оператор if, чтобы проверить, является ли переменная пустой или нет.

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

Скачать из приложения Streamlit

Итак, мы добавили заголовок, строку текста и текстовое поле для ввода ключевого слова пользователя.

Теперь мы должны выполнить нашу написанную функцию и сделать кнопку загрузки, чтобы пользователь мог получить результаты в текстовом файле.

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

Мы создали наше простое приложение! Давайте изменим название приложения и фавиконку.

Перед этим давайте посмотрим код раздела приложения Streamlit до сих пор.

Изменить название приложения и фавиконку

Название приложения по умолчанию — streamlit_app · Streamlit, а фавикон приложения — значок Streamlit.

Чтобы изменить заголовок и значок, мы должны использовать функцию st.set_page_config().

Кроме того, я предпочитаю, чтобы макет приложения был широким (вы можете протестировать его).

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

Установите тему приложения по умолчанию

Тема приложения основана на системных настройках пользователя, но лично я в большинстве случаев обнаруживаю, что светлая тема имеет лучшую контрастность, и я не хочу, чтобы моя команда тратила время на то, чтобы выяснить, как изменить тему приложения.

Чтобы установить тему по умолчанию для приложения Streamlit, сначала необходимо создать папку и назвать ее .streamlit. Внутри этой папки создайте файл и назовите его config.toml.

Внутри config.toml вы должны вставить следующие строки, чтобы установить тему вашего приложения по умолчанию.

[theme]
base = "light"

Аутентификация пользователей в Streamlit

Представьте, что после развертывания вашего приложения кто-то узнает URL-адрес приложения и получает к нему доступ.

Чтобы защитить свое приложение, вы должны авторизовать пользователей, прежде чем они смогут использовать приложение — как и большинство SASS, которые мы используем каждый день.

Для приложения Streamlit мы можем использовать пакет Streamlit-Authenticator. Чтобы установить его, в терминале, расположенном в папке вашего приложения, введите команду pip3 install streamlit-authenticator и импортируйте пакет в свое приложение.

Я рекомендую вам прочитать Документация по пакету аутентификатора Streamlit чтобы лучше понять, что происходит.

импортировать streamlit_authenticator как stauth

Теперь создайте файл config.yaml для вставки учетных данных наших пользователей.

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]

Как видно из документа пакета, теперь мы должны хэшировать пароли с помощью модулей Hasher. Я предпочитаю открывать IPython и запускать приведенную ниже строку кода.

hashed_passwords = stauth.Hasher([‘12345’, ‘111213’]).генерировать ()

Создание виджета входа

Теперь мы должны создать виджет входа в систему, где пользователи могут вводить свое имя пользователя, пароль, а затем войти в приложение.

Во-первых, вам нужно установить пакет PyYAML с помощью команды pip3 install pyyaml ​​и импортировать его с помощью команды import yaml.

Затем создайте объект аутентификатора и визуализируйте модуль входа.

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

Показать приложение успешно вошедшим пользователям

Теперь мы можем использовать переменную authentication_status, чтобы увидеть приложение для наших успешно вошедших в систему пользователей.

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

Разверните приложение Streamlit с помощью Docker

Сейчас мы находимся на последнем этапе разработки нашего приложения.

Вы можете использовать различные сервисы для развертывания своего приложения, такие как AWS, Google Cloud, Azure, Heroku, DigitalOcean и т. д.

Перед Dockerfile давайте создадим файл requirements.txt. Для этого мы можем использовать команду pip3 freeze > requirements.txt.

Streamlit Dockerfile

Для развертывания нашего приложения я использую 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

Заворачивать

В этом руководстве мы увидели, как мы можем создать потрясающий пользовательский интерфейс с помощью чистого Python и развернуть его с помощью Docker.

Чтобы узнать больше о различных виджетах Streamlit, см. Справочник по API.

Дополнительные ресурсы:

---

Рекомендуемое изображение: Яран/Shutterstock