Entwicklung von Webseiten - Development 101

Web Development 101, du betrittst!
Websites erstellen lernen, Git für Kollaboration begreifen.
Gitlab und npm nutzen, entscheidende Befehle für Teamwork meistern du musst!

1. Setup

Git - Version Control

Wenn mehrere Leute in einem Ordner arbeiten wollen, muss das irgendwie geregelt werden.

Dafür ist Git.

Git nutzt man in der Console.
Es gibt auch Programme dafür. Dann muss man die Befehle nicht immer selber eintippen.

Der Ordner indem gearbeitet wird, wird Repository (kurz: Repo) genannt.
Änderungen werden gespeichert (committed) und hochgeladen (gepusht).

Git merkt sich diese Speicherungen (Commits) und schafft es auch eine Datei, die von zwei Menschen separat bearbeitet wurde, zu einer zusammen zu führen.

Häufige Fragen

Git initialisieren
> git init


Änderungen speichern
Alle geänderten Dateien seit der letzten Speicherung für die nächste Speicherung anmelden (stagen).
> git add .
In anderen Worten: Alle Changes seit dem letzten Commit für den nächsten Commit stagen.

Speichern und dabei eine Überschrift für die Speicherung festlegen.
> git commit -m "Dies ist meine Überschrift"


Hochladen
> git push


Herunterladen
Bevor man seine Änderungen hochlädt, lädt man lieber erstmal die aktuelle Version des Repos herunter.
Könnte ja sein, dass jemand anderes seine Änderungen schon hochgeladen hat.
> git pull
In anderen Worten: Erstmal Pullen vorm Pushen um das Repo aktuell zu haben.
Wenn zwei Leute in einem Repo an der gleichen Datei nur für sich arbeiten wollen, können sie das parallel tun.

Dafür nutzen sie verschiedene Äste (Branches).

Gitlab - Online Server Using Git

Wenn mehrere Leute in einem Ordner arbeiten und Git benutzen, müssen die Daten von dem einen Rechner zum anderen Rechner und diverse Änderungen von Dateien zusammengeführt werden.

Dafür braucht es einen Anbieter, der einen Server online hat, der immer an ist.
Dort liegen die Dateien des Ordners.

Gitlab ist einer von vielen Anbietern. Github ist auch so.

npm - Package Manager

Viele haben schon voll die tollen Sachen programmiert, die andere auch gerne nutzen können.

Also wird der tolle Code in einen Ordner gepackt und nennt das dann Paket (Package).

In der package.json steht drin, welche Packages man herunterladen will.

Die werden dann alle in den Ordner node_modules gepackt.

Häufige Fragen

Herunterladen
Einmal die Packages herunterladen, die in der package.json stehen.
> npm install

Dabei merkt sich Npmdie aktuellen Versionen der Packages und speichert die in der packages.lock .

Wenn eine andere Person sich das Repo schnappt und was machen will, bekommt er exakt die gleichen Versionen der Packages.


Aktualisieren
Die Packages werden gerne mal aktualisiert. Nun steht aber in der packages.lock Datei drin welche Versionen benutzt werden müssen.

Wenn man die mal aktualisieren möchte, kommt dieser Befehl:
> npm update


Skript starten
Die Befehle um Skripte zu starten, wie zum Beispiel einen Webserver, will man nicht immer in die Console eintippen müssen.
In der packages.json gibt es den Teil der "scripts".
Diese kann man aufrufen mit
> npm run <befehl>

Spart zeit.

2. Meeting 1

Kommentare im Code

Immer Kommentare schreiben.

Kommentare sind wie eine Chat-Nachricht für das Zukunfts-Ich.

In Zukunft liest man entweder einen Kommentar und weiß direkt, was die nächsten Codezeilen machen oder man muss den Code lesen, was länger dauert.

Verschwendet nicht die Zeit von euren Zukunfts-Ichs.
Schreibt Kommentare.

Listen Loopen

Listen kennt jeder.
Listen werden beim Programmieren Arrays genannt.
Die Listeneinträge werden Elemente genannt.

Mit einer for-Schleife kann man jedes Element eines Arrays durchgehen.

Wenn man jedes Element eines Arrays durchgehen will und dabei jedes Element des Arrays verändert möchte, kann man "map" benutzen.

Ein "Array mappen" gibt es in jeder Programmiersprache.

Arrays vs. Objects

Wie viel steht auf der Liste? Was steht als drittes drauf?
Jedes Element eines Arrays hat eine Position.

Es gibt das 0. Element, das 1. Element, das 2. Element usw.
liste[0], liste[1], liste[2] usw.

Aber was ist, wenn man die Elemente benennen möchte?
Dann nimmt man ein Object.
Das ist quasi wie eine Liste nur dass die Elemente einen Namen haben.

liste["ein element"],
liste["key für noch ein element"],
liste["was-ein-element"]