Kategorie-Archiv: Floradex

Wir: Anne Lange (KHB Produktdesign), Philipp Schröter (FU Berlin Informatik), Immanuel Pelzer (HU Berlin Informatik), Paul Michaelis (FU Berlin Informatik) wollten als interdisziplinäres Team den schwer zugänglichen Herbariums-Daten des Botanischen Museums und Botanischen Gartens Berlin neues Leben einhauchen.

Bei unserer Recherche sind wir auf die Tatsache gestoßen, dass die Pflanzenbestimmung sehr umständlich und die meisten wissenschaftlich korrekten Bestimmungsmedien (vor allem Bücher) nur von Experten benutzt werden können. Für Laien ist eine eindeutige Bestimmung oft frustrierend: Aufgrund ihres fehlenden Fachwissens können sie meist die entscheidenden Fragen nur unzureichend beantworten. Das führt dazu, dass sie zu keinem eindeutigen oder einem völlig falschen Ergebnis kommen.

Wir haben deshalb eine App konzipiert und programmiert, die es dem Benutzer unterwegs ermöglicht, die Pflanze, die er sucht, intuitiv anhand von Symbolen in einem Baukasten nachzubauen und mittels dieser Kriterien bestimmen zu lassen. Er kann dabei die gesetzten Filter immer wieder verändern und somit die Menge und Treffsicherheit der Ergebnisse verfolgen und beeinflussen.

Fachbegriffe und den trockenen wissenschaftlichen Inhalt binden wir direkt in die spielerischen Elemente ein. Deshalb hat floradex das Potenzial, als Lehrmittel in der Schule eingesetzt zu werden. Projektarbeit mit selbstbestimmtem Lernen durch Anfassen und Ausprobieren ist eine gute Alternative zum klassischen Frontalunterricht und sturem Auswendiglernen. So kann auch Interesse für Themen geweckt werden, die Jugendliche vielleicht zunächst ablehnen.

Aber auch für interessierte Laien bietet floradex leichten Zugang zur Botanik. Durch die Optimierung für mobile Geräte können Pflanzen beim Spaziergang, beim Besuch im Botanischen Garten oder im heimischen Garten ohne Eingriff in die Natur bestimmt werden.

Technische Reflektion

Die von uns verwendeten Technologien werden hier noch einmal kurz kritisch auf ihre Zukunftssicherheit betrachtet.

Ionic Framework für das Frontend

Das Ionic Framework stellt viele nützliche Dinge bereit. Unter anderem sind oft benötigte Elemente, wie z.B. Listen, Modals, Buttons usw. leicht einsetzbar und funktionieren auf anhieb.

Es werden außerdem eine beträchtliche Anzahl an hochwertigen Icons direkt mitgeliefert und durch das Aufbauen auf AngularJS kann eine Vielzahl an externen Libraries ohne große Umstände eingesetzt werden.

Der Schwerpunkt für das Einsatzgebiet liegt jedoch in der Entwicklung von simplen Single-Page Apps. Eine Anwendung wie floradex lässt sich zwar auch damit entwickeln, es müssen aber an vielen Stellen Umwege und Hindernisse in kauf genommen werden. Hier stellt sich die Frage, ob es nicht sinnvoller ist auf Ionic zu verzichten und nur AngularJS zu verwenden. Besonders bei Verwendung der bereitgestellten Komponenten nicht 100% in dem vorgesehen Kontext kam es zu unüberbrückbaren Problemen. (Wie z.B. das Springen des Popovers bei Auswahl eines Merkmals im Menü) H

Zum Zeitpunkt der Auswahl waren unsere Kenntnisse in Angular nicht ausreichend um in der kurzen Zeit eine fertige Anwendung zu schreiben. Jetzt hingegen wäre es effektiver diese direkt darin zu schreiben.

JSON als Dateiformt

Die Daten werden als einfache JSON Dateien gespeichert und komplett eingelesen. Dies funktioniert bei 35 Pflanzen sehr gut ist aber natürlich keine Lösung für größere Mengen. Hier wäre eine richtige Datenbank angemessen.

WebApp

Das Dynamic Binding (Listener auf Variablen und Funktionen ändern die Seite bei Veränderung dieser) in AngularJS ist zwar extrem hilfreich, sorgt aber dafür, dass größere Anwendungen wie Floradex immer langsamer werden, umso mehr Funktionalität hinzukommt.

Entweder muss dieser Prozess besser gehandhabt werden (Also die Listener Events von Hand senden, falls dies möglich ist?) oder die Anwendung sollte direkt als Native Anwendung geschrieben werden.

Zwar habe ich eingesehen, dass WebApps ein plausibler Weg sind um Anwendungen zu schreiben, aber sie haben einen Anwendungfall, der eingehalten werden muss. Kleine Anwendungen mit klaren Wegen und gut getrennter Funktionalität lassen sich so leicht auf mehrere Platformen übertragen.  Eine Anwendung wie Floradex, bei der immer sehr viel gleichzeitig auf einer Seite passiert leidet sehr unter den Limitierungen von HTML und JS.

Fazit

Dies mag alles sehr kritisch klingen, aber ich bin mit dem Ergebnis in dieser kurzen Zeit sehr zufrieden. Der Weg den wir eigeschlagen haben mag zwar nicht perfekt gewesen sein, aber ich habe sehr viel hinzugelernt.

 

30.06.2015 Odyssee Film Dreh

Wir haben uns vorgenommen einen Film über die App zu drehen, damit wir ihn optimal präsentieren können. Trotz des engen Zeitplans eines Semesterprojekts haben wir und einen Drehtag 5 Tage vor der Präsentation beim Codingdavinci Wettbewerb genommen. Um die App fertig für den Dreh zu machen, haben alle am Wochenende rangehauen und ein super Ergebnis rausgeholt.

Heute morgen noch schnell der letzte Feinschliff, und trotzdem waren alle ziemlich pünktlich, fit und motiviert am Botanischen Garten. Programmpunkte wie Aufbau, Drehbeginn usw. lagen unglaublicher Weise voll im Zeitplan, bis wir darauf hingewiesen wurden, dass unsere Drehgenehmigung leider nicht für die Wiesen gilt, auf den wir drehen wollen. Wir würden auf einer Wiese, die wahrscheinlich gleich wie alle anderen ihrer Art abgemäht würde wichtige Pflanzen zerstören. Auch mit Bitten und Betteln konnten wir nichts mehr machen.

DSC_4997b

DSC_4985b

Also mussten wir uns, trotz exzessiver und maximaler Vorbereitung meinerseits, um 13:00 auf den Weg zu der Location nach Oranienburg machen, sodass wir erst um 14:00 statt um 10:00 anfangen konnten zu drehen.

DSC_5010b

Alle sagten ihre Termine ab, mampften das tolle Catering von Paul auf und alles wieder von Anfang. Die Zeit und das sich ändernde Licht im Nacken haben alle mit Hochdruck dabei geholfen die lange Liste an Szenen abzuarbeiten.

DSC_5044b

Zum Einen haben wir eine Szene gedreht, bei der wir in der Natur arbeiten (Insekten usw. incl)

DSC_5083b

Gerade vor der Kamera stehen viel uns vieren sehr schwer: ob es nun darum ging einen Satz zu sich und seinen Teil des Projekts zu sagen oder darum wie ein echtes Team auszusehen. :)

DSC_5169b

Fazit:
  1. Das Problem mit der Drehgenehmigung und vielen weiteren Organisatorischen Problemen in Verbindung mit dem Botanischen Garten wären meiner Meinung nicht zustande gekommen, wenn wir von Anfang an des Projekts einen Betreuer gehabt hätten, der Lust, Zeit, Interesse und Befugnisse gehabt hätte
  2. Der Filmdreh war anstrengend aber trotzdem sehr witzig. Mit einem tollen Team ist eben alles gut!
