Creación e implementación de endpoints en Firebase

Si les genera el siguiente error para los metodos get de los servicios:

Type ‘Observable<{ key?: string | undefined; name?: string; country?: Country; players?: Player[]; $key: string | null; }[]>’ is not assignable to type ‘Observable<Team[]>’.
Type ‘{ key?: string | undefined; name?: string; country?: Country; players?: Player[]; $key: string | null; }[]’ is not assignable to type ‘Team[]’.
Type ‘{ key?: string | undefined; name?: string; country?: Country; players?: Player[]; $key: string | null; }’ is not assignable to type ‘Team’.
Property ‘name’ is optional in type ‘{ key?: string | undefined; name?: string; country?: Country; players?: Player[]; $key: string | null; }’ but required in type ‘Team’.

Para solucionarlo deben agregar ‘as Team’ (en este caso), si sucede con el servicio de Player agregar ‘as Player’ de la siguiente manera:

Player Service:

getPlayers(): Observable<Player[]> {
    return this.playerDb.snapshotChanges().pipe(
      map((changes) => {
        return changes.map(
          (c) =>
            ({
              $key: c.payload.key,
              ...c.payload.val(),
            } as Player)
        );
      })
    );
  }

Team Service:

getTeams(): Observable<Team[]> {
    return this.teamDb.snapshotChanges().pipe(
      map((changes) => {
        return changes.map(
          (c) =>
            ({
              $key: c.payload.key,
              ...c.payload.val(),
            } as Team)
        );
      })
    );
  }

Stack Overflow: https://stackoverflow.com/questions/54573563/type-key-string-is-not-assignable-to-type-product-angular-7/54592215#54592215

La solución la encontre gracias al usuario @silvana murgo más abajo en esta sección.

Cuando al decorator Injectablede los services le agregamos el atributo provideIn: 'root', no tenemos la necesidad de agregarlo en ningún modulo (en este caso el profesor lo agrego al módulo principal y aunque no hay inconveniente alguno con hacerlo, no lo debió hacer), porque este atributo hace que angular lo entienda como un service global y además que será singleton, es decir, sólo existirá una única instancia de ese service en la app.

Si queremos agregar en los providers de algún móldulo en específico, entonces le quitamos el provideIn: 'root' y ahora sí se debe declarar en el módulo.

Después de avanzar con la ruta de aprendizaje de Angular creo que tomaré el curso de Firebase. Me pareció interesante.

Para borrar un Player era suficiente

this.playersDb.remove(id)

Es redundate ejecutar

this.db.list('/players').remove(id)

Otra opción para crear el servicio dentro del directorio es ejecutarlo de la siguiente manera:

ng g service  /services/player.service

También podemos especificar la ruta donde se crean los servicies desde la terminal ,por ejemplo para que cree la carpeta services y lo ponga dentro

ng generate service services/-nombre del servicio-

o mejor aun, de forma simplificada

ng g s services/-nombre del servicio-

team.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Team } from '../interfaces/team';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

export const TeamTableHeaders = ['name', 'country', 'players'];

@Injectable({
  providedIn: 'root'
})
export class TeamService {
  private teamsDB: AngularFireList<Team>;

  constructor(private db: AngularFireDatabase) {
    this.teamsDB = this.db.list('/teams', ref => ref.orderByChild('name'));
  }

  getPlayers(): Observable<Team[]> {
    return this.teamsDB.snapshotChanges().pipe(
      map(changes => {
        return changes.map(c => ({ $key: c.payload.key, ...c.payload.val() }));
      })
    );
  }
  addTeam(team: Team) {
    return this.teamsDB.push(team);
  }

  deleteTeam(id: string) {
    this.db.list('/teams').remove(id);
  }

  editTeam(newPlayerData) {
    const $key = newPlayerData.$key;
    delete newPlayerData.$key;
    this.db.list('/teams').update($key, newPlayerData);
  }
}

player.service.ts

