Author at Infinum

How We Got Everyone on Board with a New Technology

Lucija Balja — Mon, 22 Apr 2024 11:17:44 +0000

Implementing new technology in an organization can be challenging, especially in a tech-driven environment. Here’s how we successfully organized a workshop for 45 team members and got everyone on board with SwiftUI.

The journey of introducing a new technology to a large team, such as ours, with approximately 45 members, is no small feat. Resistance to change is a common human inclination, especially when dealing with a group with diverse opinions and experiences.

However, we sometimes need to introduce a new technology to improve processes and collective efficiency. The stakes are high; mishandling this transition can lead to disrupted workflows, decreased productivity, and uncertainty among employees.

This scenario is not uncommon and can arise in various professional landscapes, but especially in tech-driven environments. In this article, we’ll present a strategic approach to employee training that effectively addresses these challenges using the example of the SwiftUI workshop organized for our iOS team.

The beauty of our strategy lies in its versatility—it’s applicable not just to specific technologies or teams but to any scenario where we introduce innovation to diverse groups.

Finding the time

The technology implementation process can be a considerable effort, especially if the employees are booked full-time on project work. Some people don’t have enough time to learn a new technology, while others may just be comfortable and content working with the old one. Whatever the reason, they may not have any inclination to learn something new.

Time constraints and varying levels of knowledge pose significant challenges for the implementation of technology. That’s why we have decided to organize a workshop for everyone.

With the help of our planning department, we successfully allocated a sufficient number of hours for workshop preparation, lectures, and homework assignments. We effectively broke this down into manageable chunks of a few hours per week, ensuring it didn’t disrupt our team members’ daily workflow. As a result, we completed the entire initiative within six months.

Preparation phase – pave the way for success

The planning process played a key role in the workshop’s later success. In an initial meeting, which included team leads, tech leads, senior engineers, and lecturers, we crafted an agenda for each of the six lectures. The workload was distributed among three lecturers with previous experience with the new technology.

We planned agendas for five of the six lectures, leaving the sixth open-ended to cover any missed content or spillovers.

Live coding became our preferred presentation method, setting our workshop apart from generic online tutorials.

We prepared the presentations, code samples, design, and homework assignments in the following months.

It’s important to emphasize the importance of weekly syncs in these scenarios. During these sessions, presenters showcase their weekly progress, which encourages them to work consistently and make steady progress. This practice is the key reason we didn’t have a rush of work in the final minutes before the workshop execution.

Tip no. 1:

Set the agenda and distribute work early in the process. This way, lecturers can work on the content at their own pace and have enough time to prepare everything.

Our strategy involved homework assignments for the first three lectures, focusing on foundational aspects of the newly introduced technology.

In the following three lectures, instead of traditional homework, participants were tasked with integrating the new technology into their actual ongoing projects. Throughout the process, they had full, active support from the lecturers. This principle of learning by doing not only promotes a deeper comprehension of the technology but also empowers participants to directly apply their knowledge in real-world scenarios.

The complexity of the homework increased progressively from lecture to lecture, with the first being the easiest and the last the most challenging.

Some additional rules we decided on:

Each lecture was recorded.
Lecture attendance and homework were mandatory.
At the beginning of each lecture, we briefly discussed the homework from the previous lecture.

Tip no. 2:

Do a test run and present the subject to someone unfamiliar with it. This ensures that attendees with varying levels of previous knowledge can clearly understand your statements, allows for content adjustments, and provides perspective on any overlooked aspects—a crucial step when you’re experienced in the subject matter.

A pre-workshop survey can reveal valuable information

To fine-tune our technology implementation plan, we sent out a pre-workshop survey. The information we got on participants’ familiarity, experience, interest, and expectations was invaluable.

Tip no. 3:

A pre-workshop survey is your compass, helping you navigate different knowledge levels within the team. Send a survey even before you’ve started preparing the lectures. You will have a better idea of what to include in the workshop and the level of detail needed.

Some questions you may ask:

