Introducción

1

Implementación de Aplicaciones Web con Svelte

2

Introducción a Svelte: Creación de Interfaces de Usuario Simples

Elementos básicos de Svelte

3

Primeros Pasos con Svelte: Instalación y Configuración Básica

4

Estilos CSS y Variables Globales en Componentes Svelte

5

Creación e Importación de Componentes en Svelt

6

Reactividad en Svelt: Creación de un Contador Interactivo

7

Componentes Svelte: Uso de Propiedades y Valores por Defecto

8

Condicionales y Dark Mode en Componentes Svelte

9

Estructuras de Control en Svelte: Iteración de Arreglos y Componentes

10

Eventos DOM y Binding de Datos en Svelte

11

Manejo del ciclo de vida de componentes en Svelte

12

Reactividad en Svelte: Uso de Stores para Componentes Compartidos

Configuración del proyecto

13

Creación de una Red Social con Svelte y Git

14

Configuración de Webpack para Proyectos Svelte

15

Creación de un Proyecto Web con HTML5 y Svelte paso a paso

Desarrollo de la aplicación

16

Estructuración de Proyectos Svelte: Componentes y Configuración Básica

17

Estructuración de Headers y Sidebars en Aplicaciones Web

18

Estructura de Componente Timeline en Svelte para Pubstagram

19

Estilos CSS para Aplicaciones con Svelte

20

Conexión de Aplicaciones Svelte a APIs Públicas

21

Integración de API para Comentarios en Pubstragram

22

Creación de un Modal para Compartir en Facebook con Svelte

23

"Implementación de Likes y Stores en Svelte para Pubsstagram"

Deployment

24

Despliegue de Aplicaciones con Netlify y GitHub

25

Desarrollo de Aplicaciones Web con Svelte y PUXTgram

26

Programación en Python para Principiantes

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Integración de API para Comentarios en Pubstragram

21/26
Recursos

¿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!

Aportes 9

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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>```

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 = "";
    }
  }

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

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

la ruta del api ya no está disponible 😦

Porque esto no funciona: comments.push(message); y esto si: comments=\[...comments,message];

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

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

👌