Saturday, 1 March 2014

Using Google Datastore, Google App Engine, and Endpoints for your applications

Google Datastore is a very convenient cloud based database to use in your mobile or web applications. However, the process of integrating it with the application is somewhat complex, and the documentation is not very helpful.

I am presenting a step-wise procedure of how we used Google Datastore with DrawTyme applications. In this post, only the integration with web-app of DrawTyme is explained. Integration with the Android app will be the subject of the next post.

Background 

Google Datastore a non-relational database. It is very simple and inexpensive to use. You need to use Google App Engine and Google Endpoints to access it.

For the purpose of this tutorial, each data entry in the database, will be of type Video. Each Video has the following components
  1. ID
  2. Owner
  3. Title
  4. Author
  5. Description
  6. Timestamp of creation
This data is sufficient to retrieve a video from the cloud storage.

 

The Procedure

The following steps need to be taken in order to use Google Datastore.

1. Setup Development Environment
2. Create a project on Google App Engine 
3. Download and modify the Java Backend and Javascript Web-App code
4. Upload the Backend Code to Google App Engine

 

Setting up the development enviroment

  1. Download and install "Eclipse IDE for Java EE Developers" from Eclipse Download Site. (Make sure you have Eclipse IDE for Java EE Developers. My experience was that Google Plugin for Eclipse does not work well with other flavours of Eclipse)
  2. Install "Google Plugin for Eclipse". You can find instructions at the Google Plugin for Eclipse site.

Creating a project on Google App Engine

  1. Follow the instructions for "Creating an App Engine app" at https://developers.google.com/appengine/docs/java/endpoints/getstarted/backend/setup
  2. Copy the project ID of the project you just created

Download the backend code

  1. Start Eclipse and create a Web Application as described in "Creating your first Web Application" section of the Google Plugin for Eclipse site.
    • A directory for this project will be created in your workspace
  2. Download DrawTymeBackendExample.zip and extract it's contents into the directory created in #1 above.

Understanding the code

First the Java Backend:
  1. the "src" folder 
    1. The file Ids.java declares the Client IDs that are authorised to use the app engine
      • To generate these IDs, open https://cloud.google.com/console
      • Open the project you created earlier
      • On the left hand menu, click on APIs & auth
      • Then click Credentials
      • Create a new OAuth ID for each web/Android/iOS application that you want to allow use of theis App Engine project
    2. The file VideosV1.java defines the api that will be called by our apps
  2. the "war" folder
    1. the file WEB-INF/appengine-web.xml
      • In this file, write the application ID of the project you created on Google App Engine, in the <application></application> tag
    2. the file WEB-INF/datastore-indexes.xml
      • The contents of this file were suggested by Google App Engine, and I got it right after a few iterations
Now the Javascript code:
  1. war/js/backend.js
    • This file has functions that call the api of the Backend
    • Put the Client ID of the web-app that you created and wrote in the Ids.java file above 
  2. war/index.html
    1. This is left blank - you can write your own code here to test out the functions in the Backend. The API required for these functions is initialised and installed in war/js/backend.js

Uploading the Backend Code to Google App Engine

  1. Follow the instructions on "Deploying your Web Application" at https://developers.google.com/eclipse/docs/getting_started#deploying
And we are done! Once deployed, your project is now available at http://application-id.appspot.com/ where application-id is the project ID of your project on Google App Engine. 
(IMPORTANT: Make sure to use https:// rather than http:// when accessing your project. Otherwise, the user signin - which uses OAuth2 - will not work)
I have tried to keep this as simple as possible. If you have any queries, please feel free to mail me at info[at]drawtyme.com, and I will share what I know.