Email no aplicativo simplificado com Appery.io e o novo plug-in SendGrid Mail API

Publicados: 2015-06-09

O seguinte é um post convidado de Max Katz em Appery.io. Saiba mais sobre Max na parte inferior deste post.

O SendGrid é um desses serviços que torna a adição de recursos de e-mail no aplicativo muito simples. O SendGrid é um provedor de uma solução de e-mail baseada em nuvem e fornece uma API REST elegante e fácil de usar para enviar e-mails de um aplicativo móvel. É muito provável que seu aplicativo precise enviar e-mails, como confirmações de registro, e-mails de redefinição de senha, e-mails de verificação em duas etapas, e-mails de notificação geral ou qualquer outro tipo de comunicação por e-mail. SendGrid é a solução perfeita.

Appery.io, a plataforma móvel e web mais completa oferecida como serviço, permite que as empresas criem aplicativos móveis e responsivos muito rapidamente. Appery.io combina um ambiente de desenvolvimento rápido baseado em nuvem com serviços de back-end integrados e um catálogo de plugins de API que simplificam drasticamente a integração com serviços em nuvem e sistemas corporativos.

A integração pronta para uso do Appery.io com qualquer API de terceiros é a combinação perfeita para criar aplicativos móveis habilitados para mensagens rapidamente com a API SendGrid. Para tornar ainda mais rápido adicionar recursos de e-mail a um aplicativo, o Appery.io lançou um plugin SendGrid Mail API. O plug-in pode ser adicionado rapidamente a um aplicativo novo ou existente e fornece um aplicativo de amostra que envia uma mensagem de e-mail com um anexo. O desenvolvedor pode personalizar ou modificar o plug-in conforme necessário.

Neste post, mostrarei como adicionar e usar o plugin SendGrid Mail API.

O que você precisará:

Antes de começar, você precisará das contas SendGrid e Appery.io. Use os links abaixo para se registrar para contas gratuitas.

  • SendGrid
  • Appery.io

O que você vai construir?

Você criará um novo aplicativo móvel e adicionará a API SendGrid Mail para enviar e-mails. O aplicativo de amostra do plug-in permite:

  • Envie um e-mail com um anexo.
  • Tire uma foto e inclua a foto como anexo.

Esta é a aparência do aplicativo quando executado em um dispositivo Android:

Você também pode conferir o vídeo sobre como usar o plugin SendGrid:

Criando um novo aplicativo móvel:

O primeiro passo é criar um novo aplicativo no Appery.io:

  1. Quando estiver dentro da plataforma, clique no botão Criar novo aplicativo . Para o nome do aplicativo, digite: SendGridApp (opção padrão PhoneApp selecionada) e clique no botão Criar .
  2. Na visualização Project , clique em Pages > startScreen . A tela do dispositivo será aberta. A página deve ficar assim:

Você acabou de criar um novo aplicativo móvel. Isso foi fácil, certo?

Adicionando o plugin SendGrid:

Agora que você tem um novo aplicativo, você adicionará o plug-in SendGrid.

1. Para importar o plug-in, clique em Criar novo > Do plug-in :

2. Na categoria Comunicação , você verá a API SendGrid Mail :

3. Clique em Importar plug-ins selecionados .

4. Você será perguntado se deseja definir a página inicial. Vá em frente e selecione a página de correio . Você sempre altera a página inicial acessando Projeto > Configurações do aplicativo > Geral .

5. Esta etapa é opcional, mas você também pode alterar o tema usado neste aplicativo.

uma. Vá para Projeto > Configurações do aplicativo > Geral

b. Para Tema , selecione material-design

6. Abra Páginas > página de correio . A página ficará assim (usando o tema material-design):

O plug-in contém um aplicativo de amostra. Para testar o aplicativo, você precisa configurar o plugin SendGrid API. Você fará isso a seguir, mas primeiro você precisa garantir que as informações da sua conta do SendGrid estejam protegidas.

Configurando um proxy seguro:

Ao se inscrever em uma conta do SendGrid, você obtém um nome de usuário e uma chave de API (sua senha) para usar ao invocar a API. Você deseja manter essas informações confidenciais no servidor porque, se alguém obtiver acesso a essas informações, poderá enviar e-mails usando sua conta. O proxy seguro protegerá essas informações para que elas nunca fiquem visíveis no cliente.

O primeiro passo para criar um proxy seguro é criar um banco de dados que armazenará o nome de usuário e a senha.

1. No App Builder, clique em Banco de dados (na barra de ferramentas) ou acesse http://appery.io/database.

2. Clique em Criar novo banco de dados . Para o nome do banco de dados, digite: SendGridDB . Clique em Criar .

