Notificações Push em dispositivos Android, com Intel XDK e Apache Cordova

A tecnologia push é um sistema de distribuição de conteúdo da Internet em que a informação sai de um servidor para um cliente.

Como bem explica Jorge Aguilar, redator do site Mobilidade, é como se uma campainha fosse instalada em sua sala de estar. Toda vez que uma correspondência nova fosse entregue, o alarme soaria – dispensando a incômoda viagem até a sua caixa de correio.

No push, é o servidor (web, em geral) que avisa o celular que há algo lá para ele!

Iniciando os trabalhos

No vídeo abaixo, irei demonstrar como criar sistema completo de notificações push, que inclui um gerenciador (central de envio) de push e também o desenvolvimento de um aplicativo Android para receber notificações de push no dispositivo, utilizando a biblioteca PushPlugin do Apache Cordova.

Download*

* Não se esqueça de configurar as informações do Google Cloud Messaging conforme instruo no vídeo, pois apenas com elas todo o sistema irá funcionar sem problemas, desde o envio até o recebimento do Push!

Testes

Por trabalharmos com plugins de terceiros neste exemplo (PushPlugin), não conseguimos explorar os recursos e fazer o aplicativo funcionar através da Guia TEST (Intel XDK) ou através do App Preview.
Para testar a integração com o plugin de terceiros (no caso, PushPlugin), precisamos gerar uma build do aplicativo e testar em um dispositivo real, tal qual fiz no vídeo.

Referências

Written by Diego Cavalca

Graduado em Análise e Desenvolvimento de Sistemas pela UNILINS em 2012, atualmente Mestrando em Ciência da Computação na Universidade Federal de São Carlos (UFSCar).

  • Eduardo Dos Santos

    Boa noite, nossa dei muita sorte, estava com essa dúvida e logo no meu feed aparece seu vídeo kkkk. só uma pergunta estou desenvolvendo apps nativos no Xcode e no Android Studio. posso usar o servidor web sem problemas? tem alguma indicação de como devo configurar nos apps, já que não vou usar a biblioteca cordova?

    • Bom dia Eduardo,

      Conforme expliquei, a arquitetura da notificações é dividida em 3 partes. O “Gerenciador de notificações” que fiz neste artigo se comunica com o Serviço de Push da plataforma, no qual fica incumbido de entregar a mensagem nos aparelhos (tokens).
      Em resumo, você pode utilizar sem problemas o “Gerenciador de notificações” em qualquer projeto, seja nativo ou híbrido, pois a forma de entrega da mensagem passa todas pelo Serviço de Push.

      Em relação a integração nativa da biblioteca PushPlugin, na sua página oficial do Github possui maiores detalhes sobre como implementar em cada uma das plataformas suportadas, conforme cito no vídeo.

  • Emerson Amaral

    nussss Diego arrebentou!!! faz tempo que procuro um jeito de enviar push e vc como sempre da tudo mastigadinho pra gente!
    muito obrigado amigo, amanhã mesmo ja começo a desenvolver.
    sucesso!!!

  • troquatte

    Diego Continua assim cara Nossa QUE SHOWW parabéns CARA!

  • Robson Curvello

    Boa cara! Parabens pelo video! Uma pergunta… tem como colocar um som próprio na minha Notificação? ex: app do Decolar.com que quando recebo uma notificacao toca aquela musica “decolar ponto com” ou igual whatsapp ou ICQ… assim como no seu artigo e como no do Qnimate eu não vi nada sobre ter próprio som na notificação. Vlw desde já!

      • Robson Curvello

        Poxa valeu vou dar uma olhada melhor depois… mas pelo que eu vi fica meio “osso” fazer no Intel XDK, pelo que eu compreendi tem que jogar o audio em uma pasta especifica que não é “gerada” no Intel XDK… apenas no phonegap ou estou errado?

  • Lenivene Bezerra

    Estranho!! Aqui não funcionou, será se é por que eu testei o APP pelo Intel Preview? (Baixei o seu e só editei o número no código)

    • Boa tarde, conforme já expliquei em diversos vídeos, por trabalharmos com plugins de TERCEIROS neste exemplo (PushPlugin), não conseguimos explorar os recursos deste através do App Preview.
      Para testar a integração com o plugin de TERCEIROS, precisamos gerar uma build do aplicativo e testar em um dispositivo real, tal qual fiz no vídeo.

      • Lenivene Bezerra

        PORRA!!! Sério? E eu aqui reinventando a roda! kkkkkkkkkk

  • cFred

    Boa noite Diego.

    Muito boa a sua explicação, porém aqui eu tive um problema. Quando executo a aplicação no aparelho ele me apresenta uma mensagem de erro com a informação de Class not found, tem ideia do que possa estar causando este erro ?

    Obrigado.

    • Silvio Ramalho

      Boa noite Diego. Muito bacana seu video. Eu também estou com esse mesmo problema ao rodar o app no Samsung Galsxy S4: Class not found. No registro.
      Você saberia como resolver?

      • cFred

        Valeu Silvio, vou testar e aviso aqui se funcionou. Abraços

        • Shuase

          Opa. Teria como me da uma ajuda nesse assunto?

          • cFred

            Ola, ja faz algum tempo que nao brinco com o xdk, mas como posso te ajudar ?

      • Valeu 🙂

      • cFred

        Valeu Silvio, funcionou perfeitamente.

    • Exatamente como o Silvio Citou: conforme já expliquei em diversos vídeos, por trabalharmos com plugins de TERCEIROS neste exemplo (PushPlugin), não conseguimos explorar os recursos deste através do App Preview.
      Para testar a integração com o plugin de TERCEIROS, precisamos gerar uma build do aplicativo e testar em um dispositivo real, tal qual fiz no vídeo.

      • cFred

        Ola Diego, eu fiz o teste pela aba test no app preview da intel, e não pelo emulate do xdk, também não deveria funcionar no app preview ?

        • cFred

          Perdão Diego, agora que li direito a sua resposta e vi que você diz que não funciona do app preview. Vou testar criando um build. Obrigado.

      • cFred

        Diego, funcionou perfeitamente, obrigado. Gostaria de lhe avisar que o arquivo php que você disponibilizou para download contém uma chave de api e alguns tokens de dispositivos no código, não sei se são valores válidos mas pode ser que sejam informações não publicas que foram esquecidas no código.

        Obrigado pela dicas.

  • Bom dia Diego, a tempos procuro tutoriais sobre intelXDK e o seus são muito bem explicadinhos, gostaria de aproveitar o espaço para fazer duas perguntas: No caso para eu enviar para todos os dispositivos como eu faria? Pq vi que vc precisou colocar o código do dispositivo para enviar para ele, ou a plataforma em PHP (ou google) reconhece e te informa os códigos? A outra pergunta é para saber se vc tem intensão de fazer um curso sobre XDK… Abs

    • Thiago Moskito Antonucci

      Olá Diego! Eu iria fazer a mesma pergunta que fez o Saulo Cassau, sendo assim, apenas endosso a pegunta e aguardo uma resposta sua.
      Aliás, muito obrigado pelo vídeos e arquivos relacionados, dificilmente vemos tutoriais com tamanha qualidade. Parabéns pelo trabalho e dedicação à comunidade!

  • Chrysller Candido

    Muito boa vídeo aula, ta funcionado legal aqui, detalhe sem usa o intel xdk, eu gostaria de saber como eu posso abrir uma página específica no aplicativo, clicando sobre a notificação

    Obrigado

  • Edson Alves

    Olá Diego…
    Fiz o teste gerando um APK do app e instalando em meu aparelho, entretando ele inicia, aparece aplicativo iniciado, depois SUCESSO:Ok e para ai não acontece mais nada… o que sera que pode ser? Meu aparelho é um Sony xperia…

    Vlw

    • Edson Alves

      Rosolvido. 🙂

      • Diego Perez Bonano

        Pode nos dizer como resolveu? Obrigado

        • Edson Alves

          No meu caso Diego, não era um erro e sim uma falha minha… Quando vc baixa o codigo que o Diego deixou como exemplo vc precisa informar nele o ID do projeto que vc cria no Google no exemplo dele esta um string informando para vc colocar o codigo.. Coloquei o código e Bumm.. Funcionando..

  • Diego Perez Bonano

    Olá Diego, tem alguma indicação de emulador Android para Windows para poder testar as notificações? Obrigado

    • Edson Alves

      Me parece que no Emulador não funciona precisa de um aparelho real.

  • Airton Maia

    Como copio o código Dispositivos-alvo (tokens) ?

    • Flavio Ceratti

      Opa, eu peguei o token cadastrando num banco de dados já usado na aplicação, o push vem de fora da aplicação, aqui é um sistema em php, entao quando cadastra algo que precisa ser notificado, faz um select na tabela de tokens e manda a notificações.
      não sei se é o correto, mas fiz assim.

      • mrigote

        Fala meu, consegue me mostrar como você fez eu estou precisando fazer a mesma coisa aqui.

        Nossa ia me ajudar muito

        • Flavio Ceratti

          Se vc já utiliza conexão com banco de dados(sql, mysql, oracle…), para controle de acesso do seu app(login e senha para entrar)

          1- quando o usuário fazer login no seu app, cadastra o token que é gerado atravez da função capturarEventos(e){ e.regid} no index.html do código deste tutorial.
          Deve ter uma tabela usuarios para seu app, cria o campo token, e faz update deste campo ja que terá o login e senha do usuario

          2 – no php, ao cadastrar, alterar excluir algum registro, e se deseja notificar, pega os tokens dos usuarios e envia a notificação como é enviado no tutorial deste artigo

          se vc mandar push para seu proprio celular tambem, nao nao notifica pois ja esta aberto
          como esta no php e aqui uso a mesma função para o app e para o sistema web, notifica tanto se cadastrar por app ou pelo sistema web,

          • Tadeu

            Boa noite Flavio, poderia compartilhar como fez para salvar no banco de dados mysql? Estou tendo a mesma dificuldade…se puder compartilhar seu codigo.

          • Flavio Ceratti

            Opa, aqui usamos Sql Server, mas é executando um insert da mesma forma que cadastra um usuario ou item que provavelmente seu app tem, se não pesquisa como salvar em mysql com php…

      • Dayvson Lucas

        Flavio beleza cara?
        Estou precisando fazer praticamente o que vc ja possui pronto. Sou iniciante em desenvolvimento app. Meu problema e o seguinte desenvolvi um app que pega dados do banco e exibe na tela do app. Preciso de uma notificação push q ao alterar algum dado do banco ele envie notificação para todos celulares que possue o app. Ja tentei varios exemplos e tutorial mais não consegui. Vc conseguiria me ajudar nessa tarefa. Meu banco e mysql. Meu email para mais informações: dayvsonlucas.bh18@gmail.com

      • Robson C

        Olá Boa noite!
        Flavio fiquei com uma duvida onde eu acho esta informação de Token? apenas quando instalo o app no celular?

  • Paterson De Melo

    Ola, gostaria se possível for vc me passasse uma solução para esse problema, meu muito obrigado

  • Diego Perez Bonano

    Atualizei o Intel XDK para versão 2248 com isso parou de funcionar o build. Se removo o PushPlugin ele vai com sucesso. Alguém sabe o que pode ser? Obrigado

    • Flavio Ceratti

      Eu também estou com este problema, alguém conseguiu resolver?
      Obrigado

      • Diego Perez Bonano

        Eu baixei uma changeset anterior a última versão do plugin no GIT, com isso funcionou.

  • Diego Perez Bonano

    Não estou conseguindo gerar o Build com o PushPlugin adicionado no projeto, ocorre erro porém não mostra detalhes, se removo o plugin funciona. Criei um projeto novo adicionando o plugin e não funcionou também. Erro do plugin ou do XDK? Alguém com o mesmo problema? Poderiam me ajudar? Obrigado

    • Cara acabei de descobrir aqui como fazer pra funcionar na nova versão do xdk.
      Quando voce for adicionar o plugin de terceiro no coloca a no plugin id isso “com.clone.phonegap.plugins.pushplugin” e marque a o checkbox, pois assim vc vai estar colocando um plugin de resgistro do cordova.
      Acho que eles devem ter barrar os plugins que agora já são nativos do apche cordova.

      • Decio Stenico

        Obrigado Andre, funcionou corretamente quando adicionado o plugin com este ID

  • Thiago Ewerson

    Gostaria de lhe pedir que entre em contato comigo através do whatsapp 08698611263

  • Bruno Louredo

    Boa tarde. Estou com um problema, pois quando quando testo via o Preview ou até mesmo gerando o .apk, ele está gerando o seguinte ERRO: Class not found. Já criei um app do zero e já tentei usar o app disponibilizado por vc, porem mesmo assim nao está rolando. Se alguem puder me ajudar, agradeço. Abraço!

  • Baixei os arquivos e segui as instruções do vídeo, funcionou certinho. Agora vou colocar no meu app oficial. Excelente recurso. Esse recurso pode ser enviado a um grupo de token ou tem que fazer uma rotina e enviar um a um. Se for um a um tem algum intervalo de tempo que deve ser respeitado ou pode enviar pra 150 token ao mesmo tempo?

    • Derik Cesar

      onde vc baixou os arquivos
      ?

  • Givanildo R. de Oliveira

    Ótimo! Funcionou perfeitamente aqui.

    Uma questão: Sabe dizer como faço para abrir o app ao dar um tap (click) na notificação?

    Obrigado!

  • Derik Cesar

    onde se encontra arquivows para download?

  • Petronio L

    Eu tendo dar um build nos arquivos de teste e da esse error.

    The build failed.
    An error occurred while building the application. Verify your build assets are correct and try again.

    Build Log:
    Building a Cordova 4.1.2 application.
    The application name is “PushXDK”
    The package name is “xdk.intel.blank.ad.template”
    Plugin “org.apache.cordova.device” (0.2.13) installed.
    Plugin “org.apache.cordova.splashscreen” (0.3.5) installed.

  • miguel thiago

    Olá Diego, tudo bom? Diego, eu tava querendo saber, como faço para receber os registros do app instalado nos celulares, se tem como fazer um banco de dados para receber esses registros. pois, como ficará o projeto para mandar uma mensagem para varios celulares?

  • Rodrigo Santos

    Boa tarde! Esse plugin serve também para o windows phone ?

  • Julio Andolfo

    Onde eu pego o TOKEN ? Vou ter que pedir o Token para cada usuario que utilizar o APP ? Ou o registro do Token vai para algum lugar ? Obrigado !

  • Caiuá França

    boa tarde Amigo, estou tentando fazer no XDK 2673 e esta apresentando erro no plugin, você pegou algo do tipo?
    erro no build.

  • Caiuá França

    olá Amigo fiz o downloads dos arquivos mais quando vou fazer o deploy da um erro no plugin estou usando a versão do XDK 2673.

  • Decio Stenico

    Bom dia! Estou tentando criar o mesmo projeto do vídeo, mas acabo recebendo “error = Class not found” quando testo em um dispositivo real.
    Mais detalhadamente eu recebo as seguintes informações no dispositivo:
    “- hello cordova
    – registering Android
    – erro = Class not found”

    O que eu fiz até agora:
    – Já inclui o PushNotification.js em /js e já fiz a chamada pra ele no index.html pela tag .

    – Já instalei o PushPlugin (CLI 4) e também testei pelo CLI 5, os dois deram os mesmo resultados.

    – Fiz todas configurações pelo painel de desenvolvedor da Google (gerando a API KEY e número do projeto) e inclui o número do projeto no script (senderID) dado na página do github.

    Alguém poderia me falar se estou esquecendo de algo bem obvio? Obrigado!

  • michell santos

    Olá Diego, poderia me ajudar em como faço para implementar o push notificação no app que criei no intel XDK?

  • Tania Maria

    Por favor me ajude estou sem as notificações push 4 meses. Meu face n notifica em celular nenhum acho que minha conta esta com problema. Uso s5.
    Tania-mariaa@Hotmail. Com

  • Rafael

    Iai pessoal tudo bom? Quero parabenizar o trabalho do Diego, muito show pela grande contribuição. Estou com esse problema na hora que envio a mensagem para o GCM, a pagina me retorna {“multicast_id”:8620740739373021761,”success”:0,”failure”:1,”canonical_ids”:0,”results”:[{“error”:”InvalidRegistration”}]}. alguém pode me ajudar no que pode ser, acredito que já fiz tudo certinho.

  • Junior Bastos

    Serve para ios também?

    • Flavio Ceratti

      Serve, mas aqui ainda não funcionou ainda por causa dos certificados. se alguem conseguiu comenta ai a ordem de certificados que precisa

  • Eric Silva

    Perfeito funcionou tudo conforme mencionado no vídeo.

    Uma dúvida, tem algum custo R$ para o envio das Notificações??

    Abraço

  • madson g.

    Tem como resolver o problema de compatibilidade do plugin quando se tenta emular dentro do xdk?

  • madson g.

    Algum modo de resolver o “InvalidRegistration”? Já conferi o token, fiz upload pra um servidor remoto, testei em um device real mas nada funciona. Alguém conseguiu resolver isso?

  • Robson C

    Diego boa noite, vi o vídeo, alias estou sempre vendo os vídeos do seu canal mais esta semana resolvi por em pratica o que eu aprendi, o vídeo já tem um tempo então tive que ir buscar o plugin em outro local mais mesmo assim o mesmo esta bem atual, inclusive você disponibilizou um gerenciador Push muito legal isto evita usar por exemplo o OnSignal no meu caso minha pretensão é enviar notificações do meu app Web, eu não entendo de PHP mais atuo bem com Java e Javascript/JQ e por isto pergunto a você existe alguma referencia para implementar aquele código PHP em outra linguagem?
    Procurei no Google mais não achei

  • Márcim André

    Tem como mandar as notificações para todos que tenham o app instalado.

  • Márcim André

    Esse plugin agora está encontrando problemas em compilar no intel XDK pois nele contem

    push.gradle e segundo respostas de desenvolvedores do xdk é perigoso para o construtor.
    Alguem sabe de outro plugin que possa executar o pusch no Android?

  • Fabio

    Meu exemplo funciona, porém não exibe o Icone da minha aplicação.

    1 – Gostaria de adicionar o icone do meu app na notificação push
    2 – Gostaria de saber se é possivel direcionar a notificação para uma pagina específica do app.

    Grato.