Resources for Webinar “Hybrid Mobile Application Development with cloud based IDE – Icenium”

On Jun 25th we conducted a webinar titled “Hybrid Mobile Application Development with Cloud based IDE Icenium”. This is part of an ongoing webinar series we here at Telerik India are doing targeting APAC region. We call this the Telerik .NET Ninja Developer Webinar Series. You can take a look at the Jun-Jul schedule here: https://telerikhelper.net/2013/05/24/telerik-webcasts-june-july/

Get it started with Icenium here

image

In webinar we discussed following topics,

  • What is Hybrid Application
  • Introducing Icenium
  • Introducing Kendo UI Mobile
  • Creating Employee Details App on Northwind database
  • Working with Views , Template , Datasource
  • Consuming services

Slide Deck

Here is the slide deck which I used for the webinar

Recorded webinar

Here is the recorded webinar

 

 

NET 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:

Jalani S

Nitish Agarwal

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

Resources for Webinar “Cloud Based Enterprise Apps using Everlive”

On Jun 20th we conducted a webinar titled “Cloud Based Enterprise Apps using Everlive”. This is part of an ongoing webinar series we here at Telerik India are doing targeting APAC region. We call this the Telerik .NET Ninja Developer Webinar Series. You can take a look at the Jun-Jul schedule here: https://telerikhelper.net/2013/05/24/telerik-webcasts-june-july/

To get started with Icenium Everlive visit its Everlive portal here

clip_image001

Icenium Everlive is “Backend as a Service” and it provides following as service,

  • Backend Data
  • Large Files.
  • Users
  • Email
  • Notifications
  • Cloud Code

image

All the services can be accessed via REST API, JavaScript SDK or .NET SDK.

Slide Deck:

Here is the slide deck which I used for the webinar:

 

NET 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:

Soumya R

HC Suraj

Congratulations to the winners. We will be contacting you shortly and we will ship your t-shirts. Rest of the folks don’t worry – we still have loads of webinars lined up for this year. So do attend our future webinars without fail and try your luck to be the .NET Ninja.

To get started with Icenium Everlive visit its Everlive portal here

As App Developer Why I do care about Icenium Everlive?

To get started with Icenium Everlive visits its Everlive portal here

clip_image002

Before getting into discussion of “Why do I care about Icenium Everlive”, let us get into our developer shoes and understand few generic requirements of any application.

An Application may need,

  • Backend data which should be secure and scalable
  • User management. Various level of user authorizations and authentications
  • Email Services
  • Large files as BLOB at backend
  • Validation of data , users at backend
  • Various kind of notifications
  • Codes running at backend

Icenium Everlive helps to solve above listed requirements. It is Cloud Based Backend as a Service offering from Telerik. Any services of Icenium Everlive can be accessed via provided REST API.

 

To get started with Icenium Everlive visits its Everlive portal here

image

Icenium Everlive provides following as service,

  • Backend Data
  • Large Files.
  • Users
  • Email
  • Notifications
  • Cloud Code

image

It provides REST API, JavaScript SDK and .NET SDK to access above services.

image

Let is focus our discussion on problems Icenium Everlive helps us to solve. Below I am listing some of the problems and how Icenium Everlive helps to solve them.

Problem # 1: Creating and Managing Service Layer

If you want to work with backend data, probably you need to do following tasks

image

As you may be aware that working with Service layer may be quite complex and require lot of development time. If you are not coming from backend and service development background then learning curve is very sharp as well. In many of the cases you end up giving most of the time working with services and backend database than working on business requirement of application.

Icenium Everlive helps you solving this problem. It eliminates need of service layer from your application.

image

In few simple steps you can configure content types (backend data) and can use them in your application. Icenium Everlive provides you following options to work with backend data from application.

  • REST API
  • .Net SDK
  • JavaScript SDK

Essentially you can work with secure and scalable backend data without bothering about complexities of service layer.

Problem# 2 Working with Users and Roles

In any application User management is one of the most important task. Tasks like

  • Creating new users for application
  • Managing different Role for users
  • Authentication of Users
  • Different level of authorization
  • Notifications to Users

All above tasks can be complex to handle. Icenium Everlive provides you complete User Management over REST API. Along with REST API, JavaScript SDK and .NET SDK are available to work with Users. Essentially to create new user for application you need to do a function call. At the backend Users and Roles of your application are managed by Icenium Everlive.

image

So Icenium Everlive helps you to manage users of application.

Problem # 3: Sending Email notifications

Email notifications are essential part of any application. Working with Email may be complex, it requires setting up email servers, working with template etc.

Icenium Everlive gives you complete solution of Emails and Email notification. From backend Icenium Everlive can send email on behalf of your application. It can send notification email while registering new user to application and validate users email address as well. At any point of time application can send emails using Icenium Everlive using custom template. Everlive allows you to create and configure email template as well.

image

Problem # 4: Working with Large Files

High quality images, videos etc. are always integral part of certain kind of applications. Uploading and downloading large files are another complex tasks as an application developer you need to do. Icenium Everlive ease tasks of working around large files at the backend. It provides REST API along with JavaScript and .NET SDK to work with files.

Icenium Everlive helps,

image

Icenium Everlive provides backend services to speedup application development. As a developer we can clearly see that Icenium Everlive offers all back end functionality as service which we can leverage in different kind of applications. Certainly it is something we need to care about. In further posts I will get into other details of Icenium. Tune in for same. Thanks for reading.

 

To get started with Icenium Everlive visits its Everlive portal here

Hybrid Application Development with students of G L Bajaj Institute of Management and Research

View Photos from Event here

image

I had exciting and overwhelming experience doing Cross Platform App Development workshop using ICENIUM with around 50 bright students of G L Bajaj Institute of Management and Research

image

In 4 hrs. Lab students learnt about

  • Thought Process behind Hybrid Application Development
  • How Hybrid Apps are different from Native Apps
  • When should one create Hybrid Apps or Native Apps
  • Introduction to Icenium
  • Managing certificates in Icenium
  • Creating package for Google Play
  • Working with Mobile layout, Mobile Views, Data etc.

Being a presenter for me it was nice and enchanting time interacting with students. In lab students learnt to create a Hybrid App for IPL.

image

Time was a constraint in the event but students were very interactive and I am sure they had learnt about new genre of mobile development that is Cross Platform Mobile Application Development.

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.

How to set up Icenium project from Github repository

In this post we will take a look on setting up project in Icenium from Github repository. Let us assume you have a github repository as given in below image. You need to set up project in Icenium based on this repository.

image

First step is, launch Icenium and click on Clone

image

After clicking on Clone, select Repository option and give Git repository URL here. By default Icenium will give you project name and you can change project name if required.

image

You will get message Cloning remote repository.

image

After successful cloning you will find project in project navigator of Icenium.

image

In this way you can clone a GIT repository as Icenium project. I hope you find this post useful. Thanks for reading.

Telerik conducted Cross Platform Mobile Application Development workshop for students in India office

View Photos from Workshop here

Download Icenium from here

Cross Platform Mobile Application Development or Hybrid Application development is gaining huge popularity among mobile application developers. Seeing popularity of this paradigm we at Telerik decided to educate about Hybrid App Development to college students. We conducted 8 hrs. Regress training session for 13 students on 2nd March 2013 in our India office.

image

To select students we asked them two simple questions,

  1. Where is head office of Telerik ?
  2. Why we should select you for the workshop ?

There were more than 80 students who shown interest in attending workshop. We chosen 13 out of them. Event started at 11 am . Workshop was scheduled till 6 pm but seeing high energy and enthuse of students , we extended workshop by 2 hrs more. Workshop got over at 8pm.

Students learnt mainly on following topics and created two hybrid apps titled “Twitter Search “ and “Indian States”

  • Icenium IDE
  • Kendo UI Mobile
  • Difference between Native Apps and Hybrid Apps
  • Design guidelines for Hybrid App

image

Day started with keynote session by Telerik Country manger Abhishek Kant. He did set up dais for the day . Students got charged and motivated for day long coding after interaction with him.

image

As day progressed students learnt about various aspect of Hybrid App development paradigm. They created app using Icenium and Kendo UI Mobile.

All 13 students created these two Hybrid Apps

  1. Twitter Search Application
  2. Indian State App

In order to create these two apps students learnt about ,

  • Working with Kendo UI data source
  • Working with Kendo UI Mobile ListView
  • Working with Kendo UI Template
  • Understanding Icenium IDE
  • Building and packaging app using Icenium
  • Certificate management in Icenium
  • Creating APK package using Icenium.

It was a learning day for young students with lot of fun. There was visible happiness on each face when they installed APK package on their Android devices. They were on blue sky seeing app created by them running on their devices.

image

For us it was great day intercating and tecahing young students on latest of the mobile app development paradigm. We are excited for more of these types of events.

View Photos from Workshop here

Download Icenium from here

How to work on Icenium using Facebook account

In this post we will take a look on working on Icenium Graphite using Facebook account. We will start from downloading then installation. After successful installation we will create a Hybrid Application project using Facebook credentials.

Follow the steps given below,

Step 1

To start installing first navigate to http://icenium.com and click on Try now Free until May!

clip_image001

Step 2

You will be provided with three options. Go ahead and select ICENIUM Graphite. Check on Term and Condition and click on Launch App. You will find set would have been started downloading.

