Cursos Empresas Blog Live Conf Eventos Precios

0:0010:27

Recursos

Resumen

¿Cómo integrar comentarios en nuestra aplicación Pubstragram?

La integración de comentarios en cualquier aplicación social es vital para fomentar la interacción entre los usuarios. En Pubstragram, nuestro proyecto, se implementa esta funcionalidad con elegancia y eficiencia al interactuar con una API. A continuación, exploraremos los pasos y prácticas relacionadas con la integración de comentarios en cada fotografía, colaborando así a un desarrollo web robusto.

¿Cómo administrar y recibir propiedades de comentarios?

Para empezar, cargamos las propiedades de comentarios en nuestro código asegurándonos de recibirlas adecuadamente mediante variables. Usamos una técnica que inicializa los comentarios con un arreglo vacío para evitar problemas en la aplicación al no haber comentarios.

let comments = props.comments || [];

¿Cómo iterar sobre los comentarios recibidos?

La iteración sobre los comentarios nos permite mostrar cada uno de ellos cómodamente en el frontend. Implementamos un bucle que se asegura de obtener la información correcta, como el ID y el texto del comentario:

{#each comments as comment (comment.id)}
  <div>
    <strong>{comment.username}</strong>: {comment.text}
  </div>
{/each}

¿Cómo conectar el formulario a la función de agregar comentarios?

Añadir comentarios es simple tras configurar un formulario que escucha eventos de envío. Utilizamos la función preventDefault() para manejar el evento sin recargar la página, y luego llamamos a una función específica para agregar los comentarios.

<form on:submit|preventDefault={addComment}>
  <input id="text" name="text" placeholder="Escribe un comentario..." />
  <button type="submit">Post</button>
</form>

¿Cómo crear la función addComment?

La lógica dentro de addComment es crucial. Recibimos el evento, extraemos el texto del input, validamos el contenido, y preparamos el objeto que será enviado a la API. Para asegurarnos de que cada comentario tenga una ID única, usamos Date.now().

function addComment(event) {
  const MSG = event.target.text.value;
  if (MSG.length > 3) {
    const message = {
      id: Date.now(),
      text: MSG,
      username: 'GNDX',
    };
    comments = [...comments, message];
    event.target.text.value = '';
  }
}

¿Cómo validar y probar nuestra aplicación?

La validación de la aplicación es costumbre aconsejable para garantizar que las funcionalidades respondan conforme a nuestras expectativas. En este contexto, probamos que los comentarios se agreguen correctamente y que el input se limpie después del envío.

Los pasos que seguimos son:

Revisar nuestra API y los componentes manipulados.
Probar el flujo real de la aplicación para asegurarnos de que las imágenes y comentarios se carguen correctamente.
Asegurar que la aplicación no muestre errores en la consola y que el frontend esté responsivo y limpio.

En conclusión, a través de estas prácticas, no solo mejoramos la funcionalidad de Pubstragram, sino que también fortalecemos nuestras habilidades en el desarrollo de aplicaciones web, fomentando la interacción y el compromiso del usuario con herramientas de gran utilidad como los comentarios. ¡Continúa perfeccionando tus habilidades y síguete enriqueciendo con nuevas experiencias!

Integración de API para Comentarios en Pubstragram

Curso de Svelte

Clase 21 / 26

Ver clases

Integración de API para Comentarios en Pubstragram

Curso de Svelte

Clase 21 de 26

Clase 21 / 26

Integración de API para Comentarios en Pubstragram

Curso de Svelte

Clase 21 / 26

Ver clases

function addComment(event) { const MSG = event.target.text.value; if (MSG.length > 3) { const message = { id: Date.now(), text: MSG, username: 'GNDX', }; comments = [...comments, message]; event.target.text.value = ''; } }

Comentarios

Luis Angel José Portillo Arévalo#1284697

En mi caso yo no obtengo el texto del comentario desde el evento, cree una variable y la bindee al input:

<script>
  export let comments = [];
  let comment = '';
  
  function addComment() {
    comments = [...comments, {
      id: Date.now(),
      text: comment,
      username: 'luisxxor'
    }];
    comment = '';
  }
</script>```

  <form on:submit|preventDefault={addComment}>
    <input type="text"
      class="Comments-input"
      placeholder="Agregar comentario..."
      id="text"
      bind:value={comment}
    >
    <button type="submit">
      Post
    </button>
  </form>```

Yafté Roberto Muñoz Lujano#2871510

Esta es la solución ya que event esta deprecado.

function addComment(e) {
    const msg = e.target.text.value;
    if (msg.length > 3) {
      const message = {
        id: Date.now(),
        text: msg,
        username: "redyafte",
      };
      comments = [...comments, message];
      e.target.text.value = "";
    }
  }

Edgardo Marcano#1635580

Que curso tan maravilloso, estoy aprendiendo infinidades de cosas nuevas. Este es mi primer Framework JS

Wilson Fernando Antury Torres#1194307

Podemos poner la data en un store? de ésta forma también funcionaría. Pero sería buena práctica? Qué es mejor?

CRISTIAN FABIAN HENAO RANGEL#3762754

<script>
  export let comments = [];
  let comment = '';
  
  function addComment() {
    comments = [...comments, {
      id: Date.now(),
      text: comment,
      username: 'luisxxor'
    }];
    comment = '';
  }
</script>```

  <form on:submit|preventDefault={addComment}>
    <input type="text"
      class="Comments-input"
      placeholder="Agregar comentario..."
      id="text"
      bind:value={comment}
    >
    <button type="submit">
      Post
    </button>
  </form>```

function addComment(e) {
    const msg = e.target.text.value;
    if (msg.length > 3) {
      const message = {
        id: Date.now(),
        text: msg,
        username: "redyafte",
      };
      comments = [...comments, message];
      e.target.text.value = "";
    }
  }

Comentarios

Luis Angel José Portillo Arévalo#1284697

En mi caso yo no obtengo el texto del comentario desde el evento, cree una variable y la bindee al input:

<script>
  export let comments = [];
  let comment = '';
  
  function addComment() {
    comments = [...comments, {
      id: Date.now(),
      text: comment,
      username: 'luisxxor'
    }];
    comment = '';
  }
</script>```

  <form on:submit|preventDefault={addComment}>
    <input type="text"
      class="Comments-input"
      placeholder="Agregar comentario..."
      id="text"
      bind:value={comment}
    >
    <button type="submit">
      Post
    </button>
  </form>```

Yafté Roberto Muñoz Lujano#2871510

Esta es la solución ya que event esta deprecado.

function addComment(e) {
    const msg = e.target.text.value;
    if (msg.length > 3) {
      const message = {
        id: Date.now(),
        text: msg,
        username: "redyafte",
      };
      comments = [...comments, message];
      e.target.text.value = "";
    }
  }

Edgardo Marcano#1635580

Que curso tan maravilloso, estoy aprendiendo infinidades de cosas nuevas. Este es mi primer Framework JS

Wilson Fernando Antury Torres#1194307

Podemos poner la data en un store? de ésta forma también funcionaría. Pero sería buena práctica? Qué es mejor?

CRISTIAN FABIAN HENAO RANGEL#3762754

<script>
  export let comments = [];
  let comment = '';
  
  function addComment() {
    comments = [...comments, {
      id: Date.now(),
      text: comment,
      username: 'luisxxor'
    }];
    comment = '';
  }
</script>```

  <form on:submit|preventDefault={addComment}>
    <input type="text"
      class="Comments-input"
      placeholder="Agregar comentario..."
      id="text"
      bind:value={comment}
    >
    <button type="submit">
      Post
    </button>
  </form>```

function addComment(e) {
    const msg = e.target.text.value;
    if (msg.length > 3) {
      const message = {
        id: Date.now(),
        text: msg,
        username: "redyafte",
      };
      comments = [...comments, message];
      e.target.text.value = "";
    }
  }

Comentarios (14)14 comentarios

Luis Angel José Portillo Arévalo

Hace 6 años

Juan

Es una buena alternativa, pero en lo personal te sugiero que siempre que algo no te funcione como se supone que debería indagues hasta encontrar la solución ya que estas son de las cosas que nos ayudan a convertirnos en mejores developers (Conocer el por qué de las cosas).

Cristian Daniel Jesus Rios

Excelente maestro! tu solucion me sirvio muchisimo :D por alguna razon no me funciono el code del video... y eso que lo mire de arriba abajo... Quiero entender la logica de lo que hiciste... Pasaste todos los comentarios y los desectructurastes dentro de la funcion para que se mantengan los viojos coment y cuando se hace un envio de msg nuevo no lo pise y lo ponga abajo... Por lo que entiendo... Ahora mi duda es..?? a que te referis con hacer un "bind" y para que sive, cual seria la logica? muchísimas gracias de corazón!

Yafté Roberto Muñoz Lujano

Hace 5 años

Edgardo Marcano

Julian David Alzate Cuervo

El mío tambien

Wilson Fernando Antury Torres

Hace 7 años

Jaime David Burbano Montoya

También estaría bien. Lo que podrías hacer es consumir el API en el store y exportar cada una de las variables e importarlas en los componentes que necesitas.

Es más esta sería la opción ideal, porque si tu proyecto crece solo importas las variables necesarias a tus componentes y no necesitarías pasarla como propiedades desde tu componente a padre a cada uno de tus componentes hijos hasta llegar al componente que necesitas.

Gracias @aimeburbano, me queda claro el tema.

CRISTIAN FABIAN HENAO RANGEL

Hace 4 años

la ruta del api ya no está disponible :(

Kenneth Angulo L

Hace 2 meses

Repite, respuesta fallo

No. El bloque #each solo recorre arreglos o listas iterables.

Si intentas pasarle un objeto plano, Svelte te dará un error porque un objeto no tiene un orden secuencial nativo. Para recorrer las propiedades de un objeto con #each, primero debes convertirlo a un arreglo usando métodos como Object.entries() o Object.keys().

Uriel Solis Salinas

Alguien me puede explicar el por qué se puso el "(.comment.id)" en el ciclo para identificar los comentarios y no solo le puso "#each comments as comment"?

Edward Alarcón

Hace 6 meses

Esto llega un poco tarde, pero tiene una razón de rendimiento... por dentro cuando especificas un key (así se le llama a ese (comment.id) dentro del bloque {#each}. internamente Svelte determina que ese va a ser el key para identificar ese elemento dentro. del objeto y vigilarlo (lo llaman reactividad profunda)

Es decir, por dentro Svelte guarda cada elemento de un objeto como una variable independiente, si quiere buscarla, ese ID le permite referenciarla. O sea, Svelte puede ver la memoria y ver referencias de objetos que hayan cambiado... y dice: el contendio es el mismo, lo dejo quieto.. o : el contenido de este ID cambió, debo actualziarlo.

en el caso de carga de contenidos vía API: si por ejemplo haces un llamado y trajo 5 posts, y renderizas en un bloque each sin ese key (posts.id) ... en memoria esos 5 posts quedan sin un identificador. SI 20 segundos después vuelves a consultar la API y ahora trae 6 posts.... lo que hace svelte es destruir todo ese objeto que no tenía reactividad profunda, destruye toda la lista y vuelve a renderizar todo el objeto (los 5 que ya existían + 1 post nuevo)

Ahora, mismo caso... pero cuando lo renderizaste usaste el (posts.id) ... en ese segundo llamado de la API, Svelte al interno dicen: este objeto es el mismo, solo cambió una variable nueva, la agrego con ese ID a lo que yo ya tengo. o si algún elemento con un ID que ya tuviera en memoria, le cambió alguna propiedad (como la foto o el texto) en vez de destruir el componente, solo actualiza la variable que cambió.

Es por puro rendimiento. Técnicamente sin ese (comment.id) todo funcionará, pero en aplicaciones de gran escala, es matar el rendimiento que da Svelte.

Antonio Sebastián Dromundo Escobedo

¿Alguien sabe porque mi botón no agrega el post? Hice la función idéntica que la del video, no tengo errores ni warnings, pero no agrega el comentario.

Ya lo resolví, tenía un error en la estructura de la clase Comments-add. Verifiquen que los inputs estén asignados correctamente

Javier Romero

compañeros tengo una pregunta, porque me salen estos warnings en la terminal de Hyper Ubuntu, observen por favor y sera que me pueden ayudar a quitarlos.

según lo que estoy leyendo en ese warning es que no estoy usando los siguientes selectores de CSS que me esta mostrando en la terminal, otra pregunta que me hago es donde los puedo usar para quitar ese warning ? Gracias y espero sus respuestas....

Kenny Emmanuel Lajara Aquino

Es correcto que ese es el motipo por el cual aparecen los Warnings. No creo que lo adecuado sea utilizarlos ahora sin saber donde o porqué. Asumo que si esos selectores están ahí es porque se utilizarán más adelante en el curso. En caso de que lleguemos al final del curso, si todavía no se han utilizado, entonces probablemente sea buena idea borrarlos. Mientras tanto, solo ignora las advertencias.

Alex Gallardo

Hace 3 años

Porque esto no funciona:

comments.push(message);

y esto si:

comments=[...comments,message];

Mauricio Moreno Morales

Me aparece este error en la consola y se me queda en cargando y no sale nada :/

DevTools failed to load SourceMap: Could not load content for webpack:///node_modules/sockjs-client/dist/sockjs.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Encontré el error de por que no me la página y es que en app.svelte escribí mal una linea.

Sin embargo el problema aún me sale en la consola pero ya todo funciona bien

Uriel Mojica Mejía

Por qué en el input debemos entrar al id? Lo pregunto ya que en ReactJS no es necesario...

En React se puede, pero no es necesario, igual que en Svelte, en mi caso yo lo que hice fue crear una variable comment y le hice bind al input, asi tampoco hay que acceder al parametro de evento del onSubmit.

Naldo Duran

👌

Recursos

Resumen

Integración de API para Comentarios en Pubstragram

Integración de API para Comentarios en Pubstragram

Integración de API para Comentarios en Pubstragram

Progreso del curso

Introducción

Elementos básicos de Svelte

Configuración del proyecto

Desarrollo de la aplicación

Deployment

Integración de API para Comentarios en Pubstragram

Integración de API para Comentarios en Pubstragram

Recursos

Resumen

¿Cómo integrar comentarios en nuestra aplicación Pubstragram?

¿Cómo administrar y recibir propiedades de comentarios?

¿Cómo iterar sobre los comentarios recibidos?

¿Cómo conectar el formulario a la función de agregar comentarios?

¿Cómo crear la función `addComment`?

¿Cómo validar y probar nuestra aplicación?

Comentarios

Recursos

Resumen

¿Cómo integrar comentarios en nuestra aplicación Pubstragram?

¿Cómo administrar y recibir propiedades de comentarios?

¿Cómo iterar sobre los comentarios recibidos?

¿Cómo conectar el formulario a la función de agregar comentarios?

¿Cómo crear la función `addComment`?

¿Cómo validar y probar nuestra aplicación?

Comentarios

Resumen

Integración de API para Comentarios en Pubstragram

Integración de API para Comentarios en Pubstragram

Integración de API para Comentarios en Pubstragram

Integración de API para Comentarios en Pubstragram

Integración de API para Comentarios en Pubstragram

Resumen

¿Cómo integrar comentarios en nuestra aplicación Pubstragram?

¿Cómo administrar y recibir propiedades de comentarios?

¿Cómo iterar sobre los comentarios recibidos?

¿Cómo conectar el formulario a la función de agregar comentarios?

¿Cómo crear la función addComment?

¿Cómo validar y probar nuestra aplicación?

Comentarios

Resumen

¿Cómo integrar comentarios en nuestra aplicación Pubstragram?

¿Cómo administrar y recibir propiedades de comentarios?

¿Cómo iterar sobre los comentarios recibidos?

¿Cómo conectar el formulario a la función de agregar comentarios?

¿Cómo crear la función addComment?

¿Cómo validar y probar nuestra aplicación?

Comentarios

¿Cómo crear la función `addComment`?

¿Cómo crear la función `addComment`?