ionic-framework
Ionic Cloud per Yeoman Ionic Projects

Android Angular 2 AngularJS Cordova CSS HTML ionic2 iOS JavaScript TypeScript

Ionic Platform (Ionic Cloud) per Yo (Yeoman) Ionic Projects

Piattaforma ionica :

Costruisci, spinge, distribuisci e ridimensiona le tue app Ionic, in modo semplice.

Descrizione del titolo:

La piattaforma Ionic è una piattaforma cloud per la gestione e il ridimensionamento di app mobili multipiattaforma. I servizi integrati consentono a te e al tuo team di creare, distribuire e far crescere le app in modo efficiente.

Obiettivo del documento:
Ionic Platform funziona bene con i progetti Ionic standard. Ma i progetti che seguono una qualsiasi struttura di directory non standard possono incontrare alcuni ostacoli. Questo documento fornisce i passaggi per utilizzare Ionic Platform nei progetti Ionic creati usando Yeoman.

Ambito del documento:
Questo documento illustra i passaggi fondamentali per la creazione di un progetto Ionic utilizzando Yeoman e integrandolo con la piattaforma Ionic utilizzando il client Web della piattaforma Ionic. Questo documento illustra i passaggi fondamentali per utilizzare Ionic Deploy, Ionic Analytics e Ionic Push.

Destinatari:
Il pubblico previsto per questo documento è gli sviluppatori di app Web / Mobile, con esperienza sia per principianti che per esperti, che hanno familiarità con i prerequisiti seguenti.

Prerequisiti:
Dovresti avere familiarità con i seguenti framework / strumenti prima di provare questo documento.

AngularJs: https://docs.angularjs.org/guide
IonicFramework: http://ionicframework.com/docs/guide
Yeoman: http://yeoman.io/codelab/index.html
Generatore ionico: https://github.com/diegonetto/generator-ionic
Piattaforma ionica: https://ionic.io/platform

Generatore di quadri ionici

Un generatore per Ionic Framework di Yeoman, lo strumento di Scaffolding del Web per le moderne applicazioni web

Node.js è un runtime JavaScript creato sul motore JavaScript V8 di Chrome. npm è il gestore di pacchetti per JavaScript. Scarica e installa Node (e npm) da http://nodejs.org

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

Yeoman ti aiuta a dare il via a nuovi progetti, a prescrivere best practice e strumenti per aiutarti a rimanere produttivo.

$ yo ionic [app-name]

In package.json include quanto segue in devDependencies

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

In bower.json includere quanto segue nelle dipendenze

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

In Gruntfile.js cambia la cartella degli script in 'js' . Cambia anche in index.html se necessario.

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

Quindi corri

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

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

ionico-piattaforma web-client

Un client web che fornisce interazioni con la piattaforma Ionic.

Abbiamo bisogno di un codice per consentire alla tua app di parlare con la piattaforma Ionic. Abbiamo bisogno di aggiungere il client web della piattaforma Ionic per l'app Ionic per l'interfaccia con i plugin e la piattaforma Ionic.io.

$ ionic io init

Nel tuo app.js aggiungi la dipendenza del modulo 'ionic.service.core' . In Gruntfile.js aggiungere il task grunt 'ionicSettings' come indicato di seguito.

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']);

Aggiungi "ionicSettings" in init e comprimi le attività dopo la copia . In index.html sposta il tag sottostante dopo tutte le dichiarazioni dei tag.

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

Quindi corri

$ Grunt serve

Distribuzione ionica

Invia aggiornamenti in tempo reale alle app di produzione e gestisci la cronologia delle versioni.

Ionic Deploy ti consente di aggiornare la tua app su richiesta, per eventuali modifiche che non richiedono modifiche binarie, risparmiando giorni o addirittura settimane di attesa. Segui la procedura seguente per configurare Ionic Deploy per la tua app.

In Gruntfile.js aggiungi l'attività grunt "deploy" come indicato di seguito.

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

quindi corri

$ ionic plugin add ionic-plugin-deploy

Codice di distribuzione ionico:

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) {
});

Distribuzione degli aggiornamenti:

Invia nuovo codice per la tua app.

Crea un apk e installa la tua app. Apporta poche modifiche al tuo codice e distribuisci le modifiche usando ' grunt deploy '. Quindi aggiornalo dalla tua app.

Puoi anche distribuirlo dalla dashboard apps.ionic.io . È possibile distribuire l'app senza il parametro deploy. Quindi, nella dashboard puoi aggiungere i metadati e i dettagli della versione e distribuire l'app da lì.

$ grunt build:android --debug

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

Analytics ionico

Visualizza il feed dal vivo degli eventi o il numero grezzo / univoco di eventi / utenti nel tempo.

Quanti utenti ci sono nella tua app adesso? Quanti di questi useranno la tua app domani o la prossima settimana? Senza informazioni, non hai modo di dire se la tua app viene utilizzata nei modi che ti aspetti. Segui la procedura seguente per configurare Ionic Analytics per la tua app.

Nel tuo app.js aggiungi la dipendenza del modulo ' ionic.service.analytics ' dopo ionic.service.core Esegui il metodo di registrazione analitica nella funzione di esecuzione del nostro modulo.

$ionicAnalytics.register();

In Ionic Analytics, ogni azione tracciata che un utente effettua nella tua app è rappresentata da un oggetto evento. Un evento è una singola azione eseguita in un momento specifico. Per tenere traccia dei tuoi eventi, chiama $ionicAnalytics.track(eventType, eventData) ogni volta che si verifica un'azione.

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

La direttiva ion-track-tap invia un evento quando viene toccato il suo elemento host. La direttiva ion-track-data associata allega i dati dell'evento.

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

Nel dashboard dell'apps.ionic.io puoi visualizzare i seguenti dati di analisi,

Eventi: visualizza il numero grezzo di eventi nel tempo o il numero di utenti unici che hanno completato un evento. Un evento può essere qualsiasi cosa, da un utente che carica l'app, a confermare un acquisto.

Canalizzazioni: una canalizzazione è una sequenza di azioni che ti aspetti che gli utenti eseguano nella tua app, raggiungendo un obiettivo definito. L'uso attento delle canalizzazioni ti aiuterà a migliorare i tassi di conversione.

Segmenti: visualizza gli eventi nel tempo, raggruppati in base a una proprietà specificata. Oppure, calcola la percentuale di eventi che corrispondono a una determinata proprietà. I segmenti ti aiutano a capire la tua base di utenti e vedere come cambiano le proprietà nel tempo.

Conservazione: tieni traccia di quanto tempo gli utenti sono attivi sulla tua app prima che smettano di usarla. In alternativa, identifica il tempo necessario agli utenti per raggiungere un obiettivo definito, ad esempio una vendita completata.

Pulse: un feed dal vivo degli eventi che arrivano dai tuoi utenti.

Ionic Push

Invia notifiche push mirate e automatizzate ai tuoi utenti.

Ionic Push consente di creare notifiche push mirate tramite un semplice dashboard che verrà inviato automaticamente quando gli utenti soddisfano criteri specifici e offre una semplice API per inviare notifiche push dai propri server.

Profili push Android:

Le notifiche push di Android utilizzano il servizio Google Cloud Messaging (GCM). Apri la Google Developers Console e crea un progetto. Copia il numero del tuo progetto . Questo sarà l' ID mittente GCM o il Numero progetto GCM .

Nella sezione Gestione API , attiva l' API di Google Cloud Messaging . Quindi accedere alla sezione Credenziali e selezionare Crea credenziali, quindi selezionare Chiave API, quindi Chiave server. Assegna un nome alla chiave API e lascia vuoto il campo Accetta richieste da ... e fai clic su Crea . Salva la tua chiave API !

Autenticazione:

Vai alla dashboard della tua app su Ionic Platform e vai su Impostazioni -> Certificati . Se non lo hai già fatto, crea un nuovo profilo di sicurezza, quindi premi Modifica . Annotare il tag del profilo .

Ora, fai clic sulla scheda Android e trova la sezione contrassegnata con Google Cloud Messaging , inserisci la chiave API generata nella Google Developer Console, quindi fai clic su Salva . Vai a Impostazioni -> Chiavi API . Sotto Token API , crea un nuovo token e copialo. Questo sarà il tuo token API .

$ 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

Nota: phonegap-plugin-push richiede il repository del supporto Android versione 32+

Nel tuo app.js aggiungi la dipendenza del modulo ' ionic.service.push ' dopo ionic.service.core

Codice Ionico Push:

Inizializza il servizio e registra il tuo dispositivo nella funzione di esecuzione del modulo. Avrai bisogno del token del dispositivo che è registrato dall'utente per l'invio di notifiche all'utente.

$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();

quindi corri

$ grunt build:android --debug

Ionic Push ti consente di creare notifiche push mirate attraverso la dashboard. Puoi anche inviare notifiche dal server nel formato seguente.

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"

Nota: i passaggi per configurare Ionic Push per iOS sono gli stessi tranne per la creazione dei profili push. Per creare profili push iOS, consulta http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles

App di esempio

Scarica l'app di esempio qui .

Un'app campione è allegata qui per riferimento.

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

Nota: questo non è un progetto autonomo. Il codice fornito è solo per il confronto con un progetto creato e implementato utilizzando le procedure sopra riportate in questo documento, in caso di problemi o errori.

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow