Activitats

rea

Instal·lació de NetBeans

L’objectiu d’aquesta activitat és dotar l’estudiant de les eines necessàries perquè pugui implementar les activitats i els exercicis necessaris per al seu aprenentatge.

En concret, es vol que l’estudiant configuri i instal·li l’entorn de desenvolupament d’aplicacions anomenat Netbeans. La solució utilitzarà el sistema operatiu Ubuntu com a exemple d’un sistema operatiu lliure on instal·lar aquesta aplicació. Es recorda a l’estudiant que ha de tenir instal·lat el motor Java per poder executar l’entorn de desenvolupament Netbeans.

Descarregar el motor Java JDK

Heu de baixar-vos el motor Java JDK. Aquest programa el podeu trobar en dues versions, la versió de 32 bits i la de 64 bits. Comproveu quina de les dues necessiteu. Per fer-ho podeu anar als Paràmetres del sistema / Detalls. En aquesta finestra, el sistema operatiu Ubuntu ens informa de la versió instal·lada.

Ara ja podeu anar a aquesta pàgina i descarregueu el motor apropiat per al nostre sistema operatiu (figura).

Figura Pàgina de descàrregues del programa JDK

Extreure el programa

Una vegada heu descarregat el programa comprimit, l’heu de descomprimir a la carpeta /usr/local/bin:

  1. cd ~/Baixades$
  2. sudo tar xf jdk-8u65-linux-i586.tar.gz -C /usr/local/bin

Ara heu d’instal·lar l’entorn de desenvolupament NetBeans:

Descarregar l’entorn de desenvolupament Netbeans

Accediu a la pàgina de descàrregues del programa Netbeans (figura) i descarregueu la versió completa del programa, és a dir, la versió amb tots els bundles.

Figura Versions de l’entorn de desenvolupament

Instal·lar l’entorn de desenvolupament Netbeans

Tot seguit, ja esteu en condicions d’instal·lar el programa utilitzant les següents comandes:

  1. chmod +x netbeans-8.1-linux.sh
  2. ./netbeans-8.1-linux.sh --javahome /usr/local/bin/jdk1.8.0_65/

La primera és per donar a l’arxiu els permisos necessaris per poder executar el programa. La segona comanda executa l’instal·lador i informa on s’ha instal·lat el motor Java.

Una vegada s’ha executat el fitxer anterior, apareixerà un ajudant per instal·lar l’entorn de desenvolupament.

A l’hora d’instal·lar el programa només us heu de fixar d’instal·lar el servidor Apache Tomcat. Així, abans de començar la instal·lació escollireu també aquesta opció (figura).

Figura Instal·lador del programa Netbeans

A partir d’aquí només heu de seguir les instruccions que apareixen a les diferents finestres per instal·lar el programa amb els paràmetres per defecte.

Depuració de codi amb Netbeans

L’objectiu d’aquesta activitat és conèixer el debugger que ens proporciona l’entorn de desenvolupament NetBeans.

Utilitzareu el codi de l’apartat 1: Hola, Món. Afegireu un fitxer Javascript i un fitxer d’estils, així com un botó amb una crida a una funció Javascript per poder utilitzar l’eina de debugger del NetBeans.

  1. <%@page contentType="text/html" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Pàgina JSP</title>
  6. <script src="exemple.js" type="text/javascript"></script>
  7. <link href="estils.css" rel="stylesheet" type="text/css"/>
  8. </head>
  9. <body>
  10. <div>Hola, Món!</div>
  11. <button onclick="hola();" value="salutació">salutació</button>
  12. <%
  13. String ip = request.getRemoteAddr();
  14. out.println("La teva IP és: " + ip);
  15. %>
  16. </body>
  17. </html>

Com veieu en la pàgina JSP anterior utilitzeu dos fitxers addicionals: estils.css i exemple.js. A continuació teniu el contingut del fitxer exemple.js:

function hola(){
    alert("hola");
}

I el contingut del fitxer estils.css:

div{
    color:blue;
}

