Node-RED + WordPress = Magic

We have just returned home from the Grand Meetup, the yearly Automattic get together. For one week the entire company descends on a single location and this year it was Whistler in British Colombia, Canada.

We get to choose between working on a project, studying something new or our regular jobs for the week. This year I was leading a project. I have a soft spot for the projects. It is a good opportunity to work on something different and with a new group of talented Automatticians. It is also a great test to see what can be achieved in just three working days.

The project was to bring together two of my favourite open source projects. WordPress (of course) and Node-RED. Node-RED is a lesser known application that describes itself as:

a visual programming tool for wiring together hardware devices, APIs and online services in new and interesting ways.

Node-RED runs in the browser and allows you to create workflows that connect all kinds of hardware and software. If you have ever wanted to connect your smart lights to Twitter, Node-RED is the way to do it.

Screenshot-25-09-2017-11.27.04.png
The Node-RED UI

As an open source project Node-RED can act as a bridge between hundreds of different open, closed and proprietary systems. It is this flexibility that makes opens source so powerful and something that WordPress is no stranger to.

Although there are hundreds of nodes and flows for Node-RED already, there are not yet any for WordPress and this is what we set out to change. Over the three days we created a handful of nodes that integrate with both WooCommerce and WordPress.

Part of the project is to make a presentation to the rest of the company on the final day of the Grand Meetup. To understand the power and utility of Node-RED, it has to be demonstrated. With very little technical or development knowledge it is possible to create some very exciting workflows. We spent most of our project time focusing on the demos we wanted to share with the rest of the company.

For one of our demos we created a hypothetical small business, in this instance a wedding photographer was looking to make some extra money. As a photographer they use Instagram as a method of advertising and also as a way for guests to share their pictures of the big day. Each wedding has its own unique #hashtag but the content remains stuck within the walled garden of Instagram. We created a simple Node-RED flow that took an Instagram URL, scraped the images and created a WooCommerce product for each picture. In just a few seconds an entire store was populated with products. We then installed a third party fulfillment plugin for WooCommerce that allows you to print designs on mugs, t-shirts and that kind of thing. It felt pretty magical to create a business with just a few button presses.

Our next trick was to take the order confirmation emails and use a text to speech node to read new orders aloud during the presentation. Our colleagues had good fun with that one!

Node-RED could easily automate more aspects of an online shop. Prices could be adjusted based on the weather, low stock levels could be used to re-order inventory automatically and the design of a website could change based on sensors installed in a physical shop.

With the WordPress nodes it easy to dream up workflows that automate post creation, allow you to liberate content stuck on social media platforms and implement new ways of managing your site (for example through Slack).

On a more serious note there could be some interesting accessibility applications to explore too, especially around voice and non-traditional input methods. There is a huge amount of potential.

Our nodes are open source and the examples we demonstrated can be found in the wiki on GitHub. We would love to get some early feedback to refine the nodes before a wider release. We look forward to seeing what you create!

 

4 Comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: