Una vez que ya tenemos configurado un entorno con Svelte y Tailwind podemos dar el siguiente paso que sería realizar una aplicación aunque sencilla nos ayudará a entender un poco mejor como se trabaja con este framework.
Creando la aplicación
La aplicación que haremos será una página donde se introduzca un nombre y busque en la API pública de PokéAPI, si encuentra el pokemón traeremos de vuelta la imagen y la mostraremos en pantalla y si no mostraremos una imagen de error.
Una vez que tenemos todo lo necesario podemos empezar por modificar el archivo src/main.js
import App from './App.svelte';
const API = 'https://pokeapi.co/api/v2/pokemon/';
const missingName = 'MissingNa';
const missingImg = 'images/missingno.png';
const app = new App({
target: document.body,
props: {
API,
missingName,
missingImg,
}
});
export default app;
Como podemos ver aquí es donde se inyecta el componente de Svelte en el documento.body, además se declaran constantes que serán enviadas como props al archivo App.svelte, el cual pasaremos a programar a continuación:
<!--App.svelte-->
<script>
export let API, missingName, missingImg;
let pokeName = 'POKEMON';
let pokeImg = 'images/pokeball.png';
function getData(stringToFind){
return fetch(`${API}${stringToFind}`).then(res => res.json());
}
async function handleSubmit(event){
const textValue = event.target.pokeName.value.trim().toLowerCase();
try {
const data = await getData(textValue);
pokeName = data.name.toUpperCase();
pokeImg = data.sprites.front_default;
}
catch (e) {
pokeName = missingName;
pokeImg = missingImg;
}
finally {
document.getElementById('pokeForm').reset();
}
}
</script>
<div class="flex flex-wrap bg-gray-900 h-screen content-center text-center">
<div class="w-full">
<form id="pokeForm" on:submit|preventDefault={handleSubmit}>
<span class="text-md font-bold text-white">{pokeName}</span>
<img class="mx-auto" src={pokeImg} alt={pokeName}>
<input id="pokeName"
class="bg-gray-200 hover:bg-white focus:bg-white py-2 px-4 my-2 text-gray-700
leading-tight border border-transparent hover:border-gray-300
focus:border-gray-300 focus:shadow-outline appearance-none rounded"
type="text" placeholder="Nombre del pokemon" autocomplete="off" required>
<button class="bg-blue-500 hover:bg-blue-400 py-2 px-4 text-white font-bold
border-b-4 border-blue-700 hover:border-blue-500 focus:outline-none rounded">
Buscar
</button>
</form>
</div>
</div>
Aquí es donde realizamos el diseño de la aplicación, haciendo uso de las clases que nos da Tailwind, a su vez gestionamos las funciones que harán las llamadas a la API para obtener la imagen del pokemon según el nombre que busquemos en el input.
Habiendo modificado esos 2 archivos podrían darle al comando npm run dev les funcionaría bien pero espera no les cargaría una imagen porque espera tener una por defecto en la carpeta public/images/, por lo cual deberían descargar estas 2 imágenes y colocarlas en ese directorio.
La pokeball la usaremos como imagen por defecto.
Missingno aparecerá cuando ocurra un error en el fetch a la hora de buscar el nombre del pokemón.
Siendo el resultado final este:
Pueden verlo también en https://erianvc.github.io/first-svelte-app/.
Top comments (2)
Excelente amigo, pero tengo un problema a la hora de mandar mi app a produccion, no me sale la carpeta de dist a la hora de hacer el build y no entiendo como hacerlo.
¿Tienes alguna captura del error que te sale?, pero creo que debe ser algo del rollup.config.js ya que es ahí donde especificas dónde y cómo se hará el bundle final.