0

Eu sou bastante iniciante no âmbito do node.js, mas queria na humildade, entender o porquê de um código só aparecer no console.log do node e não poder armazenar em alguma variável para que eu possa manipulá-la no html com javascript cru, já que só de eu abrir um arquivo html com node importado, o console diz que o comando require não foi definido.

Esta é a API que estou a utilizar: https://github.com/matheuss/google-translate-api

    var http = require('http');

    const translate = require('google-translate-api');

    var server = http.createServer(function(req, res) {

    var url = req.url;


    translate('We did it!', {to: 'pt'}).then(res => {
      console.log(res.text);
    //=> I speak English
    console.log(res.from.language.iso);
    //=> nl



    }).catch(err => {
     console.error(err);
    });



    });

     server.listen(1337, '127.0.0.1');

     console.log('Server running at http://127.0.0.1:1337/');

Porém, estou perdido de como utilizar no html :( Por favor, alguém me ajuda ou me dá alguma alternativa que possa usar pls.

9
  • 1
    Vixi... difícil de entender sua pergunta. Node roda no back-end o script é executado e armazenado em memória, o javascript do HTML é executado no front-end (no cliente/navegador). Algumas bibliotecas (módulos) de Node podem ser executadas no front-end nativamente ou com uso de Browserify desde que, sejam projetadas para tal ou executem funções e recursos suportados por ambos os ambientes. Você deseja passar um objeto javascript do Node para o front-end? Commented 5/04/2018 às 3:07
  • 1
    A função "require()" é um dos métodos de importação de Node (loader), onde o script busca (importa) bibliotecas ou mesmo outros scripts (não necessariamente "módulos"). Versões mais recentes de Node bem como módulos que seguem um padrão mais recente usam "import". Você pode pegar a chamada de seu js pela rota, modificá-lo (uma vez que é somente texto) e devolver um script customizado, existem prós e contras neste "método". Eu recomendaria que você edita-se sua pergunta. Não esta clara o suficiente para apresentar uma resposta. Commented 5/04/2018 às 3:18
  • Tipo, a pergunta mais direta seria... Teria como utilizar algum dado do node.js em uma página html (clientside), ou de nenhuma forma ? Porque eu só quero esse dado que o objeto tem, que seria uma string contendo uma tradução... Commented 6/04/2018 às 4:44
  • Você pode buscar este dado usando REST fazendo uma requisição com AJAX ou Fetch ... você pode usar JSON.stringy() para tornar este dado em uma {String} e acomodar ao seu HTML para devolver ao usuário e buscar no DOM este dado simplesmente fazendo JSON.parse() ou pode modificar seu javascript para devolver este dado. Existem várias formas, você deves apenas pensar na "menos custosa" e que atenda suas necessidades. Como achas que deve ser? Commented 6/04/2018 às 4:58
  • Como você "abastece" a função de traduzir com uma {String}? Esta enviando esta {String} via POST para o servidor? Se for este o caso, isto é REST...basta apenas devolver o resultado. É isso que procuras? Commented 6/04/2018 às 5:00

1 Resposta 1

2

Como já mencionado, o node roda server-side, logo ele não irá rodar dentro de uma html client-side. Pense que as variáveis do Node estão em um contexto separado do javascript que irá rodar no front. Como já falaram, você teria que fazer uma requisição para o seu server para buscar os dados do lado do node. Ou também, injetar as variáveis no HTML e então enviar para o client.

Pensando no seu comentário sobre querer usar como "<p><?php $varContendoSaidaTraduzida ?> </p>"..., acho que o mais perto disso seria usar uma Template Engine.

A template engine irá permitir que você introduza pedaços de código no meio da sua HTML. Como por exemplo, utilizando EJS:

<body>
  <h1> Hello world! <%= message %> </h1>
</body>

Baseado no que você já tem, vou te dar um exemplo usando template engine e também fazendo uma chamada ao node(server) com Fetch. É bem simples, na verdade. O primeiro passo para você, seria escutar pelas requisições e devolver um html:

var http = require('http');
const translate = require('google-translate-api');
var server = http.createServer(function(req, res) {
     var url = req.url;
     //Escutando em localhost:1337/translate
     if(url ==='/translate'){
         translate('We did it!', {to: 'pt'}).then(response => {
             var translated = response.text;
             res.write('<h1>'+translated+'<h1>');
             res.end(); //end the response
         }).catch(err => {
             console.error(err);
         });
     }else{
         res.write('<h1>Not found!<h1>');
         res.end(); //end the response
     }
});
server.listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

Isso irá fazer com que você veja a mensagem traduzida quando acessar pelo navegador o localhost:1337/translate.

Agora o que precisamos fazer é instalar a template engine e criar um HTML para renderizar assim que recebermos um request, e então envia-lo de volta.

Primeiro, instale o EJS: npm install ejs

Agora crie um arquivo chamado home.ejs no mesmo nível do seu app.js (ou o nome que tiver dado para o seu servidor node), com o seguinte código:

<head>
  <meta charset="UTF-8">
</head>
<body>
  <h1> Tradutor </h1>
  <p> <%= message %> </p>
  <p> <%= translation %> </p>
  <p id='test'></p>
</body>
<script>
  //chamada para /fetchdata do client-side para o server-side
  fetch('/fetchdata').then(response => {
    return response.json();
  }).then(data => {
    document.getElementById('test').innerHTML = data.example;
  }).catch(err => {
    console.log(err);
  });
</script>

Agora, finalmente, mude seu app.js para o seguinte:

var http = require('http');
var ejs = require('ejs');
var fs = require('fs');

const translate = require('google-translate-api');
var server = http.createServer(function(req, res) {

    var url = req.url;

    //chamada para root
    if(url ==='/'){
      res.write('<h1>Welcome!</h1>');
      res.end();
    }
    //chamada para /translate
    else if(url ==='/translate'){
       translate('We did it!', {to: 'pt'}).then(response => {
           var translated = response.text;
           //ler o arquivo home.ejs
           var html = fs.readFileSync(__dirname + '/home.ejs', 'utf8');
           //json para injetar na view
           var json = {
             message: 'Olá!',
             translation: translated
           }
           //injetar json e rendizar com ejs (template engine)
           var htmlRenderizado = ejs.render(html, json);
           //envia para o client
           res.write(htmlRenderizado);
           res.end();
         }).catch(err => {
           console.error(err);
         });
     }
     //chamada para /fetchdata
     else if(url === '/fetchdata'){
       var data = {
         example: 'Data from fetch!'
       }
       res.writeHead(200, { 'Content-Type': 'application/json' });
       res.write(JSON.stringify(data));
       res.end();
     }
     else{
        res.write('<h1>Not found!<h1>'); //write a response
        res.end(); //end the response
     }
});
server.listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

Agora você tem um exemplo de como utilizar uma Template Engine e também de como fazer uma requisição do html para o node! Aconselho fortemente a dar uma olhada no Expressjs, ele irá facilitar muito o uso das rotas (que nesse exemplo está bem simplificado).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .