IOS

Nesta seção, você encontra um passo a passo para construir e exibir sua primeira tela utilizando Beagle.

Como exibir uma tela “Hello Beagle!”

Depois de ter o Beagle instalado em seu projeto, vamos te mostrar como renderizar uma tela e exibir seu primeiro “Hello Beagle!".

Atualmente, existem dois tipos de abordagens para a renderização de telas com o Beagle: remota e declarativa.

Renderização Remota

Principal abordagem usada no Beagle por ser fundamentada no conceito de server-driven UI. Ela permite que você construa layouts dinamicamente, consumindo as informações fornecidas por um BFF, por meio de uma URL remota.

Renderização Declarativa

Apesar de ser uma alternativa não pautada em server-driven UI, é uma forma de renderização que permite você declarar localmente componentes pela linguagem Swift. Com isso, você pode utilizar um componente local diretamente ou passando um JSON que o representa, simulando assim a resposta de um BFF.

Para este exemplo, você irá renderizar uma tela de forma declarativa, ou seja, tudo será feito localmente. Desta forma, você irá conhecer um pouco do Beagle e, em poucos passos, testar se sua instalação funcionou.

Passo 1: Crie uma classe (MyBeagleScreen)

Crie uma classe e a nomeie como preferir. Aqui, iremos chamá-la de MyBeagleScreen.

A classe irá conter apenas um método, responsável por construir uma Screen.

import Beagle

class MyBeagleScreen {
    static func make() -> Screen {
        return Screen(
            child: Container(
                children: [
                    Text("Hello Beagle!")
                ]
            ).applyFlex(
                Flex(
                    justifyContent: .center,
                    alignItems: .center,
                    grow: 1
                )
            )
        )
    }
}

Passo 2: Instanciar o BeagleScreenViewController

Agora, para conseguir visualizar a sua primeira tela construída utilizando o Beagle, tudo que você precisa fazer é:

Instanciar uma BeagleScreenViewController do tipo declarative que receberá a**MyBeagleScreen**.

let beagleViewController = Beagle.screen(
    .declarative(
        MyBeagleScreen.make()
    )
)

Feito isso, basta apresentá-la onde preferir.

present(beagleViewController, animated: true, completion: nil)

Passo 3: Executar a aplicação

Por fim, execute a sua aplicação e, se tudo estiver certo, você deverá ver uma tela como esta:

Próximos passos

Nesta seção, você viu como criar sua primeira tela declarativa utilizando o Beagle, em sua forma mais simples, sem entrar no conceito de server-driven UI.

👉Para entender melhor como configurar o Beagle e utilizá-lo aplicando o conceito de server-driven UI, veja como criar um projeto iOS do zero.


Última modificação 01/03/2021: feat: iOS - Remove BeagleSchema module (0b2634f0)