Intro to Salesforce Mobile SDK: Building Hybrid Apps Webinar
PPT from Webinar Create Hybrid Mobile Application in 1 hour
41
facebook.com/ telerik @telerik Create Hybrid Mobile Applications with Icenium and Kendo UI Mobile
-
Upload
dhananjay-kumar -
Category
Education
-
view
2.211 -
download
2
description
Presentation from Create Hybrid Mobile Application in 1 hour Webinar. This webinar was conducted by Telerik evangelist Dhananjay Kumar (debug_mode) .
Transcript of PPT from Webinar Create Hybrid Mobile Application in 1 hour
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 – [email protected]
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?
