Creating RSS Reader App using Telerik Icenium in Three simple steps

Learn more about Icenium here

In this post we will learn to create RSS reader App in Telerik Icenium. While creating this app we will have learning on creating following topics,

  • Kendo DataSource
  • Kendo Template
  • Kendo ListView

In this post we will create RSS Reader of https://telerikhelper.net/. Final output should be as follows,

clip_image001

Step 1: Create DataSource

To start with we will use YML to read RSS feed. Let us configure URL of Yahoo Query and RSS feed of desired site. Below I have configured that for https://telerikhelper.net/.


var url = "https://telerikhelper.net/feed/";
var proxyUrl = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'" + encodeURIComponent(url) +"'";

Next we need to create Kendo DataSource. That can be created using proxyUrl. RSS feed returns XML and we need to configure that while creating DataSource.


var telerikHelperRSSDS = new kendo.data.DataSource({
 transport:{
 read:{
 url: proxyUrl,
 dataType: "xml"
 }
 },
 schema:{
 type:"xml",
 data:"query/results/rss/channel/item",
 model:{
 id:"guid",
 fields:{
 title: "title/text()",
 pubDate: "pubDate/text()",
 story: "description/text()",
 url: "link/text()",
 id: "guid/text()"
 }
 }
 }
});

 

There are couple of points worth discussing about above code snippet,

  • We are creating schema reading title , published date , story and url of the post
  • Id of model is set to guid
  • Setting up data type as xml
  • data is set as query/results/rss/channel/item

 

Step 2: Create Template

Once DataSource is created next we need to create Template. Kendo Template decide how data will be displayed. We are displaying title and publication date of post.

You can see that

</span>

<script id="telerikhelperrsstemplate" type="text/x-kendo-template">

 <p class="titlecs">#=title#</p>
 <p class="datecs">#=pubDate#</p>

 </script>

Step 3: Creating ListView

In last step we need to create ListView. ListView is the Kendo UI Widget in which we will display RSS feeds.

ListView can be created as follows,

 <div data-role="view" id="telerikhelperrssview" data-title="TelerikHelper">
 <ul id="telerikhelperview"
 data-source="telerikHelperRSSDS"
 data-endlessscroll="true"
 data-template="telerikhelperrsstemplate"
 data-role="listview"
 data-style="inset">
 </ul>
 </div>

In ListView we are setting

  • Data source
  • Data template
  • Data style

That’s it. We need to perfrom only these three steps to create RSS Reader App using Telerik Icenium

clip_image001[6]

I hope you find this post useful. Thanks for reading.

Advertisement

How to send Email using Telerik Everlive from Cross-Platform Mobile Application

Have you ever come across scenario in which you need to send an Email from your app? There are various ways you can do that. Some of them are as follows,

  1. Sending Email using PhoneGap API
  2. Sending Email using HTML5
  3. Delegate Send Email task to a server

In this post we will learn to send Email using Telerik Everlive. Everlive is a cloud based Backend as a Service. It provides you many functionalities using Email Services. You can send Email from your app using Telerik Everlive.

image

There are two components in Everlive Email Service.

  1. Email Template
  2. Send Email

Before sending Email, you need to create Email Template. You can create Email Template in two ways,

  1. Using code in your app
  2. At portal

You need id of Email Template to send Email. Okay so in this post we are going to create Email Template in portal. To create Email Template login to portal and you will get option to create Email Template.

image

As you see there are four default Email Templates already available in Telerik Everlive. To create new template click on Add an item and at right hand side you get option to create new Email Template. After successful creation of new Email Template you can view that in Template List. You need ID of the Email Template at code to send Email from App.

image

Make sure that you have copied API key and Account Key of application. You need this to send Email using code. You can get keys by clicking on API KEYS in left options.

Okay so we have done configuration at portal. We created Email Template. Next we need to send Email from app. We can send Email using REST API.

Very first you need to create recipients. You can create this as JavaScript object. In below code I am setting two Email addresses to send in TO.


var recipients = {
 "Recipients": [
 “Dhananjay.kumar@telerik.com”,
 “debugmode@outlook.com”
 ],
 "Context":{
 "SpecialOffer":"Happy New Year”
 }
 };

Once you have created recipients you need to make a AJAX post to send an Email using Telerik Email. You can send an Email using code below.


