jsayram / clientPanel

ANGULAR: Client management application that uses Firebase as the back-end with the new Firestore database. Application has full C.R.U.D functionality with Log-in authentication.

ClientPanel

---

Jose Ramirez Dev Notes:

App Description: Client management application that uses Firebase as the back end with the new Firestore database. Application has full C.R.U.D functionality with Log In authentication. From the Udemy Course [Angular Front to Back]

---

Tools & Assets:

• Chrome extension: Augury
  -(For debugging and visualizing angular applications at runtime)
  

Components, Modules, & Services added:

Using ng g c components/component_name

component_name
navbar
sidebar
dashboard
clients
add-client
edit-client
client-details
login
register
settings
not-found

• Router Module ng g m app-routing --flat -module:app, inside created app-routing.module.ts file, imported the routes for the components
  

• angularfire2 Module npm install firebase angularfire2
  -Github documentation for angularfire2 setup, and adding firebase config to enviromental variable: https://github.com/angular/angularfire2
  (great module for interacting with firebase, allows interaction with realtime database, firestore, authentication etc..)
  

• client service module ng g s services/client, added after installing the angularfire2 module , imported necessary angularfirestore imports, make sure to import in the app.module.ts file
  

• client interface created models directory with a Client.ts file , and there implemented the interface for Client. Imported that interface to the client.service.ts file.
  

• angular2-flash-messages npm install angular2-flash-messages --save, then bring it into the app.module.ts file, add as import then append the .forRoot()
  -NPM documentation for angular2-flash-messages setup : https://www.npmjs.com/package/angular2-flash-messages
  

• authentication service module ng g s services/auth, make sure to import in the app.module.ts file, this will be use for user login
  

• Authentication Guard for Routes created guards directory with a auth.guards.ts file , and there implemented the injectable for the AuthGuard. imported to the app-routing.module.ts file as a provider and added the canActivate:[AuthGuard] to each of the routes wanting to protect.
  

• settings service module ng g s services/settings -module:app, this will also import all necessary depedencies to the app.module.ts file
  

• settings interface created inside models directory with a Settings.ts file , and there implemented the interface for Settings. Imported that interface to the Settings.service.ts file.
  

• Authentication Guard for Register created in guards directory with a register.guards.ts file name , and there implemented the injectable for the RegisterGuard. imported to the app-routing.module.ts file as a provider and added the canActivate:[RegisterGuard] to the register route.
  

Other notes: imported the Observable from the rxjs library in the 'client.services.ts' file

Additional Dependencies Added:

• Bootstrap V4 - jQuery - Popper.js - Font-Awesome:
  npm install bootstrap@4.0.0-beta.2 jquery popper.js font-awesome
  

-Note for dependencies above: modify .angular-cli.json to add necessary styles and scripts. Then you can use inside your "componentName.component.html" files.

"styles": [ "styles.css", "../node_modules/font-awesome/css/font-awesome.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/popper.js/dist/umd/popper.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ],

Deploying to firebase for hosting

• firbase tool npm install -g firebase-tools
  -then firebase login firebase init firebase deploy
  -steps found in firebase hosting
  

---

Click Here for live "Client Panel" Project hosted on firebase

login: [e-mail]
password: 123456
feel free to play around with it, just use above login

you can Create, Remove, Update client information and balance, or Delete clients.

---

END of Jose Ramirez Dev Notes

---

This project was generated with Angular CLI version 1.6.8.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

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.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.