2. Instalación de un entorno de trabajo

Vamos a utilizar las siguientes herramientas (en Windows 10 de 64 bits):

[Laragon] para ejecutar el servidor web PHP;
[Netbeans] para modificar el código PHP;
[Visual Studio Code] para escribir los códigos JavaScript;
[node.js] para ejecutarlos;
[npm] para descargar e instalar las bibliotecas de JavaScript que necesitaremos;

2.1. Entorno de trabajo para el servidor web

Los scripts PHP se han escrito y probado en el siguiente entorno:

un entorno de servidor web Apache / SGBD MySQL / PHP 7.3 denominado Laragon;
el entorno de desarrollo NetBeans 10.0;

2.1.1. Instalación de Laragon

Laragon es un paquete que reúne varios programas:

un servidor web Apache. Lo utilizaremos para escribir scripts web en PHP;
el SGBD MySQL;
el lenguaje de script PHP;
un servidor Redis que implementa una caché para aplicaciones web:

Laragon se puede descargar (marzo de 2019) en la siguiente dirección:

https://laragon.org/download/

La instalación [1-5] genera la siguiente estructura de directorios:

en [6], la carpeta de instalación de PHP;

Al ejecutar [Laragon], aparece la siguiente ventana:

[1]: el menú principal de Laragon;
[2]: el botón [Start All] inicia el servidor web Apache y el SGBD MySQL;
[3]: el botón [WEB] muestra la página web [http://localhost], que corresponde al archivo PHP [<laragon>/www/index.php], donde <laragon> es la carpeta de instalación de Laragon;
[4]: el botón [Database] permite gestionar el SGBD y el MySQL con la herramienta [phpMyAdmin]. Es necesario instalarlo previamente;
[5]: el botón [Terminal] abre un terminal de comandos;
[6]: el botón [Root] abre un explorador de Windows situado en la carpeta [<laragon>/www], que es la raíz del sitio web [http://localhost]. Ahí es donde hay que colocar todas las aplicaciones web gestionadas por el servidor Apache de Laragon;

Abramos un terminal de Laragon [5]:

en [1], el tipo de terminal. Hay tres tipos de terminales disponibles en [6];
en [2, 3]: la carpeta actual;
en [4], se escribe el comando [echo %PATH%], que muestra la lista de carpetas exploradas durante la búsqueda de un ejecutable. Todas las carpetas principales de Laragon están incluidas en esta ruta de los ejecutables, lo que no ocurriría si se abriera una ventana de comandos [cmd] en Windows. En este documento, cuando hay que escribir comandos para instalar tal o cual programa, estos se suelen escribir en un terminal de Laragon;

2.1.2. Instalación de IDE NetBeans 10.0

NetBeans 10.0 se puede descargar en la siguiente dirección (marzo de 2019):

https://netbeans.apache.org/download/index.HTML

El archivo descargado es un zip que solo hay que descomprimir. Una vez instalado y ejecutado NetBeans, se puede crear un primer proyecto PHP.

en [1], selecciona la opción «Archivo / Nuevo proyecto»;
en [2], selecciona la categoría [PHP];
en [3], selecciona el tipo de proyecto [PHP Application];

en [4], asigna un nombre al proyecto;
en [5], elige una carpeta para el proyecto;
en [6], selecciona la versión de PHP que has descargado;
en [7], elige la codificación UTF-8 para los archivos PHP;
En [8], selecciona el modo [Script] para ejecutar los scripts PHP en modo de línea de comandos. Selecciona [Local WEB Server] para ejecutar un script PHP en un entorno web;
en [9,10], indica el directorio de instalación del intérprete PHP del paquete Laragon:

seleccione [Finish] para finalizar el asistente de creación del proyecto PHP;

en [11], el proyecto se crea con un script [index.php];
en [12], se escribe un script PHP mínimo;
en [13], se ejecuta [index.php];

en [14], los resultados aparecen en la ventana [output] de NetBeans;
en [15], se crea un nuevo script;
en [16], el nuevo script;

El lector podrá crear todos los scripts que siguen a continuación en diferentes carpetas del mismo proyecto PHP. Los códigos fuente de los scripts de este documento están disponibles en la siguiente estructura de NetBeans:

Los scripts de este documento se encuentran en la estructura de directorios del proyecto [scripts-console] [1]. También utilizaremos las bibliotecas PHP, que se ubicarán en la carpeta [<laragon-lite>/www/vendor] [2], donde <laragon-lite> es la carpeta de instalación del software Laragon. Para que NetBeans reconozca las bibliotecas de [2] como parte del proyecto [scripts-console], debemos incluir la carpeta [vendor] [2] en la rama [Include Path] [3] del proyecto. Vamos a configurar NetBeans para que la carpeta [<laragon-lite>/www/vendor] [2] se incluya en cualquier proyecto nuevo PHP y no solo en el proyecto [scripts-console]:

en [1-2], vamos a las opciones de NetBeans;
en [3-4], se configuran las opciones de PHP;
en [5-7], se configura el [Global Include Path] de PHP: las carpetas indicadas en [7] se incluyen automáticamente en el [Include Path] de cualquier proyecto PHP;

en [9], se accede a las propiedades de la rama [Include Path];
en [10-11], las nuevas bibliotecas exploradas por NetBeans. NetBeans explora el código PHP de estas bibliotecas y memoriza sus clases, interfaces, funciones… para poder ofrecer ayuda al desarrollador;

en [12], un código utiliza la clase [PhpMimeMailParser\Parser] de la biblioteca [vendor/php-mime-mail-parser];
en [13], NetBeans sugiere los métodos de esta clase;
en [14-15], NetBeans muestra la documentación del método seleccionado;

El concepto de [Include Path] es propio de NetBeans. PHP también cuenta con este concepto, pero, a priori, se trata de dos conceptos diferentes.

Ahora que ya se ha instalado el entorno de trabajo, podemos abordar los conceptos básicos de PHP.

2.2. Entorno de trabajo para JavaScript

Estas herramientas se pueden instalar desde Laragon (véase el apartado del enlace):

En [4], se instala [node.js]. Una vez finalizada la instalación, se abre un terminal de Laragon (véase el apartado del enlace) y se consulta la versión instalada de [node.js] (1), así como la de [npm] (2):

A continuación, instalamos Visual Studio Code, conocido habitualmente como [code], [VSCode] o [3-6]. Una vez hecho esto, podemos ejecutar esta herramienta de desarrollo:

2.2.1. Configuración de Visual Studio Code

A continuación, mostramos cómo hemos configurado [VSCode] para que el lector comprenda las capturas de pantalla que aparecerán de vez en cuando. El lector es libre de configurar [VSCode] como mejor le parezca. Incluso puede instalar su entorno de trabajo favorito. Esto no tiene importancia para lo que vamos a hacer a continuación.

En primer lugar, cambiamos el aspecto de la ventana de [VSCode] para que tenga un fondo claro en lugar de negro:

A continuación, ocultamos la barra de la izquierda [1-2], cuyos elementos también están disponibles en el menú. En [3-6], configuramos que se formatee el código cada vez que se guarde el archivo y cada vez que se copie y pegue.

Tras guardar la configuración [Ctrl-S], podemos cerrar la ventana [Settings] [7]. Se puede volver en cualquier momento a la configuración de [VSCode] [8-10]:

Estas configuraciones se guardan en un archivo [settings.json] que se puede editar directamente. Abramos la ventana de configuración [Settings] tal y como se ha visto:

En [4], se puede editar directamente el archivo [settings.json]:

en [1], la ruta del archivo [settings.json]. Una forma de volver a la configuración por defecto es eliminar este archivo;
en [2], las configuraciones que acabamos de realizar;

Ahora, abramos un terminal dentro de [VSCode] [1-2]:

en [3], el tipo de terminal abierto, en este caso PowerShell;
en [4], se pueden introducir comandos de Windows;
en [6], se pueden abrir otros terminales;
en [5], la lista de terminales abiertos;
en [7], se cierra el terminal activo;

Utilizaremos el terminal de [VSCode] para instalar paquetes (bibliotecas) de JavaScript con la herramienta [npm] (Node Package Manager). Comprobemos, tal y como hicimos anteriormente en un terminal de Laragon, la versión instalada de [npm]:

Vemos que el comando [npm] no ha sido reconocido. Esto significa que no pertenece al PATH (lista de carpetas que se deben explorar para buscar un ejecutable, en este caso [npm]) del terminal. Se puede averiguar cuál es el PATH utilizado por el terminal:

El archivo ejecutable [npm] no se encuentra en ninguna de estas carpetas. Al igual que el resto de herramientas instaladas por Laragon, se encuentra en la carpeta [<laragon>\bin] de Laragon y, más concretamente, en la subcarpeta de [nodejs] [4-6].

Para ejecutar [VSCode] y acceder a [npm], ejecutaremos [VSCode] desde un terminal de Laragon. Al ejecutarse de esta forma, [VSCode] heredará el PATH del terminal Laragon, que a su vez contiene la carpeta con los ejecutables [node] y [npm]:

en [1]: se introduce el comando [path];
en [2]: la lista de carpetas de PATH. En ella se ve la carpeta [node-v10] [2], lo que nos garantiza que se encontrarán los ejecutables [node] y [npm];

[VSCode] se ejecuta desde un terminal Laragon con el comando [code]:

en [2], se abre un terminal PowerShell dentro de [VSCode];
en [3-4], se puede ver que se puede acceder a los ejecutables [node] y [npm];

Nota: no hay que cerrar el terminal Laragon que ha iniciado el entorno de desarrollo [VSCode], ya que, de lo contrario, el propio VSCode se cerrará.

Vamos a realizar una última configuración: vamos a cambiar el terminal predeterminado de [VSCode]:

El archivo [settings.json] se actualiza inmediatamente:

Ahora, abramos un nuevo terminal [VSCode] [1]:

en [2], un terminal [cmd] (no PowerShell);
en [3], el comando [path] devuelve el PATH del terminal;
en [4], se ve claramente la carpeta de los ejecutables [node] y [npm]

2.2.2. Añadir extensiones a Visual Studio Code

Creemos un archivo JavaScript con [VSCode]:

En [3-4], creamos una carpeta;
en [5], lo convertimos en la carpeta actual de [VSCode];
en [6], se abre un terminal;
en [7], se comprueba que estamos en la carpeta seleccionada. Las operaciones siguientes se realizarán en ella;

en [1-3]: se crea una nueva carpeta;
en [4]: se añade un archivo a esta carpeta;

en [5-7]: creamos nuestro primer programa en JavaScript;

en [8-9]: se ejecuta el programa JavaScript;
el resultado aparece en la consola de ejecución [10]. En [11] vemos el comando que se ha ejecutado: ha sido la aplicación [node] la que ha ejecutado el script [test-01.js]. Esto ha sido posible porque este ejecutable se encuentra en el PATH de [VSCode]; de lo contrario, se habría producido un error indicando que el comando [node] era desconocido;

Procedamos de la misma manera para ejecutar un segundo script, [test-02.js]:

en [1-3], se define el nuevo script. La instrucción [use strict] de la línea 1 exige una verificación estricta de la sintaxis. En este contexto, toda variable debe declararse con una de las palabras clave [let, const, var]. Este no es el caso de la variable [x] de la línea 2;
al ejecutar este código mediante [Ctrl-F5], se produce el error [5]. Es posible recibir una advertencia sobre este tipo de error antes de la ejecución. Es preferible hacerlo así. Vamos a hacer dos cosas:
- instalar, mediante [npm], una biblioteca llamada [eslint] que comprueba que la sintaxis del script se ajusta a la norma ECMAScript 6;
- instalar una extensión para Visual Studio Code, también llamada ESLINT, que facilita el uso de la biblioteca [eslint] dentro de [VSCode];

En primer lugar, instalemos la biblioteca de JavaScript [eslint] con la herramienta [npm]. Para instalar una biblioteca (lo que se conoce como «paquete») [npm], es necesario conocer su nombre exacto. Si no es así, podemos visitar la página web de [npm] en URL (2019) [https://www.npmjs.com/]:

en [3], los paquetes que empiezan por [esl];
en [4-6], se encuentra el paquete [eslint];

en [7], el comando [npm] para instalar el paquete [eslint];
en [8], la configuración del paquete;
en [9], su uso para comprobar la sintaxis de un script de JavaScript;

Instalamos el paquete [eslint] en una ventana [Terminal] de [VSCode]. En primer lugar, debemos crear un archivo [package.json] en la raíz de la carpeta de trabajo de [VSCode]. Este archivo contendrá la lista de paquetes jS utilizados por el proyecto [VSCode]:

en [1], haz clic con el botón derecho del ratón en el explorador de proyectos (no en la carpeta «tests»);
En [3-4], se crea el archivo [package.json] en la raíz del proyecto [javascript], al mismo nivel que la carpeta [tests] (pero no dentro de [tests]);
en [4-6], se inserta en el archivo [package.json] un objeto jSON vacío;

A continuación, se abre un terminal [VSCode] para instalar [eslint]:

en [2], nos encontramos en la raíz del proyecto [javascript];
en [3], el comando que instala el paquete [eslint];
tras la ejecución,
- en [4-5], se ha modificado el archivo [package.json]. En la línea 3, aparece la versión instalada de [eslint]. En la línea 2, [devDependencies] corresponde al argumento [--save-dev] de la instalación. Este argumento significa que la dependencia instalada debe registrarse en el archivo [package.json] como elemento de la propiedad [devDependencies]. Esta propiedad enumera las dependencias del proyecto que se necesitan en modo desarrollo, pero no en modo producción. De hecho, la dependencia [eslint] solo es necesaria en desarrollo para comprobar que el código escrito cumple con la norma ECMAScript;
- en [6], ha aparecido una carpeta [node_modules] en el proyecto. Es la carpeta donde se instalan las dependencias del proyecto;

en [7], parte de los paquetes instalados. Son muy numerosos. De hecho, no solo se ha instalado el paquete [eslint], sino también todos los paquetes de los que depende;

[1-2]; en un terminal [VSCode] se ejecuta el comando de configuración del paquete [eslint]. Este le planteará varias preguntas [3] para saber cómo desea utilizar [eslint]. En caso de duda, deje las opciones predeterminadas. Para seleccionar una opción, utilice las flechas arriba y abajo del teclado para elegirla y, a continuación, confírmela;
en [4], se ha creado un archivo [.eslintrc.js] en la raíz del proyecto;
en [6], el contenido del archivo. Puede copiar su contenido en su propio archivo;


module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
  }
};

Todo esto no es suficiente para señalar los errores del archivo [test-02.js]:

hay que introducir el comando [2-3] para que se analice el archivo [tests/test-02.js];
en [4], se detecta el error de variable no declarada;

Vamos a añadir a [VSCode] una extensión que permitirá ver los errores de JavaScript en tiempo real. Esta extensión se basa en el paquete [eslint] que hemos instalado:

En [3-5], instalamos la extensión denominada [ESLint];

en [1], una página con información sobre la extensión recién instalada;
En [2], se observa que el modo de verificación de [ESLint] es [type], lo que significa que la sintaxis de los scripts jS se verificará al mismo tiempo que se escribe el texto;

ESLint se puede configurar a través del archivo de configuración general de [VSCode]:

en [6-7], la configuración de [ESLint]. Aquí es donde podrá modificarla;

Volvamos ahora al archivo [test-02.js]:

en [3-4], ahora se señalan los errores en la variable [x];
en [5]: el número de errores ESLint en el archivo;
en [6], indica que en la carpeta [tests] hay archivos con errores;

Si se corrige el error, las advertencias de ESLint desaparecen:

Ahora instalemos una extensión llamada [Code Runner]:

Una vez instalada la extensión [Code-Runner] [1-5], se puede configurar con [6-7] (arriba);

en [1-2], los elementos de configuración de [Code-Runner];
en [3], se solicita que se borre el terminal de salida antes de cada ejecución;
en [4], se localiza el elemento [Executor Map] que enumera las herramientas de ejecución de diferentes lenguajes;
en [5-6], se copia la configuración al portapapeles;
en [7-8], se modifica el archivo [settings.json];

en [2], se añade la coma detrás del último elemento del archivo [settings.json] [1];
en [3], se pega lo que se ha copiado anteriormente en [5-6]: se trata de la lista de comandos que permiten ejecutar los distintos lenguajes compatibles con [VSCode];
en [4], el comando que permite ejecutar los archivos JavaScript. Este solo funciona si [node] se encuentra en el PATH de [VSCode]. Si no es así, se puede indicar la ruta completa del ejecutable [5];

Una vez hecho esto, guardemos la configuración (Ctrl-S). Con la extensión [Code Runner], los archivos de JavaScript se pueden ejecutar haciendo clic con el botón derecho del ratón sobre el código [6] (arriba):

2.2.3. Algunos comandos útiles de [VSCode]

para dar formato a tu código, haz clic con el botón derecho sobre él [1];
para cerrar las ventanas abiertas, haz clic con el botón derecho sobre sus títulos [2-3];

para mostrar una ventana concreta [4-5];
para guardar su proyecto (Workspace) [6-9];
para guardar un proyecto [10-11];

para abrir un proyecto [11-16]:

Para ver las extensiones instaladas [19-20]:

Ahora disponemos de buenas herramientas para desarrollar en JavaScript. A continuación, presentaremos este lenguaje mediante breves fragmentos de código. Dado que esta presentación se realiza tras el curso PHP, en ocasiones realizaremos comparaciones entre ambos lenguajes para señalar las diferencias entre ellos.