Adding an iOS app

Now we're ready to add the iOS project to our Kotlin multiplatform project. To try this, perform the following steps:

1. To get started, we'll create a new root-level directory in our project named iosapp. Within this directory, we will then need to create a new iOS Xcode project using the Single View App template:

2. After clicking Next, you'll be prompted to fill in your project details: 

In this case, we'll name this project iosapp and then click Next to choose the project directory. Here, we'll specify our root/iosapp directory and click Create. 

When that default project is created, we should have a project structure similar to the following:

root/iosapp
    iosapp/
    iosapp.xcodeproject/
    iosapp.xcworspace/

3. Now, we'll work on integrating our shared Kotlin code with our newly created iOS project. To do this, we will use the native-cocoapods plugin within our :core module. We can add this plugin by updating core/build.gradle:

plugins {
    id "org.jetbrains.kotlin.multiplatform"
    id 'org.jetbrains.kotlin.native.cocoapods'
}

// CocoaPods requires a podspec version be defined
version = "1.0"

kotlin {

    cocoapods {
        // Configure fields required by CocoaPods.
        summary = "https://packt.com"
        homepage = "Example of Kotlin multiplatform project"
    }
    
    ...
}

Adding this plugin will generate a new Gradle task called podspec. Before we run this new Gradle task, we need to add the following line to gradle.properties:

// gradle.properties
-Pkotlin.native.cocoapods.generate.wrapper=true

This line will help to prevent Xcode compatibility issues, and will ensure that the output of the task is correct. Running the podspec task will create a core.podspec file within our :core module. Using core.podspec, we can add our iosMain source set as a framework dependency of our iOS project using Cocoapods.

4. Now that we have our core/core.podspec file, we need to create a Podfile within our iosapp directory. This Podfile will allow us to include our shared Kotlin code as a native framework. For this basic example, our Podfile should look something like this:

target 'iosapp' do
# Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for iosmultiplatform
  pod 'core', :path => '../core'
end

There are three key things to note within this Podfile:

• The target 'iosapp' do should refer to whatever the name of our Xcode project is. In this case, it refers to a project called iosapp.
• The use_frameworks! declaration is required to allow us to build our Kotlin framework when the Xcode project is built.
• When defining the pod, the name and path of the pod should match what is defined within core/core.podspec.

Once the Podfile is defined, navigate to the iosapp directory and run pod install from the command line. Once this is complete, you should be able to build your Xcode project and consume the shared Kotlin framework.

To demonstrate the consumption of the shared framework, we can update the default ViewController.swift file to display Platform.name on the screen. The following code snippet demonstrates this:

// ViewController.swift
import UIKit
import core

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let label = UILabel(frame: CGRect(x: 0, y: 0, 
                            width: 300, height: 21))
        label.center = CGPoint(x: 160, y: 285)
        label.textAlignment = .center
        label.font = label.font.withSize(25)
        label.text = Platform.init().name
        view.addSubview(label)
    }

}

All that is required to use the shared Kotlin code is a build of the Xcode project to generate the framework. Then, we simply import the framework using import core, and we are free to use our Platform type.

Now that our iOS project is set up, let's examine how to set up a simple HTML page that uses the shared Kotlin code.