Comment créer des clips d'application pour iOS 14

Avec l'avènement d'iOS 14, nous avons eu l'opportunité de créer une nouvelle expérience pour les utilisateurs de nos applications. Je parle des App Clips, un petit extrait de la version complète de l'application. En tant que l'un des développeurs de Miquido, je voulais partager mon expérience dans leur création.

Nous aborderons trois sujets – premièrement, la préparation du projet. Deuxièmement, comment créer un clip d'application et, enfin, je mentionnerai quelques éléments sur les tests et la distribution.

Préparation du projet

Lorsque vous envisagez d'ajouter un App Clip à notre application, nous devons nous souvenir d'une règle de base : nous devons utiliser le code actuel de notre base de code . Le clip d'application est en fait un extrait de notre application. Il utilise les mêmes modèles et vues, donc lorsque nous pensons à créer des clips d'application, nous devons concevoir notre architecture en conséquence.

Si nous avons déjà préparé notre architecture d'application de manière modulaire, y ajouter un App Clip sera beaucoup plus facile. Sinon, c'est le bon moment pour refactoriser. Cela nous sera bénéfique à l'avenir, car ajouter plus de cibles sera plus facile et plus rapide.

Lignes directrices sur l'interface humaine

Avant d'ouvrir Xcode et de plonger dans les détails de la mise en œuvre d'un clip d'application, je voudrais mentionner les directives d'interface humaine d'Apple. C'est une bonne pratique de les suivre, car Apple fournit certains des meilleurs conseils d'expérience utilisateur.

Certains des points les plus importants à garder à l'esprit :

• Concentrez-vous sur les fonctionnalités essentielles ;
• Concevoir une interface utilisateur linéaire, facile à utiliser et ciblée ;
• Évitez d'obliger les gens à créer un compte avant de pouvoir bénéficier de votre App Clip

Création d'un clip d'application pour iOS 14

Maintenant, ouvrons le Xcode et chargeons votre projet. Créez une nouvelle cible App Clip en sélectionnant File> New> Target> App Clip . Vous pourrez utiliser une interface utilisateur ou un storyboard Swift pour l'interface et un délégué d'application Swift UI ou UIKit pour le cycle de vie du clip d'application. Choisissez le projet et l'application appropriés, puis cliquez sur Créer.

Avant de configurer nos URL dans le Xcode, nous devrons créer le fichier de domaine associé sur notre serveur Web. Pour ce faire, nous devrons créer un fichier appelé apple-app-site-association , avec une structure JSON :

La valeur des applications doit être l'identifiant de l'application du clip d'application – <Application Identifier Prefix>.<Bundle ID> .

Après avoir configuré notre fichier apple-app-site-association, nous devons ajouter un droit de domaines associés à la fois à notre cible d'application hôte et à la cible du clip d'application. Grâce à cela, iOS pourra gérer le lien qui mène à l'application. Si l'utilisateur n'a pas installé la version complète de l'application, le clip d'application sera lancé. Si la version complète est accessible. il sera lancé normalement.

Toute URL qui exécute le clip d'application doit être répertoriée dans la fonctionnalité Domaines associés avec le préfixe appclips (par exemple, appclips : test.example). Ils doivent également être répertoriés sous Domaines associés dans l'application hôte.

Comme je l'ai mentionné au début, App Clip partage des fonctionnalités avec notre application complète, c'est pourquoi nous devons décider quelles parties de code nous voulons partager entre deux cibles. Lors de l'ajout de fonctionnalités à App Clip, il peut arriver qu'une partie du code de la version complète de l'application soit inutile ou que nous devions ajouter du code uniquement pour ses besoins. Pour ce faire, nous pouvons utiliser Active Compilation Conditions . Nous pouvons décider quelles parties du code doivent être compilées dans la version complète de l'application, et lesquelles uniquement pour les besoins d'App Clip. Vous pouvez facilement les gérer dans la cible App Clip en sélectionnant l'onglet Build Settings , puis Swift Compilers - Custom Flags -> Active Compilation Conditions .

