Vokabeltrainer - Backend?

[Matthias Scharwies]

Servus!

Ich möchte im August einen vielseitigen Vokabeltrainer programmieren, der dann als PWA auch offline zur Verfügung stehen soll.

Deshalb sollen die Daten in JSON-Struktur als .txt-Datei gespeichert werden.

word : [
        {
			name: "biscuit",
			description: "Brownies and crackers are …s",
			synonyms: ["cookie","brownie","cracker"],
			translation: "Keks"
        },
        {
			name: "hello",
			description: "a greeting when you meet a friend",
			synonyms: ["Hi"],
			opposites: ["Good Bye","Bye"],
			translation: "Hallo"
		},
        {
			name: "horse",
			description: "an animal you can ride on",
			synonyms: ["pony"],
			translation: "Pferd"
		},

Um mehr als die paar Beispiel-Vokabeln zur Verfügung zu haben, möchte ich mich zuerst um das Backend kümmern:

Ein Webseite enthält ein Formular zur Eingeben der Vokabeln und der anderen Begriffe. Diese werden dann in JSON umgewandelt und gespeichert.

Was würdet ihr empfehlen?

• Eine PHP-Seite mit file_put_contents()
• eine von @JürgenB vorgeschlagene JS-Lösung mit fileSaver

Vielen Dank im Voraus!

Matthias Scharwies

[dedlfix]

Tach!

Ein Webseite enthält ein Formular zur Eingeben der Vokabeln und der anderen Begriffe. Diese werden dann in JSON umgewandelt und gespeichert.

Was würdet ihr empfehlen?

Eine Datenbank. SQLite reicht dafür aus. Im Zweifelsfall hast du im Backend konkurrierenden Zugriff und fängst an, dich mit File Locking zu beschäftigen. Eine ganze Datei synchron zwischen mehreren Bearbeitern zu halten, ist nicht leicht. Da kannst du auch gleich CRUD-Funktionalität implementieren und hast maximal die Konkurrenz bei einzelnen Datensätzen.

Für den Client ist es auch kein Problem. Ob er beim Request eine Datei ausgeliefert bekommt oder ein JSON-ifiziertes Datenbankergebnis, kann er sowieso nicht unterscheiden.

dedlfix.

[Matthias Scharwies]

Servus!

Eine Datenbank. SQLite reicht dafür aus. Im Zweifelsfall hast du im Backend konkurrierenden Zugriff und fängst an, dich mit File Locking zu beschäftigen. Eine ganze Datei synchron zwischen mehreren Bearbeitern zu halten, ist nicht leicht. Da kannst du auch gleich CRUD-Funktionalität implementieren und hast maximal die Konkurrenz bei einzelnen Datensätzen.

Danke! Das wird dann mein Einstieg in SQL - bis jetzt hatte ich da noch nie mit angefangen!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

bevor Du blindlings anfängst, denk daran, dass VHIG^[1] ein Patentrezept für schlechte Software ist. Bzw. zu umfangreichen Umbauten im Verlauf des Projekts führen kann. Nicht ohne Grund beginnen Projekte mit längeren Konzeptphasen, bevor der erste Code entsteht.

Eine Datenbank als Vokabelspeicher würde ich auch empfehlen, kein Excel und kein JSON. Aber das UI und die gewünschten Funktionen bedingen auch, was die DB können muss. Und da Du ja

einen vielseitigen Vokabeltrainer

erstellen willst - der dann übrigens über den Umfang für ein Tutorial weit hinausgeht - brauchst Du vorab einen klaren Plan

• gibt es einen zentralen Vokabelfundus, der sich regelmäßig erweitert? Oder nur einen festen Satz, den man einmal downloadet und lokal speichert?
• gibt es eine Eingabemöglichkeit für eigene Vokabeln?
• brauchst Du eine eine Gruppierbarkeit der Vokabeln für jeden Anwender, denn nicht alle Schüler haben das gleiche Schulbuch
• für ein Vokabeltraining passend zu einem bestimmten Schulbuchkapitel braucht man ggf. eine Begrenzung der Übersetzungen. Man lernt mutmaßlich in Klasse 5, das "date" ein Datum ist. Und irgendwann wird man gefragt, wie der Schiffbrüchige ein Jahr überlebt hat, nur mit einem Kalender, und erfährt: "He ate the dates from the calendar". Dass man dann erstmal das Wörterbuch braucht, macht den Kalauer um so schmerzhafter.
• eine Option, die eigenen Daten (Vokabelauswahl, Lernstand) im local storage des Browsers oder doch zentral zu speichern. Vorteil von ersterem: keine Daten beim Anbieter. Nachteil: Keine Daten beim Anbieter, ich bin an das eine Gerät gebunden, auf dem die Daten stehen. Vielleicht braucht man eine Form von Upload der lokalen Daten, die mit einem Passwort verschlüsselt sind. Das kommt möglicherweise erst in Schritt drölf, aber genau das musst Du für Dich festlegen, damit Du nicht im ersten Schritt in Featuritis versinkst: Was ist das MVP, und nur das solltest Du bauen. Die Schritte 2 + 3 sollten zumindest umrissen sein

Du musst dir auch etwas überlegen, wie Du kontextbedürftige abfragst: date (Datum/Dattel), letter (Brief/Buchstabe), palm (Handfläche/Palme) - echte Homographe, sogar mit gleicher Wortart
fly (Fliege/fliegen), saw (Säge, past von to see), trip (Ausflug/stolpern)

Sprich: Halt Dich an unsere Tutorials und PLANE zuerst 😀

Rolf

---

1. Vom Hirn Ins Gerät ↩︎

[Matthias Scharwies]

Servus!

Hallo Matthias,

bevor Du blindlings anfängst, denk daran, dass VHIG[^1] ein Patentrezept für schlechte Software ist. Bzw. zu umfangreichen Umbauten im Verlauf des Projekts führen kann. Nicht ohne Grund beginnen Projekte mit längeren Konzeptphasen, bevor der erste Code entsteht.

Sprich: Halt Dich an unsere Tutorials und PLANE zuerst 😀

😀

Die Planung ist seit einigen Jahren abgeschlossen und ich bin mitten in der Umsetzung steckengeblieben. (Das ist halt nichts für ein Wochenende!) Es sollte eine Erweiterung/Anpassung des Mathe-Quiz aus dem Spiele-Kurs werden.

Lernziele:

• nicht nur EN-DE-Abfragen, sondern wie im richtigen Test
• Synonyme und Oppsoites sowie evtl. später ein Matching von definitions
• zur Auflockerung Hangman, der aus Gründen jetzt in einer nichtletalen Variante zum Snowman mutiert ist.

Deshalb sollten da auch keine Schüler Vokabeln eingeben.

Die JSON Struktur steht, zu jedem Wort gibt es auch einen Index Lernjahr/Unit. Bei einem Wechsel des Schulbuchs, was alle 3-5 Jahre passiert, müssten diese Indizes angepasst werden.

Probleme bei der Umsetzung

1. ich programmiere noch viel zu prozedural und kopiere mir irgendwelche Snippets aus dem Netz
2. Als ich anfing, hieß das ganze mobile Web-App mit HTM5; heute PWA, - es scheint aber nichts mit VanillaJS zu geben, alle setzen auf React, Fusion oder Hydrogen. (Da setz' ich mich mal mit @Felix Riesterer zusammen, der ein PWA-Tutorial in der Pipeline hat.)
3. Das Backend - da hatte ich überhaupt keinen Plan und jetzt 4 Wochen Zeit.

Wie groß die JSON im Endzustand wird, habe ich keinen Schimmer. Das entscheidet dann, ob man es im LocalStorage speichern oder mittels eines Cache manifest zum Herunterladen freigibt. (Das scheint aber auch schon wieder obsolet zu sein: https://en.wikipedia.org/wiki/Cache_manifest_in_HTML5 - bääh) - also Service Worker

Eine Datenbank als Vokabelspeicher würde ich auch empfehlen, kein Excel und kein JSON. Aber das UI und die gewünschten Funktionen bedingen auch, was die DB können muss. Und da Du ja

einen vielseitigen Vokabeltrainer

erstellen willst - der dann übrigens über den Umfang für ein Tutorial weit hinausgeht - brauchst Du vorab einen klaren Plan

Ja. Apropos. Der Kurs Webprojekte planen (Forum: self-wiki-webprojekte-planen-und-entwickeln) wartet auch noch!

• gibt es einen zentralen Vokabelfundus, der sich regelmäßig erweitert? Oder nur einen festen Satz, den man einmal downloadet und lokal speichert?

Evtl. einen Check, ob es ein monatliches Update gab.

• gibt es eine Eingabemöglichkeit für eigene Vokabeln?

Nein

• brauchst Du eine eine Gruppierbarkeit der Vokabeln für jeden Anwender, denn nicht alle Schüler haben das gleiche Schulbuch

Soll nur für unsere Schule, nicht für jeden Verwendungszweck dienen. (*Wäre natürlich optimal, alle Vokabeln nach Schulbuch zu kategorisieren: GA5.3, RL5.2, GL5.1, etc *)

• für ein Vokabeltraining passend zu einem bestimmten Schulbuchkapitel braucht man ggf. eine Begrenzung der Übersetzungen. Man lernt mutmaßlich in Klasse 5, das "date" ein Datum ist. Und irgendwann wird man gefragt, wie der Schiffbrüchige ein Jahr überlebt hat, nur mit einem Kalender, und erfährt: "He ate the dates from the calendar". Dass man dann erstmal das Wörterbuch braucht, macht den Kalauer um so schmerzhafter.

Das ist das Problem der Übersetzungen. Bei uns in der 6. Klasse gab es die Vokabel

			name: "cyberbully",
			description: "The police found the cyberbully",
			synonyms: [],
			translation: "cyberbully"

WTF? Lerneffekt: 0, da die Schüler nicht wussten, was das deutsche Wort bedeutet.

• eine Option, die eigenen Daten (Vokabelauswahl, Lernstand) im local storage des Browsers oder doch zentral zu speichern. Vorteil von ersterem: keine Daten beim Anbieter. Nachteil: Keine Daten beim Anbieter, ich bin an das eine Gerät gebunden, auf dem die Daten stehen. Vielleicht braucht man eine Form von Upload der lokalen Daten, die mit einem Passwort verschlüsselt sind. Das kommt möglicherweise erst in Schritt drölf, aber genau das musst Du für Dich festlegen, damit Du nicht im ersten Schritt in Featuritis versinkst: Was ist das MVP, und nur das solltest Du bauen. Die Schritte 2 + 3 sollten zumindest umrissen sein

Mein Eindruck aus dem Distanzlernen (der Begriff Home-Schooling ist durch die religiösen Schulverweigerer in den USA belegt): Der durchschnittliche 5.-7.-Klässler hat keinen PC mehr, sondern entweder ein altes Smartphone oder ein Tablet, Jungs ab der 7. Klasse haben einen Gaming-PC mit Wasserkühlung (aber keine Zeit für's Lernen).

Deshalb: Lernen/spielen auf einem Gerät - kein Speichern von Nutzer-Daten auf dem Server. wenn Du das Speichern würdest, hättest du einerseits Verweigerer da und andererseits Leute, die eine gute Note für erfolgreiches Vokabellernen in der App einfordern.

Du musst dir auch etwas überlegen, wie Du kontextbedürftige abfragst: date (Datum/Dattel), letter (Brief/Buchstabe), palm (Handfläche/Palme) - echte Homographe, sogar mit gleicher Wortart

In En-DE ergibt sich das aus der entsprechenden Unit, evtl. könne man translation erweitern:

translation: ["Datum", "Dattel"],

Man muss auch sehen, dass ein Vokabeltrainer ein Mittel zum Zweck ist und es Alternatven gibt: Mind Maps, Bücher lesen, etc.

Herzliche Grüße

Matthias Scharwies

[MudGuard]

Hi,

Die JSON Struktur steht, zu jedem Wort gibt es auch einen Index Lernjahr/Unit. Bei einem Wechsel des Schulbuchs, was alle 3-5 Jahre passiert, müssten diese Indizes angepasst werden.

Ist das Programm nur für (D)eine Schule konzipiert?

In verschiedenen Schularten (Gymnasium/Realschule/Gesamtschule/...)/Bundesländern sind gleichzeitig verschiedene Bücher/Lernziele im gleichen Lehrjahr relevant.

Und es könnte auch noch davon abhängen, ob die Fremdsprache die erste, zweite, dritte für die Schüler ist …

cu,
Andreas a/k/a MudGuard

[Matthias Scharwies]

Servus!

Hi,

Die JSON Struktur steht, zu jedem Wort gibt es auch einen Index Lernjahr/Unit. Bei einem Wechsel des Schulbuchs, was alle 3-5 Jahre passiert, müssten diese Indizes angepasst werden.

Ist das Programm nur für (D)eine Schule konzipiert?

brauchst Du eine eine Gruppierbarkeit der Vokabeln für jeden Anwender, denn nicht alle Schüler haben das gleiche Schulbuch

Soll nur für unsere Schule, nicht für jeden Verwendungszweck dienen. (*Wäre natürlich optimal, alle Vokabeln nach Schulbuch zu kategorisieren: GA5.3, RL5.2, GL5.1, etc *)

In verschiedenen Schularten (Gymnasium/Realschule/Gesamtschule/...)/Bundesländern sind gleichzeitig verschiedene Bücher/Lernziele im gleichen Lehrjahr relevant.

Ich weiß!

Und es könnte auch noch davon abhängen, ob die Fremdsprache die erste, zweite, dritte für die Schüler ist …

Wie gesagt, es soll ein VokabelTrainer werden und keine eierlegende Wollmilchsau, die alle Wörterbücher und einen Thesaurus ersetzt.

Herzliche Grüße

Matthias Scharwies

[Der Martin]

Hallo Matthias,

• nicht nur EN-DE-Abfragen, sondern wie im richtigen Test

was meinst du konkret? Soweit ich meine Schulzeit noch in Erinnerung habe, gab es zum einen die "großen" Klassenarbeiten (4..6 pro Halbjahr mit Ansage, meist eine, manchmal auch zwei ganze Schulstunden), und zwischendrin in unregelmäßiger Folge Kurztests (meist unangekündigt). Da waren dann kurze Sätze oder Phrasen zu übersetzen, meist nur von der Fremdsprache ins Deutsche (umgekehrt etwas seltener). Zeit dafür: In der Regel 15..20min.
Eine reine Vokabel-Abfrage gab es nicht, IIRC.

Das ist das Problem der Übersetzungen. Bei uns in der 6. Klasse gab es die Vokabel

			name: "cyberbully",
			description: "The police found the cyberbully",
			synonyms: [],
			translation: "cyberbully"

WTF? Lerneffekt: 0, da die Schüler nicht wussten, was das deutsche Wort bedeutet.

Ehrlich gesagt, ich auch nicht.

Du musst dir auch etwas überlegen, wie Du kontextbedürftige abfragst: date (Datum/Dattel), letter (Brief/Buchstabe), palm (Handfläche/Palme) - echte Homographe, sogar mit gleicher Wortart

In En-DE ergibt sich das aus der entsprechenden Unit, evtl. könne man translation erweitern:

translation: ["Datum", "Dattel"],

Schwierig. Denn dann müsste man immer noch kontextabhängig zwischen falsch und richtig unterscheiden, denn "Tragen Sie bitte die Dattel Ihrer Ankunft ein" ist Unfug.
Nebenbei: Die Bedeutung von date als Dattel kannte ich bis eben auch noch nicht.

Man muss auch sehen, dass ein Vokabeltrainer ein Mittel zum Zweck ist und es Alternatven gibt: Mind Maps, Bücher lesen, etc.

Ja! Unbedingt ja!

Live long and pros healthy,
 Martin

[Matthias Scharwies]

Servus!

Hallo Matthias,

• nicht nur EN-DE-Abfragen, sondern wie im richtigen Test

was meinst du konkret? Soweit ich meine Schulzeit noch in Erinnerung habe, gab es zum einen die "großen" Klassenarbeiten (4..6 pro Halbjahr mit Ansage, meist eine, manchmal auch zwei ganze Schulstunden), und zwischendrin in unregelmäßiger Folge Kurztests (meist unangekündigt).

Das ist von Bundesland zu Bundesland, Schulform- und Schulabhängig. Und Deine Schulzeit ist ja auch schon länger her. 😀

Da waren dann kurze Sätze oder Phrasen zu übersetzen, meist nur von der Fremdsprache ins Deutsche (umgekehrt etwas seltener).

Das ist eine Übersetzung! Die gibt es bei uns an der Realschule nicht mehr (da wären ja auch Kenntnisse der Muttersprache erforderlich - duckundwech^[1]), dafür eine Sprachmittlung (Mediation)

Eine reine Vokabel-Abfrage gab es nicht, IIRC.

Bei uns manchmal - aber wie das Bsp. cyberbully-cyberbully zeigt, ist das isoliert eher sinnlos.

Da auch die Tests/Leistungsnachweise einsprachig sind, sollst du in Use of English synonyms und opposites finden, evtl. (unbekannte) Begriffe mit definitions matchen (Da die Begriffe im Text stehen, kannst du aus dem Kontext erschließen) und dann Vokabeln aus word families bilden. Spätestens sowas kannst du eben nicht mit reinem Auswendig-Lernen von Wortpaaren schaffen.

Man muss auch sehen, dass ein Vokabeltrainer ein Mittel zum Zweck ist und es Alternatven gibt: Mind Maps, Bücher lesen, etc.

Ja! Unbedingt ja!

Herzliche Grüße

Matthias Scharwies

---

1. Ich erinnere mich an meine erste Abschlussprüfung, als die Zweitkorrektorin für "more and more" das „mehr und mehr“ der Schüler als falsch anstrich, da nur „immer mehr“ richtiges Deutsch sei. Auch bei falsch übersetzten Zeiten gab es Punktabzug. ↩︎

[MudGuard]

Hi,

Das ist eine Übersetzung! Die gibt es bei uns an der Realschule nicht mehr (da wären ja auch Kenntnisse der Muttersprache erforderlich - duckundwech[^1]),

Wieso? Reichen dafür nicht Deutsch und Englisch?

cu,
Andreas a/k/a MudGuard

[Matthias Scharwies]

Servus!

Hi,

Das ist eine Übersetzung! Die gibt es bei uns an der Realschule nicht mehr (da wären ja auch Kenntnisse der Muttersprache erforderlich - duckundwech[^1]),

Wieso? Reichen dafür nicht Deutsch und Englisch?

Wie in der Fußnote erklärt, musste die Übersetzung aus dem Englischen nicht nur die Wörter an sich ins Deutsche übersetzen, der so entstandene deutsche Text musste auch grammatikalisch und idiomatisch richtig sein.

Das war lange Zeit ok - irgendwann galt das als Vermischung zweier Fertigkeiten, nämlich der Beherrschung sowohl der Fremd- als auch der Muttersprache Deutsch. 2005 wurde das dann abgeschafft. Schließlich wollen nur die wenigsten Realschüler mal Übersetzer werden.

Bei der Überarbeitung der Abschlussprüfung wurden auch die Fragen zum Text ("Answer in complete sentences!") abgeschafft: Vermischung von Leseverständnis und Schreibfertigkeiten. Stattdessen gibt es im Leseverstehen nur noch Ankreuz-, Zuordnungsaufgaben und eben die Mediation, bei der nur die sinngemäße Übertragung ins Deutsche bewertet wird.

Herzliche Grüße

Matthias Scharwies

[Der Martin]

Hallo,

Wie in der Fußnote erklärt, musste die Übersetzung aus dem Englischen nicht nur die Wörter an sich ins Deutsche übersetzen, der so entstandene deutsche Text musste auch grammatikalisch und idiomatisch richtig sein.

also ich würde das auch heute noch fordern.

Das war lange Zeit ok - irgendwann galt das als Vermischung zweier Fertigkeiten, nämlich der Beherrschung sowohl der Fremd- als auch der Muttersprache Deutsch.

Mein Vater hat mal von seinem Lateinlehrer berichtet, einem Russen, der aber anscheinend besser Deutsch konnte als die meisten Deutschen. Dem konnte in deutscher Rechtschreibung, Zeichensetzung und Grammatik wohl keiner was vormachen. Und zum Leidwesen der Schüler hat der bei Übersetzungen Latein→Deutsch die Fehler im Deutschen doppelt gewichtet. "Das ist eure Muttersprache, das müsst ihr können", war sein Standpunkt.

Bei der Überarbeitung der Abschlussprüfung wurden auch die Fragen zum Text ("Answer in complete sentences!") abgeschafft: Vermischung von Leseverständnis und Schreibfertigkeiten. Stattdessen gibt es im Leseverstehen nur noch Ankreuz-, Zuordnungsaufgaben und eben die Mediation, bei der nur die sinngemäße Übertragung ins Deutsche bewertet wird.

Das ist der prgmatische Standpunkt; schließlich ist das sinngemäße Verstehen das, worauf es dann in der Praxis ankommt. Allerdings ist es IMHO ein Euphemismus. wenn man dann noch behauptet, man würde eine Fremdsprache lehren bzw. lernen. Man lehrt/lernt eben nur noch Grundfertigkeiten dieser Sprache.

Live long and pros healthy,
 Martin

[MudGuard]

Hi,

Das ist eine Übersetzung! Die gibt es bei uns an der Realschule nicht mehr (da wären ja auch Kenntnisse der Muttersprache erforderlich - duckundwech[^1]),

Wieso? Reichen dafür nicht Deutsch und Englisch?

Wie in der Fußnote erklärt, musste die Übersetzung aus dem Englischen nicht nur die Wörter an sich ins Deutsche übersetzen, der so entstandene deutsche Text musste auch grammatikalisch und idiomatisch richtig sein.

Ja, da stimme ich ja auch mit überein.

Ich spielte auf die Tatsache an, daß bei vielen Schülern heutzutage Deutsch nicht die Muttersprache ist …

cu,
Andreas a/k/a MudGuard

[JürgenB]

Hallo Matthias,

soll die Datei mit den Vokabeln denn auch offline erstellt werden (können)?

Gruß
Jürgen

[Matthias Scharwies]

Servus!

Hallo Matthias,

soll die Datei mit den Vokabeln denn auch offline erstellt werden (können)?

Nein, eher nicht. Das soll ohne Rück-Verbindung zum Server laufen.

• Persönliche Daten und Punkte nur mit LocalStorage speichern (Datenschutz)
• Vokabeln eben nicht Dt-En, sondern Synonyms und Erklärungen, das soll nicht jeder selbst eingeben müssen (Eine Schülerin jammerte, dass es sehr lange dauern würde, die neuen Vokablen im kommerziellen Vokabeltrainer eingeben/freischalten zu müssen?!)

Herzliche Grüße

Matthias Scharwies

[klawischnigg]

Hi there,

Was würdet ihr empfehlen?

• Eine PHP-Seite mit file_put_contents()
• eine von @JürgenB vorgeschlagene JS-Lösung mit fileSaver

Ein Excel-Spreadsheet. Dann kannst Du auch komplett Ahnungslosen die Eingabe überlassen...

[Matthias Scharwies]

Servus!

Hi there,

Was würdet ihr empfehlen?

• Eine PHP-Seite mit file_put_contents()
• eine von @JürgenB vorgeschlagene JS-Lösung mit fileSaver

Ein Excel-Spreadsheet. Dann kannst Du auch komplett Ahnungslosen die Eingabe überlassen...

Ich dachte eher an ein passendes Formular, das dort eben auch die Eingaben sortiert. Dass die Eingabe in eine JSON-Struktur nicht trivial ist, merk ich immer wieder..

Aber wie komm ich von Excel zu JSON, um meine Frontend-Webseite zu beliefern?

Ah: https://beautifytools.com/excel-to-json-converter.php

Herzliche Grüße

Matthias Scharwies

[klawischnigg]

Hi there,

Ein Excel-Spreadsheet. Dann kannst Du auch komplett Ahnungslosen die Eingabe überlassen...

Ich dachte eher an ein passendes Formular, das dort eben auch die Eingaben sortiert. Dass die Eingabe in eine JSON-Struktur nicht trivial ist, merk ich immer wieder..

Eingabeform ist natürlich immer besser, auch weil Du da schon bei der Eingabe Validierungen vornehmen kannst. Aber - erstens ist der Aufwand meist ungleich größer und zweitens, als Mann der Praxis, der es (leider) ständig mit Bürofuzzies aller Arten zu tun hat, hab' ich die Erfahrung gemacht, daß viele Anwender (vor allem, wenn sie viele Datensätze eingeben müssen) ein dämliches Excel-Formular einer Eingabeform vorziehen. Da kennen sie sich aus, da haben sie den gewohnten Überblick und darin können sie korrigieren was und wie oft sie möchten. Man muß halt sicherstellen, daß sie an der Struktur nix herumpfuschen (unbelesenen Usern passiert so etwas gelegentlich;))

Aber wie komm ich von Excel zu JSON, um meine Frontend-Webseite zu beliefern?

Ah: https://beautifytools.com/excel-to-json-converter.php

Kannte ich nicht, schaut aber praktisch aus. Ich hab mir so etwas schon vor zig Jahren selbst geschrieben. Was halt auch noch wichtig ist (zumindest bei meinem Skript), daß die Excel-Datei als xl5 oder so gespeichert wird, mit dem .xlsx-Format wollt ich mich nicht mehr weiter beschäftigen...

[Rolf B]

Hallo Matthias,

angesichts der "problematischen Seite"...

Ich finde die Verkürzung auf Mobilgeräte unpassend. Eine PWA ist keine Spezialität für Mobilteile, sie muss auf einem Desktop genauso gut funktionieren.

MDN listet ein paar Stichworte, die eine PWA charakterisieren. Interessanterweise ist keins dieser Features unabdingbar.

• Discoverability: Ein Crawler findet eine Site, findet auf index.html die Link-Relation zum Manifest und kann die App mit diesen Infos (vor allem: Name und Icon) präsentieren
• Progressive Enhancement: Das ist eigentlich eine Anforderung an alle Webseiten und benötigt eigentlich keine gesonderte Erwähnung.
• Responsiveness: Ebenfalls eine Standardanforderung, vor allem, wenn die App auf Mobil und Desktop laufen können soll.
• Safety: https. Verhindert Datenschnüffelei und stellt über das Zertifikat, sicher, dass man die App auch von der richtigen Seite installiert.
• Installability: Ist tatsächlich ohne Serviceworker möglich, man braucht nur ein Manifest mit Name und Icon. Dass die App komplett aus dem Netz kommt, merkt man ggf. nur am Start-Tempo
• Network independence: Der Service Worker, der Netzwerkzugriffe auf die im Worker gespeicherten Daten umlenkt. Funktioniert auch ohne Installability.

Und dann kommt noch einer, der eher nervt:

• Re-engageability: Das sind die Notifications. Webseiten und ihre Serviceworker können um Erlaubnis fragen, ob man Notifications haben möchte. Damit sie einem hinterherrennen und Produkte aufdrängen können.

Ich weiß nicht, wie deine Pläne für diesen Abschnitt sind - vor allem, weil Du ja offenbar den Vokabeltrainer als Grundlage für das PWA Tutorial bauen willst, deswegen editiere ich jetzt nicht einfach da 'rum.

Rolf

[dedlfix]

Tach!

Was ist der Unterschied zwischen einer PWA und einer PMWA (progressive mobile web app)?

Ich sehe da keinen. Die Technik hinter PWA funktioniert auch in den Desktopbrowsern gleich. Man hat immer einen Minicache, den der Browser verwaltet, und aus dem bevorzugt die Ressourcen geladen werden.

Mobilgeräte verhalten sich aber anders. Es gibts zusätzlich die Möglichkeit, ein Lesezeichen zu erstellen, das sich wie eine App verhält. Man kann es wie die anderen Apps auf dem Desktop ablegen. Und es öffnet sich dann ein Browser ohne Bedienelemente, also wie Kiosk-Mode.

dedlfix.

[Rolf B]

Hallo dedlfix,

falls sich einer wundert, was Du da zitiert hast - ich bin mittlerweile zur gleichen Erkenntnis gekommen und habe den Beitrag umformuliert.

Installation auf dem Desktop - oder Homescreen - ist übrigens auch auf PCs möglich.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

angesichts der "problematischen Seite"...

Ich finde die Verkürzung auf Mobilgeräte unpassend. Eine PWA ist keine Spezialität für Mobilteile, sie muss auf einem Desktop genauso gut funktionieren.

Ich weiß nicht, wie deine Pläne für diesen Abschnitt sind

Das waren mal 3 ToDos: mobile HTML5-App (mit Mathe-Quiz drin); PWA als Stub und dazu noch ein Stub hybride Web-App. 2016-2018 hatte ich noch die Hoffnung, dass sich da einer (oder mehrere) finden würde(n).

Ist wsl. im Thread untergegangen:

2. Als ich anfing, hieß das ganze mobile Web-App mit HTM5; heute PWA, - es scheint aber nichts mit VanillaJS zu geben, alle setzen auf React, Fusion oder Hydrogen. (Da setz' ich mich mal mit @Felix Riesterer zusammen, der ein PWA-Tutorial in der Pipeline hat.)

@Felix Riesterer hat ja eine PWA für seine Schule entwickelt und daraus ein Tutorial rund um einen Taschenrechner geschrieben. Letzter Stand war, dass es für ein Tutorial zu lang ist und er es versucht in mehrere Unterseiten zu gliedern. Ich habe ihn heute gesehen und keine Zeit / Gelegenheit gehabt, mit ihm drüber zu reden. 😉

• vor allem, weil Du ja offenbar den Vokabeltrainer als Grundlage für das PWA Tutorial bauen willst, deswegen editiere ich jetzt nicht einfach da 'rum.

Das hatte ich früher mal wirklich vor. Es ist einerseits interessant, da man ausgehend von der Anfängerübung "Bau mal ein Vokabelquiz mit Abfrage-Formular" hin zu Objektorientierten JSON und der OOP kommen kann. Andererseits ist ein Vokabeltrainer zu sehr auf Schule bezogen. Die OOP sollte aber mit etwas allgemeingültigem anfangen.

Soll nur für unsere Schule, nicht für jeden Verwendungszweck dienen. (*Wäre natürlich optimal, alle Vokabeln nach Schulbuch zu kategorisieren: GA5.3, RL5.2, GL5.1, etc *)

Es gibt leider noch zu viele Eltern, die ihre Kinder die Vokabeln nur EN-DE lernen lassen. Auch Phase 6 arbeitet so. Zusätzlich kann man bei Phase6 - jedenfalls bei der Testversion, die ich hatte - eine falsche Antwort mit Tippfehlern doch gelten lassen. - Da kommt dann bei Schülern die Frage: "Zählt im Englischen die Rechtschreibung?" - Armes Deutschland!

Herzliche Grüße

Matthias Scharwies