Saltare al contenuto principale
Mobile Guida

La tua guida al client di sviluppo Expo

Creare, costruire e utilizzare il client di sviluppo Expo con questa guida completa. Impara le EAS Build, la debuggazione, l'integrazione CI/CD e le correzioni per i problemi comuni.

Martin Donadieu

Martin Donadieu

Content Marketer

La tua guida al client di sviluppo Expo

Se sei pronto per il client di sviluppo Expo, è probabile che Expo Go stia mentendo a te.

L'app funziona nel sandbox. La ricarica veloce si sente bene. Poi aggiungi una dipendenza nativa, collega le notifiche push, testa un flusso OAuth o prova a riprodurre il modo in cui il tuo'app di produzione si avvia. Improvvisamente diventa evidente il divario. Non stai più debuggando il tuo'app. Stai debuggando un ambiente semplificato.

È in questo punto che il client di sviluppo Expo cambia il workflow. Mantiene il ciclo JavaScript veloce che le persone amano su Expo, ma sposta la testing in un binario nativo personalizzato che si comporta molto più come l'app che si invierà. Per gli sviluppatori solitari, questo significa meno sorprese in fase di ciclo. Per le squadre, questo significa un processo di sviluppo che può supportare costruzioni condivise, QA, ambienti di anteprima e validazione degli aggiornamenti senza fingere che Expo Go possa coprire tutto.

Indice dei contenuti

Perché hai bisogno di andare oltre Expo Go

Expo Go è utile all'inizio. Rimuove la frizione di configurazione, fa partire velocemente un progetto React Native e ti dà un ciclo di feedback veloce. È proprio per questo che molte squadre iniziano lì.

Il problema inizia quando l'app non è più un prototipo. Expo documenta Expo Go come un sandbox e nota che non può simulare con precisione alcune capacità native come le notifiche o l'autenticazione OAuth, mentre il modello di costruzione di sviluppo è costruito intorno a expo-dev-client e posizionato come un “Debug” build per app di livello produttivo nel introduzione ai costrutti di sviluppo Expo.

A una tabella di confronto che evidenzia le principali differenze e limitazioni tra le strumentazioni Expo Go e Expo Development Client.

Cosa si rompe per primo

In pratica, la prima rottura è di solito una di queste:

  • Dipendenze native: Un pacchetto ha bisogno di una code native che Expo Go non include.
  • L'autenticazione: Un flusso OAuth si comporta in modo diverso non appena l'applica utilizza una configurazione nativa reale.
  • Le notifiche e le funzionalità del dispositivo: Il sandbox non riflette come l'applicazione di produzione richiederà le autorizzazioni o riceverà gli eventi.
  • L'analisi di squadra: Un tester ha bisogno di un binario stabile che rappresenti la configurazione nativa reale dell'applicazione.

Queste non sono casi estremi. Sono invece fasi normali in un progetto mobile reale.

Expo Go è ottimo per provare un'interfaccia. È un posto debole per validare il comportamento di produzione.

Perché il client di sviluppo è il passo successivo giusto

Il client di sviluppo Expo offre un'applicazione binaria personalizzata con gli strumenti di sviluppo di Expo integrati. Ciò significa che mantenete un'esperienza di sviluppatore forte, ma il layer nativo è ora vostro. Il client installato diventa la cosa contro cui il vostro team testa, anziché affidarsi a un contenitore generico.

Quel cambiamento conta più di quanto sembri. Una volta che passate a un client personalizzato, la domanda cambia da “funziona questo in Expo Go?” a “funziona questo nell'app che stiamo costruendo?” E quella è la domanda giusta.

Se anche state confrontando modelli di consegna di app più ampi, il post di Capgo su un'alternativa a Expo è un contesto utile perché evidenzia dove le squadre iniziano a guardare oltre i flussi di lavoro sandbox-first. Il cambiamento di mentalità

L'errore più grande che vedo è trattare il client di sviluppo Expo come un compito di configurazione una tantum. Non è. È una scelta di flusso.

