Budapest University of Technology and Economics
Faculty of Electrical Engineering and Informatics
Homework Report
Title: Weather Forecast Angular Web App
Written by: Yassine Haouet Neptun: BYI1SZ
Field: Computer Engineering Specialization: Software Engineering
E-mail: Yassine Haouet
Academic year: 2022/2023 Spring semester
Client Side Technologies HW
I. General Overview
❖ Purpose
The purpose of our web app is to deliver accurate and up-to-date weather forecast
information to users. By leveraging the openWeather API, the application provides a
user-friendly interface where users can easily search for weather forecasts of various
locations worldwide.
❖ Features
✓ Real-time Weather Forecasts: The application fetches weather forecast data
from the openWeather API, ensuring that users receive the most recent weather
information.
✓ Location Search: Users can search for weather forecasts by entering the name
of a city, enabling them to access weather data for any desired location.
Detailed Weather Information: The application displays comprehensive weather
details, including max min temperature, humidity and wind speed.
✓ Responsive Design: The web app is designed to adapt seamlessly to different
screen sizes, providing an optimal viewing experience on both desktop and
mobile devices.
❖ Technologies Used
The web application is built using Angular, a popular and powerful TypeScript-based
framework for building dynamic web applications. I leveraged Angular’s components
and services to create a modular and scalable application structure.
To retrieve weather forecast data, I integrated with the openWeather API. This API
provides a vast range of weather information and enables us to deliver accurate and
reliable forecasts to the users.
-1- 22/05/2023
Client Side Technologies HW
II. Methodology
1. Creating UI Structure for The App
To establish the UI structure for our Angular weather application, I began by crafting
the HTML code within the `app.component.html` file.
Firstly, I created a container `div` element that will encompass two distinct sections.
The upper data section will be responsible for displaying the location’s name and the
corresponding temperature.
On the other hand, the lower data section will function as an information panel,
presenting additional details such as the minimum and maximum temperatures, wind
temperature and the humidity level.
2. Styling The UI Components
In the next step, I dealt with the styling part where I created CSS rules for different
components to make the overall appearance of the app appealing and user friendly. I
won’t go through the CSS styles in the documentation because it is not of much
importance.
3. Create Angular Service to Call API
After subscribing to the API and getting an API key and in order to make API calls to
retrieve weather data, I created a service which I named WeatherService. This service
is responsible for making HTTP requests to the openWeather API to retrieve weather
data for a specific city.
@Injectable({
providedIn: 'root'
})
export class WeatherService {
constructor(private http:HttpClient) { }
getweather(city: string) {
return this.http.get('https://api.openweathermap.org/data/2.5/weather?q='
+ city + '&appid=f0ad9802b263f4f13c3f93d240a46363&units=metric' );
}
}
-2- 22/05/2023
Client Side Technologies HW
1. Connect App.Component.ts to Service
In the AppComponent class, the WeatherService is used to retrieve weather data from
the openWeather API.
The WeatherService is injected into the constructor of the AppComponent class:
constructor(private weatherService: WeatherService) { }
The getWeather method is defined in the AppComponent class to fetch weather data:
getWeather(city : string ) {
this.weatherService.getweather(city).subscribe({
next: (res) => {
console.log(res);
this.city= city.slice();
this.myWeather = res;
this.temperature = this.myWeather.main.temp;
this.min = this.myWeather.main.temp_min;
this.max = this.myWeather.main.temp_max;
this.wind = this.myWeather.wind.speed;
this.humidity = this.myWeather.main.humidity;
},
error: (error) => console.log(error.message),
complete: () => console.info('API call completed')
})
}
The getWeather method takes a city parameter, which represents the name of the city
for which the weather data is requested. It calls the getweather method of the injected
WeatherService, passing the city parameter. The returned observable is subscribed to
with a callback object containing the next, error, and complete functions. In the next
callback, the received weather data is assigned to the appropriate properties of the
AppComponent. The error callback handles any errors that occur during the API
request, and the complete callback logs a message when the API call is completed.
-3- 22/05/2023
Client Side Technologies HW
onSubmit(){
this.getWeather(this.cityName);
this.cityName='';
}
The onSubmit method is triggered when a form is submitted, such as entering a new
city name and clicking a button. It calls the getWeather method, passing the current
cityName value, and then resets the cityName property to an empty string.
-4- 22/05/2023
Client Side Technologies HW
III. Results
-5- 22/05/2023
