The sample application is built on top of orchestration framework. The sample application contains an android application that allows a user to take and upload photographs to Google App Engine Service. The service then performs pixelation on the image and adds a random quote, showing the image on the web interface. The different products used ar…
Python Java CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
android
daemon First Committ Sep 13, 2013
server
LICENSE First Committ Sep 13, 2013
README.md

README.md

Smashpix

Copyright

Copyright 2013 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Disclaimer

This sample application is not an official Google product.

Summary

Smashpix is an image manipulation application that is built on Google's Cloud Platform. Smashpix combines several applications to showcase how developers can connect several components of the platform together.

  1. Backend Server (Google App Engine + Google Cloud Storage)
  2. Command line daemon (Google Compute Engine)
  3. Mobile Application (Android)

The setup instructions in this README are the same as the ones you will find in the corresponding Google App Engine server code. You will need both packages for this sample to work.

Programming Languages:

  • Java
  • Python

Google Components:

  • Google App Engine
  • Google Cloud Endpoints
  • Google Cloud Storage
  • Android

Download the sample code:

Dependencies

Creating a Google Cloud Platform project

  1. Create a project using the Google Cloud Console
  2. Enter a project name and project ID, [PROJECT_ID]. The project ID will be your Google App Engine ID, [APPENGINE_ID].
  3. Select "Compute Engine" from the main project console. You will need to enable billing to use Google Compute Engine.
  4. Select "APIs & Auth" from the main project console. Enable the following APIs under "APIs"
    • Google Cloud Storage
    • Google Cloud Storage JSON API
    • TaskQueue API

API Access

Create client IDs to allow authentication and authorization between components, Using OAuth 2.0 to Access Google APIs.

Create a Client ID for web applications

  1. Select your project in https://cloud.google.com/console/
  2. Select "APIs & Auth" followed by "Registered apps" (Left navigation)
  3. Click the "Register App" button
  4. Enter "Name" of the application
  5. Under "Platform" > Select "Web Application" > "Register"
  6. Expand "OAuth 2.0 Client ID"
  7. Under "Web Origin" > Enter site or hostname: https://[APPENGINE_ID].appspot.com
  8. Create client ID. This is the Client ID for your web application, [CLIENT_ID_WEB_APPLICATION]

Create a Service account

  1. Select your project in https://cloud.google.com/console/
  2. Select "APIs & Auth" followed by "Registered apps" (Left navigation)
  3. Click the "Register App" button
  4. Enter "Name" of the application
  5. Under "Platform" > Select "Web Application" > "Register"
  6. Expand "Certificate"
  7. Click "Generate Certificate"
  8. The email address is the Service account, [SERVICE_ACCOUNT]
  9. "Download private key and store it in a secure location. This is the service account private key file, [SERVICE_ACCOUNT_PRIVATE_KEY]
    • Remember your private key's password.

Create a Client ID for installed applications

  1. Generate a certificate fingerprint on your local machine.
~$ keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1
  1. Enter the keystore password: android
  2. The returned value is the CERTIFICATE_FINGERPRINT.
(stdin)= [CERTIFICATE\_FINGERPRINT]
  1. Select your project in https://cloud.google.com/console/
  2. Select "APIs & Auth" followed by "Registered apps" (Left navigation)
  3. Click the "Register App" button
  4. Enter "Name" of the application
  5. Under "Platform" > Select "Android" followed by "Accessing APIs directly from Android"
  6. Enter package name: com.google.cloud.solutions.smashpix
  7. Enter signing certificate fingerprint (SHA1): [CERTIFICATE_FINGERPRINT]
  8. Click "Register"
  9. Create client ID. This is the Client ID for your installed application, [CLIENT_ID_INSTALLED_APPLICATION]

Backend Server (Google App Engine + Google Cloud Storage)

Dependencies

Configuring the backend server (Google App Engine)

You should have downloaded the backend server sample code. Extract the files into a new directory, [BACKEND_SERVER_CODE].

  1. Extract the Google Cloud Storage App Engine client dependency, src/cloudstorage/, folder into your backend server directory, [BACKEND_SERVER_CODE]/cloudstorage/
  2. In the app.yaml file, replace [APPENGINE_ID] with your App Engine application ID
    application: [APPENGINE\_ID]
  3. In the queue.yaml file, replace [SERVICE_ACCOUNT] with the email address of the Service account
    queue:
     \- name: imagetasks
       ...
       acl: [SERVICE\_ACCOUNT]
  4. In the settings.cfg file, replace the variable placeholders with your application variables
    • MAIN_BUCKET: Primary Google Cloud Storage bucket to upload original images
    • BIT_BUCKET: Google Cloud Storage bucket to store processed images
    • APP_HOSTNAME: Full App Engine hostname, [APPENGINE_ID].appspot.com
    • ALLOWED_CLIENT_IDS: Client IDs that are allowed to connect to service, [CLIENT_ID_INSTALLED_APPLICATION]
    • CLIENT_ID_OF_API_SERVERS: Client IDs of the Cloud Endpoints server, [CLIENT_ID_WEB_APPLICATION]
  5. Upload the backend server to Google App Engine

