feat: dando continuidade na tarefa solicitada ao projeto

README.md

@@ -10,18 +10,27 @@ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The appli
 
 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
+## Utilizando API Rest Fake
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+Para simular o uso do `HttpClient`, precisamos de uma API REST, como o foco é o `HttpClient` não vamos nos preocupar em criar uma API REST, para isso podemos usar o `json-server`, que faz uma API REST fake, assim focaremos no `HttpClient`.
+Para mais detalhes sobre o `json-server`, podemos consultar seu github.
 
-## Running unit tests
+Para instalar o `json-server`, bastar executar o seguinte comando:
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+`npm install -g json-server`
 
-## Running end-to-end tests
+Dento do nosso projeto, vamos criar uma pasta chamada “data” dentro de "assets"
 
-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.
+`/src/assets/db`
 
-## Further help
+Agora crie um arquivo chamado db.json e jogue dentro da pasta “data” que acabamos de criar:
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+`/src/assets/data/db.json`
+
+Vamos abrir o arquivo `db.json` e incluir o seguinte json:
+
+`{ "API": [ { "cover": "assets/bt-1.jpg", "type": "DIGITAL", "label": "DIGITAL | PS4", "price": "R$ 129,99" }, { "cover": "assets/bt-4.jpg", "type": "EXCLUSIVE", "label": "DISC | PS5", "price": "R$ 269,99" }, { "cover": "assets/ac-cover.jpg", "type": "BEST OF YEAR", "label": "DIGITAL | PS5", "price": "R$ 369,99" }, { "cover": "assets/bt-hardline.jpg", "type": "NEW", "label": "DIGITAL | PS3 PS4 PS5", "price": "R$ 369,99" } ], "header": { { "novidades": "https://store.playstation.com/pt-br/pages/latest", "colecoes": "https://store.playstation.com/pt-br/pages/collections", "ofertas": "https://store.playstation.com/pt-br/pages/deals", "ps5": "https://store.playstation.com/pt-br/pages/ps5", "assinatura": "https://store.playstation.com/pt-br/pages/subscriptions", "navegar": "https://store.playstation.com/pt-br/pages/browse" } } }`
+
+Vamos rodar o `json-server` para simular nossa API REST, abra um novo terminal e na raiz do projeto execute o seguinte comando:
+
+`json-server --watch src/assets/data/db.jsono`

src/app/app.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
+import { DatabaseService } from './core/services/database.service';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+	selector: 'app-root',
+	templateUrl: './app.component.html',
+	styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'store';
+	title = 'store';
 }

src/app/app.module.ts

@@ -1,28 +1,33 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
+import { HttpClientModule } from '@angular/common/http'
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './pages/home/home.component';
-import { CardComponent } from './components/card/card.component';
-import { MenuBarComponent } from './components/menu-bar/menu-bar.component';
-import { CardLabelComponent } from './components/card/card-label/card-label.component';
-import { CardPricingComponent } from './components/card/card-pricing/card-pricing.component';
+import { AppCardComponent } from './shared/app-card/app-card.component';
+import { AppMenuBarComponent } from './shared/app-menu-bar/app-menu-bar.component';
+import { CardLabelComponent } from './shared/app-card/card-label/card-label.component';
+import { CardPricingComponent } from './shared/app-card/card-pricing/card-pricing.component';
+import { MenuBarItemComponent } from './shared/app-menu-bar/menu-bar-item/menu-bar-item.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    HomeComponent,
-    CardComponent,
-    MenuBarComponent,
-    CardLabelComponent,
-    CardPricingComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+	declarations: [
+		AppComponent,
+		HomeComponent,
+		AppCardComponent,
+		AppMenuBarComponent,
+		CardLabelComponent,
+		CardPricingComponent,
+		AppCardComponent,
+		AppMenuBarComponent,
+  MenuBarItemComponent
+	],
+	imports: [
+		BrowserModule,
+		AppRoutingModule,
+		HttpClientModule
+	],
+	providers: [],
+	bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/core/Interface/response_api.interface.ts

@@ -0,0 +1,6 @@
+export interface Response {
+	cover: string;
+	type: string;
+	label: string;
+	price: string;
+}

src/app/core/services/database.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DatabaseService } from './database.service';
+
+describe('DatabaseService', () => {
+  let service: DatabaseService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DatabaseService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/database.service.ts

@@ -0,0 +1,22 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Response } from '../Interface/response_api.interface';
+
+
+@Injectable({
+	providedIn: 'root'
+})
+export class DatabaseService {
+
+	constructor(private http: HttpClient) { }
+
+	getBase(): Observable<Response[] | undefined> {
+		return this.http.get<Response[]>("http://localhost:3000/API")
+	}
+
+	getHeader(): Observable<Response[] | undefined> {
+		return this.http.get<Response[]>("http://localhost:3000/header")
+	}
+
+}

src/app/pages/home/home.component.html

@@ -1,31 +1,7 @@
 <div class="home__container">
-	<app-card
-		gameCover="assets/bt-1.jpg"
-		gameLabel="DIGITAL"
-		gameType="DIGITAL | PS4"
-		gamePrice="R$ 129,99"
-	>
-	</app-card>
-	<app-card
-		gameCover="assets/bt-4.jpg"
-		gameLabel="EXCLUSIVE"
-		gameType="DISC | PS5"
-		gamePrice="R$ 269,99"
-	>
-	</app-card>
-	<app-card
-		gameCover="assets/ac-cover.jpg"
-		gameLabel="BEST OF YEAR"
-		gameType="DIGITAL | PS5"
-		gamePrice="R$ 369,99"
-		>
-	</app-card>
-	<app-card
-		gameCover="assets/bt-hardline.jpg"
-		gameLabel="NEW"
-		gameType="DIGITAL | PS3 PS4 PS5"
-		gamePrice="R$ 369,99"
-	>
-	</app-card>
-</div>
-
+	<div *ngFor="let item of CardsItem">
+		<app-card gameCover="{{ item.cover }}" gameLabel="{{ item.type }}" gameType="{{ item.label }}"
+			gamePrice="{{ item.price }}">
+		</app-card>
+	</div>
+</div>

src/app/pages/home/home.component.ts

@@ -1,15 +1,20 @@
 import { Component, OnInit } from '@angular/core';
+import { Response } from 'src/app/core/Interface/response_api.interface';
+import { DatabaseService } from 'src/app/core/services/database.service';
 
 @Component({
-  selector: 'app-home',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css']
+	selector: 'app-home',
+	templateUrl: './home.component.html',
+	styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
+	CardsItem: Response[] = [];
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+	constructor(private dataBaseService: DatabaseService) { }
 
+	ngOnInit(): void {
+		this.dataBaseService.getBase().subscribe((item: any) => {
+			this.CardsItem = item;
+		})
+	}
 }