Telerik NativeScript

Resources for Webinar “Building Native Mobile Apps with NativeScript + Push Notifications”

On Oct 29 2015 we conducted our monthly webinar for the month of Oct. This time we were culminating our NativeScript India Tour with this webinar. This webinar was all about a quick recap of what NativeScript is and how you get started with it. Then followed by how to use Push Notification – one of the important aspect of any mobile app – using NativeScript + Telerik Backend. This blog post it to recap the webinar and you will find the Slidedeck used during the webinar and also the video recording.

Continue reading

Telerik NativeScript

Resources for webinar “Build Truly Native Android & iOS Apps from Single JavaScript Codebase”

On Apr 30 2015, we conducted one more webinar titled “Build Truly Native Android & iOS Apps from Single JavaScript Codebase”. This blog post is a recap of the webinar. In this blog post you will be able to get hold of the slide deck & the video recording of the webinar.

About NativeScript:

NativeScript is a new technology that we i.e. Telerik have open sourced to the community. Using NativeScript you will be able to build truly native Android & iOS from a single code base with JavaScript as a language. You can know more about NativeScript from its home here: ww.nativescript.org.

Telerik NativeScript

Telerik NativeScript

Slide Deck:

Here is the slide deck used for the webinar:

Video Recording:

Here is the video recording of the webinar:

Additional Links:

Here are some more videos on NativeScript:

NativeScript Launch Keynote: https://www.youtube.com/watch?v=8hr4E9eodS4

How NativeScript Works: https://www.youtube.com/watch?v=I3_ZnWTj-NA

How to build Apps with NativeScript: https://www.youtube.com/watch?v=Glh927vSYKo

 

Till next time – Happy Coding.

clip_image002_thumb.jpg

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.

image_thumb.png

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

image_thumb.png

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.