Accettate un compromesso per guadagnare il controllo:

Flusso

Cosa rimane veloce Il client di sviluppo Expo offre un'applicazione binaria personalizzata con gli strumenti di sviluppo di Expo integrati. Ciò significa che mantenete un'esperienza di sviluppatore forte, ma il layer nativo è ora vostro. Il client installato diventa la cosa contro cui il vostro team testa, anziché affidarsi a un contenitore generico. Cosa richiede una maggiore cerimonia
Expo Go Iterazione di JavaScript base Tutto ciò che dipende dalla realtà nativa
Client di sviluppo Expo I cambiamenti di JavaScript all'interno di un'applicazione personalizzata I cambiamenti delle dipendenze native e i cambiamenti di configurazione nativa

È un buon compromesso nello sviluppo di applicazioni professionali. Fermatevi dall'ottimizzare per la dimostrazione più facile e iniziate a ottimizzare per una consegna affidabile.

Requisiti e configurazione del progetto

Prima di costruire qualcosa, portate il progetto in uno stato che possa sopravvivere a costruzioni ripetibili. La maggior parte degli insuccessi nei primi tentativi deriva dal saltare la configurazione di base, non dall'Expo stesso.

La documentazione e la guida dell'ecosistema di Expo descrivono le costruzioni di sviluppo come un ‘ambiente di sviluppo completamente funzionale’ che rappresenta un ambiente di produzione reale una volta che le app dipendono da native code personalizzate o da QA di livello produttivo, come coperto nella panoramica di Draftbit Strumenti di sviluppo Expo e build di sviluppo.

Inizia con l'account e il layer di CLI

Avrai bisogno di due cose che funzionino prima che il layer dell'app abbia importanza:

  1. Accesso a CLI Expo
  2. Accesso a CLI EAS

Desidererai anche essere connesso al tuo account Expo dal terminale. Le squadre spesso trascurano questo perché i comandi locali possono sembrare funzionanti fino a quando non compare il primo build remoto o il prompt delle credenziali.

Un setup pulito include di solito:

  • La tua sessione di account Expo: Questo lega il lavoro locale ai servizi di build remoto e alla proprietà del progetto.
  • CLI EAS installato: EAS è ciò che trasforma il tuo progetto in un binario condivisibile iOS o Android.
  • A un progetto che funziona già localmente: Non introdurre complessità di build prima che il funzionamento base dell'app funzioni.

Installa il pacchetto che rende possibile il workflow

Al centro di questa configurazione è expo-dev-client. Senza di esso, non hai il lanciatore personalizzato e la shell nativa orientata alla debug che definisce il workflow del client di sviluppo Expo.

Installa il pacchetto nell'applicazione, quindi verifica che la tua configurazione Expo sia coerente. I comandi esatti possono variare con il tuo gestore di pacchetti, ma il punto architettonico non cambia: questo pacchetto è ciò che trasforma l'applicazione da 'esegue in un sandbox condiviso' a 'esegue dentro il nostro binario di sviluppo'.

Regola pratica: Costruisci il client di sviluppo una volta che la lista delle dipendenze native è stabile abbastanza per che i tuoi team membri possano installare e utilizzare lo stesso binario.

Verifica la tua configurazione dell'app presto

Molte confusioni derivano dal trattare app.json o app.config.js o

Assicurati che il progetto abbia:

  • Un nome univoco dell'app: Utile quando gli sviluppatori installano più varianti su un dispositivo.
  • Un identificatore di pacchetto o bundle univoco: Essenziale per le costruzioni native e successivamente per la firma.
  • Un intento di ambiente chiaro: Se il team utilizza identità di staging e produzione separate, riflettilo deliberatamente.

Se il tuo ambiente locale è confuso, vale la pena pulirlo prima della prima costruzione. La guida di Capgo per l'ambiente locale Capgo setting up a Capacitor local environment Cosa è una buona prima configurazione

