IONIC CLOUD FUNCTION: Utiliser le service Firebase Cloud Functions dans Ionic

Dans ce tutoriel Ionic Firebase Cloud Functions, nous allons voir comment utiliser le service cloud Functions de Firebase dans Ionic.

À quoi sert le service Cloud Functions ? À exécuter du code et des fonctions JavaScript en dehors de votre application Ionic.

Par exemple pour ne pas surcharger le code de votre application lors de l’inscription d’un utilisateur (lui envoyer un mail de bienvenu).

Ou encore pour effectuer des requêtes dans votre base de données chaque jour et compter les posts les plus populaires de votre réseau social.

Pour suivre ce tutoriel Ionic Firebase Cloud Function, nous allons suivre les étapes suivantes:

1. Configurer Firebase Cloud Functions pour Ionic
2. Créez votre première Cloud Functions
3. Exécuter une Firebase Cloud Functions de manière régulière
4. Effectuer des requêtes dans la base de données
5. Accéder aux requêtes via votre application Ionic & HTTP

1. Configurer Firebase Cloud Functions dans votre application Ionic

On commence par installer Firebase CLI dans notre projet Ionic, avec la commande npm suivante:

npm install firebase-tools -g

Si ce n’est pas déjà fait, authentifiez-vous à votre compte Google & Firebase pour continuer:

firebase login

Puis lancez la commande suivante pour sélectionner le service « Cloud Functions » de Firebase:

firebase init

Une fois ces opérations dans votre terminal terminées, vous devriez retrouver un dossier « functions » dans votre application Ionic.

Nous nous intéresserons en particulier au fichier index.ts pour rédiger nos functions.

2. Créer votre première fonction Firebase Cloud Function

Nous allons donc commencer par rédiger notre première fonction dans le fichier suivant:

functions/src/index.ts

Par défaut Firebase vous propose une première fonction « Hello World » préconçue, qui affiche simplement le célèbre message:

import * as functions from 'firebase-functions';

export const helloWorld = functions.https.onRequest((request, response) => {
  functions.logger.info("Hello logs!", {structuredData: true});
  response.send("Hello from Firebase!");
});

Pour tester cette première fonction, nous pouvons lancez la commande pour déployer uniquement nos cloud functions:

firebase deploy --only functions

Rendez -vous alors dans votre console Firebase pour actualiser votre page et visualiser votre première fonction de type HTTP:

Votre cloud function devrait ainsi être accessible à l’adresse suivante (à personnaliser avec votre projet Firebase):

https://us-central1-YOUR_PROJECT.cloudfunctions.net/helloWorld

Voilà le rendu de ma fonction « Hello World » dans un de mes projets Firebase:

Nous verrons à la suite du tutoriel comment effectuer une requête HTTP avec une de nos cloud functions depuis Ionic.

Passons maintenant à des fonctions plus utiles pour nos projets d’applications mobiles.

3. Exécuter une Firebase Cloud Function de manière régulière

Firebase et Google propose en effet une grande variété de fonctionnalités préconçues pour le backend de nos applications.

Celle-ci s’appellent par exemple les fonctions de planification (Shedules functions), dont je vous laisse la documentation détaillée:

https://firebase.google.com/docs/functions/schedule-functions

Voilà par exemple une fonction qui s’exécutera toutes les 5 minutes dans votre backend Firebase:

exports.scheduledFunction = functions.pubsub.schedule('every 5 minutes').onRun((context) => {
  console.log('This will be run every 5 minutes!');
  return null;
});

Dans votre console Firebase, voilà comment devrait apparaître votre nouvelle cloud function:

Il est ainsi possible d’effectuer régulièrement des opérations de calcul dans votre base de données Firebase.

Il est possible de préciser n’importe quel type de durée en minutes, heures ou jours.

Firebase propose également de s’adapter aux fuseaux horaires de chaque utilisateur pour cibler des même zones régionales à la fois.

4. Effectuer des requêtes dans la base de données avec Firebase Cloud Function

Il est également possible de manipuler nos bases de données Firebase avec les Cloud Functions.

En fait, nous pouvons nous abonner à certaines modifications dans la base de données par exemple lorsque qu’un nouveau document est ajouté à une collection.

Je vous laisse à nouveau la documentation détaillée pour que vous puissiez aller plus loin que ce tuto:

https://firebase.google.com/docs/firestore/extend-with-functions

La documentation de Firebase propose plusieurs exemple, comme celui-ci permettant de repérer lorsqu’un document est en train d’être modifié, créé ou supprimé:

exports.myFunction = functions.firestore
  .document('my-collection/{doc-id}')
  .onWrite((change, context) => { /* ... */ });

Voilà un autre exemple avec la collection users et de notre cloud function qui nous permet par exemple de repérer les nouveaux utilisateurs:

// Listen for changes in all documents in the 'users' collection
exports.useWildcard = functions.firestore
    .document('users/{userId}')
    .onWrite((change, context) => {
      // If we set `/users/marie` to {name: "Marie"} then
      // context.params.userId == "marie"
      // ... and ...
      // change.after.data() == {name: "Marie"}
    });

Une fois déployée, voilà comment apparaitrons vos fonctions de type Firestore:

Voilà donc la manipulation des bases de données Firebase à travers les cloud functions.

5. Accéder aux requêtes Firebase Cloud Functions via votre application Ionic et HTTP

Enfin il est aussi possible d’utiliser les Cloud Function depuis notre application Ionic, en utiliser le module HttpClient.

Voilà par exemple une fonction préconçue de Firebase qui permet de convertir une chaîne de caractère en majuscule:

export const myUppercaseFunction = functions.https.onCall((data, context) => {
    return {
        msg: data.coolMsg.toUpperCase(),
        date: new Date().getTime()
    };
});

Nous allons utiliser cette fonction depuis notre application Ionic. Pour cela nous devons déclarer dans le fichier racine:

src/app/app.module.ts

Les modules HttpClientModule et AngularFireFunctionsModule dans notre fichier et les déclarer plus bas dans nos imports[]:

import { HttpClientModule } from '@angular/common/http';
import { AngularFireFunctionsModule } from '@angular/fire/functions';

[...]

@NgModule({
  imports: [
    HttpClientModule,
    AngularFireFunctionsModule
  ],

Vous pouvez ensuite vous rendre dans votre page, pour moi la page Tab1:

src/app/tab1/tab1.page.ts

Et importez à nouveau les deux modules et les déclarer dans le constructor():

import { HttpClient } from '@angular/common/http';
import { AngularFireFunctions } from '@angular/fire/functions';

constructor(
  private http: HttpClient,
  private functions: AngularFireFunctions
)

Voilà alors pour la fonction de lecture HTTP avec votre URL:

callCloudFunction() {
  const callable = this.functions.httpsCallable('myUppercaseFunction');
  const obs = callable({ coolMsg: 'message à mettre en majuscule' });
  obs.subscribe(async res => {
    console.log('réponse: ' + res.msg);
  });
}