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.
Como configurar o Beagle SDK live preview?
É muito simples configurar o plugin! Basta realizar os passos a seguir:
- No Backend, clicar em:
- File > Settings, e procurar por Plugins.
- Selecionar o Beagle SDK live preview, instalar, reiniciar e IDE.
- 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.
- No Frontend (Android no nosso exemplo), basta:
- Adicionar uma dependência.
debugImplementation "br.com.zup.beagle:android-preview:$beagle_version"- 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"/> - 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:
- Criar arquivos de template para classes e ações customizadas do Beagle.
- Selecionar o código de algum componente e aplicar um “Surround with” com componentes que recebem componentes filhos.
- 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:
- Clique com o botão direito do mouse no pacote onde se quer criar o componente customizado.
- Ao clicar em NEW, você verá a opção Beagle, que contém o grupo de opções para ANDROID ou BACKEND.
- Selecione a opção de acordo com o seu ambiente (Backend ou Android).
- Uma tela com diversas opções de componentes do Beagle que podem ser customizados aparecerá.
- Selecione um componente, escolha o nome dele e aperte ENTER.
- O novo componente será criado nesse pacote, assim como no exemplo abaixo.
2. Para aplicar o surround with com componentes padrão do Beagle:
- Selecione o código do componente, como no exemplo abaixo.
- Aperte: CTRL + ALT + J para abrir o painel dos Live Templates (WINDOWS) ou
Aperte: ⌘ + ⌥ + J (command + option + J para iOS).
- 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.
3. Para autocompletar componentes padrão do Beagle:
- Comece a digitar as 4 ou 5 primeiras letras de um componente padrão do Beagle.
- Aperte TAB ou selecione a opção no painel de autocomplete que aparecerá quando parar de digitar.
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!
