Fix the "Show the Local Weather" project #15598
Comments
|
Possibly related issues:
|
erictleung
added
codepen
help wanted
|
The issue with weather APIs is that most (and maybe all) have a max number of free calls per day. Dark Sky has a max at 1000 calls per 24 hours. We set the API to default to using the longitude and latitude requested and store all the calls of the last 24 hours. Then, if more than 1000 calls are requested in 24 hours, the API sends the data from the closest stored longitude and latitude to the requested longitude and latitude. |
|
Something like this: https://fcc-weather-api.glitch.me? Uses similar index.html as the Twitch API. Right now, it just uses the OpenWeatherMap which allows for 60 requests per minute. Right now, only geographic coordinate requests are supported. I am willing to work on this more. |
|
@MiloATH Wow - this is perfect! Excellent work. I think we just need to handle the case where we've exceeded the API limits and show a message. If this is caching results, we should be fine. Would you be willing to get this working with the existing example app? https://codepen.io/freeCodeCamp/full/bELRjV If you can give me the updated JavaScript for that app, I can use it to update the example app. Note that we have moved the weather app out of the core curriculum and over to supplemental challenges on https://beta.freecodecamp.com, so soon the rate limit shouldn't be that big of a deal. |
|
I forked the freeCodeCamp codepen and updated the code. Here is the forked codepen. For the icons, I provide the link to the images on the glitch cdn. I will add caching results next. Then, I will update the instructions in the challenge and make a PR. Right now, weather can only be requested by longitude and latitude. City or zip code searches code be added fairly easily. Here is all that is currently working. API requests:
The temperature is returned in celsius. Do we need to add other units options as optional parameters? Do any other types of API requests or request options need to be handled? Examples: Note: my codepen linked above uses a request to ipinfo.io for the longitude and latitude. However, it could be implemented to just use HTML5 Geolocation. |
|
I read through OpenWeatherMap's faq, and open source projects can get the access limits lifted. Here is from http://openweathermap.org/faq
@QuincyLarson I can file a ticket for FreeCodeCamp to OpenWeatherMap if this is something FreeCodeCamp believes this is a good idea. This means we wouldn't have to cache results. I would have to make the code on glitch open source, but that really wouldn't change much. This would be nice, but may not be worth the time since this challenge will become optional. Also, the free API key allows for 60 requests every minute which is fast enough. I don't think we are going to need caching very much using the current free API plan. |
|
The freeCodeCamp codepen javascript still needs to be updated. Here is the javascript: var app = angular.module('Weather', []);
app.factory('WeatherApi', function($http) {
var obj = {};
obj.getLoc = function() {
return $http.jsonp("https://ipinfo.io/json?callback=JSON_CALLBACK");
};
obj.getCurrent = function(loc) {
var api = "https://fcc-weather-api.glitch.me/api/current?";
loc = loc.split(",");
var lat = "lat=" + loc[0];
var lon = "&lon=" + loc[1];
var cb = "&callback=JSON_CALLBACK";
return $http.jsonp(api + lat + lon + cb);
};
return obj
});
app.controller('MainCtrl', function($scope, WeatherApi) {
$scope.Data = {};
$scope.Data.unit ='C';
$scope.Data.sysChange = false;
WeatherApi.getLoc().success(function(data) {
var city = data.loc + ',' + data.country;
$scope.Data.city = data.city;
$scope.Data.country = data.country;
WeatherApi.getCurrent(data.loc).success(function(data) {
CurrentWeather(data)
});
});
function CurrentWeather(data) {
$scope.Data.temp = Math.round(data.main.temp);
$scope.Data.Cel = Math.round(data.main.temp);
$scope.Data.des = data.weather[0].main;
$scope.Data.Fah = Math.round( ($scope.Data.temp * 9)/5 + 32 );
return IconGen($scope.Data.des);
}
function IconGen(city) {
var city = city.toLowerCase()
switch (city) {
case 'drizzle':
addIcon(city)
break;
case 'clouds':
addIcon(city)
break;
case 'rain':
addIcon(city)
break;
case 'snow':
addIcon(city)
break;
case 'clear':
addIcon(city)
break;
case 'thunderstom':
addIcon(city)
break;
default:
$('div.clouds').removeClass('hide');
}
}
function addIcon(city) {
$('div.' + city).removeClass('hide');
}
$scope.Data.sys= function(){
if($scope.Data.sysChange){
$scope.Data.unit ='C';
$scope.Data.temp = $scope.Data.Cel;
return $scope.Data.sysChange = false;
}
$scope.Data.unit ='F';
$scope.Data.temp = $scope.Data.Fah;
return $scope.Data.sysChange = true;
}
});Also, the challenge is still on the master branch with old instructions for using API keys. |
|
nice |
|
Per the discussion on freeCodeCamp/testable-projects-fcc#133 I think this issue should reopen. |
|
@aw1231 thanks for letting us know. Potential contributors: Let us know in the Contributors Chat room if you need assistance. |
|
Also it would be awesome if you could reference any related duplicate issues that you find on the tracker. |
|
@raisedadead I made a PR that updated the instructions on |
|
@MiloATH one other thing I noticed, is that my ad-blocker uBlock Origin blocks with uBlock: |
Weather forecast proxy helperUsagereplace by The query params and the querystring are the same as the darksky docs expect the user should not provide his/her Only works for CachingResponses are cached for one hour, except the ones with errors. If the user change the query options, the cached data is updated ImportantThe Api only accept requests from codepen. ImprovementsRefactoring the code responsible for caching Links |
|
@marigerr That is interesting. It is hard for me to test that error because I don't have that ad blocker. Do you have suggested code? We could default to use HTML5 Geolocation, but the we wouldn't have the city. |
|
@raisedadead can this issue be closed or is something still missing? |
|
@MiloATH oh yes, thanks. I missed your comment earlier. |
|
@MiloATH @raisedadead I was looking at this a little bit closer. The instructions on the weather app challenge recommend for the user to use HTML 5 geolocation to get user's location. But the example codepen app uses ipinfo.io to get the user's Lat Long. I wonder if it would be better to have the example project use the HTML 5 geolocation that is recommended in the instructions. Ipinfo.io, gets a user's ip info without their consent which is a little sketchy imo and maybe something that shouldn't be encouraged at FCC in an example project? While HTML 5 geolocation, will ask for the user's permission. I might try to join in the contributors room and see if there are more opinions on this. |
|
Here is a altered version of the example pen that uses HTML5 geolocation instead of ipinfo.io |
|
@marigerr I have updated the pen. Thanks for working on this. |
|
Hey everyone, I built a proxy server that works quite well for this purpose. It's for the Dark Sky API. You can self host it on a heroku instance and then use a GET request to:
Response is the same JSON by Dark Sky (piped). https://github.com/adeluccar/fcc-show-the-local-weather-proxy |
Challenge Name
Show the local weather
Issue Description
Currently this project has at least two major problems:
Here's what I propose we do. We build a Glitch.com app that serves as an API. The Glitch App can then reach out to the Dark Sky (or whatever API works best) on the user's behalf and pass back the data.
This way, the keys are obscured, and the user has a simplified API they can interact with. There's no need for them to shop around for APIs or worry about security issues with CodePen.
We have already done something like this with our Twitch.tv challenge.
The text was updated successfully, but these errors were encountered: