Reto: Mensaje personal en Solicitud de Amistad

Clase 58 de 63 • Curso de Angular 6 2018

Actualmente ya podemos agregar amigos y aceptar solicitudes de amistad. Pero hasta ahora, solo podemos introducir el correo del amigo que deseamos agregar, sin embargo sería bueno poder agregar un mensaje personal para que el contacto que lo reciba, pueda identificarte.

Entonces, hay que agregar ese nuevo input junto con el del email. Además, en el modal que se muestra al recibir la solicitud, desplegar el mensaje personal.

Alejandro Demetrio Cortez Alvarez

student•

Asi quedo!

Jeffry Davila

student•

Terminado.

Juan Diego Lopez Triana

student•

Solo puse un campo en el objeto que se envia al hacer la solicitud, y en el html poner un etiqueta para mostrar dicho mensaje.

const request = {
      timestamp: Date.now(),
      receiver_email: this.friendEmail,
      message: this.friendMessage,
      sender: this.user.uid,
      status: 'pending'
    }

Juan C Felizzola

student•

¡Muy bien!

Emerson Marin

student•

Me confundo en algunas partes!

Developer Resolve Studio

student•

Le agrege como atributo “message?: string” y cree el componente anidado en el modal. Así me quedo:

Walter Lensinas

student•

Listo!

codigo: https://github.com/wlensinas/platzinger-wl/tree/58-reto

Ezequiel Fabbroni

student•

Cesar Cadavid

student•

Home Component Html

<div class="col-md-12">
	<b>Enviale un saludo a tu amigo</b>
	<textarea [(ngModel)]="greetingRequest" class="form-control"></textarea>
</div>

Home Component ts

greetingRequest: string;

const request = {
  timestamp: Date.now(),
  receiver_email: this.friendEmail,
  sender: this.user.uid,
  status: 'pending',
  greeting: this.greetingRequest
};

Request Component Html

<div class="col-md-10">
  <div class="mb-3">
	<div><b>{{userRequestFriendship.nick}} </b></div>
	<div><small>{{userRequestFriendship.email}}</small></div>
	<div><small>Te ha enviado esta solicitud</small></div>
  </div>
  <div class="alert alert-primary" role="alert">
	<b>Te ha enviado este saludo</b>
	<p>{{currentRequest.greeting}}</p>
  </div>
</div>

WALTER RAUL CANCHAN HERMOZA

student•

