About y Error

27/27

Lectura

About y Error

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í:
about


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

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!

Aportes 17

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Solo he leído el curso, para ahorrar tiempo en el #PlatziDay. Pero está fabuloso el curso he visto bastantes cosas que desconocía.

¿Quieres colaborar con el proyecto? Todas las aportaciones son bienvenidas. Es una buena forma de iniciarse en el mundo open source y colaborar. Para participar empieza creando una issue o un pull request en el repositorio oficial del proyecto: https://github.com/baumannzone/diablo3-vue-platzi

Añadir documentación o corregir una simple coma en un readme.md o mejorar la suite de tests… ¡cualquier aportación es válida!

Listo!, quedo el proyecto. En este momento solo me estoy enfocando en aprender React y por lo tanto, he hecho este curso en react jajaja. Un curso muy completo, me ha hecho leer mucha documentación y aprender mucho.
Aquí dejo el link a la app
Aquí el repositorio de github

Cualquier sugerencia o comentario es bienvenido!

Jorge muchas gracias por este gran curso, me a aportado mucho, me ayudara mucho mi en crecimiento profesional !!!

jejeje finished el curso, gracias viejo

https://diablo3-sfsuser.netlify.app/

Me hubiera gustado ver algo rapido de testing 😦 .

Excelente curso! les dejo el mio DiabloIII y espero poder colaborar al proyectos en estos dias.

Que genial, todo salió perfecto y aprendimos un monton en el camino.

Muy buen curso, me gustó la manera de abordar los temas en escrito pues es más fácil regresar a resolver dudas 👌

Como añadido le agregue un poco de TypeScript y un plugin para Vue 2 donde usamos la nueva Composition API, aquí les dejo el repositorio: https://github.com/manuelojeda/d3pf

Hice un pull request al repositorio original. Es algo sencillo pero espero sea de ayuda 😊

Hoy he aceptado otro Pull Request de otro estudiante. Ya somos 3 😄

https://github.com/baumannzone/diablo3-vue-platzi

Excelente curso, realmente me encanto, muchas gracias por todo el conocimiento. Me gustaría que hubiera uno sobre las PWA con Vue.js, seria genial

Estaba esperando la parte de Testing 😢

Excelente curso la lectura fue fácil de seguir y entender.

https://vue-diablo3-app.netlify.app/

https://github.com/gustperx/vue-diablo3-app

En mi caso use construí la aplicación Usando Vue 3 + Composition API + TypeScript + TailwindCss

Fue muy entretenido y educativo seguir el curso aplicando este stack

Logre corregir el problema de mostrar las imágenes de los items del hero en netlify, para esto cree un “composable” de vue 3 (parecido a los hooks de react) y agrupe todas las llamadas a las imágenes (para hacer más fácil modificaciones si cambia algo del API de blizzard).

La solucion fue aplicando esto:

https://markus.oberlehner.net/blog/using-netlify-redirects-to-proxy-images-hosted-on-a-third-party-image-provider-or-a-headless-cms/

Que gran curso profe muchas gracias definitivamente fue un curso avanzado y se sintio asi todo el tiempo espero hayan mas cursos asi
https://vuediablo3.netlify.app/

Increíble! Seguí el curso paso a paso, curioseando, toqueteando aquí y allá, me encantó mucho, sobre todo porque te da la idea de cómo estructurar y hacer un proyecto verdaderamente profesional con Vue, como dividimos todo en componentes y carpetas, es genial.

Otro plus (para mi) es que nunca, NUNCA usaré Stylus para ningún proyecto xD Pero al menos puedo decir que he hecho un proyecto usando Stylus:D! Aunque lo use aquí no me terminó de convencer Stylus, me gusta más usar llaves y comas y puntos y comas.

Aunque en la vista de heroes no se muestran las imágenes (En la aplicación en producción), en general el proyecto me pareció genial, me tomó mucho tiempo completar este curso (En realidad solo fueron 2 días pero Vueno) me tomé mi tiempo para leer y entender bien todas las clases, y la modalidad escrita me parecio genial!😄

👉 Recuerda, estoy esperando ver tu diploma en twitter (https://twitter.com/baumannzone) o en instagram (https://www.instagram.com/baumannzone/). Consíguelo y dame un aviso por las redes. 👈