Live Preview

Introduçã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.

Requisitos

Para usar o Live Preview você deve:

• Usar o Beagle SDK em seu BFF ;
• Instalar o BeaglePreview plugin;

Configuração do BFF

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.

Instalação do plugin IntelliJ

Para instalar o BeaglePreview, veja o Live Preview plugin para IntelliJ e clique na opção instalar na IDE.

Uso do Live Preview

Passo 1: Configurar o Backend

Os passos a seguir nos permitirão visualizar uma tela definida no backend usando o Live Preview:

1. Vamos criar uma tela declarativa para teste. O código mais adiante trará uma tela bem simples como exemplo.
2. Iremos criar uma função que retorna a tela a ser visualizada pelo plugin.
3. Por fim, vamos anotar essa função com @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:

• Perceba que a tela em si está definida na classe ScreenBeagleBuilder.
• A função 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.

Passo 2: Configurar o frontend iOS e Android

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.

• Cliente Android
• Cliente iOS

// 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"
}

...
    <application>
        ...
        <activity
            android:exported="true"
            android:name="br.com.zup.beagle.android.preview.PreviewActivity"
            android:theme="@style/AppTheme.NoToolbar"/>
    </application>
</manifest>

startActivity(PreviewActivity.newIntent(this))

adb shell am start -n applicationpackagename/br.com.zup.beagle.android.preview.PreviewActivity

startActivity(
    PreviewActivity
        .newIntent(
            this,
            endpoint = "http://seuIP:9721"
    )
)

...
pod 'Beagle/Preview'
...

$ pod install

import Beagle

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        BeaglePreview.present(in: self)
    }

}

Limitações

Durante o uso do Live Preview, existem dois pontos importantes de ter em mente:

1. O cliente do Live Preview pode renderizar qualquer alteração usando os elementos disponíveis quando o recurso foi iniciado. Os elementos personalizados que forem adicionados posteriormente requerem uma reconstrução e reinicialização do cliente.
2. A anotação @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(":)")

Feedback

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.