ionic-framework Tutorial
Erste Schritte mit ionic-framework

Bemerkungen

Versionen

Installation oder Setup

1. Installieren Sie Ionic Framework und Cordova (da Ionic-Apps auf Cordova basieren) mit npm (Node Package Manager):

Stellen Sie sicher, dass auf Ihrem System eine aktuelle Version von Node.js installiert ist. Wenn Sie Node.js nicht installiert haben, können Sie es von hier aus installieren.

Auch für Mac - Anwender, die neueste Xcode - Version auf Ihrem System installiert ist , die bringt Sie Kommandozeilen-Tools und iOs Simulator, hier herunterladen .

Öffnen Sie ein Terminalfenster (Mac) oder ein Befehlsfenster (Windows) und installieren Sie Cordova und Ionic:

$ npm install -g cordova ionic

Auf einem Mac müssen Sie möglicherweise sudo verwenden, abhängig von Ihrer Systemkonfiguration:

$ sudo npm install -g cordova ionic

Wenn Sie bereits Cordova und Ionic auf Ihrem Computer installiert haben, stellen Sie sicher, dass Sie auf die neueste Version aktualisieren:

$ npm update -g cordova ionic

oder

$ sudo npm update -g cordova ionic

Befolgen Sie die Handbücher für Android und iOS , um erforderliche Plattformabhängigkeiten zu installieren.

Hinweis: Für die iOS-Entwicklung ist Mac OS X erforderlich. Für den iOS-Simulator über die Ionic-CLI ist das Paket ios-sim npm erforderlich, das mit dem folgenden Befehl installiert werden kann:

$ sudo npm -g install ios-sim

2. Starten Sie ein neues Ionic-Projekt:

Erstellen Sie ein ionisches Projekt mit einer der vorgefertigten App-Vorlagen oder einem leeren, um neu zu beginnen.

$ ionic start myApp blank

oder

$ ionic start myApp tabs

oder

$ ionic start myApp sidemenu

3. Testen Sie die Ionic-App:

So testen Sie Ihre Ionic-App in einem Desktop-Browser auf iOS- und Android-Plattformen:

$ ionic serve --lab

Während ionic serve --lab zum Testen der App-Benutzeroberfläche auf mehreren Plattformen geeignet ist, kann es zu Problemen bei der JavaScript-Konsole oder der Elementinspektion kommen. In diesem Fall bevorzugen Sie Folgendes:

$ ionic serve

So testen Sie Ihre Ionic-App in einem Emulator:

$ cd myApp
$ ionic platform add ios android
$ ionic build ios
$ ionic emulate ios

Ersetzen Sie ios durch Android für Android-Emulator-Tests:

$ ionic build android
$ ionic emulate android

So testen Sie Ihre Ionic-App auf einem Android-Gerät, das über USB angeschlossen ist:

$ ionic run android

So testen Sie Ihre Ionic-App auf einem über USB angeschlossenen iOS-Gerät:

$ ionic run ios --device

Ionic Framework Einführung und Installation und Setup

Ionic Framework

Ein plattformübergreifendes Entwicklungs-Framework für mobile Anwendungen, das Angular JS- und Front-End-Web-Technologien verwendet.

Offizielle Website : http://ionicframework.com/

Dokumentation : http://ionicframework.com/docs/

Installation und Einrichtung

Installation Ionic benötigte NPM (Node Package Manager) und Cordova.

Sie können Npde JS von hier herunterladen und installieren , das mit NPM out of the Box geliefert wird.

Zum Herunterladen von Apache Cordova können Sie NPM von der Befehlszeile aus verwenden

npm install -g cordova

Wenn Sie bereits über NPM und Cordova verfügen, können Sie das ionische Framework mit dem folgenden Befehl über die Befehlszeile installieren.

npm install -g ionic

Dadurch wird das ionische Framework installiert und eingerichtet, damit Sie es über die Befehlszeile verwenden können.

Hinweis * Je nach Systemumgebung müssen Sie möglicherweise mit Administratorrechten arbeiten.

Ein neues Projekt starten

Um ein neues Ionic Framework-Projekt zu starten, können Sie den folgenden Befehl verwenden

ionic start myproject

oder

ionic start myproject [template_name]

Vorlagen:

Mit Ionic können Sie ein Projekt mit integrierten Vorlagen erstellen

tabs (Standard): Dadurch wird eine einfache App mit Registerkartenansicht erstellt.