import { Injectable } from '@angular/core';
import { AngularFireList, AngularFireDatabase } from 'angularfire2/database';
import { Player } from '../interfaces/player';
import { Observable, observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class PlayerService {
  private playersDB: AngularFireList<Player>;

  constructor(private db: AngularFireDatabase) {
    this.playersDB = this.db.list('/players', ref => ref.orderByChild('name'));
  }
  getPlayers(): Observable<Player[]> {
    return this.playersDB.snapshotChanges().pipe(
      map(changes => {
        return changes.map(c => ({ $key: c.payload.key, ...c.payload.val() }));
      })
    );
  }

  addPlayer(player: Player) {
    return this.playersDB.push(player);
  }

  deletePlayer(id: string) {
    this.db.list('/players').remove(id);
  }

  editPlayer(newPlayerData) {
    const $key = newPlayerData.$key;
    delete newPlayerData.$key;
    this.db.list('/players').update($key, newPlayerData);
  }
}

Y no olvidar agregar los servicios al app.module.ts

providers: [PlayerService,TeamService],

No es necesario agregar el servicio en el modulo ya que al tener el decorator: @Injectable con providedIn: ‘root’ lo hace estar disponible para todos.

Si pones esto:

  getPlayers(): Observable<Player[]> {
    return this.playersDb.snapshotChanges().pipe(
      map(changes => {
        return changes.map(c => ({
          $key: c.payload.key, // AQUI EL ERROR en .key
          ...c.payload.val()
        }));
      })
    );
  }

te da un error por la propiedad.

tienes que ponerlo así:

  getPlayers(): Observable<Player[]> {
    return this.playersDb.snapshotChanges().pipe(
      map(changes => {
        return changes.map(c => ({
          $key: c.key,
          ...c.payload.val()
        }));
      })
    );
  }

De esa forma no les saldrá el error : Property ‘key’ does not exist on type ‘DatabaseSnapshot<Player>’.

No entendí mucho esta parte, me podrían recomendar alguna base o curso para entender esto a la perfección ?

Con ng g service services/player se crea la carpeta y los archivos a la vez

Porque al parametro ‘newPlayerData’ no se le pone el tipo de dato si hasta el momento todos lo que venimos trabajando como typescript es de esa manera ?

Esta es la solución los problemas que generan en la parte de getplayers por el key y la parte de editplayers.

<code>
getPlayers(): Observable<Team[]> {
    return this.teamsDB.snapshotChanges().pipe(
      map(changes => {
        return changes.map(c => ({ $key: c.key, ...c.payload.val() }as Team));
      })
    );
  }

…

<code>
editTeam( newPlayerData: any ) {
    const $key = newPlayerData.$key;
    delete newPlayerData.$key;
    this.db.list('/teams').update($key, newPlayerData);
  }

Cual es la finalidad de que te encante de intellisense de VSCODE si cuando tienes que importar una librería escribes todo el código primero y después la importas?, esto hace que alguien no experimentado con el framework que este siguiendo lo que haces se pierda POR FAVOR AMIGO

me perdì cuando habla del snapshot la key y el payload que realiza para el getPlayers… Alguno puede dar una explicaciòn ?

Este curso esta bastante flojo. Todas las clases se basan en:

• Copy and Past.
• Ir diciendo lo que se va tipiando.
• 0 Explicaciones.

ng g service /services/player
Para no tener que abrir la carpeta en una terminal

Tip: Crear un servicio por cada una de la lógica que se quiere aplicar en el proyecto y por medio de ellos entablar comunicación con los endpoints de la base de datos.

En angular 8 no hace falta colocarle el .service al nombre del servicio, Ya lo hace el por default

Me generó el siguiente error: Type ‘{ $key: string; }[]’ is not assignable to type ‘Player[]’ en el método getPlayers(), me funciono casteando a la clase Player.

getPlayers(): Observable<Player[]> {
return this.playersDb.snapshotChanges().pipe(
map((changes) => {
return changes.map(© => ({
$key: c.payload.key,
…c.payload.val(),
} as Player));
})
);
}

Qué son las <>?

Typescript | Que es Typescript y porque aprenderlo
https://www.youtube.com/watch?v=wXBl5tZm-OQ

Hola a 21 de septiembre de 2021 si intentan conectarse con firebase las cosas han cambiado un poco, para empezar se debe instalar firebase de la siguiente manera:

npm install firebase @angular/fire

y en el app.module.ts se debe imporar el AngularFireModule de esta manera:

import { AngularFireModule } from '@angular/fire/compat';

Entiendo que hay maneras mas pros de usar firebase pero esta solución permite que continue con el proyecto relativamente similar.

Saludos,

Alguien me puede explicar línea por líne qué se hace en getPlayer():

  getPlayers(): Observable<Player[]> {
    return this.playersDb.snapshotChanges().pipe(
      map(changes => {
        return changes.map(c => ({ $key: c.payload.key, ...c.payload.val()}));
      })
    );
  }

no entiendo qué hace el map y por qué se pasa como argumento en el pipe, además de qué significa <> en typescript

porque los 3 puntos antes de c.payload.val()?

en caso de** error TS7006**: el parámetro ‘xxx’ tiene implícitamente un tipo ‘any’

entrar al archivo tsconfig.json , poner el parámetro

"noImplicitAny": false,

abajo de compilerOptions.

Al implementar el método de getPlayers, obtengo un error, vsc me advierte que la propiedad key no existe en Databasesnapshot, alguien que me pueda ayudar en este problema

getPlayers(): Observable<Player[]> {
    return this.playersDB.snapshotChanges().pipe(
      map(changes => {
        return changes.map(c => ({ $key: c.payload.key, ...c.payload.val() }));
      })
    );
  }```

Estoy instalando firebase dentro de la carpeta de la aplicación, y después instalaré angularfirebase2 porque olvidé hacerlo al principio, espero que esto no afecte el proyecto si no me toca empezar desde cero

cual es la diferencia entre angularfire2 y angularfire ? que en la documentacion de angular encontre un paquete de angular con firebase que se importa distinto con @angular/fire

pueden utilizar ng g s services/player , para crear un servicio player dentro de una carpeta services(si no está creada, la creará).

No hay necesidad de crear la carpeta manualmente ni de entrar en ella para crear el servicio dentro de ella.
Con el siguiente comando si la carpeta no existe la crea y pone el servicio dentro de ella, si ya existe simplemente agrega el servicio dentro de ella.

ng g service services/player

Un angelito de la guarda caritativo que me pueda decir cual es la solucion

En caso de que comiencen a experimentar errores en esta parte del curso les doy un consejo, regresen a la clase donde instalamos los paquetes para poder utilizar firebase, en los comentarios te indican que la versión que se instaló al inicio necesita “actualizar” y si no lo hiciste, como yo que ignoró el comentario en su momento xd, posiblemente tengas problemas!

Sin tener que mover tanto en la terminal, el ng gautomáticamente crea lo que le solicitemos dentro de la carpeta app por lo tanto solo tenemos que indicar el comando de esta forma:

ng g service services/player