creating mobile apps - an introduction to ionic (engage 2016)
TRANSCRIPT
#engageug
Creating mobile apps an introduction to
#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”)
#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
#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
#engageug6
Three types of appsMobile browser
<html>
function() { foo = bar;
}
Native container
<html>
function() { foo = bar;
}
Device API
Native app
101010111010101100101011010101010110101010101010110101010101101010
Device API
Mobile web Hybrid app Native app
#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
#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
#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
#engageug 10
HybridWebApp
(HTML, CSS, JS)
Native container
Webview
Native components
Native container
Webview
Native components
Native container
Webview
Native components
#engageug
Hybrid apps suck
11
#engageug 12
• Better WebViews
• Performance and capabilities
• Apple allowing access to WKWebView
• http://developer.telerik.com/featured/why-ios-8s-wkwebview-is-a-big-deal-for-hybrid-development/
• Better tooling (like Ionic…)
But that changed
#engageug
Say hello to
13
#engageug 14
• Platform to build hybrid apps
• Tries to overcome common problems
• Optimized UI components
• Publication/ updating apps
• Development workflow
• Push notifications
Ionic
#engageug 15
• Built on top of AngularJS
• Can be deployed to the app stores
• For iOS, Android, Windows Phone
• V2 in the making
Ionic
#engageug 16
• Based on Apache Cordova
• Open sourced PhoneGap version
• Managed by Apache Foundation
Ionic
#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
#engageug 18
HybridWebApp
(HTML, CSS, JS)
Native container
Webview
Native components
Native container
Webview
Native components
Native container
Webview
Native components
#engageug 19
• CSS components
• grid, headers, tabs
• JavaScript components
• popups, tabs, modals
• Icons
• ion icons
Ionic Framework
#engageug 20
• Action sheet
• Content pane
• Form inputs
• Gestures/ events
• Headers/ footers
• Keyboard
• Tabbar
• Lists
UI Controls▸ Navigation
▸ Modal
▸ Popover
▸ Popup
▸ Scroll
▸ Side menu
▸ Spinner
▸ Tabs
http://ionicframework.com/docs/components
#engageug
Your first ionic app
21
#engageug 22
• npm install -g cordova ionic
Installing Ionic
#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
#engageug 24
• ionic start engage sidemenu
Demo
#engageug 25
• ionic serve
• ionic run -l
• ionic run android -l
• ionic build
Testing and debugging
#engageug 26
• Ionic creator
• Ionic view
• Ionic lab
• Ionic deploy
• Ionic push
• Ionic auth
Ionic services
#engageug 27
• Mainly to create static pages
• Little application logic
Ionic Creator
#engageug 28
• Downloadable app to preview your work
• From the CLI: “ionic upload”
• Usable for testing
Ionic View
#engageug 29
• Desktop app that wraps commands for which you would normally use the CLI.
• Comes with a built-in Chrome version
Ionic Lab
#engageug 30
• Deploying different code versions within the existing app.
• Different “channels” for dev/ test/ prod
Ionic Deploy
#engageug 31
• Push notifications through Ionic
Ionic Push
#engageug 32
• Authentication through Ionic Services
Ionic Auth
#engageug 33
• Ionic framework is open source
• The services aren’t
• Free while in beta
• There is a free plan
Pricing
#engageug
Extending the demo
34
#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
#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
#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
#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
#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
#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
#engageug
Dank u!
41