Projecte PokeAPI

Descripció

Aquest projecte consisteix en desenvolupar una aplicació web que simula una Pokédex dins d'una Nintendo DS Lite. L'aplicació permet consultar informació detallada sobre els diferents Pokémon mitjançant l'ús de l'API pública PokeAPI.

Objectius originals

• Crear una pàgina web que mostri informació d'elements d'una API pública
• Implementar un selector desplegable amb elements de l'API
• Mostrar informació detallada de l'element seleccionat
• Utilitzar HTML, CSS i JavaScript per una presentació clara
• Implementar peticions amb fetch i axios

Objectius dels requisits adaptats

• Obtenir el Pokémon de la Pokédex de Sinnoh (Platinum)
• Mostrar informació detallada de cada Pokémon (ID, nom, tipus, estadístiques, etc.)
• Implementar efectes visuals i animacions
• Afegir so i música de fons

Tecnologies utilitzades

• HTML5: Estructura de la pàgina
• CSS3: Estilització i animacions
• JavaScript: Interactivitat i comunicació amb l'API
• Bootstrap: Components i utilitats CSS

Implementació de les funcions principals

Càrrega de la llista de Pokémon

async function cargarListaPokemon() {
        try {
        const respuesta = await fetch('https://pokeapi.co/api/v2/pokedex/6/');
        const datos = await respuesta.json();
        const pokemonEntries = datos.pokemon_entries;
        
        pokemonEntries.sort((a, b) => a.entry_number - b.entry_number);
        // ... Més codi per processar les dades
        } catch (error) {
        console.error('Error carregant la llista de Pokémon:', error);
        }
    }

Aquesta funció utilitza la Fetch API per obtenir la llista de Pokémon de la Pokédex de Sinnoh (Platinum). La resposta es processa en format JSON i les entrades de Pokémon es classifiquen per número de Pokédex.

Per què utilitzar Fetch API? La Fetch API és una interfície moderna i senzilla per fer peticions HTTP. És més fàcil d'utilitzar que XMLHttpRequest i suporta promeses, el que permet escriure codi asíncron de manera més clara i concisa.

Càrrega d'informació detallada

async function cargarPokemon(pokemonId) {
        try {
        const [datosEspecie, datosPokemon] = await Promise.all([
            fetch(`https://pokeapi.co/api/v2/pokemon-species/${pokemonId}/`).then(r => r.json()),
            fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}/`).then(r => r.json())
        ]);
        
        const nombreEspanol = datosEspecie.names.find(n => n.language.name === "es")?.name;
        // ... Més codi per mostrar la informació
        } catch (error) {
        console.error('Error loading Pokémon:', error);
        }
    }

Aquesta funció utilitza la Fetch API amb Promise.all per obtenir simultàniament les dades de l'espècie i del Pokémon. Això permet mostrar informació detallada com el nom en espanyol, tipus, estadístiques, etc.

Per què utilitzar async/await? L'ús de async/await fa que el codi asíncron sigui més llegible i fàcil de mantenir. Permet escriure codi que sembla síncron, però que en realitat és asíncron, el que facilita la gestió de les promeses.

Reproducció de so

function reproducirSonidoPokemon(pokemonId, pokemonName) {
        const audioElement = new Audio();
        let audioUrl = `https://play.pokemonshowdown.com/audio/cries/${pokemonName.toLowerCase()}.ogg`;
        const fallbackUrl = `https://play.pokemonshowdown.com/audio/cries/${pokemonId}.ogg`;
        
        audioElement.src = audioUrl;
        audioElement.onerror = function() {
        audioElement.src = fallbackUrl;
        audioElement.play().catch(e => console.log('Error:', e));
        };
        audioElement.play().catch(e => console.log('Error:', e));
    }

Aquesta funció reprodueix el crit característic de cada Pokémon. Si la URL principal falla, es fa servir una URL alternativa. Això assegura que sempre es reprodueixi un so per al Pokémon seleccionat.

Per què utilitzar l'objecte Audio? L'objecte Audio proporciona una manera senzilla de reproduir sons en una pàgina web. És compatible amb la majoria dels navegadors moderns i permet gestionar errors de càrrega de manera eficient.

Utilització d'axios

async function cargarPokemon(pokemonId) {
        try {
        const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${pokemonId}/`);
        const datosPokemon = response.data;
        
        // Processar les dades del Pokémon
        // ...
        } catch (error) {
        console.error('Error carregant el Pokémon:', error);
        }
    }

Aquesta funció utilitza la llibreria axios per fer una petició GET a l'API de Pokémon. Axios simplifica les peticions HTTP i gestiona automàticament la conversió de la resposta a JSON.

Per què utilitzar axios? Axios és una llibreria popular per fer peticions HTTP que ofereix una API més senzilla i funcionalitats addicionals com la gestió automàtica de JSON, interceptors de peticions/respostes i suport per a peticions cancel·lables.

Utilització de XMLHttpRequest

function cargarPokemonConXHR(pokemonId) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', `https://pokeapi.co/api/v2/pokemon/${pokemonId}/`);
        xhr.onload = function() {
        if (xhr.status === 200) {
            const datosPokemon = JSON.parse(xhr.responseText);
            
            // Processar les dades del Pokémon
            // ...
        } else {
            console.error('Error carregant el Pokémon:', xhr.status);
        }
        };
        xhr.send();
    }

Aquesta funció utilitza XMLHttpRequest per fer una petició GET a l'API de Pokémon. Tot i que és una tècnica més antiga, és útil per comprendre com funcionen les peticions HTTP a baix nivell.

Per què utilitzar XMLHttpRequest? XMLHttpRequest és una API més antiga però encara funcional per fer peticions HTTP. És útil per comprendre els fonaments de les peticions HTTP i per compatibilitat amb navegadors més antics.