Conversation Car Dashboard Demo Application

This application demonstrates how the Conversation service uses intent capabilities in an animated car dashboard UI.

For more information about Conversation, see the detailed documentation.

See the demo.

                                                             

How the app works

The app interface is designed and trained for chatting with a cognitive car. The interface allows the user to enter input either using text, in the edit field at the bottom of the UI or via speech via by pressing the mic button. Your questions and commands are run against a small set of sample data trained with intents like these:

• turn_on
• weather
• capabilities

These intents help the system to understand variations of questions and commands that you might submit. For example, if you say "Wipers on" or "I want to turn on the windshield wipers", the system understands that in both cases your intent is the same and responds accordingly.

Getting Started using Bluemix

Before you begin

1 Ensure that you have a Bluemix account.

2 Ensure that you have the necessary space available in your Bluemix account. This action deploys 1 application and 3 services.

• You can view this on your Bluemix Dashboard. Tiles will show what space you have available.
• For example, for Services & APIS

            

Deploy the App

1 Click this button to Deploy to Bluemix.

            

2 Log in with an existing Bluemix account or sign up.

3 Select your Organization, Toolchain Name, Region, and Space, then click theDeploybuton.

            

• This performs multiple actions:

  • Creates the app
  • Creates a Conversation service instance that the user needs for workspace creation
  • Creates instances for a Speech To Text service and Text To Speech service

• Yourcar-dashboardapp is ready now, clickDelevery Pipelineto deploy your app.

            

5 Once your app has been built and deployed, navagate to your Bluemix Dashboard and import a workspace.

            

Using Cloudfoundry CLI tool to deploy your application

To build the application:

1 Download and install the Cloudfoundry CLI tool.

2 Git clone the project https://github.com/watson-developer-cloud/car-dashboard

3 Navigate to the car-dashboard folder

4 Connect to Bluemix in the command-line tool:

For US Region

$ cf api https://api.ng.bluemix.net

$ cf login -u <your user ID>

5 Create the Conversation service in Bluemix:

$ cf create-service conversation free conversation-service

6 Push it live:

$ cf push <application-name>

The name you use determinates your application URL initially, such as <application-name>.mybluemix.net.

Getting Started locally

Before you begin

1 Ensure that you have a Bluemix account. While you can do part of this deployment locally, you must still use Bluemix.

2 In Bluemix, create a Conversation Service.

• Copy the Service Credentials for later use.
• Import a workspace

3 OPTIONAL: If you want to use Text To Speech and/or Speech To Text in your locally runnning app, create a text-to-speech service and/or a speech-to-text service like you did in step 2.

• Copy the Service Credentials for later use.

Running locally

The application uses Node.js and npm.

1 Copy the credentials from your conversation-service service in Bluemix to a .env file in the root.

• Look at .env.example as an example to create your .env file.

2 OPTIONAL: If you want to use Text To Speech and/or Speech To Text in your locally runnning app, copy the credentials from your text-to-speech service and/or speech-to-text service in Bluemix to a .env file in the root.

• Look at .env.example as an example to add to your .env file.

3 Use the Conversation tooling app to create a workspace, as described above, and add the workspace ID environment variable to the .env file. For details about obtaining the workspace ID, see Step 6 - 7 in the next section.

4 Install Node.js.

5 Open the terminal, go to the project folder, and run this command:

npm install

6 Build the UI by running this command:

npm run build

7 Start the application by running this command:

npm start

8 Open http://localhost:3000 in a browser.

Note: If you are interested in deploying you local application or the changes you have made locally to Bluemix, go to this section

Import a workspace

1 You need to import the app's workspace. To do that, go to the Bluemix Dashboard and select the Conversation service instance. Once there, select the Service Credentials menu item.

            

2 Select ADD CREDENTIALS. Name your credentials then select ADD.

3 Return to the Manage menu item and select Launch Tooling. This opens a new tab in your browser, where you are prompted to login if you have not done so before. Use your Bluemix credentials.

4 Download the exported JSON file that contains the Workspace contents.

5 Select Import. Browse to (or drag and drop) the JSON file that you downloaded in Step 4. Choose to import Everything(Intents, Entities, and Dialog). Then select Import to finish importing the workspace.

6 Refresh your browser. A new workspace tile is created within the tooling. Select the menu button within the workspace tile, then select View details:

            

In the Details UI, copy the 36 character UNID **ID** field. This is the **Workspace ID**.

            

7 Return to your application, either in your local dev environment, or in Bluemix. If running on Bluemix, you need to add environment variables.

For more information on workspaces, see the full Conversation service documentation.

Adding environment variables in Bluemix

1 In Bluemix, open the application from the Dashboard. Select RUNTIME on the left side menu.

2 Select ENVIRONMENT VARIABLES and scroll down to USER-DEFINED.

3 Select ADD.

4 Add a variable with the name WORKSPACE_ID. For the value, paste in the Workspace ID you copied earlier. Select SAVE.

            

5 Restart your application.

Troubleshooting in Bluemix

In the Classic Experience:

• Log in to Bluemix, you'll be taken to the dashboard.
• Navigate to the the application you previously created.
• Select Logs.

            

• If you want, filter the LOG TYPE by "APP".

            

In the new Bluemix:

• Log in to Bluemix, you'll be taken to the dashboard.
• Select Compute

            

• Select the application you previously created.
• Select Logs.

            

• If you want, filter the Log Type by selecting the drop-down and selecting Application(APP).

            

With CLI

$ cf logs < application-name > --recent

License

This sample code is licensed under Apache 2.0. Full license text is available in LICENSE.

Contributing

See CONTRIBUTING.

Open Source @ IBM

Find more open source projects on the IBM Github Page.