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

Resumen

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

Devi Chaves Rodriguez

student•

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

Juan

student•

Si quieres simplificar la forma más acertada sería:

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

Jorge Eliecer Rangel Jimenez

student•

Svelte Devtools

https://chrome.google.com/webstore/detail/svelte-devtools/ckolcbmkjpjmangdbmnkpjigpkddpogn

Juan

student•

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.

Jhon Carlos Colorado Angulo

student•

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

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

Luis Lira

student•

Supongo que parte con la misma filosofía que todos los demás frameworks, debes ver el store como un estado, el estado no se debe mutar directamente, debes agregar un nuevo valor al estado por medio de un método específico.

En este caso si usas .update(n++) estás intentando mutar el estado actual, eso no está permitido, en cambio, update recibe una función a la cual le pasa el estado actual y devuelve un nuevo estado con la modificación que hiciste, es por eso que de la manera que se enseña es como funciona, para que el framework pueda reconocer qué parte del estado fue la que cambió.

Mario Peña

student•

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

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

Arantxa Giovanna Rosas Del Valle

student•

¿Por qué no funciona el like ++ y el like -- en la función handleLike?

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

Miguel Segura

student•

Por que el estado en Svelte se actualiza a través de la función update()

Aunque nada te impide colocar likes en vez de n dentro de la funcion

function handleLike() {
      like = !like;
      if(like){
        likeCount.update( likes =&gt; likes++ );
      }else{
        likeCount.update( likes =&gt; likes-- );
      }
    }

Edgardo Marcano

student•

No sé que pasó🤔

Rodrigo Rodolfo Rubio Haro

student•

Verifica que en el import al store tengas las llaves, debe de estar así:

  import { likeCount } from "../store/store.js";

(tenía el mismo problema)

Edgardo Marcano

student•

Que extraño, no se publicó mi comentario. Si ya lo habia corregido. Mi pregunta seria exactamente cuando se le agregan los corchetes y cuando no

Javier Romero

student•

no entiendo porque no me aparecen los iconos en mi header, alguien me puede ayudar por favor ??

Erik Elyager

student•

Es difícil saber sin ver el código. Los dos errores más comunes son:

Qué este mal la ruta de la imagen, verifica en la consola de las devtools si se han cargado.
Qué las imágenes no existan, igual verificas en la consola de las devtools.
Que alguna propiedad css las esté ocultando, carga sin el css y ve que todo esté ahí.

Javier Romero

student•

ya lo solucione amigo y lo que hice fue instalar file-loader y luego configurar lo en webpack.confing.js

Eduardo Serrano Jaime

student•

en el store solo se pueden guardar numeros?

Miguel Torrealba

student•

No, puedes guardar múltiples tipos de datos, depende de tu caso. Te reto a que pruebes, sin miedo a que se rompa el código. Me comentas.

Jorge Velasquez

student•

Como agregar comentarios en Svelte, existe algún
shortcut ?

Luis Lira

student•

Con Ctrl + K + C puedes añadir comentarios en VSCode o también puedes hacerlo de la manera convencional para cada lenguaje.

&lt;!-- html --&gt;
/* css */
// js

Nicolas Ticona Valdivia

student•

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

Cristofher Jumbo Jimenez

student•

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

Cristian Daniel Jesus Rios

student•

No me quedo claro lo que hace el store y que logica cumple este code:

export const likeCount = writable(0);

Por lo que entiendo de localStorage hace lo mismo, osea guarda un valor en memoria y lo inicializa en 0 ?

Johan Stivens Suarez Galindo

student•

En este caso porque es un contador (número), lo que ves dentro de los paréntesis en la inicialización de este (inicia en 0), sin embargo puedes tener diferentes tipos de datos writable e inicializarlos de acuerdo a lo que necesites. Básicamente con esta línea de código estás creando un store que podrá ser usado de manera global y te permitirá leerlo y modificarlo (escribible=writable) desde otros lugares de tu aplicación.