Week 2 - MrSmarto/Anime-Smarty GitHub Wiki

Project Tech

In week twee moesten wij opzoek gaan naar populaire repositories op Github. Om onderzoek te doen naar hoe zo'n populaire readme is opgebouwd.

Ik kwam op de volgende repositories:

  1. chatGPT
  2. 30 days JS
  3. Chess
  4. Help Ukraine

Dingen die ze overeen hebben:

  • Bugs
  • Snelle handleiding
  • Geen complete documentatie in de README. Maar wel in de WIKI.
  • Inhoudsopgave
  • Links naar meer info
  • Plaatjes
  • Specificaties / Installatie
  • Licentie
  • (Screenshots als voorbeeld)

Git

Git in het algemeen is een systeem/protocol. Waardoor je versie beheer voor je code kan toepassen.

  1. Mocht je een fout maken, kan je heel gemakkelijk je vorige versie terug halen.
  2. Maakt het makkelijk om samen te werken.

Je code staat ergens centraal. En door GIT te gebruiken kan je gemakkelijk code naar je lokale device te brengen en daar bepaalde veranderingen maken. In dit geval staat mijn code op github. Git werkt dus niet alleen met Github, het zou dus met allerlei verschillende soorten programma's zoals github kunnen werken.

  1. Git Pull Hier haal je de data van de algemene plek waar de data is opgeslagen (github).

  2. Git Add (Git remove mocht je een bestandje willen verwijderen) Zodra je jouw wijzingen hebt gemaakt. Add je deze in je lokale device als een soort pakket.

  3. Git Commit Als je tevreden bent met het pakket dat je hebt gemaakt dan commit je.

  4. Git Push Als laatste stuur je het nieuwe pakket dat je zelf hebt aangepast naar github. Waar andere personen dan weer verder kunnen werken met jouw code.

Je kan dus ook via visual studio code met GIT werken. Het is handig om eerst met de CLI te werken, zodat je de commando's leert. Vervolgens is het handig om bijvoorbeeld met VSC te werken.

Backend Development

Client (request)

  • De actie van de user
  • Is vaak op de web browser
  • wilt een response back

Server (response)

  • Een maschine die wacht op een aanvraag
  • Stuurt de response terug naar de gebruiker

Request = de url die je in je browser invoert response = de html maar ook css, plaatjes etc

Metadata wordt opgeslagen in de header. Daaruit kunnen we uitlezen of een request is gelukt. Headers kan je ook goed customizen, zelfs besplissen wat voor content type je mee stuurt etc.

Express

How does the app instance work? What makes it possible you can do things like app.get or app.listen?

  • app.get() is used to define a route for the HTTP GET method. When a client makes a GET request to a specific URL, the function you pass to app.get() will be executed.

  • app.listen() is used to start the Express application listening for incoming requests on a specific port. When you call app.listen(), the application starts listening for incoming requests, and any routes you have defined using app.get() will be executed when the corresponding URLs are requested.

In summary, the app instance is a representation of an Express application, which provides a set of properties and methods that you can use to define the behavior of your web application. app.get() and app.listen() are examples of such properties and methods that are available on the app instance, and they allow you to define routes and start the application listening for incoming requests, respectively.

Frontend Development

Hoe zouden we progressive enhancement kunnen toepassen op ons eigen project? Daarnaast hebben we ook veel voorbeelden en live demo's gekregen van Robert. Als laatste hebben we kunnen zien hoe API's toegepast kunnen worden op een website.