Après avoir ajouté la cible et lui avoir attribué les fonctionnalités appropriées, nous pouvons procéder aux tests. Vous pouvez exécuter App Clip sur un simulateur ou un appareil physique. Pour ce faire, vous devez fournir l'URL d'invocation en tant que variable d'environnement. De cette façon, vous pouvez vérifier le comportement de votre clip d'application avec différentes invocations d'URL et avec différents paramètres de requête.

Pour accéder aux variables d'environnement, sélectionnez la cible App Clip dans la liste déroulante des schémas et cliquez sur Modifier le schéma . Sélectionnez l' onglet Action d'exécution et Arguments . Sous l'en-tête Variables d'environnement , modifiez la valeur de _XCAppClipURL . S'il ne s'y trouve pas, ajoutez-le en tant que clé et définissez sa valeur en tant qu'URL d'invocation. Assurez-vous que la case est cochée. Apple suggère de créer des URL génériques qui couvrent la plupart des cas d'utilisation de nos expériences App Clip. Si nous devons spécifier un itinéraire qui doit être différent de celui par défaut, ajoutez-le en tant qu'expérience différente, avec une nouvelle image, un nouveau titre et d'autres paramètres.

Carte d'application de test

Il y a une chose importante à retenir : une fois que vous avez créé la cible App Clip, vous ne verrez pas sa carte sur votre appareil . Pour le tester, vous devez ajouter la soi-disant expérience locale , c'est-à-dire un environnement local sur un appareil physique. Ceci est particulièrement utile lors du test de codes QR ou d'appels de balises NFC. Au moment de la rédaction de cet article, Apple n'a pas encore publié les outils nécessaires pour créer des codes de clip d'application, qui sont essentiellement des codes QR propriétaires d'Apple. Pour nos besoins, nous pouvons facilement le remplacer par des codes QR classiques.

Après avoir installé App Clip sur votre appareil physique, accédez à Environnements locaux dans Paramètres -> Développeur -> Expériences locales, puis sélectionnez Enregistrer l'expérience locale . Vous serez invité à :

• Préfixe d'URL qui appelle le clip d'application
• Copiez le titre et le sous-titre de la carte App Clip
• Un verbe d'appel à l'action
• Une image d'en-tête
• Identifiant du bundle de votre App Clip

Créez ou numérisez une balise NFC ou un code QR pour déclencher un environnement local avec un clip d'application spécifique.

Préparer l'application Clip pour les tests et la distribution

Maintenant que vous avez construit votre App Clip, il est temps de le tester et de le distribuer - nous pouvons utiliser TestFlight à cette fin. Nous devons garder à l'esprit que, de la même manière que les utilisateurs n'installent pas les App Clips et que les App Clips n'apparaissent pas sur l'écran d'accueil, les testeurs n'installent pas la version bêta de votre App Clip. Au lieu de cela, les testeurs lancent les expériences App Clip que vous configurez pour les tests.

Il existe une section App Clip dans App Store Connect où vous devez fournir l'image d'en-tête, le sous-titre et l'action. Ces métadonnées apparaissent dans l'App Clip Card. Vous ne pouvez modifier cette section qu'après avoir téléchargé le fichier compilé. Après avoir fait défiler la page plus bas, nous voyons la possibilité d'ajouter des URL pour que les examinateurs d'applications testent App Clip. Si vous utilisez des paramètres de requête, assurez-vous d'inclure au moins deux URL pour vos tests.

Heure de la première

Une fois les tests effectués par nos développeurs iOS terminés, il est temps de publier notre App Clip. Cette tâche est très simple - si nous avons prévu de publier l'application hôte, App Clip sera rendu public à tous les utilisateurs avec elle. Notre premier App Clip est maintenant disponible et prêt à être découvert par les utilisateurs !

Souhaitez-vous utiliser des clips d'application pour votre entreprise ? Contactez nos experts et voyez comment nous pouvons vous aider !