creating mobile apps an introduction to -...
TRANSCRIPT
![Page 1: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/1.jpg)
#engageug
Creating mobile apps an introduction to
![Page 2: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/2.jpg)
#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”)
![Page 3: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/3.jpg)
#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
![Page 4: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/4.jpg)
#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
![Page 6: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/6.jpg)
#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
![Page 7: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/7.jpg)
#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
![Page 8: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/8.jpg)
#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
![Page 9: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/9.jpg)
#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
![Page 10: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/10.jpg)
#engageug 10
HybridWebApp
(HTML, CSS, JS)
Native container
Webview
Native components
Native container
Webview
Native components
Native container
Webview
Native components
![Page 11: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/11.jpg)
#engageug
Hybrid apps suck
11
![Page 12: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/12.jpg)
#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
![Page 13: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/13.jpg)
#engageug
Say hello to
13
![Page 14: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/14.jpg)
#engageug 14
• Platform to build hybrid apps
• Tries to overcome common problems
• Optimized UI components
• Publication/ updating apps
• Development workflow
• Push notifications
Ionic
![Page 15: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/15.jpg)
#engageug 15
• Built on top of AngularJS
• Can be deployed to the app stores
• For iOS, Android, Windows Phone
• V2 in the making
Ionic
![Page 16: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/16.jpg)
#engageug 16
• Based on Apache Cordova
• Open sourced PhoneGap version
• Managed by Apache Foundation
Ionic
![Page 17: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/17.jpg)
#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
![Page 18: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/18.jpg)
#engageug 18
HybridWebApp
(HTML, CSS, JS)
Native container
Webview
Native components
Native container
Webview
Native components
Native container
Webview
Native components
![Page 19: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/19.jpg)
#engageug 19
• CSS components
• grid, headers, tabs
• JavaScript components
• popups, tabs, modals
• Icons
• ion icons
Ionic Framework
![Page 20: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/20.jpg)
#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
![Page 21: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/21.jpg)
#engageug
Your first ionic app
21
![Page 22: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/22.jpg)
#engageug 22
• npm install -g cordova ionic
Installing Ionic
![Page 23: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/23.jpg)
#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
![Page 24: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/24.jpg)
#engageug 24
• ionic start engage sidemenu
Demo
![Page 25: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/25.jpg)
#engageug 25
• ionic serve
• ionic run -l
• ionic run android -l
• ionic build
Testing and debugging
![Page 26: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/26.jpg)
#engageug 26
• Ionic creator
• Ionic view
• Ionic lab
• Ionic deploy
• Ionic push
• Ionic auth
Ionic services
![Page 27: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/27.jpg)
#engageug 27
• Mainly to create static pages
• Little application logic
Ionic Creator
![Page 28: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/28.jpg)
#engageug 28
• Downloadable app to preview your work
• From the CLI: “ionic upload”
• Usable for testing
Ionic View
![Page 29: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/29.jpg)
#engageug 29
• Desktop app that wraps commands for which you would normally use the CLI.
• Comes with a built-in Chrome version
Ionic Lab
![Page 30: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/30.jpg)
#engageug 30
• Deploying different code versions within the existing app.
• Different “channels” for dev/ test/ prod
Ionic Deploy
![Page 31: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/31.jpg)
#engageug 31
• Push notifications through Ionic
Ionic Push
![Page 32: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/32.jpg)
#engageug 32
• Authentication through Ionic Services
Ionic Auth
![Page 33: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/33.jpg)
#engageug 33
• Ionic framework is open source
• The services aren’t
• Free while in beta
• There is a free plan
Pricing
![Page 34: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/34.jpg)
#engageug
Extending the demo
34
![Page 35: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/35.jpg)
#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
![Page 36: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/36.jpg)
#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
![Page 37: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/37.jpg)
#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
![Page 38: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/38.jpg)
#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
![Page 39: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/39.jpg)
#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
![Page 40: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/40.jpg)
#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
![Page 41: Creating mobile apps an introduction to - Engageengage.ug/.../$file/Engage2016_GettingStartedwithIonic.pdf · • Built on top of AngularJS ... • Ionic gives your near-native look](https://reader033.vdocument.in/reader033/viewer/2022052711/5ac86dd57f8b9acb688c8dec/html5/thumbnails/41.jpg)
#engageug
Dank u!
41