ionic-framework Tutorial
Iniziare con il framework ionico

Osservazioni

Versioni

Installazione o configurazione

1. Installa Ionic Framework e Cordova (poiché le app Ionic sono basate su Cordova) utilizzando npm (Node Package Manager):

Assicurati di avere una versione aggiornata di Node.js installata sul tuo sistema. Se non hai installato Node.js, puoi installarlo da qui .

Inoltre, per gli utenti Mac, l'ultima versione di Xcode installata sul tuo sistema ti porta gli strumenti da riga di comando e il simulatore iOs, scaricalo qui .

Aprire una finestra di terminale (Mac) o una finestra di comando (Windows) e installare Cordova e Ionic:

$ npm install -g cordova ionic

Su un Mac, potresti dover utilizzare sudo in base alla configurazione del tuo sistema:

$ sudo npm install -g cordova ionic

Se hai già installato Cordova e Ionic sul tuo computer, assicurati di aggiornare alla versione più recente:

$ npm update -g cordova ionic

o

$ sudo npm update -g cordova ionic

Seguire le guide della piattaforma Android e iOS per installare le dipendenze della piattaforma richieste.

Nota: lo sviluppo iOS richiede Mac OS X. Il simulatore iOS tramite la CLI Ionic richiede il pacchetto ios-sim npm, che può essere installato con il comando:

$ sudo npm -g install ios-sim

2. Avvia un nuovo progetto Ionic:

Crea un progetto Ionic utilizzando uno dei modelli di app già pronti o uno vuoto per iniziare.

$ ionic start myApp blank

o

$ ionic start myApp tabs

o

$ ionic start myApp sidemenu

3. Testare l'app Ionic:

Per testare la tua app Ionic in un browser desktop su entrambe le piattaforme iOS e Android:

$ ionic serve --lab

Considerando che ionic serve --lab è ottimo per testare l'interfaccia utente dell'applicazione su più piattaforme, potrebbe portare ad alcuni problemi per la console JavaScript o l'ispezione degli elementi, in tal caso cosa si può preferire:

$ ionic serve

Per testare la tua app Ionic in un emulatore:

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

Sostituisci ios con Android per il test dell'emulatore Android:

$ ionic build android
$ ionic emulate android

Per testare la tua app Ionic su un dispositivo Android connesso tramite USB:

$ ionic run android

Per testare la tua app Ionic su un dispositivo iOS collegato tramite USB:

$ ionic run ios --device

Introduzione e installazione di Ionic Framework e installazione

Quadro ionico

Un framework di sviluppo di applicazioni mobili multipiattaforma che utilizza le tecnologie Web Angular JS e Front End.

Sito Web ufficiale : http://ionicframework.com/

Documentazione : http://ionicframework.com/docs/

Installazione e configurazione

Installazione Ionic richiede NPM (Node Package Manager) e Cordova.

È possibile scaricare e installare Npde JS da qui, fornito con NPM out of the Box.

Per scaricare Apache Cordova puoi utilizzare NPM dalla riga di comando

npm install -g cordova

Se hai già NPM e Cordova, puoi installare il framework ionico dalla riga di comando usando il seguente comando.

npm install -g ionic

Questo installerà e installerà il framework ionico affinché tu possa usarlo dalla riga di comando.

Nota * In base all'ambiente di sistema, potrebbe essere necessario eseguire i privilegi di amministratore.

Iniziare un nuovo progetto

Per avviare un nuovo progetto Ionic Framework è possibile utilizzare il seguente comando

ionic start myproject

o

ionic start myproject [template_name]

Modelli:

Ionic ti consente di creare progetti utilizzando alcuni modelli incorporati

tabs (impostazione predefinita): che creerà una semplice app con visualizzazione a schede.

sidemenu : che creerà app ionico con menu laterale.

blank : che creerà un'app ionica vuota.

che creerà una nuova cartella denominata myproject con tutti i file di progetto ionici.

per testare il progetto nel tuo browser puoi usare il seguente comando

ionic serve --lab

o

ionic serve

Esegui un emulatore Per eseguire o testare l'app su emulatore o telefono, dovrai prima aggiungere una piattaforma per poter usare il seguente comando

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

Nomi di piattaforma che puoi menzionare direttamente Android e iOS per le rispettive piattaforme, puoi menzionare più nomi di piattaforme separati da spazio.

Per eseguire la tua app puoi utilizzare

ionic run [platform name]

Per aiuto puoi usare

ionic --help

o

ionic help

Fare riferimento a questo link per una spiegazione dettagliata del cli ionico.

Fare riferimento a questo link per i componenti CSS disponibili in ionico.

Fare riferimento a questo collegamento per il riferimento API Javascript per ionico.

Per uno sviluppo più veloce con ionico puoi provare anche Playground ionico .

Buona fortuna con la struttura ionica ...

Ionic Framework Hello World App

After All the setup, Per rendere Hello World App

• Per creare una semplice app vuota, esegui il comando sotto sul terminale:

ionic start HelloWorld blank  // create new project

cd HelloWorld                 // get into HelloWorld directory

• apri il Progetto HelloWorld in IDE sublime / webstrome:
  • Modifica 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>

• Per eseguire nel browser dal terminale:

ionic serve                  // run the app in browser

• Per aggiungere una piattaforma:

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

• Per eseguire sul dispositivo:

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

• Per correre nel fegato:

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

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.