Documentazione Tecnica: Architettura e Funzionalità
Esplora la documentazione completa della nostra applicazione web, costruita con un'architettura frontend-backend robusta e funzionalità avanzate di chat, geolocalizzazione e condivisione video.
Architettura del Sistema
Frontend
HTML/CSS/JavaScript vanilla con build system Vite. Utilizza Google Maps JS API e Font Awesome come librerie principali.
Backend
PHP con API REST per la gestione delle richieste e MySQL come database relazionale per l'archiviazione dei dati.
Deploy
Possibilità di servire i sorgenti direttamente o la cartella dist generata da Vite per un'ottimizzazione delle performance.
Modello Dati
user_messages
Chat 1:1 con campo read_at per gestire le ricevute di lettura.
user_presence
Gestione della presenza online e dell'ultimo accesso, aggiornata via heartbeat.
user_requests
Richieste di amicizia, aiuto e altre interazioni tra utenti.
Tabelle Aggiuntive
users, user_sessions, user_locations, video_logs per gestire profili e contenuti.
API Backend (PHP)
auth.php
- register: creazione utente
- login: autenticazione con cookie session_token (30gg)
- logout: invalidazione sessione
- verify: verifica sessione
- profile: lettura/aggiornamento profilo
messages.php
- threads: ultime conversazioni
- list: messaggi con un partner
- send: invio messaggio
API Backend (Continua)
users.php
- search: ricerca utenti attivi
- get: dettagli utente
- status: verifica presenza online
- heartbeat: aggiornamento last_seen
Geolocalizzazione e Video
- get_user_locations.php: posizioni utenti
- update_user_location.php: aggiornamento GPS
- upload_videolog.php: caricamento video
Frontend: Funzionalità Principali
Network/Data Saver
Gestione larghezza di banda e modalità risparmio dati per ottimizzare l'esperienza su connessioni lente.
Mappa Google
Integrazione con stile "Underground Blue", Street View e funzionalità di routing tra utenti.
GPS/Posizioni
Tracciamento posizione, aggiornamento server e visualizzazione altri utenti sulla mappa.
Sistema di Chat
Funzionalità Principali
- Polling messaggi ogni 3 secondi
- Heartbeat presenza ogni 20 secondi
- Indicatori di lettura (spunte blu)
- Salvataggio bozze in localStorage
- Interfaccia adattiva per tastiera mobile
Gestione UI/UX
Layout Responsive
CSS ottimizzato per desktop e mobile con gestione dinamica della tastiera tramite VisualViewport API.
Compatibilità Browser
Fix specifici per Safari e gestione preferenze per compatibilità media (autoplay, formati video).
Ottimizzazione Performance
Pausa dei timer su tab inattive e gestione efficiente delle risorse di rete.
Flussi Principali
1
Avvio Applicazione
Inizializzazione UI, verifica rete, caricamento mappa Google.
2
Autenticazione
Verifica cookie session_token, popolamento dati utente.
3
GPS e Tracking
Attivazione watchPosition, aggiornamento server, rendering marker.
4
Interazione Chat
Caricamento thread, selezione partner, polling messaggi, gestione lettura.
Migliorie Future
Evoluzione del Sistema
- Implementazione WebSocket/SSE per comunicazione realtime
- Indicatore di digitazione e scroll infinito nella chat
- Upload media in chat con anteprime
- Ottimizzazione fetch su tab inattive