Send Task-Related SMS Notifications in Asana Using Twilio SMS, Automate.io and Laravel

Time to read: 5 minutes

February 08, 2019
Written by
Michael Jaroya
Contributor
Opinions expressed by Twilio contributors are their own

asana-automate-notifications.png

Introduction

Currently, the only way to get Asana project notifications is either by email or from within their app. With limited push notification support, your team members are likely to get overrun by email alerts sent and miss important project updates. Any developer or project manager knows that missed notifications can result in missed deadlines which turns into broken confidence of clients. Therefore, it is important to figure out alternative ways of sending out important notifications.

In this tutorial, we are going to discuss how to send SMS notifications to project members when an Asana task is created, completed or comment on.

Requirements

Set Up Laravel Project

If you don't have one already installed, you’ll need to install a fresh Laravel application. A guide on how to set up Laravel can be found in the official Laravel documentation.

We also need to install the Twilio SDK for PHP in our project. In your terminal, navigate to the project directory and run the following command:

$ composer require twilio/sdk

Create an Automate.io Asana Connect App

To grant automate.io secure access to our Asana account, we need to first create an Asana Connect app. Follow the steps below to create an app:

  1. Login into your Automate.io account and click on APPS menu. A new page is loaded.
  2. Click Add (+)  button.
  3. Select Asana from the list. Opens a pop-up window.
  4. Enter a unique name.
  5. Click Authorize to create the app.
  6. Click Save.

Create a Temporary Public URL

To test locally, we need DNS software like ngrok that assigns a local port a publicly accessible URL over the Internet. Once ngrok is set up, run the command below to expose our local web server running on port 8000 to the Internet.

/.ngrok http 8000

Create Bots in Automate.io

The next step is to create bots in Automate.io that will be triggered by task-related events in Asana.

Follow the steps below to create the bots:

Create a Task Bot to Listen To Asana Events

First, we’ll set up the listener for the bot:

  1. Navigate to the BOTS menu and click on the “Create a Bot” button.
  2. Click the Select Trigger App dropdown and select the Asana app we created earlier.
  3. From the secondary dropdown, select “New Task” as the trigger event.
  4. Then, select the project you want to use from the dropdown.

Now we’ll define the action from the trigger:

  1. In the select panel, click “Select Action app”.
  2. Select “Webhooks” from the dropdown followed by “Post data”
  3. Enter the Webhook URL (your ngrok URL) followed by /api/notifications and the content type as JSON.
  4. Now drag and drop the Task Assignee Name and Task Id output fields from the first panel into the Data field.
  5. Create the JSON data as shown in the picture below. 
  6. Click Save and then activate the Bot.

Create New Comment On Task Bot

This next bot will be responsible for sending an SMS when someone comments on a task:

  1. Create a new bot and select the  Select Trigger App dropdown. Choose the Asana app.
  2. Select “New Comment On Task” as the trigger event.
  3. Now select the project you want to use from the dropdown.

We’ll need to capture some information about the task so let’s add another trigger:

  1. In the second panel, click Select Action app.
  2. Select the Asana app.
  3. Select Find Task as the trigger event.
  4. Select Workspace followed by Project.
  5. Select Task Id from the variable list in the Task Id Field.

Now we’ll define the action from the triggers:

  1. In the third panel, click Select Action app.
  2. Select “Webhooks” from the dropdown followed by “Post data”.
  3. Enter the Webhook URL (your ngrok URL) followed by /api/notifications and the content type as JSON.
  4. Drag and drop Comment Created By Name, Comment Text and Task Name output fields and drop them in the Data field. 
  5. Create the JSON data as shown in the picture below. 
  6. Click Save and then activate the Bot.

 

Create Task Completed Bot

The last bot we’ll create will notify us via SMS when a task is marked as completed:

  1. Create a new bot and select the Select Trigger App dropdown. Choose the Asana app.
  2. Select “Task Completed” as the trigger event.
  3. Now select the project you want to use from the dropdown.

Now we’ll define the action from the trigger:

  1. In the second panel, click Select Action app.
  2. Select “Webhooks” from the dropdown followed by “Post data”.
  3. Enter the Webhook URL (your ngrok URL) followed by /api/notifications and the content type as JSON.
  4. Drag and drop the Task Completed, Task Completed At and Task Name output fields from the first panel into the Data field. 
  5. Create the JSON data as shown in the picture below. 
  6. Click Save and then activate the Bot.

Purchase an SMS Enabled Twilio Phone Number

  1. Login into your Twilio account and go to the console numbers page.
  2. Click the plus button to purchase a phone number if you don't have one already.

You'll use this phone number as the "From" phone number when sending notifications to project members.

.

Remember to also retrieve your account credentials; specifically the Account SID and Auth Token.

Update the Environmental File with Account SID, Token and Phone Number

Open the .env file and add the following code:

TWILIO_TOKEN =XXXXXXXXXXX
ACCOUNT_SID = ACXXXXXXXXXX
TWILIO_NUMBER=

These variables should be assigned the credentials retrieved from your Twilio account in the step above.

Create a Webhook to Handle Messages from Automate.io

Finally, let's create the webhook we need to send notifications.

Run the following command in the project directory to create AsanaController:

php artisan make:controller API/AsanaController

Open the file app/Http/Controllers/API/AsanaController.php and add the following code:

<?php

use Twilio\Rest\Client;

class AsanaController extends Controller
{
public function notifications( Request $request )
   {
       $message = "";
       // create message
       if ( $request->task_id ) {
           $message = "A new task has been created.";
       } else if ( $request->created_by ) {
           $message = $request->created_by . " has commented on " . $request->task_name . ".";
       } else if ( $request->task_completed ) {
           $message = "Task " . $request->task_name . " has been completed.";
       }

       // Your Account SID and Auth Token from twilio.com/console
       $account_sid = getenv( 'ACCOUNT_SID' );
       $auth_token  = getenv( 'TWILIO_TOKEN' );

       // A Twilio number you own with SMS capabilities
       $twilio_number = getenv( 'TWILIO_NUMBER' );

       // List of project members phone numbers
       $numbers = [ 'list of member phone numbers' ];
       $client  = new Client( $account_sid, $auth_token );
      
       //loop through the numbers
       foreach ( $numbers as $number ) {
           $client->messages->create(
               // Where to send a text message (your cell phone?)
               $number,
               array(
               'from' => $twilio_number,
               'body' => $message
               )
           );
       }
             return "ok";
   }

}

Create The Endpoint

Inside routes/api.php, add this line of code:

<?php
Route::post( '/notifications', 'API\AsanaController@notifications' );

Test the App

Let's test our application. Add your phone number to the $numbers array and

login into your Asana account and create a task.

You should immediately get a notification through SMS.

Next, comment on the task we just created above.

 

You should get an SMS similar to the one shown below.

Lastly, mark the task as completed in Asana to get the task completed notification.

You should get an SMS notification on this too.

Conclusion

Asana API has a lot more features. Task-related APIs and webhooks covered in this tutorial are just a part of it. To get more details on Asana API, check out their documentation.  

The complete code for the tutorial can be found on Github.
You can reach me at info@talwork.net or on Twitter at @mikelidbary.

 

 

Related Posts

Related Resources

A newspaper article

Twilio Docs

From APIs to SDKs to sample apps

API reference documentation, SDKs, helper libraries, quickstarts, and tutorials for your language and platform.
An Open book

Resource Center

The latest ebooks, industry reports, and webinars

Learn from customer engagement experts to improve your own communication.
User group reactions

Ahoy

Twilio's developer community hub

Best practices, code samples, and inspiration to build communications and digital engagement experiences.