Draai de mobiele app

1. Bereid de computer, telefoon en backend voor

Voltooi voordat u begint en open de mobiele repository of de monorepo van All Platforms in uw editor. Voer in Terminal → Nieuwe terminal in de root van de repository de onderstaande installatieopdracht uit. Wacht tot het klaar is. Installeer Expo Go op uw telefoon via de officiële Expo-pagina die hieronder is gelinkt; de versie ervan moet de Expo SDK-versie ondersteunen die is vastgelegd in apps/mobile/package.json.

Een backend is de webserver die aanmelding, werkruimtegegevens en AI-verzoeken afhandelt. Als uw kassa apps/web bevat, voert u eerst de webinstallatie uit in een andere terminal en laat u die server draaien. Voltooi de installatie van de Postgres voordat u zich aanmeldt of inlogt. Een mobiel afrekenen bevat geen apps/web: sluit het in plaats daarvan aan op uw actieve, afzonderlijk geleverde backend. Als u Expo start, wordt de schermvoorbeeldserver gestart, niet de backend.

Zet uw telefoon en computer op dezelfde Wi-Fi. Koppel een VPN tijdelijk los als deze lokale verbindingen blokkeert. De localhost van een telefoon betekent de telefoon zelf. Gebruik het privénetwerkadres van uw computer voor een fysieke telefoon of Android-apparaat; iOS Simulator op dezelfde Mac kan http://localhost:3000, gebruiken en Android Emulator gebruikt gewoonlijk http://10.0.2.2:3000.

• Installeer de tools en ontvang de code
• Leer hoe u een opdracht uitvoert en een bestand bewerkt
• Start de webbackend
• Installeer een Expo Go-versie die compatibel is met uw project

corepack pnpm install

2. Zoek en test het backend-adres

Voer op Windows ipconfig uit in een nieuwe PowerShell-terminal, zoek uw actieve Wi-Fi-adapter en lees IPv4-adres. Open op macOS Systeeminstellingen → Wi-Fi → Details → TCP/IP en lees het IP-adres. Open op Linux uw netwerkinstellingen en lees IPv4-adres. Een adres kan er als volgt uitzien: 192.168.1.25; die van jou zal meestal anders zijn.

Als het adres van uw computer 192.168.1.25 is, opent u http://192.168.1.25:3000 in de browser van de telefoon terwijl de webserver actief is. Vervang uw werkelijke adres. De startpagina moet worden geladen voordat u verdergaat. Sta de Node-app toe op privénetwerken als Windows Firewall daarom vraagt. Als het niet laadt, controleer dan het adres, Wi-Fi, firewall en actieve webserver; een Expo-tunnel draagt ​​alleen de previewbundel en maakt uw afzonderlijke API niet bereikbaar.

# Windows PowerShell only:
ipconfig

3. Maak het configuratiebestand van de mobiele app

Vouw in de Verkenner van de editor Apps → mobiel uit, maak een nieuw bestand met de naam .env.local en plak de onderstaande configuratie in dat bestand. Vervang 192.168.1.25 door het adres dat u zojuist hebt getest, of gebruik het door u opgegeven HTTPS-backend-adres. Sla het bestand op. Het volledige pad is apps/mobile/.env.local; root .env wordt niet automatisch gelezen door Expo.

Laat de aankoopinstelling van de telefoon uitgeschakeld voor de eerste preview. EXPO_PUBLIC_ betekent dat er een instelling is opgenomen in de telefoonapp, dus deze waarden mogen alleen openbare URL's, schema's en openbare clientinstellingen bevatten. Plak hier geen AI-provider-, database- of factuurgeheimen. De webserver heeft zijn eigen apps/web/.env.local; het wijzigen van het mobiele bestand verandert de server niet.

EXPO_PUBLIC_API_URL=http://192.168.1.25:3000
EXPO_PUBLIC_APP_SCHEME=supastack
EXPO_PUBLIC_MOBILE_PURCHASES_PROVIDER=off

4. Start Expo en open het voorbeeld

Voer vanuit de root van de repository de onderstaande opdracht uit. Wacht op een QR-code en het Metro-wachtbericht. Houd deze terminal en de backend-terminal open. Op Android open Expo Go en scan de QR-code; op iPhone gebruik Camera, scan de code en open deze in Expo Go. De QR-code opent de ontwikkelingsapp, niet uw backend-startpagina.

Succes betekent dat het inlogscherm van de app op uw apparaat wordt geopend. Nu aankopen zijn uitgeschakeld, is dit een voorbeeld van de gebruikersinterface; voltooi de configuratie van de database-gebaseerde webauthenticatie voordat u het inloggen, opgeslagen werkruimten of chat test. Als een geïnstalleerde simulator uw doel is, drukt u op a in de Expo-terminal voor Android of i voor iOS. iOS Simulator vereist macOS en Xcode; het kan niet op Windows draaien.

corepack pnpm --filter @supastack/mobile start

5. Herstel van voorbeeldfouten en test echte stromen

Als Expo Go een incompatibel project rapporteert, vergelijk dan de ondersteunde SDK met apps/mobile/package.json en gebruik de compatibele versie van de officiële Expo-pagina. Upgrade de afhankelijkheidsversies van de kit niet alleen maar om het bericht te negeren. Als een vereiste native module niet beschikbaar is, volg dan Mobile builds voor een ontwikkelingsbuild die die module bevat.

Als het inloggen mislukt vanwege een netwerkfout, probeer dan eerst de backend URL opnieuw in de browser van de telefoon. Als de URL werkt maar inloggen mislukt, inspecteer dan de backendterminal en verifieer Postgres en migraties. Bij de lokale /dashboard-demosessie wordt u niet aangemeld op de telefoon. Als de configuratie verouderd lijkt, drukt u op Ctrl + C in de Expo-terminal, voert u vervolgens de onderstaande herstartopdracht uit en opent u het voorbeeld opnieuw.

Expo Go kan geen echt aankoop-/herstelgedrag van StoreKit of Play Billing bewijzen. Volg in-app-aankopen en mobiele builds voor een EAS-ontwikkeling, bouw en bewaar testaccounts. De eerste native build en accountinschrijving kunnen langer dan vijf minuten duren. Om dit voorbeeld te stoppen, drukt u op Ctrl + C in de Expo-terminal; stop de backend afzonderlijk als u klaar bent.

• Native login instellen en testen
• Maak een native ontwikkelingsbuild
• Configureer systeemeigen aankoop en herstel

corepack pnpm --filter @supastack/mobile start --clear