Perhaps you heard about the possibility to use xcassets for alternative icons in Xcode 13. I did as well. I then opened Xcode 13, created a new App Icon Set to tried that. Hit Run and… “The file doesn’t exist”. I tried to debug the problem in many ways, by printing variables’ content and by using breakpoints. I also tried to add the icons to the Info.plist file, as our ancestors (us until last June) used to do. None of this would do; the error was still there.

I tried to search the problem on the internet. Radio silence. No one has ever had that issue. Apple hasn’t publish anything on this topic ever. No sessions from WWDC, nor documentation (or at least not that I found).

After a few hours of banging my head on the keyboard, I stumbled upon the release notes of Xcode 13, and found the Holy Graal:

At runtime, your app can now use iOS app icon assets from its asset catalog as alternate app icons. A new build setting, “Include all app icon assets,” controls whether Xcode includes all app icon sets in the built product. When the setting is disabled, Xcode includes the primary app icon, along with the icons specified in the new setting, “Alternate app icon sets.” The asset catalog compiler inserts the appropriate content into the Info.plist of the built product. (33600923)

Basically you just need to set to YES the “Include All App Icon Assets” setting under build settings.

Once you do that you can finally use the App Icon Sets in your xcasset catalog as alternate app icons as you usually do.

There is another way. Instead of setting to true “Include All App Icon Assets”, you can select which App Icon Assets to use. Just insert the names of the icons sets you want to use under the “Alternate App Icon Sets“. In the example below we are only including the icon set called "chaos".

Let’s refresh how to implement alternate icons in code. First of all we need at least an app icon bundle in the xcasset catalog. Something like in the image below.

Once we have the asset ready, we can set the icon. Let’s switch to the code.

Here we are creating an @IBAction function, that sets the alternate icon named "chaos", that we previously selected in the build settings.

We are done. This is enough to change the app icon to a precise icon. If you want to go back to the default icon, just put nil instead of "chaos" in the parameter of the setAlternateIconName function.

I made a demo app in SwiftUI, with a table view and some funny icons. You can find it here.

Big Sur brings a massive redesign to the Mac. It offers new icons and a new, cleaner UI design while keeping the character of macOS. It also gives us great improvements for Catalyst development, but today we are going to talk about the new Preference style for the toolbar.

Our aim for this article is to create a preference controller with this toolbar style. This style already existed before, but Big Sur takes a different approach to it. It now has a cleaner look and feel, and it is used in more and more applications. This tutorial assumes that you already have a Scene for the preferences window.

Let’s Start Coding

First off, we need to add a toolbar in our window. In our SettingsViewController, we make a new function called insertToolbar():

Let’s break down the code we just wrote:

1. We check if we are building for Mac or iOS.
2. We create a scene object from the current windowScene if it exists. If it does not exist, the function returns.
3. We check if there is a titlebar in the scene.
4. We create a toolBar object of type NSToolbar with the mainToolbar identifier. We are also assigning ToolbarIdentifers.general to the selectedItemIdentifier property of the toolBar. This will give you an error now that will be fixed later on.
5. We set the toolBar style to .preferece, to give it the look we want;
6. We assign the toolBar object we just created to the toolbar property of our titleBar.

We assign self, our controller, to the toolBar's delegate. It returns an error right now because our controller does not conform to the NSToolbarDelegate yet. In order to address this, we create an extension of the ViewController like this:

In this new extension, we are going to implement some toolbar functions. First, it is good practice to create some identifier constants instead of writing a string every time we need to address one specific identifier. This will reduce the risk of misspelling anything. So in the extension we just created, we put this enum:

Note: For simplicity’s sake, I am going to hard-code the SF Symbols’ names later.

Digression for Identifiers

In order to have all the constants in one place, you can create an enum this way:

Back to the Real Coding

We just created the identifiers of our items. Now we have to tell the toolbar what to display and how. We start by adding the public func toolbarAllowedItemIdentifiers(_ toolbar: NSToolbar) -> [NSToolbarItem.Identifier] method that tells the toolbar which items are allowed in it:

It has to return an array of NSToolbarItem.Identifier, which consists of the identifiers we set a few steps ahead. Now we need to tell our toolbar which are the default items and which of them are selectable in order for them to get the behaviour we expect:

We are one method away from the end. We need to determine how the button should look and what it has to do when pressed. public func toolbar(_ toolbar: NSToolbar, itemForItemIdentifier itemIdentifier: NSToolbarItem.Identifier, willBeInsertedIntoToolbar flag: Bool) -> NSToolbarItem? comes to the rescue:

In this method, we are telling our toolbar which items belong to which identifier. The three methods at the bottom are the actions our items perform. Change the content of the controller there.

Build and Run

Let’s build and run our app. Congratulations, you did it! Here is the result of this work:

Bonus

In order to change the title of the window when you change the tab, we have to change the scene title, which can be done this way:

The code used in this article can be found on GitHub.

How to Programmatically Create a Preference-Styled Toolbar in macOS Catalyst was originally published in Better Programming on Medium, where people are continuing the conversation by highlighting and responding to this story.

Instagram implements a rich URL scheme for its Stories. The best thing about URL schemes is that we don’t need to include any frameworks. If the user has the Instagram app installed, it will do all the dirty work. Let’s dive into more details!

As you can see in the image above, there are three main layers:

• The background layer, which can be made of a photo, a video, a solid color, or a gradient.
• The sticker layer (optional), which contains an image and can be edited by the user.
• The attribution link (in beta for some users only).

Time to Code

Let’s review the code.

1. Basically, here we created a URL with Instagram’s scheme. We are using the optional binding if-let because the URL init returns an optional value.
2. After that, we checked if the system can open Instagram — or rather if it is on the device.
3. Once we are sure of that, we can proceed. In order to pass an image or a video, we have to convert it into data. For images, we can use .pngData(). Once we convert our image or video to the correct format, we need to copy that in the system pasteboard, where Instagram will get the data from.
4. We now create an array of dictionaries the type we need to put something in the pasteboard. We also create the options for the pasteboard, and in this case, we set the expiration date for our image. That will be five minutes.
5. This step is important since we set the items (our image data) to the pasteboard with our options (five minutes of life).
6. Finally, we open the URL we created at the beginning. Instagram will open and it will show our image in the story composer.

We did it!

More Customization

But what about using a video, gradient, or sticker as the background?

Background image/video

As said above, in order to have a background image or video, we need to set a data object for one of these two keys:

com.instagram.sharedSticker.backgroundImage

com.instagram.sharedSticker.backgroundVideo

Sticker

As an image, a sticker also accepts data. The recommended size is 640x480px. The key for the sticker is:

com.instagram.sharedSticker.stickerImage

Gradient background

For a gradient background, we need to pass two colors: one for the top and one for the bottom. In this case, we have to pass a string with the HEX value of the color.

com.instagram.sharedSticker.backgroundTopColor
com.instagram.sharedSticker.backgroundBottomColor

For example:

let items = [["com.instagram.sharedSticker.backgroundTopColor": "#EA2F3F", "com.instagram.sharedSticker.backgroundBottomColor": "#8845B9"]]

To get a solid background, we do the same thing as with a gradient, but the two colors have to match.

How To Share a Photo on Instagram Stories in Swift was originally published in Better Programming on Medium, where people are continuing the conversation by highlighting and responding to this story.

Frameworks management simplified

Perhaps you’re wondering what Carthage is. Carthage is a decentralized dependency manager for cocoa. What does that mean? It means that it simplifies our lives by taking care of all the problems that depend on frameworks management.

At the end of this guide, you will have a basic framework supported by Carthage.

Action!

To proceed, you need some packages on your computer. I recommend installing Homebrew, a packet manager that simplifies your life with installations.

