Entwicklung in Ionic

improve this page | report issue
Nutzen Sie für die Entwicklung Ihrer Ionic-Anwendungen die folgenden Lernprogramme. Richten Sie Ihre Entwicklungsumgebung ein, probieren Sie das Produkt aus und erhalten Sie einen Mehrwert durch die Kombination mit den Angeboten von Mobile Foundation 8.0.

Ionic ist ein Framework, das auf AngularJS und Apache Cordova basiert. Ionic hilft Ihnen, mit Webtechnologien wie HTML, CSS und JavaScript schnell Hybrid-Apps und Webplattform-Apps zu erstellen.

Wenn Sie ein Entwickler sind, der sich für Ionic als Framework für die Entwicklung von mobilen oder Web-Apps entschieden hat, können Ihnen die folgenden Abschnitte bei Ihren ersten Schritten mit dem SDK der IBM Mobile Foundation in Ihrer Ionic-App helfen.

Sie können Ihren bevorzugten Codeeditor (Atom.io, Visual Studio Code, Eclipse, IntelliJ oder einen anderen Editor) verwenden, um Ihre Anwendungen zu schreiben.

Führen Sie die folgenden Schritte aus, um unverzüglich mit der Entwicklung unter Verwendung von Ionic für die MobileFirst Platform Foundation zu beginnen.

Schritt 1: Ionic-CLI installieren

Der erste erforderliche Schritt für den Einstieg in die Ionic-Entwicklung ist die Installation der Ionic-CLI.

Gehen Sie wie folgt vor, um Cordova und die Ionic-CLI zu installieren:

Laden Sie NodeJS herunter und installieren Sie es.

Führen Sie in einem Befehlszeilenfenster den folgenden Befehl aus:

    npm install -g ionic

Schritt 2: MobileFirst-Entwicklungsumgebung einrichten

Wenn Sie die Ionic-CLI installiert haben, richten Sie die MobileFirst-Entwicklungsumgebung ein. Ausführliche Informationen dazu enthält das Lernprogramm MobileFirst-Entwicklungsumgebung einrichten.


Auf der Registerkarte Schnelleinstieg erfahren Sie, wie Sie das Ionic-SDK nutzen können, um rasch mit der Entwicklung zu beginnen.

Ziel dieses Lernprogramms für den Schnellstart ist es, einen einfachen End-to-End-Ablauf zu erläutern.

Github stellt eine Beispielanwendung bereit, die heruntergeladen und bei MobileFirst Server registriert wird. Der zur Verfügung gestellte (oder neue) Adapter wird in der MobileFirst Operations Console implementiert. Die Anwendungslogik wird so geändert, dass sie eine Ressourcenanforderung absetzt.

Erwartetes Ergebnis: MobileFirst Server kann erfolgreich mit Ping überprüft werden und Daten können erfolgreich mithilfe eines Adapters abgerufen werden.

Schritt 1: MobileFirst Server starten

Vergewissern Sie sich, dass eine Mobile-Foundation-Instanz erstellt wurde, oder - falls Sie das MobileFirst Developer Kit verwenden, navigieren Sie zum Serverordner und führen Sie den Befehl ./run.sh unter Mac und Linux oder run.cmd unter Windows aus.

Schritt 2: Anwendung registrieren

Öffnen Sie in einem Browser die MobileFirst Operations Console. Laden Sie dazu die URL http://Ihr_Server-Host:Serverport/mfpconsole.

  • Wenn der Server lokal ausgeführt wird, verwenden Sie http://localhost:9080/mfpconsole. Geben Sie für Benutzername/Kennwort die Werte admin/admin ein.
  • Wenn der Server in IBM Cloud als Mobile-Foundation-Serviceinstanz ausgeführt wird, verwenden Sie https://Bluemix-MFP-Server-Hostname:443/mfpconsole. Die Werte für Benutzername/Kennwort können Sie aus den Serviceberechtigungsnachweisen der IBM Cloud Mobile Foundation abgerufen werden.

Schritt 2.1: Klicken Sie neben Anwendungen auf die Schaltfläche Neu.

  • Wählen Sie in der Liste der Plattformen eine Plattform aus: Android, iOS, Windows, Browser.
  • Geben Sie als Anwendungs-ID den Wert com.ibm.mfpstarterionic ein.
  • Geben Sie für die Version den Wert 1.0.0 ein.
  • Klicken Sie auf Anwendung registrieren.

Schritt 2.2: Ionic-Beispiel von Github herunterladen

Schritt 2.3: Ionic-SDK zur heruntergeladenen Ionic-Beispielanwendung hinzufügen

  1. Navigieren Sie zum Stammverzeichnis Ihres heruntergeladenen Ionic-Projekts und fügen Sie das zentrale MobileFirst-Cordova-Plug-in für Ionic hinzu.
  2. Wechseln Sie mit cd MFPStarterIonic in das Stammverzeichnis des Ionic-Projekts.
  3. Fügen Sie mit dem Ionic-CLI-Befehl ionic cordova plugin add Cordova-Plug-in-Name die MobileFirst-Plug-ins hinzu.
    Beispiel: 
            ionic cordova plugin add cordova-plugin-mfp
    Mit dem obigen Befehl wird das zentrale MobileFirst-SDK-Plug-in zum Ionic-Projekt hinzugefügt.
  4. Fügen Sie weitere unterstützte Plattformen zu dem Cordova-Projekt hinzu. Verwenden Sie dazu den folgenden Ionic-CLI-Befehl:
    ionic cordova platform add ios|android|windows|browser
    Beispiel: 
            cordova platform add ios
  5. Bereiten Sie die Anwendungsressourcen vor. Führen Sie dazu den Befehl ionic cordova prepare aus. 
            ionic cordova prepare

Schritt 2.4: Anwendungslogik bearbeiten

  1. Öffnen Sie das Ionic-Projekt in einem Editor Ihrer Wahl.
  2. Wählen Sie die Datei src/js/index.js aus und ersetzen Sie die vorhandene Funktion WLAuthorizationManager.obtainAccessToken() durch das folgende Code-Snippet: 
               WLAuthorizationManager.obtainAccessToken("").then(
           (token) => {
             console.log('-->  pingMFP(): Success ', token);
             this.zone.run(() => {
               this.title = "Yay!";
               this.status = "Connected to MobileFirst Server";
             });
             var resourceRequest = new WLResourceRequest( "/adapters/javaAdapter/resource/greet/",
             WLResourceRequest.GET
             );

             resourceRequest.setQueryParameter("name", "world");
                 resourceRequest.send().then(
                     (response) => {
                         // Zeigt "Hello world" in einem Benachrichtigungsdialog an

                         alert("Success: " + response.responseText);
                     },
                     (error) => {
                         alert("Failure: " + JSON.stringify(error));
                     }
                 );
           }, (error) => {
             console.log('-->  pingMFP(): failure ', error.responseText);
             this.zone.run(() => {
              this.title = "Bummer...";
              this.status = "Failed to connect to MobileFirst Server";
             });
           }
         );

Schritt 3: Adapter implementieren

Laden Sie dieses vorbereitete Adapterartefakt herunter und implementieren Sie es in der MobileFirst Operations Console (Aktionen → Adapter implementieren).

Schritt 3.1: Wählen Sie die Option Aktionen → Beispiel herunterladen aus. Laden Sie das Java-Adapterbeispiel Hello World herunter.

Sie können auch neben Adapter auf die Schaltfläche Neu klicken.

Wenn Sie Maven und die MobileFirst CLI noch nicht installiert haben, folgen Sie den angezeigten Anweisungen unter Entwicklungsumgebung einrichten.

Schritt 3.2: Navigieren Sie in einem Befehlszeilenfenster zum Stammordner des Adapter-Maven-Projekts und führen Sie folgenden Befehl aus: 

    mfpdev adapter build

Schritt 3.3: Wenn der Build erstellt ist, implementieren Sie den Adapter in der MobileFirst Operations Console unter Verwendung der Option Aktionen → Adapter implementieren. Sie finden den Adapter im Ordner [adapter]/target.

Schritt 4: Anwendung testen

Schritt 4.1: Navigieren Sie in einem Befehlszeilenfenster zum Stammverzeichnis des Ionic-Projekts.


Schritt 4.2: Führen Sie den folgenden Befehl aus, um eine Plattform hinzuzufügen:
ionic cordova platform add ios|android|windows|browser
.


Schritt 4.3: Wählen Sie im Ionic-Projekt die Datei config.xml aus und bearbeiten Sie den Wert . Geben Sie für die Eigenschaften protocol, host und port die entsprechenden Werte für Ihren MobileFirst Server an.

  • Wenn Sie einen lokalen MobileFirst Server verwenden, lauten die Werte normalerweise http, localhost und 9080.
  • Wenn Sie einen fernen MobileFirst Server (für IBM Cloud) verwenden, lauten die Werte in der Regel https, Ihre_Serveradresse und 443.
  • Wenn Sie einen Kubernetes-Cluster in IBM Cloud Private verwenden und der Implementierungstyp NodePort ist, ist der Portwert in der Regel der NodePort, der vom Service im Kubernetes-Cluster zugänglich gemacht wird.

Wenn Sie die MobileFirst CLI installiert haben, können Sie alternativ zum Projektstammverzeichnis navigieren und den Befehl mfpdev app register ausführen. Bei Verwendung eines fernen MobileFirst Server müssen Sie den Befehl mfpdev server add ausführen, um den Server hinzuzufügen, gefolgt beispielsweise von mfpdev app register myIBMCloudServer.

Wenn ein Gerät verbunden ist, wird die Anwendung auf dem Gerät installiert und gestartet. Andernfalls wird der Simulator oder Emulator verwendet.

Ausführliche Anweisungen zu den Schritten für den Schnelleinstieg finden Sie hier.

Ergebnisse

  • Wenn Sie auf die Schaltfläche Ping MobileFirst Server klicken, wird Connected to MobileFirst Server angezeigt.
  • Falls die Anwendung eine Verbindung zu MobileFirst Server herstellen kann, wird mithilfe des implementierten Java-Adapters eine Ressourcenanforderung abgesetzt. Die Adapterantwort wird dann in Form eines Alerts angezeigt.
▲
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on October 30, 2019