Offline runnable Thesaurus Training Web App – Yii

As the framework for the offline runnable thesaurus training web app I chose Yii (Yes it is). According to the framework survey, Yii is now the most favored framework of 2015. Had a I googled a bit further I had found Lavarel as the most popular one, based on a survey made by Looking at the Google results listing the frameworks itself there are Symfony and Lavarel. Probably there ist no Yii at the very top of the search results because it is younger and Google weights good old websites heavier. It’s a good thing to choose a framework that stood the test, like Laravel and Symfony. You will find information easier.

Yii supports the active record concept. I found that very comfortable. You just write model classes which represents and maps to a table. All you have to do is specifying the relation the table has to other tables. You don’t have to write any properties but can access colums by dynamically created properties of that class at runtime.
I am already familiar with the MVC model. It’s the very same as in ASP.NET MVC. In the URL adress you route to a controller and an action which is a method on that controller. Then the controller may take a parameter and finally builds a viewmodel from a model or gives the model directly to a view, which renders what it gets from the controller using its view logic.
The URL can be beautified. I am not finished with that, but grasped the method, how to do it.

Offline runnable Thesaurus Training Web App – PHP???

I am having a party. I managed to deploy the result of the first iteration of the offline runnable PHP thesaurus training web app on openshift.

Why PHP? And why is PHP so popular? According to Wikipedia, PHP is used for 82% of all websites. That means, only every fifth website you are jumping on is not written in PHP. That’s quite a bit of popularity for a language that has such a bad reputation. The language is said to have a bad design. For example objects were introduced many years after its creators gave birth to it. Now you can put your whole code into global functions and global variables. You can even mix your whole PHP code with HTML output in each page, like in JSP. Like JSP is now outperformed by JSF, which follows an MVC approach in Java, most frameworks for PHP are also MVC based. In PHP you can do both. You can also encapsulate code which belongs together in classes due to its high cohesion. You are free to write ugly code and write good code. In the Java world you are forced into better code by design. But you can also write classes with many thousands of lines of code. This is just one example of bad code. The fast way is always seducing and looking for victims belonging to each programming language fraction. Bad programming style is doable in every language, especially in PHP. That’s why PHP has a bad reputation. It is so easy to write a program und do not follow any rules of modern programming and it’s the language of script kiddies, since it is running on every server. But you can also do it professionally for a living. That’s my aim and therefore I find PHP so interesting. PHP is so widely spread that there are hardcore software development projects as well as small website buildings. When I am looking for a part time job I can only see PHP jobs. That must be rewarded and now I am going to write some projects in PHP to be able to sell myself as a PHP developer. There are other good sides of PHP that many developers find bad. PHP is not a typed language. The type of data is determined by the interpreter. That leads to the next characteristic. PHP is an interpreted language, thus code is not compiled but interpreted at runtime. Potentially, PHP programs are less fast, so raw performance cannot be the design decision for creating interpreted languages. The advantage is, you just change the code and run it! My last job was to develop a JSF GUI on a JBOSS server with many java projects which depended on each other, a monolithic system, crafted in many years by many developers under an immense amount of time pressure. Often, an SVN update led to a compiling orgy. Even, if you just have to compile only the project you are currently working on, each time you change code, you have to compile, stop the server, deploy it, start the server again and crawl to your created function in the application to test it, only to find that you made a small mistake and must do the whole cycle from the beginning. It’s a pain to develop a user interface in this way. When I develop my PHP app, I change the file and press F5 or whatever shortcut to refresh the webpage and can watch the change immediately.

Progressive Enhancement of a datadriven offline Web App

