Découvrez les fonctionnalités avancées
Jusqu'à présent, nous avons travaillé en "vase clos". Vos textes étaient écrits directement dans l'éditeur et votre variableisRegisteredne vivait que le temps d'une session dans le navigateur. Pour passer à l'échelle supérieure, WeWeb propose un arsenal de fonctionnalités avancées.
L'idée n'est pas de tout apprendre par cœur maintenant, mais de savoir que ces outils existent pour ne jamais vous sentir bloqué.
Plongez dans les fonctionnalités avancées
Les API & collections
C'est sans doute la fonctionnalité la plus critique. WeWeb se distingue par sa philosophie modulaire : il gère le "Front-end" (l'interface), mais vous laisse libre du choix pour le "Back-end" (la base de données).
Actuellement, les données de votre produit (le nom de la chaussure, le prix, l'image) sont "en dur" dans la page. Si le prix change, vous devez ouvrir l'éditeur et le modifier manuellement. Ce n'est pas viable pour un catalogue de 1000 produits.
C'est là qu'interviennent les Collections. Une Collection est un pont entre WeWeb et une source de données externe. WeWeb propose des plugins natifs pour se connecter facilement à :
Airtable : Idéal pour des contenus gérés par des équipes marketing.
Supabase ou Xano : Pour des bases de données robustes capables de gérer des millions de lignes et des requêtes complexes,.
REST API : Pour connecter littéralement n'importe quel service web existant sur la planète.
L’authentification
Votre Landing Page est publique : tout le monde peut la voir. Mais la plupart des applications nécessitent un espace privé (un tableau de bord, un profil, un historique de commandes). WeWeb intègre des modules d'Authentification puissants. Concrètement, cela vous permet de :
Créer des formulaires d'inscription (Sign up) et de connexion (Log in).
Définir des pages "Privées" qui renvoient automatiquement les visiteurs non connectés vers la page de login.
Gérer des Rôles et Permissions (User Groups).
Imaginez que vous développiez un outil interne pour votre entreprise. Vous pourriez décider que la page "Admin" n'est visible que pour les utilisateurs ayant le rôle "Manager", tandis que les "Employés" ne voient que leur propre profil. WeWeb gère cette complexité visuellement, souvent en lien direct avec votre base de données (comme Supabase Auth).
Les listes dynamiques
Vous souvenez-vous de notre "Container" carte produit ? Imaginez devoir copier-coller ce container 50 fois pour afficher 50 chaussures différentes. C'est impensable. Les Collection Lists (Listes dynamiques) sont la solution magique. Le principe est simple :
Vous dessinez une seule fois la carte (le modèle).
Vous connectez cette carte à une Collection (votre liste de 50 produits).
WeWeb génère automatiquement les 50 cartes.
Mieux encore, grâce au Binding (la liaison de données), chaque carte affichera automatiquement la bonne image et le bon prix correspondant à sa ligne dans la base de données. C'est la clé de voûte de tout site e-commerce ou catalogue.
Les Filtres et Conditions
Une interface statique est ennuyeuse. Une interface intelligente s'adapte à l'utilisateur. Nous avons effleuré ce sujet avec le "Conditional Rendering" (Rendu conditionnel) dans le chapitre précédent. Mais on peut aller beaucoup plus loin. WeWeb permet de créer des logiques de filtrage avancées sans code :
Filtres Frontend : Afficher uniquement les chaussures "Rouges" quand l'utilisateur clique sur une catégorie.
Visibilité conditionnelle complexe : Afficher une bannière de promotion seulement si l'utilisateur est connecté ET qu'il n'a pas encore commandé ET que nous sommes en période de soldes.
Ces logiques se construisent avec des formules "No-Code" (qui ressemblent à celles d'Excel) ou du JavaScript pour les plus experts, offrant une flexibilité totale sur le comportement de l'interface.
Le Design System avancé
Pour un petit projet, modifier les couleurs à la main est acceptable. Pour une application d'entreprise avec 50 pages, c'est un cauchemar de maintenance. WeWeb encourage l'utilisation d'un Design System rigoureux. Au-delà des simples classes CSS, vous pouvez définir :
Des variables de couleurs et de typographies globales.
Des composants réutilisables (comme un menu de navigation ou un pied de page) : modifiez le composant à un seul endroit, et il se met à jour sur toutes les pages du projet.
C'est ce qui permet de garantir une cohérence visuelle parfaite (Pixel Perfect) et de gagner un temps précieux lors des évolutions du projet.
Les Connecteurs externes et Plugins
Enfin, votre application ne vit pas seule. Elle doit souvent parler avec d'autres outils spécialisés. WeWeb propose une bibliothèque d'extensions (Plugins) pour enrichir vos fonctionnalités :
Paiement : Intégration de Stripe pour gérer les abonnements.
Cartographie : Affichage de cartes interactives (Google Maps, Mapbox).
Graphiques : Visualisation de données (Chart.js) pour des tableaux de bord analytiques.
Si le plugin n'existe pas, la nature ouverte de WeWeb vous permet d'ajouter du code personnalisé (Vue.js) pour créer vos propres composants. C'est la garantie que vous ne serez jamais bloqué par les limites de l'outil.
Retrouvez les ressources officielles et bonnes pratiques
Devant tant de possibilités, il est normal de se sentir un peu vertigineux. La philosophie d'un développeur WeWeb (et d'un développeur tout court) n'est pas de tout savoir, mais de savoir où chercher. L'écosystème WeWeb est riche en ressources pour accompagner votre montée en compétence.
La WeWeb Academy
C'est votre université en ligne. WeWeb Academy propose une série de cours vidéo très structurés couvrant tous les aspects de l'outil, des bases aux concepts les plus avancés (comme l'authentification sécurisée ou l'optimisation des performances). Consultez ces vidéos dès que vous attaquez une nouvelle fonctionnalité majeure (ex: avant de connecter votre première base de données).
Les Templates et le Reverse Engineering
Apprendre en observant est souvent plus efficace qu'apprendre en lisant. La Marketplace de WeWeb regorge de modèles (Templates), certains gratuits, d'autres payants. Vous y trouverez des clones d'applications célèbres (comme Twitter ou Airbnb) ou des kits d'interface utilisateur (UI Kits).
La Communauté et Discord
Vous bloquerez. C'est une certitude. Un workflow refusera de se lancer, une donnée ne s'affichera pas. Ne restez pas seul face à votre écran. WeWeb dispose d'une communauté très active, notamment sur Discord et sur leur forum. C'est un lieu d'entraide où débutants et experts échangent quotidiennement.
Mais, avant de poser une question, faites une recherche. Il est probable que quelqu'un ait déjà rencontré votre problème. Si vous postez, soyez précis : partagez des captures d'écran de votre navigateur et de vos workflows.
La Documentation API
Enfin, pour ceux qui veulent connecter WeWeb à des outils externes, la documentation technique (Docs) est votre bible. Elle explique comment configurer les appels API, comment utiliser les variables de système, et comment sécuriser vos échanges de données.
À vous de jouer
Pour clore ce parcours d'initiation, nous allons faire un exercice de projection. Nous n'allons pas construire techniquement ces fonctionnalités avancées (cela ferait l'objet d'un cours entier !), mais nous allons concevoir l'architecture de l'évolution de votre projet.
Contexte
Votre Landing Page pour la chaussure "Running Pro 2024" (créée au chapitre P1C4) est un succès. L'équipe marketing est ravie, mais elle a de nouvelles demandes pour la version 2 (V2) :
Catalogue : Ils veulent lancer 3 nouveaux modèles de chaussures la semaine prochaine. Ils ne veulent pas vous appeler pour créer les pages à la main.
Espace Membre : Ils veulent que les utilisateurs inscrits puissent voir l'état de leur précommande.
Analytics : Ils veulent un petit graphique sur une page admin pour voir le nombre d'inscrits par jour.
Consignes
En vous aidant des concepts vus dans ce chapitre, décrivez quelle fonctionnalité WeWeb vous utiliseriez pour répondre à chaque besoin, et expliquez brièvement le principe de mise en place.
Remplissez ce tableau mental :
Besoin 1 (Catalogue 3 produits) : Quelle fonctionnalité ? Quelle source de données ?
Besoin 2 (Espace Membre) : Quelle fonctionnalité pour sécuriser ? Quelle fonctionnalité pour afficher les données perso ?
Besoin 3 (Graphique Admin) : Quel type d'outil ou d'extension utiliser ?
En résumé
WeWeb est modulaire : Il gère l'interface (Frontend) et se connecte à des outils externes (Backend) comme Supabase ou Airtable pour gérer les données et l'authentification.
Les Collections et Listes Dynamiques permettent de passer de l'artisanat (pages statiques) à l'industrie (catalogues automatisés) en liant le design aux données.
L'Authentification et les Rôles sont essentiels pour créer des applications sécurisées et personnaliser l'expérience selon l'utilisateur (Admin vs Client),.
L'écosystème est votre allié : Pour progresser, appuyez-vous sur la WeWeb Academy, les Templates et la communauté Discord. Savoir chercher l'information est une compétence clé du développeur.
Tout est possible (ou presque) : Grâce aux extensions et au code personnalisé, vous n'êtes pas limité par les fonctionnalités natives de l'outil.
Bravo pour ce parcours ! Vous avez maintenant les clés du camion. Il ne vous reste plus qu'à vérifier tes connaissances avec le quiz. À vous de jouer !
