# 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 de l'application
│   │       ├── layouts/
│   │       │   ├── AnimationLayout/ # Transitions de pages
│   │       │   ├── PagesLayout/     # Layout global (thème, scale)
│   │       │   ├── PrivatePagesLayout/  # Guard authentification
│   │       │   ├── PublicPagesLayout/   # Guard pages publiques
│   │       │   ├── PostDeviceIdentificationLayout/
│   │       │   └── PreDeviceIdentificationLayout/
│   │       ├── pages/
│   │       │   ├── public/          # Pages sans auth (Login)
│   │       │   └── private/         # Pages avec auth (Home)
│   │       └── common/
│   │           └── AboutModal/      # Modal "À propos" avec MAJ PWA
│   └── 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

SmartBoot fournit un système de layouts pour gérer l'authentification et les animations :

^ 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) |
| ''PrivatePagesLayout'' | Redirige vers ''/login'' si non authentifié |
| ''PublicPagesLayout'' | Redirige vers ''/'' si déjà authentifié |
| ''PostDeviceIdentificationLayout'' | Redirige vers identification si device requis |
| ''PreDeviceIdentificationLayout'' | Redirige vers ''/'' si device déjà identifié |

### Exemple de Router

```
import { Routes, Route } from 'react-router-dom';
import { PagesLayout, AnimationLayout, PrivatePagesLayout, PublicPagesLayout } from '../layouts';

export const Router = () => (
  <Routes>
    <Route element={<PagesLayout />}>
      <Route element={<AnimationLayout />}>
        {/* Pages publiques */}
        <Route element={<PublicPagesLayout />}>
          <Route path="/login" element={<LoginPage />} />
        </Route>

        {/* Pages privées */}
        <Route element={<PrivatePagesLayout />}>
          <Route path="/" element={<HomePage />} />
          <Route path="/settings" element={<SettingsPage />} />
        </Route>
      </Route>
    </Route>
  </Routes>
);
```

## AboutModal

SmartBoot inclut un composant ''AboutModal'' avec vérification des mises à jour PWA :

```
import { AboutModal } from '../common/AboutModal';

const [showAbout, setShowAbout] = useState(false);

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

Ce composant affiche :

- Le nom de l'application
- La version (depuis ''APP_VERSION'')
- Un bouton pour vérifier et installer les mises à jour PWA

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