Plugins do Beagle: como otimizar o desenvolvimento multiplataforma?

Quem é dev há mais tempo deve se lembrar de que a programação já vista como uma atividade resumida à tela de código e bloco de notas como apoio. Além disso, havia uma resistência às IDES (ou integrated development environment). Hoje, sabemos como essas ferramentas auxiliam em todo o processo de desenvolvimento, como é o caso dos Plugins do Beagle.

E é sobre estes plugins da nossa ferramenta open source de desenvolvimento cross-platform e seus benefícios na sua aplicação multiplataforma (web ou mobile nativos) que vamos discutir neste artigo.

Antes, um  breve contexto sobre o Beagle e seus plugins

De maneira geral, os plugins são recursos que, muitas vezes, adicionam dinamismo e padrões quando implementamos um novo código. Especialmente quando utilizamos alguma biblioteca, ou no nosso caso, um framework multiplataforma tão robusto quanto o Beagle.

Já conhece o nosso projeto? Se não, vou deixar aqui o link da nossa Documentação Ninja

Nele você encontrará com detalhes o que é o Beagle e o tanto de coisa legal que dá pra fazer. Mas retornando ao nosso papo…

Para quem não conhece, o Beagle é um framework open source de desenvolvimento cross-platform pautado no paradigma de implementação de Server-Driven UI

Dito isso, o objetivo é que o usuário crie telas e seus respectivos elementos (botões, textos, etc.), assim como seus fluxos, através de um backend. Todos esses elementos são, na prática, classes que possuem uma quantidade razoavelmente extensa de propriedades e métodos.  

E é diante desse cenário que surgem dois plugins: o Beagle SDK live preview e o Beagle Class Creator, que foram desenvolvidos para serem usados no INTELLIJ.

E o que esses plugins fazem?

Bem, vamos começar pelo Beagle SDK live preview e depois falaremos sobre o Beagle Class Creator. Cada um à sua maneira pode potencializar muito a sua rotina de desenvolvimento. Segue o fio! 😉

1- Beagle SDK live preview

O Beagle SDK live preview é um plugin que possibilita uma interface direta entre o código sendo desenvolvido e um emulador de tela que mostra, em tempo real, o efeito da implementação ou modificação. Em outras palavras, o plugin permite que, ao modificar o posicionamento de um item, a pessoa que está desenvolvendo consegue ver na hora o efeito da modificação que fez.

Por exemplo, a gif abaixo é uma página de teste do Beagle que contém um texto (título), um botão e um outro texto (descrição). Aqui adicionamos três outros botões e aí o nosso plugin faz a mágica… Ele envia a página novamente para o emulador (aqui do Android Studio) e atualiza a visualização. 

Vale lembrar que este reenvio de informações da página é condicionado a um comando CTRL+S que dispara o reenvio. Tudo isso apenas localmente, sem a necessidade de subir um backend.

Gif animado de um emulador Mobile Android do lado esquerdo e um bloco de código do lado direito que quando modificado adicionou 3 botões à tela emulada.

Como configurar o Beagle SDK live preview?

É muito simples configurar o plugin! Basta realizar os passos a seguir:

  1. No Backend, clicar em: 
    1. File > Settings, e procurar por Plugins.
    2. Selecionar o Beagle SDK live preview, instalar, reiniciar e IDE.
    3. A classe/tela que você quer ver precisa ser chamada por uma função e estar anotada com o @BeaglePreview e e no backend está ok.

  1. No Frontend (Android no nosso exemplo), basta:
    1. Adicionar uma dependência.
debugImplementation "br.com.zup.beagle:android-preview:$beagle_version"
  1. Adicionar uma “Activity” no Manifest.
<activity android:exported="true"
android:name="br.com.zup.beagle.android.preview.PreviewActivity"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"/> 
  1. Iniciar uma activity
startActivity(PreviewActivity.newIntent(this))

E pronto! Agora, as modificações que fizer enquanto estiver implementando a tela ficam mais facilmente visualizáveis, o que ajuda bastante durante o desenvolvimento! 

Se você quiser entender, com mais detalhes, a implementação desse plugin do Beagle, é só conferir a nossa documentação na seção Plugin Live Preview!

2 – Beagle Class Creator

O outro plugin é o Beagle Class Creator. Como o nome sugere, ele é o responsável por trazer, em si, templates para criação de classes do Beagle, ou seja, os recursos com os quais pessoas desenvolvedoras podem criar mais facilmente classes e ações customizadas dentro do framework do Beagle. 

Nesse ponto, é importante ressaltar que o Beagle já traz consigo uma série padrão de ações e de componentes. No entanto, é possível criar componentes e ações customizadas com comportamentos que melhor atendam as necessidades de cada usuário.

Por isso que o Beagle Class Creator facilita o processo de desenvolvimento, já que como mencionamos no início do artigo, os componentes de uma aplicação e as respectivas classes que os criam podem ter  muitos atributos e métodos. Logo, uma ferramenta que monta a estrutura padrão de uma classe se torna uma “mão na roda” para criar telas e fluxos.

Esse plugin te oferece três funcionalidades:

  1. Criar arquivos de template para classes e ações customizadas do Beagle.
  1. Selecionar o código de algum componente e aplicar um “Surround with” com componentes que recebem componentes filhos.
  1. Autocompletar o código de componentes padrão do Beagle como, por exemplo, botões, containers etc.

Como eu posso, então, criar uma classe ou ação customizada?

É bem tranquilo! Vamos ao passo a passo para cada uma das funcionalidades do plugin:

1. Para criar uma classe ou ação customizada do Beagle:

  1. Clique com o botão direito do mouse no pacote onde se quer criar o componente customizado.
  1. Ao clicar em NEW, você verá a opção Beagle, que contém o grupo de opções para ANDROID ou BACKEND.
  1. Selecione a opção de acordo com o seu ambiente (Backend ou Android).
  1. Uma tela com diversas opções de componentes do Beagle que podem ser customizados aparecerá.
  1. Selecione um componente, escolha o nome dele e aperte ENTER.
  1. O novo componente será criado nesse pacote, assim como no exemplo abaixo.
Gif animado que mostra a estrutura de um projeto Android e ao clicar com o botão direito do mouse em um pacote mostra a opção que quando clicada mostra a opção para criar classes do Beagle.

2. Para aplicar o surround with com componentes padrão do Beagle:

  1. Selecione o código do componente, como no exemplo abaixo.
  1. Aperte: CTRL + ALT + J para abrir o painel dos Live Templates (WINDOWS) ou
    Aperte: ⌘ + ⌥ + J (command + option + J para iOS).
  1. Em seguida, um painel com algumas opções de template para cercar (Surround with) uma seleção com um contêiner Beagle, um ScrollView e algumas outras opções estarão disponíveis.
Gif animado de um código que contém dois elementos de texto que são selecionados e tem em si aplicados a ação de “Surround with” do plugin colocando-os como filhos de um componente “Touchable”.

3. Para autocompletar componentes padrão do Beagle:

  1. Comece a digitar as 4 ou 5 primeiras letras de um componente padrão do Beagle.
  1. Aperte TAB ou selecione a opção no painel de autocomplete que aparecerá quando parar de digitar.
Gif animado que demonstra a funcionalidade de autocomplete do plugin. Ao digitar as 4 primeiras letras de um componente e apertar o botão TAB, o código da estrutura do componente é criado.

E é isso! Esses plugins do Beagle são, de fato, grandes aliados no desenvolvimento.

Plugins do Beagle: mais produtividade para a sua rotina de desenvolvimento

Esperamos que você encontre nos Plugins do Beagle aquele autocomplete aliado para te apoiar nos desafios do dia a dia, aquele gerador de classes que mostra o que tem que ser implementado. 

Todas essas funcionalidades foram pensadas a partir de feedbacks de usuários e também da percepção do time do Beagle sobre maneiras de incrementar a experiência de pessoas desenvolvedoras, também conhecida como Developer Experience.

Tem dúvidas? Quer nos ajudar a melhorar esses plugins do Beagle? Quer novas funcionalidades no Beagle? Então não se acanhe! 

Nosso projeto é open source e esperamos esse contato mais próximo com vocês que já usam o Beagle ou mesmo para aqueles que ainda não o conhecem. Não deixe de dar uma olhada no nosso fórum ou conferir o projeto pelo GitHub.

Esperamos vocês!

Capa do artigo sobre Plugins do Beagleque mostra uma pessoa branca codando em um laptop com 2 celulares e um tablet ao lado.
Foto carlos stein
Desenvolvedor Android
Sou desenvolvedor Android Kotlin na ZUP desde Janeiro de 2020. Tenho feito parte do projeto Open Source Beagle desde então. Fluente em inglês, minha proficiência e habilidade comunicativa tem me ajudado muito no desenvolvimento da minha carreira como programador. Meu atual projeto de vida é evoluir na profissão de Desenvolvedor Android. Sou graduado em Sistemas para Internet no IFTM em Uberlândia e sigo no caminho de aperfeiçoamento profissional e pessoal com vontade e afinco.

Este site utiliza cookies para proporcionar uma experiência de navegação melhor. Consulte nossa Política de Privacidade.