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

Open Source

Alternative à EasyAdminBundle & Sonata

Sylius Stack

@stlgaits

Sylius Grid Bundle

Sylius Resource Bundle

Twig Hooks

Bootstrap Admin UI

Symfony UX & Asset Mapper

Doctrine ORM & DBAL Drivers

 

@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

composer require -W \
  doctrine/orm \
  doctrine/doctrine-bundle \
  pagerfanta/doctrine-orm-adapter \
  symfony/asset-mapper \
  sylius/bootstrap-admin-ui \
  sylius/ui-translations
symfony new pilea --version="8.1.*" --webapp
cd pilea
docker compose up -d
symfony serve -d

@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

symfony console make:entity

@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

 symfony console sylius:debug:resource

Commande pour lister les Ressources

@stlgaits

Transformer notre Entité en Ressource

src/Entity/Plant.php

@stlgaits

Implémenter ResourceInterface

src/Entity/Plant.php

@stlgaits

 symfony console sylius:debug:resource

Debug Resources Command

symfony console sylius:debug:resource app.plant

@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

Groupées

  • 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

symfony console make:entity

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 

 

symfony console make:grid

@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

La suite...

  • 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

 

2013

Sylius 0.1

2024

Sylius Stack 0.12.3

2020

Monofony

Loïc Frémont

aujourd'hui

Sylius Stack

@stlgaits

Paweł Jędrzejewski

Menu

@stlgaits

Ajouter la page d'accueil