1. 1
Building Hybrid Mobile Apps
using SharePoint API
Sanjay Patel
Principal Consultant – Business Productivity Group
Neudesic
Sanjay.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
2

3. 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
4
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?
5
 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. 6

7. 7
Setting up Development Environment for
Ionic & Tools available
Download 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. 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.mi
crosoft.com/8fa5bff2-e023-4e13-
8b36-0244e935fb7d
 Open Visual Studio and Create
New Project

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

10. 10
Questions?

11. 11
References
http://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. 12
Thank You!