2. Instalação de um ambiente de trabalho

Utilizaremos 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 executá-los;
[npm] para baixar e instalar as bibliotecas de JavaScript de que precisaremos;

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 chamado 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 softwares:

um servidor web Apache. Vamos usá-lo para escrever scripts web em PHP;
o SGBD MySQL;
a linguagem de script PHP;
um servidor Redis que implementa um cache para aplicativos web:

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

https://laragon.org/download/

A instalação [1-5] gera a seguinte estrutura de diretórios:

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

Ao executar o [Laragon], é exibida 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] exibe a página da web [http://localhost], que corresponde ao arquivo PHP [<laragon>/www/index.php], onde <laragon> é a pasta de instalação do Laragon;
[4]: o botão [Database] permite gerenciar o SGBD e o MySQL com a ferramenta [phpMyAdmin]. É necessário instalá-la 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]. É nesse local que devem ser colocadas todas as aplicações web gerenciadas pelo servidor Apache do Laragon;

Vamos abrir um terminal do Laragon [5]:

em [1], o tipo de terminal. Três tipos de terminais estão disponíveis em [6];
em [2, 3]: a pasta atual;
em [4], digita-se o comando [echo %PATH%], que exibe a lista de pastas percorridas durante a busca por um executável. Todas as pastas principais do Laragon estão incluídas nesse caminho dos executáveis, o que não seria o caso se abríssemos uma janela de comando [cmd] no Windows. Neste documento, quando for necessário digitar comandos para instalar determinado software, esses comandos geralmente são digitados em um terminal do Laragon;

2.1.2. Instalação do IDE NetBeans 10.0

O IDE NetBeans 10.0 pode ser baixado no seguinte endereço (março de 2019):

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

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

em [1], selecione a opção Arquivo / Novo Projeto;
no [2], selecione a categoria [PHP];
no [3], selecione o tipo de projeto [PHP Application];

em [4], nomeie o projeto;
em [5], escolha uma pasta para o projeto;
em [6], selecione a versão do PHP baixada;
em [7], selecione a codificação UTF-8 para os arquivos PHP;
No [8], selecione o modo [Script] para executar os scripts PHP no modo de linha de comando. Selecione [Local WEB Server] para executar um script PHP em um ambiente web;
no [9,10], indique 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 a seguir 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]. Também utilizaremos as bibliotecas PHP, que serão colocadas na pasta [<laragon-lite>/www/vendor] [2], onde <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], precisamos 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 todos os novos projetos PHP e não apenas no projeto [scripts-console]:

no [1-2], acesse as 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], acessa-se as propriedades do ramo [Include Path];
no [10-11], as novas bibliotecas exploradas pelo NetBeans. O NetBeans explora o código PHP dessas bibliotecas e armazena suas classes, interfaces, funções... para poder oferecer ajuda ao desenvolvedor;

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 dessa classe;
em [14-15], o NetBeans exibe a documentação do método selecionado;

O conceito de [Include Path] é, neste caso, específico do NetBeans. PHP também possui esse conceito, mas, a princípio, trata-se de dois conceitos diferentes.

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

2.2. Ambiente de trabalho para o JavaScript

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

No [4], instala-se o [node.js]. Após a conclusão da instalação, abre-se um terminal do 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 chamado de [code], [VSCode] ou [3-6]. Feito isso, podemos iniciar essa ferramenta de desenvolvimento:

2.2.1. Configuração do Visual Studio Code

Mostraremos agora como configuramos o [VSCode] para que o leitor compreenda as capturas de tela que aparecerão de vez em quando. O leitor tem total liberdade para configurar o [VSCode] como quiser. Ele pode até instalar seu ambiente de trabalho preferido. Isso não faz diferença para o que faremos 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 à esquerda [1-2], cujos elementos também estão disponíveis no menu. Em [3-6], configuramos a formatação do código a cada salvamento do arquivo e a cada operação de copiar/colar.

Após salvar a configuração [Ctrl-S], é possível fechar a janela [Settings] [7]. É possível retornar a qualquer momento à configuração de [VSCode] [8-10]:

Essas configurações são salvas em um arquivo [settings.json], que pode ser editado diretamente. Vamos abrir a janela de configuração [Settings], conforme visto anteriormente:

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

no [1], o caminho do arquivo [settings.json]. Uma maneira de voltar à configuração padrão é excluir esse arquivo;
em [2], as configurações que acabamos de fazer;

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

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

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

Vemos que o comando [npm] não foi reconhecido. Isso significa que ele não pertence ao PATH (lista de pastas a serem exploradas para localizar um executável, neste caso, o [npm]) do terminal. É possível identificar o PATH utilizado pelo terminal:

O executável [npm] não está presente nessas pastas. Assim como as outras ferramentas instaladas pelo Laragon, ele está na pasta [<laragon>\bin] do Laragon e, mais especificamente, na subpasta de [nodejs] [4-6].

Para iniciar o [VSCode] e ter acesso ao [npm], vamos iniciar o [VSCode] a partir de um terminal do Laragon. Quando executado dessa 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]: digite 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] é executado a partir de um terminal Laragon com o comando [code]:

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

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

