如何设计并开发一个对比百度翻译和有道翻译结果的小网页
前言：
前几日写了一个帖子，《被机器翻译替代不可怕，可怕的是被替代后还不会用技术》，阅读量将近900。这是我的微信公众平台首次开通“赞赏”功能，帖子发出后，总共收到了36.88元的读者打赏。我很兴奋，于是决定将这笔钱全部捐给我们家小猫咪Catti的“零食基金”。
这篇帖子发出后，也收到一些回应，比如：“你倒是说说，怎么用技术？”、“能展示一下使用技术的具体办法吗？”
正好我这学期给学生上一点跟编程相关的皮毛课，所以我准备简单展示一下“使用高深技术的简单方法”。
一、设想
现在国内有几家技术杠杠的公司都推出了他们的机器翻译服务，比如百度翻译、有道翻译、搜狗翻译等等。
我们一般使用这些机器翻译服务的方法都是这样的：
前往某个机器翻译服务的网站主页，粘贴或者输入要翻译的内容，然后看看机器翻译的结果。
查完一个如果觉得不爽，再去使用另一个机器翻译服务。
那么，有没有另外一种可能：
我在一个页面中输入一次要翻译的内容，点击“翻译”按钮，出来多个机器翻译服务给出的译文。
二、实现
为了实现上面这个设想，我决定做个小小的网页程序。
第一步：做一个网页
一提起做网页，有些读者可能觉得，这哪是说做就做啊，是不是得学编程，是不是要学数学，我可不行，我高中数学可不好了。
没事，我们可以找一个捷径：http://www.layoutit.com/
通过这个网站，我们可以不写代码就可以做出一个像模像样的网页，如下图：
点击“START NOW with Bootstrap 3!”按钮后，进入下面这个页面：
在这个页面中，我们可以像拼图一样，把自己想要的网页界面给拼出来：
基本框架拼好之后，就可以把这个网页下载下来，简单修改一下里面的内容：
“修改代码”的过程（其实哪里是改什么“代码”，只不过是替换一下文字罢了）：
改完之后的效果（前方高能，做好战斗准备）：
虽然这个网页什么功能都没有，就是一个摆设，不过从开始设想到结束修改，一共也就几分钟时间，糊弄人还是可以的。
第二步：如何勾搭百度翻译
按照最初的设想（现在流行叫“初心”），我们在上面的搜索框中输入待译的内容，然后点击“提交译文”后，百度翻译和有道翻译的结果就会显示在界面最下方。
说的再简单一点就是：点击一下神奇的“提交译文”按钮，duang的一下就能看到两个版本的机器翻译译文。
所以要想实现这个功能，最关键的就是“提交译文”这个按钮，如何能让它跟百度翻译和有道翻译都勾搭上，还能互相加个微信。
我们先来看一下勾搭百度翻译的方法。
百度翻译除了能够在http://fanyi.baidu.com/这个网页中使用外，如果想从其他的程序里访问它，就得用一个叫做“API”的东西：
API的全称是：应用程序接口（英语：Application Programming Interface，简称：API）。
你用自己的百度账号登录：http://api.fanyi.baidu.com/api/trans/product/index
然后就可以一步步填写相关信息，获得百度分配给你的“程序身份证”和“密码”。比如我上面设想的网页叫做“ParaTrans”，这个“ParaTrans”是我对它的称呼，百度需要为这个网页创建一个独一无二的“身份证号”和对应的“密码”。
有了这个身份证号，以及密码，哪怕你不去登录百度翻译的网页，也可以在其他程序里（比如ParaTrans）输入要翻译的内容，在点击“提交翻译”按钮的那一刻，待译原文连同身份证号、密码一起发送给百度的智能的不提也罢的机器翻译服务器，服务器验证身份证号和密码后，返回给你机器翻译译文。
下面直接进入主题，我们可以去百度翻译API接入文档（即“说明书”）中下载可爱的百度程序猿已经写好的程序，俗称“DEMO”：
我在这里下载PHP版的，下载完后是这样的：
大家不要误解哈，只有3KB大小的“baidu_transapi.php”才是我刚刚下载的PHP版百度翻译API演示程序，其他的都是之前用layoutit那个网站自动生成的网页代码。
接下来我们需要做一件非常非常简单，但是看起来似乎很高端的事情：编辑baidu_transapi.php文件，把程序身份证号和密码添加到这个文件中。
在这个文档中我标“1”和“2”的位置，填写百度翻译提供的程序身份证号和密码，然后保存并关掉这个文件。
这两个东西在百度翻译开放平台的管理控制台可以查找到：
第三步：和百度翻译API的第一次亲密接触
现在百度翻译API已经成功设置好了（什么？？加了两行字儿就设置好了？？是的，就是这么粗暴简单。），我们需要把刚刚下载的3KB大小的文件与网页文件关联在一起。
关联的方法很简单，首先打开index.html文件：
这里有一个标记为<form> ..........</form>的代码段，这段代码显示在网页中就是这个样子的：
为了能让index.html这个文件知道当点击“提交译文”这个按钮后，要去勾搭baidu_transapi.php那个文件，需要在<form> ..........</form>中添加文件的地址，并说明要把要提交的译文“post”给百度翻译的服务器，如下图：
但这样只是勾搭上了，具体要勾搭什么内容，现在的代码还没有说清楚。我们所有输入的内容实际上都是在<input>这个代码段里呈现的，所以我们还得告诉百度翻译要翻译什么东西，如下图：
其实就是在<input>里加了一段“name = "source" ”，让输入的内容通过这个标签传递给百度翻译。
现在既可以勾搭上百度翻译了，也有勾搭的内容了，我们想从百度翻译那里勾搭出什么结果呢？显然，按照我们最初的设想，我们希望百度返回给我们结果，而且我们至少需要告诉百度翻译以下信息：
要翻译什么
源语言是什么
目标语言是什么
翻译成什么
所以此时我们可以打开baidu_transapi.php，把以上信息加上去，如下图：
这里面的23-27行是我自己写的，其它的都是帅气的百度程序猿早就写好放在这里的。我简单解释一下：
30-44行是百度程序猿写的一段“函数”，英文叫“function”，这段函数具备的功能使：告诉我“要翻译什么”（$query）、“源语言是什么”（$from）、“目标语言是什么”（$to），我就给你个交代（translate($query, $from, $to)）。
至于这段函数里面是怎么实现的，在目前的状况下，我们是不需要知道的，姑且将其当成一个“黑盒子”吧。
为了使用这个函数，我就自己写了几行看起来很装的代码：
$query = $_POST["source"];
$from = "zh";
$to = "en";
$result = translate($query, $from, $to);
echo $result["trans_result"][0]["dst"];
我来解释一下：
第一行：告诉百度翻译要翻译什么，这里我用的是一个不提也罢的方法，简单来说就是把index.html那个文件中<form>.......</form>代码段里向文本框输入的内容通过"source"来传递。
第二行：说明源语言是中文。
第三行：说明目标语言是英文。
第四行：把百度机器翻译出来的结果放到$result里面
第五行：用echo这个函数显示出百度机器翻译给出的译文。
但是为啥要用这么复杂的一行代码来输出译文呢？["trans_result"][0]["dst"]是什么意思？
这里简单说一下百度机器翻译在翻译一句话时输出数据的特点。包括百度机器翻译在内的许多机器翻译服务往往不是大家想象的那样输出一条简单的句子，而是输出由许多数据组成的数据结合。
刚才我们提到$result = translate($query, $from, $to);这段代码给出的是译文，那么我们来看一下，这段译文究竟包含了哪些信息。
用以下代码可以输入$result的值：
var_dump($result);
结果如下：
array(3) { ["from"]=> string(2) "zh" ["to"]=> string(2) "en" ["trans_result"]=> array(1) { [0]=> array(2) { ["src"]=> string(21) "中国人民共和国" ["dst"]=> string(26) "People's Republic of China" } } }
我能想象你们的表情，这里面都是些啥玩意儿？
我们可以稍微对这段代码进行一下调整，如下：
array(3)
{
["from"]=> string(2) "zh"
["to"]=> string(2) "en"
["trans_result"]=> array(1)
{
[0]=> array(2)
{
["src"]=> string(21) "中国人民共和国"
["dst"]=> string(26) "People's Republic of China"
}
}
}
简单来说，百度机器翻译服务给出的数据集合里包含三个部分：源语言（["from"]）、目标语言（["to"]）和翻译结果（["trans_result"]）。所以第一对大括号前面是array(3)，array就是数组的意思。
在翻译结果（["trans_result"]）中只有一部分，这部分的序号是[0]。
而序号是[0]的这部分内容中又包含两部分：["src"]和["dst"]。大家一眼就能看出来原文是“中国人民共和国”，译文是“People's Republic of China”。
我们在程序中希望呈现到网页中的只有["dst"]中包含的译文，其他内容我们都不想显示，所以我们用["trans_result"][0]["dst"]这种层级关系就可以直接选中这一对数据里我们想要的数据。
好了，接下来我们就可以实现输入要翻译的内容，点击“提交译文”，输出想要的百度机器翻译结果了。
第四步：和百度翻译的第二次亲密接触
如果各位读者在按照我的这个步骤操作（我估计顶多只有一两个人），那么会发现一个问题：在index.html页面输入待译内容，点击“提交译文”按钮后，浏览器会打开一个新的窗口，并在新的窗口里显示机器翻译的结果，并不是我们想要的那种：在index.html这个页面的下方显示机器翻译的结果。
根本原因是下面这段代码：
我们之前讲了，一旦我点击“提交译文”，这时候要翻译的文本就会被“post”（提交）给baidu_transapi.php这个页面，也就是执行action = "baidu_transapi.php"这段代码。问题就出在这里了，本来我们只希望在当前页面显示百度机器翻译的结果，可一执行这个代码，就跑到action后面跟的那个网页上去了。
所以我们接下来要做以下调整：
1）将上面这段代码中action后面跟的网址删掉，这样点击“提交译文”后，页面不会跳转，我们想要翻译的内容会留在当前的页面，但是还是可以通过“source”这个东西来传递。如下图：
2）把baidu_transapi.php里我们之前添加的代码剪切后粘贴到index.html中我们要展示百度机器翻译结果的位置：
在这段代码中，我们使用了include函数，将baidu_transapi.php嵌入到了index.html中，这样一来就可以将“source”里的待译原文传到百度机器翻译的API中，后面的代码刚才已经介绍过，就是制定源语言和目标语言后输出机器翻译的结果。
3）最后，将index.html的文件名改成index.php，这样2）中添加的百度机器翻译API代码才可以正常运行。
最后我们来看一下效果：
输入待翻译的文本前：
输入一段待翻译的文本后：
TA DA!
怎么样，机器翻译的结果就展示在“百度翻译”这个大标题下面了。
三、进一步实现
在上面整个步骤中，我们并没有写太多的代码就实现了将百度机器翻译API与我们自己建设的这个网页结合到一起。我们现在还差有道机器翻译的API没有接入。
不过有道翻译的API文档里并没有提供现成代码供使用，我自己根据百度翻译API的代码写了一个新的调用有道翻译API的代码，并将百度翻译和有道翻译的API合并成了一个新的API，可以实现我们预期的效果，在这里我就不再叙述过程了。
在我把代码全部写完后，最后的效果就是这样的：
哈哈，现在就可以输入一段待译文章，查看两个机器翻译服务的结果了。
以上全部代码我已经上传至百度网盘：链接: https://pan.baidu.com/s/1i587iRz 密码: rugm
注：若要运行这些代码，需要先在电脑上安装XAMPP，并自行分别注册百度翻译和有道翻译的API。
四、结语
我知道对于很多人而言，这些内容跟天书一样，对另一部分人而言这些内容又简单得不行。但我写这篇文章的根本目的是（打赏）：
展示一种看起来很高端，但实际并没有那么高端的使用机器翻译的方法；
让更多人知道机器翻译技术虽然不完美，但是完全可以在翻译实践中使用；
没有对比就没有伤害，不同的机器翻译系统有不同的特长，应当根据实际情况决定选用哪一个系统；
编程并没有那么难学，稍微花点时间就可以自己做出一些有意思的小玩意儿；
充分发挥我们作为人的想象力，让技术真正为我们所用！