Cara Membuat UI Untuk Aplikasi Python Anda

Cara Membuat UI Untuk Aplikasi Python Anda

Python adalah salah satu bahasa pemrograman umum untuk mengotomatisasi proses SEO.

Salah satu perpustakaan terbaik untuk membuat front-end untuk aplikasi kami tanpa HTML, pengetahuan CSS, atau pengkodean dengan kerangka kerja yang didukung JavaScript adalah paket Streamlit.

Dalam tutorial Streamlit ini, kami akan membahas bagaimana Anda dapat membuat aplikasi yang indah dengan Python dan Dockerfile untuk menerapkan aplikasi Streamlit Anda.

Apa itu Streamlit?

Streamlit adalah kerangka aplikasi sumber terbuka (paket Python) yang memberi kita kekuatan untuk membuat aplikasi yang tampak bagus tanpa pengetahuan pengembangan front-end.

Ini membuat kami bebas dari keterlibatan dalam kerangka kerja front-end atau pengkodean dalam HTML, CSS, dan JavaScript.

Anda menggunakan Python murni untuk mengembangkan front-end Anda.

Kapan Perpustakaan Streamlit Menjadi Berguna?

Pertama-tama, jika Anda mengkodekan skrip Python yang berjalan secara teratur pada mesin dengan penjadwal pekerjaan seperti cron, Streamlit tidak berguna untuk Anda.

Tetapi jika Anda mengembangkan alat yang ingin Anda bagikan dengan anggota tim Anda, misalnya, aplikasi penelitian kata kunci, Anda dapat menggunakan Streamlit.

Juga, jika Anda memerlukan metode otentikasi pengguna, komunitas Streamlit mengembangkan paket yang dapat menanganinya untuk Anda.

Buat Aplikasi Streamlit: Memulai

Mari buat aplikasi sederhana yang mendapatkan kueri pelengkapan otomatis untuk kata kunci benih dari API publik Google.

Sebelum memulai, buat folder di mesin Anda, dan beri nama sesuai keinginan Anda.

Juga, saya akan menganggap Anda telah menginstal Python sebelumnya dan mengetahui dasar-dasar pemrograman Python.

Untuk keseluruhan proses, kita perlu menggunakan pustaka Python ini:

  • Permintaan.
  • Ringan.
  • Streamlit-Authenticator.
  • PyYAML.

Juga, kami akan mengimpor pustaka standar Python:

Kode tutorial dapat ditemukan di my Repositori template pemula yang efisien di Github.

Memasang Paket Streamlit

Pertama-tama, saya lebih suka membuat lingkungan virtual dengan menjalankan python3 -m venv .env, dan kemudian menginstal paket Streamlit dengan menjalankan pip3 install streamlit.

Sekarang buat skrip Python. Sebut saja streamlit_app.py.

Dalam proyek kompleks yang memiliki terlalu banyak fungsi, saya lebih suka memiliki file skrip Python terpisah untuk fungsi saya yang berbeda dan kemudian mengimpornya ke streamlit_app.py atau membuat aplikasi terpisah dengan Flask atau FastAPI.

Misalnya, dalam aplikasi penelitian kata kunci, saya memiliki skrip Python untuk berbagai fungsi yang mendapatkan data dari Semrush, skrip untuk mendapatkan 10 atau 20 hasil teratas dari Google, skrip untuk mendapatkan pelengkapan otomatis Google dan pencarian terkait Google, dll .

Dapatkan Kueri Pelengkapan Otomatis Google

Untuk membuat permintaan, kita perlu menggunakan paket Permintaan. Untuk mendapatkan paket ini, Anda perlu menjalankan permintaan instal pip3.

Selain itu, untuk mengurai respons API pelengkapan otomatis, kita perlu mengimpor pustaka JSON standar Python.

Pertama-tama, kami mengimpor pustaka standar JSON, paket Permintaan untuk membuat permintaan, dan Streamlit untuk membuat aplikasi kami.

Kemudian, saya mendefinisikan fungsi untuk mendapatkan kueri pelengkapan otomatis Google sebagai daftar string.

Saya menggunakan fungsi ganti dua kali untuk menjaga semuanya tetap sederhana, tetapi Anda dapat menggunakan pustaka ulang untuk menggunakan 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

Aplikasi Streamlit

