How to make a set of logical Blocks in Blockly to connect to server, fetch the data and show them to the user?

[Maziarser]

Hello,

I have tried my best to find it out by myself, but I couldn't. 

I am new in Blockly and what I want to do is to make a set of blocks to let my user to connect to my server, decode the JSON code and get 2 values (name and status) of an objects and print them in the output.

SO, here is the simple PHP code that it echo the name and status of one of my objects:

<?php $data = file_get_contents("myServer"); $objects = json_decode($url, true); foreach ($objects as $key => $object_key) { $name = $object_key['name']; if($name=="Light"){ echo '<b>name:</b>'; echo $object_key['name']; echo '</br>'; echo '<b>status:</b>'; echo $object_key['status']; } } ?>

Thanks in advance for you time and help!

[Andrew n marshall]

Hi Maziarser,

In this use case, Blockly is just a very small piece of the system.  With Blockly, you can make a block-based editor and map blocks to code.  I'm presuming the code in this case is running in a web browser, and so will be JavaScript.

Start by writing a function in JavaScript that does the server connection and JSON processing.  You'll notice you'll have to use a callback, whether by jQuery.ajax() or XMLHttpRequest or whatever. The APIs in the client do not block while awaiting for the server to respond.

When mapping this to Blockly, there are two ways you can deal with this.  The most straightforward to develop is to assign the destructured JSON values to variables and execute the contents of some event block.

link

In this case, the JavaScript callback would call the user's code inside this block.

However, this requires the Blockly user to think about the timing and interdependencies of the request and response block stacks.

​

link
​

(In the context of two values, this could either return a list, or one of the two data values.)

To do this, we need to block during execution while waiting for the server response. JavaScript doesn't normally allow this, but JS Interpreter does (like Blockly, also written by Neil Fraser).  Compare with the wait block our asynchronous execution demo (src).  Look at how the setTimeout() callback is used to trigger the interpreter's callback, allowing the interpreter to continue execution. This is exactly what your server callback should be doing.

Even if we didn't need use asynchronous code, there are a lot of reasons to prefer the interpreter over eval() with user generated code. We highly recommend using the interpreter in any Blockly app attempt to run JavaScript in a browser.

--
Andrew

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.