SmarMaker - Documentation
Docs» 04_howto:smartboot

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 :

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

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

Made with ❤ by CAP-REL · SmartMaker · GNU AGPL v3+
Code source · Faire un don
SmarMaker - Documentation
Traductions de cette page:
  • Français
  • Deutsch
  • English
  • Español
  • Italiano
  • Nederlands

Table of Contents

Table des matières

  • SmartBoot : Un squelette prêt à l'emploi
    • Installation
      • Linux
      • Windows
    • Structure générée
    • Manifest PWA dynamique
    • Layouts
      • Exemple de Router
    • AboutModal
    • Controller d'exemple
    • Étapes suivantes
  • SmartAuth
  • SmartMaker - Back (PHP)
    • Mapping Dolibarr - React
  • SmartMaker - Front (React)
    • Animations de pages
    • Architecture
    • Astuces
    • Calendar
    • Composants et pages
    • Configuration du Provider
    • Debug et Logs
    • Hooks SmartCommon
    • PWA (Progressive Web App)
    • Requêtes API
    • Routage
    • SmartCommon
    • Stockage de données
    • Synchronisation offline
    • Thèmes
    • Traductions
  • HowTo - Pas à pas - Votre première application
    • Développement PHP (back)
    • Développement React (front)
    • Première étape : Module Builder Dolibarr
    • SmartAuth
    • SmartBoot : Un squelette prêt à l'emploi
  • Formation SmartMaker
    • Module 1 : Fondamentaux JavaScript ES6+
      • Chapitre 1 : Variables et Scope
      • Chapitre 2 : Fonctions
      • Chapitre 3 : Programmation Asynchrone
      • Chapitre 4 : Modules ES6
    • Module 2 : Introduction à React
      • Chapitre 1 : Philosophie React
      • Chapitre 2 : JSX
      • Chapitre 3 : Composants
    • Module 3 : Hooks React Fondamentaux
      • Chapitre 1 : useState
      • Chapitre 2 : useEffect
      • Chapitre 3 : useRef
      • Chapitre 4 : useContext
    • Module 4 : React Avancé
      • Chapitre 1 : useCallback et useMemo
      • Chapitre 2 : Custom Hooks
      • Chapitre 3 : Redux et Redux Toolkit
    • Module 5 : Architecture SmartMaker
      • Chapitre 1 : Structure du projet
      • Chapitre 2 : Configuration
      • Chapitre 3 : Flux de données
    • Module 6 : SmartCommon - Composants
      • Chapitre 1 : Mise en page
      • Chapitre 2 : Navigation
      • Chapitre 3 : Formulaires
      • Chapitre 4 : Affichage
    • Module 7 : SmartCommon - Hooks
      • Chapitre 1 : useApi
      • Chapitre 2 : Gestion d'état
      • Chapitre 3 : Hooks utilitaires
      • Chapitre 4 : Synchronisation Offline
    • Module 8 : Backend API (PHP)
      • Chapitre 1 : Routage
      • Chapitre 2 : Controllers
      • Chapitre 3 : Mappers
      • Extrafields et formulaires dynamiques
    • Module 9 : Intégration complète
      • Chapitre 1 : Backend
      • Chapitre 2 : Frontend
      • Chapitre 3 : Déploiement
    • Module 10 : Fonctionnalités avancées
      • Chapitre 1 : Mode offline
      • Chapitre 2 : Internationalisation (i18n)
      • Chapitre 3 : Autres fonctionnalités
    • Module 11 : Bonnes pratiques
  • Démonstration
  • Start
  • Composants et pages
  • Afficher le texte source
  • Anciennes révisions
  • Liens de retour
  • Haut de page