6. Firebase
6. Firebase
Tijdens deze oefeningenreeks breid je de Chat applicatie verder uit met meerdere kanalen, de mogelijkheid om kanalen aan te maken en profielen voor de gebruikers.
De oefeningen vertrekken van het lesvoorbeeld.
Startbestanden
Kanalen toevoegen
Momenteel worden alle berichten in hetzelfde kanaal geplaatst. We willen gebruikers de mogelijkheid geven om een kanaal dat het best bij het bericht past te selecteren
Voordat je dit kunt implementeren zijn er enkele aanpassingen nodig aan de routing structuur en de lay-out van de applicatie.
Routing
Verplaats de Chat component van de route /chat naar /chat/:channel, voeg dus een parameter toe waarmee de naam van het kanaal doorgegeven wordt. Hiervoor moet je een nieuwe layout-route definiëren die gebruik maakt van de Stack navigator.
Als de /chat/:channel route bezocht wordt, moet de naam van het kanaal uitgelezen worden en moet het volgende gebeuren:
- De titel van de pagina moet aangepast worden naar de kanaalnaam.
- De berichten van het kanaal moeten opgehaald in real-time worden.
Als de app opstart moet standaard het general kanaal getoond worden.
UI aanpassen
De gebruiker moet kunnen wisselen tussen de verschillende kanalen via een drawer menu. Schrijf een nieuwe component die dit menu implementeert Zorg ervoor dat het menu geopend kan worden via een knop in de header van de app. Gebruik de Drawer component van GlueStack om het menu te bouwen.
Om de inhoud van de drawer mooi onder de statusbar te plaatsen kan je gebruik maken van de useSafeAreaInsets hook. Deze hook geef de marge terug die door de SafeAreaView component toegevoegd is.
Bovenstaand menu moet gebruikt worden op de /chat/:channel en /chat/newChannel routes (die hieronder beschreven wordt).
New Channel page
Maak een nieuwe route '/chat/newChannel' aan waar de gebruiker een nieuw kanaal kan toevoegen. Deze route moet beschikbaar zijn via het side-menu.
Het "Public Channels" gedeelte in onderstaand screenshot wordt straks opgebouwd.
Via de /chat/newChannel pagina moet de gebruiker een nieuw kanaal kunnen aanmaken, hiervoor is natuurlijk een nieuwe interface nodig die de properties van een kanaal beschrijft.
export interface IChannel {
id?: string
isPublic: boolean
users: string[]
name: string
owner: string
}Bij het aanmaken van een nieuw kanaal mag je de isPublic property voorlopig op true zetten en de users array leeg laten.
Onderstaande video demonstreert de (voorlopige) werking van de /chat/newChannel route.
Overzicht van de kanalen ophalen
Schrijf een nieuwe hook die de publieke kanalen ophaalt in real-time en gebruikt deze hook vervolgens om het side-menu uit te breiden met een lijst van alle publieke kanalen.
Privékanalen
Momenteel kunnen gebruikers enkel publieke kanalen aanmaken, we willen echter ook de mogelijkheid geven om privékanalen te maken. Voordat we hieraan kunnen beginnen, moeten we echter de mogelijkheid voorzien om door de gebruikers te zoeken, anders kunnen we tenslotte geen kanaal delen.
Profielen aanmaken
Firebase staat het niet toe dat de gebruikers uit de authentication service rechtstreeks uitgelezen worden. Als we de gebruiker willen doorzoeken moeten we eerst voor elke gebruiker een profiel aanmaken. Een profiel is, in dit geval, niets anders dan een kopie van de gebruikersgegevens naar een collectie profiles.
Schrijf de nodige code zodat er na het inloggen gecontroleerd wordt of de gebruiker al een profiel heeft, indien dit niet het geval is, moet het profiel aangemaakt worden.
Privékanalen uitlezen
Schrijf alvast een hook die de privékanalen van de ingelogde gebruiker ophaalt. Hiervoor kun je de users array in een channel-object doorzoeken en enkel diegenen teruggeven waar de ingelogde gebruiker in de array zit. De vereiste filter kan je vinden in de documentatie.
Privékanaal aanmaken
Breid tenslotte de /chat/newChannel pagina uit met een switch die aangeeft of het nieuwe kanaal publiek of privé is. Als het om een privékanaal gaat, moet er een lijst van de gebruikers getoond worden die gefilterd kan worden via een zoekbalk.
In deze lijst kan de gebruiker andere gebruikers toevoegen aan het kanaal.
Onderstaande video illustreert de volledige werking van de privékanalen-functionaliteit.