How would you rate your knowledge of [enter technology name]?
How interested are you in learning [enter technology name]?
How much experience on real projects do you have with [enter technology name]?
What are your expectations or goals for this workshop?

Our survey results revealed a range of familiarity, with an average SwiftUI knowledge grade of 4.6/10. This grade showed that most people aren’t that familiar with the new technology and that we should tailor the lectures accordingly. Still, we tried to accommodate both novices and those with some experience by adding behind-the-scenes details and advanced insights after covering the basics.

Preparation stage completed. Get the cameras rolling.

Execution time – holding the workshop

The workshop kicked off with enthusiasm and active employee engagement. Half the team gathered in the conference room, while the other half joined remotely. After setting up, we started with the essentials—the crucial first part. The lecture included presentations, code samples, and a Q&A session. Everyone participated actively; questions flowed, and the atmosphere was positive.

However, not everything went as smoothly as expected.

Post-lecture feedback revealed that remote participants had trouble hearing us, particularly when there were questions from the room—a key interactive segment.

This employee feedback proved invaluable. Before the following lecture, we dedicated time to finding the right room and equipment, ensuring communication can run smoothly.

Tip no. 4:

Checking and preparing the right equipment and tools beforehand is as crucial as content preparation.

After the lecture, we assigned a 30-minute homework to be solved and submitted before the next session (a week later). Many participants submitted their homework in the same week, signaling positive engagement. Each person received detailed feedback on their homework, covering SwiftUI’s behind-the-scenes aspects, best practices, tips, tricks, and tools for improvement.

Participants greatly appreciated the advice, as nearly everyone applied the feedback in their following assignments.

Tip no. 5:

Providing comprehensive and positive feedback on homework plays a central role in boosting attendees’ morale and ensuring employee buy-in.

We encountered a slight hiccup with the first homework—time management. Due to varying knowledge levels, some completed it in 20 minutes, while others required two hours. Planning, scheduling, and adapting to diverse participant needs are crucial aspects.

Tip no. 6:

When planning the time for homework assignments, consider optimal and challenging scenarios. Efficiently redistribute time, keeping in mind potential variations in participants’ pace.

Our time distribution strategy worked well, especially since we didn’t assign homework for lectures 4, 5, and 6. This allowed participants to invest more time in initial assignments and have more free time on their hands later on.

All five lectures flew by, filled with fun and valuable learning experiences. Before the sixth lecture, we sent out a form to gather input on what attendees wanted from the final session—revisions, deeper dives into specific topics, or insights into SwiftUI usage in existing projects.

The responses indicated a desire to explore SwiftUI’s application in our existing projects, focusing on data binding and integration into UIKit codebases. With a week to prepare, we opted to showcase our codebases during the final lecture.

And with that, we concluded our SwiftUI workshop.

The aftermath – workshop objectives achieved

The enthusiasm stayed in the air post-lectures. Heated discussions about technology choices highlighted the newfound interest within the team.

The post-workshop survey results spoke volumes. Attendees rated their knowledge an average of 6.3, a 37% increase. The satisfaction rate with workshop content was graded as 4.78/5, meaning we mostly satisfied both experienced and less experienced folks. The live hands-on approach stood out as the favorite aspect of the workshop, playing a significant role in the team’s overall skill development.

Tip no. 7:

Engage your audience with a hands-on approach and live coding for effective knowledge transfer. Rather than just talking about it, demonstrating how to do something is key.

With 85% of projects currently using SwiftUI and almost all new features on these projects being implemented using SwiftUI, our workshop achieved its objectives. The time spent on careful planning, lectures, and homework reviews was well worth the transformative results.

Implementing a new technology in an organization doesn’t have to be hard

Our journey demonstrates that a well-organized, adaptable, and engaging workshop can bridge the gap between old and new technologies within a team. Embrace change, empower your team, and witness the transformation.

The post How We Got Everyone on Board with a New Technology appeared first on Infinum.

Using ChatGPT to Learn SwiftUI – Does It Work?

