lab 2 report - TejaswiG01/ASElab GitHub Wiki

Lab 2 report

Weather App using Angular and Bootstrap

Introduction:

Pair programming:

Pair programming is part of agile in which two people would develop a project, one will develop the code and other would run appropriate tests check whether the code has any errors and it is user usable or not, so in today’s assignment we will be doing a weather app which gives out the forecast of a particular place depending on the user request.

Objectives: * Objectives of the assignment are that the learner could know about installing angular and the required files that have to be included in the angular.

  • Working with angular components and modules.
  • Using and calling different API s that are trending in present technology.• Learn to use angular.json software and webstorm.
  • Responsibilities of pair programming.
  • Learning significance of single page applications.

Design and implementation:

Implementation of this weather app starts with creating angular cli in node.js and it is shown as below: creating a single page application for weather report: In this task we have to create a single page application using bootstrap framework and it should take two text fields and it have to display the weather forecast of the city based on the city name or state code, for this we will be using angular cli and webstorm(IDE) for the weather app and the UI is developed using bootstrap.

Installing Angular Cli:

The first thing we should do is installing angular Cli, for this we need to install it in npm using the command $ npm install –g @angular/cli By running this command we can install angular into our local pc and it will ask for the settings and styling preferences, you can select whatever you want and click ok and the whole angular package is ready now,

Creating a project:

After installing angular now we need to create a project and we should include all the library files that are needed to do this project, so for creating a project we will use the following command 

    $ ng new Ase-Lab2

The next thing we should do is to include jquery, bootstrap and all the required libraries in to the weather app so that we can use them to construct a good UI.

To include all the required files use this command

 $ npm install –save jquery popper .js bootstrap

After this to make your UI beautiful, you need the css files and js files and for that you have to include certain url to styles and scripts parts in your angular.json file, after adding the required files save the .json file and now the you can use bootstrap and your angular cli as shown below.

Creating Weather component:

The next part is to create the weather component that will be responsible for searching the location and displaying data of the request. When you create new component, the Angular creates .css, .html, .component.ts, and .spec.ts as shown below $ ng generate component weather is the command

Accessing Weather Component:

For accessing the component, we use the Angular’s Router library and declare a desired URL path within a file that will map directly to the component. The routes.ts file will hold all the routes links.

Defining User Interface:

We use Bootstrap to design the UI for the application. Bootstrap is useful for creating ready-made, responsive websites that adapt to any device.

Calling API and Creating a Service:

When you call the API, the API searches for the requested data and returns them back to the client. To do so, we need an API key to call the API. But in order to call the API we need to make an an Http request and in order to do this we need to create a service. A service allows you to move all of those HTTP requests your app makes into one file that you can then call inside any .component.ts file you create. $ng g service ow

Output: . Issues and limitations:

  • Unlike traditional web applications we cannot warn users about unsaved changes in single page applications.
  • Loading css and javascript is bit tough in single page applications.
  • There will be a huge files of libraries that have to be integrated and missing one will cause many errors.

Conclusion:

Unlike traditional web applications, single page applications do not reload the page and gives the output in the page itself, sliding and scrolling of page is done in the single page and application not goes to another page.

And coming to pair programming, it will improve the code quality and also burden on the program developer reduces as the code is evaluated gradually,so that developer can fully concentrate on the code.