Configuring storage (Google Cloud Storage)

  1. Obtain access credentials and create configuration file using the Service account, [SERVICE_ACCOUNT]
    gsutil config -e
  2. Create the primary bucket to upload original images, [BUCKET_TO_UPLOAD_ORIGINAL_IMAGES]
    ~$ gsutil mb gs://[BUCKET\_TO\_UPLOAD\_ORIGINAL\_IMAGES]
  3. Create the bucket to store processed images, [BUCKET_TO_STORE_PROCESSED_IMAGES]
    ~$ gsutil mb gs://[BUCKET\_TO\_STORE\_PROCESSED\_IMAGES]
  4. Configure Object Change Notification for the primary bucket to upload original images
    ~$ gsutil notifyconfig watchbucket https://[APPENGINE\_ID].appspot.com/ocn \
         gs://[BUCKET\_TO\_UPLOAD\_ORIGINAL\_IMAGES]
     https://[APPENGINE\_ID].appspot.com/ocn ...
     Successfully created watch notification channel.
     Watch channel identifier: [OCN\_CHANNEL\_IDENTIFIER]
     Canonicalized resource identifier: [OCN\_RESOURCE\_IDENTIFIER]
     
  5. Configure the default access controls (ACL) for both buckets
    ~$ gsutil setdefacl public-read gs://[BUCKET\_TO\_UPLOAD\_ORIGINAL\_IMAGES]
     ~$ gsutil chdefacl -g AllUsers:FC gs://[BUCKET\_TO\_UPLOAD\_ORIGINAL\_IMAGES]
     ~$ gsutil setdefacl public-read gs://[BUCKET\_TO\_STORE\_PROCESSED\_IMAGES]
     ~$ gsutil chdefacl -g AllUsers:FC gs://[BUCKET\_TO\_STORE\_PROCESSED\_IMAGES]
     
  6. Note: To remove Object Change Notifications
    ~$ gsutil notifyconfig stopchannel [OCN_CHANNEL_IDENTIFIER] \
         [OCN_RESOURCE_IDENTIFIER]

Testing the application

At this point, you should be able to upload images from the UI for testing purposes.

  • Go to [APPENGINE_ID].appspot.com
  • On the top right, "Upload a new image"
  • The UI should display an image with a second image "Image processing..."
    • Confirm the file upload in Google Cloud Storage
    • You should also see 1 task in the App Engine console > "Task Queues" > "imagetasks"
  • To process the image, we will need to setup the Command line daemon to process image in the task queue.

Command line daemon (Google Compute Engine)

Configure gcutil on the main system to connect your project.

@main:~$ gcutil auth --project=[PROJECT_ID]

Dependencies

Setting up Google Compute Engine

  1. Select "Google Compute Engine" from the main project console.
  2. Create a "New Instance"
    • Name: smashpix-master
    • Machine Type: n1-standard-1
    • Boot Source: New presistent disk from image
    • Use default values for all other settings.
  3. Go to the instance page after creation of the instance. Click "ssh" under "Equivalent REST or ssh" at the bottom of the page to obtain gcutil command line needed to SSH into the instance.
    @main:~$ gcutil --service_version="v1" \
         --project="[PROJECT\_ID]" ssh --zone="[INSTANCE\_ZONE]" \
         "[INSTANCE\_NAME]"
  4. SSH into the instance to set up the Command line daemon

Setting up the Command line daemon

  1. Copy the command line daemon files to the instance from your main system. "." represents the root of the home directory on the Google Compute Engine instance.
    @main:~$ gcutil --service_version="v1" \
         --project="[PROJECT\_ID]" push --zone="[INSTANCE\_ZONE]" \
         "[INSTANCE\_NAME]" daemon/ .
  2. Confirm that the files have been copied over
    @instance:~$ ls $HOME/daemon
    

compute_engine_daemon.py image_processing.py quotes.txt settings.py 3. Install command line daemon dependencies