$.ajax({
 type: "POST",
 url: 'http://api.everlive.com/v1/Metadata/Applications/PUTYOURAPIKEY/EmailTemplates/PUTYOUREMAILTEMPLATEID/send',
 contentType: "application/json",
 headers: { "Authorization" : "Accountkey PUTYOURACCOUNTKEY" },
 data: JSON.stringify(recipients),
 success: function(data){
 alert("Email successfully sent.");
 },
 error: function(error){
 alert(JSON.stringify(error));
 }
});

Above code is very simple,

  • In URL you need to set API key and ID of Template
  • In headers put account key of application
  • In data set recipients
  • On success you can set a JavaScript function as callback
  • On error you can set a JavaScript function as callback

That’s it. You need to do only this much of work to send an Email using Telerik Everlive from Cross-platform application. I hope you find this post useful. Thanks for reading.

How to fetch Data from Telerik Everlive using REST API in a Web Application.

Learn more about Kendo UI here

Learn more about Icenium here

In this post we will take a look on fetching data from Telerik Everlive using REST API and use it in a web application. In web app we will be using Kendo UI DataSource to bind data to Kendo UI web ListView.

We are going to learn following,

  • Fetch data from Telerik Everlive using REST API
  • Create Kendo DataSource from returned data
  • Bind data to Kendo UI ListView

Okay so to keep it simple, I have created a simple Content Type Products in Everlive project as below. Permission of this Products content type is set as Public.

clip_image001

To fetch data from Telerik Everlive using REST API, Simply you can fetch data from Icenium Everlive using a AJAX call. You need to provide

  1. URL of the Everlive project with API key
  2. Content type name should be appended in URL. In this case we have appended Products (name of content type) in URL.
  3. Set type as GET
  4. You need to set two callback function. One Callback function will be called on success and another on error.

So data can be fetched using below code. You may want to notice that you need to replace yourapikey in URL with API key for your Everlive project.


$.ajax({
 url: 'http://api.everlive.com/v1/yourapikey/Products',
 type: "GET",
 headers: {
 "Authorization": "Bearer ${AccessToken}"
 },
 success: function (data) {
 BindDataToListView(data);
 },
 error: function (error) {
 alert(JSON.stringify(error));
 }
})

BindDataToListView is callback function and this function will be called on success fetching of data. In this function you need to create Kendo UI DataSource from returned data. Before we do that let us examine what value we get from Everlive server.

clip_image001[6]

You should get below output in browser console,

clip_image002

You can see that in output you are getting count and data in Result property of the returned Object. So you can create Kendo DataSource as follows,

function BindDataToListView(e)
{
 console.log(e);
 var dsource = new kendo.data.DataSource(
 {
 data: e.Result
 });

}

Again in Console log you can view that Kendo DataSource has been created from returned data.

clip_image001[8]

Next we need to create Kendo Template and Kendo ListView. We are going to create a very simple template as follows,


<script type="text/x-kendo-template" id="producttemplate">
 <div>
 <h2>#:ProductName# <br/>
 <h3>#=UnitInStock# #:UnitPrice#</h3>
 </div>
</script>

And to create Kendo ListView create a HTML div as follows,


<div id="listView"></div>

Again let us go back to callback function BindDataToListView() and convert div to Kendo ListView and bind already datasource

function BindDataToListView(e)
{
 console.log(e);
 var dsource = new kendo.data.DataSource(
 {
 data: e.Result
 });
 console.log(dsource);

$("#listView").kendoListView({
 dataSource: dsource,
 template: kendo.template($("#producttemplate").html())
 });

}

This is it. We are setting datasource and template after converting HTML div as Kendo ListView. When you run this web application you should get output as below,

clip_image002

In this way you can fetch data from Telerik Everlive using REST API and use in Kendo UI Web. I hope you find this post useful. Thanks for reading.

How to share on Facebook from Cross Platform Mobile App created using Icenium

Find project on GitHub

On any kind of Apps sharing on Facebook could be a frequent task. Icenium a Cloud Based IDE allows you to create Cross Platform Apps. In this blog post we will take a look on sharing status on FaceBook from a Cross Platform App being created using Icenium.

To start with let us create view. I am putting an input text box and a button. On click of button text from input box will be shared on FB wall of user.

image

Very first we will create helper functions we need to post To start with let us create an identity provider. Identity Provider can be created as given in following code


