/flask-google-calendar-api-project

Deliberate Practice for Learning Flask

Primary LanguagePython

Building Interactive Data Visualization using Python Flask and Google Calendar API

TODO

  • In calendar.html, still need to figure out how to do data.mapValues.max
  • Add OAuth so other people can analyze their own calendar [Almost Done]
  • Deploy the app using Heroku

OAuth Section - WIP

  • The OAuth flow is still not perfect, I had to always delete events.csv & db/events_all_2014.sqlite3 to restart. The branching logic is still a bit off
  • Right now, calendarMap is being stored as a Python global variable. Not good. I tried using cache, but I couldn't easily loop through a cache.
  • I think an alternative is, in each view, recompute the calendar map by writing a 'select distinct event_type from Events', but I had no success in implementing that yet in '/distinct' view
  • Passing in variables in a template to a included template is free, but you can use { with clause } to make it more explicit
  • I did some jank to convert calendarMap into a json object, so it can be used/passed down in/to .js files
  • I then used JQuery .foreach to create specific d3.select
  • I also remove the handling of white space in /api/event_type calls

Project Milestones

  • Learn about Google APIs, specifically, Calendar API

    • Learn what data is queryable through Google's API documentation
    • Learn How to query them. e.g. what parameters to pass in, in what language
    • List out the questions I want to analyze (ANALYSIS.md)

  • Set up a bare-minimum Flask Application

    • Basic routes. e.g. index.html
    • Use the opportunity to review Twitter Flask Series from Simeon Franklin to get back to speed

  • Modularize HTML pages using templating system JinJia

    • The philosophy is to keep the business logic in route definition as simplie as possible
    • Remove HTML from views, put them in separate HTML files
    • Learn how to pass in placeholder to build static HTML dynamically
    • Use Template inheritance to set up 'base.html' and extends it to provide consistent theme
    • make views return render_tempalte and that is it

  • Leveaging sqlite3 and perform a one time dump

    • Setting up sqlite3 - nothing but a delimited text file stored in my local laptop
    • Quick Data Modeling on what the schema should be
    • Learn how to query it in Flask
    • Make sure all the data I care about are being dump to a .csv and to sqlite3

  • ORM Database interaction using SQLAlchemy

    • Again, make views as simple as possible. Hide SQL statement away from views
    • Learn how to query the data using SQLAlchemy constructs instead of direct SQL query
    • Print the raw .csv data onto the Screen using SQLAlchemy
    • Set up new views to render different subset of the db table

  • Twitter Bootstrap

    • Now that I can issue a query to backend DB and display them as raw data, beautify the webpage by Twitter bootstrap
    • Better layout with consistency (using template inheritance of course)
    • Better index.html page

  • Building API endpoints

    • Learn how to translate the output into JSON objects
    • Build views to return these JSON objects
    • Here you go the API endpoints

  • Interactive d3 Charts

    • Create Bootstrap style buttons
    • Create listners (e.g. d3.select.on) that takes in parameters
    • On click, use d3.json to hit my own API endpoints to get data
    • use the data and plot bars and calendars

  • Build OAuth into the app so any authorized Google Calendar can use this app

    • Implement OAuth
    • Once users grant their consent, the app stores the data into db
    • Update the front-end code so a list of calendarName would show up
    • Update the front-end code so that bar chart and calendar chart would still work

Review of the Fundamentals of Web Application

Flask Resources

Git References

D3 References

Google API References

Using Grunt to do Front-End Web Development

Heroku

OAuth on Flask

JQuery

Another new thing I am doing is to paste the references I found right next to the code I wrote down to solve a particular problem.