2. Configurar um ambiente de desenvolvimento

Iremos utilizar as seguintes ferramentas (no Windows 10 x64):

[Laragon] para executar o servidor web PHP;
[NetBeans] para editar o código PHP;
[Visual Studio Code] para escrever código JavaScript;
[Node.js] para o executar;
[npm] para descarregar e instalar as bibliotecas JavaScript de que vamos precisar;

2.1. Ambiente de desenvolvimento do servidor web

Os scripts PHP foram escritos e testados no seguinte ambiente:

um ambiente com servidor web Apache / SGBD MySQL / PHP 7.3 chamado Laragon;
o IDE de desenvolvimento NetBeans 10.0;

2.1.1. Instalação do Laragon

O Laragon é um pacote que reúne vários componentes de software:

um servidor web Apache. Vamos utilizá-lo para escrever scripts web em PHP;
o sistema de gestão de bases de dados MySQL;
a linguagem de script PHP;
um servidor Redis que fornece 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] resulta na seguinte estrutura de diretórios:

[6] contém o diretório de instalação do 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 a base de dados MySQL;
[3]: o botão [WEB] exibe a página web [http://localhost], que corresponde ao ficheiro PHP [<laragon>/www/index.php], onde <laragon> é a pasta de instalação do Laragon;
[4]: o botão [Database] permite-lhe gerir a base de dados MySQL utilizando a ferramenta [phpMyAdmin]. Deve instalar esta ferramenta previamente;
[5]: O botão [Terminal] abre um terminal de comandos;
[6]: O botão [Root] abre uma janela do Explorador do Windows posicionada na pasta [<laragon>/www], que é o diretório raiz do site [http://localhost]. É aqui que deve colocar todas as aplicações web geridas pelo servidor Apache do Laragon;

Vamos abrir um terminal do 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], digite o comando [echo %PATH%], que exibe a lista de pastas pesquisadas ao procurar um executável. Todas as pastas principais do Laragon estão incluídas neste caminho de executáveis, o que não seria o caso se abrisse um prompt de comando [cmd] no Windows. Neste documento, quando precisar de digitar comandos para instalar um determinado software, esses comandos são geralmente digitados num terminal Laragon;

2.1.2. Instalação do IDE NetBeans 10.0

O IDE NetBeans 10.0 pode ser descarregado a partir do seguinte endereço (março de 2019):

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

O ficheiro descarregado é um ficheiro ZIP que apenas precisa de ser descompactado. Assim que o NetBeans estiver instalado e iniciado, pode criar o seu primeiro projeto PHP.

Em [1], selecione a opção Ficheiro / Novo Projeto;
Em [2], selecione a categoria [PHP];
em [3], selecione o tipo de projeto [Aplicação PHP];

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

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

Em [11], o projeto é criado utilizando um script [index.php];
Em [12], escrevemos um script PHP mínimo;
em [13], executamos [index.php];

em [14], os resultados na janela [output] do NetBeans;
em [15], criamos um novo script;
em [16], o novo script;

O leitor pode criar todos os scripts que se seguem em pastas diferentes dentro do mesmo projeto PHP. O código-fonte dos scripts deste documento está disponível na seguinte estrutura de diretórios do NetBeans:

Os scripts deste documento estão localizados no diretório do projeto [scripts-console] [1]. Também utilizaremos bibliotecas PHP que serão colocadas na pasta [<laragon-lite>/www/vendor] [2], onde <laragon-lite> é o diretório de instalação do software Laragon. Para que o NetBeans reconheça as bibliotecas em [2] como parte do projeto [scripts-console], precisamos de incluir a pasta [vendor] [2] no [Include Path] [3] do projeto. Vamos configurar o NetBeans para que a pasta [<laragon-lite>/www/vendor] [2] seja incluída em todos os novos projetos PHP, e não apenas no projeto [scripts-console]:

Em [1-2], aceda às opções do NetBeans;
em [3-4], configure as opções do PHP;
em [5-7], configure o [Global Include Path] do PHP: as pastas listadas em [7] são automaticamente incluídas no [Include Path] de todos os projetos PHP;

em [9], aceda às propriedades do ramo [Include Path];
em [10-11], as novas bibliotecas exploradas pelo NetBeans. O NetBeans explora o código PHP nessas bibliotecas e armazena as suas classes, interfaces, funções, etc., a fim de prestar assistência ao programador;

em [12], um trecho de 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 exibe a documentação do método selecionado;

O conceito de [Include Path] é específico do NetBeans. O PHP também possui este conceito, mas, em princípio, são dois conceitos diferentes.

Agora que o ambiente de desenvolvimento está configurado, podemos abordar os conceitos básicos do PHP.

2.2. Ambiente de desenvolvimento para JavaScript

Estas ferramentas podem ser instaladas utilizando o Laragon (ver secção de links):

Em [4], instale o [node.js]. Assim que a instalação estiver concluída, abra um terminal Laragon (ver secção de links) e verifique a versão do [node.js] instalada (1), bem como a do [npm] (2):

Em seguida, instalamos o Visual Studio Code, frequentemente referido como [code] ou [VSCode] [3-6]. Depois de concluída a instalação, podemos iniciar esta ferramenta de desenvolvimento:

2.2.1. Configurar o Visual Studio Code

Vamos agora mostrar como configurámos o [VSCode] para que o leitor possa compreender as capturas de ecrã que irão aparecer ao longo do texto. O leitor é livre de configurar o [VSCode] como achar melhor. Pode até definir o seu espaço de trabalho preferido. Isto não é importante para o que iremos fazer a seguir.

Primeiro, vamos alterar a aparência da janela do [VSCode] para ter um fundo claro em vez de preto:

Em seguida, ocultamos a barra lateral esquerda [1-2], cujos itens também estão disponíveis no menu. Em [3-6], definimos o código para se formatar sempre que o ficheiro for guardado e sempre que copiarmos e colarmos.

Depois de guardar a configuração [Ctrl-S], pode fechar a janela [Configurações] [7]. Pode voltar à configuração do [VSCode] a qualquer momento [8-10]:

Estas definições são guardadas num ficheiro [settings.json] que pode ser editado diretamente. Vamos abrir a janela [Definições] como mostrado:

Em [4], pode editar o ficheiro [settings.json] diretamente:

em [1], o caminho para o ficheiro [settings.json]. Uma forma de reverter para as definições predefinidas é eliminar este ficheiro;
em [2], as configurações que acabámos de definir;

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

em [3], o tipo de terminal aberto, neste caso o PowerShell;
em [4], pode digitar comandos do Windows;
em [6], pode abrir terminais adicionais;
em [5], a lista de terminais abertos;
em [7], fecha o terminal ativo;

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

Vemos que o comando [npm] não foi reconhecido. Isto significa que não faz parte do PATH do terminal (a lista de pastas onde procurar um executável, neste caso o [npm]). Podemos descobrir o PATH utilizado pelo terminal:

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

Para iniciar o [VSCode] e aceder ao [npm], vamos iniciar o [VSCode] a partir de um terminal do Laragon. Quando iniciado desta forma, o [VSCode] herdará o PATH do terminal do Laragon, que contém as pastas dos executáveis [node] e [npm]:

em [1]: digite o comando [path];
em [2]: a lista de pastas no PATH. Vemos a pasta [node-v10] [2], o que garante que os executáveis [node] e [npm] serão encontrados;

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

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

Nota: Não feche o terminal Laragon que iniciou o ambiente de desenvolvimento [VSCode], caso contrário, o próprio VSCode será encerrado.

Vamos fazer uma configuração final: vamos alterar o terminal padrão do [VSCode]:

O ficheiro [settings.json] é atualizado imediatamente:

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

em [2], um terminal [cmd] (não o PowerShell);
em [3], o comando [path] apresenta o PATH do terminal;
em [4], pode ver claramente as pastas dos executáveis [node] e [npm]

2.2.2. Adicionar extensões ao Visual Studio Code

Vamos criar um ficheiro JavaScript com o [VSCode]:

em [3-4], criamos uma pasta;
em [5], definimo-la como a pasta atual no [VSCode];
Em [6], abra um terminal;
em [7], pode ver que agora se encontra na pasta selecionada. Os passos seguintes serão realizados nesta pasta;

Em [1-3]: crie uma nova pasta;
Em [4]: adicione um ficheiro a esta pasta;

em [5-7]: crie o seu primeiro programa em JavaScript;

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

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

Em [1-3], o novo script é definido. A instrução [use strict] na linha 1 exige uma verificação sintática rigorosa. Neste contexto, todas as variáveis devem ser declaradas utilizando uma das palavras-chave [let, const, var]. Este não é o caso da variável [x] na linha 2;
quando executamos este código utilizando [Ctrl-F5], obtemos o erro [5]. É possível ser avisado deste tipo de erro antes da execução. Isto é preferível. Vamos fazer duas coisas:
- instalar uma biblioteca chamada [eslint] usando [npm] que verifica se a sintaxe do script está em conformidade com o padrão ECMAScript 6;
- instalar uma extensão do Visual Studio Code, também chamada ESLINT, que facilita a utilização da biblioteca [eslint] no [VSCode];

Primeiro, vamos instalar a biblioteca JavaScript [eslint] utilizando a ferramenta [npm]. Para instalar uma biblioteca [npm] (conhecida como pacote), é necessário saber o seu nome exato. Se não o souber, pode aceder ao site do [npm] na URL (2019) [https://www.npmjs.com/]:

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

em [7], o comando [npm] para instalar o pacote [eslint];
em [8], a configuração do pacote;
em [9], como usá-lo para verificar a sintaxe de um script JavaScript;

Instalamos o pacote [eslint] numa janela do [Terminal] no [VSCode]. Primeiro, precisamos de criar um ficheiro [package.json] na raiz do diretório de trabalho do [VSCode]. Este ficheiro conterá a lista de pacotes JavaScript utilizados pelo projeto [VSCode]:

em [1], clique com o botão direito do rato no explorador de projetos (não na pasta tests);
em [3-4], crie o ficheiro [package.json] na raiz do projeto [JavaScript], no mesmo nível da pasta [tests] (mas não dentro de [tests]);
em [4-6], adicione um objeto JSON vazio ao ficheiro [package.json];

Em seguida, abra um terminal [VSCode] para instalar o [eslint]:

Em [2], está 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 modificado. A linha 3 mostra a versão do [eslint] que está instalada. A linha 2, [devDependencies], corresponde à opção [--save-dev] utilizada durante a instalação. Este argumento significa que a dependência instalada deve ser listada no ficheiro [package.json] como parte da propriedade [devDependencies]. Esta propriedade lista as dependências do projeto necessárias no modo de desenvolvimento, mas não no modo de produção. Na verdade, a dependência [eslint] só é necessária durante o desenvolvimento para verificar se o código escrito está em conformidade com a norma ECMAScript;
- em [6], surgiu uma pasta [node_modules] no projeto. Esta é a pasta onde as dependências do projeto são instaladas;

Em [7], alguns dos pacotes instalados. Existem bastantes. Na verdade, não só o pacote [eslint] foi instalado, como também todos os pacotes dos quais ele depende;

[1-2], num terminal do [VSCode], execute o comando para configurar o pacote [eslint]. Isto irá fazer várias perguntas [3] para determinar como pretende utilizar o [eslint]. Em caso de dúvida, mantenha as opções predefinidas tal como estão. Para selecionar uma opção, utilize as teclas de seta 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 o 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": {
  }
};

