Criando um aplicativo de alarme com Cordova e Intel XDK

Ads

O Projeto.

Vamos criar um alarme simples, que deve servir como base para o projeto de App de Hidratação. Este exemplo compara a hora corrente com outra previamente armazenada. Por se tratar de um exemplo, não irei usar locastorage para armazenar a hora do alarme, irei programar diretamente no código.

Preparando o projeto.

  1. Certifique-se que esteja utilizando a versão mais recente do IntelXDK.
  2. Inicie um novo projeto no Intel XDK, HTML 5 + Cordova e não habilite o App Designer.
  3. Nas propriedades do projeto, vá em Plugin Manager.
  4. Adicione o plugin background-mode – https://github.com/katzer/cordova-plugin-background-mode (veja aqui como fazer a importação)
  5. Adicione também o plugin local-notifications –  https://github.com/katzer/cordova-plugin-local-notifications
  6. Adicione agora o plugin autostart https://github.com/ToniKorin/cordova-plugin-autostart

 Comparando Horas.

Para trabalhar com horas e datas você deve instanciar um objeto Date() no JavaScript.

hora=new Date();
var horaAtual = hora.getHours() + ":" + hora.getMinutes(); 
document.write("A hora atual é " + horaAtual);

Para aplicações que necessitem de cálculos, você precisa ler este artigo.

Exemplo de Aplicação.

O código a seguir não pode ser testado no simulador do Intel XDK ou no App Preview. Gere o APK e instale em seu dispositivo, ou use uma instalação do BlueStacks.

<!DOCTYPE html>
<html>
<head>
 <title>Alarme</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 <style>

@-ms-viewport { width: 100vw ; zoom: 100% ; } @viewport { width: 100vw ; zoom: 100% ; }
 @-ms-viewport { user-zoom: fixed ; } @viewport { user-zoom: fixed ; }
 </style>

<script src="cordova.js"></script> 
<script src="js/app.js"></script> 
<script src="xdk/init-dev.js"></script> 
 
 
<script>  
document.addEventListener('deviceready', function () 
{
    cordova.plugins.backgroundMode.enable();
    setInterval(function()
    { 
      //captura a hora atual
      hora=new Date();
      var horaAtual = hora.getHours() + ":" + hora.getMinutes(); 
 
      //captura a hora agendada
      var horaAgenda = document.getElementById('Agendamento').value;
 
      //compara a hora atual com a hora agendada
      if (horaAtual == horaAgenda)
      {
        var notificacao = 'Chegou o momento tão esperado!!!'; //mensagem da notificação.
        alert(notificacao);
        document.write(notificacao);
 
        // Envia a notificação se as horas foram iguais. 
        var sound = device.platform == 'Android' ? 'file://alarme.mp3' : 'file://alarme.caf';
        var dataAtual = new Date();
        cordova.plugins.notificacao.local.schedule({
        id: 1,
        title: "Notificação de Alarme",
        message: notificacao,
        at: dataAtual,
        sound: sound,
        icon: "http://etecarmine.com.br/wp/wp-content/uploads/2015/11/cropped-logo-azul.jpg"
        });
      } 
    }, 60000); //60 segundos
}, false);
</script>
 
</head>
<body>

<h1>alarme</h1>
 
 <p>Agende o alarme:</p>
 <input type="time" id="Agendamento" required>
 <button onclick="alert('Agendado para ' + document.getElementById('Agendamento').value)">Checar</button>
 <!-- Não precisa criar nenhuma função aqui, o background-mode já está lendo estes valores -->
  
<script>
 // plugin para inicializar o app automaticamente, junto com o Android / iOS
 cordova.plugins.autoStart.enable();
</script>
 
</body>
</html>

app-exemplo-alarme
Ads

Anderson Oliveira

Anderson Oliveira é desenvolvedor, escritor e docente no CEETPS - Centro Estadual de Educação Tecnologia de São Paulo. Atualmente trabalha na Administração Central do CPS e leciona aulas de programação na Etec Prof. Carmine Biagio Tundisi de Atibaia.