Skip to content

GETTING_STARTED.md

Latest commit

 

History

History
216 lines (157 loc) · 5.35 KB

GETTING_STARTED.md

File metadata and controls

216 lines (157 loc) · 5.35 KB

🚀 Los geht's mit deiner Appoint App!

Deine React Native App ist fertig konfiguriert und bereit zum Testen!

⚡ Schnellstart

1. App starten

npm start

Das öffnet den Expo Developer Server. Du siehst dann einen QR-Code im Terminal.

2. Auf deinem Smartphone testen

Android:

  • Installiere Expo Go aus dem Play Store
  • Öffne Expo Go und scanne den QR-Code

iPhone:

  • Installiere Expo Go aus dem App Store
  • Öffne die Kamera-App und scanne den QR-Code
  • Tippe auf die Benachrichtigung, um in Expo Go zu öffnen

3. Alternative: Im Browser testen

npm run web

Die App läuft dann unter http://localhost:8081

📱 Was wurde erstellt?

Hauptkomponenten

Alle Komponenten sind vollständig für React Native konvertiert:

  • ✅ Dashboard - Übersicht mit Statistiken und heutigen Terminen
  • ✅ Staff List - Mitarbeiterverwaltung mit Suchfunktion
  • ✅ Staff Detail - Detailansicht für einzelne Mitarbeiter
  • ✅ Services List - Dienstleistungen mit Preisen
  • ✅ Customers List - Kundenverwaltung
  • ✅ Appointments - Terminübersicht und -verwaltung
  • ✅ Settings - Einstellungen und Profil

Navigation

Die App verwendet eine Tab-Navigation am unteren Bildschirmrand mit 5 Tabs:

  • Home (Dashboard)
  • Staff
  • Services
  • Customers
  • Bookings

🎨 Design

  • Dark Theme mit dunklem Hintergrund (#121212)
  • Lila Akzentfarbe (#7C3AED)
  • Ionicons für alle Icons
  • Moderne Kartenlayouts mit abgerundeten Ecken

📝 Nächste Schritte

1. App Icons erstellen (wichtig!)

Die App benötigt noch Icons. Du hast zwei Optionen:

Option A: Automatisch mit ImageMagick

cd assets
./create-placeholder-assets.sh

Option B: Online-Tools (empfohlen)

  • Besuche icon.kitchen
  • Lade ein Logo/Icon hoch
  • Lade die generierten Assets herunter
  • Kopiere sie in den assets Ordner

Benötigte Dateien:

  • assets/icon.png (1024x1024)
  • assets/splash.png (1284x2778)
  • assets/adaptive-icon.png (1024x1024)
  • assets/favicon.png (48x48)

2. Backend anbinden

Aktuell verwendet die App nur Mock-Daten. Für eine echte App:

  1. Firebase einrichten (empfohlen für schnellen Start):

    npm install firebase

  2. Oder Supabase (Open-Source Alternative):

    npm install @supabase/supabase-js

  3. Oder eigene API mit REST oder GraphQL

3. Weitere Features hinzufügen

  • 📅 Kalender für Terminauswahl
  • 🔔 Push-Benachrichtigungen
  • 💳 Zahlungsintegration (Stripe, PayPal)
  • 📊 Erweiterte Analytics
  • 🌐 Mehrsprachigkeit (i18n)
  • 📴 Offline-Modus

🔧 Wichtige Befehle

# Entwicklungsserver starten
npm start

# Android Emulator
npm run android

# iOS Simulator (nur macOS)
npm run ios

# Web-Version
npm run web

# TypeScript prüfen
npx tsc --noEmit

# Cache leeren (bei Problemen)
npm start --clear

📚 Projekt-Struktur

Appoint-App/
├── App.tsx                    # Hauptkomponente & Navigation
├── components/
│   ├── Dashboard.tsx          # Home-Screen
│   ├── StaffList.tsx          # Mitarbeiterübersicht
│   ├── StaffDetail.tsx        # Mitarbeiterdetails
│   ├── ServicesList.tsx       # Dienstleistungen
│   ├── CustomersList.tsx      # Kunden
│   ├── Appointments.tsx       # Termine
│   └── Settings.tsx           # Einstellungen
├── assets/                    # Icons und Bilder
├── app.json                   # Expo-Konfiguration
├── package.json              # Dependencies
└── tsconfig.json             # TypeScript-Config

❓ Häufige Probleme

Problem: "Unable to resolve module"

npm install
npm start --clear

Problem: QR-Code funktioniert nicht

  • Stelle sicher, dass Smartphone und Computer im gleichen WLAN sind
  • Verwende npx expo start --tunnel für Tunnel-Modus

Problem: App lädt langsam

  • Das ist beim ersten Mal normal
  • Expo muss die JavaScript-Bundles herunterladen
  • Danach wird es schneller

Problem: Icons werden nicht angezeigt

  • Expo lädt Icons automatisch beim ersten Start
  • Warte 30 Sekunden nach dem App-Start
  • Falls es nicht funktioniert: App neu starten

🎯 App veröffentlichen

Wenn die App fertig ist:

Android (Google Play)

npm install -g eas-cli
eas login
eas build --platform android

iOS (App Store)

eas build --platform ios

Mehr Infos: Expo EAS Build

📖 Weitere Ressourcen

💡 Tipps

  1. Hot Reload: Änderungen im Code werden automatisch in der App aktualisiert
  2. Debugging: Schüttle dein Smartphone für das Dev-Menü
  3. Console Logs: Nutze console.log() - Ausgaben erscheinen im Terminal
  4. React Native Debugger: Installiere für besseres Debugging

🆘 Hilfe benötigt?

Viel Erfolg mit deiner App! 🎉