Sylius Stack

L'admin bundle qui en a sous le capot !

@stlgaits

Estelle Gaits

Ex-prof devenue dev 👩‍🏫

Sylius Key Contributor

Sylius Stack lover ❤️

Maniaque des quiz ciné/séries 🎞️

Forte addiction aux plantes

@stlgaits

2 Sylius Key Contributors

Partenaire Sylius depuis 2022

Sylius, Symfony, IA et bien plus encore 🦕🎶

https://www.youtube.com/watch?v=ObgFab4rLVE

Mon petit problème de plantes...

... est devenu grand !

Photo non contractuelle*

@stlgaits

Plant management dashboard

@stlgaits

@stlgaits

Objectifs

dashboard de récap'

gestion des emplacements

gestion des plantes

ajout de photos

workflow de tâches à effectuer

Objectifs

inventaire des plantes

Objectifs

tâches à effectuer

(ou reporter !)

Sylius Stack à la rescousse !

@stlgaits

CRUD (Create Read Update Delete)

grilles paginées, triables et filtrées

Sylius Stack

@stlgaits

Sylius Stack

@stlgaits

@stlgaits

Sylius Stack

Sylius 

≠

framework eCommerce complet (shop & admin)

packages pour faire des interfaces admin

@stlgaits

Prérequis

et recommandations

https://symfony.com/download

framework

CLI

@stlgaits

Installation

@stlgaits

https://127.0.0.1:8000/admin

@stlgaits

https://127.0.0.1:8000/admin/

@stlgaits

CRUD Plantes

De quoi on a besoin ?

@stlgaits

modèle de données

routing & opérations

data providers & processors 

une grille pour l'opération index

4 essentiels Sylius Stack

@stlgaits

Ressources

Sylius Resource Bundle

@stlgaits

Ressources : 2 responsabilités

Sylius Resource Bundle

Data model (structure)

Routing & operations (CRUD)

Modèle de données

@stlgaits

Doctrine ORM & DBAL

Object-Relational Manager

Database Abstraction Layer

persister les objets PHP (entités) en base de données

@stlgaits

Doctrine Entity + Repository

@stlgaits

Configurer les Ressources Sylius

config/packages/sylius_resource.yaml

Déclarer dans quel dossier elles sont

@stlgaits

Transformer notre Entité en Ressource Sylius

src/Entity/Plant.php

attribut PHP

@stlgaits

Commande pour lister les Ressources

@stlgaits

Transformer notre Entité en Ressource

src/Entity/Plant.php

@stlgaits

Implémenter ResourceInterface

src/Entity/Plant.php

@stlgaits

Debug Resources Command

@stlgaits

modèle de données

routing & opérations

data providers & processors 

une grille pour l'opération index

4 essentiels Sylius Stack

Opérations & routage

@stlgaits

• Create
• Show
• Update
• Delete
• ApplyStateMachineTransition

Unitaires

• Index
• BulkDelete
• BulkUpdate

Index

@stlgaits

@stlgaits

Configurer notre 1ère opération

src/Entity/Plant.php

@stlgaits

Index operation

src/Entity/Plant.php

@stlgaits

Préfixe pour la Route 

@stlgaits

https://127.0.0.1:8000/admin/plants

Repository

Doc

@stlgaits

https://stack.sylius.com/resource/index/create_new_resource

@stlgaits

Doctrine Entity + Repository

Repository : pagination

@stlgaits

src/Repository/PlantRepository.php

Dossier pour les  Templates Twig

src/Entity/Plant.php

@stlgaits

/admin/plants

@stlgaits

modèle de données

routing & opérations

data providers & processors 

une grille pour l'opération index

4 essentiels Sylius Stack

@stlgaits

Grids

Sylius Grid Bundle

@stlgaits

Grid

paginated

data tables

filters

actions

sorting

@stlgaits

Ajouter une Grille à l'opération Index 

@stlgaits

Grid

Fields

Actions

@stlgaits

Attribut #[AsGrid] 

src/Grid/PlantGrid.php

@stlgaits

Grid

Fields

src/Grid/PlantGrid.php

@stlgaits

Grid

Actions

src/Grid/PlantGrid.php

Ressource : relier la grille à l'opération Index

src/Entity/Plant.php

/admin/plants

@stlgaits

Grid Fields

https://stack.sylius.com/grid/index/fields

String  

DateTime

Enum

Callable

Twig

Créez vos propres champs avec

#[AsField]

Très puissant  !

Health Enum 

src/Enum/Health.php

@stlgaits

EnumField

src/Grid/PlantGrid.php

@stlgaits

 Colorer le champ 'health'

@stlgaits

Configurer la couleur dans notre Enum

src/Enum/Health.php

classes Bootstrap 5

Remplacer EnumField par TwigField

src/Grid/PlantGrid.php

Accéder à la valeur du champ dans le template Twig

@stlgaits

templates/plant/grid/field/health.html.twig

Health Enum Twig template

templates/plant/grid/field/health.html.twig

case value

@stlgaits

@stlgaits

Actions

https://stack.sylius.com/grid/index/actions

Create

Delete

Update

Show

ApplyTransition

Créez vos propres actions avec

ActionInterface

Item

Bulk

Main

Delete

Update

@stlgaits

Item Actions

src/Grid/PlantGrid.php

@stlgaits

Item Actions

src/Grid/PlantGrid.php

https://127.0.0.1:8000/admin/plants

@stlgaits

Delete Action

src/Grid/PlantGrid.php

@stlgaits

Delete Operation

src/Entity/Plant.php

@stlgaits

Delete

https://localhost:8000/admin/plants

@stlgaits

Create Action

src/Grid/PlantGrid.php

@stlgaits

Create Operation

src/Entity/Plant.php

@stlgaits

Create

https://localhost:8000/admin/plants/new

@stlgaits

Filtres

@stlgaits

Filters

https://stack.sylius.com/grid/index/filters#php-recommended

String  

Date

Select

Exists

Money

Entity

Boolean

Ou créer vos filtres custom avec l'attribut

#[AsFilter]

@stlgaits

Recherche avec StringFilter

https://stack.sylius.com/grid/index/filters#string

@stlgaits

StringFilter

src/Grid/PlantGrid.php

options de recherche

recherche multi-champs

src/Grid/PlantGrid.php

@stlgaits

routing & opérations

modèle de données

data providers & processors 

une grille pour l'opération index

4 essentiels Sylius Stack

Doctrine n'est 

pas obligatoire

@stlgaits

@stlgaits

Pas envie d'utiliser Doctrine ?

Besoin d'une API comme provider ?

https://www.youtube.com/watch?v=KJfOgMsJgc8

@stlgaits

Species

Pl@ntNet

API Provider

@stlgaits

@stlgaits

Dans la vraie vie...

interface de dialogue et gestion du CSE 

@stlgaits

Dans la vraie vie 2...

plateforme de monitoring des articles

reçus, découpés et renvoyés aux abonnés

• setup hyper rapide
• hautement personnalisable
• pas besoin d'être un·e génie du frontend : Twig, Symfony UX, Asset Mapper & Bootstrap Admin UI
• Open Source
• bonnes pratiques Symfony
• architecture souple : RAD, DDD,...

Forces

• UX améliorable 
• une opération Dashboard  ?  
• DX : courbe apprentissage des Twig Hooks

@stlgaits

Vous en voulez encore ?!

Démo 

Doc

stack.sylius.com

github.com

/stlgaits/pilea

@stlgaits

@stlgaits

Slack Sylius

https://sylius.com/slack

canal #sylius-stack 

Merci !

Questions?

@stlgaits

@stlgaits

Envie d'aider ? Contribuez !

https://github.com/Sylius/Stack

https://github.com/Sylius/SyliusResourceBundle

https://github.com/Sylius/SyliusGridBundle

@stlgaits

ApplyTransitionAction

machine à état

src/Grid/PlantGrid.php

@stlgaits

ApplyStateMachineTransition

machine à état

src/Entity/CareTask.php

ApplyTransitionAction

https://127.0.0.1:8000/admin/care-tasks

Menu

Ajouter le lien vers la liste des plantes

https://stack.sylius.com/cookbook/admin_panel/menu

Menu

@stlgaits

Décorer KnpMenuBuilder

src/Menu/MenuBuilder.php

Objectifs

vue détaillée d'une plante

Objectifs

CRUD

emplacements

@stlgaits

Paweł Jędrzejewski

Menu

@stlgaits

Ajouter la page d'accueil