DEV Community: Aymeric Ratinaud

Ma première extension navigateur qui permet d'indiquer les prix des cartes pokémon

Aymeric Ratinaud — Thu, 04 Jun 2026 13:41:17 +0000

Hello,
je voulais vous raconter comment j'ai lancé une extension et comment j'ai gagné mes premiers euros sur Internet !

L'autre jour j'écoutais une vidéo de finary sur l'investissement des cartes pokémon en me demandant si c'était intéressant. Et puis la seule chose que j'ai retenu de cette vidéo c'était que les transactions ebay fixaient plus ou moins le prix du marché des cartes.

Donc je vais sur ebay, et c'est littéralement la jungle, et je me dis "mais, y a pas un petit outil qui permet d'analyser le prix de la carte ? Ça serait pratique ça. Ah beh non çà n'existe pas, bah je vais le faire alors"

Je voulais quelque chose de léger, rapide. Pas une grosse application à ouvrir dans un nouvel onglet, pas un outil compliqué à configurer pendant vingt minutes. Juste une extension qui s’installe, s’utilise naturellement, et fait gagner du temps.

À partir de là, j’ai commencé à construire une première version très ciblée.

Le développement

Techniquement, l’extension repose sur React, TypeScript, Vite Supabase et Stripe

L'utilisateur peut commencer gratuitement avec 10 crédits par jour (oui car l'API que j'intrroge à un coût elle aussi)

J’ai donc travaillé autour de quelques principes :

une interface claire et rapide
peu de friction au démarrage
des fonctionnalités utiles dès la première utilisation ;
une architecture assez propre pour pouvoir ajouter de nouvelles fonctionnalités sans tout casser.

Les fonctionnalités principales

Aujourd’hui, l’extension permet de :

Le prix des cartes par rapport à leur langue
Le prix des cartes par rapport à leur note
Ça récupere les prix des ventes faites
Ça indique sa tendence sur les 7 et 30 derniers jours
Ça indique si vous faites une bonne affaire ou le prix est exagéré

J’ai essayé de prioriser les fonctionnalités qui apportent une valeur immédiate. L’idée était de construire un outil que les gens peuvent comprendre et adopter rapidement.

Mettre en place l’abonnement payant

Ajouter un abonnement payant a été une étape importante.

J’ai intégré Stripe pour gérer les paiements, puis j’ai connecté le statut d’abonnement à l’extension afin de débloquer les fonctionnalités premium.

J'ai aussi ajouté des packs de crédits si vous voulez avoir plus de crédit ponctuellement.

La première victoire : des utilisateurs ont payé

Et puis, un jour, les premiers abonnements sont arrivés.

Évidemment, ce n’est pas encore une success story spectaculaire. Je ne parle pas de milliers d’utilisateurs ni de revenus énormes. Mais ces premiers paiements comptent énormément.

Ils prouvent plusieurs choses :

le problème existe vraiment
des utilisateurs comprennent la valeur de l’extension
le modèle payant peut fonctionner
le projet mérite d’être continué

Pour moi, c’est une première étape très motivante.

Ce que j’ai appris

Cette expérience m’a appris plusieurs choses.

D’abord, il vaut mieux sortir une version simple mais utilisable que rester bloqué trop longtemps sur une version parfaite. Les vrais retours arrivent seulement quand le produit est entre les mains des utilisateurs.

Ensuite, la clarté de la proposition de valeur est essentielle. Si l’utilisateur ne comprend pas rapidement ce que l’extension fait pour lui, il partira.

La suite

La prochaine étape est de continuer à améliorer l’extension avec les retours des utilisateurs.

Je veux notamment travailler sur les lives pour avoir une recherche en direct.

Construire un produit seul est parfois lent, parfois frustrant, mais ces petites victoires donnent énormément d’énergie.

Si vous développez vous aussi une extension, un SaaS, ou un side project, mon conseil serait simple : sortez une première version, montrez-la, écoutez les retours, et n’ayez pas peur de tester un modèle payant si vous pensez créer de la valeur.

Ce premier abonnement, même petit, peut vraiment changer votre rapport au projet.

[Boost]

Aymeric Ratinaud — Fri, 23 May 2025 17:00:35 +0000

Aymeric Ratinaud

May 20 '25

A new playground for creatives between Tumblr and CodePen 🌊

#webdev #css #website #programming

Comments 5

2 min read

A new playground for creatives between Tumblr and CodePen 🌊

Aymeric Ratinaud — Tue, 20 May 2025 13:51:06 +0000

