In this series I'm joined by none other than Gui Rambo to build a Mastodon client for macOS from scratch with SwiftUI.
Length: about 11 hours
Gui Rambo joins us to build a Mastodon Client for macOS using SwiftUI. In this episode we'll show the app we'll be building and then start from a blank slate where we will cover some topics about how a SwiftUI macOS app is set up, how we can define some build settings using xcconfig files, and how to deal with building for different Apple Developer teams.
The first step to use Mastodon is to select your instance. You can browse a public timeline of that instance or you can log into that instance to see your own timeline. In this episode we will create a simple instance selection UI. We'll then use animated transitions to switch to the timeline view. Gui teaches us a new tip about debugging animations.
In this episode we lay the foundation for the OAuth flow with Mastodon servers. We'll utilize KeychainAccess as a wrapper for the Keychain API, so that we can store secrets in a secure way.
In this episode we complete our log in functionality using the AuthenticationServices and the keychain. We'll also see how we will represented an authenticated session using a new type, so that other parts of our code will have everything it needs to make authenticated calls to the API.
In this episode we take our authenticated session and use it to fetch the user's timeline on the selected server.
In this episode we tackle showing a list of posts, which requires us to convert the network models into models more fit for the UI, parsing HTML in order to display as an AttributedString, and displaying the author information.
In this episode we continue with our post UI, making it adapt the layout to the available size using the ViewThatFits view in SwiftUI. Then we turn our attention to the avatars, which need to be fetched and displayed. We start with AsyncImage, but after a discussion we conclude that we will need more control over how the images are fetched and cached, so we implement our own RemoteImageView.
Posts with links in them can be expanded to show richer information, including an image for many sites that support it. In this episode we'll utilize the LinkPresentation framework to add this to our app. We'll also build out a cache using NSCache to ensure that we respond quickly when rendering the same post while scrolling.
Now that we have a view for rendering link previews, now we integrate it into the timeline. We'll start by updating our model to capture links, then move on to adjusting the layout within the post view.
We add the ability for the app to remember that a user was logged in, auto log them in w/ the saved credentials. We also add a sidebar to display the user's avatar, including a translucency effect that was not obvious at first glance how to implement. Finally we add auto-paging to the app so that the app will continuously fetch the next page when you reach the bottom.
In this episode we show the post's images, using a custom layout algorithm to position multiple images in the space available for a post. Also, new icon!
In this episode we dive a little deeper into how Windows can be opened using SwiftUI, then see how we can drop down to AppKit to customize it further. We'll learn about style masks and the different behaviors we have for positioning the window. Finally we use this knowledge to open a window with a selected image from a post.
In this episode we explore a little hit testing problem we have with our custom layout solution. We implement some techniques to help visualize and explain the problem and then ultimately fix it.
When tapping on an image, we want to open a new window with that image, but have it expand from the position in the gallery on the post. To do so, we have to do some window manipulation using NSPanel and some frame calculations.
In this episode we handle zooming into images using a gesture on the trackpad or with ⌘+/- on the keyboard.
In this episode we page between images in a post using some custom navigation buttons. When doing this we encounter an issue with implementing keyboard shortcuts for these buttons where a SwiftUI helper just doesn't work. For the fix we'll have to wait for the next episode.
Last time we left off where keyboard shortcuts weren't quite working the way we wanted. In this episode we take the time to explore the various options we tried and why they don't work. We address this by implementing a key handling system in AppKit and publishing these as commands to SwiftUI using a Combine subject. This wraps up our series on Building a Mastodon client for macOS!