/weatherapp_angularjs

Weather app created in AngularJS with CI/CD using TravisCI, Karma, Codecov and Firebase deployment.

Primary LanguageTypeScript

Build Status codecov

Team Rocket Weather App

Software Tools and Emerging Tools for AI and ML Project..

This project was generated with Angular CLI version 12.2.1. It is a simple website that displays current weather in Ontario and current Date/Time. It used two main APIs - Open weather map and date.now() function of JS. Also, this repo has CI/CD enabled that can be triggered on every commit changes.

Main application components are located in: src/app folder

To set-up in your local machine

  1. Install node modules by running npm install. This will store the @angular libraries inside /node_modules folder.
  2. Build the app by running npm build.
  3. Run ng serve to run it in http://localhost:4200/
  4. If you get dependency error, install devkit by running: npm install @angular-devkit/build-angular

To test using Karma and Codecov

  1. To run unit test on the app, execute: ng test. If you prefer to run test using headless chrome, you can execute `ng test --browsers=ChromeHeadlessNoSandbox --codeCoverage=true --watch=false.
  2. From your terminal window, you will see the Code Coverage report generated by karma coverage istanbul.
  3. Additionally, you may view the report in a more visual format by uploading it in Codecov with command: codecov --disable=gcov -t <token>

To build and deploy to Firebase

Pre-requisite: Set-up Firebase account and project from firebase console

  1. Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
  2. Ensure that all the static files (e.g index.html) are placed inside the dist/folder.
  3. Install firebase tools including cli by running npm install -g firebase-tools
  4. Login to Firebase by running firebase login --interactive
  5. Initiate firebase by running firebase init hosting
  6. Answer all the required items correcttly.
  7. Edit firebase.json file and ensure that the public line shows public:dist given that step-2 is confirmed.
  8. Run npm run build
  9. Run firebase deploy

Alternatively, you may push the code here and the steps above will be performed automatically via Travis CI.

FIREBASE URL (Prod): https://team-rocket-swt.web.app/
HEROKU URL (Dev): https://weather-swt.herokuapp.com/

Additional Info:

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Code Contributors

  1. https://github.com/iamAjayDahiya/ (AngularJS app)
  2. https://github.com/madserrano (TravisCI, Unit Testing - Karma, CodeCov, Firebase deployment)