Kategorie: Softwareentwicklung

IONIC Framework Tutorial – die Struktur verstehen 2/2

Die Ordnerstruktur verstehen und die erste App coden

In Teil 1 habe ich euch erklärt wie ihr mit Ionic die erste Basisapp installiert und im Browser startet. Außerdem solltet ihr nun schon wissen, was Ionic eigentlich ist und worauf er basiert.

Die Ordnerstrukur

Links seht ihr eine Struktur eines weiter fortgeschrittenen Projekts von mir. Mittig seht ihr euer Projekt kurz nach dem installieren Rechts seht ihr das Projekt nach dem Befehl ionic serve

Beim ersten Blick besteht Ionic aus unzähligen Dateien und man ist leicht überfordert. Außerdem muss man die Struktur jetzt schon verstehen, um später frustrierende Loops zu vermeiden.

node_modules

Damit ihr nicht alle Funktionen und Hardwarezugriffe von Grund auf entwickeln müsst, sind in diesem Ordner alle wichtigen js-Libs abgelegt. Normalerweise muss man in diesem Ordner nichts manuell ändern. Manchmal kann es aber sein, dass es durch Fehlermeldungen dazukommt, dass Lib-Versionen inkompatibel sind. Dann sollte man sich trauen die Lib auch mal zu löschen und eine kompatible Version zu installieren. Die kam bei mir im „Animations“ Modul einmal vor.

src-Ordner

Hier findet ihr das Herzstück eurer Software. Unter index.hml kommt der Server in eure App und nach dem kompilieren werden eure pages und app Module als js Code angesteuert. Die index.hmtl Datei wird von euch eigentlich nicht bearbeitet. Allerdings lassen sich hier externe css-Dateien einbinden. z.B. die CSS Datei von Leaflet (Openstreetmaps).

src-Ordner –app

Dieser Ordner bindet Componenten und Module, welche in eurer ganzen App später zur Verfügung stehen.

src-Ordner –assets

Dieser Ordner beinhaltet Grafiken und andere externe Quellen, welche ihr in der App darstellen oder nutzen wollt. Manuell wird von euch erstmal nichts in diesen Ordner abgelegt. Dazu gibt es später einen Ordner welcher sich www nennt.

src-Ordner –pages

Hier findet ihr die einzelnen Views eurer App. Home beinhaltet die HomePage, About die AboutPage etc. Wie ihr die Views bearbeitet seht ihr später.

src-Ordner –theme

Hier befindet sich eine Datei mit globalen Werten, welche ihr später in euren Style-Sheets nutzen könnt. In variables.scss werden also Variablen mit z.B. Farbcodes definiert und z.B im Stylesheet der HomePage könnt ihr diesen Wert nutzen.

www-Ordner

Nachdem man ionic serve ausgeführt hat, erscheint dieser Ordner. Der lokale Server bedient sich aus dem Unterordner build. Diesen Ordner könnt ihr auch per XAMPP oder über euren Webserver ausliefern. Der Quellcode ist hier allerdings noch ziemlich groß und jeder kann 1:1 eure ts-Quelldaten debuggen. Sobald ihr folgenden Befehl ausführt ionic cordova build browser –prod, bekommt ihr eine kleinere und schwerer lesbare Appversion für euren Server. Das hier aber nur am Rande, da der Build erst später zum Thema wird.

www-Ordner -assets

Hier findet ihr wieder Objekte, welche zur Laufzeit genutzt werden können. Also Bilder, Sounds, CSS Daten etc. Und diesesmal ist es auch der Ordner, in den eure Bilder und Icons abgelegt werden. Später kann im Quelltext dann auf diese Daten zugegriffen werden. Merkt euch diesen Order also als Basisordner.
Jetz können wir Programmieren

Mittels ionic serve können wir die Applikation nun wieder starten und lokal ausliefern. Der Browser öffnet sich (solange wir ionic serve –no-open) eingegeben haben. „No open“ verhindert den automatischen Browser start.

Als erste Seite sehen wir nun die Seite HomePage. Um die Seite zu bearbeiten, finden wir alle notwendigen Dateien im Ordner \myAppNew\src\pages\home\.

Erst möchte ich aber die Frage beantworten, wieso wir nun auf der HomePage landen. Dazu werft ihr einen Blick in die Datei \myAppNew\src\app\app.component.ts in Zeile 12 findet ihr den Eintrag, welche Page die RootPage sein soll. Hier wurde die TabsPage eingetragen. Also springen wir nun dahin zu \myAppNew\src\pages\tabs\tabs.ts und sehen in Zeile 12 bis 14 das den jeweiligen Tabs, die entsprechenden Pages zugeordnet wurden. Als Standard wird Tab1 angezeigt, ergo landen wir in der HomePage.

In der Datei tabs.html könnt ihr nun folgendes ersetzen:

<ion-tabs> 

<ion-tabs selectedIndex="2">

Nach dem Speichern wird durch ionic serve die Änderung erkannt und die Applikation automatisch neu kompiliert. Der Browser lädt neu und schon landet ihr im höheren Tabindex. Setzt den Index auf selectedIndex=“0″ und speichert noch einmal.
Homepage anpassen

Als erste Seite sehen wir nun wieder die Seite HomePage. Geht in den Ordner \myAppNew\src\pages\home\. Hier findet ihr die html-Datei, welche das Design und das Frontend darstellt. In der scss-Datei werden später Designanpassungen vorgenommen, welche sich auf die html-Datei in diesem Ordner beziehen. Globale Anpassungen werden in \myAppNew\src\app\app.scss vorgenommen.

Ändert nun Home zu My Home und speichert die Datei ab. Und schwupps, seht ihr eure Änderung im Browser.

Nun fügt in eure html-Datei folgenden Code ein:

<img src=“assets/imgs/logo.png“ />

Damit werden Bilder aus eurem assets Ordner geladen und angezeigt.

Daten von Backend zu Frontend übergeben

Als letztes möchte ich noch kurz auf die home.ts Datei eingehen. Öffnet diese Datei und seht euch an, wie typescript aufgebaut ist. Letztendlich folgt alles logisch aufeinander. Der Import von benötigten Modulen. Möchte man z.B. einen Sound abspielen, importiert man das Soundmodul und startet die Audiodatei per Button klick.

Unter @Component wird der ts-Datei mitgeteilt, welche html-Date zugeordnet wird. Mit Hilfe der exportClass könnt ihr in anderen ts-Dateien (z.B. schaut ihr mal in tabs.ts) auf diese Komponenten und deren Funktionen zugreifen.

Nun kommen wir noch, um das System etwas besser zu verstehen, zu der Verbindung zwischen ts und html.Dateien. Dazu ändert ihr die beiden home.ts und home.html Dateien zu folgendem:

home.ts
[php]
import { Component } from ‚@angular/core‘;
import { NavController } from ‚ionic-angular‘;

@Component({
selector: ‚page-home‘,
templateUrl: ‚home.html‘
})
export class HomePage {

wort: any = ‚Dies ist ein Text‘;

constructor(public navCtrl: NavController) {

}

}

[/php]

home.html
[html]
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>

{{wort}}

<img src="assets/imgs/logo.png">
</ion-content>
[/html]

Nach dem Speichern seht ihr die Zeile aus dem erschaffenen String, auf der Startseite eurer App. Damit ist schon einmal ein(!) Weg gezeigt, wie man Daten aus der Programmlogik der ts-Datei in das Frontend übernehmen kann.

Ich hoffe nun, dass ihr einen ersten Überblick habt, wie die Struktur in IONIC aufgebaut ist. Außerdem wollte ich euch mit einem sehr simplen Beispiel zeigen, auf welchen Weg Daten im Programm transportiert werden und welche Pfade die Logik nimmt um die App bis zur entsprechenden Page zu routen. Stellt mir eure Fragen und gebt mir noch Tipps, um die nächsten Anleitungen zu erstellen. Ich will, dass ihr so gut wie möglich die Strukturen kennen lernt und aus meinen Fehlern lernt.