How to Troubleshoot Apps for the Modern Connected Worker
Building Cross Platform Mobile Apps
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
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
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
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
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
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
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
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
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
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