开始使用谷歌翻译API

谷歌翻译是一个由谷歌开发的多语种语言翻译服务，可以将文字、单词、短语和、文件从一种语言翻译成另一种语言。谷歌翻译支持全球超过109种语言。

谷歌已经进一步开发了一个语言翻译API，它带有预先训练好的机器学习模型，可用于移动和网络应用。该API足够快，可以实时将给定的文本从一种语言翻译成另一种语言。

目标

在这篇文章中，我们将在Node.js ，逐步开发一个使用Google Translate API的文本翻译应用程序。最后，读者应该能够将Google Translate API完全集成到Node.js应用程序中。

先决条件

读者需要具备以下条件

• 在你的计算机上安装了Node.js。
• 对Node.js、javascript和Express有基本了解。
• 一个代码编辑器。我将使用Visual studio代码。
• 一个用于测试应用程序路线的浏览器。

初始化应用程序

我们将通过运行以下命令来初始化应用程序。

npm init -y

npm init -y 命令为我们的应用程序创建一个package.json 文件。package.json 将保存项目的元数据，包括开发依赖性、可执行脚本、应用程序名称和版本。

安装所需的依赖项

接下来，我们将安装所需的依赖项。

除了express 后台框架外，我们还需要安装google-translate-api API依赖，以翻译提供的文本。我们还需要body-parser 来解析HTML，以及ejs 作为一个模板引擎。最后，我们需要nodemon ，以便在开发过程中不断观察我们的应用程序。

在你的终端运行以下命令来安装应用程序所需的依赖项。

npm install –save express body-parser ejs @vitalets/google-translate-api nodemon, 

导入依赖项

在应用程序的根文件夹中，创建一个名为index.js 的新文件并添加以下内容。

// bring in express
const express = require('express');

// brinrg in body parser
const bodyParser = require('body-parser');

// ejs template engine
const ejs = require('ejs');

// translate api
const translate = require('@vitalets/google-translate-api');

//init our application 
const app = express()

应用程序设置

在这里，我们要设置模板引擎（我用的是ejs ）、css 和javascript 文件的公共文件夹以及body-parser 中间件。我们使用body-parser 来解析HTTP请求体。

//setup template engine
app.set('view-engine', 'html');
app.engine('html', ejs.renderFile);

//public folder setup
app.use(express.static(__dirname + '/public'));

//body parser middleware
app.use(express.urlencoded({extended:true}));

用户界面

我们需要有一个有两个字段的表单。第一个字段是用户输入要翻译的文本，另一个字段是一个下拉选择，以选择他们希望输入的文本被翻译成哪种语言。我们还需要一个提交按钮，将请求提交给表单指定的路线。

<!-- enter text to translate area -->
<div class="col-sm-6">
    <div class="card">
        <div class="card-header bg-primary">
            <h5 class="card-title text-light">SOURCE TEXT</h5>
        </div>
        <div class="card-body">
            <form action="/translate" method="POST">
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">Enter Source Text</label>
                    <textarea class="form-control" id="text" name="text" rows="2"></textarea>
                </div>
                <br>
                <div class="form-group">
                    <label for="format">Select Language of Voice:</label>
                    <select class="form-control" name="language" id="">
                    <option value="af">Afrikaans</option>
                    <option value="sq">Albanian</option>
                    <option value="ar">Arabic</option>
                    <option value="hy">Armenian</option>
                    <option value="ca">Catalan</option>
                    <option value="zh">Chinese</option>
                    <option value="hr">Croatian</option>
                    <option value="cs">Czech</option>
                    <option value="da">Danish</option>
                    <option value="nl">Dutch</option>
                    <option value="en" selected>English</option>
                    <option value="en-au">English (Australia)</option>
                    <option value="en-uk">English (United Kingdom)</option>
                    <option value="en-us">English (United States)</option>
                    <option value="eo">Esperanto</option>
                    <option value="fi">Finnish</option>
                    <option value="fr">French</option>
                    <option value="de">German</option>
                    <option value="el">Greek</option>
                    <option value="ht">Haitian Creole</option>
                    <option value="hi">Hindi</option>
                    <option value="hu">Hungarian</option>
                    <option value="is">Icelandic</option>
                    <option value="id">Indonesian</option>
                    <option value="it">Italian</option>
                    <option value="ja">Japanese</option>
                    <option value="ko">Korean</option>
                    <option value="la">Latin</option>
                    <option value="lv">Latvian</option>
                    <option value="mk">Macedonian</option>
                    <option value="no">Norwegian</option>
                    <option value="pl">Polish</option>
                    <option value="pt">Portuguese</option>
                    <option value="pt-br">Portuguese (Brazil)</option>
                    <option value="ro">Romanian</option>
                    <option value="ru">Russian</option>
                    <option value="sr">Serbian</option>
                    <option value="sk">Slovak</option>
                    <option value="es">Spanish</option>
                    <option value="es-es">Spanish (Spain)</option>
                    <option value="es-us">Spanish (United States)</option>
                    <option value="sw">Swahili</option>
                    <option value="sv">Swedish</option>
                    <option value="ta">Tamil</option>
                    <option value="th">Thai</option>
                    <option value="tr">Turkish</option>
                    <option value="vi">Vietnamese</option>
                    <option value="cy">Welsh</option>
                    </select>
                </div>
                <br>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
