Periode 1 - BibekMA/connect-your-tribe-profile-card GitHub Wiki

Analyseren

De opzet

We hebben uitgelegd gekregen wat Node.JS is en zijn direct begonnen met het opzetten van Node.js op onze laptop

  • Als eerst heb ik de instructies.md gescand en vervolgens de eerste paar stappen goed doornomen.
  • Als volgt heb ik de leertaak geforked/cloned in mijn VS code
  • Om de node.js installatie af te maken had ik in mijn Terminal de NPM geïnstalleerd
  • Daarnaast had ik ook mijn visite kaartje in het mapje Public gezet
  • Als laats was ik een beetje aan het experimenteren met de files die in vieuws stonden

Nu alls is opgezet kunnen we dinsdag verder met daadwerkelijk coderen. Als ik het goed heb begrepen krijgen we stap voor stap alles uitgelegd tijdens de les van morgen.

Ontwerpen

layout

Als eerste heb ik een schets gemaakt voor de layout van de profile card.

Scherm­afbeelding 2024-02-07 om 20 57 36

breakdown profile card

Hier staat de breakdown schets van de profile card. Onderin staat welke kleur voor wat staat.

layout profile card 2

Bouwen

NodeJS

Hier heb ik mijn nodeJS geschreven.

   <img src= <%= avatar %> alt="">
   <h1><%= name %></h1>
   <h2><%= nickname %></h2>
   <div></div>
   <h3>Bio</h3>
   <p><%= bio %></p>
"id": 19,
"name": "Bibek",
"prefix": "",
"surname": "Mainali",
"role": [
"member"
],
"nickname": "",
"github_handle": "",
"website": "",
"bio": "🫡",
"avatar": "",
"email": "",
"phone_number": "",
"squad_id": null,
"custom": ""

Scherm­afbeelding 2024-02-09 om 09 41 12 Scherm­afbeelding 2024-02-09 om 09 40 43 Scherm­afbeelding 2024-02-09 om 09 42 37

Terminal

Om de terminal te openen heb je een schortcut in VS code. Control `
Als je vervolgens de terminal weer te sluiten doe je dit Control C

Ook kun je een voorbeeld van je visite kaartje openen: NPM start Als die gestart is kun je vervolgens op de link klikken om naar het voorbeeld toe te gaan

Scherm­afbeelding 2024-02-05 om 16 55 05

Nodemon

In onze code hebben we nodemon gedownload via de terminal. Met nademon hoef je niet elke keer je de terminal te stoppen en starten om je update te zien. Het werkt dus een beetje het zelfde als de live server, elke keer als je er iets veranderd in je code, verandert dat mee in je local host.

  • als eerst heb ik nodemon geïnstalleerd via de terminal
  • als volgt heb ik hem in mijn code gezet.

Toen ik de de site live wilden zetten kreeg ik een error over nodemon, blijkbaar werkt nodemon niet in cyclic. Zo heb ik het opgelost

"dev": "nodemon server.js"

Scherm­afbeelding 2024-02-07 om 20 52 56

Integreren

Cyclic

Ik heb de wesbite live gezet in cyclic https://clever-teal-slippers.cyclic.app

Testen

code/design review

Vrijdag 9-02

Lesley

Tom

https://github.com/TomDeeterink1/connect-your-tribe-profile-card/issues/4 https://github.com/TomDeeterink1/connect-your-tribe-profile-card/issues/3

Sammie

Yujin

https://github.com/yujing-student/connect-your-tribe-profile-card/issues/5 https://github.com/yujing-student/connect-your-tribe-profile-card/issues/3

Evaluatie

We hebben heel wat informatie gekregen over Node.JS en het ziet er allemaal niet makkelijk uit, maar dit zelfde gevoel had ik ook aan het begin van het jaar toen ik HTML en CSS zag. Ik ben er daarom van overtuigd dat ik het uiteindelijk wel zal begrijpen, alleen zal dit vast niet makkelijk zijn 😣😄

handelt respectvol naar andere

https://github.com/yujing-student/connect-your-tribe-profile-card/issues/6

https://github.com/koeenm/connect-your-tribe-profile-card/issues/4

https://github.com/SamaraFellaDina/connect-your-tribe-profile-card/issues/8

https://github.com/TomDeeterink1/connect-your-tribe-profile-card/issues/6

⚠️ **GitHub.com Fallback** ⚠️