Utilitzant el codi anterior, intenteu:

  1. Executar el codi font pas a pas.
  2. Executar mètodes del JDK pas a pas.
  3. Utilitzar breakpoints (punts d’interrupció) per detenir l’execució del programa i poder observar l’estat de les variables.
  4. Conèixer el valor que pren cada variable o expressió segons es van executant les línies de codi.
  5. Modificar el valor d’una variable sobre la marxa i continuar l’execució.

Instal·lar l’extensió de NetBeans al navegador Google Chrome

Primer s’ha d’instal·lar el connector de NetBeans en el navegador on depurareu el codi. Per fer-ho cal seleccionar, del desplegable, el navegador a utilitzar de l’opció With Netbeans Connector. En el vostre cas, utilitzareu el navegador Google Chrome (figura).

Figura Pantalla on seleccioneu el navegador que utilitzarà Netbeans per depurar el codi

Una vegada ho heu seleccionat, en executar el programa Netbeans us demanarà (figura) que instal·leu la seva extensió en el navegador.

Figura Finestra d’informació de Netbeans per instal·lar la seva extensió en el navegador

Aneu a la web store amb el navegador Google Chrome i afegiu l’extensió recomanada (figura).

Figura Afegir l’extensió de Netbeans a Google Chrome

Executar el debugger

Per executar-lo podeu utilitzar la combinació de tecles Ctrl+F5 o bé amb la icona de la figura.

Figura Icona per iniciar el mode de depuració

Amb aquestes dues opcions, el programa s’executa normalment fins al primer breakpoint. En el cas que no s’hagi establert cap breakpoint, el programa s’executarà normalment fins al final.

Executar el debugger fins on es trobi el cursor

Es pot iniciar el programa i fer que es pari on es trobi posicionat el cursor. Exemple: posicioneu el cursor a la línia on es troba declarada la variable IP. Després, premeu la tecla F4 (figura).

Figura Exemple de depuració de programa fins on es troba el cursor (F4)

Una vegada iniciada la depuració i el depurador es para, la següent línia de codi que s’executarà apareix en verd, amb una fletxa del mateix color a la seva esquerra.

Barra d’eines per depurar el programa

Ara provareu les eines que ens proporciona Netbeans per depurar un programa. Les eines son les que es poden veure a la figura figura, i estan explicades a la taula.

Figura Barra d’eines de depuració

Taula Accions per depurar un programa
Icona Significat
Step over (F8): executa una línia de codi. Si la instrucció és una crida a un mètode, executa el mètode sense entrar dins del codi del mètode.
Step Over Expresion (majúscules F8): veieu el valor de cada mètode que forma l’expressió en la finestra de Variables. Cada vegada que utilitzeu la comanda Step Over Expression, el depurador avança al següent mètode en l’expressió i se subratlla el mètode completat. Step Over Expression es comporta com Step Over quan no hi ha crides a mètodes addicionals.
Step into (F7): executa una línia de codi. Si la instrucció és una crida a un mètode, salta al mètode i continua l’execució per la primera línia del mètode.
Step out (Ctrl + F7): executa una línia de codi. Si la línia de codi actual es troba dins d’un mètode, s’executaran totes les instruccions que quedin del mètode i es torna a la instrucció des de la qual es va cridar al mètode.
Run to cursor (F4): s’executa el programa fins a la instrucció on es troba el cursor.
Continue (F5): l’execució del programa continua fins al següent breakpoint. Si no existeix un breakpoint s’executa fins al final.
Finish (majúscules + F5): acaba la depuració del programa.

Punts d’interrupció (breakpoints)

Un breakpoint o punt d’interrupció és una marca que indica al depurador que ha de detenir-se quan l’execució del programa arribi a ella. Quan el programa es deté en un breakpoint podeu examinar els valors actuals de les variables, detectar quan es crea un objecte o continuar la depuració línia a línia del programa.

Per fixar un breakpoint es prem sobre el nombre de línia on es desitja col·locar (figura). La línia queda ressaltada en color vermell amb una marca del mateix color en el marge esquerre.

Figura Fixar un ‘breakpoint’

