Upload
shailendra-chauhan
View
995
Download
4
Embed Size (px)
Citation preview
Building Cross Platform Mobile Apps with Angular, Ionic, ngCordova, Web API and
PhoneGap Build using Visual Studio
www.dotnet-tricks.com
About Me
Hi, I’m Shailendra Chauhan
Full-time Author, Consultant & Trainer @DotNetTricks
Founder and Author of www.dotnet-tricks.com andwww.dotnettricks.io
Author of ASP.NET MVC, LINQ and AngularJSInterview Questions and Answers Books
@proshailendra @proshailendrachauhan
“CODING IS RHYME”
www.dotnet-tricks.com
- Shailendra Chauhan
•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
Continue...•Visual Studio Tools for Apache Cordova
•AngularJS
• Ionic
•NgCordova
•Web API
•PhoneGap Build
•Hybrid App Directory Structure
•Demonstration
www.dotnet-tricks.com
Do you need a Mobile App?
www.dotnet-tricks.com
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
Comparing Html5, Hybrid & Native App
www.dotnet-tricks.com
Comparing Html5, Hybrid & Native App
www.dotnet-tricks.com
Hybrid App vs Html5 App
www.dotnet-tricks.com
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
Native App vs Hybrid App
www.dotnet-tricks.com
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
Hybrid App Stack vs Native App Stack
www.dotnet-tricks.com
Hybrid App Stack vs Native App Stack
Expected Hybrid Apps Growth By 2015
www.dotnet-tricks.com
Expected Hybrid Apps Growth By 2015
www.dotnet-tricks.com
Most Popular Hybrid Mobile Apps
www.dotnet-tricks.com
Most Popular Hybrid Mobile Apps
•Gmail
•Wikipedia
•Linked In
•Amazon
•Apple App Store
• iBooks
•Walmart
•ESPN
www.dotnet-tricks.com
Hybrid App Development Options
www.dotnet-tricks.com
Hybrid App Development Options
www.dotnet-tricks.com
Choosing Hybrid App Development Stack
www.dotnet-tricks.com
Choosing Hybrid App Development Stack
www.dotnet-tricks.com
Visual Studio 2013 OR 2015
www.dotnet-tricks.com
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 frameworkyou love
• Publish to any App Store
www.dotnet-tricks.com
Visual Studio 2013 Tools for Apache Cordova
Reference: https://msdn.microsoft.com/en-us/library/dn757054(v=vs.120).aspx
www.dotnet-tricks.com
Visual Studio 2015 Tools for Apache Cordova
Reference: https://msdn.microsoft.com/en-us/library/dn757054(v=vs.140).aspx
www.dotnet-tricks.com
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
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
Best Friends - Ionic & AngularJS
www.dotnet-tricks.com
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
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
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
Hybrid App Directory Structure
www.dotnet-tricks.com
Hybrid App Directory Structure
www.dotnet-tricks.com