3. Agora você precisa criar uma nova coleção. Clique em Criar nova coleção . Nomeie a coleção como Credenciais .

4. Clique em +Col para criar uma nova coluna. Nomeie a coluna: chave.

5. Crie outra coluna e nomeie-a: keyValue .

6. Agora você vai inserir as chaves do SendGrid no banco de dados.

uma. Clique em +Linha e digite api_user_proxy e seu valor (que é seu nome de usuário).

b. Repita o mesmo para o api_key. Clique em +Row e digite api_key_proxy e seu valor (essa é sua senha). Sua coleção deve ficar assim:

Com os dados salvos no banco de dados, agora é seguro e privado. Em seguida, você criará o proxy seguro que usará os dados que você acabou de salvar no banco de dados:

1. Clique na guia Proxy Seguro ou acesse http://appery.io/proxy.

2. Clique em Criar novo proxy , nomeie o proxy como SendGridProxy . Clique em Criar .

3. Na página de configuração de proxy, marque Usar proxy + armazenar dados confidenciais (privados) no banco de dados .

4. Para Banco de Dados, selecione SendGridDB .

5. Para Coleta, selecione Credenciais .

6. Para a coluna Key , selecione key e para a coluna Value , selecione keyValue .

7. Clique em Salvar .

A última etapa é configurar o serviço para usar esse proxy. O plugin tem um serviço, SendGrid_Mail, para enviar e-mail, então há apenas algumas coisas que você precisa configurar:

  1. Dentro do App Builder, abra Serviços > serviço SendGrid_Mail .
  2. Para Use Appery.io proxy , clique no botão atualizar para carregar o novo proxy que você acabou de criar e selecione-o (SendGridProxy).
  3. Alterne para a guia Solicitação . Esta guia contém todos os parâmetros de solicitação de serviço. Você também notará que o serviço obterá o api_user e api_key do proxy. O único parâmetro de solicitação que você precisa definir é de . Este é o seu e-mail “de”.

A guia Solicitação fica assim:

  • api_key – Chave da API SendGrid (sua senha). Salvo no banco de dados Appery.io para segurança
  • api_user – nome de usuário do SendGrid. Salvo no banco de dados Appery.io para segurança
  • para – para e-mail
  • toname (opcional) – para nomear
  • de – de e-mail
  • fromname (opcional) – from name
  • assunto – assunto do e-mail
  • texto – texto de e-mail

Você pode modificar o serviço e adicionar mais parâmetros de solicitação suportados pela API SendGrid Mail.

Além de (e opcional toname e fromname) você não precisa definir os valores no serviço, pois eles serão mapeados a partir da página. É assim que o mapeamento fica na página ( Pages > mail > Data > sendgrid_email service > Before send mapping ):

Se você quiser saber mais sobre o plug-in, modificar o aplicativo de amostra ou enviar um e-mail sem anexo, leia a documentação do plug-in.

Testando o aplicativo:

Você está pronto para testar o aplicativo.

1. Clique no botão “Test” para iniciar o aplicativo no navegador.

uma. Se você testar o aplicativo no navegador, não poderá invocar a câmera. Você ainda pode enviar uma mensagem; uma imagem de amostra criada em Projeto > JavaScript > SampleImageScript será enviada.

2. Para usar a câmera, a maneira mais rápida é usar o aplicativo Appery.io Tester ou instalar o aplicativo em um dispositivo.

Isso está testando o aplicativo em um dispositivo Android:

Testando o aplicativo no navegador (você pode escanear o código QR para iniciar o aplicativo no seu dispositivo no navegador):

Qual é o próximo?

Para saber mais sobre o plug-in, visite a página de documentação do plug-in. Você também pode adicionar outras APIs do SendGrid ao seu aplicativo.

Além do Appery.io App Builder, você também obtém serviços de back-end integrados, como um banco de dados em nuvem, notificações push e scripts de servidor para escrever lógica de negócios personalizada para o aplicativo.

Resumo

Criar aplicativos com recurso de e-mail no aplicativo com SendGrid e Appery.io é rápido e simples. O plug-in da API SendGrid pode ser rapidamente integrado, testado e protegido ao criar um aplicativo móvel no Appery.io.

Sobre o autor : Max Katz lidera as Relações com Desenvolvedores da Appery.io, uma plataforma de aplicativos móveis baseada em nuvem. Ele adora experimentar APIs REST novas e legais em aplicativos móveis. Max é autor de dois livros “Practical RichFaces” (Apress 2008, 2011), DZone MVB (Most Valuable Blogger), e é um palestrante frequente em conferências de desenvolvedores. Você pode descobrir o que Max está fazendo em seu blog: http://maxkatz.org e Twitter: @maxkatz.