Creando un servicio de usuarios e inyectando el servicio en nuestros pages

Clase 18 de 57 • Curso de Ionic Avanzado 2017

Contenido del curso

Introducción a Ionic

Estructura de nuestra App con Ionic

Basics de Angular y TypeScript

Agregando estilos con CSS a nuestra aplicación

Acceso a datos remotos

Opciones y Acceso Nativo

Conversación

Amigos

Deploy

Contenido Bonus

Tomar examen

Comentarios

Ninoska Patricia Peñaloza Monzon

student•

Me apena mucho ver este tipo de contenidos, se supone que el curso es de IONIC, no quiero imaginar como será el contenido de los otros cursos.

Winston Chavez

student•

Hola a todos. Es muy atractivo para los millenials que llegabamos del cole a enviar zumbidos por messenger. Sin duda el curso esta dirigido para desarrolladores que tienen experiencia con angular, y con su CLI. Aca estan los comandos generate disponibles para ionic.

Winston Chavez

student•

el comando “ionic generate provider user”, va a generar una carpeta dentro de src llamada providers. Tendra esta estructura src/providers/user/user.ts.

Juan C Felizzola

student•

conversation.ts

export class ConversationPage {
  friendId: any;
  friends: User[];
  friend: User;

  constructor(public navCtrl: NavController, public navParams: NavParams,
              private userService: UserService) {
    this.friendId = this.navParams.get('id');
    console.log(this.friendId);

    this.friends = this.userService.getFriends();

    this.friend = this.friends.find( (record) => {
      return record.uid == this.friendId;
    });
    console.log(this.friend);
  }
  goBack() {
    this.navCtrl.pop();
  }
}

Carolina Araya

student•

Me perdi lo del navParams

Juan Roberto Paz Ramos

student•

Me pueden ayudar con este error

Juan Roberto Paz Ramos

student•

Ya lo pude resolver

Diego Forero

Team Platzi•

Es útil que comentes como lo solucionaste, otro compañero puede tener el mismo error y tu solución le puede ayudar.

Jose Manuel Bobadilla Rivera

student•

ionic generate service services/user en ionic 5.2.4

Juan Roberto Paz Ramos

student•

Tengo ese error y nos como solucionarlo me pueden ayudar.

Eduardo de la Cruz Ibarra

teacher•

Hola! Cuál es el error que tienes?

Juan Roberto Paz Ramos

student•

Carlos Uriel de Jesus Sánchez González

student•

ionic generate provider nombre

Luis Morrison

student•

Hola! así es como he pasado el ejemplo en Angular a Ionic 3 usando menos variables. Correcciones bienvenidas!

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ConversationPage } from '../conversation/conversation';
import { LoginPage } from '../login/login';
import { User } from '../../interfaces/user';
import { UserProvider } from '../../providers/user';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  friends: User[];
  constructor(public navCtrl: NavController, private userProvider: UserProvider) {
    this.friends = this.userProvider.getFriendsList();
  }

  viewConversation(user: User) {
    this.navCtrl.push(ConversationPage, {'user': user});
  }

  viewLogin() {
    this.navCtrl.push(LoginPage);
  }
}

conversation.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { User } from '../../interfaces/user';

@IonicPage()
@Component({
  selector: 'page-conversation',
  templateUrl: 'conversation.html',
})
export class ConversationPage {
  user: User;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.user = this.navParams.get('user');
  }

  goBack() {
    this.navCtrl.pop();
  }
}

conversation.html (en progreso)

