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": "http://lorempixel.com/output/city-q-c-300-300-1.jpg"
    }

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.


REFERENCES:

https://www.json.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s