Google

Estaba buscando actividades, para asignarles como “Bono” a los estudiantes de algorítmica y programación, y recordé blockly, que permite programar usando elementos visuales (como armar un rompecabezas). Blockly permite generar código en los lenguajes Javascript, Dart, Python o XML. La filosofía del lenguaje de Blocky lo hace perfecto para nuevos programadores.

Una solución para el Laberinto

El editor de Blocky es libre (bajo licencia Apache) e implementado en Javascript, lo que permite incluirlo fácilmente en cualquier proyecto web, sin requerimientos especiales en el lado de servidor. Después de hacer checkout y copiarlo al servidor, podemos usar el playground que se encuentra en los test.

Por defecto tiene un conjunto de “bloques” bastante completo, que incluye: Estructuras de control, manipulación de texto, manejo de variables, listas, expresiones aritméticas, expresiones lógicas, definición y llamada a procedimientos. Si necesitamos algo que no está definido, el lenguaje se puede extender fácilmente. Por ejemplo, si quiero que puedan mostrar un mensaje al usuario (Lo que en JavaScript sería un alert…) puedo definir el bloque diciendo en qué categoría se mostrará, que valores tendrá como entrada, si retorna o no un valor, entre otras cosas. Una vez el bloque está definido es necesario implementar los generadores para los lenguajes que queremos soportar (para las funciones incluidas, Blockly incluye generadores para JavaScript, Dart y Python).

if (!Blockly.Language) {
  Blockly.Language = {};
}
Blockly.JavaScript = Blockly.Generator.get('JavaScript');
Blockly.Dart = Blockly.Generator.get('Dart');
Blockly.Python = Blockly.Generator.get('Python');

Blockly.Language.alert = {
  // Bloque para mostrar un mensaje al usuario (alert)
  category: 'Commands',
  helpUrl: 'http://www.christian-ariza.net/techstuff/Blockly#alert',
  init: function() {
    this.setColour(290);
    this.appendTitle('alert');
    this.setPreviousStatement(true);
    this.appendInput('Mensaje', Blockly.INPUT_VALUE, 'MSG');
    this.setNextStatement(true);
    this.setTooltip('Muestra un mensaje (modal) al usuario');
  }
};

Blockly.JavaScript.alert= function (){
  var mensaje=Blockly.JavaScript.valueToCode(this, 'MSG',
      Blockly.JavaScript.ORDER_NONE) || '\'\'';
  console.log(mensaje);
  var code="alert ("+mensaje+");\n";
  return code;
}
Blockly.Dart.alert= function (){
  var mensaje=Blockly.Dart.valueToCode(this, 'MSG',
      Blockly.Dart.ORDER_NONE) || '\'\'';
  console.log(mensaje);
  var code="window.alert ("+mensaje+");\n";
  return code;
}
Blockly.Python.alert= function (){
  var mensaje=Blockly.Python.valueToCode(this, 'MSG',
      Blockly.Python.ORDER_NONE) || '\'\'';
  console.log(mensaje);
  var code="print("+mensaje+")\n";
  return code;
}

Definiendo estos elementos ya podemos usar el nuevo bloque:

Ejemplo usando el nuevo bloque “alert”

El código generado sería:

JavaScript

var x;
var item;
function procedure(x) {
  item = x;
  alert ('Hola');
  alert (item);
}

procedure('Parametro X');

Dart

Para que funcione el alert en Dart, haría falta importar una librería que maneje DOM, ej #import(“dart:dom”), ese import no fue generado (No encontré como especificarlo…)

var x;
var item;
void procedure(x) {
  item = x;
  window.alert ('Hola');
  window.alert (item);
}

main() {
  procedure('Parametro X');
}

Python

x = None
item = None
def procedure(x):
  global item
  item = x
  print('Hola')
  print(item)

procedure('Hola mundo')

Si quieren seguir experimentando con Blockly pueden usar el “ambiente” que usaré en el curso, es básicamente el demo de generador de código, con el bloque alert que acabo de crear. La idea es ir agregándole nuevos bloques según sea necesario para alguna actividad en particular.

Si el experimento de los bonos es un éxito, el siguiente paso será que construyan una aplicación para Android usando el App Inventor,  puede ser para el último nivel del curso :P.