# 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

## Installation

### Linux

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

### Windows

<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 :)
```

## Structure générée

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
```

## Manifest PWA dynamique

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 [[:03_front:pwa|PWA]] pour la configuration des constantes Dolibarr.

## Layouts et gardes de routes

SmartBoot ne fournit que deux layouts visuels :

^ Layout ^ Rôle ^
| ''PagesLayout'' | Layout global : applique le thème, le dark mode et le scale |
| ''AnimationLayout'' | Gère les transitions animées entre pages (Framer Motion) |

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

### Exemple de Router (skel SmartBoot)

```
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>

## Pages générées (LoginPage, DeviceIdentificationPage)

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 [[:03_front:composants_avances#logincomponent|détails]].
  * ''<DeviceIdentificationComponent>'' lit ''useApi().user.deviceOptions'' pour afficher soit un input simple (premier device), soit un radio + input (pairing). Voir [[:03_front:composants_avances#deviceidentificationcomponent|détails]].

## AboutModal

SmartBoot intègre l'''AboutModal'' de smartcommon (vérification automatique des mises à jour PWA via [[:03_front:hooks#usepwaupdate|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 (''APP_VERSION'' issu de ''VITE_APP_VERSION'')
  * Des champs libres optionnels via la prop ''fields''
  * Un bouton "Vérifier les mises à jour" qui relance le Service Worker

Voir [[:03_front:composants_avances#aboutmodal|Composants avancés -> AboutModal]] pour les libellés et slots.

## Controller d'exemple

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]);
    }
}
```

## Étapes suivantes

Vous pouvez maintenant passer au développement :

- [[:04_howto:devback|Développement PHP (back)]] - Routes et controllers
- [[:04_howto:devfront|Développement React (front)]] - Interface utilisateur