App.XML - Hangouts

OVERVIEW
In the sample zip file, in the 'static' folder, there is a file called 'app.xml'. This file holds the html code for your Hangouts Extension. It is, strictly speaking, not an html file. It has a header and footer that are xml code, and then a CDATA section that holds html styled code. There is no 'body' tag and no 'head' tag, but there's html code that the Hangout presents inside the browser window beside the Hangout video screen. It is challenging to edit this file, as it is organized in two types of markup. Also in this file is all the javascript that you want to include in your project.

I wanted to edit my html in a separate file. That way I could load it into a browser locally and find out what my page was going to look like to some degree. This would keep the number of unnecessary deployments to a minimum. I also wanted to edit my javascript in a separate file. I wanted the advantages of using an editor that had context highlighting. What I ended up doing was to edit the files separately, and then concatenating them together into one file using a simple bash script. The bash script needed to be run every time the files were edited, or just before a deployment.

The app is basically contained in the app.xml file. It does reference several other files in the same directory. These are javascript libraries like the one for ros, and graphics files in the png format. The app.xml file, and the path to that file, are referenced in the Hangouts API console. This is the crucial reference that the Hangout uses to display the extension. You need an App Engine account and you need to create an App Engine project before you can enable the Hangout extension or even see the screen where the app.xml file url goes. You can, however, read about this console here.