yahoo api not working

[shivamrr9]

https://query.yahooapis.com/v1/public/yql?format=json&q=select%20*%20from%20weather.forecast%20where%20woeid=2367105

This api fails

[a-m-g]

I've been trying to get this to work as well, and discovered a notice on the Yahoo developer site (https://developer.yahoo.com/yql/) which reads :

"Important EOL Notice: As of Thursday, Jan. 3, 2019, the YQL service at query.yahooapis.com will be retired. This will impact users of datatables.org as well as developers who creates features using this YQL service. To continue using our free Yahoo Weather APIs, use https://weather-ydn-yql.media.yahoo.com/forecastrss as your new API endpoint. Contact yahoo-weather-ydn-api@oath.com for credentials to onboard to this free Yahoo Weather API service. Other YQL based services that use query.yahooapis.com will no longer operate."

So I'm assuming the existing code samples will no longer work with the old endpoints.

[shivamrr9]

This should be updated in the respective codelab (https://codelabs.developers.google.com/codelabs/your-first-pwapp/) as this is blocking the learning process.

[maatti]

It still has not been updated I think, right?!

[pastorsi]

What a pity this issue with https://query.yahooapis.com/ is preventing each stage (after the first one) of this codelab from working! As a previous comment said, "It's blocking the learning process."

[davidair]

Here is a workaround: fake additional cities - we don't care about the actual api results as long as we can test the app.

1. Add an additionalFakeForecasts variable defining as many extra results as you'd like (I've added Austin): https://gist.github.com/davidair/3995f29978b855f62f3e3187bee3c088

2. In the getForecast() function, change the else clause (when the HTTP request fails) to read this:

app.updateForecastCard(additionalFakeForecasts[key]);

This should unblock at least the city adding part of the tutorial

[MarkDuijf]

Here is a workaround: fake additional cities - we don't care about the actual api results as long as we can test the app.

1. Add an additionalFakeForecasts variable defining as many extra results as you'd like (I've added Austin): https://gist.github.com/davidair/3995f29978b855f62f3e3187bee3c088
2. In the getForecast() function, change the else clause (when the HTTP request fails) to read this:

app.updateForecastCard(additionalFakeForecasts[key]);

This should unblock at least the city adding part of the tutorial

Note that this will not 'save' the New York weather. So after refresh it will be replaced by the Austin weather.

