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 .
O Live Preview é um recurso de visualização que auxilia no desenvolvimento de layouts
. Ele permite que as telas em desenvolvimento sejam renderizadas sem a necessidade de subir seu servidor backend para as alterações de layout feitas, reduzindo, assim, o tempo de desenvolvimento de uma tela.
Em outras palavras, o Live Preview dá a opção de editar um código que define a tela e, assim, o desenvolvedor pode utilizar o plugin para que as atualizações sejam comunicadas ao cliente e ele as renderize.
Desta forma, é possível visualizar as mudanças sem precisar subir um servidor backend.
WebSocket
utilizando a porta: 9721
Para usar o Live Preview
você deve:
BeaglePreview
plugin;Você precisa que seu BFF esteja configurado com o Beagle para utilizar o Live Preview. Caso ainda não o tenha, faça o download de um projeto inicial pronto. Outra possibilidade que você pode fazer, é o nosso tutorial de como implementar um backend com o Beagle configurado.
Para instalar o BeaglePreview
, veja o Live Preview plugin para IntelliJ e clique na opção instalar na IDE.
Os passos a seguir nos permitirão visualizar uma tela definida no backend
usando o Live Preview:
@BeaglePreview
.Feito isso, o Live Preview já será capaz de receber a tela em desenvolvimento a ser renderizada.
Alguns pontos interessantes de se notar do exemplo abaixo:
ScreenBeagleBuilder.
buildPreview
está anotada com @BeaglePreview
, com isso o plugin consegue utilizar ela para renderizar a tela.@BeaglePreview
fun buildPreview() = ScreenBeagleBuilder()
class ScreenBeagleBuilder: ScreenBuilder {
override fun build() = Screen(
child = Container(
children = listOf(
Text("Live Preview!!!")
)
)
)
}
Se sua função for reconhecida pelo plugin, o símbolo do Beagle aparecerá como um botão à esquerda da função. Clicando neste botão, o BeaglePreview
faz um push do layout para o cliente (aplicação frontend), permitindo que ele atualize seu layout instantaneamente.
Veja como no exemplo abaixo:
Depois de acionar o plugin para alguma função, basta você salvar as modificações realizadas no seu layout para que o Live Preview atualize a tela sendo renderizada pelo frontend.
O Live Preview faz isso ao compilar seu código modificado e verificar se existe alguma alteração a ser feita. Se for o caso, ele faz o push de seu novo layout para o cliente.
Uma vez configurado o seu backend, o próximo passo é configurar o emulador no frontend da sua aplicação com um projeto Beagle Android ou Beagle iOS.
Para realizar a instalação, seu arquivo de gradle
deve conter o fragmento abaixo:
A versão atual do Beagle:
// Add in your plugins
apply plugin: 'kotlin-kapt'
// Add in your app level dependency
ext.beagle_version = "${beagle_version}"
dependencies {
implementation "br.com.zup.beagle:android:$beagle_version"
kapt "br.com.zup.beagle:android-processor:$beagle_version"
debugImplementation "br.com.zup.beagle:android-preview:$beagle_version"
}
Em ext.beagle_version = "${beagle_version}"
, insira a versão de release do Beagle no lugar de ${beagle.version}
. Ou seja, coloque a versão do Beagle destacada em azul da badge acima, mas sem o caracter v que antecede os números de versão.
Por exemplo:undefined-ext.beagle.version = "0.2.8"
Feito isso, você pode atualizar suas dependências.
Antes de tudo, é necessário declarar uma PreviewActivity
no manifesto da aplicação para mostrar a pré-visualização:
Aqui não é necessário criar uma Activity de fato, pois ela já está criada internamente no Beagle. Você deve somente referência-la no manifesto indicando que ela faz parte do hall de Activities acessíveis nessa aplicação
Copie e cole a Activity abaixo em seu AndroidManifest
:
...
<application>
...
<activity
android:exported="true"
android:name="br.com.zup.beagle.android.preview.PreviewActivity"
android:theme="@style/AppTheme.NoToolbar"/>
</application>
</manifest>
Assim como oBeagleActivity
, você deve informar na declaração do PreviewActivity
que o tema que não tem ActionBar,
pois o Beagle já coordena esse componente.
Outro ponto importante é que você precisa habilitar a flag exportada que poderá começar via ADB
Após realizar estas configurações, é só começar o plugin no IntelliJ clicando no simbolo do Beagle ao lado da função que anota @BeaglePreview
e abrir o PreviewActivity
para receber as atualizações do enviadas pelo BFF
para renderizá-los automaticamente.
PreviewActivity
via intent
, basta fazer a chamada com intent
abaixo para visualizar a tela no emulador:startActivity(PreviewActivity.newIntent(this))
No entanto, se você preferir começá-la por meio por meio da ADB, é só chamar o método:
adb shell am start -n applicationpackagename/br.com.zup.beagle.android.preview.PreviewActivity
Para mais informações sobre o seu pacote, acesse seu pacote de atributo no seu arquivo AndroidManifest
Você também pode visualizar a tela que esta criando utilizando um device
Android. Para isso é necessário informar o IP
da sua rede no intent
que chama tela de Live Preview.
A Activity de Live Preview se conecta a tela no Backend
via uma conexão websocket
do client
(emulador ou dispositivo físico) utilizando o BFF
através do plugin BeaglePreview
. Dessa forma, o client
precisa saber qual IP
deve utilizar para estabelecer a conexão.
PreviewActivity
via device
, basta fazer a chamada com o intent
abaixo para visualizar a tela no dispositivo:startActivity(
PreviewActivity
.newIntent(
this,
endpoint = "http://seuIP:9721"
)
)
Para realizar a instalação, é necessário primeiro já ter seguido os passos de instalação do Beagle para iOS. Assim os passos seguintes variam de acordo com o método utilizado.
Adicione a dependência do LivePreview no seu arquivo Podfile:
...
pod 'Beagle/Preview'
...
Depois disso, você pode instalar essa nova dependência:
$ pod install
Junto com o Beagle.framework
gerado, haverá também o BeaglePreview.framework
. Basta então adicioná-lo como mais uma dependência no seu projeto.
Depois de instalado, é necessário agora apresentar o UIViewController
do BeaglePreview utilizando o seguinte código BeaglePreview.present(in:self).
Uma vez que você fizer isso, ele irá se conectar ao plugin e começar a escutar as mensagens recebidas de mudança de layout.
Abaixo, você encontra um exemplo hipotético de como fazer essa inicialização:
import Beagle
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
BeaglePreview.present(in: self)
}
}
Durante o uso do Live Preview, existem dois pontos importantes de ter em mente:
@BeaglePreview
funciona com métodos públicos sem parâmetros, fora de qualquer classe ou em uma classe pública e que possui um construtor sem parâmetros, permitindo que ele retorne um widget. Veja como nos trechos abaixo:class UnsupportedConstructor(thing: Any) {
@BeaglePreview
fun preview() = Text(":(")
}
class SupportedPrimaryConstructor {
@BeaglePreview
fun preview() = Text(":)")
}
class SupportedBySecondaryConstructor(thing: Any) {
constructor() : this("solved")
@BeaglePreview
fun preview() = Text(":)")
}
class MethodSupport {
@BeaglePreview
fun supportedMethod() = Text(":)")
@BeaglePreview
fun unsupportedMethod(thing: Any) = Text(":(")
}
@BeaglePreview
fun unsupportedFunction(thing: Any) = Text(":(")
@BeaglePreview
fun supportedFunction() = Text(":)")
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.