var IdentityProvider = function (config) {
 var that = this;
 var ref;
 this.getAccessToken = function (callback) {

// Begin Authorization
 var authorize_url = config.endpoint
 + "?response_type=" + config.response_type
 + "&client_id=" + config.client_id
 + "&redirect_uri=" + config.redirect_uri
 + "&display=" + config.display
 + "&access_type=" + config.access_type
 + "&scope=" + config.scope

//CALL IN APP BROWSER WITH THE LINK
 ref = window.open(authorize_url, '_blank', 'location=no');

ref.addEventListener('loadstart', function (event) {
 that.locationChanged(event.url, callback);
 });

ref.addEventListener('loadstop', function (event) {
 that.locationChanged(event.url, callback);
 });
 }

this.locationChanged = function (loc, callback) {
 if (loc.indexOf("access_token=") != -1) {
 ref.close();
 var token = getParameterByName("access_token", loc);
 callback(token);
 }
 }
}

&nbsp;

We are using a function to get parameter by name. Below function is doing this task.


function getParameterByName(name, url) {
 name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
 var regexS = name + "=([^&#]*)";

console.log("Parameter name: " + name);
 console.log("Url: " + url);

var regex = new RegExp(regexS);
 var results = regex.exec(url);

console.log("Result: " + results);

if (results == null) {
 return false;
 }
 else
 return decodeURIComponent(results[1].replace(/\+/g, " "));
}

Once identity provider is being created, next you need to create instance of IdentityProvider. Important configuration you need to pass are as follows

  • Name of the app
  • In client id make sure to pass client if for your app. You will get client id while registering your app to Facebook.
  • In case of Cross Platform mobile App redirect Uri will be always as given in below setting
  • loginMethodName would be always loginWithFaceBook

var facebook = new IdentityProvider({
 name: "My Test App",
 loginMethodName: "loginWithFacebook",
 endpoint: "https://www.facebook.com/dialog/oauth",
 response_type: "token",
 client_id: fbClientID,
 redirect_uri: "https://www.facebook.com/connect/login_success.html",
 access_type: "online",
 scope: "email,publish_actions",
 display: "touch"
});

By this step we have created all the helper functions we need to post an update on Facebook. Now on click event of the button we will

  • get Access Token from helper function
  • pass that to Graph API to post on FaceBook

Below we are reading textbox value, fetching access token and calling a function to make a FB post.


function PostOnFb(e)
{
 var msgToPost = $('#msgTxt').val();
 alert(msgToPost)
 facebook.getAccessToken(function (token) {
 makefbPost(msgToPost, "http://debugmode.net", "DebugMode", token);
 });
}

We are passing

  • message to post
  • URL of application
  • Title of the post and
  • FB token to post status message

Last function we need to create to make a FB post. That function is as given below.


function makefbPost(FBmessage, FBLink, FBLinkName, fbToken) {
 var postURL = "https://graph.facebook.com/me/feed";
 var data = {};
 data.message = FBmessage;
 data.name = FBLinkName;
 data.link = FBLink;

data.access_token = fbToken;
 console.log("Token:" + fbToken);

$.post(postURL, data)
 .done(function (results) {
 navigator.notification.alert("Status Posted", function () { }, "DebugMode", "Done");

})
 .error(function (err)
 navigator.notification.alert("Error encountered. Details:" + err.message, function () { }, "Error", "Done");
 });
}

In above function important points are as follows

  • We are posting data to URL https://graph.facebook.com/me/feed. We are using Facebook Graph API to post status on Facebook
  • We are setting message, link, name and access token as property of data to be posted.

This is all what you need to do to post a Facebook status message from a Cross Platform Mobile Application being created using Icenium.

How to perform various tasks while navigating to/from KendoUI Mobile View in Cross Platform App

Learn more about Kendo UI here

Recently while conversing with one of the customers I came across some of the following queries,

  • How to do some tasks while navigating away from Mobile View
  • How to do some tasks while navigating to a Mobile View

Let us first simplify above queries. Essentially customer wants to call JavaScript functions while navigating to or navigating away from the Mobile View. There could be following combinations of scenarios like following,

  • Perform some task before Mobile View is visible
  • Perform some task after Mobile View is visible
  • Perform some task before Mobile View is hidden
  • Perform some task after Mobile View is hidden
  • Perform some task when Mobile View is visible
  • Perform some task when Mobile View is hidden

Kendo UI Mobile View provides events for all these scenario. As a developer what all you need to do is to call various events associated with Kendo UI Mobile View. Various events with their purpose is depicted in below image,

image

