Beginner's Guide to Cordova and Mobile Application Development - November 13, 2018 - OCLC
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
November 13, 2018
Beginner’s Guide to Cordova and Mobile Application
Development
George Campbell Doug Davies
Lead Software Engineer Lead Software Engineer
George Campbell Lead Software Engineer
Doug Davies Lead Software Engineer
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)
What is a hybrid mobile app?
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.
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.
How to pick a framework
So many to choose from!
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.
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.
OCLC Users prefer iOS and Android Typical Operating System usage by OCLC’s mobile users
One Code Base Reduces Development Cost
2 Swift 2 Kotlin 2 Web
Developers Developers Developers
(Objective C) (Android Java) (javascript)
Code Base in Code Base in Maintenance!
Web App in a Hybrid
Keep
Xcode Android Studio Framework
code
bases
in sync! Apple Binary Android Binary Apple Binary Android Binary
iOS User Android User iOS User Android UserMobile & Authentication
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.
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.
OAuth for Mobile Clients You can read more about OCLC’s mobile authentication patterns at: https://www.oclc.org/developer/develop/authentication/access- tokens/user-agent-or-mobile-pattern.en.html
OAuth for Mobile Clients OCLC provides a Cordova based plugin for authentication at: https://github.com/OCLC-Developer-Network/oclc-authentication-plugin 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.
Tips, Tricks and Gotchas
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!
Cordova Plugins
Use the plugins!!!
https://cordova.apache.org/pluginsKey libraries and utilities
Examples & Demos
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.
https://github.com/OCLC-Developer-Network/oclc-cordova-demoFind 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?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.Mobile Machine Learning - some options
iOS
• Core ML2 – fast custom Apple silicon on newest devices
• “Vision” text recognition – on device requires native code plugin
• https://martinmitrevski.com/2017/10/19/text-recognition-using-vision-and-
coreml/
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)
• https://firebase.google.com/docs/ml-kit/recognize-text
Cloud Solutions (I focused on Amazon because I’m a long time AWS user)
• Amazon Machine Learning
• RESTful HTTP Request – ideal for hybrid app
• https://aws.amazon.com/rekognition/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.
• https://aws.amazon.com/machine-learning/
• https://azure.microsoft.com/en-us/free/machine-learning
• https://cloud.google.com/products/ai/
• https://developer.apple.com/machine-learning/
• “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.Configure Amazon Services
Find Book By Photo Architecture
POST Image
Amazon $1 per 1000
as a Base64 Rekognition images, 5000
Binary File Service free per month
Cordova API
• Access Camera JSON Response
1 2 containing text
GET with text
www folder embedded in
OCLC
• Angular 3
request url
WorldCat
• JS, CSS, HTML
4 Search API
JSON Response
containing
MARC recordDemo App and Code Walk Through
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
Slack Channel
Keep the conversation going!
oclcdevnet.slack.com
#oclcdevconnectGeorge Campbell Doug Davies
Lead Software Engineer Lead Software Engineer
Stay connectedYou can also read