If you do not have Carthage already installed already, run this command:

brew install carthage

Once you have done that, you’re ready to start!

Create the Framework

First, we have to create our framework. In this case, we’re going to make a simple method to change the view’s background color. Create a new Xcode project, iOS, Cocoa Touch Framework:

Click next and then give it a name (I’ll call it GSKit).

Click on next once more and save.

Add Git Control

In order to share your framework you have to put it on Github, so let’s create the local git versioning. Open Terminal, cd the project's folder and the execute git init. It creates a local version of git that we’ll upload later.

Start Coding

Now we need something to execute. So let’s create a file: Cmd+N, select Swift File, name it GSViewController and save it. Now let’s write some code:

You should have something that looks like this:

Let’s review the code we just wrote:

• Line 9: we’re importing the UIKit framework in order to be able to use the references to UIViewController and to UIColor.
• Line 11: we’re creating a new class called GSViewController that inherits the UIViewController class. We put the class open in order to be able to inherit it outside its target.
• Line 12: we created a function called changeBackground with a parameter called ::color:: of type UIColor. The function is public because we want to use it outside this framework. In the function we are simply changing the color of the background.

Sample Project

We are going to create a sample application to showcase how to use our beautiful new framework. To create this app, click on the project and then click on the plus icon on the bottom left.

Then select iOS, and Single View App. Name it Example and save it.

Next, we have to link the framework in order to be able to use it in our Example application. Click on the plus icon under Linked Frameworks and Libraries and select GSKit from the menu.

Test our Framework

Now we can test if the framework works in the right way by using this code in the ViewController class.

import UIKit
import GSKit

class ViewController: GSViewController {
    
    var colors: [UIColor] = [.red, .green, .blue, .orange, .purple]
    var currentIndex = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        changeBackground(withColor: colors[currentIndex])
        
        self.view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleClick)))
    }
    
    @objc func handleClick() {
        currentIndex += 1
        
        if !colors.indices.contains(currentIndex) {
            currentIndex = 0
        }
        
        changeBackground(withColor: colors[currentIndex])
    }
}

Change the build target to Example and run the app. It will open an app with a red background — if you click on the view the color changes. It works!

Click on Manage Schemes, and then un-flag and re-flag the “Shared” voice near GSKit.

Build for Carthage

Now it’s time to build our framework in Carthage. If you closed the Terminal window, reopen it and navigate again to the project’s folder. The only thing we need to do now is run this command: carthage build --no-skip-current. It will build the framework and create a Carthage folder in the project folder.

We’re one step from the end! All we need to do now is push the folder to GitHub. To do that we use this command in Terminal:

add .
git commit -m 'first commit'
git tag "v1.0"
git remote add origin "URL OF THE REPO"
git push origin "v1.0"

You need to first create a repo on GitHub. URL OF THE REPO is the link to the repo you created.

The framework has now been published on GitHub!

How To Use It

To use it, all you need to do is create a Cartfile and add this: git "URL OF THE REPO" ~> 1.0

Save the file, open the Terminal, navigate to the project’s folder and run carthage update.

Drag the framework from Carthage/Build/iOS/GSKit.framework to the Linked Frameworks and Libraries in the target in Xcode.

Now you have to create a New Run Script Phase for the application target’s Build Phases with:/usr/local/bin/carthage copy-frameworks

In the Input Files you have to add this:$(SRCROOT)/Carthage/Build/iOS/GSKit.framework

And this in the Output Files:$(BUILT_PRODUCTS_DIR)/$(FRAMEWORKS_FOLDER_PATH)/GSKit.framework

All done! You can now use your framework in your new project!

You can find the code from this project in my repo on GitHub.

How To Create a Framework With Carthage Support was originally published in Better Programming on Medium, where people are continuing the conversation by highlighting and responding to this story.

