Installer Wishlist avec Docker

zarev 6 sept. 2024 8 min de lecture

Table des matières

Dans moins de 100 jours ce sont les fêtes qui commencent. Vous débordez d'idées de cadeaux qu'on pourrait vous faire ou que vous pourriez offrir?

Aujourd’hui nous allons parler de Wishlist! Un système simple et pratique pour créer une liste de souhaits, voir même inviter des ami(e)s dessus ou encore, leur permettre d'avoir leur propre liste sur votre instance ou de vous suggérer un cadeau!

Il existe "deux" façons d'utiliser cette application et cette notion est très importante. Il y a le mode Wishlist et Registery.

Wishlist => vous créez une liste et vous inviter des personnes pour qu'elles puissent les consulter. Ces listes ne sont pas accessibles sans compte utilisateur.
Registery => vos listes sont visibles par n'importe quelle personne à qui vous aurez donné le lien de votre liste de souhaits.

Bien entendu vous pouvez créer plusieurs groupes avec différents modes, suivant vos besoins.

Le serveur mail n'est pas franchement indispensable vu qu'il y a un système d'invitation interne.

💡

Il faudra obligatoirement relier cette application à un domaine.
Utilisez votre méthode préférée.

Vous n'avez plus à vous demander quoi offrir à vos parents pour les fêtes, il vous suffit de consulter leur liste de souhaits et de réclamer tout article disponible. Grâce à une interface utilisateur simple, même les grands-parents peuvent participer !

⚡Caractéristiques

Réclamez des articles sur une liste de souhaits.
Cocher les articles réclamés comme étant achetés.
Récupérer automatiquement les données relatives aux produits à partir d'une URL.
Inviter les utilisateurs par courrier électronique (configuration SMTP requise).
Options pour les suggestions.
Support PWA.
Prise en charge des groupes.
Mode registre.

💾 L'installation

Créez votre compose.yml dans le dossier où vous comptez installer Wishlist:

sudo nano compose.yml

Collez ça dedans en prenant soin d'adapter ports et volumes suivant votre configuration:

version: "3"

services:
  wishlist:
    container_name: wishlist
    image: ghcr.io/cmintey/wishlist:latest
    ports:
      - 3280:3280
    volumes:
      - ./uploads:/usr/src/app/uploads  
      - ./data:/usr/src/app/data
    environment:
      ORIGIN: https://wishlist.mondomaine.com
      TOKEN_TIME: 72

Veillez à modifier:

ORIGIN: https://wishlist.mondomaine.com => Indiquez votre domaine en entier.

On va déployer l'application:

docker-compose up -d

ou avec docker-compose V2:

docker compose up -d

Rendez-vous sur l'ip:port, suivant l'IP de votre serveur local et du port choisi, 3280 par défaut:

http://ip:3280/

ou votre domaine:

https://mondomaine.com

👤 Création du compte administrateur & réglages

Lorsque vous lancez Wishlist pour la première fois, il faudra créer votre compte administrateur et régler quelques détails de configuration.

Cliquez sur Get Started:

Remplissez les informations suivantes:

Name => Indiquez votre nom.
Username => Indiquez votre nom d'utilisateur.
Email => Indiquez votre adresse e-mail.
Password => Choisissez un mot de passe fort.
Confirm Password => Confirmez le mot de passe.

Cliquez sur Next.

Remplissons ce formulaire:

Global Settings

Public Signup => Si vous cochez cette case, les inscriptions à votre site sont ouvertes à tout le monde.
Suggestions => Une fois les suggestions activées, vous pourrez ajouter des éléments à la liste de souhaits d'une autre personne.
Claims => Affiche le nom de la personne qui réclame un article.
Method => C'est lié aux suggestions.

Approval Required, l'article suggéré devra être approuvé par la personne suggérée.
Auto Approval, l'article suggéré sera automatiquement approuvé et ajouté à la liste de souhaits.
Suprise Me, l'article suggéré est automatiquement approuvé et ajouté à la liste de souhaits. Cependant, l'élément ne s'affiche que pour tout le monde, à l'exception de la personne suggérée.

SMTP

Soit vous avez déjà votre propre serveur mail et vous êtes en possession des informations nécessaires, soit vous voulez utiliser Gmail, Outlook,... Dans ce cas voyez ici comment faire:

Host => Indiquez l'host du serveur mail.
Port => Indiquez le port du serveur mail.
User => Indiquez votre adresse e-mail complète.
Password => Le mot de passe de votre compe e-mail.
From Email => Indiquez votre adresse e-mail complète.
From Name => Indiquez votre pseudo/nom.

Cliquez sur Next pour terminer.

Sur cette page, vous pouvez cliquer sur Complete pour terminer:

Vous voici sur le tableau de bord:

👥 Création d'un groupe

Vous avez la possibilité de créer des groupes afin d'y mettre des personnes en relations, si vous le souhaitez.

En cliquant en haut à droite sur votre profil, choisissez + Create Group:

Nommez-le et cliquer sur Submit:

Je vais moi-même intégrer ce groupe en cliquant sur Change Group:

Je vais sélectionner le groupe Famille et cliquez sur Change Group:

🧾 Création d'un compte utilisateur normal

Envoyez l'URL de votre site à une personne, qui va elle-même s'inscrire.

Pour commencer elle devra cliquer sur Create an account:

Remplir le formulaire:

Name => Indiquez votre nom.
Username => Indiquez votre nom d'utilisateur.
Email => Indiquez votre adresse e-mail.
Password => Choisissez un mot de passe fort.
Confirm Password => Confirmez le mot de passe.

Elle terminera son inscription en cliquant sur Sign Up, la voilà sur le tableau de bord:

Maintenant il va falloir ajouter cette personne dans le groupe Famille, par exemple ou qu'elle crée elle-même son propre groupe.

➕ Ajouter une personne à un groupe

Pour ajouter une personne dans un groupe, dans mon exemple, je vais ajouter Peter. Attention, cette option est possible uniquement si le groupe est configuré en Wishlist.

Dans mon profil, je vais choisir Manage Group:

Mais avant, voyons les options en cliquant sur Settings:

Voici les options de groupe:

Wishlist Mode => Vous connaissez maintenant les deux modes possibles et leurs caractéristiques.
Suggestions => Une fois les suggestions activées, vous pourrez ajouter des éléments à la liste de souhaits d'une autre personne.
Claims => Afficher le nom de la personne qui réclame un article.

N'oubliez pas de cliquer sur Save pour valider les éventuels changements.

Mais revenons à nos moutons. Je vais ajouter Peter dans le groupe famille:

Je vais sélectionner Peter et cliquer sur Add User pour l'ajouter:

Voilà Peter ajouté au groupe:

Du côté de la personne qui a été ajoutée dans le groupe, elle verra donc votre wishlist:

🎁 Ajouter un souhait

Dans mon exemple, je voudrais ajouter une magnifique figurine Goldorak!

Cliquez sur My Wishes:

Ensuite sur +:

Remplissons le formulaire:

Item URL => Indiquez ici le lien de l'objet. Par défaut Wishlist va tenter de récupérer automatiquement les informations liées à l'article. Prix, image,...
Item Name => Indiquez le nom de l'objet.
Price => Indiquez le prix de l'objet.
Upload Image => Vous pouvez envoyer une image de l'article si nécessaire.
Image URL => Vous pouvez indiquez le lien de l'image de l'article.
Notes => Si vous avez un message à faire passer.

Cliquez sur Add Item pour terminer la fiche ce qui donne: