smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Todo-App: 1. Vorbereitungen vornehmen

29. Oktober 2012
Stephan
Todo-App mit backbone.js und CoffeeScript entwickeln

Bevor wir mit der backbone.js Entwicklung der Todo-App anfangen, müssen noch einige Vorbereitungen vorgenommen werden.

Zum einen beschreibe ich in diesem Artikel noch einmal, was die zu entwickelnde Todo-App eigentlich leisten soll. Zum anderen benötigen wir für die Umsetzung unserer Todo-App einige JavaScript-Bibliotheken und wir werden uns ein Projektverzeichnis anlegen.

Anschließend erstellen wir uns ein HTML-Grundgerüst mit dazugehörigen CSS und definieren den Namespace für unsere Todo-App.

Teile der Artikel-Serie

Zur Übersicht eine Auflistung aller erschienenen Artikel der Artikel-Serie „Tutorial: Todo-App mit backbone.js & CoffeeScript erstellen“:

  1. Vorbereitungen vornehmen (Projektverzeichnis anlegen etc.)
  2. Model erstellen
  3. Collection – Liste von Models
  4. View-Struktur & Grundlagen einer backbone.js View
  5. Restliche Views implementieren
  6. Controller implementieren & App fertigstellen
  7. Daten mit Ruby on Rails per REST-API serverseitig speichern

Was soll unsere Todo-App können?

Unsere Todo-App soll uns die Möglichkeit bieten, eine neue Aufgabe (Todo) anzulegen. Die Erstellung einer Aufgabe soll sich dabei auf die Eingabe eines Titels beschränken.

Weiterhin möchten wir alle erstellten Aufgaben (Todos) aufgelistet bekommen. Hierbei soll zum einen der jeweilige Titel sowie Status der Aufgabe einsehbar sein.

Neben der Erstellung und Anzeige von Aufgaben, soll es außerdem möglich sein eine bestehende Aufgabe zu ändern als auch zu löschen. Bezüglich der Änderung einer Aufgabe sollen sowohl der Status als auch der Titel änderbar sein. Der Status kann also von z.B. unerledigt auf erledigt und umgekehrt geändert werden. Das wäre z.B. mit einer Checkbox sehr leicht umzusetzen.

Zusätzlich wollen wir noch unter der Aufgabenliste (Todo-Liste) eine kleine Statistik anzeigen. Angezeigt werden sollen hier die Gesamtanzahl, Anzahl aller erledigten sowie unerledigten Aufgaben.

Clientseitige Umsetzung mittels backbone.js & CoffeeScript

Die Todo-App wollen wir wie bereist erwähnt in CoffeeScript und auf Basis des MVC-Frameworks backbone.js programmieren. Falls ihr nicht wisst, was es mit MVC auf sich hat, empfehle ich euch den entsprechenden Artikel auf Wikipedia zu lesen.

Da ich in diesem Tutorial mich auf die clientseitige Umsetzung beschränken möchte, werden wir die Aufgaben bzw. Todos clientseitig speichern und verzichten so auf eine serverseitige Anbindung. Dazu bedienen wir uns der LocalStorage-API.

Benötigte JavaScript-Bibliotheken herunterladen

Für die Entwicklung benötigen wir noch folgende Bibliotheken und Frameworks, die euch jetzt herunterladen solltet:

Die in Klammern angegebenen Versionen sind die, welche ich hier in diesem Tutorial verwenden werde.

Projektverzeichnis anlegen

Wir erstellen uns nun unser Projektverzeichnis mit folgendem Aufbau:

Projektverzeichnis für Todo-App Tutorial

Wie in der Abbildung ersichtlich ist, fügen wir die JavaScript-Bibliotheken und Frameworks, die wir bereits heruntergeladen haben, ins app/lib-Verzeichnis.

HTML-Grundgerüst & CSS

Als nächstes wollen wir unser HTML-Grundgerüst anlegen. Da unsere Todo-App nur aus einer Seite bestehen wird und somit eine sogenannte Single-Page-App ist, benötigen wir nur eine HTML-Datei.

Hierfür fügen wir in die index.htm, die wir bereits bei der Anlegung des Projektverzeichnisses erstellt haben, folgendes HTML ein:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta charset="utf-8" />
<title>TodoApp mit backbone.js & CoffeeScript</title>
<meta name="description" content="Todo-App mit backbone.js und CoffeeScript erstellen." />
<link href="http://fonts.googleapis.com/css?family=Courgette" rel="stylesheet" type="text/css" />
<link href="public/css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="app/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="app/lib/underscore-1.4.2.min.js"></script>
<script type="text/javascript" src="app/lib/backbone-0.9.2.min.js"></script>
<script type="text/javascript" src="app/lib/backbone-localstorage.min.js"></script>
</head>
<body>
<div id="todoWrap">
    <h1>Meine Aufgaben</h1>
    <input id="createItemInput" type="text" placeholder="Neue Aufgabe erstellen" />
    <ul id="todoList"></ul>
    <div id="todoStats"></div>
</div>
</body>
</html>

Wir haben hier ein input-Feld zum Anlegen einer neuen Aufgabe sowie eine ul-Liste zum Anzeigen bzw. Auflisten aller Aufgaben. Ebenso gibt es noch ein div-Element für die Todo-Statistik. Diese einzelnen Elemente wiederum sind innerhalb eines weiteren div-Elements geschachtelt.

Damit das ganze auch etwas anschaulich ist, benötigen wir noch ein bisschen CSS. Wie ihr dem HTML-Grundgerüst entnehmen könnt, binden wir eine styles.css-Datei ein. Also erstellen wir uns diese Datei namens styles.css im public/css-Verzeichnis und fügen diese Zeilen ein:

*{margin:0;padding:0;}
body{background:url(../images/bg.png) repeat;font:100.01% "Courgette",Arial,Verdana,sans-serif;}
#todoWrap{margin:30px auto;width:500px;background:#111;background:-webkit-linear-gradient(top,#fefbb0,#fff955);background:-moz-linear-gradient(center top,#fefbb0,#fff955);background:-o-linear-gradient(top,#fefbb0,#fff955);-moz-box-shadow:0 0 5px #000;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;border-radius:5px;text-align:center;}
#todoWrap h1{padding:15px 0;}
#createItemInput{margin:0 0 20px 0;padding:10px;width:440px;line-height:1.5;border:1px solid #e2e2e2;-moz-box-shadow:0 0px 5px 0 rgba(0,0,0,0.1) inset;-webkit-box-shadow:0 0px 5px 0 rgba(0,0,0,0.1) inset;box-shadow:0 0px 5px 0 rgba(0,0,0,0.1) inset;}
#todoList{margin:0 20px;font-size:1.2em;list-style:none;}
#todoList li{padding:15px 0;}
#todoList input{margin:0 20px 0 0;}
#todoList a.delete{display:block;float:right;width:22px;height:22px;background:url('../images/delete.png');}
#todoList div{text-align:left;}
#todoStats{padding:15px 0;}
#todoStats a{color:#000;text-decoration:none;}
#todoStats a.selected{text-decoration:underline;}

Die zwei im CSS angegebenen Grafiken könnt ihr euch auf der Demo-Seite kopieren und ins public/images-Verzeichnis einfügen. Ihr könnt aber auch eigene Grafiken verwenden.

Namespaces definieren

Eine weitere Vorbereitung die wir treffen, ist die Definition eines Namespaces (Namensraum) für unsere Applikation.

Weiterführende Informationen zu Namespaces in JavaScript findet ihr z.B. auf daraff.ch und etwas ausführlicher auf javascriptweblog.wordpress.com.

Dazu legen wir eine app.coffee-Datei im app-Verzeichnis an und fügen folgenden Code ein:

TodoApp =
    Collections: {}
    Controllers: {}
    Models: {}
    Views: {}

Wie erwähnt möchte ich für diejenigen von euch, die nicht so vertraut mit CoffeeScript sind, auch den reinen JavaScript-Code aufführen:

TodoApp = {
    Collections: {},
    Controllers: {},
    Models: {},
    Views: {}
}

Im Prinzip erzeugen wir uns hier ein TodoApp-Objekt, welches wiederum andere Objekte kapselt. In unserem Fall sind das die Objekte Collections, Controllers, Models und Views.

Wie geht es weiter?

Weiter gehts im nächsten Teil mit der Erstellung eines Models für unsere Todo-App. Hier gehts dann auch endlich los mit backbone.js.

Bei Fragen könnt ihr mir gerne ein Kommentar hinterlassen.

Kommentare  
0 Kommentare vorhanden
0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!