Optional (Challenge!): Chat erweitern

Einen Chat um Bilderfunktion erweitern
Autor:in

Nicola Jordan

Veröffentlichungsdatum

28. August 2023

Challenge Aufgabe: Erweitere den Chat um Bilder

Story: Dein Chef hat eine Applikation von einer externen Firma im fernen Ausland machen lassen. Der Code ist zwar etwas umständlich und nicht ganz sauber, aber er ist schon live geschaltet - aber es fehlen Bilder. Deine Aufgabe ist es nun, mit Scharfsinn und Spürnase den bestehenden Code aufzubohren, so dass auch Bilder angezeigt werden können.

Du darfst ChatGPT brauchen, und Google etc.

Beachte: In Pocketbase gibt ein Typ “File”, welches in diesem Fall benutzt werden sollte und es gibt Beispiele in dessen Dokumentation, wie man es einbinden kann.

Ziel

Mit einem relativ einfachen Stack (als Vorlage) mir lediglich einem Backend und einem Frontend Container eine Chat-Applikation erweitern.

Dazu sind folgende Tools nötig:

Auf dem Rechner:

  • Docker
  • git
  • VSCode (empfohlen)

Mit Docker betrieben (schon vorhanden):

  • pocketbase
    • dies beinhaltet einen Datenbank-Service und noch etwas mehr, ist aber einfach zu betreiben
  • JavaScript Frontend (keine Angst, das meiste ist schon vorhanden - es ist als Knacknuss-Zusatzaufgabe ein weiteres Themengebiet, welches im Studium aufgegriffen wird)
Sichert eure Änderungen vor dem checkout

Falls ihr noch Änderungen habt, welche nicht ins git gespeichert (und wenn möglich auch gepusht) sind, dann solltet ihr dies vorher machen!

Hinweis: Dies geht auch mit GUI Tools, wie GitLens aus VSCode, oder mit SourceTree, falls das jemandem besser liegt.

Im Terminal ist es in etwa:

# alle Änderungen hinzufügen
git add .
# diese "committen", -m ist für "message" und -a für alle Änderungen
git commit -m '<was ich gemacht habe>' -a
# auf das eigene repo pushen
git push
# wenn das ohne Fehlermeldung geklappt hat, weiter fahren :-)
Hinweis

Die Vorlage für diese Aufgabe ist im Branch 80-chat.

git switch "80-chat"

Sollte das nicht gehen, muss wohl der upstream geupdated werden. Siehe vorhergehende Lektion für Details.

Vorlage Starten

Die Vorlage ist mit https://pocketbase.io/ erstellt worden. Die Dokumentation davon findest du unter https://pocketbase.io/docs/. Zudem ist noch svelte, eine JavaScript Applikation eingebunden. Die Dokumentation ist hier zu finden: https://svelte.dev/docs/introduction.

Projekt Starten, wie gehabt:

docker compose up --build

Auf http://localhost:8090/_/ einen neuen Admin-User erstellen (und sich die Daten merken ;-) ) aka. Formular ausfüllen.

2. Chat einbinden

Unter chat/src/ befindet sich der ganze Code. Dieser ist im frontend Docker-Container unter /app/app gemountet. Zudem wird der Service bei jeder Änderung am Code neugestartet. Sollte dies nicht klappen, hilft ein docker compose stop frontend mit anschliessendem docker compose up --build frontend, um es neu zu starten.

Für uns sind folgende Dateien wichtig:

  • lib/pocketbase.ts
    • in der Zeile const pb = new PocketBase('http://127.0.0.1:8090'); wird die Verbindung zu unserem Service festgelegt. Unter Umständen muss die Adresse geändert werden.
  • chat/src/components/Chat.svelte, da ist die Chat Applikation zu finden.
  • chat/src/components/MessageCard.svelte, Darstellung einzelner Nachrichten.

Mit den vorliegenden Infos, erweitere die Applikation zu erst im Pocketbase Admin und mache dich anschliessend an die Arbeit, den JavaScript Teil zu erweitern.

Zurück nach oben