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.

Advertisements

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 fix ButtonGroup at the top in KendoUI Mobile View

Learn more about Kendo UI here

Recently, I was working on one of the requirement in which I had following widgets in same mobile view.

  1. Kendo UI Mobile ListView
  2. Kendo UI Mobile ButtonGroup

I had to fix position of ButtonGroup always on the top. To explain it more let us suppose there are a ListView and ButtonGroup as given in below image,

image

I have created above view with following code


<div data-role="view" data-title="Sessions" id="sessionview" data-show="getSessions">

 <ul data-role="buttongroup" data-index="1" data-select="onSelect">
 <li>Day 1</li>
 <li>Day 2</li>
 <li>Day 3</li>
 </ul>

 <ul id="sessionList"
 data-source="sessionDataSource"
 data-endlessscroll="true"
 data-template="sessionTemplate"
 data-role="listview"
 data-style="inset">
 </ul>

</div>

Only problem in above implementation is that, ButtonGroup is not fixed and when you scroll ListView it will scroll with ListView.

Fixing this or rather achieving this is quite simpler, what all you need to do is to put ButtonGroup inside a header. Essentially you need to do following,

image

Now I have modified implementation as below to achieve ButtonGroup at fixed position


<div data-role="view" data-title="Sessions" id="sessionview" data-show="getSessions">

 <div data-role="header">
 <ul data-role="buttongroup" data-index="1" data-select="onSelect">
 <li>Day 1</li>
 <li>Day 2</li>
 <li>Day 3</li>
 </ul>
 </div>
 <ul id="sessionList"
 data-source="sessionDataSource"
 data-endlessscroll="true"
 data-template="sessionTemplate"
 data-role="listview"
 data-style="inset">
 </ul>

</div>

On running application ButtonGroup is fixed at the top.

clip_image002

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

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.

Icenium Workshop in Pune

View event photos here

Telerik India conducted a full day Icenium Day in Pune on 26th Aug 2013.

clip_image002

It was invite only event and 30 energetic developers attended full day workshop on Icenium. There was high energy discussions around native v/s hybrid, JavaScript or C# etc. It was great gathering of prominent and opinionated developers.

We started day with introduction of Icenium and setting up development environment on participant machines. Some of the participants preferred to work on Icenium MIST, so they did not need any installation.

clip_image004

Whole day we covered following topics,

  • Why Cross Platform Mobile Application
  • Getting started with Icenium
  • Creating your first Cross Platform App
  • Managing Certificates in Icenium
  • Debugging with Live Sync
  • Understanding version control and Github integration
  • Building and packaging App
  • Publishing Apps to store
  • Working with Kendo UI Framework elements like DataSource and Template
  • Consuming Services like OData
  • Understanding layout , transition etc
  • Working with Icenium Everlive

This was Hands on Lab workshop and all participants wrote codes for whole day with sheer passion.After successful completion of labs each participant got a participation certificate.

clip_image002[6]

It was energetic learning day. We loved developers from Pune and excited to visit city again with more sharing on goodness of Telerik.

clip_image004[6]

View event photos here

Resources for Webinar Integrating Coded Steps in Telerik Test Studio

Learn more about Test Studio here

On Aug 22 we conducted a webinar titled “Integrating Coded Steps in Telerik Test Studio”. This is part of the ongoing webinar series we here at Telerik India are doing targeting the APAC region. We call this the Telerik. .NET Ninja Developer Webinar series. You can take a look at the Aug-Sep schedule here

image

Slides deck of webinar is here,

 

For those of you who missed attending the webinar live, we have it covered for you. We record all our webinars and so was this one. Here is the recording of the webinar:

 

 

Telerik Ninja T-Shirt Giveaway:

We select 2 person from the webinar attendees and give away our .NET Ninja T-Shirt in each of our webinars. We have picked up 2 lucky persons in this webinar too. They are:

Farjana Parveen

swati gagare

Congratulations to the winners. We will be contacting you shortly and we will ship your t-shirts.

Excited to see you in next webinar

Telerik India at PUG DevCon 2013

It was 10th Anniversary of India’s one of the most prominent Microsoft User Group and as always Pune User Group did not disappoint. PUG delivered packed two days event with more than 300 attendees and 25 speakers.

More about event here

Telerik loves community and as part of our community engagement, Telerik India team participated in event.

image

We had a booth for both days and we had great interaction with Pune community. We loved the passion of community and discussion went on the topics ranging from Cross Platform Mobile Apps to Automate Testing. I and Telerik India country manager Abhishek Kant both presented in event.

Mr Kant presented on SPA with Kendo UI and I presented on Backend as a Service with Everlive. We gave away Ninja T-Shirts and one lucky winner got a Karbon Android tablet.

I loved passion being shown my developers around Kendo UI and Icenium .

image

If you were at the event and want any further discussion or demo, do not hesitate to reach us through our site or send us a mail on Dhananjay.kumar@telerik.com or abhishek.kant@telerik.com

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

MVVM using Kendo UI in three simple steps

Learn more about Kendo UI here

Find sample used in this blog on JSFiddle

Yes I know you love Kendo UI and you love MVVM as well. There are many libraries out there like Knockouts to help you creating HTML5 Apps adhering to MVVM pattern. In this post we will learn to create a simple application using MVVM.

Step 1: Create View Model

ViewModel can be created using Kendo.observable. Object of Kendo.observable will notify any changes to view. Let us create a studentViewModel as below.


