Interface & Design

Introdução

O desenvolvimento do frontend, ou seja, o que é processado visualmente pelo browser, é realizado dentro da pasta ui.

Como padrão, nesta pasta encontra-se o ambiente de desenvolvimento desenvolvido em ReactJS com Ant.Design e Less, compilado utilizando o Webpack.

Apesar de o ambiente padrão se encontrar configurado para estas tecnologias, visto serem bastante utilizadas hoje em dia, não se encontra limitado às mesmas.

Caso pretenda utilizar outra tecnologia como VueJS, MaterialUI, Sass, Bootstrap, TypeScript, etc... basta alterar dentro da pasta 📂 ui as configurações do 📂 package.json e do 📂 webpack.config.js para as tecnologias que preferir mais.

Terminal Integrado

Sempre que o servidor do Netuno inicia, também executa o NPM com o comando ➡️ npm run watch dentro da pasta 📂 ui da aplicação em execução. Que neste caso deverá ser a aplicação demonstração.

O output do NPM é integrado no mesmo output do servidor do Netuno, assim apenas há um único terminal com o output integrado do servidor e da compilação da User Interface.

Consumir o Serviço

Após ter sido criado o serviço trabalhadores em 📂 server/services/trabalhadores.js através do Visual Studio Code que diponibiliza a informação em JSON no endereço:

O próximo passo é consumi-lo para apresentar os dados na inteface do browser.

Com estes dados vamos e apresentá-los numa tabela e um gráfico.

Assumindo que tem o Visual Studio Code ou outro editor de texto aberto com a aplicação de demonstração abra o seguinte ficheiro no editor:

📂 ui/src/containers/DashboardContainer/index.js

Vamos alterar este código já existente.

Preparar o state

Logo no início da componente DashboardContainer dentro da function está a definição do seu state.

Adicione uma nova entrada para guardar os dados dos trabalhadores da seguinte forma:

            // 👇 Adicione as novas linhas de código abaixo:
            const [trabalhadores, setTrabalhadores] = useState([]);
            const [carregar, setCarregar] = useState(false);

Ou seja, acrescente a nova linha const [trabalhadores, setTrabalhadores] = useState([]); de estado.

Criar Método carregarTrabalhadores

Mais abaixo repare que existe um método chamado carregarTrabalhadores, este método realiza a obtenção dos dados dos trabalhadores que aparecem no dashboard atualmente.

Este método também serve para carregar os dados dos trabalhadores.

Insira o código abaixo:

    /**
    *** 🚀 Carrega os dados dos Trabalhores.
    ***    Através da execução do serviço:
    **     http://localhost:9000/services/trabalhadores
    */
    const carregarTrabalhadores = () => {
        setTrabalhadores([]);
        setCarregar(true);
        _service({
            url: intl.locale.indexOf('pt') == 0 ? '/services/trabalhadores' : '/services/workers',
            success: (response) => {
                setTrabalhadores(response.json);
                setCarregar(false);
            },
            fail: (e) => {
                setCarregar(false);
                console.error('Falha no serviço dos Trabalhadores.', e);
                message.error(intl.formatMessage({ id: `${messages}.loading_error` }));
            }
        });
    };

O que este código acima faz é passar os dados das trabalhadores para o state do componente em ReactJS, isto através da execução do serviço trabalhadores que, ao receber os dados em JSON , armazena os mesmos no state através da execução do setTrabalhadores.

No código final os métodos deverão ficar estruturados desta forma:

    useEffect(() => {
        ...
    }, []);

    const carregarTrabalhadores = () => {
        ...
    }

    return ( 
        ...
    );

Onde os ... são as diversas linhas de código omitidas dentro dos respectivos métodos

Executar o novo método useEffect

Agora falta executar o nosso novo método useEffect quando o componente é "montado", este método é executado quando o componente é construído na apresentação visual do browser.

Para isto basta, um pouco mais acima, acrescentar a linha de código carregarTrabalhadores(); dentro do método useEffect desta forma:

    useEffect(() => {
        carregarTrabalhadores();
    }, []);

Esta nova linha de código vai chamar o método que executa o serviço http://localhost:9000/services/trabalhadores, que foi criado anteriormente, para obter os dados em JSON e guardá-los no state (estado) do componente para ser apresentado no return (visualização).

Compilação

Grave o ficheiro e logo a seguir repare que no terminal onde tem o Netuno em execução vai aparecer o resultado da nova compilação do ui, com novas linhas do resultado de compilação do ReactJS + WebPack.

O output esperado no terminal deverá ser algo semelhante ao seguinte:

Hash: abe630735cdaa909166b
Version: webpack 4.41.2
Time: 969ms
Built at: 01/12/2019 21:42:28
     Asset      Size  Chunks                   Chunk Names
   main.js  3.11 MiB    main  [emitted]        main
main.js.map  3.47 MiB    main  [emitted] [dev]  main
Entrypoint main = main.js main.js.map
[./src/containers/DashboardContainer/index.jsx] 4.22 KiB {main} [built]
   + 425 hidden modules

Caso haja algum erro na compilação então aparecerá no terminal a indicação do problema.

Até aqui realizámos o consumo do nosso serviço trabalhadores em que os dados obtidos ficam guardados no state do componente DashboardContainer que assim fica disponível para ser utilizado no return.

Apresentar os Dados

Falta apresentar os dados visualmente na interface que o utilizador vê no browser.

Para apresentar os dados no browser temos que alterar o método return, que processa o aspecto visual dos componentes em ReactJS.

No fim do código do DashboardContainer encontrará o método: return ( ... );

Vamos alterá-lo adicionando apenas mais uma linha de código para conter mais um componente DataVisualization que vai apresentar os dados referentes às trabalhadores, o código deverá ficar da seguinte forma:

    // 🔍 Procure no código existente por:
    return (
    <div ref={ref}>
      { carregar == false ?
        <DataVisualization data={trabalhadores} />
        : <Spin/>
      }
      <ListServices />
    </div>
  );

Repare que apenas a linha abaixo é que deve ser acrescentada:

<DataVisualization data={trabalhadores} />

Assim o DataVisualization vai receber os dados obtidos através do serviço trabalhadores via JSON que ficaram guardados no state.

Compilação Final

Guarde o ficheiro com todas as alterações realizadas até aqui.

Certifique-se que no output do terminal não existem erros.

Agora atualize a página no browser e deverá ver o resultado final, ou alternativamente, clique no link abaixo:

Se o dashboard aparecer em branco quer dizer há erros no código.

Verifique na consola do browser nas ferramentas do programador se há erros.

Saber mais 👇

Introdução rápida ao ReactJS:

← ServiçoPróximos Passos →