diff --git a/README.md b/README.md index 30c4472..b7c1da4 100644 --- a/README.md +++ b/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` diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 804a5b4..3578e52 100644 --- a/src/app/app.component.ts +++ b/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'; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4146f1f..3f7f11c 100644 --- a/src/app/app.module.ts +++ b/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 { } diff --git a/src/app/components/card/card-label/card-label.component.ts b/src/app/components/card/card-label/card-label.component.ts deleted file mode 100644 index 74e02da..0000000 --- a/src/app/components/card/card-label/card-label.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-card-label', - templateUrl: './card-label.component.html', - styleUrls: ['./card-label.component.css'] -}) -export class CardLabelComponent implements OnInit { - - @Input() - gameLabel:string="" - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/src/app/components/card/card-pricing/card-pricing.component.ts b/src/app/components/card/card-pricing/card-pricing.component.ts deleted file mode 100644 index 5dc831e..0000000 --- a/src/app/components/card/card-pricing/card-pricing.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-card-pricing', - templateUrl: './card-pricing.component.html', - styleUrls: ['./card-pricing.component.css'] -}) -export class CardPricingComponent implements OnInit { - - @Input() - gameType:string ="Digital PS4" - @Input() - gamePrice:string = "R$ 399,90" - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/src/app/components/card/card.component.html b/src/app/components/card/card.component.html deleted file mode 100644 index 736eb2c..0000000 --- a/src/app/components/card/card.component.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - diff --git a/src/app/components/card/card.component.ts b/src/app/components/card/card.component.ts deleted file mode 100644 index d2c9e49..0000000 --- a/src/app/components/card/card.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-card', - templateUrl: './card.component.html', - styleUrls: ['./card.component.css'] -}) -export class CardComponent implements OnInit { - - @Input() - gameCover:string = "" - @Input() - gameLabel:string="" - @Input() - gameType:string ="XPTO | PS4" - @Input() - gamePrice:string = "R$ 399,90" - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/src/app/components/menu-bar/menu-bar.component.css b/src/app/components/menu-bar/menu-bar.component.css deleted file mode 100644 index b90bbc7..0000000 --- a/src/app/components/menu-bar/menu-bar.component.css +++ /dev/null @@ -1,44 +0,0 @@ -.menu-bar__container{ - display: flex; - flex-direction: row; - position: fixed; - z-index: 999; - background-color: #ffffff; - width: 100%; - height: 40px; - box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5); -} - -.menu-bar__logo{ - margin-left: 30px; - display: flex; - align-items: center; -} - -.menu-bar__item{ - display: flex; - margin:auto; - align-items: center; -} - -.menu-bar__item > ul{ - display: flex; - list-style-type: none; -} - -.menu-bar__item > ul > li { - padding: 5px; - margin-right: 15px; -} - -.menu-bar__item > ul > li > a { - text-decoration: none; - padding: 5px; - color: rgb(7, 7, 7); - font-family: 'Segoe UI'; -} - -.menu-bar__item > ul > li > a:hover { - color: blue; - font-weight: 600; -} diff --git a/src/app/components/menu-bar/menu-bar.component.html b/src/app/components/menu-bar/menu-bar.component.html deleted file mode 100644 index 44067d8..0000000 --- a/src/app/components/menu-bar/menu-bar.component.html +++ /dev/null @@ -1,18 +0,0 @@ -
- -
- -
-
diff --git a/src/app/components/menu-bar/menu-bar.component.ts b/src/app/components/menu-bar/menu-bar.component.ts deleted file mode 100644 index 056da3c..0000000 --- a/src/app/components/menu-bar/menu-bar.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-menu-bar', - templateUrl: './menu-bar.component.html', - styleUrls: ['./menu-bar.component.css'] -}) -export class MenuBarComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/src/app/core/Interface/response_api.interface.ts b/src/app/core/Interface/response_api.interface.ts new file mode 100644 index 0000000..82796b1 --- /dev/null +++ b/src/app/core/Interface/response_api.interface.ts @@ -0,0 +1,6 @@ +export interface Response { + cover: string; + type: string; + label: string; + price: string; +} diff --git a/src/app/core/services/database.service.spec.ts b/src/app/core/services/database.service.spec.ts new file mode 100644 index 0000000..1b3f513 --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/core/services/database.service.ts b/src/app/core/services/database.service.ts new file mode 100644 index 0000000..2792717 --- /dev/null +++ b/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 { + return this.http.get("http://localhost:3000/API") + } + + getHeader(): Observable { + return this.http.get("http://localhost:3000/header") + } + +} diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 4613fb7..b636ec3 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -1,31 +1,7 @@
- - - - - - - - -
- +
+ + +
+ \ No newline at end of file diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 007fef0..5dd863b 100644 --- a/src/app/pages/home/home.component.ts +++ b/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; + }) + } } diff --git a/src/app/components/card/card.component.css b/src/app/shared/app-card/app-card.component.css similarity index 73% rename from src/app/components/card/card.component.css rename to src/app/shared/app-card/app-card.component.css index 7564e12..97df5a0 100644 --- a/src/app/components/card/card.component.css +++ b/src/app/shared/app-card/app-card.component.css @@ -1,6 +1,6 @@ -.card__container{ +.card__container { position: relative; - border:3px solid #3E4357; + border: 3px solid #3E4357; border-radius: 10px; width: 350px; height: 500px; @@ -10,12 +10,12 @@ margin-top: 10px; } -.card__img{ +.card__img { min-width: 100%; min-height: 100%; transition: transform .8s; } -.card__img:hover{ +.card__img:hover { transform: scale(1.1); -} +} \ No newline at end of file diff --git a/src/app/shared/app-card/app-card.component.html b/src/app/shared/app-card/app-card.component.html new file mode 100644 index 0000000..5ed4406 --- /dev/null +++ b/src/app/shared/app-card/app-card.component.html @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/app/shared/app-card/app-card.component.spec.ts b/src/app/shared/app-card/app-card.component.spec.ts new file mode 100644 index 0000000..d99d4b1 --- /dev/null +++ b/src/app/shared/app-card/app-card.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AppCardComponent } from './app-card.component'; + +describe('AppCardComponent', () => { + let component: AppCardComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AppCardComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AppCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/app-card/app-card.component.ts b/src/app/shared/app-card/app-card.component.ts new file mode 100644 index 0000000..117ba18 --- /dev/null +++ b/src/app/shared/app-card/app-card.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'app-card', + templateUrl: './app-card.component.html', + styleUrls: ['./app-card.component.css'] +}) +export class AppCardComponent implements OnInit { + @Input() + gameCover: string = "" + @Input() + gameLabel: string = "" + @Input() + gameType: string = "XPTO | PS4" + @Input() + gamePrice: string = "R$ 399,90" + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/components/card/card-label/card-label.component.css b/src/app/shared/app-card/card-label/card-label.component.css similarity index 100% rename from src/app/components/card/card-label/card-label.component.css rename to src/app/shared/app-card/card-label/card-label.component.css diff --git a/src/app/components/card/card-label/card-label.component.html b/src/app/shared/app-card/card-label/card-label.component.html similarity index 100% rename from src/app/components/card/card-label/card-label.component.html rename to src/app/shared/app-card/card-label/card-label.component.html diff --git a/src/app/shared/app-card/card-label/card-label.component.ts b/src/app/shared/app-card/card-label/card-label.component.ts new file mode 100644 index 0000000..ccb1224 --- /dev/null +++ b/src/app/shared/app-card/card-label/card-label.component.ts @@ -0,0 +1,18 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-card-label', + templateUrl: './card-label.component.html', + styleUrls: ['./card-label.component.css'] +}) +export class CardLabelComponent implements OnInit { + + @Input() + gameLabel: string = ""; + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/components/card/card-pricing/card-pricing.component.css b/src/app/shared/app-card/card-pricing/card-pricing.component.css similarity index 100% rename from src/app/components/card/card-pricing/card-pricing.component.css rename to src/app/shared/app-card/card-pricing/card-pricing.component.css diff --git a/src/app/components/card/card-pricing/card-pricing.component.html b/src/app/shared/app-card/card-pricing/card-pricing.component.html similarity index 100% rename from src/app/components/card/card-pricing/card-pricing.component.html rename to src/app/shared/app-card/card-pricing/card-pricing.component.html diff --git a/src/app/shared/app-card/card-pricing/card-pricing.component.ts b/src/app/shared/app-card/card-pricing/card-pricing.component.ts new file mode 100644 index 0000000..3710e44 --- /dev/null +++ b/src/app/shared/app-card/card-pricing/card-pricing.component.ts @@ -0,0 +1,16 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-card-pricing', + templateUrl: './card-pricing.component.html', + styleUrls: ['./card-pricing.component.css'] +}) +export class CardPricingComponent implements OnInit { + + @Input() gameType: string = ""; + @Input() gamePrice: string = ""; + constructor() { } + + ngOnInit(): void { } + +} diff --git a/src/app/shared/app-menu-bar/app-menu-bar.component.css b/src/app/shared/app-menu-bar/app-menu-bar.component.css new file mode 100644 index 0000000..c1f04d6 --- /dev/null +++ b/src/app/shared/app-menu-bar/app-menu-bar.component.css @@ -0,0 +1,16 @@ +.menu-bar__container { + display: flex; + flex-direction: row; + position: fixed; + z-index: 999; + background-color: #ffffff; + width: 100%; + height: 40px; + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); +} + +.menu-bar__logo { + margin-left: 30px; + display: flex; + align-items: center; +} \ No newline at end of file diff --git a/src/app/shared/app-menu-bar/app-menu-bar.component.html b/src/app/shared/app-menu-bar/app-menu-bar.component.html new file mode 100644 index 0000000..b5b0a7f --- /dev/null +++ b/src/app/shared/app-menu-bar/app-menu-bar.component.html @@ -0,0 +1,7 @@ +
+ + + +
\ No newline at end of file diff --git a/src/app/shared/app-menu-bar/app-menu-bar.component.spec.ts b/src/app/shared/app-menu-bar/app-menu-bar.component.spec.ts new file mode 100644 index 0000000..68641d7 --- /dev/null +++ b/src/app/shared/app-menu-bar/app-menu-bar.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AppMenuBarComponent } from './app-menu-bar.component'; + +describe('AppMenuBarComponent', () => { + let component: AppMenuBarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AppMenuBarComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AppMenuBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/app-menu-bar/app-menu-bar.component.ts b/src/app/shared/app-menu-bar/app-menu-bar.component.ts new file mode 100644 index 0000000..ded28ab --- /dev/null +++ b/src/app/shared/app-menu-bar/app-menu-bar.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'app-menu-bar', + templateUrl: './app-menu-bar.component.html', + styleUrls: ['./app-menu-bar.component.css'] +}) +export class AppMenuBarComponent implements OnInit { + + @Input() gameCover: string = ""; + @Input() gameLabel: string = ""; + @Input() gameType: string = ""; + @Input() gamePrice: string = ""; + + + constructor() { } + + ngOnInit(): void { } + + +} diff --git a/src/app/shared/app-menu-bar/menu-bar-item/menu-bar-item.component.css b/src/app/shared/app-menu-bar/menu-bar-item/menu-bar-item.component.css new file mode 100644 index 0000000..36c45d1 --- /dev/null +++ b/src/app/shared/app-menu-bar/menu-bar-item/menu-bar-item.component.css @@ -0,0 +1,28 @@ +.menu-bar__item { + display: flex; + align-items: center; + justify-content: center; + margin: 8px auto; +} + +.menu-bar__item>ul { + display: flex; + list-style-type: none; +} + +.menu-bar__item>ul>li { + padding: 5px; + margin-right: 15px; +} + +.menu-bar__item>ul>li>a { + text-decoration: none; + padding: 5px; + color: rgb(7, 7, 7); + font-family: 'Segoe UI'; +} + +.menu-bar__item>ul>li>a:hover { + color: blue; + font-weight: 600; +} \ No newline at end of file diff --git a/src/app/shared/app-menu-bar/menu-bar-item/menu-bar-item.component.html b/src/app/shared/app-menu-bar/menu-bar-item/menu-bar-item.component.html new file mode 100644 index 0000000..1bcaa8f --- /dev/null +++ b/src/app/shared/app-menu-bar/menu-bar-item/menu-bar-item.component.html @@ -0,0 +1,7 @@ +
+ +
\ No newline at end of file diff --git a/src/app/shared/app-menu-bar/menu-bar-item/menu-bar-item.component.ts b/src/app/shared/app-menu-bar/menu-bar-item/menu-bar-item.component.ts new file mode 100644 index 0000000..f2eeb40 --- /dev/null +++ b/src/app/shared/app-menu-bar/menu-bar-item/menu-bar-item.component.ts @@ -0,0 +1,15 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-menu-bar-item', + templateUrl: './menu-bar-item.component.html', + styleUrls: ['./menu-bar-item.component.css'] +}) +export class MenuBarItemComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/assets/db/db.json b/src/assets/db/db.json new file mode 100644 index 0000000..f2e363b --- /dev/null +++ b/src/assets/db/db.json @@ -0,0 +1,38 @@ +{ + "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" + } + ] +}