Code Monkey home page Code Monkey logo

web-chat's Introduction

WebChat

Matrikelnummer: 4328112

Besuchen Sie das Projekt unter: https://ltchatita.herokuapp.com

Information: Die Zugangsdaten der Datenbank sind öffentlich einsehbar und somit auch alle Nachrichten.

Umsetzung der Applikation

Die gesamte Applikation wurde von Grund auf selbstständig entwickelt, getestet und deployed.

Allgemein

  • Backend: Microframework Flask in Python

  • Frontend: HTML,CSS und Java Script (JQuery)(Templating Engine:JINJA 2.0)

  • Datenbank: PostgreSQL mit SQLAlchemy

Funktionen

  • User-Registrierung
  • User-Login
  • Chat
  • Realtime-Chat mit Websocket-Protokoll
  • Erstellen von Chat-Räumen mit ausgewählten Usern
  • Verlassen von Chat-Räumen
  • Schreiben von Nachrichten in Chat-Räumen
  • Infinite Scrolling bei Chat-Nachrichten --> gesamte Nachrichten-Historie einsehbar

Struktur

  • Die HTML-Dokumente sind im Template-Folder untergebracht
  • Die CSS-Dokumente sind im static/styles-Folder untergebracht
  • Die Java Script Dateien sind im static/javascript-Folder untergebracht
  • Die Python Dateien liegen in der Tom_4328112-Directory
  • Die Datenbank liegt ebenfals in der Tom_4328112-Directory
  • Beim Aufbau der HTML-Seiten wird ein JINJA Vererbungsbefehl verwendet:
{{% extends "basic.html" %} 
{% block content %} 
....
{% endblock %}

--> alle HTML Seiten erben von der basic.html Seite.

Highlights der Applikation

  • Implementierung Real-Time Websocketprotokoll (Alle Aktionen zwischen Usern im Chat erflogen in RealTime)
  • Erstellen mehrer individueller Chat-Räume
  • Speicherung aller geschriebenen Nachrichten in jedem Chat mittels einer PostgreSQL Datenbank
  • Dynamisches Nachladen der Chat-Nachrichten (Infinite Scrolling Ansatz im Chat-Window)
  • Verbindung von User-Identifikation und Chat --> Nachrichten können nur von denjenigen gelesen werden die dafür bestimmt sind
  • Hoher SchreibKomfort auf PC und Smartphone --> Der Chat hängt sich an den Nachrichtenfluss an. Koppelt sich jedoch ab wenn der User alte Nachrichten durchlesen will (wie bei Whats App)
  • Dynamische Nav-Bar (mit CSS Grid)
  • Hyperlinkerkennung in Chats
  • Nachrichtenton beim Erhalt einer Nachricht (falls man nicht im Chat anwesend ist)
  • Website wurde unter der Domain https://ltchatita.herokuapp.com deployed

Anmerkungen

  • Die Web-Applikation funktioniert nur bedingt unter Safari 14.1
  • Beim Testen des Logins und des Chats mit unterschiedlichen Accounts ist darauf zu achten zwei unterschiedliche Browser zu benutzen oder einen Incognito-Tab zu öffnen. Wenn man nur verschiedene Tabs benutzt weist der Browser den Cookie beiden Tabs zu und man loggt sich automatisch in beiden Tabs mit dem gleichen Account ein.
  • Die Überlegungen und das Vorgehen wird in den Kommentaren anhand des Codes detailliert beschrieben

Installation

Vorraussetzungen

  • MAC OS
  • Freier Port 5000
  • Funktionierende python3 version auf Mac
  • Vorzugsweiße Google Chrome

Zum Testen ob eine Python Version vorhanden ist: Ins Terminal python3 --version eintippen.

Vorgehen

  1. Diesen Ordner herunterladen oder git clone in gewünschtes Directory
  2. Gehe, Sie in den heruntergeladenen Ordner
  3. Im Ordner auf der Ebene der run.py-Datei ein Terminal öffnen
  4. Im Terminal python3 -m venv venveingeben
  5. Im Terminal source venv/bin/activate eingeben --> im Terminal sollte nun stehen: (venv)Macbookname
  6. Im Terminal folgende packages mit dem Befehl pip3 install -r requirements.txt eingeben:
  7. Starten Sie entwerder die Applikation im Entwicklungs/Debug-Modus indem Sie im Terminal python3 run_dev.py eingeben.
  8. Oder starten Sie die Applikation im Production-Modus indem Sie im Terminal python3 run_prod.py eingeben.
  9. Google Chrome öffnen
  10. localhost:5000 aufrufen
  11. Applikation testen

Falls die Installation nicht klappen sollte, ist die Seite unter folgendem Link zu erreichen:https://ltchatita.herokuapp.com/login?next=%2Fchat

Datenbankanbindung

Für die Datenbankanbindung wurde SQLite verwendet. Über das Python Package "SQL-Alchemy" lassen sich SQLite Datenbanken mit Python managen. In der Datei db_models.py wird das Datenbankschema definiert. Dazu werden drei Tabellen erstellt:

  • User
  • Chat
  • Message

Diese Tabellen stehen in unterschiedlichen Beziehungen zueinander:

  • 1 User zu n-Chats
  • 1 Chat zu n-Messages
  • n-User zu n-Messages

Zur Erstellung der n * n Beziehung wird eine Verknüpfungstabelle ("link") verwendet mit welcher die beiden Primärschlüssel miteinader verbunden werden.

Zum Funktionsumfang gehören folgende Datenbankzugriffe:

  • Erstellen von Usern
  • Erstellen von Chats
  • Löschen von Chats
  • Schreiben von Nachrichten
  • Lesen von bereits geschriebenen Nachrichten

Unit-Test

Zum Testen der Applikation im Terminal folgenden Befehl ausführen:

coverage run -m unittest tests

Das Ergebnis des Tests und die Testabdeckung lässt sich mit folgendem Befehl anzeigen:

coverage report

Getestet wird ausschließlich Code im Zusammenhang mit der Datenbank. Tests sollten außerdem nur im ENV='dev' mode laufen (siehe Tom_4328112/init.py), sonst kommt es zu Fehlern.

web-chat's People

Contributors

schubert-tom avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.