SmartBoot : Un squelette prêt à l'emploi

SmartBoot génère la structure complète d'un module Dolibarr augmenté avec SmartMaker (front React + back PHP).

Sources: https://inligit.fr/cap-rel/dolibarr/smartmaker/smartboot.git

git clone https://inligit.fr/cap-rel/dolibarr/smartmaker/smartboot.git && ./smartboot/setup.sh

<note>Le script PowerShell est en cours de finalisation.</note>

git clone https://inligit.fr/cap-rel/dolibarr/smartmaker/smartboot.git && powershell ./smartboot/setup.ps1

Puis suivez les étapes de l'assistant :

Is your project name Coucou ?
[y/n] y
ok on continue

please wait during npm install depends ... it could take time :)

Après installation, SmartBoot ajoute à votre module :

monmodule/
├── mobile/                          # Application React
│   ├── index.html                   # Point d'entrée (manifest PWA dynamique)
│   ├── vite.config.js               # Configuration Vite + PWA
│   ├── src/
│   │   ├── main.jsx                 # Point d'entrée React
│   │   ├── App.jsx                  # Composant racine
│   │   ├── appConfig.js             # Configuration globale
│   │   └── components/
│   │       ├── app/
│   │       │   ├── Provider/        # Provider SmartCommon
│   │       │   └── Router/          # Routes (utilise <RouteGuard> de smartcommon)
│   │       ├── layouts/
│   │       │   ├── AnimationLayout/ # Transitions de pages
│   │       │   └── PagesLayout/     # Layout global (thème, scale)
│   │       └── pages/
│   │           ├── public/          # Pages sans auth (Login, Welcome)
│   │           └── private/         # Pages avec auth (Home, DeviceIdentification)
│   └── public/
│       └── locales/                 # Fichiers de traduction
├── pwa/                             # Build de production
│   ├── api.php                      # Routeur API
│   └── .htaccess                    # Redirection Apache
├── smartmaker-api/
│   ├── Controllers/                 # Vos controllers PHP
│   ├── dmGenericObject.php          # Exemple de mapping Dolibarr
│   └── HomeController.php           # Controller d'exemple
└── smartmaker-api-prepend.php       # Initialisation SmartAuth

SmartBoot configure automatiquement le manifest PWA de manière dynamique via SmartAuth. Le fichier index.html pointe vers api.php/manifest au lieu d'un fichier statique :

<link rel="manifest" href="api.php/manifest">
<link rel="icon" type="image/png" href="api.php/icon/64">
<link rel="apple-touch-icon" href="api.php/icon/192">

Et dans vite.config.js, le manifest statique est désactivé :

VitePWA({
  // ...
  manifest: false, // Servi dynamiquement par SmartAuth
})

Voir PWA pour la configuration des constantes Dolibarr.

SmartBoot ne fournit que deux layouts visuels :

L'authentification et l'identification d'appareil sont gérées par le composant <RouteGuard> de smartcommon (4 modes : requireGuest, requireAuth, requireDeviceIdentification, requireDeviceIdentified). Voir Composants avancés -> RouteGuard pour la documentation détaillée.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { RouteGuard } from '@cap-rel/smartcommon';

import {
  LoginPage, HomePage, Error404Page, PagesLayout,
  WelcomePage, DeviceIdentificationPage, AnimationLayout,
} from 'src/components';

export const Router = () => (
  <BrowserRouter>
    <Routes>
      <Route element={<PagesLayout />}>
        // Pages publiques (login, welcome) : redirige vers / si déjà authentifié
        <Route element={<RouteGuard requireGuest />}>
          <Route path="/welcome" element={<WelcomePage />} />
          <Route path="/login" element={<LoginPage />} />
        </Route>

        // Identification d'appareil : authentifié + deviceOptions présent
        <Route element={<RouteGuard requireDeviceIdentification />}>
          <Route path="/device-identification" element={<DeviceIdentificationPage />} />
        </Route>

        // Pages privées : authentifié + appareil identifié
        <Route element={<RouteGuard requireDeviceIdentified redirectTo="/device-identification" />}>
          <Route element={<AnimationLayout />}>
            <Route path="/" element={<HomePage />} />
            // Ajouter vos routes privées ici
          </Route>
        </Route>

        <Route path="*" element={<Error404Page />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

<note tip>Avant la migration vers smartcommon, SmartBoot fournissait quatre layouts custom (PrivatePagesLayout, PublicPagesLayout, PreDeviceIdentificationLayout, PostDeviceIdentificationLayout). Ils ont été remplacés par <RouteGuard> qui centralise la logique dans smartcommon et permet d'évoluer sans toucher au skel.</note>

Les pages publiques de connexion et d'identification utilisent les composants high-level <LoginComponent> et <DeviceIdentificationComponent> de smartcommon. Le skel ne fait que les habiller (wrapper visuel, vagues de fond, liens register/forgot-password) et brancher onSuccess/onError sur le store local.

• <LoginComponent> inclut gratuitement le flux QR pair smartAuth (scan → claim → poll). Voir détails.
• <DeviceIdentificationComponent> lit useApi().user.deviceOptions pour afficher soit un input simple (premier device), soit un radio + input (pairing). Voir détails.

SmartBoot intègre l'AboutModal de smartcommon (vérification automatique des mises à jour PWA via usePWAUpdate) :

import { AboutModal } from '@cap-rel/smartcommon';
import { APP_VERSION } from 'src/utils';

<AboutModal
  open={showAbout}
  onClose={() => setShowAbout(false)}
  appName="Mon Application"
  version={APP_VERSION}
/>

Ce composant affiche :

• Le nom de l'application et la version (APPVERSION issu de VITEAPP_VERSION)
• Des champs libres optionnels via la prop fields
• Un bouton “Vérifier les mises à jour” qui relance le Service Worker

Voir Composants avancés -> AboutModal pour les libellés et slots.

SmartBoot génère un HomeController.php d'exemple avec un mapping dmGenericObject.php :

// smartmaker-api/HomeController.php
class HomeController
{
    public function index($arr = null)
    {
        global $db, $langs;

        $ret = [
            'statusCode' => 200,
            'generic_message' => "",
            'lastupdate'  => "",
            'home'  => "",
        ];

        return ([$ret, 200]);
    }
}

Vous pouvez maintenant passer au développement :

• Développement PHP (back) - Routes et controllers
• Développement React (front) - Interface utilisateur