Now let us consider example that you need to perform a task before Kendo UI Mobile view is getting visible. You can do that by setting data-before-show attribute of Mobile View. In below image we are setting data-before-show property to a function with name myfunct.

image

Now each time before homeview (id of the view in example is set to homeview) will be navigated or get visible a function myfunct will be called. In the same way you can set other events as attributes to achieve a particular task while navigating to or away from view. Let us consider one more example that you want to achieve a task after view is hidden. In that scenario you need to set data-hide attribute of the view. We can achieve that as given in following image,

image

In this way you can set events as attributes to achieve any tasks while navigating to and from a Mobile View. Below I am putting codes from above discussion,


<div id="homeview"
 data-role="view"
 data-title="Mobile View"
 data-before-show="myfunct"
 data-hide="myfunct1" >

 <h1>Mobile View Contnet</h1>

 </div>

<script>
 function myfunct() {

alert("Called before View is Visible");
 console.log("Called before View is Visible");
 }
 function myfunct1() {

alert("Called after View is Hiden");
 console.log("Called after View is Hiden");
 }
 </script>

I hope you find this post useful. Thanks for reading.

Learn more about Kendo UI here

Create Android App in Visual Studio using Icenium

In this post we will take a step by step look on creating Android app using Visual Studio. To create Android or iPhone app you need Icenium Extension for Visual Studio.

Learn more about Icenium here

Let us start step by step from installation to creating Android APK package. Follow the steps below,

Step1: Download and Installation

Very first you need to install Icenium Extension for Visual Studio from here . After successful download close all running instances of Visual Studio and install Icenium Extension for Visual Studio.

image

After successful installation launch Visual Studio and you will get Icenium tab. There you can choose any project template as per your requirement.

clip_image002

Step2: Create project

After successful download and installation go ahead and create project for Cross Platform Mobile Application. You have four options to create application depending on library you want to use.

For example if you want to use your own library then go ahead and select Blank Project Template and start adding your own library to create apps.

To create app using jQuery Mobile select jQuery Mobile project template.

To create app using Kendo UI Mobile select Kendo UI Mobile project template. In this scenario I am going to create app using Kendo UI Mobile.

Here I have created a project selecting Kendo UI Mobile. On successful creation of project, you get a reference project created for you. You can use this as reference to build your app further. Project structure in solution explorer will look like following,

image 

In this post I am not going into much details of programming aspect so let us consider that we want to publish default created app to Google Play.

Step 3: Build and Test in Simulator

We are going to build default reference app got created. In menu you will find an option Icenium.

clip_image002[6]

To test application in simulator select Run in Simulator option. You will get application running in simulator. Icenium supports iPhone, iPad, Android, Android tab simulator. In Android phone simulator default created app will look like as given in below image,

clip_image003

We will talk in detail about simulator in later posts.

Next we need to build app for Android. You can do that by selecting Build App in Cloud option from Icenium menu in visual studio.

clip_image005

Here select Android Build option. After successful build you will get two options to run Android app on device.

image

Option one is to scan the QR code and option two is that you will find apk package in project’s bin->debug->android folder.

clip_image002[8]

You need to upload apk package in Google Play to publish your android app to Google Play.

We just learnt it is super easy to create Android app in Visual Studio using Icenium extension.

How to work with camera in Icenium

Learn more about Icenium here

In this post we will take a look on working with camera in Icenium. You can access camera in Icenium using Cordova or PhoneGap.

Let us say we want to capture a photo on touch of a button. I have designed view as below. On touch of button camera will be launched and then taken photo will get bind to image control.


<div id="home"
 data-role="view"
 data-title="Share">
 <button onclick="capturePhoto();">Capture Photo</button> <br>
 <img style="width:60px;height:60px;" id="smallImage" src="" />
 </div>

On touch of Capture Photo button we are calling function capturePhoto().


function capturePhoto() {

navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
 quality: 50,
 destinationType: destinationType.DATA_URL
 }
 );

}

In above function we are using cordova function navigator.camera.getPicture() to launch camera and click photo. You can pass many optional parameters to this function like quality, destinationType, sourceType, targetWidth , targetHeight etc.

On successful selection of photo onPhotoDataSucess function will be called. In this function you can access photo and use that as per your required. In this scenario we are binding that too an image control.


function onPhotoDataSuccess(imageData) {

 var smallImage = document.getElementById('smallImage');

&nbsp;

smallImage.src = "data:image/jpeg;base64," + imageData;
 }