I wanted to present an idea I had because I'm a fan of #css and I wondered what I could do with all the images I had on my computer. So I thought of creating this, a way of prototyping / presenting collections of images easily and quickly. (Soon accessible on your react projects thanks to the api).
its still working progress 😅

The site is designed to be a creative hub, enabling creators of all levels to bring their artistic vision to life and share it with the world.

More features to come, but for now here's a sneak preview

Free plan (Creator Starter):

Create visual collections
Up to 5 collections
500MB upload per week
Instant sharing of creations
URLs in {username}/{collection name} format
Creative freedom with unlimited customization options
Presentation of creations in professional galleries
Smooth workflow on all devices
Integration with your favorite creative tools

how to create a collection

go to upload

select files you want to add

Create "flowers" collection

now its on the website

click “show public collection” to go to the editor

click on “edit” in the top right-hand corner

feel free to edit HTML or CSS

now you can share your collection!

blankpage.space/app/explore is a platform for designers to showcase, organize and share their digital creations.

Future features:

The Pro plan is currently under development and will be available soon.
A waiting list has been set up to notify you of the launch.

Get a free landing-page template now! 📈

Aymeric Ratinaud — Thu, 17 Apr 2025 11:28:43 +0000

⏳ Available for free until Saturday only!

Are you building a SaaS, an app, a startup idea, or a digital product? Then you probably know how crucial a well-designed landing page is for your first impression. But designing from scratch is time-consuming and sometimes... just not fun.

That’s why I created a free Tailwind CSS + React landing page template that you can clone and use right away.

👉 But hurry — it’s free only until this Saturday!

✅ What’s included?

This template is fully responsive and made for modern web projects. It includes:

Header – clean navbar with CTA
Hero Section – bold headline and visual hook
Features Section – breakdown of key benefits
Large Features – highlight standout functionality
Pricing Section – clear, trustworthy plans
Problems and Solution – your product as the answer
Social Proof – client logos or press mentions
Testimonial Section – user quotes that convert
Waiting List CTA – email capture form
FAQ – remove doubts, increase conversions
Footer – neat layout with links and credits

🔗 Code

Download the full source code here:

👉 Download

💡 This will be removed after Saturday, so don’t wait.

🛠️ Built with:

React 18+ (functional components & hooks)
Tailwind CSS 3+
Clean structure, perfect for rapid prototyping or production
Easy to plug your own content in

💡 Why I built this?

I kept rebuilding landing pages for my own side projects, MVPs, and startup ideas. So I built one that I’m actually happy with — and I’m sharing it so you can save time too.

🔔 Want more?

I'm planning more free + premium templates soon (dashboards, auth pages, etc).

Follow me here on Dev.to, GitHub, or Twitter so you don’t miss it!

🙌 Feedback is welcome!

Found a bug? Got ideas? Want to contribute? Feel free to drop a comment below 👇

⏳ This freebie ends Saturday. Grab it now and launch faster!

Explorer toutes les fonctionnalités de console en JavaScript

Aymeric Ratinaud — Thu, 03 Oct 2024 12:56:17 +0000

Voici un article prêt à être publié sur Dev.to avec les exemples console en JavaScript, structuré et formaté pour une bonne lecture :

Explorer toutes les fonctionnalités de `console` en JavaScript

JavaScript est un langage puissant pour le développement web, mais il peut être parfois difficile de déboguer votre code efficacement. Heureusement, la fonction console offre de nombreuses méthodes pratiques pour vous aider à inspecter, diagnostiquer et surveiller le comportement de votre application.

Dans cet article, nous allons explorer toutes les variantes de console disponibles, en détaillant comment et quand les utiliser avec des exemples clairs.

1. `console.log()`

C'est la méthode la plus utilisée de la famille console. Elle affiche des messages dans la console, souvent utilisés pour suivre l'exécution générale de votre programme.

console.log("Message général");

2. `console.error()`

Cette méthode est utilisée pour signaler des erreurs dans la console. Les messages d'erreur apparaissent généralement en rouge dans la console des navigateurs.

console.error("Erreur détectée !");

3. `console.warn()`

console.warn() est utile pour afficher des avertissements. Les messages apparaissent en jaune dans la console, ce qui attire l'attention sans indiquer une erreur grave.

console.warn("Attention !");

4. `console.info()`

Bien que similaire à console.log(), la méthode console.info() est utilisée pour indiquer des informations importantes.

console.info("Information importante");

5. `console.debug()`