@instance:$ sudo apt-get install python-pip python-openssl 
python-dev @instance:
$ sudo apt-get install fonts-freefont-ttf libjpeg-dev
libpng-dev libgif-dev libtiff-dev libfreetype6-dev @instance:$ sudo ln -s /usr/lib/x86_64-linux-gnu/libjpeg.so /usr/lib @instance:$ sudo ln -s /usr/lib/x86_64-linux-gnu/libpng.so /usr/lib @instance:$ sudo ln -s /usr/lib/x86_64-linux-gnu/libtiff.so /usr/lib @instance:$ sudo ln -s /usr/lib/x86_64-linux-gnu/libz.so /usr/lib @instance:$ sudo ln -s /usr/lib/x86_64-linux-gnu/libfreetype.so /usr/lib # libfreetype6-dev must be installed before PIL. @instance:$ sudo pip install PIL @instance:$ sudo pip install google-api-python-client @instance:$ sudo pip install gsutil
4. Copy private key over
@main:~$ gcutil --service_version="v1" 
--project="[PROJECT_ID]" push --zone="[INSTANCE_ZONE]"
"smashpix-master" [SERVICE_ACCOUNT_PRIVATE_KEY] ./.ssh/.
5. Configure settings file, settings.py * PROJECT_ID: [PROJECT_ID] * PROCESSED_IMG_BUCKET: Google Cloud Storage bucket to store processed images. * CREDENTIAL_ACCOUNT_EMAIL: Service account email, [SERVICE_ACCOUNT_EMAIL] * PRIVATE_KEY_LOCATION: Service account private key, [SERVICE_ACCOUNT_PRIVATE_KEY] 6. Run command line daemon
python compute_engine_daemon.py &
7. Note: To add more quotes, add quotes to quotes.txt

Testing the application

At this point, you should be able to view the processed image

  • Go to [APPENGINE_ID].appspot.com
  • The processed image should be pixelized with a quote.

Mobile Application (Android)

Dependencies

Setting up the Android project in Eclipse

You should have downloaded the mobile application sample code. Extract the files into a new directory, [MOBILE_APP_CODE].

  1. Import the Android code into Eclipse.
    • File > New > Project...
    • Wizards > "Android Project from Existing Code"
    • Root Directory (Select folder with the mobile application code, [MOBILE_APP_CODE])
    • Projects to Import (Select project with the mobile application code)
  2. Extract the Apache HttpComponents Client (HttpClient) file and copy the following jar files into your Android code library folder, [MOBILE_APP_CODE]/libs/.
    • httpclient-[VERSION].jar
    • httpclient-cache-[VERSION].jar
    • httpcore-[VERSION].jar
    • httpmime-[VERSION].jar
  3. Generate Google Cloud Endpoints from the backend server (Google App Engine)
    • From the command line, go to the root directory of the backend server, [BACKEND_SERVER_CODE]/.
    • Create a temporary folder for the Cloud Endpoints file.
      ~$ mkdir endpoints-lib/
    • Generate the Cloud Endpoints files for the Android application.
      ~$ [APPENGINE\_PYTHON\_SDK]/endpointscfg.py get\_client\_lib java -o \
            endpoints-lib/. -f rest services.ImageApi
    • Extract ImageApi.zip and save it into [BACKEND_SERVER_CODE]/endpoints-lib/image/libs/
    • Copy the following jar files into your Android code library folder, [MOBILE_APP_CODE]/libs/.
      • google-api-client-[VERSION].jar
      • google-api-client-android-[VERSION].jar
      • google-http-client-[VERSION].jar
      • google-http-client-android-[VERSION].jar
      • google-http-client-gson-[VERSION].jar
      • google-http-client-jackson-[VERSION].jar
      • google-http-client-jackson2-[VERSION].jar
      • google-oauth-client-[VERSION].jar
      • gson-[VERSION].jar
      • jackson-core-[VERSION].jar
      • jackson-core-asl-[VERSION].jar
      • jsr305-[VERSION].jar
    • Extract endpoints-lib/image/[APPENGINE_ID]-image-v[API_VERSION]-java-[VERSION]-rc-sources.jar and copy the files into your source folder, [MOBILE_APP_CODE]/src/com/appspot/[APPENGINE_ID]/image/*
  4. Configure the Android code to connect to the endpoints backend server
    • Replace [CLIENT_ID_WEB_APPLICATION] in [MOBILE_APP_CODE]/src/com/google/cloud/smashpix/Constants.java
    • Replace [APPENGINE_ID] in [MOBILE_APP_CODE]/src/com/google/cloud/smashpix/MainActivity.java
    • Replace [APPENGINE_ID] in [MOBILE_APP_CODE]/src/com/google/cloud/smashpix/ImageRowActivity.java
  5. Copy the Google Play Service library
    • Browse to [ANDROID_SDK]/extras/google/google_play_services/libproject/google-play-services_lib/libs/.
    • Copy google-play-services.jar into your Android code library folder, [MOBILE_APP_CODE]/libs/.
  6. Make sure all code dependencies are resolved.
  7. Run Android application.