2. Instalação de um ambiente de trabalho

Vamos utilizar as seguintes ferramentas (no Windows 10 de 64 bits):

[Laragon] para executar o servidor web PHP;
[Netbeans] para modificar o código PHP;
[Visual Studio Code] para escrever os códigos JavaScript;
[node.js] para os executar;
[npm] para descarregar e instalar as bibliotecas JavaScript de que vamos precisar;

2.1. Ambiente de trabalho para o servidor web

Os scripts PHP foram escritos e testados no seguinte ambiente:

um ambiente de servidor web Apache / SGBD MySQL / PHP 7.3 denominado Laragon;
o ambiente de desenvolvimento NetBeans 10.0 (IDE);

2.1.1. Instalação do Laragon

O Laragon é um pacote que reúne vários programas:

um servidor web Apache. Iremos utilizá-lo para escrever scripts web em PHP;
o SGBD MySQL;
a linguagem de script PHP;
um servidor Redis que implementa um cache para aplicações web:

O Laragon pode ser descarregado (março de 2019) no seguinte endereço:

https://laragon.org/download/

A instalação [1-5] gera a seguinte estrutura de árvore:

em [6], a pasta de instalação de PHP;

Ao iniciar o [Laragon], é apresentada a seguinte janela:

[1]: o menu principal do Laragon;
[2]: o botão [Start All] inicia o servidor web Apache e o SGBD MySQL;
[3]: o botão [WEB] apresenta a página web [http://localhost], que corresponde ao ficheiro PHP [<laragon>/www/index.php], em que <laragon> é a pasta de instalação do Laragon;
[4]: o botão [Database] permite gerir o SGBD e o MySQL com a ferramenta [phpMyAdmin]. É necessário instalar esta ferramenta previamente;
[5]: o botão [Terminal] abre um terminal de comandos;
[6]: o botão [Root] abre o Explorador do Windows com a pasta [<laragon>/www] selecionada, que é a raiz do site [http://localhost]. É aqui que devem ser colocadas todas as aplicações web geridas pelo servidor Apache do Laragon;

Vamos abrir um terminal Laragon [5]:

em [1], o tipo de terminal. Estão disponíveis três tipos de terminais em [6];
em [2, 3]: a pasta atual;
em [4], introduz-se o comando [echo %PATH%], que apresenta a lista de pastas exploradas durante a procura de um executável. Todas as pastas principais do Laragon estão incluídas neste caminho dos executáveis, o que não aconteceria se abríssemos uma janela de comandos [cmd] no Windows. Neste documento, quando for necessário introduzir comandos para instalar um determinado software, esses comandos são geralmente introduzidos num terminal do Laragon;

2.1.2. Instalação do IDE NetBeans 10.0

O IDE NetBeans 10.0 pode ser descarregado na seguinte morada (março de 2019):

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

O ficheiro descarregado é um ficheiro zip que basta descompactar. Depois de instalar e iniciar o NetBeans, é possível criar um primeiro projeto PHP.

em [1], selecione a opção «File / New Project»;
no [2], selecione a categoria [PHP];
no [3], selecione o tipo de projeto [PHP Application];

em [4], atribuir um nome ao projeto;
em [5], escolha uma pasta para o projeto;
em [6], selecione a versão do PHP que descarregou;
em [7], selecione a codificação UTF-8 para os ficheiros PHP;
No [8], selecione o modo [Script] para executar os scripts PHP no modo de linha de comandos. Selecione [Local WEB Server] para executar um script PHP num ambiente web;
em [9,10], indicar o diretório de instalação do interpretador PHP do pacote Laragon:

selecione [Finish] para concluir o assistente de criação do projeto PHP;

em [11], o projeto é criado com um script [index.php];
em [12], escreve-se um script PHP mínimo;
em [13], executa-se o [index.php];

no [14], os resultados aparecem na janela [output] do NetBeans;
no [15], cria-se um novo script;
em [16], o novo script;

O leitor poderá criar todos os scripts que se seguem em diferentes pastas do mesmo projeto PHP. Os códigos-fonte dos scripts deste documento estão disponíveis na seguinte estrutura de pastas do NetBeans:

Os scripts deste documento estão localizados na estrutura do projeto [scripts-console] [1]. Iremos utilizar também as bibliotecas PHP, que serão colocadas na pasta [<laragon-lite>/www/vendor] [2], em que <laragon-lite> é a pasta de instalação do software Laragon. Para que o NetBeans reconheça as bibliotecas de [2] como parte do projeto [scripts-console], temos de incluir a pasta [vendor] [2] no ramo [Include Path] [3] do projeto. Vamos configurar o NetBeans para que a pasta [<laragon-lite>/www/vendor] [2] seja incluída em qualquer novo projeto PHP e não apenas no projeto [scripts-console]:

no [1-2], acedemos às opções do NetBeans;
no [3-4], configuramos as opções do PHP;
em [5-7], configura-se o [Global Include Path] a partir do PHP: as pastas indicadas em [7] são automaticamente incluídas no [Include Path] de qualquer projeto PHP;

no [9], acede-se às propriedades do ramo [Include Path];
no [10-11], as novas bibliotecas exploradas pelo NetBeans. O NetBeans explora o código PHP dessas bibliotecas e memoriza as suas classes, interfaces, funções… para poder oferecer ajuda ao programador;

em [12], um código utiliza a classe [PhpMimeMailParser\Parser] da biblioteca [vendor/php-mime-mail-parser];
em [13], o NetBeans sugere os métodos desta classe;
em [14-15], o NetBeans apresenta a documentação do método selecionado;

O conceito de [Include Path] é, neste caso, específico do NetBeans. PHP também possui este conceito, mas, à primeira vista, trata-se de dois conceitos diferentes.

Agora que o ambiente de trabalho já está instalado, podemos abordar os conceitos básicos do PHP.

2.2. Ambiente de trabalho para o JavaScript

Estas ferramentas podem ser instaladas a partir do Laragon (ver parágrafo com o link):

No [4], instala-se o [node.js]. Assim que a instalação estiver concluída, abre-se um terminal Laragon (ver parágrafo com o link) e verifica-se a versão instalada do [node.js] (1), bem como a do [npm] (2):

Em seguida, instalamos o Visual Studio Code, frequentemente designado por [code], [VSCode] ou [3-6]. Feito isto, podemos iniciar esta ferramenta de desenvolvimento:

2.2.1. Configuração do Visual Studio Code

Vamos agora mostrar como configurámos o [VSCode] para que o leitor compreenda as capturas de ecrã que irão aparecer de vez em quando. O leitor é livre de configurar o [VSCode] como entender. Pode até instalar o seu ambiente de trabalho preferido. Isso não tem grande importância para o que vamos fazer a seguir.

Em primeiro lugar, alteramos o aspeto da janela do [VSCode] para ter um fundo claro em vez de preto:

Em seguida, ocultamos a barra à esquerda [1-2], cujos elementos também estão disponíveis no menu. Em [3-6], definimos que o código seja formatado sempre que o ficheiro for guardado e sempre que for feito um copiar/colar.

Depois de guardar a configuração [Ctrl-S], é possível fechar a janela [Settings] [7]. É possível regressar a qualquer momento à configuração de [VSCode] [8-10]:

Estas configurações são guardadas num ficheiro [settings.json] que pode ser editado diretamente. Abramos a janela de configuração [Settings], tal como foi visto:

No [4], é possível editar diretamente o ficheiro [settings.json]:

em [1], o caminho do ficheiro [settings.json]. Uma forma de voltar à configuração predefinida é eliminar este ficheiro;
no ficheiro [2], as configurações que acabámos de fazer;

Agora, vamos abrir um terminal dentro do [VSCode] [1-2]:

em [3], o tipo de terminal aberto, neste caso PowerShell;
em [4], é possível introduzir comandos do Windows;
em [6], é possível abrir outros terminais;
em [5], a lista de terminais abertos;
em [7], encerra o terminal ativo;

Iremos utilizar o terminal de [VSCode] para instalar pacotes (bibliotecas) de JavaScript com a ferramenta [npm] (Node Package Manager). Vamos verificar, tal como fizemos anteriormente num terminal Laragon, a versão instalada do [npm]:

Vemos que o comando [npm] não foi reconhecido. Isto significa que não pertence ao PATH (lista de pastas a explorar para procurar um executável, neste caso o [npm]) do terminal. É possível saber qual é o PATH utilizado pelo terminal:

O ficheiro executável [npm] não se encontra nestas pastas. Tal como as outras ferramentas instaladas pelo Laragon, encontra-se na pasta [<laragon>\bin] do Laragon e, mais especificamente, na subpasta de [nodejs] [4-6].

Para iniciar o [VSCode] e aceder ao [npm], iremos iniciar o [VSCode] a partir de um terminal do Laragon. Quando executado desta forma, o [VSCode] herdará o PATH do terminal Laragon, que, por sua vez, contém a pasta com os executáveis [node] e [npm]:

em [1]: introduz-se o comando [path];
em [2]: a lista de pastas do PATH. Nela vemos a pasta [node-v10] [2], o que nos garante que os executáveis [node] e [npm] serão encontrados;

O [VSCode] é iniciado a partir de um terminal Laragon com o comando [code]:

no [2], abre-se um terminal PowerShell no [VSCode];
em [3-4], verifica-se que os executáveis [node] e [npm] estão acessíveis;

Nota: não se deve fechar o terminal Laragon que iniciou o ambiente de desenvolvimento [VSCode], caso contrário, o próprio VSCode fecha-se.

Vamos efetuar uma última configuração: vamos alterar o terminal predefinido do [VSCode]:

O ficheiro [settings.json] é atualizado imediatamente:

Agora, vamos abrir um novo terminal [VSCode] [1]:

em [2], um terminal [cmd] (não PowerShell);
em [3], o comando [path] apresenta o PATH do terminal;
em [4], é possível ver claramente a pasta dos executáveis [node] e [npm]

2.2.2. Adicionar extensões ao Visual Studio Code

Vamos criar um ficheiro JavaScript com o [VSCode]:

no [3-4], criamos uma pasta;
em [5], definimos essa pasta como a pasta atual de [VSCode];
em [6], abre-se um terminal;
em [7], verifica-se que estamos na pasta selecionada. As operações a seguir serão realizadas nesta pasta;

em [1-3]: cria-se uma nova pasta;
em [4]: adiciona-se um ficheiro a esta pasta;

em [5-7]: criamos o nosso primeiro programa em JavaScript;

em [8-9]: executa-se o programa JavaScript;
o resultado aparece na consola de execução [10]. Vemos em [11] o comando que foi executado: foi a aplicação [node] que executou o script [test-01.js]. Isto só foi possível porque este executável se encontra no PATH do [VSCode]; caso contrário, teríamos obtido um erro a indicar que o comando [node] era desconhecido;

Vamos proceder da mesma forma para executar um segundo script, o [test-02.js]:

em [1-3], define-se o novo script. A instrução [use strict] da linha 1 exige uma verificação rigorosa da sintaxe. Neste contexto, qualquer variável deve ser declarada com uma das palavras-chave [let, const, var]. Não é o caso da variável [x] da linha 2;
quando se executa este código através de [Ctrl-F5], obtém-se o erro [5]. É possível ser avisado deste tipo de erro antes da execução. É preferível fazê-lo. Vamos fazer duas coisas:
- instalar, com o [npm], uma biblioteca chamada [eslint] que verifica se a sintaxe do script está em conformidade com a norma ECMAScript 6;
- instalar uma extensão para o Visual Studio Code, também chamada ESLINT, que facilita a utilização da biblioteca [eslint] no [VSCode];

Vamos, em primeiro lugar, instalar a biblioteca JavaScript [eslint] utilizando a ferramenta [npm]. Para instalar uma biblioteca (também designada por «pacote») [npm], é necessário saber o seu nome exato. Caso contrário, pode-se aceder ao site da [npm] na URL (2019) [https://www.npmjs.com/]:

em [3], os pacotes que começam por [esl];
em [4-6], encontra-se o pacote [eslint];

em [7], o comando [npm] para instalar o pacote [eslint];
em [8], a configuração do pacote;
em [9], a sua utilização para verificar a sintaxe de um script JavaScript;

Instalamos o pacote [eslint] numa janela [Terminal] do [VSCode]. Em primeiro lugar, temos de criar um ficheiro [package.json] na raiz da pasta de trabalho do [VSCode]. Este ficheiro conterá a lista dos pacotes jS utilizados pelo projeto [VSCode]:

em [1], clique com o botão direito do rato no explorador de projetos (não na pasta «tests»);
no [3-4], cria-se o ficheiro [package.json] na raiz do projeto [javascript], ao mesmo nível que a pasta [tests] (mas não dentro de [tests]);
em [4-6], insere-se no ficheiro [package.json] um objeto jSON vazio;

Em seguida, abre-se um terminal [VSCode] para instalar o [eslint]:

no [2], estamos na raiz do projeto [javascript];
em [3], o comando que instala o pacote [eslint];
após a execução,
- em [4-5], o ficheiro [package.json] foi alterado. Na linha 3, encontra-se a versão instalada do [eslint]. Na linha 2, [devDependencies] corresponde ao argumento [--save-dev] da instalação. Este argumento significa que a dependência instalada deve ser registada no ficheiro [package.json] como elemento da propriedade [devDependencies]. Esta propriedade enumera as dependências do projeto que são necessárias no modo de desenvolvimento, mas não no modo de produção. De facto, a dependência [eslint] é necessária apenas em desenvolvimento para verificar se o código escrito cumpre a norma ECMAScript;
- em [6], surgiu uma pasta [node_modules] no projeto. É nesta pasta que estão instaladas as dependências do projeto;

em [7], parte dos pacotes instalados. Estes são muito numerosos. Com efeito, não só foi instalado o pacote [eslint], como também todos os pacotes dos quais este depende;

[1-2], num terminal [VSCode], executa-se o comando de configuração do pacote [eslint]. Este irá apresentar várias perguntas [3] para saber como se pretende utilizar o [eslint]. Em caso de dúvida, mantenha as opções predefinidas. Para selecionar uma opção, utilize as setas para cima e para baixo do teclado para escolher a opção e, em seguida, confirme-a;
em [4], foi criado um ficheiro [.eslintrc.js] na raiz do projeto;
em [6], o conteúdo do ficheiro. Pode copiar esse conteúdo para o seu próprio ficheiro;


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

Tudo isto não é suficiente para identificar os erros do ficheiro [test-02.js]:

é necessário introduzir o comando [2-3] para que o ficheiro [tests/test-02.js] seja analisado;
no ficheiro [4], é detetado o erro relativo à variável não declarada;

Vamos adicionar ao [VSCode] uma extensão que permitirá visualizar os erros de JavaScript em tempo real. Esta extensão baseia-se no pacote [eslint] que instalámos:

no [3-5], instalamos a extensão denominada [ESLint];

em [1], uma página com informações sobre a extensão recém-instalada;
em [2], vemos que o modo de verificação de [ESLint] é [type], o que significa que a sintaxe dos scripts jS será verificada à medida que o texto for sendo digitado;

O ESLint pode ser configurado através do ficheiro de configuração geral do [VSCode]:

no [6-7], a configuração do [ESLint]. É aqui que poderá alterá-la;

Voltemos agora ao ficheiro [test-02.js]:

em [3-4], os erros na variável [x] são agora assinalados;
em [5]: o número de erros ESLint no ficheiro;
em [6], indica que na pasta [tests] existem ficheiros com erros;

Se corrigirmos o erro, os avisos de ESLint desaparecem:

Vamos agora instalar uma extensão chamada [Code Runner]:

Depois de instalada a extensão [Code-Runner] [1-5], é possível configurá-la com [6-7] (acima);

no [1-2], os elementos de configuração do [Code-Runner];
em [3], solicita-se que o terminal de saída seja limpo antes de cada execução;
em [4], localiza-se o elemento [Executor Map] que lista as ferramentas de execução de diferentes linguagens;
em [5-6], copia-se a configuração para a área de trabalho;
em [7-8], altera-se o ficheiro [settings.json];

em [2], adiciona-se a vírgula após o último elemento do ficheiro [settings.json] [1];
no ficheiro [3], cola-se o que foi copiado anteriormente do ficheiro [5-6]: trata-se da lista de comandos que permitem executar as diferentes linguagens suportadas pelo ficheiro [VSCode];
em [4], o comando que permite executar os ficheiros JavaScript. Este só funciona se [node] estiver no PATH de [VSCode]. Se não for esse o caso, pode-se indicar o caminho completo do executável [5];

Feito isto, guardemos a configuração (Ctrl-S). Com a extensão [Code Runner], os ficheiros JavaScript podem ser executados com um clique direito no código [6] (acima):

2.2.3. Alguns comandos úteis do [VSCode]

para formatar o seu código, clique com o botão direito do rato sobre ele [1];
para fechar as janelas abertas, clique com o botão direito do rato nos respetivos títulos [2-3];

para exibir uma janela específica [4-5];
para guardar o seu projeto (Workspace) [6-9] ;
para guardar um projeto [10-11];

para abrir um projeto [11-16]:

ver as extensões instaladas [19-20]:

Dispomos agora de boas ferramentas para desenvolver em JavaScript. Vamos agora apresentar esta linguagem através de pequenos excertos de código. Como esta apresentação surge na sequência de um curso PHP, faremos, por vezes, comparações entre estas duas linguagens para destacar as diferenças entre elas.