By now you’ve taken a look at scriptr.io, its features and what it can do. Hopefully you’ve read the tutorial for creating your first scriptr.io script. This provides a good primer to creating, testing and using your script from different environments. However you may still feel awkward or ill-prepared to develop script coding on your own. For those who don’t dream in code, the scriptr.io workspace includes the Blockly editor. Using Blockly you can drag and drop discrete coding statements and functions, piecing together your script as you go.

This tutorial discusses how to use Blockly to easily create a simple script, which is helpful for non-coders. The concepts discussed in this tutorial can also be applied toward creating more extensive and powerful scripts as you learn more and gain confidence.

Blockly is integrated into the scriptr.io workspace editor. To start building your script, click New Script then Blockly Script.

The Blockly editor uses puzzle pieces to represent functions and values for your script. You choose a piece of code and drag it into your editor. You then add the values for your desired function. Separate pieces fit together with a click.

Blockly contains the following types of code pieces:

  • Logic: Build conditional processing into your script. You can set actions to execute if certain conditions are true or false, or build an if/then statement which executes a function only if other conditions are met.
  • Loops: Set a function to repeat for a given number of iterations, or perform actions on items in a list.
  • Math: Integrate mathematical functions to your script.
  • Text: Enter or dynamically change text used in your script.
  • Collections: Pre-built data array functions.
  • Scriptr: Pre-built scriptr.io functions. For example: sending messages, work with JSON, console logs, storage or write response data with header information. Additional functions are added regularly.
  • Variables: Defines an item or sets it to a value you define.
  • Functions: Define processing actions to take when certain conditions are present.

Now, let’s build your first script. We’ll use the same example as Creating Your First scriptr.io Script. In that example we typed the code in but in this tutorial we’ll show you how to do it using Blockly.

From the Blockly editor, choose the Scriptr category and select return. blockly_return

You can drag the code piece onto your editor area or simply click it. The code piece is now in your editor. editor_return

Next we’ll add the text to be returned. Choose the Text category and select the top piece, which has no function associated with it. This is simply a way to add text in desired areas of the script. blockly_text

Your editor area now contains both pieces: editor_returnandtext

In this case we want to display a hello message. Click the text piece and enter the words: Hello from Scriptr.io! editor_addingtext

Next join the two pieces together. Simply drag one piece to another at the connection points. When you get close they will automatically connect and you’ll hear an audible click. editor_returntextjoined

Your script is now created! It’s important to note that although created with Blockly, this script is the same as if you manually entered the text. It can be used in the same way as any other scriptr.io script, or for that matter any REST API endpoint.

To see what the script looks like in code form, click the Data tab on the right. blockly_datatab

You’ll see that it is identical to the code we entered in Creating your first scriptr.io Script. Refer to that tutorial for a refresher on the ways you can test, run, and call the script.

Enter a name for the script in the Set Script Name area, then click Save.