Freigeben über

Anleitung: Erstellen einer Kundenapplikation für Datenbanken

In diesem Tutorial wird eine einfache App zum Verwalten einer Kundenliste erstellt. Dabei wird eine Auswahl grundlegender Konzepte für Unternehmens-Apps in UWP vorgestellt. Hier erfahren Sie, wie Sie:

  • Implementieren Sie Erstellen-, Lesen-, Aktualisieren- und Löschvorgänge für eine lokale SQL-Datenbank.
  • Fügen Sie ein Datenraster hinzu, um Kundendaten in Ihrer Benutzeroberfläche anzuzeigen und zu bearbeiten.
  • Ordnen Sie UI-Elemente in einem einfachen Formularlayout zusammen.

Der Ausgangspunkt für dieses Lernprogramm ist eine Single-Page-App mit minimaler Benutzeroberfläche und Funktionalität, basierend auf einer vereinfachten Version der Kundenbestellungen-Datenbank-Beispiel-App. Es ist in C# und XAML geschrieben, und wir erwarten, dass Sie mit diesen beiden Sprachen vertraut sind.

Die Hauptseite der funktionierenden App

Voraussetzungen

Nachdem Sie das Repository geklont/heruntergeladen haben, können Sie das Projekt bearbeiten, indem Sie CustomerDatabaseTutorial.sln mit Visual Studio öffnen.

Hinweis

Diese Anleitung basiert auf dem Datenbankbeispiel für Kundenbestellungen, das kürzlich aktualisiert wurde, um WinUI und das Windows App SDK zu nutzen. Bis dieses Lernprogramm und dieser Code aktualisiert werden, gibt es Unterschiede zwischen den beiden Beispielen.

Teil 1: Verhaltenskodex

Wenn Sie Ihre App unmittelbar nach dem Öffnen ausführen, werden am oberen Rand eines leeren Bildschirms einige Schaltflächen angezeigt. Obwohl sie für Sie nicht sichtbar ist, enthält die App bereits eine lokale SQLite-Datenbank, die mit einigen Testkunden bereitgestellt wird. Zuerst implementieren Sie ein UI-Steuerelement, um diese Kunden anzuzeigen, und fahren dann mit dem Hinzufügen von Datenbankoperationen fort. Bevor Sie beginnen, zeige ich Ihnen, wo Sie arbeiten werden.

Ansichten

CustomerListPage.xaml ist die Ansicht der App, die die Benutzeroberfläche für die einzelne Seite in diesem Tutorial definiert. Jedes Mal, wenn Sie ein visuelles Element in der Benutzeroberfläche hinzufügen oder ändern müssen, tun Sie es in dieser Datei. In diesem Tutorial werden Sie durch das Hinzufügen dieser Elemente geleitet:

  • Ein "RadDataGrid" zum Anzeigen und Bearbeiten Ihrer Kunden.
  • Ein StackPanel-, um die Anfangswerte für einen neuen Kunden festzulegen.

ViewModels

Die grundlegende Logik der App befindet sich in ViewModels\CustomerListPageViewModel.cs. Jede In der Ansicht ausgeführte Benutzeraktion wird zur Verarbeitung an diese Datei übergeben. In dieser Anleitung werden Sie einige neue Codezeilen hinzufügen und die folgenden Methoden implementieren:

  • CreateNewCustomerAsync, das ein neues CustomerViewModel -Objekt initialisiert.
  • DeleteNewCustomerAsync, der einen neuen Kunden löscht, bevor er in der Benutzeroberfläche angezeigt wird.
  • DeleteAndUpdateAsync -, der die Logik des Löschbuttons behandelt.
  • GetCustomerListAsync, das eine Liste von Kunden aus der Datenbank abruft.
  • SaveInitialChangesAsync, wodurch Informationen eines neuen Kunden zur Datenbank hinzugefügt werden.
  • UpdateCustomersAsync-, wodurch die Benutzeroberfläche aktualisiert wird, um alle hinzugefügten oder gelöschten Kunden widerzuspiegeln.

CustomerViewModel- ist ein Wrapper für die Informationen eines Kunden, der nachverfolgt, ob sie kürzlich aktualisiert wurden. Sie müssen dieser Klasse nichts hinzufügen, aber ein Teil des Codes, den Sie an anderer Stelle hinzufügen, verweist darauf.

Weitere Informationen zum Aufbau des Beispiels entnehmen Sie der Übersicht über die App-Struktur.

Teil 2: Hinzufügen des DataGrid

Bevor Sie mit der Arbeit mit Kundendaten beginnen, müssen Sie ein Benutzeroberflächensteuerelement hinzufügen, um diese Kunden anzuzeigen. Dazu verwenden wir ein vorgefertigtes RadDataGrid-Steuerelement von Drittanbietern. Das Telerik.UI.for.UniversalWindowsPlatform NuGet-Paket ist bereits in diesem Projekt enthalten. Fügen wir das Raster zu unserem Projekt hinzu.

  1. Öffnen Sie Views\CustomerListPage.xaml aus dem Projektmappen-Explorer. Fügen Sie die folgende Codezeile innerhalb des Page-Tags hinzu, um eine Zuordnung zum Telerik-Namespace zu deklarieren, der die DataGrid-Komponente enthält.

        xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid"

  2. Fügen Sie unterhalb der CommandBar- im Haupt-RelativePanel- der Ansicht ein RadDataGrid-Steuerelement mit einigen grundlegenden Konfigurationsoptionen hinzu:

    <Grid
    x:Name="CustomerListRoot"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <RelativePanel>
        <CommandBar
            x:Name="mainCommandBar"
            HorizontalAlignment="Stretch"
            Background="AliceBlue">
            <!--CommandBar content-->
        </CommandBar>
        <telerikGrid:RadDataGrid
            x:Name="DataGrid"
            BorderThickness="0"
            ColumnDataOperationsMode="Flyout"
            GridLinesVisibility="None"
            GroupPanelPosition="Left"
            RelativePanel.AlignLeftWithPanel="True"
            RelativePanel.AlignRightWithPanel="True"
            RelativePanel.Below="mainCommandBar" />
    </RelativePanel>
</Grid>

  3. Sie haben das Datenraster hinzugefügt, es benötigt jedoch Daten zur Anzeige. Fügen Sie die folgenden Codezeilen hinzu:

    ItemsSource="{x:Bind ViewModel.Customers}"
UserEditMode="Inline"

    Nachdem Sie nun eine anzuzeigende Datenquelle definiert haben, wird RadDataGrid- den größten Teil der UI-Logik für Sie verarbeiten. Wenn Sie ihr Projekt ausführen, werden jedoch weiterhin keine Daten angezeigt. Das liegt daran, dass das ViewModel es noch nicht lädt.

Leere App ohne Kunden

Teil 3: Kunden lesen

Beim Initialisieren ruft ViewModels\CustomerListPageViewModel.cs die GetCustomerListAsync-Methode auf. Diese Methode muss die Testkundendaten aus der SQLite-Datenbank abrufen, die im Lernprogramm enthalten ist.

  1. Aktualisieren Sie in ViewModels\CustomerListPageViewModel.csIhre Methode GetCustomerListAsync mit diesem Code:

    public async Task GetCustomerListAsync()
{
    var customers = await App.Repository.Customers.GetAsync(); 
    if (customers == null)
    {
        return;
    }
    await DispatcherHelper.ExecuteOnUIThreadAsync(() =>
    {
        Customers.Clear();
        foreach (var c in customers)
        {
            Customers.Add(new CustomerViewModel(c));
        }
    });
}

    Die GetCustomerListAsync-Methode wird aufgerufen, wenn das ViewModel geladen wird, aber vor diesem Schritt hat sie nichts ausgeführt. Hier haben wir einen Aufruf der GetAsync--Methode in Repository/SqlCustomerRepositoryhinzugefügt. Dies ermöglicht es, das Repository zu kontaktieren, um eine aufzählbare Sammlung von Kundenobjekten abzurufen. Anschließend werden sie in einzelne Objekte analysiert, bevor sie der internen ObservableCollection- hinzugefügt werden, damit sie angezeigt und bearbeitet werden können.

  2. Führen Sie Ihre App aus und die Datentabelle zeigt nun die Liste der Kunden an.

Erste Kundenliste

Teil 4: Kunden bearbeiten

Sie können die Einträge im Datenraster bearbeiten, indem Sie darauf doppelklicken, aber Sie müssen sicherstellen, dass alle Änderungen, die Sie in der Benutzeroberfläche vornehmen, auch an Ihrer Sammlung von Kunden im CodeBehind vorgenommen werden. Dies bedeutet, dass Sie bidirektionale Datenbindung implementieren müssen. Weitere Informationen hierzu finden Sie in unserer Einführung in die Datenbindung.

  1. Deklarieren Sie zunächst, dass ViewModels\CustomerListPageViewModel.cs die INotifyPropertyChanged-Schnittstelle implementiert:

    public class CustomerListPageViewModel : INotifyPropertyChanged

  2. Fügen Sie dann im Hauptteil der Klasse das folgende Ereignis und die folgende Methode hinzu:

    public event PropertyChangedEventHandler PropertyChanged;

public void OnPropertyChanged([CallerMemberName] string propertyName = null) =>
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

    Die OnPropertyChanged--Methode ermöglicht es Ihren Settern, das PropertyChanged--Ereignis auszulösen, das für die bidirektionale Datenbindung erforderlich ist.

  3. Aktualisieren Sie den Setter für SelectedCustomer mit diesem Funktionsaufruf:

    public CustomerViewModel SelectedCustomer
{
    get => _selectedCustomer;
    set
    {
        if (_selectedCustomer != value)
        {
            _selectedCustomer = value;
            OnPropertyChanged();
        }
    }
}

  4. Fügen Sie in Views\CustomerListPage.xamldie eigenschaft SelectedCustomer ihrem Datenraster hinzu.

    SelectedItem="{x:Bind ViewModel.SelectedCustomer, Mode=TwoWay}"

    Dadurch wird die Auswahl des Benutzers im Datenraster mit dem entsprechenden Customer-Objekt im CodeBehind verknüpft. Der TwoWay-Bindungsmodus erlaubt, dass die Änderungen, die in der Benutzeroberfläche vorgenommen wurden, auf dieses Objekt übertragen werden.

  5. Führen Sie Ihre App aus. Sie können jetzt die Im Raster angezeigten Kunden sehen und Änderungen an den zugrunde liegenden Daten über die Benutzeroberfläche vornehmen.

Bearbeiten eines Kunden im Datengitter

Teil 5: Kunden aktualisieren

Nachdem Sie Ihre Kunden nun sehen und bearbeiten können, müssen Sie ihre Änderungen an die Datenbank übertragen und alle Aktualisierungen abrufen können, die von anderen Personen vorgenommen wurden.

  1. Kehren Sie zu ViewModels\CustomerListPageViewModel.cs zurück, und navigieren Sie zur UpdateCustomersAsync-Methode . Aktualisieren Sie ihn mit diesem Code, um Änderungen an die Datenbank zu übertragen und neue Informationen abzurufen:

    public async Task UpdateCustomersAsync()
{
    foreach (var modifiedCustomer in Customers
        .Where(x => x.IsModified).Select(x => x.Model))
    {
        await App.Repository.Customers.UpsertAsync(modifiedCustomer);
    }
    await GetCustomerListAsync();
}

    Dieser Code verwendet die IsModified-Eigenschaft von ViewModels\CustomerViewModel.cs, die automatisch aktualisiert wird, wenn der Kunde geändert wird. Auf diese Weise können Sie unnötige Aufrufe vermeiden und nur Änderungen von aktualisierten Kunden an die Datenbank übertragen.

Teil 6: Erstellen eines neuen Kunden

Das Hinzufügen eines neuen Kunden stellt eine Herausforderung dar, da der Kunde als leere Zeile angezeigt wird, wenn Sie ihn der Benutzeroberfläche hinzufügen, bevor Sie Werte für seine Eigenschaften angeben. Das ist kein Problem, aber hier erleichtern wir das Festlegen der Anfangswerte eines Kunden. In diesem Lernprogramm fügen wir einen einfachen zusammenklappbaren Bereich hinzu, aber wenn Sie weitere Informationen hinzufügen möchten, könnten Sie zu diesem Zweck eine separate Seite erstellen.

Aktualisieren des Code-Behind

  1. Fügen Sie ein neues privates Feld und eine öffentliche Eigenschaft zu ViewModels\CustomerListPageViewModel.cs hinzu. Dies wird verwendet, um zu steuern, ob das Panel sichtbar ist.

    private bool _addingNewCustomer = false;

public bool AddingNewCustomer
{
    get => _addingNewCustomer;
    set
    {
        if (_addingNewCustomer != value)
        {
            _addingNewCustomer = value;
            OnPropertyChanged();
        }
    }
}

  2. Fügen Sie dem ViewModel eine neue öffentliche Eigenschaft hinzu, eine Umkehrung des Wertes von AddingNewCustomer. Dies wird verwendet, um die Standard-Schaltflächen der Befehlsleiste zu deaktivieren, wenn das Panel sichtbar ist.

    public bool EnableCommandBar => !AddingNewCustomer;

    Sie benötigen nun eine Möglichkeit, das einklappbare Panel anzuzeigen und einen Kunden darin zu erstellen, um ihn zu bearbeiten.

  3. Fügen Sie dem ViewModel ein neues privates Feld und eine öffentliche Eigenschaft hinzu, um den neu erstellten Kunden zu speichern.

    private CustomerViewModel _newCustomer;

public CustomerViewModel NewCustomer
{
    get => _newCustomer;
    set
    {
        if (_newCustomer != value)
        {
            _newCustomer = value;
            OnPropertyChanged();
        }
    }
}

  4. Aktualisieren Sie Ihre CreateNewCustomerAsync--Methode, um einen neuen Kunden zu erstellen, dem Repository hinzuzufügen und als ausgewählten Kunden festzulegen:

    public async Task CreateNewCustomerAsync()
{
    CustomerViewModel newCustomer = new CustomerViewModel(new Models.Customer());
    NewCustomer = newCustomer;
    await App.Repository.Customers.UpsertAsync(NewCustomer.Model);
    AddingNewCustomer = true;
}

  5. Aktualisieren Sie die SaveInitialChangesAsync--Methode, um dem Repository einen neu erstellten Kunden hinzuzufügen, die Benutzeroberfläche zu aktualisieren und das Panel zu schließen.

    public async Task SaveInitialChangesAsync()
{
    await App.Repository.Customers.UpsertAsync(NewCustomer.Model);
    await UpdateCustomersAsync();
    AddingNewCustomer = false;
}

  6. Fügen Sie die folgende Codezeile als letzte Zeile im Setter für AddingNewCustomerhinzu:

    OnPropertyChanged(nameof(EnableCommandBar));

    Es wird sichergestellt, dass EnableCommandBar automatisch aktualisiert wird, wenn AddingNewCustomer geändert wird.

Aktualisieren der Benutzeroberfläche

  1. Navigieren Sie zurück zu Views\CustomerListPage.xaml, und fügen Sie ein StackPanel mit den folgenden Eigenschaften zwischen Ihrer CommandBar und Ihrem Datenraster hinzu.

    <StackPanel
    x:Name="newCustomerPanel"
    Orientation="Horizontal"
    x:Load="{x:Bind ViewModel.AddingNewCustomer, Mode=OneWay}"
    RelativePanel.Below="mainCommandBar">
</StackPanel>

    Das Attribut x:Load stellt sicher, dass dieses Panel nur angezeigt wird, wenn Sie einen neuen Kunden hinzufügen.

  2. Nehmen Sie die folgende Änderung an der Position des Datenrasters vor, um sicherzustellen, dass sie nach unten verschoben wird, wenn der neue Bereich angezeigt wird:

    RelativePanel.Below="newCustomerPanel"

  3. Aktualisieren Sie Ihr Stack-Panel mit vier TextBox--Steuerelementen. Sie binden an die einzelnen Eigenschaften des neuen Kunden und ermöglichen es Ihnen, die Werte zu bearbeiten, bevor Sie sie zum Datenraster hinzufügen.

    <StackPanel
    x:Name="newCustomerPanel"
    Orientation="Horizontal"
    x:Load="{x:Bind ViewModel.AddingNewCustomer, Mode=OneWay}"
    RelativePanel.Below="mainCommandBar">
    <TextBox
        Header="First name"
        PlaceholderText="First"
        Margin="8,8,16,8"
        MinWidth="120"
        Text="{x:Bind ViewModel.NewCustomer.FirstName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBox
        Header="Last name"
        PlaceholderText="Last"
        Margin="0,8,16,8"
        MinWidth="120"
        Text="{x:Bind ViewModel.NewCustomer.LastName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBox
        Header="Address"
        PlaceholderText="1234 Address St, Redmond WA 00000"
        Margin="0,8,16,8"
        MinWidth="280"
        Text="{x:Bind ViewModel.NewCustomer.Address, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBox
        Header="Company"
        PlaceholderText="Company"
        Margin="0,8,16,8"
        MinWidth="120"
        Text="{x:Bind ViewModel.NewCustomer.Company, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>

  4. Fügen Sie Ihrem neuen Stapelbereich eine einfache Schaltfläche hinzu, um den neu erstellten Kunden zu speichern.

    <StackPanel>
    <!--Text boxes from step 3-->
    <AppBarButton
        x:Name="SaveNewCustomer"
        Click="{x:Bind ViewModel.SaveInitialChangesAsync}"
        Icon="Save"/>
</StackPanel>

  5. Aktualisieren Sie die CommandBar-, sodass die regulären Erstellen-, Löschen- und Aktualisieren-Schaltflächen deaktiviert sind, wenn das StackPanel sichtbar ist.

    <CommandBar
    x:Name="mainCommandBar"
    HorizontalAlignment="Stretch"
    IsEnabled="{x:Bind ViewModel.EnableCommandBar, Mode=OneWay}"
    Background="AliceBlue">
    <!--App bar buttons-->
</CommandBar>

  6. Führen Sie Ihre App aus. Sie können jetzt einen Kunden erstellen und seine Daten im Stack-Panel eingeben.

Neukunden erstellen

Teil 7: Löschen eines Kunden

Das Löschen eines Kunden ist der letzte grundlegende Vorgang, den Sie implementieren müssen. Wenn Sie einen Kunden löschen, den Sie im Datenraster ausgewählt haben, möchten Sie sofort UpdateCustomersAsync- aufrufen, um die Benutzeroberfläche zu aktualisieren. Sie müssen diese Methode jedoch nicht aufrufen, wenn Sie einen Kunden löschen, den Sie gerade erstellt haben.

  1. Navigieren Sie zu ViewModels\CustomerListPageViewModel.cs, und aktualisieren Sie die DeleteAndUpdateAsync-Methode :

    public async void DeleteAndUpdateAsync()
{
    if (SelectedCustomer != null)
    {
        await App.Repository.Customers.DeleteAsync(_selectedCustomer.Model.Id);
    }
    await UpdateCustomersAsync();
}

  2. Aktualisieren Sie in Views\CustomerListPage.xamldas Stackpanel zum Hinzufügen eines neuen Kunden, sodass es eine zweite Schaltfläche enthält:

    <StackPanel>
    <!--Text boxes for adding a new customer-->
    <AppBarButton
        x:Name="DeleteNewCustomer"
        Click="{x:Bind ViewModel.DeleteNewCustomerAsync}"
        Icon="Cancel"/>
    <AppBarButton
        x:Name="SaveNewCustomer"
        Click="{x:Bind ViewModel.SaveInitialChangesAsync}"
        Icon="Save"/>
</StackPanel>

  3. Aktualisieren Sie in ViewModels\CustomerListPageViewModel.cs die DeleteNewCustomerAsync-Methode , um den neuen Kunden zu löschen:

    public async Task DeleteNewCustomerAsync()
{
    if (NewCustomer != null)
    {
        await App.Repository.Customers.DeleteAsync(_newCustomer.Model.Id);
        AddingNewCustomer = false;
    }
}

  4. Führen Sie Ihre App aus. Sie können jetzt Kunden löschen, entweder in der Datensammlung oder in der Stapelanzeige.

Löschen eines neuen Kunden

Schlussfolgerung

Glückwunsch! Damit verfügt Ihre App jetzt über ein umfassendes Spektrum lokaler Datenbankoperationen. Sie können Kunden in Ihrer Benutzeroberfläche erstellen, lesen, aktualisieren und löschen, und diese Änderungen werden in Ihrer Datenbank gespeichert und bleiben in verschiedenen Starts Ihrer App erhalten.

Nachdem Sie fertig sind, sollten Sie Folgendes beachten:

  • Falls Sie es noch nicht getan haben, schauen Sie sich die Übersicht zur -App-Struktur an, um mehr darüber zu erfahren, warum die App so aufgebaut ist.
  • Sehen Sie sich das vollständige -Datenbankbeispiel für Kundenbestellungen an, um die App zu erkunden, auf der dieses Tutorial basiert.

Oder wenn Sie sich einer Herausforderung stellen wollen, können Sie weitermachen...

Weitere Schritte: Herstellen einer Verbindung mit einer Remotedatenbank

Wir haben eine Schritt-für-Schritt-Anleitung zur Implementierung dieser Aufrufe für eine lokale SQLite-Datenbank bereitgestellt. Aber was geschieht, wenn Sie stattdessen eine Remotedatenbank verwenden möchten?

Wenn Sie dies ausprobieren möchten, benötigen Sie Ihr eigenes Azure Active Directory (AAD)-Konto und die Möglichkeit, Ihre eigene Datenquelle zu hosten.

Sie müssen Authentifizierung, Funktionen zum Verarbeiten von REST-Aufrufen hinzufügen und dann eine Remotedatenbank für die Interaktion erstellen. Im vollständigen Datenbankbeispiel für Kundenbestellungen finden Sie den Code, auf den Sie sich für jeden notwendigen Vorgang beziehen können.

Einstellungen und Konfiguration

Die erforderlichen Schritte zum Herstellen einer Verbindung mit Ihrer eigenen Remotedatenbank werden im Readme-des Beispiels geschrieben. Gehen Sie wie folgt vor:

  • Geben Sie Ihre Azure-Konto-Client-ID an Constants.cs
  • Geben Sie die URL der Remotedatenbank bei Constants.csan.
  • Stellen Sie die Verbindungszeichenfolge für die Datenbank in Constants.csbereit.
  • Ordnen Sie Ihre App dem Microsoft Store zu.
  • Kopieren Sie das Dienstprojekt in Ihre App, und stellen Sie es in Azure bereit.

Authentifizierung

Sie müssen eine Schaltfläche erstellen, um eine Authentifizierungssequenz zu starten, und ein Popup oder eine separate Seite, um die Informationen eines Benutzers zu sammeln. Nachdem Sie dies erstellt haben, müssen Sie Code bereitstellen, der die Informationen eines Benutzers anfordert und zum Abrufen eines Zugriffstokens verwendet. Im Beispiel für die Kundenauftragsdatenbank werden Microsoft Graph-Aufrufe mit der WebAccountManager Bibliothek umbrochen, um ein Token abzurufen und die Authentifizierung für ein AAD-Konto zu verarbeiten.

REST-Aufrufe

Sie müssen keinen code ändern, den wir in diesem Lernprogramm hinzugefügt haben, um REST-Aufrufe zu implementieren. Stattdessen müssen Sie die folgenden Schritte ausführen:

  • Erstellen Sie neue Implementierungen der ICustomerRepository - und ITutorialRepository-Schnittstellen , die denselben Satz von Funktionen über REST anstelle von SQLite implementieren. Sie müssen JSON serialisieren und deserialisieren, und Sie können Ihre REST-Aufrufe, falls erforderlich, in eine separate HttpHelper-Klasse einbetten. Weitere Informationen finden Sie in vollständigen Beispiel- für Spezifisches.
  • Erstellen Sie in App.xaml.cs eine neue Funktion zum Initialisieren des REST-Repositorys, und rufen Sie sie anstelle von SqliteDatabase auf, wenn die App initialisiert wird. Weitere Informationen finden Sie unter des vollständigen Beispiels.

Sobald alle drei dieser Schritte abgeschlossen sind, sollten Sie sich über Ihre App bei Ihrem AAD-Konto authentifizieren können. REST-Aufrufe an die Remotedatenbank ersetzen die lokalen SQLite-Aufrufe, die Benutzeroberfläche sollte jedoch identisch sein. Wenn Sie noch ehrgeiziger sind, können Sie eine Einstellungsseite hinzufügen, damit der Benutzer dynamisch zwischen den beiden wechseln kann.