Chat App programmieren mit Express, socket.io, TypeScript, Svelte + Deployment
In diesem Tutorial entwickeln wir eine Chat-Applikation mit Node, Express und socket.io auf dem Backend und Svelte und Sass auf dem Frontend. Außerdem benutzen wir TypeScript für einen besseren Entwicklungsprozess, insbesondere Auto-Vervollständigung. Am Ende geht es um das Deployment auf render.com.
📝 Demo & Quellcode
● Demo: https://svelte-chat-app.onrender.com/
● Code: https://github.com/ScriptRaccoon/svel...
⏱ Zeitmarken
● Vorstellung 00:00
● Teil 1: Setup des Express-Servers mit TypeScript 04:06
● Express Server 04:09
● TypeScript Setup 06:57
● Skripte für Server 10:05
● Teil 2: Setup von socket.io mit TypeScript 14:51
● Setup von socket.io 14:54
● Typen für socket.io 18:23
● Teil 3: Setup des Svelte-Projektes für den Client 21:45
● Svelte mit Vite aufsetzen 21:48
● socket.io auf dem Client 25:20
● Skripte für Client 29:55
● Globale Typen 34:46
● Teil 4: Svelte-Komponenten und die Chat-Logik 38:02
● Login, Header und Chat-Komponente 38:05
● Pfad-Alias 44:20
● Messages- und SendForm-Komponente 47:58
● Nachrichten abschicken 51:12
● Nachrichten anzeigen 56:11
● Teil 5: Bot-Nachrichten und Anzeige der User 01:01:34
● Username in Nachricht anzeigen 01:01:37
● Willkommensnachricht 01:04:34
● Austrittsnachricht 01:08:07
● Liste der User 01:11:42
● Users-Komponente 01:16:33
● Menü 01:20:10
● Stores (Refactoring) 01:24:41
● Teil 6: Styling mit CSS und Barrierefreiheit 01:28:19
● Barrierefreiheit 01:28:22
● Setup von Sass 01:31:13
● Globale Styles 01:31:55
● Header Styles 01:39:34
● Login Styles 01:41:57
● Menü Styles 01:44:34
● Messages Styles 01:46:04
● Scrollen zur letzten Nachricht 01:52:24
● Message Styles 01:58:19
● SendForm Styles 02:00:34
● Breakpoints Datei 02:03:26
● Users Styles 02:06:47
● Tastatursteuerung 02:09:12
● Teil 7: Deployment auf render.com 02:12:15
● GitHub Repository 02:12:18
● Webservice auf render.com 02:15:00
● Abschluss 02:21:28
📙 Quellen
● Node: https://nodejs.org/en/
● Express: http://expressjs.com/
● TypeScript: https://typescriptlang.org/
● socket.io: https://socket.io/
● Svelte: https://svelte.dev/
● Sass: https://sass-lang.com/
💻 Verwendete Tools (Entwicklung)
● Visual Studio Code: https://code.visualstudio.com/
● Svelte for VS Code: https://marketplace.visualstudio.com/...
🎤 Verwendete Software (Aufnahme)
● OBS: https://obsproject.com/de
● Davinci Resolve 16: https://www.blackmagicdesign.com/de/p...
#Express #Svelte #TypeScript
Auf dieser Seite können Sie das Online-Video Chat App programmieren mit Express, socket.io, TypeScript, Svelte + Deployment mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Script Raccoon 04 März 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 961 Mal angesehen und es wurde von 23 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
