Downloaded 63 times
Uploaded byMark Leusink
Creating mobile apps - an introduction to Ionic (Engage 2016)
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.
More Related Content
Similar to Creating mobile apps - an introduction to Ionic (Engage 2016)
![Automating ISP Networks Using Ansible and IPAM as a Source of Truth [SoT]](https://cdn.slidesharecdn.com/ss_thumbnails/automatingispnetworksusingansibleandipamasasourceoftruthsot-v25-1-251124105117-d7d4ca24-thumbnail.jpg?width=640&height=640&fit=bounds)
Creating mobile apps - an introduction to Ionic (Engage 2016)
- 1. #engageug Creating mobile apps anintroduction to
- 2. #engageug 2 • Whatare 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 • Youhave 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-timeDomino/ 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
- 5. #engageug 5 Source:times.com/ Josephvan Os / Getty Images
- 6. #engageug 6 Three types ofapps 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 • Buildusing 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 • Bestin 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 • Bestof 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
- 10. #engageug 10 Hybrid WebApp (HTML, CSS,JS) Native container Webview Native components Native container Webview Native components Native container Webview Native components
- 11.
- 12. #engageug 12 • BetterWebViews • 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
- 13.
- 14. #engageug 14 • Platformto build hybrid apps • Tries to overcome common problems • Optimized UI components • Publication/ updating apps • Development workflow • Push notifications Ionic
- 15. #engageug 15 • Builton top of AngularJS • Can be deployed to the app stores • For iOS, Android, Windows Phone • V2 in the making Ionic
- 16. #engageug 16 • Basedon Apache Cordova • Open sourced PhoneGap version • Managed by Apache Foundation Ionic
- 17. #engageug 17 • Platformthat 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
- 18. #engageug 18 Hybrid WebApp (HTML, CSS,JS) Native container Webview Native components Native container Webview Native components Native container Webview Native components
- 19. #engageug 19 • CSScomponents • grid, headers, tabs • JavaScript components • popups, tabs, modals • Icons • ion icons Ionic Framework
- 20. #engageug 20 • Actionsheet • 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
- 21.
- 22. #engageug 22 • npminstall -g cordova ionic Installing Ionic
- 23. #engageug 23 • Ioniccomes with a couple of boilerplate apps (blank, sidemenu, tabs) • Give you a basic app/ folder structure • ionic start <yourApp> <template> Getting started
- 24. #engageug 24 • ionicstart engage sidemenu Demo
- 25. #engageug 25 • ionicserve • ionic run -l • ionic run android -l • ionic build Testing and debugging
- 26. #engageug 26 • Ioniccreator • Ionic view • Ionic lab • Ionic deploy • Ionic push • Ionic auth Ionic services
- 27. #engageug 27 • Mainlyto create static pages • Little application logic Ionic Creator
- 28. #engageug 28 • Downloadableapp to preview your work • From the CLI: “ionic upload” • Usable for testing Ionic View
- 29. #engageug 29 • Desktopapp that wraps commands for which you would normally use the CLI. • Comes with a built-in Chrome version Ionic Lab
- 30. #engageug 30 • Deployingdifferent code versions within the existing app. • Different “channels” for dev/ test/ prod Ionic Deploy
- 31. #engageug 31 • Pushnotifications through Ionic Ionic Push
- 32. #engageug 32 • Authenticationthrough Ionic Services Ionic Auth
- 33. #engageug 33 • Ionicframework is open source • The services aren’t • Free while in beta • There is a free plan Pricing
- 34.
- 35. #engageug 35 • Getsome 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 • Whenviewing 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 • TheExtLib 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 • Hybridapps 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
- 41.