Day -4 NativeScript Post Series

How to send email from NativeScript Mobile Application using SendGrid

In my last post we saw, how we can use nativescript-camera plugin and nativescript-background-http plugin to send a background http request. In todays post we will be using the nativescript http plugin to send an email request to Rest based SendGrid API to send email.

NativeScript currently has support for nativescript-email plugin to send emails from mobile application. In order to make use of the plugin email client has to be configured in the device.

Consider the scenario, where you want to send email from mobile application and wanted to perform analytics over the number of emails sent from the mobile application or get additional info about email statistics ?

Nativescript-email plugin would not be able to provide details of email statistics or you cannot perform analytics over email sent from your mobile application. This is where SendGrid comes in to picture. For more details about SendGrid you can view the link over here.

Inorder to use Send Grid, we would first need to create a send grid account. Send Grid is free to try upto 100 emails per day. Once creating a send grid account, we have to create an API Key. Navigate to dashboard and under Settings – > API Keys

Click on the Create New button to create a new API Key.

Sendgrid1

 

Provide a name and select Restrictive Access. Navigate to the bottom of the list and enable access to Mail Send section alone. This way, the API key can be used only to send emails.

sendgrid2

 

Sendgrid3

Click the Create and View button, an API key will be displayed. This will be displayed only once. The key would be something like “SG.IINWEWE232232”. Note the API Key we would require it in our mobile application to post messages to SendGrid API.

In the mobile application, we will be using “http” module which is part of tns core modules. More details on http modules can be found here.

In order to post to SendGrid, we have to create a “POST” request, which sends data in json format. We would need to add the API key to header information of request as shown in the below code snippet.

Send Grid API Url  : – https://api.sendgrid.com/v3/mail/send

function sendEmail()
{
  var http = require('http');
  const data = JSON.stringify({
    content: [
      {
        "type": "text/html", 
        "value": "<html><p>Hello, world!</p></html>"
      }
    ], 
    from: {
      email: "Primary Email with Send Grid Account", 
      name: "FromName"
    }, 
    personalizations: [
      {
        subject: "Hello, World from NativeScript", 
        to: [
          {
            email: "toemailAddress", 
            name: "toname"
          }
        ]
      }
    ], 
    subject: "Hello, World!"
  });  

  console.log(data);

  http.request({
    url: "https://api.sendgrid.com/v3/mail/send",
    method: "POST",
    headers: {"Authorization":"Bearer YourSendGridAPIKey", 
    "Content-Type":"application/json"},
    content: data
}).then(response => {
    var result = response.content.toJSON();
    console.log(result);
}, error => {
    console.error(error);
});
}

We can verify the status of email in Send Grid under Activity. This would display the status of email along with complete information with respect to the email.

sendgrid4

The dashboard can be used to check the the requests sent and delivered along with other information on a high level. Dashboard will be refreshed normally in UTC time zone.

In order to avoid the Send Grid API key in mobile application code, we can also develop an Web API, which can accept request from mobile application and post the request to SendGrid. This way we can make changes to our WebAPI alone , when there is change in the API key.

The sample code can be found in the link here.

Happy Reading!!!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s