A companion to “Apache Cordova in action” Part 3

The price is right

Having completed Chapter 3 of Raymond Camden’s “Apache Cordova in action” and having a really basic app that makes a GET request to the Github search API; I thought let’s try an extension activity. This is Rethinking Transport, so it had better be about transport. How about we find the rail fares between two stations ?

I am not affiliated with BRFares, but I thought that I’d use their web API because it is currently free and doesn’t require a OAuth subscription process. That simplifies the app a whole load. The JSON API is described at: http://www.brfares.com/api/

Changes to the HTML file

The changes to the HTML file are trivial. For the GitHub search API, we only needed one search parameter. For a BRFareas search, we need two: an origin and a destination.

Here’s the code with the new text highlighted:

Basically, I have duplicated the input SearchField and re-named each one to be SearchField1 and SearchField2.

CHANGES TO THE JAVASCRIPT

There’s a bit more to change to the Javascript file app.js. Firstly, we need to declare an extra variable to match the new search box: $search1 & $search2.

We create a second variable to hold not only the Origin of the search, but also the Destination.

We update the text when searching to say that we are doing a search for the Origin to the Destination.

Now, we get to the meaty bit. We need to change our API call to:

$.get(“http://api.brfares.com/querysimple”,

{“orig”:search1, “dest”: search2}, function(res,code) {…});

Querysimple picks up all of the fares between an origin and a destination. The format of the response is:

We are looking for four data tags:

• Ticket code at fares.ticket.code e.g. 7DF
• Ticket name at fares.ticket.name e.g. “Seven Day 1st”
• Route name at fares.route.name e.g. “Not via London”
• Adult Fare at fares..adult.fare e.g. £640.00

We now need to modify the function (res, code) {} to parse the data, not from GitHub API, but from the BRFaresAPI instead.

Tip for the day

It’s hard these days to find an API that doesn’t require OAuth and a developer key, even if it is not charged. It’s time to learn some new skills and get to grips with OAuth … However, I’m afraid that that is not for this blog series.

A companion to “Apache Cordova in Action” Part 2

I am going to skip over Chapter 2 which is all about installing Cordova and setting up your development environment. Raymond gives some excellent step-by-step instructions, but I had actually set up my environment from a different book that I’d also recommend: “Beginning NFC – Near Field Communication with Arduino, Android and PhoneGap” by Tom Igoe, Don Coleman & Brian Jepson. I’ll leave discussing that book for another post !

This blog post is about Chapter 3, which is a bit more than a “Hello World” application that you get with most Cordova books.

The book discusses that that CLI provides a – – copy-from argument,which is good for using projects as a base project from which you can develop. However, this approach is becoming deprecated and the current approach is to use – – template instead. The default Cordova application is pretty, but it has a piece of code and graphics that you otherwise have to rip out every time that you start a new project. (I’d encourage you to develop your own template project – to start from.) I am going to try the following command:

cordova create jon com.CompanyName.chapter3 Chapter3 – – template searchapp

Next step is I took at peek at what platforms were available to me, by typing:

cordova platforms

It showed that android ~7.0.0, browser ~5.0.1, ios 4.5.4, windows ~5.0.0 and www ^3.12.0 were all available with my install of Cordova (not the latest !).

Let’s add a platform, as that is easy:

cordova platform add android

All you have got to do to install the application on your Android device is to type (and wait a few minutes):

cordova run

Tip for the day

In the source code for Chapter 3, Raymond doesn’t structure his code using the traditional /www for the index.html and /js for Javascript. Instead, he dumps the two files at the top level. You’ll need to replace index.html in the /www directory and either move app.js also to the /www directory (or put it in the /js directory, but then remember to change the link in the code).

A companion to “Apache Cordova in Action” Part 1

This series of blog posts chart my experiences with Apache Cordova, partly to remind me what I did/thought at the time, and mostly as I hope they will be useful to you the reader.

“Apache Cordova in Action” by Raymond Camden is not the first Apache Cordova book that I have read or worked through, but it is the one that I intend to take really seriously and work through (as much as is required) from cover to cover. I have previously dipped in and out of other books. I am not paid by Raymond or Manning Publications, but I do think the book is great !

I am going to skip over Chapter 1 “What is Cordova ?”. If you’re new to it, I’d suggest that you don’t as it is a well written summary of the key things you need to know. Cordova creates a “hybrid” app, which is a mini-browser embedded within a native application wrapper. This app can work on a mobile device even without a network connection because the HTML, CSS and Javascript files are all wrapped up within the app*. (Up to this point, you can think of Cordova as a way to package up your web app and distribute it through the native app stores and even monetise your creation*, although if it doesn’t do enough you might have trouble getting through the validation steps, especially on iOS.) Cordova also provides connections to device features or native features such as Camera, GPS and your contacts. (You may need to use at least one of these native interfaces to pass through the Apple Store approvals process.)

* Pro tip: I am told if you are adept at these things, you can find the html and Javascript files in the file structure (on Android at least), so your code is not super secure. Bear this in mind if you are a business.

One of the cool things about Cordova, but don’t let it scare you off if you are not a command line aficionado, is the command line tool that is used to create projects and compile them to mobile platforms. It takes the source HTML, CSS and Javascript and converts them into the native binaries required for the platforms supported by Cordova just by typing some commands into the Command Line Prompt. Under the hood, quite a lot of complex thing go on and if you were to try to do them manually, you’d probably forget one or two steps and get into a pickle working out where you had gone wrong.

Recently, it has become rather a two-horse race between Apple and Android, but Cordova still (currently?)  supports other platforms such as Windows 10 and Electron.

Some of the Cordova commands that you can execute are quite simple to understand like:

cordova create

cordova platform add android

cordova plugin add cordova-plugin-geolocation

cordova prepare

cordova compile

cordova build

cordova emulate

cordova run

Tip for the day

Each blog post in the series, I’ll try and leave you with a tip for the day. With Cordova, as it is a CLI tool, you spend a lot of time navigating to the right folder so that Cordova can perform its magic. I have quite a complex folder structure under which my projects are embedded and I was beginning to regret it, until …

Open up Windows Explorer and navigate to the folder that you want. On the navigation bar, right click on the white space and select “copy address as text”.

Now for the clever bit …. when you navigate back to the Command Prompt and type CD space to “Change Directory”, you can now right-click and your folder structure will be pasted into the line where the cursor is.

That should save you plenty of typing of folder structures !

If you’ve got any tips for the day (on Apache Cordova) then please feel free to add them as comments below.