a5878db74baa36ad0ae9cda759f9f2f8

Javier Centurion

We've just shipped a brand new editor for Webtask to go from 0 to code in seconds!


## Serverless Development Reimagined with the New Webtask Editor

If you are building serverless applications, then you want to get from zero to code in seconds. We've just shipped a brand new editor for Webtask which makes this desire a reality!

The Webtask Editor is a rich online environment for creating, editing and testing your Webtasks. In addition, it allows you to manage secrets, configure github two-way sync, view realtime logs, and more. It makes serverless development a breeze and you _never have to leave the browser or install anything to use it_. And with our out-of-the-box support for over 1000+ [Node modules](https://webtask.io/docs/modules?utm_source=auth0.com&utm_medium=blog&utm_campaign=webtask_editor_launch), you can get a lot of work done.

Let’s take a quick walkthrough of the experience.

## Creating a New Webtask
With the new editor, getting started can't get any easier. Just head to [webtask.io/make](https://webtask.io/make?utm_source=auth0.com&utm_medium=blog&utm_campaign=webtask_editor_launch), log in with your preferred credentials, and you'll be on your way. 

![Webtask Editor](https://images.ctfassets.net/23aumh6u8s0i/60cS0X3pZZqIkFYxNqA82I/7d4a4e2d45f2ecb51cea550e9f676292/screenshot)

From the popup dialog, you will see a few options:

- *Webtask*: this creates an empty webtask.
- *Cron*: this creates an empty scheduled webtask. 
- *Pick a template*: start coding based on selecting from a library of templates.
- *Import from GitHub*: import your code from a Github repo to a webtask.

### Webtask
Selecting "Webtask" will put you right into the editor where you can start authoring a new task.

![Create a Webtask](https://images.ctfassets.net/23aumh6u8s0i/7DNhJv22bem62OfkNLNCDY/609cf51bdc17b3056e647bcf88dbb997/new-webtask)

### Cron
Cron tasks are great for executing a task on a schedule, such as checking a Twitter feed for mentions. When you create a new cron task, you will see two panes. The left pane is the scheduler where you specify the schedule for your task and the right pane is where you put the code for your task. 

![Create a Cron with Auth0 Webtask](https://images.ctfassets.net/23aumh6u8s0i/aktaX2AvsI1rOz9eLbSZG/2794b8295c0ff1f180e24cc15d9773aa/new-cron)

For more info about cron, check [this document](https://webtask.io/docs/cron).

### Templates
Templates let you choose from a selection of starter code that you can use for building your tasks. We've included templates for integrating Webtask with common services like [Stripe](https://stripe.com), [Slack](https://slack.com), [Sendgrid](https://sendgrid.com), [Github](https://github.com), [Twilio](https://twilio.com), [Facebook](https://facebook.com), and many more. 

![Webtask Templates](https://images.ctfassets.net/23aumh6u8s0i/4ZgecL7OpNB1voK28SYpLH/2d526ba1ad9d0bc02e29ee3f04c7055a/templates)

### Importing from GitHub
If you have existing Webtasks in a repo, you can import them directly into Webtask by pointing to the repo.

## Editor Features
Now let's take a look at some of the awesome editor features.

### Runner and Logs
We've designed the new editor to streamline your development and allow you to iterate fast. To help with testing, the editor comes with an intergrated runner. In the runner you can set different HTTP methods, parameters, headers, etc. To help with debugging, we've added a realtime logs viewer that lets you view you tasks console output while it is executing.

![Webtask runner and logs](https://images.ctfassets.net/23aumh6u8s0i/7gBevZ4sa1qmi8C7NnBHLW/5dab3616501bb17f20a149ef55770ce1/runner)

### Secrets Management
If your tasks are talking to other authenticated services, you don't want to store credentials in the code. You can define new secure secrets right in the editor, which are then accessible from the code via the `context` object.

![Secrets management](https://images.ctfassets.net/23aumh6u8s0i/4tIT2Q38DvtD7hP0w7dE6z/698c9eada30c221733d8fb50910fec28/secrets)

### GitHub Integration
To take your experience up a notch, we've baked in Github integration support. This allows you to sync your webtask with a file in a Github repo. You can enable this to work bi-directionally, such that commits and pull requests to the repo result in the task automatically being deployed and any changes in the editor result in commits to the repo. You can also bind multiple tasks to different branches of the same repo, thus having dev, test, and prod versions of your tasks. It's super powerful!

![GitHub integration with Webtask](https://images.ctfassets.net/23aumh6u8s0i/70PeF2y7xmgj64x8XuU6Tr/5f1640d312490030496af901ed16ec95/github-integration)

### Task Management
Press `CMD + P` or click on the list or on the "Webtasks" icon and you'll see a list of all your tasks. From the list, you can switch to a different task, open a task in a different window, or even delete tasks. You can type into the search bar to filter the list of displayed tasks.

![Webtask Quicksearch](https://images.ctfassets.net/23aumh6u8s0i/013ieClwPQkwz7ZgygiQKT/94a6e743044be87d83bd432ec5bc75c9/quicksearch)

### Shortcuts
The new editor has tons of shortcuts for common actions within the editor as well as additional features like beautifying your code. You can see the list of shortcuts by clicking on the Shortcuts icon in the upper right corner.

![Webtask shortcuts](https://images.ctfassets.net/23aumh6u8s0i/5s8ULTLcTgcg0p459psONK/9fb487afcd17f69e08098cb9d1bdb924/shortcuts)

### CLI Support
If you like using our [CLI](https://webtask.io/cli?utm_source=auth0.com&utm_medium=blog&utm_campaign=webtask_editor_launch), we've got you covered. You can go right from the shell to the editor with the `edit` command, i.e. `wt edit mytask`.

![Webtask CLI support](https://images.ctfassets.net/23aumh6u8s0i/5Xi5ZMbIkevHxrD3eaMgMi/e8d4f572b0627611def2cd6ed385b3ab/from-cli)

## Go Try It! 
The new Webtask Editor is an amazing tool for serverless development. It will let you instantly go from idea => code => running. Not only do you get a rich browser-based authoring experience, but you get a tool to secure, test, and debug your code. Go get started playing with the Webtask editor now: [webtask.io/make](https://webtask.io/make?utm_source=auth0.com&utm_medium=blog&utm_campaign=webtask_editor_launch). Also check out our documentation at [webtask.io/docs/editor](https://webtask.io/docs/editor?utm_source=auth0.com&utm_medium=blog&utm_campaign=webtask_editor_launch).


Serverless development reimagined with the new Webtask Editor

bruno-krebs

I am passionate about developing highly scalable, resilient applications. I love everything from the database, to microservices (Kubernetes, Docker, etc), to the frontend. I find amazing to think about how all pieces work together to provide a fast and pleasurable experience to end users, mainly because they have no clue how complex that "simple" app is.

R&D Content Architect

Bruno Krebs

Develop an Angular app from scratch, with serverless REST API, security and persistence and deploy it to GitHub Pages in no time.

Serverless REST API with Angular, Persistence and Security

54f3fecf3ce3bbef2d7a62b4f0496de2

Thameera Senanayaka

Learn how to create a bot that posts mentions in Zendesk to relevant Slack users using the Auth0 Webtask platform



If you’re like me, whenever you get a cool idea to create an app, the mere thought of preparing and maintaining a server always gets you down—and then there’s all the security considerations you have to think about. The advent of PaaS services like Heroku solved this problem to some extent. Now that serverless technologies have come into the mainstream, making your ideas reality is easier than ever.

Serverless platforms allow you to focus more on the code and get real work done without worrying about managing servers. Many people prefer the term function-as-a-service (FaaS) instead of serverless to serverless, because what essentially functions are the unit of application logic in this realm. Auth0's [Webtask](https://webtask.io/) is a hassle-free serverless platform you can use to deploy and run functions.

At Auth0, we tend to solve most of our problems using Webtasks. Here's an example of how we used them to create a Slack bot to tackle a pressing need we had.

## Go Beyond Basic Slack and Zendesk Integration

We’re not trying to brag, but Auth0 is known for its wonderful customer service. We use Zendesk to manage the hundreds of customer queries we get every day. Since this is an integral part of our day-to-day work, we use multiple Zendesk-to-Slack integrations to make sure we respond to every customer query in a timely manner.

For a long time, we needed the ability to mention someone else in a ticket. The only out-of-the box option was to cc that person’s email, but this had its own drawbacks. We wanted to achieve an integration that would go hand-in-hand with our primary method of communication: Slack. Zendesk has some basic Slack integration options, but it’s not programmable enough to handle mentions.

Then we thought, “Can we use a webtask to achieve this?”

## Webtasks to the rescue

Of course we can! Any time you want to automate something, you can use a webtask. We quickly implemented a Zendesk-mentions-to-Slack integration in a webtask. We didn’t need to procure any servers or worry about how much computing power or uptime we would need. All we had to do was write the code and create a trigger in Zendesk.

## Overview

Here’s an overview of the data flow in our app:

![Slack and Zendesk Integration](https://images.ctfassets.net/23aumh6u8s0i/4FPj0WOpBZklsSsdchQd0V/507cef8b51d949b8b61e23c83a55f5f5/slack-and-zendesk-integration)

Peter, a Zendesk agent, mentions his colleague Rodrigo as `<@rodrigo>`. That’s Rodrigo’s Slack username. A Zendesk trigger picks up the comment with a mention and does an HTTP POST request to our webtask. The webtask analyzes the comment and determines the exact Slack user (`@rodrigo` in this case). It then calls the Slack API to send a direct message to `@rodrigo` with details about the comment. If Peter mentioned a Slack channel name instead of a username, it would be sent to that specific Slack channel.

To set this up, we needed to do the following:

- Create a Slackbot
- Write and deploy the webtask
- Create a trigger in Zendesk

## 1. Create a Slackbot

Simply visit [this page](https://my.slack.com/services/new/bot) and enter a name for the bot. A new Slack bot will be created. After it has been created, an API token will be assigned to the bot. Make a note of this because we will need it in the next step.

## 2. Create the webtask

Now the fun begins. First, if you haven’t set up the webtask CLI, follow the three simple steps on this [webtask.io](https://webtask.io/cli) page. Once you’re done, it’s time to write the code.

Here's the code we used at Auth0. You may edit it to your liking.

```javascript
'use latest';

const request = require('request');
const _ = require('lodash@4.8.2');

const baseURL = 'https://slack.com/api/';
const usersListEndpoint = 'users.list';
const imOpenEndpoint = 'im.open';
const chatPostEndpoint = 'chat.postMessage';
let token;

/* Call the given endpoing in Slack API */
const callAPI = (endpoint, form, cb) => {
  request.post(baseURL + endpoint, {form}, (err, res, body) => {
    if (err) return cb(err);

    body = JSON.parse(body);
    if (!body.ok) return cb(body.error);

    return cb(null, body);
  });
};

/* Find Slack ID of the user with given username */
const findUser = (username, cb) => {
  callAPI(usersListEndpoint, {token}, (err, body) => {
    if (err) return cb(err);

    const user = _.find(body.members, {name: username});

    if (!user) return cb(`User ${username} not found`);
    cb(null, user.id);
  });
};

/* Open a direct msg channel with given Slack user id */
const openIM = (user, cb) => {
  callAPI(imOpenEndpoint, {token, user}, (err, body) => {
    if (err) return cb(err);
    cb(null, body.channel.id);
  });
};

/* Post message to specified Slack channel */
const postMsg = (channel, data, cb) => {
  const obj = {
    title: `#${data.id} | ${data.title}`,
    title_link: 'https://auth0.zendesk.com/agent/tickets/' + data.id,
    fields: [
      {title: 'Mentioned by', value: data.author},
      {title: 'Comment', value: data.comment},
      {title: 'Tags', value: data.tags}
    ]
  };
  callAPI(chatPostEndpoint, {
    token,
    channel,
    as_user: false,
    username: 'Zendesk Mentions Bot',
    icon_url: 'http://i.imgur.com/IhN4IzR.png?1',
    text: 'You were mentioned in this ticket:',
    attachments: JSON.stringify([obj])
  }, (err, body) => {
    if (err) { console.log(err); return cb(err); }
    cb(null);
  });
};

/* Extract mentioned user's name from comment */
const extractName = (comment) => {
  const start = comment.indexOf('<@') + 2;
  const end = comment.substr(start).indexOf('>');
  return comment.substr(start, end);
};

module.exports = (context, cb) => {

  // Slack bot token
  token = context.data.BOT_TOKEN;

  const name = extractName(context.data.comment).toLowerCase();

  findUser(name, (err, id) => {
    if (err) {
      // If no such user, assume it's a channel
      return postMsg(name, context.data, cb);
    }

    return openIM(id, (err, channelId) => {
      if (err) { console.log(err); return cb(); }
      else postMsg(channelId, context.data, cb);
    });
  });

};
```

That’s less than 100 lines of code!

The entry point to the code is the line starting with `module.exports = (context, cb) => {`. When the webtask is triggered, this function will be executed, which will in turn call the rest of the functions when necessary.

For security reasons, we add the bot’s token as a configuration (as described below) instead of in the code. Then we find the mentioned name from the comment text. We check Slack to see if such a user exists. If not, we assume it’s a channel name and post it into the channel with that name. If a user is found, we open an IM channel with that user and post the message.

Save this code in a file named `slackmention.js` and enter the following command to deploy it as a webtask:

```
wt create --secret BOT_TOKEN=<Slack bot token from step 1 goes here> slackmention.js
```

After the webtask is deployed, the CLI will present you with its unique URL. We will use this in the next step.

## 3. Create a trigger in Zendesk

The last step is to tell Zendesk to call our webtask when it sees a comment that might have a mention in it. You need to be an admin in Zendesk to do this. If you are not, reach out to your friendly Zendesk admin (and don’t forget to give them a cookie!).

In Zendesk, go to **Settings > Extensions** and create a new HTTP target with the webtask’s URL as the URL (obtained in Step 2), POST as the method, and JSON as the content type.


Now go to **Settings > Triggers** and create a new trigger with _‘Ticket: Comment text...’_ as the condition, “Contains the following string” as the op, and `<@` as the string. The performed action should be _‘Notifications: Notify target’_ set to the HTTP target created above. Set the JSON body as follows:

```json

{ "id": "{{ticket.id}}", "title": "{{ticket.title}}", "comment": "{{ticket.latest_comment}}", "author": "{{ticket.latest_comment.author.name}}", "tags": "{{ticket.tags}}" }

```

## Test it!

Now we are all done. To test our new setup, add the following comment in a new (or existing) Zendesk ticket. You can add it to a public comment or an internal comment.


```
Hello <@thameera>!
```

Replace `thameera` with your Slack username, of course. If you performed all the steps in order, you will get a Slack notification like this:

![Slack mention in the Zendesk ticket](https://images.ctfassets.net/23aumh6u8s0i/6vYCYmGihKFIEtHrecV9Kd/04d132295f04d63293749edb6f7b0f0a/zendesk-bot-with-slack-mention)

That’s it! You can customize the trigger and the webtask to suit your company’s needs and deploy your own Zendesk-to-Slack-mentions implementation in a few minutes. For example, you can modify it to send an email or send a DM via HipChat if that’s your chat application of choice.

## Conclusion

The next time you need to create a bot, automate something, or write a program, remember that you can use a webtask to say no to [yak shaving](http://www.hanselman.com/blog/YakShavingDefinedIllGetThatDoneAsSoonAsIShaveThisYak.aspx) and focus on your code.

You can start experimenting with webtasks by creating a free Auth0 account below or heading directly to [https://webtask.io](https://webtask.io). Enjoy!


Build a Serverless Slack Bot with Webtask.io

99c4080f412ccf46b9b564db7f482907?s=200 avatar

99c4080f412ccf46b9b564db7f482907?s=200

I'm currently a Senior Developer Advocate at MongoDB. I'm also a Google Developer Expert for Web Technologies and spend most my time giving talks at conferences and meetups, mentoring developers and running workshops, and creating online content to help technology professionals.

Former Auth0 Employee

Ado Kukic

Learn how to build a serverless app with Lambda, the function-as-a-service platform from Amazon. Find out how AWS Lambda stacks up against Webtask.

"faas"