Create Hybrid MobileApplications with Icenium andKendo UI Mobile facebook.com/telerik @telerik
Agenda What is Hybrid Application Introducing Icenium Introducing Kendo UI Mobile Discussion on App Architecture Demo Ques...
Your Presenter Dhananjay Kumar – Customer Advocate, Telerik – Microsoft MVP – Mindcracker MVP – @debug_mo...
We are going to createiPhone Android
Build using Kendo UI MobileApp Architecture ServiceDatabase ...
Different Types of Apps Apps for Devices Native Mobile Hybrid Apps Web Apps ...
DevelopmentWhy Hybrid Apps? 100 • Objective C LOC iOS • MAC • Java ...
HTML iOS AndroidJAVASCRIPT Deploy using ...
Hybrid or Native? Hybrid Native Multiple Platform Fast Performance Easy to b...
Steps for Hybrid App Development Step 1: Create App using HTML JavaScript , CSS Step 2: Build and Package t...
How it works ? It runs in Web View Control UIWebView : ios, WebView : Android Runs in full screen mod...
Icenium is a Cloud Based Integrated DevelopmentEnvironment for Cross Platform ApplicationDevelopment ...
Icenium Features Github Live Sync Simulator ...
What is Kendo UI Kendo UI Kendo UI Kendo UI Web DataViz Mobile Kendo Framework Elements
Built using Kendo UI Mobile ? HTML5 powered native mobile UI that automatically adapts to different devices
Native UI on Every Device
Ready for App Stores
Kendo UI Framework DataSource Model Template MVVM Drag Ovservabl...
Kendo UI Mobile Widgets ActionSheet BackButton Button ButtonGroup DetailButton Layout ...
Demo App Architecture ServiceDatabase layer facebook.com/telerik ...
Demo Let us write some codes
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 facebook.com/telerik @telerik
Resources http://icenium.com @Telerik http://www.kendoui.com @kendoui http://docs.kendoui.com @icenium http...
Questions?
PPT from Webinar Create Hybrid Mobile Application in 1 hour
PPT from Webinar Create Hybrid Mobile Application in 1 hour
PPT from Webinar Create Hybrid Mobile Application in 1 hour
PPT from Webinar Create Hybrid Mobile Application in 1 hour
PPT from Webinar Create Hybrid Mobile Application in 1 hour
of 41

PPT from Webinar Create Hybrid Mobile Application in 1 hour

Presentation from Create Hybrid Mobile Application in 1 hour Webinar. This webinar was conducted by Telerik evangelist Dhananjay Kumar (debug_mode) .
Published on: Mar 4, 2016
Published in: Education      
Source: www.slideshare.net


Transcripts - PPT from Webinar Create Hybrid Mobile Application in 1 hour

  • 1. Create Hybrid MobileApplications with Icenium andKendo UI Mobile facebook.com/telerik @telerik
  • 2. Agenda What is Hybrid Application Introducing Icenium Introducing Kendo UI Mobile Discussion on App Architecture Demo Question and Answer
  • 3. Your Presenter Dhananjay Kumar – Customer Advocate, Telerik – Microsoft MVP – Mindcracker MVP – @debug_mode – http://debugmode.net – http://telerikhelper.net – Dhananjay.kumar@telerik.com
  • 4. We are going to createiPhone Android
  • 5. Build using Kendo UI MobileApp Architecture ServiceDatabase layer Build and Package using Icenium facebook.com/telerik @telerik
  • 6. Different Types of Apps Apps for Devices Native Mobile Hybrid Apps Web Apps Apps
  • 7. DevelopmentWhy Hybrid Apps? 100 • Objective C LOC iOS • MAC • Java 100 300Android • Eclipse LOC LOCWindows • Visual Studio Phone • C#/XAML 100 LOC Maintenance facebook.com/telerik @telerik
  • 8. HTML iOS AndroidJAVASCRIPT Deploy using Cordova CSS Windows Phone Hybrid App Various Platforms Development facebook.com/telerik @telerik
  • 9. Hybrid or Native? Hybrid Native Multiple Platform Fast Performance Easy to build Complex Codes Use existing web Huge learning curve development skills Best suited for Data High investment but Driven Applications better performance
  • 10. 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
  • 11. 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
  • 12. Icenium is a Cloud Based Integrated DevelopmentEnvironment for Cross Platform ApplicationDevelopment Icenium MIST GRAPHITE
  • 13. Icenium Features Github Live Sync Simulator integration Packaging Version Certificate and Control Management Publishing Wen Interface Build on Development Code Editor Cloud
  • 14. What is Kendo UI Kendo UI Kendo UI Kendo UI Web DataViz Mobile Kendo Framework Elements
  • 15. Built using Kendo UI Mobile ? HTML5 powered native mobile UI that automatically adapts to different devices
  • 16. Native UI on Every Device
  • 17. Ready for App Stores
  • 18. Kendo UI Framework DataSource Model Template MVVM Drag OvservableObject Node Template Draggable OvservableArray Validator
  • 19. Kendo UI Mobile Widgets ActionSheet BackButton Button ButtonGroup DetailButton Layout ListView Loader ModalView NavBar Pane PopOver Scroller ScrollView SplitView Switch Swipe TabStrip View
  • 20. Demo App Architecture ServiceDatabase layer facebook.com/telerik @telerik
  • 21. Demo Let us write some codes
  • 22. Code Walkthrough for Netflix Movie Explorer facebook.com/telerik @telerik
  • 23. Step1 : Add Reference facebook.com/telerik @telerik
  • 24. Step 2 : Create layout facebook.com/telerik @telerik
  • 25. Step 3: Initialize Kendo Mobile facebook.com/telerik @telerik
  • 26. Step 4: Create Views facebook.com/telerik @telerik
  • 27. Step 5: Create Data Source facebook.com/telerik @telerik
  • 28. Step 6: Create Template facebook.com/telerik @telerik
  • 29. Step 7: Create ListView facebook.com/telerik @telerik
  • 30. Step 8: Put style in CSS facebook.com/telerik @telerik
  • 31. Step 9: Data Source for Movie Detail View facebook.com/telerik @telerik
  • 32. Step 10: Template for Movie Detail View facebook.com/telerik @telerik
  • 33. Step 11: View for Movie Detail View facebook.com/telerik @telerik
  • 34. Application facebook.com/telerik @telerik
  • 35. Resources http://icenium.com @Telerik http://www.kendoui.com @kendoui http://docs.kendoui.com @icenium http://docs.icenium.com http://telerikhelper.net
  • 36. Questions?