Setting Up a Project with Katana and Tempura

Hi everybody, I’m Riccardo. Senior iOS Engineer at Bending Spoons, I breathe iOS development, both apps and tools and I love to share my knowledge with others.

This is the second part of how to create an app with Katana and Tempura, the two open-source libraries that are the core of the Bending Spoons’ iOS apps. You can find more about them in the introductory article:

• An App with Katana and Tempura.

Here we are! Ready to get your hands dirty?
This tutorial will use Xcode 11.3.1 and iOS 13. You will also need to install the Cocoapods dependency manager.

The App

Let’s start by defining the app we would like to build.

We are passionate roleplayer (RPG) gamers, but we can’t find a good dice rolling app on the store. Therefore, we want to build our own dice roller app! The first requirement is that it will let us roll any kind of dice we want. Secondly, it will keep the history of the results in its memory.

Cool, we have an app idea in mind!

Setting up the project

To start, let’s open Xcode and select File > New Project from the toolbar. Let’s choose Single View App and lets set some information for the project.

Let’s input some project information. You can change the Team and the Organization Name, of course. Let’s keep DiceRoller as the name of this project for the sake of this tutorial

Choose the position in the hard disk and see Xcode creating the project. Hit on the run button and see the first, black screen in the simulator. Great!

Xcode created a project using some classes from the new UIScene framework, useful when we have to manage multiple instances of the app’s UI. We are not going to use them in this article because we will always work with the mobile’s UI. So, let’s clean up some useless code:

• Delete the SceneDelegate.swift file.
• Delete the Main.Storyboard file. We are going to define our UI via code.
• Delete the Main from Main Interface field in the Project’s Target.

In this image, the “Main” String has been already removed from the Main Interface line.

• Click on the Info Tab and remove the Application Scene Manifest row.

The highlighted row is the one to be deleted.

• In the AppDelegate.swift, remove everything related to the UISceneSession Lifecycle. You are going to keep only the application(_: didFinishLaunchingWithOptions:) method.
• Declare a var window: UIWindow? property in the AppDelegate.
• Replace the application(_: didFinishLaunchingWithOptions:) with the following:

What this snippet does it’s really simple:
- it creates a window,
- it creates a ViewController (VC), and
- it sets the background of its view to red (temporarily, just to see something when we run! ;) ),
- it sets the newly created VC as the root view controller,
- it assigns the created window to the AppDelegate property, so that we keep the reference to it, and finally,
- it makes the window visible to the screen.

If we run it now, we can see a red view controller on the screen.

Installing the libraries.

The dependency manager chosen is Cocoapods. If you are not familiar with it, there are plenty of guides online and on the official site. For our purposes, we need to create a Podfile in the root of our project where we will define the dependencies.

• Create a new text file and name it Podfile, without extensions.
• Copy the following snippet inside the just created Podfile.

The first row defines the source from which Cocoapod will search for dependencies. Then, we specify that we are going to use dynamic frameworks instead of static libraries. Finally, we define the dependencies for each target we have in the project. We are lucky: we only have one target, therefore we specify the platform and the two pods we are going to use.

• Close the DiceRoller project.
• Open a terminal and navigate to the folder of the Podfile.
• Run the command pod install.

The command will download and install the dependencies specified in the Podfile. It creates a Podfile.lock, which describes the current configuration of the installed dependencies and it creates the DiceRoller.xcworkspace workspace file. From now on, this file will be used instead of the DiceRoller.xcodeproj. Double-click on it and observe Xcode opening up. You will see two products inside the IDE: the DiceRoller and the Pods.

All the code will be written in the DiceRoller project, while the Pods project contains all the dependencies. Hit run and verify that the app is launched in the simulator once again.

I know… I promised you that we would build our app today. But in hindsight, this article already has enough concepts to get familiar with. Let’s stop here for this week.

Next week we will go into the definition of the main entities of Katana: the State, the Dependencies and the Store. Stay tuned!