To fix this, i removed the [key] after additionalFakeForecasts and I also removed the --'2357536' : {-- in the Sample code block.

I replaced the app.updateForecastCard in the else clause with:

if (label === "New York, NY") { app.updateForecastCard(initialWeatherForecast); } else { app.updateForecastCard(additionalFakeForecasts); }

Of course this will add Austin in any case, even if you add another city.

[arshameDEV6]

I've created an updated version of the app using OpenWeatherMaps.

https://github.com/arshameDEV6/node-pwapp-playground

Not sure what would be the best way to help update the original broken demo. My version does force users to use my node server.

[rgegriff]

Piggybacking on some of the work that @MarkDuijf and @davidair did on making a workaround, I created a tweak to their solution that allows for all cities to be displayed.

First, create a file in scripts/ called fakeforecasts.js with the following data:

    "2357536": {
        key: '2357536',
        label: 'Austin, TX',
        created: '2016-07-22T01:00:00Z',
        channel: {
            astronomy: {
                sunrise: "5:43 am",
                sunset: "8:21 pm"
            },
            item: {
                condition: {
                    text: "Sunny",
                    date: "Thu, 21 Jul 2016 09:00 PM EDT",
                    temp: 86,
                    code: 32
                },
                forecast: [
                    {code: 44, high: 96, low: 70},
                    {code: 44, high: 93, low: 73},
                    {code: 4, high: 95, low: 78},
                    {code: 24, high: 75, low: 89},
                    {code: 24, high: 89, low: 77},
                    {code: 44, high: 92, low: 79},
                    {code: 44, high: 89, low: 77}
                ]
            },
            atmosphere: {
                humidity: 56
            },
            wind: {
                speed: 25,
                direction: 195
            }
        }
    },
    "2367105": {
        key: '2367105',
        label: 'Boston, MA',
        created: '2016-07-22T01:00:00Z',
        channel: {
            astronomy: {
                sunrise: "5:43 am",
                sunset: "8:21 pm"
            },
            item: {
                condition: {
                    text: "Sunny",
                    date: "Thu, 21 Jul 2016 09:00 PM EDT",
                    temp: 86,
                    code: 32
                },
                forecast: [
                    {code: 44, high: 96, low: 70},
                    {code: 44, high: 93, low: 73},
                    {code: 4, high: 95, low: 78},
                    {code: 24, high: 75, low: 89},
                    {code: 24, high: 89, low: 77},
                    {code: 44, high: 92, low: 79},
                    {code: 44, high: 89, low: 77}
                ]
            },
            atmosphere: {
                humidity: 56
            },
            wind: {
                speed: 25,
                direction: 195
            }
        }
    },
    "2379574": {
        key: '2379574',
        label: 'Chicago, IL',
        created: '2016-07-22T01:00:00Z',
        channel: {
            astronomy: {
                sunrise: "5:43 am",
                sunset: "8:21 pm"
            },
            item: {
                condition: {
                    text: "Sunny",
                    date: "Thu, 21 Jul 2016 09:00 PM EDT",
                    temp: 86,
                    code: 32
                },
                forecast: [
                    {code: 44, high: 96, low: 70},
                    {code: 44, high: 93, low: 73},
                    {code: 4, high: 95, low: 78},
                    {code: 24, high: 75, low: 89},
                    {code: 24, high: 89, low: 77},
                    {code: 44, high: 92, low: 79},
                    {code: 44, high: 89, low: 77}
                ]
            },
            atmosphere: {
                humidity: 56
            },
            wind: {
                speed: 25,
                direction: 195
            }
        }
    },
    "2459115": {
        key: '2459115',
        label: 'New York, NY',
        created: '2016-07-22T01:00:00Z',
        channel: {
            astronomy: {
                sunrise: "5:43 am",
                sunset: "8:21 pm"
            },
            item: {
                condition: {
                    text: "Sunny",
                    date: "Thu, 21 Jul 2016 09:00 PM EDT",
                    temp: 86,
                    code: 32
                },
                forecast: [
                    {code: 44, high: 96, low: 70},
                    {code: 44, high: 93, low: 73},
                    {code: 4, high: 95, low: 78},
                    {code: 24, high: 75, low: 89},
                    {code: 24, high: 89, low: 77},
                    {code: 44, high: 92, low: 79},
                    {code: 44, high: 89, low: 77}
                ]
            },
            atmosphere: {
                humidity: 56
            },
            wind: {
                speed: 25,
                direction: 195
            }
        }
    },
    "2475687": {
        key: '2475687',
        label: 'Portland, OR',
        created: '2016-07-22T01:00:00Z',
        channel: {
            astronomy: {
                sunrise: "5:43 am",
                sunset: "8:21 pm"
            },
            item: {
                condition: {
                    text: "Sunny",
                    date: "Thu, 21 Jul 2016 09:00 PM EDT",
                    temp: 86,
                    code: 32
                },
                forecast: [
                    {code: 44, high: 96, low: 70},
                    {code: 44, high: 93, low: 73},
                    {code: 4, high: 95, low: 78},
                    {code: 24, high: 75, low: 89},
                    {code: 24, high: 89, low: 77},
                    {code: 44, high: 92, low: 79},
                    {code: 44, high: 89, low: 77}
                ]
            },
            atmosphere: {
                humidity: 56
            },
            wind: {
                speed: 25,
                direction: 195
            }
        }
    },
    "2487956": {
        key: '2487956',
        label: 'San Francisco, CA',
        created: '2016-07-22T01:00:00Z',
        channel: {
            astronomy: {
                sunrise: "5:43 am",
                sunset: "8:21 pm"
            },
            item: {
                condition: {
                    text: "Sunny",
                    date: "Thu, 21 Jul 2016 09:00 PM EDT",
                    temp: 86,
                    code: 32
                },
                forecast: [
                    {code: 44, high: 96, low: 70},
                    {code: 44, high: 93, low: 73},
                    {code: 4, high: 95, low: 78},
                    {code: 24, high: 75, low: 89},
                    {code: 24, high: 89, low: 77},
                    {code: 44, high: 92, low: 79},
                    {code: 44, high: 89, low: 77}
                ]
            },
            atmosphere: {
                humidity: 56
            },
            wind: {
                speed: 25,
                direction: 195
            }
        }
    },
    "2490383": {
        key: '2490383',
        label: 'Seattle, WA',
        created: '2016-07-22T01:00:00Z',
        channel: {
            astronomy: {
                sunrise: "5:43 am",
                sunset: "8:21 pm"
            },
            item: {
                condition: {
                    text: "Sunny",
                    date: "Thu, 21 Jul 2016 09:00 PM EDT",
                    temp: 86,
                    code: 32
                },
                forecast: [
                    {code: 44, high: 96, low: 70},
                    {code: 44, high: 93, low: 73},
                    {code: 4, high: 95, low: 78},
                    {code: 24, high: 75, low: 89},
                    {code: 24, high: 89, low: 77},
                    {code: 44, high: 92, low: 79},
                    {code: 44, high: 89, low: 77}
                ]
            },
            atmosphere: {
                humidity: 56
            },
            wind: {
                speed: 25,
                direction: 195
            }
        }
    }
};