If you want to develop a data driven offline web app, you will nowadays use IndexedDB, since WebSQL is deprecated. In the native world where things are perfect you will create a download for a SQLite file, which can then be queried. In the HTML5 world you have to populate the indexed database in two steps. At first, the data must be downloaded and then this data has to be inserted via Javascript. This is somewhat cumbersome, since it lets the user wait until your highly efficient Javascript code managed to provide the offline feature. If there are a few MB of data to be inserted and there are millions of records to be created in the object stores of the database, Javascript takes its time, especially on a smartphone. I made an insert test with about 800.000 records on my macbook pro with SSD and a powerful i5 processor and it still took up to two minutes. The same procedure took 15 minutes on an android chrome browser. I did not test all different browsers on all different platforms yet. This is another problem to solve, since not every browser has the same implementation of IndexedDB. You see, while developing web apps is strategically a good choice, you start developing the data driven offline web application with a handicap. How to solve this problem? This is where progressive enhancement comes into play. Like every principle there are advocates and opponents. Despite of having more code to write to progressively enhance the user experience of a web app I can only see advantages. Concerning our problem populating the IndexedDB on the client side, why not let the user request the content from the server, until all needed data is available on the client and then query against the local database and update the page via Javascript. Web users are used to get data from the cloud be it via ajax or by a page reload. How happy are they if from a certain moment on the app works offline. They feel like on an airplane, that took off!
There are other advantages of progressive enhancement. It is important for optimizing your website for search engines (SEO). Search engine robots which visit your pages to retrieve content to their indexes are not willing to interprete Javascript. So this is another reason to let the website work without Javascript. Javascript might really enhance the user experience. But if your content can be retrieved by good old reloading the page from the server, the search engine robots have much to eat and love your website. You can make your whole database available for search engines and in this way generate many thousands of web pages in the index. This increases the number of potential visitors enormously.
Another reason to enhance a website by Javascript functionality instead of depending on it is the increasing complexity of Javascript code. Since Javascript became such a popular and important language to build websites, more and more code will be written and more and more errors are made. If this code breaks, the functionality is still available and there is more relaxation to fix it.
As a side effect is the web app usable for the 1% of users who have willingly or under constraint disabled Javascript.

Let Font Size change in Smartphone Apps

I am experiencing this for Android today but I wonder if does not apply to iPhone or web apps as well. For Android it is a big headache to give users a chance to change font sizes app wide. There are not many google results concerning this topic. How are developers trying to achieve this? The first way is to manipulate or overwrite each and every TextView of an app and set the font size according to user preferences. This assumes that you have all TextViews to manipulate. But in many cases this class is hidden at first glance. You have to find out how to write a custom layout for preferences or dialogs to name a few. Are you sure that you got each text in your application as a TextView? No hidden system font in a hidden TextView?
You can also create your own themes with its special font sizes. But font size is not the only preference witch determines a theme. Imagine you have a dark theme and a light theme. Imagine you have four different font sizes for each theme. You end up with eight themes for only two preferences. Add the next preference and you have much work to do. Since themes are static and can’t be changed at runtime it kills efficiency.
So why not set the font size at OS level? If I were disabled or could not read small fonts, I would try to solve this problem systematically. I still do not know iOS very good. Android has a preference at OS level to set the font size system wide for all apps. You don’t have to set font sizes for each app individually. Accordingly Chrome has a setting to increase the font size for all pages systematically. I am sure iOS will allow the same. Seems to be the best option for each party, users and developers!

App Development Machine

What computer should you buy? If you are going to be an app developer, you should buy a Mac. Apps are small programs not only running on smartphones. There are web apps too. ‘App’ is a smartly developed word which is an abbreviation of ‘Application’. The small portion of letters symbolizes that it is a relatively small application. If you want to develop apps for iPhone or Mac OS there is no other way than to buy a Mac Computer. But with a Mac you can also develop for Android, since Android Studio or outdated Eclipse are in Java. So with a Mac you can create Apps for much over 90% of mobile native platforms. If you really want to develop the big applications that run on the desktop, buy a windows computer. I want to develop apps and bought a Macbook Pro with the new retina display. This display is revolutionary and turns the monitor market completely. Retina displays are so crisp that whenever you look at it for the first time, you are trapped. And whenever you look at a screen with lower resolution from this time on you start to see blurry fonts. Especially if you look at an external screen that you successfully managed to connect to your Mac (via Display Port, not HDMI). Fonts which look crisp on a small notebook monitor with retina resolution look very blurry on an external monitor of much bigger size and much lower resolution. The potential of a retina Mac is just mistreated by an external screen that has much much less DPI (dots per inch). The solution is to buy an equally high resoluted external display, which means 4k or WQHD. I decided for the WQHD monitor Dell U2515H. It is under the most affordable displays. And now I miss to set the DPI under Mac OS. You can do that in Linux and in Windows, resizing the whole UI according to your needs. Not being able to modify UI structure in Mac OS is a very poor fact for Apple which claims to have the most user friendly operating systems. I have read many many complaints first about the unbearable blurry fonts on a very normal resoluted display connected to a retina mac and second about the missing possibility to adapt DPI to your personal preference. Now nearly each good programm you run on the Mac will give you the possibility to modify the font size. But you can’t change system fonts. So, after I do everything I can to adapt the font size to the resolution there are resistent fonts that remain unchanged. Overall I am satisfied, since I have the original notebook display that can help handling resistent fonts. If I look at my external screen as a gift, I see 97% very crisp fonts and additional 3% very crisp and very small menues which can be represented on my native screen as well. No reason to grumble!

One way to change the look of fonts is to influence the rate of anti aliasing or AppleFontSmoothing, how Apple calls it:

defaults write NSGlobalDomain AppleFontSmoothing -integer x

where x is a number between 0 and 4. 0 is the least smoothing, and 4 the most. Another way is to play with TinkerTool. But don’t expect wonders. In earlier versions of Mac OS it might have been able to change system fonts, in Mac OS 10.10 (Yosemite) it can’t

Unit-Tests ala Schablonenmethode

Richtig Spaß macht eine Website, wenn man sich ein paar Cent Spielgeld verdient. Ich habe mich früher einmal mit der Amazon Product Advertising API beschäftigt. Die API hat sich etwas geändert. Man bekommt weniger Daten von Amazon und soll Kunden früher zur Ziel-Website umleiten. Reviews kommen nicht mehr als Text per herüber, sondern man bekommt einen Link, dessen Inhalt man in einem HTML-IFrame einbinden kann. Anfragen müssen neuerdings zwingend mit einem privaten Schlüssel signiert abgeschickt werden. Die nötigen XML-Parsereien entwickele ich testgetrieben. Ich schreibe zuerste einen Test, dann programmiere ich gegen den Test. Bei solch einer hohen Testabdeckung hat man die Sicherheit, dass beim Refaktorisieren nichts kaputt geht. In der reinen Theorie sollten Unit-Tests nur Logik testen, also unabhängig von einer Datenquelle wie Festplatte oder Internet sein. Ich finde das aber zu extrem. Ich will von Amazon ausgehend von einer Klassifikationsnummer (Browsenode) die untergeordneten Klassifikationsnummern und die Bestseller dieser Browsenodes. Ich erstelle mir also eine Klasse Browsenode, deren Instanz mir untergeordnete Browsenode-Objekte zurückgibt. Außerdem schreibe ich die Klasse Topseller, die die Attribute eines Topsellers speichert, und ein Browsenode-Objekt soll mir seine Topseller liefern. Zuerst mache ich in meinen Tests echte Anfragen an den Amazon-Server. Am nächsten Tag stelle ich aber fest, dass die Bestseller sich schon geändert haben. So schnell kann es gehen. Was tun? Ich ändere meine Klasse Browsenode ala Schablonenmethode-Entwurfsmuster (template method design pattern) in eine abstrakte Klasse um und deklariere die Methode, die mir Unterobjekte zurück liefert, sowie die Methode, die mir für verschiedene Anfrage-Parameter ein XML-Document erzeugt, abstrakt. Wie das Design Pattern definiert, verlege ich das Skelett des Produktdaten-Algorithmus in die abstrakte Klasse und einzelne Schritte werden in den Unterklassen verschieden implementiert. Jetzt schreibe ich mir noch die Klasse BrowsenodeImpl, welche ich im produktiven Code benutze und eine Klasse BrowsenodeMock, welche ich für die Tests verwende. BrowseNodeMock greift auf lokale Xml-Dateien zu und BrowsenodeImpl auf den Amazon-Server.

Über den Berg

Ich bin über den Berg, oder wie man so sagt. Da ich in meiner neuen Arbeitsstelle mit Java EE zu tun habe, möchte ich mich gerne in meiner privaten Programmierung auch diesem Thema widmen. Nun müssen es aber keine Kunden- und Herstellernummern sein, sondern etwas, was mir ausreichend Ausgleich bietet. Was ich schon immer vorhatte: Ich entwickle eine Anwendung, mit der man mit mehr Spaß als durch bloßes Lesen den am weitesten verbreiteten und am häufigsten übersetzten unumschränkten Weltbestseller, nachfolgend und folgerichtig Das Buch genannt, erkunden kann. Nämlich soll man anhand von Lückentexten verifizieren können, ob man die Redewendungen, die unsere Kultur so sehr im Griff haben, wirklich drauf hat.

Die Datenbank kennt wieder jedes einzelne Wort persönlich, nämlich um welchen POS (Part of Speech) es sich handelt, wie das Lemma (Grundform) heißt und ob es Bestandteil einer Nominalphrase ist. Nachdem ich vier Übersetzungen in die Datenbank (MySQL) geschrieben habe, sind es 188 MB. Datenbankseitig benutze ich natürlich JPA. Anfangs bin ich etwas besorgt um die Performance. Denn meine Datenstruktur sieht so aus: Jeweils eine Entity für Buch, Kapitel, Vers und Wort. Nur für den Buchstaben gibt es kein Entity. Für ein Wort gibt es noch einen Kommentar, der dahinter angezeigt werden kann und ein Buch hat eine Map von Maßen der Wichtigkeit des Wortes innerhalb des Buches für alle relevanten Wörter. Dies sind Wörter, die einer Nominalphrase angehören oder ein Verb, Nomen, Adjektiv, Adverb, … sind. Die Datenbankschicht hat also einiges zu leisten, um nur den Text zu lesen. Soll auch noch ein Lückentext erzeugt werden, wird ordentlich gerechnet. Auf meinem Raspberry Pi installiert ist die Performance tatsächlich unter aller Kanone. Auf meinem betagten Rechner allerdings läuft es wirklich sehr flott. Der Pi ist ungefähr 10 mal langsamer, wirklich eine lahme Möhre.

Als ausbaufähiges Projekt nehme ich das Beispielprojekt der Autoren des Buches JavaServer Faces 2.2, von welchem ich bisher immer noch nur den konzeptionellen Teil gelesen habe. Das ist auch immerhin der wichtigste Teil, den man kann sich ja wirklich alles ergooglen und seit stackoverflow ist der ersuchte Inhalt auch sehr fundiert. Das Projekt ist natürlich overdrived, aber besser overdrived als underdrived. Ausschlachten kann man immer, hinzuschlachten ist schwieriger, so mein Gedanke. Das Projekt bietet eine Datenbank- und eine Oberflächenschicht. Datenbankseitig ist die Komplexität genau richtig, schließlich geht es den Autoren hauptsächlich um die Oberfläche. Was ich letztendlich von den Projekten behalte sind aber nur die Dependencies aus der POM-Datei, der Rest ist sehr einfach. Die Dependencies bieten mir auf einem Apache Tomcat 7 JPA, CDI, JSF und alle möglichen JEE 6-Features, indem zwischen Tomcat und den JEE-Implementierungen der Geronimo-Server aufgesetzt wird.

