How to Build Your Own Blog App With SwiftUI

New technologies frequently increase the complexity of the app development company, making coding less approachable for the general public.

The contrary is typically true with SwiftUI, as the framework makes it quite simple to swiftly construct whole apps from scratch or iterate on design concepts through coding.

We created and open-sourced a blog app that uses a content management system to serve your entries and supports many design aspects, including dark mode and accessibility, as standard to demonstrate how easy it is to use SwiftUI for big projects.

Although, to start the project, here are a few things you need:

• Download Xcode 12+.
• New SwiftUI projects should be made.
• In the project settings, choose an iOS deployment target of 14.0 or above.
• Repository on GitHub

Downloading the final project from GitHub will allow you to follow along.

How to Build Your Own Blog App With SwiftUI

Setting Up Contentful for Content Management 

Setting up your model on the content management system is the first step (CMS). Once the app is built, this model will specify what will be published there. Since we are developing a blog application, in our instance, we must design a model for a blog post, complete with a title, subtitle, content, etc.

We will choose Contentful as our CMS because it offers a substantial free tier and works well with Swift and SwiftUI in particular.

The first thing to do after making an account is to draught the blog post’s content model. Go to Content model Add content type and select a name for the model to accomplish that. SwiftBlog will be used with a swiftBlog API identity.

The content model must then be updated to include all relevant fields: Add a field, select a type, and then create it. The list of all the fields we’ll be using is provided below; feel free to modify it to suit your needs.

At this stage, we may also add a few articles to help with debugging our upcoming app. Go to Content Add SwiftBlog to make a post. Include a title, a subtitle, a photo, and text. When we begin creating the relevant area of our application, we may leave the featured field empty for the time being and return to it later.

Building the App

Once Contentful is configured, the real app may be made. We need to link a few important libraries before we can go on to the interesting stuff.

Most importantly, we must include SDWebImageSwiftUI and Contentful from the Swift package manager. If you’re not sure how to proceed, go to File Add packages and look for the two aforementioned names. Use these GitHub folders instead for SDWebImageSwiftUI and Contentful. Once you have added these dependencies, Xcode will handle the rest.

We may now begin the application itself.

Creating the data model

The data model for our blog post is now being created. The structure of this model should be the same as the one we established for our Contentful content model, which entails the presence of a featured field boolean as well as a title, subtitle, image, and actual text (a blog post).

Unless we indicate otherwise, we are setting the default value of featured to false. This allows us to make the field in our Contentful content model optional and only take note of it when we wish to showcase a post.

Note that by including a UUID, we also conform the blogpost struct to the Identifiable protocol. We will utilize ForEach statements in our next view models, therefore this is necessary.

Setting up a Contentful connection

We’ll develop a logic to link to our CMS next. You will want both an access token and your space id for that. On Contentful, you may obtain these under Settings API keys.

The Client instance, which is a component of the Contentful library, must receive both the space id and the access token before it can be used in a method to retrieve the array of our blog entries. Using the following piece of code, you can also arrange the list that is returned by any field any way you like:

The final step is to construct a BlogPostStore observable class and fill it with a list of blog articles using the getArray method. All future views that display the list of blog posts will immediately redraw whenever the list is refreshed because we are utilizing the @Published property wrapper for our blog posts. In other words, new information will instantly display in our views once we publish a new article and a user refreshes the list.

Another crucial point is that the SDWebImageSwiftUI library has to be imported first since we cast our photos as URLs. The WebImage class from the library will enable us to display the picture from this URL.

The backend portion of our CMS integration is now complete. The only thing left to do is create our application.

Designing the App

For our blog app, we will create simply three elements and two pages (the main screen with a few featured articles and a list of all posts) (a blog postcard for the main screen, a blog post row for the list, and an actual blog post view).

Making the main screen’s card design

Using all the usual SwiftUI components, such as words, vertical and horizontal stacks, and stacks, designing cards is quite simple. Presenting the online pictures from our CMS would be the only little difficulty with this, which we are addressing by utilizing the SDWebImageSwiftUI package, as was already explained.

Additionally, we’ll need an extension to enable hex values for colors as Swift doesn’t already handle that.

On to the actual card itself. We’re going to address two very important issues here.

First, by reducing the number of hardcoded values for the card size, we will make the card as adaptive to the screen size as feasible. Since all VStack and HStack views in SwiftUI automatically adjust to the screen size, achieving this goal is often straightforward, but when it comes to photos, we want to make sure they appear nice on any size of the screen. Due to this, the image’s height will be fixed at 220 pixels, and its width will be set using the code below:

This indicates that we are using the actual screen size of the device the app will be opened on, shrinking our picture by 80 pixels to fit the available space on the screen. Although there are other methods to accomplish flexibility with SwiftUI, for our particular card, this approach would be most effective.

Second, the card must appear attractive in dark mode. Although SwiftUI includes support for the dark mode by default, it is still our responsibility to ensure that all of the colors seem acceptable and orderly in both appearance modes.

If the @Environment(.colorScheme) var colorScheme value is.dark: we will just utilize the actual hex value of a dark grey color as we only require one custom color for the card in our app.

Here is our main blog postcard’s whole code:

The outcome for the iPhone 12 and iPhone 8 is shown here. You’ll see that the card instantly adjusts to the screen size and appearance mode, and both look nice.

Designing the list row 

We must plan how each row will appear in the list of all blog entries. Since this view will be used as a row in a List, we can reuse much of the code from our main card without having to worry about adding shadows or changing the color scheme for the dark mode, which makes things even simpler.

The final code we employ for the last row of each blog post is shown here:

And this is the final appearance of each row.

Creating the blog detail view

The next stage is to create the appearance of our blog entries when we open them. Again, we don’t do anything special in this case; we simply stack a picture, a title, and some text vertically and cover it with a ScrollView. SwiftUI will handle accessibility and dark mode as normal.

You can see what our posts will look like inside when we open them in the picture below.

Creating the final screens 

We can simply organize our primary components in the final screens as we like now that we have constructed them. We will only have two tabs on our app: Home, which will have a few featured and most recent articles, and See all, which will include a list of all blog entries.

The latter may be used to illustrate SwiftUI’s simplicity compellingly. All that remains to be done is to develop a NavigationView with a List that displays blog posts using a ForEach statement because we already have a store of our blog articles and a component to show them in the list.

Currently on the Home screen. The Home screen will be divided into two sections: one for featured posts and the other for the most recent entries. The latter is quite straightforward and does not require much attention; all we do is utilize a horizontal ScrollView with the cards we created earlier and set a limit on the number of posts in the ForEach statement. The repository for this view contains the whole code.

The featured boolean field that we introduced to our content model in Contentful will now be used in relation to the featured posts.

We may use a calculated property to filter all posts and return just those that have the featured field set to true in order to only get featured posts.

The last step is to arrange our two screens using a TabView in the ContentView file and to establish a @StateObject for the blog posts store that will be employed by all child views.

That was it; our application is now prepared for usage!

Over to you

We quickly created a blog app with a content management system by using the instructions above. Here is the outcome we came to.

As we can see, SwiftUI makes it exceedingly simple to develop apps with intricate interfaces that easily adjust to various displays and appearance modes.

By using this blog app as an example, you can also implement a feature that allows you to add fresh material to an existing application without having to publish the app itself. This feature is ideal for showing a variety of pictures, articles, or practical advice over time.