As you see that we are reading image with data url and setting that as source of image. If there is error selecting photo then onFail() function will be called. We can simply display an error message in this function.


function onFail(message) {
 alert('Failed because: ' + message);
 }

In this way you can work with camera in Icenium. I hope you find this post useful. Thanks for reading.

How to insert data in Icenium Everlive using KendoUI DataSource

Read about Icenium here

Read more about Kendo UI DataSource here

Icenium Everlive is Backend as a Service offering from Telerik. In this post we will take a look on how easily KendoUI DataSource can be used to fetch data from Icenium Everlive.

Read : How to fetch data from Icenium Everlive using KendoUI DataSource

To start with, in Everlive I have created a content type with name Session. In Everlive Content type represents a data type or loosely I can say it represents a table. I have created content type with name Sessions. Now we need to insert and item in Sessions content type using Kendo UI DataSource.

Very first we need to add reference of Everlive as below,


<script src="scripts/everlive.all.min.js"></script>

After adding reference create instance of Everlive as below. You need to pass Everlive application key as parameter while creating instance of Everlive. You will find application key on Everlive portal.


var el = new Everlive('W1286lVOH0DXYZ');

Now you will be amazed seeing how easily you can insert item in Session content type using Kendo UI DataSource. Before creating an item or inserting an item, create Kendo UI DataSource as following.


var sessionDataSource = new kendo.data.DataSource({
 type: 'everlive',
 transport: {
 typeName: 'Sessions'
 },
 schema: {
 model: { id: Everlive.idField }
 }

});

While creating Kendo UI Data Source, we need to set following

  • type as everlive
  • In transport typeName as content type name. You need to provide name of the content type which data items you want to fetch. In this case we want items of Sessions content type so typeName is Sessions

Once Kendo UI DataSource is created, you need to create item to be inserted in Everlive . So let us go ahead and create item for Sessions content type as following,


var sessionItemToAdd = {
 'Name': 'Cloud',
 'Time': '09:00-10:00',
 'Level': '300',
 'SpeakerName': 'dj',
 'HallName': 'A',
 'Date': '3rd Oct',
 'Day': 'Day 1'

};

Now you have item to be inserted. Next add this item to DataSource using Add method. After adding that call sync() method on DataSource. You can achieve adding and syncing with Everlive server as given in below code,


sessionDataSource.add(sessionItemToAdd );
 sessionDataSource.sync();
 console.log("data inserted");

Putting above discussion all together, below function will add an item in Sessions content type.


function addSessions() {
 console.log("Entering");
 var sessionDataSource = new kendo.data.DataSource({
 type: 'everlive',
 transport: {
 typeName: 'Sessions'
 },
 schema: {
 model: { id: Everlive.idField }
 }

});
 var sessionItemToAdd = {
 'Name': 'Cloud',
 'Time': '09:00-10:00',
 'Level': '300',
 'SpeakerName': 'dj',
 'HallName': 'A',
 'Date': '3rd Oct',
 'Day': 'Day 1'
 };

sessionDataSource.add(sessionItemToAdd);
 sessionDataSource.sync();
 console.log("data inserted");
 }



This is the way you can add an item in Everlive content type. I hope you find this post useful. Thanks for reading.

How to change Build Settings in Icenium

Learn more about Icenium here

In Icenium you have two Build Settings, they are as follows

  1. Release
  2. Debug

While developing apps you should have Build Settings set to debug whereas before publishing it to store, you should set it to Release. In this post I will walk you through how to change Build Settings.

To change Build Settings, right click on project workspace and then select Build Settings option from context menu.

image

Next you get options to change Active build configuration. From drop down you can change Build Settings.

clip_image001

Just we learnt that it is very easy to work different Build Settings in Icenium. I hope you find this post useful. Thanks for reading.

Learn more about Icenium here

How to fetch data from Icenium Everlive using KendoUI DataSource

Read about Icenium here

Icenium Everlive is Backend as a Service offering from Telerik. In this post we will take a look on how easily KendoUI DataSource can be used to fetch data from Icenium Everlive.

Read more about Kendo UI DataSource here

To start with, in Everlive I have created a content type with name Session. In Everlive Content type represents a data type or loosely I can say a table. I have created content type with name Sessions. Now we need to fetch all the items from Sessions content type using Kendo UI DataSource.

Very first we need to add reference of Everlive as below,


<script src="scripts/everlive.all.min.js"></script>

