Wie im Vorstellungs-Artikel zu meinem Buch „AngularJS & Ionic Framework“ versprochen, geht es nun mit der kleinen Blog-Reihe über die Tools und Services im Ionic-Universum weiter.

In diesem Beitrag geht es hauptsächlich um das Erstellen von Prototypen. Gerade im Bereich mobiler Apps ist es oftmals schwer, vor der eigentlichen Entwicklung ein passendes Layout oder die Darstellung der Grundfunktionen im App-Kontext zu visualisieren. In der Software-Entwicklung gibt es verschiedene Arten von Prototyping:

Exploratives Prototyping – Anforderungsbestimmung, Tests zur Umsetzung von Funktionen, Lösen von Problemen
Evolutionäres Prototyping – erste Anwendung mit Grundfunktionen
Experimentelles Prototyping – einfacher, erster Prototyp zur Gewinnung von Erkenntnissen zur möglichen produktiven Umsetzung
Vertikales Prototyping – eine Funktionalität wird komplett fertig implementiert (Oberfläche, Logik etc.)
Horizontales Prototyping – eine Ebene des System bzw. der Anwendung wird finalisiert (z. B. Oberfläche)

Im Bereich der Softwareentwicklung ist vor allem der letzte Ansatz des horizontalen Prototypings interessant, weil dadurch früh ein Austausch über die mögliche Umsetzung zwischen Auftraggeber und Umsetzer stattfinden kann. Es ist natürlich auch für jeden privaten Entwickler hilfreich, wenn er sich schon vorher ein Bild von einer möglichen Umsetzung machen kann.

Auch hierfür wimmelt es im Web von verschiedenen Tools, die einem das Erstellen eines klickbaren Prototyps erleichtern. Neben der Nutzung von externen Tools kann man sich natürlich auch die eigenen Hände schmutzig machen und Paper-Prototyping oder Scribblen betreiben. Dabei werden entweder die Standardkomponenten der Anwendung, z. B. Schaltflächen und Eingabefelder, gebastelt und dann schnell und einfach auf einem Blatt Papier arrangiert, bis alles passt, oder ganz simpel mit Stift und Papier eine schnelle Skizze der einzelnen Ansichten gezeichnet.

Für die Entwickler von Ionic-Apps hat das Team des Frameworks zur Erstellung mobiler, hybrider Anwendung ein eigenes Prototyping-Tool – mit dem Namen Ionic Creator – entworfen.

Der Ionic Creator

Der Ionic Creator ist der erste Service im Ionic-Universum, der den Kinderschuhen entwachsen ist und bereits im vollen Funktionumfang kostenlos und kostenpflichtig genutzt werden kann. Unter https://creator.ionic.io ist das Tool erreichbar. Damit der Service genutzt werden kann, müsst ihr euch vorher einen eigenen Account anlegen oder ein bestehendes ionic.io-Konto verwenden. Nach erfolgreichem Einloggen erscheint das Dashboard mit allen bereits anlegten Projekten.

 

Ionic Creator - Dashboard

Ein Projekt anlegen

Über den Knopf „New Project“ kann ein neues Projekt angelegt werden. Dort muss nur ein passender Name angegeben und ein passendes Starter-Template ausgewählt werden. Dabei stehen die drei Standard-Starter von Ionic zur Verfügung:

1. Blank – tabula rasa! – ein komplett leeres Projekt
2. Side Menu – App mit Seitenmenü als Hauptnavigations-Element
3. Tabs – App mit Tabs

 

Ionic Creator - Neues Projekt hinzufügen

Nach dem Klick auf „Create Project“ wird das neue Projekt anlegt und ihr gelangt in den Bearbeitungsmodus bzw. den Editor. Dieser besteht aus verschiedenen Bereichen mit unterschiedlichen Funktionen.

Bereiche und Funktionen

Die nachfolgende Grafik zeigt den Editor. Die eingezeichneten Nummern dienen zur späteren besseren Beschreibung der Bereiche.

 

Ionic Creator - Editor

1. Projektname und Indikator, ob alle Änderungen gespeichert wurden (automatisches Speichern!)
2. Wechsel zwischen Bearbeitungs- und Vorschaumodus
3. Export (als Archiv, apk-, ipa-Datei, Ionic-Ceator App – Vorschau-App von Ionic, Ionic CLI-Projekt), Share-Funktion (Link, E-Mail, SMS, Ionic-Creator App), Tutorials und weitere Links
4. Pages
– die einzelnen Views mit den enthaltenen Komponenten und Elementen des Prototyps
– Auswahl zu bearbeitender Seite/Komponente
5. Components – Ionic-Komponenten + zusätzliche Inhalte, wie Text, Titel, Bilder, Videos und eigener HTML-Code
6. Page-Editor
– zeigt die aktuelle Seite mit den entsprechenden Elementen
– Komponenten können via Drag and Drop hier eingefügt werden
– einzelne Elemente/Komponenten können angewählt/kopiert/entfernt werden
7. Komponenten-/Element-Einstellungen
– Pages und Komponenten haben verschiedene Einstellung
– je nach Auswahl in 6. oder 4. kann Komponente/Page konfiguriert werden

Navigation

Natürlich gibt es auch die Möglichkeit, verschiedene Pages, sprich Views, zu verlinken. Dies kann beispielsweise über einen Button, ein Bild oder einen Listeneintrag passieren. Verschiedene Komponenten besitzen im Einstellungsbereich einen Abschnitt Link und Pages dafür den Punkt Routing URL. Alle Seiten erhalten automatisch eine generierte Routing URL, die nachträglich geändert werden kann. Den Komponenten zum Verlinken kann zusätzlich zu bestehenden Routing URLs auch eine externe URL angegeben werden. Als kleines Beispiel erweitern wir das Test-App-Projekt um eine Login-Seite. Über eine Schaltfläche ist diese von der Startseite erreichbar. Zum Test öffnen wir anschließend den Vorschaumodus von der Startseite. Das Ergebnis sieht wie folgt aus.

 

Ionic Creator - Preview Routing

Fazit

Der Ionic Creator macht Spaß! Gerade am Anfang, wenn man selbst noch nicht direkt eine Vorstellung davon hat, was mit dem Ionic Framework möglich ist oder wie die nächste App aussehen könnte. Leider umfasst der kostenlose Account nur ein Projekt. Da ihr jedoch die Export-Funktion unbegrenzt nutzen könnt, lassen sich die Projekte auch außerhalb des Tools speichern und weiterverwenden. Gerade Designer können so klickbare Prototypen von Ionic-Apps ohne Programmierkenntnisse realisieren.