Bachelors Degree Project - Basics of using Scratch Blocks on Android

[Mikolaj M]

Hello everyone,
Quick introduction about myself -  currently I am finishing my Telecommunication studies and as a thesis i proposed to create coding app for kids (6-9 years old) which introduces basic coding notions. The tool on which user operates is block language while mobile phone with all its sensors, lights and speakers is a way of interaction or showing the results to the user. The starting point for my work is of course Blockly. But here are my problems:
1. I have some basic knowledge about Android programming but really dont know how to start with Web part of blockly on android - what information should i read about to be able to test Web embeded blockly on android? I found the mobile demos read-me but i would like to have more background knowledge.

2. While going through blockly github pages I also found another great starting point - Scratch Blocks, but again, where can i find some deeper information about setting it up on Android. Is it also done by means of webView or can it be implemented by using native library.

Right now I have successfully started native android version and began trying on webView version.
Thank you for your time,
Mikołaj

[Andrew n marshall]

On Wed, Nov 28, 2018 at 10:07 AM Mikolaj M <miko...@gmail.com> wrote:

1. I have some basic knowledge about Android programming but really don't know how to start with Web part of blockly on android - what information should i read about to be able to test Web embedded blockly on android? I found the mobile demos read-me but i would like to have more background knowledge.

Once you have the mobile/android demo running in an Android emulator or ADB connected device, you should be able to start remote debugging with a Chrome browser window.  Check out this page:

  https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

As you develop the app, you'll likely make changes to the webview.html to load the correct blocks, toolbox, and generators. This change of the assets requires a rebuild and relaunch from Android Studio. Just reconnect to the WebView of the relaunched app.

Assuming you are generating JavaScript and running it on the device via another WebView, you will need to use @JSInterface and addJavascriptInterface(..) to bind Android code to JavaScript calls. You can invoke JavaScript using evaluateJavascript(..). See https://developer.android.com/guide/webapps/webview#BindingJavaScript

 

2. While going through blockly github pages I also found another great starting point - Scratch Blocks, but again, where can i find some deeper information about setting it up on Android. Is it also done by means of webView or can it be implemented by using native library. 

Scratch Blocks is a port of web Blockly with redesigned block UI. There is no native version. For the most part, the blockly_compressed.js can be swapped out. Not all Blockly blocks are compatible with Scratch Blocks. You should aim to use the Scratch Block provided block definitions. Additionally, Scratch Blocks is designed to be used with the Scratch VM as an execution environment, rather than generate code. This is a very different execution environment, allowing code edits while running.

I am not aware of anyone who has embedded Scratch Blocks and VM in an Android app WebView. While it make take a little experimentation, it should not be too hard given the Blockly demo project as a reference.

--
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+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mikolaj M]

Hey, thank you for your answer!
I got some more questions on the way.

1. I decided to use Blockly embedded in android WebView approach and got a bit lost. I more less know what to do but i need to ask about some details. Right now i would like to communicate my webview fragment with my main activity. I found that it is possible by means of ViewModel, is it the best thing to do?

