lumnik. / scénarios Tous les scénarios · English

40 000 articles parcourus page par page dans la PWA

Objectif Parcourir tout un catalogue dans la PWA sans jamais charger plus de 50 lignes à la fois.

Deux exports CSV, deux entités, deux vues liées, une app. Le hub sert le catalogue par pages de 50.

manifests/10-products.yaml
apiVersion: connectors.lumnik.io/v1kind: Connectormetadata:  name: pwa-pagination-products  connector_type: csv-file  scopes: [pwa-pagination]spec:  transport:    kind: local    path: /tmp/lumnik-scenario/pwa_pagination/m_product.csv  parser:    has_header: true  after_process: none  mapping:    dataset:      - require-headers:          columns: [m_product_id, m_product_category_id, name, description, isactive]    cell:      - parse-number: { column: m_product_id, integer: true }      - parse-number: { column: m_product_category_id, integer: true }      - clean:          columns: [name, description]          strip: true          remove-control-chars: true          normalize-unicode: NFC      - strip-invisible: { columns: [name] }      - replace-smart-quotes: { columns: [description] }
manifests/15-product-categories.yaml
apiVersion: connectors.lumnik.io/v1kind: Connectormetadata:  name: pwa-pagination-product-categories  connector_type: csv-file  scopes: [pwa-pagination]spec:  transport:    kind: local    path: /tmp/lumnik-scenario/pwa_pagination/m_product_category.csv  parser:    has_header: true  after_process: none  mapping:    dataset:      - require-headers:          columns: [m_product_category_id, name, description, isactive]    cell:      - parse-number: { column: m_product_category_id, integer: true }      - clean:          columns: [name, description]          strip: true          remove-control-chars: true          normalize-unicode: NFC      - strip-invisible: { columns: [name] }      - replace-smart-quotes: { columns: [name, description] }      - decode-html-entities: { columns: [name, description] }
manifests/20-product.yaml
kind: Entityname: PwaPaginationProductlabel: Article du cataloguedescription: "Articles du catalogue, enrichis avec leur catégorie. Une ligne représente un article."match: [product_id]scopes: [pwa-pagination]columns:  product_id:    label: "Identifiant de l'article"  category_id:    label: "Identifiant de la catégorie"  category_name:    label: "Catégorie"  reference:    label: "Référence"  description:    label: "Description"  active:    label: "Actif"sources:  - table: t_pwa_pagination_products    map:      m_product_id: product_id      m_product_category_id: category_id      name: reference      description: description      isactive: activejoins:  - table: t_pwa_pagination_product_categories    from: category_id    to: m_product_category_id    map:      name: category_name
manifests/25-category.yaml
kind: Entityname: PwaPaginationCategorylabel: Catégorie d'articlesdescription: "Catégories utilisées pour classer les articles du catalogue. Une ligne représente une catégorie."match: [category_id]scopes: [pwa-pagination]columns:  category_id:    label: "Identifiant de la catégorie"  name:    label: "Catégorie"  description:    label: "Description"  active:    label: "Active"sources:  - table: t_pwa_pagination_product_categories    map:      m_product_category_id: category_id      name: name      description: description      isactive: active
manifests/30-products-view.yaml
apiVersion: apps.lumnik.io/v1kind: Viewmetadata:  name: pwa-pagination-productsspec:  scope: pwa-pagination  table: connector.v_pwapaginationproduct  title: Catalogue des articles  columns: [product_id, reference, description, category_name, active]  links:    - column: category_name      targetView: pwa-pagination-categories      filters:        name: "{category_name}"
manifests/35-categories-view.yaml
apiVersion: apps.lumnik.io/v1kind: Viewmetadata:  name: pwa-pagination-categoriesspec:  scope: pwa-pagination  table: connector.v_pwapaginationcategory  title: Catégories  columns: [name, description, active]  links:    - column: name      targetView: pwa-pagination-products      filters:        category_name: "{name}"
manifests/40-pwa-pagination-app.yaml
apiVersion: apps.lumnik.io/v1kind: Appmetadata:  name: pwa-paginationspec:  title: Catalogue  scope: pwa-pagination  icon: generic  theme:    accentColor: "#8b7ff0"    backgroundColor: "#14121f"  tabs: [fiches]  default: false
Lignes par page
50
Articles parcourus, chacun une fois
40233

preuves: replay.log · transform v1

Limites

  • Curseur opaque; pas de saut direct à la page n.
  • Données synthétiques.

Catalogue · fiches

40 000 articles dans un téléphone.

Page par page.

Ni tout charger, ni perdre une ligne.

Catalogue synthétique

Le problème

Tout charger bloque l'écran.

  • 40 000 lignes ne tiennent pas dans un téléphone.
  • Une pagination naïve saute ou répète des lignes.
  • Les catégories sont dans un autre fichier.

Rien n'est modifié

Deux exports CSV, tels quels.

  • Deux entités, deux vues.
  • Une app réduite aux fiches.
  • Aucune application à développer.

Ce qu'il a fallu écrire

tabs: [fiches]

Une app réduite aux fiches.

Le scénario complet tient en 150 lignes de déclaration.

Ce que voit l'utilisateur

Des pages de 50.

  • En tableau sur ordinateur.
  • En cartes sur téléphone.
  • Une catégorie se clique.

Captures du 21 octobre 2026, valeurs vérifiées au rejeu du 3 novembre.

La preuve

Tout le catalogue, sans doublon.

  • Deux pages distinctes de 50 lignes.
  • Un curseur parcourt les 40 233 articles.
  • Rejeu du 3 novembre 2026.

La limite

Pas de saut direct à la page n.

  • Le curseur est opaque.
  • On avance ou on recule d'une page.
  • Données synthétiques.

Essayer

Le scénario se rejoue de bout en bout.

CSV, entités, vues, app: chaque étape est publiée avec sa sortie.

Ce scénario tourne sur lumnik Open, gratuit et open source.

Essayer lumnik Open →