Aplikasi Interaktif Berbasis Web

1,637 Views

Aplikasi Interaktif Berbasis Web – saat ini menjadi pilihan menarik selain berbasis mobile device. Keunggulan aplikasi interaktif berbasis web adalah tidak perlu install aplikasi khusus dan depencies jlimet serta setting path sana sini. Hanya bermodalkan peramban dan kuota internet, kita bisa mendayagunakan cloud computing untuk membuat aplikasi berbasis machine learning.

Sebelumnya kita udah membahas RShiny untuk membuat aplikasi berbasis web untuk text cleaning, ternyata Python juga tidak kalah bagusnya lho! Kita kenalan dulu dangan Dash. Dash adalah sebuah framework python yang biasa digunakan untuk membangun sebuah aplikasi web, khususnya dashboard. Dash ditulis dengan menggunakan 3 framework terkenal yaitu Flask, Plotly.js dan React.js.

Sebelum saya mengenal dash, untuk membuat demo terhadap client pilihannya ada 2 yaitu menggunakan GUI Desktop seperti TKinter, PySimpleGUI atau hanya berbasis comand line. Namun kalau clientnya jauh apalagi masih dalam tahap developing yang butuh setting dan tuning berkelanjutan tentu membuat aplikasi seperti itu tidak bagus. Solusi nya adalah cloud computing yang support dengan python seperti herrokuapp.

Dash merupakan open-source framework untuk membangun interface visualisasi data. Hadir pada tahun 2017 di Python Library. Hal menarik dari karena kemampuannya membuat interaktif web-application hanya dengan menggunakan bahasa Python. Pengguna tidak perlu repot dengan CSS, Javascript, ataupun HTML seperti pengembangan web pada umumnya, semua kegiatan bisa dilakukan hanya dengan Python. Kalian bisa mulai dari cara install serta simple demo di https://dash.plotly.com/.

3 Fondasi dari Dash: Components, Graphs, Callback

Contents

1 3 Fondasi dari Dash: Components, Graphs, Callback
2 Dasar Aplikasi Berbasis Web
- - 2.0.1 Component untuk digital image processing ataupun graph library

Dash Components

Dash Components digunakan sebagai penghubung antar user dengan data. Ada banyak component yang bisa kita gunakan sesuai kebutuhan aplikasi. seperti textfield, dropdown, textarea, https://dash.plotly.com/dash-html-components

Graphs

Graphs akan menampilkan berbagai bentuk visualisasi data. Terdapat beragam graphs yang bisa kamu akses di Plotly Python Open Source Graphing Library. Plot yang bisa dipakai dalam Dash yaitu scatter plot, box plot, displot, log plot, violin plot, ternary plot, tree-plot, streamline plot, dot plot, dan masih banyak lagi plot serta berbagai macam bentuk grafik yang bisa digunakan. Bahkan featurnya mirip sekali dengan library matplotlib

Callback

Callback atau action listener merupakan mekanisme antara input dan output yang diharapkan ketika terjadi event/pemicu tertentu. Misalkan saja kita menggerakan slider, maka input berupa nilai angka dan target yang diharapkan bisa saja menampilkan gambar lebih besar.

Dasar Aplikasi Berbasis Web

Bila kalian telah membaca buku saya yang menggunakan anaconda untuk installernya, maka cukup gunakan perintah pip untuk melakukan install dash.

pip install dash

Tulis saja kode dibawah ini dan simpan dengan app.py

# -*- coding: utf-8 -*-

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Untuk menjalankannya bila kalian menggunakan spyder, cukup tekan F5 saja, akan tampil pesan seperti berikut

Dash is running on http://127.0.0.1:8050/

 * Serving Flask app 'app' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on

Kita browser sesuai alamat dan port diatas http://127.0.0.1:8050/.

Component untuk digital image processing ataupun graph library

Lebih lanjut bila kalian ingin mendalami component dash https://plotly.com/graphing-libraries/. Ini adalah contoh simple dari image processing menggunakan dash https://dash-gallery.plotly.host/dash-image-processing/ dengan kodenya https://github.com/plotly/dash-image-processing

ref:

Algoritma Data Science School

https://github.com/plotly/dash