Beginner s Guide to Cordova and Mobile Application Development

Size: px

Start display at page:

Download "Beginner s Guide to Cordova and Mobile Application Development"

Erick Austin
5 years ago
Views:

1 November 13, 2018 Beginner s Guide to Cordova and Mobile Application Development George Campbell Lead Software Engineer Doug Davies Lead Software Engineer

2 George Campbell Lead Software Engineer

3 Doug Davies Lead Software Engineer

4 Agenda 1. What is a hybrid mobile app? 2. How to pick a framework 3. Mobile & Authentication 4. Tips, Tricks and Gotchas 5. Examples & Demos Checkout Kiosk (Doug) Find this book by photo (George) Scan a batch of barcodes (Karen)

5 What is a hybrid mobile app?

6 Characteristics Develop native apps using web technologies you are already familiar with (HTML, CSS, JavaScript). Leverage mobile device specific technologies via plugins: Camera, GPS, etc. Cross platform Android, ios Code generated for Browser, XCode, and Android Studio platforms. One code base.

7 WebView App runs as native, but is a container for a WebView. Hybrid frameworks typically have plugins that bridge the WebView and native operating system so they can use native APIs. WebViews take advantage of GPUs on modern devices as well as fast JavaScript engines. No longer an excuse to say it s slow.

8 How to pick a framework

9 So many to choose from!

10 Considerations Supports widest range of customer devices. Secure (login, datastore). Access to device level hardware (i.e. cameras). Excellent user experience. Rapid development cycle to support agile process. Easy to deploy to App Store / Google Play. Easy to maintain long term. Good community and support forums.

11 Why we picked Cordova One code base (HTML / CSS / JavaScript), many devices. Low cost (FREE) Availability of Plugins and JavaScript libraries. Large community with code examples and forums. Mature. Most problems have already been solved. Uses Node for a robust build environment. Allows rapid development in the browser.

12 OCLC Users prefer ios and Android Typical Operating System usage by OCLC s mobile users

13 One Code Base Reduces Development Cost 2 Swift Developers (Objective C) 2 Kotlin Developers (Android Java) 2 Web Developers (javascript) Keep code bases in sync! Code Base in Xcode Apple Binary Code Base in Android Studio Android Binary Maintenance! Web App in a Hybrid Framework Apple Binary Android Binary ios User Android User ios User Android User

14 Mobile & Authentication

15 OAuth for Mobile Clients Typically to talk to OCLC services from your backend service you d use a key and secret. However Mobile apps shouldn t embed the secret in the app, because it can be easily discovered and compromised. Thus Mobile clients should use one of the Mobile OAuth Access Token flows.

16 OAuth for Mobile Clients Mobile app uses a web browser to open the authentication endpoint. User is redirected to login pages. After a successful login the client receives back an Access Token. The Access Token is then used to make requests to OCLC APIs. The Access Token is only valid for a short period of time and must be renewed (refresh token) periodically.

17 OAuth for Mobile Clients You can read more about OCLC s mobile authentication patterns at:

18 OAuth for Mobile Clients OCLC provides a Cordova based plugin for authentication at: The plugin was developed for Digby, but we decided to open it up so anyone can use it. The Checkin Kiosk demo at the end of this presentation will show you how to use it. We are working on a new mobile flow that will be available early next year. At that time we will be making a new Cordova plugin available and switching Digby over to use it.

19 Tips, Tricks and Gotchas

20 Don t write it yourself! Most likely someone has already solved your problem. Lot s of well tested JavaScript available. Select based on community and how active the project is. Use the forums and Slack channels!

21 Cordova Plugins Use the plugins!!!

22 Key libraries and utilities

23 Examples & Demos

24 Checkout Kiosk - Doug A simple self-checkout station that can run on a desktop browser or mobile device. Library staff can login and start the station for the day so that patrons can enter their user barcode and then enter item barcodes for checkout. Uses Cordova, OCLC s WMS NCIP service, OCLC s OAuth2 mobile pattern, and device camera for scanning barcodes. The fully working project will show you how to get Cordova up and running, authenticating, and making API calls.

25 Find this book by photo - George Can we get an OCLC Number from a cover or spine photo? My list of concerns when I started: What mobile framework will support image taking and machine learning and run on ios and Android? What is the pattern for building mobile machine learning applications? Can I make a working demonstrator quickly with minimal code? How well does it work? Will the demo spark interest by the Product Team? How hard is it to productionize this?

26 Machine Learning - custom vs. canned 1. Roll your own model, train it with data and deploy it. Start with a large, representative data set. Build a development framework to create, train and test models. Implement your model in your app. Update your model if the underlying data changes. Expensive to make and maintain. No cost per usage but model may run slowly or have a high error rate. 2. Use a canned solution for specific use cases Siri, OK Google and Alexa are perfect examples for voice. Character recognition is also a RESTful http request away. You cannot train models better than Amazon, Apple, Google and Microsoft can. AAG & M improve their services every day with more power and accuracy. Small cost per usage and bandwidth of sending images. Operating system independent perfect for hybrid.

27 Mobile Machine Learning - some options ios Core ML2 fast custom Apple silicon on newest devices Vision text recognition on device requires native code plugin Android Android ML Kit no custom silicon relies more on cloud Text Recognition on device (sparse text) or in cloud (dense text, non-latin chars) Cloud Solutions (I focused on Amazon because I m a long time AWS user) Amazon Machine Learning RESTful HTTP Request ideal for hybrid app

28 Amazon Machine Learning Focused on API based ML solutions You can create a free account and perform 5000 image to text translations per month for free with Amazon Rekognition. You can integrate your mobile app with other services, like running Restful services on Lambdas or persisting data in S3 buckets. Amazon, Microsoft, Google and Apple offer wholistic AI cloud solutions Artificial Intelligence is actually math and statistics at scale against large data sets. Machine Learning is running inputs through a trained model to get sensible outputs.

29 Configure Amazon Services

Find Book By Photo Architecture Cordova API Access Camera POST Image as a Base64 Binary File 1 2 JSON Response containing text Amazon Rekognition Service $1 per

30 Find Book By Photo Architecture Cordova API Access Camera POST Image as a Base64 Binary File 1 2 JSON Response containing text Amazon Rekognition Service $1 per 1000 images, 5000 free per month www folder Angular JS, CSS, HTML 3 4 GET with text embedded in request url JSON Response containing MARC record OCLC WorldCat Search API

31 Demo App and Code Walk Through

32 Scan a batch of barcodes - Karen Uses the camera to scan barcodes and maintains a list. The list can then be exported. Started from Checkout Kiosk demo Uses Cordova, OCLC s WMS Collection Management service, OCLC s OAuth2 mobile pattern, device camera for scanning barcodes and local storage for list of scanned barcodes. Challenges: permissions: camera, internet, file storage Lessons learned: can load libraries from internet rather than put them in build. Good for testing

33 Slack Channel Keep the conversation going! oclcdevnet.slack.com #oclcdevconnect

34 George Campbell Lead Software Engineer Doug Davies Lead Software Engineer Stay connected

Software Architecture Documentation for the JRC MYGEOSS app for Invasive Species project

Software Architecture Documentation for the JRC MYGEOSS app for Invasive Species project 2015.3724 Table of Contents 1 Architecture View... 2 2 Application... 3 2.1 Technologies Used... 3 2.1.1 Apache