Loading repository data…
Loading repository data…
richirrim / repository
Plantilla PokedexUI. Este es la plantilla que se diseñara desde cero, sin frameworks y la cual reutilizaremos después para hacer consultas a la PokeApi y nutrir está hermosa Landing con todo ese contenido cool que nos devuelva la API.
La UI se diseñará de forma artesanal, así es, solo HTML y CSS. Es decir, cero frameworks css, todo desde cero. Después daremos vida a cada componente, que sirva de comunicación entre la interfaz y la API, con Vanilla JS y así obtener toda esa data que nutrirá de contenido a esta hermosa Landing Page Responsive.
🧡Si te interesa aprender a estructurar de forma good el HTML de tus proyectos web:
💙El maquetado CSS de forma good:
Y otras cosas muy nice de HTML Y CSS, Te veo en ❤️Tikokt pero si solo te interesa la parte de las peticiones con 💛Vanilla JS, simpleamente descargate el 🧰 proyecto que ya estara listo para que empieces tirar código como, si no, hubiera un mañana.
⚜️ El proyecto final se vera así:
Hay tres formas, la primera es clonando el repositorio a tu máquina local y es la que más vas usar en proyectos reales como web developer.
Antes de hacer un git clone te recomiendo que leas las tres formas de descarga una copia del proyecto.
Lo primero que debes de hacer es ir al repositorio del proyecto llamado pokedex-ui-template y copiar en enlace del proyecto.
Ahora abre un terminal en la ubicación donde guardes todos tus proyectos web y tipea el sig. comando: git clone https://github.com/richirrim/pokedex-ui-template.
Y listo tendrás una copia de este proyecto en tu máquina local. Ahora, sin miedo al éxito, puedes empezar a modificarlo a tu gusto.
Ahora, si eres un developer good, lo ideal seria que hicieras un Fork del proyecto y luego hicieras un git clone a ese Fork.
Ojito, los comando anteriores solo los puedes utilizar si tienes una cuenta en Github, Git instalado y configurado en tu PC. Ahora, si aún no estás usando Git, es buen momento para decirte que es una herramienta que se va a volver tu pan de cada día como Web Developer. Aparte es una skill muy solicitada por las empresas y que aporta un gran valor a tu perfil profesional.
Pero para no hacer mucho lío, te puedes descargar el proyecto sin necesidad de tener instalado Git o tener una cuenta en Github.
Solo sigue lo sig. pasos y podrás descargar todo el proyecto en formato ZIP.
Y ya, es todo c:
Sera una estructura muy básica pero organizada.
La PokeApi es una API consumption-only, es decir, solo nos permitirá hacer consultas de tipo GET. Y no requiere ningún tipo de autenticación para acceder a toda la información good.
Esta API te permitirá consultar la siguiente información:
Ojo👀: Todo los devuelto por esta API siempre seran en formato JSON.
Acontinuación te dejo la lista de endpoint que se prendenden implementar en este proyecto🐇.
GET https://pokeapi.co/api/v2/pokemon
Hacer una petición aun endpoint como este sin ningun parametro extra como un ID o nombre de Pokemon, devolvera una sola página, por defecto, con 20 elementos. Es decir, una lista con un limte de 20 Pokemon.
Este endpoint aparte de traer la lista de 20 Pokemon dentro del atributo results: [] 20 items, también devuelve la info. que nos permitira crear la páginación (next y previous) de nuestro proyecto.
{
"count": 1126,
"next": "https://pokeapi.co/api/v2/ability/?limit=20&offset=20",
"previous": null,
"results": [
{
"name": "bulbasaur",
"url": "https://pokeapi.co/api/v2/pokemon/1/",
},
{
"name": "ivysaur",
"url": "https://pokeapi.co/api/v2/pokemon/2/",
},
{
"name": "venusaur",
"url": "https://pokeapi.co/api/v2/pokemon/3/"
}
]
}
Obviamente la API te va devolver más de tres Pokemon, yo lo hago así a modo de ejemplo.
GET pokeapi.example/api/v2/pokemon/{id o name}
Hacer una petición de este estilo y pasarle como paremetro un ID (número) o el nombre del Pokemon devolvera data sobre un Pokemon especifico.
Exmaple: Consulta
{
"abilities": [],
"base_experience": 112,
"forms": [],
"game_indices": [],
"height": 4,
"held_items": [],
"id": 25,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/25/encounters",
"moves": [],
"name": "pikachu",
"order": 35,
"past_types": [],
"species": {},
"sprites": {},
"stats": [],
"types": [],
"weight": 60
}
Obviamente la API te va devolver más información, yo lo hago así a modo de ejemplo.
GET pokeapi.co/api/v2/type
Hacer una petición de este estilo sin parametros adicionales devolvera una lista de tipos de Pokemon, es decir, comenzando con los de tipo normal y terminando con los de tipo shadow.
Adicionalmente la respuesta de este enpoint ademas de proporcionarnos el nombre del tipo, proporcionara una URL para consultar los Pokemon por su tipo.
{
"count": 20,
"next": null,
"previous": null,
"results": [
{
"name": "normal",
"url": "https://pokeapi.co/api/v2/type/1/"
},
{
"name": "fighting",
"url": "https://pokeapi.co/api/v2/type/2/"
},
{
"name": "flying",
"url": "https://pokeapi.co/api/v2/type/3/"
}
]
}
Obviamente la API te va devolver más de tres tipos de Pokemon, yo lo hago así a modo de ejemplo.
GET pokeapi.example/api/v2/type/{ID o nombre}
Hacer una petición de este estilo con un parametro devolvera data sobre un Pokemon dependiendo del tipo.
Example: Consulta
{
"damage_relations": {},
"game_indices": [],
"generations": {},
"id": 8,
"move_damage_class": {},
"moves": [],
"name": "ghost",
"mames": [],
"past_damage_relations": [],
"pokemon": []
}
Obviamente la API te va devolver más información, yo lo hago así a modo de ejemplo.