Depois que você terminar a instalação, é preciso configurar o Beagle para o uso no framework do React. Para isso, basta realizar os seguintes passos:
Execute um dos comandos abaixo para gerar os arquivos que serão usados pela biblioteca Beagle. É possível executar o comando de acordo com seu gerenciador de pacotes:
**yarn
yarn beagle
**npm
beagle
Feito isso, o Beagle irá retornar uma pergunta.
Do you want to replace “app.tsx” content with the Beagle configuration (y or n)?
Você deseja substituir o conteúdo “app.tsx” pela configuração do Beagle?
Caso digite “y” a app.tsx do projeto será substituída por outra com a configuração do Beagle, caso digite “n” o arquivo não vai ser substituído e a configuração terá que ser feita manualmente.
Ao final deste processo, será gerado um novo arquivo em seu projeto:
Para uma melhor experiencia o JSON deve ser criado por meio de um BFF, como configurar um BFF você encontra aqui, neste exemplo usaremos o JSON que está disponibilizado na URL http://usebeagle.io.s3-website-sa-east-1.amazonaws.com/start/welcome:
{
"_beagleComponent_": "beagle:container",
"children": [
{
"_beagleComponent_":"beagle:text",
"text":"Hello Beagle"
},
{
"_beagleComponent_":"beagle:text",
"style":{
"padding":{
"top":{
"value":10,
"type": "REAL"
}
}
},
"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"
}
]
}
A biblioteca Beagle já vem com diversos componentes pré-definidos e prontos para serem usados em seu projeto.
O código acima cria um JSON com dois desses componentes: container e text.
Depois de criado o seu JSON, a sua estrutura deve estar parecida com a imagem a seguir:
Abra agora o arquivo criado beagle-service.ts
e verifique se o código está igual ao abaixo:
import { createBeagleUIService } from '@zup-it/beagle-react'
export default createBeagleUIService({
baseUrl: "http://usebeagle.io.s3-website-sa-east-1.amazonaws.com/start/",
components: {}
})
Neste ponto da configuração podemos definir a baseUrl do servidor externo do Beagle.
Agora você precisa especificar, dentro da aplicação, o local em que os componentes serão renderizados. Para isso, a biblioteca do Beagle fornece o BeagleRemoteView e o BeagleProvider. Abra o arquivo do componente que você deseja renderizar o layout e altere para ficar como o exemplo a seguir, no route adicione o caminho relativo ao JSON remoto: /welcome.
import React from 'react';
import './App.css';
import { BeagleProvider, BeagleRemoteView } from '@zup-it/beagle-react';
import BeagleService from './beagle/beagle-service';
function App() {
return (
<BeagleProvider value={BeagleService}>
<BeagleRemoteView route={'/welcome'} />
</BeagleProvider>
);
}
export default App;
<BeagleProvider>
: Responsável por prover para nossa aplicação o beagle-service
criado no passo anterior contendo as configurações iniciais. Este é especificado na propriedade value
;<BeagleRemoteView>
: Responsável por renderizar o layout definido pelo JSON especificado pela propriedade route
.baseUrl
definido no arquivo beagle-service.ts
route
no BeagleRemoteView
só é válido para as versões 1.3 e superior. Para versões anteriores, por favor, use path.
Para testarmos se a nossa configuração funcionou, você precisa executar um dos comandos abaixo para inicializar a aplicação:
yarn start
npm run start
Depois de finalizar o comando, acesse: localhost:3000. Você deverá ver a tela a seguir:
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.