Firebase Desde Cero Configuración iOS en Xcode
Firebase Desde Cero Configuración iOS en Xcode

🔥 FIREBASE Tutorial - Configura Firebase y Xcode con Package Manager

Crear un proyecto de Firebase y configura tu app en Xcode con Swift Package Manager. Una vez configurada tu app iOS podrás utilizar los productos de Firebase. Utilizamos el Property Wrapper @UIApplicationDelegateAdaptor para inicializar Firebase en tu app iOS.

SwiftBeta

Tabla de contenido


👇 SÍGUEME PARA APRENDER SWIFTUI, SWIFT, XCODE, etc 👇
🤩 ¡Sígueme en Twitter!
▶️ ¡Suscríbete al canal!
🎁 ¡Apoya el canal!

Firebase Tutorial iOS, Configura Firebase en Xcode con Swift Package Manager

Al ser el primer post de esta serie de Firebase vamos a aprender cómo crear el proyecto en Firebase y cómo integrarlo en nuestra app en Xcode (con Swift Package Manager), al final del posts verás que la integración entre el proyecto de Firebase y el proyecto creado en Xcode está correctamente configurado 🎉.

El primer paso es crear el proyecto en https://console.firebase.google.com/u/0/

Inloggen – Google Accounts

Lo primero de todo que vamos hacer es crear un proyecto de cero. Al acceder al link de la console de Firebase deberemos ver todos nuestros proyectos, en nuestro caso no tenemos ninguno, es por eso que lo vemos vacío:

Bienvenida a Firebase
Bienvenida a Firebase

Si queremos crear uno nuevo proyecto pulsamos el button de Crear un proyecto. Ahí aparecerán distintos pasos que deberemos rellenar, vamos a ello!

Creamos el proyecto en Firebase, el primer paso es añadir el nombre
Creamos el proyecto en Firebase, el primer paso es añadir el nombre

En este paso añadimos el nombre de nuestro proyecto, lo he llamado ReadLater, pero podéis añadir cualquier otro nombre. Le damos a Continuar y nos aparece la siguiente paso:

Añadimos Google Analytics a nuestro proyecto de Firebase
Añadimos Google Analytics a nuestro proyecto de Firebase

Aquí nos preguntan si queremos activar Google Analytics para nuestro proyecto. En este paso nos recomiendan que lo activemos y como lo usaremos en futuros videos lo dejamos ya habilitado. Le damos a Continuar

En la siguiente paso debemos configurar Google Analytics, para ello seleccionamos una cuenta:

Configuramos Google Analytics
Configuramos Google Analytics

Si pulsas en el selector, aparece la opción de seleccionar una cuenta que ya hayas creado préviamente o la opción de crear una cuenta nueva, seleccionamos Crear una cuenta nueva:

Creamos una cuenta nueva de Google Analytics
Creamos una cuenta nueva de Google Analytics

Añadimos el nombre que queramos y le damos a Guardar

Damos un nombre a la cuenta nueva de Google Analytics
Damos un nombre a la cuenta nueva de Google Analytics

Al hacerlo apareceran más pasos para completar, en mi caso he escogido que la ubicación de Analytics sea España y he marcado que Acepto las condiciones de Google Analytics, finalmente le damos a Crear Proyecto.

Acabamos de configurar Google Analytics, indicamos país y marcamos las opciones obligatorias
Acabamos de configurar Google Analytics, indicamos país y marcamos las opciones obligatorias

Al hacerlo deeremos esperar unos segundos mientras se configura el proyecto:

Esperamos a que el proyecto de Firebase se cree
Esperamos a que el proyecto de Firebase se cree

Una vez ha finalizado, tendremos acceso a Firebase para nuestro proyecto que hemos llamado ReadLater. Aquí podemos observar un menú lateral izquierdo donde aparece: Authentication, Firestore Database, RealtimeDatabase, etc.

Una vez creado vemos la consola de nuestro proyecto de Firebase con todos los productos en el menu izquierdo
Una vez creado vemos la consola de nuestro proyecto de Firebase con todos los productos en el menu izquierdo

Registrar App

Pero antes de empezar a añadir alguna funcionalidad de Firebase a nuestra app, primero debemos configurar nuestro proyecto de Xcode. Vamos a ver los pasos que debemos seguir, para ello pulsamos en Comienza por agregar Firebase a tu app, en nuestro caso escogemos iOS.

Ahora agregamos Firebase a nuestra app en Xcode
Ahora agregamos Firebase a nuestra app en Xcode

El primer paso es registrar nuestra app, para ello el ID del paqutes de Apple que vamos a escoger es com.swiftbeta.ReadLater, este Bundle identifier lo añadiremos un poco más tarde cuando creemos nuestro proyecto en Xcode. También escogeré un sobrenombre de la app, la llamaré ReadLater.

