Hoy nos hemos levantado con ganas de compartir algunas tareas que realizamos a diario en el departamento de diseño de aplicaciones móviles. Así que si tú eres de los autodidactas seguro que te interesa saber un poco más sobre el desarrollo de una app.
Lo primero que debemos hacer es crear un proyecto en Firebase, donde deberemos indicar el nombre del proyecto, su ubicación y aceptar los términos pertinentes. Los proyectos abarcan las distintas aplicaciones, por lo que un proyecto puede tener asociadas varias apps.
Una vez creado, añadiremos una aplicación a elegir entre IOS, Android y aplicación web. Para instalar Analytics Firebase en nuestra app en Ionic deberemos añadir dos aplicaciones en Firebase, una para Android y otra para IOS.
Necesitaremos añadir lo siguiente por este orden:
- El paquete de GoogleService-Info.plist o google-services.json en IOS y Android. Lo obtendremos una vez añadido el nombre de paquete que te solicita Firebase al añadir un tipo de app.
- Una vez descargado GoogleService-Info.plist o google-services.json, deberemos colocarlo dentro de nuestro proyecto de ionic, al mismo nivel que la carpeta src, www o resources.
Es importante destacar que es necesario añadirlo también dentro de la plataforma específica de IOS y Android.
En Android lo añadiremos en la siguiente ruta: platforms\android\app\google-services.json y deberemos indicarlo en nuestro proyecto ionic de la siguiente forma:
<platform name="android">
<resource-file src="google-services.json" target="..\platforms\android\app\google-services.json" />
…
</platform>
<platform name="ios">
<resource-file src="GoogleService-Info.plist" />
...
</platform>
- Una vez colocado el JSON de Google services comenzaremos a instalar el plugin de Firebase Analytics, que aunque es una versión beta, numerosos usuarios comentan que funciona.
import { FirebaseAnalytics } from '@ionic-native/firebase-analytics';
providers: [
MobileAccessibility,
FirebaseAnalytics,
InAppBrowser
]
- Por último, dentro de las páginas que deseemos deberemos añadir el siguiente código:
constructor(private firebaseAnalytics: FirebaseAnalytics) {
this.firebaseAnalytics.logEvent('page_view', {page:"dashboard"})
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
}
Para más información consultar la documentación oficial donde podremos ver también una Repo en Github.
Y hasta aquí este sencillo tutorial. Si queréis saber más sobre desarrollo web o desarrollo de aplicaciones móviles seguid atentos a nuestras noticias. y, si, lo que queréis es hacer una aplicación móvil, ¡contad con nuestra empresa de diseño de aplicaciones móviles!
Horario de atención al cliente:
L-V 8.00-14.00
L-J 14.00-18.00