![](

Diego ARTURO PAREDES CARRILLO

student•

Pedro Roberto Capriles Morales

student•

Cumpliendo con el reto

home.component.html

<div id="homeContainer">
    <div class="whiteBorderGlassBox">
        <div class="homeHeadContainer">
            <div class="row">
                <div class="col-md-auto">
                    <div class="avatarFrameOnline">
                        <img src="assets/img/generic_avatar.png" id="homeAvatarPicture" alt="Imagen de Perfil">
                    </div>
                </div>
                <div class="col">
                    <b>{{user.nick}}</b>
                    <div>
                        <span>{{user.status}}</span>
                        <br />
                        <span>
                            {{user.subnick}}
                        </span> <br />
                        <a (click)="logOut()">Logout</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="whiteContainerPadded margin-top-15">
        <div class="row">
            <div class="col">
                <input type="text" class="form-control" placeholder="Buscar Amigo" [(ngModel)]="query">
            </div>
            <div class="col-md-auto">
                <img src="assets/img/logo_live_add.png" alt="" class="icon" (click)="open(content)">
            </div>
        </div>
        <hr />
        <b *ngIf="user && user.friends">Amigos ({{user.friends.length}} / {{user.friends.length}})</b>
        <div *ngIf="user && user.friends">
            <div class="display-block margin-bottom-5">
                <app-contact class="col-md-12" *ngFor="let user of user.friends | search:query; let i = index"
                    [uid]="user"></app-contact>
            </div>
        </div>
    </div>
    <ng-template #content let-modal>
        <div class="modal-header">
            <h4 class="modal-title" id="modal-basic-title">Tienes una Solicitud</h4>
            <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="container">
                <div class="row">
                    <h4>Mensaje</h4>
                    <textarea class="form-control editor" [(ngModel)]="friendMessage"></textarea>
                </div>
                <div class="row">
                    <b>Ingresa el email de tu amigo</b>
                    <input type="email" class="form-control" placeholder="Email" [(ngModel)]="friendEmail"
                        (keyup.enter)="sendRequest()" />
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline-dark" (click)="sendRequest()">Guardar</button>
        </div>
    </ng-template>
</div>

home.component.ts en el metodo sendRequest()

  sendRequest() {
    const request = {
      timestamp: Date.now(),
      receiver_email: this.friendEmail,
      receiver_message:this.friendMessage,
      sender: this.user.uid,
      status: RequestStatus.Pending
    }

    this.requestService.createRequest(request).then(() => {
      alert("Solicitud Enviada");
    }).catch((error) => {
      alert("Hubo un error");
      console.log(error);
    });
  }

request.component.html

<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            Nueva Solicitud
            <a href="" class="closeButton" (click)="close()">x</a>
        </div>
        <div class="modal-body" style="height:auto;" *ngIf="friendRequest">
            <div class="row">
                <div class="col-md-3">
                    <img [src]="friendRequest.avatar || 'assets/img/generic_avatar.png'" alt="" class="img-fluid" />
                </div>
                <div class="col-md-9">
                    <b>{{friendRequest.nick}} </b>
                    <small>Te ha enviado esta solicitud</small>
                    <div *ngIf="currentRequest.receiver_message">
                        <h6>Mensaje en solicitud</h6>
                        <p>{{currentRequest.receiver_message}} </p>
                    </div>

                </div>
                <div *ngIf="currentRequest.receiver_message" class="col-md-12">

                </div>
                <hr />
                <div class="col-md-12">
                    <h4>Deseas agregar a esta persona?</h4>
                    <br />
                    <input type="radio" name="addToMsn" [(ngModel)]="shouldAdd" value="yes" id="add-yes">
                    <label for="add-yes">Si quiero agregarlo</label> <br />
                    <input type="radio" name="addToMsn" [(ngModel)]="shouldAdd" value="no" id="add-no">
                    <label for="add-no">No quiero agregarlo</label> <br />
                    <input type="radio" name="addToMsn" [(ngModel)]="shouldAdd" value="later" id="add-later">
                    <label for="add-later">Quiero agregar más tarde</label> <br />
                </div>

            </div>
        </div>
        <footer class="modal-footer">
            <button class="btn btn-primary" (click)="accept()">Ok</button>
            <button class="btn btn-default" (click)="close()">Cerrar</button>
        </footer>
    </div>
</div>

Edorta Rodríguez

student•

<div id="homeContainer">
  <div class="whiteBorderGlassBox">
    <div class="homeHeadContainer">
      <div class="row">
        <div class="col-md-auto">
          <div class="avatarFrameonline">
            <img src="assets/img/generic_avatar.png" id="homeAvatarPicture">
          </div>
        </div>
        <div class="col">
          <b>{{user.nick}}</b>
          <div>
            <span>{{user.status}}</span>
            <br/>
            <span>< Escribe un mensaje Personal ></span>
            <br/>
            <a (click)="logout()">Logout</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="whiteContainerPadded marto15">

    <div class="row">
      <div class="col">
        <input type="text" class="form-control" placeholder="Buscar Amigo" [(ngModel)]="query"/>
      </div>
      <div class="col-md-auto">
        <img (click)="open(content)" src="assets/img/logo_live_add.png" class="icon" alt="">
      </div>
    </div>
    <hr/>
    <b *ngIf="user && user.friends">Amigos ({{user.friends.length}} / {{user.friends.length}})</b>
    <div *ngIf="user&& user.friends">
      <div class="disblo marbo5">
        <app-contact class="col-md-12" *ngFor="let user of user.friends" [uid]="user"></app-contact>
      </div>
    </div>
  </div>
</div>


<ng-template #content let-modal>contac
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Agregar amigo</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div>
      <b>Ingresa Email de tu amigo</b>
      <input type="email" class="form-control" placeholder="email" [(ngModel)]="friendEmail">
      <textarea class="form-control marto15" [(ngModel)]="friendMessage" rows="3"></textarea>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="sendRequest()">Guardar</button>
  </div>
</ng-template>

import {Component, OnInit} from '@angular/core';
import {User} from "../../interfaces/user";
import {UserService} from "../../services/user.service";
import {AuthenticationService} from "../../services/authentication.service";
import {Router} from "@angular/router";
import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
import {RequestsService} from "../../services/requests.service";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  friends: User[];
  query: string;
  private user: User;
  closeResult: string;
  friendEmail: string;
  friendMessage: string;


  constructor(private userService: UserService, private authenticationService: AuthenticationService, private router: Router, private modalService: NgbModal, private requestService: RequestsService) {
    this.getUsers();
    this.getUserSession();
  }

  private getUsers() {
    this.userService.getUsers().valueChanges().subscribe((data: User[]) => {
      this.friends = data;
    }, (error) => {
      console.log(error);
    });
  }

  logout() {
    this.authenticationService.logout().then((data) => {
      alert('sesion cerrada');
      this.router.navigate(['login']);
    }).catch((error) => console.log());
  }

  ngOnInit() {
  }

  private getUserSession() {
    this.authenticationService.getStatus().subscribe((status) => {
      this.userService.getUserById(status.uid).valueChanges().subscribe(
        (user: User) => {
          this.user = user;
          if (this.user.friends) {
            this.user.friends = Object.values(this.user.friends);
            console.log(this.user);
          }
        },
        (error) => {
          console.log(error);
        })
    }, (error) => {
      console.log(error);
    })
  }


  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
    }, (reason) => {
    });
  }

  private sendRequest() {
    const request = {
      timestamp: Date.now(),
      receiver_email: this.friendEmail,
      sender: this.user.uid,
      friend_message: this.friendMessage,
      status: 'pending'
    }

    this.requestService.createRequest(request).then(() => alert('solicitud enviada')).catch(() => console.log('error'));

  }
}

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      Nueva Solicitud
      <a class="closeButton" (click)="close()">x</a>
    </div>
    <div class="modal-body" style="height: auto">
      <div class="row">
        <div class="col-md-3">
          <img src="assets/img/generic_avatar.png" class="img-fluid" />
        </div>
        <div class="col-md-9">
          <b>{{currentRequest.sender}}</b>
          <small>Te ha enviado esta solicitud</small>
          <textarea readonly class="form-control" id="exampleFormControlTextarea1" rows="3">{{currentRequest.friend_message}}</textarea>
        </div>
        <hr />
        <div class="col-md-12">
          <h4>Deseas agregar a esta persona?</h4>
          <br />
          <input type="radio" name="addToMsn" [(ngModel)]="shouldAdd" value="yes" id="add-yes"> <label for="add-yes">Si quiero agregarlo</label> <br />

          <input type="radio" name="addToMsn" [(ngModel)]="shouldAdd" value="no" id="add-no"> <label for="add-no">No quiero agregarlo</label> <br />

          <input type="radio" name="addToMsn" [(ngModel)]="shouldAdd" value="later" id="add-later"> <label for="add-later">Decido despuees</label> <br />
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <a class="btn btn-primary" (click)="accept()">Ok</a>
      <a class="btn btn-default" (click)="close()">Cerrar</a>
    </div>
  </div>
</div>

Luis Abdel Rangel Castro

student•

Luis Abdel Rangel Castro

student•

<div class="col-md-10">
  <div class="mb-3">
	<div><b>{{userRequestFriendship.nick}} </b></div>
	<div><small>{{userRequestFriendship.email}}</small></div>
	<div><small>Te ha enviado esta solicitud</small></div>
  </div>
  <div class="alert alert-primary" role="alert">
	<b>Te ha enviado este saludo</b>
	<p>{{currentRequest.greeting}}</p>
  </div>
</div>

<div id="homeContainer">
    <div class="whiteBorderGlassBox">
        <div class="homeHeadContainer">
            <div class="row">
                <div class="col-md-auto">
                    <div class="avatarFrameOnline">
                        <img src="assets/img/generic_avatar.png" id="homeAvatarPicture" alt="Imagen de Perfil">
                    </div>
                </div>
                <div class="col">
                    <b>{{user.nick}}</b>
                    <div>
                        <span>{{user.status}}</span>
                        <br />
                        <span>
                            {{user.subnick}}
                        </span> <br />
                        <a (click)="logOut()">Logout</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="whiteContainerPadded margin-top-15">
        <div class="row">
            <div class="col">
                <input type="text" class="form-control" placeholder="Buscar Amigo" [(ngModel)]="query">
            </div>
            <div class="col-md-auto">
                <img src="assets/img/logo_live_add.png" alt="" class="icon" (click)="open(content)">
            </div>
        </div>
        <hr />
        <b *ngIf="user && user.friends">Amigos ({{user.friends.length}} / {{user.friends.length}})</b>
        <div *ngIf="user && user.friends">
            <div class="display-block margin-bottom-5">
                <app-contact class="col-md-12" *ngFor="let user of user.friends | search:query; let i = index"
                    [uid]="user"></app-contact>
            </div>
        </div>
    </div>
    <ng-template #content let-modal>
        <div class="modal-header">
            <h4 class="modal-title" id="modal-basic-title">Tienes una Solicitud</h4>
            <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="container">
                <div class="row">
                    <h4>Mensaje</h4>
                    <textarea class="form-control editor" [(ngModel)]="friendMessage"></textarea>
                </div>
                <div class="row">
                    <b>Ingresa el email de tu amigo</b>
                    <input type="email" class="form-control" placeholder="Email" [(ngModel)]="friendEmail"
                        (keyup.enter)="sendRequest()" />
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-outline-dark" (click)="sendRequest()">Guardar</button>
        </div>
    </ng-template>
</div>

  sendRequest() {
    const request = {
      timestamp: Date.now(),
      receiver_email: this.friendEmail,
      receiver_message:this.friendMessage,
      sender: this.user.uid,
      status: RequestStatus.Pending
    }

    this.requestService.createRequest(request).then(() => {
      alert("Solicitud Enviada");
    }).catch((error) => {
      alert("Hubo un error");
      console.log(error);
    });
  }

<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            Nueva Solicitud
            <a href="" class="closeButton" (click)="close()">x</a>
        </div>
        <div class="modal-body" style="height:auto;" *ngIf="friendRequest">
            <div class="row">
                <div class="col-md-3">
                    <img [src]="friendRequest.avatar || 'assets/img/generic_avatar.png'" alt="" class="img-fluid" />
                </div>
                <div class="col-md-9">
                    <b>{{friendRequest.nick}} </b>
                    <small>Te ha enviado esta solicitud</small>
                    <div *ngIf="currentRequest.receiver_message">
                        <h6>Mensaje en solicitud</h6>
                        <p>{{currentRequest.receiver_message}} </p>
                    </div>

                </div>
                <div *ngIf="currentRequest.receiver_message" class="col-md-12">

                </div>
                <hr />
                <div class="col-md-12">
                    <h4>Deseas agregar a esta persona?</h4>
                    <br />
                    <input type="radio" name="addToMsn" [(ngModel)]="shouldAdd" value="yes" id="add-yes">
                    <label for="add-yes">Si quiero agregarlo</label> <br />
                    <input type="radio" name="addToMsn" [(ngModel)]="shouldAdd" value="no" id="add-no">
                    <label for="add-no">No quiero agregarlo</label> <br />
                    <input type="radio" name="addToMsn" [(ngModel)]="shouldAdd" value="later" id="add-later">
                    <label for="add-later">Quiero agregar más tarde</label> <br />
                </div>

            </div>
        </div>
        <footer class="modal-footer">
            <button class="btn btn-primary" (click)="accept()">Ok</button>
            <button class="btn btn-default" (click)="close()">Cerrar</button>
        </footer>
    </div>
