This document provides an introduction to creating hybrid mobile apps using Ionic and connecting them to IBM Domino. It discusses what hybrid apps and Ionic are, how Ionic uses AngularJS and Cordova to build cross-platform apps, and how to connect an Ionic app to Domino for data via REST. It also covers setting up an initial Ionic app, common UI components, testing and deploying Ionic apps, and additional services like push notifications. The document demonstrates building a basic Ionic app and extending it to retrieve and update real data from a Domino backend over REST.
2. #engageug 2
• What are hybrid apps?
• What is Ionic?
• How can Ionic help to build a hybrid app?
• How do I make Ionic talk to Domino?
What you’ll learn
(a.k.a. “Agenda”)
3. #engageug 3
• You have some experience in using HTML, CSS
and JavaScript
• Maybe you know some AngularJS
• Your undivided attention :-)
What I expect from you
4. #engageug 4
• Long-time Domino/ XPages/ web developer
• Co-owner of Viaware
• Freelance web developer
• Fan of everything web dev (Angular, Bootstrap, MeteorJS)
• Open source dev, blogger, StackOverflow
• IBM Champion 2011-2015
/Me
6. #engageug
6
Three types of apps
Mobile browser
<html>
function() {
foo = bar;
}
Native container
<html>
function() {
foo = bar;
}
Device API
Native app
10101011101
01011001010
11010101010
11010101010
10101101010
10101101010
Device API
Mobile web Hybrid app Native app
7. #engageug 7
• Build using HTML, CSS, JavaScript
• Responsive UI
• Quick (cheap) to develop
• Not installable from app stores
• “Add to homescreen”
• Can’t access all device capabilities
• camera, contacts, sharing options, …
Mobile web
8. #engageug 8
• Best in terms of performance, UI, look & feel
• Access all device capabilities
• Installable from app stores
• Expensive (time/ money) to build for multiple platforms
• Requires specific toolset for every supported platform
• Objective C, Swift, Java, C#
Native
9. #engageug 9
• Best of both worlds
• Native application that uses mobile platform’s WebView
• Think of a WebView as an embedded browser
• In general, takes less time to develop.
• Cross platform
• Installable from app stores
• Can use native components
Hybrid
14. #engageug 14
• Platform to build hybrid apps
• Tries to overcome common problems
• Optimized UI components
• Publication/ updating apps
• Development workflow
• Push notifications
Ionic
15. #engageug 15
• Built on top of AngularJS
• Can be deployed to the app stores
• For iOS, Android, Windows Phone
• V2 in the making
Ionic
16. #engageug 16
• Based on Apache Cordova
• Open sourced PhoneGap version
• Managed by Apache Foundation
Ionic
17. #engageug 17
• Platform that provides a consistent set of JavaScript
APIs to access device capabilities through plug-ins
• Allows Ionic to build for multiple platforms
• Access to device functionality
• Plugin eco-system, can be added to Ionic
• https://cordova.apache.org/plugins/
Cordova
23. #engageug 23
• Ionic comes with a couple of boilerplate apps
(blank, sidemenu, tabs)
• Give you a basic app/ folder structure
• ionic start <yourApp> <template>
Getting started
35. #engageug 35
• Get some real data using REST
• http://www.assono.de/blog/d6plinks/
ibmconnect2016-ad1238
• Authentication
• Make updates (save, delete)
• https://github.com/markleusink/ionic-demo
Extending the demo
36. #engageug 36
• When viewing an Ionic app in a browser you’ll run into
CORS issues
• Can be solved by using the built-in proxy function
• Means you need to update your API’s endpoint (when
developing)
• And change it back when deploying…
• Alternative is to add the headers to your Domino server
CORS
37. #engageug 37
• The ExtLib REST service provides pagination of
results out-of-the box.
• Use start and count parameters
• Response has a header called Content-Range
Infinite scroll
38. #engageug 38
• Basic- or session authentication
• For session: Domino returns login form when login
unsuccessful
• While you where expecting JSON
• But if you know that it should be JSON, you can
check for that.
• Create login form, post to “.nsf?login”, handle response
Authentication
39. #engageug 39
• Save
• HTTP PATCH to ExtLib REST Service
• /api.xsp/users/<unid>
• Can perform field validations
• Delete
• HTTP DELETE to ExtLib REST Service
Updates
40. #engageug 40
• Hybrid apps are a great way to get started building apps
• Ionic is stable, but still in beta
• Cross-platform
• Ionic gives your near-native look & feel and performance
• But if you want (need) more, go for native
• Keep an eye on the pricing model (when out of beta)
Wrap up