erdfisch-Blog

Since http://drupal.org/node/1567500 Drupal 8 started to use PHPUnit as it's unit test framework. One advantage of PHPUnit is that there are tools around which support it already.

One example is phpstorm
which is a great IDE for php developers.

This blog post describes how you can setup to run phpunit in phpstorm.

Step 1: Create a new run configuration

You start by clicking on the arrow in the UI and choose "Edit Configuration". (See Screenshot).

Step 2: Create a new phpunit configuration

You continue with clicking on the green "plus" on the left top
corner. There you choose phpunit.

Step 3: Configure it properly

The tricky part is to configure it properly. Just use "defined in the configuration file", specify the right location and add the testrunner code. (For lazy people, just use the code below )

/var/www/d8/core/phpunit.xml.dist

-d auto_prepend_file=/var/www/d8/core/tests/bootstrap.php

Step 4: Profit!

From now on you don't even have to leave your IDE anymore just to develop stuff. Another reason why we should start to write more and more tests in PHPUnit.

Please comment and share other tips with phpunit/phpstorm in the comments.

AnhangGrösse phpunit1.png7.63 KB phpunit2.png8.63 KB phpunit3.png23.25 KB phpunit4.png30.01 KB

Mit der Veröffentlichung von Drupal 8 erwartet uns einiges an Neuheiten. Um welche es sich genau handelt wird sich wohl erst nach den Feature Freezes (Zeitplan ) herausstellen. Jedoch gibt es schon Anzeichen dafür, was auf die verschiedenen Nutzergruppen von Drupal 8 zukommt.

Der Anwender

Das Bearbeiten von Content wird deutlich vereinfacht. Durch einen Edit-Button im oberen rechten Teil des Menüs kann man direkt bei der Ansicht durch Inline Editing Felder bearbeiten.

Der Weg über das Backend entfällt also in gewissem Maße. Desweiteren lohnt es sich, die Projekt-Seite der Dupal Initiative für User-Experience anzuschauen und mitzuwirken. Die Initiative hat es sich zur Aufgabe gemacht, das Erstellen von Content für den Nutzer zu vereinfachen. Ein zentrales Anliegen wurde dabei auch schon berücksichtigt: mit dem Release von Drupal 8 wird höchstwahrscheinlich der WYSIWYG Editor fester Bestandteil von Drupal sein. In der Dev-Version befindet er sich bereits im Core.

Der Entwickler

Dieser wird feststellen, dass nun sehr viel auf objektorientiertes Programmieren gesetzt wird. Zudem werden Configs eingebunden, welches ein Schritt weg von dem Speichern von Einstellungen in der Datenbank ist und das Deployment von Seiten somit vereinfacht. Live-Änderungen werden in einem „staging“-Verzeichnis gespeichert, Default Einstellungen sind im „active“-Verzeichnis zu finden. Schaut man sich die Dateien an, so stellt man fest, dass die Informationen in YAML vorliegen, dementsprechend haben die Dateien auch die Endung .yml.

Diese Komponente ist nur ein Aspekt von der Config-Philosophie von Drupal 8, bei vielen Aspekten auf das Symfony-Framework . Ebenfalls verwendet wird der Serializer . Dieser sorgt für die Konvertierung von Dateien in Drupal. Ein großer Bestandteil von Drupal 8 wird auch die Schittstelleneinbindung sein. Config-, State- und Entity API sorgen für einfache Kommunikation von Drupal zu Nicht-Drupal und von Drupal zu Drupal. Felder werden wohl in Zukunft erweiterbar durch Plugins. Wie das ganze dann aussehen soll, sieht man in folgender Grafik mit dem Titel „Overview of the pluginification of Field API in Drupal 8 “ des Drupal Nutzers „fgm“.

Eine weitere Verbesserung, die wie das meiste wohl auf dem ersten Blick ziemlich komplex erscheint, ist die Dependency Injection. Dadurch erhalten die Module bereits alle nötigen Abhängigkeiten und müssen diese nicht erst über ein .info-File beziehen. Sie müssen also nicht wissen wo sich ihre Abhängigkeiten befinden. Daniel Wehner fand mit "einem Auto welches nicht mehr tanken gehen muss, da es bereits eine eingebaute Tankstelle besitzt", eine schöne Analogie dazu. Wo auch immer diese Tankstelle dann verbaut sein sollte...

Der Themer

Beim Theming hat sich auch einiges getan. Als zukünftige Template-Engine wird wahrscheinlich Twig zum Einsatz kommen, welches den Einstieg für HTML&CSS Begeisterte ohne tiefere PHP Kenntnissen vereinfachen soll.

Ebenfalls sind Standards für die CSS Stylesheets geplant, welche vorerst in einem CSS Draft festgehalten werden. Ein großes Thema wird auch „Responsive Design“ für Drupal sein. Die Menü-Oberfläche lässt sich wunderbar auf dem Smartphone bedienen, da diese skaliert und bei kleineren Viewports auf Icons statt beschrifteten Schaltflächen setzt. Auch Tabellen wurden responsive gestaltet. Zieht man das Fenster bei der Nutzung von Views kleiner, blenden sich "unwichtigere" Tabellenspalten von selbst aus, welche sich jedoch durch einen Klick auch wieder einblenden lassen. Das bekannte Drupal Standard-Theme „Bartik “ reagiert auch in der jetzigen Dev-Version responsive und wird schon bald in Twig konvertiert werden.

Fazit

Die Entwicklung rund um Drupal 8 schreitet also voran und Hilfe ist gerne gesehen. Es wird noch ein längerer Weg sein bis zum Release, doch es verspricht jetzt schon viele gute Neuerungen. Ich habe jedoch Bedenken, dass die Lern-Kurve wieder einmal steigt für Neueinsteiger, welche jedoch von einem Community gesteuerten Projekt wie Drupal dringend benötigt werden. Ausreichend Dokumentation wird nötig sein.

Weitere Bilder: 

Was ist Balsamiq?

"Life's too short for bad software". Dies ist der Leitspruch der Entwicklergruppe rund um Balsamiq .
Diese haben es sich zur Aufgabe gemacht, ein Programm zum Gestalten von Wireframes zu erstellen. Dies wird durch einen Drag-and-Drop WYSIWYG Editor realisiert. Balsamiq gibt es als Desktop-Version für Windows, Mac OS und Linux. Zudem besteht die Möglichkeit das Mockup-Tool als Plugin für Google Drive, Confluence, JIRA, FogBugz oder Xwiki einzusetzen.

Installation unter Ubuntu

Als ich Balsamiq unter Ubuntu aufsetzen wollte, stellte ich fest dass dieses Adobe AIR benötigt, welches von Adobe nicht mehr für Linux entwickelt wird. Bei der Installation einer älteren AIR Version (Version 2.6.0 )
bekam ich folgenden Fehler „AdobeAIRInstaller.bin: No such file or directory“.
Dies lässt sich durch die Installation der ia32-Bibliotheken beheben (sudo apt-get install ia32-libs).
Nach dem Setzen von chmod +x und der Installation der Bibliotheken, sollte man darauf achten Gnome Keyring oder KDE Kwallet zu installieren. Dabei erwies sich diese Seite als hilfreich. Beim Erzeugen des Symbolic-Links nicht vergessen, auch die *.so.0.2.0-Datei zu verknüpfen. Nun erneut den Adobe AIR Installer aufrufen, dann sollte sich Balsamiq ohne weiteres installieren lassen.

Arbeiten mit Balsamiq

Wenn nun alles installiert ist, erscheint nach dem Starten auch schon die Balsamiq Oberfläche.

Hier werden verschiedene Elemente vorgegeben, welche durch Doppelklick oder Drag and Drop in das untere Wireframe-Fenster abgelegt werden können. Balsamiq bietet im Grunde alles was benötigt wird; von den wichtigen Bestandteilen wie z.B Buttons, Links oder Checkboxen bis hin zum Element bei dem man sich fragt ob man es je benötigt und dann doch glücklich ist, wenn man es hat (Street Map, verschiedene Charts). Dies alles lässt sich sowohl für das Browser-Fenster (Größe anpassbar) wie auch für das iPhone mit eigenem Mockup erstellen.

Balsamiq als Vermittler

Möchte man dem Kunden verdeutlichen, welche Zwecke einzelne Wireframe-Elemente besitzen, lässt sich dies über Comments/Stickys realisieren. Diese lassen sich auch außerhalb des Browser-Mockups anlegen und mit Pfeilen auf das passende Element beziehen.

Dank eines Tab-Systems ist es auch möglich, mehrere Mockups im selben Fenster zu verwalten. Balsamiq Studios ermöglicht es dem Nutzer, diese miteinander zu verlinken. Diese Option lässt sich durch Klicken auf das Element (Button oder z.B a-link) und dann unter „Link“ einstellen.

Befinden sich die Wireframes nun im selben Ordner, kann man diese auswählen, ähnlich wie unten in der Tab-Ansicht. Wechselt man nun zur Vollansicht mit CTRL+F, kann der Kunde sich selbst durch die Seite navigieren und muss dabei nicht von Hand jedes Wireframe neu aufrufen.

Weiterverarbeitung mit Napkee

Napkee ist eine Anwendung, welche die erstellten Wireframes von Balsamiq in HTML darstellen kann. Nach dem Öffnen von Napkee lassen sich die *.bmml (Balsamiq Mockups Markup Language) Dateien importieren. Bereits getätigte Verlinkungen werden übernommen und lassen sich später im HTML&JS&CSS Format oder für Adobe Flex 3 exportieren. Napkee legt dann einen weiteren Ordner an und legt dort diese Dateien ab.

Ein schneller Blick in den Datei-Browser und es fällt auf, dass Napkee wohl eher eine Lösung für kleinere Projekte oder wahrscheinlich sinnvoller für Leute geeignet ist, die wenig Erfahrung mit HTML und CSS besitzen. Die Balsamiq Elemente werden als swf-Datei importiert. Schaut man sich den Quellcode der HTML Dateien an fällt auf, dass Napkee weitestgehend auch mit Tabellen arbeitet und das Stylesheet direkt in die HTML-Datei integriert. Die Klassen werden aufsteigend mit einem Nap-Prefix erstellt (z.B nap1 , nap2c, nap164). Möchte man dies alles nacharbeiten und übersichtlicher gestalten, erwartet einen viel Arbeit. Deshalb sollte man in Betracht ziehen, Napkee hauptsächlich als Vergleichsmöglichkeit einzubeziehen.

Zum Abschluss noch ein Blick in den Browser. Der Nachteil zur Ansicht in Balsamiq ist, dass funktionierende Links hier nicht besonders hervorgehoben werden. So kann es vorkommen dass man den ein oder anderen Klick ohne sichtbare Änderung tätigt, bis man dann endlich einen weiterführenden Link gefunden hat (diese wären in Balsamiq rot hinterlegt). Zusätzlich war auffällig dass manche Links oder Texte sich gegenseitig überlagerten, dies könnte aber auch mit nebenstehenden Elementen wie z.B Pfeilen zusammenhängen. Ansonsten baut Napkee optisch die Seite recht zuverlässig nach.

Fazit

Balsamiq ist meiner Meinung nach eine einfache und zuverlässige Möglichkeit mit Wireframes zu arbeiten und letztendlich diese auch zu präsentieren. Es bietet dem Nutzer alles was er braucht und verzichtet dabei auf komplexe Menüführung. Die Darstellung im Skizzen-ähnlichen Stil ist gut gewählt, um nicht zu weit in den Gestaltungprozess einzugreifen. Die Weiterverarbeitung mit Napkee empfinde ich nur als Vergleichsmöglichkeit sinnvoll. Es sei denn man ist mit HTML und CSS nicht gut vertraut und möchte kleinere Seiten realisieren, welche mit keiner bis wenig Nacharbeit verbunden sind. Dennoch bin ich gespannt wie es sich weiterentwickelt und hoffe auf eine Möglichkeit, CSS-Klassen im Programm direkt zu benennen und den Code zu vereinfachen.