Depois que você terminar a instalação, é preciso configurar o projeto Angular para utlizar o Beagle. 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 beagle init
npx beagle init
Feito isso, o Beagle irá retornar uma pergunta:
Would you like to use yarn or npm?(Você gostaria de usar yarn ou npm?)
Neste caso, digite a opção que irá utilizar como gerenciador. No nosso exemplo, usaremos o yarn
, logo digite yarn
e aperte enter.
Ao final deste processo, serão gerados dois novos arquivos em seu projeto:
Abra o arquivo app.module.ts
e, em seguida, importe o módulo Beagle que acabou de ser gerado import { Beagle } from './beagle.module';
e adicione dentro de imports
:
...
import { Beagle } from './beagle.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
Beagle
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Agora, você precisa criar um arquivo JSON que definirá os componentes que serão renderizados.
Para uma melhor experiência 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, abra o arquivo beagle.module.ts
gerado no passo anterior, na baseUrl insira o caminho do JSON remoto, usaremos o caminho: http://usebeagle.io.s3-website-sa-east-1.amazonaws.com/start/.
import { BeagleModule } from '@zup-it/beagle-angular'
// import all the components you wish to use with Beagle.
@BeagleModule({
baseUrl: 'http://usebeagle.io.s3-website-sa-east-1.amazonaws.com/start/',
module: {
path: './beagle-components.module',
name: 'BeagleComponentsModule',
},
components: {
// Associate every beagle component to your angular component.
},
})
export class Beagle {}
Pronto, a configuração está finalizada agora vamos aprender como renderizar os componentes mapeados no JSON.
Depois de criado o JSON, você precisa especificar, dentro da aplicação, o local em que os componentes serão renderizados. Para realizar essa ação, a biblioteca do Beagle fornece o componente <beagle-remote-view>
.
Abra o arquivo app.component.html
e substitua todo o conteúdo pelo código a seguir, no route adicione o caminho relativo ao JSON remoto: /welcome.
<beagle-remote-view route="/welcome"></beagle-remote-view>
route
no código acima diz qual a rota será carregada. A URL especificada aqui é relativa à baseUrl
declarada na configuração.
route
é válido apenas para a versão 1.3 ou superior. Para versões anteriores, route
deve ser usado. route
é um objeto e o valor equivalente ao desse exemplo seria{ path: '/welcome' }.
Para testarmos se a nossa configuração funcionou, você precisa rodar um dos comandos abaixo para inicializar a aplicação.
ng serve
porque ela será iniciada sem compilar os arquivos do Beagle. Para que o Beagle seja inicializado corretamente, é necessário utilizar um dos comandos abaixo de acordo com seu gerenciador de pacotes.Caso utilize npm:
npm run serve
Caso utilize yarn:
yarn serve
É importante deixar claro que o comando para reiniciar a aplicação é fundamental para que as alterações que você fez nos arquivos de configuração do Beagle funcionem.
Este processo também deve ser feito para qualquer alteração feita nas propriedades @Input()
de seus componentes mapeados. A equipe Beagle está constantemente desenvolvendo soluções para melhorar isso.
Depois de finalizado o comando acesse a aplicação em: http://localhost:4200
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.