Utilizza questo elenco di controllo prima di avviare EAS:

EAS

Verifica Perché è importante
expo-dev-client è installato Abilita il comportamento del client di sviluppo personalizzato
L'account Expo è collegato Richiesto per un utilizzo EAS liscio
Gli identificatori dell'app sono unici Previene conflitti di build e installazione nativa
Il progetto parte localmente Evita di mescolare problemi di runtime con problemi di build
L'equipe sa quando ricostruire Riduce la confusione dopo i cambiamenti nativi

La meta non è la perfezione. La meta è rendere la prima compilazione noiosa. È un successo.

Costruire il tuo client personalizzato con EAS

Questo è il punto in cui il workflow diventa reale. Fermi di parlare di un client personalizzato e generalo.

Expo raccomanda un flusso di compilazione di sviluppo per le app con un client nativo personalizzato code installa expo-dev-clientgenera un'app nativa con EAS Build o localmente, quindi esegui npx expo start --dev-client. Expo nota inoltre nel flusso di lavoro di panoramica che le modifiche esclusivamente JavaScript rimangono veloci, mentre le modifiche code native richiedono una nuova compilazione di sviluppo.

Un infographic a quattro passaggi che illustra il processo di creazione di un client di sviluppo Expo utilizzando gli strumenti EAS CLI.

La base del flusso EAS

La sequenza è lineare anche se la prima esecuzione sembra strana:

  1. Installa e autenticati con EAS CLI
  2. Configura o conferma la configurazione di costruzione
  3. Crea un profilo di costruzione per sviluppo
  4. Avvia una costruzione per iOS o Android
  5. Installa il binario risultante su un dispositivo o simulatore

Ciò che EAS offre è la coerenza. Invece di ogni sviluppatore improvvisare uno stato di costruzione nativa locale, il team può produrre binari da una definizione di costruzione condivisa.

Cosa il tuo profilo di costruzione sta realmente facendo

Un profilo non è solo un etichetta. Insegna al sistema di costruzione che questo binario è destinato allo sviluppo attivo, non alla distribuzione in negozio. development Ciò di solito significa che l'app installata dovrebbe:

includere il comportamento del client di sviluppo

  • essere facile da lanciare per gli sviluppatori e i tester
  • connettersi a un server Metro durante il lavoro quotidiano
  • __CAPGO_KEEP_0__
  • rimane reutilizzabile fino a quando le dipendenze native non cambiano

Questo è anche dove inizia a diventare pratica la CI. Una volta esiste un profilo di costruzione e si comporta in modo predittibile, puoi automatizzarlo.

Se il tuo team sta pensando più ampiamente su come React Native si inserisce in un lavoro di modernizzazione più ampio, Wonderment Apps ha una prospettiva utile su React Native per la modernizzazione dell'intelligenza artificiale. È rilevante perché il client di sviluppo spesso diventa parte della layer di base operativa quando gli squadre stanno inviando più cambiamenti di prodotto frequenti su superfici mobili.

Un breve walkthrough può aiutare se vuoi vedere il flusso in azione:

Installazione del risultato

Una volta che il build si conclude, trattare l'output come un'applicazione binaria reale, perché è proprio questo.

  • Sul dispositivo Android: Si installa tipicamente un .apk su un dispositivo fisico o emulator.
  • Sull'iOS: Collaborerà con un .ipa o un output compatibile con il simulatore a seconda del target.
  • Per i colleghi: Condividi la build attraverso i meccanismi EAS normali invece di chiedere a tutti di creare le proprie da zero a meno che non sia necessario.

Una build di sviluppo è più facile da gestire quando il team concorda su una regola: ricostruisci per le modifiche native, non per ogni code.

Cosa non aspettarsi

Non aspettarti che la prima build elimini la complessità nativa. La mette in un posto giusto.

Se aggiungi un nuovo modulo nativo, modifichi i permessi, aggiorni le dipendenze native a livello di SDK, o modifichi la configurazione nativa guidata da plugin, avrai bisogno di una nuova build di sviluppo. È normale. Il premio è che il tuo lavoro JavaScript quotidiano continua a muoversi velocemente all'interno di un client che riflette la tua app.

Eseguire e Debuggare con il tuo nuovo client

La prima volta che apri il tuo client installato e lo connetti a Metro, la differenza è evidente. Sente come Expo, ma non più nel senso di un giocattolo.

Avvia il server con npx expo start --dev-clientQuindi apri il client di sviluppo sul tuo simulatore, emulatore o dispositivo fisico e connettiti attraverso l'interfaccia di lancio. Quel lanciatore è uno dei cambiamenti importanti introdotti da expo-dev-clientinsieme a supporto di debug come l'ispezione delle richieste di rete, come documentato nella Pagina Expo SDK per il client di sviluppo.

Un software developer maschio che scrive code su un computer portatile in un ambiente di lavoro professionale.

Una sessione di sviluppo normale

Una sessione tipica assomiglia a questo:

Tu pulli la branca più recente. Il client di sviluppo installato è già sul tuo dispositivo. Avvii Metro, avviate l'app e connettetevi al server corrente. Poi lavorate per lo più come facevate prima, modificando il JavaScript e vedendo gli aggiornamenti velocemente.

La grande differenza compare quando avete bisogno di ispezionare il comportamento che dipende da un ambiente nativo reale. Il client personalizzato vi consente di testare quei flussi senza dover uscire dal vostro ciclo regolare.

Gli strumenti di debug che contano

Gli strumenti aggiuntivi non sono decorativi. Risolvono i problemi quotidiani.

  • Interfaccia di avvio: Utile quando si passa tra ambienti o server ospitati da colleghi.
  • Menu del developer: Gli fornisce le azioni che aspetti durante l'iterazione attiva.
  • Ispezione della rete: Aiuta quando l'interfaccia utente sembra rotta, ma il problema reale è la mancata risposta, lo stato di autenticazione o la configurazione di ambiente errata.

Quando i API falliscono in un client di sviluppo, ispeziona la strada di richiesta e le ipotesi di ambiente prima di toccare l'interfaccia code. Il bug è spesso fuori dal componente che stai guardando.

Ecco l'avvantaggio pratico. Un singolo file binario installato può validare più ambienti senza dover ricompilare ogni volta. È particolarmente utile quando un revisore vuole testare una anteprima di PR, un ingegnere di QA vuole la versione di staging e un sviluppatore vuole una branch locale.

Se il tuo team invia anche shell mobili basati su web, Capgo's guida definitiva per il debug Capacitor è degno di essere letto per la mentalità di debug più ampia. Lo strumentazione differisce, ma la disciplina è simile: ispeziona il trasporto, l'ambiente e il comportamento di runtime prima di indovinare.

Cosa funziona bene e cosa non funziona

Cosa funziona bene:

Situazione Perché il client di sviluppo è utile
Testare redirect autenticazione Il comportamento dell'app nativa è più vicino alla produzione
Verificare l'integrazione di API L'ispezione della rete riduce il loop di feedback
Passare da un ambiente all'altro L'interfaccia utente del lanciatore evita rebuild non necessari
L'QA del team su un solo binario Tutti testano la stessa configurazione nativa

Cosa non funziona bene:

  • Considerare il client come un oggetto da buttare: Se il team non lo mantiene, la confusione si insinua velocemente.
  • Ignorare i confini di rebuild nativi: Una volta cambiano le dipendenze native, i clienti obsoleti perdono tempo.
  • Supponendo che tutti gli errori di connessione siano bug dell'applicazione: Molti sono solo problemi di ambiente locale.

L'integrazione con CI/CD e Aggiornamenti in Tempo Reale

Il client di sviluppo Expo diventa molto più utile quando smette di essere una configurazione personale e diventa parte delle operazioni di squadra.

