建立你的first Chat app - Part 3: Creating and inserting templates

In the previous tutorials in the series, you created the starter files for an app named Learn More and modified the HTML file that's iframed into the chat interface in Zendesk Chat. The HTML file so far displays only the title and footer of your app. In this tutorial, you'll create a template to display a form to search for articles on Wikipedia. You'll also create a template to display an error message in case there's a problem retrieving the data.

Templates are typically the building blocks of an app's user interface. They define different states, or views, for an application. For example, one template can contains an HTML form for entering search terms, and another template can dynamically list the search results.

This tutorial covers the following tasks:

1. Adding a templating engine
2. Creating a template for searching Wikipedia
3. Inserting the template in your app
4. Creating a template for error messages

This tutorial is part of a series on building a Zendesk app:

• Part 1 - Laying the groundwork
• Part 2 - Designing the user interface
• Part 3 - Creating and inserting templates - YOU ARE HERE
• Part 4 - Getting data
• Part 5 - Installing the app in Zendesk Chat

Adding a templating engine

You can use any templating engine -- and whatever version -- you like with your apps. For this project, you decide to useHandlebars.js, one of the most popular templating libraries.

• Import the Handlebars library in your app by inserting the following