素材文件

import socketio
import re
import requests

#Server Addr
address = 'http://127.0.0.1:9981'

#socket.io client
client = socketio.Client()

#Gaode API Key
GaodeKey='643XXXXXXXXXXX'

@client.on('connect')
def on_connect():
    print('Connected')
    client.emit('ppBridgeApp', { 'name': 'GaodeMapApp' })
    client.emit('ppMessage', { 'messageId': 'Init'})

@client.on('ppMessage')
def on_message(data):
    messageId = data['messageId']
    messageValue = data['value'] if 'value' in data else None
    if messageValue==None: return

    switcher = {
        "From": PoiSearch,
        "To":PoiSearch,
        "Navigation":Navigate,
    }
    
    return switcher[messageId](messageValue,messageId)

def PoiSearch(location,messageId):
     response = requests.get('https://restapi.amap.com/v5/place/text?parameters', {
        'key': GaodeKey,
        'keywords': location
     })
     if messageId=='From':
           client.emit('ppMessage', { 'messageId': 'From1','value':response.json()['pois'][0]['name'] })
           client.emit('ppMessage', { 'messageId': 'From1Pos','value':response.json()['pois'][0]['location'] })
           client.emit('ppMessage', { 'messageId': 'From2','value':response.json()['pois'][1]['name'] })
           client.emit('ppMessage', { 'messageId': 'From2Pos','value':response.json()['pois'][1]['location'] })
           client.emit('ppMessage', { 'messageId': 'From3','value':response.json()['pois'][2]['name'] })
           client.emit('ppMessage', { 'messageId': 'From3Pos','value':response.json()['pois'][2]['location'] })

     elif messageId=='To':
           client.emit('ppMessage', { 'messageId': 'To1','value':response.json()['pois'][0]['name'] })
           client.emit('ppMessage', { 'messageId': 'To1Pos','value':response.json()['pois'][0]['location'] })
           client.emit('ppMessage', { 'messageId': 'To2','value':response.json()['pois'][1]['name'] })
           client.emit('ppMessage', { 'messageId': 'To2Pos','value':response.json()['pois'][1]['location'] })
           client.emit('ppMessage', { 'messageId': 'To3','value':response.json()['pois'][2]['name'] })
           client.emit('ppMessage', { 'messageId': 'To3Pos','value':response.json()['pois'][2]['location'] })
    
           
def Navigate(location,messageId):
         
         #将location切割为起点终点的经纬度
         locations=location.split('|')
         fromLocation=locations[0]
         toLocation=locations[1]

         response = requests.get('https://restapi.amap.com/v5/direction/driving?parameters', {
        'key': GaodeKey,
        'origin': fromLocation,
        'destination':toLocation,
        'strategy':'0'
        })
         client.emit('ppMessage', { 'messageId': 'Path1','value':response.json()['route']['paths'][0]['steps'][0]['instruction'] })
         client.emit('ppMessage', { 'messageId': 'Path2','value':response.json()['route']['paths'][0]['steps'][1]['instruction'] })
         client.emit('ppMessage', { 'messageId': 'Path3','value':response.json()['route']['paths'][0]['steps'][2]['instruction'] })
         client.emit('ppMessage', { 'messageId': 'Path4','value':response.json()['route']['paths'][0]['steps'][3]['instruction'] })
         client.emit('ppMessage', { 'messageId': 'Path5','value':response.json()['route']['paths'][0]['steps'][4]['instruction'] })
         client.emit('ppMessage', { 'messageId': 'Path6','value':response.json()['route']['paths'][0]['steps'][5]['instruction'] })
         client.emit('ppMessage', { 'messageId': 'Path7','value':response.json()['route']['paths'][0]['steps'][6]['instruction'] })
         client.emit('ppMessage', { 'messageId': 'Path8','value':response.json()['route']['paths'][0]['steps'][7]['instruction'] })
         client.emit('ppMessage', { 'messageId': 'Path9','value':response.json()['route']['paths'][0]['steps'][8]['instruction'] })
         client.emit('ppMessage', { 'messageId': 'Path10','value':response.json()['route']['paths'][0]['steps'][9]['instruction'] })

client.connect(address)


    

图文教程

1.地图平台 API 能提供什么？在哪能找到这些 API？

1.1 透过表象理解原理

基于国家治理原因，地理勘测和地图发布是需要持有法定牌照才能进行的，因此只有持牌的合法企业才能成为在线地图商，上述的百度、高德、腾讯就是这类企业

1.2 探寻地图服务之源

• 百度地图开放平台
• 高德地图开放平台
• 腾讯地图开放平台

这类开发文档通常是以展现端来划分的，所以可以看到会分为安卓、iOS等等的类别，而Web服务是没有显著特定的呈现端的，仅作为单纯的数据交换，因而用途最为广泛，接入也最为简单。在我们制作原型时，需要的只是外部传来的数据，并不是要做一个实际的 App 在手机上运行，所以这里选择了 Web 服务下的 API。

1.3 获取数据接入资格

2.原型里会输入哪些数据？需要呈现哪些数据？

2.1原型设计过程的两种方式

什么是 POI？POI 是 Point of Interest 的缩写，在电子地图业界，POI 指的是地图上被标注/赋予的某个位置的名称，比如某个路名、某个风景名胜景点，甚至是你家门前那家店，只要是通过搜索能显示出来的，就可以视为 POI，POI 的范围是可大可小的，比如在地图上查询一个省名，地图是会对其进行显示的。同时，POI 一般具有明确的经纬度，比如查询一个省名时，一些地图上的定位标记会标在省政府的位置上，也就是说，XX省这个 POI的经纬度定义就放在了省政府所在的位置。

2.2 API 的探索和测试方法

2.3 结合原型考虑数据逻辑

3.如何构建相应的 Bridge App？

3.1 概述

之所以说 Python 对编程规范性和概念理解要求没有那么高，是因为在传统的编程语言学习中，是存在较多需要前置知识才能理解的概念的，在实际写的时候也要遵守一定的规范才能保证正确，这会使得学习曲线从一开始就比较陡峭。可以换位思考一下，作为设计师，让一名开发人员理解 PS 中的栅格化或者正片叠底，是不是发现也很难一下子说明白？

3.2 建立 Python 编程环境

这一节和下一节均讲述了 Python 相关的基础知识，如果不打算用 Python 来写 Bridge App，可以直接跳到 3.4节继续阅览并触类旁通到自己熟悉的编程语言上。

如果对 Python 觉得无感，希望使用别的语言学习 Bridge App 开发，可以关注后续教程

3.3 程序的启动和调试

3.4 Socket.io 与键值对

1. 一次只传输一条消息。表面上来看，这点好像没有起到什么实际的作用。但试想一下，在上面的搜索 POI 2.0 API 里，API 可以一次性传回地点名称和地点的经纬度，这时如果在 ProtoPie 中，我们只设置一个变量去一次性接收地点名称和经纬度，就会导致在显示的时候，名称和经纬度会被同时显示出来，而事实上我们并不需要显示经纬度（只是需要经纬度来进行下一步的路径规划工作），这就使得我们其实应该把地点名称和经纬度分成两个变量来存放，倒推这个过程就会发现，要存放到两个变量上，就需要两条消息，也就是要传输两次，一次传地名并赋值给地名变量，一次传经纬度并赋值给经纬度变量。
2. 一条消息里必须有一个消息名和一个消息体。这点很好理解，接收方可以根据消息名判断这条消息的来源或者属性，消息体承载了消息内容，是实际要进行传输的数据。这就像我们去银行开户填表时，页面头部的标题告诉我们这张表是什么表、大致意图是什么，表里的印制内容和填写内容才是我们实际要递交给处理人员的信息/数据。
3. 消息体里可以含有多段消息内容，每段消息内容里可以有一个字符串或者一个“键值对（Key Value Pair）”。顺承上面办理银行开户的例子，开户申请表里有多段内容（姓名、证件种类、证件号码……），有的内容是银行以提示或告知形式印制给你看的，比如“*号为必填项”，有的是以说明+内容的形式出现的，比如“姓名”，在你填写后就成为“姓名：张三”这样的信息了。这两类其实都是有效信息，后者在信息技术上我们称为“键值对”，例子中的“姓名”是键（Key），“张三”是值（Value）。