Un flusso di lavoro maturo separa di solito le preoccupazioni. Le modifiche native producono un nuovo build di sviluppo. Le modifiche JavaScript e gli asset passano attraverso un percorso di aggiornamento più veloce. I revisori e la QA non devono chiedere se stanno testando la cosa giusta perché la squadra ha concordato sui canali, sui profili di build e sui destinati degli aggiornamenti.

Un team professionale che collabora su un flusso di lavoro di automazione del pipeline CI/CD su uno schermo di un grande ufficio.

Dove CI/CD si inserisce

Il client di sviluppo funziona bene con CI perché dà all'automazione un obiettivo stabile.

Un modello comune assomiglia a questo:

  • Le modifiche della richiesta di pull: CI crea o valuta un build di sviluppo quando le dipendenze native sono cambiate.
  • Ambienti basati su branch: Diversi rami si mappano a diversi canali di aggiornamento o target server.
  • Flusso di lavoro condiviso del tester: Il QA installa uno o più client di sviluppo noti e cambia contesto attraverso il lanciatore e la configurazione di aggiornamento.

Quella struttura riduce l'ambiguità. Gli sviluppatori sanno quando hanno bisogno di una ricompilazione. I tester sanno se stanno validando un cambiamento nativo o un aggiornamento consegnato in cima a un binario esistente.

Il ruolo degli aggiornamenti in tempo reale

Il client di sviluppo spesso consente alle squadre di risparmiare il tempo operativo. Il client di sviluppo è un luogo forte per validare il comportamento degli aggiornamenti prima della release perché può passare tra server di sviluppo e aggiornamenti pubblicati in un'app shell come la produzione, come descritto in precedenza nella documentazione Expo.

Ciò apre una suddivisione utile:

Tipo di modifica Percorso di consegna
Cambiamento di modulo nativo o autorizzazione nuovo Nuova compilazione di sviluppo
Correzione del comportamento JavaScript Pubblica l'aggiornamento
Regolazione della copia o dell'asset Pubblica l'aggiornamento
Validazione dell'ambiente Passa al canale o al server installato nel client

Per le squadre fuori dalla pila di aggiornamento Expo La guida di integrazione CI/CD di Capgo per gli aggiornamenti OTA mostra un modello operativo comparabile sul lato Capgo. shows a comparable operational model on the Capacitor side. It’s one option for teams that want controlled rollout channels and automation around update delivery.

Il modello affidabile è semplice. Costruisci quando cambia il nativo code. Pubblica quando il binario installato contiene già tutto ciò di cui ha bisogno il cambiamento.

Il comportamento della squadra che prevenirebbe il caos

Le regole operative sono più importanti della configurazione tecnica:

  • Nome dei canali deve essere chiaro: staging, productione i nomi delle anteprime dovrebbero essere evidenti.
  • Documentare i trigger di ricompilazione: Un nuovo plugin, un cambio di permesso o un aggiornamento nativo SDK non dovrebbe mai essere una questione di giudizio.
  • Tieni una strategia di un solo client installabile per ambiente: Troppi varianti creano rumore di supporto.
  • Rendi esplicita la validazione dell'aggiornamento: Qualcuno dovrebbe verificare che l'aggiornamento si applichi e si avvii all'interno della stessa binaria che il team si aspetta.

In questo punto, il client di sviluppo Expo smette di essere una comodità per lo sviluppatore e diventa infrastruttura di rilascio.

Troubleshooting dei Comuni Errori e Soluzioni:

La maggior parte dei problemi del client di sviluppo Expo sono ordinari una volta che sai dove cercare. Si sentono misteriosi perché i fallimenti spesso si verificano ai confini: laptop a dispositivo, Metro all'app, configurazione nativa al runtime JavaScript.

Uno dei problemi più comuni e meno discussi è la mancata connessione a Metro sui dispositivi fisici a causa della segmentazione della rete locale, VPN o regole del firewall negli ambienti aziendali e distribuiti, un punto messo in luce in questo Video di risoluzione dei problemi del client Expo Dev.

Quando il client non si connette a Metro

Questo è l'issue che consuma più tempo perché sembra un'app rotta quando l'app è spesso funzionante.

Controlla questi prima:

  • Assunzioni di rete identiche: Gli dispositivi e i portatili possono sembrare connessi mentre sono su segmenti isolati.
  • Interferenza VPN: Un VPN aziendale o personale può deviare il traffico in modi che Metro non tollera bene.
  • Regole del firewall: L'strumentazione di sicurezza può bloccare il traffico di sviluppo locale senza renderlo evidente.
  • Politiche del dispositivo aziendale: Gli dispositivi gestiti a volte limitano i modelli di traffico che gli strumenti di sviluppo dipendono.

If il progetto funziona nel simulatore ma non su un dispositivo fisico, sospetta la rete prima di sospettare il tuo React code.

Non debuggare le fallite di connessione dall'interno dell'app prima di confermare che il dispositivo possa effettivamente raggiungere il computer che esegue Metro.

Quando sembrano essere rebuild random

Un'altra frustrazione comune è il sentimento che alcune modifiche sembrano apparire istantaneamente e altre ostinatamente non.

Questo solitamente significa che il team non ha interiorizzato il confine di rebuild:

Simptoma Probabile causa Soluzione
Aggiornamenti JavaScript si applicano normalmente Comportamento previsto Continua a lavorare con il client esistente
Una nuova dipendenza nativa non appare Layer nativo modificato Crea un nuovo build di sviluppo
Il comportamento legato alle autorizzazioni è inconsistente Configurazione nativa modificata Riavvia e reinstalla
Un team member vede un comportamento diverso Installato un binario client diverso Alignati sullo stesso build

Questo non è un difetto nel workflow. È il workflow che fa esattamente ciò che dovrebbe fare.

Fallimenti di build e deriva del team

Quando i build falliscono, la causa radice è spesso una di queste:

  • Disaccordo di dipendenza: A una versione del pacchetto non corrisponde il resto del progetto.
  • Assunzioni di plugin nativo: Un plugin di configurazione aspetta che il progetto non ha.
  • Confusione delle credenziali: L'accesso di firma o non è coerente tra il team.
  • Aspettative locali obsolete: Qualcuno assume che un nuovo build non è necessario quando lo è.

L'articolo di Capgo sulle questioni e le soluzioni di aggiornamento in tempo reale comuni per i sviluppatori è una lettura supplementare utile per il lato di rilascio di questo problema. Diversa pila, stesso insegnamento: molti "bug" dell'app sono realmente bug di consegna, ambiente o versione di allineamento. Il client di sviluppo Expo funziona meglio quando il team considera la affidabilità dell'ambiente come parte dell'ingegneria. Non come un dopo pensiero. Una volta fatto questo, lo setup diventa prevedibile, e prevedibile è ciò che si desidera da strumenti mobili. Se il tuo team anche rilascia app __CAPGO_KEEP_0__ e ha bisogno di un modo controllato per consegnare aggiornamenti JavaScript, asset e configurazione senza dover aspettare la revisione della store,

Problemi di ambiente


If your team also ships Capacitor apps and needs a controlled way to deliver JavaScript, asset, and config updates without waiting for store review, Capgo Eseguire aggiornamenti in tempo reale, controllare il rilascio e integrare CI/CD per Capacitor e Electron

Gli aggiornamenti in tempo reale per le app Capacitor

Quando un bug nel layer web è attivo, invia la correzione attraverso Capgo invece di aspettare giorni per l'approvazione della store. Gli utenti ricevono l'aggiornamento in background mentre le modifiche native rimangono nel normale percorso di revisione.

Sostegno umano da parte di Martin

Inizia subito

Ultimi articoli dal nostro Blog

Capgo ti offre le migliori informazioni che ti servono per creare un'app mobile davvero professionale.