Build an IBM Cloud app that rocks – in 10 minutes!

Want to learn how to create a fully functional cloud application in just 10 minutes? Would you like to be able to see the power of developing and deploying on the cloud quickly and painlessly?

If you answered yes, you’ve come to the right place. In this article, I describe a simple app that creates a graphic word cloud from Twitter feeds and teaches IBM Cloud in just 10 minutes.

In my quest to find simple apps that can be easily understood by any junior programmer, I found the Node-RED app, which uses Twitter feeds to create a graphic word cloud with the most commonly used words on Twitter. Node-RED is a tool for wiring together hardware devices, APIs, and online services in new and interesting ways.

Example word cloud

What you’ll need to build a similar app

  • An IBM Cloud account
  • A browser with up-to-date Java™

Building this app requires just 10 minutes, with the following simple steps:

  1. Log in to IBM Cloud at
  2. Go to the catalog (
  3. Click the Node-RED boilerplate and fill in the required data to create an instance.

    Screenshot showing Node-RED

  4. Specify an app name and click Create.

    Screenshot showing app name field

    After the process completes, the environment is ready to use. When you access the IBM Cloud dashboard, the Node-RED instance is in Running state.

    Screenshot showing running status

  5. Click Overview on the left to access the application information. The information instance is displayed.

    Screenshot showing Node-RED instance

    If you named the app app101-node-red, its route would be:

  6. To modify this app to meet your requirements, you need to have access to its code. IBM Cloud provides a way to allocate space in a GIT repository, where you can access application code and files. Create this space by clicking Enable, located in the lower-right corner, and then Create in the next panel.

    When the process finishes, you see the Toolchain.


  7. To access the code, click Eclipse Orion Web IDE, select your application on the left-hand side, and then click the public directory.

    Public directory

  8. To set up your app, you need to add and modify these files in the public directory:

    • cloud.html
    • d3.v3.min.jsDownload these files to your workstation from GitHub at

  9. Upload the files to the GIT repository by clicking File > Import > File or Zip Archive.

    Screenshot showing importing of files

  10. After you upload all the files, you need to publish all of the contents of the GIT repository to the running instance on IBM Cloud.

    Files imported

    To deploy the changes, press the arrow button. Another option is to enable the Live Edit switch to deploy every change in auto mode.

    Screenshot showing importing of files

    You see a (deploying) state while it is processing.

    Deploy changes

    When the deployment process finishes, the green sign shows (running: normal) again.

    Deployment finished

  11. To create the Node-RED app that will feed the cloud.html file that you just uploaded and deployed, open the Node-RED editor in the browser by clicking the Link to Application icon

    Welcome panelto access the deployed application.

  12. The first time you run a Node-Red instance, you need to specify its properties. On the first panel, click Next.

    Welcome panel

  13. Enter your username and password, and click Next.

    Welcome panel, username and password

  14. Read through the general information panel, and click Next.

    General information panel

  15. Click Finish to complete the installation. Your configuration is saved and the Node-Red instance starts.

    Finish installation

  16. Select Go to your Node-RED flow editor to access the Workflow Editor. Notice your application URL: {your-instance-name}

  17. Enter your username and password and click Login to open the flow editor.

    Flow editor

    The left-hand nav bar contains all of the tools, services, and functions that you need to compose IBM Cloud apps inside the Node-RED environment. Using the simple drag-and-drop interface, you can build just about any complex app you like. In addition, you can import and export complex code to transfer and reuse. You can use this process to populate your app quickly and easily.

  18. One of the files in the GitHub repo mentioned above is wordcloud.txt. This file contains the text that’s exported from the app that you are creating. Select and copy the contents of wordcloud.txt:

    [{"id":"1a31b9e0.994c8e","type":"websocket-listener","path":"/ws/wordcloud","wholemsg":"false"},{"id":"99d296e2.395548","type":"twitter in","twitter":"","tags":"Cloud, cloud","user":"false","name":"","topic":"tweets","x":167,"y":179,"z":"878ea8e9.7b50f8","wires":[["a3b950c1.8e406"]]},{"id":"a3b950c1.8e406","type":"function","name":"Filter Tweets","func":"\nvar tweets = context.tweets || [\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\",\"\"];\n\nif (msg.tweet.lang == \"en\") {\n\n\tvar foo = msg.tweet.text;\n\tif (foo.indexOf(\"http\") != -1) {\n\t\tfoo = (foo.split(\"http\"))[0];\n\t}\n\tif (foo.toLowerCase().indexOf(\"job\") != -1) return null;\n\tfoo = foo.replace(/[^\\x00-\\x7F]/g, \"\");\n\t\n\tif (tweets.indexOf(foo) == -1) {\n\t\ttweets.shift();\n\t\ttweets.push(foo);\n\t\t//console.log(tweets);\n\t\tcontext.tweets = tweets;\n\t\treturn {payload:tweets};\n\t}\n}\nreturn null;\n","outputs":1,"x":303,"y":234,"z":"878ea8e9.7b50f8","wires":[["b44ded04.65f44"]]},{"id":"b44ded04.65f44","type":"delay","name":"","pauseType":"rate","timeout":"5","timeoutUnits":"seconds","rate":"12","rateUnits":"minute","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":true,"x":410,"y":181,"z":"878ea8e9.7b50f8","wires":[["da88f4e8.c8d43"]]},{"id":"da88f4e8.c8d43","type":"function","name":"Count words in array","func":"var index = {};\n\nvar garbage = [ \"and\", \"for\", \"but\", \"the\", \"<\", \">\", \"his\", \"her\", \"pre\", \"are\", \"&\", \"with\"];\n\nfunction countWords(sentence) {\n\twords = sentence\n\t\t.replace(/[.,?!;()\"'-]/g, \" \")\n\t\t.replace(/\\s+/g, \" \")\n\t\t//.toLowerCase()\n\t\t.split(\" \");\n\t\n\twords.forEach(function (word) {\n\t\tif ((word.length > 2)&&( isNaN(Number(word)) )&&( garbage.indexOf(word.toLowerCase()) == -1 )) {\n\t\t    if (!(index.hasOwnProperty(word))) {\n\t\t        index[word] = 0;\n\t\t    }\n\t\t    index[word]++;\n\t\t}\n\t});\n\t\n\t//console.log(Object.keys(index).length);\n\t//return index;\n}\n\nfor (var i in msg.payload) {\n\tcountWords(msg.payload[i]);\n}\n\nmsg.payload = JSON.stringify(index);\n\nreturn msg;","outputs":1,"x":533,"y":237,"z":"878ea8e9.7b50f8","wires":[["9149d48d.cd18a8","57f87a0.0e58808"]]},{"id":"9149d48d.cd18a8","type":"websocket out","name":"","server":"1a31b9e0.994c8e","client":"","x":765,"y":148,"z":"878ea8e9.7b50f8","wires":[]},{"id":"57f87a0.0e58808","type":"debug","name":"","active":true,"console":"false","complete":"false","x":769,"y":277,"z":"878ea8e9.7b50f8","wires":[]}]
  19. Next, click Import > Clipboard in the Node-RED editor.

    Screenshot showing imported application

    The objects that represent the application are shown in the following image:

    Screenshot showing imported application

  20. You need to configure some nodes in order to get the application to work. The flow starts reading public tweets accessed by a personal account, filtering the results with a trending topic that ensures that you have matches to be processed by your app. Open the first node (Twitter input):

    Screenshot showing Twitter node

    The help information is displayed on the right:

    Screenshot showing help info

  21. Open the Twitter node by double-clicking on it.

    Screenshot showing Twitter settings

  22. Enter your Twitter ID and any topic you want to display. You can obtain better results by specifying Trending Topic.

    To exclude all non-significant words from the resulting tweets, depending on the language of the matching tweets, you can update the “Count words in array” function node (line 3) to reflect the selected ones. The variable “garbage” must contain all words selected to be ignored by the counters.

    Screenshot showing counting words in array function

  23. To publish the changes, click Deploy in the upper right.

    Screenshot showing deploy button

    Every time a change to an object is made, a little dot is displayed on the node. Once the app has been deployed, the dot disappears.

    Screenshot showing node changed flag

    To debug your app and display the processed tweets, a debug node has been added to the flow:

    Screenshot showing debug node

    Matching tweets are displayed in the debug window of the GUI:

    Screenshot showing debug GUI

  24. To display the word cloud created by the app, access the following URL:


    Screenshot showing word cloud app


Congratulations! You now know how to create a rockin’ IBM Cloud app quickly and easily.

You can try out more applications and services on the IBM Cloud open-standards-based environment for building, running, and managing applications. You might choose to enrich existing applications, or to create new ones. You have access to categories such as cognitive, data, mobile, and integration populated with usable services, multiple programing languages, and already-available runtimes.