clip_image003

Step 3

Navigate to folder in which setup got downloaded. Click on Icenium Graphite setup to start installation.

clip_image004

On installation you will find Graphite is being downloaded.

clip_image005

Step 4

After successful installation of Icenium Graphite you will get dashboard. You can login to Icenium with any of the options provide. Let us login with Facebook credential.

clip_image007

After successful login on dashboard you will find different options to create New Cross-Platform Device Application.

clip_image009

In this way you can download, install Icenium Graphite and start creating Hybrid Applications using your Facebook credentials. I hope you find this post useful. Thanks for reading.

Create Hybrid Mobile Application in 1 hour: Join the webinar on 21st February at 3pm IST

Register Here for the Webinar

Telerik India is conducting a webinar on “Hybrid Mobile Application Development “on 21st February 2013 from 3pm to 4 pm IST.

Register Here for the Webinar

image

Would you like to create a mobile application that can run on most of the mobile application platforms? From the same codebase?

Gone are the days when one had to write different codes in different languages for different mobile platforms. Now a days developers are more inclined to write Cross Platform Mobile Applications or Hybrid Mobile Application. An application written using web technologies like HTML, JavaScript and deployed on multiple platforms without changing any codebase is known as Hybrid Mobile Application.

Register Here for the Webinar

clip_image002

Webinar details are here,

Title: Hybrid Mobile Application Development

Date: 21st February 2013

Time: 3pm to 4 pm

Presenter: Dhananjay Kumar

Register Here for the Webinar

This session will focus on various development aspects of Hybrid Mobile Application development. Session will follow step by step approach to create Hybrid Mobile Application. This will be a demo oriented session. In Session demo will be on creating Hybrid Applications like Netflix Movie Explorer and Twitter Search using Telerik JavaScript Hybrid Mobile Application development framework Kendo UI Mobile in Icenium . This session will also touch upon various complexities of building and packaging a hybrid application along with their solution.

Come and learn with us of this amazing capability with the skills you already possess. We will go from nothing to a fully functional mobile app ready for the app store in an hour.

Register Here for the Webinar

How to get Device information in Icenium

In this post we will take a look on fetching device information in Icenium. Internally Icenium usage PhoneGap to build the application. We will use PhoneGap API to fetch device information. It is always good idea to read device information when device is being ready. Device information can be fetched with reading values of following properties.

image

So in Icenium device information on device ready can be read as given in below code snippet,


document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
function onDeviceReady() {

var deviceName = device.name;
var deviceId = device.uuid;
var deviceOs = device.platform;
var deviceOsVersion = device.version;

//Use device information as required

console.log("devicename : " + deviceName + " deviceId: " + deviceId + " deviceOs: " + deviceOs + " deviceosversion : " + deviceOsVersion);

}

On running application in Graphite simulator you will find device information.

image

In this way device information can be fetched in Icenium. I hope you find this post useful. Thanks for reading.

Inserting Record in Database from Kendo UI DataSource using OData

While creating hybrid mobile application or a web application, we always come across requirement when we need to insert a record or create a record in the database. In this post we will take a look on creating a record from Kendo UI DataSource. Kendo DataSource will make a call to OData Service to insert a record. Essentially structure we are assuming in the post is as given in below diagram,

image

Let us follow step by step approach to perform insertion. Very first let us make variables to holding URLS to create and read data from OData service. In your case these URL values will be as per your service

image

Now we need to create Kendo DataSource. While creating Kendo data source we can configure it for reading and creating records.

To read values in the transport of data source set the value of read property with READ_URL. In below image you will notice that we are setting type of data source as odata because we are interacting with database via OData service. To read data you need to set following attribute of Kendo datasource.

image

We want to configure Kendo datasource for creating record also. For that we need to configure create property of Kendo datasource. In create property is a JSON object and essentially it takes following parameters

  1. url: OData url to created record.
  2. type : to create a record type should be POST
  3. datatype : this should be set to json or xml.
  4. contentType : This attribute is set for the content type

image

For OData version 2.0 contentType should be set to application/json .However in case of OData version 3.0 it should be set to application/json;odata=verbose.

image

After configuring Kendo datasource to create record, we need to set the schema of the kendo datasource. We must set schema of data source to successfully perform create record operation. In the schema, we need to create model defining different fields or columns. We need to provide type of the columns. Other types can be number, date, and string. Make sure you are setting total property of schema with count.

image

After setting all the required properties code to create Kendo data source is as following,


var READ_URL = "http://localhost:62272/SudentModelService.svc/Peoples";
var CREATE_URL = "http://localhost:62272/SudentModelService.svc/Peoples";
var dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: READ_URL
},
create: {
url: CREATE_URL,
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose"

}
},
schema: {
total: "count",
model: {
id: "PersonID",
fields: {
PersonID: {

type: "number"
},
LastName: {
type: "string"
},
FirstName: {
type: "string"
}

}
}
}

});

As of now we have created data source to perform read and create operation. Now to create a record we need to create an item. Item can be created from reading values from the view. After creating item call add function on data source. Last step is to sync data with the server. This can be done by callinf sync function on the datasource.


var item = {
FirstName: $("#txtFirstName").val(),
LastName: $("#txtLastName").val()
}

dataSource.add(item);
dataSource.sync();
console.log("done");

In this way we can create or insert a record in database from Kendo UI data source using OData service. I hope you find this post useful. Thanks for reading.

How to show current location on Google Map in Icenium

In this post we will take a look on working with Google map in Icenium. We will display Google map pinned with current location in a mobile view.

image

On creating Cross-Platform mobile application (Kendo UI Mobile) in Icenium, you will find by default references to work with Google map added in the project.

clip_image002

Next we need to create a view. In this view map will be rendered,


<div data-role="view" id="map" data-title="Map" data-show="showMap" data-stretch="true">
<div>
<div id="map_canvas" style="width: 100%; height: 100%; position: absolute;">
</div>

</div>
</div>

There are certain points worth discussing about the view.

  • showMap function will be called whenever user is navigating to view.
  • Style of map-canvas div is set to 100% width and height such that map will be displayed in whole view.

Now we need to write showMap function. In this function we will call PhoneGap navigatior.geolocation.getCurrentPosition function to get the longitude and latitude of current location of the user.


function showMap() {

navigator.geolocation.getCurrentPosition(
onSuccessShowMap,
onErrorShowMap
);

}

navigatior.geolocation.getCurrentPosition will call onSuccessShowMap function on success and onErrorShowMap on any exception in finding users current location. In onSuccessShowMap function we will render Google map in the view created previously.

Rendering of Google map can be done in three steps,

Very first we need to find longitude and latitude of the current location and that can be done as following,

image

Once longitude and latitude has been determined next we want to create the map option. You can read more about Google map options in Google map API documentation. So we are creating map option as following,

image

After creating map option we need to create the map. It takes two parameters. First HTML element on which you want to render the map and then map options. We have created a div with id map-canvas in map mobile view to render the map and in previous step, we created the map option.

image

At the last step we need to set the marker on the map with the current location. That can be done as following,

image

To render map you need to consolidate all the steps discussed above in onSuccessShowMap(position) function. After consolidating function should look like below,


function onSuccessShowMap(position) {

var latlng = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude);

var mapOptions = {

sensor: true,
center: latlng,
panControl: false,
zoomControl: true,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: true,

};

var map = new google.maps.Map(
document.getElementById('map_canvas'),
mapOptions
);

var marker = new google.maps.Marker({
position: latlng,
map: map
});
console.log(marker);
console.log("map rendering");
}
</script>

In last we need to write onErrorShowMap function. In this function handle all the errors may encounter while reading current location of the user. I am leaving function like following


function onErrorShowMap(error) {

alert("error");
}

Now when you run application you should get map with user current location in the map view.

image

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

Create APK package for Google Play using Icenium Graphite

In this post we will take a look on creating APK package for submission to Google Play using Icenium. Let us follow following walkthrough to create APK package,

To create package, Right click on the project and select Publish to create APK package,

clip_image001

In the next window click on Google Play. You will get an error message that there is no certificate or Code Sign Identity found for Google Play Signing.

image

To solve this issue click on the option in Icenium Graphite IDE.

image

In Users Option window select General tab and then Certificate Management option.

image

In Certificate Management option you will get an option to create New Certificate. Click on Create New to create new certificate. You can either use

  1. Self-signed identity
  2. Request for the Certificate

Let us go ahead and request for the Self-signed identity. In Self-signed identity window you need to provide following vital information,

  • Country
  • Type of the self-signed identity. In this choose Google Play as option. Other option available is Generic.
  • Configure Start Date and End Date

image

After creating Self-signed identity you can find them in Cryptographic Identities section. Below you can see that I have created three self-signed identity.

image

After creating Self-signed identity right click on the project and select properties in the properties windows, select Android tab. Here you can set various application properties for android platform.

image

From the Code Signing Identity drop down, select any existing certificate to associate it with the application.

image

You can set icons, application permissions for Google Play here. After associating self-signed identity again right click on the project and select publish option. You will get Application Validation Status message as OK.

image

Next click on the Build button to create the package. Icenuim will build the application in cloud and ask you to give a name of the apk package and save it locally.

image

In this case we saved APK with name tearchapp. Now you can submit the APK file to Google Play to publish application. I hope you find this post useful. Thanks for reading.