Widgets: An Introduction

Jyothish Johnson — Thu, 24 Apr 2025 07:09:34 +0000

There are times when you would want to show the apps contents/data in an helpful way upfront to the user, even when the user is not actively using your app. Widgets(iOS 14+) and Live Activities(iOS 16.1+) are the possible ways to do this.

For this article, lets start with adding a basic widget to our app.

First thing first, let's add the Widget Extension to the app.

File → New → Target → Widget Extension
Give a name to the extension → Finish

Now you will be able to see files related to a basic Widget added to your project. This template widget shows time. You should be able to see this in a struct that conforms to Widget protocol. This Widget implementation’s body needs a type of WidgetConfiguration.

There are mainly three types of WidgetConfiguration :

StaticConfiguration

Used in static widgets, the data cannot be customized by the user.
AppIntentConfiguration

User can configure the data populated inside this widget. Ex: Widget to track a events from a particular calendar account when user has multiple calendar accounts.
ActivityConfiguration

This is exclusively used for Live Activities.

To use multiple widget types in the app use WidgetBundle protocol.

Providing Timelines for the data

Both StaticConfiguration and AppIntentConfiguration, need a timeline provider. For this we need an implementation that conforms to TimelineProvider. There are few mandatory functions that we need to implement in order to conform to above protocol.

func placeholder(in: Self.Context) -> Self.Entry → Used to provide a placeHolder widget view, which might be used when the user sees the widget for the first time. Think of it as a generic view to give an idea to the user about your widget.
func getSnapshot(in: Self.Context, completion: (Self.Entry) -> Void) → This function can be used to get a quick info about the widget in temporary states. (ie: In Widget gallery - context.isPreview = true)
func getTimeline(in: Self.Context, completion: (Timeline<Self.Entry>) -> Void) → This is where we can provide the information to the app, regarding when to update the widget information. We can pass a series of future dates for this. We can also specify a policy regarding when the timeline should be refreshed.
TimelineEntry → The data that the widget shows needs to confirm to this protocol.

Conclusion

This was a basic introduction to adding the Widget capability to your app. Further we will explore more complex implementations.

JSON basics, encoding and decoding with Swift

Jyothish Johnson — Wed, 11 Oct 2023 09:47:11 +0000

This is a first part of a beginner series, where we understand basic of networking in Swift.

To simplify it greatly, JSON(Javascript Object Notation) is the way most clients and servers, share data with each other.

Here is a sample json, that fetches list of followers for a users profile:

{
  "userId": "123456",
  "userName": "John Doe",
  "followers": [
    {
      "followerId": "789012",
      "followerUsername": "follower1_username",
      "followerName": "Follower One"
    },
    {
      "followerId": "345678",
      "followerUsername": "follower2_username",
      "followerName": "Follower Two"
    },
    {
      "followerId": "901234",
      "followerUsername": "follower3_username",
      "followerName": "Follower Three"
    }
  ]
}

JSON Decoding

One of the most basic things you will do as part of networking in Swift, is displaying the data received from server into some UI. Lets take the above JSON as an example. To do this we have to decode the JSON response into a object in Swift that we can reason about.

Firstly we will create a struct in Swift that can be mapped to the json response.

//1
struct User: Decodable {
    //2
    let userId: String
    let userName: String
    let followers: [Follower]

    struct Follower: Decodable {
        let followerId: String
        let followerUsername: String
        let followerName: String
    }
}

Note: Here we are using exact same keys as in the json response. More about custom keys in a later article.

The struct we created is confirming to Decodable protocol, which is required for the json to be decoded to a Swift object.
If you notice, all the properties we used here have the same key with the json. This is important as the mapping happens between same keys(case-sensitive). Of-course we can customise the keys based on our needs, this will be covered in a later article.

Now lets write the code to decode this json.

//1
let json = """
{
  "userId": "123456",
  "userName": "John Doe",
  "followers": [
    {
      "followerId": "789012",
      "followerUsername": "follower1_username",
      "followerName": "Follower One"
    },
    {
      "followerId": "345678",
      "followerUsername": "follower2_username",
      "followerName": "Follower Two"
    },
    {
      "followerId": "901234",
      "followerUsername": "follower3_username",
      "followerName": "Follower Three"
    }
  ]
}
"""

//2
if let data = json.data(using: .utf8) {

    //3
    if let userObj = try? JSONDecoder().decode(User.self, from: data) {
        print(userObj)
    } else {
        print("Decoding failed")
    }
} else {
    print("Error getting json data")
}

We will use Swift's multiline string literals to store json into a property.
This line converts the json string into a Data object where the characters of the string are encoded using UTF-8.
This line uses the instance method of JSONDecoder to specify the type of the object(ie. User) that we want and passing the data for decoding.

Now we can see the User object being printed in Xcode console.

This can help you get started with displaying data received from your server.

JSON Encoding

Most of the times, we also have to send some or the other data back to the server. For example,

User searches something in your app
User authentication
Save user data to server

In the above cases, you will have to send some form of data as part of your httpBody. In these kind of scenarios we have to convert our Swift object to an encoded data. Lets look into how we can do that.

First things first, we have to update our User struct to be encodable. For this we have to conform to the Encodable protocol. But as we already have a conformance to Decodable, there is an easier way to do this: Codable

Codable is literally conbination of Encodable and Decodable protocols.

typealias Codable = Decodable & Encodable

Updated User struct

struct User: Codable {
    let userId: String
    let userName: String
    let followers: [Follower]

    struct Follower: Codable {
        let followerId: String
        let followerUsername: String
        let followerName: String
    }
}

Now lets see how to encode the User object.

func encode(user: User) {
    //1
    if let encodedData = try? JSONEncoder().encode(user) {
        //2
        if let jsonString = String(data: encodedData, encoding: .utf8) {
            print(jsonString)
        }
    }
}

We pass the User object to be encoded to JSONEncoder's encode function. If encoding is successful we will get encoded Data, which we use based on our needs (ie. Send to server via the api, or print the encoded String as we do here)
We pass the encoded data to String's initializer and print the json string which is returned. This json string is exactly same as the json that we created in the beginning.

Console response below 👇

Thats a wrap on basics of encoding and decoding json in Swift!

All the code available in Github gist

🗨️💡 Join the Conversation! Share Your Thoughts Below.

🗣️ Your opinion matters! Eager to hear your take on this topic. Don't hold back—let's dive into a lively discussion!

Enjoyed this Article?

💖 React: Click the heart icon to show your appreciation and help others discover this content too!

🔔 Follow for more Swift/iOS content! @jyo_johnson on X(Twitter)

🚀 Share: Spread the knowledge! Share this article with your network.

Your engagement is what keeps our community thriving. Thank you for being a part of it!