Eight years ago we used RubyMotion (remember that?) to build a simple Mac utility app that we could all install. It was called KyanBar. It was simple, and would allow us to link to some useful services we use. It also allowed us to see what was playing on our office jukebox. It was a fun exercise at the time. You can still get the code.
You can also read more about our office jukebox here:
Building our own office Jukebox using Mopidy, NodeJS and React
Getting the gist of Swift
My colleague Scott recently gave a great dev talk on SwiftUI (which you can watch here), and this piqued my interest. SwiftUI is Apple’s prefered way to build “great-looking apps across all Apple platforms with the power of Swift”. I’d not used either of these before, and to be honest, the last native Mac app I had built was in Objective-C using Interface builder. So having a play with the new language and building tools seemed like a fun challenge. It was also an excuse to also try some of the newer language features like async/await.
As is normal, coming up with an idea of something to build is always harder than building the thing itself, so rebuilding the existing KyanBar app seemed the easiest choice. I wanted it to be simple, use some common, interesting features, and also act as a template that other people could copy and use. During the build and whilst searching the web for solutions when I got stuck, I was surprised by how few templates for this kind of app were out there.
KyanBar gives quick and easy access to our much-loved Jukebox as well as employee essentials such as Lattice (performance and engagement platform), the Kyan handbook, and holiday booking.
(Re)introducing KyanBar
So let’s have a quick run through the app and its features.
Menu bar apps
Menu bar apps are the applications you see in the top right hand of your screen (the menu bar). They normally show some kind of status or provide some common utility function. KyanBar provides a custom menu upon clicking the icon. This menu is a combination of normal menu items and custom views.
Custom NowPlaying and Track SwiftUI views
These use SwiftUI and include previews. These make creating UIs a breeze, with familiar chainable syntax like:
Text("Jukebox now playing:")
.font(.caption)
.fontWeight(.light)
Fetching remote data asynchronously
This is using the new async/await syntax which is familiar to Javascript users. It greatly simplifies the code. This, for example, is all we need to load some JSON:
let (data, _) = try await URLSession.shared.data(from: url)
Updating UI on data change
Using ObservableObject to easily update model data and have those changes sync with your UI.
Creating an About pane
Creating an application About pane with custom content in just a few lines.
App and Menu bar Icon
I started with an SVG of our Kyan logo. For the menu bar icon this was super simple and just required me to open Assets in XCode, create a new asset and drag in my SVG. Easy. For the app icon, there was a bit more work to create the required file type. This involved using the amazing appicon.co. I dragged the SVG into the web app and dragged the resulting file into Assets. Bingo.
Auto app updating
This is relevant if you are not deploying your app via the Apple app store and are allowing people to download it manually. The app integrates and configures Sparkle 2 using Cocoa Pods. It also provides the appcast.xml document.
It follows the instructions at sparkle-project.org/documentation. In all honesty, once I had realised I didn’t need to sandbox the app (as I wasn’t using the app store), this process was pretty straight forward. When building the app for the first time I used:
-
Choose
Product > Archive -
Go to
Window > Organizer -
Choose your app and click
Distribute App -
Choose
Developer IDfrom list and thenNext -
Choose
Upload(to send to Notary service) and thenNext -
Once you get a
Ready to distributestatus -
Choose your app and click
Export Notorized App -
You can now zip up the app and distribute
Hopefully this has given you a quick overview of our application and enough info to copy it, update it and make it your own. Have a play – it’s great fun.
You can see the project on Github at: github.com/kyan/kyan_bar
Previously from Duncan:
The curious case of the QR code, Christmas Day, and 20 million downloads
We are Kyan, a technology agency powered by people.
