Create Asana Task

Let's make API request to Asana with the configurations and authorisation token we have set up.

We will start by defining request templates for creating a task in Asana. Add the following request schema by creating a file named config/requests.json and add the following content:

1{
2  "create_asana_task": {
3    "schema": {
4      "method": "POST",
5      "host": "app.asana.com",
6      "path": "/api/1.0/tasks",
7      "headers": {
8        "Authorization": "Bearer <%= access_token %>",
9        "Content-Type": "application/json"
10      },
11      "query": {}
12    },
13    "options": {
14      "oauth": "asana"
15    }
16  },
17  "get_asana_workspace": {
18    "schema": {
19      "method": "GET",
20      "host": "app.asana.com",
21      "path": "/api/1.0/workspaces",
22      "headers": {
23        "Authorization": "Bearer <%= access_token %>",
24        "Content-Type": "application/json"
25      },
26      "query": {}
27    },
28    "options": {
29      "oauth": "asana"
30    }
31  },
32  "get_asana_projects": {
33    "schema": {
34      "method": "GET",
35      "host": "app.asana.com",
36      "path": "/api/1.0/projects",
37      "headers": {
38        "Authorization": "Bearer <%= access_token %>",
39        "Content-Type": "application/json"
40      },
41      "query": {
42        "workspace": "<%= context.workspace %>"
43      }
44    },
45    "options": {
46      "oauth": "asana"
47    }
48  }
49}

In these request schema,

1. We need to make multiple API requests to get the Asana workspace and projects information to make Asana task with the workspace and project IDs. We have added the API host, method, path, and headers to make the API requests to Asana.
2. The options have the OAuth mentioned as asana. It will accordingly let the platform use the respective authorisation credential for GitHub when multiple authorisations are used.
3. In the path and Authorisation header, there are some templates used. The <%= iparam.github_username %> lets the platform automatically use the respective installation parameters (iparams) in the same place. The Authorisation header uses <%= access_token %> template that uses the OAuth access token in the same place.

Next, let's define the request template on the manifest.json file so that the app uses the request method for the respective module of the app. Update the manifest.json file to include the request attribute as follows:

1{
2  ...
3  "modules": {
4    "common": {
5      "requests": {
6        "create_asana_task": {},
7        "get_asana_workspace": {},
8        "get_asana_projects": {}
9      }
10    }
11  ...
12  }
13}

Now, let's use these templates to create a task on Asana. Add the following code on your app/app.js file at the end of the file:

1/**
2 * 
3 * @param {String} title - A title for the Asana task
4 * @returns {Promise<String>}
5 */
6async function createAsanaTask(title) {
7  const AsanaProjectId = "123456";
8  const AsanaWorkspaceId = "567890";
9
10  return client.request.invokeTemplate('create_asana_task', {
11    context: {},
12    body: JSON.stringify({
13      data: {
14        projects: [AsanaProjectId],
15        workspace: AsanaWorkspaceId,
16        parent: "null",
17        name: title,
18        completed: false
19      }
20    })
21  });
22}

In this function,

1. We make a request to create a task with the workspace and project IDs. We have got them from Asana project and used them here.
2. Since the request would have to send request body dynamically and some other parameters dynamically, context variable is also passed dynamically when invoking the template.

After creating the task, you might want to handle errors and send notifications to the user accordingly. Let's change the contents of the createAsanaTaskAndGitHubIssue function as follows:

1/**
2 * 
3 * @param {String} asanaTitle - A title for the Asana task
4 * @param {String} githubTitle - A title for the GitHub issue
5 * @returns {Promise<String>}
6 */
7async function createAsanaTaskAndGitHubIssue(asanaTitle, githubTitle) {
8  try {
9    await createAsanaTask(asanaTitle);
10    try {
11      await createGitHubIssue(githubTitle);
12
13      client.interface.trigger('showNotify', {
14        type: 'success',
15        message: 'Asana task and GitHub issue created successfully!'
16      });  
17    } catch (error) {
18      console.error("Error: Failed to create github issue");
19      console.error(error);
20    }
21  } catch (error) {
22    console.error("Error: Failed to create asana ticket");
23    console.error(error);
24  } 
25}
26
27/**
28 * 
29 * @param {String} title - A title for the GitHub issue
30 * @returns {Promise<String>}
31 */
32async function createGitHubIssue(title) {
33  console.log("GitHub issue created");
34}

In this function,

1. We call the createAsanaTask function and handle the response. Depending on whether the task creation was successful or not, we trigger a notification.
2. After the task creation, we also call the createGitHubIssue function to create a GitHub issue. We have added a dummy log in this function for now. Let's complete this function in the next section of the tutorial.

To ensure everything is working correctly, follow these steps:

1. Run the App: Use the fdk run command to run your app.
2. Install the App: Install the app from the Custom App section in the Marketplace. The app will process the authorization.
3. Authorize the App: During the installation, authorize the app in the GitHub authorization page.
4. Create an task: Create a task in the Asana project by clicking on the button in the app UI.
5. Verify: Verify that the issue is created in the GitHub repository and the appropriate notifications are displayed based on the success or failure of the issue creation.

Does it work? Great! We have successfully integrated the app with Asana via API. Let's proceed to integrate with GitHub.