Project Tech - Adriaan350/blok-tech GitHub Wiki

Week 1

Job story

Wanneer ik de app open wil ik kunnen inloggen zodat ik de app kan gebruiken met opgeslagen accountgegevens.

Wireframe

scherm1 scherm2 scherm3

Requirement list:

  • De webapp moet een registreer systeem hebben
  • De webapp moet mensen kunnen laten inloggen en uitloggen
  • Gebruikers moeten hun account kunnen verwijderen
  • Gebruikers moeten hun wachtwoord kunnen aanpassen
  • Gebruikers moeten kunnen kiezen uit de grootste sporten in eerste instantie

Concept

Mijn app gaat over dat je teamgenoten kunt vinden voor elke sport. Dus als de gebruiker een teamgenoot zoekt in bijvoorbeeld volleybal, dan kan de gebruiker een accountje aanmaken en vervolgens klikken op Volleybal. Daarna komen er allemaal volleybal spelers langs die de gebruiker kunt liken en disliken. En als er 2 gebruikers elkaar een like geven dan kunnen ze chatten en afspreken om een team te vormen. Research

Open source is dat de code te zien is voor iedereen. Een goed voorbeeld is het operating system; Linux. Dit operating systeem is open source en daarom zijn er heel veel verschillende versies (distros). Deze zijn allemaal gebaseerd op de open source Linux code.

Terminal

Het was wat lastiger de terminal werkend te krijgen. Maar als het werkt dan werkt het ook soepel. Als de Ubuntu terminal goed geïnstalleerd is werkt het ook meteen in Visual studio code.

Back-end Research

Mongoose

Omdat we gebruik gingen maken van MongoDB en niet MySQL, ging ik zoeken naar manieren om te verbinden met de database. De 'gewone' oplossing was geweest om het alleen met express te doen. Maar toen kwam ik een tutorial tegen die mongoose gebruikte en dat leek stukken overzichtiger. Bij Mongoose maak je gebruik van schema's en daarin kan je heet overzichtelijk zien wat wordt opgehaald en geplaatst in de database. Bij mij is dat dus:

const UserForm = new mongoose.Schema({
    email: {
        type: String,
        require: true,
        unique: true
    },
    username: {
        type: String,
        require: true,
        unique: true
    },
    password: {
        type: String,
        require: true
    },
    name: {
        type: String,
        require: true,
    },
    age: {
        type: Number,
        require: true,
    }
});

Hier is duidelijk te zien wat voor verschillende data in de database wordt geplaatst en wordt opgehaald.

Passport

Ik heb voor passport gekozen, omdat er in veel uitlegvideo's over mongoose login en nodejs login passport gebruikt wordt.

Bcrypt

Om het veilig te houden moest ik de wachtwoorden kunnen laten hashen. Ik ging opzoeken wat een goede manier was, en de eerste 10 google results waren over Bcrypt. Dus ik begon tutorials te volgen over hoe ik Bcrypt kan toepassen.

Handlebars

De meeste mensen hebben EJS gekozen en ik zou daar in eerste instantie ook voor gaan. Maar ik dacht ik moet op z'n minst research doen in andere mogelijkheden en toen kwam ik op Handlebars. Handlebars leek in mijn opzicht veel fijner om te gebruiken omdat de manier hoe je andere onderdelen kan importeren in html bestanden leek heel fijn.

Week 2

Markdown

Markdown is erg simpel en snel te begrijpen. Hoe meer hashtags voor een woord of zin hoe kleiner de heading. Er kunnen mooie code blokken in worden weergegeven door middel van deze dingen; js //hier de code

Git

Ik heb een git cheetsheet gemaakt om te weten hoe ik kan comitten, pushen, pullen etc.

Week 3

Tekst editors

Mijn allereerste gedachte toen ik een tekst editor moest kiezen was Visual Studio Code. Puur omdat ik daar de beste ervaringen mee heb. Toch ben ik gaan kijken naar alternatieven die ik nog niet kende. En alternatieven die ik eerder gebruikt heb maar misschien updates hebben ontvangen die mij terug kunnen halen. De tekst editors die ik eerder gebruikt heb zijn Sublime text en Atom.

