# Streamlit *** ## 1. Tentang Streamlit Dalam buku Karya Abu Tholib, M.Kom mengatakan bahwa perkembangan teknologi kecerdasan buatan dalam beberapa dekade terakhir sungguh luar biasa pesat. Salah satu cabangnya adalah **Machine Learning** yang berfokus pada sebuah mesin/komputer yang mampu belajar dari data yang tersedia dan mengubah data tersebut menjadi informasi dan keputusan\[1] perluasan implementasi Industri 4.0 dan teknologi baru memungkinkan terobosan baru dalam pengembangan berbagai metode machine learning, Teknologi ini telah mengalami kemajuan signifikan \[2], pendekatan machine learning dapat digunakan untuk menyelesaikan permasalahan yang komplek di berbagai bidang yang tidak dapat di selesaikan oleh program konvensional \[3], dengan semakin meningkatnya daya komputasi dan jumlah data yang tersedia, Machine Learning menjadi lebih efektif dalam menangani tugas-tugas yang lebih kompleks, seperti analisis citra dan teks, pengenalan wajah, dan pemrosesan bahasa alami. Salah satu titik kesulitan bagi para **Data Scientiest** adalah dalam proses setelah mereka menemukan wawasan baru atau membuat model baru. Apa cara terbaik untuk menunjukkan hasil secara visual kepada para khalayak umum adalah dengan membuat aplikasi berbasis website, ada beberapa framework yang biasa digunakan oleh khalayak umum seperti **Flask dan Django** namun kekurangannya adalah kita harus membangun seluruh aplikasi web dari awal, sehingga framework streamlit menjadi pilihan dalam hal kecepatan dan kemudahan. streamlit adalah kerangka kerja utama pertama yang semuanya murni **Python.** Streamlit **adalah framework Python** yang digunakan untuk membangun aplikasi web dengan antarmuka pengguna interaktif untuk proyek-proyek data science dan machine learning. Ini memungkinkan pengembang untuk membuat aplikasi web khusus dan tampilan data dengan sedikit usaha dan keahlian dalam pengembangan, web Streamlit dibangun di atas pustaka ilmu data yang populer seperti **NumPy, Pandas, dan Matplotlib,** sehingga memudahkan untuk membuat visualisasi dan komponen interaktif dalam aplikasi. Streamlit juga menyediakan API sederhana untuk input dan output data, sehingga mudah untuk terhubung ke berbagai sumber data dan API. Dengan Streamlit, pengembang dapat membuat aplikasi yang dapat digunakan di berbagai platform, seperti Heroku atau AWS. Streamlit juga memiliki fitur berbagi bawaan, di mana pengembang dapat membagikan aplikasi mereka dengan tim mereka atau komunitas yang lebih luas hanya dengan membagikan tautan. Streamlit adalah pustaka Python yang open source untuk memudahkan membuat dan berbagi aplikasi web yang indah dan sesuai kebutuhan untuk machine learning dan data science\[10]. Hanya dalam beberapa menit, sehingga memudahkan pengembang untuk fokus pada analisis dan visualisasi data mereka. ## 2. Langkah Installl Streamlit ``` python -m venv envku ``` Activate: ``` source envku/bin/activate ``` 1. Set up your Python development environment. 2. Run:`pip install streamlit` 3. Validate the installation by running our Hello app:`streamlit hello` 4. Jump to our [Basic concepts](https://docs.streamlit.io/get-started/fundamentals/main-concepts).

``` streamlit hello ```

``` streamlit run app.py ``` ## 3. Membuat Aplikasi Dasar Streamlit PASTIKAN CARA DI ATAS TELAH DILAKUKAN..

#### Langkah 2: Membuat Aplikasi Dasar 1. **Buat file Python** baru (misalnya, `app.py, bebas menggunakan apa, asalkan ada ekstensi .py`). 2. Tulis kode berikut untuk membuat aplikasi dasar. **Contoh kode `app.py`:** Buat statment paling atas file, import sesuai kebutuhan project..

Pada praktek Selanjutnya kita akan menampilkan **dataframe**, silahkan membuat file dengan nama app.py seperti dibawah ini.

``` st.write(df) ```

