Speicher-Aufgaben mit JavaScript, Dart und Flutter

1. Aufgabe: Profil speichern

Erstelle ein Profil und speichere es als JSON im Browser. Danach lade es wieder und gib den Namen aus.

1. Erstelle ein Objekt profile.
2. Nutze die Felder name, email, points.
3. Speichere es unter dem Schluessel profile.
4. Lade es wieder und gib profile.name aus.

const profile = {
  name: 'Mina',
  email: 'mina@example.com',
  points: 40,
};

localStorage.setItem('profile', JSON.stringify(profile));

const savedText = localStorage.getItem('profile');
const loadedProfile = JSON.parse(savedText);

console.log(loadedProfile.name);

2. Aufgabe: Aufgabenliste speichern

Eine Todo-Liste besteht aus mehreren Objekten. Jedes Objekt beschreibt eine Aufgabe. Speichere die Liste und lade sie wieder.

const tasks = [
  {
    title: 'JSON Grundlagen lernen',
    isDone: true,
  },
  {
    title: 'localStorage testen',
    isDone: false,
  },
];

localStorage.setItem('tasks', JSON.stringify(tasks));

const savedTasksText = localStorage.getItem('tasks');
const loadedTasks = JSON.parse(savedTasksText);

console.log(loadedTasks[0].title);

1. Fuege eine dritte Aufgabe hinzu.
2. Aendere isDone bei der zweiten Aufgabe auf true.
3. Speichere die geaenderte Liste erneut.
4. Gib alle Titel mit einer Schleife aus.

3. Aufgabe: Lernfortschritt aktualisieren

Baue Funktionen, die Fortschritt speichern und Punkte erhoehen. Das ist ein realistischer Zwischenschritt fuer dein Coding-Lernsystem.

function loadUser() {
  const savedText = localStorage.getItem('learningUser');

  if (savedText === null) {
    return {
      name: 'Gast',
      points: 0,
      completedLessons: [],
    };
  }

  return JSON.parse(savedText);
}

function saveUser(user) {
  localStorage.setItem('learningUser', JSON.stringify(user));
}

function completeLesson(lessonId) {
  const user = loadUser();

  user.points = user.points + 10;
  user.completedLessons.push(lessonId);

  saveUser(user);
}

completeLesson('json-practice');

1. Verhindere, dass dieselbe Lektion doppelt gespeichert wird.
2. Gib nach dem Speichern die neuen Punkte aus.
3. Baue eine Funktion resetProgress().
4. Erklaere, warum loadUser einen Standard-User zurueckgibt.

4. Aufgabe: Dart Model fuer JSON bauen

Jetzt baust du dieselbe Speicher-Idee in Dart. Ziel ist eine klare Model-Klasse, die sich in JSON umwandeln und aus JSON wieder herstellen kann.

1. Erstelle eine Klasse LearningTask.
2. Nutze die Felder id, title, isDone und points.
3. Schreibe einen Konstruktor mit required.
4. Schreibe Map<String, dynamic> toJson().
5. Schreibe factory LearningTask.fromJson(Map<String, dynamic> json).
6. Teste mit jsonEncode und jsonDecode.

class LearningTask {
  final String id;
  final String title;
  final bool isDone;
  final int points;

  const LearningTask({
    required this.id,
    required this.title,
    required this.isDone,
    required this.points,
  });

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'title': title,
      'isDone': isDone,
      'points': points,
    };
  }
}

5. Aufgabe: Flutter Storage-Service bauen

Erstelle eine eigene Storage-Klasse. Sie soll eine Liste von Aufgaben als JSON-Text speichern und wieder laden. Damit bleibt dein Widget-Code uebersichtlich.

1. Installiere shared_preferences.
2. Erstelle eine Klasse TaskStorage.
3. Schreibe saveTasks(List<LearningTask> tasks).
4. Schreibe loadTasks(), das eine Liste zurueckgibt.
5. Wenn nichts gespeichert ist, gib eine leere Liste zurueck.
6. Baue einen Button, der eine Aufgabe erledigt und danach speichert.

class TaskStorage {
  static const String _key = 'learning_tasks';

  Future<void> saveTasks(List<LearningTask> tasks) async {
    final preferences = await SharedPreferences.getInstance();

    final jsonList = tasks.map((task) => task.toJson()).toList();
    final jsonText = jsonEncode(jsonList);

    await preferences.setString(_key, jsonText);
  }
}

7. Abschlussuebungen

1. Baue eine kleine Notizenliste und speichere sie als JSON.
2. Baue eine Kursliste mit Titel, Lektionen und Fortschritt.
3. Baue eine Funktion addPoints(amount).
4. Baue eine Funktion markTaskDone(taskTitle).
5. Schreibe auf, welche Daten dein Lernsystem spaeter speichern soll.
6. Erklaere den Unterschied zwischen JavaScript localStorage und Flutter shared_preferences.
7. Zeichne den Datenfluss: Flutter Widget - Model - JSON - Speicher - JSON - Model - Widget.