Beispiel: Entwicklung einer White-Label-App

In diesem Artikel wollen wir euch vorstellen, wie ihr mit dem Ionic-Framework mit relativ einfachen Methoden eine White-Label-App entwickelt.

Was verstehe ich unter White Label

Zuerst aber einmal: was ist überhaupt eine „White-Label-App“? Wikipedia beschreibt „White-Label“ so:

Die Begriffe White Label (engl. für ‚weißes Etikett‘) und Weißprodukt bezeichnen Produkte, die ohne Label oder mit unterschiedlichen Labels angeboten werden.

Das heißt, wir wollen eine App haben, die eine bestimmte Funktionalität hat aber im „Look and Feel“ anders agiert.

Zu diesem Zweck werden wir eine App bauen, mit der man Bilder auf Wikimedia Commons suchen kann. Die App gibt es dann in zwei Geschmacksrichtungen, einmal ein cooles Blau und zum anderen ein süßes Pink.

Beispiel Projekt

Um zu zeigen wie ihr eine White Label App erstellt, haben wir ein Beispiel gebaut. Dort kannst du im Bauprozess über die Umgebungsvariable SKIN steuern, welches „Label“ zum Einsatz kommt.

Stellschrauben

Im Ordner config im Wurzelverzeichnis des Projektes liegen die Ordner cool und cute für die Skins. Im Ordner base liegen gemeinsame Dateien für alle Skins und zu guter Letzt die Konfigurationsdateien global-config.json und webpack.config.js.

Die Datei global-config.json enthält die Konfiguration für unsere „White-Label“-Funktionaltität. Hier definieren wir, welche Themes unterstützt werden:

{
    "allowedSkins": [
        "cute",
        "cool"
    ]
}

Als Nächstes gibt es die Webpack-Konfigurationsdatei webpack.config.js. Dort übernehmen wir zuerst die Standard-Konfiguration aus dem ionic-app-scripts Projekt:

const defaultWebpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config.js');

Dann erweitern wir die Konfiguration um das EnvironmentPlugin damit die Umgebungsvariable SKIN auch während der Laufzeit des Projektes zur Verfügung steht und nicht nur während des Builds der Anwendung:

const whitelistedEnvVars = ['SKIN'];
…
    config.plugins.push(new webpack.EnvironmentPlugin(whitelistedEnvVars));

Damit können wir schon einiges machen, zum Beispiel Inhalte steuern oder Menüpunkte je nach Skin ein- und ausblenden. Aber das Wichtigste kommt jetzt noch, die Assets wie SCSS, Übersetzungen oder auch Bilder.

Assets

In Ionic-Projekten liegen die Assets für gewöhnlich unter src/assets, da wir die Assets aber je nach Skin unterscheiden müssen, legen wir in jedem Skin-Ordner einen assets Ordner an. Damit die Assets aus der Konfiguration auch in dem eigentlichen Assets-Ordner kommen, gibt es das Skript scripts/prepare-assets.ts. Dieses lässt sich in 5 Schritte aufteilen:

1. Den Ordner src/assets löschen.
2. Die Assets aus dem Base-Ordner nach src/assets kopieren.
3. Die SCSS-Variablen-Datei aus dem Base-Ordner nach src/theme/variables.scss kopieren.
4. Die Assets aus dem Skin-Ordner nach src/assets kopieren.
5. Die SCSS-Variablen-Datei aus dem Skin-Ordner nach src/theme/variables.scss kopieren.

Als Übung wird euch überlassen, die Übersetzungsdateien sinnvoll zu mergen und nicht einfach zu kopieren, sodass Übersetzungsstrings nicht doppelt gepflegt werden müssen.

Abfragen des Skins im Code

Jetzt hat man schon die Assets, Übersetzungen und das Styling angepasst, aber will es im Code eventuell je nach Skin anders regeln.

Dazu hatten wir ja am Anfang das EnvironmentPlugin integriert und jetzt werden wir es auch benutzen. Dazu definieren wir uns einen Angular-Provider SkinSelector:

import { Injectable } from '@angular/core';

@Injectable()
export class SkinSelector  {
    public get name(): string {
        return process.env.SKIN;
    }
}

Diesen integrieren wir in der „Über uns“-Seite

about.ts:

import { Component } from '@angular/core';
import { SkinSelector } from '../../providers';

@Component({
    selector: 'page-about',
    templateUrl: 'about.html',
})
export class AboutPage {
    constructor(
        public skin: SkinSelector,
    ) {

    }

}

Und frage ihn dann im View ab:

<ion-header>
  <ion-navbar>
    <ion-title>
      {{ 'about' | translate }}
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<p *ngIf="skin.name === 'cool'">
    Cooler text.
</p>

<p *ngIf="skin.name === 'cute'">
    Süßer Text.
</p>
</ion-content>

Fazit

Um die ganzen Sachen zusammenzuführen, muss man die Umgebungsvariable SKIN setzen und die App bauen:

$ export SKIN="cute"
$ ionic cordova build android

Ionic ruft dann intern den npm-Task build auf, was dann wiederrum den von uns definierten Task prebuild auslöst, in dem unser Skript scripts/prepare-assets.ts steht. Wenn der ionic-Befehl dann durchgelaufen ist haben wir unsere pinke Bilder-Such-App und können diese ausliefern.

Du möchtest mit uns coole Projekte, wie eine White-Label-App entwickeln? Dann schau mal auf unserer Job-Seite vorbei.