3.5 在 Python 中引入 Socket.io

• 第一行是不是代码？
  • 用#开头的内容，在 Python 程序（以下简称程序，也就是这些规则只针对 Python 而言）里是注释，这个#符号可以在行首，也可以在正式语句的后面，程序不会去执行这些注释（所以行号的1看起来就有点灰色了），注释存在的意义就是方便你在代码里记东西，像自己做笔记一样，使你能区分每一句、每一段的功能
• 说好了服务端地址和端口是127.0.0.1:9981，为什么前面又有个http://，难道这是个网址吗？
  • 这个问题略微有一点复杂。还记得上面银行开户申请表的例子吗？开户申请表在内容上可以遵循Socket.io的协议规范，那么，传递开户申请表的操作流程，是不是也可以有规范？通常我们必须主动跟银行说自己要开户，然后是银行给这份表，接着我们填写，填完后交回银行，银行进行登记处理。这个流程中传递的都是开户申请表，但却遵循了我（发起）--银行（给单）--我（填单）--银行（审核）这样一个规范的工作流，我们可以把这种规范工作流也看成是一种协议，因为大多数银行都是这么操作的，这个过程你是“默契地”完成的，这套工作流（协议）不仅适用于开户申请表，还适用于“大额取款申请表”、“密码找回申请表”等等操作，对吧？那么我们可以将这套工作流（协议）视为比开户申请表内容协议更为底层、适用面也更宽泛的一种协议。同理的，http / https 也是一个更为底层、适用面更宽泛的协议，这个协议支持了 Socket.io 协议的运行，同时这个协议还适用于其他大多数网站的访问（所以我们会认为这看起来是个网址）。在这里，Bridge App 和 Connect 之间被 ProtoPie 产品的开发工程师或者产品经理规定了在通信方式上用 http / https 协议来进行通信（通信内容格式的协议上才是选择了Socket.io，这两者不冲突），于是在服务端地址前面需要加上这个“http://”。
• 每个人的IP地址不同，你需要打开Connect，登录后找到左下角的IP地址，将这里的http://127.0.0.1:9981 替换成你自己的

• http到9981的这部分内容为什么用单引号引起来？
  • 我们先考虑一个有点偏门的情况：如果一个网址里有“#”号（这种情况是真实存在的 ），会发生什么情况：

• 第二行最前面的“SERVER_ADDRESS=”是什么？
  • 学数学的时候，我们常用x、y等字母/符号来表示一些量，尤其是应用题。为什么需要这么做呢？一定程度上是为了写式子的时候简单方便，比如甲汽车的速度是乙汽车的三倍，我们设乙汽车的速度为x，就可以直接用3x来表示甲汽车的速度，如果不用这些符号来表示，这个式子就得写成“甲汽车速度=乙汽车速度X 3”，并且在后面的代入过程中，不断重复地写“甲/乙汽车速度”。同理，当我们需要重复用一个内容（可以是字符串、也可以是式子等等）时，我们可以用一个更为简单的内容去替代它，以减少后续的出错。这个替代品我们称之为“变量”（这跟 ProtoPie 里的变量概念是一样的），这里的 SERVER_ADDRESS 就是变量名称。顺便提一句为什么全是大写，业界规范来说，一个变量在程序里代表的内容如果从头到尾都不会改变，我们也会称之为“常量”（为了与那些有时是3有时是5的变量区分开），对于这种特殊的变量（或者说常量），为了显眼和区分，程序员们惯于用全大写的单词去设定其变量名。
• 为什么这里写的是127.0.0.1而不是localhost？
  • 一般来说写 localhost 和写 127.0.0.1 得到的效果是一样的，所以这里你也可以写为 localhost。有一些特殊的情况下，因为系统配置做过改动的原因，会导致系统对这两者的解析发生差异，这时就会发生只有其中一种有效的情况。我的电脑现在就是这种情况，localhost 被我专门设置用来指向电脑上的一个网站了，于是我只好用127.0.0.1。
• 为什么代码上面会出现不同的颜色表示？
  • 为了便于查看。程序代码里融合了变量、静态内容（像上面的字符串）、注释、符号（等号、括号、格式符号等等）、方法（程序要执行的动作，后面会讲到），并且在写的过程中很容易一不小心看走眼写错写漏一点点东西导致不能运行，为了提升效率，编辑器就会给不同类型的内容标上不同的颜色。

如何知道 pipinstall 后面东西的名称？首先，所有的这类可以用的东西会被索引在这个网站 (https://pypi.org/)中。其次，这更偏向于一个经验性质的工作，随接触的程序多了，慢慢就会熟悉哪些这种外部引入的东西比较常见、起到什么作用。

3.6 Bridge App 注册及收发消息

1. 可以见到执行后下方的输出区就显示了“Connected”字样，表示这句执行成功了。
2. 一定有读者会好奇为什么不把这句写到 client.connect（第15行）的下方。程序是顺序执行的，只要你没有定义循环行为，程序就会从第1行开始，向后执行。在这个例子中，如果放到下方，程序会先执行 client.connect，刚执行完时，名为connect 的消息已经从服务端发出来了，这时程序才执行到 @client.on 一句，也就是程序才知道接收到 connect 消息时应该干什么，可是这时候消息已经错过了，就会得不到既定的执行结果了。所以需要在程序编写过程中考虑事情发生的先后顺序，把可能发生的情况先跟程序说清楚后，再让该情况发生，这时程序才能知道应该怎么办。上文提到 import 东西的语句一般靠顶写，也是这个原因，把需要用的外部资源准备好了，再开始干活。

3.7 与高德地图开放平台连接获取数据

• 红框部分：为了便于在后面的语句中使用 Connect 消息名和消息值，我们把 data['messageId'] 和 data['value'] 单独拎出来赋值给 messageId 和 messageValue 这两个变量，并且对于消息值，由于 Connect 规定消息值是可选的，因此有 if 'value' in data else None 这句，表示如果没有消息值，messageValue就是 None，这个 None 是 Python 里表示“不存在” 的一种特殊状态。其后又有一句 if messageValue==None: return，这里的 return 是表示退出这个方法的意思，我们现在的目的是拿消息值（起点或终点的关键字）去传给 API，如果消息上没有传过来起点或终点的关键字，那么这个操作就没有意义了，所以遇到这种情况时为了避免后续的程序错误，就选择直接退出这个方法，等待下一次 Connect 发消息过来。
• 蓝色箭头部分：对 API 访问，就采用代码里的 requests 的 get /post 方法，之所以这里用 get，因为 API 文档里说明了请求方式是 GET （可以回头看一下前面的内容），get后面的参数就是 API 文档里所说的 API 访问 URL；一对大括号里就是必选参数，可以比照 ApiPost 里的填写项来逐个填上。
• 绿色箭头部分：在 Connect 上的这个消息值会被传入到程序里的 messageValue 变量中，作为 keywords 的值。
• 黄色箭头部分：在上面蓝箭头的那一句，可以看到对 API 的访问结果是赋值给 response 这个变量的，在这里我们用变量的json()方法来输出显示，就可以看到从 API 返回的数据内容，这个数据内容和之前我们用 ApiPost 进行调试时的结果是一样的，区别只是没有做“格式化（进行标准的换行和缩进处理）”。

• 目前还没有区分起点和终点
• 从 API 处拿到的数据没有向 Connect 发送和显示

• 这里的执行过程是，程序启动后出现了右部红框的消息，然后我在 Connect 的消息框中分别填入了 “From” “广州塔”，点击 Send 之后，得到了右侧黄框的那一堆消息，再填入了 “To” “宝墨园”，Send 之后，得到了右侧蓝框的消息。
• 左侧三个红箭头的尾端：在这个过程中，我们很容易发现，无论在 Connect 的第一个框（消息名）填的是 From 还是 To，在程序里都需要访问一次 搜索 POI 2.0 这个 API，如果我对 From 写一段程序，再对 To 写一段程序，这两段程序的主干几乎是一样的，所以我把这个主干抽取出来，单独作为一个“方法”，名叫 PoiSearch。在解析完消息名和消息值后，就调用 PoiSearch方法，并把消息名和消息值作为参数放进去。
• 左侧三个红箭头的头端：所示的就是 PoiSearch 方法，第一行以 def 开头，表示这是方法的定义，其后所有行都缩进至少一格，表示其后的行都从属于这一个方法，直到 client.connect 这句，这句不属于这个方法了（属于整个主程序了），所以就顶格写了。此外还可以留意到，在参数传进来时，我把 messageId 放到了messageValue 的后面，也就是说，参数的顺序是由方法的定义决定的，方法上要求 messageId 在后，那么调用方法传递参数的时候，就也是 messageId 在后。还有一点可能你会留意到的是，在方法定义里，第一个参数我把它叫做 location 而不是 messageValue，在传进来的时候，因为是按照顺序传的，messageValue 传进 PoiSearch 这个方法后，就被改名叫 location 了，这种改名行为很常见，对于一个方法，参数的定名是基于方法本身视角的，即使你把这个参数叫做 QiDianZhongDian 也是可以的，参数传进来后，就叫这个名字了。
• 左右侧的黄色框：可以看到左侧黄色框的进入条件是 messageId 为 From。当 Connect 消息名（也就是这里的messageId）为 From 时，就会执行左侧黄色框中的语句。之所以是用两个等号，是因为在 Python 中，使用一个等号表示赋值（就像上面的SERVER_ADDRESS=XXX，把右侧的值赋给左侧），使用两个等号表示比较（相当于表示 a=b?），这点跟生活习惯有些不一样，是自己写程序时需要留意的。左侧黄色框中的语句全都是 emit，也就是全都是向 Connect 提交消息，执行完后就得到了右侧的黄色框部分。这里说明了：（1）根据一次 API 返回的结果可以引发传输多次消息；（2）印证了前文所述的“一次只传输一条消息”。
• 左右侧的蓝色框：注意左侧蓝色框的进入条件写的是 elif messageId=='To':，这是 else if messageId == 'To' 的意思。与上面一样，全是emit，也就是发送消息的语句。这里我们具体看一下这些语句是怎样写出来的：

3.9 完善剩余的数据逻辑

• 参数，因为现在我们改用“Navigation+起点坐标|终点坐标”这样的消息形式了，参数就又可以像之前一样把消息名一起传进来了。
• 红箭头处：用到了一个split方法，这个方法就是把一个字符串按照你指定的分隔符来拆开。这里拆开的内容我放到了 locations 变量中了（注意这里 location 和 locations 是两个不同的变量）。
• 蓝箭头和绿箭头：分别从 locations 中取得拆开的量，locations 里像上面的多值 json 一样，含有多个内容，可以用序号取值。你可能会留意到这又是从0开始的，对的，python 里数数都是从0开始的😂。

• switcher['From']( '广州塔' , 'From')

• PoiSearch( '广州塔' , 'From')

3.10 完整的源码

import socketio
import requests

#这是服务端地址
SERVER_ADDRESS = 'http://127.0.0.1:9981'

#socket.io 客户端
client = socketio.Client()

#高德 API Key
GaodeKey='643**************************a16'

#处理刚连上的情形
@client.on('connect')
def on_connect():
    print('Connected')
    client.emit('ppBridgeApp', { 'name': 'GaodeMapApp' })
    client.emit('ppMessage', { 'messageId': 'Init'})

#处理收到的消息
@client.on('ppMessage')
def on_message(data):
    messageId = data['messageId']
    messageValue = data['value'] if 'value' in data else None
    if messageValue==None: return
    
    switcher = {
        "From": PoiSearch,
        "To":PoiSearch,
        "Navigation":Navigate,
    }
    
    return switcher[messageId](messageValue,messageId)

#执行搜索POI 2.0 API
def PoiSearch(location,messageId):
     response = requests.get('https://restapi.amap.com/v5/place/text?parameters', {
        'key': GaodeKey,
        'keywords': location
     })
     if messageId=='From':
           client.emit('ppMessage', { 'messageId': 'From1','value':response.json()['pois'][0]['name'] })
           client.emit('ppMessage', { 'messageId': 'From1Pos','value':response.json()['pois'][0]['location'] })
           client.emit('ppMessage', { 'messageId': 'From2','value':response.json()['pois'][1]['name'] })
           client.emit('ppMessage', { 'messageId': 'From2Pos','value':response.json()['pois'][1]['location'] })
           client.emit('ppMessage', { 'messageId': 'From3','value':response.json()['pois'][2]['name'] })
           client.emit('ppMessage', { 'messageId': 'From3Pos','value':response.json()['pois'][2]['location'] })

     elif messageId=='To':
           client.emit('ppMessage', { 'messageId': 'To1','value':response.json()['pois'][0]['name'] })
           client.emit('ppMessage', { 'messageId': 'To1Pos','value':response.json()['pois'][0]['location'] })
           client.emit('ppMessage', { 'messageId': 'To2','value':response.json()['pois'][1]['name'] })
           client.emit('ppMessage', { 'messageId': 'To2Pos','value':response.json()['pois'][1]['location'] })
           client.emit('ppMessage', { 'messageId': 'To3','value':response.json()['pois'][2]['name'] })
           client.emit('ppMessage', { 'messageId': 'To3Pos','value':response.json()['pois'][2]['location'] })

#执行路径规划 2.0 API
def Navigate(location,messageId):
         
    #将location切割为起点终点的经纬度
    locations=location.split('|')
    fromLocation=locations[0]
    toLocation=locations[1]

    response = requests.get('https://restapi.amap.com/v5/direction/driving?parameters', {
        'key': GaodeKey,
        'origin': fromLocation,
        'destination':toLocation,
        'strategy':'0'
    })
    client.emit('ppMessage', { 'messageId': 'Path1','value':response.json()['route']['paths'][0]['steps'][0]['instruction'] })
    client.emit('ppMessage', { 'messageId': 'Path2','value':response.json()['route']['paths'][0]['steps'][1]['instruction'] })
    client.emit('ppMessage', { 'messageId': 'Path3','value':response.json()['route']['paths'][0]['steps'][2]['instruction'] })
    client.emit('ppMessage', { 'messageId': 'Path4','value':response.json()['route']['paths'][0]['steps'][3]['instruction'] })
    client.emit('ppMessage', { 'messageId': 'Path5','value':response.json()['route']['paths'][0]['steps'][4]['instruction'] })
    client.emit('ppMessage', { 'messageId': 'Path6','value':response.json()['route']['paths'][0]['steps'][5]['instruction'] })
    client.emit('ppMessage', { 'messageId': 'Path7','value':response.json()['route']['paths'][0]['steps'][6]['instruction'] })
    client.emit('ppMessage', { 'messageId': 'Path8','value':response.json()['route']['paths'][0]['steps'][7]['instruction'] })
    client.emit('ppMessage', { 'messageId': 'Path9','value':response.json()['route']['paths'][0]['steps'][8]['instruction'] })
    client.emit('ppMessage', { 'messageId': 'Path10','value':response.json()['route']['paths'][0]['steps'][9]['instruction'] })

#执行连接
client.connect(SERVER_ADDRESS)

结束