{"id":364,"date":"2018-01-05T11:47:53","date_gmt":"2018-01-05T09:47:53","guid":{"rendered":"https:\/\/sebastian.fam-knopp.de\/?p=364"},"modified":"2018-05-28T17:33:06","modified_gmt":"2018-05-28T15:33:06","slug":"zimmerverwaltung-mit-django-rest-framework-2-und-angular-5","status":"publish","type":"post","link":"https:\/\/sebastian.knopp.it\/?p=364","title":{"rendered":"Zimmerverwaltung mit Django REST Framework und Angular"},"content":{"rendered":"

Viele Jahre habe ich bei der Webentwicklung prim\u00e4r auf PHP und jQuery gesetzt, aber 2017 war es definitiv Zeit f\u00fcr neue Projekte auf modernere Frameworks zu setzen. Um der Einarbeitung in die neuen Frameworks auch einen praktischen Sinn zu geben, nutzte ich die Bundeskonferenz 2017 der KSJ als Anlass und programmierte hierf\u00fcr eine Zimmerverwaltung. (…und eine Veranstaltungs-Website mit WordPress)<\/em><\/p>\n

Der Server – Django REST Framework<\/h4>\n

Ich entdeckte das Django-REST-Framework<\/a> f\u00fcr mich, welches mit sehr wenig Code eine REST-API erzeugen kann, hierbei die Datenbankanbindung komplett wegabstrahiert und auch die SQL-Skripte f\u00fcr \u00c4nderungen zwischen den Models („Migrationsskripte“) automatisch erzeugt. Wenn man es braucht kann man aber auch sehr viel detaillierter programmieren und eigene Erweiterungen schreiben. Nach Durcharbeitung der Tutorials lie\u00df sich innerhalb von gerade einmal 2 Stunden ein erster vollst\u00e4ndiger lauff\u00e4higer Prototyp f\u00fcr die Web-API meines neuen Projekts erstellen.<\/p>\n

Der Client – Angular 5 \/ Bootstrap<\/h4>\n

Auf Clientseite bietet sich als wesentliche Verbesserung zu jQuery inzwischen die M\u00f6glichkeit nicht mehr jede Interaktion eines Benutzers einzeln programmieren zu m\u00fcssen. Das geht durch sogenanntes Data Binding. Man fragt von einem Formularfeld also nicht mehr ab „wie ist dein Wert?“ sondern bindet eine Variable an ein Feld. \u00c4ndert der Benutzer den Wert des Feldes, so wird dies automatisch auch in der Variable und damit an allen anderen Stellen wo sich die Variable findet getan. Die Folge: nie wieder eigene onClick-\/onChange-\/sonstwas-Listener! Diese Funktionalit\u00e4t bieten unter anderem die bekannten Frameworks React und Angular. Die Wahl ist letztlich wohl Geschmackssache und laut mehrerer Blogs gibt es in der Vorgehensweise keine wesentlichen Unterschiede. Ich entschied mich f\u00fcr die Nutzung von Angular<\/a>. Um auch mit CSS m\u00f6glichst keinen Aufwand zu haben nutzte ich Twitters Bootstrap<\/a> f\u00fcr die Umsetzung eines einheitlichen Designs, haupts\u00e4chlich weil mir dieses einfach optisch sehr gut gef\u00e4llt und auch mobilf\u00e4hig ist.<\/p>\n

Das Projekt<\/h4>\n

Ich geh\u00f6rte mit zum Organisationsteam der KSJ Bundeskonferenz 2017. Hier galt es 140 Teilnehmer in einem sehr eng gesteckten Zeitrahmen m\u00f6glichst schnell einzuchecken, um einen schnellen Konferenzbeginn zu garantieren. Zudem mussten Listen \u00fcber Stimmberechtigte und nicht Stimmberechtigte Delegierte und Namenslisten mit den Stimmk\u00e4rtchen-Nummern der Delegierten f\u00fcr die Moderation erstellt werden.<\/p>\n

Beim Check-In mussten die Leute also:<\/p>\n