Testando um widget durante o desenvolvimento¶

O processo de desenvolvimento de um widget vai exigir que você faça vários testes a medida que compõe o seu layout, o que é natural.

Acontece que para que um widget seja devidamente executado, é necessário ter duas coisas:

As dependências da plataforma DSME;
As informações embutidas no elemento raiz.

Inclusão das dependências¶

Nós disponibilizamos uma biblioteca mockup justamente para que você possa testar o seu widget antes de registrá-lo em nossa plataforma.

Faça o download do arquivo dsme.zip e, após extrair seu conteúdo, inclua os arquivos dsme.min.js e dsme.min.css no seu widget como exemplificado abaixo:

Exemplo

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="generator" content="DSME">
        <title>Meu widget</title>
        <link href="css/dsme.min.css" type="text/css" rel="stylesheet">
        <link href="css/widget.css" type="text/css" rel="stylesheet">
    </head>
    <body class="widget">
        <!-- ... -->
        <script src="js/dsme.min.js"></script>
        <script src="js/widget.js"></script>
    </body>
</html>

Note que o scirpt dsme.min.js deve vir em primeiro lugar, antes de qualquer outro script. O mesmo deve acontecer com o dsme.min.css.

Dados mockup¶

Independente se você está criando um widget dinâmico, como o do nosso exemplo, você vai precisar disponibilizar algumas informações diretamente no seu HTML, uma vez que não há (por enquanto) uma ferramenta para fazer isto para você.

Basicamente o que você tem que fazer é adicionar os atributos data-widget-interval, data-widget-config e data-widget-data no seu elemento raiz.

Alguns exemplos¶

Vamos criar um widget que exibe um relógio. Tomaremos como base as definições abaixo:

Exemplo

```json tab="widget.json" { "title" : "Meu Relógio", "name" : "meu-relogio", "description" : "Exibição de um simples relógio, no formato digital ou analógico", "author" : "DSME https://dsme.tv", "version" : "1.0.0" }

```html tab="index.html"
<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="generator" content="DSME">
        <title>Meu widget</title>
        <link href="css/dsme.min.css" type="text/css" rel="stylesheet">
        <link href="css/widget.css" type="text/css" rel="stylesheet">
    </head>
    <body class="widget">
        <time>
            <!-- O horário será exibido aqui -->
        </time>
        <script src="js/dsme.min.js"></script>
        <script src="js/widget.js"></script>
    </body>
</html>

Agora digamos que você queira fazer um teste no qual o seu widget vai ficar em execução durante 15 segundos. Nesse caso você vai precisar incluir o atributo data-widget-interval:

Exemplo

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="generator" content="DSME">
        <title>Meu widget</title>
        <link href="css/dsme.min.css" type="text/css" rel="stylesheet">
        <link href="css/widget.css" type="text/css" rel="stylesheet">
    </head>
    <body class="widget" data-widget-interval="15">
        <time>
            <!-- O horário será exibido aqui -->
        </time>
        <script src="js/dsme.min.js"></script>
        <script src="js/widget.js"></script>
    </body>
</html>

Após 15 segundos o método stop() do seu widget será chamado, o que significa que a configuração deu certo.

Agora digamos que o seu relógio recebe um parâmetro para dizer se vai ser usado o formato analógico ou digital.

No widget.json você poderia criar um parâmetro de usuário da seguinte maneira:

Exemplo

{
    "title" : "Meu Relógio",
    "name" : "meu-relogio",
    "description" : "Exibição de um simples relógio, no formato digital ou analógico",
    "author" : "DSME <https://dsme.tv>",
    "version" : "1.0.0",
    "params" : [
        {
            "name" : "digital",
            "field" : {
                "type" : "checkbox",
                "label" : "Usar relógio digital",
                "checked" : true
            }
        }
    ]
}

Que resultaria na seguinte configuração:

Exemplo

{"digital" : true}

Será true se o usuário tiver marcado o checkbox, ou false caso contrário.

Agora que você sabe como seria o objeto com as configurações do usuário, pode incluí-lo com o atributo data-widget-config:

Exemplo

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="generator" content="DSME">
        <title>Meu widget</title>
        <link href="css/dsme.min.css" type="text/css" rel="stylesheet">
        <link href="css/widget.css" type="text/css" rel="stylesheet">
    </head>
    <body class="widget"
        data-widget-interval="15"
        data-widget-config='{"digital" : true}'
        >
        <time>
            <!-- O horário será exibido aqui -->
        </time>
        <script src="js/dsme.min.js"></script>
        <script src="js/widget.js"></script>
    </body>
</html>

Por fim, digamos que além do relógio, o seu widget vai exibir a cotação atual do Dólar. Para isto ele precisa consultar um serviço que retorna esta informação. No seu widget.json você poderia configurar o parâmetro update assim:

Exemplo

{
    "title" : "Meu Relógio",
    "name" : "meu-relogio",
    "description" : "Exibição de um simples relógio, no formato digital ou analógico",
    "author" : "DSME <https://dsme.tv>",
    "version" : "1.0.0",
    "update" : {
        "interval" : 1,
        "uri" : "https://api.promasters.net.br/cotacao/v1/valores?moedas=USD&alt=json"
    },
    "params" : [
        {
            "name" : "digital",
            "field" : {
                "type" : "checkbox",
                "label" : "Usar relógio digital",
                "checked" : true
            }
        }
    ]
}

Como resultado você receberia o JSON abaixo:

Exemplo

{
    "status" : true,
    "valores" : {
        "USD" : {
            "nome" : "D\u00f3lar",
            "valor" : 4.1463,
            "ultima_consulta" : 1535667264,
            "fonte" : "UOL Economia - http:\/\/economia.uol.com.br\/"
        }
    }
}

E agora pode incluir o atributo data-widget-data:

Exemplo

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="generator" content="DSME">
        <title>Meu widget</title>
        <link href="css/dsme.min.css" type="text/css" rel="stylesheet">
        <link href="css/widget.css" type="text/css" rel="stylesheet">
    </head>
    <body class="widget"
        data-widget-interval="15"
        data-widget-config='{"digital" : true}'
        data-widget-data='{"status":true,"valores":{"USD":{"nome":"D\u00f3lar","valor":4.1463,"ultima_consulta":1535667264,"fonte":"UOL Economia - http:\/\/economia.uol.com.br\/"}}}'
        >
        <time>
            <!-- O horário será exibido aqui -->
        </time>
        <script src="js/dsme.min.js"></script>
        <script src="js/widget.js"></script>
    </body>
</html>

E é isso. Agora é só ir alterando os valores dos atributos para simular diferentes situações enquanto você desenvolve e testa seu widget.

Limpando o arquivo¶

Não esqueça de remover os atributos de teste e os arquivos dsme.min.js e dsme.min.css antes de gerar o arquivo final do seu widget.

Exemplo

```html tab="HTML de teste" hl_lines="9 12 13 14 15 16 20" <!DOCTYPE html> Meu widget

```html tab="HTML final"
<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="generator" content="DSME">
        <title>Meu widget</title>
        <link href="css/widget.css" type="text/css" rel="stylesheet">
    </head>
    <body class="widget">
        <time>
            <!-- O horário será exibido aqui -->
        </time>
        <script src="js/widget.js"></script>
    </body>
</html>