ในโพสต์นี้เราจะพูดถึงภาพรวมโมดูล KPI – Dashboard จากงาน OCA Days 2020 ที่จัดขึ้นเมื่อวันที่ 15 – 16 ตุลาคมที่ผ่านมานี้นะครับ ซึ่งปีนี้จัดกันทางออนไลน์ สำหรับเนื้อหานี้มีผู้พูดคือคุณ Eric Tobella นาทีที่ 4.51.35 เป็นต้นไปครับ

KPI คืออะไร?

กล่าวโดยสรุปคือ เราสามารถนำแดชบอร์ดมาใช้แสดงมาตรวัดต่าง ๆ ที่เราต้องการได้แบบเรียลไทม์ เช่น ถ้าเราต้องการรู้จำนวนปัญหาที่เกิดขึ้น ณ ขณะใดขณะหนึ่ง ที่มอบหมายให้กับเจ้าหน้าที่คนใดคนหนึ่งก็สามารถนำแดชบอร์ดนั้นมาแสดงบนหน้าจอ (ผู้พูดกล่าวถึงการแสดงบนหน้าจอขนาดใหญ่ที่ทีมงานทุกคนสามารถมองเห็นได้พร้อม ๆ กัน)

Spanish	English
Incidencias	Incidents
Nuevas	New
Preventivo	Preventive

สองแถวล่างแสดงถึงชื่อพนักงานที่รับผิดชอบ และจำนวนปัญหาที่ยังเปิดอยู่

การทำแดชบอร์ดนั้นสามารถใช้ MIS Builder Module ทำได้ด้วยเช่นกัน แต่ยังไม่สะดวกเท่าที่ควร จึงได้พัฒนาโมดูลนี้ขึ้นมา โดยแสดงค่ารวม (aggregated values) ได้ แสดงกราฟต่าง ๆ ได้ และที่สำคัญที่สุดคือ ความเป็นเรียลไทม์

ตัวอย่างแดชบอร์ดแสดงยอดขาย แยกรายเขต

องค์ประกอบต่าง ๆ ของแดชบอร์ด (ที่ควรมี)

• เราสร้าง KPI ขึ้นมาเพื่อวัดความมีประสิทธิภาพของสิ่งต่าง ๆ ที่เราอยากรู้ เช่น จำนวนยอดขาย ณ ขณะนี้ เทียบกับยอดขายทั้งหมดของปีนี้ ฯลฯ
• ซึ่งสามารถนำมาแสดงบนแดชบอร์ดได้ในรูปแบบต่าง ๆ เช่น กราฟ มาตรวัด ฯลฯ

การทำแดชบอร์ดด้วยวิธีอื่น ๆ

เนื่องจาก Odoo นั้นมีการเก็บข้อมูลบน PostgreSQL ดังนั้น การทำแดชบอร์ดด้วยวิธี (โปรแกรม) อื่น ๆ จึงเป็นไปได้ง่าย เช่น Tableau, PowerBI, Excel, หรือแม้แต่บน Jupyter Notebook ซึ่งสามารถดึงข้อมูลจาก SQL มาแสดงได้โดยตรง

• Tableau: ข้อดีคือง่าย สวย เร็ว แต่ราคาสูง

• PowerBI: มีทั้งแบบฟรีและไม่ฟรี ข้อดีคือง่าย เร็ว สวย ยืดหยุ่นมากโดยเฉพาะการเขียนโค๊ด Python หรือ R

• Excel: ทรงพลังเหมือน PowerBI ซึ่งมี Engine ข้อมูลแบบเดียวกัน (ทั้ง PowerBI และ Excel นั้นสร้างโดยไมโครซอฟท์) ซึ่งมีหลายความเห็นในการทำ Dashboard ของ Excel บ้างก็ว่า ไม่สวย ทำยาก บ้างก็ว่า ซื้อเทมเพลทสวย ๆ มาดัดแปลงเอาก็ได้ ทั้งนี้ทั้งนั้น ถ้าเราจ่ายค่าลิขสิทธิ์ให้กับ Excel อยู่แล้วก็ไม่มีค่าใช้จ่ายเพิ่มขึ้น

• Programming Languages: นอกจากเครื่องมือสำเร็จรูปที่กล่าวมาข้างต้นแล้ว เรายังสามารถทำแอพแยกออกมาเพื่อเป็น Dashboard โดยเฉพาะได้อีกด้วย ซึ่งความเห็นส่วนตัวผมคิดว่า ใช้ Frontend อื่น เช่น Quasar ผสมกับ Backend อื่น ๆ เช่น FastAPI หรือ Laravel ในฝั่ง PHP ก็เป็นส่วนผสมที่ลงตัวมาก ๆ เนื่องจากความสวยงาม และที่สำคัญคือความสุดแสนสะดวกของ Framework อย่าง Quasar

เรายังสามารถทดสอบสร้าง Interactive Dashboard ก่อนจะ Deploy ได้บน Jupyter Notebook (หรือ Jupyter Lab) ได้อีกด้วย

# ตัวอย่างโค๊ดใน Jupyter Lab

!pip install jupyter-dash

import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

# Build App
app = JupyterDash(__name__)
app.layout = html.Div([
    html.H1("Supermarket Dashboard"),
    dcc.Graph(id='graph'),
    html.Label([
        "colorscale",
        dcc.Dropdown(
            id='colorscale-dropdown', clearable=False,
            value='plasma', options=[
                {'label': c, 'value': c}
                for c in px.colors.named_colorscales()
            ])
    ]),
])
# Define callback to update graph
@app.callback(
    Output('graph', 'figure'),
    [Input("colorscale-dropdown", "value")]
)
def update_figure(colorscale):
    return px.scatter(
        df, x="SHOP_DATE", y="SPEND", color="QUANTITY",
        color_continuous_scale=colorscale,
        render_mode="webgl", title="Spend Over Time"
    )
# Run app and display result inline in the notebook
app.run_server(mode='inline')

นอกจากนี้ เรายังสามารถ Export ไปบนเว็บแอพได้อีกด้วย (ในตัวอย่างนี้ ผมใช้ FastAPI และ Deploy ไปบน Heroku)

from fastapi import FastAPI, APIRouter
from fastapi.middleware.wsgi import WSGIMiddleware
from fastapi.encoders import jsonable_encoder
from fastapi.responses import JSONResponse

from pydantic import BaseModel

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

import plotly.express as px

import pandas as pd


class Link(BaseModel):
    title: str
    url: str


# Create the Dash application, make sure to adjust requests_pathname_prefix
app_dash = dash.Dash(__name__, requests_pathname_prefix='/dash/')
app_dash.layout = html.Div(children=[
    html.H1(children='SuperAI: Supermarket Dashboard'),
    html.H5(children='''
        แดชบอร์ดข้อมูลซุปเปอร์มาร์เก็ต (โครงการซุปเปอร์เอไอเอนจิเนียร์)
    '''),
    html.P(children='''
        22p24i0146: จักรกฤษณ์
    '''),
    dcc.Graph(id='SpendTimeGraph'),
    html.Label([
        "Color Theme",
        dcc.Dropdown(
            id='colorScale-dropdown', clearable=False,
            value='plasma', options=[
                {'label': c, 'value': c}
                for c in px.colors.named_colorscales()
            ])
    ]),
])


csv_data = "data/supermarket_for_app.csv"
df = pd.read_csv(csv_data)

# Define callback to update graph
@app_dash.callback(
    Output('SpendTimeGraph', 'figure'),
    [Input("colorScale-dropdown", "value")]
)
def update_figure(colorScale):
    return px.scatter(
        df, x="SHOP_DATE", y="SPEND", color="QUANTITY",
        color_continuous_scale=colorScale,
        render_mode="webgl", title="Spend Over Time")


app = FastAPI()


@app.get("/")
def read_root():
    link_list: Links = [{'title': "api-test-routes",
                         'url': "https://fastapi-gitlab.herokuapp.com/docs"},
                        {'title': 'supermarket-dashboard',
                         'url': 'https://fastapi-gitlab.herokuapp.com/dash'},
                        {'title': 'other machine learning endpoints',
                         'url': 'https://ppsmartbot.com/docs'},
                        {'title': 'vue frontend for machine learning apps',
                         'url': 'https://ppsmartbot.com/login'}]
    return JSONResponse(content=jsonable_encoder(link_list))


@app.post('/dialogflow/fulfillment/payment')
def dialogflow_scb_payment(request):
    return {k: v for k, v in request}


# Now mount you dash server into main fastapi application
app.mount("/dash", WSGIMiddleware(app_dash.server))

Odoo Module

คุณ Enric ได้ทดสอบโมดูล KPI Dashboard บน Odoo 12.0 ซึ่งเป็นเวอร์ชั่นล่าสุดของโมดูลนี้ และมีการสร้าง Pull Requests เพื่ออัพเกรดเป็นทั้งเวอร์ชั่น 13.0 และ 14.0

ดังนั้นผมจึงถือโอกาสนี้ลองใช้ Odoo 14.0 เพื่อทดสอบโมดูลนี้ไปด้วยเลย ซึ่งผมได้สร้าง Docker Image ไว้ที่ Docker Hub แล้ว หากต้องการทดสอบ ให้สร้างโฟลเดอร์ชื่อ Custom และใส่โมดูลดังภาพ อิมเมจนี้จะดึงโมดูลที่เป็น Addons ที่อยู่ภายใต้ Folder ‘Custom’ ให้โดยอัตโนมัติ

• cd custom
• git clone https://github.com/OCA/reporting-engine.git
• git checkout 373bb05e

จากนั้นก็ติดตั้งโมดูลอย่างเช่นเคย

ทดสอบโมดูลบน Odoo Version 14.0

นับว่าเป็นโมดูลทำ KPI ที่ดีนะครับ สะดวกและง่ายในการติดตั้งบน Odoo แต่หากต้องการทำหน้า UI/UX ที่สวยขึ้น ยืดหยุ่นมากขึ้นก็น่าจะไปใช้ ReactJS หรือ VueJS น่าจะสะดวกกว่าครับ ซึ่งถ้าลองสร้าง GraphQL ขึ้นมาเป็นเลเยอร์ที่ใช้ติดต่อระหว่างแอพกับดาต้าเบส จะสะดวกสบายสำหรับการทำแดชบอร์ดที่ต้องการการปรับเปลี่ยนบ่อย ๆ หรือลูกค้าที่มีความต้องการใหม่ ๆ อยู่ตลอดเวลา ลองทดสอบ GraphQL ใน OCA ได้ที่ ลิ๊งค์นี้ ครับ หรือหากใครยังไม่เคยใช้ ลองดูเดโมนี้ก่อนก็ได้ครับ

สุดท้ายนี้ต้องขอขอบคุณคุณเล็กจากกลุ่ม OCA Thailand อย่างมากนะครับที่ช่วยผลักดันกลุ่ม OCA Thailand ให้มีการพัฒนาอยู่เรื่อย ๆ และก็ยังผลักดันให้ผมเขียนบทความแชร์ความรู้ต่าง ๆ ให้กับสังคม (ที่จริงอยากเขียนมานานแล้วครับ แต่คราวนี้อาสารับมาแล้ว และก็ใกล้กำหนดเดดไลน์อีกไม่กี่วันด้วย) ขอบคุณคุณอั๋น ผู้ดูแลเว็บ OCAThailand.org ที่ให้พื้นที่ครับ ไว้พบกันคราวหน้าครับ (ผมเดฟครับ)

jakkrit