Jetzt an die Oberfläche. Die Anwendung soll Spaß machen, muss also auf mobilen Geräten laufen. Schließlich will ich überhaupt nicht zurückbleiben und eine Oberfläche für mobile Geräte ist Pflicht. In einer Präsentation von Richfaces habe ich auch einen guten Grund gefunden, eine webbasierte Oberfläche zu entwickeln. Benutzer wollen schließlich nicht für jede Anwendung eine App herunter laden. Einen Browser hat aber jeder. Als erstes muss eine App daher eine Web-Oberfläche für Desktop und mobile Geräte bieten. Danach kann gerne eine native App kommen. Das Web hat den Vorteil, dass man die meisten Nutzer damit sofort erreichen kann. Zuerst versuche ich mein Glück mit Primefaces. Das sieht sogar auf mobilen Geräten gar nicht schlecht aus, lässt aber noch etwas zu wünschen übrig. Als nächstes probiere ich Primefaces mobile. Das funktioniert wesentlich schlechter. Mein Lückentext wird programmatisch erzeugt und unter einer HtmlPanelGroup zusammengefasst. Leider wird diese Komponente aber nicht per Ajax aktualisiert. Auch eine SelectOneMenu-Auswahl soll sich auf eine andere SelectOneMenu-Auswahl auswirken, diese wird aber auch nicht aktualisiert. Was unter dem konventionellen Primefaces noch ging, geht unter mobile nicht mehr. Jetzt mache ich es selbst und setze Primefaces an die frische Luft. Ich arbeite mich in JQery mobile ein und da geht es aber auch nicht. Aber wenn ich es selbst mache, kann ich auch in die Handwerkskiste greifen. Nachdem ich den JQery mobile-Zauber herausnehme, sehe ich, dass es wunderbar funktioniert. Also wird nur das CSS nicht aktualisiert. Ich lese, dass ich das mit $('#meineForm').enhanceWithin(); erzwingen muss. Die programmatisch erzeugte HtmlPanelGroup für den Lückentext wird immer noch schwer aktualisiert, so dass ich dafür einfach eine extra Seite nehme, die immer neu geladen wird. Das macht auch Sinn, da die Seite gänzlich aus Komponenten besteht, die immer aktualisiert werden müssen.

Jetzt wird die Sache noch deployed (Schreckliches denglich finde ich übrigens. Aber so weiß jedenfalls jeder, was ich meine). Mein Pi ist jedenfalls unbrauchbar geworden. Letztens kam unser neuer Wohnzimmerschrank. Meine Frau hat einen Test gemacht, ob er die richtige Entfernung zur Steckdose hat, indem sie öfter mal den Stecker vom Pi rein- und rausgesteckt hat. Dann lade ich die Anwendung eben auf openshift hoch. Im Endeffekt ist das ganze auch wirklich sehr einfach, wenn man nicht Eclipse benutzt, sondern die Shell. Die Anwendung wird sehr komfortabel per SSH auf mein openshift-Konto geladen. Mit SSH lade ich auch mein SQL-Dump der lokalen Datenbank hoch und benutze die MySQL-Shell, um das Backup remote einzuspielen. Es gibt von openshift auch zielgerichtete Dokumentationen zu dem Thema und openshift sieht mir nach sehr viel versprechendem Webhosting aus! Hier kann man sehr viel kostenlos ausprobieren und man hat viele verschiedene Technologien zur Verfügung. So ein Webhosting habe ich noch nicht erlebt!

Los gehts

NSA im eigenen Auftrag

Ich habe eine neue Möglichkeit entdeckt, Notizen zu machen, nämlich indirekt durch jegliche Eingaben ins Handy. Ich ergoogle ja mein ganzes Leben. Deshalb will ich meine Eingaben protokollieren und zu meinem Pi senden. Sozusagen NSA in eigener Regie. Am Ende des Jahres eine Statistik ansehen können, was ich das Jahr lang im Herzen gehabt habe. Und mit solchen ganz nebenbei erstellten Notizen kann ich ja etwas anfangen, z.B. automatisiert Nachrichten oder Filme suchen. Unter Android kann man die Software-Tastatur selbst programmieren. Ich lade mir den Quellcode von Gingerbread-Keyboard herunter. Nachdem ich den nativen Teil mit dem Android NDK kompiliert habe, kann ich das Projekt mit Eclipse auf meinem Handy installieren und den Quellcode ändern. Ich finde verschiedene Methoden, um den Text zu unterschiedlichen Zeitpunkten aus dem Ziel-TextView zu lesen. Alle Methoden muten frickelig an. Es ist also eine interessante, aber weniger übliche Anwendung eines InputMethodService. Wenn sich das Tastaturfenster nach der Eingabe wieder schließt, wird der eingegebene Text verschlüsselt an meinen Raspberry Pi gesendet und in die Datenbank eingetragen. Ein Problem liegt darin, dass nicht alle Eingaben im Ziel-TextView landen. Bei Autocomplete-TextViews wird ein vervollständigtes Wort direkt ausgewählt statt erst im Zielfenster ankommen zu müssen. Allerdings kann man gerade in meinem wichtigsten Eingabefenster, der Adresseingabe des Chrome-Browsers den autovervollständigten Text zuerst ins Zielfenster schubsen um dann darauf aufbauend weitere Vervollständigungen der Suchphrase zu erhalten. Mit etwas Disziplin schneidet man dann doch den gesamten eingegebenen Text mit.