var studentViewModel = kendo.observable({
                          name: "Dhananjay Kumar",
                          age : 30 ,
                          sayHello: function () {
                              var name = this.get("name");
                              var age = this.get("age");
                              alert("Hello, " + name + "You are" + age + "Years Old") ;
                                               }
                             });

studentViewModel contains two properties and one method sayHello.

Step 2: Create View

In second step let us go ahead and create View. You need to bind ViewModel to view.


<div id="studentview">
          <input data-bind="value: name" />
          <input data-bind="value: age" />
          <button data-bind="click: sayHello">Say Hello</button>
 </div>

Above in studentview , we are binding value of input types and click of button. There are many other HTML properties can be bind using Kendo UI MVVM like Text , Value , Visible , Html etc.

As you see we are using data-bind property to perform binding.

Step 3: Binding View and ViewModel

Third and final step you need to do is to bind View and ViewModel. Either you can bind ViewModel to a particular view (in this case div with id studentview) or you can bind ViewModel to any DOM element using body. Binding can be done as follows,

 kendo.bind($("#studentview"), studentViewModel);

This is all what you need to do to start creating HTML 5 Apps adhering MVVM pattern using Kendo UI. When you run app, you shall get expected output as below,

clip_image002

Last but not least do not forget to add references of KendoUI library in your project.

Find sample used in this blog on JSFiddle

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

Learn more about Kendo UI here

How to use existing Test Scripts to create new test in Test Studio

Learn more about Test Studio here

In one of customer demo, I came across a question that how we could use test scripts recorded on different machine or rather an existing test script to create a new test in Test Studio.

This can be done very easily in Test Studio. Each Test Project in Test Studio can be opened in File system. Let us say you want to use Test1 to create another test. So right click on Test1 and from context menu select Show in Windows Explorer

image

On File system you will find Test Studio Test file. You need to use this Test Studio Test File to create new test with existing scripts.

clip_image002

Next to use existing test script, right click on Test Project you get option to Add Existing Test in content menu.

clip_image004

Browse to existing Test Studio Test File you want to use to create new test. Select Test File click on Open.

clip_image006

On clicking on Open you will find that you have created new test with existing test. Newly created test will have same name as of existing test. If you want you can rename test by right clicking on the test and selecting rename option from context menu.

So just we learnt that it is very simple to use existing test scripts to create new test in Test Studio. I hope you find this post useful. Thanks for reading.

Learn more about Test Studio here

JavaScript Objects and Inheritance using Kendo UI

Learn more about Kendo UI here

In this post we will take a look on JavaScript Inheritance using Kendo UI. To start with you create JavaScript object using Literals as following,


var Vehicle = {

model: "car",
 color: "red",
 sayGreeting: function () {

alert(this.model + this.color);
 }

};

There are other two ways to create JavaScript object also exists

  1. Using new operator
  2. Using Object.Create() static method.

Learn more about Objects in JavaScript here

Kendo UI gives you different syntax to create object and for inheritance.

image

Kendo UI gives you different syntax to create a JavaScript Object. You can create same Vehicle object using Kendo UI as below,

 var Vehicle = kendo.Class.extend({

model: "car",
 color: "red",
 sayGreeting: function () {

alert(this.model + this.color);
 }

});

You can use object created using Kendo UI as below,

var v = new Vehicle();
 v.sayGreeting();

You will get output as below,

clip_image001

In kendo UI , you can create object with Constructor as well. Using init method you can add a constructor to object. In below code snippet we are creating object with constructor.


var Vehicle = kendo.Class.extend({

model: "car",
 color: "red",
 init: function (model, color)
 {
 if(model) this.model = model;
 if(color) this.color = color;

},
 sayGreeting: function () {

alert(this.model +" "+this.color);
 }

});

Now you can create object passing with constructor as below,

 var v = new Vehicle("truck", "black");
 v.sayGreeting();

Above we are creating object passing argument to constructor and then calling sayGreeting() function as well. As output you will get alert message.

clip_image001[6]

Now we can extend object using extend method.


var luxuryVehicle = Vehicle.extend(
 {
 brand: "bmw",
 price : "23560$"

});

As you see that we added two more properties in child object. Let us go ahead and create a new instance of this object.


var a = new luxuryVehicle();
 a.color = "dark grey"
 a.sayGreeting();

Above we are overriding color property of parent class and calling method of parent class. As a output you will get overridden value of color and parents value for model.

clip_image001[8]

In this way you can work with object and inheritance in JavaScript using Kendo UI. I hope you find this post useful. Thanks for reading.

Learn more about Kendo UI here

How to create Support Ticket from Telerik Test Studio Desktop

Learn more about Test Studio here

In this post we will take a look on creating Support Ticket from Test Studio Desktop. To create support ticket after launching Test Studio Desktop click on Help in top menu

clip_image002

After clicking on Help menu in ribbon you get option to Submit Ticket. Click on Submit Ticket to create a support ticket.

clip_image004

Now either you need to create a new Telerik account or login with existing account. I am login with existing Telerik account

clip_image005

After successful login, you will be provided with options from various products. Select TestStudio and click on Contact Support Team

clip_image007

You will get option to create Support Ticket under product Test Studio. If Test Studio is expired for you then you will get message as like below,

clip_image009

These steps you need to follow create Support Ticket. I hope you find this post useful. Thanks for reading.

Learn more about Test Studio here