Programming: Working With JSON

Today, I explored the possibility of retrieving the data from a server. This was experimented briefly before, but as the final idea developed, it seemed less relevant.

However, I had the idea that rather than filling the app’s code with all of the text for the details page, it could be fetched from a server instead. To do this I used a Swift extension called SwiftyJSON. This significantly simplifies the process of fetching data from the server, making the code work better and much easier to read, write and understand.

To start with, I created an array of strings to store all the detail text fetched from the server. The array is made outside of the function used to fetch the data so that it can be used globally, rather than only inside the function. The function, loadDetailText(), is what we call to do the JSON request. The function gets the .json file from a server (in this case my web server as a test) and then reads the data it collects. I used a loop to iterate through the JSON array, and used each iteration to fill a space in the local detailArray.

Screen Shot 2015-05-03 at 18.15.17

Below is an image of how the JSON file looks. It is set up as an array of detailText with each detailText having a string. These strings populate the detailArray allowing us to access them individually when needed to place the text in the app.
Screen Shot 2015-05-03 at 18.15.42

At the moment, we are unsure which approach would be best for the application, either embedding the text into the app, or fetching it from a server. Embedding into the code currently seems to be the best idea, as it means an internet connection isn’t required to use the application. However this experiment with JSON is still valuable as a fallback if ever needed.

Swift: Using JSON

In one of the workshops, we were shown how to use JSON to get information from a server and download it to use it in an app. JSON was used to fetch a name, rating and image from a server to be placed on pins on a map based application.

JSON is an acronym for JavaScript Object Notation and is a language used for exchanging data on the web. It originates from JavaScript and is represented by two main data structures; arrays (ordered lists) and objects (names with values).  One of the big appeals of JSON is that its notation is easy to read as a human which makes it really quick and simple to write, perfect for beginners.

In one of the first workshops we learned how to make a basic ‘fact’ app which would show a fact (as text) on screen and you could swipe left or right to go forward or back a fact. The facts for this were stored in an array and were therefore coded into the app. One of the biggest limitations of this is that it isn’t very easy to update. If the app was on the AppStore, it would mean submitting a new version for review and getting it approved by Apple before it could be downloaded by a user. This makes it a lengthy process and its not exactly ideal. However, one benefit of this is that all the facts would be instantly accessible, all the time, regardless of internet connection so it would be great for use in a location with poor service. Storing all the data in the app also increases the app download size which might not be the best idea of a lot of images/videos are involved for example as they can take up quite a lot of storage room on the device which would likely deter people from downloading the app.

To get to grips with using JSON and get a basic prototype started for the Magna Facts idea (if we go down that route), I wrote some JSON, hosted it on my web server and implemented it into the facts app mentioned above.

The first step was writing the JSON  which can be seen here. Alternatively, if you can’t be bothered to click on the link here’s what a snippet of it looks like:

        "fact": "This is fact 1",
        "image": ""

The JSON looks like a list of these curly-braced blocks, separated by commas. Each line in the block has a name (i.e “fact”), and a piece of data (i.e “This is fact 1” which is a string). There are other data types one can use just like in ordinary programming such as numbers, booleans, arrays and nulls. The individual blocks are part of an array which is what my facts will be stored in. Each fact contains two pieces of information; the fact itself, and an image to accompany it.

The first step was to create a FactLabel class and a FactService class. The original app had all the facts as just strings in an array, however we needed to turn them into objects (FactLabels) in order to get the data from the JSON array. The class has two data handlers, one for the fact itself, and one for an image to accompany the fact; both are stored as strings. The FactService class is used to get the information from the server and handle it so it can be used in swift. It sends an asynchronous request to the URL to get the data as soon as it can so it loads as fast as possible. the JSON is then serialised so the code can be used within swift. An array of type FactLabel is then created to store the JSON data as the objects needed and the data is downloaded and handled to be stored in the correct format and under the correct name for the object. In this case its ‘fact’ and ‘image’ both as Strings.

We then initialise the FactService in the viewDidLoad method so that it happens as soon as the app has loaded. At this point we need to let the viewController (which controls what we see) know that the data has been loaded. For this, a delegate is made as a protocol which just calls a single function which lets the app know it has finished loading. We then have to change the data from the old array to the new one. When the facts are loaded, a slight fade animation is used to make it nicer to look at. This is the kind of thing we’ll be focusing on so in the future we’re going to need to get a firm grip on Swift animations.

Here is an example of what it does (hosted on gyfcat due to the file size) 

The design of it is very simple as currently we’re focusing on functionality over design. If you didn’t watch the little video of it in action, there are swipe functions to make the fact go forward or backward, and also buttons which run the same function. I made it so the fact text fades in, then 0.25 seconds after the image fades in. This subtle delay makes it a nicer experience to use.