If you are building your app using Phonegap platform, integrating App42 Push Notification in it is a very simple task and can be done in a few easy steps. We have created a sample PhoneGap Android application using App42 JavaScript API for the same and can be get started in few easy steps as shown below:
Si está construyendo su aplicación usando la plataforma Phonegap, integrando App42 Push Notification es una tarea muy sencilla y se puede hacer en pocos pasos muy simples. Hemos creado una muestra de una aplicación PhoneGap de Android usando App42 JavaScript API para la misma y puede ser puesta en marcha en pocos pasos como se muestra abajo.
Running Sample
Here are the few easy steps to run this sample app.
1. Register with App42 platform.
2. Create an app once you are on Quick start page after registration.
3. If you are already a registered user then login to AppHQ console and create an app from App Manager Tab.
4. To use Push Notification Service in your Android application, create a new project in Google API Console.
5. Click on services option in Google console and enable Google Cloud Messaging for Android service.
6. Click on API Access tab and create a new server key for your application with blank server information.
7. Go to AppHQ console and click on Push Notification and select Android Settings in Settings option.
8. Select your app and copy server key that was generated by using Google API console in step 6 and submit it.
9. Download the project from here and import it in the eclipse.
10. Open index.html file in assets/app42 folder of sample app and make the following changes:
[code]A. Replace api-Key and secret-Key that you have received in step 2 or 3 at line number 51.
B. Replace your user-id by which you want to register your application for PushNotification at line number 52.[/code]
11. Open App42PhonegapPush.java file in sample app and make the following changes.
[code]A. Replace project-no with your Google Project Number at line number 28.[/code]
12. Build your android application and install it on your android device.
Test and verify PushNotification from AppHQ console
[code]A. After registering for PushNotification go to AppHQ console and click on PushNotification and select application after selecting User tab.
B. Select desired user from registered User-list and click on Send Message Button.
C. Send appropriate message to the user by clicking Send Button.[/code]
Design Details:
Following are the high level design details which includes different App42 API usages for integration purpose in the sample.
1. Send PushNotification to User using JavaScript App42 API : If you want to send PushNotification message using App42 API , pass the userId and message in this method written in index.html file.
[code]function sendPushToUser()
{
var msg = document.getElementById(‘msg’).value;
var username = document.getElementById(‘user’).value;
var push = new App42Push();
push.sendPushMessageToUser(username, msg);
}[/code]
2. Send PushNotification to all users using JavaScript App42 API : If you want to send PushNotification message to all users using App42 API , pass message in this method written in index.html file.
[code]function sendPushMessageToAll()
{
var push = new App42Push();
var message = document.getElementById(‘msg’).value;
push.sendPushMessageToAll(message);
}[/code]
3. Customize PushNotification Message: You can also customize your PushNotification message by changing the following code in GCMIntentService.java file accordingly.
[code]Notification notification = new NotificationCompat.Builder(context)
.setContentTitle(title)
.setContentText(message)
.setContentIntent(intent)
.setNumber(++msgCount)
.setSmallIcon(android.R.drawable.menuitem_background)
.setWhen(when)
.setLargeIcon(bmp)
.setLights(Color.YELLOW, 1, 2)
.setAutoCancel(true)
.build();
notification.defaults |= Notification.DEFAULT_SOUND;
notification.defaults |= Notification.DEFAULT_VIBRATE;
notificationManager.notify(0, notification);[/code]
4. Calling JavaScript pushMessageAlert (msg) function from Android native code: Whenever PushNotification comes on device we have to render it on HTML page.
[code]public void renderData(final String message)
{
try
{
Thread.sleep(5000);
super.loadUrl(“javascript:pushMessageAlert(\”” + message + “\”)”);
}
catch (InterruptedException e)
{
e.printStackTrace();
}
}[/code]
5. Rendering PushNotification on HTML Page: Whenever PushNotification comes on device we have to render it on HTML page. Following function is called from Android native and render PushNotification on Html Page.
[code]function callFromActivity(msg)
{
alert(msg)
document.getElementById(“mytext”).innerHTML = msg;
}[/code]
6. Calling JavaScript registerForPush (deviceId) function from Android native code: This function is used to store device Id on App42 to get PushNotification.
[code]public void registerForApp42Push(String deviceId)
{
try
{
Thread.sleep(5000);
super.loadUrl(“javascript:registerForPush(\”” + deviceId + “\”)”);
}
catch (InterruptedException e)
{
e.printStackTrace();
}
}[/code]
7. Store Device Token on App42: This function stores device token on App42 using JavaScript API , called from Android native code
[code]function registerForPush(deviceId)
{
var push = new App42Push();
push.storeDeviceToken(App42.getLoggedInUser(),
deviceId,’ANDROID’);
}[/code]
8. AndroidManifest.xml file Changes: If you are customizing your own Android application that is built using PhoneGap API then make following changes in your AndroidManifest.xml using this sample’s AndroidManifest.xml file.
1. Add following permission in your AndroidManifest.xml file.
[code]
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION”>
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” >
<uses-permission android:name=”android.permission.GET_ACCOUNTS” >
<uses-permission android:name=”android.permission.INTERNET” >
<uses-permission android:name=”android.permission.VIBRATE” />
<uses-permission android:name=”android.permission.WAKE_LOCK” >
<permission
android:name=”com.shephertz.app42.android.phonegap.push.permission.C2D_MESSAGE”
android:protectionLevel=”signature” />
<uses-permission android:name=”com.shephertz.app42.android.phonegap.push.permission.C2D_MESSAGE” />
<uses-permission android:name=”com.google.android.c2dm.permission.RECEIVE” />
[/code]
2.Add Receiver component in your Androidmanifest.xml file.
[code]
<receiver
android:name=”com.google.android.gcm.GCMBroadcastReceiver”
android:permission=”com.google.android.c2dm.permission.SEND” >
<intent-filter>
<!– Receives the actual messages. –>
<action android:name=”com.google.android.c2dm.intent.RECEIVE” />
<!– Receives the registration id. –>
<action android:name=”com.google.android.c2dm.intent.REGISTRATION” />
<category android:name=”com.shephertz.app42.android.phonegap.push” />
</intent-filter>
</receiver>
[/code]
3.Declare Service in your AndroidManifest.xml file.
[code]
4.Replace application package name.
"com.shephertz.app42.android.phonegap.push" with your application package name in AndroidManifest.xml file.[/code]
If you have any questions or need any further assistance to integrate this, please feel free to write us at support@shephertz.com.
Aquí están los simples pasos para operar esta aplicación de muestra:
1. Regístrese en la plataforma App42
2. Cree una aplicación una vez este en la página de inicio rápido después del registro.
3. Si ya está registrado, entonces ingrese a la consola AppHQ y cree una aplicación desde App Manager Tab
4. Para usar el servicio de notificaciones en su aplicación de Android, cree un nuevo proyecto en Google API Console
5. Dele click en opciones de servicio en la consola de Google y habilite Google Cloud Messaging para servicio Android
6. Dele click en API Access tab y cree una nueva clave de servidor para su aplicación con información en blanco del servidor.
7. Vaya a la consola AppHQ y dele click en Push Notification y seleccione Android Settings en la opción de Settings.
8. Seleccione su aplicación y copie la clave del servidor que fue generado usando la consola Google API en el paso 6 y envíelo.
9. Descargue el proyecto desde aquí e impórtelo en el eclipse
10. Abra el archivo index.html en la carpeta assests/app42 de la aplicación de muestra y haga los siguientes cambios.
A. Replace api-Key and secret-Key that you have received in step 2 or 3 at line number 51.
B. Replace your user-id by which you want to register your application for PushNotification at line number 52.
11. Abra el archivo App42PhonegapPush.java en la aplicación de muestra y haga los siguientes cambios.
A. Replace project-no with your Google Project Number at line number 28.
12. Construya su aplicación Android e instálela en su dispositivo Android.
Verifique y pruebe PushNotification desde la consola AppHQ
A. After registering for PushNotification go to AppHQ console and click on PushNotification and select application after selecting User tab.
B. Select desired user from registered User-list and click on Send Message Button.
C. Send appropriate message to the user by clicking Send Button.
Detalles de diseño
A continuación se encuentran los detalles de diseño de alto nivel, los cuales incluyen diferentes App42 API usados con propósito de integración en esta muestra.
1. Enviar notificaciones a usuarios usando JavaScript App42 API: si quiere enviar mensajes de notificaciones usando App42 API, pase el userId y mande el mensaje en este método escrito en el archivo index.html.
function sendPushToUser()
{
var msg = document.getElementById('msg').value;
var username = document.getElementById('user').value;
var push = new App42Push();
push.sendPushMessageToUser(username, msg);
}
2. Enviar notificaciones a todos los usuarios usando JavaScript App42 API: si quiere enviar mensajes de notificaciones a todos los usuarios usando App42 API, pase el mensaje en este método escrito en el archivo index.html.
function sendPushMessageToAll()
{
var push = new App42Push();
var message = document.getElementById('msg').value;
push.sendPushMessageToAll(message);
}
3. Mensajes personalizados de notificaciones: También puede personalizar los mensajes de las notificaciones cambiando los siguientes códigos en el archivo GCMIntentService.java correspondientemente.
Notification notification = new NotificationCompat.Builder(context)
.setContentTitle(title)
.setContentText(message)
.setContentIntent(intent)
.setNumber(++msgCount)
.setSmallIcon(android.R.drawable.menuitem_background)
.setWhen(when)
.setLargeIcon(bmp)
.setLights(Color.YELLOW, 1, 2)
.setAutoCancel(true)
.build();
notification.defaults |= Notification.DEFAULT_SOUND;
notification.defaults |= Notification.DEFAULT_VIBRATE;
notificationManager.notify(0, notification);
4. Llamando la función JavaScript pushMessageAlert (msg) desde código nativo de Android: Cuando sea que lleguen las notificaciones llegan al dispositivo tenemos que mostrarlo en una página de HTML.
public void renderData(final String message)
{
try
{
Thread.sleep(5000);
super.loadUrl("javascript:pushMessageAlert(\"" + message + "\")");
}
catch (InterruptedException e)
{
e.printStackTrace();
}
}
5. Presentación de notificaciones en una página de HTML: Cuando sea que lleguen las notificaciones llegan al dispositivo tenemos que mostrarlo en una página de HTML. La siguiente función es llamada desde nativo de Android y presentado la notificación en la página de Html.
function callFromActivity(msg)
{
alert(msg)
document.getElementById("mytext").innerHTML = msg;
}
6. Llamando la función JavaScript registerForPush (diviceld) desde código nativo de Android: esta función es usada para almacenar el Id del dispositivo en App42 para obtener notificaciones.
public void registerForApp42Push(String deviceId)
{
try
{
Thread.sleep(5000);
super.loadUrl("javascript:registerForPush(\"" + deviceId + "\")");
}
catch (InterruptedException e)
{
e.printStackTrace();
}
}
7. Almacene el token del dispositivo en App42: esta función almacena el token del dispositivo en App42 usando JavaScript API, llamado desde código nativo de Android
function registerForPush(deviceId)
{
var push = new App42Push();
push.storeDeviceToken(App42.getLoggedInUser(),
deviceId,'ANDROID');
}
8. Cambios en el archivo AndroidManifest.xml: si está personalizando su propia aplicación de Android que fue construida usando PhoneGap API entonces haga los siguientes cambios en AndroidManifest.xml usando este archivo de muestra AndroidManifest.xml.
1. Agregue el siguiente permiso en su archivo AndroidManifest.xml.
2. Agregue el componente del receptor en su archivo AndroidManifest.xml
3. Declare Service en su archivo AndroidManifest.xml
4. Reemplace el nombre del paquete de la aplicación
"com.shephertz.app42.android.phonegap.push" with your application package name in AndroidManifest.xml file.
Si tiene alguna pregunta o necesita ayuda más adelante, por favor contáctenos a support@shephertz.com.
Leave A Reply