And I have to create mobile apps too? Phil Lane 27th September 2018

Introduction Who is Phil Lane? Content Strategy Specialist at Imprimatur 8 years’ experience in technical documentation XML enthusiast Rotary engine fanatic Amateur brewer Machine Learning geek

About Imprimatur Technology-led documentation and language company Content management Translation, machine translation and language strategy Technical writing and illustration App creation and digital content Established for 23 years Based in London, Godalming and Munich Schema Silver Partner since 2015

What is a mobile app? A mobile app is a computer program designed to run on a mobile device such as a phone/tablet or watch (Wikipedia) Anything that runs on iOS or Android (real world)

What is Apache Cordova? https://cordova.apache.org/ Originally developed in 2009 under the name PhoneGap Acquired by Adobe in 2011 Released to the Open Source community as Apache Cordova in 2011

What is Apache Cordova? Mobile application development framework for creating hybrid apps Open-source software Provides an interface to native capabilities of device Provides an extension framework to allow development of additional features

Why is Cordova useful? Build mobile apps using familiar skills Create multi-platform apps from a single code base Harness features already available in authoring tools Deliver a richer experience to your users Add features to gather data – analytics or feedback

What is a hybrid app? Mobile app running on iOS or Android using a WebView HTML5 JavaScript CSS3

Why not create a mobile web page? Apps provide offline support Use device native features to enhance the experience Camera GPS Storage No hosting infrastructure required

What do I need to get started? Some free tools Basic understanding of: XML HTML/CSS/JS Responsive HTML content SDK for your platform Android Studio XCode (iOS) Willingness to have a go

Node.js and NPM Node is a JavaScript runtime https://www.npmjs.com/ Node is a JavaScript runtime NPM = Node Package Manager Library of JavaScript plugins and tools Easiest way to install Cordova and Cordova plugins

Google Chrome browser Provides a debug and testing environment https://www.google.com/chrome/ Provides a debug and testing environment F12 to open the developer console

HTML aware authoring tool For example: ST4 FrameMaker RoboHelp Flare DITA-OT, etc.

Apache Cordova CLI Allows you to use Cordova through the command line or terminal Installed through NPM C:\npm install –g cordova

Android developer account Needed to publish to Google Play Sign up at https://developer.android.com/ Single $25 fee

Apple developer account Needed to publish apps to the Apple App Store Sign up at https://developer.apple.com/ $99 per year

Step 1 – Create the project C:\tcuk\cordova create tcuk com.example.tcuk TCUK Command to create new app Unique ID for app File path for new application Subfolder for app App name

Anatomy of Cordova project Special scripts Platform specific code Plugins extend the basic Cordova tools App resources – icons and splashscreens, etc. App content Details of app configuration (name, versions, etc.)

Step 2 – Add platforms Tell Cordova which devices you want to create an app for C:\tcuk\cordova platform add android C:\tcuk\cordova platform add ios C:\tcuk\cordova platform add browser

Step 3 – Test environment Check your environment is correctly configured C:\tcuk\cordova run browser C:\tcuk\cordova emulate android C:\tcuk\cordova emulate ios

Step 4 – Customise content Populate this folder

Step 5 – Branding Add branding and corporate identity to the app Customise the app icon Add a splashscreen

Step 5 – Branding Install the splashscreen plugin C:\tcuk\tcuk\cordova plugin add cordova-plugin-splashscreen Add a plugin Plugin name Plugin command

Step 6 – Build Create the app file for installing on devices C:\tcuk\tcuk\cordova build android Phil-pc:~ Phil$ tcuk/tcuk/cordova build ios

Step 7 – Test Determine which devices you are supporting Test as widely as possible

Step 7 – Publish Sign apps with certificates Upload to Google Play/Apple AppStore Await approval

Live demo Let’s build an app!

Further considerations Create content with mobile compatibility in mind Use web compatible images JPG, PNG or SVG Smaller topics work best Cordova vs. commercial build platform PhoneGap Build Telerik platform App may not get approved by app store Add new features Analytics, etc.

Questions and contact Phil Lane Email: phil.lane@imprimatur.co.uk Twitter: @iamphil_lane