Hack Google
A class for hackers
by Belin
In three steps, learn how to create an API out of your google docs data, then access the API with AJAX using a Single Page App, and then host the site for free with Google app engine.
Imaginary Eats:
The demo application for this will be a restaurant menu output which updates according to changes made to a google doc. The doc will feature 3 sheets. The first sheet will be the configuration of the fictional restaurant's name/address/phone and landing text. The next will be a list of sections used in the menu. One document will hold all the data for the menu, and the output format is created by the google doc holding the content. This document will be created in the first class.
The second class features the mechanisms required to display the data created in the first class. It’s all about css, html, ajax and jQuery. UX/UI design philosophy is important to consider in the creation of user facing parts, and that will be briefly covered. While not a complete course on css or js, this should demonstrate enough of the technology to get a person started in hacking together their own Single Page App. I’ll stick with the menu demonstration and walk through the creation of several jQuery templates and sending data into them for end user display.
The third class pulls it all together and is a step by step guide to how to integrate your code with google’s App Engine. I’ll touch on everything covered in the first two classes and also show some advanced techniques for optimizing data lookup in high volume or high flexibility scenarios.
Class 1: Hack-A-Doc
90 minutes
15:00 Lecture
Introduce Google Docs Script Host including
60:00 Lab
Build a google sheets API data source using simple copy and paste javascript. This is a standard google docs sheet which will be created in the user account and usable after the class to hack and learn from if the user wishes to continue.
15:00 Discussion
Discuss more techniques for API construction and security philosophy.
Question & Answer
Lab Material:
gia Library id: McpfOjy0GA2kDM2ytVgOhYwIv2K89z2yK
Imaginary Eats Google Doc: http://goo.gl/gfi7WO
Reference Links:
Google Apps Quotas: https://developers.google.com/apps-script/guides/services/quotas
Ajax with jQuery: http://api.jquery.com/jquery.ajax/
Google’s Opinion: https://developers.google.com/apps-script/add-ons/
Imaginary Eats Site: http://imaginaryeats.com/
Class 2: I Can App
120 minutes
30:00 Lecture
Start with discussion of what a Single Page App is, and why to use one instead of a traditional page for pretty much anything on the web.
Talk about responsive design principles and how they should be a part of the design from the beginning.
Discuss the components necessary to run an SPA and be highly available.
Talk about template systems.
Talk about shopping carts.
60:00 Lab
Build a simple js based SPA which uses jQuery and jsRender. The code for this is HTML/js/jQuery and will be available for copy/paste. This accesses the data source created in the Hack-A-Doc session. The access layer will use AJAX and jQuery to transfer the data from the data source directly to the user from google docs, and structure the display using templates.
30:00 Discussion
Question/Answer
Materials:
github render plus polling library https://github.com/thebelin/gia-api-render-plus
jsRender API: http://www.jsviews.com/#jsrapi
SimpleCart: http://simplecartjs.org/documentation/
Imaginary Eats Site: http://imaginaryeats.com/
Class 3: Host with the Most
60 minutes
Add the SPA created in the first two steps to your Google App Engine account, and host a domain from your google account for free. You will need control of a domain of your own for this step, which are available at all the domain registration services.
Reference:
Domain Registration: https://developers.google.com/appengine/docs/domain