Skill Level: Beginner

In this recipe we will show how to integrate one Watson service into a dizmo and run it in dizmoViewer, and by extension provide a template for others (Alchemy, Speech to Text, Visual Recognition etc).



  1. dizmoViewer

    Interested in dizmo? Write us an email at contact@dizmo.com and we will send you the access data in order for you to being able to download dizmoViewer and install it.

    Create your free dizmoID at https://openid.dizmo.com/account/register.html
    You’ll need it later to login to dizmoViewer

  2. dizmoGen

    Install node.js from nodejs.org (available for Windows, Linux and Mac)

    Install Yeoman and dizmoGen with npm by following the instructions at https://www.npmjs.com/package/generator-dizmo

  3. toneAnalyzer dizmo

    Clone (or download) the ToneAnalyzer Git Repo from https://github.com/dizmo/toneAnalyzer

  4. Credentials

    Log in to your Bluemix Account

    From the top-right Menu choose the Category “Watson” and add the Tone Analyzer Service
    Leave the default settings and click on “create”
    Under “Service Credentials” you’ll find the username and password to access the just created service

    In the source code of the toneAnalyzer dizmo, in the file src/index.js, change the username and password on Line 9 and 10

  5. Build and install the dizmo

    Install the dependencies for the build tool by running the following command

    npm install

    Build the ToneAnalyzer dizmo by running the following command

    npm run make

    Start dizmoViewer and drag the file IbmToneAnalyzer-0.6.0.dzm from the build directory into the open dizmoViewer. This will install the dizmo and instantiate it.

  6. Run the toneAnalyzer dizmo

    Enter any text into the text area and press “Analyze” to have it analyzed by the ToneAnalyzer dizmo. The results will be shown in the three following tabs.

  7. Docking feature

    One of the stand-out features of dizmo is the ability of dizmos to interact and exchange data. In the case of the ToneAnalyzer dizmo, this means that it can not only take text entered in the text area of the dizmo itself, but also get text from another dizmo. This process is called docking and you can experience it by trying the following:

    Open the Creator (press the + button on the bottom-left) and open an Instance of the dizmo Store dizmo. In there, search for and install the Sticky Notes dizmo. Once you have installed it, an instance will be automatically opened. Enter any text that you like to have analyzed into the Sticky Notes dizmo. Then, drag the ToneAnalyzer dizmo alongside to the Sticky Notes dizmo, its border will begin to flash yellow. Drop the ToneAnalyzer dizmo, it will dock and transfer the text and analyze it. Now imagine how you could combine other Watson services with dizmos e.g dock an ImageAnalyzer dizmo to any image inside dizmoViewer.


  8. Source code

    Lets take a quick look at the source code of the ToneAnalyzer dizmo:

    The main function starts on Line 132 and is called getAnalysisFromText. It uses jQuery’s Ajax function to call the Tone Analyzer API with the provided text. The API response in JSON format is then parsed and visualized with the help of the drawProgress and textFromPercentage functions.

    If you look at index.html, you see that a dizmo uses standard html elements like radiobuttons and buttons. They all have html5 data attributes called dizmo-radiobutton and dizmo-button. Those elements are converted to dizmo styled elements by a library called dizmoElements, you can read more about it here: https://www.dizmo.com/docs/complete-guide/dizmoelements-library/

  9. Meet the Authors

    Markus Leutwyler

    Responsible for developer relations, Markus is passionate about technical communities and connecting like-minded digital folks. Beyond dizmo, his interests take a varied route from photography to 3d-printing. 

    Luke Allen

    With a worldwide GoToMarket experience across multiple techs, Luke is focused on business development across Europe. Unshakably addicted to English tea.

    If you have any questions, write us at sales@dizmo.com or support@dizmo.com

Join The Discussion