Das BaumBie Projekt nutzt Baumdaten und Geokoordinaten, um Bürger:innen gezielt beim Auffinden und Bewässern städtischer Bäume in Bielefeld und Umgebung zu unterstützen. Die Nutzer:innen erhalten Informationen zu Bäumen und werden zu Interaktionen mit Bäumen über einen Chatbot animiert.
Für die lokale Entwicklung muss eine Supabase-Instanz aufgesetzt werden.
Supabase ist eine Open-Source-Plattform, die eine vollständige Backend-Infrastruktur mit Funktionen wie Datenbanken, Authentifizierung, Speicher und API-Generierung bietet, um schnell und einfach moderne Anwendungen zu entwickeln.
Hierfür kann die supabase-cli verwendet werden.
npm install -g supabase-cli
Da die supabase-cli im Hintergrund Docker nutzt, musst du den Docker Daemon starten (ggf. noch zuerst Docker Desktop installieren), bevor du die supabase-cli starten kannst:
Führe aus dem Root-Verzeichnis aus:
supabase start
Idealerweise erhältest du dann im Terminal eine Meldung "Started supabase local development setup." mit verschiednen Werten.
Nenne die .env.example - Datei in .env um.
Von Supabase werden jetzt folgende Variablen (=Zugangsdaten für die Supabase-Instanz) in die .env Datei kopiert:
VITE_SUPABASE_URL=http://127.0.0.1:54323
VITE_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
Nach dem Ausführen von supabase start entnimmst du diese Variablen aus dem Terminal Log:
- "anon key" -> VITE_SUPABASE_ANON_KEY
- "service_role key" -> SUPABASE_SERVICE_ROLE_KEY
supabase migrations up
Um auf die Supabase-Instanz und die darin enthaltenen Daten zugreifen zu können, müssen die Berechtigungen für die Tabelle trees vergeben werden.
Öffne das Supabase Studio: http://127.0.0.1:54323 solange die Supabase im Hintergrund läuft.
Öffne den Table Editor in der linken Seitenleiste. Wähle dann die Tabelle trees aus.
Wähle "RLS disabled" (Menüleiste oben) -> "Enable RLS for this table" -> "Enable RLS" -> "Add RLS policy" -> "Create a new policy"
Wähle das Template "SELECT: Enable read access for all users"
create policy "Enable read access for all users" on "public"."trees" as permissive for select to public using (true);
Speichern mit Klick auf Save policy.
-> oder in /supabase/migrations/20240316110547_create_trees_table speichern
???
Für den Import der Daten wird die trees.json-Datei benötigt, die aktuell nicht Bestandteil dieses Repositories ist! (Die Datei wird auf Nachfrage von uns bereitgestellt.)
Lege die Datei hier ab: preparation/input
Da weitere Bibliotheken erforderlich sind, um die Daten zu importieren, empfiehlt es sich, eine virtuelle Python-Umgebung im preparation-Ordner zu erstellen und die erforderlichen Bibliotheken zu installieren:
Erstellen der Virtuellen Umgebung:
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
Navigiere ins preparation-Verzeichnis und importiere die Daten:
python import.py <path-to-geojson-file>
Um die Performance des Karten-Renderns zu verbessern muss die trees.json-Datei gesplittet werden.
GeoSplitter ist ein Python-Tool, um große GeoJSON-Dateien in kleinere, handhabbare Segmente aufzuteilen. Dies ist besonders nützlich, um die Ladezeiten und Effizienz bei der Arbeit mit umfangreichen geographischen Daten in Webanwendungen oder GIS-Projekten zu verbessern. Zusätzlich generiert GeoSplitter einen JSON-Index, der jedes Segment mit einem spezifischen Koordinatenbereich verknüpft, um eine einfache Integration und Nutzung der segmentierten Daten zu ermöglichen.
Bevor du GeoSplitter verwendest, stelle sicher, dass Python 3.x auf deinem System installiert ist.
Diese Abhängigkeiten kannst du durch die Installation der requirements.txt Datei einbinden, die im Projekt enthalten ist. Installiere die erforderlichen Pakete mit Pip:
pip install -r requirements.txtPlatziere deine GeoJSON-Datei im input-Unterordner. Es wird erwartet, dass sie trees.geojson heißt; ändere gegebenenfalls den Wert von INPUT_PATH im splitter.py Skript, um auf deine spezifische Datei zu verweisen.
Starte das splitter.py-Skript, um die GeoJSON-Datei zu segmentieren und die Index-Datei zu generieren. Standardmäßig wird ein neuer Unterordner segments erzeugt mit mehreren kleinen GeoJSON-Dateien sowie eine segments_index.json, die die Segmentdateien mit den Koordinatenbereichen verknüpft:
python preparation/splitter.pyKopiere anschließend die neu erstellten Segmente aus ./preparation/segments/* in das static-Verzeichnis in frontend:
cp -r preparation/segments frontend/staticNavigiere in den Frontend-Ordner. Installiere alle Abhängigkeiten:
npm install
Anschließend kannst du das mit Svelte entwickelte Frontend starten:
npm run dev