console.debug() est destinée aux messages de débogage. Ces messages peuvent parfois être masqués par défaut dans certains environnements, mais ils sont parfaits pour un débogage approfondi.

console.debug("Message de débogage");

6. `console.table()`

Une fonctionnalité très utile pour afficher des objets ou des tableaux sous forme de tableau (grid) dans la console. Parfait pour visualiser des données structurées.

console.table([{ nom: "Alice", âge: 25 }, { nom: "Bob", âge: 30 }]);

7. `console.dir()`

Affiche une représentation interactive et inspectable d'un objet, permettant de voir ses propriétés de manière plus détaillée.

console.dir(document.body);

8. `console.time()` et `console.timeEnd()`

Ces méthodes permettent de mesurer le temps d'exécution entre les deux appels. Très utile pour tester les performances d'une partie de votre code.

console.time("chrono");
for (let i = 0; i < 1000000; i++) {} // Simulation d'une tâche longue
console.timeEnd("chrono");

9. `console.group()` et `console.groupEnd()`

Ces méthodes permettent de regrouper plusieurs messages dans la console, formant une hiérarchie facile à développer ou réduire.

console.group("Groupe de messages");
console.log("Message dans le groupe");
console.log("Autre message dans le groupe");
console.groupEnd();

10. `console.groupCollapsed()`

Similaire à console.group(), mais le groupe est réduit par défaut.

console.groupCollapsed("Groupe réduit");
console.log("Message dans le groupe réduit");
console.groupEnd();

11. `console.trace()`

Si vous voulez voir une trace complète de la pile d'appels (call stack) qui a mené à l'endroit où le code est exécuté, utilisez console.trace().

function functionOne() {
    functionTwo();
}
function functionTwo() {
    console.trace("Trace de la pile");
}
functionOne();

12. `console.assert()`

Cette méthode affiche un message uniquement si une condition donnée est fausse. Elle est idéale pour valider des hypothèses pendant le développement.

console.assert(1 === 2, "Ce message s'affiche car l'assertion est fausse");

13. `console.clear()`

Utilisez cette méthode pour effacer la console. Pratique pour nettoyer un environnement encombré.

console.clear(); // Efface la console

14. `console.count()` et `console.countReset()`

Ces méthodes comptent le nombre de fois qu'un certain label a été appelé, et permettent de réinitialiser le compteur avec console.countReset().

console.count("compteur");
console.count("compteur");
console.countReset("compteur");
console.count("compteur");

15. `console.memory`

Sur certains navigateurs (comme Chrome), vous pouvez utiliser console.memory pour afficher des informations relatives à la gestion de la mémoire.

console.log(console.memory);

Exemple combiné

Voici un exemple plus complet qui regroupe plusieurs des méthodes console mentionnées plus haut pour vous montrer leur utilité dans une situation plus complexe.

console.log("Démarrage du programme");
console.group("Boucle");
for (let i = 0; i < 3; i++) {
    console.log(`Itération : ${i}`);
    if (i === 1) {
        console.warn("Attention à l'itération 1");
    }
}
console.groupEnd();
console.error("Fin du programme avec erreur");
console.time("Temps d'exécution");
// Code simulant une tâche
for (let j = 0; j < 1000000; j++) {} 
console.timeEnd("Temps d'exécution");

Conclusion

La famille des méthodes console en JavaScript est beaucoup plus vaste que la simple méthode console.log(). En comprenant et en utilisant ces différentes fonctionnalités, vous pourrez améliorer le débogage de votre code et obtenir des informations précieuses pendant le développement.

N'hésitez pas à utiliser ces méthodes dans vos projets, et amusez-vous à explorer ce qu'elles peuvent vous offrir !

Vous pouvez copier et utiliser ce bloc de code dans vos propres projets pour découvrir en profondeur la puissance de console. 😄

// console.log() : Affiche un message général
console.log("Message général");

// console.error() : Affiche un message d'erreur
console.error("Erreur détectée !");

// console.warn() : Affiche un avertissement
console.warn("Attention !");

// console.info() : Affiche des informations
console.info("Information importante");

// console.debug() : Affiche un message de débogage (souvent masqué par défaut)
console.debug("Message de débogage");

// console.table() : Affiche un tableau de données dans la console
console.table([{ nom: "Alice", âge: 25 }, { nom: "Bob", âge: 30 }]);

// console.dir() : Affiche une représentation interactive d'un objet
console.dir(document.body);

// console.time() et console.timeEnd() : Chronomètre pour mesurer le temps d'exécution
console.time("chrono");
for (let i = 0; i < 1000000; i++) {} // Code simulant une tâche longue
console.timeEnd("chrono");

// console.group() et console.groupEnd() : Groupe les messages dans la console
console.group("Groupe de messages");
console.log("Message dans le groupe");
console.log("Autre message dans le groupe");
console.groupEnd();

// console.groupCollapsed() : Groupe réduit par défaut
console.groupCollapsed("Groupe réduit");
console.log("Message dans le groupe réduit");
console.groupEnd();

// console.trace() : Affiche une trace de la pile d'appels
function functionOne() {
    functionTwo();
}
function functionTwo() {
    console.trace("Trace de la pile");
}
functionOne();

// console.assert() : Affiche un message uniquement si l'assertion est fausse
console.assert(1 === 2, "Ce message s'affiche car l'assertion est fausse");

// console.clear() : Efface la console
// console.clear(); // Décommentez cette ligne pour effacer la console

// console.count() et console.countReset() : Comptabilise le nombre d'appels avec une étiquette
console.count("compteur");
console.count("compteur");
console.countReset("compteur");
console.count("compteur");

// console.memory : Affiche des informations sur la mémoire utilisée (fonctionne dans certains environnements)
console.log(console.memory);

// Exemple combiné de plusieurs fonctions console :
console.log("Démarrage du programme");
console.group("Boucle");
for (let i = 0; i < 3; i++) {
    console.log(`Itération : ${i}`);
    if (i === 1) {
        console.warn("Attention à l'itération 1");
    }
}
console.groupEnd();
console.error("Fin du programme avec erreur");
console.time("Temps d'exécution");
// Code simulant une tâche
for (let j = 0; j < 1000000; j++) {} 
console.timeEnd("Temps d'exécution");

Merci pour la lecture !

Vous avez des questions ou des suggestions ? Laissez un commentaire ci-dessous, ou partagez d'autres astuces console que vous utilisez dans vos projets !

DiscriminatorMap de Doctrine avec Api-platform

Aymeric Ratinaud — Fri, 05 Jul 2024 14:40:25 +0000

Le DiscriminatorMap de Doctrine permet une gestion efficace des entités héritées.
Nous allons prendre l'exemple simple d'une classe Vehicle pour créer deux classes qui vont en hériter : Bike et Car
qui ont des attributs différents mais auront les mêmes que Vehicle.
Avec Api-platform, on pourra faire un GET /vehicles pour avoir tous les vehicules
GET bikes pour tous les bikes et GET /cars

<?php

namespace App\Entity;

use ApiPlatform\Doctrine\Orm\Filter\OrderFilter;
use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
use ApiPlatform\Metadata\ApiFilter;
use ApiPlatform\Metadata\ApiResource;
use App\Repository\VehicleRepository;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: VehicleRepository::class)]
#[ORM\InheritanceType('JOINED')]
#[ORM\DiscriminatorColumn(name: 'discr', type: 'string')]
#[ORM\DiscriminatorMap([
    'car' => Car::class,
    'bike' => Bike::class
])]
#[ApiResource]
#[ApiFilter(OrderFilter::class)]
class Vehicle
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(length: 255)]
    #[ApiFilter(SearchFilter::class, strategy: 'partial')]
    private ?string $brand = null;

    #[ORM\Column]
    private ?\DateTimeImmutable $createdAt = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getBrand(): ?string
    {
        return $this->brand;
    }

    public function setBrand(string $brand): static
    {
        $this->brand = $brand;

        return $this;
    }

    public function getCreatedAt(): ?\DateTimeImmutable
    {
        return $this->createdAt;
    }

    public function setCreatedAt(\DateTimeImmutable $createdAt): static
    {
        $this->createdAt = $createdAt;

        return $this;
    }
}

<?php

namespace App\Entity;

use ApiPlatform\Doctrine\Orm\Filter\OrderFilter;
use ApiPlatform\Metadata\ApiFilter;
use ApiPlatform\Metadata\ApiResource;
use App\Repository\BikeRepository;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: BikeRepository::class)]
#[ApiResource]
#[ApiFilter(OrderFilter::class)]
class Bike extends Vehicle
{
    #[ORM\Column]
    private ?bool $hasCarrier = null;

    public function hasCarrier(): ?bool
    {
        return $this->hasCarrier;
    }

    public function setHasCarrier(bool $hasCarrier): static
    {
        $this->hasCarrier = $hasCarrier;

        return $this;
    }
}

<?php

namespace App\Entity;

use ApiPlatform\Doctrine\Orm\Filter\OrderFilter;
use ApiPlatform\Metadata\ApiFilter;
use ApiPlatform\Metadata\ApiResource;
use App\Repository\CarRepository;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: CarRepository::class)]
#[ApiResource]
#[ApiFilter(OrderFilter::class)]
class Car extends Vehicle
{
    #[ORM\Column]
    private ?int $numberOfDoors = null;

    public function getNumberOfDoors(): ?int
    {
        return $this->numberOfDoors;
    }

    public function setNumberOfDoors(int $numberOfDoors): static
    {
        $this->numberOfDoors = $numberOfDoors;

        return $this;
    }
}

Tout ce fait avec

#[ORM\InheritanceType('JOINED')]
#[ORM\DiscriminatorColumn(name: 'discr', type: 'string')]
#[ORM\DiscriminatorMap([
    'car' => Car::class,
    'bike' => Bike::class
])]

InheritanceType peut également être SINGLE_TABLE ce qui signifie que vous n'aurez qu'une seule table pour toutes vos entités

N'oubliez pas également sur les autres classes de rajouter extends Vehicle

Fusée 🚀

Api-platform : filtrer les résultats uniquement sur l'utilisateur connecté

Aymeric Ratinaud — Sun, 23 Jun 2024 09:52:46 +0000

Imaginez avoir dans votre projet plusieurs entités avec la relation author comme par exemple ces deux entités suivantes :

<?php

namespace App\Entity;

use ApiPlatform\Metadata\ApiResource;
use App\Repository\CourierFavoriteRepository;
use Doctrine\ORM\Mapping as ORM; 

#[ORM\Entity(repositoryClass: CourierFavoriteRepository::class)]
#[ApiResource()]
class Book
{ 
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\ManyToOne]
    #[ORM\JoinColumn(nullable: false)] 
    private ?User $author = null; 

    #[ORM\Column(length: 255)] 
    private ?string $title = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getAuthor(): ?User
    {
        return $this->author;
    }

    public function setAuthor(?User $author): static
    {
        $this->author = $author;

        return $this;
    } 

    public function getTitle(): ?string
    {
        return $this->title;
    }

    public function setTitle(string $title): self
    {
        $this->title = $title;

        return $this;
    }
}

<?php

namespace App\Entity;

use ApiPlatform\Metadata\ApiResource;
use App\Repository\TodoRepository; 
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: TodoRepository::class)]
#[ApiResource()]
class Todo
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\ManyToOne]
    #[ORM\JoinColumn(nullable: false)]
    private ?User $author = null;

    #[ORM\Column(type: Types::TEXT)]
    private ?string $content = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getAuthor(): ?User
    {
        return $this->author;
    }

    public function setAuthor(?User $author): static
    {
        $this->author = $author;

        return $this;
    }

    public function getContent(): ?string
    {
        return $this->content;
    }

    public function setContent(string $content): static
    {
        $this->content = $content;

        return $this;
    }
}

Nous voulons verrouiller les résultats des GET item et collection uniquement sur l'user connecté.

Nous allons créer une interface que nous implémenterons sur nos entités

<?php

namespace App\Entity;

interface CurrentUserIsAuthorInterface
{
    public function setAuthor(?User $author): static;
}

Maitenant nous allons faire une DoctrineExtension qui va ajouter la contrainte where dans le QueryBuilder sur l'utilisateur connecté.

<?php

namespace App\DoctrineExtension;

use ApiPlatform\Doctrine\Orm\Extension\QueryCollectionExtensionInterface;
use ApiPlatform\Doctrine\Orm\Extension\QueryItemExtensionInterface;
use ApiPlatform\Doctrine\Orm\Util\QueryNameGeneratorInterface;
use ApiPlatform\Metadata\Operation;
use App\Entity\CurrentUserIsAuthorInterface;
use Doctrine\ORM\QueryBuilder;
use Symfony\Bundle\SecurityBundle\Security;

class CurrentUserIsAuthorExtension implements QueryCollectionExtensionInterface, QueryItemExtensionInterface
{
    public function __construct(
        private Security $security,
    ) {
    }

    public function applyToCollection(QueryBuilder $queryBuilder, QueryNameGeneratorInterface $queryNameGenerator, string $resourceClass, ?Operation $operation = null, array $context = []): void
    {
        $this->currentUserIsAuthor($resourceClass, $queryBuilder);
    }

    public function applyToItem(QueryBuilder $queryBuilder, QueryNameGeneratorInterface $queryNameGenerator, string $resourceClass, array $identifiers, ?Operation $operation = null, array $context = []): void
    {
        $this->currentUserIsAuthor($resourceClass, $queryBuilder);
    }

