{"id":3873,"date":"2017-08-08T07:00:18","date_gmt":"2017-08-08T14:00:18","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=3873"},"modified":"2025-06-13T20:15:13","modified_gmt":"2025-06-14T03:15:13","slug":"creating-front-end-user-profile-store-angular-typescript","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/pt\/creating-front-end-user-profile-store-angular-typescript\/","title":{"rendered":"Use TypeScript e Angular como front-end para seu armazenamento de perfis de usu\u00e1rio"},"content":{"rendered":"

Recentemente, escrevi um tutorial intitulado,\u00a0Cria\u00e7\u00e3o de um armazenamento de perfil de usu\u00e1rio com Node.js e um banco de dados NoSQL<\/a>pois esse \u00e9 um assunto e um caso de uso muito popular quando se trata de bancos de dados NoSQL. Nesse tutorial, criamos uma API usando Node.js<\/a> e Couchbase<\/a> para armazenar usu\u00e1rios, informa\u00e7\u00f5es associadas a determinados usu\u00e1rios e sess\u00f5es expiradas. No entanto, ele era estritamente relacionado ao back-end, sem interface com o usu\u00e1rio.<\/p>\n

Quer\u00edamos usar a API de armazenamento de perfil de usu\u00e1rio e entender como criar, usando TypeScript e Angular, <\/span>uma p\u00e1gina de perfil que se comunica com cada um dos pontos de extremidade da API.<\/p>\n

Este tutorial foi atualizado em 7 de janeiro de 2021 por Eric Bishard<\/a> para trabalhar com o Angular 11!<\/strong><\/p>\n

<\/p>\n

Antes de continuar, presumimos que voc\u00ea tenha seguido o tutorial anterior<\/a>. Tamb\u00e9m vamos supor que voc\u00ea tenha o CLI angular<\/a> instalado.<\/p>\n

Criar um projeto Angular com os componentes necess\u00e1rios<\/h2>\n

O front-end do cliente ser\u00e1 rudimentar, mas o criaremos do zero. Do ponto de vista do design, ele n\u00e3o ter\u00e1 uma \u00f3tima apar\u00eancia, pois este tutorial trata da funcionalidade e do trabalho com a nossa API. Voc\u00ea \u00e9 quem decide se quer deix\u00e1-lo bonito e oferecer uma experi\u00eancia do usu\u00e1rio melhor.<\/p>\n

Na CLI do Angular, execute o seguinte comando:<\/p>\n

ng new couchbase-angular-blog-app<\/pre>\n
O comando acima criar\u00e1 um novo projeto no caminho da CLI. Com o projeto criado, precisaremos criar um componente para cada uma das p\u00e1ginas esperadas do aplicativo.<\/p>\n
Execute o seguinte com a CLI do Angular:<\/p>\n
ng g component login\r\nng g component register\r\nng g component blogs\r\nng g component blog<\/pre>\n
Ser\u00e3o criados quatro componentes de perfil de usu\u00e1rio do Angular, cada um com arquivos TypeScript e HTML apropriados. Antes de come\u00e7armos a adicionar l\u00f3gica a eles, precisamos uni-los para fins de navega\u00e7\u00e3o usando o modelo de perfil de usu\u00e1rio do Angular abaixo.<\/p>\n
Abra o arquivo\u00a0src\/app\/app.module.ts<\/strong> e inclua o seguinte:<\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { FormsModule } from '@angular\/forms';\r\nimport { HttpClientModule } from '@angular\/common\/http';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { LoginComponent } from '.\/login\/login.component';\r\nimport { RegisterComponent } from '.\/register\/register.component';\r\nimport { BlogsComponent } from '.\/blogs\/blogs.component';\r\nimport { BlogComponent } from '.\/blog\/blog.component';\r\nimport { RouterModule } from '@angular\/router';\r\n\r\nlet routes = [\r\n  { path: '', redirectTo: '\/login', pathMatch: 'full' }, \r\n  { path: 'login', component: LoginComponent }, \r\n  { path: 'register', component: RegisterComponent }, \r\n  { path: 'blogs', component: BlogsComponent }, \r\n  { path: 'blog', component: BlogComponent }\r\n];\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    LoginComponent,\r\n    RegisterComponent,\r\n    BlogsComponent,\r\n    BlogComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    FormsModule,\r\n    HttpClientModule,\r\n    RouterModule, \r\n    RouterModule.forRoot(routes)\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n
O c\u00f3digo acima foi criado pela CLI do Angular, no entanto, adicionamos algumas importa\u00e7\u00f5es de m\u00f3dulos principais e personalizados e os importamos junto com o rotas<\/code> no @NgModule<\/code> bloco.<\/p>\n
Para ativar nossa navega\u00e7\u00e3o, precisaremos atualizar um arquivo. Abra o arquivo\u00a0src\/app\/app.component.html<\/strong> e substitua todo o conte\u00fado pelo seguinte:<\/p>\n
<router-outlet><\/router-outlet><\/pre>\n
Neste ponto, o projeto de perfil de usu\u00e1rio tem uma configura\u00e7\u00e3o b\u00e1sica com o Angular.<\/p>\n
Vamos dar uma olhada no tratamento da cria\u00e7\u00e3o de perfis de usu\u00e1rio e no login com as informa\u00e7\u00f5es da conta.<\/p>\n
Manipula\u00e7\u00e3o de login e registro<\/h2>\n
A primeira tela que o usu\u00e1rio ver\u00e1 \u00e9 a tela de login. O objetivo aqui \u00e9 coletar um nome de usu\u00e1rio e uma senha, envi\u00e1-los \u00e0 API, obter um ID de sess\u00e3o como resposta e us\u00e1-lo em todas as p\u00e1ginas futuras do aplicativo.<\/p>\n
Abra o arquivo\u00a0src\/app\/login\/login.component.ts<\/strong> e inclua o seguinte c\u00f3digo TypeScript:<\/p>\n
import { Component, OnInit } from '@angular\/core';\r\nimport { HttpClient, HttpHeaders } from '@angular\/common\/http';\r\nimport { Router } from '@angular\/router'; \r\n\r\n@Component({\r\n  selector: 'app-login',\r\n  templateUrl: '.\/login.component.html',\r\n  styleUrls: ['.\/login.component.css']\r\n})\r\n\r\nexport class LoginComponent implements OnInit {\r\n\r\n  public input: any;\r\n\r\n  constructor(private http: HttpClient, private router: Router) {\r\n    this.input = {\r\n      'email': '',\r\n      'password': ''\r\n    };\r\n  }\r\n\r\n  ngOnInit(): void { }\r\n\r\n  public login() {\r\n    if (this.input.email && this.input.password) {\r\n      let headers = new HttpHeaders({ 'content-type': 'application\/json' });\r\n      this.http.post('https:\/\/localhost:3000\/login', JSON.stringify(this.input), { headers: headers })\r\n        .subscribe(result => \r\n          this.router.navigate(['\/blogs'], { 'queryParams': result })\r\n        );\r\n    }\r\n  }\r\n\r\n}<\/pre>\n
H\u00e1 algumas coisas importantes acontecendo no c\u00f3digo acima, portanto, vamos detalh\u00e1-lo.<\/p>\n
Nossa inten\u00e7\u00e3o \u00e9 vincular um objeto a um formul\u00e1rio na marca\u00e7\u00e3o HTML. Esse objeto ser\u00e1 o entrada<\/code> vari\u00e1vel. Na construtor<\/code> definimos cada propriedade poss\u00edvel como um valor vazio que ser\u00e1 refletido na interface do usu\u00e1rio.<\/p>\n
Quando o usu\u00e1rio decide fazer login, as informa\u00e7\u00f5es de cabe\u00e7alho apropriadas s\u00e3o definidas para a solicita\u00e7\u00e3o e o objeto \u00e9 enviado ao servidor. Se for bem-sucedida, a resposta ser\u00e1 um objeto com o ID da sess\u00e3o. Vamos pass\u00e1-lo para a pr\u00f3xima p\u00e1gina como um par\u00e2metro de consulta.<\/p>\n
A marca\u00e7\u00e3o HTML que combina com esse TypeScript \u00e9 encontrada no arquivo\u00a0src\/app\/login\/login.component.html<\/strong> e ele se parece com o seguinte:<\/p>\n
Entrar<\/h2>\n
 <\/p>\n