Setelah selesai menulis code di `app.py`. Sekarang, untuk menjalankan aplikasi **Streamlit**, buka terminal, arahkan ke direktori tempat file `app.py` disimpan ```bash streamlit run app.py ``` ## 3.1 Elemen Text Di **Streamlit**, ada berbagai elemen teks yang memungkinkan Anda menampilkan informasi dengan cara yang lebih menarik dan interaktif. #### 1. **`st.title()`** Menampilkan judul utama aplikasi. Biasanya digunakan untuk memberi tahu pengguna tentang nama aplikasi atau halaman. **Contoh:** ```python import streamlit as st st.title('Selamat Datang di Aplikasi Streamlit!') ``` **Output**: Ini akan menampilkan teks yang lebih besar dan tebal sebagai judul utama. #### 2. **`st.header()`** Menampilkan teks sebagai header, biasanya digunakan untuk membagi aplikasi ke dalam bagian-bagian berbeda. Ini sedikit lebih kecil dari judul (`st.title()`). **Contoh:** ```python st.header('Bagian 1: Pendahuluan') ``` **Output**: Teks yang sedikit lebih kecil dari judul utama. #### 3. **`st.subheader()`** Menampilkan teks sebagai subheader, yang biasanya lebih kecil daripada header tetapi masih memberikan penekanan pada bagian tertentu. **Contoh:** ```python st.subheader('Subbagian 1: Data Pengguna') ``` **Output**: Menampilkan teks lebih kecil dari header, tetapi tetap lebih besar dari teks biasa.

#### 4. **`st.caption()`** Menampilkan teks sebagai keterangan yang lebih kecil dan tidak terlalu mencolok. Berguna untuk memberikan penjelasan tambahan atau catatan kaki. **Contoh:** ```python st.caption('Data ini hanya untuk tujuan demonstrasi.') ``` **Output**: Menampilkan teks kecil di bawah elemen lainnya.

#### 5. **`st.code()`** Menampilkan potongan kode dengan format yang lebih baik, berguna jika Anda ingin mendemonstrasikan kode Python atau bahasa lain. **Contoh:** ```python st.code('import pandas as pd') ``` **Output**: Menampilkan kode dengan gaya font monospace.

#### 6. **`st.text()`** Menampilkan teks biasa tanpa format khusus. Ini akan menampilkan teks secara langsung seperti yang ditulis dalam kode. **Contoh:** ```python st.text('Ini adalah teks biasa tanpa format atau penekanan.') ``` **Output**: Teks biasa tanpa pemformatan khusus.

#### 7. **`st.latex()`** Menampilkan ekspresi matematika menggunakan LaTeX. Ini sangat berguna jika Anda ingin menampilkan rumus matematis di aplikasi Anda. **Contoh:** ```python st.latex(r' y = mx + b ') ``` **Output**: Menampilkan rumus matematika dengan format yang benar menggunakan LaTeX.

#### 8. **`st.markdown()`** Menampilkan teks dengan sintaks Markdown, yang memungkinkan Anda untuk menambahkan pemformatan lebih lanjut, seperti huruf tebal, miring, tautan, gambar, dan lainnya. **Contoh:** ```python st.markdown('**Teks Tebal** dan _Teks Miring_ serta [Tautan](https://streamlit.io)') ``` **Output**: Menampilkan teks dengan format Markdown, termasuk **huruf tebal**, *huruf miring*, dan tautan yang dapat diklik.

#### 9. **`st.divider()`** Menambahkan pembatas visual berupa garis horizontal. Ini membantu membagi aplikasi menjadi bagian-bagian yang terpisah. **Contoh:** ```python st.divider() ``` **Output**: Menampilkan garis horizontal yang membagi tampilan aplikasi.

{% hint style="warning" %} (Kumpulan Icon) {% endhint %} ## 4. Menampilkan Data a. API Kita dapat menampilkan data menggunakan API pakai `requests`, lalu **tampilkan** dengan `st.write()`, `st.dataframe()`

**b. Menampilkan Data dari File (CSV, Excel, dll.)** **Bisa upload file** lalu **tampilkan datanya**.

C. Menggunakan `st.write()`

D. Menggunakan dataFrame random NP

## 5. File Metric ### Penjelasan: {% hint style="info" %} `st.metric()` di Streamlit digunakan untuk **menampilkan angka penting** (seperti KPI, statistik, progress) dalam bentuk **kotak kecil**. {% endhint %}

### Preview code:

## 6. Menampilkan Grafik **Beberapa Perintah Visualisasi di Streamlit** ### 6.1 Line Chart - `st.line_chart()` Menampilkan grafik garis.

Preview code:

### 6.2 Bar Chart - `st.bar_chart()` Grafik batang ``` st.bar_chart(data) ```

### 6.3 Altair Chart - `st.altair_chart()`

### 6.4 Map - `st.map()` Menampilkan peta titik koordinat.

### 6.5 Visualisasi `st.plotly_chart()`

Preview Code:

## 7. Input Form | Fungsi Streamlit | Deskripsi Singkat | | ----------------------------- | ------------------------------------ | | **`st.text_input()`** | Input teks pendek | | **`st.text_area()`** | Input teks panjang (textarea) | | **`st.number_input()`** | Input angka (integer / float) | | **`st.date_input()`** | Pilih tanggal | | **`st.time_input()`** | Pilih waktu (jam/menit) | | **`st.selectbox()`** | Dropdown pilihan satu | | **`st.multiselect()`** | Dropdown pilihan banyak | | **`st.radio()`** | Pilih salah satu opsi (radio button) | | **`st.checkbox()`** | Centang pilihan (true/false) | | **`st.slider()`** | Slider angka | | **`st.select_slider()`** | Slider pilihan kustom (teks) | | **`st.file_uploader()`** | Upload file | | **`st.camera_input()`** | Ambil foto dari kamera | | **`st.color_picker()`** | Pilih warna | | **`st.form()`** | Membuat form input (grouped submit) | | **`st.form_submit_button()`** | Tombol submit untuk form | *** ## Penjelasan Tambahan * **`st.form()`** → untuk mengelompokkan beberapa input dalam satu form. * **`st.form_submit_button()`** → tombol "Submit" khusus untuk `st.form`. * **`st.file_uploader()`** → mendukung upload gambar, PDF, CSV, dsb. * **`st.camera_input()`** → langsung ambil foto dari kamera device pengguna (HP/laptop). * **`st.select_slider()`** → slider tetapi isi pilihannya teks, bukan angka. *** ## Contoh Mini Semua Input

*** Preview Code:

## 8. Menampilkan Media Di Streamlit, sangat bisa menampilkan berbagai jenis media, seperti gambar, video, audio, dan lainnya, menggunakan beberapa fungsi bawaan. #### 1. **Menampilkan Gambar** Untuk menampilkan gambar, kamu bisa menggunakan fungsi `st.image()`.

* `caption` untuk memberikan keterangan pada gambar. * `use_column_width=True` untuk menyesuaikan gambar dengan lebar kolom. *** #### 2. **Menampilkan Video** Untuk menampilkan video, gunakan `st.video()`. Kamu bisa menampilkan video yang ada di file lokal atau dari URL (misalnya YouTube).

*** #### 3. **Menampilkan Audio** Untuk menampilkan audio, gunakan `st.audio()`. Audio bisa di-upload dari file lokal atau menggunakan URL.

*** #### 4. **Menampilkan File (PDF, CSV, dsb)** Untuk menampilkan atau mengunduh file seperti PDF, CSV, atau file lainnya, gunakan `st.file_uploader()` untuk mengupload file dan `st.download_button()` untuk menyediakan tombol unduh.

**Upload File:**

```python ``` **Menampilkan PDF:** ```python import streamlit as st from PyPDF2 import PdfReader # Menampilkan PDF uploaded_pdf = st.file_uploader("Pilih file PDF", type=["pdf"]) if uploaded_pdf is not None: reader = PdfReader(uploaded_pdf) text = "" for page in reader.pages: text += page.extract_text() st.write(text) ``` *** #### 5. **Menampilkan HTML** Untuk menampilkan HTML atau konten yang lebih kaya, kamu bisa menggunakan `st.markdown()` dengan opsi `unsafe_allow_html=True`. ```python import streamlit as st # Menampilkan HTML langsung html_code = """

Selamat datang di Aplikasi Streamlit!

Ini adalah paragraf HTML yang dapat diproses oleh Streamlit.

""" st.markdown(html_code, unsafe_allow_html=True) ``` *** ## 9. Menampilkan Layout dan Container Layout dan container di **Streamlit** memungkinkan mengatur elemen-elemen dalam aplikasi sehingga lebih terstruktur dan lebih interaktif. Dengan menggunakan berbagai elemen layout, dgn bisa mengontrol tampilan antarmuka aplikasi untuk menampilkan konten dengan cara yang lebih rapi dan responsif. *** ### 1. **Menampilkan Layout Menggunakan Kolom** Dengan menggunakan `st.columns()`, kamu bisa menampilkan beberapa elemen secara berdampingan dalam kolom. #### Contoh: Menggunakan Kolom untuk Menampilkan Elemen Secara Berdampingan

#### Penjelasan: * `st.columns(2)` membuat dua kolom. * Kamu bisa menambahkan elemen apa saja ke dalam kolom menggunakan `with col1` dan `with col2`.

*** ### 2. **Menggunakan `st.expander()` untuk Konten yang Bisa Dilipat** Fitur `st.expander()` memungkinkan kamu untuk menyembunyikan dan menampilkan konten dengan cara melipatnya. Ini cocok untuk menampilkan informasi yang panjang atau opsional. #### Contoh: Menambahkan Expander

#### Penjelasan: * Konten yang berada di dalam `st.expander()` akan disembunyikan sampai pengguna mengklik untuk memperluasnya.

*** ### 3. **Layout Menggunakan `st.container()`** `st.container()` digunakan untuk mengelompokkan elemen-elemen dalam satu area. Meskipun tidak mengubah tampilan secara langsung, ini berguna untuk mengelompokkan elemen-elemen dalam aplikasi. #### Contoh: Menggunakan Container ```python import streamlit as st # Membuat container container = st.container() # Menambahkan elemen ke dalam container with container: st.header("Konten di dalam Container") st.write("Ini adalah elemen-elemen yang ada dalam container.") st.button("Tombol dalam Container") ``` #### Penjelasan: * `st.container()` digunakan untuk mengelompokkan elemen-elemen yang ingin ditampilkan bersama dalam satu blok. *** ### 4. **Menggunakan Sidebar** Untuk membuat antarmuka yang lebih interaktif dan menyediakan elemen-elemen tambahan, kamu bisa menggunakan **Sidebar**. Semua elemen yang ditempatkan di dalam sidebar tidak akan mempengaruhi area utama aplikasi. #### Contoh: Sidebar ```python import streamlit as st # Menambahkan elemen ke Sidebar st.sidebar.header("Ini Sidebar") st.sidebar.radio("Pilih Opsi", ["Opsi 1", "Opsi 2", "Opsi 3"]) # Konten utama st.title("Konten Utama") st.write("Ini adalah konten utama yang ditampilkan di layar.") ``` #### Penjelasan: * `st.sidebar` digunakan untuk membuat elemen-elemen yang ditampilkan di sidebar, terpisah dari tampilan utama aplikasi.

```python import streamlit as st # Menambahkan elemen navigasi di Sidebar st.sidebar.header("Navigasi") selection = st.sidebar.radio("Pilih Halaman", ["Beranda", "Tentang", "Kontak"]) # Konten berdasarkan pilihan if selection == "Beranda": st.title("Beranda") st.write("Ini adalah halaman beranda.") elif selection == "Tentang": st.title("Tentang") st.write("Ini adalah halaman tentang.") else: st.title("Kontak") st.write("Ini adalah halaman kontak.") # Menambahkan elemen navigasi dengan dropdown di Sidebar st.sidebar.header("Navigasi") selection = st.sidebar.selectbox("Pilih Halaman", ["Beranda", "Tentang", "Galeri", "Kontak"]) # Konten berdasarkan pilihan if selection == "Beranda": st.title("Beranda") st.write("Ini adalah halaman beranda.") elif selection == "Tentang": st.title("Tentang") st.write("Ini adalah halaman tentang.") elif selection == "Galeri": st.title("Galeri") st.write("Ini adalah halaman galeri.") else: st.title("Kontak") st.write("Ini adalah halaman kontak.") # Menambahkan tombol untuk navigasi di Sidebar st.sidebar.header("Navigasi") if st.sidebar.button("Beranda"): st.title("Beranda") st.write("Ini adalah halaman beranda.") elif st.sidebar.button("Tentang"): st.title("Tentang") st.write("Ini adalah halaman tentang.") elif st.sidebar.button("Kontak"): st.title("Kontak") st.write("Ini adalah halaman kontak.") # Menambahkan tautan navigasi di Sidebar st.sidebar.header("Navigasi") st.sidebar.markdown("[Beranda](#beranda)") st.sidebar.markdown("[Tentang](#tentang)") st.sidebar.markdown("[Kontak](#kontak)") # Konten halaman berdasarkan tautan st.title("Beranda") st.write("Ini adalah halaman beranda.") st.title("Tentang") st.write("Ini adalah halaman tentang.") st.title("Kontak") st.write("Ini adalah halaman kontak.") ```