</div>

第二，在用户界面上，我们需要一个空白处，在表单的请求被成功处理后，翻译的文本将出现在那里。在表单下添加下面的代码段，以建立翻译文本的空间。

<!-- Translated text area -->
<div class="col-sm-6">
    <div class="card">
        <div class="card-header bg-success">
            <h5 class="card-title text-light">TRANSLATED TEXT</h5>
        </div>
        <div class="card-body">  
           
            <textarea class="form-control text-success" name="translated" id="translated" cols="30" rows="9">
                <!-- Here is where we will display the translated text --> 
            </textarea>                  
        </div>
    </div>
</div>

在应用程序的路由上工作

我们将需要两个路由。第一个路由将渲染索引页面，该页面持有用于输入要翻译的文本的表单，而第二个路由将处理要由翻译API处理的表单数据。第一个路由是一个获取请求，而第二个路由是一个发布请求。

获取网页路线

这个路由获得表单所在的index.ejs 。从该页面，用户可以输入要翻译的文本，并查看翻译结果。

在index.js 文件中添加下面的片段，以处理get路线。

//index route
app.get('/', (req, res) =>{
    res.render('index.ejs');
});

发布表单数据路线

这个路由从前端捕获表单数据，并将其带到后端进行处理。在body-parser中间件的帮助下，该路由提取表单发布的值。

添加下面的代码段来处理从表单发布的数据。

// post the form data to post route
app.post('/translate', (req, res) => { 
    // get form data from the request body 
    // text entered by the user
    const text = req.body.text

    // destination language
    const language = req.body.language
})

翻译取来的文本

在表单数据被发布后，body解析器在post路由中获取数据。

接下来，我们需要调用translate 方法，将给定的文本翻译成给定的语言。

在post route中添加下面的片段以启用翻译。

// call translate method with the text and language as parameters
translate(text, {to: language})

将翻译后的文本送回网页

在翻译完所提供的文本后，我们需要将翻译后的文本送回网页，这样用户就可以看到它。

下面的这行代码渲染了网页，并将翻译响应一起发送。

// render the page with translation response as data
res.render('index.ejs', {translatedText:response.text})

在用户界面上显示翻译后的文本

我们需要从服务器上捕获由render方法发送的翻译结果。当我们使用ejs templating engine时，这就更容易了。由于我们在一个文本区中捕获结果，我们将在文本区的内部HTML中添加以下代码，它将显示响应。

<div class="col-sm-6">
    <div class="card">
        <div class="card-header bg-success">
            <h5 class="card-title text-light">TRANSLATED TEXT</h5>
        </div>
        <div class="card-body">  
            <!-- Notice how we bring in the response data sent as we render the same page by the request -->
            <textarea class="form-control text-success" name="translated" id="translated" cols="30" rows="9"><%=translatedText%></textarea>                  
        </div>
    </div>
</div>

运行服务器

让我们测试运行我们的应用程序，在index.js 文件中添加以下内容。

// Port variable
const PORT = process.env.PORT || 3000;

// listen for connections
app.listen(PORT, () =>{
    console.log(`App running on port ${PORT}`)
})

上面的代码指定了PORT NUMBER ，应用程序在上面运行并监听传入的请求。在你的终端运行nodemon start ，启动服务器。

该应用程序应该通过端口3000的localhost在你的浏览器上运行，并且应该能够翻译任何给定的准确文本，如。

结论和进一步阅读

在这篇文章中，我们学习了如何使用谷歌翻译API在Node.js 中建立一个文本翻译应用程序。