Ga naar inhoud
TabbrTabbr Docs

Je eerste module

Op deze pagina zet je een module-workspace op, bekijk je ze in de dev shell en publiceer je ze in je eigen club. Reken op een halfuur.

Wat je nodig hebt

Section titled “Wat je nodig hebt”
  • Node.js 20 of nieuwer en npm.
  • Een club op Tabbr waarin je ADMIN bent: daar publiceer je naartoe om te testen.
  • Basiskennis van Angular (standalone components, signals) en TypeScript.

Aan de slag

Section titled “Aan de slag”

  1. Start van een bestaande module.

    Het snelst vertrek je van de starter (systemworks-bv/tabbr-module-starter) of van een kopie van een module uit de repository — de toestemmingenmodule (tabbr-consent-module) is een goed skelet, met de dev shell al ingesteld. Installeer de afhankelijkheden:

    Terminal window
    npm install

  2. Koppel de workspace aan je club.

    Terminal window
    npm run setup

    setup (= tabbr-module init) vraagt de clubcode, een module-id en een titel, en schrijft ze in tabbr.config.json.

  3. Bekijk je module in de dev shell.

    Terminal window
    npm start

    Open http://localhost:4200 en log in met je Tabbr-account. Je ziet je module in het kader van Tabbr: het menu, de header met schermacties, het dashboard met je widgets, je profiel met je secties, de instellingenpagina en de vragen aan de gebruiker — tegen de echte API en met de stijl van je club.

  4. Publiceer in je club.

    Terminal window
    npm run publish-module

    De CLI bouwt de frontend en de backend, pakt ze in en laadt ze op naar je club. De eerste keer opent er een browser om in te loggen; het token wordt bewaard in ~/.tabbr/credentials.json. Herlaad Tabbr en je module staat erin.

De workspace

Section titled “De workspace”

Elke module heeft dezelfde indeling:

  • tabbr.config.json het manifest: identiteit, rechten, entiteiten, backend
  • package.json
  • federation.config.js wat er als remote gedeeld wordt
  • Directorysrc/
    • main.ts alleen voor de dev preview
    • Directoryapp/
      • app.config.ts alleen voor de dev preview
      • Directorymodule/ de module zelf
        • module.ts de moduleklasse
        • module-config.ts
        • Directoryi18n/
          • nl.ts
          • en.ts
        • …pagina’s, dialogen, widgets
  • Directorybackend/
    • Directorysrc/
      • index.ts de functies die je triggers oproepen
    • Directorytest/
      • …
    • tabbr-backend.d.ts de typings van de sandbox
  • Directoryshared/ logica die frontend én backend gebruiken
    • …
  • Directorycontracts/ de types van de contracten die je gebruikt of aanbiedt
    • …

De belangrijkste npm-scripts:

Script Wat het doet
npm start de dev preview in de dev shell (ng serve)
npm run build productiebuild van de frontend
npm test de tests van de backend (node --test)
npm run typecheck typecheck van de backend
npm run publish-module bouwen en publiceren in je club
npm run publish-local idem, naar een lokale Tabbr (api.local.tabbr.be)
npm run publish-store de broncode indienen bij de Module Store
npm run fetch-types de TypeScript-types van de entiteiten van je club ophalen
npm run fetch-contracts de types van de contracten uit uses ophalen

De dev shell

Section titled “De dev shell”

De dev preview draait in de dev shell van de SDK (@tabbr/module-sdk/dev-shell): het kader van Tabbr rond je module. Wat Tabbr aan een module biedt, biedt de dev shell ook.

src/app/app.config.ts
import { ApplicationConfig, isDevMode } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideTabbrDevBridge } from '@tabbr/module-sdk/dev-bridge';
import { provideTabbrDevShell } from '@tabbr/module-sdk/dev-shell';
import config from '../../tabbr.config.json';
import { Module } from './module/module';


export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(),
    provideRouter([]),
    ...(isDevMode() && config.club
      ? [
          provideTabbrDevBridge({ clubCode: config.club, apiHost: config.apiHost }),
          provideTabbrDevShell(Module, { title: config.title }),
        ]
      : []),
  ],
};
src/app/app.component.ts
import { Component } from '@angular/core';
import { TabbrDevShellComponent } from '@tabbr/module-sdk/dev-shell';


@Component({ selector: 'app-root', imports: [TabbrDevShellComponent], template: `<tabbr-dev-shell />` })
export class AppComponent {}

De dev bridge logt je in bij je club en levert wat Tabbr anders levert (TABBR_API_HOST, ACTIVE_CLUB_CODE, PERSON_PUBLIC_API, …). Ze laadt ook de stylesheet, het thema, licht/donker en de iconen van je club, zodat je module er in de preview precies zo uitziet als in Tabbr.

In de dev shell Pad
het menu van je module uit menu()
het dashboard met je widgets /
je profiel met je secties /profile
je instellingenpagina, met Opslaan en Annuleren in de header /admin/settings/<moduleId>
vragen aan de gebruiker (userPrompts) bij het starten en als banner

Niet beschikbaar in de dev preview: MODULE_CONTRACTS, MESSAGING_COMPOSER, FILTER_EDITOR_COMPONENT en SCRIPT_EDITOR_COMPONENT. Injecteer die altijd met { optional: true }, zodat je module ook zonder ze werkt.

Volgende stappen

Section titled “Volgende stappen”