Profielen aanmaken

De basis voor een matching applicatie is het aanmaken van het profiel. Zonder de gegevens van de gebruiker valt er natuurlijk weinig te matchen. Bij dogeMeet maken we niet alleen het gebruikersprofiel aan maar tegelijkertijd ook het profiel voor je hond. De bedoeling is wel om te matchen op basis van je hond.

Job story

• Wanneer ik gebruik maak van de applicatie wil ik een eigen profiel kunnen aanmaken om mijn eigen gegevens terug te kunnen zien.
• Wanneer ik gebruik maak van de applicatie wil ik naast mijn eigen profiel, een profiel voor mijn hond kunnen aanmaken zodat ik op basis van mijn hond kan matchen met andere honden.

De feature

De feature begint met het invoeren van gegevens van de gebruiker. Dit blijft beperkt tot de naam, email, wachtwoord en profiel foto aangezien wij niet matchen met onze eigen profiel maar met die van onze hond. Nadat alle gebruikersgegevens zijn ingevoerd gaan we direct verder met het invullen van de gegevens van je hond. Wat is de naam van je hond, wat voor soort ras, hoe oud is je hond, wat voor vibe straalt je hond uit, waar loopt jouw hond het liefst rond en als laatste natuurlijk een foto van je hond. Op basis van deze gegevens kunnen we honden aan elkaar matchen.

Hoe werkt het?

Stap 1.

De eerste stap is om een gebruikersprofiel aan te maken en dit toe te voegen aan de database. Omdat wij geen gebruik maken van sessions heb ik handmatig een id toegevoegd die wij later kunnen ophalen om andere data aan de gebruikersprofielen te kunnen toevoegen. We beginnen eerst met aanmaken van een id, de ingevoerde naam, email en wachtwoord. Dit wachtwoord wordt dan gehasht door een andere teamlid. Nadat de gebruiker op 'verder' drukt wordt er een email verstuurd via node-mailer (zie topic) met een bevestiging van de naam, email en wachtwoord van de gebruiker.

JS

const userProfile = {
        _id: '01',
        name: req.body.name,
        email: req.body.email,
        password: req.body.password
    };

await database.collection('users').insertOne(userProfile);
console.log(userProfile);

Stap 2.

De tweede stap is het toevoegen van een profielfoto voor de gebruiker. Dit kan via de module Multer. Na het toevoegen van de foto hebben we alle gegevens die we nodig hebben voor de gebruiker zelf. Maak eerst een formulier aan in je template en vergeet de enctype er niet bij te zetten.

Template

form(method='POST' action='/addUserPhoto' enctype='multipart/form-data')
     div(class="profile_container")
     label Upload profile picture
     input(type='file' name='userPhoto')

Daarna kan je de volgende code toevoegen aan je JS bestand. In diskStorage kan je gegevens invoeren over hoe je je bestand wilt uploaden. Denk aan bestandsformaten, grootte van het bestand, waar je je bestand wilt opslaan, hoe je bestandsnaam gaat heten etc.

JS

const storage = multer.diskStorage({
    destination: './static/public/images/uploads',
    filename: function(req, file, cb){
    cb(null,file.fieldname+ path.extname(file.originalname));
    }
});

const upload = multer({storage: storage});

app.post('/userPhoto', upload.single('userPhoto'), (req, res) => {
        console.log (req.file)
        res.render('createDogProfile', {
        file: req.file.originalname
        });
      
  });

Stap 3.

De derde stap is het toevoegen van het hondenprofiel. Dit is gekoppeld aan het gebruikersprofiel zodat de gebruiker een overzicht heeft over zijn hond. In deze stap voegen wij een aantal gegevens toe:

• De naam van de hond
• De leeftijd van de hond
• Het ras
• De vibe (persoonlijkheid) van het hond. Is je hond cute, fluffy, chubby, relaxed etc.
• De locaties waar je hond van houdt. Is hij/zij meer een parkliefhebber of het strand? Zo kan je uit een aantal opties kiezen.

JS

// Get the database connection
    database = req.app.get('database');
    let dogProfile = {
        doggoId: '10',
        name: req.body.name,
        age: req.body.age,
        breed: req.body.breed,
        description: req.body.description,
        vibe: req.body.doggo_vibes,
        location: req.body.location
    };
    await database.collection('doggos').insertOne(dogProfile);
    console.log(dogProfile);

Stap 4.

De laatste stap is het toevoegen van een leuke foto van je hond. Je kan niet matchen zonder een foto toch? Dit wordt uiteindelijk ook toegevoegd aan het hondenprofiel. Dit een herhaling van stap 2. Vergeet alleen niet de namete veranderen in je template en JS bestand.

Stap 5.

In de laatste stap van mijn feature krijg je een overzicht met de ingevulde gegevens van zowel de gebruiker als de hond. Zo kan je alle gegevens nog dubbelchecken voordat je begint met het matchen van honden. Je hebt de optie om je gegevens nog te wijzigen of om op te slaan.

JS

router.get("/fullProfile",  async (req, res) => {
    let getProfile = null;
    let getDogProfile = null;
    const userInfo = {
        name: req.body.name,
        email: req.body.email,
        password: req.body.password
    };
    const dogInfo = {
        name: req.body.name,
        age: req.body.age,
        breed: req.body.breed,
        description: req.body.description,
        vibe: (req.body.doggo_vibes),
        location: req.body.location
    };
try {  
    // Get the database connection
    database = req.app.get('database');
    const userQuery = { _id: '01'};
    getProfile = await database.collection('users').findOne(userQuery);
    
    const dogQuery = { doggoId: '10'};
    getDogProfile = await database.collection('doggos').findOne(dogQuery);
    
    console.log(getProfile)
    console.log(getDogProfile)

} catch (error) {
    console.error(error);

    } finally {
    res.render('fullProfile', {
        userInfo:getProfile,
        dogInfo:getDogProfile
        });
    }
});

Template Voor de gebruikersprofielen gebruik je userInfo.

label(for='name') Name
input(type='text' name='name' value=userInfo.name)

Voor de hondprofielen gebruik je dogInfo.

label(for='name') Name
input(type='text' name='name' value=dogInfo.name)

---

Bronnen

1. db.collection.insertOne() — MongoDB Manual. (z.d.). Mongodb. Geraadpleegd op 20 juni 2021, van https://docs.mongodb.com/manual/reference/method/db.collection.insertOne/

2. db.collection.findOne() — MongoDB Manual. (z.d.). Mongodb. Geraadpleegd op 20 juni 2021, van https://docs.mongodb.com/manual/reference/method/db.collection.findOne/

3. npm: multer. (2019, 16 juli). Npm. https://www.npmjs.com/package/multer

4. Traversy Media. (2017, 16 oktober). Node.js Image Uploading With Multer [Video]. YouTube. https://www.youtube.com/watch?v=9Qzmri1WaaE