Faremos uma última configuração: vamos alterar o terminal padrão do [VSCode]:

O arquivo [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] retorna o PATH do terminal;
em [4], é possível ver claramente a pasta dos executáveis [node] e [npm]

2.2.2. Adicionando extensões ao Visual Studio Code

Vamos criar um arquivo 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 nessa pasta;

em [1-3]: cria-se uma nova pasta;
em [4]: adiciona-se um arquivo nessa pasta;

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

em [8-9]: executamos o programa JavaScript;
o resultado aparece no console de execução [10]. Vemos em [11] o comando que foi executado: foi o aplicativo [node] que executou o script [test-01.js]. Isso só foi possível porque esse executável está no PATH do [VSCode]; caso contrário, teríamos recebido um erro indicando que o comando [node] era desconhecido;

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

em [1-3], definimos o novo script. A instrução [use strict] da linha 1 exige uma verificação rigorosa da sintaxe. Nesse contexto, toda variável deve ser declarada com uma das palavras-chave [let, const, var]. Esse não é o caso da variável [x] da linha 2;
ao executar esse código por meio de [Ctrl-F5], obtém-se o erro [5]. É possível ser avisado sobre esse tipo de erro antes da execução. Isso é preferível. Faremos 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 o uso da biblioteca [eslint] no [VSCode];

Vamos, primeiro, instalar a biblioteca JavaScript [eslint] usando a ferramenta [npm]. Para instalar uma biblioteca (também chamada de pacote) [npm], é preciso saber seu nome exato. Caso contrário, é possível acessar o site da [npm] na URL (2019) [https://www.npmjs.com/]:

em [3], os pacotes que começam com [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], sua utilização para verificar a sintaxe de um script JavaScript;

Instalamos o pacote [eslint] em uma janela [Terminal] do [VSCode]. Primeiramente, precisamos criar um arquivo [package.json] na raiz da pasta de trabalho do [VSCode]. Esse arquivo conterá a lista dos pacotes jS utilizados pelo projeto [VSCode]:

em [1], clique com o botão direito do mouse no explorador de projetos (não na pasta “tests”);
no [3-4], cria-se o arquivo [package.json] na raiz do projeto [javascript], no mesmo nível da pasta [tests] (mas não dentro de [tests]);
no [4-6], insere-se no arquivo [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 arquivo [package.json] foi modificado. Na linha 3, encontra-se a versão instalada do [eslint]. Na linha 2, [devDependencies] corresponde ao argumento [--save-dev] da instalação. Esse argumento significa que a dependência instalada deve ser registrada no arquivo [package.json] como um elemento da propriedade [devDependencies]. Essa propriedade lista as dependências do projeto necessárias no modo de desenvolvimento, mas não no modo de produção. De fato, a dependência [eslint] é necessária apenas no desenvolvimento para verificar se o código escrito está em conformidade com a norma ECMAScript;
- em [6], uma pasta [node_modules] surgiu no projeto. Essa é a pasta onde estão instaladas as dependências do projeto;

em [7], parte dos pacotes instalados. São muitos. De fato, não só o pacote [eslint] foi instalado, mas também todos os pacotes dos quais ele depende;

[1-2]; em um terminal [VSCode], executa-se o comando de configuração do pacote [eslint]. O programa fará várias perguntas [3] para saber como você deseja utilizar o [eslint]. Em caso de dúvida, mantenha as opções padrão. Para selecionar uma opção, use as setas para cima e para baixo do teclado para escolher a opção e, em seguida, confirme-a;
em [4], um arquivo [.eslintrc.js] foi criado na raiz do projeto;
em [6], o conteúdo do arquivo. Você pode copiar esse conteúdo para o seu próprio arquivo;


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

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

é preciso digitar o comando [2-3] para que o arquivo [tests/test-02.js] seja analisado;
no [4], é detectado o erro relacionado à variável não declarada;

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

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

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

O ESLint pode ser configurado por meio do arquivo de configuração geral do [VSCode]:

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

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

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

Se corrigirmos o erro, os avisos de ESLint desaparecem:

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

uma vez 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 transferência;
em [7-8], modifica-se o arquivo [settings.json];

em [2], adiciona-se a vírgula após o último elemento do arquivo [settings.json] [1];
no arquivo [3], cola-se o que foi copiado anteriormente do arquivo [5-6]: trata-se da lista de comandos que permitem executar as diferentes linguagens suportadas pelo [VSCode];
em [4], o comando que permite executar os arquivos JavaScript. Esse comando só funciona se [node] estiver no PATH de [VSCode]. Caso contrário, pode-se definir o caminho completo do executável [5];

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

2.2.3. Alguns comandos úteis do [VSCode]

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

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

para abrir um projeto [11-16]:

para visualizar as extensões instaladas [19-20]:

Agora dispomos de boas ferramentas para desenvolver em JavaScript. Apresentaremos essa linguagem por meio de pequenos trechos de código. Como esta apresentação segue um curso PHP, faremos, ocasionalmente, comparações entre essas duas linguagens para destacar as diferenças entre elas.