Making a Podcast App From Scratch
Build a podcast app completely from scratch. Along the way we’ll deal with implementing some custom UI, transitions, networking, local persistence, and of course audio playback.
Length: about 6 hours.
We’re kicking off a brand new series on building a podcast app from scratch. Along the way we’ll deal with implementing some custom UI, transitions, networking, local persistence, and of course audio playback.
We start from a blank project template, then add our first storyboard and tab bar controller. We also introduce a mechanism for skinning the app with a Theme type.
We start out by creating our first view controller (Search) by creating some structure to keep things organized by logical function (rather than by subclass) and create a storyboard to hold each tab. The main storyboard then uses Storyboard References to keep things tidy.
In this episode we start building our first table view cells. We then build a protocol to represent Reusable Views, such as UITableViewCells. With this protocol you can supply a simple type reference and the reuse identifier and casting happens for you. Leveraging Swift's protocol extensions allows you to leverage your conventions to write cleaner, safer code.
In this episode we add our tableview cell styling to match the design, using autolayout to arrange the views and using the Xcode View Debugger to find and fix a visual glitch when using dark background cells.
Working with images from the network is such a common task in iOS development. In this episode we'll cover a useful library called Kingfisher, which gives you a simple API for downloading and caching images from the network. We also look at two ways for configuring our image view, one using User-Defined Runtime Attributes and the other by using awakeFromNib in code.
It's time to start talking to external APIs to get the data we want to display in the app. We start by exploring the API we want to consume with Paw, a useful macOS app. We then create a simple API client class that abstracts most of the boilerplate logic around how to handle the various URLSession outcomes.
In this episode we take the response from the top podcasts feed and decode the JSON into models using Codable.
In this episode we build another API client to search for podcasts matching a term and customize the UI and behavior of the search bar. We display the recommended podcasts first, then when a user types in a term we show the matching podcasts from the iTunes API.
To get the information we need for the Podcast Detail screen, we’ll have to get the feed URL and parse it. There’s no built-in Codable support for XML, so we’ll look at using FeedKit to parse the feeds and extract the relevant information we need.
In this episode we start laying out the Podcast Detail screen. We'll start by using an embedded view controller for the header portion, which contains all of the top-level information about the podcast. We'll then see how we can utilize this child view controller to contain all of our outlets and how to pass data from the parent view controller to the child.
In this episode we create a custom UIView subclass that draws a gradient overlay. This allows us to overlap the podcast information above the artwork slightly.
In this episode we create some more custom @IBDesignable views, this time for a padded genre label where we use the intrinsicContentSize to make a label take up more space and give itself a little padding. We also create a separator view that draws a thin line to separate sections visually.
In this episode we customize our call-to-action Subscribe button. Using @IBDesignable and Interface Builder we can preview how it looks in the various button states without having to recompile and run in the simulator every time.
In this episode we clean up some autolayout warnings, implement some changes to support dynamic text, then move our attention to presenting the podcast detail screen when tapping on search results. Since the data is coming from various places we introduce a Data Manager to move that responsibility out of the view controller.
In this episode we extract episode information from the podcast feed and render them as cells on the podcast detail screen.
We have some housekeeping to do in this episode. We also want to add a little polish to the podcast detail screen so that it doesn't resemble a stock table view driven app. We also need to clean up the data model a bit in preparation for persistence, and we also want to remove the pesky html tags that show up on the podcast and episode descriptions.
In this episode we set up a Core Data model for persisting podcast subscriptions. We'll cover the various ways Xcode generates model classes for us and work on saving and loading podcast subscriptions so that the subscribe button behaves as it should.
We've spent a lot of time dealing with the data, networking, architecture, and overall theme of our podcast app, but we haven't yet written a player! So in this episode we start the process of designing our player screen. We'll start by adding all of the controls and views to our PlayerViewController, wire everything up, and customize the look & feel to match our Sketch design.
In this episode we implement one of the core functions of a podcast player: playing audio! Using AVPlayer we load up the track and observe its progress so we can update the UI to reflect time progressed, time remaining, as well as allowing the user to scrub to a position in the track.