ICT role in 21st century education and it's challenges.pdf
Lane - Using Cordova to Create Multi-Platform Mobile Apps from Structured Content
1. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
Using Cordova to create multi-platform Mobile
Apps from structured content
Lavacon Dublin 2017
Tuesday 23rd May
2. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
Introduction
Phil Lane
Content Strategy Specialist at Imprimatur
7 years’ experience in technical documentation
XML enthusiast
Cyclist
Rotary engine fanatic
3. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
About Imprimatur
Technology-led documentation and language company
Content Management
Translation, machine translation and language strategy
Technical writing and illustration
App creation and digital
Specialists in the automotive industry for 22 years
Based in London and Munich
Schema Silver Partner since 2015
4. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
What is Apache Cordova?
Originally developed in 2009 under the name PhoneGap
Bought by Adobe in 2011
Released to the Open Source community as Apache Cordova in 2011
5. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
What is Apache Cordova?
Mobile application development framework
Open-source software
Provides an interface to native capabilities of device
Provides an extension framework to allow development of additional features
6. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
Cordova Architecture
7. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
What can Cordova do?
Create multiplatform apps hybrid apps (iOS, Android, WP)
Develop on Mac or Windows or Linux
8. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
What is a Hybrid App?
Mobile app built using web technologies
HTML5, CSS3, JavaScript
9. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
What does that mean for technical writers?
Publish user manuals to the Google Play Store or the Apple App Store
Deliver a richer experience to your users
Add features to gather data – analytics or feedback
10. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
Why not just create a mobile web page?
Offline support
Access native device features
Make the content feel as though it was designed for the application.
11. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
How to get started with Cordova
Use Node Package Manager to manage installation
Download the Cordova CLI
https://www.npmjs.com/
12. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
What do I need to get started?
Cordova installation
An HTML based output from your structured content e.g.
SCHEMA ST4 OMD output
DITA WebHelp output
FrameMaker HTML5 output
SDK for your platform
Android Studio
XCode (iOS)
13. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
How to build a Cordova app – Step 1 Create the Project
Create a new application
C:Lavaconcordova create lavacon com.example.lavacon Lavacon
Folder path for new application
Command to create new app
Subfolder for app
Unique ID for app
App name
14. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
Anatomy of a Cordova project
Special scripts
Platform specific code
Plugins extend the basic Cordova tools
App resources – icons and splashscreens etc.
The app content
Details of the app configuration (name, versions, etc.)
15. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
How to build a Cordova app – Step 2 Add platforms
Tell Cordova which devices you want to create an app for
C:Lavaconlavaconcordova platform add android
C:Lavaconlavaconcordova platform add ios
16. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
How to build a Cordova app – Step 3 Test Configuration
Check your environment is configured correctly
C:Lavaconlavaconcordova emulate android
C:Lavaconlavaconcordova emulate ios
17. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
How to build a Cordova app – Step 4 Customise content
Add your content
Populate this folder
18. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
How to build a Cordova app – Step 5 Branding
Add branding and corporate identity
Customise app icon
Add a Splashscreen
19. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
How to build a Cordova app – Step 5 Branding
Use Plugins
C:Lavaconlavaconcordova plugin add cordova-plugin-splashscreen
20. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
How to build a Cordova app – Step 5 Build
Create the app package (.apk or .ipa)
C:Lavaconlavaconcordova build android
C:Lavaconlavaconcordova build ios
21. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
How to build a Cordova app – Step 5 Build
Determine what devices you wish to support
Test with as many devices as possible
22. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
How to build a Cordova app – Step 5 Publish
Apple Developer account
Google Play Developer account
Submit for approval
23. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
Demonstration of process
Never do a live demo!
24. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
Things to consider
Cordova vs. commercial build platform
PhoneGap Build
Telerik
Testing process – need lots of devices/emulators
Create content with mobile compatibility in mind
Use web compatible images
• JPG, PNG, or SVG
Smaller topics work best
App may not get approved by app store
25. Your trusted adviser in the automotive industry
Authoring ■ Translation ■ Digital Media ■ Print Media ■ Content Strategy
Contact Details
Phil Lane
Email: phil.lane@imprimatur.co.uk
Twitter: @iamphil_lane