Sampai sekarang, kami telah menginstal paket Streamlit dan mendefinisikan fungsi kami untuk mendapatkan kueri pelengkapan otomatis Google. Sekarang, mari kita buat aplikasi yang sebenarnya.

Untuk melihat aplikasi Streamlit, kita perlu menjalankan Streamlit dengan perintah run streamlit_app.py di terminal untuk menjalankan aplikasi kita secara lokal. Setelah Anda menjalankan perintah ini, dengan membuka URL http://localhost:8501/, Anda dapat melihat aplikasinya.

Ya, kosong karena kami tidak menambahkan judul, dll., ke dalamnya.

Menjalankan aplikasi Streamlit dari terminalTangkapan layar dari penulis, Oktober 2022

Tambahkan Judul Ke Aplikasi Streamlit

Mari tambahkan heading ke aplikasi kita. Seperti yang Anda lihat di atas, saya mengimpor Streamlit sebagai st.

Sekarang dengan memanggil fungsi st.title(), kita dapat menambahkan heading ke halaman dengan style title. Katakanlah st.title(“Ini adalah aplikasi SEO tingkat berikutnya”).

Ingatlah bahwa setelah mengedit file streamlit_app.py Anda dan menyimpannya, sebuah ikon muncul di sudut kanan atas halaman, dan Anda harus menekan Selalu kembali untuk melihat perubahan aplikasi tanpa penyegaran halaman.

Selalu tombol kembali di aplikasi StreamlitTangkapan layar dari penulis, Oktober 2022

Sekarang aplikasi kita terlihat seperti gambar di bawah ini. Jika tema sistem Anda gelap, aplikasi Anda memiliki tema gelap.

Tampilan aplikasi Streamlit dengan headingTangkapan layar dari penulis, Oktober 2022

Tambahkan Teks Ke Aplikasi Streamlit

Untuk menambahkan paragraf teks ke aplikasi, Anda perlu menggunakan fungsi st.write(). Misalnya, st.write(“Jadikan ide Anda nyata”).

Aplikasi SteamlitTangkapan layar dari penulis, Oktober 2022

Tambahkan Masukan Teks Ke Aplikasi Streamlit

Seperti yang Anda lihat di fungsi pelengkapan otomatis Google, ada argumen yang disebut “kata kunci”.

Argumen ini harus berasal dari input pengguna.

Untuk mendapatkan input pengguna, kita dapat menggunakan kolom input teks di Streamlit. Dengan st.text_input() kita dapat menambahkan input teks. Misalnya, st.text_input(“Apa kata kunci benih Anda?”).

Juga, untuk menggunakan kata kunci input nanti untuk meneruskan ke fungsi kita, kita harus menetapkannya ke variabel.

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

Sekarang kami ingin menjalankan aplikasi kami ketika ada kata kunci input. Di sini, kami menggunakan pernyataan if untuk memeriksa apakah variabel kosong atau tidak.

if input_google_autocomplete_keyword:
    output_list_google_autocomplete: list[str] = google_autocomplete(
        input_google_autocomplete_keyword)
Tampilan aplikasi Streamlit dengan heading, teks, dan input teksTangkapan layar dari penulis, Oktober 2022

Unduh Dari Aplikasi Streamlit

Jadi, kami telah menambahkan judul, baris teks, dan bidang teks input untuk mendapatkan kata kunci benih pengguna.

Sekarang kita harus menjalankan fungsi tertulis kita dan membuat tombol unduh bagi pengguna untuk mendapatkan hasilnya dalam file teks.

if output_list_google_autocomplete:
        st.download_button("Download the output",
                           ("n").join(output_list_google_autocomplete))
Tampilan aplikasi Streamlit dengan judul, teks, input teks, dan tombol unduhTangkapan layar dari penulis, Oktober 2022

Kami membangun aplikasi sederhana kami! Mari kita ubah judul dan favicon aplikasi.

Sebelum itu, mari kita lihat kode bagian aplikasi Streamlit hingga sekarang.

Kode bagian aplikasi StreamlitTangkapan layar dari penulis, Oktober 2022

Ubah Judul Aplikasi Dan Favicon

Judul default aplikasi adalah streamlit_app · Streamlit, dan favicon aplikasi adalah ikon Streamlit.

Untuk mengubah judul dan favicon, kita harus menggunakan st.set_page_config().