Lucija Balja — Tue, 17 Jan 2023 11:34:38 +0000

Since its launch in November 2022, OpenAI’s text generator ChatGPT has drawn a lot of attention with its highly competent, conversational answers to a wide array of questions on various topics. Built on top of OpenAI’s GPT-3 family of large language models, it can understand natural language and generate written content based on user prompts.

ChatGPT’s capabilities have themselves prompted an exploration of potential use cases in different domains – from school tasks to content marketing. As an iOS engineer, I got the idea to try out ChatGPT in combination with another reasonably new technology, SwiftUI.

In this article, we’ll evaluate the accuracy of ChatGPT’s answers and assess whether the tool can help enhance the SwiftUI learning experience. Let’s catch a glimpse into the future of learning, coding, and building new things.

As the pressure to implement AI grows, many businesses don’t know where to start. Our 14-day sprint helps you cut through the noise, turning early ideas into validated prototypes with clear logic, smart design, and real momentum. Learn how it works.

Using ChatGPT to understand code in SwiftUI

Starting with the basics, let’s check what ChatGPT can do for somebody new to SwiftUI. Like any confused developer coming to a new technology, I prompted it with a very natural and simple sentence:

I am building an app in SwiftUI and don’t know where to start.

The chatbot’s response was:

It’s great that you’re building an app in SwiftUI! Here are some steps you can take to get started:

Familiarize yourself with the basics of SwiftUI. You can do this by reading through Apple’s documentation, or by working through a tutorial.

Think about what your app will do and what it will look like. You can start by sketching out your app’s user interface and defining its functionality.

Set up a new Xcode project and begin building your app. You can use the “Single View App” template as a starting point and build from there.

As you build your app, you can use the SwiftUI preview feature to see how your code changes will look in real-time.

I hope this helps you get started with your SwiftUI app! Let me know if you have any other questions.

This is a pretty good start, both for my conversation with ChatGPT and for anyone actually onboarding to SwiftUI. This response is 10/10, I couldn’t have written it better myself.

Let’s move on to another common situation a non-experienced developer may encounter early on. When learning a new technology, you’ll often stumble upon a piece of code that you don’t understand or need some guidance with.

I asked the chatbot a simple question:

What does this code do?

struct Movie: Identifiable {
    let id: UUID
    let title: String
    let releaseYear: Int
    let posterImage: Image
}

struct MovieList: View {
  let movies: [Movie]

  var body: some View {
      List {
        ForEach(movies, id: \.id) { movie in
          HStack {
            movie.posterImage
              .resizable()
              .frame(width: 50, height: 50)
            Text(movie.title)
            Spacer()
            Text("\(movie.releaseYear)")
          }
        }
      }
    }
}

This was the answer:

This code defines two `struct`s in SwiftUI: `Movie` and `MovieList`.

The `Movie` struct represents a movie with an `id` of type `UUID`, a `title` of type `String`, a `releaseYear` of type `Int`, and a `posterImage` of type `Image`.

The `MovieList` struct represents a view that displays a list of movies. It has a single property `movies` of type `[Movie]`, which is an array of `Movie` structs. The `MovieList` struct conforms to the `View` protocol, which means it can be used to build a user interface in SwiftUI. The `body` property of the `MovieList` struct is a computed property of type `some View`. It returns a `List` view that displays a list of movies. The `List` view is populated using a `ForEach` loop, which iterates over the `movies` array and creates a row for each movie. Each row consists of an `HStack` view that contains the movies’s poster image, title, and release year. The poster image is made resizable and given a fixed size using the `resizable()` and `frame(width:height)` modifiers. The title and release year are displayed as text using the `Text` view. The `Spacer` view is used to push the release year to the right side of the row.

This is a pretty detailed explanation that demonstrates knowledge of key SwiftUI concepts and components, like HStack and Spacer, but also the View protocol. The result can be rated as completely accurate. Another 10/10.

However, wanting to get into more detail, I asked it:

Why does the Movie model need to conform to Identifiable protocol?

Here is how ChatGPT replied:

