DialogFlow: Moving away from the inline editor

Image credits: dialogflow.com

As a developer, Dialogflow’s webhook is in my opinion what makes the platform so powerful. From manipulating contexts to personalizing your agent, you can do magic!

If you’re interested in finding out more about personalizing your agent, check this out:

Personalize for each user & device: the magic Conversation object

While the inline editor is ideal for small projects or prototypes that have just a few lines of code in the fulfillment, it’s a horror story when it comes to big projects, with many functions and many people working on them. There are 3 main reasons.

The first and most obvious when you open the console is that the inline editor block is tiny and you cannot resize it. Put in there 50 functions and you’ll spend half of your working time scrolling rather than coding.

The second reason is that it takes time to deploy and if you’re testing the responses or the logic of one function waiting all this time to run it’s just painful.

The third and the most important one is that the inline editor has no version control; if you break something (or even worse someone else broke something), you can’t revert the changes unless you manually do it using your memory rather than a server’s. On top of that, if there are multiple people trying to work on this project, that’s never gonna work.

Using the webhook

All of problems mentioned above can be easily solved by using an external webhook. Many think that by using the external webhook, you can’t use the Firebase functions anymore, but this is not the case. Some others told me that they tried to enable it and see an “unknown” pre-filled url that they have no clue where it’s coming from, so they logically switched back to the inline editor. Getting rid of that inline editor, especially if you’re not familiar with Firebase, can be intimidating. Once you’re familiar with it though, it’s pretty straightforward. So here’s how;

We are going to start by enabling the inline editor.

Once it’s enabled, for an easier access to the project’s Firebase console, I always click on the button on the left side, right under the editor that says “View execution logs in the Firebase console”. Once clicked it will open the firebase console on a new tab in your browser.

There are 4 menu tabs. We are interested in the first one.

There we can see the details of the function that DialogFlow created for us. Copy the trigger url found here and go back to your DialogFlow console under the fulfillment menu.

Before we do disable the inline editor and enable the webhook, click on the download button on the right of inline editor.

Now you can enable the webhook. This automatically will disable the inline editor. For most of the projects the webhook url is already pre-filled but in case it’s not, paste here the function’s trigger url you copied from the Firebase console.

Great! Half way there :)

Next thing we got to do is to extract the files from the zip folder we downloaded. If you didn’t change the name of the downloaded file when saving it, it should be “dialogflowFulfillment.zip”. As you see there’s also a README.md file to help you from here, but I’m going to list all of the remaining steps for your convenience (else you can follow this link).

1. If you haven’t installed node yet, you need to do it from here.
2. Install the Firebase CLI (command line interface) using this command: npm install -g firebase-tools
3. If you had installed the Firebase CLI in the past, make sure you’re using the latest libraries by running: npm install firebase-functions@latest firebase-admin@latest — save
   npm install -g firebase-tools
4. Run firebase login to log in via the browser and authenticate the firebase tool.
5. Run npm install. This will install all the necessary npm packages .
6. All you have to do now is to open the project in your favorite IDE. I’m using mostly IntelliJ IDEA, but you can use any other editor. For a free editor, I strongly recommend Sublime Text.

How to run

There are 2 ways you can run a firebase function. The first one (and the fastest one) is locally on your machine. To run locally you can use this command from your project’s directory:

firebase serve --only functions

You can run locally when you want to check a function’s logic outside of the DialogFlow project. For instance if you want to check if you’re setting the contexts right for a specific intent, you can print the response object on your console and make sure it’s correct before passing it to the agent object and testing it on the DialogFlow platform.

The emulator streams logs from your functions to the terminal window where they run. It displays all output from console.log(), console.info(), console.error(), and console.warn() statements inside your functions.

Once you get the functionality right, you can deploy your changes by running:

firebase deploy --only functions

This will take a couple of seconds. Once it’s deployed, you navigate to the DialogFlow or the Actions on Google platform and test your agent. You’re done!

Don’t forget to put your project under a repository ;-)

Conclusion

The webhook is one of the most —if not the most — powerful tools of the DialogFlow platform. While the inline editor may be sufficient for small projects with not much logic in the webhook, taking this externally is faster, more secure —as you can VC it — , easier to maintain, easier to code, and it takes only a few minutes to switch from the inline editor to an external Firebase project. Why wait?

Did you like this article? For more tips, tricks & articles like this one, follow me on Twitter and give this a clap!