Il y a quelque temps, j’ai publié un article sur la façon de créer une application Android et de la regrouper avec Firebase. Le but de cet article, et celui que vous lisez maintenant, est d’introduire lentement le monde du développement d’applications mobiles et de Firebase, étant donné que ce dernier devient de plus en plus populaire en tant que plate-forme d’analyse incontournable de Google.

Après avoir terminé le travail sur le guide Android, j’ai immédiatement commencé à travailler sur son homologue pour iOS, et c’est celui que vous lisez maintenant.

Le processus est essentiellement le même. Nous développerons l’application en utilisant le propre environnement de développement intégré de Mac (Xcode), et les étapes pour créer et intégrer Firebase et Google Tag Manager ne s’écartent que très peu d’Android.

J’ai également créé une vidéo que vous pouvez regarder si vous préférez.

Ce que tu vas construire

Nous allons construire un iOS application utilisant le langage de programmation Swift. L’application sera construite avec Code Xvous devrez donc utiliser un Mac ordinateur pour cela car il n’y a pas de support natif pour Xcode sur d’autres plates-formes.

Ensuite, nous allons créer un Base de feu projet, et connectez-le à un Google Analytics Compte. Après cela, votre application collectera automatiquement certains événements.

Nous ajouterons un simple select_content événement, qui sera enregistré dans Google Analytics pour Firebase.

Enfin, nous allons créer un Gestionnaire de balises Google conteneur, et faites-le écouter le select_content événement, puis dupliquez son contenu dans un Analytique universelle point final.

L’application que nous allons créer sera hideuse et dépourvue de fonctionnalités. Créer une application flashy n’est pas le but ici. Je veux vous montrer à quel point il est facile de démarrer, et vous pouvez utiliser même cette application la plus simple pour jouer avec Firebase afin d’apprendre comment cela fonctionne.

Étape 1 : Créer un projet dans Xcode

Commençons!

Allez à la Applications dossier de votre Mac et lancez Xcode.

Cliquer sur Dossier -> Nouveau -> Projet pour créer un nouveau projet Xcode.

Choisir la Application à vue unique comme modèle, puis cliquez sur Suivant.

Dans l’écran suivant, donnez au produit un nom tel que My Test Application. Si vous souhaitez exécuter l’application sur un appareil physiquechoisissez-vous parmi les Équipe menu déroulant. Si le menu déroulant Équipe n’affiche pas votre nom (tel qu’il est configuré sur votre identifiant Apple), suivez les options pour créer une équipe personnelle avec votre identifiant Apple.

Note! Vous ne devez le faire que si vous souhaitez exécuter l’application sur votre appareil physique. Nous utiliserons un simulateur dans les exemples afin que vous puissiez également ignorer la liste déroulante Équipe.

Vous pouvez donner une coutume Identifiant de l’organisationcar cela facilite la mémorisation de votre identifiant de groupe (dont vous aurez besoin lors de la création du projet Firebase).

Assure-toi Rapide est sélectionné comme langue, et lorsque vous êtes prêt, cliquez sur Suivant.

Enfin, accédez au répertoire dans lequel vous souhaitez créer le projet. Dans mon exemple, il s’agit d’un répertoire nommé ios-test.

Cliquez sur Créer lorsque vous avez terminé.

Xcode va maintenant procéder à la création de votre projet. Une fois cela fait, il ouvrira les paramètres généraux du projet et vous montrera la structure du projet à gauche.

Avant d’exécuter notre application pour la première fois, ajoutons-y un peu de cœur. Cliquez sur Storyboard principal pour ouvrir l’éditeur visuel de l’interface utilisateur de l’application.

Clique le Bibliothèque d’objets icône dans la barre supérieure de Xcode, et tapez text dans la barre de recherche qui s’affiche. Faites glisser et déposez le Champ de texte élément au milieu de la vue.

Double-cliquez sur le champ de texte dans la vue et saisissez Hello World!. Vous pouvez repositionner le champ si vous le souhaitez – bien que cela ne le rende pas plus joli. Voici à quoi cela devrait ressembler :

Maintenant que nous avons créé un belle interface utilisateur, nous pouvons exécuter l’application. Choisissez un modèle de téléphone, par exemple iphone 6 dans le menu de l’appareil, puis cliquez sur le Jouer bouton pour construire l’application et exécuter le simulateur.

Cela va prendre un certain temps pour que l’application démarre, mais une fois qu’elle le fera, vous pourrez la voir dans la fenêtre de l’émulateur (c’est une application différente qui démarre, alors n’oubliez pas d’y basculer).

Toutes nos félicitations! Vous avez créé l’application iOS que nous utiliserons comme banc d’essai dans cet article. Dans l’étape suivante, nous configurerons Base de feu!

Étape 2 : Créer un projet Firebase

Ici, je vous recommande de suivre les exactement les mêmes étapes comme dans l’article Android. Ouvrez ce lien dans un nouvel onglet de navigateur pour découvrir comment créer le projet Firebase. Une fois le projet créé, revenez à cet article.

Étape 3 : Déployer le SDK Firebase dans l’application

Une fois le projet créé, vous devrez l’intégrer à votre Application iOS.

Clique le iOS icône au milieu du tableau de bord Vue d’ensemble du projet.

Dans le ID de groupe iOS champ, copiez-collez l’identifiant Bundle que vous pouvez trouver dans Xcode en sélectionnant d’abord votre projet, puis en regardant dans le Identité partie de la Général onglet des paramètres de votre projet.

Donnez à l’application un surnom tel que My iOS App si vous le souhaitez, puis cliquez sur Enregistrer l’application.

Dans l’écran suivant, téléchargez le GoogleService-Info.plist fichier, puis faites-le glisser et déposez-le dans le répertoire du projet dans Xcode (le dossier jaune). Vous devriez voir un écran comme celui-ci, alors assurez-vous de vérifier toutes les options comme dans l’exemple.

Vous devriez vous retrouver avec le fichier dans le répertoire du projet.

Dans le navigateur Web, cliquez sur Suivant lorsque vous avez terminé.

Maintenant, vous devez ajouter le SDK Firebase à votre projet. Pour ce faire, vous devez initialiser un Podfile pour gérer les dépendances de votre application.

Ouvrez le Terminal application, et naviguez jusqu’à la racine de votre projet, c’est-à-dire le répertoire qui contient My Project Name.xcodeproj dossier. Dans ce répertoire, tapez ceci et appuyez sur Entrée :

sudo gem install cocoapods

C’est une commande de super-utilisateur, vous devrez donc saisir votre mot de passe administrateur. Cela installe la dernière version de Cocopodesle gestionnaire de dépendances pour iOS.

Une fois cela fait, tapez ceci et appuyez sur Entrée :

pod init

Si vous listez maintenant le contenu du répertoire avec lsvous devriez voir un nouveau Podfile parmi les fichiers et dossiers.

Ouvrez le Podfile dans un éditeur de texte brut. Vous pouvez l’ouvrir dans Mac TexteModifier en tappant open Podfile dans la console tandis que dans le répertoire avec le Podfile.

Sous le # Pods for <my project>ajoutez les deux lignes suivantes :

pod 'Firebase/Analytics' pod 'GoogleTagManager'

Voici à quoi cela devrait ressembler :

Une fois terminé, enregistrez le fichier et fermez-le.

Maintenant, dans le Terminaltandis que dans le même répertoire que le Podfiletapez la commande suivante et appuyez sur Entrée.

pod install

Vous devriez voir un tas de dépendances en cours d’installation, y compris Base de feu et Google Analytics/Gestionnaire de balises modules.

Vous devriez maintenant voir un nouveau fichier dans ce répertoire, nommé Your Project.xcworkspace. À partir de maintenant, vous devrez l’utiliser à la place du Your Project.xcodeproj fichier lorsque vous travaillez sur le projet dans Xcode. L’espace de travail regroupe les Gousses que vous avez téléchargé avec votre projet, et vous permet de construire une application qui inclut tous les modules que vous avez indiqués comme dépendances.

Alors allez-y et fermer Xcode et le Simulateur iOSpuis rouvrez Xcode en ouvrant le Your Project.xcworkspace dossier.

Si tout fonctionne comme il se doit, vous verrez maintenant à la fois la racine de votre projet et le Gousses groupe dans le navigateur de projet.

Maintenant, revenez au navigateur Web avec la configuration de votre SDK Firebase. Comme vous avez maintenant ajouté le SDK en tant que dépendance, cliquez sur le Suivant bouton.

L’étape suivante consiste à initialiser le SDK dans votre application. Ouvrez Xcode, puis cliquez sur le AppDelegate.swift fichier de classe pour l’ouvrir pour le modifier.

Ici, juste après le import UIKit instruction, ajoutez la ligne suivante :

import Firebase

Cela importe le Firebase ensemble de modules. Pour initialiser le SDK Firebase, ajoutez la ligne de code suivante dans le application méthode, juste avant la return true déclaration:

FirebaseApp.configure()

C’est ce que votre AppDelegate.swift devrait ressembler après les changements.

La prochaine chose à faire est d’enregistrer vos modifications et Cours l’application dans un simulateur. Choisissez donc un modèle de téléphone dans le menu déroulant, puis cliquez sur le Jouer bouton à nouveau.

L’application elle-même ne montrera rien de changé, mais vous pourriez voir de nouveaux éléments liés à Firebase dans les journaux Xcode.

Note! Vous pouvez également filtrer pour GoogleTagManager pour voir la preuve que la dépendance GTM a été chargée. Cependant, puisque vous n’avez pas (encore) ajouté de conteneur au projet, le seul journal sera une simple entrée vous indiquant qu’aucun conteneur n’a été trouvé.

Une fois que vous avez exécuté l’application et vérifié que Firebase est initialisé, revenez au navigateur Web pour terminer la configuration du SDK.

Du Ajouter le code d’initialisation étape, cliquez Suivant procéder à la vérification.

Maintenant, si vous avez exécuté votre application dans Xcode sur un ordinateur avec accès à Internet, cette dernière étape devrait bientôt afficher une coche verte pour confirmer que vous avez initialisé le SDK Firebase.

Bon travail! Cliquez sur Continuer à consoler pour terminer la configuration.

Vous avez maintenant une installation Firebase fonctionnelle en cours d’exécution dans votre application. Vous pouvez désormais accéder à Google Analytics, navigateur de votre Firebase Application + Web propriété pour ce projet, et voir vos données dans le StreamView rapport à l’intérieur.

Cependant, ne nous précipitons pas. Dans le prochain chapitre, nous ajouterons une journalisation des événements Firebase à l’application !

Étape 4 : Ajoutez des analyses de base à l’application

Ajoutons maintenant un simple événement Firebase à notre application.

Ouvrez le ViewController.swift classer. Cette classe contrôle la vue (d’oh) où vous avez ajouté le “Hello World!” texte à.

Dans cette classe, chargez la dépendance Firebase appropriée avec la commande d’importation suivante ajoutée au début du fichier :

import FirebaseAnalytics

Ensuite, à la fin du viewDidLoad() fonction, ajoutez les lignes de code suivantes :

Analytics.logEvent(AnalyticsEventSelectContent, parameters: [     AnalyticsParameterItemID: "my_item_id" ])

Lorsque vous souhaitez envoyer des événements à Firebase Analytics, vous utilisez le Analytics singleton et ses logEvent() méthode.

Cette méthode prend deux arguments : le Nom de l’événement et une liste de paires clé-valeur dans un parameters liste.

Pour le nom de l’événement, vous pouvez fournir un nom personnalisé tel que "my_custom_event"ou vous pouvez utiliser les événements standard suggérés par Firebase en y accédant via le AnalyticsEvent.* espace de noms énuméré.

Pour les paires clé-valeur dans parametersvous pouvez à nouveau utiliser un nom de clé personnalisé tel que "my_custom_key"ou vous pouvez utiliser les noms de paramètres suggérés en y accédant via le AnalyticsParameter.* énumération.

Nous utilisons le AnalyticsEventSelectContent enum, qui retourne select_content à l’exécution, et nous utilisons le AnalyticsParameterItemID clé, qui renvoie item_id lors de l’exécution.

Voici ce que le modifié ViewController.swift devrait ressembler à :

Étape 5 : Déboguez et vérifiez que tout fonctionne

Avant d’exécuter à nouveau l’application, vous devrez ajouter une journalisation détaillée à la console. Choisir Produit -> Schème -> Modifier le schéma depuis la barre de menus.

Dans le Arguments transmis au lancementcliquez sur le plus (+) pour ajouter un nouvel argument et nommez-le -FIRAnalyticsDebugEnabled. Voici à quoi cela devrait ressembler :

Maintenant, exécutez à nouveau l’application. Dans les journaux de la console, vous devriez trouver le select_content événement en faisant défiler jusqu’à celui-ci ou en filtrant le nom de l’événement.

Vous pouvez désormais également consulter votre vue de rapport Google Analytics pour le Application + Web propriété créée pour ce projet, et faites défiler jusqu’à la DebugView rapport. Cela inclura automatiquement tous les appareils pour lesquels le -FIRAnalyticsDebugEnabled l’indicateur a été défini. Vous devriez trouver votre appareil (peut-être avec un nom étrange, cependant) dans la liste des appareils de débogage, et vous devriez voir un flux d’événements dans DebugView, ainsi que le nouveau select_content événement que vous venez de créer.

Avant de terminer, bifurquons ce hit Firebase Analytics à l’aide de Google Tag Manager et envoyons la copie à un point de terminaison Universal Analytics !

Étape 6 : Créer et télécharger un conteneur Google Tag Manager

Tout d’abord, assurez-vous que vous disposez d’un point de terminaison Universal Analytics valide. Vous devez créer un Propriété Web avec un Affichage de l’application mobile. Ce dernier est ce qui collecte les hits envoyés depuis votre application.

Une fois que vous avez l’ID de suivi (UA-XXXXX-Y) à portée de main, vous pouvez vous rendre sur https://tagmanager.google.com/ pour créer votre nouveau conteneur iOS.

Dans Google Tag Manager, créez un nouveau conteneur dans l’un de vos comptes ou créez d’abord un nouveau compte GTM.

Donnez un nom au conteneur, par exemple Ma demande d’essaiet choisissez iOS comme type. Cliquez sur Créer lorsqu’il est prêt.

Cliquez sur Nouvelle étiquette pour créer une nouvelle balise. Choisir Google Analytics : Analyse universelle comme type de balise.

Sélectionner Événement dans la liste Type de piste.

Ajoutez quelque chose à la Catégorie champ, par ex. Événement test.

Dans le Action champ, commencez à taper {{ puis choisissez Nouvelle variable de la liste.

Choisir Paramètre d’événement comme type de variable.

Donjon Paramètre Firebase suggéré coché, et choisissez ID de l’article dans la liste Paramètre d’événement.

Donnez un nom à la variable, par exemple {{item_id}} puis cliquez Sauver.

De retour dans la balise, vérifiez Activer les paramètres de remplacement dans cette baliseet ajoutez le code de suivi Google Analytics pour le site Web qui recevra ces appels (UA-XXXXXX-Y).

Enfin, cliquez sur le Déclenchement panneau pour ajouter un nouveau déclencheur.

Cliquez sur le plus bleu (+) connectez-vous dans le coin supérieur droit pour créer un nouveau déclencheur.

Choisir Personnalisé comme type de déclencheur.

Vérifier Quelques événements sous le Ce déclencheur se déclenche sur le cap.

Définissez la condition sur :

Nom de l’événement équivaut à select_content

Donnez un nom au déclencheur (par exemple select_content), et lorsque vous en êtes satisfait, cliquez sur Sauver.

Vérifiez que votre tag ressemble à celui ci-dessous, puis cliquez sur Sauver pour revenir au tableau de bord de Google Tag Manager.

À ce stade, vous êtes prêt à publier le conteneur, alors cliquez sur Nous faire parvenir dans le coin supérieur droit, puis Publier dans la superposition qui s’ouvre.

Une fois le conteneur publié, vous devriez voir un aperçu de la version publiée. Clique le Télécharger dans cet écran pour télécharger le fichier JSON du conteneur.

Maintenant, créez un nouveau dossier nommé récipient dans le racine de votre projet (le répertoire avec le .xcodeproj et .xcworkspace fichiers ainsi que les Podfile). Déplacez le conteneur JSON dans ce répertoire.

Ensuite, ouvrez Xcode. La racine de votre projet étant sélectionnée dans le navigateur, choisissez Dossier –> Ajouter des fichiers à votre projet.

Recherchez et sélectionnez le récipient dossier à partir du répertoire racine de votre projet et assurez-vous que les autres options sont cochées comme dans la capture d’écran ci-dessous. Cliquez sur Ajouter lorsqu’il est prêt.

Une fois prêt, vous pouvez exécuter votre applicationet il devrait charger le conteneur par défaut que vous venez d’ajouter à l’application, puis récupérer peu de temps après la version de conteneur la plus récente sur le réseau.

Note! C’est toujours une bonne idée de conserver une version de conteneur aussi récente que le conteneur par défaut stocké avec l’application elle-même. Ainsi, si un décalage réseau affecte la récupération d’une version de conteneur plus récente, la solution de secours (le conteneur par défaut) sera aussi à jour que possible.

Pour être sûr, vous devrez déboguer un peu la configuration.

Étape 7 : Déboguer et vérifier qu’Universal Analytics reçoit les appels

Les journaux de Xcode sont un peu en désordre. Cependant, si vous n’êtes pas opposé au défilement et à la recherche, vous pouvez trouver ce que vous cherchez. Vous pouvez également saisir du texte dans le champ de filtre pour analyser les journaux, mais il ne renvoie que les correspondances Lignes et n’est donc pas très utile.

Cependant, nous pouvons rapidement voir que Google Tag Manager a trouvé notre conteneur et a pu le charger dans l’application,

En plus de cela, en faisant défiler vers le bas, nous pouvons voir qu’un hit Universal Analytics a été envoyé via Google Tag Manager, en utilisant les paramètres que nous avons définis pour le select_content un événement.

Enfin, nous pouvons consulter le rapport en temps réel de notre vue d’application mobile pour confirmer que les données arrivent :

Le débogage d’une application mobile est notoirement difficile. Si vous voulez le faire sérieusement, vous pouvez utiliser un outil comme le proxy Charles, qui crée un flux de journal de toutes les requêtes réseau envoyées par votre application mobile. Vous n’avez même pas besoin d’accéder au code source pour le faire fonctionner !

Résumé

Comme avec mon guide Android, cet article devrait vraiment être une introduction au développement iOS, et non un tutoriel complet.

Le but est de vous donner la outils et confiance pour commencer à travailler avec le développement d’applications mobiles. Comprendre les capacités et les limites de Firebase est fondamental pour pouvoir travailler de manière fluide avec l’écosystème.

Travailler avec le développement d’applications mobiles est très éloigné du développement Web. Pour commencer, les IDE, SDK et langages de programmation à votre disposition sont bien plus restrictifs que le Far West qu’est le navigateur Web.

Kotlin et Swift ne vous permettent pas de faire toutes les choses folles que vous pouvez faire avec JavaScript, et il existe également des restrictions sur les types de manigances pouvant être exécutées au moment de l’exécution (donc pas de balises HTML personnalisées dans les conteneurs d’applications mobiles).

Néanmoins, le développement iOS a ses charmes, et Xcode peut être un excellent allié dans les moments où ce n’est pas une douleur totale dans le cul.

La beauté du développement d’applications mobiles réside dans la rapidité avec laquelle vous pouvez démarrer. Vous n’avez besoin de rien d’extravagant – juste une machine capable de gérer les périphériques virtuels, de bons tutoriels et un système solide tel que Firebase prenant une partie du relais.

Comme toujours, j’attends vos retours dans les commentaires ! Je suis sûr que je reviendrai plusieurs fois sur Firebase dans les prochains articles.