ionic2 Tutorial
Erste Schritte mit ionic2
Suche…
Bemerkungen
Ionic 2 ist eine plattformübergreifende mobile Entwicklungstechnologie. Dieses Framework ist für die Erstellung von mobilen Hybridanwendungen konzipiert und kann auch für Desktopanwendungen verwendet werden. Es ist ein einmal schreiben, laufen überall Technologie. Es verwendet Webtechnologien wie JavaScript / Typescript, Angular 2, HTML und CSS (SCSS / LESS). Ionic2-Apps funktionieren gut auf >=android 4.4 , aber Sie möchten mit android 4.1 bis android 4.3 laufen und Cross Walk verwenden .
Installation oder Setup
Da Ionic 2 von Tag zu Tag besser wird, überprüfen Sie immer die offizielle Dokumentation , um die neuesten Änderungen und Verbesserungen zu verfolgen.
Voraussetzungen: Sie benötigen NodeJS, um Ionic 2-Projekte zu erstellen. Sie können Knoten herunterladen und installieren hier und mehr über npm lernen und die Pakete Ionic 2 verwendet hier .
1. Installieren von Ionic 2
Wie bei Ionic 1 können Sie die Ionic CLI oder GUI verwenden, um Apps direkt im Browser zu erstellen und zu testen. Es verfügt sogar über alle Funktionen, um mit Ihren Ionic 1-Apps zu arbeiten, sodass Sie nichts ändern müssen!
Um Ionic 2 zu verwenden, installieren Sie einfach ionic von npm:
$ npm install -g ionic
Wenn Sie einen EACCES-Fehler erhalten, befolgen Sie die Anweisungen hier , um dem Knoten die erforderlichen Berechtigungen zu erteilen.
2. Erstellen Sie Ihre erste App
Führen Sie nach der Installation der CLI den folgenden Befehl aus, um Ihre erste App zu starten:
$ ionic start MyIonic2Project
Die Tabs-Vorlage wird standardmäßig verwendet. Sie können jedoch eine andere Vorlage auswählen, indem Sie ein Flag übergeben. Zum Beispiel:
$ ionic start MyIonic2Project tutorial
$ cd MyIonic2Project
$ npm install
Dies wird die Tutorialvorlage verwenden .
Um Ihre App auszuführen, wechseln Sie in Ihr ionic serve -lc und führen Sie ionic serve -lc :
$ ionic serve -lc
Das -l aktiviert das Live-Reload der Seite, das -c zeigt die Konsolenprotokolle an. Wenn Sie Probleme beim Erstellen Ihrer App haben, stellen Sie sicher, dass Ihre package.json mit der in der ionic2-app-Basis übereinstimmt
Sie können mit Ihrer neuen App direkt im Browser spielen!
3. Aufbau auf einem Gerät
Sie können Ihre neue App auch auf einem physischen Gerät oder einem Geräteemulator erstellen. Sie brauchen Cordova, um fortzufahren.
Um Cordova zu installieren, führen Sie Folgendes aus:
$ npm install -g cordova
Lesen Sie die iOS-Simulatordokumente zum Erstellen von iOS-Anwendungen (HINWEIS: Sie können keine iOS-Geräte oder Emulatoren unter einem anderen Betriebssystem als OSX erstellen ) oder die Genymotion- Dokumente zum Erstellen einer Android-Anwendung.
Läuft auf iOS-Gerät:
Um eine iOS-App zu erstellen, müssen Sie auf einem OSX-Computer arbeiten, da Sie das Kakao-Framework benötigen, um für ios erstellen zu können. In diesem Fall müssen Sie zuerst die Plattform zu Cordova hinzufügen, indem Sie die folgenden Befehl:
$ ionic cordova platform add ios
Sie benötigen Xcode , um ein iOS-Gerät zu kompilieren.
Führen Sie schließlich Ihre App mit dem folgenden Befehl aus:
$ ionic cordova run ios
Auf einem Android-Gerät ausführen:
Die Schritte für Android sind fast identisch. Fügen Sie zuerst die Plattform hinzu:
$ ionic cordova platform add android
Installieren Sie dann das Android SDK , mit dem Sie auf einem Android-Gerät kompilieren können. Obwohl das Android-SDK mit einem Emulator geliefert wird, ist es wirklich langsam. Genymotion ist viel schneller. Nach der Installation führen Sie einfach den folgenden Befehl aus:
$ ionic cordova run android
Und das ist es! Herzlichen Glückwunsch zum Bau Ihrer ersten Ionic 2-App!
Ionic hat auch Live-Nachladen. Wenn Sie also Ihre App entwickeln und Änderungen live auf dem Emulator / Gerät sehen möchten, können Sie dies mit den folgenden Befehlen ausführen:
Für iOS:
$ ionic cordova emulate ios -lcs
Seien Sie vorsichtig, unter iOS 9.2.2 funktioniert die Belastung nicht. Wenn Sie mit livereload arbeiten möchten, bearbeiten Sie die Datei config.xml, indem Sie Folgendes hinzufügen:
<allow-navigation href="*"/>
Dann in der <platform name="ios"> :
<config-file parent="NSAppTransportSecurity" platform="ios" target="*-Info.plist">
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
</config-file>
Für Android:
$ ionic cordova run android -lcs
Das l steht für live-reload, c für Konsolenprotokolle und s für Serverprotokolle. So können Sie während der Ausführung feststellen, ob Fehler / Warnungen vorliegen.
Bauen für Windows
Wenn Sie Ihr Projekt für Windows erstellen möchten, müssen Sie auf einem Windows-Computer arbeiten. Installieren Sie zunächst die Windows-Plattform in Ihrem ionic2-Projekt, indem Sie den folgenden Befehl ausführen:
$ionic cordova platform add windows
Dann führen Sie einfach den folgenden Befehl aus:
$ionic cordova run windows
Im Browser ausführen
$ionic serve
für Chrome-Browserinspektionsgerät (geben Sie die Adressleiste des Chrome-Browsers ein)
chrome://inspect/#devices