Here, you’ll find a tutorial to start an iOS project with Beagle.

Starting an iOS project

To create an iOS project for Beagle, you will need a Macbook with Xcode installed. In case you don’t have it yet, download Xcode on the Apple Store.

Before you start, first it’s necessary to create a project on Xcode. To do so, your just have to open the program and name a project. For this example, we’ll call as Beagle Sample.

After you created the project, we’ll need to add the dependencies and, for that, we’ll use CocoaPods' manager.

Step 1: Configure Cocoa Pods

You’ll use the terminal to install CocoaPods, so open your terminal and type sudo gem install cocoapods

sudo gem install cocoapods

To configure it, go to your folder through the terminal and type: pod init

pod init

Then, open your project’s folder using the open command.

open .

Once you made it, you must choose the podfile file the same way as it’s shown in the image:

Open the file and add the following dependencies:

target 'Beagle Sample' do
     pod 'BeagleUI'        
     pod 'YogaKit', :git => 'https://github.com/ZupIT/YogaKit'

Open the terminal again and type the pod install command so your dependencies can be installed.

pod install

After the installation, you should open a file with a workspace. extension. For this example, we’ll name it asBeagle Sample.workspace

Step 2: Configure Beagle

Now that your project was created, you must make Beagle’s configuration. To do so, follow the steps below:

  1. Create a class called BeagleConfig .

This class will be responsible to contain part of Beagle’s initial configuration. You will implement a config static function on her to apply these configurations.

  1. On this function, create a constant called dependency that must be BeagleDependencies type.

You’ll attribute to this constant some project’s configurations like, for example, the list of basis URL that lists the JSON that will be used to build the server-driven screen. To configure this constant, use the example below:

import Beagle
import Foundation

class BeagleConfig {
    static func config() {
        let dependencies = BeagleDependencies()
        dependencies.urlBuilder = UrlBuilder(
            baseUrl: URL(string: "http://localhost")
        Beagle.dependencies = dependencies

Now, we’ll configure the SceneDelegate class so it can be used to initialize our application with Beagle from a screen through BFF:

  • Create a beagleScreen constant, that will receive the server-driven screen.
  • The init URL argument must contain the relative URL address that will be created on backend (BFF). For this example, we’ll call it “/screen”

Follow the example below:

let beagleScreen = Beagle.screen(.remote(.init(url: "/screen")))
window = UIWindow(frame: UIScreen.main.bounds)
window?.windowScene = windowScene
window?.rootViewController = beagleScreen

At the end of this process, the SceneDelegate class should be like this:

Step 3: Configure Xcode

Usually, the Xcode’s proprieties are configured so your application can be initialized through main.storyboard. Now that will be done by Beagle and, for this configuration works, we must change the proprieties deleting the references related to main.storyboard.

These references are in the main project file, on**Info tab**, and are organized like this:

The first stays in the session:
Custom iOS Target Properties >
Main storyboard file base name

The second stays in the session:
Application Scene Manifest>
Scene Configuration>
Application Session Role >
Item 0 (Default Configuration)>
Storyboard name

On the GIF below, you can see better how to remove these references:

Well done, now Beagle is configured for your iOS application! All you have to do is set up a backend to answer to your server-driven application requests.

Once you finished the configuration, start your application and you’ll have your first server-driven screen!
You will see this screen:

Defining styles on Beagle ios

Here, you’ll find a tutorial of how to configure a Design System for Beagle on iOS.

Last modified March 11, 2021: feat: section overview (#391) (2c91101e)