Have you ever heard the word “backend”? If this is your first time hearing this strange word and you are wondering if it is an animal or a particular kind of plant or even a really tasty food, or if you know what that is but you feel like you don’t really know much about it, follow me during this guide, and in the end you will be quite an expert about it.

At the end of this guide, you will have a basic backend for your application. To reach this goal, we are going to use Kitura, a server-side web framework that allows us to build a server using Swift, for API’s endpoints, Postgres, an open source relational database, for storing data and Docker to manage the resources.

Probably now you are WAT?! What is an API Endpoint? I’ll help you!

An API is a programmatic interface consisting of one or more publicly exposed endpoints to a defined request–response message system, typically expressed in JSON, which is exposed through HTTPS protocol.

In this guide, we are going to use HTTP instead of HTTPS, because, in order to support the apparently irrelevant letter, in the end, there are a lot of hard and long steps.

At the end, we will have three API endpoints. We will be able to query these endpoints getting a JSON response. The database is a database made by three tables, that describe the structure for a travelling app.

Action!

Here we are. First of all, there are some prerequisites needed. For Kitura, if you are using macOS, you need to install Xcode 9 or later, and run xcode-select --install on the Terminal. If you are using Linux, follow this guide.

To proceed, you are going to need some other packages on your computer. I recommend installing Homebrew, a packet manager that simplifies your life with used-to-be-messy installations.

Now that everything is set up, install Kitura through Homebew:

$ brew tap ibm-swift/kitura
$ brew install kitura

Now it’s time to install Docker, a powerful tool that helps you managing scalable backends, and deploy it with ease. Download Docker and install it following the in-app steps. Take your time, and once it’s installed, login in and come back here.

You just installed everything you need, congratulation! Now we need a project folder. Our hierarchy is composed of a main folder called “MyFirstBackend”. In it, we are going to create two other folders: “backend”, “certificates” and “database”.We will use these folders to store the rules for the images of the docker containers. Later, in the database folder, we will put the rules to create the… guess it: database. In the backend folder, instead, we will instantiate the Kitura project. Seems fun, right? Let’s dig into it!

Postgres, it’s your turn!

Docker, as said before, is a really powerful program that performs operating-system virtualizations. We are using it because we will deploy our backend on the cloud. In this way, you will not care about memory, space and all the limitations of a normal web hosting. This is possible thanks to the cloud and the scalability of it.

Let’s build the database now! In the “database” folder we are going to give the rules for the Postgres database. Go back to the Terminal, and cd the database folder. In there create the Dockerfile and a SQL file

$ cd path/to/database/
$ touch Dockerfile
$ touch CreateDB.sql

Two files have been created in the database folder. One is the Dockerfile, a file with all the instruction for the creation of the Docker image, and the other one is a supporting file that we need to create the actual database structure. Let’s open the Dockerfile. Now that you have an empty text file in front of you, let’s write some instructions for the Docker container.

FROM postgres:latest

ENV POSTGRES_USER root
ENV POSTGRES_PASSWORD admin
ENV POSTGRES_DB myFirstDatabase

ADD CreateDB.sql /docker-entrypoint-initdb.d/

When we will build these rules, Docker will download the latest Postgres image from DockerHub, will create a user for the database with root as username and admin as password. The name of the database will be myFirstDatabase. Everything will be based on the CreateDB.sql file we created a minute ago.

Now it’s time to create the database structure.

This is the structure we are going to use. There are three tables: users, places and trips.

With the first command, we create the users table, which has:

• user_id: the autoincremetal (SERIAL) primary key
• username, email, password: the text properties for each tuple of users
• username, email: these properties are marked UNIQUE, which means that will not be possible to insert a value that already exists

Then we populate the users table with a bunch of values. We have made the same process to create the places table. After this, we have created the third table called trip which is a relationship between the previous two tables. In this table, we have 2 fields that are depending on the other tables, and we do this with the FOREIGN KEY () REFERENCE () syntax.

Kitura, I choose you!

Just move in the backend folder and use Kitura to generate a ready to build OpenAPI project on the spot:

$ cd path/to/backend/
$ kitura init

Now open the generated Xcode project. To communicate with the database, we need to import some frameworks. In the Package file, import these two IBM’s frameworks and update the dependencies. The first one stands for “Object Relational Mapping” and it will facilitate us with the queries to our database. The second one is needed since we use PostgreSQL. Be aware that for advanced custom queries you would opt for using directly Swift-Kuery rather than Swift-Kuery-ORM.

.package(url: "https://github.com/IBM-Swift/Swift-Kuery-ORM.git", from: "0.4.1"),
.package(url: "https://github.com/IBM-Swift/Swift-Kuery-PostgreSQL.git", from: "2.1.0")

.target(name: "Application", dependencies: ["SwiftKueryPostgreSQL", "SwiftKueryORM", ...

You have to regenerate the project for the new dependencies. First, close Xcode and use these commands:

$ cd backend/
$ swift package generate-xcodeproj

Reopen the project, you can now import them within the Application.swift file:

import SwiftKueryORM
import SwiftKueryPostgreSQL

Now let’s prepare our model to relate to the database. We need it to conform to Codable, Equatable and Model protocols:

• Codable: it allows the struct to be exported in JSON
• Equatable: it allows to compare for equality different User objects
• Model: this exposes new methods for saving, finding, deleting etc. from a database

Now we have to establish the connection to the database. Insert this function within the App class in Application.swift:

Just change the parameters accordingly with your databaseName, userName and password.

Now let’s support GET requests in two variants within the App class:

Hey, you are ready to go!

Docker: how to!

At this point you should have a structure like this:

Now we have all the Dockerfiles we need. Some lines above we created the Dockerfile for our database, and then we instantiated a Kitura project, that creates a Dockerfile automatically. This Dockerfile misses a variable. Open the file you can find in the backend folder, remove everything and write:

FROM ibmcom/kitura-ubuntu:latest
RUN mkdir /external && apt-get update && apt-get -y upgrade && apt-get -y install curl
RUN curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
RUN apt-get update && apt-get -y upgrade && apt-get install -y nodejs libpq-dev
RUN npm install -g yo
EXPOSE 8080
ENV DATABASE_URL 127.0.0.1
ADD ./ /external/
RUN ["/bin/bash", "-c", "cd /external/; swift build"]
CMD ["/bin/bash", "-c", "cd /external/.build/x86_64-unknown-linux/debug/; ./backend"]

Now we just have to build the docker images. In order to achieve that, we need to run some commands. First of all, run docker opening the app, we installed at the beginning. When it is running, go back to Terminal and change directories to the main project’s folder (myFirstBackend). To finally build the images, you need to run these commands:

docker build -t username/mydatabase:v1 ./database
docker build -t username/mybackend:v1 ./backend

Where:

• username: the username of your DockerHub account
• mydatabase — mybackend: name of the images
• v1: tag of the version you are building

You can test your images by running them on your machine. The database needs to run on port 5432:

docker run -p 5432:5432 username/mydatabase:v1

When the database is running, run the backend on port 8080, and change the environment variable with your local IP. To find your local IP, open System Preferences, then go to Network, and look at your current IP address. Set that address as DATABASE_URL:

docker run -p 8080:8080 -e DATABASE_URL='' username/mybackend:v1

When this step is done, you need to upload these images on DockerHub with:

docker push username/mydatabase:v1
docker push username/mybackend:v1

Remember to replace the username with your DockerHub username.

Deploy everything

We are almost done! Now it is the moment to deploy what you have done so far, on the cloud, that in this case is Amazon AWS. First of all, you need an account there. If you don’t have one, create it here. Once you have one, login, and, under services, select EC2. On the top right, you can select the region of the server you want to work on. In this tutorial, we are using US. West (N. California) but you can decide the one which better suits your needs.

To run your docker images on AWS you need an instance. To create one, select Instances in the menu on the left and a select the “Launch Instance” blue button in the middle of the page.

Now it is time to configure your machine. Choose Amazon Linux 2 AMI by clicking the Select button.

Technical specifications are important for your instance since they determine the limit of your app.

Configure the security group and stay away from bad and unexpected scenarios. Open just the ports you need to run your backend. The HTTP is the protocol you will use to load the API, so the source is set to everywhere so the service will be accessible from everywhere.

Note: For testing purposes, we are setting SSH sources to anywhere, but for a better security, the SSH port should be opened just for your IP Address. In this way, no one can access your instance via SSH.

Once you reviewed all the details, click Launch. In this way, you will deploy the instance and you will be able to create a pair of keys you will need to login with SSH from your terminal. Select Create a new key pair and then give it a name (in this case “debug_tutorial”). Then download the key pair, remove the .txt extension from the file and put it in the certificates folder. We will come back there later.

Done. A green success message should appear on the page. Your instance is now running on the cloud. The problem is that anything will be loaded since it is empty. Let’s fill it up!

First of all, we need the CLI (Command Line Interface) for Amazon AWS. Open again the terminal and, using Homebrew, the only command you need to run is:

$ brew install awscli

Once it is done, you have to configure your aws details with:

$ aws configure

The first input you will need is your Access Key ID, that you can find by clicking on your name in the menu on the top right, and then on “My Security Credentials”. There, select Access key, create one and download the file. Put the downloaded file in the certificates folder. Now you have two keys: the Access Key ID and the Secret Key. The next data you will need for the configuration is the Default region name that needs to reflect the region you selected in the beginning (in our case is us-west-1). Here you can find a list of available regions:

ap-northeast-1 - Asia Pacific (Tokyo)
ap-northeast-2 - Asia Pacific (Seoul)
ap-south-1 - Asia Pacific (Mumbai)
ap-southeast-1 - Asia Pacific (Singapore)
ap-southeast-2 - Asia Pacific (Sydney)
ca-central-1 - Canada (Central)
eu-central-1 - EU Central (Frankfurt)
eu-west-1 - EU West (Ireland)
eu-west-2 - EU West (London)
eu-west-3 - EU West (Paris)
sa-east-1 - South America (Sao Paulo)
us-east-1 - US East (Virginia)
us-east-2 - US East (Ohio)
us-west-1 - US West (N. California)
us-west-2 - US West (Oregon)

Set Data output format as text and the configuration is done. Now you need to connect to your instance through SSH. To do this you need to run the command below, where i-0f2103a2a2417f4cd is the id of your instance.

$ aws ec2 get-console-output --instance-id i-0f2103a2a2417f4cd

In Terminal change directories to the certificates folder that contains the .pem file created earlier. In here you have to run this command, where debug_tutorial is the name of your certificate.

$ chmod 400 debug_tutorial.pem

Let’s connect to the instance finally! Run this command:

$ ssh -i debug_tutorial.pem ec2-user@ec2-13-57-229-28.us-west-1.compute.amazonaws.com

Since we selected “Linux “ at the beginning, the user is ec2-user. After the @, the DNS name is the Public DNS that you can find in the description of the instance. The debug_tutorial.pem, instead, is the name of your certificate. After this, enter yes and everything is set.

Now you are connected through SSH to your instance. It’s time to install docker on the machine:

sudo yum update -y
sudo amazon-linux-extras install docker

Start the docker service:

sudo service docker start
sudo usermod -a -G docker ec2-user

Logout with logout and log back in and then check the docker’s installation:

docker info

Now install and run the two containers:

docker run -p 5432:5432 username/mydatabase:v1
docker run -p 8080:8080 -e DATABASE_URL='' username/mybackend:v1

The DATABASE_URL is the public IP of your instance.

Everything is up and running! Congratulations! Now you can access your API through the public IP address.