He revisado los documentos en el sitio web, pero no hay ejemplos de cómo usar la API de traducción de Google con un proyecto de reacción. ¿Alguien sabe cómo integrar esto para que pueda hacer una simple llamada de traducción a la API? Gracias

2
cbutler 27 feb. 2018 a las 23:11

4 respuestas

La mejor respuesta

Hice esto con nodeJs, después de leer su pregunta, hice una solicitud a través de mi localhost, espero que esto ayude un poco.

NodeJs index.js

route.post('/', (req, res) => {
    var q = req.body.q;
    console.log(q);
  var options = { method: 'POST',
  url: 'https://translation.googleapis.com/language/translate/v2',
  form: 
   { key: process.env.TRANSLATE,
     q: q,
     target: 'en' } };
    request(options, function (error, response, body) {
    if (error) throw new Error(error);
    console.log(body);
    res.send(body);
    });
})

ReactJS App.js

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      value: '',
      translated: '...'
    }
    this.translate=this.translate.bind(this);
  }

  translate(){
    axios.post('http://localhost:9000/translate',{q:this.state.value})
    .then(data => {
      this.setState({translated: data.data.data.translations[0].translatedText})
      console.log(data.data.data.translations[0].translatedText)
    }).catch(err => {
      console.log('error')
    })
  }



  render() {
    return (
      <div>
        <input 
          value={this.state.value}
          onChange={(e)=>this.setState({value: e.target.value})}
          type="text"/>
        <button onClick={this.translate}>Submit</button>
        <h1>{this.state.translated}</h1>
      </div>

    );
  }
}

export default App;
0
baseem 27 feb. 2018 a las 21:52

Usando el idioma de los usuarios automáticamente:

    import React from 'react'

    export default class Translate extends React.Component{

      constructor(props){

        super(props)

        this.state={

          greeting:'I say: "Hello, you all!"',
          greeting_in_user_language: null

        }

        this.userLanguage = navigator.language.slice(0,2)
        this.API_KEY = 'YOUR_API_KEY'
        this.URL = `https://translation.googleapis.com/language/translate/v2?key=${this.API_KEY}&source=en`
        this.URL += `&target=${this.userLanguage}`

      }
      componentWillMount() {

        this.translate( 'greeting_in_user_language', '&q=' + encodeURI(this.state.greeting))

      }

      translate = (key,string_to_translate) => {


        fetch(this.URL+string_to_translate)
          .then(res => res.json())
          .then(
            ( res ) => { 
              let text = res.data.translations[0].translatedText.replace(/(&quot\;)/g,"\"")
              this.setState({[key]:text})
            }      
          ) .catch(
              ( error ) => { 
                console.log("There was an error: ", error); 
              }
            )
      }

      render() {
        return(
          <>
          <section className="page">
            <p>{
             this.state.greeting_in_user_language ?  
                this.state.greeting_in_user_language : 
                this.state.greeting
            }</p>
          </section>
          </>
        )
      }
     }
1
flx 1 feb. 2019 a las 21:22

Simplemente corrigiendo los errores tipográficos en la url.

let url = `https://translation.googleapis.com/language/translate/v2?key=${API_KEY}`;
url += '&q=' + encodeURI(text);
url += `&source=${fromLang}`;
url += `&target=${toLang}`;
-1
Hariprasad Sureshkumar 16 may. 2018 a las 18:11

Entonces, con la ayuda de Gregory para darse cuenta de que Google Translate solo usa una API REST, lo hice funcionar haciendo una simple llamada usando fetch. En caso de que otros intenten hacer lo mismo, agregaré un código aquí:

let fromLang = 'en';
let toLang = 'no'' // translate to norwegian
let text = 'something to translate';

const API_KEY = [YOUR_API_KEY];

let url = `https://translation.googleapis.com/language/translate/v2?key${API_KEY}`;
url += '&q=' + encodeURI(text);
url += `&source=${fromLang}`;
url += `&target${toLang}`;

fetch(url, { 
  method: 'GET',
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json"
  }
})
.then(res => res.json())
.then((response) => {
  console.log("response from google: ", response);
})
.catch(error => {
  console.log("There was an error with the translation request: ", error);
});

Aquí puedes hacer algo con respuesta.

Espero que esto ayude a alguien y gracias Gregory por la ayuda más obvia :)

2
cbutler 27 feb. 2018 a las 21:48