GeoBlockly: materials docents (programació visual per blocs dins de Geogebra)

Blocky

Idea

  • usar l’editor visual Blockly (programari lliure de Google) per permetre programar el Geogebra amb blocs (a l’estil Scratch, enlloc de JavaScript).
  • aleshores, crear activitats tipus GeoJS, però per alumnes que no hagin programat mai.

Enllaços

Prova de concepte (instal·lació local)

GeoBlocky-conceptual-test

  • Baixar-se Blockly per executar-lo en local: https://developers.google.com/blockly/installation/overview
  • Descomprimir
  • provar: firefox demos/index.html
  • Crear un nou bloc de codi:
    cd blocks
    vi geogebra.js
    
    ---------------------
    'use strict';
    
    goog.provide('Blockly.Blocks.geogebra');
    
    goog.require('Blockly.Blocks');
    
    Blockly.Blocks['geogebra_circle'] = {
      init: function() {
        this.setHelpUrl('http://www.example.com/');
        this.setColour(290);
        this.appendDummyInput()
            .appendField(new Blockly.FieldImage("http://wiki.geogebra.org/uploads/e/eb/Tool_Circle_Center_Radius.gif", 15, 15, "Cercle"))
            .appendField("Circle:")
            .appendField("center");
        this.appendValueInput("X")
            .setCheck("Number")
            .appendField("x");
        this.appendValueInput("Y")
            .setCheck("Number")
            .appendField("y");
        this.appendValueInput("R")
            .setCheck("Number")
            .appendField("radius");
        this.setInputsInline(true);
        this.setPreviousStatement(true);
        this.setNextStatement(true);
        this.setTooltip('');
      }
    };
    ---------------------
    
    cd ..
    cd generators/javascript/
    vi geogebra.js
    
    ---------------------
    'use strict';
    
    goog.provide('Blockly.JavaScript.geogebra');
    
    goog.require('Blockly.JavaScript');
    
    Blockly.JavaScript['geogebra_circle'] = function(block) {
     var x = Blockly.JavaScript.valueToCode(block, 'X', Blockly.JavaScript.ORDER_ATOMIC);
     var y = Blockly.JavaScript.valueToCode(block, 'Y', Blockly.JavaScript.ORDER_ATOMIC);
     var r = Blockly.JavaScript.valueToCode(block, 'R', Blockly.JavaScript.ORDER_ATOMIC);
     // Draw a circle in geogebra
     var code = 'ggbApplet.evalCommand("Circle[('+x+','+y+'), '+r+']")';
     return code;
    };
    ---------------------
    
    cd ../..
    cd demos
    cp -r generator/ generator-geogebra
    cd generator-geogebra
    vi index.html
    
    ---------------------
    ...
      <script type="text/javascript" src="../../blocks_compressed.js"></script>
      <script type="text/javascript" src="../../blocks/geogebra.js"></script>
      <script type="text/javascript" src="../../javascript_compressed.js"></script>
      <script type="text/javascript" src="../../generators/javascript/geogebra.js"></script>
    ...
    <xml id="toolbox" style="display: none">
    ...
        <category name="Geogebra">
          <block type="geogebra_circle"></block>
        </category>
    ...
    </xml>
    ---------------------
    
    cd ../..
    firefox demos/generator-geogebra/index.html
    
  • Adjuntar-hi l’applet de Geogebra (fixeu-vos que les URL’s de Geogebra són httpS, ja que sinó no van després amb Google App Engine):
    cd demos/generator-geogebra
    cp index.html ggb.html
    vi ggb.html
    
    ---------------------
    <html>
    <head>
     <meta charset="utf-8">
     <title>JORDI's DEMO: Controlling Geogebra from Blocky</title>
     <script type="text/javascript" src="../../blockly_compressed.js"></script>
     <script type="text/javascript" src="../../blocks_compressed.js"></script>
     <script type="text/javascript" src="../../blocks/geogebra.js"></script>
     <script type="text/javascript" src="../../javascript_compressed.js"></script>
     <script type="text/javascript" src="../../generators/javascript/geogebra.js"></script>
     <script type="text/javascript" src="../../msg/js/en.js"></script>
    
    <!-- GEOGEBRA (ini) -->
    
     <link rel="stylesheet" type="text/css" href="https://tube.geogebra.org/css/worksheet.simpleggb.css?v=1.30" />
     <link href="https://tube.geogebra.org/files/appComp/shared/mathquillggb.css?v=1.30" media="screen" rel="stylesheet" type="text/css" />
    <link href="https://tube.geogebra.org/css/compiled.css?v=1.30" media="screen" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" type="image/x-icon" href="//static.geogebra.org/static/img/favicon.ico" />
    
     <!-- worksheet general is needed for resizing the wsf-scroller!! don't remove! -->
     <script type="text/javascript" src="https://tube.geogebra.org/scripts/jquery.js?v=1.30"></script>
    
    <script type="text/javascript">
     //<![CDATA[
     var ga_domainName = 'geogebratube.org';
     var ga_userId = 392849;
     //]]
    </script>
    <script type="text/javascript" src="https://tube.geogebra.org/scripts/gastats.js?v=1.30"></script>
    
     <script type="text/javascript">
     //<![CDATA[
    
     var ga_material_id = 277321;
     gaTrackMaterialView(ga_material_id, GA_MATERIAL_VIEW_SIMPLE);
    
     $(function() {
     $("#close-student-view").click(function() {
     window.close();
     });
     });
     //]]>
    </script>
    <script type="text/javascript" src="https://tube.geogebra.org/scripts/worksheet/general.js?v=1.30"></script>
    <script type="text/javascript" src="https://tube.geogebra.org/scripts/deployggb.js?v=1.30"></script>
    <script type="text/javascript" src="https://tube.geogebra.org/files/appComp/shared/min.js?v=1.30"></script>
    <script type="text/javascript" src="https://tube.geogebra.org/files/appComp/shared/mathquillggb.js?v=1.30"></script>
    
    <!-- GEOGEBRA (end) -->
    
    </head>
    
    <body>
    ...
    <!-- GEOGEBRA (ini) -->
    
    <div class="page" itemscope itemtype="http://schema.org/CreativeWork">
     <div style="direction: ltr">
    
     <div class="wsf-ws-scroller">
     <div class="wsf-wrapper">
    
     <h1 itemprop="headline" class="wsf-worksheet-title">
     GeoBlocky-HolaMon </h1>
    
     <p itemprop="articleBody">.....</p>
    
    <script type="text/javascript">
     var parameters = {"id":"ggbApplet","width":800,"height":600,"showToolBar":true,"showMenuBar":true,"showAlgebraInput":true,"showResetIcon":true,"enableLabelDrags":true,"enableShiftDragZoom":true,"enableRightClick":true,"showToolBarHelp":false,"errorDialogsActive":true,"useBrowserForJS":false,"ggbBase64":"<a lot of code>","language":"ca","isPreloader":false,"screenshotGenerator":false,"preventFocus":false,"fixApplet":false};
    
     parameters.appletOnLoad = function() {
     if (typeof $ === "function" && window.GGBT_wsf_view !== undefined) {
     var container = $("#applet_container_277321");
     window.GGBT_wsf_view.postProcessApplet(container);
     }
     };
     /** is3D=is 3D applet using 3D view, AV=Algebra View, SV=Spreadsheet View, CV=CAS View, EV2=Graphics View 2, CP=Construction Protocol, PC=Probability Calculator, DA=Data Analysis, FI=Function Inspector, PV=Python, macro=Macro View */
     var views = {"is3D":false,"AV":false,"SV":false,"CV":false,"EV2":false,"CP":false,"PC":false,"DA":false,"FI":false,"PV":false,"macro":false};
     var applet = new GGBApplet('5.0', parameters, views);
    
     applet.setJNLPBaseDir('https://tube.geogebra.org/webstart/');
     applet.setGiacJSURL('https://tube.geogebra.org/webstart/4.4/giac.js');
     var appletType_277321 = 'auto';
    
     window.onload = function() {
     applet.inject('applet_container', 'auto');
     }
    </script>
    
     <div style="display:block;min-width:800px;min-height:600px" id="applet_container">
     </div>
    
     <div class="footer">
     <a href="/material/show/id/htAwd0es">Creat amb GeoGebra</a> –
    
     <span itemprop="creator" itemscope itemtype="http://schema.org/Person">Compartit per <a href="/user/profile/id/392849"><span class="notranslate" itemprop="name">Jordi Campos Miralles</span></a></span>
     <div class="view_as_separator_Java" style="display:none"> – </div>
     <a class="view_as_Java" href="/student/mhtAwd0es?mobile=false" onclick="applet.inject('applet_container', 'preferJava'); applet.toggleAppletTypeControls(''); return false;" style="display:none">Veure l'Applet com Java</a>
     <div class="view_as_separator_HTML5" style="display:none"> – </div>
     <a class="view_as_HTML5" href="/student/mhtAwd0es?mobile=true" onclick="applet.inject('applet_container', 'preferHTML5'); applet.toggleAppletTypeControls(''); return false;" style="display:none">Veure l'Applet com HTML5</a>
     <script type="text/javascript">
     var tmpOnLoad = window.onload;
     window.onload = function() {
     if (typeof tmpOnLoad == "function")
     tmpOnLoad();
     applet.toggleAppletTypeControls("");
     }
     </script>
     </div>
     </div>
     </div>
    
     </div>
    
    </div>
    
    <!-- GEOGEBRA (end) -->
    
    </body>
    </html>
    ...
    ---------------------
    
    cd ../..
    firefox demos/generator-geogebra/ggb.html
    

Instal·lació a Google App Engine

  • Enllaços:
    • Cloud Storage: explica com emmagatzemar dades si tenim l’aplicació instal·lada al núvol.
  1. Descarregar-se i instal·lar el Google App Engine SDK for Python.
  2. Entrar a Google App Engine (amb un usuari Google)
  3. Fer clic a “Crear una nova aplicació”
  4. Triar el nom de l’aplicació *.appspot.com i fer clic a “Crear aplicació”
  5. Seguir els passos de la instal·lació local (apartat anterior “Prova de concepte”)
  6. Dins el directori de Blockly:
    vi appengine/app.yaml
      (posar el mateix nom d'aplicació que el triat al 4t pas)
    ---------------------
    application: geoblockly
    ---------------------
    
    mkdir appengine/static
    cd appengine/static
    ln -s ../../demos/
    ln -s ../../msg/
    ln -s ../../media/
    ln -s ../../apps/
    ln -s ../../blockly_compressed.js
    ln -s ../../blocks_compressed.js
    ln -s ../../javascript_compressed.js
    # check if these are still required when updating *_compressed.js
    ln -s ../../generators/
    ln -s ../../blocks/
    
  7. Des del directori on tenim localment el Google App Engine SDK:
    ./appcfg.py --oauth2 update ~/<directori-blockly>/appengine
    
  8. Usar un navegador per accedir a l’aplicació.
    1. Ex: https://geoblockly.appspot.com
    2. https://geoblockly.appspot.com/static/demos/generator-geogebra/ggb.html

Més informació per a crear un bloc

  • Tipus possibles de dades: https://developers.google.com/blockly/custom-blocks/type-checks
    • Note that the type strings used in Blockly ('Number', 'Boolean', 'String', 'Array', 'Colour') are completely arbitrary. Any strings are acceptable, and new ones may be invented ad hoc. Just ensure consistency between the outputs and the inputs.
    • this.appendValueInput('VALUE').setCheck(['String', 'Array']);
      this.setOutput(true, 'Number');

Treballant amb Git

Com es va fer el “fork” inicial del projecte Blockly (no cal que ho feu)

Cicle de treball des de l’ordinador personal

Usant la Línia de Comandes

  • Instal·lar-se el programari Git: http://git-scm.com/downloads
  • Executar les comandes següents en una consola: ( resum del que s’explica aquí )
    • git --version
      
    • git config --global user.name "YOUR NAME"
      git config --global user.email "YOUR EMAIL ADDRESS"
      
    • git clone https://github.com/jordicamposmiralles/geoblockly.git
      cd geoblockly
      firefox demos/geogebra/index.html
    • En GIT hi ha 4 estats dels fitxers:
      • 1. còpia local al teu disc dur
      • 2. índex de canvis a fer
      • 3. versió a enviar al “servidor” remot (però no enviada)
      • 4. versió al “servidor” remot
    • Comandes útils:
      • git status          # Mostra l'estat respecte el repositori a la xarxa
        git pull            # Actualitzar la còpia local (amb els canvis del "servidor" remot)
      • git add geogebra.js # Afegim fitxer a l'índex (llistat de canvis a fer)
        git commit -m "Definició de blocs GGB" # Preparem per enviar (però no hem enviat)
        git push            # Enviem els canvis al "servidor" remot

Usant client gràfic GIT per a MS-Windows

  • Anar a: https://windows.github.com
  • Fer clic a descarregar, instal·lar i obrir.
  • Identificar-se amb l’usuari de GitHub (http://github.com)
  • Fer clic al signe “+” que apareix a la part superior esquerra de l’aplicació
    • escollir “Clone”
    • triar geoblockly si ja apareix a la llista (sinó demanar que us afegeixin al projecte)
  • Ja podeu anar al directory on ha baixat el repositori i obrir el següent fitxer amb un navegador:
    • Els meus documents: Documents\GitHub\geoblockly\demos\geogebra\index.html
Cicle GIT bàsic des de MS-Windows
  • Nocions generals:
    • En GIT hi ha 4 estats dels fitxers:
      • 1. còpia local al teu disc dur
      • 2. índex de canvis fets
      • 3. versió a enviar al “servidor” remot (però no enviada)
      • 4. versió al “servidor” remot
    • Podeu instal·lar-vos el Notepad++ com a editor de text amb prestacions per a programar (ex. colors segons la sintaxi, auto-completat de noms de variables…) per a Ms-Windows.
  • 1. Actualitzeu la vostra còpia local per a posar-la al dia
    • aplicació GitHub for Windows hi ha un indicador anomenat “Sync” a la part superior dreta.
    • Feu clic a “Sync”
  • 2. Editeu el fitxer local que volgeu
    • poden estar a “Els meus documents” Documents\GitHub\geoblockly\
    • hi podeu accedir amb l’Explorador de Fitxers, i dir “Obrir amb…” escollint Notepad++
  • 3. Indiqueu que voleu enviar el canvi (encara no l’esteu enviant)
    • a l’aplicació GitHub for Windows apareixerà el fitxer a “Uncommited changes”
      • Cal omplir el “Summary” i la “Description”
      • i fer clic a “Commit”
  • 4. Envieu els canvis al “servidor” remot
    • a l’aplicació GitHub for Windows apareixerà un indicador al costat de “Sync” (part superior dreta)
    • Feu clic a “Sync”
    • Us avisarà quan hagi acabat d’enviar el fitxer

 

Deixa un comentari

Fill in your details below or click an icon to log in:

WordPress.com Logo

Esteu comentant fent servir el compte WordPress.com. Log Out / Canvia )

Twitter picture

Esteu comentant fent servir el compte Twitter. Log Out / Canvia )

Facebook photo

Esteu comentant fent servir el compte Facebook. Log Out / Canvia )

Google+ photo

Esteu comentant fent servir el compte Google+. Log Out / Canvia )

Connecting to %s