Información de todos los Pokemon

Clase 6 de 17 • Curso de React Native: Manejo de Listas y Consumo de APIs

Daniel Alejandro Contreras Martinez

student•

Otra manera que intente probar fue usando map, tuve algunos problemas pero con Promise.all se puede hacer de igual manera:

const pokemonsArray = await Promise.all(
        response.results.map(async (pokemon) => {
          const pokemonDetails = await getPokemonDetailsByUrlApi(pokemon.url);
          return {
            id: pokemonDetails.id,
            name: pokemonDetails.name,
            type: pokemonDetails.types[0].type.name,
            order: pokemonDetails.order,
            imagen:
              pokemonDetails.sprites.other["official-artwork"].front_default,
          };
        })
      );

Juan Camilo Rivas Molina

student•

Se me hizo raro que el profe no usara map

Jaime David Burbano Montoya

student•

Realmente para trabajar con bucles asíncronos es una mejor práctica y ayuda en performance hacer un for of, que usar un map

Jorge Isaac Villa Lopez

student•

dure varias horas buscando un error, pero me di cuenta que utilizaba "result" y era "results" me di cuenta al revisar el documento de las API, por es importante leer las recomendaciones del fabricante de la API https://pokeapi.co/docs/v2

Platzi Nauta

student•

Cierto, yo estoy realizando el proyecto con otra api y en ella listan cada result como 'items'.

Alfonso Andres Zapata Guzman

student•

Estas cosas no pasan con typescript. :v

No, en serio no pasan, yo estoy realizando el proyecto de esta manera y todo bien, es magnifico ver los errores directamente en VSC.

~ Que tal Platzinauta, ya conectamos en LinkedIn? ~

¡Que estas esperando! Conectemos en LinkedIn, GitHub, Medium, Redes sociales o unete al mejor servidor de Discord sobre Python y ciencia de datos en español.

Juan Valentin Perdomo Bonilla

student•

tuve un error bastante traumante ajajaja, en videos anteriores en pokedexNavegation, cambie el orden ,pokemon estaba de primero... asi que claro, la visualizacion era pokemon y no pokedex, no encontraba por que no me servia la consulta de api jajajaja es gracioso... y quizas alguien novato tambien le pase

David Alejandro Sequera Lievano

student•

No se está usando las excepciones de manera correcta, solo es necesario hacer handeling de una excepción una vez, es mala práctica devolver el mismo error.


async function  funcionFetch(){
	try{
		// hacer fetch de algo
	}
	catch(e){
      		throw e
		// mala practica
	}
}

Codigo de juego para que prueben

const fetch = require('node-fetch');
// funcion que pide algo no necesita que devuelvea el error
async function  funcionFetch(){
    const promise = fetch('Soy una url que no existe');
    const response = await promise;
    const data = await response.json();
    console.log(data);
}

// funcion que realmente maneja el error
async function errorFunction(){
    try{
        await funcionFetch()
    }
    catch(error){
        console.log("Vamo a calmarno");
    }
}

errorFunction();

aqui les dejo el código en node para que lo prueben

Raycris Maldonado

student•

Alguien tiene este error? undefined is not an object (evaluating 'o[Symbol.iterator]')

Raycris Maldonado

student•

El error se soluciono poniendole una s que me faltaba en el for await.

Antes lo tenia asi for await (const pokemon of response.result)

Despues de corregir el error: for await (const pokemon of response.results)

Odalis Dariel Abreu Mejia

student•

A mi me presenta este problema LOG Pokemons---> [] ERROR [TypeError: Cannot convert undefined value to object]

Con este bloque de codigo: const pokemonsArray = []; for await (const pokemon of response.result){ const pokemonDetails = await getPokemonsDetailsByUrlApi(pokemon.url); console.log(pokemonDetails);

Alguien me puede ayudar?

Daniel Rodriguez Davila

student•

first commit, jejejeje

Luis Fernando Pedroza Taborda

student•

Sip y la ventaja es que inicia git de manera automatica.

Luis Fernando Pedroza Taborda

student•

Interesante ejercicio, hay algunos conceptos que hay que repasar.

Erick Daniel Rivadeneira Obregon

student•

Hago todo lo que esta aquí y no me sale anda en consola, no se si este curso ya es bastante antiguo porque ya estamos en al versión 7 de React y algunas cosas no me sirven o son innecesarias hacerlas o hice algo más, en todo caso copie literal el codigo de al repo y no me funcionó tampoco si alguien tiene alguna solución o comentario constructivo se lo agradecería :)

Adolfo Sebastián Jara Gavilanes

student•

tenia el mismo porblema en mi caso fue el orden de los stack.screen en pokedexnavigation. orden correcto:

<Stack.Screen name="Pokedex" component={PokedexScreen} />
      <Stack.Screen name="Pokemon" component={Pokemon} />
```\<Stack.Screen name="Pokedex" component={PokedexScreen} />      \<Stack.Screen name="Pokemon" component={Pokemon} />

Daniel Briceño

student•

No es muy recomendable usar un loop con peticiones asíncronas, debido a que siempre se esperara a resolver una promesa antes de iterar a la siguiente vuelta del loop, en estos casos es mejor utilizar un Promise.all para resolverlas en paralelo y luego retornar un array de respuestas.

Ejemplo con Typescript y Axios.

import axios, { AxiosResponse } from "axios";

import { PokemonsResponseApi, PokemonApi } from "../models/pokemonApi.ts";
import { Pokemon } from "../models/pokemon.ts";
import { API_HOST } from "../utils/constants.ts";
import { getPokemonData } from "../utils/helpers.ts";

export const getPokemonsApi = async (
  limit: string | number | null = 20,
  offset: string | number | null = 0
): Promise<Pokemon[]> => {
  try {
    const url = `${API_HOST}/pokemon?limit=${limit}&offset=${offset}`;
    const response: AxiosResponse<PokemonsResponseApi> = await axios(url);
    const data: AxiosResponse<PokemonApi>[] = await Promise.all(
      response.data.results?.map((e) => axios.get(e.url))
    );
    const pokemonsApi: PokemonApi[] = [];
    data?.forEach((e) => pokemonsApi.push(e.data));

    const pokemons = pokemonsApi?.map((e) => getPokemonData(e));

    return pokemons;
  } catch (error) {
    throw error;
  }
};

import { PokemonApi } from "../models/pokemonApi";
import { Pokemon } from "../models/pokemon";

export const getPokemonData = (pokemon: PokemonApi): Pokemon => {
  return {
    id: pokemon.id,
    name: pokemon.name,
    hp: pokemon.stats[0].base_stat,
    strength: pokemon.stats[1].base_stat,
    defense: pokemon.stats[2].base_stat,
    speed: pokemon.stats[5].base_stat,
    height: pokemon.height,
    weight: pokemon.weight,
    img: pokemon.sprites.other["official-artwork"].front_default,
    types: pokemon.types.map((e) => e.type.name),
  };
};

Daniel Ochoa

student•

Valido tu punto de vista, pero depende del enfoque no es una mala práctica, si tu quieres ir viendo conforme vas cargando, lo mejor es hacerlo como indica el mentor, si lo que buscas es tener toda la información lo más rápido posible y renderizar cuando ya lo tengas todo es mejor usar en paralelo, todo tiene su momento y su lugar.

Gustavo Pú

student•

podemos utilizar variables de entornos💚

Stephano Apiolaza

student•

Buenas tardes, realice todo el codigo y lo revise con los recursos, y me arroja el siguiente error: ERROR [TypeError: undefined is not an object (evaluating 'pokemonDetails.type[0]')]

Espero poder tener alguna respuesta, gracias

Jhunior Eduardo Guevara Lázaro

student•

pusiste : ‘pokemonDetails.type[0]’ pero es en prural: ‘pokemonDetails.types[0]’

CESAR AUGUSTO TOBON CUARTAS

student•

[TypeError: Cannot convert undefined value to object]

Porque me sale este error al correr la app, y no me arroja la informacion de los pokemon.

jilma Jemimah Cavero de Arango

student•

Hola, tengo un problema, no logro visualizar con el console.log nada en la pantalla de la consola, a pesar de que no sale ningún error, limpia la solución, volví a cargar y nada. Alguién puede apoyarme con alguna otra opción ?

Francisco Antonio Rivera Viveros

student•

Hola jecma puede que haya un error en tú código te recomiendo usar la técnica del patito de hule !

Julian Andres Florez Rios

student•

Hola, es posible que tengas configurada tu consola para que no aparezca toda la información. Esto lo puedes cambiar dando click en esta opción y colocar predeterminado o información.

Sino, puede ser un error en tu código, coloca un alert en tu archivo JS para saber si está enlazado correctamente.

Jorge Arteaga

student•

En vez de "for" se podria usar "map" o es para usos distintos?

Agustín Navarro Galdon

teacher•

Un for no tiene por qué devolver nada, pero el map siempre debe devolver algo.

Tulio Junior Rangel Nuñez

student•

Para los que son fanáticos de Pokémon, sabrán que hay pokémon que tienen 2 tipos y lo lógico sería hacer esto:

types: [
				pokemonDetails.types[0].type.name,
				pokemonDetails.types[1].type.name,
]

Sin embargo, al haber pokémon que solo tienen un tipo la aplicación arrojará un error. Mi solución fue la siguiente:


types: [
            pokemonDetails.types[0].type.name,
            pokemonDetails.types.length > 1
              ? pokemonDetails.types[1].type.name
              : null,
          ],

Aunque esto hace los pokémon que tienen un solo tipo tengan un segundo tipo null. Si a alguien se le ocurre una mejor forma sería genial :D

María Antonia Lobato

student•

Hola, no salgo de ahí. He revisado y comparado el código con el del profe pero, me sigue saliendo ese error y no puedo avanzar. Ayuda porfa...: (

Hans Trauwitz

student•

sin ver tu codigo se me ocurre que el problema esta en el api => pokemon ahi en la función getPokemonApi declaramos url asi: const url = ${API_HOST}pokemon?limit=20&offset=0; por ahi deberia estar el problema , por que en tui liena 14 que es la otra funcion, estas usando url y es donde rompe espero te sirva

Jhunior Eduardo Guevara Lázaro

student•

no está bien estructurado tu url, tendrias que hacer un console.log(url) para ver que tiene dentro y así construirlo bien.

Federico Noya

student•

Se puede unificar el archivo de la API para hacerlo mas reutilizable.

export async function callApi(url) {
  try {
    const response = await fetch(url);
    const result = await response.json();
    return result;
  } catch (error) {
    throw error;
  }
}

export async function getPokemonsApi() {
  const url = `${API_HOST}/pokemon?limit=20&offset=0`;
  return fetchApi(url);
}

export async function getPokemonDetailsByUrlApi(url) {
  return fetchApi(url);
}

Kevin Parra Lopez

student•

Con Promise.all funciona mejor

  const getPokemons = async (filters) => {
    setData({ loading: false, data: [], error: null });

    //Intentamos obtener todos los pokemones usando el filtro especificado
    try {
      const response = await api.pokemons.getAllPokemons(filters);

      //Creamos una promesa para obtener los detalles de cada pokemon
      const pokemonResults = await Promise.all(
        response.results.map(async (pokemon) => {
          const getPokemonsDetails = await api.pokemons.getOnePokemon(
            pokemon.name
          );

          //Retornamos los detalles del pokemon en un objeto con los campos necesarios
          return {
            id: getPokemonsDetails.id,
            name: getPokemonsDetails.name,
            types: getPokemonsDetails.types[0],
            order: getPokemonsDetails.order,
            image: getPokemonsDetails.sprites.other.home.front_default,
          };
        })
      );

      //Actualizamos el estado con los datos obtenidos y cambiamos el loading a false para indicar que ya se completó la petición
      setData({ loading: false, data: pokemonResults });
    } catch (error) {
      //En caso de error mostramos el mensaje en la consola y actualizamos el estado con el error ocurrido
      console.error(error);
      setData({ loading: false, error });
    }
  };

Stephano Apiolaza

student•

Hola buenas, tengo todo el codigo como muestra el profesor, pero me arroja error; no puede encontrar la variable url.

jose daniel corredor zambrano

student•

Hola Stephano, esta funcion esla que esta en el archivo de la carpeta api, la que el profesor tienen nombrada como getPokemonsApi() fijate bien que este recibiendo la url bien en la tercera linea, y que estes usando las comillas francesas creo se llaman para poder concatenar los strings

export const getAllCharacters = async(page: number = 1): Promise<AllCHaracters | Error> => {
    try {
        const url = `${apiInfoUrl}/people/?page=${page}`
        const response = await fetch(url);
        const result = await response.json();
        return result;
    } catch (error) {
        throw error;
    }
}

const pokemonsArray = await Promise.all(
        response.results.map(async (pokemon) => {
          const pokemonDetails = await getPokemonDetailsByUrlApi(pokemon.url);
          return {
            id: pokemonDetails.id,
            name: pokemonDetails.name,
            type: pokemonDetails.types[0].type.name,
            order: pokemonDetails.order,
            imagen:
              pokemonDetails.sprites.other["official-artwork"].front_default,
          };
        })
      );

const fetch = require('node-fetch');
// funcion que pide algo no necesita que devuelvea el error
async function  funcionFetch(){
    const promise = fetch('Soy una url que no existe');
    const response = await promise;
    const data = await response.json();
    console.log(data);
}

// funcion que realmente maneja el error
async function errorFunction(){
    try{
        await funcionFetch()
    }
    catch(error){
        console.log("Vamo a calmarno");
    }
}

errorFunction();

<Stack.Screen name="Pokedex" component={PokedexScreen} />
      <Stack.Screen name="Pokemon" component={Pokemon} />
```\<Stack.Screen name="Pokedex" component={PokedexScreen} />      \<Stack.Screen name="Pokemon" component={Pokemon} />

