ionic-framework
Ionic Cloud für Yeoman Ionic Projects
Suche…
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.