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

Header Likes

23/26
Recursos

¿Cómo implementar likes y bookmarks en tu aplicación Svelte?

Integrar funcionalidades como los "likes" o "bookmarks" puede añadir un toque interactivo a cualquier aplicación web, similar a las redes sociales modernas como Instagram. En este artículo, aprenderás cómo implementarlas en una aplicación Svelte, gestionando el estado de forma eficiente con Svelte Store.

¿Cómo configurar variables para like y bookmark?

Iniciaremos añadiendo variables necesarias para los "likes" y "bookmarks". Este proceso implica crear variables booleanas en el archivo Svelte:

let like = false;
let bookmark = false;

Estas variables mantendrán el estado de los "likes" y "bookmarks" para cada publicación.

¿Cómo crear una función para manejar likes?

El siguiente paso es implementar una función que altere el estado de la variable like cuando un usuario interactúa con el botón de corazón.

function handleLike() {
  like = !like;
}

Esta función cambia el estado del "like" de false a true o viceversa, similar a como se gestiona en un modal.

¿Cómo aplicar cambios en la interfaz de usuario?

Para reflejar estos cambios en la interfaz de usuario (UI), añade un evento on:click al ícono que desencadena la acción de like:

<icon-heart on:click={handleLike} class:active-like={like}></icon-heart>

La clase active-like se añade dinámicamente cuando like es verdadero, permitiendo modificar estilos en CSS según el estado actual.

¿Cómo implementar bookmarks de manera similar?

Para los bookmarks, se aplica una lógica similar, utilizando una función anónima directamente en el evento on:click.

<icon-bookmark on:click={() => bookmark = !bookmark} class:active-bookmark={bookmark}></icon-bookmark>

Este enfoque muestra cómo implementar funcionalidad sin necesidad de funciones separadas.

¿Cómo crear el efecto de doble clic para likes?

Tal como en Instagram, puedes activar el "like" haciendo doble clic sobre una imagen. Esto se configura utilizando el evento on:dblclick de Svelte:

<figure on:dblclick={handleLike}>
  <img src="ruta/a/la/imagen.jpg" alt="Imagen">
</figure>

El doble clic invoca a la misma función handleLike, propiciando un efecto fluido y consistente en la aplicación.

¿Cómo gestionar el estado global con Svelte Store?

Para contar cuántas publicaciones han sido "liked", usa Svelte Store para compartir estado entre componentes.

¿Cómo crear y configurar un Store?

Primero, crea un archivo store.js dentro de una nueva carpeta llamada store. Allí, importa el método writable de Svelte para definir un estado:

import { writable } from 'svelte/store';

export const likeCount = writable(0);

Este store mantiene un contador que se actualiza cada vez que se da o quita un "like".

¿Cómo actualizar el store desde un componente?

Dentro del componente que gestiona los likes, importa el store y actualiza su valor en la función handleLike:

import { likeCount } from '../store/store';

function handleLike() {
  if (like) {
    likeCount.update(n => n - 1);
  } else {
    likeCount.update(n => n + 1);
  }
  like = !like;
}

Con update, incrementas o decrementas el contador según el estado actual de like.

¿Cómo reflejar cambios del store en la UI?

En el componente del header, importa el store para mostrar el contador dinámicamente:

import { likeCount } from '../store/store';

$: displayLikeCount = $likeCount > 0 ? $likeCount : '';

Al usar $ antes del nombre del store, Svelte otorga reactividad, actualizando automáticamente la vista cuando el estado cambia.

Desafío: Subir tu aplicación a un repositorio en línea

Como tarea adicional, se sugiere subir tu aplicación a un repositorio en línea, como GitHub, GitLab o Bitbucket. Esto no solo respaldará tu progreso, sino que también te preparará para futuros despliegues en la nube.

Con estos pasos, tu aplicación ahora ofrece interactividad atractiva y eficiente. ¡Sigue explorando y añadiendo nuevas funcionalidades para mejorar aún más tu proyecto!

Aportes 8

Preguntas 5

Ordenar por:

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

like ? likeCount.update(n => n + 1) : likeCount.update(n => n - 1);

Quisiera compartir esta forma de comparación con el operador ternarios es básicamente igual pero entiendo que es más simple.

{$likeCount ? $likeCount : ''}

  • Primero verifico si la variable tiene valor simplemente escribiendo el nombre de la variable $likeCount (Si el valor es 0 === false) Para conocer más acceder a Falsy MDN
  • Lo siguiente es el operador ? (Si lo que estaba delante de mi se cumplió ose $likeCount tiene valor entonces muestra la variable $likeCount)
  • De lo contrario : ‘’ (Comillas vacías para no mostrar nada)

Eso es siempre y cuando no quiere realizar alguna comparación en específico como por ejemplo mostrarlo solamente cuando sean mayor a 5.

function handleLike() {
      like = !like;
      if(like){
        likeCount.update( n => n ++);
      }else{
        likeCount.update( n => n --);
      }
    }

Por qué no funcionó el ++ y el – ?

También puedes acceder a la variable del store con el prefijo $, veamos un ejemplo:

if (isLike) {
	$likeCount++;
} else {
	$likeCount--;
}

No sé que pasó🤔

Demonios! Antes de ver el “dbclick” pensé que iba a hacer una lógica de contador con el evento click. Buen Dato!

Muy buena clase. Ya se soluciono la duda que tenia con clases en Svelte, ahora me gustaria ver como se implementaria Redux