1

Building Hybrid Mobile Apps using SharePoint APISanjay PatelPrincipal Consultant – Business Productivity GroupNeudesicSanjay.Patel@neudesic.com

2

2

Agenda What is Hybrid Mobile App Difference between different apps – Web Apps, Hybrid Apps

and Native Apps What is Cordova, Ionic and AngularJS Framework? Setting up development environment Demo Questions

3

What is Hybrid Mobile App? Hybrid mobile app is like any other mobile app but different than a

mobile web site, developed using HTML, CSS and Java Scripts Consider it as a web app, primarily built using HTML Java Script and

CSS, then wrapped inside a container that provides access to many native platform features

It is launched inside Web View (Web View is a chrome less browser window that’s typically configured to run full screen.) 

Hybrid mobile app provides many benefits for many business applications by combining best/worst of both native and HTML5 apps

4

4

Web Apps vs Native Apps vs Hybrid Apps

Web Apps(HTML5 app) Native Apps Hybrid Apps

Responsive web site which can be viewed in the browser in the mobile

Platform Specific Mobile App (Separate app for iOS, Android and Windows)

Platform independent app for iOS, Android and Windows

No Separate development required for browser and devices

Different languages/tools required to develop app for different platforms

HTML5,CSS3 and JS can be used along with direct access to native APIs of cordova

Runs in browser through IIS ,doesn’t support native features and can’t be distributed in app store

Best performance Limited performance

Expensive development and maintenance

Cheap development and maintenance

5

5

What is Cordova? A platform for developing mobile apps with HTML, CSS and

JavaScript An open source collection of JavaScript device APIs Something that abstracts away device specific APIs Toolsets/Frameworks built on top of Cordova

Ionic PhoneGap (Abode)

6

6

What is AngularJS and Ionic Framework? Ionic Open-Source SDK for hybrid mobile app development Built on top of AngularJS and Apache Cordova Depends on Node.js

AngularJS Open source JavaScript framework for creating dynamic web

applications MV* Framework Uses JQLite (a subset of JQuery) for DOM manipulations AngularJS lets you extend HTML vocabulary for your application

with some additional declarations that are useful for web applications.

7

Setting up Development Environment for Ionic & Tools availableDownload and Install Cordova

Download and install Node.js. - https://nodejs.org/en/ Download and install a git client. - http://git-scm.com/ (e.g.

http://git-scm.com/download/win for windows), Install the Git to manage various package used by Cordova or Ionic framework.

Install the cordova module using npm utility of Node.js. The cordova module will automatically be downloaded by the npm utility. Open Node.js command prompt and run following command

npm install -g cordova (-g for global module, shared for all projects which we will create).

Download and Install Ionic Install Ionic using following command

npm install -g ionic

Now let’s see how we can create HelloWorld application using ionic command line

8

Setting up Visual Studio to create Ionic Apps Visual Studio 2013 with

Update 3 with Windows Phone SDK

Visual Studio Tools for Apache Cordova https://www.visualstudio.com/en-us/features/cordova-vs.aspx

Download and Install Ionic Project Templates for Visual Stuido - https://visualstudiogallery.msdn.microsoft.com/8fa5bff2-e023-4e13-8b36-0244e935fb7d

Open Visual Studio and Create New Project

9

Demo – Let’s create a mobile app using Ionic and Office 365 Apis

9

10

Questions?

11

Referenceshttp://www.codemag.com/article/1411031

http://www.codemag.com/article/1501021

https://vimeo.com/115559932

https://www.microsoftvirtualacademy.com/en-us/training-courses/cross-platform-development-with-visual-studio-8439?l=vAL1s1Uz_3704984382

12

Thank You!