Lab für das mobile Web: eine responsive, installierbare Web-App im Browser bauen

Dieses Lab gibt allen Lernenden ein eigenes JupyterLab und eine kleine Web-App zum Bearbeiten: einen Gewohnheits-Tracker mit einer Seite, einem Stylesheet, einem Skript, einem Manifest und einem Service Worker. Ein zweiter Link, Preview (Vorschau), zeigt die App so, wie sie gerade ist: Die Lernenden bearbeiten eine Datei in JupyterLab, speichern sie und laden die Vorschau in ihrem eigenen Browser neu, mit schmalem Fenster oder in der Geräteansicht des Browsers, um zu sehen, wie es auf einem Handy aussieht.

Es ist kein Angriffs-Lab. Keine Kopie hat einen Weg ins Internet oder zu anderen Lernenden, also kann nichts hineingeladen werden und nichts darin jemand anderen erreichen.

Was die Lernenden lernen

Warum eine Seite das Viewport-Tag braucht, um auf einem Handy in der richtigen Breite gezeichnet zu werden, wie ein Mobile-first-Stylesheet Media Queries bei 600 und 900 Pixeln hinzufügt und warum eine Schaltfläche mindestens etwa 44 Pixel groß sein sollte, damit man sie mit dem Daumen trifft. Dann die beiden Dateien, die eine Web-App installierbar und offline nutzbar machen: das Manifest mit Name, Symbolen und Farben und einen Service Worker, der eine Liste von Dateien in einem Cache sichert. Außerdem wägen sie ab, was eine mobile Web-App neben einer nativen App kann und was nicht. Das Lab hat keinen eigenen Browser: Was ein Browser danach tut, etwa anzubieten, die App zu installieren, sehen die Lernenden in ihrem eigenen. Es passt zu Einführungen in die Webentwicklung und in das mobile Design; prüfen Sie den genauen Wortlaut in der Einheit Ihrer eigenen Prüfungsstelle, hier wird keine zitiert.

Im Browser ausführen

Das Lab startet einen Dienst, jupyter, der die App, zwei Symbole, ein Notebook und die kurzen Skripte in seinen Arbeitsordner schreibt und einen kleinen statischen Server auf dem Ordner app/ startet. Er braucht im Leerlauf etwa 80 MB, innerhalb der 512 MB, die ein Dienst haben darf. JupyterLab fragt nach keinem Token, weil die Tür der Plattform schon weiß, wer es öffnet. Das Terminal neben dem Lab hat kein eigenes Python und erreicht deshalb das des Labs mit docker exec jupyter, gefolgt von dem Befehl, der darin laufen soll.

  1. Container-Seite öffnen. Öffnen Sie in der Leiste „Entwickeln“ und wählen Sie „Einen Container ausführen“. Die Seite kann jeder öffnen, und das Git-Lab und das SQL-Lab starten ohne Konto. Alle anderen Labs brauchen ein kostenloses Konto: Erstellen Sie eines, melden Sie sich an und klicken Sie dann auf „Starten“.
  2. Lab suchen. Die Karte „Beispiel-Labs“ listet alle Beispiele auf. Suchen Sie Mobiles Web: ein responsiver Gewohnheits-Tracker.
  3. Auf „Starten“ klicken. „Starten“ führt das Lab unverändert mit einem einzigen Klick aus. „Zuerst die Datei bearbeiten“ öffnet die Compose-Datei, damit Sie sie vor dem Start ändern können.
  4. Öffnen. Auf der Seite des Labs hat die Lab-Leiste zwei Links, JupyterLab und Preview. Klicken Sie auf Preview, um die App in Ihrem Browser zu sehen, und machen Sie das Fenster schmal. Klicken Sie auf JupyterLab und doppelklicken Sie auf start.ipynb, oder klicken Sie auf „Terminal öffnen“ und tippen Sie docker exec jupyter python3 steps/viewport.py, um zu sehen, dass das Viewport-Tag gefunden wird.

Was die Lernenden abgeben sollen

Die Datei app/style.css, aus JupyterLab mit File, Download heruntergeladen, nachdem sie die kleinen Schaltflächen (die Schaltfläche Add, die Filter-Schaltflächen und die runde Erledigt-Schaltfläche) auf mindestens 44 Pixel gebracht haben, und ein oder zwei Sätze dazu, was sie geändert und wie sie es im eigenen Browser geprüft haben. Wer steps/touch.py vorher und nachher ausführt, sieht die Änderung: Es beginnt mit vier Größen unter 44, und eine fertige Abgabe hat keine mehr. Nichts wird automatisch bewertet, und der Satz zeigt, ob es verstanden wurde. Für anspruchsvollere Arbeit verlangen Sie das fehlende background_color im Manifest oder die Datei, die der Service Worker auflistet und die nicht existiert, mit einer Notiz, warum die Installation ohne sie scheitern würde.

Eine Grundlagenlektion zu diesem Lab

Mobile Web Basics ist eine kleine Lektion, die in diesem Lab abläuft. Darin listen die Lernenden die App auf, fragen den Vorschau-Server nach drei Dateien, finden das Viewport-Tag, listen die Media Queries auf, zählen die Schaltflächen unter 44 Pixeln, prüfen das Manifest und die Dateiliste des Service Workers.

Kostenlose persönliche Konten haben sie im Modul Basics, das auf der Startseite liegt, und jede Schule kann sie aus dem Ordner Basics der Bibliothek kopieren. Sie ist absichtlich klein: Sie zeigt einer Lehrkraft, was eine Lektion in einem Lab ist, und das Lab erledigt den Rest. Kopieren Sie sie in ein eigenes Modul, um sie zu ändern.

Der Code auf GitHub

Die Compose-Datei hat kein Dockerfile: Sie führt ein einziges öffentliches Standard-Image aus, das scipy-notebook der Jupyter Docker Stacks, auf ein datiertes Tag festgelegt, als eigenes unprivilegiertes Konto mit 512 MB Speicher. Das Image steht unter BSD-3-Clause und wird von uns nicht verteilt. Die Datei schreibt die App beim Start aus festem Text, jede Kopie ist also gleich und nichts wird heruntergeladen. Die Grenzen sind ehrlich: Die App ist klein, im Lab gibt es weder Browser noch Handy, ein Browser kann einen Service Worker auf einer nicht sicheren Adresse ablehnen, nichts lässt sich aus dem Internet installieren, und beim Stoppen des Labs bleibt nichts erhalten, die Lernenden laden ihre Dateien also vorher herunter.

Als Aufgabe stellen

Schreiben Sie in die Aufgabe, was abgegeben werden soll.

  1. Lab erstellen. Fügen Sie in Ihrem Modul eine Aufgabe hinzu und wählen Sie die Karte „Container-Lab“, dann „In einem GitHub-Repository“. Geben Sie https://github.com/mitsurutech/lab-mobile-web mit dem Branch main an. Die Compose-Datei ist standardmäßig compose.yaml. Forken Sie das Repository zuerst, wenn Sie es ändern möchten, zum Beispiel um die App zu ändern.
  2. Veröffentlichen und ausprobieren. „Veröffentlichen“ legt den Commit fest, den Sie gesehen haben. Eine spätere Änderung im Repository verändert also kein Lab, das Sie bereits gestellt haben. Starten Sie zuerst Ihre eigene Kopie.
  3. Zuweisen. Weisen Sie es wie jede Aufgabe zu, auf Wunsch mit Fälligkeitsdatum, und schreiben Sie in die Aufgabe, was zu tun ist und was abgegeben werden soll.
  4. Abgaben bewerten. Öffnen Sie die Kopie einer lernenden Person und die abgegebene Arbeit, bewerten Sie sie und geben Sie sie mit einer Begründung zur Überarbeitung zurück, wenn mehr nötig ist.

Dieses Lab ausprobieren, und was es kostet

Mit einem kostenlosen persönlichen Konto können Sie die Grundlagenlektionen in diesem Lab durcharbeiten, mit genug kostenlosem Guthaben pro Monat für die meisten Lektionen und ohne Karte. Für eine Klasse sind die ersten 365 Tage für eine Schule kostenlos, für bis zu 50 Lernende; danach zahlt sie je lernender Person und Jahr, alle Labs inklusive und Lehrkräfte kostenlos.

Häufige Fragen

Wie sehen die Lernenden das Handy-Layout?
Das Lab hat keinen eigenen Browser. Sie öffnen den Link Preview in ihrem eigenen Browser und machen das Fenster schmal oder nutzen die Geräteansicht des Browsers, falls er eine hat. Das zeigt das Layout. Es zeigt nicht, wie sich ein Daumen anfühlt oder wie der Browser des Handys sich verhält, ein echtes Handy ist also besser, wenn eines zur Hand ist.
Warum installiert sich der Service Worker auf dem Vorschau-Link nicht?
Ein Browser erlaubt einen Service Worker nur auf einer sicheren Adresse, und der Vorschau-Link zählt vielleicht nicht in jedem Browser als solche. Die App funktioniert trotzdem ohne ihn. Die Konsole des Browsers sagt, ob er abgelehnt wurde. Das Skript steps/offline.py prüft die Dateiliste in jedem Fall und zeigt die eine Datei, die es nicht gibt.
Warum muss ich kein Token und kein Passwort eingeben?
Die Webseiten eines Labs sind nur über die Tür der Plattform erreichbar, die schon weiß, wer Sie sind, und nur Sie und die Lehrkräfte Ihres Moduls hereinlässt. Deshalb wird JupyterLab ohne Token gestartet. Starten Sie es nicht so auf einem Rechner, den jemand anderes erreichen kann.