Creating mobile apps - an introduction to Ionic (Engage 2016)
1 like1,364 views
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.
Creating mobile apps - an introduction to Ionic (Engage 2016)
- 1. #engageug Creating mobile apps an introduction to
- 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
- 5. #engageug 5 Source:times.com/ Joseph van Os / Getty Images
- 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
- 10. #engageug 10 Hybrid WebApp (HTML, CSS, JS) Native container Webview Native components Native container Webview Native components Native container Webview Native components
- 12. #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
- 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
- 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 • CSS components • grid, headers, tabs • JavaScript components • popups, tabs, modals • Icons • ion icons Ionic Framework
- 20. #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
- 22. #engageug 22 • npm install -g cordova ionic Installing Ionic
- 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
- 24. #engageug 24 • ionic start engage sidemenu Demo
- 25. #engageug 25 • ionic serve • ionic run -l • ionic run android -l • ionic build Testing and debugging
- 26. #engageug 26 • Ionic creator • Ionic view • Ionic lab • Ionic deploy • Ionic push • Ionic auth Ionic services
- 27. #engageug 27 • Mainly to create static pages • Little application logic Ionic Creator
- 28. #engageug 28 • Downloadable app to preview your work • From the CLI: “ionic upload” • Usable for testing Ionic View
- 29. #engageug 29 • Desktop app that wraps commands for which you would normally use the CLI. • Comes with a built-in Chrome version Ionic Lab
- 30. #engageug 30 • Deploying different code versions within the existing app. • Different “channels” for dev/ test/ prod Ionic Deploy
- 31. #engageug 31 • Push notifications through Ionic Ionic Push
- 32. #engageug 32 • Authentication through Ionic Services Ionic Auth
- 33. #engageug 33 • Ionic framework is open source • The services aren’t • Free while in beta • There is a free plan Pricing
- 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