4. Native modules
4. Native modules
Tijdens deze les bouw je verder op de uitgewerkte voorbeelden van de theorieles. Tijdens deze les oefen je op:
- Het installeren/configureren van native modules
- Het gebruik van SQLite
Startbestanden
Gallery
Gebruik de ImagePicker module om de gebruiker een afbeelding te laten kiezen uit de galerij in de plaats van een foto te laten nemen via de camera.
Voeg een nieuwe knop toe die de galerij opent.
Via deze nieuwe knop wordt de image picker geopend, de gebruiker kan een afbeelding kiezen en deze vervolgens bewerken. Hiervoor wordt standaard een breedbeeld-portret kader getoond (9:16).
Onderstaande video toont het eindresultaat van deze oefening.
To-Do
Breid de To-Do applicatie uit zodat de labels ook in SQLite worden opgeslagen.
Label tabel
Voeg een nieuwe tabel Label toe aan de database en voorzie hooks voor de CRUD-operaties. Implementeer daarnaast ook een seed functie die de 3 default labels toevoegt als de tabel leeg is.
Zorg er vervolgens voor dat alle CRUD-operaties op de labels pagina werken via de nieuwe hooks.
Veel-op-veel relaties
Om de veel-op-veel relatie tussen labels en taken te implementeren moet je verschillende stappen doorlopen. Deze worden hieronder één-per-één besproken met de nodige documentatielinks.
Schema definiëren
Bouw een nieuwe tabel TaskLabel die twee foreign keys bevat (naar de task en label tabel) en de combinatie van deze twee keys als primary key gebruikt. Je vindt een heel gelijkaardig voorbeeld in de documentatie. Gebruik een cascade relatie voor beide foreign keys, meet info in het foreign key actions onderdeel van de documentatie.
Queries aanpassen
De getTask en getTasks functies geven momenteel een lege array met labels terug. Pas de queries in deze functies aan zodat de labels voor elke taak via een join opgehaald moeten worden, je kan voorbeelden vinden in de documentatie.
Enkel een join toevoegen is niet voldoende, je moet de data ook nog mappen. Als je de joins juist geschreven hebt, krijg je data terug die voldoet aan het onderstaande type.
export type ITaskLabel = {taskId: number; labelId: number}
export type ITasksWithLabels = {Task: Omit<ITask, 'labels'>; Label: ILabel | null; TaskLabel: ITaskLabel | null}[]Zoals het type beschrijft, zijn er meerdere rijen één taak, één voor elke label dat aan de taak gekoppeld is. Schrijf een functie die door de array itereert en alle labels groepeert per taak. Probeer dit eerst zelf, als het niet lukt kan je onderstaand stappenplan bekijken.
Stappenplan om de mapping functie te schrijven
- Maak een variabele aan die het id van een taak mapt naar de taak zelf.
- Itereer door alle rijen:
- Als de taak nog niet in de map zit, voeg deze toe met een lege array voor de labels.
- Als het label niet null is, voeg deze toe aan de labels array van de taak.
- Geef de values uit de map terug via Object.values.
Labels bewaren
Pas de createTask en updateTask functies aan zodat de geselecteerde labels weggeschreven worden naar de database. Voor de updateTask functie moet je de oude, niet langer geselecteerde, labels ook nog verwijderen.