</div>

<div id="homeContainer">
  <div class="whiteBorderGlassBox">
    <div class="homeHeadContainer">
      <div class="row">
        <div class="col-md-auto">
          <div class="avatarFrameonline">
            <img src="assets/img/generic_avatar.png" id="homeAvatarPicture">
          </div>
        </div>
        <div class="col">
          <b>{{user.nick}}</b>
          <div>
            <span>{{user.status}}</span>
            <br/>
            <span>< Escribe un mensaje Personal ></span>
            <br/>
            <a (click)="logout()">Logout</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="whiteContainerPadded marto15">

    <div class="row">
      <div class="col">
        <input type="text" class="form-control" placeholder="Buscar Amigo" [(ngModel)]="query"/>
      </div>
      <div class="col-md-auto">
        <img (click)="open(content)" src="assets/img/logo_live_add.png" class="icon" alt="">
      </div>
    </div>
    <hr/>
    <b *ngIf="user && user.friends">Amigos ({{user.friends.length}} / {{user.friends.length}})</b>
    <div *ngIf="user&& user.friends">
      <div class="disblo marbo5">
        <app-contact class="col-md-12" *ngFor="let user of user.friends" [uid]="user"></app-contact>
      </div>
    </div>
  </div>
</div>


<ng-template #content let-modal>contac
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Agregar amigo</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div>
      <b>Ingresa Email de tu amigo</b>
      <input type="email" class="form-control" placeholder="email" [(ngModel)]="friendEmail">
      <textarea class="form-control marto15" [(ngModel)]="friendMessage" rows="3"></textarea>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="sendRequest()">Guardar</button>
  </div>
</ng-template>

import {Component, OnInit} from '@angular/core';
import {User} from "../../interfaces/user";
import {UserService} from "../../services/user.service";
import {AuthenticationService} from "../../services/authentication.service";
import {Router} from "@angular/router";
import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
import {RequestsService} from "../../services/requests.service";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  friends: User[];
  query: string;
  private user: User;
  closeResult: string;
  friendEmail: string;
  friendMessage: string;


  constructor(private userService: UserService, private authenticationService: AuthenticationService, private router: Router, private modalService: NgbModal, private requestService: RequestsService) {
    this.getUsers();
    this.getUserSession();
  }

  private getUsers() {
    this.userService.getUsers().valueChanges().subscribe((data: User[]) => {
      this.friends = data;
    }, (error) => {
      console.log(error);
    });
  }

  logout() {
    this.authenticationService.logout().then((data) => {
      alert('sesion cerrada');
      this.router.navigate(['login']);
    }).catch((error) => console.log());
  }

  ngOnInit() {
  }

  private getUserSession() {
    this.authenticationService.getStatus().subscribe((status) => {
      this.userService.getUserById(status.uid).valueChanges().subscribe(
        (user: User) => {
          this.user = user;
          if (this.user.friends) {
            this.user.friends = Object.values(this.user.friends);
            console.log(this.user);
          }
        },
        (error) => {
          console.log(error);
        })
    }, (error) => {
      console.log(error);
    })
  }


  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
    }, (reason) => {
    });
  }

  private sendRequest() {
    const request = {
      timestamp: Date.now(),
      receiver_email: this.friendEmail,
      sender: this.user.uid,
      friend_message: this.friendMessage,
      status: 'pending'
    }

    this.requestService.createRequest(request).then(() => alert('solicitud enviada')).catch(() => console.log('error'));

  }
}

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      Nueva Solicitud
      <a class="closeButton" (click)="close()">x</a>
    </div>
    <div class="modal-body" style="height: auto">
      <div class="row">
        <div class="col-md-3">
          <img src="assets/img/generic_avatar.png" class="img-fluid" />
        </div>
        <div class="col-md-9">
          <b>{{currentRequest.sender}}</b>
          <small>Te ha enviado esta solicitud</small>
          <textarea readonly class="form-control" id="exampleFormControlTextarea1" rows="3">{{currentRequest.friend_message}}</textarea>
        </div>
        <hr />
        <div class="col-md-12">
          <h4>Deseas agregar a esta persona?</h4>
          <br />
          <input type="radio" name="addToMsn" [(ngModel)]="shouldAdd" value="yes" id="add-yes"> <label for="add-yes">Si quiero agregarlo</label> <br />

          <input type="radio" name="addToMsn" [(ngModel)]="shouldAdd" value="no" id="add-no"> <label for="add-no">No quiero agregarlo</label> <br />

          <input type="radio" name="addToMsn" [(ngModel)]="shouldAdd" value="later" id="add-later"> <label for="add-later">Decido despuees</label> <br />
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <a class="btn btn-primary" (click)="accept()">Ok</a>
      <a class="btn btn-default" (click)="close()">Cerrar</a>
    </div>
  </div>
