ionic-framework Samouczek
Rozpoczęcie pracy z platformą jonową

Uwagi

Wersje

Instalacja lub konfiguracja

1. Zainstaluj Ionic Framework i Cordova (ponieważ aplikacje Ionic są oparte na Cordova) za pomocą npm (Node Package Manager):

Upewnij się, że w twoim systemie jest zainstalowana aktualna wersja Node.js. Jeśli nie masz zainstalowanego Node.js, możesz go zainstalować tutaj .

Również dla użytkowników komputerów Mac zainstalowanie najnowszej wersji Xcode w systemie zapewnia narzędzia wiersza polecenia i Symulator iOS, pobierz tutaj .

Otwórz okno terminala (Mac) lub okno poleceń (Windows) i zainstaluj Cordova i Ionic:

$ npm install -g cordova ionic

Na komputerze Mac może być konieczne użycie sudo w zależności od konfiguracji systemu:

$ sudo npm install -g cordova ionic

Jeśli masz już Cordova i Ionic na swoim komputerze, upewnij się, że dokonałeś aktualizacji do najnowszej wersji:

$ npm update -g cordova ionic

lub

$ sudo npm update -g cordova ionic

Postępuj zgodnie z instrukcjami platformy Android i iOS , aby zainstalować wymagane zależności platformy.

Uwaga: programowanie na iOS wymaga systemu Mac OS X. Symulator iOS za pomocą interfejsu Ionic CLI wymaga pakietu npm ios-sim, który można zainstalować za pomocą polecenia:

$ sudo npm -g install ios-sim

2. Rozpocznij nowy projekt Ionic:

Utwórz projekt Ionic przy użyciu jednego z gotowych szablonów aplikacji lub pustego, aby zacząć od nowa.

$ ionic start myApp blank

lub

$ ionic start myApp tabs

lub

$ ionic start myApp sidemenu

3. Przetestuj aplikację Ionic:

Aby przetestować aplikację Ionic w przeglądarce komputerowej na platformach iOS i Android:

$ ionic serve --lab

Podczas gdy ionic serve --lab jest świetny do testowania interfejsu aplikacji na wielu platformach, może to powodować problemy z konsolą Javascript lub inspekcją elementów, w takim przypadku co możesz preferować:

$ ionic serve

Aby przetestować aplikację Ionic w emulatorze:

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

Zastąp system iOS testowaniem emulatora Androida dla Androida:

$ ionic build android
$ ionic emulate android

Aby przetestować aplikację Ionic na urządzeniu z Androidem podłączonym przez USB:

$ ionic run android

Aby przetestować aplikację Ionic na urządzeniu iOS podłączonym przez USB:

$ ionic run ios --device

Ionic Framework Wprowadzenie oraz instalacja i konfiguracja

Ionic Framework

Wieloplatformowa platforma do tworzenia aplikacji mobilnych z wykorzystaniem technologii Angular JS i Front End.

Oficjalna strona : http://ionicframework.com/

Dokumentacja : http://ionicframework.com/docs/

Instalacja i konfiguracja

Instalacja Ionic wymaga NPM (Node Package Manager) i Cordova.

Możesz pobrać i zainstalować Npde JS stąd, który jest dostarczany z NPM po wyjęciu z pudełka.

Aby pobrać Apache Cordova, możesz użyć NPM z wiersza poleceń

npm install -g cordova

Jeśli masz już NPM i Cordova, możesz zainstalować platformę jonową z wiersza poleceń, używając następującego polecenia.

npm install -g ionic

Spowoduje to zainstalowanie i skonfigurowanie frontu jonowego, aby można go było używać z wiersza polecenia.

Uwaga * W zależności od środowiska systemowego może być konieczne wykonanie z uprawnieniami administratora.

Rozpoczęcie nowego projektu

Aby uruchomić nowy projekt Ionic Framework, możesz użyć następującego polecenia

ionic start myproject

lub

ionic start myproject [template_name]

Szablony:

Ionic umożliwia tworzenie projektów przy użyciu niektórych wbudowanych szablonów

tabs (domyślnie): która utworzy prostą aplikację z widokiem tab.

sidemenu : które stworzy aplikację jonową z bocznym menu.

blank : co spowoduje utworzenie pustej aplikacji jonowej.

który utworzy nowy folder o nazwie myproject ze wszystkimi jonowymi plikami projektu.

Aby przetestować projekt w przeglądarce, możesz użyć następującego polecenia

ionic serve --lab

lub

ionic serve

Uruchom emulację Aby najpierw uruchomić lub przetestować aplikację na emulatorze lub telefonie, musisz dodać platformę, do której możesz użyć następującego polecenia

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

Nazwy platform, na których można bezpośrednio wymienić Androida i iOS dla odpowiednich platform, można też wymienić wiele nazw platform, również oddzielonych spacją.

Aby uruchomić aplikację, możesz użyć

ionic run [platform name]

Aby uzyskać pomoc, z której możesz skorzystać

ionic --help

lub

ionic help

Odwołaj się do tego linku, aby uzyskać szczegółowe wyjaśnienie jonowego CLI

Odnośnik ten zawiera składniki CSS dostępne w wersji jonowej.

Patrz link do odniesienia JavaScript API dla jonowy.

Aby przyspieszyć rozwój z ionic, możesz także wypróbować ionic Playground .

Powodzenia z ramami jonowymi ...

Aplikacja Ionic Framework Hello World

Po zakończeniu instalacji, aby utworzyć aplikację Hello World

• Aby utworzyć Simple Blank App, uruchom poniższe polecenie na terminalu:

ionic start HelloWorld blank  // create new project

cd HelloWorld                 // get into HelloWorld directory

• otwórz projekt HelloWorld w IDE subline / webstrome:
  • Edytuj index.html, w 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>

• Aby uruchomić w przeglądarce z terminala:

ionic serve                  // run the app in browser

• Aby dodać platformę:

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

• Aby uruchomić na urządzeniu:

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

• Aby uruchomić w trybie Livereload:

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

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.