Hướng dẫn Streamlit cho SEO. Cách tạo giao diện người dùng cho ứng dụng Python của bạn

Python là một trong những ngôn ngữ lập trình phổ biến để tự động hóa quy trình SEO

Một trong những thư viện tuyệt vời nhất để tạo giao diện người dùng cho ứng dụng của chúng tôi mà không cần bất kỳ kiến ​​thức nào về HTML, CSS hoặc mã hóa bằng khung do JavaScript cung cấp là gói Streamlit

Trong hướng dẫn Streamlit này, chúng tôi sẽ đi sâu vào cách bạn có thể tạo một ứng dụng tuyệt đẹp với Python và Dockerfile để triển khai ứng dụng Streamlit của bạn

Streamlit là gì?

Streamlit là một khung ứng dụng nguồn mở [gói Python] cung cấp cho chúng tôi sức mạnh để tạo các ứng dụng đẹp mắt mà không cần bất kỳ kiến ​​thức phát triển giao diện người dùng nào

Điều này giúp chúng tôi không phải tham gia vào bất kỳ khuôn khổ giao diện người dùng hoặc mã hóa nào trong HTML, CSS và JavaScript

Bạn sử dụng Python thuần túy để phát triển giao diện người dùng của mình

Khi nào Thư viện Streamlit sẽ trở nên hữu ích?

Trước hết, nếu bạn đang mã hóa các tập lệnh Python chạy thường xuyên trên máy có bộ lập lịch công việc như cron, thì Streamlit không hữu ích cho bạn

Nhưng nếu bạn đang phát triển một công cụ mà bạn muốn chia sẻ với các thành viên trong nhóm của mình, chẳng hạn như ứng dụng nghiên cứu từ khóa, thì bạn có thể sử dụng Streamlit

Ngoài ra, nếu bạn cần một phương thức xác thực người dùng, cộng đồng Streamlit đã phát triển một gói có thể xử lý nó cho bạn

Tạo ứng dụng Streamlit. Bắt đầu

Hãy tạo một ứng dụng đơn giản nhận các truy vấn tự động hoàn thành cho từ khóa gốc từ API công khai của Google

Trước khi bắt đầu, hãy tạo một thư mục trên máy của bạn và đặt tên cho nó là gì bạn muốn

Ngoài ra, tôi sẽ cho rằng bạn đã cài đặt Python trước đó và biết những kiến ​​thức cơ bản về lập trình Python

Đối với toàn bộ quá trình, chúng ta cần sử dụng các thư viện Python này

• yêu cầu
• Hợp lý hóa
• Streamlit-Authenticator
• PyYAML

Ngoài ra, chúng tôi sẽ nhập một thư viện chuẩn Python

• JSON

Mã hướng dẫn có thể được tìm thấy trong kho lưu trữ mẫu khởi động Streamlit của tôi trên Github

Cài đặt gói Streamlit

Trước hết, tôi muốn tạo một môi trường ảo bằng cách chạy python3 -m venv. env, sau đó cài đặt gói Streamlit bằng cách chạy pip3 install streamlit

Bây giờ hãy tạo một tập lệnh Python. Hãy gọi nó là streamlit_app. py

Trong các dự án phức tạp có quá nhiều chức năng, tôi muốn có các tệp tập lệnh Python riêng biệt cho các chức năng khác nhau của mình và sau đó nhập chúng vào streamlit_app. py hoặc tạo một ứng dụng riêng với Flask hoặc FastAPI

Ví dụ: trong một ứng dụng nghiên cứu từ khóa, tôi có một tập lệnh Python cho các chức năng khác nhau lấy dữ liệu từ Semrush, một tập lệnh để nhận 10 hoặc 20 kết quả hàng đầu từ Google, một tập lệnh để nhận các tìm kiếm liên quan đến Google và tự động điền của Google, v.v.

Nhận các truy vấn tự động hoàn thành của Google

Để thực hiện yêu cầu, chúng tôi cần sử dụng gói Yêu cầu. Để có được gói này, bạn cần chạy các yêu cầu cài đặt pip3

Ngoài ra, để phân tích phản hồi API tự động hoàn thành, chúng ta cần nhập thư viện JSON chuẩn của Python

Trước hết, chúng tôi nhập thư viện chuẩn JSON, gói Yêu cầu để tạo yêu cầu và Streamlit để tạo ứng dụng của chúng tôi

Sau đó, tôi đã xác định một hàm để nhận các truy vấn tự động hoàn thành của Google dưới dạng danh sách các chuỗi