The `ForEach` view in SwiftUI requires that the items in its collection conform to the `Identifiable` protocol. The `Identifiable` protocol has a single requirement: that the conforming type has an `id` property of type `Hashable`.

In this case, the `Movie` struct conforms to the `Identifiable` protocol by having an `id` property of type `UUID`. This allows the `ForEach` loop to create a unique identifier for each movie in the list and use it to identify each movie as it is rendered in the list.

The `ForEach`view uses the `id` property of each movie to create a unique identifier that it can use to track the movie as it is rendered in the list. This is necessary because the `ForEach`view reuses rows in the list as the user scrolls. By using the `id` property to identify each movie, the `Foreach`view can ensure that the correct movie is displayed in each row as it is reused.

The answer looks pretty straightforward. However, it’s not completely correct. ForEach doesn’t have any mechanisms for reusing cells and does no such thing. On the other hand, List does, so maybe this caused ChatGPT’s confusion and resulted in a somewhat incorrect answer. ForEach is a simple component that loads all the views at once but requires identifiable models because of UI updates, not because rows are reused as the user scrolls.

I would advise caution here because while answers may look plausible, they will not necessarily always be correct. So it’s best always to double-check and ask many follow-up questions to get the right answer.

Using ChatGPT to improve code in SwiftUI

Now that we have the basics down, let’s take it a step further and see if ChatGPT can help me improve my code and explain what I did wrong.

I asked another simple question and provided a chunk of code.

Can you improve this code?

List {
    ForEach(movies) { movie in
        HStack {
            movie.posterImage
                .resizable()
                .frame(width: 50, height: 50)
            Text(movie.title)
            Spacer()
            Text("\(movie.releaseYear)")
        }
}
struct MovieList: View {
    var body: some View {
        List {
            ForEach(movies) { movie in
                HStack {
                    movie.posterImage
                        .resizable()
                        .frame(width: 50, height: 50)
                    Text(movie.title)
                    Spacer()
                    Text("\(movie.releaseYear)")
                }
          }
        }
    }
}

This is what ChatGPT had to say in response:

Here are a few suggestions for improving the code:

You can make the code easier to read by adding some vertical whitespace between the `List` view and the `ForEach` loop. This will help to visually separate the list from the rest of the view.

You can make the code more efficient by using the `id` parameter of the `ForEach` loop to specify a unique identifier for each movie. This will allow the `ForEach` loop to track each movie efficiently as it is rendered in the list.

You can make the code more flexible by using a `MovieRow` view to display each movie in the list. This will allow you to reuse the movie row code n other views, and will make it easier to modify the appearance of the movie rows.

This was the refactored code provided by ChatGPT:

struct MovieRow: View {
    let movie: Movie

    var body: some View {
        HStack {
            movie.posterImage
                .resizable()
                .frame(width: 50, height: 50)
            Text(movie.title)
            Spacer()
            Text("\(movie.releaseYear)")
        }
    }
}

struct MovieList: View {
    let movies: [Movie]

    var body: some View {
        List {
            ForEach(movies, id: \.id) { movie in
                MovieRow(movie: movie)
            }
        }
    }
}

Let’s analyze the proposed solution. The first bullet is mostly useless as there is no point in adding an extra line between the List and ForEach components. I would advise against this suggestion. The ChatGPT’s proposition is probably based on general programming language style guides that are not really relevant in SwiftUI.

The second bullet doesn’t have any performance gain as opposed to just conforming the model to Identifiable. The last bullet is the best one; it suggests a pretty good separation of view, just like Apple advises.

Some bullets were not really useful or wholly related to this technology, but I can understand why they came up. ChatGPT focused on some general rules for making your code more readable and cleaner. The last bullet was absolutely in line with SwiftUI and provided an excellent explanation.

Moving on to a different issue, it’s important to keep in mind how SwiftUI significantly changes how we write and think about UI. The constraints of UIKit, as well as its tedious setup, are gone. Many newbies have a hard time adapting to this and need some help in the process. Let’s see how ChatGPT understands SwiftUI in its core, its APIs, and whether it can help me transition faster.

I wondered how ChatGPT handles width and height tasks, something very tricky in the SwiftUI framework, which is declarative by nature.

My prompt was:

How to make Image resize to a width of the screen subtracted by 20 points and have the same height?

This is what ChatGPT suggested:

To make the image resize to a width of the screen subtracted by 20 points and have the same height, you can use the `GeometryReader` view to get the width of the screen and the `aspectRatio` modifier to preserve the aspect ratio of the image.

In this example, the `GeometryReader` view reads the width of the screen and passes it to the `frame(width:)` modifier as the `geometry.size.width` value. The `aspectRatio(contentMode:)` modifier is used to preserve the aspect ratio of a view. The contentMode parameter determines how the view’s aspect ratio should be calculated. For example, a `Text (“Hello, world!”)` with an aspectRatio of 2:1 and contentMode `.fit` have the width twice the height and the text will be scaled to fit the parent view.

Here’s an example of how you could modify the `MovieRow` struct to achieve this:

struct MovieRow: View {
    var movie: Movie

    var body: some View {
        GeometryReader { geometry in
            HStack {
                self.movie.posterImage
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: geometry.size.width - 20)
                Text(self.movie.title)
                Spacer()
                Text("\(self.movie.releaseYear)")
            }
        }
    }
}

This answer is just right and something I wish I had had when I was learning about it. The example works like a charm.

Now, let’s see if it can help with transitioning from UIKit to SwiftUI.

I provided a UIKit view and asked ChatGPT to convert it to SwiftUI. I honestly didn’t expect anything.

This is what I provided:

class WarningView: UIView {

    func setText(_ text: String) {
        label.text = text
    }

    lazy var warningImage: UIImageView = {
        let imageView = UIImageView(image: UIImage.icWarning)
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFit
        return imageView
    }()

    lazy var label: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0
        label.textColor = UIColor.black
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = UIFont.system(with: 13, fontWeight: .medium)
        return label
    }()

    lazy var stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.spacing = 16
        stackView.axis = .horizontal
        stackView.alignment = .top
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.addArrangedSubview(warningImage)
        stackView.addArrangedSubview(label)
        return stackView
    }()

    override func didMoveToSuperview() {
        super.didMoveToSuperview()

        addSubview(stackView)
        self.backgroundColor = .white

        NSLayoutConstraint.activate([
            warningImage.widthAnchor.constraint(equalToConstant: 24),
            stackView.topAnchor.constraint(equalTo: topAnchor, constant: 16),
            stackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -16),
            stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
            stackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16)
        ])
    }

}

And this is what I got in return:

struct WarningView: View {
    var text: String

    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: "exclamationmark.triangle")
                .resizable()
                .frame(width: 24, height: 24)
                .aspectRatio(contentMode: .fit)
            Text(text)
                .font(.system(size: 13, weight: .medium))
                .foregroundColor(.black)
                .lineLimit(0)
        }
        .padding(16)
        .background(Color.white)
    }
}

This is mindblowing on so many levels. ChatGPT understands UIKit APIs and how the methods translate into UI. It correctly translates UIKit constraints into SwiftUI declaratively defined views with added frames, paddings, and spacings. This can be a great starting point for anyone transitioning from UIKit to the SwiftUI world.

Fixing bugs and problems

Here comes the fun part. Let’s play with our favorites – bugs and pain points, and see if ChatGPT can address them correctly and help us out.

To start with, I chose one common mistake many rookies make in SwiftUI. They apply a frame modifier to an Image view, but it just won’t resize to the given frame.

When starting out with SwiftUI, I always struggled with this part, so I wanted to see how long the chatbot would take to solve it.

I asked:

Why won’t my image be resized to 50×50 with this code?

HStack {
    movie.posterImage
        .frame(width: 50, height: 50)
    Text(movie.title)
    Spacer()
    Text("\(movie.releaseYear)")
}

This is how ChatGPT responded:

