Angular Weather App is a Progressive Web Application (PWA) to get weather forecast.
Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a > native app-like user experience to cross-platform web applications.
Progressive Web Apps are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.
- Get weather forecast by user location.
- Get the weather forecast by searching for a place.
- Can be installed on your mobile phone, tablet and computer.
- Displays the following information:
- Temperature
- Weather description
- Feels like temperature
- Humidity
- Wind speed
- Pollution
- UV index
- Hourly and weekly forecast
- Sunrise and sunset times
- Visibility
- Air quality
- The temperature units can be switched between Celsius and Fahrenheit.
- Notify Internet connection status.
- Works offline after first use.
- Notify when an app update is available.
- Angular - An Application Design Framework and Development Platform for creating efficient and sophisticated single-page apps.
- Angular Material - Material Design components for Angular.
- OpenWeather API - Fast and easy-to-work weather APIs.
- Places API - Get detailed information about 100 million places.
- Geocoding API - Convert between addresses and geographic coordinates.
- Web APIs for Angular - High quality lightweight wrappers for native Web APIs for idiomatic use with Angular.
- RxJS - A javascript library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.
- TypeScript - TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions.
- ng-connection-service - Detects whether browser has an active internet connection or not in Angular application.
- PWACompat - A library for creating splash screens and icons for Mobile Safari, as well as supporting IE/Edge's Pinned Sites feature.
To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer.
From your command line:
git clone https://github.com/sldiaz04us/angular-weather-app.gitcd angular-weather-app/npm installto install all dependencies.
Before you run the application, you'll also need:
- Create a Google API Key to use Google Maps Platform products.
- Enable Places and Geocoding APIs.
- Add in the index.html file the below script with your Google API Key.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
...
<script defer src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&libraries=places"></script>
...
</head>
<body>
...
</body>
</html>- Create an OpenWeather API Key.
- Add your OpenWeather API Key to the
environment.tsandenvironment.prod.tsfiles.
// environment.ts
export const environment = {
production: true,
openWeatherApiKey: '{YOUR_API_KEY}'
};- Run
ng serve, this command runs the application. - Navigate to
http://localhost:4200/
A location module where the users can add their favorite places and be able to see a detail of the weather forecast for each place on the same page.
A map module where the users can see a snapshot of the radar map showing information such as rain, snow, storm, etc.
A settings module where the users can store their preferred location, temperature unit, etc.
I skipped writing test for this project.
Not all components have properly defined aria attributes, visual focus indicators, etc.
Design inspired by Diana Malewicz - Weather App UI illustrations
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent