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.

Building Cross Platform Mobile Apps

Building Cross Platform Mobile Apps with Angular, Ionic, ngCordova, Web API and PhoneGap Build using Visual Studio

Related Books

Free with a 30 day trial from Scribd

See all

Building Cross Platform Mobile Apps

  1. 1. Building Cross Platform Mobile Apps with Angular, Ionic, ngCordova, Web API and PhoneGap Build using Visual Studio www.dotnet-tricks.com
  2. 2. About Me Hi, I’m Shailendra Chauhan Full-time Author, Consultant & Trainer @DotNetTricks Founder and Author of www.dotnet-tricks.com and www.dotnettricks.io Author of ASP.NET MVC, LINQ and AngularJS Interview Questions and Answers Books @proshailendra @proshailendrachauhan
  3. 3. “CODING IS RHYME” www.dotnet-tricks.com - Shailendra Chauhan
  4. 4. •Do you need a Mobile App? •Comparing Html5, Hybrid & Native App •Hybrid Apps Growth By 2015 •Hybrid App Stack vs Native App Stack •Hybrid App Development Options •Choosing Hybrid App Development Stack •Visual Studio 2013 OR 2015 www.dotnet-tricks.com Agenda
  5. 5. Continue... •Visual Studio Tools for Apache Cordova •AngularJS •Ionic •NgCordova •Web API •PhoneGap Build •Hybrid App Directory Structure •Demonstration www.dotnet-tricks.com
  6. 6. Do you need a Mobile App? www.dotnet-tricks.com
  7. 7. Do you need a Mobile App? •World is moving towards mobility •Reaching to more customers •Customer engagement •Customer service and support •Promotion www.dotnet-tricks.com
  8. 8. Comparing Html5, Hybrid & Native App www.dotnet-tricks.com
  9. 9. Comparing Html5, Hybrid & Native App www.dotnet-tricks.com
  10. 10. Hybrid App vs Html5 App www.dotnet-tricks.com
  11. 11. Hybrid App vs Html5 App • Platform independent • Runs inside web view • Runs locally on device • Access to mobile native features • App store distribution • Platform independent • Runs in browser • Runs through web server (IIS) • Doesn’t support • Doesn’t has App store distribution www.dotnet-tricks.com
  12. 12. Native App vs Hybrid App www.dotnet-tricks.com
  13. 13. Native App vs Hybrid App • Platform Dependent • Respective development tools • Time consuming • Expensive development • More platform more code • Best Performance • Easy access to mobile native features • Platform Independent • Commonly used development tools • Quick development • Cheap development • Single code for multiple platform • Limited Performance • Limited access to mobile native features www.dotnet-tricks.com
  14. 14. Hybrid App Stack vs Native App Stack www.dotnet-tricks.com
  15. 15. Hybrid App Stack vs Native App Stack
  16. 16. Expected Hybrid Apps Growth By 2015 www.dotnet-tricks.com
  17. 17. Expected Hybrid Apps Growth By 2015 www.dotnet-tricks.com
  18. 18. Most Popular Hybrid Mobile Apps www.dotnet-tricks.com
  19. 19. Most Popular Hybrid Mobile Apps •Gmail •Wikipedia •Linked In •Amazon •Apple App Store •iBooks •Walmart •ESPN www.dotnet-tricks.com
  20. 20. Hybrid App Development Options www.dotnet-tricks.com
  21. 21. Hybrid App Development Options www.dotnet-tricks.com
  22. 22. Choosing Hybrid App Development Stack www.dotnet-tricks.com
  23. 23. Choosing Hybrid App Development Stack www.dotnet-tricks.com
  24. 24. Visual Studio 2013 OR 2015 www.dotnet-tricks.com
  25. 25. Visual Studio 2013 OR 2015 • Easy setup and installation • Develop faster with nearly 100% shared code • Debug on any device or emulator • Use the JavaScript framework you love • Publish to any App Store www.dotnet-tricks.com
  26. 26. Visual Studio 2013 Tools for Apache Cordova Reference: https://msdn.microsoft.com/en-us/library/dn757054(v=vs.120).aspx www.dotnet-tricks.com
  27. 27. Visual Studio 2015 Tools for Apache Cordova Reference: https://msdn.microsoft.com/en-us/library/dn757054(v=vs.140).aspx www.dotnet-tricks.com
  28. 28. Angular JS www.dotnet-tricks.com
  29. 29. Angular JS • JavaScript Framework based on MV-* pattern • Extends HTML by adding new attributes, tags and expressions • Customize and Extensible • Code Reusability • Powerful Data Binding • Dependency Injection • Compatibility • Support www.dotnet-tricks.com
  30. 30. Ionic www.dotnet-tricks.com
  31. 31. Ionic • HTML5 hybrid mobile apps development framework • Best friend of AngularJS • Native-styled sleek and light weight mobile UI elements • Boilerplate app structure ready for customization • Delivers native app like interaction & performance • A Powerful CLI to create, build, test, and deploy apps • Community Support www.dotnet-tricks.com
  32. 32. Best Friends - Ionic & AngularJS www.dotnet-tricks.com
  33. 33. ngCordova www.dotnet-tricks.com
  34. 34. ngCordova • An AngularJS wrappers for the most popular Cordova and PhoneGap plugins to access mobile native features • Collection of 63+ native Cordova plugins • Make easy to build, test, and deploy Cordova mobile apps with AngularJS www.dotnet-tricks.com
  35. 35. Web API www.dotnet-tricks.com
  36. 36. Web API • A framework for building HTTP services to be consumed by a broad range of clients like browsers, mobiles and tablets • Light weight RESTful architecture • Good for devices which have limited bandwidth like mobiles and tablets • Supports ASP.NET MVC features • Supports Self Hosting and IIS Hosting www.dotnet-tricks.com
  37. 37. PhoneGap Build www.dotnet-tricks.com
  38. 38. PhoneGap Build • Cloud service by Adobe as Free and Paid • Compile HTML, CSS and JavaScript app into native app for the desired platform like iOS, Android and Windows • Provides app-store ready apps without the headache of maintaining native SDKs • Supports multiple platforms • Easily share your apps www.dotnet-tricks.com
  39. 39. Hybrid App Directory Structure www.dotnet-tricks.com
  40. 40. Hybrid App Directory Structure www.dotnet-tricks.com
  41. 41. Demonstration www.dotnet-tricks.com
  42. 42. Questions? www.dotnet-tricks.com
  43. 43. Thank You! www.dotnet-tricks.com

×