Skip to content

📋 App to display weather data from a weather API using the Ionic 5 framework.

License

Notifications You must be signed in to change notification settings

AndrewJBateman/ionic-angular-weatherapi

Repository files navigation

Ionic Angular WeatherApi

  • App to display weather data from the Weatherstack weather API using the Ionic framework.
  • Some changes were made to the code so it would work in the latest Angular version.
  • Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

Table of contents

📚 General info

  • The Weatherstack weather API is a fully managed weather API platform that provides extensive APIs that supply the following data:

  • Real-time weather

  • Up to 14 day weather forecast

  • Historical weather inforamtion

  • Astronomy

  • Time zone

  • Geolocation data

📷 Screenshots

Ionic page

📶 Technologies

💾 Setup

  • npm i to install dependencies
  • Get yourself an API key from weatherstack.com and add to weather.service.ts line 4
  • To start the server on localhost://8100 type: 'ionic serve'

💻 Code Examples

  • Extract from weather.service.ts that gets data from the API.
export class WeatherService {

  constructor(private httpClient: HttpClient) {}

  getWeatherFromApi(city: string) {
    return this.httpClient.get(`http://api.weatherstack.com/current?access_key=${apiKey}&query=${city}`);
  }
}
  • Extract from list.page.ts function to get API weather data.
getWeather() {
  this.ionicStorage.get('city').then( city => {
    if (city === null) {
      this.weatherService.getWeatherFromApi('madrid').subscribe( weather => {
        this.weather = weather;
        console.log(weather);
      });
    } else {
      this.weatherService.getWeatherFromApi(city).subscribe( weather => {
        this.weather = weather;
        console.log(weather);
      });
    }

  }).catch(err => {
    console.log(err);
  });
}

🆒 Features

  • Searches for weather data in any city of the world
  • Ionic storage module used

📋 Status & To-do list

  • Status: Working.
  • To-do: Add to menu options - list of cities searched for etc. Convert to use Angular async pipe

👏 Inspiration

📁 License

  • This project is licensed under the terms of the MIT license.

✉️ Contact