Comic Viewer App

Project Overview

This project was a lab that was assigned in my iOS app development class. The task was to build an app that uses an API, with the following requirements:

Pick any API from a list of public APIs
Build an app that fetches data and display the data with a UI
Allow the user to send a request to fetch new data
Have at least one changeable image that is based on the fetched API result

Screenshot of the comic viewer app on an iPhone 14 Pro simulator, showing xkcd comic #2662, “Physics Safety Tip,” with Prev, Random, Next and Search buttons below it. Comic: xkcd #2662, “Physics Safety Tip” by Randall Munroe, licensed CC BY-NC 2.5.

Development Process

Implementation

I started this project by browsing the API list and found that the xkcd API would be a good fit for the project requirements. I began the project by designing a simple user interface and then created an API model that would allow me to read the JSON API data into my app. I added actions to all of my UI elements, implemented the logic needed to handle the API fetches, and added an additional confetti package for an added challenge. I completed the project by thoroughly testing all features on a virtual device.

Screenshot of Xcode with the app’s SwiftUI code in ContentView.swift on the left and the iPhone 14 Pro simulator on the right, running the app and showing xkcd comic #2663, “Tetherball Configurations.” Comic: xkcd #2663, “Tetherball Configurations” by Randall Munroe, licensed CC BY-NC 2.5.

Challenges

When fetching new API data, I ran into an issue where the state would refresh before receiving the new data, so the UI wouldn’t update. I fixed this by including a one second sleep to give time for the API fetch. For future projects, I’d like to find a better way to fix this, possibly with some sort of wait() system call.
Another issue that I faced was taking the image URL that was fetched from the API and displaying it in the app. I used Swift’s AsyncImage structure and it worked well, but only works for iOS 15.0 and above. In the future, I’d like to add support for previous versions by implementing a package such as Kingfisher.

Conclusion

Overall, this project taught me the basics of fetching API data and displaying it to the user. I also learned how to add packages to an app. For future projects, I’d like to experiment with responsive layouts and learn how to add accessibility features to an application.