Get started using web API’s – Luas Forecasting API Part Three

After much struggles, see the previous entry for the history up til now, the responseText message was successfully parsed and the information populated on the page:

Some of the pitfalls:

  • Response message was a string which wouldn’t yield to any XML extraction methods. That was sorted once parsed to XML. (Response methods for XML didn’t yield anything or issues further along made me dismiss it altogether.
  • It was impossible to extract any data, attempts yielded
    • XML Object Element.
    • HTML Object Element.
    • Null.
  • Xpath was used to get at the data but still no luck (some remnants can be seen as code or comments).
  • API was down for maintenance which didn’t allow much progress.

There were myriad of explanations and convoluted methods to get the data but the issue lay in that the information needed was in the attritbutes and not in the nodes. I’ll do a clearer, indepth write up of all the steps taken to create this but for now this shall be parked.

Some improvements I’m planning on however include:

  • Automatic updating of the page when the response refreshes.
  • Selecting stops by name and whether inbound or outbound.

Stay tuned for that and more!

Get started using web API’s – Luas Forecasting API Part Two

Continuing on from the last post – Get started using web API’s – Luas Forecasting API Part One , there was a slight issue I ran into. This was resolved after several commits where I’d tried to see if I could print out the response regardless of the response status. However those failed and can be seen in my commits [1] [2]

The issue was that I couldn’t get any response message back once the code was hosted on github pages – It worked perfectly on my machine (hey oh). It would just default to the else condition in the httpRequest’s onreadystatechange update – i.e. the assigned function alertContents() would return the message if the response wasn’t in a readyState of ‘DONE’ and status wasn’t 200.

else {
 alert('There was a problem with the request\n');
 alert(httpRequest.responseText); // added an alert to see what message 
                                  // being returned - there was none.

The responseText from the httpRequest didn’t contain any message to help troubleshoot. The problem was later pinned down to a mixed content issue – it’s one where the calling code requests a non secure request ‘http’ and the API would send back or expect a request call to be secure and hence return a secure response.

With that sorted, the next step still remains: Extract information from the xml response and update the webpage. For now here’s the page, click the button to get a raw response message in all its glory.

Get started using web API’s – Luas Forecasting API

My JavaScript excursions have taken a damper as of late. Without much digression, the next mini project I want to tackle is how to consume an api and present it on a page. I’ve been having a bit of internal conflict if I should conduct this on GitHub or codepen and came to the conclusion that i’ll do it on both – first attempt on GitHub and a cloned, improved version, on codepen.

For this tutorial, of sorts, will include the following:

  • Consume the public Luas API
  • Extract relevant information and display on a page

At this point it will only be for a specific location and inbound shuttles. At this stage the HTML & CSS have been setup, as well as the AJAX script to call the Luas Forecasting API.

The API only seemed to show tabular information and not much of explanation or examples are available, bar one on the data.gov.ie page for the aforementioned API. It seemed to be only displaying the current status, however, when it was retrieved, the response contained all the relevant information that is needed i.e. the stop name, inbound/outbound and luas arrival times.

Luas Forecasting API response message

Luas Forecasting API response message XML

The next step will be to parse the XML received and push the relevant info to the page. The code so far is available on GitHub. One issue is the GitHub page the AJAX call refuses to play nice. I’l have to look into that as well the next time around, stay tuned!

 

A brief intro to Node.js

This is a topic I’ve been meaning to approach for a while now. As it happens, one of my college courses – Web Applications – requires a project built using Node.js, so what better time to tackle this.

I had mentioned Node.js in a previous post, where I was talking about the various environments JavaScript can be run in. This post won’t go into the history or specifics of Node.js; the main exercise will examine the various items found in the sample code for creating a simple Node.js server – which will explore and detail node specific aspects as well as JavaScript patterns used. The code can be found on the About page on the Node.js site:

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Play by play

The very first line of code, allows us to import the module ‘http’.

const http = require('http');

This is the implementation method that is specified in CommonJS, which is an ecosystem for JavaScript outside the browser. This is a synchronous system which allows importing of modules or files; since everything will be on the server side. This allows us to import the module http.

The next two lines set the IP address of the localhost (the machine you are currently on) and the port to listen to for incoming requests.

const hostname = '127.0.0.1';
const port = 3000;

Immediately following that, the createServer() method is called on the http instance we created on the first line. Which is then assigned to a constant called server.

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

This is passed a call back function with two parameters and uses an arrow function (read more about it here [1] [2]). This createServer() method will be invoked by an incoming event, in this case web requests. The req parameter will contain all the incoming request’s details. The res parameter will handle the response which will be sent out. In this case it’s setting its statusCode to 200, which signifies that the request was handled successfully. After which the response’s header information is set to indicate it’s content which in this case is plain text. And finally some plain text output is shown while closing the response – this will be displayed in the browser.

The final section of the code the reference to the server, which points to the http.createServer() call, is set to listen on the port and host IP address set at above.

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

The arrow function will display the message indicated while the server is running in the node.js environment giving us a visual that things are working.

There you go, this was just a quick run down to help try and elucidate, both for me and anyone reading this, what is happening within this simple node.js server code. Stay tuned for more practical topics on the matter.