ionic-framework Zelfstudie
Aan de slag met ionisch raamwerk

Opmerkingen

versies

Installatie of instellingen

1. Installeer het Ionic Framework en Cordova (omdat Ionic-apps op Cordova zijn gebaseerd) met behulp van npm (de Node Package Manager):

Zorg ervoor dat een up-to-date versie van Node.js op uw systeem is geïnstalleerd. Als Node.js niet is geïnstalleerd, kunt u het hier installeren.

Ook voor Mac-gebruikers levert de nieuwste Xcode-versie op uw systeem u opdrachtregelprogramma's en iOs Simulator op, hier downloaden .

Open een terminalvenster (Mac) of een opdrachtvenster (Windows) en installeer Cordova en Ionic:

$ npm install -g cordova ionic

Op een Mac moet u mogelijk sudo gebruiken, afhankelijk van uw systeemconfiguratie:

$ sudo npm install -g cordova ionic

Als Cordova en Ionic al op uw computer zijn geïnstalleerd, moet u bijwerken naar de nieuwste versie:

$ npm update -g cordova ionic

of

$ sudo npm update -g cordova ionic

Volg de Android- en iOS- platformhandleidingen om de vereiste platformafhankelijkheden te installeren.

Opmerking: iOS-ontwikkeling vereist Mac OS X. iOS-simulator via de Ionic CLI vereist het ios-sim npm-pakket, dat kan worden geïnstalleerd met de opdracht:

$ sudo npm -g install ios-sim

2. Start een nieuw Ionisch project:

Maak een Ionisch project met behulp van een van de kant-en-klare app-sjablonen of een leeg om opnieuw te beginnen.

$ ionic start myApp blank

of

$ ionic start myApp tabs

of

$ ionic start myApp sidemenu

3. Test de Ionische app:

Om uw Ionische app te testen in een desktopbrowser op zowel iOS- als Android-platforms:

$ ionic serve --lab

Terwijl ionic serve --lab geweldig is om de gebruikersinterface van de app op meerdere platforms te testen, kan dit leiden tot enkele problemen voor Javascript Console of Element Inspection, in dat geval wat u verkiest:

$ ionic serve

Om uw Ionische app in een emulator te testen:

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

Vervang iOS met Android voor het testen van Android-emulators:

$ ionic build android
$ ionic emulate android

Uw Ionic-app testen op een Android-apparaat dat via USB is aangesloten:

$ ionic run android

Uw Ionische app testen op een iOS-apparaat dat via USB is aangesloten:

$ ionic run ios --device

Ionic Framework Introductie en installatie en configuratie

Ionisch kader

Een platformoverschrijdend kader voor de ontwikkeling van mobiele applicaties met behulp van Angular JS en Front End webtechnologieën.

Officiële website : http://ionicframework.com/

Documentatie : http://ionicframework.com/docs/

Installatie en instellingen

Installatie Ionic vereist NPM (Node Package Manager) en Cordova.

U kunt Npde JS hier downloaden en installeren , dat wordt geleverd met NPM uit de doos.

Om Apache Cordova te downloaden, kunt u NPM gebruiken vanaf de opdrachtregel

npm install -g cordova

Als u al NPM en Cordova hebt, kunt u ionisch framework vanaf de opdrachtregel installeren met behulp van de volgende opdracht.

npm install -g ionic

Dit installeert en configureert ionisch framework zodat u het vanaf de opdrachtregel kunt gebruiken.

Opmerking * Afhankelijk van uw systeemomgeving moet u mogelijk uitvoeren met beheerdersrechten.

Een nieuw project starten

Om een nieuw Ionic Framework Project te starten, kunt u de volgende opdracht gebruiken

ionic start myproject

of

ionic start myproject [template_name]

Sjablonen:

Met Ionic kunt u een project maken met behulp van enkele ingebouwde sjablonen

tabs (standaard): hiermee wordt een eenvoudige app met tabbladweergave gemaakt.

sidemenu : die ionische app met zijmenu maakt.

blank : hiermee wordt een lege ionische app gemaakt.

waarmee een nieuwe map met de naam myproject met alle ionische projectbestanden.

om het project in uw browser te testen, kunt u de volgende opdracht gebruiken

ionic serve --lab

of

ionic serve

Voer een emulatie uit Om eerst een app op emulator of telefoon uit te voeren of te testen, moet u een platform toevoegen waarvoor u de volgende opdracht kunt gebruiken

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

Platformnamen die u direct kunt vermelden Android en iOS voor respectieve platforms kunt u meerdere platformnamen vermelden, ook gescheiden door spaties.

Om uw app uit te voeren kunt u gebruiken

ionic run [platform name]

Voor hulp die u kunt gebruiken

ionic --help

of

ionic help

Raadpleeg deze link voor gedetailleerde uitleg over ionische cli.

Raadpleeg deze link voor CSS-componenten die beschikbaar zijn in ionic.

Raadpleeg deze link voor Javascript API-referentie voor ionisch.

Voor een snellere ontwikkeling met ionic kun je ionic Playground ook proberen.

Veel succes met ionisch kader ...

Ionic Framework Hello World-app

Na alle instellingen, om Hello World App te maken

• Voer de onderstaande opdracht uit op de terminal om Simple Blank App te maken:

ionic start HelloWorld blank  // create new project

cd HelloWorld                 // get into HelloWorld directory

• open het HelloWorld Project in subline / webstrome IDE:
  • Bewerk 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>

• Uitvoeren in browser vanaf terminal:

ionic serve                  // run the app in browser

• Platform toevoegen:

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

• Uitvoeren op apparaat:

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

• Uitvoeren in leverlast:

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

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.