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 .
In this tutorial, the Backend will be implemented with Beagle so that it can respond to requests from your server-driven application, be it on Android, iOS or WEB.
To create a Beagle project for backend, it is necessary:
The first step to configure your backend is to access Spring website.
It will create aMaven
project that will help your project’s configuration.
Spring configuration
Maven
as your project option;kotlin
as a language;generate
and it will download your project as.zip;Follow the steps below to import the project you have created. First, open intellij and click on Import project
.
Spring project
and click ok
.Maven
and then, click finish.As a starting point, follow this step by step to install the backend.
The second step is to create some packages to better organize the project. They will be named: builder
,service
and controller
src> main> kotlin
until you find the name of your project.new> package
builder
and press enter.service
and controller
The first class that we will create is the Builder. It is in this file that the Server-Driven screen must be structured:
new> Kotlin File / Class
and name it ScreenBeagleBuilder
ScreenBuilder
(which is an internal Beagle class).build method
and this is where the Server-Driven screen will be implemented.import br.com.zup.beagle.core.Style
import br.com.zup.beagle.ext.applyStyle
import br.com.zup.beagle.ext.unitReal
import br.com.zup.beagle.widget.Widget
import br.com.zup.beagle.widget.action.Alert
import br.com.zup.beagle.widget.core.AlignSelf
import br.com.zup.beagle.widget.core.EdgeValue
import br.com.zup.beagle.widget.core.Flex
import br.com.zup.beagle.widget.core.TextAlignment
import br.com.zup.beagle.widget.layout.Container
import br.com.zup.beagle.widget.layout.Screen
import br.com.zup.beagle.widget.layout.ScreenBuilder
import br.com.zup.beagle.widget.ui.ImagePath
import br.com.zup.beagle.widget.ui.Text
object ScreenBeagleBuilder : ScreenBuilder {
override fun build() = Screen(
child = Container(
children = listOf(
Text(
text = "Hello Beagle!"
).applyStyle(
Style(margin = EdgeValue(top = 16.unitReal()),
flex = Flex(alignSelf = AlignSelf.CENTER)
)
),
Text(
text = "Beagle is a cross-platform framework which provides usage of the " +
"Server-Driven UI concept, natively in iOS, Android and Web applications. " +
"By using Beagle, your team could easily change application's layout and" +
" data by just changing backend code."
).applyStyle(
Style(margin = EdgeValue(
left = 16.unitReal(),
right = 16.unitReal(),
top = 20.unitReal()
)
)
)
)
)
)
}
The next class we will create is Service
:
New> Kotlin File / Class.
ScreenBeagleService
. This class must be annotated with @Service
, which is a Spring annotationcreateScreenBeagle
that returns the ScreenBeagleBuilder
class:import com.example.bff.builder.ScreenBeagleBuilder
import org.springframework.stereotype.Service
@Service
class ScreenBeagleService {
fun createScreenBeagle() = ScreenBeagleBuilder
}
And then the Controller
class.
ScreenController
. It must be annotated with @RestController
to expose its components through the Rest API.ScreenBeagleService
through his main builder, so Spring can inject it for you.import com.example.bff.service.ScreenBeagleService
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RestController
@RestController
class ScreenController(
private val screenBeagleService: ScreenBeagleService
) {
@GetMapping("/screen")
fun getFirstScreen() = screenBeagleService.createScreenBeagle()
}
@RestController
annotation defines this class as a controller classscreenBeagleService
parameter must have its type defined as: ScreenBeagleService
getScreen
method needs to annotate @ GetMapping ("/ screen")
to create the "/ screen"
path in the application’s URL and receive the result of the createScreenBeagle
functionThe backend is ready to serve as the BFF of your Server-Driven application.
Now it’s time to start your application, follow the next steps:
Click on the green triangle named run
, or press and hold SHIFT + F10 to run your back-end application.
Your screen should look like this:
Open your browser and type: localhost: 8080 / screen
A JSON structure must appear on your screen similar to the structure below:
{
"_beagleComponent_" : "beagle:screenComponent",
"child" : {
"_beagleComponent_" : "beagle:container",
"children" : [ {
"_beagleComponent_" : "beagle:text",
"text" : "Hello Beagle!",
"style" : {
"margin" : {
"top" : {
"value" : 16.0,
"type" : "REAL"
}
},
"flex" : {
"alignSelf" : "CENTER"
}
}
}, {
"_beagleComponent_" : "beagle:text",
"text" : "Beagle is a cross-platform framework which provides usage of the Server-Driven UI concept, natively in iOS, Android and Web applications. By using Beagle, your team could easily change application's layout and data by just changing backend code.",
"style" : {
"margin" : {
"left" : {
"value" : 16.0,
"type" : "REAL"
},
"top" : {
"value" : 20.0,
"type" : "REAL"
},
"right" : {
"value" : 16.0,
"type" : "REAL"
}
}
}
} ]
}
}
If that is not the answer you had, it is necessary to check the configuration process again. Go back to the previous steps and start with the classes that have the biggest mistakes when configured for the first time.
Or, if you prefer, take the finished project from our repository and compare it with yours. You can access the repository here.
To learn more about configuring your frontend environment, see more at:
👉 Beagle implementation tutorial for Android.
👉Beagle implementation tutorial for iOS.
👉Beagle implementation tutorial for Web.
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.