tutorial json in 5 minuten

JSON in 5 Minuten erklärt

Was du mit JSON machen kannst und was JSON mit einer TODO-Liste gemeinsam hat erfährst du hier.

Wofür du JSON brauchst.

JSON ist eine Beschreibungssprache, das heißt man kann Informationen mit dieser Sprache speichern und von Computer zu Computer senden.
Stell dir folgendes vor: Du stehst morgens auf, gehst ins Bad und am Spiegel klebt ein Zettel.
Du erkennst sofort, dass es eine Liste mit Aufgaben für dich ist. Es ist eine TODO Liste für dich.
Das Format, Sonderzeichen und die Überschrift geben dir schnell zu verstehen, dass DU hier etwas zutun hast.
Diese Liste beschreibt also was du zu erledigen hast und das scheint ja eine ganze Menge Zeug zu sein!

Was hat JSON damit zutun?

Sagen wir du hast es satt, dir täglich kleine Zettel zu schreiben. Du möchstest dir eine App bauen, in der du täglich deine TODOs sehen und abhaken kannst.
Die täglichen TODOS sollen dann gespeichert werden. Nehmen wir mal deine TODO-Liste und versuchen diese in ein Programm zu stecken.
Du kannst versuchen, diese einzuscannen, aber dann bist du die Zettel immer noch nicht los. Also wäre es einfacher die Informationen in einer Datei abzuspeichern.
Hier kannst du natürlich einfach eine Word-Datei nehmen, aber das würde die Programmierung unnötig komplex machen. Du müsstest erstmal verstehen, wie Word diese Dateien speichert und liest, damit du dieses Format in deiner App nutzen kannst.

Todo-Liste in einer Textdatei

Also nehmen wir lieber etwas einfacheres, eine simple Textdatei. Dort schreiben wir nun alle TODOs hinein.
Wenn deine App die Datei liest, werden diese angezeigt. Wenn du in der App ein Todo abhakst, dann wird diese Änderung wieder in die Datei gespeichert.
Auch hier gibt es leider noch einen Haken: Das Format deiner Textdatei hast du dir gerade ausgedacht! Das bedeutet, dass du die Funktionen programmieren musst, die deinem Programm erlauben, den Inhalt der Datei im richtigen Format zu lesen und zu schreiben. Ausserdem ist das erfundene Format kein Standardformat.
Das heißt du und deine App sind die einzigen, die das ganze verstehen können.  Mal abgesehen von den ganzen Fehlern, die du dir noch aus Versehen eingebaut hast.

JSON to the rescue!

JSON ist ein Standardformat (ECMA-404), mit dem du die Informationen für deine App ganz einfach beschreiben kannst.
Das coole dabei: Die gängigsten Programmiersprachen haben bereits Funktionen um JSON zu schreiben und zu lesen.
//Alle TODO-Daten
var todoDaten;

//Daten aus Text laden
function leseTodoDaten(text) {
  //Text --> JSON
  var jsonObject = JSON.parse(text);
  todoDaten = jsonObject;
}

//Daten in Text speichern
function schreibeTodoDaten() {
  //JSON --> Text
  var text = JSON.stringify(todoDaten);
  return text;
}

Um ein JSON-Objekt aus einem Text zu erstellen, verwenden wir die Funktion JSON.parse und zum schreiben eine JSON-Objektes in einen Text verwenden wir JSON.stringify . In anderen Programmiersprachen siehst das ganze ähnlich aus. JSON hat sich als Standard etabliert, das bedeutet, dass es ganze viele Anbieter im Internet gibt, die ihre Informationen im JSON-Format bereitstellen.
Zum Beispiel Google Calendar API, Google Drive, Google Maps,  Facebook API, Twitter, Youtube, und noch viele mehr, wie z.B hier zu sehen: https://github.com/toddmotto/public-apis und https://any-api.com/

Syntax von JSON

Wir haben nun den Weg gefunden, wie und warum man mit JSON arbeiten kann, aber wie ist denn dieses JSON eigentlich aufgebaut? Schauen wir uns doch mal die TODO-Liste etwas genauer an. Zuerst haben wir eine Art Überschrift und darunter eine Liste. Jeder Listeneintrag steht für eine Aufgabe. Diese Aufgabe besteht aus einem Namen und einem Kästchen. Auf dem Papier würden wir an der Stelle einen Haken zeichnen sobald die Aufgabe erledigt ist. In der Datei müssen wir dies anders beschreiben. Also schreiben wir erstmal ERLEDIGT JA oder ERLEDIGT NEIN hinein.
Unser Objekt besteht aus einer Eigenschaft TODO mit einer Liste. Objekte werden in JSON mit den geschweiften Klammern beschrieben. Eine Aufgabe in unserer TODO-Liste ist ebenfalls ein Objekt. Objekte haben Eigenschaften denen man Namen geben kann. In unserem Beispiel ist es die Eigenschaft todos oder die Eigenschaft name als Name der Aufgabe. Vielleicht findest du noch eine Eigenschaft in unserem Beispiel? Eigenschaften bekommen immer einen Wert.
Bei der Eigenschaft Name ist es der Name der Aufgabe als Text, bei der Eigenschaft Erledigt ist es der Wert ob die Aufgabe bereits erledigt wurde.
Das wären ganz einfache Werte. Eigenschaften und Werte werden immer durch einen Doppelpunkt getrennt. Werte dieser Eigenschaften können auch wieder eigene Objekte oder sogar Listen sein. Listen werden mit eckigen Klammern beschrieben. Beispiel: Die Eigenschaft ‚todos‘ besteht aus einer Liste von Objekten.
Hat man eine Liste von Objekten oder Eigenschaften, kann man diese durch ein Komma trennen. Und damit kennst du die komplette Syntax von JSON.

Tutorial JSON Übersicht und Erklärung

Zusammengefasst

Als kleinen Überblick schauen wir nochmal in unsere TODO-Liste. Wie man das ganze programmiert findest du im Link zu diesem Video. Wir sehen die geschweiften Klammern, welche das ganze JSON-Objekt beschreiben. Dieses Objekt hat eine Eigenschaft TODO welches als Wert eine Liste hat.
Diese Liste hat Einträge in Form von weiteren Objekten. Jedes Objekt in dieser Liste hat jeweils zwei Eigenschaften: Den Namen der Aufgabe und eine Markierung ob diese Aufgabe bereits ereldigt ist. Kleiner Hinweis dazu: Texte sollte man immer in Hochkommas packen und Wahrheitswerte kann man mit true und false beschreiben. Die Einrückung und die Zeilenumbrüche sind außerdem optional. Sie dienen alleine der Übersicht, weil man JSON als Mensch so nur sehr schwer lesen kann. Damit kannst auf deiner Liste den ersten Punkt bereits abhaken. Fühlt sich gut an, oder?
Das war eine kleine Erklärung zum Thema JSON. Für Fragen und Anregungen nutze bitte die Kommentarfunktion oder schreibe mir einfach eine E-Mail.
Viel Spass beim Nachprogrammieren und bis bald auf lerneProgrammieren.de

Tutorial 5: Ein Soundboard programmieren


Mit einem Soundboard hast du ein kleines Werkzeug welches du auf Feiern, Veranstaltungen, Schule oder in der Arbeit immer wieder verwenden kannst. Nicht nur der Spass-Faktor ist je nach Soundauswahl groß. Einen echten Nutzen bringt es zum Beispiel bei Aufführungen oder Presentationen, denn du hast deine Lieblingssoundeffekte quasi immer dabei. Das beste dabei: Das Soundboard ist auf jedem Gerät mit einem modernen Browser aufrufbar.
Teil 1:

Das interessante an diesem Soundboard ist, dass man es tatsächlich mit den einfachsten Mitteln zu einer App konvertieren kann.

Warum ein Soundboard?

Erklärung zum Warum 10 Sätze: Leitfragen: Welches Problem wird behandelt? Was lernt man? Warum ist das Beispiel ideal? We kann man das Beispiel später selbst verwenden? Was brauchst du?
Mit dem Soundboard lernst du die Grundlagen für den Umgang mit Mediendateien und -formaten. Dazu ist eine Herausforderung eine Programmierschnittstelle von Javascript zu verwenden. Klar, wenn du das Tutorial durcharbeitest, lernst du die Schnittstelle zum Teil kennen, aber diese kann ja noch mehr (z.B. auch Videos abspielen). Das Zusammenspiel von Javascript und HTML wird hier nochmal deutlich und auch hier zeige ich dir wie man Buttons programmiert, auf die man in Javascript dann reagieren kann. Dieses Beispiel ist so schön vielfältig, dass es wirklich für jeden Zweck angepasst werden kann. Von Tastaturunterstützung, Looping, Aktivitätsanzeige und Lautstärkeregler bist hin zu Videoeinblendungen ist alles möglich.

Was wirst du hier heute lernen?

  • Einsatz von HTML, CSS und Javascript
  • Umgang mit jQuery & Bootstrap
  • Media API von HTML5/Javascript

Weiterlesen

Stoppuhr programmieren tutorial

Tutorial 4: Stoppuhr programmieren


Zugegeben, Stoppuhren sind nicht gerade spannende Programmierprojekte, allerdings wird dir dieses Tutorial helfen zu verstehen, wie man mit zeitlich gesteuerten Funktionen arbeitet.

Eine Stoppuhr ist ein hervorragendes Beispiel, wie man in Javascript zeitlich wiederholende Vorgänge programmieren kann.
Die Stoppuhr zeigt erstmal nur die aktuelle Uhrzeit an und bei einem Klick auf Start zählt ein Timer die Zeit hoch.
Damit hast du deine eigene Stoppuhr, die du an deine Bedürfnisse anpassen kannst. Uhrzeit und gestoppte Zeit auf einen Blick.

Warum eine Stoppuhr?

In Javascript kann man mit den Date-Objekten nicht nur die aktuelle Uhrzeit anzeigen bzw. speichern. Man kann mit mehreren Date-Objekten Zeitdauern berechnen und diese dann verwenden. Die Stoppuhr ist nur ein Beispiel dafür.
In diesem Tutorial lernst du, wie man mit den Date-Objekt anfängt und es einmal verwendet. Die Stoppuhr ist wirklich das einfachste, was man mit diesen Objekten anfangen kann. Ein Countdown oder ein Wecker wären genau so möglich.

Was wirst du hier heute lernen?

  • Bootstrap und jQuery
  • Anzeige von Datum und Uhrzeit
  • Zeitliche Wiederholung in Javascript
  • Verwendung des Date-Objektes

Weiterlesen

Tutorial 3: Quiz programmieren


Erfolgsendungen wie „Wer wird Millionär“ und etliche Quizapps in den Appstores begeistern die Menschen. Perfekt um sich das Konzept von einem Quiz einmal anzuschauen und ein eigenes zu programmieren. Da dies mal das ganze twas umfangreicher ist, gibt es diesmal 2 Videos.
Teil 1:

Teil 2:

Mit einem Quiz kann man nicht nur Fragen wie in der Fernsehsendung stellen, sondern das ganze auch noch anders nutzen. Du kannst dir aus dem Quiz einen Trainer bauen, mit dem du bestimmte Dinge lernen kannst. Zum Beispiel kannst du Vokabeln oder Fachbegriffe damit lernen. Du könntest aber auch ein Quiz erstellen und dieses auf deiner Webseite oder in einer App anbieten. Das coole: Wenn du das ganze nicht nachprogrammieren willst, kannst du einfach den fertigen Quellcode nehmen und eigene Fragen einfügen. Die Vorlage für die Fragen ist im Quellcode enthalten.

Warum ein Quiz?

Das Quiz ist eine super Möglichkeit viele Aspekte zu beleuchten, die man auch in größeren Anwendungen beachten muss. Auch wenn die Funktionalität erstmal einfach scheint, zeigt sich die Komplexität erst, wenn man versucht as ganze mal eben kurz zu programmieren. Beim Quiz müssen wir mehrere Aufgaben lösen, denn wir müssen zum einen Daten aus einer Datei laden können, welche unsere Fragen enthält. Zusätzlich dazu müssen wir diese Fragen nach und nach in einer Oberfläche anzeigen. Dann haben wir die Logik, die einmal überprüfen muss, ob die Antwort richtig oder falsch war. Zum Schluss, also nach der letzten Frage zeigen wir einen Endpunktestand an. Wer also dieses Beipsiel durcharbeitet und verstanden hat, versteht langsam wie komplex auch einfache kleine Programme werden können. Dazu gibt es ein paar Technologien die wir verwenden werden:

Was wirst du hier heute lernen?

  • Einsatz von jQuery und Bootstrap
  • HTML Elemente und Attribute in Javascript benutzen
  • Elemente zeigen und verstecken
  • Mausklicks
  • Daten speichern/laden mit JSON

Weiterlesen

Titelbild Tutorial 2 Textbasiertes Adventure programmieren

Tutorial 2: Ein textbasiertes Adventure programmieren

Textadventures machen neugierig. Kennst du Textadventures? Das waren kurze und kleine „Spiele“ in Textform, bei denen es keine Hammergrafik gab sondern lediglich eine textbasierte Geschichte. Genau, Text.

Das schöne dabei ist, wie beim Buch: Die Bilder entstehen im Kopf, vorausgesetzt die Geschichte ist gut geschrieben. JA heutzutage sind Textadventures vielleicht nur eine kleine Nische für Leute die gerne Klassiker spielen.
Ich habe eigentlich dann Textadventures gespielt, wenn diese kurz und lustig waren. Aber warum erzähl ich euch das und wieso wollen wir ein Textadventure bauen?

Warum ein Textadventure?

Mit Textadventures bekommt man einen super schnellen Einstieg in die Welt der Programmierung. Dadurch, dass der Text aus dem Spiel im Quelltext auffindbar ist, kann man super nachvollziehen wie das Programm im Quellcode abläuft und lernt damit wie es funktioniert. So habe ich damals meine ersten Schritte in der Welt der Programmierung gemacht. Und obwohl ich eigentlich noch gar nicht „richtig“ programmieren konnte waren meine Freunde begeistert von den kleinen witzigen (und ja auch pubertären) Geschichten.
Wenn du jetzt denkst „Ne, auf komische Textadventures hab ich gar kein Bock“, dann solltest du dennoch weiter mitmachen. Letztendlich kann man mit dem Wissen jegliche Art von Frage/Antwort Programm erstellen, z.B. einen Vokabeltrainer.
Wie man die Bibliothek und die Befehle benutzt, werden wir gleich im Detail sehen. Wenn du schon etwas Erfahrung mit Javascript hast, ist das für dich keine Magie. Kommen wir zuerst zu:

Was wirst du hier heute lernen?

  • Funktionen aufrufen und erstellen
  • Programmfluss verstehen und nachvollziehen, anhand von Text
  • Verwenden von Bibliotheken (die keine Dokumentation haben)
  • Umgang mit Text und Zahlen
  • Merken von Text und Zahlen
  • Funktionsparameter
  • Entscheidungen im Programm

Weiterlesen

Tutorial1 Webseite programmieren

Tutorial 1: Aufbau einer responsiven Webseite mit HTML, CSS und Javascript

In diesem Tutorial wirst du den Aufbau einer Webseite kennenlernen. Ich zeige dir wie man von den Dateien aus startet und erkläre dir kurz wie der Aufbau funktioniert. Wir werden den Google Chrome und Notepad++ verwenden. Wenn du diese noch nicht installiert hast, solltest du das vorher tun.
Dieses Tutorial ist wie ein Kochrezept. Das bedeutet, ich zeige dir welche Zutaten du benötigst, erkläre aber nicht jedes Detail. Wenn du das ganze nachprogrammieren möchtest, findest du die Beschreibung sowie alle Downloads in diesen Tutorialnotizen. Der Vorteil bei diesem Kochrezept Tutorial ist, dass du das Ergebnis auch herunterladen kannst ohne etwas zu programmieren. Wenn du also nach dem Tutorial alles verstanden hast und du lieber direkt an eigenen Sachen weiterarbeiten willst, kannst du das Beispiel einfach nehmen und anpassen. So kannst du das ganze lernen, auch wenn du nur wenig Zeit hast und ausserdem ist das spannender als mir beim programmieren zuzuschauen.
Ich möchte dazu kurz erwähnen, dass die Lösungen, die ich dir hier zeige erstmal immer zu Lernzwecken aufgebaut werden  und es immer mehrere Wege gibt Dinge zu programmieren. Nur weil ich hier etwas zeige, heißt es noch lange nicht, dass dies der einzige richtige Weg ist.
Zu guterletzt: Ich freue mich über Feedback und Kritik, wenn du irgendwo nicht weiter kommst dann kannst du mich einfach anschreiben oder kommentieren.

Was du hier lernst:

  • Grundsätzlicher Aufbau einer Webseite: HTML, CSS und Javascript
  • Einbinden und Verwenden von Bootstrap und jQuery
  • Inhalte mit HTML erstellen: Menü, Überschrift, Text, Bild, Button und Link
  • Layout und Design mit Bootstrap und CSS
  • Verhalten für Klick auf Button mit Javascript und jQuery

Weiterlesen