Piattaforma Live Streaming: Laravel, Vue.js e YouTube API

Scopri come abbiamo creato una piattaforma live streaming con Laravel, Vue.js e YouTube API: countdown, interazioni utente e registrazione sicura.

Abbiamo recentemente lavorato allo sviluppo di una piattaforma dedicata alla condivisione di un evento in live streaming per un’importante realtà aziendale.

Il progetto ha previsto la realizzazione di una landing page interattiva, l’integrazione di API YouTube per la gestione dello streaming e lo sviluppo di un sistema di registrazione utenti, il tutto implementato con Laravel e Vue.js.

Piattaforma Live Streaming: Laravel, Vue.js e YouTube API

Creazione della Landing Page e Setup Iniziale

Per garantire un’esperienza utente fluida e coinvolgente, abbiamo realizzato una landing page interattiva con un sistema di countdown per annunciare l’inizio dell’evento. L’infrastruttura è stata costruita su Laravel, con la creazione di una repository dedicata per una gestione ottimale del codice.

Integrazione Streaming e YouTube API

La pagina streaming è stata suddivisa in due sezioni:

Countdown: visibile fino alla data dell’evento.
Streaming: attivato automaticamente una volta raggiunta la data stabilita.

Il video in streaming è stato gestito attraverso YouTube API, permettendo un fake streaming, ovvero un video preregistrato che si avvia automaticamente in base al tempo trascorso dal countdown, simulando una trasmissione in diretta.

Loading Page e Conversione Vue.js

Per migliorare l’esperienza utente, abbiamo creato una loading page che appare dopo la selezione della lingua e può essere saltata manualmente con un pulsante “Procedi”.

Successivamente, tutte le pagine della piattaforma (Landing Page, Loading Page, Countdown Page e Streaming Page) sono state convertite in Vue.js, ottimizzando le performance e la reattività del frontend.

Interazione Utente e Filtri Personalizzati

Abbiamo sviluppato un’interfaccia dinamica con CTA interattive, tra cui:

Lascia un messaggio: una modale consente agli utenti di selezionare un valore, inserire un messaggio e i propri dati (nome, cognome, email).
Filtri personalizzati: selezionando un filtro, gli elementi dell’interfaccia (palline visualizzate su un albero interattivo) cambiano in base ai valori scelti.

Backend: Gestione Dati e Registrazione Utenti

Sul backend, abbiamo strutturato il sistema con Laravel, implementando:

Gestione valori: creazione di entità per salvare i valori aziendali (Passione, Apparenza, Coraggio, ecc.), collegandoli ai messaggi inseriti dagli utenti tramite una Foreign Key.
Gestione messaggi: ogni messaggio inserito dagli utenti è salvato in un database, contenendo ID, user_id e valore associato.
Flusso di registrazione utenti: solo gli utenti dell’azienda possono registrarsi. Laravel invia un magic link all’email aziendale dell’utente, che, cliccando sul link, viene automaticamente registrato e autenticato.

Vista dettaglio Albero e API Backend

Per visualizzare tutti i messaggi, abbiamo creato una vista dettagliata dell’albero, dove l’utente può esplorare i messaggi rappresentati da palline animate.

Il backend supporta le seguenti API:

API Register
API Token Verify
API Send Message
API Get Messages

Abbiamo completato il progetto implementando:

Pagine Cookie Policy e Privacy Policy
Traduzioni per la piattaforma streaming e email transazionali
File di traduzione per YouTube API

Grazie a queste implementazioni, l’azienda ha ora a disposizione una piattaforma intuitiva e scalabile per la gestione di eventi in live streaming.

L’integrazione tra Laravel, Vue.js e YouTube API ha permesso di offrire un’esperienza utente interattiva e personalizzata, con una gestione efficiente delle interazioni e della registrazione utenti.

Vuoi creare un evento digitale coinvolgente e su misura per la tua azienda? Contattaci oggi stesso e scopri come possiamo sviluppare la tua piattaforma live streaming personalizzata!

Contattaci