<ion-header>
  <ion-navbar>
    <ion-title>{{user.nickname}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="goBack()">Regresar</button>
</ion-content>

Luis Morrison

student•

providers/user.ts

import { Injectable } from '@angular/core';
import { User } from '../interfaces/user';

@Injectable()
export class UserProvider {
  friends: User[];
  constructor() {
    this.friends = [
      {
        uid: 101,
        nickname: 'Foo',
        subnick: 'Bar',
        age: 25,
        email: 'foobar@example.com',
        isFriend: true
      },
      // ...
      // ... y así más usuarios ...
      // ...
    ];
  }

  getFriendsList() {
    return this.friends;
  }
}

Carolina Araya

student•

Hola!! No me esta resultando el metodo find, estoy con ionic, claro… Tengo escrito lo mismo pero cuando doy clic en un user me imprime en la consola undefined. Lo he provado con console.log(this.friends) y si me los imprime…

Albert Jiménez

student•

Aqui te explican los proveedores en Ionic 3

Albert Jiménez

student•

No olvides agregar en app.Module:
import { HttpModule } from ‘@angular/http’;
y en imports:

  imports: [
    BrowserModule,
    HttpModule,

Yoriel Martinez Luis

student•

Hola amigos y profesores:

quisiera hacerles una consulta. Cuando ejecuto el codigo, me da este error:

core.js:1449 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[UserConexionProvider -> HttpClient]:
StaticInjectorError(Platform: core)[UserConexionProvider -> HttpClient]:
NullInjectorError: No provider for HttpClient!
Error: StaticInjectorError(AppModule)[UserConexionProvider -> HttpClient]:
StaticInjectorError(Platform: core)[UserConexionProvider -> HttpClient]:
NullInjectorError: No provider for HttpClient!

Quisiera saber si es que me falta el plugin de HttpClient por instalar. Les agradezco de antemano.

Platzi Usuario 29

student•

Hola.

Debes agregar httpClientModule a tu app.module.ts

Ricardo Asin

student•

No entiendo nada

Joso Perezgrovas Martinez

student•

Lo que pasa es que esta parte del curso es compartida con el curso de Angular y no funciona igual con ionic 3 (tal vez con ionic 4 si, pero yo no pude hacer que me creara un proyecto nuevo). A mi también me costó un buen de trabajo, pero encontré este video en youtube, tal vez te ayude:

Ricardo Asin

student•

Muchisimas Gracias!!

Luis Rodriguez

student•

http://recordit.co/SKovuPzRN9

Luis Rodriguez

student•

Acá mi código con un poco de artículos externos. Estoy usando Ionic 4.

home.page.html <ion-header> <ion-toolbar> <ion-title> Directorio </ion-title> </ion-toolbar> </ion-header>

<ion-content> <ion-searchbar [formControl]="searchControl" ></ion-searchbar> <div *ngIf="searching" > </div> <ion-list> <ion-item *ngFor="let item of items"> {{ item.uid }} - {{ item.nick }} {{ item.subnick }} </ion-item> </ion-list> </ion-content>

user.services.ts
import { Injectable } from "@angular/core";
import { User } from "./interfaces/user.page"

@Injectable({
  providedIn: "root"
})
export class UserService {

  public items: User = [];
  constructor() {
    let usuario1: User = {
        nick: 'Luis',
        subnick: 'Rodriguez',
        age: 27,
        email: 'lfrodriguez06@gmail.com',
        friend: true,
        uid: 1
      };
      let usuario2: User = {
        nick: 'Gisse',
        subnick: 'Peralta',
        age: 26,
        email: 'g@gmail.com',
        friend: true,
        uid: 2
      };
      let usuario3: User = {
        nick: 'Aldo',
        subnick: 'Aguirre',
        age: 30,
        email: 'a@gmail.com',
        friend: false,
        uid: 3
      };
      let usuario4: User = {
        nick: 'Eddy',
        subnick: 'Rodriguez',
        age: 25,
        email: 'e@gmail.com',
        friend: false,
        uid: 4
      };
      let usuario5: User = {
        nick: 'Pablo',
        subnick: 'Rodriguez',
        age: 20,
        email: 'p@gmail.com',
        friend: true,
        uid: 5
      };
     this.items = [usuario1, usuario2,
                     usuario3, usuario4,
                     usuario5];
  }

  filterItems(searchTerm) {
    return this.items.filter(item => {
      return item.nick.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });

  }
}

directorio.page.ts
import { Component, OnInit } from '@angular/core';
import {User} from '../interfaces/users.page';
import { UserService } from '../services/user.service';
import { FormControl } from "@angular/forms";
import { debounceTime } from "rxjs/operators";


@Component({
  selector: 'app-directorio',
  templateUrl: 'directorio.page.html',
  styleUrls: ['directorio.page.scss']
})
export class DirectorioPage implements OnInit {
   public searchControl: FormControl;
   public items: User;

  constructor(private userService: UserService) {
    this.searchControl = new FormControl();
  }

  ngOnInit() {
    this.setFilteredItems("");

    this.searchControl.valueChanges
      .pipe(debounceTime(0))
      .subscribe(search => {
        this.setFilteredItems(search);
      });
  }

  setFilteredItems(searchTerm) {
    this.items = this.userService.filterItems(searchTerm);
  }
}

Michael Stiduar Quiñones Jaimes

student•

los archivos del repositorio estan mal para la clase en que vamos para el presente video, tienen un pesimo orden en cuanto a los videos y los archivos de ayuda

Jonathan Rodriguez Osorio

student•

Para la versión Ionic 5.2.4 si tienen problemas filtrando el user por uid

constructor(private activatedRoute: ActivatedRoute, private userService:UserService) {
    this.friendId = this.activatedRoute.snapshot.params['uid'];
    this.friends=this.userService.getFriends();
    this.friend=this.friends.find(x=>x.uid==this.friendId);
    console.log(this.friend);
  }```

export class ConversationPage {
  friendId: any;
  friends: User[];
  friend: User;

  constructor(public navCtrl: NavController, public navParams: NavParams,
              private userService: UserService) {
    this.friendId = this.navParams.get('id');
    console.log(this.friendId);

    this.friends = this.userService.getFriends();

    this.friend = this.friends.find( (record) => {
      return record.uid == this.friendId;
    });
    console.log(this.friend);
  }
  goBack() {
    this.navCtrl.pop();
  }
}

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ConversationPage } from '../conversation/conversation';
import { LoginPage } from '../login/login';
import { User } from '../../interfaces/user';
import { UserProvider } from '../../providers/user';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  friends: User[];
  constructor(public navCtrl: NavController, private userProvider: UserProvider) {
    this.friends = this.userProvider.getFriendsList();
  }

  viewConversation(user: User) {
    this.navCtrl.push(ConversationPage, {'user': user});
  }

  viewLogin() {
    this.navCtrl.push(LoginPage);
  }
}

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { User } from '../../interfaces/user';

@IonicPage()
@Component({
  selector: 'page-conversation',
  templateUrl: 'conversation.html',
})
export class ConversationPage {
  user: User;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.user = this.navParams.get('user');
  }

  goBack() {
    this.navCtrl.pop();
  }
}

import { Injectable } from '@angular/core';
import { User } from '../interfaces/user';

@Injectable()
export class UserProvider {
  friends: User[];
  constructor() {
    this.friends = [
      {
        uid: 101,
        nickname: 'Foo',
        subnick: 'Bar',
        age: 25,
        email: 'foobar@example.com',
        isFriend: true
      },
      // ...
      // ... y así más usuarios ...
      // ...
    ];
  }

  getFriendsList() {
    return this.friends;
  }
}

user.services.ts
import { Injectable } from "@angular/core";
import { User } from "./interfaces/user.page"

@Injectable({
  providedIn: "root"
})
export class UserService {

  public items: User = [];
  constructor() {
    let usuario1: User = {
        nick: 'Luis',
        subnick: 'Rodriguez',
        age: 27,
        email: 'lfrodriguez06@gmail.com',
        friend: true,
        uid: 1
      };
      let usuario2: User = {
        nick: 'Gisse',
        subnick: 'Peralta',
        age: 26,
        email: 'g@gmail.com',
        friend: true,
        uid: 2
      };
      let usuario3: User = {
        nick: 'Aldo',
        subnick: 'Aguirre',
        age: 30,
        email: 'a@gmail.com',
        friend: false,
        uid: 3
      };
      let usuario4: User = {
        nick: 'Eddy',
        subnick: 'Rodriguez',
        age: 25,
        email: 'e@gmail.com',
        friend: false,
        uid: 4
      };
      let usuario5: User = {
        nick: 'Pablo',
        subnick: 'Rodriguez',
        age: 20,
        email: 'p@gmail.com',
        friend: true,
        uid: 5
      };
     this.items = [usuario1, usuario2,
                     usuario3, usuario4,
                     usuario5];
  }

  filterItems(searchTerm) {
    return this.items.filter(item => {
      return item.nick.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });

  }
}

directorio.page.ts
import { Component, OnInit } from '@angular/core';
import {User} from '../interfaces/users.page';
import { UserService } from '../services/user.service';
import { FormControl } from "@angular/forms";
import { debounceTime } from "rxjs/operators";


@Component({
  selector: 'app-directorio',
  templateUrl: 'directorio.page.html',
  styleUrls: ['directorio.page.scss']
})
export class DirectorioPage implements OnInit {
   public searchControl: FormControl;
   public items: User;

  constructor(private userService: UserService) {
    this.searchControl = new FormControl();
  }

  ngOnInit() {
    this.setFilteredItems("");

    this.searchControl.valueChanges
      .pipe(debounceTime(0))
      .subscribe(search => {
        this.setFilteredItems(search);
      });
  }

  setFilteredItems(searchTerm) {
    this.items = this.userService.filterItems(searchTerm);
  }
}

constructor(private activatedRoute: ActivatedRoute, private userService:UserService) {
    this.friendId = this.activatedRoute.snapshot.params['uid'];
    this.friends=this.userService.getFriends();
    this.friend=this.friends.find(x=>x.uid==this.friendId);
    console.log(this.friend);
  }```

Creando un servicio de usuarios e inyectando el servicio en nuestros pages

Introducción a Ionic

Intro a Ionic Framework, Angular, Platzinger, y Ionic CLI

Instalación de Ionic y más herramientas en Mac OS

Instalación de Ionic y más herramientas de desarrollo en Windows

Estructura de nuestra App con Ionic

Arquitectura de una app en Ionic

Proyecto: Platzinger App

Repositorio del curso

Qué son pages y cómo generar las primeras de nuestra app

Navegación básica entre pages

Reto: Página “Acerca de” accesible desde el menú lateral

Tomando los conceptos compartidos de Angular y Ionic

Basics de Angular y TypeScript

Aclaraciones Ionic vs Angular

Cómo usar tipos de datos con typescript

Qué son e implementando interfaces de TypeScript

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios con conversation.ts