ionic-framework Handledning
Komma igång med joniska ramverk

Anmärkningar

versioner

Installation eller installation

1. Installera Ionic Framework och Cordova (eftersom Ionic-appar är baserade på Cordova) med npm (Node Package Manager):

Se till att du har en uppdaterad version av Node.js installerad på ditt system. Om du inte har Node.js installerat kan du installera det härifrån .

För Mac-användare som har den senaste Xcode-versionen installerad på ditt system ger dig kommandoradsverktyg och iOs Simulator, ladda ner här .

Öppna ett terminalfönster (Mac) eller ett kommandofönster (Windows) och installera Cordova och Ionic:

$ npm install -g cordova ionic

På en Mac kan du behöva använda sudo beroende på systemkonfiguration:

$ sudo npm install -g cordova ionic

Om du redan har Cordova och Ionic installerat på din dator, se till att du uppdaterar till den senaste versionen:

$ npm update -g cordova ionic

eller

$ sudo npm update -g cordova ionic

Följ Android- och iOS- plattformsguiderna för att installera nödvändiga plattformsberoenden.

Obs: iOS-utveckling kräver Mac OS X. iOS-simulator genom Ionic CLI kräver paketet ios-sim npm, som kan installeras med kommandot:

$ sudo npm -g install ios-sim

2. Starta ett nytt Ionic-projekt:

Skapa ett joniskt projekt med en av de färdiga appmallarna, eller ett tomt för att börja färskt.

$ ionic start myApp blank

eller

$ ionic start myApp tabs

eller

$ ionic start myApp sidemenu

3. Testa den joniska appen:

Så här testar du din Ionic-app i en stationär webbläsare på både iOS- och Android-plattformar:

$ ionic serve --lab

Medan ionic serve --lab är bra att testa appens UI på flera plattformar kan det leda till några problem för Javascript Console eller Element Inspection, i så fall vad du kanske föredrar:

$ ionic serve

Så här testar du din Ionic-app i en emulator:

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

Ersätt ios med Android för Android-emulatortest:

$ ionic build android
$ ionic emulate android

Så här testar du din Ionic-app i en Android-enhet ansluten via USB:

$ ionic run android

Så här testar du din Ionic-app på en iOS-enhet som är ansluten via USB:

$ ionic run ios --device

Ionic Framework Introduktion och installation och installation

Ionic Framework

Ett ramverk för plattformsapplikationer för mobilapplikationer som använder Angular JS och Front End webbteknologier.

Officiell webbplats : http://ionicframework.com/

Dokumentation : http://ionicframework.com/docs/

Installation och installation

Installation Ionic krävde NPM (Node Package Manager) och Cordova.

Du kan ladda ner och installera Npde JS härifrån som kommer med NPM out of the Box.

För att ladda ner Apache Cordova kan du använda NPM från kommandoraden

npm install -g cordova

Om du redan har NPM och Cordova kan du installera joniska ramverk från kommandoraden med följande kommando.

npm install -g ionic

Detta kommer att installera och ställa in joniska ramverk för dig att använda det från kommandoraden.

Obs * Baserat på din systemmiljö kan du behöva köra med Admin-behörigheter.

Starta ett nytt projekt

För att starta ett nytt Ionic Framework-projekt kan du använda följande kommando

ionic start myproject

eller

ionic start myproject [template_name]

mallar:

Ionic låter dig skapa projekt med hjälp av några inbyggda mallar

tabs (standard): vilket skapar en enkel app med flikvy.

sidemenu : som skapar en jonisk app med sidemenyn.

blank : vilket skapar en tom jonisk app.

som skapar en ny mapp med namnet myproject med alla joniska projektfiler.

för att testa projekt i din webbläsare kan du använda följande kommando

ionic serve --lab

eller

ionic serve

Kör ett emulera För att köra eller testa app på emulator eller telefon först måste du lägga till plattform för det du kan använda följande kommando

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

Platformnamn du kan direkt nämna Android och ios för respektive plattformar kan du nämna flera plattformnamn också separerade med rymden.

För att köra din app kan du använda

ionic run [platform name]

För hjälp kan du använda

ionic --help

eller

ionic help

Se denna länk för detaljerad förklaring av joniska cli.

Se den här länken för CSS-komponenter som är tillgängliga i joniska.

Se denna länk för Javascript API-referens för jonisk.

För snabbare utveckling med jonisk kan du också prova jonisk lekplats .

Lycka till med joniska ramverk ...

Ionic Framework Hello World-appen

Efter all installation, För att göra Hello World-appen

• För att skapa Simple Blank App, kör under kommando på terminalen:

ionic start HelloWorld blank  // create new project

cd HelloWorld                 // get into HelloWorld directory

• öppna HelloWorld-projektet i subline / webstrome IDE:
  • Redigera index.html i 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>

• Så här kör du i webbläsaren från terminalen:

ionic serve                  // run the app in browser

• Så här lägger du till plattform:

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

• Så här kör du på enheten:

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

• Så här körs i leverbelastning:

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

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

Ladda ner exempelappen här .

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.