Les 6: Firebase
Les 6: Firebase
Tijdens deze oefeningenreeks leer je Firebase gebruiken. Je begint met de configuratie van je project en vervolgens maak je gebruik van Firestore om extra features te voorzien in de chat app.
Deze oefening vertrekt dus van de uitgewerkte voorbeeldcode van de theorieles.
Oefening 0: Configureer je project
Download het lesvoorbeeld en begin met het aanmaken van een keystore om je Android project te ondertekenen.
Maak een Firebase project aan, waar je vervolgens een web en Android app aan toevoegt. Zoek de SHA-hashes van de keystore en voeg deze toe aan Firebase.
Zorg dat de Firebase configuratie op de juiste plaats in je Angular en Android project komt te staan.
Voeg vervolgens Google en phone authentication toe aan je Firebase project. Als alles correct geconfigureerd zou je het voorbeeldproject moeten kunnen uitvoeren en moeten kunnen inloggen. Je zou ook boodschappen moeten kunnen versturen in het "General" kanaal.
Test, voor je verder gaat, dat zowel de Android versie als de webversie correct werken.
Oefening 1: Extra kanalen
Ga naar de Firestore configuratie van je Firebase project en maak daar een nieuwe collectie "Channels" aan. Voeg in deze collectie het kanaal "General" toe en twee nieuwe kanalen, "React" en "Mobile apps". In het uitgewerkte lesvoorbeeld vind je een datatype Channel, dit toont je de eigenschappen die bewaard moeten worden voor een kanaal.
Schrijf in de DatabaseService een nieuwe methode retrievePublicChannelList. Deze methode moet alle kanalen teruggeven. Gebruik deze methode vervolgens om in het menu een lijst te tonen van alle kanalen. Natuurlijk moet je na een klik op een kanaal naar de juiste pagina gebracht worden.
Oefening 2: Kanalen aanmaken
Voeg aan het menu een extra optie toe waarmee een nieuw kanaal aangemaakt kan worden. Het nieuwe kanaal wordt aangemaakt de ingelogde gebruiker als eigenaar, gebruik het UUID van de gebruiker om dit te bewaren. Gebruik een array voor het users attribuut, in deze array zit voorlopig enkel de eigenaar. Nadat het kanaal aangemaakt is wordt de gebruiker naar het nieuwe kanaal gestuurd, daarnaast moet het nieuwe kanaal, als alles correct geprogrammeerd is, ook in het menu verschijnen.
Oefening 3: Kanalen filteren
Schrijf een nieuwe methode retrieveMyChannelList die de kanalen ophaalt waar de gebruiker in de users array zit. We kunnen de publieke kanalen en de kanalen waarin de gebruiker ingeschreven is niet in één keer ophalen. Firebase ondersteund geen or.
Gebruik deze methode om een extra sectie aan het menu toe te voegen, deze sectie toont de kanalen waarin de gebruiker ingeschreven is. Aangezien je 2 groepen kanalen hebt, bouw je een extra component die een kanalen groep implementeert. Het is niet erg als een kanaal in beide lijsten staat.
Oefening 4: Gebruikers
Firebase authenticatie is gemakkelijk, maar er is één groot nadeel. Het is niet mogelijk om door de gebruikers te zoeken. Omwille van beveiligingsredenen is het ook geen goed idee om zo'n functie te voorzien. Maar aangezien we met de gratis versie van Firebase werken en geen server hebben waarop we de Admin SDK kunnen gebruiken, moeten we een alternatief zoeken. We kunnen elke gebruiker bewaren in een nieuwe collectie in de database.
Zorgt dat na het inloggen gecontroleerd wordt of een gebruiker voor de eerste keer inlogt. Als dit zo is moet de gebruiker weggeschreven worden naar een collectie profiles in de database. Een profiel bestaat uit een id, een naam, een email-adres en profile photo. Dezelfde gegevens dus, als een Firebase profiel.
Oefening 5: Privé kanalen
Zorg er voor dat de eigenaar, tijdens het aanmaken van een nieuw kanaal, de mogelijkheid heeft om een gebruiker toe te voegen aan een nieuw (privé) kanaal. Gebruikers kunnen toegevoegd worden door middel van een zoekbalk, die op basis van de profielnaam werkt. Voor meer info over hoe je dit doet, verwijzen we je door naar de documentatie. Let op, Firestore ondersteund geen case insensitive filters.
In onderstaande gif zijn 2 gebruikers ingelogd met een verschillende Google Account. Je kan ook gebruik maken van de GSM versie en zo inloggen op een andere account. Als je met 2 Google Accounts werkt, op eenzelfde computer, dan moet dit in twee verschillende browsers. Firestore is niet geconfigureerd voor persistentie over verschillende tabbladen.