Internet Programmierung mit Java: Appendix

Appendix

NetBeans

Sobald man sich auf eine Entwicklungsumgebung (IDE) festlegt, und womöglich sogar noch eine Versionsnummer nennt, ist ein Buch automatisch datiert, und zwei Wochen später eigentlich nur noch zum Heizen nützlich. Aber wir wollen es trotzdem wagen.

Download and Installation

Der erste Schritt ist NetBeans vom Internet zu laden [1], und auf dem eigenen Rechner zu installieren. Es gibt da mehrere verschiedene Versionen, einmal für verschiedene Betriebssysteme, da sollten wir die Version die für unseren Rechner geeignet ist nehmen. Aber es gibt auch verschiedene NetBeans IDE Download Bundles und wir wollen das "Java EE" Bündel. NetBeans benötigt die Java JDK Version 7 oder später, falls wir die noch nicht auf unserem Rechner haben, müssen wir die vorher noch installieren. Ansonsten ist NetBeans ganz ähnlich wie Eclipse:

Noch zwei kleine Anmerkungen: immer die englischen Versionen von Software installieren. Die funktionieren wenigstens. Und folgendes zu Updates: da ich nur für mich selbst programmiere und nicht in einer Firma, vermeide ich Updates. Denn solange alles funktioniert gibt es keinen Grund das zu ändern, und ein Update könnte das. Nun in einer Firma ist das etwas anderes, man sollte aber damit rechnen, dass nach einem Update erstmal ein bis zwei Tage gar nichts mehr geht. In der Firma ist das o.k., da wird man ja bezahlt.

Get to Know NetBeans

Bevor man mit den Websachen anfängt sollte man mal ein kleines Konsolenprogramm schreiben oder eine kleine Swing Anwendung. Neue Projekte legt man mit "File -> New Project" an, und Java Projekte dann über "Java -> Java Application". Wir können dann mal eine einfache Java Klasse wie oben anlegen. Ausführen kann man die über das große grüne Dreieck oder per "Run -> Run Project".

Etwas gewöhnungsbedürftig sind die NetBeans Shortcuts. Die gehen auch über "Ctrl-Space", aber "System.out.println()" ist jetzt "sout" und "public static void main()" ist jetzt "psvm". Aber die Shortcuts gibt's als pdf zum Download [2].

NetBeans hat auch ganz viele Tutorials. Die meisten taugen nichts, aber besser als Eclipse alle mal, denn da gibt's gar keine. Das Swing Tutorial [3] ist ganz o.k. wenn man in der U-Bahn sitzt.

Web Project

Um unser erstes Webprojekt anzulegen, gehen wir wieder über "File -> New Project" dieses mal wählen wir aber unter "Java Web" die "Web Application" aus und klicken auf Next. Dann geben wir dem Projekt einen Namen, z.B., "Dienstag" und klicken wieder auf Next. Bei der Serverauswahl würde ich "GlassFish Server 4" verwendet. Ganz selten macht der aber Ärger, dann kann man auch den Tomcat nehmen, geht auch. Dann dürfen wir auf "Finish" klicken, auch wenn wir kein Finisch können. Es wird ein Projekt angelegt und eine HTML Seite namens "index.html". Gestartet wird das Projekt wie oben auch über "Run -> Run Project" oder das grüne Dreieck. Es dauert dann ein bisschen, aber früher oder später müsste sich ein Webbrowser, meist Firefox, öffnen und die Seite "index.html" anzeigen.

Warum "dauert" es ein bisschen? Das hat damit zu tun, dass mehrere Schritte durchlaufen werden bis man das Resultat im Browser bewundern kann:

1. der Server, GlashFish oder Tomcat, wird gestartet, es sei denn er läuft bereits
2. das Projekt wird verpackt, auf den Server hochgeladen (in der Regel einfach kopiert) und deployed [6]
3. der Browser wird gestartet, falls er noch nicht läuft
4. der Browser muss die Seite vom Server laden.

Debugger

NetBeans hat auch einen sehr mächtigen Debugger, der auch für Webseiten funktioniert. Dazu muss man zunächst einen Breakpoint in seinem JSP oder Servlet Code setzen (geht nicht mit HTML). Und danach startet man das Projekt im Debug-Modus entweder über "Debug -> Debug Project" oder dem Knopf rechts neben dem grünen Dreieck.

