Ich baue, er programmiert. Ich bin der Ingenieur, er ist der Informatiker.

Vom 5. bis 20. Oktober 2019 fand die europaweite Code Week statt. Die Code Week richtet sich an Kinder und Jugendliche und will das Interesse am Fach Informatik und der digitalen Welt im allgemeinen wecken und erklären. Diverse Firmen, Organisationen und Einzelpersonen bieten dazu Workshops an, meist kostenfrei.

Wie schon in den vergangenen drei Jahren war ich für Kids4IT auf der Auftaktveranstaltung in der Zentralbibliothek der Hamburger Öffentlichen Bücherhallen am Hühnerposten mit dabei. An den beiden folgenden Dienstagen fanden darüberhinaus die von mir organisierten Workshops in der Bücherhalle Hamburg Volksdorf statt, in denen wieder fleißig Roboter mit LEGO WeDo 2.0 gebaut und programmiert wurden.

Zauberschule Informatik

Los ging es am Samstag mit drei ca. 45 minütigen „Vorlesungen“ der Zauberschule Informatik. Nach einer kurzen Einführung, was Informatik eigentlich ist, lernten die Kinder im ersten Zaubertrick wie ein Computer zu zählen: 0, 1, 10, 11, 101, 110, 111, 1000, …

0 und 1 ist für den Computer die Sprache, entspricht es doch aus/an, nein/ja, kein Strom/Strom. Man braucht nur zwei klar von einander getrennte Werte und schon sieht man die binäre Welt mit ganz anderen Augen. Binär kann man mit einer Hand bis 31 zählen und mit beiden Händen gar bis 1023. Nehmen wir dann noch die Zehen der Füsse dazu, sind wir bei 220-1, also 1.048.575!

Die Binärdarstellung von Zahlen wurde im zweiten Zaubertrick genutzt, um Gedanken zu lesen und Zahlen zu erraten. Mit 100 %er Treffsichheit konnte meine Zauberschülerin die richtigen Zahlen nennen. Wegen der vielen Besucher war dazu nur eine kleine Hilfe nötig: Die Zuschauer mussten sagen, auf welcher der ausgehängten Karten ihre gedachte Zahl stand.

Gedankenlesen auf der Code Week 2019 (CC BY 4.0. Körber-Stiftung, Foto: Sandra Schink
Staunendes Publikum in der Zauberschule Informatik (CC BY 4.0. Körber-Stiftung, Foto: Sandra Schink)

Bilder lassen sich auch mit 0 und 1 darstellen: weiß und schwarz. Im Bilderzauber wurde so ein 5×5 Bildpunkte (Pixel) großes Bild über das Internet übertragen. Dazu brauchte es fünf Kinder: Ein Kind-Computer, der das Bild digitalisiert und in 0 und 1 wandelt, ein Kind-Modem, das ein Seil (= Internet) zum Schwingen brachte, ein zweites Kind-Modem am anderen Ende des „Internets“ um daraus wieder 0 und 1 zu wandeln und einen Kind-Bildschirm, das aus 0 und 1 wieder Bildpunkte aufmalte. Dazu noch einen Kind-Taktgeber, über den sich die beiden Modems abstimmten, um auf einander folgende Nullen und Einsen zu unterscheiden.

Das es dabei Übertragungsfehler gab, war nicht weiter schlimm, denn der vierte Zaubertrick basierte auf Prüfsummen. 16 rot-grüne Karten durften zufällig in einem 4×4 Raster von den Kindern aufgehängt werden. Der Zauberlehrer hat dann treffsicher auf die Karte gezeigt, die – ohne das es der Zauberer sehen – konnte, umgedreht wurde. Um die Sache schwieriger zu machen, hatte der Zauberer zuvor das Ganze auf 5×5 Karten erweitert (die Prüfsummen…).

Zum Abschluss gab es schließlich noch Kuchen für alle Teilnehmer. Ganz informatisch, wurde das eine Stück Kuchen geteilt, eine Hälfte einem Teilnehmen übergeben und damit die Lösungsmenge verkleinert. Dann wieder halbieren, abgeben, halbieren, …

LEGO Roboter bauen im Rahmen der Auftaktveranstaltung zur Code Week 2019 (CC BY 4.0. Körber-Stiftung, Foto: Sandra Schink)
LEGO Roboter bauen im Rahmen der Auftaktveranstaltung zur Code Week 2019 (CC BY 4.0. Körber-Stiftung, Foto: Sandra Schink)

Am Nachmittag gab es dann wieder den Klassiker: In 4×45 Minuten haben jeweils 20 Kinder mit LEGO Education WeDo 2.0 die Forschungssonde Milo gebaut und per Tablet programmiert.

Workshops am 8. und 15. Oktober

An den beiden folgenden Dienstagen konnten jeweils 14 Kinder in dreistündigen Workshops in aller Ruhe diverse Modelle mit LEGO Education WeDo 2.0 bauen und programmieren. Wie beliebt dieser Workshop ist, hat sich insbesondere am ersten Dienstag gezeigt: Aufgrund von Kommunikationsschwierigkeiten bzgl. der Verfügbarkeit freier Plätze kamen ca. dreimal so viele Kinder wie Plätze vorhanden waren. Mein Dank an die Mitarbeiter der Bücherhalle Volksdorf, die die teilweise erhitzen Gemüter beruhigen mussten.

Jetzt wird Milo programmiert (Foto: Fin Labusch)

Nach dem gemeinsamen Bau des Einstiegsmodells (Forschungssonde Milo) konnte die Kinder selbst entscheiden, welches Modell sie als nächstes Bauen wollten. Klassischerweise bauen Jungs das Rennauto und Mädchen lieber den Hubschrauber (der muss ein Pandabärchen vor den Fluten retten). Erstaunlicherweise gab es diesmal in keinen der beiden Kurse ein Wettkampf, wer denn den stärkeren Roboter baut. Dafür die Erkenntnis eines 11jährigen:

Ich baue, er programmiert. Ich bin der Ingenieur, er ist der Informatiker.

Das macht dann auch den Veranstalter sprachlos. Sollte sich ähnliches im zweiten Kurs wiederholen?

Auch am zweiten Dienstag war das Verhältnis Mädchen:Jungs leider nur bei 1:13 und damit deutlich geringer als während der Schnupperrunden auf der Auftaktveranstaltung. Das bleibende Erlebnis kam aber von der Schülerin (4. Klasse):

Das kannst du doch einfacher machen, wenn du eine Programmschleife nimmst.

Ada, Grace, Christiane und Jade lassen Grüßen und Charles, Konrad und Alan nicken achtungsvoll… (dies sind die Bluetooth-IDs der LEGO SmartHubs benannt nach Ada Lovelace, Grace Hopper, Christiane Floyd, Jade Raymond, Charles Babbage, Konrad Zuse und Alan Turing).

Der Erdbebensimulator in Aktion. Eins von ca. 30 Modellen, die sich mit LEGO WeDo 2.0 bauen lassen (Video: Fin Labusch)

Code Week 2019 After-Afterglow

Noch läuft die Code Week, in Hamburg gibt es aufgrund der Schulferien auch in der kommenden Woche noch Angebote im Rahmen der Code Week Afterglow.

Auch meine Workshops „Roboter bauen mit LEGO WeDo 2.0“ waren so gut besucht, dass sich lange Wartelisten gebildet haben. Und aufgrund dieser hohen Nachfrage wird es für alle Nachzügler am 2. November einen Zusatzworkshop geben. Die 14 Plätze werden bevorzugt an die Teilnehmer auf den Wartelisten vergeben.

Zauberschule Informatik im Rahmen der Auftaktveranstaltung der Code Week 2019 (CC BY 4.0. Körber-Stiftung, Foto: Sandra Schink)

Und wem die „Zauberschule Informatik“ im Rahmen der Auftaktveranstaltung gefallen hat (oder wer nicht konnte), kann sich demnächst über das Meetup-Forum der Kids4IT für vollständigen Workshop anmelden (15 Teilnehmer).

Ein kurzer Bericht zur Auftaktveranstaltung ist auf der Kids4IT Homepage zu finden. Einen ausführlichen Bericht demnächst hier.

Spring Integration DSL vs. Custom ObjectMapper

Spring Integration nutzt eigene ObjectMapper. Möchte man aber genau diesen konfigurieren, dann kommt man nicht umhin, einen eigenen HttpMessageConverter zu konstruieren und diesen explizit in der Flow-Definition zu setzen:

    @Bean
    IntegrationFlow flow() {
        return IntegrationFlows.from("channelname")
                .handle(Http.outboundGateway("http://server/api?query")
                        .httpMethod(HttpMethod.GET)
                        .messageConverters(customMessageConverter())
                        .expectedResponseType(new ParameterizedTypeReference<CustomViewType>() {
                        })
                        .requestFactory(requestFactory)
                )
                .handle(spec -> customService.doSomething((CustomViewType) spec.getPayload()))
                .get();
    }

    private HttpMessageConverter<?> customMessageConverter() {
        return new MappingJackson2HttpMessageConverter(objectMapper());
    }

    private ObjectMapper objectMapper() {
        ObjectMapper mapper = new ObjectMapper();
        mapper.registerModule(...);
        // eigene Konfiguration hier
        return mapper;
    }

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.

Hier die Termine anlässlich der Code Week 2019:

Zentralbibliothek am Hühnerposten:
Sa., 5. Oktober, 10 bis 13 Uhr: Zauberschule Informatik (3 Kurse á 60 Minuten)
Sa., 5. Oktober, 14 bis 17 Uhr: Lego Roboter bauen (3 Kurse á 60 Minuten)

Bücherhalle Volksdorf
Di., 8. Oktober, 10 bis 13 Uhr: Lego Roboter bauen (dreistündiger Workshop)
Di., 15. Oktober, 10 bis 13 Uhr: Lego Roboter bauen (dreistündiger Workshop)

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