DialogFlow: Moving away from the inline editor
By: Eliza Camber
Tags: Dialogflow Fulfillment, Dialogflow, Firebase Cloud Functions, Actions On Google, Firebase

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).

If you haven’t installed node yet, you need to do it from here. Install the Firebase CLI (command line interface) using this command: npm install -g firebase-tools 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 Run firebase login to log in via the browser and authenticate the firebase tool. Run npm install . This will install all the necessary npm packages . 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?