import axios, { AxiosResponse } from "axios";

import { PokemonsResponseApi, PokemonApi } from "../models/pokemonApi.ts";
import { Pokemon } from "../models/pokemon.ts";
import { API_HOST } from "../utils/constants.ts";
import { getPokemonData } from "../utils/helpers.ts";

export const getPokemonsApi = async (
  limit: string | number | null = 20,
  offset: string | number | null = 0
): Promise<Pokemon[]> => {
  try {
    const url = `${API_HOST}/pokemon?limit=${limit}&offset=${offset}`;
    const response: AxiosResponse<PokemonsResponseApi> = await axios(url);
    const data: AxiosResponse<PokemonApi>[] = await Promise.all(
      response.data.results?.map((e) => axios.get(e.url))
    );
    const pokemonsApi: PokemonApi[] = [];
    data?.forEach((e) => pokemonsApi.push(e.data));

    const pokemons = pokemonsApi?.map((e) => getPokemonData(e));

    return pokemons;
  } catch (error) {
    throw error;
  }
};

import { PokemonApi } from "../models/pokemonApi";
import { Pokemon } from "../models/pokemon";

export const getPokemonData = (pokemon: PokemonApi): Pokemon => {
  return {
    id: pokemon.id,
    name: pokemon.name,
    hp: pokemon.stats[0].base_stat,
    strength: pokemon.stats[1].base_stat,
    defense: pokemon.stats[2].base_stat,
    speed: pokemon.stats[5].base_stat,
    height: pokemon.height,
    weight: pokemon.weight,
    img: pokemon.sprites.other["official-artwork"].front_default,
    types: pokemon.types.map((e) => e.type.name),
  };
};

