Table des matières

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

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 :