Sublime text:

Bij sublime text was eigenlijk niks veranderd. Daar vond ik het al meteen vervelend dat je een licentie moet invullen en de manier waarop de menu’s in elkaar zitten vond ik vervelend.

Atom:

Atom is een tekst editor waar ik ongeveer 2 jaar in gewerkt heb. Maar de standaard dingen die erin zitten zijn niet te vergelijken met visual studio code. De standaard linter in VSC vind ik veel fijner en de html vind ik ook fijner ‘automatisch’ gaan in VSC. Ik weet dat ik het kan aanpassen voor Atom maar als dat niet hoeft met Visual studio dan zijn de extensies overzichtelijker puur omdat het er minder zijn. De text editors die ik nog nooit heb gebruikt zijn voor programmeren zijn Notepad++ en Brackets.

Notepad++

Om te beginnen met notepad++. Ik vond deze er qua looks al helemaal niet fijn uitzien. Ook heeft het geen darkmode wat eigenlijk een must have is voor mij. Omdat het niet op programmeurs gefocust is vind ik het al sowieso geen optie.

Brackets

Bij brackets merk ik dat het langer duurt om op te starten. De standaard kleurenschema’s van brackets vond ik niet zo fijn.

Nadat ik mijn text editor heb gekozen (Visual Studio Code) was het tijd om goed te kijken welke instellingen ik wil gebruiken en welke extensies ik wil installeren.

Instellingen/extensions

De instellingen van VSC heb ik bijna default gelaten. De extensies die ik geïnstalleerd heb zijn:

Live server:

Deze heb ik vorig jaar geïnstalleerd om samen te werken met anderen. Dit zal waarschijnlijk ook wel handig zijn bij het teamproject hierna.

Markdown All-in One:

Deze is erg handig om in 1 keer een inhoudsopgave te maken.

Linting

Ik gebruik eigenlijk alleen de standaard formatter in VSC. Die werkt goed en doet wat ik wil.

Week 4

Deploy

Eerst ben ik gaan werken met DigitalOcean en daar lukt het maar niet, ik bleef maar een error krijgen. Toen ben ik een paar uur later naar Heroku gegaan en toen zag ik een hele handige uitleg video en moest ik dus de port goed toepassen in mijn code. Toen ik dat deed werkte mijn applicatie meteen met Heroku. Maar tot mijn verbasing werkte daarna mijn applicatie ook met DigitalOcean en toen ben ik weer terug gegaan om één hele simpele reden; geld. Ik heb geld betaald om mijn account aan te maken bij DigitalOcean dus ik wilde ook wel mijn geld eruit halen.

Bronnen

Documenting your projects on GitHub · GitHub Guides. (z.d.). Github. https://guides.github.com/features/wikis/#creating-your-wiki

Microsoft. (2016a, april 14). Visual Studio Code Themes. https://code.visualstudio.com/docs/getstarted/themes

Microsoft. (2016b, april 14). Visual Studio Code User and Workspace Settings. https://code.visualstudio.com/docs/getstarted/settings

TrustRadius CAPTCHA. (z.d.). TrustRadius. https://www.trustradius.com/products/brackets/reviews

Visual Studio Marketplace. (z.d.). Microsoft. https://marketplace.visualstudio.com/

Wes Bos. (2015, 9 april). Command Line Basics – Command Line Power User (2/11). YouTube. https://www.youtube.com/watch?v=DP218aBHm1Q

Wes Bos. (2016, 4 maart). Mastering Markdown — Series Trailer. YouTube. https://youtube.com/watch?v=Je5w18nn-e8&list=PLu8EoSxDXHP7v7K5nZSMo9XWidbJ_Bns3

Wes Bos. (2019, 12 maart). ESLint + Prettier + VS Code — The Perfect Setup. YouTube. https://www.youtube.com/watch?v=lHAeK8t94as