Tutorials

Fortgeschritten

25 Minuten

Das werden Sie lernen

  • Anforderungen an mobile Apps
  • React Native Generierung
  • Integration nativer Funktionen
  • Docker-basiertes Testen
  • App Store Deployment
  • Veröffentlichung in der Creator Economy

Erstellen Sie eine mobile Anwendung

Erstellen Sie produktionsreife iOS- und Android-Apps in 25 Minuten

Möchten Sie Nutzer auf ihren Handys erreichen? In diesem Tutorial erstellen Sie eine vollständige mobile Fitness-App für iOS und Android. Sehen Sie zu, wie Conductor plant und Virtuoso Ihre React Native App in echten Docker-Containern baut – mit tatsächlichen Builds und Tests.

Was wir bauen werden

Eine Fitness-Tracking-App mit: Trainingsprotokollierung, Fortschrittsdiagrammen, Push-Benachrichtigungen, Health Kit Integration, Offline-Unterstützung und Social Sharing – produktionsreif für den App Store und Google Play.

Voraussetzungen

  • Das 'Erste Schritte'-Tutorial abgeschlossen
  • Nxcode Konto (Lite oder Pro)
  • Keine Erfahrung in der mobilen Entwicklung erforderlich

Mobile Entwicklung mit Nxcode

Nxcode generiert React Native Apps, die nativ auf iOS und Android laufen. Das macht den Unterschied:

Echter nativer Code

Kein Web-Wrapper – echtes React Native, das in native iOS- und Android-Binärdateien kompiliert wird.

Docker-Tests

Ihre App wird in Docker erstellt und ausgeführt. Wenn sie nicht kompiliert, behebt Virtuoso dies automatisch.

Native Funktionen

Kamera, Benachrichtigungen, Health Kit, Geolokalisierung – alles funktioniert sofort.

Eine Codebasis

Ein einziger Code für beide Plattformen, mit plattformspezifischen Optimierungen, wo nötig.

Beschreibung Ihrer mobilen App

Sagen Sie Conductor, was Sie wollen. Seien Sie spezifisch bei nativen Funktionen:

Erstelle eine Fitness-Tracking-App für iOS und Android:

Kernfunktionen:
- Trainingsprotokollierung mit Übungen, Sätzen, Wiederholungen, Gewichten
- Cardio-Tracking mit GPS für Läufe im Freien
- Fortschrittsdiagramme, die Kraftzuwächse im Zeitverlauf zeigen
- Pausen-Timer zwischen den Sätzen mit Benachrichtigungen
- Trainingsverlauf und persönliche Rekorde

Health-Integration:
- Apple Health / Google Fit Synchronisierung
- Schrittzählung und tägliche Aktivität
- Herzfrequenz während des Trainings (falls verfügbar)

Social-Funktionen:
- Teilen von Trainingszusammenfassungen in sozialen Medien
- Herausforderungen mit Freunden und Bestenlisten
- Community-Trainingsvorlagen

Offline-Unterstützung:
- Volle Offline-Funktionalität
- Synchronisierung, sobald wieder online

Design:
- Standardmäßig Dark Mode
- Große, tippfreundliche Schaltflächen
- Flüssige Animationen

Conductor plant Ihre mobile App

Für mobile Apps erstellt Conductor einen Plan, der Plattformunterschiede berücksichtigt:

Phase 1: Kern-Setup

  • 1React Native mit TypeScript initialisieren
  • 2Navigation konfigurieren (Tab + Stack)
  • 3State-Management einrichten (Redux)
  • 4Offline-First Datenebene erstellen

Phase 2: Trainingsfunktionen

  • 1Bildschirme für die Trainingsprotokollierung erstellen
  • 2Übungsdatenbank erstellen
  • 3Pausen-Timer mit Benachrichtigungen implementieren
  • 4Fortschrittsdiagramme hinzufügen

Phase 3: Native Integration

  • 1Apple Health / Google Fit Integration
  • 2GPS-Tracking für Cardio
  • 3Push-Benachrichtigungs-Setup
  • 4Kamera für Fortschrittsfotos

Phase 4: Social & Feinschliff

  • 1Social-Sharing-Integration
  • 2Freundessystem und Herausforderungen
  • 3Animationen und haptisches Feedback
  • 4Generierung von App Store Assets
C

Conductor

Ich plane Ihre Fitness-App. Kurze Fragen: 1. Soll das GPS-Tracking während der Läufe im Hintergrund funktionieren? 2. Möchten Sie Begleit-Apps für Apple Watch / Wear OS? 3. Sollen die Trainingsdaten zwischen Geräten synchronisiert werden? 4. Gibt es eine spezifische Übungsdatenbank (oder soll ich eine umfassende erstellen)?

U

User

