Création d'un Sticker pack Application Message extension pour iOS avec Xcode

L'objectif de ce tutoriel est de créer un pack de stickers pour l'application iOS Message. Ce tutoriel ne nécessite pas de lignes de code mais nécessite un grand nombre d'étapes, clics, formulaires et édition d'images. C'est aussi un bon moyen de se familiariser avec la procédure de publication d'applications sur l'App Store.

Publié le 06/12/2019

1 - Création du projet

Prérequis : Ce tutoriel nécessite un compte Apple Developper [https://developer.apple.com] pour publier sur l'AppStore. Xcode et les applications iOS AppStore Connect et TestFlight.

L'exemple utilisé à servi pour la création d'un pack de stickers pour la marque Poulettes Sisters.

Dans Xcode créer un projet Sticker Pack App.

Nom du projet : PoulettesSistersStickers

Un projet Sticker Pack va contenir deux targets : une application et une extension iMessage.

Chacune des targets sera signée lors de la soumission vers l'App Store.

Paramétrage de l'application :

Chaque target va dispose d'un Bundle Identifier :

  • PoulettesSistersStickers : com.fresh.ps.stickers
  • PoulettesSistersStickers StickerPackExtension : com.fresh.ps.stickers.extension

2 - Import du logo de l'application

Dans l'explorateur de fichier (volet de gauche) sélectionner le dossier Stickers.xcstickers.

Dans le volet gauche de la fenêtre qui est apparue, sélectionner iMessage App Icon pour affecter les images d'icone de l'application.

Préparer des fichiers PNG aux tailles indiqués et faites les glisser vers leurs emplacements respectifs.

3 - Import des images sticker

Les images pour les stickers devront avoir une largueur / hauteur de 50px minimum.

On prépare des images au format retina @3x, dans cette exemple je prend des images carrées de 100px qui feront 300px en @3x.

Toujours dans le volet le gauche, on sélectionne le dossier Sticker Pack et on fait glisser les fichiers dedans. Dans le volet de visualisation, on peut changer l'ordre d'apparition des stickers en les faisant glisser déposer pour les positionner dans l'ordre souhaité.

4 - Build et Test

On va tester nos sticker à l'aide de nos devices ou du simulateur [pas très stable, beaucoup de clean rebuild].

Lancer l'exécution de l'app avec le raccourci : commande + R

5 - Création des identifiants et profils de publication sur le portail développer Apple

Se connecter sur https://developer.apple.com/, aller sur dans Account, puis Certficates, Identifiers & Profiles

5.1 - Création des app Identifiers

Création de l'identifier pour PoulettesSistersStickers :

  • Cliquer sur +
  • Sélectionner App IDs
  • A l'étape Register an App, remplir comme suit :
    • Plateform : iOS, tvOS, watchOS
    • Description: pssticker
    • Bundle ID : com.fresh.ps.stickers
    • Cliquer sur continue
  • Cliquer sur Register

Création de l'identifier pour PoulettesSistersStickers StickerPackExtension :

  • Cliquer sur +
  • Sélectionner App IDs
  • A l'étape Register an App, remplir comme suit :
    • Plateform : iOS, tvOS, watchOS
    • Description: psstickerext
    • Bundle ID : com.fresh.ps.stickers.extension
    • Cliquer sur continue
  • Cliquer sur Register

5.2 - Création des profiles de distribution pour l'AppStore

Dans l'admin Apple Developper, cliquer sur Profiles dans le menu à gauche.

Création du profile pour PoulettesSistersStickers :

  • Cliquer sur +
  • A l'étape Register a New Provisioning Profile, remplir comme suit :
    • Distribution : App Store
    • Cliquer sur continue
    • Sélectionner l'App ID : WKXXXXX.com.fresh.ps.stickers
  • A l'étape Generate a Provisioning Profile, sélectionner le certificat de distribution présenté qui correspond à votre certificat de distribution de votre compte développeur Apple.
  • Cliquer sur continue
  • Indiquer un nom de profile : pssticker
  • Cliquer sur Generate
  • Cliquer sur Download

On renouvelle l'opération pour la création du profile pour PoulettesSistersStickers StickerPackExtension:

  • Cliquer sur +
  • A l'étape Register a New Provisioning Profile, remplir comme suit :
    • Distribution : App Store
    • Cliquer sur continue
    • Sélectionner l'App ID : WKXXXXX.com.fresh.ps.stickers.extension
  • A l'étape Generate a Provisioning Profile, sélectionner le certificat de distribution présenté qui correspond à votre certificat de distribution de votre compte développeur Apple.
  • Cliquer sur continue
  • Indiquer un nom de profile : psstickerext
  • Cliquer sur Generate
  • Cliquer sur Download

On garde de coté nos fichiers de profiles qui vont servir lors des étapes suivantes.

6 - Création et upload d'une archive vers l'AppStore

Cette étape vise à exporter une archive [application compilée] que nous allons publier sur l'AppStore.

6.1 - Paramétrage du certificat de distribution

Pour chaque target nous allons assigner le certificat de distribution pour l'AppStore.

Dans le volet explorateur de fichier d'Xcode, sélectionner le projet et vous trouverez les targets dans le volet gauche de la fenêtre contenant les informations du projet.

Aller dans l'onglet Signing & Capabilities, décocher Automaticaly manage signing et choisir dans le menu Provisioning Profil : Import Profil. Importer le profil générer précédemment sur developper apple correspondant à la target.

Renouveler l'opération pour l'autre target.

6.2 - Build de l'archive

Dans Xcode, sélectionner Generic iOS Device comme destination dans la barre de selection du scheme en haut.

Ensuite aller dans la barre des menus et sélectionner Product > Archive.

Le gestionnaire d'archive s'ouvre en fin de build et affiche cette dernière prête à être uploadé sur le store.

6.3 - Upload de l'archive vers l'AppStore

Dans le gestionnaire d'archive, on sélectionne la build et on clique sur Distribute App.

Suivre les étapes :

  • Select a method of distribution : AppStoreConnect
  • > Next
  • Select a destination : Upload
  • > Next
  • App Store Connect distribution options: [Laisser cocher ou pas]
  • > Next
  • Re-sign "PoulettesSistersStickers" : Manualy manage signing
  • > Next
  • - Select certificate and iOS App Store profiles :
    • Distribution certificate : Default (iOS distribution)
    • PoulettesSistersStickers.app : pssticker
    • PoulettesSistersStickers.app StickerPackExtension.appex : psstickerext
  • > Next
  • > Upload

On recevra une notification par mail nous indiquant que la build est disponible sur AppStore Connect.

7 - Publication sur l'App Store

Se connecter sur AppStore Connect : https://appstoreconnect.apple.com

Aller dans Mes apps.

Créer une application en cliquant sur + en haut à gauche, sélectionner "Nouvelle app".

Remplir le formulaire comme suit :

  • Plates-formes : iOS
  • Nom : PoulettesSistersStickers
  • Langue principale : Français
  • Identifiant de lot : pssticker - com.fresh.ps.stickers
  • UGS : PSS1
  • Accès utilisateur : accès complet
  • > Créer

Cliquer sur l'application crée et effectuer les étapes suivantes :

  • Créer des screens screenshot de l'app avec le simulateur
  • Préparer et créer des templates de présentation de l'app pour le store
  • Remplir les informations de l'app
  • Indiquer son tarif et sa disponibilité
  • Soumettre l'application pour les tests
  • Réaliser une campagne de test avec TestFlight
  • Soumettre l'application pour la publication sur l'AppStore

8 - Réalisation de screenshots de l'App

Pour la présentation de l'app dans le store il nous sera demandé par moins de 5 écrans de présentation présentant une device :

  • iPhone 5.5"
  • iPhone 6.5"
  • iPad Pro 3rd gen 12"9
  • iPad Pro 2nd gen 12"9

On prendra comme machines dans le simulateur :

  • iPhone 8+
  • iPhone X
  • iPad Pro 3rd gen 12"9
  • iPad Pro 2nd gen 12"9

J'ai choisi volontairement ces modèles qui collent aux thèmes disponibles chez Placeit [https://placeit.net/].

On réalise nos captures d'écran avec le raccourci : commande + option + S

9 - Création des écrans de présentation

On va s'aider pour la création des écrans, des thèmes disponibles chez Placeit :

Voici les tailles demandées pour chaque écran :

  • iPhone 5.5" : 1242 x 2208px
  • iPhone 6.5" : 1242 x 2688px
  • iPad Pro 3rd gen 12"9 : 2732 x 2048
  • iPad Pro 2nd gen 12"9 : 2732 x 2048

Le template en ligne ne disposant pas des tailles demandés par l'app store pour les templates d'iPad, il sera nécessaire de faire un peu de redimensionnement avec un soft d'édition d'image comme Affinity Photo [https://affinity.serif.com/fr/photo/].

10 - Renseignement des informations de l'app

Dans l'AppStore Connect, dans le volet de gauche, section "app", on voit l'archive qu'on a uploadé. On la sélectionne et on remplis les champs de formulaires :

  • Aperçus de l’app et captures d’écran
  • Accroche
  • Description
  • Mots-clés
  • URL de l’assistance
  • URL marketing

Dans l'onglet Build du formulaire on ajoutera plus tard la build.

Dans l'onglet Informations générales sur l’app :

Icône App Store : une image du logo de l'app en 1024 x 1024px

Classification par âge : choisir l'age adapté à votre contenu

Dans l'onglet Informations utiles à la vérification de l’app :

Remplir ses coordonnées.

Ne pas cochez "connexion requise".

Publication de la version : Publier cette version automatiquement

> Cliquer sur Enregistrer

11 - Création d'une campagne de test avec TestFlight

Dans AppStore Connect, dans le menu du haut, cliquer sur TestFlight.

Cliquer sur le numero de version de la build [archive], puis sur l'onglet détail des tests et renseigner le formulaire et cliquer sur Enregistrer.

Dans le volet de gauche on clique sur Utilisateurs App Store Connect et on ajoute au moins un testeur privé : on s'ajoute en tant que testeur.

On vérifie qu'une build est bien disponible, sinon on ajout celle qu'on vient d'uploader.

Dans le volet de gauche retourner sur iOS, cliquer sur le numero de version de la build et cliquer sur Soumettre pour vérification.

Une pop up vous demande si vous utiliser dans l'app un moyen de chiffrement, répondre NO.

L'état de la build passe à disponible pour les testeurs externes.

On peut alors ajouter des testeurs externes en cliquant dans le volet de gauche sur Ajouter des testeurs externes.

On créer un groupe de testeur externes. Dans ce groupe on ajoute une build puis des testeurs en les invitants par leur email lié à leur compte Apple ID. Les testeurs recevront une invitation par email. Cette dernière comportera un lien qu'il devront cliquer pour valider leur inscription au programme de test. Il seront invités à télécharger l'app TestFlight dans l'app store. Il pourront ensuite accéder au version de test depuis l'app TestFlight.

Une fois passé les tests, on va enfin passer à la publication sur le store.

12 - Publication sur l' App Store

Dans AppStore Connect, dans le menu du haut, cliquer sur App Store.

Dans le volet de gauche cliquer la build et dans le formulaire cliquer sur Soumettre pour vérification.

Répondre au formulaire suivant :

Identifiant publicitaire

Cette app utilise-t-elle un identifiant publicitaire IDFA ? : NON

> Envoyer