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

1. Building Cross Platform Mobile Apps with
Angular, Ionic, ngCordova, Web API and
PhoneGap Build using Visual Studio
www.dotnet-tricks.com

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. “CODING IS RHYME”
www.dotnet-tricks.com
- Shailendra Chauhan

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. Continue...
•Visual Studio Tools for Apache Cordova
•AngularJS
•Ionic
•NgCordova
•Web API
•PhoneGap Build
•Hybrid App Directory Structure
•Demonstration
www.dotnet-tricks.com

6. Do you need a Mobile App?
www.dotnet-tricks.com

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. Comparing Html5, Hybrid & Native App
www.dotnet-tricks.com

9. Comparing Html5, Hybrid & Native App
www.dotnet-tricks.com

10. Hybrid App vs Html5 App
www.dotnet-tricks.com

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. Native App vs Hybrid App
www.dotnet-tricks.com

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. Hybrid App Stack vs Native App Stack
www.dotnet-tricks.com

15. Hybrid App Stack vs Native App Stack

16. Expected Hybrid Apps Growth By 2015
www.dotnet-tricks.com

17. Expected Hybrid Apps Growth By 2015
www.dotnet-tricks.com

18. Most Popular Hybrid Mobile Apps
www.dotnet-tricks.com

19. Most Popular Hybrid Mobile Apps
•Gmail
•Wikipedia
•Linked In
•Amazon
•Apple App Store
•iBooks
•Walmart
•ESPN
www.dotnet-tricks.com

20. Hybrid App Development Options
www.dotnet-tricks.com

21. Hybrid App Development Options
www.dotnet-tricks.com

22. Choosing Hybrid App Development Stack
www.dotnet-tricks.com

23. Choosing Hybrid App Development Stack
www.dotnet-tricks.com

24. Visual Studio 2013 OR 2015
www.dotnet-tricks.com

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. 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. 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. Angular JS
www.dotnet-tricks.com

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. Ionic
www.dotnet-tricks.com

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. Best Friends - Ionic & AngularJS
www.dotnet-tricks.com

33. ngCordova
www.dotnet-tricks.com

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. Web API
www.dotnet-tricks.com

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. PhoneGap Build
www.dotnet-tricks.com

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. Hybrid App Directory Structure
www.dotnet-tricks.com

40. Hybrid App Directory Structure
www.dotnet-tricks.com

41. Demonstration
www.dotnet-tricks.com

42. Questions?
www.dotnet-tricks.com

43. Thank You!
www.dotnet-tricks.com