Una aplicación web progresiva con Vue JS, Webpack y diseño de materiales [Parte 2]

[Actualizado el 30/10/2017]

Este artículo es parte de una serie que tiene como objetivo construir una aplicación web progresiva básica pero completa con VueJs, Webpack & Material Design, paso a paso y desde cero. Si aún no lo ha leído, puede encontrar la parte inicial aquí.

Fuente de código disponible en este repositorio de GitHub: https://github.com/charlesBochet/vueJSPwa

En la Parte 1, hemos aprendido cómo crear una aplicación de página única con VueJS, Webpack y MDL. Ya hemos cumplido los primeros requisitos de nuestra lista de verificación PWA:

Este segundo tutorial se enfoca en proporcionar datos rápidos y frescos para nuestra aplicación CropChat. Vamos a:

  • Configurar una nueva base de datos Firebase;
  • Conecte nuestra aplicación Vue a Firebase con Vuefire;
  • Publica y recupera fotos de Firebase.
CropChat con datos nuevos

[PARTE 2] Una PWA en tiempo real con Firebase

Firebase es una base de datos NoSQL Realtime desarrollada por Google. Está alojado en la nube, por lo que no necesita instalar nada en su servidor.

Los datos se sincronizan en todos los clientes en tiempo real. Eso hace que Firebase sea la herramienta perfecta para crear un chat: proporciona una manera fácil de mantener actualizado un mensaje. Además es gratis.

Para obtener más información sobre Firebase, consulte la página oficial.

Empecemos.

Configurar firebase

En primer lugar, vaya a Firebase Console, regístrese y cree un nuevo proyecto:

También necesitamos cambiar las reglas de la base de datos:

Nota: Esto hace que su base de datos sea legible y escribible por todos, solo es bueno para la creación de prototipos.

Agregue el paquete Firebase a Cropchat:

npm install firebase --save

Entonces necesitamos establecer una conexión Firebase. Cree un servicio src / service / firebase.js que contenga el siguiente código:

Regrese a Firebase Console y seleccione la pestaña Autenticación. Haga clic en el botón "CONFIGURACIÓN WEB" para obtener la información de la base de datos.

Ahora estamos conectados a nuestra base de datos.

Vuefire: libera el poder de Firebase + VueJS

Configurar VueFire

Usaremos VueFire, un paquete de nodos creado para envolver ganchos de Firebase en una aplicación vueJS.

Agregue VueFire al proyecto:

npm install vuefire --save

Importe VueFire en nuestro src / main.js:

Importe el servicio firebase en src / main.js:

Acabamos de crear un enlace entre nuestros gatos de aplicaciones y los gatos de nodo de Firebase. Vuefire los mantendrá sincronizados para nosotros. Agregamos .orderByChild ('created_at') para tener el gato más nuevo en la parte superior del feed.

Publica un gato

Podemos comenzar a enviar datos a nuestra base de datos de Firebase. Agregue un formulario src / components / PostView.vue:

Agregue Vue-resource para tener un cliente HTTP para nuestra aplicación y un analizador xml:

npm install vue-resource --save
npm install xml-parser --save

Importe Vue-resource en nuestro src / main.js:

Actualice la función montada PostView.vue () para cargar un gato aleatorio desde CatAPI (por cierto, es un gran lugar para encontrar imágenes de gatos). Esta función se activa cuando se monta el componente PostView:

Finalmente, agregue la función postCat () a los métodos PostView.vue que empujarán esta imagen a la instancia de Firebase:

¡Eso es! Explore su aplicación, haga clic en el botón "Más" para acceder a la Vista de publicación:

Captura de pantalla desde la vista Publicar

Y haga clic en el botón "Publicar un gato". Debería ver una nueva entrada en su panel de Firebase:

Mostrar la lista de gatos

Casi terminamos. Todavía tenemos trabajo por hacer en la Vista de inicio para mostrar las imágenes de gato que almacenamos en Firebase. Actualice la plantilla HomeView.vue:

No olvide eliminar nuestro archivo de datos estáticos data.js y la línea de importación en HomeView.vue.

Aquí vamos:

La vista de inicio ahora está sincronizada en Firebase

Además, esto está sincronizado en caliente. Abra una segunda pestaña con la aplicación, publique un gato y vea cómo ocurre la magia:

Sincronizado en caliente

Actualice la vista detallada

Añadir lodash:

npm install lodash --save

Y actualice DetailView.vue:

Conclusiones

Espero haberte convencido de las capacidades de Firebase y VueJS para mejorar tu aplicación con datos nuevos y rápidos. En pocas palabras:

  • Vuefire ofrece una forma rápida de integrar una base de datos Firebase en su aplicación VueJS;
  • Firebase es una herramienta muy poderosa para crear datos en tiempo real en una aplicación y asegurarse de que sus usuarios siempre tengan datos actualizados y actualizados.

Verificamos un nuevo punto en nuestra lista de verificación de requisitos de PWA:

¡No está hecho aún! En la Parte III, aprenderemos cómo hacer que nuestra aplicación Cropchat funcione sin conexión gracias a Service Workers.