1 / 24

TELECHAT

PROJECT WORK DI STAGE

Corso: "PROGETTISTA E SVILUPPATORE SOFTWARE: FULL STACK DEVELOPER E CLOUD SPECIALIST"

Rif. Tecnico Superiore per i metodi e le tecnologie per lo sviluppo di sistemi di software

Biennio: 2023-2025

Studente: Alessandro Giorgini

Azienda ospitante: PluService Srl

Periodo di stage: da 11/11/2024 a 30/04/2025

🚀 Demo 💻 Codice

Esperienza in stage

Sviluppatore junior backend da Pluservice - MyCicero

Progetti

  • Etolling - telepedaggio (BE)
  • RoadAssistance - Assistenza stradale (BE)
  • PlusAssistant (FE + BE)

Tecnologie

  • Microsoft SQL
  • C#
  • .NET
  • Javascript
  • Ext JS

Strumenti

  • Visual Studio
  • Postman
  • Svn
  • Git
  • Azure DevOps

Progetto

Telechat è una piattaforma di chat online che richiama l'estetica nostalgica degli anni 2000

Obiettivi formativi

Applicare le tecniche e le metodologie imparate durante lo stage nella creazione di un progetto

Stack tecnologico

Frontend

  • HTML5, CSS3, Javascript

Servizi

  • C#, .NET, SignalR

Database

  • MariaDB (No ORM)

Deploy

  • Azure Web Apps, Lade

Architettura del sistema

Funzionalità implementate

Messaggistica

  • Invio e ricezione (SignalR, ChatHub)
  • Cronologia messaggi (MariaDB)
  • Gestione degli orari (FE e BE)
  • Stanza singola

Autenticazione

  • Registrazione
  • Login
  • Gestione delle sessioni
  • Gestione degli accessi

Frontend

  • Interfaccia retrò semplice e minimale

Architettura

  • Separation of concerns
  • Repository pattern
  • Database relazionale con MariaDB

Sfide tecniche: l'autenticazione

Competenze acquisite

Tecniche

  • L'utilizzo di SignalR in applicazioni in tempo reale
  • Design del database
  • Esperienza con lo stack: C#, .NET, MariaDB

Metodologiche

  • Database-first vs code-first
  • Repository pattern
  • Separation of concerns

Trasversali

  • Creazione di un progetto da zero
  • Gestione dei tempi
  • Problem solving

Struttura del progetto

Struttura del progetto

Base di dati, Appendice E

Schema del database

Schema del database

Base di dati, Appendice E

Query, hashes

Query SQL eseguita con HeidiSQL

Servizi e flusso, Appendice D

Esempio di flusso (invio di messaggio con SignalR):
Gli endpoint vengono chiamati in Program.cs

Servizi backend - flusso 1

Servizi e flusso, Appendice D

Lanciando un metodo di estensione che si occupa di mapparli

Servizi backend - flusso 2

Servizi e flusso, Appendice D

Al rispettivo endpoint

Servizi backend - flusso 3

Servizi e flusso, Appendice D

L’utente invia un messaggio digitandolo e premendo invio o cliccando su invia

Servizi backend - flusso 4

Servizi e flusso, Appendice D

L’evento viene rilevato dal browser e viene effettuata la connessione all’hub di SignalR

Servizi backend - flusso 5

Servizi e flusso, Appendice D

Che lancia il servizio SaveMessageAsync

Servizi backend - flusso 6

Servizi e flusso, Appendice D

Che chiama direttamente il DB e spara la query

Servizi backend - flusso 7

Servizi e flusso, Appendice D

È infine l’evento SignalR che si occupa di ricevere il messaggio e servirlo al frontend

Servizi backend - flusso 8

Servizi e flusso, Appendice D

Servizi backend - flusso 9

Frontend, Appendice D

Mockup

Mockup dell'interfaccia utente

Frontend, Appendice D

Stanza principale

Pagina principale del frontend

Frontend, Appendice D

Autenticazione

Pagina di login del frontend

Frontend, Appendice D

Registrazione

Pagina di registrazione del frontend

Fine