前端开发地图应用的调研

Posted on

我司的产品终于发布了新版本,所以忙碌的开发暂时告一段落。最近在做下一期的规划,然后就是要做前端网站来满足用户的需求。由于我们的产品是和地图强相关的,所以也对地图做了很多调研。

基本需求

产品需要在国内和国外使用,费用合理,可以换地图的贴图并且能在地图上绘制各种信息。例如多边形或圆形还有贝塞尔曲线。

MapKit JS

苹果居然也出了网页版本的地图产品MapKit JS,可谓是良心。但是目前还处于Beta版本。如果以后要考虑产品的全平台化,显然不是一个很好的选择。不过苹果的产品可以在国内国外使用不用太担心地图偏移问题,而且可以贴图和绘制图形,但是目前网页版还不能绘制贝塞尔曲线,iOS客户端倒是可以。

MapBox

MapBox是一个地图服务提供商,经过调研MapBox使用最新的WebGL技术来渲染,摆脱了传统的下tile来贴图的方式,渲染速度得到了大大的提升。也能解决国内和国外的地图显示问题,但是画图功能就只有画线和多边形。不过提供了底层的画图层的接口,需要自己写WebGL的shader。这就增加了开发成本。。。

GoogleMap

谷歌地图当然好,但是我最后才说。因为谷歌无法在国内使用,这种情况下我就不得不写两套接口来对应,例如国内高德地图,国外谷歌地图,会大大增加开发成本。而且谷歌地图最近刚升级付费条款,费用是按照请求次数来收,所以用户大量增长之后的开销也会非常大。不过谷歌也不能画贝塞尔曲线。。。

地理坐标系

由于是需要在地图上绘制新的tiles,所以自然就涉及到坐标的转换和计算。如何计算一个经纬度落在哪一张tiles上,以及在不同缩放级别下tiles的正常显示和重绘。这些都是需要自己来实现的。 这里有一个还算有名的官方介绍,并给出了Python的源码。可以参考这个来进行实现。

坐标系转换

每个国家都有自己的坐标系系统,虽然GPS使用的WGS 84标准非常流行,但是这个是美国制定的。每个国家当然都需要根据自己国家需要来定制自己的标准。例如中国就有北京54坐标系,西安80坐标系。北京54和西安80是参心坐标系,大地原点分别在苏联和西安。难以表达高度信息,目前国家正在推广2000国家大地坐标系,这个和WGS84一样是地心坐标系,即以地球质量中心为原点。日本也有自己的平面直角坐标系,我们当然需要各种坐标转换,还好有现成的开源项目proj4js

总结

各个地图服务商都各有优劣,但却没有一款完美的。主要是用途也比较特殊,可能在地图服务上进行二次开发的可能性比较高吧。不过提供地图服务的也没几家可以选择的。。。

tagged: js map

后端开发的技术总结

Posted on

说实话,最近前端开发的事情并不是很多。所以自己也慢慢开始做后端开发,逐渐向全沾工程师靠拢。现在的开发工作,分工分明,后端也只需要专注API的请求与返回就好了。

API文档

使用API Blueprint作为API规范,并使用RSpec API Blueprint来自动生成文档。 生成的Markdown文件,可以很方便的转换成网页便于客户端开发。例如这个工具aglio

后端开发

现在采用的开发技术框架是Ruby on Rails。不得不吐嘈一句,Ruby on Rails在日本真是压倒性的流行。Ruby on Rails还是MVC架构,原生支持RESTful API。但我觉得下一代的接口标准应该是facebook推出的GraphQL,不过先阶段RESTful API也足够了。

Models

Models主要是用来描述数据库结构,表与表之间的关系。还可以定义对数据库操作的方法,数据之间复杂的业务逻辑基本都是放在这里。

Views

Views主要是用来定义相应的数据的格式,把数据整合成统一的JSON标准供客户端使用。

Controllers

Controllers是请求的入口,用来定义请求的参数,并接收请求进行参数的过滤处理。然后调用Models里定义的方法完成数据的操作,并调用Views来完成数据的响应。

权限管理

权限管理是一件非常复杂的事情,定义某个接口在什么条件下可以调用,需要检查用户是什么身份。所以推荐是使用现有的成熟框架来进行管理。这里使用pundit来管理各个请求的权限检查。

软删除

在实际的项目中,我们需要进行软删除操作。例如用户加入了某个组织,以组织成员的身份发表了文章。当用户退出这个组织的时候,我们并不能直接删除数据库记录。否则无法显示文章的作者。这时候我们就需要软删除操作,对用户来说这条记录已经消失了。但对开发者来说,这条记录还是需要的。我们也使用框架来解决这个问题,这里采用的是Paranoia

测试

后端开发是偏向于纯逻辑的开发,所以测试非常重要。正常情况下的输入输出非常简单,代码的80%都是需要考虑到各种各样的边界条件。需要考虑到用户的各种不同情况下的操作,给出合适的错误提示。所以需要完善的测试来覆盖所有场景,这里采用的是e2e测试,模拟请求,测试后端服务器的响应输出是否符合预期。采用的测试框架是rspec-rails

参考:

Ruby on Rails Guides

tagged: backend

跨域请求中的cookies处理

Posted on

现在的前后端开发已经完全分离,后端服务器和前端服务器分别部署在不同的服务器。同时也对应不同的域名,所以跨域请求领域方面的知识也需要补充。

跨域请求添加header

我们都知道,出于安全考虑,JS是有同源策略限制。所以,我们在对其他域名发起请求的时候需要添加 http header。

    Access-Control-Allow-Origin: *

这个参数的值只能为星号或者具体的网址,星号代表所有网站。

跨域请求添加cookie

JS跨域请求有两个API可以使用,XMLHttpRequestfetchXMLHttpRequest会默认带上cookies,但是fetch默认不会带上。如果需要带上cookies,需要把withCredentials设置为true

跨域请求服务器设置cookie

我们都知道服务器设置cookie是通过set-cookie的 http header来完成。浏览器会读取这个信息设置cookie。但是对于跨与请求,默认是无效的。我们需要再添加一个 http header。

    Access-Control-Allow-Credentials: true

当设置了这个 http header,Access-Control-Allow-Origin就不能设置为星号了,必须指定具体的网址。我们必须指定withCredentialstrue并且Access-Control-Allow-Credentialstrue的时候,服务器返回的set-cookie才会生效。

参考:

Access-Control-Allow-Credentials

CORS