La primera parte de la creación de una pequeña aplicación web que interactúa con la API de npm y genera buenos gráficos Los datos son hermosos. Y con las tecnologías modernas, es increíblemente fácil visualizar sus datos y crear grandes experiencias. En esta guía rápida, cubrimos cómo interactuar con la API npm 💘 para obtener estadísticas de descarga de un paquete y generar un gráfico a partir de estos datos con Chart.js ⚡ Inicio rápido Construiremos y utilizaremos las siguientes herramientas: npm-stats.org con Vue.js vue-router Gráfico.js vue-chartjs vue-cli axios Con Vue.js construiremos la interfaz básica de la aplicación y el enrutamiento con . Y armamos nuestro proyecto con que crea la estructura básica de nuestro proyecto. Para la generación de gráficos, usaremos Chart.js y, como contenedor para Vue, . Como necesitamos interactuar con una API, estamos usando para realizar las solicitudes http. Sin embargo, siéntase libre de cambiar ese con cualquier otro lib. vue-router vue-cli, vue-chartjs axios 🔧 Instalación y configuración Primero necesitamos instalar vue-cli para montar nuestro proyecto. ¡Espero que ya tenga instalada una versión actual de node y npm! 🙏 ¡Aún mejor si tienes instalado! ¡Si no, realmente deberías! Si no lo desea, simplemente cambie los comandos de hilo con los equivalentes de npm. hilo $ npm install -g vue-cli Luego podemos montar nuestro proyecto con vue-cli. Si desea, puede habilitar la unidad y las pruebas e2e, sin embargo, no las cubriremos. 🔥 ¡Pero debe verificar vue-router! $ vue init paquete web npm-stats Luego hacemos cd en nuestra carpeta de proyecto e instalamos las dependencias con . Entonces nuestras dependencias básicas del proyecto están instaladas. Ahora necesitamos agregar el de nuestra aplicación. cd npm-stats && yarn install $ hilo agregar vue-chartjs chart.js axios Solo una verificación rápida si todo se está ejecutando con . Ahora deberíamos ver la página repetitiva de vue. yarn run dev ¡Aaaay hemos terminado! 👏 💪 Hora de construir Solo un pequeño descargo de responsabilidad aquí, no me centraré en el estilo. Supongo que puedes hacer que el sitio se vea bien por tu cuenta 💅, así que solo cubrimos el código relacionado con javascript. Y otro descargo de responsabilidad, este es más bien un MVP pequeño que un código súper limpio en este momento. Refactorizaré algo de esto en etapas posteriores. Como en el mundo real. Componentes Pensemos qué componentes necesitamos. Mientras miramos la captura de pantalla, vemos un campo de entrada para el nombre del paquete que está buscando y un botón. Tal vez un encabezado y pie de página y el propio gráfico. Podría hacer que el botón y el campo de entrada sean un componente; sin embargo, como no construimos una aplicación compleja, ¿por qué molestarse? Hazlo simple. ¡Hazlo funcionar! Así que terminé con los siguientes componentes: componentes/Pie de página.vue componentes/Header.vue componentes/LineChart.vue páginas/Inicio.vue Omitiré el y el pie de , ya que solo contienen el logotipo y algunos enlaces. Nada especial aquí. El de líneas y la página de son los más importantes. encabezado página gráfico inicio Gráfico de linea El componente LineChart será nuestra instancia de chart.js que representa el gráfico. Necesitamos importar el componente Line y extenderlo. Creamos dos accesorios por ahora. Uno para los datos que es el número de descargas y las etiquetas que son por ejemplo los días, semanas, años. accesorios: {chartData: {tipo: Array, requerido: falso},chartLabels: {tipo: Array, requerido: true}}, Como queremos que todos nuestros gráficos tengan el mismo aspecto, definimos algunas de las opciones de estilo de Chart.js en un modelo de datos que se pasan como al método . opciones renderChart() Y como solo tendremos un conjunto de datos por ahora, podemos construir la matriz del conjunto de datos y vincular las etiquetas y los datos. 📺 Nuestra página de inicio Como tenemos nuestro componente LineChart en funcionamiento. Es hora de construir el resto. Necesitamos un campo de entrada y un botón para enviar el nombre del paquete. Luego solicite los datos y pase los datos a nuestro componente gráfico. Entonces, primero pensemos qué datos necesitamos y qué estados/modelos de datos. En primer lugar, necesitamos un modelo de datos de , que usaremos con en nuestro campo de entrada. También queremos mostrar el nombre del paquete como título. Entonces sería bueno. Luego, nuestras dos matrices para las y de datos solicitadas y, como estamos solicitando un período de tiempo, debemos establecer el . Pero, tal vez la solicitud salga mal, por lo que necesitamos y . Y, por último, pero no menos importante, , ya que queremos mostrar el gráfico solo después de realizar la solicitud. package v-model packageName downloads labels period errorMessage showError loaded API de npm Hay varios puntos finales para obtener las descargas de un paquete. uno es por ejemplo OBTENGA https://api.npmjs.org/downloads/point/{período}[/{paquete}] Sin embargo, este solo obtiene un valor en puntos. Así que las descargas totales. Pero para dibujar nuestro genial gráfico, necesitamos más datos. Así que necesitamos el punto final del rango. OBTENGA https://api.npmjs.org/downloads/range/{período}[/{paquete}] El período se puede definir como, por ejemplo o o un rango de fechas específico Pero para simplificar, establecemos el valor predeterminado en . Más adelante, en la Parte II, podemos agregar algunos campos de entrada de fecha para que el usuario pueda establecer un rango de fechas. last-day last-month 2017-01-01:2017-04-19 last-month Así que nuestros modelos de datos se ven así: data () {return {package: null,packageName: '',period: 'last-month',loaded: false,downloads: [],labels: [],showError: false,errorMessage: 'Por favor ingrese un nombre de paquete' }}, 💅 Plantilla Ahora es el momento de construir la plantilla. Necesitamos 5 cosas: Campo de entrada Botón para activar la búsqueda Salida de mensaje de error Titular con el nombre del paquete Nuestro Gráfico. <inputclass=”Search__input” .enter=”requestData”placeholder=”npm package name”type=”search” name=”search”v-model=”package” @keyup <button class=”Buscar__button” =”requestData”>Buscar</button> @click <div class="mensaje-de-error" v-if="showError">{{ mensaje-de-error }}</div> <h1 class="title" v-if="loaded">{{ packageName }}</h1><line-chart v-if="loaded" :chart-data="downloads" :chart-labels="labels "></gráfico de líneas> Simplemente ignore las clases css por ahora. Tenemos nuestro campo de entrada que tiene un evento keyup al ingresar. Entonces, si presionas enter, activas el método . Y unimos al requestData() v-model package Para el error potencial tenemos una condición, solo si es mostramos el mensaje. Hay dos tipos o errores que pueden ocurrir. La primera es que alguien intenta buscar un paquete sin ingresar ningún nombre o está ingresando un nombre que no existe. showError verdadero Para el primer caso, tenemos nuestro mensaje de error predeterminado, para el segundo caso, tomaremos el mensaje de error que proviene de la solicitud. Así que nuestra plantilla completa se verá así: 🤖 JavaScript Ahora es el momento de la codificación. Primero haremos nuestro método . Es bastante simple. Necesitamos hacer una solicitud a nuestro punto final y luego mapear los datos que ingresan. En nuestra tenemos información sobre el paquete: requestData() respuesta.datos respuesta.datos Como los datos de inicio, la fecha de finalización, el nombre del paquete y luego la matriz de descargas. Sin embargo, la estructura de la matriz de descargas es algo como esto: descargas: [{día: '2017–03–20', descargas: '3'},{día: '2017–03–21', descargas: '2'},{día: '2017–03–22', descargas: '10'},] Pero necesitamos separar las descargas y los días, porque para chart.js necesitamos una matriz solo con los datos (descargas) y una matriz con las etiquetas (día). Este es un trabajo fácil para el mapa requestData () {axios.get(` ).then(response => {this.downloads = respuesta .data.downloads.map(download => download.downloads)this.labels = response.data.downloads.map(download => download.day)this.packageName = response.data.packagethis.loaded = true}).catch (err => {this.errorMessage = err.response.data.errorthis.showError = true})} https://api.npmjs.org/downloads/range/${this.period}/${this.package}` Ahora, si ingresamos un nombre de paquete, como vue y presionamos enter, se realiza la solicitud, se asignan los datos y se representa el gráfico. Pero espera. No ves nada. Porque necesitamos decirle a vue-router que establezca el índice en nuestra página de inicio. En importamos o paginamos y le decimos al enrutador que lo use router/index.js importar Vue desde 'vue'importar enrutador desde 'vue-router'importar página de inicio desde '@/pages/Start' Vue.use (enrutador) exportar el nuevo enrutador predeterminado ({rutas: [{ruta: '/', nombre: 'Inicio', componente: Página de inicio},]}) 💎 polaco Pero aún no hemos terminado. Tenemos algunos problemas, ¿verdad? Primero, nuestra aplicación se rompe si no ingresamos ningún nombre. Y tenemos problemas si ingresa un nuevo paquete y presiona enter. Y después de un error el mensaje no desaparece. Bueno, es hora de limpiar un poco. Primero, creemos un nuevo método para restablecer nuestro estado. resetState () {this.loaded = falsethis.showError = false}, Que llamamos en nuestro método requestData antes de la llamada a axios api. Y necesitamos un cheque para el nombre del paquete. requestData() if (este.paquete === nulo|| este.paquete === ''|| este.paquete === 'indefinido') {este.showError = truereturn} Ahora, si intentamos buscar un nombre de paquete vacío, obtenemos un mensaje de error predeterminado. Lo sé, cubrimos mucho, pero agreguemos otra pequeña característica interesante. Tenemos vue-router, pero en realidad no lo usamos. En nuestra raíz vemos la página de inicio con el campo de entrada. Y después de una búsqueda nos quedamos en nuestra página raíz. Pero sería genial si pudiéramos compartir nuestro enlace con las estadísticas, ¿no? / Entonces, después de una búsqueda válida, agregamos el nombre del paquete a nuestra URL. npm-stats.org/#/vue-chartjs Y si hacemos clic en ese enlace, debemos tomar el nombre del paquete y usarlo para solicitar nuestros datos. Vamos a crear un nuevo método para configurar nuestra url setURL () {history.pushState({ información: `npm-stats ${this.package}`}, this.package, `/#/${this.package}`)} Necesitamos llamar a en nuestra promesa de respuesta. Ahora, después de realizar la solicitud, agregamos el nombre del paquete a nuestra URL. Pero, si abrimos una nueva pestaña del navegador y la llamamos, no pasa nada. Porque necesitamos decirle a vue-router que todo lo que esté después de nuestro también apuntará a la página de inicio y definirá la cadena como un parámetro de consulta. Que es súper fácil. this.setURL() / En nuestro solo necesitamos establecer otra ruta en la matriz de rutas. Llamamos al paquete param. router/index.js {ruta: '/:paquete', componente: Página de inicio} Ahora, si va a obtendrá la página de inicio. Pero sin carta. Porque necesitamos tomar el parámetro y hacer nuestra solicitud con él. localhost:8080/#/react-vr De vuelta en nuestro Start.vue tomamos el parámetro en el gancho montado. montado () {if (this.$route.params.package) {this.package = this.$route.params.packagethis.requestData()}}, ¡Y eso es! Puede consultar la fuente completa en y ver la página de demostración en 📺 GitHub http://npm-stats.org/ Mejoras Pero bueno, todavía hay margen de mejora. Podríamos agregar más gráficos. Como estadísticas mensuales, estadísticas anuales y agregar campos de fecha para establecer el período y muchas cosas más. ¡Cubriré algunos de ellos en ! ¡Así que estad atentos! la Parte II Parte 2: https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf

Super

Twitter

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

In your car, at home, or at work — Bosch technology shapes many areas of life.

Construyamos una aplicación web con Vue, Chart.js y una API

Demasiado Largo; Para Leer

Companies Mentioned

Jakub Juszczak

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

Construyamos una aplicación web con Vue, Chart.js y una API

Demasiado Largo; Para Leer

Companies Mentioned

Jakub Juszczak

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

HISTORIAS RELACIONADAS