2. In Demo project for webview in android (https://github.com/google/blockly/tree/develop/demos/mobile/android) in file BlocklyWebViewFragment.java i found really helpful TODO but still i struggle to differentiate what should be done in html and what in java. Right now i would like to write methods which generates string from blocks in my workspace, but the problem is i dont know if it should be done within this java file.

3. What webAppInterface class is for ?

4. Lastly, is highlighting blocks available for WebView since the header in the article says "Highlight Blocks (Web Only)"?

I hope i'm not asking trivial questions. Thank you in advance for your time,

Mikołaj

[Andrew n marshall]

(Answers inline)

1. I decided to use Blockly embedded in android WebView approach and got a bit lost. I more less know what to do but i need to ask about some details. Right now i would like to communicate my webview fragment with my main activity. I found that it is possible by means of ViewModel, is it the best thing to do?

 

There are numerous approaches. Since the fragment is just an normal Java object, I've often just made direct calls or registered listeners. I'm not familiar with ViewModel. Sounds like something I should learn.

 

2. In Demo project for webview in android (https://github.com/google/blockly/tree/develop/demos/mobile/android) in file BlocklyWebViewFragment.java i found really helpful TODO but still i struggle to differentiate what should be done in html and what in java. Right now i would like to write methods which generates string from blocks in my workspace, but the problem is i dont know if it should be done within this java file.

 

The code generation has to occur on the JavaScript side.  However, you will likely want to invoke it on the Android/Java side, and then get the value returned to that side. Thus, you'll probably a call such as:

mWebView.evaluateJavascript(    "Blockly.JavaScript.workspaceToCode(Blockly.mainWorkspace);",    code -> doSomethingWithCodeString(code));

 

3. What webAppInterface class is for ?

That term doesn't come up in the Blockly code base, so I have to assume you are talking about example code such as what is found in this tutorial. The WebAppInterface is the Java-side (or Kotlin) implementation of calls from JavaScript, once registered via addJavascriptInterface(..).

 

4. Lastly, is highlighting blocks available for WebView since the header in the article says "Highlight Blocks (Web Only)"?

Because you'll be using the web framework, this feature does work.

[Mikolaj M]

Thank You again for the amazing response. This forum has been so helpful so far!

Just one question off topic, should I post future problems with my project in here or in separate topics with appropriate subject?

Back to Blockly business.

By means of button click i am invoking method you described above, in 2nd answer:

mWebView.evaluateJavascript(
    "Blockly.JavaScript.workspaceToCode(workspacePlayground);",
    code ->Toast.makeText(getContext(), code, Toast.LENGTH_SHORT).show());

I made some changes to your answer so it suits my needs. I wanted to print generated code as a Toast to see if blocks in the workspace are generating code properly. I added a line in my webview.html file with JavaScript generator and moved generator to assets. But unfortunately the only toast i get says "null". So here is my next question:

1. How to reference my blockly workspace. Is it the variable "workspacePlayground defined in the script:

<script type="text/javascript">
  var workspacePlayground = Blockly.inject('blocklyDiv'(...)

As this seems to be the problem - passing the workspace from which i want to collect blocks.

Thank you in advance!

Mikołaj

[Abby Schmiedt]

Hi Mikolaj!

A few debugging questions: 

1. Have you tried using Blockly.mainWorkspace instead of workspacePlayground? 

2. Could you try printing the code instead of using Toast.makeText just to double check that something isn't getting lost there? 

Thanks!

Abby

[Mikolaj M]

Hi Abby!

Thanks for replying. Unfortunately i tried debugging execution of toast and sadly code returned from callback seems to be null either way. Changing the workspace to Blockly.mainWorkspace didnt help either.

[Erik Pasternak]

Hmm...

As far as I can tell that should be working. Can you try changing the js you're executing to:

"{var code = Blockly.JavaScript.workspaceToCode(Blockly.mainWorkspace); console.log(code); return code;}"

This will log the generated code in JS, which should show up in Android's logcat so you can tell if there's an issues generating the code or passing it out to Java. If the code logged inside the WebView is still null then it's most likely a problem with the state of the WebView not having the mainWorkspace set up correctly.

Also, let us know if you see any other errors in logcat as that may help debug.

[Mikolaj M]

Ok, so i adjusted the method accordingly, now it looks like this:

private void generateCode(){
    Log.d("WEBVIEW", "Code gen invoked");
    String codeCopy = "";
    mWebView.evaluateJavascript(
            "{var code = Blockly.JavaScript.workspaceToCode(Blockly.mainWorkspace); console.log(code); return code};",
            code -> codeCopy.concat(code));
    Toast.makeText(getContext(), codeCopy, Toast.LENGTH_SHORT).show();
    Log.d("WEBVIEW", "Code gen finished");
}

Unfortunately still no code visible in the toast and in debugging mode 'code' is null :(
Here are the logs:

[Mark Friedman]

Mikolaj,

  I notice a couple of things in your code.  The first thing to note is that mWebView.evaluateJavascript is an asynchronous function.  That means that it, and the callback within it is run in parallel (more or less) with the code before and after it.  Consequently there is no guarantee that the code in that callback is run before your call to Toast.makeText. In fact, it will run after it.  Put a log statement in that callback and you'll see what I mean. The solution to this is to put the call to Toast.makeText within the callback.

 The other issue that I see is that you are assuming that codeCopy.concat(code) will modify the value of codeCopy.  That is not the case - it will just return a new String.  You probably want to assign codeCopy.concat(code) to a variable and then use that variable later in your code.

  I hope this helps.

-Mark

[Mikolaj M]

Toast creation and display was placed in the callback at the very start and the problem is that 'code' returning from callback is null, even though i have placed several blocks in the workspace. I once again put the toast creation back in the callback but still i get the null in the toast text. Anything i could have done wrong while setting up java script generator?

Here i paste code and logs:

private void generateCode(){
    Log.d("WEBVIEW", "Code gen invoked");

    mWebView.evaluateJavascript(
            "{var code = Blockly.JavaScript.workspaceToCode(Blockly.mainWorkspace); console.log(code); return code};",

            code -> Toast.makeText(getContext(), code, Toast.LENGTH_SHORT).show());

    Log.d("WEBVIEW", "Code gen finished");
}

Thank you all for the help so far :)

[Andrew n marshall]

evaluateJavascript(..) is expecting one or more JavaScript statement, but that string is... a function body or something. The braces, { and }, are not necessary (and probably wrong in this context), and return is only valid inside a function. The log line Uncaught SyntaxError: Illegal return statement is trying to tell you exactly this.

Try this, instead:

private void generateCode(){
    Log.d("WEBVIEW", "Code gen invoked");
    mWebView.evaluateJavascript(

            "var code = Blockly.JavaScript.workspaceToCode(Blockly.mainWorkspace); console.log(code); code;",

            code -> Toast.makeText(getContext(), code, Toast.LENGTH_SHORT).show());
    Log.d("WEBVIEW", "Code gen finished");
}

The final code is the expression statement that is returned.

Perhaps a simpler approach is avoid logging inside the WebView:

private void generateCode(){
    Log.d("WEBVIEW", "Code gen invoked");
    mWebView.evaluateJavascript(

            "var code = Blockly.JavaScript.workspaceToCode(Blockly.mainWorkspace); console.log(code); code;",
            code -> {Log.i("WEBVIEW", "code: "+code); Toast.makeText(getContext(), code, Toast.LENGTH_SHORT).show());}

    Log.d("WEBVIEW", "Code gen finished");
}

Side note: The "Code gen finished" log line is misleading. Most likely, the lambda ValueCallback hasn't been called yet, so the Toast has not been created.

--
Andrew

--

[Andrew n marshall]

Whoops.  Second example was suppose to look like this:

private void generateCode(){
    Log.d("WEBVIEW", "Code gen invoked");
    mWebView.evaluateJavascript(

            "Blockly.JavaScript.workspaceToCode(Blockly.mainWorkspace);",

            code -> {Log.i("WEBVIEW", "code: "+code); Toast.makeText(getContext(), code, Toast.LENGTH_SHORT).show());}

    Log.d("WEBVIEW", "Code gen finished");
}

--
Andrew

[14054...@gsuitenobel.edu.my]

On Thursday, November 29, 2018 at 2:07:48 AM UTC+8, Mikolaj M wrote:

Hello everyone,
Quick introduction about myself -  currently I am finishing my Telecommunication studies and as a thesis i proposed to create coding app for kids (6-12 years old) which introduces basic coding notions. The tool on which user operates is block language while mobile phone with all its sensors, lights and speakers is a way of interaction or showing the results to the user. The starting point for my work is of course Blockly. But here are my problems:

1. I have some basic knowledge about Android programming but really dont know how to start with Web part of blockly on android - what information should i read about to be able to test Web embeded blockly on android? I found the mobile demos read-me but i would like to have more background knowledge.

[Mikolaj M]

Oh! It works! Thank you very much.

Thank you for your time, and every answer you gave!