Empiece a trabajar con Vue.js y Firestore

 

 

 

  • Deploy Fast. Deploy Smart
  • Register!

  • Índice
    1. Empecemos
    2. ¡Publicar cosas!
    3. Agregar lógica de servidor
    4. Último paso: implementación
    5. Cuándo utilizar esta arquitectura
    6. ¡¿Dónde firmo?!
      1. Otras lecturas

    Crear un MVP consiste en crear muchas funciones en poco tiempo. Vue.js es una buena opción, con un mínimo de arquitectura repetitiva y mucha potencia bruta. Todo lo que necesita es un lugar para almacenar datos. Digamos que tienes una gran idea para un nuevo producto. En este artículo, Lukas van Driel le guiará por los pasos para crear y alojar esta nueva aplicación web.

     

    Google Firebase tiene una nueva posibilidad de almacenamiento de datos llamada 'Firestore' (actualmente en etapa beta) que se basa en el éxito de Firebase Realtime Database pero agrega algunas características ingeniosas. En este artículo, configuraremos los conceptos básicos de una aplicación web usando Vue.js y Firestore.

    Digamos que tienes una gran idea para un nuevo producto (por ejemplo, el próximo Twitter, Facebook o Instagram, porque nunca podemos tener demasiadas redes sociales, ¿verdad?). Para empezar, desea hacer un prototipo o Producto Mínimo V iable (MVP) de este producto. El objetivo es construir el núcleo de la aplicación lo más rápido posible para poder mostrárselo a los usuarios, obtener comentarios y analizar el uso. Se hace mucho hincapié en la velocidad de desarrollo y la iteración rápida.

    Pero antes de comenzar a construir, nuestro increíble producto necesita un nombre. Llamémoslo "Amazeballs". Va a ser Legendario ... Esperalo ... DARY !

    Aquí hay una foto de cómo lo imagino:

    La legendaria aplicación Amazeballs

    Nuestra aplicación Amazeballs, por supuesto, se trata de compartir cositas cursis de tu vida personal con amigos, en las llamadas Balls. En la parte superior hay un formulario para publicar Balls, debajo están las Balls de tus amigos.

    Al crear un MVP, necesitará herramientas que le brinden el poder de implementar rápidamente las funciones clave, así como la flexibilidad para agregar y cambiar funciones rápidamente más adelante. Mi elección recae en Vue.js, ya que es un marco de renderizado de Javascript, respaldado por la suite Firebase (de Google) y su nueva base de datos en tiempo real llamada Firestore.

    Se puede acceder directamente a Firestore utilizando métodos HTTP normales, lo que lo convierte en una solución completa de backend como servicio en la que no es necesario administrar ninguno de sus propios servidores, pero sí almacenar datos en línea.

     

    Suena poderoso y desalentador, pero no te preocupes, te guiaré a través de los pasos para crear y alojar esta nueva aplicación web. Observe cuán grande es la barra de desplazamiento en esta página; no hay una gran cantidad de pasos para ello.

    Empecemos

    Estamos comenzando con Vue.js. Es genial para principiantes en Javascript, ya que comienzas con HTML y gradualmente le agregas lógica. Pero no subestimes; Incluye muchas funciones potentes. Esta combinación la convierte en mi primera opción como marco de interfaz de usuario.

    Vue.js tiene una interfaz de línea de comandos (CLI) para proyectos de andamiaje . Lo usaremos para configurar rápidamente la configuración básica. Primero, instale la CLI y luego úsela para crear un nuevo proyecto basado en la plantilla "webpack-simple".

    npm install -g vue-clivue init webpack-simple amazeballs

    Si sigue los pasos en la pantalla ( npm instally npm run dev), se abrirá un navegador con un gran logotipo de Vue.js.

    ¡Felicitaciones! Eso fue fácil.

    A continuación, necesitamos crear un proyecto de Firebase. Dirígete a https://console.firebase.google.com/ y crea un proyecto. Un proyecto comienza con el plan Spark gratuito, que le brinda una base de datos limitada (1 GB de datos, 50000 lecturas por día) y 1 GB de alojamiento. Esto es más que suficiente para nuestro MVP y se puede actualizar fácilmente cuando la aplicación gane impulso.

    Haga clic en 'Agregar Firebase a su aplicación web' para mostrar la configuración que necesita. Usaremos esta configuración en nuestra aplicación, pero de una manera agradable de Vue.js usando estado compartido .

    Primero npm install firebase, luego cree un archivo llamado src/store.js . Este es el lugar donde colocaremos el estado compartido para que cada componente de Vue.js pueda acceder a él independientemente del árbol de componentes. A continuación se muestra el contenido del archivo. El estado sólo contiene algunos marcadores de posición por ahora.

    import Vue from 'vue';import firebase from 'firebase/app';import 'firebase/firestore';// Initialize Firebase, copy this from the cloud console// Or use mine :)var config = { apiKey: "AIzaSyDlRxHKYbuCOW25uCEN2mnAAgnholag8tU", authDomain: "amazeballs-by-q42.firebaseapp.com", databaseURL: "https://amazeballs-by-q42.firebaseio.com", projectId: "amazeballs-by-q42", storageBucket: "amazeballs-by-q42.appspot.com", messagingSenderId: "972553621573"};firebase.initializeApp(config);// The shared state object that any vue component can get access to.// Has some placeholders that we’ll use further on!export const store = { ballsInFeed: null, currentUser: null, writeBall: (message) = console.log(message)};

    Ahora agregaremos las partes de Firebase. Un fragmento de código para obtener los datos de Firestore:

     

    // a reference to the Balls collectionconst ballsCollection = firebase.firestore() .collection('balls');// onSnapshot is executed every time the data// in the underlying firestore collection changes// It will get passed an array of references to// the documents that match your queryballsCollection .onSnapshot((ballsRef) = { const balls = []; ballsRef.forEach((doc) = { const ball = doc.data(); ball.id = doc.id; balls.push(ball); }); store.ballsInFeed = balls; });

    Y luego reemplace la writeBallfunción con una que realmente ejecute una escritura:

    writeBall: (message) = ballsCollection.add({ createdOn: new Date(), author: store.currentUser, message})

    Observe cómo los dos están completamente desacoplados. Cuando inserta en una colección, se onSnapshotactiva porque ha insertado un elemento. Esto facilita mucho la gestión estatal.

    Ahora tiene un objeto de estado compartido al que cualquier componente de Vue.js puede acceder fácilmente. Démosle un buen uso.

    ¡Publicar cosas!

    Primero, averigüemos quién es el usuario actual.

    Firebase tiene API de autenticación que te ayudan con el trabajo duro de conocer a tu usuario. Habilite los apropiados en Firebase Console en Autenticación → Método de inicio de sesión . Por ahora, voy a utilizar el inicio de sesión de Google, con un botón muy sencillo.

    Autenticación con inicio de sesión de Google

    Firebase no le brinda ninguna ayuda con la interfaz, por lo que tendrá que crear sus propios botones "Iniciar sesión con Google/Facebook/Twitter" y/o campos de entrada de nombre de usuario/contraseña. Su componente de inicio de sesión probablemente se verá así:

    template div button @click.prevent="signInWithGoogle"Log in with Google/button /div/templatescriptimport firebase from 'firebase/app';import 'firebase/auth';export default { methods: { signInWithGoogle() { var provider = new firebase.auth.GoogleAuthProvider(); firebase.auth().signInWithPopup(provider); } }}/script

    Ahora hay una pieza más del rompecabezas de inicio de sesión, y es obtener la currentUservariable en la tienda. Agregue estas líneas a su store.js :

    // When a user logs in or out, save that in the storefirebase.auth().onAuthStateChanged((user) = { store.currentUser = user;});

    Debido a estas tres líneas, cada vez que el usuario que ha iniciado sesión actualmente cambia (inicie o cierre sesión), store.currentUsertambién cambia. ¡Publiquemos algunas bolas! Fanfics de Harry Potter en Español

    El estado de inicio de sesión se almacena en el archivo store.js

    El formulario de entrada es un componente Vue.js separado que está conectado a la writeBallfunción en nuestra tienda, así:

    template form @submit.prevent="formPost" textarea v-model="message" / input type="submit" value="DUNK!" / /form/templatescriptimport { store } from './store';export default { data() { return { message: null, }; }, methods: { formPost() { store.writeBall(this.message); } },}/script

    ¡Impresionante! Ahora la gente puede iniciar sesión y empezar a publicar Balls. Pero espera, nos falta autorización. Queremos que solo puedas publicar bolas tú mismo, y ahí es donde entran las reglas de Firestore . Están compuestas de código estilo Javascript que define los privilegios de acceso a la base de datos. Puede ingresarlos a través de la consola de Firestore, pero también puede usar Firebase CLI para instalarlos desde un archivo en el disco. Instálalo y ejecútalo así:

     

    npm install -g firebase-toolsfirebase loginfirebase init firestore

    Obtendrá un archivo llamado firestore.rules donde podrá agregar autorización para su aplicación. Queremos que cada usuario pueda insertar sus propias bolas, pero no insertar ni editar las de otra persona. El siguiente ejemplo funciona muy bien. Permite que todos lean todos los documentos en la base de datos, pero solo puede insertarlos si ha iniciado sesión y el recurso insertado tiene un campo "autor" que es el mismo que el del usuario actualmente conectado.

    service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read: if true; allow create: if request.auth.uid != null request.auth.uid == request.resource.data.author; } }}

    Parecen sólo unas pocas líneas de código, pero es muy potente y puede volverse complejo muy rápidamente. Firebase está trabajando en mejores herramientas para esta parte, pero por ahora, es prueba y error hasta que se comporte de la manera deseada.

    Si ejecuta firebase deploy, las reglas de Firestore se implementarán y protegerán sus datos de producción en segundos.

    Agregar lógica de servidor

    En tu página de inicio, quieres ver una línea de tiempo con las bolas de tus amigos. Dependiendo de cómo desee determinar qué Balls ve un usuario, realizar esta consulta directamente en la base de datos podría ser un cuello de botella en el rendimiento. Una alternativa es crear una función Firebase Cloud que se active en cada Ball publicado y la agregue a los muros de todos los amigos del autor. De esta manera es asincrónico, sin bloqueo y eventualmente consistente. O en otras palabras, llegará allí.

    Para que los ejemplos sean sencillos, haré una pequeña demostración escuchando las bolas creadas y modificando su mensaje. No porque sea particularmente útil, sino para mostrarle lo fácil que es poner en funcionamiento las funciones de la nube.

    const functions = require('firebase-functions');exports.createBall = functions.firestore .document('balls/{ballId}') .onCreate(event = { var createdMessage = event.data.get('message'); return event.data.ref.set({ message: createdMessage + ', yo!' }, {merge: true});});

    Oh, espera, olvidé decirte dónde escribir este código.

    firebase init functions

    Esto crea el directorio de funciones con index.js . Ese es el archivo en el que puedes escribir tus propias funciones en la nube. O copiar y pegar el mío si te impresiona mucho.

    Cloud Functions le brinda un buen lugar para desacoplar diferentes partes de su aplicación y hacer que se comuniquen de forma asincrónica. O, en estilo de dibujo arquitectónico:

    Comunicación asincrónica entre los diferentes componentes de tu aplicación

     

    Último paso: implementación

    Firebase tiene su opción de Alojamiento disponible para esto y puedes usarla a través de Firebase CLI.

    firebase init hosting

    Elija distcomo directorio público y luego "Sí" para reescribir todas las URL en index.html. Esta última opción te permite usar vue-router para administrar URL bonitas dentro de tu aplicación.

    Ahora hay un pequeño obstáculo: la distcarpeta no contiene un index.htmlarchivo que apunte a la compilación correcta de su código. Para solucionar este problema, agregue un script npm a su package.json:

    { "scripts": { "deploy": "npm run build mkdir dist/dist mv dist/*.* dist/dist/ cp index.html dist/ firebase deploy" }}

    ¡ Ahora simplemente ejecute npm deployy Firebase CLI le mostrará la URL de su código alojado!

    Cuándo utilizar esta arquitectura

    Esta configuración es perfecta para un MVP. La tercera vez que haga esto, tendrá una aplicación web funcional en minutos, respaldada por una base de datos escalable alojada de forma gratuita. Puede comenzar a crear funciones inmediatamente.

    Además, hay mucho espacio para crecer. Si Cloud Functions no es lo suficientemente potente, puede recurrir a una API tradicional que se ejecuta en la ventana acoplable de Google Cloud, por ejemplo. Además, puede actualizar su arquitectura Vue.js con vue-routery vuexy utilizar el poder del paquete web que se incluye en la plantilla vue-cli.

    Sin embargo, no todo son arcoíris y unicornios. La advertencia más notoria es el hecho de que sus clientes hablan inmediatamente con su base de datos. No existe una capa de middleware que pueda utilizar para transformar los datos sin procesar a un formato que sea más fácil para el cliente. Por lo tanto, debe almacenarlo de forma que sea fácil de usar para el cliente. Siempre que sus clientes soliciten un cambio, le resultará bastante difícil ejecutar migraciones de datos en Firebase. Para eso, necesitarás escribir un cliente Firestore personalizado que lea cada registro, lo transforme y lo vuelva a escribir.

    Tómese el tiempo para decidir su modelo de datos. Si necesita cambiar su modelo de datos más adelante, la migración de datos es su única opción.

    Entonces, ¿cuáles son ejemplos de proyectos que utilizan estas herramientas? Entre los grandes nombres que utilizan Vue.js se encuentran Laravel , GitLab y (para los holandeses) nu.nl. Firestore todavía está en versión beta, por lo que todavía no hay muchos usuarios activos allí, pero National Public Radio , Shazam y otros ya utilizan la suite Firebase. He visto a colegas implementar Firebase para el juego Road Warriors basado en Unity que se descargó más de un millón de veces en los primeros cinco días. Puede requerir bastante carga y es muy versátil con clientes para web, dispositivos móviles nativos, Unity, etc.

    ¡¿Dónde firmo?!

    Si desea obtener más información, considere los siguientes recursos:

    • Muestra de trabajo que contiene todo el código anterior
    • Documentación sobre Vue.js , vue-router , vue-cli
    • Documentación sobre Firebase
    • Una forma entretenida de conocer mejor Firebase: su blog de YouTube

    ¡Feliz codificación!

    Otras lecturas

    • JavaScript básico, bibliotecas y la búsqueda de una representación DOM con estado
    • Una guía sencilla para la recuperación de modelos de lenguaje de generación aumentada
    • Cómo afrontar grandes actualizaciones de herramientas en organizaciones grandes
    • Pasar de Vue 1 a Vue 2 y a Vue 3: un estudio de caso de migración de un sistema CMS sin cabeza

    (da, ra, hj, il, mrn)Explora más en

    • javascript
    • Herramientas
    • vista





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Empiece a trabajar con Vue.js y Firestore

    Empiece a trabajar con Vue.js y Firestore

    Deploy Fast. Deploy Smart Register! Índice Empecemos

    programar

    es

    https://aprendeprogramando.es/static/images/programar-empiece-a-trabajar-con-vue-952-0.jpg

    2024-05-20

     

    Empiece a trabajar con Vue.js y Firestore
    Empiece a trabajar con Vue.js y Firestore

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20