News & Events
Tutorial: Notificações no iOS e Android
- 28 de janeiro de 2015
- Posted by: Adriano Santos
- Category: Notícias [Tutorial]
O uso de smartphones no dia-a-dia nos deixa as vezes preguiçoso por conta dos milhares de recursos disponíveis para nos ajudar nas tarefas diárias. São milhares de aplicativos disponíveis nas lojas Google Play e AppStore e muitos deles, principalmente aplicativos de mensagens e jogos, se utilizam de um recurso bastante interessante que apelidamos de Notificações. Essas notificações podem aparecer de diversas formas no aparelho, a forma mais comum é o uso das Centrais de Notificações presentes no iPhone e celulares com Android.
Nesse breve tutorial, veremos como se utilizar desses recursos para enviar informações ao usuário de nossos apps. Aprenderemos então a criar notificações instantâneas, ícones com o número de alertas do app e também o uso da Central de Notificações do Sistema Operacional.
Notificações no iOS e Android
Inicie criando uma nova aplicação no RAD Studio XE7 utilizando o menu File > New > Multi-Device Application – Delphi. Selecione um template em branco (Blank Application) e salve o aplicativo em um diretório de sua escolha.
Tanto no iOS quanto no Android, as notificações no iOS e Android são enviadas e controladas pelo componente NotificationCenter da classe de mesmo nome. Vale lembrar que esses alertas somente funcionam em plataformas móveis, por isso mude o Target de seu Delphi para Android ou iOS (Device ou Simulator) para que possamos incluir um componente dessa classe em nosso formulário. Também será necessário incluir os namespaces FMX.Platform e FMX.Notification no Uses do formulário caso não seja incluso automaticamente.
Basicamente, como mencionado anteriormente, existem diversas formas de se mostrar notificações. No ícone da aplicação, em forma de banner e ainda na Central de Notificações. Iniciaremos nossos estudos modificando o ícone da aplicação.
Insira um TLabel modificando sua propriedade Text para “Número de Notificações” (sem aspas) e em seguida coloque um TEdit na tela. Modifique seu Text inserindo o valor “15” ou algo de sua preferência e modifique seu Name para edtNumber. Agora insira um SpeedButton e modifique a propriedade Text para “Aplicar”. Nós faremos com que ao tocar no SpeedButton, seja acrescentado um ícone com o valor “15” (ou o que for digitado por nós) acima do ícone do aplicativo como é comum em Android e iOS.
Codifique o botão no evento OnClick de acordo com a Listagem 1.
procedure TForm1.SpeedButton1Click(Sender: TObject); var MyNotification: TNotification; begin MyNotification := NotificationCenter1.CreateNotification; try MyNotification.Number := edtNumber.Text.ToInteger; NotificationCenter1.PresentNotification(MyNotification); finally MyNotification.DisposeOf; end; end;
Listagem 1. Modificando o ícone da aplicação
A explicação para o algorítimo anterior é simples. Nós criamos uma variável do tipo TNotification para configurar o tipo de notificação que desejamos. Instanciamos essa variável logo na primeira linha de nosso procedimento usando o método CreateNotification do componente NotificationCenter1. Após isso nós configuramos o valor numérico (referente ao número de alertas) que aparecerá no ícone do aplicativo. Usamos a propriedade Number da nossa variável, nossa instância. Por fim, chamamos o método PresentNotification do componente NotificationCenter1 passando para ele qual a instância da notificação, ou seja, nossa variável.
Se executarmos nossa app agora e clicarmos no botão Aplicar, veremos o valor esperado. Você deverá sair da aplicação apertando o botão Home no iPhone/iPad ou Voltar no Android para ir até a área de trabalho do sistema operacional. Você deve visualizar algo parecido com as imagens a seguir:
Agendamento de Notificações
Outro recurso bastante comum é vermos, tanto no iOS quanto no Android, um banner com um alerta específico da aplicação. Isso é bastante comum em aplicativos de chat, tais como Facebook Chat e Whatsapp. Esses banners normalmente aparecem na parte superior do aparelho e desaparecem segundos depois. Depois ficam visíveis apenas na Central de Notificações que pode ser acessada arrastando o dedo de cima para baixo. Essas notificações podem ser agendadas ou instantâneas. Vejamos um exemplo de agendamento:
Insira outro TLabel na tela e modifique seu Text para “Mensagem de Agendamento”. Coloque também um novo TEdit e mude seu Name para edtMensagem. Por fim um novo SpeedButton e mude o Text para “Agendar”. No código-fonte do evento OnClick desse botão, digite o algorítimo da Listagem 2.
procedure TForm1.SpeedButton2Click(Sender: TObject); var MyNotification: TNotification; begin MyNotification := NotificationCenter1.CreateNotification; try MyNotification.Name := 'MinhaNotificacao'; MyNotification.AlertBody := edtMensagem.Text; MyNotification.FireDate := Now + EncodeTime(0, 0, 10, 0); NotificationCenter1.ScheduleNotification(MyNotification); finally MyNotification.DisposeOf; end; end;
Listagem 2. Agendamento
Você perceberá que a codificação inicial é bem semelhante a anterior. O que modificamos aqui foi usar outras três propriedades da instância da notificação que não usamos no exemplo anterior:
- Name: Nome da notificação;
- AlertBody: Texto da notificação;
- FireDate: Data da notificação.
Essa última propriedade é bem interessante. Nós podemos inserir qualquer data nessa propriedade e isso torna o recurso mais dinâmico. Vamos dar um exemplo: digamos que nossa aplicação exija a sincronização de dados com o servidor da empresa de 24 em 24 horas e desejamos que o usuário seja avisado sobre isso. Podemos criar uma fórmula capaz de agendar uma notificação para “X” horas, ou que apareça de tempo em tempo. Em nosso exemplo, nós codificamos esse tempo para mostrar a notificação 10 segundos após o clique no botão “Aplicar”. Perceba a instrução “Now + EncondeTime(0, 0, 10, 0)”.
Por fim, depois de confirmarmos nossa variável, então chamamos o método ScheduleNotification do componente para agendar nossa notificação. Para testar, execute o aplicativo e pressione o botão Home de seu iPhone/iPad ou o botão Voltar do seu Android. Aguarde 10 segundos e veja a notificação aparecer e desaparecer.
Caso seja necessário, ainda é possível fazer o cancelamento dela no sistema operacional chamando o método CancelNotification como pode ser visto abaixo.
NotificationCenter1.CancelNotification('MyNotification');
Notificação Imediata
Caso seu aplicativo necessite notificar o usuário imediatamente sobre uma determinada informação ou simplesmente seja necessário já incluir o alerta direto na Central de Notificações, você pode utilizar o método PresentNotification (já utilizado anteriormente) como apresentamos a seguir.
Insira um novo SpeedButton em tela e codifique-o como mostrado na Listagem 3.
procedure TForm1.SpeedButton3Click(Sender: TObject); var MyNotification : TNotification; begin MyNotification := NotificationCenter1.CreateNotification; try MyNotification.Name := 'MyNotification'; MyNotification.AlertBody := edtMensagem.Text; MyNotification.Number := edtNumber.Text.ToInteger; MyNotification.EnableSound := True; NotificationCenter1.PresentNotification(MyNotification); finally MyNotification.DisposeOf; end; end;
Listagem 3. Notificação Imediata
Perceba a semelhança com a Listagem 2. Na verdade apenas retiramos o valor da propriedade FireDate e chamamos o método PresentNotification ao invés de ScheduleNotification. Isso já basta para mandarmos a notificação para a Central de Notificações e ainda alteramos o número de notificações no ícone. Em outras palavras, poderíamos mesclar tudo que aprendemos até aqui e fazer um único método atualizando o usuário com o máximo de informações.
Banner de Notificação ou Alerta de Notificação?
Por padrão, seu aplicativo irá mostrar um banner de notificação. Mas, somente no iOS, é possível utilizarmos um Alerta de Notificação que pode ser clicado pelo usuário executando uma ação pré-determinada (Figura 1). Para isso, o usuário final deverá configurar como deseja receber as notificações em seu aplicativo (Figura 2).
Figura 1. Notificação em forma de janela no iOS
Figura 2. Janela de configuração do tipo de alerta no iOS
Para que possamos executar uma determinada ação caso o usuário clique na caixa de diálogo, precisamos configurar o campo AlertAction da notificação e informar qual o botão que executará a ação. Insira mais um último botão em tela e codifique-o como na Listagem 4. Modifique o Text do botão para Executar.
procedure TForm1.LaunchClick(Sender: TObject); var MyNotification: TNotification; begin MyNotification := NotificationCenter1.CreateNotification; try MyNotification.Name := 'MinhaNotificacao'; MyNotification.AlertBody := edtMensagem.Text; MyNotification.Number := edtNumber.Text.ToInteger; MyNotification.AlertAction := 'Launch'; MyNotification.HasAction := True; MyNotification.FireDate := Now + EncodeTime(0, 0, 5, 0); NotificationCenter1.ScheduleNotification(MyNotification); finally MyNotification.DisposeOf; end; end;
Listagem 4. Execução de ação pre-configurada
A grande diferença nesse método é que configuramos as propriedades AlertAction e HasAction da instância de nossa notificação. Com isso estaremos preparados para receber uma ação do usuário. E por falar em receber uma ação, precisaremos agora codificar o que ela executará. Para isso acesse o evento OnReceiveLocalNotification do objeto NotificationCenter1. Codifique-o apenas incluindo um ShowMessage nele como abaixo:
procedure TForm1.NotificationCenter1ReceiveLocalNotification(Sender: TObject; ANotification: TNotification); begin ShowMessage('Notificação Clicada'); end;
Execute a aplicação e teste-a. Nosso formulário final deverá se parecer com as Figuras 3 e 4.
Conclusão
Nesse tutorial aprendemos a usar o componente NotificationCenter que provê serviços de notificações para aplicativos iOS e Android. Vimos que a curva de aprendizado para fazer uso de notificações em aplicativos móveis é bem baixa e de rápido aprendizado. Nos vemos no próximo tutorial.
Fonte desse tutorial: DocWiki da Embarcadero
#GoToDelphi
Author: Adriano Santos
1 comentário
Comments are closed.
[…] Notificações no iOS e Android […]