Cómo construir su propio sistema de comentarios usando Firebase

 

 

 


Índice
  1. ¿Qué es Firebase?
  2. Introducción al proyecto
  3. Cómo funciona la sección de comentarios
  4. 1. Agregar base de fuego
    1. ¿Está bien exponer su clave API de Firebase?
    2. ¿Cómo utilizar Firestore?
    3. ¿Cómo estructurar los datos?
    4. ¿Cómo obtener datos de Firestore?
    5. ¿Cómo enviar datos a Firestore?
  5. 2. Crear fecha de muestra
  6. 3. Obtenga los datos de los comentarios
  7. 4. Comentarios de la tienda
  8. 5. Reforzar las normas de seguridad
  9. A crear su propia sección de comentarios

¿Alguna vez quisiste tener una sección de comentarios para tu blog, pero te sentiste abrumado por el alto costo y las soluciones de mantenimiento? Firebase puede ser tu salvador. En esta guía, aprenderemos cómo agregar una sección de comentarios a su blog con Firebase, mientras aprendemos los conceptos básicos de Firebase en el camino.

 

Una sección de comentarios es una excelente manera de crear una comunidad para tu blog. Recientemente, cuando comencé a escribir en el blog, pensé en agregar una sección de comentarios. Sin embargo, no fue fácil. Los sistemas de comentarios alojados, como Disqus y Commento, presentan sus propios problemas:

  • Son dueños de tus datos.
  • No son gratis.
  • No puedes personalizarlos mucho.

Entonces, decidí crear mi propio sistema de comentarios. Firebase parecía una alternativa de alojamiento perfecta para ejecutar un servidor back-end.

En primer lugar, obtienes todos los beneficios de tener tu propia base de datos: controlas los datos y puedes estructurarlos como quieras. En segundo lugar, no es necesario configurar un servidor back-end. Puedes controlarlo fácilmente desde la parte frontal. Es como tener lo mejor de ambos mundos: un sistema alojado sin la molestia de un back-end.

 

En esta publicación, eso es lo que haremos. Aprenderemos cómo configurar Firebase con Gatsby, un generador de sitios estáticos. Pero los principios se pueden aplicar a cualquier generador de sitios estáticos.

¡Vamos a sumergirnos!

¿Qué es Firebase?

Firebase es un backend como servicio que ofrece herramientas para desarrolladores de aplicaciones, como bases de datos, alojamiento, funciones en la nube, autenticación, análisis y almacenamiento.

Cloud Firestore (la base de datos de Firebase) es la funcionalidad que usaremos para este proyecto. Es una base de datos NoSQL. Esto significa que no está estructurado como una base de datos SQL con filas, columnas y tablas. Puedes considerarlo como un gran árbol JSON.

Introducción al proyecto

Inicialicemos el proyecto clonando o descargando el repositorio de GitHub .

He creado dos ramas para cada paso (una al principio y otra al final) para que le resulte más fácil realizar un seguimiento de los cambios a medida que avanzamos.

Ejecutemos el proyecto usando el siguiente comando:

gatsby develop

Si abre el proyecto en su navegador, verá lo básico de un blog básico.

( Vista previa grande )

La sección de comentarios no funciona. Simplemente carga un comentario de muestra y, una vez enviado el comentario, registra los detalles en la consola.

Nuestra tarea principal es hacer funcionar la sección de comentarios.

Cómo funciona la sección de comentarios

Antes de hacer nada, comprendamos cómo funciona el código de la sección de comentarios.

Cuatro componentes manejan las secciones de comentarios:

  • blog-post.js
  • Comments.js
  • CommentForm.js
  • Comment.js

Primero, necesitamos identificar los comentarios de una publicación. Esto se puede hacer creando una identificación única para cada publicación del blog, o podemos usar el slug, que siempre es único.

El blog-post.jsarchivo es el componente de diseño de todas las publicaciones del blog. Es el punto de entrada perfecto para entender una publicación de blog. Esto se hace mediante una consulta GraphQL.

export const query = graphql` query($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { html frontmatter { title } fields { slug } } }`

Antes de enviarlo al Comments.jscomponente, usemos el substring()método para deshacernos de la barra diagonal ( /) que Gatsby agrega al slug.

 

const slug = post.fields.slug.substring(1, post.fields.slug.length - 1)return ( Layout div className="container" h1{post.frontmatter.title}/h1 div dangerouslySetInnerHTML={{ __html: post.html }} / Comments comments={comments} slug={slug} / /div /Layout ) }

El Comments.jscomponente asigna cada comentario y pasa sus datos a Comment.js, junto con las respuestas. Para este proyecto, he decidido ir un nivel más profundo con el sistema de comentarios.

El componente también se carga CommentForm.jspara capturar cualquier comentario de nivel superior.

const Comments = ({ comments, slug }) = { return ( div h2Join the discussion/h2 CommentForm slug={slug} / CommentList {comments.length 0 comments .filter(comment = !comment.pId) .map(comment = { let child if (comment.id) { child = comments.find(c = comment.id === c.pId) } return ( Comment key={comment.id} child={child} comment={comment} slug={slug} / ) })} /CommentList /div ) }

Pasemos a CommentForm.js. Este archivo es simple, genera un formulario de comentarios y maneja su envío. El método de envío simplemente registra los detalles en la consola.

const handleCommentSubmission = async e = { e. preventDefault() let comment = { name: name, content: content, pId: parentId ∣∣ null, time: new Date(), } setName("") setContent("") console.log(comment) }

En el Comment.jsexpediente pasan muchas cosas. Dividámoslo en pedazos más pequeños.

Primero, hay un SingleCommentcomponente que genera un comentario.

Estoy usando la API Adorable para obtener un avatar genial. La biblioteca Moment.js se utiliza para representar el tiempo en un formato legible por humanos.

const SingleComment = ({ comment }) = ( div div className="flex-container" div className="flex" img src="https://api.adorable.io/avazars/65/[email protected]" alt="Avatar" / /div div className="flex" p className="comment-author" {comment.name} spansays/span /p {comment.time} (time(moment(comment.time.toDate()).calendar()}/time)} /div /div /p{comment.content}/p /div)

El siguiente en el archivo es el Commentcomponente. Este componente muestra un comentario secundario si se le pasó algún comentario secundario. De lo contrario, muestra un cuadro de respuesta, que se puede activar y desactivar haciendo clic en el botón "Responder" o en el botón "Cancelar respuesta".

 

const Comment = ({ comment, child, slug }) = { const [showReplyBox, setShowReplyBox] = useState(false) return ( CommentBox SingleComment comment={comment} / {child ( CommentBox child className=comment-reply" SingleComment comment={child} / /CommentBox )} {!child ( div {showReplyBox ? ( div button className="push_button red bare" onClick={() = setShowReplyBoy(false)} Cancel Reply /button CommentForm parentId={comment.id} slug={slug} / /div ) : ( button className="push_button red bare" onClick={() = setShowReplyBox(true)} Reply /button )} /div )} /div )}/CommentBox

Ahora que tenemos una descripción general, veamos los pasos para crear nuestra sección de comentarios.

1. Agregar base de fuego

Primero, configuremos Firebase para nuestro proyecto.

Empiece por registrarse. Vaya a Firebase y regístrese para obtener una cuenta de Google. Si no tiene uno, haga clic en "Comenzar".

Haga clic en "Agregar proyecto" para agregar un nuevo proyecto. Agregue un nombre para su proyecto y haga clic en "Crear un proyecto".

( Vista previa grande )

Una vez que hayamos creado un proyecto, necesitaremos configurar Cloud Firestore.

En el menú del lado izquierdo, haga clic en "Base de datos". Una vez que se abra una página que diga "Cloud Firestore", haga clic en "Crear base de datos" para crear una nueva base de datos de Cloud Firestore.

( Vista previa grande )

Cuando aparezca la ventana emergente, elija "Iniciar en modo de prueba". A continuación, elija la ubicación de Cloud Firestore más cercana a usted.

( Vista previa grande )

Una vez que vea una página como esta, significa que ha creado con éxito su base de datos de Cloud Firestore.

( Vista previa grande )

Terminemos configurando la lógica de la aplicación. Regrese a la aplicación e instale Firebase: Foro de Ciclismo

yarn add firebase

Agregue un nuevo archivo, firebase.jsen el directorio raíz. Pegue este contenido en él:

import firebase from "firebase/app"import "firebase/firestore"var firebaseConfig = 'yourFirebaseConfig'firebase.initializeApp(firebaseConfig)export const firestore = firebase.firestore()export default firebase

Deberá reemplazarlo yourFirebaseConfigpor el de su proyecto. Para encontrarlo, haga clic en el ícono de ajustes junto a "Descripción general del proyecto" en la aplicación Firebase.

( Vista previa grande )

Esto abre la página de configuración. Debajo del subtítulo de tu aplicación, haz clic en el ícono web, que se ve así:

( Vista previa grande )

Esto abre una ventana emergente. En el campo "Apodo de la aplicación", ingrese cualquier nombre y haga clic en "Registrar aplicación". Esto le dará a tu firebaseConfigobjeto.

 

!-- The core Firebase JS SDK is always required and must be listed first --script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"/script!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --script // Your web app’s Firebase configuration var firebaseConfig = { ... }; // Initialize Firebase firbase.initializeApp(firebaseConfig);/script

Copie solo el contenido del firebaseConfigobjeto y péguelo en el firebase.jsarchivo.

¿Está bien exponer su clave API de Firebase?

Sí. Según lo indicado por un ingeniero de Google , exponer su clave API está bien.

El único propósito de la clave API es identificar su proyecto con la base de datos de Google. Si ha establecido reglas de seguridad estrictas para Cloud Firestore, no debe preocuparse si alguien obtiene su clave API.

Hablaremos de las reglas de seguridad en la última sección.

Por ahora, estamos ejecutando Firestore en modo de prueba, por lo que no debes revelar la clave API al público.

¿Cómo utilizar Firestore?

Puede almacenar datos en uno de dos tipos:

  • colección
    Una colección contiene documentos. Es como una serie de documentos.
  • documento
    Un documento contiene datos en un par campo-valor.

Recuerde que una colección puede contener sólo documentos y no otras colecciones. Pero un documento puede contener otras colecciones.

Esto significa que si queremos almacenar una colección dentro de una colección, entonces almacenaríamos la colección en un documento y almacenaríamos ese documento en una colección, así:

{collection-1}/{document}/{collection-2}

¿Cómo estructurar los datos?

Cloud Firestore es de naturaleza jerárquica, por lo que la gente tiende a almacenar datos como este:

blog/{blog-post-1}/content/comments/{comment-1}

Pero almacenar datos de esta manera a menudo presenta problemas.

Digamos que desea recibir un comentario. Tendrás que buscar el comentario almacenado en lo más profundo de la colección del blog. Esto hará que su código sea más propenso a errores. Chris Esplin recomienda no utilizar nunca subcolecciones .

Recomendaría almacenar datos como un objeto aplanado:

blog-posts/{blog-post-1}comments/{comment-1}

De esta manera, puede obtener y enviar datos fácilmente.

¿Cómo obtener datos de Firestore?

Para obtener datos, Firebase te ofrece dos métodos:

  • get()
    Esto es para obtener el contenido una vez.
  • onSnapshot()
    Este método le envía datos y luego continúa enviando actualizaciones a menos que cancele su suscripción.

¿Cómo enviar datos a Firestore?

Al igual que con la obtención de datos, Firebase tiene dos métodos para guardar datos:

  • set()
    Esto se utiliza para especificar el ID de un documento.
  • add()
    Esto se utiliza para crear documentos con identificaciones automáticas.

Lo sé, esto ha sido mucho para entender. Pero no se preocupe, revisaremos estos conceptos nuevamente cuando lleguemos al proyecto.

 

2. Crear fecha de muestra

El siguiente paso es crear algunos datos de muestra para que los consultemos. Hagamos esto yendo a Firebase.

Vaya a Cloud Firestore. Haga clic en "Iniciar una colección". Ingrese commentsel "ID de colección", luego haga clic en "Siguiente".

( Vista previa grande )

Para el "ID del documento", haga clic en "ID automática". Ingresa los siguientes datos y haz clic en “Guardar”.

( Vista previa grande )

Mientras ingresa datos, asegúrese de que los "Campos" y los "Tipos" coincidan con la captura de pantalla anterior. Luego, haga clic en "Guardar".

Así es como se agrega un comentario manualmente en Firestore. El proceso parece engorroso, pero no te preocupes: a partir de ahora, nuestra aplicación se encargará de añadir comentarios.

En este punto, nuestra base de datos se ve así: comments/{comment}.

3. Obtenga los datos de los comentarios

Nuestros datos de muestra están listos para consultar. Comencemos obteniendo los datos para nuestro blog.

Vaya a blog-post.jse importe Firestore desde el archivo de Firebase que acabamos de crear.

import {firestore} from "../../firebase.js"

Para consultar, usaremos el useEffectgancho de React. Si aún no lo has hecho, importémoslo también.

useEffect(() = { firestore .collection(`comments`) .onSnapshot(snapshot = { const posts = snapshot.docs .filter(doc = doc.data().slug === slug) .map(doc = { return { id: doc.id, ...doc.data() } }) setComments(posts) })}, [slug])

El método utilizado para obtener datos es onSnapshot. Esto se debe a que también queremos escuchar los cambios de estado. Así, los comentarios se actualizarán sin que el usuario tenga que actualizar el navegador.

Usamos los métodos filtery mappara encontrar los comentarios cuyo slug coincida con el slug actual.

Una última cosa en la que debemos pensar es en la limpieza. Debido a que onSnapshotcontinúa enviando actualizaciones, esto podría introducir una pérdida de memoria en nuestra aplicación. Afortunadamente, Firebase proporciona una buena solución .

useEffect(() = { const cleanUp = firestore .doc(`comments/${slug}`) .collection("comments") .onSnapshot(snapshot = { const posts = snapshot.docs.map(doc = { return { id: doc.id, ...doc.data() } }) setComments(posts) }) return () = cleanUp() }, [slug])

Una vez que hayas terminado, ejecuta gatsby developpara ver los cambios. Ahora podemos ver nuestra sección de comentarios obteniendo datos de Firebase.

( Vista previa grande )

Trabajemos en almacenar los comentarios.

4. Comentarios de la tienda

Para almacenar comentarios, navegue hasta el CommentForm.jsarchivo. Importemos Firestore a este archivo también.

import { firestore } from "../../firebase.js"

Para guardar un comentario en Firebase, usaremos el add()método porque queremos que Firestore cree documentos con una identificación automática.

 

Hagamos eso en el handleCommentSubmissionmétodo.

firestore.collection(`comments`).add(comment).catch(err = { console.error('error adding comment: ', err) })

Primero, obtenemos la referencia a la colección de comentarios y luego agregamos el comentario. También estamos utilizando el catchmétodo para detectar cualquier error al agregar comentarios.

En este punto, si abre un navegador, podrá ver la sección de comentarios funcionando. Podemos agregar nuevos comentarios, así como publicar respuestas. Lo que es más sorprendente es que todo funciona sin que tengamos que actualizar la página.

( Vista previa grande )

También puede consultar Firestore para ver si está almacenando los datos.

( Vista previa grande )

Finalmente, hablemos de algo crucial en Firebase: las reglas de seguridad.

5. Reforzar las normas de seguridad

Hasta ahora, hemos estado ejecutando Cloud Firestore en modo de prueba. Esto significa que cualquier persona con acceso a la URL puede agregar y leer nuestra base de datos. Eso da miedo.

Para abordar esto, Firebase nos proporciona reglas de seguridad. Podemos crear un patrón de base de datos y restringir ciertas actividades en Cloud Firestore.

Además de las dos operaciones básicas (lectura y escritura), Firebase ofrece operaciones más granulares: obtener, enumerar, crear, actualizar y eliminar.

Una operación de lectura se puede dividir en:

  • get
    Consigue un solo documento.
  • list
    Obtenga una lista de documentos o una colección.

Una operación de escritura se puede dividir como:

  • create
    Crea un nuevo documento.
  • update
    Actualizar un documento existente.
  • delete
    Eliminar un documento.

Para proteger la aplicación, regrese a Cloud Firestore. En "Reglas", ingresa esto:

service cloud.firestore { match /databases/{database}/documents { match /comments/{id=**} { allow read, create; } }}

En la primera línea definimos el servicio, que en nuestro caso es Firestore. Las siguientes líneas le dicen a Firebase que cualquier cosa dentro de la commentscolección se puede leer y crear.

Si hubiéramos usado esto:

allow read, write;

… eso significaría que los usuarios podrían actualizar y eliminar comentarios existentes, lo cual no queremos.

Las reglas de seguridad de Firebase son extremadamente poderosas y nos permiten restringir ciertos datos, actividades e incluso usuarios.

A crear su propia sección de comentarios

¡Felicitaciones! Acabas de ver el poder de Firebase. Es una herramienta excelente para crear aplicaciones seguras y rápidas.

Hemos creado una sección de comentarios súper simple. Pero nada le impide explorar más posibilidades:

  • Agregue imágenes de perfil y guárdelas en Cloud Storage para Firebase;
  • Utilice Firebase para permitir a los usuarios crear una cuenta y autenticarlos mediante la autenticación de Firebase;
  • Utilice Firebase para crear comentarios en línea similares a los de Medium.

Una excelente manera de comenzar sería consultar la documentación de Firestore .

Finalmente, vayamos a la sección de comentarios a continuación y analicemos su experiencia al crear una sección de comentarios con Firebase.

Útiles bits de front-end y UX, entregados una vez por semana.

Con herramientas que le ayudarán a realizar mejor su trabajo. Suscríbase y obtenga el PDF de las listas de verificación de diseño de interfaz inteligente de Vitaly por correo electrónico.

En front-end y UX . Con la confianza de más de 207.000 personas.

(ra, yk, al, il)Explora más en

  • javascript
  • base de fuego
  • backend
  • Generadores estáticos





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

Cómo construir su propio sistema de comentarios usando Firebase

Cómo construir su propio sistema de comentarios usando Firebase

Índice ¿Qué es Firebase? Introducción al pr

programar

es

https://aprendeprogramando.es/static/images/programar-como-construir-su-propio-sistema-de-comentarios-usando-firebase-1055-0.jpg

2024-05-21

 

Cómo construir su propio sistema de comentarios usando Firebase
Cómo construir su propio sistema de comentarios usando Firebase

 

 

Top 20