Overview
Here, you’ll find a tutorial to start an iOS project with Beagle.
Beagle v1.6 is no longer actively maintained. The documented version you are viewing may contain deprecated functionality. For up-to-date documentation, see the latest version .
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.
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'
end
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
Now that your project was created, you must make Beagle’s configuration. To do so, follow the steps below:
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.
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:
beagleScreen
constant, that will receive the server-driven screen.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
window?.makeKeyAndVisible()
At the end of this process, the SceneDelegate
class should be like this:
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:
Here, you’ll find a tutorial to start an iOS project with Beagle.
Here, you’ll find a tutorial of how to configure a Design System for Beagle on iOS.
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.