Juga, saya lebih suka tata letak aplikasi lebar (Anda dapat mengujinya).

st.set_page_config(
    page_title="Oh My App!",
    page_icon="😎",
    layout="wide"
)
Aplikasi Streamlit di browserTangkapan layar dari penulis, Oktober 2022

Setel Tema Default Aplikasi

Tema aplikasi didasarkan pada pengaturan sistem pengguna, tetapi secara pribadi, sering kali, saya menemukan bahwa tema terang memiliki kontras yang lebih baik – dan saya tidak ingin tim saya meluangkan waktu untuk mencari tahu cara mengubah tema aplikasi.

Untuk menyetel tema default untuk aplikasi Streamlit, pertama-tama, Anda harus membuat folder, dan beri nama .streamlit. Di dalam folder ini buat file, dan beri nama config.toml.

Di dalam config.toml Anda harus memasukkan baris di bawah ini untuk menyetel tema default aplikasi Anda.

[theme]
base = "light"
Kode file confing.toml untuk menyesuaikan tema aplikasi StreamlitTangkapan layar dari penulis, Oktober 2022

Mengautentikasi Pengguna Di Streamlit

Bayangkan setelah Anda menerapkan aplikasi, seseorang menemukan URL aplikasi dan mengaksesnya.

Untuk melindungi aplikasi Anda, Anda harus memberi otorisasi kepada pengguna sebelum mereka dapat menggunakan aplikasi – seperti kebanyakan SASS yang kami gunakan setiap hari.

Untuk aplikasi Streamlit, kita bisa menggunakan paket Streamlit-Authenticator. Untuk menginstalnya, di terminal yang terletak di folder aplikasi Anda, ketik perintah pip3 install streamlit-authenticator, dan impor paket ke dalam aplikasi Anda.

Saya sarankan Anda membaca Dokumentasi paket autentikator yang efisien untuk mendapatkan pemahaman yang lebih baik tentang apa yang sedang terjadi.

impor streamlit_authenticator sebagai stauth

Sekarang buat file config.yaml untuk memasukkan kredensial pengguna kami.

credentials:
  usernames:
    firstUser:
      email: firstuser@gmail.com
      name: The first username
      password: 12345 # Must be replaced with the hashed password
    secondUser:
      email: seconduser@gmail.com
      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:
    - my@gmail.com

Seperti dalam dokumen paket yang dapat Anda lihat, sekarang kita harus meng-hash kata sandi dengan modul Hasher. Saya lebih suka membuka IPython dan menjalankan baris kode di bawah ini.

hashed_passwords = stauth.Hasher([‘12345’, ‘111213’]).menghasilkan()

Membuat Widget Masuk

Sekarang kita harus membuat widget login di mana pengguna dapat memasukkan nama pengguna, kata sandi, dan kemudian masuk ke aplikasi.

Pertama, Anda perlu menginstal paket PyYAML dengan perintah pip3 install pyyaml ​​dan mengimpornya dengan file import yaml.

Kemudian buat objek authenticator, dan render modul login.

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")
Widget masuk StreamlitTangkapan layar dari penulis, Oktober 2022

Tampilkan Aplikasi Kepada Pengguna yang Berhasil Masuk

Sekarang kita dapat menggunakan variabel authentication_status untuk melihat aplikasi bagi pengguna yang berhasil login.

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

Terapkan Aplikasi Streamlit Dengan Docker

Sekarang kita berada di langkah terakhir mengembangkan aplikasi kita.

Anda dapat menggunakan layanan yang berbeda untuk menerapkan aplikasi Anda, seperti AWS, Google Cloud, Azure, Heroku, DigitalOcean, dll.

Sebelum Dockerfile, mari kita buat file requirements.txt. Untuk melakukannya, kita dapat menggunakan perintah pip3 freeze > requirements.txt.

Streamlit Dockerfile

Untuk menyebarkan aplikasi kami, saya menggunakan 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

Bungkus

Dalam tutorial ini, kita melihat bagaimana kita bisa membuat UI yang menakjubkan dengan Python murni, dan menyebarkannya dengan Docker.

Untuk mempelajari lebih lanjut tentang berbagai widget Streamlit, lihat didokumentasikan dengan baik referensi API.

Lebih banyak sumber daya:


Gambar Unggulan: Yaran/Shutterstock

Share

Leave a Reply

Your email address will not be published. Required fields are marked *