export async function callApi(url) {
  try {
    const response = await fetch(url);
    const result = await response.json();
    return result;
  } catch (error) {
    throw error;
  }
}

export async function getPokemonsApi() {
  const url = `${API_HOST}/pokemon?limit=20&offset=0`;
  return fetchApi(url);
}

export async function getPokemonDetailsByUrlApi(url) {
  return fetchApi(url);
}

  const getPokemons = async (filters) => {
    setData({ loading: false, data: [], error: null });

    //Intentamos obtener todos los pokemones usando el filtro especificado
    try {
      const response = await api.pokemons.getAllPokemons(filters);

      //Creamos una promesa para obtener los detalles de cada pokemon
      const pokemonResults = await Promise.all(
        response.results.map(async (pokemon) => {
          const getPokemonsDetails = await api.pokemons.getOnePokemon(
            pokemon.name
          );

          //Retornamos los detalles del pokemon en un objeto con los campos necesarios
          return {
            id: getPokemonsDetails.id,
            name: getPokemonsDetails.name,
            types: getPokemonsDetails.types[0],
            order: getPokemonsDetails.order,
            image: getPokemonsDetails.sprites.other.home.front_default,
          };
        })
      );

      //Actualizamos el estado con los datos obtenidos y cambiamos el loading a false para indicar que ya se completó la petición
      setData({ loading: false, data: pokemonResults });
    } catch (error) {
      //En caso de error mostramos el mensaje en la consola y actualizamos el estado con el error ocurrido
      console.error(error);
      setData({ loading: false, error });
    }
  };

export const getAllCharacters = async(page: number = 1): Promise<AllCHaracters | Error> => {
    try {
        const url = `${apiInfoUrl}/people/?page=${page}`
        const response = await fetch(url);
        const result = await response.json();
        return result;
    } catch (error) {
        throw error;
    }
}

Información de todos los Pokemon

Inicializando la app

Creación del proyecto: PokeDex

Configuración de React Navigation

Diseñando la Tab navigation con iconos

Stack de navegación para Pokedex

API y listado de Pokemon

Consumo de APIs con fetch: PokeApi

Información de todos los Pokemon

Lista de Pokemon con FlatList

Renderizando la PokemonCard

Clasificación por colores y utilidades de Lodash

Infinite scrolling con FlatList

Añadiendo StyleSheet a la lista

Detalles del Pokemon

Vista y navegación al detalle del Pokemon

Consultando la API de detalles del Pokemon

Maquetación del Pokemon: header

Maquetación del Pokemon: sección de tipos

Maquetación del Pokemon: estadísticas

Maquetación del Pokemon: barra de navegación