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

Create a graphic word cloud of the most commonly used words on Twitter

Comments

Want to learn how to create a fully functional IBM Cloud app in just 10 minutes? Would you like to be able to demonstrate the real power of IBM 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.

IBM Cloud offers a powerful, open-standards-based environment for building, executing, and managing your applications.

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
Example word cloud

What you'll need to build a similar app

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

Building this app requires just 10 minutes if you follow these simple steps:

  1. Log in to IBM Cloud at http://www.bluemix.net/.
  2. Go to the catalog (https://console.ng.bluemix.net/catalog/).
  3. Click the Node-RED boilerplate and fill in the required data to create an instance.Screenshot showing Node-RED
    Screenshot showing Node-RED
  4. Specify an app name and click Create.Screenshot showing app name field

    Once 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
    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
    Screenshot showing Node-RED instance

    If you named the app app101-node-red, its route would be:
    http://app101-node-red.mybluemix.net.

  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.

    Toolchain
    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
    Public directory
  8. To set up your app, you need to add and modify these files in the public directory:
    • cloud.html
    • d3.layout.cloud.js
    • d3.v3.min.js
    Download these files to your workstation from GitHub at
    https://github.com/barabasj/Bluemix-App.
  9. Upload the files to the GIT repository by clicking File > Import > File or Zip Archive. Screenshot showing importing of files
    Screenshot showing importing of files
  10. Once 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
    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
    Screenshot showing importing of files

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

    Deploy changes
    Deploy changes

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

    Deployment                         finished
    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 panel to 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
    Welcome panel
  13. Enter your username and password, and click Next. Welcome                     panel, username and password
    Welcome panel, username and password
  14. Read through the general information panel, and click Next. General                     information panel
    General information panel
  15. Click Finish to complete the installation. Your configuration is saved and the Node-Red instance starts. Finish                     installation
    Finish installation
  16. Select Go to your Node-RED flow editor to access the Workflow Editor. Notice your application URL: {your-instance-name}.mybluemix.net.
  17. Enter your username and password and click Login to open the flow editor. 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\", \"&lt\", \"&gt\", \"his\", \"her\", \"pre\", \"are\", \"&amp\", \"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
    Screenshot showing imported application

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

    Screenshot showing imported application
    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
    Screenshot showing help info
  21. Open the Twitter node by double-clicking on it.Screenshot showing Twitter settings
    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
    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
    Screenshot showing debug GUI
  24. To display the word cloud created by the app, access the following URL:
    http://<app_name>.mybluemix.net/cloud.html. Screenshot showing word cloud app
    Screenshot showing word cloud app

Conclusion

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

IBM Cloud offers a powerful, open-standards-based environment for building, executing, and managing your applications. It has hundreds of services that you can use to enrich existing applications, or to create new ones. Web, cognitive, data, mobile, and integration are just some of the sample categories that are fully populated with usable services, multiple programing languages, and already-available runtimes.


Downloadable resources


Related topics


Comments

Sign in or register to add and subscribe to comments.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Cloud computing
ArticleID=1033890
ArticleTitle=Build an IBM Cloud app that rocks - in 10 minutes!
publish-date=07142017