Cada plataforma tem sua forma própria para exibir uma tela server-driven no frontend usando o Beagle. Abaixo, listamos exemplos para cada uma delas.
Para exibir uma tela full server-driven
, você deve usar o método this.newServerDrivenIntent<BeagleActivity>()
onde o this
é a o contexto da sua tela atual.
Este método requer apenas o parâmetro ScreenRequest
Você deve seguir tal como o comando abaixo:
Certifique-se de listar a sua Beagle Activity assim como nomeada em seu AndroidManifest.
No exemplo abaixo a chamamos somente de <BeagleActivity>. Esse nome é você quem define ao criar sua BeagleActivity. Em nosso tutorial Criando um projeto do zero , chamamos ela de AppBeagleActivity
val intent = this.newServerDrivenIntent<BeagleActivity>(ScreenRequest("/screen"))
startActivity(intent)
Para testar o comando acima, o componente ScreenRequest
requer somente uma URL que traga o JSON com as informações da tela server-driven que você quer exibir.
Neste caso, siga estes passos:
"/screen"
. https://run.mocky.io/v3/73322be2-96bf-467b-b6dc-e3fff179852cval intent = this.newServerDrivenIntent<BeagleActivity>(ScreenRequest("https://run.mocky.io/v3/73322be2-96bf-467b-b6dc-e3fff179852c"))
startActivity(intent)
AScreenRequest
é uma classe interna do Beagle utilizada para solicitar qual tela você deseja exibir. Você listará apenas o atributo URL referente a página que deseja carregar vinda do BFF.
No entanto, esse elemento possui outros atributos, que podem ser utilizados na transição e entre telas. Para saber mais sobre essa classe, veja em Screen Request
Para renderizar uma tela server-driven, basta criar uma instância BeagleScreenViewController
do tipo remote
e fazer a inicialização com a URL do seu BFF, como no exemplo abaixo:
let beagleViewController = Beagle.screen(
.remote(
.init(url: "// URL AQUI")
)
)
Feito isso, basta apresentá-la onde preferir. Neste caso, você deve seguir como no comando de exemplo.
present(beagleViewController, animated: true, completion: nil)
A resposta do seu BFF deve ser um JSON que representa um componente visual definido localmente na aplicação.
Você também pode renderizar uma tela de exemplo. Para isso, basta passar esta mesma URL na inicialização da**BeagleScreenViewController
**.
Por fim, execute a aplicação e veja uma tela definida em uma URL remota renderizada na sua aplicação local.
Parabéns, você conseguiu exibir uma tela full server-driven 🎉
Desta forma, será possível criar telas com conteúdo dinâmico, e controle no seu backend.
Para definir onde você quer mostrar uma tela server-driven no Angular, você deve usar o componente fornecido pela biblioteca <beagle-remote-view>
Este componente tem outros atributos que podem ser configurados. No entanto nessa implementação você utilizará somente o atributo path, descrito no exemplo abaixo.
Para mais detalhes sobre esse componente clique no link a seguir e verifique os detalhes do Remote View
No arquivo html do seu componente, adicione o remote view
.
<beagle-remote-view [loadParams]="loadParams"></beagle-remote-view>
Feito isso, acesse o controller do componente em que você adicionou o remote view e crie o loadParams
que é esperado pelo remote view.
loadParams: LoadParams;
constructor() {
this.loadParams = {
path: '/pathToScreen'
};
}
No campo path
, deve ficar o caminho para seu JSON que será associado com o baseUrl
definido em beagle.module.ts
.
Para definir uma tela server-driven no React, você precisa criar um serviço com uma configuração mínima, como no exemplo:
import { createBeagleUIService } from "@zup-it/beagle-react";
export default createBeagleUIService({
baseUrl: "",
components: {},
});
Feito isso, usamos dois componentes fornecidos pela biblioteca Beagle para definir onde a tela server-driven será renderizada:
BeagleProvider
BeagleRemoteView
...
import { BeagleProvider, BeagleRemoteView } from '@zup-it/beagle-react';
import BeagleService from './beagle/beagle-service';
function App() {
return (
<BeagleProvider value={BeagleService}>
<BeagleRemoteView path={'/pathToScreen'} />
</BeagleProvider>
);
}
export default App;
No campopath
, deve ficar o caminho para seu JSON que será associado com o baseUrl
definido em seu serviço.
Para renderizar qualquer componente do Beagle, é necessário informar um viewGroup
onde a view correspondente ao componente será renderizada, como um FrameLayout
dentro de uma Activity
, Fragment
ou DialogFragment
. Veja o exemplo abaixo:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"/>
Agora chame o método loadView()
a partir do frame_layout
criado no xml
e passe a Activity
e o JSON
como parâmetros.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
frame_layout.loadView(
activity = this,
screenJson = "JSON AQUI"
)
}
}
O método loadView()
também pode receber como parâmetro um Fragment
no lugar da Activity
e dois outros opcionais, seguindo o exemplo abaixo:
loadView(
fragment = seuFragment,
screenJson = "JSON AQUI",
screenId = "seu identificador",
shouldResetContext = seuBoolean,
)
screenId
: representa um identificador de tela para criar o analytics quando ela é criada. O valor padrão é vazio.
shouldResetContext
: quando true, isso remove no momento da chamada da função loadView
todos os dados de contexto vinculados ao proprietário do ciclo de vida. O valor padrão é false.
Para renderizar uma tela de um JSON, basta criar uma instância BeagleScreenViewController
do tipo declarativeText
e fazer a inicialização com o JSON, como no exemplo abaixo:
let beagleViewController = Beagle.screen(
.declarativeText(
.init(text: "// JSON HERE")
)
)
Feito isso, basta apresentá-la onde preferir. Neste caso, você deve seguir como no comando de exemplo.
present(beagleViewController, animated: true, completion: nil)
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.