After adding reference create instance of Everlive as below. You need to pass Everlive application key as parameter while creating instance of Everlive. You will find application key on Everlive portal.


var el = new Everlive('W1286lVOH0DXYZ');

Now you will be amazed seeing how easily you can fetch all the items from Session content type using Kendo UI DataSource. Only you need to provide type as everlive and in transport typeName as name of Everlive Content type.


var sessionDataSource = new kendo.data.DataSource({
 type: 'everlive',
 transport: {
 typeName: 'Sessions'
 },
 schema: {
 model: { id: Everlive.idField }
 }

});

While fetching data from Everlive using Kendo UI Data Source, we need to set following

  • type as everlive
  • In transport typeName as content type name. You need to provide name of the content type which data items you want to fetch. In this case we want items of Sessions content type so typeName is Sessions

You can verify in any debugger console that data is fetched from Everlive in Kendo UI DataSource.

clip_image002

Now once you have data at the client side you can use them as of your requirement. You can bind that ListView , GridView etc. I hope you find this post useful. Thanks for reading.

Push Notification on Android device using Icenium Everlive

Download sample used in this blog post from Github

Learn more about Icenium

In this post we will walkthrough working with Icenium Everlive Push Notification on an Android device. This post is divided in three parts from creating Google project to writing JavaScript code to enable notification on device.

Let us follow following steps to get it started with push notification on android devices

Step 1: Configure or Create Google Project

You need to start with creating Google Project. You need Google project ID to enable Push Notification.

  • Navigate to https://code.google.com/apis/console
  • In drop down you get an option to create a new project. From there create a new project
  • After creating project, you will get project number. There are two ways you can find project number, either in URL or on dashboard

image

After creating Google project, from left hand options select API Access. In that go ahead and click on Create a New Android Key. We need Android key at Everlive server side to enable Push Notification

image

After getting Android key next step you need to do to enable Service. To enable that click on Services in left and On Google Cloud Messaging for Android.

image

As of now we have created Google Project.

Step 2: Create and Configure project in Icenium Everlive

To create Icenium Everlive project, navigate to https://www.everlive.com/ . To create new project click on Create New Project on the home page. After successful creation of project go to Settings

image

In Settings select Push Notification from left menu options. We are going to enable Push Notification for Android, so check the check box of Android and provide Android Key created in previous step.

image

Step 3: Create Application

In this step we will create application to work with push notification. We will us EverLive JavaScript SDK. You can download sample Sample App from GitHub here

To start with you need following JavaScript files in your application. You can get these files from downloaded sample.

image

Now to start with, you need EverLive API key of your project and android project number. You will find API key on EverLive portal and android project number which you configured in step1 of this post.

image

As of now we have created environment in application to work with EverLive SDK for PushNotification. Next we need to create pushSettings for Android. You may notice that we are passing androidProjectNumber to create push setting for android.

image

Next you can enable notification on device by calling enableNotifications function and passing setting for push notification as input parameter in that. On successful enabling we are returning registration of device.

image

After enabling notification on device you need to register device in Everlive portal. To do this call register function on instance of current device.

image

These are two operations you need to perform to get push notification on android device from Everlive push notification. I have created two buttons on app view to enable notification on device and then register device to get push notification. View with buttons are as follows,

 <div data-role="view" id="pushview" data-tile="Push" data-model="app.pushService.viewModel" >
 <a id="initializeButton" data-role="button" data-bind="click: enablePushNotifications" class="btn-big">Enable Notifications</a>
 <a id="registerButton" data-role="button" data-bind="events: { click: registerInEverlive }" class="btn-big">Register</a>

 </div>

Below find full code to enable and register device for push notification.