Ja zu Hintergrund-GPS. Vorerst keine Watch-Apps. Ja zur geräteübergreifenden Synchronisierung. Erstelle eine gute Standarddatenbank.

C

Conductor

Perfekt! Ich habe 18 Aufgaben in 4 Phasen erstellt. Virtuoso wird auf iOS- und Android-Simulatoren in Docker bauen und testen. Dies dauert etwa 12-15 Minuten. Es geht los!

Mobile Builds in Docker beobachten

Virtuoso führt echte mobile Builds aus – nicht nur Code-Generierung:

1Metro Bundler

JavaScript-Bundle erstellt und validiert

2iOS Build

Xcode baut in Docker, Fehler werden frühzeitig erkannt

3Android Build

Gradle Build mit echtem Android SDK

4Simulator-Tests

Apps starten und grundlegende Abläufe werden getestet

5Check nativer Module

Berechtigungen für Health Kit, GPS und Kamera verifiziert

Im Gegensatz zu Tools, die nur Code ausgeben, baut Nxcode Ihre App tatsächlich. Wenn React Native Build-Fehler wirft, behebt Virtuoso diese automatisch. Sie erhalten eine funktionierende App, kein defektes Projekt.

Integration nativer Funktionen

Virtuoso übernimmt das komplexe native Setup:

Health Kit / Google Fit

Schritte, Trainingseinheiten, Herzfrequenz lesen. Trainingseinheiten schreiben. Korrekte Handhabung von Berechtigungen.

GPS & Hintergrundstandort

Läufe im Freien verfolgen, auch wenn die App im Hintergrund läuft. Batterieoptimierte Implementierung.

Push-Benachrichtigungen

Lokale Benachrichtigungen für Pausen-Timer. Remote-Benachrichtigungen für Aktivitäten von Freunden.

Offline-First

SQLite für lokale Speicherung. Hintergrundsynchronisierung, wenn online. Konfliktlösung inklusive.

Testen Ihrer mobilen App

Mehrere Möglichkeiten zum Testen vor der Einreichung im App Store:

Web-Vorschau

Schnelle Vorschau im Browser. Gut für die Benutzeroberfläche, aber keine nativen Funktionen.

Expo Go

QR-Code scannen, auf dem Handy testen. Die meisten Funktionen funktionieren.

Development Build

Vollständiger nativer Build zum Testen aller Funktionen einschließlich Health Kit.

TestFlight / Internes Testen

Mit Beta-Testern vor der öffentlichen Veröffentlichung teilen.

App Store Deployment

Nxcode vereinfacht den Prozess der App-Store-Einreichung:

  1. Klicken Sie auf "Build for Production"
  2. Signierte IPA (iOS) und AAB (Android) generiert
  3. App Store Screenshots automatisch generiert
  4. Datenschutzerklärung und Beschreibungstext erstellt
  5. Upload zu App Store Connect / Google Play Console

Was enthalten ist

  • Code-Signierung wird automatisch gehandhabt
  • Screenshot-Generierung für alle Gerätegrößen
  • Vorschläge für App Store Inhalte
  • Datenschutz-Generator
  • Versionsverwaltung

Monetarisieren Sie Ihre mobile App

Verwandeln Sie Ihre App in wiederkehrende Einnahmen:

1

In-App-Abonnements

Virtuoso kann Abonnementstufen (kostenlos, Pro) mit App Store / Play Store Abrechnung hinzufügen.

2

Creator Economy

Eintrag im Nxcode Marktplatz. Nutzer zahlen über unsere Plattform, Sie behalten 70%.

3

Direktverkauf

Verkaufen Sie Premium-Funktionen direkt über Ihr eigenes Stripe-Konto.

Viele Fitness-Apps verlangen 9,99 $/Monat. Mit 200 Abonnenten sind das 1.400 $/Monat (nach 70% Creator Economy Anteil).

Was Sie gebaut haben

  • Produktionsreife React Native App
  • Native iOS- und Android-Unterstützung
  • Health Kit und GPS Integration
  • Offline-First Architektur
  • Push-Benachrichtigungen
  • App Store-bereite Builds

Ihre mobile App wurde nicht nur generiert – sie wurde gebaut, auf iOS- und Android-Simulatoren getestet und verifiziert, dass sie tatsächlich kompiliert. Das ist der Nxcode Unterschied.

Nächste Schritte

Web-App Begleiter

Fügen Sie ein Web-Dashboard für Ihre mobile App hinzu

Web-App Begleiter

Creator Economy

Lernen Sie Monetarisierungsstrategien kennen

Creator Economy

Kernkonzepte

Verstehen Sie Conductor und Virtuoso

Kernkonzepte

Bereit, Ihre mobile App zu bauen?

Beginnen Sie jetzt mit dem Bau Ihrer iOS- und Android-App.