├── .gitignore ├── README.md ├── images ├── Asia GDP filtered.png ├── Asia GDP line-chart.png └── Asia GDP.png ├── main.py ├── requirements.txt └── setup.sh /.gitignore: -------------------------------------------------------------------------------- 1 | venv 2 | __pycache__ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Apa Ini 2 | 3 | Sebuah repository untuk mengenalkan git dan streamlit pada tokoh fiksi `Faizah` dan `Rizki`, dua orang data analyst di kantor desa Sukamaju. 4 | 5 | # Clone Project 6 | 7 | Perintah berikut akan meng-clone repository ini ke komputer `Faizah` dan `Rizki`: 8 | 9 | ```bash 10 | git clone git@github.com:goFrendiAsgard/git-streamlit-tutorial.git 11 | ``` 12 | 13 | # Melakukan Setup 14 | 15 | Supaya tidak menjalankan banyak perintah berkali-kali, maka data engineer di tempat `Faizah` dan `Rizki` sudah mempersiapkan seubah script `setup.py`. 16 | 17 | Untuk menjalankan `setup.py`, maka `Faizah` dan `Rizki` perlu menjalankan: 18 | 19 | ```bash 20 | source ./setup.sh 21 | ``` 22 | 23 | Perintah di atas akan: 24 | 25 | - Membuat folder `venv` jika belum ada. Folder `venv` akan berisi python virtual environment untuk repository ini 26 | - Mengaktifkan python virtual environment di folder `venv` 27 | - Menginstall `streamlit` dan `plotly` ke dalam python virtual environment 28 | - Menyampaikan kata sambutan dari Bapak Kepala Desa Sukamaju. 29 | 30 | # Menjalankan Aplikasi Streamlit 31 | 32 | Untuk menjalankan aplikasi streamlit, maka `Faizah` dan `Rizki` perlu menjalankan perintah berikut: 33 | 34 | ```bash 35 | streamlit run main.py 36 | # Jika Faizah dan Rizki menggunakan Windows dan WSL, maka sebaiknya menjalankan perintah 37 | # streamlit run main.py --server.headless true 38 | ``` 39 | 40 | Hasilnya kurang lebih begini: 41 | 42 | ![](images/Asia%20GDP.png) 43 | 44 | # Kode Streamlit 45 | 46 | Kode yang kita punya relatif sederhana 47 | 48 | ```python 49 | import streamlit as st 50 | import plotly.express as px 51 | 52 | # Load Asia's GDP 53 | df = px.data.gapminder().query("continent=='Asia'") 54 | 55 | st.title('Asia GDP from 1952-2007') 56 | st.table(df) 57 | ``` 58 | 59 | Pertama kita perlu mengimport library `streamlit` dan `plotly.express`. Berdasarkan kabar terbaru, mengimport Python package masih belum dikenakan bea cukai, jadi kita bisa mengimport semua package yang kita butuhkan secara gratis. 60 | 61 | Silahkan menjelajahi [pypi.org](http://pypi.org) untuk mencari package yang diperlukan. 62 | 63 | Setelah melakukan import, langkah berikutnya adalah mengambil data GDP negara Asia. Data ini merupakan data bawaan dari package plotly yang diperoleh secara legal, tidak melalui ransomware. Adapun data yang kita dapatkan akan berbentuk pandas dataframe. 64 | 65 | Terakhir, kita menampilkan komponen-komponen yang kita perlukan. 66 | 67 | - `st.title` akan menampilkan judul 68 | - `st.table` akan menampilkan data frame dalam bentuk tabel. 69 | 70 | # Tugas dari Pak Kades 71 | 72 | Tak seperti kebanyakan boomer pada umumnya, Pak Kades Sukamaju sangat akrab dengan teknologi, AI, blockchain, web3, dan anime. Pak Kades bahkan mengikuti penayangan `Kimetsu no Yaiba`, dan kerap mengadakan acara nobar di balai desa. 73 | 74 | Pak Kades merasa perlu untuk mengetahui data-data GDP negara tetangga, tapi dia tidak ingin mendapatkan informasi yang terlalu banyak. 75 | 76 | Menurut Pak Kades, ada 2 hal yang perlu dilakukan di sini: 77 | 78 | - Menambahkan filter berdasarkan benua, supaya data yang ditampilkan tidak terlalu banyak. 79 | - Menampilkan data dalam bentuk line chart, supaya komparasi beberapa negara bisa dibaca dengan lebih mudah. 80 | 81 | Pak Kades mempercayakan tanggung jawab besar ini pada dua anak muda Gen-z yang sangat berbakat, `Faizah` dan `Rizki`. 82 | 83 | Pak Kades juga menyuruh `Faizah` dan `Rizki` untuk membuka [dokumentasi streamlit](https://docs.streamlit.io/library/api-reference). Ia yakin, literasi kedua anak muda itu akan bisa membuka cakrawala masa depan Desa Sukamaju. 84 | 85 | ## Filter Faizah 86 | 87 | Faizah mengawali pekerjaannya dengan mengucap Bismillah, dan membuat sebuah branch baru: 88 | 89 | ```bash 90 | git checkout -b feat/per-continent-filter 91 | ``` 92 | 93 | Tak butuh lama bagi Faizah untuk menyelesaikan tugas Pak Kades. Dengan cekatan, Faizah memodifikasi `main.py` menjadi seperti berikut: 94 | 95 | ```python 96 | import streamlit as st 97 | import plotly.express as px 98 | 99 | continent = st.selectbox(label='Benua', options=['Asia', 'Africa', 'Americas', 'Europe', 'Oceania']) 100 | 101 | # Load Asia's GDP 102 | df = px.data.gapminder().query(f"continent=='{continent}'") 103 | 104 | st.title(f'{continent} GDP from 1952-2007') 105 | st.table(df) 106 | ``` 107 | 108 | Untuk menguji apakah pekerjaannya sudah berjalan dengan baik, maka me-refresh browser nya, dan mendapatkan tampilan seperti ini. 109 | 110 | ![](images/Asia%20GDP%20filtered.png) 111 | 112 | Faizah melakukan scroll ke bawah dan memastikan ada Indonesia di benua Asia. Lalu Faizah berseru "Wah, ada Indonesia". 113 | 114 | Setelah puas dengan hasil pekerjaannya, Faizah melakukan push ke github 115 | 116 | ```bash 117 | git add . -A 118 | git commit -m 'Menambah filter' 119 | git push -u origin feat/per-continent-filter 120 | ``` 121 | 122 | Faizah lantas membuat sebuah pull request di github dan meminta review/approval dari Pak Kades. 123 | 124 | # Visualisasi Rizki 125 | 126 | Di saat yang sama, Rizki juga mengerjakan tugas Pak Kades dengan penuh amanah. 127 | 128 | Seperti Faizah, Rizki memulai tugasnya dengan membuat sebuah branch 129 | 130 | ```bash 131 | git checkout -b feat/line-chart-visualization 132 | ``` 133 | 134 | Sembari menyesap secangkir kopi hitam yang lebih pahit dari kehidupan, Rizki mengertakkan kedua tangannya. Jari-jarinya menari anggun di atas keyboard, menuangkan imajinasinya dalam barisan kode nan elegan. 135 | 136 | ```python 137 | import streamlit as st 138 | import plotly.express as px 139 | 140 | # Load Asia's GDP 141 | df = px.data.gapminder().query("continent=='Asia'") 142 | 143 | st.title('Asia GDP from 1952-2007') 144 | st.plotly_chart(px.line( 145 | data_frame=df, x='year', y='gdpPercap', color='country' 146 | )) 147 | 148 | st.title('Asia GDP from 1952-2007') 149 | st.table(df) 150 | ``` 151 | 152 | Rizki menatap layar monitor dengan sedih, ternyata GDP Indonesia rendah sekali. Pantas saja, gajinya bulan ini belum cair. 153 | 154 | ![](images/Asia%20GDP%20line-chart.png) 155 | 156 | Tapi Rizki yakin, di tangan pemuda-pemuda berbakat sepertinya, nasib Indonesia akan lebih baik. Rizki kemudian melakukan push ke github dan membuat sebuah pull request. 157 | 158 | ```bash 159 | git add . -A 160 | git commit -m 'Visualisasi line chart' 161 | git push -u origin feat/line-chart-visualization 162 | ``` 163 | 164 | # Code Review 165 | 166 | Pak Kades terharu melihat pekerjaan Faizah dan Rizki yang sangat baik. Benar-benar sesuai dengan butir-butir Pancasila dan wawasan kebangsaan. 167 | 168 | Dengan tersenyum, Pak Kades memberikan komentar `LGTM`, melakukan approval, dan melakukan merge ke branch `main`. 169 | 170 | Kini kode di branch main tampak seperti berikut: 171 | 172 | ```python 173 | import streamlit as st 174 | import plotly.express as px 175 | 176 | continent = st.selectbox(label='Benua', options=['Asia', 'Africa', 'Americas', 'Europe', 'Oceania']) 177 | 178 | # Load Asia's GDP 179 | df = px.data.gapminder().query(f"continent=='{continent}'") 180 | 181 | st.title('Asia GDP from 1952-2007') 182 | st.plotly_chart(px.line( 183 | data_frame=df, x='year', y='gdpPercap', color='country' 184 | )) 185 | 186 | st.title(f'{continent} GDP from 1952-2007') 187 | st.table(df) 188 | ``` 189 | 190 | Sebuah pengejawantahan sikap gotong royong yang terlihat nyata. Pekerjaan Faizah dan Rizki saling melengkapi satu sama lain. Indahnya kolaborasi dan pluralisme! 191 | 192 | # Mengubah Caption 193 | 194 | Rizki dan Faizah masing-masing melakukan pull ke branch main di komputer lokal masing-masing. 195 | 196 | Rizki meras ada yang kurang oke dengan caption yang ia buat. Bukankah dashboard desa Sukamaju ini bersifat global? Tidak hanya regional di skala Asia? Maka Rizki membuat sebuah branch dan pull request untuk memperbaiki caption yang ia buat: 197 | 198 | ```bash 199 | git checkout -b fix/line-chart-caption 200 | ``` 201 | 202 | Sama seperti sebelumnya, Rizki melakukan modifikasi kodenya 203 | 204 | ```python 205 | import streamlit as st 206 | import plotly.express as px 207 | 208 | continent = st.selectbox(label='Benua', options=['Asia', 'Africa', 'Americas', 'Europe', 'Oceania']) 209 | 210 | # Load Asia's GDP 211 | df = px.data.gapminder().query(f"continent=='{continent}'") 212 | 213 | st.title(f'{continent} GDP from 1952-2007') 214 | st.plotly_chart(px.line( 215 | data_frame=df, x='year', y='gdpPercap', color='country' 216 | )) 217 | 218 | st.title(f'{continent} GDP from 1952-2007') 219 | st.table(df) 220 | ``` 221 | 222 | Rizki lantas membuat PR dan meminta Pak Kades yang tengah tidur siang untuk melakukan review/merge. 223 | 224 | Pak Kades lantas meminta Rizki dan Faizah untuk melakukan pull di branch main. 225 | 226 | ```bash 227 | git checkout main 228 | git pull origin main 229 | ``` 230 | 231 | # Awal Mula Sebuah Konflik 232 | 233 | Puas dengan pekerjaannya, Rizki membuat sebuah PR lain, untuk memeriahkan dashboard. Nama branch yang dia buat adalah `feat/rizki-celebration` dan membuat pull request. 234 | 235 | ```python 236 | import streamlit as st 237 | import plotly.express as px 238 | 239 | continent = st.selectbox(label='Benua', options=['Asia', 'Africa', 'Americas', 'Europe', 'Oceania']) 240 | 241 | # Load Asia's GDP 242 | df = px.data.gapminder().query(f"continent=='{continent}'") 243 | 244 | st.title(f'{continent} GDP from 1952-2007') 245 | st.plotly_chart(px.line( 246 | data_frame=df, x='year', y='gdpPercap', color='country' 247 | )) 248 | 249 | st.title(f'{continent} GDP from 1952-2007') 250 | st.table(df) 251 | st.balloons() 252 | ``` 253 | 254 | Di saat yang sama, Faizah ternyata memiliki inisiatif yang sama. Namun berbeda dari Rizki, Faizah tahu bahwa streamlit sudah diakuisi snowflake, sehingga ia memutuskan untuk menggunakan `st.snow()`, bukan `st.balloons()`. 255 | 256 | Faizah membuat sebuah branch `feat/faizah-celebration` dan membuat pull request. 257 | 258 | 259 | ```python 260 | import streamlit as st 261 | import plotly.express as px 262 | 263 | continent = st.selectbox(label='Benua', options=['Asia', 'Africa', 'Americas', 'Europe', 'Oceania']) 264 | 265 | # Load Asia's GDP 266 | df = px.data.gapminder().query(f"continent=='{continent}'") 267 | 268 | st.title(f'{continent} GDP from 1952-2007') 269 | st.plotly_chart(px.line( 270 | data_frame=df, x='year', y='gdpPercap', color='country' 271 | )) 272 | 273 | st.title(f'{continent} GDP from 1952-2007') 274 | st.table(df) 275 | st.snow() 276 | ``` 277 | 278 | Pak Kades melakukan approval dan merge pada PR Rizki, dan sebuah hal yang tak didugapun terjadi. Muncul conflict, sehingga pull request Faizah tidak bisa di merge. 279 | 280 | Bagaimanakah Faizah me resolve semua ini? Akankan pertemanannya dengan Rizki berakhir? 281 | 282 | # Penyelesaian Konflik 283 | 284 | Faizah tahu, bahwa konflik ini tidak sulit untuk diselesaikan. Faizah adalah seorang profesional yang sudah berkarya sejak masih dalam kandungan. 285 | 286 | Maka Faizah berpindah ke branch main, melakukan merge ke branch nya sendiri, dan me-resolve konflik yang ada. 287 | 288 | ```bash 289 | git checkout main 290 | git pull origin main 291 | git checkout feat/faizah-celebration 292 | git merge main 293 | ``` 294 | 295 | Di VSCode Faizah, muncul beberapa opsi di area konflik, dan dengan bijaksana, ia memilih `Accept both Change`. 296 | 297 | Faizah lantas meng-update PR nya. 298 | 299 | ```bash 300 | git add . -A 301 | git commit -m 'Menyelesaikan konflik' 302 | git push -u origin feat/faizah-celebration 303 | ``` 304 | 305 | Pak Kades begitu bangga atas inisiatif Faizah. Ia pun melakukan review, memberikan approval, dan melakukan merge request. 306 | 307 | Lagi-lagi Faizah dan Rizki melakukan pull di branch main. 308 | -------------------------------------------------------------------------------- /images/Asia GDP filtered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goFrendiAsgard/git-streamlit-tutorial/402d9005a44674dbbdfc14527cfb9e65cd68140c/images/Asia GDP filtered.png -------------------------------------------------------------------------------- /images/Asia GDP line-chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goFrendiAsgard/git-streamlit-tutorial/402d9005a44674dbbdfc14527cfb9e65cd68140c/images/Asia GDP line-chart.png -------------------------------------------------------------------------------- /images/Asia GDP.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goFrendiAsgard/git-streamlit-tutorial/402d9005a44674dbbdfc14527cfb9e65cd68140c/images/Asia GDP.png -------------------------------------------------------------------------------- /main.py: -------------------------------------------------------------------------------- 1 | import streamlit as st 2 | import plotly.express as px 3 | 4 | continent = st.selectbox(label='Benua', options=['Asia', 'Africa', 'Americas', 'Europe', 'Oceania']) 5 | 6 | # Load Asia's GDP 7 | df = px.data.gapminder().query(f"continent=='{continent}'") 8 | 9 | st.title(f'{continent} GDP from 1952-2007') 10 | st.plotly_chart(px.line( 11 | data_frame=df, x='year', y='gdpPercap', color='country' 12 | )) 13 | 14 | st.balloons() 15 | 16 | st.title(f'{continent} GDP from 1952-2007') 17 | st.table(df) 18 | 19 | st.snow() 20 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | pandas==2.0.2 2 | plotly==5.15.0 3 | streamlit==1.23.1 4 | -------------------------------------------------------------------------------- /setup.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | if [ ! -d venv ] 4 | then 5 | python -m venv venv 6 | fi 7 | source venv/bin/activate 8 | 9 | pip install -r requirements.txt 10 | 11 | echo "Sambutan Kades Sukamaju: Now you are ready!" --------------------------------------------------------------------------------