Blockly is a library for building block programming apps. It includes everything you need for defining and rendering blocks in a drag-n-drop editor. Each block represents a chunk of code that can be easily stacked and translated into code. It’s helpful for allowing apps to easily customize components and write code.

Blockly is a client-side JavaScript library for creating visual block programming languages and editors. It is a project of Google and is open-source under the Apache 2.0 License. It typically runs in a web browser, and visually resembles Scratch.

Blockly is also being implemented for Android and iOS; not all web browser based features are available for Android/iOS. It uses visual blocks that link together to make writing code easier, and can generate JavaScript, Python, PHP or Dart code. It can also be customised to generate code in any textual computer language.

You can basically go online and learn:

  • How to add Blockly to a sample iOS app.
  • How to set up a Blockly workspace.
  • How to create a new block in Blockly.
  • How to generate and run JavaScript code from blocks.

Google provides a “codelab” that is focused purely on Blockly. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste. One could say the codelab has the A-Z of blockly. Try it out and let us know how your experience was: https://codelabs.developers.google.com/codelabs/blockly-ios/#0


Blockly VS Scratch?

I came across a good article on www.robotlab.com, here are the details:

 

Learning to code can sometimes seem overwhelming.  I remember when I was making the leap from learning vocabulary and syntax to creating an entire program I experienced some writers block.  I had all the tools I needed, but I didn’t know where to begin.

Enter Scratch and Blockly: two programming environments that use a graphical interface of interlocking blocks to make coding easier for new programmers.

Blockly 1.jpgBlockly 2.jpg

But other than the appearance of their interfaces, these IDEs (integrated development environments) have very little in common.  In this post, I will briefly describe each, compare and contrast them, and finish off with ways to use each in your next project.  Let’s get to it!

 

Scratch Summary

Scratch is a development environment designed especially for programmers aged 8 to 16 (but it’s fun and useful for beginners of all ages).  It’s an all-inclusive environment that contains any block you need to manipulate this cute cast of characters through an environment of your creation.  More experienced scratcher’s can branch out and create games and animations all their own using Scratch’s extensive library of blocks.

Blockly Summary

Blockly is more at home in a business than a classroom.  It utilizes a somewhat limited, open-ended collection of blocks to allow users to code real-world tools.  Blockly blocks can be translated directly into such languages as Javascript, PHP, Dart, and Python.

Compare and contrast

Compare.jpg

 

Scratch in your next project

 Would you like to make a cool game or animation for your webpage?  Or maybe a online art show of student Scratch projects?  Just click the “Share to” button below the project window, and this dialog box will pop up:

pop up.jpg

Copy-paste the code into the HTML editor of your website, and voilà!

 

Blockly in your next project

 I have been working on a project to make a Blockly programming environment for controlling NAO robots.  The project requires specialized blocks not available in the standard Blockly library, so I had some make some myself.  Luckily for me, Blockly offers a tool for that exact purpose called Block Factory!

Blockly 3.jpg

If you’d like your code blocks to control a tool you have (like a NAO or arduino) Blockly is perfect for your project!

There are many more examples of exciting Blockly projects here:

https://developers.google.com/blockly/about/showcase

And Scratch projects (with code included) here:

https://scratch.mit.edu/starter_projects/

I hope this post has helped you find the right IDE for your project!