Categories
iOS React Native

React Native con iOS (1)

Per provare a compilare ed eseguire un progetto React Native su iPhone/iOS (è obbligatorio possedere anche un macOS) si devono usare due comandi sul terminale (il secondo aprirà il simulatore).

Questo è il primo dei comandi sul terminale di macOS:

per installare le dipendenze

cd progetto
npm install
npm install --save-dev ios-deploy
npx pod-install

Articolo correlato

per l’eventuale richiesta dei permessi (fotocamera, ecc.), potrebbe essere necessario modificare ./ios/progetto/Info.plist

per avviare il servizio Metro:

npx react-native start
screenshot del terminale dove appare il menù di scelta per avviare il simulatore iOS (in macOS)

Il terminale mostrera un menù di scelta, di metro, dove premendo il tasto i si avvierà il simulatore di un iPhone, ma il tasto i non funziona nel caso del vero smartphone. Quindi è meglio abituarsi ad aprire un altro terminale e digitare il secondo comando:

cd progetto
npx react-native run-ios

screenshot del terminale mentre si avvia un simulatore di iPhone su sistema macOS

Attenzione, il simulatore si avvierà SOLO se è stato installato Xcode e se NON si trova collegato nessun iPhone (hardware) al macOS. Se ci fosse collegato un vero iPhone, allora l’applicazione verrebbe compilata, installata e avviata sul vero iPhone (sul vero iPhone l’applicazione potrebbe anche non funzionare se l’utente NON appartenesse ad un Development Team autorizzato da Apple, perciò è meglio leggere tutta la seguente pagina).

Con il vero dispositivo

Ecco cosa accade quando si collega un vero dispositivo hardware, ad esempio:

  • iPhone SE (1) del 2016 (iOS 9)
    • oggi (2023) dispone di iOS 15.7

Provando con un vero iPhone, si dovrebbe poter installare l’applicazione, ma si ottengono due diversi errori:

  • il primo errore suggerisce di installare (era suggerito all’inizio dell’articolo) npm install --save-dev ios-deploy, e dopo aver seguito questo suggerimento e ripetendo il building ( npx react-native run-ios ) si ottiene il secondo tipo di errore.
  • il secondo errore ci chiede di aprire Xcode e di selezionare un Development Team
errore sul terminale macos con suggerimento di installare ios-deploy
screenshot del terminale macOS, dove un primo errore suggerisce di eseguire npm install -f ios-deploy
screenshot del terminale macOS, dove un secondo errore specifica error code 65

Sempre nello stesso terminale, ma più in basso, si può leggere il nome del famigerato Development Team. Si potrebbe diventare parte di un Development Team, ma si dovrebbero pagare circa 99 $ (richiesta carta di credito, non si accetta Pay Pal).

Error: signing for progetto requires a developer Team, select a development teram in the signing & capabilities editor

Oggi (2023) è possibile creare un Certificato temporaneo e un Profilo di Provisioning temporaneo (della durata di 6 giorni), senza dover pagare 99 $.

Gli ultimi dieci passaggi

L’obiettivo è quello di installare l’app su un vero iPhone reale (non sul simulatore). Questi sono dieci passaggi per evitare di pagare 99 $ e per evitare di concedere la propria carta di credito. Si risparmiano 99 $ ma i passaggi vanno ripetuti ogni 6 giorni perchè il certificato temporaneo scade dopo 6 giorni.

In fondo a questa pagina spiegate anche altre piccole limitazioni del metodo.

Primo passo: si apre Xcode, (Open existent project) e si apre la sottocartella del ./progetto/ios (se il programma si chiude improvvisamente, è sufficiente riprovare) .

Screenshot di Xcode dopo aver aperto un progetto (si può selezionare sotto il titolo PROJECT)

Secondo passo: si apre il menù Xcode > Preferences > General > Accounts, dove si può inserire il proprio Apple ID. Si dichiara di essere uno sviluppatore individuale (si ottiene automaticamente un generico Personal Team).

Screenshot della configurazione di XCode, scheda Accounts. Apple ID (personal team)

Terzo passo: il Personal Team non è ancora presente nel progetto (sempre all’interno di Xcode). Selezionare il progetto in alto a sinistra (aperto nel primo passo). Sotto PROJECT, selezionare TARGET. Si deve passare alla scheda Signing & Capabilities. Automatically manage signing deve rimanere selezionato. Team è vuoto, quindi va modificato.

Screenshot di Xcode nella scheda Signing. Il triangolo giallo indica un problema: it requires a development team

La selezione va fatta nella voce Team. Ma si può cambiare anche Bundle Identifier

Spesso i successivi errori si risolvono deselezionando/riselezionando Automatically manage signing e ripetendo i passaggi previsti

Screenshot di Xcode, della scheda Signing, della voce Team

Purtroppo questo genera due nuove segnalazioni, ma si potranno aggirare:

  • Status Warning: Failed to create provisioning profile.
  • Warning: No profile for progetto were found.
Screenshot della scheda Signing and capabilities di Xcode, dove appaiono due nuovi triangoli gialli

Quarto passo: lo smartphone deve essere collegato (iPhone)

Quinto passo: nel menù Xcode > Product > Destination > (vero iPhone dell’utente)

La prima volta il prodotto apparirà ma non sarà disponibile: unavailable device. Significa che bisogna abilitare prima la modalità sviluppatore sull’iPhone.

iPhone > Settings > Privacy and security > Developer mode > Turn on ( e riavviare)

Sesto passo: PROJECT > Build Settings > Signing (Debug e Release)

Questa immagine è animata per tre passaggi.

Screenshot di Xcode (Build signing) dove Code Signing Identity mostra Apple Development (senza nome), sia in Debug che in Release

Settimo passo: nella precedente scheda Signing and capabilities (terzo passo), i due precedenti triangoli gialli scompaiono e appare: Provided profile Xcode managed profile

Ottavo passo: si può osservare un piccolo cerchio (i) per avere ulteriori informazioni, premendo il quale si può leggere: Expires in 6 days

Screenshot di Xcode, quando viene generato un Provisioning Profile (della durata di appena 6 giorni)

Nono passo: (richiede diversi minuti di compilazione) a questo punto si può aprire il terminale (nel solito progetto) e digitare

cd progetto
npx react-native start

In un altro terminale si possono eseguire tutte queste operazioni con un solo comando:

  • avviare la compilazione (build)
  • avviare l’installazione dell’app nello smartphone
  • avviare l’applicazione nello smartphone
cd progetto
npx react-native run-ios
  • ATTENZIONE: durante il build si aprirà una finestra di dialogo (popup), dal titolo Codesign wants to access key “…..” in your keychain… dove si deve inserire la password utente (login) e dove è obbligatorio premere: Always allow

Decimo passo: Il vero smartphone mostra la nuova icona, ma si rifiuta di avviare un’Applicazione firmata da un untrusted developer. Per autorizzare l’uso del certificato dello sviluppatore, si deve aprire (nello smartphone) Settings > General > VPN and Device Management > Icona Developer App

Screenshot di iOS: Untrusted Developer (posso premere solo Cancel e aprire Settings)
Screenshot iOS, Settings > VPN and Device Management > Developer APP
Screenshot iOS: il pulsante Trust … è il pulsante per assegnare la fiducia alla nuova applicazione
Screenshot iOS: Trust (oppure Cancel) per autorizzare il singolo sviluppatore (questo permesso scade dopo 6 giorni)

ATTENZIONE:

  • ad ogni nuova compilazione e installazione, va ripetuto il passaggio 8.
  • ad ogni nuovo progetto (nuova cartella) si devono ripetere TUTTI e nove i passaggi.