JBoss stoppen

Wie werde ich die Geister, die ich rief, auch wieder los? Wie stoppe ich den JBoss-Zauber?

./ --connect command=:shutdown

Erst einmal wurde das in umbenannt. Und dann hat der Befehl, aus welchem Grund auch immer, localhost oder nicht akzeptiert, auch wenn in der /etc/hosts-Datei die entsprechenden Einträge vorhanden waren.

Gestartet hatte ich den Zauber mit

./ -b &

Das & sorgt dafür, dass der Prozess im Hintergrund gestartet wird, so dass ich das Terminal-Fester schließen kann, ohne dass ich den Prozess dadurch verenden lasse.

SSLSocket unter Android

Nach einigen Änderungen kann ich jetzt auch von Android eine Verbindung zu meinem SSLServerSocket aufbauen. Aus meiner gestern generierten Schlüsselaufbewahrungsdatei keystore.jks, welche den privaten und den öffentlichen Schlüssel beherbergt, exportiere ich ein Zertifikat cert.pem

keytool -export -keystore keystore.jks -file cert.pem

Da Android nur mit BouncyCastle-formatierten Keystores etwas anfangen kann, erzeuge ich nun einen solchen, indem ich das eben erzeugte Zertifikat importiere:

keytool -importcert -file cert.pem -keystore -provider org.bouncycastle.jce.provider.BouncyCastleProvider -providerpath bcprov-jdk16-146.jar -storetype BKS

Eine beispielhafte Android-Activity sieht nun so aus:

package de.codeschneider.sslmessageclient;



import android.os.Bundle;
import android.os.StrictMode;
import android.content.res.Resources.NotFoundException;
import android.view.Menu;

public class MainActivity extends Activity {

    protected void onCreate(Bundle savedInstanceState) {
      //passphrase for keystore
        char[] keystorePass="pwd".toCharArray();

        TrustManagerFactory trustManagerFactory = null;
        StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();

        try {
            KeyStore keyStore=KeyStore.getInstance("BKS");
	        //create a factory
	        SSLContext sslContext=SSLContext.getInstance("TLS");

	        //init context
	            new SecureRandom()

	        //create the socket
	        Socket socket=sslContext.getSocketFactory().createSocket("",1111);

            InputStream inputstream = getApplicationContext().getResources().openRawResource(R.raw.echoclient);
            InputStreamReader inputstreamreader = new InputStreamReader(inputstream);
            BufferedReader bufferedreader = new BufferedReader(inputstreamreader);

            OutputStream outputstream = socket.getOutputStream();
            OutputStreamWriter outputstreamwriter = new OutputStreamWriter(outputstream);
            BufferedWriter bufferedwriter = new BufferedWriter(outputstreamwriter);

            String string = null;
            while ((string = bufferedreader.readLine()) != null) {
                bufferedwriter.write(string + '\n');
		} catch (NoSuchAlgorithmException e) {
			// TODO Auto-generated catch block
		} catch (CertificateException e) {
			// TODO Auto-generated catch block
		} catch (NotFoundException e) {
			// TODO Auto-generated catch block
		} catch (IOException e) {
			// TODO Auto-generated catch block
		} catch (KeyStoreException e) {
			// TODO Auto-generated catch block
		} catch (KeyManagementException e) {
			// TODO Auto-generated catch block

        //get context

    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(, menu);
        return true;

Die Activity nimmt den Keystore aus der Resourcen und übermittelt eine Datei über die hergestellte sichere Verbindung. Man verzeihe mir die Policy, alles zu erlauben. Normalerweise darf man unter Android keine Netzwerkverbindungen im Main-Thread aufbauen, sondern muss dieses nebenläufig tun. Ich wollte aber einfach nur sehen, ob meine Verschlüsselung funktioniert. Hurrah!