DEV Community

Cover image for Primera aplicación con Svelte y Tailwind
Erick Vargas
Erick Vargas

Posted on • Updated on

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Pokeball
La pokeball la usaremos como imagen por defecto.

Pokeball
Missingno aparecerá cuando ocurra un error en el fetch a la hora de buscar el nombre del pokemón.

Siendo el resultado final este:

First Svelte App

Pueden verlo también en https://erianvc.github.io/first-svelte-app/.

Top comments (2)

Collapse
 
jsgsco profile image
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.

Collapse
 
eriandev profile image
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.