How to Build a Spreadsheet-powered Website
Learn how to build a spreadsheet-powered website using Monday.com and Reshuffle Open Source that lets people make changes without the web team having to worry.
Join the DZone community and get the full member experience.Join For Free
Is your marketing team frustrated with having to wait for simple website updates? Is their team already using Monday.com, the team management tool? If so, we have a quick and easy solution to give non-technical people a structured and limited way to make updates to a webpage (without fearing they’ll mess up the site!) right from within Monday by using Reshuffle Open Source — it’s a win-win solution. Plus, by using the Monday interface that they’re already used to, marketers won’t have to deal with yet one more tool.
Let’s say Marketing wants to continually add more customer case stories to the Customer Story web page. It’s a repeatable process that always contains the same content components (title, copy, image). You can give Marketing the autonomy they need to update this page themselves while staying within the parameters you set for the site.
By creating a web page spreadsheet template in Monday.com that defines the components for the page, you can use Reshuffle’s connectors to integrate the spreadsheet to the website and enable marketers to make updates in the spreadsheet that will automatically publish on the site. Marketers just need to fill in the component fields in the Monday spreadsheet, and Reshuffle will publish it on the website!
Reshuffle’s open-source integration framework makes it easy. In this article, learn how to build a spreadsheet-powered website using Monday that lets people make changes to the website without the web team having to worry.
How to Build It
Reshuffle makes it easy to build integrations that complete complex tasks so you can deliver unique experiences and outcomes for the business and customers.
Here’s how you’d build a spreadsheet powered website:
Reshuffle is an open-source, lightweight, and event-driven framework that helps you integrate services — these integrations and workflows are created inside a Reshuffle App. The objects that let you interact with these services are called connectors. The first thing we need to do is to declare a Reshuffle App and a Monday connector:
To get your Monday API token, log in to your Monday account and click on your Avatar in the bottom left. In the Admin panel, you'll find an API section, where you can create an API v2 token that you can plop into your local environment.
You can also specify your
baseURL and your
webhooks address in the connector — but the first will be understood from the API key (unless you have multiple sites), and the second defaults to
/webooks/monday, which shouldn't conflict with any other addresses you're likely to have.
Next, we need to define the board and events we want to watch using the
on() method and our logic for what happens when we make a change. To find your
boardId, go to your Monday board in your browser and copy it from the URL:
All of the Monday connector events Reshuffle supports can be found here. In this example, we'll watch for a
CreateItem event and then log the response:
Lastly, let's initiate the integration by starting the Reshuffle App:
To run this code locally in a development environment, we put the above code (only six lines!) in an
index.js file, and, after using npm to install the necessary packages, run it using
node index.js. Then, we set up a Monday webhooks URL. To do this, go to the Monday settings (by clicking on your avatar in the bottom left, again) and click on 'Integrations.' Search for Webhooks. You'll want to set up a new webhook using your development URL. For this test, we used ngrok by installing it and then running
ngrok http 8000 in another terminal window, which is the same port as our Node instance above.
Take the URL that ngrok gives you and add
/webhooks/mondayto it before adding it as the URL in the Webhook interface.
And that's all you need to do. Go back to your sheet and create an item. We created a new item, called '
toucan', because they're beautiful birds and we wanted Monday to display cool birds (why not?). You'll get a result similar to this:
Your frontend should have a CMS which can interpret this data. Depending on the frontend, setting up a URL that can capture POST requests will look slightly different. On our end, we need to post the resulting data above into a POST request. Here, we use the got package:
And your front end should be able to capture this and display it however you like. In our really quite basic HTML frontend, we took the example above and rendered the JSON like this:
Obviously, you'll want to do more than throw the JSON into a list on a basic HTML site. But that's where the fun is — once you've got a server taking new data from Monday using Reshuffle, the possibilities are endless.
We hope you see how easy it is! You can do this quickly and really make updating your website easy for non-technical users.
Now, Make it Happen
As you work with your sales, marketing, and customer experience colleagues, we encourage you to build the integrations that drive better customer experiences and help differentiate your business in the marketplace. With teams using so many different tools, the more you can consolidate these tools into one common interface and help automate workflows, the easier people can get work done.
Reshuffle is continually listening to what our customers need and desire. Don’t see a connector to a service you’d like to integrate? Send a tweet to @ReshuffleHQ to let us know which connector you’d like us to develop next.
Published at DZone with permission of Amir Shevat. See the original article here.
Opinions expressed by DZone contributors are their own.