نحوه ایجاد یک رابط کاربری برای برنامه پایتون

پایتون یکی از زبان های برنامه نویسی رایج برای خودکارسازی فرآیندهای سئو است.

یکی از بهترین کتابخانه‌ها برای ایجاد یک فرانت‌اند برای برنامه‌های ما بدون دانش HTML، CSS یا کدنویسی با چارچوب مبتنی بر جاوا اسکریپت، بسته Streamlit است.

در این آموزش Streamlit، به نحوه ایجاد یک برنامه زیبا با پایتون و Dockerfile برای استقرار برنامه Streamlit خود خواهیم پرداخت.

Streamlit چیست؟

Streamlit یک چارچوب برنامه منبع باز (یک بسته پایتون) است که به ما قدرت ایجاد برنامه های زیبا و ظاهری زیبا بدون دانش توسعه front-end را می دهد.

این ما را از دخالت در هر چارچوب front-end یا کدنویسی در HTML، CSS و جاوا اسکریپت آزاد می‌کند.

شما از Pyt،n خالص برای توسعه front-end خود استفاده می کنید.

کتابخانه Streamlit چه زم، مفید خواهد بود؟

اول از همه، اگر اسکریپت‌های پایتون را کدنویسی می‌کنید که به طور منظم روی ماشینی با زمان‌بندی کار مانند cron اجرا می‌شوند، Streamlit برای شما مفید نیست.

اما اگر در حال توسعه ابزاری هستید که می‌خواهید با اعضای تیم خود به اشتراک بگذارید، به ،وان مثال، یک برنامه تحقیق کلمات کلیدی، می‌تو،د از Streamlit استفاده کنید.

همچنین، اگر به یک روش احراز هویت کاربر نیاز دارید، جامعه Streamlit بسته ای را توسعه داده است که می تواند آن را برای شما مدیریت کند.

ایجاد یک برنامه Streamlit: شروع به کار

بیایید یک برنامه ساده ایجاد کنیم که درخواست های تکمیل خودکار یک کلمه کلیدی اولیه را از API عمومی Google دریافت می کند.

قبل از شروع، یک پوشه در دستگاه خود ایجاد کنید و نام آن را آنچه می خواهید بگذارید.

همچنین، من فرض می‌کنم که شما قبلا پایتون را نصب کرده‌اید و اصول برنامه‌نویسی پایتون را می‌د،د.

برای کل فرآیند، باید از این کتابخانه های پایتون استفاده کنیم:

• درخواست ها.
• Streamlit.
• Streamlit-Authenticator.
• pyYAML.

همچنین، یک کتابخانه استاندارد پایتون را وارد خواهیم کرد:

کد آموزش را می تو،د در من پیدا کنید م،ن قالب استارتر Streamlit در Github.

نصب بسته Streamlit

اول از همه، ترجیح می دهم با اجرای pyt،n3 -m venv .env یک محیط مجازی ایجاد کنم و سپس با اجرای pip3 install streamlit بسته Streamlit را نصب کنم.

حالا یک اسکریپت پایتون بسازید. بگذارید آن را streamlit_app.py بنامیم.

در پروژه های پیچیده ای که توابع زیادی دارند، ترجیح می دهم فایل های اسکریپت پایتون جداگانه برای توابع مختلف خود داشته باشم و سپس آن ها را به streamlit_app.py وارد کنم یا یک برنامه جداگانه با Flask یا FastAPI ایجاد کنم.

به ،وان مثال، در یک برنامه تحقیق کلمات کلیدی، من یک اسکریپت پایتون برای توابع مختلف دارم که داده ها را از Semrush دریافت می کند، یک اسکریپت برای دریافت 10 یا 20 نتیجه برتر از Google، یک اسکریپت برای دریافت تکمیل خودکار گوگل و جستجوهای مرتبط با Google و غیره. .

جستجوهای تکمیل خودکار Google را دریافت کنید

برای درخواست، باید از بسته Requests استفاده کنیم. برای دریافت این بسته، باید درخواست های نصب pip3 را اجرا کنید.

همچنین، برای تجزیه پاسخ API تکمیل خودکار، باید کتابخانه JSON استاندارد پایتون را وارد کنیم.

اول از همه، ما کتابخانه استاندارد JSON، بسته Requests برای ایجاد درخواست و Streamlit را برای ایجاد برنامه خود وارد می کنیم.

سپس، تابعی را برای دریافت پرس و جوهای تکمیل خودکار گوگل به ،وان لیستی از رشته ها تعریف کردم.

من دو بار از تابع تعویض برای ساده نگه داشتن همه چیز استفاده کردم، اما می تو،د از re li،ry برای استفاده از 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 = "
    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 را نصب کرده و عملکرد خود را برای دریافت کوئری های تکمیل خودکار گوگل تعریف کرده ایم. اکنون، بیایید برنامه واقعی را ایجاد کنیم.

برای مشاهده برنامه Streamlit، باید Streamlit را با دستور run streamlit_app.py در ترمینال اجرا کنیم تا برنامه ما به صورت محلی اجرا شود. پس از اجرای این دستور، با رفتن به URL، می تو،د برنامه را مشاهده کنید.

