building cross platform mobile apps

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

Upload: shailendra-chauhan

Post on 16-Jul-2015

995 views

Category:

Technology


4 download

TRANSCRIPT

Page 1: Building Cross Platform Mobile Apps

Building Cross Platform Mobile Apps with Angular, Ionic, ngCordova, Web API and

PhoneGap Build using Visual Studio

www.dotnet-tricks.com

Page 2: Building Cross Platform Mobile Apps

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

Page 3: Building Cross Platform Mobile Apps

“CODING IS RHYME”

www.dotnet-tricks.com

- Shailendra Chauhan

Page 4: Building Cross Platform Mobile Apps

•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

Page 5: Building Cross Platform Mobile Apps

Continue...•Visual Studio Tools for Apache Cordova

•AngularJS

• Ionic

•NgCordova

•Web API

•PhoneGap Build

•Hybrid App Directory Structure

•Demonstration

www.dotnet-tricks.com

Page 6: Building Cross Platform Mobile Apps

Do you need a Mobile App?

www.dotnet-tricks.com

Page 7: Building Cross Platform Mobile Apps

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

Page 8: Building Cross Platform Mobile Apps

Comparing Html5, Hybrid & Native App

www.dotnet-tricks.com

Page 9: Building Cross Platform Mobile Apps

Comparing Html5, Hybrid & Native App

www.dotnet-tricks.com

Page 10: Building Cross Platform Mobile Apps

Hybrid App vs Html5 App

www.dotnet-tricks.com

Page 11: Building Cross Platform Mobile Apps

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

Page 12: Building Cross Platform Mobile Apps

Native App vs Hybrid App

www.dotnet-tricks.com

Page 13: Building Cross Platform Mobile Apps

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

Page 14: Building Cross Platform Mobile Apps

Hybrid App Stack vs Native App Stack

www.dotnet-tricks.com

Page 15: Building Cross Platform Mobile Apps

Hybrid App Stack vs Native App Stack

Page 16: Building Cross Platform Mobile Apps

Expected Hybrid Apps Growth By 2015

www.dotnet-tricks.com

Page 17: Building Cross Platform Mobile Apps

Expected Hybrid Apps Growth By 2015

www.dotnet-tricks.com

Page 18: Building Cross Platform Mobile Apps

Most Popular Hybrid Mobile Apps

www.dotnet-tricks.com

Page 19: Building Cross Platform Mobile Apps

Most Popular Hybrid Mobile Apps

•Gmail

•Wikipedia

•Linked In

•Amazon

•Apple App Store

• iBooks

•Walmart

•ESPN

www.dotnet-tricks.com

Page 20: Building Cross Platform Mobile Apps

Hybrid App Development Options

www.dotnet-tricks.com

Page 21: Building Cross Platform Mobile Apps

Hybrid App Development Options

www.dotnet-tricks.com

Page 22: Building Cross Platform Mobile Apps

Choosing Hybrid App Development Stack

www.dotnet-tricks.com

Page 23: Building Cross Platform Mobile Apps

Choosing Hybrid App Development Stack

www.dotnet-tricks.com

Page 24: Building Cross Platform Mobile Apps

Visual Studio 2013 OR 2015

www.dotnet-tricks.com

Page 25: Building Cross Platform Mobile Apps

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

Page 26: Building Cross Platform Mobile Apps

Visual Studio 2013 Tools for Apache Cordova

Reference: https://msdn.microsoft.com/en-us/library/dn757054(v=vs.120).aspx

www.dotnet-tricks.com

Page 27: Building Cross Platform Mobile Apps

Visual Studio 2015 Tools for Apache Cordova

Reference: https://msdn.microsoft.com/en-us/library/dn757054(v=vs.140).aspx

www.dotnet-tricks.com

Page 28: Building Cross Platform Mobile Apps

Angular JS

www.dotnet-tricks.com

Page 29: Building Cross Platform Mobile Apps

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

Page 31: Building Cross Platform Mobile Apps

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

Page 32: Building Cross Platform Mobile Apps

Best Friends - Ionic & AngularJS

www.dotnet-tricks.com

Page 33: Building Cross Platform Mobile Apps

ngCordova

www.dotnet-tricks.com

Page 34: Building Cross Platform Mobile Apps

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

Page 35: Building Cross Platform Mobile Apps

Web API

www.dotnet-tricks.com

Page 36: Building Cross Platform Mobile Apps

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

Page 37: Building Cross Platform Mobile Apps

PhoneGap Build

www.dotnet-tricks.com

Page 38: Building Cross Platform Mobile Apps

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

Page 39: Building Cross Platform Mobile Apps

Hybrid App Directory Structure

www.dotnet-tricks.com

Page 40: Building Cross Platform Mobile Apps

Hybrid App Directory Structure

www.dotnet-tricks.com

Page 41: Building Cross Platform Mobile Apps

Demonstration

www.dotnet-tricks.com

Page 42: Building Cross Platform Mobile Apps

Questions?

www.dotnet-tricks.com

Page 43: Building Cross Platform Mobile Apps

Thank You!

www.dotnet-tricks.com