Tôi đã sử dụng chức năng thay thế hai lần để giữ mọi thứ đơn giản, nhưng bạn có thể sử dụng thư viện lại để sử dụng 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 = "//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['', ''].replace['', '']
        for element in list_google_autocomplete_uncleaned
        ]

    return list_google_autocomplete_cleaned

Ứng dụng Streamlit

Cho đến bây giờ, chúng tôi đã cài đặt gói Streamlit và xác định chức năng của chúng tôi để nhận các truy vấn tự động hoàn thành của Google. Bây giờ, hãy tạo ứng dụng thực tế

Để xem ứng dụng Streamlit, chúng ta cần chạy Streamlit với lệnh chạy streamlit_app. lệnh py trong thiết bị đầu cuối để chạy ứng dụng của chúng tôi cục bộ. Sau khi bạn chạy lệnh này, bằng cách truy cập http. //máy chủ cục bộ. 8501/ URL, bạn có thể xem ứng dụng

Có, nó trống vì chúng tôi không thêm bất kỳ tiêu đề nào, v.v. , với nó

Thêm tiêu đề vào ứng dụng Streamlit

Hãy thêm một tiêu đề vào ứng dụng của chúng tôi. Như bạn thấy ở trên, tôi đã nhập Streamlit dưới dạng st

Bây giờ bằng cách gọi st. title[], chúng ta có thể thêm tiêu đề vào trang với kiểu tiêu đề. Hãy nói rằng. tiêu đề ["Đây là một ứng dụng SEO cấp độ tiếp theo"]

Hãy nhớ rằng sau khi chỉnh sửa streamlit_app của bạn. py và lưu nó, một biểu tượng sẽ xuất hiện ở góc trên cùng bên phải của trang và bạn phải nhấn Luôn quay lại để xem các thay đổi của ứng dụng mà không cần làm mới trang

Bây giờ ứng dụng của chúng tôi trông giống như hình dưới đây. Nếu chủ đề hệ thống của bạn tối, thì ứng dụng của bạn có chủ đề tối

Thêm văn bản vào ứng dụng Streamlit

Để thêm một đoạn văn bản vào ứng dụng, bạn cần sử dụng st. chức năng ghi []. Ví dụ, st. write[“Biến ý tưởng của bạn thành hiện thực”]

Thêm kiểu nhập văn bản vào ứng dụng Streamlit

Như bạn đã thấy trong chức năng tự động điền của Google, có một đối số gọi là “từ khóa”

Đối số này phải đến từ đầu vào của người dùng

Để nhận đầu vào của người dùng, chúng ta có thể sử dụng trường nhập văn bản trong Streamlit. với st. text_input[] chúng ta có thể thêm kiểu nhập văn bản. Ví dụ, st. text_input[“Từ khóa gốc của bạn là gì?”]

Ngoài ra, để sau này sử dụng từ khóa input để truyền vào hàm của chúng ta, chúng ta phải gán nó cho một biến

input_google_autocomplete_keyword: str = st.text_input[
    "What is your seed keyword?"]

Bây giờ chúng tôi muốn chạy ứng dụng của mình khi có từ khóa đầu vào. Ở đây, chúng tôi sử dụng câu lệnh if để kiểm tra xem biến có rỗng hay không

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

Tải xuống từ ứng dụng Streamlit

Vì vậy, chúng tôi đã thêm một tiêu đề, một dòng văn bản và trường văn bản đầu vào để lấy từ khóa gốc của người dùng

Bây giờ chúng ta phải thực thi chức năng đã viết của mình và tạo nút tải xuống để người dùng nhận kết quả trong tệp văn bản

if output_list_google_autocomplete:
        st.download_button["Download the output",
                           ["\n"].join[output_list_google_autocomplete]]

Chúng tôi đã xây dựng ứng dụng đơn giản của mình. Hãy thay đổi tiêu đề ứng dụng và favicon

Trước đó, hãy xem mã phần ứng dụng Streamlit cho đến bây giờ

Thay đổi tiêu đề ứng dụng và Favicon

Tiêu đề mặc định của ứng dụng là streamlit_app · Streamlit và biểu tượng yêu thích của ứng dụng là biểu tượng Streamlit

Để thay đổi tiêu đề và favicon, chúng ta phải sử dụng st. set_page_config[]

Ngoài ra, tôi thích bố cục ứng dụng rộng hơn [bạn có thể kiểm tra nó]

st.set_page_config[
    page_title="Oh My App!",
    page_icon="😎",
    layout="wide"
]

Đặt chủ đề mặc định của ứng dụng

Chủ đề ứng dụng dựa trên cài đặt hệ thống của người dùng, nhưng cá nhân tôi, hầu hết các trường hợp, nhận thấy chủ đề sáng có độ tương phản tốt hơn – và tôi không muốn nhóm của mình dành thời gian tìm hiểu cách thay đổi chủ đề ứng dụng

Để đặt chủ đề mặc định cho ứng dụng Streamlit, trước tiên, bạn phải tạo một thư mục và đặt tên cho nó. chiếu sáng. Trong thư mục này, tạo một tệp và đặt tên là config. toml

Bên trong cấu hình. toml, bạn phải chèn các dòng bên dưới để đặt chủ đề mặc định cho ứng dụng của mình

[theme]
base = "light"

Xác thực người dùng trong Streamlit

Hãy tưởng tượng rằng sau khi bạn triển khai ứng dụng của mình, ai đó sẽ tìm ra URL của ứng dụng và truy cập nó

Để bảo vệ ứng dụng của bạn, bạn phải ủy quyền cho người dùng trước khi họ có thể sử dụng ứng dụng – giống như hầu hết các SASS mà chúng tôi sử dụng hàng ngày

Đối với ứng dụng Streamlit, chúng ta có thể sử dụng gói Streamlit-Authenticator. Để cài đặt nó, trong thiết bị đầu cuối nằm trong thư mục ứng dụng của bạn, hãy nhập lệnh pip3 install streamlit-authenticator và nhập gói vào ứng dụng của bạn

Tôi khuyên bạn nên đọc tài liệu về gói trình xác thực Streamlit để hiểu rõ hơn về những gì đang diễn ra

nhập streamlit_authenticator dưới dạng stauth

Bây giờ hãy tạo một cấu hình. tệp yaml để chèn thông tin đăng nhập của người dùng của chúng tôi

if output_list_google_autocomplete:
        st.download_button["Download the output",
                           ["\n"].join[output_list_google_autocomplete]]

Như trong tài liệu gói mà bạn có thể thấy, bây giờ chúng ta phải băm mật khẩu bằng các mô-đun Hasher. Tôi thích mở IPython và chạy dòng mã bên dưới

hash_passwords = stauth. Hasher[[‘12345’, ‘111213’]]. phát ra[]

Tạo tiện ích đăng nhập

Bây giờ chúng ta phải tạo một tiện ích đăng nhập nơi người dùng có thể nhập tên người dùng, mật khẩu của họ, sau đó đăng nhập vào ứng dụng

Trước tiên, bạn cần cài đặt gói PyYAML bằng lệnh pip3 install pyyaml ​​và nhập gói đó bằng lệnh import yaml

Sau đó, tạo một đối tượng xác thực và hiển thị mô-đun đăng nhập

if output_list_google_autocomplete:
        st.download_button["Download the output",
                           ["\n"].join[output_list_google_autocomplete]]

Hiển thị ứng dụng cho người dùng đã đăng nhập thành công

Bây giờ chúng ta có thể sử dụng biến authentication_status để xem ứng dụng cho người dùng đã đăng nhập thành công

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

Triển khai ứng dụng Streamlit với Docker

Bây giờ chúng tôi đang ở bước cuối cùng để phát triển ứng dụng của mình

Bạn có thể sử dụng các dịch vụ khác nhau để triển khai ứng dụng của mình, như AWS, Google Cloud, Azure, Heroku, DigitalOcean, v.v.

Trước Dockerfile, hãy tạo các yêu cầu. tập tin txt. Để làm như vậy, chúng ta có thể sử dụng đóng băng pip3> yêu cầu. lệnh txt

Streamlit Dockerfile

Để triển khai ứng dụng của chúng tôi, tôi sử dụng Python 3. 9. 10

if output_list_google_autocomplete:
        st.download_button["Download the output",
                           ["\n"].join[output_list_google_autocomplete]]

Gói [lại

Trong hướng dẫn này, chúng ta đã thấy cách chúng ta có thể tạo một giao diện người dùng tuyệt đẹp bằng Python thuần túy và triển khai nó bằng Docker

Streamlit có phải là giao diện người dùng không?

Làm cách nào để tạo ứng dụng streamlit?

Làm cách nào để xuất bản trên ứng dụng streamlit?

Làm cách nào để chạy streamlit trong Python?