GoogleScript Web Apps

I’ve been really impressed by the accessibility of the Google productivity software, especially the ability to extend functionality by writing custom GoogleScript (extended JavaScript), and I wanted to challenge myself to make a little app that requires a bit of interactivity and backend data.  A flashcard app fit all those requirements.

Using a google spreadsheet as the back-end database for card information and global statistics, one can easily access the data through GoogleScript’s Spreadsheet class.  GoogleScript also provides a great way to create a webapp front end via its HtmlService.  From, there development is just standard HTML, Javascript, and CSS (though with some limitations for security).

I’ve iterated on this a few times for for jquery optimization as well as some quick color and layout.  Making sure that all buttons are locked while data is being retrieved was an important consideration.

Some notable functionality:

  • The app tracks which cards have already been reviewed so that you do not get duplicates (this is statically tracked in the database).
  • You can bring all cards back into rotation at any point.
  • The app tracks when you say you remembered or forgot a card, and removes mastered cards from the rotation permanently.

Overall, this is not an ideally deployable or production-level workflow; however, I am very impressed at the accessibility.  GoogleScript and the in-browser editor mean that this is a very accessible way to code and test quick tools for personal use or just to prototype.  The webapp itself also deploys to a static link that is accessible anywhere via the web.

App: https://script.google.com/macros/s/AKfycbzIrwbXjdTav62W7N4ZnjSqJChyTYkOpADBli3GrW8/dev

Code: https://github.com/jiachuanxin/flashcardsGS

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s