构建python应用_构建天气应用

阅读量：2521 次

发布时间：2019-05-11

本文共 6123 字，大约阅读时间需要 20 分钟。

构建python应用

by Ayo Isaiah

通过Ayo Isaiah

使用地理位置和API构建Weather App (Building a Weather App with Geolocation and APIs)

Last week I tackled Free Code Camp’s project, which involved building an app that displayed the weather wherever the user happened to be.

上周，我处理了Free Code Camp的“ 项目，该项目涉及构建一个应用程序，以显示用户碰巧到的天气情况。

I had to implement the following user stories:

我必须实现以下用户案例：

User can view the weather in his/her current location.
用户可以在其当前位置查看天气。

User can toggle the temperature unit (Celsius or Fahrenheit).
用户可以切换温度单位(摄氏度或华氏度)。

Weather icon or background image will change depending on weather conditions.
天气图标或背景图像将根据天气情况而变化。

I decided to take it a bit further by adding one more user story

我决定通过增加一个用户故事来进一步介绍它

User can search for weather information of other places.
用户可以搜索其他地方的天气信息。

设计 (Design)

I had a bunch of ideas for the design of this app and I did look at a few completed projects (without checking their code, of course) from the community to see what other folks were displaying in their app and how it looked.

我对这个应用程序的设计有很多想法，我确实从社区中看了一些完成的项目(当然，没有检查他们的代码)，以查看其他人在他们的应用程序中显示什么以及外观。

Coming up with a final layout was a bit tricky but I found it helpful to decide the elements I wanted to display for the user and build from there.

确定最终的布局有些棘手，但我发现决定要显示给用户的元素并从那里构建很有帮助。

Keeping things simple was the aim here. I decided to show only the temperature and weather description in addition to the local time.

使事情保持简单是这里的目标。我决定只显示当地时间以外的温度和天气描述。

I also liked the animated weather icon in the and felt that was a better representation of the current weather than a background image so I wanted to implement that into my app.

我还喜欢的动画天气图标，并认为它比背景图像更好地表示了当前天气，因此我想将其实现到我的应用程序中。

As usual, I put everything down in my .

和往常一样，我将所有内容都放到。

Setting everything up was pretty straight forward except finding a suitable animated icon set. I had to search a bit before I found which is what I ended up using.

除了找到合适的动画图标集之外，一切设置都非常简单。在找到之前，我必须进行一些搜索，使我使用了。

The other thing I struggled with was finding a good colour scheme for the app, and this is something I almost always struggle with. I experimented with different combinations before landing the final product.

我苦苦挣扎的另一件事是为应用程序找到了良好的配色方案，而这几乎是我一直苦苦挣扎的事情。在发布最终产品之前，我尝试了不同的组合。

逻辑 (Logic)

After looking at an example API response from , I figured I’ll need to get the longitude and latitude of the user to be able to serve weather information on page load.

看完的示例API响应后，我认为我需要获取用户的经度和纬度，以便能够在页面加载时提供天气信息。

The easiest way to do this was to use the HTML5 Geolocation API which was pretty straightforward it had already been covered it in the JSON and APIs section of the curriculum.

最简单的方法是使用HTML5 Geolocation API，这很简单，它已经在课程的JSON和API部分中进行了介绍。

I stored the returned values in already declared variables and used them to make the AJAX request.

我将返回的值存储在已经声明的变量中，并使用它们发出AJAX请求。

if (navigator.geolocation) {

//Return the user's longitude and latitude on page load using HTML5 geolocation API

window.onload = function () {    var currentPosition;    function getCurrentLocation (position) {        currentPosition = position;        latitude = currentPosition.coords.latitude;        longitude = currentPosition.coords.longitude;

//AJAX request

$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=******************", function (data) {            var rawJson = JSON.stringify(data);            var json = JSON.parse(rawJson);            updateWeather(json); //Update Weather parameters        });    }

navigator.geolocation.getCurrentPosition(getCurrentLocation);

};

The Open Weather API gave me a way to update the location, temperature and weather description but I still needed to find a way to update the local time. After a bit of searching I found another API at which took care of this.

开放天气API为我提供了一种更新位置，温度和天气描述的方法，但是我仍然需要找到一种更新当地时间的方法。经过一番搜索，我在找到了另一个API来解决这个问题。

$.getJSON('http://api.geonames.org/timezoneJSON?lat=' + latitude + '&lng=' + longitude + '&username=ayoisaiah', function(timezone) {            var rawTimeZone = JSON.stringify(timezone);            var parsedTimeZone = JSON.parse(rawTimeZone);            var dateTime = parsedTimeZone.time;            timeFull = dateTime.substr(11);            $(".local-time").html(timeFull); //Update local time            timeHour = dateTime.substr(-5, 2);    });

The last thing I did was to update the weather icon on the conditions in the user’s location or city of interest. I decided a good way to do this was to check the weather description and change the icon based on that.

我做的最后一件事是根据用户所在位置或感兴趣城市的条件更新天气图标。我认为，执行此操作的一种好方法是检查天气描述并基于此更改图标。

So I considered a few possible scenarios such as clear sky, cloud, snow, sunny, rain e.t.c and wrote a bunch of conditional statements to check if the weather description contained one of keywords and then update the weather icon.

因此，我考虑了几种可能的情况，例如晴朗的天空，云，雪，晴朗的雨天等，并写了一堆条件语句来检查天气描述是否包含关键字之一，然后更新天气图标。

//Update Weather animation based on the returned weather description

var weather = json.weather[0].description;

if(weather.indexOf("rain") >= 0) {        skycons.set("animated-icon", Skycons.RAIN);    }

else if (weather.indexOf("sunny") >= 0) {        skycons.set("animated-icon", Skycons.CLEAR_DAY);    }

I have discovered, through various tests, that this method is not 100% foolproof but it worked well enough for me to stick with it.

通过各种测试，我发现此方法不是100％可靠的，但它足以让我坚持下去。

You can checkout the full code and effects on .

您可以在上签出完整的代码和效果。

关键要点 (Key takeaway)

My major takeaway from this project is that I learnt how to access each part of the returned JSON data from the API response and use it in different ways. Although my methodology needs some refining, it’s bound to get better with more practice.

该项目的主要收获是，我学习了如何从API响应访问返回的JSON数据的各个部分，并以不同的方式使用它。尽管我的方法需要一些改进，但一定要通过更多实践来使它变得更好。