    /**
     * @param string $resourceClass
     * @param QueryBuilder $queryBuilder
     * @return void
     * @throws ReflectionException
     */
    public function currentUserIsAuthor(string $resourceClass, QueryBuilder $queryBuilder): void
    {
        $reflectionClass = new \ReflectionClass($resourceClass);
        if ($reflectionClass->implementsInterface(CurrentUserIsAuthorInterface::class)) {
            $alias = $queryBuilder->getRootAliases()[0];
            $queryBuilder->andWhere("$alias.author = :current_author")
                ->setParameter('current_author', $this->security->getUser()->getId());
        }
    }
}

Maintenant il nous reste à implémenter notre interface sur nos entités :

<?php

namespace App\Entity;

use ApiPlatform\Metadata\ApiResource;
use App\Repository\CourierFavoriteRepository;
use Doctrine\ORM\Mapping as ORM; 

#[ORM\Entity(repositoryClass: CourierFavoriteRepository::class)]
#[ApiResource()]
class Book implements CurrentUserIsAuthorInterface
{ 
    // ...

<?php

namespace App\Entity;

use ApiPlatform\Metadata\ApiResource;
use App\Repository\TodoRepository; 
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: TodoRepository::class)]
#[ApiResource()]
class Todo implements CurrentUserIsAuthorInterface
{
    // ...

Et c'est tout. Pour chaque GET item ou collection vous aurez uniquement les entrées avec l'utilisateurs qui est connecté 🚀

Lisez aussi "comment enregistrer automatiquement l'utilisateur connecté" : https://dev.to/aratinau/automatisons-lenregistrement-du-user-sur-nimporte-quelle-entite-4f68

Automatisons l'enregistrement du User sur n'importe quelle entité [Symfony]

Aymeric Ratinaud — Mon, 17 Jun 2024 19:19:51 +0000

Admettons que nous ayons des entités avec l'attribut author, nous allons voir comment factoriser la logique en une ligne pour enregistrer l'utilisateur automatiquement.

Prenons l'exemple de cette entité qui contient l'attribut author.

<?php

namespace App\Entity;

use App\Repository\CategoryRepository;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: CategoryRepository::class)]
class Category
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(length: 255)]
    private ?string $name = null; 

    #[ORM\ManyToOne]
    #[ORM\JoinColumn(nullable: false)]
    private ?User $author = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getName(): ?string
    {
        return $this->name;
    }

    public function setName(string $name): static
    {
        $this->name = $name;

        return $this;
    } 

    public function getAuthor(): ?User
    {
        return $this->author;
    }

    public function setAuthor(?User $author): static
    {
        $this->author = $author;

        return $this;
    }
}

Dans notre projet nous avons également une dizaine d'entités qui contient également l'attribut author.

La premiere solution serait de faire un controller ou un DoctrineListener pour chaque entité. Comme celui-là par exemple :

<?php

namespace App\DoctrineListener;

use App\Entity\Category;
use Doctrine\Bundle\DoctrineBundle\Attribute\AsEntityListener;
use Doctrine\ORM\Events;
use Doctrine\Persistence\Event\LifecycleEventArgs;

#[AsEntityListener(event: Events::prePersist, entity: Category::class)]
class CategoryDoctrineListener
{
    public function __construct(
        private Security $security,
    ) {
    }

    public function prePersist(Category $category, LifecycleEventArgs $event)
    {
        $user = $this->security->getUser();
        $entity->setAuthor($user);
    }
}

Au lieu de ça nous allons garder la logique métier de CategoryDoctrineListener et l'adapter à toutes les entités qui contiennent l'attribut author

Pour cela nous allons faire une interface

<?php

namespace App\Entity;

interface AuthorInterface
{
    public function setAuthor(?User $author): static;
}

Ainsi nous allons l'implementer sur toutes les entités qui ont la méthode setAuthor

Exemple avec Catégory

<?php

namespace App\Entity;

use ApiPlatform\Metadata\ApiResource;
use App\Repository\CategoryRepository;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Serializer\Attribute\Groups;

#[ORM\Entity(repositoryClass: CategoryRepository::class)]
#[ApiResource(paginationEnabled: false)]
class Category implements AuthorInterface
// ...

Maintenant nous pouvons créer un DoctrineListener qui regarde si l'entité implemente AuthorInterface en utilisant la réflexion comme suit

<?php

namespace App\DoctrineListener;

use App\Entity\AuthorInterface;
use Doctrine\Bundle\DoctrineBundle\Attribute\AsDoctrineListener;
use Doctrine\ORM\Event\PrePersistEventArgs;
use Symfony\Bundle\SecurityBundle\Security;

#[AsDoctrineListener('prePersist')]
class AttachAuthorDoctrineListener
{
    public function __construct(
        private Security $security,
    ) {
    }

    public function prePersist(PrePersistEventArgs $event): void
    {
        $entity = $event->getObject();
        $reflectionClass = new \ReflectionClass($entity);
        if (!$reflectionClass->implementsInterface(AuthorInterface::class)) {
            return;
        }

        $user = $this->security->getUser();
        $entity->setAuthor($user);
    }
}

Et c'est tout, maintenant vous n'aurez qu'à ajouter implements AuthorInterface sur les entités qui ont besoin d'enregistrer l'auteur 🚀

Lisez aussi "comment filtrer les GET uniquement sur l'utilisateur connecté" https://dev.to/aratinau/api-platform-filtrer-les-resultats-uniquement-sur-lutilisateur-connecte-1fp6

Manage your GET query parameters with a react hook

Aymeric Ratinaud — Wed, 05 Jun 2024 16:15:55 +0000

For example, if I have this query /api/couriers?status[]=READ&status[]=SENT&status[]=UNREAD&urgency.value[]=0&urgency.value[]=25&importance.value[]=50&importance.value[]=25&importance.value[]=0&category.id[]=/api/categories/17&category.id[]=/api/categories/10&direction=incoming

And I want to remove the "importance", add another filter I find this solution:

import { useState } from 'react';

const useQueryParams = (initialState = {}) => {
  const [state, setState] = useState(initialState);

  const setProperty = (key, value) => {
    setState(prevState => ({
      ...prevState,
      [key]: value,
    }));
  };

  const addElement = (key, element) => {
    setState(prevState => {
      if (!prevState.hasOwnProperty(key)) {
        return {
          ...prevState,
          [key]: [element],
        };
      }

      if (!prevState[key].includes(element)) {
        return {
          ...prevState,
          [key]: [...prevState[key], element],
        };
      }

      return prevState;
    });
  }

  const removeElement = (key, element) => {
    setState(prevState => {
      const newArray = (prevState[key] || []).filter(item => item !== element);
      if (newArray.length === 0) {
        delete prevState[key]
      } else {
        return {
          ...prevState,
          [key]: newArray,
        };
      }
    });
  };

  const clear = () => {
    setState({})
  }

  return { state, setProperty, addElement, removeElement, clear };
};

export default useQueryParams;

Api-platform3 Boilerplate

Aymeric Ratinaud — Wed, 06 Mar 2024 13:55:44 +0000

I made a boilerplate available at this address which includes

symfony
api-platform
doctrine (of course)
fixtures and factory
codeception for functionnals tests

There is one entity Todo

<?php

namespace App\Entity;

use ApiPlatform\Metadata\ApiResource;
use App\Repository\TodoRepository;
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: TodoRepository::class)]
#[ApiResource]
class Todo
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(type: Types::TEXT)]
    private ?string $description = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getDescription(): ?string
    {
        return $this->description;
    }

    public function setDescription(string $description): static
    {
        $this->description = $description;

        return $this;
    }
}

How tests the GET of the collection :

<?php


namespace App\tests\Api\todos;

use App\Factory\TodoFactory;
use App\Tests\Support\ApiTester;
use App\Tests\Support\Step\Api\Anonymous;

class getTodosCest
{
    public function _before(ApiTester $I)
    {
    }

    /**
     * @param Anonymous $I
     * @return void
     */
    public function tryToGetAllTodosAsAnonymous(Anonymous $I)
    {
        TodoFactory::createMany(30);

        $I->am('an anonymous user');
        $I->wantTo('list all todos');

        $I->haveHttpHeader("accept", "application/ld+json");
        $I->haveHttpHeader("Content-Type", "application/json");
        $I->sendGet('todos');

        $I->seeResponseCodeIs(\Codeception\Util\HttpCode::OK);
        $I->seeResponseIsJson();
        $I->seeResponseContainsJson([
            "@context" => "/api/contexts/Todo",
            "@type" => "hydra:Collection",
            "hydra:totalItems" => 30
        ]);
    }
}

Do you know DoctrineListener?

Aymeric Ratinaud — Sat, 10 Feb 2024 17:30:30 +0000

Imagine you had to monitor an entity to log when it was created or updated

Create a Note entity

<?php

namespace App\Entity;

use App\Repository\NoteRepository;
use Doctrine\DBAL\Types\Types;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(repositoryClass: NoteRepository::class)]
class Note
{
    #[ORM\Id]
    #[ORM\GeneratedValue]
    #[ORM\Column]
    private ?int $id = null;

    #[ORM\Column(type: Types::TEXT)]
    private ?string $content = null;

    #[ORM\Column(length: 255)]
    private ?string $log = null;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getContent(): ?string
    {
        return $this->content;
    }

    public function setContent(string $content): static
    {
        $this->content = $content;

        return $this;
    }

    public function getLog(): ?string
    {
        return $this->log;
    }

    public function setLog(string $log): static
    {
        $this->log = $log;

        return $this;
    }
}

Then you can create a DoctrineListener to log when its created (persist) or updated

<?php

namespace App\DoctrineListener;

use App\Entity\Conference;
use App\Entity\Note;
use Doctrine\Bundle\DoctrineBundle\Attribute\AsEntityListener;
use Doctrine\Persistence\Event\LifecycleEventArgs;
use Doctrine\ORM\Events;


#[AsEntityListener(event: Events::prePersist, entity: Note::class)]
#[AsEntityListener(event: Events::preUpdate, entity: Note::class)]
class NoteEntityListener
{
    public function prePersist(Note $note, LifecycleEventArgs $event)
    {
        $note->setLog('This is from prePersist');
    }

    public function preUpdate(Note $note, LifecycleEventArgs $event)
    {
        $note->setLog('This is from preUpdate');
    }
}

That's all !
The doctrinelistener will be called at each persist or update.

Here is the complete list of events:

preRemove
postRemove
prePersist
postPersist
preUpdate
postUpdate
postLoad
preFlush
onFlush
postFlush
onClear

You have a demo at this address https://github.com/aratinau/api-platform-doctrine

What are your favorite underground resources for inspiration? Here 6. And what are yours?

Aymeric Ratinaud — Sat, 27 Jan 2024 21:42:08 +0000

codegrid

I personally like the codegrid channel, which shows how to make beautiful and simple sites quickly.

codrops

I hope you know codrops, which is a reference and offers lots of tips and resources.

awwwards

Of course the well-known awwwards

landingfolio

Here you can find landing page designs, templates and components

land-book

Here a website design gallery

freefrontend

Here you can find HTML, CSS and JavaScript code examples

DEV Community: Aymeric Ratinaud

Ma première extension navigateur qui permet d'indiquer les prix des cartes pokémon

Le développement

Les fonctionnalités principales

Mettre en place l’abonnement payant

La première victoire : des utilisateurs ont payé

Ce que j’ai appris

La suite

[Boost]

A new playground for creatives between Tumblr and CodePen 🌊

A new playground for creatives between Tumblr and CodePen 🌊

how to create a collection

Get a free landing-page template now! 📈

✅ What’s included?

🔗 Code

🛠️ Built with:

💡 Why I built this?

🔔 Want more?

🙌 Feedback is welcome!

Explorer toutes les fonctionnalités de console en JavaScript

Explorer toutes les fonctionnalités de console en JavaScript

1. console.log()

2. console.error()

3. console.warn()

4. console.info()

5. console.debug()

6. console.table()

7. console.dir()

8. console.time() et console.timeEnd()

9. console.group() et console.groupEnd()

10. console.groupCollapsed()

11. console.trace()

12. console.assert()

13. console.clear()

14. console.count() et console.countReset()

15. console.memory

Exemple combiné

Conclusion

DiscriminatorMap de Doctrine avec Api-platform

Api-platform : filtrer les résultats uniquement sur l'utilisateur connecté

Automatisons l'enregistrement du User sur n'importe quelle entité [Symfony]

Manage your GET query parameters with a react hook

Api-platform3 Boilerplate

Do you know DoctrineListener?

What are your favorite underground resources for inspiration? Here 6. And what are yours?

codegrid

codrops

awwwards

landingfolio

land-book

freefrontend

Explorer toutes les fonctionnalités de `console` en JavaScript

1. `console.log()`

2. `console.error()`

3. `console.warn()`

4. `console.info()`

5. `console.debug()`

6. `console.table()`

7. `console.dir()`

8. `console.time()` et `console.timeEnd()`

9. `console.group()` et `console.groupEnd()`

10. `console.groupCollapsed()`

11. `console.trace()`

12. `console.assert()`

13. `console.clear()`

14. `console.count()` et `console.countReset()`

15. `console.memory`