sidemenu : erstellt eine ionische App mit sidemenu .

blank : Damit wird eine leere ionische App erstellt.

myproject wird ein neuer Ordner mit dem Namen myproject mit allen ionischen Projektdateien erstellt.

Um das Projekt in Ihrem Browser zu testen, können Sie den folgenden Befehl verwenden

ionic serve --lab

oder

ionic serve

Ausführen eines Emulators Um die App zunächst auf einem Emulator oder einem Telefon auszuführen oder zu testen, müssen Sie eine Plattform hinzufügen, für die Sie den folgenden Befehl verwenden können

ionic platform [Platform Name]
ionic build [Platform Name]
ionic emulate [platform name]

Plattformnamen Sie können Android und iOS direkt für entsprechende Plattformen angeben. Sie können auch mehrere Plattformnamen angeben, die auch durch Leerzeichen getrennt sind.

Um Ihre App auszuführen, können Sie verwenden

ionic run [platform name]

Für Hilfe können Sie verwenden

ionic --help

oder

ionic help

Siehe diesen Link für eine detaillierte Erklärung der ionischen Kli.

Unter diesem Link finden Sie die in ionischen Komponenten verfügbaren CSS-Komponenten.

Verweisen Sie auf diesen Link, um eine JavaScript-API-Referenz für Ionic zu erhalten.

Für eine schnellere Entwicklung mit ionic können Sie auch ionic playground ausprobieren.

Viel Glück mit ionischen Gerüsten ...

Ionic Framework Hallo Welt App

Nach all dem Setup, Hello World App zu machen

• Um die Simple Blank App zu erstellen, führen Sie den folgenden Befehl auf dem Terminal aus:

ionic start HelloWorld blank  // create new project

cd HelloWorld                 // get into HelloWorld directory

• Öffnen Sie das HelloWorld-Projekt in der subline / webstrome-IDE:
  • Bearbeiten Sie index.html in www / ditectory

 <body ng-app="starter">
   <ion-pane>
     <ion-header-bar class="bar-stable">
       <h1 class="title">Ionic Hello World App</h1>
     </ion-header-bar>
     <ion-content>
        <div class="center">Hello World..!</div>
     </ion-content>
    </ion-pane>
 </body>

• Im Browser vom Terminal aus ausführen:

ionic serve                  // run the app in browser

• Plattform hinzufügen:

ionic platform add android   // add android platform
ionic platform add ios       // add ios platform

• Auf dem Gerät ausführen:

adb devices                  // to check devices is connected
ionic run android            // to run on android devices
ionic run ios                // to run on ios devices

• Um in der Belastung zu laufen:

ionic run android -c -s -l    // to check app in live reload with console. 

Ionische Plattform (Ionic Cloud) für Yo (Yeoman) Ionische Projekte

Ionische Plattform :

Erstellen, pushen, implementieren und skalieren Sie Ihre ionischen Apps auf einfache Weise.

Titel Beschreibung:

Die Ionic-Plattform ist eine Cloud-Plattform zum Verwalten und Skalieren von plattformübergreifenden mobilen Apps. Mit integrierten Services können Sie und Ihr Team Ihre Apps effizient erstellen, bereitstellen und erweitern.

Dokument Ziel:
Ionic Platform funktioniert gut mit den Standard-Ionic-Projekten. Projekte, die einer nicht standardmäßigen Verzeichnisstruktur folgen, können jedoch mit einigen Hürden konfrontiert sein. Dieses Dokument enthält die Schritte zur Verwendung der Ionic Platform in Ionic-Projekten, die mit Yeoman erstellt wurden.

Dokumentumfang:
Dieses Dokument beschreibt die grundlegenden Schritte zum Erstellen eines Ionic-Projekts mit Yeoman und dessen Integration in Ionic Platform mithilfe des Ionic Platform-Webclients. In diesem Dokument werden die grundlegenden Schritte für die Verwendung von Ionic Deploy, Ionic Analytics und Ionic Push beschrieben.

Zielgruppe:
Die beabsichtigte Zielgruppe für dieses Dokument sind Entwickler von Web- / Mobile-Apps mit Expertenwissen für Anfänger und Experten, die mit den unten genannten Voraussetzungen vertraut sind.

Voraussetzungen:
Sie sollten mit den folgenden Frameworks / Tools vertraut sein, bevor Sie dieses Dokument ausprobieren.

