调用外部天气API来让kintone支持显示天气状况

pokemon发表于:2018年10月16日 11:07:41更新于:2018年10月24日 09:38:15

使用kintone.proxy可以调用一些实用的外部API来获取一些你想要的数据。

下面我们就来举个简单的例子来获取今天的天气状况吧。

分析需求

我们希望能在应用的列表页面->标题空白处显示天气信息。如下图所示:

0015bc54fba20b1722dd2a82a728879

我们实现这个效果首先需要一个获取天气信息的API,其次需要一个获取客户端ip或者地理位置的API来告诉天气我们的位置。

关于外部API

我们要调用的是天气API,该API提供了全国各地的一些天气信息。还用到了搜狐的API来获取当前的ip地址。

请注意,天气API服务和搜狐的获取ip服务,它们不是cybozu服务。因此他们产生的数据的准确性不由cybzou负责。

获取客户端ip

我们只需要在应用设置的“通过JavaScript/CSS自定义”里设置搜狐的获取ip地址接口:

https://pv.sohu.com/cityjson?ie=utf-8

0015bc551d1e2e8ae95c6d4c527c189

然后在通过下面js就能调取到客户端ip

clientIp = returnCitySN["cip"];

调用天气API获取天气信息

通过kintone.proxy来调用外部API来获取天气信息并同步反应到列表的标题空白处。

(具体kintone proxy的使用方法请参见:“一起来挑战一下kintone API的Promise吧”
下面是示例代码weather.js :

(function($) {
    var recordIndexShowHandler = function(e) {
        var header = kintone.app.getHeaderSpaceElement();
        var clientIp = returnCitySN["cip"];
        var weatherApiUrl = 'https://www.tianqiapi.com/api/?version=v1&ip=' + clientIp;
        kintone.proxy(weatherApiUrl, 'GET', {}, {
            "Content-Type": "application/json"
        }, function(data, status, headers) {
            if (status >= 200 && status < 300) {
                var weatherdata = JSON.parse(data);
                var messinfo = weatherdata.data[0];
                var city = weatherdata.city;
                var weatherinfo = city + "今天天气:" + messinfo['wea'] + ",最高温度:" + messinfo['tem1'] + ",最低温度:" + messinfo['tem2'] + "," + messinfo['air_tips'];
                var telop = $('<span style="font-size: 16px;font-weight:bold"></span>').text(weatherinfo);
                var weather = $('<div style="margin: 20px 0;"></div>').append(telop);
                $(header).append(weather);
            }
        });
    };
    kintone.events.on('app.record.index.show', recordIndexShowHandler);
})(jQuery);

下面是“通过JavaScript/CSS自定义”的设置

(这里也用到了jQuery的库:https://js.cybozu.cn/jquery/3.3.1/jquery.min.js  请优先加载)

0015bc554feb742526e8457736c0bcd


当然具体想显示的内容大家完全可以根据天气API的文档来自定义。


结语

好了,是不是很简单。你也试试吧。

    您需要登录后才可以回复