2. Instalación de un entorno de trabajo

Utilizaremos 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 de 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 llamado 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 árbol:

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 administrar el SGBD y el MySQL con la herramienta [phpMyAdmin]. Es necesario instalar esta herramienta previamente;
[5]: el botón [Terminal] abre un terminal de comandos;
[6]: el botón [Root] abre un Explorador de Windows 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 administradas 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 cual no sería el caso si se abriera una ventana de comandos [cmd] en Windows. En este documento, cuando se deben escribir comandos para instalar tal o cual software, por lo general estos comandos se escriben 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], seleccione el tipo de proyecto [PHP Application];

en [4], asigne un nombre al proyecto;
en [5], elige una carpeta para el proyecto;
en [6], elige la versión de PHP que descargaste;
en [7], elige la codificación UTF-8 para los archivos PHP;
En [8], elige el modo [Script] para ejecutar los scripts PHP en modo de línea de comandos. Seleccione [Local WEB Server] para ejecutar un script PHP en un entorno web;
en [9,10], indique 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 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 específico de NetBeans. PHP también cuenta con este concepto, pero, a primera vista, se trata de dos conceptos distintos.

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 párrafo del enlace):

En [4], se instala [node.js]. Una vez finalizada la instalación, se abre un terminal de Laragon (véase el párrafo 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, comúnmente denominado [code], [VSCode] o [3-6]. Una vez hecho esto, podemos ejecutar esta herramienta de desarrollo:

2.2.1. Configuración de Visual Studio Code

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

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

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

Después de 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 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 predeterminada 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 escribir comandos de Windows;
en [6], se pueden abrir otros terminales;
en [5], la lista de terminales abiertos;
en [7], se cierra el terminal activo;

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

Vemos que el comando [npm] no fue reconocido. Esto significa que no forma parte del 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 que utiliza el terminal:

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

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

en [1]: se escribe el comando [path];
en [2]: la lista de carpetas de PATH. Ahí 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 observa que se puede acceder a los ejecutables [node] y [npm];

Nota: no se debe cerrar el terminal Laragon que inició el entorno de desarrollo [VSCode]; de lo contrario, VSCode se cerrará por sí solo.

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

El archivo [settings.json] se actualiza de inmediato:

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 puede ver claramente la carpeta de los ejecutables [node] y [npm]

2.2.2. Agregar extensiones a Visual Studio Code

Creemos un archivo de 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], vemos que estamos en la carpeta seleccionada. Las operaciones siguientes se realizarán en esta carpeta;

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

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

en [8-9]: ejecutamos el programa de JavaScript;
el resultado aparece en la consola de ejecución [10]. En [11] vemos el comando que se ejecutó: fue la aplicación [node] la que ejecutó el script [test-01.js]. Esto fue posible porque ese 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 requiere 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 obtiene el error [5]. Es posible recibir una advertencia sobre este tipo de error antes de la ejecución. Es preferible hacerlo así. Haremos dos cosas:
- instalar, mediante [npm], una biblioteca llamada [eslint] que verifica que la sintaxis del script cumpla con 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];

Primero, instalemos la biblioteca de JavaScript [eslint] con la herramienta [npm]. Para instalar una biblioteca (también llamada paquete) [npm], es necesario conocer su nombre exacto. Si no lo sabes, puedes visitar el sitio web de [npm] en URL (2019) [https://www.npmjs.com/]:

en [3], los paquetes que comienzan con [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 verificar 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 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;

Luego 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 modificó el archivo [package.json]. En la línea 3, se muestra 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 parte de la propiedad [devDependencies]. Esta propiedad enumera las dependencias del proyecto que se necesitan en modo de desarrollo, pero no en modo de producción. De hecho, la dependencia [eslint] solo se necesita en desarrollo para verificar que el código escrito cumpla con la norma ECMAScript;
- en [6], apareció una carpeta [node_modules] en el proyecto. Esta es la carpeta donde se instalan las dependencias del proyecto;

en [7], una parte de los paquetes instalados. Estos son muy numerosos. De hecho, no solo se instaló 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 te hará varias preguntas [3] para saber cómo quieres usar [eslint]. En caso de duda, deja las opciones predeterminadas. Para seleccionar una opción, usa las flechas arriba y abajo del teclado para elegirla y luego confírmala;
en [4], se ha creado un archivo [.eslintrc.js] en la raíz del proyecto;
en [6], el contenido del archivo. Puede copiar el 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 escribir el comando [2-3] para que se analice el archivo [tests/test-02.js];
en [4], se detecta el error de la variable no declarada;

Vamos a agregar 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 llamada [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 de 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ás modificarla;

Ahora regresemos al archivo [test-02.js]:

en [3-4], ahora se reportan 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 agrega la coma después del último elemento del archivo [settings.json] [1];
en [3], pegamos lo que habíamos copiado anteriormente en [5-6]: es la lista de comandos que permiten ejecutar los distintos lenguajes compatibles con [VSCode];
en [4], el comando que permite ejecutar los archivos de 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 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 específica [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 contamos con 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 a continuación de un curso PHP, en ocasiones haremos comparaciones entre estos dos lenguajes para señalar las diferencias entre ellos.