Skip to content

Commit

Permalink
Finishing touches.
Browse files Browse the repository at this point in the history
  • Loading branch information
thewchan committed Jun 27, 2020
1 parent 571fbd0 commit 6aef81c
Show file tree
Hide file tree
Showing 6 changed files with 72 additions and 47 deletions.
50 changes: 13 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,41 +1,17 @@
# Flask on Heroku
# A Simple Stock Ticker Visualization App

This project is intended to help you tie together some important concepts and
technologies from the 12-day course, including Git, Flask, JSON, Pandas,
Requests, Heroku, and Bokeh for visualization.
Hello! This little stock ticker visualization web app was created by [Matt Chan](http://github.com/thewchan/) as part of his adventure over the [The Data Incubator Data Science Fellowship](https://www.thedataincubator.com). This app was the on-boarding assignment prior to the beginning of the actual fellowship program. Check out the source code of the app here at Github, and see it live over at [Heroku](https://mychan-stock.herokuapp.com/)! Some skeleton file and code were provided by TDI themselves. The interactive visualization is powered by [Bokeh](https://bokeh.org/), an open source interactive visualization Python library. The stock price time series data is provided by [Alpha Vantage](https://www.alphavantage.co/), who provides free APIs for financial trends. The website itself is powered by [Flask](https://flask.palletsprojects.com/en/1.1.x/), a micro web framework written in Python which is in turn powered by [Jinja](https://palletsprojects.com/p/jinja/) and [Werkzeug](https://werkzeug.palletsprojects.com/en/1.0.x/), a template engine and a web server gateway interface toolkit, respectively. The CSS of the web app is powered by [Pure.css](https://purecss.io/), a set of CSS modules designed by [Yahoo](https://www.yahoo.com/), with minor modification. The favicon was provided by [Free Favicon](https://freefavicon.com/). Enjoy!

The repository contains a basic template for a Flask configuration that will
work on Heroku.
####Licence
A Simple Stock Ticker Visualization Web App
Copyright (C) 2020 Matthew Chan

A [finished example](https://lemurian.herokuapp.com) that demonstrates some basic functionality.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

## Step 1: Setup and deploy
- Git clone the existing template repository.
- `Procfile`, `requirements.txt`, `conda-requirements.txt`, and `runtime.txt`
contain some default settings.
- There is some boilerplate HTML in `templates/`
- Create Heroku application with `heroku create <app_name>` or leave blank to
auto-generate a name.
- (Suggested) Use the [conda buildpack](https://github.com/thedataincubator/conda-buildpack).
If you choose not to, put all requirements into `requirements.txt`

`heroku config:add BUILDPACK_URL=https://github.com/thedataincubator/conda-buildpack.git#py3`

The advantages of conda include easier virtual environment management and fast package installation from binaries (as compared to the compilation that pip-installed packages sometimes require).
One disadvantage is that binaries take up a lot of memory, and the slug pushed to Heroku is limited to 300 MB. Another note is that the conda buildpack is being deprecated in favor of a Docker solution (see [docker branch](https://github.com/thedataincubator/flask-framework/tree/docker) of this repo for an example).
- Deploy to Heroku: `git push heroku master`
- You should be able to see your site at `https://<app_name>.herokuapp.com`
- A useful reference is the Heroku [quickstart guide](https://devcenter.heroku.com/articles/getting-started-with-python-o).

## Step 2: Get data from API and put it in pandas
- Use the `requests` library to grab some data from a public API. This will
often be in JSON format, in which case `simplejson` will be useful.
- Build in some interactivity by having the user submit a form which determines which data is requested.
- Create a `pandas` dataframe with the data.

## Step 3: Use Bokeh to plot pandas data
- Create a Bokeh plot from the dataframe.
- Consult the Bokeh [documentation](http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html)
and [examples](https://github.com/bokeh/bokeh/tree/master/examples/embed).
- Make the plot visible on your website through embedded HTML or other methods - this is where Flask comes in to manage the interactivity and display the desired content.
- Some good references for Flask: [This article](https://realpython.com/blog/python/python-web-applications-with-flask-part-i/), especially the links in "Starting off", and [this tutorial](https://github.com/bev-a-tron/MyFlaskTutorial).
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
16 changes: 15 additions & 1 deletion app.py
Original file line number Diff line number Diff line change
@@ -1,4 +1,18 @@
"""Display a stock ticker visualization based on user input."""
"""Display a stock ticker visualization based on user input.
A Simple Stock Ticker Visualization Web App
Copyright (C) 2020 Matthew Chan
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
"""
import json
import os
from flask import Flask, render_template, request, send_from_directory
Expand Down
7 changes: 0 additions & 7 deletions conda-requirements.txt

This file was deleted.

15 changes: 14 additions & 1 deletion templates/about.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
<!-- A Simple Stock Ticker Visualization Web App
Copyright (C) 2020 Matthew Chan
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.-->

<!doctype html>
<html lang="en">
<head>
Expand All @@ -17,7 +30,7 @@
<header>
<h2>About</h2>
<p>
Hello! This little stock ticker visualization web app was created by <a class="post-author" href="http://github.com/thewchan/">Matt Chan</a> as part of his adventure over the <a href="https://www.thedataincubator.com/">The Data Incubator Data Science Fellowship</a>. This app was the on-boarding assignment prior to the beginning of the actual fellowship program. Check out the source code of the app <a href="https://github.com/thewchan/stock-ticker-app">here</a>! Some skeleton file and code were provided by TDI themselves. The interactive visualization is powered by <a href="https://bokeh.org/">Bokeh</a>, an open source interactive visualization Python library. The stock price time series data is provided by <a href="https://www.alphavantage.co/">Alpha Vantage</a>, who provides free API for financial trends. The CSS of the web app is powered by <a href="https://purecss.io/">Pure.css</a>, a set of CSS modules designed by <a href="https://www.yahoo.com/">Yahoo</a>, with minor modification. Enjoy!
Hello! This little stock ticker visualization web app was created by <a class="post-author" href="http://github.com/thewchan/">Matt Chan</a> as part of his adventure over the <a href="https://www.thedataincubator.com/">The Data Incubator Data Science Fellowship</a>. This app was the on-boarding assignment prior to the beginning of the actual fellowship program. Check out the source code of the app <a href="https://github.com/thewchan/stock-ticker-app">here</a>! This app is hosted by <a href="https://www.heroku.com/">Heroku.</a> Some skeleton file and code were provided by TDI themselves. The interactive visualization is powered by <a href="https://bokeh.org/">Bokeh</a>, an open source interactive visualization Python library. The stock price time series data is provided by <a href="https://www.alphavantage.co/">Alpha Vantage</a>, who provides free APIs for financial trends. The website itself is powered by <a href="https://flask.palletsprojects.com/en/1.1.x/">Flask</a>, a micro web framework written in Python which is in turn powered by <a href="https://palletsprojects.com/p/jinja/">Jinja</a> and <a href="https://werkzeug.palletsprojects.com/en/1.0.x/">Werkzeug</a>, a template engine and a web server gateway interface toolkit, respectively. The CSS of the web app is powered by <a href="https://purecss.io/">Pure.css</a>, a set of CSS modules designed by <a href="https://www.yahoo.com/">Yahoo</a>, with minor modification. The favicon was provided by <a href="https://freefavicon.com/">Free Favicon</a>. Enjoy!
</p>
</div>
</div>
Expand Down
13 changes: 13 additions & 0 deletions templates/index.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
<!-- A Simple Stock Ticker Visualization Web App
Copyright (C) 2020 Matthew Chan
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.-->

<!doctype html>
<html lang="en">
<head>
Expand Down
18 changes: 17 additions & 1 deletion ticker.py
Original file line number Diff line number Diff line change
@@ -1,4 +1,20 @@
"""Render the bokeh visualization of the stock time series."""
"""Render the bokeh visualization of the stock time series.
Display a stock ticker visualization based on user input.
A Simple Stock Ticker Visualization Web App
Copyright (C) 2020 Matthew Chan
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
"""
import json
import pandas as pd
import requests
Expand Down

0 comments on commit 6aef81c

Please sign in to comment.