ionic-framework
Ionische cloud voor Yeoman Ionische projecten
Zoeken…
Ionic Platform (Ionic Cloud) voor Yo (Yeoman) Ionische projecten
Ionisch platform :
Bouw, duw, implementeer en schaal uw Ionische apps, op de gemakkelijke manier.
Titel beschrijving:
Het Ionic Platform is een cloudplatform voor het beheren en schalen van platformonafhankelijke mobiele apps. Dankzij geïntegreerde services kunnen u en uw team uw apps efficiënt bouwen, implementeren en laten groeien.
Document doelstelling:
Ionic Platform werkt goed met de standaard Ionische projecten. Maar projecten die een niet-standaard directorystructuur volgen, kunnen met een paar hindernissen worden geconfronteerd. Dit document biedt de stappen om Ionisch Platform te gebruiken in de Ionische projecten die met Yeoman zijn gemaakt.
Documentbereik:
Dit document behandelt de basisstappen voor het maken van een Ionisch project met Yeoman en het integreren met Ionic Platform met behulp van de Ionic Platform Web Client. Dit document behandelt de basisstappen voor het gebruik van Ionic Deploy, Ionic Analytics en Ionic Push.
Beoogde doelgroep:
De beoogde doelgroep voor dit document is Web / Mobile App-ontwikkelaars, met expertise op zowel beginners- als expertniveau, die bekend zijn met de onderstaande vereisten.
Vereisten:
U moet bekend zijn met de volgende frameworks / tools voordat u dit document probeert.
- AngularJs: https://docs.angularjs.org/guide
- IonicFramework: http://ionicframework.com/docs/guide
- Yeoman: http://yeoman.io/codelab/index.html
- Ionische Generator: https://github.com/diegonetto/generator-ionic
- Ionisch platform: https://ionic.io/platform
Ionische Framework-generator
Een generator voor het Ionic Framework van Yeoman, de Scaffolding-tool van het web voor moderne webapps
Node.js is een JavaScript-runtime gebouwd op Chrome's V8 JavaScript-engine. npm is de pakketbeheerder voor JavaScript. Download en installeer Node (en npm) van http://nodejs.org
$ npm install npm –g
$ npm install -g yo
Yeoman helpt u bij het opstarten van nieuwe projecten en schrijft best practices en hulpmiddelen voor om u te helpen productief te blijven.
$ yo ionic [app-name]
Neem in package.json het volgende op in devDependencies
"grunt-string-replace": "^1.2.1"
In bower.json het volgende opnemen in afhankelijkheden
"ionic-platform-web-client": "^0.7.1"
Wijzig in Gruntfile.js de map met scripts in 'js' . Wijzig indien nodig ook index.html .
grunt.initConfig({ yeoman: {…………
scripts: 'js',
………… } })
Ren dan
$ bower install && npm install
$ grunt
$ grunt serve
$ cordova platform add android
$ grunt build:android --debug
ionische platform web-client
Een webclient die interacties met het Ionische platform biedt.
We hebben code nodig om uw app met het Ionic Platform te laten praten. We moeten de Ionic-platform-webclient toevoegen zodat de Ionic-app kan communiceren met de plug-ins en het Ionic.io-platform.
$ ionic io init
Voeg in uw app.js de afhankelijkheid van de module 'ionic.service.core' toe . Voeg in Gruntfile.js de grunttaak 'ionicSettings' toe zoals hieronder aangegeven.
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']);
Voeg de 'ionicSettings' toe in init en comprimeer taken na het kopiëren . Verplaats in index.html de onderstaande tag na alle tagverklaringen.
<script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
Ren dan
$ Grunt serve
Ionic Deploy
Push realtime updates naar uw productie-apps en beheer versiegeschiedenis.
Met Ionic Deploy kunt u uw app op aanvraag bijwerken voor wijzigingen die geen binaire aanpassingen vereisen, waardoor u dagen of zelfs weken wachttijd bespaart. Volg de onderstaande procedure om Ionic Deploy voor uw app te configureren.
Voeg in Gruntfile.js de grunttaak 'deploy' toe zoals hieronder aangegeven.
grunt.registerTask('deploy', function () {
return grunt.task.run(['init', 'ionic:upload' + this.args.join()]);
});
ren dan
$ 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 implementeren:
Stuur een nieuwe code voor uw app.
Maak een apk en installeer uw app. Breng enkele wijzigingen aan in uw code en implementeer de wijzigingen met behulp van ' grunt deploy '. Werk het vervolgens bij vanuit uw app.
U kunt het ook implementeren vanuit het dashboard van apps.ionic.io . U kunt de app implementeren zonder de deploy-parameter. Vervolgens kunt u in het dashboard de metagegevens en versiegegevens toevoegen en de app van daaruit implementeren.
$ grunt build:android --debug
$ grunt deploy --note "release notes"
$ grunt deploy --note "release notes" --deploy=production
Ionische analyse
Bekijk de live feed van evenementen of het onbewerkte / unieke aantal evenementen / gebruikers in de loop van de tijd.
Hoeveel gebruikers zijn er nu op uw app? Hoeveel daarvan gebruiken uw app morgen of volgende week? Zonder informatie kunt u niet zeggen of uw app wordt gebruikt op de manier die u verwacht. Volg de onderstaande procedure om Ionic Analytics voor uw app te configureren.
Voeg in uw app.js de module-afhankelijkheid ' ionic.service.analytics ' toe na ionic.service.core Voer de analyseregistratiemethode uit in de run-functie van onze module.
$ionicAnalytics.register();
In Ionic Analytics wordt elke bijgehouden actie die een gebruiker in uw app uitvoert, voorgesteld door een gebeurtenisobject. Een evenement is een enkele actie die op een specifiek tijdstip wordt uitgevoerd. Als u uw eigen gebeurtenissen wilt bijhouden, belt u $ionicAnalytics.track(eventType, eventData) wanneer er een actie plaatsvindt.
$ionicAnalytics.track('User Login', {
user: $scope.user
});
De ion-track-tap- richtlijn verzendt een gebeurtenis wanneer op het hostelement wordt getikt. De bijbehorende ion-track-data- richtlijn voegt gebeurtenisgegevens toe.
<button ion-track-tap="eventType" ion-track-data="expression"></button>
In het apps.ionic.io- dashboard kunt u de volgende analysegegevens bekijken,
Gebeurtenissen: bekijk het onbewerkte aantal gebeurtenissen in de loop van de tijd of het aantal unieke gebruikers die een gebeurtenis hebben voltooid. Een evenement kan van alles zijn, van een gebruiker die de app laadt tot het bevestigen van een aankoop.
Trechters: een trechter is een reeks acties waarvan u verwacht dat gebruikers deze in uw app uitvoeren, met als doel een bepaald doel. Door doordacht gebruik van trechters kunt u de conversiepercentages verbeteren.
Segmenten: gebeurtenissen in de loop van de tijd bekijken, gegroepeerd op een opgegeven eigenschap. Of bereken het percentage evenementen dat overeenkomt met een bepaalde eigenschap. Segmenten helpen u uw gebruikersbestand te begrijpen en te zien hoe eigenschappen in de loop van de tijd veranderen.
Retentie: houd bij hoe lang gebruikers actief zijn op uw app voordat ze stoppen met het gebruik ervan. Of bepaal hoe lang het duurt voordat gebruikers een bepaald doel bereiken, zoals een voltooide verkoop.
Puls: een live feed met gebeurtenissen die van uw gebruikers binnenkomen.
Ionische Push
Stuur gerichte en geautomatiseerde pushmeldingen naar uw gebruikers.
Met Ionic Push kunt u gerichte pushmeldingen maken via een eenvoudig dashboard dat automatisch wordt verzonden wanneer gebruikers aan specifieke criteria voldoen, en biedt een eenvoudige API om pushmeldingen te verzenden vanaf uw eigen servers.
Android Push-profielen:
Android-pushmeldingen gebruiken de Google Cloud Messaging (GCM) -service. Open de Google Developers Console en maak een project. Kopieer uw projectnummer . Dit wordt de GCM-afzender-ID of het GCM-projectnummer .
Schakel in de sectie API Manager de Google Cloud Messaging API in . Navigeer vervolgens naar het gedeelte Referenties en selecteer Referenties maken en kies vervolgens API Key en vervolgens Server Key. Geef uw API-sleutel een naam en laat het veld Aanvragen accepteren van ... leeg en klik op Maken . Bewaar uw API-sleutel !
authenticatie:
Ga naar het dashboard van uw app op het Ionic Platform en ga naar Instellingen -> Certificaten . Als u dit nog niet hebt gedaan, maakt u een nieuw beveiligingsprofiel en klikt u vervolgens op bewerken . Noteer de profieltag .
Klik nu op het tabblad Android en zoek het gedeelte gemarkeerd met Google Cloud Messaging , voer de API-sleutel in die u hebt gegenereerd in de Google Developer Console en klik vervolgens op Opslaan . Ga naar Instellingen -> API-sleutels . Maak onder API-tokens een nieuw token aan en kopieer dit. Dit wordt uw 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
Opmerking: phonegap-plugin-push vereist Android Support Repository versie 32+
Voeg in uw app.js de module-afhankelijkheid ' ionic.service.push ' toe na ionic.service.core
Ionische Push Code:
Initialiseer de service en registreer uw apparaat in de run-functie van uw module. U hebt het apparaattoken nodig dat door de gebruiker is geregistreerd om een melding naar de gebruiker te verzenden.
$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();
ren dan
$ grunt build:android --debug
Met Ionic Push kunt u gerichte pushmeldingen maken via het dashboard. U kunt ook meldingen van de server in de onderstaande indeling verzenden.
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"
Opmerking: De stappen om Ionic Push voor iOS te configureren zijn hetzelfde, behalve voor het maken van de Push-profielen. Raadpleeg http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles voor het maken van iOS- pushprofielen
Voorbeeld-app
Download hier de voorbeeld-app .
Een voorbeeld-app is hier ter referentie bijgevoegd.
IonicApp:
│
│ bower.json
│ Gruntfile.js
│ package.json
│
└───app
│ index.html
│
├───js
│ app.js
│ controllers.js
│
└───templates
home.html
menu.html
Opmerking: dit is geen op zichzelf staand project. De gegeven code is alleen voor vergelijking met een project dat is gemaakt en geïmplementeerd met behulp van de hierboven in dit document beschreven procedures, in geval van problemen of fouten.