The `frame(width:height)` modifier sets the size of the view’s frame, but it does not affect the size of the view’s content. In this case, the `posterImage` view is not resized to fit within the frame, so it will be displayed in its original size.

To resize the image to fit within the frame, you will need to use the `resizable()`modifier in combination with the `frame(width:height:)` modifier. The `resizable()`modifier adjusts the size of the view’s content to fit within the frame, while the `frame(width:height:)` modifier sets the size of the frame.

Here’s how you can use these modifiers to resize the image to 50×50:

HStack {
    movie.posterImage
        .resizable()
        .frame(width: 50, height: 50)
    Text(movie.title)
    Spacer()
    Text("\(movie.releaseYear)")
}

This answer is completely correct, and I really like the explanation. ChatGPT explains in detail why this approach is wrong and what SwiftUI does in the background. This particular issue is very hard to find in the official documentation, or it’s far less structured. When you’re learning about SwiftUI, ChatGPT’s answers are much more efficient and effective.

Learning any new technology can be painful at first, but SwiftUI is particularly known to have a steep learning curve. In the following example, I wanted to check whether ChatGPT can help. Building a UI, you’ll often want to create a screen on your own. It’s really hard to break the UI in SwiftUI, but I gave it my best shot. I tried to achieve a view with a yellow background and some text between two images, but I completely butchered it. So let’s see if ChatGPT can help me get back on track.

I asked:

Can you make this code work? I want to show vertically aligned text in between image views, and everything should have a yellow background.

struct ConfusingView: View {

    var body: some View {
        ZStack {
            Rectangle()
            Text("Mr. Worldwide")
        }
        VStack {
            Image(systemName: "globe")
            Image(systemName: "globe")
        }
    }
}

The first solution it came up with didn’t quite work.

Maybe my requirements were not clear, so I tried correcting them.

This was my follow-up prompt:

I don’t want images horizontally aligned, I want them vertically aligned with text, so that one image is above the text and one is below.

This is the code ChatGPT provided:

struct ConfusingView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .foregroundColor(.yellow)
            VStack {
                Image(systemName: "globe")
                Text("Mr. Worldwide")
                Image(systemName: "globe")
            }
        }
    }
}

This is exactly what I wanted! The chatbot can add missing lines of code, adjust the existing ones and remove the unnecessary ones. When asked politely, it seems. In this case, it needed a little more explanation to perform what I intended, but it still feels unreal that it can do so in a matter of seconds.

Bonus: Fun with ChatGPT

Before we conclude this article, I wanted to test ChatGPT’s lyrical abilities using an absurd theme. So here’s a song about SwiftUI written by ChatGPT. Eminem, step down, there’s a new AI on the block.

I’ve been coding for so long

With UIkit, it felt so wrong

But then I found a shining light

With SwiftUI, things felt just right

No more storyboards, no more fuss

Just simple code, that’s not a cuss

With modifiers and bindings too

This framework is really new

Chorus:

SwiftUI, SwiftUI

Making apps is a breeze

SwiftUI, SwiftUI

Making code is a breeze

It’s not just for iOS, it’s for Mac too

Apple’s future, it’s all brand new

With power of swift and UI design

We’ll build apps, that’s one of a kind

ChatGPT proves its worth

We can all agree that this was fun and mind-boggling at the same time. Using ChatGPT in these scenarios feels like the future of coding and learning, and it can be deemed a pretty accurate source.

The popular text generator is a great starting point and can definitely be your right hand when learning SwiftUI. On some occasions, it still requires previous knowledge of certain SwiftUI concepts so you can articulate your prompts correctly.

However, ChatGPT really shines in explaining the code. When prompted to provide more thorough explanations, it gave detailed and correct responses for the most part.

Who knows, maybe it will be able to write articles reviewing its own work, such as this one, in the future.

If you are interested in going beyond ChatGTP and utilizing AI in your digital product, see how we can help you on the way.

The post Using ChatGPT to Learn SwiftUI – Does It Work? appeared first on Infinum.