Atenção para os prazos da Maratona Behind the Code! Saiba mais

Alavanque os recursos de push em aplicativos móveis híbridos com plug-ins do Cordova para IBM Cloud

O IBM Cloud inclui um conjunto robusto de SDKs para interagir entre dispositivos móveis e serviços de nuvem. Um desses SDKs é o Push, permitindo que os desenvolvedores registrem dispositivos com relação ao serviço Push, enviem e recebam notificações push. Mostraremos como ficar operacional com os novos plug-ins do Apache Cordova para IBM Cloud no seu aplicativo móvel híbrido novo ou existente para que seja possível começar a alavancar os recursos de push.

O Apache Cordova é uma estrutura extensível que permite que desenvolvedores terceiros criem plug-ins. Os plug-ins atuam como uma ponte entre o desenvolvimento nativo e híbrido. Eles são escritos como código nativo, mas acessados por meio de uma interface JavaScript. Os plug-ins fazem com que seja simples para os desenvolvedores que desejam escrever um aplicativo híbrido usando JavaScript chamar recursos nativos.

O que será necessário para incluir recursos de push no seu aplicativo

  • Uma conta do IBM Cloud
  • Também existe um IBM Worklight ou Apache Cordova (ambiente de projeto)
  • O terminal Apple Push Notification Service ou Google Cloud Messaging para permitir notificações push de um dispositivo móvel
  • Um ambiente de desenvolvimento em Android

    O novo conjunto de plug-ins do Apache Cordova para IBM Cloud ajuda os desenvolvedores móveis híbridos a rapidamente se conectarem a serviços móveis.

ETAPA 1. Criar um projeto do Apache Cordova

Se você já tem um projeto móvel híbrido existente, vá para a Etapa 2.

  1. Configure seu ambiente para o Apache Cordova, caso ainda não tenha feito isso. Download o módulo empacotado de nó para o Apache Cordova.
  2. Abra um prompt de comandos.
  3. Crie um novo projeto:
    cordova create bluemixpush com.example.bluemixpush BluemixPush
  4. Mova cd bluemixpush no seu diretório de projeto recém-criado.
  5. Inclua as plataformas nas quais deseja testar. Por exemplo:
    cordova platform add android

Se essa for sua primeira vez desenvolvendo um projeto do Cordova para uma plataforma específica, é necessário concluir etapas de configuração adicionais. Por exemplo, ao configurar um ambiente Android:

  1. Instale a SDK do Android.
  2. Inclua os locais do Android tools e as variáveis do platform-tools ao seu PATH.
  3. Faça o download do ANT e inclua-o na variável do seu ambiente PATH .
  4. Certifique-se de que o Java está configurado na variável PATH .
  5. Opcionalmente, faça o download e instale o Eclipse com ADT para executar o emulador e depurar seu aplicativo usando os recursos do Eclipse LogCat.

Etapa 2. Incluir o plug-in do Cordova para o IBM Push for IBM Cloud

  1. Acesse a página Plug-ins do Apache Cordova .
  2. Procure o IBM para visualizar todos os plug-ins disponíveis da IBM.
  3. Clique na guia com.ibm.mobile.cordova.ibmpush (plug-in) para abrir uma página de detalhes, que descreve o plug-in IBMPush do Cordova.
  4. Instale o plug-in. Use a Cordova CLI digitando esse comando no seu projeto do Cordova:
    cordova plugin add com.ibm.mobile.cordova.ibmpush
    Após a instalação ser concluída, os plug-ins instalados para seu projeto estarão visíveis no diretório de plug-ins. De forma alternativa, é possível executar
    cordova plugins list
    na linha de comando para visualizar os plug-ins instalados.

Agora você está pronto para começar a usar o IBM Push for IBM Cloud no seu aplicativo híbrido para Android.

Etapa 3.Configurar o IBM Cloud

  1. Efetuar sign in no IBM Cloud.
  2. Na tarefa Painel (visualização), em Aplicativos, clique em Add an application.
  3. Na nova página, selecione a opção Nuvem para dispositivo móvel no menu Boilerplates .
  4. Clique em Create Application.
  5. Na nova caixa de diálogo, escolha o espaço e atribua um nome ao seu aplicativo.
  6. Clique em Create. Agora você verá o Dashboard, juntamente com seu aplicativo e um botão de status verde.
  7. Clique no seu aplicativo para acessar a página Aplicativos , em que é possível ver quais serviços estão vinculados ao aplicativo, bem como o Application ID. O Application ID é necessário para se conectar aos serviços do IBM Cloud. Copie o valor de Application ID.
    Application ID no IBM Cloud

