Video Course
Language:
Applicazioni Real Time e collaborative in Angular e Supabase
Creare un backend e applicazioni RealTime multi-utente con Angular e Supabase
In questo corso:
1
Creiamo database, tabelle e regole di sicurezza con Supabase
2
Sviluppiamo un'applicazione CRUD Angular (v.19 Zoneless)
3
Abilitiamo il realtime, creando un'applicazione collaborativa
4
Aggiungiamo il supporto Drag and Drop con Angular Material CDK
Questo corso è disponibile con il piano Membership
# Real Time Applications?
Sempre più spesso, le applicazioni con cui interagiamo non si limitano a mostrarci dati statici, ma si aggiornano dinamicamente, riflettendo istantaneamente le modifiche che avvengono in tempo reale.
Queste sono le Realtime Applications.
Una realtime application è un'applicazione in cui le informazioni vengono trasmesse e aggiornate tra il server e il client (il browser o l'app dell'utente) con un ritardo minimo o nullo.
A differenza delle applicazioni tradizionali che richiedono un refresh manuale della pagina o polling frequente per ottenere nuovi dati, le applicazioni in tempo reale mantengono una connessione persistente che consente al server di "spingere" (push) gli aggiornamenti ai client non appena questi si verificano.
# Un esempio reale...
Quando collabori con altre persone su Google Drive, non devi continuamente aggiornare le liste di files o la pagina di un documento per vedere cosa hanno modificato gli altri.
Gli aggiornamenti appaiono sullo schermo quasi magicamente, nel momento stesso in cui vengono effettuate.
no audio
# Casi d'uso
Le applicazioni in tempo reale sono indispensabili in tutti quegli scenari in cui la tempestività dell'informazione è cruciale per l'esperienza utente o per la funzionalità stessa dell'applicazione.
- 1
Collaborazione in tempo reale
Permettono a più utenti di lavorare contemporaneamente sullo stesso documento o progetto e vedere istantaneamente le modifiche apportate dagli altri. - 2
Chat e messaggistica istantanea
Consentono lo scambio di messaggi senza ritardi apprezzabili. - 3
Aggiornamenti di dati in tempo reale
Borse valori, risultati sportivi, tracking di spedizioni, monitoraggio di sistemi. - 4
Notifiche push
Avvisi immediati su eventi importanti. - 5
Giochi multiplayer online
Sincronizzazione delle azioni, punteggi e attività dei giocatori
# Real Time con Supabase
Qui entra in gioco Supabase.
Immaginalo come un'alternativa open-source a Firebase, la tecnologia che Google utilizza per buona parte dei suoi progetti, progettata per semplificare drasticamente lo sviluppo del tuo backend.
Supabase è una piattaforma che ti offre una suite completa di servizi backend "pronti all'uso".
Il suo cuore è un potente database PostgreSQL, uno dei database relazionali più affidabili e diffusi al mondo.
Ma non si ferma qui!
- 1
Database
Un database PostgreSQL completo e scalabile. - 2
Authentication
Un sistema di autenticazione sicuro e flessibile. - 3
Storage
Uno spazio per archiviare e gestire file di ogni tipo - 4
Realtime
Capacità di ricevere aggiornamenti di database in tempo reale (perfetto per le realtime applications!). - 5
API automatiche e SDK
Genera automaticamente API RESTful e GraphQL direttamente dal tuo schema database e utilizza i vari SDK forniti per interagire con il database.
Introduzione a Supabase
# In questo corso...
In questo corso creeremo una TodoList collaborativa allo scopo di comprendere le dinamiche di base per lo sviluppo di applicazioni Realtime.
1
Creiamo database, tabelle e regole di sicurezza con Supabase
2
Sviluppiamo un'applicazione CRUD Angular (v.19 Zoneless)
3
Abilitiamo il realtime, creando un'applicazione collaborativa
4
Aggiungiamo il supporto Drag and Drop con Angular Material CDK
# Il progetto
Realizzeremo una TodoList che supporta tutte le operazioni CRUD (GET, POST, PATCH, DELETE) e in cui sarà abilitato un meccanismo realtime per notificare le modifiche automaticamente a tutti i client, ovvero gli utenti, collegati:
Demo progetto
# A Chi è Rivolto
Questo corso è perfetto per:
-
Sviluppatori FrontEnd che utilizzano Angular. Ad ogni modo, la maggior parte dei concetti sono applicabili a qualunque framework o libreria front-end dato che l'SDK che utilizzeremo è scritto in JavaScript e non specifico per una tecnologia.
-
Sviluppatori BackEnd che vogliono creare database, CRUD e applicazioni realtime in breve tempo, senza la necessità di sviluppare tutto da zero.
-
Chiunque voglia sperimentare : )
# Requisiti
L'applicazione è sviluppata interamente in Angular (v.19 Zoneless), quindi sarebbe meglio avere già un po' di confidenza cono questo framework, ma il corso è comprensibile da chiunque abbia un minimo di conoscenza JavaScript.
Chapters
1. Cos'è Supabase?
2. Creare il database
3. Row Level Security Policies
4. Creare il progetto Angular
5. Installare Angular Material
6. GET Todos
7. Go Zoneless and Fix Supabase bug con zoneJS
8. CRUD: ADD, PATCH, DELETE
9. Typing Todos
10. Form Inserimento
11. Angular Material & Styling
12. Collaborazione e aggiornamenti RealTime
Live Demo: Real Time & Collaborative TodoList
13. Drag And Drop Realtime con Angular CDK
14. Environment
Fabio Biondi
Fabio Biondi is Google Developer Expert in Angular
He is a freelance Front-End trainer, speaker, content creator and community manager
He is a freelance Front-End trainer, speaker, content creator and community manager
Testimonials
Here’s what the first students who had access to the preview think:
.Net Backend developer
Facile da seguire, eppure tratta un tema complesso come le Real Time App che è spesso uno sbatti (noi usiamo SignalR), per me nuovo SupaBase e mi ha davvero incuriosito!
Nella descrizione del corso sottolineerei maggiormente che SupaBase utilizza WebSocket “dietro le quinte” per abilitare il real-time essendo già integrato nella piattaforma. 🔝
Software developer
Il corso è molto interessante e piacevole, forse proprio perché è breve e leggero. Dai un'infarinatura generale su supabase, che poi è riutilizzabile anche in molti altri servizi simili.
Può essere utile per mostrare nuovi tool o framework che poi uno può approfondire da solo o tu in corsi specifici.
Oppure, al contrario, potrebbe servire per mettere insieme tecnologie viste in corsi più lunghi e dettagliati e mostrare come possano convivere insieme
Questo corso è disponibile solo ai membri di LearnByDo.ing
Membership
Con la MemberShip potrai accedere a:
Tutti i corsi e i libri di LearnByDo.ing
Corsi Esclusivi riservati alla Membership
Preview dei corsi in fase di sviluppo
Attestati di completamento
Funzionalità della piattaforma riservate ai membri
Note, appunti e cookbook ricchi di informazioni e snippets
Start today for free!
Create a LearnByDo.ing account for free to see all the protected content, get exclusive material, join giveaways, and use all the platform’s features