Blog

visual coding - randomized messaging

March 30, 2015 / Posted By: wotio team

When thinking about web automation we need to go beyond simple integrations and think of it as a class of programming that makes use of various distributed API's to be put to work backing parts of applications, or replacing them entirely. Where once all software was built and run on a single machine with localised libraries and runtimes, we now have the world's API's doing their one thing well, at scale, right at our fingertips.

That's pretty neat! It's an exciting future.

bip.io is purpose built to this end, and although it's a web automation framework, it's also a visual programming tool for building and easily maintaining discrete endpoints which can augment your own applications, using external and native API's.

I had the chance to build a new 'randomised integer' flow control recently and took it as an opportunity to not only build some useful Bips (essentially, distributed graphs), but also take advantage the 'app-like' characteristics of Bips by replacing the loading message on the bip.io dashboard. Anyone else on the team could now update the configuration as they like, no programming required. No sprint planning, no builds, no deployment plan. It was fun, quick to do and pretty useful, so here it goes!

In A Nutshell

We're going to generate the message in the dashboard loading screen

From a public Web Hook Bip that looks like this

Problem Space

So this is the most important part - Planning. The loading messages are generated randomly for each hit on the dashboard from a list of possibilities. When we look at a piece of existing code like :

$motds = Array(
  "message 1", 
  "message 2",
  "etc..."
);

define('MOTD', $motds[ array_rand($motds) ]);

... it can be distilled down to being just a 'list of strings'. One of those strings needs to be extracted randomly, stored and displayed somehow. And that's what this Bip should do.

I know we have a text templater that can contain a list, and ways to split lists of strings using flow controls. The randomisation part means there's some math involved, so the math pod is needed too. That bit should take care of the extraction requirements.

The logical steps of extracting a random string from a list will be (annotated with bipio actions) :

  • get the number of lines (templater.text_template)
  • generate a random number between 0 and the number of lines (math.random_int)
  • get every line number (flow.lsplit)
  • test that the line number matches the random number (math.eval)
  • if the line number matches the random number, then that's a random line (flow.truthy)

However, because Bips are asynchronous, distributed pipelines, there's no way to loop back all the possible outputs from that computation, I'll need somewhere to store the result for retrieval later. For that, I'll use a Syndication container, which can store line items (syndication.list).

Select A Web Hook Trigger

Web Hooks are a certain flavor of Bip which sits passively in the system and waits for messages to arrive before performing it's work. They're kind of like personal API's that can be called on demand with any ad-hoc data structure.

Find them by just going to Create A Bip > Create New Event and select Incoming Web Hook

Now I'm ready. While it's not completely necessary, it's useful to give web hooks a name. The name will become part of the URL. For this I called it random_motd - Random Message Of The Day, because it will behave similarly to unix motd's

Create Containers

Here's a little cheat if you're following along. Go ahead and plug this filter into the action search area message template,math,by line,truthy,store.

It should give you a list that matches pretty closely to the actions mentioned earlier, and look similar to

Add them all into the graph. When it comes to creating the syndication container, make sure to set replace mode, rather than append mode. This will make sure that new motd's aren't appended to the container, and that it's contents are replaced instead.

^^ This is really important and ties everything together in the end

Connect The Dots And Personalize

Whichever the preferred method is, by either connecting these in advance or step by step, eventually we'll need a graph that looks like this :

I usually connect them all up first and let bip.io try to figure out how data should be transformed, but it's personal preference. I start by dragging from the Web Hook icon to templater and so on, until the syndication container is the last node in the pipeline.

For each of the nodes, double click and set up these transformations

Templater - Set the template

Math - Generate random value

Flow Control - Split lines

Math - Select Random Line

Flow Control - Test Current Line Equals The Random Line

Syndication - Replace Into Container

Select A Renderer

Almost there, we have the pipeline defined but how is calling this endpoint going to return a random message? That's where Renderers come in. Renderers let a Web Hook Bip respond in custom ways beyond a simple 200 OK message by making use of RPC's provided by Actions themselves, but usually hidden.

What we want to do in this case, is serve the random line that has been stored in the syndication list container, back to the connecting client. Luckily syndication.list has a renderer to do just this, so I enable it by going to the Renderer tab and hitting 'Enable' for the 'Returns List Content' renderer under 'Syndication : current motd'

Makes Sense?

Ready To Save

Because it's a web hook, you'll generally need your username and API token to call it, but I don't care about authentication for this demo, so under the Auth tab, Authentiction should be set to 'none'. None auth means its available to anyone with the link.

try it

Or install it yourself

A couple of notes if you're building this yourself...

After the Bip has been saved it will appear in your list under My Bips, and callable as https://{your username}.bip.io/bip/http/random_motd

You'll need to prime the endpoint by calling it once, which will set the container content and give it something to respond with. After that, you're all set.

Video here

Happy Bipping!