(function (global) {
 var everliveApiKey = 'I1eE4AuOaWv0Vp5y';
 var androidProjectNumber = '1088191728786';
 var emulatorMode = false;

var pushViewModel = kendo.data.ObservableObject.extend({

el: new Everlive({
 apiKey: everliveApiKey
 }),

message: function () {
 alert("dhananjay");
 },

onAndroidPushReceived: function (args) {
 alert('Android notification received: ' + JSON.stringify(args));
 },
 enablePushNotifications: function () {
 // Push Setting for Android
 var pushSettings = {
 android: {
 senderID: androidProjectNumber
 },
 notificationCallbackAndroid: this.onAndroidPushReceived,

};
 // Setting the current device
 var currentDevice = this.el.push.currentDevice(this.emulatorMode);
 currentDevice.enableNotifications(pushSettings)
 .then(
 function (initResult) { return currentDevice.getRegistration();
 },
 function (err) {
 alert("ERROR!<br /><br />An error occured while initializing the device for push notifications.<br/><br/>" + err.message);
 }
 );

&nbsp;
 },
 registerInEverlive: function () {
 var currentDevice = this.el.push.currentDevice();

if (!currentDevice.pushToken) currentDevice.pushToken = "some token";
 this.el.push.currentDevice()
 .register({ Age: 15 })
 .then(
 this.onDeviceIsRegistered,
 function (err) {
 alert('REGISTER ERROR: ' + JSON.stringify(err));
 }
 );
 },
 onDeviceIsRegistered: function () {

alert("device registered");
 }

&nbsp;
 });

app.pushService = {
 viewModel: new pushViewModel()
 };

})(window);

&nbsp;

After successful operations on device, you will find device is registered in Everlive portal as below. All device registered for application will be listed here.

image

Now you can send push notification to device from portal. Device is enabled and registered to receive push notification from the Icenium Everlive server. We just witnessed that it is so easy working with push notification on Android devices from Icenium Everlive server. I hope you find this post useful. Thanks for reading.

Download sample used in this blog post from Github

Learn more about Icenium

Setting up Samsung S3 to work with Icenium

In this post we will take a look on how could we configure Samsung S3 to work with Icenium . Icenium Graphite allows you to live sync application directly with connected device. You can directly deploy application on device and debug them. Follow below steps to configure Samsung S3 to work as development device with Icenium

Step 1

Download Samsung USB drivers for Mobile phones. You can download them from here

image

After downloading unzip file and you will get an exe. Double click to run that.

image

Step 2

Next you need to enable debug mode on device. To enable that go to Settings and then Developer Options and then Enable USB Debugging.

image

Step 3

Next you need to make sure that Android Debug Bridge is installed. By default it gets installed with Graphite. To verify this go to directory userprofile and then AppData\Local\Temp\ADB. On this directory type command ADB DEVICES. You should get your connected device listed there.

image

Step 4

Now to deploy and debug application on device select on device Run on Device. In graphite also you can see devices connected

clip_image002

In this way you can configure Samsung S3 to work with Icenium. I hope you find this post useful. Thanks for reading.

How to Read Accelerometer values in Icenium

In this post we will take a look on reading device Accelerometer values in Icenium . As we know Icenium is a Cloud based IDE works on top of Cordova or Phonegap. We will use Accelerometer API of Cordova to read device accelerometer values.

Let us say on click event of button we want to read current accelerometer value. Button can be created as following


<div id="homeview" data-role="view" data-title="Home View">
 <a data-click="GetData" data-role="button">Get Accelorometer Data</a>
 <div id="outputdiv" ></div>
 </div>

On click event of the button we will read Accelerometer values and display them in output div. On click event of button we are calling GetData JavaScript function. In GetData function we are making a call to function navigator.accelerometer.getCurrentAcceleration. In Icenium by default Phonegap reference gets added hence we do not need to add any referenced to work with cordova.


function GetData() {
 navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
 }

In onSuccess we will read accelerometer values and in onError function we will display error message.

In onSucess function we will read X, Y, Z and TimeStamp values as data.x, data.y,data.z respectively.

 function onSuccess(data) {
 var outputdiv = document.getElementById('outputdiv');
 outputdiv.innerHTML = 'X: ' + data.x + '<br />' +
 'Y: ' + data.y + '<br />' +
 'Z: ' + data.z + '<br />' +
 'Time: ' + data.timestamp;
 }

In onError function let us display error message as following

function onError() {
 alert("error occured");
 }

In this way we can read accelerometer values in Icenium. I hope you find this post useful. Thanks for reading.

How to list all Github Repository in Icenium to clone

image

I wrote first part of Github and Icenium series here .After this post I got a question from a reader that

“I do not remember Github repository URL. Is there any way I can see all my repository listed and can further select one of them to clone in Icenium “

I replied yes you can do that. Let us see below how could we do that?

  1. Launch Graphite and click on Clone.
  2. In Clone option select Github tab
  3. You will be prompted for Github Authorization.

image

After successful authorization, you will find all repository under that account listed. You can choose any repository to clone in Icenium

image

In this way you can clone Github repository in Icenium. I hope you find this post useful. Thanks for reading.