Per eliminar un breakpoint es prem sobre el quadrat vermell. Si teniu molts breakpoints i voleu eliminar-los podeu fer-ho des de la finestra de breakpoints (figura). Damunt de la finestra podeu fer un clic al botó dret, i en el menú seleccionar Delete all. En canvi, si voleu deshabilitar-los cliqueu a Disable all.

Figura Finestra de ‘breakpoints’

Finestra de variables

Es poden veure les variables, el seu tipus i el seu valor actual. Ho podem fer mitjançant la finestra Variables. Podeu activar aquesta finestra mitjançant l’opció Window / Debugging del menú principal (figura).

Figura Finestra de variables

Una de les coses interessants que ens permet fer aquesta finestra és la modificació del valor d’una variable en temps d’execució. Executeu el codi i poseu un breakpoint a la línia: 16.

En aquest moment canviareu la variable IP que té el valor “127.0.0.1” (vegeu la figura figura); pel valor “10”, com a la figura figura.

Figura Finestra ‘Variables’ on veieu la variable IP

Figura Modificació en temps d’execució de la variable IP

Finalment, permeteu avançar l’execució del programa fins al final del codi utilitzant el botó Continue. Veureu que a la pàgina apareix el valor canviat (vegeu la figura figura).

Figura Resultat de la modificació de la variable IP

Depuració de codi PHP amb Firebug

L’objectiu d’aquesta activitat és conèixer el depurador Firebug, que podeu instal·lar directament en el navegador Firefox per depurar codi PHP.

En concret, es vol que l’estudiant configuri i instal·li el programa Firebug i FirePHP al navegador Mozilla Firefox. Utilitzeu la màquina virtual anomenada servidor PHP, que es va configurar a l’apartat El meu projecte PHP, 'Hola, Món' per instal·lar les llibreries necessàries per depurar codi PHP. Feu un petit exemple de depuració amb la pàgina index.php creada a l’apartat esmentat.

Per depurar el codi escrit al servidor PHP primer s’ha de configurar l’entorn. En aquest cas, s’han d’instal·lar dues extensions al navegador Mozilla Firebug. La primera extensió s’anomena Firebug. Molts de vosaltres ja la coneixeu, perquè és molt utilitzada per depurar codi del costat client, normalment Javascript. En el nostre cas, la utilitzareu per depurar codi de servidor amb alguna ajuda més. Però primer instal·lareu el programa Firebug al navegador Mozilla Firefox. Podeu descarregar-vos l’extensió de la següent adreça.

Tot seguit instal·lareu la primera ajuda per depurar PHP, l’extensió FirePHP. Aquesta extensió només es pot instal·lar si prèviament teniu instal·lat Firebug. La podeu descarregar i instal·lar de la següent adreça.

Si veieu les extensions instal·lades al navegador Firefox haurien d’aparèixer almenys aquestes dues. Vegeu la figura figura per comprovar que les teniu instal·lades.

Figura Extensions instal·lades al Firefox

Per descomptat, encara no heu fet res. Encara no podeu depurar codi al servidor, ja que només heu instal·lat programes al client. Haureu d’instal·lar alguna llibreria al servidor. La llibreria és FirePHP, però del costat servidor. La podeu descarregar aquí.

El contingut d’aquest arxiu s’ha de descomprimir a la carpeta HTML de la màquina virtual de l’apartat: El meu projecte PHP, 'Hola, Món'..

Realitzareu la instal·lació de la llibreria de la següent manera. Enviareu l’arxiu comprimit a la màquina virtual amb la comanda:

  1. scp firephp-core-0.4.0.zip willy@192.168.56.101:.

A la comanda anterior se suposa que el fitxer firephp-core-0.4.0.zip es troba en el directori actual des d’on s’executa la comanda, així com l’usuari de la màquina virtual es diu Willy i la IP de la màquina anomenada servidor PHP és la 192.168.56.101. Modifiqueu la comanda anterior segons les vostres necessitats.

Una vegada realitzada la comanda anterior, ja teniu el fitxer al servidor PHP. S’ha de descomprimir i enviar el seu contingut a la carpeta /var/www/html.

Accediu via SSH a la màquina servidor PHP i realitzeu les comandes següents:

  1. ssh willy@192.168.56.101
  2. sudo apt-get update
  3. sudo apt-get install unzip
  4. unzip firephp-core-0.4.0.zip
  5. mv firephp-core-0.4.0/lib/FirePHPCore /var/www/html/FirePHPCore

Veieu que només ens interessa la carpeta FirePHPCore, on es troben les llibreries per depurar l’aplicació web escrita en PHP (vegeu la figura figura).

Figura Instal·lar FirePHP al servidor PHP

Una vegada s’ha instal·lat (s’ha copiat al servidor) s’ha d’incloure a les pàgines PHP que necessiteu depurar. Per exemple, l’incloureu a la pàgina index.php utilitzada en l’apartat 1 d’aquesta unitat. Per incloure’l afegireu la següent línia al principi del document:

  1. require_once('FirePHPCore/fb.php');

A més a més, s’ha d’activar el buffer de PHP perquè funcioni la llibreria FirePHP. Aquesta s’activa amb la instrucció:

Aquesta instrucció s’ha d’escriure just després de realitzar la inclusió de la llibreria FirePHP. Una vegada fetes aquestes modificacions ja podeu utilitzar les instruccions de la llibreria FirePHP per depurar l’aplicació. Per exemple, feu la següent modificació a la pàgina index.php:

  1. <?php
  2. require_once('FirePHPCore/fb.php');
  3. ?>
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8">
  8. <title></title>
  9. </head>
  10. <body>
  11. <?php
  12. $var = "<h1>Hola, Món</h1>";
  13. fb($var);
  14. fb($var, "Una variable");
  15. fb($var, FirePHP::WARN);
  16. fb($var, FirePHP::INFO);
  17. fb($var, 'Una variable amb un error de tipus', FirePHP::ERROR);
  18. echo $var;
  19. ?>
  20. </body>
  21. </html>

Per activar en el navegador la depuració del codi PHP s’ha d’accedir a la pàgina PHP que es vol depurar i clicar en la icona del programa Firebug. Després cal tornar a executar la pàgina PHP; normalment, amb F5 ja tindreu el resultat esperat.

La depuració de l’execució anterior es guarda en un arxiu temporal (buffer) que llegeix el programa client Firebug per mostrar-la per pantalla. La informació resultant de la depuració del codi la podeu veure a la consola del mateix Firebug. Vegeu la figura per comprovar el resultat.

Figura Depuració d’una variable amb Firebug i FirePHP

Com veieu, la funció fb de la llibreria FirePHP ens permet escriure a la consola del programa Firebug. Podeu mostrar el contingut d’una variable en un moment donat i podem forçar que la informació que mostra la consola sigui de tipus informatiu (FirePHP::INFO), de tipus alerta (FirePHP::WARN) o de tipus error ( FirePHP::ERROR). Aquests tipus ens poden ser molt útils per discriminar les alertes.

També podeu veure les crides a les diverses funcions que s’han realitzat fins a arribar al punt que ens interessa depurar del codi. Per exemple, modifiqueu el fitxer anterior amb aquest:

  1. <?php
  2. require_once('FirePHPCore/fb.php');
  3. ?>
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8">
  8. <title></title>
  9. </head>
  10. <body>
  11. <?php
  12. $var = "<h1>Hola, Món</h1>";
  13. fb($var);
  14. fb($var, "Una variable");
  15. fb($var, FirePHP::WARN);
  16. fb($var, FirePHP::INFO);
  17. fb($var, 'Una variable amb un error de tipus', FirePHP::ERROR);
  18. echo $var;
  19. function hola() {
  20. fb('Hola, Món!', FirePHP::TRACE);
  21. }
  22. function salutacio() {
  23. hola();
  24. }
  25. salutacio();
  26. ?>
  27. </body>
  28. </html>

El resultat que veureu per consola del programa Firebug el podeu veure a la figura figura.

Figura Traça de depuració amb diverses funcions

Observeu que veieu totes les funcions que s’han executat fins a arribar al codi depurat.

Existeixen moltes més opcions, però, com sempre, s’han explicat les més importants. Podeu anar a la pàgina oficial per saber-ne més.

Anar a la pàgina següent:
Exercicis d'autoavaluació