top of page

Making an iOS Newsletter App with Updating Content using JSON and Swift 4

  • Writer: Max Clark
    Max Clark
  • Jul 25, 2018
  • 3 min read

If you want to update the available content of your app, take for example a newsletter app, iOS updates are clearly not the way to go, for obvious reasons. Instead, the content can be uploaded to a server and JSON file put in place to guide the app to new content. JSON is a coding language and a file extension (.json). You will need: your newsletter content posted online (PDF) with a direct link, a JSON file containing the URLs to your newsletters, code in your app to parse the JSON data and download/format the PDF. You may store the PDFs and JSON file on any server but infact, you can store and operate them entirely using Microsoft's OneDrive. It can also be done with Google Drive but I would recommend OneDrive because they have an in-built text editor which you can use to edit JSON files. See the end of the blog to read about using OneDrive.

In my version of the app, for each newsletter issue, the JSON file contains four pieces of information:

Rank - the newsletters appear in a table and the rank determines the order they appear in.

Info - this is the title of the issue which will apear in the table. It is the only text specific for that issue that the user will see before downloading.

URL - this is the direct link to the PDF. It has to be a download link or a streaming link.

ID - this is a unique number for the issue. It's value has no inherent meaning but must not be the same as any other issue and must not change. This is used so that any of the other pieces of info can be freely changed or overlap with other issues.

Below is an example of a JSON file. The preceding screenshot shows the corresponding table UI for this particular JSON.

How does the app read this information? You must create a structure for your JSON to fit into. The first struct represents the overarching array (called "issues") in the JSON file. The struct shows there is an array called "issues". The array stores the value type "Doc", which is our next struct. It shows the four pieces of information and their corresponding value types. They must be "Decodable" else cannot be parsed.

Next, we have a function to download the JSON file and parse it into the data structures we made.Inset your URL into line 5. Line 21 is important. It takes the downloaded file "data" and assigns it to the variable "store" which is of type "Docs", our struct.

You can call the function like this:

The next steps are to create a UITable to utilise all of the information. When the user wants to download a specific newsletter, run the following code, making sure to insert the URL in line 1.

Then we can use three useful functions to enable us to save the PDF, and see the progress of the download. The save directory is defined on line 37. I use the issue's ID since it is unique for each issue. "dataSize" is the total amount of data to be downloaded and "count" is the current amount of data downloaded so far. The percentage can be determined from these two values.

You would then display the PDF using Apple's WebKit. Create a webView and display it like this:

You can use OneDrive to store all the PDFs and JSON file. Right click on the document you want and press embed. You will then be given some HTML code within which is a URL which looks like "https://onedrive.live.com/embed?cid=623673E57ED05EB8&resid=623673E57FP05EB8%21736&authkey=APSQIQP5qiorukI" Change 'embed' to 'download' and you now have a download link. Check it works by pasting it into your broswer and seeing if it downloads. You can put the PDF URLs in the JSON file and the JSON file link in the app.

That is fundamentally how you would use JSON to make a newsletter app. Let me know in the comments if any points need elaborating.

Comments


Read more:

    "Let's go invent tomorrow instead of worrying about what happened yesterday" 

                                                                                                       Steve Jobs

    computer_engineering_science_tech_3072x2048
    Computer Screens
    Modern Digital Watch
    Computer Circuit Board Macro
    Globalization concept
    Online Monitoring
    black_keyboard_lights_macbook_hi_tech_hd_wallpaper-wide

    © 2020 Tech Kingdom

    Contact Us : official.techkingdom@gmail.com

    bottom of page