Criando aplicativos para smartwatch com javascript

Sim, isto mesmo. Anos atrás você provavelmente tomou um mindfuck por ter visto o javascript rodar no lado do servidor, depois mais um mindfuck por ter lido que javascript foi usado para criar um sistema operacional. Agora tome um mindfuck também em saber que com javascript é possível criar aplicativo para smartwatch. Que coisa linda de Deus!

Antes da gente se aventurar preciso te dizer que isto só é possível graças a Pebble.js criada para o melhor smartwatch de todos os tempos, o Pebble. Pebble ficou conhecido por bater o recorde de financiamento no kickstarter onde eles pediram apenas US$ 100 mil para o projeto de um relógio com tela e-ink (a tela do Kindle) e conseguiram US$ 1 milhão em 24hrs.

OH MY GOD!

Vamos ao que interessa, iremos criar um aplicativo que irá mostrar altura de maré por período em algumas praias, este aplicativo será util para surfistas que precisam ter a previsão da maré para ver qual horário estará ótimo para surfar. Se você assim como eu nunca surfou e então nem vê utilidade neste aplicativo siga este pequeno tutorial apenas como uma forma de ingressar nesta linha de programação.

Conhecendo a IDE do PebbleCloud

Graças ao suporte que a Pebble dá aos desenvolvedores temos uma IDE completa com compilador e simulador no CloudPebble. Para conseguir ter acesso a este ambiente basta se cadastrar em: https://cloudpebble.net/ feito o cadastro seremos direcionado para esta página:

Dev Portal é o ambiente onde é feito o cadastro do perfil de desenvolvedor e onde será o seu canal para publicar o aplicativo criado.

Forums é aquele ambiente onde você pedirá ajuda e verá um monte de tópicos nada a ver com a categoria e um admin louco tentando administrar esse fuzuê

CloudPebble é a nossa IDE. É a opção que vamos escolher.

Ao clicar no CloudPebble veremos está página:

O que vemos ai é que não temos nenhum projeto criado ainda, vamos criar um então. Clique no botão azul create e preencha com os dados:

Project Name: TideCheck Tutorial

Project Type: Pebble.js (beta)

Clique no botão azul create novamente. Feito isto veremos a nossa fantástica IDE:

Perceba que já temos um arquivo criado chamado app.js é este arquivo que iremos alterar. Ao clicar no app.js vemos que o CloudPebble já da pra gente um código de exemplo pronto. Fique a vontade para olhar e tentar entender. Feito isto podemos apagar o código inteiro, vamos começar um do zero.

  1. Criar menu com a lista de praias

Para criar um menu no app vamos usar o UI.Menu do Pebblejs. Com este Menu podemos passar algumas opções como cor de background, cor do background no estado “hover”, ícone para o item do menu. Exemplo:

var menu = new UI.Menu({
backgroundColor: 'black',
textColor: 'blue',
highlightBackgroundColor: 'blue',
highlightTextColor: 'black',
sections: [{
title: 'First section',
items: [{
title: 'First Item',
subtitle: 'Some subtitle',
icon: 'images/item_icon.png'
},
{
title: 'Second item'
}]
}]
});

Em nosso caso vamos apenas colocar o menu com os itens, sem mudar cor nem adicionar ícone. Primeiro vamos criar uma lista com as praias do aplicativo:

var beaches = [
{
title: 'Gold Coast',
subtitle: 'Australia'
},
{
title: 'Pipeline',
subtitle: 'Hawaii'
},
{
title: 'Tombo',
subtitle: 'Guarujá'
},
{
title: 'Uluwatu',
subtitle: 'Bali'
}
];

Antes de chamar o UI.Menu precisamos importar o módulo UI para este código. Logo na primeira linha do nosso arquivo fazemos isto:

var UI = require('ui');

Feito isto vamos criar o menu:

var menu = new UI.Menu({
sections: [{
items: beaches
}]
});

Ok, feito o menu precisamos fazer com que o menu apareça na tela. Para isto basta chamar o show() na instancia do menu. Assim:

menu.show();

Veja como ficou o código final:

var UI = require(‘ui’);
var beaches = [
{
title: 'Gold Coast',
subtitle: 'Australia'
},
{
title: 'Pipeline',
subtitle: 'Hawaii'
},
{
title: 'Tombo',
subtitle: 'Guarujá'
},
{
title: 'Uluwatu',
subtitle: 'Bali'
}
];
var menu = new UI.Menu({
sections: [{
items: beaches
}]
});
menu.show();

Bom, tudo certo até agora (espero). Antes que aconteça o apocalipse vamos salvar isto que fizemos, basta clicar no ícone de um disquete na direita.

Agora vamos fazer funcionar isto que fizemos. Aperte o botão de play logo acima do botão de salvar. Ao finalizar será possível ver a interface do Pebble funcionando \o/

Navegue no menu com os botões direcionais acima e abaixo.

2. Ao clicar no botão selecionar do Pebble mostrar Card com a mensagem de loading de informações.

ok, ok, ok, agora é hora de adicionar evento a este menu. A ideia é que ao selecionar uma praia fazer com que o app mostre a informação da praia selecionada. Então vamos escutar o evento de click no botão de select do pebble — botão do meio na direita.

Para escutar o evento é muito simples:

menu.on('select', function(e) {
});

Agora toda vez que o botão select for pressionado essa função passada como argumento A.K.A callback será chamada.

Dentro da função vamos criar um card que irá mostrar a informação da praia selecionada e para saber qual praia foi seleciona usamos o atributo itemIndex que foi passado na função de callback. Este itemIndex irá retornar o índice do item selecionado no menu, começando pelo número 0. Já que criamos o array beaches basta apenas chamar pelo índice para saber qual praia foi selecionada. Exemplo:

var selected = beaches[e.itemIndex];

Feito isto podemos montar um UI.Card assim:

var card = new UI.Card({
title: selected.title,
subtitle: selected.subtitle,
body: 'Extraindo dados...'
});

Uma observação é que este UI.Card possue outras opções, na documentação do projeto conseguimos ver todos os atributos que podemos passar e a função de cada um deles, convido você a dar uma olhada.

Novamente, não podemos esquecer de mostrar este card chamando o show()

card.show()

Ok, hora do build. Clique no botão play novamente para ver o resultado.

Aperte o botão do meio da direita para selecionar o item. Para voltar é o botão da esquerda.

Resultado:

menu.on('select', function(e) {
var selected = beaches[e.itemIndex];

var card = new UI.Card({
title: selected.title,
subtitle: selected.subtitle,
body: ‘Extraindo dados…’
});

card.show();
});

3. Extrair informações da api

Agora a parte mais interessante, vamos extrair os dados de maré da api premium do World Weather Online. Por sorte esta api oferece 90 dias no plano trial. Entre no site do World Weather Online e cadastre-se para obter uma api key.

Com a api em mãos vamos fazer um teste para ver o formato de retorno. Edite a url abaixo com a sua key no parametro key e Abra esta url em seu browser:

http://api.worldweatheronline.com/premium/v1/marine.ashx?key=<< SUA KEY >>&format=json&q=-23.95753,-46.22783&tide=yes&tp=24

Estamos passando alguns paramêtros.

  • key: api key
  • format: formato de retorno, pode ser xml, csv. Em nosso caso será json
  • q: é a busca, iremos buscar por latitude e longitude. No exemplo acima a latitude e longitude é de Guarujá.
  • tide: setamos como yes para retornar informações de maré
  • tp: é o período de previsão, em nosso caso 24hrs

Basicamente, para extrair as informações de maré basta passar a localização da praia e acessar este elemento da resposta: data.weather[0].tides[0].tide_data

Mas pera, paramos por aqui. O Pebble não possue wifi nem 3G. Como ele consegue fazer uma requisição? WTF!? O Pebble fica sempre conectado ao seu celular, através do bluetooth. E é por este meio de comunicação que o pebble também recebe as notificações, sinal gps e é por este mesmo canal que sera feita a requisição para a api.

Quando disparamos a requisição o Pebble irá mandar um sinal para o seu celular que irá fazer a requisição e irá devolver para o Pebble. Isto tudo pra gente é transparente. Olhando o código essas duas pontas não será visivel, irá parecer que a requisição saiu direto do Pebble ao invés do celular.

Agora voltando para o nosso código precisamos que quando o usuário selecionar a praia vamos fazer uma requisição para esta api, formatar os dados e exibir no corpo do card que está até o momento com o texto ‘Extraindo dados…’

Primeira coisa que devemos fazer é importar o modulo ajax no começo do arquivo.

var ajax = require('ajax');

Como nossa api faz busca por latitude e longitude teremos que ter esses dados de cada praia individualmente. Vamos voltar para o nosso array beaches e adicionar essas informações deixando ele assim:

var beaches = [
{
title: ‘Gold Coast’,
subtitle: ‘Australia’,
location: ‘-27.987297600674417, 153.32370279999998’
},
{
title: ‘Pipeline’,
subtitle: ‘Hawaii’,
location: ‘20.74846350601603, -155.9926633’
},
{
title: ‘Tombo’,
subtitle: ‘Guarujá’,
location: ‘-23.95753,-46.22783’
},
{
title: ‘Uluwatu’,
subtitle: ‘Bali’,
location: ‘-8.825541352465672,115.09039114999996’
}
];

Agora vamos para a nossa função criada no passo anterior, logo após do card.show() vamos adicionar o seguinte código:

var url = 'http://api.worldweatheronline.com/premium/v1/marine.ashx?key=&format=json&q=' + selected.location + '&tide=yes&tp=24';
ajax(
{
url: url,
type: 'json'
},
function(response, status) {
card.body(tideMessage(response));
},
function(error, status) {
console.log('error', error);
}
);

*Não se esqueça de colocar sua api key ali no parametro key einh cabeçudo(a)!

A função ajax recebe 3 argumentos. O primeiro é os dados da requisição onde estamos passando a url e o tipo de resposta que será retornada, neste caso json. O segundo parâmetro é um callback caso a requisição tenha acontecido com sucesso e o último callback é caso aconteça um erro, neste caso se acontecer um erro iremos logar.

Em nosso callback de sucesso estamos alterando o body do nosso card já criado com o retorno da função tideMessage() que ainda não existe e será o que iremos desenvolver a seguir.

4. Mostrar informações da api no card de praia

Certo, já temos o menu, já temos o evento de selecionar uma praia, já temos a chama ajax para o serviço que retorna dados de maré e agora o que falta é mostrar esses dados de forma organizada no card.

Vamos separar pelo menos esta parte para uma função chamada tideMessage, ela receberá o response, irá pegar apenas o elemento que precisamos e devolver já formatado para o card.

Ao final do código, logo após a nossa função que fica escutando a ação de select vamos adicionar esta nova função:

function tideMessage(response) {
var result = '';
  return result;
}

logo após a nossa variável result vamos pegar o tide_data da resposta.

var tide_data = response.data.weather[0].tides[0].tide_data;

Estamos pegando a resposta da nossa api, indo até onde temos as informações de maré tide_data e ignorando todo o resto.

Veja o que estamos parseando:

tide_data: [
{
tide_type: "HIGH",
tideDateTime: "2015–11–29 06:01",
tideHeight_mt: "1.17",
tideTime: "6:01 AM"
},
{
tide_type: "LOW",
tideDateTime: "2015–11–29 12:08",
tideHeight_mt: "0.38",
tideTime: "12:08 PM"
},
{
tide_type: "HIGH",
tideDateTime: "2015–11–29 17:13",
tideHeight_mt: "1.11",
tideTime: "5:13 PM"
}
]

Temos um array com 3 elementos, iremos extrair a hora (tideTime) e a altura da maré neste horário (tideHeight_mt). Podemos usar o forEach para ir adicionando essas informações no result.

tide_data.forEach(function(tide) {
result += tide.tideTime + ': ' + tide.tideHeight_mt + 'mt \n';
});

Visão final da nossa função:

function tideMessage(response) {
var result = '';
var tide_data = response.data.weather[0].tides[0].tide_data;

tide_data.forEach(function(tide) {
result += tide.tideTime + ': ' + tide.tideHeight_mt + 'mt \n';
});

return result;
}

It’s TIME!

aperte o play para buildar e vamos ver o que acontece!

Oooowww, bem louco e empolgante não?

Acho que conseguimos terminar o aplicativo. O código está bem espaguetão mas para uma versão beta está ótimo! Por falar em beta temos que ter em mente que o PebbleJs é beta, ele foi criado para deixar muito mais fácil criar apps para o Pebble já que a forma nativa é criando em C. Tenha em mente também que criando aplicativo com Javascript podemos deixar o aplicativo um pouco mais lento comparado com a forma nativa em C. A lib é extensa e tem diversas outras funções como por exemplo: pegar o evento do acelerômetro, dados de gps e mais... Ficou empolgadão? Da uma olhada na documentação do Pebble ela é bem completa. https://developer.getpebble.com/

Eu espero que você tenha aprendido e fico a disposição para responder quaisquer dúvidas. Ponha seu projeto em prática e vai criando apps para o relógio. Quem sabe você não crie uma coisa bacana e venda por milhões :O sonhar é importante ;)

Estou disponibilizando todo o projeto também no GitHub caso você queira ir lá e aprender (ctrl+c, ctrl+v)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.