Code Week 2019

Code Week

Vom 5. bis 20. Oktober findet wieder die europaweite Code Week statt. Wie auch in den letzten Jahren wird es wieder am Eröffnungstag einen LEGO WeDo 2.0 Roboter Workshop geben – und neu: die Zauberschule Informatik!

Und da Ferien sind, wird es auch in der Bücherhalle Volksdorf noch zwei Workshops geben.

Details folgen…

Code Week 2016 [CC BY 4.0. Körber-Stiftung, Foto: Sandra Schink]
Spaß und Spannung bei der Auftaktveranstaltung der CodeWeek 2017 in Hamburg [CC BY 4.0. Körber-Stiftung, Foto: Sandra Schink]
Die Code Week Hamburg ludt vom 6. bis 21. Oktober 2018 Kinder und Jugendliche dazu ein, ihre Begeisterung für das Tüfteln, Hacken und Programmieren zu entdecken. [CC BY 4.0. Körber-Stiftung, Foto: Sandra Schink]
Code Week 2018 [CC BY 4.0. Körber-Stiftung, Foto: Sandra Schink]

E-Mail-Templates mit Thymeleaf (Teil 3 von 1)

Im dritten der bisher nur einteiligen Serie über E-Mail-Templates mit Thymeleaf zeige ich, wie sich HTML-basierte E-Mails erzeugen lassen, die vom Anwender mit seinem E-Mail-Programm der Wahl vor dem Versenden noch bearbeitet werden können (im ersten Teil wird es um die rein server-seitige Generierung von E-Mails gehen und der zweite Teil ist der Vorläufer zu diesem, bei dem es um Text-E-Mails geht).

Wunsch der Fachabteilung war es, zwei Datensätze zu vergleichen und die Unterschiede hervorzuheben. Die E-Mail sollte eine Tabelle enthalten, in dem diese Werte gegenübergestellt werden:

Vom Server vor-generierte E-Mail

Über einen mailto-Link lässt sich im body-Parameter nur Text übergeben (siehe Teil 2 dieser Reihe) und bei der Variante aus Teil 1 verschickt der Server selbst die E-Mail, ohne das der Anwender noch eingreifen könnte.

Die Lösung besteht nun darin, dass der Server eine .eml-Datei für den Download erzeugt. Die damit verknüpfte Anwendung ist das E-Mail-Programm, dass die Nachricht dann sendebereit anzeigt.

Controller-Code

    @GetMapping(path = "/{id}/vergleichen/{candidate}")
    public void mailvorlageZeitreihenVergleichen(
            @PathVariable("id") Long id,
            @PathVariable("candidate") Long candidateId,
            HttpServletResponse response
    ) throws IOException {
        Context context = new Context();
        context.setVariable("original", service.zeitreihe(id));
        context.setVariable("candidate", service.zeitreihe(candidateId));
        context.setVariable(ThymeleafEvaluationContext.THYMELEAF_EVALUATION_CONTEXT_CONTEXT_VARIABLE_NAME,
                new ThymeleafEvaluationContext(applicationContext, conversionService));
        String body = templateEngine.process("intern/zeitreihen/mailvorlageZeitreihenVergleichen", context);

        response.setContentType("text/plain");
        response.setHeader(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"Negativliste_"
                + LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyyMMddHHmm")) + ".eml\"");
        BufferedWriter out = new BufferedWriter(new OutputStreamWriter(response.getOutputStream()));
        out.write(body);
        out.flush();
    }

Der Code besteht aus drei Abschnitten:

  1. Ermitteln der Daten und übertragen in den Context.
  2. Verarbeiten des Thymeleaf-Templates.
  3. Schreiben der Daten in den OutputStream der HttpServletResponse.

In den Context schreiben wir die Daten, auf die wir später im Template zugreifen wollen. Einzige Besonderheit ist hier der ThymeleafEvaluationContext. Diesen brauchen wir, damit ggf. eigene Converter genutzt werden können, z. B. für die Formatierung von Datumswerten (die Syntax mit den doppelt-geschweiften Klammern: ${{zeitraum}}).

Über den Header CONTENT_DISPOSITION teilen wir dem Browser zum einem mit, dass er die empfangenen Daten als Download anbieten soll und zum anderen legen wir hier auch den Dateinamen fest, den wir mit .eml enden lassen. Das zeigt sich dann für den Anwender wie folgt:

Download der vom Server gerenderten E-Mail-Vorlage

Das Template mit der E-Mail-Vorlage

Bei einer Spring-Boot-Anwendung liegt das Template in der Datei src/main/resources/templates/intern/zeitreihen/mailvorlageZeitreihenVergleichen.html und sieht so aus:

To:
Subject: Zeitreihen-Vergleich: <th:block th:text="${original.bilanzkreis}"></th:block> vs. <th:block th:text="${candidate.bilanzkreis}"></th:block>
X-Unsent: 1
Content-Type: text/html

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>E-Mail-Vorlage: Zeitreihen vergleichen</title>
  <style>
    body {...} 
    th {...}
    .abweichung {
      color: red !important;
      font-weight: bold !important;
    }
  </style>
</head>
<body>
  <table>
    <thead>
    <tr>
      <th></th>
      <th>Originale Zeitreihe</th>
      <th>Vergleichs-Zeitreihe</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th>Bilanzkreis</th>
      <td th:text="${original.bilanzkreis}"></td>
      <td th:text="${candidate.bilanzkreis}" th:classappend="${original.bilanzkreis != candidate.bilanzkreis} ? 'abweichung' : ''"></td>
    </tr>
    <tr>
      <th>Lieferant</th>
      <td th:text="${original.lieferantName}"></td>
      <td th:text="${candidate.lieferantName}" th:classappend="${original.lieferantName != candidate.lieferantName} ? 'abweichung' : ''"></td>
    </tr>
...

Das Template beginnt mit den Steuer-Header für die E-Mail. Ein Empfänger (To:) ist hier weggelassen und muss vom Anwender in seinem Mail-Programm ergänzt werden. Das X-Unsent sorgt dafür, dass das Mail-Programm weiß, dass die E-Mail noch nicht versendet wurde (BTW: Ich habe das Ganze nur mit Outlook ausprobiert). Schließlich teilen wir dem E-Mail-Programm noch mit, das der Inhalt (Body) HTML ist und nach der Leerzeile kommt auch schon der Body. Hier kann wie gewohnt die Thymleaf-Syntax verwendet werden (das klappt auch in den Header-Zeilen wie beim Betreff (Subject) zu sehen ist).

JavaLand4Kids im Phantasialand

JavaLand im Phantasialand

Im Vorfeld der diesjährigen JavaLand-Konferenz im Phantasialand fand am Montag, den 18. März 2019 die JavaLand4Kids statt. Neben meinem Workshop LEGO WeDo 2.0 gab es noch einen Calliope-Workshop für Grundschüler und die älteren Schüler konnten mit LEGO Mindstorms, VEX-Robotern und einem Graphen-Workshop praktische Einblicke in die Informatik bekommen.

Nach dem üblichen Einführungsprojekt (Forschungssonde Milo) konnten die Kids zwischen drei Projektaufgaben wählen:

  • Wer baut den schnellsten Rennwagen (Projekt „Geschwindigkeit)?
  • Wer baut die stärkste Zugmaschine (Projekt „Zugkraft“)?
  • Wer sammelt die meisten Frachtgüter ein (Projekt „Mondstation“)?

Die Jungs (drei Zweiergruppen) entschieden sich für den Rennwagen und die Mädchen (zwei Zweiergruppen) für die Mondstation. Diese Auswahl ist gendertypisch und entspricht meinen Erfahrungen aus vergangenen Workshops: Während Jungen sich in Wettkämpfen (wer ist der schnellste/stärkste) messen, fokussieren sich die Mädchen auf sozialere Projekte (bei freier Auswahl aus dem Angebot der WeDo-App meistens der Hubschrauber zur Rettung des Pandabären oder die Biene auf der Suche nach Nektar).

Über ähnliche Erfahrungen berichteten auch L. Escoriza und A. Brauner in ihrem Vortrag Introduce Girls to Programming and Reduce the Gender Gap am Dienstag auf der Javaland Konferenz. Natürlich habe ich auch der von O. Milke moderieten Diskussion 4 Kids – Nachwuchsförderung unter der Lupe beigewohnt.

Zurück zu den Kids: Bei beiden Gruppen gleich ist die Begeisterung und Freude, wie leicht und schnell sich die Modelle zusammenbauen und programmieren lassen und die Zielstrebigkeit, die gestellte Aufgabe zu lösen. Dies liegt sicherlich auch daran, dass es sich um ein ausgereiftes Produkt handelt, das weder Hardware-seitig (welches Kind kennt kein Lego?) noch softwareseitig (intuitive Benutzungsoberfläche) größere Probleme zeigt und damit von der eigentlichen Aufgabe ablenken würde.

Für Kids und Mentoren verging die Zeit wie im (Wellen)Flug, da störte der Aufruf zum Mittagessen dann schon fast…

Lego WeDo auf der JavaLand4Kids
Beitrag aus der JavaLandNews vom Dienstag, den 19.3.2019

Wir sehen uns im nächsten Jahr wieder (16.-19. März 2020)!

Zauberschule Informatik im Januar 2019

Nicht nur auf Hogwarts lassen sich die Künste der Zauberei erlernen, nein, auch die Muggles können dank Informatik mit verblüffenden Zaubertricks das Publikum zum Staunen bringen.

Im Rahmen der KIds4IT Workshopreihe am 26.01.2019 enthüllen wir gemeinsam ein paar Geheimnisse der Informatik. Diesmal übrigens ganz ohne Computer, Tablet oder Smartphone (und auch ohne Lego 😉

Lernt Zahlen zu erraten, Bilder zu entschlüsseln, verblüffende Kartentricks, eine Schatzsuche, gewinnt jedes Rennen und helft dem Weihnachtsmann seine Socken wieder zu finden.

Die Anmeldung dazu wird wieder über das Meetup der Kids4IT erfolgen. 

Update:

Die Zauberschule hat richtig Spaß gemacht und wird wiederholt werden! Über den Twitter-Account von Kids4IT könnt ihr euch auf dem laufenden halten. 

Hier noch ein paar Impressionen (Fotos mit freundlicher Genehmigung von Uwe Sauerbrei) von der Veranstaltung.

Zur Begrüßung „sortieren“ sich die Kinder erst einmal nach ihren Vornamen.

Zählen wie ein Computer: 0, 1, 10, 11, 100, 101, …

Das Orangenspiel.

Code Week 2018

Zur Auftaktveranstaltung der Code Week 2018 kamen wieder viele interessierte Kinder und Jugendliche in die Zentralbibliothek am Hühnerposten. Unter dem Dach der Kids4IT habe ich wie letztes Jahr wieder die LEGO Education WeDo 2.0 Sets mitgebracht und insgesamt sieben 45-minütige Mini-Workshops mit bis zu 10 Kindern durchgeführt.

Die Presse und Medien war auch wieder vertreten und haben zum Teil noch am gleichen Tag berichtet:

NDR Hamburg Journal: https://www.ndr.de/fernsehen/sendungen/hamburg_journal/Code-Week-Fit-fuer-die-digitale-Zukunft-,hamj72798.html

Hamburg 1: https://www.hamburg1.de/nachrichten/37592/Auftaktveranstaltung_der_Coding_Wochen.html

Sat.1 Regional: 
https://www.sat1regional.de/auftakt-der-code-week-2018-in-hamburg/

Quelle: Screenshot aus dem Beitrag des NDR Hamburg Journal

Quelle: Screenshot aus dem Beitrag von Hamburg 1

Quelle: Screenshot aus dem Beitrag von Sat.1 Regional

Code Week 2018 – Schnupperkurse LEGO WeDo

Vom 6. bis 21. Oktober findet die europaweite Code Week start. Auch in Hamburg gibt es wieder viele spannende Workshops. Zur Auftaktveranstaltung der Hamburger Code Week in der Zentralbibliothek am Hühnerposten sind auch die kleinen LEGO Education WeDo 2.0 Roboter wieder im Einsatz. Eine vorherige Anmeldung ist nicht erfordlich, es liegen jedoch am Tag der Veranstaltung Listen aus, in die sich interessierte Kids eintragen mögen. Der Schnupperworkshop findet laufend in der Zeit von 11 bis 17 Uhr statt.

Und weil Ferien sind, gibt es schon mal vorweg ebenfalls einen Schnupperworkshop in der Bücherhalle Hamburg Volksdorf. Und zwar am 2. Oktober in der Zeit von 14 bis 17 Uhr. Eine Anmeldung ist auch hier diesmal nicht erforderlich.

Auf beiden Veranstaltungen wird der Forschungsroboter „Milo“ gebaut und mit ein App auf einem Tablet programmiert.