Créez votre première application AML View en cinq minutes

Un premier projet AML View doit faire comprendre le framework tout en produisant immédiatement un résultat utile. Dans ce guide, vous allez créer une petite liste de lecture réactive, comprendre chaque dossier généré et distinguer ce qui s’exécute sur le serveur de ce qui continue dans le navigateur.

1. Vérifier le CLI

AML contient le runtime nécessaire pour créer et servir un projet PHPAML. Vérifiez la version installée avant de commencer.

aml version

Ce guide cible PHPAML 1.7.0-beta.22 ou une version compatible plus récente. Si votre version est ancienne, mettez AML à jour afin que l’application générée contienne la structure View et le runtime actuels.

2. Créer l’application

Placez-vous dans le dossier où vous conservez vos projets, puis créez une application AML View.

cd ~/Desktop
aml create-view-app liste-lecture
cd liste-lecture
aml serve

Le serveur de développement démarre sur http://127.0.0.1:8910. Si ce port est occupé, AML sélectionne 8911, puis 8912, sans vous demander d’arrêter un autre projet.

3. Comprendre la structure générée

Le projet sépare le code que vous écrivez du code interne géré par AML.

liste-lecture/
├── public/
│   └── index.php
├── routes/
├── src/
│   ├── controllers/
│   ├── models/
│   └── views/
│       ├── pages/
│       ├── components/
│       ├── layouts/
│       ├── stylesheets/
│       └── assets/
├── runtime/
├── .env
└── phpaml.json

public contient le point d’entrée web. Votre interface déclarative vit dans src/views. Les contrôleurs et les modèles restent disponibles lorsque le frontend a besoin de logique applicative ou de persistance. Les caches, paquets téléchargés et configurations internes restent dans runtime.

4. Construire une page réactive

Ouvrez la page d’accueil dans src/views/pages et remplacez son contenu par une petite interface de liste de lecture.

final class Accueil extends Page
{
    #[State]
    public array $livres = ['Clean Code', 'Refactoring'];

    #[State]
    public string $titre = '';

    #[Computed]
    public function total(): int
    {
        return count($this->livres);
    }

    public function body(): View
    {
        return VStack(
            Heading('Ma liste de lecture')->size(44)->bold(),
            Text("{$this->total()} livres à lire"),
            TextField('Titre du livre')
                ->value($this->titre)
                ->onInput(fn (string $value) => $this->titre = $value),
            Button('Ajouter')->onClick(function (): void {
                $titre = trim($this->titre);
                if ($titre === '') return;

                $this->livres[] = $titre;
                $this->titre = '';
            }),
            ForEach(
                $this->livres,
                fn (string $livre) => Text($livre)->class('book-row')
            )
        )->gap(16)->padding(40);
    }
}

State conserve les valeurs qui changent. Computed dérive une information depuis cet état. Button et TextField déclarent les interactions du navigateur. ForEach affiche une collection sans mélanger des balises HTML à la page.

5. Ajouter les styles sans toucher à public

Créez src/views/stylesheets/pages/home.css. AML View découvre récursivement les feuilles de style, ce qui permet de les organiser par page, composant ou fonctionnalité.

.book-row {
    padding: 14px 16px;
    background: #f4f3ee;
    color: #17181c;
    font-weight: 650;
}

Appliquez explicitement les classes avec ->class(). Conservez dans public les fichiers qui exigent une URL directe, comme favicon, robots.txt et sitemap.xml. Les styles d’interface et les images importées appartiennent à src/views.

6. Comprendre ce qui se passe après un clic

PHP produit le premier document sur le serveur. AML Engine active ensuite les interactions déclarées dans le navigateur. L’ajout d’un livre modifie l’état concerné sans demander au serveur de recalculer toute la page.

Cette frontière est volontaire : View décrit l’interface, Engine gère la réactivité côté client, Framework peut servir les routes backend et Data peut persister les entités lorsque le projet a besoin d’un stockage durable.

7. Vérifier le résultat

Essayez d’ajouter un titre vide : aucun élément ne doit apparaître. Ajoutez trois livres et vérifiez que le total calculé évolue après chaque action. Rechargez ensuite la page : la liste revient à sa valeur initiale, car ce premier exemple utilise uniquement un état local.

Cette dernière observation fournit l’exercice suivant : créer un modèle Book avec PHPAML Data, charger les livres depuis un contrôleur ou une route API et conserver la même View déclarative.

En résumé

En quelques minutes, vous avez créé une application PHP structurée, rendu une page déclarative, géré une saisie, mis à jour une collection, utilisé un état calculé et organisé le CSS de la page. Vous avez aussi observé le principe central de PHPAML : chaque paquet possède un rôle clair et l’application adopte seulement les couches dont elle a besoin.