PPT from Webinar Create Hybrid Mobile Application in 1 hour

3,684 views

Published on

Presentation from Create Hybrid Mobile Application in 1 hour Webinar. This webinar was conducted by Telerik evangelist Dhananjay Kumar (debug_mode) .

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,684
On SlideShare
0
From Embeds
0
Number of Embeds
458
Actions
Shares
0
Downloads
141
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

PPT from Webinar Create Hybrid Mobile Application in 1 hour

  1. 1. Create Hybrid MobileApplications with Icenium andKendo UI Mobile facebook.com/telerik @telerik
  2. 2. Agenda What is Hybrid Application Introducing Icenium Introducing Kendo UI Mobile Discussion on App Architecture Demo Question and Answer
  3. 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. 4. We are going to createiPhone Android
  5. 5. Build using Kendo UI MobileApp Architecture ServiceDatabase layer Build and Package using Icenium facebook.com/telerik @telerik
  6. 6. Different Types of Apps Apps for Devices Native Mobile Hybrid Apps Web Apps Apps
  7. 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. 8. HTML iOS AndroidJAVASCRIPT Deploy using Cordova CSS Windows Phone Hybrid App Various Platforms Development facebook.com/telerik @telerik
  9. 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. 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. 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. 12. Icenium is a Cloud Based Integrated DevelopmentEnvironment for Cross Platform ApplicationDevelopment Icenium MIST GRAPHITE
  13. 13. Icenium Features Github Live Sync Simulator integration Packaging Version Certificate and Control Management Publishing Wen Interface Build on Development Code Editor Cloud
  14. 14. What is Kendo UI Kendo UI Kendo UI Kendo UI Web DataViz Mobile Kendo Framework Elements
  15. 15. Built using Kendo UI Mobile ? HTML5 powered native mobile UI that automatically adapts to different devices
  16. 16. Native UI on Every Device
  17. 17. Ready for App Stores
  18. 18. Kendo UI Framework DataSource Model Template MVVM Drag OvservableObject Node Template Draggable OvservableArray Validator
  19. 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. 20. Demo App Architecture ServiceDatabase layer facebook.com/telerik @telerik
  21. 21. Demo Let us write some codes
  22. 22. Code Walkthrough for Netflix Movie Explorer facebook.com/telerik @telerik
  23. 23. Step1 : Add Reference facebook.com/telerik @telerik
  24. 24. Step 2 : Create layout facebook.com/telerik @telerik
  25. 25. Step 3: Initialize Kendo Mobile facebook.com/telerik @telerik
  26. 26. Step 4: Create Views facebook.com/telerik @telerik
  27. 27. Step 5: Create Data Source facebook.com/telerik @telerik
  28. 28. Step 6: Create Template facebook.com/telerik @telerik
  29. 29. Step 7: Create ListView facebook.com/telerik @telerik
  30. 30. Step 8: Put style in CSS facebook.com/telerik @telerik
  31. 31. Step 9: Data Source for Movie Detail View facebook.com/telerik @telerik
  32. 32. Step 10: Template for Movie Detail View facebook.com/telerik @telerik
  33. 33. Step 11: View for Movie Detail View facebook.com/telerik @telerik
  34. 34. Application facebook.com/telerik @telerik
  35. 35. Resources http://icenium.com @Telerik http://www.kendoui.com @kendoui http://docs.kendoui.com @icenium http://docs.icenium.com http://telerikhelper.net
  36. 36. Questions?

×