Primera aplicación con Svelte y Tailwind

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/.

Comments

[John Steven Saavedra]

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.

[Erick Vargas]

¿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.