hybrid mobile apps - meetup
TRANSCRIPT
1
Building Hybrid Mobile Apps using SharePoint APISanjay PatelPrincipal Consultant – Business Productivity [email protected]
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!