Isto não é suficiente para reportar erros no ficheiro [test-02.js]:

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

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

em [3-5], instalamos a extensão chamada [ESLint];

Em [1], uma página de informações sobre a extensão recém-instalada;
em [2], podemos ver que o modo de validação do [ESLint] é [type], o que significa que a sintaxe dos scripts JavaScript será validada à medida que o texto for sendo digitado;

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

em [6-7], a configuração do [ESLint]. É aqui que pode modificá-la;

Agora, voltemos ao ficheiro [test-02.js]:

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

Se corrigirmos o erro, os avisos do ESLint desaparecem:

Agora vamos instalar uma extensão chamada [Code Runner]:

Depois de instalar a extensão [Code-Runner] [1-5], pode configurá-la utilizando [6-7] (acima);

em [1-2], as opções de configuração para o [Code-Runner];
Em [3], especificamos que o terminal de saída deve ser limpo antes de cada execução;
em [4], localize o elemento [Executor Map], que lista as ferramentas de execução para diferentes linguagens;
em [5-6], copie a configuração para a área de transferência;
em [7-8], modificamos o ficheiro [settings.json];

em [2], adicione uma vírgula após o último elemento no ficheiro [settings.json] [1];
em [3], cole o que foi copiado anteriormente em [5-6]: esta é a lista de comandos para executar as várias linguagens suportadas pelo [VSCode];
em [4], o comando para executar ficheiros JavaScript. Isto só funciona se o [node] estiver no PATH do [VSCode]. Caso contrário, pode introduzir o caminho completo para o executável [5];

Agora vamos guardar a configuração (Ctrl-S). Com a extensão [Code Runner], os ficheiros JavaScript podem ser executados clicando com o botão direito do rato 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 janelas abertas, clique com o botão direito do rato nos seus 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 extensões instaladas [19-20]:

Dispomos agora de boas ferramentas para o desenvolvimento em JavaScript. Iremos agora apresentar esta linguagem utilizando pequenos trechos de código. Uma vez que esta introdução se segue a um curso de PHP, iremos ocasionalmente comparar as duas linguagens para destacar as suas diferenças.