Come creare clip app per iOS 14

Pubblicato: 2020-12-21

Con l'avvento di iOS 14, abbiamo avuto l'opportunità di creare una nuova esperienza per gli utenti delle nostre applicazioni. Sto parlando di App Clips, un piccolo estratto dalla versione completa dell'app. Come uno degli sviluppatori di Miquido, volevo condividere la mia esperienza nella loro creazione.

Tratteremo tre argomenti: in primo luogo, la preparazione del progetto. In secondo luogo, come creare una clip dell'app e, infine, menzionerò alcune cose su test e distribuzione.

Preparazione del progetto

Quando pensiamo di aggiungere un'App Clip alla nostra applicazione, dobbiamo ricordare una regola di base: dobbiamo utilizzare il codice corrente dalla nostra base di codice . L'App Clip è in realtà un frammento della nostra applicazione. Utilizza gli stessi modelli e viste, quindi quando pensiamo di creare clip per app, dobbiamo progettare la nostra architettura di conseguenza.

Se abbiamo già preparato la nostra architettura dell'applicazione in modo modulare, aggiungere un'App Clip ad essa sarà molto più semplice. Altrimenti, questo è un buon momento per il refactoring. Ci avvantaggerà in futuro, poiché l'aggiunta di più obiettivi sarà più facile e veloce.

Linee guida per l'interfaccia umana

Prima di aprire Xcode e approfondire i dettagli dell'implementazione di una clip per app, vorrei citare le linee guida dell'interfaccia umana di Apple. È una buona pratica seguirli, poiché Apple fornisce alcuni dei migliori suggerimenti sull'esperienza utente.

Alcuni dei punti più importanti da tenere a mente:

  • Concentrati sulle caratteristiche essenziali;
  • Progetta un'interfaccia utente lineare, facile da usare e mirata;
  • Evita di richiedere alle persone di creare un account prima che possano beneficiare della tua App Clip

Creazione di un'app clip per iOS 14

Ora apriamo l'Xcode e carichiamo il tuo progetto. Crea una nuova destinazione App Clip selezionando File> Nuovo> Destinazione> App Clip . Potrai utilizzare un'interfaccia utente o uno Storyboard Swift per l'interfaccia e un'interfaccia utente Swift o un delegato dell'app UIKit per il ciclo di vita di App Clip. Scegli il progetto e l'applicazione corretti, quindi fai clic su Crea.

Prima di configurare i nostri URL all'interno di Xcode, dovremo creare il file di dominio associato sul nostro server web. Per fare ciò, dovremo creare un file chiamato apple-app-site-association , con struttura JSON:

Clip di app

Il valore per le app deve essere l'identificatore dell'app dell'app clip – <Application Identifier Prefix>.<Bundle ID> .

Dopo aver configurato il nostro file di associazione al sito dell'app Apple, è necessario aggiungere un diritto di dominio associato sia alla destinazione dell'app host che alla destinazione della clip dell'app. Grazie a ciò, iOS sarà in grado di gestire il collegamento che porta all'applicazione. Se l'utente non ha installato la versione completa dell'app, verrà avviata l'App Clip. Se la versione completa è accessibile. verrà lanciato normalmente.

Qualsiasi URL che esegue l'App Clip deve essere elencato nella funzione Domini associati con il prefisso appclips (ad esempio, appclips: test.example). Dovrebbero anche essere elencati in Domini associati nell'applicazione host.

Funzione Domini Associati

Come accennato all'inizio, App Clip condivide la funzionalità con la nostra applicazione completa, ecco perché dobbiamo decidere quali parti di codice vogliamo condividere tra due target. Quando si aggiungono funzionalità ad App Clip, potrebbe verificarsi una situazione in cui parte del codice della versione completa dell'applicazione non sarà necessario o dovremo aggiungere codice solo per le sue esigenze. Per raggiungere questo obiettivo, possiamo utilizzare Condizioni di compilazione attive . Possiamo decidere quali parti del codice devono essere compilate nella versione completa dell'applicazione e quali solo per le esigenze di App Clip. Puoi gestirli facilmente nella destinazione App Clip selezionando la scheda Impostazioni build , quindi Compilatori Swift – Flag personalizzati -> Condizioni di compilazione attive .

Condizioni di compilazione attive
Condizioni di compilazione attive 2

Dopo aver aggiunto il target e avergli assegnato le funzionalità appropriate, possiamo procedere al test. Puoi eseguire App Clip su un simulatore o un dispositivo fisico. A tale scopo, è necessario fornire l'URL di chiamata come variabile ambientale. In questo modo, puoi controllare come si comporta la clip dell'app con diverse chiamate di URL e con diversi parametri di query.

Per accedere alle variabili di ambiente, seleziona la destinazione App Clip dall'elenco a discesa dello schema e fai clic su Modifica schema . Seleziona la scheda Esegui azione e argomenti . Sotto l'intestazione Variabili d'ambiente , modifica il valore per _XCAppClipURL . Se non è presente, aggiungila come chiave e imposta il suo valore come URL di chiamata. Assicurati che la casella di controllo sia selezionata. Apple suggerisce di creare URL generici che coprano la maggior parte dei casi d'uso per le nostre esperienze con App Clip. Se dobbiamo specificare un percorso che deve essere diverso da quello predefinito, aggiungilo come un'esperienza diversa, con una nuova immagine, titolo e altri parametri.

Argomenti passati al lancio

Test della scheda clip dell'app

C'è una cosa importante da ricordare: una volta creata la destinazione App Clip, non vedrai la sua scheda sul tuo dispositivo . Per testarlo è necessario aggiungere la cosiddetta Local Experience , ovvero un ambiente locale su un dispositivo fisico. Ciò è particolarmente utile quando si testano i codici QR o le chiamate con tag NFC. Al momento della stesura di questo articolo, Apple non ha ancora rilasciato gli strumenti necessari per creare App Clip Code, che sono essenzialmente codici QR proprietari di Apple. Per le nostre esigenze possiamo tranquillamente sostituirlo con i classici QR code.

Dopo aver installato App Clip sul tuo dispositivo fisico, vai su Ambienti locali in Impostazioni -> Sviluppatore -> Esperienze locali e seleziona Registra esperienza locale . Ti verrà richiesto di:

  • Prefisso URL che richiama l'App Clip
  • Copia per il titolo e il sottotitolo della scheda App Clip
  • Un verbo di invito all'azione
  • Un'immagine di intestazione
  • Identificatore del pacchetto della clip dell'app

Crea o scansiona un tag NFC o un codice QR per attivare un ambiente locale con una clip app specifica.

Registra l'esperienza locale

Prepara l'app Clip per il test e la distribuzione

Ora che hai creato la tua App Clip, è il momento di testarla e distribuirla: possiamo usare TestFlight per questo scopo. Dobbiamo tenere presente che, analogamente al modo in cui gli utenti non installano le clip dell'app e al modo in cui le clip dell'app non vengono visualizzate nella schermata iniziale, i tester non installano la versione beta della clip dell'app. Invece, i tester avviano le esperienze App Clip che configuri per il test.

C'è una sezione App Clip in App Store Connect in cui devi fornire l'immagine dell'intestazione, i sottotitoli e l'azione. Questi metadati vengono visualizzati nella scheda clip dell'app. Puoi modificare questa sezione solo dopo aver caricato il file compilato. Dopo aver fatto scorrere più in basso la pagina, vediamo la possibilità di aggiungere URL per i revisori di app per testare App Clip. Se utilizzi parametri di query, assicurati di includere almeno due URL per i tuoi test.

Tempo della prima

Dopo che i test dei nostri sviluppatori iOS sono stati completati, è ora di rilasciare la nostra App Clip. Questa attività è molto semplice: se abbiamo pianificato di rilasciare l'applicazione host, App Clip verrà resa pubblica a tutti gli utenti insieme ad essa. La nostra prima App Clip è ora disponibile e pronta per essere scoperta dagli utenti!

Ti piacerebbe utilizzare clip app per la tua attività? Contatta i nostri esperti e scopri come possiamo esserti d'aiuto!