simplechat/docs/project_overview.md

5.3 KiB

Erstelle einen Überblick über die verwendeten Technologien mit jeweils kurzer Beschreibung anhand einschlägiger Beispiele zu dem Projekt unter der URL git+https://git.urmel.duckdns.org/Kyattsukuro/simplechat und gib die jeweiligen Webseiten zu den Dokumentationen an.

Das Projekt "simplechat" verwendet folgende Haupttechnologien, die jeweils eine spezifische Rolle im Chat-System innehaben:

Python:

  • Wird für das Backend (API und Serverlogik) genutzt.
  • Ermöglicht die Verarbeitung von Chatnachrichten und Nutzerverwaltung.
  • Beispiel aus dem Projekt: Backend-Code in simple_chat_api, basierend auf Python-Frameworks wie FastAPI oder ähnlichem, um HTTP- und WebSocket-Kommunikation zu realisieren.
  • Dokumentation: https://www.python.org/doc/

Vue.js:

  • Frontend-Framework für die Benutzeroberfläche.
  • Stellt reaktive Komponenten dar, um Nachrichten anzuzeigen und Nutzereingaben dynamisch zu verarbeiten.
  • Beispiel: frontend-Verzeichnis mit Vue-Komponenten, z.B. Chatfenster und Nutzerliste.
  • Dokumentation: https://vuejs.org/guide/introduction.html

TypeScript:

  • Statisch typisierte Erweiterung von JavaScript, verwendet im Frontend zur besseren Codequalität und Wartbarkeit.
  • Wird zusammen mit Vue.js genutzt, um Typensicherheit zu gewährleisten.
  • Beispiel: TypeScript-Dateien im frontend-Teil, die Logik und Datenmodelle definieren.
  • Dokumentation: https://www.typescriptlang.org/docs/

Docker (inkl. Docker Compose):

  • Containerisierung der Anwendung für einfache Bereitstellung und Umgebungskonsistenz.
  • docker/compose.yml definiert Dienste und deren Abhängigkeiten (Backend, Frontend).
  • Ermöglicht das Starten kompletter Entwicklungs- oder Produktionsumgebungen mit einem Befehl.
  • Dokumentation: https://docs.docker.com/compose/

CSS:

  • Für das Styling der Benutzeroberfläche.
  • Ermöglicht das Layout und visuelle Erscheinungsbild des Chat-Frontends.
  • Beispiel: CSS-Dateien im frontend-Bereich, die die Chat-Komponenten formatieren.
  • Dokumentation: https://developer.mozilla.org/de/docs/Web/CSS

Übersichtstabelle der Technologien:

Technologie Verwendung Kurzbeschreibung Dokumentation
Python Backend-Programmierung Serverlogik, Nachrichtenverarbeitung, Nutzerverwaltung https://www.python.org/doc/
Vue.js Frontend UI Reaktive Benutzeroberflächen, Datenbindung https://vuejs.org/guide/introduction.html
TypeScript Frontend-Entwicklung Statische Typisierung von JavaScript, bessere Codequalität https://www.typescriptlang.org/docs/
Docker Compose Container-Orchestrierung Einfache Verwaltung von Backend- und Frontend-Diensten https://docs.docker.com/compose/
CSS Frontend Styling Gestaltung des Layouts und der Optik https://developer.mozilla.org/de/docs/Web/CSS

Diese Technologien bilden zusammen die Grundlage des einfachen Chat-Systems, das sowohl serverseitige Verarbeitung als auch eine moderne, reaktive Web-Oberfläche bietet. Das Projekt ist als Schulprojekt konzipiert und deswegen nicht produktionsreif, zeigt aber exemplarisch den Einsatz von Python für das Backend, Vue.js und TypeScript für das Frontend sowie Docker für die Containerisierung.1 23456789101112131415161718192021


  1. https://git.urmel.duckdns.org/Kyattsukuro/simplechat ↩︎

  2. https://iemafzalhassan.hashnode.dev/containerize-and-orchestrate-building-a-real-timethree-tier-chat-app-with-docker-and-kubernetes ↩︎

  3. https://www.scaler.com/topics/chat-interface-project-css/ ↩︎

  4. https://simplechat.pro ↩︎

  5. https://www.geeksforgeeks.org/python/simple-chat-room-using-python/ ↩︎

  6. https://javascript.plainenglish.io/build-a-real-time-chat-app-with-vue-js-your-step-by-step-guide-to-success-e0cc72cbd326 ↩︎

  7. https://www.reddit.com/r/rust/comments/10skc78/building_deploying_a_web_chat_app_with_react/ ↩︎

  8. https://github.com/adrianhuber17/chat-app ↩︎

  9. https://www.youtube.com/watch?v=_sxoqRIbW0c ↩︎

  10. https://www.prodwaregroup.com/our-solutions/simplechat/ ↩︎

  11. https://python.plainenglish.io/building-a-real-time-chat-app-backend-with-python-and-fastapi-83af81ecec70 ↩︎

  12. https://simplechat365.com ↩︎

  13. https://sendbird.com/de/blog/build-a-vue-chat-app ↩︎

  14. https://github.com/assistant-ui/assistant-ui ↩︎

  15. https://github.com/microsoft/simplechat ↩︎

  16. https://github.com/RichDaly/Simple_Chat_Project ↩︎

  17. https://simplechat365.com/how-it-works/ ↩︎

  18. https://arkanis.de/weblog/2010-09-05-simple-chat-the-details/ ↩︎

  19. https://www.reddit.com/r/node/comments/1gwerxw/best_tech_stack_for_a_chat_app_with_ai_python_vs/ ↩︎

  20. https://masteringbackend.com/posts/build-a-real-time-chat-app-with-vuejs-socket-io-and-nodejs ↩︎

  21. https://dev.to/vsfarooqkhan/how-to-build-a-real-time-chat-application-using-typescript-and-socketio-32k5 ↩︎