Building a Dad Jokes App 🔨

"The joy of creating something is what makes life worth living."

- Bob Ross

Marhaba 👋🏼

In this post, we will explore how to build a Dad Jokes iOS app that generates unlimited dad jokes. Whether you find dad jokes funny or torturously dry, this will be an enjoyable read. The goal is to create a simple Dad Jokes app with the following features:

• Displaying a random dad joke as soon as the app is launched

• Generating a new dad joke by touching the screen

Yalla, let’s begin. 

Note: I’m assuming that you possess some knowledge of Swift and Xcode, so I won’t dive into fundamentals.

Table of Contents

1. Dad Jokes API

2. Setting up Model

3. Setting up Client API

4. Setting up UI

5. Putting it All Together

1. Dad Jokes API

Where there’s an app, there’s always an API. To generate dad jokes, I’ll be using the free Dad Jokes API. Before setting up the app, we’ll need to know the API URL and its expected response. Let’s take a look:

$ curl -H "Accept: application/json" https://icanhazdadjoke.com/

{

"id": "R7UfaahVfFd",

"joke": "My dog used to chase people on a bike a lot. It got so bad I had to take his bike away.",

"status": 200

}

Analyzing the spec above, the Dad Jokes API has the following components:

• Request URL - https://icanhazdadjoke.com/

• Header - Accept: application/json

• Response - The response body has a key joke which contains a random dad joke

Now that we’ve understood how this API works, I’ll shift over to Xcode by creating a new Project using SwiftUI.

2. Setting up Model

I’ll create a model called Joke that adheres to Swift’s Codable, which allows us to seamlessly map API response data to a Swift model. Referencing the API spec, we only need the joke key as it holds the joke that we can showcase through the UI.

Hence, our Joke model is simply the following:

3. Setting Up Client API

To get started with building our Client API, I’ll create a singleton named JokeAPI that performs the following tasks:

1. Sets up a URLRequest during initialization.

2. Retrieves a new dad joke by executing a network call.

3. Maps the response to our Joke model.

Let’s start with step 1 to start constructing our JokeAPI:

For the next step, a function called getDadJoke() will be created in JokeAPI to manage steps 2 and 3 with proper error handling:

Sweet. Now that our API is set up, it’s time to create our UI to display jokes!

4. Setting up UI

Now the real fun begins. I’ll create a SwiftUI view called JokeView that will have the following features: 

• Initially, it will fetch a joke from the JokeAPI and display it. 

• Furthermore, if the user interacts with any part of the screen, a new joke will be fetched and shown.

Now that our features are clear, I’ll create a skeleton view without connecting our JokeAPI yet:

Alrighty, now I’ll create a private function within DadJokeView that will: 

1. Fetch a dad joke asynchronously using JokeAPI

2. Assuming there is no error, update the UI to display a new dad joke by updating our state variable joke

Almost there! Now it’s time to put our function generateJoke() to use:

5. Putting it All Together

Now it’s time to enjoy endless dad jokes 👏🏼🎉

It’s crucial to bear in mind that with great power comes great responsibility. Your responsibility, in this case, is to share these dad jokes with your family and friends. Keep in mind that people’s reactions may vary, from bursts of laughter to eye-rolling. I cannot be held accountable for any such reactions.

Last but not least, here’s the full GitHub repo for Dad Jokes.

For any comments and questions on this post, follow up on Twitter.

Make sure to share this article. Appreciate you reading through my blog and until next time.