</div>

Reto: Mensaje personal en Solicitud de Amistad

Introducción

Qué aprenderás sobre Angular 6

Introducción a Angular

Configurando nuestro proyecto en Git y Github

Introducción a Angular CLI y al proyecto de Platzinger

Instalación del entorno de desarrollo en Mac OS

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

Corriendo nuestra app en el navegador

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

Definición de la estructura del App

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

Explorando el sistema de archivos

¿Qué son y cómo generar los primeros componentes de nuestra app?

Navegación básica entre componentes

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

Reto: Varias conversaciones a la vez

Basics de Angular y TypeScript

¿Cómo usar tipos de datos con TypeScript?

Qué son las interfaces de TypeScript y su implementación

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios desde Conversation.ts

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Pipes en Angular (date, number, json)

Creando nuestro propio pipe para buscar entre nuestros contactos

Estilos

¿Cómo usar estilos CSS y referenciar recursos?

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

Reto: Cambiar ícono según estatus

Implementando estilos en la pantalla de login

Terminando de implementar los estilos de nuestra pantalla de login

Implementando estilos en el navbar

Implementando estilos en la pantalla de home

Implementando estilos en home, lista de contactos

Implementando estilos en profile

Reto: Estilos en la pantalla de conversación

Usando ngClass para añadir estilos dinámicos

Reto: Mejorar estilos en la pantalla de conversación

Acceso a datos remotos y login

¿Qué es Firebase? Creando nuestro proyecto

Diferencia entre conexión por sockets y HTTP

Instalación y setup de la librería AngularFire a través de npm

Login/Registro de usuarios con email y password

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Guards para verificar Firebase auth

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Reto: Implementar API HTTP

Opciones y subida de imágenes

Perfil de usuario

Seleccionar fotos usando una librería para image cropping

Guardando las imágenes de perfil en nuestra base de datos de firebase

Conversación

¿Cómo resolver el problema de comunicación en tiempo real?

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Reto: Envía una foto

Amigos

Planeación previa para la característica, ¿cómo generaremos las solicitudes?

Enviando una solicitud de amistad

Generando el modal de solicitud de amistad

Aceptando solicitudes de amistad

Mostrando sólo contactos que son amigos

Componentes anidados (con paso de parámetros)

Reto: Mensaje personal en Solicitud de Amistad

Deploy

Creando un wrapper para desktop, usando Electron

Reto: Dándole Características PWA a nuestra App

Exportando app para web, complementando con Firebase Hosting

Conclusión

Conclusión

Cuéntanos