facebook.com/telerik

@telerik

Create Hybrid Mobile Applications with Icenium and Kendo UI Mobile

AgendaWhat is Hybrid Application

Introducing Icenium

Introducing Kendo UI Mobile

Discussion on App Architecture

Demo

Question and Answer

Dhananjay Kumar– Customer Advocate, Telerik– Microsoft MVP – Mindcracker MVP– @debug_mode – http://debugmode.net– http://telerikhelper.net – Dhananjay.kumar@telerik.co

m

Your Presenter

We are going to create iPhone Android

facebook.com/telerik

@telerik

App Architecture

Database

Service layer

Build using Kendo UI Mobile

Build and Package using Icenium

Different Types of AppsApps for Devices

Native Apps

Mobile Web Apps

Hybrid Apps

facebook.com/telerik

@telerik

Why Hybrid Apps?

iOS •Objective C•MAC

Android •Java •Eclipse

Windows Phone

•Visual Studio •C#/XAML

100 LOC

100

LOC

100

LOC

300 LOC

Development

Maintenance

facebook.com/telerik

@telerik

Hybrid App Development

CSS

JAVASCRIPT

HTML

Deploy using Cordova

iOS Android

Windows Phone

Various Platforms

Hybrid or Native?Hybrid

Multiple Platform

Easy to build

Use existing web development skills

Best suited for Data Driven Applications

Native

Fast Performance

Complex Codes

Huge learning curve

High investment but better performance

Steps for Hybrid App Development Step 1: Create App using

HTML JavaScript , CSS

Step 2: Build and Package the App using PhoneGap

Step 3: Submit the package to App Store, Market Place or Google Play

How it works ?It runs in Web View Control UIWebView : ios, WebView : Android

Runs in full screen mode using Web Kit browsers

Access Device capabilities using Cordova JS API

Icenium is a Cloud Based Integrated Development Environment for Cross Platform Application Development

Icenium

MIST GRAPHITE

Icenium Features Live Sync Simulator Github

integration

Version Control

Packaging and Publishing

Certificate Management

Code Editor Build on Cloud Wen Interface Development

What is Kendo UI Comprehensive HTML5,JavaScript framework for modern web and mobile app development

Kendo Framework Elements

Kendo UI Web

Kendo UI DataViz

Kendo UI Mobile

HTML5 powered native mobile UI that automatically adapts to different devices

Built using Kendo UI Mobile ?

Native UI on Every Device

Ready for App Stores

Kendo UI FrameworkDataSou

rce Model Template

MVVM Drag OvservableObject

Node Template

OvservableArray

Validator

Draggable

Kendo UI Mobile WidgetsActionS

heetBackBut

ton Button ButtonGroup

DetailButton Layout ListView Loader

ModalView NavBar Pane PopOver

Scroller ScrollView

SplitView Switch

Swipe TabStrip View

facebook.com/telerik

@telerik

Demo App Architecture

Database

Service layer

Demo

Let us write some codes

facebook.com/telerik

@telerik

Code Walkthrough for Netflix Movie Explorer

facebook.com/telerik

@telerik

Step1 : Add Reference

facebook.com/telerik

@telerik

Step 2 : Create layout

facebook.com/telerik

@telerik

Step 3: Initialize Kendo Mobile

facebook.com/telerik

@telerik

Step 4: Create Views

facebook.com/telerik

@telerik

Step 5: Create Data Source

facebook.com/telerik

@telerik

Step 6: Create Template

facebook.com/telerik

@telerik

Step 7: Create ListView

facebook.com/telerik

@telerik

Step 8: Put style in CSS

facebook.com/telerik

@telerik

Step 9: Data Source for Movie Detail View

facebook.com/telerik

@telerik

Step 10: Template for Movie Detail View

facebook.com/telerik

@telerik

Step 11: View for Movie Detail View

facebook.com/telerik

@telerik

Application

Resources http://icenium.com

http://www.kendoui.com

http://docs.kendoui.com

http://docs.icenium.com

http://telerikhelper.net

@Telerik

@kendoui

@icenium

Questions?