How to create your first web app using Python, Plotly Dash, and Google Sheets API | by Daniel Barker | Towards Data Science

Update 09/21/2018:The app created in part one of the tutorial below is now available in this Github repository. While stripped down in terms of functionality, combining the code there with the tutorial here should get you up and running with Dash in no time. — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
I’ve written several short tutorials recently on how to create web apps using the awesome “Dash” Python library from the folks at Plotly. The power of the library for rapid prototyping of data science projects (or any project, really) cannot be understated.
However, by default Dash apps only run on your local machine. Obviously, the primary benefit of any web app is the ability to share it with an audience. Fortunately, the Dash library is built on top of the very popular ‘Flask’ library, and Dash apps can be deployed to serve content in the same manner. Rather than configure a server from scratch, we’ll take advantage of the simple deployment process obtained through the use of Heroku. Once we have some sample code up-and-running on Heroku, we’ll then update the app to access data from a Google Docs spreadsheet via the Python API.
Step 1: Create and Setup Virtual Environment
Using your favorite virtual environment, create a new environment to house the app. Using Anaconda, we simply type:
$ conda create --name <your env name> python=3.6
Once the environment is created, activate it within the command prompt (you might not need to prepend “source”, depending on your OS), and then create a folder that we’ll use in subsequent steps to house all the various app files.
$ source activate <your env name>$ mkdir venv$ cd venv
Now, install the dependencies needed for the app.
$ pip install dash$ pip install dash-renderer$ pip install dash-core-components$ pip install dash-html-components$ pip install plotly$ pip install dash-table-experiments $ pip install numpy$ pip install pandas$ pip install gunicorn$ pip install --upgrade google-api-python-client$ pip install numpy$ pip install pandas$ pip install gunicorn
Verify that you are in the ‘venv’ directory created for the project earlier. Initialize an empty git repository here.
$ git init
Step 2: Create file structure and initial app files
A few extra files and folders are required for deploying a web on Heroku compared to simply running it on your local machine. To make sure things work smoothly, we need to create several files according to the following structure:
venv/   app.py   .gitignore   .Procfile   .requirements.txt   credentials/      __init__.py      Credentials.py
In the ‘venv’ folder created previously, create a new file called “app.py”. We can use the code here (link to original source) for initial testing purposes.
Now, create a ‘credentials’ folder, and within that folder create two files, “__init__.py” and “Credentials.py”. The __init__ file just let’s Python know that we want this folder to be an importable module — we can leave the file itself blank. This second file is where we’ll store our Google API keys for accessing Google Sheet data, but we’ll update those keys later*.
*Important Note: Be sure to update your gitignore file to exclude your credentials folder prior to uploading your code to any public Git repository!
In the ‘venv’ folder, create the .gitignore file (I like to use gitignore.io as a starting template).
# At a minimum, make sure .gitignore file contains these items*.pyc.DS_Store.env
Next, also in the ‘venv’ folder, create a file called “Procfile” with the following contents:
web: gunicorn app:server
Finally, we need to create a listing of our projects dependencies in the ‘requirements.txt’ file. This list is easily generated by simply typing the following command into the prompt:
$ pip freeze > requirements.txt
Step 3: Deploy test app to Heroku
For this step, you will need to have a Heroku account and command line prompt already installed on your machine (see this link for Heroku account setup).
$ heroku create lava-vino # replace "lava-vino" with your-app-name$ git add . $ git commit -m "Initial commit"$ git push heroku master $ heroku ps:scale web=1
Verify the app is visible at https://lava-vino.herokuapp.com/ (or at the equivalent name for your app).
Step 5: Updating app to pull data from Google API and visualize the data
In an earlier tutorial, I explained how to access Google Sheet data using Google’s Python API. In order to visualize the Volcanic Wines dataset mentioned in that tutorial, we’ll need to update our app, as well as provide the appropriate Google API credentials. Slightly modifying the steps described in that tutorial, copy the ‘client_secret.json’ file into the ‘credentials’ folder we created in a previous step. Also, you’ll need to update the ‘Credentials.py’ file with your Mapbox ID token.
Important Note: Be sure to update your gitignore file to exclude your credentials folder prior to uploading your code to any public Git repository!
Next, update the ‘app.py’ file with the code below (be sure to include your own Mapbox ID token, and/or update the Google Sheet name, ID, and data parsing methods to suit your own dataset).
We’re almost ready to deploy the updated app to Heroku, but first, we need to run the app on our local machine in order to generate the Google API credentials file. Go ahead and run the ‘app.py’ file on your local machine; you should get a warning prompting you to visit a link to authenticate your app with your Google account. Click on the link to authenticate — if it’s successful, you should now have a new ‘credentials.json’ file in the credentials folder.
Once the credentials file has been generated, you’re ready to deploy the updated app to Heroku using the following commands:
$ git status # view the changes$ git add .  # add all the changes$ git commit -m "Updated app"$ git push heroku master
The moment of truth... navigate to https://lava-vino.herokuapp.com/ (or the URL for your app name, and cross your fingers — success! Our web app is successfully deployed to the world!
As you can see, creating a Dash app and deploying via Heroku is relatively straightforward, and all done without needing to write a single line of HTML, Javascript or CSS. Obviously, there’s a great deal more work to be done on this app — cross-referencing with wine appellation data, visualizing that data, creating a friendly UI, etc. We’ll look at some of these things in future tutorials. I’ll also try to upload a stripped down version of the project in its own Git repository so that it can be readily cloned as a template. In the meantime, hopefully this will get you up and running with your own Dash app!