Creación y Personalización de Páginas en Vue.js

Curso Avanzado de Vue.js 2

Contenido del curso

Bienvenida al curso

1
Vue consumiendo APIs oficiales de Blizzard
13:27 min

VueCli, configuración inicial del proyecto y consumo del API de Blizzard

Creación de los componentes y layouts de nuestro proyecto

Agregando funcionalidades avanzadas a nuestro proyecto

Tomar examen

Si has llegado hasta aquí... ¡Enhorabuena! Ya tienes una super aplicación Vue creada desde 0 que utiliza conceptos avanzados. Además has podido subirlo a la plataforma de Netlify y administrar las variables de entorno.

👏 👏 👏 🦄 👏 👏 👏

Lo que nos queda para terminar definitivamente es darle contenido a las páginas de About y de Error, que las hemos dejado un poco de lado durante el curso, ya que no tienen ninguna funcionalidad especial que explicar.

En la página de About, que corresponde con el fichero /views/About/Index.vue vamos a poner esto, que es HTML plano:

<template>
  <div class="about-view mb-5">
    <div class="text-center">
      <!-- Directiva v-diablo, en blanco 😎 -->
      <h1 v-diablo:white class="my-5">Diablo 3 Profile Finder</h1>

      <hr class="bg-dark mb-5">

      <p class="lead">
        Diablo III is a genre-defining action-RPG set in Sanctuary, a world ravaged by the eternal conflict between angels and demons.
      </p>
      <p class="lead">
        <span class="font-weight-bold">D3PF</span> allows you to enter your battle-tag to see your profile, your last played heroes, your items, skills and more.
      </p>
    </div>

    <hr class="bg-dark my-5">

    <div class="mt-5">
      <h2 class="mb-4">API Rate Limit</h2>
      <b-alert show variant="dark">
        Clients exceeding these limits may experience slower service or a response error. See the
        <a href="https://develop.battle.net/documentation/guides/getting-started">Getting Started Guide</a> for more details.
      </b-alert>

      <dl class="row mt-5 text-center text-sm-left">
        <div class="col-sm-6 mb-3">
          <dt>36,000 requests per hour</dt>
          <dd>Long-term Quota</dd>
        </div>

        <div class="col-sm-6">
          <dt>100 requests per second</dt>
          <dd>Short-term Throttle</dd>
        </div>
      </dl>

    </div>

    <div class="my-5">
      <h2>Getting Started</h2>

      <p>Before you can get started using the Blizzard APIs, you must:</p>

      <ol>
        <li>Login or create a new Battle.net account.</li>
        <li>Create a client through the API Access menu option.</li>
        <li>Generate a secret for the client.</li>
        <li>Understand how Blizzard APIs work with OAuth.</li>
      </ol>

      <p class="text-break">Read more here:
        <a href="https://develop.battle.net/documentation/guides/getting-started">https://develop.battle.net/documentation/guides/getting-started</a>
      </p>
    </div>

    <hr>

  </div>
</template>

<script>
export default {
  name: 'AboutView'
}
</script>

Abre la página de About en el navegador, deberías verlo así:

La página de error es bastante sencilla también. Como recordarás, cada vez que teníamos un error, guardabamos toda la información del error en el Store de nuestra aplicación (Lo puedes ver en: /store/modeules/error.js)

Pues bien developer, lo único que hay que hacer es recuperar los datos del Store y mostrarlos en la vista de Error, /src/views/Error/Index.vue:

<template>
  <div class="error-page m-5">
    <hr class="my-5">
    <!-- Si hay error -->
    <div v-if="err">

      <!-- Si hay codigo de error -->
      <h1 class="my-5">Error <span v-if="err.status">{{ err.status }}</span></h1>

      <!-- Si hay parámetros de ruta -->
      <div v-if="err.routeParams">
        <h2>Query Params:</h2>
        <ul class="list-unstyled">
          <li v-for="(val, key) in err.routeParams" :key="key">
            👉 {{ key.toUpperCase() }}: <span class="lead text-muted">{{ val }}</span>
          </li>
        </ul>

        <hr class="my-5">
      </div>

      <!-- Si hay mensaje de error -->
      <div v-if="err.message">
        <p class="lead"> {{ err.message }}</p>
      </div>

      <!-- Si hay información de error adicional -->
      <div v-if="err.data">
        <ul class="list-unstyled">
          <li v-for="(val, key) in err.data" :key="key">
            {{ key.toUpperCase() }}: <span class="lead text-muted">{{ val }}</span>
          </li>
        </ul>
      </div>

    </div>

    <!-- Si NO hay error -->
    <div v-else>
      <h1 class="my-5">Error Page</h1>
      <p class="lead">What are you doing here? 🤔</p>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
import setError from '@/mixins/setError'

export default {
  name: 'ErrorView',
  mixins: [setError],
  computed: {
    ...mapState('error', {
      err: 'error'
    })
  },
  // Este "guardia de ruta" es invocado justo antes de cambiar de página
  // Es perfecto para limpiar el mensaje de error a través del mixin y liberar memoria
  beforeRouteLeave (to, from, next) {
    this.setApiErr(null)
    next()
  }
}
</script>

Con los comentarios hemos explicado bastante bien lo que hace cada parte, pero hay una que no hemos visto durante el curso. Es el guardian de ruta beforeRouteLeave.

> 📗 Puedes leer más acerca de los guardianes de ruta aquí: https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

Los route guards pueden ser utilizados a nivel local de componente, como en este caso, y a nivel global, en el archivo donde tienes las rutas, router.js.
El guardián de ruta (route guard) beforeRouteLeave se ejecuta justo antes de que la ruta que renderiza el componente vaya a cambiar. En ese momento seguimos teniendo acceso al this, por lo tanto es el momento perfecto para limpiar o liberar recursos.

En este caso, lo que nos interesa el limpiar el mensaje de error de Vuex (haciendo la llamada al mixin con el valor null), ya que si no lo limpiamos al salir, va a estar ocupando sitio en nuestro Store inútilmente.

Para forzar el error y poder ver la página de error puedes borrar o renombrar las variables de entorno y volver a lanzar el proyecto. Cuando intentes obtener el perfil de un jugador te saldrá este error:

Error 401, no autorizado (ya que no hemos conseguido el token de acceso), junto con los parámetros de búsqueda:

BattleTag: SuperRambo-2613
Región: EU

Prueba a obtener otros errores y comparte tu resultado en el sistema de mensajes. Un error puede ser pedir los datos de un usuario (BattleTag) existente con una región incorrecta. ¿Que error te da? ¿Qué te aparece en pantalla? ¿Crees que ese mensaje de error es correcto? Explica tu respuesta en el sistema de comentarios.

Despedida

Ahora sí, el curso ha llegado a su fin. Espero que lo hayas disfrutado tanto como yo y que hayas aprendido mucho. Si has ido haciendo paso a paso todo lo que se ha explicado durante el curso, me gustaría ver tu versión de la aplicación. Comparte tu enlace de Netlify para que podamos verlo todos 🤩.

Para cualquier consulta o sugerencia (¡Todo el feedback es bienvenido!) ya sabes que puedes usar el sistema de comentarios de la aplicación o buscarme en las redes. Te recomiendo que utilices el sistema de preguntas y respuestas, para así (además de conseguir puntos) ayudar los demás compañeros que puedan tener las mismas dudas que has tenido tú. Anímate, y pregunta siempre que lo consideres oportuno.

Por último, me gustaría decirte que el repositorio oficial de la aplicación siempre estará abierto a mejoras o nuevas ideas de hacer las cosas, por lo que si te ves con ganas, siempre puedes hacer un Pull Request, y con ello, ganarte el aparecer en la lista de contributors de la aplicación 😍. Suena bien, ¿verdad? ¡Espero tu participación!

👋 ¡Hasta la próxima!

Creación y Personalización de Páginas en Vue.js