Die Entwicklerumgebung Codespaces verwenden – Tutorial zu JavaScript

Um bei meinen Programmierrätseln miträtseln zu können, können Sie sich entweder eine lokale Entwicklungsumgebung aufsetzen. Das dauert eine Viertelstunde, das zeige ich Ihnen im nächsten Video. Sie können aber auch sofort loslegen, direkt in Ihrem Browser. Und das geht mithilfe von GitHub Codespaces. Das bedeutet, Sie haben eine vollwertige Entwicklungsumgebung in der Cloud und mit Ihrem Browser können Sie darauf zugreifen. Sie brauchen keine zusätzliche Software installieren. Mit nur drei Klicks haben Sie das eingerichtet und Sie können sofort mit dem Miträtseln beginnen. Um so einen GitHub Codespace zu nutzen, klicken Sie in der Webansicht unterhalb des Videos hier auf "GitHub Codespaces" und dann auf Öffnen. Und dann lande ich hier automatisch bei github.com. Sie brauchen einen kostenlosen Account auf github.com. Einfach dorthin gehen, registrieren, kostet auch nichts. Und jetzt kann ich hier einen Codespace im Branch main eröffnen, einfach draufklicken und schon geht es los. Das bedeutet, auf einem Server von GitHub wird nun ein Docker-Container hochgefahren, es wird ein Visual Studio Code installiert und darauf können Sie mit Ihrem Browser drauf zugreifen. Beim ersten Mal dauert es etwa eine Minute oder so was, aber wenn Sie das nächste Mal sich mit Ihrem Codespace verbinden, dann geht es deutlich schneller. Ich habe hier jetzt schon die Oberfläche von meinem Visual Studio Code. Es dauert noch ein paar Sekunden, bis es vollständig eingerichtet ist. Man sieht auch am unteren Bildschirmrand gleich, was hier tatsächlich passiert. Und sobald hier die Readme zu sehen ist, sobald hier die Oberfläche ins dunkle Layout gewechselt hat, sind wir fertig und wir können direkt mit dem Programmieren anfangen. Sie können direkt miträtseln, ohne dass Sie irgendetwas einrichten müssen. Jetzt haben wir es schon, d.h., ich habe hier im linken Bereich die einzelnen Übungsdateien, die ich im Laufe dieses Trainings mit Ihnen durcharbeiten werde. Wir können hier rechts oben programmieren und hier unten können wir unsere Tests ausführen. Das machen wir mal. Ich gehe hier links in die Verzeichnisstruktur. Ich habe hier Aufgaben und Lösungen. Jetzt klicke ich mal auf Aufgaben und wir haben hier eine Testaufgabe, 00_test.js. Da klicke ich mal drauf. Und Sie haben ja noch mal eine Erklärung: "Um den Code zu testen, richten Sie bitte eine Testumgebung ein." All das können Sie, wenn Sie Codespaces nutzen, getrost ignorieren, denn das habe ich schon automatisch für Sie gemacht. Um jetzt den Test auszuführen, muss ich hinschreiben mocha und den Namen der Datei. Das mache ich. Ich gehe hier unten ins Terminal, schreibe mocha und der Name der Datei, da brauche ich den kompletten Pfad, also der ist in aufgaben und dann 00 und mit TabStop kann ich autovervollständigen. Und Sie sehen, der Test schlägt fehl. Na ja, das ist ja klar, weil ich hier noch keinen tatsächlichen Code eingefügt habe. Was soll der Test machen? Das ist ein kleines Beispiel. Ah ja, ich möchte zwei Zahlen addieren. 2 und 3 soll 5 ergeben und 7 und 2 soll 9 ergeben. Und den Code, um diesen Test zu bestehen, den schreibe ich hier oben rein. Na ja, ich muss diese beiden Zahlen addieren und zurückgeben, also kann ich einfach ein "return a + b;" schreiben. Und wenn ich jetzt den Test erneut ausführe mit "mocha aufgaben/00_test.js", ganz unten am Bildschirmrand, sehen Sie, jawohl, ich habe diese Aufgabe richtig gelöst. D.h., mit GitHub Codespaces können Sie buchstäblich mit nur zwei Klicks eine Testumgebung aufsetzen und sofort miträtseln. Sie brauchen dafür nur einen kostenlosen GitHub-Account und einen Browser. Wenn Sie darauf verzichten und Sie die Testumgebung selber lokal aufsetzen wollen, dann zeige ich Ihnen das im nächsten Video, wie das geht.