GlossarWiki - Benutzerbeiträge [de-formal]

Master-Studiengang Interaktive Mediensysteme (SPO 2014)

2026-02-15T17:27:27Z

Kowa: /* Detailinformationen */

{{Studiengang
|stgname=Interaktive Mediensysteme
|kuerzel=IMS 2014
|abschluss=Master
|spo=https://www.hs-augsburg.de/Binaries/Binary46888/SPO-MA-IMS-WS2021.pdf
|datum=2014/01/28
|homepage=https://www.hs-augsburg.de/interaktive-medien/ims/
|fakultaet=FKG, FKI
|studienbeginn=jedes Semester
|studienabschnitte=Nein
}}
==Studienplan==
<table style="width: 53.6em; border-collapse: collapse;" class="studienplan">

<tr><th> </th><th style="border: 1px solid #222; background: #555;" class="top white"><strong>1. Semester</strong></th><th style="border: 1px solid #222; background: #555;" class="top white"><strong>2. Semester</strong></th><th style="border: 1px solid #222; background: #555;" class="top white"><strong>3. Semester</strong></th></tr>

<tr style="border: 1px solid #222;>
<td style="border: 1px solid #222;" class="top bgblau white"><strong>Masterprojekt</strong></td>
<td style="border: 1px solid #222; line-height: 1.6em;" class="top bgblau white">[[Modul:IMS_2014:Masterprojekt_Konzeption|Masterprojekt Konzeption]]<br />4 SWS, 15 CP</td>
<td style="border: 1px solid #222; line-height: 1.6em;" class="top bgblau white">[[Modul:IMS_2014:Masterprojekt_Produktion|Masterprojekt Produktion]]<br />4 SWS, 15 CP</td>
<td style="border: 1px solid #222; line-height: 1.6em;" class="top bgblau white">[[Modul:IMS_2014:Masterarbeit|Masterarbeit]]<br />25 CP</td>
</tr>
<tr style="border: 1px solid #222;>
<td style="border: 1px solid #222;" class="top bgorange white"><strong>Kernfächer</strong></td>
<td style="border: 1px solid #222; line-height: 1.6em;" class="top bgorange white" colspan="2">[[Modul:IMS_2014:Kernf%C3%A4cher|Kernfächer]]<br />8 SWS, 10 CP</td>
<td style="border: 1px solid #222; line-height: 1.6em;" class="top white"></td>
</tr>
<tr style="border: 1px solid #222;">
<td style="border: 1px solid #222;" class="top bgrot white"><strong>Workshops und Seminare</strong></td>
<td style="border: 1px solid #222; line-height: 1.6em;" class="top bgrot white" colspan="2">[[Modul:IMS_2014:Workshops_und_Seminare|Workshops und Seminare]]<br />8 SWS, 10 CP</td>
<td style="border: 1px solid #222;line-height: 1.6em;" class="top white"></td>
</tr>
<tr style="border: 1px solid #222;>
<td style="border: 1px solid #222;" class="top bgdgrau white"><strong>Allgemeine Begleitfächer</strong></td>
<td style="border: 1px solid #222; line-height: 1.6em;" class="top bgdgrau white">[[Lehrveranstaltung:IMS_2014:Unternehmensgründung_und_-führung|Unternehmensgründung<br /> und -führung]]<br />4 SWS, 5 CP</td>
<td style="border: 1px solid #222; line-height: 1.6em;" class="top bgdgrau white">[[Modul:IMS_2014:Projekttechniken|Projekttechniken]]<br />4 SWS, 5 CP</td>
<td style="border: 1px solid #222; line-height: 1.6em;" class="top bgdgrau white">[[Modul:IMS_2014:Technik-_und_Wissenschaftsethik|Technik- und<br /> Wissenschaftsethik]]<br />4 SWS, 5 CP</td>
</tr>
<tr>
<td/>
<td style="border: 1px solid #222; background: #555;" class="top bgdgrau white"><strong>16 SWS<br /> 30 CP</strong></td>
<td style="border: 1px solid #222; background: #555;" class="top bgdgrau white"><strong>16 SWS<br /> 30 CP</strong></td>
<td style="border: 1px solid #222; background: #555;" class="top bgdgrau white"><strong>4 SWS<br /> 30 CP</strong></td>
</tr>
</table>

Bachelor-Studiengang Interaktive Medien (SPO 2018), B. Sc.

2026-02-15T17:25:57Z

Kowa: /* Wahlpflichtmodule der Spezialisierungsphase */

{{Studiengang
|stgname=Interaktive Medien
|kuerzel=IAM 2018 BSc
|abschluss=Bachelor
|datum=2017/12/19
|spo=https://www.hs-augsburg.de/Binaries/Binary41063/SPO-Interaktive-Medien-WS2018-vom-23.06.2020.pdf
|homepage=https://www.tha.de/ia/
|fakultaet=FKG, FKI
|studienbeginn=Wintersemester
|studienabschnitte=Ja
}}

Ein Studium gemäß der SPO 2018 endet entweder mit dem Abschluss „Bachelor of Arts“ ({{BA}}) oder
mit dem Abschluss „Bachelor of Science“ ({{BSc}}). Der Studienplan der ersten beiden Semester ist unabhängig
vom angestrebten Abschluss. Im dritten Semester muss man sich für einen Abschluss entscheiden, da sich von diesem
Semester an die Studienpläne für die beiden Abschlüsse unterscheiden.

==Studienplan SPO 2018, Studienrichtung Informatik ({{BSc}})==
Den Studienplan für den Studienrichtung Gestaltung ({{BA}}) finden Sie unter <br/>[[Bachelor-Studiengang_Interaktive_Medien_(SPO_2018)#Studienplan_SPO_2018.2C_Studienrichtung_Gestaltung_.28B._A..29|Bachelor-Studiengang Interaktive Medien (SPO 2018), {{BA}}]]

'''Legende:''' <span class="bgorange white"> '''gestalterisch''' </span><span class="bgblue white"> '''informationstechnisch''' </span><span class="bggrey white"> '''übergreifend''' </span>

<table class="studienplan">
<tr>
<td rowspan="3" class="noborder"> </td>
<td colspan="2" class="bgdgrey white"><strong>Grundlagen- und Orientierungs-<br/>phase</strong></td>
<td colspan="2" class="bgdgrey white"><strong>Spezialisierungsphase</strong></td>
<td colspan="3" class="bgdgrey white"><strong>Vertiefungsphase</strong></td>
</tr>
<tr>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Sommer</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Sommer</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Sommer</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
</tr>
<tr>
<td colspan="1" class="bgdgrey white"><strong>1</strong></td>
<td colspan="1" class="bgdgrey white"><strong>2</strong></td>
<td colspan="1" class="bgdgrey white"><strong>3</strong></td>
<td colspan="1" class="bgdgrey white"><strong>4</strong></td>
<td colspan="1" class="bgdgrey white"><strong>5</strong></td>
<td colspan="1" class="bgdgrey white"><strong>6</strong></td>
<td colspan="1" class="bgdgrey white"><strong>7</strong></td>
</tr>
<tr>
<td colspan="1" rowspan="6" class="bgorange white"><strong>Design</strong></td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen visueller Gestaltung|Grundlagen<br/>visueller Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen interaktiver Gestaltung|Grundlagen<br/>interakt. Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="2" rowspan="1" class="bggrey white">[[Modul:IAM_(SPO_2018):Sprache|Sprache, 4 CP/4 SWS (AWP)]]</td>
<td colspan="1" rowspan="2" class="bggrey white">[[Modulkatalog:IAM (SPO 2018):Workshops und Seminare|Workshops/Sem.<br/>6 CP/6 SWS]]</td>
<td colspan="1" rowspan="2" class="bgorange white">[[Modul:IAM_(SPO_2018):UX-Design|UX-Design<br/>5 CP/4 SWS]]</td>
<td colspan="1" rowspan="2" class="bggrey white">[[Modul:IAM_(SPO_2018):Mensch und Gesellschaft|Mensch und Gesellschaft<br/>5 CP/4 SWS]]</td>
</tr>

<tr class="mw-line-own">



<td colspan="2" rowspan="2" class="bgblue white">[[Modul:IAM_(SPO_2018):Mathematik|Mathematik<br/>8 CP/6 SWS]]</td>





</tr>

<tr class="mw-line-own">






<td colspan="1" rowspan="8" class="bgblue white">[[Modul:IAM_(SPO_2018):Praktische Tätigkeit oder Auslandsstudium|Praktische<br/>Tätigkeit<br/>oder<br/>Auslandsstudium<br/>20 CP]]</td>
<td colspan="1" rowspan="8" class="bggrey white">[[Modul:IAM_(SPO_2018):Teamprojekt|Teamprojekt<br/>20 CP/4+4 SWS]]</td>
<td colspan="1" rowspan="4" class="bgblue white">[[Modul:IAM_(SPO_2018):Bachelorarbeit|Bachelorarbeit<br/>10 CP]]</td>
</tr>

<tr>

<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen dreidimensionaler Gestaltung|Grundlagen<br/>dreidim. Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen audiovisueller Gestaltung|Grundlagen<br/>audiovis. Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modulkatalog:IAM_(SPO_2018):Mensch und Maschine|Mensch und<br/>Maschine<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modulkatalog:IAM_(SPO_2018):Raum und Zeit|Raum und<br/>Zeit<br/>8 CP/6 SWS]]</td>



</tr>

<tr class="mw-line-own">








</tr>

<tr class="mw-line-own">








</tr>

<tr>
<td colspan="1" rowspan="6" class="bgblue white"><strong>Infor-<br>matik</strong></td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM (SPO 2018):Grundlagen der Informatik|Grundlagen<br/>Informatik<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM (SPO 2018):Grundlagen der Webtechnologien|Grundlagen<br/>Webtech.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">
[[Modulkatalog:IAM_(SPO_2018):Informatik|Informatik<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modulkatalog:IAM_(SPO_2018):Informatik|Informatik<br/>8 CP/6 SWS]]</td>


<td colspan="1" rowspan="4" class="bgblue white">[[Modul:IAM (SPO 2018):Bachelorprojekt|Bachelorprojekt<br/>8 CP/2 SWS]]</td>
</tr>

<tr class="mw-line-own">








</tr>

<tr class="mw-line-own">








</tr>

<tr>

<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM_(SPO_2018):Grundlagen der Programmierung|Grundlagen<br/>Programmierung<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM_(SPO_2018):Grundlagen der Softwareentwicklung|Grundlagen<br/>Softwareentw.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modulkatalog:IAM_(SPO_2018):Informatik|Informatik<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modulkatalog:IAM_(SPO_2018):Informatik|Informatik<br/>8 CP/6 SWS]]</td>


</tr>

<tr>





<td colspan="1" rowspan="2" class="bggrey white">[[Modul:IAM (SPO 2018):Praxisseminar|Praxisseminar<br/>2 CP/2 SWS]]</td>
<td colspan="1" rowspan="2" class="bgblue white">[[Modul:IAM (SPO 2018):Projektdurchführung|Projektdurchführung<br/>5 CP/4 SWS]]</td>
<td colspan="1" rowspan="2" class="bggrey white">[[Modul:IAM (SPO 2018):Kunde und Markt|Kunde und Markt<br/>5 CP/4 SWS]]</td>
</tr>

<tr class="mw-line-own">








</tr>
<tr>
<td class="top bgdgrey white"><strong>210 CP</strong></td>
<td class="top bgdgrey white"><strong>32 CP</strong></td>
<td class="top bgdgrey white"><strong>32 CP</strong></td>
<td class="top bgdgrey white"><strong>30 CP</strong></td>
<td class="top bgdgrey white"><strong>30 CP</strong></td>
<td class="top bgdgrey white"><strong>30 CP</strong></td>
<td class="top bgdgrey white"><strong>28 CP</strong></td>
<td class="top bgdgrey white"><strong>28 CP</strong></td>
</tr>
</table>

===Regeln===
* Die Prüfungen des ersten Semesters müssen spätestens im zweiten Semester erstmals absolviert werden.
* An Prüfungen der Vertiefungsphase kann nur teilnehmen, wer sämtliche Prüfungen der Grund- und Orientierungsphase sowie mindestens zwei Gestaltungs- und/oder Informatik-Prüfungen der Spezialisierungsphase bestanden hat.
* An Workshops und Seminaren kann man ebenso wie an den Sprachprüfungen der Fakultät für Natur- und Geisteswissenschaften in jedem Semester seines Studiums teilnehmen.
* Das Thema der Bachelorarbeit wird frühestens ausgegeben, wenn sämtlichen Prüfungen der Grund- und Orientierungsphase sowie der Spezialdsierungsphase, das Teamprojekt und die praktische Tätigkeit bzw. das Auslandssemester erfolgreich absolviert wurden. Eine Ausnahme bildes das Spachmodul: Dieses darf auch dpäter belegt werden.
* Das Thema des Bachelorprojektes wird gemeinsam mit dem Thema der Bachelorarbeit vergeben.

===Wahlpflichtmodule der Spezialisierungsphase===
Im dritten und vierten Semester spezialisiert man sich in zweierlei Hinsicht. Zum einen wird gewählt,
welchen Anschluss man anstrebt, und zum anderen wählt man aus den Wahlpflichtkatalogen der
beiden Semester diejenigen Module, mit denen man sich thematisch vertiefend auseinandersetzen möchte.

Es ist allerdings nicht garantiert, dass jedes Wahlpflichtmodul regelmäßig angeboten wird.

Bachelor-Studiengang Interaktive Medien (SPO 2018)

2026-02-15T17:22:09Z

Kowa: /* Wahlpflichtmodule der Spezialisierungsphase */

{{Studiengang
|stgname=Interaktive Medien
|kuerzel=IAM (SPO 2018)
|abschluss=Bachelor
|datum=2017/12/19
|spo=https://www.hs-augsburg.de/Binaries/Binary41063/SPO-Interaktive-Medien-WS2018-vom-23.06.2020.pdf
|homepage=https://www.tha.de/ia/
|fakultaet=FKG, FKI
|studienbeginn=Wintersemester
|studienabschnitte=Ja
}}

Ein Studium im Studiengang „Interaktive Medien“ endet entweder mit dem Abschluss „Bachelor of Arts“ ({{BA}}) oder
mit dem Abschluss „Bachelor of Science“ ({{BSc}}). Der Studienplan der ersten beiden Semester ist unabhängig
vom angestrebten Abschluss. Im dritten Semester muss man sich für einen Abschluss entscheiden, da sich von diesem
Semester an die Studienpläne für die beiden Abschlüsse unterscheiden.

==Studienplan SPO 2018, Studienrichtung Gestaltung ({{BA}})==
Den Studienplan für den Studienrichtung Informatik ({{BSc}}) finden Sie unter <br/>[[Bachelor-Studiengang_Interaktive_Medien_(SPO_2018),_B._Sc.#Studienplan_SPO_2018.2C_Studienrichtung_Informatik_.28B._Sc..29|Bachelor-Studiengang Interaktive Medien (SPO 2018), {{BSc}}]]

'''Legende:''' <span class="bgorange white"> '''gestalterisch''' </span><span class="bgblue white"> '''informationstechnisch''' </span><span class="bggrey white"> '''übergreifend''' </span>

<table class="studienplan">
<tr>
<td rowspan="3" class="noborder"> </td>
<td colspan="2" class="bgdgrey white"><strong>Grundlagen- und Orientierungs-<br/>phase</strong></td>
<td colspan="2" class="bgdgrey white"><strong>Spezialisierungsphase</strong></td>
<td colspan="3" class="bgdgrey white"><strong>Vertiefungsphase</strong></td>
</tr>
<tr>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Sommer</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Sommer</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Sommer</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
</tr>
<tr>
<td colspan="1" class="bgdgrey white"><strong>1</strong></td>
<td colspan="1" class="bgdgrey white"><strong>2</strong></td>
<td colspan="1" class="bgdgrey white"><strong>3</strong></td>
<td colspan="1" class="bgdgrey white"><strong>4</strong></td>
<td colspan="1" class="bgdgrey white"><strong>5</strong></td>
<td colspan="1" class="bgdgrey white"><strong>6</strong></td>
<td colspan="1" class="bgdgrey white"><strong>7</strong></td>
</tr>
<tr>
<td colspan="1" rowspan="6" class="bgorange white"><strong>Design</strong></td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen visueller Gestaltung|Grundlagen<br/>visueller Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen interaktiver Gestaltung|Grundlagen<br/>interakt. Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="2" rowspan="1" class="bggrey white">[[Modul:IAM_(SPO_2018):Sprache|Sprache, 4 CP/4 SWS (AWP)]]</td>
<td colspan="1" rowspan="2" class="bggrey white">[[Modulkatalog:IAM (SPO 2018):Workshops und Seminare|Workshops/Sem.<br/>6 CP/6 SWS]]</td>
<td colspan="1" rowspan="2" class="bgorange white">[[Modul:IAM_(SPO_2018):UX-Design|UX-Design<br/>5 CP/4 SWS]]</td>
<td colspan="1" rowspan="2" class="bggrey white">[[Modul:IAM_(SPO_2018):Mensch und Gesellschaft|Mensch und Gesellschaft<br/>5 CP/4 SWS]]</td>
</tr>

<tr class="mw-line-own">



<td colspan="2" rowspan="2" class="bgorange white">[[Modul:IAM_(SPO_2018):Theorie digitaler Medien|Theorie digitaler Medien<br/>8 CP/6 SWS]]</td>





</tr>

<tr>






<td colspan="1" rowspan="8" class="bgorange white">[[Modul:IAM_(SPO_2018):Praktische Tätigkeit oder Auslandsstudium|Praktische<br/>Tätigkeit<br/>oder<br/>Auslandsstudium<br/>20 CP]]</td>
<td colspan="1" rowspan="8" class="bggrey white">[[Modul:IAM_(SPO_2018):Teamprojekt|Teamprojekt<br/>20 CP/6 SWS]]</td>
<td colspan="1" rowspan="4" class="bgorange white">[[Modul:IAM_(SPO_2018):Bachelorarbeit|Bachelorarbeit<br/>10 CP]]</td>
</tr>

<tr>

<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen dreidimensionaler Gestaltung|Grundlagen<br/>dreidim. Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen audiovisueller Gestaltung|Grundlagen<br/>audiovis. Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modulkatalog:IAM_(SPO_2018):Mensch und Maschine|Mensch und<br/>Maschine<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modulkatalog:IAM_(SPO_2018):Mensch und Maschine|Mensch und<br/>Maschine<br/>8 CP/6 SWS]]</td>



</tr>

<tr class="mw-line-own">








</tr>

<tr class="mw-line-own">








</tr>

<tr>
<td colspan="1" rowspan="6" class="bgblue white"><strong>Infor-<br>matik</strong></td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM (SPO 2018):Grundlagen der Informatik|Grundlagen<br/>Informatik<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM (SPO 2018):Grundlagen der Webtechnologien|Grundlagen<br/>Webtech.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modulkatalog:IAM_(SPO_2018):Raum und Zeit|Raum und<br/>Zeit<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modulkatalog:IAM_(SPO_2018):Raum und Zeit|Raum und<br/>Zeit<br/>8 CP/6 SWS]]</td>


<td colspan="1" rowspan="4" class="bgorange white">[[Modul:IAM (SPO 2018):Bachelorprojekt|Bachelorprojekt<br/>8 CP/2 SWS]]</td>
</tr>

<tr class="mw-line-own">








</tr>

<tr class="mw-line-own">








</tr>

<tr>

<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM_(SPO_2018):Grundlagen der Programmierung|Grundlagen<br/>Programmierung<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM_(SPO_2018):Grundlagen der Softwareentwicklung|Grundlagen<br/>Softwareentw.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modulkatalog:IAM_(SPO_2018):Informatik|Informatik<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modulkatalog:IAM_(SPO_2018):Informatik|Informatik<br/>8 CP/6 SWS]]</td>


</tr>

<tr>





<td colspan="1" rowspan="2" class="bggrey white">[[Modul:IAM (SPO 2018):Praxisseminar|Praxisseminar<br/>2 CP/2 SWS]]</td>
<td colspan="1" rowspan="2" class="bgblue white">[[Modul:IAM (SPO 2018):Projektdurchführung|Projektdurchführung<br/>5 CP/4 SWS]]</td>
<td colspan="1" rowspan="2" class="bggrey white">[[Modul:IAM (SPO 2018):Kunde und Markt|Kunde und Markt<br/>5 CP/4 SWS]]</td>
</tr>

<tr class="mw-line-own">








</tr>
<tr>
<td class="top bgdgrey white"><strong>210 CP</strong></td>
<td class="top bgdgrey white"><strong>32 CP</strong></td>
<td class="top bgdgrey white"><strong>32 CP</strong></td>
<td class="top bgdgrey white"><strong>30 CP</strong></td>
<td class="top bgdgrey white"><strong>30 CP</strong></td>
<td class="top bgdgrey white"><strong>30 CP</strong></td>
<td class="top bgdgrey white"><strong>28 CP</strong></td>
<td class="top bgdgrey white"><strong>28 CP</strong></td>
</tr>
</table>

===Regeln===
* Die Prüfungen des ersten Semesters müssen spätestens im zweiten Semester erstmals absolviert werden.
* An Prüfungen der Vertiefungsphase kann nur teilnehmen, wer sämtliche Prüfungen der Grund- und Orientierungsphase sowie mindestens zwei Gestaltungs- und/oder Informatik-Prüfungen der Spezialisierungsphase bestanden hat.
* An Workshops und Seminaren kann man ebenso wie an den Sprachprüfungen der Fakultät für Natur- und Geisteswissenschaften in jedem Semester seines Studiums teilnehmen.
* Das Thema der Bachelorarbeit wird frühestens ausgegeben, wenn sämtlichen Prüfungen der Grund- und Orientierungsphase sowie der Spezialdsierungsphase, das Teamprojekt und die praktische Tätigkeit bzw. das Auslandssemester erfolgreich absolviert wurden. Eine Ausnahme bildes das Spachmodul: Dieses darf auch dpäter belegt werden.
* Das Thema des Bachelorprojektes wird gemeinsam mit dem Thema der Bachelorarbeit vergeben.

===Wahlpflichtmodule der Spezialisierungsphase===
Im dritten und vierten Semester spezialisiert man sich in zweierlei Hinsicht. Zum einen wird gewählt,
welchen Anschluss man anstrebt, und zum anderen wählt man aus den Wahlpflichtkatalogen der
beiden Semester diejenigen Module, mit denen man sich thematisch vertiefend auseinandersetzen möchte.

Es ist allerdings nicht garantiert, dass jedes Wahlpflichtmodul regelmäßig angeboten wird.

Hauptseite/Kategorien

2026-02-15T17:21:01Z

Kowa: /* Kategorien */

==Kategorien==

{| style="width: 100%"
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:50%" align="center"| '''Studienpläne'''
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:50%" align="center"| '''Lehrveranstaltungen'''
|-
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
* [[Bachelor-Studiengang Interaktive Medien (SPO 2018), {{BA}}]]
* [[Bachelor-Studiengang Interaktive Medien (SPO 2018), {{BSc}}]]
* [[Master-Studiengang Interaktive Mediensysteme (SPO 2014)|Master-Studiengang Interaktive Mediensysteme]]
* [[Bachelor-Studiengang Interaktive Medien (SPO_2006)]] (ausgelaufen)

| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
* [[GlossarWiki:Bücher/Datenmanagement/WiSe2025|Datenmanagement]] (WiSe 2025/2026)
* [[GlossarWiki:Bücher/Full-Stack-Webentwicklung/SoSe2025|Full-Stack-Webentwicklung]] (SoSe 2025)
|}

{| style="width: 100%"
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:33.3%" align="center"| '''Schwerpunktthemen'''
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:33.3%" align="center"| '''{{HSA}}-Kategorien'''
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:33.3%" align="center"| '''Klassifizierende Kategorien'''
|-
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
*[[:Kategorie:Logik|Logik]]
*[[:Kategorie:Mengenlehre|Mengenlehre]]
*[[:Kategorie:Stochastik|Stochastik]]
**[[:Kategorie:Zufallsexperiment|Zufallsexperiment]]'''

| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
'''Allgemein'''
*[[:Kategorie: HSA|Hochschule Augsburg]]

<br/>'''Fachgebiete'''
*[[:Kategorie: Allgemeinwissenschaften|Allgemeinwissenschaften]]

*[[:Kategorie: Gestaltung|Gestaltung]]
*[[:Kategorie: Informatik|Informatik]]
*[[:Kategorie: Mathematik|Mathematik]]

*[[:Kategorie: Wirtschaftswissenschaften|Wirtschaftswissenschaften]]

<br/>'''Lehrverastaltungen'''
*[[:Kategorie:Lehrveranstaltung|Lehrveranstaltungen]]

| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
*[[:Kategorie:Begriffsklärung|Begriffsklärungsseiten]]: Für mehrdeutige Begriffe
*[[:Kategorie:Glossar|Glossar]]: Die eigentlichen Glossar-Beiträge
*[[:Kategorie:Autor|Autor]]: Publikationslisten von Autoren
*[[:Kategorie:Person|Person]]: Personenbezogene Artikel
*[[:Kategorie:Beispiel|Beispiel]]: Beispiele zu einzelnen Definitionen
*[http://glossar.hs-augsburg.de/beispiel/tutorium/ Tutorien-Sourcen] (SVN-Repositories – vgl. [[Subversion]], [[Subversion/HowTo]])
*[[:Kategorie:Vergleich|Vergleich]]: Vergleiche von Konzepten, Definitionen etc.
*[[:Kategorie:Handbuch|Handbuch]]: Klassen-/Methoden-/...-Definitionen und Beschreibungen
*[[:Kategorie:HowTo|HowTo]]: Tipps und Tricks, kurze Anleitungen
*[[:Kategorie:Tool|Tool]]: Tools und Werkzeuge aller Art
*[[:Kategorie:Mathematischer Satz|Mathematischer Satz]]: Mathematische Sätze, Theoreme etc.
*[[:Kategorie:Deutsche Sprache|Deutsche Sprache]]: Rechtschreibung, Grammatik, Fremdwörter etc.
*[[:Kategorie:Quelle|Quelle]]: Quellenangaben zu Büchern, Aufsätzen, Internetquellen etc.
*[[:Kategorie:Jahr|Jahr]]: Die Ereignisse der einzelnen Jahre
*[[:Kategorie: {{SITENAME}}|Artikel, die {{SITENAME}} selbst betreffen]]
*[[:Kategorie: Formular|Alle Formulare]] (zur vereinfachten Datenerfassung)
*[[:Kategorie: Vorlage|Alle Vorlagen]] (= {{SITENAME}}-Templates)
*[[:Kategorie:Versteckte Kategorien|Versteckte Kategorien]]
*[[Spezial:Newpages|Neueste Artikel]]
*[[Spezial:Allpages|Alle Artikel]]
|}

Hauptseite/Kategorien

2026-01-20T11:11:31Z

Kowa: /* Kategorien */

==Kategorien==

{| style="width: 100%"
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:50%" align="center"| '''Studienpläne'''
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:50%" align="center"| '''Lehrveranstaltungen'''
|-
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
* [[Bachelor-Studiengang Interaktive Medien (SPO 2018), {{BA}}]]
* [[Bachelor-Studiengang Interaktive Medien (SPO 2018), {{BSc}}]]
* [[Master-Studiengang Interaktive Mediensysteme (SPO 2014)|Master-Studiengang Interaktive Mediensysteme]]
* [[Bachelor-Studiengang Interaktive Medien (SPO_2006)]] (ausgelaufen)

| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
* [[GlossarWiki:Bücher/Datenmanagement/WiSe2025|Datenmanagement]] (WiSe 2025/2026)
* [[GlossarWiki:Bücher/Full-Stack-Webentwicklung/SoSe2025|Full-Stack-Webentwicklung]] (SoSe 2025)
|}

{| style="width: 100%"
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:33.3%" align="center"| '''Schwerpunktthemen'''
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:33.3%" align="center"| '''{{HSA}}-Kategorien'''
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:33.3%" align="center"| '''Klassifizierende Kategorien'''
|-
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
*[[:Kategorie:Logik|Logik]]
*[[:Kategorie:Mengenlehre|Mengenlehre]]
*[[:Kategorie:Stochastik|Stochastik]]
**[[:Kategorie:Zufallsexperiment|Zufallsexperiment]]'''

| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
'''Allgemein'''
*[[:Kategorie: HSA|Hochschule Augsburg]]

<br/>'''Fachgebiete'''
*[[:Kategorie: Allgemeinwissenschaften|Allgemeinwissenschaften]]

*[[:Kategorie: Gestaltung|Gestaltung]]
*[[:Kategorie: Informatik|Informatik]]
*[[:Kategorie: Mathematik|Mathematik]]

*[[:Kategorie: Wirtschaftswissenschaften|Wirtschaftswissenschaften]]

<br/>'''Module'''
*[[:Kategorie:Modul|Modul]]
*[[:Kategorie:Lehrveranstaltung|Lehrveranstaltungen]]

| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
*[[:Kategorie:Begriffsklärung|Begriffsklärungsseiten]]: Für mehrdeutige Begriffe
*[[:Kategorie:Glossar|Glossar]]: Die eigentlichen Glossar-Beiträge
*[[:Kategorie:Autor|Autor]]: Publikationslisten von Autoren
*[[:Kategorie:Person|Person]]: Personenbezogene Artikel
*[[:Kategorie:Beispiel|Beispiel]]: Beispiele zu einzelnen Definitionen
*[http://glossar.hs-augsburg.de/beispiel/tutorium/ Tutorien-Sourcen] (SVN-Repositories – vgl. [[Subversion]], [[Subversion/HowTo]])
*[[:Kategorie:Vergleich|Vergleich]]: Vergleiche von Konzepten, Definitionen etc.
*[[:Kategorie:Handbuch|Handbuch]]: Klassen-/Methoden-/...-Definitionen und Beschreibungen
*[[:Kategorie:HowTo|HowTo]]: Tipps und Tricks, kurze Anleitungen
*[[:Kategorie:Tool|Tool]]: Tools und Werkzeuge aller Art
*[[:Kategorie:Mathematischer Satz|Mathematischer Satz]]: Mathematische Sätze, Theoreme etc.
*[[:Kategorie:Deutsche Sprache|Deutsche Sprache]]: Rechtschreibung, Grammatik, Fremdwörter etc.
*[[:Kategorie:Quelle|Quelle]]: Quellenangaben zu Büchern, Aufsätzen, Internetquellen etc.
*[[:Kategorie:Jahr|Jahr]]: Die Ereignisse der einzelnen Jahre
*[[:Kategorie: {{SITENAME}}|Artikel, die {{SITENAME}} selbst betreffen]]
*[[:Kategorie: Formular|Alle Formulare]] (zur vereinfachten Datenerfassung)
*[[:Kategorie: Vorlage|Alle Vorlagen]] (= {{SITENAME}}-Templates)
*[[:Kategorie:Versteckte Kategorien|Versteckte Kategorien]]
*[[Spezial:Newpages|Neueste Artikel]]
*[[Spezial:Allpages|Alle Artikel]]
|}

MediaWiki:Common.css

2026-01-20T07:59:00Z

Kowa:

/* CSS an dieser Stelle wirkt sich auf alle Skins aus */

:target::before
{ content:"";
position:relative;
}

#catlinks li a
{ background: #DDD !important; }

a.mw-selflink
{
color: #333;
font-weight: bold;
}

a.bgorange:visited, a.bgrot:visited, a.bgblue:visited, a.bgdgrau:visited, a.bggrau:visited, a.new:visited
{
color: white !important;
}

/*
a:visited, a.new:visited, #p-personal a.new:visited, a.external:visited, a code
{
color: #337ab7 !important;
}
*/
a:visited, #p-personal a.new:visited, a.external:visited, a code
{
color: #337ab7 !important;
}

h5
{
font-weight: bold;
}

p
{
max-width: 45em;
overflow: hidden
}

p.no-max-width
{
max-width: none;
}

pre, code, tt, .mw-geshi
{
font-family: consolas, "courier new", courier, monospace;
font-size: 100%;
}

.indent
{
display: block;
margin: 0 0 0 1em;
}

.table_biblio
{
margin: 0 0 1em 1em;
font-size: 95%;
max-width: 45em;
}

.table_biblio td
{
padding: 4;
}

.table_no_border
{
margin: 1em 1em 1em 0;
border: 0;
background: white;
border-collapse: collapse
}

.subtable
{
text-align:left;
background-color: #EEEEFF !important;
font-weight:bold
}

.datatable,
.datatable-rt,
.datatable-modules,
.datatable-sql
{
margin: 1ex 1em 1ex 0;
border:1px #aaa solid;
background:white;
border-collapse:collapse;
}

.datatable th, .datatable td,
.datatable-rt th,.datatable-rt td,
.datatable-modules th,.datatable-modules td,
.datatable-sql th,.datatable-sql td
{
border:1px #aaa solid;
padding:1ex
}

.datatable-sql th,.datatable-sql td
{
font-family: consolas, "courier new", courier, monospace;
font-size: 95%;
}

.datatable tbody tr:nth-child(odd) td,
.datatable-rt tbody tr:nth-child(odd) td,
.datatable-sql tbody tr:nth-child(odd) td
{
background-color: #eee;
}

.datatable-modules tbody tr:nth-child(odd) td
{
background-color: #fcfcfc;
}

.datatable th,
.datatable-rt th,
.datatable-modules th,
.datatable-sql th
{
vertical-align:top;
text-align:left;
background-color: #ccc;
font-weight:bold
}

.datatable td,
.datatable-rt td,
.datatable-modules td,
.datatable-sql td
{
vertical-align: top;
}

.formtable td, .formtable th
{
vertical-align: middle !important;
}

@media (max-width: 47.9375em) {
.datatable-rt {
border:0;
padding-bottom: 1.4375em;
padding-bottom: 0;
display: block;
width: 100%;
/*
* make everything display block so it
* aligns vertically
*/
/* Labeling
* adding a data-title attribute to the cells
* lets us add text before the content to provide
* the missing context
*
* Markup:
* <td data-title="Column Header">Content Here</td>
*
* Display:
* Column Header: Content Here
*/
}
.datatable-rt caption {
display: block;
}
.datatable-rt thead, .datatable-rt tbody tr:first-child {
display: none;
visibility: hidden;
}
.datatable-rt tbody {
border:0;
display: block;
padding: 0;
text-align: left;
white-space: normal;
}
.datatable-rt tr, .datatable-rt td {
border:1px #aaa solid;
display: block;
padding: 0;
text-align: left;
white-space: normal;
}
.datatable-rt tr {
margin-bottom: 1.5em;
}
.datatable-rt th[data-title]:before,
table td[data-title]:before {
content: attr(data-title) "\a";
font-weight: bold;
white-space: pre;
}
.datatable-rt th:not([data-title]) {
font-weight: bold;
}
.datatable-rt td:empty {
display: none;
}
}

.citetable
{
margin: 1em 1em 1em 0;
border:1px #aaa solid;
background:white;
border-collapse:collapse;
}
.citetable th,.citetable td
{
border:1px #aaa solid;
padding:1ex;
max-width: 400px;
word-wrap: break-word;
}

.citetable th
{
text-align:center;
background-color: #EEEEFF;
font-weight:bold
}

.citetable td
{
vertical-align: top;
}

.menutable
{
margin: 0 0 1em 0;
border: 0;
background: white;
border-collapse:collapse
}

.menutable p
{
margin: 0;
}

/*
.mw-content-ltr
{
margin-top: 1em;
margin-bottom: 1em;
}

.mw-code
{
font-family: consolas, "courier new", courier, monospace;
font-size: 95%;
max-width: 57em;
}

pre
{
max-width: 57em;
}

code
{
background-color: #FFF;
border: 0;
border-radius: 0;
padding: 0 0;
}

td
{
padding: 0.2em;
}

#toc ul
{
margin-left: -0.5em !important;
}

#bodyContent ul
{
list-style-type: none !important;
}

#bodyContent ul, #bodyContent ol
{
overflow: hidden;
max-width: 43.4em;
}

.mw-body a, .mw-body a:visited, .mw-body a.new:visited
{
color: #337ab7;
}

.mw-body ul
{
list-style: none !important;
}

.mw-body ul, .mw-body ol
{
padding-left: 0ex !important;
padding-bottom: 0ex !important;
}

#bodyContent .inputSpan ul > li::before,
#bodyContent .redirectMsg ul > li::before,
li#mw-imagepage-reupload-link::before,
li#mw-imagepage-upload-disallowed::before
{
content: "" !important;
}

li#mw-imagepage-reupload-link .plainlinks,
li#mw-imagepage-upload-disallowed
{
text-indent: -1.6em !important;
}

#bodyContent ul > li::before
{
content: "\2013 \0020";
}

.select2-container-multi .select2-search-choice-close {
left: -15px !important;
}

#bodyContent ol > li
{
margin-left: 1.6em;
}
#bodyContent ul > li
{
text-indent: -0.9em;
margin-left: 1.6em;
}

#bodyContent ul > li.gallerybox
{
text-indent: 0;
}

#bodyContent .rightfloat ul > li
{
margin-left: 3.9em !important;
}

#bodyContent #mw-subcategories ul > li::before,
#toc ul > li::before,
.toc ul > li::before,
#bodyContent .ms-list > li::before,
#bodyContent .gallerybox::before,
#bodyContent ul#filetoc > li::before
{
content: none !important;
}

.mw-search-profile-tabs .search-types a
{
display: inline !important;
padding: 0 !important;
}

.mw-search-result-heading
{
display: inline !important;
}

.mw-search-results .searchresult, .mw-search-result-data
{
text-indent: 0
}

li
{
max-width: 50em;
}

dd
{
max-width: 50em;
}

.thumbinner
{
margin-bottom: 0 !important;
}

.mw-headline
{
padding-top: 0px !important;
}

#mw-createaccount-cta, #pt-createaccount
{
display: none !important;
}

.mw-highlight
{
background-color: #ffffff !important;
}

.wiki_quality
{
margin: 0px 0px 15px 0px;
padding: 0.2ex;
font-size: 75%;
background-color: #DDD;
}

.wiki_quality p
{
padding-left: 1ex;
margin: 0;
}

.wiki_quality table
{
margin: 0 1px 1px 0;
}
.wiki_quality td
{
border: 1px #DDD solid !important;
}

.wiki_red
{
background-color: #FFA288 !important;
}

.wiki_yellow
{
background-color: #FFECAD !important;
}

.wiki_green
{
background-color: #96D1AD !important;
}

.wiki_warning_01
{
margin: 0px 0px 7px 0px;
padding: 1ex;
border: 5px solid #FFE489;
font-size: 95%
}

.wiki_warning_02
{
margin: 0px 0px 7px 0px;
padding: 1ex;
border: 5px solid #FFA288;
font-size: 95%
}

.wiki_highlight_01
{
margin: 0px 0px 7px 0px;
padding: 1ex;
border: 5px solid #96D1AD;
font-size: 95%
}

.wiki_disambiguation_01
{
border: 1px solid #aaa;
border-width:2px 0 2px 0;
background-color: #f9f9f9;
padding: 5px 5px 0px 5px;
margin: 0px 0px 7px 0px;
font-size:100%;
}

div.inline * {display:inline}

.mw-codeX
{
max-width: 48em;
}

.formInput
{
width: 30em
}

.formula
{
display: block;
margin: 0 0 1ex 1em;
max-width: 100%;
}

.regular
{
font-style: regular;
}

.quote
{
display: block;
font-style: italic;
margin: 0 0 1ex 1em;
max-width: 43em;
overflow: hidden;
}

.quote em, .quote i, i em, em em, em i
{
font-style: normal;
}

.quote2
{
display: block;
font-style: normal;
margin: 0 0 0 1em;
max-width: 44em;
}

div.floatright
{
clear: right;
float: right;
margin: 0.5em 0 0.8em 1.4em;
position: relative;
}

div.floatleft
{
clear: left;
float: left;
margin: 0.5em 0 0.8em 1.4em;
position: relative;
}

.mw-code
{
margin: 0 0 1ex 1em;
}
/* Add arrows to toggle-blocks for collapsible elements */
.mw-collapsible-arrowtoggle.mw-collapsible-toggle-expanded {
padding-left: 20px !important;
background-image: url('//upload.wikimedia.
org/wikipedia/commons/1/10/MediaWiki_Vector_skin_action_arrow.png');
background-repeat: no-repeat;
background-position: center left;
}
.mw-collapsible-arrowtoggle.mw-collapsible-toggle-collapsed {
padding-left: 20px !important;
background-image: url('//upload.wikimedia.org/wikipedia/commons/4/41/MediaWiki_Vector_skin_right_arrow.png');
background-repeat: no-repeat;
background-position: center left;
}
.action a img
{ margin: -5px 0 0 -16px !important;
}

.bg1 { background-color: #ffd890 }
.bg2 { background-color: #b4fff1 }
.bg3 { background-color: #c6e894 }
.bg4 { background-color: #e89898 }
.bg5 { background-color: #c6acff }

/* Wikipedia */
table > * > tr.hintergrundfarbe1 > th, table > * > tr > th.hintergrundfarbe1, table.hintergrundfarbe1, .hintergrundfarbe1 {
background-color: #f9f9f9;
}
table > * > tr.hintergrundfarbe2 > th, table > * > tr > th.hintergrundfarbe2, table.hintergrundfarbe2, .hintergrundfarbe2 {
background-color: #fff !important;
}
table > * > tr.hintergrundfarbe3 > th, table > * > tr > th.hintergrundfarbe3, table.hintergrundfarbe3, .hintergrundfarbe3 {
background-color: #ffff40;
}
table > * > tr.hintergrundfarbe4 > th, table > * > tr > th.hintergrundfarbe4, table.hintergrundfarbe4, .hintergrundfarbe4 {
background-color: #fa0;
}
table > * > tr.hintergrundfarbe5 > th, table > * > tr > th.hintergrundfarbe5, table.hintergrundfarbe5, .hintergrundfarbe5 {
background-color: #e0e0e0;
}
table > * > tr.hintergrundfarbe6 > th, table > * > tr > th.hintergrundfarbe6, table.hintergrundfarbe6, .hintergrundfarbe6 {
background-color: #b3b7ff;
}
table > * > tr.hintergrundfarbe7 > th, table > * > tr > th.hintergrundfarbe7, table.hintergrundfarbe7, .hintergrundfarbe7 {
background-color: #ffcbcb;
}
table > * > tr.hintergrundfarbe8 > th, table > * > tr > th.hintergrundfarbe8, table.hintergrundfarbe8, .hintergrundfarbe8 {
background-color: #ffebad;
}
table > * > tr.hintergrundfarbe9 > th, table > * > tr > th.hintergrundfarbe9, table.hintergrundfarbe9, .hintergrundfarbe9 {
background-color: #b9ffc5;
}

/* Studienpläne */

.bgdgrey, .bgdgrau
{ background: #555; }

.bggrey, .bggrau
{ background: #999; }

.bgorange
{ background: #f60; }

.bgblue, .bgblau
{ background: #36c; }

.bgred, .bgrot
{ background: #c03; }

.bgdgrey a, .bgdgrau a
{ color: #fff !important; }

.bggrey a, .bggrau a
{ color: #fff !important; }

.bgorange a
{ color: #fff !important; }

.bgblue a, .bgblau a
{ color: #fff !important; }

.bgred a, .bgrot a
{ color: #fff !important; }

.bgdgrey a, .bgdgrau a
{ color: #fff !important; }

.grey, .grau
{ color: #999 }

.dgrey, .dgrau
{ color: #666; }

.orange
{ color: #f60; }

.white
{ color: #fff !important; }

.amber
{ color: #f60; }

.blue, .blau
{ color: #36c; }

.studienplan
{ border-collapse: collapse; }

.studienplan tr
{ height: 1em; }

.studienplan td
{ border: 1px solid #222;
vertical-align: text-top;
padding: 5px 5px 5px 5px;
width: auto;
}

.studienplan td.noborder
{ border: 0px; }

.studienplan
{ border-collapse: collapse; }

.studienplan > * > td
{ border: 1px solid #222; }

table.wikitable
{ margin: 2ex 0 3ex 0 !important;
}

table.texttable
{ margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-collapse: collapse;
}

table.texttable td
{ border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}

table.texttable td:first-child
{ padding: 0 !important;
}

table.texttable td:first-child ~ td
{ padding-left: 0.2em !important;
}

table.wikitable > th
{ background-color: #ddd !important;
}

table.wikitable td, table.wikitable > th,
table.wikitext td, table.wikitext > th
{ text-align: left !important;
vertical-align: top !important;
}

table.wikitable td, table.wikitable > th,
table.wikitext td, table.wikitext > th
{ text-align: left !important;
vertical-align: top !important;
}

### Tooltips

#tooltip
{ font-size: 0.875em;
text-align: center;
text-shadow: 0 1px rgba( 0, 0, 0, .5 );
line-height: 1.5;
color: #fff;
background: #333;
background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) );
background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-top: 1px solid #fff;
-webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
-moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
position: absolute;
z-index: 100;
padding: 15px;
}

#tooltip:after
{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
border-top-color: rgba( 0, 0, 0, .7 );
content: '';
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -10px;
}

#tooltip.top:after
{
border-top-color: transparent;
border-bottom: 10px solid #333;
border-bottom-color: rgba( 0, 0, 0, .6 );
top: -20px;
bottom: auto;
}

#tooltip.left:after
{
left: 10px;
margin: 0;
}

#tooltip.right:after
{
right: 10px;
left: auto;
margin: 0;
}

abbr[title]
{
border-bottom: 0 !important
}
*/

MediaWiki:Common.css

2026-01-20T07:57:58Z

Kowa:

/* CSS an dieser Stelle wirkt sich auf alle Skins aus */

:target::before
{ content:"";
position:relative;
}

#catlinks li a
{ background: #DDD !important; }

a.mw-selflink
{
color: #333;
font-weight: bold;
}

a.bgorange:visited, a.bgrot:visited, a.bgblue:visited, a.bgdgrau:visited, a.bggrau:visited
{
color: white !important;
}

/*
a:visited, a.new:visited, #p-personal a.new:visited, a.external:visited, a code
{
color: #337ab7 !important;
}
*/
a:visited, #p-personal a.new:visited, a.external:visited, a code
{
color: #337ab7 !important;
}

h5
{
font-weight: bold;
}

p
{
max-width: 45em;
overflow: hidden
}

p.no-max-width
{
max-width: none;
}

pre, code, tt, .mw-geshi
{
font-family: consolas, "courier new", courier, monospace;
font-size: 100%;
}

.indent
{
display: block;
margin: 0 0 0 1em;
}

.table_biblio
{
margin: 0 0 1em 1em;
font-size: 95%;
max-width: 45em;
}

.table_biblio td
{
padding: 4;
}

.table_no_border
{
margin: 1em 1em 1em 0;
border: 0;
background: white;
border-collapse: collapse
}

.subtable
{
text-align:left;
background-color: #EEEEFF !important;
font-weight:bold
}

.datatable,
.datatable-rt,
.datatable-modules,
.datatable-sql
{
margin: 1ex 1em 1ex 0;
border:1px #aaa solid;
background:white;
border-collapse:collapse;
}

.datatable th, .datatable td,
.datatable-rt th,.datatable-rt td,
.datatable-modules th,.datatable-modules td,
.datatable-sql th,.datatable-sql td
{
border:1px #aaa solid;
padding:1ex
}

.datatable-sql th,.datatable-sql td
{
font-family: consolas, "courier new", courier, monospace;
font-size: 95%;
}

.datatable tbody tr:nth-child(odd) td,
.datatable-rt tbody tr:nth-child(odd) td,
.datatable-sql tbody tr:nth-child(odd) td
{
background-color: #eee;
}

.datatable-modules tbody tr:nth-child(odd) td
{
background-color: #fcfcfc;
}

.datatable th,
.datatable-rt th,
.datatable-modules th,
.datatable-sql th
{
vertical-align:top;
text-align:left;
background-color: #ccc;
font-weight:bold
}

.datatable td,
.datatable-rt td,
.datatable-modules td,
.datatable-sql td
{
vertical-align: top;
}

.formtable td, .formtable th
{
vertical-align: middle !important;
}

@media (max-width: 47.9375em) {
.datatable-rt {
border:0;
padding-bottom: 1.4375em;
padding-bottom: 0;
display: block;
width: 100%;
/*
* make everything display block so it
* aligns vertically
*/
/* Labeling
* adding a data-title attribute to the cells
* lets us add text before the content to provide
* the missing context
*
* Markup:
* <td data-title="Column Header">Content Here</td>
*
* Display:
* Column Header: Content Here
*/
}
.datatable-rt caption {
display: block;
}
.datatable-rt thead, .datatable-rt tbody tr:first-child {
display: none;
visibility: hidden;
}
.datatable-rt tbody {
border:0;
display: block;
padding: 0;
text-align: left;
white-space: normal;
}
.datatable-rt tr, .datatable-rt td {
border:1px #aaa solid;
display: block;
padding: 0;
text-align: left;
white-space: normal;
}
.datatable-rt tr {
margin-bottom: 1.5em;
}
.datatable-rt th[data-title]:before,
table td[data-title]:before {
content: attr(data-title) "\a";
font-weight: bold;
white-space: pre;
}
.datatable-rt th:not([data-title]) {
font-weight: bold;
}
.datatable-rt td:empty {
display: none;
}
}

.citetable
{
margin: 1em 1em 1em 0;
border:1px #aaa solid;
background:white;
border-collapse:collapse;
}
.citetable th,.citetable td
{
border:1px #aaa solid;
padding:1ex;
max-width: 400px;
word-wrap: break-word;
}

.citetable th
{
text-align:center;
background-color: #EEEEFF;
font-weight:bold
}

.citetable td
{
vertical-align: top;
}

.menutable
{
margin: 0 0 1em 0;
border: 0;
background: white;
border-collapse:collapse
}

.menutable p
{
margin: 0;
}

/*
.mw-content-ltr
{
margin-top: 1em;
margin-bottom: 1em;
}

.mw-code
{
font-family: consolas, "courier new", courier, monospace;
font-size: 95%;
max-width: 57em;
}

pre
{
max-width: 57em;
}

code
{
background-color: #FFF;
border: 0;
border-radius: 0;
padding: 0 0;
}

td
{
padding: 0.2em;
}

#toc ul
{
margin-left: -0.5em !important;
}

#bodyContent ul
{
list-style-type: none !important;
}

#bodyContent ul, #bodyContent ol
{
overflow: hidden;
max-width: 43.4em;
}

.mw-body a, .mw-body a:visited, .mw-body a.new:visited
{
color: #337ab7;
}

.mw-body ul
{
list-style: none !important;
}

.mw-body ul, .mw-body ol
{
padding-left: 0ex !important;
padding-bottom: 0ex !important;
}

#bodyContent .inputSpan ul > li::before,
#bodyContent .redirectMsg ul > li::before,
li#mw-imagepage-reupload-link::before,
li#mw-imagepage-upload-disallowed::before
{
content: "" !important;
}

li#mw-imagepage-reupload-link .plainlinks,
li#mw-imagepage-upload-disallowed
{
text-indent: -1.6em !important;
}

#bodyContent ul > li::before
{
content: "\2013 \0020";
}

.select2-container-multi .select2-search-choice-close {
left: -15px !important;
}

#bodyContent ol > li
{
margin-left: 1.6em;
}
#bodyContent ul > li
{
text-indent: -0.9em;
margin-left: 1.6em;
}

#bodyContent ul > li.gallerybox
{
text-indent: 0;
}

#bodyContent .rightfloat ul > li
{
margin-left: 3.9em !important;
}

#bodyContent #mw-subcategories ul > li::before,
#toc ul > li::before,
.toc ul > li::before,
#bodyContent .ms-list > li::before,
#bodyContent .gallerybox::before,
#bodyContent ul#filetoc > li::before
{
content: none !important;
}

.mw-search-profile-tabs .search-types a
{
display: inline !important;
padding: 0 !important;
}

.mw-search-result-heading
{
display: inline !important;
}

.mw-search-results .searchresult, .mw-search-result-data
{
text-indent: 0
}

li
{
max-width: 50em;
}

dd
{
max-width: 50em;
}

.thumbinner
{
margin-bottom: 0 !important;
}

.mw-headline
{
padding-top: 0px !important;
}

#mw-createaccount-cta, #pt-createaccount
{
display: none !important;
}

.mw-highlight
{
background-color: #ffffff !important;
}

.wiki_quality
{
margin: 0px 0px 15px 0px;
padding: 0.2ex;
font-size: 75%;
background-color: #DDD;
}

.wiki_quality p
{
padding-left: 1ex;
margin: 0;
}

.wiki_quality table
{
margin: 0 1px 1px 0;
}
.wiki_quality td
{
border: 1px #DDD solid !important;
}

.wiki_red
{
background-color: #FFA288 !important;
}

.wiki_yellow
{
background-color: #FFECAD !important;
}

.wiki_green
{
background-color: #96D1AD !important;
}

.wiki_warning_01
{
margin: 0px 0px 7px 0px;
padding: 1ex;
border: 5px solid #FFE489;
font-size: 95%
}

.wiki_warning_02
{
margin: 0px 0px 7px 0px;
padding: 1ex;
border: 5px solid #FFA288;
font-size: 95%
}

.wiki_highlight_01
{
margin: 0px 0px 7px 0px;
padding: 1ex;
border: 5px solid #96D1AD;
font-size: 95%
}

.wiki_disambiguation_01
{
border: 1px solid #aaa;
border-width:2px 0 2px 0;
background-color: #f9f9f9;
padding: 5px 5px 0px 5px;
margin: 0px 0px 7px 0px;
font-size:100%;
}

div.inline * {display:inline}

.mw-codeX
{
max-width: 48em;
}

.formInput
{
width: 30em
}

.formula
{
display: block;
margin: 0 0 1ex 1em;
max-width: 100%;
}

.regular
{
font-style: regular;
}

.quote
{
display: block;
font-style: italic;
margin: 0 0 1ex 1em;
max-width: 43em;
overflow: hidden;
}

.quote em, .quote i, i em, em em, em i
{
font-style: normal;
}

.quote2
{
display: block;
font-style: normal;
margin: 0 0 0 1em;
max-width: 44em;
}

div.floatright
{
clear: right;
float: right;
margin: 0.5em 0 0.8em 1.4em;
position: relative;
}

div.floatleft
{
clear: left;
float: left;
margin: 0.5em 0 0.8em 1.4em;
position: relative;
}

.mw-code
{
margin: 0 0 1ex 1em;
}
/* Add arrows to toggle-blocks for collapsible elements */
.mw-collapsible-arrowtoggle.mw-collapsible-toggle-expanded {
padding-left: 20px !important;
background-image: url('//upload.wikimedia.
org/wikipedia/commons/1/10/MediaWiki_Vector_skin_action_arrow.png');
background-repeat: no-repeat;
background-position: center left;
}
.mw-collapsible-arrowtoggle.mw-collapsible-toggle-collapsed {
padding-left: 20px !important;
background-image: url('//upload.wikimedia.org/wikipedia/commons/4/41/MediaWiki_Vector_skin_right_arrow.png');
background-repeat: no-repeat;
background-position: center left;
}
.action a img
{ margin: -5px 0 0 -16px !important;
}

.bg1 { background-color: #ffd890 }
.bg2 { background-color: #b4fff1 }
.bg3 { background-color: #c6e894 }
.bg4 { background-color: #e89898 }
.bg5 { background-color: #c6acff }

/* Wikipedia */
table > * > tr.hintergrundfarbe1 > th, table > * > tr > th.hintergrundfarbe1, table.hintergrundfarbe1, .hintergrundfarbe1 {
background-color: #f9f9f9;
}
table > * > tr.hintergrundfarbe2 > th, table > * > tr > th.hintergrundfarbe2, table.hintergrundfarbe2, .hintergrundfarbe2 {
background-color: #fff !important;
}
table > * > tr.hintergrundfarbe3 > th, table > * > tr > th.hintergrundfarbe3, table.hintergrundfarbe3, .hintergrundfarbe3 {
background-color: #ffff40;
}
table > * > tr.hintergrundfarbe4 > th, table > * > tr > th.hintergrundfarbe4, table.hintergrundfarbe4, .hintergrundfarbe4 {
background-color: #fa0;
}
table > * > tr.hintergrundfarbe5 > th, table > * > tr > th.hintergrundfarbe5, table.hintergrundfarbe5, .hintergrundfarbe5 {
background-color: #e0e0e0;
}
table > * > tr.hintergrundfarbe6 > th, table > * > tr > th.hintergrundfarbe6, table.hintergrundfarbe6, .hintergrundfarbe6 {
background-color: #b3b7ff;
}
table > * > tr.hintergrundfarbe7 > th, table > * > tr > th.hintergrundfarbe7, table.hintergrundfarbe7, .hintergrundfarbe7 {
background-color: #ffcbcb;
}
table > * > tr.hintergrundfarbe8 > th, table > * > tr > th.hintergrundfarbe8, table.hintergrundfarbe8, .hintergrundfarbe8 {
background-color: #ffebad;
}
table > * > tr.hintergrundfarbe9 > th, table > * > tr > th.hintergrundfarbe9, table.hintergrundfarbe9, .hintergrundfarbe9 {
background-color: #b9ffc5;
}

/* Studienpläne */

.bgdgrey, .bgdgrau
{ background: #555; }

.bggrey, .bggrau
{ background: #999; }

.bgorange
{ background: #f60; }

.bgblue, .bgblau
{ background: #36c; }

.bgred, .bgrot
{ background: #c03; }

.bgdgrey a, .bgdgrau a
{ color: #fff !important; }

.bggrey a, .bggrau a
{ color: #fff !important; }

.bgorange a
{ color: #fff !important; }

.bgblue a, .bgblau a
{ color: #fff !important; }

.bgred a, .bgrot a
{ color: #fff !important; }

.bgdgrey a, .bgdgrau a
{ color: #fff !important; }

.grey, .grau
{ color: #999 }

.dgrey, .dgrau
{ color: #666; }

.orange
{ color: #f60; }

.white
{ color: #fff !important; }

.amber
{ color: #f60; }

.blue, .blau
{ color: #36c; }

.studienplan
{ border-collapse: collapse; }

.studienplan tr
{ height: 1em; }

.studienplan td
{ border: 1px solid #222;
vertical-align: text-top;
padding: 5px 5px 5px 5px;
width: auto;
}

.studienplan td.noborder
{ border: 0px; }

.studienplan
{ border-collapse: collapse; }

.studienplan > * > td
{ border: 1px solid #222; }

table.wikitable
{ margin: 2ex 0 3ex 0 !important;
}

table.texttable
{ margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-collapse: collapse;
}

table.texttable td
{ border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}

table.texttable td:first-child
{ padding: 0 !important;
}

table.texttable td:first-child ~ td
{ padding-left: 0.2em !important;
}

table.wikitable > th
{ background-color: #ddd !important;
}

table.wikitable td, table.wikitable > th,
table.wikitext td, table.wikitext > th
{ text-align: left !important;
vertical-align: top !important;
}

table.wikitable td, table.wikitable > th,
table.wikitext td, table.wikitext > th
{ text-align: left !important;
vertical-align: top !important;
}

### Tooltips

#tooltip
{ font-size: 0.875em;
text-align: center;
text-shadow: 0 1px rgba( 0, 0, 0, .5 );
line-height: 1.5;
color: #fff;
background: #333;
background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) );
background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-top: 1px solid #fff;
-webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
-moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
position: absolute;
z-index: 100;
padding: 15px;
}

#tooltip:after
{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
border-top-color: rgba( 0, 0, 0, .7 );
content: '';
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -10px;
}

#tooltip.top:after
{
border-top-color: transparent;
border-bottom: 10px solid #333;
border-bottom-color: rgba( 0, 0, 0, .6 );
top: -20px;
bottom: auto;
}

#tooltip.left:after
{
left: 10px;
margin: 0;
}

#tooltip.right:after
{
right: 10px;
left: auto;
margin: 0;
}

abbr[title]
{
border-bottom: 0 !important
}
*/

MediaWiki:Common.css

2026-01-20T07:56:05Z

Kowa:

/* CSS an dieser Stelle wirkt sich auf alle Skins aus */

:target::before
{ content:"";
position:relative;
}

#catlinks li a
{ background: #DDD !important; }

a.mw-selflink
{
color: #333;
font-weight: bold;
}

a.bgorange, a.bgrot, a.bgblue, a.bgdgrau, a.bggrau
{
color: white !important;
}

a:visited, a.new:visited, #p-personal a.new:visited, a.external:visited, a code
{
color: #337ab7 !important;
}

h5
{
font-weight: bold;
}

p
{
max-width: 45em;
overflow: hidden
}

p.no-max-width
{
max-width: none;
}

pre, code, tt, .mw-geshi
{
font-family: consolas, "courier new", courier, monospace;
font-size: 100%;
}

.indent
{
display: block;
margin: 0 0 0 1em;
}

.table_biblio
{
margin: 0 0 1em 1em;
font-size: 95%;
max-width: 45em;
}

.table_biblio td
{
padding: 4;
}

.table_no_border
{
margin: 1em 1em 1em 0;
border: 0;
background: white;
border-collapse: collapse
}

.subtable
{
text-align:left;
background-color: #EEEEFF !important;
font-weight:bold
}

.datatable,
.datatable-rt,
.datatable-modules,
.datatable-sql
{
margin: 1ex 1em 1ex 0;
border:1px #aaa solid;
background:white;
border-collapse:collapse;
}

.datatable th, .datatable td,
.datatable-rt th,.datatable-rt td,
.datatable-modules th,.datatable-modules td,
.datatable-sql th,.datatable-sql td
{
border:1px #aaa solid;
padding:1ex
}

.datatable-sql th,.datatable-sql td
{
font-family: consolas, "courier new", courier, monospace;
font-size: 95%;
}

.datatable tbody tr:nth-child(odd) td,
.datatable-rt tbody tr:nth-child(odd) td,
.datatable-sql tbody tr:nth-child(odd) td
{
background-color: #eee;
}

.datatable-modules tbody tr:nth-child(odd) td
{
background-color: #fcfcfc;
}

.datatable th,
.datatable-rt th,
.datatable-modules th,
.datatable-sql th
{
vertical-align:top;
text-align:left;
background-color: #ccc;
font-weight:bold
}

.datatable td,
.datatable-rt td,
.datatable-modules td,
.datatable-sql td
{
vertical-align: top;
}

.formtable td, .formtable th
{
vertical-align: middle !important;
}

@media (max-width: 47.9375em) {
.datatable-rt {
border:0;
padding-bottom: 1.4375em;
padding-bottom: 0;
display: block;
width: 100%;
/*
* make everything display block so it
* aligns vertically
*/
/* Labeling
* adding a data-title attribute to the cells
* lets us add text before the content to provide
* the missing context
*
* Markup:
* <td data-title="Column Header">Content Here</td>
*
* Display:
* Column Header: Content Here
*/
}
.datatable-rt caption {
display: block;
}
.datatable-rt thead, .datatable-rt tbody tr:first-child {
display: none;
visibility: hidden;
}
.datatable-rt tbody {
border:0;
display: block;
padding: 0;
text-align: left;
white-space: normal;
}
.datatable-rt tr, .datatable-rt td {
border:1px #aaa solid;
display: block;
padding: 0;
text-align: left;
white-space: normal;
}
.datatable-rt tr {
margin-bottom: 1.5em;
}
.datatable-rt th[data-title]:before,
table td[data-title]:before {
content: attr(data-title) "\a";
font-weight: bold;
white-space: pre;
}
.datatable-rt th:not([data-title]) {
font-weight: bold;
}
.datatable-rt td:empty {
display: none;
}
}

.citetable
{
margin: 1em 1em 1em 0;
border:1px #aaa solid;
background:white;
border-collapse:collapse;
}
.citetable th,.citetable td
{
border:1px #aaa solid;
padding:1ex;
max-width: 400px;
word-wrap: break-word;
}

.citetable th
{
text-align:center;
background-color: #EEEEFF;
font-weight:bold
}

.citetable td
{
vertical-align: top;
}

.menutable
{
margin: 0 0 1em 0;
border: 0;
background: white;
border-collapse:collapse
}

.menutable p
{
margin: 0;
}

/*
.mw-content-ltr
{
margin-top: 1em;
margin-bottom: 1em;
}

.mw-code
{
font-family: consolas, "courier new", courier, monospace;
font-size: 95%;
max-width: 57em;
}

pre
{
max-width: 57em;
}

code
{
background-color: #FFF;
border: 0;
border-radius: 0;
padding: 0 0;
}

td
{
padding: 0.2em;
}

#toc ul
{
margin-left: -0.5em !important;
}

#bodyContent ul
{
list-style-type: none !important;
}

#bodyContent ul, #bodyContent ol
{
overflow: hidden;
max-width: 43.4em;
}

.mw-body a, .mw-body a:visited, .mw-body a.new:visited
{
color: #337ab7;
}

.mw-body ul
{
list-style: none !important;
}

.mw-body ul, .mw-body ol
{
padding-left: 0ex !important;
padding-bottom: 0ex !important;
}

#bodyContent .inputSpan ul > li::before,
#bodyContent .redirectMsg ul > li::before,
li#mw-imagepage-reupload-link::before,
li#mw-imagepage-upload-disallowed::before
{
content: "" !important;
}

li#mw-imagepage-reupload-link .plainlinks,
li#mw-imagepage-upload-disallowed
{
text-indent: -1.6em !important;
}

#bodyContent ul > li::before
{
content: "\2013 \0020";
}

.select2-container-multi .select2-search-choice-close {
left: -15px !important;
}

#bodyContent ol > li
{
margin-left: 1.6em;
}
#bodyContent ul > li
{
text-indent: -0.9em;
margin-left: 1.6em;
}

#bodyContent ul > li.gallerybox
{
text-indent: 0;
}

#bodyContent .rightfloat ul > li
{
margin-left: 3.9em !important;
}

#bodyContent #mw-subcategories ul > li::before,
#toc ul > li::before,
.toc ul > li::before,
#bodyContent .ms-list > li::before,
#bodyContent .gallerybox::before,
#bodyContent ul#filetoc > li::before
{
content: none !important;
}

.mw-search-profile-tabs .search-types a
{
display: inline !important;
padding: 0 !important;
}

.mw-search-result-heading
{
display: inline !important;
}

.mw-search-results .searchresult, .mw-search-result-data
{
text-indent: 0
}

li
{
max-width: 50em;
}

dd
{
max-width: 50em;
}

.thumbinner
{
margin-bottom: 0 !important;
}

.mw-headline
{
padding-top: 0px !important;
}

#mw-createaccount-cta, #pt-createaccount
{
display: none !important;
}

.mw-highlight
{
background-color: #ffffff !important;
}

.wiki_quality
{
margin: 0px 0px 15px 0px;
padding: 0.2ex;
font-size: 75%;
background-color: #DDD;
}

.wiki_quality p
{
padding-left: 1ex;
margin: 0;
}

.wiki_quality table
{
margin: 0 1px 1px 0;
}
.wiki_quality td
{
border: 1px #DDD solid !important;
}

.wiki_red
{
background-color: #FFA288 !important;
}

.wiki_yellow
{
background-color: #FFECAD !important;
}

.wiki_green
{
background-color: #96D1AD !important;
}

.wiki_warning_01
{
margin: 0px 0px 7px 0px;
padding: 1ex;
border: 5px solid #FFE489;
font-size: 95%
}

.wiki_warning_02
{
margin: 0px 0px 7px 0px;
padding: 1ex;
border: 5px solid #FFA288;
font-size: 95%
}

.wiki_highlight_01
{
margin: 0px 0px 7px 0px;
padding: 1ex;
border: 5px solid #96D1AD;
font-size: 95%
}

.wiki_disambiguation_01
{
border: 1px solid #aaa;
border-width:2px 0 2px 0;
background-color: #f9f9f9;
padding: 5px 5px 0px 5px;
margin: 0px 0px 7px 0px;
font-size:100%;
}

div.inline * {display:inline}

.mw-codeX
{
max-width: 48em;
}

.formInput
{
width: 30em
}

.formula
{
display: block;
margin: 0 0 1ex 1em;
max-width: 100%;
}

.regular
{
font-style: regular;
}

.quote
{
display: block;
font-style: italic;
margin: 0 0 1ex 1em;
max-width: 43em;
overflow: hidden;
}

.quote em, .quote i, i em, em em, em i
{
font-style: normal;
}

.quote2
{
display: block;
font-style: normal;
margin: 0 0 0 1em;
max-width: 44em;
}

div.floatright
{
clear: right;
float: right;
margin: 0.5em 0 0.8em 1.4em;
position: relative;
}

div.floatleft
{
clear: left;
float: left;
margin: 0.5em 0 0.8em 1.4em;
position: relative;
}

.mw-code
{
margin: 0 0 1ex 1em;
}
/* Add arrows to toggle-blocks for collapsible elements */
.mw-collapsible-arrowtoggle.mw-collapsible-toggle-expanded {
padding-left: 20px !important;
background-image: url('//upload.wikimedia.
org/wikipedia/commons/1/10/MediaWiki_Vector_skin_action_arrow.png');
background-repeat: no-repeat;
background-position: center left;
}
.mw-collapsible-arrowtoggle.mw-collapsible-toggle-collapsed {
padding-left: 20px !important;
background-image: url('//upload.wikimedia.org/wikipedia/commons/4/41/MediaWiki_Vector_skin_right_arrow.png');
background-repeat: no-repeat;
background-position: center left;
}
.action a img
{ margin: -5px 0 0 -16px !important;
}

.bg1 { background-color: #ffd890 }
.bg2 { background-color: #b4fff1 }
.bg3 { background-color: #c6e894 }
.bg4 { background-color: #e89898 }
.bg5 { background-color: #c6acff }

/* Wikipedia */
table > * > tr.hintergrundfarbe1 > th, table > * > tr > th.hintergrundfarbe1, table.hintergrundfarbe1, .hintergrundfarbe1 {
background-color: #f9f9f9;
}
table > * > tr.hintergrundfarbe2 > th, table > * > tr > th.hintergrundfarbe2, table.hintergrundfarbe2, .hintergrundfarbe2 {
background-color: #fff !important;
}
table > * > tr.hintergrundfarbe3 > th, table > * > tr > th.hintergrundfarbe3, table.hintergrundfarbe3, .hintergrundfarbe3 {
background-color: #ffff40;
}
table > * > tr.hintergrundfarbe4 > th, table > * > tr > th.hintergrundfarbe4, table.hintergrundfarbe4, .hintergrundfarbe4 {
background-color: #fa0;
}
table > * > tr.hintergrundfarbe5 > th, table > * > tr > th.hintergrundfarbe5, table.hintergrundfarbe5, .hintergrundfarbe5 {
background-color: #e0e0e0;
}
table > * > tr.hintergrundfarbe6 > th, table > * > tr > th.hintergrundfarbe6, table.hintergrundfarbe6, .hintergrundfarbe6 {
background-color: #b3b7ff;
}
table > * > tr.hintergrundfarbe7 > th, table > * > tr > th.hintergrundfarbe7, table.hintergrundfarbe7, .hintergrundfarbe7 {
background-color: #ffcbcb;
}
table > * > tr.hintergrundfarbe8 > th, table > * > tr > th.hintergrundfarbe8, table.hintergrundfarbe8, .hintergrundfarbe8 {
background-color: #ffebad;
}
table > * > tr.hintergrundfarbe9 > th, table > * > tr > th.hintergrundfarbe9, table.hintergrundfarbe9, .hintergrundfarbe9 {
background-color: #b9ffc5;
}

/* Studienpläne */

.bgdgrey, .bgdgrau
{ background: #555; }

.bggrey, .bggrau
{ background: #999; }

.bgorange
{ background: #f60; }

.bgblue, .bgblau
{ background: #36c; }

.bgred, .bgrot
{ background: #c03; }

.bgdgrey a, .bgdgrau a
{ color: #fff !important; }

.bggrey a, .bggrau a
{ color: #fff !important; }

.bgorange a
{ color: #fff !important; }

.bgblue a, .bgblau a
{ color: #fff !important; }

.bgred a, .bgrot a
{ color: #fff !important; }

.bgdgrey a, .bgdgrau a
{ color: #fff !important; }

.grey, .grau
{ color: #999 }

.dgrey, .dgrau
{ color: #666; }

.orange
{ color: #f60; }

.white
{ color: #fff !important; }

.amber
{ color: #f60; }

.blue, .blau
{ color: #36c; }

.studienplan
{ border-collapse: collapse; }

.studienplan tr
{ height: 1em; }

.studienplan td
{ border: 1px solid #222;
vertical-align: text-top;
padding: 5px 5px 5px 5px;
width: auto;
}

.studienplan td.noborder
{ border: 0px; }

.studienplan
{ border-collapse: collapse; }

.studienplan > * > td
{ border: 1px solid #222; }

table.wikitable
{ margin: 2ex 0 3ex 0 !important;
}

table.texttable
{ margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-collapse: collapse;
}

table.texttable td
{ border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}

table.texttable td:first-child
{ padding: 0 !important;
}

table.texttable td:first-child ~ td
{ padding-left: 0.2em !important;
}

table.wikitable > th
{ background-color: #ddd !important;
}

table.wikitable td, table.wikitable > th,
table.wikitext td, table.wikitext > th
{ text-align: left !important;
vertical-align: top !important;
}

table.wikitable td, table.wikitable > th,
table.wikitext td, table.wikitext > th
{ text-align: left !important;
vertical-align: top !important;
}

### Tooltips

#tooltip
{ font-size: 0.875em;
text-align: center;
text-shadow: 0 1px rgba( 0, 0, 0, .5 );
line-height: 1.5;
color: #fff;
background: #333;
background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) );
background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-top: 1px solid #fff;
-webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
-moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
position: absolute;
z-index: 100;
padding: 15px;
}

#tooltip:after
{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
border-top-color: rgba( 0, 0, 0, .7 );
content: '';
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -10px;
}

#tooltip.top:after
{
border-top-color: transparent;
border-bottom: 10px solid #333;
border-bottom-color: rgba( 0, 0, 0, .6 );
top: -20px;
bottom: auto;
}

#tooltip.left:after
{
left: 10px;
margin: 0;
}

#tooltip.right:after
{
right: 10px;
left: auto;
margin: 0;
}

abbr[title]
{
border-bottom: 0 !important
}
*/

Vorlage:HSA-Mitglied

2026-01-20T07:45:49Z

Kowa:

<includeonly>__NOCACHE__<nowiki/>{{#arraydefine:fak|{{{fakultaet|}}}}}{{#loop: i
| 0
| {{#arraysize:fak}}
| {{#set: HSA:Person:Fakultaet = {{#arrayindex:fak|{{#var:i}}}} }}
}}{{#arraydefine:stg|{{{studiengang|}}}}}{{#loop: i
| 0
| {{#arraysize:stg}}
| {{#set: HSA:Person:Studiengang = {{#arrayindex:stg|{{#var:i}}}} }}
}}{{#set: HSA:Person:Funktion = {{{funktion|}}} }}{{#set: HSA:Person:Pruefer = {{{pruefer|}}} }}{{#arraydefine:f|{{#ask: [[{{FULLPAGENAME}}]]|?HSA:Person:Fakultaet|format=array|mainlabel=-|headers=hide|pagetitle=hide|manysep=,}} }}{{#arraydefine:s|{{#ask: [[{{FULLPAGENAME}}]]|?HSA:Person:Studiengang|format=array|mainlabel=-|headers=hide|pagetitle=hide|manysep=,}} }}<!--

[[Kategorie:Person:HSA-Mitglied]]
</includeonly><noinclude>
==Benutzung==

<pre><nowiki>{{Studiengang
| fakultaet = <FAKULTÄT 1>, <FAKULTÄT 2> ...
| studiengang = <STUDIENGANG 1>, <STUDIENGANG 2> ...
| funktion = Professor|Lehrbeauftragter|Wissenschaftlicher Mitarbeiter|Mitarbeiter
| pruefer = wahr|falsch
}}</nowiki></pre>
[[Kategorie:Vorlage:HSA|HSA-Mitglied]][[Kategorie:Vorlage:SMW|HSA-Mitglied]]
</noinclude>

Wolfgang Kowarschick

2026-01-20T07:43:30Z

Kowa:

{{Qualität
|correctness=5
|extent=1
|numberOfReferences=1
|qualityOfReferences=1
|conformance=3
}}
{{Person
|anrede=Herr
|titel=Prof. Dr.
|titelLang=Prof. Dr. rer. nat. Dipl.-Math. (Univ.)
|nachname=Kowarschick
|vorname=Wolfgang
|vornamen=Wolfgang Lukas Josef
|name=
|titelNach=
|titelNachLang=
|nameLang=
|nameVollstaendig=
|nameVollstaendigLang=
|homepage=http://kowa.hs-augsburg.de/
|geburtsdatum=1961/05/05
|geburtsort=Selb
|todesort=
|hochschule=Hochschule Augsburg, Technische Universität München
|portrait=Datei:Kowacomic.jpg
|portraitTitel=
|vater=
|mutter=
}}
{{HSA-Mitglied
|fakultaet=FKI
|studiengang=
|funktion=Professor
}}
{{Autor
|dblp=k/Kowarschick:Wolfgang_L=_J=
|gnd=123628636
|lccn=n93016142
|viaf=32909050
}}
==Quellen==

* Die Person ist dem Autor persönlich bekannt.

Wolfgang Kowarschick

2026-01-20T07:42:45Z

Kowa:

{{Qualität
|correctness=5
|extent=1
|numberOfReferences=1
|qualityOfReferences=1
|conformance=3
}}
{{Person
|anrede=Herr
|titel=Prof. Dr.
|titelLang=Prof. Dr. rer. nat. Dipl.-Math. (Univ.)
|nachname=Kowarschick
|vorname=Wolfgang
|vornamen=Wolfgang Lukas Josef
|name=
|titelNach=
|titelNachLang=
|nameLang=
|nameVollstaendig=
|nameVollstaendigLang=
|homepage=http://kowa.hs-augsburg.de/
|geburtsdatum=1961/05/05
|geburtsort=Selb
|todesort=
|hochschule=Hochschule Augsburg, Technische Universität München
|portrait=Datei:Kowacomic.jpg
|portraitTitel=
|vater=
|mutter=
}}
{{HSA-Mitglied
|fakultaet=FKI
|studiengang=
|funktion=
|pruefer=Nein
}}
{{Autor
|dblp=k/Kowarschick:Wolfgang_L=_J=
|gnd=123628636
|lccn=n93016142
|viaf=32909050
}}
==Quellen==

* Die Person ist dem Autor persönlich bekannt.

Wolfgang Kowarschick

2026-01-20T07:41:45Z

Kowa:

{{Qualität
|correctness=5
|extent=1
|numberOfReferences=1
|qualityOfReferences=1
|conformance=3
}}
{{Person
|anrede=Herr
|titel=Prof. Dr.
|titelLang=Prof. Dr. rer. nat. Dipl.-Math. (Univ.)
|nachname=Kowarschick
|vorname=Wolfgang
|vornamen=Wolfgang Lukas Josef
|name=
|titelNach=
|titelNachLang=
|nameLang=
|nameVollstaendig=
|nameVollstaendigLang=
|homepage=http://kowa.hs-augsburg.de/
|geburtsdatum=1961/05/05
|geburtsort=Selb
|todesort=
|hochschule=Hochschule Augsburg, Technische Universität München
|portrait=Datei:Kowacomic.jpg
|portraitTitel=
|vater=
|mutter=
}}
{{HSA-Mitglied
|fakultaet=FKI
|studiengang=
|funktion=Professor
|pruefer=Nein
}}
{{Autor
|dblp=k/Kowarschick:Wolfgang_L=_J=
|gnd=123628636
|lccn=n93016142
|viaf=32909050
}}
==Quellen==

* Die Person ist dem Autor persönlich bekannt.

Wolfgang Kowarschick

2026-01-20T07:37:23Z

Kowa:

{{Qualität
|correctness=5
|extent=1
|numberOfReferences=1
|qualityOfReferences=1
|conformance=3
}}
{{Person
|anrede=Herr
|titel=Prof. Dr.
|titelLang=Prof. Dr. rer. nat. Dipl.-Math. (Univ.)
|nachname=Kowarschick
|vorname=Wolfgang
|vornamen=Wolfgang Lukas Josef
|name=
|titelNach=
|titelNachLang=
|nameLang=
|nameVollstaendig=
|nameVollstaendigLang=
|homepage=http://kowa.hs-augsburg.de/
|geburtsdatum=1961/05/05
|geburtsort=Selb
|todesort=
|hochschule=Hochschule Augsburg, Technische Universität München
|portrait=Datei:Kowacomic.jpg
|portraitTitel=
|vater=
|mutter=
}}
{{Autor
|dblp=k/Kowarschick:Wolfgang_L=_J=
|gnd=123628636
|lccn=n93016142
|viaf=32909050
}}
==Quellen==

* Die Person ist dem Autor persönlich bekannt.

Geordnetes Paar: Definition von Frege

2025-09-30T06:48:27Z

Kowa: /* Frage-Paare als JavaScript-Funktionen */

{{Qualität
|correctness = 4
|extent = 4
|numberOfReferences = 5
|qualityOfReferences = 5
|conformance = 5
}}
Der Artikel „[[Geordnetes Paar]]“ befasst sich mit der Geschichte und den wichtigsten Definitionen des „geordneten Paares“.
Die älteste mir bekannte Definition, die den Paar-Begriff auf zuvor definierte Grundbegriffe zurückführt,
ist die Definition von [[Gottlob Frege]].

Da die Symbolik, die Frege verwendet, ungewöhnlich ist
(dies war einer der Gründe, warum er zu Lebzeiten wenig Anerkennung fand<ref>{{Quelle|Wußing (2009)}}, S. 402</ref>),
ist seine Definition nicht ohne Weiters zu verstehen. Im Folgenden soll daher versucht werden, diese Definition etwas zu veranschaulichen.

==[[Gottlob Frege|Frege]] (1893)<ref name="Frege (1893)">{{Quelle|Frege (1893)}}</ref>==
[[Datei:Frege (1893), §144, S179.png|mini|300px|Definition des geordneten Paars, Frege (1893), §144, S. 179<ref name="Frege (1893)"/>]]

''Wir definiren nun das Paar so:''
<div class="formula"><math>\Vdash\acute{\epsilon}(o \frown (a \frown \epsilon)) = o; a</math> </div>
''Das Semikolon ist hierbei zweiseitiges Functionszeichen.'' (Frege (1893), §144, S. 179<ref name="Frege (1893)"/>)

==Probleme mit dem Verständnis von Freges Definition==
Freges Definition ist nicht zu verstehen, wenn man seine Symbolik nicht kennt oder falsch interpretiert.
Zum Beispiel merkt [[Richard G. Heck Jnr.|Richard Heck]] zu dieser Definition fälschlicherweise an, dass
sie weder mengentheoretisch noch mit Hilfe der [[Prädikatenlogik zweiter Ordnung]] konsistent nachgebildet werden kann:
{{Quote|Unfortunately, Frege's definition of ordered pairs is, as George Boolos once put it, extravagant
and can not be consistently reconstructed, either in second-order logic or in set-theory.<ref>{{Quelle|Heck (1997)}}</ref>}}

Auch ist nicht notwendigerweise jeder Versuch, diese Definition in eine moderne Form zu zu bringen, von Erfolg gekrönt.
Der [[C.S. Peirce]] Professor of American Philosophy [[Randall Dipert]] übersetzt Freges Definition beispielsweise folgendermaßen:
<div class="formula"><math><x,y> := \{x,\{y\}\}</math><ref name="Dipert">{{Quelle|Dipert (1982)}}, S. 355</ref></div>
Er merkt an, dass diese Definition falsch ist, weil z.B. die Paare <math><\{\{c\}\}, c></math> und <math><\{c\}, \{c\}></math> nicht unterschieden werden könnten,
da sie beide durch <math>\{\{\{c\}\}, \{c\}\}</math> repräsentiert würden. Das stimmt zwar, ist aber nicht Freges Definition anzulasten,
sondern Diperts falscher Interpretation dieser Definition.

Gottlob Frege definiert das Paar <math>o;a</math> mit Hilfe eines „Werthverlaufs“ <math>\acute{\epsilon}\phi(\epsilon)</math>
und der „Function <math>\xi \frown \zeta</math> mit zwei Argumenten“ (Frege (1893, §9 und §34)<ref name="Frege (1893)"/>). Da Frege der Funktion <math>\frown</math>
keinen Namen gibt, soll diese im Folgenden „Frown“ heißen (in Anlehnung an den Namen des [[LaTeX]]-Symbols, mit dem sie in diesem Beitrag dargestellt wird).

Um die Definition von Frege zu verstehen, muss man die Bedeutung des Wertverlaufs einer Funktion und die Frown-Funktion kennen.
Auch hier leitet die Literatur einen leicht in die Irre. Beispielsweise interpretiert Edward Zalta (2014, Abschnitt 2.3) die Frown-Operation
als Element-Operation <math>\in</math>.<ref name="Zalta (2014)">{{Quelle|Zalta (2014)}}</ref>
Das ist richtig, falls der Wertverlauf einer Prädikatsfunktion betrachtet wird, d.h. einer Funktion, die jedes Element des Frege-Universums auf einen [[Wahheitswert]] abbildet.
Eine derartige Funktion wird von Frege „Begriff“ genannt (Zalta verwendet die englische Übersetzung “concept”). Die Frown-Funktion von Frege ist
allerdings nicht nur für Wertverläufe von „Begriffen“ definiert, sondern für Wertverläufe von beliebigen Funktionen. Das heißt, i. Allg. kann man <math>\frown</math> nicht mit <math>\in</math> gleichsetzen.

==Wertverlauf und Frown-Funktion==
Freges Definition

<div class="formula"><math>\Vdash\acute{\epsilon}(o \frown (a \frown \epsilon)) = o;a</math> </div>

enthält drei unübliche Symbole, deren Bedeutungen im Folgenden näher beleuchtet werden: <math>\Vdash</math>, <math>\acute\cdot</math> und <math>\frown</math>.

===Der Definitionsdoppelstrich===
<math>\Vdash</math> ist der „Definitionsdoppelstrich“, der von Frege als Erweiterung des „Urtheilstrichs“ <math>\vdash</math>
definiert wird (Frege (1893, §27 und §5)<ref name="Frege (1893)"/>). Das Symbol <math>\vdash</math> wird in der Logik heute noch als „Herleitungs“-, „Ableitungs“- oder „[[Inferenzoperator]]“ verwendet.

Der Definitionsdoppelstrich sagt zusammen mit dem Gleichheitszeichen <math>=</math> aus,
dass der Term <math>o;a</math> eine abkürzende Schreibweise für den Term <math>\acute{\epsilon}(o \frown (a \frown \epsilon))</math> ist.
Heutzutage würde man üblicherweise folgende Schreibweise verwenden:
<div class="formula"><math>o;a := \acute{\epsilon}(o \frown (a \frown \epsilon)) </math> </div>

===Der Wertverlaufsoperator===
Der Operator <math>\acute\cdot</math> wird von Frege genutzt, um den „Werthverlauf“ einer Funktion zu beschreiben (Frege (1893), §9<ref name="Frege (1893)"/>).
Laut Kutschera (1989, S. 96)<ref name = "Kutschera">{{Quelle|Kutschera (1989)}}</ref> kann man den
Wertverlauf <math>\acute{\epsilon}\phi(\epsilon)</math> einer Funktion <math>\phi</math> in heutigen Klassensystemen
durch die Klasse <math>\{[\epsilon,\phi(\epsilon)]: \top\}</math> ausdrücken,
wobei die Objekte <math>[x,y]</math> keine Frege-Paare sind, sondern geordnete Paare des zugrundeliegende Klassensystems
(Wiener-/Kuratowski-/Quine-/Morse-/Schmidt-Paare o. Ä.; siehe Artikel „[[geordnetes Paar]]“).

Für Frege sind Funktionen allerdings grundlegender als Klassen.
In seinem Axiomensstem sind Funktionen (und deren Wertverläufe) wie beim [[Lambda-Kalkül]] von [[Alonzo Church]] Grundbegriffe,
die nicht definiert, sondern nur erläutert werden können<ref name = "Kutschera"/>
und mit deren Hilfe andere Gundbegriffe wie Klassen, Paare, natürliche Zahlen etc. definiert werden.

Denselben Weg schlägt beispielsweise auch John von Neumann (1925) ein.<ref name = "Neumann (1925)">{{Quelle|Neumann (1925)}}</ref>
Allerdings unterscheidet sich sein Axiomensystem
hinsichtlich der Definition des geordneten Paares in
zwei wesentlichen Punkten von Freges Axiomensystem:

* Es erlaubt nicht die uneingeschränkte Bildung von Funktionen und geordneten Paaren, so dass die [[Russellsche Antinomie]] mit großer Wahrscheinlichkeit, aber – aufgrund des zweiten [[Gödelscher Unvollständigkeitssatz|Gödelschen Unvollständigkeitssatzes]] – nicht beweisbar vermieden wird.
* Geordnete Paare werden axiomatisch eingeführt und nicht per Definition.

Überlicherweise werden heute allerdings meist mengen- oder klassenbasierte Systeme (wie z.B. [[Zermelo-Fraenkel-Mengenlehre]], [[Neumann-Bernays-Gödel-Mengenlehre]], [[Quine-Rosser-Mengenlehre]]) zur Formalisierung der Mathematik eingesetzt.
In diesen Systemen wird zwischen einer Funktion und ihrem Wertverlauf i. Allg. nicht mehr unterschieden. Im Gegenteil: Funktionen werden
mit Hilfe von Wertverlaufsklassen definiert (siehe z.B. Schmidt (1966)<ref name="Schmidt (1966)">{{Quelle|Schmidt (1966)}}</ref>):
Eine Funktion <math>f</math> ist eine Klasse von Paaren, wobei es keine zwei Paare <math>[x, y_1], [x, y_2] \in f</math> gibt, für die
<math>y_1 \not= y_2</math> gilt.

Da Funktionen (genauer: Wertverläufe von Funktionen) wesentlich für die Definition des Freges-Paares sind, können Funktionen nicht mit Hilfe des Frege-Paares
definiert werden. Dies war aber auch nicht die Absicht von Frege. Er benötigte die Paare zur
Konstruktion von [[reele Zahl|reellen Zahlen]] (vgl. Frege (1903, §161 ff.)<ref>{{Quelle|Frege (1903)}}</ref>, Kutschera (1989, S. 125)<ref name="Kutschera"/>).

Um sich Frege-Paare zu veranschaulichen, kann man dennoch einen Trick anwenden: Man identifiziert Funktionen mit ihrem Wertverlauf (so wie das in Klassensystemen üblich ist). Das einzige Problem, das man sich dabei einhandelt, ist, dass Frege-Paare <math>a;b</math> dann – sofern man eine moderne klassenbasierten Theorie zu Hilfe nimmt – mit Hilfe von anderen Paaren <math>[a,b]</math> definiert werden. Das ist aber nichts Ungewöhnliches. So werden z.B. auch [[Morse-Paar]]e<ref name="Morse">{{Quelle|Morse (1965)}}</ref> mit Hilfe von
[[Kuratowski-Paar]]en<ref name ="Kuratowski">{{Quelle|Kuratowski (1921)}}</ref> definiert.

Alternativ kann man sich den Wertverlauf-Operator als [[Lambda-Kalkül|Lambda-Operator]] vorstellen (vgl. Zalta (2014)<ref name="Zalta (2014)"/>):
<div class="formula"><math>\acute{\epsilon}\phi(\epsilon) \;\hat=\; \lambda \epsilon .\phi(\epsilon)</math></div>

Wenn man die [[Eta-Konversion|η-Konversion]] im Lambda-Kalkül zulässt, sieht man auch hier, dass der Wertverlauf von <math>\phi</math> mit
<math>\phi</math> selbst identifiziert werden kann:

<div class="formula"><math>\lambda \epsilon .\phi(\epsilon) \;=\; \phi</math></div>

Frege betrachtet nicht nur arithmetische Funktionen, sondern auch [[Prädikatsfunktion]]en.
Diese heißen bei ihm „Begriffe“ (Frege (1893, §3, S. 8)<ref name="Frege (1893)"/>).
Eine Pädikatsfunktion liefert für alle Argumente einen [[Junktor#Nullstellige_Junktoren|Wahrheitswert]] {{Mono|T}} oder {{Mono|F}}
als Ergebnis. Frege bezeichnet diese Werte als „das Wahre“ und „das Falsche“.
Wenn <math>\phi</math> eine Prädikatsfunktion ist, die '''jedem''' Objekt im Frege-Universum einen Wahrheitswert zuordnet,
kann der Wertverlauf von <math>\phi</math> auch als Klasse aufgefasst werden,
die alle Elemente (Frege: „Gegenstände“) <math>\epsilon</math> enthält, für die <math>\phi(\epsilon)</math> wahr ist.
Der Wertvelauf <math>\acute{\epsilon}\phi(\epsilon)</math> entspricht unter dieser Sichtweise der Klasse <math>\{\epsilon: \phi(\epsilon)\}</math> (vgl. Kutschera (1989, Kapitel 6.4)<ref name = "Kutschera"/>).
Insbesondere definiert Frege die leere Menge und einelementige Mengen mit Hilfe von Wertverläufen (führt dafür aber keine eigenen Symbole ein):

{| class="wikitable"
|-
! || moderne Definition || Freges Definition || Quellen
|-
| leere Menge || <math>\emptyset := \{x: x\not=x\}</math> || <math>\acute{\epsilon}\neg(\epsilon=\epsilon)</math> || [[Klasse_(Mengenlehre)#Spezielle_Klassen_Anlehnung_Schmidt.5B2.5D|Klasse]], Frege (1893, S. 53, vorletzter Absatz)<ref name="Frege (1893)"/>
|-
| Einermenge || <math>\{a\} := \{x: x=a\}</math> oder<br/><math>\{a\} := \{x: \rm{Mg}(a) \rightarrow x = a\}</math> || <math>\acute{\epsilon}(\epsilon=a)</math> || [[Klasse_(Mengenlehre)#Spezielle_Klassen_Anlehnung_Schmidt.5B2.5D|Klasse]], Frege (1893, §11)<ref name="Frege (1893)"/>
|-
| Extraktion des Elements<br/>einer Einermenge || Es sei <math>a</math> eine Menge.<br/><math>A =\{a\} \rightarrow \bigcup{A} = a</math> ||Wenn <math>A =\acute{\epsilon}(\epsilon=a)</math>, dann <math>\backslash A = a</math> ||
Schmidt (1966, S72, 8.28)<ref name="Schmidt (1966)"/>, Frege (1893, §11)<ref name="Frege (1893)"/>
|}

Für alle Objekte <math>A</math>, die keine Einermenge sind, setzt Frege fest, dass <math>\backslash A = A</math> gilt.
Das heißt, für die leere Menge liefern <math>\bigcup</math> und <math>\backslash</math> ebenfalls dasselbe Ergebnis (nämlich die leere Menge).
Für alle anderen Objekte <math>A</math> unterscheiden sich die Ergebnisse von <math>\bigcup A</math> und <math>\backslash A</math> dagegen. Dies ist für
die Veranschaulichung der Frown-Funktion, die im nachfolgenden Abschnitt beschrieben wird, jedoch nicht von Belang,
da bei der Definition dieser Funktion nur die leere Menge und einelementige Mengen benötigt werden.

[[Datei:Frege_1893_§34_S53.png|mini|300px|Definition der Frown-Funktion, Frege (1893, §34, S. 53)<ref name="Frege (1893)"/>]]

===Die Frown-Funktion===

Frege definiert die Frown-Funktion folgendermaßen (Frege (1893, §34, S. 53)<ref name="Frege (1893)"/>):

<div class="formula"><math>\Vdash\backslash\acute{\alpha}(\neg\bigwedge g : u = \acute{\epsilon}g(\epsilon) \rightarrow \neg (g(a) = \alpha)) = a \frown u</math></div>
Dies kann man mit Hilfe der Operatoren <math>\bigvee</math> und <math>\wedge</math> (die Frege allerdings nicht explizit definiert und daher auch nicht explitizt verwendet)
etwas einfacher ausdrücken, da <math>\neg \bigwedge g: a \rightarrow \neg b</math> äquivalent zu <math>\bigvee g: a \wedge b </math> ist:

<div class="formula"><math>\Vdash\backslash\acute{\alpha}(\bigvee g : u = \acute{\epsilon}g(\epsilon) \wedge g(a) = \alpha) = a \frown u</math></div>

In einem modernen Klassensystem kann man diese Definition – da es sich bei <math>\bigvee g : \ldots</math> um eine Prädikatsfunktion handelt und es höchstens ein Element <math>\alpha</math> gibt, das dieses Prädikat erfüllt, da also <math>\backslash A</math> und <math>\bigcup A</math> dasselbe Ergebnis liefern – folgendermaßen formulieren:

<div class="formula"><math>a \frown u := \bigcup\{\alpha : \bigvee g : u = \acute{\epsilon}g(\epsilon) \wedge g(a) = \alpha\}</math>
(der Wertlauf <math>\acute{\epsilon}g(\epsilon)</math> repräsentiert hier natürlich die Klasse <math>\{[\epsilon,y]: y=g(\epsilon)\}</math>)
</div>

Zwei Fälle sind zu unterscheiden: Entweder ist <math>u</math> der Wertverlauf einer Funktion g oder <math>u</math> ist dies nicht.
Im ersten Fall gilt:

<div class="formula"><math>\vdash a \frown \acute{\epsilon}g(\epsilon) = \bigcup\{\alpha : g(a) = \alpha\} = g(a)</math></div>

Frege beweist auf den Seiten 74 und 75 denselben Satz in folgender Form:

<div class="formula"><math>\vdash f(a) = a \frown \acute{\epsilon}f(\epsilon)</math> (Dieser Satz erhält von Frege die Satznummer 1.)</div>

Im zweiten Fall gilt:
<div class="formula"><math>\vdash a \frown u = \bigcup\{\alpha : \bigvee g : u = \acute{\epsilon}g(\epsilon) \wedge g(a) = \alpha\} = \bigcup\{\alpha : \bot\} = \emptyset</math></div>

<math>a \frown u</math> liefert also, falls u der Wertverlauf einer Funktion <math>g</math> ist, den Wert der Funktion <math>g</math> für das Argument <math>a</math> als Ergebnis.
Falls <math>u</math> kein Wertverlauf ist, hat <math>a \frown u</math> dagegen die leere Menge als Ergebnis. (vgl. Frege (1893, S. 53, letzter Absatz)<ref name="Frege (1893)"/>; Kutschera (1989, S. 104)<ref name = "Kutschera"/>).

Im Falle einer Prädikatsfunktion entspricht der <math>\frown</math>-Operator dem in Klassensystem üblichen Elementoperator <math>\in</math>:

<div class="formula"><math>a \frown \acute{\epsilon}g(\epsilon) = g(a)</math> entspricht in diesem Fall folgender Beziehung
<math>a \in \{\epsilon: g(\epsilon)\} \leftrightarrow g(a)</math></div>

Dies ist der Spezialfall, mit dem sich Zalta näher befasst<ref name="Zalta (2014)"/>.

[[Datei:Frege 1893 S75.png|mini|300px|Satz 1 und Satz 2: Der Wertverlauf von ein- und zweistelligen Funktionen, Frege (1893), S. 75<ref name="Frege (1893)"/>]]
Frege zeigt auf S. 75 außerdem noch, dass sein Satz 1

<div class="formula"><math>\vdash f(a) = a \frown \acute{\epsilon}f(\epsilon)</math></div>

auch für zweistellige Funktionen verallgemeinert werden kann:

<div class="formula"><math>\vdash f(a,b) = a \frown (b \frown \acute{\alpha}\acute{\epsilon}f(\epsilon,\alpha))</math> (Dieser Satz erhält von Frege die Satznummer 2.)</div>

Analog zu Frege kann man auch

<div class="formula"><math>\vdash f(a)(b) = a \frown (b \frown \acute{\alpha}\acute{\epsilon}f(\epsilon)(\alpha))</math></div>

zeigen. Das heißt, <math>f(a,b)</math> und <math>f(a)(b)</math> unterscheiden sich im Prinzip nicht. Obwohl Frege diese alternative
Notation für Funktionen mit zwei Argumenten nicht verwendet hat, wird dsie im nächsten Abschnitt zur
Veranschaulichung der Paardefinition verwendet, um die Definitionen etwas schlanker zu halten.

Anmerkung: Auf dieselbe Weise könnte man auch den Wertverlauf von beliebigen n-stelligen Funktionen definieren. Dies hat Frege allerdings nicht getan.

===„Übersetzung“ von Freges Definition in „moderne“ Symbolik===

Aus den vorangegangenen Überlegungen folgt, dass man in modernen Klassensystemen Freges Paardefinition

<div class="formula"><math>\Vdash\acute{\epsilon}(o \frown (a \frown \epsilon)) = o; a</math> </div>

mit Hilfe des [[Lambda-Kalkül]]s (das dem Axiomensystem von Frege gerade hinsichtlich des Wertverlauf-Operators etwas näher steht als ein Klassensystem) folgendermaßen formulieren kann:

<div class="formula"><math>o;a \,:= \; \lambda \epsilon . \epsilon a o</math> </div>

Für die „Übersetzung“ von Freges Definition in eine klassenbasierte Definition werden folgende Vereinbarungen getroffen.

* Eine Funktion <math>f</math> ist eine Klasse von Paaren mit <math>[x,y_1], [x,y_2]\in f \rightarrow y_1=y_2</math>.
* Der Funktionsaufruf-Operator <math>\cdot(\cdot)</math> ist folgendermaßen definiert <math>f(x) := \bigcap\{y: [x,y] \in f \}</math>.

Damit definiert man:
<div class="formula"><math>o; a := \{ [\epsilon, \epsilon(a)(o)] : \top\}</math>, d.h, <math>o; a</math> ist eine Funktion mit <math>(o; a)(\epsilon) = \epsilon(a)(o)</math></div>

Sofern <math>\epsilon</math> eine Funktion ist, für die der zweistellige Funktionsaufruf <math>\epsilon(a)(o)</math> definiert ist, stimmen Freges Definition und die
Alternative-Definition überein. Für andere Funktionen und Nicht-Funktionen gilt dagegen bei Frege stets <math>(o;a)(\epsilon) = \emptyset</math>.
Dies ist bei der Alternativdefinition nicht der Fall.
Allerdings ist es für die weiteren Betrachtungen nicht wichtig, welchen Wert <math>(o;a)(\epsilon)</math> annimmt, falls <math>\epsilon(a)(o)</math> nicht definiert ist.

==Das Paaraxiom==

[[Datei:Frege 1893 S195.png|mini|300px|Beweis des Paaraxioms, Teil 1, Frege (1893, S. 195)<ref name="Frege (1893)"/>]]
[[Datei:Frege 1893 S185.png|mini|300px|Beweis des Paaraxioms, Teil 2, Frege (1893, S. 185)<ref name="Frege (1893)"/>]]
Frege beweist die Gültigkeit des [[Paaraxiom]]s direkt, {{dh}} ohne Hilfe von Projektionsoperatoren und des Satzes
[[Satz:Aus der Existenz zweier Projektionsoperatoren für geordnete Paare folgt das Paaraxiom|„Aus der Existenz zweier Projektionsoperatoren für geordnete Paare folgt das Paaraxiom“]]:

{{TBD}}

===Die Projektionsoperatoren===

Frege gibt für seine Paardefinition keine [[Projektionsoperatoren]] an. Es ist aber kein Problem, diese zu definieren.
Und damit ist ebenfalls sichergestellt,
[[Satz:Aus der Existenz zweier Projektionsoperatoren für geordnete Paare folgt das Paaraxiom|dass das Paaraxiom erfüllt ist]].

Die Definition der Projektionsoperatoren kann in modernen Axiomensystemen auf (mindestens) zwei Arten erfolgen:

# Mit Funktionen eines Mengen- oder Klassensystems.
# Mit Hilfe des Lambda-Kalküls.

Man stellt fest, dass im zweiten Fall die Projektionsoperatoren wesentlich prägnanter formuliert werden können.
Das liegt daran, dass es sich sowohl beim Lambda-Kalkül, als auch beim Axiomensystem von Frege um funktionale Axiomensysteme handelt.

====Die Projektionsoperatoren auf Basis von Funktionen eines Mengen- oder Klassensystems====

<div class="formula"><math>\begin{array}{lclclclclclcl}
\rm{id} & := & \{[x,x] : \top \} & \rm{d.h.:} & \rm{id}(x) & = & x \\
\rm{const_c} & := & \{[x,c] : \top \} & \rm{d.h.:} & \rm{const_c}(x) & = & c \\
\pi'_1 & := & \{[x,\rm{id}] : \top \} & \rm{d.h.:} & \pi'_1(x) & = & \rm{id} \\
& & & \rm{d.h.:} & \pi'_1(x)(y) & = & \rm{id}(y) = y \\
\pi'_2 & := & \{[x,\rm{const}_x] : \top \} & \rm{d.h.:} & \pi'_2(x) & = & \rm{const}_x \\
& & & \rm{d.h.:} & \pi'_2(x)(y) & = & \rm{const}_x(y) = x \\
\pi_1 & := & \{ [p, p(\pi'_1)] : \top\} & \rm{d.h.:} & \pi_1(p) & = & p(\pi'_1) \\
\pi_2 & := & \{ [p, p(\pi'_2)] : \top\} & \rm{d.h.:} & \pi_2(p) & = & p(\pi'_2)
\end{array}</math></div>

<math>\pi_1</math> und <math>\pi_2</math> sind die gesuchten Projektionsoperatoren:

<div class="formula"><math>\begin{array}{lcll}
\pi_1(a;b) & = & (a;b) (\pi'_1) & (\rm{Def. von}\;\pi_1) \\
& = & \pi'_1(b)(a) & (\rm{Def. von}\;a;b) \\
& = & \rm{id}(a) & (\rm{Def. von}\;\pi'_1)\\
& = & a & (\rm{Def. von}\;\rm{id})
\\
\pi_2(a;b) & = & (a;b) (\pi'_2) & (\rm{Def. von}\;\pi_2) \\
& = & \pi'_2(b)(a) & (\rm{Def. von}\;a;b) \\
& = & \rm{const}_b(a)& (\rm{Def. von}\;\pi'_2)\\
& = & b & (\rm{Def. von}\;\rm{const}_b)
\end{array}</math></div>

====Die Projektionsoperatoren auf Basis des Lambda-Kalküls====

<div class="formula"><math>\begin{array}{lclclcl}
\pi_1 & := & \lambda p. p(\lambda x.\lambda y.y) \\
\pi_2 & := & \lambda p. p(\lambda x.\lambda y.x)
\end{array}</math></div>

<math>\pi_1</math> und <math>\pi_2</math> sind die gesuchten Projektionsoperatoren:

<div class="formula"><math>\begin{array}{lcll}
\pi_1(a;b) & = & (a;b) (\lambda x.\lambda y.y) & (\rm{Def. von}\;\pi_1) \\
& = & (\lambda \epsilon . \epsilon b a)(\lambda x. \lambda y. y) & (\rm{Def. von}\;a;b) \\
& = & (\lambda x. \lambda y. y) b a & (\rm{\beta{-}Konversion}) \\
& = & (\lambda y. y) a & (\rm{\beta{-}Konversion}) \\
& = & a & (\rm{\beta{-}Konversion})
\\
\pi_2(a;b) & = & (a;b) (\lambda x.\lambda y.x) & (\rm{Def. von}\;\pi_2) \\
& = & (\lambda \epsilon . \epsilon b a)(\lambda x. \lambda y. x) & (\rm{Def. von}\;a;b) \\
& = & (\lambda x. \lambda y. x) b a & (\rm{\beta{-}Konversion}) \\
& = & (\lambda y. b) a & (\rm{\beta{-}Konversion}) \\
& = & b & (\rm{\beta{-}Konversion}) \\
\end{array} </math></div>

====„Rückübersetzung“ der Projektionsoperatoren in Freges Notation====

Die Projektionsoperatoren des vorangegangenen Abschnitts können ziemlich einfach in
Freges Notation übersetzt werden:

<div class="formula"><math>\begin{array}{lclclcl}
\Vdash \acute{p}(p(\acute{x}(\acute{y}y))) = \pi_1 \\
\Vdash \acute{p}(p(\acute{x}(\acute{y}x))) = \pi_2 \\
\end{array}</math></div>

<math>\pi_1</math> und <math>\pi_2</math> sind die gesuchten Projektionsoperatoren. Der Beweis des Satzes basiert im Wesentlichen
auf Satz 1 von Frege: <math>\vdash f(a) = a \frown \acute{\epsilon}f(\epsilon)</math> (§54, S. 75<ref name="Frege (1893)"/>).

<div class="formula"><math>\begin{array}{lcll}
\vdash \pi_1(a;b) & = & \acute{p}(p(\acute{x}(\acute{y}y)))(a;b) & (\rm{Def. von}\;\pi_1) \\
& = & (a;b) \frown \acute{p}(p(\acute{x}(\acute{y}y))) & (\rm{Frege: Satz 1}) \\
& = & (a;b)(\acute{x}(\acute{y}y)) & (\rm{Frege: Satz 1}) \\
& = & \acute{x}(\acute{y}y) \frown (a;b) & (\rm{Frege: Satz 1}) \\
& = & \acute{x}(\acute{y}y) \frown (\acute{\epsilon}(a \frown (b \frown \epsilon)) & (\rm{Def. von}\;a;b) \\
& = & a \frown (b \frown \acute{x}(\acute{y}y)) & (\rm{Frege: Satz 1}) \\
& = & a \frown \acute{y}y & (\rm{Frege: Satz 1}) \\
& = & a & (\rm{Frege: Satz 1})
\\
\vdash \pi_2(a;b) & = & \acute{p}(p(\acute{x}(\acute{y}x)))(a;b) & (\rm{Def. von}\;\pi_2) \\
& = & (a;b) \frown \acute{p}(p(\acute{x}(\acute{y}x))) & (\rm{Frege: Satz 1}) \\
& = & (a;b)(\acute{x}(\acute{y}x)) & (\rm{Frege: Satz 1}) \\
& = & \acute{x}(\acute{y}x) \frown (a;b) & (\rm{Frege: Satz 1}) \\
& = & \acute{x}(\acute{y}x) \frown (\acute{\epsilon}(a \frown (b \frown \epsilon)) & (\rm{Def. von}\;a;b) \\
& = & a \frown (b \frown \acute{x}(\acute{y}x)) & (\rm{Frege: Satz 1}) \\
& = & a \frown \acute{y}b & (\rm{Frege: Satz 1}) \\
& = & b & (\rm{Frege: Satz 1})
\end{array}</math></div>

==Frage-Paare als JavaScript-Funktionen==

Da Fregepaare mit Hilfe von Funktionen definiert werden und JavaScript Funktionen als First-Class-Objekte behandelt,
kann man Freges Definition sehr leicht mit Hilfe von JavaScript nachbilden:

<source lang="javascript">
/* Diesen Code können Sie direkt in der JavaScript-Konsole Ihres Browser ausführen. */
let // λx.e is expressed by x => e
pair = (o,a) => ε => ε(a)(o), // o;a = λε.εao
π1 = p => p(x => y => y), // π1 = λp.p(λx.λy.y)
π2 = p => p(x => y => x), // π2 = λp.p(λx.λy.x),
p = pair(1111, 2222);

console.log( π1(p) ); // --> 1111
console.log( π2(p) ); // --> 2222

console.log( π1(ε => ε('two')('one')) ); // --> 'one'
console.log( π2(ε => ε('two')('one')) ); // --> 'two'
</source>

Source: [https://glossar.hs-augsburg.de/beispiel/javascript/SetTheory/OrderedPairFregeES6/ EcmaScript6] (''arrow functions''),
[https://glossar.hs-augsburg.de/beispiel/javascript/SetTheory/OrderedPairFregeES5/ EcmaScript5]

Wenn man bereits erzeugte Frege-Paare in einem [[Hasharray]] speichert und diese wiederverwendet,
kann man sogar erzwingen, dass wertgleiche Paare im Sinne von JavaScript identisch ({{Mono|===}}) sind:

<source lang="javascript">
console.log( pair('one','two') === pair('one','two')); // --> true
</source>

Source: [https://glossar.hs-augsburg.de/beispiel/javascript/SetTheory/OrderedPairFregeES6Identity/ EcmaScript6] (''arrow functions''),
[https://glossar.hs-augsburg.de/beispiel/javascript/SetTheory/OrderedPairFregeES5Identity/ EcmaScript5]

==Quellen==

<references/>

[[Kategorie:Mengenlehre]]
[[Kategorie:Datenmanagement]]
[[Kategorie:Datenstruktur]]
[[Kategorie:Glossar]]
[[en:Ordered Pair: Definition by Frege]]

Geordnetes Paar: Definition von Frege

2025-09-30T06:48:04Z

Kowa: /* Frage-Paare als JavaScript-Funktionen */

{{Qualität
|correctness = 4
|extent = 4
|numberOfReferences = 5
|qualityOfReferences = 5
|conformance = 5
}}
Der Artikel „[[Geordnetes Paar]]“ befasst sich mit der Geschichte und den wichtigsten Definitionen des „geordneten Paares“.
Die älteste mir bekannte Definition, die den Paar-Begriff auf zuvor definierte Grundbegriffe zurückführt,
ist die Definition von [[Gottlob Frege]].

Da die Symbolik, die Frege verwendet, ungewöhnlich ist
(dies war einer der Gründe, warum er zu Lebzeiten wenig Anerkennung fand<ref>{{Quelle|Wußing (2009)}}, S. 402</ref>),
ist seine Definition nicht ohne Weiters zu verstehen. Im Folgenden soll daher versucht werden, diese Definition etwas zu veranschaulichen.

==[[Gottlob Frege|Frege]] (1893)<ref name="Frege (1893)">{{Quelle|Frege (1893)}}</ref>==
[[Datei:Frege (1893), §144, S179.png|mini|300px|Definition des geordneten Paars, Frege (1893), §144, S. 179<ref name="Frege (1893)"/>]]

''Wir definiren nun das Paar so:''
<div class="formula"><math>\Vdash\acute{\epsilon}(o \frown (a \frown \epsilon)) = o; a</math> </div>
''Das Semikolon ist hierbei zweiseitiges Functionszeichen.'' (Frege (1893), §144, S. 179<ref name="Frege (1893)"/>)

==Probleme mit dem Verständnis von Freges Definition==
Freges Definition ist nicht zu verstehen, wenn man seine Symbolik nicht kennt oder falsch interpretiert.
Zum Beispiel merkt [[Richard G. Heck Jnr.|Richard Heck]] zu dieser Definition fälschlicherweise an, dass
sie weder mengentheoretisch noch mit Hilfe der [[Prädikatenlogik zweiter Ordnung]] konsistent nachgebildet werden kann:
{{Quote|Unfortunately, Frege's definition of ordered pairs is, as George Boolos once put it, extravagant
and can not be consistently reconstructed, either in second-order logic or in set-theory.<ref>{{Quelle|Heck (1997)}}</ref>}}

Auch ist nicht notwendigerweise jeder Versuch, diese Definition in eine moderne Form zu zu bringen, von Erfolg gekrönt.
Der [[C.S. Peirce]] Professor of American Philosophy [[Randall Dipert]] übersetzt Freges Definition beispielsweise folgendermaßen:
<div class="formula"><math><x,y> := \{x,\{y\}\}</math><ref name="Dipert">{{Quelle|Dipert (1982)}}, S. 355</ref></div>
Er merkt an, dass diese Definition falsch ist, weil z.B. die Paare <math><\{\{c\}\}, c></math> und <math><\{c\}, \{c\}></math> nicht unterschieden werden könnten,
da sie beide durch <math>\{\{\{c\}\}, \{c\}\}</math> repräsentiert würden. Das stimmt zwar, ist aber nicht Freges Definition anzulasten,
sondern Diperts falscher Interpretation dieser Definition.

Gottlob Frege definiert das Paar <math>o;a</math> mit Hilfe eines „Werthverlaufs“ <math>\acute{\epsilon}\phi(\epsilon)</math>
und der „Function <math>\xi \frown \zeta</math> mit zwei Argumenten“ (Frege (1893, §9 und §34)<ref name="Frege (1893)"/>). Da Frege der Funktion <math>\frown</math>
keinen Namen gibt, soll diese im Folgenden „Frown“ heißen (in Anlehnung an den Namen des [[LaTeX]]-Symbols, mit dem sie in diesem Beitrag dargestellt wird).

Um die Definition von Frege zu verstehen, muss man die Bedeutung des Wertverlaufs einer Funktion und die Frown-Funktion kennen.
Auch hier leitet die Literatur einen leicht in die Irre. Beispielsweise interpretiert Edward Zalta (2014, Abschnitt 2.3) die Frown-Operation
als Element-Operation <math>\in</math>.<ref name="Zalta (2014)">{{Quelle|Zalta (2014)}}</ref>
Das ist richtig, falls der Wertverlauf einer Prädikatsfunktion betrachtet wird, d.h. einer Funktion, die jedes Element des Frege-Universums auf einen [[Wahheitswert]] abbildet.
Eine derartige Funktion wird von Frege „Begriff“ genannt (Zalta verwendet die englische Übersetzung “concept”). Die Frown-Funktion von Frege ist
allerdings nicht nur für Wertverläufe von „Begriffen“ definiert, sondern für Wertverläufe von beliebigen Funktionen. Das heißt, i. Allg. kann man <math>\frown</math> nicht mit <math>\in</math> gleichsetzen.

==Wertverlauf und Frown-Funktion==
Freges Definition

<div class="formula"><math>\Vdash\acute{\epsilon}(o \frown (a \frown \epsilon)) = o;a</math> </div>

enthält drei unübliche Symbole, deren Bedeutungen im Folgenden näher beleuchtet werden: <math>\Vdash</math>, <math>\acute\cdot</math> und <math>\frown</math>.

===Der Definitionsdoppelstrich===
<math>\Vdash</math> ist der „Definitionsdoppelstrich“, der von Frege als Erweiterung des „Urtheilstrichs“ <math>\vdash</math>
definiert wird (Frege (1893, §27 und §5)<ref name="Frege (1893)"/>). Das Symbol <math>\vdash</math> wird in der Logik heute noch als „Herleitungs“-, „Ableitungs“- oder „[[Inferenzoperator]]“ verwendet.

Der Definitionsdoppelstrich sagt zusammen mit dem Gleichheitszeichen <math>=</math> aus,
dass der Term <math>o;a</math> eine abkürzende Schreibweise für den Term <math>\acute{\epsilon}(o \frown (a \frown \epsilon))</math> ist.
Heutzutage würde man üblicherweise folgende Schreibweise verwenden:
<div class="formula"><math>o;a := \acute{\epsilon}(o \frown (a \frown \epsilon)) </math> </div>

===Der Wertverlaufsoperator===
Der Operator <math>\acute\cdot</math> wird von Frege genutzt, um den „Werthverlauf“ einer Funktion zu beschreiben (Frege (1893), §9<ref name="Frege (1893)"/>).
Laut Kutschera (1989, S. 96)<ref name = "Kutschera">{{Quelle|Kutschera (1989)}}</ref> kann man den
Wertverlauf <math>\acute{\epsilon}\phi(\epsilon)</math> einer Funktion <math>\phi</math> in heutigen Klassensystemen
durch die Klasse <math>\{[\epsilon,\phi(\epsilon)]: \top\}</math> ausdrücken,
wobei die Objekte <math>[x,y]</math> keine Frege-Paare sind, sondern geordnete Paare des zugrundeliegende Klassensystems
(Wiener-/Kuratowski-/Quine-/Morse-/Schmidt-Paare o. Ä.; siehe Artikel „[[geordnetes Paar]]“).

Für Frege sind Funktionen allerdings grundlegender als Klassen.
In seinem Axiomensstem sind Funktionen (und deren Wertverläufe) wie beim [[Lambda-Kalkül]] von [[Alonzo Church]] Grundbegriffe,
die nicht definiert, sondern nur erläutert werden können<ref name = "Kutschera"/>
und mit deren Hilfe andere Gundbegriffe wie Klassen, Paare, natürliche Zahlen etc. definiert werden.

Denselben Weg schlägt beispielsweise auch John von Neumann (1925) ein.<ref name = "Neumann (1925)">{{Quelle|Neumann (1925)}}</ref>
Allerdings unterscheidet sich sein Axiomensystem
hinsichtlich der Definition des geordneten Paares in
zwei wesentlichen Punkten von Freges Axiomensystem:

* Es erlaubt nicht die uneingeschränkte Bildung von Funktionen und geordneten Paaren, so dass die [[Russellsche Antinomie]] mit großer Wahrscheinlichkeit, aber – aufgrund des zweiten [[Gödelscher Unvollständigkeitssatz|Gödelschen Unvollständigkeitssatzes]] – nicht beweisbar vermieden wird.
* Geordnete Paare werden axiomatisch eingeführt und nicht per Definition.

Überlicherweise werden heute allerdings meist mengen- oder klassenbasierte Systeme (wie z.B. [[Zermelo-Fraenkel-Mengenlehre]], [[Neumann-Bernays-Gödel-Mengenlehre]], [[Quine-Rosser-Mengenlehre]]) zur Formalisierung der Mathematik eingesetzt.
In diesen Systemen wird zwischen einer Funktion und ihrem Wertverlauf i. Allg. nicht mehr unterschieden. Im Gegenteil: Funktionen werden
mit Hilfe von Wertverlaufsklassen definiert (siehe z.B. Schmidt (1966)<ref name="Schmidt (1966)">{{Quelle|Schmidt (1966)}}</ref>):
Eine Funktion <math>f</math> ist eine Klasse von Paaren, wobei es keine zwei Paare <math>[x, y_1], [x, y_2] \in f</math> gibt, für die
<math>y_1 \not= y_2</math> gilt.

Da Funktionen (genauer: Wertverläufe von Funktionen) wesentlich für die Definition des Freges-Paares sind, können Funktionen nicht mit Hilfe des Frege-Paares
definiert werden. Dies war aber auch nicht die Absicht von Frege. Er benötigte die Paare zur
Konstruktion von [[reele Zahl|reellen Zahlen]] (vgl. Frege (1903, §161 ff.)<ref>{{Quelle|Frege (1903)}}</ref>, Kutschera (1989, S. 125)<ref name="Kutschera"/>).

Um sich Frege-Paare zu veranschaulichen, kann man dennoch einen Trick anwenden: Man identifiziert Funktionen mit ihrem Wertverlauf (so wie das in Klassensystemen üblich ist). Das einzige Problem, das man sich dabei einhandelt, ist, dass Frege-Paare <math>a;b</math> dann – sofern man eine moderne klassenbasierten Theorie zu Hilfe nimmt – mit Hilfe von anderen Paaren <math>[a,b]</math> definiert werden. Das ist aber nichts Ungewöhnliches. So werden z.B. auch [[Morse-Paar]]e<ref name="Morse">{{Quelle|Morse (1965)}}</ref> mit Hilfe von
[[Kuratowski-Paar]]en<ref name ="Kuratowski">{{Quelle|Kuratowski (1921)}}</ref> definiert.

Alternativ kann man sich den Wertverlauf-Operator als [[Lambda-Kalkül|Lambda-Operator]] vorstellen (vgl. Zalta (2014)<ref name="Zalta (2014)"/>):
<div class="formula"><math>\acute{\epsilon}\phi(\epsilon) \;\hat=\; \lambda \epsilon .\phi(\epsilon)</math></div>

Wenn man die [[Eta-Konversion|η-Konversion]] im Lambda-Kalkül zulässt, sieht man auch hier, dass der Wertverlauf von <math>\phi</math> mit
<math>\phi</math> selbst identifiziert werden kann:

<div class="formula"><math>\lambda \epsilon .\phi(\epsilon) \;=\; \phi</math></div>

Frege betrachtet nicht nur arithmetische Funktionen, sondern auch [[Prädikatsfunktion]]en.
Diese heißen bei ihm „Begriffe“ (Frege (1893, §3, S. 8)<ref name="Frege (1893)"/>).
Eine Pädikatsfunktion liefert für alle Argumente einen [[Junktor#Nullstellige_Junktoren|Wahrheitswert]] {{Mono|T}} oder {{Mono|F}}
als Ergebnis. Frege bezeichnet diese Werte als „das Wahre“ und „das Falsche“.
Wenn <math>\phi</math> eine Prädikatsfunktion ist, die '''jedem''' Objekt im Frege-Universum einen Wahrheitswert zuordnet,
kann der Wertverlauf von <math>\phi</math> auch als Klasse aufgefasst werden,
die alle Elemente (Frege: „Gegenstände“) <math>\epsilon</math> enthält, für die <math>\phi(\epsilon)</math> wahr ist.
Der Wertvelauf <math>\acute{\epsilon}\phi(\epsilon)</math> entspricht unter dieser Sichtweise der Klasse <math>\{\epsilon: \phi(\epsilon)\}</math> (vgl. Kutschera (1989, Kapitel 6.4)<ref name = "Kutschera"/>).
Insbesondere definiert Frege die leere Menge und einelementige Mengen mit Hilfe von Wertverläufen (führt dafür aber keine eigenen Symbole ein):

{| class="wikitable"
|-
! || moderne Definition || Freges Definition || Quellen
|-
| leere Menge || <math>\emptyset := \{x: x\not=x\}</math> || <math>\acute{\epsilon}\neg(\epsilon=\epsilon)</math> || [[Klasse_(Mengenlehre)#Spezielle_Klassen_Anlehnung_Schmidt.5B2.5D|Klasse]], Frege (1893, S. 53, vorletzter Absatz)<ref name="Frege (1893)"/>
|-
| Einermenge || <math>\{a\} := \{x: x=a\}</math> oder<br/><math>\{a\} := \{x: \rm{Mg}(a) \rightarrow x = a\}</math> || <math>\acute{\epsilon}(\epsilon=a)</math> || [[Klasse_(Mengenlehre)#Spezielle_Klassen_Anlehnung_Schmidt.5B2.5D|Klasse]], Frege (1893, §11)<ref name="Frege (1893)"/>
|-
| Extraktion des Elements<br/>einer Einermenge || Es sei <math>a</math> eine Menge.<br/><math>A =\{a\} \rightarrow \bigcup{A} = a</math> ||Wenn <math>A =\acute{\epsilon}(\epsilon=a)</math>, dann <math>\backslash A = a</math> ||
Schmidt (1966, S72, 8.28)<ref name="Schmidt (1966)"/>, Frege (1893, §11)<ref name="Frege (1893)"/>
|}

Für alle Objekte <math>A</math>, die keine Einermenge sind, setzt Frege fest, dass <math>\backslash A = A</math> gilt.
Das heißt, für die leere Menge liefern <math>\bigcup</math> und <math>\backslash</math> ebenfalls dasselbe Ergebnis (nämlich die leere Menge).
Für alle anderen Objekte <math>A</math> unterscheiden sich die Ergebnisse von <math>\bigcup A</math> und <math>\backslash A</math> dagegen. Dies ist für
die Veranschaulichung der Frown-Funktion, die im nachfolgenden Abschnitt beschrieben wird, jedoch nicht von Belang,
da bei der Definition dieser Funktion nur die leere Menge und einelementige Mengen benötigt werden.

[[Datei:Frege_1893_§34_S53.png|mini|300px|Definition der Frown-Funktion, Frege (1893, §34, S. 53)<ref name="Frege (1893)"/>]]

===Die Frown-Funktion===

Frege definiert die Frown-Funktion folgendermaßen (Frege (1893, §34, S. 53)<ref name="Frege (1893)"/>):

<div class="formula"><math>\Vdash\backslash\acute{\alpha}(\neg\bigwedge g : u = \acute{\epsilon}g(\epsilon) \rightarrow \neg (g(a) = \alpha)) = a \frown u</math></div>
Dies kann man mit Hilfe der Operatoren <math>\bigvee</math> und <math>\wedge</math> (die Frege allerdings nicht explizit definiert und daher auch nicht explitizt verwendet)
etwas einfacher ausdrücken, da <math>\neg \bigwedge g: a \rightarrow \neg b</math> äquivalent zu <math>\bigvee g: a \wedge b </math> ist:

<div class="formula"><math>\Vdash\backslash\acute{\alpha}(\bigvee g : u = \acute{\epsilon}g(\epsilon) \wedge g(a) = \alpha) = a \frown u</math></div>

In einem modernen Klassensystem kann man diese Definition – da es sich bei <math>\bigvee g : \ldots</math> um eine Prädikatsfunktion handelt und es höchstens ein Element <math>\alpha</math> gibt, das dieses Prädikat erfüllt, da also <math>\backslash A</math> und <math>\bigcup A</math> dasselbe Ergebnis liefern – folgendermaßen formulieren:

<div class="formula"><math>a \frown u := \bigcup\{\alpha : \bigvee g : u = \acute{\epsilon}g(\epsilon) \wedge g(a) = \alpha\}</math>
(der Wertlauf <math>\acute{\epsilon}g(\epsilon)</math> repräsentiert hier natürlich die Klasse <math>\{[\epsilon,y]: y=g(\epsilon)\}</math>)
</div>

Zwei Fälle sind zu unterscheiden: Entweder ist <math>u</math> der Wertverlauf einer Funktion g oder <math>u</math> ist dies nicht.
Im ersten Fall gilt:

<div class="formula"><math>\vdash a \frown \acute{\epsilon}g(\epsilon) = \bigcup\{\alpha : g(a) = \alpha\} = g(a)</math></div>

Frege beweist auf den Seiten 74 und 75 denselben Satz in folgender Form:

<div class="formula"><math>\vdash f(a) = a \frown \acute{\epsilon}f(\epsilon)</math> (Dieser Satz erhält von Frege die Satznummer 1.)</div>

Im zweiten Fall gilt:
<div class="formula"><math>\vdash a \frown u = \bigcup\{\alpha : \bigvee g : u = \acute{\epsilon}g(\epsilon) \wedge g(a) = \alpha\} = \bigcup\{\alpha : \bot\} = \emptyset</math></div>

<math>a \frown u</math> liefert also, falls u der Wertverlauf einer Funktion <math>g</math> ist, den Wert der Funktion <math>g</math> für das Argument <math>a</math> als Ergebnis.
Falls <math>u</math> kein Wertverlauf ist, hat <math>a \frown u</math> dagegen die leere Menge als Ergebnis. (vgl. Frege (1893, S. 53, letzter Absatz)<ref name="Frege (1893)"/>; Kutschera (1989, S. 104)<ref name = "Kutschera"/>).

Im Falle einer Prädikatsfunktion entspricht der <math>\frown</math>-Operator dem in Klassensystem üblichen Elementoperator <math>\in</math>:

<div class="formula"><math>a \frown \acute{\epsilon}g(\epsilon) = g(a)</math> entspricht in diesem Fall folgender Beziehung
<math>a \in \{\epsilon: g(\epsilon)\} \leftrightarrow g(a)</math></div>

Dies ist der Spezialfall, mit dem sich Zalta näher befasst<ref name="Zalta (2014)"/>.

[[Datei:Frege 1893 S75.png|mini|300px|Satz 1 und Satz 2: Der Wertverlauf von ein- und zweistelligen Funktionen, Frege (1893), S. 75<ref name="Frege (1893)"/>]]
Frege zeigt auf S. 75 außerdem noch, dass sein Satz 1

<div class="formula"><math>\vdash f(a) = a \frown \acute{\epsilon}f(\epsilon)</math></div>

auch für zweistellige Funktionen verallgemeinert werden kann:

<div class="formula"><math>\vdash f(a,b) = a \frown (b \frown \acute{\alpha}\acute{\epsilon}f(\epsilon,\alpha))</math> (Dieser Satz erhält von Frege die Satznummer 2.)</div>

Analog zu Frege kann man auch

<div class="formula"><math>\vdash f(a)(b) = a \frown (b \frown \acute{\alpha}\acute{\epsilon}f(\epsilon)(\alpha))</math></div>

zeigen. Das heißt, <math>f(a,b)</math> und <math>f(a)(b)</math> unterscheiden sich im Prinzip nicht. Obwohl Frege diese alternative
Notation für Funktionen mit zwei Argumenten nicht verwendet hat, wird dsie im nächsten Abschnitt zur
Veranschaulichung der Paardefinition verwendet, um die Definitionen etwas schlanker zu halten.

Anmerkung: Auf dieselbe Weise könnte man auch den Wertverlauf von beliebigen n-stelligen Funktionen definieren. Dies hat Frege allerdings nicht getan.

===„Übersetzung“ von Freges Definition in „moderne“ Symbolik===

Aus den vorangegangenen Überlegungen folgt, dass man in modernen Klassensystemen Freges Paardefinition

<div class="formula"><math>\Vdash\acute{\epsilon}(o \frown (a \frown \epsilon)) = o; a</math> </div>

mit Hilfe des [[Lambda-Kalkül]]s (das dem Axiomensystem von Frege gerade hinsichtlich des Wertverlauf-Operators etwas näher steht als ein Klassensystem) folgendermaßen formulieren kann:

<div class="formula"><math>o;a \,:= \; \lambda \epsilon . \epsilon a o</math> </div>

Für die „Übersetzung“ von Freges Definition in eine klassenbasierte Definition werden folgende Vereinbarungen getroffen.

* Eine Funktion <math>f</math> ist eine Klasse von Paaren mit <math>[x,y_1], [x,y_2]\in f \rightarrow y_1=y_2</math>.
* Der Funktionsaufruf-Operator <math>\cdot(\cdot)</math> ist folgendermaßen definiert <math>f(x) := \bigcap\{y: [x,y] \in f \}</math>.

Damit definiert man:
<div class="formula"><math>o; a := \{ [\epsilon, \epsilon(a)(o)] : \top\}</math>, d.h, <math>o; a</math> ist eine Funktion mit <math>(o; a)(\epsilon) = \epsilon(a)(o)</math></div>

Sofern <math>\epsilon</math> eine Funktion ist, für die der zweistellige Funktionsaufruf <math>\epsilon(a)(o)</math> definiert ist, stimmen Freges Definition und die
Alternative-Definition überein. Für andere Funktionen und Nicht-Funktionen gilt dagegen bei Frege stets <math>(o;a)(\epsilon) = \emptyset</math>.
Dies ist bei der Alternativdefinition nicht der Fall.
Allerdings ist es für die weiteren Betrachtungen nicht wichtig, welchen Wert <math>(o;a)(\epsilon)</math> annimmt, falls <math>\epsilon(a)(o)</math> nicht definiert ist.

==Das Paaraxiom==

[[Datei:Frege 1893 S195.png|mini|300px|Beweis des Paaraxioms, Teil 1, Frege (1893, S. 195)<ref name="Frege (1893)"/>]]
[[Datei:Frege 1893 S185.png|mini|300px|Beweis des Paaraxioms, Teil 2, Frege (1893, S. 185)<ref name="Frege (1893)"/>]]
Frege beweist die Gültigkeit des [[Paaraxiom]]s direkt, {{dh}} ohne Hilfe von Projektionsoperatoren und des Satzes
[[Satz:Aus der Existenz zweier Projektionsoperatoren für geordnete Paare folgt das Paaraxiom|„Aus der Existenz zweier Projektionsoperatoren für geordnete Paare folgt das Paaraxiom“]]:

{{TBD}}

===Die Projektionsoperatoren===

Frege gibt für seine Paardefinition keine [[Projektionsoperatoren]] an. Es ist aber kein Problem, diese zu definieren.
Und damit ist ebenfalls sichergestellt,
[[Satz:Aus der Existenz zweier Projektionsoperatoren für geordnete Paare folgt das Paaraxiom|dass das Paaraxiom erfüllt ist]].

Die Definition der Projektionsoperatoren kann in modernen Axiomensystemen auf (mindestens) zwei Arten erfolgen:

# Mit Funktionen eines Mengen- oder Klassensystems.
# Mit Hilfe des Lambda-Kalküls.

Man stellt fest, dass im zweiten Fall die Projektionsoperatoren wesentlich prägnanter formuliert werden können.
Das liegt daran, dass es sich sowohl beim Lambda-Kalkül, als auch beim Axiomensystem von Frege um funktionale Axiomensysteme handelt.

====Die Projektionsoperatoren auf Basis von Funktionen eines Mengen- oder Klassensystems====

<div class="formula"><math>\begin{array}{lclclclclclcl}
\rm{id} & := & \{[x,x] : \top \} & \rm{d.h.:} & \rm{id}(x) & = & x \\
\rm{const_c} & := & \{[x,c] : \top \} & \rm{d.h.:} & \rm{const_c}(x) & = & c \\
\pi'_1 & := & \{[x,\rm{id}] : \top \} & \rm{d.h.:} & \pi'_1(x) & = & \rm{id} \\
& & & \rm{d.h.:} & \pi'_1(x)(y) & = & \rm{id}(y) = y \\
\pi'_2 & := & \{[x,\rm{const}_x] : \top \} & \rm{d.h.:} & \pi'_2(x) & = & \rm{const}_x \\
& & & \rm{d.h.:} & \pi'_2(x)(y) & = & \rm{const}_x(y) = x \\
\pi_1 & := & \{ [p, p(\pi'_1)] : \top\} & \rm{d.h.:} & \pi_1(p) & = & p(\pi'_1) \\
\pi_2 & := & \{ [p, p(\pi'_2)] : \top\} & \rm{d.h.:} & \pi_2(p) & = & p(\pi'_2)
\end{array}</math></div>

<math>\pi_1</math> und <math>\pi_2</math> sind die gesuchten Projektionsoperatoren:

<div class="formula"><math>\begin{array}{lcll}
\pi_1(a;b) & = & (a;b) (\pi'_1) & (\rm{Def. von}\;\pi_1) \\
& = & \pi'_1(b)(a) & (\rm{Def. von}\;a;b) \\
& = & \rm{id}(a) & (\rm{Def. von}\;\pi'_1)\\
& = & a & (\rm{Def. von}\;\rm{id})
\\
\pi_2(a;b) & = & (a;b) (\pi'_2) & (\rm{Def. von}\;\pi_2) \\
& = & \pi'_2(b)(a) & (\rm{Def. von}\;a;b) \\
& = & \rm{const}_b(a)& (\rm{Def. von}\;\pi'_2)\\
& = & b & (\rm{Def. von}\;\rm{const}_b)
\end{array}</math></div>

====Die Projektionsoperatoren auf Basis des Lambda-Kalküls====

<div class="formula"><math>\begin{array}{lclclcl}
\pi_1 & := & \lambda p. p(\lambda x.\lambda y.y) \\
\pi_2 & := & \lambda p. p(\lambda x.\lambda y.x)
\end{array}</math></div>

<math>\pi_1</math> und <math>\pi_2</math> sind die gesuchten Projektionsoperatoren:

<div class="formula"><math>\begin{array}{lcll}
\pi_1(a;b) & = & (a;b) (\lambda x.\lambda y.y) & (\rm{Def. von}\;\pi_1) \\
& = & (\lambda \epsilon . \epsilon b a)(\lambda x. \lambda y. y) & (\rm{Def. von}\;a;b) \\
& = & (\lambda x. \lambda y. y) b a & (\rm{\beta{-}Konversion}) \\
& = & (\lambda y. y) a & (\rm{\beta{-}Konversion}) \\
& = & a & (\rm{\beta{-}Konversion})
\\
\pi_2(a;b) & = & (a;b) (\lambda x.\lambda y.x) & (\rm{Def. von}\;\pi_2) \\
& = & (\lambda \epsilon . \epsilon b a)(\lambda x. \lambda y. x) & (\rm{Def. von}\;a;b) \\
& = & (\lambda x. \lambda y. x) b a & (\rm{\beta{-}Konversion}) \\
& = & (\lambda y. b) a & (\rm{\beta{-}Konversion}) \\
& = & b & (\rm{\beta{-}Konversion}) \\
\end{array} </math></div>

====„Rückübersetzung“ der Projektionsoperatoren in Freges Notation====

Die Projektionsoperatoren des vorangegangenen Abschnitts können ziemlich einfach in
Freges Notation übersetzt werden:

<div class="formula"><math>\begin{array}{lclclcl}
\Vdash \acute{p}(p(\acute{x}(\acute{y}y))) = \pi_1 \\
\Vdash \acute{p}(p(\acute{x}(\acute{y}x))) = \pi_2 \\
\end{array}</math></div>

<math>\pi_1</math> und <math>\pi_2</math> sind die gesuchten Projektionsoperatoren. Der Beweis des Satzes basiert im Wesentlichen
auf Satz 1 von Frege: <math>\vdash f(a) = a \frown \acute{\epsilon}f(\epsilon)</math> (§54, S. 75<ref name="Frege (1893)"/>).

<div class="formula"><math>\begin{array}{lcll}
\vdash \pi_1(a;b) & = & \acute{p}(p(\acute{x}(\acute{y}y)))(a;b) & (\rm{Def. von}\;\pi_1) \\
& = & (a;b) \frown \acute{p}(p(\acute{x}(\acute{y}y))) & (\rm{Frege: Satz 1}) \\
& = & (a;b)(\acute{x}(\acute{y}y)) & (\rm{Frege: Satz 1}) \\
& = & \acute{x}(\acute{y}y) \frown (a;b) & (\rm{Frege: Satz 1}) \\
& = & \acute{x}(\acute{y}y) \frown (\acute{\epsilon}(a \frown (b \frown \epsilon)) & (\rm{Def. von}\;a;b) \\
& = & a \frown (b \frown \acute{x}(\acute{y}y)) & (\rm{Frege: Satz 1}) \\
& = & a \frown \acute{y}y & (\rm{Frege: Satz 1}) \\
& = & a & (\rm{Frege: Satz 1})
\\
\vdash \pi_2(a;b) & = & \acute{p}(p(\acute{x}(\acute{y}x)))(a;b) & (\rm{Def. von}\;\pi_2) \\
& = & (a;b) \frown \acute{p}(p(\acute{x}(\acute{y}x))) & (\rm{Frege: Satz 1}) \\
& = & (a;b)(\acute{x}(\acute{y}x)) & (\rm{Frege: Satz 1}) \\
& = & \acute{x}(\acute{y}x) \frown (a;b) & (\rm{Frege: Satz 1}) \\
& = & \acute{x}(\acute{y}x) \frown (\acute{\epsilon}(a \frown (b \frown \epsilon)) & (\rm{Def. von}\;a;b) \\
& = & a \frown (b \frown \acute{x}(\acute{y}x)) & (\rm{Frege: Satz 1}) \\
& = & a \frown \acute{y}b & (\rm{Frege: Satz 1}) \\
& = & b & (\rm{Frege: Satz 1})
\end{array}</math></div>

==Frage-Paare als JavaScript-Funktionen==

Da Fregepaare mit Hilfe von Funktionen definiert werden und JavaScript Funktionen als First-Class-Objekte behandelt,
kann man Freges Definition sehr leicht mit Hilfe von JavaScript nachbilden:

<source lang="javascript">
/* Diesen Code können Sie direkt in der JavaScript-Konsole Ihres Browser ausführen. */
let // λx.e is expressed by x => e
pair = (o,a) => ε => ε(a)(o), // o;a = λε.εao
π1 = p => p(x => y => y), // π1 = λp.p(λx.λy.y)
π2 = p => p(x => y => x), // π2 = λp.p(λx.λy.x),
p = pair(1111, 2222);

console.log( π1(p) ); // --> 1111
console.log( π2(p) ); // --> 2222

console.log( π1(ε => ε('two')('one')) ); // --> 'one'
console.log( π2(ε => ε('two')('one'')) ); // --> 'two'
</source>

Source: [https://glossar.hs-augsburg.de/beispiel/javascript/SetTheory/OrderedPairFregeES6/ EcmaScript6] (''arrow functions''),
[https://glossar.hs-augsburg.de/beispiel/javascript/SetTheory/OrderedPairFregeES5/ EcmaScript5]

Wenn man bereits erzeugte Frege-Paare in einem [[Hasharray]] speichert und diese wiederverwendet,
kann man sogar erzwingen, dass wertgleiche Paare im Sinne von JavaScript identisch ({{Mono|===}}) sind:

<source lang="javascript">
console.log( pair('one','two') === pair('one','two')); // --> true
</source>

Source: [https://glossar.hs-augsburg.de/beispiel/javascript/SetTheory/OrderedPairFregeES6Identity/ EcmaScript6] (''arrow functions''),
[https://glossar.hs-augsburg.de/beispiel/javascript/SetTheory/OrderedPairFregeES5Identity/ EcmaScript5]

==Quellen==

<references/>

[[Kategorie:Mengenlehre]]
[[Kategorie:Datenmanagement]]
[[Kategorie:Datenstruktur]]
[[Kategorie:Glossar]]
[[en:Ordered Pair: Definition by Frege]]

GlossarWiki:Bücher/Multimedia-Datenbanken/WiSe2025

2025-09-19T15:06:32Z

Kowa: Weiterleitungsziel von GlossarWiki:Bücher/Datenmanagementn/WiSe2025 nach GlossarWiki:Bücher/Datenmanagement/WiSe2025 geändert

#WEITERLEITUNG [[GlossarWiki:Bücher/Datenmanagement/WiSe2025]]

GlossarWiki:Bücher/Datenmanagement/WiSe2025

2025-09-19T15:04:32Z

Kowa: Kowa verschob die Seite GlossarWiki:Bücher/Datenmanagementn/WiSe2025 nach GlossarWiki:Bücher/Datenmanagement/WiSe2025

=== Multimedia-Datenbanken – Skript zur Vorlesung im WiSe 2025/2026 ===
Autor: [[Wolfgang Kowarschick]]

;Praktikum
: [[Händler-Datenbank (SQL-Beispiel)|Die Händler-Datenbank]]
: Die [[Händler-Datenbank (SQL-Beispiel)/Identität|Identität]] am Beispiel der Händler-Datenbank
: Die [[Händler-Datenbank (SQL-Beispiel)/Projektion|Projektion]] am Beispiel der Händler-Datenbank
: Die [[Händler-Datenbank (SQL-Beispiel)/Selektion|Selektion]] am Beispiel der Händler-Datenbank

;Vorlesung
: [[UML-Diagramme: Typische Fehler]]
: [[Relationale Algebra]]
: [[GlossarWiki:Bücher/Datenbanksysteme|Theorie]]
: [[:Kategorie:Datenmanagement|einschlägige Artikel im GlossarWiki]]

;Literatur
: [https://glossar.hs-augsburg.de/w/media/2/2f/MMDB2018sose.pdf MMDB-Skript] (Quelle: [[Kowarschick (MMDB-Skript)]])

[[Kategorie:Buch|Multimedia-Programmierung]]
[[Kategorie:Multimedia-Programmierung]]

GlossarWiki:Bücher/Multimedia-Datenbanken/WiSe2025

2025-09-19T15:03:38Z

Kowa: Kowa verschob die Seite GlossarWiki:Bücher/Multimedia-Datenbanken/WiSe2025 nach GlossarWiki:Bücher/Datenmanagementn/WiSe2025

#WEITERLEITUNG [[GlossarWiki:Bücher/Datenmanagementn/WiSe2025]]

GlossarWiki:Bücher/Datenmanagement/WiSe2025

2025-09-19T15:03:38Z

Kowa: Kowa verschob die Seite GlossarWiki:Bücher/Multimedia-Datenbanken/WiSe2025 nach GlossarWiki:Bücher/Datenmanagementn/WiSe2025

Hauptseite/Kategorien

2025-09-19T15:03:20Z

Kowa: /* Kategorien */

==Kategorien==

{| style="width: 100%"
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:50%" align="center"| '''Studienpläne'''
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:50%" align="center"| '''Lehrveranstaltungen'''
|-
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
* [[Bachelor-Studiengang Interaktive Medien (SPO 2018), {{BA}}]]
* [[Bachelor-Studiengang Interaktive Medien (SPO 2018), {{BSc}}]]
* [[Master-Studiengang Interaktive Mediensysteme (SPO 2014)|Master-Studiengang Interaktive Mediensysteme]]

| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
* [[GlossarWiki:Bücher/Datenmanagement/WiSe2025|Datenmanagement]] (WiSe 2025/2026)
* [[GlossarWiki:Bücher/Full-Stack-Webentwicklung/SoSe2025|Full-Stack-Webentwicklung]] (SoSe 2025)
|}

{| style="width: 100%"
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:33.3%" align="center"| '''Schwerpunktthemen'''
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:33.3%" align="center"| '''{{HSA}}-Kategorien'''
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#dddddd; width:33.3%" align="center"| '''Klassifizierende Kategorien'''
|-
| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
*[[:Kategorie:Logik|Logik]]
*[[:Kategorie:Mengenlehre|Mengenlehre]]
*[[:Kategorie:Stochastik|Stochastik]]
**[[:Kategorie:Zufallsexperiment|Zufallsexperiment]]'''

| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
'''Allgemein'''
*[[:Kategorie: HSA|Hochschule Augsburg]]

<br/>'''Fachgebiete'''
*[[:Kategorie: Allgemeinwissenschaften|Allgemeinwissenschaften]]

*[[:Kategorie: Gestaltung|Gestaltung]]
*[[:Kategorie: Informatik|Informatik]]
*[[:Kategorie: Mathematik|Mathematik]]

*[[:Kategorie: Wirtschaftswissenschaften|Wirtschaftswissenschaften]]

<br/>'''Module'''
*[[:Kategorie:Modul|Modul]]
*[[:Kategorie:Lehrveranstaltung|Lehrveranstaltungen]]

| style="vertical-align:top; border:thin solid #dfdfdf; background-color:#fffff1;" align="left"|
*[[:Kategorie:Begriffsklärung|Begriffsklärungsseiten]]: Für mehrdeutige Begriffe
*[[:Kategorie:Glossar|Glossar]]: Die eigentlichen Glossar-Beiträge
*[[:Kategorie:Autor|Autor]]: Publikationslisten von Autoren
*[[:Kategorie:Person|Person]]: Personenbezogene Artikel
*[[:Kategorie:Beispiel|Beispiel]]: Beispiele zu einzelnen Definitionen
*[http://glossar.hs-augsburg.de/beispiel/tutorium/ Tutorien-Sourcen] (SVN-Repositories – vgl. [[Subversion]], [[Subversion/HowTo]])
*[[:Kategorie:Vergleich|Vergleich]]: Vergleiche von Konzepten, Definitionen etc.
*[[:Kategorie:Handbuch|Handbuch]]: Klassen-/Methoden-/...-Definitionen und Beschreibungen
*[[:Kategorie:HowTo|HowTo]]: Tipps und Tricks, kurze Anleitungen
*[[:Kategorie:Tool|Tool]]: Tools und Werkzeuge aller Art
*[[:Kategorie:Mathematischer Satz|Mathematischer Satz]]: Mathematische Sätze, Theoreme etc.
*[[:Kategorie:Deutsche Sprache|Deutsche Sprache]]: Rechtschreibung, Grammatik, Fremdwörter etc.
*[[:Kategorie:Quelle|Quelle]]: Quellenangaben zu Büchern, Aufsätzen, Internetquellen etc.
*[[:Kategorie:Jahr|Jahr]]: Die Ereignisse der einzelnen Jahre
*[[:Kategorie: {{SITENAME}}|Artikel, die {{SITENAME}} selbst betreffen]]
*[[:Kategorie: Formular|Alle Formulare]] (zur vereinfachten Datenerfassung)
*[[:Kategorie: Vorlage|Alle Vorlagen]] (= {{SITENAME}}-Templates)
*[[:Kategorie:Versteckte Kategorien|Versteckte Kategorien]]
*[[Spezial:Newpages|Neueste Artikel]]
*[[Spezial:Allpages|Alle Artikel]]
|}

GlossarWiki:Bücher/Datenmanagement/WiSe2025

2025-09-19T15:02:29Z

Kowa: /* Multimedia-Datenbanken – Skript zur Vorlesung im WiSe 2024/2025 */

GlossarWiki:Bücher/Datenmanagement/WiSe2025

2025-09-19T15:02:03Z

Kowa: Kowa verschob die Seite GlossarWiki:Bücher/Multimedia-Datenbanken/WiSe2024 nach GlossarWiki:Bücher/Multimedia-Datenbanken/WiSe2025

=== Multimedia-Datenbanken – Skript zur Vorlesung im WiSe 2024/2025 ===
Autor: [[Wolfgang Kowarschick]]

;Praktikum
: [[Händler-Datenbank (SQL-Beispiel)|Die Händler-Datenbank]]
: Die [[Händler-Datenbank (SQL-Beispiel)/Identität|Identität]] am Beispiel der Händler-Datenbank
: Die [[Händler-Datenbank (SQL-Beispiel)/Projektion|Projektion]] am Beispiel der Händler-Datenbank
: Die [[Händler-Datenbank (SQL-Beispiel)/Selektion|Selektion]] am Beispiel der Händler-Datenbank

;Vorlesung
: [[UML-Diagramme: Typische Fehler]]
: [[Relationale Algebra]]
: [[GlossarWiki:Bücher/Datenbanksysteme|Theorie]]
: [[:Kategorie:Datenmanagement|einschlägige Artikel im GlossarWiki]]

;Literatur
: [https://glossar.hs-augsburg.de/w/media/2/2f/MMDB2018sose.pdf MMDB-Skript] (Quelle: [[Kowarschick (MMDB-Skript)]])

[[Kategorie:Buch|Multimedia-Programmierung]]
[[Kategorie:Multimedia-Programmierung]]

Bachelor-Studiengang Interaktive Medien (SPO 2018)

2025-09-19T09:10:57Z

Kowa:

Bachelor-Studiengang Interaktive Medien (SPO 2018), B. Sc.

2025-09-19T09:10:08Z

Kowa:

Bachelor-Studiengang Interaktive Medien (SPO 2018), B. Sc.

2025-09-19T09:08:02Z

Kowa:

{{Studiengang
|stgname=Interaktive Medien
|kuerzel=IAM 2018 BSc
|abschluss=Bachelor
|datum=2017/12/19
|spo=https://www.hs-augsburg.de/Binaries/Binary41063/SPO-Interaktive-Medien-WS2018-vom-23.06.2020.pdf
|homepage=https://www.hs-augsburg.de/interaktive-medien/iam/
|fakultaet=FKG, FKI
|studienbeginn=Wintersemester
|studienabschnitte=Ja
}}

Ein Studium gemäß der SPO 2018 endet entweder mit dem Abschluss „Bachelor of Arts“ ({{BA}}) oder
mit dem Abschluss „Bachelor of Science“ ({{BSc}}). Der Studienplan der ersten beiden Semester ist unabhängig
vom angestrebten Abschluss. Im dritten Semester muss man sich für einen Abschluss entscheiden, da sich von diesem
Semester an die Studienpläne für die beiden Abschlüsse unterscheiden.

==Studienplan SPO 2018, Studienrichtung Informatik ({{BSc}})==
Den Studienplan für den Studienrichtung Gestaltung ({{BA}}) finden Sie unter <br/>[[Bachelor-Studiengang_Interaktive_Medien_(SPO_2018)#Studienplan_SPO_2018.2C_Studienrichtung_Gestaltung_.28B._A..29|Bachelor-Studiengang Interaktive Medien (SPO 2018), {{BA}}]]

'''Legende:''' <span class="bgorange white"> '''gestalterisch''' </span><span class="bgblue white"> '''informationstechnisch''' </span><span class="bggrey white"> '''übergreifend''' </span>

<table class="studienplan">
<tr>
<td rowspan="3" class="noborder"> </td>
<td colspan="2" class="bgdgrey white"><strong>Grundlagen- und Orientierungs-<br/>phase</strong></td>
<td colspan="2" class="bgdgrey white"><strong>Spezialisierungsphase</strong></td>
<td colspan="3" class="bgdgrey white"><strong>Vertiefungsphase</strong></td>
</tr>
<tr>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Sommer</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Sommer</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Sommer</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
</tr>
<tr>
<td colspan="1" class="bgdgrey white"><strong>1</strong></td>
<td colspan="1" class="bgdgrey white"><strong>2</strong></td>
<td colspan="1" class="bgdgrey white"><strong>3</strong></td>
<td colspan="1" class="bgdgrey white"><strong>4</strong></td>
<td colspan="1" class="bgdgrey white"><strong>5</strong></td>
<td colspan="1" class="bgdgrey white"><strong>6</strong></td>
<td colspan="1" class="bgdgrey white"><strong>7</strong></td>
</tr>
<tr>
<td colspan="1" rowspan="6" class="bgorange white"><strong>Design</strong></td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen visueller Gestaltung|Grundlagen<br/>visueller Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen interaktiver Gestaltung|Grundlagen<br/>interakt. Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="2" rowspan="1" class="bggrey white">[[Modul:IAM_(SPO_2018):Sprache|Sprache, 4 CP/4 SWS (AWP)]]</td>
<td colspan="1" rowspan="2" class="bggrey white">[[Modulkatalog:IAM (SPO 2018):Workshops und Seminare|Workshops/Sem.<br/>6 CP/6 SWS]]</td>
<td colspan="1" rowspan="2" class="bgorange white">[[Modul:IAM_(SPO_2018):UX-Design|UX-Design<br/>5 CP/4 SWS]]</td>
<td colspan="1" rowspan="2" class="bggrey white">[[Modul:IAM_(SPO_2018):Mensch und Gesellschaft|Mensch und Gesellschaft<br/>5 CP/4 SWS]]</td>
</tr>

<tr class="mw-line-own">



<td colspan="2" rowspan="2" class="bgblue white">[[Modul:IAM_(SPO_2018):Mathematik|Mathematik<br/>8 CP/6 SWS]]</td>





</tr>

<tr class="mw-line-own">






<td colspan="1" rowspan="8" class="bgblue white">[[Modul:IAM_(SPO_2018):Praktische Tätigkeit oder Auslandsstudium|Praktische<br/>Tätigkeit<br/>oder<br/>Auslandsstudium<br/>20 CP]]</td>
<td colspan="1" rowspan="8" class="bggrey white">[[Modul:IAM_(SPO_2018):Teamprojekt|Teamprojekt<br/>20 CP/4+4 SWS]]</td>
<td colspan="1" rowspan="4" class="bgblue white">[[Modul:IAM_(SPO_2018):Bachelorarbeit|Bachelorarbeit<br/>10 CP]]</td>
</tr>

<tr>

<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen dreidimensionaler Gestaltung|Grundlagen<br/>dreidim. Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen audiovisueller Gestaltung|Grundlagen<br/>audiovis. Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modulkatalog:IAM_(SPO_2018):Mensch und Maschine|Mensch und<br/>Maschine<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modulkatalog:IAM_(SPO_2018):Raum und Zeit|Raum und<br/>Zeit<br/>8 CP/6 SWS]]</td>



</tr>

<tr class="mw-line-own">








</tr>

<tr class="mw-line-own">








</tr>

<tr>
<td colspan="1" rowspan="6" class="bgblue white"><strong>Infor-<br>matik</strong></td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM (SPO 2018):Grundlagen der Informatik|Grundlagen<br/>Informatik<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM (SPO 2018):Grundlagen der Webtechnologien|Grundlagen<br/>Webtech.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">
[[Modulkatalog:IAM_(SPO_2018):Informatik|Informatik<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modulkatalog:IAM_(SPO_2018):Informatik|Informatik<br/>8 CP/6 SWS]]</td>


<td colspan="1" rowspan="4" class="bgblue white">[[Modul:IAM (SPO 2018):Bachelorprojekt|Bachelorprojekt<br/>8 CP/2 SWS]]</td>
</tr>

<tr class="mw-line-own">








</tr>

<tr class="mw-line-own">








</tr>

<tr>

<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM_(SPO_2018):Grundlagen der Programmierung|Grundlagen<br/>Programmierung<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM_(SPO_2018):Grundlagen der Softwareentwicklung|Grundlagen<br/>Softwareentw.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modulkatalog:IAM_(SPO_2018):Informatik|Informatik<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modulkatalog:IAM_(SPO_2018):Informatik|Informatik<br/>8 CP/6 SWS]]</td>


</tr>

<tr>





<td colspan="1" rowspan="2" class="bggrey white">[[Modul:IAM (SPO 2018):Praxisseminar|Praxisseminar<br/>2 CP/2 SWS]]</td>
<td colspan="1" rowspan="2" class="bgblue white">[[Modul:IAM (SPO 2018):Projektdurchführung|Projektdurchführung<br/>5 CP/4 SWS]]</td>
<td colspan="1" rowspan="2" class="bggrey white">[[Modul:IAM (SPO 2018):Kunde und Markt|Kunde und Markt<br/>5 CP/4 SWS]]</td>
</tr>

<tr class="mw-line-own">








</tr>
<tr>
<td class="top bgdgrey white"><strong>210 CP</strong></td>
<td class="top bgdgrey white"><strong>32 CP</strong></td>
<td class="top bgdgrey white"><strong>32 CP</strong></td>
<td class="top bgdgrey white"><strong>30 CP</strong></td>
<td class="top bgdgrey white"><strong>30 CP</strong></td>
<td class="top bgdgrey white"><strong>30 CP</strong></td>
<td class="top bgdgrey white"><strong>28 CP</strong></td>
<td class="top bgdgrey white"><strong>28 CP</strong></td>
</tr>
</table>

===Regeln===
* Die Prüfungen des ersten Semesters müssen spätestens im zweiten Semester erstmals absolviert werden.
* An Prüfungen der Vertiefungsphase kann nur teilnehmen, wer sämtliche Prüfungen der Grund- und Orientierungsphase sowie mindestens zwei Gestaltungs- und/oder Informatik-Prüfungen der Spezialisierungsphase bestanden hat.
* An Workshops und Seminaren kann man ebenso wie an den Sprachprüfungen der Fakultät für Natur- und Geisteswissenschaften in jedem Semester seines Studiums teilnehmen.
* Das Thema der Bachelorarbeit wird frühestens ausgegeben, wenn sämtlichen Prüfungen der Grund- und Orientierungsphase sowie der Spezialdsierungsphase, das Teamprojekt und die praktische Tätigkeit bzw. das Auslandssemester erfolgreich absolviert wurden. Eine Ausnahme bildes das Spachmodul: Dieses darf auch dpäter belegt werden.
* Das Thema des Bachelorprojektes wird gemeinsam mit dem Thema der Bachelorarbeit vergeben.

===Wahlpflichtmodule der Spezialisierungsphase===
Im dritten und vierten Semester spezialisiert man sich in zweierlei Hinsicht. Zum einen wird gewählt,
welchen Anschluss man anstrebt, und zum anderen wählt man aus den Wahlpflichtkatalogen der
beiden Semester diejenigen Module, mit denen man sich thematisch vertiefend auseinandersetzen möchte.

Es ist allerdings nicht garantiert, dass jedes Wahlpflichtmodul regelmäßig angeboten wird.

Wenn Sie den Informatikabschluss B.Sc. ansstreben, müssen Sie
aus dem Katalog „Informatik“ insgesamt vier Module absolvieren.
Aus jedem der Kataloge „Mensch und Maschine“ und „Raum und Zeit“ müssen Sie je ein Modul absolvieren.

[[Modulkatalog:IAM_(SPO_2018):Informatik|'''Modulkatalog „Informatik“''']]

In jedem Semester werden Wahlpflichtveranastaltungen zu einigen der folgenden
Fachgebiete angeboten:
* Datenmanagement
* Web-Programmierung
* App-Entwicklung
* Netzwerke und Verteilte Systeme
* Spieleprogrammierung
* Physical Computing
* Computergrafik

[[Modulkatalog:IAM_(SPO_2018):Mensch und Maschine|'''Modulkatalog „Mensch und Maschine“''']]
* Interfacedesign
* Interaktiondesign
* Physical Interfaces

[[Modulkatalog:IAM_(SPO_2018):Raum und Zeit|'''Modulkatalog „Raum und Zeit“''']]
* 2D-Animation
* 3D-Animation
* Audiovisuelles Gestalten (Klanglabor)
* Gamedesign (Art Design)
* Gamedesign (Level Design)

Bachelor-Studiengang Interaktive Medien (SPO 2018)

2025-09-19T09:07:12Z

Kowa:

{{Studiengang
|stgname=Interaktive Medien
|kuerzel=IAM (SPO 2018)
|abschluss=Bachelor
|datum=2017/12/19
|spo=https://www.hs-augsburg.de/Binaries/Binary41063/SPO-Interaktive-Medien-WS2018-vom-23.06.2020.pdf
|homepage=https://www.hs-augsburg.de/interaktive-medien/iam/
|fakultaet=FKG, FKI
|studienbeginn=Wintersemester
|studienabschnitte=Ja
}}

Ein Studium im Studiengang „Interaktive Medien“ endet entweder mit dem Abschluss „Bachelor of Arts“ ({{BA}}) oder
mit dem Abschluss „Bachelor of Science“ ({{BSc}}). Der Studienplan der ersten beiden Semester ist unabhängig
vom angestrebten Abschluss. Im dritten Semester muss man sich für einen Abschluss entscheiden, da sich von diesem
Semester an die Studienpläne für die beiden Abschlüsse unterscheiden.

==Studienplan SPO 2018, Studienrichtung Gestaltung ({{BA}})==
Den Studienplan für den Studienrichtung Informatik ({{BSc}}) finden Sie unter <br/>[[Bachelor-Studiengang_Interaktive_Medien_(SPO_2018),_B._Sc.#Studienplan_SPO_2018.2C_Studienrichtung_Informatik_.28B._Sc..29|Bachelor-Studiengang Interaktive Medien (SPO 2018), {{BSc}}]]

'''Legende:''' <span class="bgorange white"> '''gestalterisch''' </span><span class="bgblue white"> '''informationstechnisch''' </span><span class="bggrey white"> '''übergreifend''' </span>

<table class="studienplan">
<tr>
<td rowspan="3" class="noborder"> </td>
<td colspan="2" class="bgdgrey white"><strong>Grundlagen- und Orientierungs-<br/>phase</strong></td>
<td colspan="2" class="bgdgrey white"><strong>Spezialisierungsphase</strong></td>
<td colspan="3" class="bgdgrey white"><strong>Vertiefungsphase</strong></td>
</tr>
<tr>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Sommer</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Sommer</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Sommer</strong></td>
<td colspan="1" class="bgdgrey white"><strong>Winter</strong></td>
</tr>
<tr>
<td colspan="1" class="bgdgrey white"><strong>1</strong></td>
<td colspan="1" class="bgdgrey white"><strong>2</strong></td>
<td colspan="1" class="bgdgrey white"><strong>3</strong></td>
<td colspan="1" class="bgdgrey white"><strong>4</strong></td>
<td colspan="1" class="bgdgrey white"><strong>5</strong></td>
<td colspan="1" class="bgdgrey white"><strong>6</strong></td>
<td colspan="1" class="bgdgrey white"><strong>7</strong></td>
</tr>
<tr>
<td colspan="1" rowspan="6" class="bgorange white"><strong>Design</strong></td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen visueller Gestaltung|Grundlagen<br/>visueller Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen interaktiver Gestaltung|Grundlagen<br/>interakt. Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="2" rowspan="1" class="bggrey white">[[Modul:IAM_(SPO_2018):Sprache|Sprache, 4 CP/4 SWS (AWP)]]</td>
<td colspan="1" rowspan="2" class="bggrey white">[[Modulkatalog:IAM (SPO 2018):Workshops und Seminare|Workshops/Sem.<br/>6 CP/6 SWS]]</td>
<td colspan="1" rowspan="2" class="bgorange white">[[Modul:IAM_(SPO_2018):UX-Design|UX-Design<br/>5 CP/4 SWS]]</td>
<td colspan="1" rowspan="2" class="bggrey white">[[Modul:IAM_(SPO_2018):Mensch und Gesellschaft|Mensch und Gesellschaft<br/>5 CP/4 SWS]]</td>
</tr>

<tr class="mw-line-own">



<td colspan="2" rowspan="2" class="bgorange white">[[Modul:IAM_(SPO_2018):Theorie digitaler Medien|Theorie digitaler Medien<br/>8 CP/6 SWS]]</td>





</tr>

<tr>






<td colspan="1" rowspan="8" class="bgorange white">[[Modul:IAM_(SPO_2018):Praktische Tätigkeit oder Auslandsstudium|Praktische<br/>Tätigkeit<br/>oder<br/>Auslandsstudium<br/>20 CP]]</td>
<td colspan="1" rowspan="8" class="bggrey white">[[Modul:IAM_(SPO_2018):Teamprojekt|Teamprojekt<br/>20 CP/6 SWS]]</td>
<td colspan="1" rowspan="4" class="bgorange white">[[Modul:IAM_(SPO_2018):Bachelorarbeit|Bachelorarbeit<br/>10 CP]]</td>
</tr>

<tr>

<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen dreidimensionaler Gestaltung|Grundlagen<br/>dreidim. Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modul:IAM_(SPO_2018):Grundlagen audiovisueller Gestaltung|Grundlagen<br/>audiovis. Gest.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modulkatalog:IAM_(SPO_2018):Mensch und Maschine|Mensch und<br/>Maschine<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modulkatalog:IAM_(SPO_2018):Mensch und Maschine|Mensch und<br/>Maschine<br/>8 CP/6 SWS]]</td>



</tr>

<tr class="mw-line-own">








</tr>

<tr class="mw-line-own">








</tr>

<tr>
<td colspan="1" rowspan="6" class="bgblue white"><strong>Infor-<br>matik</strong></td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM (SPO 2018):Grundlagen der Informatik|Grundlagen<br/>Informatik<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM (SPO 2018):Grundlagen der Webtechnologien|Grundlagen<br/>Webtech.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modulkatalog:IAM_(SPO_2018):Raum und Zeit|Raum und<br/>Zeit<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgorange white">[[Modulkatalog:IAM_(SPO_2018):Raum und Zeit|Raum und<br/>Zeit<br/>8 CP/6 SWS]]</td>


<td colspan="1" rowspan="4" class="bgorange white">[[Modul:IAM (SPO 2018):Bachelorprojekt|Bachelorprojekt<br/>8 CP/2 SWS]]</td>
</tr>

<tr class="mw-line-own">








</tr>

<tr class="mw-line-own">








</tr>

<tr>

<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM_(SPO_2018):Grundlagen der Programmierung|Grundlagen<br/>Programmierung<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modul:IAM_(SPO_2018):Grundlagen der Softwareentwicklung|Grundlagen<br/>Softwareentw.<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modulkatalog:IAM_(SPO_2018):Informatik|Informatik<br/>8 CP/6 SWS]]</td>
<td colspan="1" rowspan="3" class="bgblue white">[[Modulkatalog:IAM_(SPO_2018):Informatik|Informatik<br/>8 CP/6 SWS]]</td>


</tr>

<tr>





<td colspan="1" rowspan="2" class="bggrey white">[[Modul:IAM (SPO 2018):Praxisseminar|Praxisseminar<br/>2 CP/2 SWS]]</td>
<td colspan="1" rowspan="2" class="bgblue white">[[Modul:IAM (SPO 2018):Projektdurchführung|Projektdurchführung<br/>5 CP/4 SWS]]</td>
<td colspan="1" rowspan="2" class="bggrey white">[[Modul:IAM (SPO 2018):Kunde und Markt|Kunde und Markt<br/>5 CP/4 SWS]]</td>
</tr>

<tr class="mw-line-own">








</tr>
<tr>
<td class="top bgdgrey white"><strong>210 CP</strong></td>
<td class="top bgdgrey white"><strong>32 CP</strong></td>
<td class="top bgdgrey white"><strong>32 CP</strong></td>
<td class="top bgdgrey white"><strong>30 CP</strong></td>
<td class="top bgdgrey white"><strong>30 CP</strong></td>
<td class="top bgdgrey white"><strong>30 CP</strong></td>
<td class="top bgdgrey white"><strong>28 CP</strong></td>
<td class="top bgdgrey white"><strong>28 CP</strong></td>
</tr>
</table>

===Regeln===
* Die Prüfungen des ersten Semesters müssen spätestens im zweiten Semester erstmals absolviert werden.
* An Prüfungen der Vertiefungsphase kann nur teilnehmen, wer sämtliche Prüfungen der Grund- und Orientierungsphase sowie mindestens zwei Gestaltungs- und/oder Informatik-Prüfungen der Spezialisierungsphase bestanden hat.
* An Workshops und Seminaren kann man ebenso wie an den Sprachprüfungen der Fakultät für Natur- und Geisteswissenschaften in jedem Semester seines Studiums teilnehmen.
* Das Thema der Bachelorarbeit wird frühestens ausgegeben, wenn sämtlichen Prüfungen der Grund- und Orientierungsphase sowie der Spezialdsierungsphase, das Teamprojekt und die praktische Tätigkeit bzw. das Auslandssemester erfolgreich absolviert wurden. Eine Ausnahme bildes das Spachmodul: Dieses darf auch dpäter belegt werden.
* Das Thema des Bachelorprojektes wird gemeinsam mit dem Thema der Bachelorarbeit vergeben.

===Wahlpflichtmodule der Spezialisierungsphase===
Im dritten und vierten Semester spezialisiert man sich in zweierlei Hinsicht. Zum einen wird gewählt,
welchen Anschluss man anstrebt, und zum anderen wählt man aus den Wahlpflichtkatalogen der
beiden Semester diejenigen Module, mit denen man sich thematisch vertiefend auseinandersetzen möchte.

Es ist allerdings nicht garantiert, dass jedes Wahlpflichtmodul regelmäßig angeboten wird.

Wenn Sie den Gestaltungsabschluss B.A. ansstreben, müssen Sie
aus jedem der Kataloge „Mensch und Maschine“, „Raum und Zeit“ und „Informatik“ je zwei Module absolvieren.

[[Modulkatalog:IAM_(SPO_2018):Mensch und Maschine|'''Modulkatalog „Mensch und Maschine“''']]
* Interfacedesign
* Interaktiondesign
* Physical Interfaces

[[Modulkatalog:IAM_(SPO_2018):Raum und Zeit|'''Modulkatalog „Raum und Zeit“''']]
* 2D-Animation
* 3D-Animation
* Audiovisuelles Gestalten (Klanglabor)
* Gamedesign (Art Design)
* Gamedesign (Level Design)

[[Modulkatalog:IAM_(SPO_2018):Informatik|'''Modulkatalog „Informatik“''']]

In jedem Semester werden Wahlpflichtveranstaltungen zu einigen der folgenden
Fachgebiete angeboten:
* Datenmanagement
* Web-Programmierung
* App-Entwicklung
* Netzwerke und Verteilte Systeme
* Spieleprogrammierung
* Physical Computing
* Computergrafik

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-23T10:38:42Z

Kowa: /* src/server.js */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05a erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

=== Initiaisierung durch <code>main.js</code> und <code>App.vue</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden, da das asynchrone Laden von Initialisierungsdaten in jedem Store selbst geregelt wird.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

Die Initialisierung der einzelnen Stores erfolgt in der Hauptdatei <code>App.vue</code>

<syntaxhighlight lang="javascript">
<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'
import storeI18n from '/store/StoreI18n'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

// Activate initializer of "storeI18n"
storeI18n(); // First call of storeI18n(): The code of the function is performed
// All other calls: The reult of the first call is returned (Singleton)

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05c) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== Benutzung von Express als Backend-Server (v05d) ==

=== express_hello_world ===

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

=== Backend-Server mittels Express ===

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

==== <code>src/server.js</code> ====

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is running on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 06

2025-05-23T09:54:22Z

Kowa: /* Hello World Vue 06b */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v06</code>, <code>... v06a</code>, <code>... v06b</code>

== Anwendungsfälle (Use Cases) ==
Die Version des [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_05|fünften Teils des Vue-Tutoriums]]
wird so angepasst, dass die Sprache zur Laufzeit geändert werden kann.

Zunächst wird jedoch eine Navigationskomponente eingeführt. Dies hat den Zweck, das Routing an einem Beispiel zu erklären.

== 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v05d # Wechsle in den Branch v05d mit Express-Server
git checkout -b v06 # Klone v05d in einen neuen Branch v06
rm -rf express_Hello_world
cd frontend
npm i
npm i vue-router
</syntaxhighlight>

In der Datei <code>public/json/config.jso</code>
aktivieren wir wieder den Zugriff auf die lokalen JSON-Dateien.
Den Zugriff auf den Backend-Server, um die Bilder von dort zu holen, behandeln wir später.

<syntaxhighlight lang="json">
{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Fügen Sie außerdem in die Datei <code>vite.config.common.js</code> zwei geeignete Aliase für
<code>view</code> und </code>router</code> ein.

=== Views ===

Anstelle von Sections werden im Frontend Views verwendet.
Dazu werden die Section-Komponenten in den Ordner View verschoben und umbenannt:

<syntaxhighlight lang="bash">
src/view/ViewHello.vue
src/view/ViewHome.vue // an Stelle von ViewForm.vue

src/view/ViewError404.vue // neu
</syntaxhighlight>

Die CSS-Dateien müssen natürlich auch entsprechend verschoben und abgepasst werden.

ViewForm.vue wird in ViewHome.vue unbenannt,
da diese Seite als Startseite verwendet wird.

Zusätzlich wird eine Seite ViewError404.vue angelegt, die immer dann ausgeliefert wird, wenn der Benutzer auf eine URL zugreift, der keine View-Datei zugeordnet ist.

Die CSS-Dateien sollten analog umbenannt und unter den neuen Namen importiert werden. Für <code>ViewError404.vue</code> muss natürlich auch eine CSS-Datei angelegt werden. Diese verweist allerdings nur auf <code>View.css</code>.

<syntaxhighlight lang="html">


<script setup>
import router from '/router'
import storeI18n from '/store/StoreI18n'

const phrases = storeI18n().phrases
</script>

<template>
<h1>404</h1>
<p>{{phrases.pageNotFound.replace('$1', router.currentRoute.value.path)}}</p>
</template>

<style scoped>
@import '/css/view/ViewError404.css';
</style>
</syntaxhighlight>

=== Router-Plugin ===

Um mit Vue Multipage-Anwendungen realisieren zu können, benötigt man einRouter-Plugin.
Dieses muss zunächst händisch auf Basis von <code>vue-router</code> implementiert werden.

<syntaxhighlight lang="ecmascript">
// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import ViewHome from '/view/ViewHome.vue'

const
routes =
[ { path: '/',
name: 'home',
component: ViewHome,
},
{ path: '/hello',
name: 'hello',
component: () => import('/view/ViewHello.vue'),
},
{ path: '/:pathMatch(.*)',
component: () => import('/view/ViewError404.vue'),
}
],

router =
createRouter({ history: createWebHistory(), routes })

export default router
</syntaxhighlight>

Nun muss man das neu erstellte Plugin in die App integrieren.

<syntaxhighlight lang="ecmascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import router from './router' // './router/index.js'
import App from './App.vue'
const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.use(router)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

=== index.html ===

Da das <code>main</code>-Tag nun innerhalb von <code>App.vue</code> verwendet werden soll,
wird es aus der Datei <code>index.html</code> entfernt.

<syntaxhighlight lang="html">
...
<body id="app">
</body>
...
</syntaxhighlight>

=== App.vue ===

Nun kann in die App eine Navigation eingebaut werden.

<syntaxhighlight lang="html">


<script setup>
import AppNav from '/component/AppNav.vue'
import storeSession from '/store/StoreSession'
import storeI18n from '/store/StoreI18n'

const session = storeSession()

storeI18n();

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<AppNav v-if="session.isInitialized"/>
<main v-if="session.isInitialized">
<router-view/>
</main>
</template>

<style>
@import '/css/body.css';
</style>

</syntaxhighlight>

Die zugehörige Navigationskomponente muss auch noch implementiert werden.

<syntaxhighlight lang="html">


<script setup>
</script>

<template>
<nav>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/hello">Hello</router-link></li>
</ul>
</nav>
</template>

<style scoped>
@import '/css/component/AppNav.css';
</style>
</syntaxhighlight>

<syntaxhighlight>
/* src/css/_config.css */
...
--background-color: #C5EFFC;
--link-color: #0027d4;
...
--nav-dist: 0.5em;

/* src/css/AppNav.css */

@import 'config.css';

nav
{ top: 0;
width: 100%;
position: fixed;

ul
{ list-style-type: none;
margin: 0 var(--nav-dist);
padding: 0;

li
{ display: inline;
a { padding: 0 var(--nav-dist); }
}

a
{ text-decoration: none;
color: var(--link-color);
font-weight: bold;
}

a:hover, .router-link-exact-active
{ text-decoration: underline;
color: var(--link-color);
font-weight: bold;
}
}

label, input
{ margin: 0;
}
}
</syntaxhighlight>

=== Navigation ===
Die Navigation muss in allen Komponenten, in den Seiten gewechselt werden, angepasst werden.

Das ist in der App.vue der Fall (siehe zuvor) sowie in der ViewHome.vue.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'
import router from '/router'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
sayHello = () => router.push('/hello')
</script>
</syntaxhighlight>

Die Section-Verwaltung der ehemaligen Single-Page-Anwendung kann und sollte gelöscht werden:
* <code>config.js</code>
* <code>storeSession.js</code>
* <code>ViewHome.vue</code>
* <code>ViewHello.vue</code>

Die Datei <code>HelloWorld.vue</code> kann (samt CSS-Datei) ganz gelöscht werden.

== Hello World Vue 06a ==

Aufgabe: Die Ausgabesprache soll vom Benutzer zur Laufzeit geändert werden können. Die Sprachen sollen durch Bilder (Flaggen) symbolisiert werden.

<syntaxhighlight lang="bash">
git checkout v06 # Wechsle in den Branch v06
git checkout -b v06a # Klone v06 in einen neuen Branch v06a
</syntaxhighlight>

=== <code>config.json</code> ===

Um die vorhandenen Sprachen durchblättern zu können, wird ein einfacher Automat verwendet.

<syntaxhighlight lang="json">
// src/public/json/config.json

{ "apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "en",
"nextLanguage": {"de": "en", "en": "de"}
}
</syntaxhighlight>

=== StoreI18n.js: Integration von nextLanguage ===

Der Automat <code>nextLanguage</code> wird in den StoreI18n integriert. Wenn die Methode <code>changeLang</code> ohne Argument aufgerufen wird, soll der Automat die aktuelle Sprache <code>lang</code> durch die Nachfolgersprache ersetzen.
Dazu sollte zunächst die zunächst Konstante <code>nextLanguage</code> definiert werden.

<syntaxhighlight lang="ecmascript">
...
lang =
ref(null),

nextLanguage =
reactive(config.nextLanguage),

...
</syntaxhighlight>

Diese neue Konstante <code>nextLanguage</code> wird verwendet, um die Sprache mittels <code>changeLang</code> zu definieren, sofern
kein Argument übergeben wurde.

Die Funktion <code>changeLang</code> soll bei einer Änderung der Sprache sowohl die notwendige JSON-Sprach-Datei laden als auch die in der HTML-Datei <code>index.html</code> ausgewiesene Sprache anpassen:

<syntaxhighlight lang="ecmascript">
// /src/store/storeI18N.js

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? nextLanguage[lang.value];
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
}

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}
</syntaxhighlight>

=== Bilder von Flaggen ===

Zur Visualisierung der gewählten Sprache werden Bilder von Flaggen eingesetzt.
Wir kopieren die Bilder im SVG-Format aus dem NPM-Paket "https://github.com/lipis/flag-icons".

<syntaxhighlight lang="bash">
npm i -D flag-icons
</syntaxhighlight>

Im Ordner "node_modules/flag-icons/flags/4x3" finden Sie Flaggen zahlreicher Länder im 4-zu-3-Format.
Kopieren Sie die Flaggen der Länder Deutschland und Großbritanien in den Ordner <code>public/img</code>.

In die Datei config.js wird der Pfad, unter dem die Bilder zu finden sind, eingefügt.

<syntaxhighlight lang="ecmascript">
// public/config.js
...
"apiRoot": "/json/i18n_$1.json",
"imgPath": "/img/$1.svg",
"XapiRoot": "/api/$1"
...
</syntaxhighlight>

=== <code>FormButtonIcon</code> ===

Eine neue Komponente wird benötigt: FormButtonIcon
Dabei handelt es sich um einen Button, der ein Icon anzeigt.
Das Bild kann zur Laufzeit geändert werden.

<syntaxhighlight lang="ecmascript">
<script setup>
import { computed, inject } from 'vue'

const
props = defineProps
({ image: { type: String },
width: { type: String, default: '3em'},
}),
config = inject('config'),
emit = defineEmits(['click']),
click = () => emit('click'),
require = v_url => import.meta.url == null
? v_url
: new URL(v_url, import.meta.url).href,
imgPath = config.imgPath,
buttonImage = computed(() => require(imgPath.replace('$1', props.image)))
</script>

<template>
<input type="image" :src="buttonImage" :style="{width}" @click="click" />
</template>

<style scoped>
@import '/css/component/form/FormButtonIcon.css';
</style>
</syntaxhighlight>

<syntaxhighlight lang="ecmascript">
/* src/css/component/FormButtonIcon.css */

@import 'FormButton.css';

input
{ width: $button_icon_width !important;
margin-left: $nav-dist !important;
}
</syntaxhighlight>

Fügen Sie in <code>src/css/_config.css</code> noch

<syntaxhighlight lang="ecmascript">
--button-icon-width: 1em;
</syntaxhighlight>

ein.

=== Erweiterung von <code>AppNav.vue</code> ===

Der Sprachwahl-Button muss noch in die Navigation eingebaut werden. In diesem Rahmen wird auch gleich die Navigation etwas internationalisiert.

Ergänzen Sie in den Dictionaries der Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code>
folgende Attribute:

<syntaxhighlight lang="html">
... ...,
"navHome": "Start",
"navHello": "Hallo"
</syntaxhighlight>

bzw.

<syntaxhighlight lang="html">
... ...,
"navHome": "Home",
"navHello": "Hello"
</syntaxhighlight>

Damit können Sie das Navigationsmenü internationalisieren (einschließlich Auswahl der Sprache per Button).

<syntaxhighlight lang="html">


<script setup>
import FormButtonIcon from '/component/form/FormButtonIcon.vue'
import storeI18n from '/store/StoreI18n'

const i18n = storeI18n()
</script>

<template>
<nav>
<ul>
<li><router-link to="/">{{i18n.dictionary.navHome}}</router-link></li>
<li><router-link to="/hello">{{i18n.dictionary.navHello}}</router-link></li>
<li><FormButtonIcon :image="i18n.lang" @click="i18n.changeLang()"/></li>
</ul>
</nav>
</template>

<style scoped>
@import '/css/component/AppNav.css';
</style>
</syntaxhighlight>

== Hello World Vue 06b ==

Aufgabe: Sorgen Sie dafür, dass <code>autofocus</code> korrekt funktioniert, insbesondere beim Seitenwechsel via Navigation.

Es ist sinnvoll, die Funktionalität in ein eigenes Store-Modul auszulagern, damit
das Session-Modul in Anwendungen, die keine Autofocus-Funktionalität benötigen, keinen
überflüssigen Code enthalten (Bertrand Meyer: Jedes Modul erfüllt genau eine Aufgabe).
Das Session-Modul wird entsprechend abgespeckt.

Der Autofocus-Store soll zwei Funktionen bieten:
* <code>setAutofocusId</code>: Speichert die ID des Autofokus-Elements der aktuellen Seite (Default: <code>null</code>).
* <code>setFocus</code>: Setzt den Focus auf die aktuelle Autofokus-Komponente (sofern die ID ungleich <code>null</code> ist). Insbesondere für das Window-Ereignis <code>'visibilitychange'</code> soll diese Funktion
aufgerufen werden.

<syntaxhighlight lang="ecmascript">
// /src/store/StoreAutofocus.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

const storeAutofocus =
defineStore
( 'autofocus', // must be unique

() =>
{ const
c_autofocus_id = ref(),
setFocus = () => document.getElementById(c_autofocus_id.value)?.focus(),
setAutofocusId = p_autofocus_id => { c_autofocus_id.value = p_autofocus_id;
setFocus();
}

window.addEventListener('visibilitychange', setFocus);

return { setAutofocusId, setFocus }
}
)

export default storeAutofocus
</syntaxhighlight>

<syntaxhighlight lang="ecmascript">
// /src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Um die aktuelle ID speichern zu können, muss das zugehörige Textfeld die Information, welche ID es hat,
per <code>emit</code> an die Elternkomponente ausgeben.

<syntaxhighlight lang="html">
// /src/component/form/FormTextfield.vue

...
const
props = defineProps
({ id: { type: String, default: '' },
...
})
...
emit = defineEmits(['id', 'update:text', 'enter']),
...
emit('id', inputId);
...
</syntaxhighlight>

Nun müssen die Views, die ein Autofokus-Feld beinhalten, dieses an den Session-Store melden,
sobald sie per Routing aktiviert werden. Das ist in unserem Fall nur die <code>ViewHome</code>.
Ein Watcher sorgt dafür, dass die ID des Textfeldes im Session-Objekt gespeichert wird, sobald
das zugehörige Textfeld die ID per <code>emit</code> meldet.

<syntaxhighlight lang="html">
// /src/view/ViewHome.vue

<script setup>
import { ref, watch } from 'vue'
...
import storeAutofocus from '/store/StoreAutofocus'
...

const
id = ref(null),
autofocus = storeAutofocus(),
...
setId = p_id => id.value = p_id,
...

watch( id, () => autofocus.setAutofocusId(id.value) )
</script>

<template>
...
<FormTextfield @id="setId"
...
>
...
</template>
...
</syntaxhighlight>

Zum Schluss muss im Router noch die Autofocus-ID bei jedem Seitenwechsel gelöscht werden.

<syntaxhighlight lang="ecmascript">
// /src/router/index.js

...
import storeAutofocus from '/store/StoreAutofocus'

const
...

router.beforeEach(() => storeAutofocus().setAutofocusId())

export default router
</syntaxhighlight>

Wichtig ist hier, dass man keine Konstante <code>session</code> definieren kann, da die Stores erst nach dem Router-Objekt erzeugt werden:

<syntaxhighlight lang="ecmascript">
// /src/router/index.js
...
import storeAutofocus from '/store/StoreAutofocus'

const
autofocus = storeAutofocus(), // FUNKTIONIERT NICHT
...
router.beforeEach(() => autofocus.setAutofocusId())
...
</syntaxhighlight>

Der Funktionsaufruf <code>storeSession()</code> darf daher erst in der Callback-Funktion von
<code>router.beforeEach</code> aufgerufen werden. Zu diesem Zeitpunkt sind die Stores und der Router auf jeden Fall schon initialisiert worden.

Zum Abschluss sollten Sie noch versuchen, <code>/src/component/AppNav.vue</code> so abzuändern,
dass ein Klick auf die Fahne nicht nur die Sprache ändert, sondern auch noch den Focus auf das Startfeld setzt.

== Hello World Vue 06c ==

Aufgabe: Sorgen Sie dafür, dass die unterstützten Sprachen und der Sprach-Automat vom Backend
geladen wird.

<syntaxhighlight lang="bash">
git checkout v06b # Wechsle in den Branch v06b
git checkout -b v06c # Klone v06b in einen neuen Branch v06c
</syntaxhighlight>

Splitten Sie die Config-Datei zunächst in zwei Teile: "config.json" wird aus dem Public-Ordner geladen.
"config_backend.json" wird normalerweise vom Backend geladen, kann aber zum Entwicklungszeitpunkt auch vom Public-Ordner geladen werden, wenn das Backend noch nicht stabil läuft.

<syntaxhighlight lang="json">
// src/public/json/config.json

{ "configBackend": "/json/config_backend.json",
"apiRoot": "/json/i18n_$1.json",
"imgPath": "/img/$1.svg",

"XapiRoot": "/api/$1"
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/public/json/config_backend.json

{ "languages": ["de", "en"],
"nextLanguage": {"de": "en", "en": "de"}
}
</syntaxhighlight>

Das Backend teilt dem Frontend mit, welche Sprachen unterstützt werden.

=== <code>main.js</code> ===

Laden Sie, nachdem Sie "config" asynchron geladen haben, "configBackend" asynchron und kopieren Sie den Inhalt dieses Objekts in das Config-Objekt. Den Pfad von "configBackend" finden Sie unter "config.configBackend".

<syntaxhighlight lang="ecmascript">
...
const
...
init = async () =>
{ const
config = await getJson('/json/config.json'),
configBackend = await getJson(config.configBackend)

Object.assign(config, configBackend)

app
.provide('config', config)
.use(pinia)
.use(router)
.mount('#app') // app is shown to the user
}
</syntaxhighlight>

Nun gibt es im Konfigurationsobjekt keine Defaultsprache mehr.
Im I18N-Store wird daher ab sofort die erste Sprache in der Liste der
unterstützten Sprachen als Defaultsprache genutzt.

<syntaxhighlight lang="ecmascript">
// /src/store/storeI18N.js

initialize =
async resolve =>
{ await changeLang(config.languages[0]);
resolve();
}
</syntaxhighlight>

== Hello World Vue 06d ==

Aufgabe: Defaultmäßig soll dem Benutzer die App in der Sprache angezeigt werden, die der Benutzer
im Browser voreingestellt hat. Sollte die voreingestellte Sprache nicht unterstützt werden, wird die App in der Defaultsprache angezeigt.

Legen Sie zunächst wieder einen neuen Branch an.

<syntaxhighlight lang="bash">
git checkout v06c # Wechsle in den Branch v06c
git checkout -b v06d # Klone v06c in einen neuen Branch v06d
</syntaxhighlight>

Das Vorgehen ist im Prinzip ganz einfach.

Mittels des NPM-Packets "navigator-languages" ermittelt man die vom Browser unterstützten
Sprachen. In der Konfigurationsdatei listet man die Sprachen auf, die von der App unterstützt werden.
Besser wäre es natürlich, diese Liste vom Backend zu laden, damit die App mit bekommt, wenn neue
Sprachen zur Verfügung stehen. Am aufwändigsten ist es, diese beiden Array zu matchen.

Mögliche Erweiterung: Auch die HTML-Pfade sollten internationalisiert werden.

<syntaxhighlight lang="bash">
npm i navigator-languages // unterstützt mehrere Browservarianten
</syntaxhighlight>

=== Language Matching ===

Das Language Matching erfolgt zweimal mit zwei verschachtelten Schleifen.
Zunächst wird überprüft, ob es exakte Übereinstimmungen gibt. Sollte das nicht der Fall sein, wird überprüft, ob es Matches zwischen den ersten beiden Buchstaben gibt ('de', 'de-AT', 'de-DE' matchen in diesem Schritt alle miteinander).

<syntaxhighlight lang="ecmascript">
// src/util/chooseLanguage.js

import navigatorLanguages from 'navigator-languages'

const
/**
* @function
* @param { Array<string> } p_langs_available
* An array of language strings containing the languages
* supported by the app
* @param { Array<string> } [p_langs_required = navigatorLanguages()]
* An array of language strings containing the languages
* requested by the client
* @return { string }
* The language to be displayed
*/
chooseLanguage =
(p_langs_available, p_langs_required = navigatorLanguages()) =>
{ let
lang = p_langs_available[0],
i=0, j=0, n=p_langs_required.length, m=p_langs_available.length

outer:
{ while (i<n)
{ const c_lang_required = p_langs_required[i]
while (j<m)
{ const c_lang_availabe = p_langs_available[j]
if (c_lang_availabe === c_lang_required)
// both languages match perfectly
{ lang = c_lang_availabe;
break outer;
}
j++
}
i++
}
i=0, j=0
while (i<n)
{ const c_lang_required = p_langs_required[i]
while (j<m)
{ const c_lang_availabe = p_langs_available[j]
if (c_lang_availabe.substring(0,2) === c_lang_required.substring(0,2))
// main part of the languages match
{ lang = c_lang_availabe;
break outer;
}
j++
}
i++
}
}

return lang
}

export default chooseLanguage
</syntaxhighlight>

=== <code>src/store/StoreI18n</code> ===

Im I18N-Store wird nun beim Initialisieren nicht nicht mehr eine Defaultspache geladen, sondern
die Sprache, die möglichst nah an den Wünschen des im Browser des Benutzers gespeicherten Sprachwünschen liegt.

Beachten Sie, dass Sie in die Datei <code>vite.config.common.js</code> einen geeigneten Alias für den
<code>util</code>-Pfad definieren müssen, um <code>'/util/chooseLanguage'</code> an Stelle von
<code>'@/util/chooseLanguage'</code> schreiben zu können.

<syntaxhighlight lang="ecmascript">
...
import chooseLanguage from '/util/chooseLanguage'
...
() =>
{ const
...
initialize =
async resolve =>
{ await changeLang(chooseLanguage(config.languages));
resolve();
}
...
...
</syntaxhighlight>



==Quellen==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 06

2025-05-23T09:40:49Z

Kowa: /* Hello World Vue 06b */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v06</code>, <code>... v06a</code>, <code>... v06b</code>

== Anwendungsfälle (Use Cases) ==
Die Version des [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_05|fünften Teils des Vue-Tutoriums]]
wird so angepasst, dass die Sprache zur Laufzeit geändert werden kann.

Zunächst wird jedoch eine Navigationskomponente eingeführt. Dies hat den Zweck, das Routing an einem Beispiel zu erklären.

== 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v05d # Wechsle in den Branch v05d mit Express-Server
git checkout -b v06 # Klone v05d in einen neuen Branch v06
rm -rf express_Hello_world
cd frontend
npm i
npm i vue-router
</syntaxhighlight>

In der Datei <code>public/json/config.jso</code>
aktivieren wir wieder den Zugriff auf die lokalen JSON-Dateien.
Den Zugriff auf den Backend-Server, um die Bilder von dort zu holen, behandeln wir später.

<syntaxhighlight lang="json">
{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Fügen Sie außerdem in die Datei <code>vite.config.common.js</code> zwei geeignete Aliase für
<code>view</code> und </code>router</code> ein.

=== Views ===

Anstelle von Sections werden im Frontend Views verwendet.
Dazu werden die Section-Komponenten in den Ordner View verschoben und umbenannt:

<syntaxhighlight lang="bash">
src/view/ViewHello.vue
src/view/ViewHome.vue // an Stelle von ViewForm.vue

src/view/ViewError404.vue // neu
</syntaxhighlight>

Die CSS-Dateien müssen natürlich auch entsprechend verschoben und abgepasst werden.

ViewForm.vue wird in ViewHome.vue unbenannt,
da diese Seite als Startseite verwendet wird.

Zusätzlich wird eine Seite ViewError404.vue angelegt, die immer dann ausgeliefert wird, wenn der Benutzer auf eine URL zugreift, der keine View-Datei zugeordnet ist.

Die CSS-Dateien sollten analog umbenannt und unter den neuen Namen importiert werden. Für <code>ViewError404.vue</code> muss natürlich auch eine CSS-Datei angelegt werden. Diese verweist allerdings nur auf <code>View.css</code>.

<syntaxhighlight lang="html">


<script setup>
import router from '/router'
import storeI18n from '/store/StoreI18n'

const phrases = storeI18n().phrases
</script>

<template>
<h1>404</h1>
<p>{{phrases.pageNotFound.replace('$1', router.currentRoute.value.path)}}</p>
</template>

<style scoped>
@import '/css/view/ViewError404.css';
</style>
</syntaxhighlight>

=== Router-Plugin ===

Um mit Vue Multipage-Anwendungen realisieren zu können, benötigt man einRouter-Plugin.
Dieses muss zunächst händisch auf Basis von <code>vue-router</code> implementiert werden.

<syntaxhighlight lang="ecmascript">
// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import ViewHome from '/view/ViewHome.vue'

const
routes =
[ { path: '/',
name: 'home',
component: ViewHome,
},
{ path: '/hello',
name: 'hello',
component: () => import('/view/ViewHello.vue'),
},
{ path: '/:pathMatch(.*)',
component: () => import('/view/ViewError404.vue'),
}
],

router =
createRouter({ history: createWebHistory(), routes })

export default router
</syntaxhighlight>

Nun muss man das neu erstellte Plugin in die App integrieren.

<syntaxhighlight lang="ecmascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import router from './router' // './router/index.js'
import App from './App.vue'
const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.use(router)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

=== index.html ===

Da das <code>main</code>-Tag nun innerhalb von <code>App.vue</code> verwendet werden soll,
wird es aus der Datei <code>index.html</code> entfernt.

<syntaxhighlight lang="html">
...
<body id="app">
</body>
...
</syntaxhighlight>

=== App.vue ===

Nun kann in die App eine Navigation eingebaut werden.

<syntaxhighlight lang="html">


<script setup>
import AppNav from '/component/AppNav.vue'
import storeSession from '/store/StoreSession'
import storeI18n from '/store/StoreI18n'

const session = storeSession()

storeI18n();

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<AppNav v-if="session.isInitialized"/>
<main v-if="session.isInitialized">
<router-view/>
</main>
</template>

<style>
@import '/css/body.css';
</style>

</syntaxhighlight>

Die zugehörige Navigationskomponente muss auch noch implementiert werden.

<syntaxhighlight lang="html">


<script setup>
</script>

<template>
<nav>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/hello">Hello</router-link></li>
</ul>
</nav>
</template>

<style scoped>
@import '/css/component/AppNav.css';
</style>
</syntaxhighlight>

<syntaxhighlight>
/* src/css/_config.css */
...
--background-color: #C5EFFC;
--link-color: #0027d4;
...
--nav-dist: 0.5em;

/* src/css/AppNav.css */

@import 'config.css';

nav
{ top: 0;
width: 100%;
position: fixed;

ul
{ list-style-type: none;
margin: 0 var(--nav-dist);
padding: 0;

li
{ display: inline;
a { padding: 0 var(--nav-dist); }
}

a
{ text-decoration: none;
color: var(--link-color);
font-weight: bold;
}

a:hover, .router-link-exact-active
{ text-decoration: underline;
color: var(--link-color);
font-weight: bold;
}
}

label, input
{ margin: 0;
}
}
</syntaxhighlight>

=== Navigation ===
Die Navigation muss in allen Komponenten, in den Seiten gewechselt werden, angepasst werden.

Das ist in der App.vue der Fall (siehe zuvor) sowie in der ViewHome.vue.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'
import router from '/router'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
sayHello = () => router.push('/hello')
</script>
</syntaxhighlight>

Die Section-Verwaltung der ehemaligen Single-Page-Anwendung kann und sollte gelöscht werden:
* <code>config.js</code>
* <code>storeSession.js</code>
* <code>ViewHome.vue</code>
* <code>ViewHello.vue</code>

Die Datei <code>HelloWorld.vue</code> kann (samt CSS-Datei) ganz gelöscht werden.

== Hello World Vue 06a ==

Aufgabe: Die Ausgabesprache soll vom Benutzer zur Laufzeit geändert werden können. Die Sprachen sollen durch Bilder (Flaggen) symbolisiert werden.

<syntaxhighlight lang="bash">
git checkout v06 # Wechsle in den Branch v06
git checkout -b v06a # Klone v06 in einen neuen Branch v06a
</syntaxhighlight>

=== <code>config.json</code> ===

Um die vorhandenen Sprachen durchblättern zu können, wird ein einfacher Automat verwendet.

<syntaxhighlight lang="json">
// src/public/json/config.json

{ "apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "en",
"nextLanguage": {"de": "en", "en": "de"}
}
</syntaxhighlight>

=== StoreI18n.js: Integration von nextLanguage ===

Der Automat <code>nextLanguage</code> wird in den StoreI18n integriert. Wenn die Methode <code>changeLang</code> ohne Argument aufgerufen wird, soll der Automat die aktuelle Sprache <code>lang</code> durch die Nachfolgersprache ersetzen.
Dazu sollte zunächst die zunächst Konstante <code>nextLanguage</code> definiert werden.

<syntaxhighlight lang="ecmascript">
...
lang =
ref(null),

nextLanguage =
reactive(config.nextLanguage),

...
</syntaxhighlight>

Diese neue Konstante <code>nextLanguage</code> wird verwendet, um die Sprache mittels <code>changeLang</code> zu definieren, sofern
kein Argument übergeben wurde.

Die Funktion <code>changeLang</code> soll bei einer Änderung der Sprache sowohl die notwendige JSON-Sprach-Datei laden als auch die in der HTML-Datei <code>index.html</code> ausgewiesene Sprache anpassen:

<syntaxhighlight lang="ecmascript">
// /src/store/storeI18N.js

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? nextLanguage[lang.value];
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
}

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}
</syntaxhighlight>

=== Bilder von Flaggen ===

Zur Visualisierung der gewählten Sprache werden Bilder von Flaggen eingesetzt.
Wir kopieren die Bilder im SVG-Format aus dem NPM-Paket "https://github.com/lipis/flag-icons".

<syntaxhighlight lang="bash">
npm i -D flag-icons
</syntaxhighlight>

Im Ordner "node_modules/flag-icons/flags/4x3" finden Sie Flaggen zahlreicher Länder im 4-zu-3-Format.
Kopieren Sie die Flaggen der Länder Deutschland und Großbritanien in den Ordner <code>public/img</code>.

In die Datei config.js wird der Pfad, unter dem die Bilder zu finden sind, eingefügt.

<syntaxhighlight lang="ecmascript">
// public/config.js
...
"apiRoot": "/json/i18n_$1.json",
"imgPath": "/img/$1.svg",
"XapiRoot": "/api/$1"
...
</syntaxhighlight>

=== <code>FormButtonIcon</code> ===

Eine neue Komponente wird benötigt: FormButtonIcon
Dabei handelt es sich um einen Button, der ein Icon anzeigt.
Das Bild kann zur Laufzeit geändert werden.

<syntaxhighlight lang="ecmascript">
<script setup>
import { computed, inject } from 'vue'

const
props = defineProps
({ image: { type: String },
width: { type: String, default: '3em'},
}),
config = inject('config'),
emit = defineEmits(['click']),
click = () => emit('click'),
require = v_url => import.meta.url == null
? v_url
: new URL(v_url, import.meta.url).href,
imgPath = config.imgPath,
buttonImage = computed(() => require(imgPath.replace('$1', props.image)))
</script>

<template>
<input type="image" :src="buttonImage" :style="{width}" @click="click" />
</template>

<style scoped>
@import '/css/component/form/FormButtonIcon.css';
</style>
</syntaxhighlight>

<syntaxhighlight lang="ecmascript">
/* src/css/component/FormButtonIcon.css */

@import 'FormButton.css';

input
{ width: $button_icon_width !important;
margin-left: $nav-dist !important;
}
</syntaxhighlight>

Fügen Sie in <code>src/css/_config.css</code> noch

<syntaxhighlight lang="ecmascript">
--button-icon-width: 1em;
</syntaxhighlight>

ein.

=== Erweiterung von <code>AppNav.vue</code> ===

Der Sprachwahl-Button muss noch in die Navigation eingebaut werden. In diesem Rahmen wird auch gleich die Navigation etwas internationalisiert.

Ergänzen Sie in den Dictionaries der Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code>
folgende Attribute:

<syntaxhighlight lang="html">
... ...,
"navHome": "Start",
"navHello": "Hallo"
</syntaxhighlight>

bzw.

<syntaxhighlight lang="html">
... ...,
"navHome": "Home",
"navHello": "Hello"
</syntaxhighlight>

Damit können Sie das Navigationsmenü internationalisieren (einschließlich Auswahl der Sprache per Button).

<syntaxhighlight lang="html">


<script setup>
import FormButtonIcon from '/component/form/FormButtonIcon.vue'
import storeI18n from '/store/StoreI18n'

const i18n = storeI18n()
</script>

<template>
<nav>
<ul>
<li><router-link to="/">{{i18n.dictionary.navHome}}</router-link></li>
<li><router-link to="/hello">{{i18n.dictionary.navHello}}</router-link></li>
<li><FormButtonIcon :image="i18n.lang" @click="i18n.changeLang()"/></li>
</ul>
</nav>
</template>

<style scoped>
@import '/css/component/AppNav.css';
</style>
</syntaxhighlight>

== Hello World Vue 06b ==

Aufgabe: Sorgen Sie dafür, dass <code>autofocus</code> korrekt funktioniert, insbesondere beim Seitenwechsel via Navigation.

Es ist sinnvoll, die Funktionalität in ein eigenes Store-Modul auszulagern, damit
das Session-Modul in Anwendungen, die keine Autofocus-Funktionalität benötigen, keinen
überflüssigen Code enthalten (Bertrand Meyer: Jedes Modul erfüllt genau eine Aufgabe).
Das Session-Modul wird entsprechend abgespeckt.

Der Autofocus-Store soll zwei Funktionen bieten:
* <code>setAutofocusId</code>: Speichert die ID des Autofokus-Elements der aktuellen Seite (Default: <code>null</code>).
* <code>setFocus</code>: Setzt den Focus auf die aktuelle Autofokus-Komponente (sofern die ID ungleich <code>null</code> ist). Insbesondere für das Window-Ereignis <code>'visibilitychange'</code> soll diese Funktion
aufgerufen werden.

<syntaxhighlight lang="ecmascript">
// /src/store/StoreAutofocus.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

const storeAutofocus =
defineStore
( 'autofocus', // must be unique

() =>
{ const
c_autofocus_id = ref(),
setFocus = () => document.getElementById(c_autofocus_id.value)?.focus(),
setAutofocusId = p_autofocus_id => { c_autofocus_id.value = p_autofocus_id;
setFocus();
}

window.addEventListener('visibilitychange', setFocus);

return { setAutofocusId, setFocus }
}
)

export default storeAutofocus
</syntaxhighlight>

<syntaxhighlight lang="ecmascript">
// /src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Um die aktuelle ID speichern zu können, muss das zugehörige Textfeld die Information, welche ID es hat,
per <code>emit</code> an die Elternkomponente ausgeben.

<syntaxhighlight lang="html">
// /src/component/form/FormTextfield.vue

...
const
props = defineProps
({ id: { type: String, default: '' },
...
})
...
emit = defineEmits(['id', 'update:text', 'enter']),
...
emit('id', inputId);
...
</syntaxhighlight>

Nun müssen die Views, die ein Autofokus-Feld beinhalten, dieses an den Session-Store melden,
sobald sie per Routing aktiviert werden. Das ist in unserem Fall nur die <code>ViewHome</code>.
Ein Watcher sorgt dafür, dass die ID des Textfeldes im Session-Objekt gespeichert wird, sobald
das zugehörige Textfeld die ID per <code>emit</code> meldet.

<syntaxhighlight lang="html">
// /src/view/ViewHome.vue

<script setup>
import { ref, watch } from 'vue'
...
import storeAutofocus from '/store/StoreAutofocus'
...

const
id = ref(null),
autofocus = storeAutofocus(),
...

watch( id, () => autofocus.setAutofocusId(id.value) )
</script>

<template>
...
<FormTextfield @id="setId"
...
>
...
</template>
...
</syntaxhighlight>

Zum Schluss muss im Router noch die Autofocus-ID bei jedem Seitenwechsel gelöscht werden.

<syntaxhighlight lang="ecmascript">
// /src/router/index.js

...
import storeAutofocus from '/store/StoreAutofocus'

const
...

router.beforeEach(() => storeAutofocus().setAutofocusId())

export default router
</syntaxhighlight>

Wichtig ist hier, dass man keine Konstante <code>session</code> definieren kann, da die Stores erst nach dem Router-Objekt erzeugt werden:

<syntaxhighlight lang="ecmascript">
// /src/router/index.js
...
import storeAutofocus from '/store/StoreAutofocus'

const
autofocus = storeAutofocus(), // FUNKTIONIERT NICHT
...
router.beforeEach(() => autofocus.setAutofocusId())
...
</syntaxhighlight>

Der Funktionsaufruf <code>storeSession()</code> darf daher erst in der Callback-Funktion von
<code>router.beforeEach</code> aufgerufen werden. Zu diesem Zeitpunkt sind die Stores und der Router auf jeden Fall schon initialisiert worden.

Zum Abschluss sollten Sie noch versuchen, <code>/src/component/AppNav.vue</code> so abzuändern,
dass ein Klick auf die Fahne nicht nur die Sprache ändert, sondern auch noch den Focus auf das Startfeld setzt.

== Hello World Vue 06c ==

Aufgabe: Sorgen Sie dafür, dass die unterstützten Sprachen und der Sprach-Automat vom Backend
geladen wird.

<syntaxhighlight lang="bash">
git checkout v06b # Wechsle in den Branch v06b
git checkout -b v06c # Klone v06b in einen neuen Branch v06c
</syntaxhighlight>

Splitten Sie die Config-Datei zunächst in zwei Teile: "config.json" wird aus dem Public-Ordner geladen.
"config_backend.json" wird normalerweise vom Backend geladen, kann aber zum Entwicklungszeitpunkt auch vom Public-Ordner geladen werden, wenn das Backend noch nicht stabil läuft.

<syntaxhighlight lang="json">
// src/public/json/config.json

{ "configBackend": "/json/config_backend.json",
"apiRoot": "/json/i18n_$1.json",
"imgPath": "/img/$1.svg",

"XapiRoot": "/api/$1"
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/public/json/config_backend.json

{ "languages": ["de", "en"],
"nextLanguage": {"de": "en", "en": "de"}
}
</syntaxhighlight>

Das Backend teilt dem Frontend mit, welche Sprachen unterstützt werden.

=== <code>main.js</code> ===

Laden Sie, nachdem Sie "config" asynchron geladen haben, "configBackend" asynchron und kopieren Sie den Inhalt dieses Objekts in das Config-Objekt. Den Pfad von "configBackend" finden Sie unter "config.configBackend".

<syntaxhighlight lang="ecmascript">
...
const
...
init = async () =>
{ const
config = await getJson('/json/config.json'),
configBackend = await getJson(config.configBackend)

Object.assign(config, configBackend)

app
.provide('config', config)
.use(pinia)
.use(router)
.mount('#app') // app is shown to the user
}
</syntaxhighlight>

Nun gibt es im Konfigurationsobjekt keine Defaultsprache mehr.
Im I18N-Store wird daher ab sofort die erste Sprache in der Liste der
unterstützten Sprachen als Defaultsprache genutzt.

<syntaxhighlight lang="ecmascript">
// /src/store/storeI18N.js

initialize =
async resolve =>
{ await changeLang(config.languages[0]);
resolve();
}
</syntaxhighlight>

== Hello World Vue 06d ==

Aufgabe: Defaultmäßig soll dem Benutzer die App in der Sprache angezeigt werden, die der Benutzer
im Browser voreingestellt hat. Sollte die voreingestellte Sprache nicht unterstützt werden, wird die App in der Defaultsprache angezeigt.

Legen Sie zunächst wieder einen neuen Branch an.

<syntaxhighlight lang="bash">
git checkout v06c # Wechsle in den Branch v06c
git checkout -b v06d # Klone v06c in einen neuen Branch v06d
</syntaxhighlight>

Das Vorgehen ist im Prinzip ganz einfach.

Mittels des NPM-Packets "navigator-languages" ermittelt man die vom Browser unterstützten
Sprachen. In der Konfigurationsdatei listet man die Sprachen auf, die von der App unterstützt werden.
Besser wäre es natürlich, diese Liste vom Backend zu laden, damit die App mit bekommt, wenn neue
Sprachen zur Verfügung stehen. Am aufwändigsten ist es, diese beiden Array zu matchen.

Mögliche Erweiterung: Auch die HTML-Pfade sollten internationalisiert werden.

<syntaxhighlight lang="bash">
npm i navigator-languages // unterstützt mehrere Browservarianten
</syntaxhighlight>

=== Language Matching ===

Das Language Matching erfolgt zweimal mit zwei verschachtelten Schleifen.
Zunächst wird überprüft, ob es exakte Übereinstimmungen gibt. Sollte das nicht der Fall sein, wird überprüft, ob es Matches zwischen den ersten beiden Buchstaben gibt ('de', 'de-AT', 'de-DE' matchen in diesem Schritt alle miteinander).

<syntaxhighlight lang="ecmascript">
// src/util/chooseLanguage.js

import navigatorLanguages from 'navigator-languages'

const
/**
* @function
* @param { Array<string> } p_langs_available
* An array of language strings containing the languages
* supported by the app
* @param { Array<string> } [p_langs_required = navigatorLanguages()]
* An array of language strings containing the languages
* requested by the client
* @return { string }
* The language to be displayed
*/
chooseLanguage =
(p_langs_available, p_langs_required = navigatorLanguages()) =>
{ let
lang = p_langs_available[0],
i=0, j=0, n=p_langs_required.length, m=p_langs_available.length

outer:
{ while (i<n)
{ const c_lang_required = p_langs_required[i]
while (j<m)
{ const c_lang_availabe = p_langs_available[j]
if (c_lang_availabe === c_lang_required)
// both languages match perfectly
{ lang = c_lang_availabe;
break outer;
}
j++
}
i++
}
i=0, j=0
while (i<n)
{ const c_lang_required = p_langs_required[i]
while (j<m)
{ const c_lang_availabe = p_langs_available[j]
if (c_lang_availabe.substring(0,2) === c_lang_required.substring(0,2))
// main part of the languages match
{ lang = c_lang_availabe;
break outer;
}
j++
}
i++
}
}

return lang
}

export default chooseLanguage
</syntaxhighlight>

=== <code>src/store/StoreI18n</code> ===

Im I18N-Store wird nun beim Initialisieren nicht nicht mehr eine Defaultspache geladen, sondern
die Sprache, die möglichst nah an den Wünschen des im Browser des Benutzers gespeicherten Sprachwünschen liegt.

Beachten Sie, dass Sie in die Datei <code>vite.config.common.js</code> einen geeigneten Alias für den
<code>util</code>-Pfad definieren müssen, um <code>'/util/chooseLanguage'</code> an Stelle von
<code>'@/util/chooseLanguage'</code> schreiben zu können.

<syntaxhighlight lang="ecmascript">
...
import chooseLanguage from '/util/chooseLanguage'
...
() =>
{ const
...
initialize =
async resolve =>
{ await changeLang(chooseLanguage(config.languages));
resolve();
}
...
...
</syntaxhighlight>



==Quellen==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 06

2025-05-20T07:10:11Z

Kowa: /* Hello World Vue 06b */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v06</code>, <code>... v06a</code>, <code>... v06b</code>

== Anwendungsfälle (Use Cases) ==
Die Version des [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_05|fünften Teils des Vue-Tutoriums]]
wird so angepasst, dass die Sprache zur Laufzeit geändert werden kann.

Zunächst wird jedoch eine Navigationskomponente eingeführt. Dies hat den Zweck, das Routing an einem Beispiel zu erklären.

== 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v05d # Wechsle in den Branch v05d mit Express-Server
git checkout -b v06 # Klone v05d in einen neuen Branch v06
rm -rf express_Hello_world
cd frontend
npm i
npm i vue-router
</syntaxhighlight>

In der Datei <code>public/json/config.jso</code>
aktivieren wir wieder den Zugriff auf die lokalen JSON-Dateien.
Den Zugriff auf den Backend-Server, um die Bilder von dort zu holen, behandeln wir später.

<syntaxhighlight lang="json">
{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Fügen Sie außerdem in die Datei <code>vite.config.common.js</code> zwei geeignete Aliase für
<code>view</code> und </code>router</code> ein.

=== Views ===

Anstelle von Sections werden im Frontend Views verwendet.
Dazu werden die Section-Komponenten in den Ordner View verschoben und umbenannt:

<syntaxhighlight lang="bash">
src/view/ViewHello.vue
src/view/ViewHome.vue // an Stelle von ViewForm.vue

src/view/ViewError404.vue // neu
</syntaxhighlight>

Die CSS-Dateien müssen natürlich auch entsprechend verschoben und abgepasst werden.

ViewForm.vue wird in ViewHome.vue unbenannt,
da diese Seite als Startseite verwendet wird.

Zusätzlich wird eine Seite ViewError404.vue angelegt, die immer dann ausgeliefert wird, wenn der Benutzer auf eine URL zugreift, der keine View-Datei zugeordnet ist.

Die CSS-Dateien sollten analog umbenannt und unter den neuen Namen importiert werden. Für <code>ViewError404.vue</code> muss natürlich auch eine CSS-Datei angelegt werden. Diese verweist allerdings nur auf <code>View.css</code>.

<syntaxhighlight lang="html">


<script setup>
import router from '/router'
import storeI18n from '/store/StoreI18n'

const phrases = storeI18n().phrases
</script>

<template>
<h1>404</h1>
<p>{{phrases.pageNotFound.replace('$1', router.currentRoute.value.path)}}</p>
</template>

<style scoped>
@import '/css/view/ViewError404.css';
</style>
</syntaxhighlight>

=== Router-Plugin ===

Um mit Vue Multipage-Anwendungen realisieren zu können, benötigt man einRouter-Plugin.
Dieses muss zunächst händisch auf Basis von <code>vue-router</code> implementiert werden.

<syntaxhighlight lang="ecmascript">
// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import ViewHome from '/view/ViewHome.vue'

const
routes =
[ { path: '/',
name: 'home',
component: ViewHome,
},
{ path: '/hello',
name: 'hello',
component: () => import('/view/ViewHello.vue'),
},
{ path: '/:pathMatch(.*)',
component: () => import('/view/ViewError404.vue'),
}
],

router =
createRouter({ history: createWebHistory(), routes })

export default router
</syntaxhighlight>

Nun muss man das neu erstellte Plugin in die App integrieren.

<syntaxhighlight lang="ecmascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import router from './router' // './router/index.js'
import App from './App.vue'
const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.use(router)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

=== index.html ===

Da das <code>main</code>-Tag nun innerhalb von <code>App.vue</code> verwendet werden soll,
wird es aus der Datei <code>index.html</code> entfernt.

<syntaxhighlight lang="html">
...
<body id="app">
</body>
...
</syntaxhighlight>

=== App.vue ===

Nun kann in die App eine Navigation eingebaut werden.

<syntaxhighlight lang="html">


<script setup>
import AppNav from '/component/AppNav.vue'
import storeSession from '/store/StoreSession'
import storeI18n from '/store/StoreI18n'

const session = storeSession()

storeI18n();

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<AppNav v-if="session.isInitialized"/>
<main v-if="session.isInitialized">
<router-view/>
</main>
</template>

<style>
@import '/css/body.css';
</style>

</syntaxhighlight>

Die zugehörige Navigationskomponente muss auch noch implementiert werden.

<syntaxhighlight lang="html">


<script setup>
</script>

<template>
<nav>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/hello">Hello</router-link></li>
</ul>
</nav>
</template>

<style scoped>
@import '/css/component/AppNav.css';
</style>
</syntaxhighlight>

<syntaxhighlight>
/* src/css/_config.css */
...
--background-color: #C5EFFC;
--link-color: #0027d4;
...
--nav-dist: 0.5em;

/* src/css/AppNav.css */

@import 'config.css';

nav
{ top: 0;
width: 100%;
position: fixed;

ul
{ list-style-type: none;
margin: 0 var(--nav-dist);
padding: 0;

li
{ display: inline;
a { padding: 0 var(--nav-dist); }
}

a
{ text-decoration: none;
color: var(--link-color);
font-weight: bold;
}

a:hover, .router-link-exact-active
{ text-decoration: underline;
color: var(--link-color);
font-weight: bold;
}
}

label, input
{ margin: 0;
}
}
</syntaxhighlight>

=== Navigation ===
Die Navigation muss in allen Komponenten, in den Seiten gewechselt werden, angepasst werden.

Das ist in der App.vue der Fall (siehe zuvor) sowie in der ViewHome.vue.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'
import router from '/router'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
sayHello = () => router.push('/hello')
</script>
</syntaxhighlight>

Die Section-Verwaltung der ehemaligen Single-Page-Anwendung kann und sollte gelöscht werden:
* <code>config.js</code>
* <code>storeSession.js</code>
* <code>ViewHome.vue</code>
* <code>ViewHello.vue</code>

Die Datei <code>HelloWorld.vue</code> kann (samt CSS-Datei) ganz gelöscht werden.

== Hello World Vue 06a ==

Aufgabe: Die Ausgabesprache soll vom Benutzer zur Laufzeit geändert werden können. Die Sprachen sollen durch Bilder (Flaggen) symbolisiert werden.

<syntaxhighlight lang="bash">
git checkout v06 # Wechsle in den Branch v06
git checkout -b v06a # Klone v06 in einen neuen Branch v06a
</syntaxhighlight>

=== <code>config.json</code> ===

Um die vorhandenen Sprachen durchblättern zu können, wird ein einfacher Automat verwendet.

<syntaxhighlight lang="json">
// src/public/json/config.json

{ "apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "en",
"nextLanguage": {"de": "en", "en": "de"}
}
</syntaxhighlight>

=== StoreI18n.js: Integration von nextLanguage ===

Der Automat <code>nextLanguage</code> wird in den StoreI18n integriert. Wenn die Methode <code>changeLang</code> ohne Argument aufgerufen wird, soll der Automat die aktuelle Sprache <code>lang</code> durch die Nachfolgersprache ersetzen.
Dazu sollte zunächst die zunächst Konstante <code>nextLanguage</code> definiert werden.

<syntaxhighlight lang="ecmascript">
...
lang =
ref(null),

nextLanguage =
reactive(config.nextLanguage),

...
</syntaxhighlight>

Diese neue Konstante <code>nextLanguage</code> wird verwendet, um die Sprache mittels <code>changeLang</code> zu definieren, sofern
kein Argument übergeben wurde.

Die Funktion <code>changeLang</code> soll bei einer Änderung der Sprache sowohl die notwendige JSON-Sprach-Datei laden als auch die in der HTML-Datei <code>index.html</code> ausgewiesene Sprache anpassen:

<syntaxhighlight lang="ecmascript">
// /src/store/storeI18N.js

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? nextLanguage[lang.value];
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
}

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}
</syntaxhighlight>

=== Bilder von Flaggen ===

Zur Visualisierung der gewählten Sprache werden Bilder von Flaggen eingesetzt.
Wir kopieren die Bilder im SVG-Format aus dem NPM-Paket "https://github.com/lipis/flag-icons".

<syntaxhighlight lang="bash">
npm i -D flag-icons
</syntaxhighlight>

Im Ordner "node_modules/flag-icons/flags/4x3" finden Sie Flaggen zahlreicher Länder im 4-zu-3-Format.
Kopieren Sie die Flaggen der Länder Deutschland und Großbritanien in den Ordner <code>public/img</code>.

In die Datei config.js wird der Pfad, unter dem die Bilder zu finden sind, eingefügt.

<syntaxhighlight lang="ecmascript">
// public/config.js
...
"apiRoot": "/json/i18n_$1.json",
"imgPath": "/img/$1.svg",
"XapiRoot": "/api/$1"
...
</syntaxhighlight>

=== <code>FormButtonIcon</code> ===

Eine neue Komponente wird benötigt: FormButtonIcon
Dabei handelt es sich um einen Button, der ein Icon anzeigt.
Das Bild kann zur Laufzeit geändert werden.

<syntaxhighlight lang="ecmascript">
<script setup>
import { computed, inject } from 'vue'

const
props = defineProps
({ image: { type: String },
width: { type: String, default: '3em'},
}),
config = inject('config'),
emit = defineEmits(['click']),
click = () => emit('click'),
require = v_url => import.meta.url == null
? v_url
: new URL(v_url, import.meta.url).href,
imgPath = config.imgPath,
buttonImage = computed(() => require(imgPath.replace('$1', props.image)))
</script>

<template>
<input type="image" :src="buttonImage" :style="{width}" @click="click" />
</template>

<style scoped>
@import '/css/component/form/FormButtonIcon.css';
</style>
</syntaxhighlight>

<syntaxhighlight lang="ecmascript">
/* src/css/component/FormButtonIcon.css */

@import 'FormButton.css';

input
{ width: $button_icon_width !important;
margin-left: $nav-dist !important;
}
</syntaxhighlight>

Fügen Sie in <code>src/css/_config.css</code> noch

<syntaxhighlight lang="ecmascript">
--button-icon-width: 1em;
</syntaxhighlight>

ein.

=== Erweiterung von <code>AppNav.vue</code> ===

Der Sprachwahl-Button muss noch in die Navigation eingebaut werden. In diesem Rahmen wird auch gleich die Navigation etwas internationalisiert.

Ergänzen Sie in den Dictionaries der Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code>
folgende Attribute:

<syntaxhighlight lang="html">
... ...,
"navHome": "Start",
"navHello": "Hallo"
</syntaxhighlight>

bzw.

<syntaxhighlight lang="html">
... ...,
"navHome": "Home",
"navHello": "Hello"
</syntaxhighlight>

Damit können Sie das Navigationsmenü internationalisieren (einschließlich Auswahl der Sprache per Button).

<syntaxhighlight lang="html">


<script setup>
import FormButtonIcon from '/component/form/FormButtonIcon.vue'
import storeI18n from '/store/StoreI18n'

const i18n = storeI18n()
</script>

<template>
<nav>
<ul>
<li><router-link to="/">{{i18n.dictionary.navHome}}</router-link></li>
<li><router-link to="/hello">{{i18n.dictionary.navHello}}</router-link></li>
<li><FormButtonIcon :image="i18n.lang" @click="i18n.changeLang()"/></li>
</ul>
</nav>
</template>

<style scoped>
@import '/css/component/AppNav.css';
</style>
</syntaxhighlight>

== Hello World Vue 06b ==

Aufgabe: Sorgen Sie dafür, dass <code>autofocus</code> korrekt funktioniert, insbesondere beim Seitenwechsel via Navigation.

Es ist sinnvoll, die Funktionalität in ein eigenes Store-Modul auszulagern, damit
das Session-Modul in Anwendungen, die keine Autofocus-Funktionalität benötigen, keinen
überflüssigen Code enthalten (Bertrand Meyer: Jedes Modul erfüllt genau eine Aufgabe).
Das Session-Modul wird entsprechend abgespeckt.

Der Autofocus-Store soll zwei Funktionen bieten:
* <code>setAutofocusId</code>: Speichert die ID des Autofokus-Elements der aktuellen Seite (Default: <code>null</code>).
* <code>setFocus</code>: Setzt den Focus auf die aktuelle Autofokus-Komponente (sofern die ID ungleich <code>null</code> ist). Insbesondere für das Window-Ereignis <code>'visibilitychange'</code> soll diese Funktion
aufgerufen werden.

<syntaxhighlight lang="ecmascript">
// /src/store/StoreAutofocus.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

const storeAutofocus =
defineStore
( 'autofocus', // must be unique

() =>
{ const
c_autofocus_id = ref(),
setFocus = () => document.getElementById(c_autofocus_id.value)?.focus(),
setAutofocusId = p_autofocus_id => { c_autofocus_id.value = p_autofocus_id;
setFocus();
}

window.addEventListener('visibilitychange', setFocus);

return { setAutofocusId, setFocus }
}
)

export default storeAutofocus
</syntaxhighlight>

<syntaxhighlight lang="ecmascript">
// /src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Um die aktuelle ID speichern zu können, muss das zugehörige Textfeld die Information, welche ID es hat,
per <code>emit</code> an die Elternkomponente ausgeben.

<syntaxhighlight lang="html">
// /src/component/form/FormTextfield.vue

...
const
props = defineProps
({ id: { type: String, default: '' },
...
})
...
emit = defineEmits(['id', 'update:text', 'enter']),
...
emit('id', inputId);
...
</syntaxhighlight>

Nun müssen die Views, die ein Autofokus-Feld beinhalten, dieses an den Session-Store melden,
sobald sie per Routing aktiviert werden. Das ist in unserem Fall nur die <code>ViewHome</code>.
Ein Watcher sorgt dafür, dass die ID des Textfeldes im Session-Objekt gespeichert wird, sobald
das zugehörige Textfeld die ID per <code>emit</code> meldet.

<syntaxhighlight lang="html">
// /src/view/ViewHome.vue

<script setup>
import { ref, watch } from 'vue'
...
import storeAutofocus from '/store/StoreAutofocus'
...

const
id = ref(null),
autofocus = storeAutofocus(),
...

watch( id, () => autofocus.setAutofocusId(id.value) )
</script>

<template>
...
<FormTextfield @id="setId"
...
>
...
</template>
...
</syntaxhighlight>

Zum Schluss muss im Router noch die Autofocus-ID bei jedem Seitenwechsel gelöscht werden.

<syntaxhighlight lang="ecmascript">
// /src/router/index.js

...
import storeAutofocus from '/store/StoreAutofocus'

const
...

router.beforeEach(() => storeAutofocus().setAutofocusId())

export default router
</syntaxhighlight>

Wichtig ist hier, dass man keine Konstante <code>session</code> definieren kann, da die Stores erst nach dem Router-Objekt erzeugt werden:

<syntaxhighlight lang="ecmascript">
// /src/router/index.js
...
import storeAutofocus from '/store/StoreAutofocus'

const
autofocus = storeAutofocus(), // FUNKTIONIERT NICHT
...
router.beforeEach(() => autofocus.setAutofocusId())
...
</syntaxhighlight>

Der Funktionsaufruf <code>storeSession()</code> darf daher erst in der Callback-Funktion von
<code>router.beforeEach</code> aufgerufen werden. Zu diesem Zeitpunkt sind die Stores und der Router auf jeden Fall schon initialisiert worden.

Zum Abschluss sollten Sie noch versuchen, <code>/src/component/AppNav.vue</code> so abzuändern,
dass ein Klick auf die Fahne nicht nur die Sprache ändert, sonden auch noch den Focus auf das Startfeld setzt (such wenn dieses Feature vermutlich eher kontraproduktiv ist).

== Hello World Vue 06c ==

Aufgabe: Sorgen Sie dafür, dass die unterstützten Sprachen und der Sprach-Automat vom Backend
geladen wird.

<syntaxhighlight lang="bash">
git checkout v06b # Wechsle in den Branch v06b
git checkout -b v06c # Klone v06b in einen neuen Branch v06c
</syntaxhighlight>

Splitten Sie die Config-Datei zunächst in zwei Teile: "config.json" wird aus dem Public-Ordner geladen.
"config_backend.json" wird normalerweise vom Backend geladen, kann aber zum Entwicklungszeitpunkt auch vom Public-Ordner geladen werden, wenn das Backend noch nicht stabil läuft.

<syntaxhighlight lang="json">
// src/public/json/config.json

{ "configBackend": "/json/config_backend.json",
"apiRoot": "/json/i18n_$1.json",
"imgPath": "/img/$1.svg",

"XapiRoot": "/api/$1"
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/public/json/config_backend.json

{ "languages": ["de", "en"],
"nextLanguage": {"de": "en", "en": "de"}
}
</syntaxhighlight>

Das Backend teilt dem Frontend mit, welche Sprachen unterstützt werden.

=== <code>main.js</code> ===

Laden Sie, nachdem Sie "config" asynchron geladen haben, "configBackend" asynchron und kopieren Sie den Inhalt dieses Objekts in das Config-Objekt. Den Pfad von "configBackend" finden Sie unter "config.configBackend".

<syntaxhighlight lang="ecmascript">
...
const
...
init = async () =>
{ const
config = await getJson('/json/config.json'),
configBackend = await getJson(config.configBackend)

Object.assign(config, configBackend)

app
.provide('config', config)
.use(pinia)
.use(router)
.mount('#app') // app is shown to the user
}
</syntaxhighlight>

Nun gibt es im Konfigurationsobjekt keine Defaultsprache mehr.
Im I18N-Store wird daher ab sofort die erste Sprache in der Liste der
unterstützten Sprachen als Defaultsprache genutzt.

<syntaxhighlight lang="ecmascript">
// /src/store/storeI18N.js

initialize =
async resolve =>
{ await changeLang(config.languages[0]);
resolve();
}
</syntaxhighlight>

== Hello World Vue 06d ==

Aufgabe: Defaultmäßig soll dem Benutzer die App in der Sprache angezeigt werden, die der Benutzer
im Browser voreingestellt hat. Sollte die voreingestellte Sprache nicht unterstützt werden, wird die App in der Defaultsprache angezeigt.

Legen Sie zunächst wieder einen neuen Branch an.

<syntaxhighlight lang="bash">
git checkout v06c # Wechsle in den Branch v06c
git checkout -b v06d # Klone v06c in einen neuen Branch v06d
</syntaxhighlight>

Das Vorgehen ist im Prinzip ganz einfach.

Mittels des NPM-Packets "navigator-languages" ermittelt man die vom Browser unterstützten
Sprachen. In der Konfigurationsdatei listet man die Sprachen auf, die von der App unterstützt werden.
Besser wäre es natürlich, diese Liste vom Backend zu laden, damit die App mit bekommt, wenn neue
Sprachen zur Verfügung stehen. Am aufwändigsten ist es, diese beiden Array zu matchen.

Mögliche Erweiterung: Auch die HTML-Pfade sollten internationalisiert werden.

<syntaxhighlight lang="bash">
npm i navigator-languages // unterstützt mehrere Browservarianten
</syntaxhighlight>

=== Language Matching ===

Das Language Matching erfolgt zweimal mit zwei verschachtelten Schleifen.
Zunächst wird überprüft, ob es exakte Übereinstimmungen gibt. Sollte das nicht der Fall sein, wird überprüft, ob es Matches zwischen den ersten beiden Buchstaben gibt ('de', 'de-AT', 'de-DE' matchen in diesem Schritt alle miteinander).

<syntaxhighlight lang="ecmascript">
// src/util/chooseLanguage.js

import navigatorLanguages from 'navigator-languages'

const
/**
* @function
* @param { Array<string> } p_langs_available
* An array of language strings containing the languages
* supported by the app
* @param { Array<string> } [p_langs_required = navigatorLanguages()]
* An array of language strings containing the languages
* requested by the client
* @return { string }
* The language to be displayed
*/
chooseLanguage =
(p_langs_available, p_langs_required = navigatorLanguages()) =>
{ let
lang = p_langs_available[0],
i=0, j=0, n=p_langs_required.length, m=p_langs_available.length

outer:
{ while (i<n)
{ const c_lang_required = p_langs_required[i]
while (j<m)
{ const c_lang_availabe = p_langs_available[j]
if (c_lang_availabe === c_lang_required)
// both languages match perfectly
{ lang = c_lang_availabe;
break outer;
}
j++
}
i++
}
i=0, j=0
while (i<n)
{ const c_lang_required = p_langs_required[i]
while (j<m)
{ const c_lang_availabe = p_langs_available[j]
if (c_lang_availabe.substring(0,2) === c_lang_required.substring(0,2))
// main part of the languages match
{ lang = c_lang_availabe;
break outer;
}
j++
}
i++
}
}

return lang
}

export default chooseLanguage
</syntaxhighlight>

=== <code>src/store/StoreI18n</code> ===

Im I18N-Store wird nun beim Initialisieren nicht nicht mehr eine Defaultspache geladen, sondern
die Sprache, die möglichst nah an den Wünschen des im Browser des Benutzers gespeicherten Sprachwünschen liegt.

Beachten Sie, dass Sie in die Datei <code>vite.config.common.js</code> einen geeigneten Alias für den
<code>util</code>-Pfad definieren müssen, um <code>'/util/chooseLanguage'</code> an Stelle von
<code>'@/util/chooseLanguage'</code> schreiben zu können.

<syntaxhighlight lang="ecmascript">
...
import chooseLanguage from '/util/chooseLanguage'
...
() =>
{ const
...
initialize =
async resolve =>
{ await changeLang(chooseLanguage(config.languages));
resolve();
}
...
...
</syntaxhighlight>



==Quellen==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T15:14:50Z

Kowa: /* Backend-Server mittels Express */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05a erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

=== Initiaisierung durch <code>main.js</code> und <code>App.vue</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden, da das asynchrone Laden von Initialisierungsdaten in jedem Store selbst geregelt wird.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

Die Initialisierung der einzelnen Stores erfolgt in der Hauptdatei <code>App.vue</code>

<syntaxhighlight lang="javascript">
<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'
import storeI18n from '/store/StoreI18n'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

// Activate initializer of "storeI18n"
storeI18n(); // First call of storeI18n(): The code of the function is performed
// All other calls: The reult of the first call is returned (Singleton)

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05c) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== Benutzung von Express als Backend-Server (v05d) ==

=== express_hello_world ===

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

=== Backend-Server mittels Express ===

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

==== <code>src/server.js</code> ====

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T15:13:40Z

Kowa: /* express_hello_world (v05d) */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05a erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

=== Initiaisierung durch <code>main.js</code> und <code>App.vue</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden, da das asynchrone Laden von Initialisierungsdaten in jedem Store selbst geregelt wird.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

Die Initialisierung der einzelnen Stores erfolgt in der Hauptdatei <code>App.vue</code>

<syntaxhighlight lang="javascript">
<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'
import storeI18n from '/store/StoreI18n'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

// Activate initializer of "storeI18n"
storeI18n(); // First call of storeI18n(): The code of the function is performed
// All other calls: The reult of the first call is returned (Singleton)

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05c) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== Benutzung von Express als Backend-Server (v05d) ==

=== express_hello_world ===

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Backend-Server mittels Express ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T15:13:18Z

Kowa: /* Benutzung von Express als Backend-Server (v05d) */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05a erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

=== Initiaisierung durch <code>main.js</code> und <code>App.vue</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden, da das asynchrone Laden von Initialisierungsdaten in jedem Store selbst geregelt wird.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

Die Initialisierung der einzelnen Stores erfolgt in der Hauptdatei <code>App.vue</code>

<syntaxhighlight lang="javascript">
<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'
import storeI18n from '/store/StoreI18n'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

// Activate initializer of "storeI18n"
storeI18n(); // First call of storeI18n(): The code of the function is performed
// All other calls: The reult of the first call is returned (Singleton)

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05c) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Backend-Server mittels Express ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T15:12:09Z

Kowa: /* Benutzung eines Backend-Servers (v05d) */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05a erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

=== Initiaisierung durch <code>main.js</code> und <code>App.vue</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden, da das asynchrone Laden von Initialisierungsdaten in jedem Store selbst geregelt wird.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

Die Initialisierung der einzelnen Stores erfolgt in der Hauptdatei <code>App.vue</code>

<syntaxhighlight lang="javascript">
<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'
import storeI18n from '/store/StoreI18n'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

// Activate initializer of "storeI18n"
storeI18n(); // First call of storeI18n(): The code of the function is performed
// All other calls: The reult of the first call is returned (Singleton)

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05c) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T14:59:02Z

Kowa: /* main.js */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05a erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

=== Initiaisierung durch <code>main.js</code> und <code>App.vue</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden, da das asynchrone Laden von Initialisierungsdaten in jedem Store selbst geregelt wird.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

Die Initialisierung der einzelnen Stores erfolgt in der Hauptdatei <code>App.vue</code>

<syntaxhighlight lang="javascript">
<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'
import storeI18n from '/store/StoreI18n'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

// Activate initializer of "storeI18n"
storeI18n(); // First call of storeI18n(): The code of the function is performed
// All other calls: The reult of the first call is returned (Singleton)

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05d) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T14:55:38Z

Kowa: /* StoreI18n.js (v05c) */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05a erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

=== <code>main.js</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden, da das asynchrone Laden von Initialisierungsdaten in jedem Store selbst geregelt wird.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05d) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T14:53:27Z

Kowa: /* main.js */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05a erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> (v05c) ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

=== <code>main.js</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden, da das asynchrone Laden von Initialisierungsdaten in jedem Store selbst geregelt wird.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05d) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T14:51:56Z

Kowa: /* StoreI18n.js (v05c) */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05a erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> (v05c) ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>main.js</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden, da das asynchrone Laden von Initialisierungsdaten in jedem Store selbst geregelt wird.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05d) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T14:50:31Z

Kowa: /* StoreI18n.js (v05c) */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05a erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

== <code>StoreI18n.js</code> (v05c) ==

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>main.js</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden, da das asynchrone Laden von Initialisierungsdaten in jedem Store selbst geregelt wird.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05d) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T14:49:52Z

Kowa: /* StoreGreeting.js */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05a erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> (v05c) ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>main.js</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden, da das asynchrone Laden von Initialisierungsdaten in jedem Store selbst geregelt wird.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05d) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T14:43:54Z

Kowa: /* Verallgemeinerung des Initialisierungsprozesses (v05b) */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05a erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> (v05c) ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>main.js</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden, da das asynchrone Laden von Initialisierungsdaten in jedem Store selbst geregelt wird.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05d) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T14:42:19Z

Kowa: /* main.js */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> (v05c) ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>main.js</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden, da das asynchrone Laden von Initialisierungsdaten in jedem Store selbst geregelt wird.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05d) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T14:40:04Z

Kowa: /* StoreI18n.js */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> (v05c) ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

Für den I18N-Store werden folgende Funktionen ergänzt:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem.
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>main.js</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05d) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T14:35:58Z

Kowa: /* Verallgemeinerung des Initialisierungsprozesses (v05c) */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Ergänzt wurden:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>main.js</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05d) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T14:33:21Z

Kowa: /* Verallgemeinerung des Initialisierungsprozesses (v05b) */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05c) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b # Wechsle in den Branch v05b
git checkout -b v05c # Klone v05b in einen neuen Branch v05c
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Ergänzt wurden:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>main.js</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05d) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T14:32:35Z

Kowa: /* Benutzung eines Backend-Servers (v05c) */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Ergänzt wurden:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>main.js</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05d) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 05

2025-05-13T08:43:13Z

Kowa: /* Benutzung von Strapi als Backend-Servers (v05e) */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v05</code>, <code>... v05a</code>, <code>... v05b</code>, <code>... v05c</code>, <code>... v05d</code>, <code>... v05e</code>

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|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 erfolgt 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v04 # Wechsle in den Branch v04
git checkout -b v05 # Klone v04 in einen neuen Branch v05
npm i
</syntaxhighlight>

== Kofigurationsdateien ==

=== Hauptkonfigurationsdatei ===
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.

<syntaxhighlight lang="json">
// src/json/config.json

{ "startSection": "form" }
</syntaxhighlight>

=== Internationalisierungsdateien ===

Die folgenden Dateien sollen zunächst statisch eingelesen werden.
Sie dienen der Internationalisierung (internationalization = i..................n = i18n).

<syntaxhighlight lang="json">
// src/json/i18n_de.json

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

"dictionary":
{ "placeholderName": "Ihr Name",
"stranger": "Fremder",
"askName": "Wie heißen Sie?",
"welcome": "Willkommen zu Web-Programmierung!",
"buttonReset": "Reset",
"buttonSayHello": "Begrüßung"
}
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/json/i18n_en.json

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

"dictionary":
{ "placeholderName": "your name",
"stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
</syntaxhighlight>

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

== Statische JSON-Dateien (v05) ==
=== Initialisierung von <code>StoreSession.js</code> mit Hilfe einer JSON-Datei ===

Die JSON-Datei <code>config.json</code> wird von <code>StoreSession.js</code> statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie
folgenden Import-Befehl in diese Datei ein:

<syntaxhighlight lang="javascript">
import config from '@/json/config.json'
</syntaxhighlight>

An dieser Stelle würde ich keine Vite-Alias <code>'/json'</code> definieren, sondern die Schreibweise
<code>'@/json/...'</code> beibehalten. Der Grund ist, dass die JSON-Dateien später dynamisch aus dem Public-Bereich geladen werden sollen und der JSON-Ordner dort unter dem Namen <code>'/json'</code> zu finden sein wird.

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist der statische Import in Transcodern wie webpack, vite etc. möglich. Hierbei wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden:

<syntaxhighlight lang="javascript">
const
section = ref(config.startSection),
...
</syntaxhighlight>

Die Initialisierung von StoreSession erfolgt bislang in der Datei <code>HelloWorld.vue</code>mittels der Funition <code>session.init</code>. Entfernen Sie in der Datei <code>StoreSession.js</code> die Init-Funktion und in der Datei <code>HelloWorld.vue</code> den zugehörigen Aufruf der Init-Funktion.

Sie können nun auch noch die Funktion "init" aus der Datei StoreSession.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

=== <code>StoreGreeting.js</code> ===

Die Webanwendung soll internationalisiert werden. Dazu muss <code>StoreGreeting.js</code> um Internationalisierungstexte erweitert werden.

Die Konstante <code>config</code> wird wie in <code>StoreSession.js</code> definiert.
In <code>config.i18n</code> sind Internationalisierungstexte enthalten. (Sie wurden in der Datei <code>main.js</code> separat geladen und eingefügt.) Die Datei <code>StoreGreeting.js</code> und die Komponenten, die diesen Store verwenden, müssen entsprechend erweitert werden.

Beachten Sie, dass <code>f_hello</code> gegenüber den früheren Implementierungen einen leeren Namen <code>''</code>
durch den Namen <code>dictionary.stranger</code> ersetzt. (Isabella, danke für den Tipp.)

Beachten Sie außerdem, dass <code>f_hello</code> früher <code>sayHello</code> hieß. Allerdings gibt es in <code>SectionHello.vue</code>
eine Funktion mit gleichem Namen, aber anderer Funktionalität. Um Verwechslungen zu vermeiden, habe ich die (Hilfs-)Funktion in <code>StoreGreeting.js</code> umbenannt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
phrases =
reactive(config.phrases),

dictionary =
reactive(config.dictionary),

name =
ref(''),

reset =
() => { name.value = '' },

sayHello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),
//p_name => phrases?.hello?.replace('$1', p_name === '' ? dictionary.stranger : p_name),

helloStranger =
computed(() => sayHello(dictionary.stranger)),

hello =
computed(() => sayHello(name.value))/*,

askName =
computed(() => dictionary.askName),

welcome =
computed(() => dictionary.welcome),

buttonReset =
computed(() => dictionary.buttonReset),

buttonSayHello =
computed(() => dictionary.buttonSayHello)
*/

return { name, helloStranger, hello, dictionary: readonly(dictionary), reset
/*, askName, welcome, buttonReset, buttonSayHello */
}
}
)

export default storeGreeting
</syntaxhighlight>

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

=== <code>SectionHello.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den <code>StoreGreeting</code> ersetzt werden.

<syntaxhighlight lang="html">


<script setup>
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary
</script>

<template>

<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>{{dictionary.welcome}}</p>
</section>
</template>

<style scoped>
@import '/css/component/section/SectionHello.css';
</style>
</syntaxhighlight>

=== <code>SectionForm.vue</code> ===

Die Datei <code>SectionHello.vue</code> muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello'
</script>

<template>

<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<FormTextfield :label="dictionary.askName"
v-model:text="greeting.name"
@enter="sayHello"
autofocus
:placeholder="dictionary.placeholderName"
/>
</div>
<div>
<FormButton :label="dictionary.buttonReset" type="reset" @click="reset"/>
<FormButton :label="dictionary.buttonSayHello" type="button" @click="sayHello"/>
</div>
</form>
</section>
</template>

<style scoped>
...
</style>
</syntaxhighlight>

== Dynamisches Laden von JSON-Dateien (v05a) ==

Aufgabe: Konfiguriere und internationalisiere die Anwendung mit Hilfe von dynamischen JSON-Dateien.
Dazu wird die Version v05 erweitert:

<syntaxhighlight lang="javascript">
git checkout v05 # Wechsle in den Branch v05
git checkout -b v05a # Klone v05 in einen neuen Branch v05a
</syntaxhighlight>

=== Internationalisierungsdateien ===

Der JSON-Ordner <code>src/json</code> wird in den Public-Bereich verschoben.
Er heißt nun <code>public/json</code>. JSON-Datein, die sich im Public-Bereich befinden müssen dynamisch zur Laufzeit der App geladen werden.

Er können jederzeit analog zu <code>i18n_de.json</code> und <code>i18n_en.json</code> I18n-Dateien für weitere Sprachen definiert werden.

=== <code>getJson.js</code> ===

Zunächst wird eine Service-Funktion definiert zum asynchronen Laden von JSON-Dateien.

<syntaxhighlight lang="javascript">
// src/service/getJson.js

/**
* @function
* @param { string } p_url - The URL of a JSON file zo be loaded
* @return { JSON } The content of the JSON file
* @throws { Error } If the file does not exists, an error is thrown
*/

async function getJson(p_url)
{ return fetch(p_url)
.then
(response =>
{ if (response.ok)
{ return response.json() }
else
{ throw new Error(`'${response.url}' not found`) }
}
)
}

export default getJson
</syntaxhighlight>

=== Globale Konfigurationsdatei ===

<syntaxhighlight lang="json">
// public/json/config.json

{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ const
config = await getJson('/json/config.json')

config.i18n =
await getJson(config.apiRoot.replace('$1', config.defaultLanguage))

app
.provide('config', config)
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

In der Datei <code>main.js</code> könnte man die I18n-Daten abhängig von der in der Datei <code>/json/config.json</code>
festgelegten Defaultsprache nachladen. Dieses muss mit einem zweiten <code>getJson</code>-Befehl erfolgen, der ausgeführt wird, '''nachdem'''
<code>config.json</code> vollständig geladen wurde.

Besser ist es allerdings einen allgemeineren Initialisierungsmechanismus zu etablieren, mit dem man anhängig von <code>config.json</code> verschiedene Daten vom Backend lädt, um die Anwendung zu initialisieren. Das machen wir später im nächsten Schritt.

=== <code>StoreSession.js</code> und <code>StoreGreeting.js</code> ===

Wir holen uns nun in den Stores <code>StoreSession.js</code> und <code>StoreGreeting.js</code>
die Konfigurations-Infomationen aus dem von der Main initialisierten Config-Onjekt.

Auf dieses können wir mit Hilde der Vue-Funktion <code>inject</code> zugreifen.

Der Iport-Befehl zum Laden der Konfigurationsdatei muss jeweils gelöscht werden.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

...
import { ref, reactive, inject } from 'vue'
...
{ const
config = inject('config'), // contains the app configuration object
...
...
</syntaxhighlight>

In der Datei <code>StoreGreeting.js</code> müssen wir noch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
durch
<code>config.i18n.phrases</code> und <code>config.dictionary</code>
ersetzen.

== Verallgemeinerung des Initialisierungsprozesses (v05b) ==

Aufgabe: Der Initialisierungsprozess soll so verallgemeinert werden, dass
jedes Modul (i. Allg. verschiedene Stores) eine Initialisierungsfunktion definieren kann,
die zum Zeitpunkt des App-Starts ausgeführt wird.

Als erste Anwendung erstellen wir dann einen Store <code>StoreI18N</code> der die Internationalisierungsdaten per JSON lädt.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05a # Wechsle in den Branch v05a
git checkout -b v05b # Klone v05a in einen neuen Branch v05b
</syntaxhighlight>

=== <code>StoreSession.js</code> ===

Der Initialisierungsprozess wird vom Session-Store verwaltet.
Er stellt zu diesem Zweck drei Funktionen zur Verfügung:

* <code>isInitialized</code>: Reaktive Variable, die <code>true</code> enthält, sobald der Initialisierungsprozess abgeschlossen wurde.
* <code>addInitializer</code>: Fügt eine Initialisierungsfunktion hinzu, die durch den Initialisierungsprozess ausgeführt werden soll.
* <code>initialize</code>: Startet den Initialisierungsprozess und setzt <code>isInitialized</code> zum Schluss auf <code>true</code>.

Die Konstante <code>initializers</code> enthält alle Initialisierungsfunktionen, die vor Start der Anwendung ausgeführt werden sollen.
Diese werden von anderen Stores mit Hilfe der Funktion <code>addInitializer</code> hinzugefügt. Die Datei <code>App.vue</code> aktiviert die entsprechenden Stores und führt danach die Funktion <code>initialize</code> aus. Mit Hilfe des reaktiven Konstante <code>isInitialized</code> erfährt die <code>App.vue</code>-Komponente, wann alle Stores initialisiert sind und kann dann vom Lade-Bildschirm auf den eigentlichen Startbildschirm umschalten.

<syntaxhighlight lang="javascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
...

initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { initAutofocus, section, setFocus, addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Und nun kann man das Ganze mal ausprobieren. Solange der Ladevorgang dauert,
wird ein Ladescreen angezeigt. Hier wird der Ladevorgang durch einen Zwei-Sekunde-Timer simuliert.

<syntaxhighlight lang="html">


<script setup>
import HelloWorld from '/component/HelloWorld.vue'
import storeSession from '/store/StoreSession'

const session = storeSession()

// fake initializer, in order to see the loading information for at least two seconds
session.addInitializer(p_resolve => setTimeout(p_resolve, 2000));

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<HelloWorld v-if="session.isInitialized"/>
</template>

...
</syntaxhighlight>

=== <code>StoreI18n.js</code> ===

<code>StoreI18n.js</code> übernimmt die I18n-Funktionalität von <code>StoreGreeting.js</code>.
Damit ist die Internationalisierung in einem anwendungsunabhängigen Modul verfügbar.
Das erhöht die Wiederverwendbarkeit dieses Stores.

Ergänzt wurden:
* <code>getI18n</code>: eine Funktion zum Laden der I18n-Daten von einem Backendsystem
* <code>changeLang</code>: eine Funktion zum asynchronen Ändern der Sprache.
* <code>initialize</code>: eine Funktion zum Initialisieren des Stores.

Die Funktion <code>initialize</code> lädt die I18n-Daten für die in der Config-Datei festgelegte
Defaultsprache. Diese Funktion wird im Session-Store als Initialisierungsfunktion registriert.

<syntaxhighlight lang="javascript">
// src/store/StoreI18n.js

import { defineStore } from 'pinia'
import { ref, reactive, inject } from 'vue'
import getJson from '/service/getJson'
import storeSession from '/store/StoreSession'

const
storeI18n =
defineStore
( 'i18n',

() =>
{ const
config =
inject('config'),

session =
storeSession(),

lang =
ref(null),

phrases /* Record<string, string> */ =
reactive({}),

dictionary /* Record<string, string> */=
reactive({}),

getI18n =
async p_lang =>
{ const
c_i18n_json =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value))
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? config.defaultLanguage;
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
},

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}

session.addInitializer(initialize);

return { lang, phrases, dictionary, changeLang }
}
)

export default storeI18n
</syntaxhighlight>

<code>changeLang</code> enthält einen kleinen Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen.

<syntaxhighlight lang="javascript">
document.getElementsByTagName('html')[0].lang = lang
</syntaxhighlight>

Damit wird im Document Tree der Datei "index.html" jeweils die aktuelle Sprache verwendet:

<syntaxhighlight lang="html">
<html lang="de">
<html lang="en">
</syntaxhighlight>

Man beachte, dass im Skript-Bereich des Moduls <code>App.vue</code> der Store mittels <code>storeI18n()</code>
erstmals aufgerufen muss, damit er initialisiert wird. Insbesondere wird dabei der Befehl <code>session.addInitializer(initialize)</code>
ausgeführt, das heißt die Initialisierungsfunktion zum Session-Store hinzugefügt.

Fügen Sie also den den Aufruf <code>storeI18n()</code> samt zugehörigem Import-Befehl in die
Datei <code>App.vue</code> ein. (Den Fake-Initializer können Sie deaktivieren, wenn Sie wollen. Er wird nicht mehr benötigt.)

=== <code>main.js</code> ===

Die Konfiguration in der Datei <code>main.js</code> kann nun vereinfacht werden.

<syntaxhighlight lang="javascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import App from './App.vue'

const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

=== <code>StoreGreeting.js</code> ===

Der Inhalt von <code>StoreGreeting.js</code> vereinfacht sich entsprechend.
Diese Datei nur noch Funktionen zur Verfügung, der in der Phrase <code>phrases.hello</code>
den String <code>$1</code> durch einen Namen ersetzt.

<syntaxhighlight lang="javascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { ref, computed, readonly } from 'vue'
import StoreI18n from './StoreI18n'

const storeGreeting =
defineStore
( 'greeting',
() =>
{ const
i18n =
StoreI18n(),

phrases =
i18n.phrases,

dictionary =
i18n.dictionary,

f_hello =
p_name => phrases.hello.replace('$1', p_name === '' ? dictionary.stranger : p_name),

...
</syntaxhighlight>

== Benutzung eines Backend-Servers (v05c) ==

Aufgabe: Die I18N-Daten sollen von einem Backend-Server gelesen werden.

Dazu wird die Version v05b erweitert:

<syntaxhighlight lang="javascript">
git checkout v05b
git checkout -b v05c
</syntaxhighlight>

Als ersten Backend-Server verwenden wir den JSON-Server, einen Fake-REST-Server.

<syntaxhighlight lang="javascript">
npm i -D json-server
</syntaxhighlight>

Um ihn mittels "npm run server" zu starten, wird folgendes Skript in die Datei package.json eingefügt.

<syntaxhighlight lang="json">
"server": "npx json-server --watch db.json --port 4000"
</syntaxhighlight>

=== <code>JSON-Server-Daten</code> ===

<syntaxhighlight lang="json">
// db.json

{ "v1":
[ { "id": "de",

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

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

{ "id": "en",

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

"dictionary":
{ "stranger": "Stranger",
"askName": "What's your name?",
"welcome": "Welcome to Web Programing!",
"buttonReset": "reset",
"buttonSayHello": "say hello"
}
}
]
}
</syntaxhighlight>

Testen Sie dann Ihren JSON-Server, indem Sie ihn starten und dann in der Datei <code>test.rest</code>
auf die jeweiligen Send-Request-Anweisungen klicken:

<syntaxhighlight lang="bash">

npm run server

// test.rest

###
GET http://localhost:4000/ HTTP/1.1

###
GET http://localhost:4000/v1/ HTTP/1.1

###
GET http://localhost:4000/v1/de HTTP/1.1

###
GET http://localhost:4000/v1/en HTTP/1.1
</syntaxhighlight>

=== Vue-Server als Proxy ===

<syntaxhighlight lang="javascript">
// vite.config.common.js

...

export default defineConfig
({...
resolve:
{ ...
},
server:
{ proxy:
{ '/api':
{ target: 'http://localhost:4000/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/v1')
}
}
},
})
</syntaxhighlight>

Starten Sie nun beide Server und testen Sie die Hello-World-Anwendung Browser:
<syntaxhighlight lang="bash">
npm run server # 1. Terminal
npm run dev # 2. Terminal

http://localhost:5173/api
http://localhost:5173/api/de
http://localhost:5173/api/en

http://localhost:4000/v1
http://localhost:4000/v1/de
http://localhost:4000/v1/en
</syntaxhighlight>

Die Vue-URLs funktionieren im Browser, aber im Gegensatz zu den JSON-Server-URLs nicht in <code>test.rest</code>, da Vue keine echte REST-API zur Verfügung stellt.

=== Zugriff auf den REST-Server ===

Um auf den neuen REST-Server zuzugreifen, reicht es,
die URL in der Datei <code>config.json</code> anzupassen:
<syntaxhighlight lang="bash">
// public/json/config.json

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Die Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code> werden nicht mehr benötigt.

== express_hello_world (v05d) ==

<syntaxhighlight lang="bash">
mkdir express_hello_world
cd express_hello_world
npm init -y
npm i express dotenv
npm i -D nodemon

# Dateien erstellen/bearbeiten
npm run server
</syntaxhighlight>

=== <code>package.json</code> ===

<syntaxhighlight lang="json">
// package.json

...
"scripts": {
"server": "nodemon -r dotenv/config src/server.js",
"prod": "node -r dotenv/config src/server.js"
},
"type": "module",
...
</syntaxhighlight>

=== <code>src/index.html</code> ===

<syntaxhighlight lang="html">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no"
>
<title>Express Hello World 01</title>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
</syntaxhighlight>

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
// src/server.js

import express from 'express'
import path from 'path'

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`
} = process.env,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))

c_app.get
('/',
(req, res) =>
{ //console.log(c_dirname);
res.sendFile('./index.html', {root: c_dirname});
}
);

c_app.listen(PORT);

console.log(`Running on ${SERVER}`);
</syntaxhighlight>

== Benutzung von Express als Backend-Server (v05d) ==

Erstellen Sie parallel zum Verzeichnis <code>frontend</code> einen Ordner <code>backend</code> und kopieren Sie die Dateien aus dem Ordner <code>express_hello_world</code> nach <code>backend</code>.

Installieren Sie außerdem das NPM-Modul <code>morgan</code>.

Kopieren Sie '''das Array''' aus der Datei <code>db.json</code> der Version v05a
in die Datei <code>src/db.json</code> und ersetzen Sie in dieser Datei zweimal <code>"id"</code> durch <code>"lang</code>. Den Inhalt dieser Datei geben wir nun mit Hilfe eines Express-Servers aus.

=== <code>src/server.js</code> ===

<syntaxhighlight lang="javascript">
/**
* @author Wolfgang Kowarschick <kowa@hs-augsburg.de>
* @copyright 2016-2025
* @license MIT
*/

import express from 'express'
import path from 'path'
import morgan from 'morgan'

let db;

const
{ PORT = 4000,
SERVER = `http://localhost:${PORT}`,
DB = `${SERVER}/db.json`
} = process.env ,
c_app = express(),
c_dirname = path.resolve(path.dirname(process.argv[1]))
;

// Middleware for debugging
c_app.use(morgan("combined"));

/*
c_app.use
( function (req, res, next)
{ console.log(req);
next();
}
);
*/

c_app
.get
( '/',
(req, res) =>
{ res.sendFile('./index.html', {root: c_dirname }); }
)
.get
( '/db.json',
(req, res) =>
{ res.sendFile('./db.json', {root: c_dirname }); }
)
.get
( '/v1',
(req, res) => res.json(db)
)
.get
( '/v1/:lang',
(req, res) =>
{ //console.log(req.params.lang);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];
res.json(l_i18n);
}
)
.get
( '/v1/:lang/:type',
(req, res) =>
{ //console.log(req.params.lang, req.params.type);
const l_i18n = db.filter(i18n => i18n.lang === req.params.lang)[0];

res.json(l_i18n[req.params.type]);
}
);

async function init()
{ c_app.listen(PORT);
db = (await fetch(DB).then(response => response.json())).v1
console.log(`Server is tunning on ${SERVER}`)
}

init()
</syntaxhighlight>

Testen Sie diese Datei mit Hilfe der Datei <code>test.rest</code> aus dem Frontend. Erweitern Sie die Test-Datei sinnvoll.

== Benutzung von Strapi als Backend-Servers (v05e) ==

Erstellen Sie im Root-Verzeichnis Ihrer App zunächst die Datei <code>create-dotenv.sh</code>:

<syntaxhighlight lang="bash">
#!/usr/bin/env bash

declare -A strapi=(
["dir"]="backend_strapi"
["HOST"]=127.0.0.1
["PORT"]=1337
["APP_KEYS"]="$(openssl rand -hex 64),$(openssl rand -hex 64)"
["API_TOKEN_SALT"]=$(openssl rand -hex 64)
["ADMIN_JWT_SECRET"]=$(openssl rand -hex 64)
["TRANSFER_TOKEN_SALT"]=$(openssl rand -hex 64)
["JWT_SECRET"]=$(openssl rand -hex 64)
)

create_env_variables(){
for env in $1
do
declare -n dict=$env
directory=${dict[dir]}
cd $directory
echo "Creating $env .env in $directory"
[ ! -e .env ] || rm .env
for var in "${!dict[@]}"
do
[ "$var" != "dir" ] && echo "$var=${dict[$var]}" >> .env
done
unset -n dict
cd - >/dev/null
done
}

create_env_variables 'strapi'

echo "------------> $0 has finished successfully"
</syntaxhighlight>

Installieren Sie Strapi gemäß den Vorgaben aus der Vorlesung (Miro) und
führen Sie dann den Befehl <code>./create-dotenv.sh</code> in der Konsole aus.
Damit wird eine Dummy-Datei <code>strapi/.env</code> erzeugt. Diesen Befehl müssen Sie jedesmal
ausführen, wenn Sie die Strapi-App aus dem Repository laden, da die Datei <code>.env</code>
nicht im Repository gespeichert wird. Die generierte Datei enthält Zufallszahlen,
die für den sicheren Datenaustausch mit dem Frontend benötigt werden.

Erstellen Sie nun den Inhalt der Strapi-Datenbank gemäß den Vorgaben aus der Vorlesung (Miro).

Um darauf vom Frontend aus zuzugreifen, müssen Sie drei Dateien anpassen:

'''Konfiguration'''
<syntaxhighlight lang="javascript">
// /public/json/config.json: Api-Root

{ "startSection": "form",
"XapiRoot": "/json/i18n_$1.json",
"apiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

'''Proxy'''
<syntaxhighlight lang="javascript">
// /vite.config.js: Port 1337 und Rewrite-Regel

...

server:
{ proxy:
{ '/api':
{ target: 'http://localhost:1337/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\//, '/api/i18ns?filters[lang][$eq]=')
}
}
},
</syntaxhighlight>

'''Datenextraktion in <code>StoreI18n.js</code>'''
<syntaxhighlight lang="javascript">
...
getI18n =
async p_lang =>
{ const
c_api_data =
await getJson(config.apiRoot.replace('$1', p_lang ?? lang.value)),
c_i18n_json =
c_api_data.data[0];
Object.assign(phrases, c_i18n_json.phrases);
Object.assign(dictionary, c_i18n_json.dictionary);
},
...
</syntaxhighlight>

== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|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==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 06

2025-05-12T15:32:58Z

Kowa: /* Hello World Vue 06c */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v06</code>, <code>... v06a</code>, <code>... v06b</code>

== Anwendungsfälle (Use Cases) ==
Die Version des [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_05|fünften Teils des Vue-Tutoriums]]
wird so angepasst, dass die Sprache zur Laufzeit geändert werden kann.

Zunächst wird jedoch eine Navigationskomponente eingeführt. Dies hat den Zweck, das Routing an einem Beispiel zu erklären.

== 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v05d # Wechsle in den Branch v05d mit Express-Server
git checkout -b v06 # Klone v05d in einen neuen Branch v06
rm -rf express_Hello_world
cd frontend
npm i
npm i vue-router
</syntaxhighlight>

In der Datei <code>public/json/config.jso</code>
aktivieren wir wieder den Zugriff auf die lokalen JSON-Dateien.
Den Zugriff auf den Backend-Server, um die Bilder von dort zu holen, behandeln wir später.

<syntaxhighlight lang="json">
{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Fügen Sie außerdem in die Datei <code>vite.config.common.js</code> zwei geeignete Aliase für
<code>view</code> und </code>router</code> ein.

=== Views ===

Anstelle von Sections werden im Frontend Views verwendet.
Dazu werden die Section-Komponenten in den Ordner View verschoben und umbenannt:

<syntaxhighlight lang="bash">
src/view/ViewHello.vue
src/view/ViewHome.vue // an Stelle von ViewForm.vue

src/view/ViewError404.vue // neu
</syntaxhighlight>

Die CSS-Dateien müssen natürlich auch entsprechend verschoben und abgepasst werden.

ViewForm.vue wird in ViewHome.vue unbenannt,
da diese Seite als Startseite verwendet wird.

Zusätzlich wird eine Seite ViewError404.vue angelegt, die immer dann ausgeliefert wird, wenn der Benutzer auf eine URL zugreift, der keine View-Datei zugeordnet ist.

Die CSS-Dateien sollten analog umbenannt und unter den neuen Namen importiert werden. Für <code>ViewError404.vue</code> muss natürlich auch eine CSS-Datei angelegt werden. Diese verweist allerdings nur auf <code>View.css</code>.

<syntaxhighlight lang="html">


<script setup>
import router from '/router'
import storeI18n from '/store/StoreI18n'

const phrases = storeI18n().phrases
</script>

<template>
<h1>404</h1>
<p>{{phrases.pageNotFound.replace('$1', router.currentRoute.value.path)}}</p>
</template>

<style scoped>
@import '/css/view/ViewError404.css';
</style>
</syntaxhighlight>

=== Router-Plugin ===

Um mit Vue Multipage-Anwendungen realisieren zu können, benötigt man einRouter-Plugin.
Dieses muss zunächst händisch auf Basis von <code>vue-router</code> implementiert werden.

<syntaxhighlight lang="ecmascript">
// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import ViewHome from '/view/ViewHome.vue'

const
routes =
[ { path: '/',
name: 'home',
component: ViewHome,
},
{ path: '/hello',
name: 'hello',
component: () => import('/view/ViewHello.vue'),
},
{ path: '/:pathMatch(.*)',
component: () => import('/view/ViewError404.vue'),
}
],

router =
createRouter({ history: createWebHistory(), routes })

export default router
</syntaxhighlight>

Nun muss man das neu erstellte Plugin in die App integrieren.

<syntaxhighlight lang="ecmascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import router from './router' // './router/index.js'
import App from './App.vue'
const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.use(router)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

=== index.html ===

Da das <code>main</code>-Tag nun innerhalb von <code>App.vue</code> verwendet werden soll,
wird es aus der Datei <code>index.html</code> entfernt.

<syntaxhighlight lang="html">
...
<body id="app">
</body>
...
</syntaxhighlight>

=== App.vue ===

Nun kann in die App eine Navigation eingebaut werden.

<syntaxhighlight lang="html">


<script setup>
import AppNav from '/component/AppNav.vue'
import storeSession from '/store/StoreSession'
import storeI18n from '/store/StoreI18n'

const session = storeSession()

storeI18n();

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<AppNav v-if="session.isInitialized"/>
<main v-if="session.isInitialized">
<router-view/>
</main>
</template>

<style>
@import '/css/body.css';
</style>

</syntaxhighlight>

Die zugehörige Navigationskomponente muss auch noch implementiert werden.

<syntaxhighlight lang="html">


<script setup>
</script>

<template>
<nav>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/hello">Hello</router-link></li>
</ul>
</nav>
</template>

<style scoped>
@import '/css/component/AppNav.css';
</style>
</syntaxhighlight>

<syntaxhighlight>
/* src/css/_config.css */
...
--background-color: #C5EFFC;
--link-color: #0027d4;
...
--nav-dist: 0.5em;

/* src/css/AppNav.css */

@import 'config.css';

nav
{ top: 0;
width: 100%;
position: fixed;

ul
{ list-style-type: none;
margin: 0 var(--nav-dist);
padding: 0;

li
{ display: inline;
a { padding: 0 var(--nav-dist); }
}

a
{ text-decoration: none;
color: var(--link-color);
font-weight: bold;
}

a:hover, .router-link-exact-active
{ text-decoration: underline;
color: var(--link-color);
font-weight: bold;
}
}

label, input
{ margin: 0;
}
}
</syntaxhighlight>

=== Navigation ===
Die Navigation muss in allen Komponenten, in den Seiten gewechselt werden, angepasst werden.

Das ist in der App.vue der Fall (siehe zuvor) sowie in der ViewHome.vue.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'
import router from '/router'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
sayHello = () => router.push('/hello')
</script>
</syntaxhighlight>

Die Section-Verwaltung der ehemaligen Single-Page-Anwendung kann und sollte gelöscht werden:
* <code>config.js</code>
* <code>storeSession.js</code>
* <code>ViewHome.vue</code>
* <code>ViewHello.vue</code>

Die Datei <code>HelloWorld.vue</code> kann (samt CSS-Datei) ganz gelöscht werden.

== Hello World Vue 06a ==

Aufgabe: Die Ausgabesprache soll vom Benutzer zur Laufzeit geändert werden können. Die Sprachen sollen durch Bilder (Flaggen) symbolisiert werden.

<syntaxhighlight lang="bash">
git checkout v06 # Wechsle in den Branch v06
git checkout -b v06a # Klone v06 in einen neuen Branch v06a
</syntaxhighlight>

=== <code>config.json</code> ===

Um die vorhandenen Sprachen durchblättern zu können, wird ein einfacher Automat verwendet.

<syntaxhighlight lang="json">
// src/public/json/config.json

{ "apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "en",
"nextLanguage": {"de": "en", "en": "de"}
}
</syntaxhighlight>

=== StoreI18n.js: Integration von nextLanguage ===

Der Automat <code>nextLanguage</code> wird in den StoreI18n integriert. Wenn die Methode <code>changeLang</code> ohne Argument aufgerufen wird, soll der Automat die aktuelle Sprache <code>lang</code> durch die Nachfolgersprache ersetzen.
Dazu sollte zunächst die zunächst Konstante <code>nextLanguage</code> definiert werden.

<syntaxhighlight lang="ecmascript">
...
lang =
ref(null),

nextLanguage =
reactive(config.nextLanguage),

...
</syntaxhighlight>

Diese neue Konstante <code>nextLanguage</code> wird verwendet, um die Sprache mittels <code>changeLang</code> zu definieren, sofern
kein Argument übergeben wurde.

Die Funktion <code>changeLang</code> soll bei einer Änderung der Sprache sowohl die notwendige JSON-Sprach-Datei laden als auch die in der HTML-Datei <code>index.html</code> ausgewiesene Sprache anpassen:

<syntaxhighlight lang="ecmascript">
// /src/store/storeI18N.js

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? nextLanguage[lang.value];
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
}

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}
</syntaxhighlight>

=== Bilder von Flaggen ===

Zur Visualisierung der gewählten Sprache werden Bilder von Flaggen eingesetzt.
Wir kopieren die Bilder im SVG-Format aus dem NPM-Paket "https://github.com/lipis/flag-icons".

<syntaxhighlight lang="bash">
npm i -D flag-icons
</syntaxhighlight>

Im Ordner "node_modules/flag-icons/flags/4x3" finden Sie Flaggen zahlreicher Länder im 4-zu-3-Format.
Kopieren Sie die Flaggen der Länder Deutschland und Großbritanien in den Ordner <code>public/img</code>.

In die Datei config.js wird der Pfad, unter dem die Bilder zu finden sind, eingefügt.

<syntaxhighlight lang="ecmascript">
// public/config.js
...
"apiRoot": "/json/i18n_$1.json",
"imgPath": "/img/$1.svg",
"XapiRoot": "/api/$1"
...
</syntaxhighlight>

=== <code>FormButtonIcon</code> ===

Eine neue Komponente wird benötigt: FormButtonIcon
Dabei handelt es sich um einen Button, der ein Icon anzeigt.
Das Bild kann zur Laufzeit geändert werden.

<syntaxhighlight lang="ecmascript">
<script setup>
import { computed, inject } from 'vue'

const
props = defineProps
({ image: { type: String },
width: { type: String, default: '3em'},
}),
config = inject('config'),
emit = defineEmits(['click']),
click = () => emit('click'),
require = v_url => import.meta.url == null
? v_url
: new URL(v_url, import.meta.url).href,
imgPath = config.imgPath,
buttonImage = computed(() => require(imgPath.replace('$1', props.image)))
</script>

<template>
<input type="image" :src="buttonImage" :style="{width}" @click="click" />
</template>

<style scoped>
@import '/css/component/form/FormButtonIcon.css';
</style>
</syntaxhighlight>

<syntaxhighlight lang="ecmascript">
/* src/css/component/FormButtonIcon.css */

@import 'FormButton.css';

input
{ width: $button_icon_width !important;
margin-left: $nav-dist !important;
}
</syntaxhighlight>

Fügen Sie in <code>src/css/_config.css</code> noch

<syntaxhighlight lang="ecmascript">
--button-icon-width: 1em;
</syntaxhighlight>

ein.

=== Erweiterung von <code>AppNav.vue</code> ===

Der Sprachwahl-Button muss noch in die Navigation eingebaut werden. In diesem Rahmen wird auch gleich die Navigation etwas internationalisiert.

Ergänzen Sie in den Dictionaries der Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code>
folgende Attribute:

<syntaxhighlight lang="html">
... ...,
"navHome": "Start",
"navHello": "Hallo"
</syntaxhighlight>

bzw.

<syntaxhighlight lang="html">
... ...,
"navHome": "Home",
"navHello": "Hello"
</syntaxhighlight>

Damit können Sie das Navigationsmenü internationalisieren (einschließlich Auswahl der Sprache per Button).

<syntaxhighlight lang="html">


<script setup>
import FormButtonIcon from '/component/form/FormButtonIcon.vue'
import storeI18n from '/store/StoreI18n'

const i18n = storeI18n()
</script>

<template>
<nav>
<ul>
<li><router-link to="/">{{i18n.dictionary.navHome}}</router-link></li>
<li><router-link to="/hello">{{i18n.dictionary.navHello}}</router-link></li>
<li><FormButtonIcon :image="i18n.lang" @click="i18n.changeLang()"/></li>
</ul>
</nav>
</template>

<style scoped>
@import '/css/component/AppNav.css';
</style>
</syntaxhighlight>

== Hello World Vue 06b ==

Aufgabe: Sorgen Sie dafür, dass <code>autofocus</code> korrekt funktioniert, insbesondere beim Seitenwechsel via Navigation.

Es ist sinnvoll, die Funktionalität in ein eigenes Store-Modul auszulagern, damit
das Session-Modul in Anwendungen, die keine Autofocus-Funktionalität benötigen, keinen
überflüssigen Code enthalten (Bertrand Meyer: Jedes Modul erfüllt genau eine Aufgabe).
Das Session-Modul wird entsprechend abgespeckt.

Der Autofocus-Store soll zwei Funktionen bieten:
* <code>setAutofocusId</code>: Speichert die ID des Autofokus-Elements der aktuellen Seite (Default: <code>null</code>).
* <code>setFocus</code>: Setzt den Focus auf die aktuelle Autofokus-Komponente (sofern die ID ungleich <code>null</code> ist). Insbesondere für das Window-Ereignis <code>'visibilitychange'</code> soll diese Funktion
aufgerufen werden.

<syntaxhighlight lang="ecmascript">
// /src/store/StoreAutofocus.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

const storeAutofocus =
defineStore
( 'autofocus', // must be unique

() =>
{ const
c_autofocus_id = ref(),
setFocus = () => document.getElementById(c_autofocus_id.value)?.focus(),
setAutofocusId = p_autofocus_id => { c_autofocus_id.value = p_autofocus_id;
setFocus();
}

window.addEventListener('visibilitychange', setFocus);

return { setAutofocusId, setFocus }
}
)

export default storeAutofocus
</syntaxhighlight>

<syntaxhighlight lang="ecmascript">
// /src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Um die aktuelle ID speichern zu können, muss das zugehörige Textfeld die Information, welche ID es hat,
per <code>emit</code> an die Elternkomponente ausgeben.

<syntaxhighlight lang="html">
// /src/component/form/FormTextfield.vue

...
const
props = defineProps
({ id: { type: String, default: '' },
...
})
...
emit = defineEmits(['update:id', 'update:text', 'enter']),
...
emit('id', inputId);
...
</syntaxhighlight>

Nun müssen die Views, die ein Autofokus-Feld beinhalten, dieses an den Session-Store melden,
sobald sie per Routing aktiviert werden. Das ist in unserem Fall nur die <code>ViewHome</code>.
Ein Watcher sorgt dafür, dass die ID des Textfeldes im Session-Objekt gespeichert wird, sobald
das zugehörige Textfeld die ID per <code>emit</code> meldet.

<syntaxhighlight lang="html">
// /src/view/ViewHome.vue

<script setup>
import { ref, watch } from 'vue'
...
import storeAutofocus from '/store/StoreAutofocus'
...

const
id = ref(null),
autofocus = storeAutofocus(),
...

watch( id, () => autofocus.setAutofocusId(id.value) )
</script>

<template>
...
<FormTextfield @id="setId"
...
>
...
</template>
...
</syntaxhighlight>

Zum Schluss muss im Router noch die Autofocus-ID bei jedem Seitenwechsel gelöscht werden.

<syntaxhighlight lang="ecmascript">
// /src/router/index.js

...
import storeAutofocus from '/store/StoreAutofocus'

const
...

router.beforeEach(() => storeAutofocus().setAutofocusId())

export default router
</syntaxhighlight>

Wichtig ist hier, dass man keine Konstante <code>session</code> definieren kann, da die Stores erst nach dem Router-Objekt erzeugt werden:

<syntaxhighlight lang="ecmascript">
// /src/router/index.js
...
import storeAutofocus from '/store/StoreAutofocus'

const
autofocus = storeAutofocus(), // FUNKTIONIERT NICHT
...
router.beforeEach(() => autofocus.setAutofocusId())
...
</syntaxhighlight>

Der Funktionsaufruf <code>storeSession()</code> darf daher erst in der Callback-Funktion von
<code>router.beforeEach</code> aufgerufen werden. Zu diesem Zeitpunkt sind die Stores und der Router auf jeden Fall schon initialisiert worden.

Zum Abschluss sollten Sie noch versuchen, <code>/src/component/AppNav.vue</code> so abzuändern,
dass ein Klick auf die Fahne nicht nur die Sprache ändert, sonden auch noch den Focus auf das Startfeld setzt (such wenn dieses Feature vermutlich eher kontraproduktiv ist).

== Hello World Vue 06c ==

Aufgabe: Sorgen Sie dafür, dass die unterstützten Sprachen und der Sprach-Automat vom Backend
geladen wird.

<syntaxhighlight lang="bash">
git checkout v06b # Wechsle in den Branch v06b
git checkout -b v06c # Klone v06b in einen neuen Branch v06c
</syntaxhighlight>

Splitten Sie die Config-Datei zunächst in zwei Teile: "config.json" wird aus dem Public-Ordner geladen.
"config_backend.json" wird normalerweise vom Backend geladen, kann aber zum Entwicklungszeitpunkt auch vom Public-Ordner geladen werden, wenn das Backend noch nicht stabil läuft.

<syntaxhighlight lang="json">
// src/public/json/config.json

{ "configBackend": "/json/config_backend.json",
"apiRoot": "/json/i18n_$1.json",
"imgPath": "/img/$1.svg",

"XapiRoot": "/api/$1"
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/public/json/config_backend.json

{ "languages": ["de", "en"],
"nextLanguage": {"de": "en", "en": "de"}
}
</syntaxhighlight>

Das Backend teilt dem Frontend mit, welche Sprachen unterstützt werden.

=== <code>main.js</code> ===

Laden Sie, nachdem Sie "config" asynchron geladen haben, "configBackend" asynchron und kopieren Sie den Inhalt dieses Objekts in das Config-Objekt. Den Pfad von "configBackend" finden Sie unter "config.configBackend".

<syntaxhighlight lang="ecmascript">
...
const
...
init = async () =>
{ const
config = await getJson('/json/config.json'),
configBackend = await getJson(config.configBackend)

Object.assign(config, configBackend)

app
.provide('config', config)
.use(pinia)
.use(router)
.mount('#app') // app is shown to the user
}
</syntaxhighlight>

Nun gibt es im Konfigurationsobjekt keine Defaultsprache mehr.
Im I18N-Store wird daher ab sofort die erste Sprache in der Liste der
unterstützten Sprachen als Defaultsprache genutzt.

<syntaxhighlight lang="ecmascript">
// /src/store/storeI18N.js

initialize =
async resolve =>
{ await changeLang(config.languages[0]);
resolve();
}
</syntaxhighlight>

== Hello World Vue 06d ==

Aufgabe: Defaultmäßig soll dem Benutzer die App in der Sprache angezeigt werden, die der Benutzer
im Browser voreingestellt hat. Sollte die voreingestellte Sprache nicht unterstützt werden, wird die App in der Defaultsprache angezeigt.

Legen Sie zunächst wieder einen neuen Branch an.

<syntaxhighlight lang="bash">
git checkout v06c # Wechsle in den Branch v06c
git checkout -b v06d # Klone v06c in einen neuen Branch v06d
</syntaxhighlight>

Das Vorgehen ist im Prinzip ganz einfach.

Mittels des NPM-Packets "navigator-languages" ermittelt man die vom Browser unterstützten
Sprachen. In der Konfigurationsdatei listet man die Sprachen auf, die von der App unterstützt werden.
Besser wäre es natürlich, diese Liste vom Backend zu laden, damit die App mit bekommt, wenn neue
Sprachen zur Verfügung stehen. Am aufwändigsten ist es, diese beiden Array zu matchen.

Mögliche Erweiterung: Auch die HTML-Pfade sollten internationalisiert werden.

<syntaxhighlight lang="bash">
npm i navigator-languages // unterstützt mehrere Browservarianten
</syntaxhighlight>

=== Language Matching ===

Das Language Matching erfolgt zweimal mit zwei verschachtelten Schleifen.
Zunächst wird überprüft, ob es exakte Übereinstimmungen gibt. Sollte das nicht der Fall sein, wird überprüft, ob es Matches zwischen den ersten beiden Buchstaben gibt ('de', 'de-AT', 'de-DE' matchen in diesem Schritt alle miteinander).

<syntaxhighlight lang="ecmascript">
// src/util/chooseLanguage.js

import navigatorLanguages from 'navigator-languages'

const
/**
* @function
* @param { Array<string> } p_langs_available
* An array of language strings containing the languages
* supported by the app
* @param { Array<string> } [p_langs_required = navigatorLanguages()]
* An array of language strings containing the languages
* requested by the client
* @return { string }
* The language to be displayed
*/
chooseLanguage =
(p_langs_available, p_langs_required = navigatorLanguages()) =>
{ let
lang = p_langs_available[0],
i=0, j=0, n=p_langs_required.length, m=p_langs_available.length

outer:
{ while (i<n)
{ const c_lang_required = p_langs_required[i]
while (j<m)
{ const c_lang_availabe = p_langs_available[j]
if (c_lang_availabe === c_lang_required)
// both languages match perfectly
{ lang = c_lang_availabe;
break outer;
}
j++
}
i++
}
i=0, j=0
while (i<n)
{ const c_lang_required = p_langs_required[i]
while (j<m)
{ const c_lang_availabe = p_langs_available[j]
if (c_lang_availabe.substring(0,2) === c_lang_required.substring(0,2))
// main part of the languages match
{ lang = c_lang_availabe;
break outer;
}
j++
}
i++
}
}

return lang
}

export default chooseLanguage
</syntaxhighlight>

=== <code>src/store/StoreI18n</code> ===

Im I18N-Store wird nun beim Initialisieren nicht nicht mehr eine Defaultspache geladen, sondern
die Sprache, die möglichst nah an den Wünschen des im Browser des Benutzers gespeicherten Sprachwünschen liegt.

Beachten Sie, dass Sie in die Datei <code>vite.config.common.js</code> einen geeigneten Alias für den
<code>util</code>-Pfad definieren müssen, um <code>'/util/chooseLanguage'</code> an Stelle von
<code>'@/util/chooseLanguage'</code> schreiben zu können.

<syntaxhighlight lang="ecmascript">
...
import chooseLanguage from '/util/chooseLanguage'
...
() =>
{ const
...
initialize =
async resolve =>
{ await changeLang(chooseLanguage(config.languages));
resolve();
}
...
...
</syntaxhighlight>



==Quellen==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 06

2025-05-12T15:32:26Z

Kowa: /* Bilder von Flaggen */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v06</code>, <code>... v06a</code>, <code>... v06b</code>

== Anwendungsfälle (Use Cases) ==
Die Version des [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_05|fünften Teils des Vue-Tutoriums]]
wird so angepasst, dass die Sprache zur Laufzeit geändert werden kann.

Zunächst wird jedoch eine Navigationskomponente eingeführt. Dies hat den Zweck, das Routing an einem Beispiel zu erklären.

== 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 <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<syntaxhighlight lang="bash">
git checkout v05d # Wechsle in den Branch v05d mit Express-Server
git checkout -b v06 # Klone v05d in einen neuen Branch v06
rm -rf express_Hello_world
cd frontend
npm i
npm i vue-router
</syntaxhighlight>

In der Datei <code>public/json/config.jso</code>
aktivieren wir wieder den Zugriff auf die lokalen JSON-Dateien.
Den Zugriff auf den Backend-Server, um die Bilder von dort zu holen, behandeln wir später.

<syntaxhighlight lang="json">
{ "startSection": "form",
"apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "de"
}
</syntaxhighlight>

Fügen Sie außerdem in die Datei <code>vite.config.common.js</code> zwei geeignete Aliase für
<code>view</code> und </code>router</code> ein.

=== Views ===

Anstelle von Sections werden im Frontend Views verwendet.
Dazu werden die Section-Komponenten in den Ordner View verschoben und umbenannt:

<syntaxhighlight lang="bash">
src/view/ViewHello.vue
src/view/ViewHome.vue // an Stelle von ViewForm.vue

src/view/ViewError404.vue // neu
</syntaxhighlight>

Die CSS-Dateien müssen natürlich auch entsprechend verschoben und abgepasst werden.

ViewForm.vue wird in ViewHome.vue unbenannt,
da diese Seite als Startseite verwendet wird.

Zusätzlich wird eine Seite ViewError404.vue angelegt, die immer dann ausgeliefert wird, wenn der Benutzer auf eine URL zugreift, der keine View-Datei zugeordnet ist.

Die CSS-Dateien sollten analog umbenannt und unter den neuen Namen importiert werden. Für <code>ViewError404.vue</code> muss natürlich auch eine CSS-Datei angelegt werden. Diese verweist allerdings nur auf <code>View.css</code>.

<syntaxhighlight lang="html">


<script setup>
import router from '/router'
import storeI18n from '/store/StoreI18n'

const phrases = storeI18n().phrases
</script>

<template>
<h1>404</h1>
<p>{{phrases.pageNotFound.replace('$1', router.currentRoute.value.path)}}</p>
</template>

<style scoped>
@import '/css/view/ViewError404.css';
</style>
</syntaxhighlight>

=== Router-Plugin ===

Um mit Vue Multipage-Anwendungen realisieren zu können, benötigt man einRouter-Plugin.
Dieses muss zunächst händisch auf Basis von <code>vue-router</code> implementiert werden.

<syntaxhighlight lang="ecmascript">
// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import ViewHome from '/view/ViewHome.vue'

const
routes =
[ { path: '/',
name: 'home',
component: ViewHome,
},
{ path: '/hello',
name: 'hello',
component: () => import('/view/ViewHello.vue'),
},
{ path: '/:pathMatch(.*)',
component: () => import('/view/ViewError404.vue'),
}
],

router =
createRouter({ history: createWebHistory(), routes })

export default router
</syntaxhighlight>

Nun muss man das neu erstellte Plugin in die App integrieren.

<syntaxhighlight lang="ecmascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import getJson from '/service/getJson'
import router from './router' // './router/index.js'
import App from './App.vue'
const
pinia = createPinia(),
app = createApp(App),
init = async () =>
{ app
.provide('config', await getJson('/json/config.json'))
.use(pinia)
.use(router)
.mount('#app') // app is shown to the user
}

window.addEventListener('load', init)
</syntaxhighlight>

=== index.html ===

Da das <code>main</code>-Tag nun innerhalb von <code>App.vue</code> verwendet werden soll,
wird es aus der Datei <code>index.html</code> entfernt.

<syntaxhighlight lang="html">
...
<body id="app">
</body>
...
</syntaxhighlight>

=== App.vue ===

Nun kann in die App eine Navigation eingebaut werden.

<syntaxhighlight lang="html">


<script setup>
import AppNav from '/component/AppNav.vue'
import storeSession from '/store/StoreSession'
import storeI18n from '/store/StoreI18n'

const session = storeSession()

storeI18n();

session.initialize();
</script>

<template>
<p v-if="!session.isInitialized">Loading ...</p>
<AppNav v-if="session.isInitialized"/>
<main v-if="session.isInitialized">
<router-view/>
</main>
</template>

<style>
@import '/css/body.css';
</style>

</syntaxhighlight>

Die zugehörige Navigationskomponente muss auch noch implementiert werden.

<syntaxhighlight lang="html">


<script setup>
</script>

<template>
<nav>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/hello">Hello</router-link></li>
</ul>
</nav>
</template>

<style scoped>
@import '/css/component/AppNav.css';
</style>
</syntaxhighlight>

<syntaxhighlight>
/* src/css/_config.css */
...
--background-color: #C5EFFC;
--link-color: #0027d4;
...
--nav-dist: 0.5em;

/* src/css/AppNav.css */

@import 'config.css';

nav
{ top: 0;
width: 100%;
position: fixed;

ul
{ list-style-type: none;
margin: 0 var(--nav-dist);
padding: 0;

li
{ display: inline;
a { padding: 0 var(--nav-dist); }
}

a
{ text-decoration: none;
color: var(--link-color);
font-weight: bold;
}

a:hover, .router-link-exact-active
{ text-decoration: underline;
color: var(--link-color);
font-weight: bold;
}
}

label, input
{ margin: 0;
}
}
</syntaxhighlight>

=== Navigation ===
Die Navigation muss in allen Komponenten, in den Seiten gewechselt werden, angepasst werden.

Das ist in der App.vue der Fall (siehe zuvor) sowie in der ViewHome.vue.

<syntaxhighlight lang="html">


<script setup>
import FormButton from '/component/form/FormButton.vue'
import FormTextfield from '/component/form/FormTextfield.vue'

import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'
import router from '/router'

const
session = storeSession(),
greeting = storeGreeting(),
dictionary = greeting.dictionary,
sayHello = () => router.push('/hello')
</script>
</syntaxhighlight>

Die Section-Verwaltung der ehemaligen Single-Page-Anwendung kann und sollte gelöscht werden:
* <code>config.js</code>
* <code>storeSession.js</code>
* <code>ViewHome.vue</code>
* <code>ViewHello.vue</code>

Die Datei <code>HelloWorld.vue</code> kann (samt CSS-Datei) ganz gelöscht werden.

== Hello World Vue 06a ==

Aufgabe: Die Ausgabesprache soll vom Benutzer zur Laufzeit geändert werden können. Die Sprachen sollen durch Bilder (Flaggen) symbolisiert werden.

<syntaxhighlight lang="bash">
git checkout v06 # Wechsle in den Branch v06
git checkout -b v06a # Klone v06 in einen neuen Branch v06a
</syntaxhighlight>

=== <code>config.json</code> ===

Um die vorhandenen Sprachen durchblättern zu können, wird ein einfacher Automat verwendet.

<syntaxhighlight lang="json">
// src/public/json/config.json

{ "apiRoot": "/json/i18n_$1.json",
"XapiRoot": "/api/$1",
"defaultLanguage": "en",
"nextLanguage": {"de": "en", "en": "de"}
}
</syntaxhighlight>

=== StoreI18n.js: Integration von nextLanguage ===

Der Automat <code>nextLanguage</code> wird in den StoreI18n integriert. Wenn die Methode <code>changeLang</code> ohne Argument aufgerufen wird, soll der Automat die aktuelle Sprache <code>lang</code> durch die Nachfolgersprache ersetzen.
Dazu sollte zunächst die zunächst Konstante <code>nextLanguage</code> definiert werden.

<syntaxhighlight lang="ecmascript">
...
lang =
ref(null),

nextLanguage =
reactive(config.nextLanguage),

...
</syntaxhighlight>

Diese neue Konstante <code>nextLanguage</code> wird verwendet, um die Sprache mittels <code>changeLang</code> zu definieren, sofern
kein Argument übergeben wurde.

Die Funktion <code>changeLang</code> soll bei einer Änderung der Sprache sowohl die notwendige JSON-Sprach-Datei laden als auch die in der HTML-Datei <code>index.html</code> ausgewiesene Sprache anpassen:

<syntaxhighlight lang="ecmascript">
// /src/store/storeI18N.js

changeLang =
async (p_lang = null) =>
{ lang.value = p_lang ?? nextLanguage[lang.value];
await getI18n(lang.value);
document.getElementsByTagName('html')[0].lang = lang.value;
}

initialize =
async resolve =>
{ await changeLang(config.defaultLanguage);
resolve();
}
</syntaxhighlight>

=== Bilder von Flaggen ===

Zur Visualisierung der gewählten Sprache werden Bilder von Flaggen eingesetzt.
Wir kopieren die Bilder im SVG-Format aus dem NPM-Paket "https://github.com/lipis/flag-icons".

<syntaxhighlight lang="bash">
npm i -D flag-icons
</syntaxhighlight>

Im Ordner "node_modules/flag-icons/flags/4x3" finden Sie Flaggen zahlreicher Länder im 4-zu-3-Format.
Kopieren Sie die Flaggen der Länder Deutschland und Großbritanien in den Ordner <code>public/img</code>.

In die Datei config.js wird der Pfad, unter dem die Bilder zu finden sind, eingefügt.

<syntaxhighlight lang="ecmascript">
// public/config.js
...
"apiRoot": "/json/i18n_$1.json",
"imgPath": "/img/$1.svg",
"XapiRoot": "/api/$1"
...
</syntaxhighlight>

=== <code>FormButtonIcon</code> ===

Eine neue Komponente wird benötigt: FormButtonIcon
Dabei handelt es sich um einen Button, der ein Icon anzeigt.
Das Bild kann zur Laufzeit geändert werden.

<syntaxhighlight lang="ecmascript">
<script setup>
import { computed, inject } from 'vue'

const
props = defineProps
({ image: { type: String },
width: { type: String, default: '3em'},
}),
config = inject('config'),
emit = defineEmits(['click']),
click = () => emit('click'),
require = v_url => import.meta.url == null
? v_url
: new URL(v_url, import.meta.url).href,
imgPath = config.imgPath,
buttonImage = computed(() => require(imgPath.replace('$1', props.image)))
</script>

<template>
<input type="image" :src="buttonImage" :style="{width}" @click="click" />
</template>

<style scoped>
@import '/css/component/form/FormButtonIcon.css';
</style>
</syntaxhighlight>

<syntaxhighlight lang="ecmascript">
/* src/css/component/FormButtonIcon.css */

@import 'FormButton.css';

input
{ width: $button_icon_width !important;
margin-left: $nav-dist !important;
}
</syntaxhighlight>

Fügen Sie in <code>src/css/_config.css</code> noch

<syntaxhighlight lang="ecmascript">
--button-icon-width: 1em;
</syntaxhighlight>

ein.

=== Erweiterung von <code>AppNav.vue</code> ===

Der Sprachwahl-Button muss noch in die Navigation eingebaut werden. In diesem Rahmen wird auch gleich die Navigation etwas internationalisiert.

Ergänzen Sie in den Dictionaries der Dateien <code>public/json/i18n_de.json</code> und <code>public/json/i18n_en.json</code>
folgende Attribute:

<syntaxhighlight lang="html">
... ...,
"navHome": "Start",
"navHello": "Hallo"
</syntaxhighlight>

bzw.

<syntaxhighlight lang="html">
... ...,
"navHome": "Home",
"navHello": "Hello"
</syntaxhighlight>

Damit können Sie das Navigationsmenü internationalisieren (einschließlich Auswahl der Sprache per Button).

<syntaxhighlight lang="html">


<script setup>
import FormButtonIcon from '/component/form/FormButtonIcon.vue'
import storeI18n from '/store/StoreI18n'

const i18n = storeI18n()
</script>

<template>
<nav>
<ul>
<li><router-link to="/">{{i18n.dictionary.navHome}}</router-link></li>
<li><router-link to="/hello">{{i18n.dictionary.navHello}}</router-link></li>
<li><FormButtonIcon :image="i18n.lang" @click="i18n.changeLang()"/></li>
</ul>
</nav>
</template>

<style scoped>
@import '/css/component/AppNav.css';
</style>
</syntaxhighlight>

== Hello World Vue 06b ==

Aufgabe: Sorgen Sie dafür, dass <code>autofocus</code> korrekt funktioniert, insbesondere beim Seitenwechsel via Navigation.

Es ist sinnvoll, die Funktionalität in ein eigenes Store-Modul auszulagern, damit
das Session-Modul in Anwendungen, die keine Autofocus-Funktionalität benötigen, keinen
überflüssigen Code enthalten (Bertrand Meyer: Jedes Modul erfüllt genau eine Aufgabe).
Das Session-Modul wird entsprechend abgespeckt.

Der Autofocus-Store soll zwei Funktionen bieten:
* <code>setAutofocusId</code>: Speichert die ID des Autofokus-Elements der aktuellen Seite (Default: <code>null</code>).
* <code>setFocus</code>: Setzt den Focus auf die aktuelle Autofokus-Komponente (sofern die ID ungleich <code>null</code> ist). Insbesondere für das Window-Ereignis <code>'visibilitychange'</code> soll diese Funktion
aufgerufen werden.

<syntaxhighlight lang="ecmascript">
// /src/store/StoreAutofocus.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

const storeAutofocus =
defineStore
( 'autofocus', // must be unique

() =>
{ const
c_autofocus_id = ref(),
setFocus = () => document.getElementById(c_autofocus_id.value)?.focus(),
setAutofocusId = p_autofocus_id => { c_autofocus_id.value = p_autofocus_id;
setFocus();
}

window.addEventListener('visibilitychange', setFocus);

return { setAutofocusId, setFocus }
}
)

export default storeAutofocus
</syntaxhighlight>

<syntaxhighlight lang="ecmascript">
// /src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
initializers = [],
isInitialized = ref(false),
addInitializer = p_initializer =>
initializers.push(new Promise(resolve => p_initializer(resolve))),
initialize = () => Promise.all(initializers)
.then(() => isInitialized.value = true)

return { addInitializer, initialize, isInitialized }
}
)

export default storeSession
</syntaxhighlight>

Um die aktuelle ID speichern zu können, muss das zugehörige Textfeld die Information, welche ID es hat,
per <code>emit</code> an die Elternkomponente ausgeben.

<syntaxhighlight lang="html">
// /src/component/form/FormTextfield.vue

...
const
props = defineProps
({ id: { type: String, default: '' },
...
})
...
emit = defineEmits(['update:id', 'update:text', 'enter']),
...
emit('id', inputId);
...
</syntaxhighlight>

Nun müssen die Views, die ein Autofokus-Feld beinhalten, dieses an den Session-Store melden,
sobald sie per Routing aktiviert werden. Das ist in unserem Fall nur die <code>ViewHome</code>.
Ein Watcher sorgt dafür, dass die ID des Textfeldes im Session-Objekt gespeichert wird, sobald
das zugehörige Textfeld die ID per <code>emit</code> meldet.

<syntaxhighlight lang="html">
// /src/view/ViewHome.vue

<script setup>
import { ref, watch } from 'vue'
...
import storeAutofocus from '/store/StoreAutofocus'
...

const
id = ref(null),
autofocus = storeAutofocus(),
...

watch( id, () => autofocus.setAutofocusId(id.value) )
</script>

<template>
...
<FormTextfield @id="setId"
...
>
...
</template>
...
</syntaxhighlight>

Zum Schluss muss im Router noch die Autofocus-ID bei jedem Seitenwechsel gelöscht werden.

<syntaxhighlight lang="ecmascript">
// /src/router/index.js

...
import storeAutofocus from '/store/StoreAutofocus'

const
...

router.beforeEach(() => storeAutofocus().setAutofocusId())

export default router
</syntaxhighlight>

Wichtig ist hier, dass man keine Konstante <code>session</code> definieren kann, da die Stores erst nach dem Router-Objekt erzeugt werden:

<syntaxhighlight lang="ecmascript">
// /src/router/index.js
...
import storeAutofocus from '/store/StoreAutofocus'

const
autofocus = storeAutofocus(), // FUNKTIONIERT NICHT
...
router.beforeEach(() => autofocus.setAutofocusId())
...
</syntaxhighlight>

Der Funktionsaufruf <code>storeSession()</code> darf daher erst in der Callback-Funktion von
<code>router.beforeEach</code> aufgerufen werden. Zu diesem Zeitpunkt sind die Stores und der Router auf jeden Fall schon initialisiert worden.

Zum Abschluss sollten Sie noch versuchen, <code>/src/component/AppNav.vue</code> so abzuändern,
dass ein Klick auf die Fahne nicht nur die Sprache ändert, sonden auch noch den Focus auf das Startfeld setzt (such wenn dieses Feature vermutlich eher kontraproduktiv ist).

== Hello World Vue 06c ==

Aufgabe: Sorgen Sie dafür, dass die unterstützten Sprachen und der Sprach-Automat vom Backend
geladen wird.

<syntaxhighlight lang="bash">
git checkout v06b # Wechsle in den Branch v06b
git checkout -b v06c # Klone v06b in einen neuen Branch v06c
</syntaxhighlight>

Splitten Sie die Config-Datei zunächst in zwei Teile: "config.json" wird aus dem Public-Ordner geladen.
"config_backend.json" wird normalerweise vom Backend geladen, kann aber zum Entwicklungszeitpunkt auch vom Public-Ordner geladen werden, wenn das Backend noch nicht stabil läuft.

<syntaxhighlight lang="json">
// src/public/json/config.json

{ "configBackend": "/json/config_backend.json",
"apiRoot": "/json/i18n_$1.json",
"imgPath": "/img/$1.svg",

"XconfigBackend": "/api/config",
"XapiRoot": "/api/$1",
"XimgPath": "/api/$1/img"
}
</syntaxhighlight>

<syntaxhighlight lang="json">
// src/public/json/config_backend.json

{ "languages": ["de", "en"],
"nextLanguage": {"de": "en", "en": "de"}
}
</syntaxhighlight>

Das Backend teilt dem Frontend mit, welche Sprachen unterstützt werden.

=== <code>main.js</code> ===

Laden Sie, nachdem Sie "config" asynchron geladen haben, "configBackend" asynchron und kopieren Sie den Inhalt dieses Objekts in das Config-Objekt. Den Pfad von "configBackend" finden Sie unter "config.configBackend".

<syntaxhighlight lang="ecmascript">
...
const
...
init = async () =>
{ const
config = await getJson('/json/config.json'),
configBackend = await getJson(config.configBackend)

Object.assign(config, configBackend)

app
.provide('config', config)
.use(pinia)
.use(router)
.mount('#app') // app is shown to the user
}
</syntaxhighlight>

Nun gibt es im Konfigurationsobjekt keine Defaultsprache mehr.
Im I18N-Store wird daher ab sofort die erste Sprache in der Liste der
unterstützten Sprachen als Defaultsprache genutzt.

<syntaxhighlight lang="ecmascript">
// /src/store/storeI18N.js

initialize =
async resolve =>
{ await changeLang(config.languages[0]);
resolve();
}
</syntaxhighlight>

== Hello World Vue 06d ==

Aufgabe: Defaultmäßig soll dem Benutzer die App in der Sprache angezeigt werden, die der Benutzer
im Browser voreingestellt hat. Sollte die voreingestellte Sprache nicht unterstützt werden, wird die App in der Defaultsprache angezeigt.

Legen Sie zunächst wieder einen neuen Branch an.

<syntaxhighlight lang="bash">
git checkout v06c # Wechsle in den Branch v06c
git checkout -b v06d # Klone v06c in einen neuen Branch v06d
</syntaxhighlight>

Das Vorgehen ist im Prinzip ganz einfach.

Mittels des NPM-Packets "navigator-languages" ermittelt man die vom Browser unterstützten
Sprachen. In der Konfigurationsdatei listet man die Sprachen auf, die von der App unterstützt werden.
Besser wäre es natürlich, diese Liste vom Backend zu laden, damit die App mit bekommt, wenn neue
Sprachen zur Verfügung stehen. Am aufwändigsten ist es, diese beiden Array zu matchen.

Mögliche Erweiterung: Auch die HTML-Pfade sollten internationalisiert werden.

<syntaxhighlight lang="bash">
npm i navigator-languages // unterstützt mehrere Browservarianten
</syntaxhighlight>

=== Language Matching ===

Das Language Matching erfolgt zweimal mit zwei verschachtelten Schleifen.
Zunächst wird überprüft, ob es exakte Übereinstimmungen gibt. Sollte das nicht der Fall sein, wird überprüft, ob es Matches zwischen den ersten beiden Buchstaben gibt ('de', 'de-AT', 'de-DE' matchen in diesem Schritt alle miteinander).

<syntaxhighlight lang="ecmascript">
// src/util/chooseLanguage.js

import navigatorLanguages from 'navigator-languages'

const
/**
* @function
* @param { Array<string> } p_langs_available
* An array of language strings containing the languages
* supported by the app
* @param { Array<string> } [p_langs_required = navigatorLanguages()]
* An array of language strings containing the languages
* requested by the client
* @return { string }
* The language to be displayed
*/
chooseLanguage =
(p_langs_available, p_langs_required = navigatorLanguages()) =>
{ let
lang = p_langs_available[0],
i=0, j=0, n=p_langs_required.length, m=p_langs_available.length

outer:
{ while (i<n)
{ const c_lang_required = p_langs_required[i]
while (j<m)
{ const c_lang_availabe = p_langs_available[j]
if (c_lang_availabe === c_lang_required)
// both languages match perfectly
{ lang = c_lang_availabe;
break outer;
}
j++
}
i++
}
i=0, j=0
while (i<n)
{ const c_lang_required = p_langs_required[i]
while (j<m)
{ const c_lang_availabe = p_langs_available[j]
if (c_lang_availabe.substring(0,2) === c_lang_required.substring(0,2))
// main part of the languages match
{ lang = c_lang_availabe;
break outer;
}
j++
}
i++
}
}

return lang
}

export default chooseLanguage
</syntaxhighlight>

=== <code>src/store/StoreI18n</code> ===

Im I18N-Store wird nun beim Initialisieren nicht nicht mehr eine Defaultspache geladen, sondern
die Sprache, die möglichst nah an den Wünschen des im Browser des Benutzers gespeicherten Sprachwünschen liegt.

Beachten Sie, dass Sie in die Datei <code>vite.config.common.js</code> einen geeigneten Alias für den
<code>util</code>-Pfad definieren müssen, um <code>'/util/chooseLanguage'</code> an Stelle von
<code>'@/util/chooseLanguage'</code> schreiben zu können.

<syntaxhighlight lang="ecmascript">
...
import chooseLanguage from '/util/chooseLanguage'
...
() =>
{ const
...
initialize =
async resolve =>
{ await changeLang(chooseLanguage(config.languages));
resolve();
}
...
...
</syntaxhighlight>



==Quellen==

<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>

HTML5-Tutorium: JavaScript: Hello World Vue 03

2025-05-12T12:57:20Z

Kowa: /* Anpassung des Templates */

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

v03: [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v03/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue%2Fweb_v03%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue%2Fweb_v03%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue%2Fweb_v03%2Findex.html Google PageSpeed])<br/><br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v03</code> (JavaScript)

== Anwendungsfälle (Use Cases) ==

Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_02|ersten und zweiten Teil des Vue-Tutoriums]]
ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

== Aufgabe ==

Aufgabe: Speichere den Zustand der Anwendung (Model) in Store-Objekten,
um die künftige Modularisierung ([[HTML5-Tutorium: JavaScript: Hello World Vue 04|Version v04]]) zu unterstützen.

In diesem Tutorium sollen die Daten in einem Store außerhalb der Komponenten gespeichert werden.

Mögliche Storekonzepte
* [https://vuex.vuejs.org/ vuex] (veraltet, wird nur noch gewartet, angeblich nicht mehr weiterentwickelt, aber Version 4 existiert)
* [https://pinia.vuejs.org/ Pinia] (der Nachfolger von vuex; einfacher zu benutzen; Vue-3- und Vue-2-Paradigmen werden unterstützt)
* ohne Bibliothek direkt mit <code>ref</code>, <code>reactive</code> und <code>computed</code> aus Vue 3.2 (vgl. Vue 3 — [https://medium.com/@mario.brendel1990/vue-3-the-new-store-a7569d4a546f The New Store])

Wir verwenden Pinia.

== Pinia ==

Zitat<ref>https://vuejs.org/guide/scaling-up/state-management</ref>:

''While our hand-rolled state management solution will suffice in simple scenarios, there are many more things to consider in large-scale production applications:

# Stronger conventions for team collaboration
# Integrating with the Vue DevTools, including timeline, in-component inspection, and time-travel debugging
# Hot Module Replacement
# Server-Side Rendering support

Pinia is a state management library that implements all of the above. It is maintained by the Vue core team, and works with both Vue 2 and Vue 3.

Existing users may be familiar with Vuex, the previous official state management library for Vue. With Pinia serving the same role in the ecosystem, Vuex is now in maintenance mode. It still works, but will no longer receive new features. It is recommended to use Pinia for new applications.

Pinia started out as an exploration of what the next iteration of Vuex could look like, incorporating many ideas from core team discussions for Vuex 5. Eventually, we realized that Pinia already implements most of what we wanted in Vuex 5, and decided to make it the new recommendation instead.

Compared to Vuex, Pinia provides a simpler API with less ceremony, offers Composition-API-style APIs, and most importantly, has solid type inference support when used with TypeScript.''

== Erstellen eines neuen Projektzweigs ==

Erstellen Sie einen neuen Projektzweig (branch) innerhalb von <code>hello_world_vue</code>:

<syntaxhighlight lang="bash">
git checkout v02 # Wechsle in den Branch v02
git checkout -b v03 # Klone v02 in einen neuen Branch v03
npm i
</syntaxhighlight>

== Initialisierung von Pinia ==

Pinia muss als reguläre Dependency installiert werden, da das Paket in den produktiven Code integriert wird.

<syntaxhighlight lang="bash">
npm i pinia // NICHT npm i -D pinia, da Pinia-Code an den Browser ausgeliefert werden muss
</syntaxhighlight>

Pinia wird als Plugin in die App integriert. Dabei ist wichtig, dass das Pina-Plugin-Objekt vor dem eigentlichen App-Objekt erzeugt wird, da Komponenten der
App, die Pinia verwenden, darauf angewiesen sind, dass die Pinia-Erzeugung vor der Komponenten-Initialisierung erfolgt.

<syntaxhighlight lang="bash">
// src/main.js

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

const pinia = createPinia() // before createApp(...)

window.addEventListener
( 'load',
createApp(App).use(pinia).mount('#app')
)
</syntaxhighlight>

== Erstellen der Stores ==

Fügen Sie zunächst zwei weitere Aliase in die Datei <code>vite.config.common.js</code> ein:

<syntaxhighlight lang="javascript">
'/controller': fileURLToPath(new URL('./src/controller', import.meta.url)),
'/service': fileURLToPath(new URL('./src/service', import.meta.url)),
'/component': fileURLToPath(new URL('./src/component', import.meta.url)),
'/store': fileURLToPath(new URL('./src/store', import.meta.url)),
</syntaxhighlight>

Damit kann man Controller, Services. Komponenten und Stores immer mit absoluter Adressierung laden ({{zB}} in <code>App.vue</code>), ohne <code>@</code> verwenden zu müssen.

=== <code>StoreSession</code> ===

Im Session-Store wird die Autofocus-ID gespeichert sowie welche Section der Single-Page-Anwendung dem Benutzer aktuell präsentiert wird.

<syntaxhighlight lang="ecmascript">
// src/store/StoreSession.js

import { defineStore } from 'pinia'
import { ref, reactive } from 'vue'

const storeSession =
defineStore
( 'session', // must be unique

() =>
{ const
section = ref(''),
autofocus = reactive({ setFocus: null }),

init =
p_section => { section.value = p_section },

initAutofocus =
(p_autofocus_id = null) =>
{ if (p_autofocus_id != null)
{ autofocus.setFocus = () => document.getElementById(p_autofocus_id).focus(),
window.addEventListener('visibilitychange', autofocus.setFocus);
}
},

setFocus =
() => autofocus?.setFocus()

return { init, initAutofocus, section, setFocus }
}
)

export default storeSession
</syntaxhighlight>

=== <code>StoreGreeting</code> ===

Im Greeting-Store werden die Daten zur Begrüßung des Benutzers gespeichert.

<syntaxhighlight lang="ecmascript">
// src/store/StoreGreeting.js

import { defineStore } from 'pinia'
import { reactive, toRef, computed } from 'vue'

const
storeGreeting =
defineStore
( 'greeting',

() =>
{ const
state =
reactive({ name: '', stranger: 'Stranger', hello: 'Hello, $1!' }),

init =
(p_state = {}) =>
{ Object.assign(state, p_state) },

name =
toRef(state, 'name'),

reset =
() => { name.value = '' },

sayHello =
p_name => state.hello.replace('$1', p_name),

helloStranger =
computed(() => sayHello(state.stranger)),

hello =
computed(() => sayHello(state.name))

return { init, name, helloStranger, hello, reset }
}
)

export default storeGreeting
</syntaxhighlight>

== Einbinden der Stores in eine Komponente==

<syntaxhighlight lang="ecmascript">
<script setup>
import { useId, onMounted, onUnmounted } from 'vue'
import storeSession from '/store/StoreSession'
import storeGreeting from '/store/StoreGreeting'
import ControllerKeys from '/controller/ControllerKeys'

const
props = defineProps ({ autofocus: { type: Boolean } }),
inputId = useId(),

session = storeSession(),
greeting = storeGreeting(),

reset = () => { greeting.reset(); session.setFocus() },
sayHello = () => session.section = 'hello',
sayHelloOnEnter = new ControllerKeys('Enter', inputId, sayHello)

session.init('form', props.autofocus ? inputId : null)
//greeting.init({ hello: 'Hi, $1!', stranger: 'Nobody'})

onMounted ( () => sayHelloOnEnter.add() )
onUnmounted ( () => sayHelloOnEnter.remove() )
</script>
</syntaxhighlight>

Zum Vergleich noch einmal das Skript ohne Store:
<syntaxhighlight lang="ecmascript">

<script setup >
import { useId, ref, computed, onMounted, onUnmounted } from 'vue'
import ControllerKeys from '@/controller/ControllerKeys'

const
props = defineProps ({ autofocus: { type: Boolean } }),
inputId = useId(),
section = ref('form'),
helloStranger = ref('Hello, Stranger'),
name = ref(''),

hello = computed(() => name.value === '' ? helloStranger.value : `Hello, ${name.value}!`),
sayHello = () => section.value = 'hello',
autoFocus = () => { if (props.autofocus)
document.getElementById(inputId).focus()
},
reset = () => { document.getElementById(inputId).value = '';
autoFocus();
},
sayHelloOnEnter = new ControllerKeys('Enter', inputId, sayHello)

onMounted (...)
onUnmounted(...)
</script>
</syntaxhighlight>

== Anpassung des Templates ==

Das Template muss angepasst werden. Man muss nun auf die Store-Objekte zugreifen.

Achtung, die Funktion <code>reset</code> aktivier nicht nur das Autofokus-Element,
sondern löscht auch das NAmensfeld im <code>StoreGreeting</code>. Würde man in der
Funktion <code>reset</code> auf den Aufruf von <code>storeGreeting.reset()</code> verzichten,
würde der Input-Type <code>reset</code> im unten angegebenen Input-Buttons zwar
den Inhalt Textfelds im Formular löschen, der zuvor eingegebenen Name stünde aber weiterhin im Greeting-Store. Die bereitet spätestens dann Probleme, wenn man den im Greeting-Store gespeicherten Namen auch a anderer Stelle verwendet.

<syntaxhighlight lang="ecmascript">


<template>
<section v-if="session.section==='form'">
<h1>{{greeting.helloStranger}}</h1>
<form>
<div>
<label :for="inputId">What´s your name?</label>
<input :id="inputId" v-model="greeting.name" :autofocus>
</div>
<div>
<input type="reset" value="Reset" @click="reset">
<input type="button" value="Say hello" @click="sayHello">
</div>
</form>
</section>
<section v-if="session.section==='hello'">
<h1>{{greeting.hello}}</h1>
<p>Welcome to Full-Stack Web Development!</p>
</section>
</template>
</syntaxhighlight>

==Fortsetzung des Tutoriums==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 04|Teil 4 des Vue-Tutoriums]] bearbeiten.
Nun wird die Anwendung modularisiert.

==Quellen==
<references/>
<ol>
<li value="2"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>