ionic-framework
Ionic Cloud för Yeoman Ionic Projects
Sök…
Ionic Platform (Ionic Cloud) för Yo (Yeoman) Joniska projekt
Jonisk plattform :
Bygg, tryck, distribuera och skala dina Ionic-appar på det enkla sättet.
Titel Beskrivning:
Ionic Platform är en molnplattform för att hantera och skala mobilappar över plattformar. Integrerade tjänster gör att du och ditt team kan bygga, distribuera och växa dina appar effektivt.
Dokumentmål:
Ionic Platform fungerar bra med Ionic standardprojekt. Men projekt som följer någon icke-standardiserad katalogstruktur kan möta några hinder. Detta dokument innehåller stegen för att använda Ionic Platform i de Ionic-projekt som skapats med Yeoman.
Dokumentets omfattning:
Detta dokument täcker de grundläggande stegen för att skapa ett Ionic-projekt med Yeoman och integrera det med Ionic Platform med hjälp av Ionic Platform Web Client. Detta dokument täcker de grundläggande stegen för att använda Ionic Deploy, Ionic Analytics och Ionic Push.
Målgrupp:
Den avsedda målgruppen för detta dokument är webb- / mobilapp-utvecklare, med både nybörjare och expertnivåkompetens, som är bekanta med nedanstående förutsättningar.
förutsättningar:
Du bör känna till följande ramar / verktyg innan du testar det här dokumentet.
- AngularJs: https://docs.angularjs.org/guide
- IonicFramework: http://ionicframework.com/docs/guide
- Yeoman: http://yeoman.io/codelab/index.html
- Ionic Generator: https://github.com/diegonetto/generator-ionic
- Jonisk plattform: https://ionic.io/platform
Ionic Framework generator
En generator för Ionic Framework från Yeoman, webbens ställningsverktyg för moderna webbappar
Node.js är en JavaScript-runtime inbyggd på Chrome V8 JavaScript-motor. npm är paketansvarig för JavaScript. Ladda ner och installera Node (och npm) från http://nodejs.org
$ npm install npm –g
$ npm install -g yo
Yeoman hjälper dig att starta nya projekt och föreskriver bästa praxis och verktyg som hjälper dig att vara produktiv.
$ yo ionic [app-name]
I paket.json inkludera följande i avvikelser
"grunt-string-replace": "^1.2.1"
I bower.json inkludera följande i beroenden
"ionic-platform-web-client": "^0.7.1"
I Gruntfile.js ändra skript mappen till 'js'. Ändra även i index.html om det behövs.
grunt.initConfig({ yeoman: {…………
scripts: 'js',
………… } })
Kör sedan
$ bower install && npm install
$ grunt
$ grunt serve
$ cordova platform add android
$ grunt build:android --debug
joniskt-plattform-web-klient
En webbklient som tillhandahåller interaktioner med Ionic-plattformen.
Vi behöver lite kod för att låta din app prata med den joniska plattformen. Vi måste lägga till Ionic-plattformens webbklient för Ionic-appen för att gränssnittet med plugins och Ionic.io-plattformen.
$ ionic io init
Lägg till modulen 'ionic.service.core' beroende i din app.js. I Gruntfile.js lägg till grunt-uppgiften "ionicSettings" enligt nedan.
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']);
Lägg till 'ionicSettings' i init och komprimera uppgifter efter kopiering . I index.html flytta nedanstående tagg efter alla taggdeklarationer.
<script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
Kör sedan
$ Grunt serve
Ionic Deploy
Tryck uppdateringar i realtid till dina produktionsappar och hantera versionhistorik.
Ionic Deploy låter dig uppdatera din app på begäran, för eventuella ändringar som inte kräver binära ändringar, vilket sparar dagar, eller till och med veckor, väntetid. Följ proceduren nedan för att konfigurera Ionic Deploy för din app.
I Gruntfile.js lägg till grunt-uppgiften 'distribuera' enligt nedan.
grunt.registerTask('deploy', function () {
return grunt.task.run(['init', 'ionic:upload' + this.args.join()]);
});
kör sedan
$ 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) {
});
Distribuera uppdateringar:
Skicka ut ny kod för din app.
Skapa en apk och installera din app. Gör några ändringar i din kod och distribuera ändringarna med " grunt distribution ". Uppdatera sedan den från din app.
Du kan också distribuera den från apps.ionic.io- instrumentpanelen. Du kan distribuera appen utan distributionsparametern. Sedan kan du lägga till metadata och versioneringsdetaljer i instrumentpanelen och distribuera appen därifrån.
$ grunt build:android --debug
$ grunt deploy --note "release notes"
$ grunt deploy --note "release notes" --deploy=production
Ionic Analytics
Visa liveflödet för händelser eller det råa / unika antalet händelser / användare över tid.
Hur många användare finns på din app just nu? Hur många av dem kommer att använda din app imorgon eller nästa vecka? Utan information har du inget sätt att berätta om din app används på de sätt du förväntar dig. Följ proceduren nedan för att konfigurera Ionic Analytics för din app.
Lägg till i modulen ' ionic.service.analytics ' beroende i din app.js efter ionic.service.core Kör analysregistermetoden i vår moduls körfunktion .
$ionicAnalytics.register();
I Ionic Analytics representeras varje spårad handling som en användare gör i din app av ett händelseobjekt. En händelse är en enda åtgärd som görs vid en viss tidpunkt. För att spåra dina egna händelser, ring $ionicAnalytics.track(eventType, eventData) när en åtgärd inträffar.
$ionicAnalytics.track('User Login', {
user: $scope.user
});
Jon-spår-knackningsdirektivet skickar en händelse när dess värdelement tappas. Det tillhörande jonspår- datadirektivet bifogar händelsesdata.
<button ion-track-tap="eventType" ion-track-data="expression"></button>
I apps.ionic.io- instrumentpanelen kan du visa följande analysdata,
Händelser: Visa det råa antalet händelser över tid eller antalet unika användare som slutförde en händelse. En händelse kan vara allt från en användare som laddar appen till att bekräfta ett köp.
Tratt: En tratt är en sekvens av åtgärder som du förväntar dig att användare ska vidta i din app, vilket leder till ett definierat mål. Tankeväckande användning av kanaler hjälper dig att förbättra konverteringsgraden.
Segment: Visa händelser över tid, grupperade efter en specificerad egenskap. Eller beräkna procentandelen händelser som matchar en given egenskap. Segment hjälper dig att förstå din användarbas och se hur egenskaper förändras över tid.
Förvaring: Spåra hur länge användare är aktiva i din app innan de slutar använda den. Eller identifiera hur lång tid det tar för användare att nå ett definierat mål, som en slutförd försäljning.
Puls: Ett liveflöde av händelser som kommer in från dina användare.
Ionic Push
Skicka riktade och automatiserade pushmeddelanden till dina användare.
Ionic Push låter dig skapa riktade push-aviseringar genom en enkel instrumentpanel som skickas automatiskt när användare matchar specifika kriterier, och erbjuder ett enkelt API för att skicka push-meddelanden från dina egna servrar.
Android Push-profiler:
Android push-aviseringar använder tjänsten Google Cloud Messaging (GCM). Öppna Google Developers Console och skapa ett projekt. Kopiera ner ditt projektnummer . Detta kommer att vara GCM-avsändar-ID eller GCM-projektnummer .
I avsnittet API Manager gör det möjligt för Google Cloud Messaging API. Navigera sedan till avsnittet Uppgifter och välj Skapa referenser, välj sedan API-nyckel och sedan Servernyckel. Namnge din API-nyckel och lämna fältet Acceptera förfrågningar från ... tomt och klicka på Skapa . Spara din API-nyckel !
Authentication:
Gå till appens instrumentbräda på den joniska plattformen och navigera till Inställningar -> Certifikat . Om du inte redan har gjort det, skapa en ny säkerhetsprofil och tryck sedan på redigera . Notera ner profiltaggen .
Klicka nu på fliken Android och hitta avsnittet märkt Google Cloud Messaging , ange API-nyckeln du genererade i Google Developer Console och klicka sedan på Spara . Gå till Inställningar -> API-nycklar . Skapa ett nytt token under API-tokens och kopiera det. Detta kommer din API-kod .
$ 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
Obs: phonegap-plugin-push kräver Android Support Repository version 32+
Lägg till modulen ' ionic.service.push'- beroende i din app.js efter ionic.service.core
Ionic Push Code:
Initiera tjänsten och registrera din enhet i din moduls körfunktion. Du behöver enhetens token som är registrerad av användaren för att skicka meddelande till användaren.
$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();
kör sedan
$ grunt build:android --debug
Ionic Push låter dig skapa riktade push-meddelanden genom instrumentpanelen. Du kan också skicka aviseringar från servern i formatet nedan.
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"
Obs! Stegen för att konfigurera Ionic Push för iOS är desamma utom för att skapa Push-profiler. För att skapa iOS-pushprofiler, se http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles
Exempel på app
En exempelapp bifogas här för referens.
IonicApp:
│
│ bower.json
│ Gruntfile.js
│ package.json
│
└───app
│ index.html
│
├───js
│ app.js
│ controllers.js
│
└───templates
home.html
menu.html
Obs! Detta är inte ett fristående projekt. Den angivna koden är endast för att jämföra med ett projekt som skapats och implementerats med hjälp av procedurerna ovan i detta dokument, i fall av problem eller fel.