Then add fake forecasts to index.html by adding this line before app.js is included:

  <!-- Uncomment the line below when ready to test with fake data -->
  <script src="scripts/fakeforecasts.js"></script> <!-- ADD THIS LINE TO index.html -->
  <script src="scripts/app.js" async></script>

Finally, you can update the getForecast function from app.js to add the following code in the else block:

app.getForecast = function (key, label) {
        var statement = 'select * from weather.forecast where woeid=' + key;
        var url = 'https://query.yahooapis.com/v1/public/yql?format=json&q=' +
            statement;
        // TODO add cache logic here

        // Fetch the latest data.
        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (request.readyState === XMLHttpRequest.DONE) {
                if (request.status === 200) {
                    var response = JSON.parse(request.response);
                    var results = response.query.results;
                    results.key = key;
                    results.label = label;
                    results.created = response.query.created;
                    app.updateForecastCard(results);
                }
            } else {
                // Return the fake weather forecast since no data is available.
                    app.updateForecastCard(additionalFakeForecasts[key]);
            }
        };
        request.open('GET', url);
        request.send();
    };

It will appear as if all of the cities have the same weather, which is kinda lame; But it will allow you to (hopefully) complete the exercises

[jpdevspace]

@rgegriff Adding the code above works to have data available because the Yahoo API doesn't work anymore. But adding the app.updateForecastCard(additionalFakeForecasts[key]); in the else statement of app.getForcast didn't work for me after step 6 of the tutorial. When you test the offline feature. So my fix was to change the getForecast to this

app.getForecast = function(key, label) {
    if (navigator.onLine) {
      console.log("We're online baby!");
      app.updateForecastCard(fakeForecasts[key]);
    } else {
      console.log("Woops we're offline");
      app.updateForecastCard(initialWeatherForecast);
    }
}

[andytanghr]

I submitted a pull request that updates this code lab for the new Yahoo API. Check it out here: https://github.com/googlecodelabs/your-first-pwapp/pull/147

[petele]

Hi!

Thanks for the feedback. I've rewritten the codelab from scratch and believe I have fixed this issue. The code has been updated, I'm just waiting for the guide to go live. In the meantime, I've deployed the codelab at https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/.

If you find any issues with the new codelab, please let us know!

Thanks!