HTML5-Tutorium: JavaScript: Hello World Vue 05

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3 (zu größeren Teilen überprüft)

Umfang: 4 (unwichtige Fakten fehlen)

Quellenangaben: 3 (wichtige Quellen vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 3 (gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6

Musterlösung
Git-Repository, git checkout v05 (JavaScript)
Git-Repository (TypeScript), git checkout v05

Anwendungsfälle (Use Cases)

Gegenüber dem ersten, zweiten und dritten Teil des Vue-Tutoriums ändern sich die die Anwendungsfälle zunächst nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

Zum Schluss wird die Anwendung allerdings erweitert. Die Begrüßung erfolgt in der vom Browser als Favorit angegebenen Sprache, sofern die Begrüßungsdaten für diese Sprache hinterlegt wurden. Anderenfalls erfolg die Begrüßung ein der Defaultsprache.

Aufgabe

Aufgabe: Konfigurieren und internationalisieren Sie die Anwendung mit Hilfe von dynamischen JSON-Dateien.

Erstellen eines neuen Projektzweigs

Erstellen Sie einen neuen Projektzweig (branch) innerhalb von hello_world_vue und fügen Sie das Package uuid hinzu:

git checkout v04     # Wechsle in den Branch v04
git checkout -b v05  # Klone v04 in einen neuen Branch v05
npm i

Kofigurationsdateien

Konfigurationsdatei

Die folgende Datei dient zur statischen Konfiguration der Anwendung. Der Inhalt wird in die App fest eingebunden und kann in der laufenden Anwendung ohnen einen Rebuild nicht geändert werden.

// src/json/config.json

{ "startSection": "question" }

Internationalisierungsdateien

Die folgenden Dateien sollten zu Laufzeit dynamisch, anhängig von der gewünschten Sprache eingelesen werden. Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

// public/json/i18n_de.json

{ "phrases":
  { "hello": "Hallo, $1!"
  },

  "i18n":
  { "stranger":       "Fremder",
    "askName":        "Wie heißen Sie?",
    "welcome":        "Willkommen zu Web-Programmierung!",
    "buttonReset":    "Reset",
    "buttonSayHello": "Begrüßung"
  }
}

// public/json/i18n_en.json

{ "phrases":
  { "hello": "Hello, $1!"
  },

  "i18n":
  { "stranger":       "Stranger",
    "askName":        "What's your name?",
    "welcome":        "Welcome to Web Programing!",
    "buttonReset":    "reset",
    "buttonSayHello": "say hello"
  }
}

Er können jederzeit I18n-Dateien für weitere Sprachen definiert werden.

Fortsetzung des Tutoriums

Sie sollten nun Teil 6 des Vue-Tutoriums bearbeiten. In diesem Tutorium setzen Sie Routing ein, auch wenn das für die Hello-World-Anwendung nicht sonderlich sinnvoll ist.

Quellen

1. Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)