Ein großes Dankeschön an
  • Die beiden Hauptdarsteller Willy und Sefani: Sie haben nicht nur ihre Rollen als Schüler perfekt umgesetzt, sondern auch noch bei Ton und Licht geholfen haben und dazu die tollen Making Off Bilder gemacht.
  • Und meinen Freund André: Er hat sich komplett um Ton und Kamera und zum Schluss auch noch um dem Schnitt des Films gekümmert.

Film Vorbereitungen

Die Dokumentation des Projektes nimmt schon Formen an, bevor die App wirklich fertig ist:

Heute habe ich mit meinem Freund André das Filmequipment aus der Hochschule und von einem Kumpel geholt. Darauf hin wurde in unserem Wohnzimmer schon mal trocken geprobt und vor allem die Ton Einstellungen gecheckt.

Der Laptop ist auch vorbereitet mit Adobe 30 Tage Testversionen, damit nächste Woche alles glatt läuft.

Building a Wiki

Ursprünglich hat das Konzept vorgesehen, dass jeder Datensatz Fließtexte bereitstellt, die alle Informationen rund um die Pflanze beinhalteten und über die Herbariumsbilder der Ergebnisliste, die Wortsuche oder die Favoritenfunktion aufrufbar ist. Inzwischen haben wir uns dafür entschieden eine Auswahl an Informationen zu treffen und für jedes Datum ein eigenes XML-Tag führen. Abgedeckt werden dabei Verbreitungsgebiete, Blütezeit, Angaben zur volksmedizinischen Verwendung, Essbarkeit und Ähnlichem. Außerdem ermöglichen Tags mit Geokoordinaten das Anzeigen von Orten via GoogleMaps.

tmp3

Ein weiteres mal gilt es also nun die vorhandenen Daten zu erweitern und mit zusätzlichen Informationen anzureichern. Anschließend müssen die Inhalte nochmal dahingegend überarbeitet werden, dass diese für das Layout der Informationsseite optimiert werden und Strings, Zeilenumbrüche u.Ä. korrekt dargestellt werden.

 

Fundament und erster Stock stehen, jetzt muss da noch mehr drauf

Die Idee und Prototypen existieren schon eine ganze Weile und haben eine lange Reifung hinter sich. Seit einigen Wochen funktioniert die Webapp auch schon wirklich, auch wenn einige Funktionen noch nicht oder nicht vollständig implementiert sind. Auf diese werden wir uns jetzt verstärkt konzentrieren.
Neben dem Rest der Implementierung wartet noch die Entscheidung auf uns, welche Lizenz(en) wir für den Quellcode und die Bilder benutzen wollen.

Erster funktionaler Prototyp

Floradex basiert momentan auf einem Gerüst aus Ionic, AngularJS und JSON Dateien. Diese JSON Datein werden von einem eigenen Java Programm erstellt. Dieses Tool vereint die Daten des Herbariums (Katalog, Daten und Bilder) mit den Klassifizierungen der jeweiligen Pflanzen von Tropicos.org und unserem eigenen Pflanzenformat.

Grundsätzlich benötigt floradex für jede Pflanze eine Liste der Pflanzenmerkmale. Diese Merkmale sind leider in keiner Datenbank für uns automatisch abgreifbar und müssen von Hand gesammelt werden. Für diesen Zweck haben wir ein Dateiformat entwickelt.

Screenshot_10_06_15_13_30

Dieses Format wird von einem Tool ausgelesen und steht diesem dann als Baum zur Verfügung. Dieses Format wird außerdem direkt als JSON ausgegeben um das Menü mit Daten zu füttern.

Außerdem unternehmen wir im Moment Anstrengungen einen Parser zu schreiben, der diese Merkmale automatisch aus einer Seite zu diesem Thema ausließt.

Für alle durch dieses Format bereitgestellten Pflanzen werden dann offline aus dem XML Katalog des Herbariums die passenden Pflanzen ausgelesen und unter Verwendung der bereitgestellten ID (wie z.B. B100000001 für die Pflanze Asyneuma compactum var. eriocarpum Parolly) die Metadaten über den online Service des BGBM heruntergeladen und hinzugefügt. Diese ID wird auch in der Anwendung selbst verwendet um einzelne Pflanzen zu identifizieren und die Verbindung zwischen verschiedenen Daten herzustellen.

Zusätzlich werden diese Pflanzendaten durch Infomationen von Tropicos.org angereichter. Diese Seite stellt die Taxonomie für Pflanzen bereit und ermöglicht zugriff über ein API.

java-tools

Als Möglichkeiten für die Bereitstellung dieser gesammelten Daten kamen eine Datenbank und feste Dateien in Frage. Eine Datenbank wäre langfristig leichter mit Daten zu ergänzen, würden aber auch den Arbeitsaufwand erhöhen. Aus diesem Grund haben wir uns im Rahmen des Hackathons dafür entschieden die Daten einfach als JSON zu speichern und diese in der Anwendung einzulesen. Dies hat zwar ein paar offensichtliche Nachteile (Gesamte Daten müssen bei Start der Anwendung eingelesen werden, neue Daten ersetzen immer alte komplett, keine SQL Magie, usw.) ist aber für unseren kleinen Datensatz kein Problem. Die WebApp wurde so gestaltet, dass der Datenursprung bei Bedarf auch nachträglich  verändert werden kann.

java-tools

Zusätzlich zu den Metadaten werden auch die von der BGBM bereitgestellten Bilder (Und damit der im Rahmen des Coding Da Vinci genutzte Datensatz) heruntergeladen, zu einem Rechteck gestutzt und in dem Format 25×25, 50×50, 100×100 und 200×200 gespeichert (Auch hier wird die ID der einzelnen Pflanzen verwendet um die Bilder zu benennen und sie so benutzbar macht). Diese werden in der WebApp als Thumbnails für die Ergebnisse genutzt, damit die (sehr großen) Bilder der BGMG .

thumbs

Diese gesammelten Daten (Alle Pflanzendaten und deren Merkmale, die Menüstruktur und die Thumbnails) werden dann von der WebApp eingelesen.

Diese WebApp verwendet das Framework Ionic, welches auf AngularJS basiert (welches wiederum HTML, CSS und JS verwendet).

 

zuordnungdatenDort wird die JSON Datei der Liste aller Pflanzenmerkmale verwendet um das Menü unten mit Daten zu füttern. Bei Auswahl eines Merkmals werden alle Pflanzen die diesem Merkmal zugeordnet wurden in der rechten Ergebnisleiste angezeigt. Diese besteht aus den Thumbnails und verwendet je nach Anzahl der Ergebnisse eine andere Größe dieser, damit immer alle Ergebnisse sichtbar sind.

Die Auswahl mehrerer Merkmale schließt Pflanzen nicht aus, sonder fügt immer mehr den Ergebnissen hinzu. Jedes Ergebnis hat ein Gewicht welches durch die Anzahl der zutreffenden Merkmale charakterisiert wird. So kann die passende Pflanze auch gefunden werden, obwohl man ein falsches Merkmal ausgewählt hat.

Die Auswahl eines Ergebnisses legt eine modale Ergebnisseite über die Anwendung, in welcher die Metadaten der Pflanzen  und das Hochauflösende Bilder der BGBM angezeigt werden.

Zum vollständigen Prototyp fehlen noch die Bilder für die Baukasten-Vorschau-Ansicht in der Mitte, welche helfen solle, die ausgewählten Merkmale besser zu identifizieren und die Bildchen für das Menü im Unteren Bereich.

Der aktuelle (lauffähige) Prototyp kann immer hier eingesehen werden.

Bye, bye Superblütler!

Das Bestimmungstool für Pflanzen bedarf als Grundfunktion der App besondere Sorgfalt in Strukturierung und Gestaltung. Die Baukastenfunktion soll es den Nutzern ermöglichen einen einfachen Zugang zur Thematik erreichen zu können. Lineare Bestimmungsmethoden setzen vor allem voraus detailliertes und vollständiges Wissen über die Charakteristiken von Pflanzen zu haben um so die Bestimmung zu einem korrekten Ergebnis führen zu können.

