The Pokedex Project(11) — Desarrollando nuestro front end. Parte 2.

7 min readOct 27, 2020

En el capitulo anterior configuramos las librerías de Javascript que vamos a usar en el proyecto.

Ahora las usaremos en especifico Tailwind Css para darle estilo a nuestro Pokedex, Vue para crear la estructura de nuestro proyecto con componentes y Laravel Mix para compilar nuestro código de Javascript.

Configurando nuestros componentes con Tailwind y Vue.

Antes que nada usaremos el siguiente comando:

Copiar código:npm run watch

Esto compilara nuestros Javascript y Css y registrara los cambios hechos en estos archivos y los volverá a compilar cuando ocurra algún cambio en ellos.

Creamos los siguientes archivos junto con la carpeta “components” dentro de resources/js:

Copiar código:cd resources/js && mkdir components && cd components && touch TheNav.vue && touch TheFooter.vue && touch TheListData.vue && touch TheSearchBox.vue

Programando los componentes.

TheNav.vue — El menú de nuestro Pokedex.

Copiar código:<template>
    <div class="relative bg-red-600">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <div class="flex justify-between items-center border-b-1 border-gray-100 py-6 md:justify-start md:space-x-10">
                <div class="lg:w-0 lg:flex-1 rounded-full text-white shadow-solid">
                    <a href="#" class="flex">
                        <img class="h-12 w-12" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Pok%C3%A9_Ball_icon.svg" alt="Workflow">
                    </a>
                </div>

                <div class="md:flex items-center justify-center space-x-8 md:flex-1 lg:w-0">
                    <h1 class="text-white text-3xl">The Pokedex</h1>
                </div>

                <div class="md:flex items-center justify-center space-x-8 md:flex-1 lg:w-0">
                    &nbsp;
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: "TheNav"
}
</script>

TheSearchBox.vue — El buscador de Pokemons.

Copiar código:<template>
    <div class="m-5">
        <input
            type="search"
            name="query"
            placeholder="Find your Pokemon ..."
            required="required"
            class="p-4 text-gray-700 w-full bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-gray-400">
    </div>
</template>

<script>
export default {
    name: "TheSearchBox"
}
</script>

TheListData.vue — Nuestra lista de Pokemons.

Copiar código:<template>
    <div class="max-w-xs rounded overflow-hidden shadow-lg my-5">
        <img class="w-full" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png" alt="Pokemon Pokedex Picachu">
        <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">025 - Picachu</div>
            <p class="text-grey-darker text-base">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
            </p>
        </div>
        <div class="px-6 py-4">
            <span class="tracking-wider text-white bg-red-500 px-4 py-1 text-sm rounded leading-loose mx-2 font-semibold" title="">
                <i class="fas fa-" aria-hidden="true"></i> More Info
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: "TheListData"
}
</script>

TheFooter.vue — El píe de pagina de nuestro Pokedex.

Copiar código:<template>
    <footer class="footer bg-white relative pt-1 border-b-2 border-blue-700">
        <div class="container mx-auto px-6">
            <div class="mt-16 border-t-2 border-gray-300 flex flex-col items-center">
                <div class="sm:w-2/3 text-center py-6">
                    <p class="text-sm text-blue-700 font-bold mb-2">
                        © 2020 Pokedex Project by Chris López.
                    </p>
                </div>
            </div>
        </div>
    </footer>
</template>

<script>
export default {
    name: "TheFooter"
}
</script>

Registrando nuestros componentes.

Para poder hacer uso de estos componentes necesitaremos importarlos en el archivo app.js:

Editaremos app.js con el siguiente contenido:

Copiar código:import Vue from "vue"

import TheNav from "./components/TheNav"
import TheSearchBox from "./components/TheSearchBox"
import TheListData from "./components/TheListData"
import TheFooter from "./components/TheFooter"

new Vue({
    el: "#app",
    delimiters: ['${', '}'],
    components: {
        'the-nav': TheNav,
        'the-search-box': TheSearchBox,
        'the-list-data': TheListData,
        'the-footer': TheFooter,
    },
    data () {
        return {
            message: "Hello Pokedex!!!"
        }
    },
})

Importamos nuestros componentes con “import” y después los registramos en la instancia de Vue en la sección de “components”.

Para usar nuestros componentes en la vista, editaremos nuestro archivo app.html de resources/views/layouts y pondremos lo siguiente:

Copiar código:<div id="app">

    <the-nav></the-nav>

    <div class="container mx-auto">
        {% block content %}{% endblock %}
    </div>

    <the-footer></the-footer>
</div>

Accederemos global mente a nuestros componentes como los configuramos en la instancia Vue, el nombre que le pusimos en esta instancia seria el tag HTML que usaremos en nuestra vista.

Editamos nuestro archivo de la vista, pokedex.html:

Copiar código:{% extends "layouts/app.html" %}

{% block content %}
    <the-search-box></the-search-box>

    <the-list-data></the-list-data>
{% endblock %}

Una ves hecho esto, tendríamos que ver el esqueleto de nuestro Pokedex:

Agregando nuestros datos del controller al componente TheListData.

Para renderizar nuestros Pokemones de la base de datos, tendremos que modificar componente TheListData.

Editemos el archivo con lo siguiente:

Copiar código:<template>
    <div class="grid grid-cols-3 gap-4">
        <template v-for="item in dataList">
            <div class="max-w-xs rounded overflow-hidden shadow-lg my-5">
                <img class="w-full" :src="item.image" :alt="item.name">
                <div class="px-6 py-4">
                    <div class="font-bold text-xl mb-2">{{ item.code }} - {{ item.name }}</div>
                    <p class="text-grey-darker text-base">
                        <b>Height: </b> {{ item.height }} <br>
                        <b>Weight: </b> {{ item.weight }} <br>
                        <b>Ability: </b> {{ item.ability }}
                    </p>
                </div>
                <div class="px-6 py-4">
                    <a :href="moreInfoUrl(item)" target="_blank"
                       class="tracking-wider text-white bg-red-500 px-4 py-1 text-sm rounded leading-loose mx-2 font-semibold"
                       :title="item.name">
                        <i class="fas fa-info-circle" aria-hidden="true"></i> More Info
                    </a>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    name: "TheListData",
    props: {
        dataList: {
            type: null,
        }
    },
    methods: {
        moreInfoUrl(item) {
            return "https://www.pokemon.com/el/pokedex/" + item.name.toLowerCase()
        }
    }
}
</script>

Asignaremos una propiedad llamada “dataList” y esta es la que le pasaremos la variable “pokemons” de la vista.

Modificamos el pokedex.html:

Copiar código:<the-list-data :data-list="{{ pokemons|json_encode }}"></the-list-data>

Convertimos el array de la variable “pokemons” a JSON y se lo pasamos al props “data-list” en la vista, como ya en el componente lo tenemos en un ciclo ya podremos ver nuestros Pokemones que tenemos registrados en la base de datos en nuestra vista:

Obteniendo datos por medio de una petición HTTP(Ajax).

Como nos dimos cuenta en el paso anterior, nuestros 150 pokemons, se tardan un poco en cargar, es porque tenemos que procesar al vuelo la información que viene del controller, que en este caso es un array; y convertirlo a JSON y pasárselo a la prop del componente.

Ahora intentaremos pasar los mismos datos pero vamos hacer una petición AJAX a un endpoint que creemos nosotros.

Modificamos el controller en el metodo “show” y ponemos esto:

Copiar código:public function show()
{
    response()->json($this->repository->all(), 200);
}

Modificamos el archivo de las rutas y configuramos otros:

Copiar código:$route->add('/show', 'PokemonController@show');

Modificamos el javascript del componente TheListData:

Copiar código:export default {
    name: "TheListData",
    /*props: {
        dataList: {
            type: null,
        }
    },*/
    mounted() {
        this.getData()
    },
    data() {
        return {
            dataList: [],
        }
    },
    methods: {
        async getData() {
            let dataResponse = await fetch('/show')
            this.dataList = await dataResponse.json()
        },
        moreInfoUrl(item) {
            return "https://www.pokemon.com/el/pokedex/" + item.name.toLowerCase()
        }
    }
}

Aquí solo comentamos la prop “dataList” y se la pusimos en “data”, después creamos un método con “async/await” y mandamos a llamar nuestro endpoint con la función “fetch”, de lo que regrese nuestro endpoint se le asigna esos datos a nuestra variable de la instancia del componente(“dataList”). La funcion “getData” se ejecutara en el life cycle del componente(“mounted”).

No se olviden de quitar el prop del tag del componente definido en pokedex.html. El componente quedaría así:

Copiar código:<the-list-data></the-list-data>

Si probamos deberíamos de ver el mismo resultado que el paso anterior aunque la carga de la información es un poco más rápida.

Ya puedes leer nuestro siguiente capitulo, en el cual empezaremos a implementar Vuex en nuestro Pokedex: https://link.medium.com/r1ifkDtJVab

Pueden consultar el código de esta publicación en este repositorio: https://github.com/krsrk/pokedex-vanilla-php

Si les gusto la publicación denle claps, likes y comentarios.