# Week 4

Maak een folder week-4 aan binnen de reeds aangemaakte folder tijdens de workshop “Start-to-ICT” in de module “Informatie en data geletterdheid (opens new window)”. Maak vervolgens de folders college (voorbeelden uit het hoorcollege) en exercises aan binnen de week-4 folder.

Mappen & bestanden

artevelde/
- pgm-code/
  - pgm-2/
    - week-4/
      - exercises/
        write_read_file.js
        
        transform_object_csv_file.js
        
        transform_csv_to_object.js

macOS

Het volledige pad naar de map (Eng. folder) ziet zo uit. («username» is jouw gebruikersmap.)

/Users/«username»/artevelde/pgm-code/pgm-2/week-4/exercises

Open de map week-4 in VS Code (opens new window).

Windows

Het volledige pad naar de map (Eng. folder) ziet zo uit. («username» is jouw gebruikersmap.)

C:\Users\«username»\artevelde\pgm-code\pgm-2\week-4\exercises

Open de map week-4 in VS Code (opens new window).

Tip

Schrijf zelf bij elke oefening voldoende commentaar, zodat je achteraf zelf nog weet wat de code doet.

# Saving and reading text

Maak een bestand write_read_file.js aan.

1. Vraag de input van de gebruiker:

fileName
textContent

node write_read_file.js [fileName] [textContent]

Voorbeeld:

node write_read_file.js hello.txt "Hello Associate Degree in Programming"

2. Schrijf de textContent weg naar de fileName

3. Lees deze fileName in

4. Log de content van dit bestand naar de console

# Server

Maak een bestand server.js aan.

Maak een server aan met Node JS, surf naar de pagina.

Zorg ervoor dat de tekst die getoond wordt op de pagina instelbaar is.
Maak de poort van de server ook instelbaar.

# Routing

Maak een bestand routing.js aan.

Maak een server aan met Node JS op poort 3000 en log je verzoek. Toon nu op de pagina een titel afhankelijk van je slug.

Navigeer naar volgende url’s en toon bijhorende tekst.

/about: ‘Wij zijn PGM-studenten.’
/contact: ‘Contacteer ons’
/: ‘PGM Gent’

# Custom Module

Maak je eigen simpele lokale Node Module in een bestand genaamd date.js. In je index.js bestand require je deze module en gebruik deze om het huidige tijdstip te tonen, zorg ervoor dat het tijdstip geformat is op basis van je locale.

Exporteer in je module op twee manieren, module.exports en exports.yourProperty.

# Uitbreiding Custom Module

Breid je vorige module verder uit en voeg de mogelijkheid toe om:

Het huidige jaar te tonen
Het huidige tijdstip te tonen, hier kan je de locale instellen! Dit wil zeggen dat je een argument zal kunnen meegeven. Test dit met volgende locales: en-US, ko-KR, nl-BE
De huidige dag te tonen, hier kan je de locale instellen! Dit wil zeggen dat je een argument zal kunnen meegeven. Test dit met volgende locales: en-US, ko-KR, nl-BE

Tip

Functies die rekening houden met de locale werken pas betrouwbaar sinds node 13, controleer dus of je deze versie gebruikt. Indien dit niet het geval is kan je makkelijk switchen met NVM.

# Package.json

In deze oefening maken we opnieuw een custom module maar zullen we deze niet zomaar in een lokaal bestand opslaan en importeren. We maken onze module zo abstract dat we deze bijvoorbeeld kunnen uploaden op Github of zelf Node Package Manager, dan kunnen andere developers deze gebruiken in hun projecten.

Het doel van onze module is een willekeurige kleur te selecteren uit een lijst van kleuren.

Maak een folder genaamd pgm-modules
In deze folder maak je twee subfolders: colors en my-app
colors
- Initialiseer npm met npm init in de colors-folder
- Maak in de folder een index.js bestand
  - In dit bestand definieer je een klasse genaamd Color
    - Een kleur heeft een naam én een hex code
  - Maak een array genaamd allColors met 6 kleuren.
  - Exporteer een je array en je functie om een willekeurige kleur te selecteren.
my-app
- Initialiseer npm met npm init in de my-app-folder
- Installeer je eigen custom module: npm install --save ../colors
- Controleer of deze is toegevoegd aan de dependencies.
- In je app kan je nu de externe module requiren en de boodschap tonen:
```
console.log(`You should use ${chosenColor.name} on your website. It's HTML code is ${chosenColor.code}`);
```
  1

# Tranform objects to CSV and save it

Maak een bestand transform_object_csv_file.js aan.

Beschrijf gebruikers (Eng. users) via een object literal met de volgende eigenschappen voor een gebruiker:

firstName (string)
lastName (string)
nickName (string)
class (string)

Een gebruiker object bevat daarnaast ook een toCSVString() die de waarden van alle eigenschappen teruggeeft als waarde1,waarde2,waarde3,waarde4.

Converteer de lijst van gebruikers naar een string:

firstName,lastName,nickName,class
waarde1,waarde2,waarde3,waarde4
waarde1,waarde2,waarde3,waarde4
waarde1,waarde2,waarde3,waarde4
...

1
2
3
4
5

Bewaar de string in een file. Open vervolgens deze file in Excel.

# Read CSV, transform it to objects

Maak een bestand transform_csv_to_object.js aan.

1. Maak een kopie van het companies.csv bestand en bewaard deze lokaal

2. Inladen van het companies.csv bestand

3. Transformeer de ingeladen data naar een array van objecten, elk object hierbinnen heeft de volgende structuur:

{
    name: 'Figure 8 BVBA',
    street: 'Tuinwijklaan',
    houseNr: '79',
    postalCode: '9000',
    city: 'Gent',
    country: 'Belgium',
    website: 'https://www.figure8.be/',
    linkedIn: 'https://www.linkedin.com/company/figure8',
    createdAt: 1599803280000,
    modifiedAt: 1599803460000
}

1
2
3
4
5
6
7
8
9
10
11
12

4. Log de array van object naar de commandline via console.

Week 3