• AngularJs: https://docs.angularjs.org/guide
• IonicFramework: http://ionicframework.com/docs/guide
• Yeoman: http://yeoman.io/codelab/index.html
• Ionengenerator: https://github.com/diegonetto/generator-ionic
• Ionic Platform: https://ionic.io/platform

Ionic Framework Generator

Ein Generator für das Ionic Framework von Yeoman, das Gerüstwerkzeug des Web für moderne Webapps

Node.js ist eine JavaScript-Laufzeitumgebung, die auf der V8-JavaScript-Engine von Chrome basiert. npm ist der Paketmanager für JavaScript. Laden Sie Node (und npm) von http://nodejs.org herunter und installieren Sie sie

$ npm install npm –g
$ npm install -g yo

Mit Yeoman können Sie neue Projekte ankurbeln und bewährte Verfahren und Tools vorschreiben, die Ihnen helfen, produktiv zu bleiben.

$ yo ionic [app-name]

Fügen Sie in package.json Folgendes in devDependencies ein

"grunt-string-replace": "^1.2.1"

In bower.json schließen Sie die folgenden Abhängigkeiten ein

"ionic-platform-web-client": "^0.7.1"

Ändern Sie in Gruntfile.js den Skriptordner in 'js' . Ändern Sie bei Bedarf auch index.html .

grunt.initConfig({   yeoman: {…………
    scripts: 'js',
    ………… } })

Dann renne

$ bower install && npm install
$ grunt
$ grunt serve

$ cordova platform add android 
$ grunt build:android --debug

Ionenplattform-Web-Client

Ein Webclient, der Interaktionen mit der Ionic-Plattform bereitstellt.

Wir benötigen etwas Code, damit Ihre App mit der Ionic Platform kommunizieren kann. Wir müssen den Ionic-Plattform-Webclient für die Ionic-App hinzufügen, um eine Schnittstelle zu den Plugins und der Ionic.io-Plattform herzustellen.

$ ionic io init

Fügen Sie in Ihrer app.js die Modulabhängigkeit 'ionic.service.core' hinzu . Fügen Sie in Gruntfile.js die Grunt-Task 'ionicSettings' wie unten angegeben hinzu.

grunt.initConfig({
ionicSettings: JSON.stringify(grunt.file.readJSON('./.io-config.json')),

ionicIoBundlePath: 'www/bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js',

'string-replace': {
  ionicSettings: {
    files: {
      '<%= ionicIoBundlePath %>': '<%= ionicIoBundlePath %>',
    },
    options: {
      replacements: [
        {
          pattern: 
        '"IONIC_SETTINGS_STRING_START";"IONIC_SETTINGS_STRING_END"',
          replacement: 
        '"IONIC_SETTINGS_STRING_START";var settings =<%= ionicSettings %>; return { get: function(setting) { if (settings[setting]) { return settings[setting]; } return null; } };"IONIC_SETTINGS_STRING_END";'
        }
      ]
    }
  }
},
       copy: {
    ionicPlatform:{
                expand: true,
                cwd: 'app/bower_components/ionic-platform-web-client/dist/',
                src: ['**'],
                dest: 'www/bower_components/ionic-platform-web-client/dist'
               }
    }
});

grunt.registerTask('ionicSettings', ['copy:ionicPlatform','string-replace:ionicSettings']);

Fügen Sie die 'ionicSettings' in init hinzu und komprimieren Sie die Aufgaben nach dem Kopieren . Verschieben Sie in index.html das unten stehende Tag nach allen Tagdeklarationen.

<script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>

Dann renne

$ Grunt serve

Ionic Deploy

Aktualisieren Sie Ihre Produktionsanwendungen in Echtzeit und verwalten Sie den Versionsverlauf.

Mit Ionic Deploy können Sie Ihre App bei Bedarf aktualisieren. Bei Änderungen, für die keine binären Änderungen erforderlich sind, können Sie Tage oder sogar Wochen an Wartezeit sparen. Führen Sie die folgenden Schritte aus, um Ionic Deploy für Ihre App zu konfigurieren.

Fügen Sie in Gruntfile.js die Grunt-Task 'deploy' wie unten angegeben hinzu.

grunt.registerTask('deploy', function () {
  return grunt.task.run(['init', 'ionic:upload' + this.args.join()]);
});

dann renne

$ ionic plugin add ionic-plugin-deploy

Ionic Deploy Code:

var deploy = new Ionic.Deploy();

// Check Ionic Deploy for new code
deploy.check().then(function(hasUpdate) {
}, function(err) {
});

// Update app code with new release from Ionic Deploy
deploy.update().then(function(result) {
}, function(error) {
}, function(progress) {
});

Updates bereitstellen:

Senden Sie neuen Code für Ihre App.

Erstellen Sie eine apk und installieren Sie Ihre App. Nehmen Sie einige Änderungen in Ihrem Code vor und stellen Sie die Änderungen mithilfe von " grunt deploy " bereit . Dann aktualisieren Sie es von Ihrer App.

Sie können es auch über das apps.ionic.io- Dashboard bereitstellen . Sie können die App ohne den Bereitstellungsparameter bereitstellen. Im Dashboard können Sie dann die Metadaten und Versionsangaben hinzufügen und die App von dort aus bereitstellen.

$ grunt build:android --debug

$ grunt deploy --note "release notes"
$ grunt deploy --note "release notes" --deploy=production

Ionische Analytik

Zeigen Sie den Live-Feed von Ereignissen oder die Anzahl der Ereignisse / Benutzer im Zeitverlauf an.

Wie viele Nutzer sind derzeit in Ihrer App? Wie viele davon werden Ihre App morgen oder nächste Woche verwenden? Ohne Informationen können Sie nicht feststellen, ob Ihre App in der von Ihnen erwarteten Weise verwendet wird. Führen Sie die folgenden Schritte aus, um Ionic Analytics für Ihre App zu konfigurieren.

Fügen Sie in Ihrer app.js die Modulabhängigkeit ' ionic.service.analytics ' nach dem ionic.service.core hinzu. Führen Sie die Analytics-Register-Methode in der Ausführungsfunktion unseres Moduls aus.

$ionicAnalytics.register();

In Ionic Analytics wird jede nachverfolgte Aktion, die ein Benutzer in Ihrer App ausführt, durch ein Ereignisobjekt dargestellt. Ein Ereignis ist eine einzelne Aktion, die zu einem bestimmten Zeitpunkt ausgeführt wird. Rufen $ionicAnalytics.track(eventType, eventData) zum Verfolgen Ihrer eigenen Ereignisse $ionicAnalytics.track(eventType, eventData) wenn eine Aktion ausgeführt wird.

$ionicAnalytics.track('User Login', {
  user: $scope.user
});

Die Ion-Track-Tap- Direktive sendet ein Ereignis, wenn auf das Host-Element geklickt wird. Die zugehörige Ionenspurdaten- Direktive fügt Ereignisdaten hinzu.

<button ion-track-tap="eventType" ion-track-data="expression"></button>

Im Apps.ionic.io- Dashboard können Sie die folgenden Analysedaten anzeigen :

Ereignisse: Zeigen Sie die Anzahl der Ereignisse im Zeitverlauf an oder die Anzahl der eindeutigen Benutzer, die ein Ereignis abgeschlossen haben. Ein Ereignis kann vom Benutzer, der die App lädt, oder der Bestätigung eines Kaufs sein.

Trichter: Ein Trichter ist eine Abfolge von Aktionen, von denen Sie erwarten, dass Benutzer Ihre App ausführen, um ein definiertes Ziel zu erreichen. Durch den durchdachten Einsatz von Trichtern können Sie die Conversion-Raten verbessern.

Segmente: Anzeigen von Ereignissen im Zeitverlauf, gruppiert nach einer angegebenen Eigenschaft. Oder berechnen Sie den Prozentsatz der Ereignisse, die einer bestimmten Eigenschaft entsprechen. Segmente helfen Ihnen, Ihre Benutzerbasis zu verstehen und zu sehen, wie sich Eigenschaften im Laufe der Zeit ändern.

Aufbewahrung: Erfassen Sie, wie lange Benutzer in Ihrer App aktiv sind, bevor Sie sie nicht mehr verwenden. Oder ermitteln Sie, wie lange es dauert, bis Benutzer ein definiertes Ziel erreichen, beispielsweise einen abgeschlossenen Verkauf.

Pulse: Ein Live-Feed von Ereignissen, die von Ihren Benutzern eingehen.

Ionic Push

Senden Sie gezielte und automatisierte Push-Benachrichtigungen an Ihre Benutzer.

Mit Ionic Push können Sie gezielte Push-Benachrichtigungen über ein einfaches Dashboard erstellen, das automatisch gesendet wird, wenn Benutzer bestimmte Kriterien erfüllen, und bietet eine einfache API zum Senden von Push-Benachrichtigungen von Ihren eigenen Servern.

Android Push-Profile:

Android-Push-Benachrichtigungen verwenden den Google Cloud Messaging-Dienst (GCM). Öffnen Sie die Google Developers Console und erstellen Sie ein Projekt. Notieren Sie Ihre Projektnummer . Dies ist die GCM-Absender-ID oder die GCM-Projektnummer .

Aktivieren Sie im Abschnitt API Manager die Google Cloud Messaging-API . Navigieren Sie dann zum Abschnitt Anmeldeinformationen und wählen Sie Anmeldeinformationen erstellen. Wählen Sie dann API-Schlüssel und dann Serverschlüssel. Benennen Sie Ihren API-Schlüssel, und lassen Sie das Feld Anforderungen annehmen von leer. Klicken Sie auf Erstellen . Speichern Sie Ihren API-Schlüssel !

Authentifizierung:

Gehen Sie zum Dashboard Ihrer App auf der Ionic-Plattform und navigieren Sie zu Einstellungen -> Zertifikate . Falls noch nicht geschehen, erstellen Sie ein neues Sicherheitsprofil und klicken Sie dann auf Bearbeiten . Notieren Sie sich das Profiltag .

Klicken Sie nun auf die Registerkarte Android und suchen Sie nach dem mit Google Cloud Messaging gekennzeichneten Abschnitt. Geben Sie den in der Google Developer Console generierten API-Schlüssel ein und klicken Sie auf Speichern . Gehen Sie zu Einstellungen -> API-Schlüssel . Erstellen Sie unter API-Token ein neues Token, und kopieren Sie es. Dies wird Ihr API-Token .

$ ionic plugin add phonegap-plugin-push --variable SENDER_ID="GCM_PROJECT_NUMBER"
$ ionic config set gcm_key <your-gcm-project-number>
$ ionic config set dev_push false
$ ionic io init

Hinweis: Für phonegap-plugin-push ist das Android Support Repository ab Version 32 erforderlich

Fügen Sie in Ihrer app.js die Modulabhängigkeit ' ionic.service.push ' nach dem ionic.service.core hinzu

Ionic Push Code:

Initialisieren Sie den Dienst und registrieren Sie Ihr Gerät in der Lauffunktion Ihres Moduls. Sie benötigen das vom Benutzer registrierte Gerätetoken, um eine Benachrichtigung an den Benutzer zu senden.

$ionicPush.init({
  debug: true,
  onNotification: function (notification) {
    console.log'token:', notification.payload);
  },
  onRegister: function (token) {
    console.log('Device Token:', token);
    $ionicPush.saveToken(token); // persist the token in the Ionic Platform
  }
});

$ionicPush.register();

dann renne

$ grunt build:android --debug

Mit Ionic Push können Sie gezielte Push-Benachrichtigungen über das Dashboard erstellen. Sie können auch Benachrichtigungen vom Server im folgenden Format senden.

curl -X POST -H "Authorization: Bearer API_TOKEN" -H "Content-Type: application/json" -d '{
    "tokens": ["DEVICE_TOKEN"],
        "profile": "PROFILE_TAG",
        "notification": {
                "message": "Hello World!"
        "android": {
                  "title": "Hi User",
                  "message": "An update is available for your App",
                  "payload": {
                        "update": true
                  }
            }
    } }' "https://api.ionic.io/push/notifications"

Hinweis: Die Schritte zum Konfigurieren von Ionic Push für iOS sind dieselben, mit Ausnahme der Erstellung der Push-Profile. Informationen zum Erstellen von iOS-Push-Profilen finden Sie unter http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles

Beispiel App

Laden Sie die Beispiel-App hier herunter .

Eine Beispiel-App ist hier als Referenz beigefügt.

IonicApp:
│
│   bower.json
│   Gruntfile.js
│   package.json    
│       
└───app
    │   index.html
    │   
    ├───js
    │       app.js
    │       controllers.js
    │       
    └───templates
            home.html
            menu.html

Hinweis: Dies ist kein eigenständiges Projekt. Der angegebene Code dient nur zum Vergleich mit einem Projekt, das gemäß den oben in diesem Dokument beschriebenen Verfahren erstellt und implementiert wurde, falls Probleme oder Fehler auftreten.