Um den Debugger einmal zu testen, schreiben wir ein paar einfache Zeilen JSP Code. Zum Anlegen einer neuen JSP Datei, klicken wir mit der rechten Maustaste auf das Verzeichnis "Web Pages" in unserem "Dienstag" Projekt, wählen dann "New -> JSP" aus, und nennen die neue Seite "hello". Das ".jsp" wird automatisch angehängt. Dann löschen wir alles was in der Datei evtl. schon steht und fügen die folgenden fünf Zeilen ein:

<%
    out.println("Hello ");
    out.flush();
    out.println("JSP!");    
%>

Dann setzen wir einen Breakpoint in der Zeile zwei (out.println()) indem wir einfach einmal mit der linken Maustaste auf die "2" der Zeilennummer klicken. Wir starten dann das Projekt im Debug-Modus und es sollte ein Browser sich öffnen. Der Browser lädt zunächst die "index.html" Seite, wir müssen ihm erst sagen dass er zur

http://localhost:8080/Dienstag/hello.jsp

Seite gehen soll. Sobald wir das tun, sehen wir dass in NetBeans die zweite Zeile grün markiert ist, und wir jetzt auf alle möglichen Knöpfe drücken können. Der Browser allerdings zeigt erst mal gar nichts an, denn der wartet geduldig auf sein Antwort. Wenn wir jetzt mit "Step over (Shift-F8)" zwei Schritte weitergehen, dann erscheint im Browser das "Hello" aber noch nicht das "JSP".

Lustig wird es wenn wir jetzt einen zweiten Browser öffnen, und dort auch zu besagter Seite gehen. Auch die bleibt erst mal im Debugger hängen und wir sehen beide Threads im linken Fenster "Debugging":

Wir können hier zwischen den zwei Threads hin und herspringen, und mal den einen ein paar Schritte laufen lassen und dann den anderen wieder. Man kommt sich ein bisschen wie ein Marionettenspieler vor. Obwohl das wie eine Spielerei anmutet, wird das extrem wichtig werden wenn mal "lustige" Sachen passieren, deren Ursache mit Threading zu tun hat.

Load Generation

NetBeans hat alle möglichen coolen Sachen, wie z.B. einen Profiler den man mit dem Knopf neben dem Debugger Knopf startet. Der hat dann noch mehr Knöpfe die man drücken kann, und da gibt es dann ganz viele Graphiken mit denen man seine Manager beeindrucken kann. Was aber viel nützlicher ist, das ist der eingebaute Load Generator, mit dem man Last auf seinem Server verursachen kann. Ein Tutorial das zeigt wie das geht findet sich auf dem NetBeans Website [4]. Es sei allerdings angemerkt, dass das Tutorial ohne ein jMeter Script nutzlos ist, deswegen vielleicht erst mal hier [5] nachsehen wie man ein jMeter Script erzeugt.

Referenzen

Zu NetBeans gibt es ganz viele Tutorials, die man ganz einfach über Google findet. Die meisten sind auf dem NetBeans eigenen Website. Anbei noch ein, zwei nützliche Links.

[1] NetBeans IDE, https://netbeans.org/

[2] Highlights of NetBeans IDE 8.0 Keyboard Shortcuts & Code Templates, https://netbeans.org/project_downloads/usersguide/shortcuts-80.pdf

[3] Learning Swing with the NetBeans IDE, (http://java.sun.com/docs/books/tutorial/uiswing/learn/index.html

[4] Using a Load Generator in NetBeans IDE netbeans.org/kb/docs/java/profile-loadgenerator.html

[5] Apache JMeter HTTP(S) Test Script Recorder, jmeter.apache.org/usermanual/jmeter_proxy_step_by_step.pdf

[6] Tomcat Web Application Deployment, https://tomcat.apache.org/tomcat-7.0-doc/deployer-howto.html

JavaScript

JavaScript ist ein wenig wie Englisch: oberflächlich scheint es eine sehr einfache Sprache zu sein, und fast jeder kann kleine Programme mit JavaScript schreiben. Aber wie mit dem Englischen ist das sehr trügerisch. Wir werden hier aber nur kurz die oberflächlichen Aspekte der JavaScript Sprache ansprechen. Eine kurze Warnung: obwohl JavaScript das Wort "Java" im Namen trägt, hat es eigentlich gar nichts mit Java zu tun.

HTML

Das JavaScript das uns interessiert ist jenes das im Browser läuft. Deswegen gehen wir immer davon aus, dass es irgendeine HTML Datei gibt die entweder den JavaScript Code direkt enthält, oder einen Link auf eine JavaScript Datei.

Im Prinzip können wir JavaScript sowohl im Body Teil des HTMLs schreiben,

<html>
    <head>
    </head>
    <body>
<script type="text/javascript">
    document.write("This message is written by JavaScript");
</script>
    </body>
</html>

als auch im Header:

<html>
    <head>
        <script type="text/javascript">
function message() {
    alert("This alert box was called with the onload event");
}
        </script>
    </head>
    <body onload="message()">
    </body>
</html>

Bevorzugt ist letzteres, aber im Prinzip kommt es wie immer auf die genauen Umstände an. Das Problem mit dem direkten Einfügen von Code ist aber allgemein, dass man ihn nicht wiederverwenden kann. Deswegen ist es eigentlich bevorzugt das JavaScript in eine externe Datei auszulagern:

<head>
    <script type="text/javascript" src="myJavaScript.js"></script>
</head>
<body>
</body>
</html>

Die kann dann nämlich auch in anderen Seiten wiederverwendet werden.

Basics

JavaScript ist dem Augenschein nach sehr ähnlich zu Java oder anderen Programmiersprachen. So gibt es Statements, wie z.B.

document.write("Hello Dolly");

und auch Variablen,

var x;
var carName = "Mini";

Aber vieles ist in JavaScript optional: so sind die Strichpunkte am Ende eine Statements optional, und auch die Deklaration ist optional. Also auch

y = x - 5
carName2 = "Mercedes"

ist vollkommen korrekt. Auch sehen wir keine Datentypen: JavaScript ist "weakly typed", d.h. die Datentypen werden zur Laufzeit bestimmt. Das ist zwar ganz praktisch, aber nicht ganz ungefährlich.

In JavaScript gibt es auch Funktionen und Objekte, allerdings keine wirklichen Klassen. Was wirklich toll ist, dass wir Funktionen auch basierend auf Events aufrufen können, z.B., verwenden wir im Services Kapitel den onclick Event eines Links,

<body>
    <a href="#" onclick="sendGet Request (' service / highscore s/');
            return false;">
        GET</a>
     

</body>

um JavaScript auszuführen. Und JavaScript kann auf HTML Elemente zugreifen, diese verändern, sogar neu kreieren und existierende löschen. Z.B., würde das JavaScript

     document.getElementById(" response GET").innerHTML = "hi there";

in dem Tag oben den Text "hi there" einfügen.

Mit dieser kleinen Einführung und unseren existierenden Java Kenntnissen, müssten wir jetzt eigentlich den JavaScript Code den wir an verschiedenen Stellen im Buch verwenden verstehen können.

Referenzen

Wenn es um das klassische JavaScript geht, also keine Libraries, dann ist der Klassiker von David Flanagan wohl immer noch eine gute Quelle der Inspiration. Natürlich die papierlose Generation möchte auch bedient werden, hier sollte wie immer W3Schools nützliche Dienste erweisen.

[1] JavaScript: The Definitive Guide von David Flanagan

[2] JavaScript Tutorial - W3Schools, www.w3schools.com/js/

Projects

Falls man noch nach anderen Ideen für mögliche Projekte sucht wollen wir im folgenden einige auflisten, die man ohne große Problem mit dem Gelernten realisieren kann.

Temperature

Ein Programm das Fahrenheit in Celsius umrechnet. Der Nutzer gibt die Temperatur in Fahrenheit ein und mittels der Formel

    int c = (int) ( (5.0 / 9.0) * (f - 32) );

können wir die Temperatur in Celsius umrechnen.

LeapYear

Mit der Formel aus dem ersten Semester können wir feststellen ob ein Jahr ein Schaltjahr ist. Der Nutzer gibt ein Jahr ein, vielleicht sein Geburtsjahr, und wir geben dann aus, ab es sich bei dem Jahr um ein Schaltjahr handelt.

YearlyRate

Es geht darum zu berechnen wie hoch die jährliche Rate ist, wenn man einen Kredit nach einer gewissen Laufzeit zu einem gewissen Zinssatz abbezahlt haben will.   Karel will sich ein Auto kaufen, deswegen hat er angefangen zu sparen. Er will sich einen Mini kaufen (Mercedes ist zu teuer), und er hat einen gebrauchten für 5000 Euro gesehen. Er hat einen günstigen Kredit bei einer Bank von 5% pro Jahr gesehen. Wie hoch ist seine jährliche Rate, wenn er den Kredit in 5 Jahren abbezahlt haben will? Karel braucht also ein Programm bei dem er die Kreditsumme (k) eingeben kann, den Zinssatz (z) und die Laufzeit in Jahren (n). Das Programm soll ihm dann sagen wie hoch seine jährliche Rate (y) ist:

    double q = 1.0 + z;
    double qn = Math.pow(q, n);    // q^n
    double y = k * qn * (q-1) / (qn-1);

Die Formel dafür kann man in der Wikipedia unter Sparkassenformel nachsehen.

Roulette

In einer vereinfachten Version von Roulette spielt ein Spieler gegen den Computer. Der Spieler kann auf odd oder even (oder high oder low) setzen. Der Computer wählt dann eine Zufallszahl zwischen 0 und 36. In einem zweiten Schritt, könnte man noch mit Credits spielen. Der Spieler erhält am Anfang 100 Credits, und falls er gewinnt erhält er 10 zusätzliche Credits, falls er verliert werden 10 Credits abgezogen. Schließlich könnte man auch noch ein MultiPlayer Spiel daraus machen.

BlackJack

Auch Black Jack können wir in einer etwas vereinfachten Version implementieren. Anstelle von Karten verwenden wir einfach Zahlen, und zwar Zahlen zwischen 1 und 11. Der Computer spielt den Croupier und beginnt indem er eine Zufallszahl zwischen 17 und 25 erzeugt. Dann ist der Spieler an der Reihe. Dieser fängt mit einer Karte an, also eine Zufallszahl zwischen 1 und 11. Er kann dann entscheiden ob er noch eine Karte möchte. Falls ja, wird wieder eine Zufallszahl zwischen 1 und 11 erzeugt und zur momentanen "Hand" hinzuaddiert. Wenn der Spieler keine neue Karte mehr haben möchte, wird die "Hand" des Spielers mit der des Computers verglichen. Gewonnen hat derjenige der 21 Punkte oder weniger hat und mehr als der andere. Ansonsten ist es ein Unentschieden.

BattleShip

Im ersten Semester haben wir den Spieleklassiker Schiffeversenken umgesetzt. Ähnlich wie TicTacToe oder Mines können wir das auch als Webanwendung realisieren.

TicTacToe - Two Players

In Kapitel vier haben wir die Single-Player Variante implementiert. Wie wäre es mit eine Zwei-Spieler Variante? Wahrscheinlich macht es vorher Sinn sich den TwoPlayer Chat noch einmal anzusehen. Ähnlich könnte man auch andere Spiele wie Dame, Schach und Go implementieren.

ESP Game

Das ESP Spiel wurde von Luis van Ahn, Professor an der Carnegie Mellon University, erfunden. Es handelt sich um eine TwoPlayer Game um Bilder zu klassifizieren. Um zu sehen worum es geht, sollte man seine Präsentation im Rahmen der Google TechTalks ansehen: https://www.youtube.com/watch?v=tx082gDwGcM

Translate

Google Translate hat auch einfach angefangen. In einer einfachen Version könnte man basierend auf dem Dictionary Beispiel, einen Internet-Übersetzungsservice anbieten. Einmal mit einem Webinterface, dass eingegebenen Text einfach Wort für Wort übersetzt. Daraus könnte man aber auch einen Web Service machen. Später könnte man auch eine Version schreiben, in der Nutzer neue Wörter hinzufügen könnten.

SpellChecker

Ein Service der die Rechtschreibung überprüft. Man würde das auf dem Dictionary Beispiel aufbauen, eine einfache Version würde einfach auf einem HashSet basieren. Wahrscheinlich wäre eine englische Version einfacher. Evtl. sind die folgenden beiden Resourcen hilfreich: Aspell, http://freedict.org/de/, http://sourceforge.net/projects/freedict/files/ und stackoverflow.com/questions/2294915/what-algorithm-gives-suggestions-in-a-spell-checker.

Eliza

Im ersten Semester haben wir den Psychiater Eliza kennengelernt. Natürlich könnte man daraus auch eine Webanwendung machen.

ToDo List

Eine einfach ToDo Liste in der jeder Nutzer seine eigenen ToDos listen kann. Evtl. wäre auch eine Priorisierung wünschenswert.

Calendar

Die Anwendung soll es einem Nutzer erlauben seinen Kalendar zu managen. Dazu gehört neue Einträge anlegen, löschen und auch die Ausgabe des Kalanders, evtl. mit Druckfunktion. Eine spätere Version könnte auch Email Reminders beinhalten. Auf jeden Fall sollte auch ein Web Service existieren, um eine spätere Anbindung an ein mobiles Endgerät zu ermöglichen.

PhoneBook

Es geht darum seine Adressen und Telefonnummern zu managen. Auch hier sollte wieder ein Web Service existieren, um eine spätere Anbindung an ein mobiles Endgerät zu ermöglichen. Es sollte auch möglich sein beliebige Key-Value Pairs zu speichern. Und eine Suche wäre auch praktisch.

TimeSheet

Wenn man als Freelancer arbeitet oder auch in manchen Firmen, muss man aufschreiben wie viel Zeit man für welches Projekt verwendet hat. Dies soll eine kleine Webanwendung werden, in der Nutzer ganz einfach ihre Zeiten managen können. Ein Web Service Interface wäre bestimmt auch nicht schlecht.

StoreSecrets

Heutzutage hat jeder zig Passwörter und PINs die man sich merken muss. Und kann man den Anwendungen die man da so im Internet oder auf dem Handy hat wirklich trauen? Deswegen nach dem Motto "Max Selber" wollen wir eine Webanwendung zum speichern von Passwörtern und anderen Geheimnissen schreiben.

Votes

Die Idee hinter Votes ist eine Art Umfrage, die es erlaubt mehrere Nutzer bzgl. eines bestimmte Themas abzustimmen. Sollte per Einladung über einen Weblink oder QR Code funktionieren.

Who Has My Stuff

Wenn man wie ich vielen Leuten viele Sachen ausleiht verliert man leicht den Überblick wem man was geliehen hat. Hier könnte eine einfache Webapp Abhilfe schaffen.

Library

Wir haben im ersten Semester die Anforderungen für eine einfache Bibliothek erarbeitet. Jetzt könnten wir selbige als Webanwendung umsetzen.

University

Auch aus dem ersten Semester stammt die Idee eines universitären Studenten-Management Systems. Es geht einfach darum den Fortschritt von Studierenden während des Studiums zu managen.

Doodle

Bei der Webanwendung Doodle (doodle.com) geht es darum gemeinsame Termine für Meetings und Ähnliches zu finden. Es dürfte kein Problem sein eine ähnliche Anwendung mit dem hier gelernten umzusetzen.

Flickr

Flickr (flickr.com) ist eine Webanwendung zum Hochladen und Verwalten von Bildern. Jeder Nutzer sollte seinen eigenen Bereich haben, es sollte aber auch einen gemeinsamen Bereich geben. Bilder können privat, aber auch öffentlich sein. Und es könnte ein Ranking/Voting System geben mit dem man Bilder bewerten kann. Natürlich sollte es auch als Webservice zur Verfügung stehen um mobile Geräte direkt einbinden zu können.

Facebook

Inzwischen kennt Facebook (facebook.com) fast niemand mehr, aber die Idee war eigentlich ganz cool: seinem zukünftigen Arbeitgeber seine schlimmsten Seiten zu zeigen. Im Prinzip ist es ein ähnliches Konzept wie unsere Chirpr Anwendung. Es gibt Nutzer, Freunde und Gruppen, und jeder kann News posten. Das Ganze kann man dann zeitlich sortieren und nennt es Timeline.

Stack Overflow

Stack Overflow (stackoverflow.com) ist ein Beispiel für eine spezialisierte Form der klassischen NewsGroup. Ein Nutzer stellt eine Frage, idealerweise mit einigen Keywords assoziiert, und andere Nutzer können die Frage beantworten. Man kann dann noch ein Votingsystem einführen, etc., etc.

Shop

Ein einfacher Shop, z.B. für Bücher, CDs oder Lebensmittel. In einer einfachen Version ist das Inventar fest vorgegeben. Der Nutzer kann aber Sachen in einen Warenkorb legen und kaufen. In einer späteren Version könnte es auch ein Interface für den Händler geben, damit er neues Inventar anlegen kann, etc.

Bugs

Ein Tool zum Melden von Bugs, also Fehlern in einem Programm. Die Bugs bekommen eine Nummer, werden dann einem Mitarbeiter zugeordnet, und nachdem sie bearbeitet wurden, bekommt der Melder eine Nachricht. Man sollte u.a. alle offenen Bugs auflisten können. Das Ganze sollte natürlich für mehrere Projekte möglich sein.

Bank

Die Idee hier ist eine Spiel-Bank Anwendung zu schreiben. Kunden haben Konten und können einander Geld überweisen. Das ist eine sehr interessante Anwendung, denn beim Überweisen von Geld kann verdammt viel schief gehen. Da muss man viel nachdenken, damit auch wirklich nichts schief geht. Der nächste Schritt wäre dann sich ein bisschen in Bitcoins einzulesen (z.B. Bitcoin and Cryptocurrency Technologies).

Hospital

In einem Krankenhaus gibt es Patienten und Doktoren. Jeder Patient hat eine Krankenakte, und die Doktoren dürfen da drin rumschreiben.

Recipies

Es geht um das Sammeln von Rezepten. Dabei könnte jeder Nutzer seine eigenen Rezepte haben, es könnte aber auch die Möglichkeit geben, das Rezepte global sind, also für jeden einsehbar. Natürlich sollten Rezepte auch Bilder haben, sonst schmecken sie nicht so gut. Man könnte sich auch Erweiterungen ausdenken, wir ein Voting System.

Classifieds

Bei Kleinanzeigen geht es darum irgendetwas zu verkaufen, anzubieten oder zu finden. Hier gibt es Nutzer und Anzeigen. Anzeigen sollten einen Titel, eine Kategorie, einen Text und ein Verfallsdatum haben. Das Ganze sollte natürlich durchsuchbar sein. Was Kleinanzeigen auch ausmacht ist, dass sie meist lokal sind, deswegen könnte man in einer Erweiterung auch noch den Ort/Lokation mit aufnehmen.

Document / Image Management System

Ein einfaches Dokumenten-Managementsystem erlaubt es einem auf seine Dokumente über ein Webinterface zuzugreifen. Dokumente sollten nach Namen, Schlüsselwörtern und evtl. Inhalt klassifiziert werden, damit man sie auch durchsuchen kann. Ein WebService zur Anbindung mobiler Endgeräte könnte sinnvoll sein.

Crossword Puzzle

Im zweiten Semester haben wir gesehen wie wir Kreuzworträtsel mit Hilfe der Trie Datenstruktur erzeugen können. Was uns aber fehlt sind die Inhalte. In diesem Projekt, sollen Nutzer Fragen und Antworten für Kreuzworträtsel eingeben können, und daraus dann Kreuzworträtsel generieren lassen können. Die Fragen sollten öffentlich sein, damit jeder sie nutzen kann. Evtl. macht es bei jeder Frage einen Schwierigkeitsgrad mit anzugeben. Auch ein Voting System vielleicht inspiriert von Stack Overflow könnte hilfreich sein.

Newspaper

Bei Newspaper geht es um eine Zeitung, z.B. eine Mitarbeiter- oder Vereinszeitung. Es gibt Autoren und Artikel, sowie Ausgaben. Evtl. macht es auch Sinn einen Administrator zu haben. Auf jeden Fall sollte es die Möglichkeit geben eine gedruckte Version der Zeitung zu erstellen. Hierfür gibt es in CSS die @media Regel "@media print".

• Zurück zu Internet Programmierung mit Java