Topics covered
Requirements
We’re using Xcode 11+ on this example, so if you don’t have it, please download it from AppStore.
Step 1: Open your Xcode and click on File -> New -> Project.
Step 2: Select a single view application known as just App and click on next.
Step 3: Name your project, select the interface as Storyboard, language Swift and go next.
Step 4: Inform where you want to place your project and confirm.
You can install Beagle using SPM (Swift Package Manager), Cocoapods or Carthage. Just pick one and follow the instructions bellow:
The following tutorial is for Beagle iOS version: v2.1
You only need Xcode here. More on Swift Package Manager: https://swift.org/package-manager
Step 1: Click on File -> Swift Packages -> Add Package Dependency.
Step 2: Enter Beagle’s package repository url: https://github.com/ZupIT/beagle.git
and click on next.
Step 3: Confirm Beagle’s version, click on next and let Xcode resolve the package.
Step 4: On the final dialog, update Beagle’s Add to Target column with the target that should import Beagle
.
You’ve successfully installed Beagle on your project using SPM!
Step 1: Add Beagle to dependencies choosing preferably the latest version available, like 1.8.0 for instance.
dependencies: [
.package(name: "Beagle", url: "https://github.com/ZupIT/beagle.git", from: "${beagle.version}"}}),
]
Step 2: Add Beagle as a dependency of your application target:
targets: [
.target(name: "MyApp", dependencies: ["Beagle"], path: "Sources")
]
Now Beagle is a part of your package.swift.
You’ll need Cocoapods installed and Terminal.
Step 1: Navigate to your project’s root folder and run the command pod init
that will create a Podfile.
Step 2: Edit your Podfile, adding Beagle’s pod name, like the code below:
target 'MyApp' do
pod 'Beagle'
end
Step 3: Run the command pod install
and the dependencies will be resolved in a Workspace.
Step 4: Now, open the Workspace created for you. From now you’ll use only the Workspace.
You’ve successfully installed Beagle on your project using Cocoapods!
To do this, you’ll need Carthage installed and a Terminal.
Step 1: Navigate to your project’s root folder and run touch Cartfile
to create a Cartfile for us.
Step 2: Open the Cartfile and edit it with our repository link like this github "ZupIT/beagle" ~> ${beagle.version}
, choosing preferably the Beagle’s latest version available.
Step 3: Now, check your Xcode version and follow the instructions below:
For Xcode 12+, you need Carthage v0.37+. Then you can run the command carthage udpate --use-xcframeworks
. This command will create xcframeworks.
For Xcode below 12, just run Carthage update
and it will create xcframeworks.
Step 4: Now, go to: your project’s root folder -> Carthage -> Build. Pick up Beagle.xcframework folder and drag into Xcode -> yourProject.xcodeproj -> Targets -> yourProject -> General -> Frameworks, Libraries, and Embedded Content.
Step 5: To run Beagle you will also need YogaKit. You can install it using SPM (Swift Package Manager).
https://github.com/ZupIT/yoga.git
;You’ve successfully installed Beagle on your project using Carthage!
After Beagle’s installation, you need to configure it to run on our application. For that, follow the instructions below:
Step 1: Create a BeagleConfig class:
This class contains part of Beagle’s initial configuration. You have to implement a config static function in it to apply these configurations.
import Beagle
import Foundation
class BeagleConfig {
static func config() {}
}
Step 2: On this function, create a constant called dependencies
that must be a BeagleDependencies
.
You’ll attribute to this constant some project’s configurations. An example of this configuration is the base URL that will be combined with a relative URL to bring the JSON that will load your server-driven screen.
To configure it, use the example below:
import Beagle
import Foundation
class BeagleConfig {
static func config() {
let dependencies = BeagleDependencies()
dependencies.urlBuilder = UrlBuilder(
baseUrl: URL(string: "http://localhost")
)
BeagleConfigurator.setup(dependencies: dependencies)
}
}
Step 3: Now, you will configure the SceneDelegate class so it can be used to initialize your application with Beagle from a screen through BFF:
Inside your SceneDelegate.swift in the function scene
, call the BeagleConfig.config()
function;
Name the guard let
that Xcode already created for you as windowScene
;
Initialize the variable window
created outside the function scope, using windowScene
;
Make the window.rootViewController
the screen from BFF that you want to display;
Now, just call the makeKeyAndVisible()
function from the variable window
.
Your code should be like this:
import UIKit
import Beagle
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
var window: UIWindow?
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
BeagleConfig.config()
guard let windowScene = (scene as? UIWindowScene) else { return }
window = UIWindow(windowScene: windowScene)
window?.rootViewController = BeagleScreenViewController(.remote(.init(url: "/yourScreenRelativeURL")))
window?.makeKeyAndVisible()
}
}
You can implement these layers using these tutorials:
If you want to skip these configurations, use Beagle’s support library: Beagle Scaffold, that contains default implementations of Network and Log layers.
However, you should remember that it is important to customize your Network layer for security matters.
You can do other customizations, see them below:
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.