ionic-framework
Ionic Cloud dla projektów Yeoman Ionic

Android Angular 2 AngularJS Cordova CSS HTML ionic2 iOS JavaScript TypeScript

Platforma jonowa (Ionic Cloud) dla projektów jonowych Yo (Yeoman)

Platforma jonowa :

Twórz, pchaj, wdrażaj i skaluj swoje aplikacje Ionic w prosty sposób.

Opis tytułu:

Ionic Platform to platforma chmurowa do zarządzania i skalowania wieloplatformowych aplikacji mobilnych. Zintegrowane usługi umożliwiają Tobie i Twojemu zespołowi wydajne tworzenie, wdrażanie i rozwijanie aplikacji.

Cel dokumentu:
Ionic Platform działa dobrze ze standardowymi projektami Ionic. Ale projekty zgodne z dowolną niestandardową strukturą katalogów mogą napotkać kilka przeszkód. Dokument ten zawiera instrukcje korzystania z Ionic Platform w projektach Ionic utworzonych za pomocą Yeoman.

Zakres dokumentu:
Ten dokument obejmuje podstawowe kroki tworzenia projektu Ionic przy użyciu Yeoman i integracji go z Ionic Platform przy użyciu klienta WWW Ionic Platform. Ten dokument opisuje podstawowe kroki korzystania z Ionic Deploy, Ionic Analytics i Ionic Push.

Grupa docelowa:
Odbiorcami tego dokumentu są programiści aplikacji internetowych / mobilnych, posiadający wiedzę zarówno dla początkujących, jak i ekspertów, którzy znają poniższe wymagania wstępne.

Wymagania wstępne:
Przed wypróbowaniem tego dokumentu powinieneś zapoznać się z następującymi platformami / narzędziami.

AngularJs: https://docs.angularjs.org/guide
IonicFramework: http://ionicframework.com/docs/guide
Yeoman: http://yeoman.io/codelab/index.html
Generator jonowy: https://github.com/diegonetto/generator-ionic
Platforma jonowa: https://ionic.io/platform

Generator Ionic Framework

Generator dla Ionic Framework firmy Yeoman, internetowego rusztowania dla nowoczesnych aplikacji internetowych

Node.js to środowisko wykonawcze JavaScript zbudowane na silniku JavaScript V8 Chrome. npm to menedżer pakietów dla JavaScript. Pobierz i zainstaluj Węzeł (i npm) ze strony http://nodejs.org

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

Yeoman pomaga rozpocząć nowe projekty, zalecając najlepsze praktyki i narzędzia, które pomogą Ci utrzymać produktywność.

$ yo ionic [app-name]

W package.json dołącz następujące w devDependencies

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

W bower.json należy uwzględnić następujące zależności

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

W Gruntfile.js zmień folder skryptów na „js” . W razie potrzeby zmień także plik index.html .

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

Następnie uruchomić

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

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

ionic-platform-web-client

Klient sieciowy zapewniający interakcje z platformą Ionic.

Potrzebujemy kodu, aby Twoja aplikacja mogła komunikować się z platformą Ionic. Musimy dodać klienta internetowego platformy Ionic, aby aplikacja Ionic mogła współpracować z wtyczkami i platformą Ionic.io.

$ ionic io init

W pliku app.js dodaj zależność modułu „ionic.service.core” . W Gruntfile.js dodaj zadanie gruntowania „ionicSettings”, jak podano poniżej.

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

Dodaj 'ionicSettings' w init i kompresuj zadania po kopiowaniu . W index.html przenieś poniższy znacznik po wszystkich deklaracjach znaczników.

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

Następnie uruchomić

$ Grunt serve

Ionic Deploy

Przesyłaj aktualizacje w czasie rzeczywistym do aplikacji produkcyjnych i zarządzaj historią wersji.

Ionic Deploy pozwala aktualizować aplikację na żądanie w przypadku wszelkich zmian, które nie wymagają modyfikacji binarnych, oszczędzając dni, a nawet tygodni czasu oczekiwania. Wykonaj poniższą procedurę, aby skonfigurować Ionic Deploy dla swojej aplikacji.

W Gruntfile.js dodaj zadanie gruntowania „wdrażaj”, jak podano poniżej.

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

następnie uruchomić

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

Wdrażanie aktualizacji:

Wyślij nowy kod do swojej aplikacji.

Utwórz apk i zainstaluj aplikację. Wprowadź kilka zmian w kodzie i wdróż je, używając opcji „ wdrożyć grunt ”. Następnie zaktualizuj go ze swojej aplikacji.

Możesz go również wdrożyć z pulpitu nawigacyjnego apps.ionic.io . Możesz wdrożyć aplikację bez parametru wdrażania. Następnie na tablicy rozdzielczej możesz dodać metadane i szczegóły wersji i stamtąd wdrożyć aplikację.

$ grunt build:android --debug

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

Analiza jonowa

Zobacz kanał na żywo z wydarzeń lub nieprzetworzoną / unikalną liczbę wydarzeń / użytkowników w czasie.

Ilu użytkowników korzysta obecnie z Twojej aplikacji? Ilu z nich będzie korzystać z Twojej aplikacji jutro lub w przyszłym tygodniu? Bez informacji nie można stwierdzić, czy aplikacja jest używana w oczekiwany sposób. Wykonaj poniższą procedurę, aby skonfigurować Ionic Analytics dla swojej aplikacji.

W pliku app.js dodaj zależność modułu „ ionic.service.analytics ” po ionic.service.core Uruchom metodę rejestru analitycznego w funkcji uruchamiania naszego modułu.

$ionicAnalytics.register();

W Ionic Analytics każda śledzona czynność wykonywana przez użytkownika w Twojej aplikacji jest reprezentowana przez obiekt zdarzenia. Zdarzenie to pojedyncze działanie wykonane w określonym momencie. Aby śledzić własne zdarzenia, dzwoń do $ionicAnalytics.track(eventType, eventData) za każdym razem, gdy nastąpi akcja.

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

Dyrektywa jon-track-tap wysyła zdarzenie, gdy jego element główny zostanie dotknięty. Powiązana dyrektywa danych śledzenia jonów dołącza dane zdarzeń.

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

W panelu apps.ionic.io można wyświetlić następujące dane analityczne,

Wydarzenia: wyświetlaj nieprzetworzoną liczbę zdarzeń w czasie lub liczbę unikalnych użytkowników, którzy ukończyli wydarzenie. Zdarzeniem może być wszystko, od użytkownika ładującego aplikację, po potwierdzenie zakupu.

Ścieżki: Ścieżka to sekwencja działań, których wykonania oczekuje się od użytkowników w Twojej aplikacji, prowadząca do określonego celu. Przemyślane użycie lejków pomoże Ci poprawić współczynniki konwersji.

Segmenty: Przeglądaj zdarzenia w czasie, pogrupowane według określonej właściwości. Lub oblicz procent zdarzeń pasujących do danej właściwości. Segmenty pomagają zrozumieć bazę użytkowników i zobaczyć, jak właściwości zmieniają się w czasie.

Przechowywanie: Śledź, jak długo użytkownicy są aktywni w Twojej aplikacji, zanim przestaną jej używać. Lub określ, ile czasu zajmuje użytkownikom osiągnięcie określonego celu, na przykład ukończonej sprzedaży.

Puls: kanał informujący o wydarzeniach przychodzących od użytkowników.

Ionic Push

Wysyłaj ukierunkowane i automatyczne powiadomienia push użytkownikom.

Ionic Push pozwala tworzyć ukierunkowane powiadomienia push za pomocą prostego pulpitu nawigacyjnego, który będzie wysyłany automatycznie, gdy użytkownicy spełnią określone kryteria, i oferuje prosty interfejs API do wysyłania powiadomień push z własnych serwerów.

Profile push Android:

Powiadomienia push systemu Android korzystają z usługi Google Cloud Messaging (GCM). Otwórz Google Developers Console i utwórz projekt. Zapisz numer swojego projektu . Będzie to identyfikator nadawcy GCM lub numer projektu GCM .

W sekcji Menedżer interfejsu API włącz interfejs API Google Cloud Messaging . Następnie przejdź do sekcji Poświadczenia i wybierz Utwórz poświadczenia, a następnie wybierz Klucz API, a następnie Klucz serwera. Nazwij swój klucz API, pozostaw pole Akceptuj żądania od ... puste i kliknij Utwórz . Zapisz swój klucz API !

Poświadczenie:

Przejdź do pulpitu aplikacji na platformie Ionic i przejdź do Ustawienia -> Certyfikaty . Jeśli jeszcze tego nie zrobiłeś, utwórz nowy profil bezpieczeństwa, a następnie naciśnij edytuj . Zanotuj tag profilu .

Teraz kliknij kartę Android i znajdź sekcję oznaczoną Google Cloud Messaging , wprowadź klucz API wygenerowany w Konsoli programisty Google, a następnie kliknij Zapisz . Przejdź do Ustawienia -> Klucze API . W obszarze Tokeny API utwórz nowy token i skopiuj go. To będzie twój 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

Uwaga: phonegap-plugin-push wymaga Android Support Repository w wersji 32+

W pliku app.js dodaj zależność modułu „ ionic.service.push ” po pliku ionic.service.core

Ionic Push Code:

Zainicjuj usługę i zarejestruj urządzenie w funkcji uruchamiania modułu. Będziesz potrzebował tokena urządzenia zarejestrowanego przez użytkownika do wysyłania powiadomień do użytkownika.

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

następnie uruchomić

$ grunt build:android --debug

Ionic Push pozwala tworzyć ukierunkowane powiadomienia push za pośrednictwem pulpitu nawigacyjnego. Możesz również wysyłać powiadomienia z serwera w poniższym formacie.

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"

Uwaga: kroki konfiguracji Ionic Push dla iOS są takie same, z wyjątkiem tworzenia profili Push. Aby utworzyć profile wypychania iOS, patrz http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles

Przykładowa aplikacja

Pobierz przykładową aplikację tutaj .

Przykładowa aplikacja jest dołączona tutaj w celach informacyjnych.

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

Uwaga: To nie jest samodzielny projekt. Podany kod służy wyłącznie do porównania z projektem utworzonym i wdrożonym przy użyciu procedur podanych powyżej w tym dokumencie, w przypadku jakichkolwiek problemów lub błędów.

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow