Beagle v1.6 não é mais mantida ativamente. A versão documentada que você está visualizando pode conter funcionalidades depreciadas. Para obter as funcionalidades mais recentes, consulte a nossa última versão .
É possível que alguns componentes de uma tela que sejam exibidos via server-driven (tela nativa) recebam somente uma seção da página , ou mesmo um único componente do servidor BFF.
No exemplo abaixo, vamos exibir um botão server-driven em uma tela nativa. O resultado que deve aparecer na sua aplicação é esse:
Para que essa configuração funcione corretamente, você precisa de:
Neste exemplo, criaremos um botão como componente server-driven para que possamos exibí-lo em uma tela nativa.
Para isso, siga os passos a seguir:
SingleComponentBuilder
. Essa será a classe que vai construir o seu componente (objeto) server-driven.import br.com.zup.beagle.widget.action.Alert
import br.com.zup.beagle.widget.ui.Button
class SingleComponentBuilder() {
fun createButton(): Button {
return Button(
"I'm a server-based button",
onPress = listOf(
Alert(
"Server-driven Button",
"I'm a server-based button",
labelOk = "OoooK"
)
)
)
}
}
"Alert"
, que já está configurada no código acima.Depois que você criou o componente, será preciso atualizar algumas classes. Veja como fazer essa configuração de acordo com cada uma delas.
O Service
é a classe responsável por configurar o serviço que usaremos, que pode ser de vários tipos. No caso desse exemplo, só será listado o que está sendo configurando.
Comece abrindo a classe ScreenBeagleService.kt
(nome escolhido para o tutorial de configuração do BFF
, mas você pode renomeá-la se quiser).
Feito isso, copie a linha abaixo e cole dentro da classe ScreenBeagleService
:
fun createServerDrivenComponent() = SingleComponentBuilder().createButton()
import com.example.bff.builder.SingleComponentBuilder
import org.springframework.stereotype.Service
@Service
class ScreenBeagleService {
fun createServerDrivenComponent() = SingleComponentBuilder().createButton()
}
Se a configuração acima funcionar, você atualizará o controller e o componente e eles estarão prontos para serem enviados ao frontend, caso haja uma requisição.
Agora, na classe controller, você deve chamar o serviço que acabamos de configurar e definir a URL que será o endpoint do componente criado.
Para isso, siga os passos:
ScreenController
. Esse nome foi dado a essa classe no tutorial, ela que é responsável por expor os componentes via API REST.@GetMapping()
e listar o endpoint (Path relativo da URL)
que identifica esse componente.Veja como deve ficar a configuração:
@RestController
class ScreenController(
private val screenBeagleService: BeagleService
) {
@GetMapping("/serverDrivenComponent")
fun getServerDrivenComponent() = screenBeagleService.createServerDrivenComponent()
}
Agora que o componente esta criado e configurado, você deve testar o endpoint e verificar a resposta JSON. Para isso, realize essas ações:
Você deve receber o JSON abaixo:
{
"_beagleComponent_" : "beagle:button",
"text" : "I'm a server-based button",
"onPress" : [ {
"_beagleAction_" : "beagle:alert",
"title" : "Server-driven Button",
"message" : "I'm a server-based button",
"labelOk" : "OoooK"
} ]
}
Button(
"I'm a server-based button",
onPress = listOf(
Alert(
"Server-driven Button",
"I'm a server-based button",
labelOk = "OoooK"
)
)
)
Depois dos dois passos anteriores, o seu componente está pronto. Agora, você só precisa exibi-lo em uma tela nativa.
Para essa configuração, siga as orientações específicas para cada plataforma:
Você deve utilizar o frame layout para “receber” o componente do BFF e, assim, exibi-lo em uma tela Android nativa.
Para isso, basta seguir esses passos:
.XML
abaixo que representa uma tela nativa com um título e um frame layout. Nesse exemplo definimos essa pagina como nossa MainActivity
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="Sou componente Nativo!"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:id="@+id/fr_server_driven"
android:layout_width="match_parent"
android:layout_height="40dp"
app:layout_constraintTop_toBottomOf="@id/tv_title"
android:layout_marginTop="40dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Após configurar o frame layout, é preciso informar ao Beagle qual componente será exibido. Para isso, utilize a função loadView
como listado no exemplo a seguir.
O método loadView
é responsável carregar seu conteúdo beagle dentro de sua view.
A estrutura do loadView é:
Atributo | Tipo | Obrigatório | Definição |
---|---|---|---|
activity | AppCompatActivity/Fragment | ✓ | Define a activity ou fragment que estamos usando o loadview |
screenRequest | ScreenRequest | ✓ | Define os parâmetros para a chamada da tela remota |
listener | OnServerStateChanged = (serverState: ServerDrivenState) -> Unit | Define o o listener que configura os callbacks para os estados da tela |
Veja como fazer isso:
.loadView
a partir da variável frameLayout
val frameLayout = findViewById<FrameLayout>(R.id.fr_server_driven)
frameLayout.loadView(this, ScreenRequest("/serverDrivenComponent"))
E pronto: basta iniciar sua aplicação e você verá a tela a seguir!
Clique no botão e perceba que a função nesse componente está implementada e funcional, ou seja, o Beagle exibe todos os componentes como se fossem nativos.
Você deve utilizar uma BeagleView
para “colocar” esse componente do BFF e, assim, exibí-lo em uma tela iOS nativa.
Veja mais sobre o que é, como funciona e como usar a BeagleView
aqui!
UILabel
.UILabel
e para BeagleView
como no código abaixo:class NativeViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
setupBeagleViewRemote()
setupDescriptionText()
}
private lazy var beagleViewRemote = BeagleView(
.remote(.init(url: "http://localhost:8080/serverDrivenComponent"))
)
private lazy var descriptionText: UILabel = {
let label = UILabel()
label.text = "Sou um componente nativo"
label.numberOfLines = 0
label.textAlignment = .center
label.font = .systemFont(ofSize: 25, weight: .semibold)
return label
}()
private func setupDescriptionText() {
view.addSubview(descriptionText)
descriptionText.translatesAutoresizingMaskIntoConstraints = false
descriptionText.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
descriptionText.topAnchor.constraint(equalTo: view.topAnchor, constant: 150).isActive = true
}
private func setupBeagleViewRemote() {
view.addSubview(beagleViewRemote)
beagleViewRemote.translatesAutoresizingMaskIntoConstraints = false
beagleViewRemote.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
beagleViewRemote.topAnchor.constraint(equalTo: descriptionText.bottomAnchor, constant: 50).isActive = true
}
Ao final do processo, você poderá “chamar” a tela nativa e a imagem abaixo irá aparecer. Lembrando que, para esse exemplo, foram criadas: uma tela composta de uma UILabel
e uma BeagleView
, onde fica o componente server-driven.
Se você ainda não configurou a biblioteca em seu projeto, veja aqui como fazer isso.
Você deve utilizar o Remote View, fornecido pela biblioteca do Beagle, para criar telas híbridas com alguns componentes server driven na web.
Veja a seguir como funciona para cada framework:
React
No React, você só precisa criar uma função que retorna dois componentes. Um deles é o BeagleRemoteView
com o caminho para carregar o componente server-driven.
import React, { FC } from "react";
import { LoadParams } from "@zup-it/beagle-web";
import { BeagleProvider, BeagleRemoteView } from "@zup-it/beagle-react";
import BeagleService from "../../beagle/beagle.service";
import NativeComponent from "../NativeComponent";
const params: LoadParams = {
path: "/mypath",
};
const Main = () => {
return (
<>
<NativeComponent text="Sou um componente nativo!"></NativeComponent>
<BeagleProvider value={BeagleService}>
<BeagleRemoteView {...params} />
</BeagleProvider>
</>
);
};
export default Main;
Angular
No Angular, basta criar um componente nativo normalmente e adicionar o beagle-remote-view
junto ao template no local que você quer que os itens server-driven sejam renderizados.
<app-native-component text="Sou um componente nativo"></app-native-component>
<beagle-remote-view [loadParams]="loadParams"></beagle-remote-view>
No caso do Angular, não é possível usar o componente BeagleRemoteView caso ele seja carregado pela biblioteca de outra forma server-driven porque isso causa uma dependência circular e quebra a aplicação.
Lembre-se de rodar seu projeto Angular usando um dos comandos:
yarn run serve ou npx run serve
A sua tela híbrida com elementos nativos e server driven está pronta
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.