بله، خالی است زیرا ما هیچ ،وان و غیره را به آن اضافه نکردیم.

یک ،وان به برنامه Streamlit اضافه کنید

بیایید یک ،وان به برنامه خود اضافه کنیم. همانطور که در بالا می بینید، من Streamlit را به ،وان st.

حال با فراخو، تابع st.،le() می‌تو،م یک ،وان با سبک ،وان به صفحه اضافه کنیم. بیایید بگوییم st.،le (“این یک برنامه سئو سطح بعدی است”).

به یاد داشته باشید که پس از ویرایش فایل streamlit_app.py و ذخیره آن، یک نماد در گوشه سمت راست بالای صفحه ظاهر می شود و باید آن را فشار دهید. همیشه برگرد برای مشاهده تغییرات برنامه بدون رفرش صفحه.

اکنون برنامه ما مانند تصویر زیر است. اگر طرح زمینه سیستم شما تیره است، برنامه شما دارای تم تیره است.

متن را به برنامه Streamlit اضافه کنید

برای افزودن یک پاراگراف متنی به برنامه، باید از تابع st.write() استفاده کنید. به ،وان مثال، st.write (“ایده های خود را واقعی کنید”).

یک ورودی متن به برنامه Streamlit اضافه کنید

همانطور که در تابع تکمیل خودکار گوگل دیدید، یک آرگومان به نام کلمه کلیدی وجود داشت.

این آرگومان باید از ورودی کاربر باشد.

برای دریافت ورودی کاربر، می تو،م از یک فیلد ورودی متن در Streamlit استفاده کنیم. با st.text_input() می تو،م یک ورودی متن اضافه کنیم. به ،وان مثال، st.text_input («کلمه کلیدی seed شما چیست؟»).

همچنین برای اینکه بعداً از کلمه کلیدی ورودی برای عبور به تابع خود استفاده کنیم، باید آن را به یک متغیر اختصاص دهیم.

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

بنابراین، ما یک ،وان، یک خط متن و یک فیلد متن ورودی برای دریافت کلمه کلیدی seed کاربر اضافه کرده‌ایم.

اکنون باید تابع نوشته شده خود را اجرا کنیم و یک دکمه دانلود برای کاربر ایجاد کنیم تا نتایج را در یک فایل متنی دریافت کند.

if output_list_google_autocomplete:
        st.download_،on("Download the output",
                           ("\n").join(output_list_google_autocomplete))

ما برنامه ساده خود را ساختیم! بیایید ،وان برنامه و فاوی، را تغییر دهیم.

قبل از آن، اجازه دهید کد بخش برنامه Streamlit را تا کنون ببینیم.

،وان برنامه و فاوی، را تغییر دهید

،وان پیش فرض برنامه streamlit_app · Streamlit و فاوی، برنامه نماد Streamlit است.

برای تغییر ،وان و فاوی، باید از st.set_page_config() استفاده کنیم.

همچنین، من ترجیح می‌دهم طرح‌بندی برنامه گسترده باشد (می‌تو،د آن را آزمایش کنید).

st.set_page_config(
    page_،le="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_authenticator را به ،وان stauth وارد کنید

اکنون یک فایل config.yaml برای درج اطلاعات کاربری کاربران خود ایجاد کنید.

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

همانطور که در سند بسته می بینید، اکنون باید رمزهای عبور را با ماژول های هاشر هش کنیم. من ترجیح می دهم یک IPyt،n را باز کنم و خط کد زیر را اجرا کنم.

hashed_p،words = stauth.Hasher([‘12345’, ‘111213’]).تولید می کنند()

ایجاد ویجت ورود

اکنون باید یک ویجت ورود ایجاد کنیم که در آن کاربران بتوانند نام کاربری، رمز عبور خود را وارد کرده و سپس وارد برنامه شوند.

ابتدا باید بسته PyYAML را با دستور pip3 install pyyaml ​​نصب کرده و با import yaml وارد کنید.

سپس یک شی authenticator ایجاد کنید و ماژول ورود را رندر کنید.

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["preaut،rized"]
)

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/p،word is incorrect')
elif authentication_status == None:
    st.warning('Please enter your username and p،word')

برنامه Streamlit را با داکر اجرا کنید

اکنون در مرحله نهایی توسعه اپلیکیشن خود هستیم.

می‌تو،د از سرویس‌های مختلفی مانند AWS، Google Cloud، Azure، Heroku، Di،alOcean و غیره برای اجرای برنامه‌تان استفاده کنید.

قبل از Dockerfile، بیایید فایل requires.txt را ایجاد کنیم. برای انجام این کار، می تو،م از دستور pip3 freeze > requires.txt استفاده کنیم.

Dockerfile Streamlit

برای استقرار برنامه ما، من از Pyt،n 3.9.10 استفاده می کنم.

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

بسته شدن

در این آموزش دیدیم که چگونه می‌تو،م یک رابط کاربری خیره‌کننده با پایتون خالص ایجاد کنیم و آن را با Docker پیاده‌سازی کنیم.

برای ،ب اطلاعات بیشتر در مورد ویجت های Streamlit مختلف، به مستندات آنها مراجعه کنید مرجع API.

منابع بیشتر:

---

تصویر ویژه: Yaran/Shutterstock