Registramos la app dando un Bundle Identifier y un nombre
Registramos la app dando un Bundle Identifier y un nombre

Descargar archivo de configuración

Una vez tenemos estos campos rellenados, le damos a Registrar app, a continuación, deberemos descargar un archivo de configuración llamado GoogleService-Info.plist este archivo lo deberemos arrastrar donde tenemos todos los ficheros de nuestra app en Xcode.

Descargamos el GoogleService-Info.plist más tarde lo arrastraremos a nuestra app en Xcode (cuando la creemos en los próximos pasos)
Descargamos el GoogleService-Info.plist más tarde lo arrastraremos a nuestra app en Xcode (cuando la creemos en los próximos pasos)

Este fichero si lo abres contiene bastante información que se usará para inicializar Firebase en nuestra app más adelante. Descargamos el fichero y le damos a Siguiente para ver los siguientes pasos.

El archivo GoogleService-Info.plist que acabas de descargar no lo elimines, lo usaremos a continuación para añadirlo a nuestra app en Xcode

Agregar el SDK de Firebase

Ahora toca agregar Firebase a nuestro proyecto. Pero qué proyecto, aún no lo hemos creado, vamos hacerlo! Abrimos Xcode y clickamos en Create a new Xcode project, seguimos todos los pasos de este post

¿Cómo crear una app con Xcode?
Aprende a programar en mac desde cero con Xcode. Tutorial de cómo crear una app en Xcode paso a paso. Debemos seguir una serie de pasos, desde escoger el template de Xcode que queremos para nuestra app, hasta el nombre de la app, organization identifier, bundle identifier, lenguaje SwiftUI, etc

Pero cuando llegamos a la parte de configuración de nuestro nuevo proyecto, debemos escoger el mismo Bundle Identifier que habíamos escogido para configurar Firebase, y era com.swiftbeta.ReadLater

Creamos nuestra app con Xcode (tenemos que poner el mismo Bundle Identifier que hemos usado al configurar la app de Firebase)
Creamos nuestra app con Xcode (tenemos que poner el mismo Bundle Identifier que hemos usado al configurar la app de Firebase)

Una vez creado el proyecto, vamos a seguir las instrucciones de Firebase que aparecen en este paso, pero en lugar de usar Cocoapods (que es la opción por defecto que aparece cargada) vamos a escoger Swift Package Manager

📦 Aprender a usar Swift Package Manager en Español | Primeros pasos
¿Qué es Swift Package Manager? es una herramienta para manejar la distribución de código Swift. Aprender Swift Package Manager es muy sencillo, está integrado con Xcode y podemos añadir código de otros developers para usarlo en nuestras apps. También podemos crear módulos y reusar en otras apps.

Para ello, pulsamos en la opción de SwiftPM y nos redirigirá a la documentación de Firebase para añadir su SDK con Swift Package Manager.

Agregamos el SDK de Firebase, en nuestro caso vamos a usar Swift Package Manager
Agregamos el SDK de Firebase, en nuestro caso vamos a usar Swift Package Manager

Instalar Firebase con Swift Package Manager en Xcode

En Xcode vamos a File -> Add Packages y nos debería de aparecer un buscador, aquí añadimos la siguiente URL en el buscador

https://github.com/firebase/firebase-ios-sdk.git

Al añadirla al buscador automáticamente hará la busqueda para encontrar el código relacionado con ese repositorio.

Con la URL del repositorio del SDK de Facebook iOS la añadimos en la sección de Swift Package Manager
Con la URL del repositorio del SDK de Facebook iOS la añadimos en la sección de Swift Package Manager

Fíjate que aquí aparece la versión que queremos añadir, y en qué proyecto (en qué app lo queremos añadir) en nuestro caso aparece ya por defecto en el proyecto en el que estamos que es ReadLater. Clickamos en Add Package y esperamos.

Esperamos a que Xcode recupere el código del repositorio del SDK de Facebook
Esperamos a que Xcode recupere el código del repositorio del SDK de Facebook

Cuando acabe, aparecerá un listado de paquetes, de estos paquetes podemos seleccionar cual queremos integrar dentro de nuestro proyecto de Xcode.

Una vez Xcode ha encontrado toda la información del paquete escogemos los que queremos integrar dentro de nuestra app
Una vez Xcode ha encontrado toda la información del paquete escogemos los que queremos integrar dentro de nuestra app

Nosotros de momento vamos a seleccionar solo dos, ya que cuando añadamos nuevas funcionalidades a nuestra app como el login, base de datos, etc añadiremos la dependencias que necesitamos. Así que de momento solo marcamos:

  • FirebaseAnalytics
  • FirebaseAnalyticsSwift-Beta

Una vez instalado, verás que aparece la sección de Package Dependencies en el listado de ficheros con todas las dependencias que se necesitan para enviar un evento (trackear) a Firebase.

