LavaCon

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