Primera aplicación con Svelte y Tailwind
Tags: svelte, tailwindcss, webdev, spanish
Published: 2020-02-14 19:04:23

Una vez que ya tenemos [configurado un entorno con Svelte y Tailwind](https://dev.to/erianvc/configurando-svelte-con-tailwind-52g9) 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](https://pokeapi.co/), 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`

```javascript
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:

```html
<!--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.




[![Pokeball](https://raw.githubusercontent.com/erianvc/first-svelte-app/master/public/images/pokeball.png)](https://raw.githubusercontent.com/erianvc/first-svelte-app/master/public/images/pokeball.png) 
La pokeball la usaremos como imagen por defecto.

[![Pokeball](https://raw.githubusercontent.com/erianvc/first-svelte-app/master/public/images/missingno.png)](https://raw.githubusercontent.com/erianvc/first-svelte-app/master/public/images/missingno.png) 
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](https://i.imgur.com/WiDN2ss.png)](https://erianvc.github.io/first-svelte-app/)

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