Hemos finalizado la integracións del SDK de Facebook con Swift Package Manager
Hemos finalizado la integracións del SDK de Facebook con Swift Package Manager

Una vez hemos añadido Firebase a nuestro proyecto, sigamos con los últimos pasos!

Agregar código de inicialización de Firebase en Xcode

Antes de añadir el código de inicialización que necesitamos para activar Firebase en nuestr app, recuerda que teníamos un fichero llamado GoogleService-Info.plist, vamos a arrastrarlo a nuestro proyecto de Xcode.

Arrastramos el fichero GoogleService-Info.plist a nuestro proyecto de Xcode
Arrastramos el fichero GoogleService-Info.plist a nuestro proyecto de Xcode

Al hacerlo aparecerá la siguiente pantala, vigila que estén marcados los mismo campos.

Vemos como nuestro fichero recien arrastrado aparece justo debajo de la vista ContentView
Vemos como nuestro fichero recien arrastrado aparece justo debajo de la vista ContentView

Una vez arrastrado el fichero, vamos a ver el código de inicialización que nos dice Firebase que debemos añadir. Pues nos vamos al AppDelegate, pero ¿qué ocurre? que nuestra app no tiene un AppDelegate. Lo que hacemos es, vamos a la clase de entrada de nuestra app que es ReadLaterApp, aquí dentro pegamos el código de inicialización de Firebase, y añadimos import Firebase en la cabecera del fichero. Verás que aparecen unos cuantos errores, borramos código que no necesitamos y hacemos algunas modificaciones, debería de quedar de la siguiente manera:

import SwiftUI
import Firebase

class AppDelegate: NSObject, UIApplicationDelegate {

  func application(_ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions:
                   [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    FirebaseApp.configure()
    return true
  }
}

@main
struct ReadLaterApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
Código para inicializar Firebase SDK en iOS

Pero ahora debemos inicializar la clase del AppDelegate dentro de ReadLaterApp, para hacerlo creamos una propiedad en ReadLaterApp que usa el Property Wrapper UIApplicationDelegateAdaptor, esto lo hacemos para poder acceder a la funcionalidad del AppDelegate. Con esta nueva propiedad el código quedaría de la siguiente manera:

import SwiftUI
import Firebase

class AppDelegate: NSObject, UIApplicationDelegate {

  func application(_ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions:
                   [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    FirebaseApp.configure()
    return true
  }
}

@main
struct ReadLaterApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
Usamos el Property Wrapper UIApplicationDelegateAdaptor con AppDelegate

Una vez hemos añadido el fichero de GoogleService-Info.plist y hemos añadido el código necesario para inicializar Firebase en nuestra app, vamos a seguir con el siguiente paso. Le damos a siguiente:

Seguimos con los pasos de Firebase para integrar su SDK en nuestra app de Xcode
Seguimos con los pasos de Firebase para integrar su SDK en nuestra app de Xcode

Siguientes pasos

Ahora ya podemos ir a la consola de Firebase y para ver que todo funciona perfectamente. Clickamos en Ir a la consola

Hemos finalizado la integración de nuestra app de Firebase con Xcode
Hemos finalizado la integración de nuestra app de Firebase con Xcode
Al ir a la consola, verás que ya aparece el icono de iOS con el nombre de ReadLater

Para ver que hemos inicializado correctamente Firebase, compilamos nuestra app y podemos ir a la sección de Analytics y clickar en la opción Dashboard. Allí veremos información en tiempo real

Vamos a nuestra consola de Firebase y vamos a la sección de Analytics del menú lateral izquierdo
Vamos a nuestra consola de Firebase y vamos a la sección de Analytics del menú lateral izquierdo

Dentro de la sección de Dashboard de Analytics, veremos algo parecido a la siguiente imagen:

En la sección de Analytics pulsamos en Realtime para ver como la integración ha funcionado perfectamente
En la sección de Analytics pulsamos en Realtime para ver como la integración ha funcionado perfectamente

Automáticamente el SDK de Firebase a enviado eventos por defecto, donde podemos ver que hay un user que ha entrado en nuestra app en los últimos 30 minutos y que procede de Spain

Podemos ver desde que ubicación están utilizando nuestra app
Podemos ver desde que ubicación están utilizando nuestra app

Si vamos a la pestaña de Realtime, podemos ver también más información en realtime de los users que estan usando nuestra app. Habrá una sección para hablar de estos eventos en futuros posts. Solo quería mostraros esta parte para que veáis que se ha integrado correctamente Firebase con vuestra app.

Conclusión

Hoy hemos aprendido a integrar Firebase SDK de iOS en Xcode usando Swift Package Manager. En los siguientes posts veremos más integraciones como por ejemplo la autenticación con Email y Password o Facebook para que tus users se puedan registrar o loguear en tu app.