Home | History | Annotate | Download | only in gcm
      1 page.title=GCM Demo Application
      2 @jd:body
      3 
      4 <div id="qv-wrapper">
      5 <div id="qv">
      6 
      7 <h2>Quickview</h2>
      8 
      9 <ul>
     10 <li>Build and run the GCM demo app.</li>
     11 <li>Understand how to set up both the client and server sides of a GCM app.</li>
     12 <li>Become familiar with the GCM helper libraries.</li>
     13 </ul>
     14 
     15 
     16 <h2>In this document</h2>
     17 
     18 <ol>
     19   <li><a href="#requirements">Requirements</a> </li>
     20   <li><a href="#gcm-setup">Setting Up GCM</a></li>
     21   <li><a href="#server-setup">Setting Up the Server</a>
     22     <ol>
     23       <li><a href="#webserver-setup">Using a standard web server</a></li>
     24       <li><a href="#appengine-setup">Using App Engine for Java</a></li>
     25     </ol>
     26   </li>
     27   <li><a href="#device-setup">Setting Up the Device</a></li>
     28 </ol>
     29 
     30 </div>
     31 </div>
     32 
     33 <p>The Google Cloud Messaging (GCM) Demo demonstrates how to use the Google Cloud Messaging framework in your Android application. This tutorial walks you through setting up and running the demo.</p>
     34 
     35 
     36 <p>This demo consists of the following pieces: </p>
     37 <ul>
     38   <li>A web server containing a page where you can send messages.</li>
     39   <li>An Android application that receives and displays such messages.</li>
     40 </ul>
     41 <p>Here is the API reference documentation for the helper libraries on which the demo is based:</p>
     42 <ul>
     43   <li><a href="{@docRoot}guide/google/gcm/client-javadoc/index.html">Client Reference</a></li>
     44   <li><a href="{@docRoot}guide/google/gcm/server-javadoc/index.html">Server Reference</a></li>
     45 </ul>
     46 <h2 id="requirements">Requirements</h2>
     47 <p>For the web server:</p>
     48 <ul>
     49   <li> <a href="http://ant.apache.org/">Ant 1.8</a> (it might work with earlier versions, but it's not guaranteed).</li>
     50   <li>One of the following:
     51     <ul>
     52       <li>A running web server compatible with Servlets API version 2.5, such as <a href="http://tomcat.apache.org/">Tomcat 6</a> or <a href="http://jetty.codehaus.org/">Jetty</a>, or</li>
     53       <li><a href="http://code.google.com/appengine/">Java App Engine SDK</a>version 1.6 or later.</li>
     54     </ul>
     55   </li>
     56   <li>A Google account registered to use GCM.</li>
     57   <li>The API  key for that account.</li>
     58 </ul>
     59 <p>For the Android application:</p>
     60 <ul>
     61   <li>Emulator (or device) running Android 2.2 with Google APIs.</li>
     62   <li>The Google API project ID of the account registered to use GCM.</li>
     63 </ul>
     64 <h2 id="gcm-setup">Setting Up GCM</h2>
     65 <p>Before proceeding with the server and client setup, it's necessary to register a Google account with the Google API Console, enable Google Cloud Messaging in GCM, and obtain an API key from the <a href="https://code.google.com/apis/console">Google API Console</a>.</p>
     66 <p>For instructions on how to set up GCM, see <a href="gs.html">Getting Started</a>.</p>
     67 
     68 
     69 <h2 id="server-setup">Setting Up the Server</h2>
     70 <p>This section describes the different options for setting up a server.</p>
     71 <h3 id="webserver-setup">Using a standard web server</h3>
     72 <p>To set up the server using a standard, servlet-compliant web server:</p>
     73 <ol>
     74   <li> From the SDK Manager, install <strong>Extras &gt; Google Cloud Messaging for Android Library</strong>.
     75     
     76     
     77     <p>This creates a <code>gcm</code> directory under <code><em>YOUR_SDK_ROOT</em>/extras/google/</code> containing these subdirectories: <code>gcm-client</code>, <code>gcm-demo-appengine</code>, <code>gcm-demo-client</code>, <code>gcm-demo-server</code>, and <code>gcm-server</code>.</p>
     78   </li>
     79 
     80   <li>In a text editor, edit the <code>gcm-demo-server/WebContent/WEB-INF/classes/api.key</code> and replace the existing text with the API key obtained above.</li>
     81   <li>In a shell window, go to the <code>gcm-demo-server</code> directory.</li>
     82   <li>Generate the server's WAR file by running <code>ant war</code>:</li>
     83   
     84   <pre class="prettyprint">$ ant war
     85 
     86 Buildfile:build.xml
     87 
     88 init:
     89    [mkdir] Created dir: build/classes
     90    [mkdir] Created dir: dist
     91 
     92 compile:
     93    [javac] Compiling 6 source files to build/classes
     94 
     95 war:
     96      [war] Building war: <strong>dist/gcm-demo.war</strong>
     97 
     98 BUILD SUCCESSFUL
     99 Total time: 0 seconds
    100 </pre>
    101   
    102   <li>Deploy the <code>dist/gcm-demo.war</code> to your running server. For instance, if you're using Jetty, copy <code>gcm-demo.war</code> to the <code>webapps</code> directory of the Jetty installation.</li>
    103   <li>Open the server's main page in a browser. The URL depends on the server you're using and your machine's IP address, but it will be something like <code>http://192.168.1.10:8080/gcm-demo/home</code>, where <code>gcm-demo</code> is the application context and <code>/home</code> is the path of the main servlet.
    104     
    105   </li>
    106 </ol>
    107 <p class="note"><strong>Note:</strong> You can get the IP by running<code>ifconfig</code>on Linux or MacOS, or<code>ipconfig</code>on Windows. </p>
    108 <p><img src="{@docRoot}images/gcm/gcm-demo-homepage.png" class="screenshot" /></p>
    109 <p> You server is now ready.</p>
    110 <h3 id="appengine-setup">Using App Engine for Java</h3>
    111 
    112 <p>To set up the server using a standard App Engine for Java:</p>
    113 <ol>
    114   <li> From the SDK Manager, install <strong>Extras &gt; Google Cloud Messaging for Android Library</strong>.
    115     <p>This creates a <code>gcm</code> directory under <code><em>YOUR_SDK_ROOT</em>/extras/google/</code> containing these subdirectories: <code>gcm-client</code>, <code>gcm-demo-appengine</code>, <code>gcm-demo-client</code>, <code>gcm-demo-server</code>, and <code>gcm-server</code>.</p>
    116   </li>
    117   <li>In a text editor, edit the <code>gcm-demo-appengine/src/com/google/android/gcm/demo/server/ApiKeyInitializer.java</code> and replace the existing text with the API key obtained above.
    118   <p class="note"><strong>Note:</strong> The API key value set in that class will be used just once to create a persistent entity on App Engine. If you deploy the application, you can use App Engine's <code>Datastore Viewer</code> to change it later.</p>
    119   
    120   </li>
    121   <li>In a shell window, go to the <code>gcm-api-server</code> directory.</li>
    122   <li>Start the development App Engine server by <code>ant runserver</code>, using the <code>-Dsdk.dir</code> to indicate the location of the App Engine SDK and <code>-Dserver.host</code> to set your server's hostname or IP address:</li>
    123 
    124 <pre class="prettyprint">
    125 $ ant -Dsdk.dir=/opt/google/appengine-java-sdk runserver -Dserver.host=192.168.1.10
    126 Buildfile: gcm-demo-appengine/build.xml
    127 
    128 init:
    129     [mkdir] Created dir: gcm-demo-appengine/dist
    130 
    131 copyjars:
    132 
    133 compile:
    134 
    135 datanucleusenhance:
    136   [enhance] DataNucleus Enhancer (version 1.1.4) : Enhancement of classes
    137   [enhance] DataNucleus Enhancer completed with success for 0 classes. Timings : input=28 ms, enhance=0 ms, total=28 ms. Consult the log for full details
    138   [enhance] DataNucleus Enhancer completed and no classes were enhanced. Consult the log for full details
    139 
    140 runserver:
    141      [java] Jun 15, 2012 8:46:06 PM com.google.apphosting.utils.jetty.JettyLogger info
    142      [java] INFO: Logging to JettyLogger(null) via com.google.apphosting.utils.jetty.JettyLogger
    143      [java] Jun 15, 2012 8:46:06 PM com.google.apphosting.utils.config.AppEngineWebXmlReader readAppEngineWebXml
    144      [java] INFO: Successfully processed gcm-demo-appengine/WebContent/WEB-INF/appengine-web.xml
    145      [java] Jun 15, 2012 8:46:06 PM com.google.apphosting.utils.config.AbstractConfigXmlReader readConfigXml
    146      [java] INFO: Successfully processed gcm-demo-appengine/WebContent/WEB-INF/web.xml
    147      [java] Jun 15, 2012 8:46:09 PM com.google.android.gcm.demo.server.ApiKeyInitializer contextInitialized
    148      [java] SEVERE: Created fake key. Please go to App Engine admin console, change its value to your API Key (the entity type is 'Settings' and its field to be changed is 'ApiKey'), then restart the server!
    149      [java] Jun 15, 2012 8:46:09 PM com.google.appengine.tools.development.DevAppServerImpl start
    150      [java] INFO: The server is running at http://192.168.1.10:8080/
    151      [java] Jun 15, 2012 8:46:09 PM com.google.appengine.tools.development.DevAppServerImpl start
    152      [java] INFO: The admin console is running at http://192.168.1.10:8080/_ah/admin
    153 </pre>
    154 
    155   <li>Open the server's main page in a browser. The URL depends on the server you're using and your machine's IP address, but it will be something like <code>http://192.168.1.10:8080/home</code>, where <code>/home</code> is the path of the main servlet.</li>
    156   
    157   <p class="note"><strong>Note:</strong> You can get the IP by running <code>ifconfig</code> on Linux or MacOS, or <code>ipconfig</code> on Windows.</p>
    158   
    159   <p><img src="{@docRoot}images/gcm/gcm-demo-homepage-appengine.png" class="screenshot" /></p>
    160 </ol>
    161 <p> You server is now ready.</p>
    162 <h2 id="device-setup">Setting Up the Device</h2>
    163 <p>To set up the device:</p>
    164 <ol>
    165   <li> From the SDK Manager, install <strong>Extras &gt; Google Cloud Messaging for Android Library</strong>.
    166     <p>This creates a <code>gcm</code> directory under <code><em>YOUR_SDK_ROOT</em>/extras/google</code> containing these subdirectories: <code>gcm-client</code>, <code>gcm-demo-appengine</code>, <code>gcm-demo-client</code>, <code>gcm-demo-server</code>, <code>gcm-server</code>, and <code>source.properties</code>.</p>
    167   </li>
    168   <li>Using a text editor, open  <code>gcm-demo-client/src/com/google/android/gcm/demo/app/CommonUtilities.java</code> and set the proper values for the <code>SENDER_ID</code> and <code>SERVER_URL</code> constants. For example:</li>
    169 
    170 <pre class="prettyprint pretty-java">
    171 static final String SERVER_URL = &quot;http://192.168.1.10:8080/gcm-demo";;
    172 static final String SENDER_ID = &quot;4815162342&quot;;</pre>
    173 <p>Note that the <code>SERVER_URL</code> is the URL for the server and the application's context (or just server, if you are using App Engine), and it does not include the forward slash (<code>/</code>). Also note that <code>SENDER_ID</code> is the Google API project ID you obtained in the server setup steps above.</p>
    174 
    175   <li>In a shell window, go to the <code>gcm-demo-client</code> directory.</li>
    176   <li>Use the SDK's <code>android</code> tool to generate the <code>ant</code> build files:</li>
    177 
    178 <pre class="prettyprint">
    179 $ android update project --name GCMDemo -p . --target android-16
    180 Updated project.properties
    181 Updated local.properties
    182 Updated file ./build.xml
    183 Updated file ./proguard-project.txt
    184 </pre>
    185 <p>If this command fails becase <code>android-16</code> is not recognized, try a different target (as long as it is at least <code>android-15</code>).</p>
    186 
    187 <li>Use <code>ant</code> to build the application's APK file:</li>
    188 
    189  <pre class="prettyprint">
    190 $ ant clean debug
    191 Buildfile: build.xml
    192 
    193 ...
    194 
    195 
    196 -do-debug:
    197 [zipalign] Running zip align on final apk...
    198     [echo] Debug Package: bin/GCMDemo-debug.apk
    199 [propertyfile] Creating new property file: <strong>bin/build.prop</strong>
    200 [propertyfile] Updating property file: bin/build.prop
    201 [propertyfile] Updating property file: bin/build.prop
    202 [propertyfile] Updating property file: bin/build.prop
    203 
    204 -post-build:
    205 
    206 debug:
    207 
    208 BUILD SUCCESSFUL
    209 Total time: 3 seconds
    210  </pre>
    211  
    212 <li>Start the Android emulator:</li>
    213 <pre class="prettyprint">$emulator -avd my_avd
    214 </pre>
    215 
    216 <p> This example assumes there is an AVD (Android Virtual Device) named <code>my_avd</code> previously configured with Android 2.2 and Google APIs level 8. For more information on how to run an Android emulator, see <a href="{@docRoot}tools/devices/index.html">Managing Virtual Devices</a> in the Android Developers Guide.</p>
    217 
    218 <li>Make sure there is a Google account added to the emulator. It doesn't have to be any account (like the <code>senderId</code>) in particular. </li>
    219 
    220 <p> If the emulator is running Android 4.0.4 or later, this step is optional as GCM does not require an account from this version on.</p>
    221 
    222 <li>Install the application in the emulator:</li>
    223 
    224 <pre class="prettyprint">
    225 $ ant installd
    226 Buildfile: gcm-demo-client/build.xml
    227 
    228 -set-mode-check:
    229 
    230 -set-debug-files:
    231 
    232 install:
    233      [echo] Installing gcm-demo-client/bin/GCMDemo-debug.apk onto default emulator or device...
    234      [exec] 1719 KB/s (47158 bytes in 0.026s)
    235      [exec]   pkg: /data/local/tmp/GCMDemo-debug.apk
    236      [exec] Success
    237 
    238 installd:
    239 
    240 BUILD SUCCESSFUL
    241 Total time: 3 seconds
    242 </pre>
    243   <li>In the emulator, launch the GCM Demo app. The initial screen should look like this:</li>
    244   <p><img src="{@docRoot}images/gcm/gcm-avd-home-auto-reg.png" class="screenshot" /></p>
    245 <p class="note"><strong>Note:</strong> What happened? When the device received a registration callback intent from GCM, it contacted the server to register itself, using the register servlet and passing the registration ID received from GCM; the server then saved the registration ID to use it to send messages to the phone.</p>
    246 <li> Now go back to your browser and refresh the page. It will show that there is one device registered:</li>
    247 
    248 <p><img src="{@docRoot}images/gcm/gcm-device-reg.png" class="screenshot" /></p>
    249 
    250 <li>Click on <strong>Send Message</strong>. The browser should show:</li>
    251 <p><img src="{@docRoot}images/gcm/gcm-sent-server.png" class="screenshot" /></p>
    252 
    253 <p>And in your emulator:</p>
    254 
    255 <p><img src="{@docRoot}images/gcm/gcm-avd-first-msg.png" class="screenshot" /></p>
    256 
    257 <p class="note"><strong>Note:</strong> What happened? When you clicked the button, the web server sent a message to GCM addressed to your device (more specifically, to the registration ID returned by GCM during the registration step). The device then received the message and displayed in the main activity; it also issued a system notification so the user would be notified even if the demo application was not running.</p>
    258 </ol>
    259 
    260