Source：Python Technology

I've just come across front-end web development some time ago, but for those who are just starting out, frameworks like flask, Django and other such slightly larger frameworks are not really suitable, so today Dash is a lightweight web development library that combines the best of all worlds.

What is Dash?
Dash is a Python library for building web-based applications without JavaScript.

Dash is also a user interface library for creating analytical web applications. Those who use Python for data analysis, data mining, visualization, modeling, instrumentation, and reporting can use Dash right out of the box.

Dash builds on Plotly.js, React, and Flask to combine modern UI elements such as drop-down lists, sliders, and graphs with your analytics Python code.

Web build steps
Install the relevant dependencies (libraries)
Tip: This article is based on Windows 10, Anaconda 3, Sublime Text, and Python version 3.6.5 Personally, I used to create a separate new virtual environment for dash development with the following command.

conda create -n myenv_dash python==3.6.5 
To install Dash's third-party packages.

pip install dash
Because it is based on Flask, the system will automatically install the corresponding dependencies, here I suggest also installing an additional dependency: dash_bootstrap_components

pip install dash_bootstrap_components
This dependency contains Twitter's bootstrap components.

Import the relevant packages
from dash import Dash, html, dcc from dash.dependencies import Input, Output import dash_bootstrap_components as dbc
Build the app
try: # get online bootstrap.min.css app = Dash(__name__, external_stylesheets = ['https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/ bootstrap.min.css'])
    print('This page renders based on online CSS') except: # Get the local bootstrap.min.css app = Dash(__name__, external_stylesheets = [r "E:DesktopMy_PythonDashcssbootstrap. min.css"])
    print('This page renders based on native CSS')
app.title = 'Online exchange rate calculator' 
The css used here is both online and local. Use try......except...... to prevent the online css file from failing to load and causing an error.

Build the result output function
The code is as follows (example).

# output function, for reuse, define function is faster def item(name, img_path): return dbc.ListGroupItem([html.H5(name), html.Img(src=img_path), html.H5('---', id=name, className='float-right')])
Because it is a single input, multiple output, builditem function can be reused to optimize the code, function parameters are currency names and national flags (prepare the image material in advance, the size is recommended not too large, my picture is 160 * 110). dbc.ListGroupItem component can be well positioned label, text; where the className='float- right' can be interpreted as a display style, representing "float right"

Web structure Layout build
The code is as follows (example).

app.layout = dbc.Container(
    children=[
        dbc.ListGroup([
            dbc.ListGroupItem(children=[
                html.H1('Exchange Rate Calculator - Simple Version',style={'textAlign': 'center','color':'#272528'}),
                html.P('input: the number of RMB used to exchange foreign currency; output: the number of foreign currency that can be exchanged; unit: unit currency value.' ,style={'textAlign': 'center','color':'#BB002D'}),
                dbc.Input(value = 0, id = 'input', type='number')
            ],active=True),
            item('JPY','. /assets/Japan.jpg'),
            item('USD','. /assets/USA.jpg'),
            item('GBP','. /assets/UK.jpg'),
            item('HKD','. /assets/Hongkong.jpg'),
            item('EUR','. /assets/EU.png'),
            item('CHF','. /assets/France.png'),
            item('INR','. /assets/India.jpg')
        ],className='shadow')
    ],style={'padding':'2rem'}
)
layout is the GUI layout, in list mode, based on rows and columns; style={'textAlign': 'center','color':'#272528'} is the text layout style settings, a dictionary type, you can set the font, color, etc. dbc.Input(value = 0, id = 'input' , type='number') default value is 0, data type is number for calculation; style={'padding':'2rem'} is the centering style for Container, representing the width of the canvas from the border.

callback parameter setting
The code is as follows (example).

@app.callback( output = [
    Output('JPY', 'children'),
    Output('USD', 'children'),
    Output('GBP', 'children'),
    Output('HKD', 'children'),
    Output('EUR', 'children'),
    Output('CHF', 'children'),
    Output('INR', 'children')
    ],
    inputs = [Input('input', 'value')]
    ) def rule(rmb): rmb = rmb if rmb is not None else 0 return ( f'{round(rmb/0.0501,2)} ¥', f'{round(rmb/6.7646,2)} ＄', f'{round(rmb/8.1682,2)} £', f'{ round(rmb/0.8615,2)} ¥', f'{round(rmb/6.8881,2)} €', f'{round(rmb/7.0309,2)} €', f'{round(rmb/0.0852,2)} $' )
@app.callback can be interpreted as a decorator for web interaction. rule function is used to calculate the exchange rate. ps: here the currency symbols may not be all right, meaning some, do not be too serious ha!

Interface effect


Summary
The project to this point, the entire project has been completed, involving some basic skills, but also requires a little merit, well, today's sharing here, the follow-up will be updated how to use requests crawler to get real-time exchange rates for dynamic exchange rate conversion.