Use Dash to Build to Web Apps on Trello Data

The rich ecosystem of Python modules lets you get to work quickly and integrate your systems more effectively. With the CData Python Connector for Trello, the pandas module, and the Dash framework, you can build Trello-connected web applications for Trello data. This article shows how to connect to Trello with the CData Connector and use pandas and Dash to build a simple web app for visualizing Trello data.

With built-in, optimized data processing, the CData Python Connector offers unmatched performance for interacting with live Trello data in Python. When you issue complex SQL queries from Trello, the driver pushes supported SQL operations, like filters and aggregations, directly to Trello and utilizes the embedded SQL engine to process unsupported operations client-side (often SQL functions and JOIN operations).

Connecting to Trello Data

Connecting to Trello data looks just like connecting to any relational data source. Create a connection string using the required connection properties. For this article, you will pass the connection string as a parameter to the create_engine function.

Trello uses token-based authentication to grant third-party applications access to their API. When a user has granted an application access to their data, the application is given a token that can be used to make requests to Trello's API.

Trello's API can be accessed in 2 different ways. The first is using Trello's own Authorization Route, and the second is using OAuth1.0.

• Authorization Route: At the moment of registration, Trello assigns an API key and Token to the account. See the Help documentation for information on how to connect via the Authorization route.
• OAuth Route: Similar to using Authorization, OAuth creates an Application Id and Secret when you create your account. See the Help documentation for information on how to to connect.

After installing the CData Trello Connector, follow the procedure below to install the other required modules and start accessing Trello through Python objects.

Install Required Modules

Use the pip utility to install the required modules and frameworks:

pip install pandas
pip install dash
pip install dash-daq

Visualize Trello Data in Python

Once the required modules and frameworks are installed, we are ready to build our web app. Code snippets follow, but the full source code is available at the end of the article.

First, be sure to import the modules (including the CData Connector) with the following:

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import cdata.trello as mod
import plotly.graph_objs as go

You can now connect with a connection string. Use the connect function for the CData Trello Connector to create a connection for working with Trello data.

cnxn = mod.connect("APIKey=myApiKey;Token=myGeneratedToken;InitiateOAuth=GETANDREFRESH;")

Execute SQL to Trello

Use the read_sql function from pandas to execute any SQL statement and store the result set in a DataFrame.

df = pd.read_sql("SELECT BoardId, Name FROM Boards WHERE Name = 'Public Board'", cnxn)

Configure the Web App

With the query results stored in a DataFrame, we can begin configuring the web app, assigning a name, stylesheet, and title.

app_name = 'dash-trelloedataplot'

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = 'CData + Dash'

Configure the Layout

The next step is to create a bar graph based on our Trello data and configure the app layout.

trace = go.Bar(x=df.BoardId, y=df.Name, name='BoardId')

app.layout = html.Div(children=[html.H1("CData Extension + Dash", style={'textAlign': 'center'}),
	dcc.Graph(
		id='example-graph',
		figure={
			'data': [trace],
			'layout':
			go.Layout(title='Trello Boards Data', barmode='stack')
		})
], className="container")

Set the App to Run

With the connection, app, and layout configured, we are ready to run the app. The last lines of Python code follow.

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

Now, use Python to run the web app and a browser to view the Trello data.

python trello-dash.py

👁 Trello data in a Dash web app (Salesforce is shown).

Free Trial & More Information

Download a free, 30-day trial of the CData Python Connector for Trello to start building Python apps with connectivity to Trello data. Reach out to our Support Team if you have any questions.

---

Full Source Code

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import cdata.trello as mod
import plotly.graph_objs as go

cnxn = mod.connect("APIKey=myApiKey;Token=myGeneratedToken;InitiateOAuth=GETANDREFRESH;")

df = pd.read_sql("SELECT BoardId, Name FROM Boards WHERE Name = 'Public Board'", cnxn)
app_name = 'dash-trellodataplot'

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = 'CData + Dash'
trace = go.Bar(x=df.BoardId, y=df.Name, name='BoardId')

app.layout = html.Div(children=[html.H1("CData Extension + Dash", style={'textAlign': 'center'}),
	dcc.Graph(
		id='example-graph',
		figure={
			'data': [trace],
			'layout':
			go.Layout(title='Trello Boards Data', barmode='stack')
		})
], className="container")

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