Create a Personal Online Clipboard Using Webtask.io
Programming
If you don’t already know, webtask.io is a cool new platform that offers an online NodeJS environment for your apps. Most developers use it to add simple serverside functionality to websites they’ve hosted on static hosting services, such as Firebase, Gitlab, and Github. With a little bit of creativity though, there’s a lot more one can do with webtask.io.
In this tutorial, I’ll show you how to create a simple online clipboard using the platform. If you are someone who uses multiple devices all the time, I’m sure you’ll find this service very handy. With it, you can effortlessly copy a link or a piece of text on one device, and paste it onto another.
1. Create an Endpoint
The easiest way to create a new webtask.io endpoint is to use the online editor the platform offers. After you the open the editor, click the Create New button to start creating the task. In the dialog that pops up, choose the Create Empty option, and give a meaningful name to the task.
Once you press the Save button, you’ll have created a simple web task endpoint. To gain access to the actual HTTP request and response objects, I suggest you change the contents of the task to look like this:
module.exports = function(context, req, res) {
};2. Store Data
We will be storing the clipboard data inside the storage object that webtask.io offers. You can use the context object to get a reference to it.
To keep things simple, we’ll be receiving the data that needs to be copied as a copy query string parameter. You can access it too using the context.
Accordingly, add the following code:
res.writeHead(200, {
'Content-type': 'text/plain'
});
if(context.data.copy) {
context.storage.set(context.data.copy, { force: true }, (e) => {
if(!e)
res.end("Data copied successfully.");
else
res.end("There was an error copying");
});
}3. Fetch Data
If the endpoint is accessed without a copy querystring parameter, the output of the endpoint should be the latest copied data. This, of course, will be equivalent to a paste operation.
Just dumping the latest copied data is extremely easy. All you need to do is call the get() method of the storage object. The following code shows you how:
if(!context.data.copy) {
context.storage.get((e, data) => {
res.end(data);
});
}4. Use the Endpoint
At this point, we’re ready to use our endpoint as an online clipboard. Towards the bottom of the editor, you should be able to see the actual URL of the endpoint. It will look something like this:
https://wt-1234567890abcdefghsample.run.webtask.io/my-online-clipboard
Copy it, paste it in a new tab of your browser, and add a copy parameter to it. Here’s an example, which copies the string “hello world”:
https://wt-1234567890abcdefghsample.run.webtask.io/my-online-clipboard?copy=hello+world
If the copy operation completes successfully, you can call the endpoint again–this time without the copy parameter–to see the data you copied.
Conclusion
Each webtask.io endpoint has about 500KB of storage space. If you switch to using the POST method for sending data to the endpoint, you won’t have to worry about the size of the text or links you’ll be copying.
I’d also like to add that this endpoint can be accessed by anybody who knows its URL. That’s why, it might not be a good idea to copy any confidential data to it. It can be secured using Auth0 though. I’ll show you how to do that in a later tutorial.