GDG Seattle - Tablet/TV Web Application Sample
This material was created for:
- GDG Seattle / Startup Weekend Bootcamp - September 12, 2012, 6pm
- GDG Seattle DevFest - September 29-30, 2012, 9am - 5pm
Both events are being held at SURF Incubator (1st and Marion, 8th floor of the Exchange Building).
This course is designed to get you up and run with an HTML application (web-app) that you can use to target desktop, mobile, tablet, and TV form factors.
Basic computer skills are all you need to complete the introductory parts of this course. There is a lot to learn to build a complete web application, but we've done much of the heavy lifting by providing this working sample application. If you can use a text editor on your computer to modify our application files, you'll be able to "make it your own" and make a custom version of our sample app.
What You'll Do
Lesson 1 - Setting up your Development Environment and Deploying to App Engine
- Setup your development environment to build an App Engine application.
- Deploy your application to Google's App Engine cloud hosting service.
Lesson 2 - ToDo Sample Application - The Server Side
- Learn how a web app is built on App Engine (page rendering and data storage).
- Define a "data model" for saving and retrieving information for your users.
- Using the Admin interface.
- The data interface - JSON/REST.
Lesson 3 - ToDo Sample Application - HTML Client Application
- Using Backbone.js to coordinate client side views and data.
- User authentication and sign-in (using Google accounts).
Lesson 4 - TBD - Advanced HTML web app
- Use client-side application navigation through use of the HTML "anchor" (#) url.
- Design an HTML app for different screen dimensions using [Twitter Bootstrap].
- Package your web app so it can be run in offline mode - especially handling "sometimes connected" devices (application cache and offline storage).
What to Bring
You'll have the best experience at our event if you are able to get a few things accomplished on your own beforehand. Don't worry if you don't get to it - we'll have people on site to help you get the preparation work done and help you with any snags you may run in to; plan on reserving about an hour to get your initial development environment configured.
Everyone needs to have a computer running Windows, Mac, or Linux.
We distribute the source code for this application using the distributed source control system [Git] and hosted on GitHub. You'll need to install [Git] and create an account on GitHub, especially if you want to work together with others on your project. If you would like a tutorial on using Git, I recommend Git Simple Guide and Git Tutorial.
For Linux users, installing the development environment involves simply running a shell script to gather and install all of the dependencies. Windows and Mac users must install the pre-requisites manually.
First, create your own copy of this repository by forking it on GitHub.
- Go to the GDG DevFest Repository.
- Click on the Fork button.
Now, you need to check out the files to your own machine.
Go to a directory where you want to install your project files (e.g., ~/src or c:\src). Then use the following commands (on Windows, you should run these command from the Git Bash shell, not the windows command prompt):
$ git clone email@example.com:<your-github-username>/gdg-tablet-bootcamp.git $ cd gdg-tablet-bootcamp $ git remote add upstream git://github.com/mckoss/gdg-tablet-bootcamp.git
- A version of Python 2.7 is installed by default on Mac OS/X.
- Go to App Engine SDK for Python and download GoogleAppEngineLauncher-1.7.1.dmg.
- Open the dmg file and drag the GoogleAppEngineLauncher icon to your Application folder.
- Run the program from Applications folder. Click "OK" when asked to create Symlinks.
- sudo easy_install pip
- Install PIL for Image processing support:
- You can get full support for image manipulation on the server. This is easiest if you have a package manager on your Mac like Homebrew or Mac Ports. This [Stack Overflow)[http://stackoverflow.com/questions/8404956/installing-pil-with-jpeg-support-on-mac-os-x] article is helpful. I prefer Mac Ports:
- $ sudo port install py27-pil # This installs all dependencies and PIL into python2.7 including in ports!
- $ sudo pip install PIL # This will install PIL into Apple's default Python (yes you have multiple versions of Python on your machine).
- Python 2.7.3
- Go to [Python.org]
- Click on "Python 2.7.3 Windows Installer (Windows binary -- does not include source)"
- Run the installer, let it install to the default location, C:\python27 If you must change the location (not recommended), take note of where it goes
- Add Python to path
- Hold windows key and press pause (Or go Control Panel->System and Security->System)
- Click on the link labeled "Advanced System Settings" on the sidebar
- Click on the button "Environment Variables" at the bottom
- Under "System Variables" find the variable called "Path"
- Click on path and press Edit.
- Append ";C:\python27" (no quotes) to the end of the Path variable (or your python path)
- Go to PIL
- Click on the link for "Python Imaging Library 1.1.7 for Python 2.7 (Windows only)"
- Run the installer
- Google App Engine
- Go to App Engine SDK for Python.
- Download "GoogleAppEngine-1.7.1.msi" for Windows
- Run the installer
Run the following command
This script will install (if you don't them already):
- Python 2.7
- pip - Python package installer (the new easy_install).
- Google App Engine: Google's web application service (for Python).
Next, enter the virtual env with
$ source bin/use
And install python-dev and PIL within the virtual env with
$ sudo apt-get install python-dev $ pip install PIL
*Note: If you want to merge any updates that have been made to our master repository since you made your fork, use the following commands:
$ git fetch upstream $ git merge upstream/master
Running the Application
You should now be able to run the sample application on your machine.
Run Using the App Engine Launcher (Mac and Windows)
- Run the Launcher App
- File/Add Existing Application...
- Select Path to: ~/src/gdg-tablet-bootcamp/app
- Select Port: 8080
- Click Add
- Select your app in the list and click the Run button.
- Open a web browser at address: http://localhost:8080
- Test if image uploading is working by visiting http://localhost:8080/admin/media
You should see the Todos application running in your browser!
Run from command line (Mac and Linux)
Run the built-in development web server to run the app:
$ dev_appserver.py app
Open your browser at http://localhost:8080 to view the application.
Deploying your application to Google Appengine.
You can run your application at
- Go to the App Engine Admin Console
- Click the Create button.
- You may be asked to verify your account via SMS ... do that.
- Application identifier:
- Application Title: "GDG Bootcamp Sample"
- Click Create Application
- Edit the file gdg-tablet-bootcamp/app/app.yaml:
- Deploy your application.
- Open the App Engine Launcher
- Select your app.
- Click the Deploy button.
- Enter your Google Account credentials.
- Wait until "Completed update of app:" message.
Alternatively, you can deploy via the command line via:
$ appcfg.py update app
Note: If you get an error "AttributeError: can't set attribute" you are probably not authenticating properly. If you use two-factor authentication for your Google account, you will have to create an application specific password and use that to deploy to AppEngine.
You can view an online version of the app at http://gdg-tablet.appspot.com/