Lets Get Started
Social
KIJO - Twitter KIJO - Facebook KIJO - Instagram

4 Challenges I Overcame When Building a Web App

Mark Simmonds

Digital Marketing Executive

Author Image: Mark Simmonds
Share This:
Share on Facebook Share on Google Share on Linkedin

I was recently given the challenge of building a web app for a car parking company that allows customers to keep track of their booking. The app is designed to provide customers with the ability to see where their car is located at all times, what member of staff moved their car and the status of their car for when they arrive to collect it. There were several challenges with building this web app, each requiring different solutions, some of them you may have to overcome yourself. In this blog post I’ll be going over some of the key challenges we overcame in building the web app.

Challenge One: Retrieving the data

The app receives the customer’s car information from a secure SOAP service and then presents this in various ways to the customer. The first challenge we faced was connecting to a web service via a SOAP API and then dealing with the XML response. In order to contact the SOAP service we used jQuery.soap, a jQuery plugin that makes sending SOAP requests very easy. We decided that for this project due to how the XML was formulated and the ease of using JSON, that it would make sense to convert the XML returned into JSON. Fortunately, jQuery.soap comes with a built in toJSON function. Unfortunately, due to some issues on the SOAP service end, it did not work.

This left me with a bit of an issue, as a few hours were spent trying to deal with the XML without getting anywhere. Eventually, the issues were resolved and, after including this XML-to-JSON plugin as a dependency, I was ready to get under way dealing with some nicely formatted JSON data.

Callenge Two: Displaying the data

Once I had access to the JSON data, I needed to display it. Now, taking a load of JSON and dumping it onto a page is easy, but in this case the requirements were a bit more complicated than that. Each object needed its own row, some bits of the data weren’t needed at all, and certain strings needed to be replaced with a different string for displaying to the user. This meant quite a few if statements and for loops for displaying the general data, along with some extra work for dealing with GPS data:

Array.prototype.reorder = function(from, to) {

this.splice(to, 0, this.splice(from, 1)[0]);

};

for (var j = 0; j < keys.length; j++) {

var from = keysLen + j;

entries.reorder(from, j * 2);

}

for (var k = 0; k < entriesLen; k++) {

var l = k + 1,

from = k + l,

to = k + k;

entries.reorder(from, to);

}

for (var l = 0; l < entriesLen; l++) {

if (l % 2 == 0) {

comments += entries[l] + ': ';

} else {

comments += entries[l] + '. <br>';

}

}

var GPSArrLen = GPSArr.length - 1,

lastGPS = GPSArr[GPSArrLen],

lat = lastGPS.substr(0, lastGPS.indexOf(',')),

long = lastGPS.substr(lastGPS.indexOf(",") + 1);

latLong = {

"lat": lat,

"long": long

};

initialiseMap(latLong.lat, latLong.long);

Some examples of some of the code needed for displaying the data

Whilst I’ve used plenty of if statements and for loops in this example, there is scope for condensing this down. However it as an example of how you can quickly use loops to obtain the data and organise it to your requirements.

Challenge Three: Contextual Information

A key feature of the app is that it will allow customers to add extras to their booking once they’re logged in. The payment processor of choice was Stripe, however, i ran into a couple of issues that made it a little bit more complicated than normal. First of all, different parking operators have different prices for the same extra, so I had to come up with a way to determine which location the user wants the extra at and then let Stripe know the correct price. I did this using data-* attributes and a bit of JavaScript.

<button type="button" data-popup=".stripe-popup" data-BHX="£30.00" data-LTN="£25.00">Buy Now</button>

$('#airport-select').change(function(){

var airport = $('#airport-select').val(),

data = $(airportThis).data();

for (var i in data) {

if (i == airport) {

airportPrice = data[i];

}

}

$('#total-cost').html(airportPrice)

});

Data attributes allow you to add extra contextual information to previously rigid HTML elements. Coupled with javascript they can become a powerful tool when developing applications.

Let us know your challenges when building a web app or get in touch today to discuss how KIJO can help you with your next project.

 

Share This:
Share on Facebook Share on Google Share on Linkedin