Mobile

7 fev, 2019

Criando extensões Zeplin para desenvolvimento mobile

Publicidade

A plataforma Zeplin tem se tornado cada vez mais comum no dia a dia de engenheiros mobile. Coisas que entram em uma rotina tendem a ser otimizadas/automatizadas por se tratarem de um trabalho repetitivo.

Graças ao sistema de extensions da plataforma Zeplin, podemos desenvolver soluções que façam com que, ao selecionar um componente de interface, por exemplo, seja exibido algum código em uma linguagem pré definida, de modo que quem esteja desenvolvendo uma aplicação mobile possa tirar proveito deste cenário apenas com um copy & paste.

No caso atual, irei mostrar de forma bem direta o passo a passo de como criar uma extension para que vocês possam utilizar localmente (sem estar publicada na plataforma Zeplin) até uma publicação oficial, aonde você e outros desenvolvedores poderão instalar a extension nos mais diversos projetos existentes.

Extensão publicada e aprovada pelo Zeplin.

Mãos na massa!

Como pré requisito, você deverá ter instalado o npm (gerenciador de dependências para JS).

Vamos precisar instalar o gerenciador de extensions do Zeplin, chamado zem (zeplin extensions manager), que permitirá facilmente criar e testar as extensions.

npm install -g zem

O próximo passo é criar o diretório da sua extension através do comando create.

zem create swift-rect

Após um pouco de processamento, será gerado o diretório com os seguintes arquivos:

Arquivos gerados pelo zem create.

Depois, basta abrir o projeto no editor de texto de sua preferência. No meu caso, utilizei o Atom.

O primeiro passo é configurar as informações sobre a sua extension. Para isso, deve-se navegar para o arquivo:

package.json

Neste arquivo, garanta que o tipo do seu projeto está de acordo com o que você deseja estender.

"zeplin": {
    "displayName": "swift-rect",
    "projectTypes": [
      "ios"
    ]
  }

Agora vamos para onde a magia acontece. Dentro da pasta src, temos o arquivo index.js, onde será exibido um grupo de métodos fornecidos pelo Zeplin, responsáveis pelo acesso dos mais diversos parâmetros para que você possa tirar proveito e gerar extensions que forneçam códigos dos mais diversos níveis de complexidade, literalmente prontos para a utilização.

Métodos fornecidos pelo arquivo index.js

No caso atual, criaremos uma extension bem simples, que apenas retornará um CGRect do layer selecionado. Para isso, removeremos o que for desnecessário, deixando apenas o que nos interessa.

Como estamos gerando um CGRect, devemos ter acesso aos pontos X e Y do frame, além dos valores de altura e largura do mesmo.

O layer retornado pelo Zeplin possui os seguintes atributos:

Podemos facilmente identificar que o que queremos com exatidão está ali, o .rect.

O objeto .rect possui todos os parâmetros desejados – assim, basta acessá-los:

let x = Math.floor(selectedLayer.rect.x);
let y = Math.floor(selectedLayer.rect.y);
let width = Math.floor(selectedLayer.rect.width);
let height = Math.floor(selectedLayer.rect.height);

Para retornar o código em Swift, retornamos uma String que terá concatenada os valores do .rect, tendo esta cara:

let rect = "CGRect(
              x: " + x + ", 
              y: " + y + ", 
              width: " + width +  ", 
              height: "+ height + "
            )";

Feito isso, devemos retornar nosso arquivo, explicitando que estamos retornando um código na linguagem Swift.

result = {
      code: object,
      language: 'swift'
    };
return {
      code: object,
      language: 'swift'
    };

Por fim, com o código pronto, terá a seguinte cara.

function layer(context, selectedLayer) {
    let object = '';
    let result = {};

    let x = Math.floor(selectedLayer.rect.x);
    let y = Math.floor(selectedLayer.rect.y);
    let width = Math.floor(selectedLayer.rect.width);
    let height = Math.floor(selectedLayer.rect.height);

    let rect = "CGRect(x: " + x + ", y: " + y + ", width: " + width +  ", height: "+ height + ")";

    object += rect;

    result = {
      code: object,
      language: 'swift'
    };

    return {
      code: object,
      language: 'swift'
    };
}

export default {
    layer
};

Para validar o que foi feito, basta executar o comando:

npm run exec — layer

Será retornado um set de layers gerados com diversas configurações testando a funcionalidade de seu código.

Valores de teste retornados.

Hora de testar no Zeplin!

Acesse o gerenciador de extensões do aplicativo.

Acesso ao gerenciados de extensões.

Pressione em seu teclado o botão Option para que a opção Explore extensions se transforme em Add Local Extension. Depois disso, clique nela.

Gerenciador de extensões.

Aparecerá uma entrada de texto para o path de sua extension local. Para rodarmos nossa extension localmente, será necessário executar o comando npm start no diretório previamente criado.

Resultado do npm start
Adicionando extension localmente.

Após colar o path:

http://localhost:7070/manifest.json

Basta adicionar a extension e verificar o resultado ao clicar em um layer.

Resultado da extension aplicada.

O último passo é publicar a sua extension. Mas, para isso, um conselho importante: para a aprovação, é importante que você possua um README.md bem descrito (melhor ainda sendo open source, compartilhando o repositório). A publicação é feita com o comando.

npm run publish

Referências

Agradecimento em especial ao time de engenharia do Zeplin, pelo excelente suporte até então.