ANDP – Eine Code-Basis, alle Plattformen

Neu ab Version 8.2:
ANDP ist jetzt vollständig Cross-Platform. Eine einzige Code-Basis liefert sowohl die Web-Micro-Apps im Portal als auch die native Mobile-App für iOS & Android.

Entwickeln Sie Features einmal – und veröffentlichen Sie sie nahtlos auf Mobile und Web.  

ANDP vereint React Native und Expo in einem MonoRepo. Geteilte Packages liefern Business-Logik und UI-Bausteine; spezialisierte Apps (Mobile oder Web) verwenden nur noch die passenden Packages. Schreiben Sie Funktionen einmal – und verwenden Sie es für alle Plattformen.

Mehr Details gesucht?
Umfangreiche Konfigurations- und Integrationshinweise finden Sie sowohl in der README.md im Wurzelverzeichnis andp-cpa/ als auch in den READMEs der einzelnen Micro-Apps und Packages (z. B. apps/andp-ma-…/README.md oder packages/feature-…/README.md).

1. Architektur auf einen Blick

Der Quellcode liegt im Verzeichnis andp-cpa/. Dort finden Sie eine klare Trennung zwischen apps/ (Targets) und packages/ (wiederverwendbare Bausteine).

2. Verzeichnisstruktur

andp-cpa/
├── apps/
│   ├── andp-mobile              (Mobile-App)
│   ├── andp-ma-messages         (Micro-App Nachrichten)
│   ├── andp-ma-tasks            (Micro-App Aufgaben)
│   ├── andp-ma-business-cases   (Micro-App Geschäfts­fälle)
│   ├── andp-ma-formgen          (Micro-App FormGen)
│   └── … weitere Micro-Apps
└── packages/
    ├── core                   (Basis & UI)
    ├── feature-messages       (Fachlogik Nachrichten)
    ├── feature-tasks          (Fachlogik Aufgaben)
    ├── feature-business-cases (Fachlogik Geschäfts­fälle)
    ├── feature-formgen        (Formular­generator)
    ├── feature-services       (Mobile-only Services)
    └── … weitere Packages

3. Nützliche npm-Skripte

Alle Befehle mit start: aus package.json im Überblick:

• npm run start:mobile – Mobile-App (Expo)
• npm run start:ma-messages – Web-Micro-App “Messages”
• npm run start:ma-bc – Geschäfts­fälle (Web)
• npm run start:dev:ma-bc – Geschäfts­fälle (Web, DEV Mode)
• npm run start:formgen – FormGen (Web)
• npm run start:dev:formgen – FormGen (Web, DEV Mode - FormularId kann im MicroApp-Formgen App.tsx mitgegeben werden)
• npm run start:mock:formgen – FormGen (Web, Mock-Daten - Mock-Formularen können ohne Backend geladen werden)
• npm run start:dev:ma-ms – Messages (Web, DEV Mode)
• npm run start:dev:ma-ts – Tasks (Web, DEV Mode)

4. Schnellstart

1. Abhängigkeiten installieren
   npm install
2. Mobile-App testen
   npm run start:mobile
3. Beliebige Micro-App starten
   npm run start:ma-messages

5. Neue Funktion einfügen – Step-by-Step

Beispiel: Eine Reports-Funktion soll in Mobile & Web erscheinen.

1. Package erzeugen – packages/feature-reports
2. Fachlogik & UI implementieren
3. Mobile-Screen registrieren (apps/andp-mobile)
4. Neue Micro-App unter apps/ anlegen
5. Build & Test – beide Plattformen prüfen

6. Best Practices

• i18n Übersetzungen – Titel & Beschreibungen als Übersetzungs-Keys anlegen.
• UI übersichtlich trennen – Plattform-spezifisches Verhalten klar trennen.
• Bereits vorhandene Styles aus @andp/core verwenden

7. Troubleshooting

8. MicroApp Business-Cases - Backend liefert neue Variable – Mini-Tutorial

Angenommen, das Backend schickt künftig zusätzlich ein Feld priority. So ergänzen Sie es:

1. DTO erweitern (/models/DetailsBusinessCaseDTO.ts)

export class DetailsBusinessCaseDTO {
  /* … bestehende Felder … */
  priority?: string;  /** Erweitern von Konstruktor, fromJson und toJson nicht vergessen */
}

2. Screen anpassen (DetailScreen.tsx) –

const {
  partner,
  caseType,
  name,
  /* … weitere Felder … */
  notifications = [],
  priority,
} = businessCase;

3. Im UI darstellen (nur Ausschnitt)

<AndpText style={styles.businessCaseInfoLabel}>
  {t('business_partner_detail_priority')}
</AndpText>
<AndpText style={styles.businessCaseInfo}>
  {priority ?? '-'}
</AndpText>

Tipp: Legen Sie den neuen i18n-Key business_partner_detail_priority im CMS an und achten Sie auf Responsive-Design (lange Texte kürzen).