Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PPT from Webinar Create Hybrid Mobile Application in 1 hour


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
  • Follow the link, new dating source: ♥♥♥ ♥♥♥
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ ♥♥♥
    Are you sure you want to  Yes  No
    Your message goes here

PPT from Webinar Create Hybrid Mobile Application in 1 hour

  1. 1. Create Hybrid MobileApplications with Icenium andKendo UI Mobile @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 – – –
  4. 4. We are going to createiPhone Android
  5. 5. Build using Kendo UI MobileApp Architecture ServiceDatabase layer Build and Package using Icenium @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 @telerik
  8. 8. HTML iOS AndroidJAVASCRIPT Deploy using Cordova CSS Windows Phone Hybrid App Various Platforms Development @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 @telerik
  21. 21. Demo Let us write some codes
  22. 22. Code Walkthrough for Netflix Movie Explorer @telerik
  23. 23. Step1 : Add Reference @telerik
  24. 24. Step 2 : Create layout @telerik
  25. 25. Step 3: Initialize Kendo Mobile @telerik
  26. 26. Step 4: Create Views @telerik
  27. 27. Step 5: Create Data Source @telerik
  28. 28. Step 6: Create Template @telerik
  29. 29. Step 7: Create ListView @telerik
  30. 30. Step 8: Put style in CSS @telerik
  31. 31. Step 9: Data Source for Movie Detail View @telerik
  32. 32. Step 10: Template for Movie Detail View @telerik
  33. 33. Step 11: View for Movie Detail View @telerik
  34. 34. Application @telerik
  35. 35. Resources @Telerik @kendoui @icenium
  36. 36. Questions?