Etapa 4.Familiarize-se com o serviço de push

  1. Ao explorar a página de informações do aplicativo móvel do seu novo aplicativo móvel no IBM Cloud, procure pelo serviço Push na seção Serviços : Tela de serviços no IBM Cloud
  2. Clique na guia Push . Esse é o seu painel para tudo relacionado ao push do seu aplicativo. É possível até mesmo usá-lo para enviar uma notificação de teste para os dispositivos.

Etapa 5.Integrar o Push do IBM Cloud ao aplicativo móvel

Agora você está pronto para voltar ao modo de desenvolvimento. Você incluirá as APIs JavaScript de push do Apache Cordova do IBM Cloud no seu aplicativo móvel híbrido para registrar um dispositivo.

  1. Abra o aplicativo híbrido dentro de seu IDE favorito.(Clique no botão “Get the code” acima para clonar um aplicativo finalizado.)
  2. Abra o arquivo index.js (página) (ou outro arquivo JavaScript que desejar usar) no seu diretório www/js .
  3. Crie um objeto JSON com seus valores de configuração:
    applicationId: o valor do applicationID que você anotou
    applicationRoute: o valor da URL do aplicativo, de quando ele foi criado. Por exemplo, bluemixpush123.mybluemix.net
    applicationSecret: o segredo para segurança do aplicativo. Veja Etapa 7. Determinar o segredo do aplicativo.
  4. Crie uma nova função para inicializar o serviço IBM Mobile Backend as a Service (MBaaS):
    
    // Push Notification content
    var ibmbluemix, ibmpush;
    var values = {
                applicationId: "your app id_",
                applicationRoute: "your app route_",
                applicationSecret: "your app secret_",
            };
    function initPush(){
        console.log("initPush called‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑");
        ibmbluemix = IBMBluemix.hybrid;
        ibmpush = IBMPush.hybrid;
        
        console.log("calling bluemix initialize with values‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑");
        
        ibmbluemix.initialize(values)
        //ibmpush.initializeService();
    }
  5. Chame o método initPush de dentro da função onDeviceReady.
  6. Executecordova run android da sua linha de comando para verificar se os plug-ins foram instalados com sucesso. (Se a instalação não foi bem-sucedida, veja Etapa 8. Depurar erros comuns para encontrar dicas.)
  7. Agora volte e modifique a função para inicializar o serviço Push após o serviço IBM Cloud ter sido inicializado.
    
    function initPush(){
       console.log("initPush called‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑");
       ibmbluemix = IBMBluemix.hybrid;
       ibmpush = IBMPush.hybrid;
       
       console.log("calling bluemix initialize with values‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑‑");
       ibmbluemix.initialize(values).then(function(status) {
          console.log("IBM Cloud Initialized", status);
          return ibmpush.initializeService();
       }, function (err) {
          console.error("IBM Cloud initialized failed" , err);
       }).then(function(pushObj) {
          console.log("IBM Push Initialized", pushObj);
          push = pushObj;
          return push.registerDevice();
       }, function (err) {
          console.error("IBM Cloud Push initialized failed" , err);
       }); 
    }
  8. Execute o código. Você deve ver na saída que o push foi inicializado com sucesso.

Etapa 6.Registrar o dispositivo

Está quase pronto! Se você analisar atentamente os logs, verá uma mensagem de erro de que o retorno de chamada do sucesso da notificação não foi incluído. Para continuar:

  1. Atualize a chamada para registerDevice para incluir informações adicionais: um alias, um ID de consumidor e o nome do método de retorno de chamada:
    push.registerDevice("LisaTest","Lisa123","pushReceived");
    O terminal consumerId e as variáveis do alias são qualquer valor desejado. Use esses valores ao enviar uma mensagem push para um dispositivo específico com base em seu alias e ID de consumidor. O terceiro valor é o nome do método que manipulará quando uma mensagem for recebida pelo dispositivo. Crie uma nova função com esse nome. Por exemplo:
    
    //success callback for when a message comes in
    function pushReceived(info) {
       console.log("registerListener ‑ " + info.alert);
       alert('got a push message! ' + info.alert);
    }
  2. Execute o código. Você deve ver algumas instruções de log que indicam que o dispositivo foi registrado com sucesso.
  3. Para verificar se o dispositivo foi registrado, acesse o console do IBM Cloud. Clique na guia Push (serviço) e navegue até a guia Registros .É possível ver seu dispositivo na lista. Observe que o Consumer ID corresponde ao fornecido ao registrar o dispositivo: Tela de registos no console do IBM Cloud

Você configurou seu aplicativo Apache Cordova híbrido para usar os serviços de push do IBM Cloud e registrou seu dispositivo. Agora é possível testar o recebimento de uma notificação push.

Etapa 7.Determinar o segredo do aplicativo

  1. Abra o console do IBM Cloud e clique no seu aplicativo. Em Development Services, clique no serviço para Mobile Application Security: Tela de serviços em desenvolvimento no IBM Cloud
  2. Na primeira guia, Registered Clients, você vê o ID do aplicativo e as variáveis do Application Secret: Tela de clientes registrador no IBM Cloud
  3. Copie e cole esse valor no campo Application Secret para configurar o push para seu aplicativo híbrido. Se o valor for comprometido, é possível clicar no botão Regenerate para obter um novo.

Etapa 8. Depurar erros comuns

Se você encontrar, no console de log, uma mensagem que diz Uncaught ReferenceError: IBMLogger is not defined, tente essas etapas para resolver:

  1. Remova a plataforma do aplicativo:
    cordova platform remove android
  2. Inclua a plataforma novamente:
    cordova platform add android
  3. Tente novamente.

Se isso não resolver o problema, tente essas etapas:

  1. Remova os plug-ins IBMPush e IBM Cloud:
    cordova plugin remove com.ibm.mobile.cordova.ibmpush Isso deve remover os dois plug-ins. Se não, remova manualmente o plug-in IBM Cloud também.
  2. Inclua o plug-in IBMBluemix primeiro:
    cordova plugin add com.ibm.mobile.cordova.ibmbluemix
  3. Em seguida, inclua o plug-in IBMPush:
    cordova plugin add com.ibm.mobile.cordova.ibmpush
  4. Tente novamente.

Se você visualizar um erro que diz missing GCM & APNS credentials, as credenciais do Google Cloud Messaging ou do Apple Push Notification Service não foram inseridas para o aplicativo no IBM Cloud. Para corrigir isso, siga as instruções na Etapa 9. Inserir as credenciais de notificação push no IBM Cloud.

É possível que você receba um erro que diz IBMPush: Invalid value specified for notification callback function. Specify the callback function name to be when notification arrives. Se você analisar o arquivo IBMPushHybrid.js no plug-in do Cordova, verá que a assinatura para chamar a função registerDevice é:

registerDevice: function (consumerId, alias, pushCallback) 

Atualize seu código para incluir o nome do método de retorno de chamada.

Etapa 9. Inserir as credenciais de notificação push no IBM Cloud

Se você visualizar um erro indicando que as credenciais do GCM & APNS não foram inseridas:

  1. Retorne ao painel do IBM Cloud para sua página do aplicativo móvel.
  2. Selecione o serviço Push para abrir a página do painel de push.
  3. Clique na guia Configuração .
  4. Se não houver credenciais inseridas, clique no botão Editar do serviço de push que deseja ativar.
  5. Se você possui as suas credenciais, insira-as nos campos apropriados e salve. Se você não tiver credenciais e não tiver certeza de como obtê-las, clique no ícone de informações. Um pop-up aparece, explicando como se inscrever para credenciais de push. (É possível inserir dois conjuntos de credenciais, um para Sandbox e outro para Produção. Alterne o modo de serviço entre o Sandbox e Production quando estiver pronto para alternar.)
  6. Salve as alterações.

Etapa 10. Testar o recebimento de uma notificação push

Agora você está pronto para testar o que acontece quando seu aplicativo recebe una notificação push. É possível enviar uma notificação push de várias maneiras.

Enviar uma mensagem push usando o SDK JavaScript do IBM Cloud

  1. Navegue para o IBM Cloud e clique no seu aplicativo.
  2. Clique na guia Push .
  3. Alterne para a visualização Notification (guia) para obter um formulário para enviar uma notificação push.
  4. Insira as informações necessárias no formulário e clique em Próximo.
  5. Na próxima tela, escolha para quais dispositivos enviar a mensagem de teste.
  6. Clique em Send. Uma mensagem é exibida indicando que a mensagem foi enviada.
  7. Agora veja seu dispositivo móvel ou emulador. Se a mensagem foi recebida, você obtém o alerta configurado na etapa anterior.
    Caixa de mensagem de teste

Enviar uma notificação push usando os serviços REST

Também é possível enviar uma notificação push chamando a API REST do IBM Cloud. Para esse exemplo, eu usei o aplicativo Postman para Chrome.

  1. Configure o método para POST.
  2. Configure os cabeçalhos:
    Content-Type: application/json
    Cache-Control: no-cache
    IBM-Application-Secret: your app secret_
  3. Crie uma carga útil JSON para enviar para a solicitação:
    
    { 
       "message": {
          "alert": "Test Message from REST"
    }
    }
    Agora sua página tem a seguinte aparência:
    Serviço de API Rest
  4. Clique em Send.
  5. Seu dispositivo recebe a mensagem.
    Caixa de mensagem de teste

Conclusão

Após trabalhar nesse tutorial, agora é possível incluir recursos de push do IBM Cloud em um aplicativo móvel híbrido novo ou existente usando a Cordova CLI. Também é possível chamar os serviços do IBM Cloud para registrar um dispositivo e receber notificações push.