Unser alternativer Ansatz sieht deshalb vor die Merkmale der Pflanze flexibel auszuwählen um so die möglichen Ergebnisse einschränken zu können und die Bestimmung auch für Nicht-Geschulte zum Erfolg zu führen.

Das Hauptaugenmerk liegt deshalb auf der Strukturierung und Auswahl der möglichen Kennzeichen, die als Eigenschaften der Pflanzen auftreten können. Diese sind nicht normiert und je nach Quelle unterscheiden sich Bezeichnungen oder Strukturierungen der Kategorien, sodass es gilt ein durchdachtes System für unsere Anwendung zu definieren, die konsistent beibehalten wird. Durch den Input der Interviews mit den Botanikern des BGBM und der bereits vorhandenen Literatur habe ich nach und nach eine Gliederung der Merkmale erarbeiten können, die für unsere Anwendung geeignet ist. In enger Zusammenarbeit mit Anne war dabei immer der Gedanke im Hinterkopf, dass die Auswahl und die spätere Gestaltung der Symbole im Baukasten leicht verständlich sein soll. Wir haben uns dafür entschieden die Bestimmung in drei Teile zu gliedern: die Pflanze als Ganzes, sowie Details zu jeweils Blättern und Blüten. Jede dieser drei Kategorien hat dabei wiederum vier Untermenüs, die die Merkmale enthalten und so eine brauchbare flache Hierarchie bilden.

Nach dem Aufstellen der Menüstruktur und einem Testdatensatz war es nun endlich möglich, die bisherige Platzhalterstruktur der App zu ersetzen und zum ersten Mal die Hauptfunktion erleben zu können. Durch fehlende Daten und die bisherige Struktur, bei dem wir uns auf erfundene Bezeichnungen wie Superblütler, Superrundblüte, Superkopf u.Ä. beschränken mussten, war dies bisher nicht erreichbar.

Es gilt nun weitere Datensätze zu generieren, die für unsere Anwendung geeignet sind. Wie sich bereits früh angedeutet hat heißt dies googeln, googeln, googeln – denn es ließ sich keine Datenbank auftreiben, die die entsprechenden Informationen gebündelt zur Verfügung stellt. Deshalb war es meine Aufgabe diese zu sammeln, auch wenn es von Hand geschehen muss. Geholfen hat dabei der Parser von Philipp, der eine solide Basis geboten hat.

Darüber hinaus habe ich darauf geachtet, dass die Liste der Pflanzen, die wir anfangs zur Verfügung stellen wollen, geeignet ist für den Zweck einer Schulexkursion – also fürs erste ausschließlich Pflanzen beinhaltet, die in der Region Berlin/Brandenburg auftreten. Die Auswahl erfolgt daher größtenteils anhand einer Publikation der Senatsverwaltung für Stadtentwicklung und Umwelt, die sich mit der biologischen Vielfalt Berlins beschäftigt.

Die Zielsetzung für den Abschluss des Projektes ist fürs Erste die vollständige Aufstellung der Merkmale für 25 Pflanzen.

04.+05.06.2015 Botanischer Garten Botanisches Museum

Seit Anfang des Projektes habe ich mich bemüht konkrete und kompetente Ansprechpartner im BGBM zu finden. Endlich habe ich es geschafft uns so konnten Philipp und ich am Donnerstag und Freitag noch wichtige Recherche machen. Wir konnten direkt nacheinander 3 wichtige Punkte abarbeiten.

1. Interviews und Testing mit Botanikern

DSC_4557b

DSC_4565b

Pflanzenbestimmung ist ein hoch komplexes Thema, das wir mit unserer App für Schüler auf ein verständliches Maß herunter brechen wollen, aber gleichzeitig wissenschaftlich korrekt bleiben wollen. Deshalb haben wir 2 Botaniker interviewt:

Dr. Sabine von Mering und Dr. Tilo Henning arbeiten an verschiedenen Themen im Botanischen Museum. Ihre Arbeitsplätze sind augenscheinlich Schreibtisch, Papierkram und Computer. Viel der Arbeit wird digital bearbeitet.

Bei dem User Test unseres Papierprototyps sind wir auf keinerlei Probleme gestoßen. Beide haben völlig ohne zu zögern unsere Beispielpflanze – den Löwenzahn – anhand der vorbereiteten Merkmale bestimmt. Prinzip und Workflow der App waren für sie schlüssig. Denn sie arbeiten tagtäglich mit diesen Inhalten. Sie fanden beide unser Konzept gut.

Am Freitag Morgen hatten wir unseren zweiten Termin, bei dem wir Menüstruktur und Symbole besprochen und ausgewählt haben. Aus diesem wilden Gekritzel haben Paul und ich dann eine Menüstruktur erarbeitet, die Immanuel dann in unser Frontend implementieren kann.

10506841

 

2. Botanisches Museum

DSC_4594b

DSC_4595b

Im gleichen Haus wie die Büros von unseren beiden Befragten befindet sich das Botanische Museum. Die Inhalte der Ausstellung sind sehr ansprechend aufbereitet. Es gibt sowohl ganz klassische Exponate wie Herbariumsbelege, Schaubilder und ganz spannende überlebensgroße 3D Modelle, als auch interaktive Exponate, die den Besucher zum Anfassen und Ausprobieren animieren.

DSC_4581b

DSC_4583b

DSC_4588b

DSC_4605b

 

 

3. Botanischer Garten

DSC_4611b

DSC_4612b

DSC_4622b

Zuletzt haben wir die schöne Atmosphäre im Botanischen Garten genossen. Jede Pflanze hat einen Platz an einem Ort, der ihrem natürlichen Lebensraum am nächsten kommt. Zudem bekommt man eine Liste mit Pflanzen in dem jeweiligen Gebiet und kann sie durch eine Beschilderung wieder finden.

Schaffe, schaffe Webapp baue

In der vergangenen Woche haben wir uns mit der Menüstruktur und den einzelnen Funktionen unserer Webapp beschäftigt. Das resultierte dann in einem neuen Papier Prototyp von Anne. Zu diesem gab es während des heutigen Projekttreffens wieder hilfreiches Feedback, diesesmal von  Claudia und Kerstin.

Animation des Papierprototyps 2.2 (Bitte auf das Bild klicken)

Papierprototyp-2.2

15.06.03 2. testing 3 floradex (3)b

15.06.03 2. testing 3 floradex (2)b

Ansonsten haben wir uns hauptsächlich in das Ionic Framework eingearbeitet, damit wir die Funktionen implementieren können. An unserer Webapp hat sich auch gleich funktional einiges getan.

Nebenbei gab es auch etwas „klassische“ Programmierarbeit. Das Backend wurde nämlich um ein weiteres Tool, namentlich um einen Parser für Pflanzenmerkmale erweitert.

Das, was einen Haufen Arbeit machen, aber keiner sieht

Nach harter Arbeit, vielen Abstimmungen und noch mehr gehacke haben wir es endlich geschafft unser Backend so fertig zu stellen, dass wir mit ausreichend Daten, Dateien und Informationen versorgt werden. Dadurch können wir jetzt unsere Kräfte auf das Frontend richten.

Die Klassen und deren Aufgaben standen dabei schon relativ früh in der Entwicklung fest und haben sich bisher kaum verändert.

Bei der Entwicklung ging es uns (zeitbedingt) zuerst um Schnelligkeit und weniger um ästhetische Belange oder Allgemeingültigkeit der implementierten Werkzeuge. Die Einrichtung von Schnittstellen zwischen den einzelnen Modulen war unproblematisch und ging geräuschlos